@wwtdev/bsds-css 2.25.0 → 2.26.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 (13) hide show
  1. package/dist/components/_form-switches.scss +0 -1
  2. package/dist/components/_modal.scss +1 -0
  3. package/dist/components/_pagination.scss +1 -0
  4. package/dist/components/_tab-list.scss +51 -21
  5. package/dist/components/_vertical-navigation.scss +1 -1
  6. package/dist/components/form-switches.css +0 -1
  7. package/dist/components/modal.css +1 -0
  8. package/dist/components/pagination.css +1 -0
  9. package/dist/components/tab-list.css +51 -21
  10. package/dist/components/vertical-navigation.css +1 -1
  11. package/dist/wwt-bsds.css +49 -23
  12. package/dist/wwt-bsds.min.css +1 -1
  13. package/package.json +2 -2
package/dist/components/_form-switches.scss CHANGED
@@ -73,7 +73,6 @@
73
73
  transform: translate(0, -50%);
74
74
  transition: inherit;
75
75
  width: var(--ball-diameter);
76
- z-index: 2;
77
76
  }
78
77
 
79
78
  .bs-switch :where(input:checked) ~ :where(span)::before,
package/dist/components/_modal.scss CHANGED
@@ -91,6 +91,7 @@
91
91
  .bs-modal :where(.bs-modal-close-button) {
92
92
  background-color: transparent;
93
93
  cursor: pointer;
94
+ z-index: 10000;
94
95
  }
95
96
 
96
97
  .bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
package/dist/components/_pagination.scss CHANGED
@@ -37,6 +37,7 @@
37
37
 
38
38
  .bs-pagination button:where(:disabled) {
39
39
  color: var(--bs-ink-disabled);
40
+ cursor: default;
40
41
  }
41
42
 
