@planningcenter/tapestry 4.12.0-rc.0 → 4.12.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 (143) hide show
  1. package/dist/components/DataTable/CollectionEditorsLazy.js +2 -1
  2. package/dist/components/DataTable/CollectionEditorsLazy.js.map +1 -1
  3. package/dist/components/DataTable/DataTable.d.ts +5 -4
  4. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  5. package/dist/components/DataTable/DataTable.js +4 -2
  6. package/dist/components/DataTable/DataTable.js.map +1 -1
  7. package/dist/components/DataTable/ManageSavedViewsModal.d.ts +5 -2
  8. package/dist/components/DataTable/ManageSavedViewsModal.d.ts.map +1 -1
  9. package/dist/components/DataTable/ManageSavedViewsModal.js +167 -18
  10. package/dist/components/DataTable/ManageSavedViewsModal.js.map +1 -1
  11. package/dist/components/DataTable/ManageSavedViewsModal.module.css.js +1 -1
  12. package/dist/components/DataTable/SavedViewsBar.d.ts.map +1 -1
  13. package/dist/components/DataTable/SavedViewsBar.js +23 -9
  14. package/dist/components/DataTable/SavedViewsBar.js.map +1 -1
  15. package/dist/components/DataTable/savedViews.d.ts +24 -0
  16. package/dist/components/DataTable/savedViews.d.ts.map +1 -1
  17. package/dist/components/DataTable/savedViews.js +58 -1
  18. package/dist/components/DataTable/savedViews.js.map +1 -1
  19. package/dist/components/button/ActionsDropdownIconButton.d.ts +3 -2
  20. package/dist/components/button/ActionsDropdownIconButton.d.ts.map +1 -1
  21. package/dist/components/button/ActionsDropdownIconButton.js.map +1 -1
  22. package/dist/components/button/BaseButton.d.ts.map +1 -1
  23. package/dist/components/button/BaseButton.js +2 -1
  24. package/dist/components/button/BaseButton.js.map +1 -1
  25. package/dist/components/button/IconButton.d.ts +1 -3
  26. package/dist/components/button/IconButton.d.ts.map +1 -1
  27. package/dist/components/button/IconButton.js.map +1 -1
  28. package/dist/components/button/ToggleIconButton.d.ts +5 -2
  29. package/dist/components/button/ToggleIconButton.d.ts.map +1 -1
  30. package/dist/components/button/ToggleIconButton.js +1 -0
  31. package/dist/components/button/ToggleIconButton.js.map +1 -1
  32. package/dist/components/button/index.d.ts +1 -1
  33. package/dist/components/button/index.d.ts.map +1 -1
  34. package/dist/components/combo-box/ComboBox.d.ts +2 -0
  35. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  36. package/dist/components/combo-box/ComboBox.js +31 -5
  37. package/dist/components/combo-box/ComboBox.js.map +1 -1
  38. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  39. package/dist/components/date-picker/DatePicker.js +18 -14
  40. package/dist/components/date-picker/DatePicker.js.map +1 -1
  41. package/dist/components/internal/LoadingAnnouncement.d.ts +11 -0
  42. package/dist/components/internal/LoadingAnnouncement.d.ts.map +1 -0
  43. package/dist/components/internal/LoadingAnnouncement.js +21 -0
  44. package/dist/components/internal/LoadingAnnouncement.js.map +1 -0
  45. package/dist/components/internal/index.d.ts +1 -0
  46. package/dist/components/internal/index.d.ts.map +1 -1
  47. package/dist/components/internal/tooltip/Tooltip.d.ts +4 -2
  48. package/dist/components/internal/tooltip/Tooltip.d.ts.map +1 -1
  49. package/dist/components/internal/tooltip/Tooltip.js.map +1 -1
  50. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts +3 -3
  51. package/dist/components/internal/tooltip/TooltipTriggerContext.d.ts.map +1 -1
  52. package/dist/components/internal/tooltip/TooltipTriggerContext.js +1 -1
  53. package/dist/components/internal/tooltip/TooltipTriggerContext.js.map +1 -1
  54. package/dist/components/internal/tooltip/index.d.ts +1 -1
  55. package/dist/components/internal/tooltip/index.d.ts.map +1 -1
  56. package/dist/components/link/BaseLink.d.ts.map +1 -1
  57. package/dist/components/link/BaseLink.js +15 -3
  58. package/dist/components/link/BaseLink.js.map +1 -1
  59. package/dist/components/link/IconLink.d.ts +28 -290
  60. package/dist/components/link/IconLink.d.ts.map +1 -1
  61. package/dist/components/link/IconLink.js +9 -2
  62. package/dist/components/link/IconLink.js.map +1 -1
  63. package/dist/components/page-header/defineElements.js +1 -1
  64. package/dist/components/pane/Pane.d.ts +1 -1
  65. package/dist/components/pane/Pane.js +1 -1
  66. package/dist/components/pane/Pane.js.map +1 -1
  67. package/dist/components/pane/PaneBody.d.ts +1 -1
  68. package/dist/components/pane/PaneBody.js +1 -1
  69. package/dist/components/pane/PaneBody.js.map +1 -1
  70. package/dist/components/pane/PaneDivider.d.ts +1 -1
  71. package/dist/components/pane/PaneDivider.js +1 -1
  72. package/dist/components/pane/PaneDivider.js.map +1 -1
  73. package/dist/components/pane/PaneFooter.d.ts +1 -1
  74. package/dist/components/pane/PaneFooter.js +1 -1
  75. package/dist/components/pane/PaneFooter.js.map +1 -1
  76. package/dist/components/pane/PaneHeader.d.ts +1 -1
  77. package/dist/components/pane/PaneHeader.js +1 -1
  78. package/dist/components/pane/PaneHeader.js.map +1 -1
  79. package/dist/components/pane/PaneHeaderActions.d.ts +1 -1
  80. package/dist/components/pane/PaneHeaderActions.js +1 -1
  81. package/dist/components/pane/PaneHeaderActions.js.map +1 -1
  82. package/dist/components/sidenav/defineElements.js +1 -1
  83. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  84. package/dist/components/time-field/TimeField.js +7 -3
  85. package/dist/components/time-field/TimeField.js.map +1 -1
  86. package/dist/index.css +142 -0
  87. package/dist/index.css.map +1 -1
  88. package/dist/index.d.ts +1 -0
  89. package/dist/index.d.ts.map +1 -1
  90. package/dist/index.js +6 -0
  91. package/dist/index.js.map +1 -1
  92. package/dist/packages/tapestry-wc/dist/components/{p-np7vhMVg.js → p-A1JK45WV.js} +3 -3
  93. package/dist/packages/tapestry-wc/dist/components/p-A1JK45WV.js.map +1 -0
  94. package/dist/packages/tapestry-wc/dist/components/{p-BVvtAaVT.js → p-BbuNAv9q.js} +3 -3
  95. package/dist/packages/tapestry-wc/dist/components/p-BbuNAv9q.js.map +1 -0
  96. package/dist/packages/tapestry-wc/dist/components/{p-B2xqMgNQ.js → p-CBFtMIxJ.js} +2 -2
  97. package/dist/packages/tapestry-wc/dist/components/p-CBFtMIxJ.js.map +1 -0
  98. package/dist/packages/tapestry-wc/dist/components/{p-Rn6lOB18.js → p-CY_DC4d_.js} +3 -3
  99. package/dist/packages/tapestry-wc/dist/components/p-CY_DC4d_.js.map +1 -0
  100. package/dist/packages/tapestry-wc/dist/components/{p-6NO22Vi_.js → p-DNHgMtxw.js} +2 -2
  101. package/dist/packages/tapestry-wc/dist/components/p-DNHgMtxw.js.map +1 -0
  102. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  103. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  104. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
  105. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  106. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  107. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  108. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  109. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  110. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  111. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  112. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  113. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  114. package/dist/reactRender.css +1171 -1101
  115. package/dist/reactRender.css.map +1 -1
  116. package/dist/reactRenderLegacy.css +1171 -1101
  117. package/dist/reactRenderLegacy.css.map +1 -1
  118. package/dist/tapestryMount.css +1171 -1101
  119. package/dist/tapestryMount.css.map +1 -1
  120. package/dist/tapestryMountLegacy.css +1171 -1101
  121. package/dist/tapestryMountLegacy.css.map +1 -1
  122. package/dist/unstable.css +201 -131
  123. package/dist/unstable.css.map +1 -1
  124. package/dist/unstable.d.ts +0 -1
  125. package/dist/unstable.d.ts.map +1 -1
  126. package/dist/unstable.js +6 -6
  127. package/dist/utilities/dateFieldLocale.d.ts +2 -0
  128. package/dist/utilities/dateFieldLocale.d.ts.map +1 -0
  129. package/dist/utilities/dateFieldLocale.js +32 -0
  130. package/dist/utilities/dateFieldLocale.js.map +1 -0
  131. package/dist/utilities/useAnnounce.d.ts +8 -1
  132. package/dist/utilities/useAnnounce.d.ts.map +1 -1
  133. package/dist/utilities/useAnnounce.js.map +1 -1
  134. package/dist/utilities/useDateFieldLocale.d.ts +2 -0
  135. package/dist/utilities/useDateFieldLocale.d.ts.map +1 -0
  136. package/dist/utilities/useDateFieldLocale.js +11 -0
  137. package/dist/utilities/useDateFieldLocale.js.map +1 -0
  138. package/package.json +4 -3
  139. package/dist/packages/tapestry-wc/dist/components/p-6NO22Vi_.js.map +0 -1
  140. package/dist/packages/tapestry-wc/dist/components/p-B2xqMgNQ.js.map +0 -1
  141. package/dist/packages/tapestry-wc/dist/components/p-BVvtAaVT.js.map +0 -1
  142. package/dist/packages/tapestry-wc/dist/components/p-Rn6lOB18.js.map +0 -1
  143. package/dist/packages/tapestry-wc/dist/components/p-np7vhMVg.js.map +0 -1
@@ -677,282 +677,413 @@
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;
756
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%;
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 .tds-sidenav-section-label-actions,.tds-sidenav-section-header [slot="label-actions"]{
777
+ display:flex;
778
+ gap:var(--t-spacing-half);
779
+ align-items:center;
778
780
  }
