@bi-digital/css 0.9.0 → 0.11.0

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 (7) hide show
  1. package/dist/components/button.css +2 -2
  2. package/dist/components/dialog.css +81 -4
  3. package/dist/components/tabs.css +54 -17
  4. package/dist/components.css +129 -104
  5. package/dist/salesforce.css +129 -104
  6. package/package.json +5 -7
  7. package/dist/components/drawer.css +0 -88
package/dist/components/button.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --bic-button-size: var(--bi-scale-11x);
6
6
  --bic-button-font-size: 1rem;
7
7
  --bic-button-line-height: 1.5;
8
- --bic-button-color: 1.5rem;
8
+ --bic-button-color: var(--bi-basic-white);
9
9
  --bic-button-background: transparent;
10
10
  --bic-button-background-hover: transparent;
11
11
  --bic-button-background-press: transparent;
@@ -46,7 +46,7 @@
46
46
  --bic-button-focus-outline-color: var(--bi-primary-30);
47
47
  }
48
48
 
49
- .bi-button[data-fullwidth="true"], .bi-button[data-stretch="true"] {
49
+ .bi-button[data-fullwidth="true"] {
50
50
  width: 100%;
51
51
  }
52
52
 
package/dist/components/dialog.css CHANGED
@@ -1,7 +1,13 @@
1
1
  .bi-dialog {
2
+ --bic-dialog-anchor-inline-min-width: 23.5rem;
3
+ --bic-dialog-anchor-inline-max-width: 40rem;
4
+ --bic-dialog-anchor-block-min-height: 20rem;
5
+ --bic-dialog-anchor-border-radius: var(--bi-radius-medium);
6
+ --bic-dialog-anchor-closed-translate: 0, var(--bi-scale-12x);
2
7
  --bic-dialog-animation-duration: .2s;
3
8
  --bic-dialog-backdrop-background: #00000080;
4
9
  --bic-dialog-background: var(--bi-basic-white);
10
+ --bic-dialog-border-radius: var(--bi-radius-large);
5
11
  --bic-dialog-border-color: var(--bi-neutral-15);
6
12
  --bic-dialog-icon-spacing: .625rem;
7
13
  --bic-dialog-color: var(--bi-neutral-90);
@@ -19,7 +25,7 @@
19
25
  .bi-dialog {
20
26
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
21
27
  background: var(--bic-dialog-background);
22
- border-radius: var(--bi-radius-large);
28
+ border-radius: var(--bic-dialog-border-radius);
23
29
  box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
24
30
  color: var(--bic-dialog-color);
25
31
  max-height: var(--bic-dialog-max-height);
@@ -45,13 +51,68 @@
45
51
  display: flex;
46
52
  }
47
53
 
54
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
55
+ --bic-dialog-max-height: unset;
56
+ border-radius: var(--bic-dialog-anchor-border-radius);
57
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
58
+ overlay var(--bic-dialog-animation-duration) allow-discrete;
59
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
60
+ animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
61
+ }
62
+
63
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"])[open] {
64
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
65
+ transform: translate(0);
66
+ }
67
+
68
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"]) {
69
+ min-height: var(--bic-dialog-anchor-block-min-height);
70
+ max-height: calc(100dvh - var(--bi-layout-navbar-height));
71
+ max-width: 100dvw;
72
+ }
73
+
74
+ .bi-dialog:where([data-anchor="left"], [data-anchor="right"]) {
75
+ min-width: var(--bic-dialog-anchor-inline-min-width);
76
+ max-width: var(--bic-dialog-anchor-inline-max-width);
77
+ width: fit-content;
78
+ height: 100dvh;
79
+ }
80
+
81
+ .bi-dialog[data-anchor="bottom"] {
82
+ --bic-dialog-anchor-closed-translate: 0, 100%;
83
+ border-bottom-right-radius: 0;
84
+ border-bottom-left-radius: 0;
85
+ top: auto;
86
+ }
87
+
88
+ .bi-dialog[data-anchor="top"] {
89
+ --bic-dialog-anchor-closed-translate: 0, -100%;
90
+ border-top-left-radius: 0;
91
+ border-top-right-radius: 0;
92
+ bottom: auto;
93
+ }
94
+
95
+ .bi-dialog[data-anchor="left"] {
96
+ --bic-dialog-anchor-closed-translate: -100%, 0;
97
+ border-top-left-radius: 0;
98
+ border-bottom-left-radius: 0;
99
+ right: auto;
100
+ }
101
+
102
+ .bi-dialog[data-anchor="right"] {
103
+ --bic-dialog-anchor-closed-translate: 100%, 0;
104
+ border-top-right-radius: 0;
105
+ border-bottom-right-radius: 0;
106
+ left: auto;
107
+ }
108
+
48
109
  @media (prefers-reduced-motion: reduce) {
49
110
  .bi-dialog[open], .bi-dialog::backdrop {
50
111
  animation: none;
51
112
  }
52
113
  }
53
114
 
