@unofficialbox/box-open-elements 0.4.0 → 0.6.0

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

@@ -0,0 +1,441 @@
+import { formatRunDuration, formatRunSummary, isRunStepRecord, resolveRunSteps, } from "./types.js";
+import { ProgressBar } from "../../components/feedback/progress-bar.js";
+import { BaseElement } from "../../core/index.js";
+import { boePanel } from "../../foundations/geometry/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('"', '\\"');
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+/** Every status in words — colour never carries the meaning alone. */
+export const RUN_STEP_STATUS_LABEL = {
+    pending: "Queued",
+    running: "Running",
+    succeeded: "Succeeded",
+    warning: "Completed with warnings",
+    failed: "Failed",
+    skipped: "Skipped",
+};
+const STATUS_TONE = {
+    pending: "var(--boe-token-text-text-secondary, #6f6f6f)",
+    running: "var(--boe-token-surface-surface-brand, #0061d5)",
+    succeeded: "var(--boe-token-surface-status-surface-success, #26a27b)",
+    warning: "var(--boe-token-surface-status-surface-warning, #f5b31b)",
+    failed: "var(--boe-token-surface-status-surface-error, #ed3757)",
+    skipped: "var(--boe-token-text-text-secondary, #6f6f6f)",
+};
+const elementStyles = `
+        :host {
+          display: block;
+        }
+
+        [part="panel"] {
+          border: ${boePanel.border};
+          border-radius: ${boePanel.radius};
+          background: ${boePanel.background};
+          padding: 0.8rem 1rem;
+        }
+
+        [part="header"] {
+          display: flex;
+          align-items: baseline;
+          gap: 0.6rem;
+          margin-block-end: 0.4rem;
+        }
+
+        [part="heading"] {
+          margin: 0;
+          font: inherit;
+          font-size: 0.95rem;
+          font-weight: 700;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="summary"] {
+          margin-inline-start: auto;
+          font-size: 0.78rem;
+          font-weight: 600;
+          padding: 0.14rem 0.5rem;
+          border-radius: 999px;
+          border: 1px solid transparent;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 80%, transparent);
+        }
+
+        [part="summary"][data-status="completed"] {
+          background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26a27b) 14%, transparent);
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26a27b) 74%, black 26%);
+          border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26a27b) 32%, transparent);
+        }
+
+        [part="summary"][data-status="failed"] {
+          background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 14%, transparent);
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 76%, black 24%);
+          border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 32%, transparent);
+        }
+
+        [part="summary"][data-status="running"] {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent);
+          color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 80%, black 20%);
+          border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 30%, transparent);
+        }
+
+        [part="steps"] {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+
+        /* Marker column + body; the spine hangs off the marker column so the
+           nodes stay aligned at every width — long titles wrap in the body. */
+        [part="step"] {
+          position: relative;
+          display: grid;
+          grid-template-columns: auto 1fr;
+          gap: 0.65rem;
+          padding: 0.55rem 0 0.55rem 0.15rem;
+        }
+
+        [part="step"]:not(:last-child)::after {
+          content: "";
+          position: absolute;
+          left: calc(0.15rem + 0.55rem - 1px);
+          top: 1.9rem;
+          bottom: -0.35rem;
+          width: 2px;
+          background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 72%, transparent);
+        }
+
+        [part="marker"] {
+          inline-size: 1.1rem;
+          block-size: 1.1rem;
+          margin-top: 0.2rem;
+          border-radius: 999px;
+          border: 2px solid var(--run-tone, var(--boe-token-text-text-secondary, #6f6f6f));
+          background: color-mix(in srgb, var(--run-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 14%, var(--boe-token-surface-surface, #ffffff) 86%);
+        }
+
+        [part="step"][data-status="running"] [part="marker"] {
+          background: var(--run-tone, var(--boe-token-surface-surface-brand, #0061d5));
+        }
+
+        [part="step"][data-status="pending"] [part="marker"],
+        [part="step"][data-status="skipped"] [part="marker"] {
+          border-style: dashed;
+          background: transparent;
+        }
+
+        [part="step-body"] {
+          display: grid;
+          gap: 0.25rem;
+          min-inline-size: 0;
+        }
+
+        [part="topline"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.4rem;
+        }
+
+        [part="step-title"] {
+          font-weight: 700;
+          font-size: 0.88rem;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="step"][data-status="pending"] [part="step-title"],
+        [part="step"][data-status="skipped"] [part="step-title"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-weight: 600;
+        }
+
+        [part="status"] {
+          font-size: 0.76rem;
+          font-weight: 700;
+          color: color-mix(in srgb, var(--run-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 78%, black 22%);
+        }
+
+        [part="timestamp"],
+        [part="duration"] {
+          font-size: 0.76rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="duration"] {
+          font-variant-numeric: tabular-nums;
+        }
+
+        [part="toggle"] {
+          appearance: none;
+          border: 0;
+          background: transparent;
+          padding: 0.1rem 0.35rem;
+          border-radius: 4px;
+          font: inherit;
+          font-size: 0.76rem;
+          font-weight: 700;
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+          cursor: pointer;
+        }
+
+        [part="toggle"]:hover {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent);
+        }
+
+        [part="toggle"]:focus-visible {
+          outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+          outline-offset: 1px;
+        }
+
+        [part="detail"] {
+          display: grid;
+          gap: 0.45rem;
+          font-size: 0.82rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          padding: 0.2rem 0 0.1rem;
+        }
+
+        [part="detail"][hidden] {
+          display: none;
+        }
+
+        [part="children"] {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          display: grid;
+          gap: 0.4rem;
+        }
+
+        [part="child"] {
+          display: grid;
+          grid-template-columns: minmax(7rem, auto) 1fr auto;
+          align-items: center;
+          gap: 0.55rem;
+        }
+
+        [part="child-label"] {
+          font-size: 0.8rem;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        /* The row already carries the label and status in words; the bar's
+           own meta line would say it twice in half the space. */
+        [part="child"] box-progress-bar::part(meta) {
+          display: none;
+        }
+
+        [part="child-status"] {
+          font-size: 0.74rem;
+          font-weight: 700;
+          color: color-mix(in srgb, var(--run-tone, var(--boe-token-text-text-secondary, #6f6f6f)) 78%, black 22%);
+        }
+
+        [part="empty"] {
+          padding: 0.8rem 0;
+          text-align: center;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        .boe-sr-only {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          border: 0;
+          clip: rect(0, 0, 0, 0);
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      `;
+/**
+ * Machine execution trace: a job, pipeline, or agent run, top-down. The
+ * rules live in `resolveRunSteps` (pure), the same way `resolveCeremony`
+ * backs the signature card: an explicit status wins, a failure shadows the
+ * queue behind it as skipped, timestamps derive running/succeeded, and the
+ * host can drive its notifications from the identical function.
+ *
+ * Deliberately not `box-timeline` (the human activity feed): a run reads
+ * forward, has one step in flight, and takes no comments.
+ *
+ * The summary chip doubles as a polite status region, so a run driven by
+ * attribute updates announces "Running Deploy — step 3 of 5" → "Completed"
+ * without extra wiring. Per-step detail expands in place: `description`
+ * plus a `detail-<id>` slot for rich host content, plus child tasks with
+ * live `box-progress-bar` rows.
+ */
+export class RunTrace extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["heading", "steps"];
+    }
+    hostEl;
+    stepsRaw = null;
+    stepsCache = [];
+    expandedIds = new Set();
+    get heading() {
+        return this.getAttribute("heading") ?? "Run";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get steps() {
+        const raw = this.getAttribute("steps");
+        if (!raw) {
+            return [...this.stepsCache];
+        }
+        if (raw !== this.stepsRaw) {
+            this.stepsRaw = raw;
+            try {
+                const parsed = JSON.parse(raw);
+                this.stepsCache =
+                    Array.isArray(parsed) && parsed.every(isRunStepRecord) ? parsed : [];
+            }
+            catch {
+                this.stepsCache = [];
+            }
+        }
+        return [...this.stepsCache];
+    }
+    set steps(value) {
+        if (value.length) {
+            this.setAttribute("steps", JSON.stringify(value));
+            return;
+        }
+        // Clear the cache too: the no-attribute branch of the getter serves from
+        // it, and a stale cache would make an emptied run un-clearable.
+        this.stepsCache = [];
+        this.stepsRaw = null;
+        this.removeAttribute("steps");
+    }
+    /** The resolved run — same object the render uses. */
+    get resolution() {
+        return resolveRunSteps(this.steps);
+    }
+    /** Ids of the steps whose detail is expanded (host-readable). */
+    get expandedSteps() {
+        return [...this.expandedIds];
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `<style>${elementStyles}</style><div part="host"></div>`;
+        this.hostEl = this.shadowRoot.querySelector('[part="host"]');
+    }
+    setupListeners() {
+        // Slot-only detail can be appended after render; watch the light DOM so
+        // the step's toggle appears without the host having to touch `steps`.
+        // Shallow, and update() never mutates the light DOM, so this cannot loop.
+        new MutationObserver(() => {
+            this.update();
+        }).observe(this, { childList: true });
+        this.hostEl.addEventListener("click", event => {
+            const toggle = event.target.closest('[part="toggle"]');
+            if (!toggle || !this.hostEl.contains(toggle)) {
+                return;
+            }
+            const stepId = toggle.getAttribute("data-step-id") ?? "";
+            if (!stepId) {
+                return;
+            }
+            const expanded = !this.expandedIds.has(stepId);
+            if (expanded) {
+                this.expandedIds.add(stepId);
+            }
+            else {
+                this.expandedIds.delete(stepId);
+            }
+            this.dispatchEvent(new CustomEvent("step-toggled", {
+                bubbles: true,
+                composed: true,
+                detail: { stepId, expanded },
+            }));
+            this.update();
+        });
+    }
+    childrenMarkup(step) {
+        if (!step.children?.length) {
+            return "";
+        }
+        const rows = step.children
+            .map(child => {
+            const status = child.status ?? "pending";
+            const clamped = child.progress === undefined ? null : Math.max(0, Math.min(100, child.progress));
+            return `
+          <li part="child" style="--run-tone:${STATUS_TONE[status]};">
+            <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>`}
+            <span part="child-status">${RUN_STEP_STATUS_LABEL[status]}</span>
+          </li>
+        `;
+        })
+            .join("");
+        return `<ul part="children">${rows}</ul>`;
+    }
+    update() {
+        if (!this.hostEl) {
+            return;
+        }
+        const resolution = this.resolution;
+        const rows = resolution.steps
+            .map(entry => {
+            const { step, status, position } = entry;
+            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.
+            const hasSlotted = this.querySelector(`[slot="detail-${cssAttrValue(step.id)}"]`) !== null;
+            const hasDetail = Boolean(step.description) || Boolean(step.children?.length) || hasSlotted;
+            const expanded = this.expandedIds.has(step.id);
+            // The detail slot renders even without JSON detail so a host can
+            // project rich content (logs, links) for any step by id.
+            const detail = `
+          <div part="detail" data-step-id="${escapeHtml(step.id)}" ${expanded ? "" : "hidden"}>
+            ${step.description ? `<p part="description">${escapeHtml(step.description)}</p>` : ""}
+            ${this.childrenMarkup(step)}
+            <slot name="detail-${escapeHtml(step.id)}"></slot>
+          </div>
+        `;
+            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>
+            <div part="step-body">
+              <div part="topline">
+                <span part="step-title">${escapeHtml(step.title)}</span>
+                <span part="status">${RUN_STEP_STATUS_LABEL[status]}</span>
+                <span class="boe-sr-only">, step ${String(position)} of ${String(resolution.total)}</span>
+                ${duration ? `<span part="duration">${duration}</span>` : ""}
+                ${hasDetail
+                ? `<button type="button" part="toggle" data-step-id="${escapeHtml(step.id)}" aria-expanded="${String(expanded)}">${expanded ? "Hide details" : "Details"}</button>`
+                : ""}
+              </div>
+              ${detail}
+            </div>
+          </li>
+        `;
+        })
+            .join("");
+        const summary = formatRunSummary(resolution);
+        this.hostEl.innerHTML = `
+      <section part="panel" aria-label="${escapeHtml(this.heading)}">
+        <div part="header">
+          <h3 part="heading">${escapeHtml(this.heading)}</h3>
+          <span part="summary" role="status" data-status="${resolution.status}">${escapeHtml(summary)}</span>
+        </div>
+        ${resolution.total
+            ? `<ol part="steps">${rows}</ol>`
+            : `<div part="empty">No steps yet.</div>`}
+      </section>
+    `;
+    }
+}
+ProgressBar.register();
+RunTrace.register();

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

