@planningcenter/tapestry 4.9.0-rc.7 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1673 -1673
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1673 -1673
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -677,281 +677,199 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- @layer t-critical{
681
- tds-page-header:not(.hydrated){
682
- display:none;
683
- }
684
- }
680
+ .tds-checkbox{
681
+ --tds-checkbox-font-size:var(--t-font-size-md);
682
+ --tds-checkbox-cursor:pointer;
683
+ --tds-checkbox-line-height:1.4;
684
+ --tds-checkbox-transition-property:background-color, border-color;
685
685
 
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;
686
+ --tds-checkbox-input-size:var(--t-element-size-md);
687
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
689
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
704
690
 
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);
691
+ --tds-checkbox-input-icon:none;
692
+ --tds-checkbox-input-icon-visibility:hidden;
693
+ --tds-checkbox-input-icon-opacity:0;
694
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
707
695
 
708
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
696
+ --tds-checkbox-label-color:var(--t-form-color);
711
697
 
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);
698
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
+ --tds-checkbox-description-line-height:1.35;
700
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
701
+ --tds-checkbox-description-invalid-icon-display:none;
714
702
 
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);
703
+ position:relative;
704
+ display:inline-grid;
705
+ grid-template-columns:auto;
706
+ grid-auto-columns:1fr;
707
+ gap:var(--t-spacing-fourth) 0;
708
+ line-height:var(--tds-checkbox-line-height);
709
+ -webkit-user-select:none;
710
+ -moz-user-select:none;
711
+ user-select:none;
712
+ }
718
713
 
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);
714
+ .tds-checkbox label{
715
+ grid-area:1 / 2;
716
+ padding-inline-start:var(--t-spacing-1);
717
+ font-size:var(--tds-checkbox-font-size);
718
+ font-weight:var(--t-font-weight-normal);
719
+ color:var(--tds-checkbox-label-color);
720
+ cursor:var(--tds-checkbox-cursor);
724
721
  }
725
722
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
723
+ .tds-checkbox tds-indeterminate{
724
+ display:flex;
728
725
  }
729
726
 
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
- }
727
+ .tds-checkbox input[type="checkbox"]{
728
+ position:relative;
729
+ width:1em;
730
+ height:1em;
731
+ margin:calc((1lh - 1em) / 2) 0 0;
732
+ font-size:var(--tds-checkbox-font-size);
733
+ line-height:inherit;
734
+ -webkit-appearance:none;
735
+ -moz-appearance:none;
736
+ appearance:none;
737
+ cursor:var(--tds-checkbox-cursor);
738
+ background-color:var(--tds-checkbox-input-background-color);
739
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
+ border-radius:var(--tds-checkbox-input-border-radius);
741
+ transition-timing-function:var(--t-ease-in-out);
742
+ transition-duration:var(--t-duration-200);
743
+ transition-property:var(--tds-checkbox-transition-property);
735
744
  }
736
745
 
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);
746
+ :is(.tds-checkbox input[type="checkbox"])::before{
747
+ position:absolute;
748
+ top:50%;
749
+ left:50%;
750
+ visibility:var(--tds-checkbox-input-icon-visibility);
751
+ width:100%;
752
+ height:100%;
753
+ content:"";
754
+ background-color:var(--tds-checkbox-input-icon-fill);
755
+ border-radius:var(--tds-checkbox-input-border-radius);
756
+ opacity:var(--tds-checkbox-input-icon-opacity);
757
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
758
+ mask-image:var(--tds-checkbox-input-icon);
759
+ -webkit-mask-repeat:no-repeat;
760
+ mask-repeat:no-repeat;
761
+ -webkit-mask-size:contain;
762
+ mask-size:contain;
763
+ transform:translate(-50%, -50%);
755
764
  }
756
- }
757
- }
758
765
 
759
- .tds-page-header{
760
- display:flex;
761
- flex-direction:column;
762
- padding-top:var(--tds-page-header-padding-y);
763
- color:var(--tds-page-header-color);
764
- background:var(--tds-page-header-background-color);
765
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
766
- }
766
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
769
+ }
767
770
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
771
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
+ outline:var(--t-focus-ring-outline);
773
+ outline-offset:var(--t-focus-ring-offset);
774
+ }
775
+
776
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
777
+ pointer-events:none;
778
+ }
779
+
780
+ @media (prefers-reduced-motion: reduce){
781
+
782
+ .tds-checkbox input[type="checkbox"]{
783
+ --tds-checkbox-transition-property:none;
770
784
  }
785
+ }
771
786
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
787
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
+ --tds-checkbox-input-icon-visibility:visible;
791
+ --tds-checkbox-input-icon-opacity:1;
774
792
  }
775
793
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
794
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
797
+ }
798
+
799
+ .tds-checkbox:has(input:checked){
800
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
778
801
  }
779
802
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
781
- display:flex;
782
- flex-flow:row wrap;
783
- gap:var(--t-spacing-half) var(--t-spacing-1);
784
- align-items:flex-start;
785
- justify-content:flex-start;
786
- min-width:0;
803
+ .tds-checkbox:has(input:indeterminate){
804
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
787
805
  }
788
806
 
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);
807
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
810
+ --tds-checkbox-description-invalid-icon-display:inline-block;
811
+ }
812
+
813
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
797
816
  }
798
817
 
799
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
- position:relative;
801
- display:inline-flex;
802
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
- font-size:var(--t-font-size-sm);
804
- line-height:22px;
805
- color:var(--tds-page-header-nav-item-color);
806
- white-space:nowrap;
807
- text-decoration:none;
808
- -webkit-appearance:none;
809
- -moz-appearance:none;
810
- appearance:none;
811
- cursor:pointer;
812
- outline-offset:-2px;
813
- background-color:var(--tds-page-header-nav-item-background-color);
814
- background-clip:padding-box;
815
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
818
+ :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{
819
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
818
821
  }
819
822
 
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);
823
+ :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){
824
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
825
826
  }
826
827
 
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
- }
828
+ .tds-checkbox:has(input:required) label::after{
829
+ margin-left:.25ch;
830
+ color:var(--t-text-color-status-error);
831
+ content:"*";
832
+ }
833
833
 
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
- }
834
+ .tds-checkbox:has(input:disabled){
835
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
839
837
 
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
- }
847
-
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
- }
838
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
839
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
840
+ --tds-checkbox-cursor:not-allowed;
841
+ }
858
842
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
843
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
861
845
  }
862
846
 
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);
866
- }
867
-
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{
869
- position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
874
- content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
877
- }
878
-
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
- }
883
- }
884
-
885
- .tds-page-header__title-bar{
847
+ .tds-checkbox-description{
886
848
  display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
849
+ grid-area:2 / 2;
850
+ gap:var(--t-spacing-half);
889
851
  align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
892
- }
893
-
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
897
-
898
- .tds-page-header__primary{
899
- width:100%;
900
- }
901
-
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;
909
- }
910
-
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%;
917
- }
918
-
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;
924
- }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
927
- }
928
-
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
931
- }
932
- }
933
-
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;
852
+ padding-inline-start:var(--t-spacing-1);
853
+ margin:0;
854
+ font-size:var(--tds-checkbox-description-font-size);
855
+ line-height:var(--tds-checkbox-description-line-height);
856
+ color:var(--tds-checkbox-description-color);
857
+ cursor:text;
943
858
  }
944
859
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
860
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
+ display:var(--tds-checkbox-description-invalid-icon-display);
862
+ flex-shrink:0;
863
+ margin-top:calc(.5lh - .5em);
864
+ line-height:var(--tds-checkbox-description-line-height);
949
865
  }
950
866
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
954
- }
867
+ .tds-checkbox--sm{
868
+ --tds-checkbox-line-height:1.35;
869
+ --tds-checkbox-input-size:var(--t-element-size-sm);
870
+ --tds-checkbox-font-size:var(--t-font-size-sm);
871
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
+ --tds-checkbox-description-line-height:1.3;
955
873
  }
956
874
 
957
875
  .tds-button-group{
@@ -996,84 +914,113 @@
996
914
  border-end-end-radius:var(--tds-btn-border-radius);
997
915
  }
998
916
 
999
- .tds-checkbox-group{
1000
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1001
- --tds-checkbox-group-line-height:1.4;
1002
- --tds-checkbox-group-gap:var(--t-spacing-1);
1003
-
1004
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1005
- --tds-checkbox-group-description-line-height:1.35;
1006
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1007
- --tds-checkbox-group-description-invalid-icon-display:none;
917
+ .tds-currency-input-control{
1008
918
  display:flex;
1009
- flex-direction:column;
1010
- gap:0;
1011
- padding:0;
1012
- margin:0;
1013
-
1014
- font-size:var(--tds-checkbox-group-font-size);
1015
- line-height:var(--tds-checkbox-group-line-height);
1016
- border:0;
919
+ gap:var(--t-spacing-half);
920
+ align-items:center;
921
+ inline-size:100%;
922
+ min-block-size:var(--tds-field-min-height);
923
+ padding-inline:var(--tds-field-padding-inline);
924
+ font-size:var(--tds-field-font-size);
925
+ color:var(--tds-field-color);
926
+ cursor:text;
927
+ outline:var(--t-focus-ring-width) solid transparent;
928
+ background-color:var(--tds-field-background-color);
929
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
930
+ border-radius:var(--t-form-border-radius);
931
+ transition-timing-function:var(--t-ease-in-out);
932
+ transition-duration:var(--t-duration-200);
933
+ transition-property:background-color, border-color, outline-color, outline-offset;
1017
934
  }
1018
935
 
1019
- .tds-checkbox-group legend{
1020
- float:left;
1021
- padding:0;
1022
- margin:0;
936
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
937
+ border-color:var(--tds-field-border-color-hover);
1023
938
  }
1024
939
 
1025
- .tds-checkbox-group[aria-invalid="true"]{
1026
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1027
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
940
+ .tds-currency-input-control:has(input:focus){
941
+ outline-color:var(--t-focus-ring-color);
942
+ outline-offset:var(--t-focus-ring-offset);
943
+ border-color:var(--tds-field-border-color-active);
1028
944
  }
1029
945
 
1030
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1031
- margin-left:.25ch;
1032
- color:var(--t-text-color-status-error);
1033
- content:"*";
1034
- }
946
+ .tds-currency-input-control input{
947
+ flex:1;
948
+ min-inline-size:0;
949
+ padding:0;
950
+ font-family:inherit;
951
+ font-size:inherit;
952
+ color:inherit;
953
+ -webkit-appearance:none;
954
+ -moz-appearance:none;
955
+ appearance:none;
956
+ outline:0;
957
+ background-color:transparent;
958
+ border:0;
959
+ }
1035
960
 
1036
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1037
- content:none;
961
+ :is(.tds-currency-input-control input)::-moz-placeholder{
962
+ color:var(--tds-field-placeholder-color);
963
+ -moz-user-select:none;
964
+ user-select:none;
1038
965
  }
1039
966
 
1040
- .tds-checkbox-group-fields{
1041
- display:flex;
1042
- flex-direction:column;
1043
- gap:var(--tds-checkbox-group-gap);
1044
- align-items:flex-start;
1045
- margin-top:var(--t-spacing-1);
1046
- }
1047
-
1048
- .tds-checkbox-group-description{
1049
- display:flex;
1050
- gap:var(--t-spacing-half);
1051
- align-items:flex-start;
1052
- margin:var(--t-spacing-fourth) 0 0;
1053
- font-size:var(--tds-checkbox-group-description-font-size);
1054
- line-height:var(--tds-checkbox-group-description-line-height);
1055
- color:var(--tds-checkbox-group-description-color);
1056
- cursor:text;
1057
- }
967
+ :is(.tds-currency-input-control input)::placeholder{
968
+ color:var(--tds-field-placeholder-color);
969
+ -webkit-user-select:none;
970
+ -moz-user-select:none;
971
+ user-select:none;
972
+ }
1058
973
 
1059
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1060
- display:var(--tds-checkbox-group-description-invalid-icon-display);
974
+ .tds-currency-input-control .tds-currency-input-prefix{
1061
975
  flex-shrink:0;
1062
- margin-top:calc(.5lh - .5em);
1063
- line-height:var(--tds-checkbox-group-description-line-height);
976
+ color:var(--t-text-color-secondary);
977
+ pointer-events:none;
978
+ -webkit-user-select:none;
979
+ -moz-user-select:none;
980
+ user-select:none;
1064
981
  }
1065
982
 
1066
- .tds-checkbox-group--sm{
1067
- --tds-checkbox-group-line-height:1.35;
1068
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1069
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1070
- --tds-checkbox-group-description-line-height:1.3;
1071
- }
983
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
984
+ --tds-field-background-color:var(--t-form-background-color-error);
985
+ --tds-field-border-color:var(--t-form-border-color-error);
986
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
987
+ }
1072
988
 
989
+ .tds-currency-input-control:has(:disabled){
990
+ --tds-field-border-color:var(--t-form-border-color-disabled);
991
+ --tds-field-background-color:var(--t-form-background-color-disabled);
992
+ --tds-field-color:var(--t-form-color-disabled);
1073
993
 
1074
- @media (prefers-reduced-motion: no-preference){
994
+ cursor:not-allowed;
995
+ }
1075
996
 
1076
- :root{
997
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
998
+ color:var(--tds-field-color);
999
+ }
1000
+
1001
+ .tds-currency-input-control:has([readonly]){
1002
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1003
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1004
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1005
+ --tds-field-color:var(--t-form-color-readonly);
1006
+ }
1007
+
1008
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1009
+ border-color:var(--t-form-border-color-hover);
1010
+ }
1011
+ .tds-currency-input-currency-name--hidden{
1012
+ position:absolute;
1013
+ width:1px;
1014
+ height:1px;
1015
+ overflow:hidden;
1016
+ white-space:nowrap;
1017
+ clip-path:inset(50%);
1018
+ }
1019
+
1020
+
1021
+ @media (prefers-reduced-motion: no-preference){
1022
+
1023
+ :root{
1077
1024
  interpolate-size:allow-keywords;
1078
1025
  }
1079
1026
  }
