@unofficialbox/box-open-elements 0.27.0 → 0.28.1

package/dist/components/forms/code-editor.js

@@ -14,7 +14,7 @@ import { tags } from "@lezer/highlight";
 export class CodeEditor extends BaseElement {
     static tagName = "box-code-editor";
     static get observedAttributes() {
-        return ["language", "readonly", "label", "value", "wrap"];
+        return ["current-line-style", "fill-height", "hide-help", "hide-problems", "language", "readonly", "label", "value", "wrap"];
     }
     valueInternal = "";
     problemsInternal = [];
@@ -24,6 +24,7 @@ export class CodeEditor extends BaseElement {
     readonlyConfig = new Compartment();
     completionsConfig = new Compartment();
     wrapConfig = new Compartment();
+    wrapIndentConfig = new Compartment();
     highlightsConfig = new Compartment();
     highlightsInternal = [];
     source;
@@ -63,12 +64,48 @@ export class CodeEditor extends BaseElement {
     }
     get wrap() { return this.hasAttribute("wrap"); }
     set wrap(value) { this.toggleAttribute("wrap", value); }
+    get currentLineStyle() {
+        const value = this.getAttribute("current-line-style");
+        return value === "border" || value === "none" ? value : "fill";
+    }
+    set currentLineStyle(value) { this.setAttribute("current-line-style", value); }
+    get hideHelp() { return this.hasAttribute("hide-help"); }
+    set hideHelp(value) { this.toggleAttribute("hide-help", value); }
+    get hideProblems() { return this.hasAttribute("hide-problems"); }
+    set hideProblems(value) { this.toggleAttribute("hide-problems", value); }
+    get fillHeight() { return this.hasAttribute("fill-height"); }
+    set fillHeight(value) { this.toggleAttribute("fill-height", value); }
     get completionSource() { return this.source; }
     set completionSource(value) { this.source = value; if (this.isRendered)
         this.update(); }
     get highlights() { return this.highlightsInternal.map(range => ({ ...range })); }
     set highlights(value) { this.highlightsInternal = value.map(range => ({ ...range })); if (this.isRendered)
         this.update(); }
+    wrapIndentExtension() {
+        return EditorView.decorations.of(view => {
+            if (!this.wrap)
+                return Decoration.none;
+            const ranges = [];
+            const seen = new Set();
+            for (const visible of view.visibleRanges) {
+                const first = view.state.doc.lineAt(visible.from).number;
+                const last = view.state.doc.lineAt(visible.to).number;
+                for (let number = first; number <= last; number++) {
+                    const line = view.state.doc.line(number);
+                    if (seen.has(line.from))
+                        continue;
+                    seen.add(line.from);
+                    const whitespace = line.text.match(/^[\t ]*/)?.[0] ?? "";
+                    const columns = Math.min(24, whitespace.replaceAll("\t", "    ").length);
+                    if (columns)
+                        ranges.push(Decoration.line({ attributes: {
+                                style: `padding-left:${columns}ch;text-indent:-${columns}ch`,
+                            } }).range(line.from));
+                }
+            }
+            return Decoration.set(ranges, true);
+        });
+    }
     highlightExtension() {
         return EditorView.decorations.of(view => {
             const doc = view.state.doc;
@@ -179,17 +216,22 @@ export class CodeEditor extends BaseElement {
     }
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>
-      :host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}
+      :host{display:flex;flex-direction:column;min-width:0;min-height:0;color:var(--boe-token-text-text,#222);font:inherit}
       :host([hidden]){display:none!important}
-      [part=editor]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;overflow:hidden}
+      [part=editor]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;overflow:hidden;min-height:0;flex:1 1 auto}
       .cm-editor{background:var(--boe-code-background,var(--boe-token-surface-surface,#fff));color:var(--boe-code-foreground,var(--boe-token-text-text,#222))}
       [part=editor]:focus-within{box-shadow:0 0 0 3px var(--boe-token-surface-surface-brand,#0061d5)}
       .cm-editor.cm-focused{outline:none}
       .cm-scroller{max-height:var(--boe-code-editor-height,420px);min-height:160px;overflow:auto;font-family:var(--boe-code-font-family,monospace);font-size:var(--boe-code-font-size,14px);line-height:var(--boe-code-line-height,1.6)}
+      :host([fill-height]){height:100%}
+      :host([fill-height]) [part=editor],:host([fill-height]) .cm-editor,:host([fill-height]) .cm-scroller{height:100%;max-height:none;min-height:0}
       .cm-gutters,.cm-panels,.cm-tooltip{background:var(--boe-token-surface-surface-secondary,#fbfbfb)!important;color:var(--boe-code-foreground,var(--boe-token-text-text,#222))!important;border-color:var(--boe-token-stroke-stroke,#ddd)!important}
       .cm-gutters{color:var(--boe-code-gutter,var(--boe-token-text-text,#222))!important;border-right:var(--boe-code-gutter-border,1px solid var(--boe-token-stroke-stroke,#ddd))!important}
       .cm-cursor{border-left-color:var(--boe-code-caret,var(--boe-token-text-text,#222))}
       .cm-activeLine,.cm-activeLineGutter{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent)!important}
+      :host([current-line-style=border]) .cm-activeLine{background:transparent!important;box-shadow:inset 0 1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd)),inset 0 -1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd))}
+      :host([current-line-style=none]) .cm-activeLine{background:transparent!important}
+      :host([current-line-style=border]) .cm-activeLineGutter,:host([current-line-style=none]) .cm-activeLineGutter{background:transparent!important}
       .cm-activeLineGutter{color:var(--boe-code-gutter-active,var(--boe-code-gutter,var(--boe-token-text-text,#222)))!important}
       .cm-selectionBackground,.cm-content ::selection{background:var(--boe-code-selection,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent))!important}
       .boe-code-highlight{background:var(--boe-code-highlight-background,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 10%,transparent))!important;box-shadow:inset 3px 0 var(--boe-token-surface-surface-brand,#0061d5)}
@@ -206,6 +248,7 @@ export class CodeEditor extends BaseElement {
       .cm-lint-marker-warning{background-image:radial-gradient(circle,var(--boe-token-text-status-text-warning,#9a6500) 45%,transparent 50%)!important}
       .cm-lint-marker-info{background-image:radial-gradient(circle,var(--boe-token-surface-surface-brand,#0061d5) 45%,transparent 50%)!important}
       [part=help],[part=problems]{font-size:13px;color:var(--boe-token-text-text-secondary,#666);margin:8px 0}
+      [part=help][hidden],[part=toolbar][hidden]{display:none}
       [part=toolbar]{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
       button{font:inherit;color:inherit;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;padding:8px;min-height:36px}
       button:focus-visible{outline:3px solid var(--boe-token-surface-surface-brand,#0061d5);outline-offset:2px}
@@ -297,6 +340,7 @@ export class CodeEditor extends BaseElement {
                         ]),
                         this.completionsConfig.of(this.completionExtension()),
                         this.wrapConfig.of(this.wrap ? EditorView.lineWrapping : []),
+                        this.wrapIndentConfig.of(this.wrapIndentExtension()),
                         this.highlightsConfig.of(this.highlightExtension()),
                         syntaxHighlighting(HighlightStyle.define([
                             {
@@ -388,6 +432,7 @@ export class CodeEditor extends BaseElement {
                         ]),
                         this.completionsConfig.reconfigure(this.completionExtension()),
                         this.wrapConfig.reconfigure(this.wrap ? EditorView.lineWrapping : []),
+                        this.wrapIndentConfig.reconfigure(this.wrapIndentExtension()),
                         this.highlightsConfig.reconfigure(this.highlightExtension()),
                     ],
                 });
@@ -398,7 +443,12 @@ export class CodeEditor extends BaseElement {
         }
         this.view.contentDOM.setAttribute("aria-label", this.label);
         this.view.contentDOM.setAttribute("tabindex", "0");
-        this.view.contentDOM.setAttribute("aria-describedby", "editor-help");
+        if (this.hideHelp)
+            this.view.contentDOM.removeAttribute("aria-describedby");
+        else
+            this.view.contentDOM.setAttribute("aria-describedby", "editor-help");
+        this.shadowRoot.querySelector('[part=help]').hidden = this.hideHelp;
+        this.shadowRoot.querySelector('[part=toolbar]').hidden = this.hideProblems;
         this.syncProblems();
     }
     flushChange() {

package/dist/components/forms/number-input.d.ts

@@ -9,6 +9,7 @@ export declare class NumberInput extends FormAssociatedElement {
     private labelEl;
     private errorEl;
     private descriptionEl;
+    private clampStatusEl;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;

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;