@bi-digital/css 0.6.5 → 0.6.7

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 (13) hide show
  1. package/dist/components/button.css +4 -4
  2. package/dist/components/card.css +2 -2
  3. package/dist/components/chip.css +5 -5
  4. package/dist/components/details.css +1 -1
  5. package/dist/components/field.css +4 -4
  6. package/dist/components/filter-group.css +3 -3
  7. package/dist/components/input.css +6 -6
  8. package/dist/components/link.css +2 -2
  9. package/dist/components/popover.css +32 -0
  10. package/dist/components/tabs.css +4 -4
  11. package/dist/components.css +63 -31
  12. package/dist/salesforce.css +63 -31
  13. package/package.json +2 -2
package/dist/components/button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bi-button {
2
2
  --bic-button-box-shadow: none;
3
- --bic-button-icon-size: var(--bi-scale-6x);
3
+ --bic-button-icon-size: var(--bi-icon-medium);
4
4
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
5
5
  --bic-button-size: var(--bi-scale-11x);
6
6
  --bic-button-font-size: 1rem;
@@ -51,7 +51,7 @@
51
51
 
52
52
  .bi-button[data-dark="true"] {
53
53
  --bic-button-focus-shadow-color: var(--bi-neutral-95);
54
- --bic-button-focus-outline-color: var(--bi-secondary-50);
54
+ --bic-button-focus-outline-color: var(--bi-primary-30);
55
55
  }
56
56
 
57
57
  .bi-button:focus-visible {
@@ -68,13 +68,13 @@
68
68
  --bic-button-font-size: .875rem;
69
69
  --bic-button-line-height: 1.25rem;
70
70
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
71
- --bic-button-icon-size: var(--bi-scale-4x);
71
+ --bic-button-icon-size: var(--bi-icon-small);
72
72
  --bic-button-size: var(--bi-scale-8x);
73
73
  }
74
74
 
75
75
  .bi-button[data-size="large"] {
76
76
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
77
- --bic-button-icon-size: var(--bi-scale-8x);
77
+ --bic-button-icon-size: var(--bi-icon-large);
78
78
  --bic-button-size: var(--bi-scale-14x);
79
79
  }
80
80
 
package/dist/components/card.css CHANGED
@@ -41,7 +41,7 @@
41
41
  --bic-card-actions-icon-color: var(--bi-neutral-10);
42
42
  --bic-card-border-hover-color: var(--bi-neutral-25);
43
43
  --bic-card-box-shadow-hover-color: #b2cdf40d;
44
- --bic-card-box-shadow-focus-color: var(--bi-secondary-50);
44
+ --bic-card-box-shadow-focus-color: var(--bi-primary-30);
45
45
  --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
46
46
  --bic-card-box-shadow-focus-outer-border: 4.5px;
47
47
  --bic-card-box-shadow-focus-inner-border: 4px;
@@ -138,7 +138,7 @@
138
138
  --bic-card-actions-icon-color: var(--bi-primary-10);
139
139
  --bic-card-border-hover-color: var(--bi-primary-40);
140
140
  --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
141
- --bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
141
+ --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
142
142
  --bic-card-border-active-color: var(--bi-primary-10);
143
143
  }
144
144
 
package/dist/components/chip.css CHANGED
@@ -39,7 +39,7 @@
39
39
 
40
40
  .bi-chip[data-dark="true"] {
41
41
  --bic-chip-focus-inner: var(--bi-neutral-95);
42
- --bic-chip-focus-outer: var(--bi-secondary-50);
42
+ --bic-chip-focus-outer: var(--bi-primary-30);
43
43
  --bic-chip-background-hover: var(--bi-states-hover-light);
44
44
  --bic-chip-background-press: var(--bi-states-press-light);
45
45
  }
@@ -190,7 +190,7 @@
190
190
 
191
191
  .bi-chip:-webkit-any(button):focus-visible {
192
192
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
193
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
193
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
194
194
  outline-offset: var(--_bi--focus, 2px);
195
195
  }
196
196
 
@@ -212,7 +212,7 @@
212
212
 
213
213
  .bi-chip:is(button):focus-visible {
214
214
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
215
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
215
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
216
216
  outline-offset: var(--_bi--focus, 2px);
217
217
  }
218
218
 
@@ -234,7 +234,7 @@
234
234
 
235
235
  .bi-chip:-webkit-any(a):focus-visible {
236
236
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
237
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
237
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
238
238
  outline-offset: var(--_bi--focus, 2px);
239
239
  }
240
240
 
@@ -256,7 +256,7 @@
256
256
 
257
257
  .bi-chip:is(a):focus-visible {
258
258
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
259
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
259
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
260
260
  outline-offset: var(--_bi--focus, 2px);
261
261
  }
262
262
 