@@ -1432,346 +1379,122 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1432
1379
  flex-direction:column;
1433
1380
  }
1434
1381
 
1435
- .tds-checkbox{
1436
- --tds-checkbox-font-size:var(--t-font-size-md);
1437
- --tds-checkbox-cursor:pointer;
1438
- --tds-checkbox-line-height:1.4;
1439
- --tds-checkbox-transition-property:background-color, border-color;
1440
-
1441
- --tds-checkbox-input-size:var(--t-element-size-md);
1442
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1443
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1444
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1445
-
1446
- --tds-checkbox-input-icon:none;
1447
- --tds-checkbox-input-icon-visibility:hidden;
1448
- --tds-checkbox-input-icon-opacity:0;
1449
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1450
-
1451
- --tds-checkbox-label-color:var(--t-form-color);
1382
+ .tds-checkbox-group{
1383
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1384
+ --tds-checkbox-group-line-height:1.4;
1385
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1452
1386
 
1453
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1454
- --tds-checkbox-description-line-height:1.35;
1455
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1456
- --tds-checkbox-description-invalid-icon-display:none;
1387
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1388
+ --tds-checkbox-group-description-line-height:1.35;
1389
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1390
+ --tds-checkbox-group-description-invalid-icon-display:none;
1391
+ display:flex;
1392
+ flex-direction:column;
1393
+ gap:0;
1394
+ padding:0;
1395
+ margin:0;
1457
1396
 
1458
- position:relative;
1459
- display:inline-grid;
1460
- grid-template-columns:auto;
1461
- grid-auto-columns:1fr;
1462
- gap:var(--t-spacing-fourth) 0;
1463
- line-height:var(--tds-checkbox-line-height);
1464
- -webkit-user-select:none;
1465
- -moz-user-select:none;
1466
- user-select:none;
1397
+ font-size:var(--tds-checkbox-group-font-size);
1398
+ line-height:var(--tds-checkbox-group-line-height);
1399
+ border:0;
1467
1400
  }
1468
1401
 
1469
- .tds-checkbox label{
1470
- grid-area:1 / 2;
1471
- padding-inline-start:var(--t-spacing-1);
1472
- font-size:var(--tds-checkbox-font-size);
1473
- font-weight:var(--t-font-weight-normal);
1474
- color:var(--tds-checkbox-label-color);
1475
- cursor:var(--tds-checkbox-cursor);
1476
- }
1477
-
1478
- .tds-checkbox tds-indeterminate{
1479
- display:flex;
1402
+ .tds-checkbox-group legend{
1403
+ float:left;
1404
+ padding:0;
1405
+ margin:0;
1480
1406
  }
1481
1407
 
1482
- .tds-checkbox input[type="checkbox"]{
1483
- position:relative;
1484
- width:1em;
1485
- height:1em;
1486
- margin:calc((1lh - 1em) / 2) 0 0;
1487
- font-size:var(--tds-checkbox-font-size);
1488
- line-height:inherit;
1489
- -webkit-appearance:none;
1490
- -moz-appearance:none;
1491
- appearance:none;
1492
- cursor:var(--tds-checkbox-cursor);
1493
- background-color:var(--tds-checkbox-input-background-color);
1494
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1495
- border-radius:var(--tds-checkbox-input-border-radius);
1496
- transition-timing-function:var(--t-ease-in-out);
1497
- transition-duration:var(--t-duration-200);
1498
- transition-property:var(--tds-checkbox-transition-property);
1408
+ .tds-checkbox-group[aria-invalid="true"]{
1409
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1410
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1499
1411
  }
1500
1412
 
1501
- :is(.tds-checkbox input[type="checkbox"])::before{
1502
- position:absolute;
1503
- top:50%;
1504
- left:50%;
1505
- visibility:var(--tds-checkbox-input-icon-visibility);
1506
- width:100%;
1507
- height:100%;
1508
- content:"";
1509
- background-color:var(--tds-checkbox-input-icon-fill);
1510
- border-radius:var(--tds-checkbox-input-border-radius);
1511
- opacity:var(--tds-checkbox-input-icon-opacity);
1512
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1513
- mask-image:var(--tds-checkbox-input-icon);
1514
- -webkit-mask-repeat:no-repeat;
1515
- mask-repeat:no-repeat;
1516
- -webkit-mask-size:contain;
1517
- mask-size:contain;
1518
- transform:translate(-50%, -50%);
1519
- }
1520
-
1521
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1522
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1523
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1524
- }
1525
-
1526
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1527
- outline:var(--t-focus-ring-outline);
1528
- outline-offset:var(--t-focus-ring-offset);
1413
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1414
+ margin-left:.25ch;
1415
+ color:var(--t-text-color-status-error);
1416
+ content:"*";
1529
1417
  }
1530
1418
 
1531
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1532
- pointer-events:none;
1419
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1420
+ content:none;
1533
1421
  }
1534
1422
 
1535
- @media (prefers-reduced-motion: reduce){
1423
+ .tds-checkbox-group-fields{
1424
+ display:flex;
1425
+ flex-direction:column;
1426
+ gap:var(--tds-checkbox-group-gap);
1427
+ align-items:flex-start;
1428
+ margin-top:var(--t-spacing-1);
1429
+ }
1536
1430
 
1537
- .tds-checkbox input[type="checkbox"]{
1538
- --tds-checkbox-transition-property:none;
1539
- }
1540
- }
1431
+ .tds-checkbox-group-description{
1432
+ display:flex;
1433
+ gap:var(--t-spacing-half);
1434
+ align-items:flex-start;
1435
+ margin:var(--t-spacing-fourth) 0 0;
1436
+ font-size:var(--tds-checkbox-group-description-font-size);
1437
+ line-height:var(--tds-checkbox-group-description-line-height);
1438
+ color:var(--tds-checkbox-group-description-color);
1439
+ cursor:text;
1440
+ }
1541
1441
 
1542
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1543
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1544
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1545
- --tds-checkbox-input-icon-visibility:visible;
1546
- --tds-checkbox-input-icon-opacity:1;
1442
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1443
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1444
+ flex-shrink:0;
1445
+ margin-top:calc(.5lh - .5em);
1446
+ line-height:var(--tds-checkbox-group-description-line-height);
1547
1447
  }
1548
1448
 
1549
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1550
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1551
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1552
- }
1553
-
1554
- .tds-checkbox:has(input:checked){
1555
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1556
- }
1449
+ .tds-checkbox-group--sm{
1450
+ --tds-checkbox-group-line-height:1.35;
1451
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1452
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1453
+ --tds-checkbox-group-description-line-height:1.3;
1454
+ }
1557
1455
 
1558
- .tds-checkbox:has(input:indeterminate){
1559
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1560
- }
1561
1456
 
1562
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1563
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1564
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1565
- --tds-checkbox-description-invalid-icon-display:inline-block;
1566
- }
1457
+ :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{
1458
+ -webkit-appearance:none;
1459
+ appearance:none;
1460
+ }
1567
1461
 
1568
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1569
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1570
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1462
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1463
+ inline-size:1em;
1464
+ block-size:2em;
1571
1465
  }
1572
1466
 
1573
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1574
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1575
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1467
+ [type="file"]:is(.tds-input input){
1468
+ padding-block:var(--t-spacing-half);
1469
+ padding-inline-start:var(--t-spacing-half);
1576
1470
  }
1577
1471
 
1578
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1579
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1580
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1472
+ [type="file"]:is(.tds-input input):not(:disabled){
1473
+ color:var(--t-text-color-secondary);
1581
1474
  }
1582
1475
 
1583
- .tds-checkbox:has(input:required) label::after{
1584
- margin-left:.25ch;
1585
- color:var(--t-text-color-status-error);
1586
- content:"*";
1587
- }
1588
-
1589
- .tds-checkbox:has(input:disabled){
1590
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1591
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1476
+ [type="file"]:is(.tds-input input)::file-selector-button{
1477
+ --_file-btn-padding-block:3px;
1592
1478
 
1593
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1594
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1595
- --tds-checkbox-cursor:not-allowed;
1596
- }
1479
+ padding-block:var(--_file-btn-padding-block);
1480
+ padding-inline:12px;
1481
+ margin-inline-end:12px;
1482
+ font:inherit;
1483
+ 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));
1484
+ color:var(--t-text-color-status-neutral);
1485
+ cursor:pointer;
1486
+ background-color:var(--t-fill-color-button-neutral-solid);
1487
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1488
+ border-radius:var(--t-border-radius-md);
1489
+ transition-timing-function:var(--t-ease-in-out);
1490
+ transition-duration:var(--t-duration-200);
1491
+ transition-property:color, background-color, border-color;
1492
+ }
1597
1493
 
1598
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1599
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1600
- }
1601
-
1602
- .tds-checkbox-description{
1603
- display:flex;
1604
- grid-area:2 / 2;
1605
- gap:var(--t-spacing-half);
1606
- align-items:flex-start;
1607
- padding-inline-start:var(--t-spacing-1);
1608
- margin:0;
1609
- font-size:var(--tds-checkbox-description-font-size);
1610
- line-height:var(--tds-checkbox-description-line-height);
1611
- color:var(--tds-checkbox-description-color);
1612
- cursor:text;
1613
- }
1614
-
1615
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1616
- display:var(--tds-checkbox-description-invalid-icon-display);
1617
- flex-shrink:0;
1618
- margin-top:calc(.5lh - .5em);
1619
- line-height:var(--tds-checkbox-description-line-height);
1620
- }
1621
-
1622
- .tds-checkbox--sm{
1623
- --tds-checkbox-line-height:1.35;
1624
- --tds-checkbox-input-size:var(--t-element-size-sm);
1625
- --tds-checkbox-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-description-line-height:1.3;
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
- }
1494
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1495
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1496
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1497
+ }
1775
1498
 
1776
1499
  [type="file"]:is(.tds-input input):active::file-selector-button{
1777
1500
  background-color:var(--t-fill-color-button-neutral-solid-active);
@@ -1797,74 +1520,199 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1797
1520
  }
1798
1521
  }
1799
1522
 
