@unofficialbox/box-open-elements 0.19.0 → 0.21.0

package/dist/components/actions/menu-item.d.ts

@@ -3,6 +3,8 @@ export declare class MenuItem extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
     private itemEl;
+    /** Let composed menus move focus without reaching into the shadow root. */
+    focus(options?: FocusOptions): void;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;

package/dist/components/actions/menu-item.js

@@ -67,6 +67,10 @@ export class MenuItem extends BaseElement {
         return ["disabled", "label", "selected", "value"];
     }
     itemEl;
+    /** Let composed menus move focus without reaching into the shadow root. */
+    focus(options) {
+        this.itemEl?.focus(options);
+    }
     get disabled() {
         return this.hasAttribute("disabled");
     }

package/dist/components/collections/card.js

@@ -25,6 +25,11 @@ const cardStyles = `
       0 14px 28px rgba(15, 23, 42, 0.04);
   }
 
+  [part="header"],
+  [part="body"] {
+    min-width: 0;
+  }
+
   [part="header"] {
     display: grid;
     gap: 0.35rem;
@@ -48,6 +53,7 @@ const cardStyles = `
   }
 
   [part="body"] {
+    overflow-x: auto;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
     line-height: 1.55;
   }

package/dist/components/collections/check-list.d.ts

@@ -0,0 +1,10 @@
+import { ResultBlocks, type ResultBlock } from "./result-blocks.js";
+export declare class CheckList extends ResultBlocks {
+    static readonly tagName = "box-check-list";
+    get rows(): Extract<ResultBlock, {
+        type: "checks";
+    }>["rows"];
+    set rows(rows: Extract<ResultBlock, {
+        type: "checks";
+    }>["rows"]);
+}

package/dist/components/collections/check-list.js

@@ -0,0 +1,8 @@
+import { ResultBlocks } from "./result-blocks.js";
+const DEFAULT_TAG_NAME = "box-check-list";
+export class CheckList extends ResultBlocks {
+    static tagName = DEFAULT_TAG_NAME;
+    get rows() { const b = this.blocks[0]; return b?.type === "checks" ? b.rows : []; }
+    set rows(rows) { this.blocks = [{ type: "checks", rows }]; }
+}
+CheckList.register();

package/dist/components/collections/document-list.d.ts

@@ -0,0 +1,10 @@
+import { ResultBlocks, type ResultBlock } from "./result-blocks.js";
+export declare class DocumentList extends ResultBlocks {
+    static readonly tagName = "box-document-list";
+    get items(): Extract<ResultBlock, {
+        type: "documents";
+    }>["items"];
+    set items(items: Extract<ResultBlock, {
+        type: "documents";
+    }>["items"]);
+}

package/dist/components/collections/document-list.js

@@ -0,0 +1,8 @@
+import { ResultBlocks } from "./result-blocks.js";
+const DEFAULT_TAG_NAME = "box-document-list";
+export class DocumentList extends ResultBlocks {
+    static tagName = DEFAULT_TAG_NAME;
+    get items() { const b = this.blocks[0]; return b?.type === "documents" ? b.items : []; }
+    set items(items) { this.blocks = [{ type: "documents", items }]; }
+}
+DocumentList.register();

package/dist/components/collections/fact-list.d.ts

@@ -0,0 +1,10 @@
+import { ResultBlocks, type ResultBlock } from "./result-blocks.js";
+export declare class FactList extends ResultBlocks {
+    static readonly tagName = "box-fact-list";
+    get rows(): Extract<ResultBlock, {
+        type: "facts";
+    }>["rows"];
+    set rows(rows: Extract<ResultBlock, {
+        type: "facts";
+    }>["rows"]);
+}

package/dist/components/collections/fact-list.js

@@ -0,0 +1,8 @@
+import { ResultBlocks } from "./result-blocks.js";
+const DEFAULT_TAG_NAME = "box-fact-list";
+export class FactList extends ResultBlocks {
+    static tagName = DEFAULT_TAG_NAME;
+    get rows() { const b = this.blocks[0]; return b?.type === "facts" ? b.rows : []; }
+    set rows(rows) { this.blocks = [{ type: "facts", rows }]; }
+}
+FactList.register();

package/dist/components/collections/result-blocks.d.ts

