@bi-digital/css 0.0.0-experimental-822fd72 → 0.0.0-experimental-68c5574

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/alert.css +2 -2
  2. package/dist/components/card.css +39 -31
  3. package/dist/components/chip.css +16 -8
  4. package/dist/components/field.css +22 -38
  5. package/dist/components/filter-group.css +28 -12
  6. package/dist/components/input.css +62 -36
  7. package/dist/components/search.css +4 -0
  8. package/dist/components/skip-link.css +1 -1
  9. package/dist/components/tabs.css +1 -0
  10. package/dist/components.css +175 -128
  11. package/package.json +2 -2
package/dist/components/alert.css CHANGED
@@ -38,9 +38,9 @@
38
38
  }
39
39
 
40
40
  .bi-alert > .bi-button {
41
- margin-right: calc(var(--bic-alert-padding) * -1);
42
- margin-top: calc(var(--bic-alert-padding) * -1);
41
+ margin: calc(var(--bic-alert-padding) * -1);
43
42
  grid-area: 1 / 3;
43
+ margin-left: 0;
44
44
  }
45
45
 
46
46
  .bi-alert[data-size="small"] {
package/dist/components/card.css CHANGED
@@ -1,10 +1,9 @@
1
1
  .bi-card {
2
- --bic-card-border-width: 1px;
2
+ --bic-card-border-color: var(--bi-neutral-15);
3
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color) inset;
3
4
  --bic-card-border-radius: var(--bi-radius-medium);
4
- --bic-card-child-border-radius: calc(var(--bic-card-border-radius) - var(--bic-card-border-width));
5
5
  --bic-card-background-color: var(--bi-basic-white);
6
6
  --bic-card-color: var(--bi-neutral-95);
7
- --bic-card-border-color: var(--bi-neutral-15);
8
7
  --bic-card-header-title-color: var(--bi-neutral-95);
9
8
  --bic-card-header-bold-color: var(--bi-primary-60);
10
9
  --bic-card-header-label-color: var(--bi-neutral-50);
@@ -17,9 +16,10 @@
17
16
  }
18
17
 
19
18
  .bi-card[data-dark="true"] {
19
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
20
+ --bic-card-border-color: var(--bi-neutral-70);
20
21
  --bic-card-background-color: var(--bi-neutral-95);
21
22
  --bic-card-color: var(--bi-neutral-5);
22
- --bic-card-border-color: var(--bi-neutral-70);
23
23
  --bic-card-header-title-color: var(--bi-neutral-5);
24
24
  --bic-card-header-bold-color: var(--bi-primary-20);
25
25
  --bic-card-header-label-color: var(--bi-neutral-30);
@@ -29,23 +29,23 @@
29
29
  }
30
30
 
31
31
  .bi-card {
32
- border: var(--bic-card-border-width) solid var(--bic-card-border-color);
32
+ width: 100%;
33
+ box-shadow: var(--bic-card-box-shadow);
33
34
  border-radius: var(--bic-card-border-radius);
34
35
  background-color: var(--bic-card-background-color);
35
- width: 100%;
36
36
  color: var(--bic-card-color);
37
37
  flex-direction: row;
38
38
  display: flex;
39
39
  }
40
40
 
41
41
  .bi-card[data-orientation="horizontal"] > div:first-child {
42
- border-top-left-radius: var(--bic-card-child-border-radius);
43
- border-bottom-left-radius: var(--bic-card-child-border-radius);
42
+ border-top-left-radius: var(--bic-card-border-radius);
43
+ border-bottom-left-radius: var(--bic-card-border-radius);
44
44
  }
45
45
 
46
46
  .bi-card[data-orientation="horizontal"] > div:last-child {
47
- border-top-right-radius: var(--bic-card-child-border-radius);
48
- border-bottom-right-radius: var(--bic-card-child-border-radius);
47
+ border-top-right-radius: var(--bic-card-border-radius);
48
+ border-bottom-right-radius: var(--bic-card-border-radius);
49
49
  }
50
50
 
51
51
  .bi-card[data-orientation="horizontal"] {
@@ -70,13 +70,13 @@
70
70
  }
71
71
 
72
72
  .bi-card[data-orientation="vertical"] > div:first-child {
73
- border-top-left-radius: var(--bic-card-child-border-radius);
74
- border-top-right-radius: var(--bic-card-child-border-radius);
73
+ border-top-left-radius: var(--bic-card-border-radius);
74
+ border-top-right-radius: var(--bic-card-border-radius);
75
75
  }
76
76
 
77
77
  .bi-card[data-orientation="vertical"] > div:last-child {
78
- border-bottom-left-radius: var(--bic-card-child-border-radius);
79
- border-bottom-right-radius: var(--bic-card-child-border-radius);
78
+ border-bottom-left-radius: var(--bic-card-border-radius);
79
+ border-bottom-right-radius: var(--bic-card-border-radius);
80
80
  }
81
81
 
82
82
  .bi-card[data-orientation="vertical"] .bi-card--actions {
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  .bi-card[data-error="true"] {
105
- box-shadow: 0 0 0 2px var(--bi-alert-50);
105
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
106
106
  --bic-card-border-color: transparent;
107
107
  }
108
108
 
@@ -147,7 +147,7 @@
147
147
  }
148
148
 
149
149
  .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
150
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
150
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
151
151
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
152
152
  outline-offset: var(--_bi--focus, 2px);
153
153
  }
@@ -156,12 +156,14 @@
156
156
  --_bi--focus: ;
157
157
  }
158
158
 
159
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
160
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
159
+ @media (hover: hover) and (pointer: fine) {
160
+ .bi-card:-webkit-any(a, button):not(.disabled):hover {
161
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
162
+ }
161
163
  }
162
164
 
163
165
  .bi-card:-webkit-any(a, button):not(.disabled):active {
164
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
166
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
165
167
  }
166
168
 
167
169
  .bi-card:-webkit-any(a, button):disabled {
@@ -175,7 +177,7 @@
175
177
  }
176
178
 
177
179
  .bi-card:is(a, button):not(.disabled):focus-visible {
178
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
180
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
179
181
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
180
182
  outline-offset: var(--_bi--focus, 2px);
181
183
  }
@@ -184,12 +186,14 @@
184
186
  --_bi--focus: ;
185
187
  }
186
188
 
187
- .bi-card:is(a, button):not(.disabled):hover {
188
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
189
+ @media (hover: hover) and (pointer: fine) {
190
+ .bi-card:is(a, button):not(.disabled):hover {
191
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
192
+ }
189
193
  }
190
194
 
191
195
  .bi-card:is(a, button):not(.disabled):active {
192
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
196
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
193
197
  }
194
198
 
195
199
  .bi-card:is(a, button):disabled {
@@ -203,7 +207,7 @@
203
207
  }
204
208
 
205
209
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
206
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
210
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
207
211
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
208
212
  outline-offset: var(--_bi--focus, 2px);
209
213
  }
