@kerfjs/ui 5.0.0-beta.97 → 5.0.0-beta.99

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 (416) hide show
  1. package/README.md +42 -1
  2. package/ai/application-ui-diagnostic-ids-v1.json +1 -0
  3. package/ai/component-catalog.json +487 -66
  4. package/ai/component-catalog.schema.json +1 -1
  5. package/ai/component-composition-rules.json +22 -2
  6. package/ai/component-composition.json +360 -33
  7. package/ai/component-composition.schema.json +1 -1
  8. package/ai/components/README.md +18 -17
  9. package/ai/components/anchored-surface.md +13 -0
  10. package/ai/components/application-tabs.md +1 -1
  11. package/ai/components/chip.md +9 -5
  12. package/ai/components/choice-chips.md +15 -8
  13. package/ai/components/collapsible-panel.md +3 -2
  14. package/ai/components/composer.md +83 -0
  15. package/ai/components/content-item.md +2 -2
  16. package/ai/components/corner-status.md +1 -1
  17. package/ai/components/document-baseline.md +3 -3
  18. package/ai/components/foundation.md +2 -2
  19. package/ai/components/layout.md +1 -1
  20. package/ai/components/list-action-row.md +5 -1
  21. package/ai/components/list-item.md +5 -1
  22. package/ai/components/list.md +19 -3
  23. package/ai/components/nav-stack.md +11 -2
  24. package/ai/components/pane.md +13 -4
  25. package/ai/components/popup-menu.md +4 -4
  26. package/ai/components/recipe-app-shell.md +3 -3
  27. package/ai/components/recipe-collapsible-sidebar.md +3 -3
  28. package/ai/components/recipe-compact-toolbar.md +1 -1
  29. package/ai/components/recipe-composer-form.md +3 -3
  30. package/ai/components/recipe-list-detail-dialog.md +2 -2
  31. package/ai/components/recipe-list-workspace-states.md +3 -3
  32. package/ai/components/recipe-loading-inspector.md +1 -1
  33. package/ai/components/recipe-navigation-sidebar.md +3 -3
  34. package/ai/components/recipe-navigation-stack.md +3 -3
  35. package/ai/components/recipe-workspace-header.md +3 -3
  36. package/ai/components/resize.md +2 -2
  37. package/ai/components/split-view.md +4 -2
  38. package/ai/components/sunken-panel.md +2 -2
  39. package/ai/components/surface-scaffold.md +15 -3
  40. package/ai/components/tab-bar.md +1 -0
  41. package/ai/components/tab-navigator.md +4 -0
  42. package/ai/components/toolbar-control-group.md +2 -0
  43. package/ai/components/toolbar-text.md +1 -0
  44. package/ai/components/toolbar.md +1 -0
  45. package/ai/components/workbench.md +1 -0
  46. package/ai/public-api-signatures-v1.md +504 -80
  47. package/ai/skill.md +41 -14
  48. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  49. package/analyzer/component-ownership.mjs +1 -1
  50. package/analyzer/index.mjs +41 -14
  51. package/dist/anchored-surface.d.ts +30 -2
  52. package/dist/anchored-surface.js +1 -1
  53. package/dist/app-tab.js +1 -1
  54. package/dist/browser/composer.js +4 -0
  55. package/dist/catalog-resources.d.ts +3 -2
  56. package/dist/catalog-resources.js +4 -4
  57. package/dist/catalog-resources.js.map +1 -1
  58. package/dist/catalog.d.ts +39 -8
  59. package/dist/catalog.js +55 -32
  60. package/dist/catalog.js.map +1 -1
  61. package/dist/chip.d.ts +41 -9
  62. package/dist/chip.js +1 -1
  63. package/dist/choice-chips.d.ts +40 -16
  64. package/dist/choice-chips.js +1 -1
  65. package/dist/chunk-34U4ANDJ.js +119 -0
  66. package/dist/chunk-34U4ANDJ.js.map +1 -0
  67. package/dist/{chunk-36TL6BCR.js → chunk-3GLYIIFR.js} +34 -6
  68. package/dist/chunk-3GLYIIFR.js.map +1 -0
  69. package/dist/{chunk-HWY4BSLS.js → chunk-3VXDSIBJ.js} +2 -2
  70. package/dist/{chunk-HWY4BSLS.js.map → chunk-3VXDSIBJ.js.map} +1 -1
  71. package/dist/chunk-3WYREXW4.js +120 -0
  72. package/dist/chunk-3WYREXW4.js.map +1 -0
  73. package/dist/chunk-AV7CPAPT.js +82 -0
  74. package/dist/chunk-AV7CPAPT.js.map +1 -0
  75. package/dist/{chunk-XK4E225T.js → chunk-B53PS2LE.js} +2 -2
  76. package/dist/{chunk-XK4E225T.js.map → chunk-B53PS2LE.js.map} +1 -1
  77. package/dist/{chunk-R42D2BAO.js → chunk-CA7LNX3J.js} +2 -2
  78. package/dist/{chunk-R42D2BAO.js.map → chunk-CA7LNX3J.js.map} +1 -1
  79. package/dist/{chunk-AYHC62OZ.js → chunk-CMETHPKR.js} +26 -29
  80. package/dist/chunk-CMETHPKR.js.map +1 -0
  81. package/dist/{chunk-Y43B6DS3.js → chunk-CVD5IZGB.js} +2 -2
  82. package/dist/{chunk-Y43B6DS3.js.map → chunk-CVD5IZGB.js.map} +1 -1
  83. package/dist/{chunk-6STQXRT4.js → chunk-CXZXHZTR.js} +121 -12
  84. package/dist/chunk-CXZXHZTR.js.map +1 -0
  85. package/dist/{chunk-GZE2XVKC.js → chunk-DZJ4GBSP.js} +3 -3
  86. package/dist/{chunk-GZE2XVKC.js.map → chunk-DZJ4GBSP.js.map} +1 -1
  87. package/dist/chunk-ELCMSQNJ.js +49 -0
  88. package/dist/chunk-ELCMSQNJ.js.map +1 -0
  89. package/dist/{chunk-P74VXMB6.js → chunk-EOO6PYGF.js} +7 -14
  90. package/dist/chunk-EOO6PYGF.js.map +1 -0
  91. package/dist/{chunk-PRG4CL3Q.js → chunk-FR76ZJQC.js} +21 -19
  92. package/dist/chunk-FR76ZJQC.js.map +1 -0
  93. package/dist/{chunk-QQ3TTWFH.js → chunk-G3J7JDP6.js} +1 -1
  94. package/dist/{chunk-QQ3TTWFH.js.map → chunk-G3J7JDP6.js.map} +1 -1
  95. package/dist/{chunk-IGTWXPTN.js → chunk-HGV7J4T6.js} +3 -3
  96. package/dist/{chunk-IGTWXPTN.js.map → chunk-HGV7J4T6.js.map} +1 -1
  97. package/dist/{chunk-YWQGSUF2.js → chunk-HLDRH23D.js} +3 -3
  98. package/dist/{chunk-YWQGSUF2.js.map → chunk-HLDRH23D.js.map} +1 -1
  99. package/dist/{chunk-PBT3CPPY.js → chunk-HQZYKJ56.js} +24 -4
  100. package/dist/chunk-HQZYKJ56.js.map +1 -0
  101. package/dist/{chunk-V6W56V3N.js → chunk-HZPHCSCS.js} +16 -3
  102. package/dist/chunk-HZPHCSCS.js.map +1 -0
  103. package/dist/{chunk-GJYQ27C2.js → chunk-INI4WDWC.js} +8 -1
  104. package/dist/chunk-INI4WDWC.js.map +1 -0
  105. package/dist/{chunk-U657IHFB.js → chunk-IQSRHXZR.js} +10 -4
  106. package/dist/chunk-IQSRHXZR.js.map +1 -0
  107. package/dist/{chunk-KQDU7Z7P.js → chunk-K4AT3V3J.js} +2 -1
  108. package/dist/chunk-K4AT3V3J.js.map +1 -0
  109. package/dist/{chunk-QIAPOWHH.js → chunk-KCS6NJ3O.js} +2 -2
  110. package/dist/{chunk-QIAPOWHH.js.map → chunk-KCS6NJ3O.js.map} +1 -1
  111. package/dist/{chunk-UKKRPP56.js → chunk-LOSRXZAH.js} +2 -2
  112. package/dist/{chunk-UKKRPP56.js.map → chunk-LOSRXZAH.js.map} +1 -1
  113. package/dist/{chunk-ROZLJULF.js → chunk-MF6ZUUJZ.js} +8 -3
  114. package/dist/chunk-MF6ZUUJZ.js.map +1 -0
  115. package/dist/{chunk-6IVNMC6R.js → chunk-MHMWQ7RB.js} +2 -2
  116. package/dist/{chunk-6IVNMC6R.js.map → chunk-MHMWQ7RB.js.map} +1 -1
  117. package/dist/{chunk-JYD7G4RG.js → chunk-PIVY32AE.js} +15 -5
  118. package/dist/chunk-PIVY32AE.js.map +1 -0
  119. package/dist/{chunk-BU23Z5HZ.js → chunk-PYBBYSZ3.js} +13 -18
  120. package/dist/chunk-PYBBYSZ3.js.map +1 -0
  121. package/dist/chunk-QDSZTQXL.js +28 -0
  122. package/dist/chunk-QDSZTQXL.js.map +1 -0
  123. package/dist/{chunk-YXOMI7ES.js → chunk-QIG4IGUP.js} +2 -2
  124. package/dist/{chunk-YXOMI7ES.js.map → chunk-QIG4IGUP.js.map} +1 -1
  125. package/dist/{chunk-6BRRUPJY.js → chunk-QROYYGWU.js} +3 -3
  126. package/dist/chunk-QROYYGWU.js.map +1 -0
  127. package/dist/{chunk-FOQK4F3L.js → chunk-RHD7RKGI.js} +28 -7
  128. package/dist/chunk-RHD7RKGI.js.map +1 -0
  129. package/dist/{chunk-BBU2SPRE.js → chunk-T4WJ5VGP.js} +4 -4
  130. package/dist/{chunk-BBU2SPRE.js.map → chunk-T4WJ5VGP.js.map} +1 -1
  131. package/dist/{chunk-6NOLL5KG.js → chunk-TGLUDQP2.js} +3 -3
  132. package/dist/{chunk-6NOLL5KG.js.map → chunk-TGLUDQP2.js.map} +1 -1
  133. package/dist/{chunk-HO6FU3G7.js → chunk-TLMMFQWM.js} +4 -4
  134. package/dist/{chunk-HO6FU3G7.js.map → chunk-TLMMFQWM.js.map} +1 -1
  135. package/dist/chunk-UMKV7YVQ.js +20 -0
  136. package/dist/chunk-UMKV7YVQ.js.map +1 -0
  137. package/dist/{chunk-M2NRCFRO.js → chunk-VFYO3UGZ.js} +2 -2
  138. package/dist/{chunk-M2NRCFRO.js.map → chunk-VFYO3UGZ.js.map} +1 -1
  139. package/dist/{chunk-YOKEL75M.js → chunk-WVS6CUCT.js} +2 -2
  140. package/dist/{chunk-YOKEL75M.js.map → chunk-WVS6CUCT.js.map} +1 -1
  141. package/dist/{chunk-MN3POJFN.js → chunk-YMUIQRWK.js} +2 -2
  142. package/dist/{chunk-MN3POJFN.js.map → chunk-YMUIQRWK.js.map} +1 -1
  143. package/dist/{chunk-Y3LC7JQO.js → chunk-YOA5W5ZH.js} +2 -2
  144. package/dist/{chunk-Y3LC7JQO.js.map → chunk-YOA5W5ZH.js.map} +1 -1
  145. package/dist/{chunk-44A6LP54.js → chunk-YQ2AC4E2.js} +2 -2
  146. package/dist/{chunk-44A6LP54.js.map → chunk-YQ2AC4E2.js.map} +1 -1
  147. package/dist/chunk-ZNROKDSZ.js +54 -0
  148. package/dist/chunk-ZNROKDSZ.js.map +1 -0
  149. package/dist/collapsible-panel.d.ts +3 -2
  150. package/dist/collapsible-panel.js +4 -3
  151. package/dist/collapsible-panel.js.map +1 -1
  152. package/dist/composer.d.ts +62 -0
  153. package/dist/composer.js +5 -0
  154. package/dist/composer.js.map +1 -0
  155. package/dist/corner-status.d.ts +1 -1
  156. package/dist/corner-status.js +1 -1
  157. package/dist/css-values.d.ts +9 -1
  158. package/dist/css-values.js +1 -1
  159. package/dist/disclosure-arrow.js +1 -1
  160. package/dist/empty-state.js +1 -1
  161. package/dist/grid.js +1 -1
  162. package/dist/icon-button.js +1 -1
  163. package/dist/icon-toggle-button.js +1 -1
  164. package/dist/index.d.ts +10 -5
  165. package/dist/index.js +40 -37
  166. package/dist/list-action-row.d.ts +10 -2
  167. package/dist/list-action-row.js +1 -1
  168. package/dist/list-header.js +1 -1
  169. package/dist/list-icon-tile-B8dr97OW.d.ts +18 -0
  170. package/dist/list-item.d.ts +10 -3
  171. package/dist/list-item.js +1 -1
  172. package/dist/list.d.ts +36 -4
  173. package/dist/list.js +1 -1
  174. package/dist/loading-spinner.js +1 -1
  175. package/dist/lucide-icon.js +1 -1
  176. package/dist/{nav-stack-BvSKY448.d.ts → nav-stack-VXTumzKa.d.ts} +53 -4
  177. package/dist/nav-stack.d.ts +3 -2
  178. package/dist/nav-stack.js +2 -1
  179. package/dist/pane.d.ts +40 -3
  180. package/dist/pane.js +1 -1
  181. package/dist/{panel-toolbar-CL9tYOkh.d.ts → panel-toolbar-vg6Ir5Dy.d.ts} +6 -1
  182. package/dist/popup-menu-register.d.ts +2 -1
  183. package/dist/popup-menu-register.js +97 -22
  184. package/dist/popup-menu-register.js.map +1 -1
  185. package/dist/popup-menu.js +1 -1
  186. package/dist/row.js +1 -1
  187. package/dist/scroll-clearance-BikHljTc.d.ts +14 -0
  188. package/dist/select-register.js +11 -0
  189. package/dist/select-register.js.map +1 -1
  190. package/dist/select.js +1 -1
  191. package/dist/skeleton.js +1 -1
  192. package/dist/spacer.js +1 -1
  193. package/dist/split-button.js +1 -1
  194. package/dist/split-view.d.ts +7 -5
  195. package/dist/split-view.js +6 -3
  196. package/dist/split-view.js.map +1 -1
  197. package/dist/state-banner.d.ts +6 -1
  198. package/dist/state-banner.js +1 -1
  199. package/dist/styles/anchored-surface.css +27 -1
  200. package/dist/styles/catalog/components/catalog-example-stack.css +5 -0
  201. package/dist/styles/catalog/components/catalog-example.css +33 -0
  202. package/dist/styles/catalog/components/catalog-stage.css +7 -0
  203. package/dist/styles/chip.css +70 -0
  204. package/dist/styles/components/actions/popup-menu/popup-menu.css +21 -4
  205. package/dist/styles/components/actions/toolbar/toolbar.css +19 -0
  206. package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +75 -1
  207. package/dist/styles/components/actions/toolbar-text/toolbar-text.css +75 -0
  208. package/dist/styles/components/collections/list/list.css +77 -7
  209. package/dist/styles/components/collections/list-action-row/list-action-row.css +177 -22
  210. package/dist/styles/components/collections/list-item/list-item.css +158 -11
  211. package/dist/styles/components/feedback/anchored-surface/anchored-surface.css +27 -1
  212. package/dist/styles/components/feedback/chip/chip.css +70 -0
  213. package/dist/styles/components/feedback/state-banner/state-banner.css +24 -13
  214. package/dist/styles/components/forms/composer/composer.css +100 -0
  215. package/dist/styles/components/forms/select/select.css +1 -0
  216. package/dist/styles/components/forms/token-search-field/token-search-field.css +13 -2
  217. package/dist/styles/components/layout/pane/pane.css +81 -2
  218. package/dist/styles/components/navigation/nav-stack/nav-stack.css +84 -0
  219. package/dist/styles/components/navigation/tab-bar/tab-bar.css +15 -4
  220. package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +79 -4
  221. package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +195 -0
  222. package/dist/styles/composer.css +100 -0
  223. package/dist/styles/foundation.css +66 -0
  224. package/dist/styles/list-action-row.css +177 -22
  225. package/dist/styles/list-item.css +158 -11
  226. package/dist/styles/list.css +77 -7
  227. package/dist/styles/nav-stack.css +84 -0
  228. package/dist/styles/pane.css +81 -2
  229. package/dist/styles/popup-menu.css +21 -4
  230. package/dist/styles/select.css +1 -0
  231. package/dist/styles/state-banner.css +24 -13
  232. package/dist/styles/styles.css +1 -0
  233. package/dist/styles/surface-scaffold.css +195 -0
  234. package/dist/styles/tab-bar.css +15 -4
  235. package/dist/styles/tab-navigator.css +79 -4
  236. package/dist/styles/token-search-field.css +13 -2
  237. package/dist/styles/toolbar-control-group.css +75 -1
  238. package/dist/styles/toolbar-text.css +75 -0
  239. package/dist/styles/toolbar.css +19 -0
  240. package/dist/styles/webawesome.css +18 -0
  241. package/dist/surface-scaffold-register.d.ts +6 -1
  242. package/dist/surface-scaffold-register.js +89 -3
  243. package/dist/surface-scaffold-register.js.map +1 -1
  244. package/dist/surface-scaffold.d.ts +66 -7
  245. package/dist/surface-scaffold.js +1 -1
  246. package/dist/tab-navigator.d.ts +23 -2
  247. package/dist/tab-navigator.js +2 -0
  248. package/dist/tab-navigator.js.map +1 -1
  249. package/dist/token-search-field.d.ts +1 -1
  250. package/dist/token-search-field.js +1 -1
  251. package/dist/{token-search-model-DTcTXWMS.d.ts → token-search-model-aYR0YAei.d.ts} +32 -2
  252. package/dist/token-search-model.d.ts +1 -1
  253. package/dist/toolbar-control-group.js +1 -1
  254. package/dist/toolbar-text.js +1 -1
  255. package/dist/toolbar.d.ts +1 -0
  256. package/dist/value-table.js +1 -1
  257. package/dist/wire-catalog.d.ts +3 -2
  258. package/dist/wire-catalog.js +2 -2
  259. package/dist/wire-composers.d.ts +16 -0
  260. package/dist/wire-composers.js +3 -0
  261. package/dist/wire-composers.js.map +1 -0
  262. package/dist/wire-list-focus-scroll.d.ts +16 -0
  263. package/dist/wire-list-focus-scroll.js +3 -0
  264. package/dist/wire-list-focus-scroll.js.map +1 -0
  265. package/dist/wire-nav-stack.js +135 -0
  266. package/dist/wire-nav-stack.js.map +1 -1
  267. package/dist/wire-scroll-dividers.d.ts +9 -0
  268. package/dist/wire-scroll-dividers.js +1 -1
  269. package/dist/wire-tab-bars.js +1 -1
  270. package/dist/wire-tab-navigator.d.ts +3 -1
  271. package/dist/wire-tab-navigator.js +133 -1
  272. package/dist/wire-tab-navigator.js.map +1 -1
  273. package/dist/wire-token-search-fields.d.ts +1 -1
  274. package/dist/wire-token-search-fields.js +1 -1
  275. package/dist/workbench.d.ts +8 -3
  276. package/dist/workbench.js +2 -1
  277. package/docs/accessibility.md +132 -3
  278. package/docs/anchored-surface.md +46 -4
  279. package/docs/app-layouts.md +23 -2
  280. package/docs/apple-hig.md +1 -0
  281. package/docs/catalog.md +61 -9
  282. package/docs/collapsible-panel.md +9 -6
  283. package/docs/component-contract.md +46 -13
  284. package/docs/component-selection.md +147 -20
  285. package/docs/composer.md +143 -0
  286. package/docs/design/templates/choice-chips/multiple-dark.svg +1 -0
  287. package/docs/design/templates/choice-chips/multiple.svg +1 -0
  288. package/docs/design/templates/choice-chips-dark.svg +1 -1
  289. package/docs/design/templates/choice-chips.svg +1 -1
  290. package/docs/design/templates/composer/chat-dark.svg +1 -0
  291. package/docs/design/templates/composer/chat.svg +1 -0
  292. package/docs/design/templates/composer/prompt-dark.svg +1 -0
  293. package/docs/design/templates/composer/prompt.svg +1 -0
  294. package/docs/design/templates/composer-dark.svg +1 -0
  295. package/docs/design/templates/composer.svg +1 -0
  296. package/docs/design/templates/empty-state/filtered-dark.svg +1 -1
  297. package/docs/design/templates/empty-state/filtered.svg +1 -1
  298. package/docs/design/templates/empty-state/with-action-dark.svg +1 -1
  299. package/docs/design/templates/empty-state/with-action.svg +1 -1
  300. package/docs/design/templates/empty-state-dark.svg +1 -1
  301. package/docs/design/templates/empty-state.svg +1 -1
  302. package/docs/design/templates/list/compact-dark.svg +1 -1
  303. package/docs/design/templates/list/compact.svg +1 -1
  304. package/docs/design/templates/list-action-row/default-dark.svg +1 -1
  305. package/docs/design/templates/list-action-row/default.svg +1 -1
  306. package/docs/design/templates/list-action-row/icon-tile-dark.svg +1 -0
  307. package/docs/design/templates/list-action-row/icon-tile.svg +1 -0
  308. package/docs/design/templates/list-action-row/selected-dark.svg +1 -1
  309. package/docs/design/templates/list-action-row/selected.svg +1 -1
  310. package/docs/design/templates/list-action-row/trailing-menu-dark.svg +1 -1
  311. package/docs/design/templates/list-action-row/trailing-menu.svg +1 -1
  312. package/docs/design/templates/list-action-row-dark.svg +1 -1
  313. package/docs/design/templates/list-action-row.svg +1 -1
  314. package/docs/design/templates/list-dark.svg +1 -1
  315. package/docs/design/templates/list-header/size-l-dark.svg +1 -1
  316. package/docs/design/templates/list-header/size-l.svg +1 -1
  317. package/docs/design/templates/list-header/size-m-dark.svg +1 -1
  318. package/docs/design/templates/list-header/size-m.svg +1 -1
  319. package/docs/design/templates/list-header/size-xl-dark.svg +1 -1
  320. package/docs/design/templates/list-header/size-xl.svg +1 -1
  321. package/docs/design/templates/list-header-dark.svg +1 -1
  322. package/docs/design/templates/list-header.svg +1 -1
  323. package/docs/design/templates/list-item/icon-tile-dark.svg +1 -0
  324. package/docs/design/templates/list-item/icon-tile.svg +1 -0
  325. package/docs/design/templates/list-item/selected-dark.svg +1 -1
  326. package/docs/design/templates/list-item/selected.svg +1 -1
  327. package/docs/design/templates/list-item-dark.svg +1 -1
  328. package/docs/design/templates/list-item.svg +1 -1
  329. package/docs/design/templates/list.svg +1 -1
  330. package/docs/design/templates/segmented-control-dark.svg +1 -1
  331. package/docs/design/templates/segmented-control.svg +1 -1
  332. package/docs/design/templates/skeleton-dark.svg +1 -1
  333. package/docs/design/templates/skeleton.svg +1 -1
  334. package/docs/design/templates/state-banner/danger-dark.svg +1 -1
  335. package/docs/design/templates/state-banner/danger.svg +1 -1
  336. package/docs/design/templates/state-banner/info-badge-dark.svg +1 -1
  337. package/docs/design/templates/state-banner/info-badge.svg +1 -1
  338. package/docs/design/templates/state-banner/info-dark.svg +1 -1
  339. package/docs/design/templates/state-banner/info.svg +1 -1
  340. package/docs/design/templates/state-banner/strip-dark.svg +1 -1
  341. package/docs/design/templates/state-banner/strip.svg +1 -1
  342. package/docs/design/templates/state-banner/success-dark.svg +1 -1
  343. package/docs/design/templates/state-banner/success.svg +1 -1
  344. package/docs/design/templates/state-banner/warning-dark.svg +1 -1
  345. package/docs/design/templates/state-banner/warning.svg +1 -1
  346. package/docs/design/templates/state-banner-dark.svg +1 -1
  347. package/docs/design/templates/state-banner.svg +1 -1
  348. package/docs/design/templates/tab-bar-dark.svg +1 -1
  349. package/docs/design/templates/tab-bar.svg +1 -1
  350. package/docs/design/templates/token-search-field-dark.svg +1 -1
  351. package/docs/design/templates/token-search-field.svg +1 -1
  352. package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
  353. package/docs/design/templates/toolbar-control-group.svg +1 -1
  354. package/docs/design/templates/toolbar-dark.svg +1 -1
  355. package/docs/design/templates/toolbar-text/default-dark.svg +1 -1
  356. package/docs/design/templates/toolbar-text/default.svg +1 -1
  357. package/docs/design/templates/toolbar-text/large-dark.svg +1 -1
  358. package/docs/design/templates/toolbar-text/large.svg +1 -1
  359. package/docs/design/templates/toolbar-text-dark.svg +1 -1
  360. package/docs/design/templates/toolbar-text.svg +1 -1
  361. package/docs/design/templates/toolbar.svg +1 -1
  362. package/docs/design/templates/value-table/details-dark.svg +1 -1
  363. package/docs/design/templates/value-table/details.svg +1 -1
  364. package/docs/design/templates/value-table-dark.svg +1 -1
  365. package/docs/design/templates/value-table.svg +1 -1
  366. package/docs/design-philosophy.md +9 -1
  367. package/docs/examples/command-palette-adapter.tsx +3 -3
  368. package/docs/layout.md +147 -14
  369. package/docs/nav-stack.md +132 -8
  370. package/docs/recipes.md +9 -9
  371. package/docs/split-view.md +3 -3
  372. package/docs/sunken-panel.md +2 -2
  373. package/docs/surface-scaffold.md +138 -7
  374. package/docs/tab-navigator.md +38 -1
  375. package/docs/type-contracts.md +16 -16
  376. package/docs/ui-analyzer.md +3 -1
  377. package/docs/ui-doctor.md +71 -0
  378. package/docs/ux-demo.md +6 -6
  379. package/docs/webawesome-theme.md +7 -0
  380. package/docs/workbench.md +10 -6
  381. package/docs/writing.md +152 -0
  382. package/doctor/copy-capitalization-checks.mjs +591 -0
  383. package/doctor/index.mjs +17 -8
  384. package/llms.txt +105 -11
  385. package/package.json +15 -1
  386. package/ux-demo/recipes/app-shell.tsx +11 -11
  387. package/ux-demo/recipes/collapsible-sidebar.tsx +12 -11
  388. package/ux-demo/recipes/compact-toolbar.tsx +10 -10
  389. package/ux-demo/recipes/composer-form.tsx +8 -8
  390. package/ux-demo/recipes/list-detail-dialog.tsx +13 -13
  391. package/ux-demo/recipes/list-workspace-states.tsx +13 -13
  392. package/ux-demo/recipes/loading-inspector.tsx +10 -10
  393. package/ux-demo/recipes/navigation-sidebar.tsx +7 -7
  394. package/ux-demo/recipes/navigation-stack.tsx +5 -5
  395. package/ux-demo/recipes/workspace-header.tsx +5 -5
  396. package/dist/chunk-36TL6BCR.js.map +0 -1
  397. package/dist/chunk-4LOK4634.js +0 -21
  398. package/dist/chunk-4LOK4634.js.map +0 -1
  399. package/dist/chunk-6BRRUPJY.js.map +0 -1
  400. package/dist/chunk-6STQXRT4.js.map +0 -1
  401. package/dist/chunk-76PWEN5Y.js +0 -64
  402. package/dist/chunk-76PWEN5Y.js.map +0 -1
  403. package/dist/chunk-AYHC62OZ.js.map +0 -1
  404. package/dist/chunk-BU23Z5HZ.js.map +0 -1
  405. package/dist/chunk-DQDTZE4W.js +0 -70
  406. package/dist/chunk-DQDTZE4W.js.map +0 -1
  407. package/dist/chunk-FOQK4F3L.js.map +0 -1
  408. package/dist/chunk-GJYQ27C2.js.map +0 -1
  409. package/dist/chunk-JYD7G4RG.js.map +0 -1
  410. package/dist/chunk-KQDU7Z7P.js.map +0 -1
  411. package/dist/chunk-P74VXMB6.js.map +0 -1
  412. package/dist/chunk-PBT3CPPY.js.map +0 -1
  413. package/dist/chunk-PRG4CL3Q.js.map +0 -1
  414. package/dist/chunk-ROZLJULF.js.map +0 -1
  415. package/dist/chunk-U657IHFB.js.map +0 -1
  416. package/dist/chunk-V6W56V3N.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n collapsiblePanelToggleIcon,\n composedPanelBody,\n groupSizeFor,\n type PanelBottomToolbar,\n type PanelChromePlacement,\n type PanelSide,\n type PanelToggle,\n type PanelToggleAttributes,\n type PanelToolbar,\n relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n ResizableRegionCollapseMotion,\n ResizableRegionContentOverflow,\n ResizableRegionPresentation,\n ResizableRegionRestorePosition,\n ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n 'data-collapsible-target': panelId,\n // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n // another control as the toggle moves between toolbars.\n 'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n /** The panel this toggle controls. */\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state (drives the icon direction). */\n collapsed: boolean;\n /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n action: string;\n /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n panelId?: string;\n /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n label?: string;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n side,\n collapsed,\n action,\n panelId,\n label,\n className = '',\n slot,\n}: CollapsiblePanelToggleProps) {\n const glyph = collapsiblePanelToggleIcon(side, collapsed);\n const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n return (\n <button\n type=\"button\"\n class={`kui-collapsible-panel__toggle ${className}`.trim()}\n data-action={action}\n data-collapsible-target={panelId}\n aria-expanded={String(!collapsed)}\n aria-label={accessible}\n slot={slot}\n >\n <LucideIcon icon={glyph.icon} name={glyph.name} />\n </button>\n );\n}\n\nexport interface CollapsiblePanelProps {\n /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n id: string;\n /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n side: CollapsiblePanelSide;\n /** Whether the panel is currently collapsed (the app owns this signal). */\n collapsed?: boolean;\n /** Rail width or drawer height in px. Overrides the CSS default. */\n size?: number;\n /** Accessible label for the panel region. */\n label?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n tabIndex?: 0 | -1;\n /** Keep the standard focus outline visible while the panel is expanded. */\n outlined?: boolean;\n /** Panel content. */\n children?: KerfUiContent;\n /**\n * The panel's top toolbar, composed so its groups follow the panel's open\n * state. With it, `children` renders in a `Pane` below the toolbar; render\n * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n * marked groups and toggle stay reachable while the panel is collapsed.\n */\n toolbar?: CollapsiblePanelToolbar;\n /** Fixed content below a toolbar panel's top toolbar. */\n header?: KerfUiContent;\n headerList?: ListConfig;\n headerPlacement?: CollapsiblePanelChromePlacement;\n /** Fixed content above a toolbar panel's bottom toolbar. */\n footer?: KerfUiContent;\n footerList?: ListConfig;\n bottomToolbar?: CollapsiblePanelBottomToolbar;\n footerPlacement?: CollapsiblePanelChromePlacement;\n /**\n * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n * without a `toolbar`, where `children` renders as given.\n */\n pane?: PaneConfig;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n id,\n side,\n collapsed = false,\n size,\n label,\n tabIndex,\n outlined = false,\n children,\n toolbar,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n pane,\n separator = 'auto',\n collapseMotion = 'slide',\n contentOverflow = 'clip',\n presentation = 'inline',\n restoreControl,\n restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n className = '',\n}: CollapsiblePanelProps) {\n const sizeVar =\n side === 'bottom'\n ? '--kui-collapsible-panel-height'\n : '--kui-collapsible-panel-width';\n return (\n <>\n <aside\n class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n data-component=\"collapsible-panel\"\n data-collapsible-panel={id}\n data-side={side}\n data-collapsed={String(collapsed)}\n data-outlined={\n !collapsed && presentation !== 'hidden' && outlined\n ? 'true'\n : undefined\n }\n data-separator={separator}\n data-collapse-motion={collapseMotion}\n data-content-overflow={contentOverflow}\n data-presentation={presentation}\n aria-label={label || undefined}\n aria-hidden={\n collapsed || presentation === 'hidden' ? 'true' : undefined\n }\n tabindex={\n collapsed || presentation === 'hidden'\n ? tabIndex === undefined\n ? undefined\n : -1\n : tabIndex\n }\n inert={collapsed}\n style={size ? `${sizeVar}: ${size}px` : undefined}\n >\n <div class=\"kui-collapsible-panel__content\">\n {toolbar\n ? composedPanelBody({\n toolbar,\n side,\n collapsed,\n attributes: toggleAttributes(id),\n pane,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n content: children,\n })\n : children}\n </div>\n </aside>\n {collapsed && restoreControl && presentation !== 'hidden' && (\n <div\n class=\"kui-collapsible-panel__restore\"\n data-panel-restore={id}\n data-position={restorePosition}\n >\n {restoreControl}\n </div>\n )}\n </>\n );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n /** The panel's `id`. */\n panelId: string;\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state. */\n collapsed: boolean;\n /** The same `toolbar` the panel receives. */\n toolbar: CollapsiblePanelToolbar;\n /**\n * Density of the toolbar the groups are placed in, so the standard toggle\n * fits it (`compact` in a `density=\"compact\"` toolbar). Defaults to\n * `default`.\n */\n density?: ToolbarConfig['density'];\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n panelId,\n side,\n collapsed,\n toolbar,\n density,\n}: CollapsiblePanelRelocatedProps) {\n return (\n <>\n {relocatedPanelGroups(\n toolbar,\n side,\n collapsed,\n toggleAttributes(panelId),\n groupSizeFor(density),\n )}\n </>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n collapsiblePanelToggleIcon,\n composedPanelBody,\n groupSizeFor,\n type PanelBottomToolbar,\n type PanelChromePlacement,\n type PanelSide,\n type PanelToggle,\n type PanelToggleAttributes,\n type PanelToolbar,\n relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n ResizableRegionCollapseMotion,\n ResizableRegionContentOverflow,\n ResizableRegionPresentation,\n ResizableRegionRestorePosition,\n ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n 'data-collapsible-target': panelId,\n // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n // another control as the toggle moves between toolbars.\n 'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n /** The panel this toggle controls. */\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state (drives the icon direction). */\n collapsed: boolean;\n /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n action: string;\n /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n panelId?: string;\n /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n label?: string;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n side,\n collapsed,\n action,\n panelId,\n label,\n className = '',\n slot,\n}: CollapsiblePanelToggleProps) {\n const glyph = collapsiblePanelToggleIcon(side, collapsed);\n const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n return (\n <button\n type=\"button\"\n class={`kui-collapsible-panel__toggle ${className}`.trim()}\n data-action={action}\n data-collapsible-target={panelId}\n aria-expanded={String(!collapsed)}\n aria-label={accessible}\n slot={slot}\n >\n <LucideIcon icon={glyph.icon} name={glyph.name} />\n </button>\n );\n}\n\nexport interface CollapsiblePanelProps {\n /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n id: string;\n /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n side: CollapsiblePanelSide;\n /** Whether the panel is currently collapsed (the app owns this signal). */\n collapsed?: boolean;\n /** Rail width or drawer height in px. Overrides the CSS default. */\n size?: number;\n /** Accessible label for the panel region. */\n label?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n tabIndex?: 0 | -1;\n /** Keep the standard focus outline visible while the panel is expanded. */\n outlined?: boolean;\n /** Panel content. */\n children?: KerfUiContent;\n /**\n * The panel's top toolbar, composed so its groups follow the panel's open\n * state. With it, `children` renders in a `Pane` below the toolbar; render\n * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n * marked groups and toggle stay reachable while the panel is collapsed.\n */\n toolbar?: CollapsiblePanelToolbar;\n /** Fixed content below a toolbar panel's top toolbar. */\n header?: KerfUiContent;\n headerList?: ListConfig;\n headerPlacement?: CollapsiblePanelChromePlacement;\n /** Fixed content above a toolbar panel's bottom toolbar. */\n footer?: KerfUiContent;\n footerList?: ListConfig;\n bottomToolbar?: CollapsiblePanelBottomToolbar;\n footerPlacement?: CollapsiblePanelChromePlacement;\n /**\n * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n * without a `toolbar`, where `children` renders as given.\n */\n pane?: PaneConfig;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n id,\n side,\n collapsed = false,\n size,\n label,\n tabIndex,\n outlined = false,\n children,\n toolbar,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n pane,\n separator = 'auto',\n collapseMotion = 'slide',\n contentOverflow = 'clip',\n presentation = 'inline',\n restoreControl,\n restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n className = '',\n}: CollapsiblePanelProps) {\n const sizeVar =\n side === 'bottom'\n ? '--kui-collapsible-panel-height'\n : '--kui-collapsible-panel-width';\n return (\n <>\n <aside\n class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n data-component=\"collapsible-panel\"\n data-collapsible-panel={id}\n data-side={side}\n data-collapsed={String(collapsed)}\n data-outlined={\n !collapsed && presentation !== 'hidden' && outlined\n ? 'true'\n : undefined\n }\n data-separator={separator}\n data-collapse-motion={collapseMotion}\n data-content-overflow={contentOverflow}\n data-presentation={presentation}\n aria-label={label || undefined}\n aria-hidden={\n collapsed || presentation === 'hidden' ? 'true' : undefined\n }\n tabindex={\n collapsed || presentation === 'hidden'\n ? tabIndex === undefined\n ? undefined\n : -1\n : tabIndex\n }\n inert={collapsed}\n style={size ? `${sizeVar}: ${size}px` : undefined}\n >\n <div class=\"kui-collapsible-panel__content\">\n {toolbar\n ? composedPanelBody({\n toolbar,\n side,\n collapsed,\n attributes: toggleAttributes(id),\n pane,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n content: children,\n })\n : children}\n </div>\n </aside>\n {collapsed && restoreControl && presentation !== 'hidden' && (\n <div\n class=\"kui-collapsible-panel__restore\"\n data-panel-restore={id}\n data-position={restorePosition}\n >\n {restoreControl}\n </div>\n )}\n </>\n );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n /** The panel's `id`. */\n panelId: string;\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state. */\n collapsed: boolean;\n /** The same `toolbar` the panel receives. */\n toolbar: CollapsiblePanelToolbar;\n /**\n * Density of the toolbar the groups are placed in, so the standard toggle\n * fits it (`compact` in a `density=\"compact\"` toolbar). Defaults to\n * `default`.\n */\n density?: ToolbarConfig['density'];\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n panelId,\n side,\n collapsed,\n toolbar,\n density,\n}: CollapsiblePanelRelocatedProps) {\n return (\n <>\n {relocatedPanelGroups(\n toolbar,\n side,\n collapsed,\n toggleAttributes(panelId),\n groupSizeFor(density),\n )}\n </>\n );\n}\n"]}
