@unofficialbox/box-open-elements 0.18.0 → 0.20.0

package/dist/patterns/agent-workspace/controller.js

@@ -0,0 +1,65 @@
+export const conversationTitle = (body, max = 48) => {
+    const text = body.trim().replace(/\s+/g, " ");
+    if (text.length <= max)
+        return text || "New chat";
+    const cut = text.slice(0, max);
+    const space = cut.lastIndexOf(" ");
+    return `${space > 0 ? cut.slice(0, space) : cut}…`;
+};
+export function conversationDetails(state) {
+    const sources = new Map();
+    const approvals = [];
+    let context;
+    for (const message of state.messages) {
+        if (message.context)
+            context = message.context;
+        for (const citation of message.citations)
+            if (!sources.has(citation.id))
+                sources.set(citation.id, citation);
+        for (const block of message.blocks ?? [])
+            if (block.type === "documents")
+                for (const item of block.items) {
+                    if (!sources.has(item.id))
+                        sources.set(item.id, { id: item.id, label: item.name, ...(item.href ? { href: item.href } : {}) });
+                }
+        for (const proposal of message.proposals)
+            approvals.push({ messageId: message.id, proposal });
+    }
+    return { ...(context ? { context } : {}), approvals, sources: [...sources.values()] };
+}
+/** Owns independent sessions. Selecting a chat never disconnects another one. */
+export class AgentWorkspaceController {
+    createSession;
+    chats = [];
+    activeId = null;
+    seq = 0;
+    listeners = new Set();
+    subscriptions = [];
+    constructor(createSession) {
+        this.createSession = createSession;
+    }
+    subscribe(listener) { this.listeners.add(listener); return () => this.listeners.delete(listener); }
+    emit() { this.listeners.forEach(fn => fn()); }
+    newChat() {
+        let chat = this.chats.find(c => c.controller.getState().messages.length === 0);
+        if (!chat) {
+            chat = { id: `chat-${++this.seq}`, controller: this.createSession() };
+            chat.controller.connect();
+            this.chats.push(chat);
+            this.subscriptions.push(chat.controller.subscribe("messagesChanged", () => this.emit()), chat.controller.subscribe("streamingChanged", () => this.emit()));
+        }
+        this.select(chat.id);
+        return chat;
+    }
+    select(id) { if (!this.chats.some(c => c.id === id))
+        return; this.activeId = id; this.emit(); }
+    get summaries() {
+        return this.chats.map(c => {
+            const state = c.controller.getState();
+            return { id: c.id, title: conversationTitle(state.messages.find(m => m.role === "user")?.body ?? ""),
+                status: state.messages.some(m => m.proposals.some(p => !p.decision)) ? "Needs your approval" : state.streaming ? "Working…" : "" };
+        });
+    }
+    get details() { const chat = this.chats.find(c => c.id === this.activeId); return chat ? conversationDetails(chat.controller.getState()) : { approvals: [], sources: [] }; }
+    destroy() { this.subscriptions.forEach(fn => fn()); this.subscriptions = []; this.chats.forEach(c => { c.controller.disconnect(); c.controller.destroy(); }); this.listeners.clear(); }
+}

package/dist/patterns/agent-workspace/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./controller.js";
+export * from "./agent-workspace.js";

package/dist/patterns/agent-workspace/index.js

@@ -0,0 +1,2 @@
+export * from "./controller.js";
+export * from "./agent-workspace.js";

package/dist/patterns/audit/activity-density.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/audit/audit-log.js

