@k2b/ui 0.26.0 → 0.28.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 (231) hide show
  1. package/README.md +1 -1
  2. package/dist/base.css +147 -2
  3. package/dist/browser/actions/ContextMenu.js +30 -4
  4. package/dist/browser/actions/ContextMenu.js.map +1 -1
  5. package/dist/browser/actions/Dropdown.js +184 -158
  6. package/dist/browser/actions/Dropdown.js.map +1 -1
  7. package/dist/browser/actions/GestureMenu.js +71 -138
  8. package/dist/browser/actions/GestureMenu.js.map +1 -1
  9. package/dist/browser/actions/Toolbar.js +379 -48
  10. package/dist/browser/actions/Toolbar.js.map +1 -1
  11. package/dist/browser/actions/index.js.map +1 -1
  12. package/dist/browser/actions/menu-rows.js +15 -0
  13. package/dist/browser/actions/menu-rows.js.map +1 -0
  14. package/dist/browser/actions/menu-sheet.js +154 -0
  15. package/dist/browser/actions/menu-sheet.js.map +1 -0
  16. package/dist/browser/actions/toolbar-messages.js +20 -0
  17. package/dist/browser/actions/toolbar-messages.js.map +1 -0
  18. package/dist/browser/chart-inspection.js +3 -0
  19. package/dist/browser/chart-inspection.js.map +1 -0
  20. package/dist/browser/chat/ChatComposer.js +1020 -431
  21. package/dist/browser/chat/ChatComposer.js.map +1 -1
  22. package/dist/browser/chat/chat-behavior.js +4 -0
  23. package/dist/browser/chat/chat-behavior.js.map +1 -1
  24. package/dist/browser/chat/chat-messages.js +33 -1
  25. package/dist/browser/chat/chat-messages.js.map +1 -1
  26. package/dist/browser/chat/command-search.js +173 -0
  27. package/dist/browser/chat/command-search.js.map +1 -0
  28. package/dist/browser/chat/composer-document.js +1 -1
  29. package/dist/browser/chat/composer-document.js.map +1 -1
  30. package/dist/browser/chat/index.js +2 -0
  31. package/dist/browser/chat/index.js.map +1 -1
  32. package/dist/browser/chat/reaction-people.js +15 -0
  33. package/dist/browser/chat/reaction-people.js.map +1 -0
  34. package/dist/browser/content/CalendarDayView.js +28 -3
  35. package/dist/browser/content/CalendarDayView.js.map +1 -1
  36. package/dist/browser/content/Chart.js +6 -15
  37. package/dist/browser/content/Chart.js.map +1 -1
  38. package/dist/browser/content/ChartSnapshotView.js +7 -10
  39. package/dist/browser/content/ChartSnapshotView.js.map +1 -1
  40. package/dist/browser/content/MessageRow.js +330 -448
  41. package/dist/browser/content/MessageRow.js.map +1 -1
  42. package/dist/browser/content/ReactionBar.js +419 -0
  43. package/dist/browser/content/ReactionBar.js.map +1 -0
  44. package/dist/browser/content/chart-inspection-core.js +557 -0
  45. package/dist/browser/content/chart-inspection-core.js.map +1 -0
  46. package/dist/browser/content/chart-inspection.js +10 -445
  47. package/dist/browser/content/chart-inspection.js.map +1 -1
  48. package/dist/browser/content/chart-line-gaps.js +1 -1
  49. package/dist/browser/content/chart-line-gaps.js.map +1 -1
  50. package/dist/browser/content/chart-snapshot.js +1 -1
  51. package/dist/browser/content/chart-snapshot.js.map +1 -1
  52. package/dist/browser/content/index.js +1 -0
  53. package/dist/browser/content/index.js.map +1 -1
  54. package/dist/browser/feedback/dialog-core.js +135 -23
  55. package/dist/browser/feedback/dialog-core.js.map +1 -1
  56. package/dist/browser/index.js +1 -0
  57. package/dist/browser/index.js.map +1 -1
  58. package/dist/browser/input-mode.js +40 -0
  59. package/dist/browser/input-mode.js.map +1 -0
  60. package/dist/browser/inputs/Combobox.js +4 -2
  61. package/dist/browser/inputs/Combobox.js.map +1 -1
  62. package/dist/browser/inputs/FileDropTarget.js +24 -9
  63. package/dist/browser/inputs/FileDropTarget.js.map +1 -1
  64. package/dist/browser/inputs/FileInputs.js +2 -2
  65. package/dist/browser/inputs/FileInputs.js.map +1 -1
  66. package/dist/browser/inputs/SelectChip.js +52 -12
  67. package/dist/browser/inputs/SelectChip.js.map +1 -1
  68. package/dist/browser/inputs/emoji/EmojiPicker.js +13 -0
  69. package/dist/browser/inputs/emoji/EmojiPicker.js.map +1 -1
  70. package/dist/browser/inputs/file-drop.js.map +1 -1
  71. package/dist/browser/layout/AppWorkspace.js +708 -515
  72. package/dist/browser/layout/AppWorkspace.js.map +1 -1
  73. package/dist/browser/layout/BottomSheet.js +8 -0
  74. package/dist/browser/layout/BottomSheet.js.map +1 -1
  75. package/dist/browser/layout/DetailPanel.js +283 -197
  76. package/dist/browser/layout/DetailPanel.js.map +1 -1
  77. package/dist/browser/layout/Discussion.js +233 -185
  78. package/dist/browser/layout/Discussion.js.map +1 -1
  79. package/dist/browser/layout/TableOfContents.js +10 -2
  80. package/dist/browser/layout/TableOfContents.js.map +1 -1
  81. package/dist/browser/layout/app-workspace-controller.js +155 -23
  82. package/dist/browser/layout/app-workspace-controller.js.map +1 -1
  83. package/dist/browser/layout/app-workspace-state.js +5 -1
  84. package/dist/browser/layout/app-workspace-state.js.map +1 -1
  85. package/dist/browser/layout/detail-panel-messages.js +35 -0
  86. package/dist/browser/layout/detail-panel-messages.js.map +1 -0
  87. package/dist/browser/layout/index.js +1 -1
  88. package/dist/browser/layout/index.js.map +1 -1
  89. package/dist/browser/surfaces/Avatar.js +50 -20
  90. package/dist/browser/surfaces/Avatar.js.map +1 -1
  91. package/dist/browser/surfaces/AvatarStack.js +406 -0
  92. package/dist/browser/surfaces/AvatarStack.js.map +1 -0
  93. package/dist/browser/surfaces/avatar-messages.js +8 -2
  94. package/dist/browser/surfaces/avatar-messages.js.map +1 -1
  95. package/dist/browser/surfaces/index.js +1 -0
  96. package/dist/browser/surfaces/index.js.map +1 -1
  97. package/dist/ssr/actions/ContextMenu.js +21 -3
  98. package/dist/ssr/actions/ContextMenu.js.map +1 -1
  99. package/dist/ssr/actions/Dropdown.js +140 -72
  100. package/dist/ssr/actions/Dropdown.js.map +1 -1
  101. package/dist/ssr/actions/GestureMenu.js +52 -106
  102. package/dist/ssr/actions/GestureMenu.js.map +1 -1
  103. package/dist/ssr/actions/Toolbar.js +294 -14
  104. package/dist/ssr/actions/Toolbar.js.map +1 -1
  105. package/dist/ssr/actions/index.js.map +1 -1
  106. package/dist/ssr/actions/menu-rows.js +15 -0
  107. package/dist/ssr/actions/menu-rows.js.map +1 -0
  108. package/dist/ssr/actions/menu-sheet.js +138 -0
  109. package/dist/ssr/actions/menu-sheet.js.map +1 -0
  110. package/dist/ssr/actions/toolbar-messages.js +20 -0
  111. package/dist/ssr/actions/toolbar-messages.js.map +1 -0
  112. package/dist/ssr/chart-inspection.js +3 -0
  113. package/dist/ssr/chart-inspection.js.map +1 -0
  114. package/dist/ssr/chat/ChatComposer.js +604 -113
  115. package/dist/ssr/chat/ChatComposer.js.map +1 -1
  116. package/dist/ssr/chat/chat-behavior.js +4 -0
  117. package/dist/ssr/chat/chat-behavior.js.map +1 -1
  118. package/dist/ssr/chat/chat-messages.js +33 -1
  119. package/dist/ssr/chat/chat-messages.js.map +1 -1
  120. package/dist/ssr/chat/command-search.js +173 -0
  121. package/dist/ssr/chat/command-search.js.map +1 -0
  122. package/dist/ssr/chat/composer-document.js +1 -1
  123. package/dist/ssr/chat/composer-document.js.map +1 -1
  124. package/dist/ssr/chat/index.js +2 -0
  125. package/dist/ssr/chat/index.js.map +1 -1
  126. package/dist/ssr/chat/reaction-people.js +15 -0
  127. package/dist/ssr/chat/reaction-people.js.map +1 -0
  128. package/dist/ssr/content/CalendarDayView.js +28 -3
  129. package/dist/ssr/content/CalendarDayView.js.map +1 -1
  130. package/dist/ssr/content/Chart.js +6 -15
  131. package/dist/ssr/content/Chart.js.map +1 -1
  132. package/dist/ssr/content/ChartSnapshotView.js +7 -10
  133. package/dist/ssr/content/ChartSnapshotView.js.map +1 -1
  134. package/dist/ssr/content/MessageRow.js +98 -152
  135. package/dist/ssr/content/MessageRow.js.map +1 -1
  136. package/dist/ssr/content/ReactionBar.js +304 -0
  137. package/dist/ssr/content/ReactionBar.js.map +1 -0
  138. package/dist/ssr/content/chart-inspection-core.js +557 -0
  139. package/dist/ssr/content/chart-inspection-core.js.map +1 -0
  140. package/dist/ssr/content/chart-inspection.js +10 -445
  141. package/dist/ssr/content/chart-inspection.js.map +1 -1
  142. package/dist/ssr/content/chart-line-gaps.js +1 -1
  143. package/dist/ssr/content/chart-line-gaps.js.map +1 -1
  144. package/dist/ssr/content/chart-snapshot.js +1 -1
  145. package/dist/ssr/content/chart-snapshot.js.map +1 -1
  146. package/dist/ssr/content/index.js +1 -0
  147. package/dist/ssr/content/index.js.map +1 -1
  148. package/dist/ssr/feedback/dialog-core.js +135 -23
  149. package/dist/ssr/feedback/dialog-core.js.map +1 -1
  150. package/dist/ssr/index.js +1 -0
  151. package/dist/ssr/index.js.map +1 -1
  152. package/dist/ssr/input-mode.js +40 -0
  153. package/dist/ssr/input-mode.js.map +1 -0
  154. package/dist/ssr/inputs/Combobox.js +4 -2
  155. package/dist/ssr/inputs/Combobox.js.map +1 -1
  156. package/dist/ssr/inputs/FileDropTarget.js +17 -5
  157. package/dist/ssr/inputs/FileDropTarget.js.map +1 -1
  158. package/dist/ssr/inputs/FileInputs.js +2 -2
  159. package/dist/ssr/inputs/FileInputs.js.map +1 -1
  160. package/dist/ssr/inputs/SelectChip.js +44 -11
  161. package/dist/ssr/inputs/SelectChip.js.map +1 -1
  162. package/dist/ssr/inputs/emoji/EmojiPicker.js +12 -0
  163. package/dist/ssr/inputs/emoji/EmojiPicker.js.map +1 -1
  164. package/dist/ssr/inputs/file-drop.js.map +1 -1
  165. package/dist/ssr/layout/AppWorkspace.js +242 -105
  166. package/dist/ssr/layout/AppWorkspace.js.map +1 -1
  167. package/dist/ssr/layout/BottomSheet.js +8 -0
  168. package/dist/ssr/layout/BottomSheet.js.map +1 -1
  169. package/dist/ssr/layout/DetailPanel.js +112 -58
  170. package/dist/ssr/layout/DetailPanel.js.map +1 -1
  171. package/dist/ssr/layout/Discussion.js +63 -36
  172. package/dist/ssr/layout/Discussion.js.map +1 -1
  173. package/dist/ssr/layout/TableOfContents.js +10 -2
  174. package/dist/ssr/layout/TableOfContents.js.map +1 -1
  175. package/dist/ssr/layout/app-workspace-controller.js +155 -23
  176. package/dist/ssr/layout/app-workspace-controller.js.map +1 -1
  177. package/dist/ssr/layout/app-workspace-state.js +5 -1
  178. package/dist/ssr/layout/app-workspace-state.js.map +1 -1
  179. package/dist/ssr/layout/detail-panel-messages.js +35 -0
  180. package/dist/ssr/layout/detail-panel-messages.js.map +1 -0
  181. package/dist/ssr/layout/index.js +1 -1
  182. package/dist/ssr/layout/index.js.map +1 -1
  183. package/dist/ssr/surfaces/Avatar.js +20 -2
  184. package/dist/ssr/surfaces/Avatar.js.map +1 -1
  185. package/dist/ssr/surfaces/AvatarStack.js +286 -0
  186. package/dist/ssr/surfaces/AvatarStack.js.map +1 -0
  187. package/dist/ssr/surfaces/avatar-messages.js +8 -2
  188. package/dist/ssr/surfaces/avatar-messages.js.map +1 -1
  189. package/dist/ssr/surfaces/index.js +1 -0
  190. package/dist/ssr/surfaces/index.js.map +1 -1
  191. package/dist/styles.css +1 -1
  192. package/dist/types/actions/ContextMenu.d.ts +8 -0
  193. package/dist/types/actions/Dropdown.d.ts +12 -5
  194. package/dist/types/actions/GestureMenu.d.ts +6 -4
  195. package/dist/types/actions/Toolbar.d.ts +20 -0
  196. package/dist/types/actions/index.d.ts +1 -1
  197. package/dist/types/actions/menu-rows.d.ts +5 -0
  198. package/dist/types/actions/menu-sheet.d.ts +22 -0
  199. package/dist/types/actions/toolbar-messages.d.ts +8 -0
  200. package/dist/types/chart-inspection.d.ts +2 -0
  201. package/dist/types/chat/ChatComposer.d.ts +51 -2
  202. package/dist/types/chat/chat-behavior.d.ts +4 -0
  203. package/dist/types/chat/chat-messages.d.ts +17 -2
  204. package/dist/types/chat/command-search.d.ts +41 -0
  205. package/dist/types/chat/index.d.ts +3 -1
  206. package/dist/types/chat/reaction-people.d.ts +9 -0
  207. package/dist/types/content/Chart.d.ts +2 -2
  208. package/dist/types/content/MessageRow.d.ts +3 -10
  209. package/dist/types/content/ReactionBar.d.ts +32 -0
  210. package/dist/types/content/chart-inspection-core.d.ts +61 -0
  211. package/dist/types/content/chart-inspection.d.ts +4 -20
  212. package/dist/types/content/chart-snapshot.d.ts +1 -1
  213. package/dist/types/content/index.d.ts +2 -1
  214. package/dist/types/feedback/dialog-core.d.ts +16 -1
  215. package/dist/types/index.d.ts +1 -0
  216. package/dist/types/input-mode.d.ts +7 -0
  217. package/dist/types/inputs/FileDropTarget.d.ts +6 -3
  218. package/dist/types/inputs/SelectChip.d.ts +6 -0
  219. package/dist/types/inputs/file-drop.d.ts +2 -0
  220. package/dist/types/layout/AppWorkspace.d.ts +13 -1
  221. package/dist/types/layout/BottomSheet.d.ts +8 -0
  222. package/dist/types/layout/DetailPanel.d.ts +11 -0
  223. package/dist/types/layout/Discussion.d.ts +8 -0
  224. package/dist/types/layout/TableOfContents.d.ts +2 -0
  225. package/dist/types/layout/detail-panel-messages.d.ts +15 -0
  226. package/dist/types/layout/index.d.ts +1 -1
  227. package/dist/types/surfaces/Avatar.d.ts +12 -0
  228. package/dist/types/surfaces/AvatarStack.d.ts +41 -0
  229. package/dist/types/surfaces/avatar-messages.d.ts +3 -0
  230. package/dist/types/surfaces/index.d.ts +3 -1
  231. package/package.json +9 -4
