@bi-digital/css 0.2.21 → 0.2.22

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 (10) hide show
  1. package/dist/components/card.css +27 -23
  2. package/dist/components/field.css +19 -38
  3. package/dist/components/filter-group.css +12 -4
  4. package/dist/components/input.css +63 -36
  5. package/dist/components/navbar.css +1 -1
  6. package/dist/components/search.css +4 -0
  7. package/dist/components/skip-link.css +1 -1
  8. package/dist/components/tabs.css +1 -0
  9. package/dist/components.css +128 -103
  10. 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);
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
 
@@ -143,11 +143,12 @@
143
143
  .bi-card:-webkit-any(a, button) {
144
144
  cursor: pointer;
145
145
  text-decoration: none;
146
+ transition: box-shadow .25s ease-in-out;
146
147
  position: relative;
147
148
  }
148
149
 
149
150
  .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));
151
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
151
152
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
152
153
  outline-offset: var(--_bi--focus, 2px);
153
154
  }
@@ -158,7 +159,7 @@
158
159
 
159
160
  @media (hover: hover) and (pointer: fine) {
160
161
  .bi-card:-webkit-any(a, button):not(.disabled):hover {
161
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
162
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
162
163
  }
163
164
  }
164
165
 
@@ -173,11 +174,12 @@
173
174
  .bi-card:is(a, button) {
174
175
  cursor: pointer;
175
176
  text-decoration: none;
177
+ transition: box-shadow .25s ease-in-out;
176
178
  position: relative;
177
179
  }
178
180
 
179
181
  .bi-card:is(a, button):not(.disabled):focus-visible {
180
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
182
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
181
183
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
182
184
  outline-offset: var(--_bi--focus, 2px);
183
185
  }
@@ -188,7 +190,7 @@
188
190
 
189
191
  @media (hover: hover) and (pointer: fine) {
190
192
  .bi-card:is(a, button):not(.disabled):hover {
191
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
193
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
192
194
  }
193
195
  }
194
196
 
@@ -203,11 +205,12 @@
203
205
  .bi-card .bi-card--content:-webkit-any(a, button) {
204
206
  cursor: pointer;
205
207
  text-decoration: none;
208
+ transition: box-shadow .25s ease-in-out;
206
209
  position: relative;
207
210
  }
208
211
 
209
212
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
210
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
213
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
211
214
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
212
215
  outline-offset: var(--_bi--focus, 2px);
213
216
  }
@@ -218,7 +221,7 @@
218
221
 
219
222
  @media (hover: hover) and (pointer: fine) {
220
223
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
221
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
224
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
222
225
  }
223
226
  }
224
227
 
@@ -233,11 +236,12 @@
233
236
  .bi-card .bi-card--content:is(a, button) {
234
237
  cursor: pointer;
235
238
  text-decoration: none;
239
+ transition: box-shadow .25s ease-in-out;
236
240
  position: relative;
237
241
  }
238
242
 
239
243
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
240
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
244
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
241
245
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
242
246
  outline-offset: var(--_bi--focus, 2px);
243
247
  }
@@ -248,7 +252,7 @@
248
252
 
249
253
  @media (hover: hover) and (pointer: fine) {
250
254
  .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
251
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
255
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
252
256
  }
253
257
  }
254
258
 
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,15 @@
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);
226
+ transition: box-shadow .25s ease-in-out;
241
227
  }
242
228
 
243
229
  .bi-field .bi-field--affixes .bi-input {
244
- --bic-field-background: ;
245
- --bic-field-box-shadow-hover: ;
246
- --bic-field-border-width: 0;
230
+ --bic-input-background: ;
231
+ --bic-input-box-shadow: ;
247
232
  flex: auto;
248
233
  }
249
234
 
@@ -265,22 +250,18 @@
265
250
  }
266
251
 
267
252
  .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);
253
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
254
+ outline-offset: 0;
255
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
272
256
  }
