@planningcenter/tapestry 4.0.0-rc.21 → 4.0.0-rc.22

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 (12) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +14 -6
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +5 -2
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/components/DataTable/ResultsCount.d.ts +4 -1
  6. package/dist/components/DataTable/ResultsCount.d.ts.map +1 -1
  7. package/dist/components/DataTable/ResultsCount.js.map +1 -1
  8. package/dist/reactRender.css +1401 -1401
  9. package/dist/reactRender.css.map +1 -1
  10. package/dist/reactRenderLegacy.css +1401 -1401
  11. package/dist/reactRenderLegacy.css.map +1 -1
  12. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,1391 +677,1268 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- @layer t-critical{
681
- tds-page-header:not(.hydrated){
682
- display:none;
683
- }
680
+
681
+ @media (prefers-reduced-motion: no-preference){
682
+
683
+ :root{
684
+ interpolate-size:allow-keywords;
684
685
  }
686
+ }
685
687
 
686
- @layer t-component{
687
- .tds-page-header{
688
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
- --tds-page-header-color:var(--t-text-color);
691
- --tds-page-header-bottom-border-color:transparent;
692
- --tds-page-header-headline-color:var(--t-text-color-headline);
693
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
- --tds-page-header-padding-x:var(--t-spacing-2);
695
- --tds-page-header-padding-y:var(--t-spacing-2);
696
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
- --tds-page-header-nav-gap:var(--t-spacing-1);
698
- --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%);
699
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
- --tds-page-header-nav-item-border-width:1px;
688
+ @layer tds-component{
689
+ tds-sidenav,
690
+ .tds-sidenav{
691
+ --tds-sidenav-indent:12px;
692
+ --tds-sidenav-item-depth:0;
704
693
 
705
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
694
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
707
695
 
708
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
696
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
697
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
698
+ --tds-sidenav-collapse-closed-opacity:0;
699
+ --tds-sidenav-collapse-open-opacity:1;
700
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
+ --tds-sidenav-collapse-open-transform:translateY(0);
711
702
 
712
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
703
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
714
707
 
715
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
708
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
+ --tds-sidenav-item-nested-background-selected:transparent;
718
711
 
719
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
724
- }
712
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
725
715
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
716
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
728
718
  }
729
719
 
730
- @supports (color: light-dark(#fff, #000)){
731
- .tds-page-header{
732
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
720
+ @media (prefers-reduced-motion: reduce){
721
+ tds-sidenav,
722
+ .tds-sidenav{
723
+ --tds-sidenav-collapse-transition-enter:none;
724
+ --tds-sidenav-collapse-transition-exit:none;
725
+ --tds-sidenav-collapse-closed-transform:none;
726
+ --tds-sidenav-collapse-open-transform:none;
727
+ }
734
728
  }
729
+
730
+ .tds-sidenav--theme-gray{
731
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
735
736
  }
737
+ }
736
738
 
737
- @media (min-width: 600px){
738
- .tds-page-header{
739
- --tds-page-header-background-color:var(--t-surface-color-canvas);
740
- --tds-page-header-color:var(--t-text-color-secondary);
741
- --tds-page-header-bottom-border-color:var(--t-border-color);
742
- --tds-page-header-padding-x:var(--t-spacing-3);
743
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
- --tds-page-header-nav-gap:var(--t-spacing-half);
745
- --tds-page-header-nav-background:transparent;
746
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
- --tds-page-header-nav-item-border-width:1px;
748
- --tds-page-header-nav-item-color:var(--t-text-color);
749
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
- }
739
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
+ display:flex;
741
+ }
742
+
743
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
+ flex-direction:column;
745
+ gap:var(--t-spacing-half);
746
+ width:100%;
756
747
  }
748
+
749
+ .tds-sidenav-section-list{
750
+ width:100%;
751
+ padding:0;
752
+ margin:0;
753
+ list-style:none;
757
754
  }
758
755
 
759
- .tds-page-header{
756
+ .tds-sidenav-section-header{
760
757
  display:flex;
761
- flex-direction:column;
762
- padding-top:var(--tds-page-header-padding-y);
763
- color:var(--tds-page-header-color);
764
- background:var(--tds-page-header-background-color);
765
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
758
+ align-items:baseline;
759
+ justify-content:space-between;
760
+ padding-top:var(--t-spacing-2);
766
761
  }
767
762
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
763
+ .tds-sidenav-section-header h2{
764
+ margin:0;
765
+ font-size:var(--t-font-size-sm);
766
+ font-weight:var(--t-font-weight-semibold);
767
+ line-height:1.35;
768
+ color:var(--t-text-color-secondary);
769
+ text-transform:uppercase;
770
770
  }
771
771
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
772
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
+ padding-top:0;
774
774
  }
775
775
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
776
+ .tds-sidenav-section-header [slot="label-actions"]{
777
+ display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
778
780
  }
779
781
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
782
+ .tds-sidenav-section [slot="section-actions"]{
783
+ display:flex;
784
+ gap:12px;
785
+ align-items:center;
786
+ min-height:42px;
787
+ padding:var(--t-spacing-1) 0;
788
+ }
789
+
790
+ .tds-sidenav-section-list,
791
+ .tds-sidenav-item{
792
+ width:100%;
793
+ padding:0;
794
+ margin:0;
795
+ }
796
+
797
+ .tds-sidenav-item :is(a,button){
798
+ position:relative;
781
799
  display:flex;
782
- flex-flow:row wrap;
783
- gap:var(--t-spacing-half) var(--t-spacing-1);
784
- align-items:flex-start;
785
- justify-content:flex-start;
786
- min-width:0;
800
+ gap:12px;
801
+ align-items:center;
802
+ width:100%;
803
+ padding:12px;
804
+ overflow:hidden;
805
+ font-size:var(--t-font-size-sm);
806
+ line-height:18px;
807
+ color:var(--t-text-color-headline);
808
+ white-space:nowrap;
809
+ text-decoration:none;
810
+ -webkit-appearance:none;
811
+ -moz-appearance:none;
812
+ appearance:none;
813
+ cursor:pointer;
814
+ background-color:var(--tds-sidenav-item-background, transparent);
815
+ border:0;
816
+ border-radius:var(--t-border-radius);
817
+ transition:var(--tds-sidenav-item-transition);
787
818
  }
788
819
 
789
- :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{
790
- display:flex;
791
- gap:var(--tds-page-header-nav-gap);
792
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
- margin:0 0 -1px;
794
- overflow:auto;
795
- list-style:none;
796
- background:var(--tds-page-header-nav-background);
820
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
+ display:block;
822
+ flex:1;
823
+ overflow:hidden;
824
+ text-overflow:ellipsis;
825
+ text-align:left;
826
+ white-space:nowrap;
797
827
  }
798
828
 
799
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
- position:relative;
801
- display:inline-flex;
802
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
- font-size:var(--t-font-size-sm);
804
- line-height:22px;
805
- color:var(--tds-page-header-nav-item-color);
806
- white-space:nowrap;
829
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
+ color:var(--t-text-color-headline);
807
832
  text-decoration:none;
808
- -webkit-appearance:none;
809
- -moz-appearance:none;
810
- appearance:none;
811
- cursor:pointer;
812
- outline-offset:-2px;
813
- background-color:var(--tds-page-header-nav-item-background-color);
814
- background-clip:padding-box;
815
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
818
833
  }
819
834
 
820
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
835
+ :is(.tds-sidenav-item :is(a,button)):active{
836
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
+ }
838
+
839
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
+ overflow:hidden;
841
+ color:var(--tds-sidenav-item-icon-color);
842
+ }
843
+
844
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
845
+ display:block;
846
+ width:var(--tds-sidenav-item-icon-size);
847
+ height:var(--tds-sidenav-item-icon-size);
825
848
  }
826
849
 
827
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
- }
850
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
+ --tds-sidenav-indent:19px;
852
+ }
833
853
 
834
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
- background-color:var(--tds-page-header-nav-item-background-color-active);
836
- border-color:var(--tds-page-header-nav-item-border-color-active);
837
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
- }
854
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
+ visibility:visible;
856
+ block-size:auto;
857
+ opacity:1;
858
+ }
839
859
 
840
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
- color:var(--tds-page-header-nav-item-color-disabled);
843
- cursor:not-allowed;
844
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
- opacity:1;
846
- }
860
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
847
863
 
848
- @media (min-width: 600px){
849
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
- position:absolute;
851
- inset:auto -1px -1px;
852
- height:1px;
853
- pointer-events:none;
854
- content:"";
855
- background-color:var(--tds-page-header-bottom-border-color);
856
- }
857
- }
864
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
+ font-weight:var(--t-font-weight-semibold);
866
+ }
858
867
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
868
+ .tds-sidenav-item:has(.tds-sidenav-section){
869
+ display:flex;
870
+ flex-direction:column;
871
+ gap:var(--t-spacing-half);
872
+ }
873
+
874
+ .tds-sidenav-item .tds-sidenav-section-list{
875
+ --tds-sidenav-item-depth:1;
876
+ gap:0;
877
+ }
878
+
879
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
+ visibility:hidden;
881
+ block-size:0;
882
+ overflow-y:clip;
883
+ opacity:0;
884
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
861
885
  }
862
886
 
863
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
887
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
+ --tds-sidenav-item-depth:2;
889
+ }
890
+
891
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
+ min-height:var(--t-element-size-2xl);
893
+ padding-block:9px;
894
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
+ line-height:1;
896
+ background-color:transparent;
897
+ }
898
+
899
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
+ position:absolute;
901
+ top:0;
902
+ bottom:0;
903
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
+ width:2px;
905
+ content:"";
906
+ background-color:var(--tds-sidenav-item-nested-border-color);
907
+ transition:var(--tds-sidenav-item-transition);
866
908
  }
867
909
 
868
- :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{
910
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
869
911
  position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
912
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
+ z-index:-1;
914
+ height:100%;
874
915
  content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
916
+ background-color:var(--tds-sidenav-item-nested-background);
917
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
+ transition:var(--tds-sidenav-item-transition);
877
919
  }
878
920
 
879
- @media (prefers-reduced-motion: no-preference){
880
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
- animation:indicator-pulse 1.25s ease infinite;
882
- }
921
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
+ display:block;
923
+ text-align:left;
924
+ white-space:normal;
883
925
  }
884
926
 
885
- .tds-page-header__title-bar{
886
- display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
889
- align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
892
- }
927
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
928
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
930
+ }
893
931
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
932
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
934
+ }
897
935
 
898
- .tds-page-header__primary{
936
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
+ font-weight:var(--t-font-weight-medium);
939
+ }
940
+
941
+ .tds-sidenav-responsive-header{
942
+ display:flex;
943
+ gap:var(--t-spacing-2);
944
+ align-items:center;
899
945
  width:100%;
900
946
  }
901
947
 
902
- .tds-page-header__primary h1{
948
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
+ order:0;
950
+ }
951
+
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
+ flex:1;
954
+ order:1;
903
955
  margin:0;
904
- font-size:var(--tds-page-header-headline-font-size);
905
- font-weight:var(--t-font-weight-normal);
906
- line-height:32px;
907
- color:var(--tds-page-header-headline-color);
908
- overflow-wrap:break-word;
956
+ font-size:var(--t-font-size-lg);
957
+ font-weight:var(--t-font-weight-medium);
958
+ color:var(--t-text-color-headline);
909
959
  }
910
960
 