@@ -32,6 +32,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/call-console/call-console.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from "../../core/element.js";
+import type { CallConsoleController } from "./controller.js";
+export declare function copyCallText(text: string, doc?: Document): Promise<boolean>;
+export declare class CallConsole extends BaseElement {
+    static readonly tagName = "box-call-console";
+    private model;
+    private unsubscribe?;
+    private selected;
+    get callController(): CallConsoleController | null;
+    set callController(value: CallConsoleController | null);
+    private listen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

package/dist/patterns/call-console/call-console.js

@@ -0,0 +1,107 @@
+import { BaseElement } from "../../core/element.js";
+import { SplitView } from "../../components/layout/split-view.js";
+import { boeEntrance, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { callFailed, callStatus, formatCallHttp } from "./types.js";
+const DEFAULT_TAG_NAME = "box-call-console";
+export async function copyCallText(text, doc = document) {
+    try {
+        await doc.defaultView?.navigator.clipboard.writeText(text);
+        if (doc.defaultView?.navigator.clipboard)
+            return true;
+    }
+    catch { }
+    const active = doc.activeElement;
+    const textarea = doc.createElement("textarea");
+    textarea.value = text;
+    textarea.style.cssText = "position:fixed;opacity:0";
+    doc.body.append(textarea);
+    textarea.select();
+    try {
+        return doc.execCommand?.("copy") ?? false;
+    }
+    finally {
+        textarea.remove();
+        active?.focus({ preventScroll: true });
+    }
+}
+export class CallConsole extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    model = null;
+    unsubscribe;
+    selected = "";
+    get callController() { return this.model; }
+    set callController(value) { this.unsubscribe?.(); this.model = value; if (this.isConnected)
+        this.listen(); if (this.isRendered)
+        this.update(); }
+    listen() { this.unsubscribe?.(); this.unsubscribe = this.model?.subscribe(() => this.update()); }
+    connectedCallback() { super.connectedCallback(); this.listen(); }
+    disconnectedCallback() { this.unsubscribe?.(); }
+    renderTemplate() {
+        SplitView.register();
+        this.shadowRoot.innerHTML = `<style>:host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}:host([hidden]){display:none !important}
+    header{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center} pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;max-height:30rem;overflow:auto}
+    button,select{font:inherit;color:inherit;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:5px;padding:.4rem;cursor:pointer}
+    [part="call"]{width:100%;display:grid;grid-template-columns:5rem 5rem minmax(0,1fr) 4rem;text-align:left;gap:.5rem;margin:.4rem 0;${boeEntrance()}}
+    #list{container-type:inline-size} [part="call"] span{min-width:0;overflow-wrap:anywhere}
+    @container(max-width:420px){[part="call"]{grid-template-columns:minmax(0,1fr) auto}[part="call"] span:nth-child(even){text-align:right}}
+    [aria-current="true"]{background:var(--boe-token-surface-surface-secondary,#f5f5f5)} [part="skeleton"]{height:2rem;margin:.5rem;background:var(--boe-token-surface-surface-secondary,#eee)}
+    ${boeEntranceKeyframes}${boeReducedMotionPolicy}</style>
+    <header><span id="connection" role="status"></span><label>Service <select id="service"><option value="">All</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><button id="clear">Clear</button><span id="copy-status" role="status"></span></header>
+    <box-split-view resizable ratio="0.4"><div slot="primary" id="list"></div><div><button data-copy="request">Copy request</button><button data-copy="response">Copy response</button><button data-copy="both">Copy both</button><h3>Request <button data-copy="request" aria-label="Copy request code">⧉</button></h3><pre id="request"></pre><h3>Response <button data-copy="response" aria-label="Copy response code">⧉</button></h3><pre id="response"></pre></div></box-split-view>`;
+    }
+    setupListeners() {
+        this.shadowRoot.querySelector("#service").addEventListener("change", () => this.update());
+        this.shadowRoot.querySelector("#errors").addEventListener("change", () => this.update());
+        this.shadowRoot.querySelector("#clear").addEventListener("click", () => { void this.model?.clear().catch(() => { this.shadowRoot.querySelector("#copy-status").textContent = "Unable to clear calls"; }); });
+        this.shadowRoot.querySelectorAll("[data-copy]").forEach(b => b.addEventListener("click", async () => {
+            const entry = this.model?.entries.find(e => e.id === this.selected);
+            if (!entry)
+                return;
+            const ok = await copyCallText(formatCallHttp(entry, b.dataset.copy));
+            this.shadowRoot.querySelector("#copy-status").textContent = ok ? "Copied" : "Copy unavailable; select the text to copy";
+        }));
+    }
+    update() {
+        const state = this.model?.connection ?? "connecting";
+        this.shadowRoot.querySelector("#connection").textContent = state === "unavailable" ? "Restart the agent: /calls is unavailable" : state;
+        const service = this.shadowRoot.querySelector("#service");
+        const services = [...new Set(this.model?.entries.map(e => e.service) ?? [])];
+        for (const name of services)
+            if (!Array.from(service.options).some(o => o.value === name)) {
+                const option = document.createElement("option");
+                option.value = name;
+                option.textContent = name;
+                service.append(option);
+            }
+        const errors = this.shadowRoot.querySelector("#errors").checked;
+        const entries = this.model?.entries.filter(e => (!service.value || e.service === service.value) && (!errors || callFailed(e))) ?? [];
+        if (!entries.some(e => e.id === this.selected))
+            this.selected = entries[0]?.id ?? "";
+        const list = this.shadowRoot.querySelector("#list");
+        const focused = this.shadowRoot.activeElement?.getAttribute("data-call-id");
+        list.querySelectorAll('[part="skeleton"]').forEach(el => el.remove());
+        const existing = new Map(Array.from(list.children).map(el => [el.getAttribute("data-call-id"), el]));
+        for (const entry of entries) {
+            let button = existing.get(entry.id);
+            existing.delete(entry.id);
+            if (!button) {
+                button = document.createElement("button");
+                button.setAttribute("part", "call");
+                button.dataset.callId = entry.id;
+                button.addEventListener("click", () => { this.selected = entry.id; this.update(); });
+            }
+            button.setAttribute("aria-current", String(entry.id === this.selected));
+            button.replaceChildren(...[callStatus(entry), entry.service, entry.summary, `${Math.round(entry.durationMs)} ms`].map(text => { const span = document.createElement("span"); span.textContent = text; return span; }));
+            list.append(button);
+            if (entry.id === focused)
+                button.focus({ preventScroll: true });
+        }
+        existing.forEach(el => el.remove());
+        if (!entries.length && state === "connecting")
+            list.innerHTML = '<div part="skeleton"></div><div part="skeleton"></div><div part="skeleton"></div>';
+        const entry = entries.find(e => e.id === this.selected);
+        this.shadowRoot.querySelector("#request").textContent = entry ? formatCallHttp(entry, "request") : "Select a call";
+        this.shadowRoot.querySelector("#response").textContent = entry ? formatCallHttp(entry, "response") : "";
+    }
+}
+CallConsole.register();

package/dist/patterns/call-console/controller.d.ts

@@ -0,0 +1,23 @@
+import type { CallConnection, CallEntry, CallEvent } from "./types.js";
+export interface CallConsoleTransport {
+    snapshot(signal: AbortSignal): Promise<CallEntry[]>;
+    subscribe(onEvent: (event: CallEvent) => void, onConnection: (state: CallConnection) => void): () => void;
+    clear(): Promise<void>;
+}
+/** Transport injection keeps networking out of the component. */
+export declare class CallConsoleController {
+    readonly transport: CallConsoleTransport;
+    entries: CallEntry[];
+    connection: CallConnection;
+    private listeners;
+    private abort?;
+    private close?;
+    constructor(transport: CallConsoleTransport);
+    subscribe(fn: () => void): () => void;
+    private emit;
+    apply(event: CallEvent): void;
+    connect(): Promise<void>;
+    clear(): Promise<void>;
+    disconnect(): void;
+    destroy(): void;
+}

package/dist/patterns/call-console/controller.js

@@ -0,0 +1,50 @@
+/** Transport injection keeps networking out of the component. */
+export class CallConsoleController {
+    transport;
+    entries = [];
+    connection = "connecting";
+    listeners = new Set();
+    abort;
+    close;
+    constructor(transport) {
+        this.transport = transport;
+    }
+    subscribe(fn) { this.listeners.add(fn); return () => this.listeners.delete(fn); }
+    emit() { this.listeners.forEach(fn => fn()); }
+    apply(event) {
+        if (event.type === "snapshot")
+            this.entries = event.entries;
+        else if (event.type === "clear")
+            this.entries = [];
+        else
+            this.entries = this.entries.some(e => e.id === event.entry.id) ? this.entries.map(e => e.id === event.entry.id ? event.entry : e) : [event.entry, ...this.entries];
+        this.emit();
+    }
+    async connect() {
+        this.disconnect();
+        const abort = new AbortController();
+        this.abort = abort;
+        this.connection = "connecting";
+        this.emit();
+        try {
+            const entries = await this.transport.snapshot(abort.signal);
+            if (abort.signal.aborted)
+                return;
+            this.apply({ type: "snapshot", entries });
+            this.close = this.transport.subscribe(event => { if (!abort.signal.aborted)
+                this.apply(event); }, state => { if (!abort.signal.aborted) {
+                this.connection = state;
+                this.emit();
+            } });
+        }
+        catch (error) {
+            if (!abort.signal.aborted) {
+                this.connection = error instanceof Error && error.message === "404" ? "unavailable" : "reconnecting";
+                this.emit();
+            }
+        }
+    }
+    async clear() { await this.transport.clear(); this.apply({ type: "clear" }); }
+    disconnect() { this.abort?.abort(); this.close?.(); this.close = undefined; }
+    destroy() { this.disconnect(); this.listeners.clear(); }
+}

package/dist/patterns/call-console/http-transport.d.ts

@@ -0,0 +1,3 @@
+import type { CallConsoleTransport } from "./controller.js";
+/** Optional browser adapter for the documented snapshot/SSE/DELETE contract. */
+export declare function createCallConsoleTransport(base?: string): CallConsoleTransport;

package/dist/patterns/call-console/http-transport.js

@@ -0,0 +1,26 @@
+/** Optional browser adapter for the documented snapshot/SSE/DELETE contract. */
+export function createCallConsoleTransport(base = "/calls") {
+    return {
+        async snapshot(signal) { const response = await fetch(base, { signal }); if (!response.ok)
+            throw new Error(String(response.status)); return await response.json(); },
+        subscribe(onEvent, onConnection) {
+            const events = new EventSource(`${base}/stream`);
+            events.onopen = () => onConnection("live");
+            events.onerror = () => onConnection("reconnecting");
+            for (const type of ["snapshot", "call", "clear"])
+                events.addEventListener(type, event => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        if (data.type === type)
+                            onEvent(data);
+                    }
+                    catch {
+                        onConnection("reconnecting");
+                    }
+                });
+            return () => events.close();
+        },
+        async clear() { const response = await fetch(base, { method: "DELETE" }); if (!response.ok)
+            throw new Error(String(response.status)); },
+    };
+}