54
- .bi-dialog > form[method="dialog"]:first-child > button:only-child {
115
+ .bi-dialog > button[command="close"]:first-child {
55
116
  top: var(--bic-dialog-icon-spacing);
56
117
  right: var(--bic-dialog-icon-spacing);
57
118
  position: absolute;
@@ -66,7 +127,7 @@
66
127
  display: flex;
67
128
  }
68
129
 
69
- .bi-dialog:has( > form[method="dialog"]) .bi-dialog--header {
130
+ .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
70
131
  padding-right: var(--bi-scale-14x);
71
132
  }
72
133
 
@@ -95,7 +156,23 @@ body:has(.bi-dialog:modal) {
95
156
 
96
157
  @keyframes bi-dialog-slide-in-animation {
97
158
  from {
98
- translate: 0 var(--bi-scale-12x);
159
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
160
+ }
161
+
162
+ to {
163
+ transform: translate(0);
164
+ }
165
+ }
166
+
167
+ @keyframes bi-dialog-slide-out-animation {
168
+ from {
169
+ opacity: 1;
170
+ transform: translate(0);
171
+ }
172
+
173
+ to {
174
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
175
+ opacity: 0;
99
176
  }
100
177
  }
101
178
 
package/dist/components/tabs.css CHANGED
@@ -1,5 +1,9 @@
1
1
  .bi-tabs {
2
+ --bic-tabs-tab-color: var(--bi-neutral-90);
2
3
  --bic-tabs-tab-color-selected: var(--bi-primary-50);
4
+ --bic-tabs-tab-background-hover: var(--bi-states-hover-dark);
5
+ --bic-tabs-tab-background-press: var(--bi-states-press-dark);
6
+ --bic-tabs-tab-font: var(--bi-font-title-bold-xs);
3
7
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
4
8
  --bic-tabs-focus-shadow-color: var(--bi-basic-white);
5
9
  --bic-tabs-focus-outline-color: var(--bi-primary-50);
@@ -7,6 +11,8 @@
7
11
 
8
12
  .bi-tabs[data-dark="true"] {
9
13
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
14
+ --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
15
+ --bic-tabs-tab-background-press: var(--bi-states-press-light);
10
16
  --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
11
17
  --bic-tabs-focus-outline-color: var(--bi-primary-30);
12
18
  }
@@ -17,43 +23,74 @@
17
23
  overflow: hidden;
18
24
  }
19
25
 
20
- .bi-tabs .bi-tabs--list {
26
+ .bi-tabs :is([role="tablist"], ds-tablist) {
21
27
  scrollbar-width: none;
22
28
  flex-direction: row;
23
29
  flex-shrink: 0;
24
- display: flex;
25
30
  position: relative;
26
31
  overflow-x: auto;
27
32
  }
28
33
 
29
- .bi-tabs .bi-tabs--list[data-orientation="vertical"] {
30
- overflow-y: auto;
31
- overflow-x: unset;
32
- flex-direction: column;
33
- width: fit-content;
34
+ .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
35
+ display: flex;
34
36
  }
35
37
 
36
- .bi-tabs .bi-tabs--list .bi-tabs--tab {
38
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
39
+ font: var(--bic-tabs-tab-font);
40
+ border-radius: var(--bi-radius-medium);
41
+ box-sizing: border-box;
42
+ color: var(--bic-tabs-tab-color);
43
+ cursor: pointer;
44
+ align-items: center;
45
+ gap: var(--bi-scale-1x);
46
+ padding: .625rem var(--bi-scale-6x);
47
+ text-align: center;
37
48
  white-space: nowrap;
49
+ background: none;
50
+ border: 0;
51
+ flex-direction: row;
52
+ justify-content: center;
53
+ margin: 0;
54
+ line-height: 1.5;
38
55
  transition: color .2s ease-in-out;
56
+ position: relative;
57
+ }
58
+
59
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
60
+ display: flex;
39
61
  }
40
62
 
41
- .bi-tabs .bi-tabs--list .bi-tabs--tab:not(:focus-visible) {
63
+ @media (hover: hover) and (pointer: fine) {
64
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
65
+ background: var(--bic-tabs-tab-background-hover);
66
+ }
67
+ }
68
+
69
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
70
+ background: var(--bic-tabs-tab-background-press);
71
+ }
72
+
73
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
42
74
  border-bottom-right-radius: 0;
43
75
  border-bottom-left-radius: 0;
44
76
  }
45
77
 
46
- .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
78
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
47
79
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
48
80
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
49
81
  outline-offset: var(--_bi--focus, -3px);
50
82
  }
51
83
 
52
- .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible:after {
84
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
53
85
  bottom: 3px;
54
86
  }
55
87
 
56
- .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
88
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
89
+ font-size: var(--bi-icon-medium);
90
+ flex-shrink: 0;
91
+ }
92
+
93
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
57
94
  background: var(--bic-tabs-tab-color-selected);
58
95
  content: "";
59
96
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -68,24 +105,24 @@
68
105
  }
69
106
 
70
107
  @media (prefers-reduced-motion: reduce) {
71
- .bi-tabs .bi-tabs--list .bi-tabs--tab {
108
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
72
109
  transition: none;
73
110
  }
74
111
 
75
- .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
112
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
76
113
  transition: none;
77
114
  }
78
115
  }
79
116
 
80
- .bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"] {
117
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
81
118
  color: var(--bic-tabs-tab-color-selected);
82
119
  }
83
120
 
84
- .bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"]:after {
121
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
85
122
  width: calc(100% - var(--bi-scale-6x));
86
123
  }
87
124
 
88
- .bi-tabs .bi-tabs--panel {
125
+ .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
89
126
  padding: var(--bic-tabs-panel-padding);
90
127
  outline: none;
91
128
  flex-grow: 1;
package/dist/components.css CHANGED
@@ -337,7 +337,7 @@
337
337
  --bic-button-size: var(--bi-scale-11x);
338
338
  --bic-button-font-size: 1rem;
339
339
  --bic-button-line-height: 1.5;
340
- --bic-button-color: 1.5rem;
340
+ --bic-button-color: var(--bi-basic-white);
341
341
  --bic-button-background: transparent;
342
342
  --bic-button-background-hover: transparent;
343
343
  --bic-button-background-press: transparent;
@@ -378,7 +378,7 @@
378
378
  --bic-button-focus-outline-color: var(--bi-primary-30);
379
379
  }
