@planningcenter/tapestry 3.2.2-rc.13 → 3.2.2-rc.14

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 +1482 -1482
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1482 -1482
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -456,822 +456,663 @@
456
456
  }
457
457
 
458
458
 
459
- :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{
460
- -webkit-appearance:none;
461
- appearance:none;
462
- }
463
-
464
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
465
- inline-size:1em;
466
- block-size:2em;
467
- }
459
+ @media (prefers-reduced-motion: no-preference){
468
460
 
469
- @supports (field-sizing: content){
470
- .tds-input--auto-width{
471
- inline-size:-moz-fit-content;
472
- inline-size:fit-content;
473
- min-inline-size:min(100%, 122px);
461
+ :root{
462
+ interpolate-size:allow-keywords;
463
+ }
474
464
  }
475
465
 
476
- .tds-input--auto-width input{
477
- field-sizing:content;
478
- inline-size:auto;
479
- }
480
- }
466
+ @layer tds-component{
467
+ tds-sidenav,
468
+ .tds-sidenav{
469
+ --tds-sidenav-indent:12px;
470
+ --tds-sidenav-item-depth:0;
481
471
 
482
- .tds-radio-group{
483
- --tds-radio-group-font-size:var(--t-font-size-md);
484
- --tds-radio-group-line-height:1.4;
485
- --tds-radio-group-gap:var(--t-spacing-1);
472
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
486
473
 
487
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
474
+ --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;
475
+ --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;
476
+ --tds-sidenav-collapse-closed-opacity:0;
477
+ --tds-sidenav-collapse-open-opacity:1;
478
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
479
+ --tds-sidenav-collapse-open-transform:translateY(0);
488
480
 
489
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
490
- --tds-radio-group-description-line-height:1.35;
491
- --tds-radio-group-description-color:var(--t-text-color-secondary);
492
- --tds-radio-group-description-invalid-icon-display:none;
493
- display:flex;
494
- flex-direction:column;
495
- gap:var(--tds-radio-group-gap);
496
- padding:0;
497
- margin:0;
481
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
482
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
483
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
484
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
498
485
 
499
- font-size:var(--tds-radio-group-font-size);
500
- line-height:var(--tds-radio-group-line-height);
501
- border:0;
502
- }
486
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
487
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
488
+ --tds-sidenav-item-nested-background-selected:transparent;
503
489
 
504
- .tds-radio-group legend{
505
- padding:0;
506
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
507
- }
490
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
491
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
492
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
508
493
 
509
- .tds-radio-group:has(.tds-radio-group-description){
510
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
494
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
495
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
511
496
  }
512
497
 
513
- .tds-radio-group[aria-invalid="true"]{
514
- --tds-radio-group-description-color:var(--t-text-color-status-error);
515
- --tds-radio-group-description-invalid-icon-display:inline-block;
498
+ @media (prefers-reduced-motion: reduce){
499
+ tds-sidenav,
500
+ .tds-sidenav{
501
+ --tds-sidenav-collapse-transition-enter:none;
502
+ --tds-sidenav-collapse-transition-exit:none;
503
+ --tds-sidenav-collapse-closed-transform:none;
504
+ --tds-sidenav-collapse-open-transform:none;
516
505
  }
517
-
518
- .tds-radio-group[aria-invalid="true"] .tds-radio{
519
- --tds-radio-input-border-color:var(--t-form-border-color-error);
520
506
  }
521
507
 
522
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
523
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
524
- --tds-radio-input-background-color:var(--t-form-background-color-error);
525
- }
508
+ .tds-sidenav--theme-gray{
509
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
510
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
511
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
512
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
513
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
514
+ }
515
+ }
526
516
 
527
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
528
- --tds-radio-input-background-color:var(--t-form-background-color);
529
- }
517
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
518
+ display:flex;
519
+ }
530
520
 
531
- .tds-radio-group:has(input:required) legend::after{
532
- margin-left:.25ch;
533
- color:var(--t-text-color-status-error);
534
- content:"*";
535
- }
521
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
522
+ flex-direction:column;
523
+ gap:var(--t-spacing-half);
524
+ width:100%;
525
+ }
536
526
 
537
- .tds-radio-group-fields{
538
- display:flex;
539
- flex-direction:column;
540
- gap:var(--tds-radio-group-gap);
541
- align-items:flex-start;
527
+ .tds-sidenav-section-list{
528
+ width:100%;
529
+ padding:0;
530
+ margin:0;
531
+ list-style:none;
542
532
  }
543
533
 
544
- .tds-radio-group-description{
534
+ .tds-sidenav-section-header{
545
535
  display:flex;
546
- gap:var(--t-spacing-half);
547
- align-items:flex-start;
548
- margin:0;
549
- font-size:var(--tds-radio-group-description-font-size);
550
- line-height:var(--tds-radio-group-description-line-height);
551
- color:var(--tds-radio-group-description-color);
552
- cursor:text;
536
+ align-items:baseline;
537
+ justify-content:space-between;
538
+ padding-top:var(--t-spacing-2);
553
539
  }
554
540
 
555
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
556
- display:var(--tds-radio-group-description-invalid-icon-display);
557
- flex-shrink:0;
558
- margin-top:calc(.5lh - .5em);
559
- line-height:var(--tds-radio-group-description-line-height);
541
+ .tds-sidenav-section-header h2{
542
+ margin:0;
543
+ font-size:var(--t-font-size-sm);
544
+ font-weight:var(--t-font-weight-semibold);
545
+ line-height:1.35;
546
+ color:var(--t-text-color-secondary);
547
+ text-transform:uppercase;
560
548
  }
561
549
 
562
- .tds-radio-group--sm{
563
- --tds-radio-group-line-height:1.35;
564
- --tds-radio-group-font-size:var(--t-font-size-sm);
565
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
566
- --tds-radio-group-description-line-height:1.3;
567
- }
568
-
569
- .tds-radio{
570
- --tds-radio-font-size:var(--t-font-size-md);
571
- --tds-radio-cursor:pointer;
572
- --tds-radio-line-height:1.4;
573
- --tds-radio-transition-property:border-width;
574
-
575
- --tds-radio-input-size:var(--t-element-size-md);
576
- --tds-radio-input-border-radius:var(--t-border-radius-round);
577
- --tds-radio-input-border-color:var(--t-form-border-color);
578
- --tds-radio-input-border-width:var(--t-form-border-width);
579
- --tds-radio-input-background-color:transparent;
580
-
581
- --tds-radio-label-color:var(--t-form-color);
550
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
551
+ padding-top:0;
552
+ }
582
553
 
583
- --tds-radio-description-font-size:var(--t-font-size-sm);
584
- --tds-radio-description-line-height:1.35;
585
- --tds-radio-description-color:var(--t-text-color-secondary);
554
+ .tds-sidenav-section-header [slot="label-actions"]{
555
+ display:flex;
556
+ gap:var(--t-spacing-half);
557
+ align-items:center;
558
+ }
586
559
 
587
- position:relative;
588
- display:inline-grid;
589
- grid-template-columns:auto;
590
- grid-auto-columns:1fr;
591
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
592
- line-height:var(--tds-radio-line-height);
593
- cursor:var(--tds-radio-cursor);
594
- -webkit-user-select:none;
595
- -moz-user-select:none;
596
- user-select:none;
560
+ .tds-sidenav-section [slot="section-actions"]{
561
+ display:flex;
562
+ gap:12px;
563
+ align-items:center;
564
+ min-height:42px;
565
+ padding:var(--t-spacing-1) 0;
597
566
  }
598
567
 
599
- .tds-radio label{
600
- grid-area:1 / 2;
601
- font-size:var(--tds-radio-font-size);
602
- font-weight:var(--t-font-weight-normal);
603
- color:var(--tds-radio-label-color);
604
- cursor:var(--tds-radio-cursor);
605
- }
568
+ .tds-sidenav-section-list,
569
+ .tds-sidenav-item{
570
+ width:100%;
571
+ padding:0;
572
+ margin:0;
573
+ }
606
574
 
607
- .tds-radio input[type="radio"]{
575
+ .tds-sidenav-item :is(a,button){
608
576
  position:relative;
609
- width:1em;
610
- height:1em;
611
- margin:calc((1lh - 1em) / 2) 0 0;
612
- font-size:var(--tds-radio-font-size);
613
- line-height:inherit;
577
+ display:flex;
578
+ gap:12px;
579
+ align-items:center;
580
+ width:100%;
581
+ padding:12px;
582
+ overflow:hidden;
583
+ font-size:var(--t-font-size-sm);
584
+ line-height:18px;
585
+ color:var(--t-text-color-headline);
586
+ white-space:nowrap;
587
+ text-decoration:none;
614
588
  -webkit-appearance:none;
615
589
  -moz-appearance:none;
616
590
  appearance:none;
617
- cursor:var(--tds-radio-cursor);
618
- background-color:var(--tds-radio-input-background-color);
619
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
620
- border-radius:var(--tds-radio-input-border-radius);
621
- transition-timing-function:var(--t-ease-in-out);
622
- transition-duration:var(--t-duration-200);
623
- transition-property:var(--tds-radio-transition-property);
591
+ cursor:pointer;
592
+ background-color:var(--tds-sidenav-item-background, transparent);
593
+ border:0;
594
+ border-radius:var(--t-border-radius);
595
+ transition:var(--tds-sidenav-item-transition);
624
596
  }
625
597
 
626
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
627
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
628
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
598
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
599
+ display:block;
600
+ flex:1;
601
+ overflow:hidden;
602
+ text-overflow:ellipsis;
603
+ text-align:left;
604
+ white-space:nowrap;
629
605
  }
630
606
 
631
- :is(.tds-radio input[type="radio"]):focus-visible{
632
- outline:var(--t-focus-ring-outline);
633
- outline-offset:var(--t-focus-ring-offset);
607
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
608
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
609
+ color:var(--t-text-color-headline);
610
+ text-decoration:none;
634
611
  }
635
612
 
636
- :is(.tds-radio input[type="radio"]):disabled{
637
- pointer-events:none;
638
- }
639
-
640
- @media (prefers-reduced-motion: reduce){
613
+ :is(.tds-sidenav-item :is(a,button)):active{
614
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
615
+ }
641
616
 
642
- .tds-radio input[type="radio"]{
643
- --tds-radio-transition-property:none;
644
- }
617
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
618
+ overflow:hidden;
619
+ color:var(--tds-sidenav-item-icon-color);
645
620
  }
646
621
 
647
- .tds-radio:has(input:checked){
648
- --tds-radio-input-background-color:var(--t-form-background-color);
649
- --tds-radio-input-border-color:var(--t-border-color-control-info);
650
- --tds-radio-input-border-width:4px;
651
- }
622
+ :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{
623
+ display:block;
624
+ width:var(--tds-sidenav-item-icon-size);
625
+ height:var(--tds-sidenav-item-icon-size);
626
+ }
652
627
 
653
- .tds-radio:has(input:checked) input:hover:not(:disabled){
654
- --tds-radio-input-background-color:var(--t-form-background-color);
655
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
628
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
629
+ --tds-sidenav-indent:19px;
656
630
  }
657
631
 
658
- .tds-radio:has(input:user-invalid){
659
- --tds-radio-input-border-color:var(--t-form-border-color-error);
660
- }
661
-
662
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
663
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
664
- --tds-radio-input-background-color:var(--t-form-background-color-error);
632
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
633
+ visibility:visible;
634
+ block-size:auto;
635
+ opacity:1;
665
636
  }
666
637
 
667
- .tds-radio:has(input:disabled){
668
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
669
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
638
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
639
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
640
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
670
641
 
671
- --tds-radio-label-color:var(--t-form-color-disabled);
672
- --tds-radio-description-color:var(--t-form-color-disabled);
673
- --tds-radio-cursor:not-allowed;
642
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
643
+ font-weight:var(--t-font-weight-semibold);
674
644
  }
675
645
 
676
- .tds-radio:has(input:disabled) input:checked{
677
- --tds-radio-input-background-color:var(--t-form-background-color);
678
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
646
+ .tds-sidenav-item:has(.tds-sidenav-section){
647
+ display:flex;
648
+ flex-direction:column;
649
+ gap:var(--t-spacing-half);
650
+ }
651
+
652
+ .tds-sidenav-item .tds-sidenav-section-list{
653
+ --tds-sidenav-item-depth:1;
654
+ gap:0;
655
+ }
656
+
657
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
658
+ visibility:hidden;
659
+ block-size:0;
660
+ overflow-y:clip;
661
+ opacity:0;
662
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
679
663
  }
680
664
 
681
- .tds-radio-description{
682
- display:flex;
683
- grid-area:2 / 2;
684
- gap:var(--t-spacing-half);
685
- align-items:flex-start;
686
- margin:0;
687
- font-size:var(--tds-radio-description-font-size);
688
- line-height:var(--tds-radio-description-line-height);
689
- color:var(--tds-radio-description-color);
690
- cursor:text;
691
- }
665
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
666
+ --tds-sidenav-item-depth:2;
667
+ }
692
668
 
693
- .tds-radio--sm{
694
- --tds-radio-line-height:1.35;
695
- --tds-radio-input-size:var(--t-element-size-sm);
696
- --tds-radio-font-size:var(--t-font-size-sm);
697
- --tds-radio-description-font-size:var(--t-font-size-xs);
698
- --tds-radio-description-line-height:1.3;
699
- }
669
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
670
+ min-height:var(--t-element-size-2xl);
671
+ padding-block:9px;
672
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
673
+ line-height:1;
674
+ background-color:transparent;
675
+ }
700
676
 
701
- .tds-toggle-switch{
702
- --tds-toggle-switch-font-size:var(--t-font-size-md);
703
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
704
- --tds-toggle-switch-cursor:pointer;
705
- --tds-toggle-switch-display:inline-grid;
706
- --tds-toggle-switch-line-height:1.4;
677
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
678
+ position:absolute;
679
+ top:0;
680
+ bottom:0;
681
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
682
+ width:2px;
683
+ content:"";
684
+ background-color:var(--tds-sidenav-item-nested-border-color);
685
+ transition:var(--tds-sidenav-item-transition);
686
+ }
707
687
 
708
- --tds-toggle-switch-label-color:var(--t-form-color);
688
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
689
+ position:absolute;
690
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
691
+ z-index:-1;
692
+ height:100%;
693
+ content:"";
694
+ background-color:var(--tds-sidenav-item-nested-background);
695
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
696
+ transition:var(--tds-sidenav-item-transition);
697
+ }
709
698
 