@@ -0,0 +1,62 @@
1
+ import * as kerfjs from 'kerfjs';
2
+ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
3
+
4
+ /**
5
+ * Application `data-*` identity on the Composer root, such as `data-key`;
6
+ * the composer's own configuration attributes stay protected.
7
+ */
8
+ type ComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
9
+ interface ComposerProps {
10
+ /** The message field's accessible name, in title style ("Message"). */
11
+ label: string;
12
+ /** Native textarea `name`: the form field the message submits under. */
13
+ name: string;
14
+ /**
15
+ * The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes
16
+ * the field's accessible description.
17
+ */
18
+ id?: string;
19
+ /** The field's text: a draft to restore, or `''` after sending. */
20
+ value?: string;
21
+ /** Sentence-style example of what to write ("Ask about this build"). */
22
+ placeholder?: string;
23
+ /**
24
+ * Visible lines while the field is empty or short (default 1). The field
25
+ * grows with its content from here.
26
+ */
27
+ minRows?: number;
28
+ /**
29
+ * Lines the field grows to before it scrolls (default 8). At least
30
+ * `minRows`.
31
+ */
32
+ maxRows?: number;
33
+ /** Quiet, sentence-style supporting copy at the start of the action row. */
34
+ hint?: string;
35
+ /** Trailing controls in the action row, normally one brand Send button. */
36
+ actions: KerfUiContent;
37
+ /** Disable the field; the app disables its own actions. */
38
+ disabled?: boolean;
39
+ /**
40
+ * Opt in to Enter-to-send: with `wireComposers` running over an ancestor,
41
+ * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing
42
+ * action, Shift+Enter inserts a newline, and an Enter that commits an IME
43
+ * composition or meets an empty message does not send. The field announces
44
+ * the shortcut with `aria-keyshortcuts`.
45
+ */
46
+ submitOnEnter?: boolean;
47
+ /** Safe `data-*` identity on the root. */
48
+ rootAttributes?: ComposerRootAttributes;
49
+ className?: string;
50
+ /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */
51
+ slot?: string;
52
+ }
53
+ /**
54
+ * A chat or prompt composer: a raised frame whose border turns brand while
55
+ * focus is within, holding a borderless message field that grows with its
56
+ * content between `minRows` and `maxRows` lines, above an action row with an
57
+ * optional hint and trailing actions. The app owns the value and sending;
58
+ * `submitOnEnter` with `wireComposers` adds Enter-to-send.
59
+ */
60
+ declare function Composer({ label, name, id, value, placeholder, minRows, maxRows, hint, actions, disabled, submitOnEnter, rootAttributes, className, slot, }: ComposerProps): kerfjs.SafeHtml;
61
+
62
+ export { Composer, type ComposerProps, type ComposerRootAttributes };
@@ -0,0 +1,5 @@
1
+ export { Composer } from './chunk-AV7CPAPT.js';
2
+
3
+
4
+
5
+ //# sourceMappingURL=composer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"composer.js"}
@@ -25,7 +25,7 @@ interface CornerStatusProps {
25
25
  }
