@pantheon-systems/pds-toolkit-react 2.0.0-alpha.7 → 2.0.0-alpha.71

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 (403) hide show
  1. package/bin/pds-codemod.cjs +58 -0
  2. package/codemods/v1-to-v2/css-token-renames.js +186 -0
  3. package/codemods/v1-to-v2/mappings.json +1787 -0
  4. package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/basic.input.tsx +33 -0
  5. package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/basic.output.tsx +33 -0
  6. package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/only.input.tsx +8 -0
  7. package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/only.output.tsx +8 -0
  8. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.input.tsx +55 -0
  9. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.output.tsx +55 -0
  10. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.input.tsx +60 -0
  11. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.output.tsx +60 -0
  12. package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/basic.input.tsx +35 -0
  13. package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/basic.output.tsx +35 -0
  14. package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/only.input.tsx +8 -0
  15. package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/only.output.tsx +8 -0
  16. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/basic.input.tsx +28 -0
  17. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/basic.output.tsx +28 -0
  18. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/only.input.tsx +8 -0
  19. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/only.output.tsx +8 -0
  20. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.input.tsx +37 -0
  21. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.output.tsx +37 -0
  22. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.input.tsx +21 -0
  23. package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.output.tsx +21 -0
  24. package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.input.tsx +60 -0
  25. package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.output.tsx +51 -0
  26. package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.input.tsx +8 -0
  27. package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.output.tsx +8 -0
  28. package/codemods/v1-to-v2/transforms/__tests__/component-renames.test.js +15 -0
  29. package/codemods/v1-to-v2/transforms/__tests__/css-class-removals.test.js +6 -0
  30. package/codemods/v1-to-v2/transforms/__tests__/css-class-renames.test.js +6 -0
  31. package/codemods/v1-to-v2/transforms/__tests__/icon-name-updates.test.js +15 -0
  32. package/codemods/v1-to-v2/transforms/__tests__/prop-renames.test.js +15 -0
  33. package/codemods/v1-to-v2/transforms/__tests__/prop-value-standardization.test.js +16 -0
  34. package/codemods/v1-to-v2/transforms/__tests__/removed-prop-values.test.js +15 -0
  35. package/codemods/v1-to-v2/transforms/component-renames.js +166 -0
  36. package/codemods/v1-to-v2/transforms/css-class-removals.js +262 -0
  37. package/codemods/v1-to-v2/transforms/css-class-renames.js +178 -0
  38. package/codemods/v1-to-v2/transforms/icon-name-updates.js +124 -0
  39. package/codemods/v1-to-v2/transforms/prop-renames.js +109 -0
  40. package/codemods/v1-to-v2/transforms/prop-value-standardization.js +143 -0
  41. package/codemods/v1-to-v2/transforms/removed-prop-values.js +206 -0
  42. package/dist/components/Avatar/Avatar.d.ts +5 -1
  43. package/dist/components/Callout/Callout.d.ts +6 -2
  44. package/dist/components/CodeBlock/CodeBlock.d.ts +10 -5
  45. package/dist/components/CodeBlock/code-examples.d.ts +2 -1
  46. package/dist/components/CodeBlock/prism-setup.d.ts +2 -0
  47. package/dist/components/CodeBlock/themes/index.d.ts +1 -2
  48. package/dist/components/CodeBlock/themes/{pdsDark.d.ts → pds.d.ts} +1 -1
  49. package/dist/components/ComparisonList/ComparisonList.d.ts +6 -1
  50. package/dist/components/Dropdown/Dropdown.d.ts +192 -0
  51. package/dist/components/Dropdown/DropdownSelectedIcon.d.ts +7 -0
  52. package/dist/components/FileDiff/FileDiff.d.ts +2 -2
  53. package/dist/components/IdentityBlock/IdentityBlock.d.ts +37 -0
  54. package/dist/components/PantheonLogo/PantheonLogo.d.ts +5 -4
  55. package/dist/components/Popover/Popover.d.ts +5 -1
  56. package/dist/components/ResultCount/ResultCount.d.ts +53 -0
  57. package/dist/components/SiteFooter/SiteFooter.d.ts +45 -0
  58. package/dist/components/{navigation/DashboardSearch/DashboardSearch.d.ts → SiteSearch/SiteSearch.d.ts} +6 -11
  59. package/dist/components/SortableList/SortableList.d.ts +8 -0
  60. package/dist/components/SortableList/SortableListHeader.d.ts +7 -0
  61. package/dist/components/SortableList/SortableRow.d.ts +16 -0
  62. package/dist/components/SortableList/sortable-utils.d.ts +19 -0
  63. package/dist/components/SortableList/types.d.ts +142 -0
  64. package/dist/components/SortableList/useSortableTree.d.ts +18 -0
  65. package/dist/components/{RefreshChecker/RefreshChecker.d.ts → StatusChecker/StatusChecker.d.ts} +6 -19
  66. package/dist/components/StatusIndicator/StatusIndicator.d.ts +7 -4
  67. package/dist/components/Table/Table.d.ts +290 -17
  68. package/dist/components/TableOfContents/TableOfContents.d.ts +1 -5
  69. package/dist/components/Tag/Tag.d.ts +21 -3
  70. package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts +29 -8
  71. package/dist/components/Tooltip/Tooltip.d.ts +6 -2
  72. package/dist/components/UtilityBar/UtilityBar.d.ts +26 -0
  73. package/dist/components/badges/Badge/Badge.d.ts +1 -1
  74. package/dist/components/badges/StatusBadge/StatusBadge.d.ts +2 -1
  75. package/dist/components/buttons/Button/Button.d.ts +15 -0
  76. package/dist/components/buttons/ButtonLink/ButtonLink.d.ts +1 -3
  77. package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts +5 -1
  78. package/dist/components/buttons/CloseButton/CloseButton.d.ts +4 -4
  79. package/dist/components/buttons/FilterButton/FilterButton.d.ts +92 -0
  80. package/dist/components/buttons/IconButton/IconButton.d.ts +12 -0
  81. package/dist/components/buttons/MenuButton/MenuButton.d.ts +24 -17
  82. package/dist/components/buttons/SSOButton/SSOButton.d.ts +9 -1
  83. package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +44 -8
  84. package/dist/components/cards/ActionCard/ActionCard.d.ts +64 -0
  85. package/dist/components/cards/Card/Card.d.ts +10 -4
  86. package/dist/components/cards/CardSelect/CardSelect.d.ts +100 -0
  87. package/dist/components/charts/BarChart/BarChart.d.ts +21 -0
  88. package/dist/components/charts/LineChart/LineChart.d.ts +22 -0
  89. package/dist/components/charts/PieChart/PieChart.d.ts +59 -0
  90. package/dist/components/charts/ProportionBar/ProportionBar.d.ts +57 -0
  91. package/dist/components/charts/shared/ChartAccessibleTable.d.ts +17 -0
  92. package/dist/components/charts/shared/ChartLegend.d.ts +31 -0
  93. package/dist/components/charts/shared/ChartSkeleton.d.ts +11 -0
  94. package/dist/components/charts/shared/chart-colors.d.ts +30 -0
  95. package/dist/components/charts/shared/chart-styles.d.ts +24 -0
  96. package/dist/components/charts/shared/formatters.d.ts +12 -0
  97. package/dist/components/charts/shared/types.d.ts +128 -0
  98. package/dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts +13 -8
  99. package/dist/components/icons/Icon/Icon.d.ts +2 -2
  100. package/dist/components/icons/Icon/custom-icons.d.ts +1 -1
  101. package/dist/components/icons/Icon/generated-icon-data.d.ts +212 -16
  102. package/dist/components/icons/PaymentIcon/PaymentIcon.d.ts +7 -3
  103. package/dist/components/icons/PlatformIcon/PlatformIcon.d.ts +6 -6
  104. package/dist/components/inputs/Checkbox/Checkbox.d.ts +3 -3
  105. package/dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts +9 -1
  106. package/dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts +9 -1
  107. package/dist/components/inputs/Combobox/Combobox.d.ts +17 -7
  108. package/dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts +10 -5
  109. package/dist/components/inputs/Datepicker/Datepicker.d.ts +217 -14
  110. package/dist/components/inputs/FileUpload/FileUpload.d.ts +6 -1
  111. package/dist/components/inputs/RadioGroup/RadioGroup.d.ts +10 -2
  112. package/dist/components/inputs/Select/Select.d.ts +11 -2
  113. package/dist/components/inputs/Switch/Switch.d.ts +5 -5
  114. package/dist/components/inputs/TagsInput/TagsInput.d.ts +6 -1
  115. package/dist/components/inputs/TextInput/TextInput.d.ts +4 -4
  116. package/dist/components/inputs/Textarea/Textarea.d.ts +2 -2
  117. package/dist/components/inputs/Timepicker/Timepicker.d.ts +94 -0
  118. package/dist/components/inputs/input-utilities.d.ts +12 -2
  119. package/dist/components/{CTALink → links/CTALink}/CTALink.d.ts +1 -1
  120. package/dist/components/{LinkNewWindow → links/LinkNewWindow}/LinkNewWindow.d.ts +1 -1
  121. package/dist/components/loading-indicators/Spinner/Spinner.d.ts +5 -4
  122. package/dist/components/navigation/ButtonNav/ButtonNav.d.ts +11 -5
  123. package/dist/components/navigation/DropdownMenu/DropdownMenu.d.ts +1 -0
  124. package/dist/components/navigation/Navbar/Navbar.d.ts +9 -21
  125. package/dist/components/navigation/SideNav/SideNav.d.ts +7 -1
  126. package/dist/components/navigation/SideNavGlobal/SideNavGlobal.d.ts +5 -15
  127. package/dist/components/navigation/SideNavGlobal/SideNavGlobalItem.d.ts +15 -1
  128. package/dist/components/navigation/SiteMenu/SiteMenu.d.ts +26 -0
  129. package/dist/components/navigation/SiteMenu/SiteMenuDropdown.d.ts +23 -0
  130. package/dist/components/navigation/TreeNav/TreeNav.d.ts +48 -0
  131. package/dist/components/navigation/UserMenu/UserMenu.d.ts +20 -5
  132. package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts +2 -16
  133. package/dist/components/navigation/navigation-utilities.d.ts +12 -0
  134. package/dist/components/notifications/Toaster/Toast.d.ts +12 -1
  135. package/dist/components/notifications/Toaster/Toaster.d.ts +16 -7
  136. package/dist/components/notifications/Toaster/useToast.d.ts +2 -0
  137. package/dist/components/overlays/Drawer/Drawer.d.ts +58 -0
  138. package/dist/components/overlays/FullScreenOverlay/FullScreenOverlay.d.ts +45 -0
  139. package/dist/components/{Modal → overlays/Modal}/Modal.d.ts +2 -2
  140. package/dist/components/{Pagination → pagination/Pagination}/Pagination.d.ts +7 -2
  141. package/dist/components/pagination/PaginationChapter/PaginationChapter.d.ts +55 -0
  142. package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts +62 -0
  143. package/dist/components/panels/ExpansionPanel/ExpansionPanel.d.ts +1 -2
  144. package/dist/components/panels/ExpansionPanelGroup/ExpansionPanelGroup.d.ts +1 -2
  145. package/dist/components/panels/Panel/Panel.d.ts +4 -21
  146. package/dist/components/panels/PanelList/PanelList.d.ts +1 -1
  147. package/dist/components/panels/PanelStack/PanelStack.d.ts +19 -0
  148. package/dist/components/progress-indicators/ProgressBar/ProgressBar.d.ts +4 -5
  149. package/dist/components/progress-indicators/ProgressRing/ProgressRing.d.ts +12 -4
  150. package/dist/components/{FlowSteps/FlowSteps.d.ts → steppers/StepList/StepList.d.ts} +7 -7
  151. package/dist/css/component-css/pds-action-card.css +1 -0
  152. package/dist/css/component-css/pds-avatar.css +1 -1
  153. package/dist/css/component-css/pds-badge.css +1 -1
  154. package/dist/css/component-css/pds-banner.css +1 -1
  155. package/dist/css/component-css/pds-bar-chart.css +1 -0
  156. package/dist/css/component-css/pds-branch-diff.css +1 -1
  157. package/dist/css/component-css/pds-breadcrumb.css +1 -1
  158. package/dist/css/component-css/pds-button-link.css +1 -1
  159. package/dist/css/component-css/pds-button-nav.css +1 -1
  160. package/dist/css/component-css/pds-button.css +45 -13
  161. package/dist/css/component-css/pds-callout.css +1 -1
  162. package/dist/css/component-css/pds-card-select.css +2 -0
  163. package/dist/css/component-css/pds-card.css +1 -1
  164. package/dist/css/component-css/pds-chart-legend.css +1 -0
  165. package/dist/css/component-css/pds-chart-wrapper.css +1 -0
  166. package/dist/css/component-css/pds-checkbox-group.css +1 -1
  167. package/dist/css/component-css/pds-checkbox.css +1 -1
  168. package/dist/css/component-css/pds-close-button.css +1 -1
  169. package/dist/css/component-css/pds-code-block-legacy.css +1 -1
  170. package/dist/css/component-css/pds-code-block.css +1 -1
  171. package/dist/css/component-css/pds-combobox-multiselect.css +3 -2
  172. package/dist/css/component-css/pds-combobox.css +1 -1
  173. package/dist/css/component-css/pds-compact-empty-state.css +1 -1
  174. package/dist/css/component-css/pds-comparison-list.css +1 -1
  175. package/dist/css/component-css/pds-cta-link.css +1 -1
  176. package/dist/css/component-css/pds-datepicker.css +1 -3
  177. package/dist/css/component-css/pds-drawer.css +1 -0
  178. package/dist/css/component-css/pds-dropdown-menu.css +2 -2
  179. package/dist/css/component-css/pds-dropdown.css +2 -0
  180. package/dist/css/component-css/pds-expansion-panel-group.css +1 -1
  181. package/dist/css/component-css/pds-expansion-panel.css +2 -1
  182. package/dist/css/component-css/pds-file-diff.css +1 -1
  183. package/dist/css/component-css/pds-file-upload.css +3 -3
  184. package/dist/css/component-css/pds-filter-button.css +1 -0
  185. package/dist/css/component-css/pds-full-screen-overlay.css +1 -0
  186. package/dist/css/component-css/pds-horizontal-empty-state.css +1 -1
  187. package/dist/css/component-css/pds-icon-button.css +5 -3
  188. package/dist/css/component-css/pds-icon-story-only.css +1 -1
  189. package/dist/css/component-css/pds-icon.css +1 -1
  190. package/dist/css/component-css/pds-identity-block.css +1 -0
  191. package/dist/css/component-css/pds-index.css +152 -45
  192. package/dist/css/component-css/pds-inline-message.css +1 -1
  193. package/dist/css/component-css/pds-input-group.css +1 -1
  194. package/dist/css/component-css/pds-input-utilities.css +1 -1
  195. package/dist/css/component-css/pds-line-chart.css +1 -0
  196. package/dist/css/component-css/pds-link-new-window.css +1 -1
  197. package/dist/css/component-css/pds-menu-button.css +7 -1
  198. package/dist/css/component-css/pds-modal.css +1 -1
  199. package/dist/css/component-css/pds-nav-menu.css +1 -5
  200. package/dist/css/component-css/pds-navbar.css +4 -1
  201. package/dist/css/component-css/pds-pagination-chapter.css +3 -0
  202. package/dist/css/component-css/pds-pagination-compact.css +1 -0
  203. package/dist/css/component-css/pds-pagination.css +1 -1
  204. package/dist/css/component-css/pds-panel-list.css +1 -1
  205. package/dist/css/component-css/pds-panel-stack.css +1 -0
  206. package/dist/css/component-css/pds-panel.css +2 -1
  207. package/dist/css/component-css/pds-pantheon-logo.css +1 -1
  208. package/dist/css/component-css/pds-payment-icon.css +1 -1
  209. package/dist/css/component-css/pds-picture.css +1 -1
  210. package/dist/css/component-css/pds-pie-chart.css +1 -0
  211. package/dist/css/component-css/pds-platform-icon.css +1 -1
  212. package/dist/css/component-css/pds-popover.css +1 -1
  213. package/dist/css/component-css/pds-progress-bar.css +1 -1
  214. package/dist/css/component-css/pds-progress-ring.css +1 -1
  215. package/dist/css/component-css/pds-proportion-bar.css +1 -0
  216. package/dist/css/component-css/pds-radio-group.css +1 -1
  217. package/dist/css/component-css/pds-result-count.css +1 -0
  218. package/dist/css/component-css/pds-section-message.css +1 -1
  219. package/dist/css/component-css/pds-segmented-button.css +2 -1
  220. package/dist/css/component-css/pds-select.css +1 -1
  221. package/dist/css/component-css/pds-side-nav-global.css +3 -5
  222. package/dist/css/component-css/pds-side-nav.css +3 -1
  223. package/dist/css/component-css/pds-site-footer.css +1 -1
  224. package/dist/css/component-css/pds-site-search.css +1 -0
  225. package/dist/css/component-css/pds-skeleton.css +1 -1
  226. package/dist/css/component-css/pds-skiplink.css +1 -1
  227. package/dist/css/component-css/pds-sortable-list.css +8 -0
  228. package/dist/css/component-css/pds-spinner.css +1 -1
  229. package/dist/css/component-css/pds-split-button.css +1 -1
  230. package/dist/css/component-css/pds-sso-button.css +2 -2
  231. package/dist/css/component-css/pds-status-badge.css +1 -1
  232. package/dist/css/component-css/pds-status-checker.css +1 -0
  233. package/dist/css/component-css/pds-status-indicator.css +1 -1
  234. package/dist/css/component-css/pds-step-list.css +1 -0
  235. package/dist/css/component-css/pds-stepper.css +3 -1
  236. package/dist/css/component-css/pds-switch.css +6 -11
  237. package/dist/css/component-css/pds-tab-menu.css +2 -2
  238. package/dist/css/component-css/pds-table-of-contents.css +1 -1
  239. package/dist/css/component-css/pds-table.css +5 -1
  240. package/dist/css/component-css/pds-tabs.css +1 -1
  241. package/dist/css/component-css/pds-tag.css +1 -1
  242. package/dist/css/component-css/pds-tags-input.css +1 -1
  243. package/dist/css/component-css/pds-tally.css +1 -1
  244. package/dist/css/component-css/pds-text-input.css +1 -1
  245. package/dist/css/component-css/pds-textarea.css +1 -1
  246. package/dist/css/component-css/pds-theme-switcher.css +1 -1
  247. package/dist/css/component-css/pds-timepicker.css +1 -0
  248. package/dist/css/component-css/pds-toaster.css +1 -1
  249. package/dist/css/component-css/pds-tooltip.css +1 -1
  250. package/dist/css/component-css/pds-tree-nav.css +1 -0
  251. package/dist/css/component-css/pds-user-menu-story-only.css +1 -1
  252. package/dist/css/component-css/pds-user-menu.css +32 -1
  253. package/dist/css/component-css/pds-utility-bar.css +1 -0
  254. package/dist/css/component-css/pds-utility-button.css +3 -1
  255. package/dist/css/component-css/pds-vertical-empty-state.css +1 -1
  256. package/dist/css/component-css/pds-vertical-stepper.css +1 -1
  257. package/dist/css/component-css/pds-video-embed.css +1 -1
  258. package/dist/css/component-css/pds-workspace-selector.css +26 -1
  259. package/dist/css/design-tokens/variables.dark.css +385 -338
  260. package/dist/css/design-tokens/variables.global.css +10 -18
  261. package/dist/css/design-tokens/variables.light.css +376 -309
  262. package/dist/css/design-tokens/variables.typography.css +1 -2
  263. package/dist/css/layout-css/pds-app-layout.css +3 -2
  264. package/dist/css/layout-css/pds-docs-layout.css +1 -1
  265. package/dist/css/layout-css/pds-index.css +3 -9
  266. package/dist/css/layout-css/pds-sidebar-layout.css +5 -0
  267. package/dist/css/layout-css/pds-stepper-layout.css +1 -1
  268. package/dist/css/layout-css/pds-three-item-layout.css +1 -1
  269. package/dist/css/layout-css/pds-two-item-layout.css +1 -1
  270. package/dist/css/pds-components.css +152 -45
  271. package/dist/css/pds-core.css +3 -2
  272. package/dist/css/pds-layouts.css +3 -9
  273. package/dist/index.css +5 -1
  274. package/dist/index.d.ts +95 -7
  275. package/dist/index.js +12738 -4787
  276. package/dist/index.js.map +1 -1
  277. package/dist/index.source.d.ts +44 -41
  278. package/dist/layouts/AppLayout/AppLayout.d.ts +85 -10
  279. package/dist/layouts/DocsLayout/DocsLayout.d.ts +9 -7
  280. package/dist/layouts/SidebarLayout/SidebarLayout.d.ts +16 -6
  281. package/dist/layouts/StepperLayout/StepperLayout.d.ts +13 -1
  282. package/dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts +3 -3
  283. package/dist/layouts/TwoItemLayout/TwoItemLayout.d.ts +3 -3
  284. package/dist/libs/components/NavAccordion/NavAccordion.d.ts +27 -0
  285. package/dist/libs/components/StatusDot/StatusDot.d.ts +15 -0
  286. package/dist/libs/components/utils.d.ts +1 -1
  287. package/dist/libs/types/custom-types.d.ts +11 -5
  288. package/dist/libs/types/layout-types.d.ts +4 -1
  289. package/dist/libs/types/navigation-types.d.ts +17 -1
  290. package/dist/svg/anglesDown.svg +3 -0
  291. package/dist/svg/anglesUp.svg +3 -0
  292. package/dist/svg/barsStaggered.svg +3 -0
  293. package/dist/svg/bookmark.svg +3 -0
  294. package/dist/svg/bookmarkSolid.svg +3 -0
  295. package/dist/svg/box.svg +3 -0
  296. package/dist/svg/circleExclamationSolid.svg +3 -0
  297. package/dist/svg/circleHalfStroke.svg +3 -0
  298. package/dist/svg/circleInfoSolid.svg +3 -0
  299. package/dist/svg/circleQuestionSolid.svg +3 -0
  300. package/dist/svg/claude.svg +3 -0
  301. package/dist/svg/clock.svg +3 -0
  302. package/dist/svg/collapseToCenter.svg +3 -0
  303. package/dist/svg/compress.svg +3 -0
  304. package/dist/svg/diagramVenn.svg +3 -0
  305. package/dist/svg/floppyDisk.svg +3 -0
  306. package/dist/svg/grid.svg +2 -2
  307. package/dist/svg/grid2.svg +3 -0
  308. package/dist/svg/landmark.svg +3 -0
  309. package/dist/svg/move.svg +3 -0
  310. package/dist/svg/octagonExclamation.svg +3 -0
  311. package/dist/svg/openai.svg +3 -0
  312. package/dist/svg/pause.svg +3 -0
  313. package/dist/svg/penPaintbrush.svg +3 -0
  314. package/dist/svg/sidebar.svg +3 -0
  315. package/dist/svg/slider.svg +3 -0
  316. package/dist/svg/squareDashed.svg +3 -0
  317. package/dist/svg/tableColumns.svg +3 -0
  318. package/dist/svg/userSolid.svg +3 -0
  319. package/dist/{layouts → utilities}/FlexContainer/FlexContainer.d.ts +6 -6
  320. package/dist/utilities/GlobalWrapper/GlobalWrapper.d.ts +35 -0
  321. package/dist/utilities/context-providers/ThemeContext/ThemeContext.d.ts +113 -0
  322. package/dist/utilities/grid/Grid.d.ts +58 -0
  323. package/dist/utilities/grid/GridItem.d.ts +57 -0
  324. package/dist/utilities/hooks/useDropdown/index.d.ts +1 -0
  325. package/dist/utilities/hooks/useDropdown/useDropdown.d.ts +138 -0
  326. package/dist/utilities/hooks/useIsMobile/useIsMobile.d.ts +16 -0
  327. package/dist/utilities/hooks/useKeyPress/useKeyPress.d.ts +6 -0
  328. package/dist/utilities/hooks/useKeyboardShortcut/useKeyboardShortcut.d.ts +29 -0
  329. package/package.json +83 -47
  330. package/tailwind/README.md +220 -0
  331. package/tailwind/TESTING.md +457 -0
  332. package/tailwind/v3/preset.cjs +258 -0
  333. package/tailwind/v4/theme.css +230 -0
  334. package/dist/components/CTASlice/CTASlice.d.ts +0 -43
  335. package/dist/components/CodeBlock/themes/pdsLight.d.ts +0 -2
  336. package/dist/components/DashboardStat/DashboardStat.d.ts +0 -28
  337. package/dist/components/PullQuote/PullQuote.d.ts +0 -34
  338. package/dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts +0 -62
  339. package/dist/components/SocialLinks/SocialLinks.d.ts +0 -23
  340. package/dist/components/cards/CardHeading/CardHeading.d.ts +0 -31
  341. package/dist/components/cards/CardSelectGroup/CardSelectGroup.d.ts +0 -60
  342. package/dist/components/cards/EmptyStateCard/EmptyStateCard.d.ts +0 -36
  343. package/dist/components/cards/LinksCard/LinksCard.d.ts +0 -29
  344. package/dist/components/cards/LinksCard/links-card-sample-data.d.ts +0 -2
  345. package/dist/components/cards/NewSiteCard/NewSiteCard.d.ts +0 -61
  346. package/dist/components/cards/PaymentCard/PaymentCard.d.ts +0 -47
  347. package/dist/components/cards/PricingCard/PricingCard.d.ts +0 -95
  348. package/dist/components/cards/SiteCard/SiteCard.d.ts +0 -50
  349. package/dist/components/footer/FooterHeading/FooterHeading.d.ts +0 -22
  350. package/dist/components/footer/FooterLinks/FooterLinks.d.ts +0 -26
  351. package/dist/components/footer/SiteFooter/SiteFooter.d.ts +0 -34
  352. package/dist/components/footer/SiteFooter/footer-content.d.ts +0 -1
  353. package/dist/components/navigation/DashboardNav/DashboardNav.d.ts +0 -35
  354. package/dist/components/navigation/DashboardNav/DashboardNavItem.d.ts +0 -24
  355. package/dist/components/navigation/NavMenu/NavMenu.d.ts +0 -33
  356. package/dist/components/navigation/NavMenu/NavMenuDropdown.d.ts +0 -24
  357. package/dist/components/navigation/SideNavCompact/SideNavCompact.d.ts +0 -53
  358. package/dist/components/notifications/NotificationHubIcon/NotificationHubIcon.d.ts +0 -38
  359. package/dist/components/notifications/NotificationsPopover/NotificationsPopover.d.ts +0 -118
  360. package/dist/components/tiles/AvatarTileList/AvatarTileList.d.ts +0 -28
  361. package/dist/components/tiles/Tile/Tile.d.ts +0 -42
  362. package/dist/components/tiles/TileGrid/TileGrid.d.ts +0 -29
  363. package/dist/css/component-css/pds-avatar-tile-list.css +0 -1
  364. package/dist/css/component-css/pds-card-heading.css +0 -1
  365. package/dist/css/component-css/pds-card-select-group.css +0 -1
  366. package/dist/css/component-css/pds-cta-slice.css +0 -1
  367. package/dist/css/component-css/pds-dashboard-nav.css +0 -5
  368. package/dist/css/component-css/pds-dashboard-search.css +0 -1
  369. package/dist/css/component-css/pds-dashboard-stat.css +0 -1
  370. package/dist/css/component-css/pds-empty-state-card.css +0 -1
  371. package/dist/css/component-css/pds-flow-steps.css +0 -1
  372. package/dist/css/component-css/pds-footer-heading.css +0 -1
  373. package/dist/css/component-css/pds-footer-links.css +0 -1
  374. package/dist/css/component-css/pds-links-card.css +0 -1
  375. package/dist/css/component-css/pds-new-site-card.css +0 -1
  376. package/dist/css/component-css/pds-notification-hub-icon.css +0 -1
  377. package/dist/css/component-css/pds-notifications-popover.css +0 -1
  378. package/dist/css/component-css/pds-payment-card.css +0 -1
  379. package/dist/css/component-css/pds-pricing-card-local.css +0 -1
  380. package/dist/css/component-css/pds-pricing-card.css +0 -1
  381. package/dist/css/component-css/pds-pull-quote.css +0 -1
  382. package/dist/css/component-css/pds-refresh-checker.css +0 -1
  383. package/dist/css/component-css/pds-side-nav-compact.css +0 -1
  384. package/dist/css/component-css/pds-site-card.css +0 -1
  385. package/dist/css/component-css/pds-site-dashboard-heading.css +0 -1
  386. package/dist/css/component-css/pds-social-links.css +0 -1
  387. package/dist/css/component-css/pds-tile.css +0 -1
  388. package/dist/css/component-css/pds-tiles-common.css +0 -1
  389. package/dist/css/layout-css/pds-dashboard-global.css +0 -8
  390. package/dist/css/layout-css/pds-dashboard-inner.css +0 -1
  391. package/dist/css/layout-css/pds-flex-container.css +0 -1
  392. package/dist/layouts/DashboardGlobal/DashboardGlobal.d.ts +0 -57
  393. package/dist/layouts/DashboardInner/DashboardInner.d.ts +0 -30
  394. package/dist/layouts/GlobalWrapper/GlobalWrapper.d.ts +0 -19
  395. package/dist/utilities/context-providers/ResponsiveContext/ResponsiveContext.d.ts +0 -6
  396. /package/dist/components/{Skiplink → links/Skiplink}/Skiplink.d.ts +0 -0
  397. /package/dist/components/{Picture → media/Picture}/Picture.d.ts +0 -0
  398. /package/dist/components/{VideoEmbed → media/VideoEmbed}/VideoEmbed.d.ts +0 -0
  399. /package/dist/components/{Pagination → pagination/Pagination}/usePagination.d.ts +0 -0
  400. /package/dist/components/{FlowSteps → steppers/StepList}/example-steps.d.ts +0 -0
  401. /package/dist/svg/{linkSimple.svg → link.svg} +0 -0
  402. /package/dist/svg/{linkSimpleSlash.svg → unlink.svg} +0 -0
  403. /package/dist/{layouts → utilities}/Container/Container.d.ts +0 -0
