@planningcenter/tapestry 3.3.1-qa-887.1 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1258 -1258
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1258 -1258
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +5 -5
package/dist/reactRender.css CHANGED
@@ -276,383 +276,526 @@
276
276
  }
277
277
  }
278
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;
279
284
 
280
- @media (prefers-reduced-motion: no-preference){
281
-
282
- :root{
283
- interpolate-size:allow-keywords;
284
- }
285
- }
286
-
287
- @layer tds-component{
288
- tds-sidenav,
289
- .tds-sidenav{
290
- --tds-sidenav-indent:12px;
291
- --tds-sidenav-item-depth:0;
292
-
293
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
294
-
295
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
296
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
297
- --tds-sidenav-collapse-closed-opacity:0;
298
- --tds-sidenav-collapse-open-opacity:1;
299
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
300
- --tds-sidenav-collapse-open-transform:translateY(0);
301
-
302
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
303
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
304
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
305
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
306
-
307
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
308
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
309
- --tds-sidenav-item-nested-background-selected:transparent;
310
-
311
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
312
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
313
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
314
-
315
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
316
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
317
- }
318
-
319
- @media (prefers-reduced-motion: reduce){
320
- tds-sidenav,
321
- .tds-sidenav{
322
- --tds-sidenav-collapse-transition-enter:none;
323
- --tds-sidenav-collapse-transition-exit:none;
324
- --tds-sidenav-collapse-closed-transform:none;
325
- --tds-sidenav-collapse-open-transform:none;
326
- }
327
- }
328
-
329
- .tds-sidenav--theme-gray{
330
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
331
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
332
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
333
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
334
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
335
- }
336
- }
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:transparent;
337
289
 
338
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
- display:flex;
340
- }
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);
341
294
 
342
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
343
- flex-direction:column;
344
- gap:var(--t-spacing-half);
345
- width:100%;
346
- }
295
+ --tds-checkbox-label-color:var(--t-form-color);
347
296
 
348
- .tds-sidenav-section-list{
349
- width:100%;
350
- padding:0;
351
- margin:0;
352
- list-style:none;
353
- }
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;
354
301
 
355
- .tds-sidenav-section-header{
356
- display:flex;
357
- align-items:baseline;
358
- justify-content:space-between;
359
- padding-top:var(--t-spacing-2);
302
+ position:relative;
303
+ display:inline-grid;
304
+ grid-template-columns:auto;
305
+ grid-auto-columns:1fr;
306
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
307
+ line-height:var(--tds-checkbox-line-height);
308
+ cursor:var(--tds-checkbox-cursor);
309
+ -webkit-user-select:none;
310
+ -moz-user-select:none;
311
+ user-select:none;
360
312
  }
361
313
 
362
- .tds-sidenav-section-header h2{
363
- margin:0;
364
- font-size:var(--t-font-size-sm);
365
- font-weight:var(--t-font-weight-semibold);
366
- line-height:1.35;
367
- color:var(--t-text-color-secondary);
368
- text-transform:uppercase;
369
- }
370
-
371
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
372
- padding-top:0;
314
+ .tds-checkbox label{
315
+ grid-area:1 / 2;
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);
373
320
  }
374
321
 
375
- .tds-sidenav-section-header [slot="label-actions"]{
322
+ .tds-checkbox tds-indeterminate{
376
323
  display:flex;
377
- gap:var(--t-spacing-half);
378
- align-items:center;
379
324
  }
380
325
 
381
- .tds-sidenav-section [slot="section-actions"]{
382
- display:flex;
383
- gap:12px;
384
- align-items:center;
385
- min-height:42px;
386
- padding:var(--t-spacing-1) 0;
387
- }
388
-
389
- .tds-sidenav-section-list,
390
- .tds-sidenav-item{
391
- width:100%;
392
- padding:0;
393
- margin:0;
394
- }
395
-
396
- .tds-sidenav-item :is(a,button){
326
+ .tds-checkbox input[type="checkbox"]{
397
327
  position:relative;
398
- display:flex;
399
- gap:12px;
400
- align-items:center;
401
- width:100%;
402
- padding:12px;
403
- overflow:hidden;
404
- font-size:var(--t-font-size-sm);
405
- line-height:18px;
406
- color:var(--t-text-color-headline);
407
- white-space:nowrap;
408
- text-decoration:none;
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;
409
333
  -webkit-appearance:none;
410
334
  -moz-appearance:none;
411
335
  appearance:none;
412
- cursor:pointer;
413
- background-color:var(--tds-sidenav-item-background, transparent);
414
- border:0;
415
- border-radius:var(--t-border-radius);
416
- transition:var(--tds-sidenav-item-transition);
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);
417
343
  }
418
344
 
419
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
420
- display:block;
421
- flex:1;
422
- overflow:hidden;
423
- text-overflow:ellipsis;
424
- text-align:left;
425
- white-space:nowrap;
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%);
426
363
  }
427
364
 
428
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
429
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
430
- color:var(--t-text-color-headline);
431
- text-decoration:none;
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);
432
368
  }
433
369
 
434
- :is(.tds-sidenav-item :is(a,button)):active{
435
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
370
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
371
+ outline:var(--t-focus-ring-outline);
372
+ outline-offset:var(--t-focus-ring-offset);
436
373
  }
437
374
 
438
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
- overflow:hidden;
440
- color:var(--tds-sidenav-item-icon-color);
375
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
376
+ pointer-events:none;
441
377
  }
442
378
 
443
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
444
- display:block;
445
- width:var(--tds-sidenav-item-icon-size);
446
- height:var(--tds-sidenav-item-icon-size);
447
- }
379
+ @media (prefers-reduced-motion: reduce){
448
380
 
449
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
- --tds-sidenav-indent:19px;
381
+ .tds-checkbox input[type="checkbox"]{
382
+ --tds-checkbox-transition-property:none;
383
+ }
451
384
  }
452
385
 
453
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
454
- visibility:visible;
455
- block-size:auto;
456
- opacity:1;
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);
457
396
  }
458
397
 
459
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
460
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
461
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
398
+ .tds-checkbox:has(input:checked){
399
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
400
+ }
462
401
 
463
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
- font-weight:var(--t-font-weight-semibold);
402
+ .tds-checkbox:has(input:indeterminate){
403
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
465
404
  }
466
405
 
467
- .tds-sidenav-item:has(.tds-sidenav-section){
468
- display:flex;
469
- flex-direction:column;
470
- gap:var(--t-spacing-half);
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;
471
410
  }
472
411
 
473
- .tds-sidenav-item .tds-sidenav-section-list{
474
- --tds-sidenav-item-depth:1;
475
- gap:0;
476
- }
477
-
478
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
479
- visibility:hidden;
480
- block-size:0;
481
- overflow-y:clip;
482
- opacity:0;
483
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
484
- }
485
-
486
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
- --tds-sidenav-item-depth:2;
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);
488
415
  }
489
416
 
490
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
491
- min-height:var(--t-element-size-2xl);
492
- padding-block:9px;
493
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
494
- line-height:1;
495
- background-color:transparent;
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);
496
420
  }
497
421
 
498
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
499
- position:absolute;
500
- top:0;
501
- bottom:0;
502
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
- width:2px;
504
- content:"";
505
- background-color:var(--tds-sidenav-item-nested-border-color);
506
- transition:var(--tds-sidenav-item-transition);
507
- }
508
-
509
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
510
- position:absolute;
511
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
512
- z-index:-1;
513
- height:100%;
514
- content:"";
515
- background-color:var(--tds-sidenav-item-nested-background);
516
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
517
- transition:var(--tds-sidenav-item-transition);
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);
518
425
  }
519
426
 
520
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
521
- display:block;
522
- text-align:left;
523
- white-space:normal;
524
- }
427
+ .tds-checkbox:has(input:required) label::after{
428
+ margin-left:.25ch;
429
+ color:var(--t-text-color-status-error);
430
+ content:"*";
431
+ }
525
432
 
526
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
527
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
528
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
529
- }
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);
530
436
 
531
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
532
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
533
- }
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
+ }
534
441
 
535
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
536
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
537
- font-weight:var(--t-font-weight-medium);
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);
538
444
  }
539
445
 
540
- .tds-sidenav-responsive-header{
446
+ .tds-checkbox-description{
541
447
  display:flex;
542
- gap:var(--t-spacing-2);
543
- align-items:center;
544
- width:100%;
448
+ grid-area:2 / 2;
449
+ gap:var(--t-spacing-half);
450
+ align-items:flex-start;
451
+ margin:0;
452
+ font-size:var(--tds-checkbox-description-font-size);
453
+ line-height:var(--tds-checkbox-description-line-height);
454
+ color:var(--tds-checkbox-description-color);
455
+ cursor:text;
545
456
  }
546
457
 
547
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
- order:0;
458
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
459
+ display:var(--tds-checkbox-description-invalid-icon-display);
460
+ flex-shrink:0;
461
+ margin-top:calc(.5lh - .5em);
462
+ line-height:var(--tds-checkbox-description-line-height);
549
463
  }
550
464
 
551
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
552
- flex:1;
553
- order:1;
554
- margin:0;
555
- font-size:var(--t-font-size-lg);
556
- font-weight:var(--t-font-weight-medium);
557
- color:var(--t-text-color-headline);
558
- }
465
+ .tds-checkbox--sm{
466
+ --tds-checkbox-line-height:1.35;
467
+ --tds-checkbox-input-size:var(--t-element-size-sm);
468
+ --tds-checkbox-font-size:var(--t-font-size-sm);
469
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
470
+ --tds-checkbox-description-line-height:1.3;
471
+ }
559
472
 