@@ -212,12 +216,14 @@
212
216
  --_bi--focus: ;
213
217
  }
214
218
 
215
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
216
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
219
+ @media (hover: hover) and (pointer: fine) {
220
+ .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
221
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
222
+ }
217
223
  }
218
224
 
219
225
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
220
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
226
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
221
227
  }
222
228
 
223
229
  .bi-card .bi-card--content:-webkit-any(a, button):disabled {
@@ -231,7 +237,7 @@
231
237
  }
232
238
 
233
239
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
234
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
240
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
235
241
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
236
242
  outline-offset: var(--_bi--focus, 2px);
237
243
  }
@@ -240,12 +246,14 @@
240
246
  --_bi--focus: ;
241
247
  }
242
248
 
243
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
244
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
249
+ @media (hover: hover) and (pointer: fine) {
250
+ .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
251
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
252
+ }
245
253
  }
246
254
 
247
255
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
248
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
256
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
249
257
  }
250
258
 
251
259
  .bi-card .bi-card--content:is(a, button):disabled {
package/dist/components/chip.css CHANGED
@@ -36,8 +36,10 @@
36
36
  box-shadow: 0 0 0 2px #fff;
37
37
  }
38
38
 
39
- .bi-chip:-webkit-any(button):hover {
40
- --bg-color: var(--bic-chip-bg-hover);
39
+ @media (hover: hover) and (pointer: fine) {
40
+ .bi-chip:-webkit-any(button):hover {
41
+ --bg-color: var(--bic-chip-bg-hover);
42
+ }
41
43
  }
42
44
 
43
45
  .bi-chip:-webkit-any(button):active {
@@ -57,8 +59,10 @@
57
59
  box-shadow: 0 0 0 2px #fff;
58
60
  }
59
61
 
60
- .bi-chip:is(button):hover {
61
- --bg-color: var(--bic-chip-bg-hover);
62
+ @media (hover: hover) and (pointer: fine) {
63
+ .bi-chip:is(button):hover {
64
+ --bg-color: var(--bic-chip-bg-hover);
65
+ }
62
66
  }
63
67
 
64
68
  .bi-chip:is(button):active {
@@ -78,8 +82,10 @@
78
82
  box-shadow: 0 0 0 2px #fff;
79
83
  }
80
84
 
81
- .bi-chip:-webkit-any(a):hover {
82
- --bg-color: var(--bic-chip-bg-hover);
85
+ @media (hover: hover) and (pointer: fine) {
86
+ .bi-chip:-webkit-any(a):hover {
87
+ --bg-color: var(--bic-chip-bg-hover);
88
+ }
83
89
  }
84
90
 
85
91
  .bi-chip:-webkit-any(a):active {
@@ -99,8 +105,10 @@
99
105
  box-shadow: 0 0 0 2px #fff;
100
106
  }
101
107
 
102
- .bi-chip:is(a):hover {
103
- --bg-color: var(--bic-chip-bg-hover);
108
+ @media (hover: hover) and (pointer: fine) {
109
+ .bi-chip:is(a):hover {
110
+ --bg-color: var(--bic-chip-bg-hover);
111
+ }
104
112
  }
105
113
 
106
114
  .bi-chip:is(a):active {
package/dist/components/field.css CHANGED
@@ -1,44 +1,32 @@
1
1
  .bi-field {
2
+ --bic-field-border-color-invalid: var(--bi-alert-50);
3
+ --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
4
+ --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
2
5
  --bic-field-content-spacing: var(--bi-scale-0-50x);
3
- --bic-field-description-color: var(--bi-neutral-60);
4
6
  --bic-field-padding-inline: var(--bi-scale-3x);
7
+ --bic-field-affix-color: var(--bi-neutral-60);
5
8
  --bic-field-background: var(--bi-basic-white);
6
9
  --bic-field-background-hover: var(--bi-states-hover-dark);
7
10
  --bic-field-background-readonly: var(--bi-neutral-10);
8
11
  --bic-field-border-color: var(--bi-neutral-50);
12
+ --bic-field-border-color-hover: var(--bi-neutral-50);
9
13
  --bic-field-border-color-readonly: var(--bi-neutral-50);
10
- --bic-field-border-color-invalid: var(--bi-alert-50);
11
- --bic-field-border-style: solid;
12
- --bic-field-border-width: var(--bi-stroke-thin);
13
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
14
- --bic-field-color: var(--bi-neutral-95);
15
14
  --bic-field-disabled-color: var(--bi-neutral-50);
15
+ --bic-field-description-color: var(--bi-neutral-60);
16
16
  --bic-field-label-color: var(--bi-neutral-95);
17
17
  --bic-field-label-required-color: var(--bi-primary-50);
18
- --bic-field-input-color-readonly: var(--bi-neutral-95);
19
- --bic-field-input-color: var(--bi-neutral-95);
20
- --bic-field-toggle-color: var(--bi-basic-white);
21
- --bic-field-toggle-background: var(--bi-primary-50);
22
18
  }
23
19
 
24
20
  .bi-field[data-dark="true"] {
25
- --bic-field-description-color: var(--bi-neutral-15);
21
+ --bic-field-affix-color: var(--bi-neutral-30);
26
22
  --bic-field-background: var(--bi-neutral-95);
27
23
  --bic-field-background-hover: var(--bi-states-hover-light);
28
24
  --bic-field-background-readonly: var(--bi-neutral-50);
29
- --bic-field-border-color: var(--bi-neutral-10);
30
- --bic-field-border-color-hover: var(--bi-neutral-50);
31
- --bic-field-border-color-readonly: var(--bi-neutral-50);
32
- --bic-field-border-color-invalid: var(--bi-alert-50);
33
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
34
- --bic-field-color: var(--bi-basic-white);
25
+ --bic-field-border-color-hover: var(--bi-neutral-25);
35
26
  --bic-field-disabled-color: var(--bi-neutral-40);
27
+ --bic-field-description-color: var(--bi-neutral-15);
36
28
  --bic-field-label-color: var(--bi-basic-white);
37
29
  --bic-field-label-required-color: var(--bi-secondary-50);
38
- --bic-field-input-color-readonly: var(--bi-basic-white);
39
- --bic-field-input-color: var(--bi-basic-white);
40
- --bic-field-toggle-color: var(--bi-basic-white);
41
- --bic-field-toggle-background: var(--bi-primary-50);
42
30
  }
43
31
 
44
32
  .bi-field > * {
@@ -70,8 +58,12 @@
70
58
  cursor: not-allowed;
71
59
  --bic-field-label-color: var(--bic-field-disabled-color);
72
60
  --bic-field-description-color: var(--bic-field-disabled-color);
73
- --bic-field-color: var(--bic-field-disabled-color);
74
- --bic-field-toggle-background: var(--bic-field-disabled-color);
61
+ --bic-field-affix-color: var(--bic-field-disabled-color);
62
+ --bic-input-toggle-background: var(--bic-field-disabled-color);
63
+ }
64
+
65
+ .bi-field[data-fullwidth="true"] {
66
+ width: 100%;
75
67
  }
76
68
 
77
69
  .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
@@ -228,18 +220,14 @@
228
220
  background: var(--bic-field-background);
229
221
  border-radius: var(--bi-radius-medium);
230
222
  box-sizing: border-box;
231
- color: var(--bic-field-color);
232
223
  white-space: nowrap;
233
- border-width: var(--bic-field-border-width);
234
- border-style: var(--bic-field-border-style);
235
- border-color: var(--bic-field-border-color);
236
224
  max-width: 100%;
225
+ box-shadow: var(--bic-field-box-shadow);
237
226
  }
238
227
 
239
228
  .bi-field .bi-field--affixes .bi-input {
240
- --bic-field-background: ;
241
- --bic-field-box-shadow-hover: ;
242
- --bic-field-border-width: 0;
229
+ --bic-input-background: ;
230
+ --bic-input-box-shadow: ;
243
231
  flex: auto;
244
232
  }
245
233
 
@@ -261,22 +249,18 @@
261
249
  }
262
250
 
263
251
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
264
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
265
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
266
- outline-offset: var(--_bi--focus, 2px);
267
- --bic-field-border-color: var(--bi-primary-50);
252
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
253
+ outline-offset: 0;
254
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
268
255
  }
269
256
 
270
257
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
271
258
  --_bi--focus: ;
272
259
  }
273
260
 
274
- .bi-field .bi-field--affixes:has(.bi-input[aria-invalid="true"]) {
275
- --bic-field-border-color: var(--bic-field-border-color-invalid);
276
- }
277
-
278
261
  .bi-field .bi-field--affixes .bi-field--affix {
279
262
  padding-inline: var(--bic-field-padding-inline);
263
+ color: var(--bic-field-affix-color);
280
264
  flex-shrink: 0;
281
265
  align-items: center;
282
266
  }
package/dist/components/filter-group.css CHANGED
@@ -1,15 +1,17 @@
1
1
  .bi-filter-group {
2
- --bic-filter-group-background-color: var(--bi-basic-white);
3
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
4
- --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
2
+ --bic-filter-group-background: var(--bi-basic-white);
3
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
4
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
5
+ --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
5
6
  --bic-filter-group-border-color: var(--bi-neutral-15);
6
7
  --bic-filter-group-text-color: var(--bi-neutral-90);
7
8
  }
8
9
 
9
10
  .bi-filter-group[data-dark="true"] {
10
- --bic-filter-group-background-color: var(--bi-neutral-90);
11
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
12
- --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
11
+ --bic-filter-group-background: var(--bi-neutral-90);
12
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
13
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
14
+ --bic-filter-group-background-expanded: var(--bi-neutral-80);
13
15
  --bic-filter-group-border-color: var(--bi-neutral-70);
14
16
  --bic-filter-group-text-color: var(--bi-basic-white);
15
17
  }
@@ -25,10 +27,10 @@
25
27
  height: var(--bi-scale-12x);
26
28
  color: var(--bic-filter-group-text-color);
27
29
  align-items: center;
28
- gap: var(--bi-scale-2x);
30
+ gap: var(--bi-scale-3x);
29
31
  width: 100%;
30
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
31
- background: var(--bic-filter-group-background-color);
32
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
33
+ background: var(--bic-filter-group-background);
32
34
  cursor: pointer;
33
35
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
34
36
  -webkit-user-select: none;
@@ -37,8 +39,14 @@
37
39
  display: flex;
38
40
  }