710
- --tds-toggle-switch-track-width:var(--t-container-size-md);
711
- --tds-toggle-switch-track-outline:none;
712
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
713
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
714
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
699
+ :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)){
700
+ display:block;
701
+ text-align:left;
702
+ white-space:normal;
703
+ }
715
704
 
716
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
717
- --tds-toggle-switch-thumb-transform:translateX(0);
718
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
705
+ :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{
706
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
707
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
708
+ }
719
709
 
720
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
721
- --tds-toggle-switch-description-line-height:1.35;
722
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
723
- position:relative;
710
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
711
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
712
+ }
724
713
 
725
- display:var(--tds-toggle-switch-display);
726
- grid-template-columns:auto;
727
- grid-auto-columns:1fr;
728
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
729
- -webkit-user-select:none;
730
- -moz-user-select:none;
731
- user-select:none;
714
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
715
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
716
+ font-weight:var(--t-font-weight-medium);
717
+ }
718
+
719
+ .tds-sidenav-responsive-header{
720
+ display:flex;
721
+ gap:var(--t-spacing-2);
722
+ align-items:center;
723
+ width:100%;
732
724
  }
733
725
 
734
- .tds-toggle-switch input[type="checkbox"]{
735
- position:absolute;
736
- width:var(--tds-toggle-switch-track-width);
737
- height:var(--tds-toggle-switch-track-height);
738
- margin:0;
739
- -webkit-appearance:none;
740
- -moz-appearance:none;
741
- appearance:none;
742
- cursor:var(--tds-toggle-switch-cursor);
743
- outline:var(--tds-toggle-switch-track-outline);
744
- outline-offset:var(--t-focus-ring-offset);
745
- background-color:transparent;
746
- border:0;
747
- border-radius:var(--t-border-radius-round);
726
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
727
+ order:0;
748
728
  }
749
729
 
750
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
751
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
752
- }
730
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
731
+ flex:1;
732
+ order:1;
733
+ margin:0;
734
+ font-size:var(--t-font-size-lg);
735
+ font-weight:var(--t-font-weight-medium);
736
+ color:var(--t-text-color-headline);
737
+ }
753
738
 
754
- .tds-toggle-switch label{
755
- display:inline-flex;
756
- grid-area:1 / 2;
757
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
758
- column-gap:var(--tds-toggle-switch-column-gap);
759
- margin-top:-.09375em;
760
- font-size:var(--tds-toggle-switch-font-size);
761
- font-weight:var(--t-font-weight-normal);
762
- line-height:var(--tds-toggle-switch-line-height);
763
- color:var(--tds-toggle-switch-label-color);
764
- cursor:var(--tds-toggle-switch-cursor);
739
+ @media (max-width: 719px){
740
+ .tds-sidenav-collapse{
741
+ z-index:10001;
742
+ display:none;
743
+ max-width:min(448px, calc(100vw - 48px));
744
+ padding:0;
745
+ margin:12px 0;
746
+ position-area:bottom span-right;
747
+ overflow:hidden;
748
+ outline:0;
749
+ background:var(--t-surface-color-card);
750
+ border:0;
751
+ border-radius:6px;
752
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
753
+ opacity:var(--tds-sidenav-collapse-open-opacity);
754
+ transform:var(--tds-sidenav-collapse-open-transform);
755
+ transition:var(--tds-sidenav-collapse-transition-enter);
756
+ will-change:transform;
765
757
  }
766
758
 
767
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
768
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
759
+ .tds-sidenav-scroll-container{
760
+ --webkit-overflow-scrolling:touch;
761
+ display:block;
762
+ width:100%;
763
+ height:-moz-fit-content;
764
+ height:fit-content;
765
+ padding:var(--t-spacing-2);
766
+ overflow-y:auto;
769
767
  }
770
768
 
771
- .tds-toggle-switch:has(input:checked){
772
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
773
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
769
+ .tds-sidenav-item :is(a, button) :is(.prefix){
770
+ display:none;
774
771
  }
772
+ @supports selector(:popover-open){
773
+ .tds-sidenav-collapse:popover-open{
774
+ display:flex;
775
+ }
775
776
 
776
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
777
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
777
+ .tds-sidenav-collapse:not(:popover-open){
778
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
779
+ transition:var(--tds-sidenav-collapse-transition-exit);
778
780
  }
779
781
 
780
- .tds-toggle-switch:has(input:disabled){
781
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
782
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
783
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
784
- --tds-toggle-switch-cursor:not-allowed;
782
+ @starting-style{
783
+ .tds-sidenav-collapse:popover-open{
784
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
785
+ transform:var(--tds-sidenav-collapse-closed-transform);
786
+ }
787
+ }
785
788
  }
789
+ @supports not selector(:popover-open){
790
+ .tds-sidenav-collapse.\:popover-open{
791
+ display:flex;
792
+ }
786
793
 
787
- .tds-toggle-switch-track{
788
- position:relative;
789
- flex-shrink:0;
790
- width:var(--tds-toggle-switch-track-width);
791
- height:var(--tds-toggle-switch-track-height);
792
- background-color:var(--tds-toggle-switch-track-background-color);
793
- border-radius:var(--t-border-radius-round);
794
- transition:var(--tds-toggle-switch-track-transition);
795
- }
796
-
797
- .tds-toggle-switch-track::before{
798
- position:absolute;
799
- top:var(--t-spacing-fourth);
800
- left:var(--t-spacing-fourth);
801
- width:var(--tds-toggle-switch-thumb-size);
802
- height:var(--tds-toggle-switch-thumb-size);
803
- content:"";
804
- background-color:#fff;
805
- border-radius:var(--t-border-radius-round);
806
- transform:var(--tds-toggle-switch-thumb-transform);
807
- transition:var(--tds-toggle-switch-thumb-transition);
794
+ .tds-sidenav-collapse:not(.\:popover-open){
795
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
796
+ transition:var(--tds-sidenav-collapse-transition-exit);
797
+ }
808
798
  }
809
-
810
- @media (prefers-reduced-motion: reduce){
811
-
812
- .tds-toggle-switch-track{
813
- --tds-toggle-switch-track-transition:none;
814
- --tds-toggle-switch-thumb-transition:none;
815
799
  }
816
- }
817
800
 
818
- .tds-toggle-switch-description{
819
- display:flex;
820
- grid-area:2 / 2;
821
- align-items:flex-start;
822
- margin:0;
823
- font-size:var(--tds-toggle-switch-description-font-size);
824
- line-height:var(--tds-toggle-switch-description-line-height);
825
- color:var(--tds-toggle-switch-description-color);
826
- cursor:text;
801
+ @media (min-width: 720px){
802
+ .tds-sidenav-responsive-header{
803
+ display:none;
804
+ }
827
805
  }
828
806
 
829
- .tds-toggle-switch--sm{
830
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
831
- --tds-toggle-switch-line-height:1.35;
832
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
833
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
834
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
835
- --tds-toggle-switch-description-line-height:1.3;
836
- }
807
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
808
+ display:none;
809
+ }
837
810
 
838
- .tds-toggle-switch--hide-label{
839
- --tds-toggle-switch-display:inline-flex;
840
- }
811
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
812
+ display:block;
813
+ }
841
814
 
842
- .tds-select{
843
- --tds-select-border-color:var(--t-form-border-color);
844
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
845
- --tds-select-border-color-active:var(--t-form-border-color-hover);
846
- --tds-select-background-color:var(--t-form-background-color);
847
- --tds-select-color:var(--t-form-color);
848
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
849
- --tds-select-font-size:var(--t-font-size-md);
850
- --tds-select-min-height:var(--t-container-size-md);
851
- --tds-select-padding-block:6px;
852
- --tds-select-description-color:var(--t-text-color-secondary);
853
- --tds-select-description-invalid-icon-display:none;
854
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
855
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
856
- --tds-select-caret-size:1em;
857
- --tds-select-caret-inline-offset:.75em;
858
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
815
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
816
+ display:flex;
817
+ flex-direction:column;
818
+ }
859
819
 
860
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
861
- --tds-select-dropdown-border:1px solid var(--t-border-color);
862
- --tds-select-dropdown-padding:var(--t-spacing-1);
863
- --tds-select-dropdown-margin-block:5px;
864
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
865
- --tds-select-dropdown-scrollbar-width:thin;
866
- --tds-select-dropdown-border-radius:var(--t-border-radius);
867
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
868
- --tds-select-dropdown-scroll-behavior:smooth;
869
- --tds-select-dropdown-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;
870
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
871
- --tds-select-dropdown-closed-opacity:0;
872
- --tds-select-dropdown-open-opacity:1;
873
- --tds-select-dropdown-closed-transform:translateY(-8px);
874
- --tds-select-dropdown-open-transform:translateY(0);
820
+ .tds-radio{
821
+ --tds-radio-font-size:var(--t-font-size-md);
822
+ --tds-radio-cursor:pointer;
823
+ --tds-radio-line-height:1.4;
824
+ --tds-radio-transition-property:border-width;
875
825
 
876
- --tds-select-option-gap:var(--t-spacing-1);
877
- --tds-select-option-padding-block:var(--t-spacing-1);
878
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
879
- --tds-select-option-font-size:1rem;
880
- --tds-select-option-color:var(--t-text-color);
881
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
882
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
883
- --tds-select-option-border-radius:var(--t-border-radius);
826
+ --tds-radio-input-size:var(--t-element-size-md);
827
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
828
+ --tds-radio-input-border-color:var(--t-form-border-color);
829
+ --tds-radio-input-border-width:var(--t-form-border-width);
830
+ --tds-radio-input-background-color:transparent;
884
831
 
885
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
886
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
887
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
888
- --tds-select-group-label-font-size:var(--t-font-size-sm);
889
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
890
- --tds-select-group-label-letter-spacing:0;
891
- --tds-select-group-label-color:var(--t-text-color-secondary);
892
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
893
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
894
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
832
+ --tds-radio-label-color:var(--t-form-color);
833
+
834
+ --tds-radio-description-font-size:var(--t-font-size-sm);
835
+ --tds-radio-description-line-height:1.35;
836
+ --tds-radio-description-color:var(--t-text-color-secondary);
895
837
 
896
838
  position:relative;
897
- display:flex;
898
- flex-direction:column;
899
- gap:var(--t-spacing-half);
839
+ display:inline-grid;
840
+ grid-template-columns:auto;
841
+ grid-auto-columns:1fr;
842
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
843
+ line-height:var(--tds-radio-line-height);
844
+ cursor:var(--tds-radio-cursor);
845
+ -webkit-user-select:none;
846
+ -moz-user-select:none;
847
+ user-select:none;
900
848
  }
901
849
 
902
- .tds-select :is(label,.tds-select-label){
903
- font-size:var(--t-font-size-md);
850
+ .tds-radio label{
851
+ grid-area:1 / 2;
852
+ font-size:var(--tds-radio-font-size);
904
853
  font-weight:var(--t-font-weight-normal);
905
- color:var(--t-text-color);
906
- cursor:default;
854
+ color:var(--tds-radio-label-color);
855
+ cursor:var(--tds-radio-cursor);
907
856
  }
908
857
 
909
- .tds-select :is(select,button){
858
+ .tds-radio input[type="radio"]{
910
859
  position:relative;
911
- place-items:center;
912
- inline-size:100%;
913
- min-block-size:var(--tds-select-min-height);
914
- padding-block:var(--tds-select-padding-block);
915
- padding-inline:var(--t-spacing-1);
916
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
917
- font-family:inherit;
918
- font-size:var(--tds-select-font-size);
919
- line-height:1;
920
- color:var(--tds-select-color);
921
- text-align:left;
860
+ width:1em;
861
+ height:1em;
862
+ margin:calc((1lh - 1em) / 2) 0 0;
863
+ font-size:var(--tds-radio-font-size);
864
+ line-height:inherit;
922
865
  -webkit-appearance:none;
923
866
  -moz-appearance:none;
924
867
  appearance:none;
925
- cursor:var(--tds-select-cursor, default);
926
- outline:var(--t-focus-ring-width) solid transparent;
927
- outline-offset:0;
928
- background-color:var(--tds-select-background-color);
929
- background-image:var(--tds-select-background-image);
930
- background-repeat:no-repeat;
931
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
932
- background-size:var(--tds-select-caret-size);
933
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
934
- border-radius:var(--t-form-border-radius);
868
+ cursor:var(--tds-radio-cursor);
869
+ background-color:var(--tds-radio-input-background-color);
870
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
871
+ border-radius:var(--tds-radio-input-border-radius);
935
872
  transition-timing-function:var(--t-ease-in-out);
936
- transition-duration:var(--t-duration-300);
937
- transition-property:var(--tds-select-transition-property);
873
+ transition-duration:var(--t-duration-200);
874
+ transition-property:var(--tds-radio-transition-property);
938
875
  }
939
876
 
940
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
941
- border-color:var(--tds-select-border-color-hover);
877
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
878
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
879
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
942
880
  }
943
881
 
944
- :is(.tds-select :is(select,button)):focus{
945
- outline-color:var(--t-focus-ring-color);
882
+ :is(.tds-radio input[type="radio"]):focus-visible{
883
+ outline:var(--t-focus-ring-outline);
946
884
  outline-offset:var(--t-focus-ring-offset);
947
- border-color:var(--tds-select-border-color-active);
948
885
  }
949
886
 
950
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
951
- color:var(--tds-select-placeholder-color);
887
+ :is(.tds-radio input[type="radio"]):disabled{
888
+ pointer-events:none;
952
889
  }
953
890
 
954
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
955
- --tds-select-border-color:var(--t-form-border-color-error);
956
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
957
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
958
- --tds-select-background-color:var(--t-form-background-color-error);
959
- --tds-select-description-color:var(--t-text-color-status-error);
960
- --tds-select-description-invalid-icon-display:inline-block;
961
- }
891
+ @media (prefers-reduced-motion: reduce){
962
892
 
963
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
964
- margin-left:.25ch;
965
- color:var(--t-text-color-status-error);
966
- content:"*";
893
+ .tds-radio input[type="radio"]{
894
+ --tds-radio-transition-property:none;
895
+ }
967
896
  }
968
897
 
969
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
970
- --tds-select-border-color:var(--t-form-border-color-disabled);
971
- --tds-select-background-color:var(--t-form-background-color-disabled);
972
- --tds-select-color:var(--t-form-color-disabled);
973
- --tds-select-cursor:not-allowed;
898
+ .tds-radio:has(input:checked){
899
+ --tds-radio-input-background-color:var(--t-form-background-color);
900
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
901
+ --tds-radio-input-border-width:4px;
974
902
  }
975
903
 
976
- .tds-select:has( > [popover]:popover-open) > button{
977
- border-color:var(--tds-select-border-color-active);
904
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
905
+ --tds-radio-input-background-color:var(--t-form-background-color);
906
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
907
+ }
908
+
909
+ .tds-radio:has(input:user-invalid){
910
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
978
911
  }
979
912
 
980
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
981
- transform:rotate(.5turn);
913
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
914
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
915
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
982
916
  }
983
917
 
984
- .tds-select :is(hr,li[role="separator"]){
985
- margin-block:var(--t-spacing-half);
986
- color:var(--tds-select-border-color);
987
- border:0;
988
- border-top:1px solid;
918
+ .tds-radio:has(input:disabled){
919
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
920
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
921
+
922
+ --tds-radio-label-color:var(--t-form-color-disabled);
923
+ --tds-radio-description-color:var(--t-form-color-disabled);
924
+ --tds-radio-cursor:not-allowed;
989
925
  }
990
926
 
991
- .tds-select :is(li[role="option"],option:not([hidden])){
992
- display:block;
993
- padding-block:var(--tds-select-option-padding-block);
994
- padding-inline:var(--tds-select-option-padding-inline);
995
- overflow:hidden;
996
- text-overflow:ellipsis;
997
- font-size:var(--tds-select-option-font-size);
998
- color:var(--tds-select-option-color);
999
- white-space:nowrap;
1000
- cursor:default;
1001
- border-radius:var(--tds-select-option-border-radius);
1002
- }
1003
-
1004
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1005
- outline:none;
927
+ .tds-radio:has(input:disabled) input:checked{
928
+ --tds-radio-input-background-color:var(--t-form-background-color);
929
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1006
930
  }
1007
931
 
1008
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1009
- background:var(--tds-select-option-background-hover);
1010
- }
932
+ .tds-radio-description{
933
+ display:flex;
934
+ grid-area:2 / 2;
935
+ gap:var(--t-spacing-half);
936
+ align-items:flex-start;
937
+ margin:0;
938
+ font-size:var(--tds-radio-description-font-size);
939
+ line-height:var(--tds-radio-description-line-height);
940
+ color:var(--tds-radio-description-color);
941
+ cursor:text;
942
+ }
1011
943
 
1012
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1013
- background:var(--tds-select-option-background-active);
944
+ .tds-radio--sm{
945
+ --tds-radio-line-height:1.35;
946
+ --tds-radio-input-size:var(--t-element-size-sm);
947
+ --tds-radio-font-size:var(--t-font-size-sm);
948
+ --tds-radio-description-font-size:var(--t-font-size-xs);
949
+ --tds-radio-description-line-height:1.3;
950
+ }
951
+
952
+
953
+ :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{
954
+ -webkit-appearance:none;
955
+ appearance:none;
1014
956
  }
1015
957
 
1016
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1017
- color:var(--t-form-color-disabled);
1018
- cursor:not-allowed;
958
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
959
+ inline-size:1em;
960
+ block-size:2em;
1019
961
  }
1020
962
 
1021
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1022
- background:transparent;
1023
- }
963
+ @supports (field-sizing: content){
964
+ .tds-input--auto-width{
965
+ inline-size:-moz-fit-content;
966
+ inline-size:fit-content;
967
+ min-inline-size:min(100%, 122px);
968
+ }
1024
969
 
1025
- .tds-select :is(li[role="presentation"],legend){
1026
- position:sticky;
1027
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1028
- z-index:1;
1029
- float:inline-start;
1030
- inline-size:100%;
1031
- padding-block:var(--tds-select-group-label-padding-block);
1032
- padding-inline:var(--tds-select-group-label-padding-inline);
1033
- container-type:scroll-state;
1034
- font-size:var(--tds-select-group-label-font-size);
1035
- font-weight:var(--tds-select-group-label-font-weight);
1036
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1037
- background:var(--tds-select-group-label-background);
1038
- text-box:trim-both cap alphabetic;
970
+ .tds-input--auto-width input{
971
+ field-sizing:content;
972
+ inline-size:auto;
1039
973
  }
974
+ }
1040
975
 
1041
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1042
- display:inline-flex;
1043
- gap:var(--t-spacing-half);
1044
- align-items:center;
1045
- color:var(--tds-select-group-label-color);
1046
- transition:var(--tds-select-group-label-transition);
1047
- }
976
+ .tds-toggle-switch{
977
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
978
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
979
+ --tds-toggle-switch-cursor:pointer;
980
+ --tds-toggle-switch-display:inline-grid;
981
+ --tds-toggle-switch-line-height:1.4;
1048
982
 
1049
- @container scroll-state(stuck){
983
+ --tds-toggle-switch-label-color:var(--t-form-color);
1050
984
 
1051
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1052
- color:var(--tds-select-group-label-color-stuck);
985
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
986
+ --tds-toggle-switch-track-outline:none;
987
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
988
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
989
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
990
+
991
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
992
+ --tds-toggle-switch-thumb-transform:translateX(0);
993
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
994
+
995
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
996
+ --tds-toggle-switch-description-line-height:1.35;
997
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
998
+ position:relative;
999
+
1000
+ display:var(--tds-toggle-switch-display);
1001
+ grid-template-columns:auto;
1002
+ grid-auto-columns:1fr;
1003
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1004
+ -webkit-user-select:none;
1005
+ -moz-user-select:none;
1006
+ user-select:none;
1007
+ }
1008
+
1009
+ .tds-toggle-switch input[type="checkbox"]{
1010
+ position:absolute;
1011
+ width:var(--tds-toggle-switch-track-width);
1012
+ height:var(--tds-toggle-switch-track-height);
1013
+ margin:0;
1014
+ -webkit-appearance:none;
1015
+ -moz-appearance:none;
1016
+ appearance:none;
1017
+ cursor:var(--tds-toggle-switch-cursor);
1018
+ outline:var(--tds-toggle-switch-track-outline);
1019
+ outline-offset:var(--t-focus-ring-offset);
1020
+ background-color:transparent;
1021
+ border:0;
1022
+ border-radius:var(--t-border-radius-round);
1023
+ }
1024
+
1025
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1026
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1053
1027
  }
1054
1028
 
1055
- @media (forced-colors: active){
1029
+ .tds-toggle-switch label{
1030
+ display:inline-flex;
1031
+ grid-area:1 / 2;
1032
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1033
+ column-gap:var(--tds-toggle-switch-column-gap);
1034
+ margin-top:-.09375em;
1035
+ font-size:var(--tds-toggle-switch-font-size);
1036
+ font-weight:var(--t-font-weight-normal);
1037
+ line-height:var(--tds-toggle-switch-line-height);
1038
+ color:var(--tds-toggle-switch-label-color);
1039
+ cursor:var(--tds-toggle-switch-cursor);
1040
+ }
1056
1041
 
1057
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1058
- color:var(--tds-select-group-label-color-stuck);
1042
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1043
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1044
+ }
1045
+
1046
+ .tds-toggle-switch:has(input:checked){
1047
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1048
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1049
+ }
1050
+
1051
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1052
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1059
1053
  }
1060
- }
1061
- }
1062
1054
 