560
- @media (max-width: 719px){
561
- .tds-sidenav-collapse{
562
- z-index:10001;
563
- display:none;
564
- max-width:min(448px, calc(100vw - 48px));
473
+ .tds-checkbox-group{
474
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
475
+ --tds-checkbox-group-line-height:1.4;
476
+ --tds-checkbox-group-gap:var(--t-spacing-1);
477
+
478
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
479
+
480
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
481
+ --tds-checkbox-group-description-line-height:1.35;
482
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
483
+ --tds-checkbox-group-description-invalid-icon-display:none;
484
+ display:flex;
485
+ flex-direction:column;
486
+ gap:var(--tds-checkbox-group-gap);
487
+ padding:0;
488
+ margin:0;
489
+
490
+ font-size:var(--tds-checkbox-group-font-size);
491
+ line-height:var(--tds-checkbox-group-line-height);
492
+ border:0;
493
+ }
494
+
495
+ .tds-checkbox-group legend{
565
496
  padding:0;
566
- margin:12px 0;
567
- position-area:bottom span-right;
568
- overflow:hidden;
569
- outline:0;
570
- background:var(--t-surface-color-card);
571
- border:0;
572
- border-radius:6px;
573
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
574
- opacity:var(--tds-sidenav-collapse-open-opacity);
575
- transform:var(--tds-sidenav-collapse-open-transform);
576
- transition:var(--tds-sidenav-collapse-transition-enter);
577
- will-change:transform;
497
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
578
498
  }
579
499
 
580
- .tds-sidenav-scroll-container{
581
- --webkit-overflow-scrolling:touch;
582
- display:block;
583
- width:100%;
584
- height:-moz-fit-content;
585
- height:fit-content;
586
- padding:var(--t-spacing-2);
587
- overflow-y:auto;
500
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
501
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
588
502
  }
589
503
 
590
- .tds-sidenav-item :is(a, button) :is(.prefix){
591
- display:none;
504
+ .tds-checkbox-group[aria-invalid="true"]{
505
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
506
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
592
507
  }
593
- @supports selector(:popover-open){
594
- .tds-sidenav-collapse:popover-open{
595
- display:flex;
596
- }
597
508
 
598
- .tds-sidenav-collapse:not(:popover-open){
599
- opacity:var(--tds-sidenav-collapse-closed-opacity);
600
- transition:var(--tds-sidenav-collapse-transition-exit);
509
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
510
+ margin-left:.25ch;
511
+ color:var(--t-text-color-status-error);
512
+ content:"*";
601
513
  }
602
514
 
603
- @starting-style{
604
- .tds-sidenav-collapse:popover-open{
605
- opacity:var(--tds-sidenav-collapse-closed-opacity);
606
- transform:var(--tds-sidenav-collapse-closed-transform);
607
- }
608
- }
609
- }
610
- @supports not selector(:popover-open){
611
- .tds-sidenav-collapse.\:popover-open{
612
- display:flex;
515
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
516
+ content:none;
613
517
  }
614
518
 
615
- .tds-sidenav-collapse:not(.\:popover-open){
616
- opacity:var(--tds-sidenav-collapse-closed-opacity);
617
- transition:var(--tds-sidenav-collapse-transition-exit);
618
- }
619
- }
519
+ .tds-checkbox-group-fields{
520
+ display:flex;
521
+ flex-direction:column;
522
+ gap:var(--tds-checkbox-group-gap);
523
+ align-items:flex-start;
620
524
  }
621
525
 
622
- @media (min-width: 720px){
623
- .tds-sidenav-responsive-header{
624
- display:none;
625
- }
526
+ .tds-checkbox-group-description{
527
+ display:flex;
528
+ gap:var(--t-spacing-half);
529
+ align-items:flex-start;
530
+ margin:0;
531
+ font-size:var(--tds-checkbox-group-description-font-size);
532
+ line-height:var(--tds-checkbox-group-description-line-height);
533
+ color:var(--tds-checkbox-group-description-color);
534
+ cursor:text;
626
535
  }
627
536
 
628
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
- display:none;
630
- }
631
-
632
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
- display:block;
634
- }
635
-
636
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
- display:flex;
638
- flex-direction:column;
639
- }
537
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
538
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
539
+ flex-shrink:0;
540
+ margin-top:calc(.5lh - .5em);
541
+ line-height:var(--tds-checkbox-group-description-line-height);
542
+ }
640
543
 
641
- .tds-date-picker{
642
- --tds-date-picker-button-offset:4px;
544
+ .tds-checkbox-group--sm{
545
+ --tds-checkbox-group-line-height:1.35;
546
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
547
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
548
+ --tds-checkbox-group-description-line-height:1.3;
643
549
  }
644
550
 
645
- .tds-date-picker--lg{
646
- --tds-date-picker-button-offset:5px;
551
+ .tds-combo-box{
552
+ --tds-combo-box-button-offset:4px;
647
553
  }
648
554
 
649
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
650
- outline-color:transparent;
651
- outline-offset:0;
652
- border-color:var(--tds-field-border-color);
555
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
556
+ transform:rotate(.5turn);
557
+ }
558
+
559
+ .tds-combo-box--lg{
560
+ --tds-combo-box-button-offset:5px;
653
561
  }
654
562
 
655
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
563
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
564
+ display:none;
565
+ }
566
+
567
+ .tds-combo-box-input{
568
+ display:flex;
569
+ flex:1;
570
+ align-items:center;
571
+ padding-block:var(--tds-field-padding-block);
572
+ padding-inline:var(--tds-field-padding-inline);
573
+ font-family:inherit;
574
+ font-size:inherit;
575
+ color:inherit;
576
+ outline:0;
577
+ background:transparent;
578
+ border:0;
579
+ }
580
+
581
+ .tds-combo-box-input:has( + .tds-combo-box-button){
582
+ padding-inline-end:0;
583
+ }
584
+
585
+ .tds-combo-box-input::-moz-placeholder{
586
+ color:var(--tds-field-placeholder-color);
587
+ -moz-user-select:none;
588
+ user-select:none;
589
+ }
590
+
591
+ .tds-combo-box-input::placeholder{
592
+ color:var(--tds-field-placeholder-color);
593
+ -webkit-user-select:none;
594
+ -moz-user-select:none;
595
+ user-select:none;
596
+ }
597
+
598
+ .tds-combo-box-button{
599
+ flex-shrink:0;
600
+ align-self:center;
601
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
602
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
603
+ padding:0;
604
+ margin-inline-end:var(--tds-combo-box-button-offset);
605
+ }
606
+
607
+ .tds-combo-box-button > svg{
608
+ inline-size:var(--tds-field-font-size);
609
+ block-size:var(--tds-field-font-size);
610
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
611
+ }
612
+
613
+ .tds-combo-box-popover{
614
+ width:var(--trigger-width);
615
+ max-block-size:inherit;
616
+ padding:var(--t-spacing-1);
617
+ overflow:auto;
618
+ scroll-behavior:smooth;
619
+ overscroll-behavior:none;
620
+ -webkit-user-select:none;
621
+ -moz-user-select:none;
622
+ user-select:none;
623
+ outline:0;
624
+ scrollbar-color:#0004 #0000;
625
+ scrollbar-width:thin;
626
+ background:var(--t-surface-color-card);
627
+ background-clip:padding-box;
628
+ border:1px solid var(--t-border-color);
629
+ border-radius:var(--t-border-radius);
630
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
631
+ }
632
+
633
+ .tds-combo-box-popover[data-entering]{
634
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
635
+ }
636
+
637
+ .tds-combo-box-popover[data-exiting]{
638
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
639
+ }
640
+
641
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
642
+ will-change:opacity, transform;
643
+ }
644
+
645
+ @keyframes tds-combo-box-popover{
646
+ from{
647
+ opacity:0;
648
+ transform:translateY(-8px);
649
+ }
650
+ }
651
+
652
+ @media (prefers-reduced-motion: reduce){
653
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
654
+ animation:none;
655
+ }
656
+
657
+ .tds-combo-box-button > svg{
658
+ transition:none;
659
+ }
660
+ }
661
+
662
+ .tds-combo-box-list{
663
+ padding:0;
664
+ margin:0;
665
+ }
666
+
667
+ .tds-combo-box-list-item{
668
+ display:block;
669
+ padding-block:var(--t-spacing-1);
670
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
671
+ overflow:hidden;
672
+ text-overflow:ellipsis;
673
+ font-size:1rem;
674
+ color:var(--t-text-color);
675
+ white-space:nowrap;
676
+ cursor:default;
677
+ border-radius:var(--t-border-radius);
678
+ }
679
+
680
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
681
+ background:var(--t-fill-color-neutral-070);
682
+ }
683
+
684
+ .tds-combo-box-list-item[data-selected]{
685
+ background:var(--t-fill-color-button-interaction-ghost-active);
686
+ }
687
+
688
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
689
+ background:var(--t-fill-color-neutral-060);
690
+ }
691
+
692
+ .tds-combo-box-list-item[data-disabled]{
693
+ color:var(--t-form-color-disabled);
694
+ cursor:not-allowed;
695
+ }
696
+
697
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
698
+ background:transparent;
699
+ }
700
+
701
+ .tds-combo-box-empty-state{
702
+ position:relative;
703
+ min-block-size:var(--t-spacing-3);
704
+ padding-block:var(--t-spacing-1);
705
+ padding-inline:var(--t-spacing-2);
706
+ font-size:var(--t-font-size-md);
707
+ color:var(--t-text-color-secondary);
708
+ }
709
+
710
+ .tds-combo-box-load-more{
711
+ position:relative;
712
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
713
+ }
714
+
715
+ .tds-combo-box-empty-state,
716
+ .tds-combo-box-load-more{
717
+ --tds-loading-spinner-visibility:visible;
718
+ --tds-loading-spinner-animation-play-state:running;
719
+ }
720
+
721
+ .tds-combo-box-list-section:not(:first-child){
722
+ margin-block-start:var(--t-spacing-half);
723
+ }
724
+
725
+ .tds-combo-box-section-header{
726
+ padding-block:var(--t-spacing-1);
727
+ padding-inline:var(--t-spacing-1);
728
+ font-size:var(--t-font-size-sm);
729
+ font-weight:var(--t-font-weight-semibold);
730
+ color:var(--t-text-color-secondary);
731
+ }
732
+
733
+ .tds-number-stepper{
734
+ --tds-number-stepper-button-offset:4px;
735
+ --tds-number-stepper-button-gap:2px;
736
+ }
737
+
738
+ .tds-number-stepper--lg{
739
+ --tds-number-stepper-button-offset:5px;
740
+ --tds-number-stepper-button-gap:4px;
741
+ }
742
+
743
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
744
+ display:none;
745
+ }
746
+
747
+ .tds-number-stepper-input{
748
+ display:flex;
749
+ flex:1;
750
+ align-items:center;
751
+ min-inline-size:0;
752
+ padding-block:var(--tds-field-padding-block);
753
+ padding-inline:var(--tds-field-padding-inline);
754
+ font-family:inherit;
755
+ font-size:inherit;
756
+ color:inherit;
757
+ outline:0;
758
+ background:transparent;
759
+ border:0;
760
+ }
761
+
762
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
763
+ margin:0;
764
+ -webkit-appearance:none;
765
+ appearance:none;
766
+ }
767
+
768
+ .tds-number-stepper-button{
769
+ flex-shrink:0;
770
+ align-self:center;
771
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
772
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
773
+ padding:0;
774
+ }
775
+
776
+ .tds-number-stepper-button + .tds-number-stepper-button{
777
+ margin-inline-start:var(--tds-number-stepper-button-gap);
778
+ }
779
+
780
+ .tds-number-stepper-button:last-of-type{
781
+ margin-inline-end:var(--tds-number-stepper-button-offset);
782
+ }
783
+
784
+ .tds-date-picker{
785
+ --tds-date-picker-button-offset:4px;
786
+ }
787
+
788
+ .tds-date-picker--lg{
789
+ --tds-date-picker-button-offset:5px;
790
+ }
791
+
792
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
793
+ outline-color:transparent;
794
+ outline-offset:0;
795
+ border-color:var(--tds-field-border-color);
796
+ }
797
+
798
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
656
799
  display:none;
657
800
  }
658
801
 
@@ -994,754 +1137,955 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
994
1137
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
995
1138
  }
996
1139
 
997
- .tds-checkbox{
998
- --tds-checkbox-font-size:var(--t-font-size-md);
999
- --tds-checkbox-cursor:pointer;
1000
- --tds-checkbox-line-height:1.4;
1001
- --tds-checkbox-transition-property:background-color, border-color;
1002
1140
 
1003
- --tds-checkbox-input-size:var(--t-element-size-md);
1004
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1005
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1006
- --tds-checkbox-input-background-color:transparent;
1141
+ :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{
1142
+ -webkit-appearance:none;
1143
+ appearance:none;
1144
+ }
1007
1145
 
1008
- --tds-checkbox-input-icon:none;
1009
- --tds-checkbox-input-icon-visibility:hidden;
1010
- --tds-checkbox-input-icon-opacity:0;
1011
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1146
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1147
+ inline-size:1em;
1148
+ block-size:2em;
1149
+ }
1012
1150
 
