@wwtdev/bsds-css 2.26.0 → 2.27.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 (5) hide show
  1. package/dist/components/_tab-list.scss +57 -34
  2. package/dist/components/tab-list.css +57 -34
  3. package/dist/wwt-bsds.css +53 -33
  4. package/dist/wwt-bsds.min.css +1 -1
  5. package/package.json +6 -2
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
- --tab-justify: space-around;
10
+ --tab-justify: center;
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,60 +26,59 @@
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
- .bs-tab-list-toggle,
41
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]) {
42
- font-size: var(--tab-text-size, .875rem);
43
- font-weight: var(--tab-weight, 400);
44
- display: inline-flex;
40
+ /* ------------- Tabs ------------- */
41
+ .bs-tab-list-tabs {
42
+ align-items: center;
43
+ display: flex;
44
+ flex-grow: 1;
45
+ gap: 1rem;
46
+ }
47
+
48
+ .bs-tab-list-tabs :where([role="tab"]) {
45
49
  align-items: center;
46
- gap: 0.375rem;
47
50
  color: var(--tab-color, var(--bs-ink-light));
48
- column-gap: .5rem;
51
+ column-gap: 0.5rem;
49
52
  cursor: var(--tab-cursor);
53
+ display: var(--tab-display);
50
54
  flex-basis: var(--tab-basis, content);
51
55
  flex-grow: var(--tab-grow, 1);
52
56
  flex-shrink: var(--tab-shrink, 0);
57
+ font-size: inherit;
58
+ font-weight: var(--tab-weight, var(--bs-font-normal));
53
59
  height: 2.5rem;
54
60
  justify-content: var(--tab-justify-self, center);
55
- padding: .5rem;
56
61
  outline-color: var(--bs-blue-base);
57
62
  outline-offset: -1px;
63
+ padding: 0.5rem;
58
64
  text-decoration: none;
59
- border-bottom: 1px solid var(--bs-border-base);
60
- border-top: none;
61
- border-left: none;
62
- border-right: none;
63
- border-radius: 0;
64
- background: none;
65
65
  }
66
66
 
67
-
68
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([tabindex="-1"]) {
67
+ .bs-tab-list-tabs :where([role="tab"][tabindex="-1"]) {
69
68
  --tab-cursor: default;
70
69
  }
71
70
 
72
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"][data-hidden]:not([data-hidden="false"])), :is(bs-tab-list-toggle, .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])) {
73
- display: none;
71
+ .bs-tab-list-tabs :where([role="tab"][data-hidden="true"]) {
72
+ --tab-display: none;
74
73
  }
75
74
 
76
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"][data-hidden]:not([data-hidden="false"])):where([aria-selected]:not([aria-selected="false"])), :is(bs-tab-list-toggle, .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])):where([data-active]:not([data-active="false"])) {
75
+ .bs-tab-list-tabs :where([role="tab"][aria-selected="true"]) {
77
76
  --tab-color: var(--bs-ink-base);
78
77
  --tab-weight: var(--bs-font-bold);
79
78
  }
80
79
 
81
80
  /* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
82
- :is(.bs-tab-list, bs-tab-list):where([data-resizing="true"]) {
81
+ .bs-tab-list:where([data-resizing="true"]) {
83
82
  --tab-basis: auto;
84
83
  --tab-grow: 0;
85
84
  --tab-justify-self: flex-start;
@@ -87,7 +86,7 @@
87
86
  }
88
87
 
89
88
  @media (min-width: 1166px) {
90
- :is(.bs-tab-list, bs-tab-list) {
89
+ .bs-tab-list {
91
90
  --tab-basis: auto;
92
91
  --tab-grow: 0;
93
92
  --tab-justify-self: flex-start;
@@ -96,27 +95,51 @@
96
95
  }
97
96
 
98
97
  /* ------------- Active line ------------- */
99
- :is(.bs-tab-list, bs-tab-list)::after {
98
+ .bs-tab-list::after {
100
99
  background-color: var(--bs-blue-base);
101
100
  bottom: 0;
102
101
  content: '';
103
- height: .25rem;
102
+ height: 0.25rem;
104
103
  left: 0;
105
104
  position: absolute;
106
- transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
107
105
  transform-origin: top left;
106
+ transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
108
107
  transition: transform var(--active-line-transition-duration) ease-in;
109
108
  width: 100%;
110
109
  }
111
110
 
112
111
  /* ------------- Tab Panels ------------- */
113
-
114
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"]) {
112
+ .bs-tab-panel:where([role="tabpanel"]) {
115
113
  display: none;
116
114
  }
117
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
115
+
116
+ .bs-tab-panel:where([role="tabpanel"][data-active="true"]) {
118
117
  display: block;
119
118
  }
120
119
 
120
+ /* ------------- Toggle ------------- */
121
+ .bs-tab-list-toggle {
122
+ align-items: center;
123
+ color: var(--tab-color, var(--bs-ink-light));
124
+ column-gap: 0.5rem;
125
+ cursor: pointer;
126
+ display: inline-flex;
127
+ font-size: var(--tab-text-size, 0.875rem);
128
+ font-weight: var(--tab-weight, var(--bs-font-normal));
129
+ gap: 0.375rem;
130
+ height: 2.5rem;
131
+ justify-content: var(--tab-justify-self, center);
132
+ padding: 0.5rem;
133
+ }
134
+
135
+ .bs-tab-list-toggle:where([data-hidden="true"]) {
136
+ display: none;
137
+ }
138
+
139
+ .bs-tab-list-toggle:where([data-active="true"]) {
140
+ color: var(--bs-ink-base);
141
+ font-weight: var(--bs-font-bold);
142
+ }
143
+
121
144
  }
122
145
 
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
- --tab-justify: space-around;
9
+ --tab-justify: center;
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,60 +25,59 @@
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
- .bs-tab-list-toggle,
40
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]) {
41
- font-size: var(--tab-text-size, .875rem);
42
- font-weight: var(--tab-weight, 400);
43
- display: inline-flex;
39
+ /* ------------- Tabs ------------- */
40
+ .bs-tab-list-tabs {
41
+ align-items: center;
42
+ display: flex;
43
+ flex-grow: 1;
44
+ gap: 1rem;
45
+ }
46
+
47
+ .bs-tab-list-tabs :where([role="tab"]) {
44
48
  align-items: center;
45
- gap: 0.375rem;
46
49
  color: var(--tab-color, var(--bs-ink-light));
47
- column-gap: .5rem;
50
+ column-gap: 0.5rem;
48
51
  cursor: var(--tab-cursor);
52
+ display: var(--tab-display);
49
53
  flex-basis: var(--tab-basis, content);
50
54
  flex-grow: var(--tab-grow, 1);
51
55
  flex-shrink: var(--tab-shrink, 0);
56
+ font-size: inherit;
57
+ font-weight: var(--tab-weight, var(--bs-font-normal));
52
58
  height: 2.5rem;
53
59
  justify-content: var(--tab-justify-self, center);
54
- padding: .5rem;
55
60
  outline-color: var(--bs-blue-base);
56
61
  outline-offset: -1px;
62
+ padding: 0.5rem;
57
63
  text-decoration: none;
58
- border-bottom: 1px solid var(--bs-border-base);
59
- border-top: none;
60
- border-left: none;
61
- border-right: none;
62
- border-radius: 0;
63
- background: none;
64
64
  }
65
65
 
66
-
67
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([tabindex="-1"]) {
66
+ .bs-tab-list-tabs :where([role="tab"][tabindex="-1"]) {
68
67
  --tab-cursor: default;
69
68
  }
70
69
 
71
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"][data-hidden]:not([data-hidden="false"])), :is(bs-tab-list-toggle, .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])) {
72
- display: none;
70
+ .bs-tab-list-tabs :where([role="tab"][data-hidden="true"]) {
71
+ --tab-display: none;
73
72
  }
74
73
 
75
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"][data-hidden]:not([data-hidden="false"])):where([aria-selected]:not([aria-selected="false"])), :is(bs-tab-list-toggle, .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])):where([data-active]:not([data-active="false"])) {
74
+ .bs-tab-list-tabs :where([role="tab"][aria-selected="true"]) {
76
75
  --tab-color: var(--bs-ink-base);
77
76
  --tab-weight: var(--bs-font-bold);
78
77
  }
79
78
 
80
79
  /* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
81
- :is(.bs-tab-list, bs-tab-list):where([data-resizing="true"]) {
80
+ .bs-tab-list:where([data-resizing="true"]) {
82
81
  --tab-basis: auto;
83
82
  --tab-grow: 0;
84
83
  --tab-justify-self: flex-start;
@@ -86,7 +85,7 @@
86
85
  }
87
86
 
88
87
  @media (min-width: 1166px) {
89
- :is(.bs-tab-list, bs-tab-list) {
88
+ .bs-tab-list {
90
89
  --tab-basis: auto;
91
90
  --tab-grow: 0;
92
91
  --tab-justify-self: flex-start;
@@ -95,24 +94,48 @@
95
94
  }
96
95
 
97
96
  /* ------------- Active line ------------- */
98
- :is(.bs-tab-list, bs-tab-list)::after {
97
+ .bs-tab-list::after {
99
98
  background-color: var(--bs-blue-base);
100
99
  bottom: 0;
101
100
  content: '';
102
- height: .25rem;
101
+ height: 0.25rem;
103
102
  left: 0;
104
103
  position: absolute;
105
- transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
106
104
  transform-origin: top left;
105
+ transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
107
106
  transition: transform var(--active-line-transition-duration) ease-in;
108
107
  width: 100%;
109
108
  }
110
109
 
111
110
  /* ------------- Tab Panels ------------- */
112
-
113
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"]) {
111
+ .bs-tab-panel:where([role="tabpanel"]) {
114
112
  display: none;
115
113
  }
116
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
114
+
115
+ .bs-tab-panel:where([role="tabpanel"][data-active="true"]) {
117
116
  display: block;
118
117
  }
118
+
119
+ /* ------------- Toggle ------------- */
120
+ .bs-tab-list-toggle {
121
+ align-items: center;
122
+ color: var(--tab-color, var(--bs-ink-light));
123
+ column-gap: 0.5rem;
124
+ cursor: pointer;
125
+ display: inline-flex;
126
+ font-size: var(--tab-text-size, 0.875rem);
127
+ font-weight: var(--tab-weight, var(--bs-font-normal));
128
+ gap: 0.375rem;
129
+ height: 2.5rem;
130
+ justify-content: var(--tab-justify-self, center);
131
+ padding: 0.5rem;
132
+ }
133
+
134
+ .bs-tab-list-toggle:where([data-hidden="true"]) {
135
+ display: none;
136
+ }
137
+
138
+ .bs-tab-list-toggle:where([data-active="true"]) {
139
+ color: var(--bs-ink-base);
140
+ font-weight: var(--bs-font-bold);
141
+ }
package/dist/wwt-bsds.css CHANGED
@@ -5174,16 +5174,16 @@ a.bs-profile:where([data-layout]):hover {
5174
5174
  stroke: var(--bs-spinner-color-1);
5175
5175
  }
5176
5176
  }
5177
- :is(.bs-tab-list, bs-tab-list) {
5178
- --active-line-offset: 0;
5177
+ .bs-tab-list {
5179
5178
  --active-line-max-width: 0;
5179
+ --active-line-offset: 0;
5180
5180
  --active-line-scale: 0;
5181
5181
  --active-line-transition-duration: 300ms;
5182
- --tab-list-opacity: 1;
5183
5182
  --tab-color: var(--bs-ink-light);
5184
5183
  --tab-cursor: pointer;
5185
5184
  --tab-display: inline-flex;
5186
- --tab-justify: space-around;
5185
+ --tab-justify: center;
5186
+ --tab-list-opacity: 1;
5187
5187
  --tab-text-size: var(--bs-text-sm);
5188
5188
  --tab-weight: var(--bs-font-normal);
5189
5189
  align-items: center;
@@ -5200,62 +5200,60 @@ a.bs-profile:where([data-layout]):hover {
5200
5200
  position: relative;
5201
5201
  width: 100%;
5202
5202
  }
5203
- :is(.bs-tab-list, bs-tab-list):where([data-resizing]:not([data-resizing="false"])) {
5203
+ .bs-tab-list:where([data-resizing="true"]) {
5204
5204
  --tab-list-opacity: 0;
5205
5205
  }
5206
5206
  @media (min-width: 1166px) {
5207
- :is(.bs-tab-list, bs-tab-list) {
5207
+ .bs-tab-list {
5208
5208
  --tab-justify: flex-start;
5209
5209
  --tab-text-size: var(--bs-text-base);
5210
5210
  }
5211
5211
  }
5212
- /* ------------- Tabs and Toggle ------------- */
5213
- .bs-tab-list-toggle,
5214
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]) {
5215
- font-size: var(--tab-text-size, .875rem);
5216
- font-weight: var(--tab-weight, 400);
5217
- display: inline-flex;
5212
+ /* ------------- Tabs ------------- */
5213
+ .bs-tab-list-tabs {
5214
+ align-items: center;
5215
+ display: flex;
5216
+ flex-grow: 1;
5217
+ gap: 1rem;
5218
+ }
5219
+ .bs-tab-list-tabs :where([role="tab"]) {
5218
5220
  align-items: center;
5219
- gap: 0.375rem;
5220
5221
  color: var(--tab-color, var(--bs-ink-light));
5221
- -moz-column-gap: .5rem;
5222
- column-gap: .5rem;
5222
+ -moz-column-gap: 0.5rem;
5223
+ column-gap: 0.5rem;
5223
5224
  cursor: var(--tab-cursor);
5225
+ display: var(--tab-display);
5224
5226
  flex-basis: var(--tab-basis, content);
5225
5227
  flex-grow: var(--tab-grow, 1);
5226
5228
  flex-shrink: var(--tab-shrink, 0);
5229
+ font-size: inherit;
5230
+ font-weight: var(--tab-weight, var(--bs-font-normal));
5227
5231
  height: 2.5rem;
5228
5232
  justify-content: var(--tab-justify-self, center);
5229
- padding: .5rem;
5230
5233
  outline-color: var(--bs-blue-base);
5231
5234
  outline-offset: -1px;
5235
+ padding: 0.5rem;
5232
5236
  text-decoration: none;
5233
- border-bottom: 1px solid var(--bs-border-base);
5234
- border-top: none;
5235
- border-left: none;
5236
- border-right: none;
5237
- border-radius: 0;
5238
- background: none;
5239
5237
  }
5240
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"]):where([tabindex="-1"]) {
5238
+ .bs-tab-list-tabs :where([role="tab"][tabindex="-1"]) {
5241
5239
  --tab-cursor: default;
5242
5240
  }
5243
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"][data-hidden]:not([data-hidden="false"])), :is(bs-tab-list-toggle, .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])) {
5244
- display: none;
5241
+ .bs-tab-list-tabs :where([role="tab"][data-hidden="true"]) {
5242
+ --tab-display: none;
5245
5243
  }
5246
- :is(bs-tab-list, .bs-tab-list) :where([role="tab"][data-hidden]:not([data-hidden="false"])):where([aria-selected]:not([aria-selected="false"])), :is(bs-tab-list-toggle, .bs-tab-list-toggle):where([data-hidden]:not([data-hidden="false"])):where([data-active]:not([data-active="false"])) {
5244
+ .bs-tab-list-tabs :where([role="tab"][aria-selected="true"]) {
5247
5245
  --tab-color: var(--bs-ink-base);
5248
5246
  --tab-weight: var(--bs-font-bold);
5249
5247
  }
5250
5248
  /* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
5251
- :is(.bs-tab-list, bs-tab-list):where([data-resizing="true"]) {
5249
+ .bs-tab-list:where([data-resizing="true"]) {
5252
5250
  --tab-basis: auto;
5253
5251
  --tab-grow: 0;
5254
5252
  --tab-justify-self: flex-start;
5255
5253
  --tab-shrink: 0;
5256
5254
  }
5257
5255
  @media (min-width: 1166px) {
5258
- :is(.bs-tab-list, bs-tab-list) {
5256
+ .bs-tab-list {
5259
5257
  --tab-basis: auto;
5260
5258
  --tab-grow: 0;
5261
5259
  --tab-justify-self: flex-start;
@@ -5263,25 +5261,47 @@ a.bs-profile:where([data-layout]):hover {
5263
5261
  }
5264
5262
  }
5265
5263
  /* ------------- Active line ------------- */
5266
- :is(.bs-tab-list, bs-tab-list)::after {
5264
+ .bs-tab-list::after {
5267
5265
  background-color: var(--bs-blue-base);
5268
5266
  bottom: 0;
5269
5267
  content: '';
5270
- height: .25rem;
5268
+ height: 0.25rem;
5271
5269
  left: 0;
5272
5270
  position: absolute;
5273
- transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
5274
5271
  transform-origin: top left;
5272
+ transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
5275
5273
  transition: transform var(--active-line-transition-duration) ease-in;
5276
5274
  width: 100%;
5277
5275
  }
5278
5276
  /* ------------- Tab Panels ------------- */
5279
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"]) {
5277
+ .bs-tab-panel:where([role="tabpanel"]) {
5280
5278
  display: none;
5281
5279
  }
5282
- :where(.bs-tab-panel, bs-tab-panel):where([role="tabpanel"][data-active]:not([data-active="false"])) {
5280
+ .bs-tab-panel:where([role="tabpanel"][data-active="true"]) {
5283
5281
  display: block;
5284
5282
  }
5283
+ /* ------------- Toggle ------------- */
5284
+ .bs-tab-list-toggle {
5285
+ align-items: center;
5286
+ color: var(--tab-color, var(--bs-ink-light));
5287
+ -moz-column-gap: 0.5rem;
5288
+ column-gap: 0.5rem;
5289
+ cursor: pointer;
5290
+ display: inline-flex;
5291
+ font-size: var(--tab-text-size, 0.875rem);
5292
+ font-weight: var(--tab-weight, var(--bs-font-normal));
5293
+ gap: 0.375rem;
5294
+ height: 2.5rem;
5295
+ justify-content: var(--tab-justify-self, center);
5296
+ padding: 0.5rem;
5297
+ }
5298
+ .bs-tab-list-toggle:where([data-hidden="true"]) {
5299
+ display: none;
5300
+ }
5301
+ .bs-tab-list-toggle:where([data-active="true"]) {
5302
+ color: var(--bs-ink-base);
5303
+ font-weight: var(--bs-font-bold);
5304
+ }
5285
5305
  /* ------ WRAPPER ------ */
5286
5306
  .bs-table-wrap {
5287
5307
  display: flex;