@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.41

package/dist/text.js.map

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

package/dist/token-search-field.d.ts

@@ -1,4 +1,5 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface TokenSearchToken {
     value: string;
@@ -6,7 +7,15 @@ interface TokenSearchToken {
     offset?: number;
     accessibleLabel?: string;
 }
-interface TokenSearchFieldProps {
+type TokenSearchEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-key'?: never;
+    'data-morph-skip'?: never;
+    'data-token-search-editor'?: never;
+    'data-token-count'?: never;
+    'data-placeholder'?: never;
+}>;
+interface TokenSearchFieldBaseProps {
     id: string;
     label: string;
     query?: string;
@@ -15,29 +24,37 @@ interface TokenSearchFieldProps {
     tokenPlaceholder?: string;
     disabled?: boolean;
     autofocus?: boolean;
-    /** Allow an empty field to render as one iconic action. */
-    collapsible?: boolean;
-    /** Keep an empty collapsible field open while the application owns focus. */
-    expanded?: boolean;
-    expandAction?: string;
-    expandLabel?: string;
-    leading?: SafeHtml;
-    trailing?: SafeHtml;
+    leading?: KerfUiContent;
+    trailing?: KerfUiContent;
     editAction?: string;
     removeAction?: string;
     clearAction?: string;
     clearLabel?: string;
     className?: string;
-    editorAttributes?: Readonly<Record<`data-${string}`, string>>;
+    editorAttributes?: TokenSearchEditorAttributes;
 }
+type TokenSearchCollapsibleProps = {
+    /** Allow an empty field to render as one iconic action. */
+    collapsible: true;
+    /** Keep an empty collapsible field open while the application owns focus. */
+    expanded?: boolean;
+    expandAction?: string;
+    expandLabel?: string;
+} | {
+    collapsible?: false;
+    expanded?: never;
+    expandAction?: never;
+    expandLabel?: never;
+};
+type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps;
 interface TokenSearchFieldValue {
     query: string;
     tokens: TokenSearchToken[];
 }
-declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, }: TokenSearchFieldProps): SafeHtml;
+declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, }: TokenSearchFieldProps): kerfjs.SafeHtml;
 /** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
 declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
 /** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
 declare function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
 
-export { TokenSearchField, type TokenSearchFieldProps, type TokenSearchFieldValue, type TokenSearchToken, placeTokenSearchCaret, readTokenSearchField };
+export { type TokenSearchEditorAttributes, TokenSearchField, type TokenSearchFieldProps, type TokenSearchFieldValue, type TokenSearchToken, placeTokenSearchCaret, readTokenSearchField };

package/dist/token-search-field.js

@@ -1,4 +1,4 @@
-export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-TIGSG6BX.js';
 
 
 //# sourceMappingURL=token-search-field.js.map

package/dist/toolbar-control-group.d.ts

@@ -1,15 +1,41 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+type ToolbarControlGroupAppearance = 'contained' | 'borderless';
+type ToolbarControlGroupTone = 'default' | 'dark';
+type ToolbarControlGroupButtonAppearance = 'plain' | 'push';
+type ToolbarControlGroupShape = 'pill' | 'rounded';
+type ToolbarControlGroupSize = 'default' | 'compact';
+type ToolbarControlGroupDensity = 'comfortable' | 'tight';
+type ToolbarControlGroupContent = 'icon' | 'text' | 'mixed' | 'avatar';
+type ToolbarControlGroupSelectedChrome = 'raised' | 'filled' | 'outline';
+type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';
 interface ToolbarControlGroupProps {
-    children: SafeHtml | SafeHtml[];
+    children: KerfUiContent;
     label?: string;
     className?: string;
     expanded?: boolean;
     single?: boolean;
-    appearance?: 'contained' | 'borderless';
-    tone?: 'default' | 'dark';
-    buttonAppearance?: 'plain' | 'push';
+    appearance?: ToolbarControlGroupAppearance;
+    tone?: ToolbarControlGroupTone;
+    buttonAppearance?: ToolbarControlGroupButtonAppearance;
+    /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */
+    shape?: ToolbarControlGroupShape;
+    size?: ToolbarControlGroupSize;
+    density?: ToolbarControlGroupDensity;
+    content?: ToolbarControlGroupContent;
+    selectedChrome?: ToolbarControlGroupSelectedChrome;
+    selectedTone?: ToolbarControlGroupSelectedTone;
+    /** Size a nested Web Awesome dropdown trigger as part of this group. */
+    nestedDropdown?: boolean;
+    /** Add contrast behind photo-backed avatar content. */
+    scrim?: boolean;
+    /**
+     * Avatar image URL. A single-control group paints it on the group; a
+     * multi-control group paints it only on the pressed selection highlight.
+     */
+    avatarImage?: string;
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance }: ToolbarControlGroupProps): SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape, size, density, content, selectedChrome, selectedTone, nestedDropdown, scrim, avatarImage, }: ToolbarControlGroupProps): kerfjs.SafeHtml;
 
