@planningcenter/tapestry 3.2.1-rc.9 → 3.2.2-rc.0

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