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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +819 -819
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +819 -819
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,410 +677,283 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-button-group{
681
- display:inline-flex;
682
- }
683
- .tds-button-group > .tds-btn{
684
- --tds-button-group-item-z-index:1;
685
-
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);
680
+ @layer t-critical{
681
+ tds-page-header:not(.hydrated){
682
+ display:none;
720
683
  }
721
-
722
-
723
- @media (prefers-reduced-motion: no-preference){
724
-
725
- :root{
726
- interpolate-size:allow-keywords;
727
684
  }
728
- }
729
-
730
- @layer tds-component{
731
- tds-sidenav,
732
- .tds-sidenav{
733
- --tds-sidenav-indent:12px;
734
- --tds-sidenav-item-depth:0;
735
685
 
736
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
737
-
738
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
739
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
740
- --tds-sidenav-collapse-closed-opacity:0;
741
- --tds-sidenav-collapse-open-opacity:1;
742
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
743
- --tds-sidenav-collapse-open-transform:translateY(0);
686
+ @layer t-component{
687
+ .tds-page-header{
688
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
+ --tds-page-header-color:var(--t-text-color);
691
+ --tds-page-header-bottom-border-color:transparent;
692
+ --tds-page-header-headline-color:var(--t-text-color-headline);
693
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
+ --tds-page-header-padding-x:var(--t-spacing-2);
695
+ --tds-page-header-padding-y:var(--t-spacing-2);
696
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
+ --tds-page-header-nav-gap:var(--t-spacing-1);
698
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
+ --tds-page-header-nav-item-border-width:1px;
744
704
 
745
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
746
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
747
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
748
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
705
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
749
707
 
750
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
751
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
752
- --tds-sidenav-item-nested-background-selected:transparent;
708
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
753
711
 
754
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
755
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
756
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
712
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
757
714
 
758
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
759
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
760
- }
715
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
761
718
 
762
- @media (prefers-reduced-motion: reduce){
763
- tds-sidenav,
764
- .tds-sidenav{
765
- --tds-sidenav-collapse-transition-enter:none;
766
- --tds-sidenav-collapse-transition-exit:none;
767
- --tds-sidenav-collapse-closed-transform:none;
768
- --tds-sidenav-collapse-open-transform:none;
719
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
769
724
  }
770
- }
771
725
 
772
- .tds-sidenav--theme-gray{
773
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
774
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
775
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
776
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
777
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
726
+ .tds-page-header--profile{
727
+ --tds-page-header-padding-y:20px;
778
728
  }
779
- }
780
729
 
781
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
782
- display:flex;
730
+ @supports (color: light-dark(#fff, #000)){
731
+ .tds-page-header{
732
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
734
+ }
783
735
  }
784
736
 
785
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
786
- flex-direction:column;
787
- gap:var(--t-spacing-half);
788
- width:100%;
737
+ @media (min-width: 600px){
738
+ .tds-page-header{
739
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
740
+ --tds-page-header-color:var(--t-text-color-secondary);
741
+ --tds-page-header-bottom-border-color:var(--t-border-color);
742
+ --tds-page-header-padding-x:var(--t-spacing-3);
743
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
+ --tds-page-header-nav-gap:var(--t-spacing-half);
745
+ --tds-page-header-nav-background:transparent;
746
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
+ --tds-page-header-nav-item-border-width:1px;
748
+ --tds-page-header-nav-item-color:var(--t-text-color);
749
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
+ }
789
756
  }
790
-
791
- .tds-sidenav-section-list{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- list-style:none;
796
757
  }
797
758
 
798
- .tds-sidenav-section-header{
759
+ .tds-page-header{
799
760
  display:flex;
800
- align-items:baseline;
801
- justify-content:space-between;
802
- padding-top:var(--t-spacing-2);
761
+ flex-direction:column;
762
+ padding-top:var(--tds-page-header-padding-y);
763
+ color:var(--tds-page-header-color);
764
+ background:var(--tds-page-header-background-color);
765
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
803
766
  }
804
767
 
805
- .tds-sidenav-section-header h2{
806
- margin:0;
807
- font-size:var(--t-font-size-sm);
808
- font-weight:var(--t-font-weight-semibold);
809
- line-height:1.35;
810
- color:var(--t-text-color-secondary);
811
- text-transform:uppercase;
768
+ .tds-page-header:not(.has-nav){
769
+ padding-bottom:var(--tds-page-header-padding-y);
812
770
  }
813
771
 
814
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
815
- padding-top:0;
772
+ .tds-page-header.inactive{
773
+ background:var(--tds-page-header-background-color-inactive);
816
774
  }
817
775
 
818
- .tds-sidenav-section-header [slot="label-actions"]{
819
- display:flex;
820
- gap:var(--t-spacing-half);
821
- align-items:center;
776
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
+ width:100%;
822
778
  }
823
779
 
824
- .tds-sidenav-section [slot="section-actions"]{
825
- display:flex;
826
- gap:12px;
827
- align-items:center;
828
- min-height:42px;
829
- padding:var(--t-spacing-1) 0;
830
- }
831
-
832
- .tds-sidenav-section-list,
833
- .tds-sidenav-item{
834
- width:100%;
835
- padding:0;
836
- margin:0;
837
- }
838
-
839
- .tds-sidenav-item :is(a,button){
840
- position:relative;
780
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
841
781
  display:flex;
842
- gap:12px;
843
- align-items:center;
844
- width:100%;
845
- padding:12px;
846
- overflow:hidden;
847
- font-size:var(--t-font-size-sm);
848
- line-height:18px;
849
- color:var(--t-text-color-headline);
850
- white-space:nowrap;
851
- text-decoration:none;
852
- -webkit-appearance:none;
853
- -moz-appearance:none;
854
- appearance:none;
855
- cursor:pointer;
856
- background-color:var(--tds-sidenav-item-background, transparent);
857
- border:0;
858
- border-radius:var(--t-border-radius);
859
- transition:var(--tds-sidenav-item-transition);
782
+ flex-flow:row wrap;
783
+ gap:var(--t-spacing-half) var(--t-spacing-1);
784
+ align-items:flex-start;
785
+ justify-content:flex-start;
786
+ min-width:0;
860
787
  }
861
788
 
862
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
863
- display:block;
864
- flex:1;
865
- overflow:hidden;
866
- text-overflow:ellipsis;
867
- text-align:left;
868
- white-space:nowrap;
789
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
+ display:flex;
791
+ gap:var(--tds-page-header-nav-gap);
792
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
+ margin:0 0 -1px;
794
+ overflow:auto;
795
+ list-style:none;
796
+ background:var(--tds-page-header-nav-background);
869
797
  }
870
798
 
871
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
872
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
873
- color:var(--t-text-color-headline);
799
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
+ position:relative;
801
+ display:inline-flex;
802
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
+ font-size:var(--t-font-size-sm);
804
+ line-height:22px;
805
+ color:var(--tds-page-header-nav-item-color);
806
+ white-space:nowrap;
874
807
  text-decoration:none;
808
+ -webkit-appearance:none;
809
+ -moz-appearance:none;
810
+ appearance:none;
811
+ cursor:pointer;
812
+ outline-offset:-2px;
813
+ background-color:var(--tds-page-header-nav-item-background-color);
814
+ background-clip:padding-box;
815
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
875
818
  }
876
819
 
877
- :is(.tds-sidenav-item :is(a,button)):active{
878
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
879
- }
880
-
881
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
882
- overflow:hidden;
883
- color:var(--tds-sidenav-item-icon-color);
884
- }
885
-
886
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
887
- display:block;
888
- width:var(--tds-sidenav-item-icon-size);
889
- height:var(--tds-sidenav-item-icon-size);
820
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
890
825
  }
891
826
 
892
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
893
- --tds-sidenav-indent:19px;
894
- }
895
-
896
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
897
- visibility:visible;
898
- block-size:auto;
899
- opacity:1;
900
- }
901
-
902
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
903
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
904
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
905
-
906
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
907
- font-weight:var(--t-font-weight-semibold);
908
- }
909
-
910
- .tds-sidenav-item:has(.tds-sidenav-section){
911
- display:flex;
912
- flex-direction:column;
913
- gap:var(--t-spacing-half);
914
- }
827
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
+ }
915
833
 