1013
- --tds-checkbox-label-color:var(--t-form-color);
1151
+ @supports (field-sizing: content){
1152
+ .tds-input--auto-width{
1153
+ inline-size:-moz-fit-content;
1154
+ inline-size:fit-content;
1155
+ min-inline-size:min(100%, 122px);
1156
+ }
1014
1157
 
1015
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1016
- --tds-checkbox-description-line-height:1.35;
1017
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1018
- --tds-checkbox-description-invalid-icon-display:none;
1158
+ .tds-input--auto-width input{
1159
+ field-sizing:content;
1160
+ inline-size:auto;
1161
+ }
1162
+ }
1163
+
1164
+ .tds-toggle-switch{
1165
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1166
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1167
+ --tds-toggle-switch-cursor:pointer;
1168
+ --tds-toggle-switch-display:inline-grid;
1169
+ --tds-toggle-switch-line-height:1.4;
1170
+
1171
+ --tds-toggle-switch-label-color:var(--t-form-color);
1172
+
1173
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1174
+ --tds-toggle-switch-track-outline:none;
1175
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1176
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1177
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1178
+
1179
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1180
+ --tds-toggle-switch-thumb-transform:translateX(0);
1181
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1019
1182
 
1183
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1184
+ --tds-toggle-switch-description-line-height:1.35;
1185
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1020
1186
  position:relative;
1021
- display:inline-grid;
1187
+
1188
+ display:var(--tds-toggle-switch-display);
1022
1189
  grid-template-columns:auto;
1023
1190
  grid-auto-columns:1fr;
1024
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1025
- line-height:var(--tds-checkbox-line-height);
1026
- cursor:var(--tds-checkbox-cursor);
1191
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1027
1192
  -webkit-user-select:none;
1028
1193
  -moz-user-select:none;
1029
1194
  user-select:none;
1030
1195
  }
1031
1196
 
1032
- .tds-checkbox label{
1033
- grid-area:1 / 2;
1034
- font-size:var(--tds-checkbox-font-size);
1035
- font-weight:var(--t-font-weight-normal);
1036
- color:var(--tds-checkbox-label-color);
1037
- cursor:var(--tds-checkbox-cursor);
1038
- }
1039
-
1040
- .tds-checkbox tds-indeterminate{
1041
- display:flex;
1042
- }
1043
-
1044
- .tds-checkbox input[type="checkbox"]{
1045
- position:relative;
1046
- width:1em;
1047
- height:1em;
1048
- margin:calc((1lh - 1em) / 2) 0 0;
1049
- font-size:var(--tds-checkbox-font-size);
1050
- line-height:inherit;
1197
+ .tds-toggle-switch input[type="checkbox"]{
1198
+ position:absolute;
1199
+ width:var(--tds-toggle-switch-track-width);
1200
+ height:var(--tds-toggle-switch-track-height);
1201
+ margin:0;
1051
1202
  -webkit-appearance:none;
1052
1203
  -moz-appearance:none;
1053
1204
  appearance:none;
1054
- cursor:var(--tds-checkbox-cursor);
1055
- background-color:var(--tds-checkbox-input-background-color);
1056
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1057
- border-radius:var(--tds-checkbox-input-border-radius);
1058
- transition-timing-function:var(--t-ease-in-out);
1059
- transition-duration:var(--t-duration-200);
1060
- transition-property:var(--tds-checkbox-transition-property);
1205
+ cursor:var(--tds-toggle-switch-cursor);
1206
+ outline:var(--tds-toggle-switch-track-outline);
1207
+ outline-offset:var(--t-focus-ring-offset);
1208
+ background-color:transparent;
1209
+ border:0;
1210
+ border-radius:var(--t-border-radius-round);
1061
1211
  }
1062
1212
 
1063
- :is(.tds-checkbox input[type="checkbox"])::before{
1064
- position:absolute;
1065
- top:50%;
1066
- left:50%;
1067
- visibility:var(--tds-checkbox-input-icon-visibility);
1068
- width:100%;
1069
- height:100%;
1070
- content:"";
1071
- background-color:var(--tds-checkbox-input-icon-fill);
1072
- border-radius:var(--tds-checkbox-input-border-radius);
1073
- opacity:var(--tds-checkbox-input-icon-opacity);
1074
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1075
- mask-image:var(--tds-checkbox-input-icon);
1076
- -webkit-mask-repeat:no-repeat;
1077
- mask-repeat:no-repeat;
1078
- -webkit-mask-size:contain;
1079
- mask-size:contain;
1080
- transform:translate(-50%, -50%);
1081
- }
1082
-
1083
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1084
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1085
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1086
- }
1087
-
1088
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1089
- outline:var(--t-focus-ring-outline);
1090
- outline-offset:var(--t-focus-ring-offset);
1091
- }
1092
-
1093
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1094
- pointer-events:none;
1213
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1214
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1095
1215
  }
1096
1216
 
1097
- @media (prefers-reduced-motion: reduce){
1217
+ .tds-toggle-switch label{
1218
+ display:inline-flex;
1219
+ grid-area:1 / 2;
1220
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1221
+ column-gap:var(--tds-toggle-switch-column-gap);
1222
+ margin-top:-.09375em;
1223
+ font-size:var(--tds-toggle-switch-font-size);
1224
+ font-weight:var(--t-font-weight-normal);
1225
+ line-height:var(--tds-toggle-switch-line-height);
1226
+ color:var(--tds-toggle-switch-label-color);
1227
+ cursor:var(--tds-toggle-switch-cursor);
1228
+ }
1098
1229
 
1099
- .tds-checkbox input[type="checkbox"]{
1100
- --tds-checkbox-transition-property:none;
1230
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1231
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1101
1232
  }
1102
- }
1103
1233
 
1104
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1105
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1106
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1107
- --tds-checkbox-input-icon-visibility:visible;
1108
- --tds-checkbox-input-icon-opacity:1;
1234
+ .tds-toggle-switch:has(input:checked){
1235
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1236
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1109
1237
  }
1110
1238
 
1111
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1112
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1113
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1239
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1240
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1114
1241
  }
1115
1242
 
1116
- .tds-checkbox:has(input:checked){
1117
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1243
+ .tds-toggle-switch:has(input:disabled){
1244
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1245
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1246
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1247
+ --tds-toggle-switch-cursor:not-allowed;
1118
1248
  }
1119
1249
 
1120
- .tds-checkbox:has(input:indeterminate){
1121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1122
- }
1250
+ .tds-toggle-switch-track{
1251
+ position:relative;
1252
+ flex-shrink:0;
1253
+ width:var(--tds-toggle-switch-track-width);
1254
+ height:var(--tds-toggle-switch-track-height);
1255
+ background-color:var(--tds-toggle-switch-track-background-color);
1256
+ border-radius:var(--t-border-radius-round);
1257
+ transition:var(--tds-toggle-switch-track-transition);
1258
+ }
1123
1259
 
1124
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1125
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1126
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1127
- --tds-checkbox-description-invalid-icon-display:inline-block;
1260
+ .tds-toggle-switch-track::before{
1261
+ position:absolute;
1262
+ top:var(--t-spacing-fourth);
1263
+ left:var(--t-spacing-fourth);
1264
+ width:var(--tds-toggle-switch-thumb-size);
1265
+ height:var(--tds-toggle-switch-thumb-size);
1266
+ content:"";
1267
+ background-color:#fff;
1268
+ border-radius:var(--t-border-radius-round);
1269
+ transform:var(--tds-toggle-switch-thumb-transform);
1270
+ transition:var(--tds-toggle-switch-thumb-transition);
1128
1271
  }
1129
1272
 
1130
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1131
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1132
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1133
- }
1134
-
1135
- :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{
1136
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1137
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1138
- }
1139
-
1140
- :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){
1141
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1142
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1143
- }
1144
-
1145
- .tds-checkbox:has(input:required) label::after{
1146
- margin-left:.25ch;
1147
- color:var(--t-text-color-status-error);
1148
- content:"*";
1149
- }
1150
-
1151
- .tds-checkbox:has(input:disabled){
1152
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1153
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1273
+ @media (prefers-reduced-motion: reduce){
1154
1274
 
1155
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1156
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1157
- --tds-checkbox-cursor:not-allowed;
1275
+ .tds-toggle-switch-track{
1276
+ --tds-toggle-switch-track-transition:none;
1277
+ --tds-toggle-switch-thumb-transition:none;
1278
+ }
1158
1279
  }
1159
1280
 
1160
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1161
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1162
- }
1163
-
1164
- .tds-checkbox-description{
1281
+ .tds-toggle-switch-description{
1165
1282
  display:flex;
1166
1283
  grid-area:2 / 2;
1167
- gap:var(--t-spacing-half);
1168
1284
  align-items:flex-start;
1169
1285
  margin:0;
1170
- font-size:var(--tds-checkbox-description-font-size);
1171
- line-height:var(--tds-checkbox-description-line-height);
1172
- color:var(--tds-checkbox-description-color);
1286
+ font-size:var(--tds-toggle-switch-description-font-size);
1287
+ line-height:var(--tds-toggle-switch-description-line-height);
1288
+ color:var(--tds-toggle-switch-description-color);
1173
1289
  cursor:text;
1174
1290
  }
1175
1291
 
1176
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1177
- display:var(--tds-checkbox-description-invalid-icon-display);
1178
- flex-shrink:0;
1179
- margin-top:calc(.5lh - .5em);
1180
- line-height:var(--tds-checkbox-description-line-height);
1181
- }
1292
+ .tds-toggle-switch--sm{
1293
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1294
+ --tds-toggle-switch-line-height:1.35;
1295
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1296
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1297
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1298
+ --tds-toggle-switch-description-line-height:1.3;
1299
+ }
1182
1300
 
