@planningcenter/tapestry 4.6.0 → 4.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -719,368 +719,283 @@
719
719
  border-end-end-radius:var(--tds-btn-border-radius);
720
720
  }
721
721
 
722
-
723
- @media (prefers-reduced-motion: no-preference){
724
-
725
- :root{
726
- interpolate-size:allow-keywords;
727
- }
722
+ @layer t-critical{
723
+ tds-page-header:not(.hydrated){
724
+ display:none;
728
725
  }
726
+ }
729
727
 
730
- @layer tds-component{
731
- tds-sidenav,
732
- .tds-sidenav{
733
- --tds-sidenav-indent:12px;
734
- --tds-sidenav-item-depth:0;
735
-
736
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
737
-
738
- --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;
739
- --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;
740
- --tds-sidenav-collapse-closed-opacity:0;
741
- --tds-sidenav-collapse-open-opacity:1;
742
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
743
- --tds-sidenav-collapse-open-transform:translateY(0);
728
+ @layer t-component{
729
+ .tds-page-header{
730
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
731
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
732
+ --tds-page-header-color:var(--t-text-color);
733
+ --tds-page-header-bottom-border-color:transparent;
734
+ --tds-page-header-headline-color:var(--t-text-color-headline);
735
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
736
+ --tds-page-header-padding-x:var(--t-spacing-2);
737
+ --tds-page-header-padding-y:var(--t-spacing-2);
738
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
739
+ --tds-page-header-nav-gap:var(--t-spacing-1);
740
+ --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%);
741
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
742
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
743
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
744
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
745
+ --tds-page-header-nav-item-border-width:1px;
744
746
 
745
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
746
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
747
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
748
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
747
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
748
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
749
749
 
750
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
751
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
752
- --tds-sidenav-item-nested-background-selected:transparent;
750
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
751
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
752
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
753
753
 
754
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
755
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
756
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
754
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
755
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
757
756
 
758
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
759
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
760
- }
757
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
758
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
759
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
761
760
 
762
- @media (prefers-reduced-motion: reduce){
763
- tds-sidenav,
764
- .tds-sidenav{
765
- --tds-sidenav-collapse-transition-enter:none;
766
- --tds-sidenav-collapse-transition-exit:none;
767
- --tds-sidenav-collapse-closed-transform:none;
768
- --tds-sidenav-collapse-open-transform:none;
761
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
762
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
763
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
764
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
765
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
769
766
  }
770
- }
771
767
 
772
- .tds-sidenav--theme-gray{
773
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
774
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
775
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
776
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
777
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
768
+ .tds-page-header--profile{
769
+ --tds-page-header-padding-y:20px;
778
770
  }
779
- }
780
771
 
781
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
782
- display:flex;
772
+ @supports (color: light-dark(#fff, #000)){
773
+ .tds-page-header{
774
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
775
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
776
+ }
783
777
  }
784
778
 
785
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
786
- flex-direction:column;
787
- gap:var(--t-spacing-half);
788
- width:100%;
779
+ @media (min-width: 600px){
780
+ .tds-page-header{
781
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
782
+ --tds-page-header-color:var(--t-text-color-secondary);
783
+ --tds-page-header-bottom-border-color:var(--t-border-color);
784
+ --tds-page-header-padding-x:var(--t-spacing-3);
785
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
786
+ --tds-page-header-nav-gap:var(--t-spacing-half);
787
+ --tds-page-header-nav-background:transparent;
788
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
789
+ --tds-page-header-nav-item-border-width:1px;
790
+ --tds-page-header-nav-item-color:var(--t-text-color);
791
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
792
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
793
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
794
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
795
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
796
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
797
+ }
789
798
  }
790
-
791
- .tds-sidenav-section-list{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- list-style:none;
796
799
  }
797
800
 
798
- .tds-sidenav-section-header{
801
+ .tds-page-header{
799
802
  display:flex;
800
- align-items:baseline;
801
- justify-content:space-between;
802
- padding-top:var(--t-spacing-2);
803
+ flex-direction:column;
804
+ padding-top:var(--tds-page-header-padding-y);
805
+ color:var(--tds-page-header-color);
806
+ background:var(--tds-page-header-background-color);
807
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
803
808
  }
804
809
 
805
- .tds-sidenav-section-header h2{
806
- margin:0;
807
- font-size:var(--t-font-size-sm);
808
- font-weight:var(--t-font-weight-semibold);
809
- line-height:1.35;
810
- color:var(--t-text-color-secondary);
811
- text-transform:uppercase;
810
+ .tds-page-header:not(.has-nav){
811
+ padding-bottom:var(--tds-page-header-padding-y);
812
812
  }
813
813
 
814
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
815
- padding-top:0;
814
+ .tds-page-header.inactive{
815
+ background:var(--tds-page-header-background-color-inactive);
816
816
  }
817
817
 
818
- .tds-sidenav-section-header [slot="label-actions"]{
819
- display:flex;
820
- gap:var(--t-spacing-half);
821
- align-items:center;
818
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
819
+ width:100%;
822
820
  }
823
821
 
824
- .tds-sidenav-section [slot="section-actions"]{
825
- display:flex;
826
- gap:12px;
827
- align-items:center;
828
- min-height:42px;
829
- padding:var(--t-spacing-1) 0;
830
- }
831
-
832
- .tds-sidenav-section-list,
833
- .tds-sidenav-item{
834
- width:100%;
835
- padding:0;
836
- margin:0;
837
- }
838
-
839
- .tds-sidenav-item :is(a,button){
840
- position:relative;
822
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
841
823
  display:flex;
842
- gap:12px;
843
- align-items:center;
844
- width:100%;
845
- padding:12px;
846
- overflow:hidden;
847
- font-size:var(--t-font-size-sm);
848
- line-height:18px;
849
- color:var(--t-text-color-headline);
850
- white-space:nowrap;
851
- text-decoration:none;
852
- -webkit-appearance:none;
853
- -moz-appearance:none;
854
- appearance:none;
855
- cursor:pointer;
856
- background-color:var(--tds-sidenav-item-background, transparent);
857
- border:0;
858
- border-radius:var(--t-border-radius);
859
- transition:var(--tds-sidenav-item-transition);
824
+ flex-flow:row wrap;
825
+ gap:var(--t-spacing-half) var(--t-spacing-1);
826
+ align-items:flex-start;
827
+ justify-content:flex-start;
828
+ min-width:0;
860
829
  }
861
830
 
862
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
863
- display:block;
864
- flex:1;
865
- overflow:hidden;
866
- text-overflow:ellipsis;
867
- text-align:left;
868
- white-space:nowrap;
831
+ :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{
832
+ display:flex;
833
+ gap:var(--tds-page-header-nav-gap);
834
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
835
+ margin:0 0 -1px;
836
+ overflow:auto;
837
+ list-style:none;
838
+ background:var(--tds-page-header-nav-background);
869
839
  }
870
840
 
871
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
872
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
873
- color:var(--t-text-color-headline);
841
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
842
+ position:relative;
843
+ display:inline-flex;
844
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
845
+ font-size:var(--t-font-size-sm);
846
+ line-height:22px;
847
+ color:var(--tds-page-header-nav-item-color);
848
+ white-space:nowrap;
874
849
  text-decoration:none;
850
+ -webkit-appearance:none;
851
+ -moz-appearance:none;
852
+ appearance:none;
853
+ cursor:pointer;
854
+ outline-offset:-2px;
855
+ background-color:var(--tds-page-header-nav-item-background-color);
856
+ background-clip:padding-box;
857
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
858
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
859
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
875
860
  }
876
861
 
877
- :is(.tds-sidenav-item :is(a,button)):active{
878
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
879
- }
880
-
881
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
882
- overflow:hidden;
883
- color:var(--tds-sidenav-item-icon-color);
884
- }
885
-
886
- :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{
887
- display:block;
888
- width:var(--tds-sidenav-item-icon-size);
889
- height:var(--tds-sidenav-item-icon-size);
862
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
863
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
864
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
865
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
866
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
890
867
  }
891
868
 
892
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
893
- --tds-sidenav-indent:19px;
894
- }
869
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
870
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
871
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
872
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
873
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
874
+ }
895
875
 
896
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
897
- visibility:visible;
898
- block-size:auto;
899
- opacity:1;
900
- }
901
-
902
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
903
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
904
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
905
-
906
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
907
- font-weight:var(--t-font-weight-semibold);
908
- }
909
-
910
- .tds-sidenav-item:has(.tds-sidenav-section){
911
- display:flex;
912
- flex-direction:column;
913
- gap:var(--t-spacing-half);
914
- }
915
-
916
- .tds-sidenav-item .tds-sidenav-section-list{
917
- --tds-sidenav-item-depth:1;
918
- gap:0;
919
- }
876
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
877
+ background-color:var(--tds-page-header-nav-item-background-color-active);
878
+ border-color:var(--tds-page-header-nav-item-border-color-active);
879
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
880
+ }
920
881
 
921
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
922
- visibility:hidden;
923
- block-size:0;
924
- overflow-y:clip;
925
- opacity:0;
926
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
927
- }
882
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
883
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
884
+ color:var(--tds-page-header-nav-item-color-disabled);
885
+ cursor:not-allowed;
886
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
887
+ opacity:1;
888
+ }
928
889
 
929
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
930
- --tds-sidenav-item-depth:2;
931
- }
890
+ @media (min-width: 600px){
891
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
892
+ position:absolute;
893
+ inset:auto -1px -1px;
894
+ height:1px;
895
+ pointer-events:none;
896
+ content:"";
897
+ background-color:var(--tds-page-header-bottom-border-color);
898
+ }
899
+ }
932
900
 
