@planningcenter/tapestry 4.2.1-rc.1 → 4.2.1-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +979 -979
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +979 -979
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,482 +677,323 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
-
681
- @media (prefers-reduced-motion: no-preference){
682
-
683
- :root{
684
- interpolate-size:allow-keywords;
680
+ .tds-button-group{
681
+ display:inline-flex;
685
682
  }
686
- }
683
+ .tds-button-group > .tds-btn{
684
+ --tds-button-group-item-z-index:1;
687
685
 
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
686
+ position:relative;
687
+ z-index:var(--tds-button-group-item-z-index);
688
+ border-radius:0;
689
+ }
690
+ :is(.tds-button-group > .tds-btn):not(:first-child){
691
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
+ }
693
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
+ position:absolute;
695
+ inset-block:calc(var(--tds-btn-border-width) * -1);
696
+ width:var(--tds-btn-border-width);
697
+ pointer-events:none;
698
+ content:"";
699
+ background-color:var(--t-border-color-white);
700
+ }
701
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
+ }
704
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
+ }
707
+ :is(.tds-button-group > .tds-btn):hover{
708
+ --tds-button-group-item-z-index:2;
709
+ }
710
+ :is(.tds-button-group > .tds-btn):focus-visible{
711
+ --tds-button-group-item-z-index:5;
712
+ }
713
+ .tds-button-group > .tds-btn:first-child{
714
+ border-start-start-radius:var(--tds-btn-border-radius);
715
+ border-end-start-radius:var(--tds-btn-border-radius);
716
+ }
717
+ .tds-button-group > .tds-btn:last-child{
718
+ border-start-end-radius:var(--tds-btn-border-radius);
719
+ border-end-end-radius:var(--tds-btn-border-radius);
720
+ }
693
721
 
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
722
+ @layer t-critical{
723
+ tds-page-header:not(.hydrated){
724
+ display:none;
725
+ }
726
+ }
695
727
 
696
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
697
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
698
- --tds-sidenav-collapse-closed-opacity:0;
699
- --tds-sidenav-collapse-open-opacity:1;
700
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
- --tds-sidenav-collapse-open-transform:translateY(0);
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;
702
746
 
703
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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);
707
749
 
708
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
- --tds-sidenav-item-nested-background-selected:transparent;
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);
711
753
 
712
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
715
756
 
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
- }
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);
719
760
 
720
- @media (prefers-reduced-motion: reduce){
721
- tds-sidenav,
722
- .tds-sidenav{
723
- --tds-sidenav-collapse-transition-enter:none;
724
- --tds-sidenav-collapse-transition-exit:none;
725
- --tds-sidenav-collapse-closed-transform:none;
726
- --tds-sidenav-collapse-open-transform:none;
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);
727
766
  }
728
- }
729
767
 
730
- .tds-sidenav--theme-gray{
731
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
768
+ .tds-page-header--profile{
769
+ --tds-page-header-padding-y:20px;
736
770
  }
737
- }
738
771
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- 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
+ }
741
777
  }
742
778
 
743
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
- flex-direction:column;
745
- gap:var(--t-spacing-half);
746
- width:100%;
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
+ }
747
798
  }
748
-
749
- .tds-sidenav-section-list{
750
- width:100%;
751
- padding:0;
752
- margin:0;
753
- list-style:none;
754
799
  }
755
800
 
756
- .tds-sidenav-section-header{
801
+ .tds-page-header{
757
802
  display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- 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);
761
808
  }
762
809
 
763
- .tds-sidenav-section-header h2{
764
- margin:0;
765
- font-size:var(--t-font-size-sm);
766
- font-weight:var(--t-font-weight-semibold);
767
- line-height:1.35;
768
- color:var(--t-text-color-secondary);
769
- text-transform:uppercase;
810
+ .tds-page-header:not(.has-nav){
811
+ padding-bottom:var(--tds-page-header-padding-y);
770
812
  }
771
813
 
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
814
+ .tds-page-header.inactive{
815
+ background:var(--tds-page-header-background-color-inactive);
774
816
  }
775
817
 
776
- .tds-sidenav-section-header [slot="label-actions"]{
777
- display:flex;
778
- gap:var(--t-spacing-half);
779
- align-items:center;
818
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
819
+ width:100%;
780
820
  }
781
821
 
782
- .tds-sidenav-section [slot="section-actions"]{
783
- display:flex;
784
- gap:12px;
785
- align-items:center;
786
- min-height:42px;
787
- padding:var(--t-spacing-1) 0;
788
- }
789
-
790
- .tds-sidenav-section-list,
791
- .tds-sidenav-item{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- }
796
-
797
- .tds-sidenav-item :is(a,button){
798
- position:relative;
822
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
799
823
  display:flex;
800
- gap:12px;
801
- align-items:center;
802
- width:100%;
803
- padding:12px;
804
- overflow:hidden;
805
- font-size:var(--t-font-size-sm);
806
- line-height:18px;
807
- color:var(--t-text-color-headline);
808
- white-space:nowrap;
809
- text-decoration:none;
810
- -webkit-appearance:none;
811
- -moz-appearance:none;
812
- appearance:none;
813
- cursor:pointer;
814
- background-color:var(--tds-sidenav-item-background, transparent);
815
- border:0;
816
- border-radius:var(--t-border-radius);
817
- transition:var(--tds-sidenav-item-transition);
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;
818
829
  }
819
830
 
820
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
- display:block;
822
- flex:1;
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- text-align:left;
826
- white-space:nowrap;
827
- }
828
-
829
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
- color:var(--t-text-color-headline);
832
- text-decoration:none;
833
- }
834
-
835
- :is(.tds-sidenav-item :is(a,button)):active{
836
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
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);
837
839
  }
838
840
 
839
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
- overflow:hidden;
841
- color:var(--tds-sidenav-item-icon-color);
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;
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;
842
860
  }
843
861
 
844
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
845
- display:block;
846
- width:var(--tds-sidenav-item-icon-size);
847
- height:var(--tds-sidenav-item-icon-size);
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);
848
867
  }
849
868
 
