@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/styles/toolbar-text.css

@@ -149,21 +149,15 @@ button.kui-toolbar-text:focus-visible {
    4.1:1 (dark). The title takes the normal text color (about 10.5:1 and
    8.3:1), and the description lifts halfway toward it (about 5.9:1 in both
    themes), so it still reads as secondary but keeps AA. A ToolbarText in a
-   DialogSurface floating header (`headerPresentation="floating"`), slotted
-   as the dialog's label or into its header actions, sits on the raised chrome
-   material and takes the same lift. See docs/accessibility.md "Chrome
+   DialogSurface floating header (`headerPresentation="floating"`), as its
+   heading or in its header actions, sits on the raised chrome material and
+   takes the same lift. See docs/accessibility.md "Chrome
    material". */
 .kui-pane[data-header-presentation="overlay"]
   > .kui-pane__header
   .kui-toolbar-text:not([data-tone]),
 .kui-dialog-surface[data-header-presentation="floating"]
-  > wa-dialog
-  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
-    [data-tone]
-  ),
-.kui-dialog-surface[data-header-presentation="floating"]
-  > wa-dialog
-  > :is([slot="label"], [slot="header-actions"])
+  > .kui-dialog-surface__header
   .kui-toolbar-text:not([data-tone]),
 .kui-nav-stack[data-chrome-presentation="overlay"]
   > .kui-nav-stack__chrome
@@ -179,14 +173,7 @@ button.kui-toolbar-text:focus-visible {
   .kui-toolbar-text:not([data-tone])
   .kui-toolbar-text__description,
 .kui-dialog-surface[data-header-presentation="floating"]
-  > wa-dialog
-  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
-    [data-tone]
-  )
-  .kui-toolbar-text__description,
-.kui-dialog-surface[data-header-presentation="floating"]
-  > wa-dialog
-  > :is([slot="label"], [slot="header-actions"])
+  > .kui-dialog-surface__header
   .kui-toolbar-text:not([data-tone])
   .kui-toolbar-text__description,
 .kui-nav-stack[data-chrome-presentation="overlay"]

package/dist/styles/toolbar.css

@@ -121,7 +121,7 @@
   ) {
   grid-template-columns:
     minmax(0, 1fr)
-    minmax(0, var(--kui-token-search-expanded-width, 30rem));
+    minmax(0, var(--kui-search-field-expanded-width, 30rem));
 }
 
 .kui-toolbar {
@@ -166,7 +166,7 @@
 
 /* Every zone reserves a group-height control band. Direct custom content
    centers against its zone's height by default. ToolbarText,
-   ToolbarControlGroup, and standalone wa-button keep their own first-band
+   ToolbarControlGroup, a standalone Button, and a raw wa-button keep their own first-band
    placement, so taller siblings do not move their controls off that axis.
    `--_kui-toolbar-band` is context those components use for that placement. */
 .kui-toolbar {
@@ -177,6 +177,13 @@
   );
 }
 
+/* A MessageComposer's action row: the composer frame already insets it and
+   spaces it from the field, so the toolbar keeps only its control band. */
+.kui-message-composer > .kui-toolbar {
+  min-height: var(--_kui-toolbar-band);
+  padding: 0;
+}
+
 /* Compact density: a 34px band (the compact ToolbarControlGroup's size) with
    3px block insets makes a 40px header for an embedded panel or card. The
    inline insets and zone gap keep the standard 8px. */
@@ -265,7 +272,7 @@
   flex-wrap: wrap;
 }
 
