@planningcenter/tapestry 4.7.0 → 4.8.0-rc.1

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 (89) hide show
  1. package/dist/components/DataTable/ActiveFilterInstance.d.ts +2 -2
  2. package/dist/components/DataTable/ActiveFilterInstance.d.ts.map +1 -1
  3. package/dist/components/DataTable/ActiveFilterInstance.js +4 -1
  4. package/dist/components/DataTable/ActiveFilterInstance.js.map +1 -1
  5. package/dist/components/DataTable/ActiveFilters.d.ts +7 -4
  6. package/dist/components/DataTable/ActiveFilters.d.ts.map +1 -1
  7. package/dist/components/DataTable/ActiveFilters.js +43 -15
  8. package/dist/components/DataTable/ActiveFilters.js.map +1 -1
  9. package/dist/components/DataTable/DataTable.d.ts +1 -1
  10. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  11. package/dist/components/DataTable/DataTable.js +59 -56
  12. package/dist/components/DataTable/DataTable.js.map +1 -1
  13. package/dist/components/DataTable/FilterChip.d.ts.map +1 -1
  14. package/dist/components/DataTable/FilterChip.js +25 -1
  15. package/dist/components/DataTable/FilterChip.js.map +1 -1
  16. package/dist/components/DataTable/FilterContext.d.ts +10 -1
  17. package/dist/components/DataTable/FilterContext.d.ts.map +1 -1
  18. package/dist/components/DataTable/FilterContext.js +52 -9
  19. package/dist/components/DataTable/FilterContext.js.map +1 -1
  20. package/dist/components/DataTable/FilterControls.d.ts.map +1 -1
  21. package/dist/components/DataTable/FilterControls.js +81 -23
  22. package/dist/components/DataTable/FilterControls.js.map +1 -1
  23. package/dist/components/DataTable/FilterControls.module.css.js +4 -0
  24. package/dist/components/DataTable/FilterControls.module.css.js.map +1 -0
  25. package/dist/components/DataTable/FilterTypes.d.ts +34 -0
  26. package/dist/components/DataTable/FilterTypes.d.ts.map +1 -1
  27. package/dist/components/DataTable/FilterTypes.js +7 -0
  28. package/dist/components/DataTable/FilterTypes.js.map +1 -0
  29. package/dist/components/DataTable/PendingFilterContext.d.ts +12 -0
  30. package/dist/components/DataTable/PendingFilterContext.d.ts.map +1 -0
  31. package/dist/components/DataTable/PendingFilterContext.js +33 -0
  32. package/dist/components/DataTable/PendingFilterContext.js.map +1 -0
  33. package/dist/components/DataTable/PendingFilterQueue.d.ts +13 -0
  34. package/dist/components/DataTable/PendingFilterQueue.d.ts.map +1 -0
  35. package/dist/components/DataTable/PendingFilterQueue.js +42 -0
  36. package/dist/components/DataTable/PendingFilterQueue.js.map +1 -0
  37. package/dist/components/DataTable/SearchableFilters.d.ts +2 -0
  38. package/dist/components/DataTable/SearchableFilters.d.ts.map +1 -1
  39. package/dist/components/DataTable/SearchableFilters.js +3 -0
  40. package/dist/components/DataTable/SearchableFilters.js.map +1 -1
  41. package/dist/components/DataTable/collectionFilter.d.ts.map +1 -1
  42. package/dist/components/DataTable/collectionFilter.js +20 -6
  43. package/dist/components/DataTable/collectionFilter.js.map +1 -1
  44. package/dist/components/DataTable/dateFilter.d.ts.map +1 -1
  45. package/dist/components/DataTable/dateFilter.js +23 -7
  46. package/dist/components/DataTable/dateFilter.js.map +1 -1
  47. package/dist/components/DataTable/filters.d.ts +1 -0
  48. package/dist/components/DataTable/filters.d.ts.map +1 -1
  49. package/dist/components/DataTable/index.d.ts +2 -1
  50. package/dist/components/DataTable/index.d.ts.map +1 -1
  51. package/dist/components/DataTable/numberFilter.d.ts.map +1 -1
  52. package/dist/components/DataTable/numberFilter.js +15 -4
  53. package/dist/components/DataTable/numberFilter.js.map +1 -1
  54. package/dist/components/DataTable/scopedFilter.d.ts +13 -0
  55. package/dist/components/DataTable/scopedFilter.d.ts.map +1 -0
  56. package/dist/components/DataTable/scopedFilter.js +114 -0
  57. package/dist/components/DataTable/scopedFilter.js.map +1 -0
  58. package/dist/components/DataTable/textFilter.d.ts.map +1 -1
  59. package/dist/components/DataTable/textFilter.js +8 -3
  60. package/dist/components/DataTable/textFilter.js.map +1 -1
  61. package/dist/components/DataTable/useShelfExpanded.d.ts +4 -3
  62. package/dist/components/DataTable/useShelfExpanded.d.ts.map +1 -1
  63. package/dist/components/DataTable/useShelfExpanded.js +16 -8
  64. package/dist/components/DataTable/useShelfExpanded.js.map +1 -1
  65. package/dist/components/DataTable/utils.d.ts +4 -0
  66. package/dist/components/DataTable/utils.d.ts.map +1 -0
  67. package/dist/components/DataTable/utils.js +13 -0
  68. package/dist/components/DataTable/utils.js.map +1 -0
  69. package/dist/components/currency-input/CurrencyInput.d.ts +51 -0
  70. package/dist/components/currency-input/CurrencyInput.d.ts.map +1 -0
  71. package/dist/components/currency-input/CurrencyInput.js +64 -0
  72. package/dist/components/currency-input/CurrencyInput.js.map +1 -0
  73. package/dist/components/currency-input/index.d.ts +4 -0
  74. package/dist/components/currency-input/index.d.ts.map +1 -0
  75. package/dist/components/popover/Popover.d.ts +12 -7
  76. package/dist/components/popover/Popover.d.ts.map +1 -1
  77. package/dist/components/popover/Popover.js +26 -4
  78. package/dist/components/popover/Popover.js.map +1 -1
  79. package/dist/reactRender.css +1800 -1585
  80. package/dist/reactRender.css.map +1 -1
  81. package/dist/reactRenderLegacy.css +1800 -1585
  82. package/dist/reactRenderLegacy.css.map +1 -1
  83. package/dist/unstable.css +442 -227
  84. package/dist/unstable.css.map +1 -1
  85. package/dist/unstable.d.ts +1 -0
  86. package/dist/unstable.d.ts.map +1 -1
  87. package/dist/unstable.js +2 -0
  88. package/dist/unstable.js.map +1 -1
  89. package/package.json +3 -3
@@ -677,201 +677,368 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- .tds-checkbox{
681
- --tds-checkbox-font-size:var(--t-font-size-md);
682
- --tds-checkbox-cursor:pointer;
683
- --tds-checkbox-line-height:1.4;
684
- --tds-checkbox-transition-property:background-color, border-color;
685
680
 
686
- --tds-checkbox-input-size:var(--t-element-size-md);
687
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
688
- --tds-checkbox-input-border-color:var(--t-form-border-color);
689
- --tds-checkbox-input-background-color:var(--t-form-background-color);
681
+ @media (prefers-reduced-motion: no-preference){
690
682
 
691
- --tds-checkbox-input-icon:none;
692
- --tds-checkbox-input-icon-visibility:hidden;
693
- --tds-checkbox-input-icon-opacity:0;
694
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
683
+ :root{
684
+ interpolate-size:allow-keywords;
685
+ }
686
+ }
695
687
 
696
- --tds-checkbox-label-color:var(--t-form-color);
688
+ @layer tds-component{
689
+ tds-sidenav,
690
+ .tds-sidenav{
691
+ --tds-sidenav-indent:12px;
692
+ --tds-sidenav-item-depth:0;
697
693
 
698
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
699
- --tds-checkbox-description-line-height:1.35;
700
- --tds-checkbox-description-color:var(--t-text-color-secondary);
701
- --tds-checkbox-description-invalid-icon-display:none;
694
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
702
695
 
703
- position:relative;
704
- display:inline-grid;
705
- grid-template-columns:auto;
706
- grid-auto-columns:1fr;
707
- gap:var(--t-spacing-fourth) 0;
708
- line-height:var(--tds-checkbox-line-height);
709
- -webkit-user-select:none;
710
- -moz-user-select:none;
711
- user-select:none;
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);
702
+
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);
707
+
708
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
+ --tds-sidenav-item-nested-background-selected:transparent;
711
+
712
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
715
+
716
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
+ }
719
+
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
+ }
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);
736
+ }
712
737
  }
713
738
 
714
- .tds-checkbox label{
715
- grid-area:1 / 2;
716
- padding-inline-start:var(--t-spacing-1);
717
- font-size:var(--tds-checkbox-font-size);
718
- font-weight:var(--t-font-weight-normal);
719
- color:var(--tds-checkbox-label-color);
720
- cursor:var(--tds-checkbox-cursor);
739
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
+ display:flex;
721
741
  }
722
742
 
723
- .tds-checkbox tds-indeterminate{
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%;
747
+ }
748
+
749
+ .tds-sidenav-section-list{
750
+ width:100%;
751
+ padding:0;
752
+ margin:0;
753
+ list-style:none;
754
+ }
755
+
756
+ .tds-sidenav-section-header{
757
+ display:flex;
758
+ align-items:baseline;
759
+ justify-content:space-between;
760
+ padding-top:var(--t-spacing-2);
761
+ }
762
+
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
+ }
771
+
772
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
+ padding-top:0;
774
+ }
775
+
776
+ .tds-sidenav-section-header [slot="label-actions"]{
724
777
  display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
725
780
  }
726
781
 
727
- .tds-checkbox input[type="checkbox"]{
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){
728
798
  position:relative;
729
- width:1em;
730
- height:1em;
731
- margin:calc((1lh - 1em) / 2) 0 0;
732
- font-size:var(--tds-checkbox-font-size);
733
- line-height:inherit;
799
+ display:flex;
800
+ gap:12px;
801
+ align-items:center;
802
+ width:100%;
803
+ padding:12px;
804
+ overflow:hidden;
805
+ font-size:var(--t-font-size-sm);
806
+ line-height:18px;
807
+ color:var(--t-text-color-headline);
808
+ white-space:nowrap;
809
+ text-decoration:none;
734
810
  -webkit-appearance:none;
735
811
  -moz-appearance:none;
736
812
  appearance:none;
737
- cursor:var(--tds-checkbox-cursor);
738
- background-color:var(--tds-checkbox-input-background-color);
739
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
740
- border-radius:var(--tds-checkbox-input-border-radius);
741
- transition-timing-function:var(--t-ease-in-out);
742
- transition-duration:var(--t-duration-200);
743
- transition-property:var(--tds-checkbox-transition-property);
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);
744
818
  }
745
819
 
746
- :is(.tds-checkbox input[type="checkbox"])::before{
747
- position:absolute;
748
- top:50%;
749
- left:50%;
750
- visibility:var(--tds-checkbox-input-icon-visibility);
751
- width:100%;
752
- height:100%;
753
- content:"";
754
- background-color:var(--tds-checkbox-input-icon-fill);
755
- border-radius:var(--tds-checkbox-input-border-radius);
756
- opacity:var(--tds-checkbox-input-icon-opacity);
757
- -webkit-mask-image:var(--tds-checkbox-input-icon);
758
- mask-image:var(--tds-checkbox-input-icon);
759
- -webkit-mask-repeat:no-repeat;
760
- mask-repeat:no-repeat;
761
- -webkit-mask-size:contain;
762
- mask-size:contain;
763
- transform:translate(-50%, -50%);
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;
764
827
  }
765
828
 
766
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
767
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
768
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
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);
832
+ text-decoration:none;
769
833
  }
770
834
 
771
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
772
- outline:var(--t-focus-ring-outline);
773
- outline-offset:var(--t-focus-ring-offset);
835
+ :is(.tds-sidenav-item :is(a,button)):active{
836
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
774
837
  }
775
838
 
776
- :is(.tds-checkbox input[type="checkbox"]):disabled{
777
- pointer-events:none;
839
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
+ overflow:hidden;
841
+ color:var(--tds-sidenav-item-icon-color);
778
842
  }
779
843
 
780
- @media (prefers-reduced-motion: reduce){
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);
848
+ }
781
849
 
782
- .tds-checkbox input[type="checkbox"]{
783
- --tds-checkbox-transition-property:none;
784
- }
850
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
+ --tds-sidenav-indent:19px;
785
852
  }
786
853
 
787
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
788
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
789
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
790
- --tds-checkbox-input-icon-visibility:visible;
791
- --tds-checkbox-input-icon-opacity:1;
792
- }
793
-
794
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
795
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
796
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
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;
797
858
  }
798
859
 
799
- .tds-checkbox:has(input:checked){
800
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
801
- }
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);
802
863
 
803
- .tds-checkbox:has(input:indeterminate){
804
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
864
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
+ font-weight:var(--t-font-weight-semibold);
805
866
  }
806
867
 
807
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
808
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
809
- --tds-checkbox-description-color:var(--t-text-color-status-error);
810
- --tds-checkbox-description-invalid-icon-display:inline-block;
868
+ .tds-sidenav-item:has(.tds-sidenav-section){
869
+ display:flex;
870
+ flex-direction:column;
871
+ gap:var(--t-spacing-half);
811
872
  }
812
873
 
813
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
814
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
815
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
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);
816
885
  }
817
886
 
818
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
819
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
820
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
887
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
+ --tds-sidenav-item-depth:2;
821
889
  }
822
890
 
823
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
824
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
825
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
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);
826
908
  }
827
909
 
828
- .tds-checkbox:has(input:required) label::after{
829
- margin-left:.25ch;
830
- color:var(--t-text-color-status-error);
831
- content:"*";
832
- }
910
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
911
+ position:absolute;
912
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
+ z-index:-1;
914
+ height:100%;
915
+ content:"";
916
+ background-color:var(--tds-sidenav-item-nested-background);
917
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
+ transition:var(--tds-sidenav-item-transition);
919
+ }
833
920
 
834
- .tds-checkbox:has(input:disabled){
835
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
836
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
921
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
+ display:block;
923
+ text-align:left;
924
+ white-space:normal;
925
+ }
837
926
 
838
- --tds-checkbox-label-color:var(--t-form-color-disabled);
839
- --tds-checkbox-description-color:var(--t-form-color-disabled);
840
- --tds-checkbox-cursor:not-allowed;
841
- }
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
+ }
842
931
 
843
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
844
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
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
+ }
935
+
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);
845
939
  }
846
940
 
847
- .tds-checkbox-description{
941
+ .tds-sidenav-responsive-header{
848
942
  display:flex;
849
- grid-area:2 / 2;
850
- gap:var(--t-spacing-half);
851
- align-items:flex-start;
852
- padding-inline-start:var(--t-spacing-1);
853
- margin:0;
854
- font-size:var(--tds-checkbox-description-font-size);
855
- line-height:var(--tds-checkbox-description-line-height);
856
- color:var(--tds-checkbox-description-color);
857
- cursor:text;
943
+ gap:var(--t-spacing-2);
944
+ align-items:center;
945
+ width:100%;
858
946
  }
859
947
 
860
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
861
- display:var(--tds-checkbox-description-invalid-icon-display);
862
- flex-shrink:0;
863
- margin-top:calc(.5lh - .5em);
864
- line-height:var(--tds-checkbox-description-line-height);
948
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
+ order:0;
865
950
  }
866
951
 
867
- .tds-checkbox--sm{
868
- --tds-checkbox-line-height:1.35;
869
- --tds-checkbox-input-size:var(--t-element-size-sm);
870
- --tds-checkbox-font-size:var(--t-font-size-sm);
871
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
872
- --tds-checkbox-description-line-height:1.3;
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
+ flex:1;
954
+ order:1;
955
+ margin:0;
956
+ font-size:var(--t-font-size-lg);
957
+ font-weight:var(--t-font-weight-medium);
958
+ color:var(--t-text-color-headline);
959
+ }
960
+
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;
979
+ }
980
+
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;
989
+ }
990
+
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;
997
+ }
998
+
999
+ .tds-sidenav-collapse:not(:popover-open){
1000
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
+ transition:var(--tds-sidenav-collapse-transition-exit);
1002
+ }
1003
+
1004
+ @starting-style{
1005
+ .tds-sidenav-collapse:popover-open{
1006
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
+ transform:var(--tds-sidenav-collapse-closed-transform);
1008
+ }
1009
+ }
1010
+ }
1011
+ @supports not selector(:popover-open){
1012
+ .tds-sidenav-collapse.\:popover-open{
1013
+ display:flex;
1014
+ }
1015
+
1016
+ .tds-sidenav-collapse:not(.\:popover-open){
1017
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
+ transition:var(--tds-sidenav-collapse-transition-exit);
1019
+ }
1020
+ }
1021
+ }
1022
+
1023
+ @media (min-width: 720px){
1024
+ .tds-sidenav-responsive-header{
1025
+ display:none;
1026
+ }
873
1027
  }
