@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.111

package/README.md

@@ -908,6 +908,7 @@ The detailed rationale lives in the theme contract.
 - [Apple HIG translation](./docs/apple-hig.md)
 - [Writing interface copy](./docs/writing.md)
 - [Accessibility and keyboard contracts](./docs/accessibility.md)
+- [Button current-step semantics](./docs/button.md)
 - [Component and integration contract](./docs/component-contract.md)
 - [Spacing and application layout](./docs/layout.md)
 - [Web Awesome theme contract](./docs/webawesome-theme.md)

package/ai/component-catalog.json

@@ -2151,6 +2151,7 @@
         "A modal task needs a dialog: render a DialogSurface with a label (or labelledBy plus a heading), its body as children, and its buttons as footer, then open it with openDialog() and close it with closeDialog(), the close button, or any element with data-dialog-close. A raw Web Awesome dropdown that needs a list-compatible menu inset uses PopupSurface.",
         "A dialog body should compose rows, sections, or aligned bare prose through List and ListInsetText.",
         "A modal needs a typed preferred width, viewport gutter, or dynamic viewport-bounded height cap while retaining native body scrolling and footer actions.",
+        "A dialog needs a less prominent built-in close control: closeEmphasis=\"quiet\" softens the glyph while keeping the native button target and close behavior.",
         "A dialog that must leave the page interactive and close on Escape or an outside press uses PopoverDialogSurface; one that fills its body with a SplitView or Pane uses height and bodyLayout=\"fill\".",
         "A chat-style dialog floats its composer over the transcript with footerPresentation=\"floating\" and keeps a heading or notice above one scrolling transcript with bodyLayout=\"fill-last\".",
         "A phone-first task (compose, quick edit, a picker) should rise from the bottom edge as a sheet the person can resize: presentation=\"bottom-sheet\" with height, and resizable with minHeight / maxHeight bounds.",
@@ -2190,12 +2191,14 @@
         "core kerfjs/overlay confirm/prompt/form/choice as a bottom sheet styled by @kerfjs/ui/overlay-sheet.css",
         "resizable core kerfjs/overlay bottom sheet: the kui-overlay-sheet-resizable class plus wireOverlaySheets adds the resizable DialogSurface sheet grabber",
         "header with label text or heading content, headerActions, a close button, and an optional footer; withoutHeader for content that owns its heading and close control",
+        "normal (default) or quiet closeEmphasis on the built-in close button",
         "accessible description by describedBy: the heading ToolbarText descriptionId or app-owned body summary copy",
         "light dismiss (a backdrop press closes; otherwise the panel pulses)"
       ],
       "accessibility": [
         "DialogSurface is a native <dialog> opened modally (showModal): it is in the top layer, the rest of the page is inert, focus stays inside, and it returns to the opener on close. Focus starts on an autofocus element, otherwise on the panel.",
         "Name it with label (also its title text) or labelledBy (the id of a heading, such as a ToolbarText). The close button is named Close (closeLabel) and Escape asks to close; the cancelable kui-request-close event reports source close-button, escape, or backdrop.",
+        "closeEmphasis=\"quiet\" uses a smaller, quiet-colored close glyph inside the same 40px target; hover, focus ring, forced colors, accessible naming, and close requests remain available.",
         "Name a PopoverDialogSurface with label or labelledBy. Describe either surface with describedBy (rendered as aria-describedby on the dialog root), usually the heading ToolbarText descriptionId or app-owned summary copy in the body; rootAttributes accepts only data-* attributes, so it never sets aria-describedby.",
         "A floating header's title uses the normal text color, which keeps WCAG AA over the 80% raised chrome material on any content; the material turns opaque under prefers-reduced-transparency, prefers-contrast: more, forced colors, or without backdrop-filter.",
         "A resizable bottom sheet's grabber is a focusable horizontal separator (\"Resize sheet\") with aria-valuemin, aria-valuenow, and aria-valuemax in visible px; the arrow keys, Page Up/Down, Home, and End resize it, and its slide motion is skipped under prefers-reduced-motion.",
@@ -7580,6 +7583,7 @@
         "A dialog footer, a form, or content needs an action button: tone=\"brand\" for the main action, tone=\"success\" for a positive action such as a pricing check, tone=\"danger\" for a destructive one, and emphasis=\"secondary\" or \"plain\" for the quieter actions beside it.",
         "A form submits or resets: type=\"submit\" or \"reset\" (the default type never submits), with name, value, and form when needed.",
         "An action navigates: href renders a link with the same chrome.",
+        "A setup or progress sequence uses a Button as its current step: currentStep marks that button or link with aria-current=\"step\" without changing its styling.",
         "A single primary action spans its form, sheet, or narrow column: fill makes it span the parent's available inline width, label centered, as SplitButton's fill does."
       ],
       "avoidWhen": [
@@ -7600,6 +7604,7 @@
       ],
       "appOwns": [
         "the label and its delegated action",
+        "which step is current when currentStep marks a sequence",
         "what a press does while loading",
         "form ownership"
       ],