850
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
- --tds-sidenav-indent:19px;
852
- }
853
-
854
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
- visibility:visible;
856
- block-size:auto;
857
- opacity:1;
858
- }
859
-
860
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
863
-
864
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
- font-weight:var(--t-font-weight-semibold);
866
- }
867
-
868
- .tds-sidenav-item:has(.tds-sidenav-section){
869
- display:flex;
870
- flex-direction:column;
871
- gap:var(--t-spacing-half);
872
- }
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
+ }
873
875
 
874
- .tds-sidenav-item .tds-sidenav-section-list{
875
- --tds-sidenav-item-depth:1;
876
- gap:0;
877
- }
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
+ }
878
881
 
879
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
- visibility:hidden;
881
- block-size:0;
882
- overflow-y:clip;
883
- opacity:0;
884
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
885
- }
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
+ }
886
889
 
887
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
- --tds-sidenav-item-depth:2;
889
- }
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
+ }
890
900
 
891
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
- min-height:var(--t-element-size-2xl);
893
- padding-block:9px;
894
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
- line-height:1;
896
- background-color:transparent;
901
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
902
+ position:relative;
897
903
  }
898
904
 
899
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
- position:absolute;
901
- top:0;
902
- bottom:0;
903
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
- width:2px;
905
- content:"";
906
- background-color:var(--tds-sidenav-item-nested-border-color);
907
- transition:var(--tds-sidenav-item-transition);
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);
908
908
  }
909
909
 
910
- :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{
911
911
  position:absolute;
912
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- z-index:-1;
914
- height:100%;
912
+ top:-5px;
913
+ right:-2px;
914
+ width:10px;
915
+ height:10px;
915
916
  content:"";
916
- background-color:var(--tds-sidenav-item-nested-background);
917
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
- transition:var(--tds-sidenav-item-transition);
919
- }
920
-
921
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
- display:block;
923
- text-align:left;
924
- white-space:normal;
925
- }
926
-
927
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
928
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
917
+ background:var(--tds-page-header-nav-item-indicator-color);
918
+ border-radius:50%;
930
919
  }
931
920
 
932
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
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
+ }
934
925
  }
935
926
 
936
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
- font-weight:var(--t-font-weight-medium);
939
- }
940
-
941
- .tds-sidenav-responsive-header{
927
+ .tds-page-header__title-bar{
942
928
  display:flex;
943
- gap:var(--t-spacing-2);
944
- align-items:center;
945
- 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);
946
934
  }
947
935
 
948
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
- order:0;
950
- }
951
-
952
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
- flex:1;
954
- order:1;
955
- margin:0;
956
- font-size:var(--t-font-size-lg);
957
- font-weight:var(--t-font-weight-medium);
958
- color:var(--t-text-color-headline);
936
+ .tds-page-header--profile > .tds-page-header__title-bar{
937
+ align-items:center;
959
938
  }
960
939
 
961
- @media (max-width: 719px){
962
- .tds-sidenav-collapse{
963
- z-index:10001;
964
- display:none;
965
- max-width:min(448px, calc(100vw - 48px));
966
- padding:0;
967
- margin:12px 0;
968
- position-area:bottom span-right;
969
- overflow:hidden;
970
- outline:0;
971
- background:var(--t-surface-color-card);
972
- border:0;
973
- border-radius:6px;
974
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
- opacity:var(--tds-sidenav-collapse-open-opacity);
976
- transform:var(--tds-sidenav-collapse-open-transform);
977
- transition:var(--tds-sidenav-collapse-transition-enter);
978
- will-change:transform;
979
- }
940
+ .tds-page-header__primary{
941
+ width:100%;
942
+ }
980
943
 
981
- .tds-sidenav-scroll-container{
982
- --webkit-overflow-scrolling:touch;
983
- display:block;
984
- width:100%;
985
- height:-moz-fit-content;
986
- height:fit-content;
987
- padding:var(--t-spacing-2);
988
- overflow-y:auto;
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;
989
951
  }
990
952
 
991
- .tds-sidenav-item :is(a, button) :is(.prefix){
992
- display:none;
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%;
993
959
  }
994
- @supports selector(:popover-open){
995
- .tds-sidenav-collapse:popover-open{
996
- display:flex;
997
- }
998
960
 
999
- .tds-sidenav-collapse:not(:popover-open){
1000
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
- transition:var(--tds-sidenav-collapse-transition-exit);
1002
- }
1003
-
1004
- @starting-style{
1005
- .tds-sidenav-collapse:popover-open{
1006
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
- transform:var(--tds-sidenav-collapse-closed-transform);
1008
- }
1009
- }
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;
1010
966
  }
1011
- @supports not selector(:popover-open){
1012
- .tds-sidenav-collapse.\:popover-open{
1013
- display:flex;
967
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
968
+ width:auto;
1014
969
  }
1015
970
 
1016
- .tds-sidenav-collapse:not(.\:popover-open){
1017
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
- 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;
1019
973
  }
1020
- }
1021
974
  }
1022
975
 
