@planningcenter/tapestry 3.4.1-rc.5 → 3.4.1-rc.7

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/reactRender.css +1192 -1192
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1192 -1192
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,658 +1,3 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
6
-
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:transparent;
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;
25
-
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-nav-item-background-color);
28
-
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);
32
-
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);
35
-
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);
39
-
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);
45
- }
46
-
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
49
- }
50
-
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
- }
56
- }
57
-
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-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
76
- }
77
- }
78
- }
79
-
80
- .tds-page-header{
81
- display:flex;
82
- flex-direction:column;
83
- padding-top:var(--tds-page-header-padding-y);
84
- color:var(--tds-page-header-color);
85
- background:var(--tds-page-header-background-color);
86
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
87
- }
88
-
89
- .tds-page-header:not(.has-nav){
90
- padding-bottom:var(--tds-page-header-padding-y);
91
- }
92
-
93
- .tds-page-header.inactive{
94
- background:var(--tds-page-header-background-color-inactive);
95
- }
96
-
97
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
- width:100%;
99
- }
100
-
101
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
- display:flex;
103
- flex-flow:row wrap;
104
- gap:var(--t-spacing-half) var(--t-spacing-1);
105
- align-items:flex-start;
106
- justify-content:flex-start;
107
- min-width:0;
108
- }
109
-
110
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
111
- display:flex;
112
- gap:var(--tds-page-header-nav-gap);
113
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
- margin:0 0 -1px;
115
- overflow:auto;
116
- list-style:none;
117
- background:var(--tds-page-header-nav-background);
118
- }
119
-
120
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
- position:relative;
122
- display:inline-flex;
123
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
- font-size:var(--t-font-size-sm);
125
- line-height:22px;
126
- color:var(--tds-page-header-nav-item-color);
127
- white-space:nowrap;
128
- text-decoration:none;
129
- -webkit-appearance:none;
130
- -moz-appearance:none;
131
- appearance:none;
132
- cursor:pointer;
133
- outline-offset:-2px;
134
- background-color:var(--tds-page-header-nav-item-background-color);
135
- background-clip:padding-box;
136
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
- }
140
-
141
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
146
- }
147
-
148
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
- }
154
-
155
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
- background-color:var(--tds-page-header-nav-item-background-color-active);
157
- border-color:var(--tds-page-header-nav-item-border-color-active);
158
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
- }
160
-
161
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
- color:var(--tds-page-header-nav-item-color-disabled);
164
- cursor:not-allowed;
165
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
- opacity:1;
167
- }
168
-
169
- @media (min-width: 600px){
170
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
- position:absolute;
172
- inset:auto -1px -1px;
173
- height:1px;
174
- pointer-events:none;
175
- content:"";
176
- background-color:var(--tds-page-header-bottom-border-color);
177
- }
178
- }
179
-
180
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
- position:relative;
182
- }
183
-
184
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
187
- }
188
-
189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
190
- position:absolute;
191
- top:-5px;
192
- right:-2px;
193
- width:10px;
194
- height:10px;
195
- content:"";
196
- background:var(--tds-page-header-nav-item-indicator-color);
197
- border-radius:50%;
198
- }
199
-
200
- @media (prefers-reduced-motion: no-preference){
201
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
- animation:indicator-pulse 1.25s ease infinite;
203
- }
204
- }
205
-
206
- .tds-page-header__title-bar{
207
- display:flex;
208
- flex-direction:column;
209
- gap:var(--t-spacing-2) var(--t-spacing-1);
210
- align-items:flex-start;
211
- justify-content:space-between;
212
- padding:0 var(--tds-page-header-padding-x);
213
- }
214
-
215
- .tds-page-header--profile > .tds-page-header__title-bar{
216
- align-items:center;
217
- }
218
-
219
- .tds-page-header__primary{
220
- width:100%;
221
- }
222
-
223
- .tds-page-header__primary h1{
224
- margin:0;
225
- font-size:var(--tds-page-header-headline-font-size);
226
- font-weight:var(--t-font-weight-normal);
227
- line-height:32px;
228
- color:var(--tds-page-header-headline-color);
229
- overflow-wrap:break-word;
230
- }
231
-
232
- @media (min-width: 960px){
233
- .tds-page-header__primary{
234
- flex:1 1 max-content;
235
- width:auto;
236
- min-width:0;
237
- max-width:100%;
238
- }
239
-
240
- .tds-page-header__title-bar,
241
- .tds-page-header--profile .tds-page-header__title-bar{
242
- flex-flow:row nowrap;
243
- row-gap:12px;
244
- align-items:flex-start;
245
- }
246
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
- width:auto;
248
- }
249
-
250
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
- justify-content:flex-end;
252
- }
253
- }
254
-
255
- .tds-page-header-phone,
256
- .tds-page-header-email{
257
- color:var(--tds-page-header-color);
258
- white-space:nowrap;
259
- }
260
-
261
- .tds-page-header-email{
262
- max-width:100%;
263
- overflow:hidden;
264
- text-overflow:ellipsis;
265
- }
266
-
267
- @keyframes indicator-pulse{
268
- 0%{
269
- opacity:.3;
270
- transform:scale(.9);
271
- }
272
-
273
- 100%{
274
- opacity:0;
275
- transform:scale(1.75);
276
- }
277
- }
278
-
279
- .tds-checkbox{
280
- --tds-checkbox-font-size:var(--t-font-size-md);
281
- --tds-checkbox-cursor:pointer;
282
- --tds-checkbox-line-height:1.4;
283
- --tds-checkbox-transition-property:background-color, border-color;
284
-
285
- --tds-checkbox-input-size:var(--t-element-size-md);
286
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
287
- --tds-checkbox-input-border-color:var(--t-form-border-color);
288
- --tds-checkbox-input-background-color:var(--t-form-background-color);
289
-
290
- --tds-checkbox-input-icon:none;
291
- --tds-checkbox-input-icon-visibility:hidden;
292
- --tds-checkbox-input-icon-opacity:0;
293
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
294
-
295
- --tds-checkbox-label-color:var(--t-form-color);
296
-
297
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
298
- --tds-checkbox-description-line-height:1.35;
299
- --tds-checkbox-description-color:var(--t-text-color-secondary);
300
- --tds-checkbox-description-invalid-icon-display:none;
301
-
302
- position:relative;
303
- display:inline-grid;
304
- grid-template-columns:auto;
305
- grid-auto-columns:1fr;
306
- gap:var(--t-spacing-fourth) 0;
307
- line-height:var(--tds-checkbox-line-height);
308
- -webkit-user-select:none;
309
- -moz-user-select:none;
310
- user-select:none;
311
- }
312
-
313
- .tds-checkbox label{
314
- grid-area:1 / 2;
315
- padding-inline-start:var(--t-spacing-1);
316
- font-size:var(--tds-checkbox-font-size);
317
- font-weight:var(--t-font-weight-normal);
318
- color:var(--tds-checkbox-label-color);
319
- cursor:var(--tds-checkbox-cursor);
320
- }
321
-
322
- .tds-checkbox tds-indeterminate{
323
- display:flex;
324
- }
325
-
326
- .tds-checkbox input[type="checkbox"]{
327
- position:relative;
328
- width:1em;
329
- height:1em;
330
- margin:calc((1lh - 1em) / 2) 0 0;
331
- font-size:var(--tds-checkbox-font-size);
332
- line-height:inherit;
333
- -webkit-appearance:none;
334
- -moz-appearance:none;
335
- appearance:none;
336
- cursor:var(--tds-checkbox-cursor);
337
- background-color:var(--tds-checkbox-input-background-color);
338
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
339
- border-radius:var(--tds-checkbox-input-border-radius);
340
- transition-timing-function:var(--t-ease-in-out);
341
- transition-duration:var(--t-duration-200);
342
- transition-property:var(--tds-checkbox-transition-property);
343
- }
344
-
345
- :is(.tds-checkbox input[type="checkbox"])::before{
346
- position:absolute;
347
- top:50%;
348
- left:50%;
349
- visibility:var(--tds-checkbox-input-icon-visibility);
350
- width:100%;
351
- height:100%;
352
- content:"";
353
- background-color:var(--tds-checkbox-input-icon-fill);
354
- border-radius:var(--tds-checkbox-input-border-radius);
355
- opacity:var(--tds-checkbox-input-icon-opacity);
356
- -webkit-mask-image:var(--tds-checkbox-input-icon);
357
- mask-image:var(--tds-checkbox-input-icon);
358
- -webkit-mask-repeat:no-repeat;
359
- mask-repeat:no-repeat;
360
- -webkit-mask-size:contain;
361
- mask-size:contain;
362
- transform:translate(-50%, -50%);
363
- }
364
-
365
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
366
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
367
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
368
- }
369
-
370
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
371
- outline:var(--t-focus-ring-outline);
372
- outline-offset:var(--t-focus-ring-offset);
373
- }
374
-
375
- :is(.tds-checkbox input[type="checkbox"]):disabled{
376
- pointer-events:none;
377
- }
378
-
379
- @media (prefers-reduced-motion: reduce){
380
-
381
- .tds-checkbox input[type="checkbox"]{
382
- --tds-checkbox-transition-property:none;
383
- }
384
- }
385
-
386
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
387
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
388
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
389
- --tds-checkbox-input-icon-visibility:visible;
390
- --tds-checkbox-input-icon-opacity:1;
391
- }
392
-
393
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
394
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
395
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
396
- }
397
-
398
- .tds-checkbox:has(input:checked){
399
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
400
- }
401
-
402
- .tds-checkbox:has(input:indeterminate){
403
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
404
- }
405
-
406
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
407
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
408
- --tds-checkbox-description-color:var(--t-text-color-status-error);
409
- --tds-checkbox-description-invalid-icon-display:inline-block;
410
- }
411
-
412
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
413
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
414
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
415
- }
416
-
417
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
418
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
419
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
420
- }
421
-
422
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
423
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
424
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
425
- }
426
-
427
- .tds-checkbox:has(input:required) label::after{
428
- margin-left:.25ch;
429
- color:var(--t-text-color-status-error);
430
- content:"*";
431
- }
432
-
433
- .tds-checkbox:has(input:disabled){
434
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
435
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
436
-
437
- --tds-checkbox-label-color:var(--t-form-color-disabled);
438
- --tds-checkbox-description-color:var(--t-form-color-disabled);
439
- --tds-checkbox-cursor:not-allowed;
440
- }
441
-
442
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
443
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
444
- }
445
-
446
- .tds-checkbox-description{
447
- display:flex;
448
- grid-area:2 / 2;
449
- gap:var(--t-spacing-half);
450
- align-items:flex-start;
451
- padding-inline-start:var(--t-spacing-1);
452
- margin:0;
453
- font-size:var(--tds-checkbox-description-font-size);
454
- line-height:var(--tds-checkbox-description-line-height);
455
- color:var(--tds-checkbox-description-color);
456
- cursor:text;
457
- }
458
-
459
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
460
- display:var(--tds-checkbox-description-invalid-icon-display);
461
- flex-shrink:0;
462
- margin-top:calc(.5lh - .5em);
463
- line-height:var(--tds-checkbox-description-line-height);
464
- }
465
-
466
- .tds-checkbox--sm{
467
- --tds-checkbox-line-height:1.35;
468
- --tds-checkbox-input-size:var(--t-element-size-sm);
469
- --tds-checkbox-font-size:var(--t-font-size-sm);
470
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
471
- --tds-checkbox-description-line-height:1.3;
472
- }
473
-
474
- .tds-combo-box{
475
- --tds-combo-box-button-offset:4px;
476
- }
477
-
478
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
479
- transform:rotate(.5turn);
480
- }
481
-
482
- .tds-combo-box--lg{
483
- --tds-combo-box-button-offset:5px;
484
- }
485
-
486
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
487
- display:none;
488
- }
489
-
490
- .tds-combo-box-input{
491
- display:flex;
492
- flex:1;
493
- align-items:center;
494
- padding-block:var(--tds-field-padding-block);
495
- padding-inline:var(--tds-field-padding-inline);
496
- font-family:inherit;
497
- font-size:inherit;
498
- color:inherit;
499
- outline:0;
500
- background:transparent;
501
- border:0;
502
- }
503
-
504
- .tds-combo-box-input:has( + .tds-combo-box-button){
505
- padding-inline-end:0;
506
- }
507
-
508
- .tds-combo-box-input::-moz-placeholder{
509
- color:var(--tds-field-placeholder-color);
510
- -moz-user-select:none;
511
- user-select:none;
512
- }
513
-
514
- .tds-combo-box-input::placeholder{
515
- color:var(--tds-field-placeholder-color);
516
- -webkit-user-select:none;
517
- -moz-user-select:none;
518
- user-select:none;
519
- }
520
-
521
- .tds-combo-box-button{
522
- flex-shrink:0;
523
- align-self:center;
524
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
525
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
526
- padding:0;
527
- margin-inline-end:var(--tds-combo-box-button-offset);
528
- }
529
-
530
- .tds-combo-box-button > svg{
531
- inline-size:var(--tds-field-font-size);
532
- block-size:var(--tds-field-font-size);
533
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
534
- }
535
-
536
- .tds-combo-box-popover{
537
- width:var(--trigger-width);
538
- max-block-size:inherit;
539
- padding:var(--t-spacing-1);
540
- overflow:auto;
541
- scroll-behavior:smooth;
542
- overscroll-behavior:none;
543
- -webkit-user-select:none;
544
- -moz-user-select:none;
545
- user-select:none;
546
- outline:0;
547
- scrollbar-color:#0004 var(--t-surface-color-card);
548
- scrollbar-width:thin;
549
- background:var(--t-surface-color-card);
550
- background-clip:padding-box;
551
- border:1px solid var(--t-border-color);
552
- border-radius:var(--t-border-radius);
553
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
554
- }
555
-
556
- .tds-combo-box-popover[data-entering]{
557
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
558
- }
559
-
560
- .tds-combo-box-popover[data-exiting]{
561
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
562
- }
563
-
564
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
565
- will-change:opacity, transform;
566
- }
567
-
568
- @keyframes tds-combo-box-popover{
569
- from{
570
- opacity:0;
571
- transform:translateY(-8px);
572
- }
573
- }
574
-
575
- @media (prefers-reduced-motion: reduce){
576
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
577
- animation:none;
578
- }
579
-
580
- .tds-combo-box-button > svg{
581
- transition:none;
582
- }
583
- }
584
-
585
- .tds-combo-box-list{
586
- padding:0;
587
- margin:0;
588
- }
589
-
590
- .tds-combo-box-list-item{
591
- display:block;
592
- padding-block:var(--t-spacing-1);
593
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
594
- overflow:hidden;
595
- text-overflow:ellipsis;
596
- font-size:1rem;
597
- color:var(--t-text-color);
598
- white-space:nowrap;
599
- cursor:default;
600
- border-radius:var(--t-border-radius);
601
- }
602
-
603
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
604
- background:var(--t-fill-color-neutral-070);
605
- }
606
-
607
- .tds-combo-box-list-item[data-selected]{
608
- background:var(--t-fill-color-button-interaction-ghost-active);
609
- }
610
-
611
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
612
- background:var(--t-fill-color-neutral-060);
613
- }
614
-
615
- .tds-combo-box-list-item[data-disabled]{
616
- color:var(--t-form-color-disabled);
617
- cursor:not-allowed;
618
- }
619
-
620
- .tds-combo-box-list-item[data-disabled][data-hovered]{
621
- background:transparent;
622
- }
623
-
624
- .tds-combo-box-empty-state{
625
- position:relative;
626
- min-block-size:var(--t-spacing-3);
627
- padding-block:var(--t-spacing-1);
628
- padding-inline:var(--t-spacing-2);
629
- font-size:var(--t-font-size-md);
630
- color:var(--t-text-color-secondary);
631
- }
632
-
633
- .tds-combo-box-load-more{
634
- position:relative;
635
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
636
- }
637
-
638
- .tds-combo-box-empty-state,
639
- .tds-combo-box-load-more{
640
- --tds-loading-spinner-visibility:visible;
641
- --tds-loading-spinner-animation-play-state:running;
642
- }
643
-
644
- .tds-combo-box-list-section:not(:first-child){
645
- margin-block-start:var(--t-spacing-half);
646
- }
647
-
648
- .tds-combo-box-section-header{
649
- padding-block:var(--t-spacing-1);
650
- padding-inline:var(--t-spacing-1);
651
- font-size:var(--t-font-size-sm);
652
- font-weight:var(--t-font-weight-semibold);
653
- color:var(--t-text-color-secondary);
654
- }
655
-
656
1
  .tds-checkbox-group{
657
2
  --tds-checkbox-group-font-size:var(--t-font-size-md);
658
3
  --tds-checkbox-group-line-height:1.4;
@@ -727,6 +72,201 @@
727
72
  --tds-checkbox-group-description-line-height:1.3;
728
73
  }
