@planningcenter/tapestry 3.1.0-rc.7 → 3.1.0-rc.8

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/reactRender.css +779 -781
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +779 -781
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +38 -40
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,504 +1,179 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
14
25
 
15
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
16
28
 
17
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
18
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
19
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
20
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
21
32
 
22
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
23
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
24
- --tds-sidenav-item-nested-background-selected:transparent;
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
25
35
 
26
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
27
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
28
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
29
39
 
30
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
31
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
32
45
  }
33
46
 
34
- .tds-sidenav--theme-gray{
35
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
36
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
37
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
38
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
39
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
40
49
  }
41
- }
42
50
 
43
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
44
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
45
56
  }
46
57
 
47
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
48
- flex-direction:column;
49
- gap:var(--t-spacing-half);
50
- width:100%;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
+ }
51
76
  }
52
-
53
- .tds-sidenav-section-list{
54
- width:100%;
55
- padding:0;
56
- margin:0;
57
- list-style:none;
58
77
  }
59
78
 
60
- .tds-sidenav-section-header{
79
+ .tds-page-header{
61
80
  display:flex;
62
- align-items:baseline;
63
- justify-content:space-between;
64
- padding-top:var(--t-spacing-2);
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
65
86
  }
66
87
 
67
- .tds-sidenav-section-header h2{
68
- margin:0;
69
- font-size:var(--t-font-size-sm);
70
- font-weight:var(--t-font-weight-semibold);
71
- line-height:1.35;
72
- color:var(--t-text-color-secondary);
73
- text-transform:uppercase;
74
- }
75
-
76
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
77
- padding-top:0;
78
- }
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
79
91
 
80
- .tds-sidenav-section-header [slot="label-actions"]{
81
- display:flex;
82
- gap:var(--t-spacing-half);
83
- align-items:center;
84
- }
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
94
+ }
85
95
 
86
- .tds-sidenav-section [slot="section-actions"]{
96
+ .tds-page-header__title-bar{
87
97
  display:flex;
88
- gap:12px;
98
+ flex-direction:column;
99
+ gap:var(--t-spacing-2) var(--t-spacing-1);
100
+ align-items:flex-start;
101
+ justify-content:space-between;
102
+ padding:0 var(--tds-page-header-padding-x);
103
+ }
104
+
105
+ .tds-page-header--profile > .tds-page-header__title-bar{
89
106
  align-items:center;
90
- min-height:42px;
91
- padding:var(--t-spacing-1) 0;
92
107
  }
93
108
 
94
- .tds-sidenav-section-list,
95
- .tds-sidenav-item{
109
+ .tds-page-header__primary{
96
110
  width:100%;
97
- padding:0;
111
+ }
112
+
113
+ .tds-page-header__primary h1{
98
114
  margin:0;
115
+ font-size:var(--tds-page-header-headline-font-size);
116
+ font-weight:var(--t-font-weight-normal);
117
+ line-height:32px;
118
+ color:var(--tds-page-header-headline-color);
119
+ overflow-wrap:break-word;
99
120
  }
100
121
 
101
- .tds-sidenav-item :is(a,button){
102
- position:relative;
103
- display:flex;
104
- gap:12px;
105
- align-items:center;
106
- width:100%;
107
- padding:12px;
108
- overflow:hidden;
109
- font-size:var(--t-font-size-sm);
110
- line-height:18px;
111
- color:var(--t-text-color-headline);
112
- white-space:nowrap;
113
- text-decoration:none;
114
- -webkit-appearance:none;
115
- -moz-appearance:none;
116
- appearance:none;
117
- cursor:pointer;
118
- background-color:var(--tds-sidenav-item-background, transparent);
119
- border:0;
120
- border-radius:var(--t-border-radius);
121
- transition:var(--tds-sidenav-item-transition);
122
- }
122
+ .tds-page-header [slot="actions"],
123
+ .tds-page-header .tds-page-header__actions{
124
+ width:100%;
125
+ }
123
126
 
124
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
125
- display:block;
126
- flex:1;
127
- overflow:hidden;
128
- text-overflow:ellipsis;
129
- text-align:left;
130
- white-space:nowrap;
131
- }
127
+ .has-multi-actions.tds-page-header [slot="actions"],
128
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
129
+ display:flex;
130
+ flex-flow:row wrap;
131
+ gap:var(--t-spacing-half) var(--t-spacing-1);
132
+ align-items:flex-start;
133
+ justify-content:flex-start;
134
+ min-width:0;
135
+ }
132
136
 
133
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
134
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
135
- color:var(--t-text-color-headline);
136
- text-decoration:none;
137
- }
137
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
138
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
139
+ .tds-page-header nav[slot="navigation"] ul,
140
+ .tds-page-header nav.tds-page-header__nav ul{
141
+ display:flex;
142
+ gap:var(--tds-page-header-nav-gap);
143
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
144
+ margin:0 0 -1px;
145
+ overflow:auto;
146
+ list-style:none;
147
+ background:var(--tds-page-header-nav-background);
148
+ }
138
149
 
139
- :is(.tds-sidenav-item :is(a,button)):active{
140
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
141
- }
150
+ .tds-page-header nav[slot="navigation"] a,
151
+ .tds-page-header nav[slot="navigation"] button,
152
+ .tds-page-header nav.tds-page-header__nav a,
153
+ .tds-page-header nav.tds-page-header__nav button{
154
+ position:relative;
155
+ display:inline-flex;
156
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
157
+ font-size:var(--t-font-size-sm);
158
+ line-height:22px;
159
+ color:var(--tds-page-header-nav-item-color);
160
+ white-space:nowrap;
161
+ text-decoration:none;
162
+ -webkit-appearance:none;
163
+ -moz-appearance:none;
164
+ appearance:none;
165
+ cursor:pointer;
166
+ outline-offset:-2px;
167
+ background-color:var(--tds-page-header-nav-item-background-color);
168
+ background-clip:padding-box;
169
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
170
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
171
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
172
+ }
142
173
 