781
+ .tds-sidenav-section-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
+ .tds-sidenav-section-label-actions > [slot="label-actions"],
790
+ .tds-sidenav-section-actions > [slot="section-actions"]{
791
+ display:contents;
792
+ }
779
793
 
780
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
794
+ .tds-sidenav-section-list,
795
+ .tds-sidenav-item{
796
+ width:100%;
797
+ padding:0;
798
+ margin:0;
799
+ }
800
+
801
+ .tds-sidenav-item :is(a,button){
802
+ position:relative;
781
803
  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;
804
+ gap:12px;
805
+ align-items:center;
806
+ width:100%;
807
+ padding:12px;
808
+ overflow:hidden;
809
+ font-size:var(--t-font-size-sm);
810
+ line-height:18px;
811
+ color:var(--t-text-color-headline);
812
+ white-space:nowrap;
813
+ text-decoration:none;
814
+ -webkit-appearance:none;
815
+ -moz-appearance:none;
816
+ appearance:none;
817
+ cursor:pointer;
818
+ background-color:var(--tds-sidenav-item-background, transparent);
819
+ border:0;
820
+ border-radius:var(--t-border-radius);
821
+ transition:var(--tds-sidenav-item-transition);
787
822
  }
788
823
 
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);
824
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
825
+ display:block;
826
+ flex:1;
827
+ overflow:hidden;
828
+ text-overflow:ellipsis;
829
+ text-align:left;
830
+ white-space:nowrap;
797
831
  }
798
832
 
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;
833
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
834
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
835
+ color:var(--t-text-color-headline);
807
836
  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
837
  }
819
838
 
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);
839
+ :is(.tds-sidenav-item :is(a,button)):active{
840
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
841
+ }
842
+
843
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
844
+ overflow:hidden;
845
+ color:var(--tds-sidenav-item-icon-color);
846
+ }
847
+
848
+ :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{
849
+ display:block;
850
+ width:var(--tds-sidenav-item-icon-size);
851
+ height:var(--tds-sidenav-item-icon-size);
825
852
  }
826
853
 
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
- }
854
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
855
+ --tds-sidenav-indent:19px;
856
+ }
833
857
 
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
- }
858
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
859
+ visibility:visible;
860
+ block-size:auto;
861
+ opacity:1;
862
+ }
839
863
 
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
- }
864
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
865
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
866
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
847
867
 
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
- }
868
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
869
+ font-weight:var(--t-font-weight-semibold);
870
+ }
858
871
 
859
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
- position:relative;
872
+ .tds-sidenav-item:has(.tds-sidenav-section){
873
+ display:flex;
874
+ flex-direction:column;
875
+ gap:var(--t-spacing-half);
876
+ }
877
+
878
+ .tds-sidenav-item .tds-sidenav-section-list{
879
+ --tds-sidenav-item-depth:1;
880
+ gap:0;
881
+ }
882
+
883
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
884
+ visibility:hidden;
885
+ block-size:0;
886
+ overflow-y:clip;
887
+ opacity:0;
888
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
861
889
  }
862
890
 
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);
891
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
892
+ --tds-sidenav-item-depth:2;
893
+ }
894
+
895
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
896
+ min-height:var(--t-element-size-2xl);
897
+ padding-block:9px;
898
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
899
+ line-height:1;
900
+ background-color:transparent;
901
+ }
902
+
903
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
904
+ position:absolute;
905
+ top:0;
906
+ bottom:0;
907
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
908
+ width:2px;
909
+ content:"";
910
+ background-color:var(--tds-sidenav-item-nested-border-color);
911
+ transition:var(--tds-sidenav-item-transition);
866
912
  }
867
913
 
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{
914
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
869
915
  position:absolute;
870
- top:-5px;
871
- right:-2px;
872
- width:10px;
873
- height:10px;
916
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
917
+ z-index:-1;
918
+ height:100%;
874
919
  content:"";
875
- background:var(--tds-page-header-nav-item-indicator-color);
876
- border-radius:50%;
920
+ background-color:var(--tds-sidenav-item-nested-background);
921
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
922
+ transition:var(--tds-sidenav-item-transition);
877
923
  }
878
924
 
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
- }
925
+ :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)){
926
+ display:block;
927
+ text-align:left;
928
+ white-space:normal;
883
929
  }
884
930
 
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
- }
931
+ :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{
932
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
933
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
934
+ }
893
935
 
894
- .tds-page-header--profile > .tds-page-header__title-bar{
895
- align-items:center;
896
- }
936
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
937
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
938
+ }
897
939
 
898
- .tds-page-header__primary{
940
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
941
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
942
+ font-weight:var(--t-font-weight-medium);
943
+ }
944
+
945
+ .tds-sidenav-responsive-header{
946
+ display:flex;
947
+ gap:var(--t-spacing-2);
948
+ align-items:center;
899
949
  width:100%;
900
950
  }
901
951
 
902
- .tds-page-header__primary h1{
952
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
953
+ order:0;
954
+ }
955
+
956
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
957
+ flex:1;
958
+ order:1;
903
959
  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;
960
+ font-size:var(--t-font-size-lg);
961
+ font-weight:var(--t-font-weight-medium);
962
+ color:var(--t-text-color-headline);
909
963
  }
910
964
 
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%;
965
+ @media (max-width: 719px){
966
+ .tds-sidenav-collapse{
967
+ z-index:10001;
968
+ display:none;
969
+ max-width:min(448px, calc(100vw - 48px));
970
+ padding:0;
971
+ margin:12px 0;
972
+ position-area:bottom span-right;
973
+ overflow:hidden;
974
+ outline:0;
975
+ background:var(--t-surface-color-card);
976
+ border:0;
977
+ border-radius:6px;
978
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
979
+ opacity:var(--tds-sidenav-collapse-open-opacity);
980
+ transform:var(--tds-sidenav-collapse-open-transform);
981
+ transition:var(--tds-sidenav-collapse-transition-enter);
982
+ will-change:transform;
983
+ }
984
+
985
+ .tds-sidenav-scroll-container{
986
+ --webkit-overflow-scrolling:touch;
987
+ display:block;
988
+ width:100%;
989
+ height:-moz-fit-content;
990
+ height:fit-content;
991
+ padding:var(--t-spacing-2);
992
+ overflow-y:auto;
993
+ }
994
+
995
+ .tds-sidenav-item :is(a, button) :is(.prefix){
996
+ display:none;
997
+ }
998
+ @supports selector(:popover-open){
999
+ .tds-sidenav-collapse:popover-open{
1000
+ display:flex;
1001
+ }
1002
+
1003
+ .tds-sidenav-collapse:not(:popover-open){
1004
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1005
+ transition:var(--tds-sidenav-collapse-transition-exit);
1006
+ }
1007
+
1008
+ @starting-style{
1009
+ .tds-sidenav-collapse:popover-open{
1010
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1011
+ transform:var(--tds-sidenav-collapse-closed-transform);
1012
+ }
1013
+ }
1014
+ }
1015
+ @supports not selector(:popover-open){
1016
+ .tds-sidenav-collapse.\:popover-open{
1017
+ display:flex;
1018
+ }
1019
+
1020
+ .tds-sidenav-collapse:not(.\:popover-open){
1021
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1022
+ transition:var(--tds-sidenav-collapse-transition-exit);
1023
+ }
917
1024
  }
1025
+ }
918
1026
 
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;
1027
+ @media (min-width: 720px){
1028
+ .tds-sidenav-responsive-header{
1029
+ display:none;
924
1030
  }
925
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
- width:auto;
1031
+ }
1032
+
1033
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1034
+ display:none;
927
1035
  }
928
1036
 
929
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
- justify-content:flex-end;
1037
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1038
+ display:block;
931
1039
  }
932
- }
933
1040
 
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;
1041
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1042
+ display:flex;
1043
+ flex-direction:column;
1044
+ }
1045
+
1046
+ .tds-button-group{
1047
+ display:inline-flex;
943
1048
  }
1049
+ .tds-button-group > .tds-btn{
1050
+ --tds-button-group-item-z-index:1;
944
1051
 
945
- @keyframes indicator-pulse{
946
- 0%{
947
- opacity:.3;
948
- transform:scale(.9);
1052
+ position:relative;
1053
+ z-index:var(--tds-button-group-item-z-index);
1054
+ border-radius:0;
949
1055
  }
950
-
951
- 100%{
952
- opacity:0;
953
- transform:scale(1.75);
1056
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1057
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1058
+ }
1059
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1060
+ position:absolute;
1061
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1062
+ width:var(--tds-btn-border-width);
1063
+ pointer-events:none;
1064
+ content:"";
1065
+ background-color:var(--t-border-color-white);
1066
+ }
1067
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1068
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1069
+ }
1070
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1071
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1072
+ }
1073
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1074
+ --tds-button-group-item-z-index:2;
1075
+ }
1076
+ :is(.tds-button-group > .tds-btn):focus-visible{
1077
+ --tds-button-group-item-z-index:5;
1078
+ }
1079
+ .tds-button-group > .tds-btn:first-child{
1080
+ border-start-start-radius:var(--tds-btn-border-radius);
1081
+ border-end-start-radius:var(--tds-btn-border-radius);
1082
+ }
1083
+ .tds-button-group > .tds-btn:last-child{
1084
+ border-start-end-radius:var(--tds-btn-border-radius);
1085
+ border-end-end-radius:var(--tds-btn-border-radius);
954
1086
  }
955
- }
956
1087
 
957
1088
  .tds-checkbox{
958
1089
  --tds-checkbox-font-size:var(--t-font-size-md);
@@ -1223,48 +1354,6 @@
1223
1354
  --tds-checkbox-group-description-line-height:1.3;
1224
1355
  }
1225
1356
 
