@planningcenter/tapestry 4.8.0-rc.0 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) 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/CollectionEditorsShared.d.ts +33 -0
  10. package/dist/components/DataTable/CollectionEditorsShared.d.ts.map +1 -0
  11. package/dist/components/DataTable/CollectionEditorsShared.js +16 -0
  12. package/dist/components/DataTable/CollectionEditorsShared.js.map +1 -0
  13. package/dist/components/DataTable/CollectionEditorsStatic.d.ts +14 -0
  14. package/dist/components/DataTable/CollectionEditorsStatic.d.ts.map +1 -0
  15. package/dist/components/DataTable/CollectionEditorsStatic.js +67 -0
  16. package/dist/components/DataTable/CollectionEditorsStatic.js.map +1 -0
  17. package/dist/components/DataTable/DataTable.d.ts +1 -1
  18. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  19. package/dist/components/DataTable/DataTable.js +59 -56
  20. package/dist/components/DataTable/DataTable.js.map +1 -1
  21. package/dist/components/DataTable/FilterChip.d.ts.map +1 -1
  22. package/dist/components/DataTable/FilterChip.js +25 -1
  23. package/dist/components/DataTable/FilterChip.js.map +1 -1
  24. package/dist/components/DataTable/FilterContext.d.ts +10 -1
  25. package/dist/components/DataTable/FilterContext.d.ts.map +1 -1
  26. package/dist/components/DataTable/FilterContext.js +52 -9
  27. package/dist/components/DataTable/FilterContext.js.map +1 -1
  28. package/dist/components/DataTable/FilterControls.d.ts.map +1 -1
  29. package/dist/components/DataTable/FilterControls.js +85 -23
  30. package/dist/components/DataTable/FilterControls.js.map +1 -1
  31. package/dist/components/DataTable/FilterControls.module.css.js +4 -0
  32. package/dist/components/DataTable/FilterControls.module.css.js.map +1 -0
  33. package/dist/components/DataTable/FilterTypes.d.ts +34 -0
  34. package/dist/components/DataTable/FilterTypes.d.ts.map +1 -1
  35. package/dist/components/DataTable/FilterTypes.js +7 -0
  36. package/dist/components/DataTable/FilterTypes.js.map +1 -0
  37. package/dist/components/DataTable/PendingFilterContext.d.ts +12 -0
  38. package/dist/components/DataTable/PendingFilterContext.d.ts.map +1 -0
  39. package/dist/components/DataTable/PendingFilterContext.js +33 -0
  40. package/dist/components/DataTable/PendingFilterContext.js.map +1 -0
  41. package/dist/components/DataTable/PendingFilterQueue.d.ts +13 -0
  42. package/dist/components/DataTable/PendingFilterQueue.d.ts.map +1 -0
  43. package/dist/components/DataTable/PendingFilterQueue.js +42 -0
  44. package/dist/components/DataTable/PendingFilterQueue.js.map +1 -0
  45. package/dist/components/DataTable/SearchableFilters.d.ts +4 -0
  46. package/dist/components/DataTable/SearchableFilters.d.ts.map +1 -1
  47. package/dist/components/DataTable/SearchableFilters.js +26 -0
  48. package/dist/components/DataTable/SearchableFilters.js.map +1 -1
  49. package/dist/components/DataTable/collectionFilter.d.ts +0 -2
  50. package/dist/components/DataTable/collectionFilter.d.ts.map +1 -1
  51. package/dist/components/DataTable/collectionFilter.js +3 -45
  52. package/dist/components/DataTable/collectionFilter.js.map +1 -1
  53. package/dist/components/DataTable/dateFilter.d.ts.map +1 -1
  54. package/dist/components/DataTable/dateFilter.js +23 -7
  55. package/dist/components/DataTable/dateFilter.js.map +1 -1
  56. package/dist/components/DataTable/filters.d.ts +1 -0
  57. package/dist/components/DataTable/filters.d.ts.map +1 -1
  58. package/dist/components/DataTable/index.d.ts +2 -1
  59. package/dist/components/DataTable/index.d.ts.map +1 -1
  60. package/dist/components/DataTable/numberFilter.d.ts.map +1 -1
  61. package/dist/components/DataTable/numberFilter.js +15 -4
  62. package/dist/components/DataTable/numberFilter.js.map +1 -1
  63. package/dist/components/DataTable/scopedFilter.d.ts +13 -0
  64. package/dist/components/DataTable/scopedFilter.d.ts.map +1 -0
  65. package/dist/components/DataTable/scopedFilter.js +114 -0
  66. package/dist/components/DataTable/scopedFilter.js.map +1 -0
  67. package/dist/components/DataTable/textFilter.d.ts.map +1 -1
  68. package/dist/components/DataTable/textFilter.js +8 -3
  69. package/dist/components/DataTable/textFilter.js.map +1 -1
  70. package/dist/components/DataTable/useShelfExpanded.d.ts +4 -3
  71. package/dist/components/DataTable/useShelfExpanded.d.ts.map +1 -1
  72. package/dist/components/DataTable/useShelfExpanded.js +16 -8
  73. package/dist/components/DataTable/useShelfExpanded.js.map +1 -1
  74. package/dist/components/DataTable/utils.d.ts +4 -0
  75. package/dist/components/DataTable/utils.d.ts.map +1 -0
  76. package/dist/components/DataTable/utils.js +13 -0
  77. package/dist/components/DataTable/utils.js.map +1 -0
  78. package/dist/components/currency-input/CurrencyInput.d.ts +51 -0
  79. package/dist/components/currency-input/CurrencyInput.d.ts.map +1 -0
  80. package/dist/components/currency-input/CurrencyInput.js +64 -0
  81. package/dist/components/currency-input/CurrencyInput.js.map +1 -0
  82. package/dist/components/currency-input/index.d.ts +4 -0
  83. package/dist/components/currency-input/index.d.ts.map +1 -0
  84. package/dist/components/popover/Popover.d.ts +12 -7
  85. package/dist/components/popover/Popover.d.ts.map +1 -1
  86. package/dist/components/popover/Popover.js +26 -4
  87. package/dist/components/popover/Popover.js.map +1 -1
  88. package/dist/reactRender.css +1305 -1090
  89. package/dist/reactRender.css.map +1 -1
  90. package/dist/reactRenderLegacy.css +1305 -1090
  91. package/dist/reactRenderLegacy.css.map +1 -1
  92. package/dist/unstable.css +442 -227
  93. package/dist/unstable.css.map +1 -1
  94. package/dist/unstable.d.ts +1 -0
  95. package/dist/unstable.d.ts.map +1 -1
  96. package/dist/unstable.js +2 -0
  97. package/dist/unstable.js.map +1 -1
  98. package/package.json +3 -3
@@ -677,644 +677,718 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
- @layer t-critical{
681
- tds-page-header:not(.hydrated){
682
- display:none;
683
- }
680
+
681
+ @media (prefers-reduced-motion: no-preference){
682
+
683
+ :root{
684
+ interpolate-size:allow-keywords;
684
685
  }
686
+ }
685
687
 
686
- @layer t-component{
687
- .tds-page-header{
688
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
689
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
690
- --tds-page-header-color:var(--t-text-color);
691
- --tds-page-header-bottom-border-color:transparent;
692
- --tds-page-header-headline-color:var(--t-text-color-headline);
693
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
694
- --tds-page-header-padding-x:var(--t-spacing-2);
695
- --tds-page-header-padding-y:var(--t-spacing-2);
696
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
697
- --tds-page-header-nav-gap:var(--t-spacing-1);
698
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
699
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
700
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
701
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
702
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
703
- --tds-page-header-nav-item-border-width:1px;
688
+ @layer tds-component{
689
+ tds-sidenav,
690
+ .tds-sidenav{
691
+ --tds-sidenav-indent:12px;
692
+ --tds-sidenav-item-depth:0;
704
693
 
705
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
706
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
694
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
707
695
 
708
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
709
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
710
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
696
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
697
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
698
+ --tds-sidenav-collapse-closed-opacity:0;
699
+ --tds-sidenav-collapse-open-opacity:1;
700
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
701
+ --tds-sidenav-collapse-open-transform:translateY(0);
711
702
 
712
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
713
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
703
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
704
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
705
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
706
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
714
707
 
715
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
716
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
717
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
708
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
+ --tds-sidenav-item-nested-background-selected:transparent;
718
711
 
719
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
720
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
721
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
722
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
723
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
724
- }
712
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
725
715
 
726
- .tds-page-header--profile{
727
- --tds-page-header-padding-y:20px;
716
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
728
718
  }
729
719
 
730
- @supports (color: light-dark(#fff, #000)){
731
- .tds-page-header{
732
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
720
+ @media (prefers-reduced-motion: reduce){
721
+ tds-sidenav,
722
+ .tds-sidenav{
723
+ --tds-sidenav-collapse-transition-enter:none;
724
+ --tds-sidenav-collapse-transition-exit:none;
725
+ --tds-sidenav-collapse-closed-transform:none;
726
+ --tds-sidenav-collapse-open-transform:none;
727
+ }
734
728
  }
729
+
730
+ .tds-sidenav--theme-gray{
731
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
732
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
733
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
734
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
735
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
735
736
  }
737
+ }
736
738
 
737
- @media (min-width: 600px){
738
- .tds-page-header{
739
- --tds-page-header-background-color:var(--t-surface-color-canvas);
740
- --tds-page-header-color:var(--t-text-color-secondary);
741
- --tds-page-header-bottom-border-color:var(--t-border-color);
742
- --tds-page-header-padding-x:var(--t-spacing-3);
743
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
744
- --tds-page-header-nav-gap:var(--t-spacing-half);
745
- --tds-page-header-nav-background:transparent;
746
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
747
- --tds-page-header-nav-item-border-width:1px;
748
- --tds-page-header-nav-item-color:var(--t-text-color);
749
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
750
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
751
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
752
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
753
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
754
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
755
- }
739
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
+ display:flex;
741
+ }
742
+
743
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
744
+ flex-direction:column;
745
+ gap:var(--t-spacing-half);
746
+ width:100%;
756
747
  }
748
+
749
+ .tds-sidenav-section-list{
750
+ width:100%;
751
+ padding:0;
752
+ margin:0;
753
+ list-style:none;
757
754
  }
758
755
 
759
- .tds-page-header{
756
+ .tds-sidenav-section-header{
760
757
  display:flex;
761
- flex-direction:column;
762
- padding-top:var(--tds-page-header-padding-y);
763
- color:var(--tds-page-header-color);
764
- background:var(--tds-page-header-background-color);
765
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
758
+ align-items:baseline;
759
+ justify-content:space-between;
760
+ padding-top:var(--t-spacing-2);
766
761
  }
767
762
 
768
- .tds-page-header:not(.has-nav){
769
- padding-bottom:var(--tds-page-header-padding-y);
763
+ .tds-sidenav-section-header h2{
764
+ margin:0;
765
+ font-size:var(--t-font-size-sm);
766
+ font-weight:var(--t-font-weight-semibold);
767
+ line-height:1.35;
768
+ color:var(--t-text-color-secondary);
769
+ text-transform:uppercase;
770
770
  }
771
771
 
772
- .tds-page-header.inactive{
773
- background:var(--tds-page-header-background-color-inactive);
772
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
+ padding-top:0;
774
774
  }
775
775
 
776
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
- width:100%;
776
+ .tds-sidenav-section-header [slot="label-actions"]{
777
+ display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
778
780
  }
779
781
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
782
+ .tds-sidenav-section [slot="section-actions"]{
783
+ display:flex;
784
+ gap:12px;
785
+ align-items:center;
786
+ min-height:42px;
787
+ padding:var(--t-spacing-1) 0;
788
+ }
789
+
790
+ .tds-sidenav-section-list,
791
+ .tds-sidenav-item{
792
+ width:100%;
793
+ padding:0;
794
+ margin:0;
795
+ }
796
+
797
+ .tds-sidenav-item :is(a,button){
798
+ position:relative;
781
799
  display:flex;
782
- flex-flow:row wrap;
783
- gap:var(--t-spacing-half) var(--t-spacing-1);
784
- align-items:flex-start;
785
- justify-content:flex-start;
786
- min-width:0;
800
+ gap:12px;
801
+ align-items:center;
802
+ width:100%;
803
+ padding:12px;
804
+ overflow:hidden;
805
+ font-size:var(--t-font-size-sm);
806
+ line-height:18px;
807
+ color:var(--t-text-color-headline);
808
+ white-space:nowrap;
809
+ text-decoration:none;
810
+ -webkit-appearance:none;
811
+ -moz-appearance:none;
812
+ appearance:none;
813
+ cursor:pointer;
814
+ background-color:var(--tds-sidenav-item-background, transparent);
815
+ border:0;
816
+ border-radius:var(--t-border-radius);
817
+ transition:var(--tds-sidenav-item-transition);
787
818
  }
788
819
 
789
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
790
- display:flex;
791
- gap:var(--tds-page-header-nav-gap);
792
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
793
- margin:0 0 -1px;
794
- overflow:auto;
795
- list-style:none;
796
- background:var(--tds-page-header-nav-background);
820
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
821
+ display:block;
822
+ flex:1;
823
+ overflow:hidden;
824
+ text-overflow:ellipsis;
825
+ text-align:left;
826
+ white-space:nowrap;
797
827
  }
798
828
 
799
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
800
- position:relative;
801
- display:inline-flex;
802
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
803
- font-size:var(--t-font-size-sm);
804
- line-height:22px;
805
- color:var(--tds-page-header-nav-item-color);
806
- white-space:nowrap;
829
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
830
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
831
+ color:var(--t-text-color-headline);
807
832
  text-decoration:none;
808
- -webkit-appearance:none;
809
- -moz-appearance:none;
810
- appearance:none;
811
- cursor:pointer;
812
- outline-offset:-2px;
813
- background-color:var(--tds-page-header-nav-item-background-color);
814
- background-clip:padding-box;
815
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
818
833
  }
819
834
 
820
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
821
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
822
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
823
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
824
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
835
+ :is(.tds-sidenav-item :is(a,button)):active{
836
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
837
+ }
838
+
839
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
840
+ overflow:hidden;
841
+ color:var(--tds-sidenav-item-icon-color);
842
+ }
843
+
844
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
845
+ display:block;
846
+ width:var(--tds-sidenav-item-icon-size);
847
+ height:var(--tds-sidenav-item-icon-size);
825
848
  }
826
849
 
827
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
828
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
829
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
830
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
831
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
832
- }
850
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
851
+ --tds-sidenav-indent:19px;
852
+ }
833
853
 
834
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
835
- background-color:var(--tds-page-header-nav-item-background-color-active);
836
- border-color:var(--tds-page-header-nav-item-border-color-active);
837
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
838
- }
854
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
855
+ visibility:visible;
856
+ block-size:auto;
857
+ opacity:1;
858
+ }
839
859
 