1183
- .tds-checkbox--sm{
1184
- --tds-checkbox-line-height:1.35;
1185
- --tds-checkbox-input-size:var(--t-element-size-sm);
1186
- --tds-checkbox-font-size:var(--t-font-size-sm);
1187
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1188
- --tds-checkbox-description-line-height:1.3;
1301
+ .tds-toggle-switch--hide-label{
1302
+ --tds-toggle-switch-display:inline-flex;
1189
1303
  }
1190
1304
 
1191
- .tds-radio{
1192
- --tds-radio-font-size:var(--t-font-size-md);
1193
- --tds-radio-cursor:pointer;
1194
- --tds-radio-line-height:1.4;
1195
- --tds-radio-transition-property:border-width;
1196
1305
 
1197
- --tds-radio-input-size:var(--t-element-size-md);
1198
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1199
- --tds-radio-input-border-color:var(--t-form-border-color);
1200
- --tds-radio-input-border-width:var(--t-form-border-width);
1201
- --tds-radio-input-background-color:transparent;
1202
-
1203
- --tds-radio-label-color:var(--t-form-color);
1204
-
1205
- --tds-radio-description-font-size:var(--t-font-size-sm);
1206
- --tds-radio-description-line-height:1.35;
1207
- --tds-radio-description-color:var(--t-text-color-secondary);
1306
+ @media (prefers-reduced-motion: no-preference){
1208
1307
 
1209
- position:relative;
1210
- display:inline-grid;
1211
- grid-template-columns:auto;
1212
- grid-auto-columns:1fr;
1213
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1214
- line-height:var(--tds-radio-line-height);
1215
- cursor:var(--tds-radio-cursor);
1216
- -webkit-user-select:none;
1217
- -moz-user-select:none;
1218
- user-select:none;
1308
+ :root{
1309
+ interpolate-size:allow-keywords;
1219
1310
  }
1220
-
1221
- .tds-radio label{
1222
- grid-area:1 / 2;
1223
- font-size:var(--tds-radio-font-size);
1224
- font-weight:var(--t-font-weight-normal);
1225
- color:var(--tds-radio-label-color);
1226
- cursor:var(--tds-radio-cursor);
1227
1311
  }
1228
1312
 
1229
- .tds-radio input[type="radio"]{
1230
- position:relative;
1231
- width:1em;
1232
- height:1em;
1233
- margin:calc((1lh - 1em) / 2) 0 0;
1234
- font-size:var(--tds-radio-font-size);
1235
- line-height:inherit;
1236
- -webkit-appearance:none;
1237
- -moz-appearance:none;
1238
- appearance:none;
1239
- cursor:var(--tds-radio-cursor);
1240
- background-color:var(--tds-radio-input-background-color);
1241
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1242
- border-radius:var(--tds-radio-input-border-radius);
1243
- transition-timing-function:var(--t-ease-in-out);
1244
- transition-duration:var(--t-duration-200);
1245
- transition-property:var(--tds-radio-transition-property);
1246
- }
1313
+ @layer tds-component{
1314
+ tds-sidenav,
1315
+ .tds-sidenav{
1316
+ --tds-sidenav-indent:12px;
1317
+ --tds-sidenav-item-depth:0;
1247
1318
 
1248
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1249
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1250
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1251
- }
1319
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1252
1320
 
1253
- :is(.tds-radio input[type="radio"]):focus-visible{
1254
- outline:var(--t-focus-ring-outline);
1255
- outline-offset:var(--t-focus-ring-offset);
1256
- }
1321
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1322
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1323
+ --tds-sidenav-collapse-closed-opacity:0;
1324
+ --tds-sidenav-collapse-open-opacity:1;
1325
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1326
+ --tds-sidenav-collapse-open-transform:translateY(0);
1257
1327
 
1258
- :is(.tds-radio input[type="radio"]):disabled{
1259
- pointer-events:none;
1260
- }
1328
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1329
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1330
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1331
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1261
1332
 
1262
- @media (prefers-reduced-motion: reduce){
1333
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1334
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1335
+ --tds-sidenav-item-nested-background-selected:transparent;
1263
1336
 
1264
- .tds-radio input[type="radio"]{
1265
- --tds-radio-transition-property:none;
1337
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1338
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1339
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1340
+
1341
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1342
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1343
+ }
1344
+
1345
+ @media (prefers-reduced-motion: reduce){
1346
+ tds-sidenav,
1347
+ .tds-sidenav{
1348
+ --tds-sidenav-collapse-transition-enter:none;
1349
+ --tds-sidenav-collapse-transition-exit:none;
1350
+ --tds-sidenav-collapse-closed-transform:none;
1351
+ --tds-sidenav-collapse-open-transform:none;
1266
1352
  }
1267
1353
  }
1268
1354
 
1269
- .tds-radio:has(input:checked){
1270
- --tds-radio-input-background-color:var(--t-form-background-color);
1271
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1272
- --tds-radio-input-border-width:4px;
1355
+ .tds-sidenav--theme-gray{
1356
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1357
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1358
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1359
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1360
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1273
1361
  }
1362
+ }
1274
1363
 
1275
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1276
- --tds-radio-input-background-color:var(--t-form-background-color);
1277
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1278
- }
1364
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1365
+ display:flex;
1366
+ }
1279
1367
 
1280
- .tds-radio:has(input:user-invalid){
1281
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1368
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1369
+ flex-direction:column;
1370
+ gap:var(--t-spacing-half);
1371
+ width:100%;
1282
1372
  }
1283
1373
 
1284
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1285
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1286
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1287
- }
1374
+ .tds-sidenav-section-list{
1375
+ width:100%;
1376
+ padding:0;
1377
+ margin:0;
1378
+ list-style:none;
1379
+ }
1288
1380
 
1289
- .tds-radio:has(input:disabled){
1290
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1291
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1381
+ .tds-sidenav-section-header{
1382
+ display:flex;
1383
+ align-items:baseline;
1384
+ justify-content:space-between;
1385
+ padding-top:var(--t-spacing-2);
1386
+ }
1292
1387
 
1293
- --tds-radio-label-color:var(--t-form-color-disabled);
1294
- --tds-radio-description-color:var(--t-form-color-disabled);
1295
- --tds-radio-cursor:not-allowed;
1388
+ .tds-sidenav-section-header h2{
1389
+ margin:0;
1390
+ font-size:var(--t-font-size-sm);
1391
+ font-weight:var(--t-font-weight-semibold);
1392
+ line-height:1.35;
1393
+ color:var(--t-text-color-secondary);
1394
+ text-transform:uppercase;
1296
1395
  }
1297
1396
 
1298
- .tds-radio:has(input:disabled) input:checked{
1299
- --tds-radio-input-background-color:var(--t-form-background-color);
1300
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1301
- }
1397
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1398
+ padding-top:0;
1399
+ }
1302
1400
 
1303
- .tds-radio-description{
1401
+ .tds-sidenav-section-header [slot="label-actions"]{
1402
+ display:flex;
1403
+ gap:var(--t-spacing-half);
1404
+ align-items:center;
1405
+ }
1406
+
1407
+ .tds-sidenav-section [slot="section-actions"]{
1304
1408
  display:flex;
1305
- grid-area:2 / 2;
1306
- gap:var(--t-spacing-half);
1307
- align-items:flex-start;
1308
- margin:0;
1309
- font-size:var(--tds-radio-description-font-size);
1310
- line-height:var(--tds-radio-description-line-height);
1311
- color:var(--tds-radio-description-color);
1312
- cursor:text;
1409
+ gap:12px;
1410
+ align-items:center;
1411
+ min-height:42px;
1412
+ padding:var(--t-spacing-1) 0;
1313
1413
  }
1314
1414
 
1315
- .tds-radio--sm{
1316
- --tds-radio-line-height:1.35;
1317
- --tds-radio-input-size:var(--t-element-size-sm);
1318
- --tds-radio-font-size:var(--t-font-size-sm);
1319
- --tds-radio-description-font-size:var(--t-font-size-xs);
1320
- --tds-radio-description-line-height:1.3;
1415
+ .tds-sidenav-section-list,
1416
+ .tds-sidenav-item{
1417
+ width:100%;
1418
+ padding:0;
1419
+ margin:0;
1321
1420
  }
1322
1421
 
1422
+ .tds-sidenav-item :is(a,button){
1423
+ position:relative;
1424
+ display:flex;
1425
+ gap:12px;
1426
+ align-items:center;
1427
+ width:100%;
1428
+ padding:12px;
1429
+ overflow:hidden;
1430
+ font-size:var(--t-font-size-sm);
1431
+ line-height:18px;
1432
+ color:var(--t-text-color-headline);
1433
+ white-space:nowrap;
1434
+ text-decoration:none;
1435
+ -webkit-appearance:none;
1436
+ -moz-appearance:none;
1437
+ appearance:none;
1438
+ cursor:pointer;
1439
+ background-color:var(--tds-sidenav-item-background, transparent);
1440
+ border:0;
1441
+ border-radius:var(--t-border-radius);
1442
+ transition:var(--tds-sidenav-item-transition);
1443
+ }
1323
1444
 
1324
- :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{
1325
- -webkit-appearance:none;
1326
- appearance:none;
1445
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1446
+ display:block;
1447
+ flex:1;
1448
+ overflow:hidden;
1449
+ text-overflow:ellipsis;
1450
+ text-align:left;
1451
+ white-space:nowrap;
1327
1452
  }
1328
1453
 
1329
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1330
- inline-size:1em;
1331
- block-size:2em;
1454
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1455
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1456
+ color:var(--t-text-color-headline);
1457
+ text-decoration:none;
1332
1458
  }
1333
1459
 
1334
- @supports (field-sizing: content){
1335
- .tds-input--auto-width{
1336
- inline-size:-moz-fit-content;
1337
- inline-size:fit-content;
1338
- min-inline-size:min(100%, 122px);
1339
- }
1340
-
1341
- .tds-input--auto-width input{
1342
- field-sizing:content;
1343
- inline-size:auto;
1344
- }
1345
- }
1460
+ :is(.tds-sidenav-item :is(a,button)):active{
1461
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1462
+ }
1346
1463
 
1347
- .tds-combo-box{
1348
- --tds-combo-box-button-offset:4px;
1349
- }
1464
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1465
+ overflow:hidden;
1466
+ color:var(--tds-sidenav-item-icon-color);
1467
+ }
1350
1468
 
1351
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1352
- transform:rotate(.5turn);
1353
- }
1469
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1470
+ display:block;
1471
+ width:var(--tds-sidenav-item-icon-size);
1472
+ height:var(--tds-sidenav-item-icon-size);
1473
+ }
1354
1474
 
1355
- .tds-combo-box--lg{
1356
- --tds-combo-box-button-offset:5px;
1357
- }
1475
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1476
+ --tds-sidenav-indent:19px;
1477
+ }
1358
1478
 
1359
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1360
- display:none;
1361
- }
1479
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1480
+ visibility:visible;
1481
+ block-size:auto;
1482
+ opacity:1;
1483
+ }
1362
1484
 
1363
- .tds-combo-box-input{
1364
- display:flex;
1365
- flex:1;
1366
- align-items:center;
1367
- padding-block:var(--tds-field-padding-block);
1368
- padding-inline:var(--tds-field-padding-inline);
1369
- font-family:inherit;
1370
- font-size:inherit;
1371
- color:inherit;
1372
- outline:0;
1373
- background:transparent;
1374
- border:0;
1375
- }
1485
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1486
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1487
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1376
1488
 
1377
- .tds-combo-box-input:has( + .tds-combo-box-button){
1378
- padding-inline-end:0;
1489
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1490
+ font-weight:var(--t-font-weight-semibold);
1379
1491
  }
1380
1492
 
1381
- .tds-combo-box-input::-moz-placeholder{
1382
- color:var(--tds-field-placeholder-color);
1383
- -moz-user-select:none;
1384
- user-select:none;
1493
+ .tds-sidenav-item:has(.tds-sidenav-section){
1494
+ display:flex;
1495
+ flex-direction:column;
1496
+ gap:var(--t-spacing-half);
1385
1497
  }
1386
1498
 
1387
- .tds-combo-box-input::placeholder{
1388
- color:var(--tds-field-placeholder-color);
1389
- -webkit-user-select:none;
1390
- -moz-user-select:none;
1391
- user-select:none;
1499
+ .tds-sidenav-item .tds-sidenav-section-list{
1500
+ --tds-sidenav-item-depth:1;
1501
+ gap:0;
1392
1502
  }
1393
1503
 
1394
- .tds-combo-box-button{
1395
- flex-shrink:0;
1396
- align-self:center;
1397
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1398
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1399
- padding:0;
1400
- margin-inline-end:var(--tds-combo-box-button-offset);
1401
- }
1504
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1505
+ visibility:hidden;
1506
+ block-size:0;
1507
+ overflow-y:clip;
1508
+ opacity:0;
1509
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1510
+ }
1402
1511
 
1403
- .tds-combo-box-button > svg{
1404
- inline-size:var(--tds-field-font-size);
1405
- block-size:var(--tds-field-font-size);
1406
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1407
- }
1512
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1513
+ --tds-sidenav-item-depth:2;
1514
+ }
1408
1515
 
1409
- .tds-combo-box-popover{
1410
- width:var(--trigger-width);
1411
- max-block-size:inherit;
1412
- padding:var(--t-spacing-1);
1413
- overflow:auto;
1414
- scroll-behavior:smooth;
1415
- overscroll-behavior:none;
1416
- -webkit-user-select:none;
1417
- -moz-user-select:none;
1418
- user-select:none;
1419
- outline:0;
1420
- scrollbar-color:#0004 #0000;
1421
- scrollbar-width:thin;
1422
- background:var(--t-surface-color-card);
1423
- background-clip:padding-box;
1424
- border:1px solid var(--t-border-color);
1425
- border-radius:var(--t-border-radius);
1426
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1427
- }
1516
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1517
+ min-height:var(--t-element-size-2xl);
1518
+ padding-block:9px;
1519
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1520
+ line-height:1;
1521
+ background-color:transparent;
1522
+ }
1428
1523
 