@@ -7,6 +7,7 @@ export * from './components/buttons/Button/Button';
7
7
  export * from './components/buttons/ButtonLink/ButtonLink';
8
8
  export * from './components/buttons/ClipboardButton/ClipboardButton';
9
9
  export * from './components/buttons/CloseButton/CloseButton';
10
+ export * from './components/buttons/FilterButton/FilterButton';
10
11
  export * from './components/buttons/IconButton/IconButton';
11
12
  export * from './components/buttons/MenuButton/MenuButton';
12
13
  export * from './components/buttons/SegmentedButton/SegmentedButton';
@@ -14,31 +15,25 @@ export * from './components/buttons/SplitButton/SplitButton';
14
15
  export * from './components/buttons/SSOButton/SSOButton';
15
16
  export * from './components/buttons/UtilityButton/UtilityButton';
16
17
  export * from './components/Callout/Callout';
18
+ export * from './components/cards/ActionCard/ActionCard';
17
19
  export * from './components/cards/Card/Card';
18
- export * from './components/cards/CardHeading/CardHeading';
19
- export * from './components/cards/CardSelectGroup/CardSelectGroup';
20
- export * from './components/cards/EmptyStateCard/EmptyStateCard';
21
- export * from './components/cards/LinksCard/LinksCard';
22
- export * from './components/cards/NewSiteCard/NewSiteCard';
23
- export * from './components/cards/PaymentCard/PaymentCard';
24
- export * from './components/cards/PricingCard/PricingCard';
25
- export * from './components/cards/SiteCard/SiteCard';
20
+ export * from './components/cards/CardSelect/CardSelect';
21
+ export * from './components/charts/BarChart/BarChart';
22
+ export * from './components/charts/LineChart/LineChart';
23
+ export * from './components/charts/PieChart/PieChart';
24
+ export * from './components/charts/ProportionBar/ProportionBar';
25
+ export * from './components/charts/shared/types';
26
26
  export * from './components/CodeBlock/CodeBlock';
