@bi-digital/css 0.10.0 → 0.11.1

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 (6) hide show
  1. package/dist/components/dialog.css +2 -2
  2. package/dist/components/tabs.css +16 -15
  3. package/dist/components.css +18 -106
  4. package/dist/salesforce.css +18 -106
  5. package/package.json +4 -6
  6. package/dist/components/drawer.css +0 -88
package/dist/components/dialog.css CHANGED
@@ -112,7 +112,7 @@
112
112
  }
113
113
  }
114
114
 
115
- .bi-dialog > button[command="close"]:first-child, .bi-dialog > form[method="dialog"]:first-child > button:only-child {
115
+ .bi-dialog > button[command="close"]:first-child {
116
116
  top: var(--bic-dialog-icon-spacing);
117
117
  right: var(--bic-dialog-icon-spacing);
118
118
  position: absolute;
@@ -127,7 +127,7 @@
127
127
  display: flex;
128
128
  }
129
129
 
130
- .bi-dialog:has( > form[method="dialog"], > button[command="close"]:first-child) .bi-dialog--header {
130
+ .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
131
131
  padding-right: var(--bi-scale-14x);
132
132
  }
133
133
 
package/dist/components/tabs.css CHANGED
@@ -23,7 +23,7 @@
23
23
  overflow: hidden;
24
24
  }
25
25
 
26
- .bi-tabs :is([role="tablist"], ds-tablist) {
26
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
27
27
  scrollbar-width: none;
28
28
  flex-direction: row;
29
29
  flex-shrink: 0;
@@ -31,11 +31,11 @@
31
31
  overflow-x: auto;
32
32
  }
33
33
 
34
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
34
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
35
35
  display: flex;
36
36
  }
37
37
 
38
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
38
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
39
39
  font: var(--bic-tabs-tab-font);
40
40
  border-radius: var(--bi-radius-medium);
41
41
  box-sizing: border-box;
@@ -52,45 +52,46 @@
52
52
  justify-content: center;
53
53
  margin: 0;
54
54
  line-height: 1.5;
55
+ text-decoration: none;
55
56
  transition: color .2s ease-in-out;
56
57
  position: relative;
57
58
  }
58
59
 
59
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
60
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
60
61
  display: flex;
61
62
  }
62
63
 
63
64
  @media (hover: hover) and (pointer: fine) {
64
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
65
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
65
66
  background: var(--bic-tabs-tab-background-hover);
66
67
  }
67
68
  }
68
69
 
69
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
70
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
70
71
  background: var(--bic-tabs-tab-background-press);
71
72
  }
72
73
 
73
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
74
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
74
75
  border-bottom-right-radius: 0;
75
76
  border-bottom-left-radius: 0;
76
77
  }
77
78
 
78
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
79
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
79
80
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
80
81
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
81
82
  outline-offset: var(--_bi--focus, -3px);
82
83
  }
83
84
 
84
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
85
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
85
86
  bottom: 3px;
86
87
  }
87
88
 
88
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
89
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
89
90
  font-size: var(--bi-icon-medium);
90
91
  flex-shrink: 0;
91
92
  }
92
93
 
93
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
94
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
94
95
  background: var(--bic-tabs-tab-color-selected);
95
96
  content: "";
96
97
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -105,20 +106,20 @@
105
106
  }
106
107
 
107
108
  @media (prefers-reduced-motion: reduce) {
108
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
109
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
109
110
  transition: none;
110
111
  }
111
112
 
112
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
113
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
113
114
  transition: none;
114
115
  }
115
116
  }
116
117
 
117
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
118
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
118
119
  color: var(--bic-tabs-tab-color-selected);
119
120
  }
120
121
 
121
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
122
+ :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
122
123
  width: calc(100% - var(--bi-scale-6x));
123
124
  }
124
125
 
package/dist/components.css CHANGED
@@ -1341,7 +1341,7 @@ details.bi-details > *:not(summary) + * {
1341
1341
  }
1342
1342
  }
1343
1343
 
