@bi-digital/css 0.0.0-experimental-510f80a → 0.0.0-experimental-426d58d

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/card.css +39 -31
  2. package/dist/components/chip.css +16 -8
  3. package/dist/components/field.css +18 -38
  4. package/dist/components/filter-group.css +28 -12
  5. package/dist/components/input.css +62 -36
  6. package/dist/components/navbar.css +1 -1
  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 +170 -127
  11. package/package.json +2 -2
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,8 @@
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);
75
63
  }
76
64
 
77
65
  .bi-field[data-fullwidth="true"] {
@@ -232,18 +220,14 @@
232
220
  background: var(--bic-field-background);
233
221
  border-radius: var(--bi-radius-medium);
234
222
  box-sizing: border-box;
235
- color: var(--bic-field-color);
236
223
  white-space: nowrap;
237
- border-width: var(--bic-field-border-width);
238
- border-style: var(--bic-field-border-style);
239
- border-color: var(--bic-field-border-color);
240
224
  max-width: 100%;
225
+ box-shadow: var(--bic-field-box-shadow);
241
226
  }
242
227
 
243
228
  .bi-field .bi-field--affixes .bi-input {
244
- --bic-field-background: ;
245
- --bic-field-box-shadow-hover: ;
246
- --bic-field-border-width: 0;
229
+ --bic-input-background: ;
230
+ --bic-input-box-shadow: ;
247
231
  flex: auto;
248
232
  }
249
233
 
@@ -265,22 +249,18 @@
265
249
  }
266
250
 
267
251
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
268
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
269
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
270
- outline-offset: var(--_bi--focus, 2px);
271
- --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);
272
255
  }
273
256
 
274
257
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
275
258
  --_bi--focus: ;
276
259
  }
277
260
 
278
- .bi-field .bi-field--affixes:has(.bi-input[aria-invalid="true"]) {
279
- --bic-field-border-color: var(--bic-field-border-color-invalid);
280
- }
281
-
282
261
  .bi-field .bi-field--affixes .bi-field--affix {
283
262
  padding-inline: var(--bic-field-padding-inline);
263
+ color: var(--bic-field-affix-color);
284
264
  flex-shrink: 0;
285
265
  align-items: center;
286
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: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
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/navbar.css CHANGED
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  .bi-navbar[data-fixed="true"] > header {
38
- z-index: 110;
38
+ z-index: 130;
39
39
  position: fixed;
40
40
  top: 0;
41
41
  left: 0;
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
@@ -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,8 @@ 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);
1431
1435
  }
1432
1436
 
1433
1437
  .bi-field[data-fullwidth="true"] {
@@ -1588,18 +1592,14 @@ body:has(.bi-dialog:modal) {
1588
1592
  background: var(--bic-field-background);
1589
1593
  border-radius: var(--bi-radius-medium);
1590
1594
  box-sizing: border-box;
1591
- color: var(--bic-field-color);
1592
1595
  white-space: nowrap;
1593
- border-width: var(--bic-field-border-width);
1594
- border-style: var(--bic-field-border-style);
1595
- border-color: var(--bic-field-border-color);
1596
1596
  max-width: 100%;
1597
+ box-shadow: var(--bic-field-box-shadow);
1597
1598
  }
1598
1599
 
1599
1600
  .bi-field .bi-field--affixes .bi-input {
1600
- --bic-field-background: ;
1601
- --bic-field-box-shadow-hover: ;
1602
- --bic-field-border-width: 0;
1601
+ --bic-input-background: ;
1602
+ --bic-input-box-shadow: ;
1603
1603
  flex: auto;
1604
1604
  }
1605
1605
 
@@ -1621,22 +1621,18 @@ body:has(.bi-dialog:modal) {
1621
1621
  }
1622
1622
 
1623
1623
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
1624
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1625
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1626
- outline-offset: var(--_bi--focus, 2px);
1627
- --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);
1628
1627
  }
1629
1628
 
1630
1629
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
1631
1630
  --_bi--focus: ;
1632
1631
  }
1633
1632
 
1634
- .bi-field .bi-field--affixes:has(.bi-input[aria-invalid="true"]) {
1635
- --bic-field-border-color: var(--bic-field-border-color-invalid);
1636
- }
1637
-
1638
1633
  .bi-field .bi-field--affixes .bi-field--affix {
1639
1634
  padding-inline: var(--bic-field-padding-inline);
1635
+ color: var(--bic-field-affix-color);
1640
1636
  flex-shrink: 0;
1641
1637
  align-items: center;
1642
1638
  }
@@ -1732,17 +1728,19 @@ body:has(.bi-dialog:modal) {
1732
1728
  }
1733
1729
 
1734
1730
  .bi-filter-group {
1735
- --bic-filter-group-background-color: var(--bi-basic-white);
1736
- --bic-filter-group-background-color-hover: var(--bi-primary-5);
1737
- --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);
1738
1735
  --bic-filter-group-border-color: var(--bi-neutral-15);
