@unofficialbox/box-open-elements 0.27.0 → 0.28.1

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;
@@ -440,11 +455,19 @@ export class FormWizard extends BaseElement {
         this.suppressRailEvent = true;
         try {
             this.railEl.label = this.heading ? `${this.heading} steps` : "Wizard steps";
-            this.railEl.items = steps.map(step => ({
-                label: step.label,
-                value: step.id,
-                ...(step.description ? { description: step.description } : {}),
-            }));
+            const furthestVisitedIndex = Math.max(-1, ...steps.map((step, index) => state?.visitedStepIds.includes(step.id) ? index : -1));
+            this.railEl.items = steps.map((step, index) => {
+                const visited = state?.visitedStepIds.includes(step.id) ?? false;
+                const status = visited && step.id !== state?.currentStepId
+                    ? (index < furthestVisitedIndex || step.optional || state?.submitted ? "complete" : "visited")
+                    : undefined;
+                return {
+                    label: step.label,
+                    value: step.id,
+                    ...(step.description ? { description: step.description } : {}),
+                    ...(status ? { status } : {}),
+                };
+            });
             if (state && this.railEl.value !== state.currentStepId) {
                 this.railEl.value = state.currentStepId;
             }

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"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",