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

package/dist/summary-row.d.ts

@@ -0,0 +1,56 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+
+/** `row` for a list section; `card` for a board column. */
+type SummaryRowPresentation = 'row' | 'card';
+/** A row's place in a rounded list section, so its corners match. */
+type SummaryRowListEdge = 'start' | 'end' | 'only';
+type SummaryRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-presentation'?: never;
+    'data-list-edge'?: never;
+    'data-rail'?: never;
+    'data-selected'?: never;
+    'data-dimmed'?: never;
+}>;
+interface SummaryRowProps {
+    /** The identity line: an identifier, inline status glyphs, and the title. */
+    title: KerfUiContent;
+    /** Optional leading glyph, such as a category icon. */
+    leading?: SafeHtml;
+    /** Quiet text at the end of the title line, such as a relative time. */
+    trailingMeta?: string | SafeHtml;
+    /** A wrapping line of badges, chips, and quiet text below the title. */
+    metadata?: KerfUiContent;
+    /** `row` (default) or `card`. */
+    presentation?: SummaryRowPresentation;
+    /** Title lines before clipping; default 2 for a row and 4 for a card. */
+    titleLines?: number;
+    /** A leading state rail in a semantic tone (Up Next, blocked, …). */
+    rail?: SemanticTone;
+    /** Selected state, exposed as `aria-selected`. */
+    selected?: boolean;
+    /** Dim a finished or cut item; hover and selection restore it. */
+    dimmed?: boolean;
+    /** Round the corners that meet a rounded list section's edge. */
+    listEdge?: SummaryRowListEdge;
+    /** Skip rendering while off screen in long lists (`content-visibility`). */
+    deferRendering?: boolean;
+    /** Accessible name when the visible content is not a good one. */
+    ariaLabel?: string;
+    id?: string;
+    className?: string;
+    /** Safe `data-*` identity (an item id or delegated action) on the option. */
+    rootAttributes?: SummaryRowRootAttributes;
+}
+/**
+ * A selectable, keyboard-focusable summary of one item, as a list row or a
+ * board card: an optional leading glyph and state rail, a clamped identity line
+ * with trailing quiet metadata, and a wrapping metadata line. It is a
+ * `role="option"`; place rows in a labeled `role="listbox"` and own selection
+ * and keyboard movement in the application.
+ */
+declare function SummaryRow({ title, leading, trailingMeta, metadata, presentation, titleLines, rail, selected, dimmed, listEdge, deferRendering, ariaLabel, id, className, rootAttributes, }: SummaryRowProps): SafeHtml;
+
+export { SummaryRow, type SummaryRowListEdge, type SummaryRowPresentation, type SummaryRowProps };

package/dist/summary-row.js

@@ -0,0 +1,4 @@
+export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
+
+
+//# sourceMappingURL=summary-row.js.map

package/dist/summary-row.js.map

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

package/dist/sunken-panel.d.ts

@@ -0,0 +1,38 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssFlexKeyword, CssFlex } from './css-values.js';
+
+/**
+ * Generate the sunken texture once for a document. Sunken surfaces call this
+ * as they render; it is idempotent, and on a server (no document) or without
+ * a 2D canvas it does nothing, leaving the flat lowered surface.
+ */
+declare function ensureSunkenTexture(doc?: Document | undefined): void;
+
+type SunkenPanelShape = 'rounded' | 'square';
+interface SunkenPanelProps {
+    children?: KerfUiContent;
+    /** Optional accessible landmark name for a distinct application region. */
+    ariaLabel?: string;
+    /** Corner shape: a rounded rectangle (default) or square corners. */
+    shape?: SunkenPanelShape;
+    /** Grow or shrink within a flex parent, using Grid's typed flex contract. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
+    /** Fill a parent with a definite height; use flex inside a flex layout. */
+    fill?: boolean;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel. */
+    tabIndex?: 0 | -1;
+    /** Keep the standard focus outline visible, such as for a drop target. */
+    outlined?: boolean;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A lowered application surface with one compact inset and a vertical content
+ * stack. The panel owns its background and padding; children own their own
+ * borders and internal geometry.
+ */
+declare function SunkenPanel({ children, ariaLabel, shape, flex, fill, tabIndex, outlined, className, slot, }: SunkenPanelProps): kerfjs.SafeHtml;
+
+export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape, ensureSunkenTexture };

package/dist/sunken-panel.js

@@ -0,0 +1,4 @@
+export { SunkenPanel } from './chunk-D5RGM3XA.js';
+export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+
+//# sourceMappingURL=sunken-panel.js.map

package/dist/sunken-panel.js.map

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

package/dist/surface-scaffold-register.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Importing this module registers wa-dialog, repairs wrapped native names, and
+ * measures each DialogSurface header and footer for a floating header's or
+ * footer's body clearance, shows a floating header's divider while content
+ * is scrolled beneath it, and wires a bottom sheet's resize grabber,
+ * virtual-keyboard clearance, and slide motion.
+ */
+declare const surfaceScaffoldElementsRegistered = true;
+
+export { surfaceScaffoldElementsRegistered };

package/dist/surface-scaffold-register.js

