@unofficialbox/box-open-elements 0.26.0 → 0.28.0

package/dist/components/output/code-block.d.ts

@@ -40,6 +40,9 @@ export declare class CodeBlock extends BaseElement {
     /** Accessible name for the copy button. */
     get copyLabel(): string;
     set copyLabel(value: string);
+    /** Accessible name for the scrollable code region. */
+    get label(): string;
+    set label(value: string);
     private copy;
     private markCopied;
     disconnectedCallback(): void;

package/dist/components/output/code-block.js

@@ -116,7 +116,7 @@ const codeStyles = `
 export class CodeBlock extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["code", "copy-label", "language"];
+        return ["code", "copy-label", "language", "label"];
     }
     preEl;
     codeEl;
@@ -147,6 +147,16 @@ export class CodeBlock extends BaseElement {
     set copyLabel(value) {
         this.setAttribute("copy-label", value);
     }
+    /** Accessible name for the scrollable code region. */
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        if (value)
+            this.setAttribute("label", value);
+        else
+            this.removeAttribute("label");
+    }
     async copy() {
         const text = this.code || this.textContent?.trim() || "";
         if (!text) {
@@ -222,7 +232,7 @@ export class CodeBlock extends BaseElement {
             this.slotEl.textContent = "";
         }
         const language = this.language;
-        this.preEl.setAttribute("aria-label", language ? `${language} code` : "Source code");
+        this.preEl.setAttribute("aria-label", this.label || (language ? `${language} code` : "Source code"));
         if (language) {
             this.codeEl.setAttribute("data-language", language);
             this.codeEl.setAttribute("class", `language-${language}`);

package/dist/components/overlays/command-palette.js

@@ -170,6 +170,10 @@ const elementStyles = `
           white-space: nowrap;
         }
 
