@planningcenter/tapestry 3.8.1-rc.4 → 4.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1086 -1086
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1086 -1086
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -766,900 +766,662 @@
766
766
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
767
767
  }
768
768
 
769
- @layer t-critical{
770
- tds-page-header:not(.hydrated){
771
- display:none;
772
- }
769
+
770
+ @media (prefers-reduced-motion: no-preference){
771
+
772
+ :root{
773
+ interpolate-size:allow-keywords;
773
774
  }
775
+ }
774
776
 
775
- @layer t-component{
776
- .tds-page-header{
777
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
778
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
779
- --tds-page-header-color:var(--t-text-color);
780
- --tds-page-header-bottom-border-color:transparent;
781
- --tds-page-header-headline-color:var(--t-text-color-headline);
782
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
783
- --tds-page-header-padding-x:var(--t-spacing-2);
784
- --tds-page-header-padding-y:var(--t-spacing-2);
785
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
786
- --tds-page-header-nav-gap:var(--t-spacing-1);
787
- --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%);
788
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
789
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
790
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
791
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
792
- --tds-page-header-nav-item-border-width:1px;
777
+ @layer tds-component{
778
+ tds-sidenav,
779
+ .tds-sidenav{
780
+ --tds-sidenav-indent:12px;
781
+ --tds-sidenav-item-depth:0;
793
782
 
794
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
795
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
783
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
796
784
 
797
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
798
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
799
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
785
+ --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;
786
+ --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;
787
+ --tds-sidenav-collapse-closed-opacity:0;
788
+ --tds-sidenav-collapse-open-opacity:1;
789
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
790
+ --tds-sidenav-collapse-open-transform:translateY(0);
800
791
 
801
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
802
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
792
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
793
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
794
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
795
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
803
796
 
804
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
805
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
806
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
797
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
798
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
799
+ --tds-sidenav-item-nested-background-selected:transparent;
807
800
 
808
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
809
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
810
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
811
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
812
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
813
- }
801
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
802
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
803
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
814
804
 
815
- .tds-page-header--profile{
816
- --tds-page-header-padding-y:20px;
805
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
806
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
817
807
  }
818
808
 
819
- @supports (color: light-dark(#fff, #000)){
820
- .tds-page-header{
821
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
822
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
809
+ @media (prefers-reduced-motion: reduce){
810
+ tds-sidenav,
811
+ .tds-sidenav{
812
+ --tds-sidenav-collapse-transition-enter:none;
813
+ --tds-sidenav-collapse-transition-exit:none;
814
+ --tds-sidenav-collapse-closed-transform:none;
815
+ --tds-sidenav-collapse-open-transform:none;
816
+ }
823
817
  }
818
+
819
+ .tds-sidenav--theme-gray{
820
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
821
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
822
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
823
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
824
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
824
825
  }
826
+ }
825
827
 
826
- @media (min-width: 600px){
827
- .tds-page-header{
828
- --tds-page-header-background-color:var(--t-surface-color-canvas);
829
- --tds-page-header-color:var(--t-text-color-secondary);
830
- --tds-page-header-bottom-border-color:var(--t-border-color);
831
- --tds-page-header-padding-x:var(--t-spacing-3);
832
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
833
- --tds-page-header-nav-gap:var(--t-spacing-half);
834
- --tds-page-header-nav-background:transparent;
835
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
836
- --tds-page-header-nav-item-border-width:1px;
837
- --tds-page-header-nav-item-color:var(--t-text-color);
838
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
839
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
840
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
841
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
842
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
843
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
844
- }
828
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
829
+ display:flex;
830
+ }
831
+
832
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
833
+ flex-direction:column;
834
+ gap:var(--t-spacing-half);
835
+ width:100%;
845
836
  }
837
+
838
+ .tds-sidenav-section-list{
839
+ width:100%;
840
+ padding:0;
841
+ margin:0;
842
+ list-style:none;
846
843
  }
847
844
 
848
- .tds-page-header{
845
+ .tds-sidenav-section-header{
849
846
  display:flex;
850
- flex-direction:column;
851
- padding-top:var(--tds-page-header-padding-y);
852
- color:var(--tds-page-header-color);
853
- background:var(--tds-page-header-background-color);
854
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
847
+ align-items:baseline;
848
+ justify-content:space-between;
849
+ padding-top:var(--t-spacing-2);
855
850
  }
856
851
 
857
- .tds-page-header:not(.has-nav){
858
- padding-bottom:var(--tds-page-header-padding-y);
852
+ .tds-sidenav-section-header h2{
853
+ margin:0;
854
+ font-size:var(--t-font-size-sm);
855
+ font-weight:var(--t-font-weight-semibold);
856
+ line-height:1.35;
857
+ color:var(--t-text-color-secondary);
858
+ text-transform:uppercase;
859
859
  }
860
860
 
861
- .tds-page-header.inactive{
862
- background:var(--tds-page-header-background-color-inactive);
861
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
862
+ padding-top:0;
863
863
  }
864
864
 
865
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
866
- width:100%;
865
+ .tds-sidenav-section-header [slot="label-actions"]{
866
+ display:flex;
867
+ gap:var(--t-spacing-half);
868
+ align-items:center;
867
869
  }
868
870
 
869
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
871
+ .tds-sidenav-section [slot="section-actions"]{
872
+ display:flex;
873
+ gap:12px;
874
+ align-items:center;
875
+ min-height:42px;
876
+ padding:var(--t-spacing-1) 0;
877
+ }
878
+
879
+ .tds-sidenav-section-list,
880
+ .tds-sidenav-item{
881
+ width:100%;
882
+ padding:0;
883
+ margin:0;
884
+ }
885
+
886
+ .tds-sidenav-item :is(a,button){
887
+ position:relative;
870
888
  display:flex;
871
- flex-flow:row wrap;
872
- gap:var(--t-spacing-half) var(--t-spacing-1);
873
- align-items:flex-start;
874
- justify-content:flex-start;
875
- min-width:0;
889
+ gap:12px;
890
+ align-items:center;
891
+ width:100%;
892
+ padding:12px;
893
+ overflow:hidden;
894
+ font-size:var(--t-font-size-sm);
895
+ line-height:18px;
896
+ color:var(--t-text-color-headline);
897
+ white-space:nowrap;
898
+ text-decoration:none;
899
+ -webkit-appearance:none;
900
+ -moz-appearance:none;
901
+ appearance:none;
902
+ cursor:pointer;
903
+ background-color:var(--tds-sidenav-item-background, transparent);
904
+ border:0;
905
+ border-radius:var(--t-border-radius);
906
+ transition:var(--tds-sidenav-item-transition);
876
907
  }
877
908
 
878
- :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{
879
- display:flex;
880
- gap:var(--tds-page-header-nav-gap);
881
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
882
- margin:0 0 -1px;
883
- overflow:auto;
884
- list-style:none;
885
- background:var(--tds-page-header-nav-background);
909
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
910
+ display:block;
911
+ flex:1;
912
+ overflow:hidden;
913
+ text-overflow:ellipsis;
914
+ text-align:left;
915
+ white-space:nowrap;
886
916
  }
887
917
 
888
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
889
- position:relative;
890
- display:inline-flex;
891
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
892
- font-size:var(--t-font-size-sm);
893
- line-height:22px;
894
- color:var(--tds-page-header-nav-item-color);
895
- white-space:nowrap;
918
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
919
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
920
+ color:var(--t-text-color-headline);
896
921
  text-decoration:none;
897
- -webkit-appearance:none;
898
- -moz-appearance:none;
899
- appearance:none;
900
- cursor:pointer;
901
- outline-offset:-2px;
902
- background-color:var(--tds-page-header-nav-item-background-color);
903
- background-clip:padding-box;
904
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
905
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
906
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
907
922
  }
908
923
 
909
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
910
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
911
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
912
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
913
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
924
+ :is(.tds-sidenav-item :is(a,button)):active{
925
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
926
+ }
927
+
928
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
929
+ overflow:hidden;
930
+ color:var(--tds-sidenav-item-icon-color);
931
+ }
932
+
933
+ :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{
934
+ display:block;
935
+ width:var(--tds-sidenav-item-icon-size);
936
+ height:var(--tds-sidenav-item-icon-size);
914
937
  }
915
938
 
916
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
917
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
918
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
919
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
920
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
921
- }
939
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
940
+ --tds-sidenav-indent:19px;
941
+ }
922
942
 
923
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
924
- background-color:var(--tds-page-header-nav-item-background-color-active);
925
- border-color:var(--tds-page-header-nav-item-border-color-active);
926
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
927
- }
943
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
944
+ visibility:visible;
945
+ block-size:auto;
946
+ opacity:1;
947
+ }
928
948
 
929
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
930
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
931
- color:var(--tds-page-header-nav-item-color-disabled);
932
- cursor:not-allowed;
933
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
934
- opacity:1;
935
- }
949
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
950
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
951
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
936
952
 
