@planningcenter/tapestry 4.9.0-rc.3 → 4.9.0-rc.4

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,861 +677,1123 @@
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
- }
1032
-
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
- display:block;
1035
- }
1036
957
 
1037
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
- display:flex;
1039
- flex-direction:column;
1040
- }
958
+ @media (prefers-reduced-motion: no-preference){
1041
959
 
1042
- .tds-button-group{
1043
- display:inline-flex;
960
+ :root{
961
+ interpolate-size:allow-keywords;
1044
962
  }
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--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1056
- position:absolute;
1057
- inset-block:calc(var(--tds-btn-border-width) * -1);
1058
- width:var(--tds-btn-border-width);
1059
- pointer-events:none;
1060
- content:"";
1061
- background-color:var(--t-border-color-white);
1062
- }
1063
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1064
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1065
- }
1066
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1067
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1068
- }
1069
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
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
963
  }
1083
964
 
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);
965
+ @layer tds-component{
966
+ tds-sidenav,
967
+ .tds-sidenav{
968
+ --tds-sidenav-indent:12px;
969
+ --tds-sidenav-item-depth:0;
1088
970
 
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;
971
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1098
972
 
1099
- font-size:var(--tds-checkbox-group-font-size);
1100
- line-height:var(--tds-checkbox-group-line-height);
1101
- border:0;
1102
- }
973
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
974
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
975
+ --tds-sidenav-collapse-closed-opacity:0;
976
+ --tds-sidenav-collapse-open-opacity:1;
977
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
978
+ --tds-sidenav-collapse-open-transform:translateY(0);
1103
979
 
1104
- .tds-checkbox-group legend{
1105
- float:left;
1106
- padding:0;
1107
- margin:0;
1108
- }
980
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
981
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
982
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
983
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1109
984
 
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
- }
985
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
986
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
987
+ --tds-sidenav-item-nested-background-selected:transparent;
1114
988
 
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
- }
989
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
990
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
991
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1120
992
 
1121
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1122
- content:none;
993
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
994
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
995
+ }
996
+
997
+ @media (prefers-reduced-motion: reduce){
998
+ tds-sidenav,
999
+ .tds-sidenav{
1000
+ --tds-sidenav-collapse-transition-enter:none;
1001
+ --tds-sidenav-collapse-transition-exit:none;
1002
+ --tds-sidenav-collapse-closed-transform:none;
1003
+ --tds-sidenav-collapse-open-transform:none;
1004
+ }
1123
1005
  }
1124
1006
 
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);
1007
+ .tds-sidenav--theme-gray{
1008
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1009
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1010
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1011
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1012
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1013
+ }
1131
1014
  }
1132
1015
 
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
- }
1016
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
+ display:flex;
1018
+ }
1143
1019
 
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);
1020
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1021
+ flex-direction:column;
1022
+ gap:var(--t-spacing-half);
1023
+ width:100%;
1149
1024
  }
1150
1025
 
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;
1026
+ .tds-sidenav-section-list{
1027
+ width:100%;
1028
+ padding:0;
1029
+ margin:0;
1030
+ list-style:none;
1156
1031
  }
1157
1032
 
1158
- .tds-currency-input-control{
1033
+ .tds-sidenav-section-header{
1159
1034
  display:flex;
1160
- gap:var(--t-spacing-half);
1161
- align-items:center;
1162
- inline-size:100%;
1163
- min-block-size:var(--tds-field-min-height);
1164
- padding-inline:var(--tds-field-padding-inline);
1165
- font-size:var(--tds-field-font-size);
1166
- color:var(--tds-field-color);
1167
- cursor:text;
1168
- outline:var(--t-focus-ring-width) solid transparent;
1169
- background-color:var(--tds-field-background-color);
1170
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1171
- border-radius:var(--t-form-border-radius);
1172
- transition-timing-function:var(--t-ease-in-out);
1173
- transition-duration:var(--t-duration-200);
1174
- transition-property:background-color, border-color, outline-color, outline-offset;
1035
+ align-items:baseline;
1036
+ justify-content:space-between;
1037
+ padding-top:var(--t-spacing-2);
1175
1038
  }
1176
1039
 
1177
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1178
- border-color:var(--tds-field-border-color-hover);
1040
+ .tds-sidenav-section-header h2{
1041
+ margin:0;
1042
+ font-size:var(--t-font-size-sm);
1043
+ font-weight:var(--t-font-weight-semibold);
1044
+ line-height:1.35;
1045
+ color:var(--t-text-color-secondary);
1046
+ text-transform:uppercase;
1179
1047
  }
1180
1048
 
1181
- .tds-currency-input-control:has(input:focus){
1182
- outline-color:var(--t-focus-ring-color);
1183
- outline-offset:var(--t-focus-ring-offset);
1184
- border-color:var(--tds-field-border-color-active);
1049
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
+ padding-top:0;
1185
1051
  }
1186
1052
 
1187
- .tds-currency-input-control input{
1188
- flex:1;
1189
- min-inline-size:0;
1190
- padding:0;
1191
- font-family:inherit;
1192
- font-size:inherit;
1193
- color:inherit;
1053
+ .tds-sidenav-section-header [slot="label-actions"]{
1054
+ display:flex;
1055
+ gap:var(--t-spacing-half);
1056
+ align-items:center;
1057
+ }
1058
+
1059
+ .tds-sidenav-section [slot="section-actions"]{
1060
+ display:flex;
1061
+ gap:12px;
1062
+ align-items:center;
1063
+ min-height:42px;
1064
+ padding:var(--t-spacing-1) 0;
1065
+ }
1066
+
1067
+ .tds-sidenav-section-list,
1068
+ .tds-sidenav-item{
1069
+ width:100%;
1070
+ padding:0;
1071
+ margin:0;
1072
+ }
1073
+
1074
+ .tds-sidenav-item :is(a,button){
1075
+ position:relative;
1076
+ display:flex;
1077
+ gap:12px;
1078
+ align-items:center;
1079
+ width:100%;
1080
+ padding:12px;
1081
+ overflow:hidden;
1082
+ font-size:var(--t-font-size-sm);
1083
+ line-height:18px;
1084
+ color:var(--t-text-color-headline);
1085
+ white-space:nowrap;
1086
+ text-decoration:none;
1194
1087
  -webkit-appearance:none;
1195
1088
  -moz-appearance:none;
1196
1089
  appearance:none;
1197
- outline:0;
1198
- background-color:transparent;
1090
+ cursor:pointer;
1091
+ background-color:var(--tds-sidenav-item-background, transparent);
1199
1092
  border:0;
1093
+ border-radius:var(--t-border-radius);
1094
+ transition:var(--tds-sidenav-item-transition);
1200
1095
  }
1201
1096
 
1202
- :is(.tds-currency-input-control input)::-moz-placeholder{
1203
- color:var(--tds-field-placeholder-color);
1204
- -moz-user-select:none;
1205
- user-select:none;
1097
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1098
+ display:block;
1099
+ flex:1;
1100
+ overflow:hidden;
1101
+ text-overflow:ellipsis;
1102
+ text-align:left;
1103
+ white-space:nowrap;
1206
1104
  }
1207
1105
 
1208
- :is(.tds-currency-input-control input)::placeholder{
1209
- color:var(--tds-field-placeholder-color);
1210
- -webkit-user-select:none;
1211
- -moz-user-select:none;
1212
- user-select:none;
1106
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1107
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1108
+ color:var(--t-text-color-headline);
1109
+ text-decoration:none;
1213
1110
  }
1214
1111
 
1215
- .tds-currency-input-control .tds-currency-input-prefix{
1216
- flex-shrink:0;
1217
- color:var(--t-text-color-secondary);
1218
- pointer-events:none;
1219
- -webkit-user-select:none;
1220
- -moz-user-select:none;
1221
- user-select:none;
1222
- }
1112
+ :is(.tds-sidenav-item :is(a,button)):active{
1113
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1114
+ }
1223
1115
 
1224
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1225
- --tds-field-background-color:var(--t-form-background-color-error);
1226
- --tds-field-border-color:var(--t-form-border-color-error);
1227
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1228
- }
1116
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1117
+ overflow:hidden;
1118
+ color:var(--tds-sidenav-item-icon-color);
1119
+ }
1229
1120
 
1230
- .tds-currency-input-control:has(:disabled){
1231
- --tds-field-border-color:var(--t-form-border-color-disabled);
1232
- --tds-field-background-color:var(--t-form-background-color-disabled);
1233
- --tds-field-color:var(--t-form-color-disabled);
1121
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1122
+ display:block;
1123
+ width:var(--tds-sidenav-item-icon-size);
1124
+ height:var(--tds-sidenav-item-icon-size);
1125
+ }
1234
1126
 
1235
- cursor:not-allowed;
1236
- }
1127
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1128
+ --tds-sidenav-indent:19px;
1129
+ }
1237
1130
 
1238
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1239
- color:var(--tds-field-color);
1131
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1132
+ visibility:visible;
1133
+ block-size:auto;
1134
+ opacity:1;
1240
1135
  }
1241
1136
 
1242
- .tds-currency-input-control:has([readonly]){
1243
- --tds-field-border-color:var(--t-form-border-color-readonly);
1244
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1245
- --tds-field-background-color:var(--t-form-background-color-readonly);
1246
- --tds-field-color:var(--t-form-color-readonly);
1137
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1138
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1139
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1140
+
1141
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1142
+ font-weight:var(--t-font-weight-semibold);
1247
1143
  }
1248
1144
 
1249
- .tds-currency-input-control:has([readonly]):has(input:focus){
1250
- border-color:var(--t-form-border-color-hover);
1251
- }
1252
- .tds-currency-input-currency-name--hidden{
1253
- position:absolute;
1254
- width:1px;
1255
- height:1px;
1256
- overflow:hidden;
1257
- white-space:nowrap;
1258
- clip-path:inset(50%);
1259
- }
1145
+ .tds-sidenav-item:has(.tds-sidenav-section){
1146
+ display:flex;
1147
+ flex-direction:column;
1148
+ gap:var(--t-spacing-half);
1149
+ }
1260
1150
 
1261
- @layer t-critical{
1262
- tds-page-header:not(.hydrated){
1263
- display:none;
1151
+ .tds-sidenav-item .tds-sidenav-section-list{
1152
+ --tds-sidenav-item-depth:1;
1153
+ gap:0;
1264
1154
  }
1265
- }
1266
1155
 
1267
- @layer t-component{
1268
- .tds-page-header{
1269
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1270
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1271
- --tds-page-header-color:var(--t-text-color);
1272
- --tds-page-header-bottom-border-color:transparent;
1273
- --tds-page-header-headline-color:var(--t-text-color-headline);
1274
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1275
- --tds-page-header-padding-x:var(--t-spacing-2);
1276
- --tds-page-header-padding-y:var(--t-spacing-2);
1277
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1278
- --tds-page-header-nav-gap:var(--t-spacing-1);
1279
- --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%);
1280
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1281
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1282
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1283
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1284
- --tds-page-header-nav-item-border-width:1px;
1156
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1157
+ visibility:hidden;
1158
+ block-size:0;
1159
+ overflow-y:clip;
1160
+ opacity:0;
1161
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1162
+ }
1285
1163
 
1286
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1287
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1164
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1165
+ --tds-sidenav-item-depth:2;
1166
+ }
1288
1167
 
1289
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1290
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1291
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1168
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1169
+ min-height:var(--t-element-size-2xl);
1170
+ padding-block:9px;
1171
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1172
+ line-height:1;
1173
+ background-color:transparent;
1174
+ }
1292
1175
 