916
- .tds-sidenav-item .tds-sidenav-section-list{
917
- --tds-sidenav-item-depth:1;
918
- gap:0;
919
- }
834
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
+ background-color:var(--tds-page-header-nav-item-background-color-active);
836
+ border-color:var(--tds-page-header-nav-item-border-color-active);
837
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
+ }
920
839
 
921
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
922
- visibility:hidden;
923
- block-size:0;
924
- overflow-y:clip;
925
- opacity:0;
926
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
927
- }
840
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
+ color:var(--tds-page-header-nav-item-color-disabled);
843
+ cursor:not-allowed;
844
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
+ opacity:1;
846
+ }
928
847
 
929
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
930
- --tds-sidenav-item-depth:2;
931
- }
848
+ @media (min-width: 600px){
849
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
+ position:absolute;
851
+ inset:auto -1px -1px;
852
+ height:1px;
853
+ pointer-events:none;
854
+ content:"";
855
+ background-color:var(--tds-page-header-bottom-border-color);
856
+ }
857
+ }
932
858
 
933
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
934
- min-height:var(--t-element-size-2xl);
935
- padding-block:9px;
936
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
937
- line-height:1;
938
- background-color:transparent;
859
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
+ position:relative;
939
861
  }
940
862
 
941
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
942
- position:absolute;
943
- top:0;
944
- bottom:0;
945
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
946
- width:2px;
947
- content:"";
948
- background-color:var(--tds-sidenav-item-nested-border-color);
949
- transition:var(--tds-sidenav-item-transition);
863
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
950
866
  }
951
867
 
952
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
868
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
953
869
  position:absolute;
954
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
- z-index:-1;
956
- height:100%;
870
+ top:-5px;
871
+ right:-2px;
872
+ width:10px;
873
+ height:10px;
957
874
  content:"";
958
- background-color:var(--tds-sidenav-item-nested-background);
959
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
960
- transition:var(--tds-sidenav-item-transition);
961
- }
962
-
963
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
964
- display:block;
965
- text-align:left;
966
- white-space:normal;
967
- }
968
-
969
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
970
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
971
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
875
+ background:var(--tds-page-header-nav-item-indicator-color);
876
+ border-radius:50%;
972
877
  }
973
878
 
974
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
975
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
879
+ @media (prefers-reduced-motion: no-preference){
880
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
+ animation:indicator-pulse 1.25s ease infinite;
882
+ }
976
883
  }
977
884
 
978
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
979
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
980
- font-weight:var(--t-font-weight-medium);
981
- }
982
-
983
- .tds-sidenav-responsive-header{
885
+ .tds-page-header__title-bar{
984
886
  display:flex;
985
- gap:var(--t-spacing-2);
986
- align-items:center;
987
- width:100%;
887
+ flex-direction:column;
888
+ gap:var(--t-spacing-2) var(--t-spacing-1);
889
+ align-items:flex-start;
890
+ justify-content:space-between;
891
+ padding:0 var(--tds-page-header-padding-x);
988
892
  }
989
893
 
990
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
991
- order:0;
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
992
896
  }
993
897
 
994
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
995
- flex:1;
996
- order:1;
997
- margin:0;
998
- font-size:var(--t-font-size-lg);
999
- font-weight:var(--t-font-weight-medium);
1000
- color:var(--t-text-color-headline);
1001
- }
898
+ .tds-page-header__primary{
899
+ width:100%;
900
+ }
1002
901
 