273
257
 
274
258
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
275
259
  --_bi--focus: ;
276
260
  }
277
261
 
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
262
  .bi-field .bi-field--affixes .bi-field--affix {
283
263
  padding-inline: var(--bic-field-padding-inline);
264
+ color: var(--bic-field-affix-color);
284
265
  flex-shrink: 0;
285
266
  align-items: center;
286
267
  }
package/dist/components/filter-group.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --bic-filter-group-background: var(--bi-basic-white);
3
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
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-neutral-15);
5
+ --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
6
6
  --bic-filter-group-border-color: var(--bi-neutral-15);
7
7
  --bic-filter-group-text-color: var(--bi-neutral-90);
8
8
  }
@@ -27,9 +27,9 @@
27
27
  height: var(--bi-scale-12x);
28
28
  color: var(--bic-filter-group-text-color);
29
29
  align-items: center;
30
- gap: var(--bi-scale-2x);
30
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
31
31
  width: 100%;
32
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
32
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
33
33
  background: var(--bic-filter-group-background);
34
34
  cursor: pointer;
35
35
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -83,12 +83,20 @@
83
83
  width: 100%;
84
84
  }
85
85
 
86
+ .bi-filter-group:last-of-type > button {
87
+ border-radius: var(--bi-radius-small);
88
+ border-bottom-color: #0000;
89
+ }
90
+
86
91
  .bi-filter-group:last-of-type > div {
87
92
  padding: var(--bi-scale-2x) 0;
88
93
  }
89
94
 
90
- .bi-filter-group[data-expanded="true"] > button {
95
+ .bi-filter-group[data-expanded="true"] {
91
96
  --bic-filter-group-background: var(--bic-filter-group-background-expanded);
97
+ }
98
+
99
+ .bi-filter-group[data-expanded="true"] > button {
92
100
  border-radius: var(--bi-radius-small);
93
101
  border-bottom-color: #0000;
94
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,7 +49,10 @@
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;
55
+ transition: box-shadow .25s ease-in-out;
57
56
  position: relative;
58
57
  }
59
58
 
@@ -71,15 +70,19 @@
71
70
  }
72
71
 
73
72
  .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);
73
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
74
+ outline-offset: 0;
75
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
77
76
  }
78
77
 
79
78
  .bi-input:focus-visible * {
80
79
  --_bi--focus: ;
81
80
  }
82
81
 
82
+ .bi-input::placeholder {
83
+ color: var(--bic-input-placeholder-color);
84
+ }
85
+
83
86
  .bi-input:not([size], [cols]) {
84
87
  width: 100%;
85
88
  }
@@ -98,19 +101,19 @@
98
101
 
99
102
  .bi-input[readonly] {
100
103
  background: var(--bic-input-background-readonly);
101
- border-color: var(--bic-input-border-color-readonly);
104
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
102
105
  color: var(--bic-input-color-readonly);
103
106
  }
104
107
 
105
108
  .bi-input:disabled {
106
109
  background: var(--bic-input-background-readonly);
107
- border-color: var(--bic-input-border-color-readonly);
110
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
108
111
  color: var(--bic-input-color-readonly);
109
112
  }
110
113
 
111
114
  .bi-input[aria-disabled="true"] {
112
115
  background: var(--bic-input-background-readonly);
113
- border-color: var(--bic-input-border-color-readonly);
116
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
114
117
  color: var(--bic-input-color-readonly);
115
118
  }
116
119
 
@@ -165,16 +168,28 @@
165
168
  }
166
169
 
167
170
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
168
- border-width: var(--bi-stroke-default);
169
171
  padding: var(--bi-scale-0-50x);
170
172
  line-height: inherit;
171
173
  height: var(--bic-input-toggle-size);
172
174
  width: var(--bic-input-toggle-size);