937
- @media (min-width: 600px){
938
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
939
- position:absolute;
940
- inset:auto -1px -1px;
941
- height:1px;
942
- pointer-events:none;
943
- content:"";
944
- background-color:var(--tds-page-header-bottom-border-color);
945
- }
946
- }
953
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
954
+ font-weight:var(--t-font-weight-semibold);
955
+ }
947
956
 
948
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
949
- position:relative;
957
+ .tds-sidenav-item:has(.tds-sidenav-section){
958
+ display:flex;
959
+ flex-direction:column;
960
+ gap:var(--t-spacing-half);
961
+ }
962
+
963
+ .tds-sidenav-item .tds-sidenav-section-list{
964
+ --tds-sidenav-item-depth:1;
965
+ gap:0;
966
+ }
967
+
968
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
969
+ visibility:hidden;
970
+ block-size:0;
971
+ overflow-y:clip;
972
+ opacity:0;
973
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
950
974
  }
951
975
 
952
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
953
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
954
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
976
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
977
+ --tds-sidenav-item-depth:2;
978
+ }
979
+
980
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
981
+ min-height:var(--t-element-size-2xl);
982
+ padding-block:9px;
983
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
984
+ line-height:1;
985
+ background-color:transparent;
986
+ }
987
+
988
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
989
+ position:absolute;
990
+ top:0;
991
+ bottom:0;
992
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
993
+ width:2px;
994
+ content:"";
995
+ background-color:var(--tds-sidenav-item-nested-border-color);
996
+ transition:var(--tds-sidenav-item-transition);
955
997
  }
956
998
 
957
- :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{
999
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
958
1000
  position:absolute;
959
- top:-5px;
960
- right:-2px;
961
- width:10px;
962
- height:10px;
1001
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1002
+ z-index:-1;
1003
+ height:100%;
963
1004
  content:"";
964
- background:var(--tds-page-header-nav-item-indicator-color);
965
- border-radius:50%;
1005
+ background-color:var(--tds-sidenav-item-nested-background);
1006
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1007
+ transition:var(--tds-sidenav-item-transition);
966
1008
  }
967
1009
 
968
- @media (prefers-reduced-motion: no-preference){
969
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
970
- animation:indicator-pulse 1.25s ease infinite;
971
- }
1010
+ :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)){
1011
+ display:block;
1012
+ text-align:left;
1013
+ white-space:normal;
972
1014
  }
973
1015
 
974
- .tds-page-header__title-bar{
975
- display:flex;
976
- flex-direction:column;
977
- gap:var(--t-spacing-2) var(--t-spacing-1);
978
- align-items:flex-start;
979
- justify-content:space-between;
980
- padding:0 var(--tds-page-header-padding-x);
981
- }
1016
+ :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{
1017
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1018
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1019
+ }
982
1020
 
983
- .tds-page-header--profile > .tds-page-header__title-bar{
984
- align-items:center;
985
- }
1021
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1022
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1023
+ }
986
1024
 
987
- .tds-page-header__primary{
1025
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1026
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1027
+ font-weight:var(--t-font-weight-medium);
1028
+ }
1029
+
1030
+ .tds-sidenav-responsive-header{
1031
+ display:flex;
1032
+ gap:var(--t-spacing-2);
1033
+ align-items:center;
988
1034
  width:100%;
989
1035
  }
990
1036
 
991
- .tds-page-header__primary h1{
1037
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1038
+ order:0;
1039
+ }
1040
+
1041
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1042
+ flex:1;
1043
+ order:1;
992
1044
  margin:0;
993
- font-size:var(--tds-page-header-headline-font-size);
994
- font-weight:var(--t-font-weight-normal);
995
- line-height:32px;
996
- color:var(--tds-page-header-headline-color);
997
- overflow-wrap:break-word;
1045
+ font-size:var(--t-font-size-lg);
1046
+ font-weight:var(--t-font-weight-medium);
1047
+ color:var(--t-text-color-headline);
998
1048
  }
999
1049
 
1000
- @media (min-width: 960px){
1001
- .tds-page-header__primary{
1002
- flex:1 1 max-content;
1003
- width:auto;
1004
- min-width:0;
1005
- max-width:100%;
1050
+ @media (max-width: 719px){
1051
+ .tds-sidenav-collapse{
1052
+ z-index:10001;
1053
+ display:none;
1054
+ max-width:min(448px, calc(100vw - 48px));
1055
+ padding:0;
1056
+ margin:12px 0;
1057
+ position-area:bottom span-right;
1058
+ overflow:hidden;
1059
+ outline:0;
1060
+ background:var(--t-surface-color-card);
1061
+ border:0;
1062
+ border-radius:6px;
1063
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1064
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1065
+ transform:var(--tds-sidenav-collapse-open-transform);
1066
+ transition:var(--tds-sidenav-collapse-transition-enter);
1067
+ will-change:transform;
1006
1068
  }
1007
1069
 
1008
- .tds-page-header__title-bar,
1009
- .tds-page-header--profile .tds-page-header__title-bar{
1010
- flex-flow:row nowrap;
1011
- row-gap:12px;
1012
- align-items:flex-start;
1070
+ .tds-sidenav-scroll-container{
1071
+ --webkit-overflow-scrolling:touch;
1072
+ display:block;
1073
+ width:100%;
1074
+ height:-moz-fit-content;
1075
+ height:fit-content;
1076
+ padding:var(--t-spacing-2);
1077
+ overflow-y:auto;
1013
1078
  }
1014
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1015
- width:auto;
1016
- }
1017
1079
 
1018
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1019
- justify-content:flex-end;
1080
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1081
+ display:none;
1082
+ }
1083
+ @supports selector(:popover-open){
1084
+ .tds-sidenav-collapse:popover-open{
1085
+ display:flex;
1020
1086
  }
1021
- }
1022
1087
 
1023
- .tds-page-header-phone,
1024
- .tds-page-header-email{
1025
- color:var(--tds-page-header-color);
1026
- white-space:nowrap;
1027
- }
1088
+ .tds-sidenav-collapse:not(:popover-open){
1089
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1090
+ transition:var(--tds-sidenav-collapse-transition-exit);
1091
+ }
1028
1092
 
1029
- .tds-page-header-email{
1030
- max-width:100%;
1031
- overflow:hidden;
1032
- text-overflow:ellipsis;
1033
- }
1093
+ @starting-style{
1094
+ .tds-sidenav-collapse:popover-open{
1095
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1096
+ transform:var(--tds-sidenav-collapse-closed-transform);
1097
+ }
1098
+ }
1099
+ }
1100
+ @supports not selector(:popover-open){
1101
+ .tds-sidenav-collapse.\:popover-open{
1102
+ display:flex;
1103
+ }
1034
1104
 
1035
- @keyframes indicator-pulse{
1036
- 0%{
1037
- opacity:.3;
1038
- transform:scale(.9);
1105
+ .tds-sidenav-collapse:not(.\:popover-open){
1106
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1107
+ transition:var(--tds-sidenav-collapse-transition-exit);
1108
+ }
1039
1109
  }
1110
+ }
1040
1111
 
1041
- 100%{
1042
- opacity:0;
1043
- transform:scale(1.75);
1112
+ @media (min-width: 720px){
1113
+ .tds-sidenav-responsive-header{
1114
+ display:none;
1044
1115
  }
1045
1116
  }
1046
1117
 
1118
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1119
+ display:none;
1120
+ }
1047
1121
 
1048
- @media (prefers-reduced-motion: no-preference){
1122
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1123
+ display:block;
1124
+ }
1049
1125
 
1050
- :root{
1051
- interpolate-size:allow-keywords;
1052
- }
1053
- }
1126
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1127
+ display:flex;
1128
+ flex-direction:column;
1129
+ }
1054
1130
 