+        [part="option"][aria-selected="true"] [part="shortcut"] {
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
         [part="empty"] {
           padding: 1.4rem 0.9rem;
           text-align: center;

package/dist/components/overlays/dialog.d.ts

@@ -20,6 +20,12 @@ export declare class Dialog extends BaseElement {
     set description(value: string);
     get confirmLabel(): string;
     set confirmLabel(value: string);
+    get confirmDisabled(): boolean;
+    set confirmDisabled(value: boolean);
+    get confirmBusy(): boolean;
+    set confirmBusy(value: boolean);
+    get confirmBusyLabel(): string;
+    set confirmBusyLabel(value: string);
     /** Modal size — box-ui-elements Modal sizes. Default `medium`. */
     get size(): "small" | "medium" | "large" | "fullscreen";
     set size(value: "small" | "medium" | "large" | "fullscreen");

package/dist/components/overlays/dialog.js

@@ -144,7 +144,7 @@ const dialogStyles = `
 export class Dialog extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["confirm-label", "description", "heading", "open", "size"];
+        return ["confirm-busy", "confirm-busy-label", "confirm-disabled", "confirm-label", "description", "heading", "open", "size"];
     }
     openValue = false;
     wasOpen = false;
@@ -191,6 +191,17 @@ export class Dialog extends BaseElement {
     set confirmLabel(value) {
         this.setAttribute("confirm-label", value);
     }
+    get confirmDisabled() { return this.hasAttribute("confirm-disabled"); }
+    set confirmDisabled(value) { this.toggleAttribute("confirm-disabled", Boolean(value)); }
+    get confirmBusy() { return this.hasAttribute("confirm-busy"); }
+    set confirmBusy(value) { this.toggleAttribute("confirm-busy", Boolean(value)); }
+    get confirmBusyLabel() { return this.getAttribute("confirm-busy-label") ?? ""; }
+    set confirmBusyLabel(value) {
+        if (value)
+            this.setAttribute("confirm-busy-label", value);
+        else
+            this.removeAttribute("confirm-busy-label");
+    }
     /** Modal size — box-ui-elements Modal sizes. Default `medium`. */
     get size() {
         const size = this.getAttribute("size");
@@ -252,6 +263,8 @@ export class Dialog extends BaseElement {
                 return;
             }
             if (target.closest('[part="confirm"]')) {
+                if (this.confirmDisabled || this.confirmBusy)
+                    return;
                 this.dispatchEvent(new CustomEvent("confirm", { bubbles: true, composed: true }));
                 this.close();
             }
@@ -348,7 +361,10 @@ export class Dialog extends BaseElement {
             this.descriptionEl.hidden = !description;
         }
         if (this.confirmEl) {
-            this.confirmEl.textContent = this.confirmLabel;
+            this.confirmEl.textContent = this.confirmBusy && this.confirmBusyLabel
+                ? this.confirmBusyLabel : this.confirmLabel;
+            this.confirmEl.disabled = this.confirmDisabled || this.confirmBusy;
+            this.confirmEl.setAttribute("aria-busy", String(this.confirmBusy));
         }
         if (justOpened) {
             queueMicrotask(() => {

package/dist/components/overlays/drawer.d.ts

@@ -26,6 +26,9 @@ export declare class Drawer extends BaseElement {
     /** Busy: a saving/loading veil over the body; Close stays reachable. */
     get busy(): boolean;
     set busy(value: boolean);
+    /** Hide only the built-in header control; Escape and backdrop still request dismissal. */
+    get hideCloseButton(): boolean;
+    set hideCloseButton(value: boolean);
     get heading(): string;
     set heading(value: string);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;

package/dist/components/overlays/drawer.js

@@ -149,6 +149,8 @@ const drawerStyles = `
     box-shadow: none;
   }
 
+  [part="close"][hidden] { display: none; }
+
   ${boeNeutralInteractiveStyles('[part="close"]')}
 
   [part="body"] {
@@ -201,7 +203,7 @@ const DRAWER_SIZES = new Set(["small", "medium", "large", "full"]);
 export class Drawer extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["busy", "description", "heading", "open", "position", "size"];
+        return ["busy", "description", "heading", "hide-close-button", "open", "position", "size"];
     }
     openValue = false;
     wasOpen = false;
@@ -255,6 +257,9 @@ export class Drawer extends BaseElement {
     set busy(value) {
         this.toggleAttribute("busy", Boolean(value));
     }
+    /** Hide only the built-in header control; Escape and backdrop still request dismissal. */
+    get hideCloseButton() { return this.hasAttribute("hide-close-button"); }
+    set hideCloseButton(value) { this.toggleAttribute("hide-close-button", Boolean(value)); }
     get heading() {
         return this.getAttribute("heading") ?? "Drawer";
     }
@@ -381,7 +386,7 @@ export class Drawer extends BaseElement {
             this.hostEl.innerHTML = `
         <style>${drawerStyles}</style>
         <dialog part="backdrop" aria-labelledby="drawer-title">
-          <div part="drawer">
+          <div part="drawer" tabindex="-1">
             <header part="header">
               <div part="meta">
                 <h2 id="drawer-title"></h2>
@@ -421,6 +426,9 @@ export class Drawer extends BaseElement {
         this.drawerEl = this.hostEl.querySelector('[part="drawer"]');
         this.titleEl = this.hostEl.querySelector("#drawer-title");
         this.descriptionEl = this.hostEl.querySelector('[part="description"]');
+        const closeButton = this.hostEl.querySelector('[part="close"]');
+        if (closeButton)
+            closeButton.hidden = this.hideCloseButton;
         const isLeft = this.position === "left";
         const isBottom = this.position === "bottom";
         if (this.backdropEl) {
@@ -456,7 +464,7 @@ export class Drawer extends BaseElement {
         }
         if (justOpened) {
             queueMicrotask(() => {
-                this.hostEl.querySelector('[part="close"]')?.focus();
+                (this.hideCloseButton ? this.drawerEl : closeButton)?.focus();
             });
         }
     }

package/dist/core/index.d.ts

@@ -2,7 +2,7 @@ export { Controller } from "./controller.js";
 export { TypedEventEmitter } from "./event-emitter.js";
 export type { EventMap, Unsubscribe } from "./event-emitter.js";
 export { BaseElement } from "./element.js";
-export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
+export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FORM_LABEL_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
 export type { FormValue } from "./form-associated.js";
 export { resolveRowWindow, sameRowWindow } from "./virtualize.js";
 export type { RowWindow, WindowMetrics } from "./virtualize.js";

package/dist/core/index.js

@@ -1,6 +1,6 @@
 export { Controller } from "./controller.js";
 export { TypedEventEmitter } from "./event-emitter.js";
 export { BaseElement } from "./element.js";
-export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
+export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FORM_LABEL_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
 export { resolveRowWindow, sameRowWindow } from "./virtualize.js";
 export { buildOffsetIndex, offsetOfItem, resolveOffsetWindow } from "./offset-window.js";

package/dist/entries/mode-indicator.d.ts

@@ -0,0 +1 @@
+export * from "../components/feedback/mode-indicator.js";

package/dist/entries/mode-indicator.js

@@ -0,0 +1 @@
+export * from "../components/feedback/mode-indicator.js";

package/dist/entries/resource-row.d.ts

@@ -0,0 +1 @@
+export * from "../components/collections/resource-row.js";

package/dist/entries/resource-row.js

@@ -0,0 +1 @@
+export * from "../components/collections/resource-row.js";

package/dist/entries/verdict-banner.d.ts

@@ -0,0 +1 @@
+export * from "../components/feedback/verdict-banner.js";

package/dist/entries/verdict-banner.js

@@ -0,0 +1 @@
+export * from "../components/feedback/verdict-banner.js";

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export * from "./components/actions/toolbar.js";
 export * from "./components/collections/card.js";
 export * from "./components/collections/carousel.js";
 export * from "./components/collections/datalist-item.js";
+export * from "./components/collections/resource-row.js";
 export * from "./components/collections/draggable-list.js";
 export * from "./components/collections/grid-view.js";
 export * from "./components/collections/pagination.js";
@@ -41,6 +42,7 @@ export * from "./components/feedback/empty-state.js";
 export * from "./components/feedback/error-mask.js";
 export * from "./components/feedback/help-text.js";
 export * from "./components/feedback/indicator.js";
+export * from "./components/feedback/mode-indicator.js";
 export * from "./components/feedback/nudge.js";
 export * from "./components/feedback/progress-bar.js";
 export * from "./components/feedback/progress-ring.js";
@@ -49,6 +51,7 @@ export * from "./components/feedback/skeleton.js";
 export * from "./components/feedback/spinner.js";
 export * from "./components/feedback/path.js";
 export * from "./components/feedback/toast.js";
+export * from "./components/feedback/verdict-banner.js";
 export * from "./components/files/drop-zone.js";
 export * from "./components/identity/avatar.js";
 export * from "./components/identity/contact-datalist-item.js";

package/dist/index.js

@@ -27,6 +27,7 @@ export * from "./components/actions/toolbar.js";
 export * from "./components/collections/card.js";
 export * from "./components/collections/carousel.js";
 export * from "./components/collections/datalist-item.js";
+export * from "./components/collections/resource-row.js";
 export * from "./components/collections/draggable-list.js";
 export * from "./components/collections/grid-view.js";
 export * from "./components/collections/pagination.js";
@@ -45,6 +46,7 @@ export * from "./components/feedback/empty-state.js";
 export * from "./components/feedback/error-mask.js";
 export * from "./components/feedback/help-text.js";
 export * from "./components/feedback/indicator.js";
+export * from "./components/feedback/mode-indicator.js";
 export * from "./components/feedback/nudge.js";
 export * from "./components/feedback/progress-bar.js";
 export * from "./components/feedback/progress-ring.js";
@@ -53,6 +55,7 @@ export * from "./components/feedback/skeleton.js";
 export * from "./components/feedback/spinner.js";
 export * from "./components/feedback/path.js";
 export * from "./components/feedback/toast.js";
+export * from "./components/feedback/verdict-banner.js";
 // Components: files
 export * from "./components/files/drop-zone.js";
 // Components: identity

package/dist/patterns/call-console/call-console.js

@@ -86,7 +86,7 @@ export class CallConsole extends BaseElement {
     <section part="console" aria-label="API call console">
     <header><div part="heading"><h2></h2><small>Inspect requests, responses, and tool outcomes</small></div><span id="connection" role="status"></span><box-button id="retry" label="Reconnect" tone="neutral" hidden></box-button></header>
     <div class="filters"><label class="search">Search <input id="search" type="search" placeholder="Method, URL, or summary"></label><label>Service <select id="service" aria-label="Service"><option value="">All services</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><box-button id="clear" label="Clear calls" tone="neutral"></box-button></div>
-    <box-split-view resizable ratio="0.42" label="Calls and request inspector"><section slot="primary" aria-label="Calls"><div class="pane-heading"><h3>Requests</h3><span id="count" class="muted" role="status"></span></div><div id="list"></div><p id="list-empty" role="status" hidden></p></section><section aria-label="Request inspector"><div class="pane-heading"><h3>Inspector</h3><box-button data-copy="both" label="Copy both" tone="neutral"></box-button><span id="copy-status" role="status"></span></div><p id="detail-empty">Select a request to inspect its details.</p><div id="inspector" hidden><h3 id="summary"></h3><p id="metadata" class="muted"></p><p id="outcome" role="status" hidden></p><h3 class="code-heading">Request</h3><box-code-block id="request" copy-label="Copy request" wrap></box-code-block><h3 class="code-heading">Response</h3><box-code-block id="response" copy-label="Copy response" wrap></box-code-block></div></section></box-split-view></section>`;
+    <box-split-view resizable ratio="0.42" label="Calls and request inspector"><section slot="primary" aria-label="Calls"><div class="pane-heading"><h3>Requests</h3><span id="count" class="muted" role="status"></span></div><div id="list"></div><p id="list-empty" role="status" hidden></p></section><section aria-label="Request inspector"><div class="pane-heading"><h3>Inspector</h3><box-button data-copy="both" label="Copy both" tone="neutral"></box-button><span id="copy-status" role="status"></span></div><p id="detail-empty">Select a request to inspect its details.</p><div id="inspector" hidden><h3 id="summary"></h3><p id="metadata" class="muted"></p><p id="outcome" role="status" hidden></p><h3 class="code-heading">Request</h3><box-code-block id="request" label="Request" copy-label="Copy request" wrap></box-code-block><h3 class="code-heading">Response</h3><box-code-block id="response" label="Response" copy-label="Copy response" wrap></box-code-block></div></section></box-split-view></section>`;
     }
     setupListeners() {
         this.shadowRoot.querySelector("#list").addEventListener("keydown", event => {

package/dist/patterns/flow-builder/flow-builder.d.ts

@@ -9,6 +9,10 @@ export interface ValidationOptions {
      */
     showMessage?: boolean;
 }
+export interface FlowNodeFigure {
+    text: string;
+    tone?: "neutral" | "warning" | "error";
+}
 /**
  * Host-owned document editing with accessible navigation and responsive inspection.
  * `N` is the host's node type; it defaults to {@link FlowNode}, which the default
@@ -17,6 +21,7 @@ export interface ValidationOptions {
 export declare class FlowBuilder<N extends FlowNodeBase = FlowNode> extends BaseElement {
     static readonly tagName = "box-flow-builder";
     private nodesValue;
+    private figuresValue;
     private modelValue;
     private catalogValue;
     private selectedValue;
@@ -32,6 +37,9 @@ export declare class FlowBuilder<N extends FlowNodeBase = FlowNode> extends Base
     get narrow(): boolean;
     /** Focus a rendered card without changing selection or opening the editor. */
     focusNode(node: N): void;
+    /** Update one live card figure without rebuilding the flow or moving focus. */
+    setNodeFigure(target: N | string | NodePath, figure: FlowNodeFigure | null): void;
+    private findNodeById;
     private insertion?;
     private invoker?;
     private spine;

package/dist/patterns/flow-builder/flow-builder.js

@@ -12,6 +12,7 @@ import { FLOW_SPINE_PARTS, InsertPoint, KIND_PICKER_PARTS } from "./primitives.j
 export class FlowBuilder extends BaseElement {
     static tagName = "box-flow-builder";
     nodesValue = [];
+    figuresValue = new Map();
     modelValue = defaultFlowModel;
     catalogValue = [];
     selectedValue = null;
@@ -27,6 +28,38 @@ export class FlowBuilder extends BaseElement {
     get narrow() { return this.narrowValue; }
     /** Focus a rendered card without changing selection or opening the editor. */
     focusNode(node) { this.spine?.focusNode(node); }
+    /** Update one live card figure without rebuilding the flow or moving focus. */
+    setNodeFigure(target, figure) {
+        const node = typeof target === "string" ? this.findNodeById(target)
+            : Array.isArray(target) ? nodeAtPath({ body: this.nodes }, target)
+                : target;
+        if (!node)
+            return;
+        if (figure)
+            this.figuresValue.set(node, figure);
+        else
+            this.figuresValue.delete(node);
+        this.spine?.setNodeFigure(node, figure);
+    }
+    findNodeById(id) {
+        const seen = new Set();
+        const visit = (nodes) => {
+            for (const node of nodes) {
+                if (seen.has(node))
+                    continue;
+                seen.add(node);
+                if (node.id === id)
+                    return node;
+                for (const child of this.model.children(node)) {
+                    const found = visit(child.list);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        return visit(this.nodes);
+    }
     insertion;
     invoker;
     spine;
@@ -106,6 +139,7 @@ export class FlowBuilder extends BaseElement {
       [hidden]{display:none!important} [part=inspector-heading]{font:inherit;font-weight:650;margin:0 0 12px}
       </style><div part="error" hidden></div><div part="layout"><box-flow-spine exportparts="${FLOW_SPINE_PARTS.join(", ")}"></box-flow-spine><div part="inspector" role="region" aria-label="Add a step"><box-kind-picker exportparts="${KIND_PICKER_PARTS.join(", ")}"></box-kind-picker><div part="editor"></div></div></div><div part="picker-popup" hidden><box-kind-picker exportparts="${KIND_PICKER_PARTS.join(", ")}"></box-kind-picker></div><box-drawer position="bottom" size="large"></box-drawer>`;
         this.spine = this.shadowRoot.querySelector("box-flow-spine");
+        this.spine.figures = this.figuresValue;
         this.aside = this.shadowRoot.querySelector("[part=inspector]");
         this.palette = this.aside.querySelector("box-kind-picker");
         this.inspector = this.aside.querySelector("[part=editor]");

package/dist/patterns/flow-builder/primitives.d.ts

@@ -1,9 +1,9 @@
 import { BaseElement } from "../../core/index.js";
 import { type FlowInsertDetail, type FlowKind, type FlowModel, type FlowNodeBase } from "./model.js";
 /** Parts a card exposes; the spine and builder forward them unchanged. */
-export declare const FLOW_CARD_PARTS: readonly ["card", "icon", "title", "kind", "description", "status", "error"];
+export declare const FLOW_CARD_PARTS: readonly ["card", "icon", "title", "kind", "description", "status", "figure", "error"];
 /** Parts the spine exposes (its own plus forwarded card and insert-point parts). */
-export declare const FLOW_SPINE_PARTS: readonly ["spine", "endpoint", "body", "branches", "branch", "branch-header", "branch-label", "branch-remove", "branch-add", "insert", "card", "icon", "title", "kind", "description", "status", "error"];
+export declare const FLOW_SPINE_PARTS: readonly ["spine", "endpoint", "body", "branches", "branch", "branch-header", "branch-label", "branch-remove", "branch-add", "insert", "card", "icon", "title", "kind", "description", "status", "figure", "error"];
 /** Parts a kind picker exposes. */
 export declare const KIND_PICKER_PARTS: readonly ["choices", "group-heading", "choice", "choice-icon", "choice-label", "choice-description"];
 export declare class FlowCard extends BaseElement {
@@ -13,6 +13,10 @@ export declare class FlowCard extends BaseElement {
     model: FlowModel<FlowNodeBase>;
     selected: boolean;
     invalid: boolean;
+    figure: {
+        text: string;
+        tone?: "neutral" | "warning" | "error";
+    } | null;
     protected renderTemplate(): void;
     protected setupListeners(): void;
     refresh(): void;
@@ -49,10 +53,18 @@ export declare class FlowSpine extends BaseElement {
     endLabel: string;
     headingLevel: number;
     private cards;
+    figures: Map<FlowNodeBase, {
+        text: string;
+        tone?: "neutral" | "warning" | "error";
+    }>;
     protected renderTemplate(): void;
     refresh(): void;
     /** Re-render one card after its fields change, without rebuilding the spine. */
     refreshNode(node: FlowNodeBase): void;
+    setNodeFigure(node: FlowNodeBase, figure: {
+        text: string;
+        tone?: "neutral" | "warning" | "error";
+    } | null): void;
     focusNode(node: FlowNodeBase): void;
     select(node: FlowNodeBase | null, invalid?: FlowNodeBase | null): void;
     protected update(): void;

package/dist/patterns/flow-builder/primitives.js

@@ -9,7 +9,7 @@ const styles = `
 `;
 function emit(host, name, detail) { host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true })); }
 /** Parts a card exposes; the spine and builder forward them unchanged. */
-export const FLOW_CARD_PARTS = ["card", "icon", "title", "kind", "description", "status", "error"];
+export const FLOW_CARD_PARTS = ["card", "icon", "title", "kind", "description", "status", "figure", "error"];
 /** Parts the spine exposes (its own plus forwarded card and insert-point parts). */
 export const FLOW_SPINE_PARTS = ["spine", "endpoint", "body", "branches", "branch", "branch-header", "branch-label", "branch-remove", "branch-add", "insert", ...FLOW_CARD_PARTS];
 /** Parts a kind picker exposes. */
@@ -21,15 +21,19 @@ export class FlowCard extends BaseElement {
     model = defaultFlowModel;
     selected = false;
     invalid = false;
+    figure = null;
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>${styles}
       button { width:100%; text-align:start; display:grid; gap:6px; padding:16px; border:1px solid var(--boe-token-stroke-stroke,#ddd); border-radius:var(--boe-profile-radius-med,8px); background:var(--boe-token-surface-surface,#fff); overflow-wrap:anywhere; }
       button[aria-pressed=true] { border-color:var(--boe-token-surface-surface-brand,#0061d5); background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 5%,var(--boe-token-surface-surface,#fff)); }
       button[data-invalid=true] { border-color:var(--boe-token-text-status-text-error,#b92340); }
-      button.has-icon{grid-template-columns:20px minmax(0,1fr);column-gap:12px} button.has-icon [part=icon]{grid-column:1;grid-row:1/span 4} button.has-icon [part=title],button.has-icon [part=kind],button.has-icon [part=description],button.has-icon [part=status],button.has-icon [part=error]{grid-column:2}
+      button.has-icon{grid-template-columns:20px minmax(0,1fr);column-gap:12px} button.has-icon [part=icon]{grid-column:1;grid-row:1/span 5} button.has-icon [part=title],button.has-icon [part=kind],button.has-icon [part=description],button.has-icon [part=status],button.has-icon [part=figure],button.has-icon [part=error]{grid-column:2}
       [part=icon]{color:var(--boe-token-surface-surface-brand,#0061d5);width:20px;height:20px} [part=icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=icon] svg{display:block;width:20px;height:20px} [part=title] { font-weight:650; } [part=kind],[part=description] { color:var(--boe-token-text-text-secondary,#666); } [part=error] { color:var(--boe-token-text-status-text-error,#b92340); }
+      [part=figure]{font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--boe-token-text-text-secondary,#666);min-width:0;overflow-wrap:anywhere}
+      [part=figure][data-tone=warning]{color:var(--boe-token-text-status-text-warning,#805600)}
+      [part=figure][data-tone=error]{color:var(--boe-token-text-status-text-error,#b92340)}
       [hidden] { display:none!important; }
-      </style><button type="button" part="card"><span part="icon" aria-hidden="true"></span><span part="title"></span><span part="kind"></span><span part="description"></span><span part="status"></span><span part="error">Needs attention</span></button>`;
+      </style><button type="button" part="card"><span part="icon" aria-hidden="true"></span><span part="title"></span><span part="kind"></span><span part="description"></span><span part="status"></span><span part="figure" hidden></span><span part="error">Needs attention</span></button>`;
     }
     setupListeners() { this.shadowRoot.querySelector("button").addEventListener("click", () => emit(this, "node-select", { node: this.node })); }
     refresh() { if (this.isRendered)
@@ -41,7 +45,7 @@ export class FlowCard extends BaseElement {
         const button = this.shadowRoot.querySelector("button");
         button.setAttribute("aria-pressed", String(this.selected));
         button.classList.toggle("has-icon", Boolean(kind?.icon));
-        button.setAttribute("aria-label", cardLabel(this.node, this.catalog, this.invalid, this.model));
+        button.setAttribute("aria-label", [cardLabel(this.node, this.catalog, this.invalid, this.model), this.figure?.text].filter(Boolean).join(". "));
         button.dataset.invalid = String(this.invalid);
         const iconEl = this.shadowRoot.querySelector("[part=icon]");
         iconEl.replaceChildren(kind?.icon?.() ?? "");
@@ -53,6 +57,10 @@ export class FlowCard extends BaseElement {
             element.hidden = !text;
         }
         this.shadowRoot.querySelector("[part=error]").hidden = !this.invalid;
+        const figureEl = this.shadowRoot.querySelector("[part=figure]");
+        figureEl.textContent = this.figure?.text ?? "";
+        figureEl.hidden = !this.figure?.text;
+        figureEl.dataset.tone = this.figure?.tone ?? "neutral";
     }
 }
 export class InsertPoint extends BaseElement {
@@ -157,11 +165,23 @@ export class FlowSpine extends BaseElement {
     endLabel = "Flow ends";
     headingLevel = 3;
     cards = new Map();
+    figures = new Map();
     renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=spine]{display:grid;gap:0;min-width:0} [part=branches]{display:flex;gap:16px;overflow-x:auto;max-width:100%;padding:8px} [part=branch]{flex:1 0 240px;min-width:0} [part=body]{margin:0 0 0 16px;border-inline-start:2px solid var(--boe-token-stroke-stroke,#ddd);padding:8px 12px} [part=endpoint]{text-align:center;font-weight:600;padding:12px} [part=branch-header]{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1em 0} [part=branch-label]{font:inherit;font-weight:600;margin:0} [part=branch-remove],[part=branch-add]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:16px;background:var(--boe-token-surface-surface,#fff);padding:4px 10px} [part=branch-add]{justify-self:center;margin:4px 0}</style><div part="spine"></div>`; }
     refresh() { if (this.isRendered)
         this.update(); }
     /** Re-render one card after its fields change, without rebuilding the spine. */
     refreshNode(node) { this.cards.get(node)?.refresh(); }
+    setNodeFigure(node, figure) {
+        if (figure)
+            this.figures.set(node, figure);
+        else
+            this.figures.delete(node);
+        const card = this.cards.get(node);
+        if (card) {
+            card.figure = figure;
+            card.refresh();
+        }
+    }
     focusNode(node) { this.cards.get(node)?.focus(); }
     select(node, invalid = this.invalid) { this.selected = node; this.invalid = invalid; for (const [item, card] of this.cards) {
         card.selected = item === node;
@@ -193,6 +213,7 @@ export class FlowSpine extends BaseElement {
                 card.model = this.model;
                 card.selected = node === this.selected;
                 card.invalid = node === this.invalid;
+                card.figure = this.figures.get(node) ?? null;
                 card.refresh();
                 fragment.append(card);
                 const nextAncestors = new Set([...ancestors, node]);
@@ -254,8 +275,10 @@ export class FlowSpine extends BaseElement {
         end.textContent = this.endLabel;
         root.replaceChildren(start, listView(this.nodes, "in the flow", new Set()), end);
         for (const node of this.cards.keys())
-            if (!seen.has(node))
+            if (!seen.has(node)) {
                 this.cards.delete(node);
+                this.figures.delete(node);
+            }
     }
 }
 FlowCard.register();

package/dist/patterns/form-wizard/form-wizard.js

@@ -77,7 +77,7 @@ const elementStyles = `
           font-size: 0.9rem;
           background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, var(--boe-token-surface-surface, #ffffff));
           border: 1px solid color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 34%, transparent);
-          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 72%, black 28%);
+          color: var(--boe-token-text-status-text-error, #b92340);
         }
 
         [part="error"][hidden] {
@@ -338,6 +338,11 @@ export class FormWizard extends BaseElement {
             }));
             if (this.isRendered) {
                 this.update();
+                if (eventName === "stepChanged") {
+                    queueMicrotask(() => {
+                        this.panelsEl.querySelector('[part="panel"]:not([hidden])')?.focus();
+                    });
+                }
             }
         }));
     }
@@ -357,7 +362,7 @@ export class FormWizard extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${elementStyles}</style>
       <section part="wizard" aria-label="Form wizard">
-        <h2 part="title" hidden></h2>
+        <h2 id="wizard-title" part="title" hidden></h2>
         <div part="layout">
           <box-progress-steps part="rail"></box-progress-steps>
           <div part="body">
@@ -376,6 +381,7 @@ export class FormWizard extends BaseElement {
     `;
         this.titleEl = this.shadowRoot.querySelector('[part="title"]');
         this.railEl = this.shadowRoot.querySelector('[part="rail"]');
+        this.railEl.compact = true;
         this.panelsEl = this.shadowRoot.querySelector('[part="panels"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error"]');
         this.backEl = this.shadowRoot.querySelector('[part="back"]');
@@ -418,7 +424,7 @@ export class FormWizard extends BaseElement {
     rebuildPanels(steps) {
         this.panelsEl.innerHTML = steps
             .map(step => `
-          <div part="panel" data-step-id="${escapeHtml(step.id)}" role="group" aria-label="${escapeHtml(step.label)}" hidden>
+          <div part="panel" data-step-id="${escapeHtml(step.id)}" role="group" aria-label="${escapeHtml(step.label)}" tabindex="-1" hidden>
             <slot name="${escapeHtml(step.id)}"></slot>
           </div>
         `)
@@ -432,6 +438,15 @@ export class FormWizard extends BaseElement {
         const steps = state?.steps ?? [];
         this.titleEl.hidden = !this.heading;
         this.titleEl.textContent = this.heading;
+        const wizard = this.shadowRoot?.querySelector('[part="wizard"]');
+        if (this.heading) {
+            wizard?.setAttribute("aria-labelledby", "wizard-title");
+            wizard?.removeAttribute("aria-label");
+        }
+        else {
+            wizard?.removeAttribute("aria-labelledby");
+            wizard?.setAttribute("aria-label", "Form wizard");
+        }
         const signature = JSON.stringify(steps.map(step => step.id));
         if (signature !== this.panelsSignature) {
             this.panelsSignature = signature;

package/dist/patterns/form-wizard/wizard-summary.js

@@ -11,6 +11,7 @@ const escapeHtml = (value) => value
 const elementStyles = `
         :host {
           display: block;
+          container-type: inline-size;
         }
 
         /* The host's own display would otherwise beat the UA rule for [hidden],
@@ -87,7 +88,7 @@ const elementStyles = `
           margin: 0;
           padding: 0 1rem 0.8rem;
           display: grid;
-          grid-template-columns: minmax(8rem, 14rem) 1fr;
+          grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
           gap: 0.3rem 1rem;
         }
 
@@ -99,9 +100,17 @@ const elementStyles = `
 
         [part="row-value"] {
           margin: 0;
+          min-inline-size: 0;
+          max-inline-size: 100%;
+          overflow-x: auto;
           font-size: 0.85rem;
           color: var(--boe-token-text-text, #1f1e1b);
-          overflow-wrap: anywhere;
+          overflow-wrap: normal;
+          word-break: normal;
+        }
+
+        @container (max-width: 32rem) {
+          [part="rows"] { grid-template-columns: minmax(0, 1fr); }
         }
 
         [part="row-value"][data-empty="true"] {