package/dist/patterns/call-console/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./controller.js";
+export * from "./http-transport.js";
+export * from "./call-console.js";

package/dist/patterns/call-console/index.js

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./controller.js";
+export * from "./http-transport.js";
+export * from "./call-console.js";

package/dist/patterns/call-console/types.d.ts

@@ -0,0 +1,32 @@
+export interface CallEntry {
+    id: string;
+    startedAt: number;
+    durationMs: number;
+    pending: boolean;
+    service: string;
+    summary: string;
+    method: string;
+    url: string;
+    requestHeaders: Record<string, string>;
+    requestBody?: string;
+    status: number;
+    statusText: string;
+    responseHeaders: Record<string, string>;
+    responseBody?: string;
+    error?: string;
+    expected?: string;
+    rpcError?: string;
+}
+export type CallEvent = {
+    type: "snapshot";
+    entries: CallEntry[];
+} | {
+    type: "call";
+    entry: CallEntry;
+} | {
+    type: "clear";
+};
+export type CallConnection = "connecting" | "live" | "reconnecting" | "unavailable";
+export declare const callFailed: (entry: CallEntry) => boolean;
+export declare const callStatus: (entry: CallEntry) => string;
+export declare const formatCallHttp: (entry: CallEntry, side?: "request" | "response" | "both") => string;