27
27
  export * from './components/ComparisonList/ComparisonList';
28
- export * from './components/CTALink/CTALink';
29
- export * from './components/CTASlice/CTASlice';
30
- export * from './components/DashboardStat/DashboardStat';
28
+ export * from './components/Dropdown/Dropdown';
31
29
  export * from './components/empty-states/CompactEmptyState/CompactEmptyState';
32
30
  export * from './components/empty-states/HorizontalEmptyState/HorizontalEmptyState';
33
31
  export * from './components/empty-states/VerticalEmptyState/VerticalEmptyState';
34
32
  export * from './components/FileDiff/FileDiff';
35
- export * from './components/FlowSteps/FlowSteps';
36
- export * from './components/footer/FooterHeading/FooterHeading';
37
- export * from './components/footer/FooterLinks/FooterLinks';
38
- export * from './components/footer/SiteFooter/SiteFooter';
39
33
  export * from './components/icons/Icon/Icon';
40
34
  export * from './components/icons/PaymentIcon/PaymentIcon';
41
35
  export * from './components/icons/PlatformIcon/PlatformIcon';
36
+ export * from './components/IdentityBlock/IdentityBlock';
42
37
  export * from './components/inputs/Checkbox/Checkbox';
43
38
  export * from './components/inputs/CheckboxFieldset/CheckboxFieldset';