package/dist/components/details.css CHANGED
@@ -16,7 +16,7 @@ details.bi-details[data-dark="true"] {
16
16
  --bic-details-border-color: var(--bi-neutral-70);
17
17
  --bic-details-color: var(--bi-basic-white);
18
18
  --bic-details-focus-shadow-color: var(--bi-neutral-95);
19
- --bic-details-focus-outline-color: var(--bi-secondary-50);
19
+ --bic-details-focus-outline-color: var(--bi-primary-30);
20
20
  }
21
21
 
22
22
  details.bi-details {
package/dist/components/field.css CHANGED
@@ -29,7 +29,7 @@
29
29
  --bic-field-description-color: var(--bi-neutral-15);
30
30
  --bic-field-label-color: var(--bi-basic-white);
31
31
  --bic-field-label-required-color: var(--bi-secondary-50);
32
- --bic-field-focus-outline-color: var(--bi-secondary-50);
32
+ --bic-field-focus-outline-color: var(--bi-primary-30);
33
33
  --bic-field-focus-shadow-color: var(--bi-neutral-95);
34
34
  }
35
35
 
@@ -131,7 +131,7 @@
131
131
 
132
132
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
133
133
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
134
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
134
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
135
135
  outline-offset: var(--_bi--focus, 2px);
136
136
  }
137
137
 
@@ -206,7 +206,7 @@
206
206
 
207
207
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
208
208
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
209
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
209
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
210
210
  outline-offset: var(--_bi--focus, 2px);
211
211
  }
212
212
 
@@ -253,7 +253,7 @@
253
253
  }
254
254
 
255
255
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
256
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
256
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
257
257
  outline-offset: 0;
258
258
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
259
259
  }
package/dist/components/filter-group.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --bic-filter-group-border-color: var(--bi-neutral-70);
18
18
  --bic-filter-group-text-color: var(--bi-basic-white);
19
19
  --bic-filter-focus-shadow-color: var(--bi-neutral-95);
20
- --bic-filter-focus-outline-color: var(--bi-secondary-50);
20
+ --bic-filter-focus-outline-color: var(--bi-primary-30);
21
21
  }
22
22
 
23
23
  .bi-filter-group {
@@ -55,8 +55,8 @@
55
55
 
56
56
  .bi-filter-group > button:focus-visible {
57
57
  box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
58
- outline: var(--bi-stroke-thick) solid var(--bic-filter-focus-outline-color);
59
- outline-offset: 2px;
58
+ outline: 3px solid var(--bic-filter-focus-outline-color);
59
+ outline-offset: 3px;
60
60
  border-radius: var(--bi-radius-small);
61
61
  }
62
62
 
package/dist/components/input.css CHANGED
@@ -35,7 +35,7 @@
35
35
  --bic-input-color: var(--bi-basic-white);
36
36
  --bic-input-disabled-color: var(--bi-neutral-40);
37
37
  --bic-input-placeholder-color: var(--bi-neutral-30);
38
- --bic-input-focus-outline-color: var(--bi-secondary-50);
38
+ --bic-input-focus-outline-color: var(--bi-primary-30);
39
39
  --bic-input-focus-shadow-color: var(--bi-neutral-95);
40
40
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
41
41
  }
@@ -75,7 +75,7 @@
75
75
  }
76
76
 
77
77
  .bi-input:focus-visible {
78
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
78
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
79
79
  outline-offset: 0;
80
80
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
81
81
  }
@@ -179,8 +179,8 @@
179
179
 
180
180
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
181
181
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
182
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
183
- outline-offset: var(--_bi--focus, 2px);
182
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
183
+ outline-offset: var(--_bi--focus, 3px);
184
184
  }
185
185
 
186
186
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
@@ -272,8 +272,8 @@
272
272
 
273
273
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
274
274
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
275
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
276
- outline-offset: var(--_bi--focus, 2px);
275
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
276
+ outline-offset: var(--_bi--focus, 3px);
277
277
  }
278
278
 
279
279
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
package/dist/components/link.css CHANGED
@@ -31,7 +31,7 @@
31
31
  --bic-link-color-hover: var(--bi-primary-30);
32
32
  --bic-link-color: var(--bi-primary-40);
33
33
  --bic-link-focus-shadow-color: var(--bi-neutral-95);
34
- --bic-link-focus-outline-color: var(--bi-secondary-50);
34
+ --bic-link-focus-outline-color: var(--bi-primary-30);
35
35
  }
36
36
 
37
37
  .bi-link[data-color="neutral"] {
@@ -65,7 +65,7 @@
65
65
 
66
66
  .bi-link:focus-visible {
67
67
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
68
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-link-focus-outline-color));
68
+ outline: var(--_bi--focus, 3px solid var(--bic-link-focus-outline-color));
69
69
  outline-offset: var(--_bi--focus, 2px);
70
70
  border-radius: var(--bi-radius-small);
71
71
  }
