@planningcenter/tapestry 4.10.0-rc.2 → 4.10.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/reactRender.css +1751 -1751
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1751 -1751
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/tapestry-reset.css +7 -2
  6. package/dist/tapestry-reset.css.map +1 -1
  7. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -677,476 +677,643 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- @layer t-critical{
681
- tds-page-header:not(.hydrated){
682
- display:none;
683
- }
680
+
681
+ @media (prefers-reduced-motion: no-preference){
682
+
683
+ :root{
684
+ interpolate-size:allow-keywords;
684
685
  }
686
+ }
685
687
 
686
- @layer t-component{
687
- .tds-page-header{
688
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
- --tds-page-header-color:var(--t-text-color);
691
- --tds-page-header-bottom-border-color:transparent;
692
- --tds-page-header-headline-color:var(--t-text-color-headline);
693
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
- --tds-page-header-padding-x:var(--t-spacing-2);
695
- --tds-page-header-padding-y:var(--t-spacing-2);
696
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
- --tds-page-header-nav-gap:var(--t-spacing-1);
698
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
- --tds-page-header-nav-item-border-width:1px;
688
+ @layer tds-component{
689
+ tds-sidenav,
690
+ .tds-sidenav{
691
+ --tds-sidenav-indent:12px;
692
+ --tds-sidenav-item-depth:0;
704
693
 
705
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
694
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
707
695
 
708
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
696
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
697
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
698
+ --tds-sidenav-collapse-closed-opacity:0;
699
+ --tds-sidenav-collapse-open-opacity:1;
700
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
+ --tds-sidenav-collapse-open-transform:translateY(0);
711
702
 
712
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
703
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
714
707
 
715
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
708
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
+ --tds-sidenav-item-nested-background-selected:transparent;
718
711
 
719
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
724
- }
712
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
725
715
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
716
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
728
718
  }
729
719
 
730
- @supports (color: light-dark(#fff, #000)){
731
- .tds-page-header{
732
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
720
+ @media (prefers-reduced-motion: reduce){
721
+ tds-sidenav,
722
+ .tds-sidenav{
723
+ --tds-sidenav-collapse-transition-enter:none;
724
+ --tds-sidenav-collapse-transition-exit:none;
725
+ --tds-sidenav-collapse-closed-transform:none;
726
+ --tds-sidenav-collapse-open-transform:none;
727
+ }
734
728
  }
729
+
730
+ .tds-sidenav--theme-gray{
731
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
735
736
  }
737
+ }
736
738
 
737
- @media (min-width: 600px){
738
- .tds-page-header{
739
- --tds-page-header-background-color:var(--t-surface-color-canvas);
740
- --tds-page-header-color:var(--t-text-color-secondary);
741
- --tds-page-header-bottom-border-color:var(--t-border-color);
742
- --tds-page-header-padding-x:var(--t-spacing-3);
743
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
- --tds-page-header-nav-gap:var(--t-spacing-half);
745
- --tds-page-header-nav-background:transparent;
746
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
- --tds-page-header-nav-item-border-width:1px;
748
- --tds-page-header-nav-item-color:var(--t-text-color);
749
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
- }
739
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
+ display:flex;
741
+ }
742
+
743
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
+ flex-direction:column;
745
+ gap:var(--t-spacing-half);
746
+ width:100%;
756
747
  }
748
+
749
+ .tds-sidenav-section-list{
750
+ width:100%;
751
+ padding:0;
752
+ margin:0;
753
+ list-style:none;
757
754
  }
758
755
 
759
- .tds-page-header{
756
+ .tds-sidenav-section-header{
760
757
  display:flex;
761
- flex-direction:column;
762
- padding-top:var(--tds-page-header-padding-y);
763
- color:var(--tds-page-header-color);
764
- background:var(--tds-page-header-background-color);
765
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
758
+ align-items:baseline;
759
+ justify-content:space-between;
760
+ padding-top:var(--t-spacing-2);
766
761
  }
767
762
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
763
+ .tds-sidenav-section-header h2{
764
+ margin:0;
765
+ font-size:var(--t-font-size-sm);
766
+ font-weight:var(--t-font-weight-semibold);
767
+ line-height:1.35;
768
+ color:var(--t-text-color-secondary);
769
+ text-transform:uppercase;
770
770
  }
771
771
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
772
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
+ padding-top:0;
774
774
  }
775
775
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
776
+ .tds-sidenav-section-header [slot="label-actions"]{
777
+ display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
778
780
  }
779
781
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
782
+ .tds-sidenav-section [slot="section-actions"]{
783
+ display:flex;
784
+ gap:12px;
785
+ align-items:center;
786
+ min-height:42px;
787
+ padding:var(--t-spacing-1) 0;
788
+ }
789
+
790
+ .tds-sidenav-section-list,
791
+ .tds-sidenav-item{
792
+ width:100%;
793
+ padding:0;
794
+ margin:0;
795
+ }
796
+
797
+ .tds-sidenav-item :is(a,button){
798
+ position:relative;
781
799
  display:flex;
782
- flex-flow:row wrap;
783
- gap:var(--t-spacing-half) var(--t-spacing-1);
784
- align-items:flex-start;
785
- justify-content:flex-start;
786
- min-width:0;
800
+ gap:12px;
801
+ align-items:center;
802
+ width:100%;
803
+ padding:12px;
804
+ overflow:hidden;
805
+ font-size:var(--t-font-size-sm);
806
+ line-height:18px;
807
+ color:var(--t-text-color-headline);
808
+ white-space:nowrap;
809
+ text-decoration:none;
810
+ -webkit-appearance:none;
811
+ -moz-appearance:none;
812
+ appearance:none;
813
+ cursor:pointer;
814
+ background-color:var(--tds-sidenav-item-background, transparent);
815
+ border:0;
816
+ border-radius:var(--t-border-radius);
817
+ transition:var(--tds-sidenav-item-transition);
787
818
  }
788
819
 
789
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
- display:flex;
791
- gap:var(--tds-page-header-nav-gap);
792
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
- margin:0 0 -1px;
794
- overflow:auto;
795
- list-style:none;
796
- background:var(--tds-page-header-nav-background);
820
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
+ display:block;
822
+ flex:1;
823
+ overflow:hidden;
824
+ text-overflow:ellipsis;
825
+ text-align:left;
826
+ white-space:nowrap;
797
827
  }
798
828
 
799
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
- position:relative;
801
- display:inline-flex;
802
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
- font-size:var(--t-font-size-sm);
804
- line-height:22px;
805
- color:var(--tds-page-header-nav-item-color);
806
- white-space:nowrap;
829
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
+ color:var(--t-text-color-headline);
807
832
  text-decoration:none;
808
- -webkit-appearance:none;
809
- -moz-appearance:none;
810
- appearance:none;
811
- cursor:pointer;
812
- outline-offset:-2px;
813
- background-color:var(--tds-page-header-nav-item-background-color);
814
- background-clip:padding-box;
815
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
818
833
  }
819
834
 
820
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
835
+ :is(.tds-sidenav-item :is(a,button)):active{
836
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
+ }
838
+
839
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
+ overflow:hidden;
841
+ color:var(--tds-sidenav-item-icon-color);
842
+ }
843
+
844
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
845
+ display:block;
846
+ width:var(--tds-sidenav-item-icon-size);
847
+ height:var(--tds-sidenav-item-icon-size);
825
848
  }
826
849
 
827
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
- }
850
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
+ --tds-sidenav-indent:19px;
852
+ }
833
853
 
834
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
- background-color:var(--tds-page-header-nav-item-background-color-active);
836
- border-color:var(--tds-page-header-nav-item-border-color-active);
837
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
- }
854
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
+ visibility:visible;
856
+ block-size:auto;
857
+ opacity:1;
858
+ }
839
859
 
840
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
- color:var(--tds-page-header-nav-item-color-disabled);
843
- cursor:not-allowed;
844
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
- opacity:1;
846
- }
860
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
847
863
 
848
- @media (min-width: 600px){
849
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
- position:absolute;
851
- inset:auto -1px -1px;
852
- height:1px;
853
- pointer-events:none;
854
- content:"";
855
- background-color:var(--tds-page-header-bottom-border-color);
856
- }
857
- }
864
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
+ font-weight:var(--t-font-weight-semibold);
866
+ }
858
867
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
868
+ .tds-sidenav-item:has(.tds-sidenav-section){
869
+ display:flex;
870
+ flex-direction:column;
871
+ gap:var(--t-spacing-half);
872
+ }
873
+
874
+ .tds-sidenav-item .tds-sidenav-section-list{
875
+ --tds-sidenav-item-depth:1;
876
+ gap:0;
877
+ }
878
+
879
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
+ visibility:hidden;
881
+ block-size:0;
882
+ overflow-y:clip;
883
+ opacity:0;
884
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
861
885
  }
862
886
 
863
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
887
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
+ --tds-sidenav-item-depth:2;
889
+ }
890
+
891
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
+ min-height:var(--t-element-size-2xl);
893
+ padding-block:9px;
894
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
+ line-height:1;
896
+ background-color:transparent;
897
+ }
898
+
899
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
+ position:absolute;
901
+ top:0;
902
+ bottom:0;
903
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
+ width:2px;
905
+ content:"";
906
+ background-color:var(--tds-sidenav-item-nested-border-color);
907
+ transition:var(--tds-sidenav-item-transition);
866
908
  }
867
909
 
868
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
910
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
869
911
  position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
912
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
+ z-index:-1;
914
+ height:100%;
874
915
  content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
916
+ background-color:var(--tds-sidenav-item-nested-background);
917
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
+ transition:var(--tds-sidenav-item-transition);
877
919
  }
878
920
 
879
- @media (prefers-reduced-motion: no-preference){
880
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
- animation:indicator-pulse 1.25s ease infinite;
882
- }
921
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
+ display:block;
923
+ text-align:left;
924
+ white-space:normal;
883
925
  }
884
926
 
885
- .tds-page-header__title-bar{
886
- display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
889
- align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
892
- }
927
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
928
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
930
+ }
893
931
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
932
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
934
+ }
897
935
 
898
- .tds-page-header__primary{
936
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
+ font-weight:var(--t-font-weight-medium);
939
+ }
940
+
941
+ .tds-sidenav-responsive-header{
942
+ display:flex;
943
+ gap:var(--t-spacing-2);
944
+ align-items:center;
899
945
  width:100%;
900
946
  }
901
947
 
902
- .tds-page-header__primary h1{
948
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
+ order:0;
950
+ }
951
+
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
+ flex:1;
954
+ order:1;
903
955
  margin:0;
904
- font-size:var(--tds-page-header-headline-font-size);
905
- font-weight:var(--t-font-weight-normal);
906
- line-height:32px;
907
- color:var(--tds-page-header-headline-color);
908
- overflow-wrap:break-word;
956
+ font-size:var(--t-font-size-lg);
957
+ font-weight:var(--t-font-weight-medium);
958
+ color:var(--t-text-color-headline);
909
959
  }
910
960
 
911
- @media (min-width: 960px){
912
- .tds-page-header__primary{
913
- flex:1 1 max-content;
914
- width:auto;
915
- min-width:0;
916
- max-width:100%;
961
+ @media (max-width: 719px){
962
+ .tds-sidenav-collapse{
963
+ z-index:10001;
964
+ display:none;
965
+ max-width:min(448px, calc(100vw - 48px));
966
+ padding:0;
967
+ margin:12px 0;
968
+ position-area:bottom span-right;
969
+ overflow:hidden;
970
+ outline:0;
971
+ background:var(--t-surface-color-card);
972
+ border:0;
973
+ border-radius:6px;
974
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
+ opacity:var(--tds-sidenav-collapse-open-opacity);
976
+ transform:var(--tds-sidenav-collapse-open-transform);
977
+ transition:var(--tds-sidenav-collapse-transition-enter);
978
+ will-change:transform;
917
979
  }
918
980
 
919
- .tds-page-header__title-bar,
920
- .tds-page-header--profile .tds-page-header__title-bar{
921
- flex-flow:row nowrap;
922
- row-gap:12px;
923
- align-items:flex-start;
981
+ .tds-sidenav-scroll-container{
982
+ --webkit-overflow-scrolling:touch;
983
+ display:block;
984
+ width:100%;
985
+ height:-moz-fit-content;
986
+ height:fit-content;
987
+ padding:var(--t-spacing-2);
988
+ overflow-y:auto;
924
989
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
927
- }
928
990
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
991
+ .tds-sidenav-item :is(a, button) :is(.prefix){
992
+ display:none;
993
+ }
994
+ @supports selector(:popover-open){
995
+ .tds-sidenav-collapse:popover-open{
996
+ display:flex;
931
997
  }
932
- }
933
998
 
934
- .tds-page-header-phone,
935
- .tds-page-header-email{
936
- color:var(--tds-page-header-color);
937
- white-space:nowrap;
938
- }
939
- .tds-page-header-email{
940
- max-width:100%;
941
- overflow:hidden;
942
- text-overflow:ellipsis;
943
- }
999
+ .tds-sidenav-collapse:not(:popover-open){
1000
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
+ transition:var(--tds-sidenav-collapse-transition-exit);
1002
+ }
944
1003
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
1004
+ @starting-style{
1005
+ .tds-sidenav-collapse:popover-open{
1006
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
+ transform:var(--tds-sidenav-collapse-closed-transform);
1008
+ }
1009
+ }
949
1010
  }
1011
+ @supports not selector(:popover-open){
1012
+ .tds-sidenav-collapse.\:popover-open{
1013
+ display:flex;
1014
+ }
950
1015
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
1016
+ .tds-sidenav-collapse:not(.\:popover-open){
1017
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
+ transition:var(--tds-sidenav-collapse-transition-exit);
1019
+ }
954
1020
  }
955
1021
  }
956
1022
 
957
- .tds-checkbox{
958
- --tds-checkbox-font-size:var(--t-font-size-md);
959
- --tds-checkbox-cursor:pointer;
960
- --tds-checkbox-line-height:1.4;
961
- --tds-checkbox-transition-property:background-color, border-color;
1023
+ @media (min-width: 720px){
1024
+ .tds-sidenav-responsive-header{
1025
+ display:none;
1026
+ }
1027
+ }
962
1028
 
963
- --tds-checkbox-input-size:var(--t-element-size-md);
964
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
965
- --tds-checkbox-input-border-color:var(--t-form-border-color);
966
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1029
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
+ display:none;
1031
+ }
967
1032
 
968
- --tds-checkbox-input-icon:none;
969
- --tds-checkbox-input-icon-visibility:hidden;
970
- --tds-checkbox-input-icon-opacity:0;
971
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
+ display:block;
1035
+ }
972
1036
 
973
- --tds-checkbox-label-color:var(--t-form-color);
1037
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
+ display:flex;
1039
+ flex-direction:column;
1040
+ }
974
1041
 
975
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
976
- --tds-checkbox-description-line-height:1.35;
977
- --tds-checkbox-description-color:var(--t-text-color-secondary);
978
- --tds-checkbox-description-invalid-icon-display:none;
979
-
980
- position:relative;
981
- display:inline-grid;
982
- grid-template-columns:auto;
983
- grid-auto-columns:1fr;
984
- gap:var(--t-spacing-fourth) 0;
985
- line-height:var(--tds-checkbox-line-height);
986
- -webkit-user-select:none;
987
- -moz-user-select:none;
988
- user-select:none;
989
- }
990
-
991
- .tds-checkbox label{
992
- grid-area:1 / 2;
993
- padding-inline-start:var(--t-spacing-1);
994
- font-size:var(--tds-checkbox-font-size);
995
- font-weight:var(--t-font-weight-normal);
996
- color:var(--tds-checkbox-label-color);
997
- cursor:var(--tds-checkbox-cursor);
998
- }
999
-
1000
- .tds-checkbox tds-indeterminate{
1001
- display:flex;
1042
+ @layer t-critical{
1043
+ tds-page-header:not(.hydrated){
1044
+ display:none;
1002
1045
  }
1046
+ }
1003
1047
 
1004
- .tds-checkbox input[type="checkbox"]{
1005
- position:relative;
1006
- width:1em;
1007
- height:1em;
1008
- margin:calc((1lh - 1em) / 2) 0 0;
1009
- font-size:var(--tds-checkbox-font-size);
1010
- line-height:inherit;
1011
- -webkit-appearance:none;
1012
- -moz-appearance:none;
1013
- appearance:none;
1014
- cursor:var(--tds-checkbox-cursor);
1015
- background-color:var(--tds-checkbox-input-background-color);
1016
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1017
- border-radius:var(--tds-checkbox-input-border-radius);
1018
- transition-timing-function:var(--t-ease-in-out);
1019
- transition-duration:var(--t-duration-200);
1020
- transition-property:var(--tds-checkbox-transition-property);
1021
- }
1048
+ @layer t-component{
1049
+ .tds-page-header{
1050
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1051
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1052
+ --tds-page-header-color:var(--t-text-color);
1053
+ --tds-page-header-bottom-border-color:transparent;
1054
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1055
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1056
+ --tds-page-header-padding-x:var(--t-spacing-2);
1057
+ --tds-page-header-padding-y:var(--t-spacing-2);
1058
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1059
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1060
+ --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%);
1061
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1062
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1063
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1064
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1065
+ --tds-page-header-nav-item-border-width:1px;
1022
1066
 
1023
- :is(.tds-checkbox input[type="checkbox"])::before{
1024
- position:absolute;
1025
- top:50%;
1026
- left:50%;
1027
- visibility:var(--tds-checkbox-input-icon-visibility);
1028
- width:100%;
1029
- height:100%;
1030
- content:"";
1031
- background-color:var(--tds-checkbox-input-icon-fill);
1032
- border-radius:var(--tds-checkbox-input-border-radius);
1033
- opacity:var(--tds-checkbox-input-icon-opacity);
1034
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1035
- mask-image:var(--tds-checkbox-input-icon);
1036
- -webkit-mask-repeat:no-repeat;
1037
- mask-repeat:no-repeat;
1038
- -webkit-mask-size:contain;
1039
- mask-size:contain;
1040
- transform:translate(-50%, -50%);
1041
- }
1067
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1068
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1042
1069
 
1043
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1044
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1045
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1046
- }
1070
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1071
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1072
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1047
1073
 
1048
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1049
- outline:var(--t-focus-ring-outline);
1050
- outline-offset:var(--t-focus-ring-offset);
1051
- }
1074
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1075
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1052
1076
 
1053
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1054
- pointer-events:none;
1055
- }
1077
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1078
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1079
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1056
1080
 
1057
- @media (prefers-reduced-motion: reduce){
1081
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1082
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1083
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1084
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1085
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1086
+ }
1058
1087
 