143
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
144
- overflow:hidden;
145
- color:var(--tds-sidenav-item-icon-color);
146
- }
147
-
148
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
149
- display:block;
150
- width:var(--tds-sidenav-item-icon-size);
151
- height:var(--tds-sidenav-item-icon-size);
152
- }
153
-
154
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
155
- --tds-sidenav-indent:19px;
156
- }
157
-
158
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
159
- visibility:visible;
160
- block-size:auto;
161
- opacity:1;
162
- }
163
-
164
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
165
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
166
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
167
-
168
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
169
- font-weight:var(--t-font-weight-semibold);
170
- }
171
-
172
- .tds-sidenav-item:has(.tds-sidenav-section){
173
- display:flex;
174
- flex-direction:column;
175
- gap:var(--t-spacing-half);
176
- }
177
-
178
- .tds-sidenav-item .tds-sidenav-section-list{
179
- --tds-sidenav-item-depth:1;
180
- gap:0;
181
- }
182
-
183
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
184
- visibility:hidden;
185
- block-size:0;
186
- overflow-y:clip;
187
- opacity:0;
188
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
189
- }
190
-
191
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
192
- --tds-sidenav-item-depth:2;
193
- }
194
-
195
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
196
- min-height:var(--t-element-size-2xl);
197
- padding-block:9px;
198
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
199
- line-height:1;
200
- background-color:transparent;
201
- }
202
-
203
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
204
- position:absolute;
205
- top:0;
206
- bottom:0;
207
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
208
- width:2px;
209
- content:"";
210
- background-color:var(--tds-sidenav-item-nested-border-color);
211
- transition:var(--tds-sidenav-item-transition);
212
- }
213
-
214
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
215
- position:absolute;
216
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
217
- z-index:-1;
218
- height:100%;
219
- content:"";
220
- background-color:var(--tds-sidenav-item-nested-background);
221
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
222
- transition:var(--tds-sidenav-item-transition);
223
- }
224
-
225
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
226
- display:block;
227
- text-align:left;
228
- white-space:normal;
229
- }
230
-
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
232
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
233
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
234
- }
235
-
236
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
237
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
238
- }
239
-
240
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
241
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
242
- font-weight:var(--t-font-weight-medium);
243
- }
244
-
245
- .tds-sidenav-responsive-header{
246
- display:flex;
247
- gap:var(--t-spacing-2);
248
- align-items:center;
249
- width:100%;
250
- }
251
-
252
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
253
- order:0;
254
- }
255
-
256
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
257
- flex:1;
258
- order:1;
259
- margin:0;
260
- font-size:var(--t-font-size-lg);
261
- font-weight:var(--t-font-weight-medium);
262
- color:var(--t-text-color-headline);
263
- }
264
-
265
- @media (max-width: 719px){
266
- .tds-sidenav-collapse{
267
- z-index:10001;
268
- display:none;
269
- max-width:min(448px, calc(100vw - 48px));
270
- padding:0;
271
- margin:12px 0;
272
- overflow:hidden;
273
- outline:0;
274
- background:var(--t-surface-color-card);
275
- border:0;
276
- border-radius:6px;
277
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
278
- will-change:transform;
279
- position-area:bottom span-right;
280
- }
281
-
282
- .tds-sidenav-scroll-container{
283
- --webkit-overflow-scrolling:touch;
284
- display:block;
285
- width:100%;
286
- height:-moz-fit-content;
287
- height:fit-content;
288
- padding:var(--t-spacing-2);
289
- overflow-y:auto;
290
- }
291
-
292
- .tds-sidenav-item :is(a, button) :is(.prefix){
293
- display:none;
294
- }
295
- @supports selector(:popover-open){
296
- .tds-sidenav-collapse:popover-open{
297
- display:flex;
298
- }
299
- }
300
- @supports not selector(:popover-open){
301
- .tds-sidenav-collapse.\:popover-open{
302
- display:flex;
303
- }
304
- }
305
- }
306
-
307
- @media (min-width: 720px){
308
- .tds-sidenav-responsive-header{
309
- display:none;
310
- }
311
- }
312
-
313
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
314
- display:none;
315
- }
316
-
317
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
318
- display:block;
319
- }
320
-
321
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
322
- display:flex;
323
- flex-direction:column;
324
- }
325
-
326
- @layer t-critical{
327
- tds-page-header:not(.hydrated){
328
- display:none;
329
- }
330
- }
331
-
332
- @layer t-component{
333
- .tds-page-header{
334
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
335
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
336
- --tds-page-header-color:var(--t-text-color);
337
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
338
- --tds-page-header-headline-color:var(--t-text-color-headline);
339
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
340
- --tds-page-header-padding-x:var(--t-spacing-2);
341
- --tds-page-header-padding-y:var(--t-spacing-2);
342
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
343
- --tds-page-header-nav-gap:var(--t-spacing-1);
344
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
345
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
346
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
347
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
348
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
349
- --tds-page-header-nav-item-border-width:1px;
350
-
351
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
352
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
353
-
354
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
355
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
356
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
357
-
358
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
359
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
360
-
361
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
362
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
363
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
364
-
365
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
366
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
367
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
368
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
369
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
370
- }
371
-
372
- .tds-page-header--profile{
373
- --tds-page-header-padding-y:20px;
374
- }
375
-
376
- @supports (color: light-dark(#fff, #000)){
377
- .tds-page-header{
378
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
379
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
380
- }
381
- }
382
-
383
- @media (min-width: 600px){
384
- .tds-page-header{
385
- --tds-page-header-background-color:var(--t-surface-color-canvas);
386
- --tds-page-header-color:var(--t-text-color-secondary);
387
- --tds-page-header-bottom-border-color:var(--t-border-color);
388
- --tds-page-header-padding-x:var(--t-spacing-3);
389
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
390
- --tds-page-header-nav-gap:var(--t-spacing-half);
391
- --tds-page-header-nav-background:transparent;
392
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
393
- --tds-page-header-nav-item-border-width:1px;
394
- --tds-page-header-nav-item-color:var(--t-text-color);
395
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
396
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
397
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
398
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
399
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
400
- }
401
- }
402
- }
403
-
404
- .tds-page-header{
405
- display:flex;
406
- flex-direction:column;
407
- padding-top:var(--tds-page-header-padding-y);
408
- color:var(--tds-page-header-color);
409
- background:var(--tds-page-header-background-color);
410
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
411
- }
412
-
413
- .tds-page-header:not(.has-nav){
414
- padding-bottom:var(--tds-page-header-padding-y);
415
- }
416
-
417
- .tds-page-header.inactive{
418
- background:var(--tds-page-header-background-color-inactive);
419
- }
420
-
421
- .tds-page-header__title-bar{
422
- display:flex;
423
- flex-direction:column;
424
- gap:var(--t-spacing-2) var(--t-spacing-1);
425
- align-items:flex-start;
426
- justify-content:space-between;
427
- padding:0 var(--tds-page-header-padding-x);
428
- }
429
-
430
- .tds-page-header--profile > .tds-page-header__title-bar{
431
- align-items:center;
432
- }
433
-
434
- .tds-page-header__primary{
435
- width:100%;
436
- }
437
-
438
- .tds-page-header__primary h1{
439
- margin:0;
440
- font-size:var(--tds-page-header-headline-font-size);
441
- font-weight:var(--t-font-weight-normal);
442
- line-height:32px;
443
- color:var(--tds-page-header-headline-color);
444
- overflow-wrap:break-word;
445
- }
446
-
447
- .tds-page-header [slot="actions"],
448
- .tds-page-header .tds-page-header__actions{
449
- width:100%;
450
- }
451
-
452
- .has-multi-actions.tds-page-header [slot="actions"],
453
- .has-multi-actions.tds-page-header .tds-page-header__actions{
454
- display:flex;
455
- flex-flow:row wrap;
456
- gap:var(--t-spacing-half) var(--t-spacing-1);
457
- align-items:flex-start;
458
- justify-content:flex-start;
459
- min-width:0;
460
- }
461
-
462
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
463
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
464
- .tds-page-header nav[slot="navigation"] ul,
465
- .tds-page-header nav.tds-page-header__nav ul{
466
- display:flex;
467
- gap:var(--tds-page-header-nav-gap);
468
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
469
- margin:0 0 -1px;
470
- overflow:auto;
471
- list-style:none;
472
- background:var(--tds-page-header-nav-background);
473
- }
474
-
475
- .tds-page-header nav[slot="navigation"] a,
476
- .tds-page-header nav[slot="navigation"] button,
477
- .tds-page-header nav.tds-page-header__nav a,
478
- .tds-page-header nav.tds-page-header__nav button{
479
- position:relative;
480
- display:inline-flex;
481
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
482
- font-size:var(--t-font-size-sm);
483
- line-height:22px;
484
- color:var(--tds-page-header-nav-item-color);
485
- white-space:nowrap;
486
- text-decoration:none;
487
- -webkit-appearance:none;
488
- -moz-appearance:none;
489
- appearance:none;
490
- cursor:pointer;
491
- outline-offset:-2px;
492
- background-color:var(--tds-page-header-nav-item-background-color);
493
- background-clip:padding-box;
494
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
495
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
496
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
497
- }
498
-
499
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
500
- position:relative;
501
- }
174
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
175
+ position:relative;
176
+ }
502
177
 