44
39
  export * from './components/inputs/CheckboxGroup/CheckboxGroup';
@@ -53,50 +48,58 @@ export * from './components/inputs/Switch/Switch';
53
48
  export * from './components/inputs/TagsInput/TagsInput';
54
49
  export * from './components/inputs/Textarea/Textarea';
55
50
  export * from './components/inputs/TextInput/TextInput';
56
- export * from './components/LinkNewWindow/LinkNewWindow';
51
+ export * from './components/inputs/Timepicker/Timepicker';
52
+ export * from './components/links/CTALink/CTALink';
53
+ export * from './components/links/LinkNewWindow/LinkNewWindow';
54
+ export * from './components/links/Skiplink/Skiplink';
57
55
  export * from './components/loading-indicators/Skeleton/Skeleton';
58
56
  export * from './components/loading-indicators/Spinner/Spinner';
59
- export * from './components/Modal/Modal';
57
+ export * from './components/media/Picture/Picture';
58
+ export * from './components/media/VideoEmbed/VideoEmbed';
60
59
  export * from './components/navigation/Breadcrumb/Breadcrumb';
61
60
  export * from './components/navigation/ButtonNav/ButtonNav';
62
- export * from './components/navigation/DashboardNav/DashboardNav';
63
- export * from './components/navigation/DashboardNav/DashboardNavItem';
64
- export * from './components/navigation/DashboardSearch/DashboardSearch';
65
61
  export * from './components/navigation/DropdownMenu/DropdownMenu';