1003
- @media (max-width: 719px){
1004
- .tds-sidenav-collapse{
1005
- z-index:10001;
1006
- display:none;
1007
- max-width:min(448px, calc(100vw - 48px));
1008
- padding:0;
1009
- margin:12px 0;
1010
- position-area:bottom span-right;
1011
- overflow:hidden;
1012
- outline:0;
1013
- background:var(--t-surface-color-card);
1014
- border:0;
1015
- border-radius:6px;
1016
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1017
- opacity:var(--tds-sidenav-collapse-open-opacity);
1018
- transform:var(--tds-sidenav-collapse-open-transform);
1019
- transition:var(--tds-sidenav-collapse-transition-enter);
1020
- will-change:transform;
902
+ .tds-page-header__primary h1{
903
+ margin:0;
904
+ font-size:var(--tds-page-header-headline-font-size);
905
+ font-weight:var(--t-font-weight-normal);
906
+ line-height:32px;
907
+ color:var(--tds-page-header-headline-color);
908
+ overflow-wrap:break-word;
1021
909
  }
1022
910
 
1023
- .tds-sidenav-scroll-container{
1024
- --webkit-overflow-scrolling:touch;
1025
- display:block;
1026
- width:100%;
1027
- height:-moz-fit-content;
1028
- height:fit-content;
1029
- padding:var(--t-spacing-2);
1030
- overflow-y:auto;
911
+ @media (min-width: 960px){
912
+ .tds-page-header__primary{
913
+ flex:1 1 max-content;
914
+ width:auto;
915
+ min-width:0;
916
+ max-width:100%;
1031
917
  }
1032
918
 
1033
- .tds-sidenav-item :is(a, button) :is(.prefix){
1034
- display:none;
919
+ .tds-page-header__title-bar,
920
+ .tds-page-header--profile .tds-page-header__title-bar{
921
+ flex-flow:row nowrap;
922
+ row-gap:12px;
923
+ align-items:flex-start;
1035
924
  }
1036
- @supports selector(:popover-open){
1037
- .tds-sidenav-collapse:popover-open{
1038
- display:flex;
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
1039
927
  }
1040
928
 
1041
- .tds-sidenav-collapse:not(:popover-open){
1042
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1043
- transition:var(--tds-sidenav-collapse-transition-exit);
929
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
+ justify-content:flex-end;
1044
931
  }
932
+ }
1045
933
 
1046
- @starting-style{
1047
- .tds-sidenav-collapse:popover-open{
1048
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1049
- transform:var(--tds-sidenav-collapse-closed-transform);
1050
- }
1051
- }
1052
- }
1053
- @supports not selector(:popover-open){
1054
- .tds-sidenav-collapse.\:popover-open{
1055
- display:flex;
1056
- }
934
+ .tds-page-header-phone,
935
+ .tds-page-header-email{
936
+ color:var(--tds-page-header-color);
937
+ white-space:nowrap;
938
+ }
939
+ .tds-page-header-email{
940
+ max-width:100%;
941
+ overflow:hidden;
942
+ text-overflow:ellipsis;
943
+ }
1057
944
 
1058
- .tds-sidenav-collapse:not(.\:popover-open){
1059
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1060
- transition:var(--tds-sidenav-collapse-transition-exit);
1061
- }
945
+ @keyframes indicator-pulse{
946
+ 0%{
947
+ opacity:.3;
948
+ transform:scale(.9);
1062
949
  }
1063
- }
1064
950
 
1065
- @media (min-width: 720px){
1066
- .tds-sidenav-responsive-header{
1067
- display:none;
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
1068
954
  }
1069
955
  }
1070
956
 
1071
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1072
- display:none;
1073
- }
1074
-
1075
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1076
- display:block;
1077
- }
1078
-
1079
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1080
- display:flex;
1081
- flex-direction:column;
1082
- }
1083
-
1084
957
  .tds-checkbox{
1085
958
  --tds-checkbox-font-size:var(--t-font-size-md);
1086
959
  --tds-checkbox-cursor:pointer;
@@ -1248,32 +1121,97 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1248
1121
  --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1249
1122
  }
1250
1123
 
1251
- .tds-checkbox-description{
1252
- display:flex;
1253
- grid-area:2 / 2;
1254
- gap:var(--t-spacing-half);
1255
- align-items:flex-start;
1256
- padding-inline-start:var(--t-spacing-1);
1257
- margin:0;
1258
- font-size:var(--tds-checkbox-description-font-size);
1259
- line-height:var(--tds-checkbox-description-line-height);
1260
- color:var(--tds-checkbox-description-color);
1261
- cursor:text;
1262
- }
1263
-
1264
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1265
- display:var(--tds-checkbox-description-invalid-icon-display);
1266
- flex-shrink:0;
1267
- margin-top:calc(.5lh - .5em);
1268
- line-height:var(--tds-checkbox-description-line-height);
1124
+ .tds-checkbox-description{
1125
+ display:flex;
1126
+ grid-area:2 / 2;
1127
+ gap:var(--t-spacing-half);
1128
+ align-items:flex-start;
1129
+ padding-inline-start:var(--t-spacing-1);
1130
+ margin:0;
1131
+ font-size:var(--tds-checkbox-description-font-size);
1132
+ line-height:var(--tds-checkbox-description-line-height);
1133
+ color:var(--tds-checkbox-description-color);
1134
+ cursor:text;
1135
+ }
1136
+
1137
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1138
+ display:var(--tds-checkbox-description-invalid-icon-display);
1139
+ flex-shrink:0;
1140
+ margin-top:calc(.5lh - .5em);
1141
+ line-height:var(--tds-checkbox-description-line-height);
1142
+ }
1143
+
1144
+ .tds-checkbox--sm{
1145
+ --tds-checkbox-line-height:1.35;
1146
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1147
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1148
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1149
+ --tds-checkbox-description-line-height:1.3;
1150
+ }
1151
+
1152
+ .tds-button-group{
1153
+ display:inline-flex;
1154
+ }
1155
+ .tds-button-group > .tds-btn{
1156
+ --tds-button-group-item-z-index:1;
1157
+
1158
+ position:relative;
1159
+ z-index:var(--tds-button-group-item-z-index);
1160
+ border-radius:0;
1161
+ }
1162
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1163
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1164
+ }
1165
+ :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{
1166
+ position:absolute;
1167
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1168
+ width:var(--tds-btn-border-width);
1169
+ pointer-events:none;
1170
+ content:"";
1171
+ background-color:var(--t-border-color-white);
1172
+ }
1173
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1174
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1175
+ }
1176
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1177
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1178
+ }
1179
+ :is(.tds-button-group > .tds-btn):hover{
1180
+ --tds-button-group-item-z-index:2;
1181
+ }
1182
+ :is(.tds-button-group > .tds-btn):focus-visible{
1183
+ --tds-button-group-item-z-index:5;
1184
+ }
1185
+ .tds-button-group > .tds-btn:first-child{
1186
+ border-start-start-radius:var(--tds-btn-border-radius);
1187
+ border-end-start-radius:var(--tds-btn-border-radius);
1188
+ }
1189
+ .tds-button-group > .tds-btn:last-child{
1190
+ border-start-end-radius:var(--tds-btn-border-radius);
1191
+ border-end-end-radius:var(--tds-btn-border-radius);
1192
+ }
1193
+
1194
+
1195
+ :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{
1196
+ -webkit-appearance:none;
1197
+ appearance:none;
1198
+ }
1199
+
1200
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1201
+ inline-size:1em;
1202
+ block-size:2em;
1203
+ }
1204
+ @supports (field-sizing: content){
1205
+ .tds-input--auto-width{
1206
+ inline-size:-moz-fit-content;
1207
+ inline-size:fit-content;
1208
+ min-inline-size:min(100%, 122px);
1269
1209
  }
1270
1210
 
1271
- .tds-checkbox--sm{
1272
- --tds-checkbox-line-height:1.35;
1273
- --tds-checkbox-input-size:var(--t-element-size-sm);
1274
- --tds-checkbox-font-size:var(--t-font-size-sm);
1275
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1276
- --tds-checkbox-description-line-height:1.3;
1211
+ .tds-input--auto-width input{
1212
+ field-sizing:content;
1213
+ inline-size:auto;
1214
+ }
1277
1215
  }
1278
1216
 
1279
1217
  .tds-modal-overlay{
@@ -1439,29 +1377,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1439
1377
  }
1440
1378
  }