840
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
841
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
842
- color:var(--tds-page-header-nav-item-color-disabled);
843
- cursor:not-allowed;
844
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
845
- opacity:1;
846
- }
860
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
861
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
862
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
847
863
 
848
- @media (min-width: 600px){
849
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
850
- position:absolute;
851
- inset:auto -1px -1px;
852
- height:1px;
853
- pointer-events:none;
854
- content:"";
855
- background-color:var(--tds-page-header-bottom-border-color);
856
- }
857
- }
864
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
865
+ font-weight:var(--t-font-weight-semibold);
866
+ }
858
867
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
868
+ .tds-sidenav-item:has(.tds-sidenav-section){
869
+ display:flex;
870
+ flex-direction:column;
871
+ gap:var(--t-spacing-half);
872
+ }
873
+
874
+ .tds-sidenav-item .tds-sidenav-section-list{
875
+ --tds-sidenav-item-depth:1;
876
+ gap:0;
877
+ }
878
+
879
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
880
+ visibility:hidden;
881
+ block-size:0;
882
+ overflow-y:clip;
883
+ opacity:0;
884
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
861
885
  }
862
886
 
863
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
864
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
865
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
887
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
888
+ --tds-sidenav-item-depth:2;
889
+ }
890
+
891
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
892
+ min-height:var(--t-element-size-2xl);
893
+ padding-block:9px;
894
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
895
+ line-height:1;
896
+ background-color:transparent;
897
+ }
898
+
899
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
900
+ position:absolute;
901
+ top:0;
902
+ bottom:0;
903
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
904
+ width:2px;
905
+ content:"";
906
+ background-color:var(--tds-sidenav-item-nested-border-color);
907
+ transition:var(--tds-sidenav-item-transition);
866
908
  }
867
909
 
868
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
910
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
869
911
  position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
912
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
+ z-index:-1;
914
+ height:100%;
874
915
  content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
916
+ background-color:var(--tds-sidenav-item-nested-background);
917
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
918
+ transition:var(--tds-sidenav-item-transition);
877
919
  }
878
920
 
879
- @media (prefers-reduced-motion: no-preference){
880
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
881
- animation:indicator-pulse 1.25s ease infinite;
882
- }
921
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
922
+ display:block;
923
+ text-align:left;
924
+ white-space:normal;
883
925
  }
884
926
 
885
- .tds-page-header__title-bar{
886
- display:flex;
887
- flex-direction:column;
888
- gap:var(--t-spacing-2) var(--t-spacing-1);
889
- align-items:flex-start;
890
- justify-content:space-between;
891
- padding:0 var(--tds-page-header-padding-x);
892
- }
927
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
928
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
929
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
930
+ }
893
931
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
932
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
933
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
934
+ }
897
935
 
898
- .tds-page-header__primary{
936
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
937
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
938
+ font-weight:var(--t-font-weight-medium);
939
+ }
940
+
941
+ .tds-sidenav-responsive-header{
942
+ display:flex;
943
+ gap:var(--t-spacing-2);
944
+ align-items:center;
899
945
  width:100%;
900
946
  }
901
947
 
902
- .tds-page-header__primary h1{
948
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
949
+ order:0;
950
+ }
951
+
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
953
+ flex:1;
954
+ order:1;
903
955
  margin:0;
904
- font-size:var(--tds-page-header-headline-font-size);
905
- font-weight:var(--t-font-weight-normal);
906
- line-height:32px;
907
- color:var(--tds-page-header-headline-color);
908
- overflow-wrap:break-word;
956
+ font-size:var(--t-font-size-lg);
957
+ font-weight:var(--t-font-weight-medium);
958
+ color:var(--t-text-color-headline);
909
959
  }
910
960
 
911
- @media (min-width: 960px){
912
- .tds-page-header__primary{
913
- flex:1 1 max-content;
914
- width:auto;
915
- min-width:0;
916
- max-width:100%;
961
+ @media (max-width: 719px){
962
+ .tds-sidenav-collapse{
963
+ z-index:10001;
964
+ display:none;
965
+ max-width:min(448px, calc(100vw - 48px));
966
+ padding:0;
967
+ margin:12px 0;
968
+ position-area:bottom span-right;
969
+ overflow:hidden;
970
+ outline:0;
971
+ background:var(--t-surface-color-card);
972
+ border:0;
973
+ border-radius:6px;
974
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
975
+ opacity:var(--tds-sidenav-collapse-open-opacity);
976
+ transform:var(--tds-sidenav-collapse-open-transform);
977
+ transition:var(--tds-sidenav-collapse-transition-enter);
978
+ will-change:transform;
917
979
  }
918
980
 
919
- .tds-page-header__title-bar,
920
- .tds-page-header--profile .tds-page-header__title-bar{
921
- flex-flow:row nowrap;
922
- row-gap:12px;
923
- align-items:flex-start;
981
+ .tds-sidenav-scroll-container{
982
+ --webkit-overflow-scrolling:touch;
983
+ display:block;
984
+ width:100%;
985
+ height:-moz-fit-content;
986
+ height:fit-content;
987
+ padding:var(--t-spacing-2);
988
+ overflow-y:auto;
924
989
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
927
- }
928
990
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
991
+ .tds-sidenav-item :is(a, button) :is(.prefix){
992
+ display:none;
993
+ }
994
+ @supports selector(:popover-open){
995
+ .tds-sidenav-collapse:popover-open{
996
+ display:flex;
931
997
  }
932
- }
933
998
 
934
- .tds-page-header-phone,
935
- .tds-page-header-email{
936
- color:var(--tds-page-header-color);
937
- white-space:nowrap;
938
- }
939
- .tds-page-header-email{
940
- max-width:100%;
941
- overflow:hidden;
942
- text-overflow:ellipsis;
943
- }
999
+ .tds-sidenav-collapse:not(:popover-open){
1000
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1001
+ transition:var(--tds-sidenav-collapse-transition-exit);
1002
+ }
944
1003
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
1004
+ @starting-style{
1005
+ .tds-sidenav-collapse:popover-open{
1006
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1007
+ transform:var(--tds-sidenav-collapse-closed-transform);
1008
+ }
1009
+ }
949
1010
  }
1011
+ @supports not selector(:popover-open){
1012
+ .tds-sidenav-collapse.\:popover-open{
1013
+ display:flex;
1014
+ }
950
1015
 
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
1016
+ .tds-sidenav-collapse:not(.\:popover-open){
1017
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1018
+ transition:var(--tds-sidenav-collapse-transition-exit);
1019
+ }
954
1020
  }
955
1021
  }
956
1022
 
1023
+ @media (min-width: 720px){
1024
+ .tds-sidenav-responsive-header{
1025
+ display:none;
1026
+ }
1027
+ }
957
1028
 
958
- @media (prefers-reduced-motion: no-preference){
1029
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1030
+ display:none;
1031
+ }
959
1032
 
960
- :root{
961
- interpolate-size:allow-keywords;
962
- }
963
- }
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1034
+ display:block;
1035
+ }
964
1036
 