26
26
  /**
27
27
  * A non-dismissible status surface pinned to a viewport corner — "Loading…",
28
- * "Updating tickets… 3 of 12" — for app-level progress that has no better
28
+ * "Updating Tickets… 3 of 12" — for app-level progress that has no better
29
29
  * home beside the affected work. The application owns its lifetime: render it
30
30
  * while the work runs and remove it when the work ends. It carries no role of
31
31
  * its own; the composed `StateBanner` is the polite live region. Use a toast
@@ -1,3 +1,3 @@
1
- export { CornerStatus } from './chunk-QQ3TTWFH.js';
1
+ export { CornerStatus } from './chunk-G3J7JDP6.js';
2
2
 
3
3
  //# sourceMappingURL=corner-status.js.map
@@ -115,5 +115,13 @@ declare function foregroundColorVar(name: `--${string}`, fallback?: CssForegroun
115
115
  * resolves the color syntax; this checks only that it is one declaration value.
116
116
  */
117
117
  declare function foregroundColor(value: string): CssForegroundColor;
118
+ /**
119
+ * Use an application-chosen CSS color as a fill: a `ChoiceChips` swatch, a list
120
+ * row's `iconTile` color, or any other prop that takes a plain
121
+ * {@link CssColor}. It returns a `CssColor`, not a {@link CssForegroundColor},
122
+ * so a fill literal cannot reach a prop that paints text or an icon. The browser
123
+ * resolves the color syntax; this checks only that it is one declaration value.
124
+ */
125
+ declare function fillColor(value: string): CssColor;
118
126
 
