@planningcenter/tapestry 4.12.0 → 4.13.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 (150) 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 +81 -93
  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/DataTable/useVisibleSavedViews.d.ts +31 -0
  83. package/dist/components/DataTable/useVisibleSavedViews.d.ts.map +1 -0
  84. package/dist/components/DataTable/useVisibleSavedViews.js +178 -0
  85. package/dist/components/DataTable/useVisibleSavedViews.js.map +1 -0
  86. package/dist/components/button/BaseButton.d.ts +2 -0
  87. package/dist/components/button/BaseButton.d.ts.map +1 -1
  88. package/dist/components/button/BaseButton.js +8 -17
  89. package/dist/components/button/BaseButton.js.map +1 -1
  90. package/dist/components/internal/LoadingAnnouncement.d.ts +6 -0
  91. package/dist/components/internal/LoadingAnnouncement.d.ts.map +1 -1
  92. package/dist/components/internal/LoadingAnnouncement.js +12 -3
  93. package/dist/components/internal/LoadingAnnouncement.js.map +1 -1
  94. package/dist/components/internal/index.d.ts +1 -1
  95. package/dist/components/internal/index.d.ts.map +1 -1
  96. package/dist/components/internal/reorderable-list-box/ReorderableListBox.d.ts +6 -0
  97. package/dist/components/internal/reorderable-list-box/ReorderableListBox.d.ts.map +1 -1
  98. package/dist/components/internal/reorderable-list-box/ReorderableListBox.js +9 -2
  99. package/dist/components/internal/reorderable-list-box/ReorderableListBox.js.map +1 -1
  100. package/dist/components/internal/tooltip/useTooltipTriggerProps.d.ts +13 -0
  101. package/dist/components/internal/tooltip/useTooltipTriggerProps.d.ts.map +1 -0
  102. package/dist/components/internal/tooltip/useTooltipTriggerProps.js +24 -0
  103. package/dist/components/internal/tooltip/useTooltipTriggerProps.js.map +1 -0
  104. package/dist/components/link/BaseLink.d.ts.map +1 -1
  105. package/dist/components/link/BaseLink.js +3 -13
  106. package/dist/components/link/BaseLink.js.map +1 -1
  107. package/dist/components/segmented-control/IconSegment.d.ts +30 -8
  108. package/dist/components/segmented-control/IconSegment.d.ts.map +1 -1
  109. package/dist/components/segmented-control/IconSegment.js +10 -3
  110. package/dist/components/segmented-control/IconSegment.js.map +1 -1
  111. package/dist/components/segmented-control/SegmentBase.d.ts.map +1 -1
  112. package/dist/components/segmented-control/SegmentBase.js +4 -2
  113. package/dist/components/segmented-control/SegmentBase.js.map +1 -1
  114. package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -1
  115. package/dist/components/segmented-control/SegmentedControl.js +10 -3
  116. package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
  117. package/dist/index.css +28 -12
  118. package/dist/index.css.map +1 -1
  119. package/dist/packages/tapestry-render/dist/{buildComponent-C5PfOgH9.js → buildComponent-DzY2PDMT.js} +23 -23
  120. package/dist/packages/tapestry-render/dist/buildComponent-DzY2PDMT.js.map +1 -0
  121. package/dist/packages/tapestry-render/dist/index.js +2 -2
  122. package/dist/packages/tapestry-render/dist/index.js.map +1 -1
  123. package/dist/packages/tapestry-render/dist/legacy.js +2 -2
  124. package/dist/packages/tapestry-render/dist/legacy.js.map +1 -1
  125. package/dist/product-tokens/giving.css +1 -0
  126. package/dist/reactRender.css +773 -658
  127. package/dist/reactRender.css.map +1 -1
  128. package/dist/reactRender.js +1 -1
  129. package/dist/reactRenderLegacy.css +773 -658
  130. package/dist/reactRenderLegacy.css.map +1 -1
  131. package/dist/reactRenderLegacy.js +1 -1
  132. package/dist/tapestryMount.css +773 -658
  133. package/dist/tapestryMount.css.map +1 -1
  134. package/dist/tapestryMount.js +1 -1
  135. package/dist/tapestryMountLegacy.css +773 -658
  136. package/dist/tapestryMountLegacy.css.map +1 -1
  137. package/dist/tapestryMountLegacy.js +1 -1
  138. package/dist/tokens-dark.css +2 -2
  139. package/dist/tokens-dark.css.map +1 -1
  140. package/dist/tokens.css +11 -10
  141. package/dist/tokens.css.map +1 -1
  142. package/dist/unstable.css +418 -303
  143. package/dist/unstable.css.map +1 -1
  144. package/dist/unstable.js +1 -0
  145. package/dist/unstable.js.map +1 -1
  146. package/package.json +8 -9
  147. package/dist/components/DataTable/useFilterAnnouncement.d.ts +0 -24
  148. package/dist/components/DataTable/useFilterAnnouncement.d.ts.map +0 -1
  149. package/dist/components/DataTable/useFilterAnnouncement.js.map +0 -1
  150. package/dist/packages/tapestry-render/dist/buildComponent-C5PfOgH9.js.map +0 -1
@@ -1043,6 +1043,283 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1043
1043
  flex-direction:column;
1044
1044
  }
1045
1045
 