874
1028
 
1029
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
+ display:none;
1031
+ }
1032
+
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
+ display:block;
1035
+ }
1036
+
1037
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
+ display:flex;
1039
+ flex-direction:column;
1040
+ }
1041
+
875
1042
  .tds-button-group{
876
1043
  display:inline-flex;
877
1044
  }
@@ -988,152 +1155,43 @@
988
1155
  --tds-checkbox-group-description-line-height:1.3;
989
1156
  }
990
1157
 
1158
+ .tds-radio{
1159
+ --tds-radio-font-size:var(--t-font-size-md);
1160
+ --tds-radio-cursor:pointer;
1161
+ --tds-radio-line-height:1.4;
1162
+ --tds-radio-transition-property:border-width;
991
1163
 
992
- :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{
993
- -webkit-appearance:none;
994
- appearance:none;
995
- }
1164
+ --tds-radio-input-size:var(--t-element-size-md);
1165
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1166
+ --tds-radio-input-border-color:var(--t-form-border-color);
1167
+ --tds-radio-input-border-width:var(--t-form-border-width);
1168
+ --tds-radio-input-background-color:var(--t-form-background-color);
996
1169
 
997
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
998
- inline-size:1em;
999
- block-size:2em;
1000
- }
1170
+ --tds-radio-label-color:var(--t-form-color);
1001
1171
 
1002
- [type="file"]:is(.tds-input input){
1003
- padding-block:var(--t-spacing-half);
1004
- padding-inline-start:var(--t-spacing-half);
1005
- }
1172
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1173
+ --tds-radio-description-line-height:1.35;
1174
+ --tds-radio-description-color:var(--t-text-color-secondary);
1006
1175
 
1007
- [type="file"]:is(.tds-input input):not(:disabled){
1008
- color:var(--t-text-color-secondary);
1009
- }
1176
+ position:relative;
1177
+ display:inline-grid;
1178
+ grid-template-columns:auto;
1179
+ grid-auto-columns:1fr;
1180
+ gap:var(--t-spacing-fourth) 0;
1181
+ line-height:var(--tds-radio-line-height);
1182
+ -webkit-user-select:none;
1183
+ -moz-user-select:none;
1184
+ user-select:none;
1185
+ }
1010
1186
 
1011
- [type="file"]:is(.tds-input input)::file-selector-button{
1012
- --_file-btn-padding-block:3px;
1013
-
1014
- padding-block:var(--_file-btn-padding-block);
1015
- padding-inline:12px;
1016
- margin-inline-end:12px;
1017
- font:inherit;
1018
- 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));
1019
- color:var(--t-text-color-status-neutral);
1020
- cursor:pointer;
1021
- background-color:var(--t-fill-color-button-neutral-solid);
1022
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1023
- border-radius:var(--t-border-radius-md);
1024
- transition-timing-function:var(--t-ease-in-out);
1025
- transition-duration:var(--t-duration-200);
1026
- transition-property:color, background-color, border-color;
1027
- }
1028
-
1029
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1030
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1031
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1032
- }
1033
-
1034
- [type="file"]:is(.tds-input input):active::file-selector-button{
1035
- background-color:var(--t-fill-color-button-neutral-solid-active);
1036
- border-color:var(--t-fill-color-button-neutral-solid-active);
1037
- }
1038
-
1039
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1040
- color:var(--t-text-color-disabled);
1041
- pointer-events:none;
1042
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1043
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1044
- }
1045
- @supports (field-sizing: content){
1046
- .tds-input--auto-width{
1047
- inline-size:-moz-fit-content;
1048
- inline-size:fit-content;
1049
- min-inline-size:min(100%, 122px);
1050
- }
1051
-
1052
- .tds-input--auto-width input{
1053
- field-sizing:content;
1054
- inline-size:auto;
1055
- }
1056
- }
1057
-
1058
- .tds-popover{
1059
- max-inline-size:24rem;
1060
- overflow:auto;
1061
- overscroll-behavior:none;
1062
- outline:0;
1063
- scrollbar-color:#0004 var(--t-surface-color-card);
1064
- scrollbar-width:thin;
1065
- background:var(--t-surface-color-card);
1066
- background-clip:padding-box;
1067
- border:1px solid var(--t-border-color);
1068
- border-radius:var(--t-border-radius);
1069
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1070
- }
1071
-
1072
- @media (prefers-reduced-motion: no-preference){
1073
- .tds-popover[data-entering]{
1074
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1075
- }
1076
-
1077
- .tds-popover[data-exiting]{
1078
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1079
- }
1080
-
1081
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1082
- will-change:opacity, transform;
1083
- }
1084
-
1085
- @keyframes tds-popover{
1086
- from{
1087
- opacity:0;
1088
- transform:translateY(-8px);
1089
- }
1090
- }
1091
- }
1092
-
1093
- .tds-popover-content{
1094
- display:flex;
1095
- flex-direction:column;
1096
- padding:var(--t-spacing-1);
1097
- outline:0;
1098
- }
1099
-
1100
- .tds-radio{
1101
- --tds-radio-font-size:var(--t-font-size-md);
1102
- --tds-radio-cursor:pointer;
1103
- --tds-radio-line-height:1.4;
1104
- --tds-radio-transition-property:border-width;
1105
-
1106
- --tds-radio-input-size:var(--t-element-size-md);
1107
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1108
- --tds-radio-input-border-color:var(--t-form-border-color);
1109
- --tds-radio-input-border-width:var(--t-form-border-width);
1110
- --tds-radio-input-background-color:var(--t-form-background-color);
1111
-
1112
- --tds-radio-label-color:var(--t-form-color);
1113
-
1114
- --tds-radio-description-font-size:var(--t-font-size-sm);
1115
- --tds-radio-description-line-height:1.35;
1116
- --tds-radio-description-color:var(--t-text-color-secondary);
1117
-
1118
- position:relative;
1119
- display:inline-grid;
1120
- grid-template-columns:auto;
1121
- grid-auto-columns:1fr;
1122
- gap:var(--t-spacing-fourth) 0;
1123
- line-height:var(--tds-radio-line-height);
1124
- -webkit-user-select:none;
1125
- -moz-user-select:none;
1126
- user-select:none;
1127
- }
1128
-
1129
- .tds-radio label{
1130
- grid-area:1 / 2;
1131
- padding-inline-start:var(--t-spacing-1);
1132
- font-size:var(--tds-radio-font-size);
1133
- font-weight:var(--t-font-weight-normal);
1134
- color:var(--tds-radio-label-color);
1135
- cursor:var(--tds-radio-cursor);
1136
- }
1187
+ .tds-radio label{
1188
+ grid-area:1 / 2;
1189
+ padding-inline-start:var(--t-spacing-1);
1190
+ font-size:var(--tds-radio-font-size);
1191
+ font-weight:var(--t-font-weight-normal);
1192
+ color:var(--tds-radio-label-color);
1193
+ cursor:var(--tds-radio-cursor);
1194
+ }
1137
1195
 
1138
1196
  .tds-radio input[type="radio"]{
1139
1197
  position:relative;
@@ -1230,1189 +1288,1131 @@
1230
1288
  --tds-radio-description-line-height:1.3;
1231
1289
  }
1232
1290
 
1233
- .tds-modal-overlay{
1234
- --tds-modal-min-margin-block:var(--t-spacing-3);
1235
-
1236
- position:fixed;
1237
- inset:0;
1238
- z-index:1000;
1239
- display:grid;
1240
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1241
- justify-items:center;
1242
- overflow-y:auto;
1243
- background:hsl(0 0% 0% / 40%);
1244
- }
1291
+ .tds-checkbox{
1292
+ --tds-checkbox-font-size:var(--t-font-size-md);
1293
+ --tds-checkbox-cursor:pointer;
1294
+ --tds-checkbox-line-height:1.4;
1295
+ --tds-checkbox-transition-property:background-color, border-color;
1245
1296
 
1246
- .tds-modal-overlay[data-entering]{
1247
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1248
- }
1297
+ --tds-checkbox-input-size:var(--t-element-size-md);
1298
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1299
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1300
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1249
1301
 
1250
- .tds-modal-overlay[data-exiting]{
1251
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1252
- }
1302
+ --tds-checkbox-input-icon:none;
1303
+ --tds-checkbox-input-icon-visibility:hidden;
1304
+ --tds-checkbox-input-icon-opacity:0;
1305
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1253
1306
 
1254
- @keyframes tds-modal-overlay-fade{
1255
- from{
1256
- opacity:0;
1257
- }
1258
- }
1307
+ --tds-checkbox-label-color:var(--t-form-color);
1259
1308
 
1260
- .tds-modal-frame{
1261
- --tds-modal-width:600px;
1262
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1263
- display:flex;
1309
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1310
+ --tds-checkbox-description-line-height:1.35;
1311
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1312
+ --tds-checkbox-description-invalid-icon-display:none;
1264
1313
 
1265
- grid-row:2;
1266
- justify-content:center;
1267
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1314
+ position:relative;
1315
+ display:inline-grid;
1316
+ grid-template-columns:auto;
1317
+ grid-auto-columns:1fr;
1318
+ gap:var(--t-spacing-fourth) 0;
1319
+ line-height:var(--tds-checkbox-line-height);
1320
+ -webkit-user-select:none;
1321
+ -moz-user-select:none;
1322
+ user-select:none;
1268
1323
  }
1269
1324
 
1270
- .tds-modal-frame[data-entering]{
1271
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1325
+ .tds-checkbox label{
1326
+ grid-area:1 / 2;
1327
+ padding-inline-start:var(--t-spacing-1);
1328
+ font-size:var(--tds-checkbox-font-size);
1329
+ font-weight:var(--t-font-weight-normal);
1330
+ color:var(--tds-checkbox-label-color);
1331
+ cursor:var(--tds-checkbox-cursor);
1272
1332
  }
1273
1333
 
1274
- .tds-modal-frame[data-exiting]{
1275
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1334
+ .tds-checkbox tds-indeterminate{
1335
+ display:flex;
1276
1336
  }
1277
1337
 
1278
- .tds-modal-frame--sm{
1279
- --tds-modal-width:400px;
1280
- }
1338
+ .tds-checkbox input[type="checkbox"]{
1339
+ position:relative;
1340
+ width:1em;
1341
+ height:1em;
1342
+ margin:calc((1lh - 1em) / 2) 0 0;
1343
+ font-size:var(--tds-checkbox-font-size);
1344
+ line-height:inherit;
1345
+ -webkit-appearance:none;
1346
+ -moz-appearance:none;
1347
+ appearance:none;
1348
+ cursor:var(--tds-checkbox-cursor);
1349
+ background-color:var(--tds-checkbox-input-background-color);
1350
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1351
+ border-radius:var(--tds-checkbox-input-border-radius);
1352
+ transition-timing-function:var(--t-ease-in-out);
1353
+ transition-duration:var(--t-duration-200);
1354
+ transition-property:var(--tds-checkbox-transition-property);
1355
+ }
1281
1356
 
1282
- .tds-modal-frame--lg{
1283
- --tds-modal-width:800px;
1284
- }
1357
+ :is(.tds-checkbox input[type="checkbox"])::before{
1358
+ position:absolute;
1359
+ top:50%;
1360
+ left:50%;
1361
+ visibility:var(--tds-checkbox-input-icon-visibility);
1362
+ width:100%;
1363
+ height:100%;
1364
+ content:"";
1365
+ background-color:var(--tds-checkbox-input-icon-fill);
1366
+ border-radius:var(--tds-checkbox-input-border-radius);
1367
+ opacity:var(--tds-checkbox-input-icon-opacity);
1368
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1369
+ mask-image:var(--tds-checkbox-input-icon);
1370
+ -webkit-mask-repeat:no-repeat;
1371
+ mask-repeat:no-repeat;
1372
+ -webkit-mask-size:contain;
1373
+ mask-size:contain;
1374
+ transform:translate(-50%, -50%);
1375
+ }
1285
1376
 
1286
- .tds-modal-frame--xl{
1287
- --tds-modal-width:1000px;
1288
- }
1377
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1378
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1379
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1380
+ }
1289
1381
 
1290
- @keyframes tds-modal-zoom{
1291
- from{
1292
- opacity:0;
1293
- scale:.96;
1294
- }
1295
- }
1382
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1383
+ outline:var(--t-focus-ring-outline);
1384
+ outline-offset:var(--t-focus-ring-offset);
1385
+ }
1386
+
1387
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1388
+ pointer-events:none;
1389
+ }
1296
1390
 
1297
1391
  @media (prefers-reduced-motion: reduce){
1298
- .tds-modal-overlay[data-entering],
1299
- .tds-modal-overlay[data-exiting],
1300
- .tds-modal-frame[data-entering],
1301
- .tds-modal-frame[data-exiting]{
1302
- animation:none;
1392
+
1393
+ .tds-checkbox input[type="checkbox"]{
1394
+ --tds-checkbox-transition-property:none;
1303
1395
  }
1304
- }
1396
+ }
1305
1397
 
1306
- .tds-modal{
1307
- display:flex;
1308
- flex-direction:column;
1309
- width:100%;
1310
- padding-block-start:var(--t-spacing-3);
1311
- padding-inline:0;
1312
- background:var(--t-surface-color-card);
1398
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1399
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1400
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1401
+ --tds-checkbox-input-icon-visibility:visible;
1402
+ --tds-checkbox-input-icon-opacity:1;
1403
+ }
1313
1404
 
1314
- border:0;
1315
- border-radius:var(--t-border-radius-lg);
1316
- box-shadow:0 4px 18px 0 #0003;
1317
- }
1405
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1406
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1407
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1408
+ }
1318
1409
 
1319
- .tds-modal:focus{
1320
- outline:none;
1410
+ .tds-checkbox:has(input:checked){
1411
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1321
1412
  }
1322
1413
 
1323
- .tds-modal-header{
1324
- display:grid;
1325
- grid-template-columns:1fr auto;
1326
- -moz-column-gap:var(--t-spacing-2);
1327
- column-gap:var(--t-spacing-2);
1328
- padding-block:0;
1329
- padding-inline:var(--t-spacing-4);
1330
- }
1331
-
1332
- .tds-modal-title{
1333
- grid-row:1;
1334
- grid-column:1;
1335
- margin:0;
1336
- font-size:var(--t-font-size-2xl);
1337
- font-weight:var(--t-font-weight-medium);
1338
- line-height:140%;
1339
- color:var(--t-text-color-headline);
1340
- }
1414
+ .tds-checkbox:has(input:indeterminate){
1415
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1416
+ }
1341
1417
 
1342
- .tds-modal-subtitle{
1343
- grid-row:2;
1344
- grid-column:1;
1345
- margin:0;
1346
- font-size:var(--t-font-size-md);
1347
- font-weight:var(--t-font-weight-medium);
1348
- line-height:140%;
1349
- color:var(--t-text-color-secondary);
1350
- }
1418
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1419
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1420
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1421
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1422
+ }
1351
1423
 
1352
- .tds-modal-close{
1353
- grid-row:1;
1354
- grid-column:2;
1355
- align-self:center;
1356
- color:var(--t-icon-color-dim);
1357
- }
1424
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1425
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1426
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1427
+ }
1358
1428
 
1359
- .tds-modal-body{
1360
- padding-block:var(--t-spacing-3);
1361
- padding-inline:var(--t-spacing-4);
1362
- }
1429
+ :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{
1430
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1431
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1432
+ }
1363
1433
 
1364
- .tds-modal-body--full-width{
1365
- padding-inline:0;
1366
- }
1434
+ :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){
1435
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1436
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1437
+ }
1367
1438
 
