@planningcenter/tapestry 4.11.0 → 4.12.0-rc.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 (104) hide show
  1. package/dist/components/DataTable/DataTable.d.ts +47 -13
  2. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  3. package/dist/components/DataTable/DataTable.js +29 -23
  4. package/dist/components/DataTable/DataTable.js.map +1 -1
  5. package/dist/components/DataTable/DeleteSavedViewAlertDialog.d.ts +14 -0
  6. package/dist/components/DataTable/DeleteSavedViewAlertDialog.d.ts.map +1 -0
  7. package/dist/components/DataTable/DeleteSavedViewAlertDialog.js +10 -0
  8. package/dist/components/DataTable/DeleteSavedViewAlertDialog.js.map +1 -0
  9. package/dist/components/DataTable/ManageSavedViewsButton.d.ts +4 -1
  10. package/dist/components/DataTable/ManageSavedViewsButton.d.ts.map +1 -1
  11. package/dist/components/DataTable/ManageSavedViewsButton.js +3 -7
  12. package/dist/components/DataTable/ManageSavedViewsButton.js.map +1 -1
  13. package/dist/components/DataTable/ManageSavedViewsModal.d.ts +8 -1
  14. package/dist/components/DataTable/ManageSavedViewsModal.d.ts.map +1 -1
  15. package/dist/components/DataTable/ManageSavedViewsModal.js +116 -5
  16. package/dist/components/DataTable/ManageSavedViewsModal.js.map +1 -1
  17. package/dist/components/DataTable/ManageSavedViewsModal.module.css.js +4 -0
  18. package/dist/components/DataTable/ManageSavedViewsModal.module.css.js.map +1 -0
  19. package/dist/components/DataTable/NewSavedViewModal.d.ts +4 -1
  20. package/dist/components/DataTable/NewSavedViewModal.d.ts.map +1 -1
  21. package/dist/components/DataTable/NewSavedViewModal.js.map +1 -1
  22. package/dist/components/DataTable/ResultsCount.d.ts +9 -0
  23. package/dist/components/DataTable/ResultsCount.d.ts.map +1 -1
  24. package/dist/components/DataTable/ResultsCount.js +1 -1
  25. package/dist/components/DataTable/ResultsCount.js.map +1 -1
  26. package/dist/components/DataTable/SavedViewsBar.d.ts +14 -6
  27. package/dist/components/DataTable/SavedViewsBar.d.ts.map +1 -1
  28. package/dist/components/DataTable/SavedViewsBar.js +162 -45
  29. package/dist/components/DataTable/SavedViewsBar.js.map +1 -1
  30. package/dist/components/DataTable/TableActions.d.ts.map +1 -1
  31. package/dist/components/DataTable/TableActions.js +4 -6
  32. package/dist/components/DataTable/TableActions.js.map +1 -1
  33. package/dist/components/DataTable/ViewSettingsToggle.d.ts.map +1 -1
  34. package/dist/components/DataTable/ViewSettingsToggle.js +2 -4
  35. package/dist/components/DataTable/ViewSettingsToggle.js.map +1 -1
  36. package/dist/components/DataTable/index.d.ts +1 -1
  37. package/dist/components/DataTable/index.d.ts.map +1 -1
  38. package/dist/components/DataTable/savedViews.d.ts +16 -15
  39. package/dist/components/DataTable/savedViews.d.ts.map +1 -1
  40. package/dist/components/DataTable/savedViews.js +28 -6
  41. package/dist/components/DataTable/savedViews.js.map +1 -1
  42. package/dist/components/DataTable/useActiveSavedView.d.ts +1 -1
  43. package/dist/components/DataTable/useActiveSavedView.d.ts.map +1 -1
  44. package/dist/components/DataTable/useActiveSavedView.js +9 -3
  45. package/dist/components/DataTable/useActiveSavedView.js.map +1 -1
  46. package/dist/components/DataTable/useFilterAnnouncement.d.ts +24 -0
  47. package/dist/components/DataTable/useFilterAnnouncement.d.ts.map +1 -0
  48. package/dist/components/DataTable/useFilterAnnouncement.js +49 -0
  49. package/dist/components/DataTable/useFilterAnnouncement.js.map +1 -0
  50. package/dist/components/DataTable/useUpdateSavedViewName.d.ts +7 -0
  51. package/dist/components/DataTable/useUpdateSavedViewName.d.ts.map +1 -0
  52. package/dist/components/DataTable/useUpdateSavedViewName.js +12 -0
  53. package/dist/components/DataTable/useUpdateSavedViewName.js.map +1 -0
  54. package/dist/components/button/ActionsDropdownIconButton.d.ts +17 -9
  55. package/dist/components/button/ActionsDropdownIconButton.d.ts.map +1 -1
  56. package/dist/components/button/ActionsDropdownIconButton.js +5 -2
  57. package/dist/components/button/ActionsDropdownIconButton.js.map +1 -1
  58. package/dist/components/button/DropdownIconButton.d.ts +4 -5
  59. package/dist/components/button/DropdownIconButton.d.ts.map +1 -1
  60. package/dist/components/button/DropdownIconButton.js +2 -1
  61. package/dist/components/button/DropdownIconButton.js.map +1 -1
  62. package/dist/components/button/IconButton.d.ts +33 -10
  63. package/dist/components/button/IconButton.d.ts.map +1 -1
  64. package/dist/components/button/IconButton.js +8 -2
  65. package/dist/components/button/IconButton.js.map +1 -1
  66. package/dist/components/button/ToggleIconButton.d.ts +2 -2
  67. package/dist/components/button/ToggleIconButton.d.ts.map +1 -1
  68. package/dist/components/button/ToggleIconButton.js.map +1 -1
  69. package/dist/components/button/index.d.ts +1 -0
  70. package/dist/components/button/index.d.ts.map +1 -1
  71. package/dist/components/combo-box/ComboBox.d.ts +6 -0
  72. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  73. package/dist/components/combo-box/ComboBox.js.map +1 -1
  74. package/dist/components/internal/alert-dialog/AlertDialog.d.ts +56 -0
  75. package/dist/components/internal/alert-dialog/AlertDialog.d.ts.map +1 -0
  76. package/dist/components/internal/alert-dialog/AlertDialog.js +68 -0
  77. package/dist/components/internal/alert-dialog/AlertDialog.js.map +1 -0
  78. package/dist/components/internal/alert-dialog/index.d.ts +5 -0
  79. package/dist/components/internal/alert-dialog/index.d.ts.map +1 -0
  80. package/dist/components/internal/tooltip/Tooltip.d.ts +9 -3
  81. package/dist/components/internal/tooltip/Tooltip.d.ts.map +1 -1
  82. package/dist/components/internal/tooltip/Tooltip.js +63 -8
  83. package/dist/components/internal/tooltip/Tooltip.js.map +1 -1
  84. package/dist/components/pane/PaneDivider.d.ts +5 -2
  85. package/dist/components/pane/PaneDivider.d.ts.map +1 -1
  86. package/dist/components/pane/PaneDivider.js +2 -2
  87. package/dist/components/pane/PaneDivider.js.map +1 -1
  88. package/dist/index.css +27 -27
  89. package/dist/index.css.map +1 -1
  90. package/dist/reactRender.css +1301 -1189
  91. package/dist/reactRender.css.map +1 -1
  92. package/dist/reactRenderLegacy.css +1301 -1189
  93. package/dist/reactRenderLegacy.css.map +1 -1
  94. package/dist/tapestryMount.css +1301 -1189
  95. package/dist/tapestryMount.css.map +1 -1
  96. package/dist/tapestryMountLegacy.css +1301 -1189
  97. package/dist/tapestryMountLegacy.css.map +1 -1
  98. package/dist/unstable.css +112 -0
  99. package/dist/unstable.css.map +1 -1
  100. package/dist/utilities/useAnnounce.d.ts +15 -0
  101. package/dist/utilities/useAnnounce.d.ts.map +1 -0
  102. package/dist/utilities/useAnnounce.js +27 -0
  103. package/dist/utilities/useAnnounce.js.map +1 -0
  104. package/package.json +3 -4
@@ -677,372 +677,283 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
-
681
- @media (prefers-reduced-motion: no-preference){
682
-
683
- :root{
684
- interpolate-size:allow-keywords;
685
- }
680
+ @layer t-critical{
681
+ tds-page-header:not(.hydrated){
682
+ display:none;
686
683
  }
684
+ }
687
685
 
688
- @layer tds-component{
689
- tds-sidenav,
690
- .tds-sidenav{
691
- --tds-sidenav-indent:12px;
692
- --tds-sidenav-item-depth:0;
693
-
694
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
695
-
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);
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;
702
704
 
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);
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);
707
707
 
708
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
709
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
710
- --tds-sidenav-item-nested-background-selected:transparent;
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);
711
711
 
712
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
713
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
714
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
715
714
 
716
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
717
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
718
- }
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);
719
718
 
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;
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);
727
724
  }