1046
+ @layer t-critical{
1047
+ tds-page-header:not(.hydrated){
1048
+ display:none;
1049
+ }
1050
+ }
1051
+
1052
+ @layer t-component{
1053
+ .tds-page-header{
1054
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1055
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1056
+ --tds-page-header-color:var(--t-text-color);
1057
+ --tds-page-header-bottom-border-color:transparent;
1058
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1059
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1060
+ --tds-page-header-padding-x:var(--t-spacing-2);
1061
+ --tds-page-header-padding-y:var(--t-spacing-2);
1062
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1063
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1064
+ --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%);
1065
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1066
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1067
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1068
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1069
+ --tds-page-header-nav-item-border-width:1px;
1070
+
1071
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1072
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1073
+
1074
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1075
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1076
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1077
+
1078
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1079
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1080
+
1081
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1082
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1083
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1084
+
1085
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1086
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1087
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1088
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1089
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1090
+ }
1091
+
1092
+ .tds-page-header--profile{
1093
+ --tds-page-header-padding-y:20px;
1094
+ }
1095
+
1096
+ @supports (color: light-dark(#fff, #000)){
1097
+ .tds-page-header{
1098
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1099
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1100
+ }
1101
+ }
1102
+
1103
+ @media (min-width: 600px){
1104
+ .tds-page-header{
1105
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1106
+ --tds-page-header-color:var(--t-text-color-secondary);
1107
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1108
+ --tds-page-header-padding-x:var(--t-spacing-3);
1109
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1110
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1111
+ --tds-page-header-nav-background:transparent;
1112
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1113
+ --tds-page-header-nav-item-border-width:1px;
1114
+ --tds-page-header-nav-item-color:var(--t-text-color);
1115
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1116
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1117
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1118
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1119
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1120
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1121
+ }
1122
+ }
1123
+ }
1124
+
1125
+ .tds-page-header{
1126
+ display:flex;
1127
+ flex-direction:column;
1128
+ padding-top:var(--tds-page-header-padding-y);
1129
+ color:var(--tds-page-header-color);
1130
+ background:var(--tds-page-header-background-color);
1131
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1132
+ }
1133
+
1134
+ .tds-page-header:not(.has-nav){
1135
+ padding-bottom:var(--tds-page-header-padding-y);
1136
+ }
1137
+
1138
+ .tds-page-header.inactive{
1139
+ background:var(--tds-page-header-background-color-inactive);
1140
+ }
1141
+
1142
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1143
+ width:100%;
1144
+ }
1145
+
1146
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1147
+ display:flex;
1148
+ flex-flow:row wrap;
1149
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1150
+ align-items:flex-start;
1151
+ justify-content:flex-start;
1152
+ min-width:0;
1153
+ }
1154
+
1155
+ :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{
1156
+ display:flex;
1157
+ gap:var(--tds-page-header-nav-gap);
1158
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1159
+ margin:0 0 -1px;
1160
+ overflow:auto;
1161
+ list-style:none;
1162
+ background:var(--tds-page-header-nav-background);
1163
+ }
1164
+
1165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1166
+ position:relative;
1167
+ display:inline-flex;
1168
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1169
+ font-size:var(--t-font-size-sm);
1170
+ line-height:22px;
1171
+ color:var(--tds-page-header-nav-item-color);
1172
+ white-space:nowrap;
1173
+ text-decoration:none;
1174
+ -webkit-appearance:none;
1175
+ -moz-appearance:none;
1176
+ appearance:none;
1177
+ cursor:pointer;
1178
+ outline-offset:-2px;
1179
+ background-color:var(--tds-page-header-nav-item-background-color);
1180
+ background-clip:padding-box;
1181
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1182
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1183
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1184
+ }
1185
+
1186
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1187
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1188
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1189
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1190
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1191
+ }
1192
+
1193
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1194
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1195
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1196
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1197
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1198
+ }
1199
+
1200
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1201
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1202
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1203
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1204
+ }
1205
+
1206
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1207
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1208
+ color:var(--tds-page-header-nav-item-color-disabled);
1209
+ cursor:not-allowed;
1210
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1211
+ opacity:1;
1212
+ }
1213
+
1214
+ @media (min-width: 600px){
1215
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1216
+ position:absolute;
1217
+ inset:auto -1px -1px;
1218
+ height:1px;
1219
+ pointer-events:none;
1220
+ content:"";
1221
+ background-color:var(--tds-page-header-bottom-border-color);
1222
+ }
1223
+ }
1224
+
1225
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1226
+ position:relative;
1227
+ }
1228
+
1229
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1230
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1231
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1232
+ }
1233
+
1234
+ :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{
1235
+ position:absolute;
1236
+ top:-5px;
1237
+ right:-2px;
1238
+ width:10px;
1239
+ height:10px;
1240
+ content:"";
1241
+ background:var(--tds-page-header-nav-item-indicator-color);
1242
+ border-radius:50%;
1243
+ }
1244
+
1245
+ @media (prefers-reduced-motion: no-preference){
1246
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1247
+ animation:indicator-pulse 1.25s ease infinite;
1248
+ }
1249
+ }
1250
+
1251
+ .tds-page-header__title-bar{
1252
+ display:flex;
1253
+ flex-direction:column;
1254
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1255
+ align-items:flex-start;
1256
+ justify-content:space-between;
1257
+ padding:0 var(--tds-page-header-padding-x);
1258
+ }
1259
+
1260
+ .tds-page-header--profile > .tds-page-header__title-bar{
1261
+ align-items:center;
1262
+ }
1263
+
1264
+ .tds-page-header__primary{
1265
+ width:100%;
1266
+ }
1267
+
1268
+ .tds-page-header__primary h1{
1269
+ margin:0;
1270
+ font-size:var(--tds-page-header-headline-font-size);
1271
+ font-weight:var(--t-font-weight-normal);
1272
+ line-height:32px;
1273
+ color:var(--tds-page-header-headline-color);
1274
+ overflow-wrap:break-word;
1275
+ }
1276
+
1277
+ @media (min-width: 960px){
1278
+ .tds-page-header__primary{
1279
+ flex:1 1 max-content;
1280
+ width:auto;
1281
+ min-width:0;
1282
+ max-width:100%;
1283
+ }
1284
+
1285
+ .tds-page-header__title-bar,
1286
+ .tds-page-header--profile .tds-page-header__title-bar{
1287
+ flex-flow:row nowrap;
1288
+ row-gap:12px;
1289
+ align-items:flex-start;
1290
+ }
1291
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1292
+ width:auto;
1293
+ }
1294
+
1295
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1296
+ justify-content:flex-end;
1297
+ }
1298
+ }
1299
+
1300
+ .tds-page-header-phone,
1301
+ .tds-page-header-email{
1302
+ color:var(--tds-page-header-color);
1303
+ white-space:nowrap;
1304
+ }
1305
+ .tds-page-header-email{
1306
+ max-width:100%;
1307
+ overflow:hidden;
1308
+ text-overflow:ellipsis;
1309
+ }
1310
+
1311
+ @keyframes indicator-pulse{
1312
+ 0%{
1313
+ opacity:.3;
1314
+ transform:scale(.9);
1315
+ }
1316
+
1317
+ 100%{
1318
+ opacity:0;
1319
+ transform:scale(1.75);
1320
+ }
1321
+ }
1322
+
1046
1323
  .tds-button-group{
1047
1324
  display:inline-flex;
1048
1325
  }
@@ -1073,18 +1350,92 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1073
1350
  :is(.tds-button-group > .tds-btn):hover,:is(.tds-button-group > .tds-btn):focus{
1074
1351
  --tds-button-group-item-z-index:2;
1075
1352
  }