66
62
  export * from './components/navigation/Navbar/Navbar';
67
- export * from './components/navigation/NavMenu/NavMenu';
68
63
  export * from './components/navigation/SideNav/SideNav';
69
- export * from './components/navigation/SideNavCompact/SideNavCompact';
70
64
  export * from './components/navigation/SideNavGlobal/SideNavGlobal';
71
65
  export * from './components/navigation/SideNavGlobal/SideNavGlobalItem';
66
+ export * from './components/navigation/SiteMenu/SiteMenu';
72
67
  export * from './components/navigation/TabMenu/TabMenu';
68
+ export * from './components/navigation/TreeNav/TreeNav';
73
69
  export * from './components/navigation/UserMenu/UserMenu';
74
70
  export * from './components/navigation/WorkspaceSelector/WorkspaceSelector';
75
71
  export * from './components/notifications/Banner/Banner';
76
72
  export * from './components/notifications/InlineMessage/InlineMessage';
77
- export * from './components/notifications/NotificationHubIcon/NotificationHubIcon';
78
- export * from './components/notifications/NotificationsPopover/NotificationsPopover';
79
73
  export * from './components/notifications/SectionMessage/SectionMessage';
80
74
  export * from './components/notifications/Toaster/Toast';
81
75
  export * from './components/notifications/Toaster/Toaster';
82
76
  export * from './components/notifications/Toaster/useToast';
83
- export * from './components/Pagination/Pagination';
77
+ export * from './components/overlays/Drawer/Drawer';
78
+ export * from './components/overlays/FullScreenOverlay/FullScreenOverlay';
79
+ export * from './components/overlays/Modal/Modal';
80
+ export * from './components/pagination/Pagination/Pagination';
81
+ export * from './components/pagination/PaginationChapter/PaginationChapter';
82
+ export * from './components/pagination/PaginationCompact/PaginationCompact';
84
83
  export * from './components/panels/ExpansionPanel/ExpansionPanel';
85
84
  export * from './components/panels/ExpansionPanelGroup/ExpansionPanelGroup';
86
85
  export * from './components/panels/Panel/Panel';
87
86
  export * from './components/panels/PanelList/PanelList';
88
87
  export * from './components/panels/PanelList/PanelRow';
88
+ export * from './components/panels/PanelStack/PanelStack';
89
89
  export * from './components/PantheonLogo/PantheonLogo';
90
- export * from './components/Picture/Picture';
91
90
  export * from './components/Popover/Popover';
92
91
  export * from './components/progress-indicators/ProgressBar/ProgressBar';
93
92
  export * from './components/progress-indicators/ProgressRing/ProgressRing';
94
- export * from './components/PullQuote/PullQuote';
95
- export * from './components/RefreshChecker/RefreshChecker';
96
- export * from './components/SiteDashboardHeading/SiteDashboardHeading';
97
- export * from './components/Skiplink/Skiplink';
98
- export * from './components/SocialLinks/SocialLinks';
93
+ export * from './components/ResultCount/ResultCount';
94
+ export * from './components/SiteFooter/SiteFooter';
95
+ export * from './components/SiteSearch/SiteSearch';
96
+ export * from './components/SortableList/SortableList';
97
+ export * from './components/SortableList/SortableListHeader';
98
+ export * from './components/SortableList/SortableRow';
99
+ export * from './components/SortableList/types';
100
+ export * from './components/StatusChecker/StatusChecker';
99
101
  export * from './components/StatusIndicator/StatusIndicator';
102
+ export * from './components/steppers/StepList/StepList';
100
103
  export * from './components/steppers/Stepper/Stepper';
101
104
  export * from './components/steppers/VerticalStepper/VerticalStepper';
102
105
  export * from './components/Table/Table';
@@ -104,30 +107,30 @@ export * from './components/TableOfContents/TableOfContents';
104
107
  export * from './components/Tabs/Tabs';
105
108
  export * from './components/Tag/Tag';
106
109
  export * from './components/ThemeSwitcher/ThemeSwitcher';
107
- export * from './components/tiles/AvatarTileList/AvatarTileList';
108
- export * from './components/tiles/Tile/Tile';
109
- export * from './components/tiles/TileGrid/TileGrid';
110
110
  export * from './components/Tooltip/Tooltip';