1063
- .tds-select.tds-select--lg{
1064
- --tds-select-min-height:var(--t-container-size-lg);
1065
- --tds-select-font-size:var(--t-font-size-lg);
1055
+ .tds-toggle-switch:has(input:disabled){
1056
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1057
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1058
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1059
+ --tds-toggle-switch-cursor:not-allowed;
1060
+ }
1061
+
1062
+ .tds-toggle-switch-track{
1063
+ position:relative;
1064
+ flex-shrink:0;
1065
+ width:var(--tds-toggle-switch-track-width);
1066
+ height:var(--tds-toggle-switch-track-height);
1067
+ background-color:var(--tds-toggle-switch-track-background-color);
1068
+ border-radius:var(--t-border-radius-round);
1069
+ transition:var(--tds-toggle-switch-track-transition);
1070
+ }
1071
+
1072
+ .tds-toggle-switch-track::before{
1073
+ position:absolute;
1074
+ top:var(--t-spacing-fourth);
1075
+ left:var(--t-spacing-fourth);
1076
+ width:var(--tds-toggle-switch-thumb-size);
1077
+ height:var(--tds-toggle-switch-thumb-size);
1078
+ content:"";
1079
+ background-color:#fff;
1080
+ border-radius:var(--t-border-radius-round);
1081
+ transform:var(--tds-toggle-switch-thumb-transform);
1082
+ transition:var(--tds-toggle-switch-thumb-transition);
1066
1083
  }
1067
1084
 
1068
1085
  @media (prefers-reduced-motion: reduce){
1069
1086
 
1070
- .tds-select{
1071
- --tds-select-transition-property:none;
1072
- --tds-select-dropdown-transition-enter:none;
1073
- --tds-select-dropdown-transition-exit:none;
1074
- --tds-select-dropdown-scroll-behavior:auto;
1075
- --tds-select-dropdown-closed-transform:none;
1076
- --tds-select-dropdown-open-transform:none;
1077
- --tds-select-caret-transition:none;
1087
+ .tds-toggle-switch-track{
1088
+ --tds-toggle-switch-track-transition:none;
1089
+ --tds-toggle-switch-thumb-transition:none;
1078
1090
  }
1079
1091
  }
1080
1092
 
1081
- .tds-select-description{
1093
+ .tds-toggle-switch-description{
1082
1094
  display:flex;
1083
- gap:var(--t-spacing-half);
1095
+ grid-area:2 / 2;
1084
1096
  align-items:flex-start;
1085
1097
  margin:0;
1086
- font-size:var(--t-font-size-sm);
1087
- line-height:1.35;
1088
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1098
+ font-size:var(--tds-toggle-switch-description-font-size);
1099
+ line-height:var(--tds-toggle-switch-description-line-height);
1100
+ color:var(--tds-toggle-switch-description-color);
1089
1101
  cursor:text;
1090
1102
  }
1091
1103
 
1092
- .tds-select-description .tds-select-description-invalid-icon{
1093
- display:var(--tds-select-description-invalid-icon-display, none);
1094
- flex-shrink:0;
1095
- margin-block-start:calc(.5lh - .5em);
1096
- line-height:1.35;
1097
- }
1098
-
1099
- .tds-select > .tds-select-hidden-select{
1100
- position:absolute;
1101
- inline-size:1px;
1102
- block-size:1px;
1103
- padding:0;
1104
- margin:0;
1105
- pointer-events:none;
1106
- opacity:0;
1104
+ .tds-toggle-switch--sm{
1105
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1106
+ --tds-toggle-switch-line-height:1.35;
1107
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1108
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1109
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1110
+ --tds-toggle-switch-description-line-height:1.3;
1107
1111
  }
1108
1112
 
1109
- .tds-select:has( > button) > button{
1110
- display:block;
1111
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1112
- overflow:hidden;
1113
- text-overflow:ellipsis;
1114
- color:var(--tds-select-placeholder-color);
1115
- white-space:nowrap;
1116
- background-image:none;
1117
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1118
- -webkit-tap-highlight-color:transparent;
1119
- }
1120
-
1121
- :is(.tds-select:has( > button) > button)::after{
1122
- position:absolute;
1123
- inset-block:0;
1124
- inset-inline-end:var(--tds-select-caret-inline-offset);
1125
- width:var(--tds-select-caret-size);
1126
- height:var(--tds-select-caret-size);
1127
- margin-block:auto;
1128
- pointer-events:none;
1129
- content:var(--tds-select-background-image);
1130
- transform:rotate(0);
1131
- transition:var(--tds-select-caret-transition);
1132
- }
1133
-
1134
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1135
- color:var(--tds-select-color);
1136
- }
1137
-
1138
- .tds-select:has( > button) [popover]{
1139
- inset:auto;
1140
- inline-size:-moz-max-content;
1141
- inline-size:max-content;
1142
- min-inline-size:anchor-size(width);
1143
- max-inline-size:100vi;
1144
- max-block-size:min(50vh, 20rem);
1145
- padding:var(--tds-select-dropdown-padding);
1146
- margin-block:var(--tds-select-dropdown-margin-block);
1147
- position-area:block-end span-inline-start;
1148
- position-try-fallbacks:flip-block, flip-inline;
1149
- overflow:auto;
1150
- overflow-x:hidden;
1151
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1152
- overscroll-behavior:none;
1153
- -webkit-user-select:none;
1154
- -moz-user-select:none;
1155
- user-select:none;
1156
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1157
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1158
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1159
- background:var(--tds-select-dropdown-background-color);
1160
- border:var(--tds-select-dropdown-border);
1161
- border-radius:var(--tds-select-dropdown-border-radius);
1162
- box-shadow:var(--tds-select-dropdown-box-shadow);
1163
- opacity:var(--tds-select-dropdown-open-opacity);
1164
- transform:var(--tds-select-dropdown-open-transform);
1165
- transition:var(--tds-select-dropdown-transition-enter);
1166
- }
1167
-
1168
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1169
- opacity:var(--tds-select-dropdown-closed-opacity);
1170
- transform:var(--tds-select-dropdown-closed-transform);
1171
- transition:var(--tds-select-dropdown-transition-exit);
1172
- }
1173
-
1174
- :is(.tds-select:has( > button) [popover]) ul{
1175
- padding:0;
1176
- margin:0;
1177
- list-style:none;
1178
- }
1179
-
1180
- @starting-style{
1181
- :is(.tds-select:has( > button) [popover]):popover-open{
1182
- opacity:var(--tds-select-dropdown-closed-opacity);
1183
- transform:var(--tds-select-dropdown-closed-transform);
1184
- }
1185
- }
1186
-
1187
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1188
- .tds-select select:has(> button){
1189
- padding-inline-end:0;
1190
- background-image:none;
1191
- }
1192
- @media (hover) and (pointer: fine){
1193
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1194
- padding-block:0;
1195
- -webkit-appearance:base-select;
1196
- -moz-appearance:base-select;
1197
- appearance:base-select;
1198
- }
1199
- }
1200
- :is(.tds-select select:has( > button))::picker-icon{
1201
- flex-shrink:0;
1202
- width:var(--tds-select-caret-size);
1203
- height:var(--tds-select-caret-size);
1204
- margin-inline-end:var(--tds-select-caret-inline-offset);
1205
- content:var(--tds-select-background-image);
1206
- transition:var(--tds-select-caret-transition);
1207
- }
1208
-
1209
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1210
- opacity:var(--tds-select-dropdown-closed-opacity);
1211
- transform:var(--tds-select-dropdown-closed-transform);
1212
- transition:var(--tds-select-dropdown-transition-exit);
1213
- }
1214
-
1215
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1216
- outline-color:var(--t-focus-ring-color);
1217
- outline-offset:var(--t-focus-ring-offset);
1218
- border-color:var(--tds-select-border-color-active);
1219
- }
1220
-
1221
- :is(.tds-select select:has( > button)):open::picker-icon{
1222
- opacity:1;
1223
- transform:rotate(.5turn);
1224
- }
1225
-
1226
- :is(.tds-select select:has( > button)) selectedcontent{
1227
- overflow:hidden;
1228
- text-overflow:ellipsis;
1229
- line-height:calc(var(--tds-select-min-height) - 2px);
1230
- white-space:nowrap;
1231
- }
1232
-
1233
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1234
- color:var(--tds-select-placeholder-color);
1235
- }
1236
-
1237
- :is(.tds-select select:has( > button))::picker(select){
1238
- inset:auto;
1239
- inline-size:-moz-max-content;
1240
- inline-size:max-content;
1241
- min-inline-size:anchor-size(width);
1242
- max-inline-size:100vi;
1243
- padding:var(--tds-select-dropdown-padding);
1244
- margin-block:var(--tds-select-dropdown-margin-block);
1245
- position-try-fallbacks:flip-block, flip-inline;
1246
- overflow:auto;
1247
- overflow-x:hidden;
1248
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1249
- overscroll-behavior:none;
1250
- -webkit-user-select:none;
1251
- -moz-user-select:none;
1252
- user-select:none;
1253
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1254
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1255
- background:var(--tds-select-dropdown-background-color);
1256
- border:var(--tds-select-dropdown-border);
1257
- border-radius:var(--tds-select-dropdown-border-radius);
1258
- box-shadow:var(--tds-select-dropdown-box-shadow);
1259
- opacity:var(--tds-select-dropdown-open-opacity);
1260
- transform:var(--tds-select-dropdown-open-transform);
1261
- transition:var(--tds-select-dropdown-transition-enter);
1262
- }
1263
-
1264
- :is(.tds-select select:has( > button)) option::checkmark{
1265
- display:none;
1266
- }
1267
-
1268
- @starting-style{
1269
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1270
- opacity:var(--tds-select-dropdown-closed-opacity);
1271
- transform:var(--tds-select-dropdown-closed-transform);
1272
- }
1273
- }
1274
- }
1113
+ .tds-toggle-switch--hide-label{
1114
+ --tds-toggle-switch-display:inline-flex;
1115
+ }
1275
1116
 