1076
- :is(.tds-button-group > .tds-btn):focus-visible{
1077
- --tds-button-group-item-z-index:5;
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);
1363
+ }
1364
+
1365
+ .tds-checkbox-group{
1366
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1367
+ --tds-checkbox-group-line-height:1.4;
1368
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1369
+
1370
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1371
+ --tds-checkbox-group-description-line-height:1.35;
1372
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
1373
+ --tds-checkbox-group-description-invalid-icon-display:none;
1374
+ display:flex;
1375
+ flex-direction:column;
1376
+ gap:0;
1377
+ padding:0;
1378
+ margin:0;
1379
+
1380
+ font-size:var(--tds-checkbox-group-font-size);
1381
+ line-height:var(--tds-checkbox-group-line-height);
1382
+ border:0;
1383
+ }
1384
+
1385
+ .tds-checkbox-group legend{
1386
+ float:left;
1387
+ padding:0;
1388
+ margin:0;
1389
+ }
1390
+
1391
+ .tds-checkbox-group[aria-invalid="true"]{
1392
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
1393
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
1394
+ }
1395
+
1396
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
1397
+ margin-left:.25ch;
1398
+ color:var(--t-text-color-status-error);
1399
+ content:"*";
1400
+ }
1401
+
1402
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1403
+ content:none;
1078
1404
  }
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);
1405
+
1406
+ .tds-checkbox-group-fields{
1407
+ display:flex;
1408
+ flex-direction:column;
1409
+ gap:var(--tds-checkbox-group-gap);
1410
+ align-items:flex-start;
1411
+ margin-top:var(--t-spacing-1);
1412
+ }
1413
+
1414
+ .tds-checkbox-group-description{
1415
+ display:flex;
1416
+ gap:var(--t-spacing-half);
1417
+ align-items:flex-start;
1418
+ margin:var(--t-spacing-fourth) 0 0;
1419
+ font-size:var(--tds-checkbox-group-description-font-size);
1420
+ line-height:var(--tds-checkbox-group-description-line-height);
1421
+ color:var(--tds-checkbox-group-description-color);
1422
+ cursor:text;
1423
+ }
1424
+
1425
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1426
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1427
+ flex-shrink:0;
1428
+ margin-top:calc(.5lh - .5em);
1429
+ line-height:var(--tds-checkbox-group-description-line-height);
1086
1430
  }
1087
1431
 
1432
+ .tds-checkbox-group--sm{
1433
+ --tds-checkbox-group-line-height:1.35;
1434
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1435
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1436
+ --tds-checkbox-group-description-line-height:1.3;
1437
+ }
1438
+
1088
1439
  .tds-checkbox{
1089
1440
  --tds-checkbox-font-size:var(--t-font-size-md);
1090
1441
  --tds-checkbox-cursor:pointer;
@@ -1280,80 +1631,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1280
1631
  --tds-checkbox-description-line-height:1.3;
1281
1632
  }
1282
1633
 
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
- }
1302
-
1303
- .tds-checkbox-group legend{
1304
- float:left;
1305
- padding:0;
1306
- margin:0;
1307
- }
1308
-
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;
1312
- }
1313
-
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:"*";
1318
- }
1319
-
1320
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
1321
- content:none;
1322
- }
1323
-
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
- }
1331
-
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;
1341
- }
1342
-
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);
1348
- }
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
- }
1356
-
1357
1634
  .tds-currency-input-control{
1358
1635
  display:flex;
1359
1636
  gap:var(--t-spacing-half);
@@ -1490,161 +1767,38 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1490
1767
  background-color:var(--t-fill-color-button-neutral-solid);
1491
1768
  border:var(--t-border-width) solid var(--t-fill-color-button-neutral-solid);
1492
1769
  border-radius:var(--t-border-radius-md);
1493
- transition-timing-function:var(--t-ease-in-out);
1494
- transition-duration:var(--t-duration-200);
1495
- transition-property:color, background-color, border-color;
1496
- }
1497
-
1498
- [type="file"]:is(.tds-input input):hover::file-selector-button{
1499
- background-color:var(--t-fill-color-button-neutral-solid-hover);
1500
- border-color:var(--t-fill-color-button-neutral-solid-hover);
1501
- }
1502
-
1503
- [type="file"]:is(.tds-input input):active::file-selector-button{
1504
- background-color:var(--t-fill-color-button-neutral-solid-active);
1505
- border-color:var(--t-fill-color-button-neutral-solid-active);
1506
- }
1507
-
1508
- [type="file"]:is(.tds-input input):disabled::file-selector-button{
1509
- color:var(--t-text-color-disabled);
1510
- pointer-events:none;
1511
- background-color:var(--t-fill-color-button-neutral-solid-disabled);
1512
- border-color:var(--t-fill-color-button-neutral-solid-disabled);
1513
- }
1514
- @supports (field-sizing: content){
1515
- .tds-input--auto-width{
1516
- inline-size:-moz-fit-content;
1517
- inline-size:fit-content;
1518
- min-inline-size:min(100%, 122px);
1519
- }
1520
-
1521
- .tds-input--auto-width input{
1522
- field-sizing:content;
1523
- inline-size:auto;
1524
- }
1525
- }
1526
-
1527
- .tds-pane{
1528
- --tds-pane-background-color:var(--t-surface-color-card);
1529
- --tds-pane-border-radius:var(--t-border-radius-lg);
1530
- --tds-pane-border-color:var(--t-border-color);
1531
-
1532
- --tds-pane-header-padding-block:var(--t-spacing-1-half);
1533
- --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
1534
-
1535
- --tds-pane-title-color:var(--t-text-color-headline);
1536
- --tds-pane-title-font-size:var(--t-font-size-lg);
1537
- --tds-pane-title-font-weight:var(--t-font-weight-medium);
1538
- --tds-pane-title-line-height:1.4;
1539
-
1540
- --tds-pane-body-padding:var(--t-spacing-3);
1541
-
1542
- --tds-pane-footer-padding-block:var(--t-spacing-2);
1543
- --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
1544
-
1545
- --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
1546
- --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
1547
-
1548
- background:var(--tds-pane-background-color);
1549
- border-radius:var(--tds-pane-border-radius);
1550
- border:var(--t-border-width) solid var(--tds-pane-border-color);
1551
- display:flex;
1552
- flex-direction:column;
1553
- }
1554
-
1555
- .tds-pane-header{
1556
- border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
1557
- padding-block:var(--tds-pane-header-padding-block);
1558
- padding-inline:var(--tds-pane-header-padding-inline);
1559
- }
1560
-
1561
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
1562
- margin-inline:calc(-1 * var(--t-spacing-1)) auto;
1563
- }
1564
-
1565
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
1566
- flex-basis:100%;
1567
- order:1;
1568
- }
1569
-
1570
- .tds-pane-header:has( > tds-helper-shelf){
1571
- row-gap:var(--tds-pane-header-padding-block);
1572
- padding-block-end:0;
1573
- }
1574
-
1575
- .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
1576
- font-size:var(--t-font-size-md);
1577
- margin-block-end:var(--tds-pane-header-padding-block);
1578
- }
1579
-
1580
- .tds-pane-title{
1581
- color:var(--tds-pane-title-color);
1582
- font-size:var(--tds-pane-title-font-size);
1583
- font-weight:var(--tds-pane-title-font-weight);
1584
- line-height:var(--tds-pane-title-line-height);
1585
- margin:0;
1586
- }
1587
-
1588
- .tds-pane-body{
1589
- padding:var(--tds-pane-body-padding);
1590
- }
1591
-
1592
- .tds-pane-footer{
1593
- padding-block-end:var(--tds-pane-footer-padding-block);
1594
- padding-inline:var(--tds-pane-footer-padding-inline);
1595
- }
1596
-
1597
- .tds-pane-divider{
1598
- border:0;
1599
- border-top:var(--t-border-width) solid var(--tds-pane-border-color);
1600
- margin-block:var(--tds-pane-divider-margin-block);
1601
- margin-inline:var(--tds-pane-divider-margin-inline);
1602
- }
1603
-
1604
- .tds-pane-divider.tds-pane-divider--inset{
1605
- margin-inline:0;
1606
- }
1607
-
1608
- .tds-popover{
1609
- max-inline-size:24rem;
1610
- overflow:auto;
1611
- overscroll-behavior:none;
1612
- outline:0;
1613
- scrollbar-color:#0004 var(--t-surface-color-card);
1614
- scrollbar-width:thin;
1615
- background:var(--t-surface-color-card);
1616
- background-clip:padding-box;
1617
- border:1px solid var(--t-border-color);
1618
- border-radius:var(--t-border-radius);
1619
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1620
- }
1621
-
1622
- @media (prefers-reduced-motion: no-preference){
1623
- .tds-popover[data-entering]{
1624
- animation:tds-popover var(--t-duration-300) var(--t-ease-out);
1625
- }
1770
+ transition-timing-function:var(--t-ease-in-out);
1771
+ transition-duration:var(--t-duration-200);
1772
+ transition-property:color, background-color, border-color;
1773
+ }
1626
1774
 
