@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.106

package/dist/list-detail-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/list-detail-dialog/list-detail-dialog.tsx"],"names":[],"mappings":"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","file":"list-detail-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport {\n  SplitView,\n  type SplitViewListWidth,\n} from '../../layout/split-view/split-view.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/** The list column: a secondary title, its own controls, and the list. */\nexport interface ListDetailDialogList {\n  /**\n   * The column's title, at the default toolbar size so it reads as pane\n   * identity beside the detail's primary title. On compact devices it titles\n   * the root view.\n   */\n  title: string;\n  /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */\n  toolbar?: KerfUiContent;\n  /** The list, usually a `List` of selectable `ListItem`s. */\n  content: KerfUiContent;\n  /** Content pinned below the list, such as an add control. */\n  footer?: KerfUiContent;\n  /**\n   * The column's width on roomy devices (default 280px, at most 40% of the\n   * dialog's width).\n   */\n  width?: SplitViewListWidth;\n}\n\n/** The detail column: the dialog's primary title, actions, and close control. */\nexport interface ListDetailDialogDetail {\n  /**\n   * The dialog's primary title: an xl heading at the top of the detail\n   * column on roomy devices, and the pushed view's title on compact devices.\n   */\n  title: string;\n  /** A short supporting line under the roomy title. */\n  description?: string;\n  /**\n   * Header controls before the close control, such as a\n   * `ToolbarControlGroup`. Primary record actions usually go in `footer`.\n   */\n  actions?: KerfUiContent;\n  /** The selected item's detail. */\n  content: KerfUiContent;\n  /** Content pinned below the detail, usually its buttons. */\n  footer?: KerfUiContent;\n}\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface ListDetailDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. Also\n   * prefixes the ids of the split and the detail title.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  list: ListDetailDialogList;\n  detail: ListDetailDialogDetail;\n  /**\n   * One pane at a time: derive from `deviceClass().value.compact`. The dialog\n   * fills the screen and drills from the list into the detail as a\n   * `NavStack`; every view keeps the close control.\n   */\n  compact?: boolean;\n  /** On compact devices, whether the detail is pushed over the list. */\n  detailActive?: boolean;\n  /** The compact back control's accessible name (default `Back`). */\n  backLabel?: string;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  rootAttributes?: ListDetailDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_LIST_WIDTH: SplitViewListWidth = { size: 280, maxFraction: 0.4 };\n\nfunction closeGroup(closeLabel: string) {\n  return (\n    <ToolbarControlGroup appearance=\"borderless\" single>\n      <button type=\"button\" aria-label={closeLabel} data-dialog-close=\"\">\n        <LucideIcon icon={X} name=\"x\" />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * A list-detail dialog: a modal whose list column and detail column each run\n * its full height. The list column carries a secondary title and its own\n * controls; the detail column carries the dialog's primary title, its\n * actions, and the close control, so the divider between them runs from top\n * to bottom. On compact devices it fills the screen and becomes a `NavStack`\n * that drills from the list into the detail. Open it with `openDialog()`;\n * the app owns the selection and, on compact devices, `detailActive` (the\n * stack's back control dispatches `nav-back`). Built from `DialogSurface`,\n * `SplitView`, and `Pane`.\n */\nexport function ListDetailDialog({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  backLabel = 'Back',\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  rootAttributes,\n  className = '',\n  slot,\n}: ListDetailDialogProps) {\n  const close = closeGroup(closeLabel);\n  const split = compact ? (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      compact\n      detailActive={detailActive}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      backLabel={backLabel}\n      compactStack={{\n        list: {\n          toolbar: {\n            trailing: (\n              <>\n                {list.toolbar}\n                {close}\n              </>\n            ),\n          },\n          footer: list.footer,\n        },\n        detail: {\n          toolbar: {\n            trailing: (\n              <>\n                {detail.actions}\n                {close}\n              </>\n            ),\n          },\n          footer: detail.footer,\n        },\n      }}\n      list={list.content}\n      detail={detail.content}\n    />\n  ) : (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      listWidth={list.width ?? DEFAULT_LIST_WIDTH}\n      list={\n        <Pane\n          label={list.title}\n          header={\n            <Toolbar\n              label={list.title}\n              leading={<ToolbarText text={list.title} />}\n              trailing={list.toolbar}\n            />\n          }\n          footer={list.footer}\n        >\n          {list.content}\n        </Pane>\n      }\n      detail={\n        <Pane\n          label={detail.title}\n          header={\n            <Toolbar\n              label={detail.title}\n              leading={\n                <ToolbarText\n                  text={detail.title}\n                  description={detail.description}\n                  size=\"xlarge\"\n                  id={`${id}-title`}\n                  headingLevel={2}\n                />\n              }\n              trailing={\n                <>\n                  {detail.actions}\n                  {close}\n                </>\n              }\n            />\n          }\n          footer={detail.footer}\n        >\n          {detail.content}\n        </Pane>\n      }\n    />\n  );\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'list-detail',\n      }}\n      className={className}\n      slot={slot}\n    >\n      {split}\n    </DialogSurface>\n  );\n}\n"]}

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-3SKAEPPZ.js';
+export { ListHeader } from './chunk-ECFCAKWE.js';
 
 
 

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem, ListItemLink } from './chunk-ZYU5WRC3.js';
+export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
 
 
 