1800
- .tds-radio{
1801
- --tds-radio-font-size:var(--t-font-size-md);
1802
- --tds-radio-cursor:pointer;
1803
- --tds-radio-line-height:1.4;
1804
- --tds-radio-transition-property:border-width;
1805
-
1806
- --tds-radio-input-size:var(--t-element-size-md);
1807
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1808
- --tds-radio-input-border-color:var(--t-form-border-color);
1809
- --tds-radio-input-border-width:var(--t-form-border-width);
1810
- --tds-radio-input-background-color:var(--t-form-background-color);
1811
-
1812
- --tds-radio-label-color:var(--t-form-color);
1523
+ .tds-radio-group{
1524
+ --tds-radio-group-font-size:var(--t-font-size-md);
1525
+ --tds-radio-group-line-height:1.4;
1526
+ --tds-radio-group-gap:var(--t-spacing-1);
1813
1527
 
1814
- --tds-radio-description-font-size:var(--t-font-size-sm);
1815
- --tds-radio-description-line-height:1.35;
1816
- --tds-radio-description-color:var(--t-text-color-secondary);
1528
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1529
+ --tds-radio-group-description-line-height:1.35;
1530
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1531
+ --tds-radio-group-description-invalid-icon-display:none;
1532
+ display:flex;
1533
+ flex-direction:column;
1534
+ gap:0;
1535
+ padding:0;
1536
+ margin:0;
1817
1537
 
1818
- position:relative;
1819
- display:inline-grid;
1820
- grid-template-columns:auto;
1821
- grid-auto-columns:1fr;
1822
- gap:var(--t-spacing-fourth) 0;
1823
- line-height:var(--tds-radio-line-height);
1824
- -webkit-user-select:none;
1825
- -moz-user-select:none;
1826
- user-select:none;
1538
+ font-size:var(--tds-radio-group-font-size);
1539
+ line-height:var(--tds-radio-group-line-height);
1540
+ border:0;
1827
1541
  }
1828
1542
 
1829
- .tds-radio label{
1830
- grid-area:1 / 2;
1831
- padding-inline-start:var(--t-spacing-1);
1832
- font-size:var(--tds-radio-font-size);
1833
- font-weight:var(--t-font-weight-normal);
1834
- color:var(--tds-radio-label-color);
1835
- cursor:var(--tds-radio-cursor);
1543
+ .tds-radio-group legend{
1544
+ float:left;
1545
+ padding:0;
1546
+ margin:0;
1836
1547
  }
1837
1548
 
1838
- .tds-radio input[type="radio"]{
1839
- position:relative;
1840
- width:1em;
1841
- height:1em;
1842
- margin:calc((1lh - 1em) / 2) 0 0;
1843
- font-size:var(--tds-radio-font-size);
1844
- line-height:inherit;
1845
- -webkit-appearance:none;
1846
- -moz-appearance:none;
1847
- appearance:none;
1848
- cursor:var(--tds-radio-cursor);
1849
- background-color:var(--tds-radio-input-background-color);
1850
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1851
- border-radius:var(--tds-radio-input-border-radius);
1852
- transition-timing-function:var(--t-ease-in-out);
1853
- transition-duration:var(--t-duration-200);
1854
- transition-property:var(--tds-radio-transition-property);
1549
+ .tds-radio-group[aria-invalid="true"]{
1550
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1551
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1855
1552
  }
1856
1553
 
1857
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1858
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1859
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1860
- }
1861
-
1862
- :is(.tds-radio input[type="radio"]):focus-visible{
1863
- outline:var(--t-focus-ring-outline);
1864
- outline-offset:var(--t-focus-ring-offset);
1554
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1555
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1865
1556
  }
1866
1557
 
1867
- :is(.tds-radio input[type="radio"]):disabled{
1558
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1559
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1560
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1561
+ }
1562
+
1563
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1564
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1565
+ }
1566
+
1567
+ .tds-radio-group:has(input:required) legend::after{
1568
+ margin-left:.25ch;
1569
+ color:var(--t-text-color-status-error);
1570
+ content:"*";
1571
+ }
1572
+
1573
+ .tds-radio-group-fields{
1574
+ display:flex;
1575
+ flex-direction:column;
1576
+ gap:var(--tds-radio-group-gap);
1577
+ align-items:flex-start;
1578
+ margin-top:var(--t-spacing-1);
1579
+ }
1580
+
1581
+ .tds-radio-group-description{
1582
+ display:flex;
1583
+ gap:var(--t-spacing-half);
1584
+ align-items:flex-start;
1585
+ margin:var(--t-spacing-fourth) 0 0;
1586
+ font-size:var(--tds-radio-group-description-font-size);
1587
+ line-height:var(--tds-radio-group-description-line-height);
1588
+ color:var(--tds-radio-group-description-color);
1589
+ cursor:text;
1590
+ }
1591
+
1592
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1593
+ display:var(--tds-radio-group-description-invalid-icon-display);
1594
+ flex-shrink:0;
1595
+ margin-top:calc(.5lh - .5em);
1596
+ line-height:var(--tds-radio-group-description-line-height);
1597
+ }
1598
+
1599
+ .tds-radio-group--sm{
1600
+ --tds-radio-group-line-height:1.35;
1601
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1602
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1603
+ --tds-radio-group-description-line-height:1.3;
1604
+ }
1605
+
1606
+ .tds-popover{
1607
+ max-inline-size:24rem;
1608
+ overflow:auto;
1609
+ overscroll-behavior:none;
1610
+ outline:0;
1611
+ scrollbar-color:#0004 var(--t-surface-color-card);
1612
+ scrollbar-width:thin;
1613
+ background:var(--t-surface-color-card);
1614
+ background-clip:padding-box;
1615
+ border:1px solid var(--t-border-color);
1616
+ border-radius:var(--t-border-radius);
1617
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1618
+ }
1619
+
1620
+ @media (prefers-reduced-motion: no-preference){
1621
+ .tds-popover[data-entering]{
1622
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1623
+ }
1624
+
1625
+ .tds-popover[data-exiting]{
1626
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1627
+ }
1628
+
1629
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1630
+ will-change:opacity, transform;
1631
+ }
1632
+
1633
+ @keyframes tds-popover{
1634
+ from{
1635
+ opacity:0;
1636
+ transform:translateY(-8px);
1637
+ }
1638
+ }
1639
+ }
1640
+
1641
+ .tds-popover-content{
1642
+ display:flex;
1643
+ flex-direction:column;
1644
+ padding:var(--t-spacing-1);
1645
+ outline:0;
1646
+ }
1647
+
1648
+ .tds-radio{
1649
+ --tds-radio-font-size:var(--t-font-size-md);
1650
+ --tds-radio-cursor:pointer;
1651
+ --tds-radio-line-height:1.4;
1652
+ --tds-radio-transition-property:border-width;
1653
+
1654
+ --tds-radio-input-size:var(--t-element-size-md);
1655
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1656
+ --tds-radio-input-border-color:var(--t-form-border-color);
1657
+ --tds-radio-input-border-width:var(--t-form-border-width);
1658
+ --tds-radio-input-background-color:var(--t-form-background-color);
1659
+
1660
+ --tds-radio-label-color:var(--t-form-color);
1661
+
1662
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1663
+ --tds-radio-description-line-height:1.35;
1664
+ --tds-radio-description-color:var(--t-text-color-secondary);
1665
+
1666
+ position:relative;
1667
+ display:inline-grid;
1668
+ grid-template-columns:auto;
1669
+ grid-auto-columns:1fr;
1670
+ gap:var(--t-spacing-fourth) 0;
1671
+ line-height:var(--tds-radio-line-height);
1672
+ -webkit-user-select:none;
1673
+ -moz-user-select:none;
1674
+ user-select:none;
1675
+ }
1676
+
1677
+ .tds-radio label{
1678
+ grid-area:1 / 2;
1679
+ padding-inline-start:var(--t-spacing-1);
1680
+ font-size:var(--tds-radio-font-size);
1681
+ font-weight:var(--t-font-weight-normal);
1682
+ color:var(--tds-radio-label-color);
1683
+ cursor:var(--tds-radio-cursor);
1684
+ }
1685
+
1686
+ .tds-radio input[type="radio"]{
1687
+ position:relative;
1688
+ width:1em;
1689
+ height:1em;
1690
+ margin:calc((1lh - 1em) / 2) 0 0;
1691
+ font-size:var(--tds-radio-font-size);
1692
+ line-height:inherit;
1693
+ -webkit-appearance:none;
1694
+ -moz-appearance:none;
1695
+ appearance:none;
1696
+ cursor:var(--tds-radio-cursor);
1697
+ background-color:var(--tds-radio-input-background-color);
1698
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1699
+ border-radius:var(--tds-radio-input-border-radius);
1700
+ transition-timing-function:var(--t-ease-in-out);
1701
+ transition-duration:var(--t-duration-200);
1702
+ transition-property:var(--tds-radio-transition-property);
1703
+ }
1704
+
1705
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1706
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1707
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1708
+ }
1709
+
1710
+ :is(.tds-radio input[type="radio"]):focus-visible{
1711
+ outline:var(--t-focus-ring-outline);
1712
+ outline-offset:var(--t-focus-ring-offset);
1713
+ }
1714
+
1715
+ :is(.tds-radio input[type="radio"]):disabled{
1868
1716
  pointer-events:none;
1869
1717
  }
1870
1718
 
@@ -2093,207 +1941,82 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2093
1941
  }
2094
1942
  }
2095
1943
 
2096
- .tds-radio-group{
2097
- --tds-radio-group-font-size:var(--t-font-size-md);
2098
- --tds-radio-group-line-height:1.4;
2099
- --tds-radio-group-gap:var(--t-spacing-1);
1944
+ .tds-toggle-switch{
1945
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1946
+ --tds-toggle-switch-cursor:pointer;
1947
+ --tds-toggle-switch-display:inline-grid;
1948
+ --tds-toggle-switch-line-height:1.4;
2100
1949
 
2101
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2102
- --tds-radio-group-description-line-height:1.35;
2103
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2104
- --tds-radio-group-description-invalid-icon-display:none;
2105
- display:flex;
2106
- flex-direction:column;
2107
- gap:0;
2108
- padding:0;
2109
- margin:0;
1950
+ --tds-toggle-switch-label-color:var(--t-form-color);
2110
1951
 
2111
- font-size:var(--tds-radio-group-font-size);
2112
- line-height:var(--tds-radio-group-line-height);
2113
- border:0;
1952
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1953
+ --tds-toggle-switch-track-outline:none;
1954
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1955
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1956
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1957
+
1958
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1959
+ --tds-toggle-switch-thumb-transform:translateX(0);
1960
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1961
+
1962
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1963
+ --tds-toggle-switch-description-line-height:1.35;
1964
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1965
+ position:relative;
1966
+
1967
+ display:var(--tds-toggle-switch-display);
1968
+ grid-template-columns:auto;
1969
+ grid-auto-columns:1fr;
1970
+ gap:var(--t-spacing-fourth) 0;
1971
+ -webkit-user-select:none;
1972
+ -moz-user-select:none;
1973
+ user-select:none;
2114
1974
  }
2115
1975
 
2116
- .tds-radio-group legend{
2117
- float:left;
2118
- padding:0;
1976
+ .tds-toggle-switch input[type="checkbox"]{
1977
+ position:absolute;
1978
+ width:var(--tds-toggle-switch-track-width);
1979
+ height:var(--tds-toggle-switch-track-height);
2119
1980
  margin:0;
1981
+ -webkit-appearance:none;
1982
+ -moz-appearance:none;
1983
+ appearance:none;
1984
+ cursor:var(--tds-toggle-switch-cursor);
1985
+ outline:var(--tds-toggle-switch-track-outline);
1986
+ outline-offset:var(--t-focus-ring-offset);
1987
+ background-color:transparent;
1988
+ border:0;
1989
+ border-radius:var(--t-border-radius-round);
2120
1990
  }
2121
1991
 
2122
- .tds-radio-group[aria-invalid="true"]{
2123
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2124
- --tds-radio-group-description-invalid-icon-display:inline-block;
1992
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1993
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1994
+ }
1995
+
1996
+ .tds-toggle-switch label{
1997
+ display:inline-flex;
1998
+ grid-area:1 / 2;
1999
+ padding-inline-start:var(--t-spacing-1);
2000
+ margin-top:-.09375em;
2001
+ font-size:var(--tds-toggle-switch-font-size);
2002
+ font-weight:var(--t-font-weight-normal);
2003
+ line-height:var(--tds-toggle-switch-line-height);
2004
+ color:var(--tds-toggle-switch-label-color);
2005
+ cursor:var(--tds-toggle-switch-cursor);
2125
2006
  }
2126
2007
 
2127
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2128
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2129
- }
2008
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2009
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2010
+ }
2130
2011
 
2131
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2132
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2133
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2134
- }
2012
+ .tds-toggle-switch:has(input:checked){
2013
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2014
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2015
+ }
2135
2016
 
2136
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2137
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2138
- }
2139
-
2140
- .tds-radio-group:has(input:required) legend::after{
2141
- margin-left:.25ch;
2142
- color:var(--t-text-color-status-error);
2143
- content:"*";
2144
- }
2145
-
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-toggle-switch{
2222
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2223
- --tds-toggle-switch-cursor:pointer;
2224
- --tds-toggle-switch-display:inline-grid;
2225
- --tds-toggle-switch-line-height:1.4;
2226
-
2227
- --tds-toggle-switch-label-color:var(--t-form-color);
2228
-
2229
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2230
- --tds-toggle-switch-track-outline:none;
2231
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2232
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2233
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2234
-
2235
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2236
- --tds-toggle-switch-thumb-transform:translateX(0);
2237
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2238
-
2239
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2240
- --tds-toggle-switch-description-line-height:1.35;
2241
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2242
- position:relative;
2243
-
2244
- display:var(--tds-toggle-switch-display);
2245
- grid-template-columns:auto;
2246
- grid-auto-columns:1fr;
2247
- gap:var(--t-spacing-fourth) 0;
2248
- -webkit-user-select:none;
2249
- -moz-user-select:none;
2250
- user-select:none;
2251
- }
2252
-
2253
- .tds-toggle-switch input[type="checkbox"]{
2254
- position:absolute;
2255
- width:var(--tds-toggle-switch-track-width);
2256
- height:var(--tds-toggle-switch-track-height);
2257
- margin:0;
2258
- -webkit-appearance:none;
2259
- -moz-appearance:none;
2260
- appearance:none;
2261
- cursor:var(--tds-toggle-switch-cursor);
2262
- outline:var(--tds-toggle-switch-track-outline);
2263
- outline-offset:var(--t-focus-ring-offset);
2264
- background-color:transparent;
2265
- border:0;
2266
- border-radius:var(--t-border-radius-round);
2267
- }
2268
-
2269
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2270
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2271
- }
2272
-
2273
- .tds-toggle-switch label{
2274
- display:inline-flex;
2275
- grid-area:1 / 2;
2276
- padding-inline-start:var(--t-spacing-1);
2277
- margin-top:-.09375em;
2278
- font-size:var(--tds-toggle-switch-font-size);
2279
- font-weight:var(--t-font-weight-normal);
2280
- line-height:var(--tds-toggle-switch-line-height);
2281
- color:var(--tds-toggle-switch-label-color);
2282
- cursor:var(--tds-toggle-switch-cursor);
2283
- }
2284
-
2285
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2286
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2287
- }
2288
-
2289
- .tds-toggle-switch:has(input:checked){
2290
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2291
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2292
- }
2293
-
2294
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2295
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2296
- }
2017
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2018
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2019
+ }
2297
2020
 
2298
2021
  .tds-toggle-switch:has(input:disabled){
2299
2022
  --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
@@ -2463,66 +2186,343 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2463
2186
  }
2464
2187
  }
2465
2188
 