728
- }
729
725
 
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);
726
+ .tds-page-header--profile{
727
+ --tds-page-header-padding-y:20px;
736
728
  }
737
- }
738
729
 
739
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
740
- display:flex;
730
+ @supports (color: light-dark(#fff, #000)){
731
+ .tds-page-header{
732
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
733
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
734
+ }
741
735
  }
742
736
 
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%;
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
+ }
747
756
  }
748
-
749
- .tds-sidenav-section-list{
750
- width:100%;
751
- padding:0;
752
- margin:0;
753
- list-style:none;
754
757
  }
755
758
 
756
- .tds-sidenav-section-header{
759
+ .tds-page-header{
757
760
  display:flex;
758
- align-items:baseline;
759
- justify-content:space-between;
760
- padding-top:var(--t-spacing-2);
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);
761
766
  }
762
767
 
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;
768
+ .tds-page-header:not(.has-nav){
769
+ padding-bottom:var(--tds-page-header-padding-y);
770
770
  }
771
771
 
772
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
773
- padding-top:0;
772
+ .tds-page-header.inactive{
773
+ background:var(--tds-page-header-background-color-inactive);
774
774
  }
775
775
 
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;
776
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
777
+ width:100%;
780
778
  }
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
- }
793
-
794
- .tds-sidenav-section-list,
795
- .tds-sidenav-item{
796
- width:100%;
797
- padding:0;
798
- margin:0;
799
- }
800
779
 
801
- .tds-sidenav-item :is(a,button){
802
- position:relative;
780
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
803
781
  display:flex;
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);
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;
822
787
  }
823
788
 
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;
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);
831
797
  }
832
798
 
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);
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;
836
807
  text-decoration:none;
808
+ -webkit-appearance:none;
809
+ -moz-appearance:none;
810
+ appearance:none;
811
+ cursor:pointer;
812
+ outline-offset:-2px;
813
+ background-color:var(--tds-page-header-nav-item-background-color);
814
+ background-clip:padding-box;
815
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
816
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
817
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
837
818
  }
838
819
 
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);
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);
852
825
  }
853
826
 
854
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
855
- --tds-sidenav-indent:19px;
856
- }
857
-
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
- }
863
-
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);
867
-
868
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
869
- font-weight:var(--t-font-weight-semibold);
870
- }
871
-
872
- .tds-sidenav-item:has(.tds-sidenav-section){
873
- display:flex;
874
- flex-direction:column;
875
- gap:var(--t-spacing-half);
876
- }
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
+ }
877
833
 
878
- .tds-sidenav-item .tds-sidenav-section-list{
879
- --tds-sidenav-item-depth:1;
880
- gap:0;
881
- }
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
+ }
882
839
 
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);
889
- }
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
+ }
890
847
 
891
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
892
- --tds-sidenav-item-depth:2;
893
- }
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
+ }
894
858
 
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;
859
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
860
+ position:relative;
901
861
  }
902
862
 
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);
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);
912
866
  }
913
867
 
914
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
915
869
  position:absolute;
916
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
917
- z-index:-1;
918
- height:100%;
870
+ top:-5px;
871
+ right:-2px;
872
+ width:10px;
873
+ height:10px;
919
874
  content:"";
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);
923
- }
924
-
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;
929
- }
930
-
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);
875
+ background:var(--tds-page-header-nav-item-indicator-color);
876
+ border-radius:50%;
934
877
  }
935
878
 
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);
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
+ }
938
883
  }
939
884
 
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{
885
+ .tds-page-header__title-bar{
946
886
  display:flex;
947
- gap:var(--t-spacing-2);
948
- align-items:center;
949
- width:100%;
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);
950
892
  }
951
893
 
952
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
953
- order:0;
894
+ .tds-page-header--profile > .tds-page-header__title-bar{
895
+ align-items:center;
954
896
  }
955
897
 
956
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
957
- flex:1;
958
- order:1;
959
- margin:0;
960
- font-size:var(--t-font-size-lg);
961
- font-weight:var(--t-font-weight-medium);
962
- color:var(--t-text-color-headline);
963
- }
898
+ .tds-page-header__primary{
899
+ width:100%;
900
+ }
964
901
 
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;
902
+ .tds-page-header__primary h1{
903
+ margin:0;
904
+ font-size:var(--tds-page-header-headline-font-size);
905
+ font-weight:var(--t-font-weight-normal);
906
+ line-height:32px;
907
+ color:var(--tds-page-header-headline-color);
908
+ overflow-wrap:break-word;
983
909
  }
984
910
 
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;
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%;
993
917
  }
994
918
 
995
- .tds-sidenav-item :is(a, button) :is(.prefix){
996
- display:none;
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;
997
924
  }
998
- @supports selector(:popover-open){
999
- .tds-sidenav-collapse:popover-open{
1000
- display:flex;
925
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
926
+ width:auto;
1001
927
  }
1002
928
 
1003
- .tds-sidenav-collapse:not(:popover-open){
1004
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1005
- transition:var(--tds-sidenav-collapse-transition-exit);
929
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
930
+ justify-content:flex-end;
1006
931
  }
932
+ }
1007
933
 
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
- }
934
+ .tds-page-header-phone,
935
+ .tds-page-header-email{
936
+ color:var(--tds-page-header-color);
937
+ white-space:nowrap;
938
+ }
939
+ .tds-page-header-email{
940
+ max-width:100%;
941
+ overflow:hidden;
942
+ text-overflow:ellipsis;
943
+ }
1019
944
 
1020
- .tds-sidenav-collapse:not(.\:popover-open){
1021
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1022
- transition:var(--tds-sidenav-collapse-transition-exit);
1023
- }
945
+ @keyframes indicator-pulse{
946
+ 0%{
947
+ opacity:.3;
948
+ transform:scale(.9);
1024
949
  }
1025
- }
1026
950
 
1027
- @media (min-width: 720px){
1028
- .tds-sidenav-responsive-header{
1029
- display:none;
951
+ 100%{
952
+ opacity:0;
953
+ transform:scale(1.75);
1030
954
  }
1031
955
  }
1032
956
 
1033
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1034
- display:none;
1035
- }
1036
-
1037
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1038
- display:block;
1039
- }
1040
-
1041
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1042
- display:flex;
1043
- flex-direction:column;
1044
- }
1045
-
1046
957
  .tds-checkbox{
1047
958
  --tds-checkbox-font-size:var(--t-font-size-md);
1048
959
  --tds-checkbox-cursor:pointer;
@@ -1238,52 +1149,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1238
1149
  --tds-checkbox-description-line-height:1.3;
1239
1150
  }
1240
1151
 