1739
1736
  --bic-filter-group-text-color: var(--bi-neutral-90);
1740
1737
  }
1741
1738
 
1742
1739
  .bi-filter-group[data-dark="true"] {
1743
- --bic-filter-group-background-color: var(--bi-neutral-90);
1744
- --bic-filter-group-background-color-hover: var(--bi-primary-90);
1745
- --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);
1746
1744
  --bic-filter-group-border-color: var(--bi-neutral-70);
1747
1745
  --bic-filter-group-text-color: var(--bi-basic-white);
1748
1746
  }
@@ -1758,10 +1756,10 @@ body:has(.bi-dialog:modal) {
1758
1756
  height: var(--bi-scale-12x);
1759
1757
  color: var(--bic-filter-group-text-color);
1760
1758
  align-items: center;
1761
- gap: var(--bi-scale-2x);
1759
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1762
1760
  width: 100%;
1763
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1764
- 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);
1765
1763
  cursor: pointer;
1766
1764
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1767
1765
  -webkit-user-select: none;
@@ -1770,8 +1768,14 @@ body:has(.bi-dialog:modal) {
1770
1768
  display: flex;
1771
1769
  }
1772
1770
 
1773
- .bi-filter-group > button:hover {
1774
- 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);
1775
1779
  }
1776
1780
 
1777
1781
  .bi-filter-group > button:focus-visible {
@@ -1808,12 +1812,20 @@ body:has(.bi-dialog:modal) {
1808
1812
  width: 100%;
1809
1813
  }
1810
1814
 
1815
+ .bi-filter-group:last-of-type > button {
1816
+ border-radius: var(--bi-radius-small);
1817
+ border-bottom-color: #0000;
1818
+ }
1819
+
1811
1820
  .bi-filter-group:last-of-type > div {
1812
1821
  padding: var(--bi-scale-2x) 0;
1813
1822
  }
1814
1823
 
1824
+ .bi-filter-group[data-expanded="true"] {
1825
+ --bic-filter-group-background: var(--bic-filter-group-background-expanded);
1826
+ }
1827
+
1815
1828
  .bi-filter-group[data-expanded="true"] > button {
1816
- --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
1817
1829
  border-radius: var(--bi-radius-small);
1818
1830
  border-bottom-color: #0000;
1819
1831
  }
@@ -1993,37 +2005,35 @@ body:has(.bi-dialog:modal) {
1993
2005
  }
1994
2006
 
1995
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;
1996
2013
  --bic-input-padding: var(--bi-scale-3x);
1997
2014
  --bic-input-size: var(--bi-scale-11x);
1998
- --bic-input-font-size: 1rem;
2015
+ --bic-input-toggle-background: var(--bi-primary-50);
2016
+ --bic-input-toggle-color: var(--bi-basic-white);
1999
2017
  --bic-input-toggle-size: 1.125rem;
2000
- --bic-input-background: var(--bic-field-background, var(--bi-basic-white));
2001
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-10));
2002
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-50));
2003
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2004
- --bic-input-border-style: var(--bic-field-border-style, solid);
2005
- --bic-input-border-width: var(--bic-field-border-width, var(--bi-stroke-thin));
2006
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2007
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-neutral-95));
2008
- --bic-input-color: var(--bic-field-input-color, var(--bi-neutral-95));
2009
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-50));
2010
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2011
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2012
- --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);
2013
2027
  }
2014
2028
 
2015
2029
  .bi-input[data-dark="true"] {
2016
- --bic-input-background: var(--bic-field-background, var(--bi-neutral-95));
2017
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-50));
2018
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-10));
2019
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2020
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2021
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-basic-white));
2022
- --bic-input-color: var(--bic-field-input-color, var(--bi-basic-white));
2023
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-40));
2024
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2025
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2026
- --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);
2027
2037
  }
2028
2038
 