380
380
 
381
- .bi-button[data-fullwidth="true"], .bi-button[data-stretch="true"] {
381
+ .bi-button[data-fullwidth="true"] {
382
382
  width: 100%;
383
383
  }
384
384
 
@@ -1228,9 +1228,15 @@ details.bi-details > *:not(summary) + * {
1228
1228
  }
1229
1229
 
1230
1230
  .bi-dialog {
1231
+ --bic-dialog-anchor-inline-min-width: 23.5rem;
1232
+ --bic-dialog-anchor-inline-max-width: 40rem;
1233
+ --bic-dialog-anchor-block-min-height: 20rem;
1234
+ --bic-dialog-anchor-border-radius: var(--bi-radius-medium);
1235
+ --bic-dialog-anchor-closed-translate: 0, var(--bi-scale-12x);
1231
1236
  --bic-dialog-animation-duration: .2s;
1232
1237
  --bic-dialog-backdrop-background: #00000080;
1233
1238
  --bic-dialog-background: var(--bi-basic-white);
1239
+ --bic-dialog-border-radius: var(--bi-radius-large);
1234
1240
  --bic-dialog-border-color: var(--bi-neutral-15);
1235
1241
  --bic-dialog-icon-spacing: .625rem;
1236
1242
  --bic-dialog-color: var(--bi-neutral-90);
@@ -1248,7 +1254,7 @@ details.bi-details > *:not(summary) + * {
1248
1254
  .bi-dialog {
1249
1255
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
1250
1256
  background: var(--bic-dialog-background);
1251
- border-radius: var(--bi-radius-large);
1257
+ border-radius: var(--bic-dialog-border-radius);
1252
1258
  box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
1253
1259
  color: var(--bic-dialog-color);
1254
1260
  max-height: var(--bic-dialog-max-height);
@@ -1274,13 +1280,68 @@ details.bi-details > *:not(summary) + * {
1274
1280
  display: flex;
1275
1281
  }
1276
1282
 
1283
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
1284
+ --bic-dialog-max-height: unset;
1285
+ border-radius: var(--bic-dialog-anchor-border-radius);
1286
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
1287
+ overlay var(--bic-dialog-animation-duration) allow-discrete;
1288
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
1289
+ animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1290
+ }
1291
+
1292
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"])[open] {
1293
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1294
+ transform: translate(0);
1295
+ }
1296
+
1297
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"]) {
1298
+ min-height: var(--bic-dialog-anchor-block-min-height);
1299
+ max-height: calc(100dvh - var(--bi-layout-navbar-height));
1300
+ max-width: 100dvw;
1301
+ }
1302
+
1303
+ .bi-dialog:where([data-anchor="left"], [data-anchor="right"]) {
1304
+ min-width: var(--bic-dialog-anchor-inline-min-width);
1305
+ max-width: var(--bic-dialog-anchor-inline-max-width);
1306
+ width: fit-content;
1307
+ height: 100dvh;
1308
+ }
1309
+
1310
+ .bi-dialog[data-anchor="bottom"] {
1311
+ --bic-dialog-anchor-closed-translate: 0, 100%;
1312
+ border-bottom-right-radius: 0;
1313
+ border-bottom-left-radius: 0;
1314
+ top: auto;
1315
+ }
1316
+
1317
+ .bi-dialog[data-anchor="top"] {
1318
+ --bic-dialog-anchor-closed-translate: 0, -100%;
1319
+ border-top-left-radius: 0;
1320
+ border-top-right-radius: 0;
1321
+ bottom: auto;
1322
+ }
1323
+
1324
+ .bi-dialog[data-anchor="left"] {
1325
+ --bic-dialog-anchor-closed-translate: -100%, 0;
1326
+ border-top-left-radius: 0;
1327
+ border-bottom-left-radius: 0;
1328
+ right: auto;
1329
+ }
1330
+
1331
+ .bi-dialog[data-anchor="right"] {
1332
+ --bic-dialog-anchor-closed-translate: 100%, 0;
1333
+ border-top-right-radius: 0;
1334
+ border-bottom-right-radius: 0;
1335
+ left: auto;
1336
+ }
1337
+
1277
1338
  @media (prefers-reduced-motion: reduce) {
1278
1339
  .bi-dialog[open], .bi-dialog::backdrop {
1279
1340
  animation: none;
1280
1341
  }
1281
1342
  }
1282
1343
 
1283
- .bi-dialog > form[method="dialog"]:first-child > button:only-child {
1344
+ .bi-dialog > button[command="close"]:first-child {
1284
1345
  top: var(--bic-dialog-icon-spacing);
1285
1346
  right: var(--bic-dialog-icon-spacing);
1286
1347
  position: absolute;
@@ -1295,7 +1356,7 @@ details.bi-details > *:not(summary) + * {
1295
1356
  display: flex;
1296
1357
  }
1297
1358
 
1298
- .bi-dialog:has( > form[method="dialog"]) .bi-dialog--header {
1359
+ .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
1299
1360
  padding-right: var(--bi-scale-14x);
1300
1361
  }
1301
1362
 
@@ -1324,86 +1385,7 @@ body:has(.bi-dialog:modal) {
1324
1385
 
1325
1386
  @keyframes bi-dialog-slide-in-animation {
1326
1387
  from {
1327
- translate: 0 var(--bi-scale-12x);
1328
- }
1329
- }
1330
-
1331
- @keyframes bi-dialog-fade-in-animation {
1332
- from {
1333
- opacity: 0;
1334
- }
1335
- }
1336
-
1337
- .bi-dialog.bi-drawer {
1338
- --bic-dialog-max-height: unset;
1339
- --bic-drawer-closed-translate-x: 0;
1340
- --bic-drawer-closed-translate-y: 0;
1341
- --bic-drawer-min-width: 23.5rem;
1342
- --bic-drawer-max-width: 40rem;
1343
- --bic-drawer-min-height: 20rem;
1344
- --bic-drawer-border-radius: var(--bi-radius-medium);
1345
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
1346
- overlay var(--bic-dialog-animation-duration) allow-discrete;
1347
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1348
- animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1349
- }
1350
-
1351
- .bi-dialog.bi-drawer[open] {
1352
- animation: bi-drawer-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1353
- transform: translate(0);
1354
- }
1355
-
1356
- @media (prefers-reduced-motion: reduce) {
1357
- .bi-dialog.bi-drawer {
1358
- transition: none;
1359
- }
1360
-
1361
- .bi-dialog.bi-drawer[open] {
1362
- animation: none;
1363
- }
1364
- }
1365
-
1366
- .bi-dialog.bi-drawer[data-anchor="left"] {
1367
- --bic-drawer-closed-translate-x: -100%;
1368
- right: unset;
1369
- border-radius: 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0;
1370
- }
1371
-
1372
- .bi-dialog.bi-drawer[data-anchor="right"] {
1373
- --bic-drawer-closed-translate-x: 100%;
1374
- left: unset;
1375
- border-radius: var(--bic-drawer-border-radius) 0 0 var(--bic-drawer-border-radius);
1376
- }
1377
-
1378
- .bi-dialog.bi-drawer[data-anchor="top"] {
1379
- --bic-drawer-closed-translate-y: -100%;
1380
- bottom: unset;
1381
- border-radius: 0 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius);
1382
- }
1383
-
1384
- .bi-dialog.bi-drawer[data-anchor="bottom"] {
1385
- --bic-drawer-closed-translate-y: 100%;
1386
- top: unset;
1387
- border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
1388
- }
1389
-
1390
- .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
1391
- min-width: var(--bic-drawer-min-width);
1392
- max-width: var(--bic-drawer-max-width);
1393
- width: fit-content;
1394
- height: 100dvh;
1395
- }
1396
-
1397
- .bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
1398
- min-height: var(--bic-drawer-min-height);
1399
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
1400
- width: 100%;
1401
- max-width: 100dvw;
1402
- }
1403
-
1404
- @keyframes bi-drawer-slide-in-animation {
1405
- from {
1406
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1388
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
1407
1389
  }
1408
1390
 
1409
1391
  to {
@@ -1411,14 +1393,20 @@ body:has(.bi-dialog:modal) {
1411
1393
  }
1412
1394
  }
1413
1395
 
1414
- @keyframes bi-drawer-slide-out-animation {
1396
+ @keyframes bi-dialog-slide-out-animation {
1415
1397
  from {
1416
1398
  opacity: 1;
1417
1399
  transform: translate(0);
1418
1400
  }
1419
1401
 
1420
1402
  to {
1421
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1403
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
1404
+ opacity: 0;
1405
+ }
1406
+ }
1407
+
1408
+ @keyframes bi-dialog-fade-in-animation {
1409
+ from {
1422
1410
  opacity: 0;
1423
1411
  }
1424
1412
  }
@@ -2781,7 +2769,11 @@ svg[data-color="white"] {
2781
2769
  }
2782
2770
 
2783
2771
  .bi-tabs {
2772
+ --bic-tabs-tab-color: var(--bi-neutral-90);
2784
2773
  --bic-tabs-tab-color-selected: var(--bi-primary-50);
2774
+ --bic-tabs-tab-background-hover: var(--bi-states-hover-dark);
2775
+ --bic-tabs-tab-background-press: var(--bi-states-press-dark);
2776
+ --bic-tabs-tab-font: var(--bi-font-title-bold-xs);
2785
2777
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
2786
2778
  --bic-tabs-focus-shadow-color: var(--bi-basic-white);
2787
2779
  --bic-tabs-focus-outline-color: var(--bi-primary-50);
@@ -2789,6 +2781,8 @@ svg[data-color="white"] {
2789
2781
 
2790
2782
  .bi-tabs[data-dark="true"] {
2791
2783
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
2784
+ --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
2785
+ --bic-tabs-tab-background-press: var(--bi-states-press-light);
2792
2786
  --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
2793
2787
  --bic-tabs-focus-outline-color: var(--bi-primary-30);
2794
2788
  }
@@ -2799,43 +2793,74 @@ svg[data-color="white"] {
2799
2793
  overflow: hidden;
2800
2794
  }
2801
2795
 
2802
- .bi-tabs .bi-tabs--list {
2796
+ .bi-tabs :is([role="tablist"], ds-tablist) {
2803
2797
  scrollbar-width: none;
2804
2798
  flex-direction: row;
2805
2799
  flex-shrink: 0;
2806
- display: flex;
2807
2800
  position: relative;
2808
2801
  overflow-x: auto;
2809
2802
  }
2810
2803
 
2811
- .bi-tabs .bi-tabs--list[data-orientation="vertical"] {
2812
- overflow-y: auto;
2813
- overflow-x: unset;
2814
- flex-direction: column;
2815
- width: fit-content;
2804
+ .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
2805
+ display: flex;
2816
2806
  }
2817
2807
 
2818
- .bi-tabs .bi-tabs--list .bi-tabs--tab {
2808
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
2809
+ font: var(--bic-tabs-tab-font);
2810
+ border-radius: var(--bi-radius-medium);
2811
+ box-sizing: border-box;
2812
+ color: var(--bic-tabs-tab-color);
2813
+ cursor: pointer;
2814
+ align-items: center;
2815
+ gap: var(--bi-scale-1x);
2816
+ padding: .625rem var(--bi-scale-6x);
2817
+ text-align: center;
2819
2818
  white-space: nowrap;
2819
+ background: none;
2820
+ border: 0;
2821
+ flex-direction: row;
2822
+ justify-content: center;
2823
+ margin: 0;
2824
+ line-height: 1.5;
2820
2825
  transition: color .2s ease-in-out;
2826
+ position: relative;
2821
2827
  }
2822
2828
 
2823
- .bi-tabs .bi-tabs--list .bi-tabs--tab:not(:focus-visible) {
2829
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
2830
+ display: flex;
2831
+ }
2832
+
2833
+ @media (hover: hover) and (pointer: fine) {
2834
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
2835
+ background: var(--bic-tabs-tab-background-hover);
2836
+ }
2837
+ }
2838
+
2839
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
2840
+ background: var(--bic-tabs-tab-background-press);
2841
+ }
2842
+
2843
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
2824
2844
  border-bottom-right-radius: 0;
2825
2845
  border-bottom-left-radius: 0;
2826
2846
  }
2827
2847
 
2828
- .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
2848
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
2829
2849
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
2830
2850
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
2831
2851
  outline-offset: var(--_bi--focus, -3px);
2832
2852
  }
2833
2853
 
2834
- .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible:after {
2854
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
2835
2855
  bottom: 3px;
2836
2856
  }
2837
2857
 
2838
- .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
2858
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
2859
+ font-size: var(--bi-icon-medium);
2860
+ flex-shrink: 0;
2861
+ }
2862
+
2863
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
2839
2864
  background: var(--bic-tabs-tab-color-selected);
2840
2865
  content: "";
2841
2866
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2850,24 +2875,24 @@ svg[data-color="white"] {
2850
2875
  }
2851
2876
 
2852
2877
  @media (prefers-reduced-motion: reduce) {
2853
- .bi-tabs .bi-tabs--list .bi-tabs--tab {
2878
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
2854
2879
  transition: none;
2855
2880
  }
2856
2881
 
2857
- .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
2882
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
2858
2883
  transition: none;
2859
2884
  }
2860
2885
  }