1241
- .tds-button-group{
1242
- display:inline-flex;
1243
- }
1244
- .tds-button-group > .tds-btn{
1245
- --tds-button-group-item-z-index:1;
1246
-
1247
- position:relative;
1248
- z-index:var(--tds-button-group-item-z-index);
1249
- border-radius:0;
1250
- }
1251
- :is(.tds-button-group > .tds-btn):not(:first-child){
1252
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1253
- }
1254
- :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{
1255
- position:absolute;
1256
- inset-block:calc(var(--tds-btn-border-width) * -1);
1257
- width:var(--tds-btn-border-width);
1258
- pointer-events:none;
1259
- content:"";
1260
- background-color:var(--t-border-color-white);
1261
- }
1262
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1263
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1264
- }
1265
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1266
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1267
- }
1268
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1269
- --tds-button-group-item-z-index:2;
1270
- }
1271
- :is(.tds-button-group > .tds-btn):focus-visible{
1272
- --tds-button-group-item-z-index:5;
1273
- }
1274
- .tds-button-group > .tds-btn:first-child{
1275
- border-start-start-radius:var(--tds-btn-border-radius);
1276
- border-end-start-radius:var(--tds-btn-border-radius);
1277
- }
1278
- .tds-button-group > .tds-btn:last-child{
1279
- border-start-end-radius:var(--tds-btn-border-radius);
1280
- border-end-end-radius:var(--tds-btn-border-radius);
1281
- }
1282
-
1283
- .tds-checkbox-group{
1284
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1285
- --tds-checkbox-group-line-height:1.4;
1286
- --tds-checkbox-group-gap:var(--t-spacing-1);
1152
+ .tds-checkbox-group{
1153
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1154
+ --tds-checkbox-group-line-height:1.4;
1155
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1287
1156
 
1288
1157
  --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1289
1158
  --tds-checkbox-group-description-line-height:1.35;
@@ -1354,534 +1223,216 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1354
1223
  --tds-checkbox-group-description-line-height:1.3;
1355
1224
  }
1356
1225
 
1357
- .tds-currency-input-control{
1358
- display:flex;
1359
- gap:var(--t-spacing-half);
1360
- align-items:center;
1361
- inline-size:100%;
1362
- min-block-size:var(--tds-field-min-height);
1363
- padding-inline:var(--tds-field-padding-inline);
1364
- font-size:var(--tds-field-font-size);
1365
- color:var(--tds-field-color);
1366
- cursor:text;
1367
- outline:var(--t-focus-ring-width) solid transparent;
1368
- background-color:var(--tds-field-background-color);
1369
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1370
- border-radius:var(--t-form-border-radius);
1371
- transition-timing-function:var(--t-ease-in-out);
1372
- transition-duration:var(--t-duration-200);
1373
- transition-property:background-color, border-color, outline-color, outline-offset;
1374
- }
1375
-
1376
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1377
- border-color:var(--tds-field-border-color-hover);
1378
- }
1379
-
1380
- .tds-currency-input-control:has(input:focus){
1381
- outline-color:var(--t-focus-ring-color);
1382
- outline-offset:var(--t-focus-ring-offset);
1383
- border-color:var(--tds-field-border-color-active);
1384
- }
1385
-
1386
- .tds-currency-input-control input{
1387
- flex:1;
1388
- min-inline-size:0;
1389
- padding:0;
1390
- font-family:inherit;
1391
- font-size:inherit;
1392
- color:inherit;
1393
- -webkit-appearance:none;
1394
- -moz-appearance:none;
1395
- appearance:none;
1396
- outline:0;
1397
- background-color:transparent;
1398
- border:0;
1399
- }
1400
-
1401
- :is(.tds-currency-input-control input)::-moz-placeholder{
1402
- color:var(--tds-field-placeholder-color);
1403
- -moz-user-select:none;
1404
- user-select:none;
1405
- }
1406
-
1407
- :is(.tds-currency-input-control input)::placeholder{
1408
- color:var(--tds-field-placeholder-color);
1409
- -webkit-user-select:none;
1410
- -moz-user-select:none;
1411
- user-select:none;
1412
- }
1413
-
1414
- .tds-currency-input-control .tds-currency-input-prefix{
1415
- flex-shrink:0;
1416
- color:var(--t-text-color-secondary);
1417
- pointer-events:none;
1418
- -webkit-user-select:none;
1419
- -moz-user-select:none;
1420
- user-select:none;
1421
- }
1422
-
1423
- .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1424
- --tds-field-background-color:var(--t-form-background-color-error);
1425
- --tds-field-border-color:var(--t-form-border-color-error);
1426
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1427
- }
1428
-
1429
- .tds-currency-input-control:has(:disabled){
1430
- --tds-field-border-color:var(--t-form-border-color-disabled);
1431
- --tds-field-background-color:var(--t-form-background-color-disabled);
1432
- --tds-field-color:var(--t-form-color-disabled);
1433
-
1434
- cursor:not-allowed;
1435
- }
1436
-
1437
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1438
- color:var(--tds-field-color);
1439
- }
1440
-
1441
- .tds-currency-input-control:has([readonly]){
1442
- --tds-field-border-color:var(--t-form-border-color-readonly);
1443
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1444
- --tds-field-background-color:var(--t-form-background-color-readonly);
1445
- --tds-field-color:var(--t-form-color-readonly);
1446
- }
1447
-
1448
- .tds-currency-input-control:has([readonly]):has(input:focus){
1449
- border-color:var(--t-form-border-color-hover);
1450
- }
1451
- .tds-currency-input-currency-name--hidden{
1452
- position:absolute;
1453
- width:1px;
1454
- height:1px;
1455
- overflow:hidden;
1456
- white-space:nowrap;
1457
- clip-path:inset(50%);
1458
- }
1459
-
1460
-
1461
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1462
- -webkit-appearance:none;
1463
- appearance:none;
1464
- }
1465
-
1466
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1467
- inline-size:1em;
1468
- block-size:2em;
1469
- }
1470
-
1471
- [type="file"]:is(.tds-input input){
1472
- padding-block:var(--t-spacing-half);
1473
- padding-inline-start:var(--t-spacing-half);
1474
- }
1475
-
1476
- [type="file"]:is(.tds-input input):not(:disabled){
1477
- color:var(--t-text-color-secondary);
1478
- }
1479
-
1480
- [type="file"]:is(.tds-input input)::file-selector-button{
1481
- --_file-btn-padding-block:3px;
1482
-
1483
- padding-block:var(--_file-btn-padding-block);
1484
- padding-inline:12px;
1485
- margin-inline-end:12px;
1486
- font:inherit;
1487
- line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1488
- color:var(--t-text-color-status-neutral);
1489
- cursor:pointer;
1490
- background-color:var(--t-fill-color-button-neutral-solid);
1491
- border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1492
- border-radius:var(--t-border-radius-md);
1493
- transition-timing-function:var(--t-ease-in-out);
1494
- transition-duration:var(--t-duration-200);
1495
- transition-property:color, background-color, border-color;
1496
- }
1497
-
1498
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1499
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1500
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1501
- }
1502
-
1503
- [type="file"]:is(.tds-input input):active::file-selector-button{
1504
- background-color:var(--t-fill-color-button-neutral-solid-active);
1505
- border-color:var(--t-fill-color-button-neutral-solid-active);
1506
- }
1507
-
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
- @layer t-critical{
1528
- tds-page-header:not(.hydrated){
1529
- display:none;
1530
- }
1531
- }
1532
-
1533
- @layer t-component{
1534
- .tds-page-header{
1535
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1536
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1537
- --tds-page-header-color:var(--t-text-color);
1538
- --tds-page-header-bottom-border-color:transparent;
1539
- --tds-page-header-headline-color:var(--t-text-color-headline);
1540
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1541
- --tds-page-header-padding-x:var(--t-spacing-2);
1542
- --tds-page-header-padding-y:var(--t-spacing-2);
1543
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1544
- --tds-page-header-nav-gap:var(--t-spacing-1);
1545
- --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%);
1546
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1547
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1548
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1549
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1550
- --tds-page-header-nav-item-border-width:1px;
1551
-
1552
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1553
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1554
-
1555
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1556
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1557
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1558
-
1559
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1560
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1561
-
1562
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1563
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1564
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1565
-
1566
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1567
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1568
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1569
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1570
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1571
- }
1572
-
1573
- .tds-page-header--profile{
1574
- --tds-page-header-padding-y:20px;
1575
- }
1576
-
1577
- @supports (color: light-dark(#fff, #000)){
1578
- .tds-page-header{
1579
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1580
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1581
- }
1582
- }
1583
-
1584
- @media (min-width: 600px){
1585
- .tds-page-header{
1586
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1587
- --tds-page-header-color:var(--t-text-color-secondary);
1588
- --tds-page-header-bottom-border-color:var(--t-border-color);
1589
- --tds-page-header-padding-x:var(--t-spacing-3);
1590
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1591
- --tds-page-header-nav-gap:var(--t-spacing-half);
1592
- --tds-page-header-nav-background:transparent;
1593
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1594
- --tds-page-header-nav-item-border-width:1px;
1595
- --tds-page-header-nav-item-color:var(--t-text-color);
1596
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1597
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1598
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1599
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1600
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1601
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1602
- }
1603
- }
1604
- }
1605
-
1606
- .tds-page-header{
1607
- display:flex;
1608
- flex-direction:column;
1609
- padding-top:var(--tds-page-header-padding-y);
1610
- color:var(--tds-page-header-color);
1611
- background:var(--tds-page-header-background-color);
1612
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1226
+ .tds-button-group{
1227
+ display:inline-flex;
1613
1228
  }
1229
+ .tds-button-group > .tds-btn{
1230
+ --tds-button-group-item-z-index:1;
1614
1231
 
1615
- .tds-page-header:not(.has-nav){
1616
- padding-bottom:var(--tds-page-header-padding-y);
1617
- }
1618
-
1619
- .tds-page-header.inactive{
1620
- background:var(--tds-page-header-background-color-inactive);
1621
- }
1622
-
1623
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1624
- width:100%;
1625
- }
1626
-
1627
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1628
- display:flex;
1629
- flex-flow:row wrap;
1630
- gap:var(--t-spacing-half) var(--t-spacing-1);
1631
- align-items:flex-start;
1632
- justify-content:flex-start;
1633
- min-width:0;
1232
+ position:relative;
1233
+ z-index:var(--tds-button-group-item-z-index);
1234
+ border-radius:0;
1634
1235
  }