@@ -7612,6 +7617,7 @@
         "leading icon",
         "icon-only square (icon and ariaLabel, no label)",
         "pressed toggle (aria-pressed) on any tone and emphasis",
+        "currentStep marker (aria-current=\"step\") on a button or link",
         "loading",
         "disabled",
         "link (href)",
@@ -7621,7 +7627,8 @@
       "accessibility": [
         "A native <button> (type=\"button\" unless set) or, with href, an <a>; its label names it, or ariaLabel when the label is not enough. Focus shows the standard focus ring 1px outside the box; with focusRingInset it is drawn inside the box, two-tone with a surface-colored line inside the ring color, so it keeps 3:1 contrast on a loud fill of its own hue.",
         "Loading shows a spinner in place of the label, which still names the button, and sets aria-busy=\"true\". A disabled link drops its href and reports aria-disabled=\"true\". Disabled success uses a quiet success fill and readable on-fill text instead of fading the label.",
-        "With pressed, it is a toggle: aria-pressed reports the state, and the pressed look adds a doubled outline (secondary and plain) or a darkened fill with an inset ring (primary), so the state never relies on hue alone; forced-colors mode paints it Highlight. An icon-only Button is named by ariaLabel, and help tags show that name on hover and keyboard focus. A title gives native hover text that says more than the name and replaces the help tag."
+        "With pressed, it is a toggle: aria-pressed reports the state, and the pressed look adds a doubled outline (secondary and plain) or a darkened fill with an inset ring (primary), so the state never relies on hue alone; forced-colors mode paints it Highlight. An icon-only Button is named by ariaLabel, and help tags show that name on hover and keyboard focus. A title gives native hover text that says more than the name and replaces the help tag.",
+        "With currentStep, a native button or link reports aria-current=\"step\" even when disabled; the app owns the step label and which step is current."
       ],
       "geometry": {
         "margin": "none",
@@ -7671,7 +7678,7 @@
       "rootElement": "button",
       "links": {
         "catalogRoute": "?component=button",
-        "documentation": "docs/component-selection.md",
+        "documentation": "docs/button.md",
         "recipe": "docs/component-selection.md#problem-to-component-matrix"
       }
     },

package/ai/component-composition.json

@@ -2059,6 +2059,7 @@
         "obligations": [
           "DialogSurface is a native <dialog> opened modally (showModal): it is in the top layer, the rest of the page is inert, focus stays inside, and it returns to the opener on close. Focus starts on an autofocus element, otherwise on the panel.",
           "Name it with label (also its title text) or labelledBy (the id of a heading, such as a ToolbarText). The close button is named Close (closeLabel) and Escape asks to close; the cancelable kui-request-close event reports source close-button, escape, or backdrop.",
+          "closeEmphasis=\"quiet\" uses a smaller, quiet-colored close glyph inside the same 40px target; hover, focus ring, forced colors, accessible naming, and close requests remain available.",
           "Name a PopoverDialogSurface with label or labelledBy. Describe either surface with describedBy (rendered as aria-describedby on the dialog root), usually the heading ToolbarText descriptionId or app-owned summary copy in the body; rootAttributes accepts only data-* attributes, so it never sets aria-describedby.",
           "A floating header's title uses the normal text color, which keeps WCAG AA over the 80% raised chrome material on any content; the material turns opaque under prefers-reduced-transparency, prefers-contrast: more, forced colors, or without backdrop-filter.",
           "A resizable bottom sheet's grabber is a focusable horizontal separator (\"Resize sheet\") with aria-valuemin, aria-valuenow, and aria-valuemax in visible px; the arrow keys, Page Up/Down, Home, and End resize it, and its slide motion is skipped under prefers-reduced-motion.",
@@ -6073,6 +6074,11 @@
           "owner": "application",
           "required": false
         },
+        {
+          "id": "which step is current when currentStep marks a sequence",
+          "owner": "application",
+          "required": false
+        },
         {
           "id": "what a press does while loading",
           "owner": "application",
@@ -6095,7 +6101,8 @@
         "obligations": [
           "A native <button> (type=\"button\" unless set) or, with href, an <a>; its label names it, or ariaLabel when the label is not enough. Focus shows the standard focus ring 1px outside the box; with focusRingInset it is drawn inside the box, two-tone with a surface-colored line inside the ring color, so it keeps 3:1 contrast on a loud fill of its own hue.",
           "Loading shows a spinner in place of the label, which still names the button, and sets aria-busy=\"true\". A disabled link drops its href and reports aria-disabled=\"true\". Disabled success uses a quiet success fill and readable on-fill text instead of fading the label.",
-          "With pressed, it is a toggle: aria-pressed reports the state, and the pressed look adds a doubled outline (secondary and plain) or a darkened fill with an inset ring (primary), so the state never relies on hue alone; forced-colors mode paints it Highlight. An icon-only Button is named by ariaLabel, and help tags show that name on hover and keyboard focus. A title gives native hover text that says more than the name and replaces the help tag."
+          "With pressed, it is a toggle: aria-pressed reports the state, and the pressed look adds a doubled outline (secondary and plain) or a darkened fill with an inset ring (primary), so the state never relies on hue alone; forced-colors mode paints it Highlight. An icon-only Button is named by ariaLabel, and help tags show that name on hover and keyboard focus. A title gives native hover text that says more than the name and replaces the help tag.",
+          "With currentStep, a native button or link reports aria-current=\"step\" even when disabled; the app owns the step label and which step is current."
         ]
       },
       "cssValueProps": [],