39
41
 
40
- .bi-filter-group > button:hover {
41
- background: var(--bic-filter-group-background-color-hover);
42
+ @media (hover: hover) and (pointer: fine) {
43
+ .bi-filter-group > button:hover {
44
+ background: var(--bic-filter-group-background-hover);
45
+ }
46
+ }
47
+
48
+ .bi-filter-group > button:active {
49
+ background: var(--bic-filter-group-background-press);
42
50
  }
43
51
 
44
52
  .bi-filter-group > button:focus-visible {
@@ -75,12 +83,20 @@
75
83
  width: 100%;
76
84
  }
77
85
 
86
+ .bi-filter-group:last-of-type > button {
87
+ border-radius: var(--bi-radius-small);
88
+ border-bottom-color: #0000;
89
+ }
90
+
78
91
  .bi-filter-group:last-of-type > div {
79
92
  padding: var(--bi-scale-2x) 0;
80
93
  }
81
94
 
95
+ .bi-filter-group[data-expanded="true"] {
96
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
97
+ }
98
+
82
99
  .bi-filter-group[data-expanded="true"] > button {
83
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
84
100
  border-radius: var(--bi-radius-small);
85
101
  border-bottom-color: #0000;
86
102
  }
package/dist/components/input.css CHANGED
@@ -3,37 +3,35 @@
3
3
  }
4
4
 
5
5
  .bi-input {
6
+ --bic-input-border-color-invalid: var(--bi-alert-50);
7
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
8
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
9
+ --bic-input-caret-color: var(--bi-primary-50);
10
+ --bic-input-font-size: 1rem;
6
11
  --bic-input-padding: var(--bi-scale-3x);
7
12
  --bic-input-size: var(--bi-scale-11x);
8
- --bic-input-font-size: 1rem;
13
+ --bic-input-toggle-background: var(--bi-primary-50);
14
+ --bic-input-toggle-color: var(--bi-basic-white);
9
15
  --bic-input-toggle-size: 1.125rem;
10
- --bic-input-background: var(--bic-field-background, var(--bi-basic-white));
11
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-10));
12
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-50));
13
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
14
- --bic-input-border-style: var(--bic-field-border-style, solid);
15
- --bic-input-border-width: var(--bic-field-border-width, var(--bi-stroke-thin));
16
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
17
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-neutral-95));
18
- --bic-input-color: var(--bic-field-input-color, var(--bi-neutral-95));
19
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-50));
20
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
21
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
22
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
16
+ --bic-input-background: var(--bi-basic-white);
17
+ --bic-input-background-readonly: var(--bi-neutral-10);
18
+ --bic-input-border-color: var(--bi-neutral-50);
19
+ --bic-input-border-color-hover: var(--bi-neutral-50);
20
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
21
+ --bic-input-color-readonly: var(--bi-neutral-95);
22
+ --bic-input-color: var(--bi-neutral-95);
23
+ --bic-input-disabled-color: var(--bi-neutral-50);
24
+ --bic-input-placeholder-color: var(--bi-neutral-60);
23
25
  }
24
26
 