175
+ box-shadow: none;
176
+ border-width: var(--bi-stroke-default);
177
+ border-style: solid;
173
178
  border-color: var(--bic-input-border-color);
174
179
  background: none;
175
180
  flex-shrink: 0;
176
181
  }
177
182
 
183
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
184
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
185
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
186
+ outline-offset: var(--_bi--focus, 2px);
187
+ }
188
+
189
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
190
+ --_bi--focus: ;
191
+ }
192
+
178
193
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
179
194
  cursor: pointer;
180
195
  }
@@ -246,16 +261,28 @@
246
261
  }
247
262
 
248
263
  .bi-input:is([type="checkbox"], [type="radio"]) {
249
- border-width: var(--bi-stroke-default);
250
264
  padding: var(--bi-scale-0-50x);
251
265
  line-height: inherit;
252
266
  height: var(--bic-input-toggle-size);
253
267
  width: var(--bic-input-toggle-size);
268
+ box-shadow: none;
269
+ border-width: var(--bi-stroke-default);
270
+ border-style: solid;
254
271
  border-color: var(--bic-input-border-color);
255
272
  background: none;
256
273
  flex-shrink: 0;
257
274
  }
258
275
 
276
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
277
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
278
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
279
+ outline-offset: var(--_bi--focus, 2px);
280
+ }
281
+
282
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
283
+ --_bi--focus: ;
284
+ }
285
+
259
286
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
260
287
  cursor: pointer;
261
288
  }
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);
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
 
@@ -601,11 +601,12 @@
601
601
  .bi-card:-webkit-any(a, button) {
602
602
  cursor: pointer;
603
603
  text-decoration: none;
604
+ transition: box-shadow .25s ease-in-out;
604
605
  position: relative;
605
606
  }
606
607
 
607
608
  .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));
609
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
609
610
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
610
611
  outline-offset: var(--_bi--focus, 2px);
611
612
  }
@@ -616,7 +617,7 @@
616
617
 
617
618
  @media (hover: hover) and (pointer: fine) {
618
619
  .bi-card:-webkit-any(a, button):not(.disabled):hover {
619
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
620
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
620
621
  }
621
622
  }
622
623
 
@@ -631,11 +632,12 @@
631
632
  .bi-card:is(a, button) {
632
633
  cursor: pointer;
633
634
  text-decoration: none;
635
+ transition: box-shadow .25s ease-in-out;
634
636
  position: relative;
635
637
  }
636
638
 
637
639
  .bi-card:is(a, button):not(.disabled):focus-visible {
638
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
640
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
639
641
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
640
642
  outline-offset: var(--_bi--focus, 2px);
641
643
  }
@@ -646,7 +648,7 @@
646
648
 
647
649
  @media (hover: hover) and (pointer: fine) {
648
650
  .bi-card:is(a, button):not(.disabled):hover {
649
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
651
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
650
652
  }
651
653
  }
652
654
 
@@ -661,11 +663,12 @@
661
663
  .bi-card .bi-card--content:-webkit-any(a, button) {
662
664
  cursor: pointer;
663
665
  text-decoration: none;
666
+ transition: box-shadow .25s ease-in-out;
664
667
  position: relative;
665
668
  }
666
669
 
667
670
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):focus-visible {
668
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
671
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
669
672
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
670
673
  outline-offset: var(--_bi--focus, 2px);
671
674
  }
@@ -676,7 +679,7 @@
676
679
 
677
680
  @media (hover: hover) and (pointer: fine) {
678
681
  .bi-card .bi-card--content:-webkit-any(a, button):not(.disabled):hover {
679
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
682
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
680
683
  }
681
684
  }
682
685
 
@@ -691,11 +694,12 @@
691
694
  .bi-card .bi-card--content:is(a, button) {
692
695
  cursor: pointer;
693
696
  text-decoration: none;
697
+ transition: box-shadow .25s ease-in-out;
694
698
  position: relative;
695
699
  }
696
700
 