729
74
 
75
+ .tds-checkbox{
76
+ --tds-checkbox-font-size:var(--t-font-size-md);
77
+ --tds-checkbox-cursor:pointer;
78
+ --tds-checkbox-line-height:1.4;
79
+ --tds-checkbox-transition-property:background-color, border-color;
80
+
81
+ --tds-checkbox-input-size:var(--t-element-size-md);
82
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
83
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
84
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
85
+
86
+ --tds-checkbox-input-icon:none;
87
+ --tds-checkbox-input-icon-visibility:hidden;
88
+ --tds-checkbox-input-icon-opacity:0;
89
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
90
+
91
+ --tds-checkbox-label-color:var(--t-form-color);
92
+
93
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
94
+ --tds-checkbox-description-line-height:1.35;
95
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
96
+ --tds-checkbox-description-invalid-icon-display:none;
97
+
98
+ position:relative;
99
+ display:inline-grid;
100
+ grid-template-columns:auto;
101
+ grid-auto-columns:1fr;
102
+ gap:var(--t-spacing-fourth) 0;
103
+ line-height:var(--tds-checkbox-line-height);
104
+ -webkit-user-select:none;
105
+ -moz-user-select:none;
106
+ user-select:none;
107
+ }
108
+
109
+ .tds-checkbox label{
110
+ grid-area:1 / 2;
111
+ padding-inline-start:var(--t-spacing-1);
112
+ font-size:var(--tds-checkbox-font-size);
113
+ font-weight:var(--t-font-weight-normal);
114
+ color:var(--tds-checkbox-label-color);
115
+ cursor:var(--tds-checkbox-cursor);
116
+ }
117
+
118
+ .tds-checkbox tds-indeterminate{
119
+ display:flex;
120
+ }
121
+
122
+ .tds-checkbox input[type="checkbox"]{
123
+ position:relative;
124
+ width:1em;
125
+ height:1em;
126
+ margin:calc((1lh - 1em) / 2) 0 0;
127
+ font-size:var(--tds-checkbox-font-size);
128
+ line-height:inherit;
129
+ -webkit-appearance:none;
130
+ -moz-appearance:none;
131
+ appearance:none;
132
+ cursor:var(--tds-checkbox-cursor);
133
+ background-color:var(--tds-checkbox-input-background-color);
134
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
135
+ border-radius:var(--tds-checkbox-input-border-radius);
136
+ transition-timing-function:var(--t-ease-in-out);
137
+ transition-duration:var(--t-duration-200);
138
+ transition-property:var(--tds-checkbox-transition-property);
139
+ }
140
+
141
+ :is(.tds-checkbox input[type="checkbox"])::before{
142
+ position:absolute;
143
+ top:50%;
144
+ left:50%;
145
+ visibility:var(--tds-checkbox-input-icon-visibility);
146
+ width:100%;
147
+ height:100%;
148
+ content:"";
149
+ background-color:var(--tds-checkbox-input-icon-fill);
150
+ border-radius:var(--tds-checkbox-input-border-radius);
151
+ opacity:var(--tds-checkbox-input-icon-opacity);
152
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
153
+ mask-image:var(--tds-checkbox-input-icon);
154
+ -webkit-mask-repeat:no-repeat;
155
+ mask-repeat:no-repeat;
156
+ -webkit-mask-size:contain;
157
+ mask-size:contain;
158
+ transform:translate(-50%, -50%);
159
+ }
160
+
161
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
162
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
163
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
164
+ }
165
+
166
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
167
+ outline:var(--t-focus-ring-outline);
168
+ outline-offset:var(--t-focus-ring-offset);
169
+ }
170
+
171
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
172
+ pointer-events:none;
173
+ }
174
+
175
+ @media (prefers-reduced-motion: reduce){
176
+
177
+ .tds-checkbox input[type="checkbox"]{
178
+ --tds-checkbox-transition-property:none;
179
+ }
180
+ }
181
+
182
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
183
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
184
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
185
+ --tds-checkbox-input-icon-visibility:visible;
186
+ --tds-checkbox-input-icon-opacity:1;
187
+ }
188
+
189
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
190
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
191
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
192
+ }
193
+
194
+ .tds-checkbox:has(input:checked){
195
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
196
+ }
197
+
198
+ .tds-checkbox:has(input:indeterminate){
199
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
200
+ }
201
+
202
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
203
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
204
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
205
+ --tds-checkbox-description-invalid-icon-display:inline-block;
206
+ }
207
+
208
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
209
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
210
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
211
+ }
212
+
213
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
214
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
215
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
216
+ }
217
+
218
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
219
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
220
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
221
+ }
222
+
223
+ .tds-checkbox:has(input:required) label::after{
224
+ margin-left:.25ch;
225
+ color:var(--t-text-color-status-error);
226
+ content:"*";
227
+ }
228
+
229
+ .tds-checkbox:has(input:disabled){
230
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
231
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
232
+
233
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
234
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
235
+ --tds-checkbox-cursor:not-allowed;
236
+ }
237
+
238
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
239
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
240
+ }
241
+
242
+ .tds-checkbox-description{
243
+ display:flex;
244
+ grid-area:2 / 2;
245
+ gap:var(--t-spacing-half);
246
+ align-items:flex-start;
247
+ padding-inline-start:var(--t-spacing-1);
248
+ margin:0;
249
+ font-size:var(--tds-checkbox-description-font-size);
250
+ line-height:var(--tds-checkbox-description-line-height);
251
+ color:var(--tds-checkbox-description-color);
252
+ cursor:text;
253
+ }
254
+
255
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
256
+ display:var(--tds-checkbox-description-invalid-icon-display);
257
+ flex-shrink:0;
258
+ margin-top:calc(.5lh - .5em);
259
+ line-height:var(--tds-checkbox-description-line-height);
260
+ }
261
+
262
+ .tds-checkbox--sm{
263
+ --tds-checkbox-line-height:1.35;
264
+ --tds-checkbox-input-size:var(--t-element-size-sm);
265
+ --tds-checkbox-font-size:var(--t-font-size-sm);
266
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
267
+ --tds-checkbox-description-line-height:1.3;
268
+ }
269
+
730
270
 
