@planningcenter/tapestry 4.0.0-rc.8 → 4.0.0-rc.9

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.
@@ -677,499 +677,298 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
-
681
- @media (prefers-reduced-motion: no-preference){
682
-
683
- :root{
684
- interpolate-size:allow-keywords;
685
- }
680
+ @layer t-critical{
681
+ tds-page-header:not(.hydrated){
682
+ display:none;
686
683
  }
684
+ }
687
685
 
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
693
-
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
695
-
696
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
697
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
698
- --tds-sidenav-collapse-closed-opacity:0;
699
- --tds-sidenav-collapse-open-opacity:1;
700
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
- --tds-sidenav-collapse-open-transform:translateY(0);
686
+ @layer t-component{
687
+ .tds-page-header{
688
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
+ --tds-page-header-color:var(--t-text-color);
691
+ --tds-page-header-bottom-border-color:transparent;
692
+ --tds-page-header-headline-color:var(--t-text-color-headline);
693
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
+ --tds-page-header-padding-x:var(--t-spacing-2);
695
+ --tds-page-header-padding-y:var(--t-spacing-2);
696
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
+ --tds-page-header-nav-gap:var(--t-spacing-1);
698
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
+ --tds-page-header-nav-item-border-width:1px;
702
704
 
703
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
705
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
707
707
 
708
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
- --tds-sidenav-item-nested-background-selected:transparent;
708
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
711
711
 
712
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
712
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
715
714
 
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
- }
715
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
719
718
 
720
- @media (prefers-reduced-motion: reduce){
721
- tds-sidenav,
722
- .tds-sidenav{
723
- --tds-sidenav-collapse-transition-enter:none;
724
- --tds-sidenav-collapse-transition-exit:none;
725
- --tds-sidenav-collapse-closed-transform:none;
726
- --tds-sidenav-collapse-open-transform:none;
719
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
727
724
  }
728
- }
729
725
 
730
- .tds-sidenav--theme-gray{
731
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
726
+ .tds-page-header--profile{
727
+ --tds-page-header-padding-y:20px;
736
728
  }
737
- }
738
729
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- display:flex;
730
+ @supports (color: light-dark(#fff, #000)){
731
+ .tds-page-header{
732
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
734
+ }
741
735
  }
742
736
 
743
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
- flex-direction:column;
745
- gap:var(--t-spacing-half);
746
- width:100%;
737
+ @media (min-width: 600px){
738
+ .tds-page-header{
739
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
740
+ --tds-page-header-color:var(--t-text-color-secondary);
741
+ --tds-page-header-bottom-border-color:var(--t-border-color);
742
+ --tds-page-header-padding-x:var(--t-spacing-3);
743
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
+ --tds-page-header-nav-gap:var(--t-spacing-half);
745
+ --tds-page-header-nav-background:transparent;
746
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
+ --tds-page-header-nav-item-border-width:1px;
748
+ --tds-page-header-nav-item-color:var(--t-text-color);
749
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
+ }
747
756
  }
748
-
749
- .tds-sidenav-section-list{
750
- width:100%;
751
- padding:0;
752
- margin:0;
753
- list-style:none;
754
757
  }
755
758
 
756
- .tds-sidenav-section-header{
759
+ .tds-page-header{
757
760
  display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- padding-top:var(--t-spacing-2);
761
+ flex-direction:column;
762
+ padding-top:var(--tds-page-header-padding-y);
763
+ color:var(--tds-page-header-color);
764
+ background:var(--tds-page-header-background-color);
765
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
761
766
  }
762
767
 
763
- .tds-sidenav-section-header h2{
764
- margin:0;
765
- font-size:var(--t-font-size-sm);
766
- font-weight:var(--t-font-weight-semibold);
767
- line-height:1.35;
768
- color:var(--t-text-color-secondary);
769
- text-transform:uppercase;
768
+ .tds-page-header:not(.has-nav){
769
+ padding-bottom:var(--tds-page-header-padding-y);
770
770
  }
771
771
 
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
772
+ .tds-page-header.inactive{
773
+ background:var(--tds-page-header-background-color-inactive);
774
774
  }
775
775
 
776
- .tds-sidenav-section-header [slot="label-actions"]{
777
- display:flex;
778
- gap:var(--t-spacing-half);
779
- align-items:center;
776
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
+ width:100%;
780
778
  }
781
779
 
782
- .tds-sidenav-section [slot="section-actions"]{
783
- display:flex;
784
- gap:12px;
785
- align-items:center;
786
- min-height:42px;
787
- padding:var(--t-spacing-1) 0;
788
- }
789
-
790
- .tds-sidenav-section-list,
791
- .tds-sidenav-item{
792
- width:100%;
793
- padding:0;
794
- margin:0;
795
- }
796
-
797
- .tds-sidenav-item :is(a,button){
798
- position:relative;
780
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
799
781
  display:flex;
800
- gap:12px;
801
- align-items:center;
802
- width:100%;
803
- padding:12px;
804
- overflow:hidden;
805
- font-size:var(--t-font-size-sm);
806
- line-height:18px;
807
- color:var(--t-text-color-headline);
808
- white-space:nowrap;
809
- text-decoration:none;
810
- -webkit-appearance:none;
811
- -moz-appearance:none;
812
- appearance:none;
813
- cursor:pointer;
814
- background-color:var(--tds-sidenav-item-background, transparent);
815
- border:0;
816
- border-radius:var(--t-border-radius);
817
- transition:var(--tds-sidenav-item-transition);
782
+ flex-flow:row wrap;
783
+ gap:var(--t-spacing-half) var(--t-spacing-1);
784
+ align-items:flex-start;
785
+ justify-content:flex-start;
786
+ min-width:0;
818
787
  }
819
788
 
820
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
- display:block;
822
- flex:1;
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- text-align:left;
826
- white-space:nowrap;
789
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
+ display:flex;
791
+ gap:var(--tds-page-header-nav-gap);
792
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
+ margin:0 0 -1px;
794
+ overflow:auto;
795
+ list-style:none;
796
+ background:var(--tds-page-header-nav-background);
827
797
  }
828
798
 
829
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
- color:var(--t-text-color-headline);
799
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
+ position:relative;
801
+ display:inline-flex;
802
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
+ font-size:var(--t-font-size-sm);
804
+ line-height:22px;
805
+ color:var(--tds-page-header-nav-item-color);
806
+ white-space:nowrap;
832
807
  text-decoration:none;
808
+ -webkit-appearance:none;
809
+ -moz-appearance:none;
810
+ appearance:none;
811
+ cursor:pointer;
812
+ outline-offset:-2px;
813
+ background-color:var(--tds-page-header-nav-item-background-color);
814
+ background-clip:padding-box;
815
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
833
818
  }
834
819
 
835
- :is(.tds-sidenav-item :is(a,button)):active{
836
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
- }
838
-
839
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
- overflow:hidden;
841
- color:var(--tds-sidenav-item-icon-color);
842
- }
843
-
844
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
845
- display:block;
846
- width:var(--tds-sidenav-item-icon-size);
847
- height:var(--tds-sidenav-item-icon-size);
820
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
848
825
  }
849
826
 
850
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
- --tds-sidenav-indent:19px;
852
- }
827
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
+ }
853
833
 
854
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
- visibility:visible;
856
- block-size:auto;
857
- opacity:1;
858
- }
859
-
860
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
863
-
864
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
- font-weight:var(--t-font-weight-semibold);
866
- }
867
-
868
- .tds-sidenav-item:has(.tds-sidenav-section){
869
- display:flex;
870
- flex-direction:column;
871
- gap:var(--t-spacing-half);
872
- }
873
-
874
- .tds-sidenav-item .tds-sidenav-section-list{
875
- --tds-sidenav-item-depth:1;
876
- gap:0;
877
- }
834
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
+ background-color:var(--tds-page-header-nav-item-background-color-active);
836
+ border-color:var(--tds-page-header-nav-item-border-color-active);
837
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
+ }
878
839
 
879
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
- visibility:hidden;
881
- block-size:0;
882
- overflow-y:clip;
883
- opacity:0;
884
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
885
- }
840
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
+ color:var(--tds-page-header-nav-item-color-disabled);
843
+ cursor:not-allowed;
844
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
+ opacity:1;
846
+ }
886
847
 
887
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
- --tds-sidenav-item-depth:2;
889
- }
848
+ @media (min-width: 600px){
849
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
+ position:absolute;
851
+ inset:auto -1px -1px;
852
+ height:1px;
853
+ pointer-events:none;
854
+ content:"";
855
+ background-color:var(--tds-page-header-bottom-border-color);
856
+ }
857
+ }
890
858
 
891
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
- min-height:var(--t-element-size-2xl);
893
- padding-block:9px;
894
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
- line-height:1;
896
- background-color:transparent;
859
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
+ position:relative;
897
861
  }
898
862
 
899
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
- position:absolute;
901
- top:0;
902
- bottom:0;
903
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
- width:2px;
905
- content:"";
906
- background-color:var(--tds-sidenav-item-nested-border-color);
907
- transition:var(--tds-sidenav-item-transition);
863
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
908
866
  }
909
867
 
910
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
868
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
911
869
  position:absolute;
912
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- z-index:-1;
914
- height:100%;
870
+ top:-5px;
871
+ right:-2px;
872
+ width:10px;
873
+ height:10px;
915
874
  content:"";
916
- background-color:var(--tds-sidenav-item-nested-background);
917
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
- transition:var(--tds-sidenav-item-transition);
919
- }
920
-
921
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
- display:block;
923
- text-align:left;
924
- white-space:normal;
925
- }
926
-
927
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
928
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
875
+ background:var(--tds-page-header-nav-item-indicator-color);
876
+ border-radius:50%;
930
877
  }
931
878
 
932
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
879
+ @media (prefers-reduced-motion: no-preference){
880
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
+ animation:indicator-pulse 1.25s ease infinite;
882
+ }
934
883
  }
935
884
 
936
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
- font-weight:var(--t-font-weight-medium);
939
- }
940
-
941
- .tds-sidenav-responsive-header{
885
+ .tds-page-header__title-bar{
942
886
  display:flex;
943
- gap:var(--t-spacing-2);
944
- align-items:center;
945
- width:100%;
887
+ flex-direction:column;
888
+ gap:var(--t-spacing-2) var(--t-spacing-1);
889
+ align-items:flex-start;
890
+ justify-content:space-between;
891
+ padding:0 var(--tds-page-header-padding-x);
946
892
  }
947
893
 
948
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
- order:0;
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
950
896
  }
951
897
 
952
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
- flex:1;
954
- order:1;
955
- margin:0;
956
- font-size:var(--t-font-size-lg);
957
- font-weight:var(--t-font-weight-medium);
958
- color:var(--t-text-color-headline);
959
- }
898
+ .tds-page-header__primary{
899
+ width:100%;
900
+ }
960
901
 