933
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
934
- min-height:var(--t-element-size-2xl);
935
- padding-block:9px;
936
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
937
- line-height:1;
938
- background-color:transparent;
901
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
902
+ position:relative;
939
903
  }
940
904
 
941
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
942
- position:absolute;
943
- top:0;
944
- bottom:0;
945
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
946
- width:2px;
947
- content:"";
948
- background-color:var(--tds-sidenav-item-nested-border-color);
949
- transition:var(--tds-sidenav-item-transition);
905
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
906
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
907
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
950
908
  }
951
909
 
952
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
910
+ :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{
953
911
  position:absolute;
954
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
- z-index:-1;
956
- height:100%;
912
+ top:-5px;
913
+ right:-2px;
914
+ width:10px;
915
+ height:10px;
957
916
  content:"";
958
- background-color:var(--tds-sidenav-item-nested-background);
959
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
960
- transition:var(--tds-sidenav-item-transition);
961
- }
962
-
963
- :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)){
964
- display:block;
965
- text-align:left;
966
- white-space:normal;
967
- }
968
-
969
- :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{
970
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
971
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
917
+ background:var(--tds-page-header-nav-item-indicator-color);
918
+ border-radius:50%;
972
919
  }
973
920
 
974
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
975
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
921
+ @media (prefers-reduced-motion: no-preference){
922
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
923
+ animation:indicator-pulse 1.25s ease infinite;
924
+ }
976
925
  }
977
926
 
978
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
979
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
980
- font-weight:var(--t-font-weight-medium);
981
- }
982
-
983
- .tds-sidenav-responsive-header{
927
+ .tds-page-header__title-bar{
984
928
  display:flex;
985
- gap:var(--t-spacing-2);
986
- align-items:center;
987
- width:100%;
929
+ flex-direction:column;
930
+ gap:var(--t-spacing-2) var(--t-spacing-1);
931
+ align-items:flex-start;
932
+ justify-content:space-between;
933
+ padding:0 var(--tds-page-header-padding-x);
988
934
  }
989
935
 
990
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
991
- order:0;
936
+ .tds-page-header--profile > .tds-page-header__title-bar{
937
+ align-items:center;
992
938
  }
993
939
 
994
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
995
- flex:1;
996
- order:1;
997
- margin:0;
998
- font-size:var(--t-font-size-lg);
999
- font-weight:var(--t-font-weight-medium);
1000
- color:var(--t-text-color-headline);
1001
- }
940
+ .tds-page-header__primary{
941
+ width:100%;
942
+ }
1002
943
 