1368
- .tds-modal-footer{
1369
- display:flex;
1370
- gap:var(--t-spacing-2);
1371
- align-items:center;
1372
- justify-content:flex-end;
1373
- padding-block:var(--t-spacing-3);
1374
- padding-inline:var(--t-spacing-4);
1375
- border-top:1px solid var(--t-border-color);
1376
- }
1439
+ .tds-checkbox:has(input:required) label::after{
1440
+ margin-left:.25ch;
1441
+ color:var(--t-text-color-status-error);
1442
+ content:"*";
1443
+ }
1377
1444
 
1378
- .tds-modal-footer > [slot="start"]{
1379
- margin-inline-end:auto;
1380
- }
1445
+ .tds-checkbox:has(input:disabled){
1446
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1447
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1381
1448
 
1382
- @media (min-width: 720px){
1383
- .tds-modal-overlay{
1384
- --tds-modal-min-margin-block:0;
1449
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1450
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1451
+ --tds-checkbox-cursor:not-allowed;
1385
1452
  }
1386
1453
 
1387
- .tds-modal-footer{
1388
- position:sticky;
1389
- bottom:0;
1390
- background:var(--t-surface-color-card);
1391
- border-end-start-radius:var(--t-border-radius-lg);
1392
- border-end-end-radius:var(--t-border-radius-lg);
1393
- }
1394
- }
1454
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1455
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1456
+ }
1395
1457
 
1396
- .tds-input:has(textarea){
1397
- --tds-input-padding-block:6px;
1398
- --tds-input-resizer-size:var(--t-element-size-sm);
1399
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1458
+ .tds-checkbox-description{
1459
+ display:flex;
1460
+ grid-area:2 / 2;
1461
+ gap:var(--t-spacing-half);
1462
+ align-items:flex-start;
1463
+ padding-inline-start:var(--t-spacing-1);
1464
+ margin:0;
1465
+ font-size:var(--tds-checkbox-description-font-size);
1466
+ line-height:var(--tds-checkbox-description-line-height);
1467
+ color:var(--tds-checkbox-description-color);
1468
+ cursor:text;
1400
1469
  }
1401
1470
 
1402
- @supports (x: attr(x type(*))){
1403
-
1404
- .tds-input textarea{
1405
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1406
- }
1471
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1472
+ display:var(--tds-checkbox-description-invalid-icon-display);
1473
+ flex-shrink:0;
1474
+ margin-top:calc(.5lh - .5em);
1475
+ line-height:var(--tds-checkbox-description-line-height);
1407
1476
  }
1408
1477
 
1409
- .tds-input.tds-textarea--resize-vertical textarea{
1410
- resize:vertical;
1411
- }
1412
-
1413
- .tds-input.tds-textarea--resize-none textarea{
1414
- resize:none;
1415
- }
1478
+ .tds-checkbox--sm{
1479
+ --tds-checkbox-line-height:1.35;
1480
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1481
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1482
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1483
+ --tds-checkbox-description-line-height:1.3;
1484
+ }
1416
1485
 
1417
- .tds-input.tds-textarea--resize-auto textarea{
1418
- resize:vertical;
1419
- }
1486
+ @layer t-critical{
1487
+ tds-page-header:not(.hydrated){
1488
+ display:none;
1489
+ }
1490
+ }
1420
1491
 
1421
- @supports (field-sizing: content){
1422
- .tds-input.tds-textarea--resize-auto textarea{
1423
- field-sizing:content;
1424
- resize:none;
1425
- }
1426
- }
1492
+ @layer t-component{
1493
+ .tds-page-header{
1494
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1495
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1496
+ --tds-page-header-color:var(--t-text-color);
1497
+ --tds-page-header-bottom-border-color:transparent;
1498
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1499
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1500
+ --tds-page-header-padding-x:var(--t-spacing-2);
1501
+ --tds-page-header-padding-y:var(--t-spacing-2);
1502
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1503
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1504
+ --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%);
1505
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1506
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1507
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1508
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1509
+ --tds-page-header-nav-item-border-width:1px;
1427
1510
 
1428
- .tds-input textarea{
1429
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1430
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1431
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1432
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1433
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1434
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1435
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1436
- --tds-input-scrollbar-thumb-border-radius:999px;
1437
- --tds-input-scrollbar-thumb-border-width:3px;
1438
- --tds-input-scrollbar-track-margin-block:.125rem;
1439
- scrollbar-color:initial;
1440
- transition-timing-function:var(--t-ease-in-out);
1441
- transition-duration:var(--t-duration-200);
1442
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1443
- }
1511
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1512
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1444
1513
 
1445
- @media (pointer: fine){
1446
- :is(.tds-input textarea)::-webkit-scrollbar{
1447
- width:12px;
1448
- height:12px;
1449
- cursor:default;
1450
- }
1514
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1515
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1516
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1451
1517
 
1452
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1453
- cursor:default;
1454
- background:var(--tds-input-scrollbar-thumb-color);
1455
- background-clip:content-box;
1456
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1457
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1458
- }
1518
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1519
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1459
1520
 
1460
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1461
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1462
- }
1521
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1522
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1523
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1463
1524
 
1464
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1465
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1466
- }
1525
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1526
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1527
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1528
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1529
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1530
+ }
1467
1531
 
1468
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1469
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1470
- }
1532
+ .tds-page-header--profile{
1533
+ --tds-page-header-padding-y:20px;
1534
+ }
1471
1535
 
1472
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1473
- background:var(--tds-input-scrollbar-surface-color);
1536
+ @supports (color: light-dark(#fff, #000)){
1537
+ .tds-page-header{
1538
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1539
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1474
1540
  }
1541
+ }
1475
1542
 
1476
- :is(.tds-input textarea)::-webkit-resizer{
1477
- background:var(--tds-input-resizer-icon) no-repeat;
1478
- background-position:right bottom;
1479
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1543
+ @media (min-width: 600px){
1544
+ .tds-page-header{
1545
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1546
+ --tds-page-header-color:var(--t-text-color-secondary);
1547
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1548
+ --tds-page-header-padding-x:var(--t-spacing-3);
1549
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1550
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1551
+ --tds-page-header-nav-background:transparent;
1552
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1553
+ --tds-page-header-nav-item-border-width:1px;
1554
+ --tds-page-header-nav-item-color:var(--t-text-color);
1555
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1556
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1557
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1558
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1559
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1560
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1480
1561
  }
1562
+ }
1563
+ }
1481
1564
 
1482
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1483
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1484
- cursor:default;
1565
+ .tds-page-header{
1566
+ display:flex;
1567
+ flex-direction:column;
1568
+ padding-top:var(--tds-page-header-padding-y);
1569
+ color:var(--tds-page-header-color);
1570
+ background:var(--tds-page-header-background-color);
1571
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1572
+ }
1573
+
1574
+ .tds-page-header:not(.has-nav){
1575
+ padding-bottom:var(--tds-page-header-padding-y);
1576
+ }
1577
+
1578
+ .tds-page-header.inactive{
1579
+ background:var(--tds-page-header-background-color-inactive);
1580
+ }
1581
+
1582
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1583
+ width:100%;
1584
+ }
1585
+
1586
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1587
+ display:flex;
1588
+ flex-flow:row wrap;
1589
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1590
+ align-items:flex-start;
1591
+ justify-content:flex-start;
1592
+ min-width:0;
1593
+ }
1594
+
1595
+ :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{
1596
+ display:flex;
1597
+ gap:var(--tds-page-header-nav-gap);
1598
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1599
+ margin:0 0 -1px;
1600
+ overflow:auto;
1601
+ list-style:none;
1602
+ background:var(--tds-page-header-nav-background);
1485
1603
  }
1486
1604
 
1487
- @supports (-moz-appearance: none){
1488
- :is(.tds-input textarea){
1489
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1490
- scrollbar-width:thin;
1605
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1606
+ position:relative;
1607
+ display:inline-flex;
1608
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1609
+ font-size:var(--t-font-size-sm);
1610
+ line-height:22px;
1611
+ color:var(--tds-page-header-nav-item-color);
1612
+ white-space:nowrap;
1613
+ text-decoration:none;
1614
+ -webkit-appearance:none;
1615
+ -moz-appearance:none;
1616
+ appearance:none;
1617
+ cursor:pointer;
1618
+ outline-offset:-2px;
1619
+ background-color:var(--tds-page-header-nav-item-background-color);
1620
+ background-clip:padding-box;
1621
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1622
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1623
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1624
+ }
1625
+
1626
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1627
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1628
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1629
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1630
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1491
1631
  }
1492
1632
 
1493
- @media (hover){
1494
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1495
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1633
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1634
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1635
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1636
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1637
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1496
1638
  }
1497
- }
1498
- }
1499
- }
1500
1639
 
1501
- .tds-toggle-switch{
1502
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1503
- --tds-toggle-switch-cursor:pointer;
1504
- --tds-toggle-switch-display:inline-grid;
1505
- --tds-toggle-switch-line-height:1.4;
1640
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1641
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1642
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1643
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1644
+ }
1506
1645
 
1507
- --tds-toggle-switch-label-color:var(--t-form-color);
1646
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1647
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1648
+ color:var(--tds-page-header-nav-item-color-disabled);
1649
+ cursor:not-allowed;
1650
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1651
+ opacity:1;
1652
+ }
1508
1653
 
1509
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1510
- --tds-toggle-switch-track-outline:none;
1511
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1512
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1513
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1654
+ @media (min-width: 600px){
1655
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1656
+ position:absolute;
1657
+ inset:auto -1px -1px;
1658
+ height:1px;
1659
+ pointer-events:none;
1660
+ content:"";
1661
+ background-color:var(--tds-page-header-bottom-border-color);
1662
+ }
1663
+ }
1514
1664
 
1515
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1516
- --tds-toggle-switch-thumb-transform:translateX(0);
1517
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1665
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1666
+ position:relative;
1667
+ }
1518
1668
 
1519
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1520
- --tds-toggle-switch-description-line-height:1.35;
1521
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1522
- position:relative;
1669
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1670
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1671
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1672
+ }
1523
1673
 
1524
- display:var(--tds-toggle-switch-display);
1525
- grid-template-columns:auto;
1526
- grid-auto-columns:1fr;
1527
- gap:var(--t-spacing-fourth) 0;
1528
- -webkit-user-select:none;
1529
- -moz-user-select:none;
1530
- user-select:none;
1674
+ :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{
1675
+ position:absolute;
1676
+ top:-5px;
1677
+ right:-2px;
1678
+ width:10px;
1679
+ height:10px;
1680
+ content:"";
1681
+ background:var(--tds-page-header-nav-item-indicator-color);
1682
+ border-radius:50%;
1683
+ }
1684
+
1685
+ @media (prefers-reduced-motion: no-preference){
1686
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1687
+ animation:indicator-pulse 1.25s ease infinite;
1688
+ }
1689
+ }
1690
+
1691
+ .tds-page-header__title-bar{
1692
+ display:flex;
1693
+ flex-direction:column;
1694
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1695
+ align-items:flex-start;
1696
+ justify-content:space-between;
1697
+ padding:0 var(--tds-page-header-padding-x);
1531
1698
  }
1532
1699
 
1533
- .tds-toggle-switch input[type="checkbox"]{
1534
- position:absolute;
1535
- width:var(--tds-toggle-switch-track-width);
1536
- height:var(--tds-toggle-switch-track-height);
1537
- margin:0;
1538
- -webkit-appearance:none;
1539
- -moz-appearance:none;
1540
- appearance:none;
1541
- cursor:var(--tds-toggle-switch-cursor);
1542
- outline:var(--tds-toggle-switch-track-outline);
1543
- outline-offset:var(--t-focus-ring-offset);
1544
- background-color:transparent;
1545
- border:0;
1546
- border-radius:var(--t-border-radius-round);
1700
+ .tds-page-header--profile > .tds-page-header__title-bar{
1701
+ align-items:center;
1547
1702
  }
1548
1703
 
1549
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1550
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1551
- }
1704
+ .tds-page-header__primary{
1705
+ width:100%;
1706
+ }
1552
1707
 
1553
- .tds-toggle-switch label{
1554
- display:inline-flex;
1555
- grid-area:1 / 2;
1556
- padding-inline-start:var(--t-spacing-1);
1557
- margin-top:-.09375em;
1558
- font-size:var(--tds-toggle-switch-font-size);
1708
+ .tds-page-header__primary h1{
1709
+ margin:0;
1710
+ font-size:var(--tds-page-header-headline-font-size);
1559
1711
  font-weight:var(--t-font-weight-normal);
1560
- line-height:var(--tds-toggle-switch-line-height);
1561
- color:var(--tds-toggle-switch-label-color);
1562
- cursor:var(--tds-toggle-switch-cursor);
1712
+ line-height:32px;
1713
+ color:var(--tds-page-header-headline-color);
1714
+ overflow-wrap:break-word;
1563
1715
  }
1564
1716
 
1565
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1566
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1717
+ @media (min-width: 960px){
1718
+ .tds-page-header__primary{
1719
+ flex:1 1 max-content;
1720
+ width:auto;
1721
+ min-width:0;
1722
+ max-width:100%;
1567
1723
  }
1568
1724
 
1569
- .tds-toggle-switch:has(input:checked){
1570
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1571
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1725
+ .tds-page-header__title-bar,
1726
+ .tds-page-header--profile .tds-page-header__title-bar{
1727
+ flex-flow:row nowrap;
1728
+ row-gap:12px;
1729
+ align-items:flex-start;
1572
1730
  }
1573
-
1574
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1575
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1731
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1732
+ width:auto;
1576
1733
  }
1577
1734
 
1578
- .tds-toggle-switch:has(input:disabled){
1579
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1580
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1581
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1582
- --tds-toggle-switch-cursor:not-allowed;
1583
- }
1735
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1736
+ justify-content:flex-end;
1737
+ }
1738
+ }
1584
1739
 