1226
- .tds-button-group{
1227
- display:inline-flex;
1228
- }
1229
- .tds-button-group > .tds-btn{
1230
- --tds-button-group-item-z-index:1;
1231
-
1232
- position:relative;
1233
- z-index:var(--tds-button-group-item-z-index);
1234
- border-radius:0;
1235
- }
1236
- :is(.tds-button-group > .tds-btn):not(:first-child){
1237
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1238
- }
1239
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1240
- position:absolute;
1241
- inset-block:calc(var(--tds-btn-border-width) * -1);
1242
- width:var(--tds-btn-border-width);
1243
- pointer-events:none;
1244
- content:"";
1245
- background-color:var(--t-border-color-white);
1246
- }
1247
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1248
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1249
- }
1250
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1251
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1252
- }
1253
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1254
- --tds-button-group-item-z-index:2;
1255
- }
1256
- :is(.tds-button-group > .tds-btn):focus-visible{
1257
- --tds-button-group-item-z-index:5;
1258
- }
1259
- .tds-button-group > .tds-btn:first-child{
1260
- border-start-start-radius:var(--tds-btn-border-radius);
1261
- border-end-start-radius:var(--tds-btn-border-radius);
1262
- }
1263
- .tds-button-group > .tds-btn:last-child{
1264
- border-start-end-radius:var(--tds-btn-border-radius);
1265
- border-end-end-radius:var(--tds-btn-border-radius);
1266
- }
1267
-
1268
1357
  .tds-currency-input-control{
1269
1358
  display:flex;
1270
1359
  gap:var(--t-spacing-half);
@@ -1416,23 +1505,146 @@
1416
1505
  border-color:var(--t-fill-color-button-neutral-solid-active);
1417
1506
  }
1418
1507
 
1419
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1420
- color:var(--t-text-color-disabled);
1421
- pointer-events:none;
1422
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1423
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1424
- }
1425
- @supports (field-sizing: content){
1426
- .tds-input--auto-width{
1427
- inline-size:-moz-fit-content;
1428
- inline-size:fit-content;
1429
- min-inline-size:min(100%, 122px);
1508
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1509
+ color:var(--t-text-color-disabled);
1510
+ pointer-events:none;
1511
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1512
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1513
+ }
1514
+ @supports (field-sizing: content){
1515
+ .tds-input--auto-width{
1516
+ inline-size:-moz-fit-content;
1517
+ inline-size:fit-content;
1518
+ min-inline-size:min(100%, 122px);
1519
+ }
1520
+
1521
+ .tds-input--auto-width input{
1522
+ field-sizing:content;
1523
+ inline-size:auto;
1524
+ }
1525
+ }
1526
+
1527
+ .tds-pane{
1528
+ --tds-pane-background-color:var(--t-surface-color-card);
1529
+ --tds-pane-border-radius:var(--t-border-radius-lg);
1530
+ --tds-pane-border-color:var(--t-border-color);
1531
+
1532
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
1533
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
1534
+
1535
+ --tds-pane-title-color:var(--t-text-color-headline);
1536
+ --tds-pane-title-font-size:var(--t-font-size-lg);
1537
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
1538
+ --tds-pane-title-line-height:1.4;
1539
+
1540
+ --tds-pane-body-padding:var(--t-spacing-3);
1541
+
1542
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
1543
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
1544
+
1545
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
1546
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
1547
+
1548
+ background:var(--tds-pane-background-color);
1549
+ border-radius:var(--tds-pane-border-radius);
1550
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
1551
+ display:flex;
1552
+ flex-direction:column;
1553
+ }
1554
+
1555
+ .tds-pane-header{
1556
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
1557
+ padding-block:var(--tds-pane-header-padding-block);
1558
+ padding-inline:var(--tds-pane-header-padding-inline);
1559
+ }
1560
+
1561
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
1562
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
1563
+ }
1564
+
1565
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
1566
+ flex-basis:100%;
1567
+ order:1;
1568
+ }
1569
+
1570
+ .tds-pane-header:has( > tds-helper-shelf){
1571
+ row-gap:var(--tds-pane-header-padding-block);
1572
+ padding-block-end:0;
1573
+ }
1574
+
1575
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
1576
+ font-size:var(--t-font-size-md);
1577
+ margin-block-end:var(--tds-pane-header-padding-block);
1578
+ }
1579
+
1580
+ .tds-pane-title{
1581
+ color:var(--tds-pane-title-color);
1582
+ font-size:var(--tds-pane-title-font-size);
1583
+ font-weight:var(--tds-pane-title-font-weight);
1584
+ line-height:var(--tds-pane-title-line-height);
1585
+ margin:0;
1586
+ }
1587
+
1588
+ .tds-pane-body{
1589
+ padding:var(--tds-pane-body-padding);
1590
+ }
1591
+
1592
+ .tds-pane-footer{
1593
+ padding-block-end:var(--tds-pane-footer-padding-block);
1594
+ padding-inline:var(--tds-pane-footer-padding-inline);
1595
+ }
1596
+
1597
+ .tds-pane-divider{
1598
+ border:0;
1599
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
1600
+ margin-block:var(--tds-pane-divider-margin-block);
1601
+ margin-inline:var(--tds-pane-divider-margin-inline);
1602
+ }
1603
+
1604
+ .tds-pane-divider.tds-pane-divider--inset{
1605
+ margin-inline:0;
1606
+ }
1607
+
1608
+ .tds-popover{
1609
+ max-inline-size:24rem;
1610
+ overflow:auto;
1611
+ overscroll-behavior:none;
1612
+ outline:0;
1613
+ scrollbar-color:#0004 var(--t-surface-color-card);
1614
+ scrollbar-width:thin;
1615
+ background:var(--t-surface-color-card);
1616
+ background-clip:padding-box;
1617
+ border:1px solid var(--t-border-color);
1618
+ border-radius:var(--t-border-radius);
1619
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1620
+ }
1621
+
1622
+ @media (prefers-reduced-motion: no-preference){
1623
+ .tds-popover[data-entering]{
1624
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1625
+ }
1626
+
1627
+ .tds-popover[data-exiting]{
1628
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1629
+ }
1630
+
1631
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1632
+ will-change:opacity, transform;
1633
+ }
1634
+
1635
+ @keyframes tds-popover{
1636
+ from{
1637
+ opacity:0;
1638
+ transform:translateY(-8px);
1639
+ }
1430
1640
  }
1641
+ }
1431
1642
 
1432
- .tds-input--auto-width input{
1433
- field-sizing:content;
1434
- inline-size:auto;
1435
- }
1643
+ .tds-popover-content{
1644
+ display:flex;
1645
+ flex-direction:column;
1646
+ padding:var(--t-spacing-1);
1647
+ outline:0;
1436
1648
  }
1437
1649
 
1438
1650
  .tds-modal-overlay{
@@ -1554,90 +1766,325 @@
1554
1766
  color:var(--t-text-color-secondary);
1555
1767
  }
1556
1768
 
1557
- .tds-modal-close{
1558
- grid-row:1;
1559
- grid-column:2;
1560
- align-self:center;
1561
- color:var(--t-icon-color-dim);
1562
- }
1769
+ .tds-modal-close{
1770
+ grid-row:1;
1771
+ grid-column:2;
1772
+ align-self:center;
1773
+ color:var(--t-icon-color-dim);
1774
+ }
1775
+
1776
+ .tds-modal-body{
1777
+ padding-block:var(--t-spacing-3);
1778
+ padding-inline:var(--t-spacing-4);
1779
+ }
1780
+
1781
+ .tds-modal-body--full-width{
1782
+ padding-inline:0;
1783
+ }
1784
+
1785
+ .tds-modal-footer{
1786
+ display:flex;
1787
+ gap:var(--t-spacing-2);
1788
+ align-items:center;
1789
+ justify-content:flex-end;
1790
+ padding-block:var(--t-spacing-3);
1791
+ padding-inline:var(--t-spacing-4);
1792
+ border-top:1px solid var(--t-border-color);
1793
+ }
1794
+
1795
+ .tds-modal-footer > [slot="start"]{
1796
+ margin-inline-end:auto;
1797
+ }
1798
+
1799
+ @media (min-width: 720px){
1800
+ .tds-modal-overlay{
1801
+ --tds-modal-min-margin-block:0;
1802
+ }
1803
+
1804
+ .tds-modal-footer{
1805
+ position:sticky;
1806
+ bottom:0;
1807
+ background:var(--t-surface-color-card);
1808
+ border-end-start-radius:var(--t-border-radius-lg);
1809
+ border-end-end-radius:var(--t-border-radius-lg);
1810
+ }
1811
+ }
1812
+
1813
+ @layer t-critical{
1814
+ tds-page-header:not(.hydrated){
1815
+ display:none;
1816
+ }
1817
+ }
1818
+
1819
+ @layer t-component{
1820
+ .tds-page-header{
1821
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1822
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1823
+ --tds-page-header-color:var(--t-text-color);
1824
+ --tds-page-header-bottom-border-color:transparent;
1825
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1826
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1827
+ --tds-page-header-padding-x:var(--t-spacing-2);
1828
+ --tds-page-header-padding-y:var(--t-spacing-2);
1829
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1830
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1831
+ --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%);
1832
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1833
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1834
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1835
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1836
+ --tds-page-header-nav-item-border-width:1px;
1837
+
1838
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1839
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1840
+
1841
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1842
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1843
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1844
+
1845
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1846
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1847
+
1848
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1849
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1850
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1851
+
1852
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1853
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1854
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1855
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1856
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1857
+ }
1858
+
1859
+ .tds-page-header--profile{
1860
+ --tds-page-header-padding-y:20px;
1861
+ }
1862
+
1863
+ @supports (color: light-dark(#fff, #000)){
1864
+ .tds-page-header{
1865
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1866
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1867
+ }
1868
+ }
1869
+
1870
+ @media (min-width: 600px){
1871
+ .tds-page-header{
1872
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1873
+ --tds-page-header-color:var(--t-text-color-secondary);
1874
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1875
+ --tds-page-header-padding-x:var(--t-spacing-3);
1876
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1877
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1878
+ --tds-page-header-nav-background:transparent;
1879
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1880
+ --tds-page-header-nav-item-border-width:1px;
1881
+ --tds-page-header-nav-item-color:var(--t-text-color);
1882
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1883
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1884
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1885
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1886
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1887
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1888
+ }
1889
+ }
1890
+ }
1891
+
1892
+ .tds-page-header{
1893
+ display:flex;
1894
+ flex-direction:column;
1895
+ padding-top:var(--tds-page-header-padding-y);
1896
+ color:var(--tds-page-header-color);
1897
+ background:var(--tds-page-header-background-color);
1898
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1899
+ }
1900
+
1901
+ .tds-page-header:not(.has-nav){
1902
+ padding-bottom:var(--tds-page-header-padding-y);
1903
+ }
1904
+
1905
+ .tds-page-header.inactive{
1906
+ background:var(--tds-page-header-background-color-inactive);
1907
+ }
1908
+
1909
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1910
+ width:100%;
1911
+ }
1912
+
1913
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1914
+ display:flex;
1915
+ flex-flow:row wrap;
1916
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1917
+ align-items:flex-start;
1918
+ justify-content:flex-start;
1919
+ min-width:0;
1920
+ }
1921
+
1922
+ :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{
1923
+ display:flex;
1924
+ gap:var(--tds-page-header-nav-gap);
1925
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1926
+ margin:0 0 -1px;
1927
+ overflow:auto;
1928
+ list-style:none;
1929
+ background:var(--tds-page-header-nav-background);
1930
+ }
1931
+
1932
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1933
+ position:relative;
1934
+ display:inline-flex;
1935
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1936
+ font-size:var(--t-font-size-sm);
1937
+ line-height:22px;
1938
+ color:var(--tds-page-header-nav-item-color);
1939
+ white-space:nowrap;
1940
+ text-decoration:none;
1941
+ -webkit-appearance:none;
1942
+ -moz-appearance:none;
1943
+ appearance:none;
1944
+ cursor:pointer;
1945
+ outline-offset:-2px;
1946
+ background-color:var(--tds-page-header-nav-item-background-color);
1947
+ background-clip:padding-box;
1948
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1949
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1950
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1951
+ }
1952
+
1953
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1954
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1955
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1956
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1957
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1958
+ }
1959
+
1960
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1961
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1962
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1963
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1964
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1965
+ }
1966
+
1967
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1968
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1969
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1970
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1971
+ }
1972
+
1973
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1974
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1975
+ color:var(--tds-page-header-nav-item-color-disabled);
1976
+ cursor:not-allowed;
1977
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1978
+ opacity:1;
1979
+ }
1980
+
1981
+ @media (min-width: 600px){
1982
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1983
+ position:absolute;
1984
+ inset:auto -1px -1px;
1985
+ height:1px;
1986
+ pointer-events:none;
1987
+ content:"";
1988
+ background-color:var(--tds-page-header-bottom-border-color);
1989
+ }
1990
+ }
1991
+
1992
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1993
+ position:relative;
1994
+ }
1995
+
1996
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1997
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1998
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1999
+ }
1563
2000
 
