@kerfjs/ui 5.0.0-beta.23 → 5.0.0-beta.25

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 (288) hide show
  1. package/README.md +45 -23
  2. package/ai/application-ui-diagnostic-ids-v1.json +3 -0
  3. package/ai/application-ui-profile.defaults.json +1 -1
  4. package/ai/compile-time-contracts-v1.json +5 -12
  5. package/ai/component-catalog-v2-overrides.json +12 -49
  6. package/ai/component-catalog-v2.d.ts +1 -0
  7. package/ai/component-catalog-v2.json +458 -123
  8. package/ai/component-catalog-v2.schema.json +2 -1
  9. package/ai/component-catalog.json +658 -195
  10. package/ai/public-api-signatures-v1.md +160 -80
  11. package/ai/skill.md +22 -22
  12. package/ai/webawesome-jsx-signatures-v1.md +2 -1
  13. package/analyzer/cli.mjs +5 -2
  14. package/analyzer/index.d.mts +1 -0
  15. package/analyzer/index.mjs +117 -10
  16. package/dist/app-tab.d.ts +10 -2
  17. package/dist/app-tab.js +1 -1
  18. package/dist/browser/list-action-row.js +1 -0
  19. package/dist/browser/list-item.js +1 -0
  20. package/dist/browser/list.js +3 -0
  21. package/dist/browser/surface-scaffold.js +3 -0
  22. package/dist/catalog.d.ts +8 -4
  23. package/dist/catalog.js +21 -11
  24. package/dist/catalog.js.map +1 -1
  25. package/dist/{chunk-ELSJX4W7.js → chunk-4EF2CMYS.js} +25 -6
  26. package/dist/chunk-4EF2CMYS.js.map +1 -0
  27. package/dist/{chunk-OHU6CI22.js → chunk-B3A3IVO5.js} +2 -2
  28. package/dist/{chunk-OHU6CI22.js.map → chunk-B3A3IVO5.js.map} +1 -1
  29. package/dist/{chunk-K57KRAOV.js → chunk-FRVS5RFM.js} +24 -6
  30. package/dist/chunk-FRVS5RFM.js.map +1 -0
  31. package/dist/{chunk-DSNIYOZ3.js → chunk-GWEAPEZI.js} +16 -3
  32. package/dist/chunk-GWEAPEZI.js.map +1 -0
  33. package/dist/chunk-HP2B2L26.js +102 -0
  34. package/dist/chunk-HP2B2L26.js.map +1 -0
  35. package/dist/{chunk-OZWU5ZPZ.js → chunk-IJBSZ4NX.js} +2 -2
  36. package/dist/{chunk-OZWU5ZPZ.js.map → chunk-IJBSZ4NX.js.map} +1 -1
  37. package/dist/chunk-J5BFYY7Q.js +35 -0
  38. package/dist/chunk-J5BFYY7Q.js.map +1 -0
  39. package/dist/{chunk-GP5DP5DL.js → chunk-JFGXQBIP.js} +85 -24
  40. package/dist/chunk-JFGXQBIP.js.map +1 -0
  41. package/dist/{chunk-QQFJMRIB.js → chunk-KWWR5VMS.js} +2 -2
  42. package/dist/{chunk-QQFJMRIB.js.map → chunk-KWWR5VMS.js.map} +1 -1
  43. package/dist/chunk-OBLTAKSX.js +43 -0
  44. package/dist/chunk-OBLTAKSX.js.map +1 -0
  45. package/dist/{chunk-PIDTEQ3U.js → chunk-OT6RPYAP.js} +17 -3
  46. package/dist/chunk-OT6RPYAP.js.map +1 -0
  47. package/dist/{chunk-W7YD6E4N.js → chunk-R7ZWUN64.js} +2 -2
  48. package/dist/{chunk-W7YD6E4N.js.map → chunk-R7ZWUN64.js.map} +1 -1
  49. package/dist/{chunk-PZQVSDLH.js → chunk-RKVQEH4J.js} +1 -1
  50. package/dist/chunk-RKVQEH4J.js.map +1 -0
  51. package/dist/{chunk-7L6EHUMV.js → chunk-SYDMYBPG.js} +3 -3
  52. package/dist/chunk-SYDMYBPG.js.map +1 -0
  53. package/dist/{chunk-W4CXQYSG.js → chunk-TB6DY7H5.js} +3 -1
  54. package/dist/chunk-TB6DY7H5.js.map +1 -0
  55. package/dist/{chunk-AASLYRGE.js → chunk-UKKSMZYT.js} +18 -7
  56. package/dist/chunk-UKKSMZYT.js.map +1 -0
  57. package/dist/{chunk-BBRXX6PF.js → chunk-VCE4MPVE.js} +26 -4
  58. package/dist/chunk-VCE4MPVE.js.map +1 -0
  59. package/dist/{chunk-VLYV65LK.js → chunk-W5L2JSBY.js} +5 -3
  60. package/dist/chunk-W5L2JSBY.js.map +1 -0
  61. package/dist/{chunk-5VTB2BKP.js → chunk-WNWD54GR.js} +16 -2
  62. package/dist/chunk-WNWD54GR.js.map +1 -0
  63. package/dist/{chunk-M7JBER5U.js → chunk-X2U3QJCJ.js} +8 -2
  64. package/dist/chunk-X2U3QJCJ.js.map +1 -0
  65. package/dist/{chunk-DPDBVKNA.js → chunk-YMKH5XTF.js} +5 -3
  66. package/dist/chunk-YMKH5XTF.js.map +1 -0
  67. package/dist/collapsible-panel.d.ts +9 -1
  68. package/dist/collapsible-panel.js +36 -15
  69. package/dist/collapsible-panel.js.map +1 -1
  70. package/dist/divider-sides-267FA7sY.d.ts +4 -0
  71. package/dist/index.d.ts +5 -3
  72. package/dist/index.js +20 -19
  73. package/dist/list-action-row.d.ts +11 -1
  74. package/dist/list-action-row.js +2 -1
  75. package/dist/list-header.d.ts +15 -2
  76. package/dist/list-header.js +1 -1
  77. package/dist/list-item.d.ts +12 -1
  78. package/dist/list-item.js +2 -1
  79. package/dist/list.d.ts +19 -0
  80. package/dist/list.js +3 -0
  81. package/dist/list.js.map +1 -0
  82. package/dist/nav-stack.js +1 -1
  83. package/dist/resizable-region.d.ts +19 -2
  84. package/dist/resizable-region.js +1 -1
  85. package/dist/segmented-control.js +1 -1
  86. package/dist/select.d.ts +12 -1
  87. package/dist/select.js +1 -1
  88. package/dist/skeleton.d.ts +1 -1
  89. package/dist/skeleton.js +1 -1
  90. package/dist/split-view.js +2 -2
  91. package/dist/state-banner.d.ts +4 -2
  92. package/dist/state-banner.js +1 -1
  93. package/dist/styles/app-tab.css +26 -0
  94. package/dist/styles/catalog.css +8 -2
  95. package/dist/styles/collapsible-panel.css +66 -4
  96. package/dist/styles/list-action-row.css +64 -0
  97. package/dist/styles/list-header.css +32 -0
  98. package/dist/styles/list-item.css +45 -6
  99. package/dist/styles/list.css +43 -0
  100. package/dist/styles/resizable-region.css +132 -0
  101. package/dist/styles/select.css +68 -0
  102. package/dist/styles/state-banner.css +32 -1
  103. package/dist/styles/styles.css +2 -1
  104. package/dist/styles/sunken-panel.css +4 -0
  105. package/dist/styles/surface-scaffold.css +51 -0
  106. package/dist/styles/tab-bar.css +24 -0
  107. package/dist/styles/toolbar-control-group.css +73 -1
  108. package/dist/styles/toolbar-text.css +1 -1
  109. package/dist/styles/toolbar.css +38 -2
  110. package/dist/styles/webawesome.css +12 -0
  111. package/dist/styles/workbench.css +89 -0
  112. package/dist/sunken-panel.d.ts +5 -2
  113. package/dist/sunken-panel.js +1 -1
  114. package/dist/surface-scaffold.d.ts +25 -0
  115. package/dist/surface-scaffold.js +3 -0
  116. package/dist/surface-scaffold.js.map +1 -0
  117. package/dist/tab-bar.d.ts +11 -2
  118. package/dist/tab-bar.js +1 -1
  119. package/dist/toolbar-control-group.d.ts +16 -2
  120. package/dist/toolbar-control-group.js +1 -1
  121. package/dist/toolbar-text.js +1 -1
  122. package/dist/toolbar.d.ts +5 -3
  123. package/dist/toolbar.js +1 -1
  124. package/dist/value-table.js +1 -1
  125. package/dist/webawesome.d.ts +1 -0
  126. package/dist/wire-catalog.d.ts +4 -2
  127. package/dist/wire-catalog.js +95 -36
  128. package/dist/wire-catalog.js.map +1 -1
  129. package/dist/wire-resizable-regions.js +1 -1
  130. package/dist/wire-sidebar.d.ts +6 -1
  131. package/dist/wire-sidebar.js +27 -8
  132. package/dist/wire-sidebar.js.map +1 -1
  133. package/dist/wire-tab-bars.js +1 -1
  134. package/dist/wire-token-search-fields.d.ts +1 -1
  135. package/dist/wire-token-search-fields.js +1 -1
  136. package/dist/workbench.d.ts +8 -0
  137. package/dist/workbench.js +42 -0
  138. package/dist/workbench.js.map +1 -1
  139. package/docs/accessibility.md +67 -15
  140. package/docs/catalog.md +17 -12
  141. package/docs/collapsible-panel.md +7 -0
  142. package/docs/component-contract.md +19 -9
  143. package/docs/component-selection.md +65 -31
  144. package/docs/design/templates/empty-state/filtered-dark.svg +1 -1
  145. package/docs/design/templates/empty-state/filtered.svg +1 -1
  146. package/docs/design/templates/empty-state/with-action-dark.svg +1 -1
  147. package/docs/design/templates/empty-state/with-action.svg +1 -1
  148. package/docs/design/templates/empty-state-dark.svg +1 -7
  149. package/docs/design/templates/empty-state.svg +1 -7
  150. package/docs/design/templates/list/compact-dark.svg +1 -0
  151. package/docs/design/templates/list/compact.svg +1 -0
  152. package/docs/design/templates/list/stack-dark.svg +1 -0
  153. package/docs/design/templates/list/stack.svg +1 -0
  154. package/docs/design/templates/list-action-row/default-dark.svg +1 -1
  155. package/docs/design/templates/list-action-row/default.svg +1 -1
  156. package/docs/design/templates/list-action-row/selected-dark.svg +1 -1
  157. package/docs/design/templates/list-action-row/selected.svg +1 -1
  158. package/docs/design/templates/list-action-row-dark.svg +1 -7
  159. package/docs/design/templates/list-action-row.svg +1 -7
  160. package/docs/design/templates/list-dark.svg +1 -0
  161. package/docs/design/templates/list-header/action-dark.svg +1 -1
  162. package/docs/design/templates/list-header/action.svg +1 -1
  163. package/docs/design/templates/list-header/toggle-collapsed-dark.svg +1 -1
  164. package/docs/design/templates/list-header/toggle-collapsed.svg +1 -1
  165. package/docs/design/templates/list-header/toggle-expanded-dark.svg +1 -1
  166. package/docs/design/templates/list-header/toggle-expanded.svg +1 -1
  167. package/docs/design/templates/list-header-dark.svg +1 -11
  168. package/docs/design/templates/list-header.svg +1 -11
  169. package/docs/design/templates/list-item/default-dark.svg +1 -1
  170. package/docs/design/templates/list-item/default.svg +1 -1
  171. package/docs/design/templates/list-item/multiline-dark.svg +1 -1
  172. package/docs/design/templates/list-item/multiline.svg +1 -1
  173. package/docs/design/templates/list-item/selected-dark.svg +1 -1
  174. package/docs/design/templates/list-item/selected.svg +1 -1
  175. package/docs/design/templates/list-item/trailing-dark.svg +1 -1
  176. package/docs/design/templates/list-item/trailing.svg +1 -1
  177. package/docs/design/templates/list-item-dark.svg +1 -11
  178. package/docs/design/templates/list-item.svg +1 -11
  179. package/docs/design/templates/list.svg +1 -0
  180. package/docs/design/templates/segmented-control-dark.svg +1 -7
  181. package/docs/design/templates/segmented-control.svg +1 -7
  182. package/docs/design/templates/skeleton-dark.svg +1 -9
  183. package/docs/design/templates/skeleton.svg +1 -9
  184. package/docs/design/templates/state-banner/danger-dark.svg +1 -1
  185. package/docs/design/templates/state-banner/danger.svg +1 -1
  186. package/docs/design/templates/state-banner/info-badge-dark.svg +1 -0
  187. package/docs/design/templates/state-banner/info-badge.svg +1 -0
  188. package/docs/design/templates/state-banner/info-dark.svg +1 -1
  189. package/docs/design/templates/state-banner/info.svg +1 -1
  190. package/docs/design/templates/state-banner/success-dark.svg +1 -1
  191. package/docs/design/templates/state-banner/success.svg +1 -1
  192. package/docs/design/templates/state-banner/warning-dark.svg +1 -1
  193. package/docs/design/templates/state-banner/warning.svg +1 -1
  194. package/docs/design/templates/state-banner-dark.svg +1 -11
  195. package/docs/design/templates/state-banner.svg +1 -11
  196. package/docs/design/templates/tab-bar/workspace-tabs-dark.svg +1 -1
  197. package/docs/design/templates/tab-bar/workspace-tabs.svg +1 -1
  198. package/docs/design/templates/tab-bar-dark.svg +1 -5
  199. package/docs/design/templates/tab-bar.svg +1 -5
  200. package/docs/design/templates/token-search-field/empty-dark.svg +1 -1
  201. package/docs/design/templates/token-search-field/empty.svg +1 -1
  202. package/docs/design/templates/token-search-field/tokens-dark.svg +1 -1
  203. package/docs/design/templates/token-search-field/tokens.svg +1 -1
  204. package/docs/design/templates/token-search-field-dark.svg +1 -7
  205. package/docs/design/templates/token-search-field.svg +1 -7
  206. package/docs/design/templates/toolbar/title-and-actions-dark.svg +1 -1
  207. package/docs/design/templates/toolbar/title-and-actions.svg +1 -1
  208. package/docs/design/templates/toolbar-control-group/borderless-single-dark.svg +1 -1
  209. package/docs/design/templates/toolbar-control-group/borderless-single.svg +1 -1
  210. package/docs/design/templates/toolbar-control-group/icon-buttons-dark.svg +1 -1
  211. package/docs/design/templates/toolbar-control-group/icon-buttons.svg +1 -1
  212. package/docs/design/templates/toolbar-control-group/push-buttons-dark.svg +1 -1
  213. package/docs/design/templates/toolbar-control-group/push-buttons.svg +1 -1
  214. package/docs/design/templates/toolbar-control-group/with-text-dark.svg +1 -1
  215. package/docs/design/templates/toolbar-control-group/with-text.svg +1 -1
  216. package/docs/design/templates/toolbar-control-group-dark.svg +1 -11
  217. package/docs/design/templates/toolbar-control-group.svg +1 -11
  218. package/docs/design/templates/toolbar-dark.svg +1 -5
  219. package/docs/design/templates/toolbar-text-dark.svg +1 -9
  220. package/docs/design/templates/toolbar-text.svg +1 -9
  221. package/docs/design/templates/toolbar.svg +1 -5
  222. package/docs/design/templates/value-table/details-dark.svg +1 -1
  223. package/docs/design/templates/value-table/details.svg +1 -1
  224. package/docs/design/templates/value-table-dark.svg +1 -5
  225. package/docs/design/templates/value-table.svg +1 -5
  226. package/docs/design/templates.md +29 -20
  227. package/docs/examples/component-catalog-extension-v2.json +3 -6
  228. package/docs/examples/component-catalog-extension.json +1 -1
  229. package/docs/layout.md +7 -9
  230. package/docs/recipes.md +8 -7
  231. package/docs/sunken-panel.md +11 -1
  232. package/docs/surface-scaffold.md +17 -0
  233. package/docs/type-contracts.md +11 -10
  234. package/docs/ui-analyzer.md +19 -1
  235. package/docs/ui-doctor.md +7 -5
  236. package/docs/ux-demo.md +6 -3
  237. package/docs/webawesome-theme.md +4 -1
  238. package/docs/workbench.md +49 -2
  239. package/doctor/eslint-diagnostics.d.mts +16 -0
  240. package/doctor/eslint-diagnostics.mjs +17 -0
  241. package/doctor/index.mjs +21 -3
  242. package/llms.txt +33 -11
  243. package/package.json +14 -8
  244. package/traversal-exclusions.mjs +7 -1
  245. package/ux-demo/recipes/app-shell.tsx +36 -23
  246. package/ux-demo/recipes/collapsible-sidebar.tsx +23 -17
  247. package/ux-demo/recipes/composer-form.tsx +15 -6
  248. package/ux-demo/recipes/list-detail-dialog.tsx +31 -15
  249. package/ux-demo/recipes/list-workspace-states.tsx +16 -7
  250. package/ux-demo/recipes/loading-inspector.tsx +39 -18
  251. package/ux-demo/recipes/navigation-sidebar.tsx +1 -1
  252. package/ux-demo/recipes/recipes.css +7 -2
  253. package/ux-demo/recipes/workspace-header.tsx +17 -7
  254. package/dist/browser/panel-header.js +0 -7
  255. package/dist/chunk-5VTB2BKP.js.map +0 -1
  256. package/dist/chunk-7L6EHUMV.js.map +0 -1
  257. package/dist/chunk-AASLYRGE.js.map +0 -1
  258. package/dist/chunk-BBRXX6PF.js.map +0 -1
  259. package/dist/chunk-DPDBVKNA.js.map +0 -1
  260. package/dist/chunk-DSNIYOZ3.js.map +0 -1
  261. package/dist/chunk-ELSJX4W7.js.map +0 -1
  262. package/dist/chunk-GP5DP5DL.js.map +0 -1
  263. package/dist/chunk-K57KRAOV.js.map +0 -1
  264. package/dist/chunk-M7JBER5U.js.map +0 -1
  265. package/dist/chunk-NENBUYX5.js +0 -79
  266. package/dist/chunk-NENBUYX5.js.map +0 -1
  267. package/dist/chunk-PIDTEQ3U.js.map +0 -1
  268. package/dist/chunk-PZQVSDLH.js.map +0 -1
  269. package/dist/chunk-RYRIFZCT.js +0 -58
  270. package/dist/chunk-RYRIFZCT.js.map +0 -1
  271. package/dist/chunk-VLYV65LK.js.map +0 -1
  272. package/dist/chunk-W4CXQYSG.js.map +0 -1
  273. package/dist/panel-header.d.ts +0 -42
  274. package/dist/panel-header.js +0 -7
  275. package/dist/panel-header.js.map +0 -1
  276. package/dist/styles/panel-header.css +0 -64
  277. package/docs/design/templates/panel-header/icon-actions-dark.svg +0 -1
  278. package/docs/design/templates/panel-header/icon-actions.svg +0 -1
  279. package/docs/design/templates/panel-header/icon-summary-actions-dark.svg +0 -1
  280. package/docs/design/templates/panel-header/icon-summary-actions.svg +0 -1
  281. package/docs/design/templates/panel-header/no-icon-dark.svg +0 -1
  282. package/docs/design/templates/panel-header/no-icon.svg +0 -1
  283. package/docs/design/templates/panel-header/page-heading-dark.svg +0 -1
  284. package/docs/design/templates/panel-header/page-heading.svg +0 -1
  285. package/docs/design/templates/panel-header/title-only-dark.svg +0 -1
  286. package/docs/design/templates/panel-header/title-only.svg +0 -1
  287. package/docs/design/templates/panel-header-dark.svg +0 -13
  288. package/docs/design/templates/panel-header.svg +0 -13
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n ExternalLink,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Sun,\n Waypoints,\n} from 'lucide';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane } from './pane.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n label: string;\n href: string;\n /** Optional monospace detail (e.g. a file path) shown after the label. */\n detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n id: string;\n name: string;\n /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n group: string;\n}\n\nexport interface CatalogEntry {\n id: string;\n name: string;\n description?: string;\n /** Short metadata tags shown at the trailing edge of the sidebar row. */\n tags?: readonly string[];\n resources?: readonly CatalogResource[];\n related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n category: string;\n entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n label: string;\n sections: readonly CatalogSection[];\n /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n collapsible?: boolean;\n /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n title: string;\n subtitle?: string;\n /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n logoUrl?: string;\n}\n\nexport interface CatalogProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n /** The controlled active entry id — the app owns this signal. */\n active: string;\n /** The rendered preview for the active entry; the app computes it from `active`. */\n content: SafeHtml;\n /** Whether the sidebar is collapsed (controlled). */\n collapsed?: boolean;\n /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n theme?: 'light' | 'dark';\n /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n headerActions?: SafeHtml;\n /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n secondarySections?: CatalogSecondaryGroup;\n /** Extra sidebar content below the category groups (and the secondary group). */\n sidebarFooter?: SafeHtml;\n /** Status line content shown at the start of the detail footer. */\n status?: SafeHtml;\n /**\n * Whether to highlight transparent specimens' outer bounds and non-zero\n * margins. Pass a boolean (rather than omitting the prop) when the active\n * entry can switch between component and composition previews;\n * `wireCatalogGeometryOverlay` keeps the overlay synchronized.\n */\n geometryOverlay?: boolean;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n toggleSecondaryAction?: string;\n className?: string;\n}\n\nfunction findEntry(\n sections: readonly CatalogSection[],\n id: string,\n): CatalogEntry | undefined {\n for (const section of sections) {\n for (const entry of section.entries) if (entry.id === id) return entry;\n }\n return undefined;\n}\n\nfunction catalogEntryTags(\n tags: readonly string[] | undefined,\n): SafeHtml | undefined {\n if (!tags?.length) return undefined;\n return (\n <span class=\"kui-catalog__tags\">\n {tags.map((tag) => (\n <span class=\"kui-catalog__tag\">{tag}</span>\n ))}\n </span>\n );\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(\n related: readonly CatalogRelated[],\n selectAction: string,\n): SafeHtml[] {\n const groups: string[] = [];\n for (const entry of related)\n if (!groups.includes(entry.group)) groups.push(entry.group);\n const nodes: SafeHtml[] = [];\n groups.forEach((group, index) => {\n if (index > 0) nodes.push(<wa-divider></wa-divider>);\n nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n for (const entry of related) {\n if (entry.group === group)\n nodes.push(\n <wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>\n {entry.name}\n </wa-dropdown-item>,\n );\n }\n });\n return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n headerActions,\n secondarySections,\n sidebarFooter,\n status,\n geometryOverlay,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n className = '',\n}: CatalogProps) {\n const selected =\n findEntry(sections, active) ??\n (secondarySections\n ? findEntry(secondarySections.sections, active)\n : undefined);\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const resources = selected?.resources ?? [];\n const related = selected?.related ?? [];\n\n return (\n <main\n class={`kui-catalog ${className}`.trim()}\n data-component=\"catalog\"\n data-sidebar-collapsed={String(collapsed)}\n data-geometry-overlay={\n geometryOverlay === undefined ? undefined : String(geometryOverlay)\n }\n >\n <Pane\n element=\"aside\"\n className=\"kui-catalog__sidebar\"\n label={`${brand.title} catalog`}\n contentElement=\"nav\"\n contentLabel={`${brand.title} components`}\n separators={['inline-end']}\n headerClassName=\"kui-catalog__brand\"\n header={\n <>\n <Toolbar\n label={`${brand.title} catalog header`}\n divider={false}\n leading={\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__identity\"\n >\n {brand.logoUrl ? (\n <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" />\n ) : (\n <></>\n )}\n <h1>{brand.title}</h1>\n </ToolbarControlGroup>\n }\n trailing={\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Collapse ${brand.title} catalog`}\n >\n <LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" />\n </button>\n </ToolbarControlGroup>\n }\n />\n {brand.subtitle ? (\n <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p>\n ) : (\n <></>\n )}\n </>\n }\n >\n <>\n {sections.map((section) => (\n <section class=\"kui-catalog__group\">\n <ListHeader label={section.category} />\n <div class=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </div>\n </section>\n ))}\n {secondarySections ? (\n <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n {secondarySections.collapsible ? (\n <ListHeader\n label={secondarySections.label}\n toggle\n expanded={Boolean(secondarySections.expanded)}\n action={toggleSecondaryAction}\n />\n ) : (\n <ListHeader label={secondarySections.label} />\n )}\n {!secondarySections.collapsible || secondarySections.expanded ? (\n <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n {secondarySections.sections.map((section) => (\n <section class=\"kui-catalog__secondary-group\">\n <h3 class=\"kui-catalog__secondary-heading\">\n {section.category}\n </h3>\n <div class=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </div>\n </section>\n ))}\n </div>\n ) : (\n <></>\n )}\n </section>\n ) : (\n <></>\n )}\n {sidebarFooter ?? <></>}\n </>\n </Pane>\n <Pane\n element=\"article\"\n className=\"kui-catalog__detail\"\n contentElement=\"section\"\n contentLabel={`${name} preview`}\n contentClassName=\"kui-catalog__stage\"\n headerClassName=\"kui-catalog__header\"\n header={\n <>\n <Toolbar\n label={`${name} header`}\n divider={false}\n leading={\n <>\n {collapsed ? (\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Expand ${brand.title} catalog`}\n >\n <LucideIcon\n icon={PanelLeftOpen}\n name=\"panel-left-open\"\n />\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__title\"\n >\n <h2>{name}</h2>\n </ToolbarControlGroup>\n </>\n }\n trailing={\n <div class=\"kui-catalog__header-actions\">\n {headerActions}\n {theme ? (\n <ToolbarControlGroup\n className=\"kui-catalog__settings\"\n label=\"Catalog display\"\n >\n <button\n type=\"button\"\n data-action={toggleThemeAction}\n aria-label={`Use ${nextTheme} theme`}\n data-theme-preview={theme}\n >\n {nextTheme === 'dark' ? (\n <LucideIcon icon={Moon} name=\"moon\" />\n ) : (\n <LucideIcon icon={Sun} name=\"sun\" />\n )}\n <span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span>\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n </div>\n }\n />\n {selected?.description ? (\n <p class=\"kui-catalog__description kui-content-item\">\n {selected.description}\n </p>\n ) : (\n <></>\n )}\n </>\n }\n footerClassName=\"kui-catalog__footer\"\n footer={\n <>\n {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n <Toolbar\n label={`${name} resources`}\n divider={false}\n leading={\n resources.length > 0 ? (\n <nav\n class=\"kui-catalog__resources\"\n aria-label={`${name} resources`}\n >\n <ToolbarControlGroup\n className=\"kui-catalog__resource-group\"\n label={`${name} resources`}\n >\n {resources.map((resource) => (\n <a\n class=\"kui-catalog__resource\"\n href={resource.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label={`${name}: ${resource.label} (opens in new tab)`}\n >\n <LucideIcon\n icon={ExternalLink}\n name=\"external-link\"\n />\n <span>{resource.label}</span>\n {resource.detail ? (\n <code>{resource.detail}</code>\n ) : (\n <></>\n )}\n </a>\n ))}\n </ToolbarControlGroup>\n </nav>\n ) : (\n <></>\n )\n }\n trailing={\n related.length > 0 ? (\n <div class=\"kui-catalog__related\" data-catalog-related>\n <ToolbarControlGroup\n single\n className=\"kui-catalog__related-group\"\n label=\"Related entries\"\n >\n <wa-dropdown\n class=\"kui-catalog__related-menu\"\n placement=\"top-end\"\n data-key={`kui-catalog-related-${active}`}\n data-morph-skip-children\n >\n <wa-button slot=\"trigger\" appearance=\"plain\" with-caret>\n <span class=\"kui-catalog__related-trigger\">\n <LucideIcon icon={Waypoints} name=\"waypoints\" />\n <span class=\"kui-catalog__related-label\">\n Component\n </span>\n </span>\n </wa-button>\n {relatedMenuItems(related, selectAction)}\n </wa-dropdown>\n </ToolbarControlGroup>\n </div>\n ) : (\n <></>\n )\n }\n />\n </>\n }\n >\n <div class=\"kui-catalog__canvas\">\n {content}\n {geometryOverlay !== undefined ? (\n <div\n class=\"kui-catalog__geometry-overlay\"\n data-catalog-geometry-overlay\n data-morph-skip-children\n aria-hidden=\"true\"\n />\n ) : (\n <></>\n )}\n </div>\n </Pane>\n </main>\n );\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nconst catalogExampleProtectedAttributes = new Set([\n 'data-catalog-example',\n 'data-catalog-example-stack',\n 'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-align'?: never;\n }\n>;\n\ntype CatalogExampleStackRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-align'?: never;\n }\n>;\n\nexport interface CatalogExampleProps {\n /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n label?: string;\n /** Optional explanatory note between the label and the specimen. */\n note?: SafeHtml | string;\n /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n align?: CatalogExampleAlign;\n /** Safe authoring `data-*` metadata for the rendered section. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleRootAttributes;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({\n label,\n note,\n align = 'none',\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example ${className}`.trim()}\n data-catalog-example\n data-align={align}\n >\n {label !== undefined ? <ListHeader label={label} /> : <></>}\n {note !== undefined ? (\n <p class=\"kui-catalog-example__note\">{note}</p>\n ) : (\n <></>\n )}\n {children}\n </section>\n );\n}\n\nexport interface CatalogExampleStackProps {\n /** Accessible label for the stack region. */\n label?: string;\n /** Safe authoring `data-*` metadata for the rendered stack. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleStackRootAttributes;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * A vertically-stacked group of {@link CatalogExample}s with the catalog's\n * example rhythm. The semantic `section` becomes a named `region` when `label`\n * is supplied; an unlabeled stack remains an ordinary grouping.\n */\nexport function CatalogExampleStack({\n label,\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleStackProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example-stack ${className}`.trim()}\n data-catalog-example-stack\n aria-label={label}\n >\n {children}\n </section>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/catalog.tsx"],"names":[],"mappings":"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","file":"catalog.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n ExternalLink,\n Moon,\n PanelLeftClose,\n PanelLeftOpen,\n Sun,\n Waypoints,\n} from 'lucide';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { List } from './list.js';\nimport { ListHeader } from './list-header.js';\nimport { ListItem } from './list-item.js';\nimport { LucideIcon } from './lucide-icon.js';\nimport { Pane } from './pane.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** A reference link shown in the detail footer for the active entry. */\nexport interface CatalogResource {\n label: string;\n href: string;\n /** Optional monospace detail (e.g. a file path) shown after the label. */\n detail?: string;\n}\n\n/** A related entry offered in the detail footer's \"Related entries\" popup menu. */\nexport interface CatalogRelated {\n id: string;\n name: string;\n /** Group heading in the menu, e.g. \"Uses\" / \"Used by\". */\n group: string;\n}\n\nexport interface CatalogEntry {\n id: string;\n name: string;\n description?: string;\n /** Short metadata tags shown at the trailing edge of the sidebar row. */\n tags?: readonly string[];\n resources?: readonly CatalogResource[];\n related?: readonly CatalogRelated[];\n}\n\nexport interface CatalogSection {\n category: string;\n entries: readonly CatalogEntry[];\n}\n\n/**\n * A secondary group of sections shown below the primary sidebar sections with a\n * quieter \"ecosystem\" treatment (e.g. third-party components). Optionally\n * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s\n * `onToggleSecondary`.\n */\nexport interface CatalogSecondaryGroup {\n label: string;\n sections: readonly CatalogSection[];\n /** When true, the group's label is a disclosure toggle controlling `expanded`. */\n collapsible?: boolean;\n /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */\n expanded?: boolean;\n}\n\nexport interface CatalogBrand {\n title: string;\n subtitle?: string;\n /** Logo image URL (rendered decorative). Omit for a text-only brand. */\n logoUrl?: string;\n}\n\nexport interface CatalogProps {\n brand: CatalogBrand;\n sections: readonly CatalogSection[];\n /** The controlled active entry id — the app owns this signal. */\n active: string;\n /** The rendered preview for the active entry; the app computes it from `active`. */\n content: SafeHtml;\n /** Whether the sidebar is collapsed (controlled). */\n collapsed?: boolean;\n /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */\n theme?: 'light' | 'dark';\n /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */\n headerActions?: SafeHtml;\n /** A secondary \"ecosystem\" group of sections below the primary category groups. */\n secondarySections?: CatalogSecondaryGroup;\n /** Extra sidebar content below the category groups (and the secondary group). */\n sidebarFooter?: SafeHtml;\n /** Status line content shown at the start of the detail footer. */\n status?: SafeHtml;\n /**\n * Whether to highlight specimens' computed borders (or transparent outer\n * bounds) and non-zero margins. Pass a boolean (rather than omitting the\n * prop) when the active entry can switch between component and composition\n * previews; `wireCatalogGeometryOverlay` keeps the overlay synchronized.\n */\n geometryOverlay?: boolean;\n selectAction?: string;\n toggleSidebarAction?: string;\n toggleThemeAction?: string;\n /** Action fired by the secondary group's disclosure toggle (when collapsible). */\n toggleSecondaryAction?: string;\n className?: string;\n}\n\nfunction findEntry(\n sections: readonly CatalogSection[],\n id: string,\n): CatalogEntry | undefined {\n for (const section of sections) {\n for (const entry of section.entries) if (entry.id === id) return entry;\n }\n return undefined;\n}\n\nfunction catalogEntryTags(\n tags: readonly string[] | undefined,\n): SafeHtml | undefined {\n if (!tags?.length) return undefined;\n return (\n <span class=\"kui-catalog__tags\">\n {tags.map((tag) => (\n <span class=\"kui-catalog__tag\">{tag}</span>\n ))}\n </span>\n );\n}\n\n/**\n * Render the related entries as a `wa-dropdown` popup-menu body: a heading per\n * `group` (first-seen order) followed by that group's entries, each a navigable\n * item carrying the same `selectAction` the sidebar items use, so a chosen entry\n * routes through the one `wireCatalog` select handler.\n */\nfunction relatedMenuItems(\n related: readonly CatalogRelated[],\n selectAction: string,\n): SafeHtml[] {\n const groups: string[] = [];\n for (const entry of related)\n if (!groups.includes(entry.group)) groups.push(entry.group);\n const nodes: SafeHtml[] = [];\n groups.forEach((group, index) => {\n if (index > 0) nodes.push(<wa-divider></wa-divider>);\n nodes.push(<small class=\"kui-catalog__related-heading\">{group}</small>);\n for (const entry of related) {\n if (entry.group === group)\n nodes.push(\n <wa-dropdown-item data-action={selectAction} data-item-id={entry.id}>\n {entry.name}\n </wa-dropdown-item>,\n );\n }\n });\n return nodes;\n}\n\n/**\n * A reusable component-catalog shell: a collapsible category sidebar, a titled\n * detail stage that renders the active entry's preview, and a footer with\n * reference links and a related-entry popup menu. Built entirely from public\n * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,\n * `collapsed`, and `theme` signals and computes `content` from `active` in its own\n * render; wire the sidebar/collapse/theme actions with `wireCatalog`.\n */\nexport function Catalog({\n brand,\n sections,\n active,\n content,\n collapsed = false,\n theme,\n headerActions,\n secondarySections,\n sidebarFooter,\n status,\n geometryOverlay,\n selectAction = 'catalog-select',\n toggleSidebarAction = 'catalog-toggle-sidebar',\n toggleThemeAction = 'catalog-toggle-theme',\n toggleSecondaryAction = 'catalog-toggle-secondary',\n className = '',\n}: CatalogProps) {\n const selected =\n findEntry(sections, active) ??\n (secondarySections\n ? findEntry(secondarySections.sections, active)\n : undefined);\n const name = selected?.name ?? '';\n const nextTheme = theme === 'dark' ? 'light' : 'dark';\n const resources = selected?.resources ?? [];\n const related = selected?.related ?? [];\n\n return (\n <main\n class={`kui-catalog ${className}`.trim()}\n data-component=\"catalog\"\n data-sidebar-collapsed={String(collapsed)}\n data-geometry-overlay={\n geometryOverlay === undefined ? undefined : String(geometryOverlay)\n }\n >\n <Pane\n element=\"aside\"\n className=\"kui-catalog__sidebar\"\n label={`${brand.title} catalog`}\n contentElement=\"nav\"\n contentLabel={`${brand.title} components`}\n separators={['inline-end']}\n headerClassName=\"kui-catalog__brand\"\n header={\n <>\n <Toolbar\n label={`${brand.title} catalog header`}\n dividerSides=\"\"\n leading={\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__identity\"\n >\n {brand.logoUrl ? (\n <img class=\"kui-catalog__mark\" src={brand.logoUrl} alt=\"\" />\n ) : (\n <></>\n )}\n <h1>{brand.title}</h1>\n </ToolbarControlGroup>\n }\n trailing={\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Collapse ${brand.title} catalog`}\n >\n <LucideIcon icon={PanelLeftClose} name=\"panel-left-close\" />\n </button>\n </ToolbarControlGroup>\n }\n />\n {brand.subtitle ? (\n <p class=\"kui-catalog__subtitle\">{brand.subtitle}</p>\n ) : (\n <></>\n )}\n </>\n }\n >\n <>\n {sections.map((section) => (\n <section class=\"kui-catalog__group\">\n <ListHeader label={section.category} />\n <List className=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </List>\n </section>\n ))}\n {secondarySections ? (\n <section class=\"kui-catalog__group kui-catalog__group--secondary\">\n {secondarySections.collapsible ? (\n <ListHeader\n label={secondarySections.label}\n toggle\n expanded={Boolean(secondarySections.expanded)}\n action={toggleSecondaryAction}\n />\n ) : (\n <ListHeader label={secondarySections.label} />\n )}\n {!secondarySections.collapsible || secondarySections.expanded ? (\n <div class=\"kui-catalog__secondary\" data-catalog-secondary>\n {secondarySections.sections.map((section) => (\n <section class=\"kui-catalog__secondary-group\">\n <h3 class=\"kui-catalog__secondary-heading\">\n {section.category}\n </h3>\n <List className=\"kui-catalog__items\">\n {section.entries.map((entry) => (\n <ListItem\n action={selectAction}\n itemId={entry.id}\n label={entry.name}\n trailing={catalogEntryTags(entry.tags)}\n selected={active === entry.id}\n title={entry.description}\n multiline\n />\n ))}\n </List>\n </section>\n ))}\n </div>\n ) : (\n <></>\n )}\n </section>\n ) : (\n <></>\n )}\n {sidebarFooter ?? <></>}\n </>\n </Pane>\n <Pane\n element=\"article\"\n className=\"kui-catalog__detail\"\n contentElement=\"section\"\n contentLabel={`${name} preview`}\n contentClassName=\"kui-catalog__stage\"\n headerClassName=\"kui-catalog__header\"\n header={\n <>\n <Toolbar\n label={`${name} header`}\n dividerSides=\"\"\n leading={\n <>\n {collapsed ? (\n <ToolbarControlGroup appearance=\"borderless\" single>\n <button\n type=\"button\"\n data-action={toggleSidebarAction}\n aria-label={`Expand ${brand.title} catalog`}\n >\n <LucideIcon\n icon={PanelLeftOpen}\n name=\"panel-left-open\"\n />\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-catalog__title\"\n >\n <h2>{name}</h2>\n </ToolbarControlGroup>\n </>\n }\n trailing={\n <div class=\"kui-catalog__header-actions\">\n {headerActions}\n {theme ? (\n <ToolbarControlGroup\n className=\"kui-catalog__settings\"\n label=\"Catalog display\"\n >\n <button\n type=\"button\"\n data-action={toggleThemeAction}\n aria-label={`Use ${nextTheme} theme`}\n data-theme-preview={theme}\n >\n {nextTheme === 'dark' ? (\n <LucideIcon icon={Moon} name=\"moon\" />\n ) : (\n <LucideIcon icon={Sun} name=\"sun\" />\n )}\n <span>{nextTheme === 'dark' ? 'Dark' : 'Light'}</span>\n </button>\n </ToolbarControlGroup>\n ) : (\n <></>\n )}\n </div>\n }\n />\n {selected?.description ? (\n <p class=\"kui-catalog__description kui-content-item\">\n {selected.description}\n </p>\n ) : (\n <></>\n )}\n </>\n }\n footerClassName=\"kui-catalog__footer\"\n footer={\n <>\n {status ? <div class=\"kui-catalog__status\">{status}</div> : <></>}\n <Toolbar\n label={`${name} resources`}\n dividerSides=\"\"\n leading={\n resources.length > 0 ? (\n <nav\n class=\"kui-catalog__resources\"\n aria-label={`${name} resources`}\n >\n <ToolbarControlGroup\n className=\"kui-catalog__resource-group\"\n label={`${name} resources`}\n >\n {resources.map((resource) => (\n <a\n class=\"kui-catalog__resource\"\n href={resource.href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label={`${name}: ${resource.label} (opens in new tab)`}\n >\n <LucideIcon\n icon={ExternalLink}\n name=\"external-link\"\n />\n <span>{resource.label}</span>\n {resource.detail ? (\n <code>{resource.detail}</code>\n ) : (\n <></>\n )}\n </a>\n ))}\n </ToolbarControlGroup>\n </nav>\n ) : (\n <></>\n )\n }\n trailing={\n related.length > 0 ? (\n <div class=\"kui-catalog__related\" data-catalog-related>\n <ToolbarControlGroup\n single\n className=\"kui-catalog__related-group\"\n label=\"Related entries\"\n >\n <wa-dropdown\n class=\"kui-catalog__related-menu\"\n placement=\"top-end\"\n data-key={`kui-catalog-related-${active}`}\n data-morph-skip-children\n >\n <wa-button slot=\"trigger\" appearance=\"plain\" with-caret>\n <span class=\"kui-catalog__related-trigger\">\n <LucideIcon icon={Waypoints} name=\"waypoints\" />\n <span class=\"kui-catalog__related-label\">\n Component\n </span>\n </span>\n </wa-button>\n {relatedMenuItems(related, selectAction)}\n </wa-dropdown>\n </ToolbarControlGroup>\n </div>\n ) : (\n <></>\n )\n }\n />\n </>\n }\n >\n <div class=\"kui-catalog__canvas\">\n {content}\n {geometryOverlay !== undefined ? (\n <div\n class=\"kui-catalog__geometry-overlay\"\n data-catalog-geometry-overlay\n data-morph-skip-children\n aria-hidden=\"true\"\n />\n ) : (\n <></>\n )}\n </div>\n </Pane>\n </main>\n );\n}\n\n/**\n * How a {@link CatalogExample}'s content aligns its visible left edge with the\n * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):\n * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.\n * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.\n * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).\n */\nexport type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';\n\nconst catalogExampleProtectedAttributes = new Set([\n 'data-catalog-example',\n 'data-catalog-example-stack',\n 'data-catalog-example-label',\n 'data-catalog-example-note',\n 'data-align',\n]);\n\ntype CatalogExampleRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-catalog-example-label'?: never;\n 'data-catalog-example-note'?: never;\n 'data-align'?: never;\n }\n>;\n\ntype CatalogExampleStackRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-catalog-example'?: never;\n 'data-catalog-example-stack'?: never;\n 'data-catalog-example-label'?: never;\n 'data-catalog-example-note'?: never;\n 'data-align'?: never;\n }\n>;\n\nexport interface CatalogExampleProps {\n /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */\n label?: string;\n /** Optional explanatory note between the label and the specimen. */\n note?: SafeHtml | string;\n /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */\n align?: CatalogExampleAlign;\n /** Safe authoring `data-*` metadata for the rendered section. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleRootAttributes;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * One labeled example in a catalog preview: a `ListHeader` label, an optional\n * note, and the specimen. `align` insets the specimen so its visible left edge\n * lines up with the label text, encoding the catalog's alignment rules as a\n * first-class prop instead of per-demo CSS. The inset is published as the\n * `--kui-catalog-example-align` custom property so a debug overlay can exclude it\n * from a specimen's measured margin.\n */\nexport function CatalogExample({\n label,\n note,\n align = 'none',\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example ${className}`.trim()}\n data-catalog-example\n data-align={align}\n >\n {label !== undefined ? (\n <ListHeader\n label={label}\n rootAttributes={{ 'data-catalog-example-label': '' }}\n />\n ) : (\n <></>\n )}\n {note !== undefined ? (\n <p class=\"kui-catalog-example__note\" data-catalog-example-note>\n {note}\n </p>\n ) : (\n <></>\n )}\n {children}\n </section>\n );\n}\n\nexport interface CatalogExampleStackProps {\n /** Accessible label for the stack region. */\n label?: string;\n /** Safe authoring `data-*` metadata for the rendered stack. Helper-owned structural attributes remain protected. */\n rootAttributes?: CatalogExampleStackRootAttributes;\n className?: string;\n children?: SafeHtml | readonly SafeHtml[];\n}\n\n/**\n * A vertically-stacked group of {@link CatalogExample}s with the catalog's\n * example rhythm. The semantic `section` becomes a named `region` when `label`\n * is supplied; an unlabeled stack remains an ordinary grouping.\n */\nexport function CatalogExampleStack({\n label,\n rootAttributes = {},\n className = '',\n children,\n}: CatalogExampleStackProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n catalogExampleProtectedAttributes,\n );\n return (\n <section\n {...safeRootAttributes}\n class={`kui-catalog-example-stack ${className}`.trim()}\n data-catalog-example-stack\n aria-label={label}\n >\n {children}\n </section>\n );\n}\n"]}
@@ -1,6 +1,7 @@
1
1
  import { filterDataAttributes } from './chunk-SRSJO5QE.js';