965
- @layer tds-component{
966
- tds-sidenav,
967
- .tds-sidenav{
968
- --tds-sidenav-indent:12px;
969
- --tds-sidenav-item-depth:0;
1037
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1038
+ display:flex;
1039
+ flex-direction:column;
1040
+ }
970
1041
 
971
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1042
+ .tds-checkbox-group{
1043
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1044
+ --tds-checkbox-group-line-height:1.4;
1045
+ --tds-checkbox-group-gap:var(--t-spacing-1);
972
1046
 
973
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
974
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
975
- --tds-sidenav-collapse-closed-opacity:0;
976
- --tds-sidenav-collapse-open-opacity:1;
977
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
978
- --tds-sidenav-collapse-open-transform:translateY(0);
979
-
980
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
981
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
982
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
983
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
984
-
985
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
986
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
987
- --tds-sidenav-item-nested-background-selected:transparent;
1047
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1048
+ --tds-checkbox-group-description-line-height:1.35;
1049
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1050
+ --tds-checkbox-group-description-invalid-icon-display:none;
1051
+ display:flex;
1052
+ flex-direction:column;
1053
+ gap:0;
1054
+ padding:0;
1055
+ margin:0;
988
1056
 
989
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
990
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
991
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1057
+ font-size:var(--tds-checkbox-group-font-size);
1058
+ line-height:var(--tds-checkbox-group-line-height);
1059
+ border:0;
1060
+ }
992
1061
 
993
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
994
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1062
+ .tds-checkbox-group legend{
1063
+ float:left;
1064
+ padding:0;
1065
+ margin:0;
995
1066
  }
996
1067
 
997
- @media (prefers-reduced-motion: reduce){
998
- tds-sidenav,
999
- .tds-sidenav{
1000
- --tds-sidenav-collapse-transition-enter:none;
1001
- --tds-sidenav-collapse-transition-exit:none;
1002
- --tds-sidenav-collapse-closed-transform:none;
1003
- --tds-sidenav-collapse-open-transform:none;
1068
+ .tds-checkbox-group[aria-invalid="true"]{
1069
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1070
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1004
1071
  }
1072
+
1073
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1074
+ margin-left:.25ch;
1075
+ color:var(--t-text-color-status-error);
1076
+ content:"*";
1005
1077
  }
1006
1078
 
1007
- .tds-sidenav--theme-gray{
1008
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1009
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1010
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1011
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1012
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1013
- }
1079
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1080
+ content:none;
1081
+ }
1082
+
1083
+ .tds-checkbox-group-fields{
1084
+ display:flex;
1085
+ flex-direction:column;
1086
+ gap:var(--tds-checkbox-group-gap);
1087
+ align-items:flex-start;
1088
+ margin-top:var(--t-spacing-1);
1014
1089
  }
1015
1090
 
1016
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
- display:flex;
1018
- }
1091
+ .tds-checkbox-group-description{
1092
+ display:flex;
1093
+ gap:var(--t-spacing-half);
1094
+ align-items:flex-start;
1095
+ margin:var(--t-spacing-fourth) 0 0;
1096
+ font-size:var(--tds-checkbox-group-description-font-size);
1097
+ line-height:var(--tds-checkbox-group-description-line-height);
1098
+ color:var(--tds-checkbox-group-description-color);
1099
+ cursor:text;
1100
+ }
1019
1101
 
1020
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1021
- flex-direction:column;
1022
- gap:var(--t-spacing-half);
1023
- width:100%;
1102
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1103
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1104
+ flex-shrink:0;
1105
+ margin-top:calc(.5lh - .5em);
1106
+ line-height:var(--tds-checkbox-group-description-line-height);
1024
1107
  }
1025
1108
 
1026
- .tds-sidenav-section-list{
1027
- width:100%;
1028
- padding:0;
1029
- margin:0;
1030
- list-style:none;
1109
+ .tds-checkbox-group--sm{
1110
+ --tds-checkbox-group-line-height:1.35;
1111
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1112
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1113
+ --tds-checkbox-group-description-line-height:1.3;
1031
1114
  }
1032
1115
 
1033
- .tds-sidenav-section-header{
1034
- display:flex;
1035
- align-items:baseline;
1036
- justify-content:space-between;
1037
- padding-top:var(--t-spacing-2);
1116
+ @layer t-critical{
1117
+ tds-page-header:not(.hydrated){
1118
+ display:none;
1119
+ }
1038
1120
  }
1039
1121
 
1040
- .tds-sidenav-section-header h2{
1041
- margin:0;
1042
- font-size:var(--t-font-size-sm);
1043
- font-weight:var(--t-font-weight-semibold);
1044
- line-height:1.35;
1045
- color:var(--t-text-color-secondary);
1046
- text-transform:uppercase;
1122
+ @layer t-component{
1123
+ .tds-page-header{
1124
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1125
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1126
+ --tds-page-header-color:var(--t-text-color);
1127
+ --tds-page-header-bottom-border-color:transparent;
1128
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1129
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1130
+ --tds-page-header-padding-x:var(--t-spacing-2);
1131
+ --tds-page-header-padding-y:var(--t-spacing-2);
1132
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1133
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1134
+ --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%);
1135
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1136
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1137
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1138
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1139
+ --tds-page-header-nav-item-border-width:1px;
1140
+
1141
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1142
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1143
+
1144
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1145
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1146
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1147
+
1148
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1149
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1150
+
1151
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1152
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1153
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1154
+
1155
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1156
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1157
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1158
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1159
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1047
1160
  }
1048
1161
 
1049
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
- padding-top:0;
1162
+ .tds-page-header--profile{
1163
+ --tds-page-header-padding-y:20px;
1051
1164
  }
1052
1165
 
1053
- .tds-sidenav-section-header [slot="label-actions"]{
1054
- display:flex;
1055
- gap:var(--t-spacing-half);
1056
- align-items:center;
1166
+ @supports (color: light-dark(#fff, #000)){
1167
+ .tds-page-header{
1168
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1169
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1170
+ }
1057
1171
  }
1058
1172
 
1059
- .tds-sidenav-section [slot="section-actions"]{
1060
- display:flex;
1061
- gap:12px;
1062
- align-items:center;
1063
- min-height:42px;
1064
- padding:var(--t-spacing-1) 0;
1173
+ @media (min-width: 600px){
1174
+ .tds-page-header{
1175
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1176
+ --tds-page-header-color:var(--t-text-color-secondary);
1177
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1178
+ --tds-page-header-padding-x:var(--t-spacing-3);
1179
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1180
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1181
+ --tds-page-header-nav-background:transparent;
1182
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1183
+ --tds-page-header-nav-item-border-width:1px;
1184
+ --tds-page-header-nav-item-color:var(--t-text-color);
1185
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1186
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1187
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1188
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1189
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1190
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1191
+ }
1192
+ }
1065
1193
  }
1066
1194
 
1067
- .tds-sidenav-section-list,
1068
- .tds-sidenav-item{
1069
- width:100%;
1070
- padding:0;
1071
- margin:0;
1195
+ .tds-page-header{
1196
+ display:flex;
1197
+ flex-direction:column;
1198
+ padding-top:var(--tds-page-header-padding-y);
1199
+ color:var(--tds-page-header-color);
1200
+ background:var(--tds-page-header-background-color);
1201
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1072
1202
  }
1073
1203
 
1074
- .tds-sidenav-item :is(a,button){
1075
- position:relative;
1076
- display:flex;
1077
- gap:12px;
1078
- align-items:center;
1079
- width:100%;
1080
- padding:12px;
1081
- overflow:hidden;
1082
- font-size:var(--t-font-size-sm);
1083
- line-height:18px;
1084
- color:var(--t-text-color-headline);
1085
- white-space:nowrap;
1086
- text-decoration:none;
1087
- -webkit-appearance:none;
1088
- -moz-appearance:none;
1089
- appearance:none;
1090
- cursor:pointer;
1091
- background-color:var(--tds-sidenav-item-background, transparent);
1092
- border:0;
1093
- border-radius:var(--t-border-radius);
1094
- transition:var(--tds-sidenav-item-transition);
1204
+ .tds-page-header:not(.has-nav){
1205
+ padding-bottom:var(--tds-page-header-padding-y);
1095
1206
  }
1096
1207
 
1097
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1098
- display:block;
1099
- flex:1;
1100
- overflow:hidden;
1101
- text-overflow:ellipsis;
1102
- text-align:left;
1103
- white-space:nowrap;
1104
- }
1105
-
1106
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1107
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1108
- color:var(--t-text-color-headline);
1109
- text-decoration:none;
1110
- }
1111
-
1112
- :is(.tds-sidenav-item :is(a,button)):active{
1113
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1114
- }
1208
+ .tds-page-header.inactive{
1209
+ background:var(--tds-page-header-background-color-inactive);
1210
+ }
1115
1211
 
1116
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1117
- overflow:hidden;
1118
- color:var(--tds-sidenav-item-icon-color);
1119
- }
1212
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1213
+ width:100%;
1214
+ }
1120
1215
 
1121
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1122
- display:block;
1123
- width:var(--tds-sidenav-item-icon-size);
1124
- height:var(--tds-sidenav-item-icon-size);
1125
- }
1216
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1217
+ display:flex;
1218
+ flex-flow:row wrap;
1219
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1220
+ align-items:flex-start;
1221
+ justify-content:flex-start;
1222
+ min-width:0;
1223
+ }
1126
1224
 
1127
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1128
- --tds-sidenav-indent:19px;
1225
+ :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{
1226
+ display:flex;
1227
+ gap:var(--tds-page-header-nav-gap);
1228
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1229
+ margin:0 0 -1px;
1230
+ overflow:auto;
1231
+ list-style:none;
1232
+ background:var(--tds-page-header-nav-background);
1129
1233
  }
1130
1234
 
1131
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1132
- visibility:visible;
1133
- block-size:auto;
1134
- opacity:1;
1235
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1236
+ position:relative;
1237
+ display:inline-flex;
1238
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1239
+ font-size:var(--t-font-size-sm);
1240
+ line-height:22px;
1241
+ color:var(--tds-page-header-nav-item-color);
1242
+ white-space:nowrap;
1243
+ text-decoration:none;
1244
+ -webkit-appearance:none;
1245
+ -moz-appearance:none;
1246
+ appearance:none;
1247
+ cursor:pointer;
1248
+ outline-offset:-2px;
1249
+ background-color:var(--tds-page-header-nav-item-background-color);
1250
+ background-clip:padding-box;
1251
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1252
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1253
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1135
1254
  }
1136
1255
 
1137
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1138
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1139
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1140
-
1141
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1142
- font-weight:var(--t-font-weight-semibold);
1143
- }
1256
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1257
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1258
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1259
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1260
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1261
+ }
1144
1262
 