1055
- @layer tds-component{
1056
- tds-sidenav,
1057
- .tds-sidenav{
1058
- --tds-sidenav-indent:12px;
1059
- --tds-sidenav-item-depth:0;
1131
+ .tds-button-group{
1132
+ display:inline-flex;
1133
+ }
1134
+ .tds-button-group > .tds-btn{
1135
+ --tds-button-group-item-z-index:1;
1060
1136
 
1061
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1062
-
1063
- --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;
1064
- --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;
1065
- --tds-sidenav-collapse-closed-opacity:0;
1066
- --tds-sidenav-collapse-open-opacity:1;
1067
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1068
- --tds-sidenav-collapse-open-transform:translateY(0);
1069
-
1070
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1071
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1072
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1073
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1074
-
1075
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1076
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1077
- --tds-sidenav-item-nested-background-selected:transparent;
1078
-
1079
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1080
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1081
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1082
-
1083
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1084
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1085
- }
1086
-
1087
- @media (prefers-reduced-motion: reduce){
1088
- tds-sidenav,
1089
- .tds-sidenav{
1090
- --tds-sidenav-collapse-transition-enter:none;
1091
- --tds-sidenav-collapse-transition-exit:none;
1092
- --tds-sidenav-collapse-closed-transform:none;
1093
- --tds-sidenav-collapse-open-transform:none;
1137
+ z-index:var(--tds-button-group-item-z-index);
1138
+ border-radius:0;
1094
1139
  }
1140
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1141
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1095
1142
  }
1096
-
1097
- .tds-sidenav--theme-gray{
1098
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1099
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1100
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1101
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1102
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1143
+ :is(.tds-button-group > .tds-btn):hover{
1144
+ --tds-button-group-item-z-index:2;
1145
+ }
1146
+ :is(.tds-button-group > .tds-btn):focus-visible{
1147
+ --tds-button-group-item-z-index:5;
1148
+ }
1149
+ .tds-button-group > .tds-btn:first-child{
1150
+ border-start-start-radius:var(--tds-btn-border-radius);
1151
+ border-end-start-radius:var(--tds-btn-border-radius);
1103
1152
  }
1104
- }
1105
-
1106
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1107
- display:flex;
1153
+ .tds-button-group > .tds-btn:last-child{
1154
+ border-start-end-radius:var(--tds-btn-border-radius);
1155
+ border-end-end-radius:var(--tds-btn-border-radius);
1108
1156
  }
1109
1157
 
1110
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1111
- flex-direction:column;
1112
- gap:var(--t-spacing-half);
1113
- width:100%;
1114
- }
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;
1115
1163
 
1116
- .tds-sidenav-section-list{
1117
- width:100%;
1118
- padding:0;
1119
- margin:0;
1120
- list-style:none;
1121
- }
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);
1122
1168
 
1123
- .tds-sidenav-section-header{
1124
- display:flex;
1125
- align-items:baseline;
1126
- justify-content:space-between;
1127
- padding-top:var(--t-spacing-2);
1128
- }
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);
1129
1173
 
1130
- .tds-sidenav-section-header h2{
1131
- margin:0;
1132
- font-size:var(--t-font-size-sm);
1133
- font-weight:var(--t-font-weight-semibold);
1134
- line-height:1.35;
1135
- color:var(--t-text-color-secondary);
1136
- text-transform:uppercase;
1137
- }
1174
+ --tds-checkbox-label-color:var(--t-form-color);
1138
1175
 
1139
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1140
- padding-top:0;
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;
1180
+
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
+ }
1191
+
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);
1141
1199
  }
1142
1200
 
1143
- .tds-sidenav-section-header [slot="label-actions"]{
1201
+ .tds-checkbox tds-indeterminate{
1144
1202
  display:flex;
1145
- gap:var(--t-spacing-half);
1146
- align-items:center;
1147
1203
  }
1148
1204
 
1149
- .tds-sidenav-section [slot="section-actions"]{
1150
- display:flex;
1151
- gap:12px;
1152
- align-items:center;
1153
- min-height:42px;
1154
- padding:var(--t-spacing-1) 0;
1155
- }
1156
-
1157
- .tds-sidenav-section-list,
1158
- .tds-sidenav-item{
1159
- width:100%;
1160
- padding:0;
1161
- margin:0;
1162
- }
1163
-
1164
- .tds-sidenav-item :is(a,button){
1205
+ .tds-checkbox input[type="checkbox"]{
1165
1206
  position:relative;
1166
- display:flex;
1167
- gap:12px;
1168
- align-items:center;
1169
- width:100%;
1170
- padding:12px;
1171
- overflow:hidden;
1172
- font-size:var(--t-font-size-sm);
1173
- line-height:18px;
1174
- color:var(--t-text-color-headline);
1175
- white-space:nowrap;
1176
- text-decoration:none;
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;
1177
1212
  -webkit-appearance:none;
1178
1213
  -moz-appearance:none;
1179
1214
  appearance:none;
1180
- cursor:pointer;
1181
- background-color:var(--tds-sidenav-item-background, transparent);
1182
- border:0;
1183
- border-radius:var(--t-border-radius);
1184
- transition:var(--tds-sidenav-item-transition);
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);
1185
1222
  }
1186
1223
 
1187
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1188
- display:block;
1189
- flex:1;
1190
- overflow:hidden;
1191
- text-overflow:ellipsis;
1192
- text-align:left;
1193
- white-space:nowrap;
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%);
1194
1242
  }
1195
1243
 
1196
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1197
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1198
- color:var(--t-text-color-headline);
1199
- text-decoration:none;
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);
1200
1247
  }
1201
1248
 
1202
- :is(.tds-sidenav-item :is(a,button)):active{
1203
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1249
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1250
+ outline:var(--t-focus-ring-outline);
1251
+ outline-offset:var(--t-focus-ring-offset);
1204
1252
  }
1205
1253
 
1206
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1207
- overflow:hidden;
1208
- color:var(--tds-sidenav-item-icon-color);
1254
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1255
+ pointer-events:none;
1209
1256
  }
1210
1257
 
1211
- :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{
1212
- display:block;
1213
- width:var(--tds-sidenav-item-icon-size);
1214
- height:var(--tds-sidenav-item-icon-size);
1215
- }
1258
+ @media (prefers-reduced-motion: reduce){
1216
1259
 
1217
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1218
- --tds-sidenav-indent:19px;
1260
+ .tds-checkbox input[type="checkbox"]{
1261
+ --tds-checkbox-transition-property:none;
1262
+ }
1219
1263
  }
1220
1264
 
1221
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1222
- visibility:visible;
1223
- block-size:auto;
1224
- opacity:1;
1225
- }
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;
1270
+ }
1226
1271
 
1227
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1228
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1229
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
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
+ }
1230
1276
 
1231
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1232
- font-weight:var(--t-font-weight-semibold);
1277
+ .tds-checkbox:has(input:checked){
1278
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1233
1279
  }
1234
1280
 
1235
- .tds-sidenav-item:has(.tds-sidenav-section){
1236
- display:flex;
1237
- flex-direction:column;
1238
- gap:var(--t-spacing-half);
1281
+ .tds-checkbox:has(input:indeterminate){
1282
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1239
1283
  }
1240
1284
 
1241
- .tds-sidenav-item .tds-sidenav-section-list{
1242
- --tds-sidenav-item-depth:1;
1243
- gap:0;
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;
1244
1289
  }
1245
1290
 
1246
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1247
- visibility:hidden;
1248
- block-size:0;
1249
- overflow-y:clip;
1250
- opacity:0;
1251
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1252
- }
1253
-
1254
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1255
- --tds-sidenav-item-depth:2;
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);
1256
1294
  }
1257
1295
 
1258
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1259
- min-height:var(--t-element-size-2xl);
1260
- padding-block:9px;
1261
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1262
- line-height:1;
1263
- background-color:transparent;
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);
1264
1299
  }
1265
1300
 
1266
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1267
- position:absolute;
1268
- top:0;
1269
- bottom:0;
1270
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1271
- width:2px;
1272
- content:"";
1273
- background-color:var(--tds-sidenav-item-nested-border-color);
1274
- transition:var(--tds-sidenav-item-transition);
1275
- }
1276
-
1277
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1278
- position:absolute;
1279
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1280
- z-index:-1;
1281
- height:100%;
1282
- content:"";
1283
- background-color:var(--tds-sidenav-item-nested-background);
1284
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1285
- transition:var(--tds-sidenav-item-transition);
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);
1286
1304
  }
1287
1305
 
1288
- :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)){
1289
- display:block;
1290
- text-align:left;
1291
- white-space:normal;
1292
- }
1306
+ .tds-checkbox:has(input:required) label::after{
1307
+ margin-left:.25ch;
1308
+ color:var(--t-text-color-status-error);
1309
+ content:"*";
1310
+ }
1293
1311
 
1294
- :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{
1295
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1296
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1297
- }
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);
1298
1315
 
1299
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1300
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1301
- }
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;
1319
+ }
1302
1320
 
1303
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1304
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1305
- font-weight:var(--t-font-weight-medium);
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);
1306
1323
  }
1307
1324
 
1308
- .tds-sidenav-responsive-header{
1325
+ .tds-checkbox-description{
1309
1326
  display:flex;
1310
- gap:var(--t-spacing-2);
1311
- align-items:center;
1312
- width:100%;
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;
1313
1336
  }
1314
1337
 
1315
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1316
- order:0;
1317
- }
1318
-
1319
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1320
- flex:1;
1321
- order:1;
1322
- margin:0;
1323
- font-size:var(--t-font-size-lg);
1324
- font-weight:var(--t-font-weight-medium);
1325
- color:var(--t-text-color-headline);
1326
- }
1327
-
1328
- @media (max-width: 719px){
1329
- .tds-sidenav-collapse{
1330
- z-index:10001;
1331
- display:none;
1332
- max-width:min(448px, calc(100vw - 48px));
1333
- padding:0;
1334
- margin:12px 0;
1335
- position-area:bottom span-right;
1336
- overflow:hidden;
1337
- outline:0;
1338
- background:var(--t-surface-color-card);
1339
- border:0;
1340
- border-radius:6px;
1341
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1342
- opacity:var(--tds-sidenav-collapse-open-opacity);
1343
- transform:var(--tds-sidenav-collapse-open-transform);
1344
- transition:var(--tds-sidenav-collapse-transition-enter);
1345
- will-change:transform;
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);
1346
1343
  }