961
- @media (max-width: 719px){
962
- .tds-sidenav-collapse{
963
- z-index:10001;
964
- display:none;
965
- max-width:min(448px, calc(100vw - 48px));
966
- padding:0;
967
- margin:12px 0;
968
- position-area:bottom span-right;
969
- overflow:hidden;
970
- outline:0;
971
- background:var(--t-surface-color-card);
972
- border:0;
973
- border-radius:6px;
974
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
- opacity:var(--tds-sidenav-collapse-open-opacity);
976
- transform:var(--tds-sidenav-collapse-open-transform);
977
- transition:var(--tds-sidenav-collapse-transition-enter);
978
- will-change:transform;
902
+ .tds-page-header__primary h1{
903
+ margin:0;
904
+ font-size:var(--tds-page-header-headline-font-size);
905
+ font-weight:var(--t-font-weight-normal);
906
+ line-height:32px;
907
+ color:var(--tds-page-header-headline-color);
908
+ overflow-wrap:break-word;
979
909
  }
980
910
 
981
- .tds-sidenav-scroll-container{
982
- --webkit-overflow-scrolling:touch;
983
- display:block;
984
- width:100%;
985
- height:-moz-fit-content;
986
- height:fit-content;
987
- padding:var(--t-spacing-2);
988
- overflow-y:auto;
911
+ @media (min-width: 960px){
912
+ .tds-page-header__primary{
913
+ flex:1 1 max-content;
914
+ width:auto;
915
+ min-width:0;
916
+ max-width:100%;
989
917
  }
990
918
 
991
- .tds-sidenav-item :is(a, button) :is(.prefix){
992
- display:none;
919
+ .tds-page-header__title-bar,
920
+ .tds-page-header--profile .tds-page-header__title-bar{
921
+ flex-flow:row nowrap;
922
+ row-gap:12px;
923
+ align-items:flex-start;
993
924
  }
994
- @supports selector(:popover-open){
995
- .tds-sidenav-collapse:popover-open{
996
- display:flex;
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
997
927
  }
998
928
 
999
- .tds-sidenav-collapse:not(:popover-open){
1000
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
- transition:var(--tds-sidenav-collapse-transition-exit);
929
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
+ justify-content:flex-end;
1002
931
  }
932
+ }
1003
933
 
1004
- @starting-style{
1005
- .tds-sidenav-collapse:popover-open{
1006
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
- transform:var(--tds-sidenav-collapse-closed-transform);
1008
- }
1009
- }
1010
- }
1011
- @supports not selector(:popover-open){
1012
- .tds-sidenav-collapse.\:popover-open{
1013
- display:flex;
1014
- }
934
+ .tds-page-header-phone,
935
+ .tds-page-header-email{
936
+ color:var(--tds-page-header-color);
937
+ white-space:nowrap;
938
+ }
939
+ .tds-page-header-email{
940
+ max-width:100%;
941
+ overflow:hidden;
942
+ text-overflow:ellipsis;
943
+ }
1015
944
 
1016
- .tds-sidenav-collapse:not(.\:popover-open){
1017
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
- transition:var(--tds-sidenav-collapse-transition-exit);
1019
- }
945
+ @keyframes indicator-pulse{
946
+ 0%{
947
+ opacity:.3;
948
+ transform:scale(.9);
1020
949
  }
1021
- }
1022
950
 
1023
- @media (min-width: 720px){
1024
- .tds-sidenav-responsive-header{
1025
- display:none;
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
1026
954
  }
1027
955
  }
1028
956
 
1029
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
- display:none;
1031
- }
957
+ .tds-checkbox{
958
+ --tds-checkbox-font-size:var(--t-font-size-md);
959
+ --tds-checkbox-cursor:pointer;
960
+ --tds-checkbox-line-height:1.4;
961
+ --tds-checkbox-transition-property:background-color, border-color;
1032
962
 
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
1035
- }
963
+ --tds-checkbox-input-size:var(--t-element-size-md);
964
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
965
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
966
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1036
967
 
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1040
- }
1041
-
1042
- .tds-button-group{
1043
- display:inline-flex;
1044
- }
1045
- .tds-button-group > .tds-btn{
1046
- --tds-button-group-item-z-index:1;
1047
-
1048
- position:relative;
1049
- z-index:var(--tds-button-group-item-z-index);
1050
- border-radius:0;
1051
- }
1052
- :is(.tds-button-group > .tds-btn):not(:first-child){
1053
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1054
- }
1055
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1056
- position:absolute;
1057
- inset-block:calc(var(--tds-btn-border-width) * -1);
1058
- width:var(--tds-btn-border-width);
1059
- pointer-events:none;
1060
- content:"";
1061
- background-color:var(--t-border-color-white);
1062
- }
1063
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
1064
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1065
- }
1066
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
1067
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1068
- }
1069
- :is(.tds-button-group > .tds-btn):hover{
1070
- --tds-button-group-item-z-index:2;
1071
- }
1072
- :is(.tds-button-group > .tds-btn):focus-visible{
1073
- --tds-button-group-item-z-index:5;
1074
- }
1075
- .tds-button-group > .tds-btn:first-child{
1076
- border-start-start-radius:var(--tds-btn-border-radius);
1077
- border-end-start-radius:var(--tds-btn-border-radius);
1078
- }
1079
- .tds-button-group > .tds-btn:last-child{
1080
- border-start-end-radius:var(--tds-btn-border-radius);
1081
- border-end-end-radius:var(--tds-btn-border-radius);
1082
- }
1083
-
1084
- .tds-checkbox-group{
1085
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1086
- --tds-checkbox-group-line-height:1.4;
1087
- --tds-checkbox-group-gap:var(--t-spacing-1);
1088
-
1089
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1090
- --tds-checkbox-group-description-line-height:1.35;
1091
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1092
- --tds-checkbox-group-description-invalid-icon-display:none;
1093
- display:flex;
1094
- flex-direction:column;
1095
- gap:0;
1096
- padding:0;
1097
- margin:0;
1098
-
1099
- font-size:var(--tds-checkbox-group-font-size);
1100
- line-height:var(--tds-checkbox-group-line-height);
1101
- border:0;
1102
- }
1103
-
1104
- .tds-checkbox-group legend{
1105
- float:left;
1106
- padding:0;
1107
- margin:0;
1108
- }
1109
-
1110
- .tds-checkbox-group[aria-invalid="true"]{
1111
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1112
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1113
- }
1114
-
1115
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1116
- margin-left:.25ch;
1117
- color:var(--t-text-color-status-error);
1118
- content:"*";
1119
- }
1120
-
1121
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
- content:none;
1123
- }
1124
-
1125
- .tds-checkbox-group-fields{
1126
- display:flex;
1127
- flex-direction:column;
1128
- gap:var(--tds-checkbox-group-gap);
1129
- align-items:flex-start;
1130
- margin-top:var(--t-spacing-1);
1131
- }
1132
-
1133
- .tds-checkbox-group-description{
1134
- display:flex;
1135
- gap:var(--t-spacing-half);
1136
- align-items:flex-start;
1137
- margin:var(--t-spacing-fourth) 0 0;
1138
- font-size:var(--tds-checkbox-group-description-font-size);
1139
- line-height:var(--tds-checkbox-group-description-line-height);
1140
- color:var(--tds-checkbox-group-description-color);
1141
- cursor:text;
1142
- }
1143
-
1144
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1145
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1146
- flex-shrink:0;
1147
- margin-top:calc(.5lh - .5em);
1148
- line-height:var(--tds-checkbox-group-description-line-height);
1149
- }
1150
-
1151
- .tds-checkbox-group--sm{
1152
- --tds-checkbox-group-line-height:1.35;
1153
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1154
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1155
- --tds-checkbox-group-description-line-height:1.3;
1156
- }
1157
-
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;
1163
-
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);
1168
-
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);
968
+ --tds-checkbox-input-icon:none;
969
+ --tds-checkbox-input-icon-visibility:hidden;
970
+ --tds-checkbox-input-icon-opacity:0;
971
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1173
972
 
1174
973
  --tds-checkbox-label-color:var(--t-form-color);
1175
974
 
@@ -1350,164 +1149,101 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1350
1149
  --tds-checkbox-description-line-height:1.3;
1351
1150
  }
1352
1151
 
1353
- .tds-combo-box{
1354
- --tds-combo-box-button-offset:4px;
1355
- }
1356
1152
 
1357
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1358
- transform:rotate(.5turn);
1359
- }
1153
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1154
+ -webkit-appearance:none;
1155
+ appearance:none;
1156
+ }
1360
1157
 