1003
- @media (max-width: 719px){
1004
- .tds-sidenav-collapse{
1005
- z-index:10001;
1006
- display:none;
1007
- max-width:min(448px, calc(100vw - 48px));
1008
- padding:0;
1009
- margin:12px 0;
1010
- position-area:bottom span-right;
1011
- overflow:hidden;
1012
- outline:0;
1013
- background:var(--t-surface-color-card);
1014
- border:0;
1015
- border-radius:6px;
1016
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1017
- opacity:var(--tds-sidenav-collapse-open-opacity);
1018
- transform:var(--tds-sidenav-collapse-open-transform);
1019
- transition:var(--tds-sidenav-collapse-transition-enter);
1020
- will-change:transform;
944
+ .tds-page-header__primary h1{
945
+ margin:0;
946
+ font-size:var(--tds-page-header-headline-font-size);
947
+ font-weight:var(--t-font-weight-normal);
948
+ line-height:32px;
949
+ color:var(--tds-page-header-headline-color);
950
+ overflow-wrap:break-word;
1021
951
  }
1022
952
 
1023
- .tds-sidenav-scroll-container{
1024
- --webkit-overflow-scrolling:touch;
1025
- display:block;
1026
- width:100%;
1027
- height:-moz-fit-content;
1028
- height:fit-content;
1029
- padding:var(--t-spacing-2);
1030
- overflow-y:auto;
953
+ @media (min-width: 960px){
954
+ .tds-page-header__primary{
955
+ flex:1 1 max-content;
956
+ width:auto;
957
+ min-width:0;
958
+ max-width:100%;
1031
959
  }
1032
960
 
1033
- .tds-sidenav-item :is(a, button) :is(.prefix){
1034
- display:none;
961
+ .tds-page-header__title-bar,
962
+ .tds-page-header--profile .tds-page-header__title-bar{
963
+ flex-flow:row nowrap;
964
+ row-gap:12px;
965
+ align-items:flex-start;
1035
966
  }
1036
- @supports selector(:popover-open){
1037
- .tds-sidenav-collapse:popover-open{
1038
- display:flex;
967
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
968
+ width:auto;
1039
969
  }
1040
970
 
1041
- .tds-sidenav-collapse:not(:popover-open){
1042
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1043
- transition:var(--tds-sidenav-collapse-transition-exit);
971
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
972
+ justify-content:flex-end;
1044
973
  }
974
+ }
1045
975
 
1046
- @starting-style{
1047
- .tds-sidenav-collapse:popover-open{
1048
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1049
- transform:var(--tds-sidenav-collapse-closed-transform);
1050
- }
1051
- }
1052
- }
1053
- @supports not selector(:popover-open){
1054
- .tds-sidenav-collapse.\:popover-open{
1055
- display:flex;
1056
- }
976
+ .tds-page-header-phone,
977
+ .tds-page-header-email{
978
+ color:var(--tds-page-header-color);
979
+ white-space:nowrap;
980
+ }
981
+ .tds-page-header-email{
982
+ max-width:100%;
983
+ overflow:hidden;
984
+ text-overflow:ellipsis;
985
+ }
1057
986
 
1058
- .tds-sidenav-collapse:not(.\:popover-open){
1059
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1060
- transition:var(--tds-sidenav-collapse-transition-exit);
1061
- }
987
+ @keyframes indicator-pulse{
988
+ 0%{
989
+ opacity:.3;
990
+ transform:scale(.9);
1062
991
  }
1063
- }
1064
992
 
1065
- @media (min-width: 720px){
1066
- .tds-sidenav-responsive-header{
1067
- display:none;
993
+ 100%{
994
+ opacity:0;
995
+ transform:scale(1.75);
1068
996
  }
1069
997
  }
1070
998
 
1071
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1072
- display:none;
1073
- }
1074
-
1075
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1076
- display:block;
1077
- }
1078
-
1079
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1080
- display:flex;
1081
- flex-direction:column;
1082
- }
1083
-
1084
999
  .tds-checkbox{
1085
1000
  --tds-checkbox-font-size:var(--t-font-size-md);
1086
1001
  --tds-checkbox-cursor:pointer;
@@ -1350,222 +1265,368 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1265
  --tds-checkbox-group-description-line-height:1.3;
1351
1266
  }
1352
1267
 
1353
- .tds-radio-group{
1354
- --tds-radio-group-font-size:var(--t-font-size-md);
1355
- --tds-radio-group-line-height:1.4;
1356
- --tds-radio-group-gap:var(--t-spacing-1);
1357
1268
 
1358
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1359
- --tds-radio-group-description-line-height:1.35;
1360
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1361
- --tds-radio-group-description-invalid-icon-display:none;
1362
- display:flex;
1363
- flex-direction:column;
1364
- gap:0;
1365
- padding:0;
1366
- margin:0;
1269
+ @media (prefers-reduced-motion: no-preference){
1367
1270
 
1368
- font-size:var(--tds-radio-group-font-size);
1369
- line-height:var(--tds-radio-group-line-height);
1370
- border:0;
1271
+ :root{
1272
+ interpolate-size:allow-keywords;
1371
1273
  }
1372
-
1373
- .tds-radio-group legend{
1374
- float:left;
1375
- padding:0;
1376
- margin:0;
1377
1274
  }
1378
1275
 
1379
- .tds-radio-group[aria-invalid="true"]{
1380
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1381
- --tds-radio-group-description-invalid-icon-display:inline-block;
1382
- }
1276
+ @layer tds-component{
1277
+ tds-sidenav,
1278
+ .tds-sidenav{
1279
+ --tds-sidenav-indent:12px;
1280
+ --tds-sidenav-item-depth:0;
1383
1281
 
1384
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1385
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1386
- }
1282
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1387
1283
 
1388
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1389
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1390
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1391
- }
1284
+ --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;
1285
+ --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;
1286
+ --tds-sidenav-collapse-closed-opacity:0;
1287
+ --tds-sidenav-collapse-open-opacity:1;
1288
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1289
+ --tds-sidenav-collapse-open-transform:translateY(0);
1392
1290
 
1393
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1394
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1395
- }
1291
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1292
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1293
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1294
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1396
1295
 
1397
- .tds-radio-group:has(input:required) legend::after{
1398
- margin-left:.25ch;
1399
- color:var(--t-text-color-status-error);
1400
- content:"*";
1296
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1297
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1298
+ --tds-sidenav-item-nested-background-selected:transparent;
1299
+
1300
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1301
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1302
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1303
+
1304
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1305
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1306
+ }
1307
+
1308
+ @media (prefers-reduced-motion: reduce){
1309
+ tds-sidenav,
1310
+ .tds-sidenav{
1311
+ --tds-sidenav-collapse-transition-enter:none;
1312
+ --tds-sidenav-collapse-transition-exit:none;
1313
+ --tds-sidenav-collapse-closed-transform:none;
1314
+ --tds-sidenav-collapse-open-transform:none;
1315
+ }
1401
1316
  }
1402
1317
 
1403
- .tds-radio-group-fields{
1404
- display:flex;
1405
- flex-direction:column;
1406
- gap:var(--tds-radio-group-gap);
1407
- align-items:flex-start;
1408
- margin-top:var(--t-spacing-1);
1318
+ .tds-sidenav--theme-gray{
1319
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1320
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1321
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1322
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1323
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1324
+ }
1409
1325
  }
1410
1326
 
1411
- .tds-radio-group-description{
1412
- display:flex;
1413
- gap:var(--t-spacing-half);
1414
- align-items:flex-start;
1415
- margin:var(--t-spacing-fourth) 0 0;
1416
- font-size:var(--tds-radio-group-description-font-size);
1417
- line-height:var(--tds-radio-group-description-line-height);
1418
- color:var(--tds-radio-group-description-color);
1419
- cursor:text;
1420
- }
1327
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1328
+ display:flex;
1329
+ }
1421
1330
 
1422
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1423
- display:var(--tds-radio-group-description-invalid-icon-display);
1424
- flex-shrink:0;
1425
- margin-top:calc(.5lh - .5em);
1426
- line-height:var(--tds-radio-group-description-line-height);
1331
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1332
+ flex-direction:column;
1333
+ gap:var(--t-spacing-half);
1334
+ width:100%;
1427
1335
  }
1428
1336
 
1429
- .tds-radio-group--sm{
1430
- --tds-radio-group-line-height:1.35;
1431
- --tds-radio-group-font-size:var(--t-font-size-sm);
1432
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1433
- --tds-radio-group-description-line-height:1.3;
1337
+ .tds-sidenav-section-list{
1338
+ width:100%;
1339
+ padding:0;
1340
+ margin:0;
1341
+ list-style:none;
1434
1342
  }
1435
1343
 
1436
- .tds-radio{
1437
- --tds-radio-font-size:var(--t-font-size-md);
1438
- --tds-radio-cursor:pointer;
1439
- --tds-radio-line-height:1.4;
1440
- --tds-radio-transition-property:border-width;
1344
+ .tds-sidenav-section-header{
1345
+ display:flex;
1346
+ align-items:baseline;
1347
+ justify-content:space-between;
1348
+ padding-top:var(--t-spacing-2);
1349
+ }
1441
1350
 
1442
- --tds-radio-input-size:var(--t-element-size-md);
1443
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1444
- --tds-radio-input-border-color:var(--t-form-border-color);
1445
- --tds-radio-input-border-width:var(--t-form-border-width);
1446
- --tds-radio-input-background-color:var(--t-form-background-color);
1351
+ .tds-sidenav-section-header h2{
1352
+ margin:0;
1353
+ font-size:var(--t-font-size-sm);
1354
+ font-weight:var(--t-font-weight-semibold);
1355
+ line-height:1.35;
1356
+ color:var(--t-text-color-secondary);
1357
+ text-transform:uppercase;
1358
+ }
1447
1359
 
1448
- --tds-radio-label-color:var(--t-form-color);
1360
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1361
+ padding-top:0;
1362
+ }
1449
1363
 
1450
- --tds-radio-description-font-size:var(--t-font-size-sm);
1451
- --tds-radio-description-line-height:1.35;
1452
- --tds-radio-description-color:var(--t-text-color-secondary);
1364
+ .tds-sidenav-section-header [slot="label-actions"]{
1365
+ display:flex;
1366
+ gap:var(--t-spacing-half);
1367
+ align-items:center;
1368
+ }
1453
1369
 
1454
- position:relative;
1455
- display:inline-grid;
1456
- grid-template-columns:auto;
1457
- grid-auto-columns:1fr;
1458
- gap:var(--t-spacing-fourth) 0;
1459
- line-height:var(--tds-radio-line-height);
1460
- -webkit-user-select:none;
1461
- -moz-user-select:none;
1462
- user-select:none;
1370
+ .tds-sidenav-section [slot="section-actions"]{
1371
+ display:flex;
1372
+ gap:12px;
1373
+ align-items:center;
1374
+ min-height:42px;
1375
+ padding:var(--t-spacing-1) 0;
1463
1376
  }
1464
1377
 
1465
- .tds-radio label{
1466
- grid-area:1 / 2;
1467
- padding-inline-start:var(--t-spacing-1);
1468
- font-size:var(--tds-radio-font-size);
1469
- font-weight:var(--t-font-weight-normal);
1470
- color:var(--tds-radio-label-color);
1471
- cursor:var(--tds-radio-cursor);
1472
- }
1378
+ .tds-sidenav-section-list,
1379
+ .tds-sidenav-item{
1380
+ width:100%;
1381
+ padding:0;
1382
+ margin:0;
1383
+ }
1473
1384
 
1474
- .tds-radio input[type="radio"]{
1385
+ .tds-sidenav-item :is(a,button){
1475
1386
  position:relative;
1476
- width:1em;
1477
- height:1em;
1478
- margin:calc((1lh - 1em) / 2) 0 0;
1479
- font-size:var(--tds-radio-font-size);
1480
- line-height:inherit;
1387
+ display:flex;
1388
+ gap:12px;
1389
+ align-items:center;
1390
+ width:100%;
1391
+ padding:12px;
1392
+ overflow:hidden;
1393
+ font-size:var(--t-font-size-sm);
1394
+ line-height:18px;
1395
+ color:var(--t-text-color-headline);
1396
+ white-space:nowrap;
1397
+ text-decoration:none;
1481
1398
  -webkit-appearance:none;
1482
1399
  -moz-appearance:none;
1483
1400
  appearance:none;
1484
- cursor:var(--tds-radio-cursor);
1485
- background-color:var(--tds-radio-input-background-color);
1486
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1487
- border-radius:var(--tds-radio-input-border-radius);
1488
- transition-timing-function:var(--t-ease-in-out);
1489
- transition-duration:var(--t-duration-200);
1490
- transition-property:var(--tds-radio-transition-property);
1401
+ cursor:pointer;
1402
+ background-color:var(--tds-sidenav-item-background, transparent);
1403
+ border:0;
1404
+ border-radius:var(--t-border-radius);
1405
+ transition:var(--tds-sidenav-item-transition);
1491
1406
  }
1492
1407
 
1493
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1494
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1495
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1408
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1409
+ display:block;
1410
+ flex:1;
1411
+ overflow:hidden;
1412
+ text-overflow:ellipsis;
1413
+ text-align:left;
1414
+ white-space:nowrap;
1496
1415
  }
1497
1416
 
1498
- :is(.tds-radio input[type="radio"]):focus-visible{
1499
- outline:var(--t-focus-ring-outline);
1500
- outline-offset:var(--t-focus-ring-offset);
1417
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1418
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1419
+ color:var(--t-text-color-headline);
1420
+ text-decoration:none;
1501
1421
  }
1502
1422
 
1503
- :is(.tds-radio input[type="radio"]):disabled{
1504
- pointer-events:none;
1423
+ :is(.tds-sidenav-item :is(a,button)):active{
1424
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1505
1425
  }
1506
1426
 
1507
- @media (prefers-reduced-motion: reduce){
1508
-
1509
- .tds-radio input[type="radio"]{
1510
- --tds-radio-transition-property:none;
1511
- }
1427
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1428
+ overflow:hidden;
1429
+ color:var(--tds-sidenav-item-icon-color);
1512
1430
  }
1513
1431
 
1514
- .tds-radio:has(input:checked){
1515
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1516
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1517
- --tds-radio-input-border-width:4px;
1518
- }
1432
+ :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{
1433
+ display:block;
1434
+ width:var(--tds-sidenav-item-icon-size);
1435
+ height:var(--tds-sidenav-item-icon-size);
1436
+ }
1519
1437
 
1520
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1521
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1522
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1438
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1439
+ --tds-sidenav-indent:19px;
1523
1440
  }
1524
1441
 
1525
- .tds-radio:has(input:user-invalid){
1526
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1527
- }
1528
-
1529
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1530
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1531
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1442
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1443
+ visibility:visible;
1444
+ block-size:auto;
1445
+ opacity:1;
1532
1446
  }
1533
1447
 
1534
- .tds-radio:has(input:disabled){
1535
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1536
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1448
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1449
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1450
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1537
1451
 
1538
- --tds-radio-label-color:var(--t-form-color-disabled);
1539
- --tds-radio-description-color:var(--t-form-color-disabled);
1540
- --tds-radio-cursor:not-allowed;
1452
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1453
+ font-weight:var(--t-font-weight-semibold);
1541
1454
  }
1542
1455
 
1543
- .tds-radio:has(input:disabled) input:checked{
1544
- --tds-radio-input-background-color:var(--t-form-background-color);
1545
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1456
+ .tds-sidenav-item:has(.tds-sidenav-section){
1457
+ display:flex;
1458
+ flex-direction:column;
1459
+ gap:var(--t-spacing-half);
1460
+ }
1461
+
1462
+ .tds-sidenav-item .tds-sidenav-section-list{
1463
+ --tds-sidenav-item-depth:1;
1464
+ gap:0;
1465
+ }
1466
+
1467
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1468
+ visibility:hidden;
1469
+ block-size:0;
1470
+ overflow-y:clip;
1471
+ opacity:0;
1472
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1546
1473
  }
1547
1474
 
1548
- .tds-radio-description{
1475
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1476
+ --tds-sidenav-item-depth:2;
1477
+ }
1478
+
1479
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1480
+ min-height:var(--t-element-size-2xl);
1481
+ padding-block:9px;
1482
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1483
+ line-height:1;
1484
+ background-color:transparent;
1485
+ }
1486
+
1487
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1488
+ position:absolute;
1489
+ top:0;
1490
+ bottom:0;
1491
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1492
+ width:2px;
1493
+ content:"";
1494
+ background-color:var(--tds-sidenav-item-nested-border-color);
1495
+ transition:var(--tds-sidenav-item-transition);
1496
+ }
1497
+
1498
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1499
+ position:absolute;
1500
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1501
+ z-index:-1;
1502
+ height:100%;
1503
+ content:"";
1504
+ background-color:var(--tds-sidenav-item-nested-background);
1505
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1506
+ transition:var(--tds-sidenav-item-transition);
1507
+ }
1508
+
1509
+ :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)){
1510
+ display:block;
1511
+ text-align:left;
1512
+ white-space:normal;
1513
+ }
1514
+
1515
+ :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{
1516
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1517
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1518
+ }
1519
+
1520
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1521
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1522
+ }
1523
+
1524
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1525
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1526
+ font-weight:var(--t-font-weight-medium);
1527
+ }
1528
+
1529
+ .tds-sidenav-responsive-header{
1549
1530
  display:flex;
1550
- grid-area:2 / 2;
1551
- gap:var(--t-spacing-half);
1552
- align-items:flex-start;
1553
- padding-inline-start:var(--t-spacing-1);
1554
- margin:0;
1555
- font-size:var(--tds-radio-description-font-size);
1556
- line-height:var(--tds-radio-description-line-height);
1557
- color:var(--tds-radio-description-color);
1558
- cursor:text;
1531
+ gap:var(--t-spacing-2);
1532
+ align-items:center;
1533
+ width:100%;
1559
1534
  }
