@planningcenter/tapestry 4.12.0 → 4.13.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 (134) hide show
  1. package/dist/componentRegistrars.d.ts +1 -0
  2. package/dist/componentRegistrars.d.ts.map +1 -1
  3. package/dist/componentRegistrars.js +6 -2
  4. package/dist/componentRegistrars.js.map +1 -1
  5. package/dist/components/DataTable/ActiveFilters.d.ts +23 -1
  6. package/dist/components/DataTable/ActiveFilters.d.ts.map +1 -1
  7. package/dist/components/DataTable/ActiveFilters.js +49 -4
  8. package/dist/components/DataTable/ActiveFilters.js.map +1 -1
  9. package/dist/components/DataTable/CollectionEditorsLazy.d.ts.map +1 -1
  10. package/dist/components/DataTable/CollectionEditorsLazy.js +20 -18
  11. package/dist/components/DataTable/CollectionEditorsLazy.js.map +1 -1
  12. package/dist/components/DataTable/DataTable.d.ts +66 -50
  13. package/dist/components/DataTable/DataTable.d.ts.map +1 -1
  14. package/dist/components/DataTable/DataTable.js +78 -17
  15. package/dist/components/DataTable/DataTable.js.map +1 -1
  16. package/dist/components/DataTable/ManageSavedViewsModal.d.ts +18 -7
  17. package/dist/components/DataTable/ManageSavedViewsModal.d.ts.map +1 -1
  18. package/dist/components/DataTable/ManageSavedViewsModal.js +120 -104
  19. package/dist/components/DataTable/ManageSavedViewsModal.js.map +1 -1
  20. package/dist/components/DataTable/ManageSavedViewsModal.module.css.js +1 -1
  21. package/dist/components/DataTable/NewSavedViewButton.d.ts.map +1 -1
  22. package/dist/components/DataTable/NewSavedViewButton.js +1 -1
  23. package/dist/components/DataTable/NewSavedViewButton.js.map +1 -1
  24. package/dist/components/DataTable/SavedViewActions.d.ts +19 -0
  25. package/dist/components/DataTable/SavedViewActions.d.ts.map +1 -0
  26. package/dist/components/DataTable/SavedViewActions.js +34 -0
  27. package/dist/components/DataTable/SavedViewActions.js.map +1 -0
  28. package/dist/components/DataTable/SavedViewMenu.d.ts +18 -0
  29. package/dist/components/DataTable/SavedViewMenu.d.ts.map +1 -0
  30. package/dist/components/DataTable/SavedViewMenu.js +25 -0
  31. package/dist/components/DataTable/SavedViewMenu.js.map +1 -0
  32. package/dist/components/DataTable/SavedViewsBar.d.ts +25 -13
  33. package/dist/components/DataTable/SavedViewsBar.d.ts.map +1 -1
  34. package/dist/components/DataTable/SavedViewsBar.js +43 -83
  35. package/dist/components/DataTable/SavedViewsBar.js.map +1 -1
  36. package/dist/components/DataTable/TableActions.d.ts +4 -2
  37. package/dist/components/DataTable/TableActions.d.ts.map +1 -1
  38. package/dist/components/DataTable/TableActions.js +11 -14
  39. package/dist/components/DataTable/TableActions.js.map +1 -1
  40. package/dist/components/DataTable/index.d.ts +2 -0
  41. package/dist/components/DataTable/index.d.ts.map +1 -1
  42. package/dist/components/DataTable/saveErrorMessage.d.ts +3 -0
  43. package/dist/components/DataTable/saveErrorMessage.d.ts.map +1 -0
  44. package/dist/components/DataTable/saveErrorMessage.js +9 -0
  45. package/dist/components/DataTable/saveErrorMessage.js.map +1 -0
  46. package/dist/components/DataTable/savedViews.d.ts +15 -30
  47. package/dist/components/DataTable/savedViews.d.ts.map +1 -1
  48. package/dist/components/DataTable/savedViews.js +51 -98
  49. package/dist/components/DataTable/savedViews.js.map +1 -1
  50. package/dist/components/DataTable/useActiveSavedView.d.ts +1 -1
  51. package/dist/components/DataTable/useActiveSavedView.d.ts.map +1 -1
  52. package/dist/components/DataTable/useActiveSavedView.js +5 -4
  53. package/dist/components/DataTable/useActiveSavedView.js.map +1 -1
  54. package/dist/components/DataTable/useColumnVisibility.d.ts +7 -7
  55. package/dist/components/DataTable/useColumnVisibility.d.ts.map +1 -1
  56. package/dist/components/DataTable/useColumnVisibility.js +14 -14
  57. package/dist/components/DataTable/useColumnVisibility.js.map +1 -1
  58. package/dist/components/DataTable/useResultsAnnouncement.d.ts +26 -0
  59. package/dist/components/DataTable/useResultsAnnouncement.d.ts.map +1 -0
  60. package/dist/components/DataTable/{useFilterAnnouncement.js → useResultsAnnouncement.js} +16 -12
  61. package/dist/components/DataTable/useResultsAnnouncement.js.map +1 -0
  62. package/dist/components/DataTable/useSaveStatus.d.ts +32 -0
  63. package/dist/components/DataTable/useSaveStatus.d.ts.map +1 -0
  64. package/dist/components/DataTable/useSaveStatus.js +80 -0
  65. package/dist/components/DataTable/useSaveStatus.js.map +1 -0
  66. package/dist/components/DataTable/useSavedViewNameModal.d.ts +14 -0
  67. package/dist/components/DataTable/useSavedViewNameModal.d.ts.map +1 -0
  68. package/dist/components/DataTable/useSavedViewNameModal.js +43 -0
  69. package/dist/components/DataTable/useSavedViewNameModal.js.map +1 -0
  70. package/dist/components/DataTable/useSavedViewsClient.d.ts +58 -0
  71. package/dist/components/DataTable/useSavedViewsClient.d.ts.map +1 -0
  72. package/dist/components/DataTable/useSavedViewsClient.js +87 -0
  73. package/dist/components/DataTable/useSavedViewsClient.js.map +1 -0
  74. package/dist/components/DataTable/useSavedViewsState.d.ts +35 -0
  75. package/dist/components/DataTable/useSavedViewsState.d.ts.map +1 -0
  76. package/dist/components/DataTable/useSavedViewsState.js +192 -0
  77. package/dist/components/DataTable/useSavedViewsState.js.map +1 -0
  78. package/dist/components/DataTable/useUpdateSavedViewName.d.ts +2 -3
  79. package/dist/components/DataTable/useUpdateSavedViewName.d.ts.map +1 -1
  80. package/dist/components/DataTable/useUpdateSavedViewName.js +1 -2
  81. package/dist/components/DataTable/useUpdateSavedViewName.js.map +1 -1
  82. package/dist/components/button/BaseButton.d.ts +2 -0
  83. package/dist/components/button/BaseButton.d.ts.map +1 -1
  84. package/dist/components/button/BaseButton.js +8 -17
  85. package/dist/components/button/BaseButton.js.map +1 -1
  86. package/dist/components/internal/LoadingAnnouncement.d.ts +6 -0
  87. package/dist/components/internal/LoadingAnnouncement.d.ts.map +1 -1
  88. package/dist/components/internal/LoadingAnnouncement.js +12 -3
  89. package/dist/components/internal/LoadingAnnouncement.js.map +1 -1
  90. package/dist/components/internal/index.d.ts +1 -1
  91. package/dist/components/internal/index.d.ts.map +1 -1
  92. package/dist/components/internal/tooltip/useTooltipTriggerProps.d.ts +13 -0
  93. package/dist/components/internal/tooltip/useTooltipTriggerProps.d.ts.map +1 -0
  94. package/dist/components/internal/tooltip/useTooltipTriggerProps.js +24 -0
  95. package/dist/components/internal/tooltip/useTooltipTriggerProps.js.map +1 -0
  96. package/dist/components/link/BaseLink.d.ts.map +1 -1
  97. package/dist/components/link/BaseLink.js +3 -13
  98. package/dist/components/link/BaseLink.js.map +1 -1
  99. package/dist/components/segmented-control/IconSegment.d.ts +30 -8
  100. package/dist/components/segmented-control/IconSegment.d.ts.map +1 -1
  101. package/dist/components/segmented-control/IconSegment.js +10 -3
  102. package/dist/components/segmented-control/IconSegment.js.map +1 -1
  103. package/dist/components/segmented-control/SegmentBase.d.ts.map +1 -1
  104. package/dist/components/segmented-control/SegmentBase.js +4 -2
  105. package/dist/components/segmented-control/SegmentBase.js.map +1 -1
  106. package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -1
  107. package/dist/components/segmented-control/SegmentedControl.js +10 -3
  108. package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
  109. package/dist/index.css +20 -5
  110. package/dist/index.css.map +1 -1
  111. package/dist/reactRender.css +1409 -1319
  112. package/dist/reactRender.css.map +1 -1
  113. package/dist/reactRender.js +1 -1
  114. package/dist/reactRenderLegacy.css +1409 -1319
  115. package/dist/reactRenderLegacy.css.map +1 -1
  116. package/dist/reactRenderLegacy.js +1 -1
  117. package/dist/tapestryMount.css +1409 -1319
  118. package/dist/tapestryMount.css.map +1 -1
  119. package/dist/tapestryMount.js +1 -1
  120. package/dist/tapestryMountLegacy.css +1409 -1319
  121. package/dist/tapestryMountLegacy.css.map +1 -1
  122. package/dist/tapestryMountLegacy.js +1 -1
  123. package/dist/tokens-dark.css +2 -2
  124. package/dist/tokens-dark.css.map +1 -1
  125. package/dist/tokens.css +3 -3
  126. package/dist/tokens.css.map +1 -1
  127. package/dist/unstable.css +385 -295
  128. package/dist/unstable.css.map +1 -1
  129. package/dist/unstable.js +1 -0
  130. package/dist/unstable.js.map +1 -1
  131. package/package.json +6 -7
  132. package/dist/components/DataTable/useFilterAnnouncement.d.ts +0 -24
  133. package/dist/components/DataTable/useFilterAnnouncement.d.ts.map +0 -1
  134. package/dist/components/DataTable/useFilterAnnouncement.js.map +0 -1
@@ -677,1499 +677,1253 @@
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
957
 