1564
- .tds-modal-body{
1565
- padding-block:var(--t-spacing-3);
1566
- padding-inline:var(--t-spacing-4);
1567
- }
2001
+ :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{
2002
+ position:absolute;
2003
+ top:-5px;
2004
+ right:-2px;
2005
+ width:10px;
2006
+ height:10px;
2007
+ content:"";
2008
+ background:var(--tds-page-header-nav-item-indicator-color);
2009
+ border-radius:50%;
2010
+ }
1568
2011
 
1569
- .tds-modal-body--full-width{
1570
- padding-inline:0;
1571
- }
2012
+ @media (prefers-reduced-motion: no-preference){
2013
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2014
+ animation:indicator-pulse 1.25s ease infinite;
2015
+ }
2016
+ }
1572
2017
 
1573
- .tds-modal-footer{
2018
+ .tds-page-header__title-bar{
1574
2019
  display:flex;
1575
- gap:var(--t-spacing-2);
1576
- align-items:center;
1577
- justify-content:flex-end;
1578
- padding-block:var(--t-spacing-3);
1579
- padding-inline:var(--t-spacing-4);
1580
- border-top:1px solid var(--t-border-color);
2020
+ flex-direction:column;
2021
+ gap:var(--t-spacing-2) var(--t-spacing-1);
2022
+ align-items:flex-start;
2023
+ justify-content:space-between;
2024
+ padding:0 var(--tds-page-header-padding-x);
1581
2025
  }
1582
2026
 
1583
- .tds-modal-footer > [slot="start"]{
1584
- margin-inline-end:auto;
2027
+ .tds-page-header--profile > .tds-page-header__title-bar{
2028
+ align-items:center;
2029
+ }
2030
+
2031
+ .tds-page-header__primary{
2032
+ width:100%;
1585
2033
  }
1586
2034
 
1587
- @media (min-width: 720px){
1588
- .tds-modal-overlay{
1589
- --tds-modal-min-margin-block:0;
2035
+ .tds-page-header__primary h1{
2036
+ margin:0;
2037
+ font-size:var(--tds-page-header-headline-font-size);
2038
+ font-weight:var(--t-font-weight-normal);
2039
+ line-height:32px;
2040
+ color:var(--tds-page-header-headline-color);
2041
+ overflow-wrap:break-word;
1590
2042
  }
1591
2043
 
1592
- .tds-modal-footer{
1593
- position:sticky;
1594
- bottom:0;
1595
- background:var(--t-surface-color-card);
1596
- border-end-start-radius:var(--t-border-radius-lg);
1597
- border-end-end-radius:var(--t-border-radius-lg);
2044
+ @media (min-width: 960px){
2045
+ .tds-page-header__primary{
2046
+ flex:1 1 max-content;
2047
+ width:auto;
2048
+ min-width:0;
2049
+ max-width:100%;
1598
2050
  }
1599
- }
1600
-
1601
- .tds-popover{
1602
- max-inline-size:24rem;
1603
- overflow:auto;
1604
- overscroll-behavior:none;
1605
- outline:0;
1606
- scrollbar-color:#0004 var(--t-surface-color-card);
1607
- scrollbar-width:thin;
1608
- background:var(--t-surface-color-card);
1609
- background-clip:padding-box;
1610
- border:1px solid var(--t-border-color);
1611
- border-radius:var(--t-border-radius);
1612
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1613
- }
1614
2051
 
1615
- @media (prefers-reduced-motion: no-preference){
1616
- .tds-popover[data-entering]{
1617
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2052
+ .tds-page-header__title-bar,
2053
+ .tds-page-header--profile .tds-page-header__title-bar{
2054
+ flex-flow:row nowrap;
2055
+ row-gap:12px;
2056
+ align-items:flex-start;
2057
+ }
2058
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2059
+ width:auto;
1618
2060
  }
1619
2061
 
1620
- .tds-popover[data-exiting]{
1621
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2062
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2063
+ justify-content:flex-end;
1622
2064
  }
2065
+ }
1623
2066
 
1624
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1625
- will-change:opacity, transform;
1626
- }
2067
+ .tds-page-header-phone,
2068
+ .tds-page-header-email{
2069
+ color:var(--tds-page-header-color);
2070
+ white-space:nowrap;
2071
+ }
2072
+ .tds-page-header-email{
2073
+ max-width:100%;
2074
+ overflow:hidden;
2075
+ text-overflow:ellipsis;
2076
+ }
1627
2077
 
1628
- @keyframes tds-popover{
1629
- from{
1630
- opacity:0;
1631
- transform:translateY(-8px);
1632
- }
2078
+ @keyframes indicator-pulse{
2079
+ 0%{
2080
+ opacity:.3;
2081
+ transform:scale(.9);
1633
2082
  }
1634
- }
1635
2083
 
1636
- .tds-popover-content{
1637
- display:flex;
1638
- flex-direction:column;
1639
- padding:var(--t-spacing-1);
1640
- outline:0;
2084
+ 100%{
2085
+ opacity:0;
2086
+ transform:scale(1.75);
2087
+ }
1641
2088
  }
1642
2089
 
1643
2090
  .tds-radio-group{
@@ -1842,124 +2289,19 @@
1842
2289
  align-items:flex-start;
1843
2290
  padding-inline-start:var(--t-spacing-1);
1844
2291
  margin:0;
1845
- font-size:var(--tds-radio-description-font-size);
1846
- line-height:var(--tds-radio-description-line-height);
1847
- color:var(--tds-radio-description-color);
1848
- cursor:text;
1849
- }
1850
-
1851
- .tds-radio--sm{
1852
- --tds-radio-line-height:1.35;
1853
- --tds-radio-input-size:var(--t-element-size-sm);
1854
- --tds-radio-font-size:var(--t-font-size-sm);
1855
- --tds-radio-description-font-size:var(--t-font-size-xs);
1856
- --tds-radio-description-line-height:1.3;
1857
- }
1858
-
1859
- .tds-input:has(textarea){
1860
- --tds-input-padding-block:6px;
1861
- --tds-input-resizer-size:var(--t-element-size-sm);
1862
- --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");
1863
- }
1864
-
1865
- @supports (x: attr(x type(*))){
1866
-
1867
- .tds-input textarea{
1868
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1869
- }
1870
- }
1871
-
1872
- .tds-input.tds-textarea--resize-vertical textarea{
1873
- resize:vertical;
1874
- }
1875
-
1876
- .tds-input.tds-textarea--resize-none textarea{
1877
- resize:none;
1878
- }
1879
-
1880
- .tds-input.tds-textarea--resize-auto textarea{
1881
- resize:vertical;
1882
- }
1883
-
1884
- @supports (field-sizing: content){
1885
- .tds-input.tds-textarea--resize-auto textarea{
1886
- field-sizing:content;
1887
- resize:none;
1888
- }
1889
- }
1890
-
1891
- .tds-input textarea{
1892
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1893
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1894
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1895
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1896
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1897
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1898
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1899
- --tds-input-scrollbar-thumb-border-radius:999px;
1900
- --tds-input-scrollbar-thumb-border-width:3px;
1901
- --tds-input-scrollbar-track-margin-block:.125rem;
1902
- scrollbar-color:initial;
1903
- transition-timing-function:var(--t-ease-in-out);
1904
- transition-duration:var(--t-duration-200);
1905
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1906
- }
1907
-
1908
- @media (pointer: fine){
1909
- :is(.tds-input textarea)::-webkit-scrollbar{
1910
- width:12px;
1911
- height:12px;
1912
- cursor:default;
1913
- }
1914
-
1915
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1916
- cursor:default;
1917
- background:var(--tds-input-scrollbar-thumb-color);
1918
- background-clip:content-box;
1919
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1920
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1921
- }
1922
-
1923
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1924
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1925
- }
1926
-
1927
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1928
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1929
- }
1930
-
1931
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1932
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1933
- }
1934
-
1935
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1936
- background:var(--tds-input-scrollbar-surface-color);
1937
- }
1938
-
1939
- :is(.tds-input textarea)::-webkit-resizer{
1940
- background:var(--tds-input-resizer-icon) no-repeat;
1941
- background-position:right bottom;
1942
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1943
- }
1944
-
1945
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1946
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1947
- cursor:default;
1948
- }
1949
-
1950
- @supports (-moz-appearance: none){
1951
- :is(.tds-input textarea){
1952
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1953
- scrollbar-width:thin;
1954
- }
1955
-
1956
- @media (hover){
1957
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1958
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1959
- }
1960
- }
1961
- }
1962
- }
2292
+ font-size:var(--tds-radio-description-font-size);
2293
+ line-height:var(--tds-radio-description-line-height);
2294
+ color:var(--tds-radio-description-color);
2295
+ cursor:text;
2296
+ }
2297
+
2298
+ .tds-radio--sm{
2299
+ --tds-radio-line-height:1.35;
2300
+ --tds-radio-input-size:var(--t-element-size-sm);
2301
+ --tds-radio-font-size:var(--t-font-size-sm);
2302
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2303
+ --tds-radio-description-line-height:1.3;
2304
+ }
1963
2305
 
