@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/pane.d.ts

@@ -0,0 +1,225 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
+import { CssColor } from './css-values.js';
+
+/**
+ * What clear (fully transparent) chrome fades in as content scrolls beneath
+ * it: `none` stays clear; `material` fades in the translucent chrome
+ * material; `surface` fades in the opaque surface. The fade tracks the scroll
+ * over `scrollEdgeDistance` (opacity only), from the scroll state
+ * `wireScrollDividers` reports; unwired, the chrome stays clear.
+ */
+type ScrollEdge = 'none' | 'material' | 'surface';
+
+/** The color scheme an app declares for a {@link SurfaceTint}'s color. */
+type SurfaceTintScheme = 'light' | 'dark';
+/**
+ * A scoped tint for a layout surface: the app's color (usually sampled from
+ * artwork it already knows) and the scheme that color belongs to. Kerf does no
+ * color detection; `scheme` says whether the color reads as a light or a dark
+ * surface. Inside the scope the surface, raised surface, text, quiet text, and
+ * everything built on them (quiet fills, separators' backdrop, the chrome
+ * material) re-derive from the color, with lightness clamped so text keeps
+ * WCAG AA over any color.
+ */
+interface SurfaceTint {
+    color: CssColor;
+    scheme: SurfaceTintScheme;
+    /**
+     * An optional accent (usually the artwork's most vivid color). The scope's
+     * brand ramp re-derives from it: loud fills and their text, brand text and
+     * links, text on brand fills, and the focus ring, each clamped to keep AA.
+     */
+    accent?: CssColor;
+}
+
+/**
+ * Logical pane sides: where a {@link Pane} can show a separator and where it can
+ * compensate for a device safe-area inset.
+ */
+type PaneSeparatorSide = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+/** Semantic root elements supported by {@link Pane}. */
+type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';
+/** Semantic elements supported by the scrolling content slot. */
+type PaneContentElement = 'div' | 'main' | 'nav' | 'section';
+type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-separator-block-start'?: never;
+    'data-separator-block-end'?: never;
+    'data-separator-inline-start'?: never;
+    'data-separator-inline-end'?: never;
+    'data-safe-area-block-start'?: never;
+    'data-safe-area-block-end'?: never;
+    'data-safe-area-inline-start'?: never;
+    'data-safe-area-inline-end'?: never;
+    'data-chrome-placement'?: never;
+    'data-chrome-dividers'?: never;
+    'data-appearance'?: never;
+    'data-background'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
+    'data-deep-inset'?: never;
+    'data-outlined'?: never;
+    'data-scroll-clearance'?: never;
+    'data-header-presentation'?: never;
+    'data-header-material'?: never;
+    'data-scroll-edge'?: never;
+    'data-scroll-edge-distance'?: never;
+    'data-header-overlay'?: never;
+}>;
+/** How a Pane's header and footer relate to its scrolling content. */
+type PaneChromePlacement = 'fixed' | 'auto';
+/**
+ * When a Pane draws the divider between its pinned header or footer and its
+ * scrolling content: `scroll` while content is scrolled away beneath that
+ * chrome, as `wireScrollDividers` reports; `always`; or `none`.
+ */
+type PaneChromeDividers = 'scroll' | 'always' | 'none';
+/**
+ * How a Pane's header relates to its scrolling content: `docked` in its own
+ * row above the content, or `overlay` laid over the content's top edge on the
+ * translucent chrome material, so content scrolls visibly beneath it.
+ * `clear` lays it over
+ * the same edge fully transparent, for chrome over imagery: legibility comes
+ * from glass control groups or a scrim, and with `scrollEdge="material"` the
+ * chrome material fades in once content scrolls beneath it.
+ */
+type PaneHeaderPresentation = 'docked' | 'overlay' | 'clear';
+/** Background treatment of the Pane's scrolling work surface. */
+type PaneAppearance = 'default' | 'sunken';
+interface PaneProps {
+    /** Optional fixed chrome above the scrolling content, arranged vertically. */
+    header?: KerfUiContent;
+    /** The pane's primary vertical, scrolling content stack. */
+    children?: KerfUiContent;
+    /** Optional fixed chrome below the scrolling content. */
+    footer?: KerfUiContent;
+    /**
+     * Whether the header and footer stay pinned around the scrolling content.
+     * `fixed` (default) always pins them. `auto` pins them while the pane is
+     * tall enough, and below 480px of height (30rem, so it scales with the text
+     * size) lets the whole pane scroll as one column, so tall chrome can never
+     * squeeze the content to nothing.
+     */
+    chromePlacement?: PaneChromePlacement;
+    /**
+     * The divider under the header and over the footer, where they meet the
+     * scrolling content. Omitted defaults to `scroll` for a plain pane and
+     * `always` for `appearance="sunken"`. `scroll` shows the header's divider only
+     * while the content is scrolled down, and the footer's only while more
+     * content lies below — never when the content fits — once
+     * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
+     * the pane; unwired, neither shows. `always` shows both; `none` neither.
+     * The line is drawn inside the chrome, so no state moves the content.
+     */
+    chromeDividers?: PaneChromeDividers;
+    /**
+     * `docked` (default) gives the header its own row above the scrolling
+     * content. `overlay` lays the header over the content's top edge on the
+     * translucent chrome material (`--kui-chrome-material`, opaque under
+     * `prefers-reduced-transparency`, forced colors, or without
+     * `backdrop-filter`), so content scrolls visibly beneath it. Once
+     * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above
+     * the pane it measures the header and publishes its height as the
+     * `--kui-scroll-clearance-block-start` context, which the content adds to
+     * its block-start padding and `scroll-padding` without any
+     * `scrollClearance` prop, so the first item, and anything focused or
+     * scrolled into view, rests clear of the header. Until then, and with
+     * `chromePlacement="auto"`, the header stays docked. Keep overlay header
+     * text in the normal text color: quiet text can fall below AA over the
+     * content passing beneath it.
+     */
+    headerPresentation?: PaneHeaderPresentation;
+    /**
+     * With `headerPresentation="clear"`, `material` fades the chrome material
+     * in behind the header once content scrolls beneath it (default `none`).
+     */
+    scrollEdge?: ScrollEdge;
+    /**
+     * The scroll distance, in CSS pixels, over which the scroll edge fades in
+     * (default 60).
+     */
+    scrollEdgeDistance?: number;
+    /** Paint the scrolling work surface with the shared lowered-surface color. */
+    appearance?: PaneAppearance;
+    /**
+     * Paint the whole pane, header and footer included, in an app-chosen color
+     * (`uiColor('surface-raised')`, `fillColor('#1f2a44')`, or `colorVar(…)`
+     * from `@kerfjs/ui/css-values`). It replaces the appearance's fill: a sunken
+     * pane drops its lowered color and grain. Omitted, the pane keeps its
+     * default (transparent, or the sunken surface). Forced colors paint
+     * `Canvas`. Keep text at AA over the color; a dark color needs a matching
+     * tint or dark tones for its content.
+     */
+    background?: CssColor;
+    /**
+     * A scoped tint: `{ color, scheme }`, the app's color and the scheme it
+     * belongs to. The pane paints the tinted surface (unless `background` is
+     * set) and its whole subtree, chrome material and quiet fills included,
+     * re-derives its surface and text tokens from the color with lightness
+     * clamped to keep text at WCAG AA. Without relative color syntax, or under
+     * `prefers-contrast: more`, the scope keeps the plain palette in the
+     * declared scheme.
+     */
+    tint?: SurfaceTint;
+    /**
+     * Clear chrome that lies over the scrolling content's block-start and/or
+     * block-end edge, such as a `DialogSurface` floating footer over a filling
+     * Pane. The content scroller adds the inherited
+     * `--kui-scroll-clearance-block-*` context that chrome publishes to its block
+     * padding and `scroll-padding`, so content scrolls visibly beneath the chrome
+     * while its first and last items (and anything focused or scrolled into
+     * view) can still rest clear of it. Defaults to none.
+     */
+    scrollClearance?: ScrollClearance;
+    /** Add 8px to every side of scrolling content (default: false). */
+    deepInset?: boolean;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the Pane root. */
+    tabIndex?: 0 | -1;
+    /** Keep the standard focus outline visible, such as for a drop target. */
+    outlined?: boolean;
+    /** Root semantics. Defaults to `div`. */
+    element?: PaneElement;
+    /** Scrolling content semantics. Defaults to `div`. */
+    contentElement?: PaneContentElement;
+    /** Independent logical-edge separator lines. Defaults to none. */
+    separators?: readonly PaneSeparatorSide[];
+    /**
+     * Sides on which the pane may compensate for a device safe-area inset.
+     * Defaults to every side: the pane pads its slots for each side that still
+     * reaches an unsafe screen edge, as its surrounding layout reports, while its
+     * background and separators paint through. List only the sides an app-owned
+     * layout places at a screen edge, or pass `[]` to opt out.
+     */
+    safeAreaEdges?: readonly PaneSeparatorSide[];
+    id?: string;
+    /** Accessible name for a landmark root such as `aside` or `main`. */
+    label?: string;
+    /** Accessible name for a landmark scrolling slot such as `nav`. */
+    contentLabel?: string;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+    /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */
+    rootAttributes?: PaneRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A pane's configuration, apart from its content and styling hooks: the props a
+ * composite that renders a `Pane` for the app (a Workbench panel or work area,
+ * 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'>;
+/**
+ * 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;
+
+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 };

package/dist/pane.js

@@ -0,0 +1,6 @@
+export { Pane } from './chunk-M5KZ26VV.js';
+
+
+
+
+//# sourceMappingURL=pane.js.map

package/dist/pane.js.map

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

package/dist/panel-toolbar-vg6Ir5Dy.d.ts

@@ -0,0 +1,77 @@
+import { ToolbarConfig } from './toolbar.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { LucideIcon } from './lucide-icon.js';
+
+/** Which edge a collapsible panel docks to. */
+type PanelSide = 'left' | 'right' | 'bottom';
+/**
+ * The standard collapse/expand icon for a panel `side` and `collapsed` state,
+ * so every app's sidebars and drawers use one recognizable convention:
+ * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`
+ * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while
+ * collapsed. Exposed so an app can render its own toggle affordance.
+ */
+declare function collapsiblePanelToggleIcon(side: PanelSide, collapsed: boolean): {
+    icon: Parameters<typeof LucideIcon>[0]['icon'];
+    name: string;
+};
+/**
+ * The standard collapse toggle a panel toolbar renders. The app handles the
+ * button's `data-action` and flips its own `collapsed` flag.
+ */
+interface PanelToggle {
+    /** The `data-action` the toggle button carries. */
+    action: string;
+    /**
+     * The panel's short title-style name ("Navigator", "Build Output"). It is
+     * the toggle group's accessible name and completes the default "Show …" /
+     * "Hide …" label ("Show Navigator"), so it follows the title-style rule in
+     * `docs/writing.md`; it is never recapitalized.
+     */
+    name: string;
+    /** Accessible label while the panel is collapsed. Defaults to `Show {name}`. */
+    showLabel?: string;
+    /** Accessible label while the panel is open. Defaults to `Hide {name}`. */
+    hideLabel?: string;
+}
+/**
+ * A collapsible panel's top toolbar, composed so its groups follow the
+ * panel's open state.
+ *
+ * - `title` precedes the `leading` zone. Groups may appear in any of the
+ *   `leading`, `center`, and `trailing` zones while the panel is open.
+ * - Groups marked `relocateOnCollapse` move to the work area's toolbar while
+ *   the panel is collapsed, preserving their order across the three zones.
+ * - `toggle` is always the last group: in the panel's toolbar while it is
+ *   open, and right after the relocated groups in the work area's toolbar
+ *   while it is collapsed.
+ *
+ * Relocated content renders in both places while the panel is collapsed (the
+ * panel's copy is inert), so give it no `id`s. Pass groups directly or in
+ * arrays so their render-time annotation remains available to the panel.
+ *
+ * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,
+ * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no
+ * divider of its own: the panel's `Pane` draws the line under it while the
+ * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).
+ */
+interface PanelToolbar extends ToolbarConfig {
+    /** Accessible name of the panel's toolbar. */
+    label: string;
+    title?: KerfUiContent;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
+    toggle?: PanelToggle;
+}
+/** A panel's fixed bottom toolbar, below its optional footer content. */
+interface PanelBottomToolbar extends ToolbarConfig {
+    label: string;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
+}
+/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */
+type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';
+
+export { type PanelSide as P, type PanelToolbar as a, type PanelChromePlacement as b, type PanelBottomToolbar as c, type PanelToggle as d, collapsiblePanelToggleIcon as e };

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

@@ -0,0 +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.
+ */
+declare const popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };

package/dist/popup-menu-register.js

@@ -0,0 +1,336 @@
+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';
+
+// 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);
+installHelpTags();
+var popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };
+
+//# sourceMappingURL=popup-menu-register.js.map