@planningcenter/tapestry 4.0.0 → 4.0.1-rc.0

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