25
27
  .bi-input[data-dark="true"] {
26
- --bic-input-background: var(--bic-field-background, var(--bi-neutral-95));
27
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-50));
28
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-10));
29
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
30
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
31
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-basic-white));
32
- --bic-input-color: var(--bic-field-input-color, var(--bi-basic-white));
33
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-40));
34
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
35
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
36
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
28
+ --bic-input-background: var(--bi-neutral-95);
29
+ --bic-input-background-readonly: var(--bi-neutral-50);
30
+ --bic-input-border-color-hover: var(--bi-neutral-25);
31
+ --bic-input-color-readonly: var(--bi-basic-white);
32
+ --bic-input-color: var(--bi-basic-white);
33
+ --bic-input-disabled-color: var(--bi-neutral-40);
34
+ --bic-input-placeholder-color: var(--bi-neutral-30);
37
35
  }
38
36
 
39
37
  .bi-input {
@@ -41,9 +39,7 @@
41
39
  appearance: none;
42
40
  background: var(--bic-input-background);
43
41
  border-radius: var(--bi-radius-medium);
44
- border-width: var(--bic-input-border-width);
45
- border-style: var(--bic-input-border-style);
46
- border-color: var(--bic-input-border-color);
42
+ box-shadow: var(--bic-input-box-shadow);
47
43
  box-sizing: border-box;
48
44
  color: var(--bic-input-color);
49
45
  font-family: inherit;
@@ -53,6 +49,8 @@
53
49
  max-width: 100%;
54
50
  padding: var(--bic-input-padding);
55
51
  vertical-align: middle;
52
+ caret-color: var(--bic-input-caret-color);
53
+ border: none;
56
54
  line-height: 1;
57
55
  position: relative;
58
56
  }
@@ -71,15 +69,19 @@
71
69
  }
72
70
 
73
71
  .bi-input:focus-visible {
74
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
75
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
76
- outline-offset: var(--_bi--focus, 2px);
72
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
73
+ outline-offset: 0;
74
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
77
75
  }
78
76
 
79
77
  .bi-input:focus-visible * {
80
78
  --_bi--focus: ;
81
79
  }
82
80
 
81
+ .bi-input::placeholder {
82
+ color: var(--bic-input-placeholder-color);
83
+ }
84
+
83
85
  .bi-input:not([size], [cols]) {
84
86
  width: 100%;
85
87
  }
@@ -98,19 +100,19 @@
98
100
 
99
101
  .bi-input[readonly] {
100
102
  background: var(--bic-input-background-readonly);
101
- border-color: var(--bic-input-border-color-readonly);
103
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
102
104
  color: var(--bic-input-color-readonly);
103
105
  }
104
106
 
105
107
  .bi-input:disabled {
106
108
  background: var(--bic-input-background-readonly);
107
- border-color: var(--bic-input-border-color-readonly);
109
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
108
110
  color: var(--bic-input-color-readonly);
109
111
  }
110
112
 
111
113
  .bi-input[aria-disabled="true"] {
112
114
  background: var(--bic-input-background-readonly);
113
- border-color: var(--bic-input-border-color-readonly);
115
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
114
116
  color: var(--bic-input-color-readonly);
115
117
  }
116
118
 
@@ -165,16 +167,28 @@
165
167
  }
166
168
 
167
169
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
168
- border-width: var(--bi-stroke-default);
169
170
  padding: var(--bi-scale-0-50x);
170
171
  line-height: inherit;
171
172
  height: var(--bic-input-toggle-size);
172
173
  width: var(--bic-input-toggle-size);
174
+ box-shadow: none;
175
+ border-width: var(--bi-stroke-default);
176
+ border-style: solid;
173
177
  border-color: var(--bic-input-border-color);
174
178
  background: none;
175
179
  flex-shrink: 0;
176
180
  }
177
181
 
182
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
183
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
184
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
185
+ outline-offset: var(--_bi--focus, 2px);
186
+ }
187
+
188
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
189
+ --_bi--focus: ;
190
+ }
191
+
178
192
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
179
193
  cursor: pointer;
180
194
  }
@@ -246,16 +260,28 @@
246
260
  }
247
261
 
248
262
  .bi-input:is([type="checkbox"], [type="radio"]) {
249
- border-width: var(--bi-stroke-default);
250
263
  padding: var(--bi-scale-0-50x);
251
264
  line-height: inherit;
252
265
  height: var(--bic-input-toggle-size);
253
266
  width: var(--bic-input-toggle-size);
267
+ box-shadow: none;
268
+ border-width: var(--bi-stroke-default);
269
+ border-style: solid;
254
270
  border-color: var(--bic-input-border-color);
255
271
  background: none;
256
272
  flex-shrink: 0;
257
273
  }
258
274
 
275
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
276
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
277
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
278
+ outline-offset: var(--_bi--focus, 2px);
279
+ }
280
+
281
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
282
+ --_bi--focus: ;
283
+ }
284
+
259
285
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
260
286
  cursor: pointer;
261
287
  }
package/dist/components/search.css CHANGED
@@ -1,3 +1,7 @@
1
+ .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2
+ color: var(--bi-primary-50);
3
+ }
4
+
1
5
  .bi-search .bi-field--affix:last-child {
2
6
  --bic-field-padding-inline: 0;
3
7
  }
package/dist/components/skip-link.css CHANGED
@@ -28,5 +28,5 @@
28
28
  border-radius: var(--bi-radius-medium);
29
29
  outline-offset: 2px;
30
30
  outline: 1.5px solid var(--bi-primary-50);
31
- box-shadow: 0 0 0 2px var(--bi-basic-white);
31
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
32
32
  }
package/dist/components/tabs.css CHANGED
@@ -14,6 +14,7 @@
14
14
  }
15
15
 
16
16
  .bi-tabs .bi-tabs--list {
17
+ scrollbar-width: none;
17
18
  flex-direction: row;
18
19
  flex-shrink: 0;
19
20
  display: flex;
package/dist/components.css CHANGED
@@ -38,9 +38,9 @@
38
38
  }
39
39
 
40
40
  .bi-alert > .bi-button {
41
- margin-right: calc(var(--bic-alert-padding) * -1);
42
- margin-top: calc(var(--bic-alert-padding) * -1);
41
+ margin: calc(var(--bic-alert-padding) * -1);
43
42
  grid-area: 1 / 3;
43
+ margin-left: 0;
44
44
  }
45
45
 
46
46
  .bi-alert[data-size="small"] {
@@ -457,12 +457,11 @@
457
457
  }
458
458
 
459
459
  .bi-card {
460
- --bic-card-border-width: 1px;
460
+ --bic-card-border-color: var(--bi-neutral-15);
461
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-card-border-color) inset;
461
462
  --bic-card-border-radius: var(--bi-radius-medium);
462
- --bic-card-child-border-radius: calc(var(--bic-card-border-radius) - var(--bic-card-border-width));
463
463
  --bic-card-background-color: var(--bi-basic-white);
464
464
  --bic-card-color: var(--bi-neutral-95);
465
- --bic-card-border-color: var(--bi-neutral-15);
466
465
  --bic-card-header-title-color: var(--bi-neutral-95);
467
466
  --bic-card-header-bold-color: var(--bi-primary-60);