1276
1117
  .tds-input:has(textarea){
1277
1118
  --tds-input-padding-block:6px;
@@ -1378,376 +1219,535 @@
1378
1219
  }
1379
1220
  }
1380
1221
 
1222
+ .tds-select{
1223
+ --tds-select-border-color:var(--t-form-border-color);
1224
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1225
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1226
+ --tds-select-background-color:var(--t-form-background-color);
1227
+ --tds-select-color:var(--t-form-color);
1228
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1229
+ --tds-select-font-size:var(--t-font-size-md);
1230
+ --tds-select-min-height:var(--t-container-size-md);
1231
+ --tds-select-padding-block:6px;
1232
+ --tds-select-description-color:var(--t-text-color-secondary);
1233
+ --tds-select-description-invalid-icon-display:none;
1234
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1235
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1236
+ --tds-select-caret-size:1em;
1237
+ --tds-select-caret-inline-offset:.75em;
1238
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1381
1239
 
1382
- @media (prefers-reduced-motion: no-preference){
1383
-
1384
- :root{
1385
- interpolate-size:allow-keywords;
1386
- }
1387
- }
1388
-
1389
- @layer tds-component{
1390
- tds-sidenav,
1391
- .tds-sidenav{
1392
- --tds-sidenav-indent:12px;
1393
- --tds-sidenav-item-depth:0;
1394
-
1395
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1396
-
1397
- --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;
1398
- --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;
1399
- --tds-sidenav-collapse-closed-opacity:0;
1400
- --tds-sidenav-collapse-open-opacity:1;
1401
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1402
- --tds-sidenav-collapse-open-transform:translateY(0);
1403
-
1404
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1405
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1406
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1407
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1240
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1241
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1242
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1243
+ --tds-select-dropdown-margin-block:5px;
1244
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1245
+ --tds-select-dropdown-scrollbar-width:thin;
1246
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1247
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1248
+ --tds-select-dropdown-scroll-behavior:smooth;
1249
+ --tds-select-dropdown-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;
1250
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1251
+ --tds-select-dropdown-closed-opacity:0;
1252
+ --tds-select-dropdown-open-opacity:1;
1253
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1254
+ --tds-select-dropdown-open-transform:translateY(0);
1408
1255
 
1409
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1410
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1411
- --tds-sidenav-item-nested-background-selected:transparent;
1256
+ --tds-select-option-gap:var(--t-spacing-1);
1257
+ --tds-select-option-padding-block:var(--t-spacing-1);
1258
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1259
+ --tds-select-option-font-size:1rem;
1260
+ --tds-select-option-color:var(--t-text-color);
1261
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1262
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1263
+ --tds-select-option-border-radius:var(--t-border-radius);
1412
1264
 
1413
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1414
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1415
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1265
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1266
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1267
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1268
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1269
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1270
+ --tds-select-group-label-letter-spacing:0;
1271
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1272
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1273
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1274
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1416
1275
 
1417
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1418
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1419
- }
1276
+ position:relative;
1277
+ display:flex;
1278
+ flex-direction:column;
1279
+ gap:var(--t-spacing-half);
1280
+ }
1420
1281
 
1421
- @media (prefers-reduced-motion: reduce){
1422
- tds-sidenav,
1423
- .tds-sidenav{
1424
- --tds-sidenav-collapse-transition-enter:none;
1425
- --tds-sidenav-collapse-transition-exit:none;
1426
- --tds-sidenav-collapse-closed-transform:none;
1427
- --tds-sidenav-collapse-open-transform:none;
1282
+ .tds-select :is(label,.tds-select-label){
1283
+ font-size:var(--t-font-size-md);
1284
+ font-weight:var(--t-font-weight-normal);
1285
+ color:var(--t-text-color);
1286
+ cursor:default;
1428
1287
  }
1429
- }
1430
1288
 
1431
- .tds-sidenav--theme-gray{
1432
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1433
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1434
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1435
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1436
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1437
- }
1438
- }
1439
-
1440
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1441
- display:flex;
1289
+ .tds-select :is(select,button){
1290
+ position:relative;
1291
+ place-items:center;
1292
+ inline-size:100%;
1293
+ min-block-size:var(--tds-select-min-height);
1294
+ padding-block:var(--tds-select-padding-block);
1295
+ padding-inline:var(--t-spacing-1);
1296
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1297
+ font-family:inherit;
1298
+ font-size:var(--tds-select-font-size);
1299
+ line-height:1;
1300
+ color:var(--tds-select-color);
1301
+ text-align:left;
1302
+ -webkit-appearance:none;
1303
+ -moz-appearance:none;
1304
+ appearance:none;
1305
+ cursor:var(--tds-select-cursor, default);
1306
+ outline:var(--t-focus-ring-width) solid transparent;
1307
+ outline-offset:0;
1308
+ background-color:var(--tds-select-background-color);
1309
+ background-image:var(--tds-select-background-image);
1310
+ background-repeat:no-repeat;
1311
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1312
+ background-size:var(--tds-select-caret-size);
1313
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1314
+ border-radius:var(--t-form-border-radius);
1315
+ transition-timing-function:var(--t-ease-in-out);
1316
+ transition-duration:var(--t-duration-300);
1317
+ transition-property:var(--tds-select-transition-property);
1442
1318
  }
1443
1319
 
1444
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1445
- flex-direction:column;
1446
- gap:var(--t-spacing-half);
1447
- width:100%;
1448
- }
1320
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1321
+ border-color:var(--tds-select-border-color-hover);
1322
+ }
1449
1323
 
1450
- .tds-sidenav-section-list{
1451
- width:100%;
1452
- padding:0;
1453
- margin:0;
1454
- list-style:none;
1455
- }
1324
+ :is(.tds-select :is(select,button)):focus{
1325
+ outline-color:var(--t-focus-ring-color);
1326
+ outline-offset:var(--t-focus-ring-offset);
1327
+ border-color:var(--tds-select-border-color-active);
1328
+ }
1456
1329
 
1457
- .tds-sidenav-section-header{
1458
- display:flex;
1459
- align-items:baseline;
1460
- justify-content:space-between;
1461
- padding-top:var(--t-spacing-2);
1462
- }
1330
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1331
+ color:var(--tds-select-placeholder-color);
1332
+ }
1463
1333
 
1464
- .tds-sidenav-section-header h2{
1465
- margin:0;
1466
- font-size:var(--t-font-size-sm);
1467
- font-weight:var(--t-font-weight-semibold);
1468
- line-height:1.35;
1469
- color:var(--t-text-color-secondary);
1470
- text-transform:uppercase;
1334
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1335
+ --tds-select-border-color:var(--t-form-border-color-error);
1336
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1337
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1338
+ --tds-select-background-color:var(--t-form-background-color-error);
1339
+ --tds-select-description-color:var(--t-text-color-status-error);
1340
+ --tds-select-description-invalid-icon-display:inline-block;
1471
1341
  }
1472
1342
 
1473
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1474
- padding-top:0;
1343
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1344
+ margin-left:.25ch;
1345
+ color:var(--t-text-color-status-error);
1346
+ content:"*";
1347
+ }
1348
+
1349
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1350
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1351
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1352
+ --tds-select-color:var(--t-form-color-disabled);
1353
+ --tds-select-cursor:not-allowed;
1475
1354
  }
1476
1355
 
1477
- .tds-sidenav-section-header [slot="label-actions"]{
1478
- display:flex;
1479
- gap:var(--t-spacing-half);
1480
- align-items:center;
1356
+ .tds-select:has( > [popover]:popover-open) > button{
1357
+ border-color:var(--tds-select-border-color-active);
1481
1358
  }
1482
1359
 
1483
- .tds-sidenav-section [slot="section-actions"]{
1484
- display:flex;
1485
- gap:12px;
1486
- align-items:center;
1487
- min-height:42px;
1488
- padding:var(--t-spacing-1) 0;
1489
- }
1360
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1361
+ transform:rotate(.5turn);
1362
+ }
1490
1363
 
1491
- .tds-sidenav-section-list,
1492
- .tds-sidenav-item{
1493
- width:100%;
1494
- padding:0;
1495
- margin:0;
1496
- }
1364
+ .tds-select :is(hr,li[role="separator"]){
1365
+ margin-block:var(--t-spacing-half);
1366
+ color:var(--tds-select-border-color);
1367
+ border:0;
1368
+ border-top:1px solid;
1369
+ }
1497
1370
 
1498
- .tds-sidenav-item :is(a,button){
1499
- position:relative;
1500
- display:flex;
1501
- gap:12px;
1502
- align-items:center;
1503
- width:100%;
1504
- padding:12px;
1371
+ .tds-select :is(li[role="option"],option:not([hidden])){
1372
+ display:block;
1373
+ padding-block:var(--tds-select-option-padding-block);
1374
+ padding-inline:var(--tds-select-option-padding-inline);
1505
1375
  overflow:hidden;
1506
- font-size:var(--t-font-size-sm);
1507
- line-height:18px;
1508
- color:var(--t-text-color-headline);
1376
+ text-overflow:ellipsis;
1377
+ font-size:var(--tds-select-option-font-size);
1378
+ color:var(--tds-select-option-color);
1509
1379
  white-space:nowrap;
1510
- text-decoration:none;
1511
- -webkit-appearance:none;
1512
- -moz-appearance:none;
1513
- appearance:none;
1514
- cursor:pointer;
1515
- background-color:var(--tds-sidenav-item-background, transparent);
1516
- border:0;
1517
- border-radius:var(--t-border-radius);
1518
- transition:var(--tds-sidenav-item-transition);
1380
+ cursor:default;
1381
+ border-radius:var(--tds-select-option-border-radius);
1519
1382
  }
1520
1383
 
1521
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1522
- display:block;
1523
- flex:1;
1524
- overflow:hidden;
1525
- text-overflow:ellipsis;
1526
- text-align:left;
1527
- white-space:nowrap;
1384
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1385
+ outline:none;
1528
1386
  }
1529
1387
 
1530
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1531
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1532
- color:var(--t-text-color-headline);
1533
- text-decoration:none;
1388
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1389
+ background:var(--tds-select-option-background-hover);
1534
1390
  }
1535
1391
 
1536
- :is(.tds-sidenav-item :is(a,button)):active{
1537
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1392
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1393
+ background:var(--tds-select-option-background-active);
1538
1394
  }
1539
1395
 
1540
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1541
- overflow:hidden;
1542
- color:var(--tds-sidenav-item-icon-color);
1396
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1397
+ color:var(--t-form-color-disabled);
1398
+ cursor:not-allowed;
1543
1399
  }
1544
1400
 
1545
- :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{
1546
- display:block;
1547
- width:var(--tds-sidenav-item-icon-size);
1548
- height:var(--tds-sidenav-item-icon-size);
1401
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1402
+ background:transparent;
1549
1403
  }
1550
1404
 
1551
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1552
- --tds-sidenav-indent:19px;
1553
- }
1405
+ .tds-select :is(li[role="presentation"],legend){
1406
+ position:sticky;
1407
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1408
+ z-index:1;
1409
+ float:inline-start;
1410
+ inline-size:100%;
1411
+ padding-block:var(--tds-select-group-label-padding-block);
1412
+ padding-inline:var(--tds-select-group-label-padding-inline);
1413
+ container-type:scroll-state;
1414
+ font-size:var(--tds-select-group-label-font-size);
1415
+ font-weight:var(--tds-select-group-label-font-weight);
1416
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1417
+ background:var(--tds-select-group-label-background);
1418
+ text-box:trim-both cap alphabetic;
1419
+ }
1554
1420
 
1555
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1556
- visibility:visible;
1557
- block-size:auto;
1558
- opacity:1;
1421
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1422
+ display:inline-flex;
1423
+ gap:var(--t-spacing-half);
1424
+ align-items:center;
1425
+ color:var(--tds-select-group-label-color);
1426
+ transition:var(--tds-select-group-label-transition);
1559
1427
  }