1293
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1294
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1176
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1177
+ position:absolute;
1178
+ top:0;
1179
+ bottom:0;
1180
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1181
+ width:2px;
1182
+ content:"";
1183
+ background-color:var(--tds-sidenav-item-nested-border-color);
1184
+ transition:var(--tds-sidenav-item-transition);
1185
+ }
1295
1186
 
1296
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1297
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1298
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1187
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1188
+ position:absolute;
1189
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1190
+ z-index:-1;
1191
+ height:100%;
1192
+ content:"";
1193
+ background-color:var(--tds-sidenav-item-nested-background);
1194
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1195
+ transition:var(--tds-sidenav-item-transition);
1196
+ }
1299
1197
 
1300
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1301
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1302
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1303
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1304
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1305
- }
1198
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1199
+ display:block;
1200
+ text-align:left;
1201
+ white-space:normal;
1202
+ }
1306
1203
 
1307
- .tds-page-header--profile{
1308
- --tds-page-header-padding-y:20px;
1309
- }
1204
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1205
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1206
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1207
+ }
1310
1208
 
1311
- @supports (color: light-dark(#fff, #000)){
1312
- .tds-page-header{
1313
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1314
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1315
- }
1316
- }
1209
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1210
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1211
+ }
1317
1212
 
1318
- @media (min-width: 600px){
1319
- .tds-page-header{
1320
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1321
- --tds-page-header-color:var(--t-text-color-secondary);
1322
- --tds-page-header-bottom-border-color:var(--t-border-color);
1323
- --tds-page-header-padding-x:var(--t-spacing-3);
1324
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1325
- --tds-page-header-nav-gap:var(--t-spacing-half);
1326
- --tds-page-header-nav-background:transparent;
1327
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1328
- --tds-page-header-nav-item-border-width:1px;
1329
- --tds-page-header-nav-item-color:var(--t-text-color);
1330
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1331
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1332
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1333
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1334
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1335
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1213
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1214
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1215
+ font-weight:var(--t-font-weight-medium);
1336
1216
  }
1337
- }
1338
- }
1339
1217
 
1340
- .tds-page-header{
1218
+ .tds-sidenav-responsive-header{
1341
1219
  display:flex;
1342
- flex-direction:column;
1343
- padding-top:var(--tds-page-header-padding-y);
1344
- color:var(--tds-page-header-color);
1345
- background:var(--tds-page-header-background-color);
1346
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1220
+ gap:var(--t-spacing-2);
1221
+ align-items:center;
1222
+ width:100%;
1347
1223
  }
1348
1224
 
1349
- .tds-page-header:not(.has-nav){
1350
- padding-bottom:var(--tds-page-header-padding-y);
1225
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1226
+ order:0;
1351
1227
  }
1352
1228
 
1353
- .tds-page-header.inactive{
1354
- background:var(--tds-page-header-background-color-inactive);
1229
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1230
+ flex:1;
1231
+ order:1;
1232
+ margin:0;
1233
+ font-size:var(--t-font-size-lg);
1234
+ font-weight:var(--t-font-weight-medium);
1235
+ color:var(--t-text-color-headline);
1355
1236
  }
1356
1237
 
1357
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1358
- width:100%;
1238
+ @media (max-width: 719px){
1239
+ .tds-sidenav-collapse{
1240
+ z-index:10001;
1241
+ display:none;
1242
+ max-width:min(448px, calc(100vw - 48px));
1243
+ padding:0;
1244
+ margin:12px 0;
1245
+ position-area:bottom span-right;
1246
+ overflow:hidden;
1247
+ outline:0;
1248
+ background:var(--t-surface-color-card);
1249
+ border:0;
1250
+ border-radius:6px;
1251
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1252
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1253
+ transform:var(--tds-sidenav-collapse-open-transform);
1254
+ transition:var(--tds-sidenav-collapse-transition-enter);
1255
+ will-change:transform;
1359
1256
  }
1360
1257
 
1361
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1362
- display:flex;
1363
- flex-flow:row wrap;
1364
- gap:var(--t-spacing-half) var(--t-spacing-1);
1365
- align-items:flex-start;
1366
- justify-content:flex-start;
1367
- min-width:0;
1258
+ .tds-sidenav-scroll-container{
1259
+ --webkit-overflow-scrolling:touch;
1260
+ display:block;
1261
+ width:100%;
1262
+ height:-moz-fit-content;
1263
+ height:fit-content;
1264
+ padding:var(--t-spacing-2);
1265
+ overflow-y:auto;
1368
1266
  }
1369
1267
 
1370
- :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{
1268
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1269
+ display:none;
1270
+ }
1271
+ @supports selector(:popover-open){
1272
+ .tds-sidenav-collapse:popover-open{
1371
1273
  display:flex;
1372
- gap:var(--tds-page-header-nav-gap);
1373
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1374
- margin:0 0 -1px;
1375
- overflow:auto;
1376
- list-style:none;
1377
- background:var(--tds-page-header-nav-background);
1378
1274
  }
1379
1275
 
1380
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1381
- position:relative;
1382
- display:inline-flex;
1383
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1384
- font-size:var(--t-font-size-sm);
1385
- line-height:22px;
1386
- color:var(--tds-page-header-nav-item-color);
1387
- white-space:nowrap;
1388
- text-decoration:none;
1389
- -webkit-appearance:none;
1390
- -moz-appearance:none;
1391
- appearance:none;
1392
- cursor:pointer;
1393
- outline-offset:-2px;
1394
- background-color:var(--tds-page-header-nav-item-background-color);
1395
- background-clip:padding-box;
1396
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1397
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1398
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1276
+ .tds-sidenav-collapse:not(:popover-open){
1277
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1278
+ transition:var(--tds-sidenav-collapse-transition-exit);
1399
1279
  }
1400
1280
 
1401
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1402
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1403
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1404
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1405
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1281
+ @starting-style{
1282
+ .tds-sidenav-collapse:popover-open{
1283
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1284
+ transform:var(--tds-sidenav-collapse-closed-transform);
1406
1285
  }
1286
+ }
1287
+ }
1288
+ @supports not selector(:popover-open){
1289
+ .tds-sidenav-collapse.\:popover-open{
1290
+ display:flex;
1291
+ }
1407
1292
 
1408
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1409
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1410
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1411
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1412
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1413
- }
1293
+ .tds-sidenav-collapse:not(.\:popover-open){
1294
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
+ transition:var(--tds-sidenav-collapse-transition-exit);
1296
+ }
1297
+ }
1298
+ }
1414
1299
 
1415
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1416
- background-color:var(--tds-page-header-nav-item-background-color-active);
1417
- border-color:var(--tds-page-header-nav-item-border-color-active);
1418
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1419
- }
1300
+ @media (min-width: 720px){
1301
+ .tds-sidenav-responsive-header{
1302
+ display:none;
1303
+ }
1304
+ }
1420
1305
 
1421
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1422
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1423
- color:var(--tds-page-header-nav-item-color-disabled);
1424
- cursor:not-allowed;
1425
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1426
- opacity:1;
1427
- }
1306
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
+ display:none;
1308
+ }
1428
1309
 
1429
- @media (min-width: 600px){
1430
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1431
- position:absolute;
1432
- inset:auto -1px -1px;
1433
- height:1px;
1434
- pointer-events:none;
1435
- content:"";
1436
- background-color:var(--tds-page-header-bottom-border-color);
1437
- }
1438
- }
1310
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1311
+ display:block;
1312
+ }
1439
1313
 
1440
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1441
- position:relative;
1314
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1315
+ display:flex;
1316
+ flex-direction:column;
1442
1317
  }
1443
1318
 
1444
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1445
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1446
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1447
- }
1319
+ .tds-checkbox{
1320
+ --tds-checkbox-font-size:var(--t-font-size-md);
1321
+ --tds-checkbox-cursor:pointer;
1322
+ --tds-checkbox-line-height:1.4;
1323
+ --tds-checkbox-transition-property:background-color, border-color;
1448
1324
 
1449
- :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{
1450
- position:absolute;
1451
- top:-5px;
1452
- right:-2px;
1453
- width:10px;
1454
- height:10px;
1455
- content:"";
1456
- background:var(--tds-page-header-nav-item-indicator-color);
1457
- border-radius:50%;
1458
- }
1325
+ --tds-checkbox-input-size:var(--t-element-size-md);
1326
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1327
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1328
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1459
1329
 
1460
- @media (prefers-reduced-motion: no-preference){
1461
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1462
- animation:indicator-pulse 1.25s ease infinite;
1463
- }
1464
- }
1330
+ --tds-checkbox-input-icon:none;
1331
+ --tds-checkbox-input-icon-visibility:hidden;
1332
+ --tds-checkbox-input-icon-opacity:0;
1333
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1465
1334
 
1466
- .tds-page-header__title-bar{
1467
- display:flex;
1468
- flex-direction:column;
1469
- gap:var(--t-spacing-2) var(--t-spacing-1);
1470
- align-items:flex-start;
1471
- justify-content:space-between;
1472
- padding:0 var(--tds-page-header-padding-x);
1473
- }
1335
+ --tds-checkbox-label-color:var(--t-form-color);
1474
1336
 
1475
- .tds-page-header--profile > .tds-page-header__title-bar{
1476
- align-items:center;
1477
- }
1337
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1338
+ --tds-checkbox-description-line-height:1.35;
1339
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1340
+ --tds-checkbox-description-invalid-icon-display:none;
1478
1341
 
1479
- .tds-page-header__primary{
1480
- width:100%;
1342
+ position:relative;
1343
+ display:inline-grid;
1344
+ grid-template-columns:auto;
1345
+ grid-auto-columns:1fr;
1346
+ gap:var(--t-spacing-fourth) 0;
1347
+ line-height:var(--tds-checkbox-line-height);
1348
+ -webkit-user-select:none;
1349
+ -moz-user-select:none;
1350
+ user-select:none;
1481
1351
  }
1482
1352
 
