@kubex/zinc 1.1.184 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (362) hide show
  1. package/.browserslistrc +2 -0
  2. package/.github/workflows/js_build_and_deploy.yaml +54 -1
  3. package/.github/workflows/test.yaml +27 -0
  4. package/dist/chunks/zn.UWJLIXDT.js +1 -0
  5. package/dist/custom-elements.json +10344 -2583
  6. package/dist/vscode.html-custom-data.json +1102 -125
  7. package/dist/web-types.json +2217 -224
  8. package/dist/zn.d.ts +2306 -417
  9. package/dist/zn.min.css +1 -1
  10. package/dist/zn.min.js +2313 -1635
  11. package/docs/_includes/default.njk +4 -1
  12. package/docs/assets/scripts/docs.js +22 -6
  13. package/docs/assets/styles/docs.css +9 -2
  14. package/docs/data/report-table-day-compare.json +380 -0
  15. package/docs/data/report-table.json +314 -0
  16. package/docs/pages/components/avatar-group.md +57 -0
  17. package/docs/pages/components/badge.md +67 -0
  18. package/docs/pages/components/button.md +41 -1
  19. package/docs/pages/components/chat-message.md +16 -0
  20. package/docs/pages/components/checkbox.md +1 -1
  21. package/docs/pages/components/chip.md +25 -13
  22. package/docs/pages/components/color-picker.md +37 -0
  23. package/docs/pages/components/copy-button.md +2 -2
  24. package/docs/pages/components/data-table-filter.md +33 -50
  25. package/docs/pages/components/data-table-search.md +4 -4
  26. package/docs/pages/components/data-table.md +27 -3
  27. package/docs/pages/components/date-range.md +116 -0
  28. package/docs/pages/components/dialog.md +29 -37
  29. package/docs/pages/components/diff-row.md +28 -0
  30. package/docs/pages/components/diff.md +46 -0
  31. package/docs/pages/components/editor.md +55 -0
  32. package/docs/pages/components/filter-wrapper.md +20 -0
  33. package/docs/pages/components/icon.md +46 -1
  34. package/docs/pages/components/input.md +30 -11
  35. package/docs/pages/components/item.md +35 -0
  36. package/docs/pages/components/key-value.md +25 -0
  37. package/docs/pages/components/menu.md +74 -7
  38. package/docs/pages/components/nav-item.md +15 -0
  39. package/docs/pages/components/nav-list.md +132 -0
  40. package/docs/pages/components/navbar.md +100 -1
  41. package/docs/pages/components/page.md +242 -74
  42. package/docs/pages/components/priority-list.md +43 -5
  43. package/docs/pages/components/query-builder.md +23 -0
  44. package/docs/pages/components/radio-group.md +33 -1
  45. package/docs/pages/components/radio.md +1 -1
  46. package/docs/pages/components/report-table.md +202 -0
  47. package/docs/pages/components/stat.md +30 -0
  48. package/docs/pages/components/tile.md +11 -0
  49. package/docs/pages/components/tooltip.md +1 -1
  50. package/docs/pages/components/translation-grid.md +86 -0
  51. package/docs/pages/components/vertical-stepper.md +108 -64
  52. package/package.json +2 -1
  53. package/scss/_global-spacing.scss +2 -2
  54. package/scss/_root.scss +11 -171
  55. package/scss/boot.scss +14 -0
  56. package/scss/mixins/_helper-mixins.scss +24 -2
  57. package/scss/mixins/_motion-mixins.scss +126 -0
  58. package/scss/mixins/_spacing-mixins.scss +4 -3
  59. package/scss/mixins/_tab-indicator-mixins.scss +12 -0
  60. package/scss/mixins/_typography-mixins.scss +1 -1
  61. package/scss/mixins/index.scss +14 -0
  62. package/scss/shared/_base.scss +32 -1
  63. package/scss/shared/_button-mixin.scss +7 -5
  64. package/scss/shared/_table.scss +35 -4
  65. package/scss/shared/nav.scss +4 -0
  66. package/scss/shared/shimmer.scss +1 -1
  67. package/scss/table-controls.scss +206 -0
  68. package/scss/themes/_dark.scss +1 -3
  69. package/scss/themes/_index.scss +1 -1
  70. package/scss/themes/_light.scss +46 -6
  71. package/scss/themes/_modes.scss +11 -11
  72. package/scss/themes/_openbyte.scss +944 -0
  73. package/scss/themes/_typography.scss +4 -2
  74. package/scss/variables/index.scss +0 -9
  75. package/src/components/alert/alert.component.ts +14 -4
  76. package/src/components/alert/alert.scss +55 -69
  77. package/src/components/alert/alert.test.ts +8 -0
  78. package/src/components/animated-button/animated-button.component.ts +3 -2
  79. package/src/components/animated-button/animated-button.scss +6 -23
  80. package/src/components/animated-button/animated-button.test.ts +4 -3
  81. package/src/components/avatar-group/avatar-group.component.ts +84 -0
  82. package/src/components/avatar-group/avatar-group.scss +54 -0
  83. package/src/components/avatar-group/avatar-group.test.ts +59 -0
  84. package/src/components/avatar-group/index.ts +12 -0
  85. package/src/components/badge/badge.component.ts +49 -0
  86. package/src/components/badge/badge.scss +80 -0
  87. package/src/components/badge/badge.test.ts +34 -0
  88. package/src/components/badge/index.ts +12 -0
  89. package/src/components/bulk-actions/bulk-actions.component.ts +14 -2
  90. package/src/components/button/button.component.ts +242 -11
  91. package/src/components/button/button.scss +133 -25
  92. package/src/components/button/button.test.ts +122 -0
  93. package/src/components/button-menu/button-menu.component.ts +32 -11
  94. package/src/components/button-menu/button-menu.scss +5 -1
  95. package/src/components/channel-tile/channel-tile.component.ts +34 -27
  96. package/src/components/channel-tile/channel-tile.scss +76 -43
  97. package/src/components/chart/builders.test.ts +46 -0
  98. package/src/components/chart/builders.ts +27 -3
  99. package/src/components/chart/chart-live.test.ts +4 -6
  100. package/src/components/chart/chart.component.ts +125 -5
  101. package/src/components/chart/chart.scss +121 -0
  102. package/src/components/chart/chart.test.ts +81 -0
  103. package/src/components/chat-message/chat-message.component.ts +21 -1
  104. package/src/components/chat-message/chat-message.scss +13 -2
  105. package/src/components/chat-message/chat-message.test.ts +9 -0
  106. package/src/components/checkbox/checkbox.component.ts +61 -27
  107. package/src/components/checkbox/checkbox.scss +58 -25
  108. package/src/components/checkbox-group/checkbox-group.component.ts +7 -1
  109. package/src/components/chip/chip.component.ts +11 -1
  110. package/src/components/chip/chip.scss +91 -26
  111. package/src/components/chip/chip.test.ts +17 -0
  112. package/src/components/collapsible/collapsible.component.ts +17 -3
  113. package/src/components/collapsible/collapsible.scss +19 -10
  114. package/src/components/color-picker/color-picker.component.ts +277 -0
  115. package/src/components/color-picker/color-picker.scss +141 -0
  116. package/src/components/color-picker/color-picker.test.ts +57 -0
  117. package/src/components/color-picker/index.ts +12 -0
  118. package/src/components/cols/cols.component.ts +17 -3
  119. package/src/components/cols/cols.scss +24 -13
  120. package/src/components/cols/cols.test.ts +33 -0
  121. package/src/components/confirm/confirm.component.ts +20 -6
  122. package/src/components/confirm/confirm.test.ts +52 -0
  123. package/src/components/content-block/content-block.component.ts +38 -9
  124. package/src/components/content-block/content-block.scss +11 -5
  125. package/src/components/content-block/content-block.test.ts +26 -0
  126. package/src/components/copy-button/copy-button.component.ts +2 -2
  127. package/src/components/copy-button/copy-button.scss +17 -4
  128. package/src/components/data-select/data-select.component.ts +3 -1
  129. package/src/components/data-table/data-table.component.ts +364 -142
  130. package/src/components/data-table/data-table.scss +133 -60
  131. package/src/components/data-table/data-table.test.ts +356 -4
  132. package/src/components/data-table-filter/data-table-filter.component.ts +426 -406
  133. package/src/components/data-table-filter/data-table-filter.scss +176 -148
  134. package/src/components/data-table-filter/data-table-filter.test.ts +271 -273
  135. package/src/components/data-table-search/data-table-search.component.ts +4 -2
  136. package/src/components/data-table-search/data-table-search.scss +8 -1
  137. package/src/components/data-table-search/data-table-search.test.ts +29 -0
  138. package/src/components/date-range/date-range-math.test.ts +78 -0
  139. package/src/components/date-range/date-range-math.ts +105 -0
  140. package/src/components/date-range/date-range.component.ts +375 -0
  141. package/src/components/date-range/date-range.scss +272 -0
  142. package/src/components/date-range/date-range.test.ts +247 -0
  143. package/src/components/date-range/index.ts +12 -0
  144. package/src/components/datepicker/datepicker.component.ts +44 -7
  145. package/src/components/datepicker/datepicker.scss +9 -0
  146. package/src/components/datepicker/datepicker.test.ts +2 -2
  147. package/src/components/dialog/dialog.component.ts +38 -19
  148. package/src/components/dialog/dialog.scss +65 -36
  149. package/src/components/dialog/dialog.test.ts +14 -0
  150. package/src/components/diff/diff.component.ts +55 -0
  151. package/src/components/diff/diff.scss +46 -0
  152. package/src/components/diff/diff.test.ts +15 -0
  153. package/src/components/diff/index.ts +12 -0
  154. package/src/components/diff-row/diff-row.component.ts +75 -0
  155. package/src/components/diff-row/diff-row.scss +70 -0
  156. package/src/components/diff-row/diff-row.test.ts +37 -0
  157. package/src/components/diff-row/index.ts +12 -0
  158. package/src/components/dropdown/dropdown.component.ts +12 -10
  159. package/src/components/dropdown/dropdown.scss +2 -0
  160. package/src/components/editor/editor.component.ts +159 -11
  161. package/src/components/editor/editor.scss +250 -1
  162. package/src/components/editor/editor.test.ts +31 -3
  163. package/src/components/editor/modules/ai/panel/ai-panel.scss +0 -1
  164. package/src/components/editor/modules/attachment/attachment.ts +53 -31
  165. package/src/components/editor/modules/context-menu/context-menu.ts +17 -0
  166. package/src/components/editor/modules/dialog/dialog.component.ts +23 -1
  167. package/src/components/editor/modules/dialog/dialog.test.ts +28 -0
  168. package/src/components/editor/modules/emoji/emoji.ts +4 -5
  169. package/src/components/editor/modules/merge-field/merge-field.ts +83 -0
  170. package/src/components/editor/modules/toolbar/toolbar.component.ts +121 -68
  171. package/src/components/editor/modules/toolbar/toolbar.scss +38 -0
  172. package/src/components/editor/modules/toolbar/toolbar.ts +25 -1
  173. package/src/components/empty-state/empty-state.component.ts +6 -1
  174. package/src/components/empty-state/empty-state.scss +21 -4
  175. package/src/components/expanding-action/expanding-action.component.ts +22 -34
  176. package/src/components/expanding-action/expanding-action.scss +3 -45
  177. package/src/components/expanding-action/expanding-action.test.ts +2 -1
  178. package/src/components/file/file.component.ts +30 -2
  179. package/src/components/file/file.scss +6 -0
  180. package/src/components/filter-wrapper/filter-wrapper.component.ts +45 -10
  181. package/src/components/filter-wrapper/filter-wrapper.test.ts +58 -2
  182. package/src/components/flow-builder/flow-builder.component.ts +36 -3
  183. package/src/components/flow-builder/flow-builder.scss +0 -6
  184. package/src/components/flow-builder/modules/flow-canvas/flow-canvas.component.ts +8 -0
  185. package/src/components/flow-builder/modules/flow-canvas/flow-canvas.scss +10 -5
  186. package/src/components/flow-builder/modules/flow-node/flow-node.component.ts +17 -0
  187. package/src/components/flow-builder/modules/flow-node/flow-node.scss +10 -0
  188. package/src/components/form-actions/form-actions.component.ts +48 -2
  189. package/src/components/form-actions/form-actions.scss +1 -1
  190. package/src/components/form-group/form-group.component.ts +10 -3
  191. package/src/components/form-group/form-group.scss +37 -4
  192. package/src/components/form-group/form-group.test.ts +10 -0
  193. package/src/components/header/header.component.ts +11 -4
  194. package/src/components/header/header.scss +47 -5
  195. package/src/components/hover-container/hover-container.component.ts +4 -5
  196. package/src/components/icon/icon.component.ts +95 -9
  197. package/src/components/icon/icon.scss +70 -6
  198. package/src/components/icon/icon.test.ts +55 -0
  199. package/src/components/icon-picker/icon-picker.component.ts +35 -1
  200. package/src/components/inline-edit/inline-edit.component.ts +38 -8
  201. package/src/components/inline-edit/inline-edit.scss +128 -19
  202. package/src/components/input/input.component.ts +173 -297
  203. package/src/components/input/input.scss +65 -43
  204. package/src/components/input/input.test.ts +86 -4
  205. package/src/components/item/item.component.ts +12 -0
  206. package/src/components/item/item.scss +102 -3
  207. package/src/components/item/item.test.ts +23 -0
  208. package/src/components/key/key.component.ts +2 -2
  209. package/src/components/key/key.scss +11 -0
  210. package/src/components/key-value/index.ts +12 -0
  211. package/src/components/key-value/key-value.component.ts +160 -0
  212. package/src/components/key-value/key-value.scss +20 -0
  213. package/src/components/key-value/key-value.test.ts +22 -0
  214. package/src/components/markdown-editor/markdown-editor.component.ts +8 -1
  215. package/src/components/menu/menu.component.ts +21 -2
  216. package/src/components/menu/menu.scss +43 -23
  217. package/src/components/menu/menu.test.ts +33 -0
  218. package/src/components/menu-item/menu-item.component.ts +13 -2
  219. package/src/components/menu-item/menu-item.scss +56 -23
  220. package/src/components/menu-item/menu-item.test.ts +31 -0
  221. package/src/components/menu-item/submenu-controller.ts +25 -15
  222. package/src/components/menu-label/index.ts +12 -0
  223. package/src/components/menu-label/menu-label.component.ts +30 -0
  224. package/src/components/menu-label/menu-label.scss +18 -0
  225. package/src/components/nav-item/index.ts +12 -0
  226. package/src/components/nav-item/nav-item.component.ts +83 -0
  227. package/src/components/nav-item/nav-item.scss +128 -0
  228. package/src/components/nav-list/index.ts +12 -0
  229. package/src/components/nav-list/nav-list.component.ts +313 -0
  230. package/src/components/nav-list/nav-list.scss +87 -0
  231. package/src/components/nav-list/nav-list.test.ts +250 -0
  232. package/src/components/navbar/navbar.component.ts +235 -171
  233. package/src/components/navbar/navbar.scss +333 -169
  234. package/src/components/navbar/navbar.test.ts +63 -143
  235. package/src/components/page/page.component.ts +114 -29
  236. package/src/components/page/page.scss +223 -95
  237. package/src/components/page/page.test.ts +214 -3
  238. package/src/components/page-builder/page-builder.component.ts +51 -5
  239. package/src/components/page-builder/page-builder.scss +6 -1
  240. package/src/components/page-nav/page-nav.component.ts +25 -3
  241. package/src/components/page-nav/page-nav.scss +10 -2
  242. package/src/components/pagination/pagination.scss +1 -1
  243. package/src/components/panel/panel.component.ts +14 -13
  244. package/src/components/panel/panel.scss +14 -10
  245. package/src/components/panel/panel.test.ts +42 -0
  246. package/src/components/popup/popup.component.ts +20 -13
  247. package/src/components/popup/popup.test.ts +21 -1
  248. package/src/components/priority-list/priority-list.component.ts +157 -172
  249. package/src/components/priority-list/priority-list.scss +113 -17
  250. package/src/components/priority-list/priority-list.test.ts +301 -3
  251. package/src/components/progress-bar/progress-bar.component.ts +1 -1
  252. package/src/components/progress-bar/progress-bar.scss +16 -4
  253. package/src/components/progress-tile/progress-tile.scss +1 -1
  254. package/src/components/query-builder/query-builder.component.ts +85 -10
  255. package/src/components/query-builder/query-builder.scss +7 -1
  256. package/src/components/query-builder/query-builder.test.ts +40 -0
  257. package/src/components/radio/radio.component.ts +57 -18
  258. package/src/components/radio/radio.scss +101 -26
  259. package/src/components/radio-group/radio-group.component.ts +45 -7
  260. package/src/components/radio-group/radio-group.scss +17 -0
  261. package/src/components/radio-group/radio-group.test.ts +63 -2
  262. package/src/components/rating/rating.component.ts +23 -0
  263. package/src/components/rating/rating.scss +1 -1
  264. package/src/components/remarkd-editor/remarkd-editor.component.ts +60 -5
  265. package/src/components/remarkd-editor/remarkd-editor.scss +12 -4
  266. package/src/components/report-table/index.ts +12 -0
  267. package/src/components/report-table/report-format.test.ts +86 -0
  268. package/src/components/report-table/report-format.ts +72 -0
  269. package/src/components/report-table/report-math.test.ts +74 -0
  270. package/src/components/report-table/report-math.ts +252 -0
  271. package/src/components/report-table/report-table.component.ts +681 -0
  272. package/src/components/report-table/report-table.scss +328 -0
  273. package/src/components/report-table/report-table.test.ts +702 -0
  274. package/src/components/reveal/reveal.component.ts +15 -1
  275. package/src/components/reveal/reveal.scss +5 -0
  276. package/src/components/schedule-builder/schedule-builder.component.ts +23 -8
  277. package/src/components/scroll-container/scroll-container.component.ts +19 -1
  278. package/src/components/scroll-container/scroll-container.scss +6 -1
  279. package/src/components/select/select.component.ts +52 -36
  280. package/src/components/select/select.scss +42 -25
  281. package/src/components/select/select.test.ts +14 -2
  282. package/src/components/settings-container/settings-container.scss +18 -5
  283. package/src/components/sidebar/sidebar.component.ts +8 -1
  284. package/src/components/sidebar/sidebar.scss +6 -1
  285. package/src/components/skeleton/skeleton.component.ts +3 -3
  286. package/src/components/skeleton/skeleton.scss +6 -6
  287. package/src/components/skeleton/skeleton.test.ts +9 -0
  288. package/src/components/slash-menu/slash-menu.scss +1 -1
  289. package/src/components/slideout/slideout.component.ts +20 -3
  290. package/src/components/slideout/slideout.scss +13 -6
  291. package/src/components/slideout/slideout.test.ts +19 -0
  292. package/src/components/split-button/split-button.component.ts +1 -1
  293. package/src/components/split-pane/split-pane.component.ts +71 -8
  294. package/src/components/split-pane/split-pane.scss +145 -41
  295. package/src/components/split-pane/split-pane.test.ts +23 -3
  296. package/src/components/stat/stat.component.ts +209 -14
  297. package/src/components/stat/stat.scss +305 -5
  298. package/src/components/stat/stat.test.ts +143 -2
  299. package/src/components/status-indicator/status-indicator.scss +22 -21
  300. package/src/components/stepper/stepper.scss +3 -3
  301. package/src/components/tab/tab.component.ts +1 -0
  302. package/src/components/table/table.component.ts +12 -1
  303. package/src/components/table/table.scss +21 -13
  304. package/src/components/table/table.test.ts +17 -0
  305. package/src/components/tabs/tabs.component.ts +150 -37
  306. package/src/components/tabs/tabs.scss +48 -7
  307. package/src/components/tabs/tabs.test.ts +169 -0
  308. package/src/components/textarea/textarea.component.ts +25 -3
  309. package/src/components/textarea/textarea.scss +10 -0
  310. package/src/components/textarea/textarea.test.ts +8 -4
  311. package/src/components/theme-editor/theme-editor.scss +0 -6
  312. package/src/components/tile/tile.component.ts +32 -2
  313. package/src/components/tile/tile.scss +40 -7
  314. package/src/components/tile/tile.test.ts +10 -0
  315. package/src/components/toggle/toggle.component.ts +23 -7
  316. package/src/components/toggle/toggle.scss +36 -29
  317. package/src/components/toggle/toggle.test.ts +17 -0
  318. package/src/components/tooltip/tooltip.component.ts +3 -0
  319. package/src/components/tooltip/tooltip.scss +11 -6
  320. package/src/components/tooltip/tooltip.test.ts +12 -0
  321. package/src/components/translation-field/index.ts +12 -0
  322. package/src/components/translation-field/translation-field.component.ts +55 -0
  323. package/src/components/translation-field/translation-field.scss +101 -0
  324. package/src/components/translation-fields/index.ts +12 -0
  325. package/src/components/translation-fields/translation-fields.component.ts +80 -0
  326. package/src/components/translation-fields/translation-fields.scss +60 -0
  327. package/src/components/translation-grid/index.ts +12 -0
  328. package/src/components/translation-grid/translation-grid.component.ts +157 -0
  329. package/src/components/translation-grid/translation-grid.scss +138 -0
  330. package/src/components/translation-grid/translation-grid.test.ts +28 -0
  331. package/src/components/vertical-stepper/vertical-stepper.component.ts +35 -9
  332. package/src/components/vertical-stepper/vertical-stepper.scss +110 -39
  333. package/src/components/vertical-stepper/vertical-stepper.test.ts +35 -0
  334. package/src/components/well/well.scss +2 -2
  335. package/src/events/events.ts +2 -0
  336. package/src/events/zn-chart-click.ts +13 -0
  337. package/src/events/zn-report-change.ts +7 -0
  338. package/src/form-control.scss +36 -3
  339. package/src/internal/anchored-popover.ts +175 -0
  340. package/src/internal/animate.ts +19 -5
  341. package/src/internal/cosmic-border.ts +15 -0
  342. package/src/internal/form.ts +1 -1
  343. package/src/internal/hover-intent.ts +15 -0
  344. package/src/internal/input-modality.ts +15 -0
  345. package/src/internal/pointer-intent.ts +37 -0
  346. package/src/internal/reorder.ts +625 -0
  347. package/src/internal/scroll.ts +51 -3
  348. package/src/internal/selection-card.ts +1 -1
  349. package/src/internal/tab-indicator.ts +92 -0
  350. package/src/internal/table-sort.ts +25 -0
  351. package/src/internal/table-tabs.ts +108 -0
  352. package/src/internal/test-drag.ts +35 -0
  353. package/src/internal/theme-openbyte.test.ts +126 -0
  354. package/src/internal/theme.ts +4 -4
  355. package/src/internal/zinc-element.ts +2 -2
  356. package/src/selection-card.scss +25 -0
  357. package/src/types/web-test-runner-commands.d.ts +1 -0
  358. package/src/utilities/color.test.ts +43 -0
  359. package/src/utilities/color.ts +189 -0
  360. package/src/zinc.ts +14 -0
  361. package/.github/workflows/eleventy_build.yml +0 -42
  362. package/scss/themes/_aura.scss +0 -114
package/dist/zn.d.ts CHANGED
@@ -342,7 +342,16 @@ declare module "utilities/localize" {
342
342
  numFilesSelected: (num: number) => string;
343
343
  }
344
344
  }