731
271
  @media (prefers-reduced-motion: no-preference){
732
272
 
@@ -1089,25 +629,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1089
629
  flex-direction:column;
1090
630
  }
1091
631
 
1092
- .tds-number-stepper{
1093
- --tds-number-stepper-button-offset:4px;
1094
- --tds-number-stepper-button-gap:2px;
632
+ .tds-combo-box{
633
+ --tds-combo-box-button-offset:4px;
1095
634
  }
1096
635
 
1097
- .tds-number-stepper--lg{
1098
- --tds-number-stepper-button-offset:5px;
1099
- --tds-number-stepper-button-gap:4px;
636
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
637
+ transform:rotate(.5turn);
638
+ }
639
+
640
+ .tds-combo-box--lg{
641
+ --tds-combo-box-button-offset:5px;
1100
642
  }
1101
643
 
1102
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
644
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1103
645
  display:none;
1104
646
  }
1105
647
 
1106
- .tds-number-stepper-input{
648
+ .tds-combo-box-input{
1107
649
  display:flex;
1108
650
  flex:1;
1109
651
  align-items:center;
1110
- min-inline-size:0;
1111
652
  padding-block:var(--tds-field-padding-block);
1112
653
  padding-inline:var(--tds-field-padding-inline);
1113
654
  font-family:inherit;
@@ -1118,240 +659,158 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1118
659
  border:0;
1119
660
  }
1120
661
 
1121
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1122
- margin:0;
1123
- -webkit-appearance:none;
1124
- appearance:none;
662
+ .tds-combo-box-input:has( + .tds-combo-box-button){
663
+ padding-inline-end:0;
1125
664
  }
1126
665
 
1127
- .tds-number-stepper-button{
666
+ .tds-combo-box-input::-moz-placeholder{
667
+ color:var(--tds-field-placeholder-color);
668
+ -moz-user-select:none;
669
+ user-select:none;
670
+ }
671
+
672
+ .tds-combo-box-input::placeholder{
673
+ color:var(--tds-field-placeholder-color);
674
+ -webkit-user-select:none;
675
+ -moz-user-select:none;
676
+ user-select:none;
677
+ }
678
+
679
+ .tds-combo-box-button{
1128
680
  flex-shrink:0;
1129
681
  align-self:center;
1130
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1131
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
682
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
683
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1132
684
  padding:0;
685
+ margin-inline-end:var(--tds-combo-box-button-offset);
1133
686
  }
1134
687
 
1135
- .tds-number-stepper-button + .tds-number-stepper-button{
1136
- margin-inline-start:var(--tds-number-stepper-button-gap);
1137
- }
1138
-
1139
- .tds-number-stepper-button:last-of-type{
1140
- margin-inline-end:var(--tds-number-stepper-button-offset);
688
+ .tds-combo-box-button > svg{
689
+ inline-size:var(--tds-field-font-size);
690
+ block-size:var(--tds-field-font-size);
691
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1141
692
  }
1142
693
 
694
+ .tds-combo-box-popover{
695
+ width:var(--trigger-width);
696
+ max-block-size:inherit;
697
+ padding:var(--t-spacing-1);
698
+ overflow:auto;
699
+ scroll-behavior:smooth;
700
+ overscroll-behavior:none;
701
+ -webkit-user-select:none;
702
+ -moz-user-select:none;
703
+ user-select:none;
704
+ outline:0;
705
+ scrollbar-color:#0004 var(--t-surface-color-card);
706
+ scrollbar-width:thin;
707
+ background:var(--t-surface-color-card);
708
+ background-clip:padding-box;
709
+ border:1px solid var(--t-border-color);
710
+ border-radius:var(--t-border-radius);
711
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
712
+ }
1143
713
 
1144
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1145
- -webkit-appearance:none;
1146
- appearance:none;
1147
- }
1148
-
1149
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1150
- inline-size:1em;
1151
- block-size:2em;
1152
- }
1153
-
1154
- @supports (field-sizing: content){
1155
- .tds-input--auto-width{
1156
- inline-size:-moz-fit-content;
1157
- inline-size:fit-content;
1158
- min-inline-size:min(100%, 122px);
714
+ .tds-combo-box-popover[data-entering]{
715
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1159
716
  }
1160
717
 
1161
- .tds-input--auto-width input{
1162
- field-sizing:content;
1163
- inline-size:auto;
718
+ .tds-combo-box-popover[data-exiting]{
719
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1164
720
  }
1165
- }
1166
-
1167
- .tds-radio-group{
1168
- --tds-radio-group-font-size:var(--t-font-size-md);
1169
- --tds-radio-group-line-height:1.4;
1170
- --tds-radio-group-gap:var(--t-spacing-1);
1171
-
1172
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1173
- --tds-radio-group-description-line-height:1.35;
1174
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1175
- --tds-radio-group-description-invalid-icon-display:none;
1176
- display:flex;
1177
- flex-direction:column;
1178
- gap:0;
1179
- padding:0;
1180
- margin:0;
1181
-
1182
- font-size:var(--tds-radio-group-font-size);
1183
- line-height:var(--tds-radio-group-line-height);
1184
- border:0;
1185
- }
1186
721
 
1187
- .tds-radio-group legend{
1188
- float:left;
1189
- padding:0;
1190
- margin:0;
722
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
723
+ will-change:opacity, transform;
1191
724
  }
1192
725
 
1193
- .tds-radio-group[aria-invalid="true"]{
1194
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1195
- --tds-radio-group-description-invalid-icon-display:inline-block;
726
+ @keyframes tds-combo-box-popover{
727
+ from{
728
+ opacity:0;
729
+ transform:translateY(-8px);
1196
730
  }
1197
-
1198
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1199
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1200
- }
1201
-
1202
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1203
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1204
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1205
- }
1206
-
1207
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1208
- --tds-radio-input-background-color:var(--t-form-background-color);
1209
- }
1210
-
1211
- .tds-radio-group:has(input:required) legend::after{
1212
- margin-left:.25ch;
1213
- color:var(--t-text-color-status-error);
1214
- content:"*";
1215
- }
1216
-
1217
- .tds-radio-group-fields{
1218
- display:flex;
1219
- flex-direction:column;
1220
- gap:var(--tds-radio-group-gap);
1221
- align-items:flex-start;
1222
- margin-top:var(--t-spacing-1);
1223
731
  }
1224
732
 
1225
- .tds-radio-group-description{
1226
- display:flex;
1227
- gap:var(--t-spacing-half);
1228
- align-items:flex-start;
1229
- margin:var(--t-spacing-fourth) 0 0;
1230
- font-size:var(--tds-radio-group-description-font-size);
1231
- line-height:var(--tds-radio-group-description-line-height);
1232
- color:var(--tds-radio-group-description-color);
1233
- cursor:text;
1234
- }
733
+ @media (prefers-reduced-motion: reduce){
734
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
735
+ animation:none;
736
+ }
1235
737
 
1236
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1237
- display:var(--tds-radio-group-description-invalid-icon-display);
1238
- flex-shrink:0;
1239
- margin-top:calc(.5lh - .5em);
1240
- line-height:var(--tds-radio-group-description-line-height);
738
+ .tds-combo-box-button > svg{
739
+ transition:none;
1241
740
  }
1242
-
1243
- .tds-radio-group--sm{
1244
- --tds-radio-group-line-height:1.35;
1245
- --tds-radio-group-font-size:var(--t-font-size-sm);
1246
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1247
- --tds-radio-group-description-line-height:1.3;
1248
- }
1249
-
1250
- .tds-input:has(textarea){
1251
- --tds-input-padding-block:6px;
1252
- --tds-input-resizer-size:var(--t-element-size-sm);
1253
- --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");
1254
- }
1255
-
1256
- @supports (x: attr(x type(*))){
1257
-
1258
- .tds-input textarea{
1259
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1260
741
  }
1261
- }
1262
-
1263
- .tds-input.tds-textarea--resize-vertical textarea{
1264
- resize:vertical;
1265
- }
1266
-
1267
- .tds-input.tds-textarea--resize-none textarea{
1268
- resize:none;
1269
- }
1270
-
1271
- .tds-input.tds-textarea--resize-auto textarea{
1272
- resize:vertical;
1273
- }
1274
-
1275
- @supports (field-sizing: content){
1276
- .tds-input.tds-textarea--resize-auto textarea{
1277
- field-sizing:content;
1278
- resize:none;
1279
- }
1280
- }
1281
742
 
1282
- .tds-input textarea{
1283
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1284
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1285
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1286
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1287
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1288
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1289
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1290
- --tds-input-scrollbar-thumb-border-radius:999px;
1291
- --tds-input-scrollbar-thumb-border-width:3px;
1292
- --tds-input-scrollbar-track-margin-block:.125rem;
1293
- scrollbar-color:initial;
1294
- transition-timing-function:var(--t-ease-in-out);
1295
- transition-duration:var(--t-duration-200);
1296
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
743
+ .tds-combo-box-list{
744
+ padding:0;
745
+ margin:0;
1297
746
  }
1298
747
 
1299
- @media (pointer: fine){
1300
- :is(.tds-input textarea)::-webkit-scrollbar{
1301
- width:12px;
1302
- height:12px;
1303
- cursor:default;
1304
- }
1305
-
1306
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1307
- cursor:default;
1308
- background:var(--tds-input-scrollbar-thumb-color);
1309
- background-clip:content-box;
1310
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1311
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1312
- }
748
+ .tds-combo-box-list-item{
749
+ display:block;
750
+ padding-block:var(--t-spacing-1);
751
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
752
+ overflow:hidden;
753
+ text-overflow:ellipsis;
754
+ font-size:1rem;
755
+ color:var(--t-text-color);
756
+ white-space:nowrap;
757
+ cursor:default;
758
+ border-radius:var(--t-border-radius);
759
+ }
1313
760
 
1314
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1315
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1316
- }
761
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
762
+ background:var(--t-fill-color-neutral-070);
763
+ }
1317
764
 
1318
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1319
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1320
- }
765
+ .tds-combo-box-list-item[data-selected]{
766
+ background:var(--t-fill-color-button-interaction-ghost-active);
767
+ }
1321
768
 