1483
- .tds-page-header__primary h1{
1484
- margin:0;
1485
- font-size:var(--tds-page-header-headline-font-size);
1353
+ .tds-checkbox label{
1354
+ grid-area:1 / 2;
1355
+ padding-inline-start:var(--t-spacing-1);
1356
+ font-size:var(--tds-checkbox-font-size);
1486
1357
  font-weight:var(--t-font-weight-normal);
1487
- line-height:32px;
1488
- color:var(--tds-page-header-headline-color);
1489
- overflow-wrap:break-word;
1358
+ color:var(--tds-checkbox-label-color);
1359
+ cursor:var(--tds-checkbox-cursor);
1490
1360
  }
1491
1361
 
1492
- @media (min-width: 960px){
1493
- .tds-page-header__primary{
1494
- flex:1 1 max-content;
1495
- width:auto;
1496
- min-width:0;
1497
- max-width:100%;
1362
+ .tds-checkbox tds-indeterminate{
1363
+ display:flex;
1498
1364
  }
1499
1365
 
1500
- .tds-page-header__title-bar,
1501
- .tds-page-header--profile .tds-page-header__title-bar{
1502
- flex-flow:row nowrap;
1503
- row-gap:12px;
1504
- align-items:flex-start;
1366
+ .tds-checkbox input[type="checkbox"]{
1367
+ position:relative;
1368
+ width:1em;
1369
+ height:1em;
1370
+ margin:calc((1lh - 1em) / 2) 0 0;
1371
+ font-size:var(--tds-checkbox-font-size);
1372
+ line-height:inherit;
1373
+ -webkit-appearance:none;
1374
+ -moz-appearance:none;
1375
+ appearance:none;
1376
+ cursor:var(--tds-checkbox-cursor);
1377
+ background-color:var(--tds-checkbox-input-background-color);
1378
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1379
+ border-radius:var(--tds-checkbox-input-border-radius);
1380
+ transition-timing-function:var(--t-ease-in-out);
1381
+ transition-duration:var(--t-duration-200);
1382
+ transition-property:var(--tds-checkbox-transition-property);
1505
1383
  }
1506
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1507
- width:auto;
1384
+
1385
+ :is(.tds-checkbox input[type="checkbox"])::before{
1386
+ position:absolute;
1387
+ top:50%;
1388
+ left:50%;
1389
+ visibility:var(--tds-checkbox-input-icon-visibility);
1390
+ width:100%;
1391
+ height:100%;
1392
+ content:"";
1393
+ background-color:var(--tds-checkbox-input-icon-fill);
1394
+ border-radius:var(--tds-checkbox-input-border-radius);
1395
+ opacity:var(--tds-checkbox-input-icon-opacity);
1396
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1397
+ mask-image:var(--tds-checkbox-input-icon);
1398
+ -webkit-mask-repeat:no-repeat;
1399
+ mask-repeat:no-repeat;
1400
+ -webkit-mask-size:contain;
1401
+ mask-size:contain;
1402
+ transform:translate(-50%, -50%);
1508
1403
  }
1509
1404
 
1510
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1511
- justify-content:flex-end;
1405
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1406
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1407
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1512
1408
  }
1513
- }
1514
1409
 
1515
- .tds-page-header-phone,
1516
- .tds-page-header-email{
1517
- color:var(--tds-page-header-color);
1518
- white-space:nowrap;
1519
- }
1520
- .tds-page-header-email{
1521
- max-width:100%;
1522
- overflow:hidden;
1523
- text-overflow:ellipsis;
1524
- }
1410
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1411
+ outline:var(--t-focus-ring-outline);
1412
+ outline-offset:var(--t-focus-ring-offset);
1413
+ }
1414
+
1415
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1416
+ pointer-events:none;
1417
+ }
1418
+
1419
+ @media (prefers-reduced-motion: reduce){
1420
+
1421
+ .tds-checkbox input[type="checkbox"]{
1422
+ --tds-checkbox-transition-property:none;
1423
+ }
1424
+ }
1425
+
1426
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1427
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1428
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1429
+ --tds-checkbox-input-icon-visibility:visible;
1430
+ --tds-checkbox-input-icon-opacity:1;
1431
+ }
1432
+
1433
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1434
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1435
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1436
+ }
1437
+
1438
+ .tds-checkbox:has(input:checked){
1439
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1440
+ }
1441
+
1442
+ .tds-checkbox:has(input:indeterminate){
1443
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1444
+ }
1445
+
1446
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1447
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1448
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1449
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1450
+ }
1451
+
1452
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1453
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1454
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1455
+ }
1456
+
1457
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1458
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1459
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1460
+ }
1461
+
1462
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1463
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1464
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1465
+ }
1466
+
1467
+ .tds-checkbox:has(input:required) label::after{
1468
+ margin-left:.25ch;
1469
+ color:var(--t-text-color-status-error);
1470
+ content:"*";
1471
+ }
1472
+
1473
+ .tds-checkbox:has(input:disabled){
1474
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1475
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1476
+
1477
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1478
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1479
+ --tds-checkbox-cursor:not-allowed;
1480
+ }
1481
+
1482
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1483
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1484
+ }
1485
+
1486
+ .tds-checkbox-description{
1487
+ display:flex;
1488
+ grid-area:2 / 2;
1489
+ gap:var(--t-spacing-half);
1490
+ align-items:flex-start;
1491
+ padding-inline-start:var(--t-spacing-1);
1492
+ margin:0;
1493
+ font-size:var(--tds-checkbox-description-font-size);
1494
+ line-height:var(--tds-checkbox-description-line-height);
1495
+ color:var(--tds-checkbox-description-color);
1496
+ cursor:text;
1497
+ }
1498
+
1499
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1500
+ display:var(--tds-checkbox-description-invalid-icon-display);
1501
+ flex-shrink:0;
1502
+ margin-top:calc(.5lh - .5em);
1503
+ line-height:var(--tds-checkbox-description-line-height);
1504
+ }
1505
+
1506
+ .tds-checkbox--sm{
1507
+ --tds-checkbox-line-height:1.35;
1508
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1509
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1510
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1511
+ --tds-checkbox-description-line-height:1.3;
1512
+ }
1513
+
1514
+ .tds-button-group{
1515
+ display:inline-flex;
1516
+ }
1517
+ .tds-button-group > .tds-btn{
1518
+ --tds-button-group-item-z-index:1;
1519
+
1520
+ position:relative;
1521
+ z-index:var(--tds-button-group-item-z-index);
1522
+ border-radius:0;
1523
+ }
1524
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1525
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1526
+ }
1527
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1528
+ position:absolute;
1529
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1530
+ width:var(--tds-btn-border-width);
1531
+ pointer-events:none;
1532
+ content:"";
1533
+ background-color:var(--t-border-color-white);
1534
+ }
1535
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1536
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1537
+ }
1538
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1539
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1540
+ }
1541
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1542
+ --tds-button-group-item-z-index:2;
1543
+ }
1544
+ :is(.tds-button-group > .tds-btn):focus-visible{
1545
+ --tds-button-group-item-z-index:5;
1546
+ }
1547
+ .tds-button-group > .tds-btn:first-child{
1548
+ border-start-start-radius:var(--tds-btn-border-radius);
1549
+ border-end-start-radius:var(--tds-btn-border-radius);
1550
+ }
1551
+ .tds-button-group > .tds-btn:last-child{
1552
+ border-start-end-radius:var(--tds-btn-border-radius);
1553
+ border-end-end-radius:var(--tds-btn-border-radius);
1554
+ }
1555
+
1556
+ .tds-checkbox-group{
1557
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
+ --tds-checkbox-group-line-height:1.4;
1559
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1560
+
1561
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
+ --tds-checkbox-group-description-line-height:1.35;
1563
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1564
+ --tds-checkbox-group-description-invalid-icon-display:none;
1565
+ display:flex;
1566
+ flex-direction:column;
1567
+ gap:0;
1568
+ padding:0;
1569
+ margin:0;
1570
+
1571
+ font-size:var(--tds-checkbox-group-font-size);
1572
+ line-height:var(--tds-checkbox-group-line-height);
1573
+ border:0;
1574
+ }
1575
+
1576
+ .tds-checkbox-group legend{
1577
+ float:left;
1578
+ padding:0;
1579
+ margin:0;
1580
+ }
1581
+
1582
+ .tds-checkbox-group[aria-invalid="true"]{
1583
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1584
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1585
+ }
1586
+
1587
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1588
+ margin-left:.25ch;
1589
+ color:var(--t-text-color-status-error);
1590
+ content:"*";
1591
+ }
1592
+
1593
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1594
+ content:none;
1595
+ }
1596
+
1597
+ .tds-checkbox-group-fields{
1598
+ display:flex;
1599
+ flex-direction:column;
1600
+ gap:var(--tds-checkbox-group-gap);
1601
+ align-items:flex-start;
1602
+ margin-top:var(--t-spacing-1);
1603
+ }
1604
+
1605
+ .tds-checkbox-group-description{
1606
+ display:flex;
1607
+ gap:var(--t-spacing-half);
1608
+ align-items:flex-start;
1609
+ margin:var(--t-spacing-fourth) 0 0;
1610
+ font-size:var(--tds-checkbox-group-description-font-size);
1611
+ line-height:var(--tds-checkbox-group-description-line-height);
1612
+ color:var(--tds-checkbox-group-description-color);
1613
+ cursor:text;
1614
+ }
1615
+
1616
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
+ flex-shrink:0;
1619
+ margin-top:calc(.5lh - .5em);
1620
+ line-height:var(--tds-checkbox-group-description-line-height);
1621
+ }
1622
+
1623
+ .tds-checkbox-group--sm{
1624
+ --tds-checkbox-group-line-height:1.35;
1625
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-group-description-line-height:1.3;
1628
+ }
1629
+
1630
+ .tds-currency-input-control{
1631
+ display:flex;
1632
+ gap:var(--t-spacing-half);
1633
+ align-items:center;
1634
+ inline-size:100%;
1635
+ min-block-size:var(--tds-field-min-height);
1636
+ padding-inline:var(--tds-field-padding-inline);
1637
+ font-size:var(--tds-field-font-size);
1638
+ color:var(--tds-field-color);
1639
+ cursor:text;
1640
+ outline:var(--t-focus-ring-width) solid transparent;
1641
+ background-color:var(--tds-field-background-color);
1642
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1643
+ border-radius:var(--t-form-border-radius);
1644
+ transition-timing-function:var(--t-ease-in-out);
1645
+ transition-duration:var(--t-duration-200);
1646
+ transition-property:background-color, border-color, outline-color, outline-offset;
1647
+ }
1648
+
1649
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1650
+ border-color:var(--tds-field-border-color-hover);
1651
+ }
1652
+
1653
+ .tds-currency-input-control:has(input:focus){
1654
+ outline-color:var(--t-focus-ring-color);
1655
+ outline-offset:var(--t-focus-ring-offset);
1656
+ border-color:var(--tds-field-border-color-active);
1657
+ }
1658
+
1659
+ .tds-currency-input-control input{
1660
+ flex:1;
1661
+ min-inline-size:0;
1662
+ padding:0;
1663
+ font-family:inherit;
1664
+ font-size:inherit;
1665
+ color:inherit;
1666
+ -webkit-appearance:none;
1667
+ -moz-appearance:none;
1668
+ appearance:none;
1669
+ outline:0;
1670
+ background-color:transparent;
1671
+ border:0;
1672
+ }
1673
+
1674
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1675
+ color:var(--tds-field-placeholder-color);
1676
+ -moz-user-select:none;
1677
+ user-select:none;
1678
+ }
1679
+
1680
+ :is(.tds-currency-input-control input)::placeholder{
1681
+ color:var(--tds-field-placeholder-color);
1682
+ -webkit-user-select:none;
1683
+ -moz-user-select:none;
1684
+ user-select:none;
1685
+ }
1686
+
1687
+ .tds-currency-input-control .tds-currency-input-prefix{
1688
+ flex-shrink:0;
1689
+ color:var(--t-text-color-secondary);
1690
+ pointer-events:none;
1691
+ -webkit-user-select:none;
1692
+ -moz-user-select:none;
1693
+ user-select:none;
1694
+ }
1695
+
1696
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1697
+ --tds-field-background-color:var(--t-form-background-color-error);
1698
+ --tds-field-border-color:var(--t-form-border-color-error);
1699
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1700
+ }
1701
+
1702
+ .tds-currency-input-control:has(:disabled){
1703
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1704
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1705
+ --tds-field-color:var(--t-form-color-disabled);
1706
+
1707
+ cursor:not-allowed;
1708
+ }
1709
+
1710
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1711
+ color:var(--tds-field-color);
1712
+ }
1713
+
1714
+ .tds-currency-input-control:has([readonly]){
1715
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1716
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1717
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1718
+ --tds-field-color:var(--t-form-color-readonly);
1719
+ }
1720
+
1721
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1722
+ border-color:var(--t-form-border-color-hover);
1723
+ }
1724
+ .tds-currency-input-currency-name--hidden{
1725
+ position:absolute;
1726
+ width:1px;
1727
+ height:1px;
1728
+ overflow:hidden;
1729
+ white-space:nowrap;
1730
+ clip-path:inset(50%);
1731
+ }
1732
+
1733
+
1734
+ :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{
1735
+ -webkit-appearance:none;
1736
+ appearance:none;
1737
+ }
1738
+
1739
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1740
+ inline-size:1em;
1741
+ block-size:2em;
1742
+ }
1743
+
1744
+ [type="file"]:is(.tds-input input){
1745
+ padding-block:var(--t-spacing-half);
1746
+ padding-inline-start:var(--t-spacing-half);
1747
+ }
1748
+
1749
+ [type="file"]:is(.tds-input input):not(:disabled){
1750
+ color:var(--t-text-color-secondary);
1751
+ }
1752
+
1753
+ [type="file"]:is(.tds-input input)::file-selector-button{
1754
+ --_file-btn-padding-block:3px;
1755
+
1756
+ padding-block:var(--_file-btn-padding-block);
1757
+ padding-inline:12px;
1758
+ margin-inline-end:12px;
1759
+ font:inherit;
1760
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1761
+ color:var(--t-text-color-status-neutral);
1762
+ cursor:pointer;
1763
+ background-color:var(--t-fill-color-button-neutral-solid);
1764
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1765
+ border-radius:var(--t-border-radius-md);
1766
+ transition-timing-function:var(--t-ease-in-out);
1767
+ transition-duration:var(--t-duration-200);
1768
+ transition-property:color, background-color, border-color;
1769
+ }
1770
+
1771
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1772
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1773
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1774
+ }
1775
+
1776
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1777
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1778
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1779
+ }
1525
1780
 