1560
1428
 
1561
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1562
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1563
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1564
-
1565
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1566
- font-weight:var(--t-font-weight-semibold);
1567
- }
1429
+ @container scroll-state(stuck){
1568
1430
 
1569
- .tds-sidenav-item:has(.tds-sidenav-section){
1570
- display:flex;
1571
- flex-direction:column;
1572
- gap:var(--t-spacing-half);
1573
- }
1431
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1432
+ color:var(--tds-select-group-label-color-stuck);
1433
+ }
1574
1434
 
1575
- .tds-sidenav-item .tds-sidenav-section-list{
1576
- --tds-sidenav-item-depth:1;
1577
- gap:0;
1578
- }
1435
+ @media (forced-colors: active){
1579
1436
 
1580
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1581
- visibility:hidden;
1582
- block-size:0;
1583
- overflow-y:clip;
1584
- opacity:0;
1585
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1437
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1438
+ color:var(--tds-select-group-label-color-stuck);
1586
1439
  }
1440
+ }
1441
+ }
1587
1442
 
1588
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1589
- --tds-sidenav-item-depth:2;
1590
- }
1443
+ .tds-select.tds-select--lg{
1444
+ --tds-select-min-height:var(--t-container-size-lg);
1445
+ --tds-select-font-size:var(--t-font-size-lg);
1446
+ }
1591
1447
 
1592
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1593
- min-height:var(--t-element-size-2xl);
1594
- padding-block:9px;
1595
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1596
- line-height:1;
1597
- background-color:transparent;
1598
- }
1448
+ @media (prefers-reduced-motion: reduce){
1599
1449
 
1600
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1601
- position:absolute;
1602
- top:0;
1603
- bottom:0;
1604
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1605
- width:2px;
1606
- content:"";
1607
- background-color:var(--tds-sidenav-item-nested-border-color);
1608
- transition:var(--tds-sidenav-item-transition);
1609
- }
1610
-
1611
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1612
- position:absolute;
1613
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1614
- z-index:-1;
1615
- height:100%;
1616
- content:"";
1617
- background-color:var(--tds-sidenav-item-nested-background);
1618
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1619
- transition:var(--tds-sidenav-item-transition);
1620
- }
1621
-
1622
- :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)){
1623
- display:block;
1624
- text-align:left;
1625
- white-space:normal;
1626
- }
1627
-
1628
- :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{
1629
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1630
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1631
- }
1632
-
1633
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1634
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1635
- }
1636
-
1637
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1638
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1639
- font-weight:var(--t-font-weight-medium);
1640
- }
1450
+ .tds-select{
1451
+ --tds-select-transition-property:none;
1452
+ --tds-select-dropdown-transition-enter:none;
1453
+ --tds-select-dropdown-transition-exit:none;
1454
+ --tds-select-dropdown-scroll-behavior:auto;
1455
+ --tds-select-dropdown-closed-transform:none;
1456
+ --tds-select-dropdown-open-transform:none;
1457
+ --tds-select-caret-transition:none;
1458
+ }
1459
+ }
1641
1460
 
1642
- .tds-sidenav-responsive-header{
1461
+ .tds-select-description{
1643
1462
  display:flex;
1644
- gap:var(--t-spacing-2);
1645
- align-items:center;
1646
- width:100%;
1463
+ gap:var(--t-spacing-half);
1464
+ align-items:flex-start;
1465
+ margin:0;
1466
+ font-size:var(--t-font-size-sm);
1467
+ line-height:1.35;
1468
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1469
+ cursor:text;
1647
1470
  }
1648
1471
 
1649
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1650
- order:0;
1472
+ .tds-select-description .tds-select-description-invalid-icon{
1473
+ display:var(--tds-select-description-invalid-icon-display, none);
1474
+ flex-shrink:0;
1475
+ margin-block-start:calc(.5lh - .5em);
1476
+ line-height:1.35;
1651
1477
  }
1652
1478
 
1653
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1654
- flex:1;
1655
- order:1;
1656
- margin:0;
1657
- font-size:var(--t-font-size-lg);
1658
- font-weight:var(--t-font-weight-medium);
1659
- color:var(--t-text-color-headline);
1660
- }
1479
+ .tds-select > .tds-select-hidden-select{
1480
+ position:absolute;
1481
+ inline-size:1px;
1482
+ block-size:1px;
1483
+ padding:0;
1484
+ margin:0;
1485
+ pointer-events:none;
1486
+ opacity:0;
1487
+ }
1661
1488
 