package/dist/components/popover.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .bi-popover {
2
+ --bic-popover-arrow-size: var(--bi-scale-3x);
2
3
  --bic-popover-background: var(--bi-basic-white);
3
4
  --bic-popover-border-width: var(--bi-stroke-thin);
4
5
  --bic-popover-border-style: solid;
@@ -42,6 +43,37 @@
42
43
  display: block;
43
44
  }
44
45
 
46
+ .bi-popover[data-arrow="true"]:before {
47
+ background: var(--bic-popover-background);
48
+ border: inherit;
49
+ box-sizing: border-box;
50
+ content: "";
51
+ height: var(--bic-popover-arrow-size);
52
+ left: var(--bic-popover-arrow-x);
53
+ top: var(--bic-popover-arrow-y);
54
+ width: var(--bic-popover-arrow-size);
55
+ border-top-color: #0000;
56
+ border-left-color: #0000;
57
+ position: absolute;
58
+ translate: -50% -50%;
59
+ }
60
+
61
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
62
+ rotate: 45deg;
63
+ }
64
+
65
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
66
+ rotate: -45deg;
67
+ }
68
+
69
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
70
+ rotate: 135deg;
71
+ }
72
+
73
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
74
+ rotate: -135deg;
75
+ }
76
+
45
77
  [data-popover="inline"] {
46
78
  all: unset;
47
79
  cursor: pointer;
package/dist/components/tabs.css CHANGED
@@ -8,7 +8,7 @@
8
8
  .bi-tabs[data-dark="true"] {
9
9
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
10
10
  --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
11
- --bic-tabs-focus-outline-color: var(--bi-secondary-50);
11
+ --bic-tabs-focus-outline-color: var(--bi-primary-30);
12
12
  }
13
13
 
14
14
  .bi-tabs {
@@ -46,12 +46,12 @@
46
46
 
47
47
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
48
48
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
49
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-tabs-focus-outline-color));
50
- outline-offset: var(--_bi--focus, -2px);
49
+ outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
50
+ outline-offset: var(--_bi--focus, -3px);
51
51
  }
52
52
 
53
53
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible:after {
54
- bottom: 2px;
54
+ bottom: 3px;
55
55
  }
56
56
 
57
57
  .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
package/dist/components.css CHANGED
@@ -341,7 +341,7 @@
341
341
 
342
342
  .bi-button {
343
343
  --bic-button-box-shadow: none;
344
- --bic-button-icon-size: var(--bi-scale-6x);
344
+ --bic-button-icon-size: var(--bi-icon-medium);
345
345
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
346
346
  --bic-button-size: var(--bi-scale-11x);
347
347
  --bic-button-font-size: 1rem;
@@ -392,7 +392,7 @@
392
392
 
393
393
  .bi-button[data-dark="true"] {
394
394
  --bic-button-focus-shadow-color: var(--bi-neutral-95);
395
- --bic-button-focus-outline-color: var(--bi-secondary-50);
395
+ --bic-button-focus-outline-color: var(--bi-primary-30);
396
396
  }
397
397
 
398
398
  .bi-button:focus-visible {
@@ -409,13 +409,13 @@
409
409
  --bic-button-font-size: .875rem;
410
410
  --bic-button-line-height: 1.25rem;
411
411
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
412
- --bic-button-icon-size: var(--bi-scale-4x);
412
+ --bic-button-icon-size: var(--bi-icon-small);
413
413
  --bic-button-size: var(--bi-scale-8x);
414
414
  }
415
415
 
416
416
  .bi-button[data-size="large"] {
417
417
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
418
- --bic-button-icon-size: var(--bi-scale-8x);
418
+ --bic-button-icon-size: var(--bi-icon-large);
419
419
  --bic-button-size: var(--bi-scale-14x);
420
420
  }
421
421
 
@@ -565,7 +565,7 @@
565
565
  --bic-card-actions-icon-color: var(--bi-neutral-10);
566
566
  --bic-card-border-hover-color: var(--bi-neutral-25);
567
567
  --bic-card-box-shadow-hover-color: #b2cdf40d;
568
- --bic-card-box-shadow-focus-color: var(--bi-secondary-50);
568
+ --bic-card-box-shadow-focus-color: var(--bi-primary-30);
569
569
  --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
570
570
  --bic-card-box-shadow-focus-outer-border: 4.5px;
571
571
  --bic-card-box-shadow-focus-inner-border: 4px;
@@ -662,7 +662,7 @@
662
662
  --bic-card-actions-icon-color: var(--bi-primary-10);
663
663
  --bic-card-border-hover-color: var(--bi-primary-40);
664
664
  --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
665
- --bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
665
+ --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
666
666
  --bic-card-border-active-color: var(--bi-primary-10);
667
667
  }
668
668
 
@@ -1051,7 +1051,7 @@
1051
1051
 