1964
2306
  .tds-segmented-control{
1965
2307
  --tds-segmented-control-font-size:var(--t-font-size-md);
@@ -2072,555 +2414,294 @@
2072
2414
  --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
2073
2415
  --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
2074
2416
 
2075
- cursor:default;
2076
- }
2077
-
2078
- .tds-segmented-control-segment:disabled{
2079
- --tds-segmented-control-background-color:transparent;
2080
- --tds-segmented-control-color:var(--t-text-color-disabled);
2081
-
2082
- pointer-events:none;
2083
- }
2084
-
2085
- .tds-segmented-control-segment[aria-checked="true"]:disabled{
2086
- --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-solid-disabled);
2087
- }
2088
-
2089
- .tds-segmented-control-segment--neutral-subtle{
2090
- --tds-segmented-control-color-checked:var(--t-text-color-status-neutral);
2091
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-neutral-solid-hover);
2092
- }
2093
-
2094
- .tds-segmented-control-segment--interaction-subtle{
2095
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
2096
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
2097
- }
2098
-
2099
- .tds-segmented-control-segment--interaction-bold{
2100
- --tds-segmented-control-color-checked:var(--t-text-color-inverted);
2101
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-solid);
2102
- }
2103
-
2104
- .tds-segmented-control-segment--success{
2105
- --tds-segmented-control-color-checked:var(--t-text-color-status-success);
2106
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-success-ghost);
2107
- }
2108
-
2109
- .tds-segmented-control-segment--warning{
2110
- --tds-segmented-control-color-checked:var(--t-text-color-status-warning);
2111
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-warning-ghost);
2112
- }
2113
-
2114
- .tds-segmented-control-segment--error{
2115
- --tds-segmented-control-color-checked:var(--t-text-color-status-error);
2116
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
2117
- }
2118
-
2119
- .tds-toggle-switch{
2120
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2121
- --tds-toggle-switch-cursor:pointer;
2122
- --tds-toggle-switch-display:inline-grid;
2123
- --tds-toggle-switch-line-height:1.4;
2124
-
2125
- --tds-toggle-switch-label-color:var(--t-form-color);
2126
-
2127
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2128
- --tds-toggle-switch-track-outline:none;
2129
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2130
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2131
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2132
-
2133
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2134
- --tds-toggle-switch-thumb-transform:translateX(0);
2135
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2136
-
2137
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2138
- --tds-toggle-switch-description-line-height:1.35;
2139
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2140
- position:relative;
2141
-
2142
- display:var(--tds-toggle-switch-display);
2143
- grid-template-columns:auto;
2144
- grid-auto-columns:1fr;
2145
- gap:var(--t-spacing-fourth) 0;
2146
- -webkit-user-select:none;
2147
- -moz-user-select:none;
2148
- user-select:none;
2149
- }
2150
-
2151
- .tds-toggle-switch input[type="checkbox"]{
2152
- position:absolute;
2153
- width:var(--tds-toggle-switch-track-width);
2154
- height:var(--tds-toggle-switch-track-height);
2155
- margin:0;
2156
- -webkit-appearance:none;
2157
- -moz-appearance:none;
2158
- appearance:none;
2159
- cursor:var(--tds-toggle-switch-cursor);
2160
- outline:var(--tds-toggle-switch-track-outline);
2161
- outline-offset:var(--t-focus-ring-offset);
2162
- background-color:transparent;
2163
- border:0;
2164
- border-radius:var(--t-border-radius-round);
2165
- }
2166
-
2167
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2168
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2169
- }
2170
-
2171
- .tds-toggle-switch label{
2172
- display:inline-flex;
2173
- grid-area:1 / 2;
2174
- padding-inline-start:var(--t-spacing-1);
2175
- margin-top:-.09375em;
2176
- font-size:var(--tds-toggle-switch-font-size);
2177
- font-weight:var(--t-font-weight-normal);
2178
- line-height:var(--tds-toggle-switch-line-height);
2179
- color:var(--tds-toggle-switch-label-color);
2180
- cursor:var(--tds-toggle-switch-cursor);
2181
- }
2182
-
2183
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2184
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2185
- }
2186
-
2187
- .tds-toggle-switch:has(input:checked){
2188
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2189
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2190
- }
2191
-
2192
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2193
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2194
- }
2195
-
2196
- .tds-toggle-switch:has(input:disabled){
2197
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2198
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2199
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2200
- --tds-toggle-switch-cursor:not-allowed;
2201
- }
2202
-
2203
- .tds-toggle-switch-track{
2204
- position:relative;
2205
- flex-shrink:0;
2206
- width:var(--tds-toggle-switch-track-width);
2207
- height:var(--tds-toggle-switch-track-height);
2208
- background-color:var(--tds-toggle-switch-track-background-color);
2209
- border-radius:var(--t-border-radius-round);
2210
- transition:var(--tds-toggle-switch-track-transition);
2211
- }
2212
-
2213
- .tds-toggle-switch-track::before{
2214
- position:absolute;
2215
- top:var(--t-spacing-fourth);
2216
- left:var(--t-spacing-fourth);
2217
- width:var(--tds-toggle-switch-thumb-size);
2218
- height:var(--tds-toggle-switch-thumb-size);
2219
- content:"";
2220
- background-color:#fff;
2221
- border-radius:var(--t-border-radius-round);
2222
- transform:var(--tds-toggle-switch-thumb-transform);
2223
- transition:var(--tds-toggle-switch-thumb-transition);
2224
- }
2225
-
2226
- @media (prefers-reduced-motion: reduce){
2227
-
2228
- .tds-toggle-switch-track{
2229
- --tds-toggle-switch-track-transition:none;
2230
- --tds-toggle-switch-thumb-transition:none;
2231
- }
2232
- }
2233
-
2234
- .tds-toggle-switch-description{
2235
- display:flex;
2236
- grid-area:2 / 2;
2237
- align-items:flex-start;
2238
- padding-inline-start:var(--t-spacing-1);
2239
- margin:0;
2240
- font-size:var(--tds-toggle-switch-description-font-size);
2241
- line-height:var(--tds-toggle-switch-description-line-height);
2242
- color:var(--tds-toggle-switch-description-color);
2243
- cursor:text;
2244
- }
2245
-
2246
- .tds-toggle-switch--sm{
2247
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2248
- --tds-toggle-switch-line-height:1.35;
2249
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2250
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2251
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2252
- --tds-toggle-switch-description-line-height:1.3;
2253
- }
2254
-
2255
- .tds-toggle-switch--hide-label{
2256
- --tds-toggle-switch-display:inline-flex;
2257
- }
2258
-
2259
-
2260
- @media (prefers-reduced-motion: no-preference){
2261
-
2262
- :root{
2263
- interpolate-size:allow-keywords;
2264
- }
2265
- }
2266
-
2267
- @layer tds-component{
2268
- tds-sidenav,
2269
- .tds-sidenav{
2270
- --tds-sidenav-indent:12px;
2271
- --tds-sidenav-item-depth:0;
2272
-
2273
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2274
-
2275
- --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;
2276
- --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;
2277
- --tds-sidenav-collapse-closed-opacity:0;
2278
- --tds-sidenav-collapse-open-opacity:1;
2279
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
2280
- --tds-sidenav-collapse-open-transform:translateY(0);
2281
-
2282
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
2283
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2284
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2285
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2286
-
2287
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2288
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2289
- --tds-sidenav-item-nested-background-selected:transparent;
2290
-
2291
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2292
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2293
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2294
-
2295
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2296
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2297
- }
2298
-
2299
- @media (prefers-reduced-motion: reduce){
2300
- tds-sidenav,
2301
- .tds-sidenav{
2302
- --tds-sidenav-collapse-transition-enter:none;
2303
- --tds-sidenav-collapse-transition-exit:none;
2304
- --tds-sidenav-collapse-closed-transform:none;
2305
- --tds-sidenav-collapse-open-transform:none;
2306
- }
2307
- }
2308
-
2309
- .tds-sidenav--theme-gray{
2310
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2311
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2312
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2313
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2314
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2315
- }
2316
- }
2317
-
2318
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2319
- display:flex;
2417
+ cursor:default;
2320
2418
  }
2321
2419
 
2322
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2323
- flex-direction:column;
2324
- gap:var(--t-spacing-half);
2325
- width:100%;
2420
+ .tds-segmented-control-segment:disabled{
2421
+ --tds-segmented-control-background-color:transparent;
2422
+ --tds-segmented-control-color:var(--t-text-color-disabled);
2423
+
2424
+ pointer-events:none;
2326
2425
  }
2327
2426
 
2328
- .tds-sidenav-section-list{
2329
- width:100%;
2330
- padding:0;
2331
- margin:0;
2332
- list-style:none;
2427
+ .tds-segmented-control-segment[aria-checked="true"]:disabled{
2428
+ --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-solid-disabled);
2429
+ }
2430
+
2431
+ .tds-segmented-control-segment--neutral-subtle{
2432
+ --tds-segmented-control-color-checked:var(--t-text-color-status-neutral);
2433
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-neutral-solid-hover);
2333
2434
  }