@@ -23,6 +23,14 @@ export const bottomSheetOptions = {
23
23
  contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport",
24
24
  initialFocus: sheetInitialFocus
25
25
  };
26
+
27
+ /** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep
28
+ * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first
29
+ * frame is already right and a rotation or resize switches it in place, without a remount. */
30
+ export const bottomSheetAdaptiveOptions = {
31
+ ...bottomSheetOptions,
32
+ panelClassName: `${bottomSheetOptions.panelClassName} is-adaptive`
33
+ };
26
34
  function BottomSheetRoot(props) {
27
35
  const messages = useUiMessages();
28
36
  let pointer;
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet, otherwise to the\n * dialog element itself. Native `showModal()` focuses the first focusable\n * descendant, which is the drag handle; iOS shows a ring for that programmatic\n * focus, so the sheet moves it to the ring-less dialog before the next paint. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement => {\n const input = dialog.lastElementChild?.querySelector<HTMLElement>(\n \"input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])\",\n );\n if (input) return input;\n dialog.tabIndex = -1;\n return dialog;\n};\n\nexport const bottomSheetOptions = {\n panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\n initialFocus: sheetInitialFocus,\n} satisfies OpenDialogOptions;\n\nexport type BottomSheetProps = {\n children: JSX.Element;\n /** Pass dialogCore's render context requestDismiss, never the completion callback. */\n onDismiss: () => void | Promise<void>;\n dismissDisabled?: boolean;\n dismissLabel?: string;\n handle?: boolean;\n};\n\nfunction BottomSheetRoot(props: BottomSheetProps) {\n const messages = useUiMessages();\n let pointer: { id: number; y: number; releaseTextSelection: () => void } | undefined;\n let suppressClick = false;\n const dismiss = () => {\n if (!props.dismissDisabled) void props.onDismiss();\n };\n return (\n <PanelDialog>\n <Show when={props.handle !== false}>\n <button\n type=\"button\"\n class=\"k2b-bottom-sheet__handle\"\n aria-label={props.dismissLabel ?? messages().close}\n disabled={props.dismissDisabled}\n onPointerDown={(event) => {\n if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;\n suppressClick = false;\n pointer = { id: event.pointerId, y: event.clientY, releaseTextSelection: suppressTextSelection(event.pointerId) };\n event.currentTarget.setPointerCapture(event.pointerId);\n }}\n onPointerUp={(event) => {\n if (pointer?.id !== event.pointerId) return;\n const distance = event.clientY - pointer.y;\n pointer.releaseTextSelection();\n pointer = undefined;\n // A drag must not turn into a second dismiss request through click.\n suppressClick = Math.abs(distance) > 8;\n if (distance > 60) dismiss();\n }}\n onPointerCancel={() => {\n pointer?.releaseTextSelection();\n pointer = undefined;\n suppressClick = true;\n }}\n onLostPointerCapture={() => {\n if (pointer) {\n pointer.releaseTextSelection();\n pointer = undefined;\n suppressClick = true;\n }\n }}\n onClick={(event) => {\n if (event.detail !== 0 && suppressClick) {\n suppressClick = false;\n return;\n }\n dismiss();\n }}\n >\n <span aria-hidden=\"true\" />\n </button>\n </Show>\n {props.children}\n </PanelDialog>\n );\n}\n\n/** Bottom-edge presentation; dialogCore continues to own all modal state. */\nconst BottomSheet = Object.assign(BottomSheetRoot, {\n Header: PanelDialog.Header,\n Body: PanelDialog.Body,\n Footer: PanelDialog.Footer,\n Section: PanelDialog.Section,\n Tabs: PanelDialog.Tabs,\n});\nexport default BottomSheet;\n"],"mappings":";;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AAEzC,SAAS,qBAAqB,QAAQ,4BAA4B;AAClE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,OAAO,WAAW,MAAM,eAAe;;AAEvC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAI,MAAyB,IAAkB;EACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAClD,6JACF,CAAC;EACD,IAAI,KAAK,EAAE,OAAO,KAAK;EACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;EACpB,OAAO,MAAM;AACf,CAAC;AAED,OAAO,MAAM,kBAAkB,GAAG;EAChC,cAAc,EAAE,mCAAmC;EACnD,gBAAgB,EAAE,qDAAqD;EACvE,YAAY,EAAE;AAChB,CAA6B;AAW7B,SAAS,eAAe,CAAC,KAAuB,EAAE;EAChD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,IAAI,OAAgF;EACpF,IAAI,aAAa,GAAG,KAAK;EACzB,MAAM,OAAO,GAAG,MAAM;IACpB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;EACpD,CAAC;EACD,yBACG,WAAW;IAAA;MAAA,0BACT,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM,KAAK,KAAK;QAAA;QAAA;UAAA,2DAIlB,KAAK,CAAC,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,4CACxC,KAAK,CAAC,eAAe;QAAA;MAAA,IAuClC,KAAK,CAAC,QAAQ;IAAA;EAAA;AAGrB;;AAEA;AACA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;EACjD,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,IAAI,EAAE,WAAW,CAAC,IAAI;EACtB,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,OAAO,EAAE,WAAW,CAAC,OAAO;EAC5B,IAAI,EAAE,WAAW,CAAC;AACpB,CAAC,CAAC;AACF,eAAe,WAAW","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet, otherwise to the\n * dialog element itself. Native `showModal()` focuses the first focusable\n * descendant, which is the drag handle; iOS shows a ring for that programmatic\n * focus, so the sheet moves it to the ring-less dialog before the next paint. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement => {\n const input = dialog.lastElementChild?.querySelector<HTMLElement>(\n \"input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])\",\n );\n if (input) return input;\n dialog.tabIndex = -1;\n return dialog;\n};\n\nexport const bottomSheetOptions = {\n panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\n initialFocus: sheetInitialFocus,\n} satisfies OpenDialogOptions;\n\n/** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep\n * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first\n * frame is already right and a rotation or resize switches it in place, without a remount. */\nexport const bottomSheetAdaptiveOptions = {\n ...bottomSheetOptions,\n panelClassName: `${bottomSheetOptions.panelClassName} is-adaptive`,\n} satisfies OpenDialogOptions;\n\nexport type BottomSheetProps = {\n children: JSX.Element;\n /** Pass dialogCore's render context requestDismiss, never the completion callback. */\n onDismiss: () => void | Promise<void>;\n dismissDisabled?: boolean;\n dismissLabel?: string;\n handle?: boolean;\n};\n\nfunction BottomSheetRoot(props: BottomSheetProps) {\n const messages = useUiMessages();\n let pointer: { id: number; y: number; releaseTextSelection: () => void } | undefined;\n let suppressClick = false;\n const dismiss = () => {\n if (!props.dismissDisabled) void props.onDismiss();\n };\n return (\n <PanelDialog>\n <Show when={props.handle !== false}>\n <button\n type=\"button\"\n class=\"k2b-bottom-sheet__handle\"\n aria-label={props.dismissLabel ?? messages().close}\n disabled={props.dismissDisabled}\n onPointerDown={(event) => {\n if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;\n suppressClick = false;\n pointer = { id: event.pointerId, y: event.clientY, releaseTextSelection: suppressTextSelection(event.pointerId) };\n event.currentTarget.setPointerCapture(event.pointerId);\n }}\n onPointerUp={(event) => {\n if (pointer?.id !== event.pointerId) return;\n const distance = event.clientY - pointer.y;\n pointer.releaseTextSelection();\n pointer = undefined;\n // A drag must not turn into a second dismiss request through click.\n suppressClick = Math.abs(distance) > 8;\n if (distance > 60) dismiss();\n }}\n onPointerCancel={() => {\n pointer?.releaseTextSelection();\n pointer = undefined;\n suppressClick = true;\n }}\n onLostPointerCapture={() => {\n if (pointer) {\n pointer.releaseTextSelection();\n pointer = undefined;\n suppressClick = true;\n }\n }}\n onClick={(event) => {\n if (event.detail !== 0 && suppressClick) {\n suppressClick = false;\n return;\n }\n dismiss();\n }}\n >\n <span aria-hidden=\"true\" />\n </button>\n </Show>\n {props.children}\n </PanelDialog>\n );\n}\n\n/** Bottom-edge presentation; dialogCore continues to own all modal state. */\nconst BottomSheet = Object.assign(BottomSheetRoot, {\n Header: PanelDialog.Header,\n Body: PanelDialog.Body,\n Footer: PanelDialog.Footer,\n Section: PanelDialog.Section,\n Tabs: PanelDialog.Tabs,\n});\nexport default BottomSheet;\n"],"mappings":";;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AAEzC,SAAS,qBAAqB,QAAQ,4BAA4B;AAClE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,OAAO,WAAW,MAAM,eAAe;;AAEvC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAI,MAAyB,IAAkB;EACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAClD,6JACF,CAAC;EACD,IAAI,KAAK,EAAE,OAAO,KAAK;EACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;EACpB,OAAO,MAAM;AACf,CAAC;AAED,OAAO,MAAM,kBAAkB,GAAG;EAChC,cAAc,EAAE,mCAAmC;EACnD,gBAAgB,EAAE,qDAAqD;EACvE,YAAY,EAAE;AAChB,CAA6B;;AAE7B;AACA;AACA;AACA,OAAO,MAAM,0BAA0B,GAAG;EACxC,GAAG,kBAAkB;EACrB,cAAc,EAAE,GAAG,kBAAkB,CAAC,cAAc;AACtD,CAA6B;AAW7B,SAAS,eAAe,CAAC,KAAuB,EAAE;EAChD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,IAAI,OAAgF;EACpF,IAAI,aAAa,GAAG,KAAK;EACzB,MAAM,OAAO,GAAG,MAAM;IACpB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;EACpD,CAAC;EACD,yBACG,WAAW;IAAA;MAAA,0BACT,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM,KAAK,KAAK;QAAA;QAAA;UAAA,2DAIlB,KAAK,CAAC,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,4CACxC,KAAK,CAAC,eAAe;QAAA;MAAA,IAuClC,KAAK,CAAC,QAAQ;IAAA;EAAA;AAGrB;;AAEA;AACA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;EACjD,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,IAAI,EAAE,WAAW,CAAC,IAAI;EACtB,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,OAAO,EAAE,WAAW,CAAC,OAAO;EAC5B,IAAI,EAAE,WAAW,CAAC;AACpB,CAAC,CAAC;AACF,eAAe,WAAW","ignoreList":[]}
@@ -10,40 +10,46 @@ var _tmpl$ = ["<div class=\"k2b-detail-panel__header-leading\">", "</div>"],
10
10
  _tmpl$4 = ["<div class=\"k2b-detail-panel__supporting\">", "", "</div>"],