1361
- .tds-combo-box--lg{
1362
- --tds-combo-box-button-offset:5px;
1363
- }
1364
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1365
- display:none;
1366
- }
1367
- .tds-combo-box-input{
1368
- display:flex;
1369
- flex:1;
1370
- align-items:center;
1371
- padding-block:var(--tds-field-padding-block);
1372
- padding-inline:var(--tds-field-padding-inline);
1373
- font-family:inherit;
1374
- font-size:inherit;
1375
- color:inherit;
1376
- outline:0;
1377
- background:transparent;
1378
- border:0;
1379
- }
1380
- .tds-combo-box-input:has( + .tds-combo-box-button){
1381
- padding-inline-end:0;
1382
- }
1383
- .tds-combo-box-input::-moz-placeholder{
1384
- color:var(--tds-field-placeholder-color);
1385
- -moz-user-select:none;
1386
- user-select:none;
1387
- }
1388
- .tds-combo-box-input::placeholder{
1389
- color:var(--tds-field-placeholder-color);
1390
- -webkit-user-select:none;
1391
- -moz-user-select:none;
1392
- user-select:none;
1393
- }
1394
- .tds-combo-box-button{
1395
- flex-shrink:0;
1396
- align-self:center;
1397
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1398
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1399
- padding:0;
1400
- margin-inline-end:var(--tds-combo-box-button-offset);
1401
- }
1402
- .tds-combo-box-button > svg{
1403
- inline-size:var(--tds-field-font-size);
1404
- block-size:var(--tds-field-font-size);
1405
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1406
- }
1407
- .tds-combo-box-popover{
1408
- width:var(--trigger-width);
1409
- max-block-size:inherit;
1410
- padding:var(--t-spacing-1);
1411
- overflow:auto;
1412
- scroll-behavior:smooth;
1413
- overscroll-behavior:none;
1414
- -webkit-user-select:none;
1415
- -moz-user-select:none;
1416
- user-select:none;
1417
- outline:0;
1418
- scrollbar-color:#0004 var(--t-surface-color-card);
1419
- scrollbar-width:thin;
1420
- background:var(--t-surface-color-card);
1421
- background-clip:padding-box;
1422
- border:1px solid var(--t-border-color);
1423
- border-radius:var(--t-border-radius);
1424
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1425
- }
1426
- .tds-combo-box-popover[data-entering]{
1427
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1428
- }
1429
- .tds-combo-box-popover[data-exiting]{
1430
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1431
- }
1432
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1433
- will-change:opacity, transform;
1158
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1159
+ inline-size:1em;
1160
+ block-size:2em;
1161
+ }
1162
+ @supports (field-sizing: content){
1163
+ .tds-input--auto-width{
1164
+ inline-size:-moz-fit-content;
1165
+ inline-size:fit-content;
1166
+ min-inline-size:min(100%, 122px);
1434
1167
  }
1435
1168
 
1436
- @keyframes tds-combo-box-popover{
1437
- from{
1438
- opacity:0;
1439
- transform:translateY(-8px);
1169
+ .tds-input--auto-width input{
1170
+ field-sizing:content;
1171
+ inline-size:auto;
1440
1172
  }
1441
1173
  }
1442
1174
 
1443
- @media (prefers-reduced-motion: reduce){
1444
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1445
- animation:none;
1446
- }
1175
+ .tds-checkbox-group{
1176
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1177
+ --tds-checkbox-group-line-height:1.4;
1178
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1447
1179
 
1448
- .tds-combo-box-button > svg{
1449
- transition:none;
1450
- }
1451
- }
1452
- .tds-combo-box-list{
1180
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1181
+ --tds-checkbox-group-description-line-height:1.35;
1182
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1183
+ --tds-checkbox-group-description-invalid-icon-display:none;
1184
+ display:flex;
1185
+ flex-direction:column;
1186
+ gap:0;
1453
1187
  padding:0;
1454
1188
  margin:0;
1189
+
1190
+ font-size:var(--tds-checkbox-group-font-size);
1191
+ line-height:var(--tds-checkbox-group-line-height);
1192
+ border:0;
1455
1193
  }
1456
- .tds-combo-box-list-item{
1457
- display:block;
1458
- padding-block:var(--t-spacing-1);
1459
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1460
- overflow:hidden;
1461
- text-overflow:ellipsis;
1462
- font-size:1rem;
1463
- color:var(--t-text-color);
1464
- white-space:nowrap;
1465
- cursor:default;
1466
- border-radius:var(--t-border-radius);
1467
- }
1468
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1469
- background:var(--t-fill-color-neutral-070);
1470
- }
1471
- .tds-combo-box-list-item[data-selected]{
1472
- background:var(--t-fill-color-button-interaction-ghost-active);
1473
- }
1474
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1475
- background:var(--t-fill-color-neutral-060);
1194
+
1195
+ .tds-checkbox-group legend{
1196
+ float:left;
1197
+ padding:0;
1198
+ margin:0;
1476
1199
  }
1477
- .tds-combo-box-list-item[data-disabled]{
1478
- color:var(--t-form-color-disabled);
1479
- cursor:not-allowed;
1200
+
1201
+ .tds-checkbox-group[aria-invalid="true"]{
1202
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1203
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1480
1204
  }
1481
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1482
- background:transparent;
1205
+
1206
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1207
+ margin-left:.25ch;
1208
+ color:var(--t-text-color-status-error);
1209
+ content:"*";
1483
1210
  }
1484
- .tds-combo-box-empty-state{
1485
- position:relative;
1486
- min-block-size:var(--t-spacing-3);
1487
- padding-block:var(--t-spacing-1);
1488
- padding-inline:var(--t-spacing-2);
1489
- font-size:var(--t-font-size-md);
1490
- color:var(--t-text-color-secondary);
1491
- }
1492
- .tds-combo-box-load-more{
1493
- position:relative;
1494
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1211
+
1212
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1213
+ content:none;
1214
+ }
1215
+
1216
+ .tds-checkbox-group-fields{
1217
+ display:flex;
1218
+ flex-direction:column;
1219
+ gap:var(--tds-checkbox-group-gap);
1220
+ align-items:flex-start;
1221
+ margin-top:var(--t-spacing-1);
1495
1222
  }
1496
1223
 
1497
- .tds-combo-box-empty-state,
1498
- .tds-combo-box-load-more{
1499
- --tds-loading-spinner-visibility:visible;
1500
- --tds-loading-spinner-animation-play-state:running;
1224
+ .tds-checkbox-group-description{
1225
+ display:flex;
1226
+ gap:var(--t-spacing-half);
1227
+ align-items:flex-start;
1228
+ margin:var(--t-spacing-fourth) 0 0;
1229
+ font-size:var(--tds-checkbox-group-description-font-size);
1230
+ line-height:var(--tds-checkbox-group-description-line-height);
1231
+ color:var(--tds-checkbox-group-description-color);
1232
+ cursor:text;
1501
1233
  }
1502
- .tds-combo-box-list-section:not(:first-child){
1503
- margin-block-start:var(--t-spacing-half);
1234
+
1235
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1236
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1237
+ flex-shrink:0;
1238
+ margin-top:calc(.5lh - .5em);
1239
+ line-height:var(--tds-checkbox-group-description-line-height);
1504
1240
  }
1505
- .tds-combo-box-section-header{
1506
- padding-block:var(--t-spacing-1);
1507
- padding-inline:var(--t-spacing-1);
1508
- font-size:var(--t-font-size-sm);
1509
- font-weight:var(--t-font-weight-semibold);
1510
- color:var(--t-text-color-secondary);
1241
+
1242
+ .tds-checkbox-group--sm{
1243
+ --tds-checkbox-group-line-height:1.35;
1244
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1245
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1246
+ --tds-checkbox-group-description-line-height:1.3;
1511
1247
  }
1512
1248
 
1513
1249
  .tds-dropdown-popover{
@@ -1801,111 +1537,89 @@ a.tds-dropdown-item:is(:hover, :active){
1801
1537
  margin-inline-end:auto;
1802
1538
  }
1803
1539
 
1804
- .tds-input:has(textarea){
1805
- --tds-input-padding-block:6px;
1806
- --tds-input-resizer-size:var(--t-element-size-sm);
1807
- --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");
1808
- }
1540
+ .tds-radio-group{
1541
+ --tds-radio-group-font-size:var(--t-font-size-md);
1542
+ --tds-radio-group-line-height:1.4;
1543
+ --tds-radio-group-gap:var(--t-spacing-1);
1809
1544
 
1810
- @supports (x: attr(x type(*))){
1545
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1546
+ --tds-radio-group-description-line-height:1.35;
1547
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1548
+ --tds-radio-group-description-invalid-icon-display:none;
1549
+ display:flex;
1550
+ flex-direction:column;
1551
+ gap:0;
1552
+ padding:0;
1553
+ margin:0;
1811
1554
 
1812
- .tds-input textarea{
1813
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1555
+ font-size:var(--tds-radio-group-font-size);
1556
+ line-height:var(--tds-radio-group-line-height);
1557
+ border:0;
1814
1558
  }
1815
- }
1816
1559
 
1817
- .tds-input.tds-textarea--resize-vertical textarea{
1818
- resize:vertical;
1819
- }
1560
+ .tds-radio-group legend{
1561
+ float:left;
1562
+ padding:0;
1563
+ margin:0;
1564
+ }
1820
1565
 
1821
- .tds-input.tds-textarea--resize-none textarea{
1822
- resize:none;
1823
- }
1566
+ .tds-radio-group[aria-invalid="true"]{
1567
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1568
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1569
+ }
1824
1570
 
1825
- .tds-input.tds-textarea--resize-auto textarea{
1826
- resize:vertical;
1571
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1572
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1827
1573
  }
1828
1574
 
1829
- @supports (field-sizing: content){
1830
- .tds-input.tds-textarea--resize-auto textarea{
1831
- field-sizing:content;
1832
- resize:none;
1575
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1576
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1577
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1833
1578
  }
1834
- }
1835
-
1836
- .tds-input textarea{
1837
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1838
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1839
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1840
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1841
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1842
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1843
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1844
- --tds-input-scrollbar-thumb-border-radius:999px;
1845
- --tds-input-scrollbar-thumb-border-width:3px;
1846
- --tds-input-scrollbar-track-margin-block:.125rem;
1847
- scrollbar-color:initial;
1848
- transition-timing-function:var(--t-ease-in-out);
1849
- transition-duration:var(--t-duration-200);
1850
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1851
- }
1852
-
1853
- @media (pointer: fine){
1854
- :is(.tds-input textarea)::-webkit-scrollbar{
1855
- width:12px;
1856
- height:12px;
1857
- cursor:default;
1858
- }
1859
-
1860
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1861
- cursor:default;
1862
- background:var(--tds-input-scrollbar-thumb-color);
1863
- background-clip:content-box;
1864
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1865
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1866
- }
1867
-
1868
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1869
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1870
- }
1871
-
1872
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1873
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1874
- }
1875
-
1876
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1877
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1878
- }
1879
1579
 
1880
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1881
- background:var(--tds-input-scrollbar-surface-color);
1882
- }
1580
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1581
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1582
+ }
1883
1583
 
1884
- :is(.tds-input textarea)::-webkit-resizer{
1885
- background:var(--tds-input-resizer-icon) no-repeat;
1886
- background-position:right bottom;
1887
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1584
+ .tds-radio-group:has(input:required) legend::after{
1585
+ margin-left:.25ch;
1586
+ color:var(--t-text-color-status-error);
1587
+ content:"*";
1888
1588
  }
1889
1589
 
1890
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1891
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1892
- cursor:default;
1893
- }
1590
+ .tds-radio-group-fields{
1591
+ display:flex;
1592
+ flex-direction:column;
1593
+ gap:var(--tds-radio-group-gap);
1594
+ align-items:flex-start;
1595
+ margin-top:var(--t-spacing-1);
1596
+ }
1894
1597
 
1895
- @supports (-moz-appearance: none){
1896
- :is(.tds-input textarea){
1897
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1898
- scrollbar-width:thin;
1899
- }
1598
+ .tds-radio-group-description{
1599
+ display:flex;
1600
+ gap:var(--t-spacing-half);
1601
+ align-items:flex-start;
1602
+ margin:var(--t-spacing-fourth) 0 0;
1603
+ font-size:var(--tds-radio-group-description-font-size);
1604
+ line-height:var(--tds-radio-group-description-line-height);
1605
+ color:var(--tds-radio-group-description-color);
1606
+ cursor:text;
1607
+ }
1900
1608
 
1901
- @media (hover){
1902
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1903
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1904
- }
1905
- }
1906
- }
1609
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1610
+ display:var(--tds-radio-group-description-invalid-icon-display);
1611
+ flex-shrink:0;
1612
+ margin-top:calc(.5lh - .5em);
1613
+ line-height:var(--tds-radio-group-description-line-height);
1907
1614
  }
1908
1615
 