1560
1535
 
1561
- .tds-radio--sm{
1562
- --tds-radio-line-height:1.35;
1563
- --tds-radio-input-size:var(--t-element-size-sm);
1564
- --tds-radio-font-size:var(--t-font-size-sm);
1565
- --tds-radio-description-font-size:var(--t-font-size-xs);
1566
- --tds-radio-description-line-height:1.3;
1536
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1537
+ order:0;
1538
+ }
1539
+
1540
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1541
+ flex:1;
1542
+ order:1;
1543
+ margin:0;
1544
+ font-size:var(--t-font-size-lg);
1545
+ font-weight:var(--t-font-weight-medium);
1546
+ color:var(--t-text-color-headline);
1547
+ }
1548
+
1549
+ @media (max-width: 719px){
1550
+ .tds-sidenav-collapse{
1551
+ z-index:10001;
1552
+ display:none;
1553
+ max-width:min(448px, calc(100vw - 48px));
1554
+ padding:0;
1555
+ margin:12px 0;
1556
+ position-area:bottom span-right;
1557
+ overflow:hidden;
1558
+ outline:0;
1559
+ background:var(--t-surface-color-card);
1560
+ border:0;
1561
+ border-radius:6px;
1562
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1563
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1564
+ transform:var(--tds-sidenav-collapse-open-transform);
1565
+ transition:var(--tds-sidenav-collapse-transition-enter);
1566
+ will-change:transform;
1567
+ }
1568
+
1569
+ .tds-sidenav-scroll-container{
1570
+ --webkit-overflow-scrolling:touch;
1571
+ display:block;
1572
+ width:100%;
1573
+ height:-moz-fit-content;
1574
+ height:fit-content;
1575
+ padding:var(--t-spacing-2);
1576
+ overflow-y:auto;
1577
+ }
1578
+
1579
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1580
+ display:none;
1581
+ }
1582
+ @supports selector(:popover-open){
1583
+ .tds-sidenav-collapse:popover-open{
1584
+ display:flex;
1585
+ }
1586
+
1587
+ .tds-sidenav-collapse:not(:popover-open){
1588
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1589
+ transition:var(--tds-sidenav-collapse-transition-exit);
1590
+ }
1591
+
1592
+ @starting-style{
1593
+ .tds-sidenav-collapse:popover-open{
1594
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1595
+ transform:var(--tds-sidenav-collapse-closed-transform);
1596
+ }
1597
+ }
1598
+ }
1599
+ @supports not selector(:popover-open){
1600
+ .tds-sidenav-collapse.\:popover-open{
1601
+ display:flex;
1602
+ }
1603
+
1604
+ .tds-sidenav-collapse:not(.\:popover-open){
1605
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1606
+ transition:var(--tds-sidenav-collapse-transition-exit);
1607
+ }
1608
+ }
1609
+ }
1610
+
1611
+ @media (min-width: 720px){
1612
+ .tds-sidenav-responsive-header{
1613
+ display:none;
1614
+ }
1567
1615
  }
1568
1616
 
1617
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1618
+ display:none;
1619
+ }
1620
+
1621
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1622
+ display:block;
1623
+ }
1624
+
1625
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1626
+ display:flex;
1627
+ flex-direction:column;
1628
+ }
1629
+
1569
1630
 
1570
1631
  :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{
1571
1632
  -webkit-appearance:none;
@@ -1589,111 +1650,139 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1589
1650
  }
1590
1651
  }
1591
1652
 
1592
- .tds-input:has(textarea){
1593
- --tds-input-padding-block:6px;
1594
- --tds-input-resizer-size:var(--t-element-size-sm);
1595
- --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");
1596
- }
1653
+ .tds-radio{
1654
+ --tds-radio-font-size:var(--t-font-size-md);
1655
+ --tds-radio-cursor:pointer;
1656
+ --tds-radio-line-height:1.4;
1657
+ --tds-radio-transition-property:border-width;
1597
1658
 
1598
- @supports (x: attr(x type(*))){
1659
+ --tds-radio-input-size:var(--t-element-size-md);
1660
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1661
+ --tds-radio-input-border-color:var(--t-form-border-color);
1662
+ --tds-radio-input-border-width:var(--t-form-border-width);
1663
+ --tds-radio-input-background-color:var(--t-form-background-color);
1599
1664
 
1600
- .tds-input textarea{
1601
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1602
- }
1603
- }
1665
+ --tds-radio-label-color:var(--t-form-color);
1604
1666
 
1605
- .tds-input.tds-textarea--resize-vertical textarea{
1606
- resize:vertical;
1607
- }
1667
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1668
+ --tds-radio-description-line-height:1.35;
1669
+ --tds-radio-description-color:var(--t-text-color-secondary);
1608
1670
 
1609
- .tds-input.tds-textarea--resize-none textarea{
1610
- resize:none;
1611
- }
1671
+ position:relative;
1672
+ display:inline-grid;
1673
+ grid-template-columns:auto;
1674
+ grid-auto-columns:1fr;
1675
+ gap:var(--t-spacing-fourth) 0;
1676
+ line-height:var(--tds-radio-line-height);
1677
+ -webkit-user-select:none;
1678
+ -moz-user-select:none;
1679
+ user-select:none;
1680
+ }
1612
1681
 
1613
- .tds-input.tds-textarea--resize-auto textarea{
1614
- resize:vertical;
1615
- }
1682
+ .tds-radio label{
1683
+ grid-area:1 / 2;
1684
+ padding-inline-start:var(--t-spacing-1);
1685
+ font-size:var(--tds-radio-font-size);
1686
+ font-weight:var(--t-font-weight-normal);
1687
+ color:var(--tds-radio-label-color);
1688
+ cursor:var(--tds-radio-cursor);
1689
+ }
1616
1690
 
1617
- @supports (field-sizing: content){
1618
- .tds-input.tds-textarea--resize-auto textarea{
1619
- field-sizing:content;
1620
- resize:none;
1621
- }
1622
- }
1623
-
1624
- .tds-input textarea{
1625
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1626
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1627
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1628
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1629
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1630
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1631
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1632
- --tds-input-scrollbar-thumb-border-radius:999px;
1633
- --tds-input-scrollbar-thumb-border-width:3px;
1634
- --tds-input-scrollbar-track-margin-block:.125rem;
1635
- scrollbar-color:initial;
1636
- transition-timing-function:var(--t-ease-in-out);
1637
- transition-duration:var(--t-duration-200);
1638
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1639
- }
1691
+ .tds-radio input[type="radio"]{
1692
+ position:relative;
1693
+ width:1em;
1694
+ height:1em;
1695
+ margin:calc((1lh - 1em) / 2) 0 0;
1696
+ font-size:var(--tds-radio-font-size);
1697
+ line-height:inherit;
1698
+ -webkit-appearance:none;
1699
+ -moz-appearance:none;
1700
+ appearance:none;
1701
+ cursor:var(--tds-radio-cursor);
1702
+ background-color:var(--tds-radio-input-background-color);
1703
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1704
+ border-radius:var(--tds-radio-input-border-radius);
1705
+ transition-timing-function:var(--t-ease-in-out);
1706
+ transition-duration:var(--t-duration-200);
1707
+ transition-property:var(--tds-radio-transition-property);
1708
+ }
1640
1709
 
1641
- @media (pointer: fine){
1642
- :is(.tds-input textarea)::-webkit-scrollbar{
1643
- width:12px;
1644
- height:12px;
1645
- cursor:default;
1710
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1711
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1712
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1646
1713
  }
1647
1714
 
1648
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1649
- cursor:default;
1650
- background:var(--tds-input-scrollbar-thumb-color);
1651
- background-clip:content-box;
1652
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1653
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1715
+ :is(.tds-radio input[type="radio"]):focus-visible{
1716
+ outline:var(--t-focus-ring-outline);
1717
+ outline-offset:var(--t-focus-ring-offset);
1654
1718
  }
1655
1719
 
1656
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1657
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1720
+ :is(.tds-radio input[type="radio"]):disabled{
1721
+ pointer-events:none;
1658
1722
  }
1659
1723
 
1660
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1661
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1662
- }
1724
+ @media (prefers-reduced-motion: reduce){
1663
1725
 
1664
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1665
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1726
+ .tds-radio input[type="radio"]{
1727
+ --tds-radio-transition-property:none;
1728
+ }
1666
1729
  }