119
- export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiGap, type UiGapValue, type UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
127
+ export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiGap, type UiGapValue, type UiSpaceName, calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
@@ -1,3 +1,3 @@
1
- export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-U657IHFB.js';
1
+ export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-IQSRHXZR.js';
2
2
 
3
3
  //# sourceMappingURL=css-values.js.map
@@ -1,4 +1,4 @@
1
- export { DisclosureArrow } from './chunk-HWY4BSLS.js';
1
+ export { DisclosureArrow } from './chunk-3VXDSIBJ.js';
2
2
 
3
3
 
4
4
 
@@ -1,4 +1,4 @@
1
- export { EmptyState } from './chunk-XK4E225T.js';
1
+ export { EmptyState } from './chunk-B53PS2LE.js';
2
2
 
3
3
 
4
4
 
package/dist/grid.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Grid } from './chunk-QIAPOWHH.js';
1
+ export { Grid } from './chunk-KCS6NJ3O.js';
2
2
 
3
3
 
4
4
 
@@ -1,4 +1,4 @@
1
- export { IconButton } from './chunk-M2NRCFRO.js';
1
+ export { IconButton } from './chunk-VFYO3UGZ.js';
2
2
 
3
3
 
4
4
 
@@ -1,4 +1,4 @@
1
- export { IconToggleButton } from './chunk-R42D2BAO.js';
1
+ export { IconToggleButton } from './chunk-CA7LNX3J.js';
2
2
 