11
11
  _tmpl$5 = ["<div class=\"k2b-detail-panel__actions\">", "</div>"],
12
12
  _tmpl$6 = ["<div class=\"k2b-detail-panel__primary-actions\">", "</div>"],
13
- _tmpl$7 = ["<header", "><div class=\"k2b-detail-panel__header-main\">", "", "<div class=\"k2b-detail-panel__heading\"><h2>", "</h2>", "</div>", "</div>", "</header>"],
13
+ _tmpl$7 = ["<header", "><div class=\"k2b-detail-panel__header-main\"", ">", "", "<div class=\"k2b-detail-panel__heading\"><h2>", "</h2>", "</div>", "</div>", "</header>"],
14
14
  _tmpl$8 = ["<span class=\"k2b-detail-panel__header-icon\" aria-hidden=\"true\"><i", "></i></span>"],
15
15
  _tmpl$9 = ["<div", ">", "</div>"],
16
16
  _tmpl$0 = ["<div class=\"k2b-detail-panel__summary-actions\">", "</div>"],
17
17
  _tmpl$1 = ["<section", "><header class=\"k2b-detail-panel__summary-header\"><h3", ">", "</h3>", "</header><div class=\"k2b-detail-panel__summary-body\">", "</div></section>"],
18
18
  _tmpl$10 = ["<div", " role=\"group\"", ">", "</div>"],