2861
2886
 
2862
- .bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"] {
2887
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
2863
2888
  color: var(--bic-tabs-tab-color-selected);
2864
2889
  }
2865
2890
 
2866
- .bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"]:after {
2891
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
2867
2892
  width: calc(100% - var(--bi-scale-6x));
2868
2893
  }
2869
2894
 
2870
- .bi-tabs .bi-tabs--panel {
2895
+ .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
2871
2896
  padding: var(--bic-tabs-panel-padding);
2872
2897
  outline: none;
2873
2898
  flex-grow: 1;
package/dist/salesforce.css CHANGED
@@ -563,7 +563,7 @@
563
563
  --bic-button-size: var(--bi-scale-11x);
564
564
  --bic-button-font-size: 1rem;
565
565
  --bic-button-line-height: 1.5;
566
- --bic-button-color: 1.5rem;
566
+ --bic-button-color: var(--bi-basic-white);
567
567
  --bic-button-background: transparent;
568
568
  --bic-button-background-hover: transparent;
569
569
  --bic-button-background-press: transparent;
@@ -604,7 +604,7 @@
604
604
  --bic-button-focus-outline-color: var(--bi-primary-30);
605
605
  }
606
606
 
607
- .bi-button[data-fullwidth="true"], .bi-button[data-stretch="true"] {
607
+ .bi-button[data-fullwidth="true"] {
608
608
  width: 100%;
609
609
  }
610
610
 
@@ -1454,9 +1454,15 @@ details.bi-details > *:not(summary) + * {
1454
1454
  }
1455
1455
 
1456
1456
  .bi-dialog {
1457
+ --bic-dialog-anchor-inline-min-width: 23.5rem;
1458
+ --bic-dialog-anchor-inline-max-width: 40rem;
1459
+ --bic-dialog-anchor-block-min-height: 20rem;
1460
+ --bic-dialog-anchor-border-radius: var(--bi-radius-medium);
1461
+ --bic-dialog-anchor-closed-translate: 0, var(--bi-scale-12x);
1457
1462
  --bic-dialog-animation-duration: .2s;
1458
1463
  --bic-dialog-backdrop-background: #00000080;
1459
1464
  --bic-dialog-background: var(--bi-basic-white);
1465
+ --bic-dialog-border-radius: var(--bi-radius-large);
1460
1466
  --bic-dialog-border-color: var(--bi-neutral-15);
1461
1467
  --bic-dialog-icon-spacing: .625rem;
1462
1468
  --bic-dialog-color: var(--bi-neutral-90);
@@ -1474,7 +1480,7 @@ details.bi-details > *:not(summary) + * {
1474
1480
  .bi-dialog {
1475
1481
  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
1476
1482
  background: var(--bic-dialog-background);
1477
- border-radius: var(--bi-radius-large);
1483
+ border-radius: var(--bic-dialog-border-radius);
1478
1484
  box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
1479
1485
  color: var(--bic-dialog-color);
1480
1486
  max-height: var(--bic-dialog-max-height);
@@ -1500,13 +1506,68 @@ details.bi-details > *:not(summary) + * {
1500
1506
  display: flex;
1501
1507
  }
1502
1508
 
1509
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"]) {
1510
+ --bic-dialog-max-height: unset;
1511
+ border-radius: var(--bic-dialog-anchor-border-radius);
1512
+ transition: display var(--bic-dialog-animation-duration) allow-discrete,
1513
+ overlay var(--bic-dialog-animation-duration) allow-discrete;
1514
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
1515
+ animation: bi-dialog-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1516
+ }
1517
+
1518
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"], [data-anchor="left"], [data-anchor="right"])[open] {
1519
+ animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1520
+ transform: translate(0);
1521
+ }
1522
+
1523
+ .bi-dialog:where([data-anchor="bottom"], [data-anchor="top"]) {
1524
+ min-height: var(--bic-dialog-anchor-block-min-height);
1525
+ max-height: calc(100dvh - var(--bi-layout-navbar-height));
1526
+ max-width: 100dvw;
1527
+ }
1528
+
1529
+ .bi-dialog:where([data-anchor="left"], [data-anchor="right"]) {
1530
+ min-width: var(--bic-dialog-anchor-inline-min-width);
1531
+ max-width: var(--bic-dialog-anchor-inline-max-width);
1532
+ width: fit-content;
1533
+ height: 100dvh;
1534
+ }
1535
+
1536
+ .bi-dialog[data-anchor="bottom"] {
1537
+ --bic-dialog-anchor-closed-translate: 0, 100%;
1538
+ border-bottom-right-radius: 0;
1539
+ border-bottom-left-radius: 0;
1540
+ top: auto;
1541
+ }
1542
+
1543
+ .bi-dialog[data-anchor="top"] {
1544
+ --bic-dialog-anchor-closed-translate: 0, -100%;
1545
+ border-top-left-radius: 0;
1546
+ border-top-right-radius: 0;
1547
+ bottom: auto;
1548
+ }
1549
+
1550
+ .bi-dialog[data-anchor="left"] {
1551
+ --bic-dialog-anchor-closed-translate: -100%, 0;
1552
+ border-top-left-radius: 0;
1553
+ border-bottom-left-radius: 0;
1554
+ right: auto;
1555
+ }
1556
+
1557
+ .bi-dialog[data-anchor="right"] {
1558
+ --bic-dialog-anchor-closed-translate: 100%, 0;
1559
+ border-top-right-radius: 0;
1560
+ border-bottom-right-radius: 0;
1561
+ left: auto;
1562
+ }
1563
+
1503
1564
  @media (prefers-reduced-motion: reduce) {
1504
1565
  .bi-dialog[open], .bi-dialog::backdrop {
1505
1566
  animation: none;
1506
1567
  }
1507
1568
  }
1508
1569
 
1509
- .bi-dialog > form[method="dialog"]:first-child > button:only-child {
1570
+ .bi-dialog > button[command="close"]:first-child {
1510
1571
  top: var(--bic-dialog-icon-spacing);
1511
1572
  right: var(--bic-dialog-icon-spacing);
1512
1573
  position: absolute;
@@ -1521,7 +1582,7 @@ details.bi-details > *:not(summary) + * {
1521
1582
  display: flex;
1522
1583
  }
1523
1584
 
1524
- .bi-dialog:has( > form[method="dialog"]) .bi-dialog--header {
1585
+ .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
1525
1586
  padding-right: var(--bi-scale-14x);
1526
1587
  }
1527
1588
 
@@ -1550,86 +1611,7 @@ body:has(.bi-dialog:modal) {
1550
1611
 
1551
1612
  @keyframes bi-dialog-slide-in-animation {
1552
1613
  from {
1553
- translate: 0 var(--bi-scale-12x);
1554
- }
1555
- }
1556
-
1557
- @keyframes bi-dialog-fade-in-animation {
1558
- from {
1559
- opacity: 0;
1560
- }
1561
- }
1562
-
1563
- .bi-dialog.bi-drawer {
1564
- --bic-dialog-max-height: unset;
1565
- --bic-drawer-closed-translate-x: 0;
1566
- --bic-drawer-closed-translate-y: 0;
1567
- --bic-drawer-min-width: 23.5rem;
1568
- --bic-drawer-max-width: 40rem;
1569
- --bic-drawer-min-height: 20rem;
1570
- --bic-drawer-border-radius: var(--bi-radius-medium);
1571
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
1572
- overlay var(--bic-dialog-animation-duration) allow-discrete;
1573
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1574
- animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1575
- }
1576
-
1577
- .bi-dialog.bi-drawer[open] {
1578
- animation: bi-drawer-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1579
- transform: translate(0);
1580
- }
1581
-
1582
- @media (prefers-reduced-motion: reduce) {
1583
- .bi-dialog.bi-drawer {
1584
- transition: none;
1585
- }
1586
-
1587
- .bi-dialog.bi-drawer[open] {
1588
- animation: none;
1589
- }
1590
- }
1591
-
1592
- .bi-dialog.bi-drawer[data-anchor="left"] {
1593
- --bic-drawer-closed-translate-x: -100%;
1594
- right: unset;
1595
- border-radius: 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0;
1596
- }
1597
-
1598
- .bi-dialog.bi-drawer[data-anchor="right"] {
1599
- --bic-drawer-closed-translate-x: 100%;
1600
- left: unset;
1601
- border-radius: var(--bic-drawer-border-radius) 0 0 var(--bic-drawer-border-radius);
1602
- }
1603
-
1604
- .bi-dialog.bi-drawer[data-anchor="top"] {
1605
- --bic-drawer-closed-translate-y: -100%;
1606
- bottom: unset;
1607
- border-radius: 0 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius);
1608
- }
1609
-
1610
- .bi-dialog.bi-drawer[data-anchor="bottom"] {
1611
- --bic-drawer-closed-translate-y: 100%;
1612
- top: unset;
1613
- border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
1614
- }
1615
-
1616
- .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
1617
- min-width: var(--bic-drawer-min-width);
1618
- max-width: var(--bic-drawer-max-width);
1619
- width: fit-content;
1620
- height: 100dvh;
1621
- }
1622
-
1623
- .bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
1624
- min-height: var(--bic-drawer-min-height);
1625
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
1626
- width: 100%;
1627
- max-width: 100dvw;
1628
- }
1629
-
1630
- @keyframes bi-drawer-slide-in-animation {
1631
- from {
1632
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1614
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
1633
1615
  }
1634
1616
 
1635
1617
  to {
@@ -1637,14 +1619,20 @@ body:has(.bi-dialog:modal) {
1637
1619
  }
1638
1620
  }
1639
1621
 
1640
- @keyframes bi-drawer-slide-out-animation {
1622
+ @keyframes bi-dialog-slide-out-animation {
1641
1623
  from {
1642
1624
  opacity: 1;
1643
1625
  transform: translate(0);
1644
1626
  }
1645
1627
 
1646
1628
  to {
1647
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1629
+ transform: translate(var(--bic-dialog-anchor-closed-translate));
1630
+ opacity: 0;
1631
+ }
1632
+ }
1633
+
1634
+ @keyframes bi-dialog-fade-in-animation {
1635
+ from {
1648
1636
  opacity: 0;
1649
1637
  }
1650
1638
  }
@@ -3007,7 +2995,11 @@ svg[data-color="white"] {
3007
2995
  }
3008
2996
 
3009
2997
  .bi-tabs {
2998
+ --bic-tabs-tab-color: var(--bi-neutral-90);
3010
2999
  --bic-tabs-tab-color-selected: var(--bi-primary-50);
3000
+ --bic-tabs-tab-background-hover: var(--bi-states-hover-dark);
3001
+ --bic-tabs-tab-background-press: var(--bi-states-press-dark);
3002
+ --bic-tabs-tab-font: var(--bi-font-title-bold-xs);
3011
3003
  --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
3012
3004
  --bic-tabs-focus-shadow-color: var(--bi-basic-white);
3013
3005
  --bic-tabs-focus-outline-color: var(--bi-primary-50);
@@ -3015,6 +3007,8 @@ svg[data-color="white"] {
3015
3007
 
3016
3008
  .bi-tabs[data-dark="true"] {
3017
3009
  --bic-tabs-tab-color-selected: var(--bi-primary-30);
3010
+ --bic-tabs-tab-background-hover: var(--bi-states-hover-light);
3011
+ --bic-tabs-tab-background-press: var(--bi-states-press-light);
3018
3012
  --bic-tabs-focus-shadow-color: var(--bi-neutral-95);
3019
3013
  --bic-tabs-focus-outline-color: var(--bi-primary-30);
3020
3014
  }
@@ -3025,43 +3019,74 @@ svg[data-color="white"] {
3025
3019
  overflow: hidden;
3026
3020
  }
3027
3021
 
3028
- .bi-tabs .bi-tabs--list {
3022
+ .bi-tabs :is([role="tablist"], ds-tablist) {
3029
3023
  scrollbar-width: none;
3030
3024
  flex-direction: row;
3031
3025
  flex-shrink: 0;
3032
- display: flex;
3033
3026
  position: relative;
3034
3027
  overflow-x: auto;
3035
3028
  }
3036
3029
 
3037
- .bi-tabs .bi-tabs--list[data-orientation="vertical"] {
3038
- overflow-y: auto;
3039
- overflow-x: unset;
3040
- flex-direction: column;
3041
- width: fit-content;
3030
+ .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
3031
+ display: flex;
3042
3032
  }
3043
3033
 
3044
- .bi-tabs .bi-tabs--list .bi-tabs--tab {
3034
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
3035
+ font: var(--bic-tabs-tab-font);
3036
+ border-radius: var(--bi-radius-medium);
3037
+ box-sizing: border-box;
3038
+ color: var(--bic-tabs-tab-color);
3039
+ cursor: pointer;
3040
+ align-items: center;
3041
+ gap: var(--bi-scale-1x);
3042
+ padding: .625rem var(--bi-scale-6x);
3043
+ text-align: center;
3045
3044
  white-space: nowrap;
3045
+ background: none;
3046
+ border: 0;
3047
+ flex-direction: row;
3048
+ justify-content: center;
3049
+ margin: 0;
3050
+ line-height: 1.5;
3046
3051
  transition: color .2s ease-in-out;
3052
+ position: relative;
3047
3053
  }
3048
3054
 
3049
- .bi-tabs .bi-tabs--list .bi-tabs--tab:not(:focus-visible) {
3055
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
3056
+ display: flex;
3057
+ }
3058
+
3059
+ @media (hover: hover) and (pointer: fine) {
3060
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
3061
+ background: var(--bic-tabs-tab-background-hover);
3062
+ }
3063
+ }
3064
+
3065
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
3066
+ background: var(--bic-tabs-tab-background-press);
3067
+ }
3068
+
3069
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
3050
3070
  border-bottom-right-radius: 0;
3051
3071
  border-bottom-left-radius: 0;
3052
3072
  }
3053
3073
 
3054
- .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible {
3074
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
3055
3075
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3056
3076
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
3057
3077
  outline-offset: var(--_bi--focus, -3px);
3058
3078
  }
3059
3079
 
3060
- .bi-tabs .bi-tabs--list .bi-tabs--tab:focus-visible:after {
3080
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
3061
3081
  bottom: 3px;
3062
3082
  }
3063
3083
 
3064
- .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
3084
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
3085
+ font-size: var(--bi-icon-medium);
3086
+ flex-shrink: 0;
3087
+ }
3088
+
3089
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
3065
3090
  background: var(--bic-tabs-tab-color-selected);
3066
3091
  content: "";
3067
3092
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -3076,24 +3101,24 @@ svg[data-color="white"] {
3076
3101
  }
3077
3102
 
3078
3103
  @media (prefers-reduced-motion: reduce) {
3079
- .bi-tabs .bi-tabs--list .bi-tabs--tab {
3104
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
3080
3105
  transition: none;
3081
3106
  }
3082
3107
 
3083
- .bi-tabs .bi-tabs--list .bi-tabs--tab:after {
3108
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
3084
3109
  transition: none;
3085
3110
  }
3086
3111
  }
3087
3112
 
3088
- .bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"] {
3113
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
3089
3114
  color: var(--bic-tabs-tab-color-selected);
3090
3115
  }
3091
3116
 
3092
- .bi-tabs .bi-tabs--list .bi-tabs--tab[data-state="active"]:after {
3117
+ .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
3093
3118
  width: calc(100% - var(--bi-scale-6x));
3094
3119
  }
3095
3120
 
3096
- .bi-tabs .bi-tabs--panel {
3121
+ .bi-tabs :is([role="tabpanel"], ds-tabpanel) {
3097
3122
  padding: var(--bic-tabs-panel-padding);
3098
3123
  outline: none;
3099
3124
  flex-grow: 1;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.9.0",
4
+ "version": "0.11.0",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -28,14 +28,12 @@
28
28
  ],
29
29
  "devDependencies": {
30
30
  "browserslist": "^4.28.1",
31
- "glob": "^13.0.5",
32
- "lightningcss": "^1.31.1",
31
+ "lightningcss": "^1.32.0",
33
32
  "modern-normalize": "^3.0.1",
34
- "rimraf": "^6.1.2",
35
- "@bi-digital/tokens": "0.9.0"
33
+ "@bi-digital/tokens": "0.11.0"
36
34
  },
37
35
  "scripts": {
38
- "build": "rimraf dist && node config.js",
39
- "dev": "rimraf dist && node --watch-path=./src config.js"
36
+ "build": "node config.js",
37
+ "dev": "node --watch-path=./src config.js"
40
38
  }
41
39
  }
package/dist/components/drawer.css DELETED
@@ -1,88 +0,0 @@
1
- .bi-dialog.bi-drawer {
2
- --bic-dialog-max-height: unset;
3
- --bic-drawer-closed-translate-x: 0;
4
- --bic-drawer-closed-translate-y: 0;
5
- --bic-drawer-min-width: 23.5rem;
6
- --bic-drawer-max-width: 40rem;
7
- --bic-drawer-min-height: 20rem;
8
- --bic-drawer-border-radius: var(--bi-radius-medium);
9
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
10
- overlay var(--bic-dialog-animation-duration) allow-discrete;
11
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
12
- animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
13
- }
14
-
15
- .bi-dialog.bi-drawer[open] {
16
- animation: bi-drawer-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
17
- transform: translate(0);
18
- }
19
-
20
- @media (prefers-reduced-motion: reduce) {
21
- .bi-dialog.bi-drawer {
22
- transition: none;
23
- }
24
-
25
- .bi-dialog.bi-drawer[open] {
26
- animation: none;
27
- }
28
- }
29
-
30
- .bi-dialog.bi-drawer[data-anchor="left"] {
31
- --bic-drawer-closed-translate-x: -100%;
32
- right: unset;
33
- border-radius: 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0;
34
- }
35
-
36
- .bi-dialog.bi-drawer[data-anchor="right"] {
37
- --bic-drawer-closed-translate-x: 100%;
38
- left: unset;
39
- border-radius: var(--bic-drawer-border-radius) 0 0 var(--bic-drawer-border-radius);
40
- }
41
-
42
- .bi-dialog.bi-drawer[data-anchor="top"] {
43
- --bic-drawer-closed-translate-y: -100%;
44
- bottom: unset;
45
- border-radius: 0 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius);
46
- }
47
-
48
- .bi-dialog.bi-drawer[data-anchor="bottom"] {
49
- --bic-drawer-closed-translate-y: 100%;
50
- top: unset;
51
- border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
52
- }
53
-
54
- .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
55
- min-width: var(--bic-drawer-min-width);
56
- max-width: var(--bic-drawer-max-width);
57
- width: fit-content;
58
- height: 100dvh;
59
- }
60
-
61
- .bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
62
- min-height: var(--bic-drawer-min-height);
63
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
64
- width: 100%;
65
- max-width: 100dvw;
66
- }
67
-
68
- @keyframes bi-drawer-slide-in-animation {
69
- from {
70
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
71
- }
72
-
73
- to {
74
- transform: translate(0);
75
- }
76
- }
77
-
78
- @keyframes bi-drawer-slide-out-animation {
79
- from {
80
- opacity: 1;
81
- transform: translate(0);
82
- }
83
-
84
- to {
85
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
86
- opacity: 0;
87
- }
88
- }