@@ -0,0 +1,254 @@
+import { syncSheetHandleValues, createSheetHandle, wireSheetHandle } from './chunk-QTSMHH5J.js';
+import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';
+
+// src/components/surfaces/surface-scaffold/internal/install-bottom-sheet.ts
+var SHEET_HANDLE_PART = "sheet-handle";
+var SHEET_HEIGHT_PROPERTY = "--_kui-dialog-surface-sheet-height";
+var KEYBOARD_INSET_PROPERTY = "--_kui-dialog-surface-keyboard-inset";
+var SHEET_MOTION_ATTRIBUTE = "data-kui-sheet-motion";
+var installed = /* @__PURE__ */ new WeakSet();
+var viewportCleanups = /* @__PURE__ */ new WeakMap();
+var surfaceOf = (host) => host.parentElement?.classList.contains("kui-dialog-surface") ? host.parentElement : null;
+var isBottomSheet = (host) => surfaceOf(host)?.getAttribute("data-presentation") === "bottom-sheet";
+var isResizable = (host) => isBottomSheet(host) && surfaceOf(host).hasAttribute("data-resizable");
+function installBottomSheet(prototype) {
+  if (installed.has(prototype)) return;
+  installed.add(prototype);
+  const target = prototype;
+  const { update, show, requestClose } = target;
+  target.update = function(changed) {
+    update.call(this, changed);
+    if (!surfaceOf(this)) return;
+    const panel = this.dialog;
+    if (!panel) return;
+    syncHandle(this, panel);
+    if (this.open) followViewport(this, panel);
+    else unfollowViewport(this);
+  };
+  target.show = function() {
+    const panel = this.dialog;
+    if (panel && surfaceOf(this)) {
+      panel.style.removeProperty(SHEET_HEIGHT_PROPERTY);
+      syncHandle(this, panel);
+    }
+    const result = show.call(this);
+    markMotion(this, "show", "enter", result);
+    void result.then(() => {
+      const handle = panel?.querySelector(
+        `:scope > [part~="${SHEET_HANDLE_PART}"]`
+      );
+      if (panel && handle && isResizable(this))
+        syncSheetHandleValues(handle, panel);
+    });
+    return result;
+  };
+  target.requestClose = function(source) {
+    const result = requestClose.call(this, source);
+    markMotion(this, "hide", "exit", result);
+    return result;
+  };
+}
+function markMotion(host, className, value, result) {
+  if (!surfaceOf(host) || !host.dialog?.classList.contains(className)) return;
+  host.setAttribute(SHEET_MOTION_ATTRIBUTE, value);
+  const clear = () => {
+    if (host.getAttribute(SHEET_MOTION_ATTRIBUTE) === value)
+      host.removeAttribute(SHEET_MOTION_ATTRIBUTE);
+  };
+  void result.then(clear, clear);
+}
+function syncHandle(host, panel) {
+  const existing = panel.querySelector(
+    `:scope > [part~="${SHEET_HANDLE_PART}"]`
+  );
+  const resizable = isResizable(host);
+  if (existing) existing.hidden = !resizable;
+  else if (resizable) createHandle(host, panel);
+}
+function createHandle(host, panel) {
+  const handle = createSheetHandle({ part: SHEET_HANDLE_PART });
+  panel.prepend(handle);
+  wireSheetHandle(handle, {
+    panel,
+    host: panel,
+    property: SHEET_HEIGHT_PROPERTY,
+    enabled: () => isResizable(host)
+  });
+}
+function keyboardInset(viewport, layoutHeight) {
+  if (viewport.scale > 1.01) return 0;
+  const inset = Math.round(layoutHeight - viewport.height - viewport.offsetTop);
+  return inset > 0 ? inset : 0;
+}
+function followViewport(host, panel) {
+  const viewport = globalThis.visualViewport;
+  if (!viewport || viewportCleanups.has(host)) return;
+  const publish = () => {
+    const inset = host.isConnected && host.open && isBottomSheet(host) ? keyboardInset(viewport, globalThis.innerHeight) : 0;
+    if (inset > 0)
+      panel.style.setProperty(KEYBOARD_INSET_PROPERTY, `${inset}px`);
+    else panel.style.removeProperty(KEYBOARD_INSET_PROPERTY);
+    if (!host.isConnected) unfollowViewport(host);
+  };
+  viewport.addEventListener("resize", publish);
+  viewport.addEventListener("scroll", publish);
+  viewportCleanups.set(host, () => {
+    viewport.removeEventListener("resize", publish);
+    viewport.removeEventListener("scroll", publish);
+    panel.style.removeProperty(KEYBOARD_INSET_PROPERTY);
+  });
+  publish();
+}
+function unfollowViewport(host) {
+  viewportCleanups.get(host)?.();
+  viewportCleanups.delete(host);
+}
+
+// src/components/surfaces/surface-scaffold/internal/install-chrome-block-size.ts
+var HEADER_BLOCK_SIZE_PROPERTY = "--_kui-dialog-surface-header-block-size";
+var FOOTER_BLOCK_SIZE_PROPERTY = "--_kui-dialog-surface-footer-block-size";
+var CHROME_PARTS = [
+  ["header", HEADER_BLOCK_SIZE_PROPERTY],
+  ["footer", FOOTER_BLOCK_SIZE_PROPERTY]
+];
+var installed2 = /* @__PURE__ */ new WeakSet();
+var observedParts = /* @__PURE__ */ new WeakSet();
+function installChromeBlockSize(prototype) {
+  if (installed2.has(prototype)) return;
+  installed2.add(prototype);
+  const target = prototype;
+  const update = target.update;
+  target.update = function(changed) {
+    update.call(this, changed);
+    if (!this.parentElement?.classList.contains("kui-dialog-surface")) return;
+    const panel = this.dialog;
+    if (!panel) return;
+    for (const [part, property] of CHROME_PARTS) {
+      const element = this.shadowRoot?.querySelector(`[part~="${part}"]`);
+      if (element) observePart(panel, element, property);
+      else panel.style.removeProperty(property);
+    }
+  };
+}
+function observePart(panel, element, property) {
+  if (observedParts.has(element)) return;
+  observedParts.add(element);
+  const publish = (blockSize) => {
+    const value = `${blockSize}px`;
+    if (panel.style.getPropertyValue(property) !== value)
+      panel.style.setProperty(property, value);
+  };
+  publish(element.getBoundingClientRect().height);
+  if (typeof ResizeObserver === "undefined") return;
+  new ResizeObserver((entries) => {
+    if (!element.isConnected) return;
+    const box = entries[entries.length - 1]?.borderBoxSize?.[0];
+    publish(box ? box.blockSize : element.getBoundingClientRect().height);
+  }).observe(element);
+}
+
+// src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts
+var installed3 = /* @__PURE__ */ new WeakSet();
+var observed = /* @__PURE__ */ new WeakSet();
+var ownedNames = /* @__PURE__ */ new WeakMap();
+function installDialogLabel(prototype) {
+  if (installed3.has(prototype)) return;
+  installed3.add(prototype);
+  const target = prototype;
+  const update = target.update;
+  target.update = function(changed) {
+    update.call(this, changed);
+    if (!this.parentElement?.classList.contains("kui-dialog-surface")) return;
+    if (!observed.has(this)) {
+      observed.add(this);
+      new MutationObserver(() => syncDialogLabel(this)).observe(this, {
+        attributes: true,
+        attributeFilter: ["aria-label", "role"]
+      });
+    }
+    syncDialogLabel(this);
+  };
+}
+function syncDialogLabel(host) {
+  if (!host.parentElement?.classList.contains("kui-dialog-surface")) return;
+  const panel = host.dialog;
+  if (!panel) return;
+  const previous = ownedNames.get(panel);
+  if (/^(alert)?dialog$/.test(host.getAttribute("role")?.trim() ?? "")) {
+    if (previous && panel.getAttribute(previous.attribute) === previous.value)
+      panel.removeAttribute(previous.attribute);
+    ownedNames.delete(panel);
+    return;
+  }
+  const externalName = ["aria-label", "aria-labelledby"].some((attribute2) => {
+    const value2 = panel.getAttribute(attribute2);
+    return value2 !== null && !(previous?.attribute === attribute2 && previous.value === value2);
+  });
+  if (externalName) {
+    if (previous && panel.getAttribute(previous.attribute) === previous.value)
+      panel.removeAttribute(previous.attribute);
+    ownedNames.delete(panel);
+    return;
+  }
+  const explicit = host.getAttribute("aria-label")?.trim();
+  const title = host.shadowRoot?.getElementById("title");
+  const attribute = !explicit && !host.withoutHeader && title ? "aria-labelledby" : "aria-label";
+  const value = attribute === "aria-labelledby" ? "title" : explicit || host.label;
+  if (previous && previous.attribute !== attribute)
+    panel.removeAttribute(previous.attribute);
+  if (panel.getAttribute(attribute) !== value)
+    panel.setAttribute(attribute, value);
+  ownedNames.set(panel, { attribute, value });
+}
+
+// src/components/surfaces/surface-scaffold/internal/install-header-scroll-divider.ts
+var HEADER_DIVIDER_PROPERTY = "--_kui-dialog-surface-header-divider";
+var SHOWN = "var(--_kui-dialog-surface-header-divider-color)";
+var THRESHOLD = 1;
+var installed4 = /* @__PURE__ */ new WeakSet();
+var wiredPanels = /* @__PURE__ */ new WeakSet();
+function installHeaderScrollDivider(prototype) {
+  if (installed4.has(prototype)) return;
+  installed4.add(prototype);
+  const target = prototype;
+  const update = target.update;
+  target.update = function(changed) {
+    update.call(this, changed);
+    if (!this.parentElement?.classList.contains("kui-dialog-surface")) return;
+    const panel = this.dialog;
+    if (panel && !wiredPanels.has(panel)) wire(this, panel);
+  };
+}
+function wire(host, panel) {
+  wiredPanels.add(panel);
+  const scrolled = /* @__PURE__ */ new Set();
+  const onScroll = (event) => {
+    const scroller = event.target;
+    if (!(scroller instanceof Element)) return;
+    const header = host.shadowRoot?.querySelector('[part~="header"]');
+    const floating = host.parentElement?.getAttribute("data-header-presentation") === "floating";
+    if (floating && header && scroller.scrollTop > THRESHOLD && // Only a scroller that reaches beneath the header.
+    scroller.getBoundingClientRect().top <= header.getBoundingClientRect().bottom)
+      scrolled.add(scroller);
+    else scrolled.delete(scroller);
+    for (const element of scrolled)
+      if (!element.isConnected) scrolled.delete(element);
+    const value = scrolled.size > 0 ? SHOWN : "";
+    if (panel.style.getPropertyValue(HEADER_DIVIDER_PROPERTY) === value) return;
+    if (value) panel.style.setProperty(HEADER_DIVIDER_PROPERTY, value);
+    else panel.style.removeProperty(HEADER_DIVIDER_PROPERTY);
+  };
+  for (const root of [panel, host])
+    root.addEventListener("scroll", onScroll, { capture: true, passive: true });
+}
+
+// src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts
+installDialogLabel(WaDialog.prototype);
+installChromeBlockSize(WaDialog.prototype);
+installHeaderScrollDivider(WaDialog.prototype);
+installBottomSheet(WaDialog.prototype);
+var surfaceScaffoldElementsRegistered = true;
+
+export { surfaceScaffoldElementsRegistered };
+
+//# sourceMappingURL=surface-scaffold-register.js.map