911
- @media (min-width: 960px){
912
- .tds-page-header__primary{
913
- flex:1 1 max-content;
914
- width:auto;
915
- min-width:0;
916
- max-width:100%;
961
+ @media (max-width: 719px){
962
+ .tds-sidenav-collapse{
963
+ z-index:10001;
964
+ display:none;
965
+ max-width:min(448px, calc(100vw - 48px));
966
+ padding:0;
967
+ margin:12px 0;
968
+ position-area:bottom span-right;
969
+ overflow:hidden;
970
+ outline:0;
971
+ background:var(--t-surface-color-card);
972
+ border:0;
973
+ border-radius:6px;
974
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
+ opacity:var(--tds-sidenav-collapse-open-opacity);
976
+ transform:var(--tds-sidenav-collapse-open-transform);
977
+ transition:var(--tds-sidenav-collapse-transition-enter);
978
+ will-change:transform;
917
979
  }
918
980
 
919
- .tds-page-header__title-bar,
920
- .tds-page-header--profile .tds-page-header__title-bar{
921
- flex-flow:row nowrap;
922
- row-gap:12px;
923
- align-items:flex-start;
981
+ .tds-sidenav-scroll-container{
982
+ --webkit-overflow-scrolling:touch;
983
+ display:block;
984
+ width:100%;
985
+ height:-moz-fit-content;
986
+ height:fit-content;
987
+ padding:var(--t-spacing-2);
988
+ overflow-y:auto;
924
989
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
927
- }
928
990
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
991
+ .tds-sidenav-item :is(a, button) :is(.prefix){
992
+ display:none;
993
+ }
994
+ @supports selector(:popover-open){
995
+ .tds-sidenav-collapse:popover-open{
996
+ display:flex;
931
997
  }
932
- }
933
998
 
934
- .tds-page-header-phone,
935
- .tds-page-header-email{
936
- color:var(--tds-page-header-color);
937
- white-space:nowrap;
938
- }
939
- .tds-page-header-email{
940
- max-width:100%;
941
- overflow:hidden;
942
- text-overflow:ellipsis;
943
- }
999
+ .tds-sidenav-collapse:not(:popover-open){
1000
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
+ transition:var(--tds-sidenav-collapse-transition-exit);
1002
+ }
944
1003
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
1004
+ @starting-style{
1005
+ .tds-sidenav-collapse:popover-open{
1006
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
+ transform:var(--tds-sidenav-collapse-closed-transform);
1008
+ }
1009
+ }
949
1010
  }
1011
+ @supports not selector(:popover-open){
1012
+ .tds-sidenav-collapse.\:popover-open{
1013
+ display:flex;
1014
+ }
950
1015
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
1016
+ .tds-sidenav-collapse:not(.\:popover-open){
1017
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
+ transition:var(--tds-sidenav-collapse-transition-exit);
1019
+ }
954
1020
  }
955
1021
  }
956
1022
 
957
- .tds-checkbox-group{
958
- --tds-checkbox-group-font-size:var(--t-font-size-md);
959
- --tds-checkbox-group-line-height:1.4;
960
- --tds-checkbox-group-gap:var(--t-spacing-1);
961
-
962
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
963
- --tds-checkbox-group-description-line-height:1.35;
964
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
965
- --tds-checkbox-group-description-invalid-icon-display:none;
966
- display:flex;
967
- flex-direction:column;
968
- gap:0;
969
- padding:0;
970
- margin:0;
971
-
972
- font-size:var(--tds-checkbox-group-font-size);
973
- line-height:var(--tds-checkbox-group-line-height);
974
- border:0;
1023
+ @media (min-width: 720px){
1024
+ .tds-sidenav-responsive-header{
1025
+ display:none;
1026
+ }
975
1027
  }
976
1028
 
977
- .tds-checkbox-group legend{
978
- float:left;
979
- padding:0;
980
- margin:0;
981
- }
1029
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
+ display:none;
1031
+ }
982
1032
 
983
- .tds-checkbox-group[aria-invalid="true"]{
984
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
985
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
986
- }
987
-
988
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
989
- margin-left:.25ch;
990
- color:var(--t-text-color-status-error);
991
- content:"*";
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
+ display:block;
992
1035
  }
993
1036
 
994
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
995
- content:none;
1037
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
+ display:flex;
1039
+ flex-direction:column;
996
1040
  }
997
1041
 
998
- .tds-checkbox-group-fields{
999
- display:flex;
1000
- flex-direction:column;
1001
- gap:var(--tds-checkbox-group-gap);
1002
- align-items:flex-start;
1003
- margin-top:var(--t-spacing-1);
1004
- }
1005
-
1006
- .tds-checkbox-group-description{
1007
- display:flex;
1008
- gap:var(--t-spacing-half);
1009
- align-items:flex-start;
1010
- margin:var(--t-spacing-fourth) 0 0;
1011
- font-size:var(--tds-checkbox-group-description-font-size);
1012
- line-height:var(--tds-checkbox-group-description-line-height);
1013
- color:var(--tds-checkbox-group-description-color);
1014
- cursor:text;
1015
- }
1016
-
1017
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1018
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1019
- flex-shrink:0;
1020
- margin-top:calc(.5lh - .5em);
1021
- line-height:var(--tds-checkbox-group-description-line-height);
1042
+ @layer t-critical{
1043
+ tds-page-header:not(.hydrated){
1044
+ display:none;
1022
1045
  }
1023
-
1024
- .tds-checkbox-group--sm{
1025
- --tds-checkbox-group-line-height:1.35;
1026
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1027
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1028
- --tds-checkbox-group-description-line-height:1.3;
1029
1046
  }
1030
1047
 
1031
- .tds-checkbox{
1032
- --tds-checkbox-font-size:var(--t-font-size-md);
1033
- --tds-checkbox-cursor:pointer;
1034
- --tds-checkbox-line-height:1.4;
1035
- --tds-checkbox-transition-property:background-color, border-color;
1036
-
1037
- --tds-checkbox-input-size:var(--t-element-size-md);
1038
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1039
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1040
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1041
-
1042
- --tds-checkbox-input-icon:none;
1043
- --tds-checkbox-input-icon-visibility:hidden;
1044
- --tds-checkbox-input-icon-opacity:0;
1045
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1046
-
1047
- --tds-checkbox-label-color:var(--t-form-color);
1048
-
1049
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1050
- --tds-checkbox-description-line-height:1.35;
1051
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1052
- --tds-checkbox-description-invalid-icon-display:none;
1053
-
1054
- position:relative;
1055
- display:inline-grid;
1056
- grid-template-columns:auto;
1057
- grid-auto-columns:1fr;
1058
- gap:var(--t-spacing-fourth) 0;
1059
- line-height:var(--tds-checkbox-line-height);
1060
- -webkit-user-select:none;
1061
- -moz-user-select:none;
1062
- user-select:none;
1063
- }
1064
-
1065
- .tds-checkbox label{
1066
- grid-area:1 / 2;
1067
- padding-inline-start:var(--t-spacing-1);
1068
- font-size:var(--tds-checkbox-font-size);
1069
- font-weight:var(--t-font-weight-normal);
1070
- color:var(--tds-checkbox-label-color);
1071
- cursor:var(--tds-checkbox-cursor);
1072
- }
1073
-
1074
- .tds-checkbox tds-indeterminate{
1075
- display:flex;
1076
- }
1077
-
1078
- .tds-checkbox input[type="checkbox"]{
1079
- position:relative;
1080
- width:1em;
1081
- height:1em;
1082
- margin:calc((1lh - 1em) / 2) 0 0;
1083
- font-size:var(--tds-checkbox-font-size);
1084
- line-height:inherit;
1085
- -webkit-appearance:none;
1086
- -moz-appearance:none;
1087
- appearance:none;
1088
- cursor:var(--tds-checkbox-cursor);
1089
- background-color:var(--tds-checkbox-input-background-color);
1090
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1091
- border-radius:var(--tds-checkbox-input-border-radius);
1092
- transition-timing-function:var(--t-ease-in-out);
1093
- transition-duration:var(--t-duration-200);
1094
- transition-property:var(--tds-checkbox-transition-property);
1095
- }
1096
-
1097
- :is(.tds-checkbox input[type="checkbox"])::before{
1098
- position:absolute;
1099
- top:50%;
1100
- left:50%;
1101
- visibility:var(--tds-checkbox-input-icon-visibility);
1102
- width:100%;
1103
- height:100%;
1104
- content:"";
1105
- background-color:var(--tds-checkbox-input-icon-fill);
1106
- border-radius:var(--tds-checkbox-input-border-radius);
1107
- opacity:var(--tds-checkbox-input-icon-opacity);
1108
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1109
- mask-image:var(--tds-checkbox-input-icon);
1110
- -webkit-mask-repeat:no-repeat;
1111
- mask-repeat:no-repeat;
1112
- -webkit-mask-size:contain;
1113
- mask-size:contain;
1114
- transform:translate(-50%, -50%);
1115
- }
1048
+ @layer t-component{
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1051
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1052
+ --tds-page-header-color:var(--t-text-color);
1053
+ --tds-page-header-bottom-border-color:transparent;
1054
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1055
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1056
+ --tds-page-header-padding-x:var(--t-spacing-2);
1057
+ --tds-page-header-padding-y:var(--t-spacing-2);
1058
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1059
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1060
+ --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%);
1061
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1062
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1063
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1064
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1065
+ --tds-page-header-nav-item-border-width:1px;
1116
1066
 
1117
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1118
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1119
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1120
- }
1067
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1068
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1121
1069
 
1122
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1123
- outline:var(--t-focus-ring-outline);
1124
- outline-offset:var(--t-focus-ring-offset);
1125
- }
1070
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1071
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1072
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1126
1073
 
1127
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1128
- pointer-events:none;
1129
- }
1074
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1075
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1130
1076
 
1131
- @media (prefers-reduced-motion: reduce){
1077
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1078
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1079
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1132
1080
 
1133
- .tds-checkbox input[type="checkbox"]{
1134
- --tds-checkbox-transition-property:none;
1081
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1082
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1083
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1084
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1085
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1135
1086
  }
1136
- }
1137
1087
 
1138
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1139
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1140
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1141
- --tds-checkbox-input-icon-visibility:visible;
1142
- --tds-checkbox-input-icon-opacity:1;
1088
+ .tds-page-header--profile{
1089
+ --tds-page-header-padding-y:20px;
1143
1090
  }
1144
1091
 
1145
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1146
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1147
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1092
+ @supports (color: light-dark(#fff, #000)){
1093
+ .tds-page-header{
1094
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1095
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1148
1096
  }
1149
-
1150
- .tds-checkbox:has(input:checked){
1151
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1152
- }
1153
-
1154
- .tds-checkbox:has(input:indeterminate){
1155
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1156
1097
  }
1157
1098
 
1158
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1159
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1160
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1161
- --tds-checkbox-description-invalid-icon-display:inline-block;
1162
- }
1163
-
1164
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1165
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1166
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1167
- }
1168
-
1169
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1170
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1171
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1172
- }
1173
-
1174
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1175
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1176
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1177
- }
1178
-
1179
- .tds-checkbox:has(input:required) label::after{
1180
- margin-left:.25ch;
1181
- color:var(--t-text-color-status-error);
1182
- content:"*";
1099
+ @media (min-width: 600px){
1100
+ .tds-page-header{
1101
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1102
+ --tds-page-header-color:var(--t-text-color-secondary);
1103
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1104
+ --tds-page-header-padding-x:var(--t-spacing-3);
1105
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1106
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1107
+ --tds-page-header-nav-background:transparent;
1108
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1109
+ --tds-page-header-nav-item-border-width:1px;
1110
+ --tds-page-header-nav-item-color:var(--t-text-color);
1111
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1112
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1113
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1114
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1115
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1116
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1183
1117
  }
1184
-
1185
- .tds-checkbox:has(input:disabled){
1186
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1187
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1188
-
1189
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1190
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1191
- --tds-checkbox-cursor:not-allowed;
1192
1118
  }
1119
+ }
1193
1120
 
1194
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1195
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1196
- }
1197
-
1198
- .tds-checkbox-description{
1121
+ .tds-page-header{
1199
1122
  display:flex;
1200
- grid-area:2 / 2;
1201
- gap:var(--t-spacing-half);
1202
- align-items:flex-start;
1203
- padding-inline-start:var(--t-spacing-1);
1204
- margin:0;
1205
- font-size:var(--tds-checkbox-description-font-size);
1206
- line-height:var(--tds-checkbox-description-line-height);
1207
- color:var(--tds-checkbox-description-color);
1208
- cursor:text;
1123
+ flex-direction:column;
1124
+ padding-top:var(--tds-page-header-padding-y);
1125
+ color:var(--tds-page-header-color);
1126
+ background:var(--tds-page-header-background-color);
1127
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1209
1128
  }
1210
1129
 
1211
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1212
- display:var(--tds-checkbox-description-invalid-icon-display);
1213
- flex-shrink:0;
1214
- margin-top:calc(.5lh - .5em);
1215
- line-height:var(--tds-checkbox-description-line-height);
1130
+ .tds-page-header:not(.has-nav){
1131
+ padding-bottom:var(--tds-page-header-padding-y);
1216
1132
  }
1217
1133
 
1218
- .tds-checkbox--sm{
1219
- --tds-checkbox-line-height:1.35;
1220
- --tds-checkbox-input-size:var(--t-element-size-sm);
1221
- --tds-checkbox-font-size:var(--t-font-size-sm);
1222
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1223
- --tds-checkbox-description-line-height:1.3;
1224
- }
1225
-
1226
- .tds-button-group{
1227
- display:inline-flex;
1228
- }
1229
- .tds-button-group > .tds-btn{
1230
- --tds-button-group-item-z-index:1;
1231
-
1232
- position:relative;
1233
- z-index:var(--tds-button-group-item-z-index);
1234
- border-radius:0;
1235
- }
1236
- :is(.tds-button-group > .tds-btn):not(:first-child){
1237
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1238
- }
1239
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1240
- position:absolute;
1241
- inset-block:calc(var(--tds-btn-border-width) * -1);
1242
- width:var(--tds-btn-border-width);
1243
- pointer-events:none;
1244
- content:"";
1245
- background-color:var(--t-border-color-white);
1246
- }
1247
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1248
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1249
- }
1250
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1251
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1252
- }
1253
- :is(.tds-button-group > .tds-btn):hover{
1254
- --tds-button-group-item-z-index:2;
1255
- }
1256
- :is(.tds-button-group > .tds-btn):focus-visible{
1257
- --tds-button-group-item-z-index:5;
1258
- }
1259
- .tds-button-group > .tds-btn:first-child{
1260
- border-start-start-radius:var(--tds-btn-border-radius);
1261
- border-end-start-radius:var(--tds-btn-border-radius);
1262
- }
1263
- .tds-button-group > .tds-btn:last-child{
1264
- border-start-end-radius:var(--tds-btn-border-radius);
1265
- border-end-end-radius:var(--tds-btn-border-radius);
1134
+ .tds-page-header.inactive{
1135
+ background:var(--tds-page-header-background-color-inactive);
1266
1136
  }
1267
1137
 
1268
- .tds-dropdown-popover{
1269
- min-inline-size:10rem;
1270
- max-inline-size:24rem;
1271
- padding:var(--t-spacing-1);
1272
- overflow:auto;
1273
- overscroll-behavior:none;
1274
- -webkit-user-select:none;
1275
- -moz-user-select:none;
1276
- user-select:none;
1277
- outline:0;
1278
- scrollbar-color:#0004 var(--t-surface-color-card);
1279
- scrollbar-width:thin;
1280
- background:var(--t-surface-color-card);
1281
- background-clip:padding-box;
1282
- border:1px solid var(--t-border-color);
1283
- border-radius:var(--t-border-radius);
1284
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1285
- }
1286
- .tds-dropdown-popover[data-entering]{
1287
- animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1288
- }
1289
- .tds-dropdown-popover[data-exiting]{
1290
- animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1291
- }
1292
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1293
- will-change:opacity, transform;
1138
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
+ width:100%;
1294
1140
  }