697
701
  .bi-card .bi-card--content:is(a, button):not(.disabled):focus-visible {
698
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
702
+ box-shadow: var(--bic-card-box-shadow), var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
699
703
  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
700
704
  outline-offset: var(--_bi--focus, 2px);
701
705
  }
@@ -706,7 +710,7 @@
706
710
 
707
711
  @media (hover: hover) and (pointer: fine) {
708
712
  .bi-card .bi-card--content:is(a, button):not(.disabled):hover {
709
- box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
713
+ box-shadow: 0px 0px 0px var(--bi-stroke-thick) var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
710
714
  }
711
715
  }
712
716
 
@@ -1371,46 +1375,34 @@ body:has(.bi-dialog:modal) {
1371
1375
  }
1372
1376
 
1373
1377
  .bi-field {
1378
+ --bic-field-border-color-invalid: var(--bi-alert-50);
1379
+ --bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
1380
+ --bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
1374
1381
  --bic-field-content-spacing: var(--bi-scale-0-50x);
1375
- --bic-field-description-color: var(--bi-neutral-60);
1376
1382
  --bic-field-padding-inline: var(--bi-scale-3x);
1383
+ --bic-field-affix-color: var(--bi-neutral-60);
1377
1384
  --bic-field-background: var(--bi-basic-white);
1378
1385
  --bic-field-background-hover: var(--bi-states-hover-dark);
1379
1386
  --bic-field-background-readonly: var(--bi-neutral-10);
1380
1387
  --bic-field-border-color: var(--bi-neutral-50);
1388
+ --bic-field-border-color-hover: var(--bi-neutral-50);
1381
1389
  --bic-field-border-color-readonly: var(--bi-neutral-50);
1382
- --bic-field-border-color-invalid: var(--bi-alert-50);
1383
- --bic-field-border-style: solid;
1384
- --bic-field-border-width: var(--bi-stroke-thin);
1385
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
1386
- --bic-field-color: var(--bi-neutral-95);
1387
1390
  --bic-field-disabled-color: var(--bi-neutral-50);
1391
+ --bic-field-description-color: var(--bi-neutral-60);
1388
1392
  --bic-field-label-color: var(--bi-neutral-95);
1389
1393
  --bic-field-label-required-color: var(--bi-primary-50);
1390
- --bic-field-input-color-readonly: var(--bi-neutral-95);
1391
- --bic-field-input-color: var(--bi-neutral-95);
1392
- --bic-field-toggle-color: var(--bi-basic-white);
1393
- --bic-field-toggle-background: var(--bi-primary-50);
1394
1394
  }
1395
1395
 
1396
1396
  .bi-field[data-dark="true"] {
1397
- --bic-field-description-color: var(--bi-neutral-15);
1397
+ --bic-field-affix-color: var(--bi-neutral-30);
1398
1398
  --bic-field-background: var(--bi-neutral-95);
1399
1399
  --bic-field-background-hover: var(--bi-states-hover-light);
1400
1400
  --bic-field-background-readonly: var(--bi-neutral-50);
1401
- --bic-field-border-color: var(--bi-neutral-10);
1402
- --bic-field-border-color-hover: var(--bi-neutral-50);
1403
- --bic-field-border-color-readonly: var(--bi-neutral-50);
1404
- --bic-field-border-color-invalid: var(--bi-alert-50);
1405
- --bic-field-box-shadow-hover: 0 0 0 1px inset var(--bic-field-border-color);
1406
- --bic-field-color: var(--bi-basic-white);
1401
+ --bic-field-border-color-hover: var(--bi-neutral-25);
1407
1402
  --bic-field-disabled-color: var(--bi-neutral-40);
1403
+ --bic-field-description-color: var(--bi-neutral-15);
1408
1404
  --bic-field-label-color: var(--bi-basic-white);
1409
1405
  --bic-field-label-required-color: var(--bi-secondary-50);
1410
- --bic-field-input-color-readonly: var(--bi-basic-white);
1411
- --bic-field-input-color: var(--bi-basic-white);
1412
- --bic-field-toggle-color: var(--bi-basic-white);
1413
- --bic-field-toggle-background: var(--bi-primary-50);
1414
1406
  }