503
178
  .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
504
179
  -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
@@ -776,28 +451,169 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
776
451
  .tds-checkbox-description{
777
452
  display:flex;
778
453
  grid-area:2 / 2;
779
- gap:4px;
454
+ gap:4px;
455
+ align-items:flex-start;
456
+ margin:0;
457
+ font-size:var(--tds-checkbox-description-font-size);
458
+ line-height:var(--tds-checkbox-description-line-height);
459
+ color:var(--tds-checkbox-description-color);
460
+ cursor:text;
461
+ }
462
+
463
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
464
+ display:var(--tds-checkbox-description-invalid-icon-display);
465
+ flex-shrink:0;
466
+ margin-top:calc(.5lh - .5em);
467
+ line-height:var(--tds-checkbox-description-line-height);
468
+ }
469
+
470
+ .tds-checkbox--sm{
471
+ --tds-checkbox-line-height:1.35;
472
+ --tds-checkbox-input-size:var(--t-element-size-sm);
473
+ --tds-checkbox-font-size:var(--t-font-size-sm);
474
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
475
+ --tds-checkbox-description-line-height:1.3;
476
+ }
477
+
478
+ .tds-toggle-switch{
479
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
480
+ --tds-toggle-switch-column-gap:var(--t-spacing-2);
481
+ --tds-toggle-switch-cursor:pointer;
482
+ --tds-toggle-switch-display:inline-grid;
483
+ --tds-toggle-switch-line-height:1.4;
484
+
485
+ --tds-toggle-switch-label-color:var(--t-text-color);
486
+
487
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
488
+ --tds-toggle-switch-track-outline:none;
489
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
490
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
491
+ --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
492
+
493
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
494
+ --tds-toggle-switch-thumb-transform:translateX(0);
495
+ --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
496
+
497
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
498
+ --tds-toggle-switch-description-line-height:1.35;
499
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
500
+
501
+ display:var(--tds-toggle-switch-display);
502
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
503
+ grid-auto-columns:1fr;
504
+ grid-template-columns:auto;
505
+ position:relative;
506
+ -webkit-user-select:none;
507
+ -moz-user-select:none;
508
+ user-select:none;
509
+ }
510
+
511
+ .tds-toggle-switch input[type="checkbox"]{
512
+ position:absolute;
513
+ width:var(--tds-toggle-switch-track-width);
514
+ height:var(--tds-toggle-switch-track-height);
515
+ margin:0;
516
+ -webkit-appearance:none;
517
+ -moz-appearance:none;
518
+ appearance:none;
519
+ cursor:var(--tds-toggle-switch-cursor);
520
+ background-color:transparent;
521
+ border:0;
522
+ border-radius:var(--t-border-radius-round);
523
+ outline:var(--tds-toggle-switch-track-outline);
524
+ outline-offset:var(--t-focus-ring-offset);
525
+ }
526
+
527
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
528
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
529
+ }
530
+
531
+ .tds-toggle-switch label{
532
+ display:inline-flex;
533
+ grid-area:1 / 2;
534
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
535
+ column-gap:var(--tds-toggle-switch-column-gap);
536
+ margin-top:-.09375em;
537
+ font-size:var(--tds-toggle-switch-font-size);
538
+ font-weight:var(--t-font-weight-normal);
539
+ line-height:var(--tds-toggle-switch-line-height);
540
+ color:var(--tds-toggle-switch-label-color);
541
+ cursor:var(--tds-toggle-switch-cursor);
542
+ }
543
+
544
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
545
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
546
+ }
547
+
548
+ .tds-toggle-switch:has(input:checked){
549
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
550
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
551
+ }
552
+
553
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
554
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
555
+ }
556
+
557
+ .tds-toggle-switch:has(input:disabled){
558
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
559
+ --tds-toggle-switch-label-color:var(--t-text-color-disabled);
560
+ --tds-toggle-switch-description-color:var(--t-text-color-disabled);
561
+ --tds-toggle-switch-cursor:not-allowed;
562
+ }
563
+
564
+ .tds-toggle-switch-track{
565
+ position:relative;
566
+ flex-shrink:0;
567
+ width:var(--tds-toggle-switch-track-width);
568
+ height:var(--tds-toggle-switch-track-height);
569
+ background-color:var(--tds-toggle-switch-track-background-color);
570
+ border-radius:var(--t-border-radius-round);
571
+ transition:var(--tds-toggle-switch-track-transition);
572
+ }
573
+
574
+ .tds-toggle-switch-track::before{
575
+ position:absolute;
576
+ top:var(--t-spacing-fourth);
577
+ left:var(--t-spacing-fourth);
578
+ width:var(--tds-toggle-switch-thumb-size);
579
+ height:var(--tds-toggle-switch-thumb-size);
580
+ content:"";
581
+ background-color:#fff;
582
+ border-radius:var(--t-border-radius-round);
583
+ transform:var(--tds-toggle-switch-thumb-transform);
584
+ transition:var(--tds-toggle-switch-thumb-transition);
585
+ }
586
+
587
+ @media (prefers-reduced-motion: reduce){
588
+
589
+ .tds-toggle-switch-track{
590
+ --tds-toggle-switch-track-transition:none;
591
+ --tds-toggle-switch-thumb-transition:none;
592
+ }
593
+ }
594
+
595
+ .tds-toggle-switch-description{
596
+ display:flex;
597
+ grid-area:2 / 2;
780
598
  align-items:flex-start;
781
599
  margin:0;
782
- font-size:var(--tds-checkbox-description-font-size);
783
- line-height:var(--tds-checkbox-description-line-height);
784
- color:var(--tds-checkbox-description-color);
600
+ font-size:var(--tds-toggle-switch-description-font-size);
601
+ line-height:var(--tds-toggle-switch-description-line-height);
602
+ color:var(--tds-toggle-switch-description-color);
785
603
  cursor:text;
786
604
  }