2334
2435
 
2335
- .tds-sidenav-section-header{
2336
- display:flex;
2337
- align-items:baseline;
2338
- justify-content:space-between;
2339
- padding-top:var(--t-spacing-2);
2436
+ .tds-segmented-control-segment--interaction-subtle{
2437
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
2438
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
2340
2439
  }
2341
2440
 
2342
- .tds-sidenav-section-header h2{
2343
- margin:0;
2344
- font-size:var(--t-font-size-sm);
2345
- font-weight:var(--t-font-weight-semibold);
2346
- line-height:1.35;
2347
- color:var(--t-text-color-secondary);
2348
- text-transform:uppercase;
2349
- }
2441
+ .tds-segmented-control-segment--interaction-bold{
2442
+ --tds-segmented-control-color-checked:var(--t-text-color-inverted);
2443
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-solid);
2444
+ }
2350
2445
 
2351
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2352
- padding-top:0;
2353
- }
2446
+ .tds-segmented-control-segment--success{
2447
+ --tds-segmented-control-color-checked:var(--t-text-color-status-success);
2448
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-success-ghost);
2449
+ }
2354
2450
 
2355
- .tds-sidenav-section-header .tds-sidenav-section-label-actions,.tds-sidenav-section-header [slot="label-actions"]{
2356
- display:flex;
2357
- gap:var(--t-spacing-half);
2358
- align-items:center;
2359
- }
2360
- .tds-sidenav-section-actions,
2361
- .tds-sidenav-section [slot="section-actions"]{
2362
- display:flex;
2363
- gap:12px;
2364
- align-items:center;
2365
- min-height:42px;
2366
- padding:var(--t-spacing-1) 0;
2451
+ .tds-segmented-control-segment--warning{
2452
+ --tds-segmented-control-color-checked:var(--t-text-color-status-warning);
2453
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-warning-ghost);
2367
2454
  }
2368
- .tds-sidenav-section-label-actions > [slot="label-actions"],
2369
- .tds-sidenav-section-actions > [slot="section-actions"]{
2370
- display:contents;
2455
+
2456
+ .tds-segmented-control-segment--error{
2457
+ --tds-segmented-control-color-checked:var(--t-text-color-status-error);
2458
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
2371
2459
  }
2372
2460
 
2373
- .tds-sidenav-section-list,
2374
- .tds-sidenav-item{
2375
- width:100%;
2376
- padding:0;
2377
- margin:0;
2461
+ .tds-input:has(textarea){
2462
+ --tds-input-padding-block:6px;
2463
+ --tds-input-resizer-size:var(--t-element-size-sm);
2464
+ --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");
2378
2465
  }
2379
2466
 
2380
- .tds-sidenav-item :is(a,button){
2381
- position:relative;
2382
- display:flex;
2383
- gap:12px;
2384
- align-items:center;
2385
- width:100%;
2386
- padding:12px;
2387
- overflow:hidden;
2388
- font-size:var(--t-font-size-sm);
2389
- line-height:18px;
2390
- color:var(--t-text-color-headline);
2391
- white-space:nowrap;
2392
- text-decoration:none;
2393
- -webkit-appearance:none;
2394
- -moz-appearance:none;
2395
- appearance:none;
2396
- cursor:pointer;
2397
- background-color:var(--tds-sidenav-item-background, transparent);
2398
- border:0;
2399
- border-radius:var(--t-border-radius);
2400
- transition:var(--tds-sidenav-item-transition);
2467
+ @supports (x: attr(x type(*))){
2468
+
2469
+ .tds-input textarea{
2470
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2471
+ }
2401
2472
  }
2402
2473
 
2403
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2404
- display:block;
2405
- flex:1;
2406
- overflow:hidden;
2407
- text-overflow:ellipsis;
2408
- text-align:left;
2409
- white-space:nowrap;
2474
+ .tds-input.tds-textarea--resize-vertical textarea{
2475
+ resize:vertical;
2410
2476
  }
2411
2477
 
2412
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2413
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2414
- color:var(--t-text-color-headline);
2415
- text-decoration:none;
2478
+ .tds-input.tds-textarea--resize-none textarea{
2479
+ resize:none;
2416
2480
  }
2417
2481
 
2418
- :is(.tds-sidenav-item :is(a,button)):active{
2419
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2482
+ .tds-input.tds-textarea--resize-auto textarea{
2483
+ resize:vertical;
2420
2484
  }
2421
2485
 
2422
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2423
- overflow:hidden;
2424
- color:var(--tds-sidenav-item-icon-color);
2486
+ @supports (field-sizing: content){
2487
+ .tds-input.tds-textarea--resize-auto textarea{
2488
+ field-sizing:content;
2489
+ resize:none;
2490
+ }
2425
2491
  }
2426
2492
 
2427
- :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{
2428
- display:block;
2429
- width:var(--tds-sidenav-item-icon-size);
2430
- height:var(--tds-sidenav-item-icon-size);
2431
- }
2493
+ .tds-input textarea{
2494
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2495
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
2496
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2497
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2498
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2499
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2500
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2501
+ --tds-input-scrollbar-thumb-border-radius:999px;
2502
+ --tds-input-scrollbar-thumb-border-width:3px;
2503
+ --tds-input-scrollbar-track-margin-block:.125rem;
2504
+ scrollbar-color:initial;
2505
+ transition-timing-function:var(--t-ease-in-out);
2506
+ transition-duration:var(--t-duration-200);
2507
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2508
+ }
2432
2509
 
2433
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2434
- --tds-sidenav-indent:19px;
2510
+ @media (pointer: fine){
2511
+ :is(.tds-input textarea)::-webkit-scrollbar{
2512
+ width:12px;
2513
+ height:12px;
2514
+ cursor:default;
2435
2515
  }
2436
2516
 
2437
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2438
- visibility:visible;
2439
- block-size:auto;
2440
- opacity:1;
2517
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2518
+ cursor:default;
2519
+ background:var(--tds-input-scrollbar-thumb-color);
2520
+ background-clip:content-box;
2521
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2522
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2441
2523
  }
2442
2524
 
2443
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2444
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2445
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2446
-
2447
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2448
- font-weight:var(--t-font-weight-semibold);
2449
- }
2450
-
2451
- .tds-sidenav-item:has(.tds-sidenav-section){
2452
- display:flex;
2453
- flex-direction:column;
2454
- gap:var(--t-spacing-half);
2455
- }
2456
-
2457
- .tds-sidenav-item .tds-sidenav-section-list{
2458
- --tds-sidenav-item-depth:1;
2459
- gap:0;
2460
- }
2461
-
2462
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2463
- visibility:hidden;
2464
- block-size:0;
2465
- overflow-y:clip;
2466
- opacity:0;
2467
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2525
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2526
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2468
2527
  }
2469
2528
 
2470
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2471
- --tds-sidenav-item-depth:2;
2529
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2530
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2472
2531
  }
2473
2532
 
2474
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2475
- min-height:var(--t-element-size-2xl);
2476
- padding-block:9px;
2477
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2478
- line-height:1;
2479
- background-color:transparent;
2533
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2534
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2480
2535
  }
2481
2536
 
2482
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2483
- position:absolute;
2484
- top:0;
2485
- bottom:0;
2486
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2487
- width:2px;
2488
- content:"";
2489
- background-color:var(--tds-sidenav-item-nested-border-color);
2490
- transition:var(--tds-sidenav-item-transition);
2491
- }
2537
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2538
+ background:var(--tds-input-scrollbar-surface-color);
2539
+ }
2492
2540
 
2493
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2494
- position:absolute;
2495
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2496
- z-index:-1;
2497
- height:100%;
2498
- content:"";
2499
- background-color:var(--tds-sidenav-item-nested-background);
2500
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2501
- transition:var(--tds-sidenav-item-transition);
2502
- }
2541
+ :is(.tds-input textarea)::-webkit-resizer{
2542
+ background:var(--tds-input-resizer-icon) no-repeat;
2543
+ background-position:right bottom;
2544
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2545
+ }
2503
2546
 
2504
- :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)){
2505
- display:block;
2506
- text-align:left;
2507
- white-space:normal;
2508
- }
2547
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2548
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2549
+ cursor:default;
2550
+ }
2509
2551
 
2510
- :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{
2511
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2512
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2552
+ @supports (-moz-appearance: none){
2553
+ :is(.tds-input textarea){
2554
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2555
+ scrollbar-width:thin;
2513
2556
  }
2514
2557
 
2515
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2516
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2558
+ @media (hover){
2559
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2560
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2561
+ }
2517
2562
  }
2518
-
2519
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2520
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2521
- font-weight:var(--t-font-weight-medium);
2522
2563
  }
2564
+ }
2523
2565
 
2524
- .tds-sidenav-responsive-header{
2525
- display:flex;
2526
- gap:var(--t-spacing-2);
2527
- align-items:center;
2528
- width:100%;
2529
- }
2566
+ .tds-toggle-switch{
2567
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2568
+ --tds-toggle-switch-cursor:pointer;
2569
+ --tds-toggle-switch-display:inline-grid;
2570
+ --tds-toggle-switch-line-height:1.4;
2530
2571
 
2531
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2532
- order:0;
2533
- }
2572
+ --tds-toggle-switch-label-color:var(--t-form-color);
2534
2573
 
