@planningcenter/tapestry 4.7.0-rc.0 → 4.8.0-rc.0

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