@planningcenter/tapestry 4.7.0 → 4.8.0-rc.0

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