1441
1379
 
1442
-
1443
- :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{
1444
- -webkit-appearance:none;
1445
- appearance:none;
1446
- }
1447
-
1448
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1449
- inline-size:1em;
1450
- block-size:2em;
1451
- }
1452
- @supports (field-sizing: content){
1453
- .tds-input--auto-width{
1454
- inline-size:-moz-fit-content;
1455
- inline-size:fit-content;
1456
- min-inline-size:min(100%, 122px);
1457
- }
1458
-
1459
- .tds-input--auto-width input{
1460
- field-sizing:content;
1461
- inline-size:auto;
1462
- }
1463
- }
1464
-
1465
1380
  .tds-checkbox-group{
1466
1381
  --tds-checkbox-group-font-size:var(--t-font-size-md);
1467
1382
  --tds-checkbox-group-line-height:1.4;
@@ -1536,6 +1451,89 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1536
1451
  --tds-checkbox-group-description-line-height:1.3;
1537
1452
  }
1538
1453
 
1454
+ .tds-radio-group{
1455
+ --tds-radio-group-font-size:var(--t-font-size-md);
1456
+ --tds-radio-group-line-height:1.4;
1457
+ --tds-radio-group-gap:var(--t-spacing-1);
1458
+
1459
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1460
+ --tds-radio-group-description-line-height:1.35;
1461
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1462
+ --tds-radio-group-description-invalid-icon-display:none;
1463
+ display:flex;
1464
+ flex-direction:column;
1465
+ gap:0;
1466
+ padding:0;
1467
+ margin:0;
1468
+
1469
+ font-size:var(--tds-radio-group-font-size);
1470
+ line-height:var(--tds-radio-group-line-height);
1471
+ border:0;
1472
+ }
1473
+
1474
+ .tds-radio-group legend{
1475
+ float:left;
1476
+ padding:0;
1477
+ margin:0;
1478
+ }
1479
+
1480
+ .tds-radio-group[aria-invalid="true"]{
1481
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1482
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1483
+ }
1484
+
1485
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1486
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1487
+ }
1488
+
1489
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1490
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1491
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1492
+ }
1493
+
1494
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1495
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1496
+ }
1497
+
1498
+ .tds-radio-group:has(input:required) legend::after{
1499
+ margin-left:.25ch;
1500
+ color:var(--t-text-color-status-error);
1501
+ content:"*";
1502
+ }
1503
+
1504
+ .tds-radio-group-fields{
1505
+ display:flex;
1506
+ flex-direction:column;
1507
+ gap:var(--tds-radio-group-gap);
1508
+ align-items:flex-start;
1509
+ margin-top:var(--t-spacing-1);
1510
+ }
1511
+
1512
+ .tds-radio-group-description{
1513
+ display:flex;
1514
+ gap:var(--t-spacing-half);
1515
+ align-items:flex-start;
1516
+ margin:var(--t-spacing-fourth) 0 0;
1517
+ font-size:var(--tds-radio-group-description-font-size);
1518
+ line-height:var(--tds-radio-group-description-line-height);
1519
+ color:var(--tds-radio-group-description-color);
1520
+ cursor:text;
1521
+ }
1522
+
1523
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1524
+ display:var(--tds-radio-group-description-invalid-icon-display);
1525
+ flex-shrink:0;
1526
+ margin-top:calc(.5lh - .5em);
1527
+ line-height:var(--tds-radio-group-description-line-height);
1528
+ }
1529
+
1530
+ .tds-radio-group--sm{
1531
+ --tds-radio-group-line-height:1.35;
1532
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1533
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1534
+ --tds-radio-group-description-line-height:1.3;
1535
+ }
1536
+
1539
1537
  .tds-input:has(textarea){
1540
1538
  --tds-input-padding-block:6px;
1541
1539
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1781,497 +1779,499 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1781
1779
  --tds-toggle-switch-display:inline-flex;
1782
1780
  }
1783
1781
 
1784
- .tds-radio{
1785
- --tds-radio-font-size:var(--t-font-size-md);
1786
- --tds-radio-cursor:pointer;
1787
- --tds-radio-line-height:1.4;
1788
- --tds-radio-transition-property:border-width;
1789
1782
 
1790
- --tds-radio-input-size:var(--t-element-size-md);
1791
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1792
- --tds-radio-input-border-color:var(--t-form-border-color);
1793
- --tds-radio-input-border-width:var(--t-form-border-width);
1794
- --tds-radio-input-background-color:var(--t-form-background-color);
1783
+ @media (prefers-reduced-motion: no-preference){
1795
1784
 
1796
- --tds-radio-label-color:var(--t-form-color);
1785
+ :root{
1786
+ interpolate-size:allow-keywords;
1787
+ }
1788
+ }
1797
1789
 
1798
- --tds-radio-description-font-size:var(--t-font-size-sm);
1799
- --tds-radio-description-line-height:1.35;
1800
- --tds-radio-description-color:var(--t-text-color-secondary);
1790
+ @layer tds-component{
1791
+ tds-sidenav,
1792
+ .tds-sidenav{
1793
+ --tds-sidenav-indent:12px;
1794
+ --tds-sidenav-item-depth:0;
1795
+
1796
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1797
+
1798
+ --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;
1799
+ --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;
1800
+ --tds-sidenav-collapse-closed-opacity:0;
1801
+ --tds-sidenav-collapse-open-opacity:1;
1802
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1803
+ --tds-sidenav-collapse-open-transform:translateY(0);
1804
+
1805
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1806
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1807
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1808
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1809
+
1810
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1811
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1812
+ --tds-sidenav-item-nested-background-selected:transparent;
1813
+
1814
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1815
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1816
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1817
+
1818
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1819
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1820
+ }
1821
+
1822
+ @media (prefers-reduced-motion: reduce){
1823
+ tds-sidenav,
1824
+ .tds-sidenav{
1825
+ --tds-sidenav-collapse-transition-enter:none;
1826
+ --tds-sidenav-collapse-transition-exit:none;
1827
+ --tds-sidenav-collapse-closed-transform:none;
1828
+ --tds-sidenav-collapse-open-transform:none;
1829
+ }
1830
+ }
1831
+
1832
+ .tds-sidenav--theme-gray{
1833
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1834
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1835
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1836
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1837
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1838
+ }
1839
+ }
1840
+
1841
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1842
+ display:flex;
1843
+ }
1844
+
1845
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1846
+ flex-direction:column;
1847
+ gap:var(--t-spacing-half);
1848
+ width:100%;
1849
+ }
1850
+
1851
+ .tds-sidenav-section-list{
1852
+ width:100%;
1853
+ padding:0;
1854
+ margin:0;
1855
+ list-style:none;
1856
+ }
1857
+
1858
+ .tds-sidenav-section-header{
1859
+ display:flex;
1860
+ align-items:baseline;
1861
+ justify-content:space-between;
1862
+ padding-top:var(--t-spacing-2);
1863
+ }
1864
+
1865
+ .tds-sidenav-section-header h2{
1866
+ margin:0;
1867
+ font-size:var(--t-font-size-sm);
1868
+ font-weight:var(--t-font-weight-semibold);
1869
+ line-height:1.35;
1870
+ color:var(--t-text-color-secondary);
1871
+ text-transform:uppercase;
1872
+ }
1873
+
1874
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1875
+ padding-top:0;
1876
+ }
1877
+
1878
+ .tds-sidenav-section-header [slot="label-actions"]{
1879
+ display:flex;
1880
+ gap:var(--t-spacing-half);
1881
+ align-items:center;
1882
+ }
1801
1883
 