1322
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1323
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1324
- }
769
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
770
+ background:var(--t-fill-color-neutral-060);
771
+ }
1325
772
 
1326
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1327
- background:var(--tds-input-scrollbar-surface-color);
1328
- }
773
+ .tds-combo-box-list-item[data-disabled]{
774
+ color:var(--t-form-color-disabled);
775
+ cursor:not-allowed;
776
+ }
1329
777
 
1330
- :is(.tds-input textarea)::-webkit-resizer{
1331
- background:var(--tds-input-resizer-icon) no-repeat;
1332
- background-position:right bottom;
1333
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
778
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
779
+ background:transparent;
1334
780
  }
1335
781
 
1336
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1337
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1338
- cursor:default;
1339
- }
782
+ .tds-combo-box-empty-state{
783
+ position:relative;
784
+ min-block-size:var(--t-spacing-3);
785
+ padding-block:var(--t-spacing-1);
786
+ padding-inline:var(--t-spacing-2);
787
+ font-size:var(--t-font-size-md);
788
+ color:var(--t-text-color-secondary);
789
+ }
1340
790
 
1341
- @supports (-moz-appearance: none){
1342
- :is(.tds-input textarea){
1343
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1344
- scrollbar-width:thin;
1345
- }
791
+ .tds-combo-box-load-more{
792
+ position:relative;
793
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
794
+ }
1346
795
 
1347
- @media (hover){
1348
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1349
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1350
- }
1351
- }
1352
- }
796
+ .tds-combo-box-empty-state,
797
+ .tds-combo-box-load-more{
798
+ --tds-loading-spinner-visibility:visible;
799
+ --tds-loading-spinner-animation-play-state:running;
800
+ }
801
+
802
+ .tds-combo-box-list-section:not(:first-child){
803
+ margin-block-start:var(--t-spacing-half);
1353
804
  }
1354
805
 
806
+ .tds-combo-box-section-header{
807
+ padding-block:var(--t-spacing-1);
808
+ padding-inline:var(--t-spacing-1);
809
+ font-size:var(--t-font-size-sm);
810
+ font-weight:var(--t-font-weight-semibold);
811
+ color:var(--t-text-color-secondary);
812
+ }
813
+
1355
814
  .tds-date-picker{
1356
815
  --tds-date-picker-button-offset:4px;
1357
816
  }
@@ -1483,231 +942,501 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1483
942
  transition-property:var(--tds-date-picker-popover-interactive-property);
1484
943
  }
1485
944
 
1486
- .tds-date-picker-overlay-cell[data-hovered]{
1487
- background-color:var(--t-fill-color-button-neutral-outline-hover);
945
+ .tds-date-picker-overlay-cell[data-hovered]{
946
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
947
+ }
948
+
949
+ .tds-date-picker-overlay-cell[data-pressed]{
950
+ background-color:var(--t-fill-color-button-neutral-outline-active);
951
+ }
952
+
953
+ .tds-date-picker-overlay-cell[data-selected]{
954
+ font-weight:var(--t-font-weight-semibold);
955
+ color:var(--t-text-color-inverted);
956
+ background-color:var(--t-fill-color-interaction);
957
+ }
958
+
959
+ .tds-date-picker-overlay-cell[data-focus-visible]{
960
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
961
+ }
962
+
963
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
964
+ outline-offset:var(--t-focus-ring-offset);
965
+ }
966
+
967
+ .tds-date-picker-calendar-heading{
968
+ display:flex;
969
+ flex:1;
970
+ gap:var(--t-spacing-1);
971
+ align-items:center;
972
+ justify-content:flex-start;
973
+ padding-inline-start:4px;
974
+ }
975
+
976
+ .tds-date-picker-calendar-overlay-trigger{
977
+ --_background-color:transparent;
978
+ position:relative;
979
+ padding:0;
980
+ font-family:inherit;
981
+ font-size:var(--tds-date-picker-popover-font-size);
982
+ font-weight:var(--t-font-weight-semibold);
983
+ font-feature-settings:"ss01", "ss02";
984
+ color:var(--t-text-color);
985
+ cursor:pointer;
986
+ outline:0;
987
+ background-color:transparent;
988
+ border:0;
989
+ border-radius:var(--t-border-radius-md);
990
+ isolation:isolate;
991
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
992
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
993
+ transition-property:var(--tds-date-picker-popover-interactive-property);
994
+ }
995
+
996
+ .tds-date-picker-calendar-overlay-trigger::before{
997
+ position:absolute;
998
+ inset:calc(var(--t-spacing-half) * -1);
999
+ z-index:-1;
1000
+ pointer-events:inherit;
1001
+ content:"";
1002
+ background-color:var(--_background-color);
1003
+ border-radius:inherit;
1004
+ }
1005
+
1006
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1007
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1008
+ }
1009
+
1010
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1011
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1012
+ }
1013
+
1014
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1015
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1016
+ outline-offset:var(--t-focus-ring-offset);
1017
+ }
1018
+
1019
+ .tds-date-picker-calendar{
1020
+ inline-size:-moz-fit-content;
1021
+ inline-size:fit-content;
1022
+ font-size:var(--tds-date-picker-popover-font-size);
1023
+ }
1024
+
1025
+ .tds-date-picker-calendar-body{
1026
+ position:relative;
1027
+ padding:var(--tds-date-picker-popover-padding);
1028
+ padding-block-start:0;
1029
+ }
1030
+
1031
+ .tds-date-picker-calendar-header{
1032
+ display:flex;
1033
+ align-items:center;
1034
+ justify-content:space-between;
1035
+ padding:var(--tds-date-picker-popover-padding);
1036
+ }
1037
+
1038
+ .tds-date-picker-calendar-title{
1039
+ padding:var(--t-spacing-half) var(--t-spacing-1);
1040
+ font-size:var(--tds-date-picker-popover-font-size);
1041
+ font-weight:var(--t-font-weight-semibold);
1042
+ }
1043
+
1044
+ .tds-date-picker-calendar-nav{
1045
+ display:flex;
1046
+ align-items:center;
1047
+ justify-content:center;
1048
+ padding:var(--t-spacing-half);
1049
+ font-size:.875em;
1050
+ color:var(--t-text-color);
1051
+ cursor:pointer;
1052
+ outline:0;
1053
+ background-color:transparent;
1054
+ border:0;
1055
+ border-radius:var(--t-border-radius-md);
1056
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1057
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1058
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1059
+ }
1060
+
1061
+ .tds-date-picker-calendar-nav[data-hovered]{
1062
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1063
+ }
1064
+
1065
+ .tds-date-picker-calendar-nav[data-pressed]{
1066
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1067
+ }
1068
+
1069
+ .tds-date-picker-calendar-nav[data-focus-visible]{
1070
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1071
+ outline-offset:var(--t-focus-ring-offset);
1072
+ }
1073
+
1074
+ .tds-date-picker-calendar-nav[data-disabled]{
1075
+ color:var(--t-text-color-disabled);
1076
+ cursor:not-allowed;
1077
+ }
1078
+
1079
+ .tds-date-picker-calendar-grid{
1080
+ font-feature-settings:"ss01", "ss02";
1081
+ border-collapse:collapse;
1082
+ }
1083
+
1084
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1085
+ padding:0;
1086
+ border:0;
1087
+ }
1088
+
1089
+ .tds-date-picker-calendar-header-cell{
1090
+ padding-block-end:var(--t-spacing-1);
1091
+ font-size:.875em;
1092
+ font-weight:var(--t-font-weight-medium);
1093
+ color:var(--t-text-color-secondary);
1094
+ text-align:center;
1095
+ -webkit-user-select:none;
1096
+ -moz-user-select:none;
1097
+ user-select:none;
1098
+ }
1099
+
1100
+ .tds-date-picker-calendar-cell-button{
1101
+ position:relative;
1102
+ display:flex;
1103
+ align-items:center;
1104
+ justify-content:center;
1105
+ inline-size:2.25em;
1106
+ block-size:2.25em;
1107
+ color:var(--t-text-color);
1108
+ cursor:pointer;
1109
+ -webkit-user-select:none;
1110
+ -moz-user-select:none;
1111
+ user-select:none;
1112
+ outline:0;
1113
+ }
1114
+
1115
+ .tds-date-picker-calendar-cell-button::before{
1116
+ position:absolute;
1117
+ inset:0;
1118
+ z-index:-1;
1119
+ content:"";
1120
+ background-color:var(--_background-color);
1121
+ border-radius:50%;
1122
+ }
1123
+
1124
+ .tds-date-picker-calendar-cell-button[data-today]::before{
1125
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1126
+ }
1127
+
1128
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
1129
+ display:none;
1488
1130
  }
