@unofficialbox/box-open-elements 0.27.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.27.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.27.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.27.0/docs/README.md). The most important entries:
-
-- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/taxonomy.md)
-- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/architecture.md)
-- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/api-guidelines.md)
-- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/integration/frameworks.md)
-- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/foundations/tokens.md)
-- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/content-explorer.md)
-- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/integration/box-server.md)
-- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.27.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

@@ -188,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)
@@ -234,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";
     }
@@ -294,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

@@ -38,6 +38,7 @@ export declare class CodeEditor extends BaseElement {
     private readonlyConfig;
     private completionsConfig;
     private wrapConfig;
+    private wrapIndentConfig;
     private highlightsConfig;
     private highlightsInternal;
     private source?;
@@ -55,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);

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;