@unofficialbox/box-open-elements 0.26.0 → 0.28.0

package/README.md

@@ -12,7 +12,7 @@
 
 Browse the full catalog on the **[live docs site](https://unofficialbox.github.io/box-open-elements)** — live previews, an events/properties inspector, per-framework code snippets (React / Angular / Vue / Svelte / HTML), and the foundations pages.
 
-The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/taxonomy.md) for the canonical model):
+The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/taxonomy.md) for the canonical model):
 
 - **Foundations** — design decisions as data: tokens, color, typography, iconography, accessibility, theming
 - **Components** — accessible Web Components for single controls, organized by category
@@ -77,7 +77,7 @@ selection.toggleSelection("1");
 - optimized component entrypoints: `@unofficialbox/box-open-elements/<name>`
 - patterns: `@unofficialbox/box-open-elements/patterns/<area>` and `@unofficialbox/box-open-elements/patterns/<area>/<module>`
 
-See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/api-guidelines.md).
 
 ## Developing
 
@@ -91,17 +91,17 @@ bun run docs     # build + serve the docs site at http://localhost:4600
 
 ## Documentation
 
-The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/README.md). The most important entries:
-
-- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/taxonomy.md)
-- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/architecture.md)
-- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/api-guidelines.md)
-- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/integration/frameworks.md)
-- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/foundations/tokens.md)
-- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/content-explorer.md)
-- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/integration/box-server.md)
-- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/foundations/motion.md)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/components/actions/button.d.ts