1052
1052
  .bi-chip[data-dark="true"] {
1053
1053
  --bic-chip-focus-inner: var(--bi-neutral-95);
1054
- --bic-chip-focus-outer: var(--bi-secondary-50);
1054
+ --bic-chip-focus-outer: var(--bi-primary-30);
1055
1055
  --bic-chip-background-hover: var(--bi-states-hover-light);
1056
1056
  --bic-chip-background-press: var(--bi-states-press-light);
1057
1057
  }
@@ -1202,7 +1202,7 @@
1202
1202
 
1203
1203
  .bi-chip:-webkit-any(button):focus-visible {
1204
1204
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1205
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1205
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1206
1206
  outline-offset: var(--_bi--focus, 2px);
1207
1207
  }
1208
1208
 
@@ -1224,7 +1224,7 @@
1224
1224
 
1225
1225
  .bi-chip:is(button):focus-visible {
1226
1226
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1227
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1227
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1228
1228
  outline-offset: var(--_bi--focus, 2px);
1229
1229
  }
1230
1230
 
@@ -1246,7 +1246,7 @@
1246
1246
 
1247
1247
  .bi-chip:-webkit-any(a):focus-visible {
1248
1248
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1249
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1249
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1250
1250
  outline-offset: var(--_bi--focus, 2px);
1251
1251
  }
1252
1252
 
@@ -1268,7 +1268,7 @@
1268
1268
 
1269
1269
  .bi-chip:is(a):focus-visible {
1270
1270
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1271
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1271
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1272
1272
  outline-offset: var(--_bi--focus, 2px);
1273
1273
  }
1274
1274
 
@@ -1305,7 +1305,7 @@ details.bi-details[data-dark="true"] {
1305
1305
  --bic-details-border-color: var(--bi-neutral-70);
1306
1306
  --bic-details-color: var(--bi-basic-white);
1307
1307
  --bic-details-focus-shadow-color: var(--bi-neutral-95);
1308
- --bic-details-focus-outline-color: var(--bi-secondary-50);
1308
+ --bic-details-focus-outline-color: var(--bi-primary-30);
1309
1309
  }
1310
1310
 
1311
1311
  details.bi-details {
@@ -1752,7 +1752,7 @@ body:has(.bi-dialog:modal) {
1752
1752
  --bic-field-description-color: var(--bi-neutral-15);
1753
1753
  --bic-field-label-color: var(--bi-basic-white);
1754
1754
  --bic-field-label-required-color: var(--bi-secondary-50);
1755
- --bic-field-focus-outline-color: var(--bi-secondary-50);
1755
+ --bic-field-focus-outline-color: var(--bi-primary-30);
1756
1756
  --bic-field-focus-shadow-color: var(--bi-neutral-95);
1757
1757
  }
1758
1758
 
@@ -1854,7 +1854,7 @@ body:has(.bi-dialog:modal) {
1854
1854
 
1855
1855
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
1856
1856
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1857
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
1857
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1858
1858
  outline-offset: var(--_bi--focus, 2px);
1859
1859
  }
1860
1860
 
@@ -1929,7 +1929,7 @@ body:has(.bi-dialog:modal) {
1929
1929
 
1930
1930
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
1931
1931
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
1932
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
1932
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1933
1933
  outline-offset: var(--_bi--focus, 2px);
1934
1934
  }
1935
1935
 
@@ -1976,7 +1976,7 @@ body:has(.bi-dialog:modal) {
1976
1976
  }
1977
1977
 
1978
1978
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
1979
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
1979
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
1980
1980
  outline-offset: 0;
1981
1981
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
1982
1982
  }
@@ -2101,7 +2101,7 @@ body:has(.bi-dialog:modal) {
2101
2101
  --bic-filter-group-border-color: var(--bi-neutral-70);
2102
2102
  --bic-filter-group-text-color: var(--bi-basic-white);
2103
2103
  --bic-filter-focus-shadow-color: var(--bi-neutral-95);
2104
- --bic-filter-focus-outline-color: var(--bi-secondary-50);
2104
+ --bic-filter-focus-outline-color: var(--bi-primary-30);
2105
2105
  }
2106
2106
 