-.kui-toolbar__trailing > wa-button:not(:where(.kui-icon-button)) {
+.kui-toolbar__trailing > wa-button {
   margin-block-start: max(
     0px,
     calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)
@@ -355,6 +362,21 @@
   margin-inline-start: auto;
 }
 
+/* A lone zone spans every column track, so an absent (empty, hidden) zone's
+   track and the column gap before it never narrow it: leading-only content
+   set to fill the row reaches the toolbar's inline-end inset, and
+   trailing-only content its inline-start inset. */
+.kui-toolbar[data-has-center="false"]:has(> .kui-toolbar__trailing:empty)
+  > .kui-toolbar__leading,
+.kui-toolbar:has(> .kui-toolbar__leading:empty):has(
+    > .kui-toolbar__trailing:empty
+  )
+  > .kui-toolbar__center,
+.kui-toolbar[data-has-center="false"]:has(> .kui-toolbar__leading:empty)
+  > .kui-toolbar__trailing {
+  grid-column: 1 / -1;
+}
+
 .kui-toolbar[data-has-center="false"] .kui-toolbar__center,
 .kui-toolbar__leading:empty,
 .kui-toolbar__trailing:empty {

package/dist/styles/webawesome.css

@@ -557,6 +557,15 @@
     --arrow-size: var(--kui-wa-popover-arrow-size);
   }
 
+  /* An active step fills its marker with its accent, which upstream is also
+     its spinner's color, so a loading active step would draw a blank disc.
+     Draw the spinner in the marker's on-accent foreground instead. */
+  wa-step[active][loading]::part(spinner) {
+    color: inherit;
+    --indicator-color: currentColor;
+    --track-color: color-mix(in oklab, currentColor 30%, transparent);
+  }
+
   /* Default-size single-line controls share Kerf's 44px control height (the
      Select field, toolbar groups, and list rows), so a Web Awesome field,
      button, or button radio sits flush beside a Kerf Select instead of 9px

package/dist/styles/workbench-dialog.css

@@ -0,0 +1,10 @@
+/* Public stylesheet entry; implementation is colocated with the component.
+   WorkbenchDialog adds no rules of its own (a header-less DialogSurface around
+   a Workbench), so this entry pulls in the stylesheets it renders. */
+@import "./surface-scaffold.css";
+@import "./workbench.css";
+@import "./pane.css";
+@import "./toolbar.css";
+@import "./toolbar-control-group.css";
+@import "./toolbar-text.css";
+@import "./lucide-icon.css";

package/dist/styles/workbench.css

@@ -641,12 +641,19 @@
    separator — below the Workbench's own container breakpoint (`narrow`: 704px
    or less, `compact`: 448px or less, as `ResizableRegion`'s
    `responsiveFillAt`), and inline above it. The Workbench becomes a named
-   inline-size container only when a panel opts in. The work area keeps its
+   inline-size container only when a panel opts in, or when a Pane inside it
+   declares `compactChrome` (which applies at its compact width). The work area keeps its
    safe-area inset under an overlay panel. */
 .kui-workbench[data-responsive-overlay="true"] {
   container: kui-workbench / inline-size;
 }
 
+.kui-workbench:has(
+  [data-component="pane"]:is([data-compact-header], [data-compact-footer])
+) {
+  container: kui-workbench / inline-size;
+}
+
 /* A numeric pixel threshold is measured by wireWorkbench and marked on the
    panel. Keep its overlay geometry and covered work area in step with that
    single mark, including when the app changes the threshold at render time. */
@@ -907,9 +914,10 @@
   }
 }
 