1802
- position:relative;
1803
- display:inline-grid;
1804
- grid-template-columns:auto;
1805
- grid-auto-columns:1fr;
1806
- gap:var(--t-spacing-fourth) 0;
1807
- line-height:var(--tds-radio-line-height);
1808
- -webkit-user-select:none;
1809
- -moz-user-select:none;
1810
- user-select:none;
1884
+ .tds-sidenav-section [slot="section-actions"]{
1885
+ display:flex;
1886
+ gap:12px;
1887
+ align-items:center;
1888
+ min-height:42px;
1889
+ padding:var(--t-spacing-1) 0;
1811
1890
  }
1812
1891
 
1813
- .tds-radio label{
1814
- grid-area:1 / 2;
1815
- padding-inline-start:var(--t-spacing-1);
1816
- font-size:var(--tds-radio-font-size);
1817
- font-weight:var(--t-font-weight-normal);
1818
- color:var(--tds-radio-label-color);
1819
- cursor:var(--tds-radio-cursor);
1820
- }
1892
+ .tds-sidenav-section-list,
1893
+ .tds-sidenav-item{
1894
+ width:100%;
1895
+ padding:0;
1896
+ margin:0;
1897
+ }
1821
1898
 
1822
- .tds-radio input[type="radio"]{
1899
+ .tds-sidenav-item :is(a,button){
1823
1900
  position:relative;
1824
- width:1em;
1825
- height:1em;
1826
- margin:calc((1lh - 1em) / 2) 0 0;
1827
- font-size:var(--tds-radio-font-size);
1828
- line-height:inherit;
1901
+ display:flex;
1902
+ gap:12px;
1903
+ align-items:center;
1904
+ width:100%;
1905
+ padding:12px;
1906
+ overflow:hidden;
1907
+ font-size:var(--t-font-size-sm);
1908
+ line-height:18px;
1909
+ color:var(--t-text-color-headline);
1910
+ white-space:nowrap;
1911
+ text-decoration:none;
1829
1912
  -webkit-appearance:none;
1830
1913
  -moz-appearance:none;
1831
1914
  appearance:none;
1832
- cursor:var(--tds-radio-cursor);
1833
- background-color:var(--tds-radio-input-background-color);
1834
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1835
- border-radius:var(--tds-radio-input-border-radius);
1836
- transition-timing-function:var(--t-ease-in-out);
1837
- transition-duration:var(--t-duration-200);
1838
- transition-property:var(--tds-radio-transition-property);
1915
+ cursor:pointer;
1916
+ background-color:var(--tds-sidenav-item-background, transparent);
1917
+ border:0;
1918
+ border-radius:var(--t-border-radius);
1919
+ transition:var(--tds-sidenav-item-transition);
1839
1920
  }
1840
1921
 
1841
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1842
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1843
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1922
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1923
+ display:block;
1924
+ flex:1;
1925
+ overflow:hidden;
1926
+ text-overflow:ellipsis;
1927
+ text-align:left;
1928
+ white-space:nowrap;
1844
1929
  }
1845
1930
 
1846
- :is(.tds-radio input[type="radio"]):focus-visible{
1847
- outline:var(--t-focus-ring-outline);
1848
- outline-offset:var(--t-focus-ring-offset);
1931
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1932
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1933
+ color:var(--t-text-color-headline);
1934
+ text-decoration:none;
1849
1935
  }
1850
1936
 
1851
- :is(.tds-radio input[type="radio"]):disabled{
1852
- pointer-events:none;
1937
+ :is(.tds-sidenav-item :is(a,button)):active{
1938
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1853
1939
  }
1854
1940
 
1855
- @media (prefers-reduced-motion: reduce){
1856
-
1857
- .tds-radio input[type="radio"]{
1858
- --tds-radio-transition-property:none;
1859
- }
1941
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1942
+ overflow:hidden;
1943
+ color:var(--tds-sidenav-item-icon-color);
1860
1944
  }
1861
1945
 
1862
- .tds-radio:has(input:checked){
1863
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1864
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1865
- --tds-radio-input-border-width:4px;
1866
- }
1946
+ :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{
1947
+ display:block;
1948
+ width:var(--tds-sidenav-item-icon-size);
1949
+ height:var(--tds-sidenav-item-icon-size);
1950
+ }
1867
1951
 
1868
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1869
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1870
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1952
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1953
+ --tds-sidenav-indent:19px;
1871
1954
  }
1872
1955
 
1873
- .tds-radio:has(input:user-invalid){
1874
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1875
- }
1876
-
1877
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1878
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1879
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1956
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1957
+ visibility:visible;
1958
+ block-size:auto;
1959
+ opacity:1;
1880
1960
  }
1881
1961
 
1882
- .tds-radio:has(input:disabled){
1883
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1884
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1962
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1963
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1964
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1885
1965
 
1886
- --tds-radio-label-color:var(--t-form-color-disabled);
1887
- --tds-radio-description-color:var(--t-form-color-disabled);
1888
- --tds-radio-cursor:not-allowed;
1966
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1967
+ font-weight:var(--t-font-weight-semibold);
1889
1968
  }
1890
1969
 