468
467
  --bic-card-header-label-color: var(--bi-neutral-50);
@@ -475,9 +474,10 @@
475
474
  }
476
475
 
477
476
  .bi-card[data-dark="true"] {
477
+ --bic-card-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bi-neutral-70);
478
+ --bic-card-border-color: var(--bi-neutral-70);
478
479
  --bic-card-background-color: var(--bi-neutral-95);
479
480
  --bic-card-color: var(--bi-neutral-5);
480
- --bic-card-border-color: var(--bi-neutral-70);
481
481
  --bic-card-header-title-color: var(--bi-neutral-5);
482
482
  --bic-card-header-bold-color: var(--bi-primary-20);
483
483
  --bic-card-header-label-color: var(--bi-neutral-30);
@@ -487,23 +487,23 @@
487
487
  }
488
488
 
489
489
  .bi-card {
490
- border: var(--bic-card-border-width) solid var(--bic-card-border-color);
490
+ width: 100%;
491
+ box-shadow: var(--bic-card-box-shadow);
491
492
  border-radius: var(--bic-card-border-radius);
492
493
  background-color: var(--bic-card-background-color);
493
- width: 100%;
494
494
  color: var(--bic-card-color);
495
495
  flex-direction: row;
496
496
  display: flex;
497
497
  }
498
498
 
499
499
  .bi-card[data-orientation="horizontal"] > div:first-child {
500
- border-top-left-radius: var(--bic-card-child-border-radius);
501
- border-bottom-left-radius: var(--bic-card-child-border-radius);
500
+ border-top-left-radius: var(--bic-card-border-radius);
501
+ border-bottom-left-radius: var(--bic-card-border-radius);
502
502
  }
503
503
 
504
504
  .bi-card[data-orientation="horizontal"] > div:last-child {
505
- border-top-right-radius: var(--bic-card-child-border-radius);
506
- border-bottom-right-radius: var(--bic-card-child-border-radius);
505
+ border-top-right-radius: var(--bic-card-border-radius);
506
+ border-bottom-right-radius: var(--bic-card-border-radius);
507
507
  }
508
508
 
509
509
  .bi-card[data-orientation="horizontal"] {
@@ -528,13 +528,13 @@
528
528
  }
529
529
 
530
530
  .bi-card[data-orientation="vertical"] > div:first-child {
531
- border-top-left-radius: var(--bic-card-child-border-radius);
532
- border-top-right-radius: var(--bic-card-child-border-radius);
531
+ border-top-left-radius: var(--bic-card-border-radius);
532
+ border-top-right-radius: var(--bic-card-border-radius);
533
533
  }
534
534
 
535
535
  .bi-card[data-orientation="vertical"] > div:last-child {
536
- border-bottom-left-radius: var(--bic-card-child-border-radius);
537
- border-bottom-right-radius: var(--bic-card-child-border-radius);
536
+ border-bottom-left-radius: var(--bic-card-border-radius);
537
+ border-bottom-right-radius: var(--bic-card-border-radius);
538
538
  }
539
539
 
540
540
  .bi-card[data-orientation="vertical"] .bi-card--actions {
@@ -560,7 +560,7 @@
560
560
  }
561
561
 
562
562
  .bi-card[data-error="true"] {
563
- box-shadow: 0 0 0 2px var(--bi-alert-50);
563
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-alert-50);
564
564
  --bic-card-border-color: transparent;
565
565
  }
566
566
 
@@ -605,7 +605,7 @@
605
605
  }
606
606
 
607
607
  .bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
608
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
608
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
609
609
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
610
610
  outline-offset: var(--_bi--focus, 2px);
611
611
  }
@@ -614,12 +614,14 @@
614
614
  --_bi--focus: ;
615
615
  }
616
616
 
617
- .bi-card:-webkit-any(a, button):not(.disabled):hover {
618
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
617
+ @media (hover: hover) and (pointer: fine) {
618
+ .bi-card:-webkit-any(a, button):not(.disabled):hover {
619
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
620
+ }
619
621
  }
620
622
 
621
623
  .bi-card:-webkit-any(a, button):not(.disabled):active {
622
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
624
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
623
625
  }
624
626
 
625
627
  .bi-card:-webkit-any(a, button):disabled {
@@ -633,7 +635,7 @@
633
635
  }
634
636
 
635
637
  .bi-card:is(a, button):not(.disabled):focus-visible {
636
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
638
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
637
639
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
638
640
  outline-offset: var(--_bi--focus, 2px);
639
641
  }
@@ -642,12 +644,14 @@
642
644
  --_bi--focus: ;
643
645
  }
644
646
 
645
- .bi-card:is(a, button):not(.disabled):hover {
646
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
647
+ @media (hover: hover) and (pointer: fine) {
648
+ .bi-card:is(a, button):not(.disabled):hover {
649
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
650
+ }
647
651
  }
648
652
 
649
653
  .bi-card:is(a, button):not(.disabled):active {
650
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
654
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
651
655
  }
652
656
 
653
657
  .bi-card:is(a, button):disabled {
@@ -661,7 +665,7 @@
661
665
  }
662
666
 
663
667
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
664
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
668
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
665
669
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
666
670
  outline-offset: var(--_bi--focus, 2px);
667
671
  }
@@ -670,12 +674,14 @@
670
674
  --_bi--focus: ;
671
675
  }
672
676
 
673
- .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
674
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
677
+ @media (hover: hover) and (pointer: fine) {
678
+ .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
679
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
680
+ }
675
681
  }
676
682
 
677
683
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):active {
678
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
684
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
679
685
  }
680
686
 
681
687
  .bi-card .bi-card--content:-webkit-any(a, button):disabled {
@@ -689,7 +695,7 @@
689
695
  }
690
696
 
691
697
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
692
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
698
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
693
699
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
694
700
  outline-offset: var(--_bi--focus, 2px);
695
701
  }
@@ -698,12 +704,14 @@
698
704
  --_bi--focus: ;
699
705
  }
700
706
 
701
- .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
702
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
707
+ @media (hover: hover) and (pointer: fine) {
708
+ .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
709
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
710
+ }
703
711
  }
704
712
 
705
713
  .bi-card .bi-card--content:is(a, button):not(.disabled):active {
706
- box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
714
+ box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50) inset, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
707
715
  }
708
716
 
709
717
  .bi-card .bi-card--content:is(a, button):disabled {
@@ -917,8 +925,10 @@
917
925
  box-shadow: 0 0 0 2px #fff;
918
926
  }
919
927
 
