@unofficialbox/box-open-elements 0.27.0 → 0.28.0

package/dist/components/forms/number-input.js

@@ -85,6 +85,7 @@ export class NumberInput extends FormAssociatedElement {
     labelEl;
     errorEl;
     descriptionEl;
+    clampStatusEl;
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -183,6 +184,14 @@ export class NumberInput extends FormAssociatedElement {
     }
     syncValue(nextValue) {
         const normalizedValue = this.clamp(nextValue);
+        if (normalizedValue !== nextValue) {
+            this.inputEl.value = String(normalizedValue);
+            const boundary = nextValue > normalizedValue ? "most" : "least";
+            this.clampStatusEl.textContent = `Changed to ${normalizedValue}, the ${boundary} allowed`;
+        }
+        else {
+            this.clampStatusEl.textContent = "";
+        }
         this.valueInternal = normalizedValue;
         this.setAttribute("value", String(normalizedValue));
         this.syncFormAssociation();
@@ -202,6 +211,7 @@ export class NumberInput extends FormAssociatedElement {
         <span part="label"></span>
         ${formDescriptionMarkup()}
         <input type="number" part="input" />
+        <span part="clamp-status" role="status" style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"></span>
         ${formErrorMessageMarkup()}
       </label>
     `;
@@ -209,6 +219,7 @@ export class NumberInput extends FormAssociatedElement {
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
         this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
+        this.clampStatusEl = this.shadowRoot.querySelector('[part="clamp-status"]');
     }
     setupListeners() {
         this.inputEl.addEventListener("input", event => {

package/dist/components/forms/text-area.d.ts

@@ -5,6 +5,7 @@ export declare class TextArea extends FormAssociatedElement {
     static get observedAttributes(): string[];
     private valueInternal;
     private textareaEl;
+    focus(options?: FocusOptions): void;
     private labelEl;
     private errorEl;
     get value(): string;

package/dist/components/forms/text-area.js

@@ -77,6 +77,8 @@ export class TextArea extends FormAssociatedElement {
     }
     valueInternal = "";
     textareaEl;
+    focus(options) { if (!this.disabled)
+        this.textareaEl?.focus(options); }
     labelEl;
     errorEl;
     get value() {

package/dist/components/forms/text-field.d.ts

@@ -36,6 +36,9 @@ export declare class TextField extends FormAssociatedElement {
      */
     get reveal(): boolean;
     set reveal(value: boolean);
+    /** Noun used in the Show/Hide control's accessible name. Defaults to the field label. */
+    get revealLabel(): string;
+    set revealLabel(value: string);
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading(): boolean;
     set loading(value: boolean);

package/dist/components/forms/text-field.js

@@ -125,6 +125,8 @@ const textFieldStyles = `
     appearance: none;
     border: 0;
     padding: 0.15rem 0.4rem;
+    min-inline-size: 24px;
+    min-block-size: 24px;
     border-radius: 4px;
     background: transparent;
     font: inherit;
@@ -169,6 +171,7 @@ export class TextField extends FormAssociatedElement {
             "label",
             "placeholder",
             "reveal",
+            "reveal-label",
             "type",
             "loading",
             "valid",
@@ -223,6 +226,16 @@ export class TextField extends FormAssociatedElement {
     set reveal(value) {
         this.toggleAttribute("reveal", Boolean(value));
     }
+    /** Noun used in the Show/Hide control's accessible name. Defaults to the field label. */
+    get revealLabel() {
+        return this.getAttribute("reveal-label") ?? "";
+    }
+    set revealLabel(value) {
+        if (value)
+            this.setAttribute("reveal-label", value);
+        else
+            this.removeAttribute("reveal-label");
+    }
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading() {
         return this.hasAttribute("loading");
@@ -357,7 +370,8 @@ export class TextField extends FormAssociatedElement {
             // The visible word and the accessible name agree; aria-pressed makes
             // the toggle state machine explicit to AT.
             this.revealEl.textContent = this.revealed ? "Hide" : "Show";
-            this.revealEl.setAttribute("aria-label", this.revealed ? "Hide password" : "Show password");
+            const noun = this.revealLabel || (this.hasAttribute("label") ? this.label : "password");
+            this.revealEl.setAttribute("aria-label", `${this.revealed ? "Hide" : "Show"} ${noun}`);
             this.revealEl.setAttribute("aria-pressed", String(this.revealed));
         }
         else {

package/dist/components/forms/tile-group.d.ts

@@ -3,8 +3,14 @@ import { BaseElement } from "../../core/index.js";
 export interface TileOption {
     description?: string;
     disabled?: boolean;
+    disabledReason?: string;
     id: string;
     label: string;
+    meta?: string;
+    status?: {
+        label: string;
+        tone?: "neutral" | "success" | "warning" | "error";
+    };
 }
 /** Attribute payloads are author input — validate every record. */
 export declare const isTileOptionRecord: (value: unknown) => value is TileOption;

package/dist/components/forms/tile-group.js

@@ -14,7 +14,14 @@ export const isTileOptionRecord = (value) => {
         return false;
     }
     const item = value;
-    return typeof item.id === "string" && typeof item.label === "string";
+    return typeof item.id === "string" && typeof item.label === "string"
+        && (item.description === undefined || typeof item.description === "string")
+        && (item.meta === undefined || typeof item.meta === "string")
+        && (item.disabledReason === undefined || typeof item.disabledReason === "string")
+        && (item.status === undefined || (typeof item.status === "object" && item.status !== null
+            && typeof item.status.label === "string"
+            && [undefined, "neutral", "success", "warning", "error"]
+                .includes(item.status.tone)));
 };
 const tileStyles = `
   :host {
@@ -109,6 +116,17 @@ const tileStyles = `
   [part="tile-description"]:empty {
     display: none;
   }
+
+  [part="tile-meta"], [part="tile-status"], [part="tile-disabled-reason"] {
+    font-size: 0.76rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow-wrap: normal;
+  }
+  [part="tile-status"] { font-weight: 700; }
+  [part="tile-status"][data-tone="success"] { color: var(--boe-token-text-status-text-success, #176b45); }
+  [part="tile-status"][data-tone="warning"] { color: var(--boe-token-text-status-text-warning, #805500); }
+  [part="tile-status"][data-tone="error"] { color: var(--boe-token-text-status-text-error, #ad1b36); }
+  .boe-sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
 `;
 /**
  * Choose one option, or several, as cards rather than radios.
@@ -199,8 +217,11 @@ export class TileGroup extends BaseElement {
     rebuild() {
         const type = this.multiple ? "checkbox" : "radio";
         this.groupEl.innerHTML = this.options
-            .map(option => {
+            .map((option, index) => {
             const id = escapeHtml(option.id);
+            const detailsId = `tile-details-${index}`;
+            const details = [option.description, option.meta, option.status?.label, option.disabledReason]
+                .filter(Boolean).join(". ");
             return `
           <label part="tile" data-option-id="${id}" data-selected="false" data-disabled="${option.disabled ? "true" : "false"}">
             <input
@@ -208,10 +229,16 @@ export class TileGroup extends BaseElement {
               type="${type}"
               name="${escapeHtml(this.name)}"
               value="${id}"
+              aria-label="${escapeHtml(option.label)}"
+              ${details ? `aria-describedby="${detailsId}"` : ""}
               ${option.disabled ? "disabled" : ""}
             />
             <span part="tile-label">${escapeHtml(option.label)}</span>
             <span part="tile-description">${escapeHtml(option.description ?? "")}</span>
+            ${option.meta ? `<span part="tile-meta">${escapeHtml(option.meta)}</span>` : ""}
+            ${option.status ? `<span part="tile-status" data-tone="${escapeHtml(option.status.tone ?? "neutral")}">${escapeHtml(option.status.label)}</span>` : ""}
+            ${option.disabledReason ? `<span part="tile-disabled-reason">${escapeHtml(option.disabledReason)}</span>` : ""}
+            ${details ? `<span id="${detailsId}" class="boe-sr-only">${escapeHtml(details)}</span>` : ""}
           </label>
         `;
         })

package/dist/components/layout/app-shell.js

@@ -189,9 +189,9 @@ export class AppShell extends BaseElement {
           </div>
         </header>
         <div part="frame">
-          <nav part="nav" aria-label="Primary">
+          <div part="nav" role="navigation" aria-label="Primary">
             <slot name="nav"></slot>
-          </nav>
+          </div>
           <main part="main">
             <slot></slot>
           </main>
@@ -240,6 +240,17 @@ export class AppShell extends BaseElement {
             return;
         }
         this.navEl.hidden = !this.hasNamedSlotContent("nav", this.navSlot);
+        // A slotted NavSidebar supplies its own labelled nav landmark. Keep this
+        // wrapper for layout, but never nest a second navigation landmark around it.
+        const childOwnsNavigation = Array.from(this.children).some(el => el.getAttribute("slot") === "nav" && el.localName === "box-nav-sidebar");
+        if (childOwnsNavigation) {
+            this.navEl.removeAttribute("role");
+            this.navEl.removeAttribute("aria-label");
+        }
+        else {
+            this.navEl.setAttribute("role", "navigation");
+            this.navEl.setAttribute("aria-label", this.navLabel);
+        }
         this.asideEl.hidden = !this.hasNamedSlotContent("aside", this.asideSlot);
         this.footerEl.hidden = !this.hasNamedSlotContent("footer", this.footerSlot);
     }
@@ -250,7 +261,6 @@ export class AppShell extends BaseElement {
         const heading = this.heading;
         this.shellEl.setAttribute("aria-label", heading);
         this.titleEl.textContent = heading;
-        this.navEl.setAttribute("aria-label", this.navLabel);
         this.asideEl.setAttribute("aria-label", this.asideLabel);
         this.syncLandmarkVisibility();
     }

package/dist/components/layout/nav-sidebar.js

@@ -37,8 +37,8 @@ const navSidebarStyles = `
     transition: inline-size ${boeMotionDuration.medium} ${boeMotionEasing.standard};
   }
 
-  /* Collapsed: shrink to an icon strip. The header and footer usually hold
-     branding and labels, so they hide; the body (icon nav) stays. */
+  /* Collapsed: shrink to an icon strip. Keep the header when it owns the
+     companion toggle; otherwise branding-only headers can disappear. */
   [part="sidebar"][data-collapsed="true"] {
     inline-size: 3.75rem;
     padding-inline: 0.55rem;
@@ -55,6 +55,14 @@ const navSidebarStyles = `
     display: none;
   }
 
+  [part="sidebar"][data-collapsed="true"][data-header-toggle="true"] [part="header"] {
+    display: block;
+  }
+
+  [part="sidebar"][data-collapsed="true"] [part="header"] ::slotted(:not(box-sidebar-toggle-button)) {
+    display: none;
+  }
+
   [part="body"] {
     display: flex;
     flex-direction: column;
@@ -192,6 +200,9 @@ export class NavSidebar extends BaseElement {
             ?.addEventListener("slotchange", () => {
             this.update();
         });
+        this.shadowRoot
+            ?.querySelector('slot[name="header"]')
+            ?.addEventListener("slotchange", () => this.update());
     }
     /**
      * Collapsing hides `[data-nav-label]`, which is a row's only accessible
@@ -232,6 +243,7 @@ export class NavSidebar extends BaseElement {
             return;
         }
         this.sidebarEl.dataset.collapsed = this.collapsed ? "true" : "false";
+        this.sidebarEl.dataset.headerToggle = Array.from(this.children).some(el => el.getAttribute("slot") === "header" && el.localName === "box-sidebar-toggle-button") ? "true" : "false";
         this.sidebarEl.setAttribute("aria-label", this.label);
         this.syncCollapsedRowNames();
     }

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/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/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;