1616
+ .tds-radio-group--sm{
1617
+ --tds-radio-group-line-height:1.35;
1618
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1619
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1620
+ --tds-radio-group-description-line-height:1.3;
1621
+ }
1622
+
1909
1623
  .tds-radio{
1910
1624
  --tds-radio-font-size:var(--t-font-size-md);
1911
1625
  --tds-radio-cursor:pointer;
@@ -2039,119 +1753,13 @@ a.tds-dropdown-item:is(:hover, :active){
2039
1753
  --tds-radio-description-line-height:1.3;
2040
1754
  }
2041
1755
 
1756
+ .tds-toggle-switch{
1757
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1758
+ --tds-toggle-switch-cursor:pointer;
1759
+ --tds-toggle-switch-display:inline-grid;
1760
+ --tds-toggle-switch-line-height:1.4;
2042
1761
 
2043
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
2044
- -webkit-appearance:none;
2045
- appearance:none;
2046
- }
2047
-
2048
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2049
- inline-size:1em;
2050
- block-size:2em;
2051
- }
2052
- @supports (field-sizing: content){
2053
- .tds-input--auto-width{
2054
- inline-size:-moz-fit-content;
2055
- inline-size:fit-content;
2056
- min-inline-size:min(100%, 122px);
2057
- }
2058
-
2059
- .tds-input--auto-width input{
2060
- field-sizing:content;
2061
- inline-size:auto;
2062
- }
2063
- }
2064
-
2065
- .tds-radio-group{
2066
- --tds-radio-group-font-size:var(--t-font-size-md);
2067
- --tds-radio-group-line-height:1.4;
2068
- --tds-radio-group-gap:var(--t-spacing-1);
2069
-
2070
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2071
- --tds-radio-group-description-line-height:1.35;
2072
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2073
- --tds-radio-group-description-invalid-icon-display:none;
2074
- display:flex;
2075
- flex-direction:column;
2076
- gap:0;
2077
- padding:0;
2078
- margin:0;
2079
-
2080
- font-size:var(--tds-radio-group-font-size);
2081
- line-height:var(--tds-radio-group-line-height);
2082
- border:0;
2083
- }
2084
-
2085
- .tds-radio-group legend{
2086
- float:left;
2087
- padding:0;
2088
- margin:0;
2089
- }
2090
-
2091
- .tds-radio-group[aria-invalid="true"]{
2092
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2093
- --tds-radio-group-description-invalid-icon-display:inline-block;
2094
- }
2095
-
2096
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2097
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2098
- }
2099
-
2100
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2101
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2102
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2103
- }
2104
-
2105
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2106
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2107
- }
2108
-
2109
- .tds-radio-group:has(input:required) legend::after{
2110
- margin-left:.25ch;
2111
- color:var(--t-text-color-status-error);
2112
- content:"*";
2113
- }
2114
-
2115
- .tds-radio-group-fields{
2116
- display:flex;
2117
- flex-direction:column;
2118
- gap:var(--tds-radio-group-gap);
2119
- align-items:flex-start;
2120
- margin-top:var(--t-spacing-1);
2121
- }
2122
-
2123
- .tds-radio-group-description{
2124
- display:flex;
2125
- gap:var(--t-spacing-half);
2126
- align-items:flex-start;
2127
- margin:var(--t-spacing-fourth) 0 0;
2128
- font-size:var(--tds-radio-group-description-font-size);
2129
- line-height:var(--tds-radio-group-description-line-height);
2130
- color:var(--tds-radio-group-description-color);
2131
- cursor:text;
2132
- }
2133
-
2134
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2135
- display:var(--tds-radio-group-description-invalid-icon-display);
2136
- flex-shrink:0;
2137
- margin-top:calc(.5lh - .5em);
2138
- line-height:var(--tds-radio-group-description-line-height);
2139
- }
2140
-
2141
- .tds-radio-group--sm{
2142
- --tds-radio-group-line-height:1.35;
2143
- --tds-radio-group-font-size:var(--t-font-size-sm);
2144
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2145
- --tds-radio-group-description-line-height:1.3;
2146
- }
2147
-
2148
- .tds-toggle-switch{
2149
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2150
- --tds-toggle-switch-cursor:pointer;
2151
- --tds-toggle-switch-display:inline-grid;
2152
- --tds-toggle-switch-line-height:1.4;
2153
-
2154
- --tds-toggle-switch-label-color:var(--t-form-color);
1762
+ --tds-toggle-switch-label-color:var(--t-form-color);
2155
1763
 
2156
1764
  --tds-toggle-switch-track-width:var(--t-container-size-md);
2157
1765
  --tds-toggle-switch-track-outline:none;
@@ -2285,447 +1893,652 @@ a.tds-dropdown-item:is(:hover, :active){
2285
1893
  --tds-toggle-switch-display:inline-flex;
2286
1894
  }
2287
1895
 
2288
- .tds-input{
2289
- --tds-input-border-color:var(--t-form-border-color);
2290
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2291
- --tds-input-background-color:var(--t-form-background-color);
2292
- --tds-input-color:var(--t-form-color);
2293
- --tds-input-font-size:var(--t-font-size-md);
2294
- --tds-input-description-color:var(--t-text-color-secondary);
2295
- --tds-input-description-invalid-icon-display:none;
2296
- --tds-input-min-height:var(--t-container-size-md);
2297
- --tds-input-padding-inline:var(--t-spacing-1);
2298
-
2299
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2300
-
2301
- display:flex;
2302
- flex-direction:column;
2303
- gap:var(--t-spacing-half);
1896
+ .tds-input:has(textarea){
1897
+ --tds-input-padding-block:6px;
1898
+ --tds-input-resizer-size:var(--t-element-size-sm);
1899
+ --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");
2304
1900
  }
2305
1901
 
2306
- .tds-input label{
2307
- font-size:var(--t-font-size-md);
2308
- font-weight:var(--t-font-weight-normal);
2309
- color:var(--t-text-color);
2310
- }
1902
+ @supports (x: attr(x type(*))){
2311
1903
 
2312
- .tds-input :is(input,textarea){
2313
- inline-size:100%;
2314
- block-size:auto;
2315
- min-block-size:var(--tds-input-min-height);
2316
- padding-block:var(--tds-input-padding-block);
2317
- padding-inline:var(--tds-input-padding-inline);
2318
- font-family:inherit;
2319
- font-size:var(--tds-input-font-size);
2320
- color:var(--tds-input-color);
2321
- -webkit-appearance:none;
2322
- -moz-appearance:none;
2323
- appearance:none;
2324
- outline:var(--t-focus-ring-width) solid transparent;
2325
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2326
- outline-offset:0;
2327
- background-color:var(--tds-input-background-color);
2328
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2329
- border-radius:var(--t-form-border-radius);
2330
- transition-timing-function:var(--t-ease-in-out);
2331
- transition-duration:var(--t-duration-200);
2332
- transition-property:var(--tds-input-transition-property);
1904
+ .tds-input textarea{
1905
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1906
+ }
2333
1907
  }
2334
1908
 
2335
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2336
- border-color:var(--tds-input-border-color-hover);
2337
- }
2338
-
2339
- :is(.tds-input :is(input,textarea)):focus{
2340
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1909
+ .tds-input.tds-textarea--resize-vertical textarea{
1910
+ resize:vertical;
2341
1911
  }
2342
1912
 
2343
- :is(.tds-input :is(input,textarea)):focus-visible{
2344
- outline-color:var(--t-focus-ring-color);
2345
- outline-offset:var(--t-focus-ring-offset);
2346
- border-color:var(--t-form-border-color-focus);
1913
+ .tds-input.tds-textarea--resize-none textarea{
1914
+ resize:none;
2347
1915
  }
2348
1916
 
2349
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2350
- color:var(--t-form-placeholder-color);
2351
- -moz-user-select:none;
2352
- user-select:none;
1917
+ .tds-input.tds-textarea--resize-auto textarea{
1918
+ resize:vertical;
2353
1919
  }
2354
1920
 
2355
- :is(.tds-input :is(input,textarea))::placeholder{
2356
- color:var(--t-form-placeholder-color);
2357
- -webkit-user-select:none;
2358
- -moz-user-select:none;
2359
- user-select:none;
1921
+ @supports (field-sizing: content){
1922
+ .tds-input.tds-textarea--resize-auto textarea{
1923
+ field-sizing:content;
1924
+ resize:none;
1925
+ }
2360
1926
  }
2361
1927
 
2362
- @media (prefers-reduced-motion: reduce){
1928
+ .tds-input textarea{
1929
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1930
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1931
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1932
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1933
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1934
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1935
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1936
+ --tds-input-scrollbar-thumb-border-radius:999px;
1937
+ --tds-input-scrollbar-thumb-border-width:3px;
1938
+ --tds-input-scrollbar-track-margin-block:.125rem;
1939
+ scrollbar-color:initial;
1940
+ transition-timing-function:var(--t-ease-in-out);
1941
+ transition-duration:var(--t-duration-200);
1942
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1943
+ }
2363
1944
 
2364
- .tds-input :is(input,textarea){
2365
- --tds-input-transition-property:none;
2366
- }
1945
+ @media (pointer: fine){
1946
+ :is(.tds-input textarea)::-webkit-scrollbar{
1947
+ width:12px;
1948
+ height:12px;
1949
+ cursor:default;
2367
1950
  }
2368
1951
 
2369
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2370
- --tds-input-background-color:var(--t-form-background-color-error);
2371
- --tds-input-border-color:var(--t-form-border-color-error);
2372
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2373
- --tds-input-description-color:var(--t-text-color-status-error);
2374
- --tds-input-description-invalid-icon-display:inline-block;
2375
- }
1952
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1953
+ cursor:default;
1954
+ background:var(--tds-input-scrollbar-thumb-color);
1955
+ background-clip:content-box;
1956
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1957
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1958
+ }
2376
1959
 
2377
- .tds-input:has(:is(input,textarea):required) label::after{
2378
- margin-left:.25ch;
2379
- color:var(--t-text-color-status-error);
2380
- content:"*";
1960
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1961
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2381
1962
  }
2382
1963
 
2383
- .tds-input:where(:has(:is(input,textarea):disabled)){
2384
- --tds-input-border-color:var(--t-form-border-color-disabled);
2385
- --tds-input-background-color:var(--t-form-background-color-disabled);
2386
- --tds-input-color:var(--t-form-color-disabled);
2387
- }
1964
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1965
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1966
+ }
2388
1967
 
2389
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2390
- cursor:not-allowed;
1968
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1969
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2391
1970
  }
2392
1971
 
2393
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2394
- --tds-input-border-color:var(--t-form-border-color-readonly);
2395
- --tds-input-background-color:var(--t-form-background-color-readonly);
2396
- }
1972
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1973
+ background:var(--tds-input-scrollbar-surface-color);
1974
+ }
2397
1975
 
2398
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2399
- border-color:var(--tds-input-border-color-hover);
1976
+ :is(.tds-input textarea)::-webkit-resizer{
1977
+ background:var(--tds-input-resizer-icon) no-repeat;
1978
+ background-position:right bottom;
1979
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2400
1980
  }
2401
1981
 
2402
- .tds-input.tds-input--lg{
2403
- --tds-input-min-height:var(--t-container-size-lg);
2404
- --tds-input-font-size:var(--t-font-size-lg);
2405
- }
1982
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1983
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1984
+ cursor:default;
1985
+ }
2406
1986
 
2407
- .tds-input-description{
2408
- display:flex;
2409
- gap:var(--t-spacing-half);
2410
- align-items:flex-start;
2411
- margin:0;
2412
- font-size:var(--t-font-size-sm);
2413
- line-height:1.35;
2414
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2415
- cursor:text;
2416
- }
1987
+ @supports (-moz-appearance: none){
1988
+ :is(.tds-input textarea){
1989
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1990
+ scrollbar-width:thin;
1991
+ }
2417
1992
 
2418
- .tds-input-description .tds-input-description-invalid-icon{
2419
- display:var(--tds-input-description-invalid-icon-display, none);
2420
- flex-shrink:0;
2421
- margin-block-start:calc(.5lh - .5em);
2422
- line-height:1.35;
1993
+ @media (hover){
1994
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1995
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1996
+ }
1997
+ }
1998
+ }
2423
1999
  }
2424
2000
 