1145
- .tds-sidenav-item:has(.tds-sidenav-section){
1146
- display:flex;
1147
- flex-direction:column;
1148
- gap:var(--t-spacing-half);
1149
- }
1263
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1264
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1265
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1266
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1267
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1268
+ }
1150
1269
 
1151
- .tds-sidenav-item .tds-sidenav-section-list{
1152
- --tds-sidenav-item-depth:1;
1153
- gap:0;
1154
- }
1270
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1271
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1272
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1273
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1274
+ }
1155
1275
 
1156
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1157
- visibility:hidden;
1158
- block-size:0;
1159
- overflow-y:clip;
1160
- opacity:0;
1161
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1162
- }
1276
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1277
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1278
+ color:var(--tds-page-header-nav-item-color-disabled);
1279
+ cursor:not-allowed;
1280
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1281
+ opacity:1;
1282
+ }
1163
1283
 
1164
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1165
- --tds-sidenav-item-depth:2;
1166
- }
1284
+ @media (min-width: 600px){
1285
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1286
+ position:absolute;
1287
+ inset:auto -1px -1px;
1288
+ height:1px;
1289
+ pointer-events:none;
1290
+ content:"";
1291
+ background-color:var(--tds-page-header-bottom-border-color);
1292
+ }
1293
+ }
1167
1294
 
1168
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1169
- min-height:var(--t-element-size-2xl);
1170
- padding-block:9px;
1171
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1172
- line-height:1;
1173
- background-color:transparent;
1295
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1296
+ position:relative;
1174
1297
  }
1175
1298
 
1176
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1177
- position:absolute;
1178
- top:0;
1179
- bottom:0;
1180
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1181
- width:2px;
1182
- content:"";
1183
- background-color:var(--tds-sidenav-item-nested-border-color);
1184
- transition:var(--tds-sidenav-item-transition);
1299
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1300
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1301
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1185
1302
  }
1186
1303
 
1187
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1304
+ :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{
1188
1305
  position:absolute;
1189
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1190
- z-index:-1;
1191
- height:100%;
1306
+ top:-5px;
1307
+ right:-2px;
1308
+ width:10px;
1309
+ height:10px;
1192
1310
  content:"";
1193
- background-color:var(--tds-sidenav-item-nested-background);
1194
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1195
- transition:var(--tds-sidenav-item-transition);
1196
- }
1197
-
1198
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1199
- display:block;
1200
- text-align:left;
1201
- white-space:normal;
1202
- }
1203
-
1204
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1205
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1206
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1311
+ background:var(--tds-page-header-nav-item-indicator-color);
1312
+ border-radius:50%;
1207
1313
  }
1208
1314
 
1209
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1210
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1315
+ @media (prefers-reduced-motion: no-preference){
1316
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1317
+ animation:indicator-pulse 1.25s ease infinite;
1318
+ }
1211
1319
  }
1212
1320
 
1213
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1214
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1215
- font-weight:var(--t-font-weight-medium);
1216
- }
1217
-
1218
- .tds-sidenav-responsive-header{
1321
+ .tds-page-header__title-bar{
1219
1322
  display:flex;
1220
- gap:var(--t-spacing-2);
1221
- align-items:center;
1222
- width:100%;
1323
+ flex-direction:column;
1324
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1325
+ align-items:flex-start;
1326
+ justify-content:space-between;
1327
+ padding:0 var(--tds-page-header-padding-x);
1223
1328
  }
1224
1329
 
1225
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1226
- order:0;
1227
- }
1228
-
1229
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1230
- flex:1;
1231
- order:1;
1232
- margin:0;
1233
- font-size:var(--t-font-size-lg);
1234
- font-weight:var(--t-font-weight-medium);
1235
- color:var(--t-text-color-headline);
1330
+ .tds-page-header--profile > .tds-page-header__title-bar{
1331
+ align-items:center;
1236
1332
  }
1237
1333
 
1238
- @media (max-width: 719px){
1239
- .tds-sidenav-collapse{
1240
- z-index:10001;
1241
- display:none;
1242
- max-width:min(448px, calc(100vw - 48px));
1243
- padding:0;
1244
- margin:12px 0;
1245
- position-area:bottom span-right;
1246
- overflow:hidden;
1247
- outline:0;
1248
- background:var(--t-surface-color-card);
1249
- border:0;
1250
- border-radius:6px;
1251
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1252
- opacity:var(--tds-sidenav-collapse-open-opacity);
1253
- transform:var(--tds-sidenav-collapse-open-transform);
1254
- transition:var(--tds-sidenav-collapse-transition-enter);
1255
- will-change:transform;
1256
- }
1334
+ .tds-page-header__primary{
1335
+ width:100%;
1336
+ }
1257
1337
 
1258
- .tds-sidenav-scroll-container{
1259
- --webkit-overflow-scrolling:touch;
1260
- display:block;
1261
- width:100%;
1262
- height:-moz-fit-content;
1263
- height:fit-content;
1264
- padding:var(--t-spacing-2);
1265
- overflow-y:auto;
1338
+ .tds-page-header__primary h1{
1339
+ margin:0;
1340
+ font-size:var(--tds-page-header-headline-font-size);
1341
+ font-weight:var(--t-font-weight-normal);
1342
+ line-height:32px;
1343
+ color:var(--tds-page-header-headline-color);
1344
+ overflow-wrap:break-word;
1266
1345
  }
1267
1346
 
1268
- .tds-sidenav-item :is(a, button) :is(.prefix){
1269
- display:none;
1347
+ @media (min-width: 960px){
1348
+ .tds-page-header__primary{
1349
+ flex:1 1 max-content;
1350
+ width:auto;
1351
+ min-width:0;
1352
+ max-width:100%;
1270
1353
  }
1271
- @supports selector(:popover-open){
1272
- .tds-sidenav-collapse:popover-open{
1273
- display:flex;
1274
- }
1275
-
1276
- .tds-sidenav-collapse:not(:popover-open){
1277
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1278
- transition:var(--tds-sidenav-collapse-transition-exit);
1279
- }
1280
1354
 
1281
- @starting-style{
1282
- .tds-sidenav-collapse:popover-open{
1283
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1284
- transform:var(--tds-sidenav-collapse-closed-transform);
1285
- }
1286
- }
1355
+ .tds-page-header__title-bar,
1356
+ .tds-page-header--profile .tds-page-header__title-bar{
1357
+ flex-flow:row nowrap;
1358
+ row-gap:12px;
1359
+ align-items:flex-start;
1287
1360
  }
1288
- @supports not selector(:popover-open){
1289
- .tds-sidenav-collapse.\:popover-open{
1290
- display:flex;
1361
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1362
+ width:auto;
1291
1363
  }
1292
1364
 
1293
- .tds-sidenav-collapse:not(.\:popover-open){
1294
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1295
- transition:var(--tds-sidenav-collapse-transition-exit);
1365
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1366
+ justify-content:flex-end;
1296
1367
  }
1297
- }
1298
1368
  }
1299
1369
 
1300
- @media (min-width: 720px){
1301
- .tds-sidenav-responsive-header{
1302
- display:none;
1303
- }
1370
+ .tds-page-header-phone,
1371
+ .tds-page-header-email{
1372
+ color:var(--tds-page-header-color);
1373
+ white-space:nowrap;
1374
+ }
1375
+ .tds-page-header-email{
1376
+ max-width:100%;
1377
+ overflow:hidden;
1378
+ text-overflow:ellipsis;
1304
1379
  }
1305
1380
 
1306
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1307
- display:none;
1308
- }
1309
-
1310
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1311
- display:block;
1312
- }
1381
+ @keyframes indicator-pulse{
1382
+ 0%{
1383
+ opacity:.3;
1384
+ transform:scale(.9);
1385
+ }
1313
1386
 
1314
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1315
- display:flex;
1316
- flex-direction:column;
1317
- }
1387
+ 100%{
1388
+ opacity:0;
1389
+ transform:scale(1.75);
1390
+ }
1391
+ }
1318
1392
 
1319
1393
  .tds-button-group{
1320
1394
  display:inline-flex;
@@ -1358,80 +1432,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1358
1432
  border-end-end-radius:var(--tds-btn-border-radius);
1359
1433
  }
1360
1434
 
1361
- .tds-checkbox-group{
1362
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1363
- --tds-checkbox-group-line-height:1.4;
1364
- --tds-checkbox-group-gap:var(--t-spacing-1);
1365
-
1366
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1367
- --tds-checkbox-group-description-line-height:1.35;
1368
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1369
- --tds-checkbox-group-description-invalid-icon-display:none;
1370
- display:flex;
1371
- flex-direction:column;
1372
- gap:0;
1373
- padding:0;
1374
- margin:0;
1375
-
1376
- font-size:var(--tds-checkbox-group-font-size);
1377
- line-height:var(--tds-checkbox-group-line-height);
1378
- border:0;
1379
- }
1380
-
1381
- .tds-checkbox-group legend{
1382
- float:left;
1383
- padding:0;
1384
- margin:0;
1385
- }
1386
-
1387
- .tds-checkbox-group[aria-invalid="true"]{
1388
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1389
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1390
- }
1391
-
1392
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1393
- margin-left:.25ch;
1394
- color:var(--t-text-color-status-error);
1395
- content:"*";
1396
- }
1397
-
1398
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1399
- content:none;
1400
- }
1401
-
1402
- .tds-checkbox-group-fields{
1403
- display:flex;
1404
- flex-direction:column;
1405
- gap:var(--tds-checkbox-group-gap);
1406
- align-items:flex-start;
1407
- margin-top:var(--t-spacing-1);
1408
- }
1409
-
1410
- .tds-checkbox-group-description{
1411
- display:flex;
1412
- gap:var(--t-spacing-half);
1413
- align-items:flex-start;
1414
- margin:var(--t-spacing-fourth) 0 0;
1415
- font-size:var(--tds-checkbox-group-description-font-size);
1416
- line-height:var(--tds-checkbox-group-description-line-height);
1417
- color:var(--tds-checkbox-group-description-color);
1418
- cursor:text;
1419
- }
1420
-
1421
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1422
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1423
- flex-shrink:0;
1424
- margin-top:calc(.5lh - .5em);
1425
- line-height:var(--tds-checkbox-group-description-line-height);
1426
- }
1427
-
1428
- .tds-checkbox-group--sm{
1429
- --tds-checkbox-group-line-height:1.35;
1430
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1431
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1432
- --tds-checkbox-group-description-line-height:1.3;
1433
- }
1434
-
1435
1435
  .tds-checkbox{
1436
1436
  --tds-checkbox-font-size:var(--t-font-size-md);
1437
1437
  --tds-checkbox-cursor:pointer;
@@ -1694,46 +1694,167 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1694
1694
  }
1695
1695
  }
1696
1696
 