1041
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1042
- display:flex;
1043
- flex-direction:column;
1044
- }
958
+ @media (prefers-reduced-motion: no-preference){
1045
959
 
1046
- .tds-button-group{
1047
- display:inline-flex;
960
+ :root{
961
+ interpolate-size:allow-keywords;
1048
962
  }
1049
- .tds-button-group > .tds-btn{
1050
- --tds-button-group-item-z-index:1;
1051
-
1052
- position:relative;
1053
- z-index:var(--tds-button-group-item-z-index);
1054
- border-radius:0;
1055
963
  }
1056
- :is(.tds-button-group > .tds-btn):not(:first-child){
1057
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1058
- }
1059
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1060
- position:absolute;
1061
- inset-block:calc(var(--tds-btn-border-width) * -1);
1062
- width:var(--tds-btn-border-width);
1063
- pointer-events:none;
1064
- content:"";
1065
- background-color:var(--t-border-color-white);
1066
- }
1067
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1068
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1069
- }
1070
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1071
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1072
- }
1073
- :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1074
- --tds-button-group-item-z-index:2;
1075
- }
1076
- :is(.tds-button-group > .tds-btn):focus-visible{
1077
- --tds-button-group-item-z-index:5;
1078
- }
1079
- .tds-button-group > .tds-btn:first-child{
1080
- border-start-start-radius:var(--tds-btn-border-radius);
1081
- border-end-start-radius:var(--tds-btn-border-radius);
1082
- }
1083
- .tds-button-group > .tds-btn:last-child{
1084
- border-start-end-radius:var(--tds-btn-border-radius);
1085
- border-end-end-radius:var(--tds-btn-border-radius);
964
+
965
+ @layer tds-component{
966
+ tds-sidenav,
967
+ .tds-sidenav{
968
+ --tds-sidenav-indent:12px;
969
+ --tds-sidenav-item-depth:0;
970
+
971
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
972
+
973
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
974
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
975
+ --tds-sidenav-collapse-closed-opacity:0;
976
+ --tds-sidenav-collapse-open-opacity:1;
977
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
978
+ --tds-sidenav-collapse-open-transform:translateY(0);
979
+
980
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
981
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
982
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
983
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
984
+
985
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
986
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
987
+ --tds-sidenav-item-nested-background-selected:transparent;
988
+
989
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
990
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
991
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
992
+
993
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
994
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1086
995
  }
1087
996
 
1088
- .tds-checkbox{
1089
- --tds-checkbox-font-size:var(--t-font-size-md);
1090
- --tds-checkbox-cursor:pointer;
1091
- --tds-checkbox-line-height:1.4;
1092
- --tds-checkbox-transition-property:background-color, border-color;
997
+ @media (prefers-reduced-motion: reduce){
998
+ tds-sidenav,
999
+ .tds-sidenav{
1000
+ --tds-sidenav-collapse-transition-enter:none;
1001
+ --tds-sidenav-collapse-transition-exit:none;
1002
+ --tds-sidenav-collapse-closed-transform:none;
1003
+ --tds-sidenav-collapse-open-transform:none;
1004
+ }
1005
+ }
1093
1006
 
1094
- --tds-checkbox-input-size:var(--t-element-size-md);
1095
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1096
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1097
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1007
+ .tds-sidenav--theme-gray{
1008
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1009
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1010
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1011
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1012
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1013
+ }
1014
+ }
1098
1015
 
1099
- --tds-checkbox-input-icon:none;
1100
- --tds-checkbox-input-icon-visibility:hidden;
1101
- --tds-checkbox-input-icon-opacity:0;
1102
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1016
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1017
+ display:flex;
1018
+ }
1103
1019
 
1104
- --tds-checkbox-label-color:var(--t-form-color);
1020
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1021
+ flex-direction:column;
1022
+ gap:var(--t-spacing-half);
1023
+ width:100%;
1024
+ }
1105
1025
 
1106
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1107
- --tds-checkbox-description-line-height:1.35;
1108
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1109
- --tds-checkbox-description-invalid-icon-display:none;
1026
+ .tds-sidenav-section-list{
1027
+ width:100%;
1028
+ padding:0;
1029
+ margin:0;
1030
+ list-style:none;
1031
+ }
1110
1032
 
1111
- position:relative;
1112
- display:inline-grid;
1113
- grid-template-columns:auto;
1114
- grid-auto-columns:1fr;
1115
- gap:var(--t-spacing-fourth) 0;
1116
- line-height:var(--tds-checkbox-line-height);
1117
- -webkit-user-select:none;
1118
- -moz-user-select:none;
1119
- user-select:none;
1033
+ .tds-sidenav-section-header{
1034
+ display:flex;
1035
+ align-items:baseline;
1036
+ justify-content:space-between;
1037
+ padding-top:var(--t-spacing-2);
1120
1038
  }
1121
1039
 
1122
- .tds-checkbox label{
1123
- grid-area:1 / 2;
1124
- padding-inline-start:var(--t-spacing-1);
1125
- font-size:var(--tds-checkbox-font-size);
1126
- font-weight:var(--t-font-weight-normal);
1127
- color:var(--tds-checkbox-label-color);
1128
- cursor:var(--tds-checkbox-cursor);
1040
+ .tds-sidenav-section-header h2{
1041
+ margin:0;
1042
+ font-size:var(--t-font-size-sm);
1043
+ font-weight:var(--t-font-weight-semibold);
1044
+ line-height:1.35;
1045
+ color:var(--t-text-color-secondary);
1046
+ text-transform:uppercase;
1129
1047
  }
1130
1048
 
1131
- .tds-checkbox tds-indeterminate{
1049
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1050
+ padding-top:0;
1051
+ }
1052
+
1053
+ .tds-sidenav-section-header .tds-sidenav-section-label-actions,.tds-sidenav-section-header [slot="label-actions"]{
1132
1054
  display:flex;
1055
+ gap:var(--t-spacing-half);
1056
+ align-items:center;
1133
1057
  }
1058
+ .tds-sidenav-section-actions,
1059
+ .tds-sidenav-section [slot="section-actions"]{
1060
+ display:flex;
1061
+ gap:12px;
1062
+ align-items:center;
1063
+ min-height:42px;
1064
+ padding:var(--t-spacing-1) 0;
1065
+ }
1066
+ .tds-sidenav-section-label-actions > [slot="label-actions"],
1067
+ .tds-sidenav-section-actions > [slot="section-actions"]{
1068
+ display:contents;
1069
+ }
1134
1070
 
1135
- .tds-checkbox input[type="checkbox"]{
1071
+ .tds-sidenav-section-list,
1072
+ .tds-sidenav-item{
1073
+ width:100%;
1074
+ padding:0;
1075
+ margin:0;
1076
+ }
1077
+
1078
+ .tds-sidenav-item :is(a,button){
1136
1079
  position:relative;
1137
- width:1em;
1138
- height:1em;
1139
- margin:calc((1lh - 1em) / 2) 0 0;
1140
- font-size:var(--tds-checkbox-font-size);
1141
- line-height:inherit;
1080
+ display:flex;
1081
+ gap:12px;
1082
+ align-items:center;
1083
+ width:100%;
1084
+ padding:12px;
1085
+ overflow:hidden;
1086
+ font-size:var(--t-font-size-sm);
1087
+ line-height:18px;
1088
+ color:var(--t-text-color-headline);
1089
+ white-space:nowrap;
1090
+ text-decoration:none;
1142
1091
  -webkit-appearance:none;
1143
1092
  -moz-appearance:none;
1144
1093
  appearance:none;
1145
- cursor:var(--tds-checkbox-cursor);
1146
- background-color:var(--tds-checkbox-input-background-color);
1147
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1148
- border-radius:var(--tds-checkbox-input-border-radius);
1149
- transition-timing-function:var(--t-ease-in-out);
1150
- transition-duration:var(--t-duration-200);
1151
- transition-property:var(--tds-checkbox-transition-property);
1094
+ cursor:pointer;
1095
+ background-color:var(--tds-sidenav-item-background, transparent);
1096
+ border:0;
1097
+ border-radius:var(--t-border-radius);
1098
+ transition:var(--tds-sidenav-item-transition);
1152
1099
  }
1153
1100
 
1154
- :is(.tds-checkbox input[type="checkbox"])::before{
1155
- position:absolute;
1156
- top:50%;
1157
- left:50%;
1158
- visibility:var(--tds-checkbox-input-icon-visibility);
1159
- width:100%;
1160
- height:100%;
1161
- content:"";
1162
- background-color:var(--tds-checkbox-input-icon-fill);
1163
- border-radius:var(--tds-checkbox-input-border-radius);
1164
- opacity:var(--tds-checkbox-input-icon-opacity);
1165
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1166
- mask-image:var(--tds-checkbox-input-icon);
1167
- -webkit-mask-repeat:no-repeat;
1168
- mask-repeat:no-repeat;
1169
- -webkit-mask-size:contain;
1170
- mask-size:contain;
1171
- transform:translate(-50%, -50%);
1101
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1102
+ display:block;
1103
+ flex:1;
1104
+ overflow:hidden;
1105
+ text-overflow:ellipsis;
1106
+ text-align:left;
1107
+ white-space:nowrap;
1172
1108
  }
1173
1109
 
1174
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1175
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1176
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1110
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1111
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1112
+ color:var(--t-text-color-headline);
1113
+ text-decoration:none;
1177
1114
  }
1178
1115
 
1179
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1180
- outline:var(--t-focus-ring-outline);
1181
- outline-offset:var(--t-focus-ring-offset);
1116
+ :is(.tds-sidenav-item :is(a,button)):active{
1117
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1182
1118
  }
1183
1119
 
1184
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1185
- pointer-events:none;
1120
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1121
+ overflow:hidden;
1122
+ color:var(--tds-sidenav-item-icon-color);
1186
1123
  }
1187
1124
 
1188
- @media (prefers-reduced-motion: reduce){
1125
+ :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{
1126
+ display:block;
1127
+ width:var(--tds-sidenav-item-icon-size);
1128
+ height:var(--tds-sidenav-item-icon-size);
1129
+ }
1189
1130
 
1190
- .tds-checkbox input[type="checkbox"]{
1191
- --tds-checkbox-transition-property:none;
1192
- }
1131
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1132
+ --tds-sidenav-indent:19px;
1193
1133
  }
1194
1134
 
1195
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1196
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1197
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1198
- --tds-checkbox-input-icon-visibility:visible;
1199
- --tds-checkbox-input-icon-opacity:1;
1200
- }
1201
-
1202
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1203
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1204
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1135
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1136
+ visibility:visible;
1137
+ block-size:auto;
1138
+ opacity:1;
1205
1139
  }
1206
1140
 
1207
- .tds-checkbox:has(input:checked){
1208
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1141
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1142
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1143
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1144
+
1145
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1146
+ font-weight:var(--t-font-weight-semibold);
1209
1147
  }
1210
1148
 
1211
- .tds-checkbox:has(input:indeterminate){
1212
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1149
+ .tds-sidenav-item:has(.tds-sidenav-section){
1150
+ display:flex;
1151
+ flex-direction:column;
1152
+ gap:var(--t-spacing-half);
1213
1153
  }
1214
1154
 
1215
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1216
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1217
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1218
- --tds-checkbox-description-invalid-icon-display:inline-block;
1155
+ .tds-sidenav-item .tds-sidenav-section-list{
1156
+ --tds-sidenav-item-depth:1;
1157
+ gap:0;
1219
1158
  }
1220
1159
 
1221
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1222
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1223
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1160
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1161
+ visibility:hidden;
1162
+ block-size:0;
1163
+ overflow-y:clip;
1164
+ opacity:0;
1165
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1224
1166
  }
1225
1167
 
1226
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1227
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1228
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1168
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1169
+ --tds-sidenav-item-depth:2;
1229
1170
  }
1230
1171
 
1231
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1232
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1233
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1172
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1173
+ min-height:var(--t-element-size-2xl);
1174
+ padding-block:9px;
1175
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1176
+ line-height:1;
1177
+ background-color:transparent;
1178
+ }
1179
+
1180
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1181
+ position:absolute;
1182
+ top:0;
1183
+ bottom:0;
1184
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1185
+ width:2px;
1186
+ content:"";
1187
+ background-color:var(--tds-sidenav-item-nested-border-color);
1188
+ transition:var(--tds-sidenav-item-transition);
1234
1189
  }
1235
1190
 
1236
- .tds-checkbox:has(input:required) label::after{
1237
- margin-left:.25ch;
1238
- color:var(--t-text-color-status-error);
1239
- content:"*";
1240
- }
1191
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1192
+ position:absolute;
1193
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1194
+ z-index:-1;
1195
+ height:100%;
1196
+ content:"";
1197
+ background-color:var(--tds-sidenav-item-nested-background);
1198
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1199
+ transition:var(--tds-sidenav-item-transition);
1200
+ }
1241
1201
 
1242
- .tds-checkbox:has(input:disabled){
1243
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1244
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1202
+ :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)){
1203
+ display:block;
1204
+ text-align:left;
1205
+ white-space:normal;
1206
+ }
1245
1207
 
1246
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1247
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1248
- --tds-checkbox-cursor:not-allowed;
1249
- }
1208
+ :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{
1209
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1210
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1211
+ }
1250
1212
 
1251
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1252
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1213
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1214
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1215
+ }
1216
+
1217
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1218
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1219
+ font-weight:var(--t-font-weight-medium);
1253
1220
  }
1254
1221
 
