@planningcenter/tapestry 4.4.0 → 4.4.1-rc.0

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