1697
- .tds-popover{
1698
- max-inline-size:24rem;
1699
- overflow:auto;
1700
- overscroll-behavior:none;
1701
- outline:0;
1702
- scrollbar-color:#0004 var(--t-surface-color-card);
1703
- scrollbar-width:thin;
1704
- background:var(--t-surface-color-card);
1705
- background-clip:padding-box;
1706
- border:1px solid var(--t-border-color);
1707
- border-radius:var(--t-border-radius);
1708
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1697
+ .tds-modal-overlay{
1698
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1699
+
1700
+ position:fixed;
1701
+ inset:0;
1702
+ z-index:1000;
1703
+ display:grid;
1704
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1705
+ justify-items:center;
1706
+ overflow-y:auto;
1707
+ background:hsl(0 0% 0% / 40%);
1709
1708
  }
1710
1709
 
1711
- @media (prefers-reduced-motion: no-preference){
1712
- .tds-popover[data-entering]{
1713
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1714
- }
1710
+ .tds-modal-overlay[data-entering]{
1711
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1712
+ }
1715
1713
 
1716
- .tds-popover[data-exiting]{
1717
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1718
- }
1714
+ .tds-modal-overlay[data-exiting]{
1715
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1716
+ }
1719
1717
 
1720
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1721
- will-change:opacity, transform;
1722
- }
1718
+ @keyframes tds-modal-overlay-fade{
1719
+ from{
1720
+ opacity:0;
1721
+ }
1722
+ }
1723
1723
 
1724
- @keyframes tds-popover{
1725
- from{
1726
- opacity:0;
1727
- transform:translateY(-8px);
1728
- }
1724
+ .tds-modal-frame{
1725
+ --tds-modal-width:600px;
1726
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1727
+ display:flex;
1728
+
1729
+ grid-row:2;
1730
+ justify-content:center;
1731
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1732
+ }
1733
+
1734
+ .tds-modal-frame[data-entering]{
1735
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1736
+ }
1737
+
1738
+ .tds-modal-frame[data-exiting]{
1739
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1729
1740
  }
1741
+
1742
+ .tds-modal-frame--sm{
1743
+ --tds-modal-width:400px;
1730
1744
  }
1731
1745
 
1732
- .tds-popover-content{
1746
+ .tds-modal-frame--lg{
1747
+ --tds-modal-width:800px;
1748
+ }
1749
+
1750
+ .tds-modal-frame--xl{
1751
+ --tds-modal-width:1000px;
1752
+ }
1753
+
1754
+ @keyframes tds-modal-zoom{
1755
+ from{
1756
+ opacity:0;
1757
+ scale:.96;
1758
+ }
1759
+ }
1760
+
1761
+ @media (prefers-reduced-motion: reduce){
1762
+ .tds-modal-overlay[data-entering],
1763
+ .tds-modal-overlay[data-exiting],
1764
+ .tds-modal-frame[data-entering],
1765
+ .tds-modal-frame[data-exiting]{
1766
+ animation:none;
1767
+ }
1768
+ }
1769
+
1770
+ .tds-modal{
1733
1771
  display:flex;
1734
1772
  flex-direction:column;
1735
- padding:var(--t-spacing-1);
1736
- outline:0;
1773
+ width:100%;
1774
+ padding-block-start:var(--t-spacing-3);
1775
+ padding-inline:0;
1776
+ background:var(--t-surface-color-card);
1777
+
1778
+ border:0;
1779
+ border-radius:var(--t-border-radius-lg);
1780
+ box-shadow:0 4px 18px 0 #0003;
1781
+ }
1782
+
1783
+ .tds-modal:focus{
1784
+ outline:none;
1785
+ }
1786
+
1787
+ .tds-modal-header{
1788
+ display:grid;
1789
+ grid-template-columns:1fr auto;
1790
+ -moz-column-gap:var(--t-spacing-2);
1791
+ column-gap:var(--t-spacing-2);
1792
+ padding-block:0;
1793
+ padding-inline:var(--t-spacing-4);
1794
+ }
1795
+
1796
+ .tds-modal-title{
1797
+ grid-row:1;
1798
+ grid-column:1;
1799
+ margin:0;
1800
+ font-size:var(--t-font-size-2xl);
1801
+ font-weight:var(--t-font-weight-medium);
1802
+ line-height:140%;
1803
+ color:var(--t-text-color-headline);
1804
+ }
1805
+
1806
+ .tds-modal-subtitle{
1807
+ grid-row:2;
1808
+ grid-column:1;
1809
+ margin:0;
1810
+ font-size:var(--t-font-size-md);
1811
+ font-weight:var(--t-font-weight-medium);
1812
+ line-height:140%;
1813
+ color:var(--t-text-color-secondary);
1814
+ }
1815
+
1816
+ .tds-modal-close{
1817
+ grid-row:1;
1818
+ grid-column:2;
1819
+ align-self:center;
1820
+ color:var(--t-icon-color-dim);
1821
+ }
1822
+
1823
+ .tds-modal-body{
1824
+ padding-block:var(--t-spacing-3);
1825
+ padding-inline:var(--t-spacing-4);
1826
+ }
1827
+
1828
+ .tds-modal-body--full-width{
1829
+ padding-inline:0;
1830
+ }
1831
+
1832
+ .tds-modal-footer{
1833
+ display:flex;
1834
+ gap:var(--t-spacing-2);
1835
+ align-items:center;
1836
+ justify-content:flex-end;
1837
+ padding-block:var(--t-spacing-3);
1838
+ padding-inline:var(--t-spacing-4);
1839
+ border-top:1px solid var(--t-border-color);
1840
+ }
1841
+
1842
+ .tds-modal-footer > [slot="start"]{
1843
+ margin-inline-end:auto;
1844
+ }
1845
+
1846
+ @media (min-width: 720px){
1847
+ .tds-modal-overlay{
1848
+ --tds-modal-min-margin-block:0;
1849
+ }
1850
+
1851
+ .tds-modal-footer{
1852
+ position:sticky;
1853
+ bottom:0;
1854
+ background:var(--t-surface-color-card);
1855
+ border-end-start-radius:var(--t-border-radius-lg);
1856
+ border-end-end-radius:var(--t-border-radius-lg);
1857
+ }
1737
1858
  }
1738
1859
 
1739
1860
  .tds-radio-group{
@@ -1819,110 +1940,47 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1819
1940
  --tds-radio-group-description-line-height:1.3;
1820
1941
  }
1821
1942
 
1822
- .tds-input:has(textarea){
1823
- --tds-input-padding-block:6px;
1824
- --tds-input-resizer-size:var(--t-element-size-sm);
1825
- --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");
1826
- }
1827
-
1828
- @supports (x: attr(x type(*))){
1829
-
1830
- .tds-input textarea{
1831
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1943
+ .tds-popover{
1944
+ max-inline-size:24rem;
1945
+ overflow:auto;
1946
+ overscroll-behavior:none;
1947
+ outline:0;
1948
+ scrollbar-color:#0004 var(--t-surface-color-card);
1949
+ scrollbar-width:thin;
1950
+ background:var(--t-surface-color-card);
1951
+ background-clip:padding-box;
1952
+ border:1px solid var(--t-border-color);
1953
+ border-radius:var(--t-border-radius);
1954
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1832
1955
  }
1833
- }
1834
1956
 
1835
- .tds-input.tds-textarea--resize-vertical textarea{
1836
- resize:vertical;
1957
+ @media (prefers-reduced-motion: no-preference){
1958
+ .tds-popover[data-entering]{
1959
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1837
1960
  }
1838
1961
 
1839
- .tds-input.tds-textarea--resize-none textarea{
1840
- resize:none;
1962
+ .tds-popover[data-exiting]{
1963
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1841
1964
  }
1842
1965
 
1843
- .tds-input.tds-textarea--resize-auto textarea{
1844
- resize:vertical;
1966
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1967
+ will-change:opacity, transform;
1845
1968
  }
1846
1969
 
1847
- @supports (field-sizing: content){
1848
- .tds-input.tds-textarea--resize-auto textarea{
1849
- field-sizing:content;
1850
- resize:none;
1851
- }
1970
+ @keyframes tds-popover{
1971
+ from{
1972
+ opacity:0;
1973
+ transform:translateY(-8px);
1852
1974
  }
1853
-
1854
- .tds-input textarea{
1855
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1856
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1857
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1858
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1859
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1860
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1861
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1862
- --tds-input-scrollbar-thumb-border-radius:999px;
1863
- --tds-input-scrollbar-thumb-border-width:3px;
1864
- --tds-input-scrollbar-track-margin-block:.125rem;
1865
- scrollbar-color:initial;
1866
- transition-timing-function:var(--t-ease-in-out);
1867
- transition-duration:var(--t-duration-200);
1868
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1975
+ }
1869
1976
  }
1870
1977
 
1871
- @media (pointer: fine){
1872
- :is(.tds-input textarea)::-webkit-scrollbar{
1873
- width:12px;
1874
- height:12px;
1875
- cursor:default;
1876
- }
1877
-
1878
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1879
- cursor:default;
1880
- background:var(--tds-input-scrollbar-thumb-color);
1881
- background-clip:content-box;
1882
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1883
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1884
- }
1885
-
1886
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1887
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1888
- }
1889
-
1890
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1891
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1892
- }
1893
-
1894
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1895
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1896
- }
1897
-
1898
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1899
- background:var(--tds-input-scrollbar-surface-color);
1900
- }
1901
-
1902
- :is(.tds-input textarea)::-webkit-resizer{
1903
- background:var(--tds-input-resizer-icon) no-repeat;
1904
- background-position:right bottom;
1905
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1906
- }
1907
-
1908
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1909
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1910
- cursor:default;
1911
- }
1912
-
1913
- @supports (-moz-appearance: none){
1914
- :is(.tds-input textarea){
1915
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1916
- scrollbar-width:thin;
1917
- }
1918
-
1919
- @media (hover){
1920
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1921
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1922
- }
1923
- }
1924
- }
1925
- }
1978
+ .tds-popover-content{
1979
+ display:flex;
1980
+ flex-direction:column;
1981
+ padding:var(--t-spacing-1);
1982
+ outline:0;
1983
+ }
1926
1984
 
1927
1985
  .tds-radio{
1928
1986
  --tds-radio-font-size:var(--t-font-size-md);
@@ -2039,186 +2097,128 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2039
2097
  .tds-radio-description{
2040
2098
  display:flex;
2041
2099
  grid-area:2 / 2;
2042
- gap:var(--t-spacing-half);
2043
- align-items:flex-start;
2044
- padding-inline-start:var(--t-spacing-1);
2045
- margin:0;
2046
- font-size:var(--tds-radio-description-font-size);
2047
- line-height:var(--tds-radio-description-line-height);
2048
- color:var(--tds-radio-description-color);
2049
- cursor:text;
2050
- }
2051
-
2052
- .tds-radio--sm{
2053
- --tds-radio-line-height:1.35;
2054
- --tds-radio-input-size:var(--t-element-size-sm);
2055
- --tds-radio-font-size:var(--t-font-size-sm);
2056
- --tds-radio-description-font-size:var(--t-font-size-xs);
2057
- --tds-radio-description-line-height:1.3;
2058
- }
2059
-
2060
- .tds-modal-overlay{
2061
- --tds-modal-min-margin-block:var(--t-spacing-3);
2062
-
2063
- position:fixed;
2064
- inset:0;
2065
- z-index:1000;
2066
- display:grid;
2067
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
2068
- justify-items:center;
2069
- overflow-y:auto;
2070
- background:hsl(0 0% 0% / 40%);
2071
- }
2072
-
2073
- .tds-modal-overlay[data-entering]{
2074
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
2075
- }
2076
-
2077
- .tds-modal-overlay[data-exiting]{
2078
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
2079
- }
2080
-
2081
- @keyframes tds-modal-overlay-fade{
2082
- from{
2083
- opacity:0;
2084
- }
2085
- }
2086
-
2087
- .tds-modal-frame{
2088
- --tds-modal-width:600px;
2089
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
2090
- display:flex;
2091
-
2092
- grid-row:2;
2093
- justify-content:center;
2094
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
2095
- }
2096
-
2097
- .tds-modal-frame[data-entering]{
2098
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
2099
- }
2100
-
2101
- .tds-modal-frame[data-exiting]{
2102
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2103
- }
2104
-
2105
- .tds-modal-frame--sm{
2106
- --tds-modal-width:400px;
2107
- }
2108
-
2109
- .tds-modal-frame--lg{
2110
- --tds-modal-width:800px;
2111
- }
2112
-
2113
- .tds-modal-frame--xl{
2114
- --tds-modal-width:1000px;
2115
- }
2116
-
2117
- @keyframes tds-modal-zoom{
2118
- from{
2119
- opacity:0;
2120
- scale:.96;
2121
- }
2122
- }
2123
-
2124
- @media (prefers-reduced-motion: reduce){
2125
- .tds-modal-overlay[data-entering],
2126
- .tds-modal-overlay[data-exiting],
2127
- .tds-modal-frame[data-entering],
2128
- .tds-modal-frame[data-exiting]{
2129
- animation:none;
2130
- }
2131
- }
2132
-
2133
- .tds-modal{
2134
- display:flex;
2135
- flex-direction:column;
2136
- width:100%;
2137
- padding-block-start:var(--t-spacing-3);
2138
- padding-inline:0;
2139
- background:var(--t-surface-color-card);
2140
-
2141
- border:0;
2142
- border-radius:var(--t-border-radius-lg);
2143
- box-shadow:0 4px 18px 0 #0003;
2144
- }
2145
-
2146
- .tds-modal:focus{
2147
- outline:none;
2148
- }
2149
-
2150
- .tds-modal-header{
2151
- display:grid;
2152
- grid-template-columns:1fr auto;
2153
- -moz-column-gap:var(--t-spacing-2);
2154
- column-gap:var(--t-spacing-2);
2155
- padding-block:0;
2156
- padding-inline:var(--t-spacing-4);
2157
- }
2158
-
2159
- .tds-modal-title{
2160
- grid-row:1;
2161
- grid-column:1;
2162
- margin:0;
2163
- font-size:var(--t-font-size-2xl);
2164
- font-weight:var(--t-font-weight-medium);
2165
- line-height:140%;
2166
- color:var(--t-text-color-headline);
2167
- }
2168
-
2169
- .tds-modal-subtitle{
2170
- grid-row:2;
2171
- grid-column:1;
2100
+ gap:var(--t-spacing-half);
2101
+ align-items:flex-start;
2102
+ padding-inline-start:var(--t-spacing-1);
2172
2103
  margin:0;
2173
- font-size:var(--t-font-size-md);
2174
- font-weight:var(--t-font-weight-medium);
2175
- line-height:140%;
2176
- color:var(--t-text-color-secondary);
2104
+ font-size:var(--tds-radio-description-font-size);
2105
+ line-height:var(--tds-radio-description-line-height);
2106
+ color:var(--tds-radio-description-color);
2107
+ cursor:text;
2177
2108
  }
2178
2109
 
2179
- .tds-modal-close{
2180
- grid-row:1;
2181
- grid-column:2;
2182
- align-self:center;
2183
- color:var(--t-icon-color-dim);
2110
+ .tds-radio--sm{
2111
+ --tds-radio-line-height:1.35;
2112
+ --tds-radio-input-size:var(--t-element-size-sm);
2113
+ --tds-radio-font-size:var(--t-font-size-sm);
2114
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2115
+ --tds-radio-description-line-height:1.3;
2184
2116
  }
2185
2117
 
2186
- .tds-modal-body{
2187
- padding-block:var(--t-spacing-3);
2188
- padding-inline:var(--t-spacing-4);
2118
+ .tds-input:has(textarea){
2119
+ --tds-input-padding-block:6px;
2120
+ --tds-input-resizer-size:var(--t-element-size-sm);
2121
+ --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");
2189
2122
  }
2190
2123
 
2191
- .tds-modal-body--full-width{
2192
- padding-inline:0;
2193
- }
2124
+ @supports (x: attr(x type(*))){
2194
2125
 
2195
- .tds-modal-footer{
2196
- display:flex;
2197
- gap:var(--t-spacing-2);
2198
- align-items:center;
2199
- justify-content:flex-end;
2200
- padding-block:var(--t-spacing-3);
2201
- padding-inline:var(--t-spacing-4);
2202
- border-top:1px solid var(--t-border-color);
2126
+ .tds-input textarea{
2127
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2203
2128
  }
2129
+ }
2204
2130
 
2205
- .tds-modal-footer > [slot="start"]{
2206
- margin-inline-end:auto;
2131
+ .tds-input.tds-textarea--resize-vertical textarea{
2132
+ resize:vertical;
2133
+ }
2134
+
2135
+ .tds-input.tds-textarea--resize-none textarea{
2136
+ resize:none;
2137
+ }
2138
+
2139
+ .tds-input.tds-textarea--resize-auto textarea{
2140
+ resize:vertical;
2141
+ }
2142
+
2143
+ @supports (field-sizing: content){
2144
+ .tds-input.tds-textarea--resize-auto textarea{
2145
+ field-sizing:content;
2146
+ resize:none;
2147
+ }
2148
+ }
2149
+
2150
+ .tds-input textarea{
2151
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2152
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2153
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2154
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2155
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2156
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2157
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2158
+ --tds-input-scrollbar-thumb-border-radius:999px;
2159
+ --tds-input-scrollbar-thumb-border-width:3px;
2160
+ --tds-input-scrollbar-track-margin-block:.125rem;
2161
+ scrollbar-color:initial;
2162
+ transition-timing-function:var(--t-ease-in-out);
2163
+ transition-duration:var(--t-duration-200);
2164
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2207
2165
  }
2208
2166
 
2209
- @media (min-width: 720px){
2210
- .tds-modal-overlay{
2211
- --tds-modal-min-margin-block:0;
2212
- }
2167
+ @media (pointer: fine){
2168
+ :is(.tds-input textarea)::-webkit-scrollbar{
2169
+ width:12px;
2170
+ height:12px;
2171
+ cursor:default;
2172
+ }
2213
2173
 
2214
- .tds-modal-footer{
2215
- position:sticky;
2216
- bottom:0;
2217
- background:var(--t-surface-color-card);
2218
- border-end-start-radius:var(--t-border-radius-lg);
2219
- border-end-end-radius:var(--t-border-radius-lg);
2174
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2175
+ cursor:default;
2176
+ background:var(--tds-input-scrollbar-thumb-color);
2177
+ background-clip:content-box;
2178
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2179
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2180
+ }
2181
+
2182
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2183
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2184
+ }
2185
+
2186
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2187
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2188
+ }
2189
+
2190
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2191
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2192
+ }
2193
+
2194
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2195
+ background:var(--tds-input-scrollbar-surface-color);
2196
+ }
2197
+
2198
+ :is(.tds-input textarea)::-webkit-resizer{
2199
+ background:var(--tds-input-resizer-icon) no-repeat;
2200
+ background-position:right bottom;
2201
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2202
+ }
2203
+
2204
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2205
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2206
+ cursor:default;
2207
+ }
2208
+
2209
+ @supports (-moz-appearance: none){
2210
+ :is(.tds-input textarea){
2211
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2212
+ scrollbar-width:thin;
2213
+ }
2214
+
2215
+ @media (hover){
2216
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2217
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2218
+ }
2219
+ }
2220
+ }
2220
2221
  }
2221
- }
2222
2222
 