1627
- .tds-popover[data-exiting]{
1628
- animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
1629
- }
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);
1778
+ }
1630
1779
 
1631
- .tds-popover[data-entering],.tds-popover[data-exiting]{
1632
- will-change:opacity, transform;
1633
- }
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
+ }
1634
1784
 
1635
- @keyframes tds-popover{
1636
- from{
1637
- opacity:0;
1638
- transform:translateY(-8px);
1639
- }
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);
1640
1796
  }
1641
- }
1642
1797
 
1643
- .tds-popover-content{
1644
- display:flex;
1645
- flex-direction:column;
1646
- padding:var(--t-spacing-1);
1647
- outline:0;
1798
+ .tds-input--auto-width input{
1799
+ field-sizing:content;
1800
+ inline-size:auto;
1801
+ }
1648
1802
  }
1649
1803
 
1650
1804
  .tds-modal-overlay{
@@ -1810,364 +1964,127 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1810
1964
  }
1811
1965
  }
1812
1966
 
1813
- @layer t-critical{
1814
- tds-page-header:not(.hydrated){
1815
- display:none;
1816
- }
1817
- }
1818
-
1819
- @layer t-component{
1820
- .tds-page-header{
1821
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1822
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1823
- --tds-page-header-color:var(--t-text-color);
1824
- --tds-page-header-bottom-border-color:transparent;
1825
- --tds-page-header-headline-color:var(--t-text-color-headline);
1826
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1827
- --tds-page-header-padding-x:var(--t-spacing-2);
1828
- --tds-page-header-padding-y:var(--t-spacing-2);
1829
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1830
- --tds-page-header-nav-gap:var(--t-spacing-1);
1831
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1832
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1833
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1834
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1835
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1836
- --tds-page-header-nav-item-border-width:1px;
1837
-
1838
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1839
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
1840
-
1841
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1842
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1843
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1844
-
1845
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1846
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1847
-
1848
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1849
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1850
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1851
-
1852
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1853
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1854
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1855
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1856
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1857
- }
1858
-
1859
- .tds-page-header--profile{
1860
- --tds-page-header-padding-y:20px;
1861
- }
1862
-
1863
- @supports (color: light-dark(#fff, #000)){
1864
- .tds-page-header{
1865
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1866
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1867
- }
1868
- }
1869
-
1870
- @media (min-width: 600px){
1871
- .tds-page-header{
1872
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1873
- --tds-page-header-color:var(--t-text-color-secondary);
1874
- --tds-page-header-bottom-border-color:var(--t-border-color);
1875
- --tds-page-header-padding-x:var(--t-spacing-3);
1876
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1877
- --tds-page-header-nav-gap:var(--t-spacing-half);
1878
- --tds-page-header-nav-background:transparent;
1879
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1880
- --tds-page-header-nav-item-border-width:1px;
1881
- --tds-page-header-nav-item-color:var(--t-text-color);
1882
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1883
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1884
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1885
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1886
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1887
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1888
- }
1889
- }
1890
- }
1891
-
1892
- .tds-page-header{
1893
- display:flex;
1894
- flex-direction:column;
1895
- padding-top:var(--tds-page-header-padding-y);
1896
- color:var(--tds-page-header-color);
1897
- background:var(--tds-page-header-background-color);
1898
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1899
- }
1900
-
1901
- .tds-page-header:not(.has-nav){
1902
- padding-bottom:var(--tds-page-header-padding-y);
1903
- }
1904
-
1905
- .tds-page-header.inactive{
1906
- background:var(--tds-page-header-background-color-inactive);
1907
- }
1908
-
1909
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1910
- width:100%;
1911
- }
1912
-
1913
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1914
- display:flex;
1915
- flex-flow:row wrap;
1916
- gap:var(--t-spacing-half) var(--t-spacing-1);
1917
- align-items:flex-start;
1918
- justify-content:flex-start;
1919
- min-width:0;
1920
- }
1921
-
1922
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1923
- display:flex;
1924
- gap:var(--tds-page-header-nav-gap);
1925
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1926
- margin:0 0 -1px;
1927
- overflow:auto;
1928
- list-style:none;
1929
- background:var(--tds-page-header-nav-background);
1930
- }
1931
-
1932
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1933
- position:relative;
1934
- display:inline-flex;
1935
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1936
- font-size:var(--t-font-size-sm);
1937
- line-height:22px;
1938
- color:var(--tds-page-header-nav-item-color);
1939
- white-space:nowrap;
1940
- text-decoration:none;
1941
- -webkit-appearance:none;
1942
- -moz-appearance:none;
1943
- appearance:none;
1944
- cursor:pointer;
1945
- outline-offset:-2px;
1946
- background-color:var(--tds-page-header-nav-item-background-color);
1947
- background-clip:padding-box;
1948
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1949
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1950
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1951
- }
1952
-
1953
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1954
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1955
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1956
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1957
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1958
- }
1959
-
1960
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1961
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1962
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1963
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1964
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1965
- }
1966
-
1967
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1968
- background-color:var(--tds-page-header-nav-item-background-color-active);
1969
- border-color:var(--tds-page-header-nav-item-border-color-active);
1970
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1971
- }
1972
-
1973
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1974
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1975
- color:var(--tds-page-header-nav-item-color-disabled);
1976
- cursor:not-allowed;
1977
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1978
- opacity:1;
1979
- }
1980
-
1981
- @media (min-width: 600px){
1982
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1983
- position:absolute;
1984
- inset:auto -1px -1px;
1985
- height:1px;
1986
- pointer-events:none;
1987
- content:"";
1988
- background-color:var(--tds-page-header-bottom-border-color);
1989
- }
1990
- }
1967
+ .tds-pane{
1968
+ --tds-pane-background-color:var(--t-surface-color-card);
1969
+ --tds-pane-border-radius:var(--t-border-radius-lg);
1970
+ --tds-pane-border-color:var(--t-border-color);
1991
1971
 
1992
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1993
- position:relative;
1994
- }
1972
+ --tds-pane-header-padding-block:var(--t-spacing-1-half);
1973
+ --tds-pane-header-padding-inline:var(--tds-pane-body-padding);
1995
1974
 