1059
- .tds-checkbox input[type="checkbox"]{
1060
- --tds-checkbox-transition-property:none;
1088
+ .tds-page-header--profile{
1089
+ --tds-page-header-padding-y:20px;
1061
1090
  }
1062
- }
1063
1091
 
1064
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1065
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1066
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1067
- --tds-checkbox-input-icon-visibility:visible;
1068
- --tds-checkbox-input-icon-opacity:1;
1092
+ @supports (color: light-dark(#fff, #000)){
1093
+ .tds-page-header{
1094
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1095
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1096
+ }
1069
1097
  }
1070
1098
 
1071
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1072
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1073
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1099
+ @media (min-width: 600px){
1100
+ .tds-page-header{
1101
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1102
+ --tds-page-header-color:var(--t-text-color-secondary);
1103
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1104
+ --tds-page-header-padding-x:var(--t-spacing-3);
1105
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1106
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1107
+ --tds-page-header-nav-background:transparent;
1108
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1109
+ --tds-page-header-nav-item-border-width:1px;
1110
+ --tds-page-header-nav-item-color:var(--t-text-color);
1111
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1112
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1113
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1114
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1115
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1116
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1074
1117
  }
1118
+ }
1119
+ }
1075
1120
 
1076
- .tds-checkbox:has(input:checked){
1077
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1121
+ .tds-page-header{
1122
+ display:flex;
1123
+ flex-direction:column;
1124
+ padding-top:var(--tds-page-header-padding-y);
1125
+ color:var(--tds-page-header-color);
1126
+ background:var(--tds-page-header-background-color);
1127
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1128
+ }
1129
+
1130
+ .tds-page-header:not(.has-nav){
1131
+ padding-bottom:var(--tds-page-header-padding-y);
1078
1132
  }
1079
1133
 
1080
- .tds-checkbox:has(input:indeterminate){
1081
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1134
+ .tds-page-header.inactive{
1135
+ background:var(--tds-page-header-background-color-inactive);
1082
1136
  }
1083
1137
 
1084
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1085
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1086
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1087
- --tds-checkbox-description-invalid-icon-display:inline-block;
1138
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1139
+ width:100%;
1088
1140
  }
1089
1141
 
1090
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1091
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1092
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1142
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1143
+ display:flex;
1144
+ flex-flow:row wrap;
1145
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1146
+ align-items:flex-start;
1147
+ justify-content:flex-start;
1148
+ min-width:0;
1149
+ }
1150
+
1151
+ :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{
1152
+ display:flex;
1153
+ gap:var(--tds-page-header-nav-gap);
1154
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1155
+ margin:0 0 -1px;
1156
+ overflow:auto;
1157
+ list-style:none;
1158
+ background:var(--tds-page-header-nav-background);
1093
1159
  }
1094
1160
 
1095
- :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{
1096
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1097
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1161
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1162
+ position:relative;
1163
+ display:inline-flex;
1164
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1165
+ font-size:var(--t-font-size-sm);
1166
+ line-height:22px;
1167
+ color:var(--tds-page-header-nav-item-color);
1168
+ white-space:nowrap;
1169
+ text-decoration:none;
1170
+ -webkit-appearance:none;
1171
+ -moz-appearance:none;
1172
+ appearance:none;
1173
+ cursor:pointer;
1174
+ outline-offset:-2px;
1175
+ background-color:var(--tds-page-header-nav-item-background-color);
1176
+ background-clip:padding-box;
1177
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1178
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1179
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1098
1180
  }
1099
1181
 
1100
- :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){
1101
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1102
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1182
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1183
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1184
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1185
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1186
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1103
1187
  }
1104
1188
 
1105
- .tds-checkbox:has(input:required) label::after{
1106
- margin-left:.25ch;
1107
- color:var(--t-text-color-status-error);
1108
- content:"*";
1109
- }
1189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1190
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1191
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1192
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1193
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1194
+ }
1110
1195
 
1111
- .tds-checkbox:has(input:disabled){
1112
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1113
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1196
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1197
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1198
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1199
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ }
1114
1201
 
1115
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1116
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1117
- --tds-checkbox-cursor:not-allowed;
1118
- }
1202
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1203
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1204
+ color:var(--tds-page-header-nav-item-color-disabled);
1205
+ cursor:not-allowed;
1206
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
+ opacity:1;
1208
+ }
1119
1209
 
1120
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1121
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1210
+ @media (min-width: 600px){
1211
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1212
+ position:absolute;
1213
+ inset:auto -1px -1px;
1214
+ height:1px;
1215
+ pointer-events:none;
1216
+ content:"";
1217
+ background-color:var(--tds-page-header-bottom-border-color);
1218
+ }
1219
+ }
1220
+
1221
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1222
+ position:relative;
1122
1223
  }
1123
1224
 
1124
- .tds-checkbox-description{
1225
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1226
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1227
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1228
+ }
1229
+
1230
+ :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{
1231
+ position:absolute;
1232
+ top:-5px;
1233
+ right:-2px;
1234
+ width:10px;
1235
+ height:10px;
1236
+ content:"";
1237
+ background:var(--tds-page-header-nav-item-indicator-color);
1238
+ border-radius:50%;
1239
+ }
1240
+
1241
+ @media (prefers-reduced-motion: no-preference){
1242
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1243
+ animation:indicator-pulse 1.25s ease infinite;
1244
+ }
1245
+ }
1246
+
1247
+ .tds-page-header__title-bar{
1125
1248
  display:flex;
1126
- grid-area:2 / 2;
1127
- gap:var(--t-spacing-half);
1249
+ flex-direction:column;
1250
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1128
1251
  align-items:flex-start;
1129
- padding-inline-start:var(--t-spacing-1);
1130
- margin:0;
1131
- font-size:var(--tds-checkbox-description-font-size);
1132
- line-height:var(--tds-checkbox-description-line-height);
1133
- color:var(--tds-checkbox-description-color);
1134
- cursor:text;
1252
+ justify-content:space-between;
1253
+ padding:0 var(--tds-page-header-padding-x);
1135
1254
  }
1136
1255
 
1137
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1138
- display:var(--tds-checkbox-description-invalid-icon-display);
1139
- flex-shrink:0;
1140
- margin-top:calc(.5lh - .5em);
1141
- line-height:var(--tds-checkbox-description-line-height);
1256
+ .tds-page-header--profile > .tds-page-header__title-bar{
1257
+ align-items:center;
1142
1258
  }
1143
1259
 
1144
- .tds-checkbox--sm{
1145
- --tds-checkbox-line-height:1.35;
1146
- --tds-checkbox-input-size:var(--t-element-size-sm);
1147
- --tds-checkbox-font-size:var(--t-font-size-sm);
1148
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1149
- --tds-checkbox-description-line-height:1.3;
1260
+ .tds-page-header__primary{
1261
+ width:100%;
1262
+ }
1263
+
1264
+ .tds-page-header__primary h1{
1265
+ margin:0;
1266
+ font-size:var(--tds-page-header-headline-font-size);
1267
+ font-weight:var(--t-font-weight-normal);
1268
+ line-height:32px;
1269
+ color:var(--tds-page-header-headline-color);
1270
+ overflow-wrap:break-word;
1271
+ }
1272
+
1273
+ @media (min-width: 960px){
1274
+ .tds-page-header__primary{
1275
+ flex:1 1 max-content;
1276
+ width:auto;
1277
+ min-width:0;
1278
+ max-width:100%;
1279
+ }
1280
+
1281
+ .tds-page-header__title-bar,
1282
+ .tds-page-header--profile .tds-page-header__title-bar{
1283
+ flex-flow:row nowrap;
1284
+ row-gap:12px;
1285
+ align-items:flex-start;
1286
+ }
1287
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1288
+ width:auto;
1289
+ }
1290
+
1291
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1292
+ justify-content:flex-end;
1293
+ }
1294
+ }
1295
+
1296
+ .tds-page-header-phone,
1297
+ .tds-page-header-email{
1298
+ color:var(--tds-page-header-color);
1299
+ white-space:nowrap;
1300
+ }
1301
+ .tds-page-header-email{
1302
+ max-width:100%;
1303
+ overflow:hidden;
1304
+ text-overflow:ellipsis;
1305
+ }
1306
+
1307
+ @keyframes indicator-pulse{
1308
+ 0%{
1309
+ opacity:.3;
1310
+ transform:scale(.9);
1311
+ }
1312
+
1313
+ 100%{
1314
+ opacity:0;
1315
+ transform:scale(1.75);
1316
+ }
1150
1317
  }
1151
1318
 
1152
1319
  .tds-checkbox-group{
@@ -1368,103 +1535,231 @@
1368
1535
  clip-path:inset(50%);
1369
1536
  }
1370
1537
 
1538
+ .tds-checkbox{
1539
+ --tds-checkbox-font-size:var(--t-font-size-md);
1540
+ --tds-checkbox-cursor:pointer;
1541
+ --tds-checkbox-line-height:1.4;
1542
+ --tds-checkbox-transition-property:background-color, border-color;
1371
1543
 
1372
- :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{
1373
- -webkit-appearance:none;
1374
- appearance:none;
1375
- }
1376
-
1377
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1378
- inline-size:1em;
1379
- block-size:2em;
1380
- }
1381
-
1382
- [type="file"]:is(.tds-input input){
1383
- padding-block:var(--t-spacing-half);
1384
- padding-inline-start:var(--t-spacing-half);
1385
- }
1386
-
1387
- [type="file"]:is(.tds-input input):not(:disabled){
1388
- color:var(--t-text-color-secondary);
1389
- }
1390
-
1391
- [type="file"]:is(.tds-input input)::file-selector-button{
1392
- --_file-btn-padding-block:3px;
1393
-
1394
- padding-block:var(--_file-btn-padding-block);
1395
- padding-inline:12px;
1396
- margin-inline-end:12px;
1397
- font:inherit;
1398
- 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));
1399
- color:var(--t-text-color-status-neutral);
1400
- cursor:pointer;
1401
- background-color:var(--t-fill-color-button-neutral-solid);
1402
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1403
- border-radius:var(--t-border-radius-md);
1404
- transition-timing-function:var(--t-ease-in-out);
1405
- transition-duration:var(--t-duration-200);
1406
- transition-property:color, background-color, border-color;
1407
- }
1408
-
1409
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1410
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1411
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1412
- }
1413
-
1414
- [type="file"]:is(.tds-input input):active::file-selector-button{
1415
- background-color:var(--t-fill-color-button-neutral-solid-active);
1416
- border-color:var(--t-fill-color-button-neutral-solid-active);
1417
- }
1544
+ --tds-checkbox-input-size:var(--t-element-size-md);
1545
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1546
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1547
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1418
1548
 
1419
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1420
- color:var(--t-text-color-disabled);
1421
- pointer-events:none;
1422
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1423
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1424
- }
1425
- @supports (field-sizing: content){
1426
- .tds-input--auto-width{
1427
- inline-size:-moz-fit-content;
1428
- inline-size:fit-content;
1429
- min-inline-size:min(100%, 122px);
1430
- }
1549
+ --tds-checkbox-input-icon:none;
1550
+ --tds-checkbox-input-icon-visibility:hidden;
1551
+ --tds-checkbox-input-icon-opacity:0;
1552
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1431
1553
 
1432
- .tds-input--auto-width input{
1433
- field-sizing:content;
1434
- inline-size:auto;
1435
- }
1436
- }
1554
+ --tds-checkbox-label-color:var(--t-form-color);
1437
1555
 
1438
- .tds-modal-overlay{
1439
- --tds-modal-min-margin-block:var(--t-spacing-3);
1556
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1557
+ --tds-checkbox-description-line-height:1.35;
1558
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1559
+ --tds-checkbox-description-invalid-icon-display:none;
1440
1560
 
1441
- position:fixed;
1442
- inset:0;
1443
- z-index:1000;
1444
- display:grid;
1445
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1446
- justify-items:center;
1447
- overflow-y:auto;
1448
- background:hsl(0 0% 0% / 40%);
1561
+ position:relative;
1562
+ display:inline-grid;
1563
+ grid-template-columns:auto;
1564
+ grid-auto-columns:1fr;
1565
+ gap:var(--t-spacing-fourth) 0;
1566
+ line-height:var(--tds-checkbox-line-height);
1567
+ -webkit-user-select:none;
1568
+ -moz-user-select:none;
1569
+ user-select:none;
1449
1570
  }
1450
1571
 
1451
- .tds-modal-overlay[data-entering]{
1452
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1572
+ .tds-checkbox label{
1573
+ grid-area:1 / 2;
1574
+ padding-inline-start:var(--t-spacing-1);
1575
+ font-size:var(--tds-checkbox-font-size);
1576
+ font-weight:var(--t-font-weight-normal);
1577
+ color:var(--tds-checkbox-label-color);
1578
+ cursor:var(--tds-checkbox-cursor);
1453
1579
  }
1454
1580
 
1455
- .tds-modal-overlay[data-exiting]{
1456
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1581
+ .tds-checkbox tds-indeterminate{
1582
+ display:flex;
1457
1583
  }
1458
1584
 
1459
- @keyframes tds-modal-overlay-fade{
1460
- from{
1461
- opacity:0;
1585
+ .tds-checkbox input[type="checkbox"]{
1586
+ position:relative;
1587
+ width:1em;
1588
+ height:1em;
1589
+ margin:calc((1lh - 1em) / 2) 0 0;
1590
+ font-size:var(--tds-checkbox-font-size);
1591
+ line-height:inherit;
1592
+ -webkit-appearance:none;
1593
+ -moz-appearance:none;
1594
+ appearance:none;
1595
+ cursor:var(--tds-checkbox-cursor);
1596
+ background-color:var(--tds-checkbox-input-background-color);
1597
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1598
+ border-radius:var(--tds-checkbox-input-border-radius);
1599
+ transition-timing-function:var(--t-ease-in-out);
1600
+ transition-duration:var(--t-duration-200);
1601
+ transition-property:var(--tds-checkbox-transition-property);
1462
1602
  }
1463
- }
1464
1603
 
1465
- .tds-modal-frame{
1466
- --tds-modal-width:600px;
1467
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1604
+ :is(.tds-checkbox input[type="checkbox"])::before{
1605
+ position:absolute;
1606
+ top:50%;
1607
+ left:50%;
1608
+ visibility:var(--tds-checkbox-input-icon-visibility);
1609
+ width:100%;
1610
+ height:100%;
1611
+ content:"";
1612
+ background-color:var(--tds-checkbox-input-icon-fill);
1613
+ border-radius:var(--tds-checkbox-input-border-radius);
1614
+ opacity:var(--tds-checkbox-input-icon-opacity);
1615
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1616
+ mask-image:var(--tds-checkbox-input-icon);
1617
+ -webkit-mask-repeat:no-repeat;
1618
+ mask-repeat:no-repeat;
1619
+ -webkit-mask-size:contain;
1620
+ mask-size:contain;
1621
+ transform:translate(-50%, -50%);
1622
+ }
1623
+
1624
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1625
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1626
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1627
+ }
1628
+
1629
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1630
+ outline:var(--t-focus-ring-outline);
1631
+ outline-offset:var(--t-focus-ring-offset);
1632
+ }
1633
+
1634
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1635
+ pointer-events:none;
1636
+ }
1637
+
1638
+ @media (prefers-reduced-motion: reduce){
1639
+
1640
+ .tds-checkbox input[type="checkbox"]{
1641
+ --tds-checkbox-transition-property:none;
1642
+ }
1643
+ }
1644
+
1645
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1646
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1647
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1648
+ --tds-checkbox-input-icon-visibility:visible;
1649
+ --tds-checkbox-input-icon-opacity:1;
1650
+ }
1651
+
1652
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1653
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1654
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1655
+ }
1656
+
1657
+ .tds-checkbox:has(input:checked){
1658
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1659
+ }
1660
+
1661
+ .tds-checkbox:has(input:indeterminate){
1662
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1663
+ }
1664
+
1665
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1666
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1667
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1668
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1669
+ }
1670
+
1671
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1672
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1673
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1674
+ }
1675
+
1676
+ :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{
1677
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1678
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1679
+ }
1680
+
1681
+ :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){
1682
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1683
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1684
+ }
1685
+
1686
+ .tds-checkbox:has(input:required) label::after{
1687
+ margin-left:.25ch;
1688
+ color:var(--t-text-color-status-error);
1689
+ content:"*";
1690
+ }
1691
+
1692
+ .tds-checkbox:has(input:disabled){
1693
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1694
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1695
+
1696
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1697
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1698
+ --tds-checkbox-cursor:not-allowed;
1699
+ }
1700
+
1701
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1702
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1703
+ }
1704
+
1705
+ .tds-checkbox-description{
1706
+ display:flex;
1707
+ grid-area:2 / 2;
1708
+ gap:var(--t-spacing-half);
1709
+ align-items:flex-start;
1710
+ padding-inline-start:var(--t-spacing-1);
1711
+ margin:0;
1712
+ font-size:var(--tds-checkbox-description-font-size);
1713
+ line-height:var(--tds-checkbox-description-line-height);
1714
+ color:var(--tds-checkbox-description-color);
1715
+ cursor:text;
1716
+ }
1717
+
1718
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1719
+ display:var(--tds-checkbox-description-invalid-icon-display);
1720
+ flex-shrink:0;
1721
+ margin-top:calc(.5lh - .5em);
1722
+ line-height:var(--tds-checkbox-description-line-height);
1723
+ }
1724
+
1725
+ .tds-checkbox--sm{
1726
+ --tds-checkbox-line-height:1.35;
1727
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1728
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1729
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1730
+ --tds-checkbox-description-line-height:1.3;
1731
+ }
1732
+
1733
+ .tds-modal-overlay{
1734
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1735
+
1736
+ position:fixed;
1737
+ inset:0;
1738
+ z-index:1000;
1739
+ display:grid;
1740
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1741
+ justify-items:center;
1742
+ overflow-y:auto;
1743
+ background:hsl(0 0% 0% / 40%);
1744
+ }
1745
+
1746
+ .tds-modal-overlay[data-entering]{
1747
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1748
+ }
1749
+
1750
+ .tds-modal-overlay[data-exiting]{
1751
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1752
+ }
1753
+
1754
+ @keyframes tds-modal-overlay-fade{
1755
+ from{
1756
+ opacity:0;
1757
+ }
1758
+ }
1759
+
1760
+ .tds-modal-frame{
1761
+ --tds-modal-width:600px;
1762
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1468
1763
  display:flex;
1469
1764
 
1470
1765
  grid-row:2;
@@ -1598,6 +1893,73 @@
1598
1893
  }
1599
1894
  }