1429
- .tds-combo-box-popover[data-entering]{
1430
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1431
- }
1524
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1525
+ position:absolute;
1526
+ top:0;
1527
+ bottom:0;
1528
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1529
+ width:2px;
1530
+ content:"";
1531
+ background-color:var(--tds-sidenav-item-nested-border-color);
1532
+ transition:var(--tds-sidenav-item-transition);
1533
+ }
1432
1534
 
1433
- .tds-combo-box-popover[data-exiting]{
1434
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1435
- }
1535
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1536
+ position:absolute;
1537
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1538
+ z-index:-1;
1539
+ height:100%;
1540
+ content:"";
1541
+ background-color:var(--tds-sidenav-item-nested-background);
1542
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1543
+ transition:var(--tds-sidenav-item-transition);
1544
+ }
1436
1545
 
1437
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1438
- will-change:opacity, transform;
1439
- }
1546
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1547
+ display:block;
1548
+ text-align:left;
1549
+ white-space:normal;
1550
+ }
1440
1551
 
1441
- @keyframes tds-combo-box-popover{
1442
- from{
1443
- opacity:0;
1444
- transform:translateY(-8px);
1445
- }
1446
- }
1552
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1553
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1554
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1555
+ }
1447
1556
 
1448
- @media (prefers-reduced-motion: reduce){
1449
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1450
- animation:none;
1557
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1558
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1559
+ }
1560
+
1561
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1562
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1563
+ font-weight:var(--t-font-weight-medium);
1451
1564
  }
1452
1565
 
1453
- .tds-combo-box-button > svg{
1454
- transition:none;
1455
- }
1566
+ .tds-sidenav-responsive-header{
1567
+ display:flex;
1568
+ gap:var(--t-spacing-2);
1569
+ align-items:center;
1570
+ width:100%;
1456
1571
  }
1457
1572
 
1458
- .tds-combo-box-list{
1459
- padding:0;
1460
- margin:0;
1461
- }
1573
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1574
+ order:0;
1575
+ }
1462
1576
 
1463
- .tds-combo-box-list-item{
1464
- display:block;
1465
- padding-block:var(--t-spacing-1);
1466
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1467
- overflow:hidden;
1468
- text-overflow:ellipsis;
1469
- font-size:1rem;
1470
- color:var(--t-text-color);
1471
- white-space:nowrap;
1472
- cursor:default;
1473
- border-radius:var(--t-border-radius);
1474
- }
1577
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1578
+ flex:1;
1579
+ order:1;
1580
+ margin:0;
1581
+ font-size:var(--t-font-size-lg);
1582
+ font-weight:var(--t-font-weight-medium);
1583
+ color:var(--t-text-color-headline);
1584
+ }
1475
1585
 
1476
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1477
- background:var(--t-fill-color-neutral-070);
1586
+ @media (max-width: 719px){
1587
+ .tds-sidenav-collapse{
1588
+ z-index:10001;
1589
+ display:none;
1590
+ max-width:min(448px, calc(100vw - 48px));
1591
+ padding:0;
1592
+ margin:12px 0;
1593
+ position-area:bottom span-right;
1594
+ overflow:hidden;
1595
+ outline:0;
1596
+ background:var(--t-surface-color-card);
1597
+ border:0;
1598
+ border-radius:6px;
1599
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1600
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1601
+ transform:var(--tds-sidenav-collapse-open-transform);
1602
+ transition:var(--tds-sidenav-collapse-transition-enter);
1603
+ will-change:transform;
1604
+ }
1605
+
1606
+ .tds-sidenav-scroll-container{
1607
+ --webkit-overflow-scrolling:touch;
1608
+ display:block;
1609
+ width:100%;
1610
+ height:-moz-fit-content;
1611
+ height:fit-content;
1612
+ padding:var(--t-spacing-2);
1613
+ overflow-y:auto;
1478
1614
  }
1479
1615
 
1480
- .tds-combo-box-list-item[data-selected]{
1481
- background:var(--t-fill-color-button-interaction-ghost-active);
1616
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1617
+ display:none;
1482
1618
  }
1619
+ @supports selector(:popover-open){
1620
+ .tds-sidenav-collapse:popover-open{
1621
+ display:flex;
1622
+ }
1483
1623
 
1484
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1485
- background:var(--t-fill-color-neutral-060);
1486
- }
1624
+ .tds-sidenav-collapse:not(:popover-open){
1625
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1626
+ transition:var(--tds-sidenav-collapse-transition-exit);
1627
+ }
1487
1628
 
1488
- .tds-combo-box-list-item[data-disabled]{
1489
- color:var(--t-form-color-disabled);
1490
- cursor:not-allowed;
1629
+ @starting-style{
1630
+ .tds-sidenav-collapse:popover-open{
1631
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1632
+ transform:var(--tds-sidenav-collapse-closed-transform);
1633
+ }
1634
+ }
1491
1635
  }
1492
-
1493
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1494
- background:transparent;
1636
+ @supports not selector(:popover-open){
1637
+ .tds-sidenav-collapse.\:popover-open{
1638
+ display:flex;
1495
1639
  }
1496
1640
 
1497
- .tds-combo-box-empty-state{
1498
- position:relative;
1499
- min-block-size:var(--t-spacing-3);
1500
- padding-block:var(--t-spacing-1);
1501
- padding-inline:var(--t-spacing-2);
1502
- font-size:var(--t-font-size-md);
1503
- color:var(--t-text-color-secondary);
1641
+ .tds-sidenav-collapse:not(.\:popover-open){
1642
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1643
+ transition:var(--tds-sidenav-collapse-transition-exit);
1644
+ }
1645
+ }
1504
1646
  }
1505
1647
 
1506
- .tds-combo-box-load-more{
1507
- position:relative;
1508
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1648
+ @media (min-width: 720px){
1649
+ .tds-sidenav-responsive-header{
1650
+ display:none;
1651
+ }
1509
1652
  }
1510
1653
 
1511
- .tds-combo-box-empty-state,
1512
- .tds-combo-box-load-more{
1513
- --tds-loading-spinner-visibility:visible;
1514
- --tds-loading-spinner-animation-play-state:running;
1515
- }
1654
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1655
+ display:none;
1656
+ }
1516
1657
 
1517
- .tds-combo-box-list-section:not(:first-child){
1518
- margin-block-start:var(--t-spacing-half);
1519
- }
1658
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1659
+ display:block;
1660
+ }
1520
1661
 
1521
- .tds-combo-box-section-header{
1522
- padding-block:var(--t-spacing-1);
1523
- padding-inline:var(--t-spacing-1);
1524
- font-size:var(--t-font-size-sm);
1525
- font-weight:var(--t-font-weight-semibold);
1526
- color:var(--t-text-color-secondary);
1527
- }
1662
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1663
+ display:flex;
1664
+ flex-direction:column;
1665
+ }
1528
1666
 
1529
- .tds-checkbox-group{
1530
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1531
- --tds-checkbox-group-line-height:1.4;
1532
- --tds-checkbox-group-gap:var(--t-spacing-1);
1667
+ .tds-input{
1668
+ --tds-input-border-color:var(--t-form-border-color);
1669
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1670
+ --tds-input-background-color:var(--t-form-background-color);
1671
+ --tds-input-color:var(--t-form-color);
1672
+ --tds-input-font-size:var(--t-font-size-md);
1673
+ --tds-input-description-color:var(--t-text-color-secondary);
1674
+ --tds-input-description-invalid-icon-display:none;
1675
+ --tds-input-min-height:var(--t-container-size-md);
1676
+ --tds-input-padding-inline:var(--t-spacing-1);
1533
1677
 
1534
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
1678
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1535
1679
 
1536
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1537
- --tds-checkbox-group-description-line-height:1.35;
1538
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1539
- --tds-checkbox-group-description-invalid-icon-display:none;
1540
1680
  display:flex;
1541
1681
  flex-direction:column;
1542
- gap:var(--tds-checkbox-group-gap);
1543
- padding:0;
1544
- margin:0;
1545
-
1546
- font-size:var(--tds-checkbox-group-font-size);
1547
- line-height:var(--tds-checkbox-group-line-height);
1548
- border:0;
1682
+ gap:var(--t-spacing-half);
1549
1683
  }
1550
1684
 
1551
- .tds-checkbox-group legend{
1552
- padding:0;
1553
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
1685
+ .tds-input label{
1686
+ font-size:var(--t-font-size-md);
1687
+ font-weight:var(--t-font-weight-normal);
1688
+ color:var(--t-text-color);
1554
1689
  }
1555
1690
 
1556
- .tds-checkbox-group:has(.tds-checkbox-group-description){
1557
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
1691
+ .tds-input :is(input,textarea){
1692
+ inline-size:100%;
1693
+ block-size:auto;
1694
+ min-block-size:var(--tds-input-min-height);
1695
+ padding-block:var(--tds-input-padding-block);
1696
+ padding-inline:var(--tds-input-padding-inline);
1697
+ font-family:inherit;
1698
+ font-size:var(--tds-input-font-size);
1699
+ color:var(--tds-input-color);
1700
+ -webkit-appearance:none;
1701
+ -moz-appearance:none;
1702
+ appearance:none;
1703
+ outline:var(--t-focus-ring-width) solid transparent;
1704
+ outline-offset:0;
1705
+ background-color:var(--tds-input-background-color);
1706
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
1707
+ border-radius:var(--t-form-border-radius);
1708
+ transition-timing-function:var(--t-ease-in-out);
1709
+ transition-duration:var(--t-duration-200);
1710
+ transition-property:var(--tds-input-transition-property);
1558
1711
  }
1559
1712
 
1560
- .tds-checkbox-group[aria-invalid="true"]{
1561
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1562
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1713
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1714
+ border-color:var(--tds-input-border-color-hover);
1715
+ }
1716
+
1717
+ :is(.tds-input :is(input,textarea)):focus{
1718
+ outline-color:transparent;
1719
+ }
1720
+
1721
+ :is(.tds-input :is(input,textarea)):focus-visible{
1722
+ outline-color:var(--t-focus-ring-color);
1723
+ outline-offset:var(--t-focus-ring-offset);
1724
+ border-color:var(--t-form-border-color-focus);
1725
+ }
1726
+
1727
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1728
+ color:var(--t-form-placeholder-color);
1729
+ -moz-user-select:none;
1730
+ user-select:none;
1731
+ }
1732
+
1733
+ :is(.tds-input :is(input,textarea))::placeholder{
1734
+ color:var(--t-form-placeholder-color);
1735
+ -webkit-user-select:none;
1736
+ -moz-user-select:none;
1737
+ user-select:none;
1738
+ }
1739
+
1740
+ @media (prefers-reduced-motion: reduce){
1741
+
1742
+ .tds-input :is(input,textarea){
1743
+ --tds-input-transition-property:none;
1563
1744
  }
1745
+ }
1564
1746
 
1565
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1747
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1748
+ --tds-input-background-color:var(--t-form-background-color-error);
1749
+ --tds-input-border-color:var(--t-form-border-color-error);
1750
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1751
+ --tds-input-description-color:var(--t-text-color-status-error);
1752
+ --tds-input-description-invalid-icon-display:inline-block;
1753
+ }
1754
+
1755
+ .tds-input:has(:is(input,textarea):required) label::after{
1566
1756
  margin-left:.25ch;
1567
1757
  color:var(--t-text-color-status-error);
1568
1758
  content:"*";
1569
1759
  }
1570
1760
 
1571
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1572
- content:none;
1761
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1762
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1763
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1764
+ --tds-input-color:var(--t-form-color-disabled);
1765
+ }
1766
+
1767
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1768
+ cursor:not-allowed;
1573
1769
  }