2029
2039
  .bi-input {
@@ -2031,9 +2041,7 @@ body:has(.bi-dialog:modal) {
2031
2041
  appearance: none;
2032
2042
  background: var(--bic-input-background);
2033
2043
  border-radius: var(--bi-radius-medium);
2034
- border-width: var(--bic-input-border-width);
2035
- border-style: var(--bic-input-border-style);
2036
- border-color: var(--bic-input-border-color);
2044
+ box-shadow: var(--bic-input-box-shadow);
2037
2045
  box-sizing: border-box;
2038
2046
  color: var(--bic-input-color);
2039
2047
  font-family: inherit;
@@ -2043,6 +2051,8 @@ body:has(.bi-dialog:modal) {
2043
2051
  max-width: 100%;
2044
2052
  padding: var(--bic-input-padding);
2045
2053
  vertical-align: middle;
2054
+ caret-color: var(--bic-input-caret-color);
2055
+ border: none;
2046
2056
  line-height: 1;
2047
2057
  position: relative;
2048
2058
  }
@@ -2061,15 +2071,19 @@ body:has(.bi-dialog:modal) {
2061
2071
  }
2062
2072
 
2063
2073
  .bi-input:focus-visible {
2064
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2065
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2066
- 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);
2067
2077
  }
2068
2078
 
2069
2079
  .bi-input:focus-visible * {
2070
2080
  --_bi--focus: ;
2071
2081
  }
2072
2082
 
2083
+ .bi-input::placeholder {
2084
+ color: var(--bic-input-placeholder-color);
2085
+ }
2086
+
2073
2087
  .bi-input:not([size], [cols]) {
2074
2088
  width: 100%;
2075
2089
  }
@@ -2088,19 +2102,19 @@ body:has(.bi-dialog:modal) {
2088
2102
 
2089
2103
  .bi-input[readonly] {
2090
2104
  background: var(--bic-input-background-readonly);
2091
- border-color: var(--bic-input-border-color-readonly);
2105
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2092
2106
  color: var(--bic-input-color-readonly);
2093
2107
  }
2094
2108
 
2095
2109
  .bi-input:disabled {
2096
2110
  background: var(--bic-input-background-readonly);
2097
- border-color: var(--bic-input-border-color-readonly);
2111
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2098
2112
  color: var(--bic-input-color-readonly);
2099
2113
  }
2100
2114
 
2101
2115
  .bi-input[aria-disabled="true"] {
2102
2116
  background: var(--bic-input-background-readonly);
2103
- border-color: var(--bic-input-border-color-readonly);
2117
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2104
2118
  color: var(--bic-input-color-readonly);
2105
2119
  }
2106
2120
 
@@ -2155,16 +2169,28 @@ body:has(.bi-dialog:modal) {
2155
2169
  }
2156
2170
 
2157
2171
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2158
- border-width: var(--bi-stroke-default);
2159
2172
  padding: var(--bi-scale-0-50x);
2160
2173
  line-height: inherit;
2161
2174
  height: var(--bic-input-toggle-size);
2162
2175
  width: var(--bic-input-toggle-size);
2176
+ box-shadow: none;
2177
+ border-width: var(--bi-stroke-default);
2178
+ border-style: solid;
2163
2179
  border-color: var(--bic-input-border-color);
2164
2180
  background: none;
2165
2181
  flex-shrink: 0;
2166
2182
  }
2167
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
+
2168
2194
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2169
2195
  cursor: pointer;
2170
2196
  }
@@ -2236,16 +2262,28 @@ body:has(.bi-dialog:modal) {
2236
2262
  }
2237
2263
 
2238
2264
  .bi-input:is([type="checkbox"], [type="radio"]) {
2239
- border-width: var(--bi-stroke-default);
2240
2265
  padding: var(--bi-scale-0-50x);
2241
2266
  line-height: inherit;
2242
2267
  height: var(--bic-input-toggle-size);
2243
2268
  width: var(--bic-input-toggle-size);
2269
+ box-shadow: none;
2270
+ border-width: var(--bi-stroke-default);
2271
+ border-style: solid;
2244
2272
  border-color: var(--bic-input-border-color);
2245
2273
  background: none;
2246
2274
  flex-shrink: 0;
2247
2275
  }
2248
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
+
2249
2287
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2250
2288
  cursor: pointer;
2251
2289
  }
@@ -2540,7 +2578,7 @@ body:has(.bi-dialog:modal) {
2540
2578
  }
2541
2579
 
2542
2580
  .bi-navbar[data-fixed="true"] > header {
2543
- z-index: 110;
2581
+ z-index: 130;
2544
2582
  position: fixed;
2545
2583
  top: 0;
2546
2584
  left: 0;
@@ -2706,6 +2744,10 @@ body:has(.bi-dialog:modal) {
2706
2744
  display: inline;
2707
2745
  }
2708
2746
 
2747
+ .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2748
+ color: var(--bi-primary-50);
2749
+ }
2750
+
2709
2751
  .bi-search .bi-field--affix:last-child {
2710
2752
  --bic-field-padding-inline: 0;
2711
2753
  }
@@ -2748,7 +2790,7 @@ body:has(.bi-dialog:modal) {
2748
2790
  border-radius: var(--bi-radius-medium);
2749
2791
  outline-offset: 2px;
2750
2792
  outline: 1.5px solid var(--bi-primary-50);
2751
- box-shadow: 0 0 0 2px var(--bi-basic-white);
2793
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
2752
2794
  }
2753
2795
 
2754
2796
  .bi-spinner {
@@ -2831,6 +2873,7 @@ body:has(.bi-dialog:modal) {
2831
2873
  }
2832
2874
 
2833
2875
  .bi-tabs .bi-tabs--list {
2876
+ scrollbar-width: none;
2834
2877
  flex-direction: row;
2835
2878
  flex-shrink: 0;
2836
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-510f80a",
3
+ "version": "0.0.0-experimental-426d58d",
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-510f80a"
26
+ "@bi-digital/tokens": "0.0.0-experimental-426d58d"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",