2425
- .tds-loading-spinner{
2426
- position:absolute;
2427
- right:0;
2428
- left:0;
2429
- visibility:var(--tds-loading-spinner-visibility, hidden);
2430
- width:var(--tds-loading-spinner-size, 1.25em);
2431
- height:var(--tds-loading-spinner-size, 1.25em);
2432
- margin:auto;
2433
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2434
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2435
- border-radius:50%;
2436
- animation:spinner-rotate 500ms infinite linear;
2437
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2001
+ .tds-button-group{
2002
+ display:inline-flex;
2438
2003
  }
2004
+ .tds-button-group > .tds-btn{
2005
+ --tds-button-group-item-z-index:1;
2439
2006
 
2440
- @keyframes spinner-rotate{
2441
- to{
2442
- transform:rotate(360deg);
2007
+ position:relative;
2008
+ z-index:var(--tds-button-group-item-z-index);
2009
+ border-radius:0;
2443
2010
  }
2444
- }
2445
-
2446
- @media (prefers-reduced-motion: reduce){
2447
- [class*="--loading"] .tds-loading-spinner{
2448
- --tds-loading-spinner-animation-play-state:paused;
2011
+ :is(.tds-button-group > .tds-btn):not(:first-child){
2012
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
2013
+ }
2014
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
2015
+ position:absolute;
2016
+ inset-block:calc(var(--tds-btn-border-width) * -1);
2017
+ width:var(--tds-btn-border-width);
2018
+ pointer-events:none;
2019
+ content:"";
2020
+ background-color:var(--t-border-color-white);
2021
+ }
2022
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:first-child)::before{
2023
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
2024
+ }
2025
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--pill):not(:last-child)::after{
2026
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
2027
+ }
2028
+ :is(.tds-button-group > .tds-btn):hover{
2029
+ --tds-button-group-item-z-index:2;
2030
+ }
2031
+ :is(.tds-button-group > .tds-btn):focus-visible{
2032
+ --tds-button-group-item-z-index:5;
2033
+ }
2034
+ .tds-button-group > .tds-btn:first-child{
2035
+ border-start-start-radius:var(--tds-btn-border-radius);
2036
+ border-end-start-radius:var(--tds-btn-border-radius);
2449
2037
  }
2450
- }
2451
-
2452
- @layer t-critical{
2453
- tds-page-header:not(.hydrated){
2454
- display:none;
2038
+ .tds-button-group > .tds-btn:last-child{
2039
+ border-start-end-radius:var(--tds-btn-border-radius);
2040
+ border-end-end-radius:var(--tds-btn-border-radius);
2455
2041
  }
2042
+
2043
+
2044
+ @media (prefers-reduced-motion: no-preference){
2045
+
2046
+ :root{
2047
+ interpolate-size:allow-keywords;
2456
2048
  }
2049
+ }
2457
2050
 
2458
- @layer t-component{
2459
- .tds-page-header{
2460
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2461
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2462
- --tds-page-header-color:var(--t-text-color);
2463
- --tds-page-header-bottom-border-color:transparent;
2464
- --tds-page-header-headline-color:var(--t-text-color-headline);
2465
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2466
- --tds-page-header-padding-x:var(--t-spacing-2);
2467
- --tds-page-header-padding-y:var(--t-spacing-2);
2468
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2469
- --tds-page-header-nav-gap:var(--t-spacing-1);
2470
- --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%);
2471
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2472
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2473
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2474
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2475
- --tds-page-header-nav-item-border-width:1px;
2051
+ @layer tds-component{
2052
+ tds-sidenav,
2053
+ .tds-sidenav{
2054
+ --tds-sidenav-indent:12px;
2055
+ --tds-sidenav-item-depth:0;
2476
2056
 
2477
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2478
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2057
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2479
2058
 
2480
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2481
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2482
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2059
+ --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;
2060
+ --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;
2061
+ --tds-sidenav-collapse-closed-opacity:0;
2062
+ --tds-sidenav-collapse-open-opacity:1;
2063
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
2064
+ --tds-sidenav-collapse-open-transform:translateY(0);
2483
2065
 
2484
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2485
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2066
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
2067
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2068
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2069
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2486
2070
 
2487
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2488
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2489
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2071
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2072
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2073
+ --tds-sidenav-item-nested-background-selected:transparent;
2490
2074
 
2491
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2492
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2493
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2494
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2495
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2496
- }
2075
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2076
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2077
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2497
2078
 
2498
- .tds-page-header--profile{
2499
- --tds-page-header-padding-y:20px;
2079
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2080
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2500
2081
  }
2501
2082
 
2502
- @supports (color: light-dark(#fff, #000)){
2503
- .tds-page-header{
2504
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2505
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2083
+ @media (prefers-reduced-motion: reduce){
2084
+ tds-sidenav,
2085
+ .tds-sidenav{
2086
+ --tds-sidenav-collapse-transition-enter:none;
2087
+ --tds-sidenav-collapse-transition-exit:none;
2088
+ --tds-sidenav-collapse-closed-transform:none;
2089
+ --tds-sidenav-collapse-open-transform:none;
2090
+ }
2506
2091
  }
2092
+
2093
+ .tds-sidenav--theme-gray{
2094
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2095
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2096
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2097
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2098
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2507
2099
  }
2100
+ }
2508
2101
 
2509
- @media (min-width: 600px){
2510
- .tds-page-header{
2511
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2512
- --tds-page-header-color:var(--t-text-color-secondary);
2513
- --tds-page-header-bottom-border-color:var(--t-border-color);
2514
- --tds-page-header-padding-x:var(--t-spacing-3);
2515
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2516
- --tds-page-header-nav-gap:var(--t-spacing-half);
2517
- --tds-page-header-nav-background:transparent;
2518
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2519
- --tds-page-header-nav-item-border-width:1px;
2520
- --tds-page-header-nav-item-color:var(--t-text-color);
2521
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2522
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2523
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2524
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2525
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2526
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2527
- }
2102
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2103
+ display:flex;
2104
+ }
2105
+
2106
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2107
+ flex-direction:column;
2108
+ gap:var(--t-spacing-half);
2109
+ width:100%;
2528
2110
  }
2111
+
2112
+ .tds-sidenav-section-list{
2113
+ width:100%;
2114
+ padding:0;
2115
+ margin:0;
2116
+ list-style:none;
2529
2117
  }
2530
2118
 
2531
- .tds-page-header{
2119
+ .tds-sidenav-section-header{
2532
2120
  display:flex;
2533
- flex-direction:column;
2534
- padding-top:var(--tds-page-header-padding-y);
2535
- color:var(--tds-page-header-color);
2536
- background:var(--tds-page-header-background-color);
2537
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2121
+ align-items:baseline;
2122
+ justify-content:space-between;
2123
+ padding-top:var(--t-spacing-2);
2538
2124
  }
2539
2125
 
2540
- .tds-page-header:not(.has-nav){
2541
- padding-bottom:var(--tds-page-header-padding-y);
2542
- }
2543
-
2544
- .tds-page-header.inactive{
2545
- background:var(--tds-page-header-background-color-inactive);
2126
+ .tds-sidenav-section-header h2{
2127
+ margin:0;
2128
+ font-size:var(--t-font-size-sm);
2129
+ font-weight:var(--t-font-weight-semibold);
2130
+ line-height:1.35;
2131
+ color:var(--t-text-color-secondary);
2132
+ text-transform:uppercase;
2546
2133
  }
2547
2134
 
2548
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2549
- width:100%;
2135
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2136
+ padding-top:0;
2550
2137
  }
2551
2138
 
2552
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2139
+ .tds-sidenav-section-header [slot="label-actions"]{
2553
2140
  display:flex;
2554
- flex-flow:row wrap;
2555
- gap:var(--t-spacing-half) var(--t-spacing-1);
2556
- align-items:flex-start;
2557
- justify-content:flex-start;
2558
- min-width:0;
2141
+ gap:var(--t-spacing-half);
2142
+ align-items:center;
2559
2143
  }
2560
2144
 
2561
- :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{
2562
- display:flex;
2563
- gap:var(--tds-page-header-nav-gap);
2564
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2565
- margin:0 0 -1px;
2566
- overflow:auto;
2567
- list-style:none;
2568
- background:var(--tds-page-header-nav-background);
2569
- }
2145
+ .tds-sidenav-section [slot="section-actions"]{
2146
+ display:flex;
2147
+ gap:12px;
2148
+ align-items:center;
2149
+ min-height:42px;
2150
+ padding:var(--t-spacing-1) 0;
2151
+ }
2570
2152
 
2571
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2572
- position:relative;
2573
- display:inline-flex;
2574
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2575
- font-size:var(--t-font-size-sm);
2576
- line-height:22px;
2577
- color:var(--tds-page-header-nav-item-color);
2153
+ .tds-sidenav-section-list,
2154
+ .tds-sidenav-item{
2155
+ width:100%;
2156
+ padding:0;
2157
+ margin:0;
2158
+ }
2159
+
2160
+ .tds-sidenav-item :is(a,button){
2161
+ position:relative;
2162
+ display:flex;
2163
+ gap:12px;
2164
+ align-items:center;
2165
+ width:100%;
2166
+ padding:12px;
2167
+ overflow:hidden;
2168
+ font-size:var(--t-font-size-sm);
2169
+ line-height:18px;
2170
+ color:var(--t-text-color-headline);
2171
+ white-space:nowrap;
2172
+ text-decoration:none;
2173
+ -webkit-appearance:none;
2174
+ -moz-appearance:none;
2175
+ appearance:none;
2176
+ cursor:pointer;
2177
+ background-color:var(--tds-sidenav-item-background, transparent);
2178
+ border:0;
2179
+ border-radius:var(--t-border-radius);
2180
+ transition:var(--tds-sidenav-item-transition);
2181
+ }
2182
+
2183
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2184
+ display:block;
2185
+ flex:1;
2186
+ overflow:hidden;
2187
+ text-overflow:ellipsis;
2188
+ text-align:left;
2578
2189
  white-space:nowrap;
2190
+ }
2191
+
2192
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2193
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2194
+ color:var(--t-text-color-headline);
2579
2195
  text-decoration:none;
2580
- -webkit-appearance:none;
2581
- -moz-appearance:none;
2582
- appearance:none;
2583
- cursor:pointer;
2584
- outline-offset:-2px;
2585
- background-color:var(--tds-page-header-nav-item-background-color);
2586
- background-clip:padding-box;
2587
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2588
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2589
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2590
2196
  }
2591
2197
 
2592
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2593
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2594
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2595
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2596
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2198
+ :is(.tds-sidenav-item :is(a,button)):active{
2199
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2200
+ }
2201
+
2202
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2203
+ overflow:hidden;
2204
+ color:var(--tds-sidenav-item-icon-color);
2205
+ }
2206
+
2207
+ :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{
2208
+ display:block;
2209
+ width:var(--tds-sidenav-item-icon-size);
2210
+ height:var(--tds-sidenav-item-icon-size);
2597
2211
  }
2598
2212
 
2599
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2600
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2601
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2602
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2603
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2604
- }
2213
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2214
+ --tds-sidenav-indent:19px;
2215
+ }
2605
2216
 
2606
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2607
- background-color:var(--tds-page-header-nav-item-background-color-active);
2608
- border-color:var(--tds-page-header-nav-item-border-color-active);
2609
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2610
- }
2217
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2218
+ visibility:visible;
2219
+ block-size:auto;
2220
+ opacity:1;
2221
+ }
2611
2222
 
2612
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2613
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2614
- color:var(--tds-page-header-nav-item-color-disabled);
2615
- cursor:not-allowed;
2616
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2617
- opacity:1;
2618
- }
2223
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2224
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2225
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2619
2226
 
2620
- @media (min-width: 600px){
2621
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2622
- position:absolute;
2623
- inset:auto -1px -1px;
2624
- height:1px;
2625
- pointer-events:none;
2626
- content:"";
2627
- background-color:var(--tds-page-header-bottom-border-color);
2628
- }
2629
- }
2227
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2228
+ font-weight:var(--t-font-weight-semibold);
2229
+ }
2630
2230
 
2631
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2632
- position:relative;
2231
+ .tds-sidenav-item:has(.tds-sidenav-section){
2232
+ display:flex;
2233
+ flex-direction:column;
2234
+ gap:var(--t-spacing-half);
2235
+ }
2236
+
2237
+ .tds-sidenav-item .tds-sidenav-section-list{
2238
+ --tds-sidenav-item-depth:1;
2239
+ gap:0;
2240
+ }
2241
+
2242
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2243
+ visibility:hidden;
2244
+ block-size:0;
2245
+ overflow-y:clip;
2246
+ opacity:0;
2247
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2633
2248
  }
2634
2249
 
2635
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2636
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2637
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2250
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2251
+ --tds-sidenav-item-depth:2;
2252
+ }
2253
+
2254
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2255
+ min-height:var(--t-element-size-2xl);
2256
+ padding-block:9px;
2257
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2258
+ line-height:1;
2259
+ background-color:transparent;
2260
+ }
2261
+
2262
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2263
+ position:absolute;
2264
+ top:0;
2265
+ bottom:0;
2266
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2267
+ width:2px;
2268
+ content:"";
2269
+ background-color:var(--tds-sidenav-item-nested-border-color);
2270
+ transition:var(--tds-sidenav-item-transition);
2638
2271
  }