1347
1344
 
1348
- .tds-sidenav-scroll-container{
1349
- --webkit-overflow-scrolling:touch;
1350
- display:block;
1351
- width:100%;
1352
- height:-moz-fit-content;
1353
- height:fit-content;
1354
- padding:var(--t-spacing-2);
1355
- overflow-y:auto;
1356
- }
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;
1351
+ }
1357
1352
 
1358
- .tds-sidenav-item :is(a, button) :is(.prefix){
1359
- display:none;
1360
- }
1361
- @supports selector(:popover-open){
1362
- .tds-sidenav-collapse:popover-open{
1363
- display:flex;
1364
- }
1353
+ .tds-checkbox-group{
1354
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1355
+ --tds-checkbox-group-line-height:1.4;
1356
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1365
1357
 
1366
- .tds-sidenav-collapse:not(:popover-open){
1367
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1368
- transition:var(--tds-sidenav-collapse-transition-exit);
1369
- }
1358
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1359
+ --tds-checkbox-group-description-line-height:1.35;
1360
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1361
+ --tds-checkbox-group-description-invalid-icon-display:none;
1362
+ display:flex;
1363
+ flex-direction:column;
1364
+ gap:0;
1365
+ padding:0;
1366
+ margin:0;
1370
1367
 
1371
- @starting-style{
1372
- .tds-sidenav-collapse:popover-open{
1373
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1374
- transform:var(--tds-sidenav-collapse-closed-transform);
1375
- }
1376
- }
1377
- }
1378
- @supports not selector(:popover-open){
1379
- .tds-sidenav-collapse.\:popover-open{
1380
- display:flex;
1381
- }
1368
+ font-size:var(--tds-checkbox-group-font-size);
1369
+ line-height:var(--tds-checkbox-group-line-height);
1370
+ border:0;
1371
+ }
1382
1372
 
1383
- .tds-sidenav-collapse:not(.\:popover-open){
1384
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1385
- transition:var(--tds-sidenav-collapse-transition-exit);
1386
- }
1373
+ .tds-checkbox-group legend{
1374
+ float:left;
1375
+ padding:0;
1376
+ margin:0;
1387
1377
  }
1388
- }
1389
1378
 
1390
- @media (min-width: 720px){
1391
- .tds-sidenav-responsive-header{
1392
- display:none;
1379
+ .tds-checkbox-group[aria-invalid="true"]{
1380
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1381
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1393
1382
  }
1394
- }
1395
1383
 
1396
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1397
- display:none;
1384
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1385
+ margin-left:.25ch;
1386
+ color:var(--t-text-color-status-error);
1387
+ content:"*";
1398
1388
  }
1399
1389
 
1400
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1401
- display:block;
1390
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1391
+ content:none;
1402
1392
  }
1403
1393
 
1404
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1405
- display:flex;
1406
- flex-direction:column;
1407
- }
1394
+ .tds-checkbox-group-fields{
1395
+ display:flex;
1396
+ flex-direction:column;
1397
+ gap:var(--tds-checkbox-group-gap);
1398
+ align-items:flex-start;
1399
+ margin-top:var(--t-spacing-1);
1400
+ }
1408
1401
 
1409
- .tds-combo-box{
1410
- --tds-combo-box-button-offset:4px;
1402
+ .tds-checkbox-group-description{
1403
+ display:flex;
1404
+ gap:var(--t-spacing-half);
1405
+ align-items:flex-start;
1406
+ margin:var(--t-spacing-fourth) 0 0;
1407
+ font-size:var(--tds-checkbox-group-description-font-size);
1408
+ line-height:var(--tds-checkbox-group-description-line-height);
1409
+ color:var(--tds-checkbox-group-description-color);
1410
+ cursor:text;
1411
1411
  }
1412
1412
 
1413
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1414
- transform:rotate(.5turn);
1413
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1414
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1415
+ flex-shrink:0;
1416
+ margin-top:calc(.5lh - .5em);
1417
+ line-height:var(--tds-checkbox-group-description-line-height);
1415
1418
  }
1416
1419
 