3
3
 
4
4
 
package/dist/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, Toolbar
8
8
  export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize, ToolbarTextTone } from './toolbar-text.js';
9
9
  export { FramedList, FramedListProps, FramedListRow, FramedListRowProps, FramedListSurface } from './framed-list.js';
10
10
  export { List, ListConfig, ListInset, ListProps, ListSurface } from './list.js';
11
+ export { wireListFocusScroll } from './wire-list-focus-scroll.js';
11
12
  export { ListActionRow, ListActionRowProps } from './list-action-row.js';
12
13
  export { ListHeader, ListHeaderProps } from './list-header.js';
13
14
  export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js';
@@ -17,7 +18,7 @@ export { SummaryRow, SummaryRowListEdge, SummaryRowPresentation, SummaryRowProps
17
18
  export { ValueTable, ValueTablePresentation, ValueTableProps, ValueTableRow, ValueTableRowProps, ValueTableStackBelow } from './value-table.js';
18
19
  export { AnchoredSurfaceOptions, AnchoredSurfacePoint, openAnchoredSurface, openAnchoredSurfaceAt } from './anchored-surface.js';
19
20
  export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
20
- export { Chip, ChipProps } from './chip.js';
21
+ export { Chip, ChipProps, ChipTone } from './chip.js';
21
22
  export { CornerStatus, CornerStatusPlacement, CornerStatusPresentation, CornerStatusProps } from './corner-status.js';
22
23
  export { wireCornerStatus } from './wire-corner-status.js';
23
24
  export { EdgeActivityIndicator, EdgeActivityIndicatorProps } from './edge-activity-indicator.js';
@@ -28,17 +29,19 @@ export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } fr
28
29
  export { ChoiceChips, ChoiceChipsChoice, ChoiceChipsProps, ChoiceChipsSize, ChoiceChipsSwatch } from './choice-chips.js';