2639
2272
 
2640
- :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{
2273
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2641
2274
  position:absolute;
2642
- top:-5px;
2643
- right:-2px;
2644
- width:10px;
2645
- height:10px;
2275
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2276
+ z-index:-1;
2277
+ height:100%;
2646
2278
  content:"";
2647
- background:var(--tds-page-header-nav-item-indicator-color);
2648
- border-radius:50%;
2279
+ background-color:var(--tds-sidenav-item-nested-background);
2280
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2281
+ transition:var(--tds-sidenav-item-transition);
2649
2282
  }
2650
2283
 
2651
- @media (prefers-reduced-motion: no-preference){
2652
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2653
- animation:indicator-pulse 1.25s ease infinite;
2654
- }
2284
+ :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)){
2285
+ display:block;
2286
+ text-align:left;
2287
+ white-space:normal;
2655
2288
  }
2656
2289
 
2657
- .tds-page-header__title-bar{
2290
+ :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{
2291
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2292
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2293
+ }
2294
+
2295
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2296
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2297
+ }
2298
+
2299
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2300
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2301
+ font-weight:var(--t-font-weight-medium);
2302
+ }
2303
+
2304
+ .tds-sidenav-responsive-header{
2658
2305
  display:flex;
2659
- flex-direction:column;
2660
- gap:var(--t-spacing-2) var(--t-spacing-1);
2661
- align-items:flex-start;
2662
- justify-content:space-between;
2663
- padding:0 var(--tds-page-header-padding-x);
2306
+ gap:var(--t-spacing-2);
2307
+ align-items:center;
2308
+ width:100%;
2664
2309
  }
2665
2310
 
2666
- .tds-page-header--profile > .tds-page-header__title-bar{
2667
- align-items:center;
2311
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2312
+ order:0;
2668
2313
  }
2669
2314
 
2670
- .tds-page-header__primary{
2671
- width:100%;
2315
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2316
+ flex:1;
2317
+ order:1;
2318
+ margin:0;
2319
+ font-size:var(--t-font-size-lg);
2320
+ font-weight:var(--t-font-weight-medium);
2321
+ color:var(--t-text-color-headline);
2322
+ }
2323
+
2324
+ @media (max-width: 719px){
2325
+ .tds-sidenav-collapse{
2326
+ z-index:10001;
2327
+ display:none;
2328
+ max-width:min(448px, calc(100vw - 48px));
2329
+ padding:0;
2330
+ margin:12px 0;
2331
+ position-area:bottom span-right;
2332
+ overflow:hidden;
2333
+ outline:0;
2334
+ background:var(--t-surface-color-card);
2335
+ border:0;
2336
+ border-radius:6px;
2337
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2338
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2339
+ transform:var(--tds-sidenav-collapse-open-transform);
2340
+ transition:var(--tds-sidenav-collapse-transition-enter);
2341
+ will-change:transform;
2342
+ }
2343
+
2344
+ .tds-sidenav-scroll-container{
2345
+ --webkit-overflow-scrolling:touch;
2346
+ display:block;
2347
+ width:100%;
2348
+ height:-moz-fit-content;
2349
+ height:fit-content;
2350
+ padding:var(--t-spacing-2);
2351
+ overflow-y:auto;
2352
+ }
2353
+
2354
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2355
+ display:none;
2356
+ }
2357
+ @supports selector(:popover-open){
2358
+ .tds-sidenav-collapse:popover-open{
2359
+ display:flex;
2360
+ }
2361
+
2362
+ .tds-sidenav-collapse:not(:popover-open){
2363
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2364
+ transition:var(--tds-sidenav-collapse-transition-exit);
2365
+ }
2366
+
2367
+ @starting-style{
2368
+ .tds-sidenav-collapse:popover-open{
2369
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2370
+ transform:var(--tds-sidenav-collapse-closed-transform);
2371
+ }
2372
+ }
2373
+ }
2374
+ @supports not selector(:popover-open){
2375
+ .tds-sidenav-collapse.\:popover-open{
2376
+ display:flex;
2377
+ }
2378
+
2379
+ .tds-sidenav-collapse:not(.\:popover-open){
2380
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2381
+ transition:var(--tds-sidenav-collapse-transition-exit);
2382
+ }
2383
+ }
2672
2384
  }
2673
2385
 
2674
- .tds-page-header__primary h1{
2675
- margin:0;
2676
- font-size:var(--tds-page-header-headline-font-size);
2386
+ @media (min-width: 720px){
2387
+ .tds-sidenav-responsive-header{
2388
+ display:none;
2389
+ }
2390
+ }
2391
+
2392
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2393
+ display:none;
2394
+ }
2395
+
2396
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2397
+ display:block;
2398
+ }
2399
+
2400
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2401
+ display:flex;
2402
+ flex-direction:column;
2403
+ }
2404
+
2405
+ .tds-input{
2406
+ --tds-input-border-color:var(--t-form-border-color);
2407
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
2408
+ --tds-input-background-color:var(--t-form-background-color);
2409
+ --tds-input-color:var(--t-form-color);
2410
+ --tds-input-font-size:var(--t-font-size-md);
2411
+ --tds-input-description-color:var(--t-text-color-secondary);
2412
+ --tds-input-description-invalid-icon-display:none;
2413
+ --tds-input-min-height:var(--t-container-size-md);
2414
+ --tds-input-padding-inline:var(--t-spacing-1);
2415
+
2416
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2417
+
2418
+ display:flex;
2419
+ flex-direction:column;
2420
+ gap:var(--t-spacing-half);
2421
+ }
2422
+
2423
+ .tds-input label{
2424
+ font-size:var(--t-font-size-md);
2677
2425
  font-weight:var(--t-font-weight-normal);
2678
- line-height:32px;
2679
- color:var(--tds-page-header-headline-color);
2680
- overflow-wrap:break-word;
2426
+ color:var(--t-text-color);
2681
2427
  }
2682
2428
 
2683
- @media (min-width: 960px){
2684
- .tds-page-header__primary{
2685
- flex:1 1 max-content;
2686
- width:auto;
2687
- min-width:0;
2688
- max-width:100%;
2429
+ .tds-input :is(input,textarea){
2430
+ inline-size:100%;
2431
+ block-size:auto;
2432
+ min-block-size:var(--tds-input-min-height);
2433
+ padding-block:var(--tds-input-padding-block);
2434
+ padding-inline:var(--tds-input-padding-inline);
2435
+ font-family:inherit;
2436
+ font-size:var(--tds-input-font-size);
2437
+ color:var(--tds-input-color);
2438
+ -webkit-appearance:none;
2439
+ -moz-appearance:none;
2440
+ appearance:none;
2441
+ outline:var(--t-focus-ring-width) solid transparent;
2442
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2443
+ outline-offset:0;
2444
+ background-color:var(--tds-input-background-color);
2445
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2446
+ border-radius:var(--t-form-border-radius);
2447
+ transition-timing-function:var(--t-ease-in-out);
2448
+ transition-duration:var(--t-duration-200);
2449
+ transition-property:var(--tds-input-transition-property);
2689
2450
  }
2690
2451
 
2691
- .tds-page-header__title-bar,
2692
- .tds-page-header--profile .tds-page-header__title-bar{
2693
- flex-flow:row nowrap;
2694
- row-gap:12px;
2695
- align-items:flex-start;
2452
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2453
+ border-color:var(--tds-input-border-color-hover);
2454
+ }
2455
+
2456
+ :is(.tds-input :is(input,textarea)):focus{
2457
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2458
+ }
2459
+
2460
+ :is(.tds-input :is(input,textarea)):focus-visible{
2461
+ outline-color:var(--t-focus-ring-color);
2462
+ outline-offset:var(--t-focus-ring-offset);
2463
+ border-color:var(--t-form-border-color-focus);
2464
+ }
2465
+
2466
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
2467
+ color:var(--t-form-placeholder-color);
2468
+ -moz-user-select:none;
2469
+ user-select:none;
2470
+ }
2471
+
2472
+ :is(.tds-input :is(input,textarea))::placeholder{
2473
+ color:var(--t-form-placeholder-color);
2474
+ -webkit-user-select:none;
2475
+ -moz-user-select:none;
2476
+ user-select:none;
2477
+ }
2478
+
2479
+ @media (prefers-reduced-motion: reduce){
2480
+
2481
+ .tds-input :is(input,textarea){
2482
+ --tds-input-transition-property:none;
2696
2483
  }
2697
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2698
- width:auto;
2699
2484
  }
2700
2485
 
2701
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2702
- justify-content:flex-end;
2486
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2487
+ --tds-input-background-color:var(--t-form-background-color-error);
2488
+ --tds-input-border-color:var(--t-form-border-color-error);
2489
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2490
+ --tds-input-description-color:var(--t-text-color-status-error);
2491
+ --tds-input-description-invalid-icon-display:inline-block;
2492
+ }
2493
+
2494
+ .tds-input:has(:is(input,textarea):required) label::after{
2495
+ margin-left:.25ch;
2496
+ color:var(--t-text-color-status-error);
2497
+ content:"*";
2703
2498
  }
2704
- }
2705
2499
 
2706
- .tds-page-header-phone,
2707
- .tds-page-header-email{
2708
- color:var(--tds-page-header-color);
2709
- white-space:nowrap;
2710
- }
2711
- .tds-page-header-email{
2712
- max-width:100%;
2713
- overflow:hidden;
2714
- text-overflow:ellipsis;
2715
- }
2500
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2501
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2502
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2503
+ --tds-input-color:var(--t-form-color-disabled);
2504
+ }
2716
2505
 
2717
- @keyframes indicator-pulse{
2718
- 0%{
2719
- opacity:.3;
2720
- transform:scale(.9);
2506
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2507
+ cursor:not-allowed;
2508
+ }
2509
+
2510
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2511
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2512
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2721
2513
  }
2722
2514
 
2723
- 100%{
2724
- opacity:0;
2725
- transform:scale(1.75);
2515
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2516
+ border-color:var(--tds-input-border-color-hover);
2517
+ }
2518
+
2519
+ .tds-input.tds-input--lg{
2520
+ --tds-input-min-height:var(--t-container-size-lg);
2521
+ --tds-input-font-size:var(--t-font-size-lg);
2726
2522
  }
2523
+
2524
+ .tds-input-description{
2525
+ display:flex;
2526
+ gap:var(--t-spacing-half);
2527
+ align-items:flex-start;
2528
+ margin:0;
2529
+ font-size:var(--t-font-size-sm);
2530
+ line-height:1.35;
2531
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2532
+ cursor:text;
2727
2533
  }
2728
2534
 
2535
+ .tds-input-description .tds-input-description-invalid-icon{
2536
+ display:var(--tds-input-description-invalid-icon-display, none);
2537
+ flex-shrink:0;
2538
+ margin-block-start:calc(.5lh - .5em);
2539
+ line-height:1.35;
2540
+ }
2541
+
2729
2542
  @layer t-critical, t-component;
2730
2543
 