1996
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1997
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1998
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1999
- }
1975
+ --tds-pane-title-color:var(--t-text-color-headline);
1976
+ --tds-pane-title-font-size:var(--t-font-size-lg);
1977
+ --tds-pane-title-font-weight:var(--t-font-weight-medium);
1978
+ --tds-pane-title-line-height:1.4;
2000
1979
 
2001
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2002
- position:absolute;
2003
- top:-5px;
2004
- right:-2px;
2005
- width:10px;
2006
- height:10px;
2007
- content:"";
2008
- background:var(--tds-page-header-nav-item-indicator-color);
2009
- border-radius:50%;
2010
- }
1980
+ --tds-pane-body-padding:var(--t-spacing-3);
2011
1981
 
2012
- @media (prefers-reduced-motion: no-preference){
2013
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2014
- animation:indicator-pulse 1.25s ease infinite;
2015
- }
2016
- }
1982
+ --tds-pane-footer-padding-block:var(--t-spacing-2);
1983
+ --tds-pane-footer-padding-inline:var(--tds-pane-body-padding);
2017
1984
 
2018
- .tds-page-header__title-bar{
1985
+ --tds-pane-divider-margin-block:var(--tds-pane-body-padding);
1986
+ --tds-pane-divider-margin-inline:calc(-1 * var(--tds-pane-body-padding));
1987
+
1988
+ background:var(--tds-pane-background-color);
1989
+ border-radius:var(--tds-pane-border-radius);
1990
+ border:var(--t-border-width) solid var(--tds-pane-border-color);
2019
1991
  display:flex;
2020
1992
  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
1993
  }
2026
1994
 
2027
- .tds-page-header--profile > .tds-page-header__title-bar{
2028
- align-items:center;
2029
- }
2030
-
2031
- .tds-page-header__primary{
2032
- width:100%;
1995
+ .tds-pane-header{
1996
+ border-bottom:var(--t-border-width) solid var(--tds-pane-border-color);
1997
+ padding-block:var(--tds-pane-header-padding-block);
1998
+ padding-inline:var(--tds-pane-header-padding-inline);
2033
1999
  }
2034
2000
 
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;
2001
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf-trigger{
2002
+ margin-inline:calc(-1 * var(--t-spacing-1)) auto;
2042
2003
  }
2043
2004
 
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%;
2005
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf{
2006
+ flex-basis:100%;
2007
+ order:1;
2050
2008
  }
2051
2009
 
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;
2010
+ .tds-pane-header:has( > tds-helper-shelf){
2011
+ row-gap:var(--tds-pane-header-padding-block);
2012
+ padding-block-end:0;
2057
2013
  }
2058
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2059
- width:auto;
2060
- }
2061
-
2062
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2063
- justify-content:flex-end;
2064
- }
2065
- }
2066
-
2067
- .tds-page-header-phone,
2068
- .tds-page-header-email{
2069
- color:var(--tds-page-header-color);
2070
- white-space:nowrap;
2071
- }
2072
- .tds-page-header-email{
2073
- max-width:100%;
2074
- overflow:hidden;
2075
- text-overflow:ellipsis;
2076
- }
2077
2014
 
2078
- @keyframes indicator-pulse{
2079
- 0%{
2080
- opacity:.3;
2081
- transform:scale(.9);
2015
+ .tds-pane-header > tds-helper-shelf > .tds-helper-shelf > .tds-helper-shelf-content{
2016
+ font-size:var(--t-font-size-md);
2017
+ margin-block-end:var(--tds-pane-header-padding-block);
2082
2018
  }
2083
2019
 
2084
- 100%{
2085
- opacity:0;
2086
- transform:scale(1.75);
2087
- }
2020
+ .tds-pane-title{
2021
+ color:var(--tds-pane-title-color);
2022
+ font-size:var(--tds-pane-title-font-size);
2023
+ font-weight:var(--tds-pane-title-font-weight);
2024
+ line-height:var(--tds-pane-title-line-height);
2025
+ margin:0;
2088
2026
  }
2089
2027
 
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);
2028
+ .tds-pane-body{
2029
+ padding:var(--tds-pane-body-padding);
2030
+ }
2094
2031
 
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;
2099
- display:flex;
2100
- flex-direction:column;
2101
- gap:0;
2102
- padding:0;
2103
- margin:0;
2032
+ .tds-pane-footer{
2033
+ padding-block-end:var(--tds-pane-footer-padding-block);
2034
+ padding-inline:var(--tds-pane-footer-padding-inline);
2035
+ }
2104
2036
 
2105
- font-size:var(--tds-radio-group-font-size);
2106
- line-height:var(--tds-radio-group-line-height);
2037
+ .tds-pane-divider{
2107
2038
  border:0;
2039
+ border-top:var(--t-border-width) solid var(--tds-pane-border-color);
2040
+ margin-block:var(--tds-pane-divider-margin-block);
2041
+ margin-inline:var(--tds-pane-divider-margin-inline);
2108
2042
  }
2109
2043
 
2110
- .tds-radio-group legend{
2111
- float:left;
2112
- padding:0;
2113
- margin:0;
2044
+ .tds-pane-divider.tds-pane-divider--inset{
2045
+ margin-inline:0;
2114
2046
  }
2115
2047
 
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;
2119
- }
2048
+ .tds-popover{
2049
+ max-inline-size:24rem;
2050
+ overflow:auto;
2051
+ overscroll-behavior:none;
2052
+ outline:0;
2053
+ scrollbar-color:#0004 var(--t-surface-color-card);
2054
+ scrollbar-width:thin;
2055
+ background:var(--t-surface-color-card);
2056
+ background-clip:padding-box;
2057
+ border:1px solid var(--t-border-color);
2058
+ border-radius:var(--t-border-radius);
2059
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
2060
+ }
2120
2061
 
2121
- .tds-radio-group[aria-invalid="true"] .tds-radio{
2122
- --tds-radio-input-border-color:var(--t-form-border-color-error);
2062
+ @media (prefers-reduced-motion: no-preference){
2063
+ .tds-popover[data-entering]{
2064
+ animation:tds-popover var(--t-duration-300) var(--t-ease-out);
2123
2065
  }
2124
2066
 
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
- }
2067
+ .tds-popover[data-exiting]{
2068
+ animation:tds-popover var(--t-duration-200) var(--t-ease-in) reverse;
2069
+ }
2133
2070
 
2134
- .tds-radio-group:has(input:required) legend::after{
2135
- margin-left:.25ch;
2136
- color:var(--t-text-color-status-error);
2137
- content:"*";
2071
+ .tds-popover[data-entering],.tds-popover[data-exiting]{
2072
+ will-change:opacity, transform;
2138
2073
  }
2139
2074
 
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);
2075
+ @keyframes tds-popover{
2076
+ from{
2077
+ opacity:0;
2078
+ transform:translateY(-8px);
2079
+ }
2080
+ }
2146
2081
  }
2147
2082
 
2148
- .tds-radio-group-description{
2083
+ .tds-popover-content{
2149
2084
  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;
2157
- }
2158
-
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
- }
2165
-
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;
2085
+ flex-direction:column;
2086
+ padding:var(--t-spacing-1);
2087
+ outline:0;
2171
2088
  }