1489
1131
 
1490
- .tds-date-picker-overlay-cell[data-pressed]{
1491
- background-color:var(--t-fill-color-button-neutral-outline-active);
1132
+ .tds-date-picker-calendar-cell-button[data-hovered]{
1133
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1492
1134
  }
1493
1135
 
1494
- .tds-date-picker-overlay-cell[data-selected]{
1136
+ .tds-date-picker-calendar-cell-button[data-pressed]{
1137
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1138
+ }
1139
+
1140
+ .tds-date-picker-calendar-cell-button[data-selected]{
1141
+ --_background-color:var(--t-fill-color-interaction);
1495
1142
  font-weight:var(--t-font-weight-semibold);
1496
1143
  color:var(--t-text-color-inverted);
1497
- background-color:var(--t-fill-color-interaction);
1144
+ border-color:transparent;
1498
1145
  }
1499
1146
 
1500
- .tds-date-picker-overlay-cell[data-focus-visible]{
1147
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
1148
+ color:var(--t-text-color-disabled);
1149
+ text-decoration:line-through;
1150
+ cursor:not-allowed;
1151
+ }
1152
+
1153
+ .tds-date-picker-calendar-cell-button[data-disabled]{
1154
+ color:var(--t-text-color-disabled);
1155
+ }
1156
+
1157
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
1501
1158
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1159
+ outline-offset:-2px;
1502
1160
  }
1503
1161
 
1504
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1162
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1505
1163
  outline-offset:var(--t-focus-ring-offset);
1506
1164
  }
1507
1165
 
1508
- .tds-date-picker-calendar-heading{
1509
- display:flex;
1510
- flex:1;
1511
- gap:var(--t-spacing-1);
1512
- align-items:center;
1513
- justify-content:flex-start;
1514
- padding-inline-start:4px;
1166
+ .tds-date-picker-popover--lg{
1167
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1515
1168
  }
1516
1169
 
1517
- .tds-date-picker-calendar-overlay-trigger{
1518
- --_background-color:transparent;
1519
- position:relative;
1170
+
1171
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1172
+ -webkit-appearance:none;
1173
+ appearance:none;
1174
+ }
1175
+
1176
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1177
+ inline-size:1em;
1178
+ block-size:2em;
1179
+ }
1180
+
1181
+ @supports (field-sizing: content){
1182
+ .tds-input--auto-width{
1183
+ inline-size:-moz-fit-content;
1184
+ inline-size:fit-content;
1185
+ min-inline-size:min(100%, 122px);
1186
+ }
1187
+
1188
+ .tds-input--auto-width input{
1189
+ field-sizing:content;
1190
+ inline-size:auto;
1191
+ }
1192
+ }
1193
+
1194
+ .tds-radio-group{
1195
+ --tds-radio-group-font-size:var(--t-font-size-md);
1196
+ --tds-radio-group-line-height:1.4;
1197
+ --tds-radio-group-gap:var(--t-spacing-1);
1198
+
1199
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1200
+ --tds-radio-group-description-line-height:1.35;
1201
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1202
+ --tds-radio-group-description-invalid-icon-display:none;
1203
+ display:flex;
1204
+ flex-direction:column;
1205
+ gap:0;
1520
1206
  padding:0;
1521
- font-family:inherit;
1522
- font-size:var(--tds-date-picker-popover-font-size);
1523
- font-weight:var(--t-font-weight-semibold);
1524
- font-feature-settings:"ss01", "ss02";
1525
- color:var(--t-text-color);
1526
- cursor:pointer;
1527
- outline:0;
1528
- background-color:transparent;
1207
+ margin:0;
1208
+
1209
+ font-size:var(--tds-radio-group-font-size);
1210
+ line-height:var(--tds-radio-group-line-height);
1529
1211
  border:0;
1530
- border-radius:var(--t-border-radius-md);
1531
- isolation:isolate;
1532
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1533
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1534
- transition-property:var(--tds-date-picker-popover-interactive-property);
1535
1212
  }
1536
1213
 
1537
- .tds-date-picker-calendar-overlay-trigger::before{
1538
- position:absolute;
1539
- inset:calc(var(--t-spacing-half) * -1);
1540
- z-index:-1;
1541
- pointer-events:inherit;
1542
- content:"";
1543
- background-color:var(--_background-color);
1544
- border-radius:inherit;
1214
+ .tds-radio-group legend{
1215
+ float:left;
1216
+ padding:0;
1217
+ margin:0;
1545
1218
  }
1546
1219
 
1547
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1548
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1220
+ .tds-radio-group[aria-invalid="true"]{
1221
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1222
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1549
1223
  }
1550
1224
 
1551
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1552
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1553
- }
1225
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1226
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1227
+ }
1554
1228
 
1555
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1556
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1557
- outline-offset:var(--t-focus-ring-offset);
1229
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1230
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1231
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1232
+ }
1233
+
1234
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1235
+ --tds-radio-input-background-color:var(--t-form-background-color);
1236
+ }
1237
+
1238
+ .tds-radio-group:has(input:required) legend::after{
1239
+ margin-left:.25ch;
1240
+ color:var(--t-text-color-status-error);
1241
+ content:"*";
1242
+ }
1243
+
1244
+ .tds-radio-group-fields{
1245
+ display:flex;
1246
+ flex-direction:column;
1247
+ gap:var(--tds-radio-group-gap);
1248
+ align-items:flex-start;
1249
+ margin-top:var(--t-spacing-1);
1250
+ }
1251
+
1252
+ .tds-radio-group-description{
1253
+ display:flex;
1254
+ gap:var(--t-spacing-half);
1255
+ align-items:flex-start;
1256
+ margin:var(--t-spacing-fourth) 0 0;
1257
+ font-size:var(--tds-radio-group-description-font-size);
1258
+ line-height:var(--tds-radio-group-description-line-height);
1259
+ color:var(--tds-radio-group-description-color);
1260
+ cursor:text;
1261
+ }
1262
+
1263
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1264
+ display:var(--tds-radio-group-description-invalid-icon-display);
1265
+ flex-shrink:0;
1266
+ margin-top:calc(.5lh - .5em);
1267
+ line-height:var(--tds-radio-group-description-line-height);
1558
1268
  }
1559
1269
 
