@bi-digital/css 0.2.21 → 0.2.23

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 +18 -38
  3. package/dist/components/filter-group.css +12 -4
  4. package/dist/components/input.css +62 -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 +126 -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,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
@@ -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,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);
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,14 @@ 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);
1613
1602
  }
1614
1603
 
1615
1604
  .bi-field .bi-field--affixes .bi-input {
1616
- --bic-field-background: ;
1617
- --bic-field-box-shadow-hover: ;
1618
- --bic-field-border-width: 0;
1605
+ --bic-input-background: ;
1606
+ --bic-input-box-shadow: ;
1619
1607
  flex: auto;
1620
1608
  }
1621
1609
 
@@ -1637,22 +1625,18 @@ body:has(.bi-dialog:modal) {
1637
1625
  }
1638
1626
 
1639
1627
  .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);
1628
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
1629
+ outline-offset: 0;
1630
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
1644
1631
  }
1645
1632
 
1646
1633
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) * {
1647
1634
  --_bi--focus: ;
1648
1635
  }
1649
1636
 
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
1637
  .bi-field .bi-field--affixes .bi-field--affix {
1655
1638
  padding-inline: var(--bic-field-padding-inline);
1639
+ color: var(--bic-field-affix-color);
1656
1640
  flex-shrink: 0;
1657
1641
  align-items: center;
1658
1642
  }
@@ -1751,7 +1735,7 @@ body:has(.bi-dialog:modal) {
1751
1735
  --bic-filter-group-background: var(--bi-basic-white);
1752
1736
  --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
1737
  --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);
1738
+ --bic-filter-group-background-expanded: var(--bi-stroke-color-1);
1755
1739
  --bic-filter-group-border-color: var(--bi-neutral-15);
1756
1740
  --bic-filter-group-text-color: var(--bi-neutral-90);
1757
1741
  }
@@ -1776,9 +1760,9 @@ body:has(.bi-dialog:modal) {
1776
1760
  height: var(--bi-scale-12x);
1777
1761
  color: var(--bic-filter-group-text-color);
1778
1762
  align-items: center;
1779
- gap: var(--bi-scale-2x);
1763
+ gap: calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1780
1764
  width: 100%;
1781
- padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
1765
+ padding: var(--bi-scale-2x) calc(var(--bi-scale-2x) + var(--bi-scale-0-50x));
1782
1766
  background: var(--bic-filter-group-background);
1783
1767
  cursor: pointer;
1784
1768
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -1832,12 +1816,20 @@ body:has(.bi-dialog:modal) {
1832
1816
  width: 100%;
1833
1817
  }
1834
1818
 
1819
+ .bi-filter-group:last-of-type > button {
1820
+ border-radius: var(--bi-radius-small);
1821
+ border-bottom-color: #0000;
1822
+ }
1823
+
1835
1824
  .bi-filter-group:last-of-type > div {
1836
1825
  padding: var(--bi-scale-2x) 0;
1837
1826
  }
1838
1827
 
1839
- .bi-filter-group[data-expanded="true"] > button {
1828
+ .bi-filter-group[data-expanded="true"] {
1840
1829
  --bic-filter-group-background: var(--bic-filter-group-background-expanded);
1830
+ }
1831
+
1832
+ .bi-filter-group[data-expanded="true"] > button {
1841
1833
  border-radius: var(--bi-radius-small);
1842
1834
  border-bottom-color: #0000;
1843
1835
  }
@@ -2017,37 +2009,35 @@ body:has(.bi-dialog:modal) {
2017
2009
  }
2018
2010
 
2019
2011
  .bi-input {
2012
+ --bic-input-border-color-invalid: var(--bi-alert-50);
2013
+ --bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
2014
+ --bic-input-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-input-border-color-hover);
2015
+ --bic-input-caret-color: var(--bi-primary-50);
2016
+ --bic-input-font-size: 1rem;
2020
2017
  --bic-input-padding: var(--bi-scale-3x);
2021
2018
  --bic-input-size: var(--bi-scale-11x);
2022
- --bic-input-font-size: 1rem;
2019
+ --bic-input-toggle-background: var(--bi-primary-50);
2020
+ --bic-input-toggle-color: var(--bi-basic-white);
2023
2021
  --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));
