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