@planningcenter/tapestry 4.0.1-rc.1 → 4.0.1-rc.2

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