1344
- .bi-dialog > button[command="close"]:first-child, .bi-dialog > form[method="dialog"]:first-child > button:only-child {
1344
+ .bi-dialog > button[command="close"]:first-child {
1345
1345
  top: var(--bic-dialog-icon-spacing);
1346
1346
  right: var(--bic-dialog-icon-spacing);
1347
1347
  position: absolute;
@@ -1356,7 +1356,7 @@ details.bi-details > *:not(summary) + * {
1356
1356
  display: flex;
1357
1357
  }
1358
1358
 
1359
- .bi-dialog:has( > form[method="dialog"], > button[command="close"]:first-child) .bi-dialog--header {
1359
+ .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
1360
1360
  padding-right: var(--bi-scale-14x);
1361
1361
  }
1362
1362
 
@@ -1411,95 +1411,6 @@ body:has(.bi-dialog:modal) {
1411
1411
  }
1412
1412
  }
1413
1413
 
1414
- .bi-dialog.bi-drawer {
1415
- --bic-dialog-max-height: unset;
1416
- --bic-drawer-closed-translate-x: 0;
1417
- --bic-drawer-closed-translate-y: 0;
1418
- --bic-drawer-min-width: 23.5rem;
1419
- --bic-drawer-max-width: 40rem;
1420
- --bic-drawer-min-height: 20rem;
1421
- --bic-drawer-border-radius: var(--bi-radius-medium);
1422
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
1423
- overlay var(--bic-dialog-animation-duration) allow-discrete;
1424
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1425
- animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1426
- }
1427
-
1428
- .bi-dialog.bi-drawer[open] {
1429
- animation: bi-drawer-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1430
- transform: translate(0);
1431
- }
1432
-
1433
- @media (prefers-reduced-motion: reduce) {
1434
- .bi-dialog.bi-drawer {
1435
- transition: none;
1436
- }
1437
-
1438
- .bi-dialog.bi-drawer[open] {
1439
- animation: none;
1440
- }
1441
- }
1442
-
1443
- .bi-dialog.bi-drawer[data-anchor="left"] {
1444
- --bic-drawer-closed-translate-x: -100%;
1445
- right: unset;
1446
- border-radius: 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0;
1447
- }
1448
-
1449
- .bi-dialog.bi-drawer[data-anchor="right"] {
1450
- --bic-drawer-closed-translate-x: 100%;
1451
- left: unset;
1452
- border-radius: var(--bic-drawer-border-radius) 0 0 var(--bic-drawer-border-radius);
1453
- }
1454
-
1455
- .bi-dialog.bi-drawer[data-anchor="top"] {
1456
- --bic-drawer-closed-translate-y: -100%;
1457
- bottom: unset;
1458
- border-radius: 0 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius);
1459
- }
1460
-
1461
- .bi-dialog.bi-drawer[data-anchor="bottom"] {
1462
- --bic-drawer-closed-translate-y: 100%;
1463
- top: unset;
1464
- border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
1465
- }
1466
-
1467
- .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
1468
- min-width: var(--bic-drawer-min-width);
1469
- max-width: var(--bic-drawer-max-width);
1470
- width: fit-content;
1471
- height: 100dvh;
1472
- }
1473
-
1474
- .bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
1475
- min-height: var(--bic-drawer-min-height);
1476
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
1477
- width: 100%;
1478
- max-width: 100dvw;
1479
- }
1480
-
1481
- @keyframes bi-drawer-slide-in-animation {
1482
- from {
1483
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1484
- }
1485
-
1486
- to {
1487
- transform: translate(0);
1488
- }
1489
- }
1490
-
1491
- @keyframes bi-drawer-slide-out-animation {
1492
- from {
1493
- opacity: 1;
1494
- transform: translate(0);
1495
- }
1496
-
1497
- to {
1498
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1499
- opacity: 0;
1500
- }
1501
- }
1502
-
1503
1414
  .bi-popover {
1504
1415
  --bic-popover-arrow-size: var(--bi-scale-3x);
1505
1416
  --bic-popover-background: var(--bi-basic-white);
@@ -2882,7 +2793,7 @@ svg[data-color="white"] {
2882
2793
  overflow: hidden;
2883
2794
  }
2884
2795
 
2885
- .bi-tabs :is([role="tablist"], ds-tablist) {
2796
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
2886
2797
  scrollbar-width: none;
2887
2798
  flex-direction: row;
2888
2799
  flex-shrink: 0;
@@ -2890,11 +2801,11 @@ svg[data-color="white"] {
2890
2801
  overflow-x: auto;
2891
2802
  }
2892
2803
 
2893
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
2804
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
2894
2805
  display: flex;
2895
2806
  }
2896
2807
 
2897
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
2808
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
2898
2809
  font: var(--bic-tabs-tab-font);
2899
2810
  border-radius: var(--bi-radius-medium);
2900
2811
  box-sizing: border-box;
@@ -2911,45 +2822,46 @@ svg[data-color="white"] {
2911
2822
  justify-content: center;
2912
2823
  margin: 0;
2913
2824
  line-height: 1.5;
2825
+ text-decoration: none;
2914
2826
  transition: color .2s ease-in-out;
2915
2827
  position: relative;
2916
2828
  }
2917
2829
 
2918
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
2830
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
2919
2831
  display: flex;
2920
2832
  }