2223
2223
  .tds-toggle-switch{
2224
2224
  --tds-toggle-switch-font-size:var(--t-font-size-md);
@@ -4080,128 +4080,184 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4080
4080
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
4081
4081
  }
4082
4082
 
4083
- .tds-segmented-control{
4084
- --tds-segmented-control-font-size:var(--t-font-size-md);
4085
- --tds-segmented-control-padding:var(--t-spacing-half);
4086
- --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4087
- --tds-segmented-control-icon-size:.66666667lh;
4088
- --tds-segmented-control-border-radius:var(--t-border-radius-md);
4089
- --tds-segmented-control-max-width:280px;
4090
- --tds-segmented-control-min-height:var(--t-container-size-md);
4091
- --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4092
- --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4093
- --tds-segmented-control-width:fit-content;
4083
+ .tds-data-table-filters-shelf{
4084
+ height:auto;
4085
+ overflow:hidden;
4086
+ transition:height var(--t-duration-300) var(--t-ease-out);
4087
+ }
4094
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{
4095
4114
  display:flex;
4096
- flex-direction:column;
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;
4097
4123
  gap:var(--t-spacing-half);
4098
- align-items:flex-start;
4099
- width:var(--tds-segmented-control-width);
4100
4124
  }
4101
4125
 
4102
- .tds-segmented-control--sm{
4103
- --tds-segmented-control-font-size:var(--t-font-size-sm);
4104
- --tds-segmented-control-padding-inline:7px;
4105
- --tds-segmented-control-min-height:var(--t-container-size-sm);
4126
+ .tds-data-table-filters-active-actions{
4127
+ flex-shrink:0;
4106
4128
  }
4107
4129
 
4108
- .tds-segmented-control--full-width{
4109
- --tds-segmented-control-width:100%;
4110
- --tds-segmented-control-max-width:none;
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);
4111
4156
  }
4112
4157
 
4113
- .tds-segmented-control--full-width .tds-segmented-control-segment{
4114
- flex:1 1 0;
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);
4115
4191
  }
4116
4192
 
4117
- .tds-segmented-control-label{
4118
- font-size:var(--tds-segmented-control-font-size);
4119
- font-weight:var(--t-font-weight-normal);
4120
- color:var(--t-text-color-headline);
4121
- }
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);
4122
4196
 