1526
- @keyframes indicator-pulse{
1527
- 0%{
1528
- opacity:.3;
1529
- transform:scale(.9);
1781
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1782
+ color:var(--t-text-color-disabled);
1783
+ pointer-events:none;
1784
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1785
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1786
+ }
1787
+ @supports (field-sizing: content){
1788
+ .tds-input--auto-width{
1789
+ inline-size:-moz-fit-content;
1790
+ inline-size:fit-content;
1791
+ min-inline-size:min(100%, 122px);
1530
1792
  }
1531
1793
 
1532
- 100%{
1533
- opacity:0;
1534
- transform:scale(1.75);
1794
+ .tds-input--auto-width input{
1795
+ field-sizing:content;
1796
+ inline-size:auto;
1535
1797
  }
1536
1798
  }
1537
1799
 
@@ -1628,289 +1890,75 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1628
1890
  .tds-modal-header{
1629
1891
  display:grid;
1630
1892
  grid-template-columns:1fr auto;
1631
- -moz-column-gap:var(--t-spacing-2);
1632
- column-gap:var(--t-spacing-2);
1633
- padding-block:0;
1634
- padding-inline:var(--t-spacing-4);
1635
- }
1636
-
1637
- .tds-modal-title{
1638
- grid-row:1;
1639
- grid-column:1;
1640
- margin:0;
1641
- font-size:var(--t-font-size-2xl);
1642
- font-weight:var(--t-font-weight-medium);
1643
- line-height:140%;
1644
- color:var(--t-text-color-headline);
1645
- }
1646
-
1647
- .tds-modal-subtitle{
1648
- grid-row:2;
1649
- grid-column:1;
1650
- margin:0;
1651
- font-size:var(--t-font-size-md);
1652
- font-weight:var(--t-font-weight-medium);
1653
- line-height:140%;
1654
- color:var(--t-text-color-secondary);
1655
- }
1656
-
1657
- .tds-modal-close{
1658
- grid-row:1;
1659
- grid-column:2;
1660
- align-self:center;
1661
- color:var(--t-icon-color-dim);
1662
- }
1663
-
1664
- .tds-modal-body{
1665
- padding-block:var(--t-spacing-3);
1666
- padding-inline:var(--t-spacing-4);
1667
- }
1668
-
1669
- .tds-modal-body--full-width{
1670
- padding-inline:0;
1671
- }
1672
-
1673
- .tds-modal-footer{
1674
- display:flex;
1675
- gap:var(--t-spacing-2);
1676
- align-items:center;
1677
- justify-content:flex-end;
1678
- padding-block:var(--t-spacing-3);
1679
- padding-inline:var(--t-spacing-4);
1680
- border-top:1px solid var(--t-border-color);
1681
- }
1682
-
1683
- .tds-modal-footer > [slot="start"]{
1684
- margin-inline-end:auto;
1685
- }
1686
-
1687
- @media (min-width: 720px){
1688
- .tds-modal-overlay{
1689
- --tds-modal-min-margin-block:0;
1690
- }
1691
-
1692
- .tds-modal-footer{
1693
- position:sticky;
1694
- bottom:0;
1695
- background:var(--t-surface-color-card);
1696
- border-end-start-radius:var(--t-border-radius-lg);
1697
- border-end-end-radius:var(--t-border-radius-lg);
1698
- }
1699
- }
1700
-
1701
- .tds-popover{
1702
- max-inline-size:24rem;
1703
- overflow:auto;
1704
- overscroll-behavior:none;
1705
- outline:0;
1706
- scrollbar-color:#0004 var(--t-surface-color-card);
1707
- scrollbar-width:thin;
1708
- background:var(--t-surface-color-card);
1709
- background-clip:padding-box;
1710
- border:1px solid var(--t-border-color);
1711
- border-radius:var(--t-border-radius);
1712
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1713
- }
1714
-
1715
- @media (prefers-reduced-motion: no-preference){
1716
- .tds-popover[data-entering]{
1717
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1718
- }
1719
-
1720
- .tds-popover[data-exiting]{
1721
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1722
- }
1723
-
1724
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1725
- will-change:opacity, transform;
1726
- }
1727
-
1728
- @keyframes tds-popover{
1729
- from{
1730
- opacity:0;
1731
- transform:translateY(-8px);
1732
- }
1733
- }
1734
- }
1735
-
1736
- .tds-popover-content{
1737
- display:flex;
1738
- flex-direction:column;
1739
- padding:var(--t-spacing-1);
1740
- outline:0;
1741
- }
1742
-
1743
-
1744
- :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{
1745
- -webkit-appearance:none;
1746
- appearance:none;
1747
- }
1748
-
1749
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1750
- inline-size:1em;
1751
- block-size:2em;
1752
- }
1753
-
1754
- [type="file"]:is(.tds-input input){
1755
- padding-block:var(--t-spacing-half);
1756
- padding-inline-start:var(--t-spacing-half);
1757
- }
1758
-
1759
- [type="file"]:is(.tds-input input):not(:disabled){
1760
- color:var(--t-text-color-secondary);
1761
- }
1762
-
1763
- [type="file"]:is(.tds-input input)::file-selector-button{
1764
- --_file-btn-padding-block:3px;
1765
-
1766
- padding-block:var(--_file-btn-padding-block);
1767
- padding-inline:12px;
1768
- margin-inline-end:12px;
1769
- font:inherit;
1770
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1771
- color:var(--t-text-color-status-neutral);
1772
- cursor:pointer;
1773
- background-color:var(--t-fill-color-button-neutral-solid);
1774
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1775
- border-radius:var(--t-border-radius-md);
1776
- transition-timing-function:var(--t-ease-in-out);
1777
- transition-duration:var(--t-duration-200);
1778
- transition-property:color, background-color, border-color;
1779
- }
1780
-
1781
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1782
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1783
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1784
- }
1785
-
1786
- [type="file"]:is(.tds-input input):active::file-selector-button{
1787
- background-color:var(--t-fill-color-button-neutral-solid-active);
1788
- border-color:var(--t-fill-color-button-neutral-solid-active);
1789
- }
1790
-
1791
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1792
- color:var(--t-text-color-disabled);
1793
- pointer-events:none;
1794
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1795
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1796
- }
1797
- @supports (field-sizing: content){
1798
- .tds-input--auto-width{
1799
- inline-size:-moz-fit-content;
1800
- inline-size:fit-content;
1801
- min-inline-size:min(100%, 122px);
1802
- }
1803
-
1804
- .tds-input--auto-width input{
1805
- field-sizing:content;
1806
- inline-size:auto;
1807
- }
1808
- }
1809
-
1810
- .tds-input:has(textarea){
1811
- --tds-input-padding-block:6px;
1812
- --tds-input-resizer-size:var(--t-element-size-sm);
1813
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1814
- }
1815
-
1816
- @supports (x: attr(x type(*))){
1817
-
1818
- .tds-input textarea{
1819
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1820
- }
1821
- }
1822
-
1823
- .tds-input.tds-textarea--resize-vertical textarea{
1824
- resize:vertical;
1825
- }
1826
-
1827
- .tds-input.tds-textarea--resize-none textarea{
1828
- resize:none;
1829
- }
1830
-
1831
- .tds-input.tds-textarea--resize-auto textarea{
1832
- resize:vertical;
1833
- }
1834
-
1835
- @supports (field-sizing: content){
1836
- .tds-input.tds-textarea--resize-auto textarea{
1837
- field-sizing:content;
1838
- resize:none;
1839
- }
1840
- }
1841
-
1842
- .tds-input textarea{
1843
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1844
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1845
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1846
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1847
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1848
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1849
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1850
- --tds-input-scrollbar-thumb-border-radius:999px;
1851
- --tds-input-scrollbar-thumb-border-width:3px;
1852
- --tds-input-scrollbar-track-margin-block:.125rem;
1853
- scrollbar-color:initial;
1854
- transition-timing-function:var(--t-ease-in-out);
1855
- transition-duration:var(--t-duration-200);
1856
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1857
- }
1858
-
1859
- @media (pointer: fine){
1860
- :is(.tds-input textarea)::-webkit-scrollbar{
1861
- width:12px;
1862
- height:12px;
1863
- cursor:default;
1864
- }
1893
+ -moz-column-gap:var(--t-spacing-2);
1894
+ column-gap:var(--t-spacing-2);
1895
+ padding-block:0;
1896
+ padding-inline:var(--t-spacing-4);
1897
+ }
1865
1898
 
1866
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1867
- cursor:default;
1868
- background:var(--tds-input-scrollbar-thumb-color);
1869
- background-clip:content-box;
1870
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1871
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1872
- }
1899
+ .tds-modal-title{
1900
+ grid-row:1;
1901
+ grid-column:1;
1902
+ margin:0;
1903
+ font-size:var(--t-font-size-2xl);
1904
+ font-weight:var(--t-font-weight-medium);
1905
+ line-height:140%;
1906
+ color:var(--t-text-color-headline);
1907
+ }
1873
1908
 
1874
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1875
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1876
- }
1909
+ .tds-modal-subtitle{
1910
+ grid-row:2;
1911
+ grid-column:1;
1912
+ margin:0;
1913
+ font-size:var(--t-font-size-md);
1914
+ font-weight:var(--t-font-weight-medium);
1915
+ line-height:140%;
1916
+ color:var(--t-text-color-secondary);
1917
+ }
1877
1918
 
1878
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1879
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1880
- }
1919
+ .tds-modal-close{
1920
+ grid-row:1;
1921
+ grid-column:2;
1922
+ align-self:center;
1923
+ color:var(--t-icon-color-dim);
1924
+ }
1881
1925
 
1882
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1883
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1884
- }
1926
+ .tds-modal-body{
1927
+ padding-block:var(--t-spacing-3);
1928
+ padding-inline:var(--t-spacing-4);
1929
+ }
1885
1930
 
1886
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1887
- background:var(--tds-input-scrollbar-surface-color);
1888
- }
1931
+ .tds-modal-body--full-width{
1932
+ padding-inline:0;
1933
+ }
1889
1934
 
1890
- :is(.tds-input textarea)::-webkit-resizer{
1891
- background:var(--tds-input-resizer-icon) no-repeat;
1892
- background-position:right bottom;
1893
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1894
- }
1935
+ .tds-modal-footer{
1936
+ display:flex;
1937
+ gap:var(--t-spacing-2);
1938
+ align-items:center;
1939
+ justify-content:flex-end;
1940
+ padding-block:var(--t-spacing-3);
1941
+ padding-inline:var(--t-spacing-4);
1942
+ border-top:1px solid var(--t-border-color);
1943
+ }
1895
1944
 