1560
- .tds-date-picker-calendar{
1561
- inline-size:-moz-fit-content;
1562
- inline-size:fit-content;
1563
- font-size:var(--tds-date-picker-popover-font-size);
1270
+ .tds-radio-group--sm{
1271
+ --tds-radio-group-line-height:1.35;
1272
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1273
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1274
+ --tds-radio-group-description-line-height:1.3;
1564
1275
  }
1565
1276
 
1566
- .tds-date-picker-calendar-body{
1567
- position:relative;
1568
- padding:var(--tds-date-picker-popover-padding);
1569
- padding-block-start:0;
1277
+ .tds-time-field-input{
1278
+ --tds-field-date-segment-padding-inline:1px;
1279
+ padding-block:var(--tds-field-padding-block);
1280
+ padding-inline:var(--tds-field-padding-inline);
1281
+ font-variant-numeric:tabular-nums;
1570
1282
  }
1571
1283
 
1572
- .tds-date-picker-calendar-header{
1573
- display:flex;
1574
- align-items:center;
1575
- justify-content:space-between;
1576
- padding:var(--tds-date-picker-popover-padding);
1284
+ .tds-number-stepper{
1285
+ --tds-number-stepper-button-offset:4px;
1286
+ --tds-number-stepper-button-gap:2px;
1577
1287
  }
1578
1288
 
1579
- .tds-date-picker-calendar-title{
1580
- padding:var(--t-spacing-half) var(--t-spacing-1);
1581
- font-size:var(--tds-date-picker-popover-font-size);
1582
- font-weight:var(--t-font-weight-semibold);
1289
+ .tds-number-stepper--lg{
1290
+ --tds-number-stepper-button-offset:5px;
1291
+ --tds-number-stepper-button-gap:4px;
1583
1292
  }
1584
1293
 
1585
- .tds-date-picker-calendar-nav{
1294
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1295
+ display:none;
1296
+ }
1297
+
1298
+ .tds-number-stepper-input{
1586
1299
  display:flex;
1300
+ flex:1;
1587
1301
  align-items:center;
1588
- justify-content:center;
1589
- padding:var(--t-spacing-half);
1590
- font-size:.875em;
1591
- color:var(--t-text-color);
1592
- cursor:pointer;
1302
+ min-inline-size:0;
1303
+ padding-block:var(--tds-field-padding-block);
1304
+ padding-inline:var(--tds-field-padding-inline);
1305
+ font-family:inherit;
1306
+ font-size:inherit;
1307
+ color:inherit;
1593
1308
  outline:0;
1594
- background-color:transparent;
1309
+ background:transparent;
1595
1310
  border:0;
1596
- border-radius:var(--t-border-radius-md);
1597
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1598
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
1599
- transition-property:var(--tds-date-picker-popover-interactive-property);
1600
1311
  }
1601
1312
 
1602
- .tds-date-picker-calendar-nav[data-hovered]{
1603
- background-color:var(--t-fill-color-button-neutral-outline-hover);
1313
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1314
+ margin:0;
1315
+ -webkit-appearance:none;
1316
+ appearance:none;
1604
1317
  }
1605
1318
 
1606
- .tds-date-picker-calendar-nav[data-pressed]{
1607
- background-color:var(--t-fill-color-button-neutral-outline-active);
1319
+ .tds-number-stepper-button{
1320
+ flex-shrink:0;
1321
+ align-self:center;
1322
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1323
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1324
+ padding:0;
1325
+ }
1326
+
1327
+ .tds-number-stepper-button + .tds-number-stepper-button{
1328
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1608
1329
  }
1609
1330
 
1610
- .tds-date-picker-calendar-nav[data-focus-visible]{
1611
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1612
- outline-offset:var(--t-focus-ring-offset);
1331
+ .tds-number-stepper-button:last-of-type{
1332
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1613
1333
  }
1614
1334
 
1615
- .tds-date-picker-calendar-nav[data-disabled]{
1616
- color:var(--t-text-color-disabled);
1617
- cursor:not-allowed;
1335
+ .tds-input:has(textarea){
1336
+ --tds-input-padding-block:6px;
1337
+ --tds-input-resizer-size:var(--t-element-size-sm);
1338
+ --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");
1339
+ }
1340
+
1341
+ @supports (x: attr(x type(*))){
1342
+
1343
+ .tds-input textarea{
1344
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1345
+ }
1618
1346
  }
1619
1347
 
1620
- .tds-date-picker-calendar-grid{
1621
- font-feature-settings:"ss01", "ss02";
1622
- border-collapse:collapse;
1623
- }
1348
+ .tds-input.tds-textarea--resize-vertical textarea{
1349
+ resize:vertical;
1350
+ }
1624
1351
 
1625
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1626
- padding:0;
1627
- border:0;
1628
- }
1352
+ .tds-input.tds-textarea--resize-none textarea{
1353
+ resize:none;
1354
+ }
1629
1355
 
1630
- .tds-date-picker-calendar-header-cell{
1631
- padding-block-end:var(--t-spacing-1);
1632
- font-size:.875em;
1633
- font-weight:var(--t-font-weight-medium);
1634
- color:var(--t-text-color-secondary);
1635
- text-align:center;
1636
- -webkit-user-select:none;
1637
- -moz-user-select:none;
1638
- user-select:none;
1639
- }
1356
+ .tds-input.tds-textarea--resize-auto textarea{
1357
+ resize:vertical;
1358
+ }
1640
1359
 
1641
- .tds-date-picker-calendar-cell-button{
1642
- position:relative;
1643
- display:flex;
1644
- align-items:center;
1645
- justify-content:center;
1646
- inline-size:2.25em;
1647
- block-size:2.25em;
1648
- color:var(--t-text-color);
1649
- cursor:pointer;
1650
- -webkit-user-select:none;
1651
- -moz-user-select:none;
1652
- user-select:none;
1653
- outline:0;
1360
+ @supports (field-sizing: content){
1361
+ .tds-input.tds-textarea--resize-auto textarea{
1362
+ field-sizing:content;
1363
+ resize:none;
1364
+ }
1365
+ }
1366
+
1367
+ .tds-input textarea{
1368
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1369
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1370
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1371
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1372
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1373
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1374
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1375
+ --tds-input-scrollbar-thumb-border-radius:999px;
1376
+ --tds-input-scrollbar-thumb-border-width:3px;
1377
+ --tds-input-scrollbar-track-margin-block:.125rem;
1378
+ scrollbar-color:initial;
1379
+ transition-timing-function:var(--t-ease-in-out);
1380
+ transition-duration:var(--t-duration-200);
1381
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1654
1382
  }
1655
1383
 
1656
- .tds-date-picker-calendar-cell-button::before{
1657
- position:absolute;
1658
- inset:0;
1659
- z-index:-1;
1660
- content:"";
1661
- background-color:var(--_background-color);
1662
- border-radius:50%;
1663
- }
1384
+ @media (pointer: fine){
1385
+ :is(.tds-input textarea)::-webkit-scrollbar{
1386
+ width:12px;
1387
+ height:12px;
1388
+ cursor:default;
1389
+ }
1664
1390
 
1665
- .tds-date-picker-calendar-cell-button[data-today]::before{
1666
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1391
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1392
+ cursor:default;
1393
+ background:var(--tds-input-scrollbar-thumb-color);
1394
+ background-clip:content-box;
1395
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1396
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1667
1397
  }
1668
1398
 
1669
- .tds-date-picker-calendar-cell-button[data-outside-month]{
1670
- display:none;
1671
- }
1399
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1400
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1401
+ }
1672
1402
 
1673
- .tds-date-picker-calendar-cell-button[data-hovered]{
1674
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1675
- }
1403
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1404
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1405
+ }
1676
1406
 
1677
- .tds-date-picker-calendar-cell-button[data-pressed]{
1678
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
1679
- }
1407
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1408
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1409
+ }
1680
1410
 
1681
- .tds-date-picker-calendar-cell-button[data-selected]{
1682
- --_background-color:var(--t-fill-color-interaction);
1683
- font-weight:var(--t-font-weight-semibold);
1684
- color:var(--t-text-color-inverted);
1685
- border-color:transparent;
1686
- }
1411
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1412
+ background:var(--tds-input-scrollbar-surface-color);
1413
+ }
1687
1414
 
1688
- .tds-date-picker-calendar-cell-button[data-unavailable]{
1689
- color:var(--t-text-color-disabled);
1690
- text-decoration:line-through;
1691
- cursor:not-allowed;
1692
- }
1415
+ :is(.tds-input textarea)::-webkit-resizer{
1416
+ background:var(--tds-input-resizer-icon) no-repeat;
1417
+ background-position:right bottom;
1418
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1419
+ }
1693
1420
 
1694
- .tds-date-picker-calendar-cell-button[data-disabled]{
1695
- color:var(--t-text-color-disabled);
1696
- }
1421
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1422
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1423
+ cursor:default;
1424
+ }
1697
1425
 
1698
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
1699
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1700
- outline-offset:-2px;
1701
- }
1426
+ @supports (-moz-appearance: none){
1427
+ :is(.tds-input textarea){
1428
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1429
+ scrollbar-width:thin;
1430
+ }
1702
1431
 
1703
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1704
- outline-offset:var(--t-focus-ring-offset);
1432
+ @media (hover){
1433
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1434
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1435
+ }
1436
+ }
1437
+ }
1705
1438
  }
1706
1439
 
1707
- .tds-date-picker-popover--lg{
1708
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1709
- }
1710
-
1711
1440
  .tds-radio{
1712
1441
  --tds-radio-font-size:var(--t-font-size-md);
1713
1442
  --tds-radio-cursor:pointer;
@@ -1770,82 +1499,215 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1770
1499
  --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1771
1500
  }
1772
1501
 
1773
- :is(.tds-radio input[type="radio"]):focus-visible{
1774
- outline:var(--t-focus-ring-outline);
1775
- outline-offset:var(--t-focus-ring-offset);
1776
- }
1502
+ :is(.tds-radio input[type="radio"]):focus-visible{
1503
+ outline:var(--t-focus-ring-outline);
1504
+ outline-offset:var(--t-focus-ring-offset);
1505
+ }
1506
+
1507
+ :is(.tds-radio input[type="radio"]):disabled{
1508
+ pointer-events:none;
1509
+ }
1510
+
1511
+ @media (prefers-reduced-motion: reduce){
1512
+
1513
+ .tds-radio input[type="radio"]{
1514
+ --tds-radio-transition-property:none;
1515
+ }
1516
+ }
1517
+
1518
+ .tds-radio:has(input:checked){
1519
+ --tds-radio-input-background-color:var(--t-form-background-color);
1520
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1521
+ --tds-radio-input-border-width:4px;
1522
+ }
1523
+
1524
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1525
+ --tds-radio-input-background-color:var(--t-form-background-color);
1526
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1527
+ }
1528
+
1529
+ .tds-radio:has(input:user-invalid){
1530
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1531
+ }
1532
+
1533
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1534
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1535
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1536
+ }
1537
+
1538
+ .tds-radio:has(input:disabled){
1539
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1540
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1541
+
1542
+ --tds-radio-label-color:var(--t-form-color-disabled);
1543
+ --tds-radio-description-color:var(--t-form-color-disabled);
1544
+ --tds-radio-cursor:not-allowed;
1545
+ }
1546
+
1547
+ .tds-radio:has(input:disabled) input:checked{
1548
+ --tds-radio-input-background-color:var(--t-form-background-color);
1549
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1550
+ }
1551
+
1552
+ .tds-radio-description{
1553
+ display:flex;
1554
+ grid-area:2 / 2;
1555
+ gap:var(--t-spacing-half);
1556
+ align-items:flex-start;
1557
+ padding-inline-start:var(--t-spacing-1);
1558
+ margin:0;
1559
+ font-size:var(--tds-radio-description-font-size);
1560
+ line-height:var(--tds-radio-description-line-height);
1561
+ color:var(--tds-radio-description-color);
1562
+ cursor:text;
1563
+ }
1564
+
1565
+ .tds-radio--sm{
1566
+ --tds-radio-line-height:1.35;
1567
+ --tds-radio-input-size:var(--t-element-size-sm);
1568
+ --tds-radio-font-size:var(--t-font-size-sm);
1569
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1570
+ --tds-radio-description-line-height:1.3;
1571
+ }
1572
+
1573
+ .tds-toggle-switch{
1574
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1575
+ --tds-toggle-switch-cursor:pointer;
1576
+ --tds-toggle-switch-display:inline-grid;
1577
+ --tds-toggle-switch-line-height:1.4;
1578
+
1579
+ --tds-toggle-switch-label-color:var(--t-form-color);
1580
+
1581
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1582
+ --tds-toggle-switch-track-outline:none;
1583
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1584
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1585
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1586
+
1587
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1588
+ --tds-toggle-switch-thumb-transform:translateX(0);
1589
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1590
+
1591
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1592
+ --tds-toggle-switch-description-line-height:1.35;
1593
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1594
+ position:relative;
1595
+
1596
+ display:var(--tds-toggle-switch-display);
1597
+ grid-template-columns:auto;
1598
+ grid-auto-columns:1fr;
1599
+ gap:var(--t-spacing-fourth) 0;
1600
+ -webkit-user-select:none;
1601
+ -moz-user-select:none;
1602
+ user-select:none;
1603
+ }
1604
+
1605
+ .tds-toggle-switch input[type="checkbox"]{
1606
+ position:absolute;
1607
+ width:var(--tds-toggle-switch-track-width);
1608
+ height:var(--tds-toggle-switch-track-height);
1609
+ margin:0;
1610
+ -webkit-appearance:none;
1611
+ -moz-appearance:none;
1612
+ appearance:none;
1613
+ cursor:var(--tds-toggle-switch-cursor);
1614
+ outline:var(--tds-toggle-switch-track-outline);
1615
+ outline-offset:var(--t-focus-ring-offset);
1616
+ background-color:transparent;
1617
+ border:0;
1618
+ border-radius:var(--t-border-radius-round);
1619
+ }
1777
1620
 
