@planningcenter/tapestry 4.2.0-rc.7 → 4.2.0-rc.9

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