19
19
  _tmpl$11 = ["<span class=\"k2b-detail-panel__section-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
20
- _tmpl$12 = ["<span class=\"k2b-detail-panel__action-leading\">", "</span>"],
21
- _tmpl$13 = ["<span class=\"k2b-detail-panel__action-description\">", "</span>"],
22
- _tmpl$14 = ["<span class=\"k2b-detail-panel__action-copy\"><span class=\"k2b-detail-panel__action-title\">", "</span>", "</span>"],
23
- _tmpl$15 = ["<span class=\"k2b-detail-panel__action-trailing\">", "</span>"],
24
- _tmpl$16 = "<i class=\"ti ti-dots\" aria-hidden=\"true\"></i>",
25
- _tmpl$17 = ["<div class=\"k2b-detail-panel__action-row\">", "", "", "</div>"],
26
- _tmpl$18 = ["<i", " aria-hidden=\"true\"></i>"],
27
- _tmpl$19 = ["<span class=\"k2b-detail-panel__section-description\">", "</span>"],
28
- _tmpl$20 = ["<span class=\"k2b-detail-panel__section-copy\"><span id=\"", "\" class=\"k2b-detail-panel__section-title\">", "</span>", "</span>"],
29
- _tmpl$21 = ["<span class=\"k2b-detail-panel__section-meta\">", "</span>"],
30
- _tmpl$22 = "<span class=\"k2b-detail-panel__section-toggle\" aria-hidden=\"true\"><i class=\"ti ti-chevron-down\"></i></span>",
31
- _tmpl$23 = ["<p class=\"k2b-detail-panel__section-description\">", "</p>"],
32
- _tmpl$24 = ["<div class=\"k2b-detail-panel__section-meta\">", "</div>"],
33
- _tmpl$25 = "<i class=\"ti ti-chevron-up\" aria-hidden=\"true\"></i>",
34
- _tmpl$26 = ["<section", "><div", ">", "</div><div", "><header class=\"k2b-detail-panel__section-header\">", "<div class=\"k2b-detail-panel__section-copy\"><h3", ">", "</h3>", "</div>", "", "</header></div><div", "", " class=\"k2b-detail-panel__section-body\">", "</div></section>"],
35
- _tmpl$27 = ["<div class=\"k2b-detail-panel__section-actions\">", "</div>"],
36
- _tmpl$28 = ["<div class=\"k2b-detail-panel__section-body\">", "</div>"],
37
- _tmpl$29 = ["<section", "><header class=\"k2b-detail-panel__section-header\">", "<div class=\"k2b-detail-panel__section-copy\"><h3", ">", "</h3>", "</div>", "", "</header>", "</section>"];
20
+ _tmpl$12 = ["<span class=\"k2b-count-chip\">", "</span>"],
21
+ _tmpl$13 = ["<span class=\"k2b-detail-panel__none\">", "</span>"],
22
+ _tmpl$14 = ["<span class=\"k2b-detail-panel__section-meta\">", "</span>"],
23
+ _tmpl$15 = ["<span class=\"k2b-detail-panel__action-leading\">", "</span>"],
24
+ _tmpl$16 = ["<span class=\"k2b-detail-panel__action-description\">", "</span>"],
25
+ _tmpl$17 = ["<span class=\"k2b-detail-panel__action-copy\"><span class=\"k2b-detail-panel__action-title\">", "</span>", "</span>"],
26
+ _tmpl$18 = ["<span class=\"k2b-detail-panel__action-trailing\">", "</span>"],
27
+ _tmpl$19 = "<i class=\"ti ti-dots\" aria-hidden=\"true\"></i>",
28
+ _tmpl$20 = ["<div class=\"k2b-detail-panel__action-row\">", "", "", "</div>"],
29
+ _tmpl$21 = ["<i", " aria-hidden=\"true\"></i>"],
30
+ _tmpl$22 = ["<span class=\"k2b-detail-panel__section-description\">", "</span>"],
31
+ _tmpl$23 = ["<span class=\"k2b-detail-panel__section-copy\"><span class=\"k2b-detail-panel__section-heading\"><span id=\"", "\" class=\"k2b-detail-panel__section-title\">", "</span>", "</span>", "</span>"],
32
+ _tmpl$24 = "<span class=\"k2b-detail-panel__section-toggle\" aria-hidden=\"true\"><i class=\"ti ti-chevron-down\"></i></span>",
33
+ _tmpl$25 = ["<p class=\"k2b-detail-panel__section-description\">", "</p>"],
34
+ _tmpl$26 = "<i class=\"ti ti-chevron-up\" aria-hidden=\"true\"></i>",
35
+ _tmpl$27 = ["<section", "><div", ">", "</div><div", "><header class=\"k2b-detail-panel__section-header\">", "<div class=\"k2b-detail-panel__section-copy\"><div class=\"k2b-detail-panel__section-heading\"><h3", ">", "</h3>", "</div>", "</div>", "</header></div><div", "", " class=\"k2b-detail-panel__section-body\">", "</div></section>"],
36
+ _tmpl$28 = ["<div class=\"k2b-detail-panel__section-actions\">", "</div>"],
37
+ _tmpl$29 = ["<div class=\"k2b-detail-panel__section-body\">", "</div>"],
38
+ _tmpl$30 = ["<section", "><header class=\"k2b-detail-panel__section-header\">", "<div class=\"k2b-detail-panel__section-copy\"><div class=\"k2b-detail-panel__section-heading\"><h3", ">", "</h3>", "</div>", "</div>", "</header>", "</section>"];
38
39
  import { children, createEffect, createSignal, createUniqueId, Show, splitProps } from "solid-js";
39
40
  import { Button, ButtonLink, IconButton } from "../actions/Button";
40
41
  import { Dropdown } from "../actions/Dropdown";
42
+ import { useDetailPanelMessages } from "./detail-panel-messages";
41
43
  import { createScrollFade } from "./scroll-fade";
42
44
 
43
45
  /** One direct secondary command, rendered as a sibling icon button at the end of the row. */
44
46
 
45
47
  const classNames = (base, extra) => extra ? `${base} ${extra}` : base;
46
- const DetailPanelHeader = props => _$ssr(_tmpl$7, _$ssrAttribute("class", _$escape(classNames("k2b-detail-panel__header", props.class), true), false), _$escape(_$createComponent(Show, {
48
+ const showTruncatedTitle = event => {
49
+ const heading = event.currentTarget;
50
+ if (heading.scrollHeight > heading.clientHeight + 1) heading.title = heading.textContent ?? "";else heading.removeAttribute("title");
51
+ };
52
+ const DetailPanelHeader = props => _$ssr(_tmpl$7, _$ssrAttribute("class", _$escape(classNames("k2b-detail-panel__header", props.class), true), false), _$ssrAttribute("data-identity", props.icon || props.leading ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
47
53
  get when() {
48
54
  return props.icon;
49
55
  },
@@ -114,30 +120,60 @@ const DetailPanelSectionIcon = props => _$createComponent(Show, {
114
120
  },
115
121
  children: icon => _$ssr(_tmpl$11, _$ssrAttribute("data-tone", _$escape(props.tone ?? "neutral", true), false), _$ssrAttribute("class", _$escape(icon(), true), false))
116
122
  });
117
- const DetailPanelActionContent = props => [_$createComponent(Show, {
123
+
124
+ /** A count chip, or "None yet" for zero; shared by sections and discussions. */
125
+ export const DetailPanelCount = props => {
126
+ const messages = useDetailPanelMessages();
127
+ return _$createComponent(Show, {
128
+ get when() {
129
+ return props.count > 0;
130
+ },
131
+ get fallback() {
132
+ return _$ssr(_tmpl$13, _$escape(messages().noneYet));
133
+ },
134
+ get children() {
135
+ return _$ssr(_tmpl$12, _$escape(props.count));
136
+ }
137
+ });
138
+ };
139
+
140
+ /** Title, then its count and state right after it, so every section reads the same way. */
141
+ const SectionTitleMeta = props => [_$createComponent(Show, {
118
142
  get when() {
119
- return props.leading;
143
+ return props.count !== undefined;
120
144
  },
121
145
  get children() {
122
- return _$ssr(_tmpl$12, _$escape(props.leading));
146
+ return _$createComponent(DetailPanelCount, {
147
+ get count() {
148
+ return props.count ?? 0;
149
+ }
150
+ });
123
151
  }
124
- }), _$ssr(_tmpl$14, _$escape(props.title), _$escape(_$createComponent(Show, {
152
+ }), _$createComponent(Show, {
153
+ get when() {
154
+ return props.meta;
155
+ },
156
+ get children() {
157
+ return _$ssr(_tmpl$14, _$escape(props.meta));
158
+ }
159
+ })];
160
+ const DetailPanelActionContent = props => [_$ssr(_tmpl$15, _$escape(props.leading)), _$ssr(_tmpl$17, _$escape(props.title), _$escape(_$createComponent(Show, {
125
161
  get when() {
126
162
  return props.description;
127
163
  },
128
164
  get children() {
129
- return _$ssr(_tmpl$13, _$escape(props.description));
165
+ return _$ssr(_tmpl$16, _$escape(props.description));
130
166
  }
131
167
  }))), _$createComponent(Show, {
132
168
  get when() {
133
169
  return props.trailing;
134
170
  },
135
171
  get children() {
136
- return _$ssr(_tmpl$15, _$escape(props.trailing));
172
+ return _$ssr(_tmpl$18, _$escape(props.trailing));
137
173
  }
138
174
  })];
139
175
  const DetailPanelAction = props => {
140
- const [local, rest] = splitProps(props, ["class", "description", "href", "leading", "menuItems", "menuLabel", "secondaryAction", "title", "trailing"]);
176
+ const [local, rest] = splitProps(props, ["class", "current", "description", "href", "leading", "menuItems", "menuLabel", "secondaryAction", "title", "trailing", "wrap"]);
141
177
  const className = classNames("k2b-detail-panel__action", local.class);
142
178
  const content = () => _$createComponent(DetailPanelActionContent, {
143
179
  get title() {
@@ -160,6 +196,15 @@ const DetailPanelAction = props => {
160
196
  get fallback() {
161
197
  return _$createComponent(Button, _$mergeProps(rest, {
162
198
  "class": className,
199
+ get ["aria-current"]() {
200
+ return local.current ? "true" : undefined;
201
+ },
202
+ get ["data-current"]() {
203
+ return local.current ? "true" : undefined;
204
+ },
205
+ get ["data-wrap"]() {
206
+ return local.wrap ? "true" : undefined;
207
+ },
163
208
  variant: "ghost",
164
209
  size: "sm",
165
210
  get children() {
@@ -173,6 +218,15 @@ const DetailPanelAction = props => {
173
218
  return local.href;
174
219
  },
175
220
  "class": className,
221
+ get ["aria-current"]() {
222
+ return local.current ? "location" : undefined;
223
+ },
224
+ get ["data-current"]() {
225
+ return local.current ? "true" : undefined;
226
+ },
227
+ get ["data-wrap"]() {
228
+ return local.wrap ? "true" : undefined;
229
+ },
176
230
  variant: "ghost",
177
231
  size: "sm",
178
232
  get children() {
@@ -189,7 +243,7 @@ const DetailPanelAction = props => {
189
243
  return action();
190
244
  },
191
245
  get children() {
192
- return _$ssr(_tmpl$17, _$escape(action()), _$escape(_$createComponent(Show, {
246
+ return _$ssr(_tmpl$20, _$escape(action()), _$escape(_$createComponent(Show, {
193
247
  get when() {
194
248
  return local.secondaryAction;
195
249
  },
@@ -205,7 +259,7 @@ const DetailPanelAction = props => {
205
259
  },
206
260
  onClick: () => secondary().onClick(),
207
261
  get children() {
208
- return _$ssr(_tmpl$18, _$ssrAttribute("class", _$escape(secondary().icon, true), false));
262
+ return _$ssr(_tmpl$21, _$ssrAttribute("class", _$escape(secondary().icon, true), false));
209
263
  }
210
264
  })
211
265
  })), _$escape(_$createComponent(Show, {
@@ -232,7 +286,7 @@ const DetailPanelAction = props => {
232
286
  },
233
287
  "class": "k2b-detail-panel__action-menu-trigger",
234
288
  get children() {
235
- return _$ssr(_tmpl$16);
289
+ return _$ssr(_tmpl$19);
236
290
  }
237
291
  });
238
292
  }
@@ -274,45 +328,45 @@ const DetailPanelSection = props => {
274
328
  return props.collapsible;
275
329
  },
276
330
  get fallback() {
277
- return _$ssr(_tmpl$29, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("aria-labelledby", _$escape(headingId, true), false), _$escape(_$createComponent(DetailPanelSectionIcon, {
331
+ return _$ssr(_tmpl$30, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("aria-labelledby", _$escape(headingId, true), false) + _$ssrAttribute("data-icon", props.icon ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(DetailPanelSectionIcon, {
278
332
  get icon() {
279
333
  return props.icon;
280
334
  },
281
335
  get tone() {
282
336
  return props.tone;
283
337
  }
284
- })), _$ssrAttribute("id", _$escape(headingId, true), false), _$escape(props.title), _$escape(_$createComponent(Show, {
285
- get when() {
286
- return props.description;
338
+ })), _$ssrAttribute("id", _$escape(headingId, true), false), _$escape(props.title), _$escape(_$createComponent(SectionTitleMeta, {
339
+ get count() {
340
+ return props.count;
287
341
  },
288
- get children() {
289
- return _$ssr(_tmpl$23, _$escape(props.description));
342
+ get meta() {
343
+ return props.meta;
290
344
  }
291
345
  })), _$escape(_$createComponent(Show, {
292
346
  get when() {
293
- return props.meta;
347
+ return props.description;
294
348
  },
295
349
  get children() {
296
- return _$ssr(_tmpl$24, _$escape(props.meta));
350
+ return _$ssr(_tmpl$25, _$escape(props.description));
297
351
  }
298
352
  })), _$escape(_$createComponent(Show, {
299
353
  get when() {
300
354
  return props.actions;
301
355
  },
302
356
  get children() {
303
- return _$ssr(_tmpl$27, _$escape(props.actions));
357
+ return _$ssr(_tmpl$28, _$escape(props.actions));
304
358
  }
305
359
  })), _$escape(_$createComponent(Show, {
306
360
  get when() {
307
361
  return resolved();
308
362
  },
309
363
  get children() {
310
- return _$ssr(_tmpl$28, _$escape(resolved()));
364
+ return _$ssr(_tmpl$29, _$escape(resolved()));
311
365
  }
312
366
  })));
313
367
  },
314
368
  get children() {
315
- return _$ssr(_tmpl$26, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("aria-labelledby", open() ? _$escape(headingId, true) : `${_$escape(headingId, true)}-closed`, false) + _$ssrAttribute("data-open", _$escape(open(), true), false), _$ssrAttribute("hidden", open(), true), _$escape(_$createComponent(Button, {
369
+ return _$ssr(_tmpl$27, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("aria-labelledby", open() ? _$escape(headingId, true) : `${_$escape(headingId, true)}-closed`, false) + _$ssrAttribute("data-open", _$escape(open(), true), false) + _$ssrAttribute("data-icon", props.icon ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", open(), true), _$escape(_$createComponent(Button, {
316
370
  variant: "ghost",
317
371
  "class": "k2b-detail-panel__section-summary",
318
372
  get disabled() {
@@ -329,21 +383,21 @@ const DetailPanelSection = props => {
329
383
  get tone() {
330
384
  return props.tone;
331
385
  }
332
- }), _$ssr(_tmpl$20, `${_$escape(headingId, true)}-closed`, _$escape(props.title), _$escape(_$createComponent(Show, {
333
- get when() {
334
- return props.description;
386
+ }), _$ssr(_tmpl$23, `${_$escape(headingId, true)}-closed`, _$escape(props.title), _$escape(_$createComponent(SectionTitleMeta, {
387
+ get count() {
388
+ return props.count;
335
389
  },
336
- get children() {
337
- return _$ssr(_tmpl$19, _$escape(props.description));
390
+ get meta() {
391
+ return props.meta;
338
392
  }
339
- }))), _$createComponent(Show, {
393
+ })), _$escape(_$createComponent(Show, {
340
394
  get when() {
341
- return props.meta;
395
+ return props.description;
342
396
  },
343
397
  get children() {
344
- return _$ssr(_tmpl$21, _$escape(props.meta));
398
+ return _$ssr(_tmpl$22, _$escape(props.description));
345
399
  }
346
- }), _$ssr(_tmpl$22)];
400
+ }))), _$ssr(_tmpl$24)];
347
401
  }
348
402
  })), _$ssrAttribute("hidden", !open(), true), _$escape(_$createComponent(DetailPanelSectionIcon, {
349
403
  get icon() {
@@ -352,19 +406,19 @@ const DetailPanelSection = props => {
352
406
  get tone() {
353
407
  return props.tone;
354
408
  }
355
- })), _$ssrAttribute("id", _$escape(headingId, true), false), _$escape(props.title), _$escape(_$createComponent(Show, {
356
- get when() {
357
- return props.description;
409
+ })), _$ssrAttribute("id", _$escape(headingId, true), false), _$escape(props.title), _$escape(_$createComponent(SectionTitleMeta, {
410
+ get count() {
411
+ return props.count;
358
412
  },
359
- get children() {
360
- return _$ssr(_tmpl$23, _$escape(props.description));
413
+ get meta() {
414
+ return props.meta;
361
415
  }
362
416
  })), _$escape(_$createComponent(Show, {
363
417
  get when() {
364
- return props.meta;
418
+ return props.description;
365
419
  },
366
420
  get children() {
367
- return _$ssr(_tmpl$24, _$escape(props.meta));
421
+ return _$ssr(_tmpl$25, _$escape(props.description));
368
422
  }
369
423
  })), _$escape(_$createComponent(Button, {
370
424
  variant: "ghost",
@@ -378,7 +432,7 @@ const DetailPanelSection = props => {
378
432
  "aria-controls": bodyId,
379
433
  onClick: () => toggle(false),
380
434
  get children() {
381
- return _$ssr(_tmpl$25);
435
+ return _$ssr(_tmpl$26);
382
436
  }
383
437
  })), _$ssrAttribute("id", _$escape(bodyId, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children));
384
438
  }
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["layout/DetailPanel.tsx"],"sourcesContent":["import { children, createEffect, createSignal, createUniqueId, type JSX, Show, splitProps } from \"solid-js\";\nimport { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, IconButton } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem } from \"../actions/Dropdown\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type DetailPanelProps = {\n children: JSX.Element;\n class?: string;\n};\n\ntype DetailPanelHeaderBaseProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n meta?: JSX.Element;\n actions?: JSX.Element;\n primaryActions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelHeaderProps = DetailPanelHeaderBaseProps &\n (\n | {\n leading?: JSX.Element;\n icon?: never;\n }\n | {\n leading?: never;\n icon?: string;\n }\n );\n\nexport type DetailPanelBodyProps = {\n scrollFade?: boolean;\n children: JSX.Element;\n scrollPreserveKey?: string;\n class?: string;\n};\n\nexport type DetailPanelSummaryProps = {\n title: JSX.Element;\n children: JSX.Element;\n actions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelGroupProps = {\n children: JSX.Element;\n label?: string;\n class?: string;\n};\n\nexport type DetailPanelTone = \"accent\" | \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\ntype DetailPanelSectionBaseProps = {\n title: JSX.Element;\n icon?: string;\n tone?: DetailPanelTone;\n description?: JSX.Element;\n meta?: JSX.Element;\n class?: string;\n};\n\n/** One direct secondary command, rendered as a sibling icon button at the end of the row. */\nexport type DetailPanelActionSecondary = {\n /** Icon class, for example `ti ti-trash`. */\n icon: string;\n /** Accessible name and tooltip of the icon button. */\n label: string;\n onClick: () => void;\n variant?: \"danger\";\n};\n\ntype DetailPanelActionBaseProps = {\n title: JSX.Element;\n description?: JSX.Element;\n leading?: JSX.Element;\n trailing?: JSX.Element;\n secondaryAction?: DetailPanelActionSecondary;\n class?: string;\n};\n\ntype DetailPanelActionMenuProps =\n | {\n menuItems?: never;\n menuLabel?: never;\n }\n | {\n menuItems: readonly DropdownItem[];\n menuLabel: string;\n };\n\nexport type DetailPanelActionLinkProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonLinkProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href: string;\n };\n\nexport type DetailPanelActionButtonProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href?: never;\n };\n\nexport type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;\n\nexport type DetailPanelSectionProps = DetailPanelSectionBaseProps &\n (\n | {\n children?: JSX.Element;\n actions?: JSX.Element;\n collapsible?: false;\n defaultOpen?: never;\n open?: never;\n onOpenChange?: never;\n disabled?: never;\n }\n | {\n children: JSX.Element;\n actions?: never;\n collapsible: true;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n }\n );\n\ntype DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {\n Header: (props: DetailPanelHeaderProps) => JSX.Element;\n Body: (props: DetailPanelBodyProps) => JSX.Element;\n Summary: (props: DetailPanelSummaryProps) => JSX.Element;\n Group: (props: DetailPanelGroupProps) => JSX.Element;\n Section: (props: DetailPanelSectionProps) => JSX.Element;\n Action: (props: DetailPanelActionProps) => JSX.Element;\n};\n\nconst classNames = (base: string, extra?: string): string => (extra ? `${base} ${extra}` : base);\n\nconst DetailPanelHeader = (props: DetailPanelHeaderProps): JSX.Element => (\n <header class={classNames(\"k2b-detail-panel__header\", props.class)}>\n <div class=\"k2b-detail-panel__header-main\">\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__header-icon\" aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n <Show when={props.leading}>\n <div class=\"k2b-detail-panel__header-leading\">{props.leading}</div>\n </Show>\n <div class=\"k2b-detail-panel__heading\">\n <h2>{props.title}</h2>\n <Show when={props.subtitle || props.meta}>\n <div class=\"k2b-detail-panel__supporting\">\n <Show when={props.subtitle}>\n <p>{props.subtitle}</p>\n </Show>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__meta\">{props.meta}</div>\n </Show>\n </div>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__actions\">{props.actions}</div>\n </Show>\n </div>\n <Show when={props.primaryActions}>\n <div class=\"k2b-detail-panel__primary-actions\">{props.primaryActions}</div>\n </Show>\n </header>\n);\n\nconst DetailPanelBody = (props: DetailPanelBodyProps): JSX.Element => {\n let body!: HTMLDivElement;\n createScrollFade(\n () => body,\n () => props.scrollFade !== false,\n );\n return (\n <div\n ref={body}\n class={classNames(\"k2b-detail-panel__body\", props.class)}\n data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n data-scroll-preserve={props.scrollPreserveKey}\n >\n {props.children}\n </div>\n );\n};\n\nconst DetailPanelSummary = (props: DetailPanelSummaryProps): JSX.Element => {\n const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;\n\n return (\n <section class={classNames(\"k2b-detail-panel__summary\", props.class)} aria-labelledby={headingId}>\n <header class=\"k2b-detail-panel__summary-header\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__summary-actions\">{props.actions}</div>\n </Show>\n </header>\n <div class=\"k2b-detail-panel__summary-body\">{props.children}</div>\n </section>\n );\n};\n\nconst DetailPanelGroup = (props: DetailPanelGroupProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel__group\", props.class)} role=\"group\" aria-label={props.label}>\n {props.children}\n </div>\n);\n\nconst DetailPanelSectionIcon = (props: Pick<DetailPanelSectionBaseProps, \"icon\" | \"tone\">): JSX.Element => (\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__section-icon\" data-tone={props.tone ?? \"neutral\"} aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n);\n\nconst DetailPanelActionContent = (props: DetailPanelActionBaseProps): JSX.Element => (\n <>\n <Show when={props.leading}>\n <span class=\"k2b-detail-panel__action-leading\">{props.leading}</span>\n </Show>\n <span class=\"k2b-detail-panel__action-copy\">\n <span class=\"k2b-detail-panel__action-title\">{props.title}</span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__action-description\">{props.description}</span>\n </Show>\n </span>\n <Show when={props.trailing}>\n <span class=\"k2b-detail-panel__action-trailing\">{props.trailing}</span>\n </Show>\n </>\n);\n\nconst DetailPanelAction = (props: DetailPanelActionProps): JSX.Element => {\n const [local, rest] = splitProps(props, [\n \"class\",\n \"description\",\n \"href\",\n \"leading\",\n \"menuItems\",\n \"menuLabel\",\n \"secondaryAction\",\n \"title\",\n \"trailing\",\n ]);\n const className = classNames(\"k2b-detail-panel__action\", local.class);\n const content = () => (\n <DetailPanelActionContent title={local.title} description={local.description} leading={local.leading} trailing={local.trailing} />\n );\n\n const action = () => (\n <Show\n when={local.href !== undefined}\n fallback={\n <Button\n {...(rest as Omit<DetailPanelActionButtonProps, keyof DetailPanelActionBaseProps>)}\n class={className}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </Button>\n }\n >\n <ButtonLink\n {...(rest as Omit<DetailPanelActionLinkProps, keyof DetailPanelActionBaseProps | \"href\">)}\n href={local.href as string}\n class={className}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </ButtonLink>\n </Show>\n );\n\n return (\n <Show when={local.secondaryAction || local.menuItems?.length} fallback={action()}>\n <div class=\"k2b-detail-panel__action-row\">\n {action()}\n <Show when={local.secondaryAction}>\n {(secondary) => (\n <IconButton\n size=\"sm\"\n variant=\"ghost\"\n label={secondary().label}\n class=\"k2b-detail-panel__action-secondary\"\n data-tone={secondary().variant}\n onClick={() => secondary().onClick()}\n >\n <i class={secondary().icon} aria-hidden=\"true\" />\n </IconButton>\n )}\n </Show>\n <Show when={local.menuItems?.length}>\n <Dropdown.Root items={local.menuItems ?? []} align=\"end\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu\">\n <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu-trigger\">\n <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n </Dropdown.Trigger>\n </Dropdown.Root>\n </Show>\n </div>\n </Show>\n );\n};\n\nconst DetailPanelSection = (props: DetailPanelSectionProps): JSX.Element => {\n const headingId = `k2b-detail-panel-section-${createUniqueId()}`;\n const bodyId = `${headingId}-body`;\n const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n const open = () => props.open ?? internalOpen();\n let expand: HTMLButtonElement | undefined;\n let collapse: HTMLButtonElement | undefined;\n let body: HTMLDivElement | undefined;\n const toggle = (next: boolean) => {\n if (props.disabled) return;\n if (props.open === undefined) setInternalOpen(next);\n props.onOpenChange?.(next);\n };\n createEffect(() => {\n const expanded = open();\n // Restore focus only when its current control becomes hidden, including\n // a parent-controlled collapse while focus is inside an editor.\n queueMicrotask(() => {\n if (expanded !== open()) return;\n const active = expand?.ownerDocument.activeElement;\n if (expanded && active === expand) collapse?.focus();\n if (!expanded && (active === collapse || (active && body?.contains(active)))) expand?.focus();\n });\n });\n const className = () => classNames(\"k2b-detail-panel__section\", props.class);\n // Resolve once: reading `props.children` twice would instantiate the section body twice.\n const resolved = children(() => props.children);\n\n return (\n <Show\n when={props.collapsible}\n fallback={\n <section class={className()} aria-labelledby={headingId}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.description}>\n <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n </Show>\n </div>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__section-meta\">{props.meta}</div>\n </Show>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__section-actions\">{props.actions}</div>\n </Show>\n </header>\n <Show when={resolved()}>\n <div class=\"k2b-detail-panel__section-body\">{resolved()}</div>\n </Show>\n </section>\n }\n >\n <section class={className()} aria-labelledby={open() ? headingId : `${headingId}-closed`} data-open={open()}>\n <div hidden={open()}>\n <Button\n ref={expand}\n variant=\"ghost\"\n class=\"k2b-detail-panel__section-summary\"\n disabled={props.disabled}\n aria-expanded={false}\n aria-controls={bodyId}\n onClick={() => toggle(true)}\n >\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <span class=\"k2b-detail-panel__section-copy\">\n <span id={`${headingId}-closed`} class=\"k2b-detail-panel__section-title\">\n {props.title}\n </span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__section-description\">{props.description}</span>\n </Show>\n </span>\n <Show when={props.meta}>\n <span class=\"k2b-detail-panel__section-meta\">{props.meta}</span>\n </Show>\n {/* Same column as the open header's collapse button, so nothing moves between the states. */}\n <span class=\"k2b-detail-panel__section-toggle\" aria-hidden=\"true\">\n <i class=\"ti ti-chevron-down\" />\n </span>\n </Button>\n </div>\n <div hidden={!open()}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.description}>\n <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n </Show>\n </div>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__section-meta\">{props.meta}</div>\n </Show>\n <Button\n ref={collapse}\n variant=\"ghost\"\n size=\"sm\"\n class=\"k2b-detail-panel__section-toggle\"\n disabled={props.disabled}\n aria-labelledby={headingId}\n aria-expanded={true}\n aria-controls={bodyId}\n onClick={() => toggle(false)}\n >\n <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n </Button>\n </header>\n </div>\n <div ref={body} id={bodyId} hidden={!open()} class=\"k2b-detail-panel__section-body\">\n {props.children}\n </div>\n </section>\n </Show>\n );\n};\n\nconst DetailPanel = ((props: DetailPanelProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel\", props.class)}>{props.children}</div>\n)) as DetailPanelComponent;\n\nDetailPanel.Header = DetailPanelHeader;\nDetailPanel.Body = DetailPanelBody;\nDetailPanel.Summary = DetailPanelSummary;\nDetailPanel.Group = DetailPanelGroup;\nDetailPanel.Section = DetailPanelSection;\nDetailPanel.Action = DetailPanelAction;\n\nexport default DetailPanel;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":[],"sources":["layout/DetailPanel.tsx"],"sourcesContent":["import { children, createEffect, createSignal, createUniqueId, type JSX, Show, splitProps } from \"solid-js\";\nimport { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, IconButton } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem } from \"../actions/Dropdown\";\nimport { useDetailPanelMessages } from \"./detail-panel-messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type DetailPanelProps = {\n children: JSX.Element;\n class?: string;\n};\n\ntype DetailPanelHeaderBaseProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n meta?: JSX.Element;\n actions?: JSX.Element;\n primaryActions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelHeaderProps = DetailPanelHeaderBaseProps &\n (\n | {\n leading?: JSX.Element;\n icon?: never;\n }\n | {\n leading?: never;\n icon?: string;\n }\n );\n\nexport type DetailPanelBodyProps = {\n scrollFade?: boolean;\n children: JSX.Element;\n scrollPreserveKey?: string;\n class?: string;\n};\n\nexport type DetailPanelSummaryProps = {\n title: JSX.Element;\n children: JSX.Element;\n actions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelGroupProps = {\n children: JSX.Element;\n label?: string;\n class?: string;\n};\n\nexport type DetailPanelTone = \"accent\" | \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\ntype DetailPanelSectionBaseProps = {\n title: JSX.Element;\n icon?: string;\n tone?: DetailPanelTone;\n description?: JSX.Element;\n /** How many things the section lists, as a chip after the title; `0` reads \"None yet\". */\n count?: number;\n /** Short state after the title, such as \"2 of 4 done\". */\n meta?: JSX.Element;\n class?: string;\n};\n\n/** One direct secondary command, rendered as a sibling icon button at the end of the row. */\nexport type DetailPanelActionSecondary = {\n /** Icon class, for example `ti ti-trash`. */\n icon: string;\n /** Accessible name and tooltip of the icon button. */\n label: string;\n onClick: () => void;\n variant?: \"danger\";\n};\n\ntype DetailPanelActionBaseProps = {\n title: JSX.Element;\n description?: JSX.Element;\n leading?: JSX.Element;\n trailing?: JSX.Element;\n secondaryAction?: DetailPanelActionSecondary;\n /** Marks the row of the current place, such as the section in view, in the panel's accent. */\n current?: boolean;\n /** Lets the title wrap to two lines instead of ending with an ellipsis. */\n wrap?: boolean;\n class?: string;\n};\n\ntype DetailPanelActionMenuProps =\n | {\n menuItems?: never;\n menuLabel?: never;\n }\n | {\n menuItems: readonly DropdownItem[];\n menuLabel: string;\n };\n\nexport type DetailPanelActionLinkProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonLinkProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href: string;\n };\n\nexport type DetailPanelActionButtonProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href?: never;\n };\n\nexport type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;\n\nexport type DetailPanelSectionProps = DetailPanelSectionBaseProps &\n (\n | {\n children?: JSX.Element;\n actions?: JSX.Element;\n collapsible?: false;\n defaultOpen?: never;\n open?: never;\n onOpenChange?: never;\n disabled?: never;\n }\n | {\n children: JSX.Element;\n actions?: never;\n collapsible: true;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n }\n );\n\ntype DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {\n Header: (props: DetailPanelHeaderProps) => JSX.Element;\n Body: (props: DetailPanelBodyProps) => JSX.Element;\n Summary: (props: DetailPanelSummaryProps) => JSX.Element;\n Group: (props: DetailPanelGroupProps) => JSX.Element;\n Section: (props: DetailPanelSectionProps) => JSX.Element;\n Action: (props: DetailPanelActionProps) => JSX.Element;\n};\n\nconst classNames = (base: string, extra?: string): string => (extra ? `${base} ${extra}` : base);\n\nconst showTruncatedTitle = (event: PointerEvent & { currentTarget: HTMLHeadingElement }) => {\n const heading = event.currentTarget;\n if (heading.scrollHeight > heading.clientHeight + 1) heading.title = heading.textContent ?? \"\";\n else heading.removeAttribute(\"title\");\n};\n\nconst DetailPanelHeader = (props: DetailPanelHeaderProps): JSX.Element => (\n <header class={classNames(\"k2b-detail-panel__header\", props.class)}>\n <div class=\"k2b-detail-panel__header-main\" data-identity={props.icon || props.leading ? \"true\" : undefined}>\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__header-icon\" aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n <Show when={props.leading}>\n <div class=\"k2b-detail-panel__header-leading\">{props.leading}</div>\n </Show>\n <div class=\"k2b-detail-panel__heading\">\n {/* A long title wraps to two lines and ends with an ellipsis; then the native hint shows all of it. */}\n <h2 onPointerEnter={showTruncatedTitle}>{props.title}</h2>\n <Show when={props.subtitle || props.meta}>\n <div class=\"k2b-detail-panel__supporting\">\n <Show when={props.subtitle}>\n <p>{props.subtitle}</p>\n </Show>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__meta\">{props.meta}</div>\n </Show>\n </div>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__actions\">{props.actions}</div>\n </Show>\n </div>\n <Show when={props.primaryActions}>\n <div class=\"k2b-detail-panel__primary-actions\">{props.primaryActions}</div>\n </Show>\n </header>\n);\n\nconst DetailPanelBody = (props: DetailPanelBodyProps): JSX.Element => {\n let body!: HTMLDivElement;\n createScrollFade(\n () => body,\n () => props.scrollFade !== false,\n );\n return (\n <div\n ref={body}\n class={classNames(\"k2b-detail-panel__body\", props.class)}\n data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n data-scroll-preserve={props.scrollPreserveKey}\n >\n {props.children}\n </div>\n );\n};\n\nconst DetailPanelSummary = (props: DetailPanelSummaryProps): JSX.Element => {\n const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;\n\n return (\n <section class={classNames(\"k2b-detail-panel__summary\", props.class)} aria-labelledby={headingId}>\n <header class=\"k2b-detail-panel__summary-header\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__summary-actions\">{props.actions}</div>\n </Show>\n </header>\n <div class=\"k2b-detail-panel__summary-body\">{props.children}</div>\n </section>\n );\n};\n\nconst DetailPanelGroup = (props: DetailPanelGroupProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel__group\", props.class)} role=\"group\" aria-label={props.label}>\n {props.children}\n </div>\n);\n\nconst DetailPanelSectionIcon = (props: Pick<DetailPanelSectionBaseProps, \"icon\" | \"tone\">): JSX.Element => (\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__section-icon\" data-tone={props.tone ?? \"neutral\"} aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n);\n\n/** A count chip, or \"None yet\" for zero; shared by sections and discussions. */\nexport const DetailPanelCount = (props: { count: number }): JSX.Element => {\n const messages = useDetailPanelMessages();\n return (\n <Show when={props.count > 0} fallback={<span class=\"k2b-detail-panel__none\">{messages().noneYet}</span>}>\n <span class=\"k2b-count-chip\">{props.count}</span>\n </Show>\n );\n};\n\n/** Title, then its count and state right after it, so every section reads the same way. */\nconst SectionTitleMeta = (props: Pick<DetailPanelSectionBaseProps, \"count\" | \"meta\">): JSX.Element => (\n <>\n <Show when={props.count !== undefined}>\n <DetailPanelCount count={props.count ?? 0} />\n </Show>\n <Show when={props.meta}>\n <span class=\"k2b-detail-panel__section-meta\">{props.meta}</span>\n </Show>\n </>\n);\n\nconst DetailPanelActionContent = (props: DetailPanelActionBaseProps): JSX.Element => (\n <>\n {/* Always present, so every row's text starts on the section's text edge. */}\n <span class=\"k2b-detail-panel__action-leading\">{props.leading}</span>\n <span class=\"k2b-detail-panel__action-copy\">\n <span class=\"k2b-detail-panel__action-title\">{props.title}</span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__action-description\">{props.description}</span>\n </Show>\n </span>\n <Show when={props.trailing}>\n <span class=\"k2b-detail-panel__action-trailing\">{props.trailing}</span>\n </Show>\n </>\n);\n\nconst DetailPanelAction = (props: DetailPanelActionProps): JSX.Element => {\n const [local, rest] = splitProps(props, [\n \"class\",\n \"current\",\n \"description\",\n \"href\",\n \"leading\",\n \"menuItems\",\n \"menuLabel\",\n \"secondaryAction\",\n \"title\",\n \"trailing\",\n \"wrap\",\n ]);\n const className = classNames(\"k2b-detail-panel__action\", local.class);\n const content = () => (\n <DetailPanelActionContent title={local.title} description={local.description} leading={local.leading} trailing={local.trailing} />\n );\n\n const action = () => (\n <Show\n when={local.href !== undefined}\n fallback={\n <Button\n {...(rest as Omit<DetailPanelActionButtonProps, keyof DetailPanelActionBaseProps>)}\n class={className}\n aria-current={local.current ? \"true\" : undefined}\n data-current={local.current ? \"true\" : undefined}\n data-wrap={local.wrap ? \"true\" : undefined}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </Button>\n }\n >\n <ButtonLink\n {...(rest as Omit<DetailPanelActionLinkProps, keyof DetailPanelActionBaseProps | \"href\">)}\n href={local.href as string}\n class={className}\n aria-current={local.current ? \"location\" : undefined}\n data-current={local.current ? \"true\" : undefined}\n data-wrap={local.wrap ? \"true\" : undefined}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </ButtonLink>\n </Show>\n );\n\n return (\n <Show when={local.secondaryAction || local.menuItems?.length} fallback={action()}>\n <div class=\"k2b-detail-panel__action-row\">\n {action()}\n <Show when={local.secondaryAction}>\n {(secondary) => (\n <IconButton\n size=\"sm\"\n variant=\"ghost\"\n label={secondary().label}\n class=\"k2b-detail-panel__action-secondary\"\n data-tone={secondary().variant}\n onClick={() => secondary().onClick()}\n >\n <i class={secondary().icon} aria-hidden=\"true\" />\n </IconButton>\n )}\n </Show>\n <Show when={local.menuItems?.length}>\n <Dropdown.Root items={local.menuItems ?? []} align=\"end\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu\">\n <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu-trigger\">\n <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n </Dropdown.Trigger>\n </Dropdown.Root>\n </Show>\n </div>\n </Show>\n );\n};\n\nconst DetailPanelSection = (props: DetailPanelSectionProps): JSX.Element => {\n const headingId = `k2b-detail-panel-section-${createUniqueId()}`;\n const bodyId = `${headingId}-body`;\n const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n const open = () => props.open ?? internalOpen();\n let expand: HTMLButtonElement | undefined;\n let collapse: HTMLButtonElement | undefined;\n let body: HTMLDivElement | undefined;\n const toggle = (next: boolean) => {\n if (props.disabled) return;\n if (props.open === undefined) setInternalOpen(next);\n props.onOpenChange?.(next);\n };\n createEffect(() => {\n const expanded = open();\n // Restore focus only when its current control becomes hidden, including\n // a parent-controlled collapse while focus is inside an editor.\n queueMicrotask(() => {\n if (expanded !== open()) return;\n const active = expand?.ownerDocument.activeElement;\n if (expanded && active === expand) collapse?.focus();\n if (!expanded && (active === collapse || (active && body?.contains(active)))) expand?.focus();\n });\n });\n const className = () => classNames(\"k2b-detail-panel__section\", props.class);\n // Resolve once: reading `props.children` twice would instantiate the section body twice.\n const resolved = children(() => props.children);\n\n return (\n <Show\n when={props.collapsible}\n fallback={\n <section class={className()} aria-labelledby={headingId} data-icon={props.icon ? \"true\" : undefined}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <div class=\"k2b-detail-panel__section-heading\">\n <h3 id={headingId}>{props.title}</h3>\n <SectionTitleMeta count={props.count} meta={props.meta} />\n </div>\n <Show when={props.description}>\n <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__section-actions\">{props.actions}</div>\n </Show>\n </header>\n <Show when={resolved()}>\n <div class=\"k2b-detail-panel__section-body\">{resolved()}</div>\n </Show>\n </section>\n }\n >\n <section\n class={className()}\n aria-labelledby={open() ? headingId : `${headingId}-closed`}\n data-open={open()}\n data-icon={props.icon ? \"true\" : undefined}\n >\n <div hidden={open()}>\n <Button\n ref={expand}\n variant=\"ghost\"\n class=\"k2b-detail-panel__section-summary\"\n disabled={props.disabled}\n aria-expanded={false}\n aria-controls={bodyId}\n onClick={() => toggle(true)}\n >\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <span class=\"k2b-detail-panel__section-copy\">\n <span class=\"k2b-detail-panel__section-heading\">\n <span id={`${headingId}-closed`} class=\"k2b-detail-panel__section-title\">\n {props.title}\n </span>\n <SectionTitleMeta count={props.count} meta={props.meta} />\n </span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__section-description\">{props.description}</span>\n </Show>\n </span>\n {/* Same column as the open header's collapse button, so nothing moves between the states. */}\n <span class=\"k2b-detail-panel__section-toggle\" aria-hidden=\"true\">\n <i class=\"ti ti-chevron-down\" />\n </span>\n </Button>\n </div>\n <div hidden={!open()}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <div class=\"k2b-detail-panel__section-heading\">\n <h3 id={headingId}>{props.title}</h3>\n <SectionTitleMeta count={props.count} meta={props.meta} />\n </div>\n <Show when={props.description}>\n <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n </Show>\n </div>\n <Button\n ref={collapse}\n variant=\"ghost\"\n size=\"sm\"\n class=\"k2b-detail-panel__section-toggle\"\n disabled={props.disabled}\n aria-labelledby={headingId}\n aria-expanded={true}\n aria-controls={bodyId}\n onClick={() => toggle(false)}\n >\n <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n </Button>\n </header>\n </div>\n <div ref={body} id={bodyId} hidden={!open()} class=\"k2b-detail-panel__section-body\">\n {props.children}\n </div>\n </section>\n </Show>\n );\n};\n\nconst DetailPanel = ((props: DetailPanelProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel\", props.class)}>{props.children}</div>\n)) as DetailPanelComponent;\n\nDetailPanel.Header = DetailPanelHeader;\nDetailPanel.Body = DetailPanelBody;\nDetailPanel.Summary = DetailPanelSummary;\nDetailPanel.Group = DetailPanelGroup;\nDetailPanel.Section = DetailPanelSection;\nDetailPanel.Action = DetailPanelAction;\n\nexport default DetailPanel;\n"],"mappings":"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","ignoreList":[]}