4123
- .tds-segmented-control-label--hidden{
4124
- position:absolute;
4125
- width:1px;
4126
- height:1px;
4127
- overflow:hidden;
4128
- white-space:nowrap;
4129
- clip-path:inset(50%);
4197
+ color:var(--t-text-color);
4198
+ background-color:var(--t-fill-color-status-neutral-dim);
4130
4199
  }
4131
4200
 
4132
- .tds-segmented-control-track{
4133
- display:inline-flex;
4134
- gap:var(--tds-segmented-control-track-gap);
4135
- width:var(--tds-segmented-control-width);
4136
- padding:var(--tds-segmented-control-padding);
4137
- background-color:var(--t-form-background-color);
4138
- border:1px solid var(--t-border-color);
4139
- border-radius:var(--tds-segmented-control-border-radius);
4140
- }
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
+ }
4141
4205
 
4142
- .tds-segmented-control-segment{
4143
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
4144
- --tds-segmented-control-background-color:transparent;
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);
4145
4209
 
4146
- display:inline-flex;
4147
- gap:var(--t-spacing-1);
4148
- align-items:center;
4149
- justify-content:center;
4150
- max-width:var(--tds-segmented-control-max-width);
4151
- min-height:var(--tds-segmented-control-min-height);
4152
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
4153
- padding-inline:var(--tds-segmented-control-padding-inline);
4154
- font:inherit;
4155
- font-size:var(--tds-segmented-control-font-size);
4156
- color:var(--tds-segmented-control-color);
4157
- text-align:center;
4158
- cursor:pointer;
4159
- -webkit-user-select:none;
4160
- -moz-user-select:none;
4161
- user-select:none;
4162
- background-color:var(--tds-segmented-control-background-color);
4163
- border:0;
4164
- border-radius:var(--t-border-radius-sm);
4165
- transition-timing-function:var(--t-ease-in-out);
4166
- transition-duration:var(--t-duration-200);
4167
- transition-property:color, background-color;
4210
+ color:var(--t-text-color-status-error);
4211
+ background-color:var(--t-fill-color-status-error-dim);
4168
4212
  }
4169
4213
 
4170
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
4171
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4172
- }
4173
-
4174
- .tds-segmented-control-segment .symbol{
4175
- display:block;
4176
- flex-shrink:0;
4177
- width:var(--tds-segmented-control-icon-size);
4178
- height:var(--tds-segmented-control-icon-size);
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);
4179
4217
  }
4180
-
4181
- .tds-segmented-control-segment:focus-visible{
4182
- outline:var(--t-focus-ring-outline);
4183
- outline-offset:var(--t-focus-ring-offset);
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);
4184
4222
  }
4185
4223
 
4186
- .tds-segmented-control-segment[aria-checked="true"]{
4187
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
4188
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
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
+ }
4189
4228
 
4190
- cursor:default;
4229
+ @keyframes tds-data-table-filters-popover{
4230
+ from{
4231
+ opacity:0;
4232
+ }
4191
4233
  }
4234
+ }
4192
4235
 
4193
- .tds-segmented-control-segment:disabled{
4194
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
4195
- --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
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
+ }
4196
4241
 
4197
- pointer-events:none;
4198
- }
4242
+ .tds-data-table-filters-popover-label-operator{
4243
+ font-weight:var(--t-font-weight-normal);
4244
+ }
4199
4245
 
4200
- .tds-segmented-control-segment--interaction-subtle{
4201
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
4202
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
4203
- --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
4204
- --tds-segmented-control-background-color-disabled:transparent;
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);
4205
4261
  }
4206
4262
 
4207
4263
  .tds-data-table{
@@ -4635,28 +4691,102 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4635
4691
  margin:calc(-1 * var(--t-spacing-1));
4636
4692
  background-color:var(--t-form-background-color);
4637
4693
  }
4638
- .tds-data-table-popover:has(.tds-data-table-filter-controls-search-input-sticky){
4639
- scroll-padding-block-start:calc(var(--t-spacing-6));
4640
- }
4641
4694
 
4642
- .tds-data-table-filter-controls-search-input{
4643
- inline-size:100%;
4695
+ .tds-data-table-filter-controls-search-input-control{
4696
+ --_search-input-outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
4697
+ --_search-input-outline-offset:0;
4698
+
4699
+ display:flex;
4700
+ gap:var(--t-spacing-1);
4701
+ align-items:center;
4644
4702
  min-block-size:var(--t-container-size-md);
4645
4703
  padding-inline:var(--t-spacing-1);
4646
4704
  font-size:var(--t-font-size-md);
4705
+ color:var(--t-form-color);
4706
+ outline:var(--t-focus-ring-width) solid transparent;
4707
+ outline-color:var(--_search-input-outline-color);
4708
+ outline-offset:var(--_search-input-outline-offset);
4647
4709
  background-color:var(--t-form-background-color);
4648
4710
  border:var(--t-form-border-width) solid var(--t-form-border-color);
4649
4711
  border-radius:var(--t-form-border-radius);
4712
+ transition-timing-function:var(--t-ease-in-out);
4713
+ transition-duration:var(--t-duration-200);
4714
+ transition-property:background-color, border-color, outline-color, outline-offset;
4650
4715
  }
4651
4716
 
4652
- .tds-data-table-filter-controls-search-input::-moz-placeholder{
4653
- color:var(--t-form-placeholder-color);
4717
+ .tds-data-table-filter-controls-search-input-control:hover:not(:has(input:focus)){
4718
+ border-color:var(--t-form-border-color-hover);
4654
4719
  }
4655
4720
 
4656
- .tds-data-table-filter-controls-search-input::placeholder{
4657
- color:var(--t-form-placeholder-color);
4721
+ .tds-data-table-filter-controls-search-input-control:has(input:focus){
4722
+ --_search-input-outline-color:var(--t-focus-ring-color);
4723
+ --_search-input-outline-offset:var(--t-focus-ring-offset);
4724
+
4725
+ border-color:var(--t-form-border-color-focus);
4726
+ }
4727
+
4728
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-icon{
4729
+ flex-shrink:0;
4730
+ inline-size:1em;
4731
+ color:var(--t-icon-color-dim);
4732
+ }
4733
+
4734
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input{
4735
+ flex:1;
4736
+ min-inline-size:0;
4737
+ padding:0;
4738
+ overflow:hidden;
4739
+ text-overflow:ellipsis;
4740
+ font-family:inherit;
4741
+ font-size:inherit;
4742
+ color:inherit;
4743
+ white-space:nowrap;
4744
+ -webkit-appearance:none;
4745
+ -moz-appearance:none;
4746
+ appearance:none;
4747
+ outline:0;
4748
+ background-color:transparent;
4749
+ border:0;
4750
+ }
4751
+
4752
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::-moz-placeholder{
4753
+ color:var(--t-form-placeholder-color);
4754
+ }
4755
+
4756
+ :is(.tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input)::placeholder{
4757
+ color:var(--t-form-placeholder-color);
4758
+ }
4759
+
4760
+ :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{
4761
+ -webkit-appearance:none;
4762
+ appearance:none;
4763
+ }
4764
+
4765
+ .tds-data-table-filter-controls-search-input-control .tds-data-table-filter-controls-search-input-clear-icon{
4766
+ inline-size:calc(var(--t-font-size-md) * .8);
4767
+ block-size:calc(var(--t-font-size-md) * .8);
4768
+ }
4769
+
4770
+ .tds-data-table-filter-controls-search-input-control .tds-btn{
4771
+ --tds-btn-color:var(--t-icon-color-dim);
4772
+ --tds-btn-padding-truncated-x:0;
4773
+ --_search-input-clear-button-visibility:hidden;
4774
+
4775
+ visibility:var(--_search-input-clear-button-visibility);
4776
+ flex-shrink:0;
4777
+ }
4778
+
4779
+ @media (prefers-reduced-motion: reduce){
4780
+
4781
+ .tds-data-table-filter-controls-search-input-control{
4782
+ transition-property:none;
4783
+ }
4658
4784
  }
4659
4785
 
4786
+ .tds-data-table-filter-controls-search-input-control--has-value:is(:hover, :has(input:focus)) .tds-btn{
4787
+ --_search-input-clear-button-visibility:visible;
4788
+ }
4789
+
4660
4790
  :is(.tds-data-table-filter-controls-list,.tds-data-table-filter-controls-submenu-list) .tds-dropdown-section-label{
4661
4791
  position:sticky;
4662
4792
  inset-block-start:var(--_label-sticky-block-start);
@@ -4673,6 +4803,14 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4673
4803
  margin-block-start:var(--t-spacing-1);
4674
4804
  }
4675
4805
 
4806
+ .tds-data-table-filter-controls-list[data-empty] .tds-dropdown-item{
4807
+ --tds-dropdown-item-color:var(--t-text-color-secondary);
4808
+ }
4809
+
4810
+ .tds-data-table-filter-controls-list .tds-dropdown-item{
4811
+ scroll-margin-block-start:var(--t-spacing-6);
4812
+ }
4813
+
4676
4814
  .tds-data-table-filter-controls-submenu-list{
4677
4815
  --_label-sticky-block-start:0;
4678
4816
  }
@@ -4703,6 +4841,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4703
4841
  --tds-data-table-filter-controls-submenu-chevron-color:var(--t-icon-color-dim);
4704
4842
 
4705
4843
  color:var(--tds-data-table-filter-controls-submenu-chevron-color);
4844
+ transform:scale(.8);
4706
4845
  }
4707
4846
 
4708
4847
  [data-open] .tds-data-table-filter-controls-submenu-chevron{
@@ -4711,179 +4850,255 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4711
4850
 
4712
4851
  @media (prefers-reduced-motion: no-preference){
4713
4852
 
4714
- .tds-data-table-filter-controls-submenu-chevron{
4715
- transition-timing-function:var(--t-ease-in-out);
4716
- transition-duration:var(--t-duration-200);
4717
- transition-property:color;
4718
- }
4853
+ .tds-data-table-filter-controls-submenu-chevron{
4854
+ transition-timing-function:var(--t-ease-in-out);
4855
+ transition-duration:var(--t-duration-200);
4856
+ transition-property:color;
4857
+ }
4858
+ }
4859
+
4860
+ .tds-currency-input-control{
4861
+ display:flex;
4862
+ gap:var(--t-spacing-half);
4863
+ align-items:center;
4864
+ inline-size:100%;
4865
+ min-block-size:var(--tds-field-min-height);
4866
+ padding-inline:var(--tds-field-padding-inline);
4867
+ font-size:var(--tds-field-font-size);
4868
+ color:var(--tds-field-color);
4869
+ cursor:text;
4870
+ outline:var(--t-focus-ring-width) solid transparent;
4871
+ background-color:var(--tds-field-background-color);
4872
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
4873
+ border-radius:var(--t-form-border-radius);
4874
+ transition-timing-function:var(--t-ease-in-out);
4875
+ transition-duration:var(--t-duration-200);
4876
+ transition-property:background-color, border-color, outline-color, outline-offset;
4877
+ }
4878
+
4879
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
4880
+ border-color:var(--tds-field-border-color-hover);
4881
+ }
4882
+
4883
+ .tds-currency-input-control:has(input:focus){
4884
+ outline-color:var(--t-focus-ring-color);
4885
+ outline-offset:var(--t-focus-ring-offset);
4886
+ border-color:var(--tds-field-border-color-active);
4887
+ }
4888
+
4889
+ .tds-currency-input-control input{
4890
+ flex:1;
4891
+ min-inline-size:0;
4892
+ padding:0;
4893
+ font-family:inherit;
4894
+ font-size:inherit;
4895
+ color:inherit;
4896
+ -webkit-appearance:none;
4897
+ -moz-appearance:none;
4898
+ appearance:none;
4899
+ outline:0;
4900
+ background-color:transparent;
4901
+ border:0;
4902
+ }
4903
+
4904
+ :is(.tds-currency-input-control input)::-moz-placeholder{
4905
+ color:var(--tds-field-placeholder-color);
4906
+ -moz-user-select:none;
4907
+ user-select:none;
4908
+ }
4909
+
4910
+ :is(.tds-currency-input-control input)::placeholder{
4911
+ color:var(--tds-field-placeholder-color);
4912
+ -webkit-user-select:none;
4913
+ -moz-user-select:none;
4914
+ user-select:none;
4915
+ }
4916
+
4917
+ .tds-currency-input-control .tds-currency-input-prefix{
4918
+ flex-shrink:0;
4919
+ color:var(--t-text-color-secondary);
4920
+ pointer-events:none;
4921
+ -webkit-user-select:none;
4922
+ -moz-user-select:none;
4923
+ user-select:none;
4719
4924
  }
4720
4925
 
4721
- .tds-data-table-filters-shelf{
4722
- height:auto;
4723
- overflow:hidden;
4724
- transition:height var(--t-duration-300) var(--t-ease-out);
4725
- }
4926
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
4927
+ --tds-field-background-color:var(--t-form-background-color-error);
4928
+ --tds-field-border-color:var(--t-form-border-color-error);
4929
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
4930
+ }
4726
4931
 
4727
- @media (prefers-reduced-motion: reduce){
4932
+ .tds-currency-input-control:has(:disabled){
4933
+ --tds-field-border-color:var(--t-form-border-color-disabled);
4934
+ --tds-field-background-color:var(--t-form-background-color-disabled);
4935
+ --tds-field-color:var(--t-form-color-disabled);
4728
4936
 
4729
- .tds-data-table-filters-shelf{
4730
- transition:none;
4731
- }
4937
+ cursor:not-allowed;
4732
4938
  }
4733
4939
 
4734
- .tds-data-table-filters-shelf--collapsed{
4735
- height:0;
4736
- transition-timing-function:var(--t-ease-in);
4737
- }
4940
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
4941
+ color:var(--tds-field-color);
4942
+ }
4738
4943
 
4739
- @supports (interpolate-size: allow-keywords){
4740
- .tds-data-table-filters-shelf{
4741
- interpolate-size:allow-keywords;
4944
+ .tds-currency-input-control:has([readonly]){
4945
+ --tds-field-border-color:var(--t-form-border-color-readonly);
4946
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
4947
+ --tds-field-background-color:var(--t-form-background-color-readonly);
4948
+ --tds-field-color:var(--t-form-color-readonly);
4742
4949
  }
4743
- }
4744
4950
 
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);
4951
+ .tds-currency-input-control:has([readonly]):has(input:focus){
4952
+ border-color:var(--t-form-border-color-hover);
4953
+ }
4954
+ .tds-currency-input-currency-name--hidden{
4955
+ position:absolute;
4956
+ width:1px;
4957
+ height:1px;
4958
+ overflow:hidden;
4959
+ white-space:nowrap;
4960
+ clip-path:inset(50%);
4749
4961
  }
4750
4962
 
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
- }
4963
+ .tds-segmented-control{
4964
+ --tds-segmented-control-font-size:var(--t-font-size-md);
4965
+ --tds-segmented-control-padding:var(--t-spacing-half);
4966
+ --tds-segmented-control-padding-inline:var(--t-spacing-1-half);
4967
+ --tds-segmented-control-icon-size:.66666667lh;
4968
+ --tds-segmented-control-border-radius:var(--t-border-radius-md);
4969
+ --tds-segmented-control-max-width:280px;
4970
+ --tds-segmented-control-min-height:var(--t-container-size-md);
4971
+ --tds-segmented-control-padding-inline-icon-only:calc((var(--tds-segmented-control-min-height) - var(--tds-segmented-control-icon-size)) / 2);
4972
+ --tds-segmented-control-track-gap:var(--tds-segmented-control-padding);
4973
+ --tds-segmented-control-width:fit-content;
4757
4974
 
4758
- .tds-data-table-filters-active-list{
4759
4975
  display:flex;
4760
- flex-wrap:wrap;
4976
+ flex-direction:column;
4761
4977
  gap:var(--t-spacing-half);
4978
+ align-items:flex-start;
4979
+ width:var(--tds-segmented-control-width);
4762
4980
  }
4763
4981
 
4764
- .tds-data-table-filters-active-actions{
4765
- flex-shrink:0;
4766
- }
4767
-
4768
- :root{
4769
-
4770
- --_data-table-filter-border-info:hsl(204 96% 89%);
4771
- --_data-table-filter-border-error:hsl(8 60% 85%);
4982
+ .tds-segmented-control--sm{
4983
+ --tds-segmented-control-font-size:var(--t-font-size-sm);
4984
+ --tds-segmented-control-padding-inline:7px;
4985
+ --tds-segmented-control-min-height:var(--t-container-size-sm);
4772
4986
  }
4773
4987
 
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);
4988
+ .tds-segmented-control--full-width{
4989
+ --tds-segmented-control-width:100%;
4990
+ --tds-segmented-control-max-width:none;
4777
4991
  }
4778
4992
 
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);
4993
+ .tds-segmented-control--full-width .tds-segmented-control-segment{
4994
+ flex:1 1 0;
4783
4995
  }