920
- .bi-chip:-webkit-any(button):hover {
921
- --bg-color: var(--bic-chip-bg-hover);
928
+ @media (hover: hover) and (pointer: fine) {
929
+ .bi-chip:-webkit-any(button):hover {
930
+ --bg-color: var(--bic-chip-bg-hover);
931
+ }
922
932
  }
923
933
 
924
934
  .bi-chip:-webkit-any(button):active {
@@ -938,8 +948,10 @@
938
948
  box-shadow: 0 0 0 2px #fff;
939
949
  }
940
950
 
941
- .bi-chip:is(button):hover {
942
- --bg-color: var(--bic-chip-bg-hover);
951
+ @media (hover: hover) and (pointer: fine) {
952
+ .bi-chip:is(button):hover {
953
+ --bg-color: var(--bic-chip-bg-hover);
954
+ }
943
955
  }
944
956
 
945
957
  .bi-chip:is(button):active {
@@ -959,8 +971,10 @@
959
971
  box-shadow: 0 0 0 2px #fff;
960
972
  }
961
973
 
962
- .bi-chip:-webkit-any(a):hover {
963
- --bg-color: var(--bic-chip-bg-hover);
974
+ @media (hover: hover) and (pointer: fine) {
975
+ .bi-chip:-webkit-any(a):hover {
976
+ --bg-color: var(--bic-chip-bg-hover);
977
+ }
964
978
  }
965
979
 
966
980
  .bi-chip:-webkit-any(a):active {
@@ -980,8 +994,10 @@
980
994
  box-shadow: 0 0 0 2px #fff;
981
995
  }
982
996
 
983
- .bi-chip:is(a):hover {
984
- --bg-color: var(--bic-chip-bg-hover);
997
+ @media (hover: hover) and (pointer: fine) {
998
+ .bi-chip:is(a):hover {
999
+ --bg-color: var(--bic-chip-bg-hover);
1000
+ }
985
1001
  }
986
1002
 
987
1003
  .bi-chip:is(a):active {
@@ -1355,46 +1371,34 @@ body:has(.bi-dialog:modal) {
1355
1371
  }
1356
1372
 
1357
1373
  .bi-field {
1374
+ --bic-field-border-color-invalid: var(--bi-alert-50);
1375
+ --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
1376
+ --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
1358
1377
  --bic-field-content-spacing: var(--bi-scale-0-50x);
1359
- --bic-field-description-color: var(--bi-neutral-60);
1360
1378
  --bic-field-padding-inline: var(--bi-scale-3x);
1379
+ --bic-field-affix-color: var(--bi-neutral-60);
1361
1380
  --bic-field-background: var(--bi-basic-white);
1362
1381
  --bic-field-background-hover: var(--bi-states-hover-dark);
1363
1382
  --bic-field-background-readonly: var(--bi-neutral-10);
1364
1383
  --bic-field-border-color: var(--bi-neutral-50);
1384
+ --bic-field-border-color-hover: var(--bi-neutral-50);
1365
1385
  --bic-field-border-color-readonly: var(--bi-neutral-50);
1366
- --bic-field-border-color-invalid: var(--bi-alert-50);
1367
- --bic-field-border-style: solid;
1368
- --bic-field-border-width: var(--bi-stroke-thin);
1369
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
1370
- --bic-field-color: var(--bi-neutral-95);
1371
1386
  --bic-field-disabled-color: var(--bi-neutral-50);
1387
+ --bic-field-description-color: var(--bi-neutral-60);
1372
1388
  --bic-field-label-color: var(--bi-neutral-95);
1373
1389
  --bic-field-label-required-color: var(--bi-primary-50);
1374
- --bic-field-input-color-readonly: var(--bi-neutral-95);
1375
- --bic-field-input-color: var(--bi-neutral-95);
1376
- --bic-field-toggle-color: var(--bi-basic-white);
1377
- --bic-field-toggle-background: var(--bi-primary-50);
1378
1390
  }
1379
1391
 
1380
1392
  .bi-field[data-dark="true"] {
1381
- --bic-field-description-color: var(--bi-neutral-15);
1393
+ --bic-field-affix-color: var(--bi-neutral-30);
1382
1394
  --bic-field-background: var(--bi-neutral-95);
1383
1395
  --bic-field-background-hover: var(--bi-states-hover-light);
1384
1396
  --bic-field-background-readonly: var(--bi-neutral-50);
1385
- --bic-field-border-color: var(--bi-neutral-10);
1386
- --bic-field-border-color-hover: var(--bi-neutral-50);
1387
- --bic-field-border-color-readonly: var(--bi-neutral-50);
1388
- --bic-field-border-color-invalid: var(--bi-alert-50);
1389
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
1390
- --bic-field-color: var(--bi-basic-white);
1397
+ --bic-field-border-color-hover: var(--bi-neutral-25);
1391
1398
  --bic-field-disabled-color: var(--bi-neutral-40);
1399
+ --bic-field-description-color: var(--bi-neutral-15);
1392
1400
  --bic-field-label-color: var(--bi-basic-white);
1393
1401
  --bic-field-label-required-color: var(--bi-secondary-50);
1394
- --bic-field-input-color-readonly: var(--bi-basic-white);
1395
- --bic-field-input-color: var(--bi-basic-white);
1396
- --bic-field-toggle-color: var(--bi-basic-white);
1397
- --bic-field-toggle-background: var(--bi-primary-50);
1398
1402
  }
1399
1403
 
1400
1404
  .bi-field > * {
@@ -1426,8 +1430,12 @@ body:has(.bi-dialog:modal) {
1426
1430
  cursor: not-allowed;
1427
1431
  --bic-field-label-color: var(--bic-field-disabled-color);
1428
1432
  --bic-field-description-color: var(--bic-field-disabled-color);
1429
- --bic-field-color: var(--bic-field-disabled-color);
1430
- --bic-field-toggle-background: var(--bic-field-disabled-color);
1433
+ --bic-field-affix-color: var(--bic-field-disabled-color);
1434
+ --bic-input-toggle-background: var(--bic-field-disabled-color);
1435
+ }
1436
+
1437
+ .bi-field[data-fullwidth="true"] {
1438
+ width: 100%;
1431
1439
  }
1432
1440
 
1433
1441
  .bi-field:has(.bi-input:-webkit-any([type="radio"], [type="checkbox"])) {
@@ -1584,18 +1592,14 @@ body:has(.bi-dialog:modal) {
1584
1592
  background: var(--bic-field-background);
1585
1593
  border-radius: var(--bi-radius-medium);
1586
1594
  box-sizing: border-box;
1587
- color: var(--bic-field-color);
1588
1595
  white-space: nowrap;
1589
- border-width: var(--bic-field-border-width);
1590
- border-style: var(--bic-field-border-style);
1591
- border-color: var(--bic-field-border-color);
1592
1596
  max-width: 100%;
1597
+ box-shadow: var(--bic-field-box-shadow);
1593
1598
  }
1594
1599
 
1595
1600
  .bi-field .bi-field--affixes .bi-input {
1596
- --bic-field-background: ;
1597
- --bic-field-box-shadow-hover: ;
1598
- --bic-field-border-width: 0;
1601
+ --bic-input-background: ;
1602
+ --bic-input-box-shadow: ;
1599
1603
  flex: auto;
1600
1604
  }
1601
1605
 
@@ -1617,22 +1621,18 @@ body:has(.bi-dialog:modal) {
1617
1621
  }
1618
1622
 
1619
1623
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
1620
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1621
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1622
- outline-offset: var(--_bi--focus, 2px);
1623
- --bic-field-border-color: var(--bi-primary-50);
1624
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
1625
+ outline-offset: 0;
1626
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
1624
1627
  }
1625
1628
 
1626
1629
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
1627
1630
  --_bi--focus: ;
1628
1631
  }
1629
1632
 
1630
- .bi-field .bi-field--affixes:has(.bi-input[aria-invalid="true"]) {
1631
- --bic-field-border-color: var(--bic-field-border-color-invalid);
1632
- }
1633
-
1634
1633
  .bi-field .bi-field--affixes .bi-field--affix {
1635
1634
  padding-inline: var(--bic-field-padding-inline);
1635
+ color: var(--bic-field-affix-color);
1636
1636
  flex-shrink: 0;
1637
1637
  align-items: center;
1638
1638
  }
@@ -1728,17 +1728,19 @@ body:has(.bi-dialog:modal) {
1728
1728
  }
1729
1729
 
1730
1730
  .bi-filter-group {
1731
- --bic-filter-group-background-color: var(--bi-basic-white);
1732
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
1733
- --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
1731
+ --bic-filter-group-background: var(--bi-basic-white);
1732
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-dark) 0%, var(--bi-states-hover-dark) 100%), var(--bic-filter-group-background);
1733
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-dark) 0%, var(--bi-states-press-dark) 100%), var(--bic-filter-group-background);
1734
+ --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
1734
1735
  --bic-filter-group-border-color: var(--bi-neutral-15);
1735
1736
  --bic-filter-group-text-color: var(--bi-neutral-90);
1736
1737
  }
1737
1738
 
1738
1739
  .bi-filter-group[data-dark="true"] {
1739
- --bic-filter-group-background-color: var(--bi-neutral-90);
1740
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
1741
- --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
1740
+ --bic-filter-group-background: var(--bi-neutral-90);
1741
+ --bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%), var(--bic-filter-group-background);
1742
+ --bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%), var(--bic-filter-group-background);
1743
+ --bic-filter-group-background-expanded: var(--bi-neutral-80);
1742
1744
  --bic-filter-group-border-color: var(--bi-neutral-70);