1662
- @media (max-width: 719px){
1663
- .tds-sidenav-collapse{
1664
- z-index:10001;
1665
- display:none;
1666
- max-width:min(448px, calc(100vw - 48px));
1667
- padding:0;
1668
- margin:12px 0;
1669
- position-area:bottom span-right;
1489
+ .tds-select:has( > button) > button{
1490
+ display:block;
1491
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1670
1492
  overflow:hidden;
1671
- outline:0;
1672
- background:var(--t-surface-color-card);
1673
- border:0;
1674
- border-radius:6px;
1675
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1676
- opacity:var(--tds-sidenav-collapse-open-opacity);
1677
- transform:var(--tds-sidenav-collapse-open-transform);
1678
- transition:var(--tds-sidenav-collapse-transition-enter);
1679
- will-change:transform;
1493
+ text-overflow:ellipsis;
1494
+ color:var(--tds-select-placeholder-color);
1495
+ white-space:nowrap;
1496
+ background-image:none;
1497
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1498
+ -webkit-tap-highlight-color:transparent;
1680
1499
  }
1681
1500
 
1682
- .tds-sidenav-scroll-container{
1683
- --webkit-overflow-scrolling:touch;
1684
- display:block;
1685
- width:100%;
1686
- height:-moz-fit-content;
1687
- height:fit-content;
1688
- padding:var(--t-spacing-2);
1689
- overflow-y:auto;
1501
+ :is(.tds-select:has( > button) > button)::after{
1502
+ position:absolute;
1503
+ inset-block:0;
1504
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1505
+ width:var(--tds-select-caret-size);
1506
+ height:var(--tds-select-caret-size);
1507
+ margin-block:auto;
1508
+ pointer-events:none;
1509
+ content:var(--tds-select-background-image);
1510
+ transform:rotate(0);
1511
+ transition:var(--tds-select-caret-transition);
1512
+ }
1513
+
1514
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1515
+ color:var(--tds-select-color);
1690
1516
  }
1691
1517
 
1692
- .tds-sidenav-item :is(a, button) :is(.prefix){
1693
- display:none;
1518
+ .tds-select:has( > button) [popover]{
1519
+ inset:auto;
1520
+ inline-size:-moz-max-content;
1521
+ inline-size:max-content;
1522
+ min-inline-size:anchor-size(width);
1523
+ max-inline-size:100vi;
1524
+ max-block-size:min(50vh, 20rem);
1525
+ padding:var(--tds-select-dropdown-padding);
1526
+ margin-block:var(--tds-select-dropdown-margin-block);
1527
+ position-area:block-end span-inline-start;
1528
+ position-try-fallbacks:flip-block, flip-inline;
1529
+ overflow:auto;
1530
+ overflow-x:hidden;
1531
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1532
+ overscroll-behavior:none;
1533
+ -webkit-user-select:none;
1534
+ -moz-user-select:none;
1535
+ user-select:none;
1536
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1537
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1538
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1539
+ background:var(--tds-select-dropdown-background-color);
1540
+ border:var(--tds-select-dropdown-border);
1541
+ border-radius:var(--tds-select-dropdown-border-radius);
1542
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1543
+ opacity:var(--tds-select-dropdown-open-opacity);
1544
+ transform:var(--tds-select-dropdown-open-transform);
1545
+ transition:var(--tds-select-dropdown-transition-enter);
1694
1546
  }
1695
- @supports selector(:popover-open){
1696
- .tds-sidenav-collapse:popover-open{
1697
- display:flex;
1547
+
1548
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1549
+ opacity:var(--tds-select-dropdown-closed-opacity);
1550
+ transform:var(--tds-select-dropdown-closed-transform);
1551
+ transition:var(--tds-select-dropdown-transition-exit);
1698
1552
  }
1699
1553
 
1700
- .tds-sidenav-collapse:not(:popover-open){
1701
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1702
- transition:var(--tds-sidenav-collapse-transition-exit);
1554
+ :is(.tds-select:has( > button) [popover]) ul{
1555
+ padding:0;
1556
+ margin:0;
1557
+ list-style:none;
1703
1558
  }
1704
1559
 
1705
- @starting-style{
1706
- .tds-sidenav-collapse:popover-open{
1707
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1708
- transform:var(--tds-sidenav-collapse-closed-transform);
1560
+ @starting-style{
1561
+ :is(.tds-select:has( > button) [popover]):popover-open{
1562
+ opacity:var(--tds-select-dropdown-closed-opacity);
1563
+ transform:var(--tds-select-dropdown-closed-transform);
1709
1564
  }
1710
1565
  }
1566
+
1567
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1568
+ .tds-select select:has(> button){
1569
+ padding-inline-end:0;
1570
+ background-image:none;
1711
1571
  }
1712
- @supports not selector(:popover-open){
1713
- .tds-sidenav-collapse.\:popover-open{
1714
- display:flex;
1572
+ @media (hover) and (pointer: fine){
1573
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1574
+ padding-block:0;
1575
+ -webkit-appearance:base-select;
1576
+ -moz-appearance:base-select;
1577
+ appearance:base-select;
1578
+ }
1579
+ }
1580
+ :is(.tds-select select:has( > button))::picker-icon{
1581
+ flex-shrink:0;
1582
+ width:var(--tds-select-caret-size);
1583
+ height:var(--tds-select-caret-size);
1584
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1585
+ content:var(--tds-select-background-image);
1586
+ transition:var(--tds-select-caret-transition);
1715
1587
  }
1716
1588
 
1717
- .tds-sidenav-collapse:not(.\:popover-open){
1718
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1719
- transition:var(--tds-sidenav-collapse-transition-exit);
1589
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1590
+ opacity:var(--tds-select-dropdown-closed-opacity);
1591
+ transform:var(--tds-select-dropdown-closed-transform);
1592
+ transition:var(--tds-select-dropdown-transition-exit);
1720
1593
  }
1721
- }
1722
- }
1723
1594
 
1724
- @media (min-width: 720px){
1725
- .tds-sidenav-responsive-header{
1726
- display:none;
1727
- }
1728
- }
1595
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1596
+ outline-color:var(--t-focus-ring-color);
1597
+ outline-offset:var(--t-focus-ring-offset);
1598
+ border-color:var(--tds-select-border-color-active);
1599
+ }
1729
1600
 
1730
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1731
- display:none;
1601
+ :is(.tds-select select:has( > button)):open::picker-icon{
1602
+ opacity:1;
1603
+ transform:rotate(.5turn);
1732
1604
  }
1733
1605
 
1734
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1735
- display:block;
1606
+ :is(.tds-select select:has( > button)) selectedcontent{
1607
+ overflow:hidden;
1608
+ text-overflow:ellipsis;
1609
+ line-height:calc(var(--tds-select-min-height) - 2px);
1610
+ white-space:nowrap;
1736
1611
  }
1737
1612
 
1738
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1739
- display:flex;
1740
- flex-direction:column;
1613
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1614
+ color:var(--tds-select-placeholder-color);
1741
1615
  }
1742
1616
 
1743
- .tds-input{
1744
- --tds-input-border-color:var(--t-form-border-color);
1745
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1746
- --tds-input-background-color:var(--t-form-background-color);
1747
- --tds-input-color:var(--t-form-color);
1748
- --tds-input-font-size:var(--t-font-size-md);
1749
- --tds-input-description-color:var(--t-text-color-secondary);
1750
- --tds-input-description-invalid-icon-display:none;
1617
+ :is(.tds-select select:has( > button))::picker(select){
1618
+ inset:auto;
1619
+ inline-size:-moz-max-content;
1620
+ inline-size:max-content;
1621
+ min-inline-size:anchor-size(width);
1622
+ max-inline-size:100vi;
1623
+ padding:var(--tds-select-dropdown-padding);
1624
+ margin-block:var(--tds-select-dropdown-margin-block);
1625
+ position-try-fallbacks:flip-block, flip-inline;
1626
+ overflow:auto;
1627
+ overflow-x:hidden;
1628
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1629
+ overscroll-behavior:none;
1630
+ -webkit-user-select:none;
1631
+ -moz-user-select:none;
1632
+ user-select:none;
1633
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1634
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1635
+ background:var(--tds-select-dropdown-background-color);
1636
+ border:var(--tds-select-dropdown-border);
1637
+ border-radius:var(--tds-select-dropdown-border-radius);
1638
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1639
+ opacity:var(--tds-select-dropdown-open-opacity);
1640
+ transform:var(--tds-select-dropdown-open-transform);
1641
+ transition:var(--tds-select-dropdown-transition-enter);
1642
+ }
1643
+
1644
+ :is(.tds-select select:has( > button)) option::checkmark{
1645
+ display:none;
1646
+ }
1647
+
1648
+ @starting-style{
1649
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1650
+ opacity:var(--tds-select-dropdown-closed-opacity);
1651
+ transform:var(--tds-select-dropdown-closed-transform);
1652
+ }
1653
+ }
1654
+ }
1655
+
1656
+ .tds-radio-group{
1657
+ --tds-radio-group-font-size:var(--t-font-size-md);
1658
+ --tds-radio-group-line-height:1.4;
1659
+ --tds-radio-group-gap:var(--t-spacing-1);
1660
+
1661
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1662
+
1663
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1664
+ --tds-radio-group-description-line-height:1.35;
1665
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1666
+ --tds-radio-group-description-invalid-icon-display:none;
1667
+ display:flex;
1668
+ flex-direction:column;
1669
+ gap:var(--tds-radio-group-gap);
1670
+ padding:0;
1671
+ margin:0;
1672
+
1673
+ font-size:var(--tds-radio-group-font-size);
1674
+ line-height:var(--tds-radio-group-line-height);
1675
+ border:0;
1676
+ }
1677
+
1678
+ .tds-radio-group legend{
1679
+ padding:0;
1680
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1681
+ }
1682
+
1683
+ .tds-radio-group:has(.tds-radio-group-description){
1684
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1685
+ }
1686
+
1687
+ .tds-radio-group[aria-invalid="true"]{
1688
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1689
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1690
+ }
1691
+
1692
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1693
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1694
+ }
1695
+
1696
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1697
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1698
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1699
+ }
1700
+
1701
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1702
+ --tds-radio-input-background-color:var(--t-form-background-color);
1703
+ }
1704
+
1705
+ .tds-radio-group:has(input:required) legend::after{
1706
+ margin-left:.25ch;
1707
+ color:var(--t-text-color-status-error);
1708
+ content:"*";
1709
+ }
1710
+
1711
+ .tds-radio-group-fields{
1712
+ display:flex;
1713
+ flex-direction:column;
1714
+ gap:var(--tds-radio-group-gap);
1715
+ align-items:flex-start;
1716
+ }
1717
+
1718
+ .tds-radio-group-description{
1719
+ display:flex;
1720
+ gap:var(--t-spacing-half);
1721
+ align-items:flex-start;
1722
+ margin:0;
1723
+ font-size:var(--tds-radio-group-description-font-size);
1724
+ line-height:var(--tds-radio-group-description-line-height);
1725
+ color:var(--tds-radio-group-description-color);
1726
+ cursor:text;
1727
+ }
1728
+
1729
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1730
+ display:var(--tds-radio-group-description-invalid-icon-display);
1731
+ flex-shrink:0;
1732
+ margin-top:calc(.5lh - .5em);
1733
+ line-height:var(--tds-radio-group-description-line-height);
1734
+ }
1735
+
1736
+ .tds-radio-group--sm{
1737
+ --tds-radio-group-line-height:1.35;
1738
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1739
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1740
+ --tds-radio-group-description-line-height:1.3;
1741
+ }
1742
+
1743
+ .tds-input{
1744
+ --tds-input-border-color:var(--t-form-border-color);
1745
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1746
+ --tds-input-background-color:var(--t-form-background-color);
1747
+ --tds-input-color:var(--t-form-color);
1748
+ --tds-input-font-size:var(--t-font-size-md);
1749
+ --tds-input-description-color:var(--t-text-color-secondary);
1750
+ --tds-input-description-invalid-icon-display:none;
1751
1751
  --tds-input-min-height:var(--t-container-size-md);
1752
1752
  --tds-input-padding-inline:var(--t-spacing-1);
1753
1753
 
@@ -3302,332 +3302,27 @@ a[class="tds-btn"]{
3302
3302
  --t-surface-color-canvas:hsl(0, 0%, 10%);
3303
3303
  --t-border-color:hsl(0, 0%, 21%);
3304
3304
  --t-border-color-dark:hsl(0, 0%, 25%);
3305
- --t-border-color-darker:hsl(0, 0%, 33%);
3306
- --t-border-color-darkest:hsl(0, 0%, 38%);
3307
- --t-border-color-disabled:hsl(0, 0%, 21%);
3308
- --t-border-color-dim:hsl(0, 0%, 16%);
3309
- --t-border-color-white:hsl(0, 0%, 12%);
3310
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
3311
- --t-border-color-status-info:hsl(204, 100%, 35%);
3312
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
3313
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3314
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3315
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3316
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
3317
- --t-border-color-control-info:hsl(204, 100%, 35%);
3318
- --t-border-color-control-disabled:hsl(0, 0%, 24%);
3319
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3320
- }
3321
- }
3322
-
3323
- @media (prefers-color-scheme: dark){
3324
- }
3325
-
3326
- .tds-date-picker{
3327
- --tds-date-picker-border-color:var(--t-form-border-color);
3328
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3329
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3330
- --tds-date-picker-background-color:var(--t-form-background-color);
3331
- --tds-date-picker-color:var(--t-form-color);
3332
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3333
- --tds-date-picker-font-size:var(--t-font-size-md);
3334
- --tds-date-picker-min-height:var(--t-container-size-md);
3335
- --tds-date-picker-padding-block:6px;
3336
- --tds-date-picker-button-offset:4px;
3337
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3338
- --tds-date-picker-description-invalid-icon-display:none;
3339
-
3340
- position:relative;
3341
- display:flex;
3342
- flex-direction:column;
3343
- gap:var(--t-spacing-half);
3344
- }
3345
-
3346
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3347
- margin-left:.25ch;
3348
- color:var(--t-text-color-status-error);
3349
- content:"*";
3350
- }
3351
-
3352
- .tds-date-picker[data-invalid]{
3353
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3354
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3355
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3356
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3357
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3358
- --tds-date-picker-description-invalid-icon-display:inline-block;
3359
- }
3360
-
3361
- .tds-date-picker[data-disabled]{
3362
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3363
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3364
- --tds-date-picker-color:var(--t-form-color-disabled);
3365
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3366
- }
3367
-
3368
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3369
- cursor:not-allowed;
3370
- }
3371
-
3372
- .tds-date-picker--lg{
3373
- --tds-date-picker-min-height:var(--t-container-size-lg);
3374
- --tds-date-picker-font-size:var(--t-font-size-lg);
3375
- --tds-date-picker-button-offset:5px;
3376
- }
3377
-
3378
- .tds-date-picker-label{
3379
- font-size:var(--t-font-size-md);
3380
- font-weight:var(--t-font-weight-normal);
3381
- color:var(--t-text-color);
3382
- cursor:default;
3383
- }
3384
-
3385
- .tds-date-picker-field{
3386
- display:flex;
3387
- align-items:center;
3388
- inline-size:100%;
3389
- min-block-size:var(--tds-date-picker-min-height);
3390
- font-family:inherit;
3391
- font-size:var(--tds-date-picker-font-size);
3392
- line-height:1;
3393
- color:var(--tds-date-picker-color);
3394
- -webkit-appearance:none;
3395
- -moz-appearance:none;
3396
- appearance:none;
3397
- cursor:text;
3398
- outline:var(--t-focus-ring-width) solid transparent;
3399
- outline-offset:0;
3400
- background-color:var(--tds-date-picker-background-color);
3401
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3402
- border-radius:var(--t-form-border-radius);
3403
- }
3404
-
3405
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3406
- border-color:var(--tds-date-picker-border-color-hover);
3407
- }
3408
-
3409
- .tds-date-picker-field[data-focus-within]{
3410
- outline-color:var(--t-focus-ring-color);
3411
- outline-offset:var(--t-focus-ring-offset);
3412
- border-color:var(--tds-date-picker-border-color-active);
3413
- }
3414
-
3415
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3416
- color:var(--t-form-color-readonly);
3417
- background-color:var(--t-form-background-color-readonly);
3418
- border-color:var(--t-form-border-color-readonly);
3419
- }
3420
-
3421
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3422
- border-color:var(--t-form-border-color-readonly);
3423
- }
3424
-
3425
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3426
- outline-color:var(--t-focus-ring-color);
3427
- outline-offset:var(--t-focus-ring-offset);
3428
- border-color:var(--t-form-border-color-hover);
3429
- }
3430
-
3431
- .tds-date-picker-input{
3432
- flex:1;
3433
- padding-block:var(--tds-date-picker-padding-block);
3434
- padding-inline-start:var(--t-spacing-1);
3435
- font-variant-numeric:tabular-nums;
3436
- }
3437
-
3438
- .tds-date-picker-segment{
3439
- padding-inline:2px;
3440
- caret-color:transparent;
3441
- border-radius:var(--t-border-radius-sm);
3442
- }
3443
-
3444
- .tds-date-picker-segment[data-placeholder]{
3445
- color:var(--tds-date-picker-placeholder-color);
3446
- }
3447
-
3448
- .tds-date-picker-segment[data-focused]{
3449
- color:var(--t-text-color-inverted);
3450
- outline:0;
3451
- background:var(--t-fill-color-interaction);
3452
- }
3453
-
3454
- .tds-date-picker-segment-separator{
3455
- padding-inline:0;
3456
- color:var(--tds-date-picker-placeholder-color);
3457
- }
3458
-
3459
- .tds-date-picker-description{
3460
- display:flex;
3461
- gap:var(--t-spacing-half);
3462
- align-items:flex-start;
3463
- margin:0;
3464
- font-size:var(--t-font-size-sm);
3465
- line-height:1.35;
3466
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3467
- cursor:text;
3468
- }
3469
-
3470
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3471
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3472
- flex-shrink:0;
3473
- margin-block-start:calc(.5lh - .5em);
3474
- line-height:1.35;
3475
- }
3476
-
3477
- .tds-date-picker-button{
3478
- flex-shrink:0;
3479
- align-self:center;
3480
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3481
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3482
- padding:0;
3483
- margin-inline-end:var(--tds-date-picker-button-offset);
3484
- }
3485
-
3486
- .tds-date-picker-popover{
3487
- padding:var(--t-spacing-2);
3488
- background:var(--t-surface-color-card);
3489
- border:1px solid var(--t-border-color);
3490
- border-radius:var(--t-border-radius);
3491
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3492
- }
3493
-
3494
- .tds-date-picker-popover[data-entering]{
3495
- animation:tds-date-picker-popover-enter 160ms ease;
3496
- }
3497
-
3498
- .tds-date-picker-popover[data-exiting]{
3499
- animation:tds-date-picker-popover-exit 130ms ease;
3500
- }
3501
-
3502
- @keyframes tds-date-picker-popover-enter{
3503
- from{
3504
- opacity:0;
3505
- transform:translateY(-8px);
3506
- }
3507
- }
3508
-
3509
- @keyframes tds-date-picker-popover-exit{
3510
- to{
3511
- opacity:0;
3512
- transform:translateY(-8px);
3513
- }
3514
- }
3515
-
3516
- @media (prefers-reduced-motion: reduce){
3517
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3518
- animation:none;
3519
- }
3520
- }
3521
-
3522
- .tds-date-picker-calendar{
3523
- inline-size:-moz-fit-content;
3524
- inline-size:fit-content;
3525
- }
3526
-
3527
- .tds-date-picker-calendar-header{
3528
- display:flex;
3529
- align-items:center;
3530
- justify-content:space-between;
3531
- padding-block-end:var(--t-spacing-1);
3532
- }
3533
-
3534
- .tds-date-picker-calendar-title{
3535
- flex:1;
3536
- margin:0;
3537
- font-size:var(--t-font-size-md);
3538
- font-weight:var(--t-font-weight-semibold);
3539
- text-align:center;
3540
- }
3541
-
3542
- .tds-date-picker-calendar-nav{
3543
- display:flex;
3544
- align-items:center;
3545
- justify-content:center;
3546
- padding:var(--t-spacing-half);
3547
- color:var(--t-text-color);
3548
- cursor:default;
3549
- outline:0;
3550
- background:transparent;
3551
- border:0;
3552
- border-radius:var(--t-border-radius-sm);
3553
- }
3554
-
3555
- .tds-date-picker-calendar-nav[data-hovered]{
3556
- background:var(--t-fill-color-neutral-070);
3557
- }
3558
-
3559
- .tds-date-picker-calendar-nav[data-pressed]{
3560
- background:var(--t-fill-color-button-interaction-ghost-active);
3561
- }
3562
-
3563
- .tds-date-picker-calendar-nav[data-focus-visible]{
3564
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3565
- outline-offset:var(--t-focus-ring-offset);
3566
- }
3567
-
3568
- .tds-date-picker-calendar-nav[data-disabled]{
3569
- color:var(--t-form-color-disabled);
3570
- cursor:not-allowed;
3571
- }
3572
-
3573
- .tds-date-picker-calendar-grid{
3574
- border-collapse:collapse;
3305
+ --t-border-color-darker:hsl(0, 0%, 33%);
3306
+ --t-border-color-darkest:hsl(0, 0%, 38%);
3307
+ --t-border-color-disabled:hsl(0, 0%, 21%);
3308
+ --t-border-color-dim:hsl(0, 0%, 16%);
3309
+ --t-border-color-white:hsl(0, 0%, 12%);
3310
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
3311
+ --t-border-color-status-info:hsl(204, 100%, 35%);
3312
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
3313
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3314
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3315
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3316
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
3317
+ --t-border-color-control-info:hsl(204, 100%, 35%);
3318
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
3319
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3575
3320
  }
3576
-
3577
- .tds-date-picker-calendar-header-cell{
3578
- padding-block:var(--t-spacing-half);
3579
- font-size:var(--t-font-size-sm);
3580
- font-weight:var(--t-font-weight-normal);
3581
- color:var(--t-text-color-secondary);
3582
- text-align:center;
3583
3321
  }
3584
3322
 