package/dist/list.d.ts

@@ -20,6 +20,8 @@ type ListRootAttributes = StructuralRootAttributes & Readonly<{
     'data-frame'?: never;
     'data-surface'?: never;
     'data-inset'?: never;
+    'data-content-width'?: never;
+    'data-content-align'?: never;
     'data-text-insets'?: never;
     'data-control-insets'?: never;
 }>;
@@ -35,6 +37,12 @@ type ListSurface = 'base' | 'raised';
  * 16px inline below 576px. It replaces any `textInsets`/`controlInsets`.
  */
 type ListInset = 'document';
+/**
+ * A readable measure for a page's content column: `compact` 440px, `medium`
+ * 640px, or `wide` 864px of content, the same steps as a catalog example's
+ * `contentWidth`.
+ */
+type ListContentWidth = 'compact' | 'medium' | 'wide';
 interface ListProps {
     children?: KerfUiContent;
     /** Make this list a labeled multi-select grid for `ContentItem selectionMode="multiple"` rows. */
@@ -100,6 +108,13 @@ interface ListProps {
     /** Physical divider edges in canonical top/right/bottom/left order. */
     dividerSides?: Sides;
     /** A preset four-sided inset; see `ListInset`. */
+    /**
+     * Cap the list's content at a readable measure, plus its insets, so a page
+     * column needs no application CSS. Composes with `inset="document"`.
+     */
+    contentWidth?: ListContentWidth;
+    /** Where a `contentWidth` column sits: `center` (default) or `start`. */
+    contentAlign?: 'start' | 'center';
     inset?: ListInset;
     /** Physical sides that receive the standard 17px text inset. */
     textInsets?: Sides;
@@ -123,6 +138,6 @@ interface ListProps {
  */
 type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
 /** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
-declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, contentWidth, contentAlign, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
-export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };
+export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListContentWidth, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };

package/dist/list.js

@@ -1,4 +1,4 @@
-export { List } from './chunk-HZPHCSCS.js';
+export { List } from './chunk-OY2MXIBB.js';
 
 
 

package/dist/lucide-icon.d.ts

@@ -14,13 +14,21 @@ interface LucideIconProps {
     color?: CssForegroundColor;
     /** Flow with surrounding text instead of occupying a block. */
     inline?: boolean;
+    /** The icon's accessible name; without it the icon is decorative. */
     label?: string;
+    /**
+     * Hover text, as an SVG `<title>`: a status icon's explanation ("Session
+     * halted"). With `label`, the label stays the accessible name; alone, the
+     * title also names the icon. The whole icon box shows it, not just its
+     * strokes.
+     */
+    title?: string;
     /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
     size?: LucideIconSize;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** Render a Lucide-compatible icon node without copying icon SVG strings. */
-declare function LucideIcon({ icon, name, appearance, className, color, inline, label, size, slot, }: LucideIconProps): SafeHtml;
+declare function LucideIcon({ icon, name, appearance, className, color, inline, label, title, size, slot, }: LucideIconProps): SafeHtml;
 
 export { LucideIcon, type LucideIconProps, type LucideIconSize, type LucideNode };

package/dist/lucide-icon.js

@@ -1,4 +1,4 @@
-export { LucideIcon } from './chunk-LOSRXZAH.js';
+export { LucideIcon } from './chunk-HJXVVFBT.js';
 
 
 //# sourceMappingURL=lucide-icon.js.map

package/dist/{composer.d.ts → message-composer.d.ts}

@@ -2,11 +2,11 @@ import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 /**
- * Application `data-*` identity on the Composer root, such as `data-key`;
+ * Application `data-*` identity on the MessageComposer root, such as `data-key`;
  * the composer's own configuration attributes stay protected.
  */
-type ComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
-interface ComposerProps {
+type MessageComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface MessageComposerProps {
     /** The message field's accessible name, in title style ("Message"). */
     label: string;
     /** Native textarea `name`: the form field the message submits under. */
@@ -30,14 +30,22 @@ interface ComposerProps {
      * `minRows`.
      */
     maxRows?: number;
-    /** Quiet, sentence-style supporting copy at the start of the action row. */
+    /**
+     * Quiet, sentence-style supporting copy in the action row's leading zone,
+     * after any `leading` controls.
+     */
     hint?: string;
+    /**
+     * Controls at the start of the action row, such as an attach button or a
+     * model `Select`, normally in a `ToolbarControlGroup`.
+     */
+    leading?: KerfUiContent;
     /** Trailing controls in the action row, normally one brand Send button. */
-    actions: KerfUiContent;
+    trailing: KerfUiContent;
     /** Disable the field; the app disables its own actions. */
     disabled?: boolean;
     /**
-     * Opt in to Enter-to-send: with `wireComposers` running over an ancestor,
+     * Opt in to Enter-to-send: with `wireMessageComposers` running over an ancestor,
      * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing
      * action, Shift+Enter inserts a newline, and an Enter that commits an IME
      * composition or meets an empty message does not send. The field announces
@@ -45,7 +53,7 @@ interface ComposerProps {
      */
     submitOnEnter?: boolean;
     /** Safe `data-*` identity on the root. */
-    rootAttributes?: ComposerRootAttributes;
+    rootAttributes?: MessageComposerRootAttributes;
     className?: string;
     /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */
     slot?: string;
@@ -53,10 +61,10 @@ interface ComposerProps {
 /**
  * A chat or prompt composer: a raised frame whose border turns brand while
  * focus is within, holding a borderless message field that grows with its
- * content between `minRows` and `maxRows` lines, above an action row with an
- * optional hint and trailing actions. The app owns the value and sending;
- * `submitOnEnter` with `wireComposers` adds Enter-to-send.
+ * content between `minRows` and `maxRows` lines, above a compact `Toolbar`
+ * action row: optional `leading` controls and `hint`, then `trailing` actions. The app owns the value and sending;
+ * `submitOnEnter` with `wireMessageComposers` adds Enter-to-send.
  */
-declare function Composer({ label, name, id, value, placeholder, minRows, maxRows, hint, actions, disabled, submitOnEnter, rootAttributes, className, slot, }: ComposerProps): kerfjs.SafeHtml;
+declare function MessageComposer({ label, name, id, value, placeholder, minRows, maxRows, hint, leading, trailing, disabled, submitOnEnter, rootAttributes, className, slot, }: MessageComposerProps): kerfjs.SafeHtml;
 
-export { Composer, type ComposerProps, type ComposerRootAttributes };
+export { MessageComposer, type MessageComposerProps, type MessageComposerRootAttributes };

package/dist/message-composer.js

@@ -0,0 +1,6 @@
+export { MessageComposer } from './chunk-23PPPNH6.js';
+
+
+
+
+//# sourceMappingURL=message-composer.js.map

package/dist/message-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"message-composer.js"}

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-6E2H2E5A.js';
+export { NavStack } from './chunk-ZXZAECHZ.js';
 
 
 

package/dist/pane.d.ts

@@ -67,9 +67,27 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-scroll-edge'?: never;
     'data-scroll-edge-distance'?: never;
     'data-header-overlay'?: never;
+    'data-compact-header'?: never;
+    'data-compact-footer'?: never;
+    'data-compact-header-open'?: never;
+    'data-compact-footer-open'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
 type PaneChromePlacement = 'fixed' | 'auto';
+/**
+ * How a header or footer behaves when the pane's container presents
+ * compactly (a `NavStack` view, a `TabNavigator` scene, a full-screen dialog,
+ * or a compact `Workbench`): `fixed` stays docked and shrinks the content
+ * area; `scroll` sits inline with the content (a footer settles at the end
+ * and scrolls past when the content is longer); `overlay` lies over the
+ * content on the chrome material, shown only while the app opens it.
+ */
+type PaneCompactChrome = 'fixed' | 'scroll' | 'overlay';
+/** The compact chrome policy for a Pane's header and footer. */
+interface PaneCompactChromePolicy {
+    header?: PaneCompactChrome;
+    footer?: PaneCompactChrome;
+}
 /**
  * When a Pane draws the divider between its pinned header or footer and its
  * scrolling content: `scroll` while content is scrolled away beneath that
@@ -130,6 +148,21 @@ interface PaneProps {
      * text in the normal text color: quiet text can fall below AA over the
      * content passing beneath it.
      */
+    /**
+     * What the header and footer do when the pane's container presents
+     * compactly (default `fixed`); roomy containers ignore it. The container
+     * interprets it, so set it on panes inside a `NavStack`, `TabNavigator`,
+     * full-screen dialog, or `Workbench`.
+     */
+    compactChrome?: PaneCompactChromePolicy;
+    /**
+     * Which `overlay` compact chrome is showing. The app owns it and flips it
+     * from a control the person can reach while the chrome is hidden.
+     */
+    compactChromeOpen?: {
+        header?: boolean;
+        footer?: boolean;
+    };
     headerPresentation?: PaneHeaderPresentation;
     /**
      * With `headerPresentation="clear"`, `material` fades the chrome material
@@ -213,13 +246,13 @@ interface PaneProps {
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
  * styling it. An omitted or `undefined` field keeps the composite's default.
  */
-type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'headerPresentation' | 'scrollEdge' | 'scrollEdgeDistance' | 'appearance' | 'background' | 'tint' | 'deepInset' | 'scrollClearance' | 'tabIndex' | 'outlined'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'compactChrome' | 'compactChromeOpen' | 'headerPresentation' | 'scrollEdge' | 'scrollEdgeDistance' | 'appearance' | 'background' | 'tint' | 'deepInset' | 'scrollClearance' | 'tabIndex' | 'outlined'>;
 /**
  * An unpadded application column with optional fixed header/footer slots and one
  * scrolling vertical content owner. Separator lines are independently opt-in on
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, chromePlacement, chromeDividers, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, compactChrome, compactChromeOpen, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };

package/dist/pane.js

@@ -1,4 +1,4 @@
-export { Pane } from './chunk-M5KZ26VV.js';
+export { Pane } from './chunk-HQZG3OFL.js';
 
 
 

package/dist/popup-menu-register.d.ts

@@ -1,9 +1,10 @@
 /**
- * Marker export for tests and tooling; importing this module registers the
- * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,
- * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard
- * choice through the item's click so delegated `data-action`s run. It also
- * names each open menu panel from its trigger and each submenu from its item.
+ * Marker export for tests and tooling; importing this module wires every
+ * `PopupMenu` in the document: opening from its trigger and from
+ * `openPopupMenu` / `openPopupMenuAt` / `closePopupMenu`, top-layer placement,
+ * keyboard navigation and typeahead, hover-opened submenus, the `kui-menu-select`
+ * choice event, and focus return. It also registers the help tag an
+ * icon-only trigger shows on hover or keyboard focus.
  */
 declare const popupMenuElementsRegistered = true;
 

package/dist/popup-menu-register.js

@@ -1,333 +1,10 @@
-import { installHelpTags } from './chunk-TDMHA7C3.js';
-import '@awesome.me/webawesome/dist/components/button/button.js';
-import '@awesome.me/webawesome/dist/components/divider/divider.js';
-import WaDropdownItem from '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
-import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
-import WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+import { installPopupMenus } from './chunk-C3RLKKFQ.js';
+import { installHelpTags } from './chunk-SQ2Q3OQI.js';
 
-// src/components/actions/popup-menu/internal/reveal-in-scroller.ts
-function composedParent(node) {
-  return node.assignedSlot ?? node.parentElement ?? (node.parentNode instanceof ShadowRoot ? node.parentNode.host : null);
-}
-function scrollerOf(node) {
-  for (let current = composedParent(node); current; current = composedParent(current)) {
-    if (current instanceof HTMLElement && current.scrollHeight > current.clientHeight && /auto|scroll/.test(globalThis.getComputedStyle(current).overflowY))
-      return current;
-  }
-  return void 0;
-}
-function revealInScroller(item) {
-  const scroller = scrollerOf(item);
-  if (!scroller) return;
-  const box = item.getBoundingClientRect();
-  const top = scroller.getBoundingClientRect().top + scroller.clientTop;
-  const bottom = top + scroller.clientHeight;
-  if (box.top < top) scroller.scrollTop -= top - box.top;
-  else if (box.bottom > bottom) scroller.scrollTop += box.bottom - bottom;
-}
 
-// src/components/actions/popup-menu/internal/install-dropdown-show-focus.ts
-var installed = /* @__PURE__ */ new WeakSet();
-var showEpoch = /* @__PURE__ */ new WeakMap();
-function installDropdownShowFocus(prototype) {
-  if (installed.has(prototype)) return;
-  installed.add(prototype);
-  const target = prototype;
-  const showMenu = target.showMenu;
-  target.showMenu = async function() {
-    const scoped = this.classList.contains("kui-popup-menu") || this.closest(".kui-popup-surface") !== null;
-    if (!scoped) return showMenu.call(this);
-    const epoch = (showEpoch.get(this) ?? 0) + 1;
-    showEpoch.set(this, epoch);
-    let navigatedItem;
-    const rememberFocus = (event) => {
-      const item = event.target;
-      if (this.menu?.classList.contains("show") && item instanceof HTMLElement && item.localName === "wa-dropdown-item" && this.contains(item)) {
-        navigatedItem = item;
-      }
-    };
-    this.addEventListener("focusin", rememberFocus);
-    try {
-      await showMenu.call(this);
-    } finally {
-      this.removeEventListener("focusin", rememberFocus);
-    }
-    if (showEpoch.get(this) !== epoch || !this.open || !this.popup?.active || !navigatedItem?.isConnected || !this.contains(navigatedItem))
-      return;
-    const siblings = navigatedItem.slot === "submenu" ? Array.from(navigatedItem.parentElement?.children ?? []).filter(
-      (item) => item.localName === "wa-dropdown-item"
-    ) : this.getItems();
-    siblings.forEach((item) => {
-      item.active = item === navigatedItem;
-    });
-    navigatedItem.focus({ preventScroll: true });
-    revealInScroller(navigatedItem);
-  };
-}
-
-// src/components/actions/popup-menu/internal/install-popup-menu-accessible-name.ts
-var POPUP_MENU_LABEL_ATTRIBUTE = "data-menu-label";
-var installed2 = /* @__PURE__ */ new WeakSet();
-function syncMenuName(dropdown) {
-  const menu = dropdown.menu;
-  if (!menu || !dropdown.classList.contains("kui-popup-menu")) return;
-  const name = dropdown.getAttribute(POPUP_MENU_LABEL_ATTRIBUTE)?.trim();
-  if (name) menu.setAttribute("aria-label", name);
-  else menu.removeAttribute("aria-label");
-}
-function installPopupMenuAccessibleName(prototype) {
-  if (installed2.has(prototype)) return;
-  installed2.add(prototype);
-  const target = prototype;
-  const firstUpdated = target.firstUpdated;
-  const showMenu = target.showMenu;
-  target.firstUpdated = function(changed) {
-    firstUpdated.call(this, changed);
-    syncMenuName(this);
-  };
-  target.showMenu = function() {
-    syncMenuName(this);
-    return showMenu.call(this);
-  };
-}
-var installedItems = /* @__PURE__ */ new WeakSet();
-function installPopupMenuSubmenuName(prototype) {
-  if (installedItems.has(prototype)) return;
-  installedItems.add(prototype);
-  const target = prototype;
-  const openSubmenu = target.openSubmenu;
-  target.openSubmenu = function() {
-    const submenu = this.submenuElement;
-    if (submenu && this.closest(".kui-popup-menu"))
-      submenu.setAttribute("aria-labelledby", "label");
-    return openSubmenu.call(this);
-  };
-}
-
-// src/components/actions/popup-menu/internal/install-popup-menu-keyboard.ts
-var installed3 = /* @__PURE__ */ new WeakSet();
-function installPopupMenuKeyboard(prototype) {
-  if (installed3.has(prototype)) return;
-  installed3.add(prototype);
-  const target = prototype;
-  const makeSelection = target.makeSelection;
-  target.makeSelection = function(item, event) {
-    if (event instanceof KeyboardEvent && this.classList.contains("kui-popup-menu") && !item.disabled) {
-      item.click();
-      return;
-    }
-    makeSelection.call(this, item, event);
-  };
-}
-
-// src/components/actions/popup-menu/internal/install-popup-menu-lifecycle.ts
-var installed4 = /* @__PURE__ */ new WeakSet();
-function installPopupMenuLifecycle(prototype) {
-  if (installed4.has(prototype)) return;
-  installed4.add(prototype);
-  const target = prototype;
-  const showMenu = target.showMenu;
-  const hideMenu = target.hideMenu;
-  const hiding = /* @__PURE__ */ new WeakMap();
-  target.showMenu = function() {
-    const transition = hiding.get(this);
-    if (transition && this.open && this.popup?.active && this.classList.contains("kui-popup-menu")) {
-      this.popup.active = false;
-      transition.reopened = true;
-    }
-    return showMenu.call(this);
-  };
-  target.hideMenu = async function() {
-    const scoped = this.classList.contains("kui-popup-menu");
-    const transition = { reopened: false };
-    if (scoped) hiding.set(this, transition);
-    await hideMenu.call(this);
-    if (scoped && hiding.get(this) === transition && this.open && this.isConnected && this.popup?.active && !transition.reopened) {
-      this.popup.active = false;
-      void this.showMenu();
-    }
-    if (hiding.get(this) === transition) hiding.delete(this);
-  };
-}
-
-// src/components/actions/popup-menu/internal/install-popup-menu-submenu-focus.ts
-var installed5 = /* @__PURE__ */ new WeakSet();
-var inputEvents = ["keydown", "pointerdown"];
-function installPopupMenuSubmenuFocus(prototype) {
-  if (installed5.has(prototype)) return;
-  installed5.add(prototype);
-  const target = prototype;
-  const openSubmenu = target.openSubmenu;
-  const closeSubmenu = target.closeSubmenu;
-  const submenuOpen = Object.getOwnPropertyDescriptor(prototype, "submenuOpen");
-  if (submenuOpen?.set) {
-    Object.defineProperty(prototype, "submenuOpen", {
-      ...submenuOpen,
-      set(value) {
-        const wasOpen = this.submenuOpen;
-        submenuOpen.set.call(this, value);
-        if (value && wasOpen && this.submenuElement?.hidden && this.closest("wa-dropdown.kui-popup-menu"))
-          void this.openSubmenu();
-      }
-    });
-  }
-  target.closeSubmenu = async function() {
-    const submenu = this.submenuElement;
-    await closeSubmenu.call(this);
-    if (this.submenuOpen && submenu?.hidden && this.isConnected && this.closest("wa-dropdown.kui-popup-menu"))
-      void this.openSubmenu();
-  };
-  target.openSubmenu = async function() {
-    const submenu = this.submenuElement;
-    if (!this.closest("wa-dropdown.kui-popup-menu") || !submenu)
-      return openSubmenu.call(this);
-    if (submenu.classList.contains("show")) {
-      if (!submenu.hidden) return;
-      submenu.classList.remove("show");
-    }
-    let desired;
-    let input;
-    const trackInput = (event) => {
-      input = event;
-    };
-    const trackFocus = (event) => {
-      const item = event.composedPath().find(
-        (node) => node instanceof HTMLElement && node.localName === "wa-dropdown-item" && node.getAttribute("slot") === "submenu"
-      );
-      const items = this.getSubmenuItems();
-      if (!item || !items.includes(item)) return;
-      const fromInput = input !== void 0 && input.eventPhase !== Event.NONE;
-      if (item !== items[0] || fromInput) desired = item;
-    };
-    for (const type of inputEvents)
-      document.addEventListener(type, trackInput, true);
-    submenu.addEventListener("focusin", trackFocus);
-    try {
-      await openSubmenu.call(this);
-    } finally {
-      window.setTimeout(() => {
-        for (const type of inputEvents)
-          document.removeEventListener(type, trackInput, true);
-        submenu.removeEventListener("focusin", trackFocus);
-        const items = this.getSubmenuItems();
-        const selected = desired;
-        if (!selected || selected === items[0] || !this.isConnected || !this.submenuOpen || submenu.hidden || document.activeElement !== items[0])
-          return;
-        items.forEach((item) => item.active = item === selected);
-        selected.focus({ preventScroll: true });
-        revealInScroller(selected);
-      }, 0);
-    }
-  };
-}
-
-// src/components/actions/popup-menu/internal/install-popup-menu-submenu-placement.ts
-var installed6 = /* @__PURE__ */ new WeakSet();
-var phoneWidth = "(max-width: 480px)";
-var viewportInset = 8;
-var menuGap = 4;
-function phoneSubmenuPosition(parent, submenu, viewport, rtl) {
-  const width = Math.min(submenu.width, viewport.width - 2 * viewportInset);
-  const height = submenu.height;
-  const below = Math.max(
-    0,
-    viewport.height - parent.bottom - menuGap - viewportInset
-  );
-  const above = Math.max(0, parent.top - menuGap - viewportInset);
-  const useBelow = height <= below || height > above && below >= above;
-  const availableHeight = useBelow ? below : above;
-  const left = rtl ? parent.right - width : parent.left;
-  return {
-    left: Math.max(
-      viewportInset,
-      Math.min(left, viewport.width - viewportInset - width)
-    ),
-    top: useBelow ? parent.bottom + menuGap : parent.top - menuGap - Math.min(height, availableHeight),
-    maxHeight: availableHeight,
-    maxWidth: viewport.width - 2 * viewportInset
-  };
-}
-function clearPhoneStyles(submenu) {
-  for (const property of [
-    "position",
-    "left",
-    "top",
-    "max-width",
-    "max-height",
-    "box-sizing",
-    "overflow-y"
-  ])
-    submenu.style.removeProperty(property);
-}
-function remeasureSafeTriangle(dropdown, item) {
-  if (typeof dropdown.updateSafeTriangleCoordinates !== "function") return;
-  const update = () => {
-    if (dropdown.isConnected && item.submenuOpen)
-      dropdown.updateSafeTriangleCoordinates(item);
-  };
-  window.requestAnimationFrame(() => {
-    update();
-    const animations = item.submenuElement?.getAnimations?.() ?? [];
-    if (animations.length > 0)
-      void Promise.all(animations.map((animation) => animation.finished)).then(
-        update,
-        () => void 0
-      );
-  });
-}
-function installPopupMenuSubmenuPlacement(prototype) {
-  if (installed6.has(prototype)) return;
-  installed6.add(prototype);
-  const target = prototype;
-  const positionSubmenu = target.positionSubmenu;
-  target.positionSubmenu = function(item) {
-    if (!this.classList.contains("kui-popup-menu")) {
-      positionSubmenu.call(this, item);
-      return;
-    }
-    const submenu = item.submenuElement;
-    if (submenu) remeasureSafeTriangle(this, item);
-    if (!window.matchMedia(phoneWidth).matches || !submenu || !this.menu) {
-      if (submenu) clearPhoneStyles(submenu);
-      positionSubmenu.call(this, item);
-      return;
-    }
-    window.queueMicrotask(() => {
-      if (!this.isConnected || !item.submenuOpen || !window.matchMedia(phoneWidth).matches || !this.menu || !submenu.isConnected)
-        return;
-      const parentItem = item.parentElement?.localName === "wa-dropdown-item" ? item.parentElement : void 0;
-      const parentMenu = parentItem?.submenuElement ?? this.menu;
-      submenu.style.position = "fixed";
-      submenu.style.maxWidth = `calc(100vw - ${2 * viewportInset}px)`;
-      submenu.style.maxHeight = "none";
-      submenu.style.boxSizing = "border-box";
-      submenu.style.overflowY = "auto";
-      const placement = phoneSubmenuPosition(
-        parentMenu.getBoundingClientRect(),
-        submenu.getBoundingClientRect(),
-        { width: window.innerWidth, height: window.innerHeight },
-        window.getComputedStyle(this).direction === "rtl"
-      );
-      submenu.style.left = `${placement.left}px`;
-      submenu.style.top = `${placement.top}px`;
-      submenu.style.maxHeight = `${placement.maxHeight}px`;
-      submenu.style.maxWidth = `${placement.maxWidth}px`;
-      submenu.setAttribute(
-        "data-placement",
-        placement.top >= parentMenu.getBoundingClientRect().bottom ? "bottom-start" : "top-start"
-      );
-    });
-  };
-}
 
 // src/components/actions/popup-menu/register/popup-menu-register.ts
-installPopupMenuKeyboard(WaDropdown.prototype);
-installPopupMenuLifecycle(WaDropdown.prototype);
-installDropdownShowFocus(WaDropdown.prototype);
-installPopupMenuSubmenuFocus(WaDropdownItem.prototype);
-installPopupMenuSubmenuPlacement(WaDropdown.prototype);
-installPopupMenuAccessibleName(WaDropdown.prototype);
-installPopupMenuSubmenuName(WaDropdownItem.prototype);
+installPopupMenus();
 installHelpTags();
 var popupMenuElementsRegistered = true;