-/* Release the panel and its sliding/scrolling content while a PopupMenu or
-   Web Awesome dropdown is open. This comes after resize clipping and keeps
-   the popup in place through wa-show/wa-after-hide without a prop change. */
+/* Release the panel and its sliding/scrolling content while a raw Web
+   Awesome dropdown is open (a PopupMenu opens in the top layer, which no
+   ancestor clips). This comes after resize clipping and keeps the popup in
+   place through wa-show/wa-after-hide without a prop change. */
 .kui-workbench__rail:not([data-collapsed="true"]):has(wa-dropdown[open]),
 .kui-workbench__drawer:not([data-collapsed="true"]):has(wa-dropdown[open]) {
   overflow: visible;

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

@@ -1,9 +1,11 @@
 /**
- * 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.
+ * Importing this module wires every DialogSurface in the document: the close
+ * button, `data-dialog-close`, Escape, and backdrop requests through the
+ * cancelable `kui-request-close`. `openDialog` also wires the dialogs it
+ * opens, measuring a floating header's or footer's body clearance, showing a
+ * floating header's divider while content scrolls beneath it, and following a
+ * bottom sheet's keyboard clearance and resize grabber, all kept across
+ * application re-renders while the dialog is open.
  */
 declare const surfaceScaffoldElementsRegistered = true;
 

package/dist/surface-scaffold-register.js

@@ -1,252 +1,8 @@
-import { syncSheetHandleValues, createSheetHandle, wireSheetHandle } from './chunk-QTSMHH5J.js';
-import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';
+import { installDialogSurfaces } from './chunk-ATGAJVZ6.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);
+installDialogSurfaces();
 var surfaceScaffoldElementsRegistered = true;
 
 export { surfaceScaffoldElementsRegistered };

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

@@ -1 +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":";;;;AAeO,IAAM,iBAAA,GAAoB,cAAA;AAG1B,IAAM,qBAAA,GAAwB,oCAAA;AAG9B,IAAM,uBAAA,GAA0B,sCAAA;AAMhC,IAAM,sBAAA,GAAyB,uBAAA;AAEtC,IAAM,SAAA,uBAAgB,OAAA,EAAgB;AACtC,IAAM,gBAAA,uBAAuB,OAAA,EAAiC;AAE9D,IAAM,SAAA,GAAY,CAAC,IAAA,KACjB,IAAA,CAAK,aAAA,EAAe,UAAU,QAAA,CAAS,oBAAoB,CAAA,GACvD,IAAA,CAAK,aAAA,GACL,IAAA;AAEN,IAAM,aAAA,GAAgB,CAAC,IAAA,KACrB,SAAA,CAAU,IAAI,CAAA,EAAG,YAAA,CAAa,mBAAmB,CAAA,KAAM,cAAA;AAEzD,IAAM,WAAA,GAAc,CAAC,IAAA,KACnB,aAAA,CAAc,IAAI,KAAK,SAAA,CAAU,IAAI,CAAA,CAAG,YAAA,CAAa,gBAAgB,CAAA;AAUhE,SAAS,mBAAmB,SAAA,EAAyB;AAC1D,EAAA,IAAI,SAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAA,SAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,EAAE,MAAA,EAAQ,IAAA,EAAM,YAAA,EAAa,GAAI,MAAA;AACvC,EAAA,MAAA,CAAO,MAAA,GAAS,SAA6B,OAAA,EAAwB;AACnE,IAAA,MAAA,CAAO,IAAA,CAAK,MAAM,OAAO,CAAA;AACzB,IAAA,IAAI,CAAC,SAAA,CAAU,IAAI,CAAA,EAAG;AACtB,IAAA,MAAM,QAAQ,IAAA,CAAK,MAAA;AACnB,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,UAAA,CAAW,MAAM,KAAK,CAAA;AACtB,IAAA,IAAI,IAAA,CAAK,IAAA,EAAM,cAAA,CAAe,IAAA,EAAM,KAAK,CAAA;AAAA,0BACnB,IAAI,CAAA;AAAA,EAC5B,CAAA;AACA,EAAA,MAAA,CAAO,OAAO,WAA4C;AAExD,IAAA,MAAM,QAAQ,IAAA,CAAK,MAAA;AACnB,IAAA,IAAI,KAAA,IAAS,SAAA,CAAU,IAAI,CAAA,EAAG;AAC5B,MAAA,KAAA,CAAM,KAAA,CAAM,eAAe,qBAAqB,CAAA;AAChD,MAAA,UAAA,CAAW,MAAM,KAAK,CAAA;AAAA,IACxB;AACA,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA;AAC7B,IAAA,UAAA,CAAW,IAAA,EAAM,MAAA,EAAQ,OAAA,EAAS,MAAM,CAAA;AAGxC,IAAA,KAAK,MAAA,CAAO,KAAK,MAAM;AACrB,MAAA,MAAM,SAAS,KAAA,EAAO,aAAA;AAAA,QACpB,oBAAoB,iBAAiB,CAAA,EAAA;AAAA,OACvC;AACA,MAAA,IAAI,KAAA,IAAS,MAAA,IAAU,WAAA,CAAY,IAAI,CAAA;AACrC,QAAA,qBAAA,CAAsB,QAAQ,KAAK,CAAA;AAAA,IACvC,CAAC,CAAA;AACD,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AACA,EAAA,MAAA,CAAO,YAAA,GAAe,SAEpB,MAAA,EACe;AACf,IAAA,MAAM,MAAA,GAAS,YAAA,CAAa,IAAA,CAAK,IAAA,EAAM,MAAM,CAAA;AAC7C,IAAA,UAAA,CAAW,IAAA,EAAM,MAAA,EAAQ,MAAA,EAAQ,MAAM,CAAA;AACvC,IAAA,OAAO,MAAA;AAAA,EACT,CAAA;AACF;AAMA,SAAS,UAAA,CACP,IAAA,EACA,SAAA,EACA,KAAA,EACA,MAAA,EACM;AACN,EAAA,IAAI,CAAC,SAAA,CAAU,IAAI,CAAA,IAAK,CAAC,KAAK,MAAA,EAAQ,SAAA,CAAU,QAAA,CAAS,SAAS,CAAA,EAAG;AACrE,EAAA,IAAA,CAAK,YAAA,CAAa,wBAAwB,KAAK,CAAA;AAC/C,EAAA,MAAM,QAAQ,MAAY;AACxB,IAAA,IAAI,IAAA,CAAK,YAAA,CAAa,sBAAsB,CAAA,KAAM,KAAA;AAChD,MAAA,IAAA,CAAK,gBAAgB,sBAAsB,CAAA;AAAA,EAC/C,CAAA;AACA,EAAA,KAAK,MAAA,CAAO,IAAA,CAAK,KAAA,EAAO,KAAK,CAAA;AAC/B;AAGA,SAAS,UAAA,CAAW,MAAmB,KAAA,EAA0B;AAC/D,EAAA,MAAM,WAAW,KAAA,CAAM,aAAA;AAAA,IACrB,oBAAoB,iBAAiB,CAAA,EAAA;AAAA,GACvC;AACA,EAAA,MAAM,SAAA,GAAY,YAAY,IAAI,CAAA;AAClC,EAAA,IAAI,QAAA,EAAU,QAAA,CAAS,MAAA,GAAS,CAAC,SAAA;AAAA,OAAA,IACxB,SAAA,EAAW,YAAA,CAAa,IAAA,EAAM,KAAK,CAAA;AAC9C;AAEA,SAAS,YAAA,CAAa,MAAmB,KAAA,EAA0B;AACjE,EAAA,MAAM,MAAA,GAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,mBAAmB,CAAA;AAE5D,EAAA,KAAA,CAAM,QAAQ,MAAM,CAAA;AACpB,EAAA,eAAA,CAAgB,MAAA,EAAQ;AAAA,IACtB,KAAA;AAAA,IACA,IAAA,EAAM,KAAA;AAAA,IACN,QAAA,EAAU,qBAAA;AAAA,IACV,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI;AAAA,GAChC,CAAA;AACH;AAQO,SAAS,aAAA,CACd,UACA,YAAA,EACQ;AACR,EAAA,IAAI,QAAA,CAAS,KAAA,GAAQ,IAAA,EAAM,OAAO,CAAA;AAClC,EAAA,MAAM,QAAQ,IAAA,CAAK,KAAA,CAAM,eAAe,QAAA,CAAS,MAAA,GAAS,SAAS,SAAS,CAAA;AAC5E,EAAA,OAAO,KAAA,GAAQ,IAAI,KAAA,GAAQ,CAAA;AAC7B;AAEA,SAAS,cAAA,CAAe,MAAmB,KAAA,EAA0B;AACnE,EAAA,MAAM,WAAW,UAAA,CAAW,cAAA;AAC5B,EAAA,IAAI,CAAC,QAAA,IAAY,gBAAA,CAAiB,GAAA,CAAI,IAAI,CAAA,EAAG;AAC7C,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,MAAM,KAAA,GACJ,IAAA,CAAK,WAAA,IAAe,IAAA,CAAK,IAAA,IAAQ,aAAA,CAAc,IAAI,CAAA,GAC/C,aAAA,CAAc,QAAA,EAAU,UAAA,CAAW,WAAW,CAAA,GAC9C,CAAA;AACN,IAAA,IAAI,KAAA,GAAQ,CAAA;AACV,MAAA,KAAA,CAAM,KAAA,CAAM,WAAA,CAAY,uBAAA,EAAyB,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,CAAA;AAAA,SAC1D,KAAA,CAAM,KAAA,CAAM,cAAA,CAAe,uBAAuB,CAAA;AACvD,IAAA,IAAI,CAAC,IAAA,CAAK,WAAA,EAAa,gBAAA,CAAiB,IAAI,CAAA;AAAA,EAC9C,CAAA;AACA,EAAA,QAAA,CAAS,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAC3C,EAAA,QAAA,CAAS,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAC3C,EAAA,gBAAA,CAAiB,GAAA,CAAI,MAAM,MAAM;AAC/B,IAAA,QAAA,CAAS,mBAAA,CAAoB,UAAU,OAAO,CAAA;AAC9C,IAAA,QAAA,CAAS,mBAAA,CAAoB,UAAU,OAAO,CAAA;AAC9C,IAAA,KAAA,CAAM,KAAA,CAAM,eAAe,uBAAuB,CAAA;AAAA,EACpD,CAAC,CAAA;AACD,EAAA,OAAA,EAAQ;AACV;AAEA,SAAS,iBAAiB,IAAA,EAAyB;AACjD,EAAA,gBAAA,CAAiB,GAAA,CAAI,IAAI,CAAA,IAAI;AAC7B,EAAA,gBAAA,CAAiB,OAAO,IAAI,CAAA;AAC9B;;;AC3KO,IAAM,0BAAA,GACX,yCAAA;AAGK,IAAM,0BAAA,GACX,yCAAA;AAGF,IAAM,YAAA,GAAe;AAAA,EACnB,CAAC,UAAU,0BAA0B,CAAA;AAAA,EACrC,CAAC,UAAU,0BAA0B;AACvC,CAAA;AAEA,IAAMA,UAAAA,uBAAgB,OAAA,EAAgB;AACtC,IAAM,aAAA,uBAAoB,OAAA,EAAiB;AAOpC,SAAS,uBAAuB,SAAA,EAAyB;AAC9D,EAAA,IAAIA,UAAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAAA,UAAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,SAAS,MAAA,CAAO,MAAA;AACtB,EAAA,MAAA,CAAO,MAAA,GAAS,SAA8B,OAAA,EAAwB;AACpE,IAAA,MAAA,CAAO,IAAA,CAAK,MAAM,OAAO,CAAA;AACzB,IAAA,IAAI,CAAC,IAAA,CAAK,aAAA,EAAe,SAAA,CAAU,QAAA,CAAS,oBAAoB,CAAA,EAAG;AACnE,IAAA,MAAM,QAAQ,IAAA,CAAK,MAAA;AACnB,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,KAAA,MAAW,CAAC,IAAA,EAAM,QAAQ,CAAA,IAAK,YAAA,EAAc;AAC3C,MAAA,MAAM,UAAU,IAAA,CAAK,UAAA,EAAY,aAAA,CAAc,CAAA,QAAA,EAAW,IAAI,CAAA,EAAA,CAAI,CAAA;AAGlE,MAAA,IAAI,OAAA,EAAS,WAAA,CAAY,KAAA,EAAO,OAAA,EAAS,QAAQ,CAAA;AAAA,WAC5C,KAAA,CAAM,KAAA,CAAM,cAAA,CAAe,QAAQ,CAAA;AAAA,IAC1C;AAAA,EACF,CAAA;AACF;AAEA,SAAS,WAAA,CACP,KAAA,EACA,OAAA,EACA,QAAA,EACM;AACN,EAAA,IAAI,aAAA,CAAc,GAAA,CAAI,OAAO,CAAA,EAAG;AAChC,EAAA,aAAA,CAAc,IAAI,OAAO,CAAA;AACzB,EAAA,MAAM,OAAA,GAAU,CAAC,SAAA,KAA4B;AAC3C,IAAA,MAAM,KAAA,GAAQ,GAAG,SAAS,CAAA,EAAA,CAAA;AAC1B,IAAA,IAAI,KAAA,CAAM,KAAA,CAAM,gBAAA,CAAiB,QAAQ,CAAA,KAAM,KAAA;AAC7C,MAAA,KAAA,CAAM,KAAA,CAAM,WAAA,CAAY,QAAA,EAAU,KAAK,CAAA;AAAA,EAC3C,CAAA;AACA,EAAA,OAAA,CAAQ,OAAA,CAAQ,qBAAA,EAAsB,CAAE,MAAM,CAAA;AAC9C,EAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AAC3C,EAAA,IAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AAE9B,IAAA,IAAI,CAAC,QAAQ,WAAA,EAAa;AAC1B,IAAA,MAAM,MAAM,OAAA,CAAQ,OAAA,CAAQ,SAAS,CAAC,CAAA,EAAG,gBAAgB,CAAC,CAAA;AAC1D,IAAA,OAAA,CAAQ,MAAM,GAAA,CAAI,SAAA,GAAY,OAAA,CAAQ,qBAAA,GAAwB,MAAM,CAAA;AAAA,EACtE,CAAC,CAAA,CAAE,OAAA,CAAQ,OAAO,CAAA;AACpB;;;AC5DA,IAAMA,UAAAA,uBAAgB,OAAA,EAAgB;AACtC,IAAM,QAAA,uBAAe,OAAA,EAAqB;AAC1C,IAAM,UAAA,uBAAiB,OAAA,EAGrB;AAGK,SAAS,mBAAmB,SAAA,EAAyB;AAC1D,EAAA,IAAIA,UAAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAAA,UAAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,SAAS,MAAA,CAAO,MAAA;AACtB,EAAA,MAAA,CAAO,MAAA,GAAS,SAA6B,OAAA,EAAwB;AACnE,IAAA,MAAA,CAAO,IAAA,CAAK,MAAM,OAAO,CAAA;AACzB,IAAA,IAAI,CAAC,IAAA,CAAK,aAAA,EAAe,SAAA,CAAU,QAAA,CAAS,oBAAoB,CAAA,EAAG;AACnE,IAAA,IAAI,CAAC,QAAA,CAAS,GAAA,CAAI,IAAI,CAAA,EAAG;AACvB,MAAA,QAAA,CAAS,IAAI,IAAI,CAAA;AACjB,MAAA,IAAI,iBAAiB,MAAM,eAAA,CAAgB,IAAI,CAAC,CAAA,CAAE,QAAQ,IAAA,EAAM;AAAA,QAC9D,UAAA,EAAY,IAAA;AAAA,QACZ,eAAA,EAAiB,CAAC,YAAA,EAAc,MAAM;AAAA,OACvC,CAAA;AAAA,IACH;AACA,IAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,EACtB,CAAA;AACF;AAEA,SAAS,gBAAgB,IAAA,EAAyB;AAChD,EAAA,IAAI,CAAC,IAAA,CAAK,aAAA,EAAe,SAAA,CAAU,QAAA,CAAS,oBAAoB,CAAA,EAAG;AACnE,EAAA,MAAM,QAAQ,IAAA,CAAK,MAAA;AACnB,EAAA,IAAI,CAAC,KAAA,EAAO;AACZ,EAAA,MAAM,QAAA,GAAW,UAAA,CAAW,GAAA,CAAI,KAAK,CAAA;AAIrC,EAAA,IAAI,kBAAA,CAAmB,KAAK,IAAA,CAAK,YAAA,CAAa,MAAM,CAAA,EAAG,IAAA,EAAK,IAAK,EAAE,CAAA,EAAG;AACpE,IAAA,IAAI,YAAY,KAAA,CAAM,YAAA,CAAa,QAAA,CAAS,SAAS,MAAM,QAAA,CAAS,KAAA;AAClE,MAAA,KAAA,CAAM,eAAA,CAAgB,SAAS,SAAS,CAAA;AAC1C,IAAA,UAAA,CAAW,OAAO,KAAK,CAAA;AACvB,IAAA;AAAA,EACF;AACA,EAAA,MAAM,eAAe,CAAC,YAAA,EAAc,iBAAiB,CAAA,CAAE,IAAA,CAAK,CAACC,UAAAA,KAAc;AACzE,IAAA,MAAMC,MAAAA,GAAQ,KAAA,CAAM,YAAA,CAAaD,UAAS,CAAA;AAC1C,IAAA,OACEC,WAAU,IAAA,IACV,EAAE,UAAU,SAAA,KAAcD,UAAAA,IAAa,SAAS,KAAA,KAAUC,MAAAA,CAAAA;AAAA,EAE9D,CAAC,CAAA;AACD,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,IAAI,YAAY,KAAA,CAAM,YAAA,CAAa,QAAA,CAAS,SAAS,MAAM,QAAA,CAAS,KAAA;AAClE,MAAA,KAAA,CAAM,eAAA,CAAgB,SAAS,SAAS,CAAA;AAC1C,IAAA,UAAA,CAAW,OAAO,KAAK,CAAA;AACvB,IAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,YAAA,CAAa,YAAY,GAAG,IAAA,EAAK;AACvD,EAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,UAAA,EAAY,cAAA,CAAe,OAAO,CAAA;AACrD,EAAA,MAAM,YACJ,CAAC,QAAA,IAAY,CAAC,IAAA,CAAK,aAAA,IAAiB,QAChC,iBAAA,GACA,YAAA;AACN,EAAA,MAAM,KAAA,GACJ,SAAA,KAAc,iBAAA,GAAoB,OAAA,GAAU,YAAY,IAAA,CAAK,KAAA;AAC/D,EAAA,IAAI,QAAA,IAAY,SAAS,SAAA,KAAc,SAAA;AACrC,IAAA,KAAA,CAAM,eAAA,CAAgB,SAAS,SAAS,CAAA;AAC1C,EAAA,IAAI,KAAA,CAAM,YAAA,CAAa,SAAS,CAAA,KAAM,KAAA;AACpC,IAAA,KAAA,CAAM,YAAA,CAAa,WAAW,KAAK,CAAA;AACrC,EAAA,UAAA,CAAW,GAAA,CAAI,KAAA,EAAO,EAAE,SAAA,EAAW,OAAO,CAAA;AAC5C;;;ACjEO,IAAM,uBAAA,GAA0B,sCAAA;AAGvC,IAAM,KAAA,GAAQ,iDAAA;AAMd,IAAM,SAAA,GAAY,CAAA;AAElB,IAAMF,UAAAA,uBAAgB,OAAA,EAAgB;AACtC,IAAM,WAAA,uBAAkB,OAAA,EAAiB;AAWlC,SAAS,2BAA2B,SAAA,EAAyB;AAClE,EAAA,IAAIA,UAAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAAA,UAAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,SAAS,MAAA,CAAO,MAAA;AACtB,EAAA,MAAA,CAAO,MAAA,GAAS,SAA8B,OAAA,EAAwB;AACpE,IAAA,MAAA,CAAO,IAAA,CAAK,MAAM,OAAO,CAAA;AACzB,IAAA,IAAI,CAAC,IAAA,CAAK,aAAA,EAAe,SAAA,CAAU,QAAA,CAAS,oBAAoB,CAAA,EAAG;AACnE,IAAA,MAAM,QAAQ,IAAA,CAAK,MAAA;AACnB,IAAA,IAAI,KAAA,IAAS,CAAC,WAAA,CAAY,GAAA,CAAI,KAAK,CAAA,EAAG,IAAA,CAAK,MAAM,KAAK,CAAA;AAAA,EACxD,CAAA;AACF;AAEA,SAAS,IAAA,CAAK,MAAoB,KAAA,EAA0B;AAC1D,EAAA,WAAA,CAAY,IAAI,KAAK,CAAA;AACrB,EAAA,MAAM,QAAA,uBAAe,GAAA,EAAa;AAClC,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAuB;AACvC,IAAA,MAAM,WAAW,KAAA,CAAM,MAAA;AACvB,IAAA,IAAI,EAAE,oBAAoB,OAAA,CAAA,EAAU;AACpC,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,UAAA,EAAY,aAAA,CAAc,kBAAkB,CAAA;AAChE,IAAA,MAAM,QAAA,GACJ,IAAA,CAAK,aAAA,EAAe,YAAA,CAAa,0BAA0B,CAAA,KAC3D,UAAA;AACF,IAAA,IACE,QAAA,IACA,MAAA,IACA,QAAA,CAAS,SAAA,GAAY,SAAA;AAAA,IAErB,SAAS,qBAAA,EAAsB,CAAE,GAAA,IAC/B,MAAA,CAAO,uBAAsB,CAAE,MAAA;AAEjC,MAAA,QAAA,CAAS,IAAI,QAAQ,CAAA;AAAA,SAClB,QAAA,CAAS,OAAO,QAAQ,CAAA;AAC7B,IAAA,KAAA,MAAW,OAAA,IAAW,QAAA;AACpB,MAAA,IAAI,CAAC,OAAA,CAAQ,WAAA,EAAa,QAAA,CAAS,OAAO,OAAO,CAAA;AACnD,IAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,IAAA,GAAO,CAAA,GAAI,KAAA,GAAQ,EAAA;AAC1C,IAAA,IAAI,KAAA,CAAM,KAAA,CAAM,gBAAA,CAAiB,uBAAuB,MAAM,KAAA,EAAO;AACrE,IAAA,IAAI,KAAA,EAAO,KAAA,CAAM,KAAA,CAAM,WAAA,CAAY,yBAAyB,KAAK,CAAA;AAAA,SAC5D,KAAA,CAAM,KAAA,CAAM,cAAA,CAAe,uBAAuB,CAAA;AAAA,EACzD,CAAA;AAGA,EAAA,KAAA,MAAW,IAAA,IAAQ,CAAC,KAAA,EAAO,IAAI,CAAA;AAC7B,IAAA,IAAA,CAAK,gBAAA,CAAiB,UAAU,QAAA,EAAU,EAAE,SAAS,IAAA,EAAM,OAAA,EAAS,MAAM,CAAA;AAC9E;;;ACrEA,kBAAA,CAAmB,SAAS,SAAS,CAAA;AACrC,sBAAA,CAAuB,SAAS,SAAS,CAAA;AACzC,0BAAA,CAA2B,SAAS,SAAS,CAAA;AAC7C,kBAAA,CAAmB,SAAS,SAAS,CAAA;AAS9B,IAAM,iCAAA,GAAoC","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"]}
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts"],"names":[],"mappings":";;;;AAEA,qBAAA,EAAsB;AAWf,IAAM,iCAAA,GAAoC","file":"surface-scaffold-register.js","sourcesContent":["import { installDialogSurfaces } from '../internal/dialog-surface-controller.js';\n\ninstallDialogSurfaces();\n\n/**\n * Importing this module wires every DialogSurface in the document: the close\n * button, `data-dialog-close`, Escape, and backdrop requests through the\n * cancelable `kui-request-close`. `openDialog` also wires the dialogs it\n * opens, measuring a floating header's or footer's body clearance, showing a\n * floating header's divider while content scrolls beneath it, and following a\n * bottom sheet's keyboard clearance and resize grabber, all kept across\n * application re-renders while the dialog is open.\n */\nexport const surfaceScaffoldElementsRegistered = true;\n"]}

package/dist/surface-scaffold.d.ts

@@ -2,6 +2,27 @@ import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { CssLength } from './css-values.js';
 
+/** What asked an open DialogSurface to close. */
+type DialogCloseSource = 'close-button' | 'escape' | 'backdrop';
+/** The detail of a DialogSurface's cancelable `kui-request-close` event. */
+interface DialogRequestCloseDetail {
+    readonly source: DialogCloseSource;
+}
+/**
+ * Open a DialogSurface as a modal dialog: in the top layer, the rest of the
+ * page inert, focus on its `autofocus` element or else the panel. It plays
+ * its enter motion and, with the controller installed here, keeps its
+ * measured chrome, sheet height, and keyboard clearance across application
+ * re-renders. Opening an open dialog does nothing.
+ */
+declare function openDialog(dialog: HTMLDialogElement): void;
+/**
+ * Close an open DialogSurface after its exit motion. The application's own
+ * close is never refused: no `kui-request-close` is dispatched. The native
+ * `close` event fires once it has closed.
+ */
+declare function closeDialog(dialog: HTMLDialogElement): void;
+
 type DialogSurfaceSize = 'small' | 'medium' | 'large';
 /**
  * How the dialog is presented: `modal` (default) centered on the screen,
@@ -12,7 +33,7 @@ type DialogSurfaceSize = 'small' | 'medium' | 'large';
 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
+ * from, or out to, the bottom edge; `standard` keeps the dialog's
  * scale-and-fade. Both honor `prefers-reduced-motion`.
  */
 type DialogSurfaceSheetMotion = 'slide' | 'standard';
@@ -46,8 +67,42 @@ type DialogSurfaceHeaderPresentation = 'docked' | 'floating';
  * `data-key`; the surface's own configuration attributes stay protected.
  */
 type DialogSurfaceRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
-interface DialogSurfaceProps {
+/**
+ * The dialog's accessible name: its `label` text (also the default title), or
+ * the id of an element that names it, such as a `heading` ToolbarText.
+ */
+type DialogSurfaceName = {
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+};
+type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;
+interface DialogSurfaceOptions {
+    /** The dialog's id, for `openDialog(document.getElementById(id))`. */
+    id?: string;
+    /** The body content. */
     children: KerfUiContent;
+    /**
+     * Header title content in place of the `label` text, such as an xl
+     * `ToolbarText` with a description. The dialog keeps its `label` (or
+     * `labelledBy`) name.
+     */
+    heading?: KerfUiContent;
+    /** Controls before the close button in the header. */
+    headerActions?: KerfUiContent;
+    /** The footer, below the body (or floating over it); usually its buttons. */
+    footer?: KerfUiContent;
+    /**
+     * Render no header: no title and no close button. The content then owns its
+     * heading and a way to close (an element with `data-dialog-close`).
+     */
+    withoutHeader?: boolean;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** The close button's accessible name (default `Close`). */
+    closeLabel?: string;
     size?: DialogSurfaceSize;
     presentation?: DialogSurfacePresentation;
     /** Modal preferred width. Takes precedence over size, within the viewport cap. */
@@ -132,8 +187,16 @@ interface DialogSurfaceProps {
     /** 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;
+/**
+ * A modal dialog: a native `<dialog>` with Kerf's header, body, and footer
+ * chrome, sized and presented by its props. Render it closed, then open it
+ * with `openDialog()` and close it with `closeDialog()`, the close button, an
+ * element with `data-dialog-close`, Escape, or (with `lightDismiss`) a press
+ * on the backdrop. Import `@kerfjs/ui/surface-scaffold/register` for the
+ * floating header and footer measurement, the bottom sheet's keyboard
+ * clearance and grabber, and re-render resilience while open.
+ */
+declare function DialogSurface({ id, label, labelledBy, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, 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. */
@@ -185,8 +248,8 @@ type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {
  * 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.
+ * dismisses and leaves the page interactive. Use `DialogSurface` 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';
@@ -200,4 +263,4 @@ interface PopupSurfaceProps {
 /** 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 };
+export { type DialogCloseSource, type DialogRequestCloseDetail, DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfaceName, type DialogSurfaceOptions, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset, closeDialog, openDialog };

package/dist/surface-scaffold.js

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