1891
- .tds-radio:has(input:disabled) input:checked{
1892
- --tds-radio-input-background-color:var(--t-form-background-color);
1893
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1894
- }
1895
-
1896
- .tds-radio-description{
1897
- display:flex;
1898
- grid-area:2 / 2;
1899
- gap:var(--t-spacing-half);
1900
- align-items:flex-start;
1901
- padding-inline-start:var(--t-spacing-1);
1902
- margin:0;
1903
- font-size:var(--tds-radio-description-font-size);
1904
- line-height:var(--tds-radio-description-line-height);
1905
- color:var(--tds-radio-description-color);
1906
- cursor:text;
1907
- }
1970
+ .tds-sidenav-item:has(.tds-sidenav-section){
1971
+ display:flex;
1972
+ flex-direction:column;
1973
+ gap:var(--t-spacing-half);
1974
+ }
1908
1975
 
1909
- .tds-radio--sm{
1910
- --tds-radio-line-height:1.35;
1911
- --tds-radio-input-size:var(--t-element-size-sm);
1912
- --tds-radio-font-size:var(--t-font-size-sm);
1913
- --tds-radio-description-font-size:var(--t-font-size-xs);
1914
- --tds-radio-description-line-height:1.3;
1915
- }
1976
+ .tds-sidenav-item .tds-sidenav-section-list{
1977
+ --tds-sidenav-item-depth:1;
1978
+ gap:0;
1979
+ }
1916
1980
 
1917
- .tds-radio-group{
1918
- --tds-radio-group-font-size:var(--t-font-size-md);
1919
- --tds-radio-group-line-height:1.4;
1920
- --tds-radio-group-gap:var(--t-spacing-1);
1981
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1982
+ visibility:hidden;
1983
+ block-size:0;
1984
+ overflow-y:clip;
1985
+ opacity:0;
1986
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1987
+ }
1921
1988
 
1922
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1923
- --tds-radio-group-description-line-height:1.35;
1924
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1925
- --tds-radio-group-description-invalid-icon-display:none;
1926
- display:flex;
1927
- flex-direction:column;
1928
- gap:0;
1929
- padding:0;
1930
- margin:0;
1989
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1990
+ --tds-sidenav-item-depth:2;
1991
+ }
1931
1992
 
1932
- font-size:var(--tds-radio-group-font-size);
1933
- line-height:var(--tds-radio-group-line-height);
1934
- border:0;
1935
- }
1993
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1994
+ min-height:var(--t-element-size-2xl);
1995
+ padding-block:9px;
1996
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1997
+ line-height:1;
1998
+ background-color:transparent;
1999
+ }
1936
2000
 
1937
- .tds-radio-group legend{
1938
- float:left;
1939
- padding:0;
1940
- margin:0;
1941
- }
2001
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2002
+ position:absolute;
2003
+ top:0;
2004
+ bottom:0;
2005
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2006
+ width:2px;
2007
+ content:"";
2008
+ background-color:var(--tds-sidenav-item-nested-border-color);
2009
+ transition:var(--tds-sidenav-item-transition);
2010
+ }
1942
2011
 
1943
- .tds-radio-group[aria-invalid="true"]{
1944
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1945
- --tds-radio-group-description-invalid-icon-display:inline-block;
1946
- }
2012
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2013
+ position:absolute;
2014
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2015
+ z-index:-1;
2016
+ height:100%;
2017
+ content:"";
2018
+ background-color:var(--tds-sidenav-item-nested-background);
2019
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2020
+ transition:var(--tds-sidenav-item-transition);
2021
+ }
1947
2022
 
1948
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1949
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1950
- }
2023
+ :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)){
2024
+ display:block;
2025
+ text-align:left;
2026
+ white-space:normal;
2027
+ }
1951
2028
 
1952
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1953
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1954
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2029
+ :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{
2030
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2031
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1955
2032
  }
1956
2033
 
1957
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1958
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2034
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2035
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1959
2036
  }
1960
2037
 
1961
- .tds-radio-group:has(input:required) legend::after{
1962
- margin-left:.25ch;
1963
- color:var(--t-text-color-status-error);
1964
- content:"*";
2038
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2039
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2040
+ font-weight:var(--t-font-weight-medium);
1965
2041
  }
1966
2042
 
1967
- .tds-radio-group-fields{
1968
- display:flex;
1969
- flex-direction:column;
1970
- gap:var(--tds-radio-group-gap);
1971
- align-items:flex-start;
1972
- margin-top:var(--t-spacing-1);
1973
- }
1974
-
1975
- .tds-radio-group-description{
2043
+ .tds-sidenav-responsive-header{
1976
2044
  display:flex;
1977
- gap:var(--t-spacing-half);
1978
- align-items:flex-start;
1979
- margin:var(--t-spacing-fourth) 0 0;
1980
- font-size:var(--tds-radio-group-description-font-size);
1981
- line-height:var(--tds-radio-group-description-line-height);
1982
- color:var(--tds-radio-group-description-color);
1983
- cursor:text;
2045
+ gap:var(--t-spacing-2);
2046
+ align-items:center;
2047
+ width:100%;
1984
2048
  }
1985
2049
 
1986
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1987
- display:var(--tds-radio-group-description-invalid-icon-display);
1988
- flex-shrink:0;
1989
- margin-top:calc(.5lh - .5em);
1990
- line-height:var(--tds-radio-group-description-line-height);
2050
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2051
+ order:0;
1991
2052
  }
1992
2053
 
1993
- .tds-radio-group--sm{
1994
- --tds-radio-group-line-height:1.35;
1995
- --tds-radio-group-font-size:var(--t-font-size-sm);
1996
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1997
- --tds-radio-group-description-line-height:1.3;
1998
- }
2054
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2055
+ flex:1;
2056
+ order:1;
2057
+ margin:0;
2058
+ font-size:var(--t-font-size-lg);
2059
+ font-weight:var(--t-font-weight-medium);
2060
+ color:var(--t-text-color-headline);
2061
+ }
1999
2062
 
2000
- @layer t-critical{
2001
- tds-page-header:not(.hydrated){
2063
+ @media (max-width: 719px){
2064
+ .tds-sidenav-collapse{
2065
+ z-index:10001;
2002
2066
  display:none;
2067
+ max-width:min(448px, calc(100vw - 48px));
2068
+ padding:0;
2069
+ margin:12px 0;
2070
+ position-area:bottom span-right;
2071
+ overflow:hidden;
2072
+ outline:0;
2073
+ background:var(--t-surface-color-card);
2074
+ border:0;
2075
+ border-radius:6px;
2076
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2077
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2078
+ transform:var(--tds-sidenav-collapse-open-transform);
2079
+ transition:var(--tds-sidenav-collapse-transition-enter);
2080
+ will-change:transform;
2003
2081
  }
2004
- }
2005
-
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;
2024
-
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);
2027
-
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);
2031
-
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);
2034
2082
 
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);
2038
-
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);
2083
+ .tds-sidenav-scroll-container{
2084
+ --webkit-overflow-scrolling:touch;
2085
+ display:block;
2086
+ width:100%;
2087
+ height:-moz-fit-content;
2088
+ height:fit-content;
2089
+ padding:var(--t-spacing-2);
2090
+ overflow-y:auto;
2044
2091
  }