1417
- .tds-combo-box--lg{
1418
- --tds-combo-box-button-offset:5px;
1419
- }
1420
-
1421
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1422
- display:none;
1423
- }
1424
-
1425
- .tds-combo-box-input{
1426
- display:flex;
1427
- flex:1;
1428
- align-items:center;
1429
- padding-block:var(--tds-field-padding-block);
1430
- padding-inline:var(--tds-field-padding-inline);
1431
- font-family:inherit;
1432
- font-size:inherit;
1433
- color:inherit;
1434
- outline:0;
1435
- background:transparent;
1436
- border:0;
1437
- }
1438
-
1439
- .tds-combo-box-input:has( + .tds-combo-box-button){
1440
- padding-inline-end:0;
1441
- }
1442
-
1443
- .tds-combo-box-input::-moz-placeholder{
1444
- color:var(--tds-field-placeholder-color);
1445
- -moz-user-select:none;
1446
- user-select:none;
1447
- }
1448
-
1449
- .tds-combo-box-input::placeholder{
1450
- color:var(--tds-field-placeholder-color);
1451
- -webkit-user-select:none;
1452
- -moz-user-select:none;
1453
- user-select:none;
1454
- }
1455
-
1456
- .tds-combo-box-button{
1457
- flex-shrink:0;
1458
- align-self:center;
1459
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1460
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1461
- padding:0;
1462
- margin-inline-end:var(--tds-combo-box-button-offset);
1463
- }
1464
-
1465
- .tds-combo-box-button > svg{
1466
- inline-size:var(--tds-field-font-size);
1467
- block-size:var(--tds-field-font-size);
1468
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1469
- }
1470
-
1471
- .tds-combo-box-popover{
1472
- width:var(--trigger-width);
1473
- max-block-size:inherit;
1474
- padding:var(--t-spacing-1);
1475
- overflow:auto;
1476
- scroll-behavior:smooth;
1477
- overscroll-behavior:none;
1478
- -webkit-user-select:none;
1479
- -moz-user-select:none;
1480
- user-select:none;
1481
- outline:0;
1482
- scrollbar-color:#0004 var(--t-surface-color-card);
1483
- scrollbar-width:thin;
1484
- background:var(--t-surface-color-card);
1485
- background-clip:padding-box;
1486
- border:1px solid var(--t-border-color);
1487
- border-radius:var(--t-border-radius);
1488
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1489
- }
1490
-
1491
- .tds-combo-box-popover[data-entering]{
1492
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1493
- }
1494
-
1495
- .tds-combo-box-popover[data-exiting]{
1496
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1497
- }
1498
-
1499
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1500
- will-change:opacity, transform;
1501
- }
1502
-
1503
- @keyframes tds-combo-box-popover{
1504
- from{
1505
- opacity:0;
1506
- transform:translateY(-8px);
1507
- }
1508
- }
1509
-
1510
- @media (prefers-reduced-motion: reduce){
1511
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1512
- animation:none;
1513
- }
1514
-
1515
- .tds-combo-box-button > svg{
1516
- transition:none;
1517
- }
1518
- }
1519
-
1520
- .tds-combo-box-list{
1521
- padding:0;
1522
- margin:0;
1523
- }
1524
-
1525
- .tds-combo-box-list-item{
1526
- display:block;
1527
- padding-block:var(--t-spacing-1);
1528
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1529
- overflow:hidden;
1530
- text-overflow:ellipsis;
1531
- font-size:1rem;
1532
- color:var(--t-text-color);
1533
- white-space:nowrap;
1534
- cursor:default;
1535
- border-radius:var(--t-border-radius);
1536
- }
1537
-
1538
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1539
- background:var(--t-fill-color-neutral-070);
1540
- }
1541
-
1542
- .tds-combo-box-list-item[data-selected]{
1543
- background:var(--t-fill-color-button-interaction-ghost-active);
1544
- }
1545
-
1546
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1547
- background:var(--t-fill-color-neutral-060);
1548
- }
1549
-
1550
- .tds-combo-box-list-item[data-disabled]{
1551
- color:var(--t-form-color-disabled);
1552
- cursor:not-allowed;
1553
- }
1554
-
1555
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1556
- background:transparent;
1557
- }
1558
-
1559
- .tds-combo-box-empty-state{
1560
- position:relative;
1561
- min-block-size:var(--t-spacing-3);
1562
- padding-block:var(--t-spacing-1);
1563
- padding-inline:var(--t-spacing-2);
1564
- font-size:var(--t-font-size-md);
1565
- color:var(--t-text-color-secondary);
1566
- }
1567
-
1568
- .tds-combo-box-load-more{
1569
- position:relative;
1570
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1571
- }
1572
-
1573
- .tds-combo-box-empty-state,
1574
- .tds-combo-box-load-more{
1575
- --tds-loading-spinner-visibility:visible;
1576
- --tds-loading-spinner-animation-play-state:running;
1577
- }
1578
-
1579
- .tds-combo-box-list-section:not(:first-child){
1580
- margin-block-start:var(--t-spacing-half);
1581
- }
1582
-
1583
- .tds-combo-box-section-header{
1584
- padding-block:var(--t-spacing-1);
1585
- padding-inline:var(--t-spacing-1);
1586
- font-size:var(--t-font-size-sm);
1587
- font-weight:var(--t-font-weight-semibold);
1588
- color:var(--t-text-color-secondary);
1589
- }
1590
-
1591
- .tds-checkbox-group{
1592
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1593
- --tds-checkbox-group-line-height:1.4;
1594
- --tds-checkbox-group-gap:var(--t-spacing-1);
1595
-
1596
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1597
- --tds-checkbox-group-description-line-height:1.35;
1598
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1599
- --tds-checkbox-group-description-invalid-icon-display:none;
1600
- display:flex;
1601
- flex-direction:column;
1602
- gap:0;
1603
- padding:0;
1604
- margin:0;
1605
-
1606
- font-size:var(--tds-checkbox-group-font-size);
1607
- line-height:var(--tds-checkbox-group-line-height);
1608
- border:0;
1609
- }
1610
-
1611
- .tds-checkbox-group legend{
1612
- float:left;
1613
- padding:0;
1614
- margin:0;
1615
- }
1616
-
1617
- .tds-checkbox-group[aria-invalid="true"]{
1618
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1619
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1620
- }
1621
-
1622
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1623
- margin-left:.25ch;
1624
- color:var(--t-text-color-status-error);
1625
- content:"*";
1626
- }
1627
-
1628
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1629
- content:none;
1630
- }
1631
-
1632
- .tds-checkbox-group-fields{
1633
- display:flex;
1634
- flex-direction:column;
1635
- gap:var(--tds-checkbox-group-gap);
1636
- align-items:flex-start;
1637
- margin-top:var(--t-spacing-1);
1638
- }
1639
-
1640
- .tds-checkbox-group-description{
1641
- display:flex;
1642
- gap:var(--t-spacing-half);
1643
- align-items:flex-start;
1644
- margin:var(--t-spacing-fourth) 0 0;
1645
- font-size:var(--tds-checkbox-group-description-font-size);
1646
- line-height:var(--tds-checkbox-group-description-line-height);
1647
- color:var(--tds-checkbox-group-description-color);
1648
- cursor:text;
1649
- }
1650
-
1651
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1652
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1653
- flex-shrink:0;
1654
- margin-top:calc(.5lh - .5em);
1655
- line-height:var(--tds-checkbox-group-description-line-height);
1656
- }
1657
-
1658
- .tds-checkbox-group--sm{
1659
- --tds-checkbox-group-line-height:1.35;
1660
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1661
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1662
- --tds-checkbox-group-description-line-height:1.3;
1420
+ .tds-checkbox-group--sm{
1421
+ --tds-checkbox-group-line-height:1.35;
1422
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1423
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1424
+ --tds-checkbox-group-description-line-height:1.3;
1663
1425
  }
1664
1426
 
1665
1427
  .tds-dropdown-popover{
@@ -1796,45 +1558,18 @@ a.tds-dropdown-item:is(:hover, :active){
1796
1558
  border-top:1px solid var(--t-border-color);
1797
1559
  }
1798
1560
 
1799
- .tds-button-group{
1800
- display:inline-flex;
1561
+ .tds-modal-overlay{
1562
+ position:fixed;
1563
+ inset:0;
1564
+ z-index:1000;
1565
+ display:flex;
1566
+ align-items:center;
1567
+ justify-content:center;
1568
+ background:hsl(0 0% 0% / 40%);
1801
1569
  }
1802
- .tds-button-group > .tds-btn{
1803
- --tds-button-group-item-z-index:1;
1804
1570
 
1805
- z-index:var(--tds-button-group-item-z-index);
1806
- border-radius:0;
1807
- }
1808
- :is(.tds-button-group > .tds-btn):not(:first-child){
1809
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1810
- }
1811
- :is(.tds-button-group > .tds-btn):hover{
1812
- --tds-button-group-item-z-index:2;
1813
- }
1814
- :is(.tds-button-group > .tds-btn):focus-visible{
1815
- --tds-button-group-item-z-index:5;
1816
- }
1817
- .tds-button-group > .tds-btn:first-child{
1818
- border-start-start-radius:var(--tds-btn-border-radius);
1819
- border-end-start-radius:var(--tds-btn-border-radius);
1820
- }
1821
- .tds-button-group > .tds-btn:last-child{
1822
- border-start-end-radius:var(--tds-btn-border-radius);
1823
- border-end-end-radius:var(--tds-btn-border-radius);
1824
- }
1825
-
1826
- .tds-modal-overlay{
1827
- position:fixed;
1828
- inset:0;
1829
- z-index:1000;
1830
- display:flex;
1831
- align-items:center;
1832
- justify-content:center;
1833
- background:hsl(0 0% 0% / 40%);
1834
- }
1835
-
1836
- .tds-modal-overlay[data-entering]{
1837
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1571
+ .tds-modal-overlay[data-entering]{
1572
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1838
1573
  }
1839
1574
 
1840
1575
  .tds-modal-overlay[data-exiting]{
@@ -1991,87 +1726,186 @@ a.tds-dropdown-item:is(:hover, :active){
1991
1726
  }
1992
1727
  }
1993
1728
 
1994
- .tds-radio-group{
1995
- --tds-radio-group-font-size:var(--t-font-size-md);
1996
- --tds-radio-group-line-height:1.4;
1997
- --tds-radio-group-gap:var(--t-spacing-1);
1729
+ .tds-combo-box{
1730
+ --tds-combo-box-button-offset:4px;
1731
+ }
1998
1732
 
1999
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2000
- --tds-radio-group-description-line-height:1.35;
2001
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2002
- --tds-radio-group-description-invalid-icon-display:none;
1733
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
1734
+ transform:rotate(.5turn);
1735
+ }
1736
+
1737
+ .tds-combo-box--lg{
1738
+ --tds-combo-box-button-offset:5px;
1739
+ }
1740
+
1741
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1742
+ display:none;
1743
+ }
1744
+
1745
+ .tds-combo-box-input{
2003
1746
  display:flex;
2004
- flex-direction:column;
2005
- gap:0;
1747
+ flex:1;
1748
+ align-items:center;
1749
+ padding-block:var(--tds-field-padding-block);
1750
+ padding-inline:var(--tds-field-padding-inline);
1751
+ font-family:inherit;
1752
+ font-size:inherit;
1753
+ color:inherit;
1754
+ outline:0;
1755
+ background:transparent;
1756
+ border:0;
1757
+ }
1758
+
1759
+ .tds-combo-box-input:has( + .tds-combo-box-button){
1760
+ padding-inline-end:0;
1761
+ }
1762
+
1763
+ .tds-combo-box-input::-moz-placeholder{
1764
+ color:var(--tds-field-placeholder-color);
1765
+ -moz-user-select:none;
1766
+ user-select:none;
1767
+ }
1768
+
1769
+ .tds-combo-box-input::placeholder{
1770
+ color:var(--tds-field-placeholder-color);
1771
+ -webkit-user-select:none;
1772
+ -moz-user-select:none;
1773
+ user-select:none;
1774
+ }
1775
+
1776
+ .tds-combo-box-button{
1777
+ flex-shrink:0;
1778
+ align-self:center;
1779
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1780
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
2006
1781
  padding:0;
2007
- margin:0;
1782
+ margin-inline-end:var(--tds-combo-box-button-offset);
1783
+ }
2008
1784
 
2009
- font-size:var(--tds-radio-group-font-size);
2010
- line-height:var(--tds-radio-group-line-height);
2011
- border:0;
1785
+ .tds-combo-box-button > svg{
1786
+ inline-size:var(--tds-field-font-size);
1787
+ block-size:var(--tds-field-font-size);
1788
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
1789
+ }
1790
+
1791
+ .tds-combo-box-popover{
1792
+ width:var(--trigger-width);
1793
+ max-block-size:inherit;
1794
+ padding:var(--t-spacing-1);
1795
+ overflow:auto;
1796
+ scroll-behavior:smooth;
1797
+ overscroll-behavior:none;
1798
+ -webkit-user-select:none;
1799
+ -moz-user-select:none;
1800
+ user-select:none;
1801
+ outline:0;
1802
+ scrollbar-color:#0004 var(--t-surface-color-card);
1803
+ scrollbar-width:thin;
1804
+ background:var(--t-surface-color-card);
1805
+ background-clip:padding-box;
1806
+ border:1px solid var(--t-border-color);
1807
+ border-radius:var(--t-border-radius);
1808
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2012
1809
  }
2013
1810
 
2014
- .tds-radio-group legend{
2015
- float:left;
2016
- padding:0;
2017
- margin:0;
1811
+ .tds-combo-box-popover[data-entering]{
1812
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
2018
1813
  }
2019
1814
 
2020
- .tds-radio-group[aria-invalid="true"]{
2021
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2022
- --tds-radio-group-description-invalid-icon-display:inline-block;
1815
+ .tds-combo-box-popover[data-exiting]{
1816
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
2023
1817
  }
2024
1818
 
2025
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2026
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1819
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1820
+ will-change:opacity, transform;
1821
+ }
1822
+
1823
+ @keyframes tds-combo-box-popover{
1824
+ from{
1825
+ opacity:0;
1826
+ transform:translateY(-8px);
1827
+ }
1828
+ }
1829
+
1830
+ @media (prefers-reduced-motion: reduce){
1831
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1832
+ animation:none;
2027
1833
  }
2028
1834
 
2029
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2030
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2031
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2032
- }
1835
+ .tds-combo-box-button > svg{
1836
+ transition:none;
1837
+ }
1838
+ }
2033
1839
 
2034
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2035
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2036
- }
1840
+ .tds-combo-box-list{
1841
+ padding:0;
1842
+ margin:0;
1843
+ }
2037
1844
 
2038
- .tds-radio-group:has(input:required) legend::after{
2039
- margin-left:.25ch;
2040
- color:var(--t-text-color-status-error);
2041
- content:"*";
1845
+ .tds-combo-box-list-item{
1846
+ display:block;
1847
+ padding-block:var(--t-spacing-1);
1848
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1849
+ overflow:hidden;
1850
+ text-overflow:ellipsis;
1851
+ font-size:1rem;
1852
+ color:var(--t-text-color);
1853
+ white-space:nowrap;
1854
+ cursor:default;
1855
+ border-radius:var(--t-border-radius);
1856
+ }
1857
+
1858
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1859
+ background:var(--t-fill-color-neutral-070);
1860
+ }
1861
+
1862
+ .tds-combo-box-list-item[data-selected]{
1863
+ background:var(--t-fill-color-button-interaction-ghost-active);
1864
+ }
1865
+
1866
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1867
+ background:var(--t-fill-color-neutral-060);
1868
+ }
1869
+
1870
+ .tds-combo-box-list-item[data-disabled]{
1871
+ color:var(--t-form-color-disabled);
1872
+ cursor:not-allowed;
1873
+ }
1874
+
1875
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1876
+ background:transparent;
2042
1877
  }