29
30
  export { Combobox, ComboboxProps, ComboboxSuggestion } from './combobox.js';
30
31
  export { ComboboxCommit, WireComboboxesOptions, wireComboboxes } from './wire-comboboxes.js';
32
+ export { Composer, ComposerProps, ComposerRootAttributes } from './composer.js';
33
+ export { wireComposers } from './wire-composers.js';
31
34
  export { FieldLabel, FieldLabelProps, Text, TextContent, TextFont, TextProps, TextSize, TextTone, TextVariant } from './text.js';
32
35
  export { FileDropZone, FileDropZoneProps, FilePickerTrigger, FilePickerTriggerProps } from './file-picker.js';
33
36
  export { FilePickerSelection, WireFilePickersOptions, fileMatchesAccept, wireFilePickers } from './wire-file-pickers.js';
34
37
  export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
35
38
  export { Select, SelectChoice, SelectFocusRingOwner, SelectPresentation, SelectProps, SelectSelectedPresentation, SelectSize } from './select.js';
36
- export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, j as TokenSearchToken, k as TokenSearchTrailingAction, l as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-DTcTXWMS.js';
39
+ export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, j as TokenSearchToken, k as TokenSearchTrailingAction, l as TokenSearchTrailingActionAttributes, m as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-aYR0YAei.js';
37
40
  export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
38
41
  export { ColumnTrack, ColumnTrackLayout, ColumnTrackProps } from './column-track.js';
39
42
  export { ContentSwap, ContentSwapDirection, ContentSwapProps, ContentSwapSide, ContentSwapTransition } from './content-swap.js';
40
43
  export { Grid, GridProps } from './grid.js';
41
- export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
44
+ export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneHeaderPresentation, PaneProps, PaneSeparatorSide } from './pane.js';
42
45
  export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionResponsiveFillAt, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
43
46
  export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
44
47
  export { Row, RowProps } from './row.js';
@@ -50,13 +53,15 @@ export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProp
50
53
  export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