3585
- .tds-date-picker-calendar-cell{
3586
- display:flex;
3587
- align-items:center;
3588
- justify-content:center;
3589
- inline-size:2.25rem;
3590
- block-size:2.25rem;
3591
- font-size:var(--t-font-size-md);
3592
- color:var(--t-text-color);
3593
- cursor:default;
3594
- outline:0;
3595
- border-radius:var(--t-border-radius-sm);
3323
+ @media (prefers-color-scheme: dark){
3596
3324
  }
3597
3325
 
3598
- .tds-date-picker-calendar-cell[data-hovered]{
3599
- background:var(--t-fill-color-neutral-070);
3600
- }
3601
-
3602
- .tds-date-picker-calendar-cell[data-pressed]{
3603
- background:var(--t-fill-color-button-interaction-ghost-active);
3604
- }
3605
-
3606
- .tds-date-picker-calendar-cell[data-selected]{
3607
- color:var(--t-text-color-inverted);
3608
- background:var(--t-fill-color-interaction);
3609
- }
3610
-
3611
- .tds-date-picker-calendar-cell[data-focus-visible]{
3612
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3613
- outline-offset:var(--t-focus-ring-offset);
3614
- }
3615
-
3616
- .tds-date-picker-calendar-cell[data-unavailable]{
3617
- color:var(--t-text-color-secondary);
3618
- text-decoration:line-through;
3619
- cursor:not-allowed;
3620
- }
3621
-
3622
- .tds-date-picker-calendar-cell[data-disabled]{
3623
- color:var(--t-form-color-disabled);
3624
- cursor:not-allowed;
3625
- }
3626
-
3627
- .tds-date-picker-calendar-cell[data-outside-month]{
3628
- color:var(--t-text-color-secondary);
3629
- }
3630
-
3631
3326
  .tds-combo-box{
3632
3327
  --tds-combo-box-border-color:var(--t-form-border-color);
3633
3328
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3807,104 +3502,335 @@ a[class="tds-btn"]{
3807
3502
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3808
3503
  }
3809
3504
 
3810
- .tds-combo-box-popover[data-entering]{
3811
- animation:tds-combo-box-popover-enter 160ms ease;
3812
- }
3505
+ .tds-combo-box-popover[data-entering]{
3506
+ animation:tds-combo-box-popover-enter 160ms ease;
3507
+ }
3508
+
3509
+ .tds-combo-box-popover[data-exiting]{
3510
+ animation:tds-combo-box-popover-exit 130ms ease;
3511
+ }
3512
+
3513
+ @keyframes tds-combo-box-popover-enter{
3514
+ from{
3515
+ opacity:0;
3516
+ transform:translateY(-8px);
3517
+ }
3518
+ }
3519
+
3520
+ @keyframes tds-combo-box-popover-exit{
3521
+ to{
3522
+ opacity:0;
3523
+ transform:translateY(-8px);
3524
+ }
3525
+ }
3526
+
3527
+ @media (prefers-reduced-motion: reduce){
3528
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3529
+ animation:none;
3530
+ }
3531
+
3532
+ .tds-combo-box-button > svg{
3533
+ transition:none;
3534
+ }
3535
+ }
3536
+
3537
+ .tds-combo-box-list{
3538
+ padding:0;
3539
+ margin:0;
3540
+ }
3541
+
3542
+ .tds-combo-box-list-item{
3543
+ display:block;
3544
+ padding-block:var(--t-spacing-1);
3545
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3546
+ overflow:hidden;
3547
+ text-overflow:ellipsis;
3548
+ font-size:1rem;
3549
+ color:var(--t-text-color);
3550
+ white-space:nowrap;
3551
+ cursor:default;
3552
+ outline-offset:-1px;
3553
+ border-radius:var(--t-border-radius);
3554
+ }
3555
+
3556
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3557
+ background:var(--t-fill-color-neutral-070);
3558
+ }
3559
+
3560
+ .tds-combo-box-list-item[data-selected]{
3561
+ background:var(--t-fill-color-button-interaction-ghost-active);
3562
+ }
3563
+
3564
+ .tds-combo-box-list-item[data-focus-visible]{
3565
+ outline:var(--t-focus-ring-outline);
3566
+ outline-offset:-1px;
3567
+ }
3568
+
3569
+ .tds-combo-box-list-item[data-disabled]{
3570
+ color:var(--t-form-color-disabled);
3571
+ cursor:not-allowed;
3572
+ }
3573
+
3574
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3575
+ background:transparent;
3576
+ }
3577
+
3578
+ .tds-combo-box-list-section:not(:first-child){
3579
+ margin-block-start:var(--t-spacing-half);
3580
+ }
3581
+
3582
+ .tds-combo-box-section-header{
3583
+ padding-block:var(--t-spacing-1);
3584
+ padding-inline:var(--t-spacing-1);
3585
+ font-size:var(--t-font-size-sm);
3586
+ font-weight:var(--t-font-weight-semibold);
3587
+ color:var(--t-text-color-secondary);
3588
+ }
3589
+
3590
+ .tds-combo-box-description{
3591
+ display:flex;
3592
+ gap:var(--t-spacing-half);
3593
+ align-items:flex-start;
3594
+ margin:0;
3595
+ font-size:var(--t-font-size-sm);
3596
+ line-height:1.35;
3597
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3598
+ cursor:text;
3599
+ }
3600
+
3601
+ .tds-combo-box-description-invalid-icon{
3602
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3603
+ flex-shrink:0;
3604
+ margin-block-start:calc(.5lh - .5em);
3605
+ line-height:1.35;
3606
+ }
3607
+
3608
+ .tds-checkbox-group{
3609
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3610
+ --tds-checkbox-group-line-height:1.4;
3611
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3612
+
3613
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3614
+
3615
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3616
+ --tds-checkbox-group-description-line-height:1.35;
3617
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3618
+ --tds-checkbox-group-description-invalid-icon-display:none;
3619
+ display:flex;
3620
+ flex-direction:column;
3621
+ gap:var(--tds-checkbox-group-gap);
3622
+ padding:0;
3623
+ margin:0;
3624
+
3625
+ font-size:var(--tds-checkbox-group-font-size);
3626
+ line-height:var(--tds-checkbox-group-line-height);
3627
+ border:0;
3628
+ }
3629
+
3630
+ .tds-checkbox-group legend{
3631
+ padding:0;
3632
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3633
+ }
3634
+
3635
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3636
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3637
+ }
3638
+
3639
+ .tds-checkbox-group[aria-invalid="true"]{
3640
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3641
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3642
+ }
3643
+
3644
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3645
+ margin-left:.25ch;
3646
+ color:var(--t-text-color-status-error);
3647
+ content:"*";
3648
+ }
3649
+
3650
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3651
+ content:none;
3652
+ }
3653
+
3654
+ .tds-checkbox-group-fields{
3655
+ display:flex;
3656
+ flex-direction:column;
3657
+ gap:var(--tds-checkbox-group-gap);
3658
+ align-items:flex-start;
3659
+ }
3660
+
3661
+ .tds-checkbox-group-description{
3662
+ display:flex;
3663
+ gap:var(--t-spacing-half);
3664
+ align-items:flex-start;
3665
+ margin:0;
3666
+ font-size:var(--tds-checkbox-group-description-font-size);
3667
+ line-height:var(--tds-checkbox-group-description-line-height);
3668
+ color:var(--tds-checkbox-group-description-color);
3669
+ cursor:text;
3670
+ }
3671
+
3672
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3673
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3674
+ flex-shrink:0;
3675
+ margin-top:calc(.5lh - .5em);
3676
+ line-height:var(--tds-checkbox-group-description-line-height);
3677
+ }
3678
+
3679
+ .tds-checkbox-group--sm{
3680
+ --tds-checkbox-group-line-height:1.35;
3681
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3682
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3683
+ --tds-checkbox-group-description-line-height:1.3;
3684
+ }
3685
+
3686
+ .tds-number-stepper{
3687
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3688
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3689
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3690
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3691
+ --tds-number-stepper-color:var(--t-form-color);
3692
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3693
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3694
+ --tds-number-stepper-padding-block:6px;
3695
+ --tds-number-stepper-button-offset:4px;
3696
+ --tds-number-stepper-button-gap:2px;
3697
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3698
+ --tds-number-stepper-description-invalid-icon-display:none;
3699
+
3700
+ position:relative;
3701
+ display:flex;
3702
+ flex-direction:column;
3703
+ gap:var(--t-spacing-half);
3704
+ }
3813
3705
 
3814
- .tds-combo-box-popover[data-exiting]{
3815
- animation:tds-combo-box-popover-exit 130ms ease;
3706
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3707
+ margin-left:.25ch;
3708
+ color:var(--t-text-color-status-error);
3709
+ content:"*";
3816
3710
  }
3817
3711
 
3818
- @keyframes tds-combo-box-popover-enter{
3819
- from{
3820
- opacity:0;
3821
- transform:translateY(-8px);
3712
+ .tds-number-stepper[data-invalid]{
3713
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3714
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3715
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3716
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3717
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3718
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3822
3719
  }
3823
- }
3824
3720
 
3825
- @keyframes tds-combo-box-popover-exit{
3826
- to{
3827
- opacity:0;
3828
- transform:translateY(-8px);
3721
+ .tds-number-stepper[data-disabled]{
3722
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3723
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3724
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3829
3725
  }
3830
- }
3831
3726
 
3832
- @media (prefers-reduced-motion: reduce){
3833
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3834
- animation:none;
3727
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3728
+ color:var(--t-form-color-disabled);
3835
3729
  }
3836
3730
 
3837
- .tds-combo-box-button > svg{
3838
- transition:none;
3839
- }
3840
- }
3731
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3732
+ cursor:not-allowed;
3733
+ }
3841
3734
 