2466
- .tds-input{
2467
- --tds-input-border-color:var(--t-form-border-color);
2468
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2469
- --tds-input-background-color:var(--t-form-background-color);
2470
- --tds-input-color:var(--t-form-color);
2471
- --tds-input-font-size:var(--t-font-size-md);
2472
- --tds-input-description-color:var(--t-text-color-secondary);
2473
- --tds-input-description-invalid-icon-display:none;
2474
- --tds-input-min-height:var(--t-container-size-md);
2475
- --tds-input-padding-inline:var(--t-spacing-1);
2189
+ @layer t-critical{
2190
+ tds-page-header:not(.hydrated){
2191
+ display:none;
2192
+ }
2193
+ }
2476
2194
 
2477
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2195
+ @layer t-component{
2196
+ .tds-page-header{
2197
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2198
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2199
+ --tds-page-header-color:var(--t-text-color);
2200
+ --tds-page-header-bottom-border-color:transparent;
2201
+ --tds-page-header-headline-color:var(--t-text-color-headline);
2202
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2203
+ --tds-page-header-padding-x:var(--t-spacing-2);
2204
+ --tds-page-header-padding-y:var(--t-spacing-2);
2205
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2206
+ --tds-page-header-nav-gap:var(--t-spacing-1);
2207
+ --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%);
2208
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2209
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2210
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2211
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2212
+ --tds-page-header-nav-item-border-width:1px;
2478
2213
 
2479
- display:flex;
2480
- flex-direction:column;
2481
- gap:var(--t-spacing-half);
2482
- }
2214
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2215
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2483
2216
 
2484
- .tds-input label{
2485
- font-size:var(--t-font-size-md);
2486
- font-weight:var(--t-font-weight-normal);
2487
- color:var(--t-text-color);
2488
- }
2217
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
2218
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2219
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2489
2220
 
2490
- .tds-input :is(input,textarea){
2491
- inline-size:100%;
2492
- block-size:auto;
2493
- min-block-size:var(--tds-input-min-height);
2494
- padding-block:var(--tds-input-padding-block);
2495
- padding-inline:var(--tds-input-padding-inline);
2496
- font-family:inherit;
2497
- font-size:var(--tds-input-font-size);
2498
- color:var(--tds-input-color);
2499
- -webkit-appearance:none;
2500
- -moz-appearance:none;
2501
- appearance:none;
2502
- outline:var(--t-focus-ring-width) solid transparent;
2503
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2504
- outline-offset:0;
2505
- background-color:var(--tds-input-background-color);
2506
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2507
- border-radius:var(--t-form-border-radius);
2508
- transition-timing-function:var(--t-ease-in-out);
2509
- transition-duration:var(--t-duration-200);
2510
- transition-property:var(--tds-input-transition-property);
2221
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2222
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2223
+
2224
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2225
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2226
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2227
+
2228
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
2229
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2230
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2231
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2232
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2511
2233
  }
2512
2234
 
2513
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2514
- border-color:var(--tds-input-border-color-hover);
2515
- }
2235
+ .tds-page-header--profile{
2236
+ --tds-page-header-padding-y:20px;
2237
+ }
2516
2238
 
2517
- :is(.tds-input :is(input,textarea)):focus{
2518
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2239
+ @supports (color: light-dark(#fff, #000)){
2240
+ .tds-page-header{
2241
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2242
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2519
2243
  }
2244
+ }
2520
2245
 
2521
- :is(.tds-input :is(input,textarea)):focus-visible{
2522
- outline-color:var(--t-focus-ring-color);
2523
- outline-offset:var(--t-focus-ring-offset);
2524
- border-color:var(--t-form-border-color-focus);
2525
- }
2246
+ @media (min-width: 600px){
2247
+ .tds-page-header{
2248
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
2249
+ --tds-page-header-color:var(--t-text-color-secondary);
2250
+ --tds-page-header-bottom-border-color:var(--t-border-color);
2251
+ --tds-page-header-padding-x:var(--t-spacing-3);
2252
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2253
+ --tds-page-header-nav-gap:var(--t-spacing-half);
2254
+ --tds-page-header-nav-background:transparent;
2255
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2256
+ --tds-page-header-nav-item-border-width:1px;
2257
+ --tds-page-header-nav-item-color:var(--t-text-color);
2258
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2259
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2260
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2261
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2262
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2263
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2264
+ }
2265
+ }
2266
+ }
2267
+
2268
+ .tds-page-header{
2269
+ display:flex;
2270
+ flex-direction:column;
2271
+ padding-top:var(--tds-page-header-padding-y);
2272
+ color:var(--tds-page-header-color);
2273
+ background:var(--tds-page-header-background-color);
2274
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2275
+ }
2276
+
2277
+ .tds-page-header:not(.has-nav){
2278
+ padding-bottom:var(--tds-page-header-padding-y);
2279
+ }
2280
+
2281
+ .tds-page-header.inactive{
2282
+ background:var(--tds-page-header-background-color-inactive);
2283
+ }
2284
+
2285
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2286
+ width:100%;
2287
+ }
2288
+
2289
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2290
+ display:flex;
2291
+ flex-flow:row wrap;
2292
+ gap:var(--t-spacing-half) var(--t-spacing-1);
2293
+ align-items:flex-start;
2294
+ justify-content:flex-start;
2295
+ min-width:0;
2296
+ }
2297
+
2298
+ :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{
2299
+ display:flex;
2300
+ gap:var(--tds-page-header-nav-gap);
2301
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2302
+ margin:0 0 -1px;
2303
+ overflow:auto;
2304
+ list-style:none;
2305
+ background:var(--tds-page-header-nav-background);
2306
+ }
2307
+
2308
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2309
+ position:relative;
2310
+ display:inline-flex;
2311
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2312
+ font-size:var(--t-font-size-sm);
2313
+ line-height:22px;
2314
+ color:var(--tds-page-header-nav-item-color);
2315
+ white-space:nowrap;
2316
+ text-decoration:none;
2317
+ -webkit-appearance:none;
2318
+ -moz-appearance:none;
2319
+ appearance:none;
2320
+ cursor:pointer;
2321
+ outline-offset:-2px;
2322
+ background-color:var(--tds-page-header-nav-item-background-color);
2323
+ background-clip:padding-box;
2324
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2325
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2326
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2327
+ }
2328
+
2329
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2330
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2331
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2332
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2333
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2334
+ }
2335
+
2336
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2337
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2338
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2339
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2340
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2341
+ }
2342
+
2343
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2344
+ background-color:var(--tds-page-header-nav-item-background-color-active);
2345
+ border-color:var(--tds-page-header-nav-item-border-color-active);
2346
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2347
+ }
2348
+
2349
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2350
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2351
+ color:var(--tds-page-header-nav-item-color-disabled);
2352
+ cursor:not-allowed;
2353
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
2354
+ opacity:1;
2355
+ }
2356
+
2357
+ @media (min-width: 600px){
2358
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2359
+ position:absolute;
2360
+ inset:auto -1px -1px;
2361
+ height:1px;
2362
+ pointer-events:none;
2363
+ content:"";
2364
+ background-color:var(--tds-page-header-bottom-border-color);
2365
+ }
2366
+ }
2367
+
2368
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2369
+ position:relative;
2370
+ }
2371
+
2372
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2373
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2374
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2375
+ }
2376
+
2377
+ :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{
2378
+ position:absolute;
2379
+ top:-5px;
2380
+ right:-2px;
2381
+ width:10px;
2382
+ height:10px;
2383
+ content:"";
2384
+ background:var(--tds-page-header-nav-item-indicator-color);
2385
+ border-radius:50%;
2386
+ }
2387
+
2388
+ @media (prefers-reduced-motion: no-preference){
2389
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2390
+ animation:indicator-pulse 1.25s ease infinite;
2391
+ }
2392
+ }
2393
+
2394
+ .tds-page-header__title-bar{
2395
+ display:flex;
2396
+ flex-direction:column;
2397
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2398
+ align-items:flex-start;
2399
+ justify-content:space-between;
2400
+ padding:0 var(--tds-page-header-padding-x);
2401
+ }
2402
+
2403
+ .tds-page-header--profile > .tds-page-header__title-bar{
2404
+ align-items:center;
2405
+ }
2406
+
2407
+ .tds-page-header__primary{
2408
+ width:100%;
2409
+ }
2410
+
2411
+ .tds-page-header__primary h1{
2412
+ margin:0;
2413
+ font-size:var(--tds-page-header-headline-font-size);
2414
+ font-weight:var(--t-font-weight-normal);
2415
+ line-height:32px;
2416
+ color:var(--tds-page-header-headline-color);
2417
+ overflow-wrap:break-word;
2418
+ }
2419
+
2420
+ @media (min-width: 960px){
2421
+ .tds-page-header__primary{
2422
+ flex:1 1 max-content;
2423
+ width:auto;
2424
+ min-width:0;
2425
+ max-width:100%;
2426
+ }
2427
+
2428
+ .tds-page-header__title-bar,
2429
+ .tds-page-header--profile .tds-page-header__title-bar{
2430
+ flex-flow:row nowrap;
2431
+ row-gap:12px;
2432
+ align-items:flex-start;
2433
+ }
2434
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2435
+ width:auto;
2436
+ }
2437
+
2438
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2439
+ justify-content:flex-end;
2440
+ }
2441
+ }
2442
+
2443
+ .tds-page-header-phone,
2444
+ .tds-page-header-email{
2445
+ color:var(--tds-page-header-color);
2446
+ white-space:nowrap;
2447
+ }
2448
+ .tds-page-header-email{
2449
+ max-width:100%;
2450
+ overflow:hidden;
2451
+ text-overflow:ellipsis;
2452
+ }
2453
+
2454
+ @keyframes indicator-pulse{
2455
+ 0%{
2456
+ opacity:.3;
2457
+ transform:scale(.9);
2458
+ }
2459
+
2460
+ 100%{
2461
+ opacity:0;
2462
+ transform:scale(1.75);
2463
+ }
2464
+ }
2465
+
2466
+ .tds-input{
2467
+ --tds-input-border-color:var(--t-form-border-color);
2468
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
2469
+ --tds-input-background-color:var(--t-form-background-color);
2470
+ --tds-input-color:var(--t-form-color);
2471
+ --tds-input-font-size:var(--t-font-size-md);
2472
+ --tds-input-description-color:var(--t-text-color-secondary);
2473
+ --tds-input-description-invalid-icon-display:none;
2474
+ --tds-input-min-height:var(--t-container-size-md);
2475
+ --tds-input-padding-inline:var(--t-spacing-1);
2476
+
2477
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2478
+
2479
+ display:flex;
2480
+ flex-direction:column;
2481
+ gap:var(--t-spacing-half);
2482
+ }
2483
+
2484
+ .tds-input label{
2485
+ font-size:var(--t-font-size-md);
2486
+ font-weight:var(--t-font-weight-normal);
2487
+ color:var(--t-text-color);
2488
+ }
2489
+
2490
+ .tds-input :is(input,textarea){
2491
+ inline-size:100%;
2492
+ block-size:auto;
2493
+ min-block-size:var(--tds-input-min-height);
2494
+ padding-block:var(--tds-input-padding-block);
2495
+ padding-inline:var(--tds-input-padding-inline);
2496
+ font-family:inherit;
2497
+ font-size:var(--tds-input-font-size);
2498
+ color:var(--tds-input-color);
2499
+ -webkit-appearance:none;
2500
+ -moz-appearance:none;
2501
+ appearance:none;
2502
+ outline:var(--t-focus-ring-width) solid transparent;
2503
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2504
+ outline-offset:0;
2505
+ background-color:var(--tds-input-background-color);
2506
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2507
+ border-radius:var(--t-form-border-radius);
2508
+ transition-timing-function:var(--t-ease-in-out);
2509
+ transition-duration:var(--t-duration-200);
2510
+ transition-property:var(--tds-input-transition-property);
2511
+ }
2512
+
2513
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2514
+ border-color:var(--tds-input-border-color-hover);
2515
+ }
2516
+
2517
+ :is(.tds-input :is(input,textarea)):focus{
2518
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2519
+ }
2520
+
2521
+ :is(.tds-input :is(input,textarea)):focus-visible{
2522
+ outline-color:var(--t-focus-ring-color);
2523
+ outline-offset:var(--t-focus-ring-offset);
2524
+ border-color:var(--t-form-border-color-focus);
2525
+ }
2526
2526
 