1574
1770
 
1575
- .tds-checkbox-group-fields{
1576
- display:flex;
1577
- flex-direction:column;
1578
- gap:var(--tds-checkbox-group-gap);
1579
- align-items:flex-start;
1580
- }
1771
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1772
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1773
+ --tds-input-background-color:var(--t-form-background-color-readonly);
1774
+ }
1581
1775
 
1582
- .tds-checkbox-group-description{
1776
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1777
+ border-color:var(--tds-input-border-color-hover);
1778
+ }
1779
+
1780
+ .tds-input.tds-input--lg{
1781
+ --tds-input-min-height:var(--t-container-size-lg);
1782
+ --tds-input-font-size:var(--t-font-size-lg);
1783
+ }
1784
+
1785
+ .tds-input-description{
1583
1786
  display:flex;
1584
1787
  gap:var(--t-spacing-half);
1585
1788
  align-items:flex-start;
1586
1789
  margin:0;
1587
- font-size:var(--tds-checkbox-group-description-font-size);
1588
- line-height:var(--tds-checkbox-group-description-line-height);
1589
- color:var(--tds-checkbox-group-description-color);
1790
+ font-size:var(--t-font-size-sm);
1791
+ line-height:1.35;
1792
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
1590
1793
  cursor:text;
1591
1794
  }
1592
1795
 
1593
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1594
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1796
+ .tds-input-description .tds-input-description-invalid-icon{
1797
+ display:var(--tds-input-description-invalid-icon-display, none);
1595
1798
  flex-shrink:0;
1596
- margin-top:calc(.5lh - .5em);
1597
- line-height:var(--tds-checkbox-group-description-line-height);
1799
+ margin-block-start:calc(.5lh - .5em);
1800
+ line-height:1.35;
1598
1801
  }
1599
1802
 
1600
- .tds-checkbox-group--sm{
1601
- --tds-checkbox-group-line-height:1.35;
1602
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1603
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1604
- --tds-checkbox-group-description-line-height:1.3;
1605
- }
1606
-
1607
- .tds-radio-group{
1608
- --tds-radio-group-font-size:var(--t-font-size-md);
1609
- --tds-radio-group-line-height:1.4;
1610
- --tds-radio-group-gap:var(--t-spacing-1);
1611
-
1612
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1803
+ .tds-field{
1804
+ --tds-field-border-color:var(--t-form-border-color);
1805
+ --tds-field-border-color-hover:var(--t-form-border-color-hover);
1806
+ --tds-field-border-color-active:var(--t-form-border-color-focus);
1807
+ --tds-field-background-color:var(--t-form-background-color);
1808
+ --tds-field-color:var(--t-form-color);
1809
+ --tds-field-placeholder-color:var(--t-form-placeholder-color);
1810
+ --tds-field-font-size:var(--t-font-size-md);
1811
+ --tds-field-min-height:var(--t-container-size-md);
1812
+ --tds-field-padding-block:6px;
1813
+ --tds-field-padding-inline:var(--t-spacing-1);
1814
+ --tds-field-description-color:var(--t-text-color-secondary);
1815
+ --tds-field-description-invalid-icon-display:none;
1613
1816
 
1614
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1615
- --tds-radio-group-description-line-height:1.35;
1616
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1617
- --tds-radio-group-description-invalid-icon-display:none;
1817
+ position:relative;
1618
1818
  display:flex;
1619
1819
  flex-direction:column;
1620
- gap:var(--tds-radio-group-gap);
1621
- padding:0;
1622
- margin:0;
1623
-
1624
- font-size:var(--tds-radio-group-font-size);
1625
- line-height:var(--tds-radio-group-line-height);
1626
- border:0;
1820
+ gap:var(--t-spacing-half);
1627
1821
  }
1628
1822
 
1629
- .tds-radio-group legend{
1630
- padding:0;
1631
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1823
+ .tds-field[data-required] .tds-field-label::after{
1824
+ margin-left:.25ch;
1825
+ color:var(--t-text-color-status-error);
1826
+ content:"*";
1632
1827
  }
1633
1828
 
1634
- .tds-radio-group:has(.tds-radio-group-description){
1635
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1829
+ .tds-field[data-invalid]{
1830
+ --tds-field-border-color:var(--t-form-border-color-error);
1831
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1832
+ --tds-field-border-color-active:var(--t-form-border-color-error-hover);
1833
+ --tds-field-background-color:var(--t-form-background-color-error);
1834
+ --tds-field-description-color:var(--t-text-color-status-error);
1835
+ --tds-field-description-invalid-icon-display:inline-block;
1636
1836
  }
1637
1837
 
1638
- .tds-radio-group[aria-invalid="true"]{
1639
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1640
- --tds-radio-group-description-invalid-icon-display:inline-block;
1838
+ .tds-field[data-disabled]{
1839
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1840
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1841
+ --tds-field-color:var(--t-form-color-disabled);
1842
+ --tds-field-placeholder-color:var(--t-form-color-disabled);
1641
1843
  }
1642
1844
 
1643
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1644
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1845
+ .tds-field[data-disabled] .tds-field-control{
1846
+ cursor:not-allowed;
1645
1847
  }
1646
1848
 
1647
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1648
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1649
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1650
- }
1651
-
1652
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1653
- --tds-radio-input-background-color:var(--t-form-background-color);
1654
- }
1849
+ .tds-field--lg{
1850
+ --tds-field-min-height:var(--t-container-size-lg);
1851
+ --tds-field-font-size:var(--t-font-size-lg);
1852
+ }
1655
1853
 
1656
- .tds-radio-group:has(input:required) legend::after{
1657
- margin-left:.25ch;
1658
- color:var(--t-text-color-status-error);
1659
- content:"*";
1660
- }
1854
+ .tds-field-label{
1855
+ font-size:var(--t-font-size-md);
1856
+ font-weight:var(--t-font-weight-normal);
1857
+ color:var(--t-text-color);
1858
+ cursor:default;
1859
+ }
1661
1860
 
1662
- .tds-radio-group-fields{
1861
+ .tds-field-control{
1663
1862
  display:flex;
1664
- flex-direction:column;
1665
- gap:var(--tds-radio-group-gap);
1666
- align-items:flex-start;
1863
+ align-items:center;
1864
+ inline-size:100%;
1865
+ min-block-size:var(--tds-field-min-height);
1866
+ font-family:inherit;
1867
+ font-size:var(--tds-field-font-size);
1868
+ line-height:1;
1869
+ color:var(--tds-field-color);
1870
+ -webkit-appearance:none;
1871
+ -moz-appearance:none;
1872
+ appearance:none;
1873
+ cursor:text;
1874
+ outline:var(--t-focus-ring-width) solid transparent;
1875
+ outline-offset:0;
1876
+ background-color:var(--tds-field-background-color);
1877
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1878
+ border-radius:var(--t-form-border-radius);
1879
+ transition-timing-function:var(--t-ease-in-out);
1880
+ transition-duration:var(--t-duration-200);
1881
+ transition-property:background-color, border-color, outline-color, outline-offset;
1667
1882
  }
1668
1883
 
1669
- .tds-radio-group-description{
1884
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
1885
+ border-color:var(--tds-field-border-color-hover);
1886
+ }
1887
+
1888
+ .tds-field-control[data-focus-within]{
1889
+ outline-color:var(--t-focus-ring-color);
1890
+ outline-offset:var(--t-focus-ring-offset);
1891
+ border-color:var(--tds-field-border-color-active);
1892
+ }
1893
+
1894
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
1895
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1896
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1897
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1898
+ color:var(--t-form-color-readonly);
1899
+ }
1900
+
1901
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
1902
+ border-color:var(--t-form-border-color-hover);
1903
+ }
1904
+
1905
+ .tds-field-description{
1670
1906
  display:flex;
1671
1907
  gap:var(--t-spacing-half);
1672
1908
  align-items:flex-start;
1673
1909
  margin:0;
1674
- font-size:var(--tds-radio-group-description-font-size);
1675
- line-height:var(--tds-radio-group-description-line-height);
1676
- color:var(--tds-radio-group-description-color);
1910
+ font-size:var(--t-font-size-sm);
1911
+ line-height:1.35;
1912
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
1677
1913
  cursor:text;
1678
1914
  }
1679
1915
 
1680
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1681
- display:var(--tds-radio-group-description-invalid-icon-display);
1916
+ .tds-field-description .tds-field-description-invalid-icon{
1917
+ display:var(--tds-field-description-invalid-icon-display, none);
1682
1918
  flex-shrink:0;
1683
- margin-top:calc(.5lh - .5em);
1684
- line-height:var(--tds-radio-group-description-line-height);
1919
+ margin-block-start:calc(.5lh - .5em);
1920
+ line-height:1.35;
1685
1921
  }
1686
1922
 
1687
- .tds-radio-group--sm{
1688
- --tds-radio-group-line-height:1.35;
1689
- --tds-radio-group-font-size:var(--t-font-size-sm);
1690
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1691
- --tds-radio-group-description-line-height:1.3;
1923
+ .tds-field-date-segment{
1924
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
1925
+ text-align:end;
1926
+ text-wrap:nowrap;
1927
+ caret-color:transparent;
1928
+ border-radius:var(--t-border-radius-sm);
1692
1929
  }
1693
1930
 
1694
- .tds-number-stepper{
1695
- --tds-number-stepper-button-offset:4px;
1696
- --tds-number-stepper-button-gap:2px;
1697
- }
1931
+ .tds-field-date-segment[data-placeholder]{
1932
+ color:var(--tds-field-placeholder-color);
1933
+ }
1698
1934
 
1699
- .tds-number-stepper--lg{
1700
- --tds-number-stepper-button-offset:5px;
1701
- --tds-number-stepper-button-gap:4px;
1935
+ .tds-field-date-segment[data-focused]{
1936
+ color:var(--t-text-color-inverted);
1937
+ outline:0;
1938
+ background-color:var(--t-fill-color-interaction);
1939
+ }
1940
+
1941
+ .tds-field-date-segment-separator{
1942
+ padding-inline:0;
1943
+ color:var(--tds-field-placeholder-color);
1702
1944
  }
1703
1945
 
1704
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1705
- display:none;
1946
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
1947
+ color:var(--tds-field-color);
1706
1948
  }
1707
1949
 
1708
- .tds-number-stepper-input{
1709
- display:flex;
1710
- flex:1;
1711
- align-items:center;
1712
- min-inline-size:0;
1950
+ .tds-time-field-input{
1951
+ --tds-field-date-segment-padding-inline:1px;
1713
1952
  padding-block:var(--tds-field-padding-block);
1714
1953
  padding-inline:var(--tds-field-padding-inline);
1715
- font-family:inherit;
1716
- font-size:inherit;
1717
- color:inherit;
1718
- outline:0;
1719
- background:transparent;
1720
- border:0;
1954
+ font-variant-numeric:tabular-nums;
1721
1955
  }
1722
1956
 
1723
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1724
- margin:0;
1957
+ .tds-radio{
1958
+ --tds-radio-font-size:var(--t-font-size-md);
1959
+ --tds-radio-cursor:pointer;
1960
+ --tds-radio-line-height:1.4;
1961
+ --tds-radio-transition-property:border-width;
1962
+
1963
+ --tds-radio-input-size:var(--t-element-size-md);
1964
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1965
+ --tds-radio-input-border-color:var(--t-form-border-color);
1966
+ --tds-radio-input-border-width:var(--t-form-border-width);
1967
+ --tds-radio-input-background-color:transparent;
1968
+
1969
+ --tds-radio-label-color:var(--t-form-color);
1970
+
1971
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1972
+ --tds-radio-description-line-height:1.35;
1973
+ --tds-radio-description-color:var(--t-text-color-secondary);
1974
+
1975
+ position:relative;
1976
+ display:inline-grid;
1977
+ grid-template-columns:auto;
1978
+ grid-auto-columns:1fr;
1979
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1980
+ line-height:var(--tds-radio-line-height);
1981
+ cursor:var(--tds-radio-cursor);
1982
+ -webkit-user-select:none;
1983
+ -moz-user-select:none;
1984
+ user-select:none;
1985
+ }
1986
+
1987
+ .tds-radio label{
1988
+ grid-area:1 / 2;
1989
+ font-size:var(--tds-radio-font-size);
1990
+ font-weight:var(--t-font-weight-normal);
1991
+ color:var(--tds-radio-label-color);
1992
+ cursor:var(--tds-radio-cursor);
1993
+ }
1994
+
1995
+ .tds-radio input[type="radio"]{
1996
+ position:relative;
1997
+ width:1em;
1998
+ height:1em;
1999
+ margin:calc((1lh - 1em) / 2) 0 0;
2000
+ font-size:var(--tds-radio-font-size);
2001
+ line-height:inherit;
1725
2002
  -webkit-appearance:none;
2003
+ -moz-appearance:none;
1726
2004
  appearance:none;
2005
+ cursor:var(--tds-radio-cursor);
2006
+ background-color:var(--tds-radio-input-background-color);
2007
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2008
+ border-radius:var(--tds-radio-input-border-radius);
2009
+ transition-timing-function:var(--t-ease-in-out);
2010
+ transition-duration:var(--t-duration-200);
2011
+ transition-property:var(--tds-radio-transition-property);
2012
+ }
2013
+
2014
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2015
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2016
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2017
+ }
2018
+
2019
+ :is(.tds-radio input[type="radio"]):focus-visible{
2020
+ outline:var(--t-focus-ring-outline);
2021
+ outline-offset:var(--t-focus-ring-offset);
2022
+ }
2023
+
2024
+ :is(.tds-radio input[type="radio"]):disabled{
2025
+ pointer-events:none;
2026
+ }
2027
+
2028
+ @media (prefers-reduced-motion: reduce){
2029
+
2030
+ .tds-radio input[type="radio"]{
2031
+ --tds-radio-transition-property:none;
2032
+ }
2033
+ }
2034
+
2035
+ .tds-radio:has(input:checked){
2036
+ --tds-radio-input-background-color:var(--t-form-background-color);
2037
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2038
+ --tds-radio-input-border-width:4px;
2039
+ }
2040
+
2041
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2042
+ --tds-radio-input-background-color:var(--t-form-background-color);
2043
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2044
+ }
2045
+
2046
+ .tds-radio:has(input:user-invalid){
2047
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1727
2048
  }
1728
2049
 
1729
- .tds-number-stepper-button{
1730
- flex-shrink:0;
1731
- align-self:center;
1732
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1733
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1734
- padding:0;
1735
- }
2050
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2051
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2052
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2053
+ }
1736
2054
 