1295
1141
 
1296
- @keyframes tds-dropdown-popover{
1297
- from{
1298
- opacity:0;
1299
- transform:translateY(-8px);
1142
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1143
+ display:flex;
1144
+ flex-flow:row wrap;
1145
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1146
+ align-items:flex-start;
1147
+ justify-content:flex-start;
1148
+ min-width:0;
1300
1149
  }
1301
- }
1302
1150
 
1303
- @media (prefers-reduced-motion: reduce){
1304
- .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1305
- animation:none;
1151
+ :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{
1152
+ display:flex;
1153
+ gap:var(--tds-page-header-nav-gap);
1154
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1155
+ margin:0 0 -1px;
1156
+ overflow:auto;
1157
+ list-style:none;
1158
+ background:var(--tds-page-header-nav-background);
1306
1159
  }
1307
- }
1308
-
1309
- .tds-dropdown-popover [role="menu"]{
1310
- outline:0;
1311
- }
1312
- .tds-dropdown-item{
1313
- --tds-dropdown-item-color:var(--t-text-color);
1314
- --tds-dropdown-item-row-gap:0;
1315
- --tds-dropdown-item-column-gap:var(--t-spacing-1);
1316
-
1317
- display:flex;
1318
- row-gap:var(--tds-dropdown-item-row-gap);
1319
- -moz-column-gap:var(--tds-dropdown-item-column-gap);
1320
- column-gap:var(--tds-dropdown-item-column-gap);
1321
- align-items:center;
1322
- padding-block:var(--t-spacing-1);
1323
- padding-inline:var(--t-spacing-1-half);
1324
- font-size:1rem;
1325
- color:var(--tds-dropdown-item-color);
1326
- text-decoration:none;
1327
- cursor:default;
1328
- outline:0;
1329
- border-radius:var(--t-border-radius);
1330
- }
1331
- .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1332
- background:var(--t-fill-color-neutral-070);
1333
- }
1334
- .tds-dropdown-item[data-pressed]:not([data-disabled]){
1335
- background:var(--t-fill-color-neutral-060);
1336
- }
1337
- .tds-dropdown-item[data-disabled]{
1338
- --tds-dropdown-item-color:var(--t-form-color-disabled);
1339
-
1340
- cursor:not-allowed;
1341
- }
1342
-
1343
- .tds-dropdown-item--destructive{
1344
- --tds-dropdown-item-color:var(--t-text-color-status-error);
1345
- }
1346
-
1347
- .tds-dropdown-item--staff-only{
1348
- --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1349
- }
1350
- a.tds-dropdown-item:is(:hover, :active){
1351
- color:var(--tds-dropdown-item-color);
1352
- }
1353
- .tds-dropdown-item [slot="prefix"],
1354
- .tds-dropdown-item [slot="suffix"]{
1355
- flex-shrink:0;
1356
- }
1357
-
1358
- .tds-dropdown-item [slot="label"]{
1359
- flex:1;
1360
- min-width:0;
1361
- overflow:hidden;
1362
- text-overflow:ellipsis;
1363
- white-space:nowrap;
1364
- }
1365
-
1366
- .tds-dropdown-item [slot="description"]{
1367
- font-size:var(--t-font-size-sm);
1368
- color:var(--t-text-color-secondary);
1369
- }
1370
-
1371
- .tds-dropdown-item:has([slot="description"]){
1372
- --tds-dropdown-item-row-gap:var(--t-spacing-half);
1373
- --tds-dropdown-item-column-gap:0;
1374
-
1375
- display:grid;
1376
- grid-template-areas:"prefix label suffix" ". description .";
1377
- grid-template-columns:auto 1fr auto;
1378
- }
1379
-
1380
- .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1381
- grid-area:prefix;
1382
- margin-inline-end:var(--t-spacing-1);
1383
- }
1384
-
1385
- .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1386
- grid-area:label;
1387
- }
1388
-
1389
- .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1390
- grid-area:description;
1391
- }
1392
-
1393
- .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1394
- grid-area:suffix;
1395
- margin-inline-start:var(--t-spacing-1);
1396
- }
1397
- .tds-dropdown-section:not(:first-child){
1398
- margin-block-start:var(--t-spacing-half);
1399
- }
1400
1160
 
1401
- .tds-dropdown-section-label{
1402
- padding-block:var(--t-spacing-1);
1403
- padding-inline:var(--t-spacing-half);
1404
- font-size:var(--t-font-size-sm);
1405
- font-weight:var(--t-font-weight-semibold);
1406
- color:var(--t-text-color-secondary);
1407
- }
1408
- .tds-dropdown-separator{
1409
- margin-block:var(--t-spacing-half);
1410
- margin-inline:0;
1411
- border:0;
1412
- border-top:1px solid var(--t-border-color);
1413
- }
1161
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1162
+ position:relative;
1163
+ display:inline-flex;
1164
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1165
+ font-size:var(--t-font-size-sm);
1166
+ line-height:22px;
1167
+ color:var(--tds-page-header-nav-item-color);
1168
+ white-space:nowrap;
1169
+ text-decoration:none;
1170
+ -webkit-appearance:none;
1171
+ -moz-appearance:none;
1172
+ appearance:none;
1173
+ cursor:pointer;
1174
+ outline-offset:-2px;
1175
+ background-color:var(--tds-page-header-nav-item-background-color);
1176
+ background-clip:padding-box;
1177
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1178
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1179
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1180
+ }
1414
1181
 
1415
- .tds-radio-group{
1416
- --tds-radio-group-font-size:var(--t-font-size-md);
1417
- --tds-radio-group-line-height:1.4;
1418
- --tds-radio-group-gap:var(--t-spacing-1);
1182
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1183
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1184
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1185
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1186
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1187
+ }
1419
1188
 
1420
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1421
- --tds-radio-group-description-line-height:1.35;
1422
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1423
- --tds-radio-group-description-invalid-icon-display:none;
1424
- display:flex;
1425
- flex-direction:column;
1426
- gap:0;
1427
- padding:0;
1428
- margin:0;
1189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
+ }
1429
1195
 
1430
- font-size:var(--tds-radio-group-font-size);
1431
- line-height:var(--tds-radio-group-line-height);
1432
- border:0;
1433
- }
1196
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1198
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1199
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ }
1434
1201
 
1435
- .tds-radio-group legend{
1436
- float:left;
1437
- padding:0;
1438
- margin:0;
1439
- }
1202
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1203
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1204
+ color:var(--tds-page-header-nav-item-color-disabled);
1205
+ cursor:not-allowed;
1206
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
+ opacity:1;
1208
+ }
1440
1209
 
1441
- .tds-radio-group[aria-invalid="true"]{
1442
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1443
- --tds-radio-group-description-invalid-icon-display:inline-block;
1444
- }
1210
+ @media (min-width: 600px){
1211
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
+ position:absolute;
1213
+ inset:auto -1px -1px;
1214
+ height:1px;
1215
+ pointer-events:none;
1216
+ content:"";
1217
+ background-color:var(--tds-page-header-bottom-border-color);
1218
+ }
1219
+ }
1445
1220
 
1446
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1447
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1221
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
+ position:relative;
1448
1223
  }
1449
1224
 
1450
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1451
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1452
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1225
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1226
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1227
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1453
1228
  }
1454
1229
 
1455
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1456
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1230
+ :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{
1231
+ position:absolute;
1232
+ top:-5px;
1233
+ right:-2px;
1234
+ width:10px;
1235
+ height:10px;
1236
+ content:"";
1237
+ background:var(--tds-page-header-nav-item-indicator-color);
1238
+ border-radius:50%;
1457
1239
  }
1458
1240
 
1459
- .tds-radio-group:has(input:required) legend::after{
1460
- margin-left:.25ch;
1461
- color:var(--t-text-color-status-error);
1462
- content:"*";
1463
- }
1241
+ @media (prefers-reduced-motion: no-preference){
1242
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1243
+ animation:indicator-pulse 1.25s ease infinite;
1244
+ }
1245
+ }
1464
1246
 
1465
- .tds-radio-group-fields{
1247
+ .tds-page-header__title-bar{
1466
1248
  display:flex;
1467
1249
  flex-direction:column;
1468
- gap:var(--tds-radio-group-gap);
1469
- align-items:flex-start;
1470
- margin-top:var(--t-spacing-1);
1471
- }
1472
-
1473
- .tds-radio-group-description{
1474
- display:flex;
1475
- gap:var(--t-spacing-half);
1250
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1476
1251
  align-items:flex-start;
1477
- margin:var(--t-spacing-fourth) 0 0;
1478
- font-size:var(--tds-radio-group-description-font-size);
1479
- line-height:var(--tds-radio-group-description-line-height);
1480
- color:var(--tds-radio-group-description-color);
1481
- cursor:text;
1252
+ justify-content:space-between;
1253
+ padding:0 var(--tds-page-header-padding-x);
1482
1254
  }
1483
1255
 
1484
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1485
- display:var(--tds-radio-group-description-invalid-icon-display);
1486
- flex-shrink:0;
1487
- margin-top:calc(.5lh - .5em);
1488
- line-height:var(--tds-radio-group-description-line-height);
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1489
1258
  }
1490
1259
 
1491
- .tds-radio-group--sm{
1492
- --tds-radio-group-line-height:1.35;
1493
- --tds-radio-group-font-size:var(--t-font-size-sm);
1494
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1495
- --tds-radio-group-description-line-height:1.3;
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1496
1262
  }
1497
1263
 
1498
- .tds-radio{
1499
- --tds-radio-font-size:var(--t-font-size-md);
1500
- --tds-radio-cursor:pointer;
1501
- --tds-radio-line-height:1.4;
1502
- --tds-radio-transition-property:border-width;
1264
+ .tds-page-header__primary h1{
1265
+ margin:0;
1266
+ font-size:var(--tds-page-header-headline-font-size);
1267
+ font-weight:var(--t-font-weight-normal);
1268
+ line-height:32px;
1269
+ color:var(--tds-page-header-headline-color);
1270
+ overflow-wrap:break-word;
1271
+ }
1503
1272
 
1504
- --tds-radio-input-size:var(--t-element-size-md);
1505
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1506
- --tds-radio-input-border-color:var(--t-form-border-color);
1507
- --tds-radio-input-border-width:var(--t-form-border-width);
1508
- --tds-radio-input-background-color:var(--t-form-background-color);
1273
+ @media (min-width: 960px){
1274
+ .tds-page-header__primary{
1275
+ flex:1 1 max-content;
1276
+ width:auto;
1277
+ min-width:0;
1278
+ max-width:100%;
1279
+ }
1509
1280
 
1510
- --tds-radio-label-color:var(--t-form-color);
1281
+ .tds-page-header__title-bar,
1282
+ .tds-page-header--profile .tds-page-header__title-bar{
1283
+ flex-flow:row nowrap;
1284
+ row-gap:12px;
1285
+ align-items:flex-start;
1286
+ }
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1289
+ }
1511
1290
 
1512
- --tds-radio-description-font-size:var(--t-font-size-sm);
1513
- --tds-radio-description-line-height:1.35;
1514
- --tds-radio-description-color:var(--t-text-color-secondary);
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1293
+ }
1294
+ }
1515
1295
 