1778
- :is(.tds-radio input[type="radio"]):disabled{
1779
- pointer-events:none;
1621
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1622
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1780
1623
  }
1781
1624
 
1782
- @media (prefers-reduced-motion: reduce){
1625
+ .tds-toggle-switch label{
1626
+ display:inline-flex;
1627
+ grid-area:1 / 2;
1628
+ padding-inline-start:var(--t-spacing-1);
1629
+ margin-top:-.09375em;
1630
+ font-size:var(--tds-toggle-switch-font-size);
1631
+ font-weight:var(--t-font-weight-normal);
1632
+ line-height:var(--tds-toggle-switch-line-height);
1633
+ color:var(--tds-toggle-switch-label-color);
1634
+ cursor:var(--tds-toggle-switch-cursor);
1635
+ }
1783
1636
 
1784
- .tds-radio input[type="radio"]{
1785
- --tds-radio-transition-property:none;
1637
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1638
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1786
1639
  }
1787
- }
1788
1640
 
1789
- .tds-radio:has(input:checked){
1790
- --tds-radio-input-background-color:var(--t-form-background-color);
1791
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1792
- --tds-radio-input-border-width:4px;
1641
+ .tds-toggle-switch:has(input:checked){
1642
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1643
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1793
1644
  }
1794
1645
 
1795
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1796
- --tds-radio-input-background-color:var(--t-form-background-color);
1797
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1646
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1647
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1798
1648
  }
1799
1649
 
1800
- .tds-radio:has(input:user-invalid){
1801
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1650
+ .tds-toggle-switch:has(input:disabled){
1651
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1652
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1653
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1654
+ --tds-toggle-switch-cursor:not-allowed;
1802
1655
  }
1803
1656
 
1804
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1805
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1806
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1807
- }
1808
-
1809
- .tds-radio:has(input:disabled){
1810
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1811
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1657
+ .tds-toggle-switch-track{
1658
+ position:relative;
1659
+ flex-shrink:0;
1660
+ width:var(--tds-toggle-switch-track-width);
1661
+ height:var(--tds-toggle-switch-track-height);
1662
+ background-color:var(--tds-toggle-switch-track-background-color);
1663
+ border-radius:var(--t-border-radius-round);
1664
+ transition:var(--tds-toggle-switch-track-transition);
1665
+ }
1812
1666
 
1813
- --tds-radio-label-color:var(--t-form-color-disabled);
1814
- --tds-radio-description-color:var(--t-form-color-disabled);
1815
- --tds-radio-cursor:not-allowed;
1667
+ .tds-toggle-switch-track::before{
1668
+ position:absolute;
1669
+ top:var(--t-spacing-fourth);
1670
+ left:var(--t-spacing-fourth);
1671
+ width:var(--tds-toggle-switch-thumb-size);
1672
+ height:var(--tds-toggle-switch-thumb-size);
1673
+ content:"";
1674
+ background-color:#fff;
1675
+ border-radius:var(--t-border-radius-round);
1676
+ transform:var(--tds-toggle-switch-thumb-transform);
1677
+ transition:var(--tds-toggle-switch-thumb-transition);
1816
1678
  }
1817
1679
 
1818
- .tds-radio:has(input:disabled) input:checked{
1819
- --tds-radio-input-background-color:var(--t-form-background-color);
1820
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1821
- }
1680
+ @media (prefers-reduced-motion: reduce){
1822
1681
 
1823
- .tds-radio-description{
1682
+ .tds-toggle-switch-track{
1683
+ --tds-toggle-switch-track-transition:none;
1684
+ --tds-toggle-switch-thumb-transition:none;
1685
+ }
1686
+ }
1687
+
1688
+ .tds-toggle-switch-description{
1824
1689
  display:flex;
1825
1690
  grid-area:2 / 2;
1826
- gap:var(--t-spacing-half);
1827
1691
  align-items:flex-start;
1828
1692
  padding-inline-start:var(--t-spacing-1);
1829
1693
  margin:0;
1830
- font-size:var(--tds-radio-description-font-size);
1831
- line-height:var(--tds-radio-description-line-height);
1832
- color:var(--tds-radio-description-color);
1694
+ font-size:var(--tds-toggle-switch-description-font-size);
1695
+ line-height:var(--tds-toggle-switch-description-line-height);
1696
+ color:var(--tds-toggle-switch-description-color);
1833
1697
  cursor:text;
1834
1698
  }
1835
1699
 
1836
- .tds-radio--sm{
1837
- --tds-radio-line-height:1.35;
1838
- --tds-radio-input-size:var(--t-element-size-sm);
1839
- --tds-radio-font-size:var(--t-font-size-sm);
1840
- --tds-radio-description-font-size:var(--t-font-size-xs);
1841
- --tds-radio-description-line-height:1.3;
1700
+ .tds-toggle-switch--sm{
1701
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1702
+ --tds-toggle-switch-line-height:1.35;
1703
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1704
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1705
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1706
+ --tds-toggle-switch-description-line-height:1.3;
1842
1707
  }
1843
1708
 
1844
- .tds-time-field-input{
1845
- --tds-field-date-segment-padding-inline:1px;
1846
- padding-block:var(--tds-field-padding-block);
1847
- padding-inline:var(--tds-field-padding-inline);
1848
- font-variant-numeric:tabular-nums;
1709
+ .tds-toggle-switch--hide-label{
1710
+ --tds-toggle-switch-display:inline-flex;
1849
1711
  }
1850
1712
 
1851
1713
  .tds-input{
@@ -2560,156 +2422,294 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2560
2422
  transition:var(--tds-select-dropdown-transition);
2561
2423
  }
2562
2424
 
2563
- :is(.tds-select select:has( > button)) option::checkmark{
2564
- display:none;
2425
+ :is(.tds-select select:has( > button)) option::checkmark{
2426
+ display:none;
2427
+ }
2428
+
2429
+ @starting-style{
2430
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
2431
+ opacity:var(--tds-select-dropdown-closed-opacity);
2432
+ translate:var(--tds-select-dropdown-closed-translate);
2433
+ }
2434
+ }
2435
+ }
2436
+
2437
+ @layer t-critical{
2438
+ tds-page-header:not(.hydrated){
2439
+ display:none;
2440
+ }
2441
+ }
2442
+
2443
+ @layer t-component{
2444
+ .tds-page-header{
2445
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2446
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2447
+ --tds-page-header-color:var(--t-text-color);
2448
+ --tds-page-header-bottom-border-color:transparent;
2449
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2450
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2451
+ --tds-page-header-padding-x:var(--t-spacing-2);
2452
+ --tds-page-header-padding-y:var(--t-spacing-2);
2453
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2454
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2455
+ --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%);
2456
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2457
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2458
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2459
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2460
+ --tds-page-header-nav-item-border-width:1px;
2461
+
2462
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2463
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2464
+
2465
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2466
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2467
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2468
+
2469
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2470
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2471
+
2472
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2473
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2474
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2475
+
2476
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2477
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2478
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2479
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2480
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2481
+ }
2482
+
2483
+ .tds-page-header--profile{
2484
+ --tds-page-header-padding-y:20px;
2485
+ }
2486
+
2487
+ @supports (color: light-dark(#fff, #000)){
2488
+ .tds-page-header{
2489
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2490
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2491
+ }
2492
+ }
2493
+
2494
+ @media (min-width: 600px){
2495
+ .tds-page-header{
2496
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2497
+ --tds-page-header-color:var(--t-text-color-secondary);
2498
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2499
+ --tds-page-header-padding-x:var(--t-spacing-3);
2500
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2501
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2502
+ --tds-page-header-nav-background:transparent;
2503
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2504
+ --tds-page-header-nav-item-border-width:1px;
2505
+ --tds-page-header-nav-item-color:var(--t-text-color);
2506
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2507
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2508
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2509
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2510
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2511
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2512
+ }
2513
+ }
2514
+ }
2515
+
2516
+ .tds-page-header{
2517
+ display:flex;
2518
+ flex-direction:column;
2519
+ padding-top:var(--tds-page-header-padding-y);
2520
+ color:var(--tds-page-header-color);
2521
+ background:var(--tds-page-header-background-color);
2522
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2523
+ }
2524
+
2525
+ .tds-page-header:not(.has-nav){
2526
+ padding-bottom:var(--tds-page-header-padding-y);
2527
+ }
2528
+
2529
+ .tds-page-header.inactive{
2530
+ background:var(--tds-page-header-background-color-inactive);
2531
+ }
2532
+
2533
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2534
+ width:100%;
2535
+ }
2536
+
2537
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2538
+ display:flex;
2539
+ flex-flow:row wrap;
2540
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2541
+ align-items:flex-start;
2542
+ justify-content:flex-start;
2543
+ min-width:0;
2544
+ }
2545
+
2546
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
2547
+ display:flex;
2548
+ gap:var(--tds-page-header-nav-gap);
2549
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2550
+ margin:0 0 -1px;
2551
+ overflow:auto;
2552
+ list-style:none;
2553
+ background:var(--tds-page-header-nav-background);
2554
+ }
2555
+
2556
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2557
+ position:relative;
2558
+ display:inline-flex;
2559
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2560
+ font-size:var(--t-font-size-sm);
2561
+ line-height:22px;
2562
+ color:var(--tds-page-header-nav-item-color);
2563
+ white-space:nowrap;
2564
+ text-decoration:none;
2565
+ -webkit-appearance:none;
2566
+ -moz-appearance:none;
2567
+ appearance:none;
2568
+ cursor:pointer;
2569
+ outline-offset:-2px;
2570
+ background-color:var(--tds-page-header-nav-item-background-color);
2571
+ background-clip:padding-box;
2572
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2573
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2574
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2565
2575
  }