@@ -0,0 +1,54 @@
+import { BaseElement } from "../../core/element.js";
+export type CheckStatus = "pass" | "warn" | "fail" | "info";
+export type ResultBlock = {
+    id?: string;
+} & ({
+    type: "facts";
+    title?: string;
+    rows: {
+        label: string;
+        value: string;
+    }[];
+} | {
+    type: "checks";
+    title?: string;
+    rows: {
+        label: string;
+        value?: string;
+        detail?: string;
+        status: CheckStatus;
+    }[];
+} | {
+    type: "table";
+    title?: string;
+    columns: string[];
+    rows: {
+        cells: string[];
+        status?: CheckStatus;
+        note?: string;
+    }[];
+    footnote?: string;
+} | {
+    type: "documents";
+    title?: string;
+    items: {
+        id: string;
+        name: string;
+        detail?: string;
+        href?: string;
+    }[];
+});
+export declare const resultDocumentIds: (blocks: readonly ResultBlock[]) => string[];
+/** Pure escaped renderer also usable by host-composed conversations. */
+export declare function renderResultBlock(block: ResultBlock): string;
+export declare const resultBlockStyles: string;
+export declare class ResultBlocks extends BaseElement {
+    static readonly tagName: string;
+    private value;
+    get blocks(): ResultBlock[];
+    set blocks(value: ResultBlock[]);
+    get documentIds(): string[];
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

package/dist/components/collections/result-blocks.js

@@ -0,0 +1,74 @@
+import { BaseElement } from "../../core/element.js";
+import { isSafeHref } from "../../patterns/internal/safe-href.js";
+import { boeStatusGlyph, boeStatusStyles, statusLabel, toStatusKind } from "../../foundations/status/index.js";
+import { boeEntrance, boeEntranceKeyframes, boeReducedMotionPolicy, boeStaggerStyles } from "../../foundations/motion/index.js";
+const escape = (s) => s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+const verdict = (s) => ({ pass: "Within policy", warn: "Needs exception", fail: "Outside policy", info: "Information" })[s];
+const glyph = (s) => boeStatusGlyph(toStatusKind(s));
+export const resultDocumentIds = (blocks) => [...new Set(blocks.flatMap(b => b.type === "documents" ? b.items.map(i => i.id) : []))];
+/** Pure escaped renderer also usable by host-composed conversations. */
+export function renderResultBlock(block) {
+    const heading = block.title ? `<h3 part="title">${escape(block.title)}</h3>` : "";
+    if (block.type === "facts")
+        return `${heading}<dl part="facts">${block.rows.map(r => `<div part="row"><dt>${escape(r.label)}</dt><dd>${escape(r.value)}</dd></div>`).join("")}</dl>`;
+    if (block.type === "checks")
+        return `${heading}<ul part="checks">${block.rows.map(r => `<li part="row">${glyph(r.status)}<div><strong>${escape(r.label)}</strong>${r.detail ? `<p>${escape(r.detail)}</p>` : ""}</div><span part="verdict" data-status="${r.status}">${escape(r.value ?? verdict(r.status))}</span></li>`).join("")}</ul>`;
+    if (block.type === "documents")
+        return `${heading}<ul part="documents">${block.items.map(i => {
+            const content = `<svg aria-hidden="true" width="16" height="20" viewBox="0 0 16 20"><path d="M2 1h8l4 4v14H2zM10 1v5h4" fill="none" stroke="currentColor"/></svg><span><strong>${escape(i.name)}</strong>${i.detail ? `<small>${escape(i.detail)}</small>` : ""}</span>`;
+            return `<li part="row">${i.href && isSafeHref(i.href) ? `<a part="document" data-document-id="${escape(i.id)}" href="${escape(i.href)}" target="_blank" rel="noopener noreferrer">${content}</a>` : `<button part="document" data-document-id="${escape(i.id)}">${content}</button>`}</li>`;
+        }).join("")}</ul>`;
+    return `${heading}<div part="table-frame" role="region" aria-label="${escape(block.title ?? "Results")}" tabindex="0"><table><thead><tr>${block.columns.map(c => `<th scope="col">${escape(c)}</th>`).join("")}</tr></thead><tbody>${block.rows.map(r => `<tr>${r.cells.map((cell, index) => index === 0 ? `<th scope="row">${r.status ? `${glyph(r.status)}<span class="sr">${statusLabel(toStatusKind(r.status))}: </span>` : ""}${escape(cell)}${r.note ? `<small>${escape(r.note)}</small>` : ""}</th>` : `<td>${escape(cell)}</td>`).join("")}</tr>`).join("")}</tbody></table></div>${block.footnote ? `<p>${escape(block.footnote)}</p>` : ""}`;
+}
+export const resultBlockStyles = `
+:host { display:block; min-width:0; color:var(--boe-token-text-text,#222); font:inherit; }
+:host([hidden]){display:none !important} *{box-sizing:border-box} h3{font-size:1em;margin:0 0 .5rem} dl,ul{padding:0;margin:0;list-style:none}
+[part="row"]{border-bottom:1px solid var(--boe-token-stroke-stroke,#ddd);padding:.7rem 0;display:flex;gap:.6rem;align-items:baseline}
+dt{color:var(--boe-token-text-text-secondary,#666)} dd{margin:0 0 0 auto;font-variant-numeric:tabular-nums}
+[part="facts"] [part="row"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow-wrap:anywhere}
+[part="facts"] dd{margin:0;text-align:end}
+@container boe-result-block (max-width:28rem){[part="facts"] [part="row"]{grid-template-columns:minmax(0,1fr);gap:.25rem}[part="facts"] dd{text-align:start}}
+p{margin:.25rem 0;color:var(--boe-token-text-text-secondary,#666)} small{display:block;font-weight:normal;color:var(--boe-token-text-text-secondary,#666)}
+[part="verdict"]{margin-left:auto;text-align:right} [data-status="warn"]{color:var(--boe-token-text-status-text-warning,#946400)} [data-status="fail"]{color:var(--boe-token-text-status-text-error,#c52a46)}
+[part="document"]{display:flex;gap:.6rem;align-items:center;width:100%;text-align:left;color:inherit;font:inherit;background:none;border:0;text-decoration:none;cursor:pointer}
+[part="table-frame"]{overflow:auto;max-width:100%} table{border-collapse:collapse;min-width:100%;font-variant-numeric:tabular-nums} td,th{padding:.7rem;text-align:left;border-bottom:1px solid var(--boe-token-stroke-stroke,#ddd)} td:last-child{font-weight:600;background:var(--boe-token-surface-surface-secondary,#f7f7f7)}
+.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+[part="block"]{${boeEntrance()}${boeStaggerStyles};margin-block:1rem;min-width:0;container:boe-result-block / inline-size}
+${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}`;
+const DEFAULT_TAG_NAME = "box-result-blocks";
+export class ResultBlocks extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    value = [];
+    get blocks() { return this.value; }
+    set blocks(value) { this.value = value; if (this.isRendered)
+        this.update(); }
+    get documentIds() { return resultDocumentIds(this.value); }
+    renderTemplate() { this.shadowRoot.innerHTML = `<style>${resultBlockStyles}</style><div part="blocks"></div>`; }
+    setupListeners() {
+        this.shadowRoot.addEventListener("click", event => {
+            const row = event.target.closest("[data-document-id]");
+            if (row)
+                this.dispatchEvent(new CustomEvent("document-selected", { bubbles: true, composed: true, detail: { id: row.dataset.documentId } }));
+        });
+    }
+    update() {
+        const parent = this.shadowRoot.querySelector('[part="blocks"]');
+        this.value.forEach((block, index) => {
+            let node = parent.children[index];
+            const signature = JSON.stringify(block);
+            if (!node) {
+                node = document.createElement("section");
+                node.setAttribute("part", "block");
+                parent.append(node);
+            }
+            node.style.setProperty("--i", String(index));
+            if (node.dataset.signature !== signature) {
+                node.innerHTML = renderResultBlock(block);
+                node.dataset.signature = signature;
+            }
+        });
+        while (parent.children.length > this.value.length)
+            parent.lastElementChild.remove();
+    }
+}
+ResultBlocks.register();