4784
- }
4785
-
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);
4789
4996
 
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);
4997
+ .tds-segmented-control-label{
4998
+ font-size:var(--tds-segmented-control-font-size);
4999
+ font-weight:var(--t-font-weight-normal);
5000
+ color:var(--t-text-color-headline);
4794
5001
  }
4795
5002
 
4796
- :is(.tds-btn-group--data-table-filters-chip button) svg{
4797
- color:var(--_chip-icon-color);
4798
- transform:scale(.75);
4799
- }
5003
+ .tds-segmented-control-label--hidden{
5004
+ position:absolute;
5005
+ width:1px;
5006
+ height:1px;
5007
+ overflow:hidden;
5008
+ white-space:nowrap;
5009
+ clip-path:inset(50%);
5010
+ }
4800
5011
 
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);
4804
- transition-timing-function:var(--t-ease-in-out);
4805
- transition-duration:var(--t-duration-200);
4806
- transition-property:border-color;
4807
- }
5012
+ .tds-segmented-control-track{
5013
+ display:inline-flex;
5014
+ gap:var(--tds-segmented-control-track-gap);
5015
+ width:var(--tds-segmented-control-width);
5016
+ padding:var(--tds-segmented-control-padding);
5017
+ background-color:var(--t-form-background-color);
5018
+ border:1px solid var(--t-border-color);
5019
+ border-radius:var(--tds-segmented-control-border-radius);
5020
+ }
4808
5021
 
4809
- @media (prefers-reduced-motion: reduce){
5022
+ .tds-segmented-control-segment{
5023
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
5024
+ --tds-segmented-control-background-color:transparent;
4810
5025
 
4811
- :is(.tds-btn-group--data-table-filters-chip button) span{
4812
- transition:none;
4813
- }
4814
- }
5026
+ display:inline-flex;
5027
+ gap:var(--t-spacing-1);
5028
+ align-items:center;
5029
+ justify-content:center;
5030
+ max-width:var(--tds-segmented-control-max-width);
5031
+ min-height:var(--tds-segmented-control-min-height);
5032
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
5033
+ padding-inline:var(--tds-segmented-control-padding-inline);
5034
+ font:inherit;
5035
+ font-size:var(--tds-segmented-control-font-size);
5036
+ color:var(--tds-segmented-control-color);
5037
+ text-align:center;
5038
+ cursor:pointer;
5039
+ -webkit-user-select:none;
5040
+ -moz-user-select:none;
5041
+ user-select:none;
5042
+ background-color:var(--tds-segmented-control-background-color);
5043
+ border:0;
5044
+ border-radius:var(--t-border-radius-sm);
5045
+ transition-timing-function:var(--t-ease-in-out);
5046
+ transition-duration:var(--t-duration-200);
5047
+ transition-property:color, background-color;
5048
+ }
4815
5049
 
4816
- :is(.tds-btn-group--data-table-filters-chip button) span:first-child{
4817
- padding-inline-start:0;
5050
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
5051
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
4818
5052
  }
4819
5053
 
4820
- :is(.tds-btn-group--data-table-filters-chip button) span:last-child{
4821
- padding-inline-end:0;
4822
- border-inline-end-color:transparent;
5054
+ .tds-segmented-control-segment .symbol{
5055
+ display:block;
5056
+ flex-shrink:0;
5057
+ width:var(--tds-segmented-control-icon-size);
5058
+ height:var(--tds-segmented-control-icon-size);
4823
5059
  }
4824
5060
 
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);
5061
+ .tds-segmented-control-segment:focus-visible{
5062
+ outline:var(--t-focus-ring-outline);
5063
+ outline-offset:var(--t-focus-ring-offset);
4829
5064
  }
4830
5065
 
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);
4834
-
4835
- color:var(--t-text-color);
4836
- background-color:var(--t-fill-color-status-neutral-dim);
4837
- }
5066
+ .tds-segmented-control-segment[aria-checked="true"]{
5067
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
5068
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
4838
5069
 
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);
5070
+ cursor:default;
4842
5071
  }
4843
5072
 
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);
4847
-
4848
- color:var(--t-text-color-status-error);
4849
- background-color:var(--t-fill-color-status-error-dim);
4850
- }
5073
+ .tds-segmented-control-segment:disabled{
5074
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-disabled);
5075
+ --tds-segmented-control-color:var(--tds-segmented-control-color-disabled);
4851
5076
 
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);
4855
- }
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);
5077
+ pointer-events:none;
4860
5078
  }
4861
5079
 
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;
5080
+ .tds-segmented-control-segment--interaction-subtle{
5081
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
5082
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
5083
+ --tds-segmented-control-color-disabled:var(--t-text-color-disabled);
5084
+ --tds-segmented-control-background-color-disabled:transparent;
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{