2043
1878
 
2044
- .tds-radio-group-fields{
2045
- display:flex;
2046
- flex-direction:column;
2047
- gap:var(--tds-radio-group-gap);
2048
- align-items:flex-start;
2049
- margin-top:var(--t-spacing-1);
1879
+ .tds-combo-box-empty-state{
1880
+ position:relative;
1881
+ min-block-size:var(--t-spacing-3);
1882
+ padding-block:var(--t-spacing-1);
1883
+ padding-inline:var(--t-spacing-2);
1884
+ font-size:var(--t-font-size-md);
1885
+ color:var(--t-text-color-secondary);
2050
1886
  }
2051
1887
 
2052
- .tds-radio-group-description{
2053
- display:flex;
2054
- gap:var(--t-spacing-half);
2055
- align-items:flex-start;
2056
- margin:var(--t-spacing-fourth) 0 0;
2057
- font-size:var(--tds-radio-group-description-font-size);
2058
- line-height:var(--tds-radio-group-description-line-height);
2059
- color:var(--tds-radio-group-description-color);
2060
- cursor:text;
1888
+ .tds-combo-box-load-more{
1889
+ position:relative;
1890
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
2061
1891
  }
2062
1892
 
2063
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2064
- display:var(--tds-radio-group-description-invalid-icon-display);
2065
- flex-shrink:0;
2066
- margin-top:calc(.5lh - .5em);
2067
- line-height:var(--tds-radio-group-description-line-height);
1893
+ .tds-combo-box-empty-state,
1894
+ .tds-combo-box-load-more{
1895
+ --tds-loading-spinner-visibility:visible;
1896
+ --tds-loading-spinner-animation-play-state:running;
1897
+ }
1898
+
1899
+ .tds-combo-box-list-section:not(:first-child){
1900
+ margin-block-start:var(--t-spacing-half);
2068
1901
  }
2069
1902
 
2070
- .tds-radio-group--sm{
2071
- --tds-radio-group-line-height:1.35;
2072
- --tds-radio-group-font-size:var(--t-font-size-sm);
2073
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2074
- --tds-radio-group-description-line-height:1.3;
1903
+ .tds-combo-box-section-header{
1904
+ padding-block:var(--t-spacing-1);
1905
+ padding-inline:var(--t-spacing-1);
1906
+ font-size:var(--t-font-size-sm);
1907
+ font-weight:var(--t-font-weight-semibold);
1908
+ color:var(--t-text-color-secondary);
2075
1909
  }
2076
1910
 
2077
1911
  .tds-radio{
@@ -2207,111 +2041,89 @@ a.tds-dropdown-item:is(:hover, :active){
2207
2041
  --tds-radio-description-line-height:1.3;
2208
2042
  }
2209
2043
 
2210
- .tds-input:has(textarea){
2211
- --tds-input-padding-block:6px;
2212
- --tds-input-resizer-size:var(--t-element-size-sm);
2213
- --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");
2214
- }
2215
-
2216
- @supports (x: attr(x type(*))){
2044
+ .tds-radio-group{
2045
+ --tds-radio-group-font-size:var(--t-font-size-md);
2046
+ --tds-radio-group-line-height:1.4;
2047
+ --tds-radio-group-gap:var(--t-spacing-1);
2217
2048
 
2218
- .tds-input textarea{
2219
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2220
- }
2221
- }
2222
-
2223
- .tds-input.tds-textarea--resize-vertical textarea{
2224
- resize:vertical;
2225
- }
2226
-
2227
- .tds-input.tds-textarea--resize-none textarea{
2228
- resize:none;
2229
- }
2230
-
2231
- .tds-input.tds-textarea--resize-auto textarea{
2232
- resize:vertical;
2233
- }
2234
-
2235
- @supports (field-sizing: content){
2236
- .tds-input.tds-textarea--resize-auto textarea{
2237
- field-sizing:content;
2238
- resize:none;
2239
- }
2240
- }
2049
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2050
+ --tds-radio-group-description-line-height:1.35;
2051
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2052
+ --tds-radio-group-description-invalid-icon-display:none;
2053
+ display:flex;
2054
+ flex-direction:column;
2055
+ gap:0;
2056
+ padding:0;
2057
+ margin:0;
2241
2058
 
2242
- .tds-input textarea{
2243
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2244
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2245
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2246
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2247
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2248
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2249
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2250
- --tds-input-scrollbar-thumb-border-radius:999px;
2251
- --tds-input-scrollbar-thumb-border-width:3px;
2252
- --tds-input-scrollbar-track-margin-block:.125rem;
2253
- scrollbar-color:initial;
2254
- transition-timing-function:var(--t-ease-in-out);
2255
- transition-duration:var(--t-duration-200);
2256
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2059
+ font-size:var(--tds-radio-group-font-size);
2060
+ line-height:var(--tds-radio-group-line-height);
2061
+ border:0;
2257
2062
  }
2258
2063
 
2259
- @media (pointer: fine){
2260
- :is(.tds-input textarea)::-webkit-scrollbar{
2261
- width:12px;
2262
- height:12px;
2263
- cursor:default;
2264
- }
2265
-
2266
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2267
- cursor:default;
2268
- background:var(--tds-input-scrollbar-thumb-color);
2269
- background-clip:content-box;
2270
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2271
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2272
- }
2064
+ .tds-radio-group legend{
2065
+ float:left;
2066
+ padding:0;
2067
+ margin:0;
2068
+ }
2273
2069
 
2274
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2275
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2276
- }
2070
+ .tds-radio-group[aria-invalid="true"]{
2071
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2072
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2073
+ }
2277
2074
 
2278
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2279
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2075
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2076
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2280
2077
  }
2281
2078
 
2282
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2283
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2284
- }
2079
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2080
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2081
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2082
+ }
2285
2083
 
2286
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2287
- background:var(--tds-input-scrollbar-surface-color);
2288
- }
2084
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2085
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2086
+ }
2289
2087
 
2290
- :is(.tds-input textarea)::-webkit-resizer{
2291
- background:var(--tds-input-resizer-icon) no-repeat;
2292
- background-position:right bottom;
2293
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2088
+ .tds-radio-group:has(input:required) legend::after{
2089
+ margin-left:.25ch;
2090
+ color:var(--t-text-color-status-error);
2091
+ content:"*";
2294
2092
  }
2295
2093
 
2296
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2297
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2298
- cursor:default;
2299
- }
2094
+ .tds-radio-group-fields{
2095
+ display:flex;
2096
+ flex-direction:column;
2097
+ gap:var(--tds-radio-group-gap);
2098
+ align-items:flex-start;
2099
+ margin-top:var(--t-spacing-1);
2100
+ }
2300
2101
 
