@planningcenter/tapestry 4.3.0-rc.2 → 4.3.0-rc.3

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