2731
2544
  :root{
@@ -4229,213 +4042,84 @@ a.tds-dropdown-item:is(:hover, :active){
4229
4042
  [data-flex-grow-xl="0"]{ flex-grow:0; }
4230
4043
  [data-flex-grow-xl="1"]{ flex-grow:1; }
4231
4044
 
4232
- [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4233
- [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4234
-
4235
- [data-flex-gap-xl="0"]{ gap:0; }
4236
- [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4237
- [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4238
- [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4239
- [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4240
- [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4241
- [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4242
- [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4243
- [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4244
- [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4245
- [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4246
-
4247
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
4248
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4249
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4250
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4251
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4252
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4253
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4254
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4255
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4256
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4257
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4258
-
4259
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4260
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4261
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4262
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4263
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4264
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4265
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4266
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4267
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4268
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4269
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4270
-
4271
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4272
- [data-flex-basis-xl="0"]{ flex-basis:0; }
4273
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4274
-
4275
- [data-padding-xl="0"]{ padding:0; }
4276
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4277
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4278
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4279
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4280
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4281
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4282
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4283
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4284
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4285
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4286
-
4287
- [data-padding-block-xl="0"]{ padding-block:0; }
4288
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4289
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4290
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4291
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4292
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4293
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4294
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4295
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4296
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4297
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4298
-
4299
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4300
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4301
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4302
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4303
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4304
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4305
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4306
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4307
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4308
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4309
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4310
- }
4311
-
4312
- .tds-search-input-control{
4313
- --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4314
- --tds-search-input-outline-offset:0;
4315
- --tds-search-input-cursor:text;
4316
-
4317
- display:flex;
4318
- gap:var(--tds-field-padding-inline);
4319
- align-items:center;
4320
- inline-size:100%;
4321
- min-block-size:var(--tds-field-min-height);
4322
- padding-inline:var(--tds-field-padding-inline);
4323
- font-size:var(--tds-field-font-size);
4324
- color:var(--tds-field-color);
4325
- cursor:var(--tds-search-input-cursor);
4326
- outline:var(--t-focus-ring-width) solid transparent;
4327
- outline-color:var(--tds-search-input-outline-color);
4328
- outline-offset:var(--tds-search-input-outline-offset);
4329
- background-color:var(--tds-field-background-color);
4330
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
4331
- border-radius:var(--t-form-border-radius);
4332
- transition-timing-function:var(--t-ease-in-out);
4333
- transition-duration:var(--t-duration-200);
4334
- transition-property:background-color, border-color, outline-color, outline-offset;
4335
- }
4336
-
4337
- .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4338
- border-color:var(--tds-field-border-color-hover);
4339
- }
4340
-
4341
- .tds-search-input-control:has(input:focus){
4342
- --tds-search-input-outline-color:var(--t-focus-ring-color);
4343
- --tds-search-input-outline-offset:var(--t-focus-ring-offset);
4344
-
4345
- border-color:var(--t-form-border-color-focus);
4346
- }
4347
-
4348
- .tds-search-input-control input{
4349
- flex:1;
4350
- min-inline-size:0;
4351
- padding:0;
4352
- overflow:hidden;
4353
- text-overflow:ellipsis;
4354
- font-family:inherit;
4355
- font-size:inherit;
4356
- color:inherit;
4357
- white-space:nowrap;
4358
- -webkit-appearance:none;
4359
- -moz-appearance:none;
4360
- appearance:none;
4361
- outline:0;
4362
- background-color:transparent;
4363
- border:0;
4364
- }
4365
-
4366
- :is(.tds-search-input-control input)::-moz-placeholder{
4367
- color:var(--tds-field-placeholder-color);
4368
- -moz-user-select:none;
4369
- user-select:none;
4370
- }
4371
-
4372
- :is(.tds-search-input-control input)::placeholder{
4373
- color:var(--tds-field-placeholder-color);
4374
- -webkit-user-select:none;
4375
- -moz-user-select:none;
4376
- user-select:none;
4377
- }
4378
-
4379
- :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
4380
- -webkit-appearance:none;
4381
- appearance:none;
4382
- }
4383
-
4384
- .tds-search-input-control .tds-search-input-icon{
4385
- flex-shrink:0;
4386
- inline-size:1em;
4387
- color:var(--t-icon-color-dim);
4388
- }
4389
-
4390
- .tds-search-input-control .tds-search-input-clear-icon{
4391
- inline-size:calc(var(--tds-field-font-size) * .8);
4392
- block-size:calc(var(--tds-field-font-size) * .8);
4393
- }
4394
-
4395
- .tds-search-input-control .tds-btn{
4396
- --tds-btn-color:var(--t-icon-color-dim);
4397
- --tds-btn-padding-truncated-x:0;
4398
- --tds-search-input-clear-button-display:none;
4399
-
4400
- display:var(--tds-search-input-clear-button-display);
4401
- flex-shrink:0;
4402
- }
4403
-
4404
- .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4405
- --tds-field-background-color:var(--t-form-background-color-error);
4406
- --tds-field-border-color:var(--t-form-border-color-error);
4407
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4408
- }
4045
+ [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4046
+ [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4409
4047
 
4410
- .tds-search-input-control:has(:disabled){
4411
- --tds-field-border-color:var(--t-form-border-color-disabled);
4412
- --tds-field-background-color:var(--t-form-background-color-disabled);
4413
- --tds-field-color:var(--t-form-color-disabled);
4414
- --tds-search-input-cursor:not-allowed;
4415
- }
4048
+ [data-flex-gap-xl="0"]{ gap:0; }
4049
+ [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4050
+ [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4051
+ [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4052
+ [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4053
+ [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4054
+ [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4055
+ [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4056
+ [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4057
+ [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4058
+ [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4416
4059
 
4417
- .tds-search-input-control:has([readonly]){
4418
- --tds-field-border-color:var(--t-form-border-color-readonly);
4419
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4420
- --tds-field-background-color:var(--t-form-background-color-readonly);
4421
- --tds-field-color:var(--t-form-color-readonly);
4422
- }
4060
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
4061
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4062
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4063
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4064
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4065
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4066
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4067
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4068
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4069
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4070
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4423
4071
 
4424
- .tds-search-input-control:has([readonly]):has(input:focus){
4425
- border-color:var(--t-form-border-color-hover);
4426
- }
4072
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4073
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4074
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4075
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4076
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4077
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4078
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4079
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4080
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4081
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4082
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4427
4083
 
4428
- @media (prefers-reduced-motion: reduce){
4084
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4085
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
4086
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4429
4087
 
4430
- .tds-search-input-control{
4431
- transition-property:none;
4432
- }
4433
- }
4088
+ [data-padding-xl="0"]{ padding:0; }
4089
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4090
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4091
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4092
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4093
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4094
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4095
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4096
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4097
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4098
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4434
4099
 
4435
- .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
4436
- :has(:disabled, [readonly])
4437
- ) .tds-btn{
4438
- --tds-search-input-clear-button-display:flex;
4100
+ [data-padding-block-xl="0"]{ padding-block:0; }
4101
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4102
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4103
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4104
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4105
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4106
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4107
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4108
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4109
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4110
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4111
+
4112
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4113
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4114
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4115
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4116
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4117
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4118
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4119
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4120
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4121
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4122
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4439
4123
  }
4440
4124
 
4441
4125
  .tds-data-table-wrapper{
@@ -4650,63 +4334,192 @@ a.tds-dropdown-item:is(:hover, :active){
4650
4334
  .tds-data-table-loading-spinner{
4651
4335
  --tds-loading-spinner-animation-play-state:paused;
4652
4336
 
4653
- opacity:1;
4654
- animation:none;
4337
+ opacity:1;
4338
+ animation:none;
4339
+ }
4340
+ }
4341
+ .tds-data-table-column,
4342
+ .tds-data-table-cell{
4343
+ text-align:start;
4344
+ }
4345
+
4346
+ .tds-data-table-column--align-center,
4347
+ .tds-data-table-cell--align-center{
4348
+ text-align:center;
4349
+ }
4350
+
4351
+ .tds-data-table-column--align-end,
4352
+ .tds-data-table-cell--align-end{
4353
+ text-align:end;
4354
+ }
4355
+
4356
+ .tds-data-table-cell--numeric{
4357
+ font-variant-numeric:tabular-nums;
4358
+ }
4359
+ .tds-data-table-selectable-checkbox{
4360
+ position:relative;
4361
+ display:inline-block;
4362
+ width:1em;
4363
+ height:1em;
4364
+ vertical-align:middle;
4365
+ cursor:pointer;
4366
+ border:var(--t-form-border-width) solid var(--t-form-border-color);
4367
+ border-radius:var(--t-border-radius-sm);
4368
+ }
4369
+ .tds-data-table-selectable-checkbox::before{
4370
+ position:absolute;
4371
+ inset:0;
4372
+ display:flex;
4373
+ visibility:hidden;
4374
+ align-items:center;
4375
+ justify-content:center;
4376
+ content:"";
4377
+ opacity:0;
4378
+ }
4379
+ .tds-data-table-selectable-checkbox[data-focus-visible]{
4380
+ outline:var(--t-focus-ring-outline);
4381
+ outline-offset:var(--t-focus-ring-offset);
4382
+ }
4383
+ :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
4384
+ visibility:visible;
4385
+ opacity:1;
4386
+ }
4387
+ .tds-data-table-selectable-checkbox[data-selected]::before{
4388
+ content:"✅";
4389
+ }
4390
+ .tds-data-table-selectable-checkbox[data-indeterminate]::before{
4391
+ content:"➖";
4392
+ }
4393
+
4394
+ .tds-search-input-control{
4395
+ --tds-search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4396
+ --tds-search-input-outline-offset:0;
4397
+ --tds-search-input-cursor:text;
4398
+
4399
+ display:flex;
4400
+ gap:var(--tds-field-padding-inline);
4401
+ align-items:center;
4402
+ inline-size:100%;
4403
+ min-block-size:var(--tds-field-min-height);
4404
+ padding-inline:var(--tds-field-padding-inline);
4405
+ font-size:var(--tds-field-font-size);
4406
+ color:var(--tds-field-color);
4407
+ cursor:var(--tds-search-input-cursor);
4408
+ outline:var(--t-focus-ring-width) solid transparent;
4409
+ outline-color:var(--tds-search-input-outline-color);
4410
+ outline-offset:var(--tds-search-input-outline-offset);
4411
+ background-color:var(--tds-field-background-color);
4412
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
4413
+ border-radius:var(--t-form-border-radius);
4414
+ transition-timing-function:var(--t-ease-in-out);
4415
+ transition-duration:var(--t-duration-200);
4416
+ transition-property:background-color, border-color, outline-color, outline-offset;
4417
+ }
4418
+
4419
+ .tds-search-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4420
+ border-color:var(--tds-field-border-color-hover);
4421
+ }
4422
+
4423
+ .tds-search-input-control:has(input:focus){
4424
+ --tds-search-input-outline-color:var(--t-focus-ring-color);
4425
+ --tds-search-input-outline-offset:var(--t-focus-ring-offset);
4426
+
4427
+ border-color:var(--t-form-border-color-focus);
4428
+ }
4429
+
4430
+ .tds-search-input-control input{
4431
+ flex:1;
4432
+ min-inline-size:0;
4433
+ padding:0;
4434
+ overflow:hidden;
4435
+ text-overflow:ellipsis;
4436
+ font-family:inherit;
4437
+ font-size:inherit;
4438
+ color:inherit;
4439
+ white-space:nowrap;
4440
+ -webkit-appearance:none;
4441
+ -moz-appearance:none;
4442
+ appearance:none;
4443
+ outline:0;
4444
+ background-color:transparent;
4445
+ border:0;
4446
+ }
4447
+
4448
+ :is(.tds-search-input-control input)::-moz-placeholder{
4449
+ color:var(--tds-field-placeholder-color);
4450
+ -moz-user-select:none;
4451
+ user-select:none;
4452
+ }
4453
+
4454
+ :is(.tds-search-input-control input)::placeholder{
4455
+ color:var(--tds-field-placeholder-color);
4456
+ -webkit-user-select:none;
4457
+ -moz-user-select:none;
4458
+ user-select:none;
4459
+ }
4460
+
4461
+ :is(.tds-search-input-control input)::-webkit-search-decoration,:is(.tds-search-input-control input)::-webkit-search-cancel-button,:is(.tds-search-input-control input)::-webkit-search-results-button,:is(.tds-search-input-control input)::-webkit-search-results-decoration{
4462
+ -webkit-appearance:none;
4463
+ appearance:none;
4464
+ }
4465
+
4466
+ .tds-search-input-control .tds-search-input-icon{
4467
+ flex-shrink:0;
4468
+ inline-size:1em;
4469
+ color:var(--t-icon-color-dim);
4470
+ }
4471
+
4472
+ .tds-search-input-control .tds-search-input-clear-icon{
4473
+ inline-size:calc(var(--tds-field-font-size) * .8);
4474
+ block-size:calc(var(--tds-field-font-size) * .8);
4475
+ }
4476
+
4477
+ .tds-search-input-control .tds-btn{
4478
+ --tds-btn-color:var(--t-icon-color-dim);
4479
+ --tds-btn-padding-truncated-x:0;
4480
+ --tds-search-input-clear-button-display:none;
4481
+
4482
+ display:var(--tds-search-input-clear-button-display);
4483
+ flex-shrink:0;
4484
+ }
4485
+
4486
+ .tds-search-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4487
+ --tds-field-background-color:var(--t-form-background-color-error);
4488
+ --tds-field-border-color:var(--t-form-border-color-error);
4489
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4490
+ }
4491
+
4492
+ .tds-search-input-control:has(:disabled){
4493
+ --tds-field-border-color:var(--t-form-border-color-disabled);
4494
+ --tds-field-background-color:var(--t-form-background-color-disabled);
4495
+ --tds-field-color:var(--t-form-color-disabled);
4496
+ --tds-search-input-cursor:not-allowed;
4497
+ }
4498
+
4499
+ .tds-search-input-control:has([readonly]){
4500
+ --tds-field-border-color:var(--t-form-border-color-readonly);
4501
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4502
+ --tds-field-background-color:var(--t-form-background-color-readonly);
4503
+ --tds-field-color:var(--t-form-color-readonly);
4655
4504
  }
4656
- }
4657
- .tds-data-table-column,
4658
- .tds-data-table-cell{
4659
- text-align:start;
4660
- }
4661
4505
 
4662
- .tds-data-table-column--align-center,
4663
- .tds-data-table-cell--align-center{
4664
- text-align:center;
4665
- }
4506
+ .tds-search-input-control:has([readonly]):has(input:focus){
4507
+ border-color:var(--t-form-border-color-hover);
4508
+ }
4666
4509
 
4667
- .tds-data-table-column--align-end,
4668
- .tds-data-table-cell--align-end{
4669
- text-align:end;
4670
- }
4510
+ @media (prefers-reduced-motion: reduce){
4671
4511
 
4672
- .tds-data-table-cell--numeric{
4673
- font-variant-numeric:tabular-nums;
4674
- }
4675
- .tds-data-table-selectable-checkbox{
4676
- position:relative;
4677
- display:inline-block;
4678
- width:1em;
4679
- height:1em;
4680
- vertical-align:middle;
4681
- cursor:pointer;
4682
- border:var(--t-form-border-width) solid var(--t-form-border-color);
4683
- border-radius:var(--t-border-radius-sm);
4512
+ .tds-search-input-control{
4513
+ transition-property:none;
4684
4514
  }
4685
- .tds-data-table-selectable-checkbox::before{
4686
- position:absolute;
4687
- inset:0;
4688
- display:flex;
4689
- visibility:hidden;
4690
- align-items:center;
4691
- justify-content:center;
4692
- content:"";
4693
- opacity:0;
4694
- }
4695
- .tds-data-table-selectable-checkbox[data-focus-visible]{
4696
- outline:var(--t-focus-ring-outline);
4697
- outline-offset:var(--t-focus-ring-offset);
4698
- }
4699
- :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate])::before{
4700
- visibility:visible;
4701
- opacity:1;
4702
- }
4703
- .tds-data-table-selectable-checkbox[data-selected]::before{
4704
- content:"✅";
4705
- }
4706
- .tds-data-table-selectable-checkbox[data-indeterminate]::before{
4707
- content:"➖";
4708
4515
  }
4709
4516
 
4517
+ .tds-search-input-control--has-value:is(:hover, :has(input:focus)):not(
4518
+ :has(:disabled, [readonly])
4519
+ ) .tds-btn{
4520
+ --tds-search-input-clear-button-display:flex;
4521
+ }
4522
+
4710
4523
  .t-banner{
4711
4524
  --t-banner-font-size:var(--t-font-size-md);
4712
4525
  --t-banner-font-color:var(--t-text-color);
@@ -5525,6 +5338,193 @@ a.tds-dropdown-item:is(:hover, :active){
5525
5338
  color:var(--tds-field-color);
5526
5339
  }
5527
5340
 
5341
+ .tds-combo-box{
5342
+ --tds-combo-box-button-offset:4px;
5343
+ }
5344
+
5345
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
5346
+ transform:rotate(.5turn);
5347
+ }
5348
+
5349
+ .tds-combo-box--lg{
5350
+ --tds-combo-box-button-offset:5px;
5351
+ }
5352
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
5353
+ display:none;
5354
+ }
5355
+ .tds-combo-box-input{
5356
+ display:flex;
5357
+ flex:1;
5358
+ align-items:center;
5359
+ padding-block:var(--tds-field-padding-block);
5360
+ padding-inline:var(--tds-field-padding-inline);
5361
+ font-family:inherit;
5362
+ font-size:inherit;
5363
+ color:inherit;
5364
+ outline:0;
5365
+ background:transparent;
5366
+ border:0;
5367
+ }
5368
+ .tds-combo-box-input:has( + .tds-combo-box-button){
5369
+ padding-inline-end:0;
5370
+ }
5371
+ .tds-combo-box-input::-moz-placeholder{
5372
+ color:var(--tds-field-placeholder-color);
5373
+ -moz-user-select:none;
5374
+ user-select:none;
5375
+ }
5376
+ .tds-combo-box-input::placeholder{
5377
+ color:var(--tds-field-placeholder-color);
5378
+ -webkit-user-select:none;
5379
+ -moz-user-select:none;
5380
+ user-select:none;
5381
+ }
5382
+ .tds-combo-box-button{
5383
+ flex-shrink:0;
5384
+ align-self:center;
5385
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5386
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
5387
+ padding:0;
5388
+ margin-inline-end:var(--tds-combo-box-button-offset);
5389
+ }
5390
+ .tds-combo-box-button > svg{
5391
+ inline-size:var(--tds-field-font-size);
5392
+ block-size:var(--tds-field-font-size);
5393
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
5394
+ }
5395
+ .tds-combo-box-popover{
5396
+ width:var(--trigger-width);
5397
+ max-block-size:inherit;
5398
+ padding:var(--t-spacing-1);
5399
+ overflow:auto;
5400
+ scroll-behavior:smooth;
5401
+ overscroll-behavior:none;
5402
+ -webkit-user-select:none;
5403
+ -moz-user-select:none;
5404
+ user-select:none;
5405
+ outline:0;
5406
+ scrollbar-color:#0004 var(--t-surface-color-card);
5407
+ scrollbar-width:thin;
5408
+ background:var(--t-surface-color-card);
5409
+ background-clip:padding-box;
5410
+ border:1px solid var(--t-border-color);
5411
+ border-radius:var(--t-border-radius);
5412
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
5413
+ }
5414
+ .tds-combo-box-popover[data-entering]{
5415
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
5416
+ }
5417
+ .tds-combo-box-popover[data-exiting]{
5418
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
5419
+ }
5420
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5421
+ will-change:opacity, transform;
5422
+ }
5423
+
5424
+ @keyframes tds-combo-box-popover{
5425
+ from{
5426
+ opacity:0;
5427
+ transform:translateY(-8px);
5428
+ }
5429
+ }
5430
+
5431
+ @media (prefers-reduced-motion: reduce){
5432
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
5433
+ animation:none;
5434
+ }
5435
+
5436
+ .tds-combo-box-button > svg{
5437
+ transition:none;
5438
+ }
5439
+ }
5440
+ .tds-combo-box-list{
5441
+ padding:0;
5442
+ margin:0;
5443
+ }
5444
+ .tds-combo-box-list-item{
5445
+ display:block;
5446
+ padding-block:var(--t-spacing-1);
5447
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
5448
+ overflow:hidden;
5449
+ text-overflow:ellipsis;
5450
+ font-size:1rem;
5451
+ color:var(--t-text-color);
5452
+ white-space:nowrap;
5453
+ cursor:default;
5454
+ border-radius:var(--t-border-radius);
5455
+ }
5456
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
5457
+ background:var(--t-fill-color-neutral-070);
5458
+ }
5459
+ .tds-combo-box-list-item[data-selected]{
5460
+ background:var(--t-fill-color-button-interaction-ghost-active);
5461
+ }
5462
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
5463
+ background:var(--t-fill-color-neutral-060);
5464
+ }
5465
+ .tds-combo-box-list-item[data-disabled]{
5466
+ color:var(--t-form-color-disabled);
5467
+ cursor:not-allowed;
5468
+ }
5469
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
5470
+ background:transparent;
5471
+ }
5472
+ .tds-combo-box-empty-state{
5473
+ position:relative;
5474
+ min-block-size:var(--t-spacing-3);
5475
+ padding-block:var(--t-spacing-1);
5476
+ padding-inline:var(--t-spacing-2);
5477
+ font-size:var(--t-font-size-md);
5478
+ color:var(--t-text-color-secondary);
5479
+ }
5480
+ .tds-combo-box-load-more{
5481
+ position:relative;
5482
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
5483
+ }
5484
+
5485
+ .tds-combo-box-empty-state,
5486
+ .tds-combo-box-load-more{
5487
+ --tds-loading-spinner-visibility:visible;
5488
+ --tds-loading-spinner-animation-play-state:running;
5489
+ }
5490
+ .tds-combo-box-list-section:not(:first-child){
5491
+ margin-block-start:var(--t-spacing-half);
5492
+ }
5493
+ .tds-combo-box-section-header{
5494
+ padding-block:var(--t-spacing-1);
5495
+ padding-inline:var(--t-spacing-1);
5496
+ font-size:var(--t-font-size-sm);
5497
+ font-weight:var(--t-font-weight-semibold);
5498
+ color:var(--t-text-color-secondary);
5499
+ }
5500
+
5501
+ .tds-loading-spinner{
5502
+ position:absolute;
5503
+ right:0;
5504
+ left:0;
5505
+ visibility:var(--tds-loading-spinner-visibility, hidden);
5506
+ width:var(--tds-loading-spinner-size, 1.25em);
5507
+ height:var(--tds-loading-spinner-size, 1.25em);
5508
+ margin:auto;
5509
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
5510
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
5511
+ border-radius:50%;
5512
+ animation:spinner-rotate 500ms infinite linear;
5513
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
5514
+ }
5515
+
5516
+ @keyframes spinner-rotate{
5517
+ to{
5518
+ transform:rotate(360deg);
5519
+ }
5520
+ }
5521
+
5522
+ @media (prefers-reduced-motion: reduce){
5523
+ [class*="--loading"] .tds-loading-spinner{
5524
+ --tds-loading-spinner-animation-play-state:paused;
5525
+ }
5526
+ }
5527
+
5528
5528
  .tds-date-picker{
5529
5529
  --tds-date-picker-button-offset:4px;
5530
5530
  }