2172
2089
 
2173
2090
  .tds-radio{
@@ -2428,34 +2345,117 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2428
2345
  --tds-segmented-control-background-color:var(--t-fill-color-button-neutral-solid-disabled);
2429
2346
  }
2430
2347
 
2431
- .tds-segmented-control-segment--neutral-subtle{
2432
- --tds-segmented-control-color-checked:var(--t-text-color-status-neutral);
2433
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-neutral-solid-hover);
2434
- }
2348
+ .tds-segmented-control-segment--neutral-subtle{
2349
+ --tds-segmented-control-color-checked:var(--t-text-color-status-neutral);
2350
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-neutral-solid-hover);
2351
+ }
2352
+
2353
+ .tds-segmented-control-segment--interaction-subtle{
2354
+ --tds-segmented-control-color-checked:var(--t-text-color-interaction);
2355
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
2356
+ }
2357
+
2358
+ .tds-segmented-control-segment--interaction-bold{
2359
+ --tds-segmented-control-color-checked:var(--t-text-color-inverted);
2360
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-solid);
2361
+ }
2362
+
2363
+ .tds-segmented-control-segment--success{
2364
+ --tds-segmented-control-color-checked:var(--t-text-color-status-success);
2365
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-success-ghost);
2366
+ }
2367
+
2368
+ .tds-segmented-control-segment--warning{
2369
+ --tds-segmented-control-color-checked:var(--t-text-color-status-warning);
2370
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-warning-ghost);
2371
+ }
2372
+
2373
+ .tds-segmented-control-segment--error{
2374
+ --tds-segmented-control-color-checked:var(--t-text-color-status-error);
2375
+ --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
2376
+ }
2377
+
2378
+ .tds-radio-group{
2379
+ --tds-radio-group-font-size:var(--t-font-size-md);
2380
+ --tds-radio-group-line-height:1.4;
2381
+ --tds-radio-group-gap:var(--t-spacing-1);
2382
+
2383
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
2384
+ --tds-radio-group-description-line-height:1.35;
2385
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
2386
+ --tds-radio-group-description-invalid-icon-display:none;
2387
+ display:flex;
2388
+ flex-direction:column;
2389
+ gap:0;
2390
+ padding:0;
2391
+ margin:0;
2392
+
2393
+ font-size:var(--tds-radio-group-font-size);
2394
+ line-height:var(--tds-radio-group-line-height);
2395
+ border:0;
2396
+ }
2397
+
2398
+ .tds-radio-group legend{
2399
+ float:left;
2400
+ padding:0;
2401
+ margin:0;
2402
+ }
2403
+
2404
+ .tds-radio-group[aria-invalid="true"]{
2405
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
2406
+ --tds-radio-group-description-invalid-icon-display:inline-block;
2407
+ }
2408
+
2409
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
2410
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2411
+ }
2412
+
2413
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
2414
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2415
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2416
+ }
2435
2417
 
2436
- .tds-segmented-control-segment--interaction-subtle{
2437
- --tds-segmented-control-color-checked:var(--t-text-color-interaction);
2438
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-outline-active);
2439
- }
2418
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
2419
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
2420
+ }
2440
2421
 
2441
- .tds-segmented-control-segment--interaction-bold{
2442
- --tds-segmented-control-color-checked:var(--t-text-color-inverted);
2443
- --tds-segmented-control-background-color-checked:var(--t-fill-color-button-interaction-solid);
2444
- }
2422
+ .tds-radio-group:has(input:required) legend::after{
2423
+ margin-left:.25ch;
2424
+ color:var(--t-text-color-status-error);
2425
+ content:"*";
2426
+ }
2445
2427
 
2446
- .tds-segmented-control-segment--success{
2447
- --tds-segmented-control-color-checked:var(--t-text-color-status-success);
2448
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-success-ghost);
2428
+ .tds-radio-group-fields{
2429
+ display:flex;
2430
+ flex-direction:column;
2431
+ gap:var(--tds-radio-group-gap);
2432
+ align-items:flex-start;
2433
+ margin-top:var(--t-spacing-1);
2449
2434
  }
2450
2435
 
2451
- .tds-segmented-control-segment--warning{
2452
- --tds-segmented-control-color-checked:var(--t-text-color-status-warning);
2453
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-warning-ghost);
2436
+ .tds-radio-group-description{
2437
+ display:flex;
2438
+ gap:var(--t-spacing-half);
2439
+ align-items:flex-start;
2440
+ margin:var(--t-spacing-fourth) 0 0;
2441
+ font-size:var(--tds-radio-group-description-font-size);
2442
+ line-height:var(--tds-radio-group-description-line-height);
2443
+ color:var(--tds-radio-group-description-color);
2444
+ cursor:text;
2454
2445
  }
2455
2446
 
2456
- .tds-segmented-control-segment--error{
2457
- --tds-segmented-control-color-checked:var(--t-text-color-status-error);
2458
- --tds-segmented-control-background-color-checked:var(--t-fill-color-status-error-ghost);
2447
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
2448
+ display:var(--tds-radio-group-description-invalid-icon-display);
2449
+ flex-shrink:0;
2450
+ margin-top:calc(.5lh - .5em);
2451
+ line-height:var(--tds-radio-group-description-line-height);
2452
+ }
2453
+
2454
+ .tds-radio-group--sm{
2455
+ --tds-radio-group-line-height:1.35;
2456
+ --tds-radio-group-font-size:var(--t-font-size-sm);
2457
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
2458
+ --tds-radio-group-description-line-height:1.3;
2459
2459
  }
2460
2460
 
2461
2461
  .tds-input:has(textarea){
@@ -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
  }
