@unofficialbox/box-open-elements 0.18.0 → 0.20.0

package/dist/patterns/insights/donut-chart.js

@@ -16,6 +16,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/insights/line-chart.js

@@ -14,6 +14,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/insights/metric-card.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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: ${boePanel.gap};

package/dist/patterns/item/bulk-action-bar.js

@@ -24,6 +24,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="bar"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/item-details-panel.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/item-form.js

@@ -16,6 +16,12 @@ const elementStyles = `
           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="form"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/preview-header.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="header"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/lineage/lineage-graph.js

@@ -39,6 +39,12 @@ const elementStyles = `
           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;
+        }
+
         section[part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/lineage/provenance-strip.js

@@ -21,6 +21,12 @@ const elementStyles = `
           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;
+        }
+
         /* Read as a flow diagram rather than a breadcrumb. The anatomy is
            React Flow's, taken from its stylesheet: nodes are bordered boxes
            with a small radius (not pills), ports are 6px circles sitting on

package/dist/patterns/metadata/metadata-filter-builder.js

@@ -20,6 +20,12 @@ const builderStyles = `
     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="builder"] {
     display: grid;
     gap: ${boePanel.gap};

package/dist/patterns/metadata/metadata-inspector.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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="inspector"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/notifications/notification-bell.js

@@ -18,6 +18,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="trigger"] {
           position: relative;
           appearance: none;

package/dist/patterns/notifications/notification-inbox.js

@@ -21,6 +21,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           grid-template-rows: auto auto 1fr;

package/dist/patterns/preview/annotation-inspector.js

@@ -22,6 +22,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/preview/annotation-toolbar.js

@@ -23,6 +23,12 @@ const elementStyles = `
           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: grid;
           gap: 0.5rem;

package/dist/patterns/preview/preview-element.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-error: var(--boe-token-surface-status-surface-error, #ed3757);
         }
 
+        /* 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;
           gap: 0.6rem;

package/dist/patterns/run/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./types.js";
 export * from "./run-trace.js";
+export * from "./progress.js";
+export * from "./run-summary.js";

package/dist/patterns/run/index.js

@@ -2,3 +2,5 @@
 export * from "./types.js";
 // Machine execution trace surface
 export * from "./run-trace.js";
+export * from "./progress.js";
+export * from "./run-summary.js";

package/dist/patterns/run/progress.d.ts

@@ -0,0 +1,24 @@
+import { type StatusKind } from "../../foundations/status/index.js";
+import { type RunStep } from "./types.js";
+export interface AgentTodo {
+    id: string;
+    content: string;
+    status: "pending" | "in_progress" | "completed" | "skipped";
+}
+export interface RunTurn {
+    steps: RunStep[];
+    todos: AgentTodo[];
+    startedAt: number;
+    endedAt?: number;
+    incomplete?: boolean;
+}
+export declare function formatElapsed(ms: number): string;
+export declare function splitStepTitle(title: string): {
+    source?: string;
+    action: string;
+};
+export declare function progress(turn: RunTurn, failed?: boolean, now?: number, threshold?: number): {
+    kind: StatusKind;
+    label: string;
+    elapsed?: string;
+};

package/dist/patterns/run/progress.js

@@ -0,0 +1,32 @@
+import { toStatusKind } from "../../foundations/status/index.js";
+import { resolveRunSteps } from "./types.js";
+export function formatElapsed(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return "";
+    if (ms < 100)
+        return "<0.1 s";
+    if (ms < 10000)
+        return `${(ms / 1000).toFixed(1)} s`;
+    const seconds = Math.round(ms / 1000);
+    return seconds < 60 ? `${seconds} s` : `${Math.floor(seconds / 60)} min ${seconds % 60} s`;
+}
+export function splitStepTitle(title) {
+    const at = title.indexOf(" · ");
+    return at < 0 ? { action: title } : { source: title.slice(0, at), action: title.slice(at + 3) };
+}
+export function progress(turn, failed = false, now = Date.now(), threshold = 2000) {
+    const resolved = resolveRunSteps(turn.steps);
+    if (turn.endedAt === undefined) {
+        const step = [...resolved.steps].reverse().find(s => s.status === "running");
+        const label = turn.todos.find(t => t.status === "in_progress")?.content ?? (step ? splitStepTitle(step.step.title).action : "Thinking");
+        const elapsed = Math.max(0, now - turn.startedAt);
+        return { kind: "active", label: `${label}…`, ...(elapsed >= threshold ? { elapsed: `${Math.floor(elapsed / 1000)} s` } : {}) };
+    }
+    const took = formatElapsed(turn.endedAt - turn.startedAt);
+    if (failed || resolved.status === "failed")
+        return { kind: "failed", label: `Stopped after ${took}` };
+    if (turn.incomplete)
+        return { kind: "warning", label: `Cut short after ${took}` };
+    const warnings = resolved.steps.filter(s => toStatusKind(s.status) === "warning").length;
+    return { kind: warnings ? "warning" : "done", label: `Worked for ${took}${warnings ? ` · ${warnings} warning${warnings === 1 ? "" : "s"}` : ""}` };
+}

package/dist/patterns/run/run-summary.d.ts

@@ -0,0 +1,21 @@
+import { BaseElement } from "../../core/element.js";
+import { type RunTurn } from "./progress.js";
+export declare class RunSummary extends BaseElement {
+    static readonly tagName = "box-run-summary";
+    static get observedAttributes(): string[];
+    private value;
+    private timer;
+    private planSignature;
+    private traceSignature;
+    get turn(): RunTurn;
+    set turn(turn: RunTurn);
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncTimer;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private updateLabel;
+    protected update(): void;
+}

package/dist/patterns/run/run-summary.js

@@ -0,0 +1,82 @@
+import { BaseElement } from "../../core/element.js";
+import { boeDisclosureStyles, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { StatusIcon } from "../../components/feedback/status-icon.js";
+import { toStatusKind } from "../../foundations/status/index.js";
+import { RunTrace } from "./run-trace.js";
+import { progress } from "./progress.js";
+const DEFAULT_TAG_NAME = "box-run-summary";
+export class RunSummary extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() { return ["open", "failed", "elapsed-threshold"]; }
+    value = { steps: [], todos: [], startedAt: 0, endedAt: 0 };
+    timer;
+    planSignature = "";
+    traceSignature = "";
+    get turn() { return this.value; }
+    set turn(turn) { this.value = turn; if (this.isRendered)
+        this.update(); }
+    get open() { return this.hasAttribute("open"); }
+    set open(value) { this.toggleAttribute("open", value); }
+    connectedCallback() { super.connectedCallback(); this.syncTimer(); }
+    disconnectedCallback() { clearInterval(this.timer); this.timer = undefined; }
+    syncTimer() {
+        if (this.value.endedAt === undefined && this.isConnected && !this.timer)
+            this.timer = setInterval(() => this.updateLabel(), 1000);
+        if (this.value.endedAt !== undefined) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    renderTemplate() {
+        StatusIcon.register();
+        RunTrace.register();
+        this.shadowRoot.innerHTML = `<style>:host{display:block;font:inherit;color:var(--boe-token-text-text-secondary,#666)}:host([hidden]){display:none !important}
+    button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:.5rem 0;display:flex;gap:.5rem;align-items:center}
+    [part="clock"]{font-variant-numeric:tabular-nums} ul{padding:0;list-style:none} li{display:flex;gap:.5rem;margin:.5rem 0}
+    @keyframes boe-shimmer{50%{opacity:.6}} [data-running] [part="label"]{animation:boe-shimmer 1.4s ease-in-out infinite}
+    ${boeDisclosureStyles()}${boeEntranceKeyframes}${boeReducedMotionPolicy}</style>
+    <button part="trigger" aria-expanded="false" aria-controls="details"><box-status-icon></box-status-icon><span part="label" role="status"></span><span part="clock" aria-hidden="true"></span><span aria-hidden="true">›</span></button>
+    <div id="details" part="disclosure" class="boe-disclosure" inert><div><ul part="plan"></ul><box-run-trace></box-run-trace></div></div>`;
+    }
+    setupListeners() { this.shadowRoot.querySelector("button").addEventListener("click", () => { this.open = !this.open; }); }
+    updateLabel() {
+        const p = progress(this.value, this.hasAttribute("failed"), Date.now(), Number(this.getAttribute("elapsed-threshold") ?? 2000));
+        const label = this.shadowRoot.querySelector('[part="label"]');
+        if (label.textContent !== p.label)
+            label.textContent = p.label;
+        this.shadowRoot.querySelector('[part="clock"]').textContent = p.elapsed ?? "";
+        this.shadowRoot.querySelector("box-status-icon").kind = p.kind;
+        this.shadowRoot.querySelector("button").toggleAttribute("data-running", p.kind === "active");
+        this.shadowRoot.querySelector("button").setAttribute("aria-label", p.label);
+    }
+    update() {
+        if (!this.isRendered)
+            return;
+        this.updateLabel();
+        this.syncTimer();
+        this.shadowRoot.querySelector("button").setAttribute("aria-expanded", String(this.open));
+        const disclosure = this.shadowRoot.querySelector("#details");
+        disclosure.toggleAttribute("data-open", this.open);
+        disclosure.inert = !this.open;
+        disclosure.setAttribute("aria-hidden", String(!this.open));
+        const signature = JSON.stringify(this.value.todos);
+        if (signature !== this.planSignature) {
+            this.planSignature = signature;
+            const list = this.shadowRoot.querySelector("ul");
+            list.replaceChildren();
+            for (const todo of this.value.todos) {
+                const li = document.createElement("li");
+                const icon = new StatusIcon();
+                icon.kind = toStatusKind(todo.status);
+                li.append(icon, document.createTextNode(todo.content));
+                list.append(li);
+            }
+        }
+        const traceSignature = JSON.stringify(this.value.steps);
+        if (traceSignature !== this.traceSignature) {
+            this.traceSignature = traceSignature;
+            this.shadowRoot.querySelector("box-run-trace").steps = this.value.steps;
+        }
+    }
+}
+RunSummary.register();

package/dist/patterns/run/run-trace.d.ts

@@ -25,6 +25,7 @@ export declare class RunTrace extends BaseElement {
     private stepsRaw;
     private stepsCache;
     private readonly expandedIds;
+    private readonly previousStatuses;
     get heading(): string;
     set heading(value: string);
     get steps(): RunStep[];

package/dist/patterns/run/run-trace.js

@@ -2,6 +2,8 @@ import { formatRunDuration, formatRunSummary, isRunStepRecord, resolveRunSteps,
 import { ProgressBar } from "../../components/feedback/progress-bar.js";
 import { BaseElement } from "../../core/index.js";
 import { boePanel } from "../../foundations/geometry/index.js";
+import { boeStatusGlyph, boeStatusStyles, toStatusKind } from "../../foundations/status/index.js";
+import { boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-run-trace";
 /** Escape a value for use inside a double-quoted attribute selector. */
 const cssAttrValue = (value) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
@@ -33,6 +35,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="panel"] {
           border: ${boePanel.border};
           border-radius: ${boePanel.radius};
@@ -279,6 +287,7 @@ export class RunTrace extends BaseElement {
     stepsRaw = null;
     stepsCache = [];
     expandedIds = new Set();
+    previousStatuses = new Map();
     get heading() {
         return this.getAttribute("heading") ?? "Run";
     }
@@ -326,7 +335,11 @@ export class RunTrace extends BaseElement {
         if (!this.shadowRoot) {
             return;
         }
-        this.shadowRoot.innerHTML = `<style>${elementStyles}</style><div part="host"></div>`;
+        this.shadowRoot.innerHTML = `<style>${elementStyles}
+    [part="step"] [part="marker"]{border:0;background:none;display:inline-flex}
+    ${boeEntranceKeyframes}${boeStatusStyles}
+    [data-settled] .boe-status[data-kind="done"], [data-settled] .boe-status[data-kind="done"] path { animation: none; }
+    ${boeReducedMotionPolicy}</style><div part="host"></div>`;
         this.hostEl = this.shadowRoot.querySelector('[part="host"]');
     }
     setupListeners() {
@@ -373,7 +386,7 @@ export class RunTrace extends BaseElement {
             <span part="child-label">${escapeHtml(child.label)}</span>
             ${clamped === null
                 ? "<span></span>"
-                : `<box-progress-bar label="${escapeHtml(child.label)} progress" value="${String(clamped)}"></box-progress-bar>`}
+                : `<box-progress-bar label="${escapeHtml(child.label)}" value="${String(clamped)}"></box-progress-bar>`}
             <span part="child-status">${RUN_STEP_STATUS_LABEL[status]}</span>
           </li>
         `;
@@ -389,6 +402,7 @@ export class RunTrace extends BaseElement {
         const rows = resolution.steps
             .map(entry => {
             const { step, status, position } = entry;
+            const settled = this.previousStatuses.get(step.id) === status;
             const duration = formatRunDuration(step.startedAt, step.finishedAt);
             // Slot-only detail counts: a host projecting logs for a step with no
             // JSON description still needs the toggle that reveals them.
@@ -406,7 +420,7 @@ export class RunTrace extends BaseElement {
         `;
             return `
           <li part="step" data-status="${status}" data-step-id="${escapeHtml(step.id)}" style="--run-tone:${STATUS_TONE[status]};">
-            <span part="marker" aria-hidden="true"></span>
+            <span part="marker" aria-hidden="true" ${settled ? "data-settled" : ""}>${boeStatusGlyph(toStatusKind(status))}</span>
             <div part="step-body">
               <div part="topline">
                 <span part="step-title">${escapeHtml(step.title)}</span>
@@ -424,6 +438,9 @@ export class RunTrace extends BaseElement {
         })
             .join("");
         const summary = formatRunSummary(resolution);
+        this.previousStatuses.clear();
+        for (const { step, status } of resolution.steps)
+            this.previousStatuses.set(step.id, status);
         this.hostEl.innerHTML = `
       <section part="panel" aria-label="${escapeHtml(this.heading)}">
         <div part="header">

package/dist/patterns/search/filter-bar.js

@@ -25,6 +25,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="bar"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/search/saved-view-picker.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="picker"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/search/search-results-header.js

@@ -22,6 +22,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* 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="header"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/share/access-stats.js

@@ -64,6 +64,12 @@ const elementStyles = `
           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="stats"] {
           margin: 0;
           padding: ${boePanel.padding};

package/dist/patterns/share/collaborator-avatars.js

@@ -38,6 +38,12 @@ const elementStyles = `
           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: center;

package/dist/patterns/share/invite-collaborators-modal.js

@@ -7,6 +7,12 @@ const DEFAULT_TAG_NAME = "box-invite-collaborators-modal";
 const elementStyles = `
         :host { display: contents; color: inherit; 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="backdrop"] {
           position: fixed;
           inset: 0;

package/dist/patterns/share/permission-matrix.js

@@ -16,6 +16,12 @@ const matrixStyles = `
     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="matrix"] {
     display: grid;
     gap: ${boePanel.gap};

package/dist/patterns/share/presence.js

@@ -127,6 +127,12 @@ export class Presence extends BaseElement {
           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="presence"] {
           display: inline-flex;
           align-items: center;

package/dist/patterns/share/share-panel.js

@@ -16,6 +16,12 @@ const elementStyles = `
           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="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/share/unified-share-modal.js

@@ -18,6 +18,12 @@ const accessLabel = (access) => ACCESS_OPTIONS.find(option => option.value === a
 const elementStyles = `
         :host { display: contents; color: inherit; 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="backdrop"] {
           position: fixed;
           inset: 0;

package/dist/patterns/signature/signature-ceremony.js

@@ -33,6 +33,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="card"] {
           border: ${boePanel.border};
           border-radius: ${boePanel.radius};

package/dist/patterns/task/review-queue-item.js

@@ -15,6 +15,12 @@ const elementStyles = `
           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: grid;
           gap: 0.6rem;