1415
1407
 
1416
1408
  .bi-field > * {
@@ -1442,8 +1434,8 @@ body:has(.bi-dialog:modal) {
1442
1434
  cursor: not-allowed;
1443
1435
  --bic-field-label-color: var(--bic-field-disabled-color);
1444
1436
  --bic-field-description-color: var(--bic-field-disabled-color);
1445
- --bic-field-color: var(--bic-field-disabled-color);
1446
- --bic-field-toggle-background: var(--bic-field-disabled-color);
1437
+ --bic-field-affix-color: var(--bic-field-disabled-color);
1438
+ --bic-input-toggle-background: var(--bic-field-disabled-color);
1447
1439
  }
1448
1440
 
1449
1441
  .bi-field[data-fullwidth="true"] {
@@ -1604,18 +1596,15 @@ body:has(.bi-dialog:modal) {
1604
1596
  background: var(--bic-field-background);
1605
1597
  border-radius: var(--bi-radius-medium);
1606
1598
  box-sizing: border-box;
1607
- color: var(--bic-field-color);
1608
1599
  white-space: nowrap;
1609
- border-width: var(--bic-field-border-width);
1610
- border-style: var(--bic-field-border-style);
1611
- border-color: var(--bic-field-border-color);
1612
1600
  max-width: 100%;
1601
+ box-shadow: var(--bic-field-box-shadow);
1602
+ transition: box-shadow .25s ease-in-out;
1613
1603
  }
1614
1604
 
1615
1605
  .bi-field .bi-field--affixes .bi-input {
1616
- --bic-field-background: ;
1617
- --bic-field-box-shadow-hover: ;
1618
- --bic-field-border-width: 0;
1606
+ --bic-input-background: ;
1607
+ --bic-input-box-shadow: ;
1619
1608
  flex: auto;
1620
1609
  }
1621
1610
 
@@ -1637,22 +1626,18 @@ body:has(.bi-dialog:modal) {
1637
1626
  }
1638
1627
 
1639
1628
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
1640
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
1641
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
1642
- outline-offset: var(--_bi--focus, 2px);
1643
- --bic-field-border-color: var(--bi-primary-50);
1629
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
1630
+ outline-offset: 0;
1631
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
1644
1632
  }
1645
1633
 
1646
1634
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
1647
1635
  --_bi--focus: ;
1648
1636
  }
1649
1637
 
1650
- .bi-field .bi-field--affixes:has(.bi-input[aria-invalid="true"]) {
1651
- --bic-field-border-color: var(--bic-field-border-color-invalid);
1652
- }
1653
-
1654
1638
  .bi-field .bi-field--affixes .bi-field--affix {
1655
1639
  padding-inline: var(--bic-field-padding-inline);
1640
+ color: var(--bic-field-affix-color);
1656
1641
  flex-shrink: 0;
1657
1642
  align-items: center;
1658
1643
  }
@@ -1751,7 +1736,7 @@ body:has(.bi-dialog:modal) {
1751
1736
  --bic-filter-group-background: var(--bi-basic-white);
1752
1737
  --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);
1753
1738
  --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);
1754
- --bic-filter-group-background-expanded: var(--bi-neutral-15);
1739
+ --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
1755
1740
  --bic-filter-group-border-color: var(--bi-neutral-15);
1756
1741
  --bic-filter-group-text-color: var(--bi-neutral-90);
1757
1742
  }