1255
- .tds-checkbox-description{
1222
+ .tds-sidenav-responsive-header{
1256
1223
  display:flex;
1257
- grid-area:2 / 2;
1258
- gap:var(--t-spacing-half);
1259
- align-items:flex-start;
1260
- padding-inline-start:var(--t-spacing-1);
1261
- margin:0;
1262
- font-size:var(--tds-checkbox-description-font-size);
1263
- line-height:var(--tds-checkbox-description-line-height);
1264
- color:var(--tds-checkbox-description-color);
1265
- cursor:text;
1224
+ gap:var(--t-spacing-2);
1225
+ align-items:center;
1226
+ width:100%;
1266
1227
  }
1267
1228
 
1268
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1269
- display:var(--tds-checkbox-description-invalid-icon-display);
1270
- flex-shrink:0;
1271
- margin-top:calc(.5lh - .5em);
1272
- line-height:var(--tds-checkbox-description-line-height);
1229
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1230
+ order:0;
1273
1231
  }
1274
1232
 
1275
- .tds-checkbox--sm{
1276
- --tds-checkbox-line-height:1.35;
1277
- --tds-checkbox-input-size:var(--t-element-size-sm);
1278
- --tds-checkbox-font-size:var(--t-font-size-sm);
1279
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1280
- --tds-checkbox-description-line-height:1.3;
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);
1287
-
1288
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1289
- --tds-checkbox-group-description-line-height:1.35;
1290
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1291
- --tds-checkbox-group-description-invalid-icon-display:none;
1292
- display:flex;
1293
- flex-direction:column;
1294
- gap:0;
1295
- padding:0;
1296
- margin:0;
1297
-
1298
- font-size:var(--tds-checkbox-group-font-size);
1299
- line-height:var(--tds-checkbox-group-line-height);
1300
- border:0;
1301
- }
1233
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1234
+ flex:1;
1235
+ order:1;
1236
+ margin:0;
1237
+ font-size:var(--t-font-size-lg);
1238
+ font-weight:var(--t-font-weight-medium);
1239
+ color:var(--t-text-color-headline);
1240
+ }
1302
1241
 
1303
- .tds-checkbox-group legend{
1304
- float:left;
1242
+ @media (max-width: 719px){
1243
+ .tds-sidenav-collapse{
1244
+ z-index:10001;
1245
+ display:none;
1246
+ max-width:min(448px, calc(100vw - 48px));
1305
1247
  padding:0;
1306
- margin:0;
1248
+ margin:12px 0;
1249
+ position-area:bottom span-right;
1250
+ overflow:hidden;
1251
+ outline:0;
1252
+ background:var(--t-surface-color-card);
1253
+ border:0;
1254
+ border-radius:6px;
1255
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1256
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1257
+ transform:var(--tds-sidenav-collapse-open-transform);
1258
+ transition:var(--tds-sidenav-collapse-transition-enter);
1259
+ will-change:transform;
1307
1260
  }
1308
1261
 
1309
- .tds-checkbox-group[aria-invalid="true"]{
1310
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1311
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
1262
+ .tds-sidenav-scroll-container{
1263
+ --webkit-overflow-scrolling:touch;
1264
+ display:block;
1265
+ width:100%;
1266
+ height:-moz-fit-content;
1267
+ height:fit-content;
1268
+ padding:var(--t-spacing-2);
1269
+ overflow-y:auto;
1312
1270
  }
1313
1271
 
1314
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1315
- margin-left:.25ch;
1316
- color:var(--t-text-color-status-error);
1317
- content:"*";
1272
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1273
+ display:none;
1274
+ }
1275
+ @supports selector(:popover-open){
1276
+ .tds-sidenav-collapse:popover-open{
1277
+ display:flex;
1318
1278
  }
1319
1279
 
1320
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1321
- content:none;
1280
+ .tds-sidenav-collapse:not(:popover-open){
1281
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1282
+ transition:var(--tds-sidenav-collapse-transition-exit);
1322
1283
  }
1323
1284
 
1324
- .tds-checkbox-group-fields{
1325
- display:flex;
1326
- flex-direction:column;
1327
- gap:var(--tds-checkbox-group-gap);
1328
- align-items:flex-start;
1329
- margin-top:var(--t-spacing-1);
1330
- }
1285
+ @starting-style{
1286
+ .tds-sidenav-collapse:popover-open{
1287
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1288
+ transform:var(--tds-sidenav-collapse-closed-transform);
1289
+ }
1290
+ }
1291
+ }
1292
+ @supports not selector(:popover-open){
1293
+ .tds-sidenav-collapse.\:popover-open{
1294
+ display:flex;
1295
+ }
1331
1296
 
1332
- .tds-checkbox-group-description{
1333
- display:flex;
1334
- gap:var(--t-spacing-half);
1335
- align-items:flex-start;
1336
- margin:var(--t-spacing-fourth) 0 0;
1337
- font-size:var(--tds-checkbox-group-description-font-size);
1338
- line-height:var(--tds-checkbox-group-description-line-height);
1339
- color:var(--tds-checkbox-group-description-color);
1340
- cursor:text;
1297
+ .tds-sidenav-collapse:not(.\:popover-open){
1298
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1299
+ transition:var(--tds-sidenav-collapse-transition-exit);
1300
+ }
1301
+ }
1341
1302
  }
1342
1303
 
1343
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1344
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1345
- flex-shrink:0;
1346
- margin-top:calc(.5lh - .5em);
1347
- line-height:var(--tds-checkbox-group-description-line-height);
1304
+ @media (min-width: 720px){
1305
+ .tds-sidenav-responsive-header{
1306
+ display:none;
1348
1307
  }
1349
-
1350
- .tds-checkbox-group--sm{
1351
- --tds-checkbox-group-line-height:1.35;
1352
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1353
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1354
- --tds-checkbox-group-description-line-height:1.3;
1355
1308
  }
1356
1309
 
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;
1310
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1311
+ display:none;
1312
+ }
1313
+
1314
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1315
+ display:block;
1316
+ }
1317
+
1318
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1319
+ display:flex;
1320
+ flex-direction:column;
1321
+ }
1322
+
1323
+ .tds-button-group{
1324
+ display:inline-flex;
1374
1325
  }
1326
+ .tds-button-group > .tds-btn{
1327
+ --tds-button-group-item-z-index:1;
1375
1328
 
1376
- .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1377
- border-color:var(--tds-field-border-color-hover);
1329
+ position:relative;
1330
+ z-index:var(--tds-button-group-item-z-index);
1331
+ border-radius:0;
1332
+ }
1333
+ :is(.tds-button-group > .tds-btn):not(:first-child){
1334
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1335
+ }
1336
+ :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{
1337
+ position:absolute;
1338
+ inset-block:calc(var(--tds-btn-border-width) * -1);
1339
+ width:var(--tds-btn-border-width);
1340
+ pointer-events:none;
1341
+ content:"";
1342
+ background-color:var(--t-border-color-white);
1343
+ }
1344
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1345
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1346
+ }
1347
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1348
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1349
+ }
1350
+ :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1351
+ --tds-button-group-item-z-index:2;
1352
+ }
1353
+ :is(.tds-button-group > .tds-btn):focus-visible{
1354
+ --tds-button-group-item-z-index:5;
1355
+ }
1356
+ .tds-button-group > .tds-btn:first-child{
1357
+ border-start-start-radius:var(--tds-btn-border-radius);
1358
+ border-end-start-radius:var(--tds-btn-border-radius);
1359
+ }
1360
+ .tds-button-group > .tds-btn:last-child{
1361
+ border-start-end-radius:var(--tds-btn-border-radius);
1362
+ border-end-end-radius:var(--tds-btn-border-radius);
1378
1363
  }
1379
1364
 
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);
1365
+ .tds-checkbox{
1366
+ --tds-checkbox-font-size:var(--t-font-size-md);
1367
+ --tds-checkbox-cursor:pointer;
1368
+ --tds-checkbox-line-height:1.4;
1369
+ --tds-checkbox-transition-property:background-color, border-color;
1370
+
1371
+ --tds-checkbox-input-size:var(--t-element-size-md);
1372
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1373
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1374
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
1375
+
1376
+ --tds-checkbox-input-icon:none;
1377
+ --tds-checkbox-input-icon-visibility:hidden;
1378
+ --tds-checkbox-input-icon-opacity:0;
1379
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1380
+
1381
+ --tds-checkbox-label-color:var(--t-form-color);
1382
+
1383
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1384
+ --tds-checkbox-description-line-height:1.35;
1385
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1386
+ --tds-checkbox-description-invalid-icon-display:none;
1387
+
1388
+ position:relative;
1389
+ display:inline-grid;
1390
+ grid-template-columns:auto;
1391
+ grid-auto-columns:1fr;
1392
+ gap:var(--t-spacing-fourth) 0;
1393
+ line-height:var(--tds-checkbox-line-height);
1394
+ -webkit-user-select:none;
1395
+ -moz-user-select:none;
1396
+ user-select:none;
1397
+ }
1398
+
1399
+ .tds-checkbox label{
1400
+ grid-area:1 / 2;
1401
+ padding-inline-start:var(--t-spacing-1);
1402
+ font-size:var(--tds-checkbox-font-size);
1403
+ font-weight:var(--t-font-weight-normal);
1404
+ color:var(--tds-checkbox-label-color);
1405
+ cursor:var(--tds-checkbox-cursor);
1384
1406
  }
1385
1407
 
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;
1408
+ .tds-checkbox tds-indeterminate{
1409
+ display:flex;
1410
+ }
1411
+
1412
+ .tds-checkbox input[type="checkbox"]{
1413
+ position:relative;
1414
+ width:1em;
1415
+ height:1em;
1416
+ margin:calc((1lh - 1em) / 2) 0 0;
1417
+ font-size:var(--tds-checkbox-font-size);
1418
+ line-height:inherit;
1393
1419
  -webkit-appearance:none;
1394
1420
  -moz-appearance:none;
1395
1421
  appearance:none;
1396
- outline:0;
1397
- background-color:transparent;
1398
- border:0;
1422
+ cursor:var(--tds-checkbox-cursor);
1423
+ background-color:var(--tds-checkbox-input-background-color);
1424
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1425
+ border-radius:var(--tds-checkbox-input-border-radius);
1426
+ transition-timing-function:var(--t-ease-in-out);
1427
+ transition-duration:var(--t-duration-200);
1428
+ transition-property:var(--tds-checkbox-transition-property);
1399
1429
  }
1400
1430
 
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;
1431
+ :is(.tds-checkbox input[type="checkbox"])::before{
1432
+ position:absolute;
1433
+ top:50%;
1434
+ left:50%;
1435
+ visibility:var(--tds-checkbox-input-icon-visibility);
1436
+ width:100%;
1437
+ height:100%;
1438
+ content:"";
1439
+ background-color:var(--tds-checkbox-input-icon-fill);
1440
+ border-radius:var(--tds-checkbox-input-border-radius);
1441
+ opacity:var(--tds-checkbox-input-icon-opacity);
1442
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1443
+ mask-image:var(--tds-checkbox-input-icon);
1444
+ -webkit-mask-repeat:no-repeat;
1445
+ mask-repeat:no-repeat;
1446
+ -webkit-mask-size:contain;
1447
+ mask-size:contain;
1448
+ transform:translate(-50%, -50%);
1405
1449
  }
1406
1450
 
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;
1451
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1452
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1453
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1412
1454
  }
1413
1455
 
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
- }
1456
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1457
+ outline:var(--t-focus-ring-outline);
1458
+ outline-offset:var(--t-focus-ring-offset);
1459
+ }
1422
1460
 
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
- }
1461
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1462
+ pointer-events:none;
1463
+ }
1428
1464
 
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);
1465
+ @media (prefers-reduced-motion: reduce){
1433
1466
 
1434
- cursor:not-allowed;
1467
+ .tds-checkbox input[type="checkbox"]{
1468
+ --tds-checkbox-transition-property:none;
1435
1469
  }
1436
-
1437
- .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1438
- color:var(--tds-field-color);
1439
1470
  }
1440
1471
 
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);
1472
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1473
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1474
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1475
+ --tds-checkbox-input-icon-visibility:visible;
1476
+ --tds-checkbox-input-icon-opacity:1;
1446
1477
  }