1023
- @media (min-width: 720px){
1024
- .tds-sidenav-responsive-header{
1025
- display:none;
1026
- }
1027
- }
1028
-
1029
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
- display:none;
1031
- }
1032
-
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
1035
- }
1036
-
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1040
- }
1041
-
1042
- .tds-button-group{
1043
- display:inline-flex;
976
+ .tds-page-header-phone,
977
+ .tds-page-header-email{
978
+ color:var(--tds-page-header-color);
979
+ white-space:nowrap;
1044
980
  }
1045
- .tds-button-group > .tds-btn{
1046
- --tds-button-group-item-z-index:1;
1047
-
1048
- position:relative;
1049
- z-index:var(--tds-button-group-item-z-index);
1050
- border-radius:0;
1051
- }
1052
- :is(.tds-button-group > .tds-btn):not(:first-child){
1053
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1054
- }
1055
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1056
- position:absolute;
1057
- inset-block:calc(var(--tds-btn-border-width) * -1);
1058
- width:var(--tds-btn-border-width);
1059
- pointer-events:none;
1060
- content:"";
1061
- background-color:var(--t-border-color-white);
1062
- }
1063
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1064
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1065
- }
1066
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1067
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1068
- }
1069
- :is(.tds-button-group > .tds-btn):hover{
1070
- --tds-button-group-item-z-index:2;
1071
- }
1072
- :is(.tds-button-group > .tds-btn):focus-visible{
1073
- --tds-button-group-item-z-index:5;
1074
- }
1075
- .tds-button-group > .tds-btn:first-child{
1076
- border-start-start-radius:var(--tds-btn-border-radius);
1077
- border-end-start-radius:var(--tds-btn-border-radius);
1078
- }
1079
- .tds-button-group > .tds-btn:last-child{
1080
- border-start-end-radius:var(--tds-btn-border-radius);
1081
- border-end-end-radius:var(--tds-btn-border-radius);
1082
- }
1083
-
1084
- .tds-checkbox-group{
1085
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1086
- --tds-checkbox-group-line-height:1.4;
1087
- --tds-checkbox-group-gap:var(--t-spacing-1);
1088
-
1089
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1090
- --tds-checkbox-group-description-line-height:1.35;
1091
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1092
- --tds-checkbox-group-description-invalid-icon-display:none;
1093
- display:flex;
1094
- flex-direction:column;
1095
- gap:0;
1096
- padding:0;
1097
- margin:0;
1098
-
1099
- font-size:var(--tds-checkbox-group-font-size);
1100
- line-height:var(--tds-checkbox-group-line-height);
1101
- border:0;
981
+ .tds-page-header-email{
982
+ max-width:100%;
983
+ overflow:hidden;
984
+ text-overflow:ellipsis;
1102
985
  }
1103
986
 
1104
- .tds-checkbox-group legend{
1105
- float:left;
1106
- padding:0;
1107
- margin:0;
1108
- }
1109
-
1110
- .tds-checkbox-group[aria-invalid="true"]{
1111
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1112
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
987
+ @keyframes indicator-pulse{
988
+ 0%{
989
+ opacity:.3;
990
+ transform:scale(.9);
1113
991
  }
1114
992
 
1115
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1116
- margin-left:.25ch;
1117
- color:var(--t-text-color-status-error);
1118
- content:"*";
1119
- }
1120
-
1121
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
- content:none;
1123
- }
1124
-
1125
- .tds-checkbox-group-fields{
1126
- display:flex;
1127
- flex-direction:column;
1128
- gap:var(--tds-checkbox-group-gap);
1129
- align-items:flex-start;
1130
- margin-top:var(--t-spacing-1);
1131
- }
1132
-
1133
- .tds-checkbox-group-description{
1134
- display:flex;
1135
- gap:var(--t-spacing-half);
1136
- align-items:flex-start;
1137
- margin:var(--t-spacing-fourth) 0 0;
1138
- font-size:var(--tds-checkbox-group-description-font-size);
1139
- line-height:var(--tds-checkbox-group-description-line-height);
1140
- color:var(--tds-checkbox-group-description-color);
1141
- cursor:text;
1142
- }
1143
-
1144
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1145
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1146
- flex-shrink:0;
1147
- margin-top:calc(.5lh - .5em);
1148
- line-height:var(--tds-checkbox-group-description-line-height);
993
+ 100%{
994
+ opacity:0;
995
+ transform:scale(1.75);
1149
996
  }
1150
-
1151
- .tds-checkbox-group--sm{
1152
- --tds-checkbox-group-line-height:1.35;
1153
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1154
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1155
- --tds-checkbox-group-description-line-height:1.3;
1156
997
  }
1157
998
 
1158
999
  .tds-checkbox{
@@ -1350,489 +1191,441 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1191
  --tds-checkbox-description-line-height:1.3;
1351
1192
  }
1352
1193
 
1194
+ .tds-checkbox-group{
1195
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1196
+ --tds-checkbox-group-line-height:1.4;
1197
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1353
1198
 
1354
- :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{
1355
- -webkit-appearance:none;
1356
- appearance:none;
1357
- }
1358
-
1359
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1360
- inline-size:1em;
1361
- block-size:2em;
1362
- }
1363
- @supports (field-sizing: content){
1364
- .tds-input--auto-width{
1365
- inline-size:-moz-fit-content;
1366
- inline-size:fit-content;
1367
- min-inline-size:min(100%, 122px);
1368
- }
1369
-
1370
- .tds-input--auto-width input{
1371
- field-sizing:content;
1372
- inline-size:auto;
1373
- }
1374
- }
1375
-
1376
- .tds-radio-group{
1377
- --tds-radio-group-font-size:var(--t-font-size-md);
1378
- --tds-radio-group-line-height:1.4;
1379
- --tds-radio-group-gap:var(--t-spacing-1);
1380
-
1381
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1382
- --tds-radio-group-description-line-height:1.35;
1383
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1384
- --tds-radio-group-description-invalid-icon-display:none;
1199
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1200
+ --tds-checkbox-group-description-line-height:1.35;
1201
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1202
+ --tds-checkbox-group-description-invalid-icon-display:none;
1385
1203
  display:flex;
1386
1204
  flex-direction:column;
1387
1205
  gap:0;
1388
1206
  padding:0;
1389
1207
  margin:0;
1390
1208
 
1391
- font-size:var(--tds-radio-group-font-size);
1392
- line-height:var(--tds-radio-group-line-height);
1209
+ font-size:var(--tds-checkbox-group-font-size);
1210
+ line-height:var(--tds-checkbox-group-line-height);
1393
1211
  border:0;
1394
1212
  }
1395
1213
 
1396
- .tds-radio-group legend{
1214
+ .tds-checkbox-group legend{
1397
1215
  float:left;
1398
1216
  padding:0;
1399
1217
  margin:0;
1400
1218
  }
1401
1219
 
1402
- .tds-radio-group[aria-invalid="true"]{
1403
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1404
- --tds-radio-group-description-invalid-icon-display:inline-block;
1220
+ .tds-checkbox-group[aria-invalid="true"]{
1221
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1222
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1405
1223
  }
1406
1224
 
1407
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1408
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1409
- }
1410
-
1411
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1412
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1413
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1414
- }
1415
-
1416
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1417
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1418
- }
1419
-
1420
- .tds-radio-group:has(input:required) legend::after{
1225
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1421
1226
  margin-left:.25ch;
1422
1227
  color:var(--t-text-color-status-error);
1423
1228
  content:"*";
1424
1229
  }
1425
1230
 