1600
1895
 
1896
+
1897
+ :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{
1898
+ -webkit-appearance:none;
1899
+ appearance:none;
1900
+ }
1901
+
1902
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1903
+ inline-size:1em;
1904
+ block-size:2em;
1905
+ }
1906
+
1907
+ [type="file"]:is(.tds-input input){
1908
+ padding-block:var(--t-spacing-half);
1909
+ padding-inline-start:var(--t-spacing-half);
1910
+ }
1911
+
1912
+ [type="file"]:is(.tds-input input):not(:disabled){
1913
+ color:var(--t-text-color-secondary);
1914
+ }
1915
+
1916
+ [type="file"]:is(.tds-input input)::file-selector-button{
1917
+ --_file-btn-padding-block:3px;
1918
+
1919
+ padding-block:var(--_file-btn-padding-block);
1920
+ padding-inline:12px;
1921
+ margin-inline-end:12px;
1922
+ font:inherit;
1923
+ 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));
1924
+ color:var(--t-text-color-status-neutral);
1925
+ cursor:pointer;
1926
+ background-color:var(--t-fill-color-button-neutral-solid);
1927
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1928
+ border-radius:var(--t-border-radius-md);
1929
+ transition-timing-function:var(--t-ease-in-out);
1930
+ transition-duration:var(--t-duration-200);
1931
+ transition-property:color, background-color, border-color;
1932
+ }
1933
+
1934
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1935
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1936
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1937
+ }
1938
+
1939
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1940
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1941
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1942
+ }
1943
+
1944
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1945
+ color:var(--t-text-color-disabled);
1946
+ pointer-events:none;
1947
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1948
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1949
+ }
1950
+ @supports (field-sizing: content){
1951
+ .tds-input--auto-width{
1952
+ inline-size:-moz-fit-content;
1953
+ inline-size:fit-content;
1954
+ min-inline-size:min(100%, 122px);
1955
+ }
1956
+
1957
+ .tds-input--auto-width input{
1958
+ field-sizing:content;
1959
+ inline-size:auto;
1960
+ }
1961
+ }
1962
+
1601
1963
  .tds-popover{
1602
1964
  max-inline-size:24rem;
1603
1965
  overflow:auto;
@@ -1640,102 +2002,19 @@
1640
2002
  outline:0;
1641
2003
  }
1642
2004
 
1643
- .tds-radio-group{
1644
- --tds-radio-group-font-size:var(--t-font-size-md);
1645
- --tds-radio-group-line-height:1.4;
1646
- --tds-radio-group-gap:var(--t-spacing-1);
2005
+ .tds-radio{
2006
+ --tds-radio-font-size:var(--t-font-size-md);
2007
+ --tds-radio-cursor:pointer;
2008
+ --tds-radio-line-height:1.4;
2009
+ --tds-radio-transition-property:border-width;
1647
2010
 
1648
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1649
- --tds-radio-group-description-line-height:1.35;
1650
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1651
- --tds-radio-group-description-invalid-icon-display:none;
1652
- display:flex;
1653
- flex-direction:column;
1654
- gap:0;
1655
- padding:0;
1656
- margin:0;
2011
+ --tds-radio-input-size:var(--t-element-size-md);
2012
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2013
+ --tds-radio-input-border-color:var(--t-form-border-color);
2014
+ --tds-radio-input-border-width:var(--t-form-border-width);
2015
+ --tds-radio-input-background-color:var(--t-form-background-color);
1657
2016
 
1658
- font-size:var(--tds-radio-group-font-size);
1659
- line-height:var(--tds-radio-group-line-height);
1660
- border:0;
1661
- }
1662
-
1663
- .tds-radio-group legend{
1664
- float:left;
1665
- padding:0;
1666
- margin:0;
1667
- }
1668
-
1669
- .tds-radio-group[aria-invalid="true"]{
1670
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1671
- --tds-radio-group-description-invalid-icon-display:inline-block;
1672
- }
1673
-
1674
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1675
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1676
- }
1677
-
1678
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1679
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1680
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1681
- }
1682
-
1683
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1684
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1685
- }
1686
-
1687
- .tds-radio-group:has(input:required) legend::after{
1688
- margin-left:.25ch;
1689
- color:var(--t-text-color-status-error);
1690
- content:"*";
1691
- }
1692
-
1693
- .tds-radio-group-fields{
1694
- display:flex;
1695
- flex-direction:column;
1696
- gap:var(--tds-radio-group-gap);
1697
- align-items:flex-start;
1698
- margin-top:var(--t-spacing-1);
1699
- }
1700
-
1701
- .tds-radio-group-description{
1702
- display:flex;
1703
- gap:var(--t-spacing-half);
1704
- align-items:flex-start;
1705
- margin:var(--t-spacing-fourth) 0 0;
1706
- font-size:var(--tds-radio-group-description-font-size);
1707
- line-height:var(--tds-radio-group-description-line-height);
1708
- color:var(--tds-radio-group-description-color);
1709
- cursor:text;
1710
- }
1711
-
1712
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1713
- display:var(--tds-radio-group-description-invalid-icon-display);
1714
- flex-shrink:0;
1715
- margin-top:calc(.5lh - .5em);
1716
- line-height:var(--tds-radio-group-description-line-height);
1717
- }
1718
-
1719
- .tds-radio-group--sm{
1720
- --tds-radio-group-line-height:1.35;
1721
- --tds-radio-group-font-size:var(--t-font-size-sm);
1722
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1723
- --tds-radio-group-description-line-height:1.3;
1724
- }
1725
-
1726
- .tds-radio{
1727
- --tds-radio-font-size:var(--t-font-size-md);
1728
- --tds-radio-cursor:pointer;
1729
- --tds-radio-line-height:1.4;
1730
- --tds-radio-transition-property:border-width;
1731
-
1732
- --tds-radio-input-size:var(--t-element-size-md);
1733
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1734
- --tds-radio-input-border-color:var(--t-form-border-color);
1735
- --tds-radio-input-border-width:var(--t-form-border-width);
1736
- --tds-radio-input-background-color:var(--t-form-background-color);
1737
-
1738
- --tds-radio-label-color:var(--t-form-color);
2017
+ --tds-radio-label-color:var(--t-form-color);
1739
2018
 
1740
2019
  --tds-radio-description-font-size:var(--t-font-size-sm);
1741
2020
  --tds-radio-description-line-height:1.35;
@@ -1856,6 +2135,89 @@
1856
2135
  --tds-radio-description-line-height:1.3;
1857
2136
  }
1858
2137
 
2138
+ .tds-radio-group{
2139
+ --tds-radio-group-font-size:var(--t-font-size-md);
2140
+ --tds-radio-group-line-height:1.4;
2141
+ --tds-radio-group-gap:var(--t-spacing-1);
2142
+
2143
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2144
+ --tds-radio-group-description-line-height:1.35;
2145
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2146
+ --tds-radio-group-description-invalid-icon-display:none;
2147
+ display:flex;
2148
+ flex-direction:column;
2149
+ gap:0;
2150
+ padding:0;
2151
+ margin:0;
2152
+
2153
+ font-size:var(--tds-radio-group-font-size);
2154
+ line-height:var(--tds-radio-group-line-height);
2155
+ border:0;
2156
+ }
2157
+
2158
+ .tds-radio-group legend{
2159
+ float:left;
2160
+ padding:0;
2161
+ margin:0;
2162
+ }
2163
+
2164
+ .tds-radio-group[aria-invalid="true"]{
2165
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2166
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2167
+ }
2168
+
2169
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2170
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2171
+ }
2172
+
2173
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2174
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2175
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2176
+ }
2177
+
2178
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2179
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2180
+ }
2181
+
2182
+ .tds-radio-group:has(input:required) legend::after{
2183
+ margin-left:.25ch;
2184
+ color:var(--t-text-color-status-error);
2185
+ content:"*";
2186
+ }
2187
+
2188
+ .tds-radio-group-fields{
2189
+ display:flex;
2190
+ flex-direction:column;
2191
+ gap:var(--tds-radio-group-gap);
2192
+ align-items:flex-start;
2193
+ margin-top:var(--t-spacing-1);
2194
+ }
2195
+
2196
+ .tds-radio-group-description{
2197
+ display:flex;
2198
+ gap:var(--t-spacing-half);
2199
+ align-items:flex-start;
2200
+ margin:var(--t-spacing-fourth) 0 0;
2201
+ font-size:var(--tds-radio-group-description-font-size);
2202
+ line-height:var(--tds-radio-group-description-line-height);
2203
+ color:var(--tds-radio-group-description-color);
2204
+ cursor:text;
2205
+ }
2206
+
2207
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2208
+ display:var(--tds-radio-group-description-invalid-icon-display);
2209
+ flex-shrink:0;
2210
+ margin-top:calc(.5lh - .5em);
2211
+ line-height:var(--tds-radio-group-description-line-height);
2212
+ }
2213
+
2214
+ .tds-radio-group--sm{
2215
+ --tds-radio-group-line-height:1.35;
2216
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2217
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2218
+ --tds-radio-group-description-line-height:1.3;
2219
+ }
2220
+
1859
2221
  .tds-toggle-switch{
1860
2222
  --tds-toggle-switch-font-size:var(--t-font-size-md);
1861
2223
  --tds-toggle-switch-cursor:pointer;
@@ -2101,506 +2463,144 @@
2101
2463
  }
2102
2464
  }
2103
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);
2104
2476
 
2105
- @media (prefers-reduced-motion: no-preference){
2477
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2106
2478
 
2107
- :root{
2108
- interpolate-size:allow-keywords;
2479
+ display:flex;
2480
+ flex-direction:column;
2481
+ gap:var(--t-spacing-half);
2109
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);
2110
2488
  }
2111
2489
 
2112
- @layer tds-component{
2113
- tds-sidenav,
2114
- .tds-sidenav{
2115
- --tds-sidenav-indent:12px;
2116
- --tds-sidenav-item-depth:0;
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
+ }
2117
2512
 
2118
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2513
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2514
+ border-color:var(--tds-input-border-color-hover);
2515
+ }
2119
2516
 
2120
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2121
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
2122
- --tds-sidenav-collapse-closed-opacity:0;
2123
- --tds-sidenav-collapse-open-opacity:1;
2124
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
2125
- --tds-sidenav-collapse-open-transform:translateY(0);
2517
+ :is(.tds-input :is(input,textarea)):focus{
2518
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2519
+ }
2126
2520
 
2127
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
2128
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2129
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2130
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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
+ }
2131
2526
 
2132
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2133
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2134
- --tds-sidenav-item-nested-background-selected:transparent;
2527
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
2528
+ color:var(--t-form-placeholder-color);
2529
+ -moz-user-select:none;
2530
+ user-select:none;
2531
+ }
2135
2532
 
2136
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2137
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2138
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2533
+ :is(.tds-input :is(input,textarea))::placeholder{
2534
+ color:var(--t-form-placeholder-color);
2535
+ -webkit-user-select:none;
2536
+ -moz-user-select:none;
2537
+ user-select:none;
2538
+ }
2139
2539
 
2140
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2141
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2540
+ @media (prefers-reduced-motion: reduce){
2541
+
2542
+ .tds-input :is(input,textarea){
2543
+ --tds-input-transition-property:none;
2142
2544
  }
2545
+ }
2143
2546
 
2144
- @media (prefers-reduced-motion: reduce){
2145
- tds-sidenav,
2146
- .tds-sidenav{
2147
- --tds-sidenav-collapse-transition-enter:none;
2148
- --tds-sidenav-collapse-transition-exit:none;
2149
- --tds-sidenav-collapse-closed-transform:none;
2150
- --tds-sidenav-collapse-open-transform:none;
2151
- }
2152
- }
2153
-
2154
- .tds-sidenav--theme-gray{
2155
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2156
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2157
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2158
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2159
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2547
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2548
+ --tds-input-background-color:var(--t-form-background-color-error);
2549
+ --tds-input-border-color:var(--t-form-border-color-error);
2550
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2551
+ --tds-input-description-color:var(--t-text-color-status-error);
2552
+ --tds-input-description-invalid-icon-display:inline-block;
2160
2553
  }
2161
- }
2162
2554
 
2163
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2164
- display:flex;
2165
- }
2555
+ .tds-input:has(:is(input,textarea):required) label::after{
2556
+ margin-left:.25ch;
2557
+ color:var(--t-text-color-status-error);
2558
+ content:"*";
2559
+ }
2166
2560
 
2167
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2168
- flex-direction:column;
2169
- gap:var(--t-spacing-half);
2170
- width:100%;
2561
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2562
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2563
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2564
+ --tds-input-color:var(--t-form-color-disabled);
2171
2565
  }
2172
2566
 
2173
- .tds-sidenav-section-list{
2174
- width:100%;
2175
- padding:0;
2176
- margin:0;
2177
- list-style:none;
2178
- }
2179
-
2180
- .tds-sidenav-section-header{
2181
- display:flex;
2182
- align-items:baseline;
2183
- justify-content:space-between;
2184
- padding-top:var(--t-spacing-2);
2185
- }
2567
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2568
+ cursor:not-allowed;
2569
+ }
2186
2570
 
2187
- .tds-sidenav-section-header h2{
2188
- margin:0;
2189
- font-size:var(--t-font-size-sm);
2190
- font-weight:var(--t-font-weight-semibold);
2191
- line-height:1.35;
2192
- color:var(--t-text-color-secondary);
2193
- text-transform:uppercase;
2571
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2572
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2573
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2194
2574
  }
2195
2575
 
2196
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2197
- padding-top:0;
2198
- }
2576
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2577
+ border-color:var(--tds-input-border-color-hover);
2578
+ }
2199
2579
 