1667
1730
 
1668
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1669
- background:var(--tds-input-scrollbar-surface-color);
1670
- }
1731
+ .tds-radio:has(input:checked){
1732
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1733
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1734
+ --tds-radio-input-border-width:4px;
1735
+ }
1671
1736
 
1672
- :is(.tds-input textarea)::-webkit-resizer{
1673
- background:var(--tds-input-resizer-icon) no-repeat;
1674
- background-position:right bottom;
1675
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1737
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1738
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1739
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1676
1740
  }
1677
1741
 
1678
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1679
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1680
- cursor:default;
1742
+ .tds-radio:has(input:user-invalid){
1743
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1744
+ }
1745
+
1746
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1747
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1748
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1681
1749
  }
1682
1750
 
1683
- @supports (-moz-appearance: none){
1684
- :is(.tds-input textarea){
1685
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1686
- scrollbar-width:thin;
1687
- }
1751
+ .tds-radio:has(input:disabled){
1752
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1753
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1688
1754
 
1689
- @media (hover){
1690
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1691
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1692
- }
1693
- }
1694
- }
1755
+ --tds-radio-label-color:var(--t-form-color-disabled);
1756
+ --tds-radio-description-color:var(--t-form-color-disabled);
1757
+ --tds-radio-cursor:not-allowed;
1695
1758
  }
1696
1759
 
1760
+ .tds-radio:has(input:disabled) input:checked{
1761
+ --tds-radio-input-background-color:var(--t-form-background-color);
1762
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1763
+ }
1764
+
1765
+ .tds-radio-description{
1766
+ display:flex;
1767
+ grid-area:2 / 2;
1768
+ gap:var(--t-spacing-half);
1769
+ align-items:flex-start;
1770
+ padding-inline-start:var(--t-spacing-1);
1771
+ margin:0;
1772
+ font-size:var(--tds-radio-description-font-size);
1773
+ line-height:var(--tds-radio-description-line-height);
1774
+ color:var(--tds-radio-description-color);
1775
+ cursor:text;
1776
+ }
1777
+
1778
+ .tds-radio--sm{
1779
+ --tds-radio-line-height:1.35;
1780
+ --tds-radio-input-size:var(--t-element-size-sm);
1781
+ --tds-radio-font-size:var(--t-font-size-sm);
1782
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1783
+ --tds-radio-description-line-height:1.3;
1784
+ }
1785
+
1697
1786
  .tds-modal-overlay{
1698
1787
  --tds-modal-min-margin-block:var(--t-spacing-3);
1699
1788
 
@@ -1857,421 +1946,332 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1857
1946
  }
1858
1947
  }
1859
1948
 
1860
- .tds-toggle-switch{
1861
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1862
- --tds-toggle-switch-cursor:pointer;
1863
- --tds-toggle-switch-display:inline-grid;
1864
- --tds-toggle-switch-line-height:1.4;
1865
-
1866
- --tds-toggle-switch-label-color:var(--t-form-color);
1867
-
1868
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1869
- --tds-toggle-switch-track-outline:none;
1870
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1871
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1872
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1873
-
1874
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1875
- --tds-toggle-switch-thumb-transform:translateX(0);
1876
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1949
+ .tds-input:has(textarea){
1950
+ --tds-input-padding-block:6px;
1951
+ --tds-input-resizer-size:var(--t-element-size-sm);
1952
+ --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");
1953
+ }
1877
1954
 
1878
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1879
- --tds-toggle-switch-description-line-height:1.35;
1880
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1881
- position:relative;
1955
+ @supports (x: attr(x type(*))){
1882
1956
 
1883
- display:var(--tds-toggle-switch-display);
1884
- grid-template-columns:auto;
1885
- grid-auto-columns:1fr;
1886
- gap:var(--t-spacing-fourth) 0;
1887
- -webkit-user-select:none;
1888
- -moz-user-select:none;
1889
- user-select:none;
1957
+ .tds-input textarea{
1958
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1890
1959
  }
1891
-
1892
- .tds-toggle-switch input[type="checkbox"]{
1893
- position:absolute;
1894
- width:var(--tds-toggle-switch-track-width);
1895
- height:var(--tds-toggle-switch-track-height);
1896
- margin:0;
1897
- -webkit-appearance:none;
1898
- -moz-appearance:none;
1899
- appearance:none;
1900
- cursor:var(--tds-toggle-switch-cursor);
1901
- outline:var(--tds-toggle-switch-track-outline);
1902
- outline-offset:var(--t-focus-ring-offset);
1903
- background-color:transparent;
1904
- border:0;
1905
- border-radius:var(--t-border-radius-round);
1906
1960
  }
1907
1961
 
1908
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1909
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1962
+ .tds-input.tds-textarea--resize-vertical textarea{
1963
+ resize:vertical;
1910
1964
  }
1911
1965
 
1912
- .tds-toggle-switch label{
1913
- display:inline-flex;
1914
- grid-area:1 / 2;
1915
- padding-inline-start:var(--t-spacing-1);
1916
- margin-top:-.09375em;
1917
- font-size:var(--tds-toggle-switch-font-size);
1918
- font-weight:var(--t-font-weight-normal);
1919
- line-height:var(--tds-toggle-switch-line-height);
1920
- color:var(--tds-toggle-switch-label-color);
1921
- cursor:var(--tds-toggle-switch-cursor);
1922
- }
1923
-
1924
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1925
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1926
- }
1927
-
1928
- .tds-toggle-switch:has(input:checked){
1929
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1930
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1931
- }
1966
+ .tds-input.tds-textarea--resize-none textarea{
1967
+ resize:none;
1968
+ }
1932
1969
 
1933
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1934
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1970
+ .tds-input.tds-textarea--resize-auto textarea{
1971
+ resize:vertical;
1935
1972
  }
1936
1973
 
1937
- .tds-toggle-switch:has(input:disabled){
1938
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1939
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1940
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1941
- --tds-toggle-switch-cursor:not-allowed;
1942
- }
1974
+ @supports (field-sizing: content){
1975
+ .tds-input.tds-textarea--resize-auto textarea{
1976
+ field-sizing:content;
1977
+ resize:none;
1978
+ }
1979
+ }
1943
1980
 
1944
- .tds-toggle-switch-track{
1945
- position:relative;
1946
- flex-shrink:0;
1947
- width:var(--tds-toggle-switch-track-width);
1948
- height:var(--tds-toggle-switch-track-height);
1949
- background-color:var(--tds-toggle-switch-track-background-color);
1950
- border-radius:var(--t-border-radius-round);
1951
- transition:var(--tds-toggle-switch-track-transition);
1981
+ .tds-input textarea{
1982
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1983
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1984
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1985
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1986
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1987
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1988
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1989
+ --tds-input-scrollbar-thumb-border-radius:999px;
1990
+ --tds-input-scrollbar-thumb-border-width:3px;
1991
+ --tds-input-scrollbar-track-margin-block:.125rem;
1992
+ scrollbar-color:initial;
1993
+ transition-timing-function:var(--t-ease-in-out);
1994
+ transition-duration:var(--t-duration-200);
1995
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1952
1996
  }
1953
1997
 
1954
- .tds-toggle-switch-track::before{
1955
- position:absolute;
1956
- top:var(--t-spacing-fourth);
1957
- left:var(--t-spacing-fourth);
1958
- width:var(--tds-toggle-switch-thumb-size);
1959
- height:var(--tds-toggle-switch-thumb-size);
1960
- content:"";
1961
- background-color:#fff;
1962
- border-radius:var(--t-border-radius-round);
1963
- transform:var(--tds-toggle-switch-thumb-transform);
1964
- transition:var(--tds-toggle-switch-thumb-transition);
1965
- }
1998
+ @media (pointer: fine){
1999
+ :is(.tds-input textarea)::-webkit-scrollbar{
2000
+ width:12px;
2001
+ height:12px;
2002
+ cursor:default;
2003
+ }
1966
2004
 
1967
- @media (prefers-reduced-motion: reduce){
2005
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2006
+ cursor:default;
2007
+ background:var(--tds-input-scrollbar-thumb-color);
2008
+ background-clip:content-box;
2009
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2010
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2011
+ }
1968
2012
 
1969
- .tds-toggle-switch-track{
1970
- --tds-toggle-switch-track-transition:none;
1971
- --tds-toggle-switch-thumb-transition:none;
1972
- }
1973
- }
2013
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2014
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2015
+ }
1974
2016
 
1975
- .tds-toggle-switch-description{
1976
- display:flex;
1977
- grid-area:2 / 2;
1978
- align-items:flex-start;
1979
- padding-inline-start:var(--t-spacing-1);
1980
- margin:0;
1981
- font-size:var(--tds-toggle-switch-description-font-size);
1982
- line-height:var(--tds-toggle-switch-description-line-height);
1983
- color:var(--tds-toggle-switch-description-color);
1984
- cursor:text;
1985
- }
2017
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2018
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2019
+ }
1986
2020
 