2
- import { Skeleton } from './chunk-PZQVSDLH.js';
3
- import { jsxs, jsx } from 'kerfjs/jsx-runtime';
2
+ import { Skeleton } from './chunk-RKVQEH4J.js';
3
+ import { LoadingSpinner } from './chunk-6WTETUZ6.js';
4
+ import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
4
5
 
5
6
  var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
6
7
  "data-component",
@@ -8,12 +9,20 @@ var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
8
9
  "data-item-id",
9
10
  "data-has-icon",
10
11
  "data-multiline",
12
+ "data-density",
13
+ "data-divider",
14
+ "data-busy",
11
15
  "data-state"
12
16
  ]);
13
17
  function ListItem({
14
18
  label,
19
+ description,
15
20
  icon,
16
21
  trailing,
22
+ status,
23
+ busy = false,
24
+ density = "standard",
25
+ divider = "none",
17
26
  selected = false,
18
27
  action,
19
28
  itemId,
@@ -48,16 +57,26 @@ function ListItem({
48
57
  "data-item-id": itemId,
49
58
  "data-has-icon": String(Boolean(icon)),
50
59
  "data-multiline": multiline ? "true" : void 0,
60
+ "data-density": density,
61
+ "data-divider": divider,
62
+ "data-busy": busy ? "true" : void 0,
51
63
  "data-state": state,
52
64
  "data-placeholder": placeholder ? "true" : void 0,
53
65
  "aria-label": accessibleLabel,
54
66
  "aria-current": selected ? "page" : void 0,
55
67
  "aria-pressed": pressed === void 0 ? void 0 : String(pressed),
56
- "aria-busy": placeholder ? "true" : void 0,
68
+ "aria-busy": placeholder || busy ? "true" : void 0,
57
69
  children: [
58
70
  icon && /* @__PURE__ */ jsx("span", { class: "kui-list-item__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
59
- /* @__PURE__ */ jsx("span", { class: "kui-list-item__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label }),
60
- trailing && /* @__PURE__ */ jsx("span", { class: "kui-list-item__trailing", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "2.5em" }) : trailing })
71
+ /* @__PURE__ */ jsxs("span", { class: "kui-list-item__label", children: [
72
+ /* @__PURE__ */ jsx("span", { class: "kui-list-item__primary-label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label }),
73
+ !placeholder && description && /* @__PURE__ */ jsx("span", { class: "kui-list-item__description", children: description })
74
+ ] }),
75
+ (busy || status || trailing) && /* @__PURE__ */ jsx("span", { class: "kui-list-item__trailing", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "2.5em" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
76
+ busy && /* @__PURE__ */ jsx(LoadingSpinner, {}),
77
+ status && /* @__PURE__ */ jsx("span", { class: "kui-list-item__status", children: status }),
78
+ trailing
79
+ ] }) })
61
80
  ]
62
81
  }
63
82
  );
@@ -65,4 +84,4 @@ function ListItem({
65
84
 
66
85
  export { ListItem };
67
86
 
68
- //# sourceMappingURL=chunk-ELSJX4W7.js.map
87
+ //# sourceMappingURL=chunk-4EF2CMYS.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-4EF2CMYS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { LoadingSpinner } from './loading-spinner.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-item-id',\n 'data-has-icon',\n 'data-multiline',\n 'data-density',\n 'data-divider',\n 'data-busy',\n 'data-state',\n]);\n\ntype ListItemRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-item-id'?: never;\n 'data-has-icon'?: never;\n 'data-multiline'?: never;\n 'data-density'?: never;\n 'data-divider'?: never;\n 'data-busy'?: never;\n 'data-state'?: never;\n }\n>;\n\nexport interface ListItemProps {\n label: string | SafeHtml;\n /** App-owned supporting text rendered in the component's stable label stack. */\n description?: string | SafeHtml;\n icon?: SafeHtml;\n trailing?: SafeHtml;\n /** Dormant status metadata rendered before trailing content. */\n status?: string | SafeHtml;\n /** Show a progress indicator and expose the row as busy without replacing its content. */\n busy?: boolean;\n density?: 'standard' | 'compact';\n divider?: 'none' | 'before' | 'after' | 'both';\n selected?: boolean;\n action: string;\n itemId?: string;\n className?: string;\n style?: string;\n pressed?: boolean;\n accessibleLabel?: string;\n title?: string;\n multiline?: boolean;\n state?: string;\n disabled?: boolean;\n tabIndex?: number;\n /** Render the row as an unanimated loading skeleton, disabling its action. */\n placeholder?: boolean;\n rootAttributes?: ListItemRootAttributes;\n}\n\nexport function ListItem({\n label,\n description,\n icon,\n trailing,\n status,\n busy = false,\n density = 'standard',\n divider = 'none',\n selected = false,\n action,\n itemId,\n className = '',\n style,\n pressed,\n accessibleLabel,\n title,\n multiline = false,\n state,\n disabled = false,\n tabIndex,\n placeholder = false,\n rootAttributes = {},\n}: ListItemProps) {\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n return (\n <button\n {...extensionAttributes}\n type=\"button\"\n class={`kui-list-item ${className}`.trim()}\n style={style}\n title={placeholder ? undefined : title}\n disabled={disabled || placeholder}\n tabindex={placeholder ? -1 : tabIndex}\n data-component=\"list-item\"\n data-action={placeholder ? undefined : action}\n data-item-id={itemId}\n data-has-icon={String(Boolean(icon))}\n data-multiline={multiline ? 'true' : undefined}\n data-density={density}\n data-divider={divider}\n data-busy={busy ? 'true' : undefined}\n data-state={state}\n data-placeholder={placeholder ? 'true' : undefined}\n aria-label={accessibleLabel}\n aria-current={selected ? 'page' : undefined}\n aria-pressed={pressed === undefined ? undefined : String(pressed)}\n aria-busy={placeholder || busy ? 'true' : undefined}\n >\n {icon && (\n <span class=\"kui-list-item__icon\">\n {placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}\n </span>\n )}\n <span class=\"kui-list-item__label\">\n <span class=\"kui-list-item__primary-label\">\n {placeholder ? <Skeleton width=\"9em\" /> : label}\n </span>\n {!placeholder && description && (\n <span class=\"kui-list-item__description\">{description}</span>\n )}\n </span>\n {(busy || status || trailing) && (\n <span class=\"kui-list-item__trailing\">\n {placeholder ? (\n <Skeleton width=\"2.5em\" />\n ) : (\n <>\n {busy && <LoadingSpinner />}\n {status && <span class=\"kui-list-item__status\">{status}</span>}\n {trailing}\n </>\n )}\n </span>\n )}\n </button>\n );\n}\n"]}
@@ -1,4 +1,4 @@
1
- import { ToolbarText } from './chunk-W7YD6E4N.js';
1
+ import { ToolbarText } from './chunk-R7ZWUN64.js';
2
2
  import { jsxs, jsx } from 'kerfjs/jsx-runtime';
3
3
 
4
4
  function NavStack({
@@ -80,4 +80,4 @@ function NavStack({
80
80
 
81
81
  export { NavStack };
82
82
 
83
- //# sourceMappingURL=chunk-OHU6CI22.js.map
83
+ //# sourceMappingURL=chunk-B3A3IVO5.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-OHU6CI22.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { ToolbarText } from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n content: SafeHtml;\n /** Title shown in the top toolbar for this view. */\n title?: string;\n /** Trailing actions for this view's top toolbar. */\n toolbar?: SafeHtml;\n}\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the back control (default \"Back\"). */\n backLabel?: string;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar. */\n bottomToolbar?: SafeHtml;\n className?: string;\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. A single-pane layout is a `NavStack`\n * with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n id,\n label,\n views,\n backLabel = 'Back',\n hideToolbar = false,\n bottomToolbar,\n className = '',\n}: NavStackProps) {\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const canPop = views.length > 1;\n return (\n <section\n class={`kui-nav-stack ${className}`.trim()}\n id={id}\n data-component=\"nav-stack\"\n data-nav-stack-id={id}\n data-depth={String(views.length)}\n aria-label={label}\n >\n {!hideToolbar && (\n <header class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <div class=\"kui-nav-stack__lead\">\n {canPop && (\n <button\n type=\"button\"\n class=\"kui-nav-stack__back\"\n data-nav-back\n aria-label={backLabel}\n >\n <svg\n class=\"kui-nav-stack__back-icon\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n </button>\n )}\n <ToolbarText\n text={top?.title ?? ''}\n size=\"large\"\n className=\"kui-nav-stack__title\"\n />\n </div>\n {top?.toolbar && (\n <div class=\"kui-nav-stack__actions\">{top.toolbar}</div>\n )}\n </header>\n )}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => (\n <article\n class=\"kui-nav-stack__view\"\n data-key={view.key}\n data-nav-key={view.key}\n data-nav-active={String(index === topIndex)}\n aria-hidden={String(index !== topIndex)}\n >\n {view.content}\n </article>\n ))}\n </div>\n {bottomToolbar && (\n <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n {bottomToolbar}\n </footer>\n )}\n </section>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-B3A3IVO5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { ToolbarText } from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n content: SafeHtml;\n /** Title shown in the top toolbar for this view. */\n title?: string;\n /** Trailing actions for this view's top toolbar. */\n toolbar?: SafeHtml;\n}\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the back control (default \"Back\"). */\n backLabel?: string;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar. */\n bottomToolbar?: SafeHtml;\n className?: string;\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. A single-pane layout is a `NavStack`\n * with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n id,\n label,\n views,\n backLabel = 'Back',\n hideToolbar = false,\n bottomToolbar,\n className = '',\n}: NavStackProps) {\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const canPop = views.length > 1;\n return (\n <section\n class={`kui-nav-stack ${className}`.trim()}\n id={id}\n data-component=\"nav-stack\"\n data-nav-stack-id={id}\n data-depth={String(views.length)}\n aria-label={label}\n >\n {!hideToolbar && (\n <header class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <div class=\"kui-nav-stack__lead\">\n {canPop && (\n <button\n type=\"button\"\n class=\"kui-nav-stack__back\"\n data-nav-back\n aria-label={backLabel}\n >\n <svg\n class=\"kui-nav-stack__back-icon\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n </button>\n )}\n <ToolbarText\n text={top?.title ?? ''}\n size=\"large\"\n className=\"kui-nav-stack__title\"\n />\n </div>\n {top?.toolbar && (\n <div class=\"kui-nav-stack__actions\">{top.toolbar}</div>\n )}\n </header>\n )}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => (\n <article\n class=\"kui-nav-stack__view\"\n data-key={view.key}\n data-nav-key={view.key}\n data-nav-active={String(index === topIndex)}\n aria-hidden={String(index !== topIndex)}\n >\n {view.content}\n </article>\n ))}\n </div>\n {bottomToolbar && (\n <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n {bottomToolbar}\n </footer>\n )}\n </section>\n );\n}\n"]}
@@ -1,4 +1,4 @@
1
- import { Skeleton } from './chunk-PZQVSDLH.js';
1
+ import { Skeleton } from './chunk-RKVQEH4J.js';
2
2
  import { LucideIcon } from './chunk-W2FK7ZNY.js';
3
3
  import { ChevronDown } from 'lucide';
4
4
  import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
@@ -11,10 +11,16 @@ function Select({
11
11
  choices,
12
12
  className = "",
13
13
  placeholderText,
14
+ hint,
14
15
  disabled = false,
15
16
  fitMenu = false,
16
17
  renderSelected,
17
- placeholder = false
18
+ placeholder = false,
19
+ presentation = "form",
20
+ size = "default",
21
+ selectedPresentation = "label",
22
+ focusRingOwner = "select",
23
+ labelMaxWidth
18
24
  }) {
19
25
  if (placeholder) {
20
26
  return /* @__PURE__ */ jsxs(
@@ -23,7 +29,12 @@ function Select({
23
29
  class: `kui-select kui-select--placeholder ${className}`.trim(),
24
30
  "data-component": "select",
25
31
  "data-placeholder": "true",
32
+ "data-presentation": presentation,
33
+ "data-size": size,
34
+ "data-selected-presentation": selectedPresentation,
35
+ "data-focus-ring-owner": focusRingOwner,
26
36
  "aria-busy": "true",
37
+ style: labelMaxWidth === void 0 ? void 0 : `--kui-select-label-max-width:${labelMaxWidth}px`,
27
38
  children: [
28
39
  label && /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-label", children: label }),
29
40
  /* @__PURE__ */ jsxs(
@@ -37,7 +48,8 @@ function Select({
37
48
  /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronDown, name: "chevron-down" }) })
38
49
  ]
39
50
  }
40
- )
51
+ ),
52
+ hint && /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-hint", children: hint })
41
53
  ]
42
54
  }
43
55
  );
@@ -76,14 +88,20 @@ function Select({
76
88
  return /* @__PURE__ */ jsxs(
77
89
  "wa-select",
78
90
  {
79
- class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""} ${className}`.trim(),
91
+ class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""}${!label ? " kui-select--label-hidden" : ""} ${className}`.trim(),
80
92
  "data-component": "select",
93
+ "data-presentation": presentation,
94
+ "data-size": size,
95
+ "data-selected-presentation": selectedPresentation,
96
+ "data-focus-ring-owner": focusRingOwner,
81
97
  name,
82
- label,
98
+ label: label || ariaLabel,
83
99
  "aria-label": ariaLabel,
84
100
  value,
85
101
  placeholder: placeholderText,
102
+ hint,
86
103
  disabled,
104
+ style: labelMaxWidth === void 0 ? void 0 : `--kui-select-label-max-width:${labelMaxWidth}px`,
87
105
  children: [
88
106
  selected && (renderSelected ? /* @__PURE__ */ jsx(
89
107
  "span",
@@ -114,4 +132,4 @@ function Select({
114
132
 
115
133
  export { Select };
116
134
 
117
- //# sourceMappingURL=chunk-K57KRAOV.js.map
135
+ //# sourceMappingURL=chunk-FRVS5RFM.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-FRVS5RFM.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n value: Value;\n label: string;\n icon?: LucideNode;\n iconName?: string;\n color?: string;\n group?: string;\n separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\ninterface SelectBaseProps<Value extends string = string> {\n name: string;\n value: NoInfer<Value>;\n choices: readonly SelectChoice<Value>[];\n className?: string;\n /** Empty-value hint text shown in the closed control (the native select placeholder). */\n placeholderText?: string;\n /** Supporting text shown below the control and associated with its combobox. */\n hint?: string;\n disabled?: boolean;\n fitMenu?: boolean;\n renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n placeholder?: boolean;\n /** Form (default), borderless toolbar, or intrinsic navigation chrome. */\n presentation?: 'form' | 'toolbar-borderless' | 'navigation';\n size?: 'default' | 'compact';\n /** Show only the selected choice icon while retaining the Select's accessible name. */\n selectedPresentation?: 'label' | 'icon-only';\n /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n focusRingOwner?: 'select' | 'group';\n /** Maximum closed-control label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n}\n\nexport type SelectProps<Value extends string = string> =\n SelectBaseProps<Value> & SelectAccessibleName;\n\nexport function Select<Value extends string>({\n name,\n value,\n label,\n ariaLabel,\n choices,\n className = '',\n placeholderText,\n hint,\n disabled = false,\n fitMenu = false,\n renderSelected,\n placeholder = false,\n presentation = 'form',\n size = 'default',\n selectedPresentation = 'label',\n focusRingOwner = 'select',\n labelMaxWidth,\n}: SelectProps<Value>) {\n if (placeholder) {\n return (\n <div\n class={`kui-select kui-select--placeholder ${className}`.trim()}\n data-component=\"select\"\n data-placeholder=\"true\"\n data-presentation={presentation}\n data-size={size}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n aria-busy=\"true\"\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n >\n {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n <span\n class=\"kui-select__placeholder-box\"\n aria-label={ariaLabel}\n role=\"img\"\n >\n <Skeleton width=\"10em\" />\n <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n <LucideIcon icon={ChevronDown} name=\"chevron-down\" />\n </span>\n </span>\n {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n </div>\n );\n }\n const selected = choices.find((choice) => choice.value === value);\n const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n <span\n data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n data-morph-skip\n slot=\"start\"\n class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n style={choice.color ? `color:${choice.color}` : undefined}\n >\n {choice.icon ? (\n <LucideIcon\n icon={choice.icon}\n name={\n choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n }\n />\n ) : null}\n </span>\n );\n const option = (choice: SelectChoice<Value>) => (\n <>\n {choice.separatorBefore && <wa-divider></wa-divider>}\n <wa-option value={choice.value}>\n {choice.icon ? icon(choice) : null}\n {choice.label}\n </wa-option>\n </>\n );\n const groups = [\n ...new Set(\n choices\n .map((choice) => choice.group)\n .filter((group): group is string => Boolean(group)),\n ),\n ];\n const ungrouped = choices.filter((choice) => !choice.group);\n // Web Awesome names its shadow combobox from the label, not the host's\n // aria-label. Keep ariaLabel-only names available without visible chrome.\n return (\n <wa-select\n class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n data-component=\"select\"\n data-presentation={presentation}\n data-size={size}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n name={name}\n label={label || ariaLabel}\n aria-label={ariaLabel}\n value={value}\n placeholder={placeholderText}\n hint={hint}\n disabled={disabled}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n >\n {selected &&\n (renderSelected ? (\n <span\n data-key={`${name}:${value}:custom-selected`}\n slot=\"start\"\n class=\"kui-select__custom-selected\"\n >\n {renderSelected(selected)}\n </span>\n ) : selected.icon ? (\n icon(selected, true)\n ) : null)}\n {ungrouped.map(option)}\n {groups.map((group, index) => (\n <div\n class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n role=\"group\"\n aria-label={group}\n >\n <span class=\"kui-select__group-title\">{group}</span>\n {choices.filter((choice) => choice.group === group).map(option)}\n </div>\n ))}\n </wa-select>\n );\n}\n"]}
@@ -1,5 +1,5 @@
1
1
  import { filterDataAttributes, filterControlAttributes } from './chunk-SRSJO5QE.js';
2
- import { Skeleton } from './chunk-PZQVSDLH.js';
2
+ import { Skeleton } from './chunk-RKVQEH4J.js';
3
3
  import { DisclosureArrow } from './chunk-Y6LYKFXY.js';
4
4
  import { jsx, jsxs } from 'kerfjs/jsx-runtime';
5
5
 
@@ -8,6 +8,9 @@ var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
8
8
  "data-action",
9
9
  "data-has-badge",
10
10
  "data-has-count",
11
+ "data-density",
12
+ "data-divider",
13
+ "data-indicator-tone",
11
14
  "data-toggle"
12
15
  ]);
13
16
  var PROTECTED_TRIGGER_DATA_ATTRIBUTES = /* @__PURE__ */ new Set(["data-action"]);
@@ -16,6 +19,10 @@ function ListHeader({
16
19
  count,
17
20
  countLabel,
18
21
  badge,
22
+ status,
23
+ density = "standard",
24
+ divider = "none",
25
+ indicatorTone = "neutral",
19
26
  action,
20
27
  actionLabel,
21
28
  actionIcon,
@@ -37,7 +44,7 @@ function ListHeader({
37
44
  );
38
45
  const normalizedCount = typeof count === "number" && Number.isSafeInteger(count) && count >= 0 ? count : void 0;
39
46
  const normalizedCountLabel = normalizedCount === void 0 ? void 0 : typeof countLabel === "string" && countLabel.trim() ? countLabel : String(normalizedCount);
40
- const renderedBadge = normalizedCount === void 0 ? badge : void 0;
47
+ const renderedBadge = normalizedCount === void 0 ? status ?? badge : void 0;
41
48
  const renderedActionIcon = actionIcon ?? (toggle ? /* @__PURE__ */ jsx(DisclosureArrow, { open: Boolean(expanded) }) : void 0);
42
49
  const accessibleLabel = normalizedCount === void 0 ? void 0 : `${label}, ${normalizedCountLabel}`;
43
50
  const indicator = placeholder ? (normalizedCount !== void 0 || renderedBadge) && /* @__PURE__ */ jsx("span", { class: "kui-list-header__badge", children: /* @__PURE__ */ jsx(Skeleton, { width: "1.75em" }) }) : normalizedCount === void 0 ? renderedBadge && /* @__PURE__ */ jsx("span", { class: "kui-list-header__badge", children: renderedBadge }) : /* @__PURE__ */ jsx("span", { class: "kui-list-header__count", "aria-hidden": "true", children: normalizedCount });
@@ -51,6 +58,9 @@ function ListHeader({
51
58
  "data-component": "list-header",
52
59
  "data-has-badge": String(Boolean(renderedBadge)),
53
60
  "data-has-count": String(normalizedCount !== void 0),
61
+ "data-density": density,
62
+ "data-divider": divider,
63
+ "data-indicator-tone": indicatorTone,
54
64
  "data-toggle": "true",
55
65
  "data-placeholder": placeholder ? "true" : void 0,
56
66
  "aria-busy": busy,
@@ -83,6 +93,9 @@ function ListHeader({
83
93
  "data-component": "list-header",
84
94
  "data-has-badge": String(Boolean(renderedBadge)),
85
95
  "data-has-count": String(normalizedCount !== void 0),
96
+ "data-density": density,
97
+ "data-divider": divider,
98
+ "data-indicator-tone": indicatorTone,
86
99
  "data-toggle": "false",
87
100
  "data-placeholder": placeholder ? "true" : void 0,
88
101
  "aria-busy": busy,
@@ -111,4 +124,4 @@ function ListHeader({
111
124
 
112
125
  export { ListHeader };
113
126
 
114
- //# sourceMappingURL=chunk-DSNIYOZ3.js.map
127
+ //# sourceMappingURL=chunk-GWEAPEZI.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-GWEAPEZI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n filterControlAttributes,\n filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-has-badge',\n 'data-has-count',\n 'data-density',\n 'data-divider',\n 'data-indicator-tone',\n 'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set(['data-action']);\n\ntype ListHeaderRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-has-badge'?: never;\n 'data-has-count'?: never;\n 'data-density'?: never;\n 'data-divider'?: never;\n 'data-indicator-tone'?: never;\n 'data-toggle'?: never;\n }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-action'?: never;\n popoverTarget?: string;\n popoverTargetAction?: 'toggle' | 'show' | 'hide';\n 'aria-controls'?: string;\n 'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n }\n>;\n\ninterface ListHeaderBaseProps {\n label: string;\n density?: 'standard' | 'compact';\n divider?: 'none' | 'before' | 'after' | 'both';\n indicatorTone?: 'neutral' | 'accent' | 'danger';\n /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n placeholder?: boolean;\n rootAttributes?: ListHeaderRootAttributes;\n triggerAttributes?: ListHeaderTriggerAttributes;\n}\n\ntype ListHeaderModeProps =\n | {\n /** Render the title as a controlled disclosure trigger. */\n toggle: true;\n action: string;\n expanded: boolean;\n actionIcon?: SafeHtml;\n actionLabel?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a separately named trailing action. */\n toggle?: false;\n action: string;\n actionLabel: string;\n actionIcon: SafeHtml;\n expanded?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a passive section heading. */\n toggle?: false;\n action?: never;\n actionLabel?: never;\n actionIcon?: never;\n expanded?: never;\n actionDisabled?: never;\n disabledReason?: never;\n };\n\ntype ListHeaderIndicatorProps =\n | { count: number; countLabel: string; badge?: never; status?: never }\n | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n ListHeaderIndicatorProps &\n ListHeaderModeProps;\n\nexport function ListHeader({\n label,\n count,\n countLabel,\n badge,\n status,\n density = 'standard',\n divider = 'none',\n indicatorTone = 'neutral',\n action,\n actionLabel,\n actionIcon,\n actionDisabled = false,\n disabledReason,\n expanded,\n toggle = false,\n placeholder = false,\n rootAttributes = {},\n triggerAttributes = {},\n}: ListHeaderProps) {\n const extensionRootAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n const extensionTriggerAttributes = filterControlAttributes(\n triggerAttributes,\n PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n );\n const normalizedCount =\n typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n ? count\n : undefined;\n const normalizedCountLabel =\n normalizedCount === undefined\n ? undefined\n : typeof countLabel === 'string' && countLabel.trim()\n ? countLabel\n : String(normalizedCount);\n const renderedBadge =\n normalizedCount === undefined ? (status ?? badge) : undefined;\n const renderedActionIcon =\n actionIcon ??\n (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n const accessibleLabel =\n normalizedCount === undefined\n ? undefined\n : `${label}, ${normalizedCountLabel}`;\n const indicator = placeholder ? (\n (normalizedCount !== undefined || renderedBadge) && (\n <span class=\"kui-list-header__badge\">\n <Skeleton width=\"1.75em\" />\n </span>\n )\n ) : normalizedCount === undefined ? (\n renderedBadge && <span class=\"kui-list-header__badge\">{renderedBadge}</span>\n ) : (\n <span class=\"kui-list-header__count\" aria-hidden=\"true\">\n {normalizedCount}\n </span>\n );\n const busy = placeholder ? ('true' as const) : undefined;\n if (toggle) {\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(Boolean(renderedBadge))}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-divider={divider}\n data-indicator-tone={indicatorTone}\n data-toggle=\"true\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n >\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__title kui-list-header__toggle\"\n data-action={placeholder ? undefined : action}\n title={actionDisabled ? disabledReason : undefined}\n disabled={actionDisabled || placeholder || undefined}\n aria-label={accessibleLabel}\n aria-expanded={String(Boolean(expanded))}\n >\n <span class=\"kui-list-header__label\">{label}</span>\n {indicator}\n {renderedActionIcon && (\n <span class=\"kui-list-header__action-layer\">\n {renderedActionIcon}\n </span>\n )}\n </button>\n </header>\n );\n }\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(Boolean(renderedBadge))}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-divider={divider}\n data-indicator-tone={indicatorTone}\n data-toggle=\"false\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n >\n <div class=\"kui-list-header__title\">\n <h2 class=\"kui-list-header__label\" aria-label={accessibleLabel}>\n {label}\n </h2>\n {indicator}\n </div>\n {action && (\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__action\"\n data-action={placeholder ? undefined : action}\n aria-label={actionLabel}\n title={actionDisabled ? disabledReason : actionLabel}\n disabled={actionDisabled || placeholder || undefined}\n >\n {renderedActionIcon}\n </button>\n )}\n </header>\n );\n}\n"]}
@@ -0,0 +1,102 @@
1
+ import { jsxs, Fragment, jsx } from 'kerfjs/jsx-runtime';
2
+
3
+ // src/resizable-region.tsx
4
+ var clampRegionSize = (size, min, max) => Math.min(max, Math.max(min, Math.round(size)));
5
+ var resizeRegionFromPointer = (startSize, delta, edge) => startSize + delta * (edge === "start" ? -1 : 1);
6
+ function ResizeGrip({ axis }) {
7
+ return /* @__PURE__ */ jsx(
8
+ "svg",
9
+ {
10
+ "aria-hidden": "true",
11
+ viewBox: "0 0 24 24",
12
+ fill: "none",
13
+ stroke: "currentColor",
14
+ "stroke-width": "2",
15
+ "stroke-linecap": "round",
16
+ children: axis === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
17
+ /* @__PURE__ */ jsx("path", { d: "M9 6v12" }),
18
+ /* @__PURE__ */ jsx("path", { d: "M15 6v12" })
19
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
20
+ /* @__PURE__ */ jsx("path", { d: "M6 9h12" }),
21
+ /* @__PURE__ */ jsx("path", { d: "M6 15h12" })
22
+ ] })
23
+ }
24
+ );
25
+ }
26
+ function ResizableRegion({
27
+ id,
28
+ label,
29
+ size,
30
+ min,
31
+ max,
32
+ axis = "horizontal",
33
+ edge = "end",
34
+ collapsed = false,
35
+ transitioning = false,
36
+ separator = "auto",
37
+ collapseMotion = "slide",
38
+ contentOverflow = "clip",
39
+ presentation = "inline",
40
+ restoreControl,
41
+ restorePosition = axis === "horizontal" && edge === "end" ? "bottom-start" : "bottom-end",
42
+ handleIcon,
43
+ children
44
+ }) {
45
+ const expandedSize = clampRegionSize(size, min, max);
46
+ const resolved = collapsed ? 0 : expandedSize;
47
+ const orientation = axis === "horizontal" ? "vertical" : "horizontal";
48
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
49
+ /* @__PURE__ */ jsxs(
50
+ "section",
51
+ {
52
+ class: "kui-resizable-region",
53
+ "data-component": "resizable-region",
54
+ "data-region-id": id,
55
+ "data-axis": axis,
56
+ "data-edge": edge,
57
+ "data-collapsed": String(collapsed),
58
+ "data-transitioning": String(transitioning),
59
+ "data-separator": separator,
60
+ "data-collapse-motion": collapseMotion,
61
+ "data-content-overflow": contentOverflow,
62
+ "data-presentation": presentation,
63
+ style: `--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`,
64
+ "aria-label": label,
65
+ "aria-hidden": presentation === "hidden" ? "true" : void 0,
66
+ children: [
67
+ /* @__PURE__ */ jsx("div", { class: "kui-resizable-region__content", children }),
68
+ /* @__PURE__ */ jsx(
69
+ "div",
70
+ {
71
+ class: "kui-resizable-region__handle",
72
+ role: "separator",
73
+ tabindex: collapsed || presentation !== "inline" ? "-1" : "0",
74
+ "aria-label": `Resize ${label}`,
75
+ "aria-orientation": orientation,
76
+ "aria-valuemin": collapsed ? 0 : min,
77
+ "aria-valuemax": max,
78
+ "aria-valuenow": resolved,
79
+ "aria-hidden": collapsed || presentation !== "inline" ? "true" : void 0,
80
+ "data-kui-resize-handle": true,
81
+ "data-region-id": id,
82
+ children: /* @__PURE__ */ jsx("span", { class: "kui-resizable-region__handle-icon", "aria-hidden": "true", children: handleIcon ?? /* @__PURE__ */ jsx(ResizeGrip, { axis }) })
83
+ }
84
+ )
85
+ ]
86
+ }
87
+ ),
88
+ collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
89
+ "div",
90
+ {
91
+ class: "kui-resizable-region__restore",
92
+ "data-region-restore": id,
93
+ "data-position": restorePosition,
94
+ children: restoreControl
95
+ }
96
+ )
97
+ ] });
98
+ }
99
+
100
+ export { ResizableRegion, clampRegionSize, resizeRegionFromPointer };
101
+
102
+ //# sourceMappingURL=chunk-HP2B2L26.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/resizable-region.tsx"],"names":[],"mappings":"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","file":"chunk-HP2B2L26.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\nexport type ResizableRegionSeparator = 'auto' | 'hidden';\nexport type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';\nexport type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';\nexport type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';\nexport type ResizableRegionRestorePosition = 'bottom-start' | 'bottom-end';\n\nexport interface ResizableRegionProps {\n id: string;\n label: string;\n size: number;\n min: number;\n max: number;\n axis?: ResizableRegionAxis;\n edge?: ResizableRegionEdge;\n collapsed?: boolean;\n transitioning?: boolean;\n /** Whether the separator line is painted. The resize hit target remains available. */\n separator?: ResizableRegionSeparator;\n /** Keep the track change instant while optionally sliding the fixed-size content. */\n collapseMotion?: ResizableRegionCollapseMotion;\n /** Overflow policy for content such as an open popup inside a bottom drawer. */\n contentOverflow?: ResizableRegionContentOverflow;\n /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */\n presentation?: ResizableRegionPresentation;\n /** Always-available control rendered while collapsed, outside the clipped region. */\n restoreControl?: SafeHtml;\n /** Safe-area-aware viewport corner for `restoreControl`. */\n restorePosition?: ResizableRegionRestorePosition;\n /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */\n handleIcon?: SafeHtml;\n children: SafeHtml | SafeHtml[];\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) =>\n Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (\n startSize: number,\n delta: number,\n edge: ResizableRegionEdge,\n) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nfunction ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n >\n {axis === 'horizontal' ? (\n <>\n <path d=\"M9 6v12\"></path>\n <path d=\"M15 6v12\"></path>\n </>\n ) : (\n <>\n <path d=\"M6 9h12\"></path>\n <path d=\"M6 15h12\"></path>\n </>\n )}\n </svg>\n );\n}\n\nexport function ResizableRegion({\n id,\n label,\n size,\n min,\n max,\n axis = 'horizontal',\n edge = 'end',\n collapsed = false,\n transitioning = false,\n separator = 'auto',\n collapseMotion = 'slide',\n contentOverflow = 'clip',\n presentation = 'inline',\n restoreControl,\n restorePosition = axis === 'horizontal' && edge === 'end'\n ? 'bottom-start'\n : 'bottom-end',\n handleIcon,\n children,\n}: ResizableRegionProps) {\n const expandedSize = clampRegionSize(size, min, max);\n const resolved = collapsed ? 0 : expandedSize;\n const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n return (\n <>\n <section\n class=\"kui-resizable-region\"\n data-component=\"resizable-region\"\n data-region-id={id}\n data-axis={axis}\n data-edge={edge}\n data-collapsed={String(collapsed)}\n data-transitioning={String(transitioning)}\n data-separator={separator}\n data-collapse-motion={collapseMotion}\n data-content-overflow={contentOverflow}\n data-presentation={presentation}\n style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`}\n aria-label={label}\n aria-hidden={presentation === 'hidden' ? 'true' : undefined}\n >\n <div class=\"kui-resizable-region__content\">{children}</div>\n <div\n class=\"kui-resizable-region__handle\"\n role=\"separator\"\n tabindex={collapsed || presentation !== 'inline' ? '-1' : '0'}\n aria-label={`Resize ${label}`}\n aria-orientation={orientation}\n aria-valuemin={collapsed ? 0 : min}\n aria-valuemax={max}\n aria-valuenow={resolved}\n aria-hidden={\n collapsed || presentation !== 'inline' ? 'true' : undefined\n }\n data-kui-resize-handle\n data-region-id={id}\n >\n <span class=\"kui-resizable-region__handle-icon\" aria-hidden=\"true\">\n {handleIcon ?? <ResizeGrip axis={axis} />}\n </span>\n </div>\n </section>\n {collapsed && restoreControl && presentation !== 'hidden' && (\n <div\n class=\"kui-resizable-region__restore\"\n data-region-restore={id}\n data-position={restorePosition}\n >\n {restoreControl}\n </div>\n )}\n </>\n );\n}\n"]}