1426
- .tds-radio-group-fields{
1231
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1232
+ content:none;
1233
+ }
1234
+
1235
+ .tds-checkbox-group-fields{
1427
1236
  display:flex;
1428
1237
  flex-direction:column;
1429
- gap:var(--tds-radio-group-gap);
1238
+ gap:var(--tds-checkbox-group-gap);
1430
1239
  align-items:flex-start;
1431
1240
  margin-top:var(--t-spacing-1);
1432
1241
  }
1433
1242
 
1434
- .tds-radio-group-description{
1243
+ .tds-checkbox-group-description{
1435
1244
  display:flex;
1436
1245
  gap:var(--t-spacing-half);
1437
1246
  align-items:flex-start;
1438
1247
  margin:var(--t-spacing-fourth) 0 0;
1439
- font-size:var(--tds-radio-group-description-font-size);
1440
- line-height:var(--tds-radio-group-description-line-height);
1441
- color:var(--tds-radio-group-description-color);
1248
+ font-size:var(--tds-checkbox-group-description-font-size);
1249
+ line-height:var(--tds-checkbox-group-description-line-height);
1250
+ color:var(--tds-checkbox-group-description-color);
1442
1251
  cursor:text;
1443
1252
  }
1444
1253
 
1445
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1446
- display:var(--tds-radio-group-description-invalid-icon-display);
1254
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1255
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1447
1256
  flex-shrink:0;
1448
1257
  margin-top:calc(.5lh - .5em);
1449
- line-height:var(--tds-radio-group-description-line-height);
1258
+ line-height:var(--tds-checkbox-group-description-line-height);
1450
1259
  }
1451
1260
 
1452
- .tds-radio-group--sm{
1453
- --tds-radio-group-line-height:1.35;
1454
- --tds-radio-group-font-size:var(--t-font-size-sm);
1455
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1456
- --tds-radio-group-description-line-height:1.3;
1261
+ .tds-checkbox-group--sm{
1262
+ --tds-checkbox-group-line-height:1.35;
1263
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1264
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1265
+ --tds-checkbox-group-description-line-height:1.3;
1457
1266
  }
1458
1267
 
1459
- .tds-radio{
1460
- --tds-radio-font-size:var(--t-font-size-md);
1461
- --tds-radio-cursor:pointer;
1462
- --tds-radio-line-height:1.4;
1463
- --tds-radio-transition-property:border-width;
1464
-
1465
- --tds-radio-input-size:var(--t-element-size-md);
1466
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1467
- --tds-radio-input-border-color:var(--t-form-border-color);
1468
- --tds-radio-input-border-width:var(--t-form-border-width);
1469
- --tds-radio-input-background-color:var(--t-form-background-color);
1470
1268
 
1471
- --tds-radio-label-color:var(--t-form-color);
1269
+ @media (prefers-reduced-motion: no-preference){
1472
1270
 
1473
- --tds-radio-description-font-size:var(--t-font-size-sm);
1474
- --tds-radio-description-line-height:1.35;
1475
- --tds-radio-description-color:var(--t-text-color-secondary);
1271
+ :root{
1272
+ interpolate-size:allow-keywords;
1273
+ }
1274
+ }
1476
1275
 
1477
- position:relative;
1478
- display:inline-grid;
1479
- grid-template-columns:auto;
1480
- grid-auto-columns:1fr;
1481
- gap:var(--t-spacing-fourth) 0;
1482
- line-height:var(--tds-radio-line-height);
1483
- -webkit-user-select:none;
1484
- -moz-user-select:none;
1485
- user-select:none;
1486
- }
1276
+ @layer tds-component{
1277
+ tds-sidenav,
1278
+ .tds-sidenav{
1279
+ --tds-sidenav-indent:12px;
1280
+ --tds-sidenav-item-depth:0;
1487
1281
 
1488
- .tds-radio label{
1489
- grid-area:1 / 2;
1490
- padding-inline-start:var(--t-spacing-1);
1491
- font-size:var(--tds-radio-font-size);
1492
- font-weight:var(--t-font-weight-normal);
1493
- color:var(--tds-radio-label-color);
1494
- cursor:var(--tds-radio-cursor);
1495
- }
1282
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1496
1283
 
1497
- .tds-radio input[type="radio"]{
1498
- position:relative;
1499
- width:1em;
1500
- height:1em;
1501
- margin:calc((1lh - 1em) / 2) 0 0;
1502
- font-size:var(--tds-radio-font-size);
1503
- line-height:inherit;
1504
- -webkit-appearance:none;
1505
- -moz-appearance:none;
1506
- appearance:none;
1507
- cursor:var(--tds-radio-cursor);
1508
- background-color:var(--tds-radio-input-background-color);
1509
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1510
- border-radius:var(--tds-radio-input-border-radius);
1511
- transition-timing-function:var(--t-ease-in-out);
1512
- transition-duration:var(--t-duration-200);
1513
- transition-property:var(--tds-radio-transition-property);
1514
- }
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);
1515
1290
 
1516
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1517
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1518
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1519
- }
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);
1520
1295
 
1521
- :is(.tds-radio input[type="radio"]):focus-visible{
1522
- outline:var(--t-focus-ring-outline);
1523
- outline-offset:var(--t-focus-ring-offset);
1524
- }
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;
1525
1299
 
1526
- :is(.tds-radio input[type="radio"]):disabled{
1527
- pointer-events:none;
1528
- }
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);
1529
1303
 
1530
- @media (prefers-reduced-motion: reduce){
1304
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1305
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1306
+ }
1531
1307
 
1532
- .tds-radio input[type="radio"]{
1533
- --tds-radio-transition-property:none;
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;
1534
1315
  }
1535
1316
  }
1536
1317
 
1537
- .tds-radio:has(input:checked){
1538
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1539
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1540
- --tds-radio-input-border-width:4px;
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);
1541
1324
  }
1325
+ }
1542
1326
 
1543
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1544
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1545
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1546
- }
1327
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1328
+ display:flex;
1329
+ }
1547
1330
 
1548
- .tds-radio:has(input:user-invalid){
1549
- --tds-radio-input-border-color:var(--t-form-border-color-error);
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%;
1550
1335
  }
1551
1336
 
1552
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1553
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1554
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1555
- }
1337
+ .tds-sidenav-section-list{
1338
+ width:100%;
1339
+ padding:0;
1340
+ margin:0;
1341
+ list-style:none;
1342
+ }
1556
1343
 