1635
-
1636
- :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{
1637
- display:flex;
1638
- gap:var(--tds-page-header-nav-gap);
1639
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1640
- margin:0 0 -1px;
1641
- overflow:auto;
1642
- list-style:none;
1643
- background:var(--tds-page-header-nav-background);
1644
- }
1645
-
1646
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1647
- position:relative;
1648
- display:inline-flex;
1649
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1650
- font-size:var(--t-font-size-sm);
1651
- line-height:22px;
1652
- color:var(--tds-page-header-nav-item-color);
1653
- white-space:nowrap;
1654
- text-decoration:none;
1655
- -webkit-appearance:none;
1656
- -moz-appearance:none;
1657
- appearance:none;
1658
- cursor:pointer;
1659
- outline-offset:-2px;
1660
- background-color:var(--tds-page-header-nav-item-background-color);
1661
- background-clip:padding-box;
1662
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1663
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1664
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1665
- }
1666
-
1667
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1668
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1669
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1670
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1671
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1672
- }
1673
-
1674
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1675
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1676
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1677
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1678
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1679
- }
1680
-
1681
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1682
- background-color:var(--tds-page-header-nav-item-background-color-active);
1683
- border-color:var(--tds-page-header-nav-item-border-color-active);
1684
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1685
- }
1686
-
1687
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1688
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1689
- color:var(--tds-page-header-nav-item-color-disabled);
1690
- cursor:not-allowed;
1691
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1692
- opacity:1;
1693
- }
1694
-
1695
- @media (min-width: 600px){
1696
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1697
- position:absolute;
1698
- inset:auto -1px -1px;
1699
- height:1px;
1700
- pointer-events:none;
1701
- content:"";
1702
- background-color:var(--tds-page-header-bottom-border-color);
1703
- }
1704
- }
1705
-
1706
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1707
- position:relative;
1236
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1237
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1708
1238
  }
1709
-
1710
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1711
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1712
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1713
- }
1714
-
1715
- :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{
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{
1716
1240
  position:absolute;
1717
- top:-5px;
1718
- right:-2px;
1719
- width:10px;
1720
- height:10px;
1241
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1242
+ width:var(--tds-btn-border-width);
1243
+ pointer-events:none;
1721
1244
  content:"";
1722
- background:var(--tds-page-header-nav-item-indicator-color);
1723
- border-radius:50%;
1245
+ background-color:var(--t-border-color-white);
1724
1246
  }
1725
-
1726
- @media (prefers-reduced-motion: no-preference){
1727
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1728
- animation:indicator-pulse 1.25s ease infinite;
1729
- }
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);
1730
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
+ }
1731
1267
 
1732
- .tds-page-header__title-bar{
1268
+ .tds-currency-input-control{
1733
1269
  display:flex;
1734
- flex-direction:column;
1735
- gap:var(--t-spacing-2) var(--t-spacing-1);
1736
- align-items:flex-start;
1737
- justify-content:space-between;
1738
- padding:0 var(--tds-page-header-padding-x);
1270
+ gap:var(--t-spacing-half);
1271
+ align-items:center;
1272
+ inline-size:100%;
1273
+ min-block-size:var(--tds-field-min-height);
1274
+ padding-inline:var(--tds-field-padding-inline);
1275
+ font-size:var(--tds-field-font-size);
1276
+ color:var(--tds-field-color);
1277
+ cursor:text;
1278
+ outline:var(--t-focus-ring-width) solid transparent;
1279
+ background-color:var(--tds-field-background-color);
1280
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1281
+ border-radius:var(--t-form-border-radius);
1282
+ transition-timing-function:var(--t-ease-in-out);
1283
+ transition-duration:var(--t-duration-200);
1284
+ transition-property:background-color, border-color, outline-color, outline-offset;
1739
1285
  }
1740
1286
 
1741
- .tds-page-header--profile > .tds-page-header__title-bar{
1742
- align-items:center;
1287
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1288
+ border-color:var(--tds-field-border-color-hover);
1743
1289
  }
1744
1290
 
1745
- .tds-page-header__primary{
1746
- width:100%;
1747
- }
1748
-
1749
- .tds-page-header__primary h1{
1750
- margin:0;
1751
- font-size:var(--tds-page-header-headline-font-size);
1752
- font-weight:var(--t-font-weight-normal);
1753
- line-height:32px;
1754
- color:var(--tds-page-header-headline-color);
1755
- overflow-wrap:break-word;
1291
+ .tds-currency-input-control:has(input:focus){
1292
+ outline-color:var(--t-focus-ring-color);
1293
+ outline-offset:var(--t-focus-ring-offset);
1294
+ border-color:var(--tds-field-border-color-active);
1756
1295
  }
1757
1296
 
1758
- @media (min-width: 960px){
1759
- .tds-page-header__primary{
1760
- flex:1 1 max-content;
1761
- width:auto;
1762
- min-width:0;
1763
- max-width:100%;
1297
+ .tds-currency-input-control input{
1298
+ flex:1;
1299
+ min-inline-size:0;
1300
+ padding:0;
1301
+ font-family:inherit;
1302
+ font-size:inherit;
1303
+ color:inherit;
1304
+ -webkit-appearance:none;
1305
+ -moz-appearance:none;
1306
+ appearance:none;
1307
+ outline:0;
1308
+ background-color:transparent;
1309
+ border:0;
1764
1310
  }
1765
1311
 
1766
- .tds-page-header__title-bar,
1767
- .tds-page-header--profile .tds-page-header__title-bar{
1768
- flex-flow:row nowrap;
1769
- row-gap:12px;
1770
- align-items:flex-start;
1771
- }
1772
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1773
- width:auto;
1312
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1313
+ color:var(--tds-field-placeholder-color);
1314
+ -moz-user-select:none;
1315
+ user-select:none;
1774
1316
  }
1775
1317
 
1776
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1777
- justify-content:flex-end;
1318
+ :is(.tds-currency-input-control input)::placeholder{
1319
+ color:var(--tds-field-placeholder-color);
1320
+ -webkit-user-select:none;
1321
+ -moz-user-select:none;
1322
+ user-select:none;
1778
1323
  }
1779
- }
1780
1324
 
1781
- .tds-page-header-phone,
1782
- .tds-page-header-email{
1783
- color:var(--tds-page-header-color);
1784
- white-space:nowrap;
1785
- }
1786
- .tds-page-header-email{
1787
- max-width:100%;
1788
- overflow:hidden;
1789
- text-overflow:ellipsis;
1790
- }
1325
+ .tds-currency-input-control .tds-currency-input-prefix{
1326
+ flex-shrink:0;
1327
+ color:var(--t-text-color-secondary);
1328
+ pointer-events:none;
1329
+ -webkit-user-select:none;
1330
+ -moz-user-select:none;
1331
+ user-select:none;
1332
+ }
1791
1333
 
1792
- @keyframes indicator-pulse{
1793
- 0%{
1794
- opacity:.3;
1795
- transform:scale(.9);
1334
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1335
+ --tds-field-background-color:var(--t-form-background-color-error);
1336
+ --tds-field-border-color:var(--t-form-border-color-error);
1337
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1796
1338
  }
1797
1339
 
1798
- 100%{
1799
- opacity:0;
1800
- transform:scale(1.75);
1340
+ .tds-currency-input-control:has(:disabled){
1341
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1342
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1343
+ --tds-field-color:var(--t-form-color-disabled);
1344
+
1345
+ cursor:not-allowed;
1801
1346
  }
1802
- }
1803
1347
 
1804
- .tds-radio-group{
1805
- --tds-radio-group-font-size:var(--t-font-size-md);
1806
- --tds-radio-group-line-height:1.4;
1807
- --tds-radio-group-gap:var(--t-spacing-1);
1348
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1349
+ color:var(--tds-field-color);
1350
+ }
1808
1351
 
1809
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1810
- --tds-radio-group-description-line-height:1.35;
1811
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1812
- --tds-radio-group-description-invalid-icon-display:none;
1813
- display:flex;
1814
- flex-direction:column;
1815
- gap:0;
1816
- padding:0;
1817
- margin:0;
1352
+ .tds-currency-input-control:has([readonly]){
1353
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1354
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1355
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1356
+ --tds-field-color:var(--t-form-color-readonly);
1357
+ }
1818
1358
 
1819
- font-size:var(--tds-radio-group-font-size);
1820
- line-height:var(--tds-radio-group-line-height);
1821
- border:0;
1359
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1360
+ border-color:var(--t-form-border-color-hover);
1361
+ }
1362
+ .tds-currency-input-currency-name--hidden{
1363
+ position:absolute;
1364
+ width:1px;
1365
+ height:1px;
1366
+ overflow:hidden;
1367
+ white-space:nowrap;
1368
+ clip-path:inset(50%);
1822
1369
  }
1823
1370
 
1824
- .tds-radio-group legend{
1825
- float:left;
1826
- padding:0;
1827
- margin:0;
1828
- }
1829
1371
 
1830
- .tds-radio-group[aria-invalid="true"]{
1831
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1832
- --tds-radio-group-description-invalid-icon-display:inline-block;
1833
- }
1372
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1373
+ -webkit-appearance:none;
1374
+ appearance:none;
1375
+ }
1834
1376
 
1835
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1836
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1377
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1378
+ inline-size:1em;
1379
+ block-size:2em;
1837
1380
  }
1838
1381
 
1839
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1840
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1841
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1842
- }
1382
+ [type="file"]:is(.tds-input input){
1383
+ padding-block:var(--t-spacing-half);
1384
+ padding-inline-start:var(--t-spacing-half);
1385
+ }
1843
1386
 
1844
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1845
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1387
+ [type="file"]:is(.tds-input input):not(:disabled){
1388
+ color:var(--t-text-color-secondary);
1846
1389
  }