@@ -0,0 +1,66 @@
+/**
+ * A run is a machine execution trace — a job, pipeline, or agent run —
+ * rendered forward-chronologically. This is deliberately not
+ * `box-timeline`: that surface is an append-only *human* activity feed
+ * (newest first, actors, comments); a run reads top-down, has exactly one
+ * step in flight, and a failure shadows everything queued behind it.
+ */
+export type RunStepStatus = "pending" | "running" | "succeeded" | "warning" | "failed" | "skipped";
+export type RunStatus = "pending" | "running" | "completed" | "failed";
+/** A nested unit of work under a step, with optional live progress. */
+export interface RunChildTask {
+    id: string;
+    label: string;
+    /** 0–100; omit for indeterminate work that only has a status. */
+    progress?: number;
+    status?: RunStepStatus;
+}
+export interface RunStep {
+    id: string;
+    title: string;
+    /** Expandable detail under the title. */
+    description?: string;
+    /**
+     * Explicit status wins. Absent, the status derives from timestamps and
+     * the failure shadow — see `resolveRunSteps`.
+     */
+    status?: RunStepStatus;
+    /** ISO timestamps; duration renders when both are present. */
+    startedAt?: string;
+    finishedAt?: string;
+    children?: RunChildTask[];
+}
+export interface ResolvedRunStep {
+    step: RunStep;
+    status: RunStepStatus;
+    /** 1-based position, for "step 2 of 5" phrasing. */
+    position: number;
+}
+export interface RunResolution {
+    steps: ResolvedRunStep[];
+    status: RunStatus;
+    total: number;
+    /** Steps in a terminal state (succeeded, warning, failed, or skipped). */
+    settled: number;
+}
+/** Attribute payloads are author input — validate every record. */
+export declare const isRunStepRecord: (value: unknown) => value is RunStep;
+/**
+ * The run rules, pure and DOM-free, so a host can drive notifications or a
+ * "retry from here" affordance from the same function the surface renders.
+ *
+ * Per step, in priority order:
+ * 1. An explicit `status` wins.
+ * 2. A failure shadows what is queued behind it: steps after a failed step
+ *    are `skipped` — a dead run must not show work as still coming, the
+ *    same rule `resolveCeremony` applies after a decline.
+ * 3. `finishedAt` ⇒ succeeded; `startedAt` alone ⇒ running; neither ⇒ pending.
+ */
+export declare const resolveRunSteps: (steps: readonly RunStep[]) => RunResolution;
+/** One line a host can put in a toast or heading — same rules as the surface. */
+export declare const formatRunSummary: (resolution: RunResolution) => string;
+/**
+ * "4m 12s"-style duration between two ISO timestamps; empty when either is
+ * missing or unparseable, so callers can simply omit the segment.
+ */
+export declare const formatRunDuration: (startedAt?: string, finishedAt?: string) => string;