2566
2576
 
2567
- @starting-style{
2568
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2569
- opacity:var(--tds-select-dropdown-closed-opacity);
2570
- translate:var(--tds-select-dropdown-closed-translate);
2577
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2578
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2579
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2580
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2581
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2571
2582
  }
2572
- }
2573
- }
2574
2583
 
2575
- .tds-toggle-switch{
2576
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2577
- --tds-toggle-switch-cursor:pointer;
2578
- --tds-toggle-switch-display:inline-grid;
2579
- --tds-toggle-switch-line-height:1.4;
2584
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2585
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2586
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2587
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2588
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2589
+ }
2580
2590
 
2581
- --tds-toggle-switch-label-color:var(--t-form-color);
2591
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2592
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2593
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2594
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2595
+ }
2582
2596
 
2583
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2584
- --tds-toggle-switch-track-outline:none;
2585
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2586
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2587
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2597
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2598
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2599
+ color:var(--tds-page-header-nav-item-color-disabled);
2600
+ cursor:not-allowed;
2601
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2602
+ opacity:1;
2603
+ }
2588
2604
 
2589
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2590
- --tds-toggle-switch-thumb-transform:translateX(0);
2591
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2605
+ @media (min-width: 600px){
2606
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2607
+ position:absolute;
2608
+ inset:auto -1px -1px;
2609
+ height:1px;
2610
+ pointer-events:none;
2611
+ content:"";
2612
+ background-color:var(--tds-page-header-bottom-border-color);
2613
+ }
2614
+ }
2592
2615
 
2593
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2594
- --tds-toggle-switch-description-line-height:1.35;
2595
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2596
- position:relative;
2616
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2617
+ position:relative;
2618
+ }
2597
2619
 
2598
- display:var(--tds-toggle-switch-display);
2599
- grid-template-columns:auto;
2600
- grid-auto-columns:1fr;
2601
- gap:var(--t-spacing-fourth) 0;
2602
- -webkit-user-select:none;
2603
- -moz-user-select:none;
2604
- user-select:none;
2620
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2621
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2622
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2623
+ }
2624
+
2625
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2626
+ position:absolute;
2627
+ top:-5px;
2628
+ right:-2px;
2629
+ width:10px;
2630
+ height:10px;
2631
+ content:"";
2632
+ background:var(--tds-page-header-nav-item-indicator-color);
2633
+ border-radius:50%;
2634
+ }
2635
+
2636
+ @media (prefers-reduced-motion: no-preference){
2637
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2638
+ animation:indicator-pulse 1.25s ease infinite;
2639
+ }
2640
+ }
2641
+
2642
+ .tds-page-header__title-bar{
2643
+ display:flex;
2644
+ flex-direction:column;
2645
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2646
+ align-items:flex-start;
2647
+ justify-content:space-between;
2648
+ padding:0 var(--tds-page-header-padding-x);
2605
2649
  }
2606
2650
 
2607
- .tds-toggle-switch input[type="checkbox"]{
2608
- position:absolute;
2609
- width:var(--tds-toggle-switch-track-width);
2610
- height:var(--tds-toggle-switch-track-height);
2611
- margin:0;
2612
- -webkit-appearance:none;
2613
- -moz-appearance:none;
2614
- appearance:none;
2615
- cursor:var(--tds-toggle-switch-cursor);
2616
- outline:var(--tds-toggle-switch-track-outline);
2617
- outline-offset:var(--t-focus-ring-offset);
2618
- background-color:transparent;
2619
- border:0;
2620
- border-radius:var(--t-border-radius-round);
2651
+ .tds-page-header--profile > .tds-page-header__title-bar{
2652
+ align-items:center;
2621
2653
  }
2622
2654
 
2623
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2624
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2625
- }
2655
+ .tds-page-header__primary{
2656
+ width:100%;
2657
+ }
2626
2658
 
2627
- .tds-toggle-switch label{
2628
- display:inline-flex;
2629
- grid-area:1 / 2;
2630
- padding-inline-start:var(--t-spacing-1);
2631
- margin-top:-.09375em;
2632
- font-size:var(--tds-toggle-switch-font-size);
2659
+ .tds-page-header__primary h1{
2660
+ margin:0;
2661
+ font-size:var(--tds-page-header-headline-font-size);
2633
2662
  font-weight:var(--t-font-weight-normal);
2634
- line-height:var(--tds-toggle-switch-line-height);
2635
- color:var(--tds-toggle-switch-label-color);
2636
- cursor:var(--tds-toggle-switch-cursor);
2663
+ line-height:32px;
2664
+ color:var(--tds-page-header-headline-color);
2665
+ overflow-wrap:break-word;
2637
2666
  }
2638
2667
 
2639
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2640
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2668
+ @media (min-width: 960px){
2669
+ .tds-page-header__primary{
2670
+ flex:1 1 max-content;
2671
+ width:auto;
2672
+ min-width:0;
2673
+ max-width:100%;
2641
2674
  }
2642
2675
 
2643
- .tds-toggle-switch:has(input:checked){
2644
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2645
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2676
+ .tds-page-header__title-bar,
2677
+ .tds-page-header--profile .tds-page-header__title-bar{
2678
+ flex-flow:row nowrap;
2679
+ row-gap:12px;
2680
+ align-items:flex-start;
2646
2681
  }
2647
-
2648
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2649
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2682
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2683
+ width:auto;
2650
2684
  }
2651
2685
 
2652
- .tds-toggle-switch:has(input:disabled){
2653
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2654
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2655
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2656
- --tds-toggle-switch-cursor:not-allowed;
2657
- }
2658
-
2659
- .tds-toggle-switch-track{
2660
- position:relative;
2661
- flex-shrink:0;
2662
- width:var(--tds-toggle-switch-track-width);
2663
- height:var(--tds-toggle-switch-track-height);
2664
- background-color:var(--tds-toggle-switch-track-background-color);
2665
- border-radius:var(--t-border-radius-round);
2666
- transition:var(--tds-toggle-switch-track-transition);
2686
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2687
+ justify-content:flex-end;
2688
+ }
2667
2689
  }
2668
2690
 
2669
- .tds-toggle-switch-track::before{
2670
- position:absolute;
2671
- top:var(--t-spacing-fourth);
2672
- left:var(--t-spacing-fourth);
2673
- width:var(--tds-toggle-switch-thumb-size);
2674
- height:var(--tds-toggle-switch-thumb-size);
2675
- content:"";
2676
- background-color:#fff;
2677
- border-radius:var(--t-border-radius-round);
2678
- transform:var(--tds-toggle-switch-thumb-transform);
2679
- transition:var(--tds-toggle-switch-thumb-transition);
2680
- }
2681
-
2682
- @media (prefers-reduced-motion: reduce){
2683
-
2684
- .tds-toggle-switch-track{
2685
- --tds-toggle-switch-track-transition:none;
2686
- --tds-toggle-switch-thumb-transition:none;
2691
+ .tds-page-header-phone,
2692
+ .tds-page-header-email{
2693
+ color:var(--tds-page-header-color);
2694
+ white-space:nowrap;
2687
2695
  }
2688
- }
2689
2696
 
2690
- .tds-toggle-switch-description{
2691
- display:flex;
2692
- grid-area:2 / 2;
2693
- align-items:flex-start;
2694
- padding-inline-start:var(--t-spacing-1);
2695
- margin:0;
2696
- font-size:var(--tds-toggle-switch-description-font-size);
2697
- line-height:var(--tds-toggle-switch-description-line-height);
2698
- color:var(--tds-toggle-switch-description-color);
2699
- cursor:text;
2697
+ .tds-page-header-email{
2698
+ max-width:100%;
2699
+ overflow:hidden;
2700
+ text-overflow:ellipsis;
2700
2701
  }
2701
2702
 
2702
- .tds-toggle-switch--sm{
2703
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2704
- --tds-toggle-switch-line-height:1.35;
2705
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2706
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2707
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2708
- --tds-toggle-switch-description-line-height:1.3;
2709
- }
2703
+ @keyframes indicator-pulse{
2704
+ 0%{
2705
+ opacity:.3;
2706
+ transform:scale(.9);
2707
+ }
2710
2708
 
2711
- .tds-toggle-switch--hide-label{
2712
- --tds-toggle-switch-display:inline-flex;
2709
+ 100%{
2710
+ opacity:0;
2711
+ transform:scale(1.75);
2712
+ }
2713
2713
  }
2714
2714
 
2715
2715
  .tds-loading-spinner{