2535
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2536
- flex:1;
2537
- order:1;
2574
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2575
+ --tds-toggle-switch-track-outline:none;
2576
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2577
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2578
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2579
+
2580
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2581
+ --tds-toggle-switch-thumb-transform:translateX(0);
2582
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2583
+
2584
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2585
+ --tds-toggle-switch-description-line-height:1.35;
2586
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2587
+ position:relative;
2588
+
2589
+ display:var(--tds-toggle-switch-display);
2590
+ grid-template-columns:auto;
2591
+ grid-auto-columns:1fr;
2592
+ gap:var(--t-spacing-fourth) 0;
2593
+ -webkit-user-select:none;
2594
+ -moz-user-select:none;
2595
+ user-select:none;
2596
+ }
2597
+
2598
+ .tds-toggle-switch input[type="checkbox"]{
2599
+ position:absolute;
2600
+ width:var(--tds-toggle-switch-track-width);
2601
+ height:var(--tds-toggle-switch-track-height);
2538
2602
  margin:0;
2539
- font-size:var(--t-font-size-lg);
2540
- font-weight:var(--t-font-weight-medium);
2541
- color:var(--t-text-color-headline);
2603
+ -webkit-appearance:none;
2604
+ -moz-appearance:none;
2605
+ appearance:none;
2606
+ cursor:var(--tds-toggle-switch-cursor);
2607
+ outline:var(--tds-toggle-switch-track-outline);
2608
+ outline-offset:var(--t-focus-ring-offset);
2609
+ background-color:transparent;
2610
+ border:0;
2611
+ border-radius:var(--t-border-radius-round);
2542
2612
  }
2543
2613
 
2544
- @media (max-width: 719px){
2545
- .tds-sidenav-collapse{
2546
- z-index:10001;
2547
- display:none;
2548
- max-width:min(448px, calc(100vw - 48px));
2549
- padding:0;
2550
- margin:12px 0;
2551
- position-area:bottom span-right;
2552
- overflow:hidden;
2553
- outline:0;
2554
- background:var(--t-surface-color-card);
2555
- border:0;
2556
- border-radius:6px;
2557
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2558
- opacity:var(--tds-sidenav-collapse-open-opacity);
2559
- transform:var(--tds-sidenav-collapse-open-transform);
2560
- transition:var(--tds-sidenav-collapse-transition-enter);
2561
- will-change:transform;
2614
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2615
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2616
+ }
2617
+
2618
+ .tds-toggle-switch label{
2619
+ display:inline-flex;
2620
+ grid-area:1 / 2;
2621
+ padding-inline-start:var(--t-spacing-1);
2622
+ margin-top:-.09375em;
2623
+ font-size:var(--tds-toggle-switch-font-size);
2624
+ font-weight:var(--t-font-weight-normal);
2625
+ line-height:var(--tds-toggle-switch-line-height);
2626
+ color:var(--tds-toggle-switch-label-color);
2627
+ cursor:var(--tds-toggle-switch-cursor);
2562
2628
  }
2563
2629
 
2564
- .tds-sidenav-scroll-container{
2565
- --webkit-overflow-scrolling:touch;
2566
- display:block;
2567
- width:100%;
2568
- height:-moz-fit-content;
2569
- height:fit-content;
2570
- padding:var(--t-spacing-2);
2571
- overflow-y:auto;
2630
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2631
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2572
2632
  }
2573
2633
 
2574
- .tds-sidenav-item :is(a, button) :is(.prefix){
2575
- display:none;
2634
+ .tds-toggle-switch:has(input:checked){
2635
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2636
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2576
2637
  }
2577
- @supports selector(:popover-open){
2578
- .tds-sidenav-collapse:popover-open{
2579
- display:flex;
2580
- }
2581
2638
 
2582
- .tds-sidenav-collapse:not(:popover-open){
2583
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2584
- transition:var(--tds-sidenav-collapse-transition-exit);
2639
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2640
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2585
2641
  }
2586
2642
 
2587
- @starting-style{
2588
- .tds-sidenav-collapse:popover-open{
2589
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2590
- transform:var(--tds-sidenav-collapse-closed-transform);
2591
- }
2592
- }
2643
+ .tds-toggle-switch:has(input:disabled){
2644
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2645
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2646
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2647
+ --tds-toggle-switch-cursor:not-allowed;
2593
2648
  }
2594
- @supports not selector(:popover-open){
2595
- .tds-sidenav-collapse.\:popover-open{
2596
- display:flex;
2597
- }
2598
2649
 
2599
- .tds-sidenav-collapse:not(.\:popover-open){
2600
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2601
- transition:var(--tds-sidenav-collapse-transition-exit);
2602
- }
2603
- }
2650
+ .tds-toggle-switch-track{
2651
+ position:relative;
2652
+ flex-shrink:0;
2653
+ width:var(--tds-toggle-switch-track-width);
2654
+ height:var(--tds-toggle-switch-track-height);
2655
+ background-color:var(--tds-toggle-switch-track-background-color);
2656
+ border-radius:var(--t-border-radius-round);
2657
+ transition:var(--tds-toggle-switch-track-transition);
2604
2658
  }
2605
2659
 
2606
- @media (min-width: 720px){
2607
- .tds-sidenav-responsive-header{
2608
- display:none;
2660
+ .tds-toggle-switch-track::before{
2661
+ position:absolute;
2662
+ top:var(--t-spacing-fourth);
2663
+ left:var(--t-spacing-fourth);
2664
+ width:var(--tds-toggle-switch-thumb-size);
2665
+ height:var(--tds-toggle-switch-thumb-size);
2666
+ content:"";
2667
+ background-color:#fff;
2668
+ border-radius:var(--t-border-radius-round);
2669
+ transform:var(--tds-toggle-switch-thumb-transform);
2670
+ transition:var(--tds-toggle-switch-thumb-transition);
2609
2671
  }
2672
+
2673
+ @media (prefers-reduced-motion: reduce){
2674
+
2675
+ .tds-toggle-switch-track{
2676
+ --tds-toggle-switch-track-transition:none;
2677
+ --tds-toggle-switch-thumb-transition:none;
2610
2678
  }
2679
+ }
2611
2680
 
2612
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2613
- display:none;
2614
- }
2681
+ .tds-toggle-switch-description{
2682
+ display:flex;
2683
+ grid-area:2 / 2;
2684
+ align-items:flex-start;
2685
+ padding-inline-start:var(--t-spacing-1);
2686
+ margin:0;
2687
+ font-size:var(--tds-toggle-switch-description-font-size);
2688
+ line-height:var(--tds-toggle-switch-description-line-height);
2689
+ color:var(--tds-toggle-switch-description-color);
2690
+ cursor:text;
2691
+ }
2615
2692
 
2616
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2617
- display:block;
2618
- }
2693
+ .tds-toggle-switch--sm{
2694
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2695
+ --tds-toggle-switch-line-height:1.35;
2696
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2697
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2698
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2699
+ --tds-toggle-switch-description-line-height:1.3;
2700
+ }
2619
2701
 
2620
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2621
- display:flex;
2622
- flex-direction:column;
2623
- }
2702
+ .tds-toggle-switch--hide-label{
2703
+ --tds-toggle-switch-display:inline-flex;
2704
+ }
2624
2705
 
2625
2706
  .tds-input{
2626
2707
  --tds-input-border-color:var(--t-form-border-color);
@@ -2759,6 +2840,58 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2759
2840
  line-height:1.35;
2760
2841
  }
2761
2842
 
2843
+ tds-helper-shelf{
2844
+ display:contents;
2845
+ }
2846
+
2847
+ .tds-helper-shelf{
2848
+ --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
2849
+ --tds-helper-shelf-border-radius:var(--t-border-radius-md);
2850
+ --tds-helper-shelf-color:var(--t-text-color);
2851
+ --tds-helper-shelf-font-size:var(--t-font-size-sm);
2852
+ --tds-helper-shelf-line-height:1.5;
2853
+ --tds-helper-shelf-padding:var(--t-spacing-1);
2854
+
2855
+ height:0;
2856
+ overflow:hidden;
2857
+ transition:height var(--t-duration-300) var(--t-ease-in);
2858
+ }
2859
+
2860
+ @media (prefers-reduced-motion: reduce){
2861
+
2862
+ .tds-helper-shelf{
2863
+ transition:none;
2864
+ }
2865
+ }
2866
+
2867
+ .tds-helper-shelf--expanded{
2868
+ height:auto;
2869
+ transition-timing-function:var(--t-ease-out);
2870
+ }
2871
+
2872
+ @supports (interpolate-size: allow-keywords){
2873
+ .tds-helper-shelf{
2874
+ interpolate-size:allow-keywords;
2875
+ }
2876
+ }
2877
+
2878
+ .tds-helper-shelf-content{
2879
+ padding:var(--tds-helper-shelf-padding);
2880
+ font-size:var(--tds-helper-shelf-font-size);
2881
+ line-height:var(--tds-helper-shelf-line-height);
2882
+ color:var(--tds-helper-shelf-color);
2883
+ background:var(--tds-helper-shelf-background-color);
2884
+ border-radius:var(--tds-helper-shelf-border-radius);
2885
+ }
2886
+
2887
+ .tds-helper-shelf-trigger{
2888
+ --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
2889
+ }
2890
+
2891
+ .tds-helper-shelf-trigger[aria-expanded="true"]{
2892
+ --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
2893
+ }
2894
+
2762
2895
  @layer t-critical, t-component;
2763
2896
 
2764
2897
  :root{
@@ -5352,87 +5485,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5352
5485
  }
5353
5486
  }
5354
5487
 
5355
- .tds-pane{
5356
- --tds-pane-background-color:var(--t-surface-color-card);
5357
- --tds-pane-border-radius:var(--t-border-radius-lg);
5358
- --tds-pane-border-color:var(--t-border-color);
5359
-
5360
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
5361
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
5362
-
5363
- --tds-pane-title-color:var(--t-text-color-headline);
5364
- --tds-pane-title-font-size:var(--t-font-size-lg);
5365
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
5366
- --tds-pane-title-line-height:1.4;
5367
-
5368
- --tds-pane-body-padding:var(--t-spacing-3);
5369
-
5370
- --tds-pane-footer-padding-block:var(--t-spacing-2);
5371
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
5372
-
5373
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
5374
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
5375
-
5376
- background:var(--tds-pane-background-color);
5377
- border-radius:var(--tds-pane-border-radius);
5378
- border:var(--t-border-width) solid var(--tds-pane-border-color);
5379
- display:flex;
5380
- flex-direction:column;
5381
- }
5382
-
5383
- .tds-pane-header{
5384
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
5385
- padding-block:var(--tds-pane-header-padding-block);
5386
- padding-inline:var(--tds-pane-header-padding-inline);
5387
- }
5388
-
5389
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
5390
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
5391
- }
5392
-
5393
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
5394
- flex-basis:100%;
5395
- order:1;
5396
- }
5397
-
5398
- .tds-pane-header:has( > tds-helper-shelf){
5399
- row-gap:var(--tds-pane-header-padding-block);
5400
- padding-block-end:0;
5401
- }
5402
-
5403
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
5404
- font-size:var(--t-font-size-md);
5405
- margin-block-end:var(--tds-pane-header-padding-block);
5406
- }
5407
-
5408
- .tds-pane-title{
5409
- color:var(--tds-pane-title-color);
5410
- font-size:var(--tds-pane-title-font-size);
5411
- font-weight:var(--tds-pane-title-font-weight);
5412
- line-height:var(--tds-pane-title-line-height);
5413
- margin:0;
5414
- }
5415
-
5416
- .tds-pane-body{
5417
- padding:var(--tds-pane-body-padding);
5418
- }
5419
-
5420
- .tds-pane-footer{
5421
- padding-block-end:var(--tds-pane-footer-padding-block);
5422
- padding-inline:var(--tds-pane-footer-padding-inline);
5423
- }
5424
-
5425
- .tds-pane-divider{
5426
- border:0;
5427
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
5428
- margin-block:var(--tds-pane-divider-margin-block);
5429
- margin-inline:var(--tds-pane-divider-margin-inline);
5488
+ .tds-data-table-saved-view-default-indicator{
5489
+ display:inline-flex;
5490
+ margin-inline-start:var(--t-spacing-1);
5491
+ font-size:var(--t-font-size-sm);
5492
+ color:var(--t-text-color-secondary);
5430
5493
  }
5431
5494
 
5432
- .tds-pane-divider.tds-pane-divider--inset{
5433
- margin-inline:0;
5434
- }
5435
-
5436
5495
  .has-instance-badge-NNA9P{
5437
5496
  inline-size:6px;
5438
5497
  block-size:6px;
@@ -5510,17 +5569,69 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5510
5569
  }
5511
5570
 
5512
5571
  .views-list-item-cWGsC{
5572
+ position:relative;
5513
5573
  display:flex;
5514
5574
  -moz-column-gap:var(--t-spacing-1);
5515
5575
  column-gap:var(--t-spacing-1);
5516
5576
  }
5517
5577
 
5578
+ .views-list-item-cWGsC[data-dragging] > :not(.view-list-drop-indicator-zyDIt){
5579
+ opacity:.5;
5580
+ }
5581
+
5582
+ .view-list-item-drag-handle-fiO5Z{
5583
+ --tds-btn-color:var(--t-text-color-secondary);
5584
+
5585
+ cursor:grab;
5586
+ }
5587
+ .view-list-drop-indicator-zyDIt{
5588
+ --_drop-indicator-width:var(--t-spacing-fourth);
5589
+ position:absolute;
5590
+ inset-inline:0;
5591
+ block-size:var(--_drop-indicator-width);
5592
+ border-radius:var(--_drop-indicator-width);
5593
+ }
5594
+ .view-list-drop-indicator-zyDIt[data-drop-position="before"]{
5595
+ inset-block-start:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5596
+ }
5597
+ .view-list-drop-indicator-zyDIt[data-drop-position="after"]{
5598
+ inset-block-end:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5599
+ }
5600
+ .view-list-drop-indicator-zyDIt[data-drop-target]{
5601
+ background-color:var(--t-focus-ring-color);
5602
+ }
5603
+ @media (forced-colors: active){
5604
+ .view-list-drop-indicator-zyDIt[data-drop-target]{
5605
+ forced-color-adjust:none;
5606
+ background-color:Highlight;
5607
+ }
5608
+ }
5609
+
5610
+ .views-list-item--drag-ghost-zEVbL{
5611
+ padding:var(--t-spacing-half);
5612
+ background-color:var(--t-surface-color-canvas);
5613
+ border-radius:var(--t-border-radius-md);
5614
+ transform:translateZ(0);
5615
+ }
5616
+
5617
+ .views-list-item--drag-ghost-zEVbL button:not(.view-list-item-drag-handle-fiO5Z){
5618
+ opacity:.5;
5619
+ transition:none;
5620
+ }
5621
+
5518
5622
  .view-list-item-input-dowHY{
5519
5623
  flex-grow:1;
5520
5624
  }
5521
5625
 
5522
5626
  .views-list-item--static-9zGpJ{
5523
5627
  display:flex;
5628
+ -moz-column-gap:var(--t-spacing-1);
5629
+ column-gap:var(--t-spacing-1);
5630
+ }
5631
+
5632
+ .view-list-item-static-name-nxBiG{
5633
+ display:flex;
5634
+ flex-grow:1;
5524
5635
  align-items:center;
5525
5636
  min-block-size:var(--t-container-size-md);
5526
5637
  padding-inline:var(--t-spacing-1);
@@ -5634,97 +5745,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5634
5745
  }
5635
5746
  }