1847
1390
 
1848
- .tds-radio-group:has(input:required) legend::after{
1849
- margin-left:.25ch;
1850
- color:var(--t-text-color-status-error);
1851
- content:"*";
1852
- }
1391
+ [type="file"]:is(.tds-input input)::file-selector-button{
1392
+ --_file-btn-padding-block:3px;
1853
1393
 
1854
- .tds-radio-group-fields{
1855
- display:flex;
1856
- flex-direction:column;
1857
- gap:var(--tds-radio-group-gap);
1858
- align-items:flex-start;
1859
- margin-top:var(--t-spacing-1);
1860
- }
1394
+ padding-block:var(--_file-btn-padding-block);
1395
+ padding-inline:12px;
1396
+ margin-inline-end:12px;
1397
+ font:inherit;
1398
+ line-height:calc(var(--tds-input-min-height) - (var(--t-form-border-width) * 2 + var(--t-border-width) * 2 + var(--_file-btn-padding-block) * 2 + var(--t-spacing-half) * 2));
1399
+ color:var(--t-text-color-status-neutral);
1400
+ cursor:pointer;
1401
+ background-color:var(--t-fill-color-button-neutral-solid);
1402
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1403
+ border-radius:var(--t-border-radius-md);
1404
+ transition-timing-function:var(--t-ease-in-out);
1405
+ transition-duration:var(--t-duration-200);
1406
+ transition-property:color, background-color, border-color;
1407
+ }
1408
+
1409
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1410
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1411
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
1412
+ }
1861
1413
 
1862
- .tds-radio-group-description{
1863
- display:flex;
1864
- gap:var(--t-spacing-half);
1865
- align-items:flex-start;
1866
- margin:var(--t-spacing-fourth) 0 0;
1867
- font-size:var(--tds-radio-group-description-font-size);
1868
- line-height:var(--tds-radio-group-description-line-height);
1869
- color:var(--tds-radio-group-description-color);
1870
- cursor:text;
1871
- }
1414
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1415
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1416
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1417
+ }
1872
1418
 
1873
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1874
- display:var(--tds-radio-group-description-invalid-icon-display);
1875
- flex-shrink:0;
1876
- margin-top:calc(.5lh - .5em);
1877
- line-height:var(--tds-radio-group-description-line-height);
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);
1878
1430
  }
1879
1431
 
1880
- .tds-radio-group--sm{
1881
- --tds-radio-group-line-height:1.35;
1882
- --tds-radio-group-font-size:var(--t-font-size-sm);
1883
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1884
- --tds-radio-group-description-line-height:1.3;
1432
+ .tds-input--auto-width input{
1433
+ field-sizing:content;
1434
+ inline-size:auto;
1435
+ }
1885
1436
  }
1886
1437
 
1887
1438
  .tds-modal-overlay{
@@ -2047,6 +1598,131 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2047
1598
  }
2048
1599
  }
2049
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
+
1615
+ @media (prefers-reduced-motion: no-preference){
1616
+ .tds-popover[data-entering]{
1617
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1618
+ }
1619
+
1620
+ .tds-popover[data-exiting]{
1621
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1622
+ }
1623
+
1624
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1625
+ will-change:opacity, transform;
1626
+ }
1627
+
1628
+ @keyframes tds-popover{
1629
+ from{
1630
+ opacity:0;
1631
+ transform:translateY(-8px);
1632
+ }
1633
+ }
1634
+ }
1635
+
1636
+ .tds-popover-content{
1637
+ display:flex;
1638
+ flex-direction:column;
1639
+ padding:var(--t-spacing-1);
1640
+ outline:0;
1641
+ }
1642
+
1643
+ .tds-radio-group{
1644
+ --tds-radio-group-font-size:var(--t-font-size-md);
1645
+ --tds-radio-group-line-height:1.4;
1646
+ --tds-radio-group-gap:var(--t-spacing-1);
1647
+
1648
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1649
+ --tds-radio-group-description-line-height:1.35;
1650
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1651
+ --tds-radio-group-description-invalid-icon-display:none;
1652
+ display:flex;
1653
+ flex-direction:column;
1654
+ gap:0;
1655
+ padding:0;
1656
+ margin:0;
1657
+
1658
+ font-size:var(--tds-radio-group-font-size);
1659
+ line-height:var(--tds-radio-group-line-height);
1660
+ border:0;
1661
+ }
1662
+
1663
+ .tds-radio-group legend{
1664
+ float:left;
1665
+ padding:0;
1666
+ margin:0;
1667
+ }
1668
+
1669
+ .tds-radio-group[aria-invalid="true"]{
1670
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1671
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1672
+ }
1673
+
1674
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1675
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1676
+ }
1677
+
1678
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1679
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1680
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1681
+ }
1682
+
1683
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1684
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1685
+ }
1686
+
1687
+ .tds-radio-group:has(input:required) legend::after{
1688
+ margin-left:.25ch;
1689
+ color:var(--t-text-color-status-error);
1690
+ content:"*";
1691
+ }
1692
+
1693
+ .tds-radio-group-fields{
1694
+ display:flex;
1695
+ flex-direction:column;
1696
+ gap:var(--tds-radio-group-gap);
1697
+ align-items:flex-start;
1698
+ margin-top:var(--t-spacing-1);
1699
+ }
1700
+
1701
+ .tds-radio-group-description{
1702
+ display:flex;
1703
+ gap:var(--t-spacing-half);
1704
+ align-items:flex-start;
1705
+ margin:var(--t-spacing-fourth) 0 0;
1706
+ font-size:var(--tds-radio-group-description-font-size);
1707
+ line-height:var(--tds-radio-group-description-line-height);
1708
+ color:var(--tds-radio-group-description-color);
1709
+ cursor:text;
1710
+ }
1711
+
1712
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1713
+ display:var(--tds-radio-group-description-invalid-icon-display);
1714
+ flex-shrink:0;
1715
+ margin-top:calc(.5lh - .5em);
1716
+ line-height:var(--tds-radio-group-description-line-height);
1717
+ }
1718
+
1719
+ .tds-radio-group--sm{
1720
+ --tds-radio-group-line-height:1.35;
1721
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1722
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1723
+ --tds-radio-group-description-line-height:1.3;
1724
+ }
1725
+
2050
1726
  .tds-radio{
2051
1727
  --tds-radio-font-size:var(--t-font-size-md);
2052
1728
  --tds-radio-cursor:pointer;
@@ -2172,13 +1848,118 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2172
1848
  cursor:text;
2173
1849
  }
2174
1850
 
2175
- .tds-radio--sm{
2176
- --tds-radio-line-height:1.35;
2177
- --tds-radio-input-size:var(--t-element-size-sm);
2178
- --tds-radio-font-size:var(--t-font-size-sm);
2179
- --tds-radio-description-font-size:var(--t-font-size-xs);
2180
- --tds-radio-description-line-height:1.3;
2181
- }
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
+ }
2182
1963
 
2183
1964
  .tds-segmented-control{
2184
1965
  --tds-segmented-control-font-size:var(--t-font-size-md);
@@ -2239,388 +2020,607 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2239
2020
  border-radius:var(--tds-segmented-control-border-radius);
2240
2021
  }
2241
2022
 
2242
- .tds-segmented-control-segment{
2243
- --tds-segmented-control-color:var(--t-text-color-status-neutral);
2244
- --tds-segmented-control-background-color:transparent;
2245
-
2246
- display:inline-flex;
2247
- gap:var(--t-spacing-1);
2248
- align-items:center;
2249
- justify-content:center;
2250
- max-width:var(--tds-segmented-control-max-width);
2251
- min-height:var(--tds-segmented-control-min-height);
2252
- padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
2253
- padding-inline:var(--tds-segmented-control-padding-inline);
2254
- font:inherit;
2255
- font-size:var(--tds-segmented-control-font-size);
2256
- color:var(--tds-segmented-control-color);
2257
- text-align:center;
2258
- cursor:pointer;
2259
- -webkit-user-select:none;
2260
- -moz-user-select:none;
2261
- user-select:none;
2262
- background-color:var(--tds-segmented-control-background-color);
2263
- border:0;
2264
- border-radius:var(--t-border-radius-sm);
2265
- transition-timing-function:var(--t-ease-in-out);
2266
- transition-duration:var(--t-duration-200);
2267
- transition-property:color, background-color;
2023
+ .tds-segmented-control-segment{
2024
+ --tds-segmented-control-color:var(--t-text-color-status-neutral);
2025
+ --tds-segmented-control-background-color:transparent;
2026
+
2027
+ display:inline-flex;
2028
+ gap:var(--t-spacing-1);
2029
+ align-items:center;
2030
+ justify-content:center;
2031
+ max-width:var(--tds-segmented-control-max-width);
2032
+ min-height:var(--tds-segmented-control-min-height);
2033
+ padding-block:calc((var(--tds-segmented-control-min-height) - 1lh) / 2);
2034
+ padding-inline:var(--tds-segmented-control-padding-inline);
2035
+ font:inherit;
2036
+ font-size:var(--tds-segmented-control-font-size);
2037
+ color:var(--tds-segmented-control-color);
2038
+ text-align:center;
2039
+ cursor:pointer;
2040
+ -webkit-user-select:none;
2041
+ -moz-user-select:none;
2042
+ user-select:none;
2043
+ background-color:var(--tds-segmented-control-background-color);
2044
+ border:0;
2045
+ border-radius:var(--t-border-radius-sm);
2046
+ transition-timing-function:var(--t-ease-in-out);
2047
+ transition-duration:var(--t-duration-200);
2048
+ transition-property:color, background-color;
2049
+ }
2050
+
2051
+ .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
2052
+ padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
2053
+ }
2054
+
2055
+ .tds-segmented-control-segment .symbol{
2056
+ display:block;
2057
+ flex-shrink:0;
2058
+ width:var(--tds-segmented-control-icon-size);
2059
+ height:var(--tds-segmented-control-icon-size);
2060
+ }
2061
+
2062
+ .tds-segmented-control-segment:focus-visible{
2063
+ outline:var(--t-focus-ring-outline);
2064
+ outline-offset:var(--t-focus-ring-offset);
2065
+ }
2066
+
2067
+ .tds-segmented-control-segment:hover{
2068
+ --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-ghost-hover);
2069
+ }
2070
+
2071
+ .tds-segmented-control-segment[aria-checked="true"]{
2072
+ --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
2073
+ --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
2074
+
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;
2268
2257
  }