1987
- .tds-toggle-switch--sm{
1988
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1989
- --tds-toggle-switch-line-height:1.35;
1990
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1991
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1992
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1993
- --tds-toggle-switch-description-line-height:1.3;
1994
- }
2021
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2022
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2023
+ }
1995
2024
 
1996
- .tds-toggle-switch--hide-label{
1997
- --tds-toggle-switch-display:inline-flex;
1998
- }
2025
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2026
+ background:var(--tds-input-scrollbar-surface-color);
2027
+ }
1999
2028
 
2000
- @layer t-critical{
2001
- tds-page-header:not(.hydrated){
2002
- display:none;
2003
- }
2004
- }
2029
+ :is(.tds-input textarea)::-webkit-resizer{
2030
+ background:var(--tds-input-resizer-icon) no-repeat;
2031
+ background-position:right bottom;
2032
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2033
+ }
2005
2034
 
2006
- @layer t-component{
2007
- .tds-page-header{
2008
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2009
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2010
- --tds-page-header-color:var(--t-text-color);
2011
- --tds-page-header-bottom-border-color:transparent;
2012
- --tds-page-header-headline-color:var(--t-text-color-headline);
2013
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2014
- --tds-page-header-padding-x:var(--t-spacing-2);
2015
- --tds-page-header-padding-y:var(--t-spacing-2);
2016
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2017
- --tds-page-header-nav-gap:var(--t-spacing-1);
2018
- --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%);
2019
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2020
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2021
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2022
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2023
- --tds-page-header-nav-item-border-width:1px;
2035
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2036
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2037
+ cursor:default;
2038
+ }
2024
2039
 
2025
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2026
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2040
+ @supports (-moz-appearance: none){
2041
+ :is(.tds-input textarea){
2042
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2043
+ scrollbar-width:thin;
2044
+ }
2027
2045
 
2028
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2029
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2030
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2046
+ @media (hover){
2047
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2048
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2049
+ }
2050
+ }
2051
+ }
2052
+ }
2031
2053
 
2032
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2033
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2054
+ .tds-radio-group{
2055
+ --tds-radio-group-font-size:var(--t-font-size-md);
2056
+ --tds-radio-group-line-height:1.4;
2057
+ --tds-radio-group-gap:var(--t-spacing-1);
2034
2058
 
2035
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2036
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2037
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2059
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2060
+ --tds-radio-group-description-line-height:1.35;
2061
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2062
+ --tds-radio-group-description-invalid-icon-display:none;
2063
+ display:flex;
2064
+ flex-direction:column;
2065
+ gap:0;
2066
+ padding:0;
2067
+ margin:0;
2038
2068
 
2039
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2040
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2041
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2042
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2043
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2069
+ font-size:var(--tds-radio-group-font-size);
2070
+ line-height:var(--tds-radio-group-line-height);
2071
+ border:0;
2072
+ }
2073
+
2074
+ .tds-radio-group legend{
2075
+ float:left;
2076
+ padding:0;
2077
+ margin:0;
2044
2078
  }
2045
2079
 
2046
- .tds-page-header--profile{
2047
- --tds-page-header-padding-y:20px;
2080
+ .tds-radio-group[aria-invalid="true"]{
2081
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2082
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2048
2083
  }
2049
2084
 
2050
- @supports (color: light-dark(#fff, #000)){
2051
- .tds-page-header{
2052
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2053
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2085
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2086
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2054
2087
  }
2055
- }
2056
2088
 
2057
- @media (min-width: 600px){
2058
- .tds-page-header{
2059
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2060
- --tds-page-header-color:var(--t-text-color-secondary);
2061
- --tds-page-header-bottom-border-color:var(--t-border-color);
2062
- --tds-page-header-padding-x:var(--t-spacing-3);
2063
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2064
- --tds-page-header-nav-gap:var(--t-spacing-half);
2065
- --tds-page-header-nav-background:transparent;
2066
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2067
- --tds-page-header-nav-item-border-width:1px;
2068
- --tds-page-header-nav-item-color:var(--t-text-color);
2069
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2070
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2071
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2072
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2073
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2074
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2089
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2090
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2091
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2092
+ }
2093
+
2094
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2095
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2096
+ }
2097
+
2098
+ .tds-radio-group:has(input:required) legend::after{
2099
+ margin-left:.25ch;
2100
+ color:var(--t-text-color-status-error);
2101
+ content:"*";
2075
2102
  }
2076
- }
2077
- }
2078
2103
 
2079
- .tds-page-header{
2104
+ .tds-radio-group-fields{
2080
2105
  display:flex;
2081
2106
  flex-direction:column;
2082
- padding-top:var(--tds-page-header-padding-y);
2083
- color:var(--tds-page-header-color);
2084
- background:var(--tds-page-header-background-color);
2085
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2107
+ gap:var(--tds-radio-group-gap);
2108
+ align-items:flex-start;
2109
+ margin-top:var(--t-spacing-1);
2086
2110
  }
2087
2111
 
2088
- .tds-page-header:not(.has-nav){
2089
- padding-bottom:var(--tds-page-header-padding-y);
2090
- }
2091
-
2092
- .tds-page-header.inactive{
2093
- background:var(--tds-page-header-background-color-inactive);
2094
- }
2112
+ .tds-radio-group-description{
2113
+ display:flex;
2114
+ gap:var(--t-spacing-half);
2115
+ align-items:flex-start;
2116
+ margin:var(--t-spacing-fourth) 0 0;
2117
+ font-size:var(--tds-radio-group-description-font-size);
2118
+ line-height:var(--tds-radio-group-description-line-height);
2119
+ color:var(--tds-radio-group-description-color);
2120
+ cursor:text;
2121
+ }
2095
2122
 
2096
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
- width:100%;
2123
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2124
+ display:var(--tds-radio-group-description-invalid-icon-display);
2125
+ flex-shrink:0;
2126
+ margin-top:calc(.5lh - .5em);
2127
+ line-height:var(--tds-radio-group-description-line-height);
2098
2128
  }
2099
2129
 
2100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2101
- display:flex;
2102
- flex-flow:row wrap;
2103
- gap:var(--t-spacing-half) var(--t-spacing-1);
2104
- align-items:flex-start;
2105
- justify-content:flex-start;
2106
- min-width:0;
2107
- }
2130
+ .tds-radio-group--sm{
2131
+ --tds-radio-group-line-height:1.35;
2132
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2133
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2134
+ --tds-radio-group-description-line-height:1.3;
2135
+ }
2108
2136
 
2109
- :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{
2110
- display:flex;
2111
- gap:var(--tds-page-header-nav-gap);
2112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2113
- margin:0 0 -1px;
2114
- overflow:auto;
2115
- list-style:none;
2116
- background:var(--tds-page-header-nav-background);
2117
- }
2137
+ .tds-toggle-switch{
2138
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2139
+ --tds-toggle-switch-cursor:pointer;
2140
+ --tds-toggle-switch-display:inline-grid;
2141
+ --tds-toggle-switch-line-height:1.4;
2118
2142
 
2119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2120
- position:relative;
2121
- display:inline-flex;
2122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2123
- font-size:var(--t-font-size-sm);
2124
- line-height:22px;
2125
- color:var(--tds-page-header-nav-item-color);
2126
- white-space:nowrap;
2127
- text-decoration:none;
2128
- -webkit-appearance:none;
2129
- -moz-appearance:none;
2130
- appearance:none;
2131
- cursor:pointer;
2132
- outline-offset:-2px;
2133
- background-color:var(--tds-page-header-nav-item-background-color);
2134
- background-clip:padding-box;
2135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2138
- }
2143
+ --tds-toggle-switch-label-color:var(--t-form-color);
2139
2144
 
2140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2145
- }
2145
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2146
+ --tds-toggle-switch-track-outline:none;
2147
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2148
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2149
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2146
2150
 
2147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2151
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2152
- }
2151
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2152
+ --tds-toggle-switch-thumb-transform:translateX(0);
2153
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2153
2154
 
2154
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2155
- background-color:var(--tds-page-header-nav-item-background-color-active);
2156
- border-color:var(--tds-page-header-nav-item-border-color-active);
2157
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2158
- }
2155
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2156
+ --tds-toggle-switch-description-line-height:1.35;
2157
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2158
+ position:relative;
2159
2159
 
2160
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2161
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2162
- color:var(--tds-page-header-nav-item-color-disabled);
2163
- cursor:not-allowed;
2164
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2165
- opacity:1;
2166
- }
2160
+ display:var(--tds-toggle-switch-display);
2161
+ grid-template-columns:auto;
2162
+ grid-auto-columns:1fr;
2163
+ gap:var(--t-spacing-fourth) 0;
2164
+ -webkit-user-select:none;
2165
+ -moz-user-select:none;
2166
+ user-select:none;
2167
+ }
2167
2168
 
2168
- @media (min-width: 600px){
2169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2170
- position:absolute;
2171
- inset:auto -1px -1px;
2172
- height:1px;
2173
- pointer-events:none;
2174
- content:"";
2175
- background-color:var(--tds-page-header-bottom-border-color);
2176
- }
2177
- }
2169
+ .tds-toggle-switch input[type="checkbox"]{
2170
+ position:absolute;
2171
+ width:var(--tds-toggle-switch-track-width);
2172
+ height:var(--tds-toggle-switch-track-height);
2173
+ margin:0;
2174
+ -webkit-appearance:none;
2175
+ -moz-appearance:none;
2176
+ appearance:none;
2177
+ cursor:var(--tds-toggle-switch-cursor);
2178
+ outline:var(--tds-toggle-switch-track-outline);
2179
+ outline-offset:var(--t-focus-ring-offset);
2180
+ background-color:transparent;
2181
+ border:0;
2182
+ border-radius:var(--t-border-radius-round);
2183
+ }
2178
2184
 