2045
2092
 
2046
- .tds-page-header--profile{
2047
- --tds-page-header-padding-y:20px;
2093
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2094
+ display:none;
2048
2095
  }
2096
+ @supports selector(:popover-open){
2097
+ .tds-sidenav-collapse:popover-open{
2098
+ display:flex;
2099
+ }
2049
2100
 
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));
2101
+ .tds-sidenav-collapse:not(:popover-open){
2102
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2103
+ transition:var(--tds-sidenav-collapse-transition-exit);
2054
2104
  }
2055
- }
2056
2105
 
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);
2106
+ @starting-style{
2107
+ .tds-sidenav-collapse:popover-open{
2108
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2109
+ transform:var(--tds-sidenav-collapse-closed-transform);
2110
+ }
2075
2111
  }
2076
2112
  }
2077
- }
2078
-
2079
- .tds-page-header{
2080
- display:flex;
2081
- 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);
2086
- }
2113
+ @supports not selector(:popover-open){
2114
+ .tds-sidenav-collapse.\:popover-open{
2115
+ display:flex;
2116
+ }
2087
2117
 
2088
- .tds-page-header:not(.has-nav){
2089
- padding-bottom:var(--tds-page-header-padding-y);
2118
+ .tds-sidenav-collapse:not(.\:popover-open){
2119
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2120
+ transition:var(--tds-sidenav-collapse-transition-exit);
2121
+ }
2090
2122
  }
2123
+ }
2091
2124
 
2092
- .tds-page-header.inactive{
2093
- background:var(--tds-page-header-background-color-inactive);
2125
+ @media (min-width: 720px){
2126
+ .tds-sidenav-responsive-header{
2127
+ display:none;
2094
2128
  }
2129
+ }
2095
2130
 
2096
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2097
- width:100%;
2098
- }
2131
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2132
+ display:none;
2133
+ }
2099
2134
 
2100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2101
- display:flex;
2102
- flex-flow:row wrap;
2103
- gap:var(--t-spacing-half) var(--t-spacing-1);
2104
- align-items:flex-start;
2105
- justify-content:flex-start;
2106
- min-width:0;
2107
- }
2135
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2136
+ display:block;
2137
+ }
2108
2138
 
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{
2139
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2110
2140
  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);
2141
+ flex-direction:column;
2117
2142
  }
2118
2143
 
2119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2120
- position:relative;
2121
- display:inline-flex;
2122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2123
- font-size:var(--t-font-size-sm);
2124
- line-height:22px;
2125
- color:var(--tds-page-header-nav-item-color);
2126
- white-space:nowrap;
2127
- text-decoration:none;
2128
- -webkit-appearance:none;
2129
- -moz-appearance:none;
2130
- appearance:none;
2131
- cursor:pointer;
2132
- outline-offset:-2px;
2133
- background-color:var(--tds-page-header-nav-item-background-color);
2134
- background-clip:padding-box;
2135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2138
- }
2144
+ .tds-radio{
2145
+ --tds-radio-font-size:var(--t-font-size-md);
2146
+ --tds-radio-cursor:pointer;
2147
+ --tds-radio-line-height:1.4;
2148
+ --tds-radio-transition-property:border-width;
2139
2149
 
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
- }
2150
+ --tds-radio-input-size:var(--t-element-size-md);
2151
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2152
+ --tds-radio-input-border-color:var(--t-form-border-color);
2153
+ --tds-radio-input-border-width:var(--t-form-border-width);
2154
+ --tds-radio-input-background-color:var(--t-form-background-color);
2146
2155
 
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
- }
2156
+ --tds-radio-label-color:var(--t-form-color);
2153
2157
 
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
- }
2158
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2159
+ --tds-radio-description-line-height:1.35;
2160
+ --tds-radio-description-color:var(--t-text-color-secondary);
2159
2161
 
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
- }
2162
+ position:relative;
2163
+ display:inline-grid;
2164
+ grid-template-columns:auto;
2165
+ grid-auto-columns:1fr;
2166
+ gap:var(--t-spacing-fourth) 0;
2167
+ line-height:var(--tds-radio-line-height);
2168
+ -webkit-user-select:none;
2169
+ -moz-user-select:none;
2170
+ user-select:none;
2171
+ }
2167
2172
 
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
- }
2173
+ .tds-radio label{
2174
+ grid-area:1 / 2;
2175
+ padding-inline-start:var(--t-spacing-1);
2176
+ font-size:var(--tds-radio-font-size);
2177
+ font-weight:var(--t-font-weight-normal);
2178
+ color:var(--tds-radio-label-color);
2179
+ cursor:var(--tds-radio-cursor);
2180
+ }
2178
2181
 
2179
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2180
- position:relative;
2182
+ .tds-radio input[type="radio"]{
2183
+ position:relative;
2184
+ width:1em;
2185
+ height:1em;
2186
+ margin:calc((1lh - 1em) / 2) 0 0;
2187
+ font-size:var(--tds-radio-font-size);
2188
+ line-height:inherit;
2189
+ -webkit-appearance:none;
2190
+ -moz-appearance:none;
2191
+ appearance:none;
2192
+ cursor:var(--tds-radio-cursor);
2193
+ background-color:var(--tds-radio-input-background-color);
2194
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2195
+ border-radius:var(--tds-radio-input-border-radius);
2196
+ transition-timing-function:var(--t-ease-in-out);
2197
+ transition-duration:var(--t-duration-200);
2198
+ transition-property:var(--tds-radio-transition-property);
2199
+ }
2200
+
2201
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2202
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2203
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2181
2204
  }
2182
2205
 
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
- }
2206
+ :is(.tds-radio input[type="radio"]):focus-visible{
2207
+ outline:var(--t-focus-ring-outline);
2208
+ outline-offset:var(--t-focus-ring-offset);
2209
+ }
2187
2210
 