111
- export * from './components/VideoEmbed/VideoEmbed';
111
+ export * from './components/UtilityBar/UtilityBar';
112
112
  export * from './libs/components/SiteOptionDisplay/SiteOptionDisplay';
113
113
  export * from './layouts/AppLayout/AppLayout';
114
- export * from './layouts/Container/Container';
115
- export * from './layouts/DashboardGlobal/DashboardGlobal';
116
- export * from './layouts/DashboardInner/DashboardInner';
117
114
  export * from './layouts/DocsLayout/DocsLayout';
118
- export * from './layouts/FlexContainer/FlexContainer';
119
- export * from './layouts/GlobalWrapper/GlobalWrapper';
120
115
  export * from './layouts/SidebarLayout/SidebarLayout';
121
116
  export * from './layouts/StepperLayout/StepperLayout';
122
117
  export * from './layouts/ThreeItemLayout/ThreeItemLayout';
123
118
  export * from './layouts/TwoItemLayout/TwoItemLayout';
119
+ export * from './utilities/Container/Container';
120
+ export * from './utilities/FlexContainer/FlexContainer';
121
+ export * from './utilities/GlobalWrapper/GlobalWrapper';
124
122
  export * from './libs/types/custom-types';
125
123
  export * from './libs/types/input-types';
126
124
  export * from './libs/types/layout-types';
127
125
  export * from './libs/types/navigation-types';
128
- export * from './utilities/context-providers/ResponsiveContext/ResponsiveContext';
126
+ export * from './utilities/context-providers/ThemeContext/ThemeContext';
127
+ export * from './utilities/grid/Grid';
128
+ export * from './utilities/grid/GridItem';
129
129
  export * from './utilities/hooks/useBreakpoint/useBreakpoint';
130
130
  export * from './utilities/hooks/useClipboard/useClipboard';
131
+ export * from './utilities/hooks/useDropdown';
132
+ export * from './utilities/hooks/useIsMobile/useIsMobile';
133
+ export * from './utilities/hooks/useKeyboardShortcut/useKeyboardShortcut';
131
134
  export * from './utilities/hooks/useKeyPress/useKeyPress';
132
135
  export * from './utilities/hooks/useMediaQuery/useMediaQuery';
133
136
  export * from './utilities/hooks/useWindowWidth/useWindowWidth';
@@ -1,12 +1,21 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
- import { ContainerWidth } from '../../libs/types/custom-types';
2
+ import { DrawerProps } from '../../components/overlays/Drawer/Drawer';
3
3
  import './app-layout.css';
4
4
  /**
5
5
  * Prop types for AppLayout
6
6
  */
7
- interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
7
+ export interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
8
8
  /**
9
- * Children to render in the layout.
9
+ * Children to render in the layout, assigned to named slots:
10
+ * - `header` — full-width region above the sidebar and main content (e.g. a Navbar).
11
+ * - `footer` — region below the main content, aligned with it (e.g. a SiteFooter);
12
+ * the sidebar spans the full height alongside the main + footer column.
13
+ * - `identity` — top of the sidebar (e.g. a workspace/account block).
14
+ * - `content-top` — sidebar content above the navigation.
15
+ * - `navigation` — the sidebar's primary navigation (e.g. SideNavGlobal).
16
+ * - `content-bottom` — sidebar content pinned to the bottom.
17
+ * - `sidebar` — legacy single-slot sidebar body (pre-V2).
18
+ * - unslotted children render as the main content.
10
19
  */
11
20
  children: ReactNode;
12
21
  /**
@@ -14,39 +23,89 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
14
23
  */
15
24
  className?: string;
16
25
  /**
17
- * PDS container width.
26
+ * Content for the left-side Drawer (e.g., workspace switcher).
27
+ * Only rendered when `hasDrawerToggle` is true.
18
28
  */
19
- containerWidth?: ContainerWidth;
29
+ drawerContent?: ReactNode;
30
+ /**
31
+ * Pass-through props for the Drawer component.
32
+ */
33
+ drawerProps?: Partial<DrawerProps>;
34
+ /**
35
+ * Show a toggle button in the sidebar header that opens a Drawer overlay.
36
+ */
37
+ hasDrawerToggle?: boolean;
20
38
  /**
21
39
  * Is the sidebar able to be collapsed and expanded by the user?
22
40
  * If false or not provided, the sidebar will always be expanded.
23
41
  */
24
42
  hasSidebarToggle?: boolean;
43
+ /**
44
+ * Controlled open state for the drawer.
45
+ */
46
+ isDrawerOpen?: boolean;
25
47
  /**
26
48
  * Is the sidebar collapsed?
27
49
  * This is only relevant if `hasSidebarToggle` is true.
28
50
  */
29
51
  isSidebarCollapsed?: boolean;
30
52
  /**
31
- * Labels for translatable strings.
53
+ * Enable keyboard shortcuts to toggle the sidebar.
54
+ * `[` collapses, `]` expands. Only active when `hasSidebarToggle` is true.
55
+ */
56
+ keyboardShortcuts?: boolean;
57
+ /**
58
+ * Labels for translatable strings. Each key is optional and falls back to a
59
+ * default, so you can override only the labels you need.
32
60
  */
33
61
  labels?: {
34
- collapseSidebar: string;
35
- expandSidebar: string;
62
+ collapseSidebar?: string;
63
+ drawerToggle?: string;
64
+ expandSidebar?: string;
65
+ skipToContent?: string;
36
66
  };
67
+ /**
68
+ * Background color for the main content area. Use a PDS CSS custom property
69
+ * (e.g. 'var(--pds-color-surface-default-secondary)') so dark mode works automatically.
70
+ */
71
+ mainBackground?: string;
37
72
  /**
38
73
  * Element type for the main content area.
39
74
  */
40
75
  mainContentElement?: 'div' | 'main';
76
+ /**
77
+ * Maximum width of the main content (and the footer content, which stays
78
+ * aligned with it). The content is centered within the region once it grows
79
+ * past this width, while the region itself — background, border, padding —
80
+ * remains full-bleed.
81
+ *
82
+ * A number is treated as pixels; a string is used as-is (e.g. '90rem').
83
+ * Pass `null` to remove the cap so content fills the full region width.
84
+ * Defaults to `1600` (the recommended value).
85
+ */
86
+ mainContentMaxWidth?: number | string | null;
41
87
  /**
42
88
  * Additional props for the main content element.
43
89
  */
44
90
  mainContentProps?: ComponentPropsWithoutRef<'div'> | ComponentPropsWithoutRef<'main'>;
91
+ /**
92
+ * Callback when the drawer toggle button is clicked.
93
+ */
94
+ onDrawerToggle?: () => void;
45
95
  /**
46
96
  * Callback function to handle sidebar toggle.
47
97
  * If not provided, the sidebar will use an internal function to manage collapsed state.
48
98
  */
49
99
  onSidebarToggle?: () => void;
100
+ /**
101
+ * When true, the sidebar stays fixed and only the main content area scrolls.
102
+ */
103
+ scrollableContent?: boolean;
104
+ /**
105
+ * Background color for the sidebar. Use a PDS CSS custom property
106
+ * (e.g. 'var(--pds-color-surface-default)') so dark mode works automatically.
107
+ */
108
+ sidebarBackground?: string;
50
109
  /**
51
110
  * Width of the sidebar when collapsed in rems. This should not need to be modified.
52
111
  */
@@ -56,6 +115,11 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
56
115
  * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
57
116
  */
58
117
  sidebarExpandedWidth?: string;
118
+ /**
119
+ * Maximum width of the sidebar when expanded in rems.
120
+ * Prevents the sidebar from growing too wide on large screens.
121
+ */
122
+ sidebarExpandedWidthMax?: number;
59
123
  /**
60
124
  * Minimum width of the sidebar when expanded in rems.
61
125
  * This is also the min-width of the sidebar when it is not collapsable (hasSidebarToggle is false).
@@ -65,9 +129,20 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
65
129
  * Additional props for the sidebar `<div>` element.
66
130
  */