51
54
  export { ContentItem, ContentItemAppearance, ContentItemBubble, ContentItemFrame, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
52
55
  export { SunkenPanel, SunkenPanelProps, SunkenPanelShape, ensureSunkenTexture } from './sunken-panel.js';
53
- export { DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
56
+ export { DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceFooterPresentation, DialogSurfaceHeaderPresentation, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
54
57
  export { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
55
- export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
58
+ export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
56
59
  export { ListDropPosition, ListReorder, ListReorderSource, ListReorderTarget, WireListReorderOptions, reorderListItems, wireListReorder } from './wire-list-reorder.js';
57
60
  export { ScrollDividerTarget, WireScrollDividersOptions, wireScrollDividers } from './wire-scroll-dividers.js';
58
61
  export { wireToolbarVisibility } from './wire-toolbar-visibility.js';
59
62
  export { H as HorizontalAlignment, L as ListVerticalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
63
+ export { L as ListIconTile, a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
64
+ export { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
60
65
  export { S as SemanticTone } from './semantic-tone-CdW013KF.js';
61
66
  export { S as Sides } from './sides-BPSWde0A.js';
62
67
  import 'kerfjs';
package/dist/index.js CHANGED
@@ -1,66 +1,69 @@
1
- export { reorderTabs, wireTabBars } from './chunk-KQDU7Z7P.js';
2
- export { wireTokenSearchFields } from './chunk-Y3LC7JQO.js';
1
+ export { wireResizableRegions } from './chunk-GS2QD3N7.js';
2
+ export { reorderTabs, wireTabBars } from './chunk-K4AT3V3J.js';
3
+ export { wireTokenSearchFields } from './chunk-YOA5W5ZH.js';
3
4
  export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
5
+ export { wireComboboxes } from './chunk-FDZNYD4C.js';
6
+ export { wireComposers } from './chunk-ELCMSQNJ.js';
4
7
  export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
5
8
  export { fileMatchesAccept, wireFilePickers } from './chunk-2MSPNRWJ.js';
9
+ export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
6
10
  export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
7
- export { wireResizableRegions } from './chunk-GS2QD3N7.js';
8
11
  export { createTokenSearchModel } from './chunk-IM3GKYOG.js';
9
- export { ValueTable, ValueTableRow } from './chunk-GZE2XVKC.js';
12
+ export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
13
+ export { wireScrollDividers } from './chunk-CXZXHZTR.js';
10
14
 
11
- export { wireScrollDividers } from './chunk-6STQXRT4.js';
12
- export { wireComboboxes } from './chunk-FDZNYD4C.js';
15
+ export { StateBanner } from './chunk-QROYYGWU.js';
13
16
  export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
14
17
  export { SunkenPanel } from './chunk-D5RGM3XA.js';
15
- export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-JYD7G4RG.js';
18
+ export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-PIVY32AE.js';
16
19
  export { TabBar } from './chunk-JOR5LGYE.js';
17
20
  export { SegmentedControl } from './chunk-NS2TBYM4.js';
18
- export { Select } from './chunk-HO6FU3G7.js';
19
- export { Spacer } from './chunk-MN3POJFN.js';
20
- export { SplitButton } from './chunk-YWQGSUF2.js';
21
- export { StateBanner } from './chunk-6BRRUPJY.js';
22
- export { IconToggleButton } from './chunk-R42D2BAO.js';
23
- export { ListActionRow } from './chunk-FOQK4F3L.js';
21
+ export { Select } from './chunk-TLMMFQWM.js';
22
+ export { Spacer } from './chunk-YMUIQRWK.js';
23
+ export { SplitButton } from './chunk-HLDRH23D.js';
24
+ export { IconButton } from './chunk-VFYO3UGZ.js';
25
+ export { IconToggleButton } from './chunk-CA7LNX3J.js';
26
+ export { ListActionRow } from './chunk-RHD7RKGI.js';
24
27
  export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
25
- export { EmptyState } from './chunk-XK4E225T.js';
28
+ export { EmptyState } from './chunk-B53PS2LE.js';
26
29
  export { FileDropZone, FilePickerTrigger } from './chunk-W4IK7AWD.js';
27
30
  export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
28
- export { Grid } from './chunk-QIAPOWHH.js';
29
- export { IconButton } from './chunk-M2NRCFRO.js';
31
+ export { Grid } from './chunk-KCS6NJ3O.js';
30
32
  export { ColumnTrack } from './chunk-QYMJHS4K.js';
31
33
  export { Combobox } from './chunk-ETCWQLJV.js';
34
+ export { Composer } from './chunk-AV7CPAPT.js';
32
35
  export { ContentItem } from './chunk-7IUEBNCO.js';
33
36
  export { ContentSwap } from './chunk-EIET4QLK.js';
34
- export { CornerStatus } from './chunk-QQ3TTWFH.js';
35
- export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-76PWEN5Y.js';
36
- export { AppTab } from './chunk-6NOLL5KG.js';
37
- export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-ROZLJULF.js';
38
- export { ToolbarText } from './chunk-IGTWXPTN.js';
37
+ export { CornerStatus } from './chunk-G3J7JDP6.js';
38
+ export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
39
+ export { AppTab } from './chunk-TGLUDQP2.js';
40
+ export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-MF6ZUUJZ.js';
41
+ export { Row } from './chunk-YQ2AC4E2.js';
42
+ export { ToolbarText } from './chunk-HGV7J4T6.js';
39
43
  export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
40
- export { Row } from './chunk-44A6LP54.js';
41
- export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-PBT3CPPY.js';
42
- export { ListHeader } from './chunk-BBU2SPRE.js';
43
- export { FieldLabel, Text } from './chunk-LL45C7BB.js';
44
+ export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-HQZYKJ56.js';
45
+ export { ListHeader } from './chunk-T4WJ5VGP.js';
44
46
  export { ListInsetControl } from './chunk-AN5IWMTM.js';
45
47
  export { ListInsetText } from './chunk-S4Y3YTAI.js';
46
- export { ListItem, ListItemLink } from './chunk-36TL6BCR.js';
48
+ export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
47
49
 
50
+ export { DisclosureArrow } from './chunk-3VXDSIBJ.js';
48
51
  export { FloatingToolbar } from './chunk-S3ECMF23.js';
49
- export { DisclosureArrow } from './chunk-HWY4BSLS.js';
50
- export { Skeleton } from './chunk-Y43B6DS3.js';
52
+ export { FieldLabel, Text } from './chunk-LL45C7BB.js';
53
+ export { Skeleton } from './chunk-CVD5IZGB.js';
51
54
  export { Badge } from './chunk-U6QYTMDB.js';
52
- export { Chip } from './chunk-DQDTZE4W.js';
53
- export { ChoiceChips } from './chunk-PRG4CL3Q.js';
54
- export { ToolbarActionLink, ToolbarControlGroup } from './chunk-YXOMI7ES.js';
55
+ export { Chip } from './chunk-34U4ANDJ.js';
56
+ export { ChoiceChips } from './chunk-FR76ZJQC.js';
57
+ export { ToolbarActionLink, ToolbarControlGroup } from './chunk-QIG4IGUP.js';
55
58
  export { Toolbar } from './chunk-CMLPFIC5.js';
56
- export { Pane } from './chunk-GJYQ27C2.js';
57
- export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
58
- export { List } from './chunk-V6W56V3N.js';
59
+ export { List } from './chunk-HZPHCSCS.js';
59
60
 
60
- export { LoadingSpinner } from './chunk-YOKEL75M.js';
61
+ export { Pane } from './chunk-INI4WDWC.js';
62
+ export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
63
+ export { LucideIcon } from './chunk-LOSRXZAH.js';
64
+ export { LoadingSpinner } from './chunk-WVS6CUCT.js';
61
65
 
62
- export { LucideIcon } from './chunk-UKKRPP56.js';
63
- export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-U657IHFB.js';
66
+ export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-IQSRHXZR.js';
64
67
 
65
68
 
66
69
  //# sourceMappingURL=index.js.map
@@ -1,5 +1,8 @@
1
1
  import { SafeHtml } from 'kerfjs';
2
+ import { L as ListIconTile } from './list-icon-tile-B8dr97OW.js';
3
+ export { a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
2
4
  import { PopupMenuEntry, PopupMenuPlacement } from './popup-menu.js';
5
+ import './css-values.js';
3
6
  import './semantic-content-BbzjvSu9.js';
4
7
 
5
8
  type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
@@ -7,6 +10,8 @@ type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | un
7
10
  'data-action'?: never;
8
11
  'data-item-id'?: never;
9
12
  'data-has-icon'?: never;
13
+ 'data-icon-tile'?: never;
14
+ 'data-icon-tile-tone'?: never;
10
15
  'data-multiline'?: never;
11
16
  'data-density'?: never;
12
17
  'data-divider'?: never;
@@ -66,10 +71,13 @@ interface ListActionRowCommonProps {
66
71
  description?: string | SafeHtml;
67
72
  status?: string | SafeHtml;
68
73
  busy?: boolean;
74
+ /** Row height: `standard` is 44px; `compact` is 36px (42px with `iconTile`), the height of a compact `ListItem`. */
69
75
  density?: 'standard' | 'compact';
70
76
  divider?: 'none' | 'before' | 'after' | 'both';
71
77
  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */
72
78
  icon?: SafeHtml;
79
+ /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */
80
+ iconTile?: ListIconTile;
73
81
  action: string;
74
82
  itemId?: string;
75
83
  selected?: boolean;
@@ -96,6 +104,6 @@ interface ListActionRowCommonProps {
96
104
  }
97
105
  /** Exactly one trailing control: a native button (`trailingAction*`) or an overflow menu (`trailingMenu`). */
98
106
  type ListActionRowProps = ListActionRowCommonProps & (ListActionRowTrailingButtonProps | ListActionRowTrailingMenuProps);
99
- declare function ListActionRow({ label, description, status, busy, density, divider, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, trailingMenu, className, rootAttributes, trailingActionAttributes, slot, }: ListActionRowProps): SafeHtml;
107
+ declare function ListActionRow({ label, description, status, busy, density, divider, icon, iconTile, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, trailingMenu, className, rootAttributes, trailingActionAttributes, slot, }: ListActionRowProps): SafeHtml;
100
108
 
101
- export { ListActionRow, type ListActionRowProps, type ListActionRowTrailingMenu };
109
+ export { ListActionRow, type ListActionRowProps, type ListActionRowTrailingMenu, ListIconTile };
@@ -1,4 +1,4 @@
1
- export { ListActionRow } from './chunk-FOQK4F3L.js';
1
+ export { ListActionRow } from './chunk-RHD7RKGI.js';
2
2
 
3
3
 
4
4
 
@@ -1,4 +1,4 @@
1
- export { ListHeader } from './chunk-BBU2SPRE.js';
1
+ export { ListHeader } from './chunk-T4WJ5VGP.js';
2
2
 
3
3
 
4
4
 
@@ -0,0 +1,18 @@
1
+ import { CssColor, CssForegroundColor } from './css-values.js';
2
+
3
+ /**
4
+ * Quiet tile palette for a list row's leading icon: the same fill, border, and
5
+ * foreground roles as `ToolbarControlGroup`'s `tileTone`.
6
+ */
7
+ type ListIconTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
8
+ /** A list row's leading icon tile filled with an application-chosen color. */
9
+ interface ListIconTileColor {
10
+ /** The tile fill: `uiColor()`, `colorVar()`, or `fillColor()` for an app color such as `#e5484d`. */
11
+ color: CssColor;
12
+ /** The glyph color over the fill. Defaults to black or white, whichever contrasts with `color`. */
13
+ foreground?: CssForegroundColor;
14
+ }
15
+ /** A filled leading icon tile: a quiet tone preset or an application color. */
16
+ type ListIconTile = ListIconTileTone | ListIconTileColor;
17
+
18
+ export type { ListIconTile as L, ListIconTileColor as a, ListIconTileTone as b };
@@ -1,5 +1,8 @@
1
1
  import { SafeHtml } from 'kerfjs';
2
+ import { L as ListIconTile } from './list-icon-tile-B8dr97OW.js';
3
+ export { a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
2
4
  import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
5
+ import './css-values.js';
3
6
 
4
7
  type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
5
8
  'data-component'?: never;
@@ -14,6 +17,8 @@ type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
14
17
  'data-state'?: never;
15
18
  'data-kui-disabled'?: never;
16
19
  'data-icon-align'?: never;
20
+ 'data-icon-tile'?: never;
21
+ 'data-icon-tile-tone'?: never;
17
22
  'data-dragging'?: never;
18
23
  'data-drop-position'?: never;
19
24
  }>;
@@ -22,6 +27,8 @@ interface ListItemProps {
22
27
  /** App-owned supporting text rendered in the component's stable label stack. */
23
28
  description?: string | SafeHtml;
24
29
  icon?: SafeHtml;
30
+ /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */
31
+ iconTile?: ListIconTile;
25
32
  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */
26
33
  trailing?: KerfUiContent;
27
34
  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */
@@ -63,8 +70,8 @@ interface ListItemLinkProps extends Omit<ListItemProps, 'action' | 'pressed'> {
63
70
  action?: never;
64
71
  pressed?: never;
65
72
  }
66
- declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemProps): SafeHtml;
73
+ declare function ListItem({ label, description, icon, iconTile, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemProps): SafeHtml;
67
74
  /** A navigation row with native link activation and ListItem geometry. */
68
- declare function ListItemLink({ href, external, label, description, icon, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
75
+ declare function ListItemLink({ href, external, label, description, icon, iconTile, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
69
76
 
70
- export { ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };
77
+ export { ListIconTile, ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };
package/dist/list-item.js CHANGED
@@ -1,4 +1,4 @@
1
- export { ListItem, ListItemLink } from './chunk-36TL6BCR.js';
1
+ export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
2
2
 
3
3
 
4
4
 
package/dist/list.d.ts CHANGED
@@ -3,9 +3,10 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
3
3
  import { S as StructuralRootAttributes } from './extension-attributes-mu8MFUl0.js';
4
4
  import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
5
5
  export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
6
+ import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
6
7
  import { S as Sides } from './sides-BPSWde0A.js';
7
- import { UiGap, CssFlexKeyword, CssFlex } from './css-values.js';
8
- export { CssLength, UiGapValue, UiSpaceName } from './css-values.js';
8
+ import { UiGap, CssFlexKeyword, CssFlex, CssLength } from './css-values.js';
9
+ export { UiGapValue, UiSpaceName } from './css-values.js';
9
10
 
10
11
  type ListRootAttributes = StructuralRootAttributes & Readonly<{
11
12
  'data-component'?: never;
@@ -15,6 +16,8 @@ type ListRootAttributes = StructuralRootAttributes & Readonly<{
15
16
  'data-h-align'?: never;
16
17
  'data-v-align'?: never;
17
18
  'data-scrollable'?: never;
19
+ 'data-scroll-clearance'?: never;
20
+ 'data-frame'?: never;
18
21
  'data-surface'?: never;
19
22
  'data-inset'?: never;
20
23
  'data-text-insets'?: never;
@@ -59,6 +62,35 @@ interface ListProps {
59
62
  * column and use `flex`; `fill` needs a definite-height parent.
60
63
  */
61
64
  scrollable?: boolean;
65
+ /**
66
+ * Clear chrome that lies over this scrollable List's block-start and/or
67
+ * block-end edge, such as a `DialogSurface` floating footer. The List adds
68
+ * the inherited `--kui-scroll-clearance-block-*` context that chrome
69
+ * publishes to its own block padding and `scroll-padding`, so its rows
70
+ * scroll visibly beneath the chrome while the first and last rows (and any
71
+ * row focused or scrolled into view) can still rest clear of it. Opt in only
72
+ * the one scroller that reaches the covered edge. Defaults to none.
73
+ */
74
+ scrollClearance?: ScrollClearance;
75
+ /**
76
+ * Draw a bordered, rounded frame around the stack: a 1px neutral border,
77
+ * the standard control radius, and a 4px inset on every side that keeps the
78
+ * first and last rows' focus rings inside a scrolling frame's clip. It
79
+ * replaces any `inset`/`textInsets`/`controlInsets`. With `scrollable` and
80
+ * `maxHeight` it is a bounded result picker of `ListItem` rows.
81
+ */
82
+ frame?: boolean;
83
+ /**
84
+ * The List's maximum block size, a typed `CssLength` from
85
+ * `@kerfjs/ui/css-values` (such as `rem(14)`). Pair it with `scrollable` so
86
+ * rows beyond it scroll; it bounds the List without a flex-column ancestor.
87
+ */
88
+ maxHeight?: CssLength;
89
+ /**
90
+ * The List's minimum block size, a typed `CssLength` (such as `rem(4.25)`),
91
+ * so a short or empty result set keeps a stable box. Defaults to no minimum.
92
+ */
93
+ minHeight?: CssLength;
62
94
  /**
63
95
  * Paint a solid surface behind the stack, including its insets: for a strip
64
96
  * of chrome (a banner above a sunken work area) that must not show the
@@ -91,6 +123,6 @@ interface ListProps {
91
123
  */
92
124
  type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
93
125
  /** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
94
- declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
126
+ declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
95
127
 
96
- export { CssFlex, CssFlexKeyword, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, Sides, UiGap };
128
+ export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };
package/dist/list.js CHANGED
@@ -1,4 +1,4 @@
1
- export { List } from './chunk-V6W56V3N.js';
1
+ export { List } from './chunk-HZPHCSCS.js';
2
2
 
3
3
 
4
4
 
@@ -1,4 +1,4 @@
1
- export { LoadingSpinner } from './chunk-YOKEL75M.js';
1
+ export { LoadingSpinner } from './chunk-WVS6CUCT.js';
2
2
 
3
3
 
4
4
  //# sourceMappingURL=loading-spinner.js.map
@@ -1,4 +1,4 @@
1
- export { LucideIcon } from './chunk-UKKRPP56.js';
1
+ export { LucideIcon } from './chunk-LOSRXZAH.js';
2
2
 
3
3
 
4
4
  //# sourceMappingURL=lucide-icon.js.map