package/dist/patterns/call-console/types.js

@@ -0,0 +1,8 @@
+export const callFailed = (entry) => !entry.pending && Boolean(entry.error || entry.rpcError || (!entry.expected && (entry.status < 200 || entry.status >= 300)));
+export const callStatus = (entry) => entry.pending ? "Pending" : entry.rpcError ? "Tool error" : entry.error ? "Failed" : entry.expected ? "Expected" : callFailed(entry) ? "Failed" : "Done";
+export const formatCallHttp = (entry, side = "both") => {
+    const headers = (h) => Object.entries(h).map(([k, v]) => `${k}: ${v}`).join("\n");
+    const request = `${entry.method} ${entry.url}\n${headers(entry.requestHeaders)}\n\n${entry.requestBody ?? ""}`;
+    const response = `HTTP ${entry.status} ${entry.statusText}\n${headers(entry.responseHeaders)}\n\n${entry.responseBody ?? ""}${entry.rpcError || entry.error ? `\n${entry.rpcError ?? entry.error}` : ""}`;
+    return side === "request" ? request : side === "response" ? response : `${request}\n\n${response}`;
+};

package/dist/patterns/comments/comment-thread.js

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

package/dist/patterns/content-explorer/adapters/action-menu.js

@@ -19,6 +19,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="menu-shell"] {
           position: relative;
           display: inline-grid;

package/dist/patterns/content-explorer/adapters/breadcrumbs.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="breadcrumbs"] {
           display: flex;
           flex-wrap: wrap;

package/dist/patterns/content-explorer/adapters/list.js

@@ -19,6 +19,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="list-shell"] {
           border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 84%, var(--boe-token-surface-surface, #ffffff) 16%);
           border-radius: ${boePanel.radius};

package/dist/patterns/content-explorer/adapters/table.js

@@ -23,6 +23,12 @@ const elementStyles = `
           min-width: 0;
         }
 
+        /* 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="table-shell"] {
           border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 84%, var(--boe-token-surface-surface, #ffffff) 16%);
           border-radius: ${boePanel.radius};

package/dist/patterns/content-explorer/adapters/toolbar.js

@@ -13,6 +13,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: flex;
           flex-wrap: wrap;

package/dist/patterns/content-explorer/content-explorer.js

@@ -30,6 +30,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 {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/content-picker/content-picker.js

@@ -31,6 +31,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 {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/content-sidebar/content-sidebar.js

@@ -25,6 +25,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="sidebar"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/content-uploader/content-uploader.js

@@ -63,6 +63,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};
@@ -722,7 +728,8 @@ export class ContentUploader extends BaseElement {
             </div>
             <box-progress-bar
               part="row-progress"
-              label="${escapeHtml(`${item.name} upload progress`)}"
+              hide-label
+              label="${escapeHtml(item.name)}"
               max="100"
               value="${String(Math.round(item.progress * 100))}"
             ></box-progress-bar>

package/dist/patterns/diff/compare-view.js

@@ -18,6 +18,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;
+        }
+
         /*
          * The height a host sets on the element has to reach the scrollers, or
          * the panes size to their content, never overflow, and the scroll lock

package/dist/patterns/diff/diff-viewer.js

@@ -20,6 +20,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/file-request/file-request-builder.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="builder"] {
           display: grid;
           gap: 0.6rem;

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

@@ -25,6 +25,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="wizard"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/form-wizard/wizard-summary.js

@@ -13,6 +13,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/governance/governance-panel.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="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/insights/bar-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: 0.6rem;

package/dist/patterns/insights/chart-panel.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="panel"] {
           display: grid;
           gap: 0.6rem;