package/ai/components/button.md

@@ -13,6 +13,7 @@ Trigger an action from a dialog footer, a form, or content outside any Toolbar,
 - A dialog footer, a form, or content needs an action button: tone="brand" for the main action, tone="success" for a positive action such as a pricing check, tone="danger" for a destructive one, and emphasis="secondary" or "plain" for the quieter actions beside it.
 - A form submits or resets: type="submit" or "reset" (the default type never submits), with name, value, and form when needed.
 - An action navigates: href renders a link with the same chrome.
+- A setup or progress sequence uses a Button as its current step: currentStep marks that button or link with aria-current="step" without changing its styling.
 - A single primary action spans its form, sheet, or narrow column: fill makes it span the parent's available inline width, label centered, as SplitButton's fill does.
 
 **Not when:**
@@ -46,6 +47,7 @@ Exact prop names and types: [`@kerfjs/ui/button`](../public-api-signatures-v1.md
 - leading icon
 - icon-only square (icon and ariaLabel, no label)
 - pressed toggle (aria-pressed) on any tone and emphasis
+- currentStep marker (aria-current="step") on a button or link
 - loading
 - disabled
 - link (href)
@@ -61,7 +63,7 @@ Exact prop names and types: [`@kerfjs/ui/button`](../public-api-signatures-v1.md
 
 ## State and wiring
 
-**The app owns:** the label and its delegated action; what a press does while loading; form ownership.
+**The app owns:** the label and its delegated action; which step is current when currentStep marks a sequence; what a press does while loading; form ownership.
 
 No wiring helper.
 
@@ -74,6 +76,7 @@ Margin: none · border: self · padding: self (layout role: controls). `self` me
 - A native \<button> (type="button" unless set) or, with href, an \<a>; its label names it, or ariaLabel when the label is not enough. Focus shows the standard focus ring 1px outside the box; with focusRingInset it is drawn inside the box, two-tone with a surface-colored line inside the ring color, so it keeps 3:1 contrast on a loud fill of its own hue.
 - Loading shows a spinner in place of the label, which still names the button, and sets aria-busy="true". A disabled link drops its href and reports aria-disabled="true". Disabled success uses a quiet success fill and readable on-fill text instead of fading the label.
 - With pressed, it is a toggle: aria-pressed reports the state, and the pressed look adds a doubled outline (secondary and plain) or a darkened fill with an inset ring (primary), so the state never relies on hue alone; forced-colors mode paints it Highlight. An icon-only Button is named by ariaLabel, and help tags show that name on hover and keyboard focus. A title gives native hover text that says more than the name and replaces the help tag.
+- With currentStep, a native button or link reports aria-current="step" even when disabled; the app owns the step label and which step is current.
 
 ## Styling boundary
 
@@ -90,5 +93,5 @@ Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-
 ## Related
 
 - Components: [LoadingSpinner](./loading-spinner.md), [Button](./wa-button.md), [ToolbarControlGroup](./toolbar-control-group.md).
-- Docs: [`docs/component-selection.md`](../../docs/component-selection.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
+- Docs: [`docs/button.md`](../../docs/button.md), [`docs/component-selection.md#problem-to-component-matrix`](../../docs/component-selection.md#problem-to-component-matrix).
 - UX catalog route: `?component=button`.

package/ai/components/surface-scaffold.md

@@ -13,6 +13,7 @@ Configure recurring dialog and popup geometry without consumer ::part() override
 - A modal task needs a dialog: render a DialogSurface with a label (or labelledBy plus a heading), its body as children, and its buttons as footer, then open it with openDialog() and close it with closeDialog(), the close button, or any element with data-dialog-close. A raw Web Awesome dropdown that needs a list-compatible menu inset uses PopupSurface.
 - A dialog body should compose rows, sections, or aligned bare prose through List and ListInsetText.
 - A modal needs a typed preferred width, viewport gutter, or dynamic viewport-bounded height cap while retaining native body scrolling and footer actions.
+- A dialog needs a less prominent built-in close control: closeEmphasis="quiet" softens the glyph while keeping the native button target and close behavior.
 - A dialog that must leave the page interactive and close on Escape or an outside press uses PopoverDialogSurface; one that fills its body with a SplitView or Pane uses height and bodyLayout="fill".
 - A chat-style dialog floats its composer over the transcript with footerPresentation="floating" and keeps a heading or notice above one scrolling transcript with bodyLayout="fill-last".
 - A phone-first task (compose, quick edit, a picker) should rise from the bottom edge as a sheet the person can resize: presentation="bottom-sheet" with height, and resizable with minHeight / maxHeight bounds.
@@ -57,6 +58,7 @@ Exact prop names and types: [`@kerfjs/ui/surface-scaffold`](../public-api-signat
 - core kerfjs/overlay confirm/prompt/form/choice as a bottom sheet styled by @kerfjs/ui/overlay-sheet.css
 - resizable core kerfjs/overlay bottom sheet: the kui-overlay-sheet-resizable class plus wireOverlaySheets adds the resizable DialogSurface sheet grabber
 - header with label text or heading content, headerActions, a close button, and an optional footer; withoutHeader for content that owns its heading and close control
+- normal (default) or quiet closeEmphasis on the built-in close button
 - accessible description by describedBy: the heading ToolbarText descriptionId or app-owned body summary copy
 - light dismiss (a backdrop press closes; otherwise the panel pulses)
 
@@ -89,6 +91,7 @@ Margin: parent · border: child · padding: self (layout role: structure). `self
 
 - DialogSurface is a native \<dialog> opened modally (showModal): it is in the top layer, the rest of the page is inert, focus stays inside, and it returns to the opener on close. Focus starts on an autofocus element, otherwise on the panel.
 - Name it with label (also its title text) or labelledBy (the id of a heading, such as a ToolbarText). The close button is named Close (closeLabel) and Escape asks to close; the cancelable kui-request-close event reports source close-button, escape, or backdrop.
+- closeEmphasis="quiet" uses a smaller, quiet-colored close glyph inside the same 40px target; hover, focus ring, forced colors, accessible naming, and close requests remain available.
 - Name a PopoverDialogSurface with label or labelledBy. Describe either surface with describedBy (rendered as aria-describedby on the dialog root), usually the heading ToolbarText descriptionId or app-owned summary copy in the body; rootAttributes accepts only data-\* attributes, so it never sets aria-describedby.
 - A floating header's title uses the normal text color, which keeps WCAG AA over the 80% raised chrome material on any content; the material turns opaque under prefers-reduced-transparency, prefers-contrast: more, forced colors, or without backdrop-filter.
 - A resizable bottom sheet's grabber is a focusable horizontal separator ("Resize sheet") with aria-valuemin, aria-valuenow, and aria-valuemax in visible px; the arrow keys, Page Up/Down, Home, and End resize it, and its slide motion is skipped under prefers-reduced-motion.

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.110` and `kerfjs@5.0.0-beta.110`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.111` and `kerfjs@5.0.0-beta.111`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -167,6 +167,7 @@ import { S as Sides } from './sides-BPSWde0A.js';
 import { PaneSeparatorSide } from './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 
 type ToolbarPosition = 'header' | 'footer';
 /** Control-band density: `default` (60px with 44px groups) or `compact`. */
@@ -1195,7 +1196,11 @@ export { ListInsetText, type ListInsetTextProps, Sides };
 ```ts
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssColor } from './css-values.js';
 import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
+import { BackdropImagePosition, BackdropImageParallax, BackdropImageBlur, BackdropImageScrim } from './backdrop-image.js';
+import './extension-attributes-mu8MFUl0.js';
 
 /**
  * Base surface treatment, semantic status colors, or `brand-loud`: the solid
@@ -1214,12 +1219,41 @@ type ContentItemFrame = 'none' | 'framed';
 type ContentItemShape = 'rounded' | 'pill';
 /** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */
 type ContentItemSelectionMode = 'none' | 'single' | 'multiple' | 'toggle';
+/** One card-owned lead image in the containing feed's shared scrollport. */
+interface ContentItemMedia {
+    src: string;
+    alt: string;
+    srcset?: string;
+    sizes?: string;
+    /** Width divided by height; reserves the image block before it loads. Default 16/9. */
+    aspectRatio?: number;
+    position?: BackdropImagePosition;
+    /** Default subtle (35% lag); set none for a static lead image. */
+    parallax?: BackdropImageParallax;
+    /** App-supplied soft copy; its opacity changes, never its blur filter. */
+    blurredSrc?: string;
+    /** Shared BackdropImage blur behavior; use instead of `blurredSrc`. */
+    blur?: BackdropImageBlur;
+    /** Color the image dissolves into and the card body continues on. */
+    fadeTo?: CssColor;
+    /** Content layered over the image, including native controls. */
+    overlay?: KerfUiContent;
+    /** Dim the image behind overlay content. */
+    scrim?: BackdropImageScrim;
+    /** Extend the image to the card's top, left, and right inner edges. */
+    edgeToEdge?: boolean;
+}
 type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-appearance'?: never;
     'data-outlined'?: never;
     'data-bubble'?: never;
     'data-grid-row'?: never;
+    'data-media-state'?: never;
+    'data-media-edge'?: never;
+    'data-media-fade'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
 }>;
 type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
@@ -1227,6 +1261,11 @@ type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, st
     'data-outlined'?: never;
     'data-bubble'?: never;
     'data-grid-row'?: never;
+    'data-media-state'?: never;
+    'data-media-edge'?: never;
+    'data-media-fade'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
     'data-interactive'?: never;
@@ -1242,6 +1281,10 @@ interface ContentItemBaseProps {
      * semantic values match StateBanner. Defaults to `transparent`.
      */
     appearance?: ContentItemAppearance;
+    /** Reserved lead image with a per-image scroll timeline. Wire the containing root with `wireContentItems`. */
+    media?: ContentItemMedia;
+    /** App-sampled image color, scoped to this card once its image loads. */
+    tint?: SurfaceTint;
     /** Item content; a plain string is allowed for bare copy. */
     children?: KerfUiContent | string;
     /**
@@ -1318,9 +1361,9 @@ type ContentItemProps = ContentItemBaseProps & ({
  * border (transparent unless `framed`), 8px padding, and a rounded or pill
  * radius. It owns that whole geometry, so wrappers must not add more.
  */
-declare function ContentItem({ appearance, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, gridRow, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+declare function ContentItem({ appearance, media, tint, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, gridRow, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
 
-export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };
+export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemMedia, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };
 ```
 
 ## `@kerfjs/ui/value-table`
@@ -1722,12 +1765,13 @@ export { wireListFocusScroll };
 ## `@kerfjs/ui/nav-stack`
 
 ```ts
-export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-CU_0dKtI.js';
+export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-CrZF95VO.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -1767,11 +1811,12 @@ export { type WireNavStackOptions, wireNavStack };
 ```ts
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { N as NavStackProps, a as NavStackView } from './nav-stack-CU_0dKtI.js';
+import { N as NavStackProps, a as NavStackView } from './nav-stack-CrZF95VO.js';
 import { ResizableRegionProps } from './resizable-region.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -1876,6 +1921,8 @@ import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
 import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
+export { a as SurfaceTintScheme } from './surface-tint-DQgYCaP9.js';
 
 /**
  * What clear (fully transparent) chrome fades in as content scrolls beneath
@@ -1886,28 +1933,6 @@ import { CssColor } from './css-values.js';
  */
 type ScrollEdge = 'none' | 'material' | 'surface';
 
-/** The color scheme an app declares for a {@link SurfaceTint}'s color. */
-type SurfaceTintScheme = 'light' | 'dark';
-/**
- * A scoped tint for a layout surface: the app's color (usually sampled from
- * artwork it already knows) and the scheme that color belongs to. Kerf does no
- * color detection; `scheme` says whether the color reads as a light or a dark
- * surface. Inside the scope the surface, raised surface, text, quiet text, and
- * everything built on them (quiet fills, separators' backdrop, the chrome
- * material) re-derive from the color, with lightness clamped so text keeps
- * WCAG AA over any color.
- */
-interface SurfaceTint {
-    color: CssColor;
-    scheme: SurfaceTintScheme;
-    /**
-     * An optional accent (usually the artwork's most vivid color). The scope's
-     * brand ramp re-derives from it: loud fills and their text, brand text and
-     * links, text on brand fills, and the focus ring, each clamped to keep AA.
-     */
-    accent?: CssColor;
-}
-
 /**
  * Logical pane sides: where a {@link Pane} can show a separator and where it can
  * compensate for a device safe-area inset.
@@ -2129,7 +2154,7 @@ type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separator
  */
 declare function Pane({ header, children, footer, chromePlacement, chromeDividers, compactChrome, compactChromeOpen, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, SurfaceTint };
 ```
 
 ## `@kerfjs/ui/workbench`
@@ -2137,13 +2162,14 @@ export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlac
 ```ts
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { b as NavPane, N as NavStackProps } from './nav-stack-CU_0dKtI.js';
+import { b as NavPane, N as NavStackProps } from './nav-stack-CrZF95VO.js';
 import { ListConfig } from './list.js';
 import { PaneConfig } from './pane.js';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { a as PanelToolbar, c as PanelBottomToolbar, b as PanelChromePlacement, d as PanelToggle } from './panel-toolbar-vg6Ir5Dy.js';
 import { ToolbarConfig } from './toolbar.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './toolbar-text.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -2557,6 +2583,7 @@ import './sides-BPSWde0A.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
 import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 
 /** Which edge a {@link CollapsiblePanel} docks to. */
 type CollapsiblePanelSide = PanelSide;
@@ -2762,8 +2789,9 @@ export { type SidebarStorage, type WireSidebarOptions, type WireSidebarPanel, wi
 ```ts
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { PaneAppearance, SurfaceTint, ScrollEdge } from './pane.js';
+import { PaneAppearance, ScrollEdge } from './pane.js';
 import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
 import './scroll-clearance-BikHljTc.js';
 
 interface TabNavigatorTabBase<Id extends string> {
@@ -3092,8 +3120,9 @@ import './sides-BPSWde0A.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './workbench.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -3247,8 +3276,9 @@ import './sides-BPSWde0A.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './workbench.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -3302,8 +3332,9 @@ import './sides-BPSWde0A.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './workbench.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -4545,6 +4576,8 @@ type BackdropImageRootAttributes = StructuralRootAttributes & Readonly<{
     'data-fade'?: never;
     'data-repeat'?: never;
     'data-under-chrome'?: never;
+    'data-aspect-ratio'?: never;
+    'data-inline-bleed'?: never;
 }>;
 interface BackdropImageCommonProps {
     /** Image URL. */
@@ -4558,6 +4591,12 @@ interface BackdropImageCommonProps {
     position?: BackdropImagePosition;
     /** Height of the image block. Default 320px (`remify(320)`). */
     height?: CssLength;
+    /** Reserve image height from its width, useful for an inline card. Cannot be combined with `height`. */
+    aspectRatio?: number;
+    /** Native image loading behavior. Omit for the browser default. */
+    loading?: 'eager' | 'lazy';
+    /** Bleed to a Pane's inline content edges. Set false when embedded in a card. Defaults to true. */
+    bleedInline?: boolean;
     /** How far the image lags the scroll. Default `none`. */
     parallax?: BackdropImageParallax;
     /**
@@ -4712,6 +4751,8 @@ type DialogSurfaceFooterPresentation = 'docked' | 'floating';
  * material, so content scrolls visibly beneath the title bar.
  */
 type DialogSurfaceHeaderPresentation = 'docked' | 'floating';
+/** The built-in close control's visual weight; `normal` keeps the default. */
+type DialogSurfaceCloseEmphasis = 'normal' | 'quiet';
 /**
  * Application `data-*` identity on the DialogSurface root, such as
  * `data-key`; the surface's own configuration attributes stay protected.
@@ -4767,6 +4808,8 @@ interface DialogSurfaceOptions {
     lightDismiss?: boolean;
     /** The close button's accessible name (default `Close`). */
     closeLabel?: string;
+    /** Soften the built-in close control without changing its 40px target. */
+    closeEmphasis?: DialogSurfaceCloseEmphasis;
     size?: DialogSurfaceSize;
     presentation?: DialogSurfacePresentation;
     /** Modal preferred width. Takes precedence over size, within the viewport cap. */
@@ -4860,7 +4903,7 @@ interface DialogSurfaceOptions {
  * floating header and footer measurement, the bottom sheet's keyboard
  * clearance and grabber, and re-render resilience while open.
  */
-declare function DialogSurface({ id, label, labelledBy, describedBy, alert, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, children, size, presentation, preferredWidth, bodyInset, footerInset, viewportGutter, maxHeight, height, minHeight, resizable, enterMotion, exitMotion, bodyLayout, headerPresentation, footerPresentation, footerOffset, rootAttributes, className, slot, }: DialogSurfaceProps): kerfjs.SafeHtml;
+declare function DialogSurface({ id, label, labelledBy, describedBy, alert, heading, headerActions, footer, withoutHeader, lightDismiss, closeLabel, closeEmphasis, 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. */
@@ -4927,7 +4970,7 @@ interface PopupSurfaceProps {
 /** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */
 declare function PopupSurface({ children, inset, className, slot, }: PopupSurfaceProps): kerfjs.SafeHtml;
 
-export { type DialogCloseSource, type DialogRequestCloseDetail, DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfaceName, type DialogSurfaceOptions, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset, closeDialog, openDialog };
+export { type DialogCloseSource, type DialogRequestCloseDetail, DialogSurface, type DialogSurfaceBodyLayout, type DialogSurfaceCloseEmphasis, type DialogSurfaceFooterPresentation, type DialogSurfaceHeaderPresentation, type DialogSurfaceHeight, type DialogSurfaceMaxHeight, type DialogSurfaceName, type DialogSurfaceOptions, type DialogSurfacePresentation, type DialogSurfaceProps, type DialogSurfaceRootAttributes, type DialogSurfaceSheetMotion, type DialogSurfaceSize, PopoverDialogSurface, type PopoverDialogSurfaceDataAttributes, type PopoverDialogSurfacePresentation, type PopoverDialogSurfaceProps, PopupSurface, type PopupSurfaceInset, type PopupSurfaceProps, type SurfaceInset, closeDialog, openDialog };
 ```
 
 ## `@kerfjs/ui/list-detail-dialog`
@@ -4939,9 +4982,10 @@ import { CssLength } from './css-values.js';
 import { SplitViewListWidth } from './split-view.js';
 import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
 export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -5067,9 +5111,10 @@ import { CssLength } from './css-values.js';
 import { WorkbenchMainBottomToolbar, WorkbenchPanel } from './workbench.js';
 import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
 export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
@@ -6662,6 +6707,8 @@ interface ButtonOptions {
      * flips it in its `action` handler. A link (`href`) cannot be a toggle.
      */
     pressed?: boolean;
+    /** Mark the current step in a sequence with `aria-current="step"`. */
+    currentStep?: boolean;
     /**
      * Busy: a spinner replaces the label (which still names it) and the button
      * reports `aria-busy`. Presses still reach it; the application decides
@@ -6716,12 +6763,12 @@ interface ButtonOptions {
  * in one of four tones and three emphases, at the 44px control height or
  * compact, with a label or as an icon-only square, rounded or pill-shaped,
  * sized to its label or filling its parent's width, and optionally a
- * `pressed` toggle. Inside a
+ * `pressed` toggle or `currentStep` marker. Inside a
  * `ToolbarControlGroup`, use a plain `<button>`, which the group styles; use
  * Button for a dialog footer, a form, or a standalone action beside other
  * content.
  */
-declare function Button({ children, tone, emphasis, size, shape, fill, pressed, icon, loading, disabled, type, name, value, form, href, target, action, focusRingInset, badge, badgeLabel, badgeTone, ariaLabel, title, id, className, rootAttributes, slot, }: ButtonProps): kerfjs.SafeHtml;
+declare function Button({ children, tone, emphasis, size, shape, fill, pressed, currentStep, icon, loading, disabled, type, name, value, form, href, target, action, focusRingInset, badge, badgeLabel, badgeTone, ariaLabel, title, id, className, rootAttributes, slot, }: ButtonProps): kerfjs.SafeHtml;
 
 export { Button, type ButtonContent, type ButtonEmphasis, type ButtonLabel, type ButtonOptions, type ButtonProps, type ButtonRootAttributes, type ButtonShape, type ButtonSize, type ButtonTone, type ButtonType };
 ```

package/ai/skill.md

@@ -521,6 +521,8 @@ Common mistakes:
 
 For prominent content text, use `Text size="large"`; use `size="xlarge"` for display copy. Both sizes work with semantic `variant`, `tone`, and `font`, so keep heading levels based on the document outline.
 
+For a setup or progress sequence, use `Button currentStep` on its current step. The native button or link reports `aria-current="step"`, including when disabled; the app owns the label and which step is current. See `docs/button.md`.
+
 For an exclusive choice among several visible options that must wrap (a labeled color palette), use `ChoiceChips` from `@kerfjs/ui/choice-chips`: separate pills backed by native radios, so the group is one Tab stop, arrow keys select, and the checked radio submits under `name`. Name it with `label` or `labelledBy` (a visible `FieldLabel`), lead choices with `swatch` (a `CssColor` such as `fillColor('#3b82f6')`, or `'transparent'` for the struck-through no-color dot) or `icon`, and handle the delegated `action` on `change`. Never wrap a `SegmentedControl` or button-appearance `wa-radio` set instead. When any number of the options may be on, give `value` a `readonly Value[]` and pick a model. `multiple: 'toggle'` (label filters, annotation intents) makes the pills native checkboxes in a `role="group"`: each its own Tab stop, a click or Space toggles it alone, and every checked value submits under `name` (read the checked boxes by name in the change handler). `multiple: true` is the desktop multi-select: an `aria-multiselectable` listbox where a click selects one chip, Cmd (Apple) or Ctrl (elsewhere) toggles one, and Shift extends a range; it is one Tab stop with arrow, Shift+arrow, Space, and Cmd/Ctrl+A selection, and hidden inputs submit under `name`. It requires `wireChoiceChips(root)` from `@kerfjs/ui/wire-choice-chips`, which fires `change` on the group (the group carries the `action`); read the set with `readChoiceChips(group)`. A multiple group takes no `required`. On dark inverse chrome, put the chips in a dark appearance scope (`.wa-dark` or any `color-scheme: dark` ancestor) instead of restyling them.
 
 For removable tags use `Chip`, with `removeAction` for delegated handling and a specific `removeLabel` for the native button. `itemId` identifies the tag; the app owns removal. `size="compact"` and `disabled` replace app styling of raw `wa-tag` internals. Use `Badge` for non-interactive metadata. For a downloadable file or a short link, give `Chip` an `href` (optional `download`, `true` or a file name, and `external`) instead of styling an `<a>`: it renders a native link with chip geometry, icon, truncation, focus ring, and hover feedback, and cannot also carry a remove button. Inside a `brand-loud` or `neutral` ContentItem bubble set `tone="inherit"`, which follows the bubble's foreground with a currentColor border and no fill. For a short value the user activates once (a filter token in a search help popover that inserts itself into the query), give `Chip` an `action` and `itemId`: the whole chip becomes a native `<button type="button" data-action data-item-id>` with hover, press, focus-ring, and disabled states, and an optional `actionLabel` that contains the visible label. It cannot also take `href` or `removeAction`. A compact rounded action chip keeps a compact `Badge`'s height in a compact `ValueTable` cell, so use it there instead of a `Badge` the app makes clickable.
@@ -577,4 +579,6 @@ Give sibling `DialogSurface`s that render conditionally a stable `rootAttributes
 
 Render a modal dialog as `DialogSurface` itself, a native `<dialog>` (set `alert` for a confirmation before a destructive action, which renders `role="alertdialog"`; pair it with `describedBy` on the message and leave `lightDismiss` off): `label` (or `labelledBy` with a `heading`, such as an xl `ToolbarText` with a description) names it, `describedBy` (the heading ToolbarText's `descriptionId`, or app-owned summary copy) describes it as `aria-describedby`, `children` is its body, `footer` holds its buttons, and `headerActions` sit before its close button (`withoutHeader` drops the header for content that owns its heading and close control). Open it with `openDialog(dialog)` and close it with `closeDialog(dialog)` from `@kerfjs/ui/surface-scaffold`; never toggle its `open` attribute. The close button, any `data-dialog-close` element inside (a Cancel button), Escape, and, with `lightDismiss`, a backdrop press dispatch a cancelable `kui-request-close` (`detail.source`: `close-button`, `escape`, or `backdrop`); cancel it to keep the dialog open (the panel pulses). The native `close` event fires once it closes. `openDialog` installs the listeners and, while the dialog is open, measures its floating header/footer, follows a bottom sheet's keyboard and grabber, and keeps that state across re-renders; import `@kerfjs/ui/surface-scaffold/register` only when a dialog may open some other way. Do not write `wa-dialog` inside a `DialogSurface`.
 
+Set `DialogSurface closeEmphasis="quiet"` when its built-in close control should recede. It keeps the native 40px button target, `closeLabel`, focus ring, and `kui-request-close` behavior. See `docs/surface-scaffold.md`.
+
 Toolbar visibility measurement probes and invisible state children are helper-owned and survive Kerf rerenders through `data-morph-preserve`. Actual CSS visibility stays stable while rendering removes transient parent markers, preventing geometry-driven render feedback and repeated probe recreation. Toolbar replacement, explicit internal-node removal and disposal retain their existing behavior.

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.110` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.111` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/backdrop-image.d.ts

@@ -50,6 +50,8 @@ type BackdropImageRootAttributes = StructuralRootAttributes & Readonly<{
     'data-fade'?: never;
     'data-repeat'?: never;
     'data-under-chrome'?: never;
+    'data-aspect-ratio'?: never;
+    'data-inline-bleed'?: never;
 }>;
 interface BackdropImageCommonProps {
     /** Image URL. */
@@ -63,6 +65,12 @@ interface BackdropImageCommonProps {
     position?: BackdropImagePosition;
     /** Height of the image block. Default 320px (`remify(320)`). */
     height?: CssLength;
+    /** Reserve image height from its width, useful for an inline card. Cannot be combined with `height`. */
+    aspectRatio?: number;
+    /** Native image loading behavior. Omit for the browser default. */
+    loading?: 'eager' | 'lazy';
+    /** Bleed to a Pane's inline content edges. Set false when embedded in a card. Defaults to true. */
+    bleedInline?: boolean;
     /** How far the image lags the scroll. Default `none`. */
     parallax?: BackdropImageParallax;
     /**

package/dist/backdrop-image.js

@@ -1,4 +1,4 @@
-export { BackdropImage } from './chunk-SCDWURBO.js';
+export { BackdropImage } from './chunk-SOBRGH7T.js';
 
 
 

package/dist/browser/content-item.js

@@ -1,3 +1,4 @@
 import '../styles/foundation.css';
+import '../styles/backdrop-image.css';
 import '../styles/content-item.css';
 export * from '../content-item.js';

package/dist/button.d.ts

@@ -57,6 +57,8 @@ interface ButtonOptions {
      * flips it in its `action` handler. A link (`href`) cannot be a toggle.
      */
     pressed?: boolean;
+    /** Mark the current step in a sequence with `aria-current="step"`. */
+    currentStep?: boolean;
     /**
      * Busy: a spinner replaces the label (which still names it) and the button
      * reports `aria-busy`. Presses still reach it; the application decides
@@ -111,11 +113,11 @@ interface ButtonOptions {
  * in one of four tones and three emphases, at the 44px control height or
  * compact, with a label or as an icon-only square, rounded or pill-shaped,
  * sized to its label or filling its parent's width, and optionally a
- * `pressed` toggle. Inside a
+ * `pressed` toggle or `currentStep` marker. Inside a
  * `ToolbarControlGroup`, use a plain `<button>`, which the group styles; use
  * Button for a dialog footer, a form, or a standalone action beside other
  * content.
  */
-declare function Button({ children, tone, emphasis, size, shape, fill, pressed, icon, loading, disabled, type, name, value, form, href, target, action, focusRingInset, badge, badgeLabel, badgeTone, ariaLabel, title, id, className, rootAttributes, slot, }: ButtonProps): kerfjs.SafeHtml;
+declare function Button({ children, tone, emphasis, size, shape, fill, pressed, currentStep, icon, loading, disabled, type, name, value, form, href, target, action, focusRingInset, badge, badgeLabel, badgeTone, ariaLabel, title, id, className, rootAttributes, slot, }: ButtonProps): kerfjs.SafeHtml;
 
 export { Button, type ButtonContent, type ButtonEmphasis, type ButtonLabel, type ButtonOptions, type ButtonProps, type ButtonRootAttributes, type ButtonShape, type ButtonSize, type ButtonTone, type ButtonType };