package/dist/components/feedback/alert.d.ts

@@ -22,6 +22,8 @@ export declare class Alert extends BaseElement {
     get tone(): string;
     set tone(value: string);
     connectedCallback(): void;
+    private announcement;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     dismiss(): void;
     protected renderTemplate(): void;

package/dist/components/feedback/alert.js

@@ -1,4 +1,5 @@
 import { BaseElement } from "../../core/index.js";
+import { FeedbackAnnouncement } from "../../foundations/a11y/announcer.js";
 import { toneAccessibleLabel, toneIcon } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
@@ -15,10 +16,8 @@ const alertStyles = `
     display: none !important;
   }
 
-  /* The accent colours the glyph only. The tinted backgrounds below are pinned
-     by the colour conformance manifest against upstream box-ui-elements and are
-     deliberately not derived from it; upstream has no glyph, so adding one
-     costs no conformance. */
+  /* Preserve upstream light tints, but mix against the active theme surface.
+     Glyphs use readable status ink, not decorative status fill colours. */
   [part="alert"] {
     --alert-accent: var(--boe-token-text-text-secondary, #6f6f6f);
 
@@ -36,23 +35,23 @@ const alertStyles = `
 
   [part="alert"][data-tone="info"] {
     --alert-accent: var(--boe-token-surface-surface-brand, #0061d5);
-    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, #fff);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff));
   }
 
   [part="alert"][data-tone="success"] {
-    --alert-accent: var(--boe-token-surface-status-surface-success, #26c281);
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 10%, #fff);
+    --alert-accent: var(--boe-token-text-status-text-success, #187657);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 10%, var(--boe-token-surface-surface, #ffffff));
   }
 
   [part="alert"][data-tone="error"] {
-    --alert-accent: var(--boe-token-surface-status-surface-error, #ed3757);
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, #fff);
+    --alert-accent: var(--boe-token-text-status-text-error, #b92340);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, var(--boe-token-surface-surface, #ffffff));
   }
 
   [part="alert"][data-tone="warning"],
   [part="alert"][data-tone="inprogress"] {
-    --alert-accent: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
-    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 10%, #fff);
+    --alert-accent: var(--boe-token-text-status-text-warning, #805600);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 10%, var(--boe-token-surface-surface, #ffffff));
   }
 
   [part="icon"] {
@@ -202,9 +201,12 @@ export class Alert extends BaseElement {
         this.setAttribute("tone", value);
     }
     connectedCallback() {
-        this.openValue = this.hasAttribute("open") || !this.hasAttribute("open");
         super.connectedCallback();
     }
+    announcement = new FeedbackAnnouncement();
+    disconnectedCallback() {
+        this.announcement.reset();
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === "open") {
             this.openValue = this.hasAttribute("open");
@@ -224,7 +226,7 @@ export class Alert extends BaseElement {
         }
         this.shadowRoot.innerHTML = `
       <style>${alertStyles}</style>
-      <div part="alert" role="status" aria-live="polite">
+      <div part="alert" role="group">
         <span part="icon" aria-hidden="true"></span>
         <div part="content">
           <span part="tone-label" class="sr-only"></span>
@@ -263,6 +265,8 @@ export class Alert extends BaseElement {
         const hasRich = this.hasRichContent();
         const visible = this.openValue && Boolean(this.heading || this.message || hasRich);
         this.hidden = !visible;
+        const richText = this.richSlot.assignedNodes({ flatten: true }).map(node => node.textContent ?? "").join(" ").trim();
+        this.announcement.update(this, visible ? [toneAccessibleLabel(this.tone), this.heading, this.message, richText].filter(Boolean).join(": ") : "", this.tone === "error" ? "assertive" : "polite");
         this.richSlot.classList.toggle("has-content", hasRich);
         if (!visible) {
             return;

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

@@ -9,6 +9,15 @@ export declare class ProgressBar extends BaseElement {
     private indicatorEl;
     get label(): string;
     set label(value: string);
+    /**
+     * Keep the label as the bar's accessible name but drop it from the layout.
+     *
+     * For a bar sitting under something that already names it — an upload row
+     * showing the filename above it — the visible label is a second copy of text
+     * the reader can already see.
+     */
+    get hideLabel(): boolean;
+    set hideLabel(value: boolean);
     get max(): number;
     set max(value: number);
     get value(): number;

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

@@ -35,6 +35,14 @@ const progressBarStyles = `
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 
+  /* Fully hidden rather than the sr-only clip the form fields use. There the
+     label element *is* the control's accessible name, so it has to stay
+     readable; here the name lives on [part="track"]'s aria-label, and leaving
+     a clipped copy behind would just make a screen reader read it twice. */
+  :host([hide-label]) [part="label"] {
+    display: none;
+  }
+
   [part="value"] {
     font-size: 0.86rem;
     font-weight: 700;
@@ -61,7 +69,7 @@ const progressBarStyles = `
 export class ProgressBar extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["label", "max", "value"];
+        return ["hide-label", "label", "max", "value"];
     }
     progressEl;
     labelEl;
@@ -74,6 +82,19 @@ export class ProgressBar extends BaseElement {
     set label(value) {
         this.setAttribute("label", value);
     }
+    /**
+     * Keep the label as the bar's accessible name but drop it from the layout.
+     *
+     * For a bar sitting under something that already names it — an upload row
+     * showing the filename above it — the visible label is a second copy of text
+     * the reader can already see.
+     */
+    get hideLabel() {
+        return this.hasAttribute("hide-label");
+    }
+    set hideLabel(value) {
+        this.toggleAttribute("hide-label", Boolean(value));
+    }
     get max() {
         return Number(this.getAttribute("max") ?? "100");
     }
@@ -92,7 +113,7 @@ export class ProgressBar extends BaseElement {
         }
         this.shadowRoot.innerHTML = `
       <style>${progressBarStyles}</style>
-      <div part="progress" role="group">
+      <div part="progress">
         <div part="meta">
           <span part="label"></span>
           <span part="value"></span>
@@ -115,7 +136,12 @@ export class ProgressBar extends BaseElement {
         const max = Math.max(1, this.max);
         const value = clamp(this.value, 0, max);
         const percentage = Math.round((value / max) * 100);
-        this.progressEl.setAttribute("aria-label", `${this.label} progress`);
+        // The name belongs to [part="track"] — the element carrying the
+        // progressbar role — and to nothing else. The wrapper used to be a
+        // role="group" named `${label} progress`, which both duplicated that name
+        // and stuttered: the default label is "Progress", so it announced
+        // "Progress progress", and the uploader's "<file> upload progress" became
+        // "<file> upload progress progress".
         this.labelEl.textContent = this.label;
         this.valueEl.textContent = `${percentage}%`;
         this.trackEl.setAttribute("aria-label", this.label);

package/dist/components/feedback/status-icon.d.ts

@@ -0,0 +1,10 @@
+import { BaseElement } from "../../core/element.js";
+import { type StatusKind } from "../../foundations/status/index.js";
+export declare class StatusIcon extends BaseElement {
+    static readonly tagName = "box-status-icon";
+    static get observedAttributes(): string[];
+    get kind(): StatusKind;
+    set kind(value: StatusKind);
+    protected renderTemplate(): void;
+    protected update(): void;
+}

package/dist/components/feedback/status-icon.js

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/element.js";
+import { boeStatusGlyph, boeStatusStyles, statusLabel, toStatusKind } from "../../foundations/status/index.js";
+import { boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-status-icon";
+export class StatusIcon extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() { return ["kind"]; }
+    get kind() { return toStatusKind(this.getAttribute("kind") ?? "pending"); }
+    set kind(value) { this.setAttribute("kind", value); }
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>:host{display:inline-flex} :host([hidden]){display:none !important}
+    .label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+    ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}</style><span part="glyph"></span><span class="label" part="label"></span>`;
+    }
+    update() {
+        if (!this.isRendered)
+            return;
+        const glyph = this.shadowRoot.querySelector('[part="glyph"]');
+        if (glyph.getAttribute("data-kind") !== this.kind) {
+            glyph.setAttribute("data-kind", this.kind);
+            glyph.innerHTML = boeStatusGlyph(this.kind);
+        }
+        this.shadowRoot.querySelector('[part="label"]').textContent = statusLabel(this.kind);
+    }
+}
+StatusIcon.register();

package/dist/components/feedback/toast.d.ts

@@ -2,7 +2,8 @@ import { BaseElement } from "../../core/index.js";
 /**
  * Whether the toast clears itself.
  *
- * `dismissible` auto-dismisses after `duration` and can also be closed by hand;
+ * `dismissible` auto-dismisses non-error feedback after `duration`;
+ * errors always persist until explicitly dismissed or replaced.
  * `sticky` stays until the reader closes it, whatever `duration` says. Both
  * carry the close control — a toast the reader cannot get rid of is a trap.
  */
@@ -14,6 +15,10 @@ export declare class Toast extends BaseElement {
     static get observedAttributes(): string[];
     private openValue;
     private timeoutId;
+    private remaining;
+    private deadline;
+    private holds;
+    private announcement;
     private toastEl;
     private iconEl;
     private headingEl;
@@ -28,6 +33,9 @@ export declare class Toast extends BaseElement {
     get open(): boolean;
     set open(value: boolean);
     private scheduleAutoDismiss;
+    private resumeTimer;
+    private hold;
+    private dismiss;
     get message(): string;
     set message(value: string);
     /**
@@ -56,6 +64,7 @@ export declare class Toast extends BaseElement {
     get tone(): string;
     set tone(value: string);
     disconnectedCallback(): void;
+    connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     show(message?: string, options?: {
         duration?: number;