1447
1478
 
1448
- .tds-currency-input-control:has([readonly]):has(input:focus){
1449
- border-color:var(--t-form-border-color-hover);
1479
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1480
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1481
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1450
1482
  }
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
1483
 
1484
+ .tds-checkbox:has(input:checked){
1485
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1486
+ }
1460
1487
 
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
- }
1488
+ .tds-checkbox:has(input:indeterminate){
1489
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1490
+ }
1465
1491
 
1466
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1467
- inline-size:1em;
1468
- block-size:2em;
1492
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1493
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1494
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1495
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1496
+ }
1497
+
1498
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1499
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1500
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1469
1501
  }
1470
1502
 
1471
- [type="file"]:is(.tds-input input){
1472
- padding-block:var(--t-spacing-half);
1473
- padding-inline-start:var(--t-spacing-half);
1503
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1504
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1505
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1474
1506
  }
1475
1507
 
1476
- [type="file"]:is(.tds-input input):not(:disabled){
1477
- color:var(--t-text-color-secondary);
1508
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1509
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1510
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1478
1511
  }
1479
1512
 
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
- }
1513
+ .tds-checkbox:has(input:required) label::after{
1514
+ margin-left:.25ch;
1515
+ color:var(--t-text-color-status-error);
1516
+ content:"*";
1517
+ }
1507
1518
 
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
- }
1519
+ .tds-checkbox:has(input:disabled){
1520
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1521
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1520
1522
 
1521
- .tds-input--auto-width input{
1522
- field-sizing:content;
1523
- inline-size:auto;
1523
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1524
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1525
+ --tds-checkbox-cursor:not-allowed;
1524
1526
  }
1525
- }
1526
-
1527
- .tds-pane{
1528
- --tds-pane-background-color:var(--t-surface-color-card);
1529
- --tds-pane-border-radius:var(--t-border-radius-lg);
1530
- --tds-pane-border-color:var(--t-border-color);
1531
-
1532
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
1533
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
1534
-
1535
- --tds-pane-title-color:var(--t-text-color-headline);
1536
- --tds-pane-title-font-size:var(--t-font-size-lg);
1537
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
1538
- --tds-pane-title-line-height:1.4;
1539
1527
 
1540
- --tds-pane-body-padding:var(--t-spacing-3);
1541
-
1542
- --tds-pane-footer-padding-block:var(--t-spacing-2);
1543
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
1544
-
1545
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
1546
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
1528
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1529
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1530
+ }
1547
1531
 
1548
- background:var(--tds-pane-background-color);
1549
- border-radius:var(--tds-pane-border-radius);
1550
- border:var(--t-border-width) solid var(--tds-pane-border-color);
1532
+ .tds-checkbox-description{
1551
1533
  display:flex;
1552
- flex-direction:column;
1553
- }
1554
-
1555
- .tds-pane-header{
1556
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
1557
- padding-block:var(--tds-pane-header-padding-block);
1558
- padding-inline:var(--tds-pane-header-padding-inline);
1534
+ grid-area:2 / 2;
1535
+ gap:var(--t-spacing-half);
1536
+ align-items:flex-start;
1537
+ padding-inline-start:var(--t-spacing-1);
1538
+ margin:0;
1539
+ font-size:var(--tds-checkbox-description-font-size);
1540
+ line-height:var(--tds-checkbox-description-line-height);
1541
+ color:var(--tds-checkbox-description-color);
1542
+ cursor:text;
1559
1543
  }
1560
1544
 
1561
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
1562
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
1563
- }
1564
-
1565
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
1566
- flex-basis:100%;
1567
- order:1;
1568
- }
1569
-
1570
- .tds-pane-header:has( > tds-helper-shelf){
1571
- row-gap:var(--tds-pane-header-padding-block);
1572
- padding-block-end:0;
1573
- }
1574
-
1575
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
1576
- font-size:var(--t-font-size-md);
1577
- margin-block-end:var(--tds-pane-header-padding-block);
1545
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1546
+ display:var(--tds-checkbox-description-invalid-icon-display);
1547
+ flex-shrink:0;
1548
+ margin-top:calc(.5lh - .5em);
1549
+ line-height:var(--tds-checkbox-description-line-height);
1578
1550
  }
1579
1551
 