2269
2258
 
2270
- .tds-segmented-control-segment.tds-segmented-control-segment--icon-only{
2271
- padding-inline:var(--tds-segmented-control-padding-inline-icon-only);
2272
- }
2273
2259
 
2274
- .tds-segmented-control-segment .symbol{
2275
- display:block;
2276
- flex-shrink:0;
2277
- width:var(--tds-segmented-control-icon-size);
2278
- height:var(--tds-segmented-control-icon-size);
2279
- }
2260
+ @media (prefers-reduced-motion: no-preference){
2280
2261
 
2281
- .tds-segmented-control-segment:focus-visible{
2282
- outline:var(--t-focus-ring-outline);
2283
- outline-offset:var(--t-focus-ring-offset);
2262
+ :root{
2263
+ interpolate-size:allow-keywords;
2264
+ }
2284
2265
  }
2285
2266
 
2286
- .tds-segmented-control-segment:hover{
2287
- --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-ghost-hover);
2288
- }
2267
+ @layer tds-component{
2268
+ tds-sidenav,
2269
+ .tds-sidenav{
2270
+ --tds-sidenav-indent:12px;
2271
+ --tds-sidenav-item-depth:0;
2289
2272
 
2290
- .tds-segmented-control-segment[aria-checked="true"]{
2291
- --tds-segmented-control-background-color:var(--tds-segmented-control-background-color-checked);
2292
- --tds-segmented-control-color:var(--tds-segmented-control-color-checked);
2273
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2293
2274
 
2294
- cursor:default;
2295
- }
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);
2296
2281
 
2297
- .tds-segmented-control-segment:disabled{
2298
- --tds-segmented-control-background-color:transparent;
2299
- --tds-segmented-control-color:var(--t-text-color-disabled);
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);
2300
2286
 
2301
- pointer-events:none;
2302
- }
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;
2303
2290
 
2304
- .tds-segmented-control-segment[aria-checked="true"]:disabled{
2305
- --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-solid-disabled);
2306
- }
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);
2307
2294
 
2308
- .tds-segmented-control-segment--neutral-subtle{
2309
- --tds-segmented-control-color-checked:var(--t-text-color-status-neutral);
2310
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-neutral-solid-hover);
2311
- }
2295
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2296
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2297
+ }
2312
2298
 
2313
- .tds-segmented-control-segment--interaction-subtle{
2314
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
2315
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
2316
- }
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
+ }
2317
2308
 
2318
- .tds-segmented-control-segment--interaction-bold{
2319
- --tds-segmented-control-color-checked:var(--t-text-color-inverted);
2320
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-solid);
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
+ }
2321
2316
  }
2322
2317
 
2323
- .tds-segmented-control-segment--success{
2324
- --tds-segmented-control-color-checked:var(--t-text-color-status-success);
2325
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-success-ghost);
2326
- }
2318
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2319
+ display:flex;
2320
+ }
2327
2321
 
2328
- .tds-segmented-control-segment--warning{
2329
- --tds-segmented-control-color-checked:var(--t-text-color-status-warning);
2330
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-warning-ghost);
2331
- }
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%;
2326
+ }
2332
2327
 
2333
- .tds-segmented-control-segment--error{
2334
- --tds-segmented-control-color-checked:var(--t-text-color-status-error);
2335
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
2328
+ .tds-sidenav-section-list{
2329
+ width:100%;
2330
+ padding:0;
2331
+ margin:0;
2332
+ list-style:none;
2336
2333
  }
2337
2334
 
2338
- .tds-popover{
2339
- max-inline-size:24rem;
2340
- overflow:auto;
2341
- overscroll-behavior:none;
2342
- outline:0;
2343
- scrollbar-color:#0004 var(--t-surface-color-card);
2344
- scrollbar-width:thin;
2345
- background:var(--t-surface-color-card);
2346
- background-clip:padding-box;
2347
- border:1px solid var(--t-border-color);
2348
- border-radius:var(--t-border-radius);
2349
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2335
+ .tds-sidenav-section-header{
2336
+ display:flex;
2337
+ align-items:baseline;
2338
+ justify-content:space-between;
2339
+ padding-top:var(--t-spacing-2);
2350
2340
  }
2351
2341
 
2352
- @media (prefers-reduced-motion: no-preference){
2353
- .tds-popover[data-entering]{
2354
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2355
- }
2356
-
2357
- .tds-popover[data-exiting]{
2358
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2359
- }
2360
-
2361
- .tds-popover[data-entering],.tds-popover[data-exiting]{
2362
- will-change:opacity, transform;
2363
- }
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
+ }
2364
2350
 
2365
- @keyframes tds-popover{
2366
- from{
2367
- opacity:0;
2368
- transform:translateY(-8px);
2369
- }
2351
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2352
+ padding-top:0;
2370
2353
  }
2371
- }
2372
2354
 
2373
- .tds-popover-content{
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"]{
2374
2362
  display:flex;
2375
- flex-direction:column;
2376
- padding:var(--t-spacing-1);
2377
- outline:0;
2363
+ gap:12px;
2364
+ align-items:center;
2365
+ min-height:42px;
2366
+ padding:var(--t-spacing-1) 0;
2378
2367
  }
2379
-
2380
- .tds-input:has(textarea){
2381
- --tds-input-padding-block:6px;
2382
- --tds-input-resizer-size:var(--t-element-size-sm);
2383
- --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");
2368
+ .tds-sidenav-section-label-actions > [slot="label-actions"],
2369
+ .tds-sidenav-section-actions > [slot="section-actions"]{
2370
+ display:contents;
2384
2371
  }
2385
2372
 
2386
- @supports (x: attr(x type(*))){
2387
-
2388
- .tds-input textarea{
2389
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
2373
+ .tds-sidenav-section-list,
2374
+ .tds-sidenav-item{
2375
+ width:100%;
2376
+ padding:0;
2377
+ margin:0;
2390
2378
  }
2379
+
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);
2391
2401
  }
2392
2402
 
2393
- .tds-input.tds-textarea--resize-vertical textarea{
2394
- resize:vertical;
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;
2395
2410
  }
2396
2411
 
2397
- .tds-input.tds-textarea--resize-none textarea{
2398
- resize:none;
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;
2416
+ }
2417
+
2418
+ :is(.tds-sidenav-item :is(a,button)):active{
2419
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2399
2420
  }
2400
2421
 
2401
- .tds-input.tds-textarea--resize-auto textarea{
2402
- resize:vertical;
2422
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2423
+ overflow:hidden;
2424
+ color:var(--tds-sidenav-item-icon-color);
2403
2425
  }
2404
2426
 
2405
- @supports (field-sizing: content){
2406
- .tds-input.tds-textarea--resize-auto textarea{
2407
- field-sizing:content;
2408
- resize:none;
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);
2409
2431
  }
2410
- }
2411
-
2412
- .tds-input textarea{
2413
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
2414
- --tds-input-scrollbar-thumb-color-hidden:transparent;
2415
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
2416
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
2417
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
2418
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
2419
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
2420
- --tds-input-scrollbar-thumb-border-radius:999px;
2421
- --tds-input-scrollbar-thumb-border-width:3px;
2422
- --tds-input-scrollbar-track-margin-block:.125rem;
2423
- scrollbar-color:initial;
2424
- transition-timing-function:var(--t-ease-in-out);
2425
- transition-duration:var(--t-duration-200);
2426
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2427
- }
2428
2432
 
2429
- @media (pointer: fine){
2430
- :is(.tds-input textarea)::-webkit-scrollbar{
2431
- width:12px;
2432
- height:12px;
2433
- cursor:default;
2433
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2434
+ --tds-sidenav-indent:19px;
2434
2435
  }
2435
2436
 
2436
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2437
- cursor:default;
2438
- background:var(--tds-input-scrollbar-thumb-color);
2439
- background-clip:content-box;
2440
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2441
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
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;
2442
2441
  }
2443
2442
 
2444
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2445
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2446
- }
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);
2447
2446
 