2301
- @supports (-moz-appearance: none){
2302
- :is(.tds-input textarea){
2303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2304
- scrollbar-width:thin;
2305
- }
2102
+ .tds-radio-group-description{
2103
+ display:flex;
2104
+ gap:var(--t-spacing-half);
2105
+ align-items:flex-start;
2106
+ margin:var(--t-spacing-fourth) 0 0;
2107
+ font-size:var(--tds-radio-group-description-font-size);
2108
+ line-height:var(--tds-radio-group-description-line-height);
2109
+ color:var(--tds-radio-group-description-color);
2110
+ cursor:text;
2111
+ }
2306
2112
 
2307
- @media (hover){
2308
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2309
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2310
- }
2311
- }
2312
- }
2113
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2114
+ display:var(--tds-radio-group-description-invalid-icon-display);
2115
+ flex-shrink:0;
2116
+ margin-top:calc(.5lh - .5em);
2117
+ line-height:var(--tds-radio-group-description-line-height);
2313
2118
  }
2314
2119
 
2120
+ .tds-radio-group--sm{
2121
+ --tds-radio-group-line-height:1.35;
2122
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2123
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2124
+ --tds-radio-group-description-line-height:1.3;
2125
+ }
2126
+
2315
2127
  .tds-toggle-switch{
2316
2128
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2317
2129
  --tds-toggle-switch-cursor:pointer;
@@ -2452,199 +2264,387 @@ a.tds-dropdown-item:is(:hover, :active){
2452
2264
  --tds-toggle-switch-display:inline-flex;
2453
2265
  }
2454
2266
 
2455
- .tds-checkbox{
2456
- --tds-checkbox-font-size:var(--t-font-size-md);
2457
- --tds-checkbox-cursor:pointer;
2458
- --tds-checkbox-line-height:1.4;
2459
- --tds-checkbox-transition-property:background-color, border-color;
2460
-
2461
- --tds-checkbox-input-size:var(--t-element-size-md);
2462
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
2463
- --tds-checkbox-input-border-color:var(--t-form-border-color);
2464
- --tds-checkbox-input-background-color:var(--t-form-background-color);
2465
-
2466
- --tds-checkbox-input-icon:none;
2467
- --tds-checkbox-input-icon-visibility:hidden;
2468
- --tds-checkbox-input-icon-opacity:0;
2469
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2470
-
2471
- --tds-checkbox-label-color:var(--t-form-color);
2472
-
2473
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
2474
- --tds-checkbox-description-line-height:1.35;
2475
- --tds-checkbox-description-color:var(--t-text-color-secondary);
2476
- --tds-checkbox-description-invalid-icon-display:none;
2477
-
2478
- position:relative;
2479
- display:inline-grid;
2480
- grid-template-columns:auto;
2481
- grid-auto-columns:1fr;
2482
- gap:var(--t-spacing-fourth) 0;
2483
- line-height:var(--tds-checkbox-line-height);
2484
- -webkit-user-select:none;
2485
- -moz-user-select:none;
2486
- user-select:none;
2267
+ .tds-input:has(textarea){
2268
+ --tds-input-padding-block:6px;
2269
+ --tds-input-resizer-size:var(--t-element-size-sm);
2270
+ --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");
2487
2271
  }
2488
2272
 
2489
- .tds-checkbox label{
2490
- grid-area:1 / 2;
2491
- padding-inline-start:var(--t-spacing-1);
2492
- font-size:var(--tds-checkbox-font-size);
2493
- font-weight:var(--t-font-weight-normal);
2494
- color:var(--tds-checkbox-label-color);
2495
- cursor:var(--tds-checkbox-cursor);
2496
- }
2497
-
2498
- .tds-checkbox tds-indeterminate{
2499
- display:flex;
2500
- }
2273
+ @supports (x: attr(x type(*))){
2501
2274
 
2502
- .tds-checkbox input[type="checkbox"]{
2503
- position:relative;
2504
- width:1em;
2505
- height:1em;
2506
- margin:calc((1lh - 1em) / 2) 0 0;
2507
- font-size:var(--tds-checkbox-font-size);
2508
- line-height:inherit;
2509
- -webkit-appearance:none;
2510
- -moz-appearance:none;
2511
- appearance:none;
2512
- cursor:var(--tds-checkbox-cursor);
2513
- background-color:var(--tds-checkbox-input-background-color);
2514
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
2515
- border-radius:var(--tds-checkbox-input-border-radius);
2516
- transition-timing-function:var(--t-ease-in-out);
2517
- transition-duration:var(--t-duration-200);
2518
- transition-property:var(--tds-checkbox-transition-property);
2275
+ .tds-input textarea{
2276
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2277
+ }
2519
2278
  }
2520
2279
 
2521
- :is(.tds-checkbox input[type="checkbox"])::before{
2522
- position:absolute;
2523
- top:50%;
2524
- left:50%;
2525
- visibility:var(--tds-checkbox-input-icon-visibility);
2526
- width:100%;
2527
- height:100%;
2528
- content:"";
2529
- background-color:var(--tds-checkbox-input-icon-fill);
2530
- border-radius:var(--tds-checkbox-input-border-radius);
2531
- opacity:var(--tds-checkbox-input-icon-opacity);
2532
- -webkit-mask-image:var(--tds-checkbox-input-icon);
2533
- mask-image:var(--tds-checkbox-input-icon);
2534
- -webkit-mask-repeat:no-repeat;
2535
- mask-repeat:no-repeat;
2536
- -webkit-mask-size:contain;
2537
- mask-size:contain;
2538
- transform:translate(-50%, -50%);
2539
- }
2540
-
2541
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
2542
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2543
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2280
+ .tds-input.tds-textarea--resize-vertical textarea{
2281
+ resize:vertical;
2544
2282
  }
2545
2283
 
2546
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
2547
- outline:var(--t-focus-ring-outline);
2548
- outline-offset:var(--t-focus-ring-offset);
2284
+ .tds-input.tds-textarea--resize-none textarea{
2285
+ resize:none;
2549
2286
  }
2550
2287
 
2551
- :is(.tds-checkbox input[type="checkbox"]):disabled{
2552
- pointer-events:none;
2288
+ .tds-input.tds-textarea--resize-auto textarea{
2289
+ resize:vertical;
2553
2290
  }
2554
2291
 
2555
- @media (prefers-reduced-motion: reduce){
2556
-
2557
- .tds-checkbox input[type="checkbox"]{
2558
- --tds-checkbox-transition-property:none;
2559
- }
2292
+ @supports (field-sizing: content){
2293
+ .tds-input.tds-textarea--resize-auto textarea{
2294
+ field-sizing:content;
2295
+ resize:none;
2296
+ }
2560
2297
  }
2561
2298
 
2562
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
2563
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
2564
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
2565
- --tds-checkbox-input-icon-visibility:visible;
2566
- --tds-checkbox-input-icon-opacity:1;
2299
+ .tds-input textarea{
2300
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2301
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2302
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2303
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2304
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2305
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2306
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2307
+ --tds-input-scrollbar-thumb-border-radius:999px;
2308
+ --tds-input-scrollbar-thumb-border-width:3px;
2309
+ --tds-input-scrollbar-track-margin-block:.125rem;
2310
+ scrollbar-color:initial;
2311
+ transition-timing-function:var(--t-ease-in-out);
2312
+ transition-duration:var(--t-duration-200);
2313
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2314
+ }
2315
+
2316
+ @media (pointer: fine){
2317
+ :is(.tds-input textarea)::-webkit-scrollbar{
2318
+ width:12px;
2319
+ height:12px;
2320
+ cursor:default;
2321
+ }
2322
+
2323
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2324
+ cursor:default;
2325
+ background:var(--tds-input-scrollbar-thumb-color);
2326
+ background-clip:content-box;
2327
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2328
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2329
+ }
2330
+
2331
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2332
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2333
+ }
2334
+
2335
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2336
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2337
+ }
2338
+
2339
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2340
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2341
+ }
2342
+
2343
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2344
+ background:var(--tds-input-scrollbar-surface-color);
2345
+ }
2346
+
2347
+ :is(.tds-input textarea)::-webkit-resizer{
2348
+ background:var(--tds-input-resizer-icon) no-repeat;
2349
+ background-position:right bottom;
2350
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2351
+ }
2352
+
2353
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2354
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2355
+ cursor:default;
2356
+ }
2357
+
2358
+ @supports (-moz-appearance: none){
2359
+ :is(.tds-input textarea){
2360
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2361
+ scrollbar-width:thin;
2362
+ }
2363
+
2364
+ @media (hover){
2365
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2366
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2367
+ }
2368
+ }
2369
+ }
2567
2370
  }
2568
2371
 