@@ -1776,9 +1761,9 @@ body:has(.bi-dialog:modal) {
1776
1761
  height: var(--bi-scale-12x);
1777
1762
  color: var(--bic-filter-group-text-color);
1778
1763
  align-items: center;
1779
- gap: var(--bi-scale-2x);
1764
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1780
1765
  width: 100%;
1781
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1766
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1782
1767
  background: var(--bic-filter-group-background);
1783
1768
  cursor: pointer;
1784
1769
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -1832,12 +1817,20 @@ body:has(.bi-dialog:modal) {
1832
1817
  width: 100%;
1833
1818
  }
1834
1819
 
1820
+ .bi-filter-group:last-of-type > button {
1821
+ border-radius: var(--bi-radius-small);
1822
+ border-bottom-color: #0000;
1823
+ }
1824
+
1835
1825
  .bi-filter-group:last-of-type > div {
1836
1826
  padding: var(--bi-scale-2x) 0;
1837
1827
  }
1838
1828
 
1839
- .bi-filter-group[data-expanded="true"] > button {
1829
+ .bi-filter-group[data-expanded="true"] {
1840
1830
  --bic-filter-group-background: var(--bic-filter-group-background-expanded);
1831
+ }
1832
+
1833
+ .bi-filter-group[data-expanded="true"] > button {
1841
1834
  border-radius: var(--bi-radius-small);
1842
1835
  border-bottom-color: #0000;
1843
1836
  }
@@ -2017,37 +2010,35 @@ body:has(.bi-dialog:modal) {
2017
2010
  }
2018
2011
 
2019
2012
  .bi-input {
2013
+ --bic-input-border-color-invalid: var(--bi-alert-50);
2014
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
2015
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
2016
+ --bic-input-caret-color: var(--bi-primary-50);
2017
+ --bic-input-font-size: 1rem;
2020
2018
  --bic-input-padding: var(--bi-scale-3x);
2021
2019
  --bic-input-size: var(--bi-scale-11x);
2022
- --bic-input-font-size: 1rem;
2020
+ --bic-input-toggle-background: var(--bi-primary-50);
2021
+ --bic-input-toggle-color: var(--bi-basic-white);
2023
2022
  --bic-input-toggle-size: 1.125rem;
2024
- --bic-input-background: var(--bic-field-background, var(--bi-basic-white));
2025
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-10));
2026
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-50));
2027
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2028
- --bic-input-border-style: var(--bic-field-border-style, solid);
2029
- --bic-input-border-width: var(--bic-field-border-width, var(--bi-stroke-thin));
2030
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2031
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-neutral-95));
2032
- --bic-input-color: var(--bic-field-input-color, var(--bi-neutral-95));
2033
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-50));
2034
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2035
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2036
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
2023
+ --bic-input-background: var(--bi-basic-white);
2024
+ --bic-input-background-readonly: var(--bi-neutral-10);
2025
+ --bic-input-border-color: var(--bi-neutral-50);
2026
+ --bic-input-border-color-hover: var(--bi-neutral-50);
2027
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
2028
+ --bic-input-color-readonly: var(--bi-neutral-95);
2029
+ --bic-input-color: var(--bi-neutral-95);
2030
+ --bic-input-disabled-color: var(--bi-neutral-50);
2031
+ --bic-input-placeholder-color: var(--bi-neutral-60);
2037
2032
  }
2038
2033
 