2179
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
- position:relative;
2185
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2186
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2181
2187
  }
2182
2188
 
2183
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2184
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2185
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2186
- }
2189
+ .tds-toggle-switch label{
2190
+ display:inline-flex;
2191
+ grid-area:1 / 2;
2192
+ padding-inline-start:var(--t-spacing-1);
2193
+ margin-top:-.09375em;
2194
+ font-size:var(--tds-toggle-switch-font-size);
2195
+ font-weight:var(--t-font-weight-normal);
2196
+ line-height:var(--tds-toggle-switch-line-height);
2197
+ color:var(--tds-toggle-switch-label-color);
2198
+ cursor:var(--tds-toggle-switch-cursor);
2199
+ }
2187
2200
 
2188
- :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{
2189
- position:absolute;
2190
- top:-5px;
2191
- right:-2px;
2192
- width:10px;
2193
- height:10px;
2194
- content:"";
2195
- background:var(--tds-page-header-nav-item-indicator-color);
2196
- border-radius:50%;
2197
- }
2201
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2202
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2203
+ }
2198
2204
 
2199
- @media (prefers-reduced-motion: no-preference){
2200
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2201
- animation:indicator-pulse 1.25s ease infinite;
2202
- }
2203
- }
2205
+ .tds-toggle-switch:has(input:checked){
2206
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2207
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2208
+ }
2204
2209
 
2205
- .tds-page-header__title-bar{
2206
- display:flex;
2207
- flex-direction:column;
2208
- gap:var(--t-spacing-2) var(--t-spacing-1);
2209
- align-items:flex-start;
2210
- justify-content:space-between;
2211
- padding:0 var(--tds-page-header-padding-x);
2212
- }
2210
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2211
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2212
+ }
2213
2213
 