1557
- .tds-radio:has(input:disabled){
1558
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1559
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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
+ }
1560
1350
 
1561
- --tds-radio-label-color:var(--t-form-color-disabled);
1562
- --tds-radio-description-color:var(--t-form-color-disabled);
1563
- --tds-radio-cursor:not-allowed;
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;
1564
1358
  }
1565
1359
 
1566
- .tds-radio:has(input:disabled) input:checked{
1567
- --tds-radio-input-background-color:var(--t-form-background-color);
1568
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1569
- }
1360
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1361
+ padding-top:0;
1362
+ }
1570
1363
 
1571
- .tds-radio-description{
1572
- display:flex;
1573
- grid-area:2 / 2;
1574
- gap:var(--t-spacing-half);
1575
- align-items:flex-start;
1576
- padding-inline-start:var(--t-spacing-1);
1577
- margin:0;
1578
- font-size:var(--tds-radio-description-font-size);
1579
- line-height:var(--tds-radio-description-line-height);
1580
- color:var(--tds-radio-description-color);
1581
- cursor:text;
1582
- }
1364
+ .tds-sidenav-section-header [slot="label-actions"]{
1365
+ display:flex;
1366
+ gap:var(--t-spacing-half);
1367
+ align-items:center;
1368
+ }
1583
1369
 
1584
- .tds-radio--sm{
1585
- --tds-radio-line-height:1.35;
1586
- --tds-radio-input-size:var(--t-element-size-sm);
1587
- --tds-radio-font-size:var(--t-font-size-sm);
1588
- --tds-radio-description-font-size:var(--t-font-size-xs);
1589
- --tds-radio-description-line-height:1.3;
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;
1590
1376
  }
1591
1377
 
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");
1378
+ .tds-sidenav-section-list,
1379
+ .tds-sidenav-item{
1380
+ width:100%;
1381
+ padding:0;
1382
+ margin:0;
1596
1383
  }
1597
1384
 
1598
- @supports (x: attr(x type(*))){
1599
-
1600
- .tds-input textarea{
1601
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1602
- }
1385
+ .tds-sidenav-item :is(a,button){
1386
+ position:relative;
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;
1398
+ -webkit-appearance:none;
1399
+ -moz-appearance:none;
1400
+ appearance:none;
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);
1603
1406
  }
1604
1407
 
1605
- .tds-input.tds-textarea--resize-vertical textarea{
1606
- resize:vertical;
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;
1607
1415
  }
1608
1416
 
1609
- .tds-input.tds-textarea--resize-none textarea{
1610
- resize:none;
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;
1611
1421
  }
1612
1422
 
1613
- .tds-input.tds-textarea--resize-auto textarea{
1614
- resize:vertical;
1423
+ :is(.tds-sidenav-item :is(a,button)):active{
1424
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1615
1425
  }
1616
1426
 
1617
- @supports (field-sizing: content){
1618
- .tds-input.tds-textarea--resize-auto textarea{
1619
- field-sizing:content;
1620
- resize:none;
1621
- }
1427
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1428
+ overflow:hidden;
1429
+ color:var(--tds-sidenav-item-icon-color);
1622
1430
  }
1623
1431
 
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
- }
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
+ }
1640
1437
 
1641
- @media (pointer: fine){
1642
- :is(.tds-input textarea)::-webkit-scrollbar{
1643
- width:12px;
1644
- height:12px;
1645
- cursor:default;
1438
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1439
+ --tds-sidenav-indent:19px;
1646
1440
  }
1647
1441
 
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);
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;
1654
1446
  }
1655
1447
 
1656
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1657
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1658
- }
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);
1659
1451
 
1660
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1661
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1662
- }
1452
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1453
+ font-weight:var(--t-font-weight-semibold);
1454
+ }
1663
1455
 
1664
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1665
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1666
- }
1456
+ .tds-sidenav-item:has(.tds-sidenav-section){
1457
+ display:flex;
1458
+ flex-direction:column;
1459
+ gap:var(--t-spacing-half);
1460
+ }
1667
1461
 
1668
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1669
- background:var(--tds-input-scrollbar-surface-color);
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);
1670
1473
  }
1671
1474
 
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);
1475
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1476
+ --tds-sidenav-item-depth:2;
1676
1477
  }
1677
1478
 
1678
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1679
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1680
- cursor:default;
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;
1681
1485
  }
1682
1486
 
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;
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);
1687
1496
  }
1688
1497
 
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
- }
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);
1693
1507
  }
1694
- }
1695
- }
1696
-
1697
- .tds-toggle-switch{
1698
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1699
- --tds-toggle-switch-cursor:pointer;
1700
- --tds-toggle-switch-display:inline-grid;
1701
- --tds-toggle-switch-line-height:1.4;
1702
1508
 
1703
- --tds-toggle-switch-label-color:var(--t-form-color);
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
+ }
1704
1514
 
1705
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1706
- --tds-toggle-switch-track-outline:none;
1707
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1708
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1709
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
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
+ }
1710
1519
 
1711
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1712
- --tds-toggle-switch-thumb-transform:translateX(0);
1713
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
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
+ }
1714
1523
 
1715
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1716
- --tds-toggle-switch-description-line-height:1.35;
1717
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1718
- position:relative;
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
+ }
1719
1528
 
1720
- display:var(--tds-toggle-switch-display);
1721
- grid-template-columns:auto;
1722
- grid-auto-columns:1fr;
1723
- gap:var(--t-spacing-fourth) 0;
1724
- -webkit-user-select:none;
1725
- -moz-user-select:none;
1726
- user-select:none;
1529
+ .tds-sidenav-responsive-header{
1530
+ display:flex;
1531
+ gap:var(--t-spacing-2);
1532
+ align-items:center;
1533
+ width:100%;
1727
1534
  }
1728
1535
 
1729
- .tds-toggle-switch input[type="checkbox"]{
1730
- position:absolute;
1731
- width:var(--tds-toggle-switch-track-width);
1732
- height:var(--tds-toggle-switch-track-height);
1733
- margin:0;
1734
- -webkit-appearance:none;
1735
- -moz-appearance:none;
1736
- appearance:none;
1737
- cursor:var(--tds-toggle-switch-cursor);
1738
- outline:var(--tds-toggle-switch-track-outline);
1739
- outline-offset:var(--t-focus-ring-offset);
1740
- background-color:transparent;
1741
- border:0;
1742
- border-radius:var(--t-border-radius-round);
1536
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1537
+ order:0;
1743
1538
  }