1585
- .tds-toggle-switch-track{
1586
- position:relative;
1587
- flex-shrink:0;
1588
- width:var(--tds-toggle-switch-track-width);
1589
- height:var(--tds-toggle-switch-track-height);
1590
- background-color:var(--tds-toggle-switch-track-background-color);
1591
- border-radius:var(--t-border-radius-round);
1592
- transition:var(--tds-toggle-switch-track-transition);
1740
+ .tds-page-header-phone,
1741
+ .tds-page-header-email{
1742
+ color:var(--tds-page-header-color);
1743
+ white-space:nowrap;
1744
+ }
1745
+ .tds-page-header-email{
1746
+ max-width:100%;
1747
+ overflow:hidden;
1748
+ text-overflow:ellipsis;
1593
1749
  }
1594
1750
 
1595
- .tds-toggle-switch-track::before{
1596
- position:absolute;
1597
- top:var(--t-spacing-fourth);
1598
- left:var(--t-spacing-fourth);
1599
- width:var(--tds-toggle-switch-thumb-size);
1600
- height:var(--tds-toggle-switch-thumb-size);
1601
- content:"";
1602
- background-color:#fff;
1603
- border-radius:var(--t-border-radius-round);
1604
- transform:var(--tds-toggle-switch-thumb-transform);
1605
- transition:var(--tds-toggle-switch-thumb-transition);
1751
+ @keyframes indicator-pulse{
1752
+ 0%{
1753
+ opacity:.3;
1754
+ transform:scale(.9);
1606
1755
  }
1607
1756
 
1608
- @media (prefers-reduced-motion: reduce){
1757
+ 100%{
1758
+ opacity:0;
1759
+ transform:scale(1.75);
1760
+ }
1761
+ }
1609
1762
 
1610
- .tds-toggle-switch-track{
1611
- --tds-toggle-switch-track-transition:none;
1612
- --tds-toggle-switch-thumb-transition:none;
1763
+ .tds-popover{
1764
+ max-inline-size:24rem;
1765
+ overflow:auto;
1766
+ overscroll-behavior:none;
1767
+ outline:0;
1768
+ scrollbar-color:#0004 var(--t-surface-color-card);
1769
+ scrollbar-width:thin;
1770
+ background:var(--t-surface-color-card);
1771
+ background-clip:padding-box;
1772
+ border:1px solid var(--t-border-color);
1773
+ border-radius:var(--t-border-radius);
1774
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1613
1775
  }
1776
+
1777
+ @media (prefers-reduced-motion: no-preference){
1778
+ .tds-popover[data-entering]{
1779
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1780
+ }
1781
+
1782
+ .tds-popover[data-exiting]{
1783
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1784
+ }
1785
+
1786
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1787
+ will-change:opacity, transform;
1788
+ }
1789
+
1790
+ @keyframes tds-popover{
1791
+ from{
1792
+ opacity:0;
1793
+ transform:translateY(-8px);
1794
+ }
1614
1795
  }
1796
+ }
1615
1797
 
1616
- .tds-toggle-switch-description{
1798
+ .tds-popover-content{
1617
1799
  display:flex;
1618
- grid-area:2 / 2;
1619
- align-items:flex-start;
1620
- padding-inline-start:var(--t-spacing-1);
1621
- margin:0;
1622
- font-size:var(--tds-toggle-switch-description-font-size);
1623
- line-height:var(--tds-toggle-switch-description-line-height);
1624
- color:var(--tds-toggle-switch-description-color);
1625
- cursor:text;
1800
+ flex-direction:column;
1801
+ padding:var(--t-spacing-1);
1802
+ outline:0;
1626
1803
  }
1627
1804
 
1628
- .tds-toggle-switch--sm{
1629
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1630
- --tds-toggle-switch-line-height:1.35;
1631
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1632
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1633
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1634
- --tds-toggle-switch-description-line-height:1.3;
1635
- }
1805
+ .tds-modal-overlay{
1806
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1636
1807
 
1637
- .tds-toggle-switch--hide-label{
1638
- --tds-toggle-switch-display:inline-flex;
1808
+ position:fixed;
1809
+ inset:0;
1810
+ z-index:1000;
1811
+ display:grid;
1812
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1813
+ justify-items:center;
1814
+ overflow-y:auto;
1815
+ background:hsl(0 0% 0% / 40%);
1639
1816
  }
1640
1817
 
1641
- .tds-radio-group{
1642
- --tds-radio-group-font-size:var(--t-font-size-md);
1643
- --tds-radio-group-line-height:1.4;
1644
- --tds-radio-group-gap:var(--t-spacing-1);
1818
+ .tds-modal-overlay[data-entering]{
1819
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1820
+ }
1645
1821
 
1646
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1647
- --tds-radio-group-description-line-height:1.35;
1648
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1649
- --tds-radio-group-description-invalid-icon-display:none;
1822
+ .tds-modal-overlay[data-exiting]{
1823
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1824
+ }
1825
+
1826
+ @keyframes tds-modal-overlay-fade{
1827
+ from{
1828
+ opacity:0;
1829
+ }
1830
+ }
1831
+
1832
+ .tds-modal-frame{
1833
+ --tds-modal-width:600px;
1834
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1650
1835
  display:flex;
1651
- flex-direction:column;
1652
- gap:0;
1653
- padding:0;
1654
- margin:0;
1655
1836
 
1656
- font-size:var(--tds-radio-group-font-size);
1657
- line-height:var(--tds-radio-group-line-height);
1658
- border:0;
1837
+ grid-row:2;
1838
+ justify-content:center;
1839
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1659
1840
  }
1660
1841
 
1661
- .tds-radio-group legend{
1662
- float:left;
1663
- padding:0;
1664
- margin:0;
1842
+ .tds-modal-frame[data-entering]{
1843
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1665
1844
  }
1666
1845
 
1667
- .tds-radio-group[aria-invalid="true"]{
1668
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1669
- --tds-radio-group-description-invalid-icon-display:inline-block;
1846
+ .tds-modal-frame[data-exiting]{
1847
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1670
1848
  }
1671
1849
 
1672
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1673
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1674
- }
1850
+ .tds-modal-frame--sm{
1851
+ --tds-modal-width:400px;
1852
+ }
1675
1853
 
1676
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1677
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1678
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1679
- }
1854
+ .tds-modal-frame--lg{
1855
+ --tds-modal-width:800px;
1856
+ }
1680
1857
 
1681
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1682
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1683
- }
1858
+ .tds-modal-frame--xl{
1859
+ --tds-modal-width:1000px;
1860
+ }
1684
1861
 
1685
- .tds-radio-group:has(input:required) legend::after{
1686
- margin-left:.25ch;
1687
- color:var(--t-text-color-status-error);
1688
- content:"*";
1689
- }
1862
+ @keyframes tds-modal-zoom{
1863
+ from{
1864
+ opacity:0;
1865
+ scale:.96;
1866
+ }
1867
+ }
1690
1868
 
1691
- .tds-radio-group-fields{
1692
- display:flex;
1693
- flex-direction:column;
1694
- gap:var(--tds-radio-group-gap);
1695
- align-items:flex-start;
1696
- margin-top:var(--t-spacing-1);
1869
+ @media (prefers-reduced-motion: reduce){
1870
+ .tds-modal-overlay[data-entering],
1871
+ .tds-modal-overlay[data-exiting],
1872
+ .tds-modal-frame[data-entering],
1873
+ .tds-modal-frame[data-exiting]{
1874
+ animation:none;
1875
+ }
1697
1876
  }
1698
1877
 
1699
- .tds-radio-group-description{
1878
+ .tds-modal{
1700
1879
  display:flex;
1701
- gap:var(--t-spacing-half);
1702
- align-items:flex-start;
1703
- margin:var(--t-spacing-fourth) 0 0;
1704
- font-size:var(--tds-radio-group-description-font-size);
1705
- line-height:var(--tds-radio-group-description-line-height);
1706
- color:var(--tds-radio-group-description-color);
1707
- cursor:text;
1880
+ flex-direction:column;
1881
+ width:100%;
1882
+ padding-block-start:var(--t-spacing-3);
1883
+ padding-inline:0;
1884
+ background:var(--t-surface-color-card);
1885
+
1886
+ border:0;
1887
+ border-radius:var(--t-border-radius-lg);
1888
+ box-shadow:0 4px 18px 0 #0003;
1708
1889
  }
1709
1890
 
1710
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1711
- display:var(--tds-radio-group-description-invalid-icon-display);
1712
- flex-shrink:0;
1713
- margin-top:calc(.5lh - .5em);
1714
- line-height:var(--tds-radio-group-description-line-height);
1891
+ .tds-modal:focus{
1892
+ outline:none;
1715
1893
  }
1716
1894
 
1717
- .tds-radio-group--sm{
1718
- --tds-radio-group-line-height:1.35;
1719
- --tds-radio-group-font-size:var(--t-font-size-sm);
1720
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1721
- --tds-radio-group-description-line-height:1.3;
1895
+ .tds-modal-header{
1896
+ display:grid;
1897
+ grid-template-columns:1fr auto;
1898
+ -moz-column-gap:var(--t-spacing-2);
1899
+ column-gap:var(--t-spacing-2);
1900
+ padding-block:0;
1901
+ padding-inline:var(--t-spacing-4);
1722
1902
  }
1723
1903
 
1724
- @layer t-critical{
1725
- tds-page-header:not(.hydrated){
1726
- display:none;
1727
- }
1904
+ .tds-modal-title{
1905
+ grid-row:1;
1906
+ grid-column:1;
1907
+ margin:0;
1908
+ font-size:var(--t-font-size-2xl);
1909
+ font-weight:var(--t-font-weight-medium);
1910
+ line-height:140%;
1911
+ color:var(--t-text-color-headline);
1728
1912
  }
1729
1913
 
1730
- @layer t-component{
1731
- .tds-page-header{
1732
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1733
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1734
- --tds-page-header-color:var(--t-text-color);
1735
- --tds-page-header-bottom-border-color:transparent;
1736
- --tds-page-header-headline-color:var(--t-text-color-headline);
1737
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1738
- --tds-page-header-padding-x:var(--t-spacing-2);
1739
- --tds-page-header-padding-y:var(--t-spacing-2);
1740
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1741
- --tds-page-header-nav-gap:var(--t-spacing-1);
1742
- --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%);
1743
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1744
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1745
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1746
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1747
- --tds-page-header-nav-item-border-width:1px;
1748
-
1749
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1750
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1914
+ .tds-modal-subtitle{
1915
+ grid-row:2;
1916
+ grid-column:1;
1917
+ margin:0;
1918
+ font-size:var(--t-font-size-md);
1919
+ font-weight:var(--t-font-weight-medium);
1920
+ line-height:140%;
1921
+ color:var(--t-text-color-secondary);
1922
+ }
1751
1923
 
1752
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1753
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1754
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1924
+ .tds-modal-close{
1925
+ grid-row:1;
1926
+ grid-column:2;
1927
+ align-self:center;
1928
+ color:var(--t-icon-color-dim);
1929
+ }
1755
1930
 
1756
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1757
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1931
+ .tds-modal-body{
1932
+ padding-block:var(--t-spacing-3);
1933
+ padding-inline:var(--t-spacing-4);
1934
+ }
1758
1935
 
1759
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1760
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1761
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1936
+ .tds-modal-body--full-width{
1937
+ padding-inline:0;
1938
+ }
1762
1939
 
1763
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1764
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1765
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1766
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1767
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1768
- }
1940
+ .tds-modal-footer{
1941
+ display:flex;
1942
+ gap:var(--t-spacing-2);
1943
+ align-items:center;
1944
+ justify-content:flex-end;
1945
+ padding-block:var(--t-spacing-3);
1946
+ padding-inline:var(--t-spacing-4);
1947
+ border-top:1px solid var(--t-border-color);
1948
+ }
1769
1949
 
1770
- .tds-page-header--profile{
1771
- --tds-page-header-padding-y:20px;
1772
- }
1950
+ .tds-modal-footer > [slot="start"]{
1951
+ margin-inline-end:auto;
1952
+ }
1773
1953
 
1774
- @supports (color: light-dark(#fff, #000)){
1775
- .tds-page-header{
1776
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1777
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1778
- }
1954
+ @media (min-width: 720px){
1955
+ .tds-modal-overlay{
1956
+ --tds-modal-min-margin-block:0;
1779
1957
  }
1780
1958
 
1781
- @media (min-width: 600px){
1782
- .tds-page-header{
1783
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1784
- --tds-page-header-color:var(--t-text-color-secondary);
1785
- --tds-page-header-bottom-border-color:var(--t-border-color);
1786
- --tds-page-header-padding-x:var(--t-spacing-3);
1787
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1788
- --tds-page-header-nav-gap:var(--t-spacing-half);
1789
- --tds-page-header-nav-background:transparent;
1790
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1791
- --tds-page-header-nav-item-border-width:1px;
1792
- --tds-page-header-nav-item-color:var(--t-text-color);
1793
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1794
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1795
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1796
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1797
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1798
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1799
- }
1959
+ .tds-modal-footer{
1960
+ position:sticky;
1961
+ bottom:0;
1962
+ background:var(--t-surface-color-card);
1963
+ border-end-start-radius:var(--t-border-radius-lg);
1964
+ border-end-end-radius:var(--t-border-radius-lg);
1800
1965
  }
1801
1966
  }
1802
1967
 
1803
- .tds-page-header{
1804
- display:flex;
1805
- flex-direction:column;
1806
- padding-top:var(--tds-page-header-padding-y);
1807
- color:var(--tds-page-header-color);
1808
- background:var(--tds-page-header-background-color);
1809
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1968
+ .tds-toggle-switch{
1969
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1970
+ --tds-toggle-switch-cursor:pointer;
1971
+ --tds-toggle-switch-display:inline-grid;
1972
+ --tds-toggle-switch-line-height:1.4;
1973
+
1974
+ --tds-toggle-switch-label-color:var(--t-form-color);
1975
+
1976
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1977
+ --tds-toggle-switch-track-outline:none;
1978
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1979
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1980
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1981
+
1982
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1983
+ --tds-toggle-switch-thumb-transform:translateX(0);
1984
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1985
+
1986
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1987
+ --tds-toggle-switch-description-line-height:1.35;
1988
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1989
+ position:relative;
1990
+
1991
+ display:var(--tds-toggle-switch-display);
1992
+ grid-template-columns:auto;
1993
+ grid-auto-columns:1fr;
1994
+ gap:var(--t-spacing-fourth) 0;
1995
+ -webkit-user-select:none;
1996
+ -moz-user-select:none;
1997
+ user-select:none;
1810
1998
  }
1811
1999
 
1812
- .tds-page-header:not(.has-nav){
1813
- padding-bottom:var(--tds-page-header-padding-y);
2000
+ .tds-toggle-switch input[type="checkbox"]{
2001
+ position:absolute;
2002
+ width:var(--tds-toggle-switch-track-width);
2003
+ height:var(--tds-toggle-switch-track-height);
2004
+ margin:0;
2005
+ -webkit-appearance:none;
2006
+ -moz-appearance:none;
2007
+ appearance:none;
2008
+ cursor:var(--tds-toggle-switch-cursor);
2009
+ outline:var(--tds-toggle-switch-track-outline);
2010
+ outline-offset:var(--t-focus-ring-offset);
2011
+ background-color:transparent;
2012
+ border:0;
2013
+ border-radius:var(--t-border-radius-round);
1814
2014
  }
1815
2015
 
1816
- .tds-page-header.inactive{
1817
- background:var(--tds-page-header-background-color-inactive);
1818
- }
2016
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2017
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2018
+ }
1819
2019
 
1820
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1821
- width:100%;
2020
+ .tds-toggle-switch label{
2021
+ display:inline-flex;
2022
+ grid-area:1 / 2;
2023
+ padding-inline-start:var(--t-spacing-1);
2024
+ margin-top:-.09375em;
2025
+ font-size:var(--tds-toggle-switch-font-size);
2026
+ font-weight:var(--t-font-weight-normal);
2027
+ line-height:var(--tds-toggle-switch-line-height);
2028
+ color:var(--tds-toggle-switch-label-color);
2029
+ cursor:var(--tds-toggle-switch-cursor);
1822
2030
  }
1823
2031
 
1824
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1825
- display:flex;
1826
- flex-flow:row wrap;
1827
- gap:var(--t-spacing-half) var(--t-spacing-1);
1828
- align-items:flex-start;
1829
- justify-content:flex-start;
1830
- min-width:0;
2032
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2033
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1831
2034
  }
1832
2035
 
1833
- :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{
1834
- display:flex;
1835
- gap:var(--tds-page-header-nav-gap);
1836
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1837
- margin:0 0 -1px;
1838
- overflow:auto;
1839
- list-style:none;
1840
- background:var(--tds-page-header-nav-background);
1841
- }
2036
+ .tds-toggle-switch:has(input:checked){
2037
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2038
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2039
+ }
1842
2040
 
1843
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1844
- position:relative;
1845
- display:inline-flex;
1846
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1847
- font-size:var(--t-font-size-sm);
1848
- line-height:22px;
1849
- color:var(--tds-page-header-nav-item-color);
1850
- white-space:nowrap;
1851
- text-decoration:none;
1852
- -webkit-appearance:none;
1853
- -moz-appearance:none;
1854
- appearance:none;
1855
- cursor:pointer;
1856
- outline-offset:-2px;
1857
- background-color:var(--tds-page-header-nav-item-background-color);
1858
- background-clip:padding-box;
1859
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1860
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1861
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2041
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2042
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1862
2043
  }
1863
2044
 
1864
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1865
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1866
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1867
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1868
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1869
- }
2045
+ .tds-toggle-switch:has(input:disabled){
2046
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2047
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2048
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2049
+ --tds-toggle-switch-cursor:not-allowed;
2050
+ }
1870
2051
 
1871
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1872
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1873
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1874
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1875
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1876
- }
2052
+ .tds-toggle-switch-track{
2053
+ position:relative;
2054
+ flex-shrink:0;
2055
+ width:var(--tds-toggle-switch-track-width);
2056
+ height:var(--tds-toggle-switch-track-height);
2057
+ background-color:var(--tds-toggle-switch-track-background-color);
2058
+ border-radius:var(--t-border-radius-round);
2059
+ transition:var(--tds-toggle-switch-track-transition);
2060
+ }
1877
2061
 
1878
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1879
- background-color:var(--tds-page-header-nav-item-background-color-active);
1880
- border-color:var(--tds-page-header-nav-item-border-color-active);
1881
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1882
- }
2062
+ .tds-toggle-switch-track::before{
2063
+ position:absolute;
2064
+ top:var(--t-spacing-fourth);
2065
+ left:var(--t-spacing-fourth);
2066
+ width:var(--tds-toggle-switch-thumb-size);
2067
+ height:var(--tds-toggle-switch-thumb-size);
2068
+ content:"";
2069
+ background-color:#fff;
2070
+ border-radius:var(--t-border-radius-round);
2071
+ transform:var(--tds-toggle-switch-thumb-transform);
2072
+ transition:var(--tds-toggle-switch-thumb-transition);
2073
+ }
1883
2074
 
1884
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1885
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1886
- color:var(--tds-page-header-nav-item-color-disabled);
1887
- cursor:not-allowed;
1888
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1889
- opacity:1;
1890
- }
2075
+ @media (prefers-reduced-motion: reduce){
1891
2076
 
1892
- @media (min-width: 600px){
1893
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1894
- position:absolute;
1895
- inset:auto -1px -1px;
1896
- height:1px;
1897
- pointer-events:none;
1898
- content:"";
1899
- background-color:var(--tds-page-header-bottom-border-color);
1900
- }
1901
- }
2077
+ .tds-toggle-switch-track{
2078
+ --tds-toggle-switch-track-transition:none;
2079
+ --tds-toggle-switch-thumb-transition:none;
2080
+ }
2081
+ }
1902
2082
 
1903
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1904
- position:relative;
1905
- }
2083
+ .tds-toggle-switch-description{
2084
+ display:flex;
2085
+ grid-area:2 / 2;
2086
+ align-items:flex-start;
2087
+ padding-inline-start:var(--t-spacing-1);
2088
+ margin:0;
2089
+ font-size:var(--tds-toggle-switch-description-font-size);
2090
+ line-height:var(--tds-toggle-switch-description-line-height);
2091
+ color:var(--tds-toggle-switch-description-color);
2092
+ cursor:text;
2093
+ }
1906
2094
 
1907
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1908
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1909
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1910
- }
2095
+ .tds-toggle-switch--sm{
2096
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2097
+ --tds-toggle-switch-line-height:1.35;
2098
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2099
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2100
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2101
+ --tds-toggle-switch-description-line-height:1.3;
2102
+ }
1911
2103
 
1912
- :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{
1913
- position:absolute;
1914
- top:-5px;
1915
- right:-2px;
1916
- width:10px;
1917
- height:10px;
1918
- content:"";
1919
- background:var(--tds-page-header-nav-item-indicator-color);
1920
- border-radius:50%;
1921
- }
2104
+ .tds-toggle-switch--hide-label{
2105
+ --tds-toggle-switch-display:inline-flex;
2106
+ }
1922
2107
 
1923
- @media (prefers-reduced-motion: no-preference){
1924
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1925
- animation:indicator-pulse 1.25s ease infinite;
1926
- }
1927
- }
2108
+ .tds-radio-group{
2109
+ --tds-radio-group-font-size:var(--t-font-size-md);
2110
+ --tds-radio-group-line-height:1.4;
2111
+ --tds-radio-group-gap:var(--t-spacing-1);
1928
2112
 
1929
- .tds-page-header__title-bar{
2113
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2114
+ --tds-radio-group-description-line-height:1.35;
2115
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2116
+ --tds-radio-group-description-invalid-icon-display:none;
1930
2117
  display:flex;
1931
2118
  flex-direction:column;
1932
- gap:var(--t-spacing-2) var(--t-spacing-1);
1933
- align-items:flex-start;
1934
- justify-content:space-between;
1935
- padding:0 var(--tds-page-header-padding-x);
1936
- }
1937
-
1938
- .tds-page-header--profile > .tds-page-header__title-bar{
1939
- align-items:center;
1940
- }
2119
+ gap:0;
2120
+ padding:0;
2121
+ margin:0;
1941
2122
 
1942
- .tds-page-header__primary{
1943
- width:100%;
2123
+ font-size:var(--tds-radio-group-font-size);
2124
+ line-height:var(--tds-radio-group-line-height);
2125
+ border:0;
1944
2126
  }
1945
2127
 
1946
- .tds-page-header__primary h1{
2128
+ .tds-radio-group legend{
2129
+ float:left;
2130
+ padding:0;
1947
2131
  margin:0;
1948
- font-size:var(--tds-page-header-headline-font-size);
1949
- font-weight:var(--t-font-weight-normal);
1950
- line-height:32px;
1951
- color:var(--tds-page-header-headline-color);
1952
- overflow-wrap:break-word;
1953
2132
  }
1954
2133
 
1955
- @media (min-width: 960px){
1956
- .tds-page-header__primary{
1957
- flex:1 1 max-content;
1958
- width:auto;
1959
- min-width:0;
1960
- max-width:100%;
2134
+ .tds-radio-group[aria-invalid="true"]{
2135
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2136
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1961
2137
  }
1962
2138
 
1963
- .tds-page-header__title-bar,
1964
- .tds-page-header--profile .tds-page-header__title-bar{
1965
- flex-flow:row nowrap;
1966
- row-gap:12px;
1967
- align-items:flex-start;
1968
- }
1969
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1970
- width:auto;
2139
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2140
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1971
2141
  }
1972
2142
 
1973
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1974
- justify-content:flex-end;
2143
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2144
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2145
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2146
+ }
2147
+
2148
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2149
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2150
+ }
2151
+
2152
+ .tds-radio-group:has(input:required) legend::after{
2153
+ margin-left:.25ch;
2154
+ color:var(--t-text-color-status-error);
2155
+ content:"*";
1975
2156
  }
1976
- }
1977
2157
 
1978
- .tds-page-header-phone,
1979
- .tds-page-header-email{
1980
- color:var(--tds-page-header-color);
1981
- white-space:nowrap;
2158
+ .tds-radio-group-fields{
2159
+ display:flex;
2160
+ flex-direction:column;
2161
+ gap:var(--tds-radio-group-gap);
2162
+ align-items:flex-start;
2163
+ margin-top:var(--t-spacing-1);
1982
2164
  }
1983
- .tds-page-header-email{
1984
- max-width:100%;
1985
- overflow:hidden;
1986
- text-overflow:ellipsis;
2165
+
2166
+ .tds-radio-group-description{
2167
+ display:flex;
2168
+ gap:var(--t-spacing-half);
2169
+ align-items:flex-start;
2170
+ margin:var(--t-spacing-fourth) 0 0;
2171
+ font-size:var(--tds-radio-group-description-font-size);
2172
+ line-height:var(--tds-radio-group-description-line-height);
2173
+ color:var(--tds-radio-group-description-color);
2174
+ cursor:text;
1987
2175
  }
1988
2176
 
1989
- @keyframes indicator-pulse{
1990
- 0%{
1991
- opacity:.3;
1992
- transform:scale(.9);
2177
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2178
+ display:var(--tds-radio-group-description-invalid-icon-display);
2179
+ flex-shrink:0;
2180
+ margin-top:calc(.5lh - .5em);
2181
+ line-height:var(--tds-radio-group-description-line-height);
1993
2182
  }
1994
2183
 
1995
- 100%{
1996
- opacity:0;
1997
- transform:scale(1.75);
1998
- }
2184
+ .tds-radio-group--sm{
2185
+ --tds-radio-group-line-height:1.35;
2186
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2187
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2188
+ --tds-radio-group-description-line-height:1.3;
1999
2189
  }
2000
2190
 
2001
2191
 
2002
- @media (prefers-reduced-motion: no-preference){
2192
+ :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{
2193
+ -webkit-appearance:none;
2194
+ appearance:none;
2195
+ }
2003
2196
 
2004
- :root{
2005
- interpolate-size:allow-keywords;
2006
- }
2007
- }
2197
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2198
+ inline-size:1em;
2199
+ block-size:2em;
2200
+ }
2008
2201
 
2009
- @layer tds-component{
2010
- tds-sidenav,
2011
- .tds-sidenav{
2012
- --tds-sidenav-indent:12px;
2013
- --tds-sidenav-item-depth:0;
2202
+ [type="file"]:is(.tds-input input){
2203
+ padding-block:var(--t-spacing-half);
2204
+ padding-inline-start:var(--t-spacing-half);
2205
+ }
2014
2206
 
2015
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2207
+ [type="file"]:is(.tds-input input):not(:disabled){
2208
+ color:var(--t-text-color-secondary);
2209
+ }
2016
2210
 
2017
- --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;
2018
- --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;
2019
- --tds-sidenav-collapse-closed-opacity:0;
2020
- --tds-sidenav-collapse-open-opacity:1;
2021
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
2022
- --tds-sidenav-collapse-open-transform:translateY(0);
2211
+ [type="file"]:is(.tds-input input)::file-selector-button{
2212
+ --_file-btn-padding-block:3px;
2023
2213
 
2024
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
2025
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2026
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2027
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2214
+ padding-block:var(--_file-btn-padding-block);
2215
+ padding-inline:12px;
2216
+ margin-inline-end:12px;
2217
+ font:inherit;
2218
+ 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));
2219
+ color:var(--t-text-color-status-neutral);
2220
+ cursor:pointer;
2221
+ background-color:var(--t-fill-color-button-neutral-solid);
2222
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
2223
+ border-radius:var(--t-border-radius-md);
2224
+ transition-timing-function:var(--t-ease-in-out);
2225
+ transition-duration:var(--t-duration-200);
2226
+ transition-property:color, background-color, border-color;
2227
+ }
2028
2228
 
2029
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2030
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2031
- --tds-sidenav-item-nested-background-selected:transparent;
2229
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
2230
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
2231
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
2232
+ }
2032
2233
 
2033
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2034
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2035
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2234
+ [type="file"]:is(.tds-input input):active::file-selector-button{
2235
+ background-color:var(--t-fill-color-button-neutral-solid-active);
2236
+ border-color:var(--t-fill-color-button-neutral-solid-active);
2237
+ }
2036
2238
 
2037
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2038
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2239
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
2240
+ color:var(--t-text-color-disabled);
2241
+ pointer-events:none;
2242
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
2243
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
2244
+ }
2245
+ @supports (field-sizing: content){
2246
+ .tds-input--auto-width{
2247
+ inline-size:-moz-fit-content;
2248
+ inline-size:fit-content;
2249
+ min-inline-size:min(100%, 122px);
2039
2250
  }
2040
2251
 
2041
- @media (prefers-reduced-motion: reduce){
2042
- tds-sidenav,
2043
- .tds-sidenav{
2044
- --tds-sidenav-collapse-transition-enter:none;
2045
- --tds-sidenav-collapse-transition-exit:none;
2046
- --tds-sidenav-collapse-closed-transform:none;
2047
- --tds-sidenav-collapse-open-transform:none;
2048
- }
2049
- }
2050
-
2051
- .tds-sidenav--theme-gray{
2052
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2053
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2054
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2055
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2056
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2252
+ .tds-input--auto-width input{
2253
+ field-sizing:content;
2254
+ inline-size:auto;
2057
2255
  }
2058
2256
  }
2059
2257
 
2060
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2061
- display:flex;
2062
- }
2063
-
2064
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2065
- flex-direction:column;
2066
- gap:var(--t-spacing-half);
2067
- width:100%;
2068
- }
2069
-
2070
- .tds-sidenav-section-list{
2071
- width:100%;
2072
- padding:0;
2073
- margin:0;
2074
- list-style:none;
2258
+ .tds-input:has(textarea){
2259
+ --tds-input-padding-block:6px;
2260
+ --tds-input-resizer-size:var(--t-element-size-sm);
2261
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
2075
2262
  }
2076
2263
 
2077
- .tds-sidenav-section-header{
2078
- display:flex;
2079
- align-items:baseline;
2080
- justify-content:space-between;
2081
- padding-top:var(--t-spacing-2);
2082
- }
2264
+ @supports (x: attr(x type(*))){
2083
2265
 
2084
- .tds-sidenav-section-header h2{
2085
- margin:0;
2086
- font-size:var(--t-font-size-sm);
2087
- font-weight:var(--t-font-weight-semibold);
2088
- line-height:1.35;
2089
- color:var(--t-text-color-secondary);
2090
- text-transform:uppercase;
2266
+ .tds-input textarea{
2267
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2268
+ }
2091
2269
  }
2092
2270
 
2093
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2094
- padding-top:0;
2095
- }
2271
+ .tds-input.tds-textarea--resize-vertical textarea{
2272
+ resize:vertical;
2273
+ }
2096
2274
 
2097
- .tds-sidenav-section-header [slot="label-actions"]{
2098
- display:flex;
2099
- gap:var(--t-spacing-half);
2100
- align-items:center;
2101
- }
2275
+ .tds-input.tds-textarea--resize-none textarea{
2276
+ resize:none;
2277
+ }
2102
2278
 
2103
- .tds-sidenav-section [slot="section-actions"]{
2104
- display:flex;
2105
- gap:12px;
2106
- align-items:center;
2107
- min-height:42px;
2108
- padding:var(--t-spacing-1) 0;
2109
- }
2279
+ .tds-input.tds-textarea--resize-auto textarea{
2280
+ resize:vertical;
2281
+ }
2110
2282
 
2111
- .tds-sidenav-section-list,
2112
- .tds-sidenav-item{
2113
- width:100%;
2114
- padding:0;
2115
- margin:0;
2283
+ @supports (field-sizing: content){
2284
+ .tds-input.tds-textarea--resize-auto textarea{
2285
+ field-sizing:content;
2286
+ resize:none;
2287
+ }
2288
+ }
2289
+
2290
+ .tds-input textarea{
2291
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2292
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2293
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2294
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2295
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2296
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2297
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2298
+ --tds-input-scrollbar-thumb-border-radius:999px;
2299
+ --tds-input-scrollbar-thumb-border-width:3px;
2300
+ --tds-input-scrollbar-track-margin-block:.125rem;
2301
+ scrollbar-color:initial;
2302
+ transition-timing-function:var(--t-ease-in-out);
2303
+ transition-duration:var(--t-duration-200);
2304
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2116
2305
  }
2117
2306
 
2118
- .tds-sidenav-item :is(a,button){
2119
- position:relative;
2120
- display:flex;
2121
- gap:12px;
2122
- align-items:center;
2123
- width:100%;
2124
- padding:12px;
2125
- overflow:hidden;
2126
- font-size:var(--t-font-size-sm);
2127
- line-height:18px;
2128
- color:var(--t-text-color-headline);
2129
- white-space:nowrap;
2130
- text-decoration:none;
2131
- -webkit-appearance:none;
2132
- -moz-appearance:none;
2133
- appearance:none;
2134
- cursor:pointer;
2135
- background-color:var(--tds-sidenav-item-background, transparent);
2136
- border:0;
2137
- border-radius:var(--t-border-radius);
2138
- transition:var(--tds-sidenav-item-transition);
2139
- }
2307
+ @media (pointer: fine){
2308
+ :is(.tds-input textarea)::-webkit-scrollbar{
2309
+ width:12px;
2310
+ height:12px;
2311
+ cursor:default;
2312
+ }
2140
2313
 
2141
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2142
- display:block;
2143
- flex:1;
2144
- overflow:hidden;
2145
- text-overflow:ellipsis;
2146
- text-align:left;
2147
- white-space:nowrap;
2314
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2315
+ cursor:default;
2316
+ background:var(--tds-input-scrollbar-thumb-color);
2317
+ background-clip:content-box;
2318
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2319
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2148
2320
  }
2149
2321
 
2150
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2151
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2152
- color:var(--t-text-color-headline);
2153
- text-decoration:none;
2322
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2323
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2154
2324
  }
2155
2325
 
2156
- :is(.tds-sidenav-item :is(a,button)):active{
2157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2326
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2327
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2158
2328
  }
2159
2329
 
2160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2161
- overflow:hidden;
2162
- color:var(--tds-sidenav-item-icon-color);
2330
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2331
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2163
2332
  }
2164
2333
 
2165
- :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{
2166
- display:block;
2167
- width:var(--tds-sidenav-item-icon-size);
2168
- height:var(--tds-sidenav-item-icon-size);
2169
- }
2334
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2335
+ background:var(--tds-input-scrollbar-surface-color);
2336
+ }
2170
2337
 
2171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2172
- --tds-sidenav-indent:19px;
2338
+ :is(.tds-input textarea)::-webkit-resizer{
2339
+ background:var(--tds-input-resizer-icon) no-repeat;
2340
+ background-position:right bottom;
2341
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2173
2342
  }
2174
2343
 
2175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2176
- visibility:visible;
2177
- block-size:auto;
2178
- opacity:1;
2344
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2345
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2346
+ cursor:default;
2179
2347
  }