2214
- .tds-page-header--profile > .tds-page-header__title-bar{
2215
- align-items:center;
2214
+ .tds-toggle-switch:has(input:disabled){
2215
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2216
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2217
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2218
+ --tds-toggle-switch-cursor:not-allowed;
2216
2219
  }
2217
2220
 
2218
- .tds-page-header__primary{
2219
- width:100%;
2221
+ .tds-toggle-switch-track{
2222
+ position:relative;
2223
+ flex-shrink:0;
2224
+ width:var(--tds-toggle-switch-track-width);
2225
+ height:var(--tds-toggle-switch-track-height);
2226
+ background-color:var(--tds-toggle-switch-track-background-color);
2227
+ border-radius:var(--t-border-radius-round);
2228
+ transition:var(--tds-toggle-switch-track-transition);
2220
2229
  }
2221
2230
 
2222
- .tds-page-header__primary h1{
2223
- margin:0;
2224
- font-size:var(--tds-page-header-headline-font-size);
2225
- font-weight:var(--t-font-weight-normal);
2226
- line-height:32px;
2227
- color:var(--tds-page-header-headline-color);
2228
- overflow-wrap:break-word;
2229
- }
2230
-
2231
- @media (min-width: 960px){
2232
- .tds-page-header__primary{
2233
- flex:1 1 max-content;
2234
- width:auto;
2235
- min-width:0;
2236
- max-width:100%;
2231
+ .tds-toggle-switch-track::before{
2232
+ position:absolute;
2233
+ top:var(--t-spacing-fourth);
2234
+ left:var(--t-spacing-fourth);
2235
+ width:var(--tds-toggle-switch-thumb-size);
2236
+ height:var(--tds-toggle-switch-thumb-size);
2237
+ content:"";
2238
+ background-color:#fff;
2239
+ border-radius:var(--t-border-radius-round);
2240
+ transform:var(--tds-toggle-switch-thumb-transform);
2241
+ transition:var(--tds-toggle-switch-thumb-transition);
2237
2242
  }
2238
2243
 
2239
- .tds-page-header__title-bar,
2240
- .tds-page-header--profile .tds-page-header__title-bar{
2241
- flex-flow:row nowrap;
2242
- row-gap:12px;
2243
- align-items:flex-start;
2244
- }
2245
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
- width:auto;
2247
- }
2244
+ @media (prefers-reduced-motion: reduce){
2248
2245
 
2249
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
- justify-content:flex-end;
2251
- }
2246
+ .tds-toggle-switch-track{
2247
+ --tds-toggle-switch-track-transition:none;
2248
+ --tds-toggle-switch-thumb-transition:none;
2252
2249
  }
2250
+ }
2253
2251
 
2254
- .tds-page-header-phone,
2255
- .tds-page-header-email{
2256
- color:var(--tds-page-header-color);
2257
- white-space:nowrap;
2258
- }
2259
- .tds-page-header-email{
2260
- max-width:100%;
2261
- overflow:hidden;
2262
- text-overflow:ellipsis;
2252
+ .tds-toggle-switch-description{
2253
+ display:flex;
2254
+ grid-area:2 / 2;
2255
+ align-items:flex-start;
2256
+ padding-inline-start:var(--t-spacing-1);
2257
+ margin:0;
2258
+ font-size:var(--tds-toggle-switch-description-font-size);
2259
+ line-height:var(--tds-toggle-switch-description-line-height);
2260
+ color:var(--tds-toggle-switch-description-color);
2261
+ cursor:text;
2263
2262
  }
2264
2263
 
2265
- @keyframes indicator-pulse{
2266
- 0%{
2267
- opacity:.3;
2268
- transform:scale(.9);
2269
- }
2264
+ .tds-toggle-switch--sm{
2265
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2266
+ --tds-toggle-switch-line-height:1.35;
2267
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2268
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2269
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2270
+ --tds-toggle-switch-description-line-height:1.3;
2271
+ }
2270
2272
 
2271
- 100%{
2272
- opacity:0;
2273
- transform:scale(1.75);
2274
- }
2273
+ .tds-toggle-switch--hide-label{
2274
+ --tds-toggle-switch-display:inline-flex;
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{
@@ -3929,69 +3929,235 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3929
3929
  [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
3930
3930
  [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
3931
3931
 
3932
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
3932
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
3933
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
3934
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
3935
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
3936
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
3937
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
3938
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
3939
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
3940
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
3941
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
3942
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
3943
+
3944
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3955
+
3956
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
3959
+
3960
+ [data-padding-xl="0"]{ padding:0; }
3961
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
3971
+
3972
+ [data-padding-block-xl="0"]{ padding-block:0; }
3973
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
3983
+
3984
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
3995
+ }
3996
+
3997
+ .tds-popover{
3998
+ max-inline-size:24rem;
3999
+ overflow:auto;
4000
+ overscroll-behavior:none;
4001
+ outline:0;
4002
+ scrollbar-color:#0004 var(--t-surface-color-card);
4003
+ scrollbar-width:thin;
4004
+ background:var(--t-surface-color-card);
4005
+ background-clip:padding-box;
4006
+ border:1px solid var(--t-border-color);
4007
+ border-radius:var(--t-border-radius);
4008
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4009
+ }
4010
+
4011
+ @media (prefers-reduced-motion: no-preference){
4012
+ .tds-popover[data-entering]{
4013
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4014
+ }
4015
+
4016
+ .tds-popover[data-exiting]{
4017
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4018
+ }
4019
+
4020
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
4021
+ will-change:opacity, transform;
4022
+ }
4023
+
4024
+ @keyframes tds-popover{
4025
+ from{
4026
+ opacity:0;
4027
+ transform:translateY(-8px);
4028
+ }
4029
+ }
4030
+ }
4031
+
4032
+ .tds-popover-content{
4033
+ display:flex;
4034
+ flex-direction:column;
4035
+ padding:var(--t-spacing-1);
4036
+ outline:0;
4037
+ }
4038
+
4039
+ .tds-segmented-control{
4040
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4041
+ --tds-segmented-control-padding:var(--t-spacing-half);
4042
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4043
+ --tds-segmented-control-icon-size:.66666667lh;
4044
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4045
+ --tds-segmented-control-max-width:280px;
4046
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4047
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4048
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4049
+ --tds-segmented-control-width:fit-content;
4050
+
4051
+ display:flex;
4052
+ flex-direction:column;
4053
+ gap:var(--t-spacing-half);
4054
+ align-items:flex-start;
4055
+ width:var(--tds-segmented-control-width);
4056
+ }
4057
+
4058
+ .tds-segmented-control--sm{
4059
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4060
+ --tds-segmented-control-padding-inline:7px;
4061
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4062
+ }
4063
+
4064
+ .tds-segmented-control--full-width{
4065
+ --tds-segmented-control-width:100%;
4066
+ --tds-segmented-control-max-width:none;
4067
+ }
4068
+
4069
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4070
+ flex:1 1 0;
4071
+ }
4072
+
4073
+ .tds-segmented-control-label{
4074
+ font-size:var(--tds-segmented-control-font-size);
4075
+ font-weight:var(--t-font-weight-normal);
4076
+ color:var(--t-text-color-headline);
4077
+ }
4078
+
4079
+ .tds-segmented-control-label--hidden{
4080
+ position:absolute;
4081
+ width:1px;
4082
+ height:1px;
4083
+ overflow:hidden;
4084
+ white-space:nowrap;
4085
+ clip-path:inset(50%);
4086
+ }
4087
+
4088
+ .tds-segmented-control-track{
4089
+ display:inline-flex;
4090
+ gap:var(--tds-segmented-control-track-gap);
4091
+ width:var(--tds-segmented-control-width);
4092
+ padding:var(--tds-segmented-control-padding);
4093
+ background-color:var(--t-form-background-color);
4094
+ border:1px solid var(--t-border-color);
4095
+ border-radius:var(--tds-segmented-control-border-radius);
4096
+ }
4097
+
4098
+ .tds-segmented-control-segment{
4099
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4100
+ --tds-segmented-control-background-color:transparent;
4101
+
4102
+ display:inline-flex;
4103
+ gap:var(--t-spacing-1);
4104
+ align-items:center;
4105
+ justify-content:center;
4106
+ max-width:var(--tds-segmented-control-max-width);
4107
+ min-height:var(--tds-segmented-control-min-height);
4108
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4109
+ padding-inline:var(--tds-segmented-control-padding-inline);
4110
+ font:inherit;
4111
+ font-size:var(--tds-segmented-control-font-size);
4112
+ color:var(--tds-segmented-control-color);
4113
+ text-align:center;
4114
+ cursor:pointer;
4115
+ -webkit-user-select:none;
4116
+ -moz-user-select:none;
4117
+ user-select:none;
4118
+ background-color:var(--tds-segmented-control-background-color);
4119
+ border:0;
4120
+ border-radius:var(--t-border-radius-sm);
4121
+ transition-timing-function:var(--t-ease-in-out);
4122
+ transition-duration:var(--t-duration-200);
4123
+ transition-property:color, background-color;
4124
+ }
4125
+
4126
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4127
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4128
+ }
4129
+
4130
+ .tds-segmented-control-segment .symbol{
4131
+ display:block;
4132
+ flex-shrink:0;
4133
+ width:var(--tds-segmented-control-icon-size);
4134
+ height:var(--tds-segmented-control-icon-size);
4135
+ }
3943
4136
 
3944
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
3945
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3946
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3947
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3948
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3949
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3950
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3951
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3952
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3953
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3954
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4137
+ .tds-segmented-control-segment:focus-visible{
4138
+ outline:var(--t-focus-ring-outline);
4139
+ outline-offset:var(--t-focus-ring-offset);
4140
+ }
3955
4141
 
3956
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
3957
- [data-flex-basis-xl="0"]{ flex-basis:0; }
3958
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4142
+ .tds-segmented-control-segment[aria-checked="true"]{
4143
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4144
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
3959
4145
 
3960
- [data-padding-xl="0"]{ padding:0; }
3961
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
3962
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
3963
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
3964
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
3965
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
3966
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
3967
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
3968
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
3969
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
3970
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4146
+ cursor:default;
4147
+ }
3971
4148
 
3972
- [data-padding-block-xl="0"]{ padding-block:0; }
3973
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
3974
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
3975
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
3976
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
3977
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
3978
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
3979
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
3980
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
3981
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
3982
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4149
+ .tds-segmented-control-segment:disabled{
4150
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4151
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
3983
4152
 
3984
- [data-padding-inline-xl="0"]{ padding-inline:0; }
3985
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3986
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
3987
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
3988
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3989
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
3990
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
3991
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
3992
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
3993
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
3994
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4153
+ pointer-events:none;
4154
+ }
4155
+
4156
+ .tds-segmented-control-segment--interaction-subtle{
4157
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4158
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4159
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4160
+ --tds-segmented-control-background-color-disabled:transparent;
3995
4161
  }
3996
4162
 
3997
4163
  .tds-data-table{
@@ -4471,172 +4637,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4471
4637
  }
4472
4638
  }
4473
4639
 
4474
- .tds-segmented-control{
4475
- --tds-segmented-control-font-size:var(--t-font-size-md);
4476
- --tds-segmented-control-padding:var(--t-spacing-half);
4477
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4478
- --tds-segmented-control-icon-size:.66666667lh;
4479
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4480
- --tds-segmented-control-max-width:280px;
4481
- --tds-segmented-control-min-height:var(--t-container-size-md);
4482
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4483
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4484
- --tds-segmented-control-width:fit-content;
4485
-
4486
- display:flex;
4487
- flex-direction:column;
4488
- gap:var(--t-spacing-half);
4489
- align-items:flex-start;
4490
- width:var(--tds-segmented-control-width);
4491
- }
4492
-
4493
- .tds-segmented-control--sm{
4494
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4495
- --tds-segmented-control-padding-inline:7px;
4496
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4497
- }
4498
-
4499
- .tds-segmented-control--full-width{
4500
- --tds-segmented-control-width:100%;
4501
- --tds-segmented-control-max-width:none;
4502
- }
4503
-
4504
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4505
- flex:1 1 0;
4506
- }
4507
-
4508
- .tds-segmented-control-label{
4509
- font-size:var(--tds-segmented-control-font-size);
4510
- font-weight:var(--t-font-weight-normal);
4511
- color:var(--t-text-color-headline);
4512
- }
4513
-
4514
- .tds-segmented-control-label--hidden{
4515
- position:absolute;
4516
- width:1px;
4517
- height:1px;
4518
- overflow:hidden;
4519
- white-space:nowrap;
4520
- clip-path:inset(50%);
4521
- }
4522
-
4523
- .tds-segmented-control-track{
4524
- display:inline-flex;
4525
- gap:var(--tds-segmented-control-track-gap);
4526
- width:var(--tds-segmented-control-width);
4527
- padding:var(--tds-segmented-control-padding);
4528
- background-color:var(--t-form-background-color);
4529
- border:1px solid var(--t-border-color);
4530
- border-radius:var(--tds-segmented-control-border-radius);
4531
- }
4532
-
4533
- .tds-segmented-control-segment{
4534
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4535
- --tds-segmented-control-background-color:transparent;
4536
-
4537
- display:inline-flex;
4538
- gap:var(--t-spacing-1);
4539
- align-items:center;
4540
- justify-content:center;
4541
- max-width:var(--tds-segmented-control-max-width);
4542
- min-height:var(--tds-segmented-control-min-height);
4543
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4544
- padding-inline:var(--tds-segmented-control-padding-inline);
4545
- font:inherit;
4546
- font-size:var(--tds-segmented-control-font-size);
4547
- color:var(--tds-segmented-control-color);
4548
- text-align:center;
4549
- cursor:pointer;
4550
- -webkit-user-select:none;
4551
- -moz-user-select:none;
4552
- user-select:none;
4553
- background-color:var(--tds-segmented-control-background-color);
4554
- border:0;
4555
- border-radius:var(--t-border-radius-sm);
4556
- transition-timing-function:var(--t-ease-in-out);
4557
- transition-duration:var(--t-duration-200);
4558
- transition-property:color, background-color;
4559
- }
4560
-
4561
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4562
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4563
- }
4564
-
4565
- .tds-segmented-control-segment .symbol{
4566
- display:block;
4567
- flex-shrink:0;
4568
- width:var(--tds-segmented-control-icon-size);
4569
- height:var(--tds-segmented-control-icon-size);
4570
- }
4571
-
4572
- .tds-segmented-control-segment:focus-visible{
4573
- outline:var(--t-focus-ring-outline);
4574
- outline-offset:var(--t-focus-ring-offset);
4575
- }
4576
-
4577
- .tds-segmented-control-segment[aria-checked="true"]{
4578
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4579
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4580
-
4581
- cursor:default;
4582
- }
4583
-
4584
- .tds-segmented-control-segment:disabled{
4585
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4586
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4587
-
4588
- pointer-events:none;
4589
- }
4590
-
4591
- .tds-segmented-control-segment--interaction-subtle{
4592
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4593
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4594
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4595
- --tds-segmented-control-background-color-disabled:transparent;
4596
- }
4597
-
4598
- .tds-popover{
4599
- max-inline-size:24rem;
4600
- overflow:auto;
4601
- overscroll-behavior:none;
4602
- outline:0;
4603
- scrollbar-color:#0004 var(--t-surface-color-card);
4604
- scrollbar-width:thin;
4605
- background:var(--t-surface-color-card);
4606
- background-clip:padding-box;
4607
- border:1px solid var(--t-border-color);
4608
- border-radius:var(--t-border-radius);
4609
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4610
- }
4611
-
4612
- @media (prefers-reduced-motion: no-preference){
4613
- .tds-popover[data-entering]{
4614
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4615
- }
4616
-
4617
- .tds-popover[data-exiting]{
4618
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4619
- }
4620
-
4621
- .tds-popover[data-entering],.tds-popover[data-exiting]{
4622
- will-change:opacity, transform;
4623
- }
4624
-
4625
- @keyframes tds-popover{
4626
- from{
4627
- opacity:0;
4628
- transform:translateY(-8px);
4629
- }
4630
- }
4631
- }
4632
-
4633
- .tds-popover-content{
4634
- display:flex;
4635
- flex-direction:column;
4636
- padding:var(--t-spacing-1);
4637
- outline:0;
4638
- }
4639
-
4640
4640
  .tds-pagination{
4641
4641
  --tds-pagination-background-color:var(--t-surface-color-canvas);
4642
4642
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);
@@ -7005,11 +7005,12 @@ a.tds-dropdown-item:is(:hover, :active){
7005
7005
  }
7006
7006
 
7007
7007
  @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
7008
+ @media (hover) and (pointer: fine){
7008
7009
  .tds-select select:has(> button){
7009
- padding-inline-end:0;
7010
- background-image:none;
7010
+ padding-inline-end:0;
7011
+ background-image:none;
7011
7012
  }
7012
- @media (hover) and (pointer: fine){
7013
+
7013
7014
  :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
7014
7015
  padding-block:0;
7015
7016
  -webkit-appearance:base-select;