1896
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1897
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1898
- cursor:default;
1899
- }
1945
+ .tds-modal-footer > [slot="start"]{
1946
+ margin-inline-end:auto;
1947
+ }
1900
1948
 
1901
- @supports (-moz-appearance: none){
1902
- :is(.tds-input textarea){
1903
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1904
- scrollbar-width:thin;
1905
- }
1949
+ @media (min-width: 720px){
1950
+ .tds-modal-overlay{
1951
+ --tds-modal-min-margin-block:0;
1952
+ }
1906
1953
 
1907
- @media (hover){
1908
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1909
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1910
- }
1911
- }
1912
- }
1954
+ .tds-modal-footer{
1955
+ position:sticky;
1956
+ bottom:0;
1957
+ background:var(--t-surface-color-card);
1958
+ border-end-start-radius:var(--t-border-radius-lg);
1959
+ border-end-end-radius:var(--t-border-radius-lg);
1913
1960
  }
1961
+ }
1914
1962
 
1915
1963
  .tds-radio{
1916
1964
  --tds-radio-font-size:var(--t-font-size-md);
@@ -2095,39 +2143,186 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2095
2143
  content:"*";
2096
2144
  }
2097
2145
 
2098
- .tds-radio-group-fields{
2099
- display:flex;
2100
- flex-direction:column;
2101
- gap:var(--tds-radio-group-gap);
2102
- align-items:flex-start;
2103
- margin-top:var(--t-spacing-1);
2104
- }
2146
+ .tds-radio-group-fields{
2147
+ display:flex;
2148
+ flex-direction:column;
2149
+ gap:var(--tds-radio-group-gap);
2150
+ align-items:flex-start;
2151
+ margin-top:var(--t-spacing-1);
2152
+ }
2153
+
2154
+ .tds-radio-group-description{
2155
+ display:flex;
2156
+ gap:var(--t-spacing-half);
2157
+ align-items:flex-start;
2158
+ margin:var(--t-spacing-fourth) 0 0;
2159
+ font-size:var(--tds-radio-group-description-font-size);
2160
+ line-height:var(--tds-radio-group-description-line-height);
2161
+ color:var(--tds-radio-group-description-color);
2162
+ cursor:text;
2163
+ }
2164
+
2165
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2166
+ display:var(--tds-radio-group-description-invalid-icon-display);
2167
+ flex-shrink:0;
2168
+ margin-top:calc(.5lh - .5em);
2169
+ line-height:var(--tds-radio-group-description-line-height);
2170
+ }
2171
+
2172
+ .tds-radio-group--sm{
2173
+ --tds-radio-group-line-height:1.35;
2174
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2175
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2176
+ --tds-radio-group-description-line-height:1.3;
2177
+ }
2178
+
2179
+ .tds-popover{
2180
+ max-inline-size:24rem;
2181
+ overflow:auto;
2182
+ overscroll-behavior:none;
2183
+ outline:0;
2184
+ scrollbar-color:#0004 var(--t-surface-color-card);
2185
+ scrollbar-width:thin;
2186
+ background:var(--t-surface-color-card);
2187
+ background-clip:padding-box;
2188
+ border:1px solid var(--t-border-color);
2189
+ border-radius:var(--t-border-radius);
2190
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2191
+ }
2192
+
2193
+ @media (prefers-reduced-motion: no-preference){
2194
+ .tds-popover[data-entering]{
2195
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2196
+ }
2197
+
2198
+ .tds-popover[data-exiting]{
2199
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2200
+ }
2201
+
2202
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
2203
+ will-change:opacity, transform;
2204
+ }
2205
+
2206
+ @keyframes tds-popover{
2207
+ from{
2208
+ opacity:0;
2209
+ transform:translateY(-8px);
2210
+ }
2211
+ }
2212
+ }
2213
+
2214
+ .tds-popover-content{
2215
+ display:flex;
2216
+ flex-direction:column;
2217
+ padding:var(--t-spacing-1);
2218
+ outline:0;
2219
+ }
2220
+
2221
+ .tds-input:has(textarea){
2222
+ --tds-input-padding-block:6px;
2223
+ --tds-input-resizer-size:var(--t-element-size-sm);
2224
+ --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");
2225
+ }
2226
+
2227
+ @supports (x: attr(x type(*))){
2228
+
2229
+ .tds-input textarea{
2230
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2231
+ }
2232
+ }
2233
+
2234
+ .tds-input.tds-textarea--resize-vertical textarea{
2235
+ resize:vertical;
2236
+ }
2237
+
2238
+ .tds-input.tds-textarea--resize-none textarea{
2239
+ resize:none;
2240
+ }
2241
+
2242
+ .tds-input.tds-textarea--resize-auto textarea{
2243
+ resize:vertical;
2244
+ }
2245
+
2246
+ @supports (field-sizing: content){
2247
+ .tds-input.tds-textarea--resize-auto textarea{
2248
+ field-sizing:content;
2249
+ resize:none;
2250
+ }
2251
+ }
2252
+
2253
+ .tds-input textarea{
2254
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2255
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2256
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2257
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2258
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2259
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2260
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2261
+ --tds-input-scrollbar-thumb-border-radius:999px;
2262
+ --tds-input-scrollbar-thumb-border-width:3px;
2263
+ --tds-input-scrollbar-track-margin-block:.125rem;
2264
+ scrollbar-color:initial;
2265
+ transition-timing-function:var(--t-ease-in-out);
2266
+ transition-duration:var(--t-duration-200);
2267
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2268
+ }
2269
+
2270
+ @media (pointer: fine){
2271
+ :is(.tds-input textarea)::-webkit-scrollbar{
2272
+ width:12px;
2273
+ height:12px;
2274
+ cursor:default;
2275
+ }
2276
+
2277
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2278
+ cursor:default;
2279
+ background:var(--tds-input-scrollbar-thumb-color);
2280
+ background-clip:content-box;
2281
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2282
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2283
+ }
2284
+
2285
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2286
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2287
+ }
2288
+
2289
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2290
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2291
+ }
2292
+
2293
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2294
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2295
+ }
2296
+
2297
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2298
+ background:var(--tds-input-scrollbar-surface-color);
2299
+ }
2300
+
2301
+ :is(.tds-input textarea)::-webkit-resizer{
2302
+ background:var(--tds-input-resizer-icon) no-repeat;
2303
+ background-position:right bottom;
2304
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2305
+ }
2306
+
2307
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2308
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2309
+ cursor:default;
2310
+ }
2105
2311
 
2106
- .tds-radio-group-description{
2107
- display:flex;
2108
- gap:var(--t-spacing-half);
2109
- align-items:flex-start;
2110
- margin:var(--t-spacing-fourth) 0 0;
2111
- font-size:var(--tds-radio-group-description-font-size);
2112
- line-height:var(--tds-radio-group-description-line-height);
2113
- color:var(--tds-radio-group-description-color);
2114
- cursor:text;
2115
- }
2312
+ @supports (-moz-appearance: none){
2313
+ :is(.tds-input textarea){
2314
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2315
+ scrollbar-width:thin;
2316
+ }
2116
2317
 
2117
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2118
- display:var(--tds-radio-group-description-invalid-icon-display);
2119
- flex-shrink:0;
2120
- margin-top:calc(.5lh - .5em);
2121
- line-height:var(--tds-radio-group-description-line-height);
2318
+ @media (hover){
2319
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2320
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2321
+ }
2322
+ }
2323
+ }
2122
2324
  }
2123
2325
 
2124
- .tds-radio-group--sm{
2125
- --tds-radio-group-line-height:1.35;
2126
- --tds-radio-group-font-size:var(--t-font-size-sm);
2127
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2128
- --tds-radio-group-description-line-height:1.3;
2129
- }
2130
-
2131
2326
  .tds-toggle-switch{
2132
2327
  --tds-toggle-switch-font-size:var(--t-font-size-md);
2133
2328
  --tds-toggle-switch-cursor:pointer;
@@ -2216,251 +2411,56 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2216
2411
  position:relative;
2217
2412
  flex-shrink:0;
2218
2413
  width:var(--tds-toggle-switch-track-width);
2219
- height:var(--tds-toggle-switch-track-height);
2220
- background-color:var(--tds-toggle-switch-track-background-color);
2221
- border-radius:var(--t-border-radius-round);
2222
- transition:var(--tds-toggle-switch-track-transition);
2223
- }
2224
-
2225
- .tds-toggle-switch-track::before{
2226
- position:absolute;
2227
- top:var(--t-spacing-fourth);
2228
- left:var(--t-spacing-fourth);
2229
- width:var(--tds-toggle-switch-thumb-size);
2230
- height:var(--tds-toggle-switch-thumb-size);
2231
- content:"";
2232
- background-color:#fff;
2233
- border-radius:var(--t-border-radius-round);
2234
- transform:var(--tds-toggle-switch-thumb-transform);
2235
- transition:var(--tds-toggle-switch-thumb-transition);
2236
- }
2237
-
2238
- @media (prefers-reduced-motion: reduce){
2239
-
2240
- .tds-toggle-switch-track{
2241
- --tds-toggle-switch-track-transition:none;
2242
- --tds-toggle-switch-thumb-transition:none;
2243
- }
2244
- }
2245
-
2246
- .tds-toggle-switch-description{
2247
- display:flex;
2248
- grid-area:2 / 2;
2249
- align-items:flex-start;
2250
- padding-inline-start:var(--t-spacing-1);
2251
- margin:0;
2252
- font-size:var(--tds-toggle-switch-description-font-size);
2253
- line-height:var(--tds-toggle-switch-description-line-height);
2254
- color:var(--tds-toggle-switch-description-color);
2255
- cursor:text;
2256
- }
2257
-
2258
- .tds-toggle-switch--sm{
2259
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2260
- --tds-toggle-switch-line-height:1.35;
2261
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2262
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2263
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2264
- --tds-toggle-switch-description-line-height:1.3;
2265
- }
2266
-
2267
- .tds-toggle-switch--hide-label{
2268
- --tds-toggle-switch-display:inline-flex;
2269
- }
2270
-
2271
- .tds-checkbox{
2272
- --tds-checkbox-font-size:var(--t-font-size-md);
2273
- --tds-checkbox-cursor:pointer;
2274
- --tds-checkbox-line-height:1.4;
2275
- --tds-checkbox-transition-property:background-color, border-color;
2276
-
2277
- --tds-checkbox-input-size:var(--t-element-size-md);
2278
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
2279
- --tds-checkbox-input-border-color:var(--t-form-border-color);
2280
- --tds-checkbox-input-background-color:var(--t-form-background-color);
2281
-
2282
- --tds-checkbox-input-icon:none;
2283
- --tds-checkbox-input-icon-visibility:hidden;
2284
- --tds-checkbox-input-icon-opacity:0;
2285
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2286
-
2287
- --tds-checkbox-label-color:var(--t-form-color);
2288
-
2289
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
2290
- --tds-checkbox-description-line-height:1.35;
2291
- --tds-checkbox-description-color:var(--t-text-color-secondary);
2292
- --tds-checkbox-description-invalid-icon-display:none;
2293
-
2294
- position:relative;
2295
- display:inline-grid;
2296
- grid-template-columns:auto;
2297
- grid-auto-columns:1fr;
2298
- gap:var(--t-spacing-fourth) 0;
2299
- line-height:var(--tds-checkbox-line-height);
2300
- -webkit-user-select:none;
2301
- -moz-user-select:none;
2302
- user-select:none;
2303
- }
2304
-
2305
- .tds-checkbox label{
2306
- grid-area:1 / 2;
2307
- padding-inline-start:var(--t-spacing-1);
2308
- font-size:var(--tds-checkbox-font-size);
2309
- font-weight:var(--t-font-weight-normal);
2310
- color:var(--tds-checkbox-label-color);
2311
- cursor:var(--tds-checkbox-cursor);
2312
- }
2313
-
2314
- .tds-checkbox tds-indeterminate{
2315
- display:flex;
2316
- }
2317
-
2318
- .tds-checkbox input[type="checkbox"]{
2319
- position:relative;
2320
- width:1em;
2321
- height:1em;
2322
- margin:calc((1lh - 1em) / 2) 0 0;
2323
- font-size:var(--tds-checkbox-font-size);
2324
- line-height:inherit;
2325
- -webkit-appearance:none;
2326
- -moz-appearance:none;
2327
- appearance:none;
2328
- cursor:var(--tds-checkbox-cursor);
2329
- background-color:var(--tds-checkbox-input-background-color);
2330
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
2331
- border-radius:var(--tds-checkbox-input-border-radius);
2332
- transition-timing-function:var(--t-ease-in-out);
2333
- transition-duration:var(--t-duration-200);
2334
- transition-property:var(--tds-checkbox-transition-property);
2335
- }
2336
-
2337
- :is(.tds-checkbox input[type="checkbox"])::before{
2338
- position:absolute;
2339
- top:50%;
2340
- left:50%;
2341
- visibility:var(--tds-checkbox-input-icon-visibility);
2342
- width:100%;
2343
- height:100%;
2344
- content:"";
2345
- background-color:var(--tds-checkbox-input-icon-fill);
2346
- border-radius:var(--tds-checkbox-input-border-radius);
2347
- opacity:var(--tds-checkbox-input-icon-opacity);
2348
- -webkit-mask-image:var(--tds-checkbox-input-icon);
2349
- mask-image:var(--tds-checkbox-input-icon);
2350
- -webkit-mask-repeat:no-repeat;
2351
- mask-repeat:no-repeat;
2352
- -webkit-mask-size:contain;
2353
- mask-size:contain;
2354
- transform:translate(-50%, -50%);
2355
- }
2356
-
2357
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
2358
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2359
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2360
- }
2361
-
2362
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
2363
- outline:var(--t-focus-ring-outline);
2364
- outline-offset:var(--t-focus-ring-offset);
2365
- }
2366
-
2367
- :is(.tds-checkbox input[type="checkbox"]):disabled{
2368
- pointer-events:none;
2369
- }
2370
-
2371
- @media (prefers-reduced-motion: reduce){
2372
-
2373
- .tds-checkbox input[type="checkbox"]{
2374
- --tds-checkbox-transition-property:none;
2375
- }
2376
- }
2377
-
2378
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
2379
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
2380
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
2381
- --tds-checkbox-input-icon-visibility:visible;
2382
- --tds-checkbox-input-icon-opacity:1;
2383
- }
2384
-
2385
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
2386
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
2387
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
2388
- }
2389
-
2390
- .tds-checkbox:has(input:checked){
2391
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2392
- }
2393
-
2394
- .tds-checkbox:has(input:indeterminate){
2395
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2396
- }
2397
-
2398
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
2399
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2400
- --tds-checkbox-description-color:var(--t-text-color-status-error);
2401
- --tds-checkbox-description-invalid-icon-display:inline-block;
2402
- }
2403
-
2404
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
2405
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2406
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
2407
- }
2408
-
2409
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
2410
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
2411
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
2412
- }
2413
-
2414
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
2415
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
2416
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
2417
- }
2418
-
2419
- .tds-checkbox:has(input:required) label::after{
2420
- margin-left:.25ch;
2421
- color:var(--t-text-color-status-error);
2422
- content:"*";
2423
- }
2424
-
2425
- .tds-checkbox:has(input:disabled){
2426
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
2427
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
2414
+ height:var(--tds-toggle-switch-track-height);
2415
+ background-color:var(--tds-toggle-switch-track-background-color);
2416
+ border-radius:var(--t-border-radius-round);
2417
+ transition:var(--tds-toggle-switch-track-transition);
2418
+ }
2428
2419
 