@@ -3054,14 +3062,15 @@ tds-helper-shelf{
3054
3062
  --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
3055
3063
  --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
3056
3064
  --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
3057
- --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
3058
- --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
3059
- --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
3060
- --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
3065
+ --t-fill-color-product-giving-010:hsl(42, 81%, 94%);
3066
+ --t-fill-color-product-giving-020:hsl(41, 75%, 83%);
3067
+ --t-fill-color-product-giving-030:hsl(41, 80%, 76%);
3068
+ --t-fill-color-product-giving-040:hsl(42, 87%, 70%);
3061
3069
  --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
3062
- --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
3063
- --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
3064
- --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
3070
+ --t-fill-color-product-giving-060:hsl(46, 100%, 29%);
3071
+ --t-fill-color-product-giving-070:hsl(45, 100%, 22%);
3072
+ --t-fill-color-product-giving-080:hsl(44, 100%, 17%);
3073
+ --t-fill-color-product-giving-090:hsl(41, 25%, 13%);
3065
3074
  --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
3066
3075
  --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
3067
3076
  --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
@@ -3241,7 +3250,7 @@ tds-helper-shelf{
3241
3250
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
3242
3251
  --t-fill-color-button-pill:hsl(0, 0%, 93%);
3243
3252
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
3244
- --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
3253
+ --t-fill-color-button-pill-active:hsl(0, 0%, 81%);
3245
3254
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
3246
3255
  --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
3247
3256
  --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
@@ -3527,7 +3536,7 @@ tds-helper-shelf{
3527
3536
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
3528
3537
  --t-fill-color-button-pill:hsl(0, 0%, 18%);
3529
3538
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
3530
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
3539
+ --t-fill-color-button-pill-active:hsl(0, 0%, 32%);
3531
3540
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
3532
3541
  --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
3533
3542
  --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
@@ -3751,7 +3760,7 @@ tds-helper-shelf{
3751
3760
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
3752
3761
  --t-fill-color-button-pill:hsl(0, 0%, 18%);
3753
3762
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
3754
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
3763
+ --t-fill-color-button-pill-active:hsl(0, 0%, 32%);
3755
3764
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
3756
3765
  --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
3757
3766
  --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
@@ -4738,13 +4747,38 @@ tds-helper-shelf{
4738
4747
  .tds-data-table-saved-views-list{
4739
4748
  display:flex;
4740
4749
  flex-grow:1;
4741
- flex-wrap:wrap;
4742
4750
  gap:var(--t-spacing-1);
4751
+ min-width:0;
4752
+ }
4753
+
4754
+ .tds-btn--data-table-saved-views-overflow{
4755
+ flex-shrink:0;
4743
4756
  }
4757
+ .tds-data-table-saved-views-list--collapsed .tds-data-table-saved-view-list-item{
4758
+ flex-shrink:1;
4759
+ min-width:0;
4760
+ }
4761
+ .tds-data-table-saved-views-list--collapsed .tds-data-table-saved-view-name{
4762
+ overflow:hidden;
4763
+ text-overflow:ellipsis;
4764
+ }
4744
4765
 
4745
4766
  .tds-btn--data-table-saved-views-manage-views{
4746
4767
  flex-shrink:0;
4747
4768
  }
4769
+
4770
+ .tds-data-table-saved-views-new-view{
4771
+ display:flex;
4772
+ flex-shrink:0;
4773
+ gap:inherit;
4774
+ }
4775
+
4776
+ .tds-data-table-saved-views-new-view:empty{
4777
+ display:none;
4778
+ }
4779
+ .tds-btn--data-table-saved-views-new-view .symbol{
4780
+ transform:scale(.75);
4781
+ }
4748
4782
  .tds-data-table-frame{
4749
4783
  overflow:hidden;
4750
4784
 
@@ -5440,25 +5474,36 @@ tds-helper-shelf{
5440
5474
  }
5441
5475
 
5442
5476
  .tds-data-table-saved-view-list-item{
5443
- --_saved-view-list-item-background-color:transparent;
5477
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-080);
5444
5478
 
5445
5479
  display:flex;
5480
+ flex-shrink:0;
5446
5481
  align-items:center;
5447
- min-height:32px;
5482
+ min-height:var(--t-container-size-md);
5448
5483
 
5449
- padding:4px 13px;
5484
+ padding:var(--t-spacing-half) var(--t-spacing-1-half);
5485
+ color:var(--t-text-color);
5486
+ white-space:nowrap;
5450
5487
  background-color:var(--_saved-view-list-item-background-color);
5451
5488
  border-radius:999px;
5452
5489
  }
5453
5490
 
5454
5491
  .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);
5492
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-070);
5493
+ }
5494
+
5495
+ .tds-data-table-saved-view-list-item[data-pressed]{
5496
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-060);
5456
5497
  }
5457
5498
 
5458
5499
  .tds-data-table-saved-view-list-item[data-selected]{
5459
- --_saved-view-list-item-background-color:var(--t-fill-color-button-pill-active);
5500
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-050);
5460
5501
  }
5461
5502
 