2921
2833
 
2922
2834
  @media (hover: hover) and (pointer: fine) {
2923
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
2835
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
2924
2836
  background: var(--bic-tabs-tab-background-hover);
2925
2837
  }
2926
2838
  }
2927
2839
 
2928
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
2840
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
2929
2841
  background: var(--bic-tabs-tab-background-press);
2930
2842
  }
2931
2843
 
2932
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
2844
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
2933
2845
  border-bottom-right-radius: 0;
2934
2846
  border-bottom-left-radius: 0;
2935
2847
  }
2936
2848
 
2937
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
2849
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
2938
2850
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
2939
2851
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
2940
2852
  outline-offset: var(--_bi--focus, -3px);
2941
2853
  }
2942
2854
 
2943
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
2855
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
2944
2856
  bottom: 3px;
2945
2857
  }
2946
2858
 
2947
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
2859
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
2948
2860
  font-size: var(--bi-icon-medium);
2949
2861
  flex-shrink: 0;
2950
2862
  }
2951
2863
 
2952
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
2864
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
2953
2865
  background: var(--bic-tabs-tab-color-selected);
2954
2866
  content: "";
2955
2867
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2964,20 +2876,20 @@ svg[data-color="white"] {
2964
2876
  }
2965
2877
 
2966
2878
  @media (prefers-reduced-motion: reduce) {
2967
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
2879
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
2968
2880
  transition: none;
2969
2881
  }
2970
2882
 
2971
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
2883
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
2972
2884
  transition: none;
2973
2885
  }
2974
2886
  }
2975
2887
 
2976
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
2888
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
2977
2889
  color: var(--bic-tabs-tab-color-selected);
2978
2890
  }
2979
2891
 
2980
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
2892
+ :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
2981
2893
  width: calc(100% - var(--bi-scale-6x));
2982
2894
  }
2983
2895
 
package/dist/salesforce.css CHANGED
@@ -1567,7 +1567,7 @@ details.bi-details > *:not(summary) + * {
1567
1567
  }
1568
1568
  }
1569
1569
 