2107
2107
  .bi-filter-group {
@@ -2139,8 +2139,8 @@ body:has(.bi-dialog:modal) {
2139
2139
 
2140
2140
  .bi-filter-group > button:focus-visible {
2141
2141
  box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
2142
- outline: var(--bi-stroke-thick) solid var(--bic-filter-focus-outline-color);
2143
- outline-offset: 2px;
2142
+ outline: 3px solid var(--bic-filter-focus-outline-color);
2143
+ outline-offset: 3px;
2144
2144
  border-radius: var(--bi-radius-small);
2145
2145
  }
2146
2146
 
@@ -2450,7 +2450,7 @@ svg[data-color="white"] {
2450
2450
  --bic-input-color: var(--bi-basic-white);
2451
2451
  --bic-input-disabled-color: var(--bi-neutral-40);
2452
2452
  --bic-input-placeholder-color: var(--bi-neutral-30);
2453
- --bic-input-focus-outline-color: var(--bi-secondary-50);
2453
+ --bic-input-focus-outline-color: var(--bi-primary-30);
2454
2454
  --bic-input-focus-shadow-color: var(--bi-neutral-95);
2455
2455
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2456
2456
  }
@@ -2490,7 +2490,7 @@ svg[data-color="white"] {
2490
2490
  }
2491
2491
 
2492
2492
  .bi-input:focus-visible {
2493
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2493
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2494
2494
  outline-offset: 0;
2495
2495
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2496
2496
  }
@@ -2594,8 +2594,8 @@ svg[data-color="white"] {
2594
2594
 
2595
2595
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2596
2596
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2597
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2598
- outline-offset: var(--_bi--focus, 2px);
2597
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2598
+ outline-offset: var(--_bi--focus, 3px);
2599
2599
  }
2600
2600
 
2601
2601
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
@@ -2687,8 +2687,8 @@ svg[data-color="white"] {
2687
2687
 
2688
2688
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2689
2689
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2690
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2691
- outline-offset: var(--_bi--focus, 2px);
2690
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2691
+ outline-offset: var(--_bi--focus, 3px);
2692
2692
  }
2693
2693
 
2694
2694
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
@@ -2841,7 +2841,7 @@ svg[data-color="white"] {
2841
2841
  --bic-link-color-hover: var(--bi-primary-30);
2842
2842
  --bic-link-color: var(--bi-primary-40);
2843
2843
  --bic-link-focus-shadow-color: var(--bi-neutral-95);
2844
- --bic-link-focus-outline-color: var(--bi-secondary-50);
2844
+ --bic-link-focus-outline-color: var(--bi-primary-30);
2845
2845
  }
2846
2846
 
2847
2847
  .bi-link[data-color="neutral"] {
@@ -2875,7 +2875,7 @@ svg[data-color="white"] {
2875
2875
 
2876
2876
  .bi-link:focus-visible {
2877
2877
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
2878
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-link-focus-outline-color));
2878
+ outline: var(--_bi--focus, 3px solid var(--bic-link-focus-outline-color));
2879
2879
  outline-offset: var(--_bi--focus, 2px);
2880
2880
  border-radius: var(--bi-radius-small);
2881
2881
  }
@@ -3109,6 +3109,7 @@ svg[data-color="white"] {
3109
3109
  }
3110
3110
 
3111
3111
  .bi-popover {
3112
+ --bic-popover-arrow-size: var(--bi-scale-3x);
3112
3113
  --bic-popover-background: var(--bi-basic-white);
3113
3114
  --bic-popover-border-width: var(--bi-stroke-thin);
3114
3115
  --bic-popover-border-style: solid;
@@ -3152,6 +3153,37 @@ svg[data-color="white"] {
3152
3153
  display: block;
3153
3154
  }
3154
3155
 
3156
+ .bi-popover[data-arrow="true"]:before {
3157
+ background: var(--bic-popover-background);
3158
+ border: inherit;
3159
+ box-sizing: border-box;
3160
+ content: "";
3161
+ height: var(--bic-popover-arrow-size);
3162
+ left: var(--bic-popover-arrow-x);
3163
+ top: var(--bic-popover-arrow-y);
3164
+ width: var(--bic-popover-arrow-size);
3165
+ border-top-color: #0000;
3166
+ border-left-color: #0000;
3167
+ position: absolute;
3168
+ translate: -50% -50%;
3169
+ }
3170
+
3171
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
3172
+ rotate: 45deg;
3173
+ }
3174
+
3175
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
3176
+ rotate: -45deg;
3177
+ }
3178
+
3179
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
3180
+ rotate: 135deg;
3181
+ }
3182
+
3183
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3184
+ rotate: -135deg;
3185
+ }
3186
+
3155
3187
  [data-popover="inline"] {
3156
3188
  all: unset;
3157
3189
  cursor: pointer;
@@ -3288,7 +3320,7 @@ svg[data-color="white"] {
3288
3320
  .bi-tabs[data-dark="true"] {
3289
3321
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
3290
3322
  --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
3291
- --bic-tabs-focus-outline-color: var(--bi-secondary-50);
3323
+ --bic-tabs-focus-outline-color: var(--bi-primary-30);
3292
3324
  }
3293
3325
 
3294
3326
  .bi-tabs {
@@ -3326,12 +3358,12 @@ svg[data-color="white"] {
3326
3358
 
3327
3359
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
3328
3360
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3329
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-tabs-focus-outline-color));
3330
- outline-offset: var(--_bi--focus, -2px);
3361
+ outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
3362
+ outline-offset: var(--_bi--focus, -3px);
3331
3363
  }
3332
3364
 
3333
3365
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible:after {
3334
- bottom: 2px;
3366
+ bottom: 3px;
3335
3367
  }
3336
3368
 
3337
3369
  .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
package/dist/salesforce.css CHANGED
@@ -567,7 +567,7 @@
567
567
 
568
568
  .bi-button {
569
569
  --bic-button-box-shadow: none;
570
- --bic-button-icon-size: var(--bi-scale-6x);
570
+ --bic-button-icon-size: var(--bi-icon-medium);
571
571
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
572
572
  --bic-button-size: var(--bi-scale-11x);
573
573
  --bic-button-font-size: 1rem;
@@ -618,7 +618,7 @@
618
618
 
619
619
  .bi-button[data-dark="true"] {
620
620
  --bic-button-focus-shadow-color: var(--bi-neutral-95);
621
- --bic-button-focus-outline-color: var(--bi-secondary-50);
621
+ --bic-button-focus-outline-color: var(--bi-primary-30);
622
622
  }
623
623
 
624
624
  .bi-button:focus-visible {
@@ -635,13 +635,13 @@
635
635
  --bic-button-font-size: .875rem;
636
636
  --bic-button-line-height: 1.25rem;
637
637
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
638
- --bic-button-icon-size: var(--bi-scale-4x);
638
+ --bic-button-icon-size: var(--bi-icon-small);
639
639
  --bic-button-size: var(--bi-scale-8x);
640
640
  }
641
641
 
642
642
  .bi-button[data-size="large"] {
643
643
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
644
- --bic-button-icon-size: var(--bi-scale-8x);
644
+ --bic-button-icon-size: var(--bi-icon-large);
645
645
  --bic-button-size: var(--bi-scale-14x);
646
646
  }
647
647
 
@@ -791,7 +791,7 @@
791
791
  --bic-card-actions-icon-color: var(--bi-neutral-10);
792
792
  --bic-card-border-hover-color: var(--bi-neutral-25);
793
793
  --bic-card-box-shadow-hover-color: #b2cdf40d;
794
- --bic-card-box-shadow-focus-color: var(--bi-secondary-50);
794
+ --bic-card-box-shadow-focus-color: var(--bi-primary-30);
795
795
  --bic-card-box-shadow-focus-background-color: var(--bi-neutral-95);
796
796
  --bic-card-box-shadow-focus-outer-border: 4.5px;
797
797
  --bic-card-box-shadow-focus-inner-border: 4px;
@@ -888,7 +888,7 @@
888
888
  --bic-card-actions-icon-color: var(--bi-primary-10);
889
889
  --bic-card-border-hover-color: var(--bi-primary-40);
890
890
  --bic-card-box-shadow-focus-color: var(--bi-neutral-15);
891
- --bic-card-box-shadow-focus-background-color: var(--bi-secondary-50);
891
+ --bic-card-box-shadow-focus-background-color: var(--bi-primary-30);
892
892
  --bic-card-border-active-color: var(--bi-primary-10);
893
893
  }
894
894
 
@@ -1277,7 +1277,7 @@
1277
1277
 
1278
1278
  .bi-chip[data-dark="true"] {
1279
1279
  --bic-chip-focus-inner: var(--bi-neutral-95);
1280
- --bic-chip-focus-outer: var(--bi-secondary-50);
1280
+ --bic-chip-focus-outer: var(--bi-primary-30);
1281
1281
  --bic-chip-background-hover: var(--bi-states-hover-light);
1282
1282
  --bic-chip-background-press: var(--bi-states-press-light);
1283
1283
  }
@@ -1428,7 +1428,7 @@
1428
1428
 
1429
1429
  .bi-chip:-webkit-any(button):focus-visible {
1430
1430
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1431
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1431
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1432
1432
  outline-offset: var(--_bi--focus, 2px);
1433
1433
  }
1434
1434
 
@@ -1450,7 +1450,7 @@
1450
1450
 
1451
1451
  .bi-chip:is(button):focus-visible {
1452
1452
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1453
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1453
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1454
1454
  outline-offset: var(--_bi--focus, 2px);
1455
1455
  }
1456
1456
 
@@ -1472,7 +1472,7 @@
1472
1472
 
1473
1473
  .bi-chip:-webkit-any(a):focus-visible {
1474
1474
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1475
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1475
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1476
1476
  outline-offset: var(--_bi--focus, 2px);
1477
1477
  }
1478
1478
 
@@ -1494,7 +1494,7 @@
1494
1494
 
1495
1495
  .bi-chip:is(a):focus-visible {
1496
1496
  box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
1497
- outline: var(--_bi--focus, 1.5px solid var(--bic-chip-focus-outer));
1497
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
1498
1498
  outline-offset: var(--_bi--focus, 2px);
1499
1499
  }
1500
1500
 
@@ -1531,7 +1531,7 @@ details.bi-details[data-dark="true"] {
1531
1531
  --bic-details-border-color: var(--bi-neutral-70);
1532
1532
  --bic-details-color: var(--bi-basic-white);
1533
1533
  --bic-details-focus-shadow-color: var(--bi-neutral-95);
1534
- --bic-details-focus-outline-color: var(--bi-secondary-50);
1534
+ --bic-details-focus-outline-color: var(--bi-primary-30);
1535
1535
  }
1536
1536
 
1537
1537
  details.bi-details {
@@ -1978,7 +1978,7 @@ body:has(.bi-dialog:modal) {
1978
1978
  --bic-field-description-color: var(--bi-neutral-15);
1979
1979
  --bic-field-label-color: var(--bi-basic-white);
1980
1980
  --bic-field-label-required-color: var(--bi-secondary-50);
1981
- --bic-field-focus-outline-color: var(--bi-secondary-50);
1981
+ --bic-field-focus-outline-color: var(--bi-primary-30);
1982
1982
  --bic-field-focus-shadow-color: var(--bi-neutral-95);
1983
1983
  }
1984
1984
 
@@ -2080,7 +2080,7 @@ body:has(.bi-dialog:modal) {
2080
2080
 
2081
2081
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2082
2082
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2083
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
2083
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2084
2084
  outline-offset: var(--_bi--focus, 2px);
2085
2085
  }
2086
2086
 
@@ -2155,7 +2155,7 @@ body:has(.bi-dialog:modal) {
2155
2155
 
2156
2156
  .bi-field:has(.bi-input:is([type="radio"], [type="checkbox"])):has(.bi-input:focus-visible) {
2157
2157
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-field-focus-shadow-color));
2158
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
2158
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2159
2159
  outline-offset: var(--_bi--focus, 2px);
2160
2160
  }
2161
2161
 
@@ -2202,7 +2202,7 @@ body:has(.bi-dialog:modal) {
2202
2202
  }
2203
2203
 
2204
2204
  .bi-field .bi-field--affixes:has(.bi-input:focus-visible) {
2205
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-field-focus-outline-color));
2205
+ outline: var(--_bi--focus, 3px solid var(--bic-field-focus-outline-color));
2206
2206
  outline-offset: 0;