2448
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2449
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2450
- }
2447
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2448
+ font-weight:var(--t-font-weight-semibold);
2449
+ }
2451
2450
 
2452
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2453
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2454
- }
2451
+ .tds-sidenav-item:has(.tds-sidenav-section){
2452
+ display:flex;
2453
+ flex-direction:column;
2454
+ gap:var(--t-spacing-half);
2455
+ }
2455
2456
 
2456
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
2457
- background:var(--tds-input-scrollbar-surface-color);
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);
2458
2468
  }
2459
2469
 
2460
- :is(.tds-input textarea)::-webkit-resizer{
2461
- background:var(--tds-input-resizer-icon) no-repeat;
2462
- background-position:right bottom;
2463
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2470
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2471
+ --tds-sidenav-item-depth:2;
2464
2472
  }
2465
2473
 
2466
- :is(.tds-input textarea)::-webkit-scrollbar-track{
2467
- margin-block:var(--tds-input-scrollbar-track-margin-block);
2468
- cursor:default;
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;
2469
2480
  }
2470
2481
 
2471
- @supports (-moz-appearance: none){
2472
- :is(.tds-input textarea){
2473
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2474
- scrollbar-width:thin;
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);
2475
2491
  }
2476
2492
 
2477
- @media (hover){
2478
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2479
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2480
- }
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);
2481
2502
  }
2482
- }
2483
- }
2484
-
2485
- .tds-toggle-switch{
2486
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2487
- --tds-toggle-switch-cursor:pointer;
2488
- --tds-toggle-switch-display:inline-grid;
2489
- --tds-toggle-switch-line-height:1.4;
2490
2503
 
2491
- --tds-toggle-switch-label-color:var(--t-form-color);
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
+ }
2492
2509
 
2493
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2494
- --tds-toggle-switch-track-outline:none;
2495
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2496
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2497
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
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);
2513
+ }
2498
2514
 
2499
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2500
- --tds-toggle-switch-thumb-transform:translateX(0);
2501
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
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);
2517
+ }
2502
2518
 
2503
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2504
- --tds-toggle-switch-description-line-height:1.35;
2505
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2506
- position:relative;
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
+ }
2507
2523
 
2508
- display:var(--tds-toggle-switch-display);
2509
- grid-template-columns:auto;
2510
- grid-auto-columns:1fr;
2511
- gap:var(--t-spacing-fourth) 0;
2512
- -webkit-user-select:none;
2513
- -moz-user-select:none;
2514
- user-select:none;
2524
+ .tds-sidenav-responsive-header{
2525
+ display:flex;
2526
+ gap:var(--t-spacing-2);
2527
+ align-items:center;
2528
+ width:100%;
2515
2529
  }
2516
2530
 
2517
- .tds-toggle-switch input[type="checkbox"]{
2518
- position:absolute;
2519
- width:var(--tds-toggle-switch-track-width);
2520
- height:var(--tds-toggle-switch-track-height);
2531
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2532
+ order:0;
2533
+ }
2534
+
2535
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2536
+ flex:1;
2537
+ order:1;
2521
2538
  margin:0;
2522
- -webkit-appearance:none;
2523
- -moz-appearance:none;
2524
- appearance:none;
2525
- cursor:var(--tds-toggle-switch-cursor);
2526
- outline:var(--tds-toggle-switch-track-outline);
2527
- outline-offset:var(--t-focus-ring-offset);
2528
- background-color:transparent;
2529
- border:0;
2530
- border-radius:var(--t-border-radius-round);
2539
+ font-size:var(--t-font-size-lg);
2540
+ font-weight:var(--t-font-weight-medium);
2541
+ color:var(--t-text-color-headline);
2531
2542
  }
2532
2543
 
2533
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2534
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2535
- }
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;
2562
+ }
2536
2563
 
2537
- .tds-toggle-switch label{
2538
- display:inline-flex;
2539
- grid-area:1 / 2;
2540
- padding-inline-start:var(--t-spacing-1);
2541
- margin-top:-.09375em;
2542
- font-size:var(--tds-toggle-switch-font-size);
2543
- font-weight:var(--t-font-weight-normal);
2544
- line-height:var(--tds-toggle-switch-line-height);
2545
- color:var(--tds-toggle-switch-label-color);
2546
- cursor:var(--tds-toggle-switch-cursor);
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;
2547
2572
  }
2548
2573
 
2549
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2550
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2574
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2575
+ display:none;
2551
2576
  }
2577
+ @supports selector(:popover-open){
2578
+ .tds-sidenav-collapse:popover-open{
2579
+ display:flex;
2580
+ }
2552
2581
 
2553
- .tds-toggle-switch:has(input:checked){
2554
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2555
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2582
+ .tds-sidenav-collapse:not(:popover-open){
2583
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2584
+ transition:var(--tds-sidenav-collapse-transition-exit);
2585
+ }
2586
+
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
+ }
2556
2593
  }
2557
-
2558
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2559
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2594
+ @supports not selector(:popover-open){
2595
+ .tds-sidenav-collapse.\:popover-open{
2596
+ display:flex;
2560
2597
  }
2561
2598
 
2562
- .tds-toggle-switch:has(input:disabled){
2563
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2564
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2565
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2566
- --tds-toggle-switch-cursor:not-allowed;
2599
+ .tds-sidenav-collapse:not(.\:popover-open){
2600
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2601
+ transition:var(--tds-sidenav-collapse-transition-exit);
2602
+ }
2567
2603
  }
2568
-
2569
- .tds-toggle-switch-track{
2570
- position:relative;
2571
- flex-shrink:0;
2572
- width:var(--tds-toggle-switch-track-width);
2573
- height:var(--tds-toggle-switch-track-height);
2574
- background-color:var(--tds-toggle-switch-track-background-color);
2575
- border-radius:var(--t-border-radius-round);
2576
- transition:var(--tds-toggle-switch-track-transition);
2577
2604
  }
2578
2605
 
2579
- .tds-toggle-switch-track::before{
2580
- position:absolute;
2581
- top:var(--t-spacing-fourth);
2582
- left:var(--t-spacing-fourth);
2583
- width:var(--tds-toggle-switch-thumb-size);
2584
- height:var(--tds-toggle-switch-thumb-size);
2585
- content:"";
2586
- background-color:#fff;
2587
- border-radius:var(--t-border-radius-round);
2588
- transform:var(--tds-toggle-switch-thumb-transform);
2589
- transition:var(--tds-toggle-switch-thumb-transition);
2606
+ @media (min-width: 720px){
2607
+ .tds-sidenav-responsive-header{
2608
+ display:none;
2590
2609
  }
2591
-
2592
- @media (prefers-reduced-motion: reduce){
2593
-
2594
- .tds-toggle-switch-track{
2595
- --tds-toggle-switch-track-transition:none;
2596
- --tds-toggle-switch-thumb-transition:none;
2597
2610
  }
2598
- }
2599
2611
 
2600
- .tds-toggle-switch-description{
2601
- display:flex;
2602
- grid-area:2 / 2;
2603
- align-items:flex-start;
2604
- padding-inline-start:var(--t-spacing-1);
2605
- margin:0;
2606
- font-size:var(--tds-toggle-switch-description-font-size);
2607
- line-height:var(--tds-toggle-switch-description-line-height);
2608
- color:var(--tds-toggle-switch-description-color);
2609
- cursor:text;
2610
- }
2612
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2613
+ display:none;
2614
+ }
2611
2615
 
2612
- .tds-toggle-switch--sm{
2613
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2614
- --tds-toggle-switch-line-height:1.35;
2615
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2616
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2617
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2618
- --tds-toggle-switch-description-line-height:1.3;
2619
- }
2616
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2617
+ display:block;
2618
+ }
2620
2619
 
2621
- .tds-toggle-switch--hide-label{
2622
- --tds-toggle-switch-display:inline-flex;
2623
- }
2620
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2621
+ display:flex;
2622
+ flex-direction:column;
2623
+ }
2624
2624
 
2625
2625
  .tds-input{
2626
2626
  --tds-input-border-color:var(--t-form-border-color);
@@ -5429,6 +5429,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5429
5429
  margin-inline:var(--tds-pane-divider-margin-inline);
5430
5430
  }
5431
5431
 
