summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_alert.scss54
-rw-r--r--src/objects/_alert.vars.scss22
-rw-r--r--src/objects/_avatar.scss194
-rw-r--r--src/objects/_avatar.vars.scss12
-rw-r--r--src/objects/_backdrop.scss24
-rw-r--r--src/objects/_button.scss460
-rw-r--r--src/objects/_button.vars.scss514
-rw-r--r--src/objects/_card.scss462
-rw-r--r--src/objects/_checkbox.scss380
-rw-r--r--src/objects/_divider.scss318
-rw-r--r--src/objects/_divider.vars.scss58
-rw-r--r--src/objects/_emoji.scss66
-rw-r--r--src/objects/_emoji.vars.scss6
-rw-r--r--src/objects/_field-label.scss110
-rw-r--r--src/objects/_figure.scss28
-rw-r--r--src/objects/_heading.scss90
-rw-r--r--src/objects/_heading.vars.scss24
-rw-r--r--src/objects/_icon.scss26
-rw-r--r--src/objects/_lightbox.scss208
-rw-r--r--src/objects/_lightbox.vars.scss12
-rw-r--r--src/objects/_menu.scss154
-rw-r--r--src/objects/_navbar.scss292
-rw-r--r--src/objects/_navbar.vars.scss102
-rw-r--r--src/objects/_palette.scss86
-rw-r--r--src/objects/_placeholders.scss22
-rw-r--r--src/objects/_popover.scss62
-rw-r--r--src/objects/_radio.scss248
-rw-r--r--src/objects/_side-nav.scss134
-rw-r--r--src/objects/_status-indicator.scss26
-rw-r--r--src/objects/_status-indicator.vars.scss18
-rw-r--r--src/objects/_switch.scss302
-rw-r--r--src/objects/_tabbar.scss174
-rw-r--r--src/objects/_table.scss232
-rw-r--r--src/objects/_text-field.scss286
-rw-r--r--src/objects/_thumbnail.scss160
-rw-r--r--src/objects/_thumbnail.vars.scss32
36 files changed, 2699 insertions, 2699 deletions
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index de0e913..697ac18 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -8,33 +8,33 @@
8@use 'alert.vars' as vars; 8@use 'alert.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('alert') { 13 @include bem.object('alert') {
14 padding-block: props.get(vars.$pad-b); 14 padding-block: props.get(vars.$pad-b);
15 padding-inline: props.get(vars.$pad-i); 15 padding-inline: props.get(vars.$pad-i);
16 background-color: props.get(vars.$bg-color); 16 background-color: props.get(vars.$bg-color);
17 border: props.get(vars.$border-width) solid transparent; 17 border: props.get(vars.$border-width) solid transparent;
18 border-color: props.get(vars.$border-color); 18 border-color: props.get(vars.$border-color);
19 border-radius: props.get(vars.$rounding); 19 border-radius: props.get(vars.$rounding);
20 box-shadow: 20 box-shadow:
21 props.get(vars.$shadow-x) 21 props.get(vars.$shadow-x)
22 props.get(vars.$shadow-y) 22 props.get(vars.$shadow-y)
23 props.get(vars.$shadow-blur) 23 props.get(vars.$shadow-blur)
24 props.get(vars.$shadow-grow) 24 props.get(vars.$shadow-grow)
25 props.get(vars.$shadow-color); 25 props.get(vars.$shadow-color);
26 26
27 @each $mod, $theme in vars.$themes-config { 27 @each $mod, $theme in vars.$themes-config {
28 @include bem.modifier($mod) { 28 @include bem.modifier($mod) {
29 background-color: props.get(vars.$themes, $theme, --bg-color); 29 background-color: props.get(vars.$themes, $theme, --bg-color);
30 border-color: props.get(vars.$themes, $theme, --border-color); 30 border-color: props.get(vars.$themes, $theme, --border-color);
31 box-shadow: 31 box-shadow:
32 props.get(vars.$shadow-x) 32 props.get(vars.$shadow-x)
33 props.get(vars.$shadow-y) 33 props.get(vars.$shadow-y)
34 props.get(vars.$shadow-blur) 34 props.get(vars.$shadow-blur)
35 props.get(vars.$shadow-grow) 35 props.get(vars.$shadow-grow)
36 props.get(vars.$themes, $theme, --shadow-color); 36 props.get(vars.$themes, $theme, --shadow-color);
37 } 37 }
38 } 38 }
39 } 39 }
40} 40}
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index f23928d..62d3414 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -17,20 +17,20 @@ $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-
17$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; 17$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
18 18
19$themes-config: ( 19$themes-config: (
20 accent: --accent, 20 accent: --accent,
21 positive: --positive, 21 positive: --positive,
22 negative: --negative, 22 negative: --negative,
23 warning: --warning, 23 warning: --warning,
24) !default; 24) !default;
25 25
26$themes: props.def(--o-alert, (), 'color'); 26$themes: props.def(--o-alert, (), 'color');
27 27
28@each $theme, $key in $themes-config { 28@each $theme, $key in $themes-config {
29 $themes: props.merge($themes, ( 29 $themes: props.merge($themes, (
30 $key: ( 30 $key: (
31 --bg-color: props.get(core.$theme, --bg-l2), 31 --bg-color: props.get(core.$theme, --bg-l2),
32 --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800), 32 --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
33 --shadow-color: props.get(core.$theme, $key, --200), 33 --shadow-color: props.get(core.$theme, $key, --200),
34 ) 34 )
35 )); 35 ));
36} 36}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 81396e3..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -7,120 +7,120 @@
7@use 'avatar.vars' as vars; 7@use 'avatar.vars' as vars;
8 8
9@mixin status($indicator-size) { 9@mixin status($indicator-size) {
10 @include bem.elem('status') { 10 @include bem.elem('status') {
11 inline-size: props.get($indicator-size); 11 inline-size: props.get($indicator-size);
12 block-size: props.get($indicator-size); 12 block-size: props.get($indicator-size);
13 13
14 @include bem.sibling-elem('content') { 14 @include bem.sibling-elem('content') {
15 mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at 15 mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
16 calc(100% - .5 * props.get($indicator-size)) 16 calc(100% - .5 * props.get($indicator-size))
17 calc(100% - .5 * props.get($indicator-size)), 17 calc(100% - .5 * props.get($indicator-size)),
18 transparent 95%, 18 transparent 95%,
19 #fff); 19 #fff);
20 } 20 }
21 } 21 }
22} 22}
23 23
24@mixin styles { 24@mixin styles {
25 @include materialize-at-root(meta.module-variables('vars')); 25 @include materialize-at-root(meta.module-variables('vars'));
26 26
27 @include bem.object('avatar') { 27 @include bem.object('avatar') {
28 position: relative; 28 position: relative;
29 display: inline-block; 29 display: inline-block;
30 font-size: props.get(vars.$font-size); 30 font-size: props.get(vars.$font-size);
31 font-style: normal; 31 font-style: normal;
32 vertical-align: .05em; 32 vertical-align: .05em;
33 border-radius: props.get(vars.$rounding); 33 border-radius: props.get(vars.$rounding);
34 34
35 &::after { 35 &::after {
36 position: absolute; 36 position: absolute;
37 inset: calc(-1 * props.get(vars.$key-focus--border-offset)); 37 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
38 z-index: 1; 38 z-index: 1;
39 display: none; 39 display: none;
40 pointer-events: none; 40 pointer-events: none;
41 content: ''; 41 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
42 border: props.get(vars.$key-focus--border-offset) solid transparent; 42 content: '';
43 border-radius: props.get(vars.$rounding); 43 border: props.get(vars.$key-focus--border-offset) solid transparent;
44 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 44 border-radius: props.get(vars.$rounding);
45 box-shadow: 45 box-shadow:
46 0 46 0
47 0 47 0
48 0 48 0
49 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 49 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
50 props.get(vars.$key-focus--outline-color); 50 props.get(vars.$key-focus--outline-color);
51 } 51 }
52 52
53 @include bem.elem('status') { 53 @include bem.elem('status') {
54 position: absolute; 54 position: absolute;
55 inset-block-end: 0; 55 inset-block-end: 0;
56 inset-inline-end: 0; 56 inset-inline-end: 0;
57 } 57 }
58 58
59 @include status(vars.$indicator-size); 59 @include status(vars.$indicator-size);
60 60
61 @include bem.elem('content') { 61 @include bem.elem('content') {
62 display: block; 62 display: block;
63 inline-size: props.get(vars.$size); 63 inline-size: props.get(vars.$size);
64 block-size: props.get(vars.$size); 64 block-size: props.get(vars.$size);
65 line-height: props.get(vars.$size); 65 line-height: props.get(vars.$size);
66 text-align: center; 66 text-align: center;
67 object-fit: cover; 67 object-fit: cover;
68 object-position: center center; 68 object-position: center center;
69 border-radius: props.get(vars.$rounding); 69 border-radius: props.get(vars.$rounding);
70 } 70 }
71 71
72 @include bem.modifier('circle') { 72 @include bem.modifier('circle') {
73 border-radius: 100%; 73 border-radius: 100%;
74 74
75 &::after { 75 &::after {
76 border-radius: 100%; 76 border-radius: 100%;
77 } 77 }
78 78
79 @include bem.elem('content') { 79 @include bem.elem('content') {
80 border-radius: 100%; 80 border-radius: 100%;
81 } 81 }
82 } 82 }
83 83
84 @include bem.modifier('placeholder') { 84 @include bem.modifier('placeholder') {
85 @include bem.elem('content') { 85 @include bem.elem('content') {
86 background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); 86 background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
87 } 87 }
88 } 88 }
89 89
90 @include bem.modifier('colored') { 90 @include bem.modifier('colored') {
91 @include bem.elem('content') { 91 @include bem.elem('content') {
92 color: #fff; 92 color: #fff;
93 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); 93 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
94 } 94 }
95 } 95 }
96 96
97 @include bem.modifier('colored-gradient') { 97 @include bem.modifier('colored-gradient') {
98 @include bem.elem('content') { 98 @include bem.elem('content') {
99 color: #fff; 99 color: #fff;
100 background: linear-gradient(props.get(vars.$bg-angle), 100 background: linear-gradient(props.get(vars.$bg-angle),
101 hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), 101 hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
102 hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); 102 hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
103 } 103 }
104 } 104 }
105 105
106 @each $mod, $size, $font-size, $indicator-size in vars.$sizes { 106 @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
107 @include bem.modifier($mod) { 107 @include bem.modifier($mod) {
108 font-size: props.get($font-size); 108 font-size: props.get($font-size);
109 109
110 @include status($indicator-size); 110 @include status($indicator-size);
111 111
112 @include bem.elem('content') { 112 @include bem.elem('content') {
113 inline-size: props.get($size); 113 inline-size: props.get($size);
114 block-size: props.get($size); 114 block-size: props.get($size);
115 line-height: props.get($size); 115 line-height: props.get($size);
116 } 116 }
117 } 117 }
118 } 118 }
119 119
120 &:focus-visible { 120 &:focus-visible {
121 &::after { 121 &::after {
122 display: block; 122 display: block;
123 } 123 }
124 } 124 }
125 } 125 }
126} 126}
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 9986de5..2374f5a 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -49,10 +49,10 @@ $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.
49$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 49$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
50 50
51$sizes: ( 51$sizes: (
52 'xs' $size--xs $font-size--xs $indicator-size--xs, 52 'xs' $size--xs $font-size--xs $indicator-size--xs,
53 'sm' $size--sm $font-size--sm $indicator-size--sm, 53 'sm' $size--sm $font-size--sm $indicator-size--sm,
54 'lg' $size--lg $font-size--lg $indicator-size--lg, 54 'lg' $size--lg $font-size--lg $indicator-size--lg,
55 'xl' $size--xl $font-size--xl $indicator-size--xl, 55 'xl' $size--xl $font-size--xl $indicator-size--xl,
56 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, 56 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl,
57 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, 57 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
58) !default; 58) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9cc9e2e..346cf5f 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -7,17 +7,17 @@
7@use 'backdrop.vars' as vars; 7@use 'backdrop.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('backdrop') { 12 @include bem.object('backdrop') {
13 position: fixed; 13 position: fixed;
14 inset: 0; 14 inset: 0;
15 z-index: props.get(vars.$z-index); 15 z-index: props.get(vars.$z-index);
16 box-sizing: border-box; 16 box-sizing: border-box;
17 display: flex; 17 display: flex;
18 flex-direction: column; 18 flex-direction: column;
19 overflow: auto; 19 overflow: auto;
20 background-color: props.get(vars.$bg-color); 20 background-color: props.get(vars.$bg-color);
21 backdrop-filter: blur(props.get(vars.$blur)); 21 backdrop-filter: blur(props.get(vars.$blur));
22 } 22 }
23} 23}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 5ba8576..8163cf9 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -10,276 +10,276 @@
10@use 'button.vars' as vars; 10@use 'button.vars' as vars;
11 11
12@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
13 color: props.get($theme, list.join($key, --disabled --label-color)...); 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...); 14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
15 border-color: props.get($theme, list.join($key, --disabled --border-color)...); 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
16 16
17 &::after { 17 &::after {
18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
19 box-shadow: 19 box-shadow:
20 0 20 0
21 0 21 0
22 0 22 0
23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
24 props.get($theme, list.join($key, --key-focus --outline-color)...); 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
25 } 25 }
26 26
27 &:link, 27 &:link,
28 &:visited, 28 &:visited,
29 &:enabled { 29 &:enabled {
30 color: props.get($theme, list.join($key, --label-color)...); 30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...); 31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...); 32 border-color: props.get($theme, list.join($key, --border-color)...);
33 box-shadow: 33 box-shadow:
34 props.get(vars.$shadow-x) 34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y) 35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur) 36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow) 37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...); 38 props.get($theme, list.join($key, --shadow-color)...);
39 39
40 &:hover, 40 &:hover,
41 &:focus-visible { 41 &:focus-visible {
42 color: props.get($theme, list.join($key, --hover --label-color)...); 42 color: props.get($theme, list.join($key, --hover --label-color)...);
43 background-color: props.get($theme, list.join($key, --hover --bg-color)...); 43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
44 border-color: props.get($theme, list.join($key, --hover --border-color)...); 44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
45 } 45 }
46 46
47 &:active { 47 &:active {
48 color: props.get($theme, list.join($key, --active --label-color)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
49 background-color: props.get($theme, list.join($key, --active --bg-color)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
50 border-color: props.get($theme, list.join($key, --active --border-color)...); 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none; 51 box-shadow: none;
52 } 52 }
53 } 53 }
54 54
55 @include bem.modifier('badge') { 55 @include bem.modifier('badge') {
56 color: props.get($theme, list.join($key, --badge --label-color)...); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
57 background-color: props.get($theme, list.join($key, --badge --bg-color)...); 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
58 border-color: props.get($theme, list.join($key, --badge --border-color)...); 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
59 box-shadow: none; 59 box-shadow: none;
60 60
61 &:link, 61 &:link,
62 &:visited, 62 &:visited,
63 &:enabled { 63 &:enabled {
64 color: props.get($theme, list.join($key, --badge --label-color)...); 64 color: props.get($theme, list.join($key, --badge --label-color)...);
65 background-color: props.get($theme, list.join($key, --badge --bg-color)...); 65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
66 border-color: props.get($theme, list.join($key, --badge --border-color)...); 66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
67 box-shadow: none; 67 box-shadow: none;
68 68
69 &:hover, 69 &:hover,
70 &:focus-visible { 70 &:focus-visible {
71 color: props.get($theme, list.join($key, --badge --hover --label-color)...); 71 color: props.get($theme, list.join($key, --badge --hover --label-color)...);
72 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...); 72 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); 73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
74 } 74 }
75 75
76 &:active { 76 &:active {
77 color: props.get($theme, list.join($key, --badge --active --label-color)...); 77 color: props.get($theme, list.join($key, --badge --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...); 78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...); 79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
80 } 80 }
81 } 81 }
82 } 82 }
83 83
84 @include bem.modifier('quiet') { 84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); 85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
86 background-color: transparent; 86 background-color: transparent;
87 border-color: transparent; 87 border-color: transparent;
88 88
89 &:link, 89 &:link,
90 &:visited, 90 &:visited,
91 &:enabled { 91 &:enabled {
92 color: props.get($theme, list.join($key, --quiet --label-color)...); 92 color: props.get($theme, list.join($key, --quiet --label-color)...);
93 background-color: transparent; 93 background-color: transparent;
94 border-color: transparent; 94 border-color: transparent;
95 box-shadow: none; 95 box-shadow: none;
96 96
97 &:hover, 97 &:hover,
98 &:focus-visible { 98 &:focus-visible {
99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...); 99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); 100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
101 border-color: transparent; 101 border-color: transparent;
102 } 102 }
103 103
104 &:active { 104 &:active {
105 color: props.get($theme, list.join($key, --quiet --active --label-color)...); 105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); 106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
107 border-color: transparent; 107 border-color: transparent;
108 } 108 }
109 } 109 }
110 } 110 }
111 111
112 @include bem.is('highlighted') { 112 @include bem.is('highlighted') {
113 &:link, 113 &:link,
114 &:visited, 114 &:visited,
115 &:enabled { 115 &:enabled {
116 &, 116 &,
117 &:hover, 117 &:hover,
118 &:focus-visible { 118 &:focus-visible {
119 border-color: props.get($theme, list.join($key, --highlighted --border-color)...); 119 border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
120 } 120 }
121 121
122 box-shadow: 122 box-shadow:
123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), 123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
124 props.get(vars.$shadow-x) 124 props.get(vars.$shadow-x)
125 props.get(vars.$shadow-y) 125 props.get(vars.$shadow-y)
126 props.get(vars.$shadow-blur) 126 props.get(vars.$shadow-blur)
127 props.get(vars.$shadow-grow) 127 props.get(vars.$shadow-grow)
128 props.get($theme, list.join($key, --highlighted --shadow-color)...); 128 props.get($theme, list.join($key, --highlighted --shadow-color)...);
129 129
130 &:focus-visible { 130 &:focus-visible {
131 box-shadow: 131 box-shadow:
132 props.get(vars.$shadow-x) 132 props.get(vars.$shadow-x)
133 props.get(vars.$shadow-y) 133 props.get(vars.$shadow-y)
134 props.get(vars.$shadow-blur) 134 props.get(vars.$shadow-blur)
135 props.get(vars.$shadow-grow) 135 props.get(vars.$shadow-grow)
136 props.get($theme, list.join($key, --shadow-color)...); 136 props.get($theme, list.join($key, --shadow-color)...);
137 } 137 }
138 } 138 }
139 } 139 }
140 140
141 @include bem.is('selected') { 141 @include bem.is('selected') {
142 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 142 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
143 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 143 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
144 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); 144 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
145 145
146 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') { 146 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
147 color: props.get($theme, list.join($key, --selected --label-color)...); 147 color: props.get($theme, list.join($key, --selected --label-color)...);
148 background-color: props.get($theme, list.join($key, --selected --bg-color)...); 148 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
149 border-color: props.get($theme, list.join($key, --selected --border-color)...); 149 border-color: props.get($theme, list.join($key, --selected --border-color)...);
150 } 150 }
151 151
152 &:link, 152 &:link,
153 &:visited, 153 &:visited,
154 &:enabled { 154 &:enabled {
155 &:hover, 155 &:hover,
156 &:focus-visible { 156 &:focus-visible {
157 color: props.get($theme, list.join($key, --selected --hover --label-color)...); 157 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
158 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); 158 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
159 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); 159 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
160 } 160 }
161 161
162 &:active { 162 &:active {
163 color: props.get($theme, list.join($key, --selected --active --label-color)...); 163 color: props.get($theme, list.join($key, --selected --active --label-color)...);
164 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); 164 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
165 border-color: props.get($theme, list.join($key, --selected --active --border-color)...); 165 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
166 } 166 }
167 } 167 }
168 } 168 }
169} 169}
170 170
171@mixin styles { 171@mixin styles {
172 @include materialize-at-root(meta.module-variables('vars')); 172 @include materialize-at-root(meta.module-variables('vars'));
173 173
174 @include bem.object('button') { 174 @include bem.object('button') {
175 position: relative; 175 position: relative;
176 display: inline-block; 176 display: inline-block;
177 padding-block: props.get(vars.$pad-b); 177 padding-block: props.get(vars.$pad-b);
178 padding-inline: props.get(vars.$pad-i); 178 padding-inline: props.get(vars.$pad-i);
179 line-height: props.get(vars.$line-height); 179 text-overflow: ellipsis;
180 font-size: props.get(vars.$font-size); 180 font-size: props.get(vars.$font-size);
181 text-align: center; 181 line-height: props.get(vars.$line-height);
182 text-decoration: none; 182 text-align: center;
183 text-overflow: ellipsis; 183 white-space: nowrap;
184 white-space: nowrap; 184 text-decoration: none;
185 border: props.get(vars.$border-width) solid transparent; 185 border: props.get(vars.$border-width) solid transparent;
186 border-radius: props.get(vars.$rounding); 186 border-radius: props.get(vars.$rounding);
187 transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s; 187 transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s;
188 188
189 &::after { 189 &::after {
190 position: absolute; 190 position: absolute;
191 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); 191 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
192 z-index: 1; 192 z-index: 1;
193 display: none; 193 display: none;
194 pointer-events: none; 194 pointer-events: none;
195 content: ''; 195 outline: transparent solid props.get(vars.$key-focus--border-width);
196 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 196 content: '';
197 outline: transparent solid props.get(vars.$key-focus--border-width); 197 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
198 } 198 }
199 199
200 &:link, 200 &:link,
201 &:visited, 201 &:visited,
202 &:enabled { 202 &:enabled {
203 &:focus-visible { 203 &:focus-visible {
204 transition: none; 204 transition: none;
205 205
206 &::after { 206 &::after {
207 display: block; 207 display: block;
208 } 208 }
209 } 209 }
210 } 210 }
211 211
212 @include bem.elem('label') { 212 @include bem.elem('label') {
213 margin-inline: props.get(vars.$pad-i-label); 213 margin-inline: props.get(vars.$pad-i-label);
214 } 214 }
215 215
216 @include -apply-theme(vars.$default-theme); 216 @include -apply-theme(vars.$default-theme);
217 217
218 @each $theme in map.keys(props.get(vars.$themes)) { 218 @each $theme in map.keys(props.get(vars.$themes)) {
219 @include bem.modifier(string.slice($theme, 3)) { 219 @include bem.modifier(string.slice($theme, 3)) {
220 @include -apply-theme(vars.$themes, $theme); 220 @include -apply-theme(vars.$themes, $theme);
221 } 221 }
222 } 222 }
223 223
224 @include bem.modifier('pill') { 224 @include bem.modifier('pill') {
225 padding-inline: props.get(vars.$pad-i-pill); 225 padding-inline: props.get(vars.$pad-i-pill);
226 border-radius: 100em; 226 border-radius: 100em;
227 227
228 &::after { 228 &::after {
229 border-radius: 100em; 229 border-radius: 100em;
230 } 230 }
231 } 231 }
232 232
233 @include bem.modifier('icon') { 233 @include bem.modifier('icon') {
234 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 234 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
235 padding-inline: 0; 235 padding-inline: 0;
236 } 236 }
237 237
238 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 238 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
239 @include bem.modifier($mod) { 239 @include bem.modifier($mod) {
240 padding-block: props.get($pad-b); 240 padding-block: props.get($pad-b);
241 padding-inline: props.get($pad-i); 241 padding-inline: props.get($pad-i);
242 font-size: props.get($font-size); 242 font-size: props.get($font-size);
243 243
244 @include bem.elem('label') { 244 @include bem.elem('label') {
245 margin-inline: props.get($pad-i-label); 245 margin-inline: props.get($pad-i-label);
246 } 246 }
247 247
248 @include bem.modifier('pill') { 248 @include bem.modifier('pill') {
249 padding-inline: props.get($pad-i-pill); 249 padding-inline: props.get($pad-i-pill);
250 } 250 }
251 251
252 @include bem.modifier('icon') { 252 @include bem.modifier('icon') {
253 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); 253 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
254 padding-inline: 0; 254 padding-inline: 0;
255 } 255 }
256 } 256 }
257 } 257 }
258 258
259 @include bem.modifier('align-block') { 259 @include bem.modifier('align-block') {
260 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); 260 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
261 261
262 @include bem.modifier('pill') { 262 @include bem.modifier('pill') {
263 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); 263 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
264 } 264 }
265 265
266 @include bem.modifier('icon') { 266 @include bem.modifier('icon') {
267 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); 267 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
268 } 268 }
269 269
270 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 270 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
271 @include bem.modifier($mod) { 271 @include bem.modifier($mod) {
272 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); 272 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
273 273
274 @include bem.modifier('pill') { 274 @include bem.modifier('pill') {
275 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); 275 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
276 } 276 }
277 277
278 @include bem.modifier('icon') { 278 @include bem.modifier('icon') {
279 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); 279 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
280 } 280 }
281 } 281 }
282 } 282 }
283 } 283 }
284 } 284 }
285} 285}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 00a11c3..6e2298f 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -41,334 +41,334 @@ $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props
41$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 41$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
42 42
43$fixed-sizes: ( 43$fixed-sizes: (
44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, 44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, 45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, 46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
47) !default; 47) !default;
48 48
49$themes: props.def(--o-button, (), 'color'); 49$themes: props.def(--o-button, (), 'color');
50 50
51$default-theme-override: () !default; 51$default-theme-override: () !default;
52$default-theme: map.deep-merge(( 52$default-theme: map.deep-merge((
53 --bg-color: props.get(core.$theme, --bg-l2), 53 --bg-color: props.get(core.$theme, --bg-l2),
54 --label-color: props.get(core.$theme, --text), 54 --label-color: props.get(core.$theme, --text),
55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
56 --shadow-color: props.get(core.$theme, --shadow), 56 --shadow-color: props.get(core.$theme, --shadow),
57 57
58 --hover: ( 58 --hover: (
59 --bg-color: props.get(core.$theme, --bg-l1), 59 --bg-color: props.get(core.$theme, --bg-l1),
60 --label-color: props.get(core.$theme, --heading), 60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border), 61 --border-color: props.get(core.$theme, --border),
62 ), 62 ),
63 63
64 --active: ( 64 --active: (
65 --bg-color: props.get(core.$theme, --border-mute), 65 --bg-color: props.get(core.$theme, --border-mute),
66 --label-color: props.get(core.$theme, --heading), 66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --border-strong), 67 --border-color: props.get(core.$theme, --border-strong),
68 ), 68 ),
69 69
70 --disabled: ( 70 --disabled: (
71 --bg-color: transparent, 71 --bg-color: transparent,
72 --label-color: props.get(core.$theme, --border-strong), 72 --label-color: props.get(core.$theme, --border-strong),
73 --border-color: props.get(core.$theme, --text-disabled), 73 --border-color: props.get(core.$theme, --text-disabled),
74 ), 74 ),
75 75
76 --key-focus: ( 76 --key-focus: (
77 --border-color: props.get(core.$theme, --focus, --border), 77 --border-color: props.get(core.$theme, --focus, --border),
78 --outline-color: props.get(core.$theme, --focus, --outline), 78 --outline-color: props.get(core.$theme, --focus, --outline),
79 ), 79 ),
80 80
81 --highlighted: ( 81 --highlighted: (
82 --border-color: props.get(core.$theme, --focus, --border), 82 --border-color: props.get(core.$theme, --focus, --border),
83 --shadow-color: props.get(core.$theme, --focus, --outline), 83 --shadow-color: props.get(core.$theme, --focus, --outline),
84 ), 84 ),
85 85
86 --selected: ( 86 --selected: (
87 --bg-color: props.get(core.$theme, --text), 87 --bg-color: props.get(core.$theme, --text),
88 --label-color: props.get(core.$theme, --base, --50), 88 --label-color: props.get(core.$theme, --base, --50),
89 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), 89 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
90 90
91 --hover: ( 91 --hover: (
92 --bg-color: props.get(core.$theme, --heading), 92 --bg-color: props.get(core.$theme, --heading),
93 --label-color: props.get(core.$theme, --base, --50), 93 --label-color: props.get(core.$theme, --base, --50),
94 --border-color: props.get(core.$theme, --heading), 94 --border-color: props.get(core.$theme, --heading),
95 ), 95 ),
96 96
97 --active: ( 97 --active: (
98 --bg-color: props.get(core.$theme, --heading), 98 --bg-color: props.get(core.$theme, --heading),
99 --label-color: props.get(core.$theme, --base, --50), 99 --label-color: props.get(core.$theme, --base, --50),
100 --border-color: props.get(core.$theme, --heading), 100 --border-color: props.get(core.$theme, --heading),
101 ), 101 ),
102 102
103 --disabled: ( 103 --disabled: (
104 --bg-color: props.get(core.$theme, --border-mute), 104 --bg-color: props.get(core.$theme, --border-mute),
105 --label-color: props.get(core.$theme, --border-strong), 105 --label-color: props.get(core.$theme, --border-strong),
106 --border-color: props.get(core.$theme, --border-mute), 106 --border-color: props.get(core.$theme, --border-mute),
107 ), 107 ),
108 ), 108 ),
109 109
110 --badge: ( 110 --badge: (
111 --bg-color: props.get(core.$theme, --border-mute), 111 --bg-color: props.get(core.$theme, --border-mute),
112 --label-color: props.get(core.$theme, --heading), 112 --label-color: props.get(core.$theme, --heading),
113 --border-color: props.get(core.$theme, --border-mute), 113 --border-color: props.get(core.$theme, --border-mute),
114 114
115 --hover: ( 115 --hover: (
116 --bg-color: props.get(core.$theme, --border), 116 --bg-color: props.get(core.$theme, --border),
117 --label-color: props.get(core.$theme, --heading), 117 --label-color: props.get(core.$theme, --heading),
118 --border-color: props.get(core.$theme, --border), 118 --border-color: props.get(core.$theme, --border),
119 ), 119 ),
120 120
121 --active: ( 121 --active: (
122 --bg-color: props.get(core.$theme, --border-strong), 122 --bg-color: props.get(core.$theme, --border-strong),
123 --label-color: props.get(core.$theme, --heading), 123 --label-color: props.get(core.$theme, --heading),
124 --border-color: props.get(core.$theme, --border-strong), 124 --border-color: props.get(core.$theme, --border-strong),
125 ), 125 ),
126 ), 126 ),
127 127
128 --quiet: ( 128 --quiet: (
129 --label-color: props.get(core.$theme, --text), 129 --label-color: props.get(core.$theme, --text),
130 130
131 --hover: ( 131 --hover: (
132 --bg-color: props.get(core.$theme, --border-mute), 132 --bg-color: props.get(core.$theme, --border-mute),
133 --label-color: props.get(core.$theme, --heading), 133 --label-color: props.get(core.$theme, --heading),
134 ), 134 ),
135 135
136 --active: ( 136 --active: (
137 --bg-color: props.get(core.$theme, --border), 137 --bg-color: props.get(core.$theme, --border),
138 --label-color: props.get(core.$theme, --heading), 138 --label-color: props.get(core.$theme, --heading),
139 ), 139 ),
140 140
141 --disabled: ( 141 --disabled: (
142 --label-color: props.get(core.$theme, --border-strong), 142 --label-color: props.get(core.$theme, --border-strong),
143 ), 143 ),
144 ), 144 ),
145), $default-theme-override) !default; 145), $default-theme-override) !default;
146$default-theme: props.def(--o-button, $default-theme, 'color'); 146$default-theme: props.def(--o-button, $default-theme, 'color');
147 147
148$default-theme-dark-override: () !default; 148$default-theme-dark-override: () !default;
149$default-theme-dark: map.deep-merge(( 149$default-theme-dark: map.deep-merge((
150 --bg-color: props.get(core.$theme, --border-mute), 150 --bg-color: props.get(core.$theme, --border-mute),
151 --border-color: props.get(core.$theme, --border-mute), 151 --border-color: props.get(core.$theme, --border-mute),
152 152
153 --hover: ( 153 --hover: (
154 --bg-color: props.get(core.$theme, --border), 154 --bg-color: props.get(core.$theme, --border),
155 --border-color: props.get(core.$theme, --border), 155 --border-color: props.get(core.$theme, --border),
156 ), 156 ),
157 157
158 --active: ( 158 --active: (
159 --bg-color: props.get(core.$theme, --border-strong), 159 --bg-color: props.get(core.$theme, --border-strong),
160 --border-color: props.get(core.$theme, --border-strong), 160 --border-color: props.get(core.$theme, --border-strong),
161 ), 161 ),
162 162
163 --selected: ( 163 --selected: (
164 --border-color: props.get(core.$theme, --text), 164 --border-color: props.get(core.$theme, --text),
165 ), 165 ),
166), $default-theme-override) !default; 166), $default-theme-override) !default;
167$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); 167$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
168 168
169@each $theme in map.keys(props.get(core.$transparent-colors)) { 169@each $theme in map.keys(props.get(core.$transparent-colors)) {
170 $button-theme: --static-#{string.slice($theme, 3)}; 170 $button-theme: --static-#{string.slice($theme, 3)};
171 171
172 $themes: props.merge($themes, ( 172 $themes: props.merge($themes, (
173 $button-theme: ( 173 $button-theme: (
174 --bg-color: props.get(core.$transparent-colors, $theme, --200), 174 --bg-color: props.get(core.$transparent-colors, $theme, --200),
175 --label-color: props.get(core.$transparent-colors, $theme, --900), 175 --label-color: props.get(core.$transparent-colors, $theme, --900),
176 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), 176 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
177 --shadow-color: props.get(core.$transparent-colors, --black, --200), 177 --shadow-color: props.get(core.$transparent-colors, --black, --200),
178 178
179 --hover: ( 179 --hover: (
180 --bg-color: props.get(core.$transparent-colors, $theme, --300), 180 --bg-color: props.get(core.$transparent-colors, $theme, --300),
181 --label-color: props.get(core.$transparent-colors, $theme, --900), 181 --label-color: props.get(core.$transparent-colors, $theme, --900),
182 --border-color: props.get(core.$transparent-colors, $theme, --400), 182 --border-color: props.get(core.$transparent-colors, $theme, --400),
183 ), 183 ),
184 184
185 --active: ( 185 --active: (
186 --bg-color: props.get(core.$transparent-colors, $theme, --400), 186 --bg-color: props.get(core.$transparent-colors, $theme, --400),
187 --label-color: props.get(core.$transparent-colors, $theme, --900), 187 --label-color: props.get(core.$transparent-colors, $theme, --900),
188 --border-color: props.get(core.$transparent-colors, $theme, --500), 188 --border-color: props.get(core.$transparent-colors, $theme, --500),
189 ), 189 ),
190 190
191 --disabled: ( 191 --disabled: (
192 --bg-color: props.get(core.$transparent-colors, $theme, --100), 192 --bg-color: props.get(core.$transparent-colors, $theme, --100),
193 --label-color: props.get(core.$transparent-colors, $theme, --500), 193 --label-color: props.get(core.$transparent-colors, $theme, --500),
194 --border-color: props.get(core.$transparent-colors, $theme, --300), 194 --border-color: props.get(core.$transparent-colors, $theme, --300),
195 ), 195 ),
196 196
197 --key-focus: ( 197 --key-focus: (
198 --border-color: props.get(core.$transparent-colors, $theme, --900), 198 --border-color: props.get(core.$transparent-colors, $theme, --900),
199 --outline-color: props.get(core.$transparent-colors, $theme, --300), 199 --outline-color: props.get(core.$transparent-colors, $theme, --300),
200 ), 200 ),
201 201
202 --highlighted: ( 202 --highlighted: (
203 --border-color: props.get(core.$transparent-colors, $theme, --900), 203 --border-color: props.get(core.$transparent-colors, $theme, --900),
204 --shadow-color: props.get(core.$transparent-colors, --black, --200), 204 --shadow-color: props.get(core.$transparent-colors, --black, --200),
205 ), 205 ),
206 206
207 --selected: ( 207 --selected: (
208 --bg-color: props.get(core.$transparent-colors, $theme, --800), 208 --bg-color: props.get(core.$transparent-colors, $theme, --800),
209 --label-color: props.get(core.$transparent-colors, $theme, --text), 209 --label-color: props.get(core.$transparent-colors, $theme, --text),
210 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), 210 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
211 211
212 --hover: ( 212 --hover: (
213 --bg-color: props.get(core.$transparent-colors, $theme, --900), 213 --bg-color: props.get(core.$transparent-colors, $theme, --900),
214 --label-color: props.get(core.$transparent-colors, $theme, --text), 214 --label-color: props.get(core.$transparent-colors, $theme, --text),
215 --border-color: props.get(core.$transparent-colors, $theme, --100), 215 --border-color: props.get(core.$transparent-colors, $theme, --100),
216 ), 216 ),
217 217
218 --active: ( 218 --active: (
219 --bg-color: props.get(core.$transparent-colors, $theme, --900), 219 --bg-color: props.get(core.$transparent-colors, $theme, --900),
220 --label-color: props.get(core.$transparent-colors, $theme, --text), 220 --label-color: props.get(core.$transparent-colors, $theme, --text),
221 --border-color: props.get(core.$transparent-colors, $theme, --100), 221 --border-color: props.get(core.$transparent-colors, $theme, --100),
222 ), 222 ),
223 223
224 --disabled: ( 224 --disabled: (
225 --bg-color: props.get(core.$transparent-colors, $theme, --200), 225 --bg-color: props.get(core.$transparent-colors, $theme, --200),
226 --label-color: props.get(core.$transparent-colors, $theme, --500), 226 --label-color: props.get(core.$transparent-colors, $theme, --500),
227 --border-color: props.get(core.$transparent-colors, $theme, --100), 227 --border-color: props.get(core.$transparent-colors, $theme, --100),
228 ), 228 ),
229 ), 229 ),
230 230
231 --badge: ( 231 --badge: (
232 --bg-color: props.get(core.$transparent-colors, $theme, --200), 232 --bg-color: props.get(core.$transparent-colors, $theme, --200),
233 --label-color: props.get(core.$transparent-colors, $theme, --900), 233 --label-color: props.get(core.$transparent-colors, $theme, --900),
234 --border-color: transparent, 234 --border-color: transparent,
235 235
236 --hover: ( 236 --hover: (
237 --bg-color: props.get(core.$transparent-colors, $theme, --300), 237 --bg-color: props.get(core.$transparent-colors, $theme, --300),
238 --label-color: props.get(core.$transparent-colors, $theme, --900), 238 --label-color: props.get(core.$transparent-colors, $theme, --900),
239 --border-color: transparent, 239 --border-color: transparent,
240 ), 240 ),
241 241
242 --active: ( 242 --active: (
243 --bg-color: props.get(core.$transparent-colors, $theme, --400), 243 --bg-color: props.get(core.$transparent-colors, $theme, --400),
244 --label-color: props.get(core.$transparent-colors, $theme, --900), 244 --label-color: props.get(core.$transparent-colors, $theme, --900),
245 --border-color: transparent, 245 --border-color: transparent,
246 ), 246 ),
247 ), 247 ),
248 248
249 --quiet: ( 249 --quiet: (
250 --label-color: props.get(core.$transparent-colors, $theme, --900), 250 --label-color: props.get(core.$transparent-colors, $theme, --900),
251 251
252 --hover: ( 252 --hover: (
253 --bg-color: props.get(core.$transparent-colors, $theme, --200), 253 --bg-color: props.get(core.$transparent-colors, $theme, --200),
254 --label-color: props.get(core.$transparent-colors, $theme, --900), 254 --label-color: props.get(core.$transparent-colors, $theme, --900),
255 ), 255 ),
256 256
257 --active: ( 257 --active: (
258 --bg-color: props.get(core.$transparent-colors, $theme, --300), 258 --bg-color: props.get(core.$transparent-colors, $theme, --300),
259 --label-color: props.get(core.$transparent-colors, $theme, --900), 259 --label-color: props.get(core.$transparent-colors, $theme, --900),
260 ), 260 ),
261 261
262 --disabled: ( 262 --disabled: (
263 --label-color: props.get(core.$transparent-colors, $theme, --500), 263 --label-color: props.get(core.$transparent-colors, $theme, --500),
264 ), 264 ),
265 ), 265 ),
266 ) 266 )
267 )); 267 ));
268} 268}
269 269
270$themes-config: ( 270$themes-config: (
271 accent: --accent, 271 accent: --accent,
272 positive: --positive, 272 positive: --positive,
273 negative: --negative, 273 negative: --negative,
274 warning: --warning, 274 warning: --warning,
275) !default; 275) !default;
276 276
277@each $theme, $key in $themes-config { 277@each $theme, $key in $themes-config {
278 $themes: props.merge($themes, ( 278 $themes: props.merge($themes, (
279 --#{$theme}: ( 279 --#{$theme}: (
280 --bg-color: props.get(core.$theme, $key, --100), 280 --bg-color: props.get(core.$theme, $key, --100),
281 --label-color: props.get(core.$theme, $key, --1100), 281 --label-color: props.get(core.$theme, $key, --1100),
282 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), 282 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
283 --shadow-color: props.get(core.$theme, $key, --200), 283 --shadow-color: props.get(core.$theme, $key, --200),
284 284
285 --hover: ( 285 --hover: (
286 --bg-color: props.get(core.$theme, $key, --200), 286 --bg-color: props.get(core.$theme, $key, --200),
287 --label-color: props.get(core.$theme, $key, --1200), 287 --label-color: props.get(core.$theme, $key, --1200),
288 --border-color: props.get(core.$theme, $key, --600), 288 --border-color: props.get(core.$theme, $key, --600),
289 ), 289 ),
290 290
291 --active: ( 291 --active: (
292 --bg-color: props.get(core.$theme, $key, --300), 292 --bg-color: props.get(core.$theme, $key, --300),
293 --label-color: props.get(core.$theme, $key, --1300), 293 --label-color: props.get(core.$theme, $key, --1300),
294 --border-color: props.get(core.$theme, $key, --800), 294 --border-color: props.get(core.$theme, $key, --800),
295 ), 295 ),
296 296
297 --disabled: ( 297 --disabled: (
298 --bg-color: props.get(core.$theme, --bg-l1), 298 --bg-color: props.get(core.$theme, --bg-l1),
299 --label-color: props.get(core.$theme, --border-strong), 299 --label-color: props.get(core.$theme, --border-strong),
300 --border-color: props.get(core.$theme, --border), 300 --border-color: props.get(core.$theme, --border),
301 ), 301 ),
302 302
303 --key-focus: ( 303 --key-focus: (
304 --border-color: props.get(core.$theme, --focus, --border), 304 --border-color: props.get(core.$theme, --focus, --border),
305 --outline-color: props.get(core.$theme, --focus, --outline), 305 --outline-color: props.get(core.$theme, --focus, --outline),
306 ), 306 ),
307 307
308 --highlighted: ( 308 --highlighted: (
309 --border-color: props.get(core.$theme, $key, --900), 309 --border-color: props.get(core.$theme, $key, --900),
310 --shadow-color: props.get(core.$theme, $key, --200), 310 --shadow-color: props.get(core.$theme, $key, --200),
311 ), 311 ),
312 312
313 --selected: ( 313 --selected: (
314 --bg-color: props.get(core.$theme, #{$key}-static, --900), 314 --bg-color: props.get(core.$theme, #{$key}-static, --900),
315 --label-color: props.get(core.$theme, #{$key}-static, --900-text), 315 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
316 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), 316 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
317 317
318 --hover: ( 318 --hover: (
319 --bg-color: props.get(core.$theme, #{$key}-static, --1000), 319 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
320 --label-color: props.get(core.$theme, #{$key}-static, --1000-text), 320 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
321 --border-color: props.get(core.$theme, #{$key}-static, --1000), 321 --border-color: props.get(core.$theme, #{$key}-static, --1000),
322 ), 322 ),
323 323
324 --active: ( 324 --active: (
325 --bg-color: props.get(core.$theme, #{$key}-static, --1100), 325 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
326 --label-color: props.get(core.$theme, #{$key}-static, --1100-text), 326 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
327 --border-color: props.get(core.$theme, #{$key}-static, --1100), 327 --border-color: props.get(core.$theme, #{$key}-static, --1100),
328 ), 328 ),
329 329
330 --disabled: ( 330 --disabled: (
331 --bg-color: props.get(core.$theme, --border-mute), 331 --bg-color: props.get(core.$theme, --border-mute),
332 --label-color: props.get(core.$theme, --border-strong), 332 --label-color: props.get(core.$theme, --border-strong),
333 --border-color: props.get(core.$theme, --border-mute), 333 --border-color: props.get(core.$theme, --border-mute),
334 ), 334 ),
335 ), 335 ),
336 336
337 --badge: ( 337 --badge: (
338 --bg-color: props.get(core.$theme, $key, --100), 338 --bg-color: props.get(core.$theme, $key, --100),
339 --label-color: props.get(core.$theme, $key, --1100), 339 --label-color: props.get(core.$theme, $key, --1100),
340 --border-color: props.get(core.$theme, $key, --300), 340 --border-color: props.get(core.$theme, $key, --300),
341 341
342 --hover: ( 342 --hover: (
343 --bg-color: props.get(core.$theme, $key, --200), 343 --bg-color: props.get(core.$theme, $key, --200),
344 --label-color: props.get(core.$theme, $key, --1200), 344 --label-color: props.get(core.$theme, $key, --1200),
345 --border-color: props.get(core.$theme, $key, --400), 345 --border-color: props.get(core.$theme, $key, --400),
346 ), 346 ),
347 347
348 --active: ( 348 --active: (
349 --bg-color: props.get(core.$theme, $key, --300), 349 --bg-color: props.get(core.$theme, $key, --300),
350 --label-color: props.get(core.$theme, $key, --1300), 350 --label-color: props.get(core.$theme, $key, --1300),
351 --border-color: props.get(core.$theme, $key, --500), 351 --border-color: props.get(core.$theme, $key, --500),
352 ), 352 ),
353 ), 353 ),
354 354
355 --quiet: ( 355 --quiet: (
356 --label-color: props.get(core.$theme, $key, --1100), 356 --label-color: props.get(core.$theme, $key, --1100),
357 357
358 --hover: ( 358 --hover: (
359 --bg-color: props.get(core.$theme, $key, --200), 359 --bg-color: props.get(core.$theme, $key, --200),
360 --label-color: props.get(core.$theme, $key, --1200), 360 --label-color: props.get(core.$theme, $key, --1200),
361 ), 361 ),
362 362
363 --active: ( 363 --active: (
364 --bg-color: props.get(core.$theme, $key, --300), 364 --bg-color: props.get(core.$theme, $key, --300),
365 --label-color: props.get(core.$theme, $key, --1300), 365 --label-color: props.get(core.$theme, $key, --1300),
366 ), 366 ),
367 367
368 --disabled: ( 368 --disabled: (
369 --label-color: props.get(core.$theme, --border-strong), 369 --label-color: props.get(core.$theme, --border-strong),
370 ), 370 ),
371 ), 371 ),
372 ) 372 )
373 )); 373 ));
374} 374}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4bd6a59..ebab339 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,270 +8,270 @@
8@use 'card.vars' as vars; 8@use 'card.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('card') { 13 @include bem.object('card') {
14 position: relative; 14 position: relative;
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
17 background-color: props.get(vars.$bg-color); 17 background-color: props.get(vars.$bg-color);
18 border: props.get(vars.$border-width) solid transparent; 18 border: props.get(vars.$border-width) solid transparent;
19 border-color: props.get(vars.$border-color); 19 border-color: props.get(vars.$border-color);
20 border-radius: props.get(vars.$rounding); 20 border-radius: props.get(vars.$rounding);
21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s; 21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
22 22
23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
24 &:hover, 24 &:hover,
25 &:active, 25 &:active,
26 &:focus-visible { 26 &:focus-visible {
27 transform: translateY(props.get(vars.$hover--offset-b)); 27 background-color: props.get(vars.$hover--bg-color);
28 background-color: props.get(vars.$hover--bg-color); 28 border-color: props.get(vars.$hover--border-color);
29 border-color: props.get(vars.$hover--border-color); 29 box-shadow: none;
30 box-shadow: none; 30 transform: translateY(props.get(vars.$hover--offset-b));
31 } 31 }
32 32
33 &:focus-visible { 33 &:focus-visible {
34 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 34 margin: calc(-1 * props.get(vars.$key-focus--border-width));
35 transition: transform .2s; 35 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; 36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
38 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 38 box-shadow:
39 box-shadow: 39 0 0 0
40 0 0 0 40 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
41 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 41 props.get(vars.$key-focus--outline-color);
42 props.get(vars.$key-focus--outline-color); 42 transition: transform .2s;
43 } 43 }
44 } 44 }
45 45
46 @include bem.modifier('borderless') { 46 @include bem.modifier('borderless') {
47 border-color: props.get(vars.$bg-color); 47 border-color: props.get(vars.$bg-color);
48 } 48 }
49 49
50 @include bem.modifier('shadow') { 50 @include bem.modifier('shadow') {
51 box-shadow: 51 box-shadow:
52 props.get(vars.$shadow-x) 52 props.get(vars.$shadow-x)
53 props.get(vars.$shadow-y) 53 props.get(vars.$shadow-y)
54 props.get(vars.$shadow-blur) 54 props.get(vars.$shadow-blur)
55 props.get(vars.$shadow-grow) 55 props.get(vars.$shadow-grow)
56 props.get(vars.$shadow-color); 56 props.get(vars.$shadow-color);
57 57
58 @include bem.modifier('quiet') { 58 @include bem.modifier('quiet') {
59 @include bem.elem('image') { 59 @include bem.elem('image') {
60 box-shadow: 60 box-shadow:
61 props.get(vars.$shadow-x) 61 props.get(vars.$shadow-x)
62 props.get(vars.$shadow-y) 62 props.get(vars.$shadow-y)
63 props.get(vars.$shadow-blur) 63 props.get(vars.$shadow-blur)
64 props.get(vars.$shadow-grow) 64 props.get(vars.$shadow-grow)
65 props.get(vars.$shadow-color); 65 props.get(vars.$shadow-color);
66 } 66 }
67 } 67 }
68 } 68 }
69 69
70 @include bem.elem('avatar') { 70 @include bem.elem('avatar') {
71 margin-block-start: props.get(vars.$pad-b); 71 margin-block-start: props.get(vars.$pad-b);
72 margin-inline-start: props.get(vars.$pad-i); 72 margin-inline-start: props.get(vars.$pad-i);
73 } 73 }
74 74
75 @include bem.elem('image') { 75 @include bem.elem('image') {
76 position: relative; 76 position: relative;
77 display: block; 77 display: block;
78 flex: 0 0 auto; 78 flex: 0 0 auto;
79 inline-size: calc(100% + 2 * props.get(vars.$border-width)); 79 inline-size: calc(100% + 2 * props.get(vars.$border-width));
80 margin: calc(-1 * props.get(vars.$border-width)); 80 margin: calc(-1 * props.get(vars.$border-width));
81 overflow: hidden; 81 overflow: hidden;
82 object-fit: cover; 82 object-fit: cover;
83 transition: background-color .2s, transform .2s, opacity .2s; 83 transition: background-color .2s, transform .2s, opacity .2s;
84 84
85 &:first-child { 85 &:first-child {
86 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 86 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
87 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 87 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
88 } 88 }
89 89
90 &:last-child { 90 &:last-child {
91 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 91 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
92 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 92 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
93 } 93 }
94 94
95 @include bem.next-elem('avatar') { 95 @include bem.next-elem('avatar') {
96 margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); 96 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
97 } 97 }
98 } 98 }
99 99
100 @include bem.elem('image-img') { 100 @include bem.elem('image-img') {
101 display: block; 101 display: block;
102 inline-size: 100%; 102 inline-size: 100%;
103 object-fit: cover; 103 object-fit: cover;
104 } 104 }
105 105
106 @include bem.elem('image-overlay') { 106 @include bem.elem('image-overlay') {
107 position: absolute; 107 position: absolute;
108 inset-block-end: 0; 108 inset-block-end: 0;
109 inset-inline: 0; 109 inset-inline: 0;
110 z-index: 5; 110 z-index: 5;
111 padding-block: props.get(vars.$image-overlay--pad-b); 111 padding-block: props.get(vars.$image-overlay--pad-b);
112 padding-inline: props.get(vars.$image-overlay--pad-i); 112 padding-inline: props.get(vars.$image-overlay--pad-i);
113 } 113 }
114 114
115 @include bem.elem('body') { 115 @include bem.elem('body') {
116 flex: 1 0 auto; 116 flex: 1 0 auto;
117 padding-block: props.get(vars.$pad-b); 117 padding-block: props.get(vars.$pad-b);
118 padding-inline: props.get(vars.$pad-i); 118 padding-inline: props.get(vars.$pad-i);
119 119
120 &::before { 120 &::before {
121 display: block; 121 display: block;
122 margin-block: -100em 100em; 122 margin-block: -100em 100em;
123 content: ''; 123 content: '';
124 } 124 }
125 } 125 }
126 126
127 @include bem.elem('content') { 127 @include bem.elem('content') {
128 margin-block-start: props.get(vars.$spacing); 128 margin-block-start: props.get(vars.$spacing);
129 } 129 }
130 130
131 @include bem.elem('footer') { 131 @include bem.elem('footer') {
132 flex: 0 0 auto; 132 flex: 0 0 auto;
133 padding-block: 0 props.get(vars.$pad-b); 133 padding-block: 0 props.get(vars.$pad-b);
134 padding-inline: props.get(vars.$pad-i); 134 padding-inline: props.get(vars.$pad-i);
135 margin-block-start: calc(-1 * props.get(vars.$pad-b)); 135 margin-block-start: calc(-1 * props.get(vars.$pad-b));
136 136
137 &::before { 137 &::before {
138 display: block; 138 display: block;
139 block-size: props.get(vars.$divider-width); 139 block-size: props.get(vars.$divider-width);
140 margin-block: props.get(vars.$spacing); 140 margin-block: props.get(vars.$spacing);
141 content: ''; 141 content: '';
142 background-color: props.get(vars.$divider-width); 142 background-color: props.get(vars.$divider-width);
143 } 143 }
144 } 144 }
145 145
146 @include bem.modifier('quiet') { 146 @include bem.modifier('quiet') {
147 margin-inline: 0; 147 margin-inline: 0;
148 background-color: transparent; 148 background-color: transparent;
149 border: 0; 149 border: 0;
150 box-shadow: none; 150 box-shadow: none;
151 151
152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
153 &:hover, 153 &:hover,
154 &:active, 154 &:active,
155 &:focus-visible { 155 &:focus-visible {
156 transform: none; 156 background-color: transparent;
157 background-color: transparent; 157 transform: none;
158 158
159 @include bem.elem('image') { 159 @include bem.elem('image') {
160 background-color: props.get(vars.$quiet--hover--image-color); 160 background-color: props.get(vars.$quiet--hover--image-color);
161 opacity: .75; 161 opacity: .75;
162 transform: translateY(props.get(vars.$hover--offset-b)); 162 transform: translateY(props.get(vars.$hover--offset-b));
163 } 163 }
164 } 164 }
165 165
166 &:focus-visible { 166 &:focus-visible {
167 margin: 0; 167 margin: 0;
168 outline: none; 168 outline: none;
169 border: 0; 169 border: 0;
170 box-shadow: none; 170 box-shadow: none;
171 171
172 @include bem.elem('image') { 172 @include bem.elem('image') {
173 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 173 margin: calc(-1 * props.get(vars.$key-focus--border-width));
174 border: props.get(vars.$key-focus--border-offset) solid transparent; 174 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
175 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 175 background-color: props.get(vars.$quiet--hover--image-color);
176 background-color: props.get(vars.$quiet--hover--image-color); 176 border: props.get(vars.$key-focus--border-offset) solid transparent;
177 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 177 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
178 box-shadow: 178 box-shadow:
179 0 179 0
180 0 180 0
181 0 181 0
182 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 182 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
183 props.get(vars.$key-focus--outline-color); 183 props.get(vars.$key-focus--outline-color);
184 opacity: 1; 184 opacity: 1;
185 } 185 }
186 } 186 }
187 } 187 }
188 188
189 @include bem.elem('image') { 189 @include bem.elem('image') {
190 position: relative; 190 position: relative;
191 background-color: props.get(vars.$quiet--image-color); 191 background-color: props.get(vars.$quiet--image-color);
192 background-clip: padding-box; 192 background-clip: padding-box;
193 border-radius: props.get(vars.$rounding); 193 border-radius: props.get(vars.$rounding);
194 } 194 }
195 195
196 @include bem.elem('body') { 196 @include bem.elem('body') {
197 padding: 0; 197 padding: 0;
198 padding-block-start: props.get(vars.$spacing); 198 padding-block-start: props.get(vars.$spacing);
199 } 199 }
200 200
201 @include bem.elem('footer') { 201 @include bem.elem('footer') {
202 padding-inline: 0; 202 padding-inline: 0;
203 } 203 }
204 } 204 }
205 205
206 @include bem.modifier('thumbnail') { 206 @include bem.modifier('thumbnail') {
207 @include bem.elem('image') { 207 @include bem.elem('image') {
208 border-radius: props.get(vars.$rounding); 208 border-radius: props.get(vars.$rounding);
209 } 209 }
210 210
211 @include bem.elem('body') { 211 @include bem.elem('body') {
212 position: absolute; 212 position: absolute;
213 inset-block-end: calc(-1 * props.get(vars.$border-width)); 213 inset-block-end: calc(-1 * props.get(vars.$border-width));
214 inset-inline: calc(-1 * props.get(vars.$border-width)); 214 inset-inline: calc(-1 * props.get(vars.$border-width));
215 z-index: 10; 215 z-index: 10;
216 visibility: hidden; 216 visibility: hidden;
217 background-color: props.get(vars.$hover--bg-color); 217 background-color: props.get(vars.$hover--bg-color);
218 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); 218 border-color: transparent;
219 border-color: transparent; 219 border-style: solid;
220 border-style: solid; 220 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
221 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 221 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
222 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 222 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
223 opacity: 0; 223 opacity: 0;
224 transition: 224 transition:
225 border-color .2s ease, 225 border-color .2s ease,
226 opacity .2s ease, 226 opacity .2s ease,
227 visibility 0s .2s linear; 227 visibility 0s .2s linear;
228 } 228 }
229 229
230 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 230 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
231 &:hover, 231 &:hover,
232 &:active, 232 &:active,
233 &:focus-visible { 233 &:focus-visible {
234 @include bem.elem('body') { 234 @include bem.elem('body') {
235 border-color: props.get(vars.$hover--border-color); 235 visibility: visible;
236 visibility: visible; 236 border-color: props.get(vars.$hover--border-color);
237 opacity: 1; 237 opacity: 1;
238 transition: 238 transition:
239 border-color .2s ease, 239 border-color .2s ease,
240 opacity .2s ease, 240 opacity .2s ease,
241 visibility .2s linear; 241 visibility .2s linear;
242 } 242 }
243 } 243 }
244 } 244 }
245 } 245 }
246 246
247 @include bem.modifier('horizontal') { 247 @include bem.modifier('horizontal') {
248 flex-direction: row; 248 flex-direction: row;
249 align-items: center; 249 align-items: center;
250 250
251 @include bem.elem('image') { 251 @include bem.elem('image') {
252 align-self: stretch; 252 align-self: stretch;
253 inline-size: auto; 253 inline-size: auto;
254 254
255 &:first-child { 255 &:first-child {
256 border-start-end-radius: 0; 256 border-start-end-radius: 0;
257 border-end-start-radius: props.get(vars.$rounding); 257 border-end-start-radius: props.get(vars.$rounding);
258 } 258 }
259 259
260 &:last-child { 260 &:last-child {
261 border-start-end-radius: props.get(vars.$rounding); 261 border-start-end-radius: props.get(vars.$rounding);
262 border-end-start-radius: 0; 262 border-end-start-radius: 0;
263 } 263 }
264 } 264 }
265 265
266 @include bem.elem('body') { 266 @include bem.elem('body') {
267 flex: 0 0 auto; 267 flex: 0 0 auto;
268 268
269 @include bem.modifier('main') { 269 @include bem.modifier('main') {
270 flex-shrink: 1; 270 flex-shrink: 1;
271 inline-size: 100%; 271 inline-size: 100%;
272 min-inline-size: 0; 272 min-inline-size: 0;
273 } 273 }
274 } 274 }
275 } 275 }
276 } 276 }
277} 277}
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 82dd596..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,223 +9,223 @@
9@use 'checkbox.vars' as vars; 9@use 'checkbox.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('checkbox') { 14 @include bem.object('checkbox') {
15 position: relative; 15 position: relative;
16 display: inline-block; 16 display: inline-block;
17 padding-block: props.get(vars.$pad-b); 17 padding-block: props.get(vars.$pad-b);
18 padding-inline: props.get(vars.$pad-i); 18 padding-inline: props.get(vars.$pad-i);
19 margin-inline: 19 margin-inline:
20 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 20 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
21 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); 21 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
22 22
23 @include bem.elem('box') { 23 @include bem.elem('box') {
24 position: relative; 24 position: relative;
25 display: inline-block; 25 display: inline-block;
26 flex: 0 0 auto; 26 flex: 0 0 auto;
27 inline-size: props.get(vars.$size); 27 inline-size: props.get(vars.$size);
28 block-size: props.get(vars.$size); 28 block-size: props.get(vars.$size);
29 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); 29 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
30 vertical-align: top; 30 vertical-align: top;
31 background-color: props.get(vars.$box-border-color); 31 background-color: props.get(vars.$box-border-color);
32 background-clip: padding-box; 32 background-clip: padding-box;
33 border: props.get(vars.$key-focus--border-offset) solid transparent; 33 border: props.get(vars.$key-focus--border-offset) solid transparent;
34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); 34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
35 35
36 &::before, 36 &::before,
37 &::after { 37 &::after {
38 position: absolute; 38 position: absolute;
39 display: block; 39 display: block;
40 content: ''; 40 content: '';
41 } 41 }
42 42
43 &::before { 43 &::before {
44 inset-block-start: props.get(vars.$border-width); 44 inset-block-start: props.get(vars.$border-width);
45 inset-inline-start: props.get(vars.$border-width); 45 inset-inline-start: props.get(vars.$border-width);
46 z-index: 2; 46 z-index: 2;
47 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); 47 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
48 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); 48 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
49 background-color: props.get(vars.$box-bg-color); 49 background-color: props.get(vars.$box-bg-color);
50 transition: transform .2s ease; 50 transition: transform .2s ease;
51 } 51 }
52 52
53 &::after { 53 &::after {
54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px); 54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px);
55 inset-inline-start: calc(1.5 * props.get(vars.$border-width)); 55 inset-inline-start: calc(1.5 * props.get(vars.$border-width));
56 z-index: 3; 56 z-index: 3;
57 box-sizing: border-box; 57 box-sizing: border-box;
58 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); 58 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
59 block-size: 0; 59 block-size: 0;
60 border-color: props.get(vars.$box-bg-color); 60 border-color: props.get(vars.$box-bg-color);
61 border-style: solid; 61 border-style: solid;
62 border-radius: 2px; 62 border-radius: 2px;
63 transition: transform .2s ease; 63 transform: scale(0);
64 transform: scale(0); 64 transition: transform .2s ease;
65 border-block-width: 0 2px; 65 border-block-width: 0 2px;
66 border-inline-width: 0 2px; 66 border-inline-width: 0 2px;
67 } 67 }
68 } 68 }
69 69
70 @include bem.elem('check-icon') { 70 @include bem.elem('check-icon') {
71 position: absolute; 71 position: absolute;
72 inset-block-start: calc(1 * props.get(vars.$border-width)); 72 inset-block-start: calc(1 * props.get(vars.$border-width));
73 inset-inline-start: calc(1 * props.get(vars.$border-width)); 73 inset-inline-start: calc(1 * props.get(vars.$border-width));
74 z-index: 2; 74 z-index: 2;
75 display: block; 75 display: block;
76 inline-size: calc(100% - 2 * props.get(vars.$border-width)); 76 inline-size: calc(100% - 2 * props.get(vars.$border-width));
77 block-size: calc(100% - 2 * props.get(vars.$border-width)); 77 block-size: calc(100% - 2 * props.get(vars.$border-width));
78 margin: 0; 78 margin: 0;
79 color: props.get(vars.$box-bg-color); 79 color: props.get(vars.$box-bg-color);
80 stroke-width: fn.px-to-rem(3px); 80 stroke-width: fn.px-to-rem(3px);
81 transition: transform .2s ease; 81 transform: scale(0);
82 transform: scale(0); 82 transform-origin: 40% 90%;
83 transform-origin: 40% 90%; 83 transition: transform .2s ease;
84 } 84 }
85 85
86 @include bem.elem('label') { 86 @include bem.elem('label') {
87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); 87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
88 } 88 }
89 89
90 @include bem.elem('native') { 90 @include bem.elem('native') {
91 position: absolute; 91 position: absolute;
92 inset-block-start: 0; 92 inset-block-start: 0;
93 inset-inline-start: 0; 93 inset-inline-start: 0;
94 z-index: -1; 94 z-index: -1;
95 inline-size: 100%; 95 inline-size: 100%;
96 block-size: 100%; 96 block-size: 100%;
97 padding: 0; 97 padding: 0;
98 margin: 0; 98 margin: 0;
99 overflow: hidden; 99 overflow: hidden;
100 appearance: none; 100 appearance: none;
101 border-radius: props.get(vars.$rounding); 101 border-radius: props.get(vars.$rounding);
102 102
103 &:hover, 103 &:hover,
104 &:focus-visible { 104 &:focus-visible {
105 @include bem.sibling-elem('label') { 105 @include bem.sibling-elem('label') {
106 color: props.get(vars.$hover--label-color); 106 color: props.get(vars.$hover--label-color);
107 } 107 }
108 108
109 @include bem.sibling-elem('box') { 109 @include bem.sibling-elem('box') {
110 background-color: props.get(vars.$hover--box-border-color); 110 background-color: props.get(vars.$hover--box-border-color);
111 } 111 }
112 } 112 }
113 113
114 &:checked { 114 &:checked {
115 @include bem.sibling-elem('box') { 115 @include bem.sibling-elem('box') {
116 &::before { 116 &::before {
117 transform: scale(0); 117 transform: scale(0);
118 } 118 }
119 119
120 @include bem.elem('check-icon') { 120 @include bem.elem('check-icon') {
121 transform: scale(1); 121 transform: scale(1);
122 } 122 }
123 } 123 }
124 } 124 }
125 125
126 &:indeterminate { 126 &:indeterminate {
127 @include bem.sibling-elem('box') { 127 @include bem.sibling-elem('box') {
128 &::before { 128 &::before {
129 transform: scale(0); 129 transform: scale(0);
130 } 130 }
131 131
132 &::after { 132 &::after {
133 transform: scale(1); 133 transform: scale(1);
134 } 134 }
135 135
136 @include bem.elem('check-icon') { 136 @include bem.elem('check-icon') {
137 transform: scale(0); 137 transform: scale(0);
138 } 138 }
139 } 139 }
140 } 140 }
141 141
142 &:disabled { 142 &:disabled {
143 @include bem.sibling-elem('label') { 143 @include bem.sibling-elem('label') {
144 color: props.get(vars.$disabled--label-color); 144 color: props.get(vars.$disabled--label-color);
145 } 145 }
146 146
147 @include bem.sibling-elem('box') { 147 @include bem.sibling-elem('box') {
148 background-color: props.get(vars.$disabled--box-border-color); 148 background-color: props.get(vars.$disabled--box-border-color);
149 149
150 &::before { 150 &::before {
151 background-color: props.get(vars.$disabled--box-bg-color); 151 background-color: props.get(vars.$disabled--box-bg-color);
152 } 152 }
153 } 153 }
154 } 154 }
155 155
156 &:focus-visible { 156 &:focus-visible {
157 @include bem.sibling-elem('label') { 157 @include bem.sibling-elem('label') {
158 color: props.get(vars.$key-focus--label-color); 158 color: props.get(vars.$key-focus--label-color);
159 } 159 }
160 160
161 @include bem.sibling-elem('box') { 161 @include bem.sibling-elem('box') {
162 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 162 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
163 box-shadow: 163 box-shadow:
164 0 164 0
165 0 165 0
166 0 166 0
167 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 167 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
168 props.get(vars.$key-focus--outline-color); 168 props.get(vars.$key-focus--outline-color);
169 } 169 }
170 } 170 }
171 } 171 }
172 172
173 @include bem.modifier('standalone') { 173 @include bem.modifier('standalone') {
174 @include bem.elem('box') { 174 @include bem.elem('box') {
175 margin-block-start: 0; 175 margin-block-start: 0;
176 } 176 }
177 } 177 }
178 178
179 @include bem.modifier('accent') { 179 @include bem.modifier('accent') {
180 @include bem.elem('native') { 180 @include bem.elem('native') {
181 &:checked { 181 &:checked {
182 @include bem.sibling-elem('box') { 182 @include bem.sibling-elem('box') {
183 background-color: props.get(vars.$accent--box-border-color); 183 background-color: props.get(vars.$accent--box-border-color);
184 } 184 }
185 185
186 &:hover, 186 &:hover,
187 &:focus-visible { 187 &:focus-visible {
188 @include bem.sibling-elem('box') { 188 @include bem.sibling-elem('box') {
189 background-color: props.get(vars.$accent--hover--box-border-color); 189 background-color: props.get(vars.$accent--hover--box-border-color);
190 } 190 }
191 } 191 }
192 } 192 }
193 193
194 &:indeterminate { 194 &:indeterminate {
195 @include bem.sibling-elem('box') { 195 @include bem.sibling-elem('box') {
196 background-color: props.get(vars.$accent--box-border-color); 196 background-color: props.get(vars.$accent--box-border-color);
197 } 197 }
198 198
199 &:hover, 199 &:hover,
200 &:focus-visible { 200 &:focus-visible {
201 @include bem.sibling-elem('box') { 201 @include bem.sibling-elem('box') {
202 background-color: props.get(vars.$accent--hover--box-border-color); 202 background-color: props.get(vars.$accent--hover--box-border-color);
203 } 203 }
204 } 204 }
205 } 205 }
206 206
207 &:disabled { 207 &:disabled {
208 @include bem.sibling-elem('box') { 208 @include bem.sibling-elem('box') {
209 background-color: props.get(vars.$disabled--box-border-color); 209 background-color: props.get(vars.$disabled--box-border-color);
210 210
211 &::before { 211 &::before {
212 background-color: props.get(vars.$disabled--box-bg-color); 212 background-color: props.get(vars.$disabled--box-bg-color);
213 } 213 }
214 } 214 }
215 215
216 &:checked { 216 &:checked {
217 @include bem.sibling-elem('box') { 217 @include bem.sibling-elem('box') {
218 background-color: props.get(vars.$disabled--box-border-color); 218 background-color: props.get(vars.$disabled--box-border-color);
219 } 219 }
220 } 220 }
221 221
222 &:indeterminate { 222 &:indeterminate {
223 @include bem.sibling-elem('box') { 223 @include bem.sibling-elem('box') {
224 background-color: props.get(vars.$disabled--box-border-color); 224 background-color: props.get(vars.$disabled--box-border-color);
225 } 225 }
226 } 226 }
227 } 227 }
228 } 228 }
229 } 229 }
230 } 230 }
231} 231}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 9b58e77..27af173 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -10,195 +10,195 @@
10@use 'divider.vars' as vars; 10@use 'divider.vars' as vars;
11 11
12@mixin styles { 12@mixin styles {
13 @include materialize-at-root(meta.module-variables('vars')); 13 @include materialize-at-root(meta.module-variables('vars'));
14 14
15 @include bem.object('divider') { 15 @include bem.object('divider') {
16 display: flex; 16 display: flex;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 flex-direction: row; 18 flex-direction: row;
19 align-items: center; 19 align-items: center;
20 block-size: 1em; 20 block-size: 1em;
21 margin-block: props.get(vars.$margin-b); 21 margin-block: props.get(vars.$margin-b);
22 font-size: props.get(vars.$strong--label-font-size); 22 font-size: props.get(vars.$strong--label-font-size);
23 font-weight: 700; 23 font-weight: 700;
24 line-height: 1; 24 line-height: 1;
25 color: props.get(vars.$strong--label-color); 25 color: props.get(vars.$strong--label-color);
26 text-transform: uppercase; 26 text-transform: uppercase;
27 letter-spacing: .5px; 27 letter-spacing: .5px;
28 background-color: transparent; 28 background-color: transparent;
29 29
30 &::before, 30 &::before,
31 &::after { 31 &::after {
32 flex: 1 1 auto; 32 flex: 1 1 auto;
33 inline-size: 100%; 33 inline-size: 100%;
34 block-size: props.get(vars.$strong--border-width); 34 block-size: props.get(vars.$strong--border-width);
35 content: ''; 35 content: '';
36 background-color: props.get(vars.$strong--bg-color); 36 background-color: props.get(vars.$strong--bg-color);
37 } 37 }
38 38
39 &::before { 39 &::before {
40 display: block; 40 display: block;
41 } 41 }
42 42
43 @include bem.elem('label') { 43 @include bem.elem('label') {
44 flex: 0 0 auto; 44 flex: 0 0 auto;
45 } 45 }
46 46
47 @include bem.modifier('vertical') { 47 @include bem.modifier('vertical') {
48 align-self: stretch; 48 align-self: stretch;
49 inline-size: props.get(vars.$vertical--border-width); 49 inline-size: props.get(vars.$vertical--border-width);
50 block-size: auto; 50 block-size: auto;
51 margin-block: 0; 51 margin-block: 0;
52 background-color: props.get(vars.$strong--bg-color); 52 background-color: props.get(vars.$strong--bg-color);
53 53
54 &::before, 54 &::before,
55 &::after { 55 &::after {
56 display: none; 56 display: none;
57 } 57 }
58 } 58 }
59 59
60 @include bem.modifier('dot') { 60 @include bem.modifier('dot') {
61 align-self: center; 61 align-self: center;
62 inline-size: props.get(vars.$dot--size); 62 inline-size: props.get(vars.$dot--size);
63 block-size: props.get(vars.$dot--size); 63 block-size: props.get(vars.$dot--size);
64 margin-block: 0; 64 margin-block: 0;
65 background-color: props.get(vars.$strong--bg-color); 65 background-color: props.get(vars.$strong--bg-color);
66 border-radius: props.get(vars.$dot--size); 66 border-radius: props.get(vars.$dot--size);
67 67
68 &::before, 68 &::before,
69 &::after { 69 &::after {
70 display: none; 70 display: none;
71 } 71 }
72 } 72 }
73 73
74 @include bem.modifier('medium') { 74 @include bem.modifier('medium') {
75 font-size: props.get(vars.$medium--label-font-size); 75 font-size: props.get(vars.$medium--label-font-size);
76 font-weight: 500; 76 font-weight: 500;
77 color: props.get(vars.$medium--label-color); 77 color: props.get(vars.$medium--label-color);
78 78
79 &::before, 79 &::before,
80 &::after { 80 &::after {
81 block-size: props.get(vars.$medium--border-width); 81 block-size: props.get(vars.$medium--border-width);
82 background-color: props.get(vars.$medium--bg-color); 82 background-color: props.get(vars.$medium--bg-color);
83 } 83 }
84 84
85 @include bem.modifier('vertical') { 85 @include bem.modifier('vertical') {
86 background-color: props.get(vars.$medium--bg-color); 86 background-color: props.get(vars.$medium--bg-color);
87 } 87 }
88 88
89 @include bem.modifier('dot') { 89 @include bem.modifier('dot') {
90 background-color: props.get(vars.$medium--bg-color); 90 background-color: props.get(vars.$medium--bg-color);
91 } 91 }
92 } 92 }
93 93
94 @include bem.modifier('quiet') { 94 @include bem.modifier('quiet') {
95 font-size: props.get(vars.$quiet--label-font-size); 95 font-size: props.get(vars.$quiet--label-font-size);
96 font-weight: 500; 96 font-weight: 500;
97 color: props.get(vars.$quiet--label-color); 97 color: props.get(vars.$quiet--label-color);
98 98
99 &::before, 99 &::before,
100 &::after { 100 &::after {
101 block-size: props.get(vars.$quiet--border-width); 101 block-size: props.get(vars.$quiet--border-width);
102 background-color: props.get(vars.$quiet--bg-color); 102 background-color: props.get(vars.$quiet--bg-color);
103 } 103 }
104 104
105 @include bem.modifier('vertical') { 105 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--quiet--bg-color); 106 background-color: props.get(vars.$vertical--quiet--bg-color);
107 } 107 }
108 108
109 @include bem.modifier('dot') { 109 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--quiet--bg-color); 110 background-color: props.get(vars.$dot--quiet--bg-color);
111 } 111 }
112 } 112 }
113 113
114 @include bem.modifier('faint') { 114 @include bem.modifier('faint') {
115 font-size: props.get(vars.$faint--label-font-size); 115 font-size: props.get(vars.$faint--label-font-size);
116 font-weight: 500; 116 font-weight: 500;
117 color: props.get(vars.$faint--label-color); 117 color: props.get(vars.$faint--label-color);
118 118
119 &::before, 119 &::before,
120 &::after { 120 &::after {
121 block-size: props.get(vars.$faint--border-width); 121 block-size: props.get(vars.$faint--border-width);
122 background-color: props.get(vars.$faint--bg-color); 122 background-color: props.get(vars.$faint--bg-color);
123 } 123 }
124 124
125 @include bem.modifier('vertical') { 125 @include bem.modifier('vertical') {
126 background-color: props.get(vars.$vertical--quiet--bg-color); 126 background-color: props.get(vars.$vertical--quiet--bg-color);
127 } 127 }
128 128
129 @include bem.modifier('dot') { 129 @include bem.modifier('dot') {
130 background-color: props.get(vars.$dot--quiet--bg-color); 130 background-color: props.get(vars.$dot--quiet--bg-color);
131 } 131 }
132 } 132 }
133 133
134 @include bem.modifier('labelled') { 134 @include bem.modifier('labelled') {
135 &::before { 135 &::before {
136 margin-inline-end: 1em; 136 margin-inline-end: 1em;
137 } 137 }
138 138
139 &::after { 139 &::after {
140 display: block; 140 display: block;
141 margin-inline-start: 1em; 141 margin-inline-start: 1em;
142 } 142 }
143 } 143 }
144 144
145 @each $theme in map.keys(props.get(vars.$themes)) { 145 @each $theme in map.keys(props.get(vars.$themes)) {
146 @include bem.modifier(string.slice($theme, 3)) { 146 @include bem.modifier(string.slice($theme, 3)) {
147 &::before, 147 &::before,
148 &::after { 148 &::after {
149 background-color: props.get(vars.$themes, $theme, --bg); 149 background-color: props.get(vars.$themes, $theme, --bg);
150 } 150 }
151 151
152 @include bem.elem('label') { 152 @include bem.elem('label') {
153 color: props.get(vars.$themes, $theme, --label); 153 color: props.get(vars.$themes, $theme, --label);
154 } 154 }
155 } 155 }
156 } 156 }
157 157
158 @each $theme in map.keys(props.get(vars.$static-themes)) { 158 @each $theme in map.keys(props.get(vars.$static-themes)) {
159 @include bem.modifier(string.slice($theme, 3)) { 159 @include bem.modifier(string.slice($theme, 3)) {
160 &::before, 160 &::before,
161 &::after { 161 &::after {
162 background-color: props.get(vars.$static-themes, $theme, --strong, --bg); 162 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
163 } 163 }
164 164
165 @include bem.elem('label') { 165 @include bem.elem('label') {
166 color: props.get(vars.$static-themes, $theme, --strong, --label); 166 color: props.get(vars.$static-themes, $theme, --strong, --label);
167 } 167 }
168 168
169 @include bem.modifier('medium') { 169 @include bem.modifier('medium') {
170 &::before, 170 &::before,
171 &::after { 171 &::after {
172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg); 172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
173 } 173 }
174 174
175 @include bem.elem('label') { 175 @include bem.elem('label') {
176 color: props.get(vars.$static-themes, $theme, --medium, --label); 176 color: props.get(vars.$static-themes, $theme, --medium, --label);
177 } 177 }
178 } 178 }
179 179
180 @include bem.modifier('quiet') { 180 @include bem.modifier('quiet') {
181 &::before, 181 &::before,
182 &::after { 182 &::after {
183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); 183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184 } 184 }
185 185
186 @include bem.elem('label') { 186 @include bem.elem('label') {
187 color: props.get(vars.$static-themes, $theme, --quiet, --label); 187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
188 } 188 }
189 } 189 }
190 190
191 @include bem.modifier('faint') { 191 @include bem.modifier('faint') {
192 &::before, 192 &::before,
193 &::after { 193 &::after {
194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg); 194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
195 } 195 }
196 196
197 @include bem.elem('label') { 197 @include bem.elem('label') {
198 color: props.get(vars.$static-themes, $theme, --faint, --label); 198 color: props.get(vars.$static-themes, $theme, --faint, --label);
199 } 199 }
200 } 200 }
201 } 201 }
202 } 202 }
203 } 203 }
204} 204}
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 5a5639b..688fbb3 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -38,42 +38,42 @@ $dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get
38$static-themes: props.def(--o-divider, (), 'color'); 38$static-themes: props.def(--o-divider, (), 'color');
39 39
40@each $theme in map.keys(props.get(core.$transparent-colors)) { 40@each $theme in map.keys(props.get(core.$transparent-colors)) {
41 $button-theme: --static-#{string.slice($theme, 3)}; 41 $button-theme: --static-#{string.slice($theme, 3)};
42 42
43 $static-themes: props.merge($static-themes, ( 43 $static-themes: props.merge($static-themes, (
44 $button-theme: ( 44 $button-theme: (
45 --strong: ( 45 --strong: (
46 --bg: props.get(core.$transparent-colors, $theme, --800), 46 --bg: props.get(core.$transparent-colors, $theme, --800),
47 --label: props.get(core.$transparent-colors, $theme, --900), 47 --label: props.get(core.$transparent-colors, $theme, --900),
48 ), 48 ),
49 --medium: ( 49 --medium: (
50 --bg: props.get(core.$transparent-colors, $theme, --300), 50 --bg: props.get(core.$transparent-colors, $theme, --300),
51 --label: props.get(core.$transparent-colors, $theme, --500), 51 --label: props.get(core.$transparent-colors, $theme, --500),
52 ), 52 ),
53 --quiet: ( 53 --quiet: (
54 --bg: props.get(core.$transparent-colors, $theme, --300), 54 --bg: props.get(core.$transparent-colors, $theme, --300),
55 --label: props.get(core.$transparent-colors, $theme, --500), 55 --label: props.get(core.$transparent-colors, $theme, --500),
56 ), 56 ),
57 --faint: ( 57 --faint: (
58 --bg: props.get(core.$transparent-colors, $theme, --200), 58 --bg: props.get(core.$transparent-colors, $theme, --200),
59 --label: props.get(core.$transparent-colors, $theme, --400), 59 --label: props.get(core.$transparent-colors, $theme, --400),
60 ), 60 ),
61 ) 61 )
62 )); 62 ));
63} 63}
64 64
65$themes-config: ( 65$themes-config: (
66 accent: --accent, 66 accent: --accent,
67 negative: --negative, 67 negative: --negative,
68) !default; 68) !default;
69 69
70$themes: props.def(--o-divider, (), 'color'); 70$themes: props.def(--o-divider, (), 'color');
71 71
72@each $theme, $key in $themes-config { 72@each $theme, $key in $themes-config {
73 $themes: props.merge($themes, ( 73 $themes: props.merge($themes, (
74 --#{$theme}: ( 74 --#{$theme}: (
75 --bg: props.get(core.$theme, $key, --800), 75 --bg: props.get(core.$theme, $key, --800),
76 --label: props.get(core.$theme, $key, --1000), 76 --label: props.get(core.$theme, $key, --1000),
77 ) 77 )
78 )); 78 ));
79} 79}
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index ce2dfa7..fd36535 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -8,43 +8,43 @@
8@use 'emoji.vars' as vars; 8@use 'emoji.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('emoji') { 13 @include bem.object('emoji') {
14 position: relative; 14 position: relative;
15 display: inline-block; 15 display: inline-block;
16 inline-size: calc(props.get(vars.$size)); 16 inline-size: calc(props.get(vars.$size));
17 block-size: calc(props.get(vars.$size)); 17 block-size: calc(props.get(vars.$size));
18 padding: calc(props.get(vars.$pad)); 18 padding: calc(props.get(vars.$pad));
19 margin: calc(-1 * props.get(vars.$pad)); 19 margin: calc(-1 * props.get(vars.$pad));
20 vertical-align: props.get(vars.$valign); 20 vertical-align: props.get(vars.$valign);
21 object-fit: contain; 21 object-fit: contain;
22 22
23 @include bem.modifier('icon') { 23 @include bem.modifier('icon') {
24 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); 24 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
25 vertical-align: props.get(icon.$valign); 25 vertical-align: props.get(icon.$valign);
26 } 26 }
27 27
28 @each $mod, $size, $valign in vars.$sizes { 28 @each $mod, $size, $valign in vars.$sizes {
29 @include bem.modifier($mod) { 29 @include bem.modifier($mod) {
30 inline-size: props.get($size); 30 inline-size: props.get($size);
31 block-size: props.get($size); 31 block-size: props.get($size);
32 vertical-align: props.get($valign); 32 vertical-align: props.get($valign);
33 33
34 @include bem.modifier('icon') { 34 @include bem.modifier('icon') {
35 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); 35 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
36 } 36 }
37 } 37 }
38 } 38 }
39 39
40 @include bem.modifier('zoomable') { 40 @include bem.modifier('zoomable') {
41 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); 41 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
42 transition: transform .2s ease, background-color .2s ease; 42 transition: transform .2s ease, background-color .2s ease;
43 43
44 &:hover { 44 &:hover {
45 background-color: props.get(vars.$bg-color); 45 background-color: props.get(vars.$bg-color);
46 transform: scale(props.get(vars.$zoom)); 46 transform: scale(props.get(vars.$zoom));
47 } 47 }
48 } 48 }
49 } 49 }
50} 50}
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index 073f88b..b7a8a43 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -18,9 +18,9 @@ $size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
18$valign--200: props.def(--o-emoji--200--valign, -1em) !default; 18$valign--200: props.def(--o-emoji--200--valign, -1em) !default;
19 19
20$sizes: ( 20$sizes: (
21 '125' $size--125 $valign--125, 21 '125' $size--125 $valign--125,
22 '150' $size--150 $valign--150, 22 '150' $size--150 $valign--150,
23 '200' $size--200 $valign--200, 23 '200' $size--200 $valign--200,
24) !default; 24) !default;
25 25
26$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 26$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 564ab2b..aa12eb5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -7,70 +7,70 @@
7@use 'field-label.vars' as vars; 7@use 'field-label.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('field-label') { 12 @include bem.object('field-label') {
13 @include bem.elem('label') { 13 @include bem.elem('label') {
14 display: block; 14 display: block;
15 flex: 0 0 auto; 15 flex: 0 0 auto;
16 padding-inline-end: props.get(vars.$spacing-i); 16 padding-inline-end: props.get(vars.$spacing-i);
17 font-size: props.get(vars.$label-font-size); 17 font-size: props.get(vars.$label-font-size);
18 font-weight: 400; 18 font-weight: 400;
19 line-height: 1.3; 19 line-height: 1.3;
20 color: props.get(vars.$label-color); 20 color: props.get(vars.$label-color);
21 21
22 @include bem.next-elem('content') { 22 @include bem.next-elem('content') {
23 margin-block-start: props.get(vars.$spacing-b); 23 margin-block-start: props.get(vars.$spacing-b);
24 } 24 }
25 } 25 }
26 26
27 @include bem.elem('content') { 27 @include bem.elem('content') {
28 display: block; 28 display: block;
29 flex: 1 1 auto; 29 flex: 1 1 auto;
30 } 30 }
31 31
32 @include bem.elem('hint') { 32 @include bem.elem('hint') {
33 display: block; 33 display: block;
34 margin-block-start: props.get(vars.$spacing-b); 34 margin-block-start: props.get(vars.$spacing-b);
35 font-size: props.get(vars.$hint-font-size); 35 font-size: props.get(vars.$hint-font-size);
36 color: props.get(vars.$hint-color); 36 color: props.get(vars.$hint-color);
37 } 37 }
38 38
39 @include bem.is('invalid') { 39 @include bem.is('invalid') {
40 @include bem.elem('hint') { 40 @include bem.elem('hint') {
41 color: props.get(vars.$error-hint-color); 41 color: props.get(vars.$error-hint-color);
42 } 42 }
43 } 43 }
44 44
45 @include bem.is('disabled') { 45 @include bem.is('disabled') {
46 @include bem.elem('label', 'hint') { 46 @include bem.elem('label', 'hint') {
47 color: props.get(vars.$disabled-color); 47 color: props.get(vars.$disabled-color);
48 } 48 }
49 } 49 }
50 50
51 @include bem.modifier('align-start', 'align-end') { 51 @include bem.modifier('align-start', 'align-end') {
52 display: flex; 52 display: flex;
53 align-items: baseline; 53 align-items: baseline;
54 54
55 @include bem.elem('label') { 55 @include bem.elem('label') {
56 display: inline-block; 56 display: inline-block;
57 57
58 @include bem.next-elem('content') { 58 @include bem.next-elem('content') {
59 margin-block-start: 0; 59 margin-block-start: 0;
60 } 60 }
61 } 61 }
62 } 62 }
63 63
64 @include bem.modifier('align-start') { 64 @include bem.modifier('align-start') {
65 @include bem.elem('label') { 65 @include bem.elem('label') {
66 text-align: start; 66 text-align: start;
67 } 67 }
68 } 68 }
69 69
70 @include bem.modifier('align-end') { 70 @include bem.modifier('align-end') {
71 @include bem.elem('label') { 71 @include bem.elem('label') {
72 text-align: end; 72 text-align: end;
73 } 73 }
74 } 74 }
75 } 75 }
76} 76}
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
index 38837be..27e0f6a 100644
--- a/src/objects/_figure.scss
+++ b/src/objects/_figure.scss
@@ -7,20 +7,20 @@
7@use 'figure.vars' as vars; 7@use 'figure.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('figure') { 12 @include bem.object('figure') {
13 @include bem.elem('caption') { 13 @include bem.elem('caption') {
14 padding-block: props.get(vars.$pad-b); 14 padding-block: props.get(vars.$pad-b);
15 font-size: props.get(vars.$font-size); 15 font-size: props.get(vars.$font-size);
16 color: props.get(vars.$text-color); 16 color: props.get(vars.$text-color);
17 border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); 17 border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
18 18
19 &::before { 19 &::before {
20 display: block; 20 display: block;
21 margin-block: -100em 100em; 21 margin-block: -100em 100em;
22 content: ''; 22 content: '';
23 } 23 }
24 } 24 }
25 } 25 }
26} 26}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index bdc7027..d27b595 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -7,54 +7,54 @@
7@use 'heading.vars' as vars; 7@use 'heading.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('heading') { 12 @include bem.object('heading') {
13 display: block; 13 display: block;
14 margin-block-start: props.get(vars.$margin-bs); 14 margin-block-start: props.get(vars.$margin-bs);
15 font-family: props.get(vars.$font-family); 15 font-family: props.get(vars.$font-family);
16 font-weight: props.get(vars.$font-weight); 16 font-weight: props.get(vars.$font-weight);
17 font-feature-settings: props.get(vars.$feature-settings); 17 font-feature-settings: props.get(vars.$feature-settings);
18 line-height: props.get(vars.$line-height); 18 line-height: props.get(vars.$line-height);
19 color: props.get(vars.$text-color); 19 color: props.get(vars.$text-color);
20 text-transform: none; 20 text-transform: none;
21 letter-spacing: normal; 21 letter-spacing: normal;
22 22
23 & + & { 23 & + & {
24 margin-block-start: props.get(vars.$margin-bs-sibling); 24 margin-block-start: props.get(vars.$margin-bs-sibling);
25 } 25 }
26 26
27 @include bem.elem('highlight') { 27 @include bem.elem('highlight') {
28 background-image: linear-gradient(to top, 28 background-image: linear-gradient(to top,
29 transparent .05em, 29 transparent .05em,
30 props.get(vars.$bg-color) .05em, 30 props.get(vars.$bg-color) .05em,
31 props.get(vars.$bg-color) .5em, 31 props.get(vars.$bg-color) .5em,
32 transparent .5em); 32 transparent .5em);
33 } 33 }
34 34
35 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { 35 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
36 @include bem.modifier($mod) { 36 @include bem.modifier($mod) {
37 font-family: props.get($font-family); 37 font-family: props.get($font-family);
38 font-size: props.get($font-size); 38 font-size: props.get($font-size);
39 font-weight: props.get($font-weight); 39 font-weight: props.get($font-weight);
40 font-feature-settings: props.get($feature-settings); 40 font-feature-settings: props.get($feature-settings);
41 line-height: props.get($line-height); 41 line-height: props.get($line-height);
42 letter-spacing: props.get($letter-spacing); 42 letter-spacing: props.get($letter-spacing);
43 } 43 }
44 } 44 }
45 45
46 @include bem.modifier('display') { 46 @include bem.modifier('display') {
47 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { 47 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
48 @include bem.modifier($mod) { 48 @include bem.modifier($mod) {
49 font-family: props.get($font-family); 49 font-family: props.get($font-family);
50 font-size: props.get($font-size); 50 font-size: props.get($font-size);
51 font-weight: props.get($font-weight); 51 font-weight: props.get($font-weight);
52 font-feature-settings: props.get($feature-settings); 52 font-feature-settings: props.get($feature-settings);
53 line-height: props.get($line-height); 53 line-height: props.get($line-height);
54 letter-spacing: props.get($letter-spacing); 54 letter-spacing: props.get($letter-spacing);
55 transform: translateX(props.get(vars.$offset)); 55 transform: translateX(props.get(vars.$offset));
56 } 56 }
57 } 57 }
58 } 58 }
59 } 59 }
60} 60}
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 90278c8..1d6df26 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -56,12 +56,12 @@ $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
56$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 56$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
57 57
58$sizes: ( 58$sizes: (
59 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, 59 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
60 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, 60 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
61 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, 61 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
62 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, 62 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
63 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, 63 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
64 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, 64 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
65) !default; 65) !default;
66 66
67$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; 67$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -114,10 +114,10 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro
114$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; 114$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
115 115
116$display--sizes: ( 116$display--sizes: (
117 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, 117 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs,
118 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, 118 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm,
119 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, 119 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md,
120 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, 120 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg,
121 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, 121 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl,
122 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, 122 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl,
123) !default; 123) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 187938e..1941960 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -7,19 +7,19 @@
7@use 'icon.vars' as vars; 7@use 'icon.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('icon') { 12 @include bem.object('icon') {
13 display: inline; 13 display: inline;
14 inline-size: props.get(vars.$size); 14 inline-size: props.get(vars.$size);
15 block-size: props.get(vars.$size); 15 block-size: props.get(vars.$size);
16 vertical-align: props.get(vars.$valign); 16 vertical-align: props.get(vars.$valign);
17 stroke-linecap: round; 17 stroke-width: props.get(vars.$stroke-width);
18 stroke-linejoin: round; 18 stroke-linecap: round;
19 stroke-width: props.get(vars.$stroke-width); 19 stroke-linejoin: round;
20 20
21 @include bem.modifier('block') { 21 @include bem.modifier('block') {
22 display: block; 22 display: block;
23 } 23 }
24 } 24 }
25} 25}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b62c353..b95148f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -9,127 +9,127 @@
9@use 'lightbox.vars' as vars; 9@use 'lightbox.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('lightbox') { 14 @include bem.object('lightbox') {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 min-block-size: 0; 16 min-block-size: 0;
17 17
18 @include bem.elem('header') { 18 @include bem.elem('header') {
19 display: flex; 19 display: flex;
20 grid-area: header; 20 grid-area: header;
21 align-items: flex-start; 21 align-items: flex-start;
22 padding-block-start: props.get(vars.$pad); 22 padding-block-start: props.get(vars.$pad);
23 padding-inline: props.get(vars.$pad); 23 padding-inline: props.get(vars.$pad);
24 } 24 }
25 25
26 @include bem.elem('img') { 26 @include bem.elem('img') {
27 box-sizing: border-box; 27 box-sizing: border-box;
28 display: block; 28 display: block;
29 grid-area: content; 29 grid-area: content;
30 place-self: center; 30 place-self: center;
31 inline-size: auto; 31 inline-size: auto;
32 max-inline-size: 100%; 32 max-inline-size: 100%;
33 block-size: auto; 33 block-size: auto;
34 max-block-size: props.get(vars.$image--max-height); 34 max-block-size: props.get(vars.$image--max-height);
35 padding: props.get(vars.$pad); 35 padding: props.get(vars.$pad);
36 margin-inline: auto; 36 margin-inline: auto;
37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); 37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
38 } 38 }
39 39
40 @include bem.elem('thumbnails') { 40 @include bem.elem('thumbnails') {
41 display: none; 41 display: none;
42 grid-area: thumbnails; 42 grid-area: thumbnails;
43 gap: props.get(vars.$thumbnails--spacing); 43 gap: props.get(vars.$thumbnails--spacing);
44 padding: props.get(vars.$pad); 44 padding: props.get(vars.$pad);
45 margin-block-start: calc(-1 * props.get(vars.$pad)); 45 margin-block-start: calc(-1 * props.get(vars.$pad));
46 overflow: auto; 46 overflow: auto;
47 } 47 }
48 48
49 @include bem.elem('close-btn') { 49 @include bem.elem('close-btn') {
50 display: none; 50 display: none;
51 flex: 0 0 auto; 51 flex: 0 0 auto;
52 margin-block-start: calc(-.5 * props.get(vars.$pad)); 52 margin-block-start: calc(-.5 * props.get(vars.$pad));
53 margin-inline: auto calc(-.5 * props.get(vars.$pad)); 53 margin-inline: auto calc(-.5 * props.get(vars.$pad));
54 font-size: props.get(vars.$close-button--font-size); 54 font-size: props.get(vars.$close-button--font-size);
55 } 55 }
56 56
57 @include bem.elem('nav-btn') { 57 @include bem.elem('nav-btn') {
58 position: relative; 58 position: relative;
59 display: none; 59 display: none;
60 align-self: center; 60 align-self: center;
61 overflow: visible; 61 overflow: visible;
62 font-size: props.get(vars.$nav-button--font-size); 62 font-size: props.get(vars.$nav-button--font-size);
63 63
64 &::before { 64 &::before {
65 position: absolute; 65 position: absolute;
66 inset-block-start: 50%; 66 inset-block-start: 50%;
67 display: block; 67 display: block;
68 inline-size: props.get(vars.$nav-button--inline-size); 68 inline-size: props.get(vars.$nav-button--inline-size);
69 block-size: props.get(vars.$nav-button--block-size); 69 block-size: props.get(vars.$nav-button--block-size);
70 content: ''; 70 content: '';
71 transform: translateY(-50%); 71 transform: translateY(-50%);
72 } 72 }
73 73
74 @include bem.modifier('prev') { 74 @include bem.modifier('prev') {
75 grid-area: prev; 75 grid-area: prev;
76 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); 76 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
77 77
78 &::before { 78 &::before {
79 inset-inline-start: 0; 79 inset-inline-start: 0;
80 } 80 }
81 } 81 }
82 82
83 @include bem.modifier('next') { 83 @include bem.modifier('next') {
84 grid-area: next; 84 grid-area: next;
85 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); 85 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
86 86
87 &::before { 87 &::before {
88 inset-inline-end: 0; 88 inset-inline-end: 0;
89 } 89 }
90 } 90 }
91 } 91 }
92 92
93 @include bem.modifier('interactive') { 93 @include bem.modifier('interactive') {
94 display: grid; 94 display: grid;
95 grid-template-areas: 95 grid-template-areas:
96 'header header header' 96 'header header header'
97 'prev content next' 97 'prev content next'
98 'thumbnails thumbnails thumbnails'; 98 'thumbnails thumbnails thumbnails';
99 grid-template-rows: auto minmax(0, 1fr) auto auto; 99 grid-template-rows: auto minmax(0, 1fr) auto auto;
100 grid-template-columns: auto minmax(0, 1fr) auto; 100 grid-template-columns: auto minmax(0, 1fr) auto;
101 101
102 @include bem.modifier('fullscreen') { 102 @include bem.modifier('fullscreen') {
103 block-size: props.get(vars.$fullscreen--height); 103 block-size: props.get(vars.$fullscreen--height);
104 } 104 }
105 105
106 @include bem.elem('img') { 106 @include bem.elem('img') {
107 display: none; 107 display: none;
108 max-block-size: 100%; 108 max-block-size: 100%;
109 margin-inline: 0; 109 margin-inline: 0;
110 110
111 @include bem.multi('&:target', 'is' 'visible') { 111 @include bem.multi('&:target', 'is' 'visible') {
112 display: block; 112 display: block;
113 } 113 }
114 } 114 }
115 115
116 @include bem.elem('thumbnails') { 116 @include bem.elem('thumbnails') {
117 display: flex; 117 display: flex;
118 } 118 }
119 119
120 @include bem.elem('close-btn') { 120 @include bem.elem('close-btn') {
121 display: block; 121 display: block;
122 } 122 }
123 123
124 @include bem.elem('nav-btn') { 124 @include bem.elem('nav-btn') {
125 display: block; 125 display: block;
126 } 126 }
127 } 127 }
128 128
129 @each $theme in map.keys(props.get(vars.$static-themes)) { 129 @each $theme in map.keys(props.get(vars.$static-themes)) {
130 @include bem.modifier(string.slice($theme, 3)) { 130 @include bem.modifier(string.slice($theme, 3)) {
131 color: props.get(vars.$static-themes, $theme, --text); 131 color: props.get(vars.$static-themes, $theme, --text);
132 } 132 }
133 } 133 }
134 } 134 }
135} 135}
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index cc926e4..6d22aa8 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -23,11 +23,11 @@ $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(cor
23$static-themes: props.def(--o-lightbox, (), 'color'); 23$static-themes: props.def(--o-lightbox, (), 'color');
24 24
25@each $theme in map.keys(props.get(core.$transparent-colors)) { 25@each $theme in map.keys(props.get(core.$transparent-colors)) {
26 $lightbox-theme: --static-#{string.slice($theme, 3)}; 26 $lightbox-theme: --static-#{string.slice($theme, 3)};
27 27
28 $static-themes: props.merge($static-themes, ( 28 $static-themes: props.merge($static-themes, (
29 $lightbox-theme: ( 29 $lightbox-theme: (
30 --text: props.get(core.$transparent-colors, $theme, --800), 30 --text: props.get(core.$transparent-colors, $theme, --800),
31 ) 31 )
32 )); 32 ));
33} 33}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 4d31874..f370067 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -8,95 +8,95 @@
8@use 'menu.vars' as vars; 8@use 'menu.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('menu') { 13 @include bem.object('menu') {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 gap: props.get(vars.$spacing); 16 gap: props.get(vars.$spacing);
17 17
18 @include bem.elem('header') { 18 @include bem.elem('header') {
19 padding-block: props.get(vars.$item--pad-b); 19 padding-block: props.get(vars.$item--pad-b);
20 padding-inline: props.get(vars.$item--pad-i); 20 padding-inline: props.get(vars.$item--pad-i);
21 font-size: props.get(vars.$header--font-size); 21 font-size: props.get(vars.$header--font-size);
22 font-weight: 500; 22 font-weight: 500;
23 color: props.get(vars.$header--label-color); 23 color: props.get(vars.$header--label-color);
24 text-transform: uppercase; 24 text-transform: uppercase;
25 letter-spacing: .5px; 25 letter-spacing: .5px;
26 26
27 @include bem.next-twin-elem { 27 @include bem.next-twin-elem {
28 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); 28 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
29 } 29 }
30 } 30 }
31 31
32 @include bem.elem('item') { 32 @include bem.elem('item') {
33 padding-block: props.get(vars.$item--pad-b); 33 padding-block: props.get(vars.$item--pad-b);
34 padding-inline: props.get(vars.$item--pad-i); 34 padding-inline: props.get(vars.$item--pad-i);
35 margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); 35 margin: calc(-1 * props.get(vars.$item--key-focus--outline-width));
36 color: props.get(vars.$item--disabled--label-color); 36 color: props.get(vars.$item--disabled--label-color);
37 background-clip: padding-box; 37 background-clip: padding-box;
38 border: props.get(vars.$item--key-focus--outline-width) solid transparent; 38 border: props.get(vars.$item--key-focus--outline-width) solid transparent;
39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); 39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
40 40
41 &:link, 41 &:link,
42 &:visited, 42 &:visited,
43 &:enabled { 43 &:enabled {
44 color: currentColor; 44 color: currentColor;
45 45
46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { 46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
47 color: props.get(vars.$item--hover--label-color); 47 color: props.get(vars.$item--hover--label-color);
48 background-color: props.get(vars.$item--hover--bg-color); 48 background-color: props.get(vars.$item--hover--bg-color);
49 } 49 }
50 50
51 &:active { 51 &:active {
52 color: props.get(vars.$item--active--label-color); 52 color: props.get(vars.$item--active--label-color);
53 background-color: props.get(vars.$item--active--bg-color); 53 background-color: props.get(vars.$item--active--bg-color);
54 } 54 }
55 55
56 &:focus-visible { 56 &:focus-visible {
57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); 57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
58 box-shadow: 58 box-shadow:
59 0 59 0
60 0 60 0
61 0 61 0
62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) 62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
63 props.get(vars.$item--key-focus--outline-color); 63 props.get(vars.$item--key-focus--outline-color);
64 } 64 }
65 } 65 }
66 66
67 @include bem.next-elem('header') { 67 @include bem.next-elem('header') {
68 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); 68 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
69 } 69 }
70 } 70 }
71 71
72 @include bem.elem('header') { 72 @include bem.elem('header') {
73 &:link, 73 &:link,
74 &:visited, 74 &:visited,
75 &:enabled { 75 &:enabled {
76 color: props.get(vars.$header--label-color); 76 color: props.get(vars.$header--label-color);
77 } 77 }
78 } 78 }
79 79
80 @include bem.elem('separator') { 80 @include bem.elem('separator') {
81 block-size: 1px; 81 block-size: 1px;
82 margin-block: props.get(vars.$separator-width); 82 margin-block: props.get(vars.$separator-width);
83 margin-inline: props.get(vars.$item--pad-i); 83 margin-inline: props.get(vars.$item--pad-i);
84 background-color: props.get(vars.$separator-color); 84 background-color: props.get(vars.$separator-color);
85 } 85 }
86 86
87 @include bem.elem('slot') { 87 @include bem.elem('slot') {
88 padding-block: props.get(vars.$item--pad-b); 88 padding-block: props.get(vars.$item--pad-b);
89 padding-inline: props.get(vars.$item--pad-i); 89 padding-inline: props.get(vars.$item--pad-i);
90 } 90 }
91 91
92 @include bem.elem('icon-slot') { 92 @include bem.elem('icon-slot') {
93 display: flex; 93 display: flex;
94 justify-content: center; 94 justify-content: center;
95 inline-size: props.get(icon.$size); 95 inline-size: props.get(icon.$size);
96 } 96 }
97 97
98 @include bem.modifier('pull') { 98 @include bem.modifier('pull') {
99 margin: calc(-1 * props.get(vars.$item--pad-i)); 99 margin: calc(-1 * props.get(vars.$item--pad-i));
100 } 100 }
101 } 101 }
102} 102}
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index 59d4c51..ec03c62 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -9,183 +9,183 @@
9@use 'navbar.vars' as vars; 9@use 'navbar.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('navbar') { 14 @include bem.object('navbar') {
15 display: flex; 15 display: flex;
16 block-size: props.get(vars.$block-size); 16 block-size: props.get(vars.$block-size);
17 17
18 @include bem.elem('item-content-text') { 18 @include bem.elem('item-content-text') {
19 margin-inline: props.get(vars.$item--pad-i-label); 19 margin-inline: props.get(vars.$item--pad-i-label);
20 } 20 }
21 21
22 @include bem.elem('item-content') { 22 @include bem.elem('item-content') {
23 position: relative; 23 position: relative;
24 padding-block: props.get(vars.$item--pad-b); 24 padding-block: props.get(vars.$item--pad-b);
25 padding-inline: props.get(vars.$item--pad-i); 25 padding-inline: props.get(vars.$item--pad-i);
26 font-size: props.get(vars.$item--font-size); 26 font-size: props.get(vars.$item--font-size);
27 color: currentColor; 27 color: currentColor;
28 white-space: nowrap; 28 white-space: nowrap;
29 border-radius: 100em; 29 border-radius: 100em;
30 30
31 &::after { 31 &::after {
32 position: absolute; 32 position: absolute;
33 inset: calc(-1 * props.get(vars.$key-focus--border-offset)); 33 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
34 z-index: -10; 34 z-index: -10;
35 display: block; 35 display: block;
36 pointer-events: none; 36 visibility: hidden;
37 visibility: hidden; 37 pointer-events: none;
38 content: ''; 38 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
39 border-radius: 100em; 39 content: '';
40 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); 40 border-radius: 100em;
41 box-shadow: 41 box-shadow:
42 0 42 0
43 0 43 0
44 0 44 0
45 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 45 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
46 props.get(vars.$default-theme, --key-focus, --outline); 46 props.get(vars.$default-theme, --key-focus, --outline);
47 } 47 }
48 } 48 }
49 49
50 @include bem.elem('item') { 50 @include bem.elem('item') {
51 display: flex; 51 display: flex;
52 flex-direction: column; 52 flex-direction: column;
53 align-items: center; 53 align-items: center;
54 justify-content: center; 54 justify-content: center;
55 inline-size: 100%; 55 inline-size: 100%;
56 padding-inline: calc(.5 * props.get(vars.$spacing)); 56 padding-inline: calc(.5 * props.get(vars.$spacing));
57 font-weight: 500; 57 font-weight: 500;
58 color: props.get(vars.$default-theme, --disabled, --label-color); 58 color: props.get(vars.$default-theme, --disabled, --label-color);
59 59
60 &:link, 60 &:link,
61 &:visited, 61 &:visited,
62 &:enabled { 62 &:enabled {
63 color: props.get(vars.$default-theme, --label-color); 63 color: props.get(vars.$default-theme, --label-color);
64 64
65 &:hover, 65 &:hover,
66 &:focus-visible { 66 &:focus-visible {
67 color: props.get(vars.$default-theme, --hover, --label-color); 67 color: props.get(vars.$default-theme, --hover, --label-color);
68 68
69 @include bem.elem('item-content') { 69 @include bem.elem('item-content') {
70 background-color: props.get(vars.$default-theme, --hover, --bg-color); 70 background-color: props.get(vars.$default-theme, --hover, --bg-color);
71 } 71 }
72 } 72 }
73 73
74 &:focus-visible { 74 &:focus-visible {
75 @include bem.elem('item-content') { 75 @include bem.elem('item-content') {
76 &::after { 76 &::after {
77 visibility: visible; 77 visibility: visible;
78 } 78 }
79 } 79 }
80 } 80 }
81 81
82 &:active { 82 &:active {
83 color: props.get(vars.$default-theme, --active, --label-color); 83 color: props.get(vars.$default-theme, --active, --label-color);
84 84
85 @include bem.elem('item-content') { 85 @include bem.elem('item-content') {
86 background-color: props.get(vars.$default-theme, --active, --bg-color); 86 background-color: props.get(vars.$default-theme, --active, --bg-color);
87 } 87 }
88 } 88 }
89 } 89 }
90 90
91 @include bem.is('selected') { 91 @include bem.is('selected') {
92 font-weight: bold; 92 font-weight: bold;
93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color); 93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
94 94
95 @include bem.elem('item-content') { 95 @include bem.elem('item-content') {
96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); 96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
97 } 97 }
98 98
99 &:link, 99 &:link,
100 &:visited, 100 &:visited,
101 &:enabled { 101 &:enabled {
102 color: props.get(vars.$default-theme, --selected, --label-color); 102 color: props.get(vars.$default-theme, --selected, --label-color);
103 103
104 @include bem.elem('item-content') { 104 @include bem.elem('item-content') {
105 background-color: props.get(vars.$default-theme, --selected, --bg-color); 105 background-color: props.get(vars.$default-theme, --selected, --bg-color);
106 } 106 }
107 107
108 &:hover, 108 &:hover,
109 &:focus-visible { 109 &:focus-visible {
110 color: props.get(vars.$default-theme, --selected, --hover, --label-color); 110 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
111 111
112 @include bem.elem('item-content') { 112 @include bem.elem('item-content') {
113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); 113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
114 } 114 }
115 } 115 }
116 116
117 &:active { 117 &:active {
118 color: props.get(vars.$default-theme, --selected, --active, --label-color); 118 color: props.get(vars.$default-theme, --selected, --active, --label-color);
119 119
120 @include bem.elem('item-content') { 120 @include bem.elem('item-content') {
121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); 121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
122 } 122 }
123 } 123 }
124 } 124 }
125 } 125 }
126 } 126 }
127 127
128 @include bem.modifier('hide-unselected') { 128 @include bem.modifier('hide-unselected') {
129 @include bem.elem('item') { 129 @include bem.elem('item') {
130 display: none; 130 display: none;
131 131
132 @include bem.is('selected') { 132 @include bem.is('selected') {
133 display: flex; 133 display: flex;
134 } 134 }
135 } 135 }
136 } 136 }
137 137
138 @include bem.modifier('adapt') { 138 @include bem.modifier('adapt') {
139 gap: props.get(vars.$spacing); 139 gap: props.get(vars.$spacing);
140 block-size: 100%; 140 block-size: 100%;
141 141
142 @include bem.elem('item') { 142 @include bem.elem('item') {
143 padding-inline: 0; 143 padding-inline: 0;
144 } 144 }
145 } 145 }
146 146
147 147
148 @include bem.modifier('align-block') { 148 @include bem.modifier('align-block') {
149 margin-inline: calc(-1 * props.get(vars.$item--pad-i)); 149 margin-inline: calc(-1 * props.get(vars.$item--pad-i));
150 } 150 }
151 151
152 @include bem.modifier('quiet') { 152 @include bem.modifier('quiet') {
153 @include bem.elem('item') { 153 @include bem.elem('item') {
154 @include bem.is('selected') { 154 @include bem.is('selected') {
155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); 155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
156 156
157 @include bem.elem('item-content') { 157 @include bem.elem('item-content') {
158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); 158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
159 } 159 }
160 160
161 &:link, 161 &:link,
162 &:visited, 162 &:visited,
163 &:enabled { 163 &:enabled {
164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color); 164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
165 165
166 @include bem.elem('item-content') { 166 @include bem.elem('item-content') {
167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); 167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
168 } 168 }
169 169
170 &:hover, 170 &:hover,
171 &:focus-visible { 171 &:focus-visible {
172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); 172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
173 173
174 @include bem.elem('item-content') { 174 @include bem.elem('item-content') {
175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); 175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
176 } 176 }
177 } 177 }
178 178
179 &:active { 179 &:active {
180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); 180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
181 181
182 @include bem.elem('item-content') { 182 @include bem.elem('item-content') {
183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); 183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
184 } 184 }
185 } 185 }
186 } 186 }
187 } 187 }
188 } 188 }
189 } 189 }
190 } 190 }
191} 191}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index fcdac80..8e18def 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -17,68 +17,68 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props
17 17
18$default-theme-override: () !default; 18$default-theme-override: () !default;
19$default-theme: map.deep-merge(( 19$default-theme: map.deep-merge((
20 --label-color: props.get(core.$theme, --text), 20 --label-color: props.get(core.$theme, --text),
21 21
22 --hover: ( 22 --hover: (
23 --bg-color: props.get(core.$theme, --border-mute), 23 --bg-color: props.get(core.$theme, --border-mute),
24 --label-color: props.get(core.$theme, --heading), 24 --label-color: props.get(core.$theme, --heading),
25 ), 25 ),
26 26
27 --active: ( 27 --active: (
28 --bg-color: props.get(core.$theme, --border), 28 --bg-color: props.get(core.$theme, --border),
29 --label-color: props.get(core.$theme, --heading), 29 --label-color: props.get(core.$theme, --heading),
30 ), 30 ),
31 31
32 --disabled: ( 32 --disabled: (
33 --label-color: props.get(core.$theme, --border-strong), 33 --label-color: props.get(core.$theme, --border-strong),
34 ), 34 ),
35 35
36 --key-focus: ( 36 --key-focus: (
37 --label: props.get(core.$theme, --focus, --text), 37 --label: props.get(core.$theme, --focus, --text),
38 --border: props.get(core.$theme, --focus, --border), 38 --border: props.get(core.$theme, --focus, --border),
39 --outline: props.get(core.$theme, --focus, --outline), 39 --outline: props.get(core.$theme, --focus, --outline),
40 ), 40 ),
41 41
42 --selected: ( 42 --selected: (
43 --bg-color: props.get(core.$theme, --heading), 43 --bg-color: props.get(core.$theme, --heading),
44 --label-color: props.get(core.$theme, --base, --50), 44 --label-color: props.get(core.$theme, --base, --50),
45 45
46 --hover: ( 46 --hover: (
47 --bg-color: props.get(core.$theme, --text), 47 --bg-color: props.get(core.$theme, --text),
48 --label-color: props.get(core.$theme, --base, --50), 48 --label-color: props.get(core.$theme, --base, --50),
49 ), 49 ),
50 50
51 --active: ( 51 --active: (
52 --bg-color: props.get(core.$theme, --text-mute), 52 --bg-color: props.get(core.$theme, --text-mute),
53 --label-color: props.get(core.$theme, --base, --50), 53 --label-color: props.get(core.$theme, --base, --50),
54 ), 54 ),
55 55
56 --disabled: ( 56 --disabled: (
57 --bg-color: props.get(core.$theme, --border-mute), 57 --bg-color: props.get(core.$theme, --border-mute),
58 --label-color: props.get(core.$theme, --border-strong), 58 --label-color: props.get(core.$theme, --border-strong),
59 ), 59 ),
60 ), 60 ),
61 61
62 --quiet: ( 62 --quiet: (
63 --selected: ( 63 --selected: (
64 --bg-color: props.get(core.$theme, --accent, --200), 64 --bg-color: props.get(core.$theme, --accent, --200),
65 --label-color: props.get(core.$theme, --accent, --1100), 65 --label-color: props.get(core.$theme, --accent, --1100),
66 66
67 --hover: ( 67 --hover: (
68 --bg-color: props.get(core.$theme, --accent, --300), 68 --bg-color: props.get(core.$theme, --accent, --300),
69 --label-color: props.get(core.$theme, --accent, --1200), 69 --label-color: props.get(core.$theme, --accent, --1200),
70 ), 70 ),
71 71
72 --active: ( 72 --active: (
73 --bg-color: props.get(core.$theme, --accent, --400), 73 --bg-color: props.get(core.$theme, --accent, --400),
74 --label-color: props.get(core.$theme, --accent, --1300), 74 --label-color: props.get(core.$theme, --accent, --1300),
75 ), 75 ),
76 76
77 --disabled: ( 77 --disabled: (
78 --bg-color: props.get(core.$theme, --accent, --200), 78 --bg-color: props.get(core.$theme, --accent, --200),
79 --label-color: props.get(core.$theme, --accent, --800), 79 --label-color: props.get(core.$theme, --accent, --800),
80 ), 80 ),
81 ) 81 )
82 ) 82 )
83), $default-theme-override) !default; 83), $default-theme-override) !default;
84$default-theme: props.def(--o-navbar, $default-theme, 'color'); 84$default-theme: props.def(--o-navbar, $default-theme, 'color');
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 8a6cdb2..79c0f6c 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -7,57 +7,57 @@
7@use '../core.vars' as core; 7@use '../core.vars' as core;
8 8
9@mixin styles { 9@mixin styles {
10 @include bem.object('palette') { 10 @include bem.object('palette') {
11 display: flex; 11 display: flex;
12 block-size: 3em; 12 block-size: 3em;
13 13
14 @include bem.elem('item') { 14 @include bem.elem('item') {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 16
17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); 17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
18 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); 18 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
19 19
20 @for $i from 1 through list.length($levels) { 20 @for $i from 1 through list.length($levels) {
21 $key: list.nth(map.keys($levels), $i); 21 $key: list.nth(map.keys($levels), $i);
22 22
23 &:nth-child(#{$i}) { 23 &:nth-child(#{$i}) {
24 background-color: props.get(core.$theme, --base, $key); 24 background-color: props.get(core.$theme, --base, $key);
25 } 25 }
26 } 26 }
27 } 27 }
28 28
29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { 29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
30 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); 30 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
31 31
32 @include bem.modifier(string.slice($palette-name, 3)) { 32 @include bem.modifier(string.slice($palette-name, 3)) {
33 @include bem.elem('item') { 33 @include bem.elem('item') {
34 @for $i from 1 through list.length($levels) { 34 @for $i from 1 through list.length($levels) {
35 $key: list.nth(map.keys($levels), $i); 35 $key: list.nth(map.keys($levels), $i);
36 36
37 &:nth-child(#{$i}) { 37 &:nth-child(#{$i}) {
38 background-color: props.get(core.$theme, $palette-name, $key); 38 background-color: props.get(core.$theme, $palette-name, $key);
39 } 39 }
40 } 40 }
41 } 41 }
42 } 42 }
43 } 43 }
44 44
45 @include bem.modifier('static') { 45 @include bem.modifier('static') {
46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
47 $levels: map.get(config.$static-colors, --levels); 47 $levels: map.get(config.$static-colors, --levels);
48 48
49 @include bem.modifier(string.slice($palette-name, 3)) { 49 @include bem.modifier(string.slice($palette-name, 3)) {
50 @include bem.elem('item') { 50 @include bem.elem('item') {
51 @for $i from 1 through list.length($levels) { 51 @for $i from 1 through list.length($levels) {
52 $key: list.nth(map.keys($levels), $i); 52 $key: list.nth(map.keys($levels), $i);
53 53
54 &:nth-child(#{$i}) { 54 &:nth-child(#{$i}) {
55 background-color: props.get(core.$theme, #{$palette-name}-static, $key); 55 background-color: props.get(core.$theme, #{$palette-name}-static, $key);
56 } 56 }
57 } 57 }
58 } 58 }
59 } 59 }
60 } 60 }
61 } 61 }
62 } 62 }
63} 63}
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
index e148f21..80fc913 100644
--- a/src/objects/_placeholders.scss
+++ b/src/objects/_placeholders.scss
@@ -7,16 +7,16 @@
7@use 'placeholders.vars' as vars; 7@use 'placeholders.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('placeholders') { 12 @include bem.object('placeholders') {
13 @include bem.elem('placeholder') { 13 @include bem.elem('placeholder') {
14 display: inline-block; 14 display: inline-block;
15 min-block-size: props.get(vars.$min-block-size); 15 min-block-size: props.get(vars.$min-block-size);
16 vertical-align: middle; 16 vertical-align: middle;
17 background-color: currentColor; 17 background-color: currentColor;
18 border-radius: props.get(vars.$rounding); 18 border-radius: props.get(vars.$rounding);
19 opacity: props.get(vars.$opacity); 19 opacity: props.get(vars.$opacity);
20 } 20 }
21 } 21 }
22} 22}
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 4356dff..2746477 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -7,39 +7,39 @@
7@use 'popover.vars' as vars; 7@use 'popover.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('popover') { 12 @include bem.object('popover') {
13 position: fixed; 13 position: fixed;
14 inset-block-start: 0; 14 inset-block-start: 0;
15 inset-inline-start: 0; 15 inset-inline-start: 0;
16 z-index: props.get(vars.$z-index); 16 z-index: props.get(vars.$z-index);
17 padding-block: props.get(vars.$pad-b); 17 padding-block: props.get(vars.$pad-b);
18 padding-inline: props.get(vars.$pad-i); 18 padding-inline: props.get(vars.$pad-i);
19 margin: 0; 19 margin: 0;
20 color: currentColor; 20 color: currentColor;
21 background-color: props.get(vars.$bg-color); 21 background-color: props.get(vars.$bg-color);
22 border: props.get(vars.$border-width) solid transparent; 22 border: props.get(vars.$border-width) solid transparent;
23 border-color: props.get(vars.$border-color); 23 border-color: props.get(vars.$border-color);
24 border-radius: props.get(vars.$rounding); 24 border-radius: props.get(vars.$rounding);
25 transform: translate(var(--x), var(--y)); 25 box-shadow:
26 box-shadow: 26 props.get(vars.$shadow-x)
27 props.get(vars.$shadow-x) 27 props.get(vars.$shadow-y)
28 props.get(vars.$shadow-y) 28 props.get(vars.$shadow-blur)
29 props.get(vars.$shadow-blur) 29 props.get(vars.$shadow-grow)
30 props.get(vars.$shadow-grow) 30 props.get(vars.$shadow-color);
31 props.get(vars.$shadow-color); 31 transform: translate(var(--x), var(--y));
32 32
33 @include bem.modifier('up-left') { 33 @include bem.modifier('up-left') {
34 transform: translate(var(--x), calc(var(--y) - 100%)); 34 transform: translate(var(--x), calc(var(--y) - 100%));
35 } 35 }
36 36
37 @include bem.modifier('up-right') { 37 @include bem.modifier('up-right') {
38 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); 38 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
39 } 39 }
40 40
41 @include bem.modifier('down-right') { 41 @include bem.modifier('down-right') {
42 transform: translate(calc(var(--x) - 100%), var(--y)); 42 transform: translate(calc(var(--x) - 100%), var(--y));
43 } 43 }
44 } 44 }
45} 45}
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index aef6b92..8327a15 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -8,147 +8,147 @@
8@use 'radio.vars' as vars; 8@use 'radio.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('radio') { 13 @include bem.object('radio') {
14 position: relative; 14 position: relative;
15 display: inline-block; 15 display: inline-block;
16 padding-block: props.get(vars.$pad-b); 16 padding-block: props.get(vars.$pad-b);
17 padding-inline: props.get(vars.$pad-i); 17 padding-inline: props.get(vars.$pad-i);
18 margin-inline: 18 margin-inline:
19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
21 21
22 @include bem.elem('circle') { 22 @include bem.elem('circle') {
23 display: inline-block; 23 display: inline-block;
24 flex: 0 0 auto; 24 flex: 0 0 auto;
25 inline-size: props.get(vars.$diameter); 25 inline-size: props.get(vars.$diameter);
26 block-size: props.get(vars.$diameter); 26 block-size: props.get(vars.$diameter);
27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); 27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset));
28 vertical-align: top; 28 vertical-align: top;
29 background-color: props.get(vars.$circle-border-color); 29 background-color: props.get(vars.$circle-border-color);
30 background-clip: padding-box; 30 background-clip: padding-box;
31 border: props.get(vars.$key-focus--border-offset) solid transparent; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
32 border-radius: 2em; 32 border-radius: 2em;
33 33
34 &::after { 34 &::after {
35 position: relative; 35 position: relative;
36 inset-block-start: props.get(vars.$border-width); 36 inset-block-start: props.get(vars.$border-width);
37 inset-inline-start: props.get(vars.$border-width); 37 inset-inline-start: props.get(vars.$border-width);
38 display: block; 38 display: block;
39 inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); 39 inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
40 block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); 40 block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
41 content: ''; 41 content: '';
42 background-color: props.get(vars.$circle-bg-color); 42 background-color: props.get(vars.$circle-bg-color);
43 border-radius: props.get(vars.$diameter); 43 border-radius: props.get(vars.$diameter);
44 transition: transform .2s ease; 44 transition: transform .2s ease;
45 } 45 }
46 } 46 }
47 47
48 @include bem.elem('label') { 48 @include bem.elem('label') {
49 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); 49 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
50 } 50 }
51 51
52 @include bem.elem('native') { 52 @include bem.elem('native') {
53 position: absolute; 53 position: absolute;
54 inset-block-start: 0; 54 inset-block-start: 0;
55 inset-inline-start: 0; 55 inset-inline-start: 0;
56 z-index: -1; 56 z-index: -1;
57 inline-size: 100%; 57 inline-size: 100%;
58 block-size: 100%; 58 block-size: 100%;
59 padding: 0; 59 padding: 0;
60 margin: 0; 60 margin: 0;
61 overflow: hidden; 61 overflow: hidden;
62 appearance: none; 62 appearance: none;
63 border-radius: props.get(vars.$rounding); 63 border-radius: props.get(vars.$rounding);
64 64
65 &:hover, 65 &:hover,
66 &:focus-visible { 66 &:focus-visible {
67 @include bem.sibling-elem('label') { 67 @include bem.sibling-elem('label') {
68 color: props.get(vars.$hover--label-color); 68 color: props.get(vars.$hover--label-color);
69 } 69 }
70 70
71 @include bem.sibling-elem('circle') { 71 @include bem.sibling-elem('circle') {
72 background-color: props.get(vars.$hover--circle-border-color); 72 background-color: props.get(vars.$hover--circle-border-color);
73 } 73 }
74 } 74 }
75 75
76 &:checked { 76 &:checked {
77 @include bem.sibling-elem('circle') { 77 @include bem.sibling-elem('circle') {
78 &::after { 78 &::after {
79 transform: scale(.44); 79 transform: scale(.44);
80 } 80 }
81 } 81 }
82 } 82 }
83 83
84 &:disabled { 84 &:disabled {
85 @include bem.sibling-elem('label') { 85 @include bem.sibling-elem('label') {
86 color: props.get(vars.$disabled--label-color); 86 color: props.get(vars.$disabled--label-color);
87 } 87 }
88 88
89 @include bem.sibling-elem('circle') { 89 @include bem.sibling-elem('circle') {
90 background-color: props.get(vars.$disabled--circle-border-color); 90 background-color: props.get(vars.$disabled--circle-border-color);
91 91
92 &::after { 92 &::after {
93 background-color: props.get(vars.$disabled--circle-bg-color); 93 background-color: props.get(vars.$disabled--circle-bg-color);
94 } 94 }
95 } 95 }
96 } 96 }
97 97
98 &:focus-visible { 98 &:focus-visible {
99 @include bem.sibling-elem('label') { 99 @include bem.sibling-elem('label') {
100 color: props.get(vars.$key-focus--label-color); 100 color: props.get(vars.$key-focus--label-color);
101 } 101 }
102 102
103 @include bem.sibling-elem('circle') { 103 @include bem.sibling-elem('circle') {
104 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 104 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
105 box-shadow: 105 box-shadow:
106 0 106 0
107 0 107 0
108 0 108 0
109 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 109 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
110 props.get(vars.$key-focus--outline-color); 110 props.get(vars.$key-focus--outline-color);
111 } 111 }
112 } 112 }
113 } 113 }
114 114
115 @include bem.modifier('standalone') { 115 @include bem.modifier('standalone') {
116 @include bem.elem('circle') { 116 @include bem.elem('circle') {
117 margin-block-start: 0; 117 margin-block-start: 0;
118 } 118 }
119 } 119 }
120 120
121 @include bem.modifier('accent') { 121 @include bem.modifier('accent') {
122 @include bem.elem('native') { 122 @include bem.elem('native') {
123 &:checked { 123 &:checked {
124 @include bem.sibling-elem('circle') { 124 @include bem.sibling-elem('circle') {
125 background-color: props.get(vars.$accent--circle-border-color); 125 background-color: props.get(vars.$accent--circle-border-color);
126 } 126 }
127 127
128 &:hover, 128 &:hover,
129 &:focus-visible { 129 &:focus-visible {
130 @include bem.sibling-elem('circle') { 130 @include bem.sibling-elem('circle') {
131 background-color: props.get(vars.$accent--hover--circle-border-color); 131 background-color: props.get(vars.$accent--hover--circle-border-color);
132 } 132 }
133 } 133 }
134 } 134 }
135 135
136 &:disabled { 136 &:disabled {
137 @include bem.sibling-elem('circle') { 137 @include bem.sibling-elem('circle') {
138 background-color: props.get(vars.$disabled--circle-border-color); 138 background-color: props.get(vars.$disabled--circle-border-color);
139 139
140 &::after { 140 &::after {
141 background-color: props.get(vars.$disabled--circle-bg-color); 141 background-color: props.get(vars.$disabled--circle-bg-color);
142 } 142 }
143 } 143 }
144 144
145 &:checked { 145 &:checked {
146 @include bem.sibling-elem('circle') { 146 @include bem.sibling-elem('circle') {
147 background-color: props.get(vars.$disabled--circle-border-color); 147 background-color: props.get(vars.$disabled--circle-border-color);
148 } 148 }
149 } 149 }
150 } 150 }
151 } 151 }
152 } 152 }
153 } 153 }
154} 154}
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 6c60777..4a1feda 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -8,83 +8,83 @@
8@use 'side-nav.vars' as vars; 8@use 'side-nav.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('side-nav') { 13 @include bem.object('side-nav') {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 gap: props.get(vars.$spacing); 16 gap: props.get(vars.$spacing);
17 17
18 @include bem.elem('header') { 18 @include bem.elem('header') {
19 padding-block: props.get(vars.$item--pad-b); 19 padding-block: props.get(vars.$item--pad-b);
20 padding-inline: props.get(vars.$item--pad-i); 20 padding-inline: props.get(vars.$item--pad-i);
21 font-size: props.get(vars.$header--font-size); 21 font-size: props.get(vars.$header--font-size);
22 font-weight: 500; 22 font-weight: 500;
23 color: props.get(vars.$header--label-color); 23 color: props.get(vars.$header--label-color);
24 text-transform: uppercase; 24 text-transform: uppercase;
25 letter-spacing: .5px; 25 letter-spacing: .5px;
26 26
27 @include bem.next-twin-elem { 27 @include bem.next-twin-elem {
28 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); 28 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
29 } 29 }
30 } 30 }
31 31
32 @include bem.elem('item') { 32 @include bem.elem('item') {
33 padding-block: props.get(vars.$item--pad-b); 33 padding-block: props.get(vars.$item--pad-b);
34 padding-inline: props.get(vars.$item--pad-i); 34 padding-inline: props.get(vars.$item--pad-i);
35 margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); 35 margin: calc(-1 * props.get(vars.$item--key-focus--border-offset));
36 color: props.get(vars.$item--disabled--label-color); 36 color: props.get(vars.$item--disabled--label-color);
37 background-clip: padding-box; 37 background-clip: padding-box;
38 border: props.get(vars.$item--key-focus--border-offset) solid transparent; 38 border: props.get(vars.$item--key-focus--border-offset) solid transparent;
39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); 39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
40 40
41 &:link, 41 &:link,
42 &:visited, 42 &:visited,
43 &:enabled { 43 &:enabled {
44 color: currentColor; 44 color: currentColor;
45 45
46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { 46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
47 color: props.get(vars.$item--hover--label-color); 47 color: props.get(vars.$item--hover--label-color);
48 background-color: props.get(vars.$item--hover--bg-color); 48 background-color: props.get(vars.$item--hover--bg-color);
49 } 49 }
50 50
51 &:active { 51 &:active {
52 color: props.get(vars.$item--active--label-color); 52 color: props.get(vars.$item--active--label-color);
53 background-color: props.get(vars.$item--active--bg-color); 53 background-color: props.get(vars.$item--active--bg-color);
54 } 54 }
55 55
56 &:focus-visible { 56 &:focus-visible {
57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); 57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
58 box-shadow: 58 box-shadow:
59 0 59 0
60 0 60 0
61 0 61 0
62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) 62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
63 props.get(vars.$item--key-focus--outline-color); 63 props.get(vars.$item--key-focus--outline-color);
64 } 64 }
65 } 65 }
66 66
67 @include bem.next-elem('header') { 67 @include bem.next-elem('header') {
68 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); 68 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
69 } 69 }
70 } 70 }
71 71
72 @include bem.elem('header') { 72 @include bem.elem('header') {
73 &:link, 73 &:link,
74 &:visited, 74 &:visited,
75 &:enabled { 75 &:enabled {
76 color: props.get(vars.$header--label-color); 76 color: props.get(vars.$header--label-color);
77 } 77 }
78 } 78 }
79 79
80 @include bem.elem('separator') { 80 @include bem.elem('separator') {
81 block-size: props.get(vars.$separator); 81 block-size: props.get(vars.$separator);
82 } 82 }
83 83
84 @include bem.elem('icon-slot') { 84 @include bem.elem('icon-slot') {
85 display: flex; 85 display: flex;
86 justify-content: center; 86 justify-content: center;
87 inline-size: props.get(icon.$size); 87 inline-size: props.get(icon.$size);
88 } 88 }
89 } 89 }
90} 90}
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 1fcdf02..4e4aa42 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -9,19 +9,19 @@
9@use 'status-indicator.vars' as vars; 9@use 'status-indicator.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('status-indicator') { 14 @include bem.object('status-indicator') {
15 display: inline-block; 15 display: inline-block;
16 inline-size: props.get(vars.$size); 16 inline-size: props.get(vars.$size);
17 block-size: props.get(vars.$size); 17 block-size: props.get(vars.$size);
18 background-color: props.get(vars.$default); 18 background-color: props.get(vars.$default);
19 border-radius: 10em; 19 border-radius: 10em;
20 20
21 @each $theme in map.keys(props.get(vars.$themes)) { 21 @each $theme in map.keys(props.get(vars.$themes)) {
22 @include bem.is(string.slice($theme, 3)) { 22 @include bem.is(string.slice($theme, 3)) {
23 background-color: props.get(vars.$themes, $theme); 23 background-color: props.get(vars.$themes, $theme);
24 } 24 }
25 } 25 }
26 } 26 }
27} 27}
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 6289145..55b446a 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -9,18 +9,18 @@ $default: props.def(--o-status-indicator--default, props.get(core.$theme, --bord
9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; 9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
10 10
11$themes-config: ( 11$themes-config: (
12 accent: --accent, 12 accent: --accent,
13 positive: --positive, 13 positive: --positive,
14 negative: --negative, 14 negative: --negative,
15 warning: --warning, 15 warning: --warning,
16) !default; 16) !default;
17 17
18$themes: props.def(--o-status-indicator, (), 'color'); 18$themes: props.def(--o-status-indicator, (), 'color');
19 19
20@each $theme, $key in $themes-config { 20@each $theme, $key in $themes-config {
21 @if $theme != --base { 21 @if $theme != --base {
22 $themes: props.merge($themes, ( 22 $themes: props.merge($themes, (
23 --#{$theme}: props.get(core.$theme, $key, --700), 23 --#{$theme}: props.get(core.$theme, $key, --700),
24 )); 24 ));
25 } 25 }
26} 26}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 8612d31..48cec24 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -8,181 +8,181 @@
8@use 'switch.vars' as vars; 8@use 'switch.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('switch') { 13 @include bem.object('switch') {
14 position: relative; 14 position: relative;
15 display: inline-block; 15 display: inline-block;
16 padding-block: props.get(vars.$pad-b); 16 padding-block: props.get(vars.$pad-b);
17 padding-inline: props.get(vars.$pad-i); 17 padding-inline: props.get(vars.$pad-i);
18 margin-inline: 18 margin-inline:
19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
21 21
22 @include bem.elem('indicator') { 22 @include bem.elem('indicator') {
23 display: inline-block; 23 display: inline-block;
24 flex: 0 0 auto; 24 flex: 0 0 auto;
25 inline-size: props.get(vars.$inline-size); 25 inline-size: props.get(vars.$inline-size);
26 block-size: props.get(vars.$block-size); 26 block-size: props.get(vars.$block-size);
27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); 27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
28 vertical-align: top; 28 vertical-align: top;
29 background-color: props.get(vars.$track-bg-color); 29 background-color: props.get(vars.$track-bg-color);
30 background-clip: padding-box; 30 background-clip: padding-box;
31 border: props.get(vars.$key-focus--border-offset) solid transparent; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
32 border-radius: 2em; 32 border-radius: 2em;
33 transition: background-color .2s ease; 33 transition: background-color .2s ease;
34 34
35 &::after { 35 &::after {
36 display: block; 36 display: block;
37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); 37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
38 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); 38 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
39 content: ''; 39 content: '';
40 background-color: props.get(vars.$handle-bg-color); 40 background-color: props.get(vars.$handle-bg-color);
41 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); 41 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
42 border-radius: props.get(vars.$inline-size); 42 border-radius: props.get(vars.$inline-size);
43 transition: transform .2s ease; 43 transition: transform .2s ease;
44 } 44 }
45 } 45 }
46 46
47 @include bem.elem('label') { 47 @include bem.elem('label') {
48 margin-inline-start: props.get(vars.$label-gap); 48 margin-inline-start: props.get(vars.$label-gap);
49 } 49 }
50 50
51 @include bem.elem('native') { 51 @include bem.elem('native') {
52 position: absolute; 52 position: absolute;
53 inset-block-start: 0; 53 inset-block-start: 0;
54 inset-inline-start: 0; 54 inset-inline-start: 0;
55 z-index: -1; 55 z-index: -1;
56 inline-size: 100%; 56 inline-size: 100%;
57 block-size: 100%; 57 block-size: 100%;
58 padding: 0; 58 padding: 0;
59 margin: 0; 59 margin: 0;
60 overflow: hidden; 60 overflow: hidden;
61 appearance: none; 61 appearance: none;
62 border-radius: props.get(vars.$rounding); 62 border-radius: props.get(vars.$rounding);
63 63
64 &:hover, 64 &:hover,
65 &:focus-visible { 65 &:focus-visible {
66 @include bem.sibling-elem('label') { 66 @include bem.sibling-elem('label') {
67 color: props.get(vars.$hover--label-color); 67 color: props.get(vars.$hover--label-color);
68 } 68 }
69 69
70 @include bem.sibling-elem('indicator') { 70 @include bem.sibling-elem('indicator') {
71 &::after { 71 &::after {
72 border-color: props.get(vars.$hover--handle-border-color); 72 border-color: props.get(vars.$hover--handle-border-color);
73 } 73 }
74 } 74 }
75 } 75 }
76 76
77 &:checked { 77 &:checked {
78 @include bem.sibling-elem('indicator') { 78 @include bem.sibling-elem('indicator') {
79 background-color: props.get(vars.$handle-border-color); 79 background-color: props.get(vars.$handle-border-color);
80 80
81 &::after { 81 &::after {
82 border-color: props.get(vars.$handle-border-color); 82 border-color: props.get(vars.$handle-border-color);
83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); 83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
84 } 84 }
85 } 85 }
86 86
87 &:hover, 87 &:hover,
88 &:focus-visible { 88 &:focus-visible {
89 @include bem.sibling-elem('indicator') { 89 @include bem.sibling-elem('indicator') {
90 background-color: props.get(vars.$hover--handle-border-color); 90 background-color: props.get(vars.$hover--handle-border-color);
91 91
92 &::after { 92 &::after {
93 border-color: props.get(vars.$hover--handle-border-color); 93 border-color: props.get(vars.$hover--handle-border-color);
94 } 94 }
95 } 95 }
96 } 96 }
97 } 97 }
98 98
99 &:disabled { 99 &:disabled {
100 @include bem.sibling-elem('label') { 100 @include bem.sibling-elem('label') {
101 color: props.get(vars.$disabled--label-color); 101 color: props.get(vars.$disabled--label-color);
102 } 102 }
103 103
104 @include bem.sibling-elem('indicator') { 104 @include bem.sibling-elem('indicator') {
105 background-color: props.get(vars.$disabled--track-bg-color); 105 background-color: props.get(vars.$disabled--track-bg-color);
106 106
107 &::after { 107 &::after {
108 background-color: props.get(vars.$disabled--handle-bg-color); 108 background-color: props.get(vars.$disabled--handle-bg-color);
109 border-color: props.get(vars.$disabled--handle-border-color); 109 border-color: props.get(vars.$disabled--handle-border-color);
110 } 110 }
111 } 111 }
112 112
113 &:checked { 113 &:checked {
114 @include bem.sibling-elem('indicator') { 114 @include bem.sibling-elem('indicator') {
115 background-color: props.get(vars.$disabled--handle-border-color); 115 background-color: props.get(vars.$disabled--handle-border-color);
116 116
117 &::after { 117 &::after {
118 border-color: props.get(vars.$disabled--handle-border-color); 118 border-color: props.get(vars.$disabled--handle-border-color);
119 } 119 }
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 &:focus-visible { 124 &:focus-visible {
125 @include bem.sibling-elem('label') { 125 @include bem.sibling-elem('label') {
126 color: props.get(vars.$key-focus--label-color); 126 color: props.get(vars.$key-focus--label-color);
127 } 127 }
128 128
129 @include bem.sibling-elem('indicator') { 129 @include bem.sibling-elem('indicator') {
130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
131 box-shadow: 131 box-shadow:
132 0 132 0
133 0 133 0
134 0 134 0
135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
136 props.get(vars.$key-focus--outline-color); 136 props.get(vars.$key-focus--outline-color);
137 } 137 }
138 } 138 }
139 } 139 }
140 140
141 @include bem.modifier('standalone') { 141 @include bem.modifier('standalone') {
142 @include bem.elem('indicator') { 142 @include bem.elem('indicator') {
143 margin-block-start: 0; 143 margin-block-start: 0;
144 } 144 }
145 } 145 }
146 146
147 @include bem.modifier('accent') { 147 @include bem.modifier('accent') {
148 @include bem.elem('native') { 148 @include bem.elem('native') {
149 &:checked { 149 &:checked {
150 @include bem.sibling-elem('indicator') { 150 @include bem.sibling-elem('indicator') {
151 background-color: props.get(vars.$accent--handle-border-color); 151 background-color: props.get(vars.$accent--handle-border-color);
152 152
153 &::after { 153 &::after {
154 border-color: props.get(vars.$accent--handle-border-color); 154 border-color: props.get(vars.$accent--handle-border-color);
155 } 155 }
156 } 156 }
157 157
158 &:hover, 158 &:hover,
159 &:focus-visible { 159 &:focus-visible {
160 @include bem.sibling-elem('indicator') { 160 @include bem.sibling-elem('indicator') {
161 background-color: props.get(vars.$accent--hover--handle-border-color); 161 background-color: props.get(vars.$accent--hover--handle-border-color);
162 162
163 &::after { 163 &::after {
164 border-color: props.get(vars.$accent--hover--handle-border-color); 164 border-color: props.get(vars.$accent--hover--handle-border-color);
165 } 165 }
166 } 166 }
167 } 167 }
168 } 168 }
169 169
170 &:disabled { 170 &:disabled {
171 @include bem.sibling-elem('label') { 171 @include bem.sibling-elem('label') {
172 color: props.get(vars.$disabled--label-color); 172 color: props.get(vars.$disabled--label-color);
173 } 173 }
174 174
175 &:checked { 175 &:checked {
176 @include bem.sibling-elem('indicator') { 176 @include bem.sibling-elem('indicator') {
177 background-color: props.get(vars.$disabled--handle-border-color); 177 background-color: props.get(vars.$disabled--handle-border-color);
178 178
179 &::after { 179 &::after {
180 border-color: props.get(vars.$disabled--handle-border-color); 180 border-color: props.get(vars.$disabled--handle-border-color);
181 } 181 }
182 } 182 }
183 } 183 }
184 } 184 }
185 } 185 }
186 } 186 }
187 } 187 }
188} 188}
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 131c832..a9daaae 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -9,105 +9,105 @@
9@use 'tabbar.vars' as vars; 9@use 'tabbar.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('tabbar') { 14 @include bem.object('tabbar') {
15 min-inline-size: 0; 15 min-inline-size: 0;
16 block-size: props.get(vars.$block-size); 16 block-size: props.get(vars.$block-size);
17 overflow: hidden; 17 overflow: hidden;
18 18
19 &::after { 19 &::after {
20 display: block; 20 display: block;
21 block-size: props.get(vars.$indicator--width); 21 block-size: props.get(vars.$indicator--width);
22 margin-block-start: calc(-1 * props.get(vars.$indicator--width)); 22 margin-block-start: calc(-1 * props.get(vars.$indicator--width));
23 content: ''; 23 content: '';
24 background-color: props.get(vars.$railing--bg-color); 24 background-color: props.get(vars.$railing--bg-color);
25 } 25 }
26 26
27 @include bem.elem('tabs') { 27 @include bem.elem('tabs') {
28 display: flex; 28 display: flex;
29 block-size: 100%; 29 block-size: 100%;
30 margin-inline: calc(-.5 * props.get(vars.$spacing)); 30 margin-inline: calc(-.5 * props.get(vars.$spacing));
31 overflow-inline: auto; 31 overflow-inline: auto;
32 } 32 }
33 33
34 @include bem.modifier('quiet') { 34 @include bem.modifier('quiet') {
35 box-shadow: none; 35 box-shadow: none;
36 } 36 }
37 37
38 @include bem.modifier('adapt') { 38 @include bem.modifier('adapt') {
39 block-size: 100%; 39 block-size: 100%;
40 } 40 }
41 41
42 @include bem.elem('tab') { 42 @include bem.elem('tab') {
43 position: relative; 43 position: relative;
44 display: flex; 44 display: flex;
45 align-items: center; 45 align-items: center;
46 padding-inline: calc(.5 * props.get(vars.$spacing)); 46 padding-inline: calc(.5 * props.get(vars.$spacing));
47 color: props.get(vars.$tab--text-color); 47 color: props.get(vars.$tab--text-color);
48 white-space: nowrap; 48 white-space: nowrap;
49 49
50 &::before { 50 &::before {
51 position: absolute; 51 position: absolute;
52 inset-block-start: 50%; 52 inset-block-start: 50%;
53 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); 53 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
54 z-index: -10; 54 z-index: -10;
55 block-size: 1.5em; 55 block-size: 1.5em;
56 content: ''; 56 content: '';
57 border-radius: props.get(vars.$rounding); 57 border-radius: props.get(vars.$rounding);
58 transform: translateY(-50%); 58 transform: translateY(-50%);
59 } 59 }
60 60
61 &::after { 61 &::after {
62 position: absolute; 62 position: absolute;
63 inset-block-end: 0; 63 inset-block-end: 0;
64 inset-inline: calc(.5 * props.get(vars.$spacing)); 64 inset-inline: calc(.5 * props.get(vars.$spacing));
65 z-index: 10; 65 z-index: 10;
66 display: none; 66 display: none;
67 block-size: props.get(vars.$indicator--width); 67 block-size: props.get(vars.$indicator--width);
68 content: ''; 68 content: '';
69 background-color: props.get(vars.$tab--selected--text-color); 69 background-color: props.get(vars.$tab--selected--text-color);
70 } 70 }
71 71
72 &:link, 72 &:link,
73 &:visited { 73 &:visited {
74 &:hover, 74 &:hover,
75 &:active, 75 &:active,
76 &:focus-visible { 76 &:focus-visible {
77 color: props.get(vars.$tab--selected--text-color); 77 color: props.get(vars.$tab--selected--text-color);
78 } 78 }
79 79
80 &:focus-visible { 80 &:focus-visible {
81 &::before { 81 &::before {
82 color: props.get(vars.$key-focus--text-color); 82 color: props.get(vars.$key-focus--text-color);
83 text-decoration: none; 83 text-decoration: none;
84 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 84 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
85 box-shadow: 0 0 0 85 box-shadow: 0 0 0
86 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 86 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
87 props.get(vars.$key-focus--outline-color); 87 props.get(vars.$key-focus--outline-color);
88 } 88 }
89 } 89 }
90 } 90 }
91 91
92 @include bem.is('selected') { 92 @include bem.is('selected') {
93 color: props.get(vars.$tab--selected--text-color); 93 color: props.get(vars.$tab--selected--text-color);
94 94
95 &::after { 95 &::after {
96 display: block; 96 display: block;
97 } 97 }
98 } 98 }
99 } 99 }
100 100
101 @include bem.modifier('accent') { 101 @include bem.modifier('accent') {
102 @include bem.elem('tab') { 102 @include bem.elem('tab') {
103 &::after { 103 &::after {
104 background-color: props.get(vars.$tab--accent--text-color); 104 background-color: props.get(vars.$tab--accent--text-color);
105 } 105 }
106 106
107 @include bem.is('selected') { 107 @include bem.is('selected') {
108 color: props.get(vars.$tab--accent--text-color); 108 color: props.get(vars.$tab--accent--text-color);
109 } 109 }
110 } 110 }
111 } 111 }
112 } 112 }
113} 113}
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 2b63737..9e4891d 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -7,141 +7,141 @@
7@use 'table.vars' as vars; 7@use 'table.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('table') { 12 @include bem.object('table') {
13 border-spacing: 0; 13 border-spacing: 0;
14 border-collapse: separate; 14 border-collapse: separate;
15 15
16 @include bem.modifier('fixed') { 16 @include bem.modifier('fixed') {
17 table-layout: fixed; 17 table-layout: fixed;
18 } 18 }
19 19
20 @include bem.elem('head-cell') { 20 @include bem.elem('head-cell') {
21 padding-block: props.get(vars.$pad-b); 21 padding-block: props.get(vars.$pad-b);
22 padding-inline: props.get(vars.$pad-i); 22 padding-inline: props.get(vars.$pad-i);
23 font-family: props.get(vars.$heading--font-family); 23 font-family: props.get(vars.$heading--font-family);
24 font-size: props.get(vars.$heading--font-size); 24 font-size: props.get(vars.$heading--font-size);
25 font-weight: props.get(vars.$heading--font-weight); 25 font-weight: props.get(vars.$heading--font-weight);
26 color: props.get(vars.$heading-color); 26 color: props.get(vars.$heading-color);
27 text-align: start; 27 text-align: start;
28 text-transform: props.get(vars.$heading--text-transform); 28 text-transform: props.get(vars.$heading--text-transform);
29 letter-spacing: props.get(vars.$heading--letter-spacing); 29 letter-spacing: props.get(vars.$heading--letter-spacing);
30 } 30 }
31 31
32 @include bem.elem('cell') { 32 @include bem.elem('cell') {
33 padding-block: props.get(vars.$pad-b); 33 padding-block: props.get(vars.$pad-b);
34 padding-inline: props.get(vars.$pad-i); 34 padding-inline: props.get(vars.$pad-i);
35 border-color: props.get(vars.$border-color); 35 border-color: props.get(vars.$border-color);
36 border-style: solid; 36 border-style: solid;
37 border-width: 0; 37 border-width: 0;
38 border-block-start-width: props.get(vars.$border-width); 38 border-block-start-width: props.get(vars.$border-width);
39 39
40 @include bem.modifier('divider') { 40 @include bem.modifier('divider') {
41 border-inline-end-width: props.get(vars.$border-width); 41 border-inline-end-width: props.get(vars.$border-width);
42 } 42 }
43 } 43 }
44 44
45 @include bem.elem('row') { 45 @include bem.elem('row') {
46 &:last-child { 46 &:last-child {
47 @include bem.elem('cell') { 47 @include bem.elem('cell') {
48 border-block-end-width: props.get(vars.$border-width); 48 border-block-end-width: props.get(vars.$border-width);
49 } 49 }
50 } 50 }
51 } 51 }
52 52
53 @include bem.modifier('flush') { 53 @include bem.modifier('flush') {
54 @include bem.elem('head-cell', 'cell') { 54 @include bem.elem('head-cell', 'cell') {
55 &:first-child { 55 &:first-child {
56 padding-inline-start: 0; 56 padding-inline-start: 0;
57 } 57 }
58 58
59 &:last-child { 59 &:last-child {
60 padding-inline-end: 0; 60 padding-inline-end: 0;
61 } 61 }
62 } 62 }
63 } 63 }
64 64
65 @include bem.modifier('box') { 65 @include bem.modifier('box') {
66 @include bem.elem('cell') { 66 @include bem.elem('cell') {
67 background-color: props.get(vars.$box--bg-color); 67 background-color: props.get(vars.$box--bg-color);
68 68
69 &:first-child { 69 &:first-child {
70 border-inline-start-width: props.get(vars.$border-width); 70 border-inline-start-width: props.get(vars.$border-width);
71 } 71 }
72 72
73 &:last-child { 73 &:last-child {
74 border-inline-end-width: props.get(vars.$border-width); 74 border-inline-end-width: props.get(vars.$border-width);
75 } 75 }
76 } 76 }
77 77
78 @include bem.elem('row') { 78 @include bem.elem('row') {
79 &:first-child { 79 &:first-child {
80 @include bem.elem('cell') { 80 @include bem.elem('cell') {
81 &:first-child { 81 &:first-child {
82 border-start-start-radius: props.get(vars.$rounding); 82 border-start-start-radius: props.get(vars.$rounding);
83 } 83 }
84 84
85 &:last-child { 85 &:last-child {
86 border-start-end-radius: props.get(vars.$rounding); 86 border-start-end-radius: props.get(vars.$rounding);
87 } 87 }
88 } 88 }
89 } 89 }
90 90
91 &:last-child { 91 &:last-child {
92 @include bem.elem('cell') { 92 @include bem.elem('cell') {
93 &:first-child { 93 &:first-child {
94 border-end-start-radius: props.get(vars.$rounding); 94 border-end-start-radius: props.get(vars.$rounding);
95 } 95 }
96 96
97 &:last-child { 97 &:last-child {
98 border-end-end-radius: props.get(vars.$rounding); 98 border-end-end-radius: props.get(vars.$rounding);
99 } 99 }
100 } 100 }
101 } 101 }
102 } 102 }
103 } 103 }
104 104
105 @include bem.modifier('interactive') { 105 @include bem.modifier('interactive') {
106 @include bem.elem('row') { 106 @include bem.elem('row') {
107 @include bem.elem('cell') { 107 @include bem.elem('cell') {
108 cursor: pointer; 108 cursor: pointer;
109 } 109 }
110 110
111 &:hover { 111 &:hover {
112 @include bem.elem('cell') { 112 @include bem.elem('cell') {
113 background-color: props.get(vars.$hover--bg-color); 113 background-color: props.get(vars.$hover--bg-color);
114 } 114 }
115 } 115 }
116 116
117 &:active { 117 &:active {
118 @include bem.elem('cell') { 118 @include bem.elem('cell') {
119 background-color: props.get(vars.$active--bg-color); 119 background-color: props.get(vars.$active--bg-color);
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 @include bem.modifier('box') { 124 @include bem.modifier('box') {
125 @include bem.elem('row') { 125 @include bem.elem('row') {
126 &:hover { 126 &:hover {
127 @include bem.elem('cell') { 127 @include bem.elem('cell') {
128 background-color: props.get(vars.$box--hover--bg-color); 128 background-color: props.get(vars.$box--hover--bg-color);
129 } 129 }
130 } 130 }
131 131
132 &:active { 132 &:active {
133 @include bem.elem('cell') { 133 @include bem.elem('cell') {
134 background-color: props.get(vars.$box--active--bg-color); 134 background-color: props.get(vars.$box--active--bg-color);
135 } 135 }
136 } 136 }
137 } 137 }
138 } 138 }
139 } 139 }
140 140
141 @include bem.modifier('sm') { 141 @include bem.modifier('sm') {
142 @include bem.elem('head-cell', 'cell') { 142 @include bem.elem('head-cell', 'cell') {
143 padding-block: props.get(vars.$pad-b--sm); 143 padding-block: props.get(vars.$pad-b--sm);
144 } 144 }
145 } 145 }
146 } 146 }
147} 147}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index a52050c..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -7,181 +7,181 @@
7@use 'text-field.vars' as vars; 7@use 'text-field.vars' as vars;
8 8
9@mixin -invalid { 9@mixin -invalid {
10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
11 11
12 @include bem.sibling-elem('bg') { 12 @include bem.sibling-elem('bg') {
13 inset-block: $focus-border-offset; 13 inset-block: $focus-border-offset;
14 inset-inline: $focus-border-offset; 14 inset-inline: $focus-border-offset;
15 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); 15 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
16 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 16 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
17 } 17 }
18 18
19 &:hover { 19 &:hover {
20 @include bem.sibling-elem('bg') { 20 @include bem.sibling-elem('bg') {
21 border-color: props.get(vars.$error--hover--border-color); 21 border-color: props.get(vars.$error--hover--border-color);
22 } 22 }
23 } 23 }
24 24
25 &:focus { 25 &:focus {
26 @include bem.sibling-elem('bg') { 26 @include bem.sibling-elem('bg') {
27 border-color: props.get(vars.$error--focus--border-color); 27 border-color: props.get(vars.$error--focus--border-color);
28 } 28 }
29 } 29 }
30} 30}
31 31
32@mixin -keyboard-focus { 32@mixin -keyboard-focus {
33 @include bem.sibling-elem('bg') { 33 @include bem.sibling-elem('bg') {
34 border-color: props.get(vars.$key-focus--border-color); 34 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
35 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); 35 border-color: props.get(vars.$key-focus--border-color);
36 //outline-offset: props.get(vars.$focus --border); 36 //outline-offset: props.get(vars.$focus --border);
37 } 37 }
38} 38}
39 39
40@mixin styles { 40@mixin styles {
41 @include materialize-at-root(meta.module-variables('vars')); 41 @include materialize-at-root(meta.module-variables('vars'));
42 42
43 @include bem.object('text-field') { 43 @include bem.object('text-field') {
44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
45 45
46 position: relative; 46 position: relative;
47 min-inline-size: 0; 47 min-inline-size: 0;
48 background-color: props.get(vars.$bg-color); 48 background-color: props.get(vars.$bg-color);
49 border-radius: props.get(vars.$rounding); 49 border-radius: props.get(vars.$rounding);
50 50
51 @include bem.elem('bg') { 51 @include bem.elem('bg') {
52 position: absolute; 52 position: absolute;
53 inset-block: 0; 53 inset-block: 0;
54 inset-inline: 0; 54 inset-inline: 0;
55 display: block; 55 display: block;
56 pointer-events: none; 56 pointer-events: none;
57 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 57 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
58 border-radius: props.get(vars.$rounding); 58 border-radius: props.get(vars.$rounding);
59 } 59 }
60 60
61 @include bem.elem('native') { 61 @include bem.elem('native') {
62 box-sizing: border-box; 62 box-sizing: border-box;
63 inline-size: 100%; 63 inline-size: 100%;
64 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); 64 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
65 padding-inline: props.get(vars.$pad-i); 65 padding-inline: props.get(vars.$pad-i);
66 font: inherit; 66 font: inherit;
67 line-height: props.get(vars.$line-height); 67 line-height: props.get(vars.$line-height);
68 color: props.get(vars.$text-color); 68 color: props.get(vars.$text-color);
69 appearance: none; 69 appearance: none;
70 resize: none; 70 resize: none;
71 background-color: transparent; 71 background-color: transparent;
72 border: 1px solid transparent; 72 border: 1px solid transparent;
73 73
74 &::placeholder { 74 &::placeholder {
75 font-style: italic; 75 font-style: italic;
76 color: props.get(vars.$placeholder-color); 76 color: props.get(vars.$placeholder-color);
77 opacity: 1; 77 opacity: 1;
78 } 78 }
79 79
80 &:hover { 80 &:hover {
81 @include bem.sibling-elem('bg') { 81 @include bem.sibling-elem('bg') {
82 border-color: props.get(vars.$hover--border-color); 82 border-color: props.get(vars.$hover--border-color);
83 } 83 }
84 } 84 }
85 85
86 &:focus { 86 &:focus {
87 outline: 0; 87 outline: 0;
88 88
89 @include bem.sibling-elem('bg') { 89 @include bem.sibling-elem('bg') {
90 inset-block: $focus-border-offset; 90 inset-block: $focus-border-offset;
91 inset-inline: $focus-border-offset; 91 inset-inline: $focus-border-offset;
92 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); 92 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
93 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 93 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
94 } 94 }
95 } 95 }
96 96
97 &:invalid { 97 &:invalid {
98 @include -invalid; 98 @include -invalid;
99 } 99 }
100 100
101 &:focus-visible, 101 &:focus-visible,
102 &:invalid:focus-visible { 102 &:invalid:focus-visible {
103 @include -keyboard-focus; 103 @include -keyboard-focus;
104 } 104 }
105 } 105 }
106 106
107 @include bem.modifier('extended') { 107 @include bem.modifier('extended') {
108 padding: props.get(vars.$extended--pad); 108 padding: props.get(vars.$extended--pad);
109 109
110 @include bem.multi('&', 'elem' 'bg') { 110 @include bem.multi('&', 'elem' 'bg') {
111 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); 111 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
112 } 112 }
113 113
114 @include bem.elem('native') { 114 @include bem.elem('native') {
115 &:focus { 115 &:focus {
116 @include bem.sibling-elem('bg') { 116 @include bem.sibling-elem('bg') {
117 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); 117 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
118 } 118 }
119 } 119 }
120 } 120 }
121 } 121 }
122 122
123 @include bem.modifier('pill') { 123 @include bem.modifier('pill') {
124 @include bem.multi('&', 'elem' 'bg') { 124 @include bem.multi('&', 'elem' 'bg') {
125 border-radius: 100em; 125 border-radius: 100em;
126 } 126 }
127 127
128 @include bem.elem('native') { 128 @include bem.elem('native') {
129 padding-inline: props.get(vars.$pad-i-pill); 129 padding-inline: props.get(vars.$pad-i-pill);
130 130
131 &:focus { 131 &:focus {
132 @include bem.sibling-elem('bg') { 132 @include bem.sibling-elem('bg') {
133 border-radius: 100em; 133 border-radius: 100em;
134 } 134 }
135 } 135 }
136 } 136 }
137 137
138 @include bem.modifier('extended') { 138 @include bem.modifier('extended') {
139 @include bem.elem('native') { 139 @include bem.elem('native') {
140 padding-inline: props.get(vars.$pad-i); 140 padding-inline: props.get(vars.$pad-i);
141 } 141 }
142 } 142 }
143 } 143 }
144 144
145 @include bem.is('invalid') { 145 @include bem.is('invalid') {
146 @include bem.elem('native') { 146 @include bem.elem('native') {
147 @include -invalid; 147 @include -invalid;
148 148
149 &:focus-visible { 149 &:focus-visible {
150 @include -keyboard-focus; 150 @include -keyboard-focus;
151 } 151 }
152 } 152 }
153 } 153 }
154 154
155 @include bem.is('disabled') { 155 @include bem.is('disabled') {
156 background-color: props.get(vars.$disabled--bg-color); 156 background-color: props.get(vars.$disabled--bg-color);
157 157
158 @include bem.elem('native') { 158 @include bem.elem('native') {
159 color: props.get(vars.$disabled--text-color); 159 color: props.get(vars.$disabled--text-color);
160 160
161 &::placeholder { 161 &::placeholder {
162 color: props.get(vars.$disabled--placeholder-color); 162 color: props.get(vars.$disabled--placeholder-color);
163 } 163 }
164 } 164 }
165 165
166 @include bem.elem('bg') { 166 @include bem.elem('bg') {
167 border-color: props.get(vars.$disabled--border-color); 167 border-color: props.get(vars.$disabled--border-color);
168 } 168 }
169 169
170 @include bem.is('invalid') { 170 @include bem.is('invalid') {
171 @include bem.elem('native') { 171 @include bem.elem('native') {
172 @include bem.sibling-elem('bg') { 172 @include bem.sibling-elem('bg') {
173 border-color: props.get(vars.$disabled--border-color); 173 border-color: props.get(vars.$disabled--border-color);
174 } 174 }
175 } 175 }
176 } 176 }
177 177
178 @include bem.elem('native') { 178 @include bem.elem('native') {
179 &:invalid { 179 &:invalid {
180 @include bem.sibling-elem('bg') { 180 @include bem.sibling-elem('bg') {
181 border-color: props.get(vars.$disabled--border-color); 181 border-color: props.get(vars.$disabled--border-color);
182 } 182 }
183 } 183 }
184 } 184 }
185 } 185 }
186 } 186 }
187} 187}
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 73a8cb0..60a98af 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -9,96 +9,96 @@
9@use 'thumbnail.vars' as vars; 9@use 'thumbnail.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('thumbnail') { 14 @include bem.object('thumbnail') {
15 position: relative; 15 position: relative;
16 display: block; 16 display: block;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 inline-size: props.get(vars.$size); 18 inline-size: props.get(vars.$size);
19 block-size: props.get(vars.$size); 19 block-size: props.get(vars.$size);
20 overflow: hidden; 20 overflow: hidden;
21 border-radius: props.get(vars.$rounding); 21 outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
22 outline: props.get(vars.$border-color) solid props.get(vars.$border-width); 22 outline-offset: calc(-1 * props.get(vars.$border-width));
23 outline-offset: calc(-1 * props.get(vars.$border-width)); 23 border-radius: props.get(vars.$rounding);
24 opacity: .75; 24 opacity: .75;
25 25
26 &:hover, 26 &:hover,
27 &:active, 27 &:active,
28 &:focus-visible { 28 &:focus-visible {
29 outline-color: props.get(vars.$hover--border-color); 29 outline-color: props.get(vars.$hover--border-color);
30 opacity: 1; 30 opacity: 1;
31 } 31 }
32 32
33 @include bem.is('selected') { 33 @include bem.is('selected') {
34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); 34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
35 35
36 margin: $focus-border-offset; 36 margin: $focus-border-offset;
37 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); 37 outline: none;
38 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 38 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
39 outline: none; 39 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
40 opacity: 1; 40 opacity: 1;
41 } 41 }
42 42
43 @include bem.elem('image') { 43 @include bem.elem('image') {
44 position: absolute; 44 position: absolute;
45 inset-block-start: 0; 45 inset-block-start: 0;
46 inset-inline-start: 0; 46 inset-inline-start: 0;
47 display: block; 47 display: block;
48 inline-size: 100%; 48 inline-size: 100%;
49 block-size: 100%; 49 block-size: 100%;
50 object-fit: cover; 50 object-fit: cover;
51 object-position: center center; 51 object-position: center center;
52 } 52 }
53 53
54 @include bem.elem('icon') { 54 @include bem.elem('icon') {
55 position: absolute; 55 position: absolute;
56 inset-block-start: 50%; 56 inset-block-start: 50%;
57 inset-inline-start: 50%; 57 inset-inline-start: 50%;
58 transform: translate(-50%, -50%); 58 transform: translate(-50%, -50%);
59 } 59 }
60 60
61 &:focus-visible { 61 &:focus-visible {
62 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); 62 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
63 63
64 margin: $focus-border-offset; 64 margin: $focus-border-offset;
65 border: props.get(vars.$key-focus--border-offset) solid transparent; 65 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
66 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 66 outline-offset: 0;
67 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 67 border: props.get(vars.$key-focus--border-offset) solid transparent;
68 outline-offset: 0; 68 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
69 box-shadow: 69 box-shadow:
70 0 70 0
71 0 71 0
72 0 72 0
73 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) 73 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
74 props.get(vars.$key-focus--outline-color); 74 props.get(vars.$key-focus--outline-color);
75 } 75 }
76 76
77 @each $theme in map.keys(props.get(vars.$static-themes)) { 77 @each $theme in map.keys(props.get(vars.$static-themes)) {
78 @include bem.modifier(string.slice($theme, 3)) { 78 @include bem.modifier(string.slice($theme, 3)) {
79 outline-color: props.get(vars.$static-themes, $theme, --border); 79 outline-color: props.get(vars.$static-themes, $theme, --border);
80 80
81 &:hover, 81 &:hover,
82 &:active, 82 &:active,
83 &:focus-visible { 83 &:focus-visible {
84 outline-color: props.get(vars.$static-themes, $theme, --hover, --border); 84 outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
85 } 85 }
86 86
87 @include bem.is('selected') { 87 @include bem.is('selected') {
88 border-color: props.get(vars.$static-themes, $theme, --selected, --border); 88 border-color: props.get(vars.$static-themes, $theme, --selected, --border);
89 } 89 }
90 90
91 &:focus-visible { 91 &:focus-visible {
92 border-color: transparent; 92 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
93 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); 93 border-color: transparent;
94 box-shadow: 94 box-shadow:
95 0 95 0
96 0 96 0
97 0 97 0
98 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) 98 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
99 props.get(vars.$static-themes, $theme, --key-focus, --outline); 99 props.get(vars.$static-themes, $theme, --key-focus, --outline);
100 } 100 }
101 } 101 }
102 } 102 }
103 } 103 }
104} 104}
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index 60bf2e9..e49e52e 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -28,24 +28,24 @@ $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !def
28$static-themes: props.def(--o-thumbnail, (), 'color'); 28$static-themes: props.def(--o-thumbnail, (), 'color');
29 29
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $thumbnail-theme: --static-#{string.slice($theme, 3)}; 31 $thumbnail-theme: --static-#{string.slice($theme, 3)};
32 32
33 $static-themes: props.merge($static-themes, ( 33 $static-themes: props.merge($static-themes, (
34 $thumbnail-theme: ( 34 $thumbnail-theme: (
35 --border: props.get(core.$transparent-colors, $theme, --400), 35 --border: props.get(core.$transparent-colors, $theme, --400),
36 36
37 --hover: ( 37 --hover: (
38 --border: props.get(core.$transparent-colors, $theme, --500), 38 --border: props.get(core.$transparent-colors, $theme, --500),
39 ), 39 ),
40 40
41 --selected: ( 41 --selected: (
42 --border: props.get(core.$transparent-colors, $theme, --900), 42 --border: props.get(core.$transparent-colors, $theme, --900),
43 ), 43 ),
44 44
45 --key-focus: ( 45 --key-focus: (
46 --border: props.get(core.$transparent-colors, $theme, --900), 46 --border: props.get(core.$transparent-colors, $theme, --900),
47 --outline: props.get(core.$transparent-colors, $theme, --300), 47 --outline: props.get(core.$transparent-colors, $theme, --300),
48 ), 48 ),
49 ) 49 )
50 )); 50 ));
51} 51}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 11:18:19 +0000