summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.scss20
-rw-r--r--src/objects/_alert.scss6
-rw-r--r--src/objects/_avatar.scss28
-rw-r--r--src/objects/_backdrop.scss4
-rw-r--r--src/objects/_badge.scss20
-rw-r--r--src/objects/_button.scss26
-rw-r--r--src/objects/_card.scss46
-rw-r--r--src/objects/_checkbox.scss57
-rw-r--r--src/objects/_divider.scss30
-rw-r--r--src/objects/_emoji.scss12
-rw-r--r--src/objects/_field-label.scss34
-rw-r--r--src/objects/_heading.scss12
-rw-r--r--src/objects/_icon.scss6
-rw-r--r--src/objects/_lightbox.scss56
-rw-r--r--src/objects/_menu.scss24
-rw-r--r--src/objects/_palette.scss16
-rw-r--r--src/objects/_popover.scss10
-rw-r--r--src/objects/_radio.scss40
-rw-r--r--src/objects/_side-nav.scss20
-rw-r--r--src/objects/_status-indicator.scss6
-rw-r--r--src/objects/_switch.scss44
-rw-r--r--src/objects/_table.scss52
-rw-r--r--src/objects/_text-field.scss48
23 files changed, 309 insertions, 308 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 046cd16..caba917 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -2,7 +2,7 @@
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:meta'; 3@use 'sass:meta';
4@use 'sass:string'; 4@use 'sass:string';
5@use 'iro-sass/src/iro-sass' as iro; 5@use 'iro-sass/src/bem' as bem;
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8 8
@@ -45,7 +45,7 @@
45 } 45 }
46 } 46 }
47 47
48 @include iro.bem-modifier('quiet') { 48 @include bem.modifier('quiet') {
49 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); 49 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
50 background-color: transparent; 50 background-color: transparent;
51 border-color: transparent; 51 border-color: transparent;
@@ -72,7 +72,7 @@
72 } 72 }
73 } 73 }
74 74
75 @include iro.bem-is('selected') { 75 @include bem.is('selected') {
76 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 76 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
77 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 77 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
78 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); 78 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
@@ -103,7 +103,7 @@
103@mixin styles { 103@mixin styles {
104 @include materialize-at-root(meta.module-variables('vars')); 104 @include materialize-at-root(meta.module-variables('vars'));
105 105
106 @include iro.bem-object('action-button') { 106 @include bem.object('action-button') {
107 position: relative; 107 position: relative;
108 display: inline-block; 108 display: inline-block;
109 padding-block: props.get(vars.$pad-b); 109 padding-block: props.get(vars.$pad-b);
@@ -140,12 +140,12 @@
140 @include -apply-theme(vars.$default-theme); 140 @include -apply-theme(vars.$default-theme);
141 141
142 @each $theme in map.keys(props.get(vars.$themes)) { 142 @each $theme in map.keys(props.get(vars.$themes)) {
143 @include iro.bem-modifier(string.slice($theme, 3)) { 143 @include bem.modifier(string.slice($theme, 3)) {
144 @include -apply-theme(vars.$themes, $theme); 144 @include -apply-theme(vars.$themes, $theme);
145 } 145 }
146 } 146 }
147 147
148 @include iro.bem-modifier('pill') { 148 @include bem.modifier('pill') {
149 padding-inline: props.get(vars.$pad-i-pill); 149 padding-inline: props.get(vars.$pad-i-pill);
150 border-radius: 100em; 150 border-radius: 100em;
151 151
@@ -155,23 +155,23 @@
155 } 155 }
156 156
157 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 157 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
158 @include iro.bem-modifier($mod) { 158 @include bem.modifier($mod) {
159 padding-block: props.get($pad-b); 159 padding-block: props.get($pad-b);
160 padding-inline: props.get($pad-i); 160 padding-inline: props.get($pad-i);
161 font-size: props.get($font-size); 161 font-size: props.get($font-size);
162 162
163 @include iro.bem-modifier('pill') { 163 @include bem.modifier('pill') {
164 padding-inline: props.get($pad-i-pill); 164 padding-inline: props.get($pad-i-pill);
165 } 165 }
166 } 166 }
167 } 167 }
168 168
169 @include iro.bem-modifier('icon') { 169 @include bem.modifier('icon') {
170 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 170 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
171 padding-inline: 0; 171 padding-inline: 0;
172 172
173 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 173 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
174 @include iro.bem-modifier($mod) { 174 @include bem.modifier($mod) {
175 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); 175 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
176 padding-inline: 0; 176 padding-inline: 0;
177 } 177 }
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index e4c2038..3c9209a 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'iro-sass/src/iro-sass' as iro; 3@use 'iro-sass/src/bem' as bem;
4@use 'iro-sass/src/props'; 4@use 'iro-sass/src/props';
5@use '../props' as *; 5@use '../props' as *;
6 6
@@ -10,7 +10,7 @@
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 iro.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);
@@ -18,7 +18,7 @@
18 border-radius: props.get(vars.$rounding); 18 border-radius: props.get(vars.$rounding);
19 19
20 @each $mod, $theme in vars.$themes-config { 20 @each $mod, $theme in vars.$themes-config {
21 @include iro.bem-modifier($mod) { 21 @include bem.modifier($mod) {
22 border-color: props.get(vars.$themes, $theme, --border-color); 22 border-color: props.get(vars.$themes, $theme, --border-color);
23 } 23 }
24 } 24 }
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 0f8e70f..535537f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -7,11 +7,11 @@
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 iro.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 iro.bem-next-elem('content') { 14 @include bem.next-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)),
@@ -24,7 +24,7 @@
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 iro.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);
@@ -50,7 +50,7 @@
50 props.get(vars.$key-focus--outline-color); 50 props.get(vars.$key-focus--outline-color);
51 } 51 }
52 52
53 @include iro.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;
@@ -58,7 +58,7 @@
58 58
59 @include status(vars.$indicator-size); 59 @include status(vars.$indicator-size);
60 60
61 @include iro.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);
@@ -69,38 +69,38 @@
69 border-radius: props.get(vars.$rounding); 69 border-radius: props.get(vars.$rounding);
70 } 70 }
71 71
72 @include iro.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 iro.bem-elem('content') { 79 @include bem.elem('content') {
80 border-radius: 100%; 80 border-radius: 100%;
81 } 81 }
82 } 82 }
83 83
84 @include iro.bem-modifier('placeholder') { 84 @include bem.modifier('placeholder') {
85 @include iro.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 iro.bem-modifier('colored') { 90 @include bem.modifier('colored') {
91 @include iro.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 @each $mod, $size, $font-size, $indicator-size in vars.$sizes { 97 @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
98 @include iro.bem-modifier($mod) { 98 @include bem.modifier($mod) {
99 font-size: props.get($font-size); 99 font-size: props.get($font-size);
100 100
101 @include status($indicator-size); 101 @include status($indicator-size);
102 102
103 @include iro.bem-elem('content') { 103 @include bem.elem('content') {
104 inline-size: props.get($size); 104 inline-size: props.get($size);
105 block-size: props.get($size); 105 block-size: props.get($size);
106 line-height: props.get($size); 106 line-height: props.get($size);
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index bf38079..0e8a7f0 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,7 +9,7 @@
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 iro.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);
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 1c28095..d50752a 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -2,7 +2,7 @@
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:meta'; 3@use 'sass:meta';
4@use 'sass:string'; 4@use 'sass:string';
5@use 'iro-sass/src/iro-sass' as iro; 5@use 'iro-sass/src/bem' as bem;
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8@use '../core.vars' as core; 8@use '../core.vars' as core;
@@ -29,7 +29,7 @@
29 } 29 }
30 } 30 }
31 31
32 @include iro.bem-modifier('quiet') { 32 @include bem.modifier('quiet') {
33 color: props.get($theme, list.join($key, --quiet --label)...); 33 color: props.get($theme, list.join($key, --quiet --label)...);
34 background-color: props.get($theme, list.join($key, --quiet --bg)...); 34 background-color: props.get($theme, list.join($key, --quiet --bg)...);
35 35
@@ -65,7 +65,7 @@
65@mixin styles { 65@mixin styles {
66 @include materialize-at-root(meta.module-variables('vars')); 66 @include materialize-at-root(meta.module-variables('vars'));
67 67
68 @include iro.bem-object('badge') { 68 @include bem.object('badge') {
69 position: relative; 69 position: relative;
70 display: inline-block; 70 display: inline-block;
71 padding-block: props.get(vars.$pad-b); 71 padding-block: props.get(vars.$pad-b);
@@ -98,25 +98,25 @@
98 } 98 }
99 } 99 }
100 100
101 @include iro.bem-elem('label') { 101 @include bem.elem('label') {
102 margin-inline: props.get(vars.$pad-i-label); 102 margin-inline: props.get(vars.$pad-i-label);
103 } 103 }
104 104
105 @include -apply-theme(vars.$default-theme, $static: true); 105 @include -apply-theme(vars.$default-theme, $static: true);
106 106
107 @each $theme in map.keys(props.get(vars.$themes)) { 107 @each $theme in map.keys(props.get(vars.$themes)) {
108 @include iro.bem-modifier(string.slice($theme, 3)) { 108 @include bem.modifier(string.slice($theme, 3)) {
109 @include -apply-theme(vars.$themes, $theme); 109 @include -apply-theme(vars.$themes, $theme);
110 } 110 }
111 } 111 }
112 112
113 @each $theme in map.keys(props.get(vars.$static-themes)) { 113 @each $theme in map.keys(props.get(vars.$static-themes)) {
114 @include iro.bem-modifier(string.slice($theme, 3)) { 114 @include bem.modifier(string.slice($theme, 3)) {
115 @include -apply-theme(vars.$static-themes, $theme, true); 115 @include -apply-theme(vars.$static-themes, $theme, true);
116 } 116 }
117 } 117 }
118 118
119 @include iro.bem-modifier('pill') { 119 @include bem.modifier('pill') {
120 padding-inline: props.get(vars.$pad-i-pill); 120 padding-inline: props.get(vars.$pad-i-pill);
121 border-radius: 10em; 121 border-radius: 10em;
122 122
@@ -126,16 +126,16 @@
126 } 126 }
127 127
128 @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { 128 @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
129 @include iro.bem-modifier($mod) { 129 @include bem.modifier($mod) {
130 padding-block: props.get($pad-b); 130 padding-block: props.get($pad-b);
131 padding-inline: props.get($pad-i); 131 padding-inline: props.get($pad-i);
132 font-size: props.get($font-size); 132 font-size: props.get($font-size);
133 133
134 @include iro.bem-elem('label') { 134 @include bem.elem('label') {
135 margin-inline: props.get($pad-i-label); 135 margin-inline: props.get($pad-i-label);
136 } 136 }
137 137
138 @include iro.bem-modifier('pill') { 138 @include bem.modifier('pill') {
139 padding-inline: props.get($pad-i-pill); 139 padding-inline: props.get($pad-i-pill);
140 } 140 }
141 } 141 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 9d5a8a1..1809ba6 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,7 +2,7 @@
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:meta'; 3@use 'sass:meta';
4@use 'sass:string'; 4@use 'sass:string';
5@use 'iro-sass/src/iro-sass' as iro; 5@use 'iro-sass/src/bem' as bem;
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8@use '../core.vars' as core; 8@use '../core.vars' as core;
@@ -19,7 +19,7 @@
19 border-color: transparent; 19 border-color: transparent;
20 } 20 }
21 21
22 @include iro.bem-modifier('outline') { 22 @include bem.modifier('outline') {
23 &:link, 23 &:link,
24 &:visited, 24 &:visited,
25 &:enabled { 25 &:enabled {
@@ -62,14 +62,14 @@
62 props.get($theme, list.join($key, --key-focus --outline)...); 62 props.get($theme, list.join($key, --key-focus --outline)...);
63 } 63 }
64 64
65 @include iro.bem-modifier('outline') { 65 @include bem.modifier('outline') {
66 background-color: transparent; 66 background-color: transparent;
67 border-color: props.get($theme, list.join($key, --disabled --outline-border)...); 67 border-color: props.get($theme, list.join($key, --disabled --outline-border)...);
68 } 68 }
69 69
70 @include -apply-theme($theme, $key); 70 @include -apply-theme($theme, $key);
71 71
72 @include iro.bem-modifier('primary') { 72 @include bem.modifier('primary') {
73 @include -apply-theme($theme, list.join($key, --primary)); 73 @include -apply-theme($theme, list.join($key, --primary));
74 } 74 }
75} 75}
@@ -77,7 +77,7 @@
77@mixin styles { 77@mixin styles {
78 @include materialize-at-root(meta.module-variables('vars')); 78 @include materialize-at-root(meta.module-variables('vars'));
79 79
80 @include iro.bem-object('button') { 80 @include bem.object('button') {
81 position: relative; 81 position: relative;
82 display: inline-block; 82 display: inline-block;
83 padding-block: props.get(vars.$pad-b); 83 padding-block: props.get(vars.$pad-b);
@@ -111,25 +111,25 @@
111 } 111 }
112 } 112 }
113 113
114 @include iro.bem-elem('label') { 114 @include bem.elem('label') {
115 margin-inline: props.get(vars.$pad-i-label); 115 margin-inline: props.get(vars.$pad-i-label);
116 } 116 }
117 117
118 @include iro.bem-modifier('block') { 118 @include bem.modifier('block') {
119 display: block; 119 display: block;
120 } 120 }
121 121
122 @include iro.bem-modifier('outline') { 122 @include bem.modifier('outline') {
123 background-color: transparent; 123 background-color: transparent;
124 } 124 }
125 125
126 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { 126 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
127 @include iro.bem-modifier($mod) { 127 @include bem.modifier($mod) {
128 padding-block: props.get($pad-b); 128 padding-block: props.get($pad-b);
129 padding-inline: props.get($pad-i); 129 padding-inline: props.get($pad-i);
130 font-size: props.get($font-size); 130 font-size: props.get($font-size);
131 131
132 @include iro.bem-elem('label') { 132 @include bem.elem('label') {
133 margin-inline: props.get($pad-i-label); 133 margin-inline: props.get($pad-i-label);
134 } 134 }
135 } 135 }
@@ -138,18 +138,18 @@
138 @include -apply-static-theme(vars.$default-theme); 138 @include -apply-static-theme(vars.$default-theme);
139 139
140 @each $theme in map.keys(props.get(vars.$themes)) { 140 @each $theme in map.keys(props.get(vars.$themes)) {
141 @include iro.bem-modifier(string.slice($theme, 3)) { 141 @include bem.modifier(string.slice($theme, 3)) {
142 @include -apply-theme(vars.$themes, $theme); 142 @include -apply-theme(vars.$themes, $theme);
143 } 143 }
144 } 144 }
145 145
146 @each $theme in map.keys(props.get(vars.$static-themes)) { 146 @each $theme in map.keys(props.get(vars.$static-themes)) {
147 @include iro.bem-modifier(string.slice($theme, 3)) { 147 @include bem.modifier(string.slice($theme, 3)) {
148 @include -apply-static-theme(vars.$static-themes, $theme); 148 @include -apply-static-theme(vars.$static-themes, $theme);
149 } 149 }
150 } 150 }
151 151
152 @include iro.bem-modifier('round') { 152 @include bem.modifier('round') {
153 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 153 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
154 padding-inline: 0; 154 padding-inline: 0;
155 border-radius: 100em; 155 border-radius: 100em;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index d92237b..a085491 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'avatar.vars' as avatar; 5@use 'avatar.vars' as avatar;
@@ -10,7 +10,7 @@
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 iro.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;
@@ -21,14 +21,14 @@
21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
22 transition: transform .2s; 22 transition: transform .2s;
23 23
24 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 25 &:hover,
26 &:active, 26 &:active,
27 &:focus-visible { 27 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 28 transform: translateY(props.get(vars.$hover--offset-b));
29 29
30 @include iro.bem-elem('body') { 30 @include bem.elem('body') {
31 @include iro.bem-modifier('hidden') { 31 @include bem.modifier('hidden') {
32 visibility: visible; 32 visibility: visible;
33 opacity: 1; 33 opacity: 1;
34 transition: 34 transition:
@@ -49,12 +49,12 @@
49 } 49 }
50 } 50 }
51 51
52 @include iro.bem-elem('avatar') { 52 @include bem.elem('avatar') {
53 margin-block-start: props.get(vars.$pad-b); 53 margin-block-start: props.get(vars.$pad-b);
54 margin-inline-start: props.get(vars.$pad-i); 54 margin-inline-start: props.get(vars.$pad-i);
55 } 55 }
56 56
57 @include iro.bem-elem('image') { 57 @include bem.elem('image') {
58 display: block; 58 display: block;
59 flex: 0 0 auto; 59 flex: 0 0 auto;
60 inline-size: 100%; 60 inline-size: 100%;
@@ -71,12 +71,12 @@
71 border-end-end-radius: props.get(vars.$rounding); 71 border-end-end-radius: props.get(vars.$rounding);
72 } 72 }
73 73
74 @include iro.bem-next-elem('avatar') { 74 @include bem.next-elem('avatar') {
75 margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); 75 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
76 } 76 }
77 } 77 }
78 78
79 @include iro.bem-elem('body') { 79 @include bem.elem('body') {
80 flex: 1 0 auto; 80 flex: 1 0 auto;
81 padding-block: props.get(vars.$pad-b); 81 padding-block: props.get(vars.$pad-b);
82 padding-inline: props.get(vars.$pad-i); 82 padding-inline: props.get(vars.$pad-i);
@@ -87,7 +87,7 @@
87 content: ''; 87 content: '';
88 } 88 }
89 89
90 @include iro.bem-modifier('hidden') { 90 @include bem.modifier('hidden') {
91 position: absolute; 91 position: absolute;
92 inset-block-end: 0; 92 inset-block-end: 0;
93 inset-inline: 0; 93 inset-inline: 0;
@@ -101,18 +101,18 @@
101 opacity .2s ease, 101 opacity .2s ease,
102 visibility 0s .2s linear; 102 visibility 0s .2s linear;
103 103
104 @include iro.bem-next-elem('image') { 104 @include bem.next-elem('image') {
105 border-start-start-radius: props.get(vars.$rounding); 105 border-start-start-radius: props.get(vars.$rounding);
106 border-start-end-radius: props.get(vars.$rounding); 106 border-start-end-radius: props.get(vars.$rounding);
107 } 107 }
108 } 108 }
109 } 109 }
110 110
111 @include iro.bem-elem('content') { 111 @include bem.elem('content') {
112 margin-block-start: props.get(vars.$spacing); 112 margin-block-start: props.get(vars.$spacing);
113 } 113 }
114 114
115 @include iro.bem-elem('footer') { 115 @include bem.elem('footer') {
116 flex: 0 0 auto; 116 flex: 0 0 auto;
117 padding-block: 0 props.get(vars.$pad-b); 117 padding-block: 0 props.get(vars.$pad-b);
118 padding-inline: props.get(vars.$pad-i); 118 padding-inline: props.get(vars.$pad-i);
@@ -127,18 +127,18 @@
127 } 127 }
128 } 128 }
129 129
130 @include iro.bem-modifier('quiet') { 130 @include bem.modifier('quiet') {
131 position: relative; 131 position: relative;
132 background-color: transparent; 132 background-color: transparent;
133 border: 0; 133 border: 0;
134 134
135 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 135 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
136 &:hover, 136 &:hover,
137 &:active, 137 &:active,
138 &:focus-visible { 138 &:focus-visible {
139 transform: none; 139 transform: none;
140 140
141 @include iro.bem-elem('image') { 141 @include bem.elem('image') {
142 background-color: props.get(vars.$quiet--hover--image-color); 142 background-color: props.get(vars.$quiet--hover--image-color);
143 opacity: .75; 143 opacity: .75;
144 transform: translateY(props.get(vars.$hover--offset-b)); 144 transform: translateY(props.get(vars.$hover--offset-b));
@@ -149,7 +149,7 @@
149 outline: none; 149 outline: none;
150 box-shadow: none; 150 box-shadow: none;
151 151
152 @include iro.bem-elem('image') { 152 @include bem.elem('image') {
153 background-color: props.get(vars.$quiet--hover--image-color); 153 background-color: props.get(vars.$quiet--hover--image-color);
154 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 154 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
155 box-shadow: 155 box-shadow:
@@ -163,7 +163,7 @@
163 } 163 }
164 } 164 }
165 165
166 @include iro.bem-elem('image') { 166 @include bem.elem('image') {
167 position: relative; 167 position: relative;
168 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 168 margin: calc(-1 * props.get(vars.$key-focus--border-width));
169 background-color: props.get(vars.$quiet--image-color); 169 background-color: props.get(vars.$quiet--image-color);
@@ -172,24 +172,24 @@
172 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 172 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
173 } 173 }
174 174
175 @include iro.bem-elem('body') { 175 @include bem.elem('body') {
176 padding: 0; 176 padding: 0;
177 padding-block-start: props.get(vars.$spacing); 177 padding-block-start: props.get(vars.$spacing);
178 } 178 }
179 179
180 @include iro.bem-elem('footer') { 180 @include bem.elem('footer') {
181 padding-inline: 0; 181 padding-inline: 0;
182 } 182 }
183 } 183 }
184 184
185 @include iro.bem-modifier('horizontal') { 185 @include bem.modifier('horizontal') {
186 flex-direction: row; 186 flex-direction: row;
187 align-items: center; 187 align-items: center;
188 188
189 @include iro.bem-elem('body') { 189 @include bem.elem('body') {
190 flex: 0 0 auto; 190 flex: 0 0 auto;
191 191
192 @include iro.bem-modifier('main') { 192 @include bem.modifier('main') {
193 flex-shrink: 1; 193 flex-shrink: 1;
194 inline-size: 100%; 194 inline-size: 100%;
195 min-inline-size: 0; 195 min-inline-size: 0;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index f0c6b85..f902da7 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,5 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/functions' as fn;
3@use 'iro-sass/src/props'; 4@use 'iro-sass/src/props';
4@use '../props' as *; 5@use '../props' as *;
5@use '../core.vars' as core; 6@use '../core.vars' as core;
@@ -10,7 +11,7 @@
10@mixin styles { 11@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
12 13
13 @include iro.bem-object('checkbox') { 14 @include bem.object('checkbox') {
14 position: relative; 15 position: relative;
15 display: inline-block; 16 display: inline-block;
16 padding-block: props.get(vars.$pad-b); 17 padding-block: props.get(vars.$pad-b);
@@ -19,7 +20,7 @@
19 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))
20 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));
21 22
22 @include iro.bem-elem('box') { 23 @include bem.elem('box') {
23 position: relative; 24 position: relative;
24 display: inline-block; 25 display: inline-block;
25 flex: 0 0 auto; 26 flex: 0 0 auto;
@@ -66,7 +67,7 @@
66 } 67 }
67 } 68 }
68 69
69 @include iro.bem-elem('check-icon') { 70 @include bem.elem('check-icon') {
70 position: absolute; 71 position: absolute;
71 inset-block-start: calc(1 * props.get(vars.$border-width)); 72 inset-block-start: calc(1 * props.get(vars.$border-width));
72 inset-inline-start: calc(1 * props.get(vars.$border-width)); 73 inset-inline-start: calc(1 * props.get(vars.$border-width));
@@ -76,17 +77,17 @@
76 block-size: calc(100% - 2 * props.get(vars.$border-width)); 77 block-size: calc(100% - 2 * props.get(vars.$border-width));
77 margin: 0; 78 margin: 0;
78 color: props.get(vars.$box-bg-color); 79 color: props.get(vars.$box-bg-color);
79 stroke-width: iro.fn-px-to-rem(3px); 80 stroke-width: fn.px-to-rem(3px);
80 transition: transform .2s ease; 81 transition: transform .2s ease;
81 transform: scale(0); 82 transform: scale(0);
82 transform-origin: 40% 90%; 83 transform-origin: 40% 90%;
83 } 84 }
84 85
85 @include iro.bem-elem('label') { 86 @include bem.elem('label') {
86 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));
87 } 88 }
88 89
89 @include iro.bem-elem('native') { 90 @include bem.elem('native') {
90 position: absolute; 91 position: absolute;
91 inset-block-start: 0; 92 inset-block-start: 0;
92 inset-inline-start: 0; 93 inset-inline-start: 0;
@@ -101,29 +102,29 @@
101 102
102 &:hover, 103 &:hover,
103 &:focus-visible { 104 &:focus-visible {
104 @include iro.bem-sibling-elem('label') { 105 @include bem.sibling-elem('label') {
105 color: props.get(vars.$hover--label-color); 106 color: props.get(vars.$hover--label-color);
106 } 107 }
107 108
108 @include iro.bem-sibling-elem('box') { 109 @include bem.sibling-elem('box') {
109 background-color: props.get(vars.$hover--box-border-color); 110 background-color: props.get(vars.$hover--box-border-color);
110 } 111 }
111 } 112 }
112 113
113 &:checked { 114 &:checked {
114 @include iro.bem-sibling-elem('box') { 115 @include bem.sibling-elem('box') {
115 &::before { 116 &::before {
116 transform: scale(0); 117 transform: scale(0);
117 } 118 }
118 119
119 @include iro.bem-elem('check-icon') { 120 @include bem.elem('check-icon') {
120 transform: scale(1); 121 transform: scale(1);
121 } 122 }
122 } 123 }
123 } 124 }
124 125
125 &:indeterminate { 126 &:indeterminate {
126 @include iro.bem-sibling-elem('box') { 127 @include bem.sibling-elem('box') {
127 &::before { 128 &::before {
128 transform: scale(0); 129 transform: scale(0);
129 } 130 }
@@ -132,18 +133,18 @@
132 transform: scale(1); 133 transform: scale(1);
133 } 134 }
134 135
135 @include iro.bem-elem('check-icon') { 136 @include bem.elem('check-icon') {
136 transform: scale(0); 137 transform: scale(0);
137 } 138 }
138 } 139 }
139 } 140 }
140 141
141 &:disabled { 142 &:disabled {
142 @include iro.bem-sibling-elem('label') { 143 @include bem.sibling-elem('label') {
143 color: props.get(vars.$disabled--label-color); 144 color: props.get(vars.$disabled--label-color);
144 } 145 }
145 146
146 @include iro.bem-sibling-elem('box') { 147 @include bem.sibling-elem('box') {
147 background-color: props.get(vars.$disabled--box-border-color); 148 background-color: props.get(vars.$disabled--box-border-color);
148 149
149 &::before { 150 &::before {
@@ -153,11 +154,11 @@
153 } 154 }
154 155
155 &:focus-visible { 156 &:focus-visible {
156 @include iro.bem-sibling-elem('label') { 157 @include bem.sibling-elem('label') {
157 color: props.get(vars.$key-focus--label-color); 158 color: props.get(vars.$key-focus--label-color);
158 } 159 }
159 160
160 @include iro.bem-sibling-elem('box') { 161 @include bem.sibling-elem('box') {
161 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);
162 box-shadow: 163 box-shadow:
163 0 164 0
@@ -169,42 +170,42 @@
169 } 170 }
170 } 171 }
171 172
172 @include iro.bem-modifier('standalone') { 173 @include bem.modifier('standalone') {
173 @include iro.bem-elem('box') { 174 @include bem.elem('box') {
174 margin-block-start: 0; 175 margin-block-start: 0;
175 } 176 }
176 } 177 }
177 178
178 @include iro.bem-modifier('accent') { 179 @include bem.modifier('accent') {
179 @include iro.bem-elem('native') { 180 @include bem.elem('native') {
180 &:checked { 181 &:checked {
181 @include iro.bem-sibling-elem('box') { 182 @include bem.sibling-elem('box') {
182 background-color: props.get(vars.$accent--box-border-color); 183 background-color: props.get(vars.$accent--box-border-color);
183 } 184 }
184 185
185 &:hover, 186 &:hover,
186 &:focus-visible { 187 &:focus-visible {
187 @include iro.bem-sibling-elem('box') { 188 @include bem.sibling-elem('box') {
188 background-color: props.get(vars.$accent--hover--box-border-color); 189 background-color: props.get(vars.$accent--hover--box-border-color);
189 } 190 }
190 } 191 }
191 } 192 }
192 193
193 &:indeterminate { 194 &:indeterminate {
194 @include iro.bem-sibling-elem('box') { 195 @include bem.sibling-elem('box') {
195 background-color: props.get(vars.$accent--box-border-color); 196 background-color: props.get(vars.$accent--box-border-color);
196 } 197 }
197 198
198 &:hover, 199 &:hover,
199 &:focus-visible { 200 &:focus-visible {
200 @include iro.bem-sibling-elem('box') { 201 @include bem.sibling-elem('box') {
201 background-color: props.get(vars.$accent--hover--box-border-color); 202 background-color: props.get(vars.$accent--hover--box-border-color);
202 } 203 }
203 } 204 }
204 } 205 }
205 206
206 &:disabled { 207 &:disabled {
207 @include iro.bem-sibling-elem('box') { 208 @include bem.sibling-elem('box') {
208 background-color: props.get(vars.$disabled--box-border-color); 209 background-color: props.get(vars.$disabled--box-border-color);
209 210
210 &::before { 211 &::before {
@@ -213,13 +214,13 @@
213 } 214 }
214 215
215 &:checked { 216 &:checked {
216 @include iro.bem-sibling-elem('box') { 217 @include bem.sibling-elem('box') {
217 background-color: props.get(vars.$disabled--box-border-color); 218 background-color: props.get(vars.$disabled--box-border-color);
218 } 219 }
219 } 220 }
220 221
221 &:indeterminate { 222 &:indeterminate {
222 @include iro.bem-sibling-elem('box') { 223 @include bem.sibling-elem('box') {
223 background-color: props.get(vars.$disabled--box-border-color); 224 background-color: props.get(vars.$disabled--box-border-color);
224 } 225 }
225 } 226 }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 49bc028..6932c7e 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,7 +1,7 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/bem' as bem;
5@use 'iro-sass/src/props'; 5@use 'iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7@use '../core.vars' as core; 7@use '../core.vars' as core;
@@ -12,7 +12,7 @@
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 iro.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;
@@ -39,11 +39,11 @@
39 display: block; 39 display: block;
40 } 40 }
41 41
42 @include iro.bem-elem('label') { 42 @include bem.elem('label') {
43 flex: 0 0 auto; 43 flex: 0 0 auto;
44 } 44 }
45 45
46 @include iro.bem-modifier('vertical') { 46 @include bem.modifier('vertical') {
47 align-self: stretch; 47 align-self: stretch;
48 inline-size: 1px; 48 inline-size: 1px;
49 block-size: auto; 49 block-size: auto;
@@ -56,7 +56,7 @@
56 } 56 }
57 } 57 }
58 58
59 @include iro.bem-modifier('medium') { 59 @include bem.modifier('medium') {
60 font-size: props.get(vars.$medium--label-font-size); 60 font-size: props.get(vars.$medium--label-font-size);
61 font-weight: 500; 61 font-weight: 500;
62 color: props.get(vars.$medium--label-color); 62 color: props.get(vars.$medium--label-color);
@@ -68,7 +68,7 @@
68 } 68 }
69 } 69 }
70 70
71 @include iro.bem-modifier('faint') { 71 @include bem.modifier('faint') {
72 font-size: props.get(vars.$faint--label-font-size); 72 font-size: props.get(vars.$faint--label-font-size);
73 font-weight: 500; 73 font-weight: 500;
74 color: props.get(vars.$faint--label-color); 74 color: props.get(vars.$faint--label-color);
@@ -80,7 +80,7 @@
80 } 80 }
81 } 81 }
82 82
83 @include iro.bem-modifier('labelled') { 83 @include bem.modifier('labelled') {
84 &::before { 84 &::before {
85 margin-inline-end: 1em; 85 margin-inline-end: 1em;
86 } 86 }
@@ -92,47 +92,47 @@
92 } 92 }
93 93
94 @each $theme in map.keys(props.get(vars.$themes)) { 94 @each $theme in map.keys(props.get(vars.$themes)) {
95 @include iro.bem-modifier(string.slice($theme, 3)) { 95 @include bem.modifier(string.slice($theme, 3)) {
96 &::before, 96 &::before,
97 &::after { 97 &::after {
98 background-color: props.get(vars.$themes, $theme, --bg); 98 background-color: props.get(vars.$themes, $theme, --bg);
99 } 99 }
100 100
101 @include iro.bem-elem('label') { 101 @include bem.elem('label') {
102 color: props.get(vars.$themes, $theme, --label); 102 color: props.get(vars.$themes, $theme, --label);
103 } 103 }
104 } 104 }
105 } 105 }
106 106
107 @each $theme in map.keys(props.get(vars.$static-themes)) { 107 @each $theme in map.keys(props.get(vars.$static-themes)) {
108 @include iro.bem-modifier(string.slice($theme, 3)) { 108 @include bem.modifier(string.slice($theme, 3)) {
109 &::before, 109 &::before,
110 &::after { 110 &::after {
111 background-color: props.get(vars.$static-themes, $theme, --strong, --bg); 111 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
112 } 112 }
113 113
114 @include iro.bem-elem('label') { 114 @include bem.elem('label') {
115 color: props.get(vars.$static-themes, $theme, --strong, --label); 115 color: props.get(vars.$static-themes, $theme, --strong, --label);
116 } 116 }
117 117
118 @include iro.bem-modifier('medium') { 118 @include bem.modifier('medium') {
119 &::before, 119 &::before,
120 &::after { 120 &::after {
121 background-color: props.get(vars.$static-themes, $theme, --medium, --bg); 121 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
122 } 122 }
123 123
124 @include iro.bem-elem('label') { 124 @include bem.elem('label') {
125 color: props.get(vars.$static-themes, $theme, --medium, --label); 125 color: props.get(vars.$static-themes, $theme, --medium, --label);
126 } 126 }
127 } 127 }
128 128
129 @include iro.bem-modifier('faint') { 129 @include bem.modifier('faint') {
130 &::before, 130 &::before,
131 &::after { 131 &::after {
132 background-color: props.get(vars.$static-themes, $theme, --faint, --bg); 132 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
133 } 133 }
134 134
135 @include iro.bem-elem('label') { 135 @include bem.elem('label') {
136 color: props.get(vars.$static-themes, $theme, --faint, --label); 136 color: props.get(vars.$static-themes, $theme, --faint, --label);
137 } 137 }
138 } 138 }
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 114c867..56d4e66 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'icon.vars' as icon; 5@use 'icon.vars' as icon;
@@ -10,7 +10,7 @@
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 iro.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));
@@ -20,24 +20,24 @@
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 iro.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 iro.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 iro.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 iro.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
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 8c275ee..9f87a20 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,10 +9,10 @@
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 iro.bem-object('field-label') { 12 @include bem.object('field-label') {
13 display: block; 13 display: block;
14 14
15 @include iro.bem-elem('label') { 15 @include bem.elem('label') {
16 display: block; 16 display: block;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 padding-inline-end: props.get(vars.$spacing-i); 18 padding-inline-end: props.get(vars.$spacing-i);
@@ -21,56 +21,56 @@
21 line-height: 1.3; 21 line-height: 1.3;
22 color: props.get(vars.$label-color); 22 color: props.get(vars.$label-color);
23 23
24 @include iro.bem-next-elem('content') { 24 @include bem.next-elem('content') {
25 margin-block-start: props.get(vars.$spacing-b); 25 margin-block-start: props.get(vars.$spacing-b);
26 } 26 }
27 } 27 }
28 28
29 @include iro.bem-elem('content') { 29 @include bem.elem('content') {
30 display: block; 30 display: block;
31 flex: 1 1 auto; 31 flex: 1 1 auto;
32 } 32 }
33 33
34 @include iro.bem-elem('hint') { 34 @include bem.elem('hint') {
35 display: block; 35 display: block;
36 margin-block-start: props.get(vars.$spacing-b); 36 margin-block-start: props.get(vars.$spacing-b);
37 font-size: props.get(vars.$hint-font-size); 37 font-size: props.get(vars.$hint-font-size);
38 color: props.get(vars.$hint-color); 38 color: props.get(vars.$hint-color);
39 } 39 }
40 40
41 @include iro.bem-is('invalid') { 41 @include bem.is('invalid') {
42 @include iro.bem-elem('hint') { 42 @include bem.elem('hint') {
43 color: props.get(vars.$error-hint-color); 43 color: props.get(vars.$error-hint-color);
44 } 44 }
45 } 45 }
46 46
47 @include iro.bem-is('disabled') { 47 @include bem.is('disabled') {
48 @include iro.bem-elem('label', 'hint') { 48 @include bem.elem('label', 'hint') {
49 color: props.get(vars.$disabled-color); 49 color: props.get(vars.$disabled-color);
50 } 50 }
51 } 51 }
52 52
53 @include iro.bem-modifier('align-start', 'align-end') { 53 @include bem.modifier('align-start', 'align-end') {
54 display: flex; 54 display: flex;
55 align-items: baseline; 55 align-items: baseline;
56 56
57 @include iro.bem-elem('label') { 57 @include bem.elem('label') {
58 display: inline-block; 58 display: inline-block;
59 59
60 @include iro.bem-next-elem('content') { 60 @include bem.next-elem('content') {
61 margin-block-start: 0; 61 margin-block-start: 0;
62 } 62 }
63 } 63 }
64 } 64 }
65 65
66 @include iro.bem-modifier('align-start') { 66 @include bem.modifier('align-start') {
67 @include iro.bem-elem('label') { 67 @include bem.elem('label') {
68 text-align: start; 68 text-align: start;
69 } 69 }
70 } 70 }
71 71
72 @include iro.bem-modifier('align-end') { 72 @include bem.modifier('align-end') {
73 @include iro.bem-elem('label') { 73 @include bem.elem('label') {
74 text-align: end; 74 text-align: end;
75 } 75 }
76 } 76 }
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 7efb23b..f3ee5b5 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,7 +9,7 @@
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 iro.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);
@@ -24,7 +24,7 @@
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 iro.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,
@@ -33,7 +33,7 @@
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 iro.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);
@@ -43,9 +43,9 @@
43 } 43 }
44 } 44 }
45 45
46 @include iro.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 iro.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);
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index f80915e..1e35830 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,7 +9,7 @@
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 iro.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);
@@ -18,7 +18,7 @@
18 stroke-linejoin: round; 18 stroke-linejoin: round;
19 stroke-width: props.get(vars.$stroke-width); 19 stroke-width: props.get(vars.$stroke-width);
20 20
21 @include iro.bem-modifier('block') { 21 @include bem.modifier('block') {
22 display: block; 22 display: block;
23 } 23 }
24 } 24 }
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 0ced4c6..341ed3d 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,7 +1,7 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/bem' as bem;
5@use 'iro-sass/src/props'; 5@use 'iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
@@ -11,7 +11,7 @@
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 iro.bem-object('lightbox') { 14 @include bem.object('lightbox') {
15 box-sizing: border-box; 15 box-sizing: border-box;
16 display: grid; 16 display: grid;
17 flex: 1 1 auto; 17 flex: 1 1 auto;
@@ -24,7 +24,7 @@
24 grid-template-columns: auto minmax(0, 1fr) auto; 24 grid-template-columns: auto minmax(0, 1fr) auto;
25 min-block-size: 0; 25 min-block-size: 0;
26 26
27 @include iro.bem-elem('header') { 27 @include bem.elem('header') {
28 display: flex; 28 display: flex;
29 grid-area: header; 29 grid-area: header;
30 align-items: flex-start; 30 align-items: flex-start;
@@ -32,7 +32,7 @@
32 padding-inline: props.get(vars.$pad); 32 padding-inline: props.get(vars.$pad);
33 } 33 }
34 34
35 @include iro.bem-elem('img') { 35 @include bem.elem('img') {
36 box-sizing: border-box; 36 box-sizing: border-box;
37 display: none; 37 display: none;
38 grid-area: content; 38 grid-area: content;
@@ -41,39 +41,39 @@
41 max-block-size: 100%; 41 max-block-size: 100%;
42 padding: props.get(vars.$pad); 42 padding: props.get(vars.$pad);
43 43
44 @include iro.bem-sibling-elem('img') { 44 @include bem.sibling-elem('img') {
45 @include iro.bem-modifier('default') { 45 @include bem.modifier('default') {
46 display: block; 46 display: block;
47 47
48 @include iro.bem-next-elem('nav-btn') { 48 @include bem.next-elem('nav-btn') {
49 display: block; 49 display: block;
50 50
51 @include iro.bem-next-elem('nav-btn') { 51 @include bem.next-elem('nav-btn') {
52 display: block; 52 display: block;
53 } 53 }
54 } 54 }
55 } 55 }
56 } 56 }
57 57
58 @include iro.bem-multi('&:target', 'is' 'visible') { 58 @include bem.multi('&:target', 'is' 'visible') {
59 display: block; 59 display: block;
60 60
61 @include iro.bem-next-elem('nav-btn') { 61 @include bem.next-elem('nav-btn') {
62 display: block; 62 display: block;
63 63
64 @include iro.bem-next-elem('nav-btn') { 64 @include bem.next-elem('nav-btn') {
65 display: block; 65 display: block;
66 } 66 }
67 } 67 }
68 68
69 @include iro.bem-sibling-elem('img') { 69 @include bem.sibling-elem('img') {
70 @include iro.bem-modifier('default') { 70 @include bem.modifier('default') {
71 display: none; 71 display: none;
72 72
73 @include iro.bem-next-elem('nav-btn') { 73 @include bem.next-elem('nav-btn') {
74 display: none; 74 display: none;
75 75
76 @include iro.bem-next-elem('nav-btn') { 76 @include bem.next-elem('nav-btn') {
77 display: none; 77 display: none;
78 } 78 }
79 } 79 }
@@ -82,7 +82,7 @@
82 } 82 }
83 } 83 }
84 84
85 @include iro.bem-elem('thumbnails') { 85 @include bem.elem('thumbnails') {
86 display: flex; 86 display: flex;
87 grid-area: thumbnails; 87 grid-area: thumbnails;
88 gap: props.get(vars.$thumbnail--spacing); 88 gap: props.get(vars.$thumbnail--spacing);
@@ -91,7 +91,7 @@
91 overflow: auto; 91 overflow: auto;
92 } 92 }
93 93
94 @include iro.bem-elem('footer') { 94 @include bem.elem('footer') {
95 display: flex; 95 display: flex;
96 grid-area: footer; 96 grid-area: footer;
97 align-items: flex-start; 97 align-items: flex-start;
@@ -99,7 +99,7 @@
99 padding-inline: props.get(vars.$pad); 99 padding-inline: props.get(vars.$pad);
100 } 100 }
101 101
102 @include iro.bem-elem('thumbnail') { 102 @include bem.elem('thumbnail') {
103 position: relative; 103 position: relative;
104 flex: 0 0 auto; 104 flex: 0 0 auto;
105 inline-size: props.get(vars.$thumbnail--size); 105 inline-size: props.get(vars.$thumbnail--size);
@@ -117,7 +117,7 @@
117 opacity: 1; 117 opacity: 1;
118 } 118 }
119 119
120 @include iro.bem-is('selected') { 120 @include bem.is('selected') {
121 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width)); 121 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width));
122 122
123 margin: $focus-border-offset; 123 margin: $focus-border-offset;
@@ -144,7 +144,7 @@
144 } 144 }
145 } 145 }
146 146
147 @include iro.bem-elem('thumbnail-img') { 147 @include bem.elem('thumbnail-img') {
148 position: absolute; 148 position: absolute;
149 inset-block-start: 0; 149 inset-block-start: 0;
150 inset-inline-start: 0; 150 inset-inline-start: 0;
@@ -155,21 +155,21 @@
155 object-position: center center; 155 object-position: center center;
156 } 156 }
157 157
158 @include iro.bem-elem('thumbnail-icon') { 158 @include bem.elem('thumbnail-icon') {
159 position: absolute; 159 position: absolute;
160 inset-block-start: 50%; 160 inset-block-start: 50%;
161 inset-inline-start: 50%; 161 inset-inline-start: 50%;
162 transform: translate(-50%, -50%); 162 transform: translate(-50%, -50%);
163 } 163 }
164 164
165 @include iro.bem-elem('close-btn') { 165 @include bem.elem('close-btn') {
166 flex: 0 0 auto; 166 flex: 0 0 auto;
167 margin-block-start: calc(-.5 * props.get(vars.$pad)); 167 margin-block-start: calc(-.5 * props.get(vars.$pad));
168 margin-inline: auto calc(-.5 * props.get(vars.$pad)); 168 margin-inline: auto calc(-.5 * props.get(vars.$pad));
169 font-size: props.get(vars.$close-button--font-size); 169 font-size: props.get(vars.$close-button--font-size);
170 } 170 }
171 171
172 @include iro.bem-elem('nav-btn') { 172 @include bem.elem('nav-btn') {
173 position: relative; 173 position: relative;
174 display: none; 174 display: none;
175 align-self: center; 175 align-self: center;
@@ -186,7 +186,7 @@
186 transform: translateY(-50%); 186 transform: translateY(-50%);
187 } 187 }
188 188
189 @include iro.bem-modifier('prev') { 189 @include bem.modifier('prev') {
190 grid-area: prev; 190 grid-area: prev;
191 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); 191 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
192 192
@@ -195,7 +195,7 @@
195 } 195 }
196 } 196 }
197 197
198 @include iro.bem-modifier('next') { 198 @include bem.modifier('next') {
199 grid-area: next; 199 grid-area: next;
200 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); 200 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
201 201
@@ -206,10 +206,10 @@
206 } 206 }
207 207
208 @each $theme in map.keys(props.get(vars.$static-themes)) { 208 @each $theme in map.keys(props.get(vars.$static-themes)) {
209 @include iro.bem-modifier(string.slice($theme, 3)) { 209 @include bem.modifier(string.slice($theme, 3)) {
210 color: props.get(vars.$static-themes, $theme, --text); 210 color: props.get(vars.$static-themes, $theme, --text);
211 211
212 @include iro.bem-elem('thumbnail') { 212 @include bem.elem('thumbnail') {
213 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border); 213 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border);
214 214
215 &:hover, 215 &:hover,
@@ -218,7 +218,7 @@
218 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border); 218 outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border);
219 } 219 }
220 220
221 @include iro.bem-is('selected') { 221 @include bem.is('selected') {
222 border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border); 222 border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border);
223 } 223 }
224 224
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 0741929..46ca109 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'icon.vars' as icon; 5@use 'icon.vars' as icon;
@@ -10,12 +10,12 @@
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 iro.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 iro.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);
@@ -24,12 +24,12 @@
24 text-transform: uppercase; 24 text-transform: uppercase;
25 letter-spacing: .5px; 25 letter-spacing: .5px;
26 26
27 @include iro.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 iro.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));
@@ -43,7 +43,7 @@
43 &:enabled { 43 &:enabled {
44 color: currentColor; 44 color: currentColor;
45 45
46 @include iro.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 }
@@ -64,12 +64,12 @@
64 } 64 }
65 } 65 }
66 66
67 @include iro.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 iro.bem-elem('header') { 72 @include bem.elem('header') {
73 &:link, 73 &:link,
74 &:visited, 74 &:visited,
75 &:enabled { 75 &:enabled {
@@ -77,25 +77,25 @@
77 } 77 }
78 } 78 }
79 79
80 @include iro.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 iro.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 iro.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 iro.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 }
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 88ce9b5..243810f 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,17 +1,17 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/bem' as bem;
5@use '../config'; 5@use '../config';
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../core.vars' as core; 7@use '../core.vars' as core;
8 8
9@mixin styles { 9@mixin styles {
10 @include iro.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 iro.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);
@@ -29,8 +29,8 @@
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 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); 30 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
31 31
32 @include iro.bem-modifier(string.slice($palette-name, 3)) { 32 @include bem.modifier(string.slice($palette-name, 3)) {
33 @include iro.bem-elem('item') { 33 @include bem.elem('item') {
34 @for $i from 1 through list.length($contrasts) { 34 @for $i from 1 through list.length($contrasts) {
35 $key: list.nth(map.keys($contrasts), $i); 35 $key: list.nth(map.keys($contrasts), $i);
36 36
@@ -42,12 +42,12 @@
42 } 42 }
43 } 43 }
44 44
45 @include iro.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 $contrasts: map.get(config.$static-colors, --contrasts); 47 $contrasts: map.get(config.$static-colors, --contrasts);
48 48
49 @include iro.bem-modifier(string.slice($palette-name, 3)) { 49 @include bem.modifier(string.slice($palette-name, 3)) {
50 @include iro.bem-elem('item') { 50 @include bem.elem('item') {
51 @for $i from 1 through list.length($contrasts) { 51 @for $i from 1 through list.length($contrasts) {
52 $key: list.nth(map.keys($contrasts), $i); 52 $key: list.nth(map.keys($contrasts), $i);
53 53
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 406c143..ae874ba 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,7 +9,7 @@
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 iro.bem-object('popover') { 12 @include bem.object('popover') {
13 position: absolute; 13 position: absolute;
14 inset-block-start: 0; 14 inset-block-start: 0;
15 inset-inline-start: 0; 15 inset-inline-start: 0;
@@ -22,15 +22,15 @@
22 border-radius: props.get(vars.$rounding); 22 border-radius: props.get(vars.$rounding);
23 transform: translate(var(--x), var(--y)); 23 transform: translate(var(--x), var(--y));
24 24
25 @include iro.bem-modifier('up-left') { 25 @include bem.modifier('up-left') {
26 transform: translate(var(--x), calc(var(--y) - 100%)); 26 transform: translate(var(--x), calc(var(--y) - 100%));
27 } 27 }
28 28
29 @include iro.bem-modifier('up-right') { 29 @include bem.modifier('up-right') {
30 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); 30 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
31 } 31 }
32 32
33 @include iro.bem-modifier('down-right') { 33 @include bem.modifier('down-right') {
34 transform: translate(calc(var(--x) - 100%), var(--y)); 34 transform: translate(calc(var(--x) - 100%), var(--y));
35 } 35 }
36 } 36 }
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index c6e5a60..b603a0d 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use '../core.vars' as core; 5@use '../core.vars' as core;
@@ -10,7 +10,7 @@
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 iro.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);
@@ -19,7 +19,7 @@
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 iro.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);
@@ -45,11 +45,11 @@
45 } 45 }
46 } 46 }
47 47
48 @include iro.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 iro.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;
@@ -64,17 +64,17 @@
64 64
65 &:hover, 65 &:hover,
66 &:focus-visible { 66 &:focus-visible {
67 @include iro.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 iro.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 iro.bem-sibling-elem('circle') { 77 @include bem.sibling-elem('circle') {
78 &::after { 78 &::after {
79 transform: scale(.44); 79 transform: scale(.44);
80 } 80 }
@@ -82,11 +82,11 @@
82 } 82 }
83 83
84 &:disabled { 84 &:disabled {
85 @include iro.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 iro.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 {
@@ -96,11 +96,11 @@
96 } 96 }
97 97
98 &:focus-visible { 98 &:focus-visible {
99 @include iro.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 iro.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
@@ -112,29 +112,29 @@
112 } 112 }
113 } 113 }
114 114
115 @include iro.bem-modifier('standalone') { 115 @include bem.modifier('standalone') {
116 @include iro.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 iro.bem-modifier('accent') { 121 @include bem.modifier('accent') {
122 @include iro.bem-elem('native') { 122 @include bem.elem('native') {
123 &:checked { 123 &:checked {
124 @include iro.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 iro.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 iro.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 {
@@ -143,7 +143,7 @@
143 } 143 }
144 144
145 &:checked { 145 &:checked {
146 @include iro.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 }
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index c1e984f..9488bec 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'icon.vars' as icon; 5@use 'icon.vars' as icon;
@@ -10,12 +10,12 @@
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 iro.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 iro.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);
@@ -24,12 +24,12 @@
24 text-transform: uppercase; 24 text-transform: uppercase;
25 letter-spacing: .5px; 25 letter-spacing: .5px;
26 26
27 @include iro.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 iro.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));
@@ -43,7 +43,7 @@
43 &:enabled { 43 &:enabled {
44 color: currentColor; 44 color: currentColor;
45 45
46 @include iro.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 }
@@ -64,12 +64,12 @@
64 } 64 }
65 } 65 }
66 66
67 @include iro.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 iro.bem-elem('header') { 72 @include bem.elem('header') {
73 &:link, 73 &:link,
74 &:visited, 74 &:visited,
75 &:enabled { 75 &:enabled {
@@ -77,11 +77,11 @@
77 } 77 }
78 } 78 }
79 79
80 @include iro.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 iro.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);
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index bf113a4..126f724 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,7 +1,7 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/bem' as bem;
5@use 'iro-sass/src/props'; 5@use 'iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
@@ -11,7 +11,7 @@
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 iro.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);
@@ -20,7 +20,7 @@
20 border-radius: 10em; 20 border-radius: 10em;
21 21
22 @each $theme in map.keys(props.get(vars.$themes)) { 22 @each $theme in map.keys(props.get(vars.$themes)) {
23 @include iro.bem-is(string.slice($theme, 3)) { 23 @include bem.is(string.slice($theme, 3)) {
24 background-color: props.get(vars.$themes, $theme); 24 background-color: props.get(vars.$themes, $theme);
25 } 25 }
26 } 26 }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index f368229..15d75b9 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use '../core.vars' as core; 5@use '../core.vars' as core;
@@ -10,7 +10,7 @@
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 iro.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);
@@ -19,7 +19,7 @@
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 iro.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);
@@ -44,11 +44,11 @@
44 } 44 }
45 } 45 }
46 46
47 @include iro.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 iro.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;
@@ -63,11 +63,11 @@
63 63
64 &:hover, 64 &:hover,
65 &:focus-visible { 65 &:focus-visible {
66 @include iro.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 iro.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 }
@@ -75,7 +75,7 @@
75 } 75 }
76 76
77 &:checked { 77 &:checked {
78 @include iro.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 {
@@ -86,7 +86,7 @@
86 86
87 &:hover, 87 &:hover,
88 &:focus-visible { 88 &:focus-visible {
89 @include iro.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 {
@@ -97,11 +97,11 @@
97 } 97 }
98 98
99 &:disabled { 99 &:disabled {
100 @include iro.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 iro.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 {
@@ -111,7 +111,7 @@
111 } 111 }
112 112
113 &:checked { 113 &:checked {
114 @include iro.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 {
@@ -122,11 +122,11 @@
122 } 122 }
123 123
124 &:focus-visible { 124 &:focus-visible {
125 @include iro.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 iro.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
@@ -138,16 +138,16 @@
138 } 138 }
139 } 139 }
140 140
141 @include iro.bem-modifier('standalone') { 141 @include bem.modifier('standalone') {
142 @include iro.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 iro.bem-modifier('accent') { 147 @include bem.modifier('accent') {
148 @include iro.bem-elem('native') { 148 @include bem.elem('native') {
149 &:checked { 149 &:checked {
150 @include iro.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 {
@@ -157,7 +157,7 @@
157 157
158 &:hover, 158 &:hover,
159 &:focus-visible { 159 &:focus-visible {
160 @include iro.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 {
@@ -168,12 +168,12 @@
168 } 168 }
169 169
170 &:disabled { 170 &:disabled {
171 @include iro.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 iro.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 {
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 491db20..c0a7360 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,15 +9,15 @@
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 iro.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 iro.bem-modifier('fixed') { 16 @include bem.modifier('fixed') {
17 table-layout: fixed; 17 table-layout: fixed;
18 } 18 }
19 19
20 @include iro.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);
@@ -29,7 +29,7 @@
29 letter-spacing: props.get(vars.$heading--letter-spacing); 29 letter-spacing: props.get(vars.$heading--letter-spacing);
30 } 30 }
31 31
32 @include iro.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);
@@ -37,21 +37,21 @@
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 iro.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 iro.bem-elem('row') { 45 @include bem.elem('row') {
46 &:last-child { 46 &:last-child {
47 @include iro.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 iro.bem-modifier('flush') { 53 @include bem.modifier('flush') {
54 @include iro.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 }
@@ -62,8 +62,8 @@
62 } 62 }
63 } 63 }
64 64
65 @include iro.bem-modifier('box') { 65 @include bem.modifier('box') {
66 @include iro.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 {
@@ -75,9 +75,9 @@
75 } 75 }
76 } 76 }
77 77
78 @include iro.bem-elem('row') { 78 @include bem.elem('row') {
79 &:first-child { 79 &:first-child {
80 @include iro.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 }
@@ -89,7 +89,7 @@
89 } 89 }
90 90
91 &:last-child { 91 &:last-child {
92 @include iro.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 }
@@ -102,35 +102,35 @@
102 } 102 }
103 } 103 }
104 104
105 @include iro.bem-modifier('interactive') { 105 @include bem.modifier('interactive') {
106 @include iro.bem-elem('row') { 106 @include bem.elem('row') {
107 @include iro.bem-elem('cell') { 107 @include bem.elem('cell') {
108 cursor: pointer; 108 cursor: pointer;
109 } 109 }
110 110
111 &:hover { 111 &:hover {
112 @include iro.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 iro.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 iro.bem-modifier('box') { 124 @include bem.modifier('box') {
125 @include iro.bem-elem('row') { 125 @include bem.elem('row') {
126 &:hover { 126 &:hover {
127 @include iro.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 iro.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 }
@@ -138,8 +138,8 @@
138 } 138 }
139 } 139 }
140 140
141 @include iro.bem-modifier('sm') { 141 @include bem.modifier('sm') {
142 @include iro.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 }
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b945866..0f96634 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,7 +9,7 @@
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 iro.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);
@@ -17,20 +17,20 @@
17 } 17 }
18 18
19 &:hover { 19 &:hover {
20 @include iro.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 iro.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 iro.bem-sibling-elem('bg') { 33 @include bem.sibling-elem('bg') {
34 border-color: props.get(vars.$key-focus--border-color); 34 border-color: props.get(vars.$key-focus--border-color);
35 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);
36 //outline-offset: props.get(vars.$focus --border); 36 //outline-offset: props.get(vars.$focus --border);
@@ -40,7 +40,7 @@
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 iro.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;
@@ -48,7 +48,7 @@
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 iro.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;
@@ -58,7 +58,7 @@
58 border-radius: props.get(vars.$rounding); 58 border-radius: props.get(vars.$rounding);
59 } 59 }
60 60
61 @include iro.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));
@@ -78,7 +78,7 @@
78 } 78 }
79 79
80 &:hover { 80 &:hover {
81 @include iro.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 }
@@ -86,7 +86,7 @@
86 &:focus { 86 &:focus {
87 outline: 0; 87 outline: 0;
88 88
89 @include iro.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);
@@ -104,24 +104,24 @@
104 } 104 }
105 } 105 }
106 106
107 @include iro.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 iro.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 iro.bem-elem('native') { 114 @include bem.elem('native') {
115 &:focus { 115 &:focus {
116 @include iro.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 iro.bem-is('invalid') { 123 @include bem.is('invalid') {
124 @include iro.bem-elem('native') { 124 @include bem.elem('native') {
125 @include -invalid; 125 @include -invalid;
126 126
127 &:focus-visible { 127 &:focus-visible {
@@ -130,10 +130,10 @@
130 } 130 }
131 } 131 }
132 132
133 @include iro.bem-is('disabled') { 133 @include bem.is('disabled') {
134 background-color: props.get(vars.$disabled--bg-color); 134 background-color: props.get(vars.$disabled--bg-color);
135 135
136 @include iro.bem-elem('native') { 136 @include bem.elem('native') {
137 color: props.get(vars.$disabled--text-color); 137 color: props.get(vars.$disabled--text-color);
138 138
139 &::placeholder { 139 &::placeholder {
@@ -141,21 +141,21 @@
141 } 141 }
142 } 142 }
143 143
144 @include iro.bem-elem('bg') { 144 @include bem.elem('bg') {
145 border-color: props.get(vars.$disabled--border-color); 145 border-color: props.get(vars.$disabled--border-color);
146 } 146 }
147 147
148 @include iro.bem-is('invalid') { 148 @include bem.is('invalid') {
149 @include iro.bem-elem('native') { 149 @include bem.elem('native') {
150 @include iro.bem-sibling-elem('bg') { 150 @include bem.sibling-elem('bg') {
151 border-color: props.get(vars.$disabled--border-color); 151 border-color: props.get(vars.$disabled--border-color);
152 } 152 }
153 } 153 }
154 } 154 }
155 155
156 @include iro.bem-elem('native') { 156 @include bem.elem('native') {
157 &:invalid { 157 &:invalid {
158 @include iro.bem-sibling-elem('bg') { 158 @include bem.sibling-elem('bg') {
159 border-color: props.get(vars.$disabled--border-color); 159 border-color: props.get(vars.$disabled--border-color);
160 } 160 }
161 } 161 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 05:46:47 +0000