-export { ToolbarControlGroup, type ToolbarControlGroupProps };
+export { ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupTone };

package/dist/toolbar-control-group.js

@@ -1,3 +1,3 @@
-export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
+export { ToolbarControlGroup } from './chunk-B6JYRX3P.js';
 
 //# sourceMappingURL=toolbar-control-group.js.map

package/dist/toolbar-text.d.ts

@@ -1,11 +1,38 @@
 import * as kerfjs from 'kerfjs';
 
-type ToolbarTextSize = 'large' | 'default' | 'small';
-interface ToolbarTextProps {
+type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';
+/** ARIA heading level for a title exposed as a heading landmark. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface ToolbarTextBaseProps {
     text: string;
     size?: ToolbarTextSize;
     className?: string;
+    /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */
+    id?: string;
+    /**
+     * Expose heading semantics (`role="heading"` + `aria-level`) so the text acts as
+     * a heading landmark — e.g. a page's primary title. Omit to keep the plain span
+     * (the default), which suits a dialog title referenced via `aria-labelledby`.
+     */
+    headingLevel?: HeadingLevel;
+    /** Render the text as an unanimated loading skeleton instead of its value. */
+    placeholder?: boolean;
+    /**
+     * Show a trailing ellipsis (…) where the text is truncated — on the single line
+     * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip
+     * instead. Default true.
+     */
+    ellipsis?: boolean;
 }
-declare function ToolbarText({ text, size, className }: ToolbarTextProps): kerfjs.SafeHtml;
+type ToolbarTextWrappingProps = {
+    /** Wrap onto multiple lines; combine with `maxLines` to cap them. */
+    wrap: true;
+    maxLines?: number | null;
+} | {
+    wrap?: false;
+    maxLines?: never;
+};
+type ToolbarTextProps = ToolbarTextBaseProps & ToolbarTextWrappingProps;
+declare function ToolbarText({ text, size, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, }: ToolbarTextProps): kerfjs.SafeHtml;
 
-export { ToolbarText, type ToolbarTextProps, type ToolbarTextSize };
+export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };

package/dist/toolbar-text.js

@@ -1,3 +1,5 @@
-export { ToolbarText } from './chunk-GY5WH7TO.js';
+export { ToolbarText } from './chunk-V6GQKOX2.js';
+
+
 
 //# sourceMappingURL=toolbar-text.js.map

package/dist/toolbar.d.ts

@@ -1,13 +1,16 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { D as DividerSides } from './divider-sides-BzB6rphT.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ToolbarProps {
-    leading?: SafeHtml;
-    center?: SafeHtml;
-    trailing?: SafeHtml;
+    leading?: KerfUiContent;
+    center?: KerfUiContent;
+    trailing?: KerfUiContent;
     label?: string;
-    divider?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. Defaults to bottom. */
+    dividerSides?: DividerSides;
     className?: string;
 }
-declare function Toolbar({ leading, center, trailing, label, divider, className }: ToolbarProps): SafeHtml;
+declare function Toolbar({ leading, center, trailing, label, dividerSides, className, }: ToolbarProps): kerfjs.SafeHtml;
 
-export { Toolbar, type ToolbarProps };
+export { DividerSides, Toolbar, type ToolbarProps };

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-DAFFDO33.js';
+export { Toolbar } from './chunk-VXFGMDA7.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/value-table.d.ts

@@ -1,18 +1,22 @@
+import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 interface ValueTableRowProps {
     label: string | SafeHtml;
     value: string | SafeHtml;
     icon?: SafeHtml;
     className?: string;
+    /** Render the value as an unanimated loading skeleton, keeping the field label. */
+    placeholder?: boolean;
 }
-declare function ValueTableRow({ label, value, icon, className }: ValueTableRowProps): SafeHtml;
+declare function ValueTableRow({ label, value, icon, className, placeholder, }: ValueTableRowProps): SafeHtml;
 
 interface ValueTableProps {
     label: string;
     className?: string;
-    children: SafeHtml | readonly SafeHtml[];
+    children: KerfUiContent;
 }