@@ -21,6 +21,9 @@ export declare class Button extends BaseElement {
     set disabled(value: boolean);
     get label(): string;
     set label(value: string);
+    /** Optional spoken name for repeated actions whose visible label is brief. */
+    get accessibleLabel(): string;
+    set accessibleLabel(value: string);
     get size(): string;
     set size(value: string);
     get tone(): string;

package/dist/components/actions/button.js

@@ -2,6 +2,10 @@ import { BaseElement } from "../../core/index.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-button";
+// The status red is appropriate for accents, but white button text on it
+// misses 4.5:1 in the light theme. Mix toward the theme's primary text color
+// (dark in light mode, light in dark mode) without changing shared error tokens.
+const dangerFill = "var(--boe-button-danger-background, color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 80%, var(--boe-token-text-text, #222222) 20%))";
 /**
  * Visual language tracks box-ui-elements `.btn` / `.btn-primary`
  * (`src/styles/common/_buttons.scss` + constants/_buttons.scss).
@@ -101,19 +105,19 @@ const buttonStyles = `
   }
 
   button[data-tone="danger"] {
-    background: var(--boe-token-surface-status-surface-error, #ed3757);
-    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
+    background: ${dangerFill};
+    border-color: ${dangerFill};
     color: var(--boe-token-text-text-on-brand, #ffffff);
   }
 
   button[data-tone="danger"]:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 92%, white 8%);
-    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 92%, white 8%);
+    background: color-mix(in srgb, ${dangerFill} 92%, white 8%);
+    border-color: color-mix(in srgb, ${dangerFill} 92%, white 8%);
   }
 
   button[data-tone="danger"]:active:not(:disabled) {
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 88%, black 12%);
-    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 88%, black 12%);
+    background: color-mix(in srgb, ${dangerFill} 88%, black 12%);
+    border-color: color-mix(in srgb, ${dangerFill} 88%, black 12%);
   }
 
   button[data-tone="danger"]:focus-visible {
@@ -184,7 +188,7 @@ export class Button extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static formAssociated = true;
     static get observedAttributes() {
-        return ["disabled", "label", "size", "tone", "is-loading", "type"];
+        return ["accessible-label", "aria-label", "disabled", "label", "size", "tone", "is-loading", "type"];
     }
     buttonEl;
     focus(options) { if (!this.disabled)
@@ -230,6 +234,16 @@ export class Button extends BaseElement {
     set label(value) {
         this.setAttribute("label", value);
     }
+    /** Optional spoken name for repeated actions whose visible label is brief. */
+    get accessibleLabel() {
+        return this.getAttribute("accessible-label") ?? "";
+    }
+    set accessibleLabel(value) {
+        if (value)
+            this.setAttribute("accessible-label", value);
+        else
+            this.removeAttribute("accessible-label");
+    }
     get size() {
         return this.getAttribute("size") ?? "medium";
     }
@@ -290,6 +304,11 @@ export class Button extends BaseElement {
         this.buttonEl.dataset.tone = this.tone;
         this.buttonEl.dataset.size = this.size;
         this.labelEl.textContent = this.label;
+        const spokenLabel = this.accessibleLabel || this.getAttribute("aria-label");
+        if (spokenLabel)
+            this.buttonEl.setAttribute("aria-label", spokenLabel);
+        else
+            this.buttonEl.removeAttribute("aria-label");
         const busy = this.isLoading;
         this.spinnerEl.hidden = !busy;
         this.buttonEl.setAttribute("aria-busy", String(busy));

package/dist/components/collections/resource-row.d.ts

@@ -0,0 +1,28 @@
+import { BaseElement } from "../../core/index.js";
+/** Selectable resource information with independent slotted actions. Not a listbox option. */
+export declare class ResourceRow extends BaseElement {
+    static readonly tagName = "box-resource-row";
+    static get observedAttributes(): string[];
+    private selectEl;
+    private labelEl;
+    private metaEl;
+    private statusEl;
+    private statusSlot;
+    get label(): string;
+    set label(value: string);
+    get meta(): string;
+    set meta(value: string);
+    get status(): string;
+    set status(value: string);
+    get value(): string;
+    set value(value: string);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get active(): boolean;
+    set active(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

package/dist/components/collections/resource-row.js

@@ -0,0 +1,75 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const styles = `
+  :host { display:block; container-type:inline-size; font:inherit; color:var(--boe-token-text-text,#222); }
+  :host([hidden]) { display:none!important; }
+  [part="row"] { display:flex; align-items:center; gap:.75rem; min-inline-size:0; padding:.65rem; border:1px solid var(--boe-token-stroke-stroke,#dedede); border-radius:${boeRadius.med}; background:var(--boe-token-surface-surface,#fff); }
+  :host([selected]) [part="row"] { border-color:var(--boe-token-surface-surface-brand,#0061d5); background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 7%,var(--boe-token-surface-surface,#fff)); }
+  :host([active]) [part="row"] { box-shadow:inset 0 0 0 1px var(--boe-token-surface-surface-brand,#0061d5); }
+  [part="select"] { flex:1 1 auto; min-inline-size:0; display:flex; align-items:center; gap:.65rem; padding:.25rem; border:0; border-radius:4px; background:none; color:inherit; font:inherit; text-align:start; cursor:pointer; }
+  [part="select"]:focus-visible { outline:2px solid var(--boe-token-surface-surface-brand,#0061d5); outline-offset:2px; }
+  [part="select"]:disabled { cursor:not-allowed; opacity:.55; }
+  [part="body"] { display:grid; gap:.15rem; min-inline-size:0; }
+  [part="label"] { font-weight:600; overflow-wrap:anywhere; }
+  [part="meta"] { color:var(--boe-token-text-text-secondary,#6f6f6f); font-size:.8em; white-space:pre-line; overflow-wrap:anywhere; }
+  [part="meta"]:empty, [part="status"]:empty { display:none; }
+  [part="trailing"] { flex:0 1 auto; display:flex; align-items:center; gap:.5rem; min-inline-size:0; }
+  [part="status"] { color:var(--boe-token-text-text-secondary,#6f6f6f); font-size:.8em; }
+  ::slotted([slot="actions"]) { flex:none; }
+  @container (max-width: 320px) { [part="row"] { align-items:stretch; flex-wrap:wrap; } [part="trailing"] { inline-size:100%; justify-content:space-between; padding-inline-start:2.5rem; } }
+  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }
+`;
+/** Selectable resource information with independent slotted actions. Not a listbox option. */
+export class ResourceRow extends BaseElement {
+    static tagName = "box-resource-row";
+    static get observedAttributes() { return ["label", "meta", "status", "value", "selected", "active", "disabled"]; }
+    selectEl;
+    labelEl;
+    metaEl;
+    statusEl;
+    statusSlot;
+    get label() { return this.getAttribute("label") ?? ""; }
+    set label(value) { this.setAttribute("label", value); }
+    get meta() { return this.getAttribute("meta") ?? ""; }
+    set meta(value) { this.setAttribute("meta", value); }
+    get status() { return this.getAttribute("status") ?? ""; }
+    set status(value) { this.setAttribute("status", value); }
+    get value() { return this.getAttribute("value") ?? this.label; }
+    set value(value) { this.setAttribute("value", value); }
+    get selected() { return this.hasAttribute("selected"); }
+    set selected(value) { this.toggleAttribute("selected", value); }
+    get active() { return this.hasAttribute("active"); }
+    set active(value) { this.toggleAttribute("active", value); }
+    get disabled() { return this.hasAttribute("disabled"); }
+    set disabled(value) { this.toggleAttribute("disabled", value); }
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>${styles}</style><div part="row"><button part="select" type="button"><slot name="icon"></slot><span part="body"><span part="label"></span><span part="meta"></span></span></button><span part="trailing"><span part="status"></span><slot name="status"></slot><slot name="actions"></slot></span></div>`;
+        this.selectEl = this.shadowRoot.querySelector('[part="select"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.metaEl = this.shadowRoot.querySelector('[part="meta"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
+        this.statusSlot = this.shadowRoot.querySelector('slot[name="status"]');
+    }
+    setupListeners() {
+        this.selectEl.addEventListener("click", () => this.dispatchEvent(new CustomEvent("select", { bubbles: true, composed: true, detail: { value: this.value } })));
+        this.statusSlot.addEventListener("slotchange", () => this.update());
+    }
+    update() {
+        this.labelEl.textContent = this.label;
+        this.metaEl.textContent = this.meta;
+        this.statusEl.textContent = this.status;
+        this.statusEl.hidden = this.statusSlot.assignedElements().length > 0;
+        this.selectEl.disabled = this.disabled;
+        this.selectEl.setAttribute("aria-pressed", String(this.selected));
+        this.selectEl.setAttribute("aria-label", this.label);
+        const slottedStatus = this.statusSlot.assignedNodes({ flatten: true }).map(node => node instanceof Element
+            ? node.getAttribute("aria-label") ?? node.getAttribute("label") ?? node.textContent ?? ""
+            : node.textContent ?? "").map(value => value.trim()).filter(Boolean).join(" ");
+        const spokenStatus = this.status || slottedStatus;
+        if (this.meta || spokenStatus)
+            this.selectEl.setAttribute("aria-description", [this.meta.replaceAll("\n", ", "), spokenStatus].filter(Boolean).join("; "));
+        else
+            this.selectEl.removeAttribute("aria-description");
+    }
+}
+ResourceRow.register();

package/dist/components/feedback/mode-indicator.d.ts

@@ -0,0 +1,21 @@
+import { BaseElement } from "../../core/index.js";
+/** Host-controlled dry/live indicator. The host owns the mode-change destination. */
+export declare class ModeIndicator extends BaseElement {
+    static readonly tagName = "box-mode-indicator";
+    static get observedAttributes(): string[];
+    private indicatorEl;
+    private stateEl;
+    private detailEl;
+    private readonly announcement;
+    private previousMode;
+    get mode(): "dry" | "live";
+    set mode(value: "dry" | "live");
+    get detail(): string;
+    set detail(value: string);
+    get namePrefix(): string;
+    set namePrefix(value: string);
+    get interactive(): boolean;
+    set interactive(value: boolean);
+    protected renderTemplate(): void;
+    protected update(): void;
+}

package/dist/components/feedback/mode-indicator.js

@@ -0,0 +1,67 @@
+import { BaseElement } from "../../core/index.js";
+import { FeedbackAnnouncement } from "../../foundations/a11y/announcer.js";
+const styles = `
+  :host { display:inline-flex; max-inline-size:100%; font:inherit; color:var(--boe-token-text-text,#222); }
+  :host([hidden]) { display:none!important; }
+  [part="indicator"] { display:inline-flex; align-items:center; gap:.4rem; min-block-size:24px; min-inline-size:0; padding:.2rem .55rem; border-radius:999px; border:1px solid var(--boe-token-stroke-stroke,#dedede); background:var(--boe-token-surface-surface-secondary,#f4f4f4); color:inherit; font:inherit; text-align:start; }
+  button[part="indicator"] { cursor:pointer; }
+  button[part="indicator"]:focus-visible { outline:2px solid var(--boe-token-surface-surface-brand,#0061d5); outline-offset:2px; }
+  :host([mode="live"]) [part="indicator"] { border-color:var(--boe-token-text-status-text-error,#b92340); background:color-mix(in srgb,var(--boe-token-surface-status-surface-error,#ed3757) 9%,var(--boe-token-surface-surface,#fff)); }
+  [part="dot"] { flex:none; inline-size:.45rem; block-size:.45rem; border-radius:50%; background:var(--boe-token-text-text-secondary,#6f6f6f); }
+  :host([mode="live"]) [part="dot"] { background:var(--boe-token-text-status-text-error,#b92340); }
+  [part="state"] { font-weight:700; white-space:nowrap; }
+  [part="detail"] { min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  [part="detail"]:empty { display:none; }
+  :host([live-stripe][mode="live"]) { border-block-start:3px solid var(--boe-token-text-status-text-error,#b92340); }
+  @media (max-width:390px) { [part="detail"] { display:none; } }
+`;
+/** Host-controlled dry/live indicator. The host owns the mode-change destination. */
+export class ModeIndicator extends BaseElement {
+    static tagName = "box-mode-indicator";
+    static get observedAttributes() { return ["mode", "detail", "name-prefix", "interactive", "live-stripe"]; }
+    indicatorEl;
+    stateEl;
+    detailEl;
+    announcement = new FeedbackAnnouncement();
+    previousMode = null;
+    get mode() { return this.getAttribute("mode") === "live" ? "live" : "dry"; }
+    set mode(value) { this.setAttribute("mode", value); }
+    get detail() { return this.getAttribute("detail") ?? ""; }
+    set detail(value) { this.setAttribute("detail", value); }
+    get namePrefix() { return this.getAttribute("name-prefix") ?? "Next run"; }
+    set namePrefix(value) { this.setAttribute("name-prefix", value); }
+    get interactive() { return this.hasAttribute("interactive"); }
+    set interactive(value) { this.toggleAttribute("interactive", value); }
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>${styles}</style><span part="indicator"><span part="dot" aria-hidden="true"></span><span part="state"></span><span part="detail"></span></span>`;
+        this.indicatorEl = this.shadowRoot.querySelector('[part="indicator"]');
+        this.stateEl = this.shadowRoot.querySelector('[part="state"]');
+        this.detailEl = this.shadowRoot.querySelector('[part="detail"]');
+    }
+    update() {
+        const mode = this.mode;
+        if (this.interactive !== (this.indicatorEl.tagName === "BUTTON")) {
+            const replacement = document.createElement(this.interactive ? "button" : "span");
+            replacement.setAttribute("part", "indicator");
+            if (!this.interactive)
+                replacement.setAttribute("role", "group");
+            if (replacement instanceof HTMLButtonElement)
+                replacement.type = "button";
+            replacement.append(...Array.from(this.indicatorEl.childNodes));
+            this.indicatorEl.replaceWith(replacement);
+            this.indicatorEl = replacement;
+            this.indicatorEl.addEventListener("click", () => { if (this.interactive)
+                this.dispatchEvent(new CustomEvent("activate", { bubbles: true, composed: true })); });
+        }
+        const state = mode === "live" ? "Live" : "Dry run";
+        if (!this.interactive)
+            this.indicatorEl.setAttribute("role", "group");
+        this.stateEl.textContent = state;
+        this.detailEl.textContent = this.detail ? `· ${this.detail}` : "";
+        this.indicatorEl.setAttribute("aria-label", `${this.namePrefix}: ${state}${this.detail ? `, ${this.detail}` : ""}`);
+        if (this.previousMode !== null && this.previousMode !== mode)
+            this.announcement.update(this, this.indicatorEl.getAttribute("aria-label") ?? "", "polite");
+        this.previousMode = mode;
+    }
+}
+ModeIndicator.register();

package/dist/components/feedback/progress-steps.d.ts

@@ -46,7 +46,11 @@ export declare class ProgressSteps extends BaseElement {
     private valueInternal;
     private stepsEl;
     private liveEl;
+    private compactToggleEl;
+    private compactExpanded;
     private itemsSignature;
+    get compact(): boolean;
+    set compact(value: boolean);
     get label(): string;
     set label(value: string);
     get items(): ProgressStepItem[];

package/dist/components/feedback/progress-steps.js

@@ -59,6 +59,23 @@ const progressStepsStyles = `
     font: inherit;
   }
 
+  [part="compact-toggle"] { display: none; }
+  @media (max-width: 600px) {
+    [part="compact-toggle"][data-enabled="true"] {
+      display: block;
+      width: 100%;
+      min-height: 36px;
+      text-align: left;
+      border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+      border-radius: ${boeRadius.med};
+      background: var(--boe-token-surface-surface, #ffffff);
+      color: var(--boe-token-text-text, #222222);
+      font: inherit;
+      padding: 0.45rem 0.65rem;
+    }
+    [part="steps"][data-compact="true"][data-expanded="false"] { display: none; }
+  }
+
   /* The host's own display would otherwise beat the UA rule for [hidden],
      leaving the element on screen when a host hides it. */
   :host([hidden]) {
@@ -214,12 +231,16 @@ const progressStepsStyles = `
 export class ProgressSteps extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["items", "label", "value"];
+        return ["compact", "items", "label", "value"];
     }
     valueInternal = "";
     stepsEl;
     liveEl;
+    compactToggleEl;
+    compactExpanded = false;
     itemsSignature = "";
+    get compact() { return this.hasAttribute("compact"); }
+    set compact(value) { this.toggleAttribute("compact", Boolean(value)); }
     get label() {
         return this.getAttribute("label") ?? "Progress Steps";
     }
@@ -270,13 +291,19 @@ export class ProgressSteps extends BaseElement {
         }
         this.shadowRoot.innerHTML = `
       <style>${progressStepsStyles}</style>
-      <div part="steps" role="group"></div>
+      <button type="button" part="compact-toggle" aria-controls="progress-steps-list" aria-expanded="false"></button>
+      <div id="progress-steps-list" part="steps" role="group"></div>
       <div part="live" class="boe-sr-only" aria-live="polite"></div>
     `;
         this.stepsEl = this.shadowRoot.querySelector('[part="steps"]');
+        this.compactToggleEl = this.shadowRoot.querySelector('[part="compact-toggle"]');
         this.liveEl = this.shadowRoot.querySelector('[part="live"]');
     }
     setupListeners() {
+        this.compactToggleEl.addEventListener("click", () => {
+            this.compactExpanded = !this.compactExpanded;
+            this.update();
+        });
         this.stepsEl.addEventListener("click", event => {
             const step = event.target.closest('[part="step"]');
             if (!step || !this.stepsEl.contains(step)) {
@@ -397,6 +424,11 @@ export class ProgressSteps extends BaseElement {
         }
         this.stepsEl.setAttribute("aria-label", this.label);
         const resolved = resolveStepStates(items, this.valueInternal);
+        this.compactToggleEl.dataset.enabled = String(this.compact);
+        this.compactToggleEl.setAttribute("aria-expanded", String(this.compactExpanded));
+        this.compactToggleEl.textContent = `Step ${activeIndex + 1} of ${items.length}: ${items[activeIndex]?.label ?? ""} · ${this.compactExpanded ? "Hide steps" : "Show steps"}`;
+        this.stepsEl.dataset.compact = String(this.compact);
+        this.stepsEl.dataset.expanded = String(this.compactExpanded);
         const tabbable = this.tabbableIndex(resolved);
         const signature = JSON.stringify(items);
         if (signature !== this.itemsSignature) {

package/dist/components/feedback/verdict-banner.d.ts

@@ -0,0 +1,23 @@
+import { BaseElement } from "../../core/index.js";
+/** Finished-run verdict with a single action and one-time polite announcement. */
+export declare class VerdictBanner extends BaseElement {
+    static readonly tagName = "box-verdict-banner";
+    static get observedAttributes(): string[];
+    private readonly headingId;
+    private readonly announcement;
+    private headingEl;
+    private reasonsEl;
+    private iconEl;
+    private reasonsValue;
+    private announced;
+    get tone(): "passed" | "missed" | "none";
+    set tone(value: "passed" | "missed" | "none");
+    get heading(): string;
+    set heading(value: string);
+    get headingLevel(): number;
+    set headingLevel(value: number);
+    get reasons(): string[];
+    set reasons(value: string[]);
+    protected renderTemplate(): void;
+    protected update(): void;
+}

package/dist/components/feedback/verdict-banner.js

@@ -0,0 +1,59 @@
+import { BaseElement } from "../../core/index.js";
+import { FeedbackAnnouncement } from "../../foundations/a11y/announcer.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { toneIcon } from "./tone.js";
+const styles = `
+  :host { display:block; font:inherit; color:var(--boe-token-text-text,#222); container-type:inline-size; }
+  :host([hidden]) { display:none!important; }
+  [part="banner"] { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:start; gap:.7rem; padding:1rem; border-radius:${boeRadius.med}; border:1px solid var(--boe-token-stroke-stroke,#dedede); background:var(--boe-token-surface-surface-secondary,#f4f4f4); }
+  :host([tone="passed"]) [part="banner"] { border-color:var(--boe-token-text-status-text-success,#187657); background:color-mix(in srgb,var(--boe-token-surface-status-surface-success,#26c281) 9%,var(--boe-token-surface-surface,#fff)); }
+  :host([tone="missed"]) [part="banner"] { border-color:var(--boe-token-text-status-text-error,#b92340); background:color-mix(in srgb,var(--boe-token-surface-status-surface-error,#ed3757) 9%,var(--boe-token-surface-surface,#fff)); }
+  [part="icon"] { inline-size:20px; block-size:20px; color:var(--boe-token-text-text-secondary,#6f6f6f); }
+  :host([tone="passed"]) [part="icon"] { color:var(--boe-token-text-status-text-success,#187657); }
+  :host([tone="missed"]) [part="icon"] { color:var(--boe-token-text-status-text-error,#b92340); }
+  [part="icon"] svg { inline-size:100%; block-size:100%; }
+  [part="body"] { min-inline-size:0; }
+  [part="heading"] { margin:0; font:inherit; font-weight:700; overflow-wrap:anywhere; }
+  [part="reasons"] { margin:.45rem 0 0; padding-inline-start:1.2rem; overflow-wrap:anywhere; }
+  [part="reasons"]:empty { display:none; }
+  @container (max-width:320px) { [part="banner"] { grid-template-columns:20px minmax(0,1fr); } [part="action"] { grid-column:2; } }
+`;
+let nextHeadingId = 0;
+/** Finished-run verdict with a single action and one-time polite announcement. */
+export class VerdictBanner extends BaseElement {
+    static tagName = "box-verdict-banner";
+    static get observedAttributes() { return ["tone", "heading", "heading-level"]; }
+    headingId = `boe-verdict-${++nextHeadingId}`;
+    announcement = new FeedbackAnnouncement();
+    headingEl;
+    reasonsEl;
+    iconEl;
+    reasonsValue = [];
+    announced = false;
+    get tone() { const value = this.getAttribute("tone"); return value === "passed" || value === "missed" ? value : "none"; }
+    set tone(value) { this.setAttribute("tone", value); }
+    get heading() { return this.getAttribute("heading") ?? ""; }
+    set heading(value) { this.setAttribute("heading", value); }
+    get headingLevel() { const value = Number(this.getAttribute("heading-level") ?? 2); return Number.isInteger(value) && value >= 1 && value <= 6 ? value : 2; }
+    set headingLevel(value) { this.setAttribute("heading-level", String(value)); }
+    get reasons() { return [...this.reasonsValue]; }
+    set reasons(value) { this.reasonsValue = [...value]; if (this.isRendered)
+        this.update(); }
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>${styles}</style><section part="banner" role="group" aria-labelledby="${this.headingId}"><span part="icon" aria-hidden="true"></span><div part="body"><div part="heading" id="${this.headingId}" role="heading"></div><ul part="reasons"></ul></div><span part="action"><slot name="action"></slot></span></section>`;
+        this.headingEl = this.shadowRoot.querySelector('[part="heading"]');
+        this.reasonsEl = this.shadowRoot.querySelector('[part="reasons"]');
+        this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
+    }
+    update() {
+        this.headingEl.textContent = this.heading;
+        this.headingEl.setAttribute("aria-level", String(this.headingLevel));
+        this.iconEl.innerHTML = toneIcon(this.tone === "passed" ? "success" : this.tone === "missed" ? "error" : "info");
+        this.reasonsEl.replaceChildren(...this.reasonsValue.map(reason => { const item = document.createElement("li"); item.textContent = reason; return item; }));
+        if (!this.announced && this.heading && this.tone !== "none") {
+            this.announced = true;
+            this.announcement.update(this, this.heading, "polite");
+        }
+    }
+}
+VerdictBanner.register();

package/dist/components/forms/code-editor.d.ts

@@ -21,6 +21,11 @@ export interface CodeSelection {
     anchor: number;
     head: number;
 }
+export interface CodeLine {
+    number: number;
+    from: number;
+    to: number;
+}
 /** Optional CodeMirror entrypoint. Import `code-editor`, not the root catalog. */
 export declare class CodeEditor extends BaseElement {
     static readonly tagName = "box-code-editor";
@@ -33,6 +38,7 @@ export declare class CodeEditor extends BaseElement {
     private readonlyConfig;
     private completionsConfig;
     private wrapConfig;
+    private wrapIndentConfig;
     private highlightsConfig;
     private highlightsInternal;
     private source?;
@@ -50,10 +56,19 @@ export declare class CodeEditor extends BaseElement {
     }): void;
     get wrap(): boolean;
     set wrap(value: boolean);
+    get currentLineStyle(): "fill" | "border" | "none";
+    set currentLineStyle(value: "fill" | "border" | "none");
+    get hideHelp(): boolean;
+    set hideHelp(value: boolean);
+    get hideProblems(): boolean;
+    set hideProblems(value: boolean);
+    get fillHeight(): boolean;
+    set fillHeight(value: boolean);
     get completionSource(): CodeCompletionSource | undefined;
     set completionSource(value: CodeCompletionSource | undefined);
     get highlights(): readonly CodeHighlight[];
     set highlights(value: readonly CodeHighlight[]);
+    private wrapIndentExtension;
     private highlightExtension;
     get language(): string;
     set language(value: string);
@@ -67,6 +82,10 @@ export declare class CodeEditor extends BaseElement {
     set completions(value: readonly CodeCompletion[]);
     get selection(): CodeSelection;
     set selection(value: CodeSelection);
+    /** One-based line containing a UTF-16 document offset, including before mount. */
+    lineAt(position: number): CodeLine;
+    /** Start offset of a one-based line; out-of-range lines clamp to the document. */
+    lineStart(number: number): number;
     revealLine(line: number, options?: {
         center?: boolean;
     }): void;