787
605
 
788
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
789
- display:var(--tds-checkbox-description-invalid-icon-display);
790
- flex-shrink:0;
791
- margin-top:calc(.5lh - .5em);
792
- line-height:var(--tds-checkbox-description-line-height);
793
- }
606
+ .tds-toggle-switch--sm{
607
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
608
+ --tds-toggle-switch-line-height:1.35;
609
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
610
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
611
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
612
+ --tds-toggle-switch-description-line-height:1.3;
613
+ }
794
614
 
795
- .tds-checkbox--sm{
796
- --tds-checkbox-line-height:1.35;
797
- --tds-checkbox-input-size:var(--t-element-size-sm);
798
- --tds-checkbox-font-size:var(--t-font-size-sm);
799
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
800
- --tds-checkbox-description-line-height:1.3;
615
+ .tds-toggle-switch--hide-label{
616
+ --tds-toggle-switch-display:inline-flex;
801
617
  }
802
618
 
803
619
  .tds-radio{
@@ -954,211 +770,395 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
954
770
  border:0;
955
771
  }
956
772
 
957
- .tds-radio-group legend{
958
- padding:0;
959
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
773
+ .tds-radio-group legend{
774
+ padding:0;
775
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
776
+ }
777
+
778
+ .tds-radio-group:has(.tds-radio-group-description){
779
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
780
+ }
781
+
782
+ .tds-radio-group[aria-invalid="true"]{
783
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
784
+ --tds-radio-group-description-invalid-icon-display:inline-block;
785
+ }
786
+
787
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
788
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
789
+ }
790
+
791
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
792
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
793
+ --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
794
+ }
795
+
796
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
797
+ --tds-radio-input-background-color:var(--t-form-background-color);
798
+ }
799
+
800
+ .tds-radio-group:has(input:required) legend::after{
801
+ margin-left:.25ch;
802
+ color:var(--t-text-color-status-error);
803
+ content:"*";
804
+ }
805
+
806
+ .tds-radio-group-fields{
807
+ display:flex;
808
+ flex-direction:column;
809
+ gap:var(--tds-radio-group-gap);
810
+ align-items:flex-start;
811
+ }
812
+
813
+ .tds-radio-group-description{
814
+ display:flex;
815
+ gap:var(--t-spacing-half);
816
+ align-items:flex-start;
817
+ margin:0;
818
+ font-size:var(--tds-radio-group-description-font-size);
819
+ line-height:var(--tds-radio-group-description-line-height);
820
+ color:var(--tds-radio-group-description-color);
821
+ cursor:text;
822
+ }
823
+
824
+ .tds-radio-group-description-invalid-icon{
825
+ display:var(--tds-radio-group-description-invalid-icon-display);
826
+ flex-shrink:0;
827
+ margin-top:calc(.5lh - .5em);
828
+ line-height:var(--tds-radio-group-description-line-height);
829
+ }
830
+
831
+ .tds-radio-group--sm{
832
+ --tds-radio-group-line-height:1.35;
833
+ --tds-radio-group-font-size:var(--t-font-size-sm);
834
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
835
+ --tds-radio-group-description-line-height:1.3;
836
+ }
837
+
838
+
839
+ @media (prefers-reduced-motion: no-preference){
840
+
841
+ :root{
842
+ interpolate-size:allow-keywords;
843
+ }
844
+ }
845
+
846
+ @layer tds-component{
847
+ tds-sidenav,
848
+ .tds-sidenav{
849
+ --tds-sidenav-indent:12px;
850
+ --tds-sidenav-item-depth:0;
851
+
852
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
853
+
854
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
855
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
856
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
857
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
858
+
859
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
860
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
861
+ --tds-sidenav-item-nested-background-selected:transparent;
862
+
863
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
864
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
865
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
866
+
867
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
868
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
869
+ }
870
+
871
+ .tds-sidenav--theme-gray{
872
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
873
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
874
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
875
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
876
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
877
+ }
878
+ }
879
+
880
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
881
+ display:flex;
882
+ }
883
+
884
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
885
+ flex-direction:column;
886
+ gap:var(--t-spacing-half);
887
+ width:100%;
888
+ }
889
+
890
+ .tds-sidenav-section-list{
891
+ width:100%;
892
+ padding:0;
893
+ margin:0;
894
+ list-style:none;
895
+ }
896
+
897
+ .tds-sidenav-section-header{
898
+ display:flex;
899
+ align-items:baseline;
900
+ justify-content:space-between;
901
+ padding-top:var(--t-spacing-2);
902
+ }
903
+
904
+ .tds-sidenav-section-header h2{
905
+ margin:0;
906
+ font-size:var(--t-font-size-sm);
907
+ font-weight:var(--t-font-weight-semibold);
908
+ line-height:1.35;
909
+ color:var(--t-text-color-secondary);
910
+ text-transform:uppercase;
911
+ }
912
+
913
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
914
+ padding-top:0;
915
+ }
916
+
917
+ .tds-sidenav-section-header [slot="label-actions"]{
918
+ display:flex;
919
+ gap:var(--t-spacing-half);
920
+ align-items:center;
921
+ }
922
+
923
+ .tds-sidenav-section [slot="section-actions"]{
924
+ display:flex;
925
+ gap:12px;
926
+ align-items:center;
927
+ min-height:42px;
928
+ padding:var(--t-spacing-1) 0;
929
+ }
930
+
931
+ .tds-sidenav-section-list,
932
+ .tds-sidenav-item{
933
+ width:100%;
934
+ padding:0;
935
+ margin:0;
936
+ }
937
+
938
+ .tds-sidenav-item :is(a,button){
939
+ position:relative;
940
+ display:flex;
941
+ gap:12px;
942
+ align-items:center;
943
+ width:100%;
944
+ padding:12px;
945
+ overflow:hidden;
946
+ font-size:var(--t-font-size-sm);
947
+ line-height:18px;
948
+ color:var(--t-text-color-headline);
949
+ white-space:nowrap;
950
+ text-decoration:none;
951
+ -webkit-appearance:none;
952
+ -moz-appearance:none;
953
+ appearance:none;
954
+ cursor:pointer;
955
+ background-color:var(--tds-sidenav-item-background, transparent);
956
+ border:0;
957
+ border-radius:var(--t-border-radius);
958
+ transition:var(--tds-sidenav-item-transition);
959
+ }
960
+
961
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
962
+ display:block;
963
+ flex:1;
964
+ overflow:hidden;
965
+ text-overflow:ellipsis;
966
+ text-align:left;
967
+ white-space:nowrap;
968
+ }
969
+
970
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
971
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
972
+ color:var(--t-text-color-headline);
973
+ text-decoration:none;
974
+ }
975
+
976
+ :is(.tds-sidenav-item :is(a,button)):active{
977
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
978
+ }
979
+
980
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
981
+ overflow:hidden;
982
+ color:var(--tds-sidenav-item-icon-color);
983
+ }
984
+
985
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
986
+ display:block;
987
+ width:var(--tds-sidenav-item-icon-size);
988
+ height:var(--tds-sidenav-item-icon-size);
989
+ }
990
+
991
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
992
+ --tds-sidenav-indent:19px;
993
+ }
994
+
995
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
996
+ visibility:visible;
997
+ block-size:auto;
998
+ opacity:1;
999
+ }
1000
+
1001
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1002
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1003
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1004
+
1005
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1006
+ font-weight:var(--t-font-weight-semibold);
960
1007
  }