1580
- .tds-pane-title{
1581
- color:var(--tds-pane-title-color);
1582
- font-size:var(--tds-pane-title-font-size);
1583
- font-weight:var(--tds-pane-title-font-weight);
1584
- line-height:var(--tds-pane-title-line-height);
1585
- margin:0;
1552
+ .tds-checkbox--sm{
1553
+ --tds-checkbox-line-height:1.35;
1554
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1555
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1556
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1557
+ --tds-checkbox-description-line-height:1.3;
1586
1558
  }
1587
1559
 
1588
- .tds-pane-body{
1589
- padding:var(--tds-pane-body-padding);
1590
- }
1560
+ .tds-checkbox-group{
1561
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1562
+ --tds-checkbox-group-line-height:1.4;
1563
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1591
1564
 
1592
- .tds-pane-footer{
1593
- padding-block-end:var(--tds-pane-footer-padding-block);
1594
- padding-inline:var(--tds-pane-footer-padding-inline);
1595
- }
1565
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1566
+ --tds-checkbox-group-description-line-height:1.35;
1567
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1568
+ --tds-checkbox-group-description-invalid-icon-display:none;
1569
+ display:flex;
1570
+ flex-direction:column;
1571
+ gap:0;
1572
+ padding:0;
1573
+ margin:0;
1596
1574
 
1597
- .tds-pane-divider{
1575
+ font-size:var(--tds-checkbox-group-font-size);
1576
+ line-height:var(--tds-checkbox-group-line-height);
1598
1577
  border:0;
1599
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
1600
- margin-block:var(--tds-pane-divider-margin-block);
1601
- margin-inline:var(--tds-pane-divider-margin-inline);
1602
1578
  }
1603
1579
 
1604
- .tds-pane-divider.tds-pane-divider--inset{
1605
- margin-inline:0;
1580
+ .tds-checkbox-group legend{
1581
+ float:left;
1582
+ padding:0;
1583
+ margin:0;
1606
1584
  }
1607
1585
 
1608
- .tds-popover{
1609
- max-inline-size:24rem;
1610
- overflow:auto;
1611
- overscroll-behavior:none;
1612
- outline:0;
1613
- scrollbar-color:#0004 var(--t-surface-color-card);
1614
- scrollbar-width:thin;
1615
- background:var(--t-surface-color-card);
1616
- background-clip:padding-box;
1617
- border:1px solid var(--t-border-color);
1618
- border-radius:var(--t-border-radius);
1619
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1620
- }
1621
-
1622
- @media (prefers-reduced-motion: no-preference){
1623
- .tds-popover[data-entering]{
1624
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1625
- }
1626
-
1627
- .tds-popover[data-exiting]{
1628
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1629
- }
1586
+ .tds-checkbox-group[aria-invalid="true"]{
1587
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1588
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1589
+ }
1630
1590
 
1631
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1632
- will-change:opacity, transform;
1591
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1592
+ margin-left:.25ch;
1593
+ color:var(--t-text-color-status-error);
1594
+ content:"*";
1633
1595
  }
1634
1596
 
1635
- @keyframes tds-popover{
1636
- from{
1637
- opacity:0;
1638
- transform:translateY(-8px);
1597
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1598
+ content:none;
1639
1599
  }
1640
- }
1641
- }
1642
1600
 
1643
- .tds-popover-content{
1601
+ .tds-checkbox-group-fields{
1644
1602
  display:flex;
1645
1603
  flex-direction:column;
1646
- padding:var(--t-spacing-1);
1647
- outline:0;
1604
+ gap:var(--tds-checkbox-group-gap);
1605
+ align-items:flex-start;
1606
+ margin-top:var(--t-spacing-1);
1648
1607
  }
1649
1608
 
1650
- .tds-modal-overlay{
1651
- --tds-modal-min-margin-block:var(--t-spacing-3);
1652
-
1653
- position:fixed;
1654
- inset:0;
1655
- z-index:1000;
1656
- display:grid;
1657
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1658
- justify-items:center;
1659
- overflow-y:auto;
1660
- background:hsl(0 0% 0% / 40%);
1609
+ .tds-checkbox-group-description{
1610
+ display:flex;
1611
+ gap:var(--t-spacing-half);
1612
+ align-items:flex-start;
1613
+ margin:var(--t-spacing-fourth) 0 0;
1614
+ font-size:var(--tds-checkbox-group-description-font-size);
1615
+ line-height:var(--tds-checkbox-group-description-line-height);
1616
+ color:var(--tds-checkbox-group-description-color);
1617
+ cursor:text;
1661
1618
  }
1662
1619
 
1663
- .tds-modal-overlay[data-entering]{
1664
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1665
- }
1666
-
1667
- .tds-modal-overlay[data-exiting]{
1668
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1620
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1621
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1622
+ flex-shrink:0;
1623
+ margin-top:calc(.5lh - .5em);
1624
+ line-height:var(--tds-checkbox-group-description-line-height);
1669
1625
  }
1670
1626
 
1671
- @keyframes tds-modal-overlay-fade{
1672
- from{
1673
- opacity:0;
1674
- }
1627
+ .tds-checkbox-group--sm{
1628
+ --tds-checkbox-group-line-height:1.35;
1629
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1630
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1631
+ --tds-checkbox-group-description-line-height:1.3;
1675
1632
  }
1676
1633
 
1677
- .tds-modal-frame{
1678
- --tds-modal-width:600px;
1679
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1634
+ .tds-currency-input-control{
1680
1635
  display:flex;
1681
-
1682
- grid-row:2;
1683
- justify-content:center;
1684
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1685
- }
1686
-
1687
- .tds-modal-frame[data-entering]{
1688
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1689
- }
1690
-
1691
- .tds-modal-frame[data-exiting]{
1692
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1693
- }
1694
-
1695
- .tds-modal-frame--sm{
1696
- --tds-modal-width:400px;
1697
- }
1698
-
1699
- .tds-modal-frame--lg{
1700
- --tds-modal-width:800px;
1701
- }
1702
-
1703
- .tds-modal-frame--xl{
1704
- --tds-modal-width:1000px;
1705
- }
1706
-
1707
- @keyframes tds-modal-zoom{
1708
- from{
1709
- opacity:0;
1710
- scale:.96;
1711
- }
1712
- }
1713
-
1714
- @media (prefers-reduced-motion: reduce){
1715
- .tds-modal-overlay[data-entering],
1716
- .tds-modal-overlay[data-exiting],
1717
- .tds-modal-frame[data-entering],
1718
- .tds-modal-frame[data-exiting]{
1719
- animation:none;
1720
- }
1721
- }
1722
-
1723
- .tds-modal{
1724
- display:flex;
1725
- flex-direction:column;
1726
- width:100%;
1727
- padding-block-start:var(--t-spacing-3);
1728
- padding-inline:0;
1729
- background:var(--t-surface-color-card);
1730
-
1731
- border:0;
1732
- border-radius:var(--t-border-radius-lg);
1733
- box-shadow:0 4px 18px 0 #0003;
1734
- }
1735
-
1736
- .tds-modal:focus{
1737
- outline:none;
1738
- }
1739
-
1740
- .tds-modal-header{
1741
- display:grid;
1742
- grid-template-columns:1fr auto;
1743
- -moz-column-gap:var(--t-spacing-2);
1744
- column-gap:var(--t-spacing-2);
1745
- padding-block:0;
1746
- padding-inline:var(--t-spacing-4);
1747
- }
1748
-
1749
- .tds-modal-title{
1750
- grid-row:1;
1751
- grid-column:1;
1752
- margin:0;
1753
- font-size:var(--t-font-size-2xl);
1754
- font-weight:var(--t-font-weight-medium);
1755
- line-height:140%;
1756
- color:var(--t-text-color-headline);
1757
- }
1758
-
1759
- .tds-modal-subtitle{
1760
- grid-row:2;
1761
- grid-column:1;
1762
- margin:0;
1763
- font-size:var(--t-font-size-md);
1764
- font-weight:var(--t-font-weight-medium);
1765
- line-height:140%;
1766
- color:var(--t-text-color-secondary);
1767
- }
1768
-
1769
- .tds-modal-close{
1770
- grid-row:1;
1771
- grid-column:2;
1772
- align-self:center;
1773
- color:var(--t-icon-color-dim);
1774
- }
1775
-
1776
- .tds-modal-body{
1777
- padding-block:var(--t-spacing-3);
1778
- padding-inline:var(--t-spacing-4);
1779
- }
1780
-
1781
- .tds-modal-body--full-width{
1782
- padding-inline:0;
1783
- }
1784
-
1785
- .tds-modal-footer{
1786
- display:flex;
1787
- gap:var(--t-spacing-2);
1636
+ gap:var(--t-spacing-half);
1788
1637
  align-items:center;
1789
- justify-content:flex-end;
1790
- padding-block:var(--t-spacing-3);
1791
- padding-inline:var(--t-spacing-4);
1792
- border-top:1px solid var(--t-border-color);
1793
- }
1794
-
1795
- .tds-modal-footer > [slot="start"]{
1796
- margin-inline-end:auto;
1797
- }
1798
-
1799
- @media (min-width: 720px){
1800
- .tds-modal-overlay{
1801
- --tds-modal-min-margin-block:0;
1802
- }
1803
-
1804
- .tds-modal-footer{
1805
- position:sticky;
1806
- bottom:0;
1807
- background:var(--t-surface-color-card);
1808
- border-end-start-radius:var(--t-border-radius-lg);
1809
- border-end-end-radius:var(--t-border-radius-lg);
1810
- }
1638
+ inline-size:100%;
1639
+ min-block-size:var(--tds-field-min-height);
1640
+ padding-inline:var(--tds-field-padding-inline);
1641
+ font-size:var(--tds-field-font-size);
1642
+ color:var(--tds-field-color);
1643
+ cursor:text;
1644
+ outline:var(--t-focus-ring-width) solid transparent;
1645
+ background-color:var(--tds-field-background-color);
1646
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1647
+ border-radius:var(--t-form-border-radius);
1648
+ transition-timing-function:var(--t-ease-in-out);
1649
+ transition-duration:var(--t-duration-200);
1650
+ transition-property:background-color, border-color, outline-color, outline-offset;
1811
1651
  }
1812
1652
 
1813
- @layer t-critical{
1814
- tds-page-header:not(.hydrated){
1815
- display:none;
1653
+ .tds-currency-input-control:hover:not(:has(input:focus),:has(:disabled,[readonly])){
1654
+ border-color:var(--tds-field-border-color-hover);
1816
1655
  }
1817
- }
1818
1656
 
1819
- @layer t-component{
1820
- .tds-page-header{
1821
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1822
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1823
- --tds-page-header-color:var(--t-text-color);
1824
- --tds-page-header-bottom-border-color:transparent;
1825
- --tds-page-header-headline-color:var(--t-text-color-headline);
1826
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1827
- --tds-page-header-padding-x:var(--t-spacing-2);
1828
- --tds-page-header-padding-y:var(--t-spacing-2);
1829
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1830
- --tds-page-header-nav-gap:var(--t-spacing-1);
1831
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1832
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1833
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1834
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1835
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1836
- --tds-page-header-nav-item-border-width:1px;
1837
-
1838
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1839
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1840
-
1841
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1842
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1843
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1844
-
1845
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1846
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1847
-
1848
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1849
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1850
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1851
-
1852
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1853
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1854
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1855
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1856
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1657
+ .tds-currency-input-control:has(input:focus){
1658
+ outline-color:var(--t-focus-ring-color);
1659
+ outline-offset:var(--t-focus-ring-offset);
1660
+ border-color:var(--tds-field-border-color-active);
1857
1661
  }
1858
1662
 
1859
- .tds-page-header--profile{
1860
- --tds-page-header-padding-y:20px;
1663
+ .tds-currency-input-control input{
1664
+ flex:1;
1665
+ min-inline-size:0;
1666
+ padding:0;
1667
+ font-family:inherit;
1668
+ font-size:inherit;
1669
+ color:inherit;
1670
+ -webkit-appearance:none;
1671
+ -moz-appearance:none;
1672
+ appearance:none;
1673
+ outline:0;
1674
+ background-color:transparent;
1675
+ border:0;
1861
1676
  }
1862
1677
 
1863
- @supports (color: light-dark(#fff, #000)){
1864
- .tds-page-header{
1865
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1866
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1678
+ :is(.tds-currency-input-control input)::-moz-placeholder{
1679
+ color:var(--tds-field-placeholder-color);
1680
+ -moz-user-select:none;
1681
+ user-select:none;
1867
1682
  }
1868
- }
1869
1683
 
1870
- @media (min-width: 600px){
1871
- .tds-page-header{
1872
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1873
- --tds-page-header-color:var(--t-text-color-secondary);
1874
- --tds-page-header-bottom-border-color:var(--t-border-color);
1875
- --tds-page-header-padding-x:var(--t-spacing-3);
1876
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1877
- --tds-page-header-nav-gap:var(--t-spacing-half);
1878
- --tds-page-header-nav-background:transparent;
1879
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1880
- --tds-page-header-nav-item-border-width:1px;
1881
- --tds-page-header-nav-item-color:var(--t-text-color);
1882
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1883
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1884
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1885
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1886
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1887
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1684
+ :is(.tds-currency-input-control input)::placeholder{
1685
+ color:var(--tds-field-placeholder-color);
1686
+ -webkit-user-select:none;
1687
+ -moz-user-select:none;
1688
+ user-select:none;
1888
1689
  }
1889
- }
1890
- }
1891
1690
 
1892
- .tds-page-header{
1893
- display:flex;
1894
- flex-direction:column;
1895
- padding-top:var(--tds-page-header-padding-y);
1896
- color:var(--tds-page-header-color);
1897
- background:var(--tds-page-header-background-color);
1898
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1899
- }
1900
-
1901
- .tds-page-header:not(.has-nav){
1902
- padding-bottom:var(--tds-page-header-padding-y);
1691
+ .tds-currency-input-control .tds-currency-input-prefix{
1692
+ flex-shrink:0;
1693
+ color:var(--t-text-color-secondary);
1694
+ pointer-events:none;
1695
+ -webkit-user-select:none;
1696
+ -moz-user-select:none;
1697
+ user-select:none;
1903
1698
  }
1904
1699
 
1905
- .tds-page-header.inactive{
1906
- background:var(--tds-page-header-background-color-inactive);
1700
+ .tds-currency-input-control:has(input:is(:user-invalid,[aria-invalid="true"])){
1701
+ --tds-field-background-color:var(--t-form-background-color-error);
1702
+ --tds-field-border-color:var(--t-form-border-color-error);
1703
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1907
1704
  }
1908
1705
 
1909
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1910
- width:100%;
1911
- }
1706
+ .tds-currency-input-control:has(:disabled){
1707
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1708
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1709
+ --tds-field-color:var(--t-form-color-disabled);
1912
1710
 
1913
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1914
- display:flex;
1915
- flex-flow:row wrap;
1916
- gap:var(--t-spacing-half) var(--t-spacing-1);
1917
- align-items:flex-start;
1918
- justify-content:flex-start;
1919
- min-width:0;
1711
+ cursor:not-allowed;
1920
1712
  }
1921
1713
 
1922
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1923
- display:flex;
1924
- gap:var(--tds-page-header-nav-gap);
1925
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1926
- margin:0 0 -1px;
1927
- overflow:auto;
1928
- list-style:none;
1929
- background:var(--tds-page-header-nav-background);
1930
- }
1931
-
1932
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1933
- position:relative;
1934
- display:inline-flex;
1935
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1936
- font-size:var(--t-font-size-sm);
1937
- line-height:22px;
1938
- color:var(--tds-page-header-nav-item-color);
1939
- white-space:nowrap;
1940
- text-decoration:none;
1941
- -webkit-appearance:none;
1942
- -moz-appearance:none;
1943
- appearance:none;
1944
- cursor:pointer;
1945
- outline-offset:-2px;
1946
- background-color:var(--tds-page-header-nav-item-background-color);
1947
- background-clip:padding-box;
1948
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1949
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1950
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1714
+ .tds-currency-input-control:has(:disabled) .tds-currency-input-prefix{
1715
+ color:var(--tds-field-color);
1951
1716
  }
1952
1717
 
1953
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1954
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1955
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1956
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1957
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1958
- }
1959
-
1960
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1961
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1962
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1963
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1964
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1965
- }
1718
+ .tds-currency-input-control:has([readonly]){
1719
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1720
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1721
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1722
+ --tds-field-color:var(--t-form-color-readonly);
1723
+ }
1966
1724
 
1967
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1968
- background-color:var(--tds-page-header-nav-item-background-color-active);
1969
- border-color:var(--tds-page-header-nav-item-border-color-active);
1970
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1971
- }
1725
+ .tds-currency-input-control:has([readonly]):has(input:focus){
1726
+ border-color:var(--t-form-border-color-hover);
1727
+ }
1728
+ .tds-currency-input-currency-name--hidden{
1729
+ position:absolute;
1730
+ width:1px;
1731
+ height:1px;
1732
+ overflow:hidden;
1733
+ white-space:nowrap;
1734
+ clip-path:inset(50%);
1735
+ }
1972
1736
 
1973
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1974
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1975
- color:var(--tds-page-header-nav-item-color-disabled);
1976
- cursor:not-allowed;
1977
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1978
- opacity:1;
1979
- }
1980
1737
 
1981
- @media (min-width: 600px){
1982
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1983
- position:absolute;
1984
- inset:auto -1px -1px;
1985
- height:1px;
1986
- pointer-events:none;
1987
- content:"";
1988
- background-color:var(--tds-page-header-bottom-border-color);
1989
- }
1990
- }
1738
+ :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{
1739
+ -webkit-appearance:none;
1740
+ appearance:none;
1741
+ }
1991
1742
 
1992
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1993
- position:relative;
1743
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1744
+ inline-size:1em;
1745
+ block-size:2em;
1994
1746
  }
1995
1747
 
1996
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1997
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1998
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1748
+ [type="file"]:is(.tds-input input){
1749
+ padding-block:var(--t-spacing-half);
1750
+ padding-inline-start:var(--t-spacing-half);
1751
+ }
1752
+
1753
+ [type="file"]:is(.tds-input input):not(:disabled){
1754
+ color:var(--t-text-color-secondary);
1999
1755
  }
2000
1756
 
2001
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2002
- position:absolute;
2003
- top:-5px;
2004
- right:-2px;
2005
- width:10px;
2006
- height:10px;
2007
- content:"";
2008
- background:var(--tds-page-header-nav-item-indicator-color);
2009
- border-radius:50%;
1757
+ [type="file"]:is(.tds-input input)::file-selector-button{
1758
+ --_file-btn-padding-block:3px;
1759
+
1760
+ padding-block:var(--_file-btn-padding-block);
1761
+ padding-inline:12px;
1762
+ margin-inline-end:12px;
1763
+ font:inherit;
1764
+ 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));
1765
+ color:var(--t-text-color-status-neutral);
1766
+ cursor:pointer;
1767
+ background-color:var(--t-fill-color-button-neutral-solid);
1768
+ border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1769
+ border-radius:var(--t-border-radius-md);
1770
+ transition-timing-function:var(--t-ease-in-out);
1771
+ transition-duration:var(--t-duration-200);
1772
+ transition-property:color, background-color, border-color;
2010
1773
  }
2011
1774
 
2012
- @media (prefers-reduced-motion: no-preference){
2013
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2014
- animation:indicator-pulse 1.25s ease infinite;
2015
- }
1775
+ [type="file"]:is(.tds-input input):hover::file-selector-button{
1776
+ background-color:var(--t-fill-color-button-neutral-solid-hover);
1777
+ border-color:var(--t-fill-color-button-neutral-solid-hover);
2016
1778
  }
2017
1779
 
2018
- .tds-page-header__title-bar{
2019
- display:flex;
2020
- flex-direction:column;
2021
- gap:var(--t-spacing-2) var(--t-spacing-1);
2022
- align-items:flex-start;
2023
- justify-content:space-between;
2024
- padding:0 var(--tds-page-header-padding-x);
2025
- }
1780
+ [type="file"]:is(.tds-input input):active::file-selector-button{
1781
+ background-color:var(--t-fill-color-button-neutral-solid-active);
1782
+ border-color:var(--t-fill-color-button-neutral-solid-active);
1783
+ }
2026
1784
 
2027
- .tds-page-header--profile > .tds-page-header__title-bar{
2028
- align-items:center;
1785
+ [type="file"]:is(.tds-input input):disabled::file-selector-button{
1786
+ color:var(--t-text-color-disabled);
1787
+ pointer-events:none;
1788
+ background-color:var(--t-fill-color-button-neutral-solid-disabled);
1789
+ border-color:var(--t-fill-color-button-neutral-solid-disabled);
1790
+ }
1791
+ @supports (field-sizing: content){
1792
+ .tds-input--auto-width{
1793
+ inline-size:-moz-fit-content;
1794
+ inline-size:fit-content;
1795
+ min-inline-size:min(100%, 122px);
2029
1796
  }
2030
1797
 
2031
- .tds-page-header__primary{
2032
- width:100%;
1798
+ .tds-input--auto-width input{
1799
+ field-sizing:content;
1800
+ inline-size:auto;
1801
+ }
2033
1802
  }
2034
1803
 
2035
- .tds-page-header__primary h1{
2036
- margin:0;
2037
- font-size:var(--tds-page-header-headline-font-size);
2038
- font-weight:var(--t-font-weight-normal);
2039
- line-height:32px;
2040
- color:var(--tds-page-header-headline-color);
2041
- overflow-wrap:break-word;
2042
- }
1804
+ .tds-popover{
1805
+ max-inline-size:24rem;
1806
+ overflow:auto;
1807
+ overscroll-behavior:none;
1808
+ outline:0;
1809
+ scrollbar-color:#0004 var(--t-surface-color-card);
1810
+ scrollbar-width:thin;
1811
+ background:var(--t-surface-color-card);
1812
+ background-clip:padding-box;
1813
+ border:1px solid var(--t-border-color);
1814
+ border-radius:var(--t-border-radius);
1815
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1816
+ }
2043
1817
 
2044
- @media (min-width: 960px){
2045
- .tds-page-header__primary{
2046
- flex:1 1 max-content;
2047
- width:auto;
2048
- min-width:0;
2049
- max-width:100%;
2050
- }
1818
+ @media (prefers-reduced-motion: no-preference){
1819
+ .tds-popover[data-entering]{
1820
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1821
+ }
2051
1822
 
2052
- .tds-page-header__title-bar,
2053
- .tds-page-header--profile .tds-page-header__title-bar{
2054
- flex-flow:row nowrap;
2055
- row-gap:12px;
2056
- align-items:flex-start;
2057
- }
2058
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2059
- width:auto;
1823
+ .tds-popover[data-exiting]{
1824
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2060
1825
  }
2061
1826
 
2062
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2063
- justify-content:flex-end;
1827
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
1828
+ will-change:opacity, transform;
2064
1829
  }
2065
- }
2066
1830
 
2067
- .tds-page-header-phone,
2068
- .tds-page-header-email{
2069
- color:var(--tds-page-header-color);
2070
- white-space:nowrap;
1831
+ @keyframes tds-popover{
1832
+ from{
1833
+ opacity:0;
1834
+ transform:translateY(-8px);
1835
+ }
1836
+ }
2071
1837
  }
2072
- .tds-page-header-email{
2073
- max-width:100%;
2074
- overflow:hidden;
2075
- text-overflow:ellipsis;
1838
+
1839
+ .tds-popover-content{
1840
+ display:flex;
1841
+ flex-direction:column;
1842
+ padding:var(--t-spacing-1);
1843
+ outline:0;
2076
1844
  }
2077
1845
 
2078
- @keyframes indicator-pulse{
2079
- 0%{
2080
- opacity:.3;
2081
- transform:scale(.9);
2082
- }
1846
+ .tds-pane{
1847
+ --tds-pane-background-color:var(--t-surface-color-card);
1848
+ --tds-pane-border-radius:var(--t-border-radius-lg);
1849
+ --tds-pane-border-color:var(--t-border-color);
2083
1850
 
2084
- 100%{
2085
- opacity:0;
2086
- transform:scale(1.75);
2087
- }
2088
- }
1851
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
1852
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
2089
1853
 
2090
- .tds-radio-group{
2091
- --tds-radio-group-font-size:var(--t-font-size-md);
2092
- --tds-radio-group-line-height:1.4;
2093
- --tds-radio-group-gap:var(--t-spacing-1);
1854
+ --tds-pane-title-color:var(--t-text-color-headline);
1855
+ --tds-pane-title-font-size:var(--t-font-size-lg);
1856
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
1857
+ --tds-pane-title-line-height:1.4;
2094
1858
 
2095
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
2096
- --tds-radio-group-description-line-height:1.35;
2097
- --tds-radio-group-description-color:var(--t-text-color-secondary);
2098
- --tds-radio-group-description-invalid-icon-display:none;
1859
+ --tds-pane-body-padding:var(--t-spacing-3);
1860
+
1861
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
1862
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
1863
+
1864
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
1865
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
1866
+
1867
+ background:var(--tds-pane-background-color);
1868
+ border-radius:var(--tds-pane-border-radius);
1869
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
2099
1870
  display:flex;
2100
1871
  flex-direction:column;
2101
- gap:0;
2102
- padding:0;
2103
- margin:0;
1872
+ }
2104
1873
 
2105
- font-size:var(--tds-radio-group-font-size);
2106
- line-height:var(--tds-radio-group-line-height);
2107
- border:0;
1874
+ .tds-pane-header{
1875
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
1876
+ padding-block:var(--tds-pane-header-padding-block);
1877
+ padding-inline:var(--tds-pane-header-padding-inline);
2108
1878
  }
2109
1879
 
2110
- .tds-radio-group legend{
2111
- float:left;
2112
- padding:0;
2113
- margin:0;
1880
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
1881
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
2114
1882
  }
2115
1883
 
2116
- .tds-radio-group[aria-invalid="true"]{
2117
- --tds-radio-group-description-color:var(--t-text-color-status-error);
2118
- --tds-radio-group-description-invalid-icon-display:inline-block;
1884
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
1885
+ flex-basis:100%;
1886
+ order:1;
2119
1887
  }
2120
1888
 
2121
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2122
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2123
- }
2124
-
2125
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2126
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2127
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2128
- }
2129
-
2130
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2131
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2132
- }
1889
+ .tds-pane-header:has( > tds-helper-shelf){
1890
+ row-gap:var(--tds-pane-header-padding-block);
1891
+ padding-block-end:0;
1892
+ }
2133
1893
 
2134
- .tds-radio-group:has(input:required) legend::after{
2135
- margin-left:.25ch;
2136
- color:var(--t-text-color-status-error);
2137
- content:"*";
2138
- }
1894
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
1895
+ font-size:var(--t-font-size-md);
1896
+ margin-block-end:var(--tds-pane-header-padding-block);
1897
+ }
2139
1898
 
2140
- .tds-radio-group-fields{
2141
- display:flex;
2142
- flex-direction:column;
2143
- gap:var(--tds-radio-group-gap);
2144
- align-items:flex-start;
2145
- margin-top:var(--t-spacing-1);
1899
+ .tds-pane-title{
1900
+ color:var(--tds-pane-title-color);
1901
+ font-size:var(--tds-pane-title-font-size);
1902
+ font-weight:var(--tds-pane-title-font-weight);
1903
+ line-height:var(--tds-pane-title-line-height);
1904
+ margin:0;
2146
1905
  }
2147
-
2148
- .tds-radio-group-description{
2149
- display:flex;
2150
- gap:var(--t-spacing-half);
2151
- align-items:flex-start;
2152
- margin:var(--t-spacing-fourth) 0 0;
2153
- font-size:var(--tds-radio-group-description-font-size);
2154
- line-height:var(--tds-radio-group-description-line-height);
2155
- color:var(--tds-radio-group-description-color);
2156
- cursor:text;
1906
+
1907
+ .tds-pane-body{
1908
+ padding:var(--tds-pane-body-padding);
2157
1909
  }
2158
1910
 
2159
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2160
- display:var(--tds-radio-group-description-invalid-icon-display);
2161
- flex-shrink:0;
2162
- margin-top:calc(.5lh - .5em);
2163
- line-height:var(--tds-radio-group-description-line-height);
2164
- }
1911
+ .tds-pane-footer{
1912
+ padding-block-end:var(--tds-pane-footer-padding-block);
1913
+ padding-inline:var(--tds-pane-footer-padding-inline);
1914
+ }
2165
1915
 
2166
- .tds-radio-group--sm{
2167
- --tds-radio-group-line-height:1.35;
2168
- --tds-radio-group-font-size:var(--t-font-size-sm);
2169
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
2170
- --tds-radio-group-description-line-height:1.3;
1916
+ .tds-pane-divider{
1917
+ border:0;
1918
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
1919
+ margin-block:var(--tds-pane-divider-margin-block);
1920
+ margin-inline:var(--tds-pane-divider-margin-inline);
2171
1921
  }
2172
1922
 
1923
+ .tds-pane-divider.tds-pane-divider--inset{
1924
+ margin-inline:0;
1925
+ }
1926
+
2173
1927
  .tds-radio{
2174
1928
  --tds-radio-font-size:var(--t-font-size-md);
2175
1929
  --tds-radio-cursor:pointer;
@@ -2254,53 +2008,299 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2254
2008
  --tds-radio-input-border-width:4px;
2255
2009
  }
2256
2010
 
2257
- .tds-radio:has(input:checked) input:hover:not(:disabled){
2258
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
2259
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2260
- }
2011
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2012
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2013
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2014
+ }
2015
+
2016
+ .tds-radio:has(input:user-invalid){
2017
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2018
+ }
2019
+
2020
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2021
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2022
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2023
+ }
2024
+
2025
+ .tds-radio:has(input:disabled){
2026
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2027
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2028
+
2029
+ --tds-radio-label-color:var(--t-form-color-disabled);
2030
+ --tds-radio-description-color:var(--t-form-color-disabled);
2031
+ --tds-radio-cursor:not-allowed;
2032
+ }
2033
+
2034
+ .tds-radio:has(input:disabled) input:checked{
2035
+ --tds-radio-input-background-color:var(--t-form-background-color);
2036
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2037
+ }
2038
+
2039
+ .tds-radio-description{
2040
+ display:flex;
2041
+ grid-area:2 / 2;
2042
+ gap:var(--t-spacing-half);
2043
+ align-items:flex-start;
2044
+ padding-inline-start:var(--t-spacing-1);
2045
+ margin:0;
2046
+ font-size:var(--tds-radio-description-font-size);
2047
+ line-height:var(--tds-radio-description-line-height);
2048
+ color:var(--tds-radio-description-color);
2049
+ cursor:text;
2050
+ }
2051
+
2052
+ .tds-radio--sm{
2053
+ --tds-radio-line-height:1.35;
2054
+ --tds-radio-input-size:var(--t-element-size-sm);
2055
+ --tds-radio-font-size:var(--t-font-size-sm);
2056
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2057
+ --tds-radio-description-line-height:1.3;
2058
+ }
2059
+
2060
+ .tds-modal-overlay{
2061
+ --tds-modal-min-margin-block:var(--t-spacing-3);
2062
+
2063
+ position:fixed;
2064
+ inset:0;
2065
+ z-index:1000;
2066
+ display:grid;
2067
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
2068
+ justify-items:center;
2069
+ overflow-y:auto;
2070
+ background:hsl(0 0% 0% / 40%);
2071
+ }
2072
+
2073
+ .tds-modal-overlay[data-entering]{
2074
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
2075
+ }
2076
+
2077
+ .tds-modal-overlay[data-exiting]{
2078
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
2079
+ }
2080
+
2081
+ @keyframes tds-modal-overlay-fade{
2082
+ from{
2083
+ opacity:0;
2084
+ }
2085
+ }
2086
+
2087
+ .tds-modal-frame{
2088
+ --tds-modal-width:600px;
2089
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
2090
+ display:flex;
2091
+
2092
+ grid-row:2;
2093
+ justify-content:center;
2094
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
2095
+ }
2096
+
2097
+ .tds-modal-frame[data-entering]{
2098
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
2099
+ }
2100
+
2101
+ .tds-modal-frame[data-exiting]{
2102
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
2103
+ }
2104
+
2105
+ .tds-modal-frame--sm{
2106
+ --tds-modal-width:400px;
2107
+ }
2108
+
2109
+ .tds-modal-frame--lg{
2110
+ --tds-modal-width:800px;
2111
+ }
2112
+
2113
+ .tds-modal-frame--xl{
2114
+ --tds-modal-width:1000px;
2115
+ }
2116
+
2117
+ @keyframes tds-modal-zoom{
2118
+ from{
2119
+ opacity:0;
2120
+ scale:.96;
2121
+ }
2122
+ }
2123
+
2124
+ @media (prefers-reduced-motion: reduce){
2125
+ .tds-modal-overlay[data-entering],
2126
+ .tds-modal-overlay[data-exiting],
2127
+ .tds-modal-frame[data-entering],
2128
+ .tds-modal-frame[data-exiting]{
2129
+ animation:none;
2130
+ }
2131
+ }
2132
+
2133
+ .tds-modal{
2134
+ display:flex;
2135
+ flex-direction:column;
2136
+ width:100%;
2137
+ padding-block-start:var(--t-spacing-3);
2138
+ padding-inline:0;
2139
+ background:var(--t-surface-color-card);
2140
+
2141
+ border:0;
2142
+ border-radius:var(--t-border-radius-lg);
2143
+ box-shadow:0 4px 18px 0 #0003;
2144
+ }
2145
+
2146
+ .tds-modal:focus{
2147
+ outline:none;
2148
+ }
2149
+
2150
+ .tds-modal-header{
2151
+ display:grid;
2152
+ grid-template-columns:1fr auto;
2153
+ -moz-column-gap:var(--t-spacing-2);
2154
+ column-gap:var(--t-spacing-2);
2155
+ padding-block:0;
2156
+ padding-inline:var(--t-spacing-4);
2157
+ }
2158
+
2159
+ .tds-modal-title{
2160
+ grid-row:1;
2161
+ grid-column:1;
2162
+ margin:0;
2163
+ font-size:var(--t-font-size-2xl);
2164
+ font-weight:var(--t-font-weight-medium);
2165
+ line-height:140%;
2166
+ color:var(--t-text-color-headline);
2167
+ }
2168
+
2169
+ .tds-modal-subtitle{
2170
+ grid-row:2;
2171
+ grid-column:1;
2172
+ margin:0;
2173
+ font-size:var(--t-font-size-md);
2174
+ font-weight:var(--t-font-weight-medium);
2175
+ line-height:140%;
2176
+ color:var(--t-text-color-secondary);
2177
+ }
2178
+
2179
+ .tds-modal-close{
2180
+ grid-row:1;
2181
+ grid-column:2;
2182
+ align-self:center;
2183
+ color:var(--t-icon-color-dim);
2184
+ }
2185
+
2186
+ .tds-modal-body{
2187
+ padding-block:var(--t-spacing-3);
2188
+ padding-inline:var(--t-spacing-4);
2189
+ }
2190
+
2191
+ .tds-modal-body--full-width{
2192
+ padding-inline:0;
2193
+ }
2194
+
2195
+ .tds-modal-footer{
2196
+ display:flex;
2197
+ gap:var(--t-spacing-2);
2198
+ align-items:center;
2199
+ justify-content:flex-end;
2200
+ padding-block:var(--t-spacing-3);
2201
+ padding-inline:var(--t-spacing-4);
2202
+ border-top:1px solid var(--t-border-color);
2203
+ }
2204
+
2205
+ .tds-modal-footer > [slot="start"]{
2206
+ margin-inline-end:auto;
2207
+ }
2208
+
2209
+ @media (min-width: 720px){
2210
+ .tds-modal-overlay{
2211
+ --tds-modal-min-margin-block:0;
2212
+ }
2213
+
2214
+ .tds-modal-footer{
2215
+ position:sticky;
2216
+ bottom:0;
2217
+ background:var(--t-surface-color-card);
2218
+ border-end-start-radius:var(--t-border-radius-lg);
2219
+ border-end-end-radius:var(--t-border-radius-lg);
2220
+ }
2221
+ }
2222
+
2223
+ .tds-radio-group{
2224
+ --tds-radio-group-font-size:var(--t-font-size-md);
2225
+ --tds-radio-group-line-height:1.4;
2226
+ --tds-radio-group-gap:var(--t-spacing-1);
2227
+
2228
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2229
+ --tds-radio-group-description-line-height:1.35;
2230
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2231
+ --tds-radio-group-description-invalid-icon-display:none;
2232
+ display:flex;
2233
+ flex-direction:column;
2234
+ gap:0;
2235
+ padding:0;
2236
+ margin:0;
2237
+
2238
+ font-size:var(--tds-radio-group-font-size);
2239
+ line-height:var(--tds-radio-group-line-height);
2240
+ border:0;
2241
+ }
2242
+
2243
+ .tds-radio-group legend{
2244
+ float:left;
2245
+ padding:0;
2246
+ margin:0;
2247
+ }
2261
2248
 
2262
- .tds-radio:has(input:user-invalid){
2263
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2249
+ .tds-radio-group[aria-invalid="true"]{
2250
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2251
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2264
2252
  }
2265
2253
 
2266
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2267
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2268
- --tds-radio-input-background-color:var(--t-form-background-color-error);
2254
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2255
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2269
2256
  }
2270
2257
 
2271
- .tds-radio:has(input:disabled){
2272
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2273
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2258
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2259
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2260
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2261
+ }
2274
2262
 
2275
- --tds-radio-label-color:var(--t-form-color-disabled);
2276
- --tds-radio-description-color:var(--t-form-color-disabled);
2277
- --tds-radio-cursor:not-allowed;
2278
- }
2263
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2264
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2265
+ }
2279
2266
 
2280
- .tds-radio:has(input:disabled) input:checked{
2281
- --tds-radio-input-background-color:var(--t-form-background-color);
2282
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2267
+ .tds-radio-group:has(input:required) legend::after{
2268
+ margin-left:.25ch;
2269
+ color:var(--t-text-color-status-error);
2270
+ content:"*";
2283
2271
  }
2284
2272
 
2285
- .tds-radio-description{
2273
+ .tds-radio-group-fields{
2274
+ display:flex;
2275
+ flex-direction:column;
2276
+ gap:var(--tds-radio-group-gap);
2277
+ align-items:flex-start;
2278
+ margin-top:var(--t-spacing-1);
2279
+ }
2280
+
2281
+ .tds-radio-group-description{
2286
2282
  display:flex;
2287
- grid-area:2 / 2;
2288
2283
  gap:var(--t-spacing-half);
2289
2284
  align-items:flex-start;
2290
- padding-inline-start:var(--t-spacing-1);
2291
- margin:0;
2292
- font-size:var(--tds-radio-description-font-size);
2293
- line-height:var(--tds-radio-description-line-height);
2294
- color:var(--tds-radio-description-color);
2285
+ margin:var(--t-spacing-fourth) 0 0;
2286
+ font-size:var(--tds-radio-group-description-font-size);
2287
+ line-height:var(--tds-radio-group-description-line-height);
2288
+ color:var(--tds-radio-group-description-color);
2295
2289
  cursor:text;
2296
2290
  }
2297
2291
 
2298
- .tds-radio--sm{
2299
- --tds-radio-line-height:1.35;
2300
- --tds-radio-input-size:var(--t-element-size-sm);
2301
- --tds-radio-font-size:var(--t-font-size-sm);
2302
- --tds-radio-description-font-size:var(--t-font-size-xs);
2303
- --tds-radio-description-line-height:1.3;
2292
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2293
+ display:var(--tds-radio-group-description-invalid-icon-display);
2294
+ flex-shrink:0;
2295
+ margin-top:calc(.5lh - .5em);
2296
+ line-height:var(--tds-radio-group-description-line-height);
2297
+ }
2298
+
2299
+ .tds-radio-group--sm{
2300
+ --tds-radio-group-line-height:1.35;
2301
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2302
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2303
+ --tds-radio-group-description-line-height:1.3;
2304
2304
  }
2305
2305
 
2306
2306
  .tds-segmented-control{
@@ -2845,7 +2845,7 @@ tds-helper-shelf{
2845
2845
  }
2846
2846
 
2847
2847
  .tds-helper-shelf{
2848
- --tds-helper-shelf-background-color:var(--t-fill-color-neutral-090);
2848
+ --tds-helper-shelf-background-color:var(--t-fill-color-neutral-080);
2849
2849
  --tds-helper-shelf-border-radius:var(--t-border-radius-md);
2850
2850
  --tds-helper-shelf-color:var(--t-text-color);
2851
2851
  --tds-helper-shelf-font-size:var(--t-font-size-sm);
@@ -2884,6 +2884,14 @@ tds-helper-shelf{
2884
2884
  border-radius:var(--tds-helper-shelf-border-radius);
2885
2885
  }
2886
2886
 
2887
+ .tds-helper-shelf-content > :first-child{
2888
+ margin-block-start:0;
2889
+ }
2890
+
2891
+ .tds-helper-shelf-content > :last-child{
2892
+ margin-block-end:0;
2893
+ }
2894
+
2887
2895
  .tds-helper-shelf-trigger{
2888
2896
  --tds-helper-shelf-trigger-color-expanded:var(--t-text-color-interaction);
2889
2897
  }
@@ -3241,7 +3249,7 @@ tds-helper-shelf{
3241
3249
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
3242
3250
  --t-fill-color-button-pill:hsl(0, 0%, 93%);
3243
3251
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
3244
- --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
3252
+ --t-fill-color-button-pill-active:hsl(0, 0%, 81%);
3245
3253
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
3246
3254
  --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
3247
3255
  --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
@@ -3527,7 +3535,7 @@ tds-helper-shelf{
3527
3535
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
3528
3536
  --t-fill-color-button-pill:hsl(0, 0%, 18%);
3529
3537
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
3530
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
3538
+ --t-fill-color-button-pill-active:hsl(0, 0%, 32%);
3531
3539
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
3532
3540
  --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
3533
3541
  --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
@@ -3751,7 +3759,7 @@ tds-helper-shelf{
3751
3759
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
3752
3760
  --t-fill-color-button-pill:hsl(0, 0%, 18%);
3753
3761
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
3754
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
3762
+ --t-fill-color-button-pill-active:hsl(0, 0%, 32%);
3755
3763
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
3756
3764
  --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
3757
3765
  --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
@@ -4745,6 +4753,9 @@ tds-helper-shelf{
4745
4753
  .tds-btn--data-table-saved-views-manage-views{
4746
4754
  flex-shrink:0;
4747
4755
  }
4756
+ .tds-btn--data-table-saved-views-new-view .symbol{
4757
+ transform:scale(.75);
4758
+ }
4748
4759
  .tds-data-table-frame{
4749
4760
  overflow:hidden;
4750
4761
 
@@ -5440,25 +5451,34 @@ tds-helper-shelf{
5440
5451
  }
5441
5452
 
5442
5453
  .tds-data-table-saved-view-list-item{
5443
- --_saved-view-list-item-background-color:transparent;
5454
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-080);
5444
5455
 
5445
5456
  display:flex;
5446
5457
  align-items:center;
5447
- min-height:32px;
5458
+ min-height:var(--t-container-size-md);
5448
5459
 
5449
- padding:4px 13px;
5460
+ padding:var(--t-spacing-half) var(--t-spacing-1-half);
5461
+ color:var(--t-text-color);
5450
5462
  background-color:var(--_saved-view-list-item-background-color);
5451
5463
  border-radius:999px;
5452
5464
  }
5453
5465
 
5454
5466
  .tds-data-table-saved-view-list-item:is([data-hovered],[data-focus-visible]){
5455
- --_saved-view-list-item-background-color:var(--t-fill-color-button-pill);
5467
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-070);
5468
+ }
5469
+
5470
+ .tds-data-table-saved-view-list-item[data-pressed]{
5471
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-060);
5456
5472
  }
5457
5473
 
5458
5474
  .tds-data-table-saved-view-list-item[data-selected]{
5459
- --_saved-view-list-item-background-color:var(--t-fill-color-button-pill-active);
5475
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-050);
5460
5476
  }
5461
5477
 
5478
+ .tds-data-table-saved-view-list-item[data-selected][data-pressed]{
5479
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-040);
5480
+ }
5481
+
5462
5482
  @media (forced-colors: active){
5463
5483
 
5464
5484
  .tds-data-table-saved-view-list-item[data-selected]{
@@ -5492,6 +5512,60 @@ tds-helper-shelf{
5492
5512
  color:var(--t-text-color-secondary);
5493
5513
  }
5494
5514
 
5515
+ .tds-data-table-saved-view-save-status{
5516
+ position:relative;
5517
+ display:inline-flex;
5518
+ flex-shrink:0;
5519
+ align-items:center;
5520
+ align-self:center;
5521
+ justify-content:center;
5522
+ inline-size:1em;
5523
+ block-size:1em;
5524
+ margin-inline-start:var(--t-spacing-1);
5525
+ font-size:var(--t-font-size-sm);
5526
+ }
5527
+
5528
+ .tds-data-table-saved-view-save-status--saving{
5529
+ --tds-loading-spinner-visibility:visible;
5530
+ --tds-loading-spinner-animation-play-state:running;
5531
+ --tds-loading-spinner-size:1em;
5532
+ --tds-loading-spinner-track-width:2px;
5533
+
5534
+ color:var(--t-text-color-secondary);
5535
+ animation:tds-data-table-saved-view-save-status-fade-in 150ms 500ms both;
5536
+ }
5537
+ @keyframes tds-data-table-saved-view-save-status-fade-in{
5538
+ from{
5539
+ inline-size:0;
5540
+ margin-inline-start:0;
5541
+ opacity:0;
5542
+ }
5543
+ }
5544
+ @media (prefers-reduced-motion: reduce){
5545
+ .tds-data-table-saved-view-save-status--saving{
5546
+ --tds-loading-spinner-animation-play-state:paused;
5547
+ }
5548
+ }
5549
+
5550
+ .tds-data-table-saved-view-save-status--failed{
5551
+ color:var(--t-icon-color-status-error);
5552
+ }
5553
+
5554
+ .tds-data-table-saved-view-save-error{
5555
+ display:inline-flex;
5556
+ -moz-column-gap:var(--t-spacing-half);
5557
+ column-gap:var(--t-spacing-half);
5558
+ align-items:center;
5559
+ align-self:center;
5560
+ margin-inline-start:var(--t-spacing-1);
5561
+ font-size:var(--t-font-size-sm);
5562
+ color:var(--t-text-color-status-error);
5563
+ }
5564
+
5565
+ .tds-data-table-saved-view-save-error .tds-data-table-saved-view-save-status{
5566
+ margin-inline-start:0;
5567
+ }
5568
+
5495
5569
  .has-instance-badge-NNA9P{
5496
5570
  inline-size:6px;
5497
5571
  block-size:6px;
@@ -5567,23 +5641,46 @@ tds-helper-shelf{
5567
5641
  margin-block:0;
5568
5642
  list-style:none;
5569
5643
  }
5570
-
5571
- .views-list-item-cWGsC{
5572
- position:relative;
5644
+ .views-list-item-cWGsC,
5645
+ .views-list-item--static-9zGpJ{
5573
5646
  display:flex;
5574
5647
  -moz-column-gap:var(--t-spacing-1);
5575
5648
  column-gap:var(--t-spacing-1);
5649
+ align-items:center;
5650
+ padding:var(--t-spacing-half);
5651
+ border-radius:var(--t-border-radius-md);
5652
+ }
5653
+ :is(.views-list-item-cWGsC,.views-list-item--static-9zGpJ):hover,:is(.views-list-item-cWGsC,.views-list-item--static-9zGpJ):has([data-view-actions][aria-expanded="true"]){
5654
+ background-color:var(--t-fill-color-neutral-090);
5655
+ }
5656
+
5657
+ .views-list-item-cWGsC{
5658
+ position:relative;
5576
5659
  }
5577
5660
 
5578
5661
  .views-list-item-cWGsC[data-dragging] > :not(.view-list-drop-indicator-zyDIt){
5579
5662
  opacity:.5;
5580
5663
  }
5581
-
5664
+ .view-list-item-default-icon-d-QS1{
5665
+ box-sizing:content-box;
5666
+ display:flex;
5667
+ flex-shrink:0;
5668
+ padding:calc((var(--t-container-size-md) - 1em) / 2);
5669
+ font-size:var(--t-font-size-md);
5670
+ color:var(--t-icon-color-secondary);
5671
+ }
5672
+ .view-list-item-actions-NFBUU,
5582
5673
  .view-list-item-drag-handle-fiO5Z{
5583
5674
  --tds-btn-color:var(--t-text-color-secondary);
5675
+ }
5584
5676
 
5677
+ .view-list-item-drag-handle-fiO5Z{
5585
5678
  cursor:grab;
5586
5679
  }
5680
+
5681
+ .view-list-item-drag-handle-fiO5Z:active{
5682
+ cursor:grabbing;
5683
+ }
5587
5684
  .view-list-drop-indicator-zyDIt{
5588
5685
  --_drop-indicator-width:var(--t-spacing-fourth);
5589
5686
  position:absolute;
@@ -5608,9 +5705,6 @@ tds-helper-shelf{
5608
5705
  }
5609
5706
 
5610
5707
  .views-list-item--drag-ghost-zEVbL{
5611
- padding:var(--t-spacing-half);
5612
- background-color:var(--t-surface-color-canvas);
5613
- border-radius:var(--t-border-radius-md);
5614
5708
  transform:translateZ(0);
5615
5709
  }
5616
5710
 
@@ -5618,28 +5712,17 @@ tds-helper-shelf{
5618
5712
  opacity:.5;
5619
5713
  transition:none;
5620
5714
  }
5621
-
5622
- .view-list-item-input-dowHY{
5623
- flex-grow:1;
5624
- }
5625
-
5626
- .views-list-item--static-9zGpJ{
5627
- display:flex;
5628
- -moz-column-gap:var(--t-spacing-1);
5629
- column-gap:var(--t-spacing-1);
5630
- }
5631
-
5632
- .view-list-item-static-name-nxBiG{
5715
+ .view-list-item-name-VRsyM{
5633
5716
  display:flex;
5634
5717
  flex-grow:1;
5635
5718
  align-items:center;
5719
+ min-inline-size:0;
5636
5720
  min-block-size:var(--t-container-size-md);
5637
- padding-inline:var(--t-spacing-1);
5721
+ padding-inline-start:var(--t-spacing-half);
5638
5722
  font-size:var(--t-font-size-md);
5639
- color:var(--t-form-color);
5640
- background-color:var(--t-form-background-color-readonly);
5641
- border:var(--t-form-border-width) solid var(--t-form-border-color-readonly);
5642
- border-radius:var(--t-form-border-radius);
5723
+ color:var(--t-text-color);
5724
+ overflow-wrap:anywhere;
5725
+ cursor:default;
5643
5726
  }
5644
5727
 
5645
5728
  .tds-pagination{
@@ -5745,6 +5828,47 @@ tds-helper-shelf{
5745
5828
  }
5746
5829
  }
5747
5830
 
5831
+ .tds-reorderable-list-box{
5832
+ --_drop-indicator-width:2px;
5833
+ display:contents;
5834
+ }
5835
+
5836
+ .tds-reorderable-list-box-item{
5837
+ cursor:pointer;
5838
+ -webkit-user-select:none;
5839
+ -moz-user-select:none;
5840
+ user-select:none;
5841
+ outline:0;
5842
+ }
5843
+
5844
+ .tds-reorderable-list-box-item[data-focus-visible]{
5845
+ outline:var(--t-focus-ring-outline);
5846
+ outline-offset:var(--t-focus-ring-offset);
5847
+ }
5848
+
5849
+ .tds-reorderable-list-box-item[data-dragging]{
5850
+ opacity:.5;
5851
+ }
5852
+
5853
+ .tds-reorderable-list-box-drop-indicator{
5854
+ align-self:stretch;
5855
+ inline-size:var(--_drop-indicator-width);
5856
+ margin-inline:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5857
+ border-radius:var(--_drop-indicator-width);
5858
+ }
5859
+
5860
+ .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5861
+ background-color:var(--t-focus-ring-color);
5862
+ }
5863
+
5864
+ @media (forced-colors: active){
5865
+
5866
+ .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5867
+ forced-color-adjust:none;
5868
+ background-color:Highlight;
5869
+ }
5870
+ }
5871
+
5748
5872
  .tds-filterable-list-box:has(input:disabled){
5749
5873
  --tds-filterable-list-box-cursor:not-allowed;
5750
5874
  }
@@ -5957,47 +6081,6 @@ tds-helper-shelf{
5957
6081
  white-space:nowrap;
5958
6082
  }
5959
6083
 
5960
- .tds-reorderable-list-box{
5961
- --_drop-indicator-width:2px;
5962
- display:contents;
5963
- }
5964
-
5965
- .tds-reorderable-list-box-item{
5966
- cursor:pointer;
5967
- -webkit-user-select:none;
5968
- -moz-user-select:none;
5969
- user-select:none;
5970
- outline:0;
5971
- }
5972
-
5973
- .tds-reorderable-list-box-item[data-focus-visible]{
5974
- outline:var(--t-focus-ring-outline);
5975
- outline-offset:var(--t-focus-ring-offset);
5976
- }
5977
-
5978
- .tds-reorderable-list-box-item[data-dragging]{
5979
- opacity:.5;
5980
- }
5981
-
5982
- .tds-reorderable-list-box-drop-indicator{
5983
- align-self:stretch;
5984
- inline-size:var(--_drop-indicator-width);
5985
- margin-inline:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5986
- border-radius:var(--_drop-indicator-width);
5987
- }
5988
-
5989
- .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5990
- background-color:var(--t-focus-ring-color);
5991
- }
5992
-
5993
- @media (forced-colors: active){
5994
-
5995
- .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5996
- forced-color-adjust:none;
5997
- background-color:Highlight;
5998
- }
5999
- }
6000
-
6001
6084
  .tds-alert-dialog{
6002
6085
  padding-block-start:0;
6003
6086
  text-align:center;
@@ -7827,7 +7910,7 @@ a.tds-dropdown-item:is(:hover, :active){
7827
7910
  --tds-select-dropdown-scrollbar-width:thin;
7828
7911
  --tds-select-dropdown-border-radius:var(--t-border-radius);
7829
7912
  --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
7830
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
7913
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out);
7831
7914
  --tds-select-dropdown-closed-opacity:0;
7832
7915
  --tds-select-dropdown-open-opacity:1;
7833
7916
  --tds-select-dropdown-closed-translate:0 -8px;
@@ -8029,6 +8112,13 @@ a.tds-dropdown-item:is(:hover, :active){
8029
8112
  --tds-select-font-size:var(--t-font-size-lg);
8030
8113
  }
8031
8114
 
8115
+ @supports (overlay: auto){
8116
+
8117
+ .tds-select{
8118
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
8119
+ }
8120
+ }
8121
+
8032
8122
  @media (prefers-reduced-motion: reduce){
8033
8123
 
8034
8124
  .tds-select{