2429
- --tds-checkbox-label-color:var(--t-form-color-disabled);
2430
- --tds-checkbox-description-color:var(--t-form-color-disabled);
2431
- --tds-checkbox-cursor:not-allowed;
2420
+ .tds-toggle-switch-track::before{
2421
+ position:absolute;
2422
+ top:var(--t-spacing-fourth);
2423
+ left:var(--t-spacing-fourth);
2424
+ width:var(--tds-toggle-switch-thumb-size);
2425
+ height:var(--tds-toggle-switch-thumb-size);
2426
+ content:"";
2427
+ background-color:#fff;
2428
+ border-radius:var(--t-border-radius-round);
2429
+ transform:var(--tds-toggle-switch-thumb-transform);
2430
+ transition:var(--tds-toggle-switch-thumb-transition);
2432
2431
  }
2433
2432
 
2434
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
2435
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
2436
- }
2433
+ @media (prefers-reduced-motion: reduce){
2437
2434
 
2438
- .tds-checkbox-description{
2435
+ .tds-toggle-switch-track{
2436
+ --tds-toggle-switch-track-transition:none;
2437
+ --tds-toggle-switch-thumb-transition:none;
2438
+ }
2439
+ }
2440
+
2441
+ .tds-toggle-switch-description{
2439
2442
  display:flex;
2440
2443
  grid-area:2 / 2;
2441
- gap:var(--t-spacing-half);
2442
2444
  align-items:flex-start;
2443
2445
  padding-inline-start:var(--t-spacing-1);
2444
2446
  margin:0;
2445
- font-size:var(--tds-checkbox-description-font-size);
2446
- line-height:var(--tds-checkbox-description-line-height);
2447
- color:var(--tds-checkbox-description-color);
2447
+ font-size:var(--tds-toggle-switch-description-font-size);
2448
+ line-height:var(--tds-toggle-switch-description-line-height);
2449
+ color:var(--tds-toggle-switch-description-color);
2448
2450
  cursor:text;
2449
2451
  }
2450
2452
 
2451
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
2452
- display:var(--tds-checkbox-description-invalid-icon-display);
2453
- flex-shrink:0;
2454
- margin-top:calc(.5lh - .5em);
2455
- line-height:var(--tds-checkbox-description-line-height);
2456
- }
2453
+ .tds-toggle-switch--sm{
2454
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2455
+ --tds-toggle-switch-line-height:1.35;
2456
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2457
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2458
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2459
+ --tds-toggle-switch-description-line-height:1.3;
2460
+ }
2457
2461
 