961
1008
 
962
- .tds-radio-group:has(.tds-radio-group-description){
963
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1009
+ .tds-sidenav-item:has(.tds-sidenav-section){
1010
+ display:flex;
1011
+ flex-direction:column;
1012
+ gap:var(--t-spacing-half);
964
1013
  }
965
1014
 
966
- .tds-radio-group[aria-invalid="true"]{
967
- --tds-radio-group-description-color:var(--t-text-color-status-error);
968
- --tds-radio-group-description-invalid-icon-display:inline-block;
1015
+ .tds-sidenav-item .tds-sidenav-section-list{
1016
+ --tds-sidenav-item-depth:1;
1017
+ gap:0;
969
1018
  }
970
1019
 
971
- .tds-radio-group[aria-invalid="true"] .tds-radio{
972
- --tds-radio-input-border-color:var(--t-border-color-control-error);
1020
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1021
+ visibility:hidden;
1022
+ block-size:0;
1023
+ overflow-y:clip;
1024
+ opacity:0;
1025
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
973
1026
  }
974
1027
 
975
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
976
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
977
- --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
978
- }
979
-
980
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
981
- --tds-radio-input-background-color:var(--t-form-background-color);
982
- }
983
-
984
- .tds-radio-group:has(input:required) legend::after{
985
- margin-left:.25ch;
986
- color:var(--t-text-color-status-error);
987
- content:"*";
1028
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1029
+ --tds-sidenav-item-depth:2;
988
1030
  }
989
1031
 
990
- .tds-radio-group-fields{
991
- display:flex;
992
- flex-direction:column;
993
- gap:var(--tds-radio-group-gap);
994
- align-items:flex-start;
995
- }
996
-
997
- .tds-radio-group-description{
998
- display:flex;
999
- gap:var(--t-spacing-half);
1000
- align-items:flex-start;
1001
- margin:0;
1002
- font-size:var(--tds-radio-group-description-font-size);
1003
- line-height:var(--tds-radio-group-description-line-height);
1004
- color:var(--tds-radio-group-description-color);
1005
- cursor:text;
1006
- }
1007
-
1008
- .tds-radio-group-description-invalid-icon{
1009
- display:var(--tds-radio-group-description-invalid-icon-display);
1010
- flex-shrink:0;
1011
- margin-top:calc(.5lh - .5em);
1012
- line-height:var(--tds-radio-group-description-line-height);
1013
- }
1032
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1033
+ min-height:var(--t-element-size-2xl);
1034
+ padding-block:9px;
1035
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1036
+ line-height:1;
1037
+ background-color:transparent;
1038
+ }
1014
1039
 
1015
- .tds-radio-group--sm{
1016
- --tds-radio-group-line-height:1.35;
1017
- --tds-radio-group-font-size:var(--t-font-size-sm);
1018
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1019
- --tds-radio-group-description-line-height:1.3;
1020
- }
1040
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1041
+ position:absolute;
1042
+ top:0;
1043
+ bottom:0;
1044
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1045
+ width:2px;
1046
+ content:"";
1047
+ background-color:var(--tds-sidenav-item-nested-border-color);
1048
+ transition:var(--tds-sidenav-item-transition);
1049
+ }
1021
1050
 
1022
- .tds-toggle-switch{
1023
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1024
- --tds-toggle-switch-column-gap:var(--t-spacing-2);
1025
- --tds-toggle-switch-cursor:pointer;
1026
- --tds-toggle-switch-display:inline-grid;
1027
- --tds-toggle-switch-line-height:1.4;
1051
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1052
+ position:absolute;
1053
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1054
+ z-index:-1;
1055
+ height:100%;
1056
+ content:"";
1057
+ background-color:var(--tds-sidenav-item-nested-background);
1058
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1059
+ transition:var(--tds-sidenav-item-transition);
1060
+ }
1028
1061
 
1029
- --tds-toggle-switch-label-color:var(--t-text-color);
1062
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1063
+ display:block;
1064
+ text-align:left;
1065
+ white-space:normal;
1066
+ }
1030
1067
 
1031
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1032
- --tds-toggle-switch-track-outline:none;
1033
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1034
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
1035
- --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
1068
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1069
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1070
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1071
+ }
1036
1072
 
1037
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1038
- --tds-toggle-switch-thumb-transform:translateX(0);
1039
- --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
1073
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1074
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1075
+ }
1040
1076
 
1041
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1042
- --tds-toggle-switch-description-line-height:1.35;
1043
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1077
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1078
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1079
+ font-weight:var(--t-font-weight-medium);
1080
+ }
1044
1081
 