1516
- position:relative;
1517
- display:inline-grid;
1518
- grid-template-columns:auto;
1519
- grid-auto-columns:1fr;
1520
- gap:var(--t-spacing-fourth) 0;
1521
- line-height:var(--tds-radio-line-height);
1522
- -webkit-user-select:none;
1523
- -moz-user-select:none;
1524
- user-select:none;
1296
+ .tds-page-header-phone,
1297
+ .tds-page-header-email{
1298
+ color:var(--tds-page-header-color);
1299
+ white-space:nowrap;
1300
+ }
1301
+ .tds-page-header-email{
1302
+ max-width:100%;
1303
+ overflow:hidden;
1304
+ text-overflow:ellipsis;
1525
1305
  }
1526
1306
 
1527
- .tds-radio label{
1528
- grid-area:1 / 2;
1529
- padding-inline-start:var(--t-spacing-1);
1530
- font-size:var(--tds-radio-font-size);
1531
- font-weight:var(--t-font-weight-normal);
1532
- color:var(--tds-radio-label-color);
1533
- cursor:var(--tds-radio-cursor);
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1534
1311
  }
1535
1312
 
1536
- .tds-radio input[type="radio"]{
1537
- position:relative;
1538
- width:1em;
1539
- height:1em;
1540
- margin:calc((1lh - 1em) / 2) 0 0;
1541
- font-size:var(--tds-radio-font-size);
1542
- line-height:inherit;
1543
- -webkit-appearance:none;
1544
- -moz-appearance:none;
1545
- appearance:none;
1546
- cursor:var(--tds-radio-cursor);
1547
- background-color:var(--tds-radio-input-background-color);
1548
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1549
- border-radius:var(--tds-radio-input-border-radius);
1550
- transition-timing-function:var(--t-ease-in-out);
1551
- transition-duration:var(--t-duration-200);
1552
- transition-property:var(--tds-radio-transition-property);
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1553
1316
  }
1317
+ }
1554
1318
 
1555
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1556
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1557
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1558
- }
1319
+ .tds-button-group{
1320
+ display:inline-flex;
1321
+ }
1322
+ .tds-button-group > .tds-btn{
1323
+ --tds-button-group-item-z-index:1;
1559
1324
 
1560
- :is(.tds-radio input[type="radio"]):focus-visible{
1561
- outline:var(--t-focus-ring-outline);
1562
- outline-offset:var(--t-focus-ring-offset);
1325
+ position:relative;
1326
+ z-index:var(--tds-button-group-item-z-index);
1327
+ border-radius:0;
1328
+ }
1329
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1330
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
+ }
1332
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1333
+ position:absolute;
1334
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1335
+ width:var(--tds-btn-border-width);
1336
+ pointer-events:none;
1337
+ content:"";
1338
+ background-color:var(--t-border-color-white);
1339
+ }
1340
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
+ }
1343
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
+ }
1346
+ :is(.tds-button-group > .tds-btn):hover{
1347
+ --tds-button-group-item-z-index:2;
1563
1348
  }