2039
2034
  .bi-input[data-dark="true"] {
2040
- --bic-input-background: var(--bic-field-background, var(--bi-neutral-95));
2041
- --bic-input-background-readonly: var(--bic-field-background-readonly, var(--bi-neutral-50));
2042
- --bic-input-border-color: var(--bic-field-border-color, var(--bi-neutral-10));
2043
- --bic-input-border-color-readonly: var(--bic-field-border-color-readonly, var(--bi-neutral-50));
2044
- --bic-input-box-shadow-hover: var(--bic-field-box-shadow-hover, 0 0 0 1px inset var(--bic-input-border-color));
2045
- --bic-input-color-readonly: var(--bic-field-input-color-readonly, var(--bi-basic-white));
2046
- --bic-input-color: var(--bic-field-input-color, var(--bi-basic-white));
2047
- --bic-input-disabled-color: var(--bic-field-disabled-color, var(--bi-neutral-40));
2048
- --bic-input-border-color-invalid: var(--bic-field-border-color-invalid, var(--bi-alert-50));
2049
- --bic-input-toggle-color: var(--bic-field-toggle-color, var(--bi-basic-white));
2050
- --bic-input-toggle-background: var(--bic-field-toggle-background, var(--bi-primary-50));
2035
+ --bic-input-background: var(--bi-neutral-95);
2036
+ --bic-input-background-readonly: var(--bi-neutral-50);
2037
+ --bic-input-border-color-hover: var(--bi-neutral-25);
2038
+ --bic-input-color-readonly: var(--bi-basic-white);
2039
+ --bic-input-color: var(--bi-basic-white);
2040
+ --bic-input-disabled-color: var(--bi-neutral-40);
2041
+ --bic-input-placeholder-color: var(--bi-neutral-30);
2051
2042
  }
2052
2043
 
2053
2044
  .bi-input {
@@ -2055,9 +2046,7 @@ body:has(.bi-dialog:modal) {
2055
2046
  appearance: none;
2056
2047
  background: var(--bic-input-background);
2057
2048
  border-radius: var(--bi-radius-medium);
2058
- border-width: var(--bic-input-border-width);
2059
- border-style: var(--bic-input-border-style);
2060
- border-color: var(--bic-input-border-color);
2049
+ box-shadow: var(--bic-input-box-shadow);
2061
2050
  box-sizing: border-box;
2062
2051
  color: var(--bic-input-color);
2063
2052
  font-family: inherit;
@@ -2067,7 +2056,10 @@ body:has(.bi-dialog:modal) {
2067
2056
  max-width: 100%;
2068
2057
  padding: var(--bic-input-padding);
2069
2058
  vertical-align: middle;
2059
+ caret-color: var(--bic-input-caret-color);
2060
+ border: none;
2070
2061
  line-height: 1;
2062
+ transition: box-shadow .25s ease-in-out;
2071
2063
  position: relative;
2072
2064
  }
2073
2065
 
@@ -2085,15 +2077,19 @@ body:has(.bi-dialog:modal) {
2085
2077
  }
2086
2078
 
2087
2079
  .bi-input:focus-visible {
2088
- box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2089
- outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2090
- outline-offset: var(--_bi--focus, 2px);
2080
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2081
+ outline-offset: 0;
2082
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2091
2083
  }
2092
2084
 
2093
2085
  .bi-input:focus-visible * {
2094
2086
  --_bi--focus: ;
2095
2087
  }
2096
2088
 
2089
+ .bi-input::placeholder {
2090
+ color: var(--bic-input-placeholder-color);
2091
+ }
2092
+
2097
2093
  .bi-input:not([size], [cols]) {
2098
2094
  width: 100%;
2099
2095
  }
@@ -2112,19 +2108,19 @@ body:has(.bi-dialog:modal) {
2112
2108
 
2113
2109
  .bi-input[readonly] {
2114
2110
  background: var(--bic-input-background-readonly);
2115
- border-color: var(--bic-input-border-color-readonly);
2111
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2116
2112
  color: var(--bic-input-color-readonly);
2117
2113
  }
2118
2114
 
2119
2115
  .bi-input:disabled {
2120
2116
  background: var(--bic-input-background-readonly);
2121
- border-color: var(--bic-input-border-color-readonly);
2117
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2122
2118
  color: var(--bic-input-color-readonly);
2123
2119
  }
2124
2120
 
2125
2121
  .bi-input[aria-disabled="true"] {
2126
2122
  background: var(--bic-input-background-readonly);
2127
- border-color: var(--bic-input-border-color-readonly);
2123
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2128
2124
  color: var(--bic-input-color-readonly);
2129
2125
  }
2130
2126
 
@@ -2179,16 +2175,28 @@ body:has(.bi-dialog:modal) {
2179
2175
  }
2180
2176
 
2181
2177
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2182
- border-width: var(--bi-stroke-default);
2183
2178
  padding: var(--bi-scale-0-50x);
2184
2179
  line-height: inherit;
2185
2180
  height: var(--bic-input-toggle-size);
2186
2181
  width: var(--bic-input-toggle-size);
2182
+ box-shadow: none;
2183
+ border-width: var(--bi-stroke-default);
2184
+ border-style: solid;
2187
2185
  border-color: var(--bic-input-border-color);
2188
2186
  background: none;
2189
2187
  flex-shrink: 0;
2190
2188
  }
2191
2189
 
2190
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2191
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2192
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2193
+ outline-offset: var(--_bi--focus, 2px);
2194
+ }
2195
+
2196
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
2197
+ --_bi--focus: ;
2198
+ }
2199
+
2192
2200
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2193
2201
  cursor: pointer;