2458
- .tds-checkbox--sm{
2459
- --tds-checkbox-line-height:1.35;
2460
- --tds-checkbox-input-size:var(--t-element-size-sm);
2461
- --tds-checkbox-font-size:var(--t-font-size-sm);
2462
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
2463
- --tds-checkbox-description-line-height:1.3;
2462
+ .tds-toggle-switch--hide-label{
2463
+ --tds-toggle-switch-display:inline-flex;
2464
2464
  }
2465
2465
 
2466
2466
  .tds-input{
@@ -4156,211 +4156,31 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4156
4156
  [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4157
4157
  [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4158
4158
  [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4159
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4160
-
4161
- [data-padding-block-xl="0"]{ padding-block:0; }
4162
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4163
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4164
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4165
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4166
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4167
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4170
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4172
-
4173
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4174
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4175
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4176
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4177
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4178
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4179
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4180
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4181
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4182
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4183
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4184
- }
4185
-
4186
- .tds-data-table-filters-shelf{
4187
- height:auto;
4188
- overflow:hidden;
4189
- transition:height var(--t-duration-300) var(--t-ease-out);
4190
- }
4191
-
4192
- @media (prefers-reduced-motion: reduce){
4193
-
4194
- .tds-data-table-filters-shelf{
4195
- transition:none;
4196
- }
4197
- }
4198
-
4199
- .tds-data-table-filters-shelf--collapsed{
4200
- height:0;
4201
- transition-timing-function:var(--t-ease-in);
4202
- }
4203
-
4204
- @supports (interpolate-size: allow-keywords){
4205
- .tds-data-table-filters-shelf{
4206
- interpolate-size:allow-keywords;
4207
- }
4208
- }
4209
-
4210
- .tds-data-table-filters{
4211
- padding-block:var(--tds-data-table-cell-padding-block);
4212
- padding-inline:var(--tds-data-table-cell-padding-inline);
4213
- border-top:1px solid var(--tds-data-table-border-color);
4214
- }
4215
-
4216
- .tds-data-table-filters-active{
4217
- display:flex;
4218
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4219
- column-gap:var(--tds-data-table-cell-padding-inline);
4220
- justify-content:space-between;
4221
- }
4222
-
4223
- .tds-data-table-filters-active-list{
4224
- display:flex;
4225
- flex-wrap:wrap;
4226
- gap:var(--t-spacing-half);
4227
- }
4228
-
4229
- .tds-data-table-filters-active-actions{
4230
- flex-shrink:0;
4231
- }
4232
-
4233
- :root{
4234
-
4235
- --_data-table-filter-border-info:hsl(204 96% 89%);
4236
- --_data-table-filter-border-error:hsl(8 60% 85%);
4237
- }
4238
-
4239
- :root[data-color-mode="dark"]{
4240
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4241
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4242
- }
4243
-
4244
- @media (prefers-color-scheme: dark){
4245
- :root[data-color-mode="system"]{
4246
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4247
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4248
- }
4249
- }
4250
-
4251
- .tds-btn-group--data-table-filters-chip button{
4252
- --_chip-border-color:var(--_data-table-filter-border-info);
4253
- --_chip-icon-color:var(--t-icon-color-status-info);
4254
-
4255
- gap:0;
4256
- color:var(--t-text-color-status-info);
4257
- background-color:var(--t-fill-color-status-info-dim);
4258
- border-color:var(--_chip-border-color);
4259
- }
4260
-
4261
- :is(.tds-btn-group--data-table-filters-chip button) svg{
4262
- color:var(--_chip-icon-color);
4263
- transform:scale(.75);
4264
- }
4265
-
4266
- :is(.tds-btn-group--data-table-filters-chip button) span{
4267
- padding-inline:var(--tds-btn-padding-x);
4268
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4269
- transition-timing-function:var(--t-ease-in-out);
4270
- transition-duration:var(--t-duration-200);
4271
- transition-property:border-color;
4272
- }
4273
-
4274
- @media (prefers-reduced-motion: reduce){
4275
-
4276
- :is(.tds-btn-group--data-table-filters-chip button) span{
4277
- transition:none;
4278
- }
4279
- }
4280
-
4281
- :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4282
- padding-inline-start:0;
4283
- }
4284
-
4285
- :is(.tds-btn-group--data-table-filters-chip button) span:last-child{
4286
- padding-inline-end:0;
4287
- border-inline-end-color:transparent;
4288
- }
4289
-
4290
- :is(.tds-btn-group--data-table-filters-chip button):hover,:is(.tds-btn-group--data-table-filters-chip button):active,:is(.tds-btn-group--data-table-filters-chip button):focus{
4291
- color:var(--t-text-color-interaction);
4292
- background-color:var(--t-fill-color-status-info-ghost);
4293
- border-color:var(--_chip-border-color);
4294
- }
4295
-
4296
- .tds-btn-group--data-table-filters-chip-inactive button{
4297
- --_chip-border-color:var(--t-border-color-button-neutral);
4298
- --_chip-icon-color:var(--t-icon-color-status-neutral);
4299
-
4300
- color:var(--t-text-color);
4301
- background-color:var(--t-fill-color-status-neutral-dim);
4302
- }
4303
-
4304
- :is(.tds-btn-group--data-table-filters-chip-inactive button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive button):active,:is(.tds-btn-group--data-table-filters-chip-inactive button):focus{
4305
- color:var(--t-text-color);
4306
- background-color:var(--t-fill-color-status-neutral-ghost);
4307
- }
4308
-
4309
- .tds-btn-group--data-table-filters-chip-invalid button{
4310
- --_chip-border-color:var(--_data-table-filter-border-error);
4311
- --_chip-icon-color:var(--t-icon-color-status-error);
4312
-
4313
- color:var(--t-text-color-status-error);
4314
- background-color:var(--t-fill-color-status-error-dim);
4315
- }
4316
-
4317
- :is(.tds-btn-group--data-table-filters-chip-invalid button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid button):active,:is(.tds-btn-group--data-table-filters-chip-invalid button):focus{
4318
- color:var(--t-text-color-status-error);
4319
- background-color:var(--t-fill-color-status-error-ghost);
4320
- }
4321
- .tds-popover--data-table-filters-popover .tds-popover-content{
4322
- gap:var(--t-spacing-1);
4323
- align-items:start;
4324
- padding:var(--t-spacing-2);
4325
- }
4326
-
4327
- @media (prefers-reduced-motion: no-preference){
4328
- .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4329
- animation-name:tds-data-table-filters-popover;
4330
- }
4331
-
4332
- @keyframes tds-data-table-filters-popover{
4333
- from{
4334
- opacity:0;
4335
- }
4336
- }
4337
- }
4338
-
4339
- .tds-data-table-filters-popover-label{
4340
- font-size:var(--t-font-size-md);
4341
- font-weight:var(--t-font-weight-medium);
4342
- margin-block:0;
4343
- }
4344
-
4345
- .tds-data-table-filters-popover-label-operator{
4346
- font-weight:var(--t-font-weight-normal);
4347
- }
4348
-
4349
- .tds-data-table-filters-popover-description{
4350
- font-size:var(--t-font-size-sm);
4351
- margin-block-start:calc(var(--t-spacing-fourth) * -1);
4352
- margin-block-end:0;
4353
- color:var(--t-text-color-secondary);
4354
- }
4159
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4355
4160
 
4356
- .tds-data-table-filter-controls-badge{
4357
- min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4358
- padding-inline:var(--t-spacing-half);
4359
- font-size:var(--t-font-size-sm);
4360
- color:var(--t-text-color-status-info);
4361
- background-color:var(--t-fill-color-status-info-dim);
4362
- border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4363
- border-radius:var(--t-border-radius-round);
4161
+ [data-padding-block-xl="0"]{ padding-block:0; }
4162
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4163
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4164
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4165
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4166
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4167
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4170
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4172
+
4173
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4174
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4175
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4176
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4177
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4178
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4179
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4180
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4181
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4182
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4183
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4364
4184
  }
4365
4185
 
4366
4186
  .tds-data-table{
@@ -4854,113 +4674,370 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4854
4674
  border:0;
4855
4675
  }
4856
4676
 
4857
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4858
- color:var(--t-form-placeholder-color);
4859
- }
4677
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4678
+ color:var(--t-form-placeholder-color);
4679
+ }
4680
+
4681
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4682
+ color:var(--t-form-placeholder-color);
4683
+ }
4684
+
4685
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-decoration,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-cancel-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-decoration{
4686
+ -webkit-appearance:none;
4687
+ appearance:none;
4688
+ }
4689
+
4690
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4691
+ inline-size:calc(var(--t-font-size-md) * .8);
4692
+ block-size:calc(var(--t-font-size-md) * .8);
4693
+ }
4694
+
4695
+ .tds-data-table-filter-controls-search-input-control .tds-btn{
4696
+ --tds-btn-color:var(--t-icon-color-dim);
4697
+ --tds-btn-padding-truncated-x:0;
4698
+ --_search-input-clear-button-visibility:hidden;
4699
+
4700
+ visibility:var(--_search-input-clear-button-visibility);
4701
+ flex-shrink:0;
4702
+ }
4703
+
4704
+ @media (prefers-reduced-motion: reduce){
4705
+
4706
+ .tds-data-table-filter-controls-search-input-control{
4707
+ transition-property:none;
4708
+ }
4709
+ }
4710
+
4711
+ .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4712
+ --_search-input-clear-button-visibility:visible;
4713
+ }
4714
+
4715
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4716
+ position:sticky;
4717
+ inset-block-start:var(--_label-sticky-block-start);
4718
+ background-color:var(--t-surface-color-card);
4719
+ }
4720
+
4721
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4722
+ scroll-margin-block-start:var(--t-spacing-4);
4723
+ }
4724
+
4725
+ .tds-data-table-filter-controls-list{
4726
+ --_label-sticky-block-start:var(--t-spacing-6);
4727
+
4728
+ margin-block-start:var(--t-spacing-1);
4729
+ }
4730
+
4731
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4732
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
4733
+ }
4734
+
4735
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
4736
+ scroll-margin-block-start:var(--t-spacing-6);
4737
+ }
4738
+
4739
+ .tds-data-table-filter-controls-submenu-list{
4740
+ --_label-sticky-block-start:0;
4741
+ }
4742
+
4743
+ .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4744
+ position:absolute;
4745
+ inset-block-start:calc(-1 * var(--t-spacing-1));
4746
+ inset-inline-start:0;
4747
+ inline-size:100%;
4748
+ block-size:var(--t-spacing-1);
4749
+ content:"";
4750
+ background-color:var(--t-surface-color-card);
4751
+ }
4752
+
4753
+ .tds-data-table-filter-controls-submenu-trigger[data-open]{
4754
+ background:var(--t-fill-color-neutral-070);
4755
+ }
4756
+
4757
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4758
+ inline-size:16rem;
4759
+ }
4760
+
4761
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4762
+ max-block-size:20rem;
4763
+ }
4764
+
4765
+ .tds-data-table-filter-controls-submenu-chevron{
4766
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4767
+
4768
+ color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4769
+ transform:scale(.8);
4770
+ }
4771
+
4772
+ [data-open] .tds-data-table-filter-controls-submenu-chevron{
4773
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4774
+ }
4775
+
4776
+ @media (prefers-reduced-motion: no-preference){
4777
+
4778
+ .tds-data-table-filter-controls-submenu-chevron{
4779
+ transition-timing-function:var(--t-ease-in-out);
4780
+ transition-duration:var(--t-duration-200);
4781
+ transition-property:color;
4782
+ }
4783
+ }
4784
+
4785
+ .tds-data-table-filters-shelf{
4786
+ height:auto;
4787
+ overflow:hidden;
4788
+ transition:height var(--t-duration-300) var(--t-ease-out);
4789
+ }
4790
+
4791
+ @media (prefers-reduced-motion: reduce){
4792
+
4793
+ .tds-data-table-filters-shelf{
4794
+ transition:none;
4795
+ }
4796
+ }
4797
+
4798
+ .tds-data-table-filters-shelf--collapsed{
4799
+ height:0;
4800
+ transition-timing-function:var(--t-ease-in);
4801
+ }
4802
+
4803
+ @supports (interpolate-size: allow-keywords){
4804
+ .tds-data-table-filters-shelf{
4805
+ interpolate-size:allow-keywords;
4806
+ }
4807
+ }
4808
+
4809
+ .tds-data-table-filters{
4810
+ padding-block:var(--tds-data-table-cell-padding-block);
4811
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4812
+ border-top:1px solid var(--tds-data-table-border-color);
4813
+ }
4814
+
4815
+ .tds-data-table-filters-active{
4816
+ display:flex;
4817
+ -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4818
+ column-gap:var(--tds-data-table-cell-padding-inline);
4819
+ justify-content:space-between;
4820
+ }
4821
+
4822
+ .tds-data-table-filters-active-list{
4823
+ display:flex;
4824
+ flex-wrap:wrap;
4825
+ gap:var(--t-spacing-half);
4826
+ }
4827
+
4828
+ .tds-data-table-filters-active-actions{
4829
+ flex-shrink:0;
4830
+ }
4831
+
4832
+ :root{
4833
+
4834
+ --_data-table-filter-border-info:hsl(204 96% 89%);
4835
+ --_data-table-filter-border-error:hsl(8 60% 85%);
4836
+ }
4837
+
4838
+ :root[data-color-mode="dark"]{
4839
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4840
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4841
+ }
4842
+
4843
+ @media (prefers-color-scheme: dark){
4844
+ :root[data-color-mode="system"]{
4845
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4846
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4847
+ }
4848
+ }
4849
+
4850
+ .tds-btn-group--data-table-filters-chip button{
4851
+ --_chip-border-color:var(--_data-table-filter-border-info);
4852
+ --_chip-icon-color:var(--t-icon-color-status-info);
4853
+
4854
+ gap:0;
4855
+ color:var(--t-text-color-status-info);
4856
+ background-color:var(--t-fill-color-status-info-dim);
4857
+ border-color:var(--_chip-border-color);
4858
+ }
4859
+
4860
+ :is(.tds-btn-group--data-table-filters-chip button) svg{
4861
+ color:var(--_chip-icon-color);
4862
+ transform:scale(.75);
4863
+ }
4864
+
4865
+ :is(.tds-btn-group--data-table-filters-chip button) span{
4866
+ padding-inline:var(--tds-btn-padding-x);
4867
+ border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4868
+ transition-timing-function:var(--t-ease-in-out);
4869
+ transition-duration:var(--t-duration-200);
4870
+ transition-property:border-color;
4871
+ }
4872
+
4873
+ @media (prefers-reduced-motion: reduce){
4874
+
4875
+ :is(.tds-btn-group--data-table-filters-chip button) span{
4876
+ transition:none;
4877
+ }
4878
+ }
4879
+
4880
+ :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4881
+ padding-inline-start:0;
4882
+ }
4883
+
4884
+ :is(.tds-btn-group--data-table-filters-chip button) span:last-child{
4885
+ padding-inline-end:0;
4886
+ border-inline-end-color:transparent;
4887
+ }
4888
+
4889
+ :is(.tds-btn-group--data-table-filters-chip button):hover,:is(.tds-btn-group--data-table-filters-chip button):active,:is(.tds-btn-group--data-table-filters-chip button):focus{
4890
+ color:var(--t-text-color-interaction);
4891
+ background-color:var(--t-fill-color-status-info-ghost);
4892
+ border-color:var(--_chip-border-color);
4893
+ }
4894
+
4895
+ .tds-btn-group--data-table-filters-chip-inactive button{
4896
+ --_chip-border-color:var(--t-border-color-button-neutral);
4897
+ --_chip-icon-color:var(--t-icon-color-status-neutral);
4898
+
4899
+ color:var(--t-text-color);
4900
+ background-color:var(--t-fill-color-status-neutral-dim);
4901
+ }
4902
+
4903
+ :is(.tds-btn-group--data-table-filters-chip-inactive button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive button):active,:is(.tds-btn-group--data-table-filters-chip-inactive button):focus{
4904
+ color:var(--t-text-color);
4905
+ background-color:var(--t-fill-color-status-neutral-ghost);
4906
+ }
4860
4907
 
4861
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4862
- color:var(--t-form-placeholder-color);
4863
- }
4908
+ .tds-btn-group--data-table-filters-chip-invalid button{
4909
+ --_chip-border-color:var(--_data-table-filter-border-error);
4910
+ --_chip-icon-color:var(--t-icon-color-status-error);
4864
4911
 
4865
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-decoration,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-cancel-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-decoration{
4866
- -webkit-appearance:none;
4867
- appearance:none;
4868
- }
4912
+ color:var(--t-text-color-status-error);
4913
+ background-color:var(--t-fill-color-status-error-dim);
4914
+ }
4869
4915
 