1737
- .tds-number-stepper-button + .tds-number-stepper-button{
1738
- margin-inline-start:var(--tds-number-stepper-button-gap);
1739
- }
2055
+ .tds-radio:has(input:disabled){
2056
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2057
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1740
2058
 
1741
- .tds-number-stepper-button:last-of-type{
1742
- margin-inline-end:var(--tds-number-stepper-button-offset);
2059
+ --tds-radio-label-color:var(--t-form-color-disabled);
2060
+ --tds-radio-description-color:var(--t-form-color-disabled);
2061
+ --tds-radio-cursor:not-allowed;
1743
2062
  }
1744
2063
 
2064
+ .tds-radio:has(input:disabled) input:checked{
2065
+ --tds-radio-input-background-color:var(--t-form-background-color);
2066
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2067
+ }
2068
+
2069
+ .tds-radio-description{
2070
+ display:flex;
2071
+ grid-area:2 / 2;
2072
+ gap:var(--t-spacing-half);
2073
+ align-items:flex-start;
2074
+ margin:0;
2075
+ font-size:var(--tds-radio-description-font-size);
2076
+ line-height:var(--tds-radio-description-line-height);
2077
+ color:var(--tds-radio-description-color);
2078
+ cursor:text;
2079
+ }
2080
+
2081
+ .tds-radio--sm{
2082
+ --tds-radio-line-height:1.35;
2083
+ --tds-radio-input-size:var(--t-element-size-sm);
2084
+ --tds-radio-font-size:var(--t-font-size-sm);
2085
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2086
+ --tds-radio-description-line-height:1.3;
2087
+ }
2088
+
1745
2089
  .tds-input:has(textarea){
1746
2090
  --tds-input-padding-block:6px;
1747
2091
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1847,294 +2191,91 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1847
2191
  }
1848
2192
  }
1849
2193
 
1850
- .tds-time-field-input{
1851
- --tds-field-date-segment-padding-inline:1px;
1852
- padding-block:var(--tds-field-padding-block);
1853
- padding-inline:var(--tds-field-padding-inline);
1854
- font-variant-numeric:tabular-nums;
1855
- }
1856
-
1857
- .tds-input{
1858
- --tds-input-border-color:var(--t-form-border-color);
1859
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1860
- --tds-input-background-color:var(--t-form-background-color);
1861
- --tds-input-color:var(--t-form-color);
1862
- --tds-input-font-size:var(--t-font-size-md);
1863
- --tds-input-description-color:var(--t-text-color-secondary);
1864
- --tds-input-description-invalid-icon-display:none;
1865
- --tds-input-min-height:var(--t-container-size-md);
1866
- --tds-input-padding-inline:var(--t-spacing-1);
2194
+ .tds-radio-group{
2195
+ --tds-radio-group-font-size:var(--t-font-size-md);
2196
+ --tds-radio-group-line-height:1.4;
2197
+ --tds-radio-group-gap:var(--t-spacing-1);
1867
2198
 
1868
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2199
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1869
2200
 
2201
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2202
+ --tds-radio-group-description-line-height:1.35;
2203
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2204
+ --tds-radio-group-description-invalid-icon-display:none;
1870
2205
  display:flex;
1871
2206
  flex-direction:column;
1872
- gap:var(--t-spacing-half);
1873
- }
1874
-
1875
- .tds-input label{
1876
- font-size:var(--t-font-size-md);
1877
- font-weight:var(--t-font-weight-normal);
1878
- color:var(--t-text-color);
1879
- }
1880
-
1881
- .tds-input :is(input,textarea){
1882
- inline-size:100%;
1883
- block-size:auto;
1884
- min-block-size:var(--tds-input-min-height);
1885
- padding-block:var(--tds-input-padding-block);
1886
- padding-inline:var(--tds-input-padding-inline);
1887
- font-family:inherit;
1888
- font-size:var(--tds-input-font-size);
1889
- color:var(--tds-input-color);
1890
- -webkit-appearance:none;
1891
- -moz-appearance:none;
1892
- appearance:none;
1893
- outline:var(--t-focus-ring-width) solid transparent;
1894
- outline-offset:0;
1895
- background-color:var(--tds-input-background-color);
1896
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
1897
- border-radius:var(--t-form-border-radius);
1898
- transition-timing-function:var(--t-ease-in-out);
1899
- transition-duration:var(--t-duration-200);
1900
- transition-property:var(--tds-input-transition-property);
1901
- }
1902
-
1903
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1904
- border-color:var(--tds-input-border-color-hover);
1905
- }
1906
-
1907
- :is(.tds-input :is(input,textarea)):focus{
1908
- outline-color:transparent;
1909
- }
1910
-
1911
- :is(.tds-input :is(input,textarea)):focus-visible{
1912
- outline-color:var(--t-focus-ring-color);
1913
- outline-offset:var(--t-focus-ring-offset);
1914
- border-color:var(--t-form-border-color-focus);
1915
- }
1916
-
1917
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
1918
- color:var(--t-form-placeholder-color);
1919
- -moz-user-select:none;
1920
- user-select:none;
1921
- }
1922
-
1923
- :is(.tds-input :is(input,textarea))::placeholder{
1924
- color:var(--t-form-placeholder-color);
1925
- -webkit-user-select:none;
1926
- -moz-user-select:none;
1927
- user-select:none;
1928
- }
1929
-
1930
- @media (prefers-reduced-motion: reduce){
1931
-
1932
- .tds-input :is(input,textarea){
1933
- --tds-input-transition-property:none;
1934
- }
1935
- }
1936
-
1937
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1938
- --tds-input-background-color:var(--t-form-background-color-error);
1939
- --tds-input-border-color:var(--t-form-border-color-error);
1940
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1941
- --tds-input-description-color:var(--t-text-color-status-error);
1942
- --tds-input-description-invalid-icon-display:inline-block;
1943
- }
1944
-
1945
- .tds-input:has(:is(input,textarea):required) label::after{
1946
- margin-left:.25ch;
1947
- color:var(--t-text-color-status-error);
1948
- content:"*";
1949
- }
1950
-
1951
- .tds-input:where(:has(:is(input,textarea):disabled)){
1952
- --tds-input-border-color:var(--t-form-border-color-disabled);
1953
- --tds-input-background-color:var(--t-form-background-color-disabled);
1954
- --tds-input-color:var(--t-form-color-disabled);
1955
- }
1956
-
1957
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1958
- cursor:not-allowed;
1959
- }
1960
-
1961
- .tds-input:where(:has(:is(input,textarea)[readonly])){
1962
- --tds-input-border-color:var(--t-form-border-color-readonly);
1963
- --tds-input-background-color:var(--t-form-background-color-readonly);
1964
- }
1965
-
1966
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1967
- border-color:var(--tds-input-border-color-hover);
1968
- }
1969
-
1970
- .tds-input.tds-input--lg{
1971
- --tds-input-min-height:var(--t-container-size-lg);
1972
- --tds-input-font-size:var(--t-font-size-lg);
1973
- }
1974
-
1975
- .tds-input-description{
1976
- display:flex;
1977
- gap:var(--t-spacing-half);
1978
- align-items:flex-start;
2207
+ gap:var(--tds-radio-group-gap);
2208
+ padding:0;
1979
2209
  margin:0;
1980
- font-size:var(--t-font-size-sm);
1981
- line-height:1.35;
1982
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
1983
- cursor:text;
1984
- }
1985
-
1986
- .tds-input-description .tds-input-description-invalid-icon{
1987
- display:var(--tds-input-description-invalid-icon-display, none);
1988
- flex-shrink:0;
1989
- margin-block-start:calc(.5lh - .5em);
1990
- line-height:1.35;
1991
- }
1992
-
1993
- .tds-field{
1994
- --tds-field-border-color:var(--t-form-border-color);
1995
- --tds-field-border-color-hover:var(--t-form-border-color-hover);
1996
- --tds-field-border-color-active:var(--t-form-border-color-focus);
1997
- --tds-field-background-color:var(--t-form-background-color);
1998
- --tds-field-color:var(--t-form-color);
1999
- --tds-field-placeholder-color:var(--t-form-placeholder-color);
2000
- --tds-field-font-size:var(--t-font-size-md);
2001
- --tds-field-min-height:var(--t-container-size-md);
2002
- --tds-field-padding-block:6px;
2003
- --tds-field-padding-inline:var(--t-spacing-1);
2004
- --tds-field-description-color:var(--t-text-color-secondary);
2005
- --tds-field-description-invalid-icon-display:none;
2006
-
2007
- position:relative;
2008
- display:flex;
2009
- flex-direction:column;
2010
- gap:var(--t-spacing-half);
2011
- }
2012
-
2013
- .tds-field[data-required] .tds-field-label::after{
2014
- margin-left:.25ch;
2015
- color:var(--t-text-color-status-error);
2016
- content:"*";
2017
- }
2018
-
2019
- .tds-field[data-invalid]{
2020
- --tds-field-border-color:var(--t-form-border-color-error);
2021
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2022
- --tds-field-border-color-active:var(--t-form-border-color-error-hover);
2023
- --tds-field-background-color:var(--t-form-background-color-error);
2024
- --tds-field-description-color:var(--t-text-color-status-error);
2025
- --tds-field-description-invalid-icon-display:inline-block;
2026
- }
2027
-
2028
- .tds-field[data-disabled]{
2029
- --tds-field-border-color:var(--t-form-border-color-disabled);
2030
- --tds-field-background-color:var(--t-form-background-color-disabled);
2031
- --tds-field-color:var(--t-form-color-disabled);
2032
- --tds-field-placeholder-color:var(--t-form-color-disabled);
2033
- }
2034
-
2035
- .tds-field[data-disabled] .tds-field-control{
2036
- cursor:not-allowed;
2037
- }
2038
-
2039
- .tds-field--lg{
2040
- --tds-field-min-height:var(--t-container-size-lg);
2041
- --tds-field-font-size:var(--t-font-size-lg);
2042
- }
2043
-
2044
- .tds-field-label{
2045
- font-size:var(--t-font-size-md);
2046
- font-weight:var(--t-font-weight-normal);
2047
- color:var(--t-text-color);
2048
- cursor:default;
2049
- }
2050
2210
 