2527
2527
  :is(.tds-input :is(input,textarea))::-moz-placeholder{
2528
2528
  color:var(--t-form-placeholder-color);
@@ -4167,877 +4167,800 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4167
4167
  [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
4168
  [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
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{
4187
- --tds-data-table-background-color:var(--t-surface-color-canvas);
4188
- --tds-data-table-border-color:var(--t-border-color);
4189
- --tds-data-table-column-background-color:var(--t-fill-color-neutral-080);
4190
- --tds-data-table-cell-padding-inline:var(--t-spacing-2);
4191
- --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
4192
- }
4193
- .tds-data-table-frame{
4194
- overflow:hidden;
4195
-
4196
- border:1px solid var(--tds-data-table-border-color);
4197
- border-radius:var(--t-border-radius);
4198
- }
4199
- .tds-data-table-frame-header{
4200
- display:flex;
4201
- gap:var(--t-spacing-1-half);
4202
- align-items:center;
4203
- padding-block:var(--tds-data-table-cell-padding-block);
4204
- padding-inline:var(--tds-data-table-cell-padding-inline);
4205
- }
4206
- .tds-data-table-frame-header-controls{
4207
- display:flex;
4208
- gap:var(--t-spacing-1-half);
4209
- align-items:center;
4210
- margin-inline-start:auto;
4211
- }
4212
- .tds-data-table-frame-footer{
4213
- padding-block:var(--tds-data-table-cell-padding-block);
4214
- padding-inline:var(--tds-data-table-cell-padding-inline);
4215
- border-top:1px solid var(--tds-data-table-border-color);
4216
- }
4217
- .tds-data-table-select-all-banner{
4218
- display:flex;
4219
- flex-wrap:wrap;
4220
- gap:var(--t-spacing-1);
4221
- align-items:baseline;
4222
- justify-content:center;
4223
- padding-block:var(--tds-data-table-cell-padding-block);
4224
- padding-inline:var(--tds-data-table-cell-padding-inline);
4225
- font-size:var(--t-font-size-md);
4226
- background-color:var(--tds-data-table-column-background-color);
4227
- }
4228
- .tds-data-table-select-all-banner:not(:first-child){
4229
- border-top:1px solid var(--tds-data-table-border-color);
4230
- }
4231
-
4232
- .tds-data-table-select-all-banner-message{
4233
- margin:0;
4234
- color:var(--t-text-color-secondary);
4235
- }
4236
-
4237
-
4238
- .tds-data-table-results-count{
4239
- margin:0;
4240
- font-size:var(--t-font-size-md);
4241
- line-height:1;
4242
- color:var(--t-text-color-secondary);
4243
- }
4244
- .tds-data-table-scroll-wrapper{
4245
- position:relative;
4246
- overflow:hidden;
4247
- background-color:var(--tds-data-table-column-background-color);
4248
- }
4249
- .tds-data-table-scroll-wrapper:not(:first-child){
4250
- border-top:1px solid var(--tds-data-table-border-color);
4251
- }
4252
- .tds-data-table-scroll{
4253
- overflow-x:auto;
4254
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4255
- }
4256
- @supports (animation-timeline: scroll()){
4257
- .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
4258
- overflow:clip;
4259
- }
4260
-
4261
- .tds-data-table--sticky-header .tds-data-table-scroll{
4262
- overflow-y:clip;
4263
- }
4264
-
4265
- .tds-data-table--sticky-header .tds-data-table-header{
4266
- z-index:1;
4267
- animation-name:tds-data-table-sticky-header;
4268
- animation-duration:auto;
4269
- animation-timing-function:linear;
4270
- animation-fill-mode:both;
4271
- animation-timeline:--_sticky-header-scroll;
4272
- animation-range:var(--_sticky-header-scroll-start, 0) calc(var(--_sticky-header-scroll-start, 0) + var(--_sticky-header-scroll-max, 0));
4273
- }
4274
-
4275
- @keyframes tds-data-table-sticky-header{
4276
- from{ transform:translateY(0); }
4277
- to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
4278
- }
4279
- }
4280
- @supports (timeline-scope: --tds){
4281
- .tds-data-table-scroll-wrapper{
4282
- --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
4283
-
4284
- timeline-scope:--tds-data-table-scroll-timeline;
4285
- }
4286
- .tds-data-table-scroll-wrapper:has(.tds-data-table-column--actions)::after{
4287
- content:none;
4288
- }
4289
-
4290
- .tds-data-table-scroll{
4291
- scroll-timeline:--tds-data-table-scroll-timeline inline;
4292
- }
4293
- .tds-data-table-scroll-wrapper::before,
4294
- .tds-data-table-scroll-wrapper::after,
4295
- .tds-data-table-column--actions::before,
4296
- .tds-data-table-cell--actions::before{
4297
- position:absolute;
4298
- inset-block:0;
4299
- z-index:1;
4300
- width:var(--tds-data-table-scroll-shadow-size);
4301
- pointer-events:none;
4302
- content:"";
4303
- opacity:0;
4304
- animation-name:tds-data-table-scroll-shadow;
4305
- animation-duration:auto;
4306
- animation-timeline:--tds-data-table-scroll-timeline;
4307
- animation-timing-function:linear;
4308
- animation-fill-mode:both;
4309
- }
4310
-
4311
- .tds-data-table-scroll-wrapper::before{
4312
- inset-inline-start:0;
4313
- background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4314
- animation-range:0 var(--tds-data-table-scroll-shadow-size);
4315
- }
4316
-
4317
- .tds-data-table-scroll-wrapper::after,
4318
- .tds-data-table-column--actions::before,
4319
- .tds-data-table-cell--actions::before{
4320
- background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4321
- animation-direction:reverse;
4322
- animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
4323
- }
4324
-
4325
- .tds-data-table-scroll-wrapper::after{
4326
- inset-inline-end:0;
4327
- }
4328
-
4329
- .tds-data-table-column--actions::before,
4330
- .tds-data-table-cell--actions::before{
4331
- inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
4332
- }
4333
-
4334
- @keyframes tds-data-table-scroll-shadow{
4335
- from{ opacity:0; }
4336
- to{ opacity:1; }
4337
- }
4338
- }
4339
- .tds-data-table-grid{
4340
- width:100%;
4341
- font-size:var(--t-font-size-md);
4342
- color:var(--t-text-color);
4343
- border-spacing:0;
4344
- border-collapse:separate;
4345
- background-color:var(--tds-data-table-background-color);
4346
- }
4347
- .tds-data-table-grid th,.tds-data-table-grid td{
4348
- white-space:nowrap;
4349
- }
4350
- .tds-data-table-column{
4351
- padding:var(--tds-data-table-cell-padding-block);
4352
- padding-inline:var(--tds-data-table-cell-padding-inline);
4353
- font-weight:var(--t-font-weight-medium);
4354
- color:var(--t-text-color-secondary);
4355
- cursor:default;
4356
- background-color:var(--tds-data-table-column-background-color);
4357
- border-top:0;
4358
- border-bottom:1px solid var(--tds-data-table-border-color);
4359
- }
4360
- .tds-data-table-column[data-allows-sorting="true"]{
4361
- --_sort-icon-color:var(--t-text-color-disabled);
4362
- --_sort-icon-opacity:.5;
4363
- --_sort-icon-rotate:0;
4364
- cursor:pointer;
4365
- }
4366
- .tds-data-table-column[data-allows-sorting="true"][data-hovered]{
4367
- --_sort-icon-opacity:1;
4368
- }
4369
- .tds-data-table-column[data-sort-direction]{
4370
- --_sort-icon-color:inherit;
4371
- --_sort-icon-opacity:1;
4372
- }
4373
- .tds-data-table-column[data-sort-direction="descending"]{
4374
- --_sort-icon-rotate:.5turn;
4375
- }
4376
-
4377
- .tds-data-table-column-icon{
4378
- margin-inline-start:var(--t-spacing-1);
4379
- }
4380
- .tds-data-table-column-icon--sort{
4381
- color:var(--_sort-icon-color);
4382
- opacity:var(--_sort-icon-opacity);
4383
- transform:translateY(1px) rotate(var(--_sort-icon-rotate));
4384
- transition-timing-function:var(--t-ease-in-out);
4385
- transition-duration:var(--t-duration-300);
4386
- transition-property:color, opacity, transform;
4387
- }
4388
-
4389
- .tds-data-table-column-label--hidden,
4390
- .tds-data-table-cell-label--hidden,
4391
- .tds-data-table-results-count-label--hidden,
4392
- .tds-data-table-filter-controls-label--hidden{
4393
- position:absolute;
4394
- width:1px;
4395
- height:1px;
4396
- overflow:hidden;
4397
- white-space:nowrap;
4398
- clip-path:inset(50%);
4399
- }
4400
- .tds-data-table-cell{
4401
- padding:var(--tds-data-table-cell-padding-block);
4402
- padding-inline:var(--tds-data-table-cell-padding-inline);
4403
- border-bottom:1px solid var(--tds-data-table-border-color);
4404
- }
4405
- .tds-data-table-row:last-of-type .tds-data-table-cell{
4406
- border-bottom-width:0;
4407
- }
4408
- .tds-data-table-row--interactive{
4409
- --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4410
- cursor:default;
4411
- transition:background-color var(--t-duration-100) var(--t-ease-in-out);
4412
- }
4413
- .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
4414
- background-color:var(--tds-data-table-row-background-hover);
4415
- }
4416
- .tds-data-table-row--interactive[data-focus-visible]{
4417
- outline:var(--t-focus-ring-outline);
4418
- outline-offset:calc(-1 * var(--t-focus-ring-width));
4419
- }
4170
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4420
4172
 
4421
- .tds-data-table-empty{
4422
- padding:var(--tds-data-table-cell-padding-block);
4423
- padding-inline:var(--tds-data-table-cell-padding-inline);
4424
- text-align:center;
4425
- white-space:normal;
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); }
4426
4184
  }
4427
4185
 
4428
- .tds-data-table-loading{
4429
- display:flex;
4430
- align-items:center;
4431
- justify-content:center;
4432
- padding:var(--tds-data-table-cell-padding-block);
4433
- padding-inline:var(--tds-data-table-cell-padding-inline);
4186
+ .tds-data-table-filters-shelf{
4187
+ height:auto;
4188
+ overflow:hidden;
4189
+ transition:height var(--t-duration-300) var(--t-ease-out);
4434
4190
  }
4435
4191
 
4436
- @keyframes tds-data-table-loading-fade-in{
4437
- from{
4438
- opacity:0;
4439
- }
4192
+ @media (prefers-reduced-motion: reduce){
4440
4193
 
4441
- to{
4442
- opacity:1;
4443
- }
4194
+ .tds-data-table-filters-shelf{
4195
+ transition:none;
4444
4196
  }
4445
- .tds-data-table-loading-spinner{
4446
- --tds-loading-spinner-size:48px;
4447
- --tds-loading-spinner-track-width:6px;
4448
- --tds-loading-spinner-visibility:visible;
4449
- --tds-loading-spinner-animation-play-state:running;
4197
+ }
4450
4198
 
4451
- position:relative;
4452
- display:block;
4453
- width:var(--tds-loading-spinner-size);
4454
- height:var(--tds-loading-spinner-size);
4455
- margin-block:min(calc(var(--tds-loading-spinner-size) * 1.25), 25vh);
4456
- opacity:0;
4457
- animation-name:tds-data-table-loading-fade-in;
4458
- animation-duration:1s;
4459
- animation-timing-function:ease-in-out;
4460
- animation-fill-mode:forwards;
4199
+ .tds-data-table-filters-shelf--collapsed{
4200
+ height:0;
4201
+ transition-timing-function:var(--t-ease-in);
4461
4202
  }
4462
- .tds-data-table-loading-spinner .tds-loading-spinner{
4463
- inset:0;
4464
- }
4465
- @media (prefers-reduced-motion: reduce){
4466
- .tds-data-table-loading-spinner{
4467
- --tds-loading-spinner-animation-play-state:paused;
4468
4203
 
4469
- opacity:1;
4470
- animation:none;
4204
+ @supports (interpolate-size: allow-keywords){
4205
+ .tds-data-table-filters-shelf{
4206
+ interpolate-size:allow-keywords;
4471
4207
  }
4472
4208
  }
4473
- .tds-data-table-column,
4474
- .tds-data-table-cell{
4475
- text-align:start;
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);
4476
4214
  }
4477
4215
 
4478
- .tds-data-table-column--align-center,
4479
- .tds-data-table-cell--align-center{
4480
- text-align:center;
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;
4481
4221
  }
4482
4222
 
4483
- .tds-data-table-column--align-end,
4484
- .tds-data-table-cell--align-end{
4485
- text-align:end;
4223
+ .tds-data-table-filters-active-list{
4224
+ display:flex;
4225
+ flex-wrap:wrap;
4226
+ gap:var(--t-spacing-half);
4486
4227
  }
4487
4228
 
4488
- .tds-data-table-cell--numeric{
4489
- font-variant-numeric:tabular-nums;
4229
+ .tds-data-table-filters-active-actions{
4230
+ flex-shrink:0;
4490
4231
  }
4491
4232
 
4492
- .tds-data-table-column--selectable,
4493
- .tds-data-table-cell--selectable{
4494
- width:var(--t-element-size-md);
4495
- text-align:center;
4233
+ :root{
4234
+
4235
+ --_data-table-filter-border-info:hsl(204 96% 89%);
4236
+ --_data-table-filter-border-error:hsl(8 60% 85%);
4496
4237
  }
4497
- .tds-data-table-column--actions,
4498
- .tds-data-table-cell--actions{
4499
- position:sticky;
4500
- inset-inline-end:0;
4501
- width:1%;
4502
- text-align:right;
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);
4503
4242
  }
4504
4243
 
4505
- .tds-data-table-cell--actions{
4506
- padding-inline:var(--tds-data-table-cell-padding-block);
4507
- background-color:var(--tds-data-table-background-color);
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
+ }
4508
4249
  }
4509
- .tds-data-table-selectable-checkbox{
4510
- --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
4511
- --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
4512
- --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
4513
- --tds-data-table-selectable-checkbox-cursor:pointer;
4514
- --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
4515
- --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
4516
4250
 
4517
- --tds-data-table-selectable-checkbox-icon:none;
4518
- --tds-data-table-selectable-checkbox-icon-visibility:hidden;
4519
- --tds-data-table-selectable-checkbox-icon-opacity:0;
4520
- --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
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);
4521
4254
 
4522
- position:relative;
4523
- display:block;
4524
- width:var(--tds-data-table-selectable-checkbox-size);
4525
- height:var(--tds-data-table-selectable-checkbox-size);
4526
- margin:0;
4527
- cursor:var(--tds-data-table-selectable-checkbox-cursor);
4528
- background-color:var(--tds-data-table-selectable-checkbox-background-color);
4529
- border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
4530
- border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4531
- transition-timing-function:var(--t-ease-in-out);
4532
- transition-duration:var(--t-duration-100);
4533
- transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
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);
4534
4259
  }
4535
- .tds-data-table-selectable-checkbox::after{
4536
- position:absolute;
4537
- inset:calc(-1 * var(--tds-data-table-cell-padding-block)) calc(-1 * var(--tds-data-table-cell-padding-inline));
4538
- content:"";
4260
+
4261
+ :is(.tds-btn-group--data-table-filters-chip button) svg{
4262
+ color:var(--_chip-icon-color);
4263
+ transform:scale(.75);
4539
4264
  }
4540
- .tds-data-table-selectable-checkbox::before{
4541
- position:absolute;
4542
- inset:0;
4543
- visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
4544
- content:"";
4545
- background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
4546
- border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4547
- opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
4548
- -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
4549
- mask-image:var(--tds-data-table-selectable-checkbox-icon);
4550
- -webkit-mask-repeat:no-repeat;
4551
- mask-repeat:no-repeat;
4552
- -webkit-mask-size:contain;
4553
- mask-size:contain;
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;
4554
4272
  }
4555
- .tds-data-table-selectable-checkbox[data-hovered],.tds-data-table-row--press-selects[data-hovered] .tds-data-table-selectable-checkbox:not([data-disabled]){
4556
- --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4557
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
4273
+
4274
+ @media (prefers-reduced-motion: reduce){
4275
+
4276
+ :is(.tds-btn-group--data-table-filters-chip button) span{
4277
+ transition:none;
4558
4278
  }
4559
- .tds-data-table-selectable-checkbox[data-focus-visible]{
4560
- outline:var(--t-focus-ring-outline);
4561
- outline-offset:var(--t-focus-ring-offset);
4279
+ }
4280
+
4281
+ :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4282
+ padding-inline-start:0;
4562
4283
  }
4563
- .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
4564
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
4565
- --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
4566
- --tds-data-table-selectable-checkbox-icon-visibility:visible;
4567
- --tds-data-table-selectable-checkbox-icon-opacity:1;
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;
4568
4288
  }
4569
- [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]),.tds-data-table-row--press-selects[data-hovered] :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]):not([data-disabled]){
4570
- --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4571
- --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
4572
- }
4573
- .tds-data-table-selectable-checkbox[data-selected]{
4574
- --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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);
4575
4294
  }