1045
- display:var(--tds-toggle-switch-display);
1046
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1047
- grid-auto-columns:1fr;
1048
- grid-template-columns:auto;
1049
- position:relative;
1050
- -webkit-user-select:none;
1051
- -moz-user-select:none;
1052
- user-select:none;
1082
+ .tds-sidenav-responsive-header{
1083
+ display:flex;
1084
+ gap:var(--t-spacing-2);
1085
+ align-items:center;
1086
+ width:100%;
1053
1087
  }
1054
1088
 
1055
- .tds-toggle-switch input[type="checkbox"]{
1056
- position:absolute;
1057
- width:var(--tds-toggle-switch-track-width);
1058
- height:var(--tds-toggle-switch-track-height);
1059
- margin:0;
1060
- -webkit-appearance:none;
1061
- -moz-appearance:none;
1062
- appearance:none;
1063
- cursor:var(--tds-toggle-switch-cursor);
1064
- background-color:transparent;
1065
- border:0;
1066
- border-radius:var(--t-border-radius-round);
1067
- outline:var(--tds-toggle-switch-track-outline);
1068
- outline-offset:var(--t-focus-ring-offset);
1089
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1090
+ order:0;
1069
1091
  }
1070
1092
 
1071
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1072
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1073
- }
1074
-
1075
- .tds-toggle-switch label{
1076
- display:inline-flex;
1077
- grid-area:1 / 2;
1078
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1079
- column-gap:var(--tds-toggle-switch-column-gap);
1080
- margin-top:-.09375em;
1081
- font-size:var(--tds-toggle-switch-font-size);
1082
- font-weight:var(--t-font-weight-normal);
1083
- line-height:var(--tds-toggle-switch-line-height);
1084
- color:var(--tds-toggle-switch-label-color);
1085
- cursor:var(--tds-toggle-switch-cursor);
1093
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1094
+ flex:1;
1095
+ order:1;
1096
+ margin:0;
1097
+ font-size:var(--t-font-size-lg);
1098
+ font-weight:var(--t-font-weight-medium);
1099
+ color:var(--t-text-color-headline);
1086
1100
  }
1087
1101
 