1570
- .bi-dialog > button[command="close"]:first-child, .bi-dialog > form[method="dialog"]:first-child > button:only-child {
1570
+ .bi-dialog > button[command="close"]:first-child {
1571
1571
  top: var(--bic-dialog-icon-spacing);
1572
1572
  right: var(--bic-dialog-icon-spacing);
1573
1573
  position: absolute;
@@ -1582,7 +1582,7 @@ details.bi-details > *:not(summary) + * {
1582
1582
  display: flex;
1583
1583
  }
1584
1584
 
1585
- .bi-dialog:has( > form[method="dialog"], > button[command="close"]:first-child) .bi-dialog--header {
1585
+ .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
1586
1586
  padding-right: var(--bi-scale-14x);
1587
1587
  }
1588
1588
 
@@ -1637,95 +1637,6 @@ body:has(.bi-dialog:modal) {
1637
1637
  }
1638
1638
  }
1639
1639
 
1640
- .bi-dialog.bi-drawer {
1641
- --bic-dialog-max-height: unset;
1642
- --bic-drawer-closed-translate-x: 0;
1643
- --bic-drawer-closed-translate-y: 0;
1644
- --bic-drawer-min-width: 23.5rem;
1645
- --bic-drawer-max-width: 40rem;
1646
- --bic-drawer-min-height: 20rem;
1647
- --bic-drawer-border-radius: var(--bi-radius-medium);
1648
- transition: display var(--bic-dialog-animation-duration) allow-discrete,
1649
- overlay var(--bic-dialog-animation-duration) allow-discrete;
1650
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1651
- animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1652
- }
1653
-
1654
- .bi-dialog.bi-drawer[open] {
1655
- animation: bi-drawer-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
1656
- transform: translate(0);
1657
- }
1658
-
1659
- @media (prefers-reduced-motion: reduce) {
1660
- .bi-dialog.bi-drawer {
1661
- transition: none;
1662
- }
1663
-
1664
- .bi-dialog.bi-drawer[open] {
1665
- animation: none;
1666
- }
1667
- }
1668
-
1669
- .bi-dialog.bi-drawer[data-anchor="left"] {
1670
- --bic-drawer-closed-translate-x: -100%;
1671
- right: unset;
1672
- border-radius: 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0;
1673
- }
1674
-
1675
- .bi-dialog.bi-drawer[data-anchor="right"] {
1676
- --bic-drawer-closed-translate-x: 100%;
1677
- left: unset;
1678
- border-radius: var(--bic-drawer-border-radius) 0 0 var(--bic-drawer-border-radius);
1679
- }
1680
-
1681
- .bi-dialog.bi-drawer[data-anchor="top"] {
1682
- --bic-drawer-closed-translate-y: -100%;
1683
- bottom: unset;
1684
- border-radius: 0 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius);
1685
- }
1686
-
1687
- .bi-dialog.bi-drawer[data-anchor="bottom"] {
1688
- --bic-drawer-closed-translate-y: 100%;
1689
- top: unset;
1690
- border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
1691
- }
1692
-
1693
- .bi-dialog.bi-drawer[data-anchor="left"], .bi-dialog.bi-drawer[data-anchor="right"] {
1694
- min-width: var(--bic-drawer-min-width);
1695
- max-width: var(--bic-drawer-max-width);
1696
- width: fit-content;
1697
- height: 100dvh;
1698
- }
1699
-
1700
- .bi-dialog.bi-drawer[data-anchor="top"], .bi-dialog.bi-drawer[data-anchor="bottom"] {
1701
- min-height: var(--bic-drawer-min-height);
1702
- max-height: calc(100dvh - var(--bi-layout-navbar-height));
1703
- width: 100%;
1704
- max-width: 100dvw;
1705
- }
1706
-
1707
- @keyframes bi-drawer-slide-in-animation {
1708
- from {
1709
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1710
- }
1711
-
1712
- to {
1713
- transform: translate(0);
1714
- }
1715
- }
1716
-
1717
- @keyframes bi-drawer-slide-out-animation {
1718
- from {
1719
- opacity: 1;
1720
- transform: translate(0);
1721
- }
1722
-
1723
- to {
1724
- transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
1725
- opacity: 0;
1726
- }
1727
- }
1728
-
1729
1640
  .bi-popover {
1730
1641
  --bic-popover-arrow-size: var(--bi-scale-3x);
1731
1642
  --bic-popover-background: var(--bi-basic-white);
@@ -3108,7 +3019,7 @@ svg[data-color="white"] {
3108
3019
  overflow: hidden;
3109
3020
  }
3110
3021
 
3111
- .bi-tabs :is([role="tablist"], ds-tablist) {
3022
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
3112
3023
  scrollbar-width: none;
3113
3024
  flex-direction: row;
3114
3025
  flex-shrink: 0;
@@ -3116,11 +3027,11 @@ svg[data-color="white"] {
3116
3027
  overflow-x: auto;
3117
3028
  }
3118
3029
 
3119
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
3030
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
3120
3031
  display: flex;
3121
3032
  }
3122
3033
 
3123
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
3034
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
3124
3035
  font: var(--bic-tabs-tab-font);
3125
3036
  border-radius: var(--bi-radius-medium);
3126
3037
  box-sizing: border-box;
@@ -3137,45 +3048,46 @@ svg[data-color="white"] {
3137
3048
  justify-content: center;
3138
3049
  margin: 0;
3139
3050
  line-height: 1.5;
3051
+ text-decoration: none;
3140
3052
  transition: color .2s ease-in-out;
3141
3053
  position: relative;
3142
3054
  }
3143
3055
 
3144
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not([hidden]) {
3056
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not([hidden]) {
3145
3057
  display: flex;
3146
3058
  }
3147
3059
 
3148
3060
  @media (hover: hover) and (pointer: fine) {
3149
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):hover {
3061
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):hover {
3150
3062
  background: var(--bic-tabs-tab-background-hover);
3151
3063
  }
3152
3064
  }
3153
3065
 
3154
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):active {
3066
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):active {
3155
3067
  background: var(--bic-tabs-tab-background-press);
3156
3068
  }