2200
- .tds-sidenav-section-header [slot="label-actions"]{
2201
- display:flex;
2202
- gap:var(--t-spacing-half);
2203
- align-items:center;
2580
+ .tds-input.tds-input--lg{
2581
+ --tds-input-min-height:var(--t-container-size-lg);
2582
+ --tds-input-font-size:var(--t-font-size-lg);
2204
2583
  }
2205
2584
 
2206
- .tds-sidenav-section [slot="section-actions"]{
2585
+ .tds-input-description{
2207
2586
  display:flex;
2208
- gap:12px;
2209
- align-items:center;
2210
- min-height:42px;
2211
- padding:var(--t-spacing-1) 0;
2212
- }
2213
-
2214
- .tds-sidenav-section-list,
2215
- .tds-sidenav-item{
2216
- width:100%;
2217
- padding:0;
2587
+ gap:var(--t-spacing-half);
2588
+ align-items:flex-start;
2218
2589
  margin:0;
2590
+ font-size:var(--t-font-size-sm);
2591
+ line-height:1.35;
2592
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2593
+ cursor:text;
2219
2594
  }
2220
2595
 
2221
- .tds-sidenav-item :is(a,button){
2222
- position:relative;
2223
- display:flex;
2224
- gap:12px;
2225
- align-items:center;
2226
- width:100%;
2227
- padding:12px;
2228
- overflow:hidden;
2229
- font-size:var(--t-font-size-sm);
2230
- line-height:18px;
2231
- color:var(--t-text-color-headline);
2232
- white-space:nowrap;
2233
- text-decoration:none;
2234
- -webkit-appearance:none;
2235
- -moz-appearance:none;
2236
- appearance:none;
2237
- cursor:pointer;
2238
- background-color:var(--tds-sidenav-item-background, transparent);
2239
- border:0;
2240
- border-radius:var(--t-border-radius);
2241
- transition:var(--tds-sidenav-item-transition);
2242
- }
2243
-
2244
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2245
- display:block;
2246
- flex:1;
2247
- overflow:hidden;
2248
- text-overflow:ellipsis;
2249
- text-align:left;
2250
- white-space:nowrap;
2251
- }
2252
-
2253
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2254
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2255
- color:var(--t-text-color-headline);
2256
- text-decoration:none;
2257
- }
2258
-
2259
- :is(.tds-sidenav-item :is(a,button)):active{
2260
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2261
- }
2262
-
2263
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2264
- overflow:hidden;
2265
- color:var(--tds-sidenav-item-icon-color);
2266
- }
2267
-
2268
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
2269
- display:block;
2270
- width:var(--tds-sidenav-item-icon-size);
2271
- height:var(--tds-sidenav-item-icon-size);
2272
- }
2273
-
2274
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2275
- --tds-sidenav-indent:19px;
2276
- }
2277
-
2278
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2279
- visibility:visible;
2280
- block-size:auto;
2281
- opacity:1;
2282
- }
2283
-
2284
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2285
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2286
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2287
-
2288
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2289
- font-weight:var(--t-font-weight-semibold);
2290
- }
2291
-
2292
- .tds-sidenav-item:has(.tds-sidenav-section){
2293
- display:flex;
2294
- flex-direction:column;
2295
- gap:var(--t-spacing-half);
2296
- }
2297
-
2298
- .tds-sidenav-item .tds-sidenav-section-list{
2299
- --tds-sidenav-item-depth:1;
2300
- gap:0;
2596
+ .tds-input-description .tds-input-description-invalid-icon{
2597
+ display:var(--tds-input-description-invalid-icon-display, none);
2598
+ flex-shrink:0;
2599
+ margin-block-start:calc(.5lh - .5em);
2600
+ line-height:1.35;
2301
2601
  }
2302
2602
 
2303
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2304
- visibility:hidden;
2305
- block-size:0;
2306
- overflow-y:clip;
2307
- opacity:0;
2308
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2309
- }
2310
-
2311
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2312
- --tds-sidenav-item-depth:2;
2313
- }
2314
-
2315
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2316
- min-height:var(--t-element-size-2xl);
2317
- padding-block:9px;
2318
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2319
- line-height:1;
2320
- background-color:transparent;
2321
- }
2322
-
2323
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2324
- position:absolute;
2325
- top:0;
2326
- bottom:0;
2327
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2328
- width:2px;
2329
- content:"";
2330
- background-color:var(--tds-sidenav-item-nested-border-color);
2331
- transition:var(--tds-sidenav-item-transition);
2332
- }
2333
-
2334
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2335
- position:absolute;
2336
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2337
- z-index:-1;
2338
- height:100%;
2339
- content:"";
2340
- background-color:var(--tds-sidenav-item-nested-background);
2341
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2342
- transition:var(--tds-sidenav-item-transition);
2343
- }
2344
-
2345
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
2346
- display:block;
2347
- text-align:left;
2348
- white-space:normal;
2349
- }
2350
-
2351
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
2352
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2353
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2354
- }
2355
-
2356
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2357
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2358
- }
2359
-
2360
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2361
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2362
- font-weight:var(--t-font-weight-medium);
2363
- }
2364
-
2365
- .tds-sidenav-responsive-header{
2366
- display:flex;
2367
- gap:var(--t-spacing-2);
2368
- align-items:center;
2369
- width:100%;
2370
- }
2371
-
2372
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2373
- order:0;
2374
- }
2375
-
2376
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2377
- flex:1;
2378
- order:1;
2379
- margin:0;
2380
- font-size:var(--t-font-size-lg);
2381
- font-weight:var(--t-font-weight-medium);
2382
- color:var(--t-text-color-headline);
2383
- }
2384
-
2385
- @media (max-width: 719px){
2386
- .tds-sidenav-collapse{
2387
- z-index:10001;
2388
- display:none;
2389
- max-width:min(448px, calc(100vw - 48px));
2390
- padding:0;
2391
- margin:12px 0;
2392
- position-area:bottom span-right;
2393
- overflow:hidden;
2394
- outline:0;
2395
- background:var(--t-surface-color-card);
2396
- border:0;
2397
- border-radius:6px;
2398
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2399
- opacity:var(--tds-sidenav-collapse-open-opacity);
2400
- transform:var(--tds-sidenav-collapse-open-transform);
2401
- transition:var(--tds-sidenav-collapse-transition-enter);
2402
- will-change:transform;
2403
- }
2404
-
2405
- .tds-sidenav-scroll-container{
2406
- --webkit-overflow-scrolling:touch;
2407
- display:block;
2408
- width:100%;
2409
- height:-moz-fit-content;
2410
- height:fit-content;
2411
- padding:var(--t-spacing-2);
2412
- overflow-y:auto;
2413
- }
2414
-
2415
- .tds-sidenav-item :is(a, button) :is(.prefix){
2416
- display:none;
2417
- }
2418
- @supports selector(:popover-open){
2419
- .tds-sidenav-collapse:popover-open{
2420
- display:flex;
2421
- }
2422
-
2423
- .tds-sidenav-collapse:not(:popover-open){
2424
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2425
- transition:var(--tds-sidenav-collapse-transition-exit);
2426
- }
2427
-
2428
- @starting-style{
2429
- .tds-sidenav-collapse:popover-open{
2430
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2431
- transform:var(--tds-sidenav-collapse-closed-transform);
2432
- }
2433
- }
2434
- }
2435
- @supports not selector(:popover-open){
2436
- .tds-sidenav-collapse.\:popover-open{
2437
- display:flex;
2438
- }
2439
-
2440
- .tds-sidenav-collapse:not(.\:popover-open){
2441
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2442
- transition:var(--tds-sidenav-collapse-transition-exit);
2443
- }
2444
- }
2445
- }
2446
-
2447
- @media (min-width: 720px){
2448
- .tds-sidenav-responsive-header{
2449
- display:none;
2450
- }
2451
- }
2452
-
2453
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2454
- display:none;
2455
- }
2456
-
2457
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2458
- display:block;
2459
- }
2460
-
2461
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2462
- display:flex;
2463
- flex-direction:column;
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
-
2527
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2528
- color:var(--t-form-placeholder-color);
2529
- -moz-user-select:none;
2530
- user-select:none;
2531
- }
2532
-
2533
- :is(.tds-input :is(input,textarea))::placeholder{
2534
- color:var(--t-form-placeholder-color);
2535
- -webkit-user-select:none;
2536
- -moz-user-select:none;
2537
- user-select:none;
2538
- }
2539
-
2540
- @media (prefers-reduced-motion: reduce){
2541
-
2542
- .tds-input :is(input,textarea){
2543
- --tds-input-transition-property:none;
2544
- }
2545
- }
2546
-
2547
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2548
- --tds-input-background-color:var(--t-form-background-color-error);
2549
- --tds-input-border-color:var(--t-form-border-color-error);
2550
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2551
- --tds-input-description-color:var(--t-text-color-status-error);
2552
- --tds-input-description-invalid-icon-display:inline-block;
2553
- }
2554
-
2555
- .tds-input:has(:is(input,textarea):required) label::after{
2556
- margin-left:.25ch;
2557
- color:var(--t-text-color-status-error);
2558
- content:"*";
2559
- }
2560
-
2561
- .tds-input:where(:has(:is(input,textarea):disabled)){
2562
- --tds-input-border-color:var(--t-form-border-color-disabled);
2563
- --tds-input-background-color:var(--t-form-background-color-disabled);
2564
- --tds-input-color:var(--t-form-color-disabled);
2565
- }
2566
-
2567
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2568
- cursor:not-allowed;
2569
- }
2570
-
2571
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2572
- --tds-input-border-color:var(--t-form-border-color-readonly);
2573
- --tds-input-background-color:var(--t-form-background-color-readonly);
2574
- }
2575
-
2576
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2577
- border-color:var(--tds-input-border-color-hover);
2578
- }
2579
-
2580
- .tds-input.tds-input--lg{
2581
- --tds-input-min-height:var(--t-container-size-lg);
2582
- --tds-input-font-size:var(--t-font-size-lg);
2583
- }
2584
-
2585
- .tds-input-description{
2586
- display:flex;
2587
- gap:var(--t-spacing-half);
2588
- align-items:flex-start;
2589
- margin:0;
2590
- font-size:var(--t-font-size-sm);
2591
- line-height:1.35;
2592
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2593
- cursor:text;
2594
- }
2595
-
2596
- .tds-input-description .tds-input-description-invalid-icon{
2597
- display:var(--tds-input-description-invalid-icon-display, none);
2598
- flex-shrink:0;
2599
- margin-block-start:calc(.5lh - .5em);
2600
- line-height:1.35;
2601
- }
2602
-
2603
- @layer t-critical, t-component;
2603
+ @layer t-critical, t-component;
2604
2604
 