1743
1745
  --bic-filter-group-text-color: var(--bi-basic-white);
1744
1746
  }
@@ -1754,10 +1756,10 @@ body:has(.bi-dialog:modal) {
1754
1756
  height: var(--bi-scale-12x);
1755
1757
  color: var(--bic-filter-group-text-color);
1756
1758
  align-items: center;
1757
- gap: var(--bi-scale-2x);
1759
+ gap: var(--bi-scale-3x);
1758
1760
  width: 100%;
1759
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1760
- background: var(--bic-filter-group-background-color);
1761
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1762
+ background: var(--bic-filter-group-background);
1761
1763
  cursor: pointer;
1762
1764
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1763
1765
  -webkit-user-select: none;
@@ -1766,8 +1768,14 @@ body:has(.bi-dialog:modal) {
1766
1768
  display: flex;
1767
1769
  }
1768
1770
 
1769
- .bi-filter-group > button:hover {
1770
- background: var(--bic-filter-group-background-color-hover);
1771
+ @media (hover: hover) and (pointer: fine) {
1772
+ .bi-filter-group > button:hover {
1773
+ background: var(--bic-filter-group-background-hover);
1774
+ }
1775
+ }
1776
+
1777
+ .bi-filter-group > button:active {
1778
+ background: var(--bic-filter-group-background-press);
1771
1779
  }
1772
1780
 
1773
1781
  .bi-filter-group > button:focus-visible {
@@ -1804,12 +1812,20 @@ body:has(.bi-dialog:modal) {
1804
1812
  width: 100%;
1805
1813
  }
1806
1814
 
1815
+ .bi-filter-group:last-of-type > button {
1816
+ border-radius: var(--bi-radius-small);
1817
+ border-bottom-color: #0000;
1818
+ }
1819
+
1807
1820
  .bi-filter-group:last-of-type > div {
1808
1821
  padding: var(--bi-scale-2x) 0;
1809
1822
  }
1810
1823
 
1824
+ .bi-filter-group[data-expanded="true"] {
1825
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
1826
+ }
1827
+
1811
1828
  .bi-filter-group[data-expanded="true"] > button {
1812
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
1813
1829
  border-radius: var(--bi-radius-small);
1814
1830
  border-bottom-color: #0000;
1815
1831
  }
@@ -1989,37 +2005,35 @@ body:has(.bi-dialog:modal) {
1989
2005
  }
1990
2006
 
1991
2007
  .bi-input {
2008
+ --bic-input-border-color-invalid: var(--bi-alert-50);
2009
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
2010
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
2011
+ --bic-input-caret-color: var(--bi-primary-50);
2012
+ --bic-input-font-size: 1rem;
1992
2013
  --bic-input-padding: var(--bi-scale-3x);
1993
2014
  --bic-input-size: var(--bi-scale-11x);
1994
- --bic-input-font-size: 1rem;
2015
+ --bic-input-toggle-background: var(--bi-primary-50);
2016
+ --bic-input-toggle-color: var(--bi-basic-white);
1995
2017
  --bic-input-toggle-size: 1.125rem;
1996
- --bic-input-background: var(--bic-field-background, var(--bi-basic-white));
1997
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-10));
1998
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-50));
1999
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2000
- --bic-input-border-style: var(--bic-field-border-style, solid);
2001
- --bic-input-border-width: var(--bic-field-border-width, var(--bi-stroke-thin));
2002
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2003
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-neutral-95));
2004
- --bic-input-color: var(--bic-field-input-color, var(--bi-neutral-95));
2005
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-50));
2006
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2007
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2008
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
2018
+ --bic-input-background: var(--bi-basic-white);
2019
+ --bic-input-background-readonly: var(--bi-neutral-10);
2020
+ --bic-input-border-color: var(--bi-neutral-50);
2021
+ --bic-input-border-color-hover: var(--bi-neutral-50);
2022
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
2023
+ --bic-input-color-readonly: var(--bi-neutral-95);
2024
+ --bic-input-color: var(--bi-neutral-95);
2025
+ --bic-input-disabled-color: var(--bi-neutral-50);
2026
+ --bic-input-placeholder-color: var(--bi-neutral-60);
2009
2027
  }
2010
2028
 