package/dist/patterns/run/types.js

@@ -0,0 +1,152 @@
+/**
+ * A run is a machine execution trace — a job, pipeline, or agent run —
+ * rendered forward-chronologically. This is deliberately not
+ * `box-timeline`: that surface is an append-only *human* activity feed
+ * (newest first, actors, comments); a run reads top-down, has exactly one
+ * step in flight, and a failure shadows everything queued behind it.
+ */
+const STEP_STATUSES = new Set([
+    "pending",
+    "running",
+    "succeeded",
+    "warning",
+    "failed",
+    "skipped",
+]);
+/** Attribute payloads are author input — validate every record. */
+export const isRunStepRecord = (value) => {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const step = value;
+    if (typeof step.id !== "string" ||
+        step.id.length === 0 ||
+        typeof step.title !== "string" ||
+        step.title.length === 0) {
+        return false;
+    }
+    if (step.status !== undefined && !STEP_STATUSES.has(step.status)) {
+        return false;
+    }
+    // A non-string description would reach escapeHtml and throw mid-render.
+    if (step.description !== undefined && typeof step.description !== "string") {
+        return false;
+    }
+    if (step.children !== undefined) {
+        if (!Array.isArray(step.children)) {
+            return false;
+        }
+        for (const entry of step.children) {
+            const child = entry;
+            if (typeof child !== "object" ||
+                child === null ||
+                typeof child.id !== "string" ||
+                typeof child.label !== "string" ||
+                (child.progress !== undefined && typeof child.progress !== "number") ||
+                (child.status !== undefined && !STEP_STATUSES.has(child.status))) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
+const TERMINAL = new Set(["succeeded", "warning", "failed", "skipped"]);
+/**
+ * The run rules, pure and DOM-free, so a host can drive notifications or a
+ * "retry from here" affordance from the same function the surface renders.
+ *
+ * Per step, in priority order:
+ * 1. An explicit `status` wins.
+ * 2. A failure shadows what is queued behind it: steps after a failed step
+ *    are `skipped` — a dead run must not show work as still coming, the
+ *    same rule `resolveCeremony` applies after a decline.
+ * 3. `finishedAt` ⇒ succeeded; `startedAt` alone ⇒ running; neither ⇒ pending.
+ */
+export const resolveRunSteps = (steps) => {
+    let failed = false;
+    const resolved = steps.map((step, index) => {
+        let status;
+        if (step.status) {
+            status = step.status;
+        }
+        else if (failed) {
+            status = "skipped";
+        }
+        else if (step.finishedAt) {
+            status = "succeeded";
+        }
+        else if (step.startedAt) {
+            status = "running";
+        }
+        else {
+            status = "pending";
+        }
+        // An explicit failed also shadows what follows; an explicit status on a
+        // later step still overrides the shadow (rule 1 beats rule 2).
+        if (status === "failed") {
+            failed = true;
+        }
+        return { step, status, position: index + 1 };
+    });
+    const settled = resolved.filter(entry => TERMINAL.has(entry.status)).length;
+    const anyRunning = resolved.some(entry => entry.status === "running");
+    const status = failed
+        ? "failed"
+        : anyRunning
+            ? "running"
+            : resolved.length > 0 && settled === resolved.length
+                ? "completed"
+                : settled > 0
+                    ? "running"
+                    : "pending";
+    return { steps: resolved, status, total: resolved.length, settled };
+};
+/** One line a host can put in a toast or heading — same rules as the surface. */
+export const formatRunSummary = (resolution) => {
+    if (resolution.total === 0) {
+        return "No steps";
+    }
+    if (resolution.status === "failed") {
+        const failedStep = resolution.steps.find(entry => entry.status === "failed");
+        return failedStep ? `Failed at ${failedStep.step.title}` : "Failed";
+    }
+    if (resolution.status === "completed") {
+        const warnings = resolution.steps.filter(entry => entry.status === "warning").length;
+        return warnings > 0
+            ? `Completed with ${String(warnings)} warning${warnings === 1 ? "" : "s"}`
+            : "Completed";
+    }
+    if (resolution.status === "running") {
+        const runningStep = resolution.steps.find(entry => entry.status === "running");
+        return runningStep
+            ? `Running ${runningStep.step.title} — step ${String(runningStep.position)} of ${String(resolution.total)}`
+            : `${String(resolution.settled)} of ${String(resolution.total)} steps done`;
+    }
+    return "Not started";
+};
+/**
+ * "4m 12s"-style duration between two ISO timestamps; empty when either is
+ * missing or unparseable, so callers can simply omit the segment.
+ */
+export const formatRunDuration = (startedAt, finishedAt) => {
+    if (!startedAt || !finishedAt) {
+        return "";
+    }
+    const start = Date.parse(startedAt);
+    const finish = Date.parse(finishedAt);
+    if (Number.isNaN(start) || Number.isNaN(finish) || finish < start) {
+        return "";
+    }
+    const totalSeconds = Math.round((finish - start) / 1000);
+    if (totalSeconds < 60) {
+        return `${String(totalSeconds)}s`;
+    }
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (minutes < 60) {
+        return seconds ? `${String(minutes)}m ${String(seconds)}s` : `${String(minutes)}m`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const rest = minutes % 60;
+    return rest ? `${String(hours)}h ${String(rest)}m` : `${String(hours)}h`;
+};

package/dist/patterns/search/filter-bar.d.ts

@@ -3,7 +3,8 @@ type FilterBarOption = {
     label: string;
     value: string;
 };
-export declare class BoxFilterBarElement extends BaseElement {
+export declare class FilterBar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private queryInternal;
     private sortValueInternal;
@@ -46,5 +47,4 @@ export declare class BoxFilterBarElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxFilterBarElement: (tagName?: string) => typeof BoxFilterBarElement;
 export {};