1744
1539
 
1745
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1746
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1747
- }
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
+ }
1748
1548
 
1749
- .tds-toggle-switch label{
1750
- display:inline-flex;
1751
- grid-area:1 / 2;
1752
- padding-inline-start:var(--t-spacing-1);
1753
- margin-top:-.09375em;
1754
- font-size:var(--tds-toggle-switch-font-size);
1755
- font-weight:var(--t-font-weight-normal);
1756
- line-height:var(--tds-toggle-switch-line-height);
1757
- color:var(--tds-toggle-switch-label-color);
1758
- cursor:var(--tds-toggle-switch-cursor);
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;
1759
1567
  }
1760
1568
 
1761
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1762
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
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;
1763
1577
  }
1764
1578
 
1765
- .tds-toggle-switch:has(input:checked){
1766
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1767
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1579
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1580
+ display:none;
1768
1581
  }
1582
+ @supports selector(:popover-open){
1583
+ .tds-sidenav-collapse:popover-open{
1584
+ display:flex;
1585
+ }
1769
1586
 
1770
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1771
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1587
+ .tds-sidenav-collapse:not(:popover-open){
1588
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1589
+ transition:var(--tds-sidenav-collapse-transition-exit);
1772
1590
  }
1773
1591
 
1774
- .tds-toggle-switch:has(input:disabled){
1775
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1776
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1777
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1778
- --tds-toggle-switch-cursor:not-allowed;
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
+ }
1779
1598
  }
1599
+ @supports not selector(:popover-open){
1600
+ .tds-sidenav-collapse.\:popover-open{
1601
+ display:flex;
1602
+ }
1780
1603
 
1781
- .tds-toggle-switch-track{
1782
- position:relative;
1783
- flex-shrink:0;
1784
- width:var(--tds-toggle-switch-track-width);
1785
- height:var(--tds-toggle-switch-track-height);
1786
- background-color:var(--tds-toggle-switch-track-background-color);
1787
- border-radius:var(--t-border-radius-round);
1788
- transition:var(--tds-toggle-switch-track-transition);
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
+ }
1789
1609
  }
1790
1610
 
1791
- .tds-toggle-switch-track::before{
1792
- position:absolute;
1793
- top:var(--t-spacing-fourth);
1794
- left:var(--t-spacing-fourth);
1795
- width:var(--tds-toggle-switch-thumb-size);
1796
- height:var(--tds-toggle-switch-thumb-size);
1797
- content:"";
1798
- background-color:#fff;
1799
- border-radius:var(--t-border-radius-round);
1800
- transform:var(--tds-toggle-switch-thumb-transform);
1801
- transition:var(--tds-toggle-switch-thumb-transition);
1802
- }
1803
-
1804
- @media (prefers-reduced-motion: reduce){
1805
-
1806
- .tds-toggle-switch-track{
1807
- --tds-toggle-switch-track-transition:none;
1808
- --tds-toggle-switch-thumb-transition:none;
1809
- }
1611
+ @media (min-width: 720px){
1612
+ .tds-sidenav-responsive-header{
1613
+ display:none;
1810
1614
  }
1811
-
1812
- .tds-toggle-switch-description{
1813
- display:flex;
1814
- grid-area:2 / 2;
1815
- align-items:flex-start;
1816
- padding-inline-start:var(--t-spacing-1);
1817
- margin:0;
1818
- font-size:var(--tds-toggle-switch-description-font-size);
1819
- line-height:var(--tds-toggle-switch-description-line-height);
1820
- color:var(--tds-toggle-switch-description-color);
1821
- cursor:text;
1822
1615
  }
1823
1616
 
1824
- .tds-toggle-switch--sm{
1825
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1826
- --tds-toggle-switch-line-height:1.35;
1827
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1828
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1829
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1830
- --tds-toggle-switch-description-line-height:1.3;
1831
- }
1617
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1618
+ display:none;
1619
+ }
1832
1620
 
1833
- .tds-toggle-switch--hide-label{
1834
- --tds-toggle-switch-display:inline-flex;
1835
- }
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
+ }
1836
1629
 
1837
1630
  .tds-modal-overlay{
1838
1631
  --tds-modal-min-margin-block:var(--t-spacing-3);
@@ -1997,281 +1790,488 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1997
1790
  }
1998
1791
  }
1999
1792
 
2000
- @layer t-critical{
2001
- tds-page-header:not(.hydrated){
2002
- display:none;
2003
- }
2004
- }
2005
1793
 
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;
1794
+ :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{
1795
+ -webkit-appearance:none;
1796
+ appearance:none;
1797
+ }
2024
1798
 
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);
1799
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1800
+ inline-size:1em;
1801
+ block-size:2em;
1802
+ }
1803
+ @supports (field-sizing: content){
1804
+ .tds-input--auto-width{
1805
+ inline-size:-moz-fit-content;
1806
+ inline-size:fit-content;
1807
+ min-inline-size:min(100%, 122px);
1808
+ }
2027
1809
 
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);
1810
+ .tds-input--auto-width input{
1811
+ field-sizing:content;
1812
+ inline-size:auto;
1813
+ }
1814
+ }
2031
1815
 
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);
1816
+ .tds-radio-group{
1817
+ --tds-radio-group-font-size:var(--t-font-size-md);
1818
+ --tds-radio-group-line-height:1.4;
1819
+ --tds-radio-group-gap:var(--t-spacing-1);
2034
1820
 
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);
1821
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1822
+ --tds-radio-group-description-line-height:1.35;
1823
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1824
+ --tds-radio-group-description-invalid-icon-display:none;
1825
+ display:flex;
1826
+ flex-direction:column;
1827
+ gap:0;
1828
+ padding:0;
1829
+ margin:0;
2038
1830
 
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);
1831
+ font-size:var(--tds-radio-group-font-size);
1832
+ line-height:var(--tds-radio-group-line-height);
1833
+ border:0;
1834
+ }
1835
+
1836
+ .tds-radio-group legend{
1837
+ float:left;
1838
+ padding:0;
1839
+ margin:0;
2044
1840
  }