2051
- .tds-field-control{
2052
- display:flex;
2053
- align-items:center;
2054
- inline-size:100%;
2055
- min-block-size:var(--tds-field-min-height);
2056
- font-family:inherit;
2057
- font-size:var(--tds-field-font-size);
2058
- line-height:1;
2059
- color:var(--tds-field-color);
2060
- -webkit-appearance:none;
2061
- -moz-appearance:none;
2062
- appearance:none;
2063
- cursor:text;
2064
- outline:var(--t-focus-ring-width) solid transparent;
2065
- outline-offset:0;
2066
- background-color:var(--tds-field-background-color);
2067
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
2068
- border-radius:var(--t-form-border-radius);
2069
- transition-timing-function:var(--t-ease-in-out);
2070
- transition-duration:var(--t-duration-200);
2071
- transition-property:background-color, border-color, outline-color, outline-offset;
2211
+ font-size:var(--tds-radio-group-font-size);
2212
+ line-height:var(--tds-radio-group-line-height);
2213
+ border:0;
2072
2214
  }
2073
2215
 
2074
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2075
- border-color:var(--tds-field-border-color-hover);
2216
+ .tds-radio-group legend{
2217
+ padding:0;
2218
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
2076
2219
  }
2077
2220
 
2078
- .tds-field-control[data-focus-within]{
2079
- outline-color:var(--t-focus-ring-color);
2080
- outline-offset:var(--t-focus-ring-offset);
2081
- border-color:var(--tds-field-border-color-active);
2221
+ .tds-radio-group:has(.tds-radio-group-description){
2222
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
2082
2223
  }
2083
2224
 
2084
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2085
- --tds-field-border-color:var(--t-form-border-color-readonly);
2086
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2087
- --tds-field-background-color:var(--t-form-background-color-readonly);
2088
- color:var(--t-form-color-readonly);
2225
+ .tds-radio-group[aria-invalid="true"]{
2226
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2227
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2089
2228
  }
2090
2229
 
2091
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2092
- border-color:var(--t-form-border-color-hover);
2230
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2231
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2093
2232
  }
2094
2233
 
2095
- .tds-field-description{
2234
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2235
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2236
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2237
+ }
2238
+
2239
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2240
+ --tds-radio-input-background-color:var(--t-form-background-color);
2241
+ }
2242
+
2243
+ .tds-radio-group:has(input:required) legend::after{
2244
+ margin-left:.25ch;
2245
+ color:var(--t-text-color-status-error);
2246
+ content:"*";
2247
+ }
2248
+
2249
+ .tds-radio-group-fields{
2250
+ display:flex;
2251
+ flex-direction:column;
2252
+ gap:var(--tds-radio-group-gap);
2253
+ align-items:flex-start;
2254
+ }
2255
+
2256
+ .tds-radio-group-description{
2096
2257
  display:flex;
2097
2258
  gap:var(--t-spacing-half);
2098
2259
  align-items:flex-start;
2099
2260
  margin:0;
2100
- font-size:var(--t-font-size-sm);
2101
- line-height:1.35;
2102
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
2261
+ font-size:var(--tds-radio-group-description-font-size);
2262
+ line-height:var(--tds-radio-group-description-line-height);
2263
+ color:var(--tds-radio-group-description-color);
2103
2264
  cursor:text;
2104
2265
  }
2105
2266
 
2106
- .tds-field-description .tds-field-description-invalid-icon{
2107
- display:var(--tds-field-description-invalid-icon-display, none);
2267
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2268
+ display:var(--tds-radio-group-description-invalid-icon-display);
2108
2269
  flex-shrink:0;
2109
- margin-block-start:calc(.5lh - .5em);
2110
- line-height:1.35;
2111
- }
2112
-
2113
- .tds-field-date-segment{
2114
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2115
- text-align:end;
2116
- text-wrap:nowrap;
2117
- caret-color:transparent;
2118
- border-radius:var(--t-border-radius-sm);
2119
- }
2120
-
2121
- .tds-field-date-segment[data-placeholder]{
2122
- color:var(--tds-field-placeholder-color);
2123
- }
2124
-
2125
- .tds-field-date-segment[data-focused]{
2126
- color:var(--t-text-color-inverted);
2127
- outline:0;
2128
- background-color:var(--t-fill-color-interaction);
2270
+ margin-top:calc(.5lh - .5em);
2271
+ line-height:var(--tds-radio-group-description-line-height);
2129
2272
  }
2130
2273
 
2131
- .tds-field-date-segment-separator{
2132
- padding-inline:0;
2133
- color:var(--tds-field-placeholder-color);
2134
- }
2135
-
2136
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2137
- color:var(--tds-field-color);
2274
+ .tds-radio-group--sm{
2275
+ --tds-radio-group-line-height:1.35;
2276
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2277
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2278
+ --tds-radio-group-description-line-height:1.3;
2138
2279
  }
2139
2280
 
2140
2281
  .tds-select{
@@ -2569,147 +2710,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2569
2710
  }
2570
2711
  }
2571
2712
 
2572
- .tds-toggle-switch{
2573
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2574
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
2575
- --tds-toggle-switch-cursor:pointer;
2576
- --tds-toggle-switch-display:inline-grid;
2577
- --tds-toggle-switch-line-height:1.4;
2578
-
2579
- --tds-toggle-switch-label-color:var(--t-form-color);
2580
-
2581
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2582
- --tds-toggle-switch-track-outline:none;
2583
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2584
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2585
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2586
-
2587
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2588
- --tds-toggle-switch-thumb-transform:translateX(0);
2589
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2590
-
2591
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2592
- --tds-toggle-switch-description-line-height:1.35;
2593
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2594
- position:relative;
2595
-
2596
- display:var(--tds-toggle-switch-display);
2597
- grid-template-columns:auto;
2598
- grid-auto-columns:1fr;
2599
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
2600
- -webkit-user-select:none;
2601
- -moz-user-select:none;
2602
- user-select:none;
2603
- }
2604
-
2605
- .tds-toggle-switch input[type="checkbox"]{
2606
- position:absolute;
2607
- width:var(--tds-toggle-switch-track-width);
2608
- height:var(--tds-toggle-switch-track-height);
2609
- margin:0;
2610
- -webkit-appearance:none;
2611
- -moz-appearance:none;
2612
- appearance:none;
2613
- cursor:var(--tds-toggle-switch-cursor);
2614
- outline:var(--tds-toggle-switch-track-outline);
2615
- outline-offset:var(--t-focus-ring-offset);
2616
- background-color:transparent;
2617
- border:0;
2618
- border-radius:var(--t-border-radius-round);
2619
- }
2620
-
2621
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2622
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2623
- }
2624
-
2625
- .tds-toggle-switch label{
2626
- display:inline-flex;
2627
- grid-area:1 / 2;
2628
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
2629
- column-gap:var(--tds-toggle-switch-column-gap);
2630
- margin-top:-.09375em;
2631
- font-size:var(--tds-toggle-switch-font-size);
2632
- font-weight:var(--t-font-weight-normal);
2633
- line-height:var(--tds-toggle-switch-line-height);
2634
- color:var(--tds-toggle-switch-label-color);
2635
- cursor:var(--tds-toggle-switch-cursor);
2636
- }
2637
-
2638
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2639
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2640
- }
2641
-
2642
- .tds-toggle-switch:has(input:checked){
2643
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2644
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2645
- }
2646
-
2647
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2648
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2649
- }
2650
-
2651
- .tds-toggle-switch:has(input:disabled){
2652
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2653
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2654
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2655
- --tds-toggle-switch-cursor:not-allowed;
2656
- }
2657
-
2658
- .tds-toggle-switch-track{
2659
- position:relative;
2660
- flex-shrink:0;
2661
- width:var(--tds-toggle-switch-track-width);
2662
- height:var(--tds-toggle-switch-track-height);
2663
- background-color:var(--tds-toggle-switch-track-background-color);
2664
- border-radius:var(--t-border-radius-round);
2665
- transition:var(--tds-toggle-switch-track-transition);
2666
- }
2667
-
2668
- .tds-toggle-switch-track::before{
2669
- position:absolute;
2670
- top:var(--t-spacing-fourth);
2671
- left:var(--t-spacing-fourth);
2672
- width:var(--tds-toggle-switch-thumb-size);
2673
- height:var(--tds-toggle-switch-thumb-size);
2674
- content:"";
2675
- background-color:#fff;
2676
- border-radius:var(--t-border-radius-round);
2677
- transform:var(--tds-toggle-switch-thumb-transform);
2678
- transition:var(--tds-toggle-switch-thumb-transition);
2679
- }
2680
-
2681
- @media (prefers-reduced-motion: reduce){
2682
-
2683
- .tds-toggle-switch-track{
2684
- --tds-toggle-switch-track-transition:none;
2685
- --tds-toggle-switch-thumb-transition:none;
2686
- }
2687
- }
2688
-
2689
- .tds-toggle-switch-description{
2690
- display:flex;
2691
- grid-area:2 / 2;
2692
- align-items:flex-start;
2693
- margin:0;
2694
- font-size:var(--tds-toggle-switch-description-font-size);
2695
- line-height:var(--tds-toggle-switch-description-line-height);
2696
- color:var(--tds-toggle-switch-description-color);
2697
- cursor:text;
2698
- }
2699
-
2700
- .tds-toggle-switch--sm{
2701
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2702
- --tds-toggle-switch-line-height:1.35;
2703
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2704
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2705
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2706
- --tds-toggle-switch-description-line-height:1.3;
2707
- }
2708
-
2709
- .tds-toggle-switch--hide-label{
2710
- --tds-toggle-switch-display:inline-flex;
2711
- }
2712
-
2713
2713
  .tds-loading-spinner{
2714
2714
  --tds-loading-spinner-size:1.25em;
2715
2715