67
131
  sidebarProps?: ComponentPropsWithoutRef<'div'>;
132
+ /**
133
+ * Distance from the top of the viewport to the top of the layout, used to
134
+ * size the layout height (`100dvh - topOffset`). Set this when you render
135
+ * chrome above the layout (e.g. a banner) whose height the layout must
136
+ * account for — pass the measured height reactively.
137
+ *
138
+ * A number is treated as pixels; a string is used as-is (e.g. '3rem').
139
+ * When provided, this value is used verbatim and the built-in auto-measure
140
+ * is disabled. When omitted, the layout measures its own offset from the
141
+ * document top and keeps it updated.
142
+ */
143
+ topOffset?: number | string;
68
144
  }
69
145
  /**
70
146
  * AppLayout UI component
71
147
  */
72
- export declare const AppLayout: ({ children, className, containerWidth, hasSidebarToggle, isSidebarCollapsed, labels, mainContentElement, mainContentProps, onSidebarToggle, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, sidebarProps, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
73
- export {};
148
+ export declare const AppLayout: ({ children, className, drawerContent, drawerProps, hasDrawerToggle, hasSidebarToggle, isDrawerOpen, isSidebarCollapsed, keyboardShortcuts, labels, mainBackground, mainContentElement, mainContentMaxWidth, mainContentProps, onDrawerToggle, onSidebarToggle, scrollableContent, sidebarBackground, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMax, sidebarExpandedWidthMin, sidebarProps, topOffset, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
@@ -13,18 +13,20 @@ interface DocsLayoutProps extends ComponentPropsWithoutRef<'div'> {
13
13
  */
14
14
  className?: string;
15
15
  /**
16
- * Minimum width of the sidebar when expanded in rems.
17
- * This is also the min-width of the sidebar when it is not collapsable (hasSidebarToggle is false).
16
+ * Width of the sidebar as a percentage.
18
17
  */
19
- sidebarMinWidth?: number;
18
+ sidebarWidth?: string;
20
19
  /**
21
- * Width of the sidebar when expanded as a percentage.
22
- * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
20
+ * Maximum width of the sidebar in rems. Prevents the sidebar from growing too wide on large screens.
23
21
  */
24
- sidebarWidth?: string;
22
+ sidebarWidthMax?: number;
23
+ /**
24
+ * Minimum width of the sidebar in rems. Ensures the sidebar remains usable on medium-sized screens.
25
+ */
26
+ sidebarWidthMin?: number;
25
27
  }
26
28
  /**
27
29
  * DocsLayout UI component
28
30
  */
29
- export declare const DocsLayout: ({ children, className, sidebarMinWidth, sidebarWidth, ...props }: DocsLayoutProps) => import("react/jsx-runtime").JSX.Element;
31
+ export declare const DocsLayout: ({ children, className, sidebarWidth, sidebarWidthMax, sidebarWidthMin, style, ...props }: DocsLayoutProps) => import("react/jsx-runtime").JSX.Element;
30
32
  export {};
@@ -1,5 +1,6 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
- import { GridGapOptions } from '../../libs/types/layout-types';
2
+ import { GapScale } from '../../libs/types/layout-types';
3
+ import './sidebar-layout.css';
3
4
  /**
4
5
  * Prop types for SidebarLayout
5
6
  */
@@ -14,9 +15,10 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
14
15
  */
15
16
  className?: string;
16
17
  /**
17
- * Gap between grid items
18
+ * Gap between the main content and sidebar, from the numbered spacing scale.
19
+ * Defaults to `xl`.
18
20
  */
19
- gridGap?: GridGapOptions;
21
+ gridGap?: GapScale;
20
22
  /**
21
23
  * Sidebar location.
22
24
  */
@@ -26,12 +28,20 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
26
28
  */
27
29
  sidebarMobileLocation?: 'before' | 'after';
28
30
  /**
29
- * Sidebar width.
31
+ * Width of the sidebar as a percentage (e.g. `'33%'`).
30
32
  */
31
- sidebarWidth?: 'narrow' | 'standard' | 'wide';
33
+ sidebarWidth?: string;
34
+ /**
35
+ * Maximum width of the sidebar in rems. Prevents the sidebar from growing too wide on large screens.
36
+ */
37
+ sidebarWidthMax?: number;
38
+ /**
39
+ * Minimum width of the sidebar in rems. Ensures the sidebar remains usable on medium-sized screens.
40
+ */
41
+ sidebarWidthMin?: number;
32
42
  }
33
43
  /**
34
44
  * SidebarLayout UI component
35
45
  */
36
- export declare const SidebarLayout: ({ children, className, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
46
+ export declare const SidebarLayout: ({ children, className, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, sidebarWidthMax, sidebarWidthMin, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
37
47
  export {};
@@ -12,9 +12,21 @@ interface StepperLayoutProps {
12
12
  * Additional class names
13
13
  */
14
14
  className?: string;
15
+ /**
16
+ * Width of the form content. `standard` insets the form to a comfortable
17
+ * reading width for traditional form fields; `full` lets the form content
18
+ * span the full stepper container width. Use `full` only for non-form
19
+ * content such as a group of cards or other visual treatment prescribed by
20
+ * design.
21
+ */
22
+ formWidth?: 'standard' | 'full';
23
+ /**
24
+ * Wrap the entire experience (stepper, form, and buttons) in a Panel.
25
+ */
26
+ hasPanel?: boolean;
15
27
  }
16
28
  /**
17
29
  * StepperLayout UI component
18
30
  */
19
- export declare const StepperLayout: ({ children, className, ...props }: StepperLayoutProps) => import("react/jsx-runtime").JSX.Element;
31
+ export declare const StepperLayout: ({ children, className, formWidth, hasPanel, ...props }: StepperLayoutProps) => import("react/jsx-runtime").JSX.Element;
20
32
  export {};
@@ -1,5 +1,5 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
- import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
2
+ import { GapScale, VerticalAlignOptions } from '../../libs/types/layout-types';
3
3
  import '../../utilities/grid/grid.css';
4
4
  import './three-item-layout.css';
5
5
  /**
@@ -15,9 +15,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
15
15
  */
16
16
  className?: string;
17
17
  /**
18
- * Width of gap between items.
18
+ * Gap between items, from the numbered spacing scale. Defaults to `xl`.
19
19
  */
20
- gridGap?: GridGapOptions;
20
+ gridGap?: GapScale;
21
21
  /**
22
22
  * Vertical alignment of items.
23
23
  */
@@ -1,5 +1,5 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
- import { GridGapOptions, VerticalAlignOptions } from '../../libs/types/layout-types';
2
+ import { GapScale, VerticalAlignOptions } from '../../libs/types/layout-types';
3
3
  import '../../utilities/grid/grid.css';
4
4
  import './two-item-layout.css';
5
5
  /**
@@ -15,9 +15,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
15
15
  */
16
16
  className?: string;
17
17
  /**
18
- * Width of gap between items.
18
+ * Gap between items, from the numbered spacing scale. Defaults to `xl`.
19
19
  */
20
- gridGap?: GridGapOptions;
20
+ gridGap?: GapScale;
21
21
  /**
22
22
  * Layout variant for column widths.
23
23
  */
@@ -0,0 +1,27 @@
1
+ import { ReactNode } from 'react';
2
+ import './nav-accordion.css';
3
+ interface NavAccordionProps {
4
+ /**
5
+ * Expandable content shown when open.
6
+ */
7
+ children: ReactNode;
8
+ /**
9
+ * Additional class names.
10
+ */
11
+ className?: string;
12
+ /**
13
+ * Disables the toggle button.
14
+ */
15
+ disabled?: boolean;
16
+ /**
17
+ * Content of the toggle button — any ReactNode.
18
+ */
19
+ label: ReactNode;
20
+ }
21
+ /**
22
+ * Internal accordion component for the mobile navbar panel.
23
+ * Renders a toggle button with a rotating chevron and expandable content.
24
+ * Used by MenuButton, UserMenu, and WorkspaceSelector.
25
+ */
26
+ export declare const NavAccordion: ({ children, className, disabled, label, }: NavAccordionProps) => import("react/jsx-runtime").JSX.Element;
27
+ export {};
@@ -0,0 +1,15 @@
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ import { StatusType } from '../../types/custom-types';
3
+ import './status-dot.css';
4
+ export type StatusDotType = StatusType | 'neutral';
5
+ export interface StatusDotProps extends ComponentPropsWithoutRef<'span'> {
6
+ /**
7
+ * Additional class names
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Status type — determines the dot color
12
+ */
13
+ status: StatusDotType;
14
+ }
15
+ export declare const StatusDot: ({ className, status, ...props }: StatusDotProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
- export function createRandomID(): string;
2
1
  export function getDescendants(node: any, collect: any): any;
3
2
  export function initiateSlots(children: any): {
4
3
  __unslotted: any[];
5
4
  };
5
+ export function hasRenderableSlotContent(slotElements: any): boolean;
6
6
  export function mergeClasses(styles: any): any;
7
7
  export function isValidImageSrc(uri: any): boolean;
@@ -1,9 +1,9 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { PDSIcon } from '../../components/icons/Icon/Icon';
3
3
  export type ButtonDisplayType = 'label-only' | 'icon-start' | 'icon-end';
4
- export type ButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';
4
+ export type ButtonSize = 'xs' | 's' | 'm' | 'l';
5
5
  export type ButtonType = 'button' | 'submit' | 'reset';
6
- export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'accent' | 'reverse' | 'reverse-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
6
+ export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'highlight' | 'reverse' | 'reverse-secondary' | 'critical' | 'critical-secondary' | 'link';
7
7
  export type ContainerWidth = 'narrow' | 'standard' | 'wide' | 'x-wide' | 'full';
8
8
  export type DataContext = 'product' | 'marketing';
9
9
  export type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | 'table-caption' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'list-item' | 'inherit' | 'initial' | 'revert' | 'unset';
@@ -28,7 +28,7 @@ export type HeadingItemType = {
28
28
  };
29
29
  export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
30
30
  export type HeadingLevelCommon = Exclude<HeadingLevel, 'h1' | 'h5' | 'h6'>;
31
- export type IconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
31
+ export type IconSize = 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
32
32
  export type LinkItemType = {
33
33
  /**
34
34
  * Screen reader label for critical items. Only used when isCritical is true.
@@ -46,6 +46,10 @@ export type LinkItemType = {
46
46
  * Optional icon for this item. Choose from available icons in the Icon component.
47
47
  */
48
48
  iconName?: PDSIcon;
49
+ /**
50
+ * Size of the icon. Defaults to 's'.
51
+ */
52
+ iconSize?: IconSize;
49
53
  /**
50
54
  * Is this a critical action item?
51
55
  */
@@ -85,6 +89,10 @@ export type MenuItemType = {
85
89
  * Optional icon for this item. Choose from available icons in the Icon component.
86
90
  */
87
91
  iconName?: PDSIcon;
92
+ /**
93
+ * Size of the icon. Defaults to 's'.
94
+ */
95
+ iconSize?: IconSize;
88
96
  /**
89
97
  * Optional ID value for this item.
90
98
  */
@@ -135,8 +143,6 @@ export declare const isSeparatorItemType: (item: MenuItem) => item is SeparatorI
135
143
  export declare const isHeadingItemType: (item: MenuItem) => item is HeadingItemType;
136
144
  export declare const isLinkItemType: (item: MenuItem) => item is LinkItemType;
137
145
  export declare const isNodeItemType: (item: MenuItem) => item is NodeItemType;
138
- export type SitePlanLevel = 'sandbox' | 'basic' | 'performance-small' | 'performance-medium' | 'performance-large' | 'performance-xl' | 'performance-2xl' | 'elite' | 'pro' | 'business' | 'flagship-performance';
139
- export declare const SitePlanLevelLabel: Record<SitePlanLevel, string>;
140
146
  export type SiteStatus = 'active' | 'frozen' | 'restricted';
141
147
  export type SiteType = 'drupal' | 'wordpress' | 'gatsby' | 'nextjs';
142
148
  export declare const SiteTypeLabel: Record<SiteType, string>;
@@ -1,2 +1,5 @@
1
- export type GridGapOptions = 'wide' | 'standard' | 'narrow';
1
+ export type GapScale = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
2
+ export type PaddingScale = 'none' | 'condensed' | 'standard' | 'spacious';
3
+ export type CardPaddingScale = Exclude<PaddingScale, 'none'>;
4
+ export type CardBackground = 'default' | 'secondary' | 'transparent';
2
5
  export type VerticalAlignOptions = 'start' | 'center' | 'end';
@@ -4,6 +4,18 @@ export type NavigationItem = {
4
4
  * A boolean indicating whether the item is the active item.
5
5
  */
6
6
  isActive?: boolean | null;
7
+ /**
8
+ * Renders a non-interactive section heading instead of a navigation item. Requires `label`. When true, all other fields are ignored, and the heading is hidden when the sidebar is collapsed.
9
+ */
10
+ isHeading?: boolean;
11
+ /**
12
+ * Renders a visual separator instead of a navigation item. When true, all other fields are ignored.
13
+ */
14
+ isSeparator?: boolean;
15
+ /**
16
+ * The text of a section heading. Only used when `isHeading` is true.
17
+ */
18
+ label?: string;
7
19
  /**
8
20
  * Link content — a fully-formed link element using the router of your choice. If a string is provided instead, the item will be rendered as a link that navigates to the first child item.
9
21
  */
@@ -18,6 +30,10 @@ export type FlattenedNavigationItem = {
18
30
  * A boolean indicating whether the item is the active item.
19
31
  */
20
32
  isActive?: boolean | null;
33
+ /**
34
+ * Renders a visual separator instead of a navigation item.
35
+ */
36
+ isSeparator?: boolean;
21
37
  /**
22
38
  * Nesting level of the item.
23
39
  */
@@ -31,7 +47,7 @@ export interface NavMenuItem {
31
47
  id?: string;
32
48
  isActive?: boolean | null;
33
49
  isSeparator?: boolean;
34
- label: string;
50
+ label?: string;
35
51
  linkContent?: ReactElement;
36
52
  links?: NavMenuItem[];
37
53
  }
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
2
+ <path d="M369.5 113l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zm0 192l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 305c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
2
+ <path d="M209.5 47c-9.4-9.4-24.6-9.4-33.9 0L15.5 207c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L209.5 47zm160 352l-160-160c-9.4-9.4-24.6-9.4-33.9 0L15.5 399c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9z"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
2
+ <path d="M0 88C0 74.7 10.7 64 24 64l400 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 112C10.7 112 0 101.3 0 88zM64 256c0-13.3 10.7-24 24-24l400 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L88 280c-13.3 0-24-10.7-24-24zM448 424c0 13.3-10.7 24-24 24L24 448c-13.3 0-24-10.7-24-24s10.7-24 24-24l400 0c13.3 0 24 10.7 24 24z"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
2
+ <path d="M0 64C0 28.7 28.7 0 64 0L320 0c35.3 0 64 28.7 64 64l0 417.1c0 25.6-28.5 40.8-49.8 26.6L192 412.8 49.8 507.7C28.5 521.9 0 506.6 0 481.1L0 64zM64 48c-8.8 0-16 7.2-16 16l0 387.2 117.4-78.2c16.1-10.7 37.1-10.7 53.2 0L336 451.2 336 64c0-8.8-7.2-16-16-16L64 48z"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
2
+ <path d="M64 0C28.7 0 0 28.7 0 64L0 480c0 11.5 6.2 22.2 16.2 27.8s22.3 5.5 32.2-.4L192 421.3 335.5 507.4c9.9 5.9 22.2 6.1 32.2 .4S384 491.5 384 480l0-416c0-35.3-28.7-64-64-64L64 0z"/>
3
+ </svg>