1564
-
1565
- :is(.tds-radio input[type="radio"]):disabled{
1566
- pointer-events:none;
1349
+ :is(.tds-button-group > .tds-btn):focus-visible{
1350
+ --tds-button-group-item-z-index:5;
1567
1351
  }
1568
-
1569
- @media (prefers-reduced-motion: reduce){
1570
-
1571
- .tds-radio input[type="radio"]{
1572
- --tds-radio-transition-property:none;
1352
+ .tds-button-group > .tds-btn:first-child{
1353
+ border-start-start-radius:var(--tds-btn-border-radius);
1354
+ border-end-start-radius:var(--tds-btn-border-radius);
1573
1355
  }
1574
- }
1575
-
1576
- .tds-radio:has(input:checked){
1577
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1578
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1579
- --tds-radio-input-border-width:4px;
1356
+ .tds-button-group > .tds-btn:last-child{
1357
+ border-start-end-radius:var(--tds-btn-border-radius);
1358
+ border-end-end-radius:var(--tds-btn-border-radius);
1580
1359
  }
1581
1360
 
1582
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1583
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1584
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1585
- }
1586
-
1587
- .tds-radio:has(input:user-invalid){
1588
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1361
+ .tds-dropdown-popover{
1362
+ min-inline-size:10rem;
1363
+ max-inline-size:24rem;
1364
+ padding:var(--t-spacing-1);
1365
+ overflow:auto;
1366
+ overscroll-behavior:none;
1367
+ -webkit-user-select:none;
1368
+ -moz-user-select:none;
1369
+ user-select:none;
1370
+ outline:0;
1371
+ scrollbar-color:#0004 var(--t-surface-color-card);
1372
+ scrollbar-width:thin;
1373
+ background:var(--t-surface-color-card);
1374
+ background-clip:padding-box;
1375
+ border:1px solid var(--t-border-color);
1376
+ border-radius:var(--t-border-radius);
1377
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1378
+ }
1379
+ .tds-dropdown-popover[data-entering]{
1380
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
1381
+ }
1382
+ .tds-dropdown-popover[data-exiting]{
1383
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
1384
+ }
1385
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1386
+ will-change:opacity, transform;
1589
1387
  }
1590
1388
 
1591
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1592
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1593
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1594
- }
1595
-
1596
- .tds-radio:has(input:disabled){
1597
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1598
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1599
-
1600
- --tds-radio-label-color:var(--t-form-color-disabled);
1601
- --tds-radio-description-color:var(--t-form-color-disabled);
1602
- --tds-radio-cursor:not-allowed;
1389
+ @keyframes tds-dropdown-popover{
1390
+ from{
1391
+ opacity:0;
1392
+ transform:translateY(-8px);
1603
1393
  }
1394
+ }
1604
1395
 
1605
- .tds-radio:has(input:disabled) input:checked{
1606
- --tds-radio-input-background-color:var(--t-form-background-color);
1607
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1396
+ @media (prefers-reduced-motion: reduce){
1397
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
1398
+ animation:none;
1608
1399
  }
1609
-
1610
- .tds-radio-description{
1611
- display:flex;
1612
- grid-area:2 / 2;
1613
- gap:var(--t-spacing-half);
1614
- align-items:flex-start;
1615
- padding-inline-start:var(--t-spacing-1);
1616
- margin:0;
1617
- font-size:var(--tds-radio-description-font-size);
1618
- line-height:var(--tds-radio-description-line-height);
1619
- color:var(--tds-radio-description-color);
1620
- cursor:text;
1621
1400
  }
1622
1401
 
1623
- .tds-radio--sm{
1624
- --tds-radio-line-height:1.35;
1625
- --tds-radio-input-size:var(--t-element-size-sm);
1626
- --tds-radio-font-size:var(--t-font-size-sm);
1627
- --tds-radio-description-font-size:var(--t-font-size-xs);
1628
- --tds-radio-description-line-height:1.3;
1402
+ .tds-dropdown-popover [role="menu"]{
1403
+ outline:0;
1629
1404
  }
1405
+ .tds-dropdown-item{
1406
+ --tds-dropdown-item-color:var(--t-text-color);
1407
+ --tds-dropdown-item-row-gap:0;
1408
+ --tds-dropdown-item-column-gap:var(--t-spacing-1);
1630
1409
 
1631
-
1632
- :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{
1633
- -webkit-appearance:none;
1634
- appearance:none;
1635
- }
1636
-
1637
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1638
- inline-size:1em;
1639
- block-size:2em;
1640
- }
1641
- @supports (field-sizing: content){
1642
- .tds-input--auto-width{
1643
- inline-size:-moz-fit-content;
1644
- inline-size:fit-content;
1645
- min-inline-size:min(100%, 122px);
1410
+ display:flex;
1411
+ row-gap:var(--tds-dropdown-item-row-gap);
1412
+ -moz-column-gap:var(--tds-dropdown-item-column-gap);
1413
+ column-gap:var(--tds-dropdown-item-column-gap);
1414
+ align-items:center;
1415
+ padding-block:var(--t-spacing-1);
1416
+ padding-inline:var(--t-spacing-1-half);
1417
+ font-size:1rem;
1418
+ color:var(--tds-dropdown-item-color);
1419
+ text-decoration:none;
1420
+ cursor:default;
1421
+ outline:0;
1422
+ border-radius:var(--t-border-radius);
1423
+ }
1424
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
1425
+ background:var(--t-fill-color-neutral-070);
1426
+ }
1427
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
1428
+ background:var(--t-fill-color-neutral-060);
1646
1429
  }
1430
+ .tds-dropdown-item[data-disabled]{
1431
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
1647
1432
 
1648
- .tds-input--auto-width input{
1649
- field-sizing:content;
1650
- inline-size:auto;
1433
+ cursor:not-allowed;
1651
1434
  }
1652
- }
1653
1435
 
1654
- .tds-modal-overlay{
1655
- position:fixed;
1656
- inset:0;
1657
- z-index:1000;
1658
- display:flex;
1659
- align-items:center;
1660
- justify-content:center;
1661
- background:hsl(0 0% 0% / 40%);
1436
+ .tds-dropdown-item--destructive{
1437
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
1662
1438
  }
1663
1439
 
1664
- .tds-modal-overlay[data-entering]{
1665
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1666
- }
1440
+ .tds-dropdown-item--staff-only{
1441
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
1442
+ }
1443
+ a.tds-dropdown-item:is(:hover, :active){
1444
+ color:var(--tds-dropdown-item-color);
1445
+ }
1446
+ .tds-dropdown-item [slot="prefix"],
1447
+ .tds-dropdown-item [slot="suffix"]{
1448
+ flex-shrink:0;
1449
+ }
1667
1450
 
1668
- .tds-modal-overlay[data-exiting]{
1669
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1670
- }
1451
+ .tds-dropdown-item [slot="label"]{
1452
+ flex:1;
1453
+ min-width:0;
1454
+ overflow:hidden;
1455
+ text-overflow:ellipsis;
1456
+ white-space:nowrap;
1457
+ }
1671
1458
 
1672
- @keyframes tds-modal-overlay-fade{
1673
- from{
1674
- opacity:0;
1675
- }
1459
+ .tds-dropdown-item [slot="description"]{
1460
+ font-size:var(--t-font-size-sm);
1461
+ color:var(--t-text-color-secondary);
1676
1462
  }
1677
1463
 
1678
- .tds-modal-frame{
1679
- --tds-modal-width:600px;
1464
+ .tds-dropdown-item:has([slot="description"]){
1465
+ --tds-dropdown-item-row-gap:var(--t-spacing-half);
1466
+ --tds-dropdown-item-column-gap:0;
1680
1467
 
1681
- display:flex;
1682
- justify-content:center;
1683
- width:min(var(--tds-modal-width), calc(100% - 48px));
1468
+ display:grid;
1469
+ grid-template-areas:"prefix label suffix" ". description .";
1470
+ grid-template-columns:auto 1fr auto;
1684
1471
  }
1685
1472
 
1686
- .tds-modal-frame[data-entering]{
1687
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1688
- }
1473
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
1474
+ grid-area:prefix;
1475
+ margin-inline-end:var(--t-spacing-1);
1476
+ }
1689
1477
 
1690
- .tds-modal-frame[data-exiting]{
1691
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1692
- }
1478
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
1479
+ grid-area:label;
1480
+ }
1693
1481
 
1694
- .tds-modal-frame--sm{
1695
- --tds-modal-width:400px;
1482
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
1483
+ grid-area:description;
1696
1484
  }
1697
1485
 
1698
- .tds-modal-frame--lg{
1699
- --tds-modal-width:800px;
1486
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
1487
+ grid-area:suffix;
1488
+ margin-inline-start:var(--t-spacing-1);
1489
+ }
1490
+ .tds-dropdown-section:not(:first-child){
1491
+ margin-block-start:var(--t-spacing-half);
1700
1492
  }
1701
1493
 
1702
- .tds-modal-frame--xl{
1703
- --tds-modal-width:1000px;
1494
+ .tds-dropdown-section-label{
1495
+ padding-block:var(--t-spacing-1);
1496
+ padding-inline:var(--t-spacing-half);
1497
+ font-size:var(--t-font-size-sm);
1498
+ font-weight:var(--t-font-weight-semibold);
1499
+ color:var(--t-text-color-secondary);
1500
+ }
1501
+ .tds-dropdown-separator{
1502
+ margin-block:var(--t-spacing-half);
1503
+ margin-inline:0;
1504
+ border:0;
1505
+ border-top:1px solid var(--t-border-color);
1506
+ }
1507
+
1508
+ .tds-checkbox-group{
1509
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1510
+ --tds-checkbox-group-line-height:1.4;
1511
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1512
+
1513
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1514
+ --tds-checkbox-group-description-line-height:1.35;
1515
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1516
+ --tds-checkbox-group-description-invalid-icon-display:none;
1517
+ display:flex;
1518
+ flex-direction:column;
1519
+ gap:0;
1520
+ padding:0;
1521
+ margin:0;
1522
+
1523
+ font-size:var(--tds-checkbox-group-font-size);
1524
+ line-height:var(--tds-checkbox-group-line-height);
1525
+ border:0;
1704
1526
  }
1705
1527
 
1706
- @keyframes tds-modal-zoom{
1707
- from{
1708
- opacity:0;
1709
- scale:.96;
1528
+ .tds-checkbox-group legend{
1529
+ float:left;
1530
+ padding:0;
1531
+ margin:0;
1710
1532
  }
1711
- }
1712
1533
 
1713
- @media (prefers-reduced-motion: reduce){
1714
- .tds-modal-overlay[data-entering],
1715
- .tds-modal-overlay[data-exiting],
1716
- .tds-modal-frame[data-entering],
1717
- .tds-modal-frame[data-exiting]{
1718
- animation:none;
1534
+ .tds-checkbox-group[aria-invalid="true"]{
1535
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1536
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1719
1537
  }
1720
- }
1721
1538
 
1722
- .tds-modal{
1539
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1540
+ margin-left:.25ch;
1541
+ color:var(--t-text-color-status-error);
1542
+ content:"*";
1543
+ }
1544
+
1545
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1546
+ content:none;
1547
+ }
1548
+
1549
+ .tds-checkbox-group-fields{
1723
1550
  display:flex;
1724
1551
  flex-direction:column;
1725
- width:100%;
1726
- padding-block:var(--t-spacing-3);
1727
- padding-inline:0;
1728
- background:var(--t-surface-color-card);
1552
+ gap:var(--tds-checkbox-group-gap);
1553
+ align-items:flex-start;
1554
+ margin-top:var(--t-spacing-1);
1555
+ }
1729
1556
 
1730
- border:0;
1731
- border-radius:var(--t-border-radius-lg);
1732
- box-shadow:0 4px 18px 0 #0003;
1557
+ .tds-checkbox-group-description{
1558
+ display:flex;
1559
+ gap:var(--t-spacing-half);
1560
+ align-items:flex-start;
1561
+ margin:var(--t-spacing-fourth) 0 0;
1562
+ font-size:var(--tds-checkbox-group-description-font-size);
1563
+ line-height:var(--tds-checkbox-group-description-line-height);
1564
+ color:var(--tds-checkbox-group-description-color);
1565
+ cursor:text;
1733
1566
  }
1734
1567
 
1735
- .tds-modal:focus{
1736
- outline:none;
1568
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1569
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1570
+ flex-shrink:0;
1571
+ margin-top:calc(.5lh - .5em);
1572
+ line-height:var(--tds-checkbox-group-description-line-height);
1737
1573
  }
1738
1574
 
1739
- .tds-modal-header{
1740
- display:grid;
1741
- grid-template-columns:1fr auto;
1742
- -moz-column-gap:var(--t-spacing-2);
1743
- column-gap:var(--t-spacing-2);
1744
- padding-block:0;
1745
- padding-inline:var(--t-spacing-4);
1575
+ .tds-checkbox-group--sm{
1576
+ --tds-checkbox-group-line-height:1.35;
1577
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1578
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1579
+ --tds-checkbox-group-description-line-height:1.3;
1746
1580
  }
1747
1581
 
1748
- .tds-modal-title{
1749
- grid-row:1;
1750
- grid-column:1;
1751
- margin:0;
1752
- font-size:var(--t-font-size-2xl);
1753
- font-weight:var(--t-font-weight-medium);
1754
- line-height:140%;
1755
- color:var(--t-text-color-headline);
1756
- }
1757
1582
 
1758
- .tds-modal-subtitle{
1759
- grid-row:2;
1760
- grid-column:1;
1761
- margin:0;
1762
- font-size:var(--t-font-size-md);
1763
- font-weight:var(--t-font-weight-medium);
1764
- line-height:140%;
1765
- color:var(--t-text-color-secondary);
1766
- }
1583
+ :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{
1584
+ -webkit-appearance:none;
1585
+ appearance:none;
1586
+ }
1767
1587
 
1768
- .tds-modal-close{
1769
- grid-row:1;
1770
- grid-column:2;
1771
- align-self:center;
1772
- color:var(--t-icon-color-dim);
1773
- }
1588
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1589
+ inline-size:1em;
1590
+ block-size:2em;
1591
+ }
1592
+ @supports (field-sizing: content){
1593
+ .tds-input--auto-width{
1594
+ inline-size:-moz-fit-content;
1595
+ inline-size:fit-content;
1596
+ min-inline-size:min(100%, 122px);
1597
+ }
1774
1598
 
1775
- .tds-modal-body{
1776
- padding-block:var(--t-spacing-3);
1777
- padding-inline:var(--t-spacing-4);
1599
+ .tds-input--auto-width input{
1600
+ field-sizing:content;
1601
+ inline-size:auto;
1602
+ }
1778
1603
  }
1779
1604
 
1780
- .tds-modal-body--full-width{
1781
- padding-inline:0;
1782
- }
1605
+ .tds-checkbox{
1606
+ --tds-checkbox-font-size:var(--t-font-size-md);
1607
+ --tds-checkbox-cursor:pointer;
1608
+ --tds-checkbox-line-height:1.4;
1609
+ --tds-checkbox-transition-property:background-color, border-color;
1783
1610
 
1784
- .tds-modal-footer{
1785
- display:flex;
1786
- gap:var(--t-spacing-2);
1787
- align-items:center;
1788
- justify-content:flex-end;
1789
- padding-block-start:var(--t-spacing-3);
1790
- padding-inline:var(--t-spacing-4);
1791
- border-top:1px solid var(--t-border-color);
1792
- }
1611
+ --tds-checkbox-input-size:var(--t-element-size-md);
1612
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1613
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1614
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1793
1615
 
1794
- .tds-modal-footer > [slot="start"]{
1795
- margin-inline-end:auto;
1796
- }
1616
+ --tds-checkbox-input-icon:none;
1617
+ --tds-checkbox-input-icon-visibility:hidden;
1618
+ --tds-checkbox-input-icon-opacity:0;
1619
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1797
1620
 
1798
- .tds-search-input-control{
1799
- --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1800
- --tds-search-input-outline-offset:0;
1801
- --tds-search-input-cursor:text;
1621
+ --tds-checkbox-label-color:var(--t-form-color);
1802
1622
 
1803
- display:flex;
1804
- gap:var(--tds-field-padding-inline);
1805
- align-items:center;
1806
- inline-size:100%;
1807
- min-block-size:var(--tds-field-min-height);
1808
- padding-inline:var(--tds-field-padding-inline);
1809
- font-size:var(--tds-field-font-size);
1810
- color:var(--tds-field-color);
1811
- cursor:var(--tds-search-input-cursor);
1812
- outline:var(--t-focus-ring-width) solid transparent;
1813
- outline-color:var(--tds-search-input-outline-color);
1814
- outline-offset:var(--tds-search-input-outline-offset);
1815
- background-color:var(--tds-field-background-color);
1816
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1817
- border-radius:var(--t-form-border-radius);
1818
- transition-timing-function:var(--t-ease-in-out);
1819
- transition-duration:var(--t-duration-200);
1820
- transition-property:background-color, border-color, outline-color, outline-offset;
1623
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1624
+ --tds-checkbox-description-line-height:1.35;
1625
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1626
+ --tds-checkbox-description-invalid-icon-display:none;
1627
+
1628
+ position:relative;
1629
+ display:inline-grid;
1630
+ grid-template-columns:auto;
1631
+ grid-auto-columns:1fr;
1632
+ gap:var(--t-spacing-fourth) 0;
1633
+ line-height:var(--tds-checkbox-line-height);
1634
+ -webkit-user-select:none;
1635
+ -moz-user-select:none;
1636
+ user-select:none;
1821
1637
  }
1822
1638
 
1823
- .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1824
- border-color:var(--tds-field-border-color-hover);
1639
+ .tds-checkbox label{
1640
+ grid-area:1 / 2;
1641
+ padding-inline-start:var(--t-spacing-1);
1642
+ font-size:var(--tds-checkbox-font-size);
1643
+ font-weight:var(--t-font-weight-normal);
1644
+ color:var(--tds-checkbox-label-color);
1645
+ cursor:var(--tds-checkbox-cursor);
1825
1646
  }
1826
1647
 
1827
- .tds-search-input-control:has(input:focus){
1828
- --tds-search-input-outline-color:var(--t-focus-ring-color);
1829
- --tds-search-input-outline-offset:var(--t-focus-ring-offset);
1830
-
1831
- border-color:var(--t-form-border-color-focus);
1648
+ .tds-checkbox tds-indeterminate{
1649
+ display:flex;
1832
1650
  }
1833
1651
 
1834
- .tds-search-input-control input{
1835
- flex:1;
1836
- min-inline-size:0;
1837
- padding:0;
1838
- overflow:hidden;
1839
- text-overflow:ellipsis;
1840
- font-family:inherit;
1841
- font-size:inherit;
1842
- color:inherit;
1843
- white-space:nowrap;
1652
+ .tds-checkbox input[type="checkbox"]{
1653
+ position:relative;
1654
+ width:1em;
1655
+ height:1em;
1656
+ margin:calc((1lh - 1em) / 2) 0 0;
1657
+ font-size:var(--tds-checkbox-font-size);
1658
+ line-height:inherit;
1844
1659
  -webkit-appearance:none;
1845
1660
  -moz-appearance:none;
1846
1661
  appearance:none;
1847
- outline:0;
1848
- background-color:transparent;
1849
- border:0;
1662
+ cursor:var(--tds-checkbox-cursor);
1663
+ background-color:var(--tds-checkbox-input-background-color);
1664
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1665
+ border-radius:var(--tds-checkbox-input-border-radius);
1666
+ transition-timing-function:var(--t-ease-in-out);
1667
+ transition-duration:var(--t-duration-200);
1668
+ transition-property:var(--tds-checkbox-transition-property);
1850
1669
  }
1851
1670
 
1852
- :is(.tds-search-input-control input)::-moz-placeholder{
1853
- color:var(--tds-field-placeholder-color);
1854
- -moz-user-select:none;
1855
- user-select:none;
1671
+ :is(.tds-checkbox input[type="checkbox"])::before{
1672
+ position:absolute;
1673
+ top:50%;
1674
+ left:50%;
1675
+ visibility:var(--tds-checkbox-input-icon-visibility);
1676
+ width:100%;
1677
+ height:100%;
1678
+ content:"";
1679
+ background-color:var(--tds-checkbox-input-icon-fill);
1680
+ border-radius:var(--tds-checkbox-input-border-radius);
1681
+ opacity:var(--tds-checkbox-input-icon-opacity);
1682
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1683
+ mask-image:var(--tds-checkbox-input-icon);
1684
+ -webkit-mask-repeat:no-repeat;
1685
+ mask-repeat:no-repeat;
1686
+ -webkit-mask-size:contain;
1687
+ mask-size:contain;
1688
+ transform:translate(-50%, -50%);
1689
+ }
1690
+
1691
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1692
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1693
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1694
+ }
1695
+
1696
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1697
+ outline:var(--t-focus-ring-outline);
1698
+ outline-offset:var(--t-focus-ring-offset);
1856
1699
  }
1857
1700
 
1858
- :is(.tds-search-input-control input)::placeholder{
1859
- color:var(--tds-field-placeholder-color);
1860
- -webkit-user-select:none;
1861
- -moz-user-select:none;
1862
- user-select:none;
1701
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1702
+ pointer-events:none;
1863
1703
  }
1864
1704
 
1865
- :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
1866
- -webkit-appearance:none;
1867
- appearance:none;
1868
- }
1705
+ @media (prefers-reduced-motion: reduce){
1869
1706
 
1870
- .tds-search-input-control .tds-search-input-icon{
1871
- flex-shrink:0;
1872
- inline-size:1em;
1873
- color:var(--t-icon-color-dim);
1707
+ .tds-checkbox input[type="checkbox"]{
1708
+ --tds-checkbox-transition-property:none;
1874
1709
  }
1710
+ }
1875
1711
 
1876
- .tds-search-input-control .tds-search-input-clear-icon{
1877
- inline-size:calc(var(--tds-field-font-size) * .8);
1878
- block-size:calc(var(--tds-field-font-size) * .8);
1712
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1713
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1714
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1715
+ --tds-checkbox-input-icon-visibility:visible;
1716
+ --tds-checkbox-input-icon-opacity:1;
1879
1717
  }
1880
1718
 
1881
- .tds-search-input-control .tds-btn{
1882
- --tds-btn-color:var(--t-icon-color-dim);
1883
- --tds-btn-padding-truncated-x:0;
1884
- --tds-search-input-clear-button-visibility:hidden;
1719
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1720
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1721
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1722
+ }
1885
1723
 
1886
- visibility:var(--tds-search-input-clear-button-visibility);
1887
- flex-shrink:0;
1724
+ .tds-checkbox:has(input:checked){
1725
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1888
1726
  }
1889
1727
 
1890
- .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1891
- --tds-field-background-color:var(--t-form-background-color-error);
1892
- --tds-field-border-color:var(--t-form-border-color-error);
1893
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1728
+ .tds-checkbox:has(input:indeterminate){
1729
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1894
1730
  }
1895
1731
 
1896
- .tds-search-input-control:has(:disabled){
1897
- --tds-field-border-color:var(--t-form-border-color-disabled);
1898
- --tds-field-background-color:var(--t-form-background-color-disabled);
1899
- --tds-field-color:var(--t-form-color-disabled);
1900
- --tds-search-input-cursor:not-allowed;
1732
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1733
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1734
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1735
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1901
1736
  }
1902
1737
 
1903
- .tds-search-input-control:has([readonly]){
1904
- --tds-field-border-color:var(--t-form-border-color-readonly);
1905
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1906
- --tds-field-background-color:var(--t-form-background-color-readonly);
1907
- --tds-field-color:var(--t-form-color-readonly);
1908
- }
1738
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1739
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1740
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1741
+ }
1909
1742
 
1910
- .tds-search-input-control:has([readonly]):has(input:focus){
1911
- border-color:var(--t-form-border-color-hover);
1743
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1744
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1745
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1912
1746
  }
1913
1747
 
1914
- @media (prefers-reduced-motion: reduce){
1748
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1749
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1750
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1751
+ }
1915
1752
 
1916
- .tds-search-input-control{
1917
- transition-property:none;
1918
- }
1919
- }
1753
+ .tds-checkbox:has(input:required) label::after{
1754
+ margin-left:.25ch;
1755
+ color:var(--t-text-color-status-error);
1756
+ content:"*";
1757
+ }
1920
1758
 
1921
- .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
1922
- :has(:disabled, [readonly])
1923
- ) .tds-btn{
1924
- --tds-search-input-clear-button-visibility:visible;
1925
- }
1759
+ .tds-checkbox:has(input:disabled){
1760
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1761
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1926
1762
 
1927
- .tds-toggle-switch{
1928
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1929
- --tds-toggle-switch-cursor:pointer;
1930
- --tds-toggle-switch-display:inline-grid;
1931
- --tds-toggle-switch-line-height:1.4;
1763
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1764
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1765
+ --tds-checkbox-cursor:not-allowed;
1766
+ }
1932
1767
 
1933
- --tds-toggle-switch-label-color:var(--t-form-color);
1768
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1769
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1770
+ }
1934
1771
 
1935
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1936
- --tds-toggle-switch-track-outline:none;
1937
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1938
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1939
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1772
+ .tds-checkbox-description{
1773
+ display:flex;
1774
+ grid-area:2 / 2;
1775
+ gap:var(--t-spacing-half);
1776
+ align-items:flex-start;
1777
+ padding-inline-start:var(--t-spacing-1);
1778
+ margin:0;
1779
+ font-size:var(--tds-checkbox-description-font-size);
1780
+ line-height:var(--tds-checkbox-description-line-height);
1781
+ color:var(--tds-checkbox-description-color);
1782
+ cursor:text;
1783
+ }
1940
1784
 
1941
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1942
- --tds-toggle-switch-thumb-transform:translateX(0);
1943
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1785
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1786
+ display:var(--tds-checkbox-description-invalid-icon-display);
1787
+ flex-shrink:0;
1788
+ margin-top:calc(.5lh - .5em);
1789
+ line-height:var(--tds-checkbox-description-line-height);
1790
+ }
1944
1791
 
1945
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1946
- --tds-toggle-switch-description-line-height:1.35;
1947
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1948
- position:relative;
1792
+ .tds-checkbox--sm{
1793
+ --tds-checkbox-line-height:1.35;
1794
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1795
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1796
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1797
+ --tds-checkbox-description-line-height:1.3;
1798
+ }
1949
1799
 
1950
- display:var(--tds-toggle-switch-display);
1951
- grid-template-columns:auto;
1952
- grid-auto-columns:1fr;
1953
- gap:var(--t-spacing-fourth) 0;
1954
- -webkit-user-select:none;
1955
- -moz-user-select:none;
1956
- user-select:none;
1800
+ .tds-modal-overlay{
1801
+ position:fixed;
1802
+ inset:0;
1803
+ z-index:1000;
1804
+ display:flex;
1805
+ align-items:center;
1806
+ justify-content:center;
1807
+ background:hsl(0 0% 0% / 40%);
1957
1808
  }
1958
1809
 
1959
- .tds-toggle-switch input[type="checkbox"]{
1960
- position:absolute;
1961
- width:var(--tds-toggle-switch-track-width);
1962
- height:var(--tds-toggle-switch-track-height);
1963
- margin:0;
1964
- -webkit-appearance:none;
1965
- -moz-appearance:none;
1966
- appearance:none;
1967
- cursor:var(--tds-toggle-switch-cursor);
1968
- outline:var(--tds-toggle-switch-track-outline);
1969
- outline-offset:var(--t-focus-ring-offset);
1970
- background-color:transparent;
1971
- border:0;
1972
- border-radius:var(--t-border-radius-round);
1810
+ .tds-modal-overlay[data-entering]{
1811
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1973
1812
  }
1974
1813
 
1975
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1976
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1977
- }
1814
+ .tds-modal-overlay[data-exiting]{
1815
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1816
+ }
1978
1817
 
1979
- .tds-toggle-switch label{
1980
- display:inline-flex;
1981
- grid-area:1 / 2;
1982
- padding-inline-start:var(--t-spacing-1);
1983
- margin-top:-.09375em;
1984
- font-size:var(--tds-toggle-switch-font-size);
1985
- font-weight:var(--t-font-weight-normal);
1986
- line-height:var(--tds-toggle-switch-line-height);
1987
- color:var(--tds-toggle-switch-label-color);
1988
- cursor:var(--tds-toggle-switch-cursor);
1818
+ @keyframes tds-modal-overlay-fade{
1819
+ from{
1820
+ opacity:0;
1989
1821
  }
1822
+ }
1990
1823
 
1991
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1992
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1824
+ .tds-modal-frame{
1825
+ --tds-modal-width:600px;
1826
+
1827
+ display:flex;
1828
+ justify-content:center;
1829
+ width:min(var(--tds-modal-width), calc(100% - 48px));
1830
+ }
1831
+
1832
+ .tds-modal-frame[data-entering]{
1833
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1993
1834
  }
1994
1835
 
1995
- .tds-toggle-switch:has(input:checked){
1996
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1997
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1836
+ .tds-modal-frame[data-exiting]{
1837
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1998
1838
  }
1999
1839
 
2000
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2001
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2002
- }
1840
+ .tds-modal-frame--sm{
1841
+ --tds-modal-width:400px;
1842
+ }
2003
1843
 
2004
- .tds-toggle-switch:has(input:disabled){
2005
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2006
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2007
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2008
- --tds-toggle-switch-cursor:not-allowed;
1844
+ .tds-modal-frame--lg{
1845
+ --tds-modal-width:800px;
1846
+ }
1847
+
1848
+ .tds-modal-frame--xl{
1849
+ --tds-modal-width:1000px;
1850
+ }
1851
+
1852
+ @keyframes tds-modal-zoom{
1853
+ from{
1854
+ opacity:0;
1855
+ scale:.96;
2009
1856
  }
1857
+ }
2010
1858
 
2011
- .tds-toggle-switch-track{
2012
- position:relative;
2013
- flex-shrink:0;
2014
- width:var(--tds-toggle-switch-track-width);
2015
- height:var(--tds-toggle-switch-track-height);
2016
- background-color:var(--tds-toggle-switch-track-background-color);
2017
- border-radius:var(--t-border-radius-round);
2018
- transition:var(--tds-toggle-switch-track-transition);
1859
+ @media (prefers-reduced-motion: reduce){
1860
+ .tds-modal-overlay[data-entering],
1861
+ .tds-modal-overlay[data-exiting],
1862
+ .tds-modal-frame[data-entering],
1863
+ .tds-modal-frame[data-exiting]{
1864
+ animation:none;
1865
+ }
1866
+ }
1867
+
1868
+ .tds-modal{
1869
+ display:flex;
1870
+ flex-direction:column;
1871
+ width:100%;
1872
+ padding-block:var(--t-spacing-3);
1873
+ padding-inline:0;
1874
+ background:var(--t-surface-color-card);
1875
+
1876
+ border:0;
1877
+ border-radius:var(--t-border-radius-lg);
1878
+ box-shadow:0 4px 18px 0 #0003;
2019
1879
  }
2020
1880
 
2021
- .tds-toggle-switch-track::before{
2022
- position:absolute;
2023
- top:var(--t-spacing-fourth);
2024
- left:var(--t-spacing-fourth);
2025
- width:var(--tds-toggle-switch-thumb-size);
2026
- height:var(--tds-toggle-switch-thumb-size);
2027
- content:"";
2028
- background-color:#fff;
2029
- border-radius:var(--t-border-radius-round);
2030
- transform:var(--tds-toggle-switch-thumb-transform);
2031
- transition:var(--tds-toggle-switch-thumb-transition);
1881
+ .tds-modal:focus{
1882
+ outline:none;
2032
1883
  }
2033
1884
 
2034
- @media (prefers-reduced-motion: reduce){
1885
+ .tds-modal-header{
1886
+ display:grid;
1887
+ grid-template-columns:1fr auto;
1888
+ -moz-column-gap:var(--t-spacing-2);
1889
+ column-gap:var(--t-spacing-2);
1890
+ padding-block:0;
1891
+ padding-inline:var(--t-spacing-4);
1892
+ }
2035
1893
 
2036
- .tds-toggle-switch-track{
2037
- --tds-toggle-switch-track-transition:none;
2038
- --tds-toggle-switch-thumb-transition:none;
1894
+ .tds-modal-title{
1895
+ grid-row:1;
1896
+ grid-column:1;
1897
+ margin:0;
1898
+ font-size:var(--t-font-size-2xl);
1899
+ font-weight:var(--t-font-weight-medium);
1900
+ line-height:140%;
1901
+ color:var(--t-text-color-headline);
2039
1902
  }
2040
- }
2041
1903
 
2042
- .tds-toggle-switch-description{
2043
- display:flex;
2044
- grid-area:2 / 2;
2045
- align-items:flex-start;
2046
- padding-inline-start:var(--t-spacing-1);
1904
+ .tds-modal-subtitle{
1905
+ grid-row:2;
1906
+ grid-column:1;
2047
1907
  margin:0;
2048
- font-size:var(--tds-toggle-switch-description-font-size);
2049
- line-height:var(--tds-toggle-switch-description-line-height);
2050
- color:var(--tds-toggle-switch-description-color);
2051
- cursor:text;
1908
+ font-size:var(--t-font-size-md);
1909
+ font-weight:var(--t-font-weight-medium);
1910
+ line-height:140%;
1911
+ color:var(--t-text-color-secondary);
2052
1912
  }
2053
1913
 
2054
- .tds-toggle-switch--sm{
2055
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2056
- --tds-toggle-switch-line-height:1.35;
2057
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2058
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2059
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2060
- --tds-toggle-switch-description-line-height:1.3;
1914
+ .tds-modal-close{
1915
+ grid-row:1;
1916
+ grid-column:2;
1917
+ align-self:center;
1918
+ color:var(--t-icon-color-dim);
2061
1919
  }
2062
1920
 
2063
- .tds-toggle-switch--hide-label{
2064
- --tds-toggle-switch-display:inline-flex;
1921
+ .tds-modal-body{
1922
+ padding-block:var(--t-spacing-3);
1923
+ padding-inline:var(--t-spacing-4);
1924
+ }
1925
+
1926
+ .tds-modal-body--full-width{
1927
+ padding-inline:0;
1928
+ }
1929
+
1930
+ .tds-modal-footer{
1931
+ display:flex;
1932
+ gap:var(--t-spacing-2);
1933
+ align-items:center;
1934
+ justify-content:flex-end;
1935
+ padding-block-start:var(--t-spacing-3);
1936
+ padding-inline:var(--t-spacing-4);
1937
+ border-top:1px solid var(--t-border-color);
1938
+ }
1939
+
1940
+ .tds-modal-footer > [slot="start"]{
1941
+ margin-inline-end:auto;
2065
1942
  }
2066
1943
 
2067
1944
  .tds-input:has(textarea){
@@ -2169,368 +2046,491 @@ a.tds-dropdown-item:is(:hover, :active){
2169
2046
  }
2170
2047
  }
2171
2048
 
2049
+ .tds-radio-group{
2050
+ --tds-radio-group-font-size:var(--t-font-size-md);
2051
+ --tds-radio-group-line-height:1.4;
2052
+ --tds-radio-group-gap:var(--t-spacing-1);
2172
2053
 
2173
- @media (prefers-reduced-motion: no-preference){
2054
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2055
+ --tds-radio-group-description-line-height:1.35;
2056
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2057
+ --tds-radio-group-description-invalid-icon-display:none;
2058
+ display:flex;
2059
+ flex-direction:column;
2060
+ gap:0;
2061
+ padding:0;
2062
+ margin:0;
2174
2063
 
2175
- :root{
2176
- interpolate-size:allow-keywords;
2064
+ font-size:var(--tds-radio-group-font-size);
2065
+ line-height:var(--tds-radio-group-line-height);
2066
+ border:0;
2177
2067
  }
2068
+
2069
+ .tds-radio-group legend{
2070
+ float:left;
2071
+ padding:0;
2072
+ margin:0;
2178
2073
  }
2179
2074
 
2180
- @layer tds-component{
2181
- tds-sidenav,
2182
- .tds-sidenav{
2183
- --tds-sidenav-indent:12px;
2184
- --tds-sidenav-item-depth:0;
2075
+ .tds-radio-group[aria-invalid="true"]{
2076
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2077
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2078
+ }
2185
2079
 
2186
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2080
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2081
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2082
+ }
2187
2083
 
2188
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2189
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
2190
- --tds-sidenav-collapse-closed-opacity:0;
2191
- --tds-sidenav-collapse-open-opacity:1;
2192
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
2193
- --tds-sidenav-collapse-open-transform:translateY(0);
2084
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2085
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2086
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2087
+ }
2194
2088
 
2195
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
2196
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2197
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2198
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2089
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2090
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2091
+ }
2199
2092
 
2200
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2201
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2202
- --tds-sidenav-item-nested-background-selected:transparent;
2093
+ .tds-radio-group:has(input:required) legend::after{
2094
+ margin-left:.25ch;
2095
+ color:var(--t-text-color-status-error);
2096
+ content:"*";
2097
+ }
2098
+
2099
+ .tds-radio-group-fields{
2100
+ display:flex;
2101
+ flex-direction:column;
2102
+ gap:var(--tds-radio-group-gap);
2103
+ align-items:flex-start;
2104
+ margin-top:var(--t-spacing-1);
2105
+ }
2106
+
2107
+ .tds-radio-group-description{
2108
+ display:flex;
2109
+ gap:var(--t-spacing-half);
2110
+ align-items:flex-start;
2111
+ margin:var(--t-spacing-fourth) 0 0;
2112
+ font-size:var(--tds-radio-group-description-font-size);
2113
+ line-height:var(--tds-radio-group-description-line-height);
2114
+ color:var(--tds-radio-group-description-color);
2115
+ cursor:text;
2116
+ }
2117
+
2118
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2119
+ display:var(--tds-radio-group-description-invalid-icon-display);
2120
+ flex-shrink:0;
2121
+ margin-top:calc(.5lh - .5em);
2122
+ line-height:var(--tds-radio-group-description-line-height);
2123
+ }
2124
+
2125
+ .tds-radio-group--sm{
2126
+ --tds-radio-group-line-height:1.35;
2127
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2128
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2129
+ --tds-radio-group-description-line-height:1.3;
2130
+ }
2131
+
2132
+ .tds-radio{
2133
+ --tds-radio-font-size:var(--t-font-size-md);
2134
+ --tds-radio-cursor:pointer;
2135
+ --tds-radio-line-height:1.4;
2136
+ --tds-radio-transition-property:border-width;
2137
+
2138
+ --tds-radio-input-size:var(--t-element-size-md);
2139
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2140
+ --tds-radio-input-border-color:var(--t-form-border-color);
2141
+ --tds-radio-input-border-width:var(--t-form-border-width);
2142
+ --tds-radio-input-background-color:var(--t-form-background-color);
2143
+
2144
+ --tds-radio-label-color:var(--t-form-color);
2145
+
2146
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2147
+ --tds-radio-description-line-height:1.35;
2148
+ --tds-radio-description-color:var(--t-text-color-secondary);
2149
+
2150
+ position:relative;
2151
+ display:inline-grid;
2152
+ grid-template-columns:auto;
2153
+ grid-auto-columns:1fr;
2154
+ gap:var(--t-spacing-fourth) 0;
2155
+ line-height:var(--tds-radio-line-height);
2156
+ -webkit-user-select:none;
2157
+ -moz-user-select:none;
2158
+ user-select:none;
2159
+ }
2160
+
2161
+ .tds-radio label{
2162
+ grid-area:1 / 2;
2163
+ padding-inline-start:var(--t-spacing-1);
2164
+ font-size:var(--tds-radio-font-size);
2165
+ font-weight:var(--t-font-weight-normal);
2166
+ color:var(--tds-radio-label-color);
2167
+ cursor:var(--tds-radio-cursor);
2168
+ }
2169
+
2170
+ .tds-radio input[type="radio"]{
2171
+ position:relative;
2172
+ width:1em;
2173
+ height:1em;
2174
+ margin:calc((1lh - 1em) / 2) 0 0;
2175
+ font-size:var(--tds-radio-font-size);
2176
+ line-height:inherit;
2177
+ -webkit-appearance:none;
2178
+ -moz-appearance:none;
2179
+ appearance:none;
2180
+ cursor:var(--tds-radio-cursor);
2181
+ background-color:var(--tds-radio-input-background-color);
2182
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2183
+ border-radius:var(--tds-radio-input-border-radius);
2184
+ transition-timing-function:var(--t-ease-in-out);
2185
+ transition-duration:var(--t-duration-200);
2186
+ transition-property:var(--tds-radio-transition-property);
2187
+ }
2188
+
2189
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2190
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2191
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2192
+ }
2193
+
2194
+ :is(.tds-radio input[type="radio"]):focus-visible{
2195
+ outline:var(--t-focus-ring-outline);
2196
+ outline-offset:var(--t-focus-ring-offset);
2197
+ }
2198
+
2199
+ :is(.tds-radio input[type="radio"]):disabled{
2200
+ pointer-events:none;
2201
+ }
2203
2202
 
2204
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2205
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2206
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2203
+ @media (prefers-reduced-motion: reduce){
2207
2204
 
2208
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2209
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2205
+ .tds-radio input[type="radio"]{
2206
+ --tds-radio-transition-property:none;
2210
2207
  }
2208
+ }
2211
2209
 
2212
- @media (prefers-reduced-motion: reduce){
2213
- tds-sidenav,
2214
- .tds-sidenav{
2215
- --tds-sidenav-collapse-transition-enter:none;
2216
- --tds-sidenav-collapse-transition-exit:none;
2217
- --tds-sidenav-collapse-closed-transform:none;
2218
- --tds-sidenav-collapse-open-transform:none;
2210
+ .tds-radio:has(input:checked){
2211
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2212
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2213
+ --tds-radio-input-border-width:4px;
2219
2214
  }
2215
+
2216
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2217
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2218
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2220
2219
  }
2221
2220
 
2222
- .tds-sidenav--theme-gray{
2223
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2224
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2225
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2226
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2227
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2221
+ .tds-radio:has(input:user-invalid){
2222
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2228
2223
  }
2229
- }
2230
2224
 
2231
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2232
- display:flex;
2233
- }
2225
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2226
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2227
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2228
+ }
2234
2229
 
2235
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2236
- flex-direction:column;
2237
- gap:var(--t-spacing-half);
2238
- width:100%;
2230
+ .tds-radio:has(input:disabled){
2231
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2232
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2233
+
2234
+ --tds-radio-label-color:var(--t-form-color-disabled);
2235
+ --tds-radio-description-color:var(--t-form-color-disabled);
2236
+ --tds-radio-cursor:not-allowed;
2239
2237
  }
2240
2238
 
2241
- .tds-sidenav-section-list{
2242
- width:100%;
2243
- padding:0;
2239
+ .tds-radio:has(input:disabled) input:checked{
2240
+ --tds-radio-input-background-color:var(--t-form-background-color);
2241
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2242
+ }
2243
+
2244
+ .tds-radio-description{
2245
+ display:flex;
2246
+ grid-area:2 / 2;
2247
+ gap:var(--t-spacing-half);
2248
+ align-items:flex-start;
2249
+ padding-inline-start:var(--t-spacing-1);
2244
2250
  margin:0;
2245
- list-style:none;
2251
+ font-size:var(--tds-radio-description-font-size);
2252
+ line-height:var(--tds-radio-description-line-height);
2253
+ color:var(--tds-radio-description-color);
2254
+ cursor:text;
2246
2255
  }
2247
2256
 
2248
- .tds-sidenav-section-header{
2249
- display:flex;
2250
- align-items:baseline;
2251
- justify-content:space-between;
2252
- padding-top:var(--t-spacing-2);
2257
+ .tds-radio--sm{
2258
+ --tds-radio-line-height:1.35;
2259
+ --tds-radio-input-size:var(--t-element-size-sm);
2260
+ --tds-radio-font-size:var(--t-font-size-sm);
2261
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2262
+ --tds-radio-description-line-height:1.3;
2253
2263
  }
2254
2264
 
2255
- .tds-sidenav-section-header h2{
2256
- margin:0;
2257
- font-size:var(--t-font-size-sm);
2258
- font-weight:var(--t-font-weight-semibold);
2259
- line-height:1.35;
2260
- color:var(--t-text-color-secondary);
2261
- text-transform:uppercase;
2262
- }
2265
+ .tds-toggle-switch{
2266
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2267
+ --tds-toggle-switch-cursor:pointer;
2268
+ --tds-toggle-switch-display:inline-grid;
2269
+ --tds-toggle-switch-line-height:1.4;
2263
2270
 
2264
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2265
- padding-top:0;
2266
- }
2271
+ --tds-toggle-switch-label-color:var(--t-form-color);
2267
2272
 
2268
- .tds-sidenav-section-header [slot="label-actions"]{
2269
- display:flex;
2270
- gap:var(--t-spacing-half);
2271
- align-items:center;
2272
- }
2273
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2274
+ --tds-toggle-switch-track-outline:none;
2275
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2276
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2277
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2273
2278
 
2274
- .tds-sidenav-section [slot="section-actions"]{
2275
- display:flex;
2276
- gap:12px;
2277
- align-items:center;
2278
- min-height:42px;
2279
- padding:var(--t-spacing-1) 0;
2280
- }
2279
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2280
+ --tds-toggle-switch-thumb-transform:translateX(0);
2281
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2281
2282
 
2282
- .tds-sidenav-section-list,
2283
- .tds-sidenav-item{
2284
- width:100%;
2285
- padding:0;
2286
- margin:0;
2283
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2284
+ --tds-toggle-switch-description-line-height:1.35;
2285
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2286
+ position:relative;
2287
+
2288
+ display:var(--tds-toggle-switch-display);
2289
+ grid-template-columns:auto;
2290
+ grid-auto-columns:1fr;
2291
+ gap:var(--t-spacing-fourth) 0;
2292
+ -webkit-user-select:none;
2293
+ -moz-user-select:none;
2294
+ user-select:none;
2287
2295
  }
2288
2296
 
2289
- .tds-sidenav-item :is(a,button){
2290
- position:relative;
2291
- display:flex;
2292
- gap:12px;
2293
- align-items:center;
2294
- width:100%;
2295
- padding:12px;
2296
- overflow:hidden;
2297
- font-size:var(--t-font-size-sm);
2298
- line-height:18px;
2299
- color:var(--t-text-color-headline);
2300
- white-space:nowrap;
2301
- text-decoration:none;
2297
+ .tds-toggle-switch input[type="checkbox"]{
2298
+ position:absolute;
2299
+ width:var(--tds-toggle-switch-track-width);
2300
+ height:var(--tds-toggle-switch-track-height);
2301
+ margin:0;
2302
2302
  -webkit-appearance:none;
2303
2303
  -moz-appearance:none;
2304
2304
  appearance:none;
2305
- cursor:pointer;
2306
- background-color:var(--tds-sidenav-item-background, transparent);
2305
+ cursor:var(--tds-toggle-switch-cursor);
2306
+ outline:var(--tds-toggle-switch-track-outline);
2307
+ outline-offset:var(--t-focus-ring-offset);
2308
+ background-color:transparent;
2307
2309
  border:0;
2308
- border-radius:var(--t-border-radius);
2309
- transition:var(--tds-sidenav-item-transition);
2310
+ border-radius:var(--t-border-radius-round);
2310
2311
  }
2311
2312
 
2312
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2313
- display:block;
2314
- flex:1;
2315
- overflow:hidden;
2316
- text-overflow:ellipsis;
2317
- text-align:left;
2318
- white-space:nowrap;
2319
- }
2320
-
2321
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2322
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2323
- color:var(--t-text-color-headline);
2324
- text-decoration:none;
2325
- }
2326
-
2327
- :is(.tds-sidenav-item :is(a,button)):active{
2328
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2329
- }
2330
-
2331
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2332
- overflow:hidden;
2333
- color:var(--tds-sidenav-item-icon-color);
2334
- }
2335
-
2336
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
2337
- display:block;
2338
- width:var(--tds-sidenav-item-icon-size);
2339
- height:var(--tds-sidenav-item-icon-size);
2340
- }
2341
-
2342
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2343
- --tds-sidenav-indent:19px;
2344
- }
2345
-
2346
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2347
- visibility:visible;
2348
- block-size:auto;
2349
- opacity:1;
2313
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2314
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2350
2315
  }
2351
2316
 
2352
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2353
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2354
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2355
-
2356
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2357
- font-weight:var(--t-font-weight-semibold);
2317
+ .tds-toggle-switch label{
2318
+ display:inline-flex;
2319
+ grid-area:1 / 2;
2320
+ padding-inline-start:var(--t-spacing-1);
2321
+ margin-top:-.09375em;
2322
+ font-size:var(--tds-toggle-switch-font-size);
2323
+ font-weight:var(--t-font-weight-normal);
2324
+ line-height:var(--tds-toggle-switch-line-height);
2325
+ color:var(--tds-toggle-switch-label-color);
2326
+ cursor:var(--tds-toggle-switch-cursor);
2358
2327
  }
2359
2328
 
2360
- .tds-sidenav-item:has(.tds-sidenav-section){
2361
- display:flex;
2362
- flex-direction:column;
2363
- gap:var(--t-spacing-half);
2329
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2330
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2364
2331
  }
2365
2332
 
2366
- .tds-sidenav-item .tds-sidenav-section-list{
2367
- --tds-sidenav-item-depth:1;
2368
- gap:0;
2333
+ .tds-toggle-switch:has(input:checked){
2334
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2335
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2369
2336
  }
2370
2337
 
2371
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2372
- visibility:hidden;
2373
- block-size:0;
2374
- overflow-y:clip;
2375
- opacity:0;
2376
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2338
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2339
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2377
2340
  }
2378
2341
 
2379
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2380
- --tds-sidenav-item-depth:2;
2381
- }
2342
+ .tds-toggle-switch:has(input:disabled){
2343
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2344
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2345
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2346
+ --tds-toggle-switch-cursor:not-allowed;
2347
+ }
2348
+
2349
+ .tds-toggle-switch-track{
2350
+ position:relative;
2351
+ flex-shrink:0;
2352
+ width:var(--tds-toggle-switch-track-width);
2353
+ height:var(--tds-toggle-switch-track-height);
2354
+ background-color:var(--tds-toggle-switch-track-background-color);
2355
+ border-radius:var(--t-border-radius-round);
2356
+ transition:var(--tds-toggle-switch-track-transition);
2357
+ }
2382
2358
 
2383
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2384
- min-height:var(--t-element-size-2xl);
2385
- padding-block:9px;
2386
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2387
- line-height:1;
2388
- background-color:transparent;
2389
- }
2359
+ .tds-toggle-switch-track::before{
2360
+ position:absolute;
2361
+ top:var(--t-spacing-fourth);
2362
+ left:var(--t-spacing-fourth);
2363
+ width:var(--tds-toggle-switch-thumb-size);
2364
+ height:var(--tds-toggle-switch-thumb-size);
2365
+ content:"";
2366
+ background-color:#fff;
2367
+ border-radius:var(--t-border-radius-round);
2368
+ transform:var(--tds-toggle-switch-thumb-transform);
2369
+ transition:var(--tds-toggle-switch-thumb-transition);
2370
+ }
2390
2371
 
2391
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2392
- position:absolute;
2393
- top:0;
2394
- bottom:0;
2395
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2396
- width:2px;
2397
- content:"";
2398
- background-color:var(--tds-sidenav-item-nested-border-color);
2399
- transition:var(--tds-sidenav-item-transition);
2400
- }
2372
+ @media (prefers-reduced-motion: reduce){
2401
2373
 
2402
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2403
- position:absolute;
2404
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2405
- z-index:-1;
2406
- height:100%;
2407
- content:"";
2408
- background-color:var(--tds-sidenav-item-nested-background);
2409
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2410
- transition:var(--tds-sidenav-item-transition);
2411
- }
2374
+ .tds-toggle-switch-track{
2375
+ --tds-toggle-switch-track-transition:none;
2376
+ --tds-toggle-switch-thumb-transition:none;
2377
+ }
2378
+ }
2412
2379
 
2413
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
2414
- display:block;
2415
- text-align:left;
2416
- white-space:normal;
2417
- }
2380
+ .tds-toggle-switch-description{
2381
+ display:flex;
2382
+ grid-area:2 / 2;
2383
+ align-items:flex-start;
2384
+ padding-inline-start:var(--t-spacing-1);
2385
+ margin:0;
2386
+ font-size:var(--tds-toggle-switch-description-font-size);
2387
+ line-height:var(--tds-toggle-switch-description-line-height);
2388
+ color:var(--tds-toggle-switch-description-color);
2389
+ cursor:text;
2390
+ }
2418
2391
 
2419
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
2420
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2421
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2422
- }
2392
+ .tds-toggle-switch--sm{
2393
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2394
+ --tds-toggle-switch-line-height:1.35;
2395
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2396
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2397
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2398
+ --tds-toggle-switch-description-line-height:1.3;
2399
+ }
2423
2400
 
2424
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2425
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2426
- }
2401
+ .tds-toggle-switch--hide-label{
2402
+ --tds-toggle-switch-display:inline-flex;
2403
+ }
2427
2404
 
2428
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2429
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2430
- font-weight:var(--t-font-weight-medium);
2431
- }
2405
+ .tds-search-input-control{
2406
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2407
+ --tds-search-input-outline-offset:0;
2408
+ --tds-search-input-cursor:text;
2432
2409
 
2433
- .tds-sidenav-responsive-header{
2434
2410
  display:flex;
2435
- gap:var(--t-spacing-2);
2411
+ gap:var(--tds-field-padding-inline);
2436
2412
  align-items:center;
2437
- width:100%;
2413
+ inline-size:100%;
2414
+ min-block-size:var(--tds-field-min-height);
2415
+ padding-inline:var(--tds-field-padding-inline);
2416
+ font-size:var(--tds-field-font-size);
2417
+ color:var(--tds-field-color);
2418
+ cursor:var(--tds-search-input-cursor);
2419
+ outline:var(--t-focus-ring-width) solid transparent;
2420
+ outline-color:var(--tds-search-input-outline-color);
2421
+ outline-offset:var(--tds-search-input-outline-offset);
2422
+ background-color:var(--tds-field-background-color);
2423
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2424
+ border-radius:var(--t-form-border-radius);
2425
+ transition-timing-function:var(--t-ease-in-out);
2426
+ transition-duration:var(--t-duration-200);
2427
+ transition-property:background-color, border-color, outline-color, outline-offset;
2438
2428
  }
2439
2429
 
2440
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2441
- order:0;
2430
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
2431
+ border-color:var(--tds-field-border-color-hover);
2442
2432
  }