3157
3069
 
3158
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):not(:focus-visible) {
3070
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):not(:focus-visible) {
3159
3071
  border-bottom-right-radius: 0;
3160
3072
  border-bottom-left-radius: 0;
3161
3073
  }
3162
3074
 
3163
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible {
3075
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible {
3164
3076
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3165
3077
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
3166
3078
  outline-offset: var(--_bi--focus, -3px);
3167
3079
  }
3168
3080
 
3169
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):focus-visible:after {
3081
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):focus-visible:after {
3170
3082
  bottom: 3px;
3171
3083
  }
3172
3084
 
3173
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) :where(img, svg) {
3085
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) :where(img, svg) {
3174
3086
  font-size: var(--bi-icon-medium);
3175
3087
  flex-shrink: 0;
3176
3088
  }
3177
3089
 
3178
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
3090
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
3179
3091
  background: var(--bic-tabs-tab-color-selected);
3180
3092
  content: "";
3181
3093
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -3190,20 +3102,20 @@ svg[data-color="white"] {
3190
3102
  }
3191
3103
 
3192
3104
  @media (prefers-reduced-motion: reduce) {
3193
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab) {
3105
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a) {
3194
3106
  transition: none;
3195
3107
  }
3196
3108
 
3197
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab):after {
3109
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a):after {
3198
3110
  transition: none;
3199
3111
  }
3200
3112
  }
3201
3113
 
3202
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"] {
3114
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"] {
3203
3115
  color: var(--bic-tabs-tab-color-selected);
3204
3116
  }
3205
3117
 
3206
- .bi-tabs :is([role="tablist"], ds-tablist) > :is([role="tab"], ds-tab)[aria-selected="true"]:after {
3118
+ :is(.bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-selected="true"], .bi-tabs :is([role="tablist"], ds-tablist, nav) > :is([role="tab"], ds-tab, a)[aria-current="page"]):after {
3207
3119
  width: calc(100% - var(--bi-scale-6x));
3208
3120
  }
3209
3121
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.10.0",
4
+ "version": "0.11.1",
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.6",
32
31
  "lightningcss": "^1.32.0",
33
32
  "modern-normalize": "^3.0.1",
34
- "rimraf": "^6.1.2",
35
- "@bi-digital/tokens": "0.10.0"
33
+ "@bi-digital/tokens": "0.11.1"
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
- }