4870
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4871
- inline-size:calc(var(--t-font-size-md) * .8);
4872
- block-size:calc(var(--t-font-size-md) * .8);
4916
+ :is(.tds-btn-group--data-table-filters-chip-invalid button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid button):active,:is(.tds-btn-group--data-table-filters-chip-invalid button):focus{
4917
+ color:var(--t-text-color-status-error);
4918
+ background-color:var(--t-fill-color-status-error-ghost);
4919
+ }
4920
+ .tds-popover--data-table-filters-popover .tds-popover-content{
4921
+ gap:var(--t-spacing-1);
4922
+ align-items:start;
4923
+ padding:var(--t-spacing-2);
4873
4924
  }
4874
4925
 
4875
- .tds-data-table-filter-controls-search-input-control .tds-btn{
4876
- --tds-btn-color:var(--t-icon-color-dim);
4877
- --tds-btn-padding-truncated-x:0;
4878
- --_search-input-clear-button-visibility:hidden;
4926
+ @media (prefers-reduced-motion: no-preference){
4927
+ .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4928
+ animation-name:tds-data-table-filters-popover;
4929
+ }
4879
4930
 
4880
- visibility:var(--_search-input-clear-button-visibility);
4881
- flex-shrink:0;
4931
+ @keyframes tds-data-table-filters-popover{
4932
+ from{
4933
+ opacity:0;
4934
+ }
4882
4935
  }
4936
+ }
4883
4937
 
4884
- @media (prefers-reduced-motion: reduce){
4938
+ .tds-data-table-filters-popover-label{
4939
+ font-size:var(--t-font-size-md);
4940
+ font-weight:var(--t-font-weight-medium);
4941
+ margin-block:0;
4942
+ }
4885
4943
 
4886
- .tds-data-table-filter-controls-search-input-control{
4887
- transition-property:none;
4944
+ .tds-data-table-filters-popover-label-operator{
4945
+ font-weight:var(--t-font-weight-normal);
4888
4946
  }
4889
- }
4890
4947
 
4891
- .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4892
- --_search-input-clear-button-visibility:visible;
4948
+ .tds-data-table-filters-popover-description{
4949
+ font-size:var(--t-font-size-sm);
4950
+ margin-block-start:calc(var(--t-spacing-fourth) * -1);
4951
+ margin-block-end:0;
4952
+ color:var(--t-text-color-secondary);
4893
4953
  }
4894
4954
 
4895
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4896
- position:sticky;
4897
- inset-block-start:var(--_label-sticky-block-start);
4898
- background-color:var(--t-surface-color-card);
4899
- }
4955
+ .tds-data-table-filter-controls-badge{
4956
+ min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4957
+ padding-inline:var(--t-spacing-half);
4958
+ font-size:var(--t-font-size-sm);
4959
+ color:var(--t-text-color-status-info);
4960
+ background-color:var(--t-fill-color-status-info-dim);
4961
+ border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4962
+ border-radius:var(--t-border-radius-round);
4963
+ }
4900
4964
 
4901
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4902
- scroll-margin-block-start:var(--t-spacing-4);
4903
- }
4965
+ .tds-pane{
4966
+ --tds-pane-background-color:var(--t-surface-color-card);
4967
+ --tds-pane-border-radius:var(--t-border-radius-lg);
4968
+ --tds-pane-border-color:var(--t-border-color);
4904
4969
 
4905
- .tds-data-table-filter-controls-list{
4906
- --_label-sticky-block-start:var(--t-spacing-6);
4970
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
4971
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4907
4972
 
4908
- margin-block-start:var(--t-spacing-1);
4973
+ --tds-pane-title-color:var(--t-text-color-headline);
4974
+ --tds-pane-title-font-size:var(--t-font-size-lg);
4975
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
4976
+ --tds-pane-title-line-height:1.4;
4977
+
4978
+ --tds-pane-body-padding:var(--t-spacing-3);
4979
+
4980
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
4981
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4982
+
4983
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4984
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4985
+
4986
+ background:var(--tds-pane-background-color);
4987
+ border-radius:var(--tds-pane-border-radius);
4988
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
4989
+ display:flex;
4990
+ flex-direction:column;
4909
4991
  }
4910
4992
 
4911
- .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4912
- --tds-dropdown-item-color:var(--t-text-color-secondary);
4913
- }
4993
+ .tds-pane-header{
4994
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4995
+ padding-block:var(--tds-pane-header-padding-block);
4996
+ padding-inline:var(--tds-pane-header-padding-inline);
4997
+ }
4914
4998
 
4915
- .tds-data-table-filter-controls-list .tds-dropdown-item{
4916
- scroll-margin-block-start:var(--t-spacing-6);
4999
+ .tds-pane-header > .tds-helper-shelf-trigger{
5000
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4917
5001
  }
4918
5002
 
4919
- .tds-data-table-filter-controls-submenu-list{
4920
- --_label-sticky-block-start:0;
4921
- }
5003
+ .tds-pane-header > .tds-helper-shelf{
5004
+ flex-basis:100%;
5005
+ order:1;
5006
+ }
4922
5007
 
4923
- .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4924
- position:absolute;
4925
- inset-block-start:calc(-1 * var(--t-spacing-1));
4926
- inset-inline-start:0;
4927
- inline-size:100%;
4928
- block-size:var(--t-spacing-1);
4929
- content:"";
4930
- background-color:var(--t-surface-color-card);
5008
+ .tds-pane-header:has( > .tds-helper-shelf){
5009
+ row-gap:var(--tds-pane-header-padding-block);
5010
+ padding-block-end:0;
4931
5011
  }
4932
5012
 
4933
- .tds-data-table-filter-controls-submenu-trigger[data-open]{
4934
- background:var(--t-fill-color-neutral-070);
4935
- }
5013
+ .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
5014
+ font-size:var(--t-font-size-md);
5015
+ margin-block-end:var(--tds-pane-header-padding-block);
5016
+ }
4936
5017
 
4937
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4938
- inline-size:16rem;
5018
+ .tds-pane-title{
5019
+ color:var(--tds-pane-title-color);
5020
+ font-size:var(--tds-pane-title-font-size);
5021
+ font-weight:var(--tds-pane-title-font-weight);
5022
+ line-height:var(--tds-pane-title-line-height);
5023
+ margin:0;
4939
5024
  }
4940
5025
 
4941
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4942
- max-block-size:20rem;
5026
+ .tds-pane-body{
5027
+ padding:var(--tds-pane-body-padding);
4943
5028
  }
4944
5029
 
4945
- .tds-data-table-filter-controls-submenu-chevron{
4946
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4947
-
4948
- color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4949
- transform:scale(.8);
5030
+ .tds-pane-footer{
5031
+ padding-block-end:var(--tds-pane-footer-padding-block);
5032
+ padding-inline:var(--tds-pane-footer-padding-inline);
4950
5033
  }
4951
5034
 
4952
- [data-open] .tds-data-table-filter-controls-submenu-chevron{
4953
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4954
- }
4955
-
4956
- @media (prefers-reduced-motion: no-preference){
4957
-
4958
- .tds-data-table-filter-controls-submenu-chevron{
4959
- transition-timing-function:var(--t-ease-in-out);
4960
- transition-duration:var(--t-duration-200);
4961
- transition-property:color;
5035
+ .tds-pane-divider{
5036
+ border:0;
5037
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5038
+ margin-block:var(--tds-pane-divider-margin-block);
5039
+ margin-inline:var(--tds-pane-divider-margin-inline);
4962
5040
  }
4963
- }
4964
5041
 
4965
5042
  .tds-segmented-control{
4966
5043
  --tds-segmented-control-font-size:var(--t-font-size-md);
@@ -5086,63 +5163,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5086
5163
  --tds-segmented-control-background-color-disabled:transparent;
5087
5164
  }
5088
5165
 
5089
- .tds-pane{
5090
- --tds-pane-background-color:var(--t-surface-color-card);
5091
- --tds-pane-border-radius:var(--t-border-radius-lg);
5092
- --tds-pane-border-color:var(--t-border-color);
5093
-
5094
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
5095
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5096
-
5097
- --tds-pane-title-color:var(--t-text-color-headline);
5098
- --tds-pane-title-font-size:var(--t-font-size-lg);
5099
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
5100
- --tds-pane-title-line-height:1.4;
5101
-
5102
- --tds-pane-body-padding:var(--t-spacing-3);
5103
-
5104
- --tds-pane-footer-padding-block:var(--t-spacing-2);
5105
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5106
-
5107
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
5108
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5109
-
5110
- background:var(--tds-pane-background-color);
5111
- border-radius:var(--tds-pane-border-radius);
5112
- border:var(--t-border-width) solid var(--tds-pane-border-color);
5113
- display:flex;
5114
- flex-direction:column;
5115
- }
5116
-
5117
- .tds-pane-header{
5118
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5119
- padding-block:var(--tds-pane-header-padding-block);
5120
- padding-inline:var(--tds-pane-header-padding-inline);
5121
- }
5122
-
5123
- .tds-pane-title{
5124
- color:var(--tds-pane-title-color);
5125
- font-size:var(--tds-pane-title-font-size);
5126
- font-weight:var(--tds-pane-title-font-weight);
5127
- line-height:var(--tds-pane-title-line-height);
5128
- margin:0;
5129
- }
5130
-
5131
- .tds-pane-body{
5132
- padding:var(--tds-pane-body-padding);
5133
- }
5134
-
5135
- .tds-pane-footer{
5136
- padding-block-end:var(--tds-pane-footer-padding-block);
5137
- padding-inline:var(--tds-pane-footer-padding-inline);
5138
- }
5139
-
5140
- .tds-pane-divider{
5141
- border:0;
5142
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5143
- margin-block:var(--tds-pane-divider-margin-block);
5144
- margin-inline:var(--tds-pane-divider-margin-inline);
5145
- }
5146
5166
  .search-result-grouping-4F5Lx{
5147
5167
  color:var(--t-text-color-secondary);
5148
5168
  }
@@ -5274,6 +5294,52 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5274
5294
  }
5275
5295
  }
5276
5296
 
5297
+ .tds-helper-shelf{
5298
+ --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5299
+ --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5300
+ --tds-helper-shelf-color:var(--t-text-color);
5301
+ --tds-helper-shelf-font-size:var(--t-font-size-sm);
5302
+ --tds-helper-shelf-padding:var(--t-spacing-1);
5303
+
5304
+ height:0;
5305
+ overflow:hidden;
5306
+ transition:height var(--t-duration-300) var(--t-ease-in);
5307
+ }
5308
+
5309
+ @media (prefers-reduced-motion: reduce){
5310
+
5311
+ .tds-helper-shelf{
5312
+ transition:none;
5313
+ }
5314
+ }
5315
+
5316
+ .tds-helper-shelf--expanded{
5317
+ height:auto;
5318
+ transition-timing-function:var(--t-ease-out);
5319
+ }
5320
+
5321
+ @supports (interpolate-size: allow-keywords){
5322
+ .tds-helper-shelf{
5323
+ interpolate-size:allow-keywords;
5324
+ }
5325
+ }
5326
+
5327
+ .tds-helper-shelf-content{
5328
+ padding:var(--tds-helper-shelf-padding);
5329
+ font-size:var(--tds-helper-shelf-font-size);
5330
+ color:var(--tds-helper-shelf-color);
5331
+ background:var(--tds-helper-shelf-background-color);
5332
+ border-radius:var(--tds-helper-shelf-border-radius);
5333
+ }
5334
+
5335
+ .tds-helper-shelf-trigger{
5336
+ --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5337
+ }
5338
+
5339
+ .tds-helper-shelf-trigger[aria-expanded="true"]{
5340
+ --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5341
+ }
5342
+
5277
5343
  .tds-filterable-list-box:has(input:disabled){
5278
5344
  --tds-filterable-list-box-cursor:not-allowed;
5279
5345
  }