2045
1841
 
2046
- .tds-page-header--profile{
2047
- --tds-page-header-padding-y:20px;
1842
+ .tds-radio-group[aria-invalid="true"]{
1843
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1844
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2048
1845
  }
2049
1846
 
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));
1847
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1848
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2054
1849
  }
2055
- }
2056
1850
 
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);
1851
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1852
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1853
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1854
+ }
1855
+
1856
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1857
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1858
+ }
1859
+
1860
+ .tds-radio-group:has(input:required) legend::after{
1861
+ margin-left:.25ch;
1862
+ color:var(--t-text-color-status-error);
1863
+ content:"*";
2075
1864
  }
2076
- }
2077
- }
2078
1865
 
2079
- .tds-page-header{
1866
+ .tds-radio-group-fields{
2080
1867
  display:flex;
2081
1868
  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);
1869
+ gap:var(--tds-radio-group-gap);
1870
+ align-items:flex-start;
1871
+ margin-top:var(--t-spacing-1);
2086
1872
  }
2087
1873
 
2088
- .tds-page-header:not(.has-nav){
2089
- padding-bottom:var(--tds-page-header-padding-y);
1874
+ .tds-radio-group-description{
1875
+ display:flex;
1876
+ gap:var(--t-spacing-half);
1877
+ align-items:flex-start;
1878
+ margin:var(--t-spacing-fourth) 0 0;
1879
+ font-size:var(--tds-radio-group-description-font-size);
1880
+ line-height:var(--tds-radio-group-description-line-height);
1881
+ color:var(--tds-radio-group-description-color);
1882
+ cursor:text;
1883
+ }
1884
+
1885
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1886
+ display:var(--tds-radio-group-description-invalid-icon-display);
1887
+ flex-shrink:0;
1888
+ margin-top:calc(.5lh - .5em);
1889
+ line-height:var(--tds-radio-group-description-line-height);
2090
1890
  }
2091
1891
 
2092
- .tds-page-header.inactive{
2093
- background:var(--tds-page-header-background-color-inactive);
1892
+ .tds-radio-group--sm{
1893
+ --tds-radio-group-line-height:1.35;
1894
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1895
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1896
+ --tds-radio-group-description-line-height:1.3;
1897
+ }
1898
+
1899
+ .tds-radio{
1900
+ --tds-radio-font-size:var(--t-font-size-md);
1901
+ --tds-radio-cursor:pointer;
1902
+ --tds-radio-line-height:1.4;
1903
+ --tds-radio-transition-property:border-width;
1904
+
1905
+ --tds-radio-input-size:var(--t-element-size-md);
1906
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1907
+ --tds-radio-input-border-color:var(--t-form-border-color);
1908
+ --tds-radio-input-border-width:var(--t-form-border-width);
1909
+ --tds-radio-input-background-color:var(--t-form-background-color);
1910
+
1911
+ --tds-radio-label-color:var(--t-form-color);
1912
+
1913
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1914
+ --tds-radio-description-line-height:1.35;
1915
+ --tds-radio-description-color:var(--t-text-color-secondary);
1916
+
1917
+ position:relative;
1918
+ display:inline-grid;
1919
+ grid-template-columns:auto;
1920
+ grid-auto-columns:1fr;
1921
+ gap:var(--t-spacing-fourth) 0;
1922
+ line-height:var(--tds-radio-line-height);
1923
+ -webkit-user-select:none;
1924
+ -moz-user-select:none;
1925
+ user-select:none;
1926
+ }
1927
+
1928
+ .tds-radio label{
1929
+ grid-area:1 / 2;
1930
+ padding-inline-start:var(--t-spacing-1);
1931
+ font-size:var(--tds-radio-font-size);
1932
+ font-weight:var(--t-font-weight-normal);
1933
+ color:var(--tds-radio-label-color);
1934
+ cursor:var(--tds-radio-cursor);
2094
1935
  }
2095
1936
 
2096
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
- width:100%;
1937
+ .tds-radio input[type="radio"]{
1938
+ position:relative;
1939
+ width:1em;
1940
+ height:1em;
1941
+ margin:calc((1lh - 1em) / 2) 0 0;
1942
+ font-size:var(--tds-radio-font-size);
1943
+ line-height:inherit;
1944
+ -webkit-appearance:none;
1945
+ -moz-appearance:none;
1946
+ appearance:none;
1947
+ cursor:var(--tds-radio-cursor);
1948
+ background-color:var(--tds-radio-input-background-color);
1949
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1950
+ border-radius:var(--tds-radio-input-border-radius);
1951
+ transition-timing-function:var(--t-ease-in-out);
1952
+ transition-duration:var(--t-duration-200);
1953
+ transition-property:var(--tds-radio-transition-property);
2098
1954
  }
2099
1955
 
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;
1956
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1957
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1958
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1959
+ }
1960
+
1961
+ :is(.tds-radio input[type="radio"]):focus-visible{
1962
+ outline:var(--t-focus-ring-outline);
1963
+ outline-offset:var(--t-focus-ring-offset);
1964
+ }
1965
+
1966
+ :is(.tds-radio input[type="radio"]):disabled{
1967
+ pointer-events:none;
1968
+ }
1969
+
1970
+ @media (prefers-reduced-motion: reduce){
1971
+
1972
+ .tds-radio input[type="radio"]{
1973
+ --tds-radio-transition-property:none;
2107
1974
  }
1975
+ }
2108
1976
 
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);
1977
+ .tds-radio:has(input:checked){
1978
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1979
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1980
+ --tds-radio-input-border-width:4px;
1981
+ }
1982
+
1983
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1984
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1985
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2117
1986
  }