4576
- .tds-data-table-selectable-checkbox[data-indeterminate]{
4577
- --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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);
4578
4307
  }
4579
- .tds-data-table-selectable-checkbox[data-disabled]{
4580
- --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
4581
- --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
4582
- --tds-data-table-selectable-checkbox-cursor:not-allowed;
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);
4583
4320
  }
4584
- .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
4585
- --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
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;
4586
4335
  }
4587
- @media (prefers-reduced-motion: reduce){
4588
- .tds-data-table-selectable-checkbox{
4589
- --tds-data-table-selectable-checkbox-transition-property:none;
4590
- }
4591
4336
  }
4337
+ }
4592
4338
 
4593
- .tds-data-table-popover-trigger[aria-expanded="true"]{
4594
- color:var(--tds-btn-color-active);
4595
- cursor:pointer;
4596
- background-color:var(--tds-btn-bg-active);
4597
- border-color:var(--tds-btn-border-color-active);
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;
4598
4343
  }
4599
4344
 
4600
- .tds-data-table-popover-trigger[aria-expanded="true"]:hover,.tds-data-table-popover-trigger[aria-expanded="true"]:focus-visible{
4601
- color:var(--tds-btn-color-active);
4602
- background-color:var(--tds-btn-bg-active);
4603
- border-color:var(--tds-btn-border-color-active);
4604
- }
4345
+ .tds-data-table-filters-popover-label-operator{
4346
+ font-weight:var(--t-font-weight-normal);
4347
+ }
4605
4348
 
4606
- .tds-data-table-popover{
4607
- inline-size:16rem;
4608
- max-block-size:inherit;
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);
4609
4354
  }
4610
4355
 
4611
- .tds-data-table-filter-controls-search-input-sticky{
4612
- position:sticky;
4613
- inset-block-start:0;
4614
- z-index:1;
4615
- padding:var(--t-spacing-1);
4616
- margin:calc(-1 * var(--t-spacing-1));
4617
- background-color:var(--t-form-background-color);
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);
4618
4364
  }
4619
4365
 
4620
- .tds-data-table-filter-controls-search-input-control{
4621
- --_search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4622
- --_search-input-outline-offset:0;
4366
+ .tds-data-table{
4367
+ --tds-data-table-background-color:var(--t-surface-color-canvas);
4368
+ --tds-data-table-border-color:var(--t-border-color);
4369
+ --tds-data-table-column-background-color:var(--t-fill-color-neutral-080);
4370
+ --tds-data-table-cell-padding-inline:var(--t-spacing-2);
4371
+ --tds-data-table-cell-padding-block:var(--t-spacing-1-half);
4372
+ }
4373
+ .tds-data-table-frame{
4374
+ overflow:hidden;
4623
4375
 
4376
+ border:1px solid var(--tds-data-table-border-color);
4377
+ border-radius:var(--t-border-radius);
4378
+ }
4379
+ .tds-data-table-frame-header{
4624
4380
  display:flex;
4625
- gap:var(--t-spacing-1);
4381
+ gap:var(--t-spacing-1-half);
4626
4382
  align-items:center;
4627
- min-block-size:var(--t-container-size-md);
4628
- padding-inline:var(--t-spacing-1);
4383
+ padding-block:var(--tds-data-table-cell-padding-block);
4384
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4385
+ }
4386
+ .tds-data-table-frame-header-controls{
4387
+ display:flex;
4388
+ gap:var(--t-spacing-1-half);
4389
+ align-items:center;
4390
+ margin-inline-start:auto;
4391
+ }
4392
+ .tds-data-table-frame-footer{
4393
+ padding-block:var(--tds-data-table-cell-padding-block);
4394
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4395
+ border-top:1px solid var(--tds-data-table-border-color);
4396
+ }
4397
+ .tds-data-table-select-all-banner{
4398
+ display:flex;
4399
+ flex-wrap:wrap;
4400
+ gap:var(--t-spacing-1);
4401
+ align-items:baseline;
4402
+ justify-content:center;
4403
+ padding-block:var(--tds-data-table-cell-padding-block);
4404
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4629
4405
  font-size:var(--t-font-size-md);
4630
- color:var(--t-form-color);
4631
- outline:var(--t-focus-ring-width) solid transparent;
4632
- outline-color:var(--_search-input-outline-color);
4633
- outline-offset:var(--_search-input-outline-offset);
4634
- background-color:var(--t-form-background-color);
4635
- border:var(--t-form-border-width) solid var(--t-form-border-color);
4636
- border-radius:var(--t-form-border-radius);
4637
- transition-timing-function:var(--t-ease-in-out);
4638
- transition-duration:var(--t-duration-200);
4639
- transition-property:background-color, border-color, outline-color, outline-offset;
4406
+ background-color:var(--tds-data-table-column-background-color);
4640
4407
  }
4408
+ .tds-data-table-select-all-banner:not(:first-child){
4409
+ border-top:1px solid var(--tds-data-table-border-color);
4410
+ }
4641
4411
 
4642
- .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
4643
- border-color:var(--t-form-border-color-hover);
4412
+ .tds-data-table-select-all-banner-message{
4413
+ margin:0;
4414
+ color:var(--t-text-color-secondary);
4415
+ }
4416
+
4417
+
4418
+ .tds-data-table-results-count{
4419
+ margin:0;
4420
+ font-size:var(--t-font-size-md);
4421
+ line-height:1;
4422
+ color:var(--t-text-color-secondary);
4423
+ }
4424
+ .tds-data-table-scroll-wrapper{
4425
+ position:relative;
4426
+ overflow:hidden;
4427
+ background-color:var(--tds-data-table-column-background-color);
4428
+ }
4429
+ .tds-data-table-scroll-wrapper:not(:first-child){
4430
+ border-top:1px solid var(--tds-data-table-border-color);
4431
+ }
4432
+ .tds-data-table-scroll{
4433
+ overflow-x:auto;
4434
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4435
+ }
4436
+ @supports (animation-timeline: scroll()){
4437
+ .tds-data-table--sticky-header .tds-data-table-scroll-wrapper{
4438
+ overflow:clip;
4439
+ }
4440
+
4441
+ .tds-data-table--sticky-header .tds-data-table-scroll{
4442
+ overflow-y:clip;
4443
+ }
4444
+
4445
+ .tds-data-table--sticky-header .tds-data-table-header{
4446
+ z-index:1;
4447
+ animation-name:tds-data-table-sticky-header;
4448
+ animation-duration:auto;
4449
+ animation-timing-function:linear;
4450
+ animation-fill-mode:both;
4451
+ animation-timeline:--_sticky-header-scroll;
4452
+ animation-range:var(--_sticky-header-scroll-start, 0) calc(var(--_sticky-header-scroll-start, 0) + var(--_sticky-header-scroll-max, 0));
4453
+ }
4454
+
4455
+ @keyframes tds-data-table-sticky-header{
4456
+ from{ transform:translateY(0); }
4457
+ to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
4644
4458
  }
4459
+ }
4460
+ @supports (timeline-scope: --tds){
4461
+ .tds-data-table-scroll-wrapper{
4462
+ --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
4645
4463
 
4646
- .tds-data-table-filter-controls-search-input-control:has(input:focus){
4647
- --_search-input-outline-color:var(--t-focus-ring-color);
4648
- --_search-input-outline-offset:var(--t-focus-ring-offset);
4464
+ timeline-scope:--tds-data-table-scroll-timeline;
4465
+ }
4466
+ .tds-data-table-scroll-wrapper:has(.tds-data-table-column--actions)::after{
4467
+ content:none;
4468
+ }
4649
4469
 
4650
- border-color:var(--t-form-border-color-focus);
4470
+ .tds-data-table-scroll{
4471
+ scroll-timeline:--tds-data-table-scroll-timeline inline;
4472
+ }
4473
+ .tds-data-table-scroll-wrapper::before,
4474
+ .tds-data-table-scroll-wrapper::after,
4475
+ .tds-data-table-column--actions::before,
4476
+ .tds-data-table-cell--actions::before{
4477
+ position:absolute;
4478
+ inset-block:0;
4479
+ z-index:1;
4480
+ width:var(--tds-data-table-scroll-shadow-size);
4481
+ pointer-events:none;
4482
+ content:"";
4483
+ opacity:0;
4484
+ animation-name:tds-data-table-scroll-shadow;
4485
+ animation-duration:auto;
4486
+ animation-timeline:--tds-data-table-scroll-timeline;
4487
+ animation-timing-function:linear;
4488
+ animation-fill-mode:both;
4651
4489
  }
4652
4490
 
4653
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
4654
- flex-shrink:0;
4655
- inline-size:1em;
4656
- color:var(--t-icon-color-dim);
4491
+ .tds-data-table-scroll-wrapper::before{
4492
+ inset-inline-start:0;
4493
+ background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4494
+ animation-range:0 var(--tds-data-table-scroll-shadow-size);
4657
4495
  }
4658
4496
 
4659
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
4660
- flex:1;
4661
- min-inline-size:0;
4662
- padding:0;
4663
- overflow:hidden;
4664
- text-overflow:ellipsis;
4665
- font-family:inherit;
4666
- font-size:inherit;
4667
- color:inherit;
4668
- white-space:nowrap;
4669
- -webkit-appearance:none;
4670
- -moz-appearance:none;
4671
- appearance:none;
4672
- outline:0;
4673
- background-color:transparent;
4674
- border:0;
4497
+ .tds-data-table-scroll-wrapper::after,
4498
+ .tds-data-table-column--actions::before,
4499
+ .tds-data-table-cell--actions::before{
4500
+ background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4501
+ animation-direction:reverse;
4502
+ animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
4675
4503
  }
4676
4504
 
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
- }
4505
+ .tds-data-table-scroll-wrapper::after{
4506
+ inset-inline-end:0;
4507
+ }
4680
4508
 
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
- }
4509
+ .tds-data-table-column--actions::before,
4510
+ .tds-data-table-cell--actions::before{
4511
+ inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
4512
+ }
4684
4513
 
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;
4514
+ @keyframes tds-data-table-scroll-shadow{
4515
+ from{ opacity:0; }
4516
+ to{ opacity:1; }
4517
+ }
4518
+ }
4519
+ .tds-data-table-grid{
4520
+ width:100%;
4521
+ font-size:var(--t-font-size-md);
4522
+ color:var(--t-text-color);
4523
+ border-spacing:0;
4524
+ border-collapse:separate;
4525
+ background-color:var(--tds-data-table-background-color);
4526
+ }
4527
+ .tds-data-table-grid th,.tds-data-table-grid td{
4528
+ white-space:nowrap;
4529
+ }
4530
+ .tds-data-table-column{
4531
+ padding:var(--tds-data-table-cell-padding-block);
4532
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4533
+ font-weight:var(--t-font-weight-medium);
4534
+ color:var(--t-text-color-secondary);
4535
+ cursor:default;
4536
+ background-color:var(--tds-data-table-column-background-color);
4537
+ border-top:0;
4538
+ border-bottom:1px solid var(--tds-data-table-border-color);
4539
+ }
4540
+ .tds-data-table-column[data-allows-sorting="true"]{
4541
+ --_sort-icon-color:var(--t-text-color-disabled);
4542
+ --_sort-icon-opacity:.5;
4543
+ --_sort-icon-rotate:0;
4544
+ cursor:pointer;
4545
+ }
4546
+ .tds-data-table-column[data-allows-sorting="true"][data-hovered]{
4547
+ --_sort-icon-opacity:1;
4688
4548
  }
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);
4549
+ .tds-data-table-column[data-sort-direction]{
4550
+ --_sort-icon-color:inherit;
4551
+ --_sort-icon-opacity:1;
4693
4552
  }
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;
4553
+ .tds-data-table-column[data-sort-direction="descending"]{
4554
+ --_sort-icon-rotate:.5turn;
4702
4555
  }
4703
4556
 
4704
- @media (prefers-reduced-motion: reduce){
4705
-
4706
- .tds-data-table-filter-controls-search-input-control{
4707
- transition-property:none;
4557
+ .tds-data-table-column-icon{
4558
+ margin-inline-start:var(--t-spacing-1);
4708
4559
  }
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;
4560
+ .tds-data-table-column-icon--sort{
4561
+ color:var(--_sort-icon-color);
4562
+ opacity:var(--_sort-icon-opacity);
4563
+ transform:translateY(1px) rotate(var(--_sort-icon-rotate));
4564
+ transition-timing-function:var(--t-ease-in-out);
4565
+ transition-duration:var(--t-duration-300);
4566
+ transition-property:color, opacity, transform;
4713
4567
  }
4714
4568
 
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);
4569
+ .tds-data-table-column-label--hidden,
4570
+ .tds-data-table-cell-label--hidden,
4571
+ .tds-data-table-results-count-label--hidden,
4572
+ .tds-data-table-filter-controls-label--hidden{
4573
+ position:absolute;
4574
+ width:1px;
4575
+ height:1px;
4576
+ overflow:hidden;
4577
+ white-space:nowrap;
4578
+ clip-path:inset(50%);
4579
+ }
4580
+ .tds-data-table-cell{
4581
+ padding:var(--tds-data-table-cell-padding-block);
4582
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4583
+ border-bottom:1px solid var(--tds-data-table-border-color);
4584
+ }
4585
+ .tds-data-table-row:last-of-type .tds-data-table-cell{
4586
+ border-bottom-width:0;
4587
+ }
4588
+ .tds-data-table-row--interactive{
4589
+ --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4590
+ cursor:default;
4591
+ transition:background-color var(--t-duration-100) var(--t-ease-in-out);
4592
+ }
4593
+ .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
4594
+ background-color:var(--tds-data-table-row-background-hover);
4719
4595
  }
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);
4596
+ .tds-data-table-row--interactive[data-focus-visible]{
4597
+ outline:var(--t-focus-ring-outline);
4598
+ outline-offset:calc(-1 * var(--t-focus-ring-width));
4723
4599
  }