2188
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2189
- position:absolute;
2190
- top:-5px;
2191
- right:-2px;
2192
- width:10px;
2193
- height:10px;
2194
- content:"";
2195
- background:var(--tds-page-header-nav-item-indicator-color);
2196
- border-radius:50%;
2197
- }
2211
+ :is(.tds-radio input[type="radio"]):disabled{
2212
+ pointer-events:none;
2213
+ }
2198
2214
 
2199
- @media (prefers-reduced-motion: no-preference){
2200
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2201
- animation:indicator-pulse 1.25s ease infinite;
2202
- }
2203
- }
2215
+ @media (prefers-reduced-motion: reduce){
2204
2216
 
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
- }
2217
+ .tds-radio input[type="radio"]{
2218
+ --tds-radio-transition-property:none;
2219
+ }
2220
+ }
2213
2221
 
2214
- .tds-page-header--profile > .tds-page-header__title-bar{
2215
- align-items:center;
2222
+ .tds-radio:has(input:checked){
2223
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2224
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2225
+ --tds-radio-input-border-width:4px;
2216
2226
  }
2217
2227
 
2218
- .tds-page-header__primary{
2219
- width:100%;
2220
- }
2228
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2229
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2230
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2231
+ }
2221
2232
 
2222
- .tds-page-header__primary h1{
2223
- margin:0;
2224
- font-size:var(--tds-page-header-headline-font-size);
2225
- font-weight:var(--t-font-weight-normal);
2226
- line-height:32px;
2227
- color:var(--tds-page-header-headline-color);
2228
- overflow-wrap:break-word;
2233
+ .tds-radio:has(input:user-invalid){
2234
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2229
2235
  }
2230
2236
 
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%;
2237
- }
2237
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2238
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2239
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2240
+ }
2238
2241
 
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;
2242
+ .tds-radio:has(input:disabled){
2243
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2244
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2245
+
2246
+ --tds-radio-label-color:var(--t-form-color-disabled);
2247
+ --tds-radio-description-color:var(--t-form-color-disabled);
2248
+ --tds-radio-cursor:not-allowed;
2244
2249
  }
2245
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2246
- width:auto;
2247
- }
2248
2250
 
2249
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2250
- justify-content:flex-end;
2251
+ .tds-radio:has(input:disabled) input:checked{
2252
+ --tds-radio-input-background-color:var(--t-form-background-color);
2253
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2251
2254
  }
2252
- }
2253
2255
 
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;
2256
+ .tds-radio-description{
2257
+ display:flex;
2258
+ grid-area:2 / 2;
2259
+ gap:var(--t-spacing-half);
2260
+ align-items:flex-start;
2261
+ padding-inline-start:var(--t-spacing-1);
2262
+ margin:0;
2263
+ font-size:var(--tds-radio-description-font-size);
2264
+ line-height:var(--tds-radio-description-line-height);
2265
+ color:var(--tds-radio-description-color);
2266
+ cursor:text;
2263
2267
  }
2264
2268
 
2265
- @keyframes indicator-pulse{
2266
- 0%{
2267
- opacity:.3;
2268
- transform:scale(.9);
2269
- }
2270
-
2271
- 100%{
2272
- opacity:0;
2273
- transform:scale(1.75);
2274
- }
2269
+ .tds-radio--sm{
2270
+ --tds-radio-line-height:1.35;
2271
+ --tds-radio-input-size:var(--t-element-size-sm);
2272
+ --tds-radio-font-size:var(--t-font-size-sm);
2273
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2274
+ --tds-radio-description-line-height:1.3;
2275
2275
  }
2276
2276
 
2277
2277
  .tds-input{
@@ -3994,48 +3994,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3994
3994
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
3995
3995
  }
3996
3996
 
3997
- .tds-popover{
3998
- max-inline-size:24rem;
3999
- overflow:auto;
4000
- overscroll-behavior:none;
4001
- outline:0;
4002
- scrollbar-color:#0004 var(--t-surface-color-card);
4003
- scrollbar-width:thin;
4004
- background:var(--t-surface-color-card);
4005
- background-clip:padding-box;
4006
- border:1px solid var(--t-border-color);
4007
- border-radius:var(--t-border-radius);
4008
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4009
- }
4010
-
4011
- @media (prefers-reduced-motion: no-preference){
4012
- .tds-popover[data-entering]{
4013
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4014
- }
4015
-
4016
- .tds-popover[data-exiting]{
4017
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4018
- }
4019
-
4020
- .tds-popover[data-entering],.tds-popover[data-exiting]{
4021
- will-change:opacity, transform;
4022
- }
4023
-
4024
- @keyframes tds-popover{
4025
- from{
4026
- opacity:0;
4027
- transform:translateY(-8px);
4028
- }
4029
- }
4030
- }
4031
-
4032
- .tds-popover-content{
4033
- display:flex;
4034
- flex-direction:column;
4035
- padding:var(--t-spacing-1);
4036
- outline:0;
4037
- }
4038
-
4039
3997
  .tds-data-table{
4040
3998
  --tds-data-table-background-color:var(--t-surface-color-canvas);
4041
3999
  --tds-data-table-border-color:var(--t-border-color);
@@ -4457,6 +4415,48 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4457
4415
  max-block-size:inherit;
4458
4416
  }
4459
4417
 
4418
+ .tds-popover{
4419
+ max-inline-size:24rem;
4420
+ overflow:auto;
4421
+ overscroll-behavior:none;
4422
+ outline:0;
4423
+ scrollbar-color:#0004 var(--t-surface-color-card);
4424
+ scrollbar-width:thin;
4425
+ background:var(--t-surface-color-card);
4426
+ background-clip:padding-box;
4427
+ border:1px solid var(--t-border-color);
4428
+ border-radius:var(--t-border-radius);
4429
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4430
+ }
4431
+
4432
+ @media (prefers-reduced-motion: no-preference){
4433
+ .tds-popover[data-entering]{
4434
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
4435
+ }
4436
+
4437
+ .tds-popover[data-exiting]{
4438
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
4439
+ }
4440
+
4441
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
4442
+ will-change:opacity, transform;
4443
+ }
4444
+
4445
+ @keyframes tds-popover{
4446
+ from{
4447
+ opacity:0;
4448
+ transform:translateY(-8px);
4449
+ }
4450
+ }
4451
+ }
4452
+
4453
+ .tds-popover-content{
4454
+ display:flex;
4455
+ flex-direction:column;
4456
+ padding:var(--t-spacing-1);
4457
+ outline:0;
4458
+ }
4459
+
4460
4460
  .tds-segmented-control{
4461
4461
  --tds-segmented-control-font-size:var(--t-font-size-md);
4462
4462
  --tds-segmented-control-padding:var(--t-spacing-half);