5503
+ .tds-data-table-saved-view-list-item[data-selected][data-pressed]{
5504
+ --_saved-view-list-item-background-color:var(--t-fill-color-neutral-040);
5505
+ }
5506
+
5462
5507
  @media (forced-colors: active){
5463
5508
 
5464
5509
  .tds-data-table-saved-view-list-item[data-selected]{
@@ -5492,6 +5537,60 @@ tds-helper-shelf{
5492
5537
  color:var(--t-text-color-secondary);
5493
5538
  }
5494
5539
 
5540
+ .tds-data-table-saved-view-save-status{
5541
+ position:relative;
5542
+ display:inline-flex;
5543
+ flex-shrink:0;
5544
+ align-items:center;
5545
+ align-self:center;
5546
+ justify-content:center;
5547
+ inline-size:1em;
5548
+ block-size:1em;
5549
+ margin-inline-start:var(--t-spacing-1);
5550
+ font-size:var(--t-font-size-sm);
5551
+ }
5552
+
5553
+ .tds-data-table-saved-view-save-status--saving{
5554
+ --tds-loading-spinner-visibility:visible;
5555
+ --tds-loading-spinner-animation-play-state:running;
5556
+ --tds-loading-spinner-size:1em;
5557
+ --tds-loading-spinner-track-width:2px;
5558
+
5559
+ color:var(--t-text-color-secondary);
5560
+ animation:tds-data-table-saved-view-save-status-fade-in 150ms 500ms both;
5561
+ }
5562
+ @keyframes tds-data-table-saved-view-save-status-fade-in{
5563
+ from{
5564
+ inline-size:0;
5565
+ margin-inline-start:0;
5566
+ opacity:0;
5567
+ }
5568
+ }
5569
+ @media (prefers-reduced-motion: reduce){
5570
+ .tds-data-table-saved-view-save-status--saving{
5571
+ --tds-loading-spinner-animation-play-state:paused;
5572
+ }
5573
+ }
5574
+
5575
+ .tds-data-table-saved-view-save-status--failed{
5576
+ color:var(--t-icon-color-status-error);
5577
+ }
5578
+
5579
+ .tds-data-table-saved-view-save-error{
5580
+ display:inline-flex;
5581
+ -moz-column-gap:var(--t-spacing-half);
5582
+ column-gap:var(--t-spacing-half);
5583
+ align-items:center;
5584
+ align-self:center;
5585
+ margin-inline-start:var(--t-spacing-1);
5586
+ font-size:var(--t-font-size-sm);
5587
+ color:var(--t-text-color-status-error);
5588
+ }
5589
+
5590
+ .tds-data-table-saved-view-save-error .tds-data-table-saved-view-save-status{
5591
+ margin-inline-start:0;
5592
+ }
5593
+
5495
5594
  .has-instance-badge-NNA9P{
5496
5595
  inline-size:6px;
5497
5596
  block-size:6px;
@@ -5567,23 +5666,46 @@ tds-helper-shelf{
5567
5666
  margin-block:0;
5568
5667
  list-style:none;
5569
5668
  }
5570
-
5571
- .views-list-item-cWGsC{
5572
- position:relative;
5669
+ .views-list-item-cWGsC,
5670
+ .views-list-item--static-9zGpJ{
5573
5671
  display:flex;
5574
5672
  -moz-column-gap:var(--t-spacing-1);
5575
5673
  column-gap:var(--t-spacing-1);
5674
+ align-items:center;
5675
+ padding:var(--t-spacing-half);
5676
+ border-radius:var(--t-border-radius-md);
5677
+ }
5678
+ :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"]){
5679
+ background-color:var(--t-fill-color-neutral-090);
5680
+ }
5681
+
5682
+ .views-list-item-cWGsC{
5683
+ position:relative;
5576
5684
  }
5577
5685
 
5578
5686
  .views-list-item-cWGsC[data-dragging] > :not(.view-list-drop-indicator-zyDIt){
5579
5687
  opacity:.5;
5580
5688
  }
5581
-
5689
+ .view-list-item-default-icon-d-QS1{
5690
+ box-sizing:content-box;
5691
+ display:flex;
5692
+ flex-shrink:0;
5693
+ padding:calc((var(--t-container-size-md) - 1em) / 2);
5694
+ font-size:var(--t-font-size-md);
5695
+ color:var(--t-icon-color-secondary);
5696
+ }
5697
+ .view-list-item-actions-NFBUU,
5582
5698
  .view-list-item-drag-handle-fiO5Z{
5583
5699
  --tds-btn-color:var(--t-text-color-secondary);
5700
+ }
5584
5701
 
5702
+ .view-list-item-drag-handle-fiO5Z{
5585
5703
  cursor:grab;
5586
5704
  }
5705
+
5706
+ .view-list-item-drag-handle-fiO5Z:active{
5707
+ cursor:grabbing;
5708
+ }
5587
5709
  .view-list-drop-indicator-zyDIt{
5588
5710
  --_drop-indicator-width:var(--t-spacing-fourth);
5589
5711
  position:absolute;
@@ -5608,9 +5730,6 @@ tds-helper-shelf{
5608
5730
  }
5609
5731
 
5610
5732
  .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
5733
  transform:translateZ(0);
5615
5734
  }
5616
5735
 
@@ -5618,28 +5737,17 @@ tds-helper-shelf{
5618
5737
  opacity:.5;
5619
5738
  transition:none;
5620
5739
  }
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{
5740
+ .view-list-item-name-VRsyM{
5633
5741
  display:flex;
5634
5742
  flex-grow:1;
5635
5743
  align-items:center;
5744
+ min-inline-size:0;
5636
5745
  min-block-size:var(--t-container-size-md);
5637
- padding-inline:var(--t-spacing-1);
5746
+ padding-inline-start:var(--t-spacing-half);
5638
5747
  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);
5748
+ color:var(--t-text-color);
5749
+ overflow-wrap:anywhere;
5750
+ cursor:default;
5643
5751
  }
5644
5752
 
5645
5753
  .tds-pagination{
@@ -5745,6 +5853,47 @@ tds-helper-shelf{
5745
5853
  }
5746
5854
  }
5747
5855
 
5856
+ .tds-reorderable-list-box{
5857
+ --_drop-indicator-width:2px;
5858
+ display:contents;
5859
+ }
5860
+
5861
+ .tds-reorderable-list-box-item{
5862
+ cursor:pointer;
5863
+ -webkit-user-select:none;
5864
+ -moz-user-select:none;
5865
+ user-select:none;
5866
+ outline:0;
5867
+ }
5868
+
5869
+ .tds-reorderable-list-box-item[data-focus-visible]{
5870
+ outline:var(--t-focus-ring-outline);
5871
+ outline-offset:var(--t-focus-ring-offset);
5872
+ }
5873
+
5874
+ .tds-reorderable-list-box-item[data-dragging]{
5875
+ opacity:.5;
5876
+ }
5877
+
5878
+ .tds-reorderable-list-box-drop-indicator{
5879
+ align-self:stretch;
5880
+ inline-size:var(--_drop-indicator-width);
5881
+ margin-inline:calc((var(--t-spacing-1) + var(--_drop-indicator-width)) / -2);
5882
+ border-radius:var(--_drop-indicator-width);
5883
+ }
5884
+
5885
+ .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5886
+ background-color:var(--t-focus-ring-color);
5887
+ }
5888
+
5889
+ @media (forced-colors: active){
5890
+
5891
+ .tds-reorderable-list-box-drop-indicator[data-drop-target]{
5892
+ forced-color-adjust:none;
5893
+ background-color:Highlight;
5894
+ }
5895
+ }
5896
+
5748
5897
  .tds-filterable-list-box:has(input:disabled){
5749
5898
  --tds-filterable-list-box-cursor:not-allowed;
5750
5899
  }
@@ -5957,47 +6106,6 @@ tds-helper-shelf{
5957
6106
  white-space:nowrap;
5958
6107
  }
5959
6108
 
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
6109
  .tds-alert-dialog{
6002
6110
  padding-block-start:0;
6003
6111
  text-align:center;
@@ -7827,7 +7935,7 @@ a.tds-dropdown-item:is(:hover, :active){
7827
7935
  --tds-select-dropdown-scrollbar-width:thin;
7828
7936
  --tds-select-dropdown-border-radius:var(--t-border-radius);
7829
7937
  --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;
7938
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out);
7831
7939
  --tds-select-dropdown-closed-opacity:0;
7832
7940
  --tds-select-dropdown-open-opacity:1;
7833
7941
  --tds-select-dropdown-closed-translate:0 -8px;
@@ -8029,6 +8137,13 @@ a.tds-dropdown-item:is(:hover, :active){
8029
8137
  --tds-select-font-size:var(--t-font-size-lg);
8030
8138
  }
8031
8139
 
8140
+ @supports (overlay: auto){
8141
+
8142
+ .tds-select{
8143
+ --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;
8144
+ }
8145
+ }
8146
+
8032
8147
  @media (prefers-reduced-motion: reduce){
8033
8148
 
8034
8149
  .tds-select{