4724
4600
 
4725
- .tds-data-table-filter-controls-list{
4726
- --_label-sticky-block-start:var(--t-spacing-6);
4601
+ .tds-data-table-empty{
4602
+ padding:var(--tds-data-table-cell-padding-block);
4603
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4604
+ text-align:center;
4605
+ white-space:normal;
4606
+ }
4727
4607
 
4728
- margin-block-start:var(--t-spacing-1);
4608
+ .tds-data-table-loading{
4609
+ display:flex;
4610
+ align-items:center;
4611
+ justify-content:center;
4612
+ padding:var(--tds-data-table-cell-padding-block);
4613
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4729
4614
  }
4730
4615
 
4731
- .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4732
- --tds-dropdown-item-color:var(--t-text-color-secondary);
4616
+ @keyframes tds-data-table-loading-fade-in{
4617
+ from{
4618
+ opacity:0;
4733
4619
  }
4734
4620
 
4735
- .tds-data-table-filter-controls-list .tds-dropdown-item{
4736
- scroll-margin-block-start:var(--t-spacing-6);
4621
+ to{
4622
+ opacity:1;
4737
4623
  }
4738
-
4739
- .tds-data-table-filter-controls-submenu-list{
4740
- --_label-sticky-block-start:0;
4741
4624
  }
4625
+ .tds-data-table-loading-spinner{
4626
+ --tds-loading-spinner-size:48px;
4627
+ --tds-loading-spinner-track-width:6px;
4628
+ --tds-loading-spinner-visibility:visible;
4629
+ --tds-loading-spinner-animation-play-state:running;
4742
4630
 
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);
4631
+ position:relative;
4632
+ display:block;
4633
+ width:var(--tds-loading-spinner-size);
4634
+ height:var(--tds-loading-spinner-size);
4635
+ margin-block:min(calc(var(--tds-loading-spinner-size) * 1.25), 25vh);
4636
+ opacity:0;
4637
+ animation-name:tds-data-table-loading-fade-in;
4638
+ animation-duration:1s;
4639
+ animation-timing-function:ease-in-out;
4640
+ animation-fill-mode:forwards;
4641
+ }
4642
+ .tds-data-table-loading-spinner .tds-loading-spinner{
4643
+ inset:0;
4751
4644
  }
4645
+ @media (prefers-reduced-motion: reduce){
4646
+ .tds-data-table-loading-spinner{
4647
+ --tds-loading-spinner-animation-play-state:paused;
4752
4648
 
4753
- .tds-data-table-filter-controls-submenu-trigger[data-open]{
4754
- background:var(--t-fill-color-neutral-070);
4649
+ opacity:1;
4650
+ animation:none;
4651
+ }
4755
4652
  }
4756
-
4757
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4758
- inline-size:16rem;
4653
+ .tds-data-table-column,
4654
+ .tds-data-table-cell{
4655
+ text-align:start;
4759
4656
  }
4760
4657
 
4761
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4762
- max-block-size:20rem;
4658
+ .tds-data-table-column--align-center,
4659
+ .tds-data-table-cell--align-center{
4660
+ text-align:center;
4763
4661
  }
4764
4662
 
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);
4663
+ .tds-data-table-column--align-end,
4664
+ .tds-data-table-cell--align-end{
4665
+ text-align:end;
4770
4666
  }
4771
4667
 
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;
4668
+ .tds-data-table-cell--numeric{
4669
+ font-variant-numeric:tabular-nums;
4782
4670
  }
4783
- }
4784
-
4785
- .tds-pane{
4786
- --tds-pane-background-color:var(--t-surface-color-card);
4787
- --tds-pane-border-radius:var(--t-border-radius-lg);
4788
- --tds-pane-border-color:var(--t-border-color);
4789
-
4790
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
4791
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4792
-
4793
- --tds-pane-title-color:var(--t-text-color-headline);
4794
- --tds-pane-title-font-size:var(--t-font-size-lg);
4795
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
4796
- --tds-pane-title-line-height:1.4;
4797
-
4798
- --tds-pane-body-padding:var(--t-spacing-3);
4799
-
4800
- --tds-pane-footer-padding-block:var(--t-spacing-2);
4801
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4802
-
4803
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4804
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4805
4671
 
4806
- background:var(--tds-pane-background-color);
4807
- border-radius:var(--tds-pane-border-radius);
4808
- border:var(--t-border-width) solid var(--tds-pane-border-color);
4809
- display:flex;
4810
- flex-direction:column;
4672
+ .tds-data-table-column--selectable,
4673
+ .tds-data-table-cell--selectable{
4674
+ width:var(--t-element-size-md);
4675
+ text-align:center;
4676
+ }
4677
+ .tds-data-table-column--actions,
4678
+ .tds-data-table-cell--actions{
4679
+ position:sticky;
4680
+ inset-inline-end:0;
4681
+ width:1%;
4682
+ text-align:right;
4811
4683
  }
4812
4684
 
4813
- .tds-pane-header{
4814
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4815
- padding-block:var(--tds-pane-header-padding-block);
4816
- padding-inline:var(--tds-pane-header-padding-inline);
4685
+ .tds-data-table-cell--actions{
4686
+ padding-inline:var(--tds-data-table-cell-padding-block);
4687
+ background-color:var(--tds-data-table-background-color);
4817
4688
  }
4689
+ .tds-data-table-selectable-checkbox{
4690
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
4691
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);
4692
+ --tds-data-table-selectable-checkbox-border-radius:var(--t-border-radius-sm);
4693
+ --tds-data-table-selectable-checkbox-cursor:pointer;
4694
+ --tds-data-table-selectable-checkbox-size:var(--t-element-size-md);
4695
+ --tds-data-table-selectable-checkbox-transition-property:background-color, border-color;
4818
4696
 
4819
- .tds-pane-header > .tds-helper-shelf-trigger{
4820
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4697
+ --tds-data-table-selectable-checkbox-icon:none;
4698
+ --tds-data-table-selectable-checkbox-icon-visibility:hidden;
4699
+ --tds-data-table-selectable-checkbox-icon-opacity:0;
4700
+ --tds-data-table-selectable-checkbox-icon-fill:var(--t-icon-color-inverted);
4701
+
4702
+ position:relative;
4703
+ display:block;
4704
+ width:var(--tds-data-table-selectable-checkbox-size);
4705
+ height:var(--tds-data-table-selectable-checkbox-size);
4706
+ margin:0;
4707
+ cursor:var(--tds-data-table-selectable-checkbox-cursor);
4708
+ background-color:var(--tds-data-table-selectable-checkbox-background-color);
4709
+ border:var(--t-form-border-width) solid var(--tds-data-table-selectable-checkbox-border-color);
4710
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4711
+ transition-timing-function:var(--t-ease-in-out);
4712
+ transition-duration:var(--t-duration-100);
4713
+ transition-property:var(--tds-data-table-selectable-checkbox-transition-property);
4714
+ }
4715
+ .tds-data-table-selectable-checkbox::after{
4716
+ position:absolute;
4717
+ inset:calc(-1 * var(--tds-data-table-cell-padding-block)) calc(-1 * var(--tds-data-table-cell-padding-inline));
4718
+ content:"";
4719
+ }
4720
+ .tds-data-table-selectable-checkbox::before{
4721
+ position:absolute;
4722
+ inset:0;
4723
+ visibility:var(--tds-data-table-selectable-checkbox-icon-visibility);
4724
+ content:"";
4725
+ background-color:var(--tds-data-table-selectable-checkbox-icon-fill);
4726
+ border-radius:var(--tds-data-table-selectable-checkbox-border-radius);
4727
+ opacity:var(--tds-data-table-selectable-checkbox-icon-opacity);
4728
+ -webkit-mask-image:var(--tds-data-table-selectable-checkbox-icon);
4729
+ mask-image:var(--tds-data-table-selectable-checkbox-icon);
4730
+ -webkit-mask-repeat:no-repeat;
4731
+ mask-repeat:no-repeat;
4732
+ -webkit-mask-size:contain;
4733
+ mask-size:contain;
4821
4734
  }
4822
-
4823
- .tds-pane-header > .tds-helper-shelf{
4824
- flex-basis:100%;
4825
- order:1;
4735
+ .tds-data-table-selectable-checkbox[data-hovered],.tds-data-table-row--press-selects[data-hovered] .tds-data-table-selectable-checkbox:not([data-disabled]){
4736
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4737
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-button-interaction-outline-hover);
4826
4738
  }
4827
-
4828
- .tds-pane-header:has( > .tds-helper-shelf){
4829
- row-gap:var(--tds-pane-header-padding-block);
4830
- padding-block-end:0;
4739
+ .tds-data-table-selectable-checkbox[data-focus-visible]{
4740
+ outline:var(--t-focus-ring-outline);
4741
+ outline-offset:var(--t-focus-ring-offset);
4831
4742
  }
4832
-
4833
- .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
4834
- font-size:var(--t-font-size-md);
4835
- margin-block-end:var(--tds-pane-header-padding-block);
4743
+ .tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]{
4744
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-control);
4745
+ --tds-data-table-selectable-checkbox-border-color:var(--t-border-color-control-info);
4746
+ --tds-data-table-selectable-checkbox-icon-visibility:visible;
4747
+ --tds-data-table-selectable-checkbox-icon-opacity:1;
4836
4748
  }
4837
-
4838
- .tds-pane-title{
4839
- color:var(--tds-pane-title-color);
4840
- font-size:var(--tds-pane-title-font-size);
4841
- font-weight:var(--tds-pane-title-font-weight);
4842
- line-height:var(--tds-pane-title-line-height);
4843
- margin:0;
4844
- }
4845
-
4846
- .tds-pane-body{
4847
- padding:var(--tds-pane-body-padding);
4848
- }
4849
-
4850
- .tds-pane-footer{
4851
- padding-block-end:var(--tds-pane-footer-padding-block);
4852
- padding-inline:var(--tds-pane-footer-padding-inline);
4853
- }
4854
-
4855
- .tds-pane-divider{
4856
- border:0;
4857
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4858
- margin-block:var(--tds-pane-divider-margin-block);
4859
- margin-inline:var(--tds-pane-divider-margin-inline);
4860
- }
4861
-
4862
- .tds-data-table-filters-shelf{
4863
- height:auto;
4864
- overflow:hidden;
4865
- transition:height var(--t-duration-300) var(--t-ease-out);
4866
- }
4867
-
4749
+ [data-hovered]:is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]),.tds-data-table-row--press-selects[data-hovered] :is(.tds-data-table-selectable-checkbox[data-selected],.tds-data-table-selectable-checkbox[data-indeterminate]):not([data-disabled]){
4750
+ --tds-data-table-selectable-checkbox-border-color:var(--t-fill-color-interaction-hover);
4751
+ --tds-data-table-selectable-checkbox-background-color:var(--t-fill-color-interaction-hover);
4752
+ }
4753
+ .tds-data-table-selectable-checkbox[data-selected]{
4754
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4755
+ }
4756
+ .tds-data-table-selectable-checkbox[data-indeterminate]{
4757
+ --tds-data-table-selectable-checkbox-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
4758
+ }
4759
+ .tds-data-table-selectable-checkbox[data-disabled]{
4760
+ --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color-disabled);
4761
+ --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color-disabled);
4762
+ --tds-data-table-selectable-checkbox-cursor:not-allowed;
4763
+ }
4764
+ .tds-data-table-selectable-checkbox[data-disabled][data-selected],.tds-data-table-selectable-checkbox[data-disabled][data-indeterminate]{
4765
+ --tds-data-table-selectable-checkbox-background-color:var(--t-border-color-control-disabled);
4766
+ }
4868
4767
  @media (prefers-reduced-motion: reduce){
4869
-
4870
- .tds-data-table-filters-shelf{
4871
- transition:none;
4768
+ .tds-data-table-selectable-checkbox{
4769
+ --tds-data-table-selectable-checkbox-transition-property:none;
4872
4770
  }
4873
4771
  }
4874
4772
 
4875
- .tds-data-table-filters-shelf--collapsed{
4876
- height:0;
4877
- transition-timing-function:var(--t-ease-in);
4773
+ .tds-data-table-popover-trigger[aria-expanded="true"]{
4774
+ color:var(--tds-btn-color-active);
4775
+ cursor:pointer;
4776
+ background-color:var(--tds-btn-bg-active);
4777
+ border-color:var(--tds-btn-border-color-active);
4878
4778
  }
4879
4779
 
4880
- @supports (interpolate-size: allow-keywords){
4881
- .tds-data-table-filters-shelf{
4882
- interpolate-size:allow-keywords;
4780
+ .tds-data-table-popover-trigger[aria-expanded="true"]:hover,.tds-data-table-popover-trigger[aria-expanded="true"]:focus-visible{
4781
+ color:var(--tds-btn-color-active);
4782
+ background-color:var(--tds-btn-bg-active);
4783
+ border-color:var(--tds-btn-border-color-active);
4883
4784
  }
4884
- }
4885
-
4886
- .tds-data-table-filters{
4887
- padding-block:var(--tds-data-table-cell-padding-block);
4888
- padding-inline:var(--tds-data-table-cell-padding-inline);
4889
- border-top:1px solid var(--tds-data-table-border-color);
4890
- }
4891
-
4892
- .tds-data-table-filters-active{
4893
- display:flex;
4894
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4895
- column-gap:var(--tds-data-table-cell-padding-inline);
4896
- justify-content:space-between;
4897
- }
4898
4785
 
4899
- .tds-data-table-filters-active-list{
4900
- display:flex;
4901
- flex-wrap:wrap;
4902
- gap:var(--t-spacing-half);
4786
+ .tds-data-table-popover{
4787
+ inline-size:16rem;
4788
+ max-block-size:inherit;
4903
4789
  }
4904
4790
 
4905
- .tds-data-table-filters-active-actions{
4906
- flex-shrink:0;
4791
+ .tds-data-table-filter-controls-search-input-sticky{
4792
+ position:sticky;
4793
+ inset-block-start:0;
4794
+ z-index:1;
4795
+ padding:var(--t-spacing-1);
4796
+ margin:calc(-1 * var(--t-spacing-1));
4797
+ background-color:var(--t-form-background-color);
4907
4798
  }
4908
4799
 
4909
- :root{
4910
-
4911
- --_data-table-filter-border-info:hsl(204 96% 89%);
4912
- --_data-table-filter-border-error:hsl(8 60% 85%);
4913
- }
4800
+ .tds-data-table-filter-controls-search-input-control{
4801
+ --_search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4802
+ --_search-input-outline-offset:0;
4914
4803
 
4915
- :root[data-color-mode="dark"]{
4916
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4917
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4804
+ display:flex;
4805
+ gap:var(--t-spacing-1);
4806
+ align-items:center;
4807
+ min-block-size:var(--t-container-size-md);
4808
+ padding-inline:var(--t-spacing-1);
4809
+ font-size:var(--t-font-size-md);
4810
+ color:var(--t-form-color);
4811
+ outline:var(--t-focus-ring-width) solid transparent;
4812
+ outline-color:var(--_search-input-outline-color);
4813
+ outline-offset:var(--_search-input-outline-offset);
4814
+ background-color:var(--t-form-background-color);
4815
+ border:var(--t-form-border-width) solid var(--t-form-border-color);
4816
+ border-radius:var(--t-form-border-radius);
4817
+ transition-timing-function:var(--t-ease-in-out);
4818
+ transition-duration:var(--t-duration-200);
4819
+ transition-property:background-color, border-color, outline-color, outline-offset;
4918
4820
  }
4919
4821
 
4920
- @media (prefers-color-scheme: dark){
4921
- :root[data-color-mode="system"]{
4922
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4923
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4822
+ .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
4823
+ border-color:var(--t-form-border-color-hover);
4924
4824
  }
4925
- }
4926
4825
 
4927
- .tds-btn-group--data-table-filters-chip button{
4928
- --_chip-border-color:var(--_data-table-filter-border-info);
4929
- --_chip-icon-color:var(--t-icon-color-status-info);
4826
+ .tds-data-table-filter-controls-search-input-control:has(input:focus){
4827
+ --_search-input-outline-color:var(--t-focus-ring-color);
4828
+ --_search-input-outline-offset:var(--t-focus-ring-offset);
4930
4829
 
4931
- gap:0;
4932
- color:var(--t-text-color-status-info);
4933
- background-color:var(--t-fill-color-status-info-dim);
4934
- border-color:var(--_chip-border-color);
4935
- }
4830
+ border-color:var(--t-form-border-color-focus);
4831
+ }
4936
4832
 
4937
- :is(.tds-btn-group--data-table-filters-chip button) svg{
4938
- color:var(--_chip-icon-color);
4939
- transform:scale(.75);
4833
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
4834
+ flex-shrink:0;
4835
+ inline-size:1em;
4836
+ color:var(--t-icon-color-dim);
4940
4837
  }
4941
4838
 
4942
- :is(.tds-btn-group--data-table-filters-chip button) span{
4943
- padding-inline:var(--tds-btn-padding-x);
4944
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4945
- transition-timing-function:var(--t-ease-in-out);
4946
- transition-duration:var(--t-duration-200);
4947
- transition-property:border-color;
4839
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
4840
+ flex:1;
4841
+ min-inline-size:0;
4842
+ padding:0;
4843
+ overflow:hidden;
4844
+ text-overflow:ellipsis;
4845
+ font-family:inherit;
4846
+ font-size:inherit;
4847
+ color:inherit;
4848
+ white-space:nowrap;
4849
+ -webkit-appearance:none;
4850
+ -moz-appearance:none;
4851
+ appearance:none;
4852
+ outline:0;
4853
+ background-color:transparent;
4854
+ border:0;
4948
4855
  }
4949
4856
 
4950
- @media (prefers-reduced-motion: reduce){
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
+ }
4951
4860
 
4952
- :is(.tds-btn-group--data-table-filters-chip button) span{
4953
- transition:none;
4954
- }
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);
4955
4863
  }
4956
4864
 
4957
- :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4958
- padding-inline-start:0;
4959
- }
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
+ }
4960
4869
 
4961
- :is(.tds-btn-group--data-table-filters-chip button) span:last-child{
4962
- padding-inline-end:0;
4963
- border-inline-end-color:transparent;
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);
4964
4873
  }
4965
4874
 
4966
- :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{
4967
- color:var(--t-text-color-interaction);
4968
- background-color:var(--t-fill-color-status-info-ghost);
4969
- border-color:var(--_chip-border-color);
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;
4879
+
4880
+ visibility:var(--_search-input-clear-button-visibility);
4881
+ flex-shrink:0;
4970
4882
  }
4971
4883
 
4972
- .tds-btn-group--data-table-filters-chip-inactive button{
4973
- --_chip-border-color:var(--t-border-color-button-neutral);
4974
- --_chip-icon-color:var(--t-icon-color-status-neutral);
4884
+ @media (prefers-reduced-motion: reduce){
4975
4885
 
4976
- color:var(--t-text-color);
4977
- background-color:var(--t-fill-color-status-neutral-dim);
4886
+ .tds-data-table-filter-controls-search-input-control{
4887
+ transition-property:none;
4888
+ }
4889
+ }
4890
+
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;
4978
4893
  }
4979
4894
 
4980
- :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{
4981
- color:var(--t-text-color);
4982
- background-color:var(--t-fill-color-status-neutral-ghost);
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
+ }
4900
+
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);
4983
4903
  }