5636
5747
 
5637
- tds-helper-shelf{
5638
- display:contents;
5639
- }
5640
-
5641
- .tds-helper-shelf{
5642
- --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
5643
- --tds-helper-shelf-border-radius:var(--t-border-radius-md);
5644
- --tds-helper-shelf-color:var(--t-text-color);
5645
- --tds-helper-shelf-font-size:var(--t-font-size-sm);
5646
- --tds-helper-shelf-padding:var(--t-spacing-1);
5647
-
5648
- height:0;
5649
- overflow:hidden;
5650
- transition:height var(--t-duration-300) var(--t-ease-in);
5651
- }
5652
-
5653
- @media (prefers-reduced-motion: reduce){
5654
-
5655
- .tds-helper-shelf{
5656
- transition:none;
5657
- }
5658
- }
5659
-
5660
- .tds-helper-shelf--expanded{
5661
- height:auto;
5662
- transition-timing-function:var(--t-ease-out);
5663
- }
5664
-
5665
- @supports (interpolate-size: allow-keywords){
5666
- .tds-helper-shelf{
5667
- interpolate-size:allow-keywords;
5668
- }
5669
- }
5670
-
5671
- .tds-helper-shelf-content{
5672
- padding:var(--tds-helper-shelf-padding);
5673
- font-size:var(--tds-helper-shelf-font-size);
5674
- color:var(--tds-helper-shelf-color);
5675
- background:var(--tds-helper-shelf-background-color);
5676
- border-radius:var(--tds-helper-shelf-border-radius);
5677
- }
5678
-
5679
- .tds-helper-shelf-trigger{
5680
- --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
5681
- }
5682
-
5683
- .tds-helper-shelf-trigger[aria-expanded="true"]{
5684
- --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5685
- }
5686
-
5687
- .tds-reorderable-list-box{
5688
- --_drop-indicator-width:2px;
5689
- display:contents;
5690
- }
5691
-
5692
- .tds-reorderable-list-box-item{
5693
- cursor:pointer;
5694
- -webkit-user-select:none;
5695
- -moz-user-select:none;
5696
- user-select:none;
5697
- outline:0;
5698
- }
5699
-
5700
- .tds-reorderable-list-box-item[data-focus-visible]{
5701
- outline:var(--t-focus-ring-outline);
5702
- outline-offset:var(--t-focus-ring-offset);
5703
- }
5704
-
5705
- .tds-reorderable-list-box-item[data-dragging]{
5706
- opacity:.5;
5707
- }
5708
-
5709
- .tds-reorderable-list-box-drop-indicator{
5710
- align-self:stretch;
5711
- inline-size:var(--_drop-indicator-width);
5712
- margin-inline:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5713
- border-radius:var(--_drop-indicator-width);
5714
- }
5715
-
5716
- .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5717
- background-color:var(--t-focus-ring-color);
5718
- }
5719
-
5720
- @media (forced-colors: active){
5721
-
5722
- .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5723
- forced-color-adjust:none;
5724
- background-color:Highlight;
5725
- }
5726
- }
5727
-
5728
5748
  .tds-filterable-list-box:has(input:disabled){
5729
5749
  --tds-filterable-list-box-cursor:not-allowed;
5730
5750
  }
@@ -5937,6 +5957,47 @@ tds-helper-shelf{
5937
5957
  white-space:nowrap;
5938
5958
  }
5939
5959
 
5960
+ .tds-reorderable-list-box{
5961
+ --_drop-indicator-width:2px;
5962
+ display:contents;
5963
+ }
5964
+
5965
+ .tds-reorderable-list-box-item{
5966
+ cursor:pointer;
5967
+ -webkit-user-select:none;
5968
+ -moz-user-select:none;
5969
+ user-select:none;
5970
+ outline:0;
5971
+ }
5972
+
5973
+ .tds-reorderable-list-box-item[data-focus-visible]{
5974
+ outline:var(--t-focus-ring-outline);
5975
+ outline-offset:var(--t-focus-ring-offset);
5976
+ }
5977
+
5978
+ .tds-reorderable-list-box-item[data-dragging]{
5979
+ opacity:.5;
5980
+ }
5981
+
5982
+ .tds-reorderable-list-box-drop-indicator{
5983
+ align-self:stretch;
5984
+ inline-size:var(--_drop-indicator-width);
5985
+ margin-inline:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5986
+ border-radius:var(--_drop-indicator-width);
5987
+ }
5988
+
5989
+ .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5990
+ background-color:var(--t-focus-ring-color);
5991
+ }
5992
+
5993
+ @media (forced-colors: active){
5994
+
5995
+ .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5996
+ forced-color-adjust:none;
5997
+ background-color:Highlight;
5998
+ }
5999
+ }
6000
+
5940
6001
  .tds-alert-dialog{
5941
6002
  padding-block-start:0;
5942
6003
  text-align:center;
@@ -6867,6 +6928,15 @@ tds-helper-shelf{
6867
6928
  --tds-loading-spinner-visibility:visible;
6868
6929
  --tds-loading-spinner-animation-play-state:running;
6869
6930
  }
6931
+
6932
+ .tds-combo-box-loading-label--hidden{
6933
+ position:absolute;
6934
+ width:1px;
6935
+ height:1px;
6936
+ overflow:hidden;
6937
+ white-space:nowrap;
6938
+ clip-path:inset(50%);
6939
+ }
6870
6940
  .tds-combo-box-list-section:not(:first-child){
6871
6941
  margin-block-start:var(--t-spacing-half);
6872
6942
  }