2180
2348
 
2181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2349
+ @supports (-moz-appearance: none){
2350
+ :is(.tds-input textarea){
2351
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2352
+ scrollbar-width:thin;
2353
+ }
2184
2354
 
2185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2186
- font-weight:var(--t-font-weight-semibold);
2355
+ @media (hover){
2356
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2357
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2358
+ }
2359
+ }
2360
+ }
2187
2361
  }
2188
2362
 
2189
- .tds-sidenav-item:has(.tds-sidenav-section){
2190
- display:flex;
2191
- flex-direction:column;
2192
- gap:var(--t-spacing-half);
2363
+ .tds-input{
2364
+ --tds-input-border-color:var(--t-form-border-color);
2365
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
2366
+ --tds-input-background-color:var(--t-form-background-color);
2367
+ --tds-input-color:var(--t-form-color);
2368
+ --tds-input-font-size:var(--t-font-size-md);
2369
+ --tds-input-description-color:var(--t-text-color-secondary);
2370
+ --tds-input-description-invalid-icon-display:none;
2371
+ --tds-input-min-height:var(--t-container-size-md);
2372
+ --tds-input-padding-inline:var(--t-spacing-1);
2373
+
2374
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2375
+
2376
+ display:flex;
2377
+ flex-direction:column;
2378
+ gap:var(--t-spacing-half);
2379
+ }
2380
+
2381
+ .tds-input label{
2382
+ font-size:var(--t-font-size-md);
2383
+ font-weight:var(--t-font-weight-normal);
2384
+ color:var(--t-text-color);
2193
2385
  }
2194
2386
 
2195
- .tds-sidenav-item .tds-sidenav-section-list{
2196
- --tds-sidenav-item-depth:1;
2197
- gap:0;
2387
+ .tds-input :is(input,textarea){
2388
+ inline-size:100%;
2389
+ block-size:auto;
2390
+ min-block-size:var(--tds-input-min-height);
2391
+ padding-block:var(--tds-input-padding-block);
2392
+ padding-inline:var(--tds-input-padding-inline);
2393
+ font-family:inherit;
2394
+ font-size:var(--tds-input-font-size);
2395
+ color:var(--tds-input-color);
2396
+ -webkit-appearance:none;
2397
+ -moz-appearance:none;
2398
+ appearance:none;
2399
+ outline:var(--t-focus-ring-width) solid transparent;
2400
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2401
+ outline-offset:0;
2402
+ background-color:var(--tds-input-background-color);
2403
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2404
+ border-radius:var(--t-form-border-radius);
2405
+ transition-timing-function:var(--t-ease-in-out);
2406
+ transition-duration:var(--t-duration-200);
2407
+ transition-property:var(--tds-input-transition-property);
2198
2408
  }
2199
2409
 
2200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2201
- visibility:hidden;
2202
- block-size:0;
2203
- overflow-y:clip;
2204
- opacity:0;
2205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2410
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2411
+ border-color:var(--tds-input-border-color-hover);
2206
2412
  }
2207
2413
 
2208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2209
- --tds-sidenav-item-depth:2;
2210
- }
2211
-
2212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2213
- min-height:var(--t-element-size-2xl);
2214
- padding-block:9px;
2215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2216
- line-height:1;
2217
- background-color:transparent;
2218
- }
2219
-
2220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2221
- position:absolute;
2222
- top:0;
2223
- bottom:0;
2224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2225
- width:2px;
2226
- content:"";
2227
- background-color:var(--tds-sidenav-item-nested-border-color);
2228
- transition:var(--tds-sidenav-item-transition);
2229
- }
2230
-
2231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2232
- position:absolute;
2233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2234
- z-index:-1;
2235
- height:100%;
2236
- content:"";
2237
- background-color:var(--tds-sidenav-item-nested-background);
2238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2239
- transition:var(--tds-sidenav-item-transition);
2240
- }
2241
-
2242
- :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)){
2243
- display:block;
2244
- text-align:left;
2245
- white-space:normal;
2246
- }
2247
-
2248
- :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{
2249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2251
- }
2252
-
2253
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2254
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2255
- }
2256
-
2257
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2258
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2259
- font-weight:var(--t-font-weight-medium);
2260
- }
2261
-
2262
- .tds-sidenav-responsive-header{
2263
- display:flex;
2264
- gap:var(--t-spacing-2);
2265
- align-items:center;
2266
- width:100%;
2267
- }
2268
-
2269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2270
- order:0;
2271
- }
2272
-
2273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2274
- flex:1;
2275
- order:1;
2276
- margin:0;
2277
- font-size:var(--t-font-size-lg);
2278
- font-weight:var(--t-font-weight-medium);
2279
- color:var(--t-text-color-headline);
2280
- }
2281
-
2282
- @media (max-width: 719px){
2283
- .tds-sidenav-collapse{
2284
- z-index:10001;
2285
- display:none;
2286
- max-width:min(448px, calc(100vw - 48px));
2287
- padding:0;
2288
- margin:12px 0;
2289
- position-area:bottom span-right;
2290
- overflow:hidden;
2291
- outline:0;
2292
- background:var(--t-surface-color-card);
2293
- border:0;
2294
- border-radius:6px;
2295
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2296
- opacity:var(--tds-sidenav-collapse-open-opacity);
2297
- transform:var(--tds-sidenav-collapse-open-transform);
2298
- transition:var(--tds-sidenav-collapse-transition-enter);
2299
- will-change:transform;
2300
- }
2301
-
2302
- .tds-sidenav-scroll-container{
2303
- --webkit-overflow-scrolling:touch;
2304
- display:block;
2305
- width:100%;
2306
- height:-moz-fit-content;
2307
- height:fit-content;
2308
- padding:var(--t-spacing-2);
2309
- overflow-y:auto;
2310
- }
2311
-
2312
- .tds-sidenav-item :is(a, button) :is(.prefix){
2313
- display:none;
2314
- }
2315
- @supports selector(:popover-open){
2316
- .tds-sidenav-collapse:popover-open{
2317
- display:flex;
2318
- }
2319
-
2320
- .tds-sidenav-collapse:not(:popover-open){
2321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2322
- transition:var(--tds-sidenav-collapse-transition-exit);
2323
- }
2324
-
2325
- @starting-style{
2326
- .tds-sidenav-collapse:popover-open{
2327
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2328
- transform:var(--tds-sidenav-collapse-closed-transform);
2329
- }
2330
- }
2331
- }
2332
- @supports not selector(:popover-open){
2333
- .tds-sidenav-collapse.\:popover-open{
2334
- display:flex;
2335
- }
2336
-
2337
- .tds-sidenav-collapse:not(.\:popover-open){
2338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2339
- transition:var(--tds-sidenav-collapse-transition-exit);
2340
- }
2341
- }
2342
- }
2343
-
2344
- @media (min-width: 720px){
2345
- .tds-sidenav-responsive-header{
2346
- display:none;
2347
- }
2348
- }
2349
-
2350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2351
- display:none;
2352
- }
2353
-
2354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2355
- display:block;
2356
- }
2357
-
2358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2359
- display:flex;
2360
- flex-direction:column;
2361
- }
2362
-
2363
- .tds-input{
2364
- --tds-input-border-color:var(--t-form-border-color);
2365
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2366
- --tds-input-background-color:var(--t-form-background-color);
2367
- --tds-input-color:var(--t-form-color);
2368
- --tds-input-font-size:var(--t-font-size-md);
2369
- --tds-input-description-color:var(--t-text-color-secondary);
2370
- --tds-input-description-invalid-icon-display:none;
2371
- --tds-input-min-height:var(--t-container-size-md);
2372
- --tds-input-padding-inline:var(--t-spacing-1);
2373
-
2374
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2375
-
2376
- display:flex;
2377
- flex-direction:column;
2378
- gap:var(--t-spacing-half);
2379
- }
2380
-
2381
- .tds-input label{
2382
- font-size:var(--t-font-size-md);
2383
- font-weight:var(--t-font-weight-normal);
2384
- color:var(--t-text-color);
2385
- }
2386
-
2387
- .tds-input :is(input,textarea){
2388
- inline-size:100%;
2389
- block-size:auto;
2390
- min-block-size:var(--tds-input-min-height);
2391
- padding-block:var(--tds-input-padding-block);
2392
- padding-inline:var(--tds-input-padding-inline);
2393
- font-family:inherit;
2394
- font-size:var(--tds-input-font-size);
2395
- color:var(--tds-input-color);
2396
- -webkit-appearance:none;
2397
- -moz-appearance:none;
2398
- appearance:none;
2399
- outline:var(--t-focus-ring-width) solid transparent;
2400
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2401
- outline-offset:0;
2402
- background-color:var(--tds-input-background-color);
2403
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2404
- border-radius:var(--t-form-border-radius);
2405
- transition-timing-function:var(--t-ease-in-out);
2406
- transition-duration:var(--t-duration-200);
2407
- transition-property:var(--tds-input-transition-property);
2408
- }
2409
-
2410
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2411
- border-color:var(--tds-input-border-color-hover);
2412
- }
2413
-
2414
- :is(.tds-input :is(input,textarea)):focus{
2415
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2414
+ :is(.tds-input :is(input,textarea)):focus{
2415
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2416
2416
  }
2417
2417
 
2418
2418
  :is(.tds-input :is(input,textarea)):focus-visible{
@@ -4039,45 +4039,349 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4039
4039
  [data-flex-column-gap-xl="6"]{ -moz-column-gap:var(--t-spacing-6); column-gap:var(--t-spacing-6); }
4040
4040
  [data-flex-column-gap-xl="7"]{ -moz-column-gap:var(--t-spacing-7); column-gap:var(--t-spacing-7); }
4041
4041
 
4042
- [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4043
- [data-flex-basis-xl="0"]{ flex-basis:0; }
4044
- [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4042
+ [data-flex-basis-xl="auto"]{ flex-basis:auto; }
4043
+ [data-flex-basis-xl="0"]{ flex-basis:0; }
4044
+ [data-flex-basis-xl="100%"]{ flex-basis:100%; }
4045
+
4046
+ [data-padding-xl="0"]{ padding:0; }
4047
+ [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4048
+ [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4049
+ [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4050
+ [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4051
+ [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4052
+ [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4053
+ [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4054
+ [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4055
+ [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4056
+ [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4057
+
4058
+ [data-padding-block-xl="0"]{ padding-block:0; }
4059
+ [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4060
+ [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4061
+ [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4062
+ [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4063
+ [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4064
+ [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4065
+ [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4066
+ [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4067
+ [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4068
+ [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4069
+
4070
+ [data-padding-inline-xl="0"]{ padding-inline:0; }
4071
+ [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4072
+ [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4073
+ [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4074
+ [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4075
+ [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4076
+ [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4077
+ [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4078
+ [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4079
+ [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4080
+ [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4081
+ }
4082
+
4083
+ .tds-data-table-filters-shelf{
4084
+ height:auto;
4085
+ overflow:hidden;
4086
+ transition:height var(--t-duration-300) var(--t-ease-out);
4087
+ }
4088
+
4089
+ @media (prefers-reduced-motion: reduce){
4090
+
4091
+ .tds-data-table-filters-shelf{
4092
+ transition:none;
4093
+ }
4094
+ }
4095
+
4096
+ .tds-data-table-filters-shelf--collapsed{
4097
+ height:0;
4098
+ transition-timing-function:var(--t-ease-in);
4099
+ }
4100
+
4101
+ @supports (interpolate-size: allow-keywords){
4102
+ .tds-data-table-filters-shelf{
4103
+ interpolate-size:allow-keywords;
4104
+ }
4105
+ }
4106
+
4107
+ .tds-data-table-filters{
4108
+ padding-block:var(--tds-data-table-cell-padding-block);
4109
+ padding-inline:var(--tds-data-table-cell-padding-inline);
4110
+ border-top:1px solid var(--tds-data-table-border-color);
4111
+ }
4112
+
4113
+ .tds-data-table-filters-active{
4114
+ display:flex;
4115
+ -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4116
+ column-gap:var(--tds-data-table-cell-padding-inline);
4117
+ justify-content:space-between;
4118
+ }
4119
+
4120
+ .tds-data-table-filters-active-list{
4121
+ display:flex;
4122
+ flex-wrap:wrap;
4123
+ gap:var(--t-spacing-half);
4124
+ }
4125
+
4126
+ .tds-data-table-filters-active-actions{
4127
+ flex-shrink:0;
4128
+ }
4129
+
4130
+ :root{
4131
+
4132
+ --_data-table-filter-border-info:hsl(204 96% 89%);
4133
+ --_data-table-filter-border-error:hsl(8 60% 85%);
4134
+ }
4135
+
4136
+ :root[data-color-mode="dark"]{
4137
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4138
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4139
+ }
4140
+
4141
+ @media (prefers-color-scheme: dark){
4142
+ :root[data-color-mode="system"]{
4143
+ --_data-table-filter-border-info:var(--t-border-color-status-info);
4144
+ --_data-table-filter-border-error:var(--t-border-color-status-error);
4145
+ }
4146
+ }
4147
+
4148
+ .tds-btn-group--data-table-filters-chip button{
4149
+ --_chip-border-color:var(--_data-table-filter-border-info);
4150
+ --_chip-icon-color:var(--t-icon-color-status-info);
4151
+
4152
+ gap:0;
4153
+ color:var(--t-text-color-status-info);
4154
+ background-color:var(--t-fill-color-status-info-dim);
4155
+ border-color:var(--_chip-border-color);
4156
+ }
4157
+
4158
+ :is(.tds-btn-group--data-table-filters-chip button) svg{
4159
+ color:var(--_chip-icon-color);
4160
+ transform:scale(.75);
4161
+ }
4162
+
4163
+ :is(.tds-btn-group--data-table-filters-chip button) span{
4164
+ padding-inline:var(--tds-btn-padding-x);
4165
+ border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4166
+ transition-timing-function:var(--t-ease-in-out);
4167
+ transition-duration:var(--t-duration-200);
4168
+ transition-property:border-color;
4169
+ }
4170
+
4171
+ @media (prefers-reduced-motion: reduce){
4172
+
4173
+ :is(.tds-btn-group--data-table-filters-chip button) span{
4174
+ transition:none;
4175
+ }
4176
+ }
4177
+
4178
+ :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4179
+ padding-inline-start:0;
4180
+ }
4181
+
4182
+ :is(.tds-btn-group--data-table-filters-chip button) span:last-child{
4183
+ padding-inline-end:0;
4184
+ border-inline-end-color:transparent;
4185
+ }
4186
+
4187
+ :is(.tds-btn-group--data-table-filters-chip button):hover,:is(.tds-btn-group--data-table-filters-chip button):active,:is(.tds-btn-group--data-table-filters-chip button):focus{
4188
+ color:var(--t-text-color-interaction);
4189
+ background-color:var(--t-fill-color-status-info-ghost);
4190
+ border-color:var(--_chip-border-color);
4191
+ }
4192
+
4193
+ .tds-btn-group--data-table-filters-chip-inactive button{
4194
+ --_chip-border-color:var(--t-border-color-button-neutral);
4195
+ --_chip-icon-color:var(--t-icon-color-status-neutral);
4196
+
4197
+ color:var(--t-text-color);
4198
+ background-color:var(--t-fill-color-status-neutral-dim);
4199
+ }
4200
+
4201
+ :is(.tds-btn-group--data-table-filters-chip-inactive button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive button):active,:is(.tds-btn-group--data-table-filters-chip-inactive button):focus{
4202
+ color:var(--t-text-color);
4203
+ background-color:var(--t-fill-color-status-neutral-ghost);
4204
+ }
4205
+
4206
+ .tds-btn-group--data-table-filters-chip-invalid button{
4207
+ --_chip-border-color:var(--_data-table-filter-border-error);
4208
+ --_chip-icon-color:var(--t-icon-color-status-error);
4209
+
4210
+ color:var(--t-text-color-status-error);
4211
+ background-color:var(--t-fill-color-status-error-dim);
4212
+ }
4213
+
4214
+ :is(.tds-btn-group--data-table-filters-chip-invalid button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid button):active,:is(.tds-btn-group--data-table-filters-chip-invalid button):focus{
4215
+ color:var(--t-text-color-status-error);
4216
+ background-color:var(--t-fill-color-status-error-ghost);
4217
+ }
4218
+ .tds-popover--data-table-filters-popover .tds-popover-content{
4219
+ gap:var(--t-spacing-1);
4220
+ align-items:start;
4221
+ padding:var(--t-spacing-2);
4222
+ }
4223
+
4224
+ @media (prefers-reduced-motion: no-preference){
4225
+ .tds-popover--data-table-filters-popover.tds-popover:is([data-entering],[data-exiting]){
4226
+ animation-name:tds-data-table-filters-popover;
4227
+ }
4228
+
4229
+ @keyframes tds-data-table-filters-popover{
4230
+ from{
4231
+ opacity:0;
4232
+ }
4233
+ }
4234
+ }
4235
+
4236
+ .tds-data-table-filters-popover-label{
4237
+ font-size:var(--t-font-size-md);
4238
+ font-weight:var(--t-font-weight-medium);
4239
+ margin-block:0;
4240
+ }
4241
+
4242
+ .tds-data-table-filters-popover-label-operator{
4243
+ font-weight:var(--t-font-weight-normal);
4244
+ }
4245
+
4246
+ .tds-data-table-filters-popover-description{
4247
+ font-size:var(--t-font-size-sm);
4248
+ margin-block-start:calc(var(--t-spacing-fourth) * -1);
4249
+ margin-block-end:0;
4250
+ color:var(--t-text-color-secondary);
4251
+ }
4252
+
4253
+ .tds-data-table-filter-controls-badge{
4254
+ min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4255
+ padding-inline:var(--t-spacing-half);
4256
+ font-size:var(--t-font-size-sm);
4257
+ color:var(--t-text-color-status-info);
4258
+ background-color:var(--t-fill-color-status-info-dim);
4259
+ border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4260
+ border-radius:var(--t-border-radius-round);
4261
+ }
4262
+
4263
+ .tds-segmented-control{
4264
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4265
+ --tds-segmented-control-padding:var(--t-spacing-half);
4266
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4267
+ --tds-segmented-control-icon-size:.66666667lh;
4268
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4269
+ --tds-segmented-control-max-width:280px;
4270
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4271
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4272
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4273
+ --tds-segmented-control-width:fit-content;
4274
+
4275
+ display:flex;
4276
+ flex-direction:column;
4277
+ gap:var(--t-spacing-half);
4278
+ align-items:flex-start;
4279
+ width:var(--tds-segmented-control-width);
4280
+ }
4281
+
4282
+ .tds-segmented-control--sm{
4283
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4284
+ --tds-segmented-control-padding-inline:7px;
4285
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4286
+ }
4287
+
4288
+ .tds-segmented-control--full-width{
4289
+ --tds-segmented-control-width:100%;
4290
+ --tds-segmented-control-max-width:none;
4291
+ }
4292
+
4293
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4294
+ flex:1 1 0;
4295
+ }
4296
+
4297
+ .tds-segmented-control-label{
4298
+ font-size:var(--tds-segmented-control-font-size);
4299
+ font-weight:var(--t-font-weight-normal);
4300
+ color:var(--t-text-color-headline);
4301
+ }
4302
+
4303
+ .tds-segmented-control-label--hidden{
4304
+ position:absolute;
4305
+ width:1px;
4306
+ height:1px;
4307
+ overflow:hidden;
4308
+ white-space:nowrap;
4309
+ clip-path:inset(50%);
4310
+ }
4311
+
4312
+ .tds-segmented-control-track{
4313
+ display:inline-flex;
4314
+ gap:var(--tds-segmented-control-track-gap);
4315
+ width:var(--tds-segmented-control-width);
4316
+ padding:var(--tds-segmented-control-padding);
4317
+ background-color:var(--t-form-background-color);
4318
+ border:1px solid var(--t-border-color);
4319
+ border-radius:var(--tds-segmented-control-border-radius);
4320
+ }
4321
+
4322
+ .tds-segmented-control-segment{
4323
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
4324
+ --tds-segmented-control-background-color:transparent;
4325
+
4326
+ display:inline-flex;
4327
+ gap:var(--t-spacing-1);
4328
+ align-items:center;
4329
+ justify-content:center;
4330
+ max-width:var(--tds-segmented-control-max-width);
4331
+ min-height:var(--tds-segmented-control-min-height);
4332
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4333
+ padding-inline:var(--tds-segmented-control-padding-inline);
4334
+ font:inherit;
4335
+ font-size:var(--tds-segmented-control-font-size);
4336
+ color:var(--tds-segmented-control-color);
4337
+ text-align:center;
4338
+ cursor:pointer;
4339
+ -webkit-user-select:none;
4340
+ -moz-user-select:none;
4341
+ user-select:none;
4342
+ background-color:var(--tds-segmented-control-background-color);
4343
+ border:0;
4344
+ border-radius:var(--t-border-radius-sm);
4345
+ transition-timing-function:var(--t-ease-in-out);
4346
+ transition-duration:var(--t-duration-200);
4347
+ transition-property:color, background-color;
4348
+ }
4349
+
4350
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4351
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4352
+ }
4353
+
4354
+ .tds-segmented-control-segment .symbol{
4355
+ display:block;
4356
+ flex-shrink:0;
4357
+ width:var(--tds-segmented-control-icon-size);
4358
+ height:var(--tds-segmented-control-icon-size);
4359
+ }
4360
+
4361
+ .tds-segmented-control-segment:focus-visible{
4362
+ outline:var(--t-focus-ring-outline);
4363
+ outline-offset:var(--t-focus-ring-offset);
4364
+ }
4045
4365
 
4046
- [data-padding-xl="0"]{ padding:0; }
4047
- [data-padding-xl="0.25"]{ padding:var(--t-spacing-fourth); }
4048
- [data-padding-xl="0.5"]{ padding:var(--t-spacing-half); }
4049
- [data-padding-xl="1"]{ padding:var(--t-spacing-1); }
4050
- [data-padding-xl="1.5"]{ padding:var(--t-spacing-1-half); }
4051
- [data-padding-xl="2"]{ padding:var(--t-spacing-2); }
4052
- [data-padding-xl="3"]{ padding:var(--t-spacing-3); }
4053
- [data-padding-xl="4"]{ padding:var(--t-spacing-4); }
4054
- [data-padding-xl="5"]{ padding:var(--t-spacing-5); }
4055
- [data-padding-xl="6"]{ padding:var(--t-spacing-6); }
4056
- [data-padding-xl="7"]{ padding:var(--t-spacing-7); }
4366
+ .tds-segmented-control-segment[aria-checked="true"]{
4367
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4368
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4057
4369
 
4058
- [data-padding-block-xl="0"]{ padding-block:0; }
4059
- [data-padding-block-xl="0.25"]{ padding-block:var(--t-spacing-fourth); }
4060
- [data-padding-block-xl="0.5"]{ padding-block:var(--t-spacing-half); }
4061
- [data-padding-block-xl="1"]{ padding-block:var(--t-spacing-1); }
4062
- [data-padding-block-xl="1.5"]{ padding-block:var(--t-spacing-1-half); }
4063
- [data-padding-block-xl="2"]{ padding-block:var(--t-spacing-2); }
4064
- [data-padding-block-xl="3"]{ padding-block:var(--t-spacing-3); }
4065
- [data-padding-block-xl="4"]{ padding-block:var(--t-spacing-4); }
4066
- [data-padding-block-xl="5"]{ padding-block:var(--t-spacing-5); }
4067
- [data-padding-block-xl="6"]{ padding-block:var(--t-spacing-6); }
4068
- [data-padding-block-xl="7"]{ padding-block:var(--t-spacing-7); }
4370
+ cursor:default;
4371
+ }
4069
4372
 
4070
- [data-padding-inline-xl="0"]{ padding-inline:0; }
4071
- [data-padding-inline-xl="0.25"]{ padding-inline:var(--t-spacing-fourth); }
4072
- [data-padding-inline-xl="0.5"]{ padding-inline:var(--t-spacing-half); }
4073
- [data-padding-inline-xl="1"]{ padding-inline:var(--t-spacing-1); }
4074
- [data-padding-inline-xl="1.5"]{ padding-inline:var(--t-spacing-1-half); }
4075
- [data-padding-inline-xl="2"]{ padding-inline:var(--t-spacing-2); }
4076
- [data-padding-inline-xl="3"]{ padding-inline:var(--t-spacing-3); }
4077
- [data-padding-inline-xl="4"]{ padding-inline:var(--t-spacing-4); }
4078
- [data-padding-inline-xl="5"]{ padding-inline:var(--t-spacing-5); }
4079
- [data-padding-inline-xl="6"]{ padding-inline:var(--t-spacing-6); }
4080
- [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4373
+ .tds-segmented-control-segment:disabled{
4374
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4375
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4376
+
4377
+ pointer-events:none;
4378
+ }
4379
+
4380
+ .tds-segmented-control-segment--interaction-subtle{
4381
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4382
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4383
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4384
+ --tds-segmented-control-background-color-disabled:transparent;
4081
4385
  }
4082
4386
 
4083
4387
  .tds-data-table{
@@ -4511,379 +4815,290 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4511
4815
  margin:calc(-1 * var(--t-spacing-1));
4512
4816
  background-color:var(--t-form-background-color);
4513
4817
  }
4514
- .tds-data-table-popover:has(.tds-data-table-filter-controls-search-input-sticky){
4515
- scroll-padding-block-start:calc(var(--t-spacing-6));
4516
- }
4517
4818
 
4518
- .tds-data-table-filter-controls-search-input{
4519
- inline-size:100%;
4819
+ .tds-data-table-filter-controls-search-input-control{
4820
+ --_search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4821
+ --_search-input-outline-offset:0;
4822
+
4823
+ display:flex;
4824
+ gap:var(--t-spacing-1);
4825
+ align-items:center;
4520
4826
  min-block-size:var(--t-container-size-md);
4521
4827
  padding-inline:var(--t-spacing-1);
4522
4828
  font-size:var(--t-font-size-md);
4829
+ color:var(--t-form-color);
4830
+ outline:var(--t-focus-ring-width) solid transparent;
4831
+ outline-color:var(--_search-input-outline-color);
4832
+ outline-offset:var(--_search-input-outline-offset);
4523
4833
  background-color:var(--t-form-background-color);
4524
4834
  border:var(--t-form-border-width) solid var(--t-form-border-color);
4525
4835
  border-radius:var(--t-form-border-radius);
4526
- }
4527
-
4528
- .tds-data-table-filter-controls-search-input::-moz-placeholder{
4529
- color:var(--t-form-placeholder-color);
4530
- }
4531
-
4532
- .tds-data-table-filter-controls-search-input::placeholder{
4533
- color:var(--t-form-placeholder-color);
4534
- }
4535
-
4536
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4537
- position:sticky;
4538
- inset-block-start:var(--_label-sticky-block-start);
4539
- background-color:var(--t-surface-color-card);
4540
- }
4541
-
4542
- :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4543
- scroll-margin-block-start:var(--t-spacing-4);
4544
- }
4545
-
4546
- .tds-data-table-filter-controls-list{
4547
- --_label-sticky-block-start:var(--t-spacing-6);
4548
-
4549
- margin-block-start:var(--t-spacing-1);
4550
- }
4551
-
4552
- .tds-data-table-filter-controls-submenu-list{
4553
- --_label-sticky-block-start:0;
4554
- }
4555
-
4556
- .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4557
- position:absolute;
4558
- inset-block-start:calc(-1 * var(--t-spacing-1));
4559
- inset-inline-start:0;
4560
- inline-size:100%;
4561
- block-size:var(--t-spacing-1);
4562
- content:"";
4563
- background-color:var(--t-surface-color-card);
4564
- }
4565
-
4566
- .tds-data-table-filter-controls-submenu-trigger[data-open]{
4567
- background:var(--t-fill-color-neutral-070);
4568
- }
4569
-
4570
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4571
- inline-size:16rem;
4572
- }
4573
-
4574
- .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4575
- max-block-size:20rem;
4576
- }
4577
-
4578
- .tds-data-table-filter-controls-submenu-chevron{
4579
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4580
-
4581
- color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4582
- }
4583
-
4584
- [data-open] .tds-data-table-filter-controls-submenu-chevron{
4585
- --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4586
- }
4587
-
4588
- @media (prefers-reduced-motion: no-preference){
4589
-
4590
- .tds-data-table-filter-controls-submenu-chevron{
4591
- transition-timing-function:var(--t-ease-in-out);
4592
- transition-duration:var(--t-duration-200);
4593
- transition-property:color;
4594
- }
4595
- }
4596
-
4597
- .tds-segmented-control{
4598
- --tds-segmented-control-font-size:var(--t-font-size-md);
4599
- --tds-segmented-control-padding:var(--t-spacing-half);
4600
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4601
- --tds-segmented-control-icon-size:.66666667lh;
4602
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4603
- --tds-segmented-control-max-width:280px;
4604
- --tds-segmented-control-min-height:var(--t-container-size-md);
4605
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4606
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4607
- --tds-segmented-control-width:fit-content;
4608
-
4609
- display:flex;
4610
- flex-direction:column;
4611
- gap:var(--t-spacing-half);
4612
- align-items:flex-start;
4613
- width:var(--tds-segmented-control-width);
4614
- }
4615
-
4616
- .tds-segmented-control--sm{
4617
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4618
- --tds-segmented-control-padding-inline:7px;
4619
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4620
- }
4621
-
4622
- .tds-segmented-control--full-width{
4623
- --tds-segmented-control-width:100%;
4624
- --tds-segmented-control-max-width:none;
4625
- }
4626
-
4627
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4628
- flex:1 1 0;
4629
- }
4630
-
4631
- .tds-segmented-control-label{
4632
- font-size:var(--tds-segmented-control-font-size);
4633
- font-weight:var(--t-font-weight-normal);
4634
- color:var(--t-text-color-headline);
4635
- }
4636
-
4637
- .tds-segmented-control-label--hidden{
4638
- position:absolute;
4639
- width:1px;
4640
- height:1px;
4641
- overflow:hidden;
4642
- white-space:nowrap;
4643
- clip-path:inset(50%);
4644
- }
4645
-
4646
- .tds-segmented-control-track{
4647
- display:inline-flex;
4648
- gap:var(--tds-segmented-control-track-gap);
4649
- width:var(--tds-segmented-control-width);
4650
- padding:var(--tds-segmented-control-padding);
4651
- background-color:var(--t-form-background-color);
4652
- border:1px solid var(--t-border-color);
4653
- border-radius:var(--tds-segmented-control-border-radius);
4654
- }
4655
-
4656
- .tds-segmented-control-segment{
4657
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4658
- --tds-segmented-control-background-color:transparent;
4659
-
4660
- display:inline-flex;
4661
- gap:var(--t-spacing-1);
4662
- align-items:center;
4663
- justify-content:center;
4664
- max-width:var(--tds-segmented-control-max-width);
4665
- min-height:var(--tds-segmented-control-min-height);
4666
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4667
- padding-inline:var(--tds-segmented-control-padding-inline);
4668
- font:inherit;
4669
- font-size:var(--tds-segmented-control-font-size);
4670
- color:var(--tds-segmented-control-color);
4671
- text-align:center;
4672
- cursor:pointer;
4673
- -webkit-user-select:none;
4674
- -moz-user-select:none;
4675
- user-select:none;
4676
- background-color:var(--tds-segmented-control-background-color);
4677
- border:0;
4678
- border-radius:var(--t-border-radius-sm);
4679
4836
  transition-timing-function:var(--t-ease-in-out);
4680
4837
  transition-duration:var(--t-duration-200);
4681
- transition-property:color, background-color;
4838
+ transition-property:background-color, border-color, outline-color, outline-offset;
4682
4839
  }
4683
4840
 
4684
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4685
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4841
+ .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
4842
+ border-color:var(--t-form-border-color-hover);
4686
4843
  }
4687
4844
 
4688
- .tds-segmented-control-segment .symbol{
4689
- display:block;
4690
- flex-shrink:0;
4691
- width:var(--tds-segmented-control-icon-size);
4692
- height:var(--tds-segmented-control-icon-size);
4693
- }
4845
+ .tds-data-table-filter-controls-search-input-control:has(input:focus){
4846
+ --_search-input-outline-color:var(--t-focus-ring-color);
4847
+ --_search-input-outline-offset:var(--t-focus-ring-offset);
4694
4848
 
4695
- .tds-segmented-control-segment:focus-visible{
4696
- outline:var(--t-focus-ring-outline);
4697
- outline-offset:var(--t-focus-ring-offset);
4849
+ border-color:var(--t-form-border-color-focus);
4698
4850
  }
4699
4851
 
4700
- .tds-segmented-control-segment[aria-checked="true"]{
4701
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4702
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4852
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
4853
+ flex-shrink:0;
4854
+ inline-size:1em;
4855
+ color:var(--t-icon-color-dim);
4856
+ }
4703
4857
 
4704
- cursor:default;
4858
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
4859
+ flex:1;
4860
+ min-inline-size:0;
4861
+ padding:0;
4862
+ overflow:hidden;
4863
+ text-overflow:ellipsis;
4864
+ font-family:inherit;
4865
+ font-size:inherit;
4866
+ color:inherit;
4867
+ white-space:nowrap;
4868
+ -webkit-appearance:none;
4869
+ -moz-appearance:none;
4870
+ appearance:none;
4871
+ outline:0;
4872
+ background-color:transparent;
4873
+ border:0;
4705
4874
  }
4706
4875
 
4707
- .tds-segmented-control-segment:disabled{
4708
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4709
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4876
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4877
+ color:var(--t-form-placeholder-color);
4878
+ }
4710
4879
 
4711
- pointer-events:none;
4880
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4881
+ color:var(--t-form-placeholder-color);
4882
+ }
4883
+
4884
+ :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{
4885
+ -webkit-appearance:none;
4886
+ appearance:none;
4887
+ }
4888
+
4889
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4890
+ inline-size:calc(var(--t-font-size-md) * .8);
4891
+ block-size:calc(var(--t-font-size-md) * .8);
4712
4892
  }
4713
4893
 
4714
- .tds-segmented-control-segment--interaction-subtle{
4715
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4716
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4717
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4718
- --tds-segmented-control-background-color-disabled:transparent;
4719
- }
4894
+ .tds-data-table-filter-controls-search-input-control .tds-btn{
4895
+ --tds-btn-color:var(--t-icon-color-dim);
4896
+ --tds-btn-padding-truncated-x:0;
4897
+ --_search-input-clear-button-visibility:hidden;
4720
4898
 
4721
- .tds-data-table-filters-shelf{
4722
- height:auto;
4723
- overflow:hidden;
4724
- transition:height var(--t-duration-300) var(--t-ease-out);
4725
- }
4899
+ visibility:var(--_search-input-clear-button-visibility);
4900
+ flex-shrink:0;
4901
+ }
4726
4902
 
4727
4903
  @media (prefers-reduced-motion: reduce){
4728
4904
 
4729
- .tds-data-table-filters-shelf{
4730
- transition:none;
4905
+ .tds-data-table-filter-controls-search-input-control{
4906
+ transition-property:none;
4731
4907
  }
4732
4908
  }
4733
4909
 
4734
- .tds-data-table-filters-shelf--collapsed{
4735
- height:0;
4736
- transition-timing-function:var(--t-ease-in);
4910
+ .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4911
+ --_search-input-clear-button-visibility:visible;
4737
4912
  }
4738
4913
 
4739
- @supports (interpolate-size: allow-keywords){
4740
- .tds-data-table-filters-shelf{
4741
- interpolate-size:allow-keywords;
4914
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4915
+ position:sticky;
4916
+ inset-block-start:var(--_label-sticky-block-start);
4917
+ background-color:var(--t-surface-color-card);
4742
4918
  }
4743
- }
4744
4919
 
4745
- .tds-data-table-filters{
4746
- padding-block:var(--tds-data-table-cell-padding-block);
4747
- padding-inline:var(--tds-data-table-cell-padding-inline);
4748
- border-top:1px solid var(--tds-data-table-border-color);
4749
- }
4920
+ :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section .tds-dropdown-item{
4921
+ scroll-margin-block-start:var(--t-spacing-4);
4922
+ }
4750
4923
 
4751
- .tds-data-table-filters-active{
4752
- display:flex;
4753
- -moz-column-gap:var(--tds-data-table-cell-padding-inline);
4754
- column-gap:var(--tds-data-table-cell-padding-inline);
4755
- justify-content:space-between;
4756
- }
4924
+ .tds-data-table-filter-controls-list{
4925
+ --_label-sticky-block-start:var(--t-spacing-6);
4757
4926
 
4758
- .tds-data-table-filters-active-list{
4759
- display:flex;
4760
- flex-wrap:wrap;
4761
- gap:var(--t-spacing-half);
4927
+ margin-block-start:var(--t-spacing-1);
4762
4928
  }
4763
4929
 
4764
- .tds-data-table-filters-active-actions{
4765
- flex-shrink:0;
4930
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4931
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
4932
+ }
4933
+
4934
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
4935
+ scroll-margin-block-start:var(--t-spacing-6);
4936
+ }
4937
+
4938
+ .tds-data-table-filter-controls-submenu-list{
4939
+ --_label-sticky-block-start:0;
4766
4940
  }
4767
4941
 
4768
- :root{
4942
+ .tds-data-table-filter-controls-submenu-list .tds-dropdown-section-label::before{
4943
+ position:absolute;
4944
+ inset-block-start:calc(-1 * var(--t-spacing-1));
4945
+ inset-inline-start:0;
4946
+ inline-size:100%;
4947
+ block-size:var(--t-spacing-1);
4948
+ content:"";
4949
+ background-color:var(--t-surface-color-card);
4950
+ }
4769
4951
 
4770
- --_data-table-filter-border-info:hsl(204 96% 89%);
4771
- --_data-table-filter-border-error:hsl(8 60% 85%);
4952
+ .tds-data-table-filter-controls-submenu-trigger[data-open]{
4953
+ background:var(--t-fill-color-neutral-070);
4772
4954
  }
4773
4955
 
4774
- :root[data-color-mode="dark"]{
4775
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4776
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4956
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover{
4957
+ inline-size:16rem;
4777
4958
  }
4778
4959
 
4779
- @media (prefers-color-scheme: dark){
4780
- :root[data-color-mode="system"]{
4781
- --_data-table-filter-border-info:var(--t-border-color-status-info);
4782
- --_data-table-filter-border-error:var(--t-border-color-status-error);
4783
- }
4960
+ .tds-dropdown-popover.tds-data-table-filter-controls-submenu-popover .tds-data-table-filter-controls-submenu-list{
4961
+ max-block-size:20rem;
4784
4962
  }
4785
4963
 
4786
- .tds-btn-group--data-table-filters-chip button{
4787
- --_chip-border-color:var(--_data-table-filter-border-info);
4788
- --_chip-icon-color:var(--t-icon-color-status-info);
4964
+ .tds-data-table-filter-controls-submenu-chevron{
4965
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4789
4966
 
4790
- gap:0;
4791
- color:var(--t-text-color-status-info);
4792
- background-color:var(--t-fill-color-status-info-dim);
4793
- border-color:var(--_chip-border-color);
4967
+ color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4968
+ transform:scale(.8);
4794
4969
  }
4795
4970
 
4796
- :is(.tds-btn-group--data-table-filters-chip button) svg{
4797
- color:var(--_chip-icon-color);
4798
- transform:scale(.75);
4971
+ [data-open] .tds-data-table-filter-controls-submenu-chevron{
4972
+ --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color);
4799
4973
  }
4800
4974
 
4801
- :is(.tds-btn-group--data-table-filters-chip button) span{
4802
- padding-inline:var(--tds-btn-padding-x);
4803
- border-inline-end:var(--t-border-width) solid var(--_chip-border-color);
4975
+ @media (prefers-reduced-motion: no-preference){
4976
+
4977
+ .tds-data-table-filter-controls-submenu-chevron{
4804
4978
  transition-timing-function:var(--t-ease-in-out);
4805
4979
  transition-duration:var(--t-duration-200);
4806
- transition-property:border-color;
4980
+ transition-property:color;
4981
+ }
4807
4982
  }
4808
4983
 
4809
- @media (prefers-reduced-motion: reduce){
4810
-
4811
- :is(.tds-btn-group--data-table-filters-chip button) span{
4812
- transition:none;
4813
- }
4814
- }
4984
+ .tds-currency-input-control{
4985
+ display:flex;
4986
+ gap:var(--t-spacing-half);
4987
+ align-items:center;
4988
+ inline-size:100%;
4989
+ min-block-size:var(--tds-field-min-height);
4990
+ padding-inline:var(--tds-field-padding-inline);
4991
+ font-size:var(--tds-field-font-size);
4992
+ color:var(--tds-field-color);
4993
+ cursor:text;
4994
+ outline:var(--t-focus-ring-width) solid transparent;
4995
+ background-color:var(--tds-field-background-color);
4996
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
4997
+ border-radius:var(--t-form-border-radius);
4998
+ transition-timing-function:var(--t-ease-in-out);
4999
+ transition-duration:var(--t-duration-200);
5000
+ transition-property:background-color, border-color, outline-color, outline-offset;
5001
+ }
4815
5002
 
4816
- :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4817
- padding-inline-start:0;
5003
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
5004
+ border-color:var(--tds-field-border-color-hover);
4818
5005
  }
4819
5006
 
4820
- :is(.tds-btn-group--data-table-filters-chip button) span:last-child{
4821
- padding-inline-end:0;
4822
- border-inline-end-color:transparent;
5007
+ .tds-currency-input-control:has(input:focus){
5008
+ outline-color:var(--t-focus-ring-color);
5009
+ outline-offset:var(--t-focus-ring-offset);
5010
+ border-color:var(--tds-field-border-color-active);
4823
5011
  }
4824
5012
 
4825
- :is(.tds-btn-group--data-table-filters-chip button):hover,:is(.tds-btn-group--data-table-filters-chip button):active,:is(.tds-btn-group--data-table-filters-chip button):focus{
4826
- color:var(--t-text-color-interaction);
4827
- background-color:var(--t-fill-color-status-info-ghost);
4828
- border-color:var(--_chip-border-color);
5013
+ .tds-currency-input-control input{
5014
+ flex:1;
5015
+ min-inline-size:0;
5016
+ padding:0;
5017
+ font-family:inherit;
5018
+ font-size:inherit;
5019
+ color:inherit;
5020
+ -webkit-appearance:none;
5021
+ -moz-appearance:none;
5022
+ appearance:none;
5023
+ outline:0;
5024
+ background-color:transparent;
5025
+ border:0;
4829
5026
  }
4830
5027
 
4831
- .tds-btn-group--data-table-filters-chip-inactive button{
4832
- --_chip-border-color:var(--t-border-color-button-neutral);
4833
- --_chip-icon-color:var(--t-icon-color-status-neutral);
5028
+ :is(.tds-currency-input-control input)::-moz-placeholder{
5029
+ color:var(--tds-field-placeholder-color);
5030
+ -moz-user-select:none;
5031
+ user-select:none;
5032
+ }
4834
5033
 
4835
- color:var(--t-text-color);
4836
- background-color:var(--t-fill-color-status-neutral-dim);
4837
- }
5034
+ :is(.tds-currency-input-control input)::placeholder{
5035
+ color:var(--tds-field-placeholder-color);
5036
+ -webkit-user-select:none;
5037
+ -moz-user-select:none;
5038
+ user-select:none;
5039
+ }
4838
5040
 
4839
- :is(.tds-btn-group--data-table-filters-chip-inactive button):hover,:is(.tds-btn-group--data-table-filters-chip-inactive button):active,:is(.tds-btn-group--data-table-filters-chip-inactive button):focus{
4840
- color:var(--t-text-color);
4841
- background-color:var(--t-fill-color-status-neutral-ghost);
5041
+ .tds-currency-input-control .tds-currency-input-prefix{
5042
+ flex-shrink:0;
5043
+ color:var(--t-text-color-secondary);
5044
+ pointer-events:none;
5045
+ -webkit-user-select:none;
5046
+ -moz-user-select:none;
5047
+ user-select:none;
4842
5048
  }
4843
5049
 
4844
- .tds-btn-group--data-table-filters-chip-invalid button{
4845
- --_chip-border-color:var(--_data-table-filter-border-error);
4846
- --_chip-icon-color:var(--t-icon-color-status-error);
5050
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
5051
+ --tds-field-background-color:var(--t-form-background-color-error);
5052
+ --tds-field-border-color:var(--t-form-border-color-error);
5053
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
5054
+ }
4847
5055
 
4848
- color:var(--t-text-color-status-error);
4849
- background-color:var(--t-fill-color-status-error-dim);
4850
- }
5056
+ .tds-currency-input-control:has(:disabled){
5057
+ --tds-field-border-color:var(--t-form-border-color-disabled);
5058
+ --tds-field-background-color:var(--t-form-background-color-disabled);
5059
+ --tds-field-color:var(--t-form-color-disabled);
4851
5060
 
4852
- :is(.tds-btn-group--data-table-filters-chip-invalid button):hover,:is(.tds-btn-group--data-table-filters-chip-invalid button):active,:is(.tds-btn-group--data-table-filters-chip-invalid button):focus{
4853
- color:var(--t-text-color-status-error);
4854
- background-color:var(--t-fill-color-status-error-ghost);
5061
+ cursor:not-allowed;
4855
5062
  }
4856
- .tds-popover--data-table-filters-popover .tds-popover-content{
4857
- gap:var(--t-spacing-1);
4858
- align-items:start;
4859
- padding:var(--t-spacing-2);
5063
+
5064
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
5065
+ color:var(--tds-field-color);
5066
+ }
5067
+
5068
+ .tds-currency-input-control:has([readonly]){
5069
+ --tds-field-border-color:var(--t-form-border-color-readonly);
5070
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
5071
+ --tds-field-background-color:var(--t-form-background-color-readonly);
5072
+ --tds-field-color:var(--t-form-color-readonly);
4860
5073
  }
4861
5074
 
4862
- .tds-data-table-filters-popover-label{
4863
- font-size:var(--t-font-size-md);
4864
- font-weight:var(--t-font-weight-medium);
4865
- margin-block:0;
5075
+ .tds-currency-input-control:has([readonly]):has(input:focus){
5076
+ border-color:var(--t-form-border-color-hover);
5077
+ }
5078
+ .tds-currency-input-currency-name--hidden{
5079
+ position:absolute;
5080
+ width:1px;
5081
+ height:1px;
5082
+ overflow:hidden;
5083
+ white-space:nowrap;
5084
+ clip-path:inset(50%);
4866
5085
  }
4867
5086
 
4868
- .tds-data-table-filters-popover-label-operator{
4869
- font-weight:var(--t-font-weight-normal);
5087
+ .search-result-grouping-4F5Lx{
5088
+ color:var(--t-text-color-secondary);
4870
5089
  }
4871
5090
 
4872
- .tds-data-table-filters-popover-description{
4873
- font-size:var(--t-font-size-sm);
4874
- margin-block-start:calc(var(--t-spacing-fourth) * -1);
4875
- margin-block-end:0;
4876
- color:var(--t-text-color-secondary);
5091
+ .search-result-grouping-chevron--AUkV::after{
5092
+ content:" › ";
4877
5093
  }
4878
5094
 
4879
- .tds-data-table-filter-controls-badge{
4880
- min-inline-size:calc(1lh + (var(--t-border-width) * 2));
4881
- padding-inline:var(--t-spacing-half);
4882
- font-size:var(--t-font-size-sm);
4883
- color:var(--t-text-color-status-info);
4884
- background-color:var(--t-fill-color-status-info-dim);
4885
- border:var(--t-border-width) solid var(--_data-table-filter-border-info);
4886
- border-radius:var(--t-border-radius-round);
5095
+ .search-result-grouping-separator-dKnTA{
5096
+ position:absolute;
5097
+ width:1px;
5098
+ height:1px;
5099
+ overflow:hidden;
5100
+ white-space:nowrap;
5101
+ clip-path:inset(50%);
4887
5102
  }
4888
5103
 
4889
5104
  .tds-pagination{