summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 07:55:43 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 07:55:43 +0200
commit5216739cf9b084f7388d687b84044f522d267cbf (patch)
tree8619118c495fbe8f8aaf6680d1f391990ccb5feb /src/objects
parentUse pkg: to import include-media (diff)
downloadiro-design-5216739cf9b084f7388d687b84044f522d267cbf.tar.gz
iro-design-5216739cf9b084f7388d687b84044f522d267cbf.tar.bz2
iro-design-5216739cf9b084f7388d687b84044f522d267cbf.zip
Use iro-sass via pkg:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_alert.scss4
-rw-r--r--src/objects/_alert.vars.scss2
-rw-r--r--src/objects/_avatar.scss8
-rw-r--r--src/objects/_avatar.vars.scss2
-rw-r--r--src/objects/_backdrop.scss4
-rw-r--r--src/objects/_backdrop.vars.scss2
-rw-r--r--src/objects/_button.scss4
-rw-r--r--src/objects/_button.vars.scss2
-rw-r--r--src/objects/_card.scss4
-rw-r--r--src/objects/_card.vars.scss2
-rw-r--r--src/objects/_checkbox.scss56
-rw-r--r--src/objects/_checkbox.vars.scss2
-rw-r--r--src/objects/_dialog.scss4
-rw-r--r--src/objects/_dialog.vars.scss2
-rw-r--r--src/objects/_divider.scss14
-rw-r--r--src/objects/_divider.vars.scss2
-rw-r--r--src/objects/_emoji.scss4
-rw-r--r--src/objects/_emoji.vars.scss2
-rw-r--r--src/objects/_field-label.scss24
-rw-r--r--src/objects/_field-label.vars.scss2
-rw-r--r--src/objects/_figure.scss4
-rw-r--r--src/objects/_figure.vars.scss2
-rw-r--r--src/objects/_heading.scss8
-rw-r--r--src/objects/_heading.vars.scss2
-rw-r--r--src/objects/_icon.scss4
-rw-r--r--src/objects/_icon.vars.scss2
-rw-r--r--src/objects/_lightbox.scss4
-rw-r--r--src/objects/_lightbox.vars.scss2
-rw-r--r--src/objects/_menu.scss4
-rw-r--r--src/objects/_menu.vars.scss2
-rw-r--r--src/objects/_navbar.scss4
-rw-r--r--src/objects/_navbar.vars.scss6
-rw-r--r--src/objects/_palette.scss8
-rw-r--r--src/objects/_placeholders.scss4
-rw-r--r--src/objects/_placeholders.vars.scss2
-rw-r--r--src/objects/_popover.scss4
-rw-r--r--src/objects/_popover.vars.scss2
-rw-r--r--src/objects/_radio.scss36
-rw-r--r--src/objects/_radio.vars.scss2
-rw-r--r--src/objects/_side-nav.scss4
-rw-r--r--src/objects/_side-nav.vars.scss2
-rw-r--r--src/objects/_status-indicator.scss4
-rw-r--r--src/objects/_status-indicator.vars.scss2
-rw-r--r--src/objects/_switch.scss48
-rw-r--r--src/objects/_switch.vars.scss3
-rw-r--r--src/objects/_tabbar.scss4
-rw-r--r--src/objects/_tabbar.vars.scss4
-rw-r--r--src/objects/_table.scss20
-rw-r--r--src/objects/_table.vars.scss2
-rw-r--r--src/objects/_text-field.scss8
-rw-r--r--src/objects/_text-field.vars.scss2
-rw-r--r--src/objects/_thumbnail.scss8
-rw-r--r--src/objects/_thumbnail.vars.scss6
53 files changed, 182 insertions, 183 deletions
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index e6abc62..c2a1c58 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,7 +1,7 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'iro-sass/src/bem'; 3@use 'pkg:iro-sass/src/bem';
4@use 'iro-sass/src/props'; 4@use 'pkg:iro-sass/src/props';
5@use '../props' as *; 5@use '../props' as *;
6 6
7@forward 'alert.vars'; 7@forward 'alert.vars';
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 62d3414..bbd3dad 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -1,4 +1,4 @@
1@use 'iro-sass/src/props'; 1@use 'pkg:iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default; 4$border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default;
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 764c039..272c213 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'avatar.vars'; 6@forward 'avatar.vars';
@@ -130,7 +130,7 @@
130 clip-path: props.get($icon-mask); 130 clip-path: props.get($icon-mask);
131 } 131 }
132 } 132 }
133 133
134 @include bem.elem('content') { 134 @include bem.elem('content') {
135 inline-size: props.get($size); 135 inline-size: props.get($size);
136 block-size: props.get($size); 136 block-size: props.get($size);
@@ -139,7 +139,7 @@
139 } 139 }
140 } 140 }
141 } 141 }
142 142
143 &:focus-visible { 143 &:focus-visible {
144 &::after { 144 &::after {
145 display: block; 145 display: block;
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index d6e0497..467d7cc 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:math'; 1@use 'sass:math';
2 2
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6@function icon-mask($p) { 6@function icon-mask($p) {
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 346cf5f..6660abf 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'backdrop.vars'; 6@forward 'backdrop.vars';
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss
index 8bae733..9206117 100644
--- a/src/objects/_backdrop.vars.scss
+++ b/src/objects/_backdrop.vars.scss
@@ -1,4 +1,4 @@
1@use 'iro-sass/src/props'; 1@use 'pkg:iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$z-index: props.def(--o-backdrop--z-index, 10000) !default; 4$z-index: props.def(--o-backdrop--z-index, 10000) !default;
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 6cd3cc0..a3c8187 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,8 +2,8 @@
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/bem'; 5@use 'pkg:iro-sass/src/bem';
6@use 'iro-sass/src/props'; 6@use 'pkg:iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8 8
9@forward 'button.vars'; 9@forward 'button.vars';
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index d385cbb..3f835ae 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string'; 2@use 'sass:string';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$line-height: props.def(--o-button--line-height, 1.4) !default; 6$line-height: props.def(--o-button--line-height, 1.4) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 46cc401..b8bc727 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'avatar.vars' as avatar; 5@use 'avatar.vars' as avatar;
6 6
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index e84b8c3..4616c80 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; 5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 5faafb9..f3fb793 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,7 +1,7 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/functions' as fn; 3@use 'pkg:iro-sass/src/functions' as fn;
4@use 'iro-sass/src/props'; 4@use 'pkg:iro-sass/src/props';
5@use '../props' as *; 5@use '../props' as *;
6@use '../core.vars' as core; 6@use '../core.vars' as core;
7 7
@@ -32,14 +32,14 @@
32 background-clip: padding-box; 32 background-clip: padding-box;
33 border: props.get(vars.$key-focus--border-offset) solid transparent; 33 border: props.get(vars.$key-focus--border-offset) solid transparent;
34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); 34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
35 35
36 &::before, 36 &::before,
37 &::after { 37 &::after {
38 position: absolute; 38 position: absolute;
39 display: block; 39 display: block;
40 content: ''; 40 content: '';
41 } 41 }
42 42
43 &::before { 43 &::before {
44 inset-block-start: props.get(vars.$border-width); 44 inset-block-start: props.get(vars.$border-width);
45 inset-inline-start: props.get(vars.$border-width); 45 inset-inline-start: props.get(vars.$border-width);
@@ -49,7 +49,7 @@
49 background-color: props.get(vars.$box-bg-color); 49 background-color: props.get(vars.$box-bg-color);
50 transition: transform .2s ease; 50 transition: transform .2s ease;
51 } 51 }
52 52
53 &::after { 53 &::after {
54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px); 54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px);
55 inset-inline-start: calc(1.5 * props.get(vars.$border-width)); 55 inset-inline-start: calc(1.5 * props.get(vars.$border-width));
@@ -66,7 +66,7 @@
66 border-inline-width: 0 2px; 66 border-inline-width: 0 2px;
67 } 67 }
68 } 68 }
69 69
70 @include bem.elem('check-icon') { 70 @include bem.elem('check-icon') {
71 position: absolute; 71 position: absolute;
72 inset-block-start: calc(1 * props.get(vars.$border-width)); 72 inset-block-start: calc(1 * props.get(vars.$border-width));
@@ -82,11 +82,11 @@
82 transform-origin: 40% 90%; 82 transform-origin: 40% 90%;
83 transition: transform .2s ease; 83 transition: transform .2s ease;
84 } 84 }
85 85
86 @include bem.elem('label') { 86 @include bem.elem('label') {
87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); 87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
88 } 88 }
89 89
90 @include bem.elem('native') { 90 @include bem.elem('native') {
91 position: absolute; 91 position: absolute;
92 inset-block-start: 0; 92 inset-block-start: 0;
@@ -99,60 +99,60 @@
99 overflow: hidden; 99 overflow: hidden;
100 appearance: none; 100 appearance: none;
101 border-radius: props.get(vars.$rounding); 101 border-radius: props.get(vars.$rounding);
102 102
103 &:hover, 103 &:hover,
104 &:focus-visible { 104 &:focus-visible {
105 @include bem.sibling-elem('label') { 105 @include bem.sibling-elem('label') {
106 color: props.get(vars.$hover--label-color); 106 color: props.get(vars.$hover--label-color);
107 } 107 }
108 108
109 @include bem.sibling-elem('box') { 109 @include bem.sibling-elem('box') {
110 background-color: props.get(vars.$hover--box-border-color); 110 background-color: props.get(vars.$hover--box-border-color);
111 } 111 }
112 } 112 }
113 113
114 &:checked { 114 &:checked {
115 @include bem.sibling-elem('box') { 115 @include bem.sibling-elem('box') {
116 &::before { 116 &::before {
117 transform: scale(0); 117 transform: scale(0);
118 } 118 }
119 119
120 @include bem.elem('check-icon') { 120 @include bem.elem('check-icon') {
121 transform: scale(1); 121 transform: scale(1);
122 } 122 }
123 } 123 }
124 } 124 }
125 125
126 &:indeterminate { 126 &:indeterminate {
127 @include bem.sibling-elem('box') { 127 @include bem.sibling-elem('box') {
128 &::before { 128 &::before {
129 transform: scale(0); 129 transform: scale(0);
130 } 130 }
131 131
132 &::after { 132 &::after {
133 transform: scale(1); 133 transform: scale(1);
134 } 134 }
135 135
136 @include bem.elem('check-icon') { 136 @include bem.elem('check-icon') {
137 transform: scale(0); 137 transform: scale(0);
138 } 138 }
139 } 139 }
140 } 140 }
141 141
142 &:disabled { 142 &:disabled {
143 @include bem.sibling-elem('label') { 143 @include bem.sibling-elem('label') {
144 color: props.get(vars.$disabled--label-color); 144 color: props.get(vars.$disabled--label-color);
145 } 145 }
146 146
147 @include bem.sibling-elem('box') { 147 @include bem.sibling-elem('box') {
148 background-color: props.get(vars.$disabled--box-border-color); 148 background-color: props.get(vars.$disabled--box-border-color);
149 149
150 &::before { 150 &::before {
151 background-color: props.get(vars.$disabled--box-bg-color); 151 background-color: props.get(vars.$disabled--box-bg-color);
152 } 152 }
153 } 153 }
154 } 154 }
155 155
156 &:focus-visible { 156 &:focus-visible {
157 @include bem.sibling-elem('label') { 157 @include bem.sibling-elem('label') {
158 color: props.get(vars.$key-focus--label-color); 158 color: props.get(vars.$key-focus--label-color);
@@ -169,20 +169,20 @@
169 } 169 }
170 } 170 }
171 } 171 }
172 172
173 @include bem.modifier('standalone') { 173 @include bem.modifier('standalone') {
174 @include bem.elem('box') { 174 @include bem.elem('box') {
175 margin-block-start: 0; 175 margin-block-start: 0;
176 } 176 }
177 } 177 }
178 178
179 @include bem.modifier('accent') { 179 @include bem.modifier('accent') {
180 @include bem.elem('native') { 180 @include bem.elem('native') {
181 &:checked { 181 &:checked {
182 @include bem.sibling-elem('box') { 182 @include bem.sibling-elem('box') {
183 background-color: props.get(vars.$accent--box-border-color); 183 background-color: props.get(vars.$accent--box-border-color);
184 } 184 }
185 185
186 &:hover, 186 &:hover,
187 &:focus-visible { 187 &:focus-visible {
188 @include bem.sibling-elem('box') { 188 @include bem.sibling-elem('box') {
@@ -190,12 +190,12 @@
190 } 190 }
191 } 191 }
192 } 192 }
193 193
194 &:indeterminate { 194 &:indeterminate {
195 @include bem.sibling-elem('box') { 195 @include bem.sibling-elem('box') {
196 background-color: props.get(vars.$accent--box-border-color); 196 background-color: props.get(vars.$accent--box-border-color);
197 } 197 }
198 198
199 &:hover, 199 &:hover,
200 &:focus-visible { 200 &:focus-visible {
201 @include bem.sibling-elem('box') { 201 @include bem.sibling-elem('box') {
@@ -203,11 +203,11 @@
203 } 203 }
204 } 204 }
205 } 205 }
206 206
207 &:disabled { 207 &:disabled {
208 @include bem.sibling-elem('box') { 208 @include bem.sibling-elem('box') {
209 background-color: props.get(vars.$disabled--box-border-color); 209 background-color: props.get(vars.$disabled--box-border-color);
210 210
211 &::before { 211 &::before {
212 background-color: props.get(vars.$disabled--box-bg-color); 212 background-color: props.get(vars.$disabled--box-bg-color);
213 } 213 }
@@ -218,7 +218,7 @@
218 background-color: props.get(vars.$disabled--box-border-color); 218 background-color: props.get(vars.$disabled--box-border-color);
219 } 219 }
220 } 220 }
221 221
222 &:indeterminate { 222 &:indeterminate {
223 @include bem.sibling-elem('box') { 223 @include bem.sibling-elem('box') {
224 background-color: props.get(vars.$disabled--box-border-color); 224 background-color: props.get(vars.$disabled--box-border-color);
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
index 25a0d3d..278aac8 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; 5$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index e3c786d..d2ee8c3 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'dialog.vars'; 6@forward 'dialog.vars';
diff --git a/src/objects/_dialog.vars.scss b/src/objects/_dialog.vars.scss
index 490dc40..39c47ba 100644
--- a/src/objects/_dialog.vars.scss
+++ b/src/objects/_dialog.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4@use '../layouts/container.vars' as container; 4@use '../layouts/container.vars' as container;
5 5
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 51175a7..d81284b 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,8 +1,8 @@
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/bem'; 4@use 'pkg:iro-sass/src/bem';
5@use 'iro-sass/src/props'; 5@use 'pkg:iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7@use '../core.vars' as core; 7@use '../core.vars' as core;
8 8
@@ -171,29 +171,29 @@
171 &::after { 171 &::after {
172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg); 172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
173 } 173 }
174 174
175 @include bem.elem('label') { 175 @include bem.elem('label') {
176 color: props.get(vars.$static-themes, $theme, --medium, --label); 176 color: props.get(vars.$static-themes, $theme, --medium, --label);
177 } 177 }
178 } 178 }
179 179
180 @include bem.modifier('quiet') { 180 @include bem.modifier('quiet') {
181 &::before, 181 &::before,
182 &::after { 182 &::after {
183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); 183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184 } 184 }
185 185
186 @include bem.elem('label') { 186 @include bem.elem('label') {
187 color: props.get(vars.$static-themes, $theme, --quiet, --label); 187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
188 } 188 }
189 } 189 }
190 190
191 @include bem.modifier('faint') { 191 @include bem.modifier('faint') {
192 &::before, 192 &::before,
193 &::after { 193 &::after {
194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg); 194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
195 } 195 }
196 196
197 @include bem.elem('label') { 197 @include bem.elem('label') {
198 color: props.get(vars.$static-themes, $theme, --faint, --label); 198 color: props.get(vars.$static-themes, $theme, --faint, --label);
199 } 199 }
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 7081f47..a8b0f9f 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string'; 2@use 'sass:string';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; 6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index fd36535..655e662 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'icon.vars' as icon; 5@use 'icon.vars' as icon;
6 6
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index b7a8a43..cf940cf 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; 5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index aa12eb5..23875f5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'field-label.vars'; 6@forward 'field-label.vars';
@@ -18,55 +18,55 @@
18 font-weight: 400; 18 font-weight: 400;
19 line-height: 1.3; 19 line-height: 1.3;
20 color: props.get(vars.$label-color); 20 color: props.get(vars.$label-color);
21 21
22 @include bem.next-elem('content') { 22 @include bem.next-elem('content') {
23 margin-block-start: props.get(vars.$spacing-b); 23 margin-block-start: props.get(vars.$spacing-b);
24 } 24 }
25 } 25 }
26 26
27 @include bem.elem('content') { 27 @include bem.elem('content') {
28 display: block; 28 display: block;
29 flex: 1 1 auto; 29 flex: 1 1 auto;
30 } 30 }
31 31
32 @include bem.elem('hint') { 32 @include bem.elem('hint') {
33 display: block; 33 display: block;
34 margin-block-start: props.get(vars.$spacing-b); 34 margin-block-start: props.get(vars.$spacing-b);
35 font-size: props.get(vars.$hint-font-size); 35 font-size: props.get(vars.$hint-font-size);
36 color: props.get(vars.$hint-color); 36 color: props.get(vars.$hint-color);
37 } 37 }
38 38
39 @include bem.is('invalid') { 39 @include bem.is('invalid') {
40 @include bem.elem('hint') { 40 @include bem.elem('hint') {
41 color: props.get(vars.$error-hint-color); 41 color: props.get(vars.$error-hint-color);
42 } 42 }
43 } 43 }
44 44
45 @include bem.is('disabled') { 45 @include bem.is('disabled') {
46 @include bem.elem('label', 'hint') { 46 @include bem.elem('label', 'hint') {
47 color: props.get(vars.$disabled-color); 47 color: props.get(vars.$disabled-color);
48 } 48 }
49 } 49 }
50 50
51 @include bem.modifier('align-start', 'align-end') { 51 @include bem.modifier('align-start', 'align-end') {
52 display: flex; 52 display: flex;
53 align-items: baseline; 53 align-items: baseline;
54 54
55 @include bem.elem('label') { 55 @include bem.elem('label') {
56 display: inline-block; 56 display: inline-block;
57 57
58 @include bem.next-elem('content') { 58 @include bem.next-elem('content') {
59 margin-block-start: 0; 59 margin-block-start: 0;
60 } 60 }
61 } 61 }
62 } 62 }
63 63
64 @include bem.modifier('align-start') { 64 @include bem.modifier('align-start') {
65 @include bem.elem('label') { 65 @include bem.elem('label') {
66 text-align: start; 66 text-align: start;
67 } 67 }
68 } 68 }
69 69
70 @include bem.modifier('align-end') { 70 @include bem.modifier('align-end') {
71 @include bem.elem('label') { 71 @include bem.elem('label') {
72 text-align: end; 72 text-align: end;
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
index 844a10b..5bd4547 100644
--- a/src/objects/_field-label.vars.scss
+++ b/src/objects/_field-label.vars.scss
@@ -1,4 +1,4 @@
1@use 'iro-sass/src/props'; 1@use 'pkg:iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; 4$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default;
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
index 27e0f6a..04b9bdf 100644
--- a/src/objects/_figure.scss
+++ b/src/objects/_figure.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'figure.vars'; 6@forward 'figure.vars';
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
index 78f5d15..3de3406 100644
--- a/src/objects/_figure.vars.scss
+++ b/src/objects/_figure.vars.scss
@@ -1,4 +1,4 @@
1@use 'iro-sass/src/props'; 1@use 'pkg:iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; 4$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index eed30e8..0e8392e 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,8 +1,8 @@
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/bem'; 4@use 'pkg:iro-sass/src/bem';
5@use 'iro-sass/src/props'; 5@use 'pkg:iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
8@forward 'heading.vars'; 8@forward 'heading.vars';
@@ -66,7 +66,7 @@
66 @each $theme in map.keys(props.get(vars.$static-themes)) { 66 @each $theme in map.keys(props.get(vars.$static-themes)) {
67 @include bem.modifier(string.slice($theme, 3)) { 67 @include bem.modifier(string.slice($theme, 3)) {
68 color: props.get(vars.$static-themes, $theme, --text-color); 68 color: props.get(vars.$static-themes, $theme, --text-color);
69 69
70 @each $mod, $value in vars.$sizes { 70 @each $mod, $value in vars.$sizes {
71 @include bem.modifier($mod) { 71 @include bem.modifier($mod) {
72 color: props.get(vars.$static-themes, $theme, --#{$mod}, --text-color); 72 color: props.get(vars.$static-themes, $theme, --#{$mod}, --text-color);
@@ -81,7 +81,7 @@
81 transparent props.get(vars.$bg-end)); 81 transparent props.get(vars.$bg-end));
82 } 82 }
83 83
84 @include bem.modifier('display') { 84 @include bem.modifier('display') {
85 @each $mod, $value in vars.$sizes { 85 @each $mod, $value in vars.$sizes {
86 @include bem.modifier($mod) { 86 @include bem.modifier($mod) {
87 color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color); 87 color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color);
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 03ed7dd..4267b8c 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string'; 2@use 'sass:string';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$offset: props.def(--o-heading--offset, -.02em) !default; 6$offset: props.def(--o-heading--offset, -.02em) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 1941960..1d046e0 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'icon.vars'; 6@forward 'icon.vars';
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
index ff1541d..2a37212 100644
--- a/src/objects/_icon.vars.scss
+++ b/src/objects/_icon.vars.scss
@@ -1,4 +1,4 @@
1@use 'iro-sass/src/props'; 1@use 'pkg:iro-sass/src/props';
2 2
3$stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default; 3$stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
4$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; 4$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 32fe6b4..a173d57 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,8 +1,8 @@
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/bem'; 4@use 'pkg:iro-sass/src/bem';
5@use 'iro-sass/src/props'; 5@use 'pkg:iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
8@forward 'lightbox.vars'; 8@forward 'lightbox.vars';
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index a74f514..6fb84f7 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string'; 2@use 'sass:string';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; 6$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index f370067..dce14a8 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'icon.vars' as icon; 5@use 'icon.vars' as icon;
6 6
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss
index d242a1f..9396117 100644
--- a/src/objects/_menu.vars.scss
+++ b/src/objects/_menu.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$spacing: props.def(--o-menu--spacing, 0em) !default; 5$spacing: props.def(--o-menu--spacing, 0em) !default;
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index ae18614..cc1eaaa 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -2,8 +2,8 @@
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/bem'; 5@use 'pkg:iro-sass/src/bem';
6@use 'iro-sass/src/props'; 6@use 'pkg:iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8 8
9@forward 'navbar.vars'; 9@forward 'navbar.vars';
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 934e9b9..e96b714 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string'; 2@use 'sass:string';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default; 6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default;
@@ -82,7 +82,7 @@ $default-theme: map.deep-merge((
82 --bg-color: props.get(core.$theme, --border), 82 --bg-color: props.get(core.$theme, --border),
83 --text-color: props.get(core.$theme, --heading), 83 --text-color: props.get(core.$theme, --heading),
84 ), 84 ),
85 85
86 --active: ( 86 --active: (
87 --bg-color: props.get(core.$theme, --border-strong), 87 --bg-color: props.get(core.$theme, --border-strong),
88 --text-color: props.get(core.$theme, --heading), 88 --text-color: props.get(core.$theme, --heading),
@@ -161,7 +161,7 @@ $default-theme: props.def(--o-navbar, $default-theme, 'color');
161 --bg-color: props.get(core.$transparent-colors, $theme, --400), 161 --bg-color: props.get(core.$transparent-colors, $theme, --400),
162 --text-color: props.get(core.$transparent-colors, $theme, --900), 162 --text-color: props.get(core.$transparent-colors, $theme, --900),
163 ), 163 ),
164 164
165 --active: ( 165 --active: (
166 --bg-color: props.get(core.$transparent-colors, $theme, --500), 166 --bg-color: props.get(core.$transparent-colors, $theme, --500),
167 --text-color: props.get(core.$transparent-colors, $theme, --900), 167 --text-color: props.get(core.$transparent-colors, $theme, --900),
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 79c0f6c..f503812 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,9 +1,9 @@
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/bem'; 4@use 'pkg:iro-sass/src/bem';
5@use '../config'; 5@use '../config';
6@use 'iro-sass/src/props'; 6@use 'pkg:iro-sass/src/props';
7@use '../core.vars' as core; 7@use '../core.vars' as core;
8 8
9@mixin styles { 9@mixin styles {
@@ -33,7 +33,7 @@
33 @include bem.elem('item') { 33 @include bem.elem('item') {
34 @for $i from 1 through list.length($levels) { 34 @for $i from 1 through list.length($levels) {
35 $key: list.nth(map.keys($levels), $i); 35 $key: list.nth(map.keys($levels), $i);
36 36
37 &:nth-child(#{$i}) { 37 &:nth-child(#{$i}) {
38 background-color: props.get(core.$theme, $palette-name, $key); 38 background-color: props.get(core.$theme, $palette-name, $key);
39 } 39 }
@@ -50,7 +50,7 @@
50 @include bem.elem('item') { 50 @include bem.elem('item') {
51 @for $i from 1 through list.length($levels) { 51 @for $i from 1 through list.length($levels) {
52 $key: list.nth(map.keys($levels), $i); 52 $key: list.nth(map.keys($levels), $i);
53 53
54 &:nth-child(#{$i}) { 54 &:nth-child(#{$i}) {
55 background-color: props.get(core.$theme, #{$palette-name}-static, $key); 55 background-color: props.get(core.$theme, #{$palette-name}-static, $key);
56 } 56 }
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
index 80fc913..683f57e 100644
--- a/src/objects/_placeholders.scss
+++ b/src/objects/_placeholders.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'placeholders.vars'; 6@forward 'placeholders.vars';
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
index a2e41e2..1ac4ef7 100644
--- a/src/objects/_placeholders.vars.scss
+++ b/src/objects/_placeholders.vars.scss
@@ -1,4 +1,4 @@
1@use 'iro-sass/src/props'; 1@use 'pkg:iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default; 4$min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 2746477..1cb5660 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'popover.vars'; 6@forward 'popover.vars';
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
index e560d1b..202d71a 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$z-index: props.def(--o-popover--z-index, 11000) !default; 5$z-index: props.def(--o-popover--z-index, 11000) !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 8327a15..ae4a85a 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use '../core.vars' as core; 5@use '../core.vars' as core;
6 6
@@ -18,7 +18,7 @@
18 margin-inline: 18 margin-inline:
19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
21 21
22 @include bem.elem('circle') { 22 @include bem.elem('circle') {
23 display: inline-block; 23 display: inline-block;
24 flex: 0 0 auto; 24 flex: 0 0 auto;
@@ -30,7 +30,7 @@
30 background-clip: padding-box; 30 background-clip: padding-box;
31 border: props.get(vars.$key-focus--border-offset) solid transparent; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
32 border-radius: 2em; 32 border-radius: 2em;
33 33
34 &::after { 34 &::after {
35 position: relative; 35 position: relative;
36 inset-block-start: props.get(vars.$border-width); 36 inset-block-start: props.get(vars.$border-width);
@@ -44,11 +44,11 @@
44 transition: transform .2s ease; 44 transition: transform .2s ease;
45 } 45 }
46 } 46 }
47 47
48 @include bem.elem('label') { 48 @include bem.elem('label') {
49 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); 49 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
50 } 50 }
51 51
52 @include bem.elem('native') { 52 @include bem.elem('native') {
53 position: absolute; 53 position: absolute;
54 inset-block-start: 0; 54 inset-block-start: 0;
@@ -61,18 +61,18 @@
61 overflow: hidden; 61 overflow: hidden;
62 appearance: none; 62 appearance: none;
63 border-radius: props.get(vars.$rounding); 63 border-radius: props.get(vars.$rounding);
64 64
65 &:hover, 65 &:hover,
66 &:focus-visible { 66 &:focus-visible {
67 @include bem.sibling-elem('label') { 67 @include bem.sibling-elem('label') {
68 color: props.get(vars.$hover--label-color); 68 color: props.get(vars.$hover--label-color);
69 } 69 }
70 70
71 @include bem.sibling-elem('circle') { 71 @include bem.sibling-elem('circle') {
72 background-color: props.get(vars.$hover--circle-border-color); 72 background-color: props.get(vars.$hover--circle-border-color);
73 } 73 }
74 } 74 }
75 75
76 &:checked { 76 &:checked {
77 @include bem.sibling-elem('circle') { 77 @include bem.sibling-elem('circle') {
78 &::after { 78 &::after {
@@ -80,15 +80,15 @@
80 } 80 }
81 } 81 }
82 } 82 }
83 83
84 &:disabled { 84 &:disabled {
85 @include bem.sibling-elem('label') { 85 @include bem.sibling-elem('label') {
86 color: props.get(vars.$disabled--label-color); 86 color: props.get(vars.$disabled--label-color);
87 } 87 }
88 88
89 @include bem.sibling-elem('circle') { 89 @include bem.sibling-elem('circle') {
90 background-color: props.get(vars.$disabled--circle-border-color); 90 background-color: props.get(vars.$disabled--circle-border-color);
91 91
92 &::after { 92 &::after {
93 background-color: props.get(vars.$disabled--circle-bg-color); 93 background-color: props.get(vars.$disabled--circle-bg-color);
94 } 94 }
@@ -111,20 +111,20 @@
111 } 111 }
112 } 112 }
113 } 113 }
114 114
115 @include bem.modifier('standalone') { 115 @include bem.modifier('standalone') {
116 @include bem.elem('circle') { 116 @include bem.elem('circle') {
117 margin-block-start: 0; 117 margin-block-start: 0;
118 } 118 }
119 } 119 }
120 120
121 @include bem.modifier('accent') { 121 @include bem.modifier('accent') {
122 @include bem.elem('native') { 122 @include bem.elem('native') {
123 &:checked { 123 &:checked {
124 @include bem.sibling-elem('circle') { 124 @include bem.sibling-elem('circle') {
125 background-color: props.get(vars.$accent--circle-border-color); 125 background-color: props.get(vars.$accent--circle-border-color);
126 } 126 }
127 127
128 &:hover, 128 &:hover,
129 &:focus-visible { 129 &:focus-visible {
130 @include bem.sibling-elem('circle') { 130 @include bem.sibling-elem('circle') {
@@ -132,16 +132,16 @@
132 } 132 }
133 } 133 }
134 } 134 }
135 135
136 &:disabled { 136 &:disabled {
137 @include bem.sibling-elem('circle') { 137 @include bem.sibling-elem('circle') {
138 background-color: props.get(vars.$disabled--circle-border-color); 138 background-color: props.get(vars.$disabled--circle-border-color);
139 139
140 &::after { 140 &::after {
141 background-color: props.get(vars.$disabled--circle-bg-color); 141 background-color: props.get(vars.$disabled--circle-bg-color);
142 } 142 }
143 } 143 }
144 144
145 &:checked { 145 &:checked {
146 @include bem.sibling-elem('circle') { 146 @include bem.sibling-elem('circle') {
147 background-color: props.get(vars.$disabled--circle-border-color); 147 background-color: props.get(vars.$disabled--circle-border-color);
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
index b18ae2b..a5f249d 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; 5$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 75d2a16..272d38c 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use 'icon.vars' as icon; 5@use 'icon.vars' as icon;
6 6
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 7a2cfae..d6a7de1 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; 5$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 4e4aa42..fe8fe26 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,8 +1,8 @@
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/bem'; 4@use 'pkg:iro-sass/src/bem';
5@use 'iro-sass/src/props'; 5@use 'pkg:iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
8@forward 'status-indicator.vars'; 8@forward 'status-indicator.vars';
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 55b446a..dfe628f 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../config'; 3@use '../config';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 48cec24..0ef95e6 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5@use '../core.vars' as core; 5@use '../core.vars' as core;
6 6
@@ -18,7 +18,7 @@
18 margin-inline: 18 margin-inline:
19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
21 21
22 @include bem.elem('indicator') { 22 @include bem.elem('indicator') {
23 display: inline-block; 23 display: inline-block;
24 flex: 0 0 auto; 24 flex: 0 0 auto;
@@ -31,7 +31,7 @@
31 border: props.get(vars.$key-focus--border-offset) solid transparent; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
32 border-radius: 2em; 32 border-radius: 2em;
33 transition: background-color .2s ease; 33 transition: background-color .2s ease;
34 34
35 &::after { 35 &::after {
36 display: block; 36 display: block;
37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); 37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
@@ -43,11 +43,11 @@
43 transition: transform .2s ease; 43 transition: transform .2s ease;
44 } 44 }
45 } 45 }
46 46
47 @include bem.elem('label') { 47 @include bem.elem('label') {
48 margin-inline-start: props.get(vars.$label-gap); 48 margin-inline-start: props.get(vars.$label-gap);
49 } 49 }
50 50
51 @include bem.elem('native') { 51 @include bem.elem('native') {
52 position: absolute; 52 position: absolute;
53 inset-block-start: 0; 53 inset-block-start: 0;
@@ -60,30 +60,30 @@
60 overflow: hidden; 60 overflow: hidden;
61 appearance: none; 61 appearance: none;
62 border-radius: props.get(vars.$rounding); 62 border-radius: props.get(vars.$rounding);
63 63
64 &:hover, 64 &:hover,
65 &:focus-visible { 65 &:focus-visible {
66 @include bem.sibling-elem('label') { 66 @include bem.sibling-elem('label') {
67 color: props.get(vars.$hover--label-color); 67 color: props.get(vars.$hover--label-color);
68 } 68 }
69 69
70 @include bem.sibling-elem('indicator') { 70 @include bem.sibling-elem('indicator') {
71 &::after { 71 &::after {
72 border-color: props.get(vars.$hover--handle-border-color); 72 border-color: props.get(vars.$hover--handle-border-color);
73 } 73 }
74 } 74 }
75 } 75 }
76 76
77 &:checked { 77 &:checked {
78 @include bem.sibling-elem('indicator') { 78 @include bem.sibling-elem('indicator') {
79 background-color: props.get(vars.$handle-border-color); 79 background-color: props.get(vars.$handle-border-color);
80 80
81 &::after { 81 &::after {
82 border-color: props.get(vars.$handle-border-color); 82 border-color: props.get(vars.$handle-border-color);
83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); 83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
84 } 84 }
85 } 85 }
86 86
87 &:hover, 87 &:hover,
88 &:focus-visible { 88 &:focus-visible {
89 @include bem.sibling-elem('indicator') { 89 @include bem.sibling-elem('indicator') {
@@ -95,32 +95,32 @@
95 } 95 }
96 } 96 }
97 } 97 }
98 98
99 &:disabled { 99 &:disabled {
100 @include bem.sibling-elem('label') { 100 @include bem.sibling-elem('label') {
101 color: props.get(vars.$disabled--label-color); 101 color: props.get(vars.$disabled--label-color);
102 } 102 }
103 103
104 @include bem.sibling-elem('indicator') { 104 @include bem.sibling-elem('indicator') {
105 background-color: props.get(vars.$disabled--track-bg-color); 105 background-color: props.get(vars.$disabled--track-bg-color);
106 106
107 &::after { 107 &::after {
108 background-color: props.get(vars.$disabled--handle-bg-color); 108 background-color: props.get(vars.$disabled--handle-bg-color);
109 border-color: props.get(vars.$disabled--handle-border-color); 109 border-color: props.get(vars.$disabled--handle-border-color);
110 } 110 }
111 } 111 }
112 112
113 &:checked { 113 &:checked {
114 @include bem.sibling-elem('indicator') { 114 @include bem.sibling-elem('indicator') {
115 background-color: props.get(vars.$disabled--handle-border-color); 115 background-color: props.get(vars.$disabled--handle-border-color);
116 116
117 &::after { 117 &::after {
118 border-color: props.get(vars.$disabled--handle-border-color); 118 border-color: props.get(vars.$disabled--handle-border-color);
119 } 119 }
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 &:focus-visible { 124 &:focus-visible {
125 @include bem.sibling-elem('label') { 125 @include bem.sibling-elem('label') {
126 color: props.get(vars.$key-focus--label-color); 126 color: props.get(vars.$key-focus--label-color);
@@ -129,7 +129,7 @@
129 @include bem.sibling-elem('indicator') { 129 @include bem.sibling-elem('indicator') {
130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
131 box-shadow: 131 box-shadow:
132 0 132 0
133 0 133 0
134 0 134 0
135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
@@ -137,36 +137,36 @@
137 } 137 }
138 } 138 }
139 } 139 }
140 140
141 @include bem.modifier('standalone') { 141 @include bem.modifier('standalone') {
142 @include bem.elem('indicator') { 142 @include bem.elem('indicator') {
143 margin-block-start: 0; 143 margin-block-start: 0;
144 } 144 }
145 } 145 }
146 146
147 @include bem.modifier('accent') { 147 @include bem.modifier('accent') {
148 @include bem.elem('native') { 148 @include bem.elem('native') {
149 &:checked { 149 &:checked {
150 @include bem.sibling-elem('indicator') { 150 @include bem.sibling-elem('indicator') {
151 background-color: props.get(vars.$accent--handle-border-color); 151 background-color: props.get(vars.$accent--handle-border-color);
152 152
153 &::after { 153 &::after {
154 border-color: props.get(vars.$accent--handle-border-color); 154 border-color: props.get(vars.$accent--handle-border-color);
155 } 155 }
156 } 156 }
157 157
158 &:hover, 158 &:hover,
159 &:focus-visible { 159 &:focus-visible {
160 @include bem.sibling-elem('indicator') { 160 @include bem.sibling-elem('indicator') {
161 background-color: props.get(vars.$accent--hover--handle-border-color); 161 background-color: props.get(vars.$accent--hover--handle-border-color);
162 162
163 &::after { 163 &::after {
164 border-color: props.get(vars.$accent--hover--handle-border-color); 164 border-color: props.get(vars.$accent--hover--handle-border-color);
165 } 165 }
166 } 166 }
167 } 167 }
168 } 168 }
169 169
170 &:disabled { 170 &:disabled {
171 @include bem.sibling-elem('label') { 171 @include bem.sibling-elem('label') {
172 color: props.get(vars.$disabled--label-color); 172 color: props.get(vars.$disabled--label-color);
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
index 10489a5..761cacd 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; 5$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
@@ -34,4 +34,3 @@ $disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color,
34$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 34$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
35$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 35$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
36$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 36$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
37
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 80aeb53..d43208f 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -1,8 +1,8 @@
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/bem'; 4@use 'pkg:iro-sass/src/bem';
5@use 'iro-sass/src/props'; 5@use 'pkg:iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
8@forward 'tabbar.vars'; 8@forward 'tabbar.vars';
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
index 3cf01fd..d9cc53e 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string'; 2@use 'sass:string';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; 6$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
@@ -9,7 +9,7 @@ $spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default
9$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; 9$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
10 10
11$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default; 11$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default;
12$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 12$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default;
13 13
14$key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 14$key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
15$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 15$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 9e4891d..effa61f 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'table.vars'; 6@forward 'table.vars';
@@ -65,35 +65,35 @@
65 @include bem.modifier('box') { 65 @include bem.modifier('box') {
66 @include bem.elem('cell') { 66 @include bem.elem('cell') {
67 background-color: props.get(vars.$box--bg-color); 67 background-color: props.get(vars.$box--bg-color);
68 68
69 &:first-child { 69 &:first-child {
70 border-inline-start-width: props.get(vars.$border-width); 70 border-inline-start-width: props.get(vars.$border-width);
71 } 71 }
72 72
73 &:last-child { 73 &:last-child {
74 border-inline-end-width: props.get(vars.$border-width); 74 border-inline-end-width: props.get(vars.$border-width);
75 } 75 }
76 } 76 }
77 77
78 @include bem.elem('row') { 78 @include bem.elem('row') {
79 &:first-child { 79 &:first-child {
80 @include bem.elem('cell') { 80 @include bem.elem('cell') {
81 &:first-child { 81 &:first-child {
82 border-start-start-radius: props.get(vars.$rounding); 82 border-start-start-radius: props.get(vars.$rounding);
83 } 83 }
84 84
85 &:last-child { 85 &:last-child {
86 border-start-end-radius: props.get(vars.$rounding); 86 border-start-end-radius: props.get(vars.$rounding);
87 } 87 }
88 } 88 }
89 } 89 }
90 90
91 &:last-child { 91 &:last-child {
92 @include bem.elem('cell') { 92 @include bem.elem('cell') {
93 &:first-child { 93 &:first-child {
94 border-end-start-radius: props.get(vars.$rounding); 94 border-end-start-radius: props.get(vars.$rounding);
95 } 95 }
96 96
97 &:last-child { 97 &:last-child {
98 border-end-end-radius: props.get(vars.$rounding); 98 border-end-end-radius: props.get(vars.$rounding);
99 } 99 }
@@ -113,7 +113,7 @@
113 background-color: props.get(vars.$hover--bg-color); 113 background-color: props.get(vars.$hover--bg-color);
114 } 114 }
115 } 115 }
116 116
117 &:active { 117 &:active {
118 @include bem.elem('cell') { 118 @include bem.elem('cell') {
119 background-color: props.get(vars.$active--bg-color); 119 background-color: props.get(vars.$active--bg-color);
@@ -128,7 +128,7 @@
128 background-color: props.get(vars.$box--hover--bg-color); 128 background-color: props.get(vars.$box--hover--bg-color);
129 } 129 }
130 } 130 }
131 131
132 &:active { 132 &:active {
133 @include bem.elem('cell') { 133 @include bem.elem('cell') {
134 background-color: props.get(vars.$box--active--bg-color); 134 background-color: props.get(vars.$box--active--bg-color);
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
index b8d8093..7c5683c 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; 5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b89e148..5a48df3 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/bem'; 2@use 'pkg:iro-sass/src/bem';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
6@forward 'text-field.vars'; 6@forward 'text-field.vars';
@@ -8,7 +8,7 @@
8 8
9@mixin -invalid { 9@mixin -invalid {
10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
11 11
12 @include bem.sibling-elem('bg') { 12 @include bem.sibling-elem('bg') {
13 inset-block: $focus-border-offset; 13 inset-block: $focus-border-offset;
14 inset-inline: $focus-border-offset; 14 inset-inline: $focus-border-offset;
@@ -42,7 +42,7 @@
42 42
43 @include bem.object('text-field') { 43 @include bem.object('text-field') {
44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
45 45
46 position: relative; 46 position: relative;
47 min-inline-size: 0; 47 min-inline-size: 0;
48 background-color: props.get(vars.$bg-color); 48 background-color: props.get(vars.$bg-color);
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 51099d8..ef06822 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -1,5 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/props'; 2@use 'pkg:iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$line-height: props.def(--o-text-field--line-height, 1.4) !default; 5$line-height: props.def(--o-text-field--line-height, 1.4) !default;
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 2ccb50b..9925dd0 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -1,8 +1,8 @@
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/bem'; 4@use 'pkg:iro-sass/src/bem';
5@use 'iro-sass/src/props'; 5@use 'pkg:iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
8@forward 'thumbnail.vars'; 8@forward 'thumbnail.vars';
@@ -72,7 +72,7 @@
72 &:focus-visible { 72 &:focus-visible {
73 outline-color: props.get(vars.$static-themes, $theme, --hover, --border); 73 outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
74 } 74 }
75 75
76 @include bem.is('selected') { 76 @include bem.is('selected') {
77 border-color: props.get(vars.$static-themes, $theme, --selected, --border); 77 border-color: props.get(vars.$static-themes, $theme, --selected, --border);
78 } 78 }
@@ -80,7 +80,7 @@
80 &:focus-visible { 80 &:focus-visible {
81 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); 81 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
82 border-color: transparent; 82 border-color: transparent;
83 box-shadow: 83 box-shadow:
84 0 84 0
85 0 85 0
86 0 86 0
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index d2a38c0..a5625fc 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string'; 2@use 'sass:string';
3@use 'iro-sass/src/props'; 3@use 'pkg:iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default; 6$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
@@ -33,11 +33,11 @@ $static-themes: props.def(--o-thumbnail, (), 'color');
33 $static-themes: props.merge($static-themes, ( 33 $static-themes: props.merge($static-themes, (
34 $thumbnail-theme: ( 34 $thumbnail-theme: (
35 --border: props.get(core.$transparent-colors, $theme, --400), 35 --border: props.get(core.$transparent-colors, $theme, --400),
36 36
37 --hover: ( 37 --hover: (
38 --border: props.get(core.$transparent-colors, $theme, --500), 38 --border: props.get(core.$transparent-colors, $theme, --500),
39 ), 39 ),
40 40
41 --selected: ( 41 --selected: (
42 --border: props.get(core.$transparent-colors, $theme, --900), 42 --border: props.get(core.$transparent-colors, $theme, --900),
43 ), 43 ),
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 08:40:39 +0000