42
43
  .bs-pagination button:where([data-selected]:not([data-selected="false"])) {
package/dist/components/_tab-list.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  @mixin tab-list() {
2
- :is(.bs-tab-list, bs-tab-list) {
3
- --active-line-offset: 0;
2
+ .bs-tab-list {
4
3
  --active-line-max-width: 0;
4
+ --active-line-offset: 0;
5
5
  --active-line-scale: 0;
6
6
  --active-line-transition-duration: 300ms;
7
- --tab-list-opacity: 1;
8
7
  --tab-color: var(--bs-ink-light);
9
8
  --tab-cursor: pointer;
10
9
  --tab-display: inline-flex;
11
10
  --tab-justify: space-around;
11
+ --tab-list-opacity: 1;
12
12
  --tab-text-size: var(--bs-text-sm);
13
13
  --tab-weight: var(--bs-font-normal);
14
14
  align-items: center;
@@ -26,21 +26,22 @@
26
26
  width: 100%;
27
27
  }
28
28
 
29
- :is(.bs-tab-list, bs-tab-list):where([data-resizing]:not([data-resizing="false"])) {
29
+ .bs-tab-list:where([data-resizing="true"]) {
30
30
  --tab-list-opacity: 0;
31
31
  }
32
+
32
33
  @media (min-width: 1166px) {
33
- :is(.bs-tab-list, bs-tab-list) {
34
+ .bs-tab-list {
34
35
  --tab-justify: flex-start;
35
36
  --tab-text-size: var(--bs-text-base);
36
37
  }
37
38
  }
38
39
 
39
- /* ------------- Tabs and Toggle ------------- */
40
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle) {
40
+ /* ------------- Tabs ------------- */
41
+ .bs-tab-list :where([role="tab"]) {
41
42
  align-items: center;
42
43
  color: var(--tab-color, var(--bs-ink-light));
43
- column-gap: .5rem;
44
+ column-gap: 0.5rem;
44
45
  cursor: var(--tab-cursor);
45
46
  display: var(--tab-display);
46
47
  flex-basis: var(--tab-basis, content);
@@ -50,26 +51,27 @@
50
51
  font-weight: var(--tab-weight, var(--bs-font-normal));
51
52
  height: 2.5rem;
52
53
  justify-content: var(--tab-justify-self, center);
53
- padding: .5rem;
54
54
  outline-color: var(--bs-blue-base);
55
55
  outline-offset: -1px;
56
+ padding: 0.5rem;
56
57
  text-decoration: none;
57
58
  }
58
59
 
59
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([tabindex="-1"]) {
60
+ .bs-tab-list :where([role="tab"][tabindex="-1"]) {
60
61
  --tab-cursor: default;
61
62
  }
62
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])) {
63
+
64
+ .bs-tab-list :where([role="tab"][data-hidden="true"]) {
63
65
  --tab-display: none;
64
66
  }
65
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([aria-selected]:not([aria-selected="false"])),
66
- :is(bs-tab-list, .bs-tab-list) :where(.bs-tab-list-toggle):where([data-active]:not([data-active="false"])) {
67
+
68
+ .bs-tab-list :where([role="tab"][aria-selected="true"]) {
67
69
  --tab-color: var(--bs-ink-base);
68
70
  --tab-weight: var(--bs-font-bold);
69
71
  }
70
72
 
71
73
  /* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
72
- :is(.bs-tab-list, bs-tab-list):where([data-resizing="true"]) {
74
+ .bs-tab-list:where([data-resizing="true"]) {
73
75
  --tab-basis: auto;
74
76
  --tab-grow: 0;
75
77
  --tab-justify-self: flex-start;
@@ -77,7 +79,7 @@
77
79
  }
78
80
 
79
81
  @media (min-width: 1166px) {
80
- :is(.bs-tab-list, bs-tab-list) {
82
+ .bs-tab-list {
81
83
  --tab-basis: auto;
82
84
  --tab-grow: 0;
83
85
  --tab-justify-self: flex-start;
@@ -86,27 +88,55 @@
86
88
  }
87
89
 
88
90
  /* ------------- Active line ------------- */
89
- :is(.bs-tab-list, bs-tab-list)::after {
91
+ .bs-tab-list::after {
90
92
  background-color: var(--bs-blue-base);
91
93
  bottom: 0;
92
94
  content: '';
93
- height: .25rem;
95
+ height: 0.25rem;
94
96
  left: 0;
95
97
  position: absolute;
96
- transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
97
98
  transform-origin: top left;
99
+ transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
98
100
  transition: transform var(--active-line-transition-duration) ease-in;
99
101
  width: 100%;
100
102
  }
101
103
 
102
104
  /* ------------- Tab Panels ------------- */
103
-
104
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"]) {
105
+ .bs-tab-panel:where([role="tabpanel"]) {
105
106
  display: none;
106
107
  }
107
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
108
+
109
+ .bs-tab-panel:where([role="tabpanel"][data-active="true"]) {
108
110
  display: block;
109
111
  }
110
112
 
113
+ /* ------------- Toggle ------------- */
114
+ .bs-tab-list-toggle {
115
+ align-items: center;
116
+ border-bottom: 1px solid var(--bs-border-base);
117
+ color: var(--tab-color, var(--bs-ink-light));
118
+ column-gap: 0.5rem;
119
+ cursor: pointer;
120
+ display: inline-flex;
121
+ flex-basis: var(--tab-basis, content);
122
+ flex-grow: var(--tab-grow, 1);
123
+ flex-shrink: var(--tab-shrink, 0);
124
+ font-size: var(--tab-text-size, 0.875rem);
125
+ font-weight: var(--tab-weight, var(--bs-font-normal));
126
+ gap: 0.375rem;
127
+ height: 2.5rem;
128
+ justify-content: var(--tab-justify-self, center);
129
+ padding: 0.5rem;
130
+ }
131
+
132
+ .bs-tab-list-toggle:where([data-hidden="true"]) {
133
+ display: none;
134
+ }
135
+
136
+ .bs-tab-list-toggle:where([data-active="true"]) {
137
+ color: var(--bs-ink-base);
138
+ font-weight: var(--bs-font-bold);
139
+ }
140
+
111
141
  }
112
142
 
package/dist/components/_vertical-navigation.scss CHANGED
@@ -199,7 +199,7 @@
199
199
  flex-direction: column;
200
200
  font-size: 0.6875rem;
201
201
  gap: 0.25rem;
202
- line-height: 110%;
202
+ line-height: 1.3;
203
203
  padding-bottom: 0.75rem;
204
204
  padding-left: 0.25rem;
205
205
  padding-right: 0.25rem;
package/dist/components/form-switches.css CHANGED
@@ -72,7 +72,6 @@
72
72
  transform: translate(0, -50%);
73
73
  transition: inherit;
74
74
  width: var(--ball-diameter);
75
- z-index: 2;
76
75
  }
77
76
 
78
77
  .bs-switch :where(input:checked) ~ :where(span)::before,
package/dist/components/modal.css CHANGED
@@ -90,6 +90,7 @@
90
90
  .bs-modal :where(.bs-modal-close-button) {
91
91
  background-color: transparent;
92
92
  cursor: pointer;
93
+ z-index: 10000;
93
94
  }
94
95
 
95
96
  .bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
package/dist/components/pagination.css CHANGED
@@ -36,6 +36,7 @@
36
36
 
37
37
  .bs-pagination button:where(:disabled) {
38
38
  color: var(--bs-ink-disabled);
39
+ cursor: default;
39
40
  }
40
41
 
41
42
  .bs-pagination button:where([data-selected]:not([data-selected="false"])) {
package/dist/components/tab-list.css CHANGED
@@ -1,13 +1,13 @@
1
- :is(.bs-tab-list, bs-tab-list) {
2
- --active-line-offset: 0;
1
+ .bs-tab-list {
3
2
  --active-line-max-width: 0;
3
+ --active-line-offset: 0;
4
4
  --active-line-scale: 0;
5
5
  --active-line-transition-duration: 300ms;
6
- --tab-list-opacity: 1;
7
6
  --tab-color: var(--bs-ink-light);
8
7
  --tab-cursor: pointer;
9
8
  --tab-display: inline-flex;
10
9
  --tab-justify: space-around;
10
+ --tab-list-opacity: 1;
11
11
  --tab-text-size: var(--bs-text-sm);
12
12
  --tab-weight: var(--bs-font-normal);
13
13
  align-items: center;
@@ -25,21 +25,22 @@
25
25
  width: 100%;
26
26
  }
27
27
 
28
- :is(.bs-tab-list, bs-tab-list):where([data-resizing]:not([data-resizing="false"])) {
28
+ .bs-tab-list:where([data-resizing="true"]) {
29
29
  --tab-list-opacity: 0;
30
30
  }
31
+
31
32
  @media (min-width: 1166px) {
32
- :is(.bs-tab-list, bs-tab-list) {
33
+ .bs-tab-list {
33
34
  --tab-justify: flex-start;
34
35
  --tab-text-size: var(--bs-text-base);
35
36
  }
36
37
  }
37
38
 
38
- /* ------------- Tabs and Toggle ------------- */
39
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle) {
39
+ /* ------------- Tabs ------------- */
40
+ .bs-tab-list :where([role="tab"]) {
40
41
  align-items: center;
41
42
  color: var(--tab-color, var(--bs-ink-light));
42
- column-gap: .5rem;
43
+ column-gap: 0.5rem;
43
44
  cursor: var(--tab-cursor);
44
45
  display: var(--tab-display);
45
46
  flex-basis: var(--tab-basis, content);
@@ -49,26 +50,27 @@
49
50
  font-weight: var(--tab-weight, var(--bs-font-normal));
50
51
  height: 2.5rem;
51
52
  justify-content: var(--tab-justify-self, center);
52
- padding: .5rem;
53
53
  outline-color: var(--bs-blue-base);
54
54
  outline-offset: -1px;
55
+ padding: 0.5rem;
55
56
  text-decoration: none;
56
57
  }
57
58
 
58
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([tabindex="-1"]) {
59
+ .bs-tab-list :where([role="tab"][tabindex="-1"]) {
59
60
  --tab-cursor: default;
60
61
  }
61
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])) {
62
+
63
+ .bs-tab-list :where([role="tab"][data-hidden="true"]) {
62
64
  --tab-display: none;
63
65
  }
64
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([aria-selected]:not([aria-selected="false"])),
65
- :is(bs-tab-list, .bs-tab-list) :where(.bs-tab-list-toggle):where([data-active]:not([data-active="false"])) {
66
+
67
+ .bs-tab-list :where([role="tab"][aria-selected="true"]) {
66
68
  --tab-color: var(--bs-ink-base);
67
69
  --tab-weight: var(--bs-font-bold);
68
70
  }
69
71
 
70
72
  /* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
71
- :is(.bs-tab-list, bs-tab-list):where([data-resizing="true"]) {
73
+ .bs-tab-list:where([data-resizing="true"]) {
72
74
  --tab-basis: auto;
73
75
  --tab-grow: 0;
74
76
  --tab-justify-self: flex-start;
@@ -76,7 +78,7 @@
76
78
  }
77
79
 
78
80
  @media (min-width: 1166px) {
79
- :is(.bs-tab-list, bs-tab-list) {
81
+ .bs-tab-list {
80
82
  --tab-basis: auto;
81
83
  --tab-grow: 0;
82
84
  --tab-justify-self: flex-start;
@@ -85,24 +87,52 @@
85
87
  }
86
88
 
87
89
  /* ------------- Active line ------------- */
88
- :is(.bs-tab-list, bs-tab-list)::after {
90
+ .bs-tab-list::after {
89
91
  background-color: var(--bs-blue-base);
90
92
  bottom: 0;
91
93
  content: '';
92
- height: .25rem;
94
+ height: 0.25rem;
93
95
  left: 0;
94
96
  position: absolute;
95
- transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
96
97
  transform-origin: top left;
98
+ transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
97
99
  transition: transform var(--active-line-transition-duration) ease-in;
98
100
  width: 100%;
99
101
  }
100
102
 
101
103
  /* ------------- Tab Panels ------------- */
102
-
103
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"]) {
104
+ .bs-tab-panel:where([role="tabpanel"]) {
104
105
  display: none;
105
106
  }
106
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
107
+
108
+ .bs-tab-panel:where([role="tabpanel"][data-active="true"]) {
107
109
  display: block;
108
110
  }
111
+
112
+ /* ------------- Toggle ------------- */
113
+ .bs-tab-list-toggle {
114
+ align-items: center;
115
+ border-bottom: 1px solid var(--bs-border-base);
116
+ color: var(--tab-color, var(--bs-ink-light));
117
+ column-gap: 0.5rem;
118
+ cursor: pointer;
119
+ display: inline-flex;
120
+ flex-basis: var(--tab-basis, content);
121
+ flex-grow: var(--tab-grow, 1);
122
+ flex-shrink: var(--tab-shrink, 0);
123
+ font-size: var(--tab-text-size, 0.875rem);
124
+ font-weight: var(--tab-weight, var(--bs-font-normal));
125
+ gap: 0.375rem;
126
+ height: 2.5rem;
127
+ justify-content: var(--tab-justify-self, center);
128
+ padding: 0.5rem;
129
+ }
130
+
131
+ .bs-tab-list-toggle:where([data-hidden="true"]) {
132
+ display: none;
133
+ }
134
+
135
+ .bs-tab-list-toggle:where([data-active="true"]) {
136
+ color: var(--bs-ink-base);
137
+ font-weight: var(--bs-font-bold);
138
+ }
package/dist/components/vertical-navigation.css CHANGED
@@ -198,7 +198,7 @@
198
198
  flex-direction: column;
199
199
  font-size: 0.6875rem;
200
200
  gap: 0.25rem;
201
- line-height: 110%;
201
+ line-height: 1.3;
202
202
  padding-bottom: 0.75rem;
203
203
  padding-left: 0.25rem;
204
204
  padding-right: 0.25rem;
package/dist/wwt-bsds.css CHANGED
@@ -3708,7 +3708,6 @@ label:where(.bs-label) {
3708
3708
  transform: translate(0, -50%);
3709
3709
  transition: inherit;
3710
3710
  width: var(--ball-diameter);
3711
- z-index: 2;
3712
3711
  }
3713
3712
  .bs-switch :where(input:checked) ~ :where(span)::before,
3714
3713
  .bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
@@ -4598,6 +4597,7 @@ select[multiple],
4598
4597
  .bs-modal :where(.bs-modal-close-button) {
4599
4598
  background-color: transparent;
4600
4599
  cursor: pointer;
4600
+ z-index: 10000;
4601
4601
  }
4602
4602
  .bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
4603
4603
  position: absolute;
@@ -4729,6 +4729,7 @@ select[multiple],
4729
4729
  }
4730
4730
  .bs-pagination button:where(:disabled) {
4731
4731
  color: var(--bs-ink-disabled);
4732
+ cursor: default;
4732
4733
  }
4733
4734
  .bs-pagination button:where([data-selected]:not([data-selected="false"])) {
4734
4735
  background-color: var(--bs-blue-base);
@@ -5173,16 +5174,16 @@ a.bs-profile:where([data-layout]):hover {
5173
5174
  stroke: var(--bs-spinner-color-1);
5174
5175
  }
5175
5176
  }
5176
- :is(.bs-tab-list, bs-tab-list) {
5177
- --active-line-offset: 0;
5177
+ .bs-tab-list {
5178
5178
  --active-line-max-width: 0;
5179
+ --active-line-offset: 0;
5179
5180
  --active-line-scale: 0;
5180
5181
  --active-line-transition-duration: 300ms;
5181
- --tab-list-opacity: 1;
5182
5182
  --tab-color: var(--bs-ink-light);
5183
5183
  --tab-cursor: pointer;
5184
5184
  --tab-display: inline-flex;
5185
5185
  --tab-justify: space-around;
5186
+ --tab-list-opacity: 1;
5186
5187
  --tab-text-size: var(--bs-text-sm);
5187
5188
  --tab-weight: var(--bs-font-normal);
5188
5189
  align-items: center;
@@ -5199,21 +5200,21 @@ a.bs-profile:where([data-layout]):hover {
5199
5200
  position: relative;
5200
5201
  width: 100%;
5201
5202
  }
5202
- :is(.bs-tab-list, bs-tab-list):where([data-resizing]:not([data-resizing="false"])) {
5203
+ .bs-tab-list:where([data-resizing="true"]) {
5203
5204
  --tab-list-opacity: 0;
5204
5205
  }
5205
5206
  @media (min-width: 1166px) {
5206
- :is(.bs-tab-list, bs-tab-list) {
5207
+ .bs-tab-list {
5207
5208
  --tab-justify: flex-start;
5208
5209
  --tab-text-size: var(--bs-text-base);
5209
5210
  }
5210
5211
  }
5211
- /* ------------- Tabs and Toggle ------------- */
5212
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle) {
5212
+ /* ------------- Tabs ------------- */
5213
+ .bs-tab-list :where([role="tab"]) {
5213
5214
  align-items: center;
5214
5215
  color: var(--tab-color, var(--bs-ink-light));
5215
- -moz-column-gap: .5rem;
5216
- column-gap: .5rem;
5216
+ -moz-column-gap: 0.5rem;
5217
+ column-gap: 0.5rem;
5217
5218
  cursor: var(--tab-cursor);
5218
5219
  display: var(--tab-display);
5219
5220
  flex-basis: var(--tab-basis, content);
@@ -5223,31 +5224,30 @@ a.bs-profile:where([data-layout]):hover {
5223
5224
  font-weight: var(--tab-weight, var(--bs-font-normal));
5224
5225
  height: 2.5rem;
5225
5226
  justify-content: var(--tab-justify-self, center);
5226
- padding: .5rem;
5227
5227
  outline-color: var(--bs-blue-base);
5228
5228
  outline-offset: -1px;
5229
+ padding: 0.5rem;
5229
5230
  text-decoration: none;
5230
5231
  }
5231
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([tabindex="-1"]) {
5232
+ .bs-tab-list :where([role="tab"][tabindex="-1"]) {
5232
5233
  --tab-cursor: default;
5233
5234
  }
5234
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"], .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])) {
5235
+ .bs-tab-list :where([role="tab"][data-hidden="true"]) {
5235
5236
  --tab-display: none;
5236
5237
  }
5237
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([aria-selected]:not([aria-selected="false"])),
5238
- :is(bs-tab-list, .bs-tab-list) :where(.bs-tab-list-toggle):where([data-active]:not([data-active="false"])) {
5238
+ .bs-tab-list :where([role="tab"][aria-selected="true"]) {
5239
5239
  --tab-color: var(--bs-ink-base);
5240
5240
  --tab-weight: var(--bs-font-bold);
5241
5241
  }
5242
5242
  /* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
5243
- :is(.bs-tab-list, bs-tab-list):where([data-resizing="true"]) {
5243
+ .bs-tab-list:where([data-resizing="true"]) {
5244
5244
  --tab-basis: auto;
5245
5245
  --tab-grow: 0;
5246
5246
  --tab-justify-self: flex-start;
5247
5247
  --tab-shrink: 0;
5248
5248
  }
5249
5249
  @media (min-width: 1166px) {
5250
- :is(.bs-tab-list, bs-tab-list) {
5250
+ .bs-tab-list {
5251
5251
  --tab-basis: auto;
5252
5252
  --tab-grow: 0;
5253
5253
  --tab-justify-self: flex-start;
@@ -5255,25 +5255,51 @@ a.bs-profile:where([data-layout]):hover {
5255
5255
  }
5256
5256
  }
5257
5257
  /* ------------- Active line ------------- */
5258
- :is(.bs-tab-list, bs-tab-list)::after {
5258
+ .bs-tab-list::after {
5259
5259
  background-color: var(--bs-blue-base);
5260
5260
  bottom: 0;
5261
5261
  content: '';
5262
- height: .25rem;
5262
+ height: 0.25rem;
5263
5263
  left: 0;
5264
5264
  position: absolute;
5265
- transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
5266
5265
  transform-origin: top left;
5266
+ transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
5267
5267
  transition: transform var(--active-line-transition-duration) ease-in;
5268
5268
  width: 100%;
5269
5269
  }
5270
5270
  /* ------------- Tab Panels ------------- */
5271
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"]) {
5271
+ .bs-tab-panel:where([role="tabpanel"]) {
5272
5272
  display: none;
5273
5273
  }
5274
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
5274
+ .bs-tab-panel:where([role="tabpanel"][data-active="true"]) {
5275
5275
  display: block;
5276
5276
  }
5277
+ /* ------------- Toggle ------------- */
5278
+ .bs-tab-list-toggle {
5279
+ align-items: center;
5280
+ border-bottom: 1px solid var(--bs-border-base);
5281
+ color: var(--tab-color, var(--bs-ink-light));
5282
+ -moz-column-gap: 0.5rem;
5283
+ column-gap: 0.5rem;
5284
+ cursor: pointer;
5285
+ display: inline-flex;
5286
+ flex-basis: var(--tab-basis, content);
5287
+ flex-grow: var(--tab-grow, 1);
5288
+ flex-shrink: var(--tab-shrink, 0);
5289
+ font-size: var(--tab-text-size, 0.875rem);
5290
+ font-weight: var(--tab-weight, var(--bs-font-normal));
5291
+ gap: 0.375rem;
5292
+ height: 2.5rem;
5293
+ justify-content: var(--tab-justify-self, center);
5294
+ padding: 0.5rem;
5295
+ }
5296
+ .bs-tab-list-toggle:where([data-hidden="true"]) {
5297
+ display: none;
5298
+ }
5299
+ .bs-tab-list-toggle:where([data-active="true"]) {
5300
+ color: var(--bs-ink-base);
5301
+ font-weight: var(--bs-font-bold);
5302
+ }
5277
5303
  /* ------ WRAPPER ------ */
5278
5304
  .bs-table-wrap {
5279
5305
  display: flex;
@@ -6203,7 +6229,7 @@ This must go last to properly override the other classes
6203
6229
  flex-direction: column;
6204
6230
  font-size: 0.6875rem;
6205
6231
  gap: 0.25rem;
6206
- line-height: 110%;
6232
+ line-height: 1.3;
6207
6233
  padding-bottom: 0.75rem;
6208
6234
  padding-left: 0.25rem;
6209
6235
  padding-right: 0.25rem;