package/dist/surface-scaffold-register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/internal/install-bottom-sheet.ts","../src/components/surfaces/surface-scaffold/internal/install-chrome-block-size.ts","../src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts","../src/components/surfaces/surface-scaffold/internal/install-header-scroll-divider.ts","../src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts"],"names":["installed","attribute","value"],"mappings":"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","file":"surface-scaffold-register.js","sourcesContent":["import {\n  createSheetHandle,\n  syncSheetHandleValues,\n  wireSheetHandle,\n} from './sheet-handle.js';\n\ninterface SheetDialog extends HTMLElement {\n  dialog?: HTMLDialogElement;\n  open?: boolean;\n  update(changed: unknown): void;\n  show(): Promise<void>;\n  requestClose(source: Element): Promise<void>;\n}\n\n/** The shadow part of a resizable bottom sheet's grabber. */\nexport const SHEET_HANDLE_PART = 'sheet-handle';\n\n/** The panel variable holding a resized sheet's visible height. */\nexport const SHEET_HEIGHT_PROPERTY = '--_kui-dialog-surface-sheet-height';\n\n/** The panel variable holding the virtual keyboard's overlap. */\nexport const KEYBOARD_INSET_PROPERTY = '--_kui-dialog-surface-keyboard-inset';\n\n/**\n * The host attribute marking the show (`enter`) or hide (`exit`) animation\n * while it runs, so the CSS can swap only those keyframes (never the pulse).\n */\nexport const SHEET_MOTION_ATTRIBUTE = 'data-kui-sheet-motion';\n\nconst installed = new WeakSet<object>();\nconst viewportCleanups = new WeakMap<SheetDialog, () => void>();\n\nconst surfaceOf = (host: SheetDialog): HTMLElement | null =>\n  host.parentElement?.classList.contains('kui-dialog-surface')\n    ? host.parentElement\n    : null;\n\nconst isBottomSheet = (host: SheetDialog): boolean =>\n  surfaceOf(host)?.getAttribute('data-presentation') === 'bottom-sheet';\n\nconst isResizable = (host: SheetDialog): boolean =>\n  isBottomSheet(host) && surfaceOf(host)!.hasAttribute('data-resizable');\n\n/**\n * Wire DialogSurface's `presentation=\"bottom-sheet\"`: inject the resize\n * grabber into the shadow panel (a `role=\"separator\"` the CSS shows only for\n * a resizable sheet), follow the virtual keyboard through `visualViewport`\n * while the dialog is open, and mark the show and hide animations so the\n * sheet can slide instead of scaling. Every state lives on the shadow panel\n * or the host, where Kerf rerenders never reach.\n */\nexport function installBottomSheet(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as SheetDialog;\n  const { update, show, requestClose } = target;\n  target.update = function (this: SheetDialog, changed: unknown): void {\n    update.call(this, changed);\n    if (!surfaceOf(this)) return;\n    const panel = this.dialog;\n    if (!panel) return;\n    syncHandle(this, panel);\n    if (this.open) followViewport(this, panel);\n    else unfollowViewport(this);\n  };\n  target.show = function (this: SheetDialog): Promise<void> {\n    // Each opening starts at the configured (or content) height.\n    const panel = this.dialog;\n    if (panel && surfaceOf(this)) {\n      panel.style.removeProperty(SHEET_HEIGHT_PROPERTY);\n      syncHandle(this, panel);\n    }\n    const result = show.call(this);\n    markMotion(this, 'show', 'enter', result);\n    // The host only displays once Lit reflects `open`: report the values\n    // when the opening settles.\n    void result.then(() => {\n      const handle = panel?.querySelector(\n        `:scope > [part~=\"${SHEET_HANDLE_PART}\"]`,\n      );\n      if (panel && handle && isResizable(this))\n        syncSheetHandleValues(handle, panel);\n    });\n    return result;\n  };\n  target.requestClose = function (\n    this: SheetDialog,\n    source: Element,\n  ): Promise<void> {\n    const result = requestClose.call(this, source);\n    markMotion(this, 'hide', 'exit', result);\n    return result;\n  };\n}\n\n/**\n * Web Awesome adds its animation class synchronously before its first await,\n * so the class tells a real show or hide from a prevented (pulsing) close.\n */\nfunction markMotion(\n  host: SheetDialog,\n  className: string,\n  value: string,\n  result: Promise<void>,\n): void {\n  if (!surfaceOf(host) || !host.dialog?.classList.contains(className)) return;\n  host.setAttribute(SHEET_MOTION_ATTRIBUTE, value);\n  const clear = (): void => {\n    if (host.getAttribute(SHEET_MOTION_ATTRIBUTE) === value)\n      host.removeAttribute(SHEET_MOTION_ATTRIBUTE);\n  };\n  void result.then(clear, clear);\n}\n\n/** Show the grabber on a resizable bottom sheet only, creating it on first need. */\nfunction syncHandle(host: SheetDialog, panel: HTMLElement): void {\n  const existing = panel.querySelector<HTMLElement>(\n    `:scope > [part~=\"${SHEET_HANDLE_PART}\"]`,\n  );\n  const resizable = isResizable(host);\n  if (existing) existing.hidden = !resizable;\n  else if (resizable) createHandle(host, panel);\n}\n\nfunction createHandle(host: SheetDialog, panel: HTMLElement): void {\n  const handle = createSheetHandle({ part: SHEET_HANDLE_PART });\n  // Before Lit's first marker, outside every part Lit owns.\n  panel.prepend(handle);\n  wireSheetHandle(handle, {\n    panel,\n    host: panel,\n    property: SHEET_HEIGHT_PROPERTY,\n    enabled: () => isResizable(host),\n  });\n}\n\n/**\n * The layout viewport's bottom band a virtual keyboard covers: what the\n * visual viewport no longer shows below itself. Zero while pinch-zoomed (the\n * visual viewport then shrinks for another reason) and wherever the keyboard\n * resizes the layout viewport instead (`interactive-widget=resizes-content`).\n */\nexport function keyboardInset(\n  viewport: Pick<VisualViewport, 'height' | 'offsetTop' | 'scale'>,\n  layoutHeight: number,\n): number {\n  if (viewport.scale > 1.01) return 0;\n  const inset = Math.round(layoutHeight - viewport.height - viewport.offsetTop);\n  return inset > 0 ? inset : 0;\n}\n\nfunction followViewport(host: SheetDialog, panel: HTMLElement): void {\n  const viewport = globalThis.visualViewport;\n  if (!viewport || viewportCleanups.has(host)) return;\n  const publish = (): void => {\n    const inset =\n      host.isConnected && host.open && isBottomSheet(host)\n        ? keyboardInset(viewport, globalThis.innerHeight)\n        : 0;\n    if (inset > 0)\n      panel.style.setProperty(KEYBOARD_INSET_PROPERTY, `${inset}px`);\n    else panel.style.removeProperty(KEYBOARD_INSET_PROPERTY);\n    if (!host.isConnected) unfollowViewport(host);\n  };\n  viewport.addEventListener('resize', publish);\n  viewport.addEventListener('scroll', publish);\n  viewportCleanups.set(host, () => {\n    viewport.removeEventListener('resize', publish);\n    viewport.removeEventListener('scroll', publish);\n    panel.style.removeProperty(KEYBOARD_INSET_PROPERTY);\n  });\n  publish();\n}\n\nfunction unfollowViewport(host: SheetDialog): void {\n  viewportCleanups.get(host)?.();\n  viewportCleanups.delete(host);\n}\n","interface ChromeDialog extends HTMLElement {\n  dialog?: HTMLDialogElement;\n  update(changed: unknown): void;\n}\n\n/** The panel variable a floating header's body clearance reads. */\nexport const HEADER_BLOCK_SIZE_PROPERTY =\n  '--_kui-dialog-surface-header-block-size';\n\n/** The panel variable a floating footer's body clearance reads. */\nexport const FOOTER_BLOCK_SIZE_PROPERTY =\n  '--_kui-dialog-surface-footer-block-size';\n\n/** Each measured dialog part, with the panel variable it publishes. */\nconst CHROME_PARTS = [\n  ['header', HEADER_BLOCK_SIZE_PROPERTY],\n  ['footer', FOOTER_BLOCK_SIZE_PROPERTY],\n] as const;\n\nconst installed = new WeakSet<object>();\nconst observedParts = new WeakSet<Element>();\n\n/**\n * Publish a DialogSurface's header and footer block sizes on its shadow\n * panel, where Kerf rerenders never reach, so a floating header's or footer's\n * body clearance follows that chrome as its content grows, wraps, or hides.\n */\nexport function installChromeBlockSize(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as ChromeDialog;\n  const update = target.update;\n  target.update = function (this: ChromeDialog, changed: unknown): void {\n    update.call(this, changed);\n    if (!this.parentElement?.classList.contains('kui-dialog-surface')) return;\n    const panel = this.dialog;\n    if (!panel) return;\n    for (const [part, property] of CHROME_PARTS) {\n      const element = this.shadowRoot?.querySelector(`[part~=\"${part}\"]`);\n      // Web Awesome drops the header part under `without-header`; with no\n      // part to clear, the floating clearance falls back to zero.\n      if (element) observePart(panel, element, property);\n      else panel.style.removeProperty(property);\n    }\n  };\n}\n\nfunction observePart(\n  panel: HTMLElement,\n  element: Element,\n  property: string,\n): void {\n  if (observedParts.has(element)) return;\n  observedParts.add(element);\n  const publish = (blockSize: number): void => {\n    const value = `${blockSize}px`;\n    if (panel.style.getPropertyValue(property) !== value)\n      panel.style.setProperty(property, value);\n  };\n  publish(element.getBoundingClientRect().height);\n  if (typeof ResizeObserver === 'undefined') return;\n  new ResizeObserver((entries) => {\n    // A part Web Awesome has since removed no longer owns the variable.\n    if (!element.isConnected) return;\n    const box = entries[entries.length - 1]?.borderBoxSize?.[0];\n    publish(box ? box.blockSize : element.getBoundingClientRect().height);\n  }).observe(element);\n}\n","interface NamedDialog extends HTMLElement {\n  dialog?: HTMLDialogElement;\n  label: string;\n  withoutHeader: boolean;\n  update(changed: unknown): void;\n}\n\nconst installed = new WeakSet<object>();\nconst observed = new WeakSet<HTMLElement>();\nconst ownedNames = new WeakMap<\n  HTMLElement,\n  { attribute: string; value: string }\n>();\n\n/** Repair Web Awesome's missing native dialog name before its first modal open. */\nexport function installDialogLabel(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as NamedDialog;\n  const update = target.update;\n  target.update = function (this: NamedDialog, changed: unknown): void {\n    update.call(this, changed);\n    if (!this.parentElement?.classList.contains('kui-dialog-surface')) return;\n    if (!observed.has(this)) {\n      observed.add(this);\n      new MutationObserver(() => syncDialogLabel(this)).observe(this, {\n        attributes: true,\n        attributeFilter: ['aria-label', 'role'],\n      });\n    }\n    syncDialogLabel(this);\n  };\n}\n\nfunction syncDialogLabel(host: NamedDialog): void {\n  if (!host.parentElement?.classList.contains('kui-dialog-surface')) return;\n  const panel = host.dialog;\n  if (!panel) return;\n  const previous = ownedNames.get(panel);\n  // A host that is itself the named dialog (an explicit role=\"dialog\" plus\n  // its own name) owns that name; naming the panel too would expose two\n  // dialogs with one name.\n  if (/^(alert)?dialog$/.test(host.getAttribute('role')?.trim() ?? '')) {\n    if (previous && panel.getAttribute(previous.attribute) === previous.value)\n      panel.removeAttribute(previous.attribute);\n    ownedNames.delete(panel);\n    return;\n  }\n  const externalName = ['aria-label', 'aria-labelledby'].some((attribute) => {\n    const value = panel.getAttribute(attribute);\n    return (\n      value !== null &&\n      !(previous?.attribute === attribute && previous.value === value)\n    );\n  });\n  if (externalName) {\n    if (previous && panel.getAttribute(previous.attribute) === previous.value)\n      panel.removeAttribute(previous.attribute);\n    ownedNames.delete(panel);\n    return;\n  }\n  const explicit = host.getAttribute('aria-label')?.trim();\n  const title = host.shadowRoot?.getElementById('title');\n  const attribute =\n    !explicit && !host.withoutHeader && title\n      ? 'aria-labelledby'\n      : 'aria-label';\n  const value =\n    attribute === 'aria-labelledby' ? 'title' : explicit || host.label;\n  if (previous && previous.attribute !== attribute)\n    panel.removeAttribute(previous.attribute);\n  if (panel.getAttribute(attribute) !== value)\n    panel.setAttribute(attribute, value);\n  ownedNames.set(panel, { attribute, value });\n}\n","interface ChromeDialog extends HTMLElement {\n  dialog?: HTMLDialogElement;\n  update(changed: unknown): void;\n}\n\n/**\n * The panel variable a floating header's divider reads: set while content\n * is scrolled away beneath the header, unset (no divider) otherwise.\n */\nexport const HEADER_DIVIDER_PROPERTY = '--_kui-dialog-surface-header-divider';\n\n/** The value published while the divider shows: the color the CSS owns. */\nconst SHOWN = 'var(--_kui-dialog-surface-header-divider-color)';\n\n/**\n * Scroll distance, in px, that counts as \"away from the top\": a scroller at\n * rest can report a fractional offset.\n */\nconst THRESHOLD = 1;\n\nconst installed = new WeakSet<object>();\nconst wiredPanels = new WeakSet<Element>();\n\n/**\n * Draw a floating DialogSurface header's divider while content is scrolled\n * beneath it, the way a Pane's overlay header does. Capture-phase `scroll`\n * listeners on the shadow panel and the host see both the body part (flowing\n * content) and a slotted filling child that reaches beneath the header (a\n * transcript `List` or `Pane` with block-start `scrollClearance`); a nested\n * scroller that starts below the header never counts. The state is published\n * on the panel, where Kerf rerenders never reach.\n */\nexport function installHeaderScrollDivider(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as ChromeDialog;\n  const update = target.update;\n  target.update = function (this: ChromeDialog, changed: unknown): void {\n    update.call(this, changed);\n    if (!this.parentElement?.classList.contains('kui-dialog-surface')) return;\n    const panel = this.dialog;\n    if (panel && !wiredPanels.has(panel)) wire(this, panel);\n  };\n}\n\nfunction wire(host: ChromeDialog, panel: HTMLElement): void {\n  wiredPanels.add(panel);\n  const scrolled = new Set<Element>();\n  const onScroll = (event: Event): void => {\n    const scroller = event.target;\n    if (!(scroller instanceof Element)) return;\n    const header = host.shadowRoot?.querySelector('[part~=\"header\"]');\n    const floating =\n      host.parentElement?.getAttribute('data-header-presentation') ===\n      'floating';\n    if (\n      floating &&\n      header &&\n      scroller.scrollTop > THRESHOLD &&\n      // Only a scroller that reaches beneath the header.\n      scroller.getBoundingClientRect().top <=\n        header.getBoundingClientRect().bottom\n    )\n      scrolled.add(scroller);\n    else scrolled.delete(scroller);\n    for (const element of scrolled)\n      if (!element.isConnected) scrolled.delete(element);\n    const value = scrolled.size > 0 ? SHOWN : '';\n    if (panel.style.getPropertyValue(HEADER_DIVIDER_PROPERTY) === value) return;\n    if (value) panel.style.setProperty(HEADER_DIVIDER_PROPERTY, value);\n    else panel.style.removeProperty(HEADER_DIVIDER_PROPERTY);\n  };\n  // `scroll` does not bubble or leave a shadow root: the panel's capture\n  // listener sees the body part, the host's sees slotted scrollers.\n  for (const root of [panel, host])\n    root.addEventListener('scroll', onScroll, { capture: true, passive: true });\n}\n","import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';\n\nimport { installBottomSheet } from '../internal/install-bottom-sheet.js';\nimport { installChromeBlockSize } from '../internal/install-chrome-block-size.js';\nimport { installDialogLabel } from '../internal/install-dialog-label.js';\nimport { installHeaderScrollDivider } from '../internal/install-header-scroll-divider.js';\n\ninstallDialogLabel(WaDialog.prototype);\ninstallChromeBlockSize(WaDialog.prototype);\ninstallHeaderScrollDivider(WaDialog.prototype);\ninstallBottomSheet(WaDialog.prototype);\n\n/**\n * Importing this module registers wa-dialog, repairs wrapped native names, and\n * measures each DialogSurface header and footer for a floating header's or\n * footer's body clearance, shows a floating header's divider while content\n * is scrolled beneath it, and wires a bottom sheet's resize grabber,\n * virtual-keyboard clearance, and slide motion.\n */\nexport const surfaceScaffoldElementsRegistered = true;\n"]}

package/dist/surface-scaffold.d.ts

@@ -0,0 +1,203 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+
+type DialogSurfaceSize = 'small' | 'medium' | 'large';
+/**
+ * How the dialog is presented: `modal` (default) centered on the screen,
+ * `side-sheet` against the inline end, `fullscreen`, or `bottom-sheet`
+ * attached to the bottom edge (square bottom corners, safe-area and
+ * virtual-keyboard clearance, optionally user-resizable).
+ */
+type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen' | 'bottom-sheet';
+/**
+ * How a bottom sheet appears or leaves: `slide` (default) moves the panel in
+ * from, or out to, the bottom edge; `standard` keeps Web Awesome's
+ * scale-and-fade. Both honor `prefers-reduced-motion`.
+ */
+type DialogSurfaceSheetMotion = 'slide' | 'standard';
+type SurfaceInset = 'none' | 'compact' | 'comfortable';
+type DialogSurfaceMaxHeight = CssLength | 'viewport';
+/** A definite modal height: a length or the full viewport, minus both gutters. */
+type DialogSurfaceHeight = CssLength | 'viewport';
+/**
+ * How the dialog body lays out its children: `flow` (default) scrolls ordinary
+ * content in the body; `fill` gives one child the body's whole height and
+ * lets it own scrolling (a SplitView, a Pane, an editor); `fill-last` stacks
+ * the leading children at their natural height and gives the last child the
+ * remaining height to own its scrolling (a heading and notices above a
+ * scrolling transcript).
+ */
+type DialogSurfaceBodyLayout = 'flow' | 'fill' | 'fill-last';
+/**
+ * Where the dialog footer sits: `docked` (default) below the body, or
+ * `floating` over the body's block end, inset from the panel's inline and
+ * block-end edges on a transparent background (a chat composer).
+ */
+type DialogSurfaceFooterPresentation = 'docked' | 'floating';
+/**
+ * Where the dialog header sits: `docked` (default) above the body, or
+ * `floating` over the body's block-start edge on the translucent chrome
+ * material, so content scrolls visibly beneath the title bar.
+ */
+type DialogSurfaceHeaderPresentation = 'docked' | 'floating';
+/**
+ * Application `data-*` identity on the DialogSurface root, such as
+ * `data-key`; the surface's own configuration attributes stay protected.
+ */
+type DialogSurfaceRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface DialogSurfaceProps {
+    children: KerfUiContent;
+    size?: DialogSurfaceSize;
+    presentation?: DialogSurfacePresentation;
+    /** Modal preferred width. Takes precedence over size, within the viewport cap. */
+    preferredWidth?: CssLength;
+    bodyInset?: SurfaceInset;
+    footerInset?: SurfaceInset;
+    /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */
+    viewportGutter?: CssLength;
+    /**
+     * Modal height cap, bounded by the dynamic viewport minus both gutters. On a
+     * bottom sheet, the cap (and the resize ceiling), bounded by the dynamic
+     * viewport minus the top safe area and one gutter.
+     */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /**
+     * Modal definite height, bounded the same way, so a filling child has a
+     * height to fill. Takes precedence over `maxHeight`. On a bottom sheet, the
+     * height it opens at (the visible height above the safe area or keyboard).
+     */
+    height?: DialogSurfaceHeight;
+    /**
+     * A resizable bottom sheet's resize floor (default 160px), the visible
+     * height above the safe area or keyboard.
+     */
+    minHeight?: CssLength;
+    /**
+     * Let the person resize a bottom sheet by its top grabber (drag, or the
+     * arrow, Page Up/Down, Home and End keys) between `minHeight` and the
+     * sheet's cap. Needs the `/register` entry; each opening starts at `height`
+     * (or the content height). Ignored by other presentations.
+     */
+    resizable?: boolean;
+    /** How a bottom sheet appears (default `slide` up from the bottom edge). */
+    enterMotion?: DialogSurfaceSheetMotion;
+    /** How a bottom sheet is dismissed (default `slide` down off the bottom edge). */
+    exitMotion?: DialogSurfaceSheetMotion;
+    /**
+     * Body layout (default `flow`); `fill` lets one child own the body and
+     * `fill-last` stacks fixed rows above one filling last child.
+     */
+    bodyLayout?: DialogSurfaceBodyLayout;
+    /**
+     * Header placement (default `docked`); `floating` lays the dialog's header
+     * (its title and close control) over the body's block-start edge on the
+     * translucent chrome material (`--kui-chrome-material-raised`, opaque under
+     * `prefers-reduced-transparency`, increased contrast, forced colors, or
+     * without `backdrop-filter`). The `/register` entry measures the header;
+     * the body reserves that height before its own inset, so its first content
+     * rests below the title bar. A `fill`/`fill-last` child that is the body's
+     * only child and opts into block-start `scrollClearance` (a `List` or
+     * `Pane`) takes the clearance inside its own scroll area instead, published
+     * as `--kui-scroll-clearance-block-start`, so its content scrolls visibly
+     * beneath the header. Unmeasured (without the register), the header stays
+     * docked. Keep header text in the normal text color: quiet text can fall
+     * below AA over the content passing beneath it.
+     */
+    headerPresentation?: DialogSurfaceHeaderPresentation;
+    /**
+     * Footer placement (default `docked`); `floating` lays the footer over the
+     * body's block end. The body reserves the footer's measured height so its
+     * last content is never hidden beneath it. A `fill`/`fill-last` child that
+     * opts into block-end `scrollClearance` (a `List` or `Pane`) takes that
+     * clearance inside its own scroll area instead, published as
+     * `--kui-scroll-clearance-block-end`, so its content scrolls visibly beneath
+     * the transparent footer.
+     */
+    footerPresentation?: DialogSurfaceFooterPresentation;
+    /**
+     * A floating footer's clearance from the panel's inline and block-end edges
+     * (default the 16px container inset). Choose a phone value such as
+     * `remify(8)` from `deviceClass()`; the scaffold adds no breakpoint.
+     */
+    footerOffset?: CssLength;
+    /**
+     * Safe `data-*` identity on the root. Give sibling dialogs distinct
+     * `data-key`s so a re-render morphs each surface into itself instead of
+     * reusing one dialog's element for another (structurally identical roots
+     * are otherwise matched by position).
+     */
+    rootAttributes?: DialogSurfaceRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
+declare function DialogSurface({ children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+/** Where a PopoverDialogSurface appears: the top layer, or in flow. */
+type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';
+/** Application `data-*` metadata on the surface root. */
+type PopoverDialogSurfaceDataAttributes = Readonly<Record<`data-${string}`, string>>;
+type PopoverDialogSurfaceName = {
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+};
+type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {
+    /** The root id: what an opening control's `popovertarget` names. */
+    id?: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description,
+     * such as a title `ToolbarText`'s `descriptionId`; rendered as
+     * `aria-describedby` on the `role="dialog"` root.
+     */
+    describedBy?: string;
+    children: KerfUiContent;
+    /**
+     * `overlay` (default) is a native `popover="auto"` in the top layer:
+     * non-modal, light dismiss (Escape or a press outside), nothing inert.
+     * `embedded` renders the same surface in flow for a catalog or inline use.
+     */
+    presentation?: PopoverDialogSurfacePresentation;
+    /** Preferred width preset: 400px, 560px (default), or 800px. */
+    size?: DialogSurfaceSize;
+    /** Preferred width; takes precedence over `size`, within the viewport cap. */
+    preferredWidth?: CssLength;
+    /** Definite height, bounded by the dynamic viewport minus both gutters. */
+    height?: DialogSurfaceHeight;
+    /** Height cap, bounded the same way, for a surface that sizes to content. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Edge clearance on each side of the viewport (default 16px). */
+    viewportGutter?: CssLength;
+    /**
+     * Body layout (default `flow`); `fill` lets one child own the surface and
+     * `fill-last` stacks fixed rows above one filling last child.
+     */
+    bodyLayout?: DialogSurfaceBodyLayout;
+    rootAttributes?: PopoverDialogSurfaceDataAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+};
+/**
+ * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,
+ * viewport-bounded size, and single-child fill without application CSS.
+ * Open it with a `popovertarget` control or `showPopover()`; it light
+ * dismisses and leaves the page interactive. Use `DialogSurface` with
+ * `wa-dialog` when the task must block the page.
+ */
+declare function PopoverDialogSurface({ id, children, label, labelledBy, describedBy, presentation, size, preferredWidth, height, maxHeight, viewportGutter, bodyLayout, rootAttributes, className, slot, }: PopoverDialogSurfaceProps): kerfjs.SafeHtml;
+type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
+interface PopupSurfaceProps {
+    children: KerfUiContent;
+    inset?: PopupSurfaceInset;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
+declare function PopupSurface({ children, inset, className, slot, }: PopupSurfaceProps): kerfjs.SafeHtml;
+
+export { DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };

package/dist/surface-scaffold.js

@@ -0,0 +1,4 @@
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-BYFTHA4I.js';
+
+
+//# sourceMappingURL=surface-scaffold.js.map

package/dist/surface-scaffold.js.map

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