4984
4904
 
4985
- .tds-btn-group--data-table-filters-chip-invalid button{
4986
- --_chip-border-color:var(--_data-table-filter-border-error);
4987
- --_chip-icon-color:var(--t-icon-color-status-error);
4905
+ .tds-data-table-filter-controls-list{
4906
+ --_label-sticky-block-start:var(--t-spacing-6);
4988
4907
 
4989
- color:var(--t-text-color-status-error);
4990
- background-color:var(--t-fill-color-status-error-dim);
4908
+ margin-block-start:var(--t-spacing-1);
4991
4909
  }
4992
4910
 
4993
- :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{
4994
- color:var(--t-text-color-status-error);
4995
- background-color:var(--t-fill-color-status-error-ghost);
4911
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4912
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
4996
4913
  }
4997
- .tds-popover--data-table-filters-popover .tds-popover-content{
4998
- gap:var(--t-spacing-1);
4999
- align-items:start;
5000
- padding:var(--t-spacing-2);
4914
+
4915
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
4916
+ scroll-margin-block-start:var(--t-spacing-6);
5001
4917
  }
5002
4918
 
5003
- @media (prefers-reduced-motion: no-preference){
5004
- .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
5005
- animation-name:tds-data-table-filters-popover;
5006
- }
4919
+ .tds-data-table-filter-controls-submenu-list{
4920
+ --_label-sticky-block-start:0;
4921
+ }
5007
4922
 
5008
- @keyframes tds-data-table-filters-popover{
5009
- from{
5010
- opacity:0;
5011
- }
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);
5012
4931
  }
4932
+
4933
+ .tds-data-table-filter-controls-submenu-trigger[data-open]{
4934
+ background:var(--t-fill-color-neutral-070);
5013
4935
  }
5014
4936
 
5015
- .tds-data-table-filters-popover-label{
5016
- font-size:var(--t-font-size-md);
5017
- font-weight:var(--t-font-weight-medium);
5018
- margin-block:0;
4937
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4938
+ inline-size:16rem;
5019
4939
  }
5020
4940
 
5021
- .tds-data-table-filters-popover-label-operator{
5022
- font-weight:var(--t-font-weight-normal);
4941
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4942
+ max-block-size:20rem;
5023
4943
  }
5024
4944
 
5025
- .tds-data-table-filters-popover-description{
5026
- font-size:var(--t-font-size-sm);
5027
- margin-block-start:calc(var(--t-spacing-fourth) * -1);
5028
- margin-block-end:0;
5029
- color:var(--t-text-color-secondary);
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
4950
  }
5031
4951
 
5032
- .tds-data-table-filter-controls-badge{
5033
- min-inline-size:calc(1lh + (var(--t-border-width) * 2));
5034
- padding-inline:var(--t-spacing-half);
5035
- font-size:var(--t-font-size-sm);
5036
- color:var(--t-text-color-status-info);
5037
- background-color:var(--t-fill-color-status-info-dim);
5038
- border:var(--t-border-width) solid var(--_data-table-filter-border-info);
5039
- border-radius:var(--t-border-radius-round);
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;
5040
4962
  }
4963
+ }
5041
4964
 
5042
4965
  .tds-segmented-control{
5043
4966
  --tds-segmented-control-font-size:var(--t-font-size-md);
@@ -5163,6 +5086,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5163
5086
  --tds-segmented-control-background-color-disabled:transparent;
5164
5087
  }
5165
5088
 
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-header > .tds-helper-shelf-trigger{
5124
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
5125
+ }
5126
+
5127
+ .tds-pane-header > .tds-helper-shelf{
5128
+ flex-basis:100%;
5129
+ order:1;
5130
+ }
5131
+
5132
+ .tds-pane-header:has( > .tds-helper-shelf){
5133
+ row-gap:var(--tds-pane-header-padding-block);
5134
+ padding-block-end:0;
5135
+ }
5136
+
5137
+ .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
5138
+ font-size:var(--t-font-size-md);
5139
+ margin-block-end:var(--tds-pane-header-padding-block);
5140
+ }
5141
+
5142
+ .tds-pane-title{
5143
+ color:var(--tds-pane-title-color);
5144
+ font-size:var(--tds-pane-title-font-size);
5145
+ font-weight:var(--tds-pane-title-font-weight);
5146
+ line-height:var(--tds-pane-title-line-height);
5147
+ margin:0;
5148
+ }
5149
+
5150
+ .tds-pane-body{
5151
+ padding:var(--tds-pane-body-padding);
5152
+ }
5153
+
5154
+ .tds-pane-footer{
5155
+ padding-block-end:var(--tds-pane-footer-padding-block);
5156
+ padding-inline:var(--tds-pane-footer-padding-inline);
5157
+ }
5158
+
5159
+ .tds-pane-divider{
5160
+ border:0;
5161
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5162
+ margin-block:var(--tds-pane-divider-margin-block);
5163
+ margin-inline:var(--tds-pane-divider-margin-inline);
5164
+ }
5165
+
5166
5166
  .search-result-grouping-4F5Lx{
5167
5167
  color:var(--t-text-color-secondary);
5168
5168
  }
@@ -5294,6 +5294,52 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5294
5294
  }
5295
5295
  }
5296
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
+
5297
5343
  .tds-filterable-list-box:has(input:disabled){
5298
5344
  --tds-filterable-list-box-cursor:not-allowed;
5299
5345
  }
@@ -5506,52 +5552,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5506
5552
  white-space:nowrap;
5507
5553
  }
5508
5554
 
5509
- .tds-helper-shelf{
5510
- --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5511
- --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5512
- --tds-helper-shelf-color:var(--t-text-color);
5513
- --tds-helper-shelf-font-size:var(--t-font-size-sm);
5514
- --tds-helper-shelf-padding:var(--t-spacing-1);
5515
-
5516
- height:0;
5517
- overflow:hidden;
5518
- transition:height var(--t-duration-300) var(--t-ease-in);
5519
- }
5520
-
5521
- @media (prefers-reduced-motion: reduce){
5522
-
5523
- .tds-helper-shelf{
5524
- transition:none;
5525
- }
5526
- }
5527
-
5528
- .tds-helper-shelf--expanded{
5529
- height:auto;
5530
- transition-timing-function:var(--t-ease-out);
5531
- }
5532
-
5533
- @supports (interpolate-size: allow-keywords){
5534
- .tds-helper-shelf{
5535
- interpolate-size:allow-keywords;
5536
- }
5537
- }
5538
-
5539
- .tds-helper-shelf-content{
5540
- padding:var(--tds-helper-shelf-padding);
5541
- font-size:var(--tds-helper-shelf-font-size);
5542
- color:var(--tds-helper-shelf-color);
5543
- background:var(--tds-helper-shelf-background-color);
5544
- border-radius:var(--tds-helper-shelf-border-radius);
5545
- }
5546
-
5547
- .tds-helper-shelf-trigger{
5548
- --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5549
- }
5550
-
5551
- .tds-helper-shelf-trigger[aria-expanded="true"]{
5552
- --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5553
- }
5554
-
5555
5555
  .symbol{
5556
5556
  display:inline-block;
5557
5557
  vertical-align:text-top;