2443
2433
 
2444
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2445
- flex:1;
2446
- order:1;
2447
- margin:0;
2448
- font-size:var(--t-font-size-lg);
2449
- font-weight:var(--t-font-weight-medium);
2450
- color:var(--t-text-color-headline);
2434
+ .tds-search-input-control:has(input:focus){
2435
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
2436
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
2437
+
2438
+ border-color:var(--t-form-border-color-focus);
2451
2439
  }
2452
2440
 
2453
- @media (max-width: 719px){
2454
- .tds-sidenav-collapse{
2455
- z-index:10001;
2456
- display:none;
2457
- max-width:min(448px, calc(100vw - 48px));
2441
+ .tds-search-input-control input{
2442
+ flex:1;
2443
+ min-inline-size:0;
2458
2444
  padding:0;
2459
- margin:12px 0;
2460
- position-area:bottom span-right;
2461
2445
  overflow:hidden;
2446
+ text-overflow:ellipsis;
2447
+ font-family:inherit;
2448
+ font-size:inherit;
2449
+ color:inherit;
2450
+ white-space:nowrap;
2451
+ -webkit-appearance:none;
2452
+ -moz-appearance:none;
2453
+ appearance:none;
2462
2454
  outline:0;
2463
- background:var(--t-surface-color-card);
2455
+ background-color:transparent;
2464
2456
  border:0;
2465
- border-radius:6px;
2466
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2467
- opacity:var(--tds-sidenav-collapse-open-opacity);
2468
- transform:var(--tds-sidenav-collapse-open-transform);
2469
- transition:var(--tds-sidenav-collapse-transition-enter);
2470
- will-change:transform;
2471
- }
2472
-
2473
- .tds-sidenav-scroll-container{
2474
- --webkit-overflow-scrolling:touch;
2475
- display:block;
2476
- width:100%;
2477
- height:-moz-fit-content;
2478
- height:fit-content;
2479
- padding:var(--t-spacing-2);
2480
- overflow-y:auto;
2481
2457
  }
2482
2458
 
2483
- .tds-sidenav-item :is(a, button) :is(.prefix){
2484
- display:none;
2485
- }
2486
- @supports selector(:popover-open){
2487
- .tds-sidenav-collapse:popover-open{
2488
- display:flex;
2459
+ :is(.tds-search-input-control input)::-moz-placeholder{
2460
+ color:var(--tds-field-placeholder-color);
2461
+ -moz-user-select:none;
2462
+ user-select:none;
2489
2463
  }
2490
2464
 
2491
- .tds-sidenav-collapse:not(:popover-open){
2492
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2493
- transition:var(--tds-sidenav-collapse-transition-exit);
2465
+ :is(.tds-search-input-control input)::placeholder{
2466
+ color:var(--tds-field-placeholder-color);
2467
+ -webkit-user-select:none;
2468
+ -moz-user-select:none;
2469
+ user-select:none;
2494
2470
  }
2495
2471
 
2496
- @starting-style{
2497
- .tds-sidenav-collapse:popover-open{
2498
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2499
- transform:var(--tds-sidenav-collapse-closed-transform);
2500
- }
2472
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
2473
+ -webkit-appearance:none;
2474
+ appearance:none;
2501
2475
  }
2476
+
2477
+ .tds-search-input-control .tds-search-input-icon{
2478
+ flex-shrink:0;
2479
+ inline-size:1em;
2480
+ color:var(--t-icon-color-dim);
2502
2481
  }
2503
- @supports not selector(:popover-open){
2504
- .tds-sidenav-collapse.\:popover-open{
2505
- display:flex;
2506
- }
2507
2482
 
2508
- .tds-sidenav-collapse:not(.\:popover-open){
2509
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2510
- transition:var(--tds-sidenav-collapse-transition-exit);
2511
- }
2483
+ .tds-search-input-control .tds-search-input-clear-icon{
2484
+ inline-size:calc(var(--tds-field-font-size) * .8);
2485
+ block-size:calc(var(--tds-field-font-size) * .8);
2512
2486
  }
2513
- }
2514
2487
 
2515
- @media (min-width: 720px){
2516
- .tds-sidenav-responsive-header{
2517
- display:none;
2488
+ .tds-search-input-control .tds-btn{
2489
+ --tds-btn-color:var(--t-icon-color-dim);
2490
+ --tds-btn-padding-truncated-x:0;
2491
+ --tds-search-input-clear-button-visibility:hidden;
2492
+
2493
+ visibility:var(--tds-search-input-clear-button-visibility);
2494
+ flex-shrink:0;
2518
2495
  }
2519
- }
2520
2496
 
2521
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2522
- display:none;
2523
- }
2497
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
2498
+ --tds-field-background-color:var(--t-form-background-color-error);
2499
+ --tds-field-border-color:var(--t-form-border-color-error);
2500
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2501
+ }
2524
2502
 
2525
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2526
- display:block;
2527
- }
2503
+ .tds-search-input-control:has(:disabled){
2504
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2505
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2506
+ --tds-field-color:var(--t-form-color-disabled);
2507
+ --tds-search-input-cursor:not-allowed;
2508
+ }
2528
2509
 
2529
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2530
- display:flex;
2531
- flex-direction:column;
2510
+ .tds-search-input-control:has([readonly]){
2511
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2512
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2513
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2514
+ --tds-field-color:var(--t-form-color-readonly);
2515
+ }
2516
+
2517
+ .tds-search-input-control:has([readonly]):has(input:focus){
2518
+ border-color:var(--t-form-border-color-hover);
2532
2519
  }
2533
2520
 
2521
+ @media (prefers-reduced-motion: reduce){
2522
+
2523
+ .tds-search-input-control{
2524
+ transition-property:none;
2525
+ }
2526
+ }
2527
+
2528
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
2529
+ :has(:disabled, [readonly])
2530
+ ) .tds-btn{
2531
+ --tds-search-input-clear-button-visibility:visible;
2532
+ }
2533
+
2534
2534
  .tds-input{
2535
2535
  --tds-input-border-color:var(--t-form-border-color);
2536
2536
  --tds-input-border-color-hover:var(--t-form-border-color-hover);