5432
+ .tds-pane-divider.tds-pane-divider--inset{
5433
+ margin-inline:0;
5434
+ }
5435
+
5432
5436
  .has-instance-badge-NNA9P{
5433
5437
  inline-size:6px;
5434
5438
  block-size:6px;
@@ -5496,6 +5500,37 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
5496
5500
  color:var(--t-text-color-status-error);
5497
5501
  }
5498
5502
 
5503
+ .views-list-3AMVI{
5504
+ display:flex;
5505
+ flex-direction:column;
5506
+ row-gap:var(--t-spacing-1);
5507
+ padding-inline-start:0;
5508
+ margin-block:0;
5509
+ list-style:none;
5510
+ }
5511
+
5512
+ .views-list-item-cWGsC{
5513
+ display:flex;
5514
+ -moz-column-gap:var(--t-spacing-1);
5515
+ column-gap:var(--t-spacing-1);
5516
+ }
5517
+
5518
+ .view-list-item-input-dowHY{
5519
+ flex-grow:1;
5520
+ }
5521
+
5522
+ .views-list-item--static-9zGpJ{
5523
+ display:flex;
5524
+ align-items:center;
5525
+ min-block-size:var(--t-container-size-md);
5526
+ padding-inline:var(--t-spacing-1);
5527
+ font-size:var(--t-font-size-md);
5528
+ color:var(--t-form-color);
5529
+ background-color:var(--t-form-background-color-readonly);
5530
+ border:var(--t-form-border-width) solid var(--t-form-border-color-readonly);
5531
+ border-radius:var(--t-form-border-radius);
5532
+ }
5533
+
5499
5534
  .tds-pagination{
5500
5535
  --tds-pagination-background-color:var(--t-surface-color-canvas);
5501
5536
  --tds-pagination-page-background-color-hover:var(--t-fill-color-neutral-100);
@@ -5649,6 +5684,47 @@ tds-helper-shelf{
5649
5684
  --tds-btn-color:var(--tds-helper-shelf-trigger-color-expanded);
5650
5685
  }
5651
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
+
5652
5728
  .tds-filterable-list-box:has(input:disabled){
5653
5729
  --tds-filterable-list-box-cursor:not-allowed;
5654
5730
  }
@@ -5861,46 +5937,82 @@ tds-helper-shelf{
5861
5937
  white-space:nowrap;
5862
5938
  }
5863
5939
 
5864
- .tds-reorderable-list-box{
5865
- --_drop-indicator-width:2px;
5866
- display:contents;
5940
+ .tds-alert-dialog{
5941
+ padding-block-start:0;
5942
+ text-align:center;
5867
5943
  }
5868
5944
 
5869
- .tds-reorderable-list-box-item{
5870
- cursor:pointer;
5871
- -webkit-user-select:none;
5872
- -moz-user-select:none;
5873
- user-select:none;
5874
- outline:0;
5945
+ .tds-alert-dialog-header{
5946
+ display:flex;
5947
+ flex-direction:column;
5948
+ gap:var(--t-spacing-3);
5949
+ align-items:center;
5950
+ padding-block-start:var(--t-spacing-5);
5951
+ padding-inline:var(--t-spacing-4);
5875
5952
  }
5876
5953
 
5877
- .tds-reorderable-list-box-item[data-focus-visible]{
5878
- outline:var(--t-focus-ring-outline);
5879
- outline-offset:var(--t-focus-ring-offset);
5880
- }
5954
+ .tds-alert-dialog-icon{
5955
+ flex-shrink:0;
5956
+ width:var(--t-element-size-3xl);
5957
+ height:var(--t-element-size-3xl);
5958
+ }
5881
5959
 
5882
- .tds-reorderable-list-box-item[data-dragging]{
5883
- opacity:.5;
5884
- }
5960
+ .tds-alert-dialog-icon--info{
5961
+ fill:var(--t-icon-color-status-info);
5962
+ }
5885
5963
 
5886
- .tds-reorderable-list-box-drop-indicator{
5887
- align-self:stretch;
5888
- inline-size:var(--_drop-indicator-width);
5889
- margin-inline:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5890
- border-radius:var(--_drop-indicator-width);
5964
+ .tds-alert-dialog-icon--success{
5965
+ fill:var(--t-icon-color-status-success);
5891
5966
  }
5892
5967
 
5893
- .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5894
- background-color:var(--t-focus-ring-color);
5968
+ .tds-alert-dialog-icon--warning{
5969
+ fill:var(--t-icon-color-status-warning);
5970
+ }
5971
+
5972
+ .tds-alert-dialog-icon--danger,
5973
+ .tds-alert-dialog-icon--error{
5974
+ fill:var(--t-icon-color-status-error);
5975
+ }
5976
+
5977
+ .tds-alert-dialog-title{
5978
+ width:100%;
5979
+ margin:0;
5980
+ font-size:var(--t-font-size-2xl);
5981
+ font-weight:var(--t-font-weight-semibold);
5982
+ line-height:1.4;
5983
+ color:var(--t-text-color-headline);
5984
+ overflow-wrap:break-word;
5985
+ }
5986
+
5987
+ .tds-alert-dialog-body{
5988
+ padding-block:var(--t-spacing-2) var(--t-spacing-4);
5989
+ padding-inline:var(--t-spacing-4);
5990
+ font-size:var(--t-font-size-md);
5991
+ line-height:1.4;
5992
+ color:var(--t-text-color);
5993
+ overflow-wrap:break-word;
5994
+ }
5995
+
5996
+ .tds-alert-dialog-body > :first-child{
5997
+ margin-block-start:0;
5895
5998
  }
5896
5999
 
5897
- @media (forced-colors: active){
6000
+ .tds-alert-dialog-body > :last-child{
6001
+ margin-block-end:0;
6002
+ }
5898
6003
 
5899
- .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5900
- forced-color-adjust:none;
5901
- background-color:Highlight;
6004
+ .tds-alert-dialog-footer{
6005
+ flex-wrap:wrap;
6006
+ gap:var(--t-spacing-1);
6007
+ justify-content:center;
6008
+ padding:var(--t-spacing-3);
6009
+ }
6010
+ @media (max-width: 719px){
6011
+ .tds-alert-dialog-footer{
6012
+ reading-flow:flex-visual;
6013
+ flex-direction:column-reverse;
5902
6014
  }
5903
- }
6015
+ }
5904
6016
 
5905
6017
  .symbol{
5906
6018
  display:inline-block;
@@ -6448,33 +6560,6 @@ tds-helper-shelf{
6448
6560
  border-color:var(--tds-btn-border-color-disabled);
6449
6561
  }
6450
6562
 
6451
- .tds-loading-spinner{
6452
- position:absolute;
6453
- right:0;
6454
- left:0;
6455
- visibility:var(--tds-loading-spinner-visibility, hidden);
6456
- width:var(--tds-loading-spinner-size, 1.25em);
6457
- height:var(--tds-loading-spinner-size, 1.25em);
6458
- margin:auto;
6459
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
6460
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
6461
- border-radius:50%;
6462
- animation:spinner-rotate 500ms infinite linear;
6463
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
6464
- }
6465
-
6466
- @keyframes spinner-rotate{
6467
- to{
6468
- transform:rotate(360deg);
6469
- }
6470
- }
6471
-
6472
- @media (prefers-reduced-motion: reduce){
6473
- [class*="--loading"] .tds-loading-spinner{
6474
- --tds-loading-spinner-animation-play-state:paused;
6475
- }
6476
- }
6477
-
6478
6563
  .tds-tooltip{
6479
6564
  --tds-tooltip-arrow-depth:var(--tds-tooltip-arrow-depth-raw);
6480
6565
  --tds-tooltip-arrow-size:var(--tds-tooltip-arrow-size-raw);
@@ -6549,6 +6634,33 @@ tds-helper-shelf{
6549
6634
  transform:var(--tds-tooltip-arrow-rotate);
6550
6635
  }
6551
6636
 
6637
+ .tds-loading-spinner{
6638
+ position:absolute;
6639
+ right:0;
6640
+ left:0;
6641
+ visibility:var(--tds-loading-spinner-visibility, hidden);
6642
+ width:var(--tds-loading-spinner-size, 1.25em);
6643
+ height:var(--tds-loading-spinner-size, 1.25em);
6644
+ margin:auto;
6645
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
6646
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
6647
+ border-radius:50%;
6648
+ animation:spinner-rotate 500ms infinite linear;
6649
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
6650
+ }
6651
+
6652
+ @keyframes spinner-rotate{
6653
+ to{
6654
+ transform:rotate(360deg);
6655
+ }
6656
+ }
6657
+
6658
+ @media (prefers-reduced-motion: reduce){
6659
+ [class*="--loading"] .tds-loading-spinner{
6660
+ --tds-loading-spinner-animation-play-state:paused;
6661
+ }
6662
+ }
6663
+
6552
6664
  .tds-combo-box{
6553
6665
  --tds-combo-box-button-offset:4px;
6554
6666
  --tds-combo-box-search-icon-size:var(--tds-field-font-size);