@unofficialbox/box-open-elements 0.18.0 → 0.20.0

package/dist/components/actions/button-group.js

@@ -15,6 +15,12 @@ const buttonGroupStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="group"] {
     display: inline-flex;
     align-items: stretch;

package/dist/components/actions/button.js

@@ -15,6 +15,12 @@ const buttonStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   button {
     appearance: none;
     box-sizing: border-box;

package/dist/components/actions/icon-button.js

@@ -16,6 +16,12 @@ const iconButtonStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="button"] {
     appearance: none;
     width: 2rem;

package/dist/components/actions/link-button.js

@@ -30,6 +30,12 @@ const linkButtonStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="link"] {
     display: inline-flex;
     align-items: center;

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

@@ -10,6 +10,12 @@ const menuItemStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="item"] {
     width: 100%;
     appearance: none;

package/dist/components/actions/menu.js

@@ -17,6 +17,12 @@ const menuStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="menu"] {
     min-width: 11rem;
     margin: 0;

package/dist/components/actions/segmented-control.js

@@ -15,6 +15,12 @@ const segmentedControlStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="control"] {
     display: inline-flex;
     align-items: stretch;

package/dist/components/actions/toolbar.js

@@ -18,6 +18,12 @@ const toolbarStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="toolbar"] {
     display: flex;
     flex-wrap: wrap;

package/dist/components/collections/card.js

@@ -8,6 +8,12 @@ const cardStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="card"] {
     display: grid;
     gap: 0.55rem;

package/dist/components/collections/carousel.js

@@ -16,6 +16,12 @@ const carouselStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="carousel"] {
     display: grid;
     gap: 0.55rem;

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/datalist-item.js

@@ -9,6 +9,12 @@ const datalistItemStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="item"] {
     display: flex;
     align-items: center;

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/draggable-list.js

@@ -15,6 +15,12 @@ const draggableListStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="list"] {
     list-style: none;
     margin: 0;

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/grid-view.js

@@ -34,6 +34,12 @@ const gridViewStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="grid"] {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));

package/dist/components/collections/pagination.js

@@ -10,6 +10,12 @@ const paginationStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="pagination"] {
     display: inline-flex;
     align-items: center;

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,71 @@
+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}
+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}
+${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/collections/table.js

@@ -22,6 +22,12 @@ const tableStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="shell"] {
     border: ${boePanel.border};
     border-radius: ${boeRadius.large};

package/dist/components/collections/thumbnail-card.js

@@ -10,6 +10,12 @@ const thumbnailCardStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="card"] {
     display: grid;
     grid-template-rows: auto auto;

package/dist/components/collections/tree-grid.js

@@ -25,6 +25,12 @@ const treeGridStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="controls"] {
     display: flex;
     justify-content: flex-end;

package/dist/components/collections/tree.js

@@ -25,6 +25,12 @@ const treeStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="shell"] {
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);

package/dist/components/feedback/alert.js

@@ -12,7 +12,7 @@ const alertStyles = `
   }
 
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   /* The accent colours the glyph only. The tinted backgrounds below are pinned

package/dist/components/feedback/badge.js

@@ -55,7 +55,7 @@ const badgeStyles = `
 
   /* Hidden when used as a count that is zero/empty with hide-when-zero. */
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   /* Count "pop" when the value changes (opt-in via the animate attribute). */

package/dist/components/feedback/badgeable.js

@@ -9,6 +9,12 @@ const badgeableStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="container"] {
     position: relative;
     display: inline-flex;

package/dist/components/feedback/chip.js

@@ -9,6 +9,12 @@ const chipStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="chip"] {
     display: inline-flex;
     align-items: center;

package/dist/components/feedback/due-badge.js

@@ -12,6 +12,12 @@ const elementStyles = `
           display: inline-block;
         }
 
+        /* 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]) {
+          display: none !important;
+        }
+
         [part="badge"] {
           display: inline-flex;
           align-items: center;

package/dist/components/feedback/empty-state.js

@@ -10,6 +10,12 @@ const emptyStateStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="empty-state"] {
     display: grid;
     justify-items: center;

package/dist/components/feedback/error-mask.js

@@ -9,6 +9,12 @@ const errorMaskStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="error-mask"] {
     display: flex;
     flex-direction: column;

package/dist/components/feedback/help-text.js

@@ -8,6 +8,12 @@ const helpTextStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="help-text"] {
     display: flex;
     align-items: start;

package/dist/components/feedback/indicator.js

@@ -34,7 +34,7 @@ const indicatorStyles = `
   }
 
   :host([hidden]) {
-    display: none;
+    display: none !important;
   }
 
   [part="shape"] {

package/dist/components/feedback/nudge.js

@@ -9,6 +9,12 @@ const nudgeStyles = `
     font: inherit;
   }
 
+  /* 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]) {
+    display: none !important;
+  }
+
   [part="nudge"] {
     display: flex;
     align-items: flex-start;

package/dist/components/feedback/path.js

@@ -67,6 +67,12 @@ const elementStyles = `
           display: block;
         }
 
+        /* 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]) {
+          display: none !important;
+        }
+
         [part="path"] {
           display: flex;
           flex-wrap: wrap;

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;