2022
+ --bic-input-background: var(--bi-basic-white);
2023
+ --bic-input-background-readonly: var(--bi-neutral-10);
2024
+ --bic-input-border-color: var(--bi-neutral-50);
2025
+ --bic-input-border-color-hover: var(--bi-neutral-50);
2026
+ --bic-input-border-color-readonly: var(--bi-neutral-50);
2027
+ --bic-input-color-readonly: var(--bi-neutral-95);
2028
+ --bic-input-color: var(--bi-neutral-95);
2029
+ --bic-input-disabled-color: var(--bi-neutral-50);
2030
+ --bic-input-placeholder-color: var(--bi-neutral-60);
2037
2031
  }
2038
2032
 
2039
2033
  .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));
2034
+ --bic-input-background: var(--bi-neutral-95);
2035
+ --bic-input-background-readonly: var(--bi-neutral-50);
2036
+ --bic-input-border-color-hover: var(--bi-neutral-25);
2037
+ --bic-input-color-readonly: var(--bi-basic-white);
2038
+ --bic-input-color: var(--bi-basic-white);
2039
+ --bic-input-disabled-color: var(--bi-neutral-40);
2040
+ --bic-input-placeholder-color: var(--bi-neutral-30);
2051
2041
  }
2052
2042
 
2053
2043
  .bi-input {
@@ -2055,9 +2045,7 @@ body:has(.bi-dialog:modal) {
2055
2045
  appearance: none;
2056
2046
  background: var(--bic-input-background);
2057
2047
  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);
2048
+ box-shadow: var(--bic-input-box-shadow);
2061
2049
  box-sizing: border-box;
2062
2050
  color: var(--bic-input-color);
2063
2051
  font-family: inherit;
@@ -2067,6 +2055,8 @@ body:has(.bi-dialog:modal) {
2067
2055
  max-width: 100%;
2068
2056
  padding: var(--bic-input-padding);
2069
2057
  vertical-align: middle;
2058
+ caret-color: var(--bic-input-caret-color);
2059
+ border: none;
2070
2060
  line-height: 1;
2071
2061
  position: relative;
2072
2062
  }
@@ -2085,15 +2075,19 @@ body:has(.bi-dialog:modal) {
2085
2075
  }
2086
2076
 
2087
2077
  .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);
2078
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-primary-50));
2079
+ outline-offset: 0;
2080
+ box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2091
2081
  }
2092
2082
 
2093
2083
  .bi-input:focus-visible * {
2094
2084
  --_bi--focus: ;
2095
2085
  }
2096
2086
 
2087
+ .bi-input::placeholder {
2088
+ color: var(--bic-input-placeholder-color);
2089
+ }
2090
+
2097
2091
  .bi-input:not([size], [cols]) {
2098
2092
  width: 100%;
2099
2093
  }
@@ -2112,19 +2106,19 @@ body:has(.bi-dialog:modal) {
2112
2106
 
2113
2107
  .bi-input[readonly] {
2114
2108
  background: var(--bic-input-background-readonly);
2115
- border-color: var(--bic-input-border-color-readonly);
2109
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2116
2110
  color: var(--bic-input-color-readonly);
2117
2111
  }
2118
2112
 
2119
2113
  .bi-input:disabled {
2120
2114
  background: var(--bic-input-background-readonly);
2121
- border-color: var(--bic-input-border-color-readonly);
2115
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2122
2116
  color: var(--bic-input-color-readonly);
2123
2117
  }
2124
2118
 
2125
2119
  .bi-input[aria-disabled="true"] {
2126
2120
  background: var(--bic-input-background-readonly);
2127
- border-color: var(--bic-input-border-color-readonly);
2121
+ --bic-input-border-color: var(--bic-input-border-color-readonly);
2128
2122
  color: var(--bic-input-color-readonly);
2129
2123
  }
2130
2124
 
@@ -2179,16 +2173,28 @@ body:has(.bi-dialog:modal) {
2179
2173
  }
2180
2174
 
2181
2175
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]) {
2182
- border-width: var(--bi-stroke-default);
2183
2176
  padding: var(--bi-scale-0-50x);
2184
2177
  line-height: inherit;
2185
2178
  height: var(--bic-input-toggle-size);
2186
2179
  width: var(--bic-input-toggle-size);
2180
+ box-shadow: none;
2181
+ border-width: var(--bi-stroke-default);
2182
+ border-style: solid;
2187
2183
  border-color: var(--bic-input-border-color);
2188
2184
  background: none;
2189
2185
  flex-shrink: 0;
2190
2186
  }
2191
2187
 
2188
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2189
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2190
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2191
+ outline-offset: var(--_bi--focus, 2px);
2192
+ }
2193
+
2194
+ .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
2195
+ --_bi--focus: ;
2196
+ }
2197
+
2192
2198
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2193
2199
  cursor: pointer;
2194
2200
  }
@@ -2260,16 +2266,28 @@ body:has(.bi-dialog:modal) {
2260
2266
  }
2261
2267
 
2262
2268
  .bi-input:is([type="checkbox"], [type="radio"]) {
2263
- border-width: var(--bi-stroke-default);
2264
2269
  padding: var(--bi-scale-0-50x);
2265
2270
  line-height: inherit;
2266
2271
  height: var(--bic-input-toggle-size);
2267
2272
  width: var(--bic-input-toggle-size);
2273
+ box-shadow: none;
2274
+ border-width: var(--bi-stroke-default);
2275
+ border-style: solid;
2268
2276
  border-color: var(--bic-input-border-color);
2269
2277
  background: none;
2270
2278
  flex-shrink: 0;
2271
2279
  }
2272
2280
 
2281
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2282
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white));
2283
+ outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
2284
+ outline-offset: var(--_bi--focus, 2px);
2285
+ }
2286
+
2287
+ .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
2288
+ --_bi--focus: ;
2289
+ }
2290
+
2273
2291
  .bi-input:is([type="checkbox"], [type="radio"]):read-only:not([readonly], [aria-disabled="true"], :disabled) {
2274
2292
  cursor: pointer;
2275
2293
  }
@@ -2564,7 +2582,7 @@ body:has(.bi-dialog:modal) {
2564
2582
  }
2565
2583
 
2566
2584
  .bi-navbar[data-fixed="true"] > header {
2567
- z-index: 110;
2585
+ z-index: 130;
2568
2586
  position: fixed;
2569
2587
  top: 0;
2570
2588
  left: 0;
@@ -2730,6 +2748,10 @@ body:has(.bi-dialog:modal) {
2730
2748
  display: inline;
2731
2749
  }
2732
2750
 
2751
+ .bi-search:has(:focus-visible) .bi-field--affix:first-child {
2752
+ color: var(--bi-primary-50);
2753
+ }
2754
+
2733
2755
  .bi-search .bi-field--affix:last-child {
2734
2756
  --bic-field-padding-inline: 0;
2735
2757
  }
@@ -2772,7 +2794,7 @@ body:has(.bi-dialog:modal) {
2772
2794
  border-radius: var(--bi-radius-medium);
2773
2795
  outline-offset: 2px;
2774
2796
  outline: 1.5px solid var(--bi-primary-50);
2775
- box-shadow: 0 0 0 2px var(--bi-basic-white);
2797
+ box-shadow: 0 0 0 var(--bi-stroke-thick) var(--bi-basic-white);
2776
2798
  }
2777
2799
 
2778
2800
  .bi-spinner {
@@ -2855,6 +2877,7 @@ body:has(.bi-dialog:modal) {
2855
2877
  }
2856
2878
 
2857
2879
  .bi-tabs .bi-tabs--list {
2880
+ scrollbar-width: none;
2858
2881
  flex-direction: row;
2859
2882
  flex-shrink: 0;
2860
2883
  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.23",
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.23"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",