345
+ declare module "events/zn-reposition" {
346
+ export type ZnRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
347
+ global {
348
+ interface GlobalEventHandlersEventMap {
349
+ 'zn-reposition': ZnRepositionEvent;
350
+ }
351
+ }
352
+ }
345
353
  declare module "components/popup/popup.component" {
354
+ import "events/zn-reposition";
346
355
  import ZincElement from "internal/zinc-element";
347
356
  import type { CSSResultGroup } from 'lit';
348
357
  export interface VirtualElement {
@@ -386,7 +395,7 @@ declare module "components/popup/popup.component" {
386
395
  active: boolean;
387
396
  /**
388
397
  * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
389
- * panel inside of the viewport.
398
+ * panel inside the viewport.
390
399
  */
391
400
  placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
392
401
  /**
@@ -499,12 +508,14 @@ declare module "components/menu-item/submenu-controller" {
499
508
  import type ZnMenuItem from "components/menu-item/index";
500
509
  /** A reactive controller to manage the registration of event listeners for submenus. */
501
510
  export class SubmenuController implements ReactiveController {
511
+ private static readonly openSubmenus;
502
512
  private host;
503
513
  private popupRef;
504
514
  private enableSubmenuTimer;
505
515
  private isConnected;
506
516
  private isPopupConnected;
507
517
  private skidding;
518
+ private distance;
508
519
  private readonly hasSlotController;
509
520
  private readonly localize;
510
521
  private readonly submenuOpenDelay;
@@ -536,29 +547,15 @@ declare module "utilities/sha256" {
536
547
  declare module "components/icon/icon.component" {
537
548
  import { type CSSResultGroup, type PropertyValues } from 'lit';
538
549
  import ZincElement from "internal/zinc-element";
539
- export type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" | "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" | "lucide";
550
+ export type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" | "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" | "lucide" | "flag";
551
+ export type AvatarPresence = 'online' | 'away' | 'busy' | 'meeting' | 'offline';
540
552
  export type IconColor = "default" | "primary" | "accent" | "info" | "warning" | "error" | "success" | "white" | "disabled" | "red" | "blue" | "green" | "orange" | "yellow" | "indigo" | "violet" | "pink" | "grey" | (string & Record<never, never>);
541
- /**
542
- * @summary Short summary of the component's intended use.
543
- * @documentation https://zinc.style/components/icon
544
- * @status experimental
545
- * @since 1.0
546
- *
547
- * @dependency zn-example
548
- *
549
- * @event zn-event-name - Emitted as an example.
550
- *
551
- * @slot - The default slot.
552
- * @slot example - An example slot.
553
- *
554
- * @csspart base - The component's base wrapper.
555
- *
556
- * @cssproperty --example - An example CSS custom property.
557
- */
558
553
  export default class ZnIcon extends ZincElement {
559
554
  static styles: CSSResultGroup;
555
+ private _lineIconsAdopted;
560
556
  src: string;
561
557
  alt: string;
558
+ /** Size in pixels, or one of the avatar sizes `sm` (22), `md` (28), `lg` (40) and `xl` (56). */
562
559
  size: number;
563
560
  round: boolean;
564
561
  tile: boolean;
@@ -569,6 +566,10 @@ declare module "components/icon/icon.component" {
569
566
  padded: boolean;
570
567
  blink: boolean;
571
568
  squared: boolean;
569
+ /** A live-status dot on an avatar: `online`, `away`, `busy`, `meeting` or `offline`. */
570
+ presence: AvatarPresence;
571
+ /** Draws an avatar as a solid circle even where the theme tints avatars. */
572
+ solid: boolean;
572
573
  private static readonly presetColors;
573
574
  private isPresetColor;
574
575
  gravatarOptions: string;
@@ -582,15 +583,18 @@ declare module "components/icon/icon.component" {
582
583
  private parseSrc;
583
584
  private applyHashFragment;
584
585
  private normalizeRavatarEmail;
586
+ protected updated(changedProperties: PropertyValues<this>): void;
587
+ private adoptLineIcons;
585
588
  render(): import("lit-html").TemplateResult<1>;
586
589
  private getAvatarInitials;
587
590
  private renderLucideIcon;
591
+ private renderFlagIcon;
588
592
  private getLucideIcon;
589
593
  private toPascalCase;
590
594
  private getLucideSvg;
591
595
  private getSvgAttributes;
592
596
  private escapeSvgAttribute;
593
- protected getColorForAvatar(avatarInitials: string): string;
597
+ protected getColorForAvatar(name: string): string;
594
598
  }
595
599
  }
596
600
  declare module "components/icon/index" {
@@ -622,6 +626,7 @@ declare module "components/menu-item/menu-item.component" {
622
626
  * @slot example - An example slot.
623
627
  *
624
628
  * @csspart base - The component's base wrapper.
629
+ * @csspart shortcut - The key cap showing the item's `shortcut`.
625
630
  *
626
631
  * @cssproperty --example - An example CSS custom property.
627
632
  */
@@ -668,6 +673,8 @@ declare module "components/menu-item/menu-item.component" {
668
673
  noBorder: boolean;
669
674
  /** Marks the menu item as currently active/selected. */
670
675
  active: boolean;
676
+ /** A keyboard shortcut shown as a key cap at the end of the item, such as `E` or `⌘K`. */
677
+ shortcut: string;
671
678
  private readonly localize;
672
679
  private readonly hasSlotController;
673
680
  private submenuController;
@@ -707,6 +714,10 @@ declare module "events/zn-select" {
707
714
  }
708
715
  }
709
716
  }
717
+ declare module "internal/cosmic-border" {
718
+ /** Registers `--rotate` so the cosmic border's gradient can animate; `@property` rules inside a shadow root are ignored. */
719
+ export function registerCosmicBorder(): void;
720
+ }
710
721
  declare module "internal/offset" {
711
722
  /**
712
723
  * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
@@ -737,22 +748,27 @@ declare module "internal/scroll" {
737
748
  * boundaries are crossed, so a host's own scroller and the app's outer one are both found.
738
749
  */
739
750
  export function getScrolledAncestors(element: Element | null | undefined): Element[];
740
- /** Returns containers to the top. */
741
- export function scrollToTop(containers: Iterable<Element>, behavior?: ScrollBehavior): void;
751
+ /**
752
+ * Shows a newly selected tab from its start. Scrollers inside `host` return to their top; scrollers around it only
753
+ * scroll back far enough to show the top of `host`, leaving the reader's place alone while the tabs are in view.
754
+ */
755
+ export function revealTop(containers: Iterable<Element>, host: HTMLElement): void;
756
+ /** Scrolls each scroller around `element`, innermost first, just far enough to show its bottom edge. */
757
+ export function revealBottom(element: Element): void;
742
758
  }
743
759
  declare module "components/dialog/dialog.component" {
744
760
  import { type CSSResultGroup, type PropertyValues } from 'lit';
745
761
  import ZincElement from "internal/zinc-element";
746
762
  import ZnButton from "components/button/index";
747
763
  /**
748
- * @summary Short summary of the component's intended use.
764
+ * @summary A modal that appears above the page for a decision that blocks the flow.
749
765
  * @documentation https://zinc.style/components/dialog
750
766
  * @status experimental
751
767
  * @since 1.0
752
768
  *
753
769
  * @dependency zn-button
754
770
  *
755
- * @event zn-show - Emitted when the dialog is opens.
771
+ * @event zn-show - Emitted when the dialog opens.
756
772
  * @event zn-close - Emitted when the dialog is closed.
757
773
  * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to
758
774
  * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
@@ -763,7 +779,7 @@ declare module "components/dialog/dialog.component" {
763
779
  * @slot label - The dialog's label. Alternatively you can use the `label` attribute.
764
780
  * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied
765
781
  * to the icon depending on the dialog variant.
766
- * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.
782
+ * @slot announcement-intro - Optional intro text to display below the icon, when using the variant `announcement`.
767
783
  * @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
768
784
  * @slot footer - The dialog's footer. This is typically used for buttons representing various options.
769
785
  * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.
@@ -773,14 +789,23 @@ declare module "components/dialog/dialog.component" {
773
789
  * @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
774
790
  * @csspart title - The dialog's title.
775
791
  * @csspart close-button - The dialog's close button.
776
- * @csspart close-button__base - The close buttons exported `base` part.
792
+ * @csspart close-button__base - The close button's exported `base` part.
777
793
  * @csspart body - The dialog's body.
778
794
  * @csspart footer - The dialog's footer.
779
795
  *
780
- * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.
796
+ * @cssproperty --width - The preferred width of a `size="custom"` dialog. The dialog shrinks to fit smaller screens.
781
797
  * @cssproperty --header-spacing - The amount of padding to use for the header.
782
798
  * @cssproperty --body-spacing - The amount of padding to use for the body.
783
799
  * @cssproperty --footer-spacing - The amount of padding to use for the footer.
800
+ * @cssproperty --zn-dialog-width-small - Theme token: the width of `size="small"`.
801
+ * @cssproperty --zn-dialog-width-medium - Theme token: the width of `size="medium"`.
802
+ * @cssproperty --zn-dialog-width-large - Theme token: the width of `size="large"`.
803
+ * @cssproperty --zn-dialog-border-radius - Theme token: the dialog's corner radius.
804
+ * @cssproperty --zn-dialog-backdrop - Theme token: the backdrop behind the dialog.
805
+ * @cssproperty --zn-dialog-body-color - Theme token: the body text colour.
806
+ * @cssproperty --zn-dialog-icon-background - Theme token: the fill behind a default or warning header icon.
807
+ * @cssproperty --zn-dialog-close-color - Theme token: the close button's icon colour.
808
+ * @cssproperty --zn-dialog-close-icon-size - Theme token: the close button's icon size, read when the dialog opens.
784
809
  */
785
810
  export default class ZnDialog extends ZincElement {
786
811
  static styles: CSSResultGroup;
@@ -816,10 +841,14 @@ declare module "components/dialog/dialog.component" {
816
841
  * will need to manually open the dialog using the `show()` method.
817
842
  */
818
843
  trigger: string;
844
+ /** Read from `--zn-dialog-close-icon-size` on open, as zn-icon takes its size as an attribute. */
845
+ private closeIconSize;
819
846
  protected firstUpdated(_changedProperties: PropertyValues): void;
820
847
  connectedCallback(): void;
821
848
  disconnectedCallback(): void;
822
849
  private requestClose;
850
+ private handleCancel;
851
+ private handleNativeClose;
823
852
  private addOpenListeners;
824
853
  private removeOpenListeners;
825
854
  /** Shows the dialog. */
@@ -904,10 +933,11 @@ declare module "components/confirm/confirm.component" {
904
933
  private failed;
905
934
  private failure;
906
935
  private submitted;
936
+ private generatedForm;
907
937
  protected firstUpdated(_changedProperties: PropertyValues): void;
908
938
  connectedCallback(): void;
909
939
  updateTriggers(): void;
910
- show: (event?: Event | undefined) => void;
940
+ show: (event?: Event | undefined) => Promise<void>;
911
941
  hide(): void;
912
942
  disconnectedCallback(): void;
913
943
  private reset;
@@ -933,6 +963,38 @@ declare module "components/confirm/index" {
933
963
  }
934
964
  }
935
965
  }
966
+ declare module "components/menu-label/menu-label.component" {
967
+ import { type CSSResultGroup } from 'lit';
968
+ import ZincElement from "internal/zinc-element";
969
+ /**
970
+ * @summary A heading for a group of items in a `zn-menu`. It is skipped by the menu's keyboard navigation.
971
+ * @documentation https://zinc.style/components/menu
972
+ * @status experimental
973
+ * @since 1.0
974
+ *
975
+ * @slot - The label text.
976
+ *
977
+ * @csspart base - The component's base wrapper.
978
+ *
979
+ * @cssproperty --zn-menu-label-padding - Space around the label.
980
+ * @cssproperty --zn-menu-label-color - The label's text colour.
981
+ */
982
+ export default class ZnMenuLabel extends ZincElement {
983
+ static styles: CSSResultGroup;
984
+ connectedCallback(): void;
985
+ render(): import("lit-html").TemplateResult<1>;
986
+ }
987
+ }
988
+ declare module "components/menu-label/index" {
989
+ import ZnMenuLabel from "components/menu-label/menu-label.component";
990
+ export * from "components/menu-label/menu-label.component";
991
+ export default ZnMenuLabel;
992
+ global {
993
+ interface HTMLElementTagNameMap {
994
+ 'zn-menu-label': ZnMenuLabel;
995
+ }
996
+ }
997
+ }
936
998
  declare module "components/tooltip/tooltip.component" {
937
999
  import { type CSSResultGroup, type PropertyValues } from 'lit';
938
1000
  import ZincElement from "internal/zinc-element";
@@ -1004,6 +1066,7 @@ declare module "components/menu/menu.component" {
1004
1066
  import ZnDropdown from "components/dropdown/index";
1005
1067
  import ZnIcon from "components/icon/index";
1006
1068
  import ZnMenuItem from "components/menu-item/index";
1069
+ import ZnMenuLabel from "components/menu-label/index";
1007
1070
  import ZnTooltip from "components/tooltip/index";
1008
1071
  /**
1009
1072
  * @summary Short summary of the component's intended use.
@@ -1033,6 +1096,7 @@ declare module "components/menu/menu.component" {
1033
1096
  'zn-dropdown': typeof ZnDropdown;
1034
1097
  'zn-icon': typeof ZnIcon;
1035
1098
  'zn-menu-item': typeof ZnMenuItem;
1099
+ 'zn-menu-label': typeof ZnMenuLabel;
1036
1100
  'zn-tooltip': typeof ZnTooltip;
1037
1101
  };
1038
1102
  defaultSlot: HTMLSlotElement;
@@ -1141,12 +1205,12 @@ declare module "components/dropdown/dropdown.component" {
1141
1205
  private preloadContent;
1142
1206
  private handlePreload;
1143
1207
  handleTriggerClick(): Promise<void>;
1144
- handleKeyDown(event: KeyboardEvent): void;
1208
+ handleKeyDown: (event: KeyboardEvent) => void;
1145
1209
  private handleTriggerKeyDown;
1146
1210
  private handleTriggerKeyUp;
1147
1211
  private handleTriggerSlotChange;
1148
1212
  private handleDocumentMouseDown;
1149
- handleDocumentKeyDown(event: KeyboardEvent): void;
1213
+ handleDocumentKeyDown: (event: KeyboardEvent) => void;
1150
1214
  /** Opens the dropdown */
1151
1215
  show(): Promise<void>;
1152
1216
  /** Closes the dropdown */
@@ -1172,6 +1236,7 @@ declare module "components/dropdown/index" {
1172
1236
  declare module "components/button/button.component" {
1173
1237
  import { type CSSResultGroup } from 'lit';
1174
1238
  import ZincElement from "internal/zinc-element";
1239
+ import ZnDropdown from "components/dropdown/index";
1175
1240
  import ZnIcon from "components/icon/index";
1176
1241
  import ZnTooltip from "components/tooltip/index";
1177
1242
  import type { IconColor, IconLibrary } from "components/icon/index";
@@ -1182,6 +1247,7 @@ declare module "components/button/button.component" {
1182
1247
  * @status stable
1183
1248
  * @since 2.0
1184
1249
  *
1250
+ * @dependency zn-dropdown
1185
1251
  * @dependency zn-icon
1186
1252
  * @dependency zn-tooltip
1187
1253
  *
@@ -1193,6 +1259,7 @@ declare module "components/button/button.component" {
1193
1259
  * @slot prefix - A presentational prefix icon or similar element.
1194
1260
  * @slot suffix - A presentational suffix icon or similar element.
1195
1261
  * @slot cancel - Slot for custom cancel button/content when autoClick is active.
1262
+ * @slot menu - A `<zn-menu>` of advanced options, opened by a long press, a right click, or ArrowDown on the button.
1196
1263
  *
1197
1264
  * @csspart base - The component's base wrapper.
1198
1265
  * @csspart prefix - The container that wraps the prefix.
@@ -1204,6 +1271,7 @@ declare module "components/button/button.component" {
1204
1271
  export default class ZnButton extends ZincElement implements ZincFormControl {
1205
1272
  static styles: CSSResultGroup;
1206
1273
  static dependencies: {
1274
+ 'zn-dropdown': typeof ZnDropdown;
1207
1275
  'zn-tooltip': typeof ZnTooltip;
1208
1276
  'zn-icon': typeof ZnIcon;
1209
1277
  };
@@ -1211,12 +1279,25 @@ declare module "components/button/button.component" {
1211
1279
  private readonly hasSlotController;
1212
1280
  private _autoClickTimeout;
1213
1281
  private _loadingState;
1282
+ private _longPressTimeout;
1283
+ private _longPressOrigin;
1284
+ /** The pointer that opened the menu is still down, so releasing it over an item selects that item. */
1285
+ private _menuPointerHeld;
1286
+ /** Swallows the click that ends a long press, so the button's own action does not run. */
1287
+ private _suppressClick;
1288
+ private _menuHadFocus;
1289
+ private menuOpen;
1214
1290
  button: HTMLButtonElement;
1291
+ menuDropdown: ZnDropdown;
1215
1292
  countdownContainer: HTMLElement[];
1216
- color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent' | 'star' | (string & Record<never, never>);
1293
+ /** `ai` is reserved for actions that invoke or act on AI-generated content. */
1294
+ color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'ai' | 'transparent' | 'star' | (string & Record<never, never>);
1295
+ size: 'small' | 'medium' | 'large';
1217
1296
  hoverColor: string;
1218
1297
  text: boolean;
1219
1298
  outline: boolean;
1299
+ /** Keeps the filled look where a container forces `text`, such as a page header's action menu. */
1300
+ solid: boolean;
1220
1301
  disabled: boolean;
1221
1302
  grow: boolean;
1222
1303
  square: boolean;
@@ -1233,6 +1314,10 @@ declare module "components/button/button.component" {
1233
1314
  * weight. For label-like triggers such as filter chips. */
1234
1315
  pill: boolean;
1235
1316
  panelBackground: boolean;
1317
+ /** How long, in milliseconds, the button must be held to open the `menu` slot. */
1318
+ longPressDelay: number;
1319
+ /** Where the `menu` slot opens relative to the button. */
1320
+ menuPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
1236
1321
  dropdownCloser: boolean;
1237
1322
  notification: number;
1238
1323
  mutedNotifications: boolean;
@@ -1263,14 +1348,23 @@ declare module "components/button/button.component" {
1263
1348
  label: string;
1264
1349
  /** Toggle state, forwarded to the inner button's `aria-pressed`. */
1265
1350
  pressed: 'true' | 'false' | 'mixed';
1351
+ /** Popup state, forwarded to the inner button's `aria-expanded`. */
1352
+ expanded: 'true' | 'false';
1353
+ /** Popup type, forwarded to the inner button's `aria-haspopup`. */
1354
+ hasPopup: string;
1266
1355
  autoClick: boolean;
1267
1356
  autoClickDelay: number;
1268
1357
  loadingText: string;
1269
1358
  loadingTextPosition: 'left' | 'right' | 'center' | string;
1270
1359
  loading: boolean;
1360
+ /** Shows a spinner and ignores clicks, e.g. while a request is in flight. */
1361
+ processing: boolean;
1362
+ /** Replaces the label while processing. */
1363
+ processingText: string;
1271
1364
  get validity(): ValidityState;
1272
1365
  get validationMessage(): string;
1273
1366
  firstUpdated(): void;
1367
+ connectedCallback(): void;
1274
1368
  disconnectedCallback(): void;
1275
1369
  handleAutoClickChange(_old: boolean, value: boolean): Promise<void>;
1276
1370
  protected updated(changedProps: Map<string, any>): void;
@@ -1280,6 +1374,24 @@ declare module "components/button/button.component" {
1280
1374
  setCustomValidity(message: string): void;
1281
1375
  click(): void;
1282
1376
  handleClick: () => void;
1377
+ private _hasMenu;
1378
+ private getMenu;
1379
+ /** Opens the advanced options in the `menu` slot. */
1380
+ showMenu(): Promise<void>;
1381
+ /** Closes the advanced options in the `menu` slot. */
1382
+ hideMenu(): Promise<void>;
1383
+ private handleHostClickCapture;
1384
+ private handleMenuPointerDown;
1385
+ private handleMenuPointerMove;
1386
+ private handleMenuPointerUp;
1387
+ private handleMenuPointerCancel;
1388
+ private cancelLongPress;
1389
+ private handleMenuContextMenu;
1390
+ private handleMenuKeyDown;
1391
+ private handleMenuShow;
1392
+ private handleMenuHide;
1393
+ private handleMenuAfterHide;
1394
+ private _renderMenu;
1283
1395
  private _isLink;
1284
1396
  private _isButton;
1285
1397
  private getIconButtonColor;
@@ -1341,6 +1453,32 @@ declare module "events/zn-input" {
1341
1453
  }
1342
1454
  }
1343
1455
  }
1456
+ declare module "internal/animate" {
1457
+ export const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)";
1458
+ export const EASE_DRAWER = "cubic-bezier(0.32, 0.72, 0, 1)";
1459
+ /**
1460
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
1461
+ */
1462
+ export function animateTo(el: Element, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
1463
+ /** Parses a CSS duration and returns the number of milliseconds. */
1464
+ export function parseDuration(delay: number | string): number;
1465
+ /** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
1466
+ export function prefersReducedMotion(): boolean;
1467
+ /**
1468
+ * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
1469
+ */
1470
+ export function stopAnimations(el: HTMLElement): Promise<unknown[]>;
1471
+ /**
1472
+ * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
1473
+ * element's scrollHeight before the animation.
1474
+ */
1475
+ export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
1476
+ height: string | number | null | undefined;
1477
+ composite?: CompositeOperationOrAuto;
1478
+ easing?: string;
1479
+ offset?: number | null;
1480
+ }[];
1481
+ }
1344
1482
  declare module "internal/default-value" {
1345
1483
  import type { ReactiveElement } from 'lit';
1346
1484
  export const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;
@@ -1357,6 +1495,7 @@ declare module "components/toggle/toggle.component" {
1357
1495
  * @dependency zn-tooltip
1358
1496
  *
1359
1497
  * @event zn-input - Emitted when the toggle receives input.
1498
+ * @event zn-change - Emitted when the toggle is switched on or off.
1360
1499
  *
1361
1500
  * @slot - The toggle's label.
1362
1501
  * @slot description - A description of the toggle's label. Alternatively, you can use the `description` attribute.
@@ -1374,6 +1513,7 @@ declare module "components/toggle/toggle.component" {
1374
1513
  private readonly hasSlotController;
1375
1514
  private readonly formControlController;
1376
1515
  input: HTMLInputElement;
1516
+ knob: HTMLElement;
1377
1517
  hasFocus: boolean;
1378
1518
  title: string;
1379
1519
  name: string;
@@ -1398,6 +1538,7 @@ declare module "components/toggle/toggle.component" {
1398
1538
  get validity(): ValidityState;
1399
1539
  get validationMessage(): string;
1400
1540
  firstUpdated(_changedProperties: PropertyValues): void;
1541
+ updated(changedProperties: PropertyValues<this>): void;
1401
1542
  private handleBlur;
1402
1543
  private handleInvalid;
1403
1544
  private handleInput;
@@ -1471,6 +1612,7 @@ declare module "components/collapsible/collapsible.component" {
1471
1612
  private stopAnimating;
1472
1613
  private handleTransitionEnd;
1473
1614
  handleCollapse: (e: MouseEvent) => void;
1615
+ handleHeaderKeyDown: (e: KeyboardEvent) => void;
1474
1616
  recalculateNumberOfItems: () => void;
1475
1617
  render(): import("lit-html").TemplateResult<1>;
1476
1618
  }
@@ -1508,12 +1650,16 @@ declare module "components/alert/alert.component" {
1508
1650
  export default class ZnAlert extends ZincElement {
1509
1651
  static styles: CSSResultGroup;
1510
1652
  icon: string;
1653
+ /** The status icon's size in pixels. */
1654
+ iconSize: number;
1511
1655
  caption: string;
1512
1656
  collapse: boolean;
1513
1657
  appearance: 'transparent' | 'solid';
1514
- level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic';
1658
+ /** `ai` marks AI-generated content only. */
1659
+ level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic' | 'ai';
1515
1660
  center: boolean;
1516
1661
  size: 'small' | 'medium' | 'large';
1662
+ connectedCallback(): void;
1517
1663
  render(): import("lit-html").TemplateResult<1>;
1518
1664
  hideAlert(): void;
1519
1665
  }
@@ -1608,6 +1754,7 @@ declare module "components/chat-message/chat-message.component" {
1608
1754
  * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
1609
1755
  * @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`,
1610
1756
  * which auto-assigns itself to this slot.
1757
+ * @slot footer - Content beneath the bubble, such as reactions or a thread summary.
1611
1758
  * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).
1612
1759
  * @slot edit-dialog - Pass-through for an associated dialog element.
1613
1760
  *
@@ -1618,6 +1765,7 @@ declare module "components/chat-message/chat-message.component" {
1618
1765
  * @csspart bubble - The message bubble.
1619
1766
  * @csspart content - The message content within the bubble.
1620
1767
  * @csspart attachments - The attachments row beneath the message content.
1768
+ * @csspart footer - The row beneath the bubble.
1621
1769
  * @csspart system-card - The card rendered for system action types.
1622
1770
  *
1623
1771
  * @cssproperty --message-background - The bubble's background color.
@@ -1651,11 +1799,14 @@ declare module "components/chat-message/chat-message.component" {
1651
1799
  hideSender: boolean;
1652
1800
  /** Whether any element is assigned to the `attachments` slot — drives the attachments row visibility. */
1653
1801
  private hasAttachments;
1802
+ /** Whether any element is assigned to the `footer` slot — drives the footer row visibility. */
1803
+ private hasFooter;
1654
1804
  connectedCallback(): void;
1655
1805
  protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
1656
1806
  protected firstUpdated(): void;
1657
1807
  private handleAttachmentsSlotChange;
1658
1808
  private syncHasAttachments;
1809
+ private syncHasFooter;
1659
1810
  private isSystemMessage;
1660
1811
  private renderSystemCard;
1661
1812
  private systemLabel;
@@ -1757,7 +1908,12 @@ declare module "components/chip/chip.component" {
1757
1908
  icon: string;
1758
1909
  caption: string;
1759
1910
  iconSize: number;
1760
- type: 'info' | 'success' | 'warning' | 'error' | 'primary' | 'transparent' | 'custom' | 'neutral';
1911
+ /** `ai` marks AI-generated content only. */
1912
+ type: 'info' | 'success' | 'warning' | 'error' | 'primary' | 'ai' | 'transparent' | 'custom' | 'neutral';
1913
+ /** Fills the chip with its type colour. */
1914
+ solid: boolean;
1915
+ /** Leads the label with a dot in the type colour. */
1916
+ dot: boolean;
1761
1917
  flush: boolean;
1762
1918
  flushX: boolean;
1763
1919
  flushY: boolean;
@@ -1864,6 +2020,179 @@ declare module "components/copy-button/index" {
1864
2020
  }
1865
2021
  }
1866
2022
  }
2023
+ declare module "internal/table-sort" {
2024
+ import { type TemplateResult } from 'lit';
2025
+ export type SortState = 'ascending' | 'descending' | 'none';
2026
+ export function renderSortIcon(state: SortState): TemplateResult;
2027
+ export function sortKeyHandler(onSort: () => void): (e: KeyboardEvent) => void;
2028
+ }
2029
+ declare module "internal/reorder" {
2030
+ import type { FormControlController } from "internal/form";
2031
+ import type { ReactiveController, ReactiveControllerHost } from 'lit';
2032
+ /** A component whose keyed items can be dragged, or moved by keyboard, into a new order. */
2033
+ export interface ReorderHost extends ReactiveControllerHost, HTMLElement {
2034
+ /** The item keys in their current order. */
2035
+ reorderKeys: () => string[];
2036
+ /** Shows the items in a new order. */
2037
+ applyReorder: (keys: string[]) => void;
2038
+ /** The row drawn for an item, measured to slide it from its old position. */
2039
+ reorderRow: (key: string) => HTMLElement | null;
2040
+ /** Every element that slides with an item, when more than its row does (a table column's cells). */
2041
+ reorderSlides?: (key: string) => HTMLElement[];
2042
+ /** Whether an item is pinned where it is; nothing can move past it either. */
2043
+ reorderLocked?: (key: string) => boolean;
2044
+ /** Where the pointer must be for a drag to land; letting go outside it cancels. Defaults to the rows' parent. */
2045
+ reorderArea?: () => HTMLElement | null;
2046
+ /** The element that follows the pointer while dragging. Defaults to a copy of the item's row. */
2047
+ reorderGhost?: (key: string) => HTMLElement;
2048
+ /** Submits the form after each reorder when set: to this URL, or the form's own action when empty. */
2049
+ formAction?: string;
2050
+ disabled?: boolean;
2051
+ }
2052
+ export interface ReorderOptions {
2053
+ /** Submits through the host's form, which announces the form so a host page can intercept the submit. */
2054
+ formControl?: FormControlController;
2055
+ /** Fields for a temporary form when the host has a `formaction` but no form of its own. */
2056
+ fallbackFields?: () => [string, string][];
2057
+ /** Keys that move the focused item. With `alt`, plain arrows are left to navigate between items. */
2058
+ modifier?: 'none' | 'alt';
2059
+ /** Focuses an item after it moves by keyboard. */
2060
+ focus?: (key: string) => void;
2061
+ /** Which way the items run: arrow keys, the drag midpoint and the slide follow it. */
2062
+ axis?: 'vertical' | 'horizontal';
2063
+ /**
2064
+ * Leaves the items in place while dragging and tracks `dropIndex` for the host to draw a drop line, moving the item
2065
+ * only on drop. Suits items of very different sizes, which would jump under the pointer when moved live.
2066
+ */
2067
+ indicator?: boolean;
2068
+ }
2069
+ /**
2070
+ * Pointer and keyboard reordering for a keyed list, with the change announced through `zn-change` and `zn-reorder`
2071
+ * and, when the host has a `formaction`, submitted with its form.
2072
+ *
2073
+ * Dragging runs on pointer events rather than native drag and drop, which hands the cursor to the browser for the
2074
+ * whole drag.
2075
+ */
2076
+ export class ReorderController implements ReactiveController {
2077
+ /** The item being dragged, styled as its placeholder. */
2078
+ draggedKey: string | null;
2079
+ /** Whether a drag is under way, for transitions while items shift. */
2080
+ isDragging: boolean;
2081
+ /** With `indicator`, the boundary the dragged item would drop at: before the item at this index, or after the last. */
2082
+ dropIndex: number | null;
2083
+ private readonly host;
2084
+ private readonly options;
2085
+ private dragKey;
2086
+ private startOrder;
2087
+ private sliding;
2088
+ private listOverflow;
2089
+ private press;
2090
+ private point;
2091
+ private ghost;
2092
+ private ghostOffset;
2093
+ private shield;
2094
+ private scroller;
2095
+ private scrollFrame;
2096
+ constructor(host: ReorderHost, options?: ReorderOptions);
2097
+ hostConnected(): void;
2098
+ hostDisconnected(): void;
2099
+ private get horizontal();
2100
+ /** The leading edge of a row along the axis. */
2101
+ private start;
2102
+ private keys;
2103
+ isLocked(key: string): boolean;
2104
+ /** A move is allowed when neither the moved item nor any item it would shift past is locked. */
2105
+ canMove(fromIndex: number, toIndex: number): boolean;
2106
+ canStep(key: string, step: number): boolean;
2107
+ /** Moves an item and announces the new order. */
2108
+ move(fromIndex: number, toIndex: number): boolean;
2109
+ step(key: string, step: number): boolean;
2110
+ /** Arrow keys move the item one place and Home/End to either end. Returns whether the key was handled. */
2111
+ handleKeyDown(event: KeyboardEvent, key: string): boolean;
2112
+ /** Starts tracking a press on an item; it becomes a drag once the pointer moves, or a touch holds still. */
2113
+ handlePointerDown(event: PointerEvent, key: string): void;
2114
+ private onPointerMove;
2115
+ private onPointerUp;
2116
+ private onPointerCancel;
2117
+ private onTouchMove;
2118
+ private onNativeDragStart;
2119
+ private onKeyDown;
2120
+ private beginDrag;
2121
+ private placeGhost;
2122
+ private area;
2123
+ private inArea;
2124
+ private hoveredKey;
2125
+ /**
2126
+ * Moves the dragged item to the hovered one's place, once the pointer crosses that item's midpoint. In a gap
2127
+ * between items nothing moves, and letting go there keeps the order so far.
2128
+ */
2129
+ private dragOver;
2130
+ private pastMidpoint;
2131
+ private trackDropIndex;
2132
+ private setDropIndex;
2133
+ private dropTarget;
2134
+ private autoScroll;
2135
+ private endDrag;
2136
+ private release;
2137
+ /** Shows the new order, sliding each row from its old position. */
2138
+ reorder(keys: string[]): void;
2139
+ private clipWhileSliding;
2140
+ private commit;
2141
+ private emit;
2142
+ /** Submits the host's form when it has a `formaction`. */
2143
+ private submit;
2144
+ }
2145
+ /**
2146
+ * The border radius that rounds a row's corners where it meets the corners of the nearest rounded ancestor of `host`
2147
+ * that clips it (a flush list in a panel), so a drag placeholder's dashed outline follows the clip there instead of
2148
+ * being cut off. Null when nothing rounded clips the row.
2149
+ */
2150
+ export function clipCornerRadius(host: Element, row: HTMLElement): string | null;
2151
+ }
2152
+ declare module "internal/tab-indicator" {
2153
+ /**
2154
+ * Squishes a sliding tab indicator's height to `--zn-navbar-tab-indicator-squash` during
2155
+ * `--zn-navbar-tab-indicator-delay`, then lets it recover as it travels. Does nothing unless a squash is set.
2156
+ */
2157
+ export function squishTabIndicator(indicator: HTMLElement): void;
2158
+ export interface IndicatorEdges {
2159
+ left: number;
2160
+ right: number;
2161
+ }
2162
+ /**
2163
+ * Slides an indicator, already placed at `to` by `left` and `width`, from the box `from` using only `transform`, so the
2164
+ * browser can run it off the main thread while the new tab loads. The edge heading for the new tab moves on
2165
+ * `--zn-navbar-tab-indicator-duration`/`-easing`/`-delay`, the other on the `-trail-` tokens, stretching the indicator mid-move.
2166
+ */
2167
+ export function slideTabIndicator(indicator: HTMLElement, from: IndicatorEdges, to: IndicatorEdges): void;
2168
+ }
2169
+ declare module "internal/table-tabs" {
2170
+ import { nothing, type ReactiveController, type ReactiveControllerHost, type TemplateResult } from 'lit';
2171
+ export interface TableTab {
2172
+ value: string;
2173
+ label: string;
2174
+ count?: number | string;
2175
+ }
2176
+ export class TabRowController implements ReactiveController {
2177
+ private readonly onSelect;
2178
+ private indicator;
2179
+ private indicatorTab;
2180
+ private observer;
2181
+ constructor(host: ReactiveControllerHost, opts: {
2182
+ onSelect: (value: string) => void;
2183
+ });
2184
+ hostUpdated(): void;
2185
+ hostDisconnected(): void;
2186
+ render(tabs: TableTab[], active: string, pill: boolean): TemplateResult | typeof nothing;
2187
+ private setIndicator;
2188
+ private observeBar;
2189
+ /**
2190
+ * One indicator shared by every tab, positioned by its two edges as zn-navbar's is: on a tab
2191
+ * change the edge nearest the destination leads and the other trails, so it slides across.
2192
+ */
2193
+ syncTabIndicator(): void;
2194
+ }
2195
+ }
1867
2196
  declare module "events/zn-filter-change" {
1868
2197
  export type ZnFilterChangeEvent = CustomEvent<Record<PropertyKey, never>>;
1869
2198
  global {
@@ -1884,10 +2213,125 @@ declare module "events/zn-search-change" {
1884
2213
  }
1885
2214
  }
1886
2215
  }
2216
+ declare module "components/badge/badge.component" {
2217
+ import { type CSSResultGroup } from 'lit';
2218
+ import ZincElement from "internal/zinc-element";
2219
+ /**
2220
+ * @summary Badges label the status or category of a record, such as "Active" or "Past due".
2221
+ * @documentation https://zinc.style/components/badge
2222
+ * @status experimental
2223
+ * @since 1.0
2224
+ *
2225
+ * @dependency zn-icon
2226
+ *
2227
+ * @slot - The badge's label.
2228
+ *
2229
+ * @csspart base - The component's base wrapper.
2230
+ */
2231
+ export default class ZnBadge extends ZincElement {
2232
+ static styles: CSSResultGroup;
2233
+ /** `ai` marks AI-generated content only. */
2234
+ type: 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'ai';
2235
+ size: 'medium' | 'large';
2236
+ /** Fills the badge with its type colour. */
2237
+ solid: boolean;
2238
+ /** Leads the label with a dot in the type colour. */
2239
+ dot: boolean;
2240
+ render(): import("lit-html").TemplateResult<1>;
2241
+ }
2242
+ }
2243
+ declare module "components/badge/index" {
2244
+ import ZnBadge from "components/badge/badge.component";
2245
+ export * from "components/badge/badge.component";
2246
+ export default ZnBadge;
2247
+ global {
2248
+ interface HTMLElementTagNameMap {
2249
+ 'zn-badge': ZnBadge;
2250
+ }
2251
+ }
2252
+ }
2253
+ declare module "internal/anchored-popover" {
2254
+ import type { ReactiveController, ReactiveControllerHost } from 'lit';
2255
+ export type PopoverHideReason = 'escape' | 'outside' | 'api';
2256
+ interface AnchoredPopoverOptions {
2257
+ /** Selector, in the host's shadow root, of the element the popover hangs from. */
2258
+ trigger: string;
2259
+ /** Selector, in the host's shadow root, of the popover. */
2260
+ popover: string;
2261
+ /** The popover's rendered width in px, used to keep it on screen. */
2262
+ width: () => number;
2263
+ /** Which trigger edge the popover lines up with; it flips when that would run off screen. */
2264
+ align: 'start' | 'end';
2265
+ /** Called whenever the popover closes, with how it was closed. */
2266
+ onHide?: (reason: PopoverHideReason) => void;
2267
+ /**
2268
+ * Selectors, in the popover, tried in order for the element to focus once it opens. When set, focus goes back to the
2269
+ * trigger as it closes, unless it has already moved somewhere else.
2270
+ */
2271
+ focus?: string[];
2272
+ }
2273
+ /**
2274
+ * A fixed-position popover anchored under a trigger in the host's shadow root, closed by Escape or a click outside
2275
+ * both. Fixed so a panel's overflow can't clip it.
2276
+ */
2277
+ export class AnchoredPopoverController implements ReactiveController {
2278
+ open: boolean;
2279
+ position: {
2280
+ top: number;
2281
+ left: number;
2282
+ };
2283
+ private readonly host;
2284
+ private readonly opts;
2285
+ private observed;
2286
+ private readonly resizes;
2287
+ constructor(host: ReactiveControllerHost & HTMLElement, opts: AnchoredPopoverOptions);
2288
+ hostConnected(): void;
2289
+ hostDisconnected(): void;
2290
+ hostUpdated(): void;
2291
+ private refit;
2292
+ get style(): string;
2293
+ show(): void;
2294
+ hide(reason?: PopoverHideReason): void;
2295
+ trigger(): HTMLElement | null;
2296
+ private popover;
2297
+ private focusIsLost;
2298
+ private focusTrigger;
2299
+ private place;
2300
+ private outsideClick;
2301
+ private keydown;
2302
+ private reposition;
2303
+ }
2304
+ }
1887
2305
  declare module "utilities/lit-to-html" {
1888
2306
  import { type TemplateResult } from "lit";
1889
2307
  export function litToHTML<T extends HTMLElement>(templateResult: TemplateResult): T | null;
1890
2308
  }
2309
+ declare module "utilities/color" {
2310
+ export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
2311
+ /** Red, green and blue, each 0-255. */
2312
+ export type Rgb = [number, number, number];
2313
+ /** Hue 0-360, saturation and value 0-1. */
2314
+ export type Hsv = [number, number, number];
2315
+ export function hsvToRgb(h: number, s: number, v: number): Rgb;
2316
+ export function rgbToHsv(r: number, g: number, b: number): Hsv;
2317
+ /** Rounded to whole degrees and percentages. */
2318
+ export function rgbToHsl(r: number, g: number, b: number): [number, number, number];
2319
+ /** Saturation and lightness are percentages. */
2320
+ export function hslToRgb(h: number, s: number, l: number): Rgb;
2321
+ /** Lightness 0-1, chroma (about 0-0.4), hue in degrees. */
2322
+ export function rgbToOklch(r: number, g: number, b: number): [number, number, number];
2323
+ /** Colours outside sRGB are clamped into it. */
2324
+ export function oklchToRgb(L: number, C: number, H: number): Rgb;
2325
+ /** OKLCH as shown to people: lightness as a percentage to 1dp, chroma to 3dp, hue to 1dp. */
2326
+ export function oklchParts(rgb: Rgb): [number, number, number];
2327
+ export const toHex: (rgb: Rgb) => string;
2328
+ /** The format a colour is written in, or null for a name, a token or anything that isn't a colour. */
2329
+ export function detectColorFormat(value: string): ColorFormat | null;
2330
+ /** Any CSS colour (hex, rgb(), hsl(), oklch(), a name or var(--token)) as RGB, or null when it isn't one. */
2331
+ export function parseColor(value: string): Rgb | null;
2332
+ /** Writes a colour out in the given format, e.g. `#085EFD`, `rgb(8, 94, 253)`, `hsl(219, 98%, 51%)` or `oklch(58.4% 0.226 262.5)`. */
2333
+ export function formatColor(rgb: Rgb, format: ColorFormat): string;
2334
+ }
1891
2335
  declare module "components/slash-menu/slash-menu-items" {
1892
2336
  export interface SlashMenuItem {
1893
2337
  /** The text shown in the menu. */
@@ -2161,6 +2605,66 @@ declare module "components/slash-menu/index" {
2161
2605
  }
2162
2606
  }
2163
2607
  }
2608
+ declare module "components/color-picker/color-picker.component" {
2609
+ import { type ColorFormat } from "utilities/color";
2610
+ import { type CSSResultGroup, type PropertyValues } from 'lit';
2611
+ import ZincElement from "internal/zinc-element";
2612
+ /**
2613
+ * @summary A colour panel: a saturation/brightness area, a hue slider and the colour's HEX, RGB, HSL and OKLCH values.
2614
+ * @documentation https://zinc.style/components/color-picker
2615
+ * @status experimental
2616
+ * @since 1.0
2617
+ *
2618
+ * @event zn-input - Emitted when the colour or the format being worked in changes.
2619
+ *
2620
+ * @csspart base - The component's base wrapper.
2621
+ */
2622
+ export default class ZnColorPicker extends ZincElement {
2623
+ static styles: CSSResultGroup;
2624
+ area: HTMLElement;
2625
+ /** The colour, in any CSS colour syntax. Reads back as `#RRGGBB`. */
2626
+ value: string;
2627
+ /** The format being worked in. Focusing or editing a row switches to that row's format. */
2628
+ format: ColorFormat;
2629
+ label: string;
2630
+ private hsv;
2631
+ private editing;
2632
+ private get rgb();
2633
+ connectedCallback(): void;
2634
+ /** Moves focus to the colour area. */
2635
+ focus(options?: FocusOptions): void;
2636
+ handleValueChange(): void;
2637
+ private adopt;
2638
+ private commit;
2639
+ private useFormat;
2640
+ private pick;
2641
+ private handleAreaPointerDown;
2642
+ private handleAreaPointerMove;
2643
+ private handleAreaPointerUp;
2644
+ private handleAreaKeyDown;
2645
+ private handleHueInput;
2646
+ private field;
2647
+ private num;
2648
+ private handleFieldFocus;
2649
+ private handleFieldInput;
2650
+ private handleFieldBlur;
2651
+ /** The colour a row describes once `value` is written into its `key` field, or null when that value is out of range. */
2652
+ private readField;
2653
+ protected updated(changed: PropertyValues): void;
2654
+ private renderTrio;
2655
+ render(): import("lit-html").TemplateResult<1>;
2656
+ }
2657
+ }
2658
+ declare module "components/color-picker/index" {
2659
+ import ZnColorPicker from "components/color-picker/color-picker.component";
2660
+ export * from "components/color-picker/color-picker.component";
2661
+ export default ZnColorPicker;
2662
+ global {
2663
+ interface HTMLElementTagNameMap {
2664
+ 'zn-color-picker': ZnColorPicker;
2665
+ }
2666
+ }
2667
+ }
2164
2668
  declare module "components/slash-item/slash-item.component" {
2165
2669
  import ZincElement from "internal/zinc-element";
2166
2670
  import type { CSSResultGroup } from 'lit';
@@ -2214,9 +2718,12 @@ declare module "components/slash-item/index" {
2214
2718
  }
2215
2719
  }
2216
2720
  declare module "components/input/input.component" {
2721
+ import { type ColorFormat } from "utilities/color";
2217
2722
  import { type SlashMenuItem } from "components/slash-menu/index";
2218
2723
  import ZincElement from "internal/zinc-element";
2724
+ import ZnColorPicker from "components/color-picker/index";
2219
2725
  import ZnIcon from "components/icon/index";
2726
+ import ZnPopup from "components/popup/index";
2220
2727
  import ZnSlashItem from "components/slash-item/index";
2221
2728
  import ZnSlashMenu from "components/slash-menu/index";
2222
2729
  import ZnTooltip from "components/tooltip/index";
@@ -2227,7 +2734,9 @@ declare module "components/input/input.component" {
2227
2734
  * @status experimental
2228
2735
  * @since 1.0
2229
2736
  *
2737
+ * @dependency zn-color-picker
2230
2738
  * @dependency zn-icon
2739
+ * @dependency zn-popup
2231
2740
  * @dependency zn-tooltip
2232
2741
  *
2233
2742
  * @event zn-blur - Emitted when the control loses focus.
@@ -2269,6 +2778,8 @@ declare module "components/input/input.component" {
2269
2778
  * @csspart clear-button - The clear button.
2270
2779
  * @csspart password-toggle-button - The password toggle button.
2271
2780
  * @csspart suffix - The container that wraps the suffix.
2781
+ * @csspart color-swatch - The swatch that opens the colour panel on colour inputs.
2782
+ * @csspart color-picker - The colour panel.
2272
2783
  *
2273
2784
  * @cssproperty --zn-range-track-height - The height of a range input's track.
2274
2785
  * @cssproperty --zn-range-track-color - The color of a range input's track.
@@ -2279,7 +2790,9 @@ declare module "components/input/input.component" {
2279
2790
  export default class ZnInput extends ZincElement implements ZincFormControl {
2280
2791
  static styles: import("lit").CSSResult[];
2281
2792
  static dependencies: {
2793
+ 'zn-color-picker': typeof ZnColorPicker;
2282
2794
  'zn-icon': typeof ZnIcon;
2795
+ 'zn-popup': typeof ZnPopup;
2283
2796
  'zn-slash-item': typeof ZnSlashItem;
2284
2797
  'zn-slash-menu': typeof ZnSlashMenu;
2285
2798
  'zn-tooltip': typeof ZnTooltip;
@@ -2289,12 +2802,17 @@ declare module "components/input/input.component" {
2289
2802
  private readonly localize;
2290
2803
  private readonly slashController;
2291
2804
  input: HTMLInputElement;
2292
- colorPicker: HTMLInputElement;
2805
+ colorSwatch: HTMLButtonElement;
2806
+ colorPanel: ZnColorPicker;
2807
+ colorPopup: ZnPopup;
2293
2808
  slashMenuElement: ZnSlashMenu | null;
2294
2809
  private hasFocus;
2295
2810
  /** Renders the slash menu only once it has been needed, keeping unused inputs cheap. */
2296
2811
  private hasSlashMenu;
2297
2812
  private isUserTyping;
2813
+ private colorOpen;
2814
+ private colorInvalid;
2815
+ private escapeSwallowed;
2298
2816
  title: string;
2299
2817
  private __numberInput;
2300
2818
  private __dateInput;
@@ -2346,8 +2864,11 @@ declare module "components/input/input.component" {
2346
2864
  passwordVisible: boolean;
2347
2865
  /** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
2348
2866
  noSpinButtons: boolean;
2349
- /** The color format to display for color inputs. Only applies when type is 'color'. **/
2350
- colorFormat: 'hex' | 'rgb' | 'hsl' | 'oklch';
2867
+ /**
2868
+ * The format a colour input writes its value in. Typing a colour in another format, or working in another format's
2869
+ * row of the colour panel, switches to that format. Only applies when type is 'color'.
2870
+ */
2871
+ colorFormat: ColorFormat;
2351
2872
  /**
2352
2873
  * Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type
2353
2874
  * is 'range' and no `context-note` is set.
@@ -2361,6 +2882,8 @@ declare module "components/input/input.component" {
2361
2882
  form: string;
2362
2883
  /** Makes the input a required field. */
2363
2884
  required: boolean;
2885
+ /** Short text shown next to the label, styled like the help text, e.g. `optional`. */
2886
+ labelNote: string;
2364
2887
  /** A regular expression pattern to validate input against. */
2365
2888
  pattern: string;
2366
2889
  /** The minimum length of input that will be considered valid. */
@@ -2439,14 +2962,15 @@ declare module "components/input/input.component" {
2439
2962
  /** Gets the validation message */
2440
2963
  get validationMessage(): string;
2441
2964
  private validateMinMax;
2442
- private hexToRgb;
2443
- private rgbToHex;
2444
- private hexToOklch;
2445
- private oklchToHex;
2446
- private hexToHsl;
2447
- private hslToHex;
2448
- private convertToHex;
2449
- private convertFromHex;
2965
+ /**
2966
+ * A colour value as it should be shown: kept as written when it is already a tidy value in the current format (so
2967
+ * `oklch(70% 0.15 250)` isn't nudged by rounding), otherwise written out in full. Anything that isn't a colour is
2968
+ * returned untouched.
2969
+ */
2970
+ private tidyColor;
2971
+ private get colorText();
2972
+ private get colorHex();
2973
+ private commitColor;
2450
2974
  private handleBlur;
2451
2975
  private handleChange;
2452
2976
  private handleClearClick;
@@ -2457,9 +2981,14 @@ declare module "components/input/input.component" {
2457
2981
  private handleKeyDown;
2458
2982
  private handlePasswordToggle;
2459
2983
  private handleColorSwatchClick;
2460
- private handleColorPickerChange;
2984
+ private openColorPanel;
2985
+ private closeColorPanel;
2986
+ private handleColorDocumentMouseDown;
2987
+ private handleColorDocumentKeyDown;
2988
+ private handleColorPanelInput;
2461
2989
  private focusInput;
2462
2990
  protected firstUpdated(): void;
2991
+ disconnectedCallback(): void;
2463
2992
  /** The insertions the slash menu offers, gathered from every source, in the order they were declared. */
2464
2993
  resolveSlashItems(search?: string): Promise<SlashMenuItem[]>;
2465
2994
  /** Opens the slash menu at the caret, inserting the trigger if it isn't already there. */
@@ -2571,30 +3100,6 @@ declare module "components/option/index" {
2571
3100
  }
2572
3101
  }
2573
3102
  }
2574
- declare module "internal/animate" {
2575
- /**
2576
- * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
2577
- */
2578
- export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
2579
- /** Parses a CSS duration and returns the number of milliseconds. */
2580
- export function parseDuration(delay: number | string): number;
2581
- /** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
2582
- export function prefersReducedMotion(): boolean;
2583
- /**
2584
- * Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
2585
- */
2586
- export function stopAnimations(el: HTMLElement): Promise<unknown[]>;
2587
- /**
2588
- * We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
2589
- * element's scrollHeight before the animation.
2590
- */
2591
- export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
2592
- height: string | number | null | undefined;
2593
- composite?: CompositeOperationOrAuto;
2594
- easing?: string;
2595
- offset?: number | null;
2596
- }[];
2597
- }
2598
3103
  declare module "internal/conditional" {
2599
3104
  import type { ReactiveController, ReactiveControllerHost } from 'lit';
2600
3105
  export interface ConditionalHost {
@@ -2625,32 +3130,6 @@ declare module "internal/conditional" {
2625
3130
  private checkConditionals;
2626
3131
  }
2627
3132
  }
2628
- declare module "utilities/animation-registry" {
2629
- export interface ElementAnimation {
2630
- keyframes: Keyframe[];
2631
- rtlKeyframes?: Keyframe[];
2632
- options?: KeyframeAnimationOptions;
2633
- }
2634
- export interface ElementAnimationMap {
2635
- [animationName: string]: ElementAnimation;
2636
- }
2637
- export interface GetAnimationOptions {
2638
- /**
2639
- * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
2640
- * available using getAnimation().
2641
- */
2642
- dir: string;
2643
- }
2644
- /**
2645
- * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
2646
- * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
2647
- */
2648
- export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
2649
- /** Sets a custom animation for the specified element. */
2650
- export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
2651
- /** Gets an element's animation. Falls back to the default if no animation is found. */
2652
- export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;
2653
- }
2654
3133
  declare module "components/opt-group/opt-group.component" {
2655
3134
  import { type CSSResultGroup } from 'lit';
2656
3135
  import ZincElement from "internal/zinc-element";
@@ -2785,6 +3264,7 @@ declare module "components/select/select.component" {
2785
3264
  private readonly hasSlotController;
2786
3265
  private readonly localize;
2787
3266
  private typeToSelectString;
3267
+ private escapeSwallowed;
2788
3268
  private typeToSelectTimeout;
2789
3269
  private closeWatcher;
2790
3270
  popup: ZnPopup;
@@ -2903,6 +3383,8 @@ declare module "components/select/select.component" {
2903
3383
  form: string;
2904
3384
  /** The select's required attribute. */
2905
3385
  required: boolean;
3386
+ /** Short text shown next to the label, styled like the help text, e.g. `optional`. */
3387
+ labelNote: string;
2906
3388
  cacheKey: string;
2907
3389
  triggerSubmit: boolean;
2908
3390
  /**
@@ -3016,6 +3498,7 @@ declare module "components/select/select.component" {
3016
3498
  private _createFreeTextOption;
3017
3499
  private handleOptionClick;
3018
3500
  private handleDefaultSlotChange;
3501
+ private handleTagRemoveKeyDown;
3019
3502
  private handleTagRemove;
3020
3503
  private getAllOptions;
3021
3504
  private getAllOptGroups;
@@ -3073,6 +3556,8 @@ declare module "components/select/select.component" {
3073
3556
  private updateDependencies;
3074
3557
  private updateDependencyState;
3075
3558
  private toggleDisabled;
3559
+ private _expandIcon?;
3560
+ private expandIcon;
3076
3561
  render(): TemplateResult<1>;
3077
3562
  }
3078
3563
  }
@@ -3148,6 +3633,7 @@ declare module "components/datepicker/datepicker.component" {
3148
3633
  private readonly hasSlotController;
3149
3634
  input: HTMLInputElement;
3150
3635
  private hasFocus;
3636
+ private escapeSwallowed;
3151
3637
  title: string;
3152
3638
  /** The name of the input, submitted as a name/value pair with form data. */
3153
3639
  name: string;
@@ -3187,6 +3673,8 @@ declare module "components/datepicker/datepicker.component" {
3187
3673
  inline: boolean;
3188
3674
  /** Makes the input a required field. */
3189
3675
  required: boolean;
3676
+ /** Short text shown next to the label, styled like the help text, e.g. `optional`. */
3677
+ labelNote: string;
3190
3678
  /** Adds a clear button to the calendar for removing a selected date. **/
3191
3679
  clearable: boolean;
3192
3680
  /** Makes the input a range picker. **/
@@ -3277,6 +3765,8 @@ declare module "components/datepicker/datepicker.component" {
3277
3765
  private handleInvalid;
3278
3766
  private handleKeyDown;
3279
3767
  private handlePaste;
3768
+ private hideCalendarKeepingFocus;
3769
+ private handleInputClick;
3280
3770
  private handleBlur;
3281
3771
  private isValidDateString;
3282
3772
  private parseDate;
@@ -3352,6 +3842,7 @@ declare module "components/query-builder/query-builder.component" {
3352
3842
  NMatch = "nmatch",
3353
3843
  Contains = "contains",
3354
3844
  DoesNotContain = "doesnotcontain",
3845
+ DnContain = "dncontain",
3355
3846
  Starts = "starts",
3356
3847
  NStarts = "nstarts",
3357
3848
  Ends = "ends",
@@ -3360,6 +3851,8 @@ declare module "components/query-builder/query-builder.component" {
3360
3851
  NWild = "nwild",
3361
3852
  Like = "like",
3362
3853
  NLike = "nlike",
3854
+ LikeIn = "likein",
3855
+ NLikeIn = "nlikein",
3363
3856
  Fuzzy = "fuzzy",
3364
3857
  NFuzzy = "nfuzzy",
3365
3858
  Gte = "gte",
@@ -3370,6 +3863,11 @@ declare module "components/query-builder/query-builder.component" {
3370
3863
  export const operatorText: {
3371
3864
  [key in QueryBuilderOperators]: string;
3372
3865
  };
3866
+ export interface QueryBuilderRule {
3867
+ key: string;
3868
+ comparator: string;
3869
+ value: string | string[];
3870
+ }
3373
3871
  export interface CreatedRule {
3374
3872
  id: string;
3375
3873
  name: string;
@@ -3413,6 +3911,10 @@ declare module "components/query-builder/query-builder.component" {
3413
3911
  name: string;
3414
3912
  value: PropertyKey;
3415
3913
  showValues: string[];
3914
+ /** Rules to start with, in the shape the builder submits. */
3915
+ rules: QueryBuilderRule[];
3916
+ /** Allows a filter to be added more than once, e.g. for a date range. */
3917
+ repeatable: boolean;
3416
3918
  private get _usedFilterIds();
3417
3919
  get validationMessage(): string;
3418
3920
  get validity(): ValidityState;
@@ -3421,6 +3923,9 @@ declare module "components/query-builder/query-builder.component" {
3421
3923
  private _handleChange;
3422
3924
  private _addRule;
3423
3925
  private _createInput;
3926
+ private _inputValue;
3927
+ /** Reverses _updateDateValue, so a submitted date value can be shown again. */
3928
+ private _submittedDate;
3424
3929
  private _changeValueInput;
3425
3930
  private _createBooleanInput;
3426
3931
  private _createNumberInput;
@@ -3454,101 +3959,120 @@ declare module "components/query-builder/index" {
3454
3959
  }
3455
3960
  declare module "components/data-table-filter/data-table-filter.component" {
3456
3961
  import { type CSSResultGroup, nothing, type PropertyValues } from 'lit';
3457
- import { type QueryBuilderData } from "components/query-builder/index";
3962
+ import { type QueryBuilderItem } from "components/query-builder/index";
3458
3963
  import ZincElement, { type ZincFormControl } from "internal/zinc-element";
3459
3964
  import ZnButton from "components/button/index";
3460
- import ZnDatepicker from "components/datepicker/index";
3461
- import ZnDropdown from "components/dropdown/index";
3965
+ import ZnIcon from "components/icon/index";
3462
3966
  import ZnInput from "components/input/index";
3463
- import ZnMenu from "components/menu/index";
3464
- import ZnMenuItem from "components/menu-item/index";
3967
+ import ZnOptGroup from "components/opt-group/index";
3968
+ import ZnOption from "components/option/index";
3969
+ import ZnSelect from "components/select/index";
3970
+ /** A field offered by the filter: a zn-query-builder filter whose operators may be left out. */
3971
+ export type FilterField = Omit<QueryBuilderItem, 'operators'> & {
3972
+ operators?: QueryBuilderItem['operators'] | string[];
3973
+ };
3974
+ export const FILTER_OPERATOR_LABELS: Record<string, string>;
3465
3975
  /**
3466
- * @summary An inline filter bar for data tables. Each active filter is a pill whose dropdown sets its value.
3976
+ * @summary The filter for data tables: a funnel that opens a field / operator / value builder, and chips for the
3977
+ * rules that apply.
3467
3978
  * @documentation https://zinc.style/components/data-table-filter
3468
3979
  * @status experimental
3469
3980
  * @since 1.0
3470
3981
  *
3471
3982
  * @dependency zn-button
3472
- * @dependency zn-datepicker
3473
- * @dependency zn-dropdown
3983
+ * @dependency zn-icon
3474
3984
  * @dependency zn-input
3475
- * @dependency zn-menu
3476
- * @dependency zn-menu-item
3985
+ * @dependency zn-opt-group
3986
+ * @dependency zn-option
3987
+ * @dependency zn-select
3477
3988
  *
3478
- * @event zn-filter-change - Emitted when the active filters change. Read the encoded query off `value`.
3989
+ * @event zn-filter-change - Emitted when the applied rules change. Read the encoded query off `value`.
3990
+ * @event zn-clear - Emitted when `clear()` removes every rule.
3479
3991
  */
3480
3992
  export default class ZnDataTableFilter extends ZincElement implements ZincFormControl {
3481
3993
  static styles: CSSResultGroup;
3482
3994
  static dependencies: {
3483
3995
  'zn-button': typeof ZnButton;
3484
- 'zn-datepicker': typeof ZnDatepicker;
3485
- 'zn-dropdown': typeof ZnDropdown;
3996
+ 'zn-icon': typeof ZnIcon;
3486
3997
  'zn-input': typeof ZnInput;
3487
- 'zn-menu': typeof ZnMenu;
3488
- 'zn-menu-item': typeof ZnMenuItem;
3998
+ 'zn-opt-group': typeof ZnOptGroup;
3999
+ 'zn-option': typeof ZnOption;
4000
+ 'zn-select': typeof ZnSelect;
3489
4001
  };
3490
4002
  private _formController;
3491
- private _textTimeout?;
3492
- private _pendingOpen?;
3493
- filters: QueryBuilderData;
4003
+ private readonly _popover;
4004
+ private _mirrors;
4005
+ private _emitted?;
4006
+ filters: FilterField[];
3494
4007
  name: string;
3495
4008
  value: string;
3496
- /** Filter keys to show a pill for before the user adds any. */
4009
+ /** Fields to offer an empty rule for when the builder opens with nothing applied. */
3497
4010
  defaultFilters: string;
3498
- /** Typeahead values per filter key. `zn-data-table` fills this from the rows it has loaded. */
4011
+ /** Typeahead values per field. `zn-data-table` fills this from the rows it has loaded. */
3499
4012
  suggestions: Record<string, string[]>;
3500
- private _active;
4013
+ /**
4014
+ * Another filter to show the chips of. This element then renders only that filter's chips, and that filter stops
4015
+ * rendering its own, so a table can keep the funnel in its header and the chips under it.
4016
+ */
4017
+ source: ZnDataTableFilter | null;
4018
+ private _rules;
3501
4019
  private _typing;
3502
- private _optionQuery;
4020
+ private _fieldSearch;
3503
4021
  get validationMessage(): string;
3504
4022
  get validity(): ValidityState;
3505
4023
  checkValidity(): boolean;
3506
4024
  getForm(): HTMLFormElement | null;
3507
4025
  reportValidity(): boolean;
3508
4026
  setCustomValidity(): void;
3509
- protected firstUpdated(_changedProperties: PropertyValues): void;
3510
- protected updated(changed: PropertyValues): void;
3511
- protected willUpdate(changed: PropertyValues): void;
3512
- disconnectedCallback(): void;
3513
- /** Number of filters with a value set. */
4027
+ /** Number of rules that apply. */
3514
4028
  get activeCount(): number;
3515
- /** Removes every active filter. */
4029
+ /** Opens the filter builder. */
4030
+ show(): void;
4031
+ /** Closes the filter builder. */
4032
+ hide(): void;
4033
+ /** Removes every rule. */
3516
4034
  clear(): void;
3517
- private definition;
3518
- private operatorsFor;
3519
- private comparatorFor;
4035
+ protected firstUpdated(changed: PropertyValues): void;
4036
+ protected willUpdate(changed: PropertyValues): void;
4037
+ protected updated(changed: PropertyValues): void;
4038
+ connectedCallback(): void;
4039
+ disconnectedCallback(): void;
4040
+ private mirror;
4041
+ private unmirror;
4042
+ private readValue;
4043
+ /** The complete rules in `value`, which the builder's edits only reach once they are applied. */
4044
+ private committed;
4045
+ private decoded;
4046
+ private ruleFrom;
4047
+ private field;
4048
+ private operators;
3520
4049
  private operatorLabel;
3521
- private isMultiple;
3522
4050
  private optionsFor;
3523
- private addFilter;
3524
- private removeFilter;
3525
- private setValue;
3526
- private setComparator;
3527
- private toggleOption;
3528
- private selectedValues;
3529
- private emitChange;
3530
- /**
3531
- * Rebuild the active filters from an encoded `value` (the inverse of emitChange), so a filter
3532
- * restored from a shareable URL shows its pills. Runs only while there are no active filters and
3533
- * needs the filters schema present to resolve each key. Sets `_active` directly so it neither
3534
- * re-emits nor overwrites the value it just read.
3535
- */
3536
- private hydrateFromValue;
3537
- private handleDateInput;
4051
+ private isMultiple;
4052
+ private isDate;
4053
+ private humanize;
4054
+ private isComplete;
4055
+ private values;
4056
+ private ruleText;
4057
+ private setLocal;
4058
+ private setRules;
4059
+ private updateRule;
4060
+ private dateChange;
3538
4061
  private serializeDate;
3539
- private handleTextInput;
4062
+ private parseDate;
4063
+ private dateInputValue;
3540
4064
  private suggestionsFor;
3541
4065
  private applySuggestion;
3542
- private humanize;
3543
- private pillLabel;
3544
- private renderOperators;
3545
- private renderPill;
3546
- private isDateFilter;
3547
- private renderValueInput;
3548
- private handleOptionSearch;
3549
- private renderOptionSearch;
3550
- private renderOptionItems;
3551
- private renderAddFilter;
4066
+ private keepFocus;
4067
+ private toggle;
4068
+ private apply;
4069
+ private discard;
4070
+ private renderToggle;
4071
+ private renderPopover;
4072
+ private renderRule;
4073
+ private renderValue;
4074
+ private renderSuggestions;
4075
+ private renderChips;
3552
4076
  render(): import("lit-html").TemplateResult<1> | typeof nothing;
3553
4077
  }
3554
4078
  }
@@ -3832,6 +4356,8 @@ declare module "components/empty-state/empty-state.component" {
3832
4356
  description: string;
3833
4357
  type: 'error' | 'info' | 'primary' | '';
3834
4358
  padded: boolean;
4359
+ /** Draws the icon small inside a tinted, rounded tile rather than as a large glyph. */
4360
+ tile: boolean;
3835
4361
  private readonly hasSlotController;
3836
4362
  render(): import("lit-html").TemplateResult<1>;
3837
4363
  }
@@ -3925,17 +4451,24 @@ declare module "components/panel/panel.component" {
3925
4451
  * @csspart base - The component's base wrapper.
3926
4452
  * @csspart header - The header region, when a caption or actions are given.
3927
4453
  * @csspart header-content - The padded row inside the header, forwarded from zn-header.
4454
+ * @csspart header-left - The caption and description, forwarded from zn-header.
3928
4455
  * @csspart footer - The footer region, when the footer slot is filled.
3929
4456
  *
3930
4457
  * @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
3931
4458
  * @cssproperty --zn-panel-header-padding - Padding around the header row. Defaults to `--zn-base-gap`.
3932
4459
  * @cssproperty --zn-panel-footer-padding - Padding around the footer row.
4460
+ * @cssproperty --zn-panel-padding - Padding around the body. Defaults to `--zn-base-gap`.
4461
+ * @cssproperty --zn-panel-shadow - Resting shadow. Defaults to none.
3933
4462
  */
3934
4463
  export default class ZnPanel extends ZincElement {
3935
4464
  static styles: CSSResultGroup;
3936
4465
  private readonly hasSlotController;
3937
4466
  basis: number;
3938
4467
  caption: string;
4468
+ /** Help text under the caption, in the panel's header. */
4469
+ description: string;
4470
+ /** Sets the description beside the caption rather than under it. */
4471
+ inlineDescription: boolean;
3939
4472
  icon: string;
3940
4473
  tabbed: boolean;
3941
4474
  headerBorderless: boolean;
@@ -3978,7 +4511,7 @@ declare module "components/skeleton/skeleton.component" {
3978
4511
  * @property {string} speed - Animation speed for the shimmer effect. Default: "3s"
3979
4512
  * @property {string} width - Width of the skeleton element. Default: "100%"
3980
4513
  * @property {string} height - Height of the skeleton element. Default: "20px"
3981
- * @property {string} radius - Border radius of the skeleton element. Default: "4px"
4514
+ * @property {string} radius - Border radius of the skeleton element. Defaults to the theme's `--zn-skeleton-border-radius` (4px).
3982
4515
  */
3983
4516
  export default class ZnSkeleton extends ZincElement {
3984
4517
  static styles: CSSResultGroup;
@@ -4040,14 +4573,16 @@ declare module "components/style/index" {
4040
4573
  }
4041
4574
  declare module "components/data-table/data-table.component" {
4042
4575
  import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
4576
+ import { type TableTab } from "internal/table-tabs";
4043
4577
  import { type ZnFilterChangeEvent } from "events/zn-filter-change";
4044
4578
  import { type ZnSearchChangeEvent } from "events/zn-search-change";
4045
4579
  import ZincElement from "internal/zinc-element";
4046
4580
  import ZnAlert from "components/alert/index";
4581
+ import ZnBadge from "components/badge/index";
4047
4582
  import ZnButton from "components/button/index";
4048
- import ZnButtonGroup from "components/button-group/index";
4049
4583
  import ZnChip from "components/chip/index";
4050
4584
  import ZnConfirm from "components/confirm/index";
4585
+ import ZnDataTableFilter, { type FilterField } from "components/data-table-filter/index";
4051
4586
  import ZnDataTableSearch from "components/data-table-search/index";
4052
4587
  import ZnDropdown from "components/dropdown/index";
4053
4588
  import ZnEmptyState from "components/empty-state/index";
@@ -4057,6 +4592,11 @@ declare module "components/data-table/data-table.component" {
4057
4592
  import ZnPanel from "components/panel/index";
4058
4593
  import ZnSkeleton from "components/skeleton/index";
4059
4594
  import ZnStyle from "components/style/index";
4595
+ import ZnIcon from "components/icon/index";
4596
+ import ZnInput from "components/input/index";
4597
+ import ZnOptGroup from "components/opt-group/index";
4598
+ import ZnOption from "components/option/index";
4599
+ import ZnSelect from "components/select/index";
4060
4600
  interface Cell {
4061
4601
  text: string;
4062
4602
  subText?: string;
@@ -4070,6 +4610,8 @@ declare module "components/data-table/data-table.component" {
4070
4610
  hoverContent?: string;
4071
4611
  hoverPlacement?: string;
4072
4612
  chipColor?: string;
4613
+ badgeType?: string;
4614
+ badgeDot?: boolean;
4073
4615
  gaid?: string;
4074
4616
  sortValue?: string;
4075
4617
  uri?: string;
@@ -4135,6 +4677,7 @@ declare module "components/data-table/data-table.component" {
4135
4677
  hideColumn?: boolean;
4136
4678
  secondary?: boolean;
4137
4679
  type?: string;
4680
+ align?: 'left' | 'right' | 'center';
4138
4681
  cellTemplate?: Cell;
4139
4682
  ifEmpty?: Cell;
4140
4683
  }
@@ -4146,6 +4689,7 @@ declare module "components/data-table/data-table.component" {
4146
4689
  * @since 1.0
4147
4690
  *
4148
4691
  * @dependency zn-alert
4692
+ * @dependency zn-badge
4149
4693
  * @dependency zn-button
4150
4694
  * @dependency zn-empty-state
4151
4695
  * @dependency zn-chip
@@ -4154,7 +4698,6 @@ declare module "components/data-table/data-table.component" {
4154
4698
  * @dependency zn-menu
4155
4699
  * @dependency zn-menu-item
4156
4700
  * @dependency zn-panel
4157
- * @dependency zn-button-group
4158
4701
  * @dependency zn-confirm
4159
4702
  * @dependency zn-skeleton
4160
4703
  * @dependency zn-data-table-search
@@ -4180,6 +4723,7 @@ declare module "components/data-table/data-table.component" {
4180
4723
  static styles: CSSResultGroup;
4181
4724
  static dependencies: {
4182
4725
  'zn-alert': typeof ZnAlert;
4726
+ 'zn-badge': typeof ZnBadge;
4183
4727
  'zn-button': typeof ZnButton;
4184
4728
  'zn-empty-state': typeof ZnEmptyState;
4185
4729
  'zn-chip': typeof ZnChip;
@@ -4188,11 +4732,16 @@ declare module "components/data-table/data-table.component" {
4188
4732
  'zn-menu': typeof ZnMenu;
4189
4733
  'zn-menu-item': typeof ZnMenuItem;
4190
4734
  'zn-panel': typeof ZnPanel;
4191
- 'zn-button-group': typeof ZnButtonGroup;
4192
4735
  'zn-confirm': typeof ZnConfirm;
4193
4736
  'zn-skeleton': typeof ZnSkeleton;
4194
4737
  'zn-style': typeof ZnStyle;
4738
+ 'zn-icon': typeof ZnIcon;
4739
+ 'zn-input': typeof ZnInput;
4740
+ 'zn-opt-group': typeof ZnOptGroup;
4741
+ 'zn-option': typeof ZnOption;
4742
+ 'zn-select': typeof ZnSelect;
4195
4743
  'zn-data-table-search': typeof ZnDataTableSearch;
4744
+ 'zn-data-table-filter': typeof ZnDataTableFilter;
4196
4745
  };
4197
4746
  dataUri: string;
4198
4747
  data: Row[] | Row;
@@ -4216,6 +4765,25 @@ declare module "components/data-table/data-table.component" {
4216
4765
  caption: string;
4217
4766
  emptyStateCaption: string;
4218
4767
  emptyStateIcon: string;
4768
+ /** Unit for the row total shown with the caption: "publishers" reads "16 publishers". */
4769
+ totalLabel: string;
4770
+ /** Unit used when the total is exactly one: "publisher" reads "1 publisher". Falls back to `total-label`. */
4771
+ totalLabelSingular: string;
4772
+ /** Tabs rendered inside the table. The selected tab's value is sent as `tab-param` with every request. */
4773
+ tabs: TableTab[];
4774
+ tabParam: string;
4775
+ /** Draws the tabs as a segmented control: a grey track with a pill that slides to the selected tab. */
4776
+ pillTabs: boolean;
4777
+ /** The selected tab's value; the first tab when empty. */
4778
+ tab: string;
4779
+ /**
4780
+ * Fields for the funnel's filter builder. When set, the table renders its own zn-data-table-filter in the
4781
+ * header, in place of the `filter` slot, and the applied rules show as chips under the tabs. Rules are sent
4782
+ * as `filter`.
4783
+ */
4784
+ filterFields: FilterField[];
4785
+ private readonly _fieldsFilter;
4786
+ private readonly _tabRow;
4219
4787
  filters: [];
4220
4788
  method: 'GET' | 'POST';
4221
4789
  noInitialLoad: boolean;
@@ -4237,6 +4805,7 @@ declare module "components/data-table/data-table.component" {
4237
4805
  private _hasLoadedData;
4238
4806
  private _lastLoadHadRows;
4239
4807
  private _lastTableContent;
4808
+ private _headObserver;
4240
4809
  private _sharableInitialised;
4241
4810
  private _sharableDefaults;
4242
4811
  private readonly _urlManagedKeys;
@@ -4256,13 +4825,29 @@ declare module "components/data-table/data-table.component" {
4256
4825
  private _hiddenCells;
4257
4826
  private _secondaryHeaders;
4258
4827
  private _deselectedColumns;
4259
- private _filtersOpen;
4828
+ private _columnOrder;
4829
+ private readonly reorderController;
4260
4830
  private _columnDefaultsApplied;
4261
4831
  private _formatTemplates;
4262
4832
  requestParams: Record<string, any>;
4263
- refresh(): void;
4833
+ refresh(): Promise<void>;
4264
4834
  private visibleHeaders;
4265
4835
  private selectableHeaders;
4836
+ /** @internal ReorderHost: the visible columns' keys in order. */
4837
+ reorderKeys(): string[];
4838
+ /** @internal ReorderHost: puts the visible columns in a new order, leaving deselected ones in their slots. */
4839
+ applyReorder(keys: string[]): void;
4840
+ /** @internal ReorderHost: the heading drawn for a column. */
4841
+ reorderRow(key: string): HTMLElement;
4842
+ /** @internal ReorderHost: the heading and every cell of a column. */
4843
+ reorderSlides(key: string): HTMLElement[];
4844
+ private reorderable;
4845
+ private renderDropLine;
4846
+ /** @internal ReorderHost: a column lands anywhere over the table, not just its headings. */
4847
+ reorderArea(): HTMLElement | null;
4848
+ /** @internal ReorderHost: the column's label, as a copy of the whole heading is unusable for a wide or wrapped one. */
4849
+ reorderGhost(key: string): HTMLDivElement;
4850
+ private columnCells;
4266
4851
  private isColumnVisible;
4267
4852
  private applyColumnDefaults;
4268
4853
  private toggleColumn;
@@ -4294,13 +4879,13 @@ declare module "components/data-table/data-table.component" {
4294
4879
  */
4295
4880
  private _updateSharableUrl;
4296
4881
  render(): TemplateResult<1>;
4882
+ protected willUpdate(changed: PropertyValues): void;
4297
4883
  connectedCallback(): void;
4298
4884
  protected firstUpdated(): void;
4299
4885
  protected updated(changed: PropertyValues): void;
4300
4886
  private publishFilterSuggestions;
4301
4887
  private getTemplate;
4302
4888
  disconnectedCallback(): void;
4303
- filterClearListener: (e: Event) => void;
4304
4889
  filterChangeListener: (e: ZnFilterChangeEvent) => void;
4305
4890
  searchChangeListener: (e: ZnSearchChangeEvent) => void;
4306
4891
  private get isNarrowed();
@@ -4310,12 +4895,22 @@ declare module "components/data-table/data-table.component" {
4310
4895
  humanize(str: string): string;
4311
4896
  renderTableData(groups: RowGroup[], error?: ResponseError): TemplateResult<1>;
4312
4897
  private tableContent;
4898
+ private observeHead;
4313
4899
  getTableHeader(): TemplateResult<1>;
4900
+ private totalText;
4901
+ private activeTab;
4902
+ private renderTabs;
4903
+ private selectTab;
4904
+ private renderToolbar;
4905
+ private _toolbarQueued;
4906
+ private toolbarChanged;
4907
+ private toolbarParams;
4314
4908
  private getHeaderControls;
4315
4909
  private hasRows;
4316
- private getFilterToggle;
4317
- private toggleFilters;
4318
- private appliedFilterCount;
4910
+ private getFilter;
4911
+ private filterSource;
4912
+ private renderFilterChips;
4913
+ private fieldsFilterChange;
4319
4914
  private hasColumnSelect;
4320
4915
  private hasRefresh;
4321
4916
  private getColumnSelect;
@@ -4328,10 +4923,12 @@ declare module "components/data-table/data-table.component" {
4328
4923
  getPagination(): TemplateResult<1> | null;
4329
4924
  getActions(): TemplateResult<1>[];
4330
4925
  private getActionsMenu;
4926
+ private hideActionSources;
4331
4927
  private actionTrigger;
4332
4928
  private actionLabel;
4333
4929
  private runAction;
4334
4930
  goToPage(page: number): void;
4931
+ private keepPagerFocus;
4335
4932
  goToFirstPage(): void;
4336
4933
  goToPreviousPage(): void;
4337
4934
  goToNextPage(): void;
@@ -4345,10 +4942,8 @@ declare module "components/data-table/data-table.component" {
4345
4942
  updateSort(key: string): () => void;
4346
4943
  renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement;
4347
4944
  private updateActionKeys;
4348
- private getTableSortIcon;
4349
4945
  private renderCellHeader;
4350
4946
  private sortState;
4351
- private handleSortKeyDown;
4352
4947
  private renderCellBody;
4353
4948
  private hasHiddenColumns;
4354
4949
  private renderExpanderCell;
@@ -4356,6 +4951,7 @@ declare module "components/data-table/data-table.component" {
4356
4951
  private toggleRowExpansion;
4357
4952
  private isRowSelected;
4358
4953
  private pruneSelectedRows;
4954
+ /** Rows are selectable when an action works on the selection; creating does not. */
4359
4955
  private isSelectable;
4360
4956
  private renderSelectAllCheckbox;
4361
4957
  private renderRowCheckbox;
@@ -4382,6 +4978,557 @@ declare module "components/data-table/index" {
4382
4978
  }
4383
4979
  }
4384
4980
  }
4981
+ declare module "components/report-table/report-math" {
4982
+ import type { FilterField } from "components/data-table-filter/data-table-filter.component";
4983
+ export interface ReportValues {
4984
+ [key: string]: number | string | ReportValues;
4985
+ }
4986
+ export type ReportFormat = 'number' | 'decimal' | 'percent' | 'currency' | 'financial' | 'duration' | 'text';
4987
+ export type ReportStyle = 'none' | 'breakeven' | 'ibreakeven' | 'bold';
4988
+ export interface ReportColumn {
4989
+ key: string;
4990
+ label: string;
4991
+ format?: ReportFormat;
4992
+ decimals?: number;
4993
+ style?: ReportStyle;
4994
+ threshold?: number;
4995
+ summable?: boolean;
4996
+ currency?: string;
4997
+ value?: string;
4998
+ formula?: string;
4999
+ }
5000
+ export interface ReportGroup {
5001
+ label: string;
5002
+ columns: ReportColumn[];
5003
+ }
5004
+ export interface ReportLink {
5005
+ uri: string;
5006
+ target?: string;
5007
+ }
5008
+ export interface ReportRow {
5009
+ id: string;
5010
+ label: string;
5011
+ uri?: string;
5012
+ target?: string;
5013
+ values: ReportValues;
5014
+ links?: Record<string, ReportLink>;
5015
+ }
5016
+ export interface ReportOption {
5017
+ value: string;
5018
+ label: string;
5019
+ category?: string;
5020
+ }
5021
+ export type ReportFilterField = FilterField;
5022
+ export interface ReportResponse {
5023
+ dimension?: {
5024
+ label: string;
5025
+ };
5026
+ groups: ReportGroup[];
5027
+ rows: ReportRow[];
5028
+ totals?: Record<string, number>;
5029
+ currency?: string;
5030
+ groupBy?: string;
5031
+ groupBys?: ReportOption[];
5032
+ filterFields?: ReportFilterField[];
5033
+ error?: {
5034
+ text: string;
5035
+ icon?: string;
5036
+ level?: string;
5037
+ };
5038
+ }
5039
+ type Formula = (values: ReportValues) => number;
5040
+ export function resolvePath(values: ReportValues | undefined, path: string): number;
5041
+ export function compileFormula(source: string): Formula;
5042
+ export function columnValue(column: ReportColumn, values: ReportValues): number;
5043
+ export function aggregate(rows: ReportValues[]): ReportValues;
5044
+ export function computeTotals(columns: ReportColumn[], rows: ReportRow[]): Record<string, number | null>;
5045
+ }
5046
+ declare module "components/date-range/date-range-math" {
5047
+ export type Iso = string;
5048
+ export interface DatePreset {
5049
+ label: string;
5050
+ from: Iso;
5051
+ to: Iso;
5052
+ }
5053
+ export interface RangeState {
5054
+ from: Iso | '';
5055
+ to: Iso | '';
5056
+ }
5057
+ export function toUtc(iso: Iso): Date;
5058
+ export function fromUtc(date: Date): Iso;
5059
+ export function isIso(value: unknown): value is Iso;
5060
+ export function addDays(iso: Iso, days: number): Iso;
5061
+ /** The same day `months` away, clamped to the target month's last day. */
5062
+ export function addMonths(iso: Iso, months: number): Iso;
5063
+ export function daysBetween(from: Iso, to: Iso): number;
5064
+ export function todayIso(now?: Date): Iso;
5065
+ export function defaultPresets(today: Iso): DatePreset[];
5066
+ export function monthGrid(year: number, month0: number, weekStart?: number): (Iso | null)[];
5067
+ export function formatDate(iso: Iso): string;
5068
+ export function rangeLabel(from: Iso, to: Iso): string;
5069
+ export function clampRange(range: {
5070
+ from: Iso;
5071
+ to: Iso;
5072
+ }, min: Iso | '', max: Iso | ''): {
5073
+ from: Iso;
5074
+ to: Iso;
5075
+ } | null;
5076
+ export function pick(state: RangeState, day: Iso): {
5077
+ from: Iso;
5078
+ to: Iso | '';
5079
+ };
5080
+ }
5081
+ declare module "components/report-table/report-format" {
5082
+ import type { ReportColumn } from "components/report-table/report-math";
5083
+ export function displayDecimals(column: ReportColumn): number;
5084
+ export function formatValue(column: ReportColumn, value: number | string | null, opts: {
5085
+ currency: string;
5086
+ locale?: string;
5087
+ }): string;
5088
+ export function unitLabel(column: ReportColumn, currency: string): string;
5089
+ export function toneClass(column: ReportColumn, value: number | null): 'report__pos' | 'report__neg' | '';
5090
+ }
5091
+ declare module "internal/pointer-intent" {
5092
+ import type { ReactiveController, ReactiveControllerHost } from 'lit';
5093
+ /**
5094
+ * Tells a control whether its latest state change came from a pointer press, so keyboard and
5095
+ * programmatic changes (arrow keys, select-all, value sync) can skip their animation.
5096
+ */
5097
+ export class PointerIntentController implements ReactiveController {
5098
+ private host;
5099
+ private pressed;
5100
+ private readonly handlePointerDown;
5101
+ private readonly handleKeyDown;
5102
+ private readonly handleClick;
5103
+ constructor(host: ReactiveControllerHost & HTMLElement);
5104
+ hostConnected(): void;
5105
+ hostDisconnected(): void;
5106
+ /** Whether the change being handled now was pointer-initiated. Call synchronously from the state-change handler. */
5107
+ consume(): boolean;
5108
+ }
5109
+ }
5110
+ declare module "internal/selection-card" {
5111
+ /** Where a selection card renders its image, relative to the card's text. */
5112
+ export type SelectionCardImagePosition = 'top' | 'right' | 'bottom' | 'left';
5113
+ /**
5114
+ * Where a selection card renders its radio/checkbox indicator. `start` keeps the standard
5115
+ * inline position, except on a plain contained radio or checkbox which hides it like `none`.
5116
+ */
5117
+ export type SelectionCardControlPosition = 'start' | 'none' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
5118
+ }
5119
+ declare module "components/checkbox/checkbox.component" {
5120
+ import { type CSSResultGroup } from 'lit';
5121
+ import ZincElement from "internal/zinc-element";
5122
+ import ZnIcon from "components/icon/index";
5123
+ import type { SelectionCardControlPosition, SelectionCardImagePosition } from "internal/selection-card";
5124
+ import type { ZincFormControl } from "internal/zinc-element";
5125
+ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
5126
+ /**
5127
+ * @summary Short summary of the component's intended use.
5128
+ * @documentation https://zinc.style/components/checkbox
5129
+ * @status experimental
5130
+ * @since 1.0
5131
+ *
5132
+ * @dependency zn-icon
5133
+ *
5134
+ * @slot - The checkbox's label.
5135
+ * @slot image - Replaces the built-in image used by contained checkboxes.
5136
+ * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
5137
+ * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
5138
+ *
5139
+ * @event zn-blur - Emitted when the checkbox loses focus.
5140
+ * @event zn-change - Emitted when the checked state changes.
5141
+ * @event zn-focus - Emitted when the checkbox gains focus.
5142
+ * @event zn-input - Emitted when the checkbox receives input.
5143
+ * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
5144
+ *
5145
+ * @csspart base - The component's base wrapper.
5146
+ * @csspart control - The square container that wraps the checkbox's checked state.
5147
+ * @csspart control--checked - Matches the control part when the checkbox is checked.
5148
+ * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
5149
+ * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
5150
+ * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
5151
+ * @csspart indeterminate-icon - The indeterminate icon, an `<svg>` element.
5152
+ * @csspart image-container - The wrapper around the built-in image or image slot.
5153
+ * @csspart image - The built-in image.
5154
+ * @csspart card-title - The title inside a selection card.
5155
+ * @csspart label - The container that wraps the checkbox's label.
5156
+ * @csspart description - The container that wraps the checkbox's description.
5157
+ * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
5158
+ *
5159
+ * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
5160
+ * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
5161
+ * @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
5162
+ * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
5163
+ * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
5164
+ * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
5165
+ * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
5166
+ * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
5167
+ * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
5168
+ */
5169
+ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
5170
+ static styles: CSSResultGroup;
5171
+ static dependencies: {
5172
+ 'zn-icon': typeof ZnIcon;
5173
+ };
5174
+ private readonly formControlController;
5175
+ private readonly hasSlotController;
5176
+ private readonly pointerIntent;
5177
+ input: HTMLInputElement;
5178
+ control: HTMLElement;
5179
+ private hasFocus;
5180
+ title: string;
5181
+ /** The name of the checkbox, submitted as a name/value pair with form data. */
5182
+ name: string;
5183
+ /** The current value of the checkbox, submitted as a name/value pair with form data. */
5184
+ value: string;
5185
+ /** Title rendered inside the card. The default slot takes precedence when provided. */
5186
+ cardTitle: string;
5187
+ /** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
5188
+ uncheckedValue: string;
5189
+ /** The checkbox's size. */
5190
+ size: 'small' | 'medium' | 'large';
5191
+ /** Disables the checkbox. */
5192
+ disabled: boolean;
5193
+ /** Draws the checkbox in a checked state. */
5194
+ checked: boolean;
5195
+ /**
5196
+ * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
5197
+ * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
5198
+ */
5199
+ indeterminate: boolean;
5200
+ /** Draws a container around the checkbox. */
5201
+ contained: boolean;
5202
+ /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
5203
+ square: boolean;
5204
+ /** Centres the text of a contained checkbox that has no image or `card-title`. */
5205
+ centered: boolean;
5206
+ /** URL for the image shown in a contained checkbox. */
5207
+ src: string;
5208
+ /** Accessible text for the built-in image. Leave empty when the image is decorative. */
5209
+ imageAlt: string;
5210
+ /** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
5211
+ imagePosition: SelectionCardImagePosition;
5212
+ /**
5213
+ * Places the checkbox indicator within a contained card. A contained checkbox without an image or `card-title` hides it
5214
+ * at `start`, as does `none`. Requires `contained`.
5215
+ */
5216
+ controlPosition: SelectionCardControlPosition;
5217
+ /** Removes a container around the checkbox. */
5218
+ borderless: boolean;
5219
+ /** Applies styles relevant to checkboxes in a horizontal layout. */
5220
+ horizontal: boolean;
5221
+ /** The default value of the form control. Primarily used for resetting the form control. */
5222
+ defaultChecked: boolean;
5223
+ /**
5224
+ * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
5225
+ * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
5226
+ * the same document or shadow root for this to work.
5227
+ */
5228
+ form: string;
5229
+ /** Makes the checkbox a required field. */
5230
+ required: boolean;
5231
+ /** Submits the form when checkbox is clicked. */
5232
+ submitOnClick: boolean;
5233
+ /** The checkbox's help text. If you need to display HTML, use the `description` slot instead. */
5234
+ description: string;
5235
+ label: string;
5236
+ labelTooltip: string;
5237
+ /** The icon to show when the checkbox is checked. */
5238
+ checkedIcon: string;
5239
+ /** The icon to show when the checkbox is unchecked. Defaults to a muted `checked-icon`. */
5240
+ uncheckedIcon: string;
5241
+ /** The color of the checkbox. */
5242
+ color: ColorOption;
5243
+ /** The color of the checkbox when checked. Overrides `color`. */
5244
+ checkedColor: ColorOption;
5245
+ /** The color of the checkbox when unchecked. Overrides `color`. */
5246
+ uncheckedColor: ColorOption;
5247
+ /** Gets the validity state object */
5248
+ get validity(): ValidityState;
5249
+ get isChecked(): boolean;
5250
+ /** Gets the validation message */
5251
+ get validationMessage(): string;
5252
+ firstUpdated(): void;
5253
+ private handleClick;
5254
+ private handleBlur;
5255
+ private handleInput;
5256
+ private handleInvalid;
5257
+ private handleFocus;
5258
+ private handleSelectedContentClick;
5259
+ handleDisabledChange(): void;
5260
+ handleStateChange(): Promise<void>;
5261
+ /** Simulates a click on the checkbox. */
5262
+ click(): void;
5263
+ /** Sets focus on the checkbox. */
5264
+ focus(options?: FocusOptions): void;
5265
+ /** Removes focus from the checkbox. */
5266
+ blur(): void;
5267
+ /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
5268
+ checkValidity(): boolean;
5269
+ /** Gets the associated form, if one exists. */
5270
+ getForm(): HTMLFormElement | null;
5271
+ /** Checks for validity and shows the browser's validation message if the control is invalid. */
5272
+ reportValidity(): boolean;
5273
+ /**
5274
+ * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
5275
+ * the custom validation message, call this method with an empty string.
5276
+ */
5277
+ setCustomValidity(message: string): void;
5278
+ render(): import("lit-html").TemplateResult<1>;
5279
+ }
5280
+ }
5281
+ declare module "components/checkbox/index" {
5282
+ import ZnCheckbox from "components/checkbox/checkbox.component";
5283
+ export * from "components/checkbox/checkbox.component";
5284
+ export default ZnCheckbox;
5285
+ global {
5286
+ interface HTMLElementTagNameMap {
5287
+ 'zn-checkbox': ZnCheckbox;
5288
+ }
5289
+ }
5290
+ }
5291
+ declare module "components/date-range/date-range.component" {
5292
+ import { type DatePreset } from "components/date-range/date-range-math";
5293
+ import { type CSSResultGroup, type PropertyValues } from 'lit';
5294
+ import ZincElement from "internal/zinc-element";
5295
+ import ZnButton from "components/button/index";
5296
+ import ZnIcon from "components/icon/index";
5297
+ import ZnInput from "components/input/index";
5298
+ /**
5299
+ * @summary A button showing a date range that opens a two-month calendar with quick ranges.
5300
+ * @documentation https://zinc.style/components/date-range
5301
+ * @status experimental
5302
+ * @since 1.0
5303
+ *
5304
+ * @dependency zn-button
5305
+ * @dependency zn-icon
5306
+ * @dependency zn-input
5307
+ *
5308
+ * @event zn-change - Emitted when a range is applied, with `{from, to}` as its detail.
5309
+ *
5310
+ * @csspart trigger - The button that opens the picker.
5311
+ * @csspart popover - The picker popover.
5312
+ */
5313
+ export default class ZnDateRange extends ZincElement {
5314
+ static styles: CSSResultGroup;
5315
+ static formAssociated: boolean;
5316
+ static dependencies: {
5317
+ 'zn-button': typeof ZnButton;
5318
+ 'zn-icon': typeof ZnIcon;
5319
+ 'zn-input': typeof ZnInput;
5320
+ };
5321
+ /** The first day of the range, `YYYY-MM-DD`. Defaults to today. */
5322
+ from: string;
5323
+ /** The last day of the range, `YYYY-MM-DD`. Defaults to today. */
5324
+ to: string;
5325
+ /** The earliest day that can be picked. */
5326
+ min: string;
5327
+ /** The latest day that can be picked. */
5328
+ max: string;
5329
+ /** Quick ranges as a JSON array of `{label, from, to}`, replacing the default ones. */
5330
+ presets: DatePreset[] | undefined;
5331
+ /** A short line shown under the calendar, such as how the range is used. */
5332
+ note: string;
5333
+ /** Submits `name[from]` and `name[to]` with the form. */
5334
+ name: string;
5335
+ /** The trigger button's size. */
5336
+ size: 'small' | 'medium' | 'large';
5337
+ private draft;
5338
+ private view;
5339
+ private focusDay;
5340
+ private readonly internals;
5341
+ private readonly anchor;
5342
+ constructor();
5343
+ protected updated(changed: PropertyValues): void;
5344
+ private get rangeFrom();
5345
+ private get rangeTo();
5346
+ private get narrow();
5347
+ private get bounds();
5348
+ private syncFormValue;
5349
+ /** Opens the picker. */
5350
+ show(): Promise<void>;
5351
+ /** Closes the picker without applying. */
5352
+ hide(): void;
5353
+ private close;
5354
+ private toggle;
5355
+ private presetRange;
5356
+ private focusTrigger;
5357
+ private applyRange;
5358
+ private showMonth;
5359
+ private shiftMonth;
5360
+ private shiftTo;
5361
+ private isDisabled;
5362
+ private choose;
5363
+ private visible;
5364
+ private dayKeydown;
5365
+ private typed;
5366
+ private stop;
5367
+ render(): import("lit-html").TemplateResult<1>;
5368
+ private renderPopover;
5369
+ private renderMonth;
5370
+ }
5371
+ }
5372
+ declare module "components/date-range/index" {
5373
+ import ZnDateRange from "components/date-range/date-range.component";
5374
+ export * from "components/date-range/date-range.component";
5375
+ export default ZnDateRange;
5376
+ global {
5377
+ interface HTMLElementTagNameMap {
5378
+ 'zn-date-range': ZnDateRange;
5379
+ }
5380
+ }
5381
+ }
5382
+ declare module "components/report-table/report-table.component" {
5383
+ import { type ReportColumn, type ReportFilterField, type ReportOption, type ReportResponse, type ReportRow } from "components/report-table/report-math";
5384
+ import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
5385
+ import { type DatePreset } from "components/date-range/date-range-math";
5386
+ import ZincElement from "internal/zinc-element";
5387
+ import ZnAlert from "components/alert/index";
5388
+ import ZnButton from "components/button/index";
5389
+ import ZnCheckbox from "components/checkbox/index";
5390
+ import ZnDataTableFilter from "components/data-table-filter/index";
5391
+ import ZnDataTableSearch from "components/data-table-search/index";
5392
+ import ZnDateRange from "components/date-range/index";
5393
+ import ZnEmptyState from "components/empty-state/index";
5394
+ import ZnIcon from "components/icon/index";
5395
+ import ZnPanel from "components/panel/index";
5396
+ import ZnSkeleton from "components/skeleton/index";
5397
+ /**
5398
+ * @summary A grouped report: one row per value of a dimension, read column by column, with a total row.
5399
+ * @documentation https://zinc.style/components/report-table
5400
+ * @status experimental
5401
+ * @since 1.0
5402
+ *
5403
+ * @dependency zn-alert
5404
+ * @dependency zn-button
5405
+ * @dependency zn-checkbox
5406
+ * @dependency zn-data-table-filter
5407
+ * @dependency zn-data-table-search
5408
+ * @dependency zn-date-range
5409
+ * @dependency zn-empty-state
5410
+ * @dependency zn-icon
5411
+ * @dependency zn-panel
5412
+ * @dependency zn-skeleton
5413
+ *
5414
+ * @event zn-report-change - Emitted when the type, group by, date range or filter is changed, before the report is fetched again.
5415
+ *
5416
+ * @slot inputs - Inputs whose name and value are sent with every request (csrf tokens and similar).
5417
+ * @slot empty-state - Replaces the default empty state.
5418
+ */
5419
+ export default class ZnReportTable extends ZincElement {
5420
+ static styles: CSSResultGroup;
5421
+ static dependencies: {
5422
+ 'zn-alert': typeof ZnAlert;
5423
+ 'zn-button': typeof ZnButton;
5424
+ 'zn-checkbox': typeof ZnCheckbox;
5425
+ 'zn-date-range': typeof ZnDateRange;
5426
+ 'zn-empty-state': typeof ZnEmptyState;
5427
+ 'zn-icon': typeof ZnIcon;
5428
+ 'zn-data-table-filter': typeof ZnDataTableFilter;
5429
+ 'zn-data-table-search': typeof ZnDataTableSearch;
5430
+ 'zn-panel': typeof ZnPanel;
5431
+ 'zn-skeleton': typeof ZnSkeleton;
5432
+ };
5433
+ dataUri: string;
5434
+ method: 'GET' | 'POST';
5435
+ caption: string;
5436
+ type: string;
5437
+ groupBy: string;
5438
+ from: string;
5439
+ to: string;
5440
+ filter: string;
5441
+ currency: string;
5442
+ locale: string;
5443
+ /** Report types, shown as tabs when there are two or more. `type` defaults to the first. */
5444
+ types: ReportOption[];
5445
+ /** Group by options; those with a `category` are listed under its heading. */
5446
+ groupBys: ReportOption[];
5447
+ /** Fields for the funnel's filter builder. The funnel is hidden when there are none. */
5448
+ filterFields: ReportFilterField[];
5449
+ /** Quick ranges for the date range, replacing the default ones. */
5450
+ presets: DatePreset[] | undefined;
5451
+ /** The latest day that can be picked. Defaults to today. */
5452
+ maxDate: string;
5453
+ /** A short line shown under the date range's calendar. */
5454
+ dateNote: string;
5455
+ searchPlaceholder: string;
5456
+ /** Mirrors the type, group by, dates, filter and search to the URL query string, and reads them back on load. */
5457
+ sharable: boolean;
5458
+ /** Leaves out columns that are zero or empty in every row, and groups left without columns. */
5459
+ hideEmptyColumns: boolean;
5460
+ /** Gives each row a tick box that highlights it, with one in the heading for every row shown. */
5461
+ selectable: boolean;
5462
+ /** Shades number cells by their size against the largest in their column. */
5463
+ heatmap: boolean;
5464
+ protected response: ReportResponse | null;
5465
+ protected search: string;
5466
+ private sortKey;
5467
+ private sortDirection;
5468
+ private selected;
5469
+ private sharableDefaults;
5470
+ private adoption;
5471
+ private dimObserver;
5472
+ private readonly groupByPopover;
5473
+ private readonly filterEl;
5474
+ private readonly tabRow;
5475
+ private readonly hasSlotController;
5476
+ private readonly _task;
5477
+ connectedCallback(): void;
5478
+ protected willUpdate(): void;
5479
+ protected updated(changed: PropertyValues): void;
5480
+ refresh(): Promise<void>;
5481
+ protected visibleRows(): ReportRow[];
5482
+ protected totalsFor(rows: ReportRow[]): Record<string, number | null>;
5483
+ protected columns(): ReportColumn[];
5484
+ private sortRows;
5485
+ private sortState;
5486
+ private cycleSort;
5487
+ private change;
5488
+ private activeGroupBys;
5489
+ private activeFilterFields;
5490
+ private hasCategories;
5491
+ private dimensionLabel;
5492
+ private readSharableState;
5493
+ private writeSharableState;
5494
+ private inputParams;
5495
+ private format;
5496
+ private cellValue;
5497
+ private renderLink;
5498
+ private cellClasses;
5499
+ private displayGroups;
5500
+ private heatScales;
5501
+ private renderTable;
5502
+ private renderHeading;
5503
+ private renderSelectAll;
5504
+ private toggleRow;
5505
+ private toggleAll;
5506
+ private renderBody;
5507
+ private renderSkeleton;
5508
+ private renderRowCount;
5509
+ private renderGroupBy;
5510
+ private renderGroupByPopover;
5511
+ private toggleGroupBy;
5512
+ private selectGroupBy;
5513
+ private handleSearch;
5514
+ private observeDim;
5515
+ disconnectedCallback(): void;
5516
+ private handleFilter;
5517
+ private handleRange;
5518
+ private renderActions;
5519
+ render(): TemplateResult<1>;
5520
+ }
5521
+ }
5522
+ declare module "components/report-table/index" {
5523
+ import ZnReportTable from "components/report-table/report-table.component";
5524
+ export * from "components/report-table/report-table.component";
5525
+ export default ZnReportTable;
5526
+ global {
5527
+ interface HTMLElementTagNameMap {
5528
+ 'zn-report-table': ZnReportTable;
5529
+ }
5530
+ }
5531
+ }
4385
5532
  declare module "components/cols/cols.component" {
4386
5533
  import { type CSSResultGroup, type PropertyValues } from 'lit';
4387
5534
  import ZincElement from "internal/zinc-element";
@@ -4412,6 +5559,8 @@ declare module "components/cols/cols.component" {
4412
5559
  */
4413
5560
  stackAt: string;
4414
5561
  maxColumns: number;
5562
+ /** Minimum width in px of a one-unit column before the row wraps; a column of layout `n` asks for n times this. Defaults to 250. */
5563
+ basis: number;
4415
5564
  noGap: boolean;
4416
5565
  border: boolean;
4417
5566
  pad: boolean;
@@ -4424,8 +5573,8 @@ declare module "components/cols/cols.component" {
4424
5573
  disconnectedCallback(): void;
4425
5574
  protected updated(changed: PropertyValues<this>): void;
4426
5575
  /**
4427
- * Flags each child that ends its row as laid out, so `divide` only draws between neighbours on the same row
4428
- * however the columns have wrapped.
5576
+ * Flags each child that ends its row, and each child on the last row, as laid out, so `divide` only draws
5577
+ * between neighbours however the columns have wrapped.
4429
5578
  */
4430
5579
  private markRowEnds;
4431
5580
  /**
@@ -4583,13 +5732,14 @@ declare module "components/note/index" {
4583
5732
  declare module "components/tile/tile.component" {
4584
5733
  import { type CSSResultGroup } from 'lit';
4585
5734
  import ZincElement from "internal/zinc-element";
5735
+ import ZnIcon from "components/icon/index";
4586
5736
  /**
4587
5737
  * @summary Short summary of the component's intended use.
4588
5738
  * @documentation https://zinc.style/components/tile
4589
5739
  * @status experimental
4590
5740
  * @since 1.0
4591
5741
  *
4592
- * @dependency zn-example
5742
+ * @dependency zn-icon
4593
5743
  *
4594
5744
  * @event zn-event-name - Emitted as an example.
4595
5745
  *
@@ -4597,14 +5747,24 @@ declare module "components/tile/tile.component" {
4597
5747
  * @slot example - An example slot.
4598
5748
  *
4599
5749
  * @csspart base - The component's base wrapper.
5750
+ * @csspart icon - The tinted square around the icon.
4600
5751
  *
4601
5752
  * @cssproperty --example - An example CSS custom property.
5753
+ * @cssproperty --zn-tile-hover-caption-color - The caption color while a linked tile is hovered.
5754
+ * @cssproperty --zn-tile-hover-caption-decoration - The caption text decoration while a linked tile is hovered.
4602
5755
  */
4603
5756
  export default class ZnTile extends ZincElement {
4604
5757
  static styles: CSSResultGroup;
5758
+ static dependencies: {
5759
+ 'zn-icon': typeof ZnIcon;
5760
+ };
4605
5761
  private readonly hasSlotController;
4606
5762
  caption: string;
4607
5763
  description: string;
5764
+ /** Shows the icon in a tinted square before the caption. */
5765
+ icon: string;
5766
+ /** The tint of the icon square: `success`, `warning`, `danger`, `info`, `ai` or `neutral`. */
5767
+ iconColor: 'success' | 'warning' | 'danger' | 'info' | 'ai' | 'neutral';
4608
5768
  href: string;
4609
5769
  dataTarget: string;
4610
5770
  gaid: string;
@@ -4620,6 +5780,7 @@ declare module "components/tile/tile.component" {
4620
5780
  /** Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row. */
4621
5781
  grouped: boolean;
4622
5782
  private _isLink;
5783
+ private _handleLinkKeyDown;
4623
5784
  private _handleActionsClick;
4624
5785
  render(): import("lit-html").TemplateResult;
4625
5786
  }
@@ -4797,6 +5958,7 @@ declare module "components/channel-tile/channel-tile.component" {
4797
5958
  private _remainingSeconds;
4798
5959
  private _handleReject;
4799
5960
  private _handleClick;
5961
+ private _handleKeyDown;
4800
5962
  protected render(): unknown;
4801
5963
  private _renderLeading;
4802
5964
  private _renderAvailableAction;
@@ -4876,6 +6038,8 @@ declare module "components/chart/builders" {
4876
6038
  indicators?: RadarIndicator[];
4877
6039
  minValue?: number;
4878
6040
  maxValue?: number;
6041
+ /** Marks each line's last point with a hollow dot and hides the others. */
6042
+ markLatest?: boolean;
4879
6043
  }
4880
6044
  export function buildBarOption(props: BuilderProps): EChartsOption;
4881
6045
  export function buildLineOption(props: BuilderProps): EChartsOption;
@@ -4970,6 +6134,8 @@ declare module "components/chart/chart.component" {
4970
6134
  * @since 1.0
4971
6135
  *
4972
6136
  * @csspart base - The component's base wrapper.
6137
+ *
6138
+ * @event zn-chart-click - Emitted when a data point, bar or slice is clicked.
4973
6139
  */
4974
6140
  export default class ZnChart extends ZincElement {
4975
6141
  static styles: CSSResultGroup;
@@ -4982,6 +6148,7 @@ declare module "components/chart/chart.component" {
4982
6148
  datapointSize: number;
4983
6149
  stacked: boolean;
4984
6150
  live: boolean;
6151
+ /** JSON series polled with `live`; otherwise fetched once, as a series array or `{categories, data}`. */
4985
6152
  dataUrl: string;
4986
6153
  streamUrl: string;
4987
6154
  liveRenewUrl: string;
@@ -4998,12 +6165,19 @@ declare module "components/chart/chart.component" {
4998
6165
  showLabels?: boolean;
4999
6166
  minValue?: number;
5000
6167
  maxValue?: number;
6168
+ /** On line and area charts, marks each series' latest point and hides the rest. */
6169
+ markLatest: boolean;
5001
6170
  scale: boolean | number;
5002
6171
  private chart?;
5003
6172
  private echarts?;
5004
6173
  private initPromise?;
5005
6174
  private liveTimer?;
5006
6175
  private pollAbort?;
6176
+ private loadedUrl;
6177
+ /** Set while `data-url` loads; cartesian charts show a placeholder until the data arrives. */
6178
+ private loading;
6179
+ private loadingOut;
6180
+ private riseIn;
5007
6181
  private liveStatus;
5008
6182
  private liveWindow;
5009
6183
  private replaceLiveSeries;
@@ -5011,6 +6185,10 @@ declare module "components/chart/chart.component" {
5011
6185
  private liveTransitionDuration;
5012
6186
  private liveSeries;
5013
6187
  private updateChart;
6188
+ private prepareRise;
6189
+ private static readonly riseTypes;
6190
+ private static readonly viewOnly;
6191
+ protected willUpdate(changed: PropertyValues): void;
5014
6192
  protected updated(changed: PropertyValues): void;
5015
6193
  connectedCallback(): void;
5016
6194
  private readonly resizeObserver;
@@ -5018,14 +6196,17 @@ declare module "components/chart/chart.component" {
5018
6196
  protected getUpdateComplete(): Promise<boolean>;
5019
6197
  private getTheme;
5020
6198
  private getTextColor;
6199
+ private getPalette;
5021
6200
  private getBorderColor;
5022
6201
  private buildOption;
5023
6202
  private initChart;
5024
6203
  private stopLive;
5025
6204
  private startLive;
6205
+ private loadData;
5026
6206
  private reinit;
5027
6207
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
5028
6208
  disconnectedCallback(): void;
6209
+ private renderLoading;
5029
6210
  protected render(): unknown;
5030
6211
  }
5031
6212
  }
@@ -5106,8 +6287,17 @@ declare module "components/navbar/navbar.component" {
5106
6287
  * @slot bottom - Content rendered below the navbar row (e.g. chips, filters).
5107
6288
  *
5108
6289
  * @csspart base - The component's base wrapper.
5109
- *
5110
- * @cssproperty --example - An example CSS custom property.
6290
+ * @csspart indicator - The active-tab indicator that slides between tabs. Exposes
6291
+ * `--zn-navbar-indicator-top` / `--zn-navbar-indicator-height` (the active tab's box) for styles that fill the tab.
6292
+ *
6293
+ * @cssproperty --zn-navbar-tab-indicator-slide - `1` shows the sliding indicator in place of each tab's own line.
6294
+ * @cssproperty --zn-navbar-tab-indicator-duration - Duration of the indicator's leading edge (default 300ms).
6295
+ * @cssproperty --zn-navbar-tab-indicator-easing - Easing of both indicator edges.
6296
+ * @cssproperty --zn-navbar-tab-indicator-trail-duration - Duration of the trailing edge; longer than the lead stretches the indicator.
6297
+ * @cssproperty --zn-navbar-tab-indicator-trail-easing - Easing of the trailing edge; defaults to `--zn-navbar-tab-indicator-easing`.
6298
+ * @cssproperty --zn-navbar-tab-indicator-trail-delay - Delay before the trailing edge follows (default 0ms).
6299
+ * @cssproperty --zn-navbar-tab-indicator-delay - Delay before the indicator starts to move (default 0ms).
6300
+ * @cssproperty --zn-navbar-tab-indicator-squash - Vertical scale the indicator squishes to before it travels (default 1, off).
5111
6301
  */
5112
6302
  export default class ZnNavbar extends ZincElement {
5113
6303
  static styles: CSSResultGroup;
@@ -5122,6 +6312,12 @@ declare module "components/navbar/navbar.component" {
5122
6312
  hideOne: boolean;
5123
6313
  flush: boolean;
5124
6314
  gutter: boolean;
6315
+ /** Draws the tabs as a segmented control: a grey track with a pill that slides to the active tab. */
6316
+ pill: boolean;
6317
+ /** With `pill`, `small` draws a shorter track to sit with small controls, such as above a form field. */
6318
+ size: 'small' | 'medium';
6319
+ /** The id of a zn-tabs elsewhere on the page that this navbar's tabs switch, such as one below a page header. */
6320
+ tabs: string;
5125
6321
  stacked: boolean;
5126
6322
  dropdown: never[];
5127
6323
  noPad: false;
@@ -5138,14 +6334,16 @@ declare module "components/navbar/navbar.component" {
5138
6334
  private _expanding;
5139
6335
  private _openedTabs;
5140
6336
  private readonly _itemsObserver;
6337
+ private readonly _activeObserver;
5141
6338
  private _navItems;
6339
+ private _strip;
6340
+ private _indicator;
6341
+ private _indicatorFrame;
6342
+ private _indicatorTab;
6343
+ private _indicatorTarget;
5142
6344
  private _expandable;
5143
- private _extendedMenu;
5144
- private readonly _cloneSources;
5145
6345
  private readonly _lightDomClones;
5146
- private _navItemsGap;
5147
6346
  private _expandableMargin;
5148
- private _totalItemWidth;
5149
6347
  private _resizeFrame;
5150
6348
  private _resizeController;
5151
6349
  protected _store: Store;
@@ -5156,20 +6354,23 @@ declare module "components/navbar/navbar.component" {
5156
6354
  constructor();
5157
6355
  private readonly _expandingActionObserver;
5158
6356
  private _scheduleResize;
6357
+ private _scheduleIndicatorSync;
6358
+ /** Moves the shared active-tab indicator under the active tab. */
6359
+ private _syncIndicator;
5159
6360
  private _observeExpandingAction;
5160
6361
  private _adoptNewLightItems;
5161
6362
  connectedCallback(): void;
5162
6363
  private _updateVisibility;
5163
6364
  itemCount(): number;
5164
6365
  private _resolveAvailableWidth;
5165
- private _measureTotalItemWidth;
5166
- private _getItemWidth;
5167
- private _getHorizontalSpacing;
5168
- private _getMoreItemWidth;
5169
6366
  private _syncLastVisibleItem;
5170
6367
  private _getExpandableWidth;
5171
6368
  handleResize: () => void;
5172
- private _syncExtendedActive;
6369
+ /** Shows a scroll arrow at each edge of the strip that has tabs beyond it. */
6370
+ private _syncScrollEdges;
6371
+ private _scrollTabs;
6372
+ /** Scrolls the strip so the tab clears the scroll arrows. */
6373
+ private _revealTab;
5173
6374
  addItem(item: Element, persist?: boolean): void;
5174
6375
  protected firstUpdated(_changedProperties: PropertyValues): void;
5175
6376
  private _loadStoredTabs;
@@ -5218,6 +6419,10 @@ declare module "components/header/header.component" {
5218
6419
  entityIdShow: boolean;
5219
6420
  transparent: boolean;
5220
6421
  caption: string;
6422
+ /** A line of muted text under the caption. */
6423
+ description: string;
6424
+ /** Sets the description beside the caption rather than under it, e.g. a row count. */
6425
+ inlineDescription: boolean;
5221
6426
  icon: string;
5222
6427
  navigation: never[];
5223
6428
  fullWidth: boolean;
@@ -5270,11 +6475,24 @@ declare module "components/tabs/tabs-navigation" {
5270
6475
  declare module "utilities/md5" {
5271
6476
  export function md5(string: string): string;
5272
6477
  }
6478
+ declare module "internal/hover-intent" {
6479
+ /** How long the pointer must rest on an element before hover preloading starts. */
6480
+ export const HOVER_INTENT_DELAY = 150;
6481
+ /**
6482
+ * Calls `callback` once the pointer has rested on `element` for `delay` ms. Preloads hang off this
6483
+ * so sweeping across a row of tabs doesn't fetch and render every panel on the way past.
6484
+ */
6485
+ export function onHoverIntent(element: HTMLElement, callback: () => void, delay?: number): void;
6486
+ }
6487
+ declare module "internal/input-modality" {
6488
+ /** Whether the latest user input was a pointer press inside `within`, made within the last `withinMs`. */
6489
+ export function pointerInitiated(within: Element, withinMs?: number): boolean;
6490
+ }
5273
6491
  declare module "components/tabs/tabs.component" {
5274
6492
  import { type CSSResultGroup, type PropertyValues } from 'lit';
5275
6493
  import { Store } from "internal/storage";
5276
6494
  import ZincElement from "internal/zinc-element";
5277
- export const tabContainerSelector = "zn-tabs, zn-page, zn-page-nav";
6495
+ export const tabContainerSelector = "zn-tabs, zn-page, zn-page-nav, zn-navbar[tabs]";
5278
6496
  /**
5279
6497
  * @summary Short summary of the component's intended use.
5280
6498
  * @documentation https://zinc.style/components/tabs
@@ -5297,6 +6515,7 @@ declare module "components/tabs/tabs.component" {
5297
6515
  masterId: string;
5298
6516
  defaultUri: string;
5299
6517
  _current: string;
6518
+ private _hasSelected;
5300
6519
  _split: number;
5301
6520
  _splitMin: number;
5302
6521
  _splitMinSecondary: number;
@@ -5309,6 +6528,13 @@ declare module "components/tabs/tabs.component" {
5309
6528
  storeKey: string;
5310
6529
  storeTtl: number;
5311
6530
  padded: boolean;
6531
+ /**
6532
+ * With `store-key`, opens a tab that has appeared since the page was last shown, such as one for an item just
6533
+ * added, in place of the remembered tab.
6534
+ */
6535
+ selectAdded: boolean;
6536
+ /** Spaces a left or right slot from the content, for side navigation laid out as its own card. */
6537
+ gap: boolean;
5312
6538
  fetchStyle: string;
5313
6539
  fullWidth: boolean;
5314
6540
  paddedRight: boolean;
@@ -5337,6 +6563,11 @@ declare module "components/tabs/tabs.component" {
5337
6563
  protected getStoredTab(): string | null;
5338
6564
  protected storeActiveTab(tabName: string): void;
5339
6565
  protected restoreStoredTab(stored: string): void;
6566
+ /**
6567
+ * The tabs present now that were not when the page was last shown, oldest first, remembering the current set for
6568
+ * next time. Empty without `select-added`, or on the first showing.
6569
+ */
6570
+ private takeAddedTabs;
5340
6571
  /** Activates the tab the container starts on, ignoring any stored selection. */
5341
6572
  protected activateDefaultTab(): void;
5342
6573
  private readonly handlePopState;
@@ -5344,6 +6575,7 @@ declare module "components/tabs/tabs.component" {
5344
6575
  private getUriForTabId;
5345
6576
  _addPanel(panel: HTMLElement): void;
5346
6577
  _addTab(tab: HTMLElement): void;
6578
+ private readonly _handleTabKeyDown;
5347
6579
  reRegisterTabs: () => void;
5348
6580
  firstUpdated(_changedProperties: PropertyValues): void;
5349
6581
  switchTab(inc: number): void;
@@ -5359,9 +6591,12 @@ declare module "components/tabs/tabs.component" {
5359
6591
  setActiveTab(tabName: string, store: boolean, refresh: boolean, refTab?: string | null, pushHistory?: boolean): void;
5360
6592
  _setTabEleActive(ele: Element, active: boolean): void;
5361
6593
  selectTab(tabName: string, refresh: boolean): boolean;
6594
+ private _enterPanel;
5362
6595
  getActiveTab(): Element[];
5363
6596
  observerDom(): void;
5364
6597
  removeTabAndPanel(tabId: string): void;
6598
+ /** Navbars elsewhere in this container's root that drive it through `tabs="<this id>"`. */
6599
+ private _linkedNavbars;
5365
6600
  _registerTabs: () => void;
5366
6601
  render(): import("lit-html").TemplateResult<1>;
5367
6602
  }
@@ -5406,7 +6641,7 @@ declare module "components/expanding-action/expanding-action.component" {
5406
6641
  private _actions;
5407
6642
  private _preload;
5408
6643
  private _metaObserved;
5409
- private _placementObserver?;
6644
+ private _fillHadFocus;
5410
6645
  private readonly _countObserver;
5411
6646
  private readonly _colorObserver;
5412
6647
  constructor();
@@ -5423,9 +6658,9 @@ declare module "components/expanding-action/expanding-action.component" {
5423
6658
  clickAction(target: HTMLElement): void;
5424
6659
  handleIconClicked: () => void;
5425
6660
  handleIconCloseClicked: () => void;
5426
- private _updateTriggerSide;
5427
- private _observePlacement;
5428
- disconnectedCallback(): void;
6661
+ protected willUpdate(changed: PropertyValues<this>): void;
6662
+ protected updated(changed: PropertyValues<this>): void;
6663
+ private _handleFillKeyDown;
5429
6664
  render(): import("lit-html").TemplateResult<1>;
5430
6665
  protected renderDropdown(): import("lit-html").TemplateResult<1>;
5431
6666
  protected renderFill(): import("lit-html").TemplateResult<1>;
@@ -5455,6 +6690,7 @@ declare module "components/tab/tab.component" {
5455
6690
  export default class ZnTab extends ZincElement {
5456
6691
  static styles: CSSResultGroup;
5457
6692
  caption: string;
6693
+ icon: string;
5458
6694
  priority: number;
5459
6695
  uri: string;
5460
6696
  /** When present, zn-page opens this tab on load instead of the first tab. */
@@ -5497,10 +6733,16 @@ declare module "components/page/page.component" {
5497
6733
  * @status experimental
5498
6734
  * @since 1.0
5499
6735
  *
5500
- * @slot - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.
6736
+ * @slot - Page content. Use zn-tab for named tabs; without any, the content is shown as the page's only view. A zn-tab
6737
+ * holding zn-tabs shows them as a second tab set, drawn as pills. Use header-action/header-actions for header actions.
5501
6738
  * Clicking an element in the content with `tab="<tab id>"` opens that tab.
6739
+ * @slot caption-badges - Badges shown beside the caption, wrapping onto the next line as one group.
5502
6740
  * @slot description - Rich subtitle/description content. Falls back to the `summary` attribute when empty.
5503
6741
  * @slot bottom - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.
6742
+ * @slot footer - Actions pinned below the content, such as a form's `zn-form-actions`. In a modal page it takes the
6743
+ * dialog footer's styling.
6744
+ *
6745
+ * @csspart footer - The footer wrapping the footer slot.
5504
6746
  */
5505
6747
  export default class ZnPage extends ZnTabs {
5506
6748
  static styles: CSSResultGroup;
@@ -5519,6 +6761,11 @@ declare module "components/page/page.component" {
5519
6761
  fullLocation: string;
5520
6762
  modal: boolean;
5521
6763
  nested: boolean;
6764
+ /**
6765
+ * The tab design: `tabs` (the default), `pills` for a second tab set below a main tab bar, shown without the page
6766
+ * header, or `sidebar` when the tabs are shown outside the page, which hides the tab bar unless it has bottom content.
6767
+ */
6768
+ navigationStyle: 'tabs' | 'pills' | 'sidebar' | undefined;
5522
6769
  primary: boolean;
5523
6770
  previousPath: string;
5524
6771
  previousTarget: string;
@@ -5533,6 +6780,9 @@ declare module "components/page/page.component" {
5533
6780
  disconnectedCallback(): void;
5534
6781
  private handleAltPress;
5535
6782
  private handleAltUp;
6783
+ private breadcrumbSeparatorIcon;
6784
+ private breadcrumbSeparatorSize;
6785
+ private syncBreadcrumbSeparators;
5536
6786
  private handleBreadcrumbSlotChange;
5537
6787
  _registerTabs: () => void;
5538
6788
  firstUpdated(changedProperties: PropertyValues): void;
@@ -5541,6 +6791,8 @@ declare module "components/page/page.component" {
5541
6791
  private refreshExpandingActionsState;
5542
6792
  private syncExpandingActionsToNavbar;
5543
6793
  private prepareTabs;
6794
+ private groupInnerTabs;
6795
+ private renderTabCaption;
5544
6796
  private parsePriority;
5545
6797
  private compareTabs;
5546
6798
  private captionToId;
@@ -5630,6 +6882,7 @@ declare module "components/icon-picker/icon-picker.component" {
5630
6882
  private _searchQuery;
5631
6883
  private _iconList;
5632
6884
  private _filteredIcons;
6885
+ private _gridFocusIcon;
5633
6886
  private _pendingIcon;
5634
6887
  private _pendingLibrary;
5635
6888
  private _pendingColor;
@@ -5668,6 +6921,8 @@ declare module "components/icon-picker/icon-picker.component" {
5668
6921
  private handleSearchInput;
5669
6922
  private filterIcons;
5670
6923
  private handleIconSelect;
6924
+ private _gridTabStop;
6925
+ private _handleGridKeyDown;
5671
6926
  private handleLibraryChange;
5672
6927
  private handleColorInput;
5673
6928
  private handleFreeInput;
@@ -5710,7 +6965,9 @@ declare module "components/inline-edit/inline-edit.component" {
5710
6965
  *
5711
6966
  * @csspart base - The component's base wrapper.
5712
6967
  *
5713
- * @cssproperty --example - An example CSS custom property.
6968
+ * @cssproperty --zn-inline-edit-hover-background - The fill behind a field while hovered or focused.
6969
+ * @cssproperty --zn-inline-edit-bleed - How far the hover fill extends past the left edge of the value.
6970
+ * @cssproperty --zn-inline-edit-underline-color - The dotted underline marking an editable value at rest.
5714
6971
  */
5715
6972
  export default class ZnInlineEdit extends ZincElement implements ZincFormControl {
5716
6973
  static styles: CSSResultGroup;
@@ -5802,6 +7059,7 @@ declare module "components/inline-edit/inline-edit.component" {
5802
7059
  autocomplete: string;
5803
7060
  private hasFocus;
5804
7061
  private isEditing;
7062
+ private textScrolledToEnd;
5805
7063
  private _valueBeforeEdit;
5806
7064
  private _editStartValue;
5807
7065
  input: ZnInput | ZnSelect;
@@ -5818,6 +7076,8 @@ declare module "components/inline-edit/inline-edit.component" {
5818
7076
  protected willUpdate(changedProperties: PropertyValues): void;
5819
7077
  handleValueChange(): Promise<void>;
5820
7078
  handleIsEditingChange(): Promise<void>;
7079
+ private get textControl();
7080
+ updateTextScrolledToEnd: () => void;
5821
7081
  mouseEventHandler: (e: MouseEvent) => void;
5822
7082
  escKeyHandler: (e: KeyboardEvent) => void;
5823
7083
  submitKeyHandler: (e: KeyboardEvent) => void;
@@ -5885,41 +7145,149 @@ declare module "components/vertical-stepper/vertical-stepper.component" {
5885
7145
  * @summary Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.
5886
7146
  * @documentation https://zinc.style/components/vertical-stepper
5887
7147
  * @status experimental
5888
- * @since 1.0
7148
+ * @since 1.0
7149
+ *
7150
+ * @property {boolean} last - When true, removes the connecting line below this step (use for the final step in a sequence).
7151
+ * @property {boolean} first - When true, indicates this is the first step in the sequence (affects visual styling).
7152
+ * @property {boolean} active - When true, highlights this step as the current active step in the process.
7153
+ * @property {string} description - A descriptive text explaining what happens in this step or its current status.
7154
+ * @property {string} caption - The main label/title for this step.
7155
+ * @property {string} type - Marker colour: neutral, primary, success, error, warning, info or ai (AI-generated steps only). Overrides `active`.
7156
+ * @property {boolean} selected - When true, rings the marker to show the step is picked.
7157
+ * @property {boolean} dashed - When true, draws the marker's border dashed, for a step that is not yet final.
7158
+ * @property {boolean} highlightLine - When true, colours the line below this step's marker, joining it to the next step.
7159
+ *
7160
+ * @slot - Content below the caption and description, such as metadata or chips.
7161
+ * @slot icon - Optional slot for adding an icon or indicator before the step content.
7162
+ * @slot suffix - Inline content after the caption and description, such as status chips.
7163
+ * @slot actions - Controls aligned to the end of the step.
7164
+ *
7165
+ * @csspart vs - The main container for the vertical stepper.
7166
+ * @csspart vs__left - The left section containing the icon and connecting line.
7167
+ * @csspart vs__icon - The icon container.
7168
+ * @csspart vs__line - The vertical connecting line between steps.
7169
+ * @csspart vs__right - The right section containing caption and description text.
7170
+ * @csspart vs__caption - The caption/title text element.
7171
+ * @csspart vs__description - The description text element.
7172
+ * @csspart vs__content - The container for the default slot.
7173
+ * @csspart vs__actions - The container for the actions slot.
7174
+ */
7175
+ export default class ZnVerticalStepper extends ZincElement {
7176
+ static styles: CSSResultGroup;
7177
+ last: boolean;
7178
+ first: boolean;
7179
+ active: boolean;
7180
+ description: string;
7181
+ caption: string;
7182
+ type: 'neutral' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'ai';
7183
+ selected: boolean;
7184
+ dashed: boolean;
7185
+ highlightLine: boolean;
7186
+ private readonly hasSlotController;
7187
+ render(): import("lit-html").TemplateResult<1>;
7188
+ }
7189
+ }
7190
+ declare module "components/vertical-stepper/index" {
7191
+ import ZnVerticalStepper from "components/vertical-stepper/vertical-stepper.component";
7192
+ export * from "components/vertical-stepper/vertical-stepper.component";
7193
+ export default ZnVerticalStepper;
7194
+ global {
7195
+ interface HTMLElementTagNameMap {
7196
+ 'zn-vertical-stepper': ZnVerticalStepper;
7197
+ }
7198
+ }
7199
+ }
7200
+ declare module "components/diff/diff.component" {
7201
+ import { type CSSResultGroup } from 'lit';
7202
+ import ZincElement from "internal/zinc-element";
7203
+ /**
7204
+ * @summary A side-by-side comparison of two versions of something, one column each, built from `zn-diff-row`s.
7205
+ * @documentation https://zinc.style/components/diff
7206
+ * @status experimental
7207
+ * @since 1.1
7208
+ *
7209
+ * @property {string} beforeCaption - The left column's heading, such as the older version.
7210
+ * @property {string} beforeDescription - A line under the left heading.
7211
+ * @property {string} afterCaption - The right column's heading, such as the newer version.
7212
+ * @property {string} afterDescription - A line under the right heading.
7213
+ *
7214
+ * @slot - The `zn-diff-row`s.
7215
+ * @slot before - Inline content after the left heading, such as a status badge.
7216
+ * @slot after - Inline content after the right heading, such as a status badge.
7217
+ *
7218
+ * @csspart base - The table.
7219
+ * @csspart head - The sticky row of column headings.
7220
+ *
7221
+ * @cssproperty --zn-diff-head-background - The heading row's background.
7222
+ * @cssproperty --zn-diff-sticky-top - How far from the top of its scroll container the heading row sticks.
7223
+ */
7224
+ export default class ZnDiff extends ZincElement {
7225
+ static styles: CSSResultGroup;
7226
+ beforeCaption: string;
7227
+ beforeDescription: string;
7228
+ afterCaption: string;
7229
+ afterDescription: string;
7230
+ render(): import("lit-html").TemplateResult<1>;
7231
+ }
7232
+ }
7233
+ declare module "components/diff/index" {
7234
+ import ZnDiff from "components/diff/diff.component";
7235
+ export * from "components/diff/diff.component";
7236
+ export default ZnDiff;
7237
+ global {
7238
+ interface HTMLElementTagNameMap {
7239
+ 'zn-diff': ZnDiff;
7240
+ }
7241
+ }
7242
+ }
7243
+ declare module "components/diff-row/diff-row.component" {
7244
+ import { type CSSResultGroup } from 'lit';
7245
+ import ZincElement from "internal/zinc-element";
7246
+ import ZnBadge from "components/badge/index";
7247
+ /**
7248
+ * @summary One aligned row of a `zn-diff`: the same item in both versions, tinted by how it changed.
7249
+ * @documentation https://zinc.style/components/diff-row
7250
+ * @status experimental
7251
+ * @since 1.1
5889
7252
  *
5890
- * @property {boolean} last - When true, removes the connecting line below this step (use for the final step in a sequence).
5891
- * @property {boolean} first - When true, indicates this is the first step in the sequence (affects visual styling).
5892
- * @property {boolean} active - When true, highlights this step as the current active step in the process.
5893
- * @property {string} description - A descriptive text explaining what happens in this step or its current status.
5894
- * @property {string} caption - The main label/title for this step.
7253
+ * @dependency zn-badge
5895
7254
  *
5896
- * @slot icon - Optional slot for adding an icon or indicator before the step content.
7255
+ * @property {string} caption - The item's name, shown in both columns.
7256
+ * @property {string} change - How the item changed: `changed`, `added` or `removed`. Unchanged when empty.
7257
+ * @property {boolean} heading - When true, the row is a heading spanning both columns, such as a section name.
7258
+ * @property {string} beforePlaceholder - Shown in the left column when the item was added.
7259
+ * @property {string} afterPlaceholder - Shown in the right column when the item was removed.
5897
7260
  *
5898
- * @csspart vs - The main container for the vertical stepper.
5899
- * @csspart vs__left - The left section containing the icon and connecting line.
5900
- * @csspart vs__icon - The icon container.
5901
- * @csspart vs__line - The vertical connecting line between steps.
5902
- * @csspart vs__right - The right section containing caption and description text.
5903
- * @csspart vs__caption - The caption/title text element.
5904
- * @csspart vs__description - The description text element.
7261
+ * @slot before - The item's details in the older version.
7262
+ * @slot after - The item's details in the newer version.
7263
+ *
7264
+ * @csspart row - The row.
7265
+ * @csspart before - The left cell.
7266
+ * @csspart after - The right cell.
7267
+ *
7268
+ * @cssproperty --zn-diff-row-border - The line below the row.
5905
7269
  */
5906
- export default class ZnVerticalStepper extends ZincElement {
7270
+ export default class ZnDiffRow extends ZincElement {
5907
7271
  static styles: CSSResultGroup;
5908
- last: boolean;
5909
- first: boolean;
5910
- active: boolean;
5911
- description: string;
7272
+ static dependencies: {
7273
+ 'zn-badge': typeof ZnBadge;
7274
+ };
5912
7275
  caption: string;
7276
+ change: '' | 'changed' | 'added' | 'removed';
7277
+ heading: boolean;
7278
+ beforePlaceholder: string;
7279
+ afterPlaceholder: string;
7280
+ private renderCell;
5913
7281
  render(): import("lit-html").TemplateResult<1>;
5914
7282
  }
5915
7283
  }
5916
- declare module "components/vertical-stepper/index" {
5917
- import ZnVerticalStepper from "components/vertical-stepper/vertical-stepper.component";
5918
- export * from "components/vertical-stepper/vertical-stepper.component";
5919
- export default ZnVerticalStepper;
7284
+ declare module "components/diff-row/index" {
7285
+ import ZnDiffRow from "components/diff-row/diff-row.component";
7286
+ export * from "components/diff-row/diff-row.component";
7287
+ export default ZnDiffRow;
5920
7288
  global {
5921
7289
  interface HTMLElementTagNameMap {
5922
- 'zn-vertical-stepper': ZnVerticalStepper;
7290
+ 'zn-diff-row': ZnDiffRow;
5923
7291
  }
5924
7292
  }
5925
7293
  }
@@ -6000,6 +7368,7 @@ declare module "components/table/table.component" {
6000
7368
  connectedCallback(): void;
6001
7369
  tableHead(): import("lit-html").TemplateResult<1> | undefined;
6002
7370
  tableBody(): import("lit-html").TemplateResult<1>;
7371
+ private handleRowClick;
6003
7372
  columnContent(col: any): any;
6004
7373
  render(): import("lit-html").TemplateResult<1>;
6005
7374
  }
@@ -6118,10 +7487,13 @@ declare module "components/split-pane/split-pane.component" {
6118
7487
  protected _store: Store;
6119
7488
  connectedCallback(): void;
6120
7489
  disconnectedCallback(): void;
7490
+ private keepSecondarySize;
6121
7491
  private refreshNarrowState;
6122
7492
  firstUpdated(changedProperties: PropertyValues): void;
6123
7493
  applyStoredSize(): void;
6124
7494
  resize(e: any): void;
7495
+ private storeSize;
7496
+ private handleResizerKeyDown;
6125
7497
  setSize(primaryPanelPixels: number): void;
6126
7498
  _setFocusPane(idx: number): void;
6127
7499
  private getDirectNestedSplitPanes;
@@ -6300,7 +7672,7 @@ declare module "components/stepper/index" {
6300
7672
  }
6301
7673
  }
6302
7674
  declare module "components/stat/stat.component" {
6303
- import { type CSSResultGroup } from 'lit';
7675
+ import { type CSSResultGroup, type PropertyValues } from 'lit';
6304
7676
  import ZincElement from "internal/zinc-element";
6305
7677
  import type { IconColor } from "components/icon/index";
6306
7678
  /**
@@ -6322,8 +7694,21 @@ declare module "components/stat/stat.component" {
6322
7694
  showDelta: boolean;
6323
7695
  color: 'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral';
6324
7696
  /** `value-first` puts the amount under the caption with the description beneath it, and tints the amount rather
6325
- * than the description with `color`. */
6326
- layout: 'default' | 'value-first';
7697
+ * than the description with `color`. `tile` is a self-contained card: caption, amount, a footer with the delta and
7698
+ * `description`, an optional sparkline, and the default slot beneath. */
7699
+ layout: 'default' | 'value-first' | 'tile';
7700
+ /** Comma-separated values drawn as a sparkline under a `tile`. */
7701
+ spark: string;
7702
+ /** The sparkline's colour: a tone (`primary`, `info`, `success`, `warning`, `danger`, `ai`) or any CSS colour. */
7703
+ sparkColor: string;
7704
+ /** Treats a rise as bad news, so an increase is coloured as a loss (declines, refunds, failures). */
7705
+ invertDelta: boolean;
7706
+ /** A coloured dot before a `tile`'s caption. */
7707
+ tone: '' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
7708
+ /** Renders a `tile` as a toggle button, for tiles that filter the content below them. */
7709
+ selectable: boolean;
7710
+ /** Whether a `selectable` tile is pressed, or a linked tile marks the view the page is showing. */
7711
+ selected: boolean;
6327
7712
  /** How `show-delta` compares with `previous`: the relative change, or the difference in points. */
6328
7713
  deltaFormat: 'percent' | 'points';
6329
7714
  /** An icon shown beside the amount. */
@@ -6334,15 +7719,36 @@ declare module "components/stat/stat.component" {
6334
7719
  size: 'medium' | 'large';
6335
7720
  /** Pads the stat, for stats laid edge to edge in a flush container such as `zn-cols no-gap divide`. */
6336
7721
  padded: boolean;
7722
+ /** Makes the whole stat a link, marked with an arrow in its corner. */
7723
+ href: string;
7724
+ dataTarget: string;
7725
+ gaid: string;
7726
+ /** JSON fetched once to fill the stat: any of `caption`, `amount`, `description`, `previous`, `spark` and
7727
+ * `sparkColor`. The stat's own attributes show until it loads. */
7728
+ dataUrl: string;
7729
+ /** Shows a `tile` as a placeholder. Set while `data-url` loads; the sparkline draws in once it clears. */
7730
+ loading: boolean;
7731
+ private loaded;
7732
+ private static readonly loadableKeys;
7733
+ protected willUpdate(changed: PropertyValues): void;
7734
+ protected updated(changed: PropertyValues): void;
7735
+ private loadData;
7736
+ private parseNumber;
6337
7737
  calcPercentageDifference(): number;
6338
7738
  getCurrentAmount(): string;
6339
7739
  private getDisplayAmount;
6340
7740
  diffText(): import("lit-html").TemplateResult<1> | null;
7741
+ private fromZero;
6341
7742
  private pointsDelta;
6342
7743
  private renderAmount;
6343
7744
  private renderValueFirst;
6344
7745
  private percentDelta;
7746
+ private tileDelta;
7747
+ private sparkStroke;
7748
+ private renderSpark;
7749
+ private renderTile;
6345
7750
  render(): import("lit-html").TemplateResult<1>;
7751
+ private renderDefault;
6346
7752
  }
6347
7753
  }
6348
7754
  declare module "components/stat/index" {
@@ -6384,9 +7790,12 @@ declare module "components/scroll-container/scroll-container.component" {
6384
7790
  private footer;
6385
7791
  private _footerObserved;
6386
7792
  private _footerHeightFrame;
7793
+ private _scrollEndTimer;
6387
7794
  protected firstUpdated(_changedProperties: PropertyValues): void;
6388
7795
  protected updated(changedProperties: PropertyValues): void;
6389
7796
  disconnectedCallback(): void;
7797
+ private _queueScrollEnd;
7798
+ private _cancelScrollEnd;
6390
7799
  scrollEnd(): void;
6391
7800
  private _syncFooterHeight;
6392
7801
  private readonly _footerResizeObserver;
@@ -6685,12 +8094,15 @@ declare module "components/editor/modules/toolbar/toolbar.component" {
6685
8094
  private _overflowGroup;
6686
8095
  private _featureConfig;
6687
8096
  private _resizeId;
8097
+ private _fitRange;
8098
+ private _measured;
6688
8099
  private readonly _resizeObserver;
6689
8100
  private _movedContent;
6690
8101
  connectedCallback(): void;
6691
8102
  disconnectedCallback(): void;
6692
8103
  protected firstUpdated(_changedProperties: PropertyValues): void;
6693
- handleResize: () => void;
8104
+ protected updated(changedProperties: PropertyValues): void;
8105
+ handleResize: (width?: number) => void;
6694
8106
  configureToolbar(config: EditorFeatureConfig): void;
6695
8107
  private getToolbarWidth;
6696
8108
  private getOverflowGroupWidth;
@@ -6700,10 +8112,15 @@ declare module "components/editor/modules/toolbar/toolbar.component" {
6700
8112
  private updateEmptyGroups;
6701
8113
  private _updateDividerClasses;
6702
8114
  private calculateOverflow;
8115
+ /** Shows every group and records their widths. Returns the toolbar width. */
8116
+ private measureGroups;
8117
+ /** Shows the leading groups that fit `width` and moves the rest into the overflow menu. */
8118
+ private layoutGroups;
6703
8119
  private _dispatchOverflowEvent;
6704
8120
  private populateOverflowMenu;
6705
8121
  render(): import("lit-html").TemplateResult<1>;
6706
8122
  private _textOptions;
8123
+ private _compactToolbar;
6707
8124
  private _formatOptions;
6708
8125
  private _commonFormatOptions;
6709
8126
  private _historyOptions;
@@ -6733,6 +8150,9 @@ declare module "components/editor/modules/dialog/dialog.component" {
6733
8150
  connectedCallback(): void;
6734
8151
  protected firstUpdated(_changedProperties: PropertyValues): void;
6735
8152
  private handleContentCloserClick;
8153
+ /** Inserts the element named by the control's `editor-content-id`: a `<template>` as HTML, anything else as text.
8154
+ * The control's form is submitted first, as inserting closes the dialog and detaches it. */
8155
+ private insertContent;
6736
8156
  setContent(content: string): void;
6737
8157
  handleOpenChange(): void;
6738
8158
  private addOpenListeners;
@@ -6822,6 +8242,7 @@ declare module "components/editor/modules/toolbar/toolbar" {
6822
8242
  private _updateMenuCheckedState;
6823
8243
  private _updateDropdownTrigger;
6824
8244
  private _syncButtonState;
8245
+ private _unlink;
6825
8246
  private _insertDivider;
6826
8247
  private _openDatePicker;
6827
8248
  private _openDialog;
@@ -6838,9 +8259,10 @@ declare module "components/editor/modules/attachment/attachment" {
6838
8259
  url: any;
6839
8260
  filename: any;
6840
8261
  }>;
6841
- onFileUploaded?: (node: HTMLElement, { url }: {
8262
+ onFileUploaded?: (node: HTMLElement | null, { url }: {
6842
8263
  url: string;
6843
8264
  }) => void;
8265
+ onFileUploadFailed?: (error: Error) => void;
6844
8266
  attachmentInput?: HTMLInputElement;
6845
8267
  }
6846
8268
  export default class Attachment {
@@ -6854,6 +8276,8 @@ declare module "components/editor/modules/attachment/attachment" {
6854
8276
  private _attachmentContainer;
6855
8277
  private _createAttachmentContainer;
6856
8278
  private _insertAttachment;
8279
+ private _markAttachmentFailed;
8280
+ private _revokeObjectUrl;
6857
8281
  private _updateAttachment;
6858
8282
  private _createAttachment;
6859
8283
  /** Clear every staged attachment preview and reset the backing form input. */
@@ -6896,6 +8320,8 @@ declare module "components/editor/modules/context-menu/context-menu" {
6896
8320
  private _dismissedIndex;
6897
8321
  private _keydownHandler;
6898
8322
  private _docClickHandler;
8323
+ private _pointerHeld;
8324
+ private _pointerReleaseHandler;
6899
8325
  private _featureConfig;
6900
8326
  private readonly _caretAnchor;
6901
8327
  constructor(quill: Quill, options: {
@@ -7020,6 +8446,30 @@ declare module "components/editor/modules/image-resize/image-resize" {
7020
8446
  }
7021
8447
  export default ImageResize;
7022
8448
  }
8449
+ declare module "components/editor/modules/merge-field/merge-field" {
8450
+ import Embed from "quill/blots/embed";
8451
+ import Quill from "quill";
8452
+ export interface MergeFieldValue {
8453
+ token: string;
8454
+ label: string;
8455
+ }
8456
+ /** A `{{token}}` replacement shown as a labelled chip, saved back out as the raw token. */
8457
+ export class MergeFieldBlot extends Embed {
8458
+ static blotName: string;
8459
+ static tagName: string;
8460
+ static className: string;
8461
+ static create(value: MergeFieldValue): HTMLElement;
8462
+ static value(node: HTMLElement): MergeFieldValue;
8463
+ html(): string;
8464
+ }
8465
+ export const normaliseToken: (token: string) => string;
8466
+ class MergeField {
8467
+ constructor(quill: Quill, options: {
8468
+ labels?: Record<string, string>;
8469
+ });
8470
+ }
8471
+ export default MergeField;
8472
+ }
7023
8473
  declare module "components/editor/modules/ai/panel/ai-panel.component" {
7024
8474
  import ZincElement from "internal/zinc-element";
7025
8475
  import type { CSSResultGroup } from "lit";
@@ -7096,8 +8546,10 @@ declare module "components/textarea/textarea.component" {
7096
8546
  private readonly formControlController;
7097
8547
  private readonly hasSlotController;
7098
8548
  private readonly resizeObserver;
8549
+ private pointerHeld;
7099
8550
  /** Ensures we only attempt to derive the initial value from light DOM content once */
7100
8551
  private _didInitFromContent;
8552
+ private escapeSwallowed;
7101
8553
  private readonly slashController;
7102
8554
  formControl: HTMLElement;
7103
8555
  input: HTMLTextAreaElement;
@@ -7139,6 +8591,8 @@ declare module "components/textarea/textarea.component" {
7139
8591
  flush: boolean;
7140
8592
  /** Makes the textarea a required field. */
7141
8593
  required: boolean;
8594
+ /** Short text shown next to the label, styled like the help text, e.g. `optional`. */
8595
+ labelNote: string;
7142
8596
  /** The minimum length of input that will be considered valid. */
7143
8597
  minlength: number;
7144
8598
  /** The maximum length of input that will be considered valid. */
@@ -7210,6 +8664,7 @@ declare module "components/textarea/textarea.component" {
7210
8664
  private handleInput;
7211
8665
  private handleInvalid;
7212
8666
  private handleKeyDown;
8667
+ private handlePointerDown;
7213
8668
  private setTextareaHeight;
7214
8669
  handleDisabledChange(): void;
7215
8670
  handleRowsChange(): void;
@@ -7329,6 +8784,7 @@ declare module "components/editor/editor.component" {
7329
8784
  datesEnabled?: boolean;
7330
8785
  emojisEnabled?: boolean;
7331
8786
  codeEnabled?: boolean;
8787
+ compact?: boolean;
7332
8788
  }
7333
8789
  /**
7334
8790
  * @summary Short summary of the component's intended use.
@@ -7342,6 +8798,7 @@ declare module "components/editor/editor.component" {
7342
8798
  *
7343
8799
  * @slot - The default slot.
7344
8800
  * @slot example - An example slot.
8801
+ * @slot help-text - Text under the editor. Alternatively, use the `help-text` attribute.
7345
8802
  *
7346
8803
  * @csspart base - The component's base wrapper.
7347
8804
  *
@@ -7350,12 +8807,28 @@ declare module "components/editor/editor.component" {
7350
8807
  export default class ZnEditor extends ZincElement implements ZincFormControl {
7351
8808
  static styles: CSSResultGroup;
7352
8809
  private formControlController;
8810
+ private readonly hasSlotController;
7353
8811
  private editor;
7354
8812
  private editorHtml;
7355
8813
  private toolbar;
7356
8814
  id: string;
7357
8815
  name: string;
7358
8816
  value: string;
8817
+ placeholder: string;
8818
+ /** Draws the editor as a form field: a bordered, resizable box under a small toolbar of bold, italic, link and lists. */
8819
+ compact: boolean;
8820
+ /** Adds a Source button that switches to editing the raw HTML, which is submitted as written. */
8821
+ sourceEnabled: boolean;
8822
+ /** Edits the HTML in place as a whole document, keeping layout the editor can't hold, such as a designed email. */
8823
+ documentMode: boolean;
8824
+ private documentFrame;
8825
+ /** Shows only the content, without a toolbar or box, such as the source beside a translation. */
8826
+ readonly: boolean;
8827
+ /** With `compact`, a short label inside the box ahead of the content, such as a language code. */
8828
+ prefix: string;
8829
+ private _sourceMode;
8830
+ /** Text under the editor that describes how to use it. If you need to display HTML, use the `help-text` slot instead. */
8831
+ helpText: string;
7359
8832
  interactionType: 'ticket' | 'chat';
7360
8833
  uploadAttachmentUrl: string;
7361
8834
  codeBlocksEnabled: boolean;
@@ -7368,6 +8841,11 @@ declare module "components/editor/editor.component" {
7368
8841
  emojisEnabled: boolean;
7369
8842
  codeEnabled: boolean;
7370
8843
  aiEnabled: boolean;
8844
+ /**
8845
+ * Shows `{{token}}` replacements as highlighted chips, labelled from the matching `context-items`
8846
+ * quick action. The value still holds the raw tokens.
8847
+ */
8848
+ mergeFieldsEnabled: boolean;
7371
8849
  aiPath: string;
7372
8850
  /**
7373
8851
  * Caches unsent content while typing and restores it when the editor next loads,
@@ -7383,6 +8861,7 @@ declare module "components/editor/editor.component" {
7383
8861
  private quillElement;
7384
8862
  private _content;
7385
8863
  private _selectionRange;
8864
+ private _pendingUploads;
7386
8865
  get validity(): ValidityState;
7387
8866
  get validationMessage(): string;
7388
8867
  checkValidity(): boolean;
@@ -7391,9 +8870,16 @@ declare module "components/editor/editor.component" {
7391
8870
  setCustomValidity(message: string): void;
7392
8871
  connectedCallback(): void;
7393
8872
  protected firstUpdated(_changedProperties: PropertyValues): void;
8873
+ private _toggleSource;
8874
+ private _loadDocument;
8875
+ private _fitDocument;
8876
+ private _handleDocumentInput;
8877
+ private _handleSourceInput;
8878
+ private _mergeFieldLabels;
7394
8879
  private _handleTextChange;
7395
8880
  private _isEmpty;
7396
8881
  private _cacheContent;
8882
+ private _settleUpload;
7397
8883
  private _clearCachedContent;
7398
8884
  private _getQuillKeyboardBindings;
7399
8885
  private _handleEditorChange;
@@ -7417,183 +8903,6 @@ declare module "components/editor/index" {
7417
8903
  }
7418
8904
  }
7419
8905
  }
7420
- declare module "internal/selection-card" {
7421
- /** Where a selection card renders its image, relative to the card's text. */
7422
- export type SelectionCardImagePosition = 'top' | 'right' | 'bottom' | 'left';
7423
- /**
7424
- * Where a selection card renders its radio/checkbox indicator. `start` keeps the standard
7425
- * inline position; `none` hides the indicator so the card itself shows the selected state.
7426
- */
7427
- export type SelectionCardControlPosition = 'start' | 'none' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
7428
- }
7429
- declare module "components/checkbox/checkbox.component" {
7430
- import { type CSSResultGroup } from 'lit';
7431
- import ZincElement from "internal/zinc-element";
7432
- import ZnIcon from "components/icon/index";
7433
- import type { SelectionCardControlPosition, SelectionCardImagePosition } from "internal/selection-card";
7434
- import type { ZincFormControl } from "internal/zinc-element";
7435
- type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
7436
- /**
7437
- * @summary Short summary of the component's intended use.
7438
- * @documentation https://zinc.style/components/checkbox
7439
- * @status experimental
7440
- * @since 1.0
7441
- *
7442
- * @dependency zn-icon
7443
- *
7444
- * @slot - The checkbox's label.
7445
- * @slot image - Replaces the built-in image used by contained checkboxes.
7446
- * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
7447
- * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
7448
- *
7449
- * @event zn-blur - Emitted when the checkbox loses focus.
7450
- * @event zn-change - Emitted when the checked state changes.
7451
- * @event zn-focus - Emitted when the checkbox gains focus.
7452
- * @event zn-input - Emitted when the checkbox receives input.
7453
- * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
7454
- *
7455
- * @csspart base - The component's base wrapper.
7456
- * @csspart control - The square container that wraps the checkbox's checked state.
7457
- * @csspart control--checked - Matches the control part when the checkbox is checked.
7458
- * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
7459
- * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
7460
- * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
7461
- * @csspart indeterminate-icon - The indeterminate icon, an `<svg>` element.
7462
- * @csspart image-container - The wrapper around the built-in image or image slot.
7463
- * @csspart image - The built-in image.
7464
- * @csspart card-title - The title inside a selection card.
7465
- * @csspart label - The container that wraps the checkbox's label.
7466
- * @csspart description - The container that wraps the checkbox's description.
7467
- * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
7468
- *
7469
- * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
7470
- * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
7471
- * @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
7472
- * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
7473
- * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
7474
- * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
7475
- * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
7476
- * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
7477
- * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
7478
- */
7479
- export default class ZnCheckbox extends ZincElement implements ZincFormControl {
7480
- static styles: CSSResultGroup;
7481
- static dependencies: {
7482
- 'zn-icon': typeof ZnIcon;
7483
- };
7484
- private readonly formControlController;
7485
- private readonly hasSlotController;
7486
- input: HTMLInputElement;
7487
- private hasFocus;
7488
- title: string;
7489
- /** The name of the checkbox, submitted as a name/value pair with form data. */
7490
- name: string;
7491
- /** The current value of the checkbox, submitted as a name/value pair with form data. */
7492
- value: string;
7493
- /** Title rendered inside the card. The default slot takes precedence when provided. */
7494
- cardTitle: string;
7495
- /** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
7496
- uncheckedValue: string;
7497
- /** The checkbox's size. */
7498
- size: 'small' | 'medium' | 'large';
7499
- /** Disables the checkbox. */
7500
- disabled: boolean;
7501
- /** Draws the checkbox in a checked state. */
7502
- checked: boolean;
7503
- /**
7504
- * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
7505
- * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
7506
- */
7507
- indeterminate: boolean;
7508
- /** Draws a container around the checkbox. */
7509
- contained: boolean;
7510
- /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
7511
- square: boolean;
7512
- /** URL for the image shown in a contained checkbox. */
7513
- src: string;
7514
- /** Accessible text for the built-in image. Leave empty when the image is decorative. */
7515
- imageAlt: string;
7516
- /** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
7517
- imagePosition: SelectionCardImagePosition;
7518
- /**
7519
- * Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself
7520
- * shows the selected state. Requires `contained`.
7521
- */
7522
- controlPosition: SelectionCardControlPosition;
7523
- /** Removes a container around the checkbox. */
7524
- borderless: boolean;
7525
- /** Applies styles relevant to checkboxes in a horizontal layout. */
7526
- horizontal: boolean;
7527
- /** The default value of the form control. Primarily used for resetting the form control. */
7528
- defaultChecked: boolean;
7529
- /**
7530
- * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
7531
- * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
7532
- * the same document or shadow root for this to work.
7533
- */
7534
- form: string;
7535
- /** Makes the checkbox a required field. */
7536
- required: boolean;
7537
- /** Submits the form when checkbox is clicked. */
7538
- submitOnClick: boolean;
7539
- /** The checkbox's help text. If you need to display HTML, use the `description` slot instead. */
7540
- description: string;
7541
- label: string;
7542
- labelTooltip: string;
7543
- /** The icon to show when the checkbox is checked. */
7544
- checkedIcon: string;
7545
- /** The icon to show when the checkbox is unchecked. */
7546
- uncheckedIcon: string;
7547
- /** The color of the checkbox. */
7548
- color: ColorOption;
7549
- /** The color of the checkbox when checked. Overrides `color`. */
7550
- checkedColor: ColorOption;
7551
- /** The color of the checkbox when unchecked. Overrides `color`. */
7552
- uncheckedColor: ColorOption;
7553
- /** Gets the validity state object */
7554
- get validity(): ValidityState;
7555
- get isChecked(): boolean;
7556
- /** Gets the validation message */
7557
- get validationMessage(): string;
7558
- firstUpdated(): void;
7559
- private handleClick;
7560
- private handleBlur;
7561
- private handleInput;
7562
- private handleInvalid;
7563
- private handleFocus;
7564
- private handleSelectedContentClick;
7565
- handleDisabledChange(): void;
7566
- handleStateChange(): void;
7567
- /** Simulates a click on the checkbox. */
7568
- click(): void;
7569
- /** Sets focus on the checkbox. */
7570
- focus(options?: FocusOptions): void;
7571
- /** Removes focus from the checkbox. */
7572
- blur(): void;
7573
- /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
7574
- checkValidity(): boolean;
7575
- /** Gets the associated form, if one exists. */
7576
- getForm(): HTMLFormElement | null;
7577
- /** Checks for validity and shows the browser's validation message if the control is invalid. */
7578
- reportValidity(): boolean;
7579
- /**
7580
- * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
7581
- * the custom validation message, call this method with an empty string.
7582
- */
7583
- setCustomValidity(message: string): void;
7584
- render(): import("lit-html").TemplateResult<1>;
7585
- }
7586
- }
7587
- declare module "components/checkbox/index" {
7588
- import ZnCheckbox from "components/checkbox/checkbox.component";
7589
- export * from "components/checkbox/checkbox.component";
7590
- export default ZnCheckbox;
7591
- global {
7592
- interface HTMLElementTagNameMap {
7593
- 'zn-checkbox': ZnCheckbox;
7594
- }
7595
- }
7596
- }
7597
8906
  declare module "components/form-actions/form-actions.component" {
7598
8907
  import { type CSSResultGroup } from 'lit';
7599
8908
  import ZincElement from "internal/zinc-element";
@@ -7640,6 +8949,18 @@ declare module "components/form-actions/form-actions.component" {
7640
8949
  resetIcon: string;
7641
8950
  /** The id of the form to act on. If omitted, the closest containing form is used. */
7642
8951
  form: string;
8952
+ /**
8953
+ * Shows the submit button loading and ignores further submits until the console reports the request finished,
8954
+ * so a slow save such as an upload can't be sent twice. Only for forms the console submits.
8955
+ */
8956
+ loadingOnSubmit: boolean;
8957
+ private submitting;
8958
+ private watchedForm;
8959
+ connectedCallback(): void;
8960
+ disconnectedCallback(): void;
8961
+ private handleFormSubmit;
8962
+ private handleRequested;
8963
+ private handleDone;
7643
8964
  private getForm;
7644
8965
  private handleCancel;
7645
8966
  private handleReset;
@@ -7691,6 +9012,8 @@ declare module "components/form-group/form-group.component" {
7691
9012
  helpText: string;
7692
9013
  forceCols: boolean;
7693
9014
  layout: string;
9015
+ /** Labels the group like one of its fields and keeps it tight to them, for a section inside a form or dialog. */
9016
+ compact: boolean;
7694
9017
  pad: boolean;
7695
9018
  /** The scroller the label is moved against by hand; null while native sticky is enough. */
7696
9019
  private tracked;
@@ -7905,7 +9228,7 @@ declare module "components/radio/radio.component" {
7905
9228
  * @csspart base - The component's base wrapper.
7906
9229
  * @csspart control - The square container that wraps the radio's checked state.
7907
9230
  * @csspart control--checked - Matches the control part when the radio is checked.
7908
- * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
9231
+ * @csspart checked-icon - The checked dot, a `<span>` element.
7909
9232
  * @csspart image-container - The wrapper around the built-in image or image slot.
7910
9233
  * @csspart image - The built-in image.
7911
9234
  * @csspart card-title - The title inside a selection card.
@@ -7931,6 +9254,8 @@ declare module "components/radio/radio.component" {
7931
9254
  private readonly formControlController;
7932
9255
  private readonly hasSlotController;
7933
9256
  input: HTMLInputElement;
9257
+ control: HTMLElement;
9258
+ private readonly pointerIntent;
7934
9259
  private hasFocus;
7935
9260
  title: string;
7936
9261
  /** The name of the radio, submitted as a name/value pair with form data. */
@@ -7949,6 +9274,8 @@ declare module "components/radio/radio.component" {
7949
9274
  contained: boolean;
7950
9275
  /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
7951
9276
  square: boolean;
9277
+ /** Centres the text of a contained radio that has no image or `card-title`. */
9278
+ centered: boolean;
7952
9279
  /** URL for the image shown in a contained radio. */
7953
9280
  src: string;
7954
9281
  /** Accessible text for the built-in image. Leave empty when the image is decorative. */
@@ -7956,12 +9283,16 @@ declare module "components/radio/radio.component" {
7956
9283
  /** Places the image above, beside, or below the radio's text. Requires `contained`. */
7957
9284
  imagePosition: SelectionCardImagePosition;
7958
9285
  /**
7959
- * Places the radio indicator within a contained card. Use `none` to hide the indicator so the card itself
7960
- * shows the selected state. Requires `contained`.
9286
+ * Places the radio indicator within a contained card. A contained radio without an image or `card-title` hides it
9287
+ * at `start`, as does `none`. Requires `contained`.
7961
9288
  */
7962
9289
  controlPosition: SelectionCardControlPosition;
7963
9290
  /** Applies styles relevant to radios in a horizontal layout. */
7964
9291
  horizontal: boolean;
9292
+ /** Draws the radio as one segment of a scale. Set by a radio group with `scale`. */
9293
+ scale: boolean;
9294
+ /** Fills a scale segment, as one at or before the group's checked radio. Set by a radio group with `scale`. */
9295
+ filled: boolean;
7965
9296
  /** The default value of the form control. Primarily used for resetting the form control. */
7966
9297
  defaultChecked: boolean;
7967
9298
  /**
@@ -7982,13 +9313,15 @@ declare module "components/radio/radio.component" {
7982
9313
  get validationMessage(): string;
7983
9314
  firstUpdated(): void;
7984
9315
  private handleClick;
9316
+ /** Each input sits in its own shadow root, so the browser can't group same-named radios outside a radio group. */
9317
+ private uncheckNamedSiblings;
7985
9318
  private handleBlur;
7986
9319
  private handleInput;
7987
9320
  private handleInvalid;
7988
9321
  private handleFocus;
7989
9322
  private handleSelectedContentClick;
7990
9323
  handleDisabledChange(): void;
7991
- handleStateChange(): void;
9324
+ handleStateChange(): Promise<void>;
7992
9325
  /** Simulates a click on the radio. */
7993
9326
  click(): void;
7994
9327
  /** Sets focus on the radio. */
@@ -8087,6 +9420,7 @@ declare module "components/rating/rating.component" {
8087
9420
  private _getValueFromMousePosition;
8088
9421
  private _getValueFromTouchPosition;
8089
9422
  private _setValue;
9423
+ private _handleKeyDown;
8090
9424
  private _handleClick;
8091
9425
  private _handleMouseEnter;
8092
9426
  private _handleMouseMove;
@@ -8160,11 +9494,18 @@ declare module "components/radio-group/radio-group.component" {
8160
9494
  contained: boolean;
8161
9495
  /** Squares off the corners of every contained radio in the group, which are rounded by default. */
8162
9496
  square: boolean;
9497
+ /** Centres the text of every contained radio in the group. */
9498
+ centered: boolean;
8163
9499
  /**
8164
9500
  * Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from
8165
9501
  * `--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
8166
9502
  */
8167
9503
  wrap: boolean;
9504
+ /**
9505
+ * Lays the radios out as a segmented scale, in document order, filling every segment up to the checked one. Suits
9506
+ * ordered answers such as 1 to 10, and unlike a range input it has no value until one is picked.
9507
+ */
9508
+ scale: boolean;
8168
9509
  /**
8169
9510
  * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
8170
9511
  * to place the form control outside a form and associate it with the form that has this `id`. The form must be in
@@ -8184,9 +9525,11 @@ declare module "components/radio-group/radio-group.component" {
8184
9525
  private handleLabelClick;
8185
9526
  private handleInvalid;
8186
9527
  private syncRadioElements;
9528
+ private syncScale;
8187
9529
  private syncRadios;
8188
9530
  private updateCheckedRadio;
8189
9531
  handleSizeChange(): void;
9532
+ handleScaleChange(): void;
8190
9533
  handleValueChange(): void;
8191
9534
  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
8192
9535
  checkValidity(): boolean;
@@ -8210,6 +9553,32 @@ declare module "components/radio-group/index" {
8210
9553
  }
8211
9554
  }
8212
9555
  }
9556
+ declare module "utilities/animation-registry" {
9557
+ export interface ElementAnimation {
9558
+ keyframes: Keyframe[];
9559
+ rtlKeyframes?: Keyframe[];
9560
+ options?: KeyframeAnimationOptions;
9561
+ }
9562
+ export interface ElementAnimationMap {
9563
+ [animationName: string]: ElementAnimation;
9564
+ }
9565
+ export interface GetAnimationOptions {
9566
+ /**
9567
+ * The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
9568
+ * available using getAnimation().
9569
+ */
9570
+ dir: string;
9571
+ }
9572
+ /**
9573
+ * Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
9574
+ * for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
9575
+ */
9576
+ export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
9577
+ /** Sets a custom animation for the specified element. */
9578
+ export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
9579
+ /** Gets an element's animation. Falls back to the default if no animation is found. */
9580
+ export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;
9581
+ }
8213
9582
  declare module "components/file/file.component" {
8214
9583
  import { type CSSResultGroup } from 'lit';
8215
9584
  import ZincElement, { type ZincFormControl } from "internal/zinc-element";
@@ -8402,6 +9771,8 @@ declare module "components/file/file.component" {
8402
9771
  * JSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.
8403
9772
  */
8404
9773
  uploadUrl: string;
9774
+ /** The largest each file can be, in megabytes. A bigger file makes the control invalid. 0 for no limit. */
9775
+ maxSize: number;
8405
9776
  private uploading;
8406
9777
  /** Gets the validity state object */
8407
9778
  get validity(): ValidityState;
@@ -8429,7 +9800,9 @@ declare module "components/file/file.component" {
8429
9800
  private handleTransferItems;
8430
9801
  private getFilesFromEntry;
8431
9802
  private handleClick;
9803
+ private handleDropareaKeyDown;
8432
9804
  /** Handles the change event of the native input */
9805
+ private checkSize;
8433
9806
  private handleChange;
8434
9807
  /**
8435
9808
  * Uploads the chosen file to `uploadUrl` and adopts the returned URL as the
@@ -8542,6 +9915,8 @@ declare module "components/checkbox-group/checkbox-group.component" {
8542
9915
  contained: boolean;
8543
9916
  /** Squares off the corners of every contained checkbox in the group, which are rounded by default. */
8544
9917
  square: boolean;
9918
+ /** Centres the text of every contained checkbox in the group. */
9919
+ centered: boolean;
8545
9920
  /**
8546
9921
  * Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from
8547
9922
  * `--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
@@ -8622,6 +9997,12 @@ declare module "components/item/item.component" {
8622
9997
  caption: string;
8623
9998
  description: string;
8624
9999
  stacked: boolean;
10000
+ /** A fact in a grid of headline attributes: a small muted caption above the value, without padding. */
10001
+ fact: boolean;
10002
+ /** A row in a key–value list: a small muted caption beside a right-aligned value, on a compact row. */
10003
+ keyValue: boolean;
10004
+ /** Shows the value in the monospace font, for identifiers and codes. */
10005
+ mono: boolean;
8625
10006
  size: 'small' | 'medium' | 'large';
8626
10007
  editOnHover: boolean;
8627
10008
  helpTooltip: string;
@@ -8732,6 +10113,8 @@ declare module "components/button-menu/button-menu.component" {
8732
10113
  * @since 1.0
8733
10114
  *
8734
10115
  * @slot - The default slot.
10116
+ * @slot prefix - Controls shown just before the inline buttons, such as a segmented toggle. Their width is kept
10117
+ * free when working out which buttons fit.
8735
10118
  *
8736
10119
  */
8737
10120
  export default class ZnButtonMenu extends ZincElement {
@@ -8746,12 +10129,15 @@ declare module "components/button-menu/button-menu.component" {
8746
10129
  private _buttons;
8747
10130
  private _originalButtons;
8748
10131
  private _resizeRafId;
10132
+ private _shownCount;
10133
+ private _shownTotal;
8749
10134
  private readonly resizeObserver;
8750
10135
  protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
8751
10136
  watchContainerMaxWidth(): void;
8752
10137
  connectedCallback(): void;
8753
- calculateVisibleButtons(): void;
10138
+ calculateVisibleButtons(onlyIfChanged?: boolean): void;
8754
10139
  calculateMenuButtons(totalButtons: number, visibleButtons: number, buttons: CustomButtonWidths[]): void;
10140
+ private getPrefixWidth;
8755
10141
  private getButtonLabel;
8756
10142
  render(): import("lit-html").TemplateResult<1>;
8757
10143
  addButton(button: ZnButton): void;
@@ -8831,6 +10217,8 @@ declare module "components/slideout/slideout.component" {
8831
10217
  connectedCallback(): void;
8832
10218
  disconnectedCallback(): void;
8833
10219
  private requestClose;
10220
+ private handleCancel;
10221
+ private handleNativeClose;
8834
10222
  private addOpenListeners;
8835
10223
  private removeOpenListeners;
8836
10224
  /** Shows the slideout. */
@@ -8959,6 +10347,8 @@ declare module "components/page-nav/page-nav.component" {
8959
10347
  navigation: PageNavData;
8960
10348
  breadcrumb: string;
8961
10349
  toggleNavigation(): void;
10350
+ private handleToggleKeyDown;
10351
+ private handleNavigationKeyDown;
8962
10352
  setActiveTab(tabName: string, store: boolean, refresh: boolean, refTab?: string | null): void;
8963
10353
  clickTab(target: HTMLElement, refresh: boolean, close?: boolean): void;
8964
10354
  render(): import("lit-html").TemplateResult<1>;
@@ -9112,6 +10502,8 @@ declare module "components/content-block/content-block.component" {
9112
10502
  private _replaceDebounce;
9113
10503
  connectedCallback(): void;
9114
10504
  disconnectedCallback(): void;
10505
+ private _handleHeaderKeyDown;
10506
+ private _handleReplyKeyDown;
9115
10507
  private _collapseContent;
9116
10508
  private _toggleText;
9117
10509
  private _toggleHtml;
@@ -9161,9 +10553,17 @@ declare module "components/filter-wrapper/filter-wrapper.component" {
9161
10553
  export default class ZnFilterWrapper extends ZincElement {
9162
10554
  static styles: CSSResultGroup;
9163
10555
  button: string;
9164
- private hasSubmitButton;
10556
+ /** Submits the filters when Enter is pressed in a text field. */
10557
+ submitOnEnter: boolean;
10558
+ /** Shown on the submit button while results load. */
10559
+ loadingText: string;
10560
+ private loading;
10561
+ private submitButton;
9165
10562
  handleSubmit: (event: Event) => void;
10563
+ private setLoading;
10564
+ handleKeyDown: (event: KeyboardEvent) => void;
9166
10565
  connectedCallback(): void;
10566
+ disconnectedCallback(): void;
9167
10567
  private renderDefaultButton;
9168
10568
  render(): import("lit-html").TemplateResult<1>;
9169
10569
  }
@@ -9334,6 +10734,7 @@ declare module "components/reveal/reveal.component" {
9334
10734
  disconnectedCallback(): void;
9335
10735
  private _clearHideTimer;
9336
10736
  protected handleToggleReveal(): void;
10737
+ protected handleKeyDown(e: KeyboardEvent): void;
9337
10738
  protected handleMouseEnter(): void;
9338
10739
  protected handleMouseLeave(): void;
9339
10740
  render(): import("lit-html").TemplateResult<1>;
@@ -9665,6 +11066,7 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
9665
11066
  private fenceMarker;
9666
11067
  private closesFence;
9667
11068
  private updateBlocks;
11069
+ private get editable();
9668
11070
  private handleRenderedClick;
9669
11071
  /** Parses a block that is purely an image (with optional caption/align lines). */
9670
11072
  private parseImageBlock;
@@ -9713,6 +11115,9 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
9713
11115
  private commitEdit;
9714
11116
  private handleDraftInput;
9715
11117
  private handleEditKeydown;
11118
+ /** Focuses the rendered block at `index`, clamped to the blocks there are; the add row when there are none. */
11119
+ private focusRenderedBlock;
11120
+ private moveBlock;
9716
11121
  /**
9717
11122
  * The draft to commit when Enter should finish the block — pressed on a trailing blank line or
9718
11123
  * empty list item, outside any container — with that line dropped. Null otherwise.
@@ -10319,10 +11724,151 @@ declare module "components/translation-group/index" {
10319
11724
  }
10320
11725
  }
10321
11726
  }
11727
+ declare module "components/translation-grid/translation-grid.component" {
11728
+ import { type CSSResultGroup } from 'lit';
11729
+ import ZincElement from "internal/zinc-element";
11730
+ export type TranslationStatus = 'source' | 'translated' | 'outdated' | 'missing';
11731
+ export interface TranslationGridLanguage {
11732
+ code: string;
11733
+ label: string;
11734
+ /** The language's status when there are no `fields`. */
11735
+ status?: TranslationStatus;
11736
+ /** Where choosing the language goes, such as its translation form. */
11737
+ href?: string;
11738
+ }
11739
+ export interface TranslationGridCell {
11740
+ status: TranslationStatus;
11741
+ href?: string;
11742
+ }
11743
+ export interface TranslationGridField {
11744
+ key: string;
11745
+ label: string;
11746
+ /** Each language's cell, keyed by language code. */
11747
+ cells: Record<string, TranslationGridCell>;
11748
+ }
11749
+ /**
11750
+ * @summary Shows how far each language's translation has got, with a column per language to choose and enable it,
11751
+ * and optionally a row per translated field.
11752
+ * @documentation https://zinc.style/components/translation-grid
11753
+ * @status experimental
11754
+ * @since 1.0
11755
+ *
11756
+ * @slot - Help text under the legend.
11757
+ * @slot enable-{code} - The control that enables the language with that code, such as a `zn-checkbox` in a form.
11758
+ * The Enable row only shows when at least one is given.
11759
+ *
11760
+ * @csspart base - The component's base wrapper.
11761
+ */
11762
+ export default class ZnTranslationGrid extends ZincElement {
11763
+ static styles: CSSResultGroup;
11764
+ /** The languages, in column order, as a JSON array of `{code, label, status, href}`. */
11765
+ languages: TranslationGridLanguage[];
11766
+ /** A row per translated field, as a JSON array of `{key, label, cells}`; without it there is one Translation row. */
11767
+ fields: TranslationGridField[];
11768
+ /** The code of the language being edited. */
11769
+ selected: string;
11770
+ /** The key of the field being edited, when there are `fields`. */
11771
+ selectedField: string;
11772
+ /** Where the language links open, as a console `data-target`; `self` replaces the content they sit in. */
11773
+ linkTarget: string;
11774
+ /** Names the source in the legend, such as "English changed". */
11775
+ sourceLabel: string;
11776
+ private _statusLabel;
11777
+ private _link;
11778
+ private _cell;
11779
+ private _rows;
11780
+ private _legend;
11781
+ render(): import("lit-html").TemplateResult<1>;
11782
+ }
11783
+ }
11784
+ declare module "components/translation-grid/index" {
11785
+ import ZnTranslationGrid from "components/translation-grid/translation-grid.component";
11786
+ export * from "components/translation-grid/translation-grid.component";
11787
+ export default ZnTranslationGrid;
11788
+ global {
11789
+ interface HTMLElementTagNameMap {
11790
+ 'zn-translation-grid': ZnTranslationGrid;
11791
+ }
11792
+ }
11793
+ }
11794
+ declare module "components/translation-field/translation-field.component" {
11795
+ import { type CSSResultGroup } from 'lit';
11796
+ import ZincElement from "internal/zinc-element";
11797
+ /**
11798
+ * @summary A field's source text beside the control that translates it.
11799
+ * @documentation https://zinc.style/components/translation-field
11800
+ * @status experimental
11801
+ * @since 1.0
11802
+ *
11803
+ * @slot - The control the translation is written in, such as a `zn-input` with the language code as its prefix.
11804
+ * @slot source - The source text, shown read-only.
11805
+ * @slot actions - Actions beside the label.
11806
+ *
11807
+ * @csspart base - The component's base wrapper.
11808
+ * @csspart source - The box holding the source.
11809
+ */
11810
+ export default class ZnTranslationField extends ZincElement {
11811
+ static styles: CSSResultGroup;
11812
+ label: string;
11813
+ /** The source's language code, shown beside it. */
11814
+ sourceCode: string;
11815
+ /** For source text that runs over several lines, such as a message body. */
11816
+ multiline: boolean;
11817
+ /** Lines the source up with a control that has a toolbar above it, such as a compact `zn-editor`. */
11818
+ offset: boolean;
11819
+ render(): import("lit-html").TemplateResult<1>;
11820
+ }
11821
+ }
11822
+ declare module "components/translation-field/index" {
11823
+ import ZnTranslationField from "components/translation-field/translation-field.component";
11824
+ export * from "components/translation-field/translation-field.component";
11825
+ export default ZnTranslationField;
11826
+ global {
11827
+ interface HTMLElementTagNameMap {
11828
+ 'zn-translation-field': ZnTranslationField;
11829
+ }
11830
+ }
11831
+ }
11832
+ declare module "components/translation-fields/translation-fields.component" {
11833
+ import { type CSSResultGroup } from 'lit';
11834
+ import ZincElement from "internal/zinc-element";
11835
+ export type TranslationFieldsLayout = 'split' | 'stacked';
11836
+ /**
11837
+ * @summary Lays out `zn-translation-field`s with their source beside or above the translation, chosen by the viewer.
11838
+ * @documentation https://zinc.style/components/translation-fields
11839
+ * @status experimental
11840
+ * @since 1.0
11841
+ *
11842
+ * @slot - The `zn-translation-field`s.
11843
+ * @slot actions - Actions level with the layout switch.
11844
+ *
11845
+ * @csspart base - The component's base wrapper.
11846
+ */
11847
+ export default class ZnTranslationFields extends ZincElement {
11848
+ static styles: CSSResultGroup;
11849
+ layout: TranslationFieldsLayout;
11850
+ /** Remembers the viewer's layout under this key in `localStorage`; leave empty to forget it. */
11851
+ storeKey: string;
11852
+ connectedCallback(): void;
11853
+ private _choose;
11854
+ render(): import("lit-html").TemplateResult<1>;
11855
+ }
11856
+ }
11857
+ declare module "components/translation-fields/index" {
11858
+ import ZnTranslationFields from "components/translation-fields/translation-fields.component";
11859
+ export * from "components/translation-fields/translation-fields.component";
11860
+ export default ZnTranslationFields;
11861
+ global {
11862
+ interface HTMLElementTagNameMap {
11863
+ 'zn-translation-fields': ZnTranslationFields;
11864
+ }
11865
+ }
11866
+ }
10322
11867
  declare module "components/priority-list/priority-list.component" {
10323
11868
  import { type CSSResultGroup, type PropertyValues } from 'lit';
10324
11869
  import { FormControlController } from "internal/form";
10325
11870
  import ZincElement from "internal/zinc-element";
11871
+ import ZnButton from "components/button/index";
10326
11872
  import ZnIcon from "components/icon/index";
10327
11873
  import type { ZincFormControl } from "internal/zinc-element";
10328
11874
  export interface PriorityItem {
@@ -10337,11 +11883,14 @@ declare module "components/priority-list/priority-list.component" {
10337
11883
  * @status experimental
10338
11884
  * @since 1.0
10339
11885
  *
11886
+ * @dependency zn-button
10340
11887
  * @dependency zn-icon
10341
11888
  *
10342
11889
  * @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that
10343
11890
  * uniquely identifies the item. The component automatically assigns slot names to project each item into the
10344
11891
  * correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).
11892
+ * Use `zn-tile` items for titled rows with their own actions. Set `locked` on an item to pin it where it is.
11893
+ * @slot action-{value} - Controls shown at the end of the item with that `value`.
10345
11894
  * @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.
10346
11895
  * @slot label-tooltip - Used to add text displayed in a tooltip next to the label.
10347
11896
  * @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.
@@ -10368,11 +11917,13 @@ declare module "components/priority-list/priority-list.component" {
10368
11917
  */
10369
11918
  export default class ZnPriorityList extends ZincElement implements ZincFormControl {
10370
11919
  static dependencies: {
11920
+ 'zn-button': typeof ZnButton;
10371
11921
  'zn-icon': typeof ZnIcon;
10372
11922
  };
10373
11923
  static styles: CSSResultGroup;
10374
11924
  protected readonly formControlController: FormControlController;
10375
11925
  private readonly hasSlotController;
11926
+ private readonly reorderController;
10376
11927
  hiddenInputsContainer: HTMLDivElement;
10377
11928
  /**
10378
11929
  * The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`
@@ -10387,6 +11938,8 @@ declare module "components/priority-list/priority-list.component" {
10387
11938
  set value(val: string[]);
10388
11939
  private _value;
10389
11940
  defaultValue: string[];
11941
+ /** The item holding the list's single tab stop. */
11942
+ private _focusKey;
10390
11943
  /** The component's label. Required for proper accessibility. */
10391
11944
  label: string;
10392
11945
  /** Text that appears in a tooltip next to the label. */
@@ -10405,6 +11958,18 @@ declare module "components/priority-list/priority-list.component" {
10405
11958
  required: boolean;
10406
11959
  /** The starting priority number. Defaults to 1. */
10407
11960
  priorityStart: number;
11961
+ /** Draws the items as rows divided edge to edge, for a list filling a flush panel; the label is kept for
11962
+ * screen readers only. */
11963
+ flush: boolean;
11964
+ /** Lets a click or Enter select an item as well as drag it, for a list that doubles as navigation. The click is
11965
+ * passed on to the item, so a `tab` or link on it acts as if clicked. */
11966
+ selectable: boolean;
11967
+ /** The selected item's value. An item marked active by zn-tabs takes precedence, so the list follows its tabs. */
11968
+ selected: string;
11969
+ /** Hides each item's priority number, for lists where the order shows the priority. */
11970
+ hidePriority: boolean;
11971
+ /** Shows move up and move down buttons on each item. */
11972
+ moveButtons: boolean;
10408
11973
  /**
10409
11974
  * When set, the associated form will be submitted with the given action URL whenever items are reordered.
10410
11975
  * If set to an empty string, the form will be submitted using its existing action.
@@ -10416,14 +11981,13 @@ declare module "components/priority-list/priority-list.component" {
10416
11981
  * Any slotted items not listed are appended at the end in DOM order.
10417
11982
  */
10418
11983
  order: string;
10419
- private draggedKey;
10420
- private isDragging;
10421
- private dragOverKey;
10422
11984
  /** Gets the validity state object. */
10423
11985
  get validity(): ValidityState;
10424
11986
  /** Gets the validation message. */
10425
11987
  get validationMessage(): string;
11988
+ private _itemObserver;
10426
11989
  connectedCallback(): void;
11990
+ disconnectedCallback(): void;
10427
11991
  protected firstUpdated(_changedProperties: PropertyValues): void;
10428
11992
  /**
10429
11993
  * Initialize item order from slotted children if no explicit value was provided.
@@ -10448,19 +12012,20 @@ declare module "components/priority-list/priority-list.component" {
10448
12012
  * Syncs hidden inputs so form data includes priority values.
10449
12013
  */
10450
12014
  private _syncHiddenInputs;
10451
- /**
10452
- * Moves an item from one index to another.
10453
- */
10454
- private _moveItem;
10455
- /**
10456
- * Submits the associated form if a `formaction` attribute is set.
10457
- */
10458
- private _submitForm;
10459
- private _handleDragStart;
10460
- private _handleDragEnd;
10461
- private _handleDragOver;
10462
- private _handleDragLeave;
10463
- private _handleDrop;
12015
+ private _item;
12016
+ /** @internal ReorderHost: the items' keys in order. */
12017
+ reorderKeys(): string[];
12018
+ /** @internal ReorderHost: renders the items in a new order. */
12019
+ applyReorder(keys: string[]): void;
12020
+ /** @internal ReorderHost: the row drawn for an item. */
12021
+ reorderRow(key: string): HTMLElement | null;
12022
+ /** @internal ReorderHost: whether an item is pinned where it is. */
12023
+ reorderLocked(key: string): boolean;
12024
+ private _handleStep;
12025
+ private _selectedKey;
12026
+ private _select;
12027
+ private _matchClipCorners;
12028
+ private _handleItemClick;
10464
12029
  private _handleKeyDown;
10465
12030
  private _handleSlotChange;
10466
12031
  /** Checks for validity but does not show a validation message. */
@@ -10567,6 +12132,7 @@ declare module "components/markdown-editor/markdown-editor.component" {
10567
12132
  private handleInput;
10568
12133
  private handleChange;
10569
12134
  private handleViewToggle;
12135
+ private handleKeyDown;
10570
12136
  private handleExpandToggle;
10571
12137
  handleViewModeChange(): Promise<void>;
10572
12138
  handleValueChange(): Promise<void>;
@@ -11007,6 +12573,7 @@ declare module "components/flow-builder/modules/flow-node/flow-node.component" {
11007
12573
  private get nodeSubtitle();
11008
12574
  private _emit;
11009
12575
  private _onBodyPointerDown;
12576
+ private _onBodyKeyDown;
11010
12577
  private _action;
11011
12578
  private _renderPorts;
11012
12579
  render(): import("lit-html").TemplateResult<1>;
@@ -11421,6 +12988,8 @@ declare module "components/flow-builder/flow-builder.component" {
11421
12988
  private _movingNodeId;
11422
12989
  /** The "+" picker popover target (an open output, or a wire to insert into), if open. */
11423
12990
  private _picker;
12991
+ /** Where focus goes back to when the picker or branch editor closes. */
12992
+ private _focusReturn;
11424
12993
  /** The node type currently being dragged from the steps panel, for the canvas drop preview. */
11425
12994
  private _draggingType;
11426
12995
  private _history;
@@ -11468,6 +13037,11 @@ declare module "components/flow-builder/flow-builder.component" {
11468
13037
  */
11469
13038
  private _offerRestoreIfNewer;
11470
13039
  private _onKeyDown;
13040
+ private static _deepActiveElement;
13041
+ private _nodeCard;
13042
+ private _returnFocus;
13043
+ private _closeInspector;
13044
+ private _closeBranchEditor;
11471
13045
  protected willUpdate(changed: PropertyValues): void;
11472
13046
  protected firstUpdated(changed: PropertyValues): void;
11473
13047
  private static _parsePorts;
@@ -12208,6 +13782,7 @@ declare module "components/page-builder/page-builder.component" {
12208
13782
  private _renderSlot;
12209
13783
  /** Types allowed in a container's slots: non-containers, filtered by its accepts list. */
12210
13784
  private _slotTypes;
13785
+ private _focusFirstPickerItem;
12211
13786
  /** The one type-picker template both drop zones and slot cells render. */
12212
13787
  private _renderTypePicker;
12213
13788
  private _renderDropZone;
@@ -12946,6 +14521,9 @@ declare module "components/schedule-builder/schedule-builder.component" {
12946
14521
  /** Picks a sensible slot for a newly added range: the first hour-wide gap in the day. */
12947
14522
  private _nextFreeRange;
12948
14523
  private _handleAddRange;
14524
+ private _openEditor;
14525
+ /** Focuses a day's range chip, clamped to the chips there are; the day's "Add range" button when it has none. */
14526
+ private _focusRangeChip;
12949
14527
  private _handleRemoveRange;
12950
14528
  private _handleRangeEdit;
12951
14529
  private _handleEditorKeyDown;
@@ -13315,6 +14893,270 @@ declare module "components/background/index" {
13315
14893
  }
13316
14894
  }
13317
14895
  }
14896
+ declare module "components/nav-item/nav-item.component" {
14897
+ import { type CSSResultGroup } from 'lit';
14898
+ import ZincElement from "internal/zinc-element";
14899
+ import ZnIcon from "components/icon/index";
14900
+ /**
14901
+ * @summary A selectable row in a `zn-nav-list`, with an optional description and count.
14902
+ * @documentation https://zinc.style/components/nav-list
14903
+ * @status experimental
14904
+ * @since 1.0
14905
+ *
14906
+ * @slot - The item's label.
14907
+ *
14908
+ * @csspart base - The component's base wrapper.
14909
+ * @csspart label - The label, truncated with an ellipsis.
14910
+ * @csspart description - The description shown below the label.
14911
+ * @csspart count - The count shown at the end of the row.
14912
+ * @csspart handle - The drag handle, shown when the list is sortable.
14913
+ */
14914
+ export default class ZnNavItem extends ZincElement {
14915
+ static styles: CSSResultGroup;
14916
+ static dependencies: {
14917
+ 'zn-icon': typeof ZnIcon;
14918
+ };
14919
+ /** A count shown at the end of the row, such as the number of entries in the group. */
14920
+ count: string;
14921
+ /** A line of detail shown below the label. */
14922
+ description: string;
14923
+ private readonly _classObserver;
14924
+ connectedCallback(): void;
14925
+ disconnectedCallback(): void;
14926
+ get selected(): boolean;
14927
+ private _syncSelected;
14928
+ private _handleKeyDown;
14929
+ render(): import("lit-html").TemplateResult<1>;
14930
+ }
14931
+ }
14932
+ declare module "components/nav-item/index" {
14933
+ import ZnNavItem from "components/nav-item/nav-item.component";
14934
+ export * from "components/nav-item/nav-item.component";
14935
+ export default ZnNavItem;
14936
+ global {
14937
+ interface HTMLElementTagNameMap {
14938
+ 'zn-nav-item': ZnNavItem;
14939
+ }
14940
+ }
14941
+ }
14942
+ declare module "components/nav-list/nav-list.component" {
14943
+ import { type CSSResultGroup, type PropertyValues } from 'lit';
14944
+ import { FormControlController } from "internal/form";
14945
+ import ZincElement from "internal/zinc-element";
14946
+ import ZnInput from "components/input/index";
14947
+ import type { ZincFormControl } from "internal/zinc-element";
14948
+ import type ZnNavItem from "components/nav-item/index";
14949
+ /**
14950
+ * @summary The list side of a master–detail layout: a card of selectable groups shown beside the selected group's
14951
+ * contents. Place it in the `left` slot of `<zn-tabs gap>`, which switches the detail panels.
14952
+ * @documentation https://zinc.style/components/nav-list
14953
+ * @status experimental
14954
+ * @since 1.0
14955
+ *
14956
+ * @dependency zn-input
14957
+ *
14958
+ * @slot - `zn-nav-item` elements.
14959
+ * @slot actions - Actions in the card's header, beside the caption.
14960
+ *
14961
+ * @csspart base - The component's base wrapper.
14962
+ * @csspart header - The header holding the caption and actions.
14963
+ * @csspart search - The wrapper around the search input.
14964
+ * @csspart list - The scrolling list of items.
14965
+ * @csspart empty - The message shown when the search matches nothing.
14966
+ *
14967
+ * @cssproperty --zn-nav-list-width - The width of the card beside the detail.
14968
+ * @cssproperty --zn-nav-list-max-height - Caps the card's height; the list scrolls beyond it.
14969
+ *
14970
+ * @event zn-change - Emitted when a sortable list's items have been moved.
14971
+ * @event zn-reorder - Emitted when a sortable list's items have been moved.
14972
+ */
14973
+ export default class ZnNavList extends ZincElement implements ZincFormControl {
14974
+ static styles: CSSResultGroup;
14975
+ static dependencies: {
14976
+ 'zn-input': typeof ZnInput;
14977
+ };
14978
+ protected readonly formControlController: FormControlController;
14979
+ private readonly hasSlotController;
14980
+ private readonly reorderController;
14981
+ /** Shows a search input that filters the items by their label. */
14982
+ searchable: boolean;
14983
+ searchPlaceholder: string;
14984
+ /** Shown when the search matches no items. */
14985
+ emptyLabel: string;
14986
+ /** A heading for the card, shown with the `actions` slot above the items. */
14987
+ caption: string;
14988
+ /** Draws the items as full-width rows split by dividers, marking the selected one with a bar on its edge. */
14989
+ divide: boolean;
14990
+ /** Lets the items be dragged, or moved with Alt+Arrow keys, into a new order. */
14991
+ sortable: boolean;
14992
+ /** Submits the order as `[{key, priority}]` JSON, keyed by each item's `value` (or `tab`), counting from 1. */
14993
+ name: string;
14994
+ /** Associates the list with a form by id. */
14995
+ form: string;
14996
+ disabled: boolean;
14997
+ /**
14998
+ * When set, the form is submitted after each reorder, to this URL or, when empty, the form's own action.
14999
+ */
15000
+ formAction: string;
15001
+ private _query;
15002
+ private readonly _selectionObserver;
15003
+ get validity(): ValidityState;
15004
+ get validationMessage(): string;
15005
+ connectedCallback(): void;
15006
+ disconnectedCallback(): void;
15007
+ private get _items();
15008
+ private get _visibleItems();
15009
+ private _key;
15010
+ private _item;
15011
+ /** The order as `[{key, priority}]` JSON. */
15012
+ get value(): string;
15013
+ /** The order as `{key, priority}` pairs, counting from 1. */
15014
+ getPriorityMap(): {
15015
+ key: string;
15016
+ priority: number;
15017
+ }[];
15018
+ /** @internal ReorderHost: the items' keys in order. */
15019
+ reorderKeys(): string[];
15020
+ /** @internal ReorderHost: puts the items in a new order. */
15021
+ applyReorder(keys: string[]): void;
15022
+ /** @internal ReorderHost: the row drawn for an item. */
15023
+ reorderRow(key: string): ZnNavItem | null;
15024
+ /** @internal ReorderHost: whether an item is pinned where it is. */
15025
+ reorderLocked(key: string): boolean;
15026
+ /** The key of the item an event happened on, when it is one of this list's. */
15027
+ private _eventKey;
15028
+ private _handleSlotChange;
15029
+ private _syncItems;
15030
+ protected updated(changed: PropertyValues): void;
15031
+ /** Rounds a divided list's placeholder into the card corners it moves into while dragging. */
15032
+ private _syncDragCorners;
15033
+ /** Keeps a single tab stop in the list (none when disabled): the selected item when it is visible, otherwise the first. */
15034
+ private _syncTabStops;
15035
+ private _handleSearch;
15036
+ private _handleKeyDown;
15037
+ private _handlePointerDown;
15038
+ checkValidity(): boolean;
15039
+ getForm(): HTMLFormElement | null;
15040
+ reportValidity(): boolean;
15041
+ setCustomValidity(_message?: string): void;
15042
+ render(): import("lit-html").TemplateResult<1>;
15043
+ }
15044
+ }
15045
+ declare module "components/nav-list/index" {
15046
+ import ZnNavList from "components/nav-list/nav-list.component";
15047
+ export * from "components/nav-list/nav-list.component";
15048
+ export default ZnNavList;
15049
+ global {
15050
+ interface HTMLElementTagNameMap {
15051
+ 'zn-nav-list': ZnNavList;
15052
+ }
15053
+ }
15054
+ }
15055
+ declare module "components/avatar-group/avatar-group.component" {
15056
+ import { type CSSResultGroup } from 'lit';
15057
+ import ZincElement from "internal/zinc-element";
15058
+ import ZnTooltip from "components/tooltip/index";
15059
+ /**
15060
+ * @summary Overlapping avatars that show each person's name on hover, collapsing any past `max` into a "+N" count.
15061
+ * @documentation https://zinc.style/components/avatar-group
15062
+ * @status experimental
15063
+ * @since 1.0
15064
+ *
15065
+ * @dependency zn-tooltip
15066
+ *
15067
+ * @slot - `zn-icon` avatars. Each one's tooltip shows its `alt`, or its `src` when it has none.
15068
+ *
15069
+ * @csspart base - The component's base wrapper.
15070
+ * @csspart overflow - The "+N" count standing in for the avatars past `max`.
15071
+ *
15072
+ * @cssproperty --zn-avatar-ring-color - The ring that separates overlapping avatars; defaults to the panel surface.
15073
+ */
15074
+ export default class ZnAvatarGroup extends ZincElement {
15075
+ static styles: CSSResultGroup;
15076
+ static dependencies: {
15077
+ 'zn-tooltip': typeof ZnTooltip;
15078
+ };
15079
+ /** The most avatars to show; the rest are counted in a "+N" avatar whose tooltip lists them. 0 shows them all. */
15080
+ max: number;
15081
+ private _avatars;
15082
+ constructor();
15083
+ connectedCallback(): void;
15084
+ private _syncAvatars;
15085
+ private _name;
15086
+ render(): import("lit-html").TemplateResult<1>;
15087
+ }
15088
+ }
15089
+ declare module "components/avatar-group/index" {
15090
+ import ZnAvatarGroup from "components/avatar-group/avatar-group.component";
15091
+ export * from "components/avatar-group/avatar-group.component";
15092
+ export default ZnAvatarGroup;
15093
+ global {
15094
+ interface HTMLElementTagNameMap {
15095
+ 'zn-avatar-group': ZnAvatarGroup;
15096
+ }
15097
+ }
15098
+ }
15099
+ declare module "components/key-value/key-value.component" {
15100
+ import { type CSSResultGroup, type PropertyValues } from 'lit';
15101
+ import ZincElement, { type ZincFormControl } from "internal/zinc-element";
15102
+ /**
15103
+ * @summary Edits a list of name and value pairs, submitted as a JSON object.
15104
+ * @documentation https://zinc.style/components/key-value
15105
+ * @status experimental
15106
+ * @since 1.0
15107
+ *
15108
+ * @dependency zn-input
15109
+ * @dependency zn-button
15110
+ *
15111
+ * @event zn-change - Emitted when a pair is added, removed or edited.
15112
+ *
15113
+ * @slot label - The label. Alternatively, use the `label` attribute.
15114
+ * @slot help-text - Text under the pairs. Alternatively, use the `help-text` attribute.
15115
+ *
15116
+ * @csspart base - The component's base wrapper.
15117
+ * @csspart row - Each name and value pair.
15118
+ */
15119
+ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
15120
+ static styles: CSSResultGroup;
15121
+ private readonly hasSlotController;
15122
+ private readonly formControlController;
15123
+ name: string;
15124
+ /** The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. */
15125
+ value: string;
15126
+ label: string;
15127
+ helpText: string;
15128
+ keyLabel: string;
15129
+ valueLabel: string;
15130
+ addText: string;
15131
+ /** Passed to each value input, so its slash menu can insert merge fields. */
15132
+ slashItems: string;
15133
+ form: string;
15134
+ disabled: boolean;
15135
+ private _rows;
15136
+ get validity(): ValidityState;
15137
+ get validationMessage(): string;
15138
+ checkValidity(): boolean;
15139
+ getForm(): HTMLFormElement | null;
15140
+ reportValidity(): boolean;
15141
+ setCustomValidity(): void;
15142
+ protected willUpdate(changed: PropertyValues): void;
15143
+ private _parse;
15144
+ private _serialise;
15145
+ private _update;
15146
+ private _edit;
15147
+ render(): import("lit-html").TemplateResult<1>;
15148
+ }
15149
+ }
15150
+ declare module "components/key-value/index" {
15151
+ import ZnKeyValue from "components/key-value/key-value.component";
15152
+ export * from "components/key-value/key-value.component";
15153
+ export default ZnKeyValue;
15154
+ global {
15155
+ interface HTMLElementTagNameMap {
15156
+ 'zn-key-value': ZnKeyValue;
15157
+ }
15158
+ }
15159
+ }
13318
15160
  declare module "utilities/form" {
13319
15161
  export { clearFormStoreValues } from "internal/form";
13320
15162
  }
@@ -13497,6 +15339,20 @@ declare module "events/zn-theme-change" {
13497
15339
  }
13498
15340
  }
13499
15341
  }
15342
+ declare module "events/zn-report-change" {
15343
+ export type ZnReportChangeEvent = CustomEvent<{
15344
+ type: string;
15345
+ groupBy: string;
15346
+ from: string;
15347
+ to: string;
15348
+ filter: string;
15349
+ }>;
15350
+ global {
15351
+ interface GlobalEventHandlersEventMap {
15352
+ 'zn-report-change': ZnReportChangeEvent;
15353
+ }
15354
+ }
15355
+ }
13500
15356
  declare module "events/zn-theme-submit" {
13501
15357
  export type ZnThemeSubmitEvent = CustomEvent<{
13502
15358
  values: {
@@ -13534,11 +15390,17 @@ declare module "events/zn-slash-insert" {
13534
15390
  }
13535
15391
  }
13536
15392
  }
13537
- declare module "events/zn-reposition" {
13538
- export type ZnRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
15393
+ declare module "events/zn-chart-click" {
15394
+ export type ZnChartClickEvent = CustomEvent<{
15395
+ seriesName: string;
15396
+ /** The clicked category, or the data item's name. */
15397
+ name: string;
15398
+ dataIndex: number;
15399
+ value: unknown;
15400
+ }>;
13539
15401
  global {
13540
15402
  interface GlobalEventHandlersEventMap {
13541
- 'zn-reposition': ZnRepositionEvent;
15403
+ 'zn-chart-click': ZnChartClickEvent;
13542
15404
  }
13543
15405
  }
13544
15406
  }
@@ -13563,10 +15425,12 @@ declare module "events/events" {
13563
15425
  export type { ZnPageChangeEvent } from "events/zn-page-change";
13564
15426
  export type { ZnPageSelectionChangeEvent } from "events/zn-page-selection-change";
13565
15427
  export type { ZnThemeChangeEvent } from "events/zn-theme-change";
15428
+ export type { ZnReportChangeEvent } from "events/zn-report-change";
13566
15429
  export type { ZnThemeSubmitEvent } from "events/zn-theme-submit";
13567
15430
  export type { ZnSlashSelectEvent } from "events/zn-slash-select";
13568
15431
  export type { ZnSlashInsertEvent } from "events/zn-slash-insert";
13569
15432
  export type { ZnRepositionEvent } from "events/zn-reposition";
15433
+ export type { ZnChartClickEvent } from "events/zn-chart-click";
13570
15434
  }
13571
15435
  declare module "zinc" {
13572
15436
  export { default as Button } from "components/button/index";
@@ -13583,12 +15447,14 @@ declare module "zinc" {
13583
15447
  export { default as Well } from "components/well/index";
13584
15448
  export { default as CopyButton } from "components/copy-button/index";
13585
15449
  export { default as DataTable } from "components/data-table/index";
15450
+ export { default as ReportTable } from "components/report-table/index";
13586
15451
  export { default as Cols } from "components/cols/index";
13587
15452
  export { default as Confirm } from "components/confirm/index";
13588
15453
  export { default as Dialog } from "components/dialog/index";
13589
15454
  export { default as Dropdown } from "components/dropdown/index";
13590
15455
  export { default as Menu } from "components/menu/index";
13591
15456
  export { default as MenuItem } from "components/menu-item/index";
15457
+ export { default as MenuLabel } from "components/menu-label/index";
13592
15458
  export { default as DefinedLabel } from "components/defined-label/index";
13593
15459
  export { default as EmptyState } from "components/empty-state/index";
13594
15460
  export { default as Note } from "components/note/index";
@@ -13606,6 +15472,8 @@ declare module "zinc" {
13606
15472
  export { default as InlineEdit } from "components/inline-edit/index";
13607
15473
  export { default as Pagination } from "components/pagination/index";
13608
15474
  export { default as VerticalStepper } from "components/vertical-stepper/index";
15475
+ export { default as Diff } from "components/diff/index";
15476
+ export { default as DiffRow } from "components/diff-row/index";
13609
15477
  export { default as Timer } from "components/timer/index";
13610
15478
  export { default as Tabs } from "components/tabs/index";
13611
15479
  export { default as Panel } from "components/panel/index";
@@ -13633,6 +15501,7 @@ declare module "zinc" {
13633
15501
  export { default as Textarea } from "components/textarea/index";
13634
15502
  export { default as Checkbox } from "components/checkbox/index";
13635
15503
  export { default as Datepicker } from "components/datepicker/index";
15504
+ export { default as DateRange } from "components/date-range/index";
13636
15505
  export { default as FormActions } from "components/form-actions/index";
13637
15506
  export { default as FormGroup } from "components/form-group/index";
13638
15507
  export { default as InputGroup } from "components/input-group/index";
@@ -13669,6 +15538,9 @@ declare module "zinc" {
13669
15538
  export { default as KeyContainer } from "components/key-container/index";
13670
15539
  export { default as AnimatedButton } from "components/animated-button/index";
13671
15540
  export { default as TranslationGroup } from "components/translation-group/index";
15541
+ export { default as TranslationGrid } from "components/translation-grid/index";
15542
+ export { default as TranslationField } from "components/translation-field/index";
15543
+ export { default as TranslationFields } from "components/translation-fields/index";
13672
15544
  export { default as OptGroup } from "components/opt-group/index";
13673
15545
  export { default as PriorityList } from "components/priority-list/index";
13674
15546
  export { default as MarkdownEditor } from "components/markdown-editor/index";
@@ -13689,6 +15561,12 @@ declare module "zinc" {
13689
15561
  export { default as Thumbnail } from "components/thumbnail/index";
13690
15562
  export { default as ThumbnailGroup } from "components/thumbnail-group/index";
13691
15563
  export { default as Background } from "components/background/index";
15564
+ export { default as NavList } from "components/nav-list/index";
15565
+ export { default as NavItem } from "components/nav-item/index";
15566
+ export { default as AvatarGroup } from "components/avatar-group/index";
15567
+ export { default as Badge } from "components/badge/index";
15568
+ export { default as ColorPicker } from "components/color-picker/index";
15569
+ export { default as KeyValue } from "components/key-value/index";
13692
15570
  export { default as ZincElement } from "internal/zinc-element";
13693
15571
  export * from "utilities/on";
13694
15572
  export * from "utilities/query";
@@ -13907,3 +15785,14 @@ declare module "events/zn-submit" {
13907
15785
  }
13908
15786
  }
13909
15787
  }
15788
+ declare module "internal/test-drag" {
15789
+ /** The centre of an element. */
15790
+ export function centre(el: Element): {
15791
+ x: number;
15792
+ y: number;
15793
+ };
15794
+ /** Presses on an element and moves far enough to start dragging it. */
15795
+ export function startDrag(el: Element): void;
15796
+ export function dragTo(x: number, y: number): void;
15797
+ export function drop(x: number, y: number): void;
15798
+ }