1088
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1089
- --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
1102
+ @media (max-width: 719px){
1103
+ .tds-sidenav-collapse{
1104
+ z-index:10001;
1105
+ display:none;
1106
+ max-width:min(448px, calc(100vw - 48px));
1107
+ padding:0;
1108
+ margin:12px 0;
1109
+ overflow:hidden;
1110
+ outline:0;
1111
+ background:var(--t-surface-color-card);
1112
+ border:0;
1113
+ border-radius:6px;
1114
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1115
+ will-change:transform;
1116
+ position-area:bottom span-right;
1090
1117
  }
1091
1118
 
1092
- .tds-toggle-switch:has(input:checked){
1093
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
1094
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1119
+ .tds-sidenav-scroll-container{
1120
+ --webkit-overflow-scrolling:touch;
1121
+ display:block;
1122
+ width:100%;
1123
+ height:-moz-fit-content;
1124
+ height:fit-content;
1125
+ padding:var(--t-spacing-2);
1126
+ overflow-y:auto;
1095
1127
  }
1096
1128
 
1097
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1098
- --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
1129
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1130
+ display:none;
1131
+ }
1132
+ @supports selector(:popover-open){
1133
+ .tds-sidenav-collapse:popover-open{
1134
+ display:flex;
1099
1135
  }
1100
-
1101
- .tds-toggle-switch:has(input:disabled){
1102
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
1103
- --tds-toggle-switch-label-color:var(--t-text-color-disabled);
1104
- --tds-toggle-switch-description-color:var(--t-text-color-disabled);
1105
- --tds-toggle-switch-cursor:not-allowed;
1106
1136
  }
1107
-
1108
- .tds-toggle-switch-track{
1109
- position:relative;
1110
- flex-shrink:0;
1111
- width:var(--tds-toggle-switch-track-width);
1112
- height:var(--tds-toggle-switch-track-height);
1113
- background-color:var(--tds-toggle-switch-track-background-color);
1114
- border-radius:var(--t-border-radius-round);
1115
- transition:var(--tds-toggle-switch-track-transition);
1116
- }
1117
-
1118
- .tds-toggle-switch-track::before{
1119
- position:absolute;
1120
- top:var(--t-spacing-fourth);
1121
- left:var(--t-spacing-fourth);
1122
- width:var(--tds-toggle-switch-thumb-size);
1123
- height:var(--tds-toggle-switch-thumb-size);
1124
- content:"";
1125
- background-color:#fff;
1126
- border-radius:var(--t-border-radius-round);
1127
- transform:var(--tds-toggle-switch-thumb-transform);
1128
- transition:var(--tds-toggle-switch-thumb-transition);
1137
+ @supports not selector(:popover-open){
1138
+ .tds-sidenav-collapse.\:popover-open{
1139
+ display:flex;
1140
+ }
1129
1141
  }
1130
-
1131
- @media (prefers-reduced-motion: reduce){
1132
-
1133
- .tds-toggle-switch-track{
1134
- --tds-toggle-switch-track-transition:none;
1135
- --tds-toggle-switch-thumb-transition:none;
1136
1142
  }
1137
- }
1138
1143
 
1139
- .tds-toggle-switch-description{
1140
- display:flex;
1141
- grid-area:2 / 2;
1142
- align-items:flex-start;
1143
- margin:0;
1144
- font-size:var(--tds-toggle-switch-description-font-size);
1145
- line-height:var(--tds-toggle-switch-description-line-height);
1146
- color:var(--tds-toggle-switch-description-color);
1147
- cursor:text;
1144
+ @media (min-width: 720px){
1145
+ .tds-sidenav-responsive-header{
1146
+ display:none;
1147
+ }
1148
1148
  }
1149
1149
 
1150
- .tds-toggle-switch--sm{
1151
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1152
- --tds-toggle-switch-line-height:1.35;
1153
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1154
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1155
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1156
- --tds-toggle-switch-description-line-height:1.3;
1157
- }
1150
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1151
+ display:none;
1152
+ }
1158
1153
 
1159
- .tds-toggle-switch--hide-label{
1160
- --tds-toggle-switch-display:inline-flex;
1161
- }
1154
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1155
+ display:block;
1156
+ }
1157
+
1158
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1159
+ display:flex;
1160
+ flex-direction:column;
1161
+ }
1162
1162
 
1163
1163
  .tds-loading-spinner{
1164
1164
  --tds-loading-spinner-size:1.25em;
@@ -2562,6 +2562,111 @@ a[class="tds-btn"]{
2562
2562
  }
2563
2563
  }
2564
2564
 
2565
+ .tds-input:has(textarea){
2566
+ --tds-input-padding-block:6px;
2567
+ --tds-input-resizer-size:var(--t-element-size-sm);
2568
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2569
+ }
2570
+
2571
+ @supports (x: attr(x type(*))){
2572
+
2573
+ .tds-input:has(textarea){
2574
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2575
+ }
2576
+ }
2577
+
2578
+ .tds-input.tds-textarea--resize-vertical textarea{
2579
+ resize:vertical;
2580
+ }
2581
+
2582
+ .tds-input.tds-textarea--resize-none textarea{
2583
+ resize:none;
2584
+ }
2585
+
2586
+ .tds-input.tds-textarea--resize-auto textarea{
2587
+ resize:vertical;
2588
+ }
2589
+
2590
+ @supports (field-sizing: content){
2591
+ .tds-input.tds-textarea--resize-auto textarea{
2592
+ field-sizing:content;
2593
+ resize:none;
2594
+ }
2595
+ }
2596
+
2597
+ .tds-input textarea{
2598
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2599
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2600
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2601
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2602
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2603
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2604
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2605
+ --tds-input-scrollbar-thumb-border-radius:999px;
2606
+ --tds-input-scrollbar-thumb-border-width:3px;
2607
+ --tds-input-scrollbar-track-margin-block:.125rem;
2608
+ scrollbar-color:initial;
2609
+ transition-timing-function:ease-in-out;
2610
+ transition-duration:180ms;
2611
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2612
+ }
2613
+
2614
+ @media (pointer: fine){
2615
+ :is(.tds-input textarea)::-webkit-scrollbar{
2616
+ width:12px;
2617
+ height:12px;
2618
+ cursor:default;
2619
+ }
2620
+
2621
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2622
+ cursor:default;
2623
+ background:var(--tds-input-scrollbar-thumb-color);
2624
+ background-clip:content-box;
2625
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2626
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2627
+ }
2628
+
2629
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2630
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2631
+ }
2632
+
2633
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2634
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2635
+ }
2636
+
2637
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2638
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2639
+ }
2640
+
2641
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2642
+ background:var(--tds-input-scrollbar-surface-color);
2643
+ }
2644
+
2645
+ :is(.tds-input textarea)::-webkit-resizer{
2646
+ background:var(--tds-input-resizer-icon) no-repeat;
2647
+ background-position:right bottom;
2648
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2649
+ }
2650
+
2651
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2652
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2653
+ cursor:default;
2654
+ }
2655
+
2656
+ @supports (-moz-appearance: none){
2657
+ :is(.tds-input textarea){
2658
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2659
+ scrollbar-width:thin;
2660
+ }
2661
+
2662
+ @media (hover){
2663
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2664
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2665
+ }
2666
+ }
2667
+ }
2668
+ }
2669
+
2565
2670
  .tds-select{
2566
2671
  --tds-select-border-color:var(--t-form-border-color);
2567
2672
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -2603,14 +2708,14 @@ a[class="tds-btn"]{
2603
2708
  --tds-select-option-outline-offset:-1px;
2604
2709
  --tds-select-option-border-radius:var(--t-border-radius);
2605
2710
 
2606
- --tds-select-group-label-padding-block-start:12px;
2607
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) 6px;
2608
- --tds-select-group-label-padding-inline:10px;
2609
- --tds-select-group-label-font-size:11px;
2610
- --tds-select-group-label-font-weight:700;
2611
- --tds-select-group-label-letter-spacing:.15em;
2612
- --tds-select-group-label-text-color:var(--t-text-color-secondary);
2613
- --tds-select-group-label-text-color-stuck:var(--t-text-color-headline);
2711
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2712
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2713
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
2714
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
2715
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2716
+ --tds-select-group-label-letter-spacing:0;
2717
+ --tds-select-group-label-color:var(--t-text-color-secondary);
2718
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2614
2719
  --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2615
2720
  --tds-select-group-label-transition:color .3s ease;
2616
2721
 
@@ -2695,7 +2800,6 @@ a[class="tds-btn"]{
2695
2800
  --tds-select-border-color:var(--t-form-border-color-disabled);
2696
2801
  --tds-select-background-color:var(--t-form-background-color-disabled);
2697
2802
  --tds-select-color:var(--t-form-color-disabled);
2698
- --tds-select-description-color:var(--t-text-color-disabled);
2699
2803
  --tds-select-cursor:not-allowed;
2700
2804
  }
2701
2805
 
@@ -2793,10 +2897,10 @@ a[class="tds-btn"]{
2793
2897
  overflow:auto;
2794
2898
  overflow-x:hidden;
2795
2899
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2796
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2797
2900
  -webkit-user-select:none;
2798
2901
  -moz-user-select:none;
2799
2902
  user-select:none;
2903
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2800
2904
 
2801
2905
  scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2802
2906
  scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
@@ -2876,7 +2980,6 @@ a[class="tds-btn"]{
2876
2980
  container-type:scroll-state;
2877
2981
  font-size:var(--tds-select-group-label-font-size);
2878
2982
  font-weight:var(--tds-select-group-label-font-weight);
2879
- text-transform:uppercase;
2880
2983
  letter-spacing:var(--tds-select-group-label-letter-spacing);
2881
2984
  background:var(--tds-select-group-label-background);
2882
2985
  text-box:trim-both cap alphabetic;
@@ -2886,20 +2989,20 @@ a[class="tds-btn"]{
2886
2989
  display:inline-flex;
2887
2990
  gap:var(--t-spacing-half);
2888
2991
  align-items:center;
2889
- color:var(--tds-select-group-label-text-color);
2992
+ color:var(--tds-select-group-label-color);
2890
2993
  transition:var(--tds-select-group-label-transition);
2891
2994
  }
2892
2995
 
2893
2996
  @container scroll-state(stuck){
2894
2997
 
2895
2998
  :is(:is(.tds-select:has( > button) [popover]) li[role="presentation"]) span{
2896
- color:var(--tds-select-group-label-text-color-stuck);
2999
+ color:var(--tds-select-group-label-color-stuck);
2897
3000
  }
2898
3001
 
2899
3002
  @media (forced-colors: active){
2900
3003
 
2901
3004
  :is(:is(.tds-select:has( > button) [popover]) li[role="presentation"]) span{
2902
- color:var(--tds-select-group-label-text-color-stuck);
3005
+ color:var(--tds-select-group-label-color-stuck);
2903
3006
  }
2904
3007
  }
2905
3008
  }
@@ -2988,7 +3091,6 @@ a[class="tds-btn"]{
2988
3091
  container-type:scroll-state;
2989
3092
  font-size:var(--tds-select-group-label-font-size);
2990
3093
  font-weight:var(--tds-select-group-label-font-weight);
2991
- text-transform:uppercase;
2992
3094
  letter-spacing:var(--tds-select-group-label-letter-spacing);
2993
3095
  background:var(--tds-select-group-label-background);
2994
3096
  text-box:trim-both cap alphabetic;
@@ -2998,20 +3100,20 @@ a[class="tds-btn"]{
2998
3100
  display:inline-flex;
2999
3101
  gap:var(--t-spacing-half);
3000
3102
  align-items:center;
3001
- color:var(--tds-select-group-label-text-color);
3103
+ color:var(--tds-select-group-label-color);
3002
3104
  transition:var(--tds-select-group-label-transition);
3003
3105
  }
3004
3106
 
3005
3107
  @container scroll-state(stuck){
3006
3108
 
3007
3109
  :is(:is(.tds-select select:has( > button)) legend) span{
3008
- color:var(--tds-select-group-label-text-color-stuck);
3110
+ color:var(--tds-select-group-label-color-stuck);
3009
3111
  }
3010
3112
 
3011
3113
  @media (forced-colors: active){
3012
3114
 
3013
3115
  :is(:is(.tds-select select:has( > button)) legend) span{
3014
- color:var(--tds-select-group-label-text-color-stuck);
3116
+ color:var(--tds-select-group-label-color-stuck);
3015
3117
  }
3016
3118
  }
3017
3119
  }
@@ -3071,112 +3173,6 @@ a[class="tds-btn"]{
3071
3173
  }
3072
3174
  }
3073
3175
 
3074
- .tds-input:has(textarea){
3075
- --tds-input-padding-block:var(--t-spacing-half);
3076
- --tds-input-resizer-size:var(--t-element-size-sm);
3077
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
3078
- }
3079
-
3080
- @supports (x: attr(x type(*))){
3081
-
3082
- .tds-input:has(textarea){
3083
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
3084
- }
3085
- }
3086
-
3087
- .tds-input textarea{
3088
- padding-block:var(--tds-input-padding-block);
3089
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
3090
- --tds-input-scrollbar-thumb-color-hidden:transparent;
3091
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
3092
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
3093
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
3094
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
3095
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
3096
- --tds-input-scrollbar-thumb-border-radius:999px;
3097
- --tds-input-scrollbar-thumb-border-width:3px;
3098
- --tds-input-scrollbar-track-margin-block:.125rem;
3099
- scrollbar-color:initial;
3100
- transition-timing-function:ease-in-out;
3101
- transition-duration:180ms;
3102
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
3103
- }
3104
-
3105
- .tds-input.tds-textarea--resize-vertical textarea{
3106
- resize:vertical;
3107
- }
3108
-
3109
- .tds-input.tds-textarea--resize-none textarea{
3110
- resize:none;
3111
- }
3112
-
3113
- .tds-input.tds-textarea--resize-auto textarea{
3114
- resize:vertical;
3115
- }
3116
-
3117
- @supports (field-sizing: content){
3118
- .tds-input.tds-textarea--resize-auto textarea{
3119
- field-sizing:content;
3120
- resize:none;
3121
- }
3122
- }
3123
-
3124
- @media (pointer: fine){
3125
- :is(.tds-input textarea)::-webkit-scrollbar{
3126
- width:12px;
3127
- height:12px;
3128
- cursor:default;
3129
- }
3130
-
3131
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
3132
- cursor:default;
3133
- background:var(--tds-input-scrollbar-thumb-color);
3134
- background-clip:content-box;
3135
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
3136
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
3137
- }
3138
-
3139
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
3140
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
3141
- }
3142
-
3143
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
3144
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
3145
- }
3146
-
3147
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
3148
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
3149
- }
3150
-
3151
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
3152
- background:var(--tds-input-scrollbar-surface-color);
3153
- }
3154
-
3155
- :is(.tds-input textarea)::-webkit-resizer{
3156
- background:var(--tds-input-resizer-icon) no-repeat;
3157
- background-position:right bottom;
3158
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
3159
- }
3160
-
3161
- :is(.tds-input textarea)::-webkit-scrollbar-track{
3162
- margin-block:var(--tds-input-scrollbar-track-margin-block);
3163
- cursor:default;
3164
- }
3165
-
3166
- @supports (-moz-appearance: none){
3167
- :is(.tds-input textarea){
3168
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
3169
- scrollbar-width:thin;
3170
- }
3171
-
3172
- @media (hover){
3173
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
3174
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
3175
- }
3176
- }
3177
- }
3178
- }
3179
-
3180
3176
  .tds-input{
3181
3177
  --tds-input-border-color:var(--t-form-border-color);
3182
3178
  --tds-input-border-color-hover:var(--t-form-border-color-hover);
@@ -3186,6 +3182,8 @@ a[class="tds-btn"]{
3186
3182
  --tds-input-description-color:var(--t-text-color-secondary);
3187
3183
  --tds-input-description-invalid-icon-display:none;
3188
3184
  --tds-input-min-height:var(--t-container-size-md);
3185
+ --tds-input-padding-inline:var(--t-spacing-1);
3186
+
3189
3187
  --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
3190
3188
 
3191
3189
  display:flex;
@@ -3202,7 +3200,8 @@ a[class="tds-btn"]{
3202
3200
  .tds-input :is(input,textarea){
3203
3201
  inline-size:100%;
3204
3202
  min-block-size:var(--tds-input-min-height);
3205
- padding-inline:var(--t-spacing-1);
3203
+ padding-block:var(--tds-input-padding-block);
3204
+ padding-inline:var(--tds-input-padding-inline);
3206
3205
  font-family:inherit;
3207
3206
  font-size:var(--tds-input-font-size);
3208
3207
  color:var(--tds-input-color);
@@ -3219,7 +3218,7 @@ a[class="tds-btn"]{
3219
3218
  transition-property:var(--tds-input-transition-property);
3220
3219
  }
3221
3220
 
3222
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible){
3221
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
3223
3222
  border-color:var(--tds-input-border-color-hover);
3224
3223
  }
3225
3224
 
@@ -3271,7 +3270,6 @@ a[class="tds-btn"]{
3271
3270
  --tds-input-border-color:var(--t-form-border-color-disabled);
3272
3271
  --tds-input-background-color:var(--t-form-background-color-disabled);
3273
3272
  --tds-input-color:var(--t-form-color-disabled);
3274
- --tds-input-description-color:var(--t-text-color-disabled);
3275
3273
  }
3276
3274
 
3277
3275
  .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){