-declare function ValueTable({ label, className, children }: ValueTableProps): SafeHtml;
+declare function ValueTable({ label, className, children, }: ValueTableProps): kerfjs.SafeHtml;
 
 export { ValueTable, type ValueTableProps, ValueTableRow, type ValueTableRowProps };

package/dist/value-table.js

@@ -1,3 +1,5 @@
-export { ValueTable, ValueTableRow } from './chunk-R6JHHBKQ.js';
+export { ValueTable, ValueTableRow } from './chunk-V6HCTCVD.js';
+
+
 
 //# sourceMappingURL=value-table.js.map

package/dist/webawesome.d.ts

@@ -23,6 +23,7 @@ declare module 'kerfjs/jsx-runtime' {
                 'aria-label'?: string;
                 value?: string;
                 placeholder?: string;
+                hint?: string;
                 disabled?: boolean;
             };
             'wa-option': KerfCustomElement & {

package/dist/wire-catalog.d.ts

@@ -0,0 +1,57 @@
+interface WireCatalogOptions {
+    /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */
+    onSelect: (id: string) => void;
+    /** Invoked when the sidebar collapse/expand control is activated. */
+    onToggleSidebar?: () => void;
+    /** Invoked when the theme toggle is activated. */
+    onToggleTheme?: () => void;
+    /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
+    onToggleSecondary?: () => void;
+    /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
+    urlParam?: string;
+    /**
+     * Reveal the chosen sidebar row after selection. `true` uses desktop-safe
+     * defaults; pass options to customize scroll alignment or the media guard.
+     */
+    revealSelection?: boolean | CatalogRevealOptions;
+    selectAction?: string;
+    toggleSidebarAction?: string;
+    toggleThemeAction?: string;
+    toggleSecondaryAction?: string;
+}
+interface CatalogRevealOptions {
+    /** Scroll alignment within the sidebar. Default `'nearest'`. */
+    block?: ScrollLogicalPosition;
+    /** Cross-axis alignment. Default `'nearest'`. */
+    inline?: ScrollLogicalPosition;
+    /** Scroll behavior. Default `'auto'`. */
+    behavior?: ScrollBehavior;
+    /**
+     * Only reveal when this media query matches. Defaults to the Catalog's
+     * desktop layout; pass `false` to reveal at every viewport size.
+     */
+    media?: string | false;
+}
+/**
+ * Reveal one Catalog sidebar entry after the controlled render settles without
+ * moving focus. Returns a cancellation function for rapid selection changes.
+ */
+declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
+/**
+ * Keep a Catalog's opt-in geometry overlay synchronized with its preview.
+ * Specimens receive computed border highlights (or a dashed bound when they
+ * have no border and are transparent), while positive computed margins use
+ * devtools-style orange bands. CSS/stylesheet-only changes are observed too.
+ * Returns a disposer.
+ */
+declare function wireCatalogGeometryOverlay(root: HTMLElement): () => void;
+/**
+ * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
+ * item selection (and the related-entry popup menu), the sidebar collapse toggle, and
+ * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
+ * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
+ * Returns a disposer.
+ */
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, }: WireCatalogOptions): () => void;
+
+export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };

package/dist/wire-catalog.js

