@kerfjs/ui 5.0.0-beta.76 → 5.0.0-beta.78

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -1,12 +1,67 @@
 .kui-dialog-surface > wa-dialog {
+  --_kui-dialog-surface-width: 35rem;
+  --_kui-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-dialog-surface-gutter, 1rem)
+  );
   --width: min(35rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="small"] > wa-dialog {
+  --_kui-dialog-surface-width: 25rem;
   --width: min(25rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="large"] > wa-dialog {
+  --_kui-dialog-surface-width: 50rem;
   --width: min(50rem, calc(100vw - 2rem));
 }
+.kui-dialog-surface[data-presentation="modal"][data-preferred-width]
+  > wa-dialog {
+  --width: min(
+    var(--_kui-dialog-surface-preferred-width),
+    calc(100vw - 2rem)
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog {
+  --width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+/* Web Awesome has a separate max-width clamp; setting --width alone cannot
+   provide an 8px phone gutter. Omitted props retain its legacy geometry. */
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog::part(dialog) {
+  max-width: max(
+    0px,
+    calc(
+      100vw - var(--_kui-dialog-surface-resolved-gutter) -
+        var(--_kui-dialog-surface-resolved-gutter)
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-max-height]
+  > wa-dialog::part(dialog) {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-max-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
 .kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
 .kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
   padding: 0;

package/dist/styles/components/typography/text/text.css

@@ -137,3 +137,22 @@ span.kui-text {
 .kui-list-header[data-size="xl"] .kui-list-header__title > .kui-text {
   font-size: var(--kui-font-xl);
 }
+
+/* Exterior control gutters preserve the Text-owned border and padding.
+   These rules follow inline/context resets so an explicit prop also works there. */
+
+.kui-text[data-control-margins*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+}

package/dist/styles/nav-stack.css

@@ -37,7 +37,9 @@
   transition: opacity var(--kui-nav-stack-transition-duration, 200ms) ease;
 }
 
+/* Establish the starting opacity instantly; only the release animates. */
 .kui-nav-stack__chrome--entering {
+  transition: none;
   opacity: 0;
 }
 
@@ -69,10 +71,6 @@
   background: var(--kui-color-surface);
 }
 
-.kui-nav-stack__header {
-  min-width: 0;
-}
-
 .kui-nav-stack__viewport {
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
@@ -104,11 +102,9 @@
   inset: 0;
 }
 
-.kui-nav-stack__view[data-appearance="sunken"] {
-  background: var(
-    --kui-sunken-panel-background,
-    var(--kui-color-surface-lowered)
-  );
+.kui-nav-stack__view:has(> [data-component="pane"]) {
+  display: grid;
+  overflow: hidden;
 }
 
 /* Each view is its region's scroll owner: block insets become padding inside
@@ -156,6 +152,10 @@
   visibility: hidden;
 }
 
+.kui-nav-stack__view[data-nav-revealed="true"] {
+  visibility: visible;
+}
+
 .kui-nav-stack__view[data-nav-exiting="true"] {
   z-index: 1;
   visibility: visible;
@@ -163,15 +163,20 @@
 
 /* Push: the incoming view starts off the trailing edge and slides to rest.
    Pop: the outgoing view starts at rest and slides off the trailing edge. */
+/* Establish the offscreen start without first transitioning toward it. */
+.kui-nav-stack__view--entering {
+  transition: none;
+}
+
 .kui-nav-stack__view--entering,
 .kui-nav-stack__view--exiting {
   transform: translateX(100%);
 }
 
 .kui-nav-stack__bottom {
-  padding-block-end: var(--_kui-nav-stack-safe-block-end);
-  padding-inline: var(--_kui-nav-stack-safe-inline-start)
-    var(--_kui-nav-stack-safe-inline-end);
+  --kui-edge-inset-block-end: var(--_kui-nav-stack-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
   border-block-start: 1px solid
     var(--_kui-nav-stack-bottom-divider, transparent);
   background: var(--kui-color-surface);

package/dist/styles/pane.css

@@ -158,6 +158,13 @@
     var(--_kui-pane-content-block-end);
 }
 
+/* Add one outer gutter without changing the inherited item-margin token.
+   Nested Row, List, and Grid therefore keep their own default 8px insets. */
+.kui-pane[data-deep-inset="true"] > .kui-pane__content {
+  padding-inline: calc(var(--_kui-pane-safe-inline-start) + var(--kui-space-xs))
+    calc(var(--_kui-pane-safe-inline-end) + var(--kui-space-xs));
+}
+
 .kui-pane__header ~ .kui-pane__content {
   --_kui-pane-content-block-start: 0px;
 }

package/dist/styles/surface-scaffold.css

@@ -1,12 +1,67 @@
 .kui-dialog-surface > wa-dialog {
+  --_kui-dialog-surface-width: 35rem;
+  --_kui-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-dialog-surface-gutter, 1rem)
+  );
   --width: min(35rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="small"] > wa-dialog {
+  --_kui-dialog-surface-width: 25rem;
   --width: min(25rem, calc(100vw - 2rem));
 }
 .kui-dialog-surface[data-size="large"] > wa-dialog {
+  --_kui-dialog-surface-width: 50rem;
   --width: min(50rem, calc(100vw - 2rem));
 }
+.kui-dialog-surface[data-presentation="modal"][data-preferred-width]
+  > wa-dialog {
+  --width: min(
+    var(--_kui-dialog-surface-preferred-width),
+    calc(100vw - 2rem)
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog {
+  --width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+/* Web Awesome has a separate max-width clamp; setting --width alone cannot
+   provide an 8px phone gutter. Omitted props retain its legacy geometry. */
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog::part(dialog) {
+  max-width: max(
+    0px,
+    calc(
+      100vw - var(--_kui-dialog-surface-resolved-gutter) -
+        var(--_kui-dialog-surface-resolved-gutter)
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-max-height]
+  > wa-dialog::part(dialog) {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-max-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
 .kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
 .kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
   padding: 0;

package/dist/styles/tab-scaffold.css

@@ -73,6 +73,23 @@
   scroll-padding-block-start: var(--kui-edge-inset-block-start);
 }
 
+/* A plain scene adds one outer gutter; a sole Pane or layout keeps ownership
+   of its own content and may opt into deepInset there. */
+.kui-tab-scaffold__scene[data-deep-inset="true"]:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  ) {
+  padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
+    calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
+}
+
 .kui-tab-scaffold__scene
   > :not(
     :is(

package/dist/styles/text.css

@@ -137,3 +137,22 @@ span.kui-text {
 .kui-list-header[data-size="xl"] .kui-list-header__title > .kui-text {
   font-size: var(--kui-font-xl);
 }
+
+/* Exterior control gutters preserve the Text-owned border and padding.
+   These rules follow inline/context resets so an explicit prop also works there. */
+
+.kui-text[data-control-margins*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+}

package/dist/styles/toolbar-control-group.css

@@ -196,6 +196,10 @@
   ) {
   overflow: visible;
 }
+.kui-toolbar-control-group[data-content="search"][data-expanded="true"][data-expanded-overflow="visible"] {
+  height: auto;
+  overflow: visible;
+}
 .kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
   width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   flex: 0 0 auto;
@@ -606,17 +610,23 @@
         wa-button,
         .kui-select,
         .kui-toolbar-action-link
-      ):only-child
+      ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
+        :nth-last-child(1 of :not([data-toolbar-visibility-state]))
+      )
   ):hover {
   background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button, .kui-toolbar-action-link):only-child
+    > :is(button, wa-button, .kui-toolbar-action-link):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
   > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button):only-child
+    > :is(button, wa-button):nth-child(
+        1 of :where(:not([data-toolbar-visibility-state]))
+      ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
   )
   > wa-button:hover::part(base) {
   border-color: transparent;
@@ -761,25 +771,41 @@
 
 .kui-toolbar-control-group[data-content="avatar"]:is(
     [data-single="true"],
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   ) {
   background-image: var(--kui-toolbar-avatar-image);
 }
 
 .kui-toolbar-control-group[data-content="avatar"]:is(
     [data-single="true"],
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > :is(button, wa-button) {
   color: transparent;
 }
 
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > button[aria-pressed="true"],
 .kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
-    :has(> :is(button, wa-button):only-child)
+    :has(
+      > :is(button, wa-button):nth-child(
+          1 of :where(:not([data-toolbar-visibility-state]))
+        ):where(:nth-last-child(1 of :not([data-toolbar-visibility-state])))
+    )
   )
   > wa-button[aria-pressed="true"]::part(base) {
   color: transparent;
@@ -788,3 +814,75 @@
   background-repeat: no-repeat;
   background-size: contain;
 }
+
+/* Explicit quiet palette only for a lone decorative icon tile. The structural
+   guard keeps interactive, mixed and borderless groups on their existing chrome. */
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="neutral"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-neutral-fill-quiet);
+  border-color: var(--kui-color-neutral-border-quiet);
+  color: var(--kui-color-neutral-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="brand"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-brand-fill-quiet);
+  border-color: var(--kui-color-brand-border-quiet);
+  color: var(--kui-color-brand-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="success"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-success-fill-quiet);
+  border-color: var(--kui-color-success-border-quiet);
+  color: var(--kui-color-success-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="warning"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-warning-fill-quiet);
+  border-color: var(--kui-color-warning-border-quiet);
+  color: var(--kui-color-warning-on-quiet);
+}
+
+.kui-toolbar-control-group[data-single="true"][data-appearance="contained"][data-tile-tone="danger"]:has(
+    > svg[aria-hidden="true"]
+  ):not(
+    :has(> :not(svg[aria-hidden="true"], [data-toolbar-visibility-state])),
+    :has(> svg ~ svg)
+  ) {
+  background: var(--kui-color-danger-fill-quiet);
+  border-color: var(--kui-color-danger-border-quiet);
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-toolbar-control-group[data-toolbar-width-hidden="true"],
+.kui-toolbar-control-group__busy-status[data-toolbar-width-hidden="true"],
+.kui-toolbar-control-group:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+),
+.kui-toolbar-control-group__busy-status:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-control-group > [data-toolbar-visibility-state],
+.kui-toolbar-control-group__busy-status > [data-toolbar-visibility-state] {
+  display: none;
+}

package/dist/styles/toolbar-text.css

@@ -105,6 +105,14 @@ button.kui-toolbar-text:focus-visible {
   font-size: var(--kui-font-2xs);
 }
 
+.kui-toolbar-text[data-tone="dark"] {
+  color: var(--kui-color-neutral-on-loud);
+}
+
+button.kui-toolbar-text[data-tone="dark"]:hover {
+  background: color-mix(in srgb, var(--kui-color-surface) 28%, transparent);
+}
+
 /* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
 .kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
   text-overflow: clip;
@@ -151,3 +159,12 @@ button.kui-toolbar-text:focus-visible {
   line-clamp: none;
   max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
 }
+.kui-toolbar-text[data-toolbar-width-hidden="true"],
+.kui-toolbar-text:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-text > [data-toolbar-visibility-state] {
+  display: none;
+}

package/dist/styles/toolbar.css

@@ -390,3 +390,35 @@
     display: none;
   }
 }
+.kui-toolbar > [data-toolbar-visibility-probe] {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+  contain: layout paint;
+}
+
+.kui-toolbar > [data-toolbar-visibility-probe] > div {
+  position: absolute;
+  top: 0;
+  height: 0;
+  min-width: 0;
+  max-width: none;
+  padding: 0;
+  border: 0;
+  margin: 0;
+}
+
+/* A typed sentinel distinguishes invalid/unresolved input from a valid zero. */
+@property --kui-toolbar-visibility-length {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: -1px;
+}
+.kui-toolbar > [data-toolbar-visibility-probe] > div {
+  left: var(--kui-toolbar-visibility-length);
+  width: var(--kui-toolbar-visibility-length);
+}

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

@@ -0,0 +1,4 @@
+/** Importing this module registers wa-dialog and repairs wrapped native names. */
+declare const surfaceScaffoldElementsRegistered = true;
+
+export { surfaceScaffoldElementsRegistered };

package/dist/surface-scaffold-register.js

@@ -0,0 +1,59 @@
+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-dialog-label.ts
+var installed = /* @__PURE__ */ new WeakSet();
+var observed = /* @__PURE__ */ new WeakSet();
+var ownedNames = /* @__PURE__ */ new WeakMap();
+function installDialogLabel(prototype) {
+  if (installed.has(prototype)) return;
+  installed.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"]
+      });
+    }
+    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);
+  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/register/surface-scaffold-register.ts
+installDialogLabel(WaDialog.prototype);
+var surfaceScaffoldElementsRegistered = true;
+
+export { surfaceScaffoldElementsRegistered };
+
+//# sourceMappingURL=surface-scaffold-register.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/internal/install-dialog-label.ts","../src/components/surfaces/surface-scaffold/register/surface-scaffold-register.ts"],"names":["attribute","value"],"mappings":"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","file":"surface-scaffold-register.js","sourcesContent":["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'],\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  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","import WaDialog from '@awesome.me/webawesome/dist/components/dialog/dialog.js';\n\nimport { installDialogLabel } from '../internal/install-dialog-label.js';\n\ninstallDialogLabel(WaDialog.prototype);\n\n/** Importing this module registers wa-dialog and repairs wrapped native names. */\nexport const surfaceScaffoldElementsRegistered = true;\n"]}

package/dist/surface-scaffold.d.ts

@@ -1,21 +1,29 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
 
 type DialogSurfaceSize = 'small' | 'medium' | 'large';
 type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';
 type SurfaceInset = 'none' | 'compact' | 'comfortable';
+type DialogSurfaceMaxHeight = CssLength | 'viewport';
 interface DialogSurfaceProps {
     children: KerfUiContent;
     size?: DialogSurfaceSize;
     presentation?: DialogSurfacePresentation;
+    /** Modal preferred width. Takes precedence over size, within the viewport cap. */
+    preferredWidth?: CssLength;
     bodyInset?: SurfaceInset;
     footerInset?: SurfaceInset;
+    /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */
+    viewportGutter?: CssLength;
+    /** Modal height cap, bounded by the dynamic viewport minus both gutters. */
+    maxHeight?: DialogSurfaceMaxHeight;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
 /** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */
-declare function DialogSurface({ children, size, presentation, bodyInset, footerInset, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+declare function DialogSurface({ children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
 type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';
 interface PopupSurfaceProps {
     children: KerfUiContent;
@@ -27,4 +35,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 DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceSize, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };
+export { DialogSurface, type DialogSurfaceMaxHeight, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceSize, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset };

package/dist/surface-scaffold.js

@@ -1,3 +1,3 @@
-export { DialogSurface, PopupSurface } from './chunk-XIZRXI7N.js';
+export { DialogSurface, PopupSurface } from './chunk-A7DYEERU.js';
 
 //# sourceMappingURL=surface-scaffold.js.map

package/dist/tab-scaffold.d.ts

@@ -11,6 +11,8 @@ interface TabScaffoldTabBase<Id extends string> {
     content: KerfUiContent;
     /** Background of this scene's scrolling work surface. */
     appearance?: PaneAppearance;
+    /** Add an extra 8px inline gutter to a plain scene's scrolling content. */
+    deepInset?: boolean;
 }
 /** A tab with an optional count or short-status badge. */
 interface TabScaffoldTabCountBadge {

package/dist/tab-scaffold.js

@@ -27,6 +27,7 @@ function TabScaffold({
             "data-tab-scaffold-scene": tab.id,
             "data-active": String(tab.id === active),
             "data-appearance": tab.appearance === "sunken" ? "sunken" : void 0,
+            "data-deep-inset": tab.deepInset ? "true" : void 0,
             "aria-hidden": String(tab.id !== active),
             children: tab.content
           }