3842
- .tds-combo-box-list{
3843
- padding:0;
3844
- margin:0;
3735
+ .tds-number-stepper--lg{
3736
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3737
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3738
+ --tds-number-stepper-button-offset:5px;
3739
+ --tds-number-stepper-button-gap:4px;
3845
3740
  }
3846
3741
 
3847
- .tds-combo-box-list-item{
3848
- display:block;
3849
- padding-block:var(--t-spacing-1);
3850
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3851
- overflow:hidden;
3852
- text-overflow:ellipsis;
3853
- font-size:1rem;
3742
+ .tds-number-stepper-label{
3743
+ font-size:var(--t-font-size-md);
3744
+ font-weight:var(--t-font-weight-normal);
3854
3745
  color:var(--t-text-color);
3855
- white-space:nowrap;
3856
3746
  cursor:default;
3857
- outline-offset:-1px;
3858
- border-radius:var(--t-border-radius);
3859
3747
  }
3860
3748
 
3861
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3862
- background:var(--t-fill-color-neutral-070);
3863
- }
3749
+ .tds-number-stepper-field{
3750
+ display:flex;
3751
+ gap:var(--tds-number-stepper-button-gap);
3752
+ align-items:center;
3753
+ inline-size:100%;
3754
+ min-block-size:var(--tds-number-stepper-min-height);
3755
+ font-family:inherit;
3756
+ font-size:var(--tds-number-stepper-font-size);
3757
+ line-height:1;
3758
+ color:var(--tds-number-stepper-color);
3759
+ -webkit-appearance:none;
3760
+ -moz-appearance:none;
3761
+ appearance:none;
3762
+ cursor:default;
3763
+ outline:var(--t-focus-ring-width) solid transparent;
3764
+ outline-offset:0;
3765
+ background-color:var(--tds-number-stepper-background-color);
3766
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3767
+ border-radius:var(--t-form-border-radius);
3768
+ }
3864
3769
 
3865
- .tds-combo-box-list-item[data-selected]{
3866
- background:var(--t-fill-color-button-interaction-ghost-active);
3770
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3771
+ border-color:var(--tds-number-stepper-border-color-hover);
3867
3772
  }
3868
3773
 
3869
- .tds-combo-box-list-item[data-focus-visible]{
3870
- outline:var(--t-focus-ring-outline);
3871
- outline-offset:-1px;
3774
+ .tds-number-stepper-field[data-focus-within]{
3775
+ outline-color:var(--t-focus-ring-color);
3776
+ outline-offset:var(--t-focus-ring-offset);
3777
+ border-color:var(--tds-number-stepper-border-color-active);
3872
3778
  }
3873
3779
 
3874
- .tds-combo-box-list-item[data-disabled]{
3875
- color:var(--t-form-color-disabled);
3876
- cursor:not-allowed;
3780
+ .tds-number-stepper-field:has([readonly]){
3781
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3877
3782
  }
3878
3783
 
3879
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3880
- background:transparent;
3784
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3785
+ border-color:var(--t-form-border-color-hover);
3881
3786
  }
3882
3787
 
3883
- .tds-combo-box-list-section:not(:first-child){
3884
- margin-block-start:var(--t-spacing-half);
3788
+ .tds-number-stepper-input{
3789
+ display:flex;
3790
+ flex:1;
3791
+ align-items:center;
3792
+ min-inline-size:0;
3793
+ padding-block:var(--tds-number-stepper-padding-block);
3794
+ padding-inline:var(--t-spacing-1);
3795
+ font-family:inherit;
3796
+ font-size:inherit;
3797
+ color:inherit;
3798
+ outline:0;
3799
+ background:transparent;
3800
+ border:0;
3801
+ }
3802
+
3803
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3804
+ margin:0;
3805
+ -webkit-appearance:none;
3806
+ appearance:none;
3885
3807
  }
3886
3808
 
3887
- .tds-combo-box-section-header{
3888
- padding-block:var(--t-spacing-1);
3889
- padding-inline:var(--t-spacing-1);
3890
- font-size:var(--t-font-size-sm);
3891
- font-weight:var(--t-font-weight-semibold);
3892
- color:var(--t-text-color-secondary);
3809
+ .tds-number-stepper-button{
3810
+ flex-shrink:0;
3811
+ align-self:center;
3812
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3813
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3814
+ padding:0;
3893
3815
  }
3894
3816
 
3895
- .tds-combo-box-description{
3817
+ .tds-number-stepper-button:last-of-type{
3818
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3819
+ }
3820
+
3821
+ .tds-number-stepper-description{
3896
3822
  display:flex;
3897
3823
  gap:var(--t-spacing-half);
3898
3824
  align-items:flex-start;
3899
3825
  margin:0;
3900
3826
  font-size:var(--t-font-size-sm);
3901
3827
  line-height:1.35;
3902
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3828
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3903
3829
  cursor:text;
3904
3830
  }
3905
3831
 
3906
- .tds-combo-box-description-invalid-icon{
3907
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3832
+ .tds-number-stepper-description-invalid-icon{
3833
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3908
3834
  flex-shrink:0;
3909
3835
  margin-block-start:calc(.5lh - .5em);
3910
3836
  line-height:1.35;
@@ -4058,19 +3984,19 @@ a[class="tds-btn"]{
4058
3984
  line-height:1.35;
4059
3985
  }
4060
3986
 
4061
- .tds-number-stepper{
4062
- --tds-number-stepper-border-color:var(--t-form-border-color);
4063
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4064
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4065
- --tds-number-stepper-background-color:var(--t-form-background-color);
4066
- --tds-number-stepper-color:var(--t-form-color);
4067
- --tds-number-stepper-font-size:var(--t-font-size-md);
4068
- --tds-number-stepper-min-height:var(--t-container-size-md);
4069
- --tds-number-stepper-padding-block:6px;
4070
- --tds-number-stepper-button-offset:4px;
4071
- --tds-number-stepper-button-gap:2px;
4072
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4073
- --tds-number-stepper-description-invalid-icon-display:none;
3987
+ .tds-date-picker{
3988
+ --tds-date-picker-border-color:var(--t-form-border-color);
3989
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3990
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3991
+ --tds-date-picker-background-color:var(--t-form-background-color);
3992
+ --tds-date-picker-color:var(--t-form-color);
3993
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3994
+ --tds-date-picker-font-size:var(--t-font-size-md);
3995
+ --tds-date-picker-min-height:var(--t-container-size-md);
3996
+ --tds-date-picker-padding-block:6px;
3997
+ --tds-date-picker-button-offset:4px;
3998
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3999
+ --tds-date-picker-description-invalid-icon-display:none;
4074
4000
 
4075
4001
  position:relative;
4076
4002
  display:flex;
@@ -4078,216 +4004,290 @@ a[class="tds-btn"]{
4078
4004
  gap:var(--t-spacing-half);
4079
4005
  }
4080
4006
 
4081
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4007
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
4082
4008
  margin-left:.25ch;
4083
4009
  color:var(--t-text-color-status-error);
4084
4010
  content:"*";
4085
4011
  }
4086
4012
 
4087
- .tds-number-stepper[data-invalid]{
4088
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4089
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4090
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4091
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4092
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4093
- --tds-number-stepper-description-invalid-icon-display:inline-block;
4013
+ .tds-date-picker[data-invalid]{
4014
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
4015
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4016
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4017
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
4018
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
4019
+ --tds-date-picker-description-invalid-icon-display:inline-block;
4094
4020
  }
4095
4021
 
4096
- .tds-number-stepper[data-disabled]{
4097
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4098
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4099
- --tds-number-stepper-color:var(--t-form-color-disabled);
4022
+ .tds-date-picker[data-disabled]{
4023
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4024
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4025
+ --tds-date-picker-color:var(--t-form-color-disabled);
4026
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4100
4027
  }
4101
4028
 
4102
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4103
- color:var(--t-form-color-disabled);
4104
- }
4105
-
4106
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4029
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
4107
4030
  cursor:not-allowed;
4108
4031
  }
4109
4032
 
4110
- .tds-number-stepper--lg{
4111
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4112
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4113
- --tds-number-stepper-button-offset:5px;
4114
- --tds-number-stepper-button-gap:4px;
4033
+ .tds-date-picker--lg{
4034
+ --tds-date-picker-min-height:var(--t-container-size-lg);
4035
+ --tds-date-picker-font-size:var(--t-font-size-lg);
4036
+ --tds-date-picker-button-offset:5px;
4115
4037
  }
4116
4038
 
4117
- .tds-number-stepper-label{
4039
+ .tds-date-picker-label{
4118
4040
  font-size:var(--t-font-size-md);
4119
4041
  font-weight:var(--t-font-weight-normal);
4120
4042
  color:var(--t-text-color);
4121
4043
  cursor:default;
4122
4044
  }
4123
4045
 
4124
- .tds-number-stepper-field{
4046
+ .tds-date-picker-field{
4125
4047
  display:flex;
4126
- gap:var(--tds-number-stepper-button-gap);
4127
4048
  align-items:center;
4128
4049
  inline-size:100%;
4129
- min-block-size:var(--tds-number-stepper-min-height);
4050
+ min-block-size:var(--tds-date-picker-min-height);
4130
4051
  font-family:inherit;
4131
- font-size:var(--tds-number-stepper-font-size);
4052
+ font-size:var(--tds-date-picker-font-size);
4132
4053
  line-height:1;
4133
- color:var(--tds-number-stepper-color);
4054
+ color:var(--tds-date-picker-color);
4134
4055
  -webkit-appearance:none;
4135
4056
  -moz-appearance:none;
4136
4057
  appearance:none;
4137
- cursor:default;
4058
+ cursor:text;
4138
4059
  outline:var(--t-focus-ring-width) solid transparent;
4139
4060
  outline-offset:0;
4140
- background-color:var(--tds-number-stepper-background-color);
4141
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4061
+ background-color:var(--tds-date-picker-background-color);
4062
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4142
4063
  border-radius:var(--t-form-border-radius);
4143
4064
  }
4144
4065
 
4145
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4146
- border-color:var(--tds-number-stepper-border-color-hover);
4066
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4067
+ border-color:var(--tds-date-picker-border-color-hover);
4147
4068
  }
4148
4069
 
4149
- .tds-number-stepper-field[data-focus-within]{
4070
+ .tds-date-picker-field[data-focus-within]{
4150
4071
  outline-color:var(--t-focus-ring-color);
4151
4072
  outline-offset:var(--t-focus-ring-offset);
4152
- border-color:var(--tds-number-stepper-border-color-active);
4073
+ border-color:var(--tds-date-picker-border-color-active);
4074
+ }
4075
+
4076
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4077
+ color:var(--t-form-color-readonly);
4078
+ background-color:var(--t-form-background-color-readonly);
4079
+ border-color:var(--t-form-border-color-readonly);
4153
4080
  }
4154
4081
 
4155
- .tds-number-stepper-field:has([readonly]){
4156
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4157
- }
4082
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4083
+ border-color:var(--t-form-border-color-readonly);
4084
+ }
4158
4085
 
4159
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
4086
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4087
+ outline-color:var(--t-focus-ring-color);
4088
+ outline-offset:var(--t-focus-ring-offset);
4160
4089
  border-color:var(--t-form-border-color-hover);
4161
4090
  }
4162
4091
 
4163
- .tds-number-stepper-input{
4164
- display:flex;
4092
+ .tds-date-picker-input{
4165
4093
  flex:1;
4166
- align-items:center;
4167
- min-inline-size:0;
4168
- padding-block:var(--tds-number-stepper-padding-block);
4169
- padding-inline:var(--t-spacing-1);
4170
- font-family:inherit;
4171
- font-size:inherit;
4172
- color:inherit;
4173
- outline:0;
4174
- background:transparent;
4175
- border:0;
4094
+ padding-block:var(--tds-date-picker-padding-block);
4095
+ padding-inline-start:var(--t-spacing-1);
4096
+ font-variant-numeric:tabular-nums;
4176
4097
  }
4177
4098
 
4178
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4179
- margin:0;
4180
- -webkit-appearance:none;
4181
- appearance:none;
4182
- }
4183
-
4184
- .tds-number-stepper-button{
4185
- flex-shrink:0;
4186
- align-self:center;
4187
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4188
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4189
- padding:0;
4099
+ .tds-date-picker-segment{
4100
+ padding-inline:2px;
4101
+ caret-color:transparent;
4102
+ border-radius:var(--t-border-radius-sm);
4190
4103
  }
4191
4104
 
4192
- .tds-number-stepper-button:last-of-type{
4193
- margin-inline-end:var(--tds-number-stepper-button-offset);
4105
+ .tds-date-picker-segment[data-placeholder]{
4106
+ color:var(--tds-date-picker-placeholder-color);
4194
4107
  }
4195
4108
 
4196
- .tds-number-stepper-description{
4109
+ .tds-date-picker-segment[data-focused]{
4110
+ color:var(--t-text-color-inverted);
4111
+ outline:0;
4112
+ background:var(--t-fill-color-interaction);
4113
+ }
4114
+
4115
+ .tds-date-picker-segment-separator{
4116
+ padding-inline:0;
4117
+ color:var(--tds-date-picker-placeholder-color);
4118
+ }
4119
+
4120
+ .tds-date-picker-description{
4197
4121
  display:flex;
4198
4122
  gap:var(--t-spacing-half);
4199
4123
  align-items:flex-start;
4200
4124
  margin:0;
4201
4125
  font-size:var(--t-font-size-sm);
4202
4126
  line-height:1.35;
4203
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4127
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4204
4128
  cursor:text;
4205
4129
  }
4206
4130
 
4207
- .tds-number-stepper-description-invalid-icon{
4208
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4131
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4132
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
4133
+ flex-shrink:0;
4134
+ margin-block-start:calc(.5lh - .5em);
4135
+ line-height:1.35;
4136
+ }
4137
+
4138
+ .tds-date-picker-button{
4209
4139
  flex-shrink:0;
4210
- margin-block-start:calc(.5lh - .5em);
4211
- line-height:1.35;
4140
+ align-self:center;
4141
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4142
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4143
+ padding:0;
4144
+ margin-inline-end:var(--tds-date-picker-button-offset);
4212
4145
  }
4213
4146
 
4214
- .tds-checkbox-group{
4215
- --tds-checkbox-group-font-size:var(--t-font-size-md);
4216
- --tds-checkbox-group-line-height:1.4;
4217
- --tds-checkbox-group-gap:var(--t-spacing-1);
4147
+ .tds-date-picker-popover{
4148
+ padding:var(--t-spacing-2);
4149
+ background:var(--t-surface-color-card);
4150
+ border:1px solid var(--t-border-color);
4151
+ border-radius:var(--t-border-radius);
4152
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4153
+ }
4218
4154
 
4219
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4155
+ .tds-date-picker-popover[data-entering]{
4156
+ animation:tds-date-picker-popover-enter 160ms ease;
4157
+ }
4220
4158
 
4221
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4222
- --tds-checkbox-group-description-line-height:1.35;
4223
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4224
- --tds-checkbox-group-description-invalid-icon-display:none;
4159
+ .tds-date-picker-popover[data-exiting]{
4160
+ animation:tds-date-picker-popover-exit 130ms ease;
4161
+ }
4162
+
4163
+ @keyframes tds-date-picker-popover-enter{
4164
+ from{
4165
+ opacity:0;
4166
+ transform:translateY(-8px);
4167
+ }
4168
+ }
4169
+
4170
+ @keyframes tds-date-picker-popover-exit{
4171
+ to{
4172
+ opacity:0;
4173
+ transform:translateY(-8px);
4174
+ }
4175
+ }
4176
+
4177
+ @media (prefers-reduced-motion: reduce){
4178
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4179
+ animation:none;
4180
+ }
4181
+ }
4182
+
4183
+ .tds-date-picker-calendar{
4184
+ inline-size:-moz-fit-content;
4185
+ inline-size:fit-content;
4186
+ }
4187
+
4188
+ .tds-date-picker-calendar-header{
4225
4189
  display:flex;
4226
- flex-direction:column;
4227
- gap:var(--tds-checkbox-group-gap);
4228
- padding:0;
4190
+ align-items:center;
4191
+ justify-content:space-between;
4192
+ padding-block-end:var(--t-spacing-1);
4193
+ }
4194
+
4195
+ .tds-date-picker-calendar-title{
4196
+ flex:1;
4229
4197
  margin:0;
4198
+ font-size:var(--t-font-size-md);
4199
+ font-weight:var(--t-font-weight-semibold);
4200
+ text-align:center;
4201
+ }
4230
4202
 
4231
- font-size:var(--tds-checkbox-group-font-size);
4232
- line-height:var(--tds-checkbox-group-line-height);
4203
+ .tds-date-picker-calendar-nav{
4204
+ display:flex;
4205
+ align-items:center;
4206
+ justify-content:center;
4207
+ padding:var(--t-spacing-half);
4208
+ color:var(--t-text-color);
4209
+ cursor:default;
4210
+ outline:0;
4211
+ background:transparent;
4233
4212
  border:0;
4213
+ border-radius:var(--t-border-radius-sm);
4234
4214
  }
4235
4215
 
4236
- .tds-checkbox-group legend{
4237
- padding:0;
4238
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4216
+ .tds-date-picker-calendar-nav[data-hovered]{
4217
+ background:var(--t-fill-color-neutral-070);
4239
4218
  }
4240
4219
 
4241
- .tds-checkbox-group:has(.tds-checkbox-group-description){
4242
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4220
+ .tds-date-picker-calendar-nav[data-pressed]{
4221
+ background:var(--t-fill-color-button-interaction-ghost-active);
4243
4222
  }
4244
4223
 
4245
- .tds-checkbox-group[aria-invalid="true"]{
4246
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4247
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
4224
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4225
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4226
+ outline-offset:var(--t-focus-ring-offset);
4248
4227
  }
4249
4228
 
4250
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4251
- margin-left:.25ch;
4252
- color:var(--t-text-color-status-error);
4253
- content:"*";
4254
- }
4229
+ .tds-date-picker-calendar-nav[data-disabled]{
4230
+ color:var(--t-form-color-disabled);
4231
+ cursor:not-allowed;
4232
+ }
4255
4233
 
4256
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4257
- content:none;
4258
- }
4234
+ .tds-date-picker-calendar-grid{
4235
+ border-collapse:collapse;
4236
+ }
4259
4237
 
4260
- .tds-checkbox-group-fields{
4261
- display:flex;
4262
- flex-direction:column;
4263
- gap:var(--tds-checkbox-group-gap);
4264
- align-items:flex-start;
4238
+ .tds-date-picker-calendar-header-cell{
4239
+ padding-block:var(--t-spacing-half);
4240
+ font-size:var(--t-font-size-sm);
4241
+ font-weight:var(--t-font-weight-normal);
4242
+ color:var(--t-text-color-secondary);
4243
+ text-align:center;
4265
4244
  }
4266
4245
 
4267
- .tds-checkbox-group-description{
4246
+ .tds-date-picker-calendar-cell{
4268
4247
  display:flex;
4269
- gap:var(--t-spacing-half);
4270
- align-items:flex-start;
4271
- margin:0;
4272
- font-size:var(--tds-checkbox-group-description-font-size);
4273
- line-height:var(--tds-checkbox-group-description-line-height);
4274
- color:var(--tds-checkbox-group-description-color);
4275
- cursor:text;
4248
+ align-items:center;
4249
+ justify-content:center;
4250
+ inline-size:2.25rem;
4251
+ block-size:2.25rem;
4252
+ font-size:var(--t-font-size-md);
4253
+ color:var(--t-text-color);
4254
+ cursor:default;
4255
+ outline:0;
4256
+ border-radius:var(--t-border-radius-sm);
4276
4257
  }
4277
4258
 
4278
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4279
- display:var(--tds-checkbox-group-description-invalid-icon-display);
4280
- flex-shrink:0;
4281
- margin-top:calc(.5lh - .5em);
4282
- line-height:var(--tds-checkbox-group-description-line-height);
4259
+ .tds-date-picker-calendar-cell[data-hovered]{
4260
+ background:var(--t-fill-color-neutral-070);
4283
4261
  }
4284
4262
 
4285
- .tds-checkbox-group--sm{
4286
- --tds-checkbox-group-line-height:1.35;
4287
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
4288
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4289
- --tds-checkbox-group-description-line-height:1.3;
4290
- }
4263
+ .tds-date-picker-calendar-cell[data-pressed]{
4264
+ background:var(--t-fill-color-button-interaction-ghost-active);
4265
+ }
4266
+
4267
+ .tds-date-picker-calendar-cell[data-selected]{
4268
+ color:var(--t-text-color-inverted);
4269
+ background:var(--t-fill-color-interaction);
4270
+ }
4271
+
4272
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4273
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4274
+ outline-offset:var(--t-focus-ring-offset);
4275
+ }
4276
+
4277
+ .tds-date-picker-calendar-cell[data-unavailable]{
4278
+ color:var(--t-text-color-secondary);
4279
+ text-decoration:line-through;
4280
+ cursor:not-allowed;
4281
+ }
4282
+
4283
+ .tds-date-picker-calendar-cell[data-disabled]{
4284
+ color:var(--t-form-color-disabled);
4285
+ cursor:not-allowed;
4286
+ }
4287
+
4288
+ .tds-date-picker-calendar-cell[data-outside-month]{
4289
+ color:var(--t-text-color-secondary);
4290
+ }
4291
4291
 
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);