2118
1987
 
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;
1988
+ .tds-radio:has(input:user-invalid){
1989
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1990
+ }
1991
+
1992
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1993
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1994
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1995
+ }
1996
+
1997
+ .tds-radio:has(input:disabled){
1998
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1999
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2000
+
2001
+ --tds-radio-label-color:var(--t-form-color-disabled);
2002
+ --tds-radio-description-color:var(--t-form-color-disabled);
2003
+ --tds-radio-cursor:not-allowed;
2004
+ }
2005
+
2006
+ .tds-radio:has(input:disabled) input:checked{
2007
+ --tds-radio-input-background-color:var(--t-form-background-color);
2008
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2009
+ }
2010
+
2011
+ .tds-radio-description{
2012
+ display:flex;
2013
+ grid-area:2 / 2;
2014
+ gap:var(--t-spacing-half);
2015
+ align-items:flex-start;
2016
+ padding-inline-start:var(--t-spacing-1);
2017
+ margin:0;
2018
+ font-size:var(--tds-radio-description-font-size);
2019
+ line-height:var(--tds-radio-description-line-height);
2020
+ color:var(--tds-radio-description-color);
2021
+ cursor:text;
2022
+ }
2023
+
2024
+ .tds-radio--sm{
2025
+ --tds-radio-line-height:1.35;
2026
+ --tds-radio-input-size:var(--t-element-size-sm);
2027
+ --tds-radio-font-size:var(--t-font-size-sm);
2028
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2029
+ --tds-radio-description-line-height:1.3;
2030
+ }
2031
+
2032
+ .tds-input:has(textarea){
2033
+ --tds-input-padding-block:6px;
2034
+ --tds-input-resizer-size:var(--t-element-size-sm);
2035
+ --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");
2036
+ }
2037
+
2038
+ @supports (x: attr(x type(*))){
2039
+
2040
+ .tds-input textarea{
2041
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2042
+ }
2043
+ }
2044
+
2045
+ .tds-input.tds-textarea--resize-vertical textarea{
2046
+ resize:vertical;
2047
+ }
2048
+
2049
+ .tds-input.tds-textarea--resize-none textarea{
2050
+ resize:none;
2051
+ }
2052
+
2053
+ .tds-input.tds-textarea--resize-auto textarea{
2054
+ resize:vertical;
2055
+ }
2056
+
2057
+ @supports (field-sizing: content){
2058
+ .tds-input.tds-textarea--resize-auto textarea{
2059
+ field-sizing:content;
2060
+ resize:none;
2061
+ }
2062
+ }
2063
+
2064
+ .tds-input textarea{
2065
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2066
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2067
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2068
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2069
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2070
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2071
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2072
+ --tds-input-scrollbar-thumb-border-radius:999px;
2073
+ --tds-input-scrollbar-thumb-border-width:3px;
2074
+ --tds-input-scrollbar-track-margin-block:.125rem;
2075
+ scrollbar-color:initial;
2076
+ transition-timing-function:var(--t-ease-in-out);
2077
+ transition-duration:var(--t-duration-200);
2078
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2079
+ }
2080
+
2081
+ @media (pointer: fine){
2082
+ :is(.tds-input textarea)::-webkit-scrollbar{
2083
+ width:12px;
2084
+ height:12px;
2085
+ cursor:default;
2086
+ }
2087
+
2088
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2089
+ cursor:default;
2090
+ background:var(--tds-input-scrollbar-thumb-color);
2091
+ background-clip:content-box;
2092
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2093
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2138
2094
  }
2139
2095
 
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
- }
2146
-
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
- }
2096
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2097
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2098
+ }
2153
2099
 
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
- }
2100
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2101
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2102
+ }
2159
2103
 
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
- }
2104
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2105
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2106
+ }
2167
2107
 
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
- }
2108
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2109
+ background:var(--tds-input-scrollbar-surface-color);
2110
+ }
2178
2111
 
2179
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
- position:relative;
2112
+ :is(.tds-input textarea)::-webkit-resizer{
2113
+ background:var(--tds-input-resizer-icon) no-repeat;
2114
+ background-position:right bottom;
2115
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2181
2116
  }
2182
2117
 
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
- }
2118
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2119
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2120
+ cursor:default;
2121
+ }
2187
2122
 
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%;
2123
+ @supports (-moz-appearance: none){
2124
+ :is(.tds-input textarea){
2125
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2126
+ scrollbar-width:thin;
2197
2127
  }
2198
2128
 
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;
2129
+ @media (hover){
2130
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2131
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2202
2132
  }
2203
2133
  }
2134
+ }
2135
+ }
2204
2136
 
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
- }
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;
2213
2142
 
2214
- .tds-page-header--profile > .tds-page-header__title-bar{
2215
- align-items:center;
2216
- }
2143
+ --tds-toggle-switch-label-color:var(--t-form-color);
2217
2144
 
2218
- .tds-page-header__primary{
2219
- width:100%;
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);
2150
+
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);
2154
+
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
+
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;
2220
2167
  }
2221
2168
 
2222
- .tds-page-header__primary h1{
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);
2223
2173
  margin:0;
2224
- font-size:var(--tds-page-header-headline-font-size);
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
+ }
2184
+
2185
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2186
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2187
+ }
2188
+
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);
2225
2195
  font-weight:var(--t-font-weight-normal);
2226
- line-height:32px;
2227
- color:var(--tds-page-header-headline-color);
2228
- overflow-wrap:break-word;
2196
+ line-height:var(--tds-toggle-switch-line-height);
2197
+ color:var(--tds-toggle-switch-label-color);
2198
+ cursor:var(--tds-toggle-switch-cursor);
2229
2199
  }
2230
2200
 
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%;
2201
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2202
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2237
2203
  }
2238
2204
 
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;
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)));
2244
2208
  }
2245
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
- width:auto;
2247
- }
2248
2209
 
2249
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
- justify-content:flex-end;
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);
2251
2212
  }
2252
- }
2253
2213
 
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;
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;
2219
+ }
2220
+
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);
2263
2229
  }
2264
2230
 
2265
- @keyframes indicator-pulse{
2266
- 0%{
2267
- opacity:.3;
2268
- transform:scale(.9);
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);
2269
2242
  }
2270
2243
 
2271
- 100%{
2272
- opacity:0;
2273
- transform:scale(1.75);
2244
+ @media (prefers-reduced-motion: reduce){
2245
+
2246
+ .tds-toggle-switch-track{
2247
+ --tds-toggle-switch-track-transition:none;
2248
+ --tds-toggle-switch-thumb-transition:none;
2249
+ }
2274
2250
  }
2251
+
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;
2262
+ }
2263
+
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
+ }
2272
+
2273
+ .tds-toggle-switch--hide-label{
2274
+ --tds-toggle-switch-display:inline-flex;
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{