2011
2029
  .bi-input[data-dark="true"] {
2012
- --bic-input-background: var(--bic-field-background, var(--bi-neutral-95));
2013
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-50));
2014
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-10));
2015
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2016
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2017
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-basic-white));
2018
- --bic-input-color: var(--bic-field-input-color, var(--bi-basic-white));
2019
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-40));
2020
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2021
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2022
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
2030
+ --bic-input-background: var(--bi-neutral-95);
2031
+ --bic-input-background-readonly: var(--bi-neutral-50);
2032
+ --bic-input-border-color-hover: var(--bi-neutral-25);
2033
+ --bic-input-color-readonly: var(--bi-basic-white);
2034
+ --bic-input-color: var(--bi-basic-white);
2035
+ --bic-input-disabled-color: var(--bi-neutral-40);
2036
+ --bic-input-placeholder-color: var(--bi-neutral-30);
2023
2037
  }
2024
2038
 
2025
2039
  .bi-input {
@@ -2027,9 +2041,7 @@ body:has(.bi-dialog:modal) {
2027
2041
  appearance: none;
2028
2042
  background: var(--bic-input-background);
2029
2043
  border-radius: var(--bi-radius-medium);
2030
- border-width: var(--bic-input-border-width);
2031
- border-style: var(--bic-input-border-style);
2032
- border-color: var(--bic-input-border-color);
2044
+ box-shadow: var(--bic-input-box-shadow);
2033
2045
  box-sizing: border-box;
2034
2046
  color: var(--bic-input-color);
2035
2047
  font-family: inherit;
@@ -2039,6 +2051,8 @@ body:has(.bi-dialog:modal) {
2039
2051
  max-width: 100%;
2040
2052
  padding: var(--bic-input-padding);
2041
2053
  vertical-align: middle;
2054
+ caret-color: var(--bic-input-caret-color);
2055
+ border: none;
2042
2056
  line-height: 1;
2043
2057
  position: relative;
2044
2058
  }
@@ -2057,15 +2071,19 @@ body:has(.bi-dialog:modal) {
2057
2071
  }
2058
2072
 
2059
2073
  .bi-input:focus-visible {
2060
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2061
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2062
- outline-offset: var(--_bi--focus, 2px);
2074
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2075
+ outline-offset: 0;
2076
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2063
2077
  }
2064
2078
 
2065
2079
  .bi-input:focus-visible * {
2066
2080
  --_bi--focus: ;
2067
2081
  }
2068
2082
 
2083
+ .bi-input::placeholder {
2084
+ color: var(--bic-input-placeholder-color);
2085
+ }
2086
+
2069
2087
  .bi-input:not([size], [cols]) {
2070
2088
  width: 100%;
2071
2089
  }
@@ -2084,19 +2102,19 @@ body:has(.bi-dialog:modal) {
2084
2102
 
2085
2103
  .bi-input[readonly] {
2086
2104
  background: var(--bic-input-background-readonly);
2087
- border-color: var(--bic-input-border-color-readonly);
2105
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2088
2106
  color: var(--bic-input-color-readonly);
2089
2107
  }
2090
2108
 
2091
2109
  .bi-input:disabled {
2092
2110
  background: var(--bic-input-background-readonly);
2093
- border-color: var(--bic-input-border-color-readonly);
2111
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2094
2112
  color: var(--bic-input-color-readonly);
2095
2113
  }
2096
2114
 
2097
2115
  .bi-input[aria-disabled="true"] {
2098
2116
  background: var(--bic-input-background-readonly);
2099
- border-color: var(--bic-input-border-color-readonly);
2117
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2100
2118
  color: var(--bic-input-color-readonly);
2101
2119
  }
2102
2120
 
@@ -2151,16 +2169,28 @@ body:has(.bi-dialog:modal) {
2151
2169
  }
2152
2170
 
2153
2171
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2154
- border-width: var(--bi-stroke-default);
2155
2172
  padding: var(--bi-scale-0-50x);
2156
2173
  line-height: inherit;
2157
2174
  height: var(--bic-input-toggle-size);
2158
2175
  width: var(--bic-input-toggle-size);
2176
+ box-shadow: none;
2177
+ border-width: var(--bi-stroke-default);
2178
+ border-style: solid;
2159
2179
  border-color: var(--bic-input-border-color);
2160
2180
  background: none;
2161
2181
  flex-shrink: 0;
2162
2182
  }
2163
2183
 
2184
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2185
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2186
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2187
+ outline-offset: var(--_bi--focus, 2px);
2188
+ }
2189
+
2190
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
2191
+ --_bi--focus: ;
2192
+ }
2193
+
2164
2194
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2165
2195
  cursor: pointer;
2166
2196
  }
@@ -2232,16 +2262,28 @@ body:has(.bi-dialog:modal) {
2232
2262
  }
2233
2263
 
2234
2264
  .bi-input:is([type="checkbox"], [type="radio"]) {
2235
- border-width: var(--bi-stroke-default);
2236
2265
  padding: var(--bi-scale-0-50x);
2237
2266
  line-height: inherit;
2238
2267
  height: var(--bic-input-toggle-size);
2239
2268
  width: var(--bic-input-toggle-size);
2269
+ box-shadow: none;
2270
+ border-width: var(--bi-stroke-default);
2271
+ border-style: solid;
2240
2272
  border-color: var(--bic-input-border-color);
2241
2273
  background: none;
2242
2274
  flex-shrink: 0;
2243
2275
  }
2244
2276
 
2277
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2278
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2279
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2280
+ outline-offset: var(--_bi--focus, 2px);
2281
+ }
2282
+
2283
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
2284
+ --_bi--focus: ;
2285
+ }
2286
+
2245
2287
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2246
2288
  cursor: pointer;
2247
2289
  }
@@ -2702,6 +2744,10 @@ body:has(.bi-dialog:modal) {
2702
2744
  display: inline;
2703
2745
  }
2704
2746
 
2747
+ .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2748
+ color: var(--bi-primary-50);
2749
+ }
2750
+
2705
2751
  .bi-search .bi-field--affix:last-child {
2706
2752
  --bic-field-padding-inline: 0;
2707
2753
  }
@@ -2744,7 +2790,7 @@ body:has(.bi-dialog:modal) {
2744
2790
  border-radius: var(--bi-radius-medium);
2745
2791
  outline-offset: 2px;
2746
2792
  outline: 1.5px solid var(--bi-primary-50);
2747
- box-shadow: 0 0 0 2px var(--bi-basic-white);
2793
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
2748
2794
  }
2749
2795
 
2750
2796
  .bi-spinner {
@@ -2827,6 +2873,7 @@ body:has(.bi-dialog:modal) {
2827
2873
  }
2828
2874
 
2829
2875
  .bi-tabs .bi-tabs--list {
2876
+ scrollbar-width: none;
2830
2877
  flex-direction: row;
2831
2878
  flex-shrink: 0;
2832
2879
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.0.0-experimental-822fd72",
3
+ "version": "0.0.0-experimental-68c5574",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
6
  "license": "ISC",
@@ -23,7 +23,7 @@
23
23
  "lightningcss": "^1.30.1",
24
24
  "modern-normalize": "^3.0.1",
25
25
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.0.0-experimental-822fd72"
26
+ "@bi-digital/tokens": "0.0.0-experimental-68c5574"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",