2605
2605
  :root{
2606
2606
  --t-border-radius-sm:2px;
@@ -3720,728 +3720,467 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3720
3720
  [data-padding-block-xs="4"]{ padding-block:var(--t-spacing-4); }
3721
3721
  [data-padding-block-xs="5"]{ padding-block:var(--t-spacing-5); }
3722
3722
  [data-padding-block-xs="6"]{ padding-block:var(--t-spacing-6); }
3723
- [data-padding-block-xs="7"]{ padding-block:var(--t-spacing-7); }
3724
-
3725
- [data-padding-inline-xs="0"]{ padding-inline:0; }
3726
- [data-padding-inline-xs="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3727
- [data-padding-inline-xs="0.5"]{ padding-inline:var(--t-spacing-half); }
3728
- [data-padding-inline-xs="1"]{ padding-inline:var(--t-spacing-1); }
3729
- [data-padding-inline-xs="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3730
- [data-padding-inline-xs="2"]{ padding-inline:var(--t-spacing-2); }
3731
- [data-padding-inline-xs="3"]{ padding-inline:var(--t-spacing-3); }
3732
- [data-padding-inline-xs="4"]{ padding-inline:var(--t-spacing-4); }
3733
- [data-padding-inline-xs="5"]{ padding-inline:var(--t-spacing-5); }
3734
- [data-padding-inline-xs="6"]{ padding-inline:var(--t-spacing-6); }
3735
- [data-padding-inline-xs="7"]{ padding-inline:var(--t-spacing-7); }
3736
- }
3737
- @media (min-width: 600px){
3738
- [data-flex-direction-sm="row"]{ flex-direction:row; }
3739
- [data-flex-direction-sm="row-reverse"]{ flex-direction:row-reverse; }
3740
- [data-flex-direction-sm="column"]{ flex-direction:column; }
3741
- [data-flex-direction-sm="column-reverse"]{ flex-direction:column-reverse; }
3742
-
3743
- [data-flex-align-sm="stretch"]{ align-items:stretch; }
3744
- [data-flex-align-sm="start"]{ align-items:start; }
3745
- [data-flex-align-sm="center"]{ align-items:center; }
3746
- [data-flex-align-sm="end"]{ align-items:end; }
3747
- [data-flex-align-sm="baseline"]{ align-items:baseline; }
3748
-
3749
- [data-flex-align-self-sm="auto"]{ align-self:auto; }
3750
- [data-flex-align-self-sm="stretch"]{ align-self:stretch; }
3751
- [data-flex-align-self-sm="start"]{ align-self:start; }
3752
- [data-flex-align-self-sm="center"]{ align-self:center; }
3753
- [data-flex-align-self-sm="end"]{ align-self:end; }
3754
- [data-flex-align-self-sm="baseline"]{ align-self:baseline; }
3755
-
3756
- [data-flex-justify-sm="start"]{ justify-content:start; }
3757
- [data-flex-justify-sm="center"]{ justify-content:center; }
3758
- [data-flex-justify-sm="end"]{ justify-content:end; }
3759
- [data-flex-justify-sm="space-between"]{ justify-content:space-between; }
3760
- [data-flex-justify-sm="space-around"]{ justify-content:space-around; }
3761
- [data-flex-justify-sm="space-evenly"]{ justify-content:space-evenly; }
3762
-
3763
- [data-flex-wrap-sm="nowrap"]{ flex-wrap:nowrap; }
3764
- [data-flex-wrap-sm="wrap"]{ flex-wrap:wrap; }
3765
- [data-flex-wrap-sm="wrap-reverse"]{ flex-wrap:wrap-reverse; }
3766
-
3767
- [data-flex-grow-sm="0"]{ flex-grow:0; }
3768
- [data-flex-grow-sm="1"]{ flex-grow:1; }
3769
-
3770
- [data-flex-shrink-sm="0"]{ flex-shrink:0; }
3771
- [data-flex-shrink-sm="1"]{ flex-shrink:1; }
3772
-
3773
- [data-flex-gap-sm="0"]{ gap:0; }
3774
- [data-flex-gap-sm="0.25"]{ gap:var(--t-spacing-fourth); }
3775
- [data-flex-gap-sm="0.5"]{ gap:var(--t-spacing-half); }
3776
- [data-flex-gap-sm="1"]{ gap:var(--t-spacing-1); }
3777
- [data-flex-gap-sm="1.5"]{ gap:var(--t-spacing-1-half); }
3778
- [data-flex-gap-sm="2"]{ gap:var(--t-spacing-2); }
3779
- [data-flex-gap-sm="3"]{ gap:var(--t-spacing-3); }
3780
- [data-flex-gap-sm="4"]{ gap:var(--t-spacing-4); }
3781
- [data-flex-gap-sm="5"]{ gap:var(--t-spacing-5); }
3782
- [data-flex-gap-sm="6"]{ gap:var(--t-spacing-6); }
3783
- [data-flex-gap-sm="7"]{ gap:var(--t-spacing-7); }
3784
-
3785
- [data-flex-row-gap-sm="0"]{ row-gap:0; }
3786
- [data-flex-row-gap-sm="0.25"]{ row-gap:var(--t-spacing-fourth); }
3787
- [data-flex-row-gap-sm="0.5"]{ row-gap:var(--t-spacing-half); }
3788
- [data-flex-row-gap-sm="1"]{ row-gap:var(--t-spacing-1); }
3789
- [data-flex-row-gap-sm="1.5"]{ row-gap:var(--t-spacing-1-half); }
3790
- [data-flex-row-gap-sm="2"]{ row-gap:var(--t-spacing-2); }
3791
- [data-flex-row-gap-sm="3"]{ row-gap:var(--t-spacing-3); }
3792
- [data-flex-row-gap-sm="4"]{ row-gap:var(--t-spacing-4); }
3793
- [data-flex-row-gap-sm="5"]{ row-gap:var(--t-spacing-5); }
3794
- [data-flex-row-gap-sm="6"]{ row-gap:var(--t-spacing-6); }
3795
- [data-flex-row-gap-sm="7"]{ row-gap:var(--t-spacing-7); }
3796
-
3797
- [data-flex-column-gap-sm="0"]{ -moz-column-gap:0; column-gap:0; }
3798
- [data-flex-column-gap-sm="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3799
- [data-flex-column-gap-sm="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3800
- [data-flex-column-gap-sm="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3801
- [data-flex-column-gap-sm="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3802
- [data-flex-column-gap-sm="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3803
- [data-flex-column-gap-sm="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3804
- [data-flex-column-gap-sm="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3805
- [data-flex-column-gap-sm="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3806
- [data-flex-column-gap-sm="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3807
- [data-flex-column-gap-sm="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3808
-
3809
- [data-flex-basis-sm="auto"]{ flex-basis:auto; }
3810
- [data-flex-basis-sm="0"]{ flex-basis:0; }
3811
- [data-flex-basis-sm="100%"]{ flex-basis:100%; }
3812
-
3813
- [data-padding-sm="0"]{ padding:0; }
3814
- [data-padding-sm="0.25"]{ padding:var(--t-spacing-fourth); }
3815
- [data-padding-sm="0.5"]{ padding:var(--t-spacing-half); }
3816
- [data-padding-sm="1"]{ padding:var(--t-spacing-1); }
3817
- [data-padding-sm="1.5"]{ padding:var(--t-spacing-1-half); }
3818
- [data-padding-sm="2"]{ padding:var(--t-spacing-2); }
3819
- [data-padding-sm="3"]{ padding:var(--t-spacing-3); }
3820
- [data-padding-sm="4"]{ padding:var(--t-spacing-4); }
3821
- [data-padding-sm="5"]{ padding:var(--t-spacing-5); }
3822
- [data-padding-sm="6"]{ padding:var(--t-spacing-6); }
3823
- [data-padding-sm="7"]{ padding:var(--t-spacing-7); }
3824
-
3825
- [data-padding-block-sm="0"]{ padding-block:0; }
3826
- [data-padding-block-sm="0.25"]{ padding-block:var(--t-spacing-fourth); }
3827
- [data-padding-block-sm="0.5"]{ padding-block:var(--t-spacing-half); }
3828
- [data-padding-block-sm="1"]{ padding-block:var(--t-spacing-1); }
3829
- [data-padding-block-sm="1.5"]{ padding-block:var(--t-spacing-1-half); }
3830
- [data-padding-block-sm="2"]{ padding-block:var(--t-spacing-2); }
3831
- [data-padding-block-sm="3"]{ padding-block:var(--t-spacing-3); }
3832
- [data-padding-block-sm="4"]{ padding-block:var(--t-spacing-4); }
3833
- [data-padding-block-sm="5"]{ padding-block:var(--t-spacing-5); }
3834
- [data-padding-block-sm="6"]{ padding-block:var(--t-spacing-6); }
3835
- [data-padding-block-sm="7"]{ padding-block:var(--t-spacing-7); }
3836
-
3837
- [data-padding-inline-sm="0"]{ padding-inline:0; }
3838
- [data-padding-inline-sm="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3839
- [data-padding-inline-sm="0.5"]{ padding-inline:var(--t-spacing-half); }
3840
- [data-padding-inline-sm="1"]{ padding-inline:var(--t-spacing-1); }
3841
- [data-padding-inline-sm="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3842
- [data-padding-inline-sm="2"]{ padding-inline:var(--t-spacing-2); }
3843
- [data-padding-inline-sm="3"]{ padding-inline:var(--t-spacing-3); }
3844
- [data-padding-inline-sm="4"]{ padding-inline:var(--t-spacing-4); }
3845
- [data-padding-inline-sm="5"]{ padding-inline:var(--t-spacing-5); }
3846
- [data-padding-inline-sm="6"]{ padding-inline:var(--t-spacing-6); }
3847
- [data-padding-inline-sm="7"]{ padding-inline:var(--t-spacing-7); }
3848
- }
3849
- @media (min-width: 720px){
3850
- [data-flex-direction-md="row"]{ flex-direction:row; }
3851
- [data-flex-direction-md="row-reverse"]{ flex-direction:row-reverse; }
3852
- [data-flex-direction-md="column"]{ flex-direction:column; }
3853
- [data-flex-direction-md="column-reverse"]{ flex-direction:column-reverse; }
3854
-
3855
- [data-flex-align-md="stretch"]{ align-items:stretch; }
3856
- [data-flex-align-md="start"]{ align-items:start; }
3857
- [data-flex-align-md="center"]{ align-items:center; }
3858
- [data-flex-align-md="end"]{ align-items:end; }
3859
- [data-flex-align-md="baseline"]{ align-items:baseline; }
3860
-
3861
- [data-flex-align-self-md="auto"]{ align-self:auto; }
3862
- [data-flex-align-self-md="stretch"]{ align-self:stretch; }
3863
- [data-flex-align-self-md="start"]{ align-self:start; }
3864
- [data-flex-align-self-md="center"]{ align-self:center; }
3865
- [data-flex-align-self-md="end"]{ align-self:end; }
3866
- [data-flex-align-self-md="baseline"]{ align-self:baseline; }
3867
-
3868
- [data-flex-justify-md="start"]{ justify-content:start; }
3869
- [data-flex-justify-md="center"]{ justify-content:center; }
3870
- [data-flex-justify-md="end"]{ justify-content:end; }
3871
- [data-flex-justify-md="space-between"]{ justify-content:space-between; }
3872
- [data-flex-justify-md="space-around"]{ justify-content:space-around; }
3873
- [data-flex-justify-md="space-evenly"]{ justify-content:space-evenly; }
3874
-
3875
- [data-flex-wrap-md="nowrap"]{ flex-wrap:nowrap; }
3876
- [data-flex-wrap-md="wrap"]{ flex-wrap:wrap; }
3877
- [data-flex-wrap-md="wrap-reverse"]{ flex-wrap:wrap-reverse; }
3878
-
3879
- [data-flex-grow-md="0"]{ flex-grow:0; }
3880
- [data-flex-grow-md="1"]{ flex-grow:1; }
3881
-
3882
- [data-flex-shrink-md="0"]{ flex-shrink:0; }
3883
- [data-flex-shrink-md="1"]{ flex-shrink:1; }
3884
-
3885
- [data-flex-gap-md="0"]{ gap:0; }
3886
- [data-flex-gap-md="0.25"]{ gap:var(--t-spacing-fourth); }
3887
- [data-flex-gap-md="0.5"]{ gap:var(--t-spacing-half); }
3888
- [data-flex-gap-md="1"]{ gap:var(--t-spacing-1); }
3889
- [data-flex-gap-md="1.5"]{ gap:var(--t-spacing-1-half); }
3890
- [data-flex-gap-md="2"]{ gap:var(--t-spacing-2); }
3891
- [data-flex-gap-md="3"]{ gap:var(--t-spacing-3); }
3892
- [data-flex-gap-md="4"]{ gap:var(--t-spacing-4); }
3893
- [data-flex-gap-md="5"]{ gap:var(--t-spacing-5); }
3894
- [data-flex-gap-md="6"]{ gap:var(--t-spacing-6); }
3895
- [data-flex-gap-md="7"]{ gap:var(--t-spacing-7); }
3896
-
3897
- [data-flex-row-gap-md="0"]{ row-gap:0; }
3898
- [data-flex-row-gap-md="0.25"]{ row-gap:var(--t-spacing-fourth); }
3899
- [data-flex-row-gap-md="0.5"]{ row-gap:var(--t-spacing-half); }
3900
- [data-flex-row-gap-md="1"]{ row-gap:var(--t-spacing-1); }
3901
- [data-flex-row-gap-md="1.5"]{ row-gap:var(--t-spacing-1-half); }
3902
- [data-flex-row-gap-md="2"]{ row-gap:var(--t-spacing-2); }
3903
- [data-flex-row-gap-md="3"]{ row-gap:var(--t-spacing-3); }
3904
- [data-flex-row-gap-md="4"]{ row-gap:var(--t-spacing-4); }
3905
- [data-flex-row-gap-md="5"]{ row-gap:var(--t-spacing-5); }
3906
- [data-flex-row-gap-md="6"]{ row-gap:var(--t-spacing-6); }
3907
- [data-flex-row-gap-md="7"]{ row-gap:var(--t-spacing-7); }
3908
-
3909
- [data-flex-column-gap-md="0"]{ -moz-column-gap:0; column-gap:0; }
3910
- [data-flex-column-gap-md="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3911
- [data-flex-column-gap-md="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3912
- [data-flex-column-gap-md="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3913
- [data-flex-column-gap-md="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3914
- [data-flex-column-gap-md="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3915
- [data-flex-column-gap-md="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3916
- [data-flex-column-gap-md="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3917
- [data-flex-column-gap-md="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3918
- [data-flex-column-gap-md="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3919
- [data-flex-column-gap-md="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
3920
-
3921
- [data-flex-basis-md="auto"]{ flex-basis:auto; }
3922
- [data-flex-basis-md="0"]{ flex-basis:0; }
3923
- [data-flex-basis-md="100%"]{ flex-basis:100%; }
3924
-
3925
- [data-padding-md="0"]{ padding:0; }
3926
- [data-padding-md="0.25"]{ padding:var(--t-spacing-fourth); }
3927
- [data-padding-md="0.5"]{ padding:var(--t-spacing-half); }
3928
- [data-padding-md="1"]{ padding:var(--t-spacing-1); }
3929
- [data-padding-md="1.5"]{ padding:var(--t-spacing-1-half); }
3930
- [data-padding-md="2"]{ padding:var(--t-spacing-2); }
3931
- [data-padding-md="3"]{ padding:var(--t-spacing-3); }
3932
- [data-padding-md="4"]{ padding:var(--t-spacing-4); }
3933
- [data-padding-md="5"]{ padding:var(--t-spacing-5); }
3934
- [data-padding-md="6"]{ padding:var(--t-spacing-6); }
3935
- [data-padding-md="7"]{ padding:var(--t-spacing-7); }
3936
-
3937
- [data-padding-block-md="0"]{ padding-block:0; }
3938
- [data-padding-block-md="0.25"]{ padding-block:var(--t-spacing-fourth); }
3939
- [data-padding-block-md="0.5"]{ padding-block:var(--t-spacing-half); }
3940
- [data-padding-block-md="1"]{ padding-block:var(--t-spacing-1); }
3941
- [data-padding-block-md="1.5"]{ padding-block:var(--t-spacing-1-half); }
3942
- [data-padding-block-md="2"]{ padding-block:var(--t-spacing-2); }
3943
- [data-padding-block-md="3"]{ padding-block:var(--t-spacing-3); }
3944
- [data-padding-block-md="4"]{ padding-block:var(--t-spacing-4); }
3945
- [data-padding-block-md="5"]{ padding-block:var(--t-spacing-5); }
3946
- [data-padding-block-md="6"]{ padding-block:var(--t-spacing-6); }
3947
- [data-padding-block-md="7"]{ padding-block:var(--t-spacing-7); }
3948
-
3949
- [data-padding-inline-md="0"]{ padding-inline:0; }
3950
- [data-padding-inline-md="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3951
- [data-padding-inline-md="0.5"]{ padding-inline:var(--t-spacing-half); }
3952
- [data-padding-inline-md="1"]{ padding-inline:var(--t-spacing-1); }
3953
- [data-padding-inline-md="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3954
- [data-padding-inline-md="2"]{ padding-inline:var(--t-spacing-2); }
3955
- [data-padding-inline-md="3"]{ padding-inline:var(--t-spacing-3); }
3956
- [data-padding-inline-md="4"]{ padding-inline:var(--t-spacing-4); }
3957
- [data-padding-inline-md="5"]{ padding-inline:var(--t-spacing-5); }
3958
- [data-padding-inline-md="6"]{ padding-inline:var(--t-spacing-6); }
3959
- [data-padding-inline-md="7"]{ padding-inline:var(--t-spacing-7); }
3960
- }
3961
- @media (min-width: 960px){
3962
- [data-flex-direction-lg="row"]{ flex-direction:row; }
3963
- [data-flex-direction-lg="row-reverse"]{ flex-direction:row-reverse; }
3964
- [data-flex-direction-lg="column"]{ flex-direction:column; }
3965
- [data-flex-direction-lg="column-reverse"]{ flex-direction:column-reverse; }
3966
-
3967
- [data-flex-align-lg="stretch"]{ align-items:stretch; }
3968
- [data-flex-align-lg="start"]{ align-items:start; }
3969
- [data-flex-align-lg="center"]{ align-items:center; }
3970
- [data-flex-align-lg="end"]{ align-items:end; }
3971
- [data-flex-align-lg="baseline"]{ align-items:baseline; }
3972
-
3973
- [data-flex-align-self-lg="auto"]{ align-self:auto; }
3974
- [data-flex-align-self-lg="stretch"]{ align-self:stretch; }
3975
- [data-flex-align-self-lg="start"]{ align-self:start; }
3976
- [data-flex-align-self-lg="center"]{ align-self:center; }
3977
- [data-flex-align-self-lg="end"]{ align-self:end; }
3978
- [data-flex-align-self-lg="baseline"]{ align-self:baseline; }
3979
-
3980
- [data-flex-justify-lg="start"]{ justify-content:start; }
3981
- [data-flex-justify-lg="center"]{ justify-content:center; }
3982
- [data-flex-justify-lg="end"]{ justify-content:end; }
3983
- [data-flex-justify-lg="space-between"]{ justify-content:space-between; }
3984
- [data-flex-justify-lg="space-around"]{ justify-content:space-around; }
3985
- [data-flex-justify-lg="space-evenly"]{ justify-content:space-evenly; }
3986
-
3987
- [data-flex-wrap-lg="nowrap"]{ flex-wrap:nowrap; }
3988
- [data-flex-wrap-lg="wrap"]{ flex-wrap:wrap; }
3989
- [data-flex-wrap-lg="wrap-reverse"]{ flex-wrap:wrap-reverse; }
3990
-
3991
- [data-flex-grow-lg="0"]{ flex-grow:0; }
3992
- [data-flex-grow-lg="1"]{ flex-grow:1; }
3993
-
3994
- [data-flex-shrink-lg="0"]{ flex-shrink:0; }
3995
- [data-flex-shrink-lg="1"]{ flex-shrink:1; }
3996
-
3997
- [data-flex-gap-lg="0"]{ gap:0; }
3998
- [data-flex-gap-lg="0.25"]{ gap:var(--t-spacing-fourth); }
3999
- [data-flex-gap-lg="0.5"]{ gap:var(--t-spacing-half); }
4000
- [data-flex-gap-lg="1"]{ gap:var(--t-spacing-1); }
4001
- [data-flex-gap-lg="1.5"]{ gap:var(--t-spacing-1-half); }
4002
- [data-flex-gap-lg="2"]{ gap:var(--t-spacing-2); }
4003
- [data-flex-gap-lg="3"]{ gap:var(--t-spacing-3); }
4004
- [data-flex-gap-lg="4"]{ gap:var(--t-spacing-4); }
4005
- [data-flex-gap-lg="5"]{ gap:var(--t-spacing-5); }
4006
- [data-flex-gap-lg="6"]{ gap:var(--t-spacing-6); }
4007
- [data-flex-gap-lg="7"]{ gap:var(--t-spacing-7); }
4008
-
4009
- [data-flex-row-gap-lg="0"]{ row-gap:0; }
4010
- [data-flex-row-gap-lg="0.25"]{ row-gap:var(--t-spacing-fourth); }
4011
- [data-flex-row-gap-lg="0.5"]{ row-gap:var(--t-spacing-half); }
4012
- [data-flex-row-gap-lg="1"]{ row-gap:var(--t-spacing-1); }
4013
- [data-flex-row-gap-lg="1.5"]{ row-gap:var(--t-spacing-1-half); }
4014
- [data-flex-row-gap-lg="2"]{ row-gap:var(--t-spacing-2); }
4015
- [data-flex-row-gap-lg="3"]{ row-gap:var(--t-spacing-3); }
4016
- [data-flex-row-gap-lg="4"]{ row-gap:var(--t-spacing-4); }
4017
- [data-flex-row-gap-lg="5"]{ row-gap:var(--t-spacing-5); }
4018
- [data-flex-row-gap-lg="6"]{ row-gap:var(--t-spacing-6); }
4019
- [data-flex-row-gap-lg="7"]{ row-gap:var(--t-spacing-7); }
4020
-
4021
- [data-flex-column-gap-lg="0"]{ -moz-column-gap:0; column-gap:0; }
4022
- [data-flex-column-gap-lg="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4023
- [data-flex-column-gap-lg="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4024
- [data-flex-column-gap-lg="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4025
- [data-flex-column-gap-lg="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4026
- [data-flex-column-gap-lg="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4027
- [data-flex-column-gap-lg="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4028
- [data-flex-column-gap-lg="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4029
- [data-flex-column-gap-lg="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4030
- [data-flex-column-gap-lg="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4031
- [data-flex-column-gap-lg="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4032
-
4033
- [data-flex-basis-lg="auto"]{ flex-basis:auto; }
4034
- [data-flex-basis-lg="0"]{ flex-basis:0; }
4035
- [data-flex-basis-lg="100%"]{ flex-basis:100%; }
4036
-
4037
- [data-padding-lg="0"]{ padding:0; }
4038
- [data-padding-lg="0.25"]{ padding:var(--t-spacing-fourth); }
4039
- [data-padding-lg="0.5"]{ padding:var(--t-spacing-half); }
4040
- [data-padding-lg="1"]{ padding:var(--t-spacing-1); }
4041
- [data-padding-lg="1.5"]{ padding:var(--t-spacing-1-half); }
4042
- [data-padding-lg="2"]{ padding:var(--t-spacing-2); }
4043
- [data-padding-lg="3"]{ padding:var(--t-spacing-3); }
4044
- [data-padding-lg="4"]{ padding:var(--t-spacing-4); }
4045
- [data-padding-lg="5"]{ padding:var(--t-spacing-5); }
4046
- [data-padding-lg="6"]{ padding:var(--t-spacing-6); }
4047
- [data-padding-lg="7"]{ padding:var(--t-spacing-7); }
4048
-
4049
- [data-padding-block-lg="0"]{ padding-block:0; }
4050
- [data-padding-block-lg="0.25"]{ padding-block:var(--t-spacing-fourth); }
4051
- [data-padding-block-lg="0.5"]{ padding-block:var(--t-spacing-half); }
4052
- [data-padding-block-lg="1"]{ padding-block:var(--t-spacing-1); }
4053
- [data-padding-block-lg="1.5"]{ padding-block:var(--t-spacing-1-half); }
4054
- [data-padding-block-lg="2"]{ padding-block:var(--t-spacing-2); }
4055
- [data-padding-block-lg="3"]{ padding-block:var(--t-spacing-3); }
4056
- [data-padding-block-lg="4"]{ padding-block:var(--t-spacing-4); }
4057
- [data-padding-block-lg="5"]{ padding-block:var(--t-spacing-5); }
4058
- [data-padding-block-lg="6"]{ padding-block:var(--t-spacing-6); }
4059
- [data-padding-block-lg="7"]{ padding-block:var(--t-spacing-7); }
4060
-
4061
- [data-padding-inline-lg="0"]{ padding-inline:0; }
4062
- [data-padding-inline-lg="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4063
- [data-padding-inline-lg="0.5"]{ padding-inline:var(--t-spacing-half); }
4064
- [data-padding-inline-lg="1"]{ padding-inline:var(--t-spacing-1); }
4065
- [data-padding-inline-lg="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4066
- [data-padding-inline-lg="2"]{ padding-inline:var(--t-spacing-2); }
4067
- [data-padding-inline-lg="3"]{ padding-inline:var(--t-spacing-3); }
4068
- [data-padding-inline-lg="4"]{ padding-inline:var(--t-spacing-4); }
4069
- [data-padding-inline-lg="5"]{ padding-inline:var(--t-spacing-5); }
4070
- [data-padding-inline-lg="6"]{ padding-inline:var(--t-spacing-6); }
4071
- [data-padding-inline-lg="7"]{ padding-inline:var(--t-spacing-7); }
4072
- }
4073
- @media (min-width: 1200px){
4074
- [data-flex-direction-xl="row"]{ flex-direction:row; }
4075
- [data-flex-direction-xl="row-reverse"]{ flex-direction:row-reverse; }
4076
- [data-flex-direction-xl="column"]{ flex-direction:column; }
4077
- [data-flex-direction-xl="column-reverse"]{ flex-direction:column-reverse; }
4078
-
4079
- [data-flex-align-xl="stretch"]{ align-items:stretch; }
4080
- [data-flex-align-xl="start"]{ align-items:start; }
4081
- [data-flex-align-xl="center"]{ align-items:center; }
4082
- [data-flex-align-xl="end"]{ align-items:end; }
4083
- [data-flex-align-xl="baseline"]{ align-items:baseline; }
4084
-
4085
- [data-flex-align-self-xl="auto"]{ align-self:auto; }
4086
- [data-flex-align-self-xl="stretch"]{ align-self:stretch; }
4087
- [data-flex-align-self-xl="start"]{ align-self:start; }
4088
- [data-flex-align-self-xl="center"]{ align-self:center; }
4089
- [data-flex-align-self-xl="end"]{ align-self:end; }
4090
- [data-flex-align-self-xl="baseline"]{ align-self:baseline; }
4091
-
4092
- [data-flex-justify-xl="start"]{ justify-content:start; }
4093
- [data-flex-justify-xl="center"]{ justify-content:center; }
4094
- [data-flex-justify-xl="end"]{ justify-content:end; }
4095
- [data-flex-justify-xl="space-between"]{ justify-content:space-between; }
4096
- [data-flex-justify-xl="space-around"]{ justify-content:space-around; }
4097
- [data-flex-justify-xl="space-evenly"]{ justify-content:space-evenly; }
4098
-
4099
- [data-flex-wrap-xl="nowrap"]{ flex-wrap:nowrap; }
4100
- [data-flex-wrap-xl="wrap"]{ flex-wrap:wrap; }
4101
- [data-flex-wrap-xl="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4102
-
4103
- [data-flex-grow-xl="0"]{ flex-grow:0; }
4104
- [data-flex-grow-xl="1"]{ flex-grow:1; }
4105
-
4106
- [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4107
- [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4108
-
4109
- [data-flex-gap-xl="0"]{ gap:0; }
4110
- [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4111
- [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4112
- [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4113
- [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4114
- [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4115
- [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4116
- [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4117
- [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4118
- [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4119
- [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4120
-
4121
- [data-flex-row-gap-xl="0"]{ row-gap:0; }
4122
- [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4123
- [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4124
- [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4125
- [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4126
- [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4127
- [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4128
- [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4129
- [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4130
- [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4131
- [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4132
-
4133
- [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4134
- [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4135
- [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4136
- [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4137
- [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4138
- [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4139
- [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4140
- [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4141
- [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4142
- [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4143
- [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4144
-
4145
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4146
- [data-flex-basis-xl="0"]{ flex-basis:0; }
4147
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4148
-
4149
- [data-padding-xl="0"]{ padding:0; }
4150
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4151
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4152
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4153
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4154
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4155
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4156
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4157
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4158
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4159
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4160
-
4161
- [data-padding-block-xl="0"]{ padding-block:0; }
4162
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4163
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4164
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4165
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4166
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4167
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4170
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4172
-
4173
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4174
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4175
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4176
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4177
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4178
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4179
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4180
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4181
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4182
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4183
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4184
- }
3723
+ [data-padding-block-xs="7"]{ padding-block:var(--t-spacing-7); }
4185
3724
 
4186
- .tds-data-table-filters-shelf{
4187
- height:auto;
4188
- overflow:hidden;
4189
- transition:height var(--t-duration-300) var(--t-ease-out);
3725
+ [data-padding-inline-xs="0"]{ padding-inline:0; }
3726
+ [data-padding-inline-xs="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3727
+ [data-padding-inline-xs="0.5"]{ padding-inline:var(--t-spacing-half); }
3728
+ [data-padding-inline-xs="1"]{ padding-inline:var(--t-spacing-1); }
3729
+ [data-padding-inline-xs="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3730
+ [data-padding-inline-xs="2"]{ padding-inline:var(--t-spacing-2); }
3731
+ [data-padding-inline-xs="3"]{ padding-inline:var(--t-spacing-3); }
3732
+ [data-padding-inline-xs="4"]{ padding-inline:var(--t-spacing-4); }
3733
+ [data-padding-inline-xs="5"]{ padding-inline:var(--t-spacing-5); }
3734
+ [data-padding-inline-xs="6"]{ padding-inline:var(--t-spacing-6); }
3735
+ [data-padding-inline-xs="7"]{ padding-inline:var(--t-spacing-7); }
4190
3736
  }
3737
+ @media (min-width: 600px){
3738
+ [data-flex-direction-sm="row"]{ flex-direction:row; }
3739
+ [data-flex-direction-sm="row-reverse"]{ flex-direction:row-reverse; }
3740
+ [data-flex-direction-sm="column"]{ flex-direction:column; }
3741
+ [data-flex-direction-sm="column-reverse"]{ flex-direction:column-reverse; }
4191
3742
 
4192
- @media (prefers-reduced-motion: reduce){
4193
-
4194
- .tds-data-table-filters-shelf{
4195
- transition:none;
4196
- }
4197
- }
3743
+ [data-flex-align-sm="stretch"]{ align-items:stretch; }
3744
+ [data-flex-align-sm="start"]{ align-items:start; }
3745
+ [data-flex-align-sm="center"]{ align-items:center; }
3746
+ [data-flex-align-sm="end"]{ align-items:end; }
3747
+ [data-flex-align-sm="baseline"]{ align-items:baseline; }
4198
3748
 
4199
- .tds-data-table-filters-shelf--collapsed{
4200
- height:0;
4201
- transition-timing-function:var(--t-ease-in);
4202
- }
3749
+ [data-flex-align-self-sm="auto"]{ align-self:auto; }
3750
+ [data-flex-align-self-sm="stretch"]{ align-self:stretch; }
3751
+ [data-flex-align-self-sm="start"]{ align-self:start; }
3752
+ [data-flex-align-self-sm="center"]{ align-self:center; }
3753
+ [data-flex-align-self-sm="end"]{ align-self:end; }
3754
+ [data-flex-align-self-sm="baseline"]{ align-self:baseline; }
4203
3755
 
4204
- @supports (interpolate-size: allow-keywords){
4205
- .tds-data-table-filters-shelf{
4206
- interpolate-size:allow-keywords;
4207
- }
4208
- }
3756
+ [data-flex-justify-sm="start"]{ justify-content:start; }
3757
+ [data-flex-justify-sm="center"]{ justify-content:center; }
3758
+ [data-flex-justify-sm="end"]{ justify-content:end; }
3759
+ [data-flex-justify-sm="space-between"]{ justify-content:space-between; }
3760
+ [data-flex-justify-sm="space-around"]{ justify-content:space-around; }
3761
+ [data-flex-justify-sm="space-evenly"]{ justify-content:space-evenly; }
4209
3762
 
4210
- .tds-data-table-filters{
4211
- padding-block:var(--tds-data-table-cell-padding-block);
4212
- padding-inline:var(--tds-data-table-cell-padding-inline);
4213
- border-top:1px solid var(--tds-data-table-border-color);
4214
- }
3763
+ [data-flex-wrap-sm="nowrap"]{ flex-wrap:nowrap; }
3764
+ [data-flex-wrap-sm="wrap"]{ flex-wrap:wrap; }
3765
+ [data-flex-wrap-sm="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4215
3766
 
4216
- .tds-data-table-filters-active{
4217
- display:flex;
4218
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4219
- column-gap:var(--tds-data-table-cell-padding-inline);
4220
- justify-content:space-between;
4221
- }
3767
+ [data-flex-grow-sm="0"]{ flex-grow:0; }
3768
+ [data-flex-grow-sm="1"]{ flex-grow:1; }
4222
3769
 
4223
- .tds-data-table-filters-active-list{
4224
- display:flex;
4225
- flex-wrap:wrap;
4226
- gap:var(--t-spacing-half);
4227
- }
3770
+ [data-flex-shrink-sm="0"]{ flex-shrink:0; }
3771
+ [data-flex-shrink-sm="1"]{ flex-shrink:1; }
4228
3772
 
4229
- .tds-data-table-filters-active-actions{
4230
- flex-shrink:0;
4231
- }
3773
+ [data-flex-gap-sm="0"]{ gap:0; }
3774
+ [data-flex-gap-sm="0.25"]{ gap:var(--t-spacing-fourth); }
3775
+ [data-flex-gap-sm="0.5"]{ gap:var(--t-spacing-half); }
3776
+ [data-flex-gap-sm="1"]{ gap:var(--t-spacing-1); }
3777
+ [data-flex-gap-sm="1.5"]{ gap:var(--t-spacing-1-half); }
3778
+ [data-flex-gap-sm="2"]{ gap:var(--t-spacing-2); }
3779
+ [data-flex-gap-sm="3"]{ gap:var(--t-spacing-3); }
3780
+ [data-flex-gap-sm="4"]{ gap:var(--t-spacing-4); }
3781
+ [data-flex-gap-sm="5"]{ gap:var(--t-spacing-5); }
3782
+ [data-flex-gap-sm="6"]{ gap:var(--t-spacing-6); }
3783
+ [data-flex-gap-sm="7"]{ gap:var(--t-spacing-7); }
4232
3784
 
4233
- :root{
3785
+ [data-flex-row-gap-sm="0"]{ row-gap:0; }
3786
+ [data-flex-row-gap-sm="0.25"]{ row-gap:var(--t-spacing-fourth); }
3787
+ [data-flex-row-gap-sm="0.5"]{ row-gap:var(--t-spacing-half); }
3788
+ [data-flex-row-gap-sm="1"]{ row-gap:var(--t-spacing-1); }
3789
+ [data-flex-row-gap-sm="1.5"]{ row-gap:var(--t-spacing-1-half); }
3790
+ [data-flex-row-gap-sm="2"]{ row-gap:var(--t-spacing-2); }
3791
+ [data-flex-row-gap-sm="3"]{ row-gap:var(--t-spacing-3); }
3792
+ [data-flex-row-gap-sm="4"]{ row-gap:var(--t-spacing-4); }
3793
+ [data-flex-row-gap-sm="5"]{ row-gap:var(--t-spacing-5); }
3794
+ [data-flex-row-gap-sm="6"]{ row-gap:var(--t-spacing-6); }
3795
+ [data-flex-row-gap-sm="7"]{ row-gap:var(--t-spacing-7); }
4234
3796
 
4235
- --_data-table-filter-border-info:hsl(204 96% 89%);
4236
- --_data-table-filter-border-error:hsl(8 60% 85%);
4237
- }
3797
+ [data-flex-column-gap-sm="0"]{ -moz-column-gap:0; column-gap:0; }
3798
+ [data-flex-column-gap-sm="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3799
+ [data-flex-column-gap-sm="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3800
+ [data-flex-column-gap-sm="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3801
+ [data-flex-column-gap-sm="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3802
+ [data-flex-column-gap-sm="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3803
+ [data-flex-column-gap-sm="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3804
+ [data-flex-column-gap-sm="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3805
+ [data-flex-column-gap-sm="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3806
+ [data-flex-column-gap-sm="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3807
+ [data-flex-column-gap-sm="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4238
3808
 
4239
- :root[data-color-mode="dark"]{
4240
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4241
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4242
- }
3809
+ [data-flex-basis-sm="auto"]{ flex-basis:auto; }
3810
+ [data-flex-basis-sm="0"]{ flex-basis:0; }
3811
+ [data-flex-basis-sm="100%"]{ flex-basis:100%; }
4243
3812
 
4244
- @media (prefers-color-scheme: dark){
4245
- :root[data-color-mode="system"]{
4246
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4247
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4248
- }
4249
- }
3813
+ [data-padding-sm="0"]{ padding:0; }
3814
+ [data-padding-sm="0.25"]{ padding:var(--t-spacing-fourth); }
3815
+ [data-padding-sm="0.5"]{ padding:var(--t-spacing-half); }
3816
+ [data-padding-sm="1"]{ padding:var(--t-spacing-1); }
3817
+ [data-padding-sm="1.5"]{ padding:var(--t-spacing-1-half); }
3818
+ [data-padding-sm="2"]{ padding:var(--t-spacing-2); }
3819
+ [data-padding-sm="3"]{ padding:var(--t-spacing-3); }
3820
+ [data-padding-sm="4"]{ padding:var(--t-spacing-4); }
3821
+ [data-padding-sm="5"]{ padding:var(--t-spacing-5); }
3822
+ [data-padding-sm="6"]{ padding:var(--t-spacing-6); }
3823
+ [data-padding-sm="7"]{ padding:var(--t-spacing-7); }
4250
3824
 
4251
- .tds-btn-group--data-table-filters-chip .tds-btn{
4252
- --_chip-border-color:var(--_data-table-filter-border-info);
4253
- --_chip-icon-color:var(--t-icon-color-status-info);
3825
+ [data-padding-block-sm="0"]{ padding-block:0; }
3826
+ [data-padding-block-sm="0.25"]{ padding-block:var(--t-spacing-fourth); }
3827
+ [data-padding-block-sm="0.5"]{ padding-block:var(--t-spacing-half); }
3828
+ [data-padding-block-sm="1"]{ padding-block:var(--t-spacing-1); }
3829
+ [data-padding-block-sm="1.5"]{ padding-block:var(--t-spacing-1-half); }
3830
+ [data-padding-block-sm="2"]{ padding-block:var(--t-spacing-2); }
3831
+ [data-padding-block-sm="3"]{ padding-block:var(--t-spacing-3); }
3832
+ [data-padding-block-sm="4"]{ padding-block:var(--t-spacing-4); }
3833
+ [data-padding-block-sm="5"]{ padding-block:var(--t-spacing-5); }
3834
+ [data-padding-block-sm="6"]{ padding-block:var(--t-spacing-6); }
3835
+ [data-padding-block-sm="7"]{ padding-block:var(--t-spacing-7); }
4254
3836
 
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);
3837
+ [data-padding-inline-sm="0"]{ padding-inline:0; }
3838
+ [data-padding-inline-sm="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3839
+ [data-padding-inline-sm="0.5"]{ padding-inline:var(--t-spacing-half); }
3840
+ [data-padding-inline-sm="1"]{ padding-inline:var(--t-spacing-1); }
3841
+ [data-padding-inline-sm="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3842
+ [data-padding-inline-sm="2"]{ padding-inline:var(--t-spacing-2); }
3843
+ [data-padding-inline-sm="3"]{ padding-inline:var(--t-spacing-3); }
3844
+ [data-padding-inline-sm="4"]{ padding-inline:var(--t-spacing-4); }
3845
+ [data-padding-inline-sm="5"]{ padding-inline:var(--t-spacing-5); }
3846
+ [data-padding-inline-sm="6"]{ padding-inline:var(--t-spacing-6); }
3847
+ [data-padding-inline-sm="7"]{ padding-inline:var(--t-spacing-7); }
4259
3848
  }
3849
+ @media (min-width: 720px){
3850
+ [data-flex-direction-md="row"]{ flex-direction:row; }
3851
+ [data-flex-direction-md="row-reverse"]{ flex-direction:row-reverse; }
3852
+ [data-flex-direction-md="column"]{ flex-direction:column; }
3853
+ [data-flex-direction-md="column-reverse"]{ flex-direction:column-reverse; }
4260
3854
 
4261
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) svg{
4262
- color:var(--_chip-icon-color);
4263
- transform:scale(.75);
4264
- }
3855
+ [data-flex-align-md="stretch"]{ align-items:stretch; }
3856
+ [data-flex-align-md="start"]{ align-items:start; }
3857
+ [data-flex-align-md="center"]{ align-items:center; }
3858
+ [data-flex-align-md="end"]{ align-items:end; }
3859
+ [data-flex-align-md="baseline"]{ align-items:baseline; }
4265
3860
 
4266
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4267
- padding-inline:var(--tds-btn-padding-x);
4268
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4269
- transition-timing-function:var(--t-ease-in-out);
4270
- transition-duration:var(--t-duration-200);
4271
- transition-property:border-color;
4272
- }
3861
+ [data-flex-align-self-md="auto"]{ align-self:auto; }
3862
+ [data-flex-align-self-md="stretch"]{ align-self:stretch; }
3863
+ [data-flex-align-self-md="start"]{ align-self:start; }
3864
+ [data-flex-align-self-md="center"]{ align-self:center; }
3865
+ [data-flex-align-self-md="end"]{ align-self:end; }
3866
+ [data-flex-align-self-md="baseline"]{ align-self:baseline; }
4273
3867
 
4274
- @media (prefers-reduced-motion: reduce){
3868
+ [data-flex-justify-md="start"]{ justify-content:start; }
3869
+ [data-flex-justify-md="center"]{ justify-content:center; }
3870
+ [data-flex-justify-md="end"]{ justify-content:end; }
3871
+ [data-flex-justify-md="space-between"]{ justify-content:space-between; }
3872
+ [data-flex-justify-md="space-around"]{ justify-content:space-around; }
3873
+ [data-flex-justify-md="space-evenly"]{ justify-content:space-evenly; }
4275
3874
 
4276
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4277
- transition:none;
4278
- }
4279
- }
3875
+ [data-flex-wrap-md="nowrap"]{ flex-wrap:nowrap; }
3876
+ [data-flex-wrap-md="wrap"]{ flex-wrap:wrap; }
3877
+ [data-flex-wrap-md="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4280
3878
 
4281
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:first-child{
4282
- padding-inline-start:0;
4283
- }
3879
+ [data-flex-grow-md="0"]{ flex-grow:0; }
3880
+ [data-flex-grow-md="1"]{ flex-grow:1; }
4284
3881
 
4285
- :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:last-child{
4286
- padding-inline-end:0;
4287
- border-inline-end-color:transparent;
4288
- }
3882
+ [data-flex-shrink-md="0"]{ flex-shrink:0; }
3883
+ [data-flex-shrink-md="1"]{ flex-shrink:1; }
4289
3884
 
4290
- :is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):focus{
4291
- color:var(--t-text-color-interaction);
4292
- background-color:var(--t-fill-color-status-info-ghost);
4293
- border-color:var(--_chip-border-color);
4294
- }
3885
+ [data-flex-gap-md="0"]{ gap:0; }
3886
+ [data-flex-gap-md="0.25"]{ gap:var(--t-spacing-fourth); }
3887
+ [data-flex-gap-md="0.5"]{ gap:var(--t-spacing-half); }
3888
+ [data-flex-gap-md="1"]{ gap:var(--t-spacing-1); }
3889
+ [data-flex-gap-md="1.5"]{ gap:var(--t-spacing-1-half); }
3890
+ [data-flex-gap-md="2"]{ gap:var(--t-spacing-2); }
3891
+ [data-flex-gap-md="3"]{ gap:var(--t-spacing-3); }
3892
+ [data-flex-gap-md="4"]{ gap:var(--t-spacing-4); }
3893
+ [data-flex-gap-md="5"]{ gap:var(--t-spacing-5); }
3894
+ [data-flex-gap-md="6"]{ gap:var(--t-spacing-6); }
3895
+ [data-flex-gap-md="7"]{ gap:var(--t-spacing-7); }
4295
3896
 
4296
- .tds-btn-group--data-table-filters-chip-inactive .tds-btn{
4297
- --_chip-border-color:var(--t-border-color-button-neutral);
4298
- --_chip-icon-color:var(--t-icon-color-status-neutral);
3897
+ [data-flex-row-gap-md="0"]{ row-gap:0; }
3898
+ [data-flex-row-gap-md="0.25"]{ row-gap:var(--t-spacing-fourth); }
3899
+ [data-flex-row-gap-md="0.5"]{ row-gap:var(--t-spacing-half); }
3900
+ [data-flex-row-gap-md="1"]{ row-gap:var(--t-spacing-1); }
3901
+ [data-flex-row-gap-md="1.5"]{ row-gap:var(--t-spacing-1-half); }
3902
+ [data-flex-row-gap-md="2"]{ row-gap:var(--t-spacing-2); }
3903
+ [data-flex-row-gap-md="3"]{ row-gap:var(--t-spacing-3); }
3904
+ [data-flex-row-gap-md="4"]{ row-gap:var(--t-spacing-4); }
3905
+ [data-flex-row-gap-md="5"]{ row-gap:var(--t-spacing-5); }
3906
+ [data-flex-row-gap-md="6"]{ row-gap:var(--t-spacing-6); }
3907
+ [data-flex-row-gap-md="7"]{ row-gap:var(--t-spacing-7); }
3908
+
3909
+ [data-flex-column-gap-md="0"]{ -moz-column-gap:0; column-gap:0; }
3910
+ [data-flex-column-gap-md="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
3911
+ [data-flex-column-gap-md="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
3912
+ [data-flex-column-gap-md="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
3913
+ [data-flex-column-gap-md="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
3914
+ [data-flex-column-gap-md="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
3915
+ [data-flex-column-gap-md="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
3916
+ [data-flex-column-gap-md="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
3917
+ [data-flex-column-gap-md="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
3918
+ [data-flex-column-gap-md="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
3919
+ [data-flex-column-gap-md="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4299
3920
 
4300
- color:var(--t-text-color);
4301
- background-color:var(--t-fill-color-status-neutral-dim);
4302
- }
3921
+ [data-flex-basis-md="auto"]{ flex-basis:auto; }
3922
+ [data-flex-basis-md="0"]{ flex-basis:0; }
3923
+ [data-flex-basis-md="100%"]{ flex-basis:100%; }
4303
3924
 
4304
- :is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):focus{
4305
- color:var(--t-text-color);
4306
- background-color:var(--t-fill-color-status-neutral-ghost);
4307
- }
3925
+ [data-padding-md="0"]{ padding:0; }
3926
+ [data-padding-md="0.25"]{ padding:var(--t-spacing-fourth); }
3927
+ [data-padding-md="0.5"]{ padding:var(--t-spacing-half); }
3928
+ [data-padding-md="1"]{ padding:var(--t-spacing-1); }
3929
+ [data-padding-md="1.5"]{ padding:var(--t-spacing-1-half); }
3930
+ [data-padding-md="2"]{ padding:var(--t-spacing-2); }
3931
+ [data-padding-md="3"]{ padding:var(--t-spacing-3); }
3932
+ [data-padding-md="4"]{ padding:var(--t-spacing-4); }
3933
+ [data-padding-md="5"]{ padding:var(--t-spacing-5); }
3934
+ [data-padding-md="6"]{ padding:var(--t-spacing-6); }
3935
+ [data-padding-md="7"]{ padding:var(--t-spacing-7); }
4308
3936
 
4309
- .tds-btn-group--data-table-filters-chip-invalid .tds-btn{
4310
- --_chip-border-color:var(--_data-table-filter-border-error);
4311
- --_chip-icon-color:var(--t-icon-color-status-error);
3937
+ [data-padding-block-md="0"]{ padding-block:0; }
3938
+ [data-padding-block-md="0.25"]{ padding-block:var(--t-spacing-fourth); }
3939
+ [data-padding-block-md="0.5"]{ padding-block:var(--t-spacing-half); }
3940
+ [data-padding-block-md="1"]{ padding-block:var(--t-spacing-1); }
3941
+ [data-padding-block-md="1.5"]{ padding-block:var(--t-spacing-1-half); }
3942
+ [data-padding-block-md="2"]{ padding-block:var(--t-spacing-2); }
3943
+ [data-padding-block-md="3"]{ padding-block:var(--t-spacing-3); }
3944
+ [data-padding-block-md="4"]{ padding-block:var(--t-spacing-4); }
3945
+ [data-padding-block-md="5"]{ padding-block:var(--t-spacing-5); }
3946
+ [data-padding-block-md="6"]{ padding-block:var(--t-spacing-6); }
3947
+ [data-padding-block-md="7"]{ padding-block:var(--t-spacing-7); }
4312
3948
 
4313
- color:var(--t-text-color-status-error);
4314
- background-color:var(--t-fill-color-status-error-dim);
3949
+ [data-padding-inline-md="0"]{ padding-inline:0; }
3950
+ [data-padding-inline-md="0.25"]{ padding-inline:var(--t-spacing-fourth); }
3951
+ [data-padding-inline-md="0.5"]{ padding-inline:var(--t-spacing-half); }
3952
+ [data-padding-inline-md="1"]{ padding-inline:var(--t-spacing-1); }
3953
+ [data-padding-inline-md="1.5"]{ padding-inline:var(--t-spacing-1-half); }
3954
+ [data-padding-inline-md="2"]{ padding-inline:var(--t-spacing-2); }
3955
+ [data-padding-inline-md="3"]{ padding-inline:var(--t-spacing-3); }
3956
+ [data-padding-inline-md="4"]{ padding-inline:var(--t-spacing-4); }
3957
+ [data-padding-inline-md="5"]{ padding-inline:var(--t-spacing-5); }
3958
+ [data-padding-inline-md="6"]{ padding-inline:var(--t-spacing-6); }
3959
+ [data-padding-inline-md="7"]{ padding-inline:var(--t-spacing-7); }
4315
3960
  }
3961
+ @media (min-width: 960px){
3962
+ [data-flex-direction-lg="row"]{ flex-direction:row; }
3963
+ [data-flex-direction-lg="row-reverse"]{ flex-direction:row-reverse; }
3964
+ [data-flex-direction-lg="column"]{ flex-direction:column; }
3965
+ [data-flex-direction-lg="column-reverse"]{ flex-direction:column-reverse; }
4316
3966
 
4317
- :is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):focus{
4318
- color:var(--t-text-color-status-error);
4319
- background-color:var(--t-fill-color-status-error-ghost);
4320
- }
3967
+ [data-flex-align-lg="stretch"]{ align-items:stretch; }
3968
+ [data-flex-align-lg="start"]{ align-items:start; }
3969
+ [data-flex-align-lg="center"]{ align-items:center; }
3970
+ [data-flex-align-lg="end"]{ align-items:end; }
3971
+ [data-flex-align-lg="baseline"]{ align-items:baseline; }
4321
3972
 
4322
- .tds-data-table-filters-chip-static{
4323
- cursor:default;
4324
- }
4325
- .tds-popover--data-table-filters-popover .tds-popover-content{
4326
- gap:var(--t-spacing-1);
4327
- align-items:start;
4328
- padding:var(--t-spacing-2);
4329
- }
3973
+ [data-flex-align-self-lg="auto"]{ align-self:auto; }
3974
+ [data-flex-align-self-lg="stretch"]{ align-self:stretch; }
3975
+ [data-flex-align-self-lg="start"]{ align-self:start; }
3976
+ [data-flex-align-self-lg="center"]{ align-self:center; }
3977
+ [data-flex-align-self-lg="end"]{ align-self:end; }
3978
+ [data-flex-align-self-lg="baseline"]{ align-self:baseline; }
4330
3979
 
4331
- @media (prefers-reduced-motion: no-preference){
4332
- .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4333
- animation-name:tds-data-table-filters-popover;
4334
- }
3980
+ [data-flex-justify-lg="start"]{ justify-content:start; }
3981
+ [data-flex-justify-lg="center"]{ justify-content:center; }
3982
+ [data-flex-justify-lg="end"]{ justify-content:end; }
3983
+ [data-flex-justify-lg="space-between"]{ justify-content:space-between; }
3984
+ [data-flex-justify-lg="space-around"]{ justify-content:space-around; }
3985
+ [data-flex-justify-lg="space-evenly"]{ justify-content:space-evenly; }
4335
3986
 
4336
- @keyframes tds-data-table-filters-popover{
4337
- from{
4338
- opacity:0;
4339
- }
4340
- }
4341
- }
3987
+ [data-flex-wrap-lg="nowrap"]{ flex-wrap:nowrap; }
3988
+ [data-flex-wrap-lg="wrap"]{ flex-wrap:wrap; }
3989
+ [data-flex-wrap-lg="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4342
3990
 
4343
- .tds-data-table-filters-popover-label{
4344
- margin-block:0;
4345
- font-size:var(--t-font-size-md);
4346
- font-weight:var(--t-font-weight-medium);
4347
- }
3991
+ [data-flex-grow-lg="0"]{ flex-grow:0; }
3992
+ [data-flex-grow-lg="1"]{ flex-grow:1; }
4348
3993
 
4349
- .tds-data-table-filters-popover-label-operator{
4350
- font-weight:var(--t-font-weight-normal);
4351
- }
3994
+ [data-flex-shrink-lg="0"]{ flex-shrink:0; }
3995
+ [data-flex-shrink-lg="1"]{ flex-shrink:1; }
4352
3996
 
4353
- .tds-data-table-filters-popover-description{
4354
- margin-block-start:calc(var(--t-spacing-fourth) * -1);
4355
- margin-block-end:0;
4356
- font-size:var(--t-font-size-sm);
4357
- color:var(--t-text-color-secondary);
4358
- }
3997
+ [data-flex-gap-lg="0"]{ gap:0; }
3998
+ [data-flex-gap-lg="0.25"]{ gap:var(--t-spacing-fourth); }
3999
+ [data-flex-gap-lg="0.5"]{ gap:var(--t-spacing-half); }
4000
+ [data-flex-gap-lg="1"]{ gap:var(--t-spacing-1); }
4001
+ [data-flex-gap-lg="1.5"]{ gap:var(--t-spacing-1-half); }
4002
+ [data-flex-gap-lg="2"]{ gap:var(--t-spacing-2); }
4003
+ [data-flex-gap-lg="3"]{ gap:var(--t-spacing-3); }
4004
+ [data-flex-gap-lg="4"]{ gap:var(--t-spacing-4); }
4005
+ [data-flex-gap-lg="5"]{ gap:var(--t-spacing-5); }
4006
+ [data-flex-gap-lg="6"]{ gap:var(--t-spacing-6); }
4007
+ [data-flex-gap-lg="7"]{ gap:var(--t-spacing-7); }
4359
4008
 
4360
- .tds-data-table-filter-controls-badge{
4361
- min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4362
- padding-inline:var(--t-spacing-half);
4363
- font-size:var(--t-font-size-sm);
4364
- color:var(--t-text-color-status-info);
4365
- background-color:var(--t-fill-color-status-info-dim);
4366
- border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4367
- border-radius:var(--t-border-radius-round);
4368
- }
4009
+ [data-flex-row-gap-lg="0"]{ row-gap:0; }
4010
+ [data-flex-row-gap-lg="0.25"]{ row-gap:var(--t-spacing-fourth); }
4011
+ [data-flex-row-gap-lg="0.5"]{ row-gap:var(--t-spacing-half); }
4012
+ [data-flex-row-gap-lg="1"]{ row-gap:var(--t-spacing-1); }
4013
+ [data-flex-row-gap-lg="1.5"]{ row-gap:var(--t-spacing-1-half); }
4014
+ [data-flex-row-gap-lg="2"]{ row-gap:var(--t-spacing-2); }
4015
+ [data-flex-row-gap-lg="3"]{ row-gap:var(--t-spacing-3); }
4016
+ [data-flex-row-gap-lg="4"]{ row-gap:var(--t-spacing-4); }
4017
+ [data-flex-row-gap-lg="5"]{ row-gap:var(--t-spacing-5); }
4018
+ [data-flex-row-gap-lg="6"]{ row-gap:var(--t-spacing-6); }
4019
+ [data-flex-row-gap-lg="7"]{ row-gap:var(--t-spacing-7); }
4369
4020
 
4370
- .tds-pane{
4371
- --tds-pane-background-color:var(--t-surface-color-card);
4372
- --tds-pane-border-radius:var(--t-border-radius-lg);
4373
- --tds-pane-border-color:var(--t-border-color);
4021
+ [data-flex-column-gap-lg="0"]{ -moz-column-gap:0; column-gap:0; }
4022
+ [data-flex-column-gap-lg="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4023
+ [data-flex-column-gap-lg="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4024
+ [data-flex-column-gap-lg="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4025
+ [data-flex-column-gap-lg="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4026
+ [data-flex-column-gap-lg="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4027
+ [data-flex-column-gap-lg="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4028
+ [data-flex-column-gap-lg="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4029
+ [data-flex-column-gap-lg="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4030
+ [data-flex-column-gap-lg="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4031
+ [data-flex-column-gap-lg="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4374
4032
 
4375
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
4376
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
4033
+ [data-flex-basis-lg="auto"]{ flex-basis:auto; }
4034
+ [data-flex-basis-lg="0"]{ flex-basis:0; }
4035
+ [data-flex-basis-lg="100%"]{ flex-basis:100%; }
4377
4036
 
4378
- --tds-pane-title-color:var(--t-text-color-headline);
4379
- --tds-pane-title-font-size:var(--t-font-size-lg);
4380
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
4381
- --tds-pane-title-line-height:1.4;
4037
+ [data-padding-lg="0"]{ padding:0; }
4038
+ [data-padding-lg="0.25"]{ padding:var(--t-spacing-fourth); }
4039
+ [data-padding-lg="0.5"]{ padding:var(--t-spacing-half); }
4040
+ [data-padding-lg="1"]{ padding:var(--t-spacing-1); }
4041
+ [data-padding-lg="1.5"]{ padding:var(--t-spacing-1-half); }
4042
+ [data-padding-lg="2"]{ padding:var(--t-spacing-2); }
4043
+ [data-padding-lg="3"]{ padding:var(--t-spacing-3); }
4044
+ [data-padding-lg="4"]{ padding:var(--t-spacing-4); }
4045
+ [data-padding-lg="5"]{ padding:var(--t-spacing-5); }
4046
+ [data-padding-lg="6"]{ padding:var(--t-spacing-6); }
4047
+ [data-padding-lg="7"]{ padding:var(--t-spacing-7); }
4382
4048
 
4383
- --tds-pane-body-padding:var(--t-spacing-3);
4049
+ [data-padding-block-lg="0"]{ padding-block:0; }
4050
+ [data-padding-block-lg="0.25"]{ padding-block:var(--t-spacing-fourth); }
4051
+ [data-padding-block-lg="0.5"]{ padding-block:var(--t-spacing-half); }
4052
+ [data-padding-block-lg="1"]{ padding-block:var(--t-spacing-1); }
4053
+ [data-padding-block-lg="1.5"]{ padding-block:var(--t-spacing-1-half); }
4054
+ [data-padding-block-lg="2"]{ padding-block:var(--t-spacing-2); }
4055
+ [data-padding-block-lg="3"]{ padding-block:var(--t-spacing-3); }
4056
+ [data-padding-block-lg="4"]{ padding-block:var(--t-spacing-4); }
4057
+ [data-padding-block-lg="5"]{ padding-block:var(--t-spacing-5); }
4058
+ [data-padding-block-lg="6"]{ padding-block:var(--t-spacing-6); }
4059
+ [data-padding-block-lg="7"]{ padding-block:var(--t-spacing-7); }
4384
4060
 
4385
- --tds-pane-footer-padding-block:var(--t-spacing-2);
4386
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
4061
+ [data-padding-inline-lg="0"]{ padding-inline:0; }
4062
+ [data-padding-inline-lg="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4063
+ [data-padding-inline-lg="0.5"]{ padding-inline:var(--t-spacing-half); }
4064
+ [data-padding-inline-lg="1"]{ padding-inline:var(--t-spacing-1); }
4065
+ [data-padding-inline-lg="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4066
+ [data-padding-inline-lg="2"]{ padding-inline:var(--t-spacing-2); }
4067
+ [data-padding-inline-lg="3"]{ padding-inline:var(--t-spacing-3); }
4068
+ [data-padding-inline-lg="4"]{ padding-inline:var(--t-spacing-4); }
4069
+ [data-padding-inline-lg="5"]{ padding-inline:var(--t-spacing-5); }
4070
+ [data-padding-inline-lg="6"]{ padding-inline:var(--t-spacing-6); }
4071
+ [data-padding-inline-lg="7"]{ padding-inline:var(--t-spacing-7); }
4072
+ }
4073
+ @media (min-width: 1200px){
4074
+ [data-flex-direction-xl="row"]{ flex-direction:row; }
4075
+ [data-flex-direction-xl="row-reverse"]{ flex-direction:row-reverse; }
4076
+ [data-flex-direction-xl="column"]{ flex-direction:column; }
4077
+ [data-flex-direction-xl="column-reverse"]{ flex-direction:column-reverse; }
4387
4078
 
4388
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
4389
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
4079
+ [data-flex-align-xl="stretch"]{ align-items:stretch; }
4080
+ [data-flex-align-xl="start"]{ align-items:start; }
4081
+ [data-flex-align-xl="center"]{ align-items:center; }
4082
+ [data-flex-align-xl="end"]{ align-items:end; }
4083
+ [data-flex-align-xl="baseline"]{ align-items:baseline; }
4390
4084
 
4391
- background:var(--tds-pane-background-color);
4392
- border-radius:var(--tds-pane-border-radius);
4393
- border:var(--t-border-width) solid var(--tds-pane-border-color);
4394
- display:flex;
4395
- flex-direction:column;
4396
- }
4085
+ [data-flex-align-self-xl="auto"]{ align-self:auto; }
4086
+ [data-flex-align-self-xl="stretch"]{ align-self:stretch; }
4087
+ [data-flex-align-self-xl="start"]{ align-self:start; }
4088
+ [data-flex-align-self-xl="center"]{ align-self:center; }
4089
+ [data-flex-align-self-xl="end"]{ align-self:end; }
4090
+ [data-flex-align-self-xl="baseline"]{ align-self:baseline; }
4397
4091
 
4398
- .tds-pane-header{
4399
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
4400
- padding-block:var(--tds-pane-header-padding-block);
4401
- padding-inline:var(--tds-pane-header-padding-inline);
4402
- }
4092
+ [data-flex-justify-xl="start"]{ justify-content:start; }
4093
+ [data-flex-justify-xl="center"]{ justify-content:center; }
4094
+ [data-flex-justify-xl="end"]{ justify-content:end; }
4095
+ [data-flex-justify-xl="space-between"]{ justify-content:space-between; }
4096
+ [data-flex-justify-xl="space-around"]{ justify-content:space-around; }
4097
+ [data-flex-justify-xl="space-evenly"]{ justify-content:space-evenly; }
4403
4098
 
4404
- .tds-pane-header > .tds-helper-shelf-trigger{
4405
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
4406
- }
4099
+ [data-flex-wrap-xl="nowrap"]{ flex-wrap:nowrap; }
4100
+ [data-flex-wrap-xl="wrap"]{ flex-wrap:wrap; }
4101
+ [data-flex-wrap-xl="wrap-reverse"]{ flex-wrap:wrap-reverse; }
4102
+
4103
+ [data-flex-grow-xl="0"]{ flex-grow:0; }
4104
+ [data-flex-grow-xl="1"]{ flex-grow:1; }
4407
4105
 
4408
- .tds-pane-header > .tds-helper-shelf{
4409
- flex-basis:100%;
4410
- order:1;
4411
- }
4106
+ [data-flex-shrink-xl="0"]{ flex-shrink:0; }
4107
+ [data-flex-shrink-xl="1"]{ flex-shrink:1; }
4412
4108
 
4413
- .tds-pane-header:has( > .tds-helper-shelf){
4414
- row-gap:var(--tds-pane-header-padding-block);
4415
- padding-block-end:0;
4416
- }
4109
+ [data-flex-gap-xl="0"]{ gap:0; }
4110
+ [data-flex-gap-xl="0.25"]{ gap:var(--t-spacing-fourth); }
4111
+ [data-flex-gap-xl="0.5"]{ gap:var(--t-spacing-half); }
4112
+ [data-flex-gap-xl="1"]{ gap:var(--t-spacing-1); }
4113
+ [data-flex-gap-xl="1.5"]{ gap:var(--t-spacing-1-half); }
4114
+ [data-flex-gap-xl="2"]{ gap:var(--t-spacing-2); }
4115
+ [data-flex-gap-xl="3"]{ gap:var(--t-spacing-3); }
4116
+ [data-flex-gap-xl="4"]{ gap:var(--t-spacing-4); }
4117
+ [data-flex-gap-xl="5"]{ gap:var(--t-spacing-5); }
4118
+ [data-flex-gap-xl="6"]{ gap:var(--t-spacing-6); }
4119
+ [data-flex-gap-xl="7"]{ gap:var(--t-spacing-7); }
4417
4120
 
4418
- .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
4419
- font-size:var(--t-font-size-md);
4420
- margin-block-end:var(--tds-pane-header-padding-block);
4421
- }
4121
+ [data-flex-row-gap-xl="0"]{ row-gap:0; }
4122
+ [data-flex-row-gap-xl="0.25"]{ row-gap:var(--t-spacing-fourth); }
4123
+ [data-flex-row-gap-xl="0.5"]{ row-gap:var(--t-spacing-half); }
4124
+ [data-flex-row-gap-xl="1"]{ row-gap:var(--t-spacing-1); }
4125
+ [data-flex-row-gap-xl="1.5"]{ row-gap:var(--t-spacing-1-half); }
4126
+ [data-flex-row-gap-xl="2"]{ row-gap:var(--t-spacing-2); }
4127
+ [data-flex-row-gap-xl="3"]{ row-gap:var(--t-spacing-3); }
4128
+ [data-flex-row-gap-xl="4"]{ row-gap:var(--t-spacing-4); }
4129
+ [data-flex-row-gap-xl="5"]{ row-gap:var(--t-spacing-5); }
4130
+ [data-flex-row-gap-xl="6"]{ row-gap:var(--t-spacing-6); }
4131
+ [data-flex-row-gap-xl="7"]{ row-gap:var(--t-spacing-7); }
4422
4132
 
4423
- .tds-pane-title{
4424
- color:var(--tds-pane-title-color);
4425
- font-size:var(--tds-pane-title-font-size);
4426
- font-weight:var(--tds-pane-title-font-weight);
4427
- line-height:var(--tds-pane-title-line-height);
4428
- margin:0;
4429
- }
4133
+ [data-flex-column-gap-xl="0"]{ -moz-column-gap:0; column-gap:0; }
4134
+ [data-flex-column-gap-xl="0.25"]{ -moz-column-gap:var(--t-spacing-fourth); column-gap:var(--t-spacing-fourth); }
4135
+ [data-flex-column-gap-xl="0.5"]{ -moz-column-gap:var(--t-spacing-half); column-gap:var(--t-spacing-half); }
4136
+ [data-flex-column-gap-xl="1"]{ -moz-column-gap:var(--t-spacing-1); column-gap:var(--t-spacing-1); }
4137
+ [data-flex-column-gap-xl="1.5"]{ -moz-column-gap:var(--t-spacing-1-half); column-gap:var(--t-spacing-1-half); }
4138
+ [data-flex-column-gap-xl="2"]{ -moz-column-gap:var(--t-spacing-2); column-gap:var(--t-spacing-2); }
4139
+ [data-flex-column-gap-xl="3"]{ -moz-column-gap:var(--t-spacing-3); column-gap:var(--t-spacing-3); }
4140
+ [data-flex-column-gap-xl="4"]{ -moz-column-gap:var(--t-spacing-4); column-gap:var(--t-spacing-4); }
4141
+ [data-flex-column-gap-xl="5"]{ -moz-column-gap:var(--t-spacing-5); column-gap:var(--t-spacing-5); }
4142
+ [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4143
+ [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4430
4144
 
4431
- .tds-pane-body{
4432
- padding:var(--tds-pane-body-padding);
4433
- }
4145
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4146
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
4147
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4434
4148
 
4435
- .tds-pane-footer{
4436
- padding-block-end:var(--tds-pane-footer-padding-block);
4437
- padding-inline:var(--tds-pane-footer-padding-inline);
4438
- }
4149
+ [data-padding-xl="0"]{ padding:0; }
4150
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4151
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4152
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4153
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4154
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4155
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4156
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4157
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4158
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4159
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4439
4160
 
4440
- .tds-pane-divider{
4441
- border:0;
4442
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
4443
- margin-block:var(--tds-pane-divider-margin-block);
4444
- margin-inline:var(--tds-pane-divider-margin-inline);
4161
+ [data-padding-block-xl="0"]{ padding-block:0; }
4162
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4163
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4164
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4165
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4166
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4167
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4168
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4169
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4170
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4171
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4172
+
4173
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4174
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4175
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4176
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4177
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4178
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4179
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4180
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4181
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4182
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4183
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4445
4184
  }
4446
4185
 
4447
4186
  .tds-data-table{
@@ -4935,117 +4674,301 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4935
4674
  border:0;
4936
4675
  }
4937
4676
 
4938
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4939
- color:var(--t-form-placeholder-color);
4940
- }
4677
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4678
+ color:var(--t-form-placeholder-color);
4679
+ }
4680
+
4681
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4682
+ color:var(--t-form-placeholder-color);
4683
+ }
4684
+
4685
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-decoration,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-cancel-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-button,:is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-webkit-search-results-decoration{
4686
+ -webkit-appearance:none;
4687
+ appearance:none;
4688
+ }
4689
+
4690
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4691
+ inline-size:calc(var(--t-font-size-md) * .8);
4692
+ block-size:calc(var(--t-font-size-md) * .8);
4693
+ }
4694
+
4695
+ .tds-data-table-filter-controls-search-input-control .tds-btn{
4696
+ --tds-btn-color:var(--t-icon-color-dim);
4697
+ --tds-btn-padding-truncated-x:0;
4698
+ --_search-input-clear-button-visibility:hidden;
4699
+
4700
+ visibility:var(--_search-input-clear-button-visibility);
4701
+ flex-shrink:0;
4702
+ }
4703
+
4704
+ @media (prefers-reduced-motion: reduce){
4705
+
4706
+ .tds-data-table-filter-controls-search-input-control{
4707
+ transition-property:none;
4708
+ }
4709
+ }
4710
+
4711
+ .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4712
+ --_search-input-clear-button-visibility:visible;
4713
+ }
4714
+
4715
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4716
+ position:sticky;
4717
+ inset-block-start:var(--_label-sticky-block-start);
4718
+ background-color:var(--t-surface-color-card);
4719
+ }
4720
+
4721
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4722
+ scroll-margin-block-start:var(--t-spacing-4);
4723
+ }
4724
+
4725
+ .tds-data-table-filter-controls-list{
4726
+ --_label-sticky-block-start:var(--t-spacing-6);
4727
+
4728
+ margin-block-start:var(--t-spacing-1);
4729
+ }
4730
+
4731
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4732
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
4733
+ }
4734
+
4735
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
4736
+ scroll-margin-block-start:var(--t-spacing-6);
4737
+ }
4738
+
4739
+ .tds-data-table-filter-controls-submenu-list{
4740
+ --_label-sticky-block-start:0;
4741
+ }
4742
+
4743
+ .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4744
+ position:absolute;
4745
+ inset-block-start:calc(-1 * var(--t-spacing-1));
4746
+ inset-inline-start:0;
4747
+ inline-size:100%;
4748
+ block-size:var(--t-spacing-1);
4749
+ content:"";
4750
+ background-color:var(--t-surface-color-card);
4751
+ }
4752
+
4753
+ .tds-data-table-filter-controls-submenu-trigger[data-open]{
4754
+ background:var(--t-fill-color-neutral-070);
4755
+ }
4756
+
4757
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4758
+ inline-size:16rem;
4759
+ }
4760
+
4761
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4762
+ max-block-size:20rem;
4763
+ }
4764
+
4765
+ .tds-data-table-filter-controls-submenu-chevron{
4766
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4767
+
4768
+ color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4769
+ transform:scale(.8);
4770
+ }
4771
+
4772
+ [data-open] .tds-data-table-filter-controls-submenu-chevron{
4773
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4774
+ }
4775
+
4776
+ @media (prefers-reduced-motion: no-preference){
4777
+
4778
+ .tds-data-table-filter-controls-submenu-chevron{
4779
+ transition-timing-function:var(--t-ease-in-out);
4780
+ transition-duration:var(--t-duration-200);
4781
+ transition-property:color;
4782
+ }
4783
+ }
4784
+ .tds-data-table-filter-controls-drill-back{
4785
+ --tds-dropdown-item-column-gap:var(--t-spacing-half);
4786
+
4787
+ padding-inline-start:var(--t-spacing-half);
4788
+ }
4789
+
4790
+ .tds-data-table-filters-shelf{
4791
+ height:auto;
4792
+ overflow:hidden;
4793
+ transition:height var(--t-duration-300) var(--t-ease-out);
4794
+ }
4795
+
4796
+ @media (prefers-reduced-motion: reduce){
4797
+
4798
+ .tds-data-table-filters-shelf{
4799
+ transition:none;
4800
+ }
4801
+ }
4802
+
4803
+ .tds-data-table-filters-shelf--collapsed{
4804
+ height:0;
4805
+ transition-timing-function:var(--t-ease-in);
4806
+ }
4807
+
4808
+ @supports (interpolate-size: allow-keywords){
4809
+ .tds-data-table-filters-shelf{
4810
+ interpolate-size:allow-keywords;
4811
+ }
4812
+ }
4813
+
4814
+ .tds-data-table-filters{
4815
+ padding-block:var(--tds-data-table-cell-padding-block);
4816
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4817
+ border-top:1px solid var(--tds-data-table-border-color);
4818
+ }
4819
+
4820
+ .tds-data-table-filters-active{
4821
+ display:flex;
4822
+ -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4823
+ column-gap:var(--tds-data-table-cell-padding-inline);
4824
+ justify-content:space-between;
4825
+ }
4826
+
4827
+ .tds-data-table-filters-active-list{
4828
+ display:flex;
4829
+ flex-wrap:wrap;
4830
+ gap:var(--t-spacing-half);
4831
+ }
4832
+
4833
+ .tds-data-table-filters-active-actions{
4834
+ flex-shrink:0;
4835
+ }
4941
4836
 
4942
- :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4943
- color:var(--t-form-placeholder-color);
4944
- }
4837
+ :root{
4945
4838
 
4946
- :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{
4947
- -webkit-appearance:none;
4948
- appearance:none;
4949
- }
4839
+ --_data-table-filter-border-info:hsl(204 96% 89%);
4840
+ --_data-table-filter-border-error:hsl(8 60% 85%);
4841
+ }
4950
4842
 
4951
- .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4952
- inline-size:calc(var(--t-font-size-md) * .8);
4953
- block-size:calc(var(--t-font-size-md) * .8);
4843
+ :root[data-color-mode="dark"]{
4844
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4845
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4846
+ }
4847
+
4848
+ @media (prefers-color-scheme: dark){
4849
+ :root[data-color-mode="system"]{
4850
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4851
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4954
4852
  }
4853
+ }
4955
4854
 
4956
- .tds-data-table-filter-controls-search-input-control .tds-btn{
4957
- --tds-btn-color:var(--t-icon-color-dim);
4958
- --tds-btn-padding-truncated-x:0;
4959
- --_search-input-clear-button-visibility:hidden;
4855
+ .tds-btn-group--data-table-filters-chip .tds-btn{
4856
+ --_chip-border-color:var(--_data-table-filter-border-info);
4857
+ --_chip-icon-color:var(--t-icon-color-status-info);
4960
4858
 
4961
- visibility:var(--_search-input-clear-button-visibility);
4962
- flex-shrink:0;
4859
+ gap:0;
4860
+ color:var(--t-text-color-status-info);
4861
+ background-color:var(--t-fill-color-status-info-dim);
4862
+ border-color:var(--_chip-border-color);
4863
+ }
4864
+
4865
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) svg{
4866
+ color:var(--_chip-icon-color);
4867
+ transform:scale(.75);
4868
+ }
4869
+
4870
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4871
+ padding-inline:var(--tds-btn-padding-x);
4872
+ border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4873
+ transition-timing-function:var(--t-ease-in-out);
4874
+ transition-duration:var(--t-duration-200);
4875
+ transition-property:border-color;
4963
4876
  }
4964
4877
 
4965
4878
  @media (prefers-reduced-motion: reduce){
4966
4879
 
4967
- .tds-data-table-filter-controls-search-input-control{
4968
- transition-property:none;
4969
- }
4880
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span{
4881
+ transition:none;
4970
4882
  }
4883
+ }
4971
4884
 
4972
- .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4973
- --_search-input-clear-button-visibility:visible;
4974
- }
4885
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:first-child{
4886
+ padding-inline-start:0;
4887
+ }
4975
4888
 
4976
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4977
- position:sticky;
4978
- inset-block-start:var(--_label-sticky-block-start);
4979
- background-color:var(--t-surface-color-card);
4889
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn) span:last-child{
4890
+ padding-inline-end:0;
4891
+ border-inline-end-color:transparent;
4980
4892
  }
4981
4893
 
4982
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4983
- scroll-margin-block-start:var(--t-spacing-4);
4894
+ :is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip .tds-btn):where(button):focus{
4895
+ color:var(--t-text-color-interaction);
4896
+ background-color:var(--t-fill-color-status-info-ghost);
4897
+ border-color:var(--_chip-border-color);
4984
4898
  }
4985
4899
 
4986
- .tds-data-table-filter-controls-list{
4987
- --_label-sticky-block-start:var(--t-spacing-6);
4900
+ .tds-btn-group--data-table-filters-chip-inactive .tds-btn{
4901
+ --_chip-border-color:var(--t-border-color-button-neutral);
4902
+ --_chip-icon-color:var(--t-icon-color-status-neutral);
4988
4903
 
4989
- margin-block-start:var(--t-spacing-1);
4904
+ color:var(--t-text-color);
4905
+ background-color:var(--t-fill-color-status-neutral-dim);
4990
4906
  }
4991
4907
 
4992
- .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4993
- --tds-dropdown-item-color:var(--t-text-color-secondary);
4908
+ :is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-inactive .tds-btn):where(button):focus{
4909
+ color:var(--t-text-color);
4910
+ background-color:var(--t-fill-color-status-neutral-ghost);
4994
4911
  }
4995
4912
 
4996
- .tds-data-table-filter-controls-list .tds-dropdown-item{
4997
- scroll-margin-block-start:var(--t-spacing-6);
4998
- }
4913
+ .tds-btn-group--data-table-filters-chip-invalid .tds-btn{
4914
+ --_chip-border-color:var(--_data-table-filter-border-error);
4915
+ --_chip-icon-color:var(--t-icon-color-status-error);
4999
4916
 
5000
- .tds-data-table-filter-controls-submenu-list{
5001
- --_label-sticky-block-start:0;
4917
+ color:var(--t-text-color-status-error);
4918
+ background-color:var(--t-fill-color-status-error-dim);
5002
4919
  }
5003
4920
 
5004
- .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
5005
- position:absolute;
5006
- inset-block-start:calc(-1 * var(--t-spacing-1));
5007
- inset-inline-start:0;
5008
- inline-size:100%;
5009
- block-size:var(--t-spacing-1);
5010
- content:"";
5011
- background-color:var(--t-surface-color-card);
4921
+ :is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):active,:is(.tds-btn-group--data-table-filters-chip-invalid .tds-btn):where(button):focus{
4922
+ color:var(--t-text-color-status-error);
4923
+ background-color:var(--t-fill-color-status-error-ghost);
5012
4924
  }
5013
4925
 
5014
- .tds-data-table-filter-controls-submenu-trigger[data-open]{
5015
- background:var(--t-fill-color-neutral-070);
4926
+ .tds-data-table-filters-chip-static{
4927
+ cursor:default;
5016
4928
  }
4929
+ .tds-popover--data-table-filters-popover .tds-popover-content{
4930
+ gap:var(--t-spacing-1);
4931
+ align-items:start;
4932
+ padding:var(--t-spacing-2);
4933
+ }
5017
4934
 
5018
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
5019
- inline-size:16rem;
5020
- }
4935
+ @media (prefers-reduced-motion: no-preference){
4936
+ .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4937
+ animation-name:tds-data-table-filters-popover;
4938
+ }
5021
4939
 
5022
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
5023
- max-block-size:20rem;
4940
+ @keyframes tds-data-table-filters-popover{
4941
+ from{
4942
+ opacity:0;
4943
+ }
4944
+ }
5024
4945
  }
5025
4946
 
5026
- .tds-data-table-filter-controls-submenu-chevron{
5027
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
5028
-
5029
- color:var(--tds-data-table-filter-controls-submenu-chevron-color);
5030
- transform:scale(.8);
4947
+ .tds-data-table-filters-popover-label{
4948
+ margin-block:0;
4949
+ font-size:var(--t-font-size-md);
4950
+ font-weight:var(--t-font-weight-medium);
5031
4951
  }
5032
4952
 
5033
- [data-open] .tds-data-table-filter-controls-submenu-chevron{
5034
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
5035
- }
5036
-
5037
- @media (prefers-reduced-motion: no-preference){
4953
+ .tds-data-table-filters-popover-label-operator{
4954
+ font-weight:var(--t-font-weight-normal);
4955
+ }
5038
4956
 
5039
- .tds-data-table-filter-controls-submenu-chevron{
5040
- transition-timing-function:var(--t-ease-in-out);
5041
- transition-duration:var(--t-duration-200);
5042
- transition-property:color;
4957
+ .tds-data-table-filters-popover-description{
4958
+ margin-block-start:calc(var(--t-spacing-fourth) * -1);
4959
+ margin-block-end:0;
4960
+ font-size:var(--t-font-size-sm);
4961
+ color:var(--t-text-color-secondary);
5043
4962
  }
5044
- }
5045
- .tds-data-table-filter-controls-drill-back{
5046
- --tds-dropdown-item-column-gap:var(--t-spacing-half);
5047
4963
 
5048
- padding-inline-start:var(--t-spacing-half);
4964
+ .tds-data-table-filter-controls-badge{
4965
+ min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4966
+ padding-inline:var(--t-spacing-half);
4967
+ font-size:var(--t-font-size-sm);
4968
+ color:var(--t-text-color-status-info);
4969
+ background-color:var(--t-fill-color-status-info-dim);
4970
+ border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4971
+ border-radius:var(--t-border-radius-round);
5049
4972
  }
5050
4973
 
5051
4974
  .tds-segmented-control{
@@ -5172,6 +5095,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5172
5095
  --tds-segmented-control-background-color-disabled:transparent;
5173
5096
  }
5174
5097
 
5098
+ .tds-pane{
5099
+ --tds-pane-background-color:var(--t-surface-color-card);
5100
+ --tds-pane-border-radius:var(--t-border-radius-lg);
5101
+ --tds-pane-border-color:var(--t-border-color);
5102
+
5103
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
5104
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5105
+
5106
+ --tds-pane-title-color:var(--t-text-color-headline);
5107
+ --tds-pane-title-font-size:var(--t-font-size-lg);
5108
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
5109
+ --tds-pane-title-line-height:1.4;
5110
+
5111
+ --tds-pane-body-padding:var(--t-spacing-3);
5112
+
5113
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
5114
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5115
+
5116
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
5117
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5118
+
5119
+ background:var(--tds-pane-background-color);
5120
+ border-radius:var(--tds-pane-border-radius);
5121
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
5122
+ display:flex;
5123
+ flex-direction:column;
5124
+ }
5125
+
5126
+ .tds-pane-header{
5127
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5128
+ padding-block:var(--tds-pane-header-padding-block);
5129
+ padding-inline:var(--tds-pane-header-padding-inline);
5130
+ }
5131
+
5132
+ .tds-pane-header > .tds-helper-shelf-trigger{
5133
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
5134
+ }
5135
+
5136
+ .tds-pane-header > .tds-helper-shelf{
5137
+ flex-basis:100%;
5138
+ order:1;
5139
+ }
5140
+
5141
+ .tds-pane-header:has( > .tds-helper-shelf){
5142
+ row-gap:var(--tds-pane-header-padding-block);
5143
+ padding-block-end:0;
5144
+ }
5145
+
5146
+ .tds-pane-header > .tds-helper-shelf > .tds-helper-shelf-content{
5147
+ font-size:var(--t-font-size-md);
5148
+ margin-block-end:var(--tds-pane-header-padding-block);
5149
+ }
5150
+
5151
+ .tds-pane-title{
5152
+ color:var(--tds-pane-title-color);
5153
+ font-size:var(--tds-pane-title-font-size);
5154
+ font-weight:var(--tds-pane-title-font-weight);
5155
+ line-height:var(--tds-pane-title-line-height);
5156
+ margin:0;
5157
+ }
5158
+
5159
+ .tds-pane-body{
5160
+ padding:var(--tds-pane-body-padding);
5161
+ }
5162
+
5163
+ .tds-pane-footer{
5164
+ padding-block-end:var(--tds-pane-footer-padding-block);
5165
+ padding-inline:var(--tds-pane-footer-padding-inline);
5166
+ }
5167
+
5168
+ .tds-pane-divider{
5169
+ border:0;
5170
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5171
+ margin-block:var(--tds-pane-divider-margin-block);
5172
+ margin-inline:var(--tds-pane-divider-margin-inline);
5173
+ }
5174
+
5175
5175
  .has-instance-badge-NNA9P{
5176
5176
  inline-size:6px;
5177
5177
  block-size:6px;