2194
2202
  }
@@ -2260,16 +2268,28 @@ body:has(.bi-dialog:modal) {
2260
2268
  }
2261
2269
 
2262
2270
  .bi-input:is([type="checkbox"], [type="radio"]) {
2263
- border-width: var(--bi-stroke-default);
2264
2271
  padding: var(--bi-scale-0-50x);
2265
2272
  line-height: inherit;
2266
2273
  height: var(--bic-input-toggle-size);
2267
2274
  width: var(--bic-input-toggle-size);
2275
+ box-shadow: none;
2276
+ border-width: var(--bi-stroke-default);
2277
+ border-style: solid;
2268
2278
  border-color: var(--bic-input-border-color);
2269
2279
  background: none;
2270
2280
  flex-shrink: 0;
2271
2281
  }
2272
2282
 
2283
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2284
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2285
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2286
+ outline-offset: var(--_bi--focus, 2px);
2287
+ }
2288
+
2289
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
2290
+ --_bi--focus: ;
2291
+ }
2292
+
2273
2293
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2274
2294
  cursor: pointer;
2275
2295
  }
@@ -2564,7 +2584,7 @@ body:has(.bi-dialog:modal) {
2564
2584
  }
2565
2585
 
2566
2586
  .bi-navbar[data-fixed="true"] > header {
2567
- z-index: 110;
2587
+ z-index: 130;
2568
2588
  position: fixed;
2569
2589
  top: 0;
2570
2590
  left: 0;
@@ -2730,6 +2750,10 @@ body:has(.bi-dialog:modal) {
2730
2750
  display: inline;
2731
2751
  }
2732
2752
 
2753
+ .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2754
+ color: var(--bi-primary-50);
2755
+ }
2756
+
2733
2757
  .bi-search .bi-field--affix:last-child {
2734
2758
  --bic-field-padding-inline: 0;
2735
2759
  }
@@ -2772,7 +2796,7 @@ body:has(.bi-dialog:modal) {
2772
2796
  border-radius: var(--bi-radius-medium);
2773
2797
  outline-offset: 2px;
2774
2798
  outline: 1.5px solid var(--bi-primary-50);
2775
- box-shadow: 0 0 0 2px var(--bi-basic-white);
2799
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
2776
2800
  }
2777
2801
 
2778
2802
  .bi-spinner {
@@ -2855,6 +2879,7 @@ body:has(.bi-dialog:modal) {
2855
2879
  }
2856
2880
 
2857
2881
  .bi-tabs .bi-tabs--list {
2882
+ scrollbar-width: none;
2858
2883
  flex-direction: row;
2859
2884
  flex-shrink: 0;
2860
2885
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.2.21",
3
+ "version": "0.2.22",
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.2.21"
26
+ "@bi-digital/tokens": "0.2.22"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",