@bi-digital/css 0.11.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 (4) hide show
  1. package/dist/components/tabs.css +16 -15
  2. package/dist/components.css +16 -15
  3. package/dist/salesforce.css +16 -15
  4. package/package.json +2 -2
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
@@ -2793,7 +2793,7 @@ svg[data-color="white"] {
2793
2793
  overflow: hidden;
2794
2794
  }
2795
2795
 
2796
- .bi-tabs :is([role="tablist"], ds-tablist) {
2796
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
2797
2797
  scrollbar-width: none;
2798
2798
  flex-direction: row;
2799
2799
  flex-shrink: 0;
@@ -2801,11 +2801,11 @@ svg[data-color="white"] {
2801
2801
  overflow-x: auto;
2802
2802
  }
2803
2803
 
2804
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
2804
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
2805
2805
  display: flex;
2806
2806
  }
2807
2807
 
2808
- .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) {
2809
2809
  font: var(--bic-tabs-tab-font);
2810
2810
  border-radius: var(--bi-radius-medium);
2811
2811
  box-sizing: border-box;
@@ -2822,45 +2822,46 @@ svg[data-color="white"] {
2822
2822
  justify-content: center;
2823
2823
  margin: 0;
2824
2824
  line-height: 1.5;
2825
+ text-decoration: none;
2825
2826
  transition: color .2s ease-in-out;
2826
2827
  position: relative;
2827
2828
  }
2828
2829
 
2829
- .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]) {
2830
2831
  display: flex;
2831
2832
  }
2832
2833
 
2833
2834
  @media (hover: hover) and (pointer: fine) {
2834
- .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 {
2835
2836
  background: var(--bic-tabs-tab-background-hover);
2836
2837
  }
2837
2838
  }
2838
2839
 
2839
- .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 {
2840
2841
  background: var(--bic-tabs-tab-background-press);
2841
2842
  }
2842
2843
 
2843
- .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) {
2844
2845
  border-bottom-right-radius: 0;
2845
2846
  border-bottom-left-radius: 0;
2846
2847
  }
2847
2848
 
2848
- .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 {
2849
2850
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
2850
2851
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
2851
2852
  outline-offset: var(--_bi--focus, -3px);
2852
2853
  }
2853
2854
 
2854
- .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 {
2855
2856
  bottom: 3px;
2856
2857
  }
2857
2858
 
2858
- .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) {
2859
2860
  font-size: var(--bi-icon-medium);
2860
2861
  flex-shrink: 0;
2861
2862
  }
2862
2863
 
2863
- .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 {
2864
2865
  background: var(--bic-tabs-tab-color-selected);
2865
2866
  content: "";
2866
2867
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -2875,20 +2876,20 @@ svg[data-color="white"] {
2875
2876
  }
2876
2877
 
2877
2878
  @media (prefers-reduced-motion: reduce) {
2878
- .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) {
2879
2880
  transition: none;
2880
2881
  }
2881
2882
 
2882
- .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 {
2883
2884
  transition: none;
2884
2885
  }
2885
2886
  }
2886
2887
 
2887
- .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"] {
2888
2889
  color: var(--bic-tabs-tab-color-selected);
2889
2890
  }
2890
2891
 
2891
- .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 {
2892
2893
  width: calc(100% - var(--bi-scale-6x));
2893
2894
  }
2894
2895
 
package/dist/salesforce.css CHANGED
@@ -3019,7 +3019,7 @@ svg[data-color="white"] {
3019
3019
  overflow: hidden;
3020
3020
  }
3021
3021
 
3022
- .bi-tabs :is([role="tablist"], ds-tablist) {
3022
+ .bi-tabs :is([role="tablist"], ds-tablist, nav) {
3023
3023
  scrollbar-width: none;
3024
3024
  flex-direction: row;
3025
3025
  flex-shrink: 0;
@@ -3027,11 +3027,11 @@ svg[data-color="white"] {
3027
3027
  overflow-x: auto;
3028
3028
  }
3029
3029
 
3030
- .bi-tabs :is([role="tablist"], ds-tablist):not([hidden]) {
3030
+ .bi-tabs :is([role="tablist"], ds-tablist, nav):not([hidden]) {
3031
3031
  display: flex;
3032
3032
  }
3033
3033
 
3034
- .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) {
3035
3035
  font: var(--bic-tabs-tab-font);
3036
3036
  border-radius: var(--bi-radius-medium);
3037
3037
  box-sizing: border-box;
@@ -3048,45 +3048,46 @@ svg[data-color="white"] {
3048
3048
  justify-content: center;
3049
3049
  margin: 0;
3050
3050
  line-height: 1.5;
3051
+ text-decoration: none;
3051
3052
  transition: color .2s ease-in-out;
3052
3053
  position: relative;
3053
3054
  }
3054
3055
 
3055
- .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]) {
3056
3057
  display: flex;
3057
3058
  }
3058
3059
 
3059
3060
  @media (hover: hover) and (pointer: fine) {
3060
- .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 {
3061
3062
  background: var(--bic-tabs-tab-background-hover);
3062
3063
  }
3063
3064
  }
3064
3065
 
3065
- .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 {
3066
3067
  background: var(--bic-tabs-tab-background-press);
3067
3068
  }
3068
3069
 
3069
- .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) {
3070
3071
  border-bottom-right-radius: 0;
3071
3072
  border-bottom-left-radius: 0;
3072
3073
  }
3073
3074
 
3074
- .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 {
3075
3076
  box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-tabs-focus-shadow-color));
3076
3077
  outline: var(--_bi--focus, 3px solid var(--bic-tabs-focus-outline-color));
3077
3078
  outline-offset: var(--_bi--focus, -3px);
3078
3079
  }
3079
3080
 
3080
- .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 {
3081
3082
  bottom: 3px;
3082
3083
  }
3083
3084
 
3084
- .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) {
3085
3086
  font-size: var(--bi-icon-medium);
3086
3087
  flex-shrink: 0;
3087
3088
  }
3088
3089
 
3089
- .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 {
3090
3091
  background: var(--bic-tabs-tab-color-selected);
3091
3092
  content: "";
3092
3093
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
@@ -3101,20 +3102,20 @@ svg[data-color="white"] {
3101
3102
  }
3102
3103
 
3103
3104
  @media (prefers-reduced-motion: reduce) {
3104
- .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) {
3105
3106
  transition: none;
3106
3107
  }
3107
3108
 
3108
- .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 {
3109
3110
  transition: none;
3110
3111
  }
3111
3112
  }
3112
3113
 
3113
- .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"] {
3114
3115
  color: var(--bic-tabs-tab-color-selected);
3115
3116
  }
3116
3117
 
3117
- .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 {
3118
3119
  width: calc(100% - var(--bi-scale-6x));
3119
3120
  }
3120
3121
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.11.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/",
@@ -30,7 +30,7 @@
30
30
  "browserslist": "^4.28.1",
31
31
  "lightningcss": "^1.32.0",
32
32
  "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.11.0"
33
+ "@bi-digital/tokens": "0.11.1"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",