@@ -0,0 +1,302 @@
+import { delegate } from 'kerfjs';
+
+// src/wire-catalog.ts
+var catalogDesktopMedia = "(min-width: 52.01rem)";
+function revealCatalogEntry(root, id, {
+  block = "nearest",
+  inline = "nearest",
+  behavior = "auto",
+  media = catalogDesktopMedia
+} = {}) {
+  const view = root.ownerDocument.defaultView;
+  if (!view || media && !view.matchMedia(media).matches) return () => {
+  };
+  const frame = view.requestAnimationFrame(() => {
+    for (const item of root.querySelectorAll("[data-item-id]")) {
+      if (item.dataset.itemId !== id) continue;
+      item.scrollIntoView({ block, inline, behavior });
+      break;
+    }
+  });
+  return () => view.cancelAnimationFrame(frame);
+}
+function pixels(value) {
+  const number = Number.parseFloat(value);
+  if (!Number.isFinite(number)) return 0;
+  return value.trim().endsWith("rem") ? number * 16 : number;
+}
+function isTransparent(color) {
+  const normalized = color.replace(/\s+/g, "");
+  return normalized === "transparent" || /(?:,|\/)0(?:\.0+)?\)$/.test(normalized);
+}
+function geometrySpecimens(canvas) {
+  const result = [];
+  for (const example of canvas.querySelectorAll(
+    "[data-catalog-example]"
+  )) {
+    if (example.closest("[data-catalog-geometry-overlay-skip]")) continue;
+    for (const child of example.children) {
+      if (child.matches("[data-catalog-geometry-overlay]") || child.matches("[data-catalog-example-label]") || child.matches("[data-catalog-example-note]"))
+        continue;
+      result.push(child);
+    }
+  }
+  for (const element of canvas.querySelectorAll(
+    "[data-component]"
+  )) {
+    if (element.closest("[data-catalog-geometry-overlay]") || element.closest("[data-catalog-geometry-overlay-skip]") || element.closest(".kui-catalog-example"))
+      continue;
+    const parent = element.parentElement?.closest("[data-component]");
+    if (parent && canvas.contains(parent)) continue;
+    result.push(element);
+  }
+  return result;
+}
+function geometryBox(document, className, left, top, width, height) {
+  const element = document.createElement("div");
+  element.className = className;
+  element.style.transform = `translate(${left}px, ${top}px)`;
+  element.style.width = `${Math.max(0, width)}px`;
+  element.style.height = `${Math.max(0, height)}px`;
+  return element;
+}
+function effectiveBorderWidth(width, style) {
+  return style === "none" || style === "hidden" ? 0 : pixels(width);
+}
+function wireCatalogGeometryOverlay(root) {
+  const catalog = root.matches('[data-component="catalog"]') ? root : root.querySelector('[data-component="catalog"]');
+  const canvas = catalog?.querySelector(".kui-catalog__canvas");
+  const layer = catalog?.querySelector(
+    "[data-catalog-geometry-overlay]"
+  );
+  const view = root.ownerDocument.defaultView;
+  if (!catalog || !canvas || !layer || !view) return () => {
+  };
+  let frame = 0;
+  const render = () => {
+    frame = 0;
+    layer.replaceChildren();
+    if (catalog.dataset.geometryOverlay !== "true") {
+      syncObservedSpecimens([]);
+      return;
+    }
+    const base = canvas.getBoundingClientRect();
+    const specimens = geometrySpecimens(canvas);
+    syncObservedSpecimens(specimens);
+    for (const [specimenIndex, element] of specimens.entries()) {
+      const rect = element.getBoundingClientRect();
+      const style = view.getComputedStyle(element);
+      const align = pixels(
+        style.getPropertyValue("--kui-catalog-example-align")
+      );
+      const top = pixels(style.marginTop);
+      const right = Math.max(
+        0,
+        pixels(style.marginRight) - (style.direction === "rtl" ? align : 0)
+      );
+      const bottom = pixels(style.marginBottom);
+      const left = Math.max(
+        0,
+        pixels(style.marginLeft) - (style.direction === "rtl" ? 0 : align)
+      );
+      const x = rect.left - base.left + canvas.scrollLeft;
+      const y = rect.top - base.top + canvas.scrollTop;
+      const borderWidths = [
+        effectiveBorderWidth(style.borderTopWidth, style.borderTopStyle),
+        effectiveBorderWidth(style.borderRightWidth, style.borderRightStyle),
+        effectiveBorderWidth(style.borderBottomWidth, style.borderBottomStyle),
+        effectiveBorderWidth(style.borderLeftWidth, style.borderLeftStyle)
+      ];
+      if (borderWidths.some((width) => width > 0)) {
+        const border = geometryBox(
+          root.ownerDocument,
+          "kui-catalog__geometry-border",
+          x,
+          y,
+          rect.width,
+          rect.height
+        );
+        border.dataset.catalogGeometrySpecimen = String(specimenIndex);
+        border.style.borderTopWidth = `${borderWidths[0]}px`;
+        border.style.borderRightWidth = `${borderWidths[1]}px`;
+        border.style.borderBottomWidth = `${borderWidths[2]}px`;
+        border.style.borderLeftWidth = `${borderWidths[3]}px`;
+        border.style.borderRadius = style.borderRadius;
+        layer.append(border);
+      } else if (isTransparent(style.backgroundColor)) {
+        const bound = geometryBox(
+          root.ownerDocument,
+          "kui-catalog__geometry-bound",
+          x,
+          y,
+          rect.width,
+          rect.height
+        );
+        bound.dataset.catalogGeometrySpecimen = String(specimenIndex);
+        layer.append(bound);
+      }
+      const margins = [
+        ["top", top, x - left, y - top, rect.width + left + right, top],
+        [
+          "bottom",
+          bottom,
+          x - left,
+          y + rect.height,
+          rect.width + left + right,
+          bottom
+        ],
+        ["left", left, x - left, y, left, rect.height],
+        ["right", right, x + rect.width, y, right, rect.height]
+      ];
+      for (const [side, size, marginX, marginY, width, height] of margins) {
+        if (size <= 0) continue;
+        const margin = geometryBox(
+          root.ownerDocument,
+          "kui-catalog__geometry-margin",
+          marginX,
+          marginY,
+          width,
+          height
+        );
+        margin.dataset.catalogGeometrySpecimen = String(specimenIndex);
+        margin.dataset.catalogGeometrySide = side;
+        layer.append(margin);
+      }
+    }
+  };
+  const schedule = () => {
+    if (!frame) frame = view.requestAnimationFrame(render);
+  };
+  const resizeObserver = new view.ResizeObserver(schedule);
+  resizeObserver.observe(canvas);
+  const observedSpecimens = /* @__PURE__ */ new Set();
+  const syncObservedSpecimens = (specimens) => {
+    const next = new Set(specimens);
+    for (const specimen of observedSpecimens) {
+      if (next.has(specimen)) continue;
+      resizeObserver.unobserve(specimen);
+      observedSpecimens.delete(specimen);
+    }
+    for (const specimen of next) {
+      if (observedSpecimens.has(specimen)) continue;
+      resizeObserver.observe(specimen);
+      observedSpecimens.add(specimen);
+    }
+  };
+  const mutationObserver = new view.MutationObserver((records) => {
+    if (records.some(
+      ({ target }) => target !== layer && !layer.contains(target)
+    ))
+      schedule();
+  });
+  mutationObserver.observe(catalog, {
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+  mutationObserver.observe(root.ownerDocument.documentElement, {
+    attributes: true
+  });
+  const documentHead = root.ownerDocument.head;
+  if (documentHead)
+    mutationObserver.observe(documentHead, {
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+  const stylesheetLoaded = () => schedule();
+  documentHead?.addEventListener("load", stylesheetLoaded, true);
+  view.addEventListener("resize", schedule);
+  render();
+  return () => {
+    if (frame) view.cancelAnimationFrame(frame);
+    resizeObserver.disconnect();
+    mutationObserver.disconnect();
+    documentHead?.removeEventListener("load", stylesheetLoaded, true);
+    view.removeEventListener("resize", schedule);
+    layer.replaceChildren();
+  };
+}
+function wireCatalog(root, {
+  onSelect,
+  onToggleSidebar,
+  onToggleTheme,
+  onToggleSecondary,
+  urlParam,
+  revealSelection,
+  selectAction = "catalog-select",
+  toggleSidebarAction = "catalog-toggle-sidebar",
+  toggleThemeAction = "catalog-toggle-theme",
+  toggleSecondaryAction = "catalog-toggle-secondary"
+}) {
+  let cancelReveal;
+  const select = (id) => {
+    onSelect(id);
+    const view = root.ownerDocument.defaultView;
+    if (urlParam && view) {
+      const url = new URL(view.location.href);
+      url.searchParams.set(urlParam, id);
+      view.history.replaceState(null, "", url);
+    }
+    if (revealSelection) {
+      cancelReveal?.();
+      cancelReveal = revealCatalogEntry(
+        root,
+        id,
+        revealSelection === true ? void 0 : revealSelection
+      );
+    }
+  };
+  const disposers = [
+    // Sidebar items AND the footer's related-entry popup-menu items both carry
+    // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.
+    delegate(
+      root,
+      "click",
+      `[data-action="${selectAction}"]`,
+      (_event, element) => {
+        const id = element.dataset.itemId;
+        if (id) select(id);
+      }
+    )
+  ];
+  if (onToggleSidebar) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleSidebarAction}"]`,
+        () => onToggleSidebar()
+      )
+    );
+  }
+  if (onToggleTheme) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleThemeAction}"]`,
+        () => onToggleTheme()
+      )
+    );
+  }
+  if (onToggleSecondary) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleSecondaryAction}"]`,
+        () => onToggleSecondary()
+      )
+    );
+  }
+  return () => {
+    cancelReveal?.();
+    for (const dispose of disposers.splice(0)) dispose();
+  };
+}
+
+export { revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };
+
+//# sourceMappingURL=wire-catalog.js.map