2569
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
2570
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2571
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
2372
+ @layer t-critical{
2373
+ tds-page-header:not(.hydrated){
2374
+ display:none;
2375
+ }
2376
+ }
2377
+
2378
+ @layer t-component{
2379
+ .tds-page-header{
2380
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2381
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2382
+ --tds-page-header-color:var(--t-text-color);
2383
+ --tds-page-header-bottom-border-color:transparent;
2384
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2385
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2386
+ --tds-page-header-padding-x:var(--t-spacing-2);
2387
+ --tds-page-header-padding-y:var(--t-spacing-2);
2388
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2389
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2390
+ --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%);
2391
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2392
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2393
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2394
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2395
+ --tds-page-header-nav-item-border-width:1px;
2396
+
2397
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2398
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2399
+
2400
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2401
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2402
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2403
+
2404
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2405
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2406
+
2407
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2408
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2409
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2410
+
2411
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2412
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2413
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2414
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2415
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2416
+ }
2417
+
2418
+ .tds-page-header--profile{
2419
+ --tds-page-header-padding-y:20px;
2420
+ }
2421
+
2422
+ @supports (color: light-dark(#fff, #000)){
2423
+ .tds-page-header{
2424
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2425
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2572
2426
  }
2427
+ }
2573
2428
 
2574
- .tds-checkbox:has(input:checked){
2575
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2429
+ @media (min-width: 600px){
2430
+ .tds-page-header{
2431
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2432
+ --tds-page-header-color:var(--t-text-color-secondary);
2433
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2434
+ --tds-page-header-padding-x:var(--t-spacing-3);
2435
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2436
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2437
+ --tds-page-header-nav-background:transparent;
2438
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2439
+ --tds-page-header-nav-item-border-width:1px;
2440
+ --tds-page-header-nav-item-color:var(--t-text-color);
2441
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2442
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2443
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2444
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2445
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2446
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2447
+ }
2576
2448
  }
2449
+ }
2577
2450
 
2578
- .tds-checkbox:has(input:indeterminate){
2579
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2451
+ .tds-page-header{
2452
+ display:flex;
2453
+ flex-direction:column;
2454
+ padding-top:var(--tds-page-header-padding-y);
2455
+ color:var(--tds-page-header-color);
2456
+ background:var(--tds-page-header-background-color);
2457
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2458
+ }
2459
+
2460
+ .tds-page-header:not(.has-nav){
2461
+ padding-bottom:var(--tds-page-header-padding-y);
2580
2462
  }
2581
2463
 
2582
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
2583
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2584
- --tds-checkbox-description-color:var(--t-text-color-status-error);
2585
- --tds-checkbox-description-invalid-icon-display:inline-block;
2464
+ .tds-page-header.inactive{
2465
+ background:var(--tds-page-header-background-color-inactive);
2586
2466
  }
2587
2467
 
2588
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
2589
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2590
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
2468
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2469
+ width:100%;
2470
+ }
2471
+
2472
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2473
+ display:flex;
2474
+ flex-flow:row wrap;
2475
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2476
+ align-items:flex-start;
2477
+ justify-content:flex-start;
2478
+ min-width:0;
2479
+ }
2480
+
2481
+ :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{
2482
+ display:flex;
2483
+ gap:var(--tds-page-header-nav-gap);
2484
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2485
+ margin:0 0 -1px;
2486
+ overflow:auto;
2487
+ list-style:none;
2488
+ background:var(--tds-page-header-nav-background);
2591
2489
  }
2592
2490
 
2593
- :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{
2594
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2595
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2491
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2492
+ position:relative;
2493
+ display:inline-flex;
2494
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2495
+ font-size:var(--t-font-size-sm);
2496
+ line-height:22px;
2497
+ color:var(--tds-page-header-nav-item-color);
2498
+ white-space:nowrap;
2499
+ text-decoration:none;
2500
+ -webkit-appearance:none;
2501
+ -moz-appearance:none;
2502
+ appearance:none;
2503
+ cursor:pointer;
2504
+ outline-offset:-2px;
2505
+ background-color:var(--tds-page-header-nav-item-background-color);
2506
+ background-clip:padding-box;
2507
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2508
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2509
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2596
2510
  }
2597
2511
 
2598
- :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){
2599
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
2600
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
2512
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2513
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2514
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2515
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2516
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2601
2517
  }
2602
2518
 
2603
- .tds-checkbox:has(input:required) label::after{
2604
- margin-left:.25ch;
2605
- color:var(--t-text-color-status-error);
2606
- content:"*";
2607
- }
2519
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2520
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2521
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2522
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2523
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2524
+ }
2608
2525
 
2609
- .tds-checkbox:has(input:disabled){
2610
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
2611
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2526
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2527
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2528
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2529
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2530
+ }
2612
2531
 
2613
- --tds-checkbox-label-color:var(--t-form-color-disabled);
2614
- --tds-checkbox-description-color:var(--t-form-color-disabled);
2615
- --tds-checkbox-cursor:not-allowed;
2616
- }
2532
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2533
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2534
+ color:var(--tds-page-header-nav-item-color-disabled);
2535
+ cursor:not-allowed;
2536
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2537
+ opacity:1;
2538
+ }
2617
2539
 
2618
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
2619
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2540
+ @media (min-width: 600px){
2541
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2542
+ position:absolute;
2543
+ inset:auto -1px -1px;
2544
+ height:1px;
2545
+ pointer-events:none;
2546
+ content:"";
2547
+ background-color:var(--tds-page-header-bottom-border-color);
2548
+ }
2549
+ }
2550
+
2551
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2552
+ position:relative;
2620
2553
  }
2621
2554
 
2622
- .tds-checkbox-description{
2555
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2556
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2557
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2558
+ }
2559
+
2560
+ :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{
2561
+ position:absolute;
2562
+ top:-5px;
2563
+ right:-2px;
2564
+ width:10px;
2565
+ height:10px;
2566
+ content:"";
2567
+ background:var(--tds-page-header-nav-item-indicator-color);
2568
+ border-radius:50%;
2569
+ }
2570
+
2571
+ @media (prefers-reduced-motion: no-preference){
2572
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2573
+ animation:indicator-pulse 1.25s ease infinite;
2574
+ }
2575
+ }
2576
+
2577
+ .tds-page-header__title-bar{
2623
2578
  display:flex;
2624
- grid-area:2 / 2;
2625
- gap:var(--t-spacing-half);
2579
+ flex-direction:column;
2580
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2626
2581
  align-items:flex-start;
2627
- padding-inline-start:var(--t-spacing-1);
2628
- margin:0;
2629
- font-size:var(--tds-checkbox-description-font-size);
2630
- line-height:var(--tds-checkbox-description-line-height);
2631
- color:var(--tds-checkbox-description-color);
2632
- cursor:text;
2582
+ justify-content:space-between;
2583
+ padding:0 var(--tds-page-header-padding-x);
2633
2584
  }
2634
2585
 
2635
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
2636
- display:var(--tds-checkbox-description-invalid-icon-display);
2637
- flex-shrink:0;
2638
- margin-top:calc(.5lh - .5em);
2639
- line-height:var(--tds-checkbox-description-line-height);
2586
+ .tds-page-header--profile > .tds-page-header__title-bar{
2587
+ align-items:center;
2640
2588
  }
2641
2589
 
2642
- .tds-checkbox--sm{
2643
- --tds-checkbox-line-height:1.35;
2644
- --tds-checkbox-input-size:var(--t-element-size-sm);
2645
- --tds-checkbox-font-size:var(--t-font-size-sm);
2646
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
2647
- --tds-checkbox-description-line-height:1.3;
2590
+ .tds-page-header__primary{
2591
+ width:100%;
2592
+ }
2593
+
2594
+ .tds-page-header__primary h1{
2595
+ margin:0;
2596
+ font-size:var(--tds-page-header-headline-font-size);
2597
+ font-weight:var(--t-font-weight-normal);
2598
+ line-height:32px;
2599
+ color:var(--tds-page-header-headline-color);
2600
+ overflow-wrap:break-word;
2601
+ }
2602
+
2603
+ @media (min-width: 960px){
2604
+ .tds-page-header__primary{
2605
+ flex:1 1 max-content;
2606
+ width:auto;
2607
+ min-width:0;
2608
+ max-width:100%;
2609
+ }
2610
+
2611
+ .tds-page-header__title-bar,
2612
+ .tds-page-header--profile .tds-page-header__title-bar{
2613
+ flex-flow:row nowrap;
2614
+ row-gap:12px;
2615
+ align-items:flex-start;
2616
+ }
2617
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2618
+ width:auto;
2619
+ }
2620
+
2621
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2622
+ justify-content:flex-end;
2623
+ }
2624
+ }
2625
+
2626
+ .tds-page-header-phone,
2627
+ .tds-page-header-email{
2628
+ color:var(--tds-page-header-color);
2629
+ white-space:nowrap;
2630
+ }
2631
+
2632
+ .tds-page-header-email{
2633
+ max-width:100%;
2634
+ overflow:hidden;
2635
+ text-overflow:ellipsis;
2636
+ }
2637
+
2638
+ @keyframes indicator-pulse{
2639
+ 0%{
2640
+ opacity:.3;
2641
+ transform:scale(.9);
2642
+ }
2643
+
2644
+ 100%{
2645
+ opacity:0;
2646
+ transform:scale(1.75);
2647
+ }
2648
2648
  }
2649
2649
 
2650
2650
  .tds-loading-spinner{