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

package/dist/surface-scaffold-register.js

@@ -1,6 +1,108 @@
+import { syncSheetHandleValues, createSheetHandle, wireSheetHandle } from './chunk-QTSMHH5J.js';
 import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';
 
-// src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts
+// 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";
@@ -9,11 +111,11 @@ var CHROME_PARTS = [
   ["header", HEADER_BLOCK_SIZE_PROPERTY],
   ["footer", FOOTER_BLOCK_SIZE_PROPERTY]
 ];
-var installed = /* @__PURE__ */ new WeakSet();
+var installed2 = /* @__PURE__ */ new WeakSet();
 var observedParts = /* @__PURE__ */ new WeakSet();
 function installChromeBlockSize(prototype) {
-  if (installed.has(prototype)) return;
-  installed.add(prototype);
+  if (installed2.has(prototype)) return;
+  installed2.add(prototype);
   const target = prototype;
   const update = target.update;
   target.update = function(changed) {
@@ -46,12 +148,12 @@ function observePart(panel, element, property) {
 }
 
 // src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts
-var installed2 = /* @__PURE__ */ new WeakSet();
+var installed3 = /* @__PURE__ */ new WeakSet();
 var observed = /* @__PURE__ */ new WeakSet();
 var ownedNames = /* @__PURE__ */ new WeakMap();
 function installDialogLabel(prototype) {
-  if (installed2.has(prototype)) return;
-  installed2.add(prototype);
+  if (installed3.has(prototype)) return;
+  installed3.add(prototype);
   const target = prototype;
   const update = target.update;
   target.update = function(changed) {
@@ -103,11 +205,11 @@ function syncDialogLabel(host) {
 var HEADER_DIVIDER_PROPERTY = "--_kui-dialog-surface-header-divider";
 var SHOWN = "var(--_kui-dialog-surface-header-divider-color)";
 var THRESHOLD = 1;
-var installed3 = /* @__PURE__ */ new WeakSet();
+var installed4 = /* @__PURE__ */ new WeakSet();
 var wiredPanels = /* @__PURE__ */ new WeakSet();
 function installHeaderScrollDivider(prototype) {
-  if (installed3.has(prototype)) return;
-  installed3.add(prototype);
+  if (installed4.has(prototype)) return;
+  installed4.add(prototype);
   const target = prototype;
   const update = target.update;
   target.update = function(changed) {
@@ -144,6 +246,7 @@ function wire(host, panel) {
 installDialogLabel(WaDialog.prototype);
 installChromeBlockSize(WaDialog.prototype);
 installHeaderScrollDivider(WaDialog.prototype);
+installBottomSheet(WaDialog.prototype);
 var surfaceScaffoldElementsRegistered = true;
 
 export { surfaceScaffoldElementsRegistered };

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

@@ -1 +1 @@
-{"version":3,"sources":["../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":["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 { 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);\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, and shows a floating header's divider while\n * content is scrolled beneath it.\n */\nexport const surfaceScaffoldElementsRegistered = true;\n"]}
+{"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

@@ -3,7 +3,19 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { CssLength } from './css-values.js';
 
 type DialogSurfaceSize = 'small' | 'medium' | 'large';
-type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';
+/**
+ * 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. */
@@ -44,13 +56,34 @@ interface DialogSurfaceProps {
     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. */
+    /**
+     * 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`.
+     * 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.
@@ -100,7 +133,7 @@ interface DialogSurfaceProps {
     slot?: string;
 }
 /** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
-declare function DialogSurface({ children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+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. */
@@ -167,4 +200,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 DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };
+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

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

package/dist/tab-navigator.d.ts

@@ -1,6 +1,7 @@
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { PaneAppearance } from './pane.js';
+import { PaneAppearance, SurfaceTint, ScrollEdge } from './pane.js';
+import { CssColor } from './css-values.js';
 import './scroll-clearance-BikHljTc.js';
 
 interface TabNavigatorTabBase<Id extends string> {
@@ -12,6 +13,17 @@ interface TabNavigatorTabBase<Id extends string> {
     content: KerfUiContent;
     /** Background of this scene's scrolling work surface. */
     appearance?: PaneAppearance;
+    /**
+     * Paint this scene in an app-chosen color (a `@kerfjs/ui/css-values` color
+     * builder). It replaces the appearance's fill. Forced colors paint `Canvas`.
+     */
+    background?: CssColor;
+    /**
+     * A scoped tint (`{ color, scheme }`) for this scene: its surfaces and every
+     * descendant re-derive their surface and text tokens from the app's color
+     * in the declared scheme, with lightness clamped to keep text at WCAG AA.
+     */
+    tint?: SurfaceTint;
     /** Add 8px to every side of a plain scene's scrolling content. */
     deepInset?: boolean;
     /** Opt into keyboard (`0`) or programmatic (`-1`) focus on this scene. */
@@ -57,8 +69,13 @@ type TabNavigatorTab<Id extends string = string> = TabNavigatorTabBase<Id> & (Ta
  * How a {@link TabNavigator}'s tab bar relates to the active scene: `docked`
  * below it, or `overlay` laid over its bottom edge on the translucent chrome
  * material, so the scene's content scrolls visibly beneath the bar.
+ * `clear` lays it over
+ * the same edge fully transparent, for chrome over imagery: legibility comes
+ * from glass control groups or a scrim, and with `scrollEdge="material"` the
+ * chrome material fades in once content scrolls beneath
+ * it, until the scene scrolls to its end.
  */
-type TabNavigatorBarPresentation = 'docked' | 'overlay';
+type TabNavigatorBarPresentation = 'docked' | 'overlay' | 'clear';
 interface TabNavigatorProps<Id extends string = string> {
     id: string;
     /** Accessible name for the tab bar. */
@@ -97,6 +114,29 @@ interface TabNavigatorProps<Id extends string = string> {
      * toward the normal text color to keep AA over the content beneath.
      */
     barPresentation?: TabNavigatorBarPresentation;
+    /**
+     * With `barPresentation="clear"`, `material` fades the chrome material in
+     * behind the bar while the active scene continues beneath it (default
+     * `none`).
+     */
+    scrollEdge?: ScrollEdge;
+    /**
+     * The scroll distance, in CSS pixels, over which the scroll edge fades in
+     * (default 60).
+     */
+    scrollEdgeDistance?: number;
+    /**
+     * Paint the navigator, and its docked tab bar, in an app-chosen color (a
+     * `@kerfjs/ui/css-values` color builder) instead of the surface. A tab's own
+     * `background` paints its scene. Forced colors paint `Canvas`.
+     */
+    background?: CssColor;
+    /**
+     * A scoped tint (`{ color, scheme }`) for the navigator, its bar, and every scene: its surfaces and every
+     * descendant re-derive their surface and text tokens from the app's color
+     * in the declared scheme, with lightness clamped to keep text at WCAG AA.
+     */
+    tint?: SurfaceTint;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -109,6 +149,6 @@ interface TabNavigatorProps<Id extends string = string> {
  * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
  * a bottom bar. See `docs/23-app-layouts.md` §3.4.
  */
-declare function TabNavigator<Id extends string>({ id, label, tabs, active, separator, chromeDividers, barPresentation, className, slot, }: TabNavigatorProps<Id>): SafeHtml;
+declare function TabNavigator<Id extends string>({ id, label, tabs, active, separator, chromeDividers, barPresentation, scrollEdge, scrollEdgeDistance, background, tint, className, slot, }: TabNavigatorProps<Id>): SafeHtml;
 
 export { TabNavigator, type TabNavigatorBarPresentation, type TabNavigatorProps, type TabNavigatorTab };

package/dist/tab-navigator.js

@@ -1,5 +1,6 @@
-import { Badge } from './chunk-U6QYTMDB.js';
+import { surfaceTintAttributes, joinStyles, scrollEdgeAttributes } from './chunk-SQ5DH66U.js';
 import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+import { Badge } from './chunk-U6QYTMDB.js';
 
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
@@ -11,29 +12,57 @@ function TabNavigator({
   separator = "auto",
   chromeDividers = "scroll",
   barPresentation = "docked",
+  scrollEdge = "none",
+  scrollEdgeDistance,
+  background,
+  tint,
   className = "",
   slot
 }) {
-  if (tabs.some((tab) => tab.appearance === "sunken")) ensureSunkenTexture();
+  const tinted = surfaceTintAttributes(tint);
+  if (tabs.some(
+    (tab) => tab.appearance === "sunken" && tab.background === void 0
+  ))
+    ensureSunkenTexture();
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      class: `kui-tab-scaffold ${className}`.trim(),
+      class: `kui-tab-scaffold ${tinted.className} ${className}`.replace(/\s+/g, " ").trim(),
       id,
       "data-component": "tab-scaffold",
       "data-tab-scaffold-id": id,
       "data-separator": separator,
       "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
-      "data-bar-presentation": barPresentation === "overlay" ? "overlay" : void 0,
+      "data-bar-presentation": barPresentation !== "docked" ? "overlay" : void 0,
+      "data-bar-material": barPresentation === "clear" ? "clear" : void 0,
+      ...scrollEdgeAttributes(
+        scrollEdge,
+        scrollEdgeDistance,
+        barPresentation === "clear"
+      ),
+      "data-background": background === void 0 ? void 0 : "",
+      "data-kui-tint": tinted["data-kui-tint"],
+      "data-kui-tint-accent": tinted["data-kui-tint-accent"],
+      style: joinStyles(
+        background === void 0 ? void 0 : `--_kui-tab-scaffold-background:${background}`,
+        tinted.style
+      ),
       slot,
       children: [
         /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx(
           "div",
           {
-            class: "kui-tab-scaffold__scene",
+            class: `kui-tab-scaffold__scene ${surfaceTintAttributes(tab.tint).className}`.trim(),
             "data-tab-scaffold-scene": tab.id,
             "data-active": String(tab.id === active),
-            "data-appearance": tab.appearance === "sunken" ? "sunken" : void 0,
+            "data-appearance": tab.appearance === "sunken" && tab.background === void 0 ? "sunken" : void 0,
+            "data-background": tab.background === void 0 ? void 0 : "",
+            "data-kui-tint": surfaceTintAttributes(tab.tint)["data-kui-tint"],
+            "data-kui-tint-accent": surfaceTintAttributes(tab.tint)["data-kui-tint-accent"],
+            style: joinStyles(
+              tab.background === void 0 ? void 0 : `--_kui-tab-scaffold-scene-background:${tab.background}`,
+              surfaceTintAttributes(tab.tint).style
+            ),
             "data-deep-inset": tab.deepInset ? "true" : void 0,
             "data-outlined": tab.id === active && tab.outlined ? "true" : void 0,
             role: tab.tabIndex === void 0 ? void 0 : "tabpanel",

package/dist/tab-navigator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation/tab-navigator/tab-navigator.tsx"],"names":[],"mappings":"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","file":"tab-navigator.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport type { PaneAppearance } from '../../layout/pane/pane.js';\n\ninterface TabNavigatorTabBase<Id extends string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n  /** Add 8px to every side of a plain scene's scrolling content. */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on this scene. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while this scene is active. */\n  outlined?: boolean;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabNavigatorTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabNavigatorTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabNavigatorTab<Id extends string = string> =\n  TabNavigatorTabBase<Id> &\n    (TabNavigatorTabCountBadge | TabNavigatorTabDotBadge);\n\n/**\n * How a {@link TabNavigator}'s tab bar relates to the active scene: `docked`\n * below it, or `overlay` laid over its bottom edge on the translucent chrome\n * material, so the scene's content scrolls visibly beneath the bar.\n */\nexport type TabNavigatorBarPresentation = 'docked' | 'overlay';\n\nexport interface TabNavigatorProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabNavigatorTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The bar's top separator. `auto` (default) draws it against a sunken active\n   * work surface and otherwise follows `chromeDividers`; `hidden` suppresses\n   * the line, including a scroll divider.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` suppresses that scroll divider. A sunken active work\n   * surface still draws the separator unless `separator=\"hidden\"`. The line\n   * is the bar's own 1px top border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the tab bar its own band below the scenes.\n   * `overlay` lays it over the active scene's bottom edge on the translucent\n   * chrome material (opaque under reduced transparency, increased contrast,\n   * or without `backdrop-filter`; `Canvas` in forced colors), so content\n   * scrolls visibly beneath it, as under an iOS tab bar. `wireTabNavigator`\n   * measures the live bar (bottom safe area included) and the scenes hand\n   * its height to their content as the block-end `--kui-edge-inset-*`\n   * context, so a plain scene, a sole `Pane`, or a `NavStack` (and its own\n   * bottom toolbar, which then sits above the bar) rests its last item clear\n   * of it. Until then it stays docked. Unselected tab labels lift halfway\n   * toward the normal text color to keep AA over the content beneath.\n   */\n  barPresentation?: TabNavigatorBarPresentation;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab navigator: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-navigator`'s `wireTabNavigator`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabNavigator<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  barPresentation = 'docked',\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  if (tabs.some((tab) => tab.appearance === 'sunken')) ensureSunkenTexture();\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-bar-presentation={\n        barPresentation === 'overlay' ? 'overlay' : undefined\n      }\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={tab.appearance === 'sunken' ? 'sunken' : undefined}\n            data-deep-inset={tab.deepInset ? 'true' : undefined}\n            data-outlined={\n              tab.id === active && tab.outlined ? 'true' : undefined\n            }\n            role={tab.tabIndex === undefined ? undefined : 'tabpanel'}\n            aria-label={tab.tabIndex === undefined ? undefined : tab.label}\n            aria-hidden={String(tab.id !== active)}\n            tabindex={\n              tab.id === active\n                ? tab.tabIndex\n                : tab.tabIndex === undefined\n                  ? undefined\n                  : -1\n            }\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/tab-navigator/tab-navigator.tsx"],"names":[],"mappings":"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","file":"tab-navigator.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport type { PaneAppearance } from '../../layout/pane/pane.js';\n\ninterface TabNavigatorTabBase<Id extends string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: KerfUiContent;\n  /** Background of this scene's scrolling work surface. */\n  appearance?: PaneAppearance;\n  /**\n   * Paint this scene in an app-chosen color (a `@kerfjs/ui/css-values` color\n   * builder). It replaces the appearance's fill. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for this scene: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\n  /** Add 8px to every side of a plain scene's scrolling content. */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on this scene. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while this scene is active. */\n  outlined?: boolean;\n}\n\n/** A tab with an optional count or short-status badge. */\ninterface TabNavigatorTabCountBadge {\n  /**\n   * Optional count or short status shown as a solid danger `Badge` at the\n   * top-trailing corner of the tab icon (the iOS tab-bar badge). Omitted, `''`,\n   * or non-finite numbers render no badge. The visual badge is `aria-hidden`;\n   * its meaning reaches assistive technology through `badgeLabel`.\n   *\n   * Pass `true` instead for the text-free dot (new content without a count).\n   */\n  badge?: string | number;\n  /**\n   * Localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"3 unread\"` → `\"Inbox, 3 unread\"`).\n   * Defaults to the badge text itself. Ignored when no badge renders.\n   */\n  badgeLabel?: string;\n}\n\n/** A tab with the text-free dot badge (new content without a count). */\ninterface TabNavigatorTabDotBadge {\n  /**\n   * `true` shows a solid danger dot `Badge` at the top-trailing corner of the\n   * tab icon — the iOS tab-bar dot for new content without a count.\n   */\n  badge: true;\n  /**\n   * Required localized phrase folded into the tab's accessible name as\n   * `\"<label>, <badgeLabel>\"` (for example `\"New activity\"` →\n   * `\"Feed, New activity\"`). A dot has no text, so this is its only meaning.\n   */\n  badgeLabel: string;\n}\n\n/** One bottom-bar destination: its label, optional icon and badge, and content. */\nexport type TabNavigatorTab<Id extends string = string> =\n  TabNavigatorTabBase<Id> &\n    (TabNavigatorTabCountBadge | TabNavigatorTabDotBadge);\n\n/**\n * How a {@link TabNavigator}'s tab bar relates to the active scene: `docked`\n * below it, or `overlay` laid over its bottom edge on the translucent chrome\n * material, so the scene's content scrolls visibly beneath the bar.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the scene scrolls to its end.\n */\nexport type TabNavigatorBarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface TabNavigatorProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabNavigatorTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  /**\n   * The bar's top separator. `auto` (default) draws it against a sunken active\n   * work surface and otherwise follows `chromeDividers`; `hidden` suppresses\n   * the line, including a scroll divider.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line over the tab bar, where it meets the active scene. `scroll`\n   * (default) shows it only while more of the scene's content lies below —\n   * never at the scroll end or when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the scaffold; unwired, it does not show. `always` shows it without the\n   * wiring; `none` suppresses that scroll divider. A sunken active work\n   * surface still draws the separator unless `separator=\"hidden\"`. The line\n   * is the bar's own 1px top border, so no state moves the bar or a tab.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the tab bar its own band below the scenes.\n   * `overlay` lays it over the active scene's bottom edge on the translucent\n   * chrome material (opaque under reduced transparency, increased contrast,\n   * or without `backdrop-filter`; `Canvas` in forced colors), so content\n   * scrolls visibly beneath it, as under an iOS tab bar. `wireTabNavigator`\n   * measures the live bar (bottom safe area included) and the scenes hand\n   * its height to their content as the block-end `--kui-edge-inset-*`\n   * context, so a plain scene, a sole `Pane`, or a `NavStack` (and its own\n   * bottom toolbar, which then sits above the bar) rests its last item clear\n   * of it. Until then it stays docked. Unselected tab labels lift halfway\n   * toward the normal text color to keep AA over the content beneath.\n   */\n  barPresentation?: TabNavigatorBarPresentation;\n  /**\n   * With `barPresentation=\"clear\"`, `material` fades the chrome material in\n   * behind the bar while the active scene continues beneath it (default\n   * `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /**\n   * Paint the navigator, and its docked tab bar, in an app-chosen color (a\n   * `@kerfjs/ui/css-values` color builder) instead of the surface. A tab's own\n   * `background` paints its scene. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the navigator, its bar, and every scene: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab navigator: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-navigator`'s `wireTabNavigator`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabNavigator<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  barPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: TabNavigatorProps<Id>) {\n  const tinted = surfaceTintAttributes(tint);\n  if (\n    tabs.some(\n      (tab) => tab.appearance === 'sunken' && tab.background === undefined,\n    )\n  )\n    ensureSunkenTexture();\n  return (\n    <section\n      class={`kui-tab-scaffold ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-bar-presentation={\n        barPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bar-material={barPresentation === 'clear' ? 'clear' : undefined}\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        barPresentation === 'clear',\n      )}\n      data-background={background === undefined ? undefined : ''}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      style={joinStyles(\n        background === undefined\n          ? undefined\n          : `--_kui-tab-scaffold-background:${background}`,\n        tinted.style,\n      )}\n      slot={slot}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class={`kui-tab-scaffold__scene ${surfaceTintAttributes(tab.tint).className}`.trim()}\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            data-appearance={\n              tab.appearance === 'sunken' && tab.background === undefined\n                ? 'sunken'\n                : undefined\n            }\n            data-background={tab.background === undefined ? undefined : ''}\n            data-kui-tint={surfaceTintAttributes(tab.tint)['data-kui-tint']}\n            data-kui-tint-accent={\n              surfaceTintAttributes(tab.tint)['data-kui-tint-accent']\n            }\n            style={joinStyles(\n              tab.background === undefined\n                ? undefined\n                : `--_kui-tab-scaffold-scene-background:${tab.background}`,\n              surfaceTintAttributes(tab.tint).style,\n            )}\n            data-deep-inset={tab.deepInset ? 'true' : undefined}\n            data-outlined={\n              tab.id === active && tab.outlined ? 'true' : undefined\n            }\n            role={tab.tabIndex === undefined ? undefined : 'tabpanel'}\n            aria-label={tab.tabIndex === undefined ? undefined : tab.label}\n            aria-hidden={String(tab.id !== active)}\n            tabindex={\n              tab.id === active\n                ? tab.tabIndex\n                : tab.tabIndex === undefined\n                  ? undefined\n                  : -1\n            }\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => {\n          const dot = tab.badge === true;\n          const badgeText = dot ? undefined : normalizeBadge(tab.badge);\n          const hasBadge = dot || badgeText !== undefined;\n          const badge = hasBadge && (\n            <span\n              class=\"kui-tab-scaffold__tab-badge\"\n              data-badge-kind={dot ? 'dot' : 'text'}\n            >\n              {badgeText === undefined ? (\n                <Badge tone=\"danger\" size=\"dot\" ariaHidden />\n              ) : (\n                <Badge\n                  tone=\"danger\"\n                  appearance=\"solid\"\n                  size=\"compact\"\n                  ariaHidden\n                >\n                  {badgeText}\n                </Badge>\n              )}\n            </span>\n          );\n          // A dot has no text fallback: without a usable badgeLabel (reachable\n          // only from untyped callers) the tab keeps its plain accessible name.\n          const badgeLabel = hasBadge\n            ? tab.badgeLabel?.trim() || badgeText\n            : undefined;\n          return (\n            <button\n              type=\"button\"\n              class=\"kui-tab-scaffold__tab\"\n              role=\"tab\"\n              data-tab-scaffold-tab={tab.id}\n              aria-selected={String(tab.id === active)}\n              tabindex={tab.id === active ? '0' : '-1'}\n              aria-label={\n                badgeLabel === undefined\n                  ? undefined\n                  : `${tab.label}, ${badgeLabel}`\n              }\n              data-has-badge={hasBadge ? 'true' : undefined}\n            >\n              {tab.icon ? (\n                <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                  {tab.icon}\n                  {badge}\n                </span>\n              ) : (\n                badge\n              )}\n              <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n            </button>\n          );\n        })}\n      </nav>\n    </section>\n  );\n}\n\nfunction normalizeBadge(\n  badge: string | number | undefined,\n): string | undefined {\n  if (typeof badge === 'number')\n    return Number.isFinite(badge) ? String(badge) : undefined;\n  if (typeof badge === 'string' && badge.trim()) return badge.trim();\n  return undefined;\n}\n"]}

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

@@ -4,6 +4,8 @@ import { CssLength } from './css-values.js';
 
 type ToolbarControlGroupAppearance = 'contained' | 'borderless';
 type ToolbarControlGroupTone = 'default' | 'dark';
+/** Surface material: the opaque `solid` fill (default) or translucent `glass`. */
+type ToolbarControlGroupMaterial = 'solid' | 'glass';
 /** Quiet palette for a contained, single decorative icon tile. */
 type ToolbarControlGroupTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
 type ToolbarControlGroupButtonAppearance = 'plain' | 'push';
@@ -44,6 +46,15 @@ interface ToolbarControlGroupProps {
     single?: boolean;
     appearance?: ToolbarControlGroupAppearance;
     tone?: ToolbarControlGroupTone;
+    /**
+     * `glass` paints the group on the translucent chrome material (backdrop
+     * blur and saturation) with a specular edge and a soft shadow, for a group
+     * floating over imagery or a clear toolbar. Controls take the normal text
+     * color so they keep AA over any content; the fill turns opaque under
+     * reduced transparency, increased contrast, static effects, or without
+     * backdrop-filter support. A borderless group has no surface and ignores it.
+     */
+    material?: ToolbarControlGroupMaterial;
     /** Quiet fill, matching border and foreground for a contained single group whose only child is a decorative SVG. Ignored for interactive or mixed content. */
     tileTone?: ToolbarControlGroupTileTone;
     buttonAppearance?: ToolbarControlGroupButtonAppearance;
@@ -99,6 +110,6 @@ interface ToolbarControlGroupProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, tileTone, buttonAppearance, shape, size, density, content, focusRing, selectedChrome, selectedTone, nestedDropdown, menuInset, overflow, expandedOverflow, visibility, hideBelow, showBelow, sizing, placement, growBasis, relocateOnCollapse, scrim, busy, busyLabel, avatarImage, slot, }: ToolbarControlGroupProps): kerfjs.SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, material, tileTone, buttonAppearance, shape, size, density, content, focusRing, selectedChrome, selectedTone, nestedDropdown, menuInset, overflow, expandedOverflow, visibility, hideBelow, showBelow, sizing, placement, growBasis, relocateOnCollapse, scrim, busy, busyLabel, avatarImage, slot, }: ToolbarControlGroupProps): kerfjs.SafeHtml;
 
-export { ToolbarActionLink, type ToolbarActionLinkProps, ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupExpandedOverflow, type ToolbarControlGroupFocusRing, type ToolbarControlGroupMenuInset, type ToolbarControlGroupOverflow, type ToolbarControlGroupPlacement, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupSizing, type ToolbarControlGroupTileTone, type ToolbarControlGroupTone, type ToolbarControlGroupVisibility };
+export { ToolbarActionLink, type ToolbarActionLinkProps, ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupContent, type ToolbarControlGroupDensity, type ToolbarControlGroupExpandedOverflow, type ToolbarControlGroupFocusRing, type ToolbarControlGroupMaterial, type ToolbarControlGroupMenuInset, type ToolbarControlGroupOverflow, type ToolbarControlGroupPlacement, type ToolbarControlGroupProps, type ToolbarControlGroupSelectedChrome, type ToolbarControlGroupSelectedTone, type ToolbarControlGroupShape, type ToolbarControlGroupSize, type ToolbarControlGroupSizing, type ToolbarControlGroupTileTone, type ToolbarControlGroupTone, type ToolbarControlGroupVisibility };

package/dist/toolbar-control-group.js

@@ -1,4 +1,4 @@
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-QIG4IGUP.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-2PXZBFEC.js';