2207
2207
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2208
2208
  }
@@ -2327,7 +2327,7 @@ body:has(.bi-dialog:modal) {
2327
2327
  --bic-filter-group-border-color: var(--bi-neutral-70);
2328
2328
  --bic-filter-group-text-color: var(--bi-basic-white);
2329
2329
  --bic-filter-focus-shadow-color: var(--bi-neutral-95);
2330
- --bic-filter-focus-outline-color: var(--bi-secondary-50);
2330
+ --bic-filter-focus-outline-color: var(--bi-primary-30);
2331
2331
  }
2332
2332
 
2333
2333
  .bi-filter-group {
@@ -2365,8 +2365,8 @@ body:has(.bi-dialog:modal) {
2365
2365
 
2366
2366
  .bi-filter-group > button:focus-visible {
2367
2367
  box-shadow: 0 0 0 4.5px var(--bic-filter-focus-shadow-color);
2368
- outline: var(--bi-stroke-thick) solid var(--bic-filter-focus-outline-color);
2369
- outline-offset: 2px;
2368
+ outline: 3px solid var(--bic-filter-focus-outline-color);
2369
+ outline-offset: 3px;
2370
2370
  border-radius: var(--bi-radius-small);
2371
2371
  }
2372
2372
 
@@ -2676,7 +2676,7 @@ svg[data-color="white"] {
2676
2676
  --bic-input-color: var(--bi-basic-white);
2677
2677
  --bic-input-disabled-color: var(--bi-neutral-40);
2678
2678
  --bic-input-placeholder-color: var(--bi-neutral-30);
2679
- --bic-input-focus-outline-color: var(--bi-secondary-50);
2679
+ --bic-input-focus-outline-color: var(--bi-primary-30);
2680
2680
  --bic-input-focus-shadow-color: var(--bi-neutral-95);
2681
2681
  --bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
2682
2682
  }
@@ -2716,7 +2716,7 @@ svg[data-color="white"] {
2716
2716
  }
2717
2717
 
2718
2718
  .bi-input:focus-visible {
2719
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2719
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2720
2720
  outline-offset: 0;
2721
2721
  box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d);
2722
2722
  }
@@ -2820,8 +2820,8 @@ svg[data-color="white"] {
2820
2820
 
2821
2821
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible {
2822
2822
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2823
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2824
- outline-offset: var(--_bi--focus, 2px);
2823
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2824
+ outline-offset: var(--_bi--focus, 3px);
2825
2825
  }
2826
2826
 
2827
2827
  .bi-input:-webkit-any([type="checkbox"], [type="radio"]):focus-visible * {
@@ -2913,8 +2913,8 @@ svg[data-color="white"] {
2913
2913
 
2914
2914
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible {
2915
2915
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
2916
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-input-focus-outline-color));
2917
- outline-offset: var(--_bi--focus, 2px);
2916
+ outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
2917
+ outline-offset: var(--_bi--focus, 3px);
2918
2918
  }
2919
2919
 
2920
2920
  .bi-input:is([type="checkbox"], [type="radio"]):focus-visible * {
@@ -3067,7 +3067,7 @@ svg[data-color="white"] {
3067
3067
  --bic-link-color-hover: var(--bi-primary-30);
3068
3068
  --bic-link-color: var(--bi-primary-40);
3069
3069
  --bic-link-focus-shadow-color: var(--bi-neutral-95);
3070
- --bic-link-focus-outline-color: var(--bi-secondary-50);
3070
+ --bic-link-focus-outline-color: var(--bi-primary-30);
3071
3071
  }
3072
3072
 
3073
3073
  .bi-link[data-color="neutral"] {
@@ -3101,7 +3101,7 @@ svg[data-color="white"] {
3101
3101
 
3102
3102
  .bi-link:focus-visible {
3103
3103
  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-link-focus-shadow-color), var(--bic-button-box-shadow));
3104
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-link-focus-outline-color));
3104
+ outline: var(--_bi--focus, 3px solid var(--bic-link-focus-outline-color));
3105
3105
  outline-offset: var(--_bi--focus, 2px);
3106
3106
  border-radius: var(--bi-radius-small);
3107
3107
  }
@@ -3335,6 +3335,7 @@ svg[data-color="white"] {
3335
3335
  }
3336
3336
 
3337
3337
  .bi-popover {
3338
+ --bic-popover-arrow-size: var(--bi-scale-3x);
3338
3339
  --bic-popover-background: var(--bi-basic-white);
3339
3340
  --bic-popover-border-width: var(--bi-stroke-thin);
3340
3341
  --bic-popover-border-style: solid;
@@ -3378,6 +3379,37 @@ svg[data-color="white"] {
3378
3379
  display: block;
3379
3380
  }
3380
3381
 
3382
+ .bi-popover[data-arrow="true"]:before {
3383
+ background: var(--bic-popover-background);
3384
+ border: inherit;
3385
+ box-sizing: border-box;
3386
+ content: "";
3387
+ height: var(--bic-popover-arrow-size);
3388
+ left: var(--bic-popover-arrow-x);
3389
+ top: var(--bic-popover-arrow-y);
3390
+ width: var(--bic-popover-arrow-size);
3391
+ border-top-color: #0000;
3392
+ border-left-color: #0000;
3393
+ position: absolute;
3394
+ translate: -50% -50%;
3395
+ }
3396
+
3397
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
3398
+ rotate: 45deg;
3399
+ }
3400
+
3401
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
3402
+ rotate: -45deg;
3403
+ }
3404
+
3405
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
3406
+ rotate: 135deg;
3407
+ }
3408
+
3409
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3410
+ rotate: -135deg;
3411
+ }
3412
+
3381
3413
  [data-popover="inline"] {
3382
3414
  all: unset;
3383
3415
  cursor: pointer;
@@ -3514,7 +3546,7 @@ svg[data-color="white"] {
3514
3546
  .bi-tabs[data-dark="true"] {
3515
3547
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
3516
3548
  --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
3517
- --bic-tabs-focus-outline-color: var(--bi-secondary-50);
3549
+ --bic-tabs-focus-outline-color: var(--bi-primary-30);
3518
3550
  }
3519
3551
 
3520
3552
  .bi-tabs {
@@ -3552,12 +3584,12 @@ svg[data-color="white"] {
3552
3584
 
3553
3585
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
3554
3586
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3555
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-tabs-focus-outline-color));
3556
- outline-offset: var(--_bi--focus, -2px);
3587
+ outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
3588
+ outline-offset: var(--_bi--focus, -3px);
3557
3589
  }
3558
3590
 
3559
3591
  .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible:after {
3560
- bottom: 2px;
3592
+ bottom: 3px;
3561
3593
  }
3562
3594
 
3563
3595
  .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.6.5",
4
+ "version": "0.6.7",
5
5
  "engines": {
6
6
  "node": "^20.19.0 || >=22.12.0"
7
7
  },
@@ -35,7 +35,7 @@
35
35
  "lightningcss": "^1.30.2",
36
36
  "modern-normalize": "^3.0.1",
37
37
  "rimraf": "^6.1.0",
38
- "@bi-digital/tokens": "0.6.5"
38
+ "@bi-digital/tokens": "0.6.7"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf dist && node config.js",