@unofficialbox/box-open-elements 0.4.0 → 0.6.0

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxAlertElement extends BaseElement {
+export declare class Alert extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private alertEl;
@@ -26,4 +27,3 @@ export declare class BoxAlertElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxAlertElement: (tagName?: string) => typeof BoxAlertElement;

package/dist/components/feedback/alert.js

@@ -136,7 +136,8 @@ const alertStyles = `
 
   ${boeNeutralInteractiveStyles('[part="dismiss"]')}
 `;
-export class BoxAlertElement extends BaseElement {
+export class Alert extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "heading", "message", "open", "tone"];
     }
@@ -282,11 +283,4 @@ export class BoxAlertElement extends BaseElement {
         }
     }
 }
-export const defineBoxAlertElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxAlertElement);
-    return BoxAlertElement;
-};
+Alert.register();

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxBadgeElement extends BaseElement {
+export declare class Badge extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private badgeEl;
     private lastText;
@@ -19,4 +20,3 @@ export declare class BoxBadgeElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxBadgeElement: (tagName?: string) => typeof BoxBadgeElement;

package/dist/components/feedback/badge.js

@@ -71,7 +71,8 @@ const badgeStyles = `
 
   ${boeReducedMotionStyles('[part="badge"].boe-pop', "animation: none;")}
 `;
-export class BoxBadgeElement extends BaseElement {
+export class Badge extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "tone", "max", "hide-when-zero", "animate"];
     }
@@ -155,11 +156,4 @@ export class BoxBadgeElement extends BaseElement {
         this.lastText = text;
     }
 }
-export const defineBoxBadgeElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxBadgeElement);
-    return BoxBadgeElement;
-};
+Badge.register();

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

@@ -5,10 +5,10 @@ import { BaseElement } from "../../core/index.js";
  * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
  * with no assigned content are hidden so they don't capture pointer events.
  */
-export declare class BoxBadgeableElement extends BaseElement {
+export declare class Badgeable extends BaseElement {
+    static readonly tagName: string;
     private corners;
     protected renderTemplate(): void;
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxBadgeableElement: (tagName?: string) => typeof BoxBadgeableElement;

package/dist/components/feedback/badgeable.js

@@ -41,7 +41,8 @@ const badgeableStyles = `
  * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
  * with no assigned content are hidden so they don't capture pointer events.
  */
-export class BoxBadgeableElement extends BaseElement {
+export class Badgeable extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     corners = new Map();
     renderTemplate() {
         if (!this.shadowRoot) {
@@ -74,11 +75,4 @@ export class BoxBadgeableElement extends BaseElement {
         }
     }
 }
-export const defineBoxBadgeableElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxBadgeableElement);
-    return BoxBadgeableElement;
-};
+Badgeable.register();

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

@@ -4,7 +4,8 @@ import { BaseElement } from "../../core/index.js";
  * is interactive: it can be selected and it can be dismissed, emitting `remove`
  * with its `value` so a host list can drop it.
  */
-export declare class BoxChipElement extends BaseElement {
+export declare class Chip extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private chipEl;
     private labelEl;
@@ -35,4 +36,3 @@ export declare class BoxChipElement extends BaseElement {
     private syncIconSlot;
     protected update(): void;
 }
-export declare const defineBoxChipElement: (tagName?: string) => typeof BoxChipElement;

package/dist/components/feedback/chip.js

@@ -139,7 +139,8 @@ const chipStyles = `
  * is interactive: it can be selected and it can be dismissed, emitting `remove`
  * with its `value` so a host list can drop it.
  */
-export class BoxChipElement extends BaseElement {
+export class Chip extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["disabled", "label", "removable", "selectable", "selected", "size", "tone", "value"];
     }
@@ -323,11 +324,4 @@ export class BoxChipElement extends BaseElement {
         this.syncRemoveButton();
     }
 }
-export const defineBoxChipElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxChipElement);
-    return BoxChipElement;
-};
+Chip.register();

package/dist/components/feedback/due-badge.d.ts

@@ -0,0 +1,38 @@
+import type { DueBucket } from "./due-types.js";
+import { BaseElement } from "../../core/index.js";
+/**
+ * SLA / aging urgency for a due date — the badge the work-queue rows and
+ * record headers were specified to share.
+ *
+ * The label states the urgency in words ("Overdue by 3 days"), so colour is
+ * never the only signal, and the day count answers the question a due badge
+ * exists for: *how late is this?* A bare date makes the reader do that
+ * arithmetic themselves.
+ *
+ * `reference-time` pins "now" so rendering is deterministic — the same
+ * inputs always produce the same badge, in tests and in screenshots.
+ */
+export declare class DueBadge extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private badgeEl;
+    private textEl;
+    /** ISO timestamp the badge describes. Absent renders the no-due-date state. */
+    get dueAt(): string;
+    set dueAt(value: string);
+    /** Overrides the derived wording; the bucket still drives the tone. */
+    get label(): string;
+    set label(value: string);
+    get compact(): boolean;
+    set compact(value: boolean);
+    get referenceTime(): string;
+    set referenceTime(value: string);
+    private now;
+    /** The urgency bucket currently rendered. */
+    get bucket(): DueBucket;
+    /** The rendered wording, derived unless `label` overrides it. */
+    get resolvedLabel(): string;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

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

@@ -0,0 +1,168 @@
+import { DUE_BUCKET_LABELS, formatDueLabel, resolveDueBucket } from "./due-types.js";
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-due-badge";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: inline-block;
+        }
+
+        [part="badge"] {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.28rem;
+          padding: 0.14rem 0.45rem;
+          border-radius: 999px;
+          border: 1px solid transparent;
+          font-size: 0.74rem;
+          font-weight: 600;
+          white-space: nowrap;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 80%, transparent);
+        }
+
+        [part="badge"][data-bucket="overdue"] {
+          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="badge"][data-bucket="today"] {
+          background: color-mix(in srgb, var(--boe-token-surface-status-surface-warning, #f5b31b) 18%, transparent);
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-warning, #f5b31b) 46%, black 54%);
+          border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-warning, #f5b31b) 38%, transparent);
+        }
+
+        [part="badge"][data-bucket="this-week"] {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, transparent);
+          color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 78%, black 22%);
+          border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 26%, transparent);
+        }
+
+        [part="marker"] {
+          inline-size: 0.42rem;
+          block-size: 0.42rem;
+          border-radius: 999px;
+          background: currentColor;
+        }
+
+        /* Tone is never the only signal: the label always states the urgency
+           in words, so the dot is decoration and stays out of the a11y tree. */
+        [part="badge"][data-bucket="later"] [part="marker"],
+        [part="badge"][data-bucket="none"] [part="marker"] {
+          background: color-mix(in srgb, currentColor 45%, transparent);
+        }
+
+        [part="badge"][data-compact="true"] {
+          padding: 0.1rem 0.35rem;
+          font-size: 0.7rem;
+        }
+      `;
+/**
+ * SLA / aging urgency for a due date — the badge the work-queue rows and
+ * record headers were specified to share.
+ *
+ * The label states the urgency in words ("Overdue by 3 days"), so colour is
+ * never the only signal, and the day count answers the question a due badge
+ * exists for: *how late is this?* A bare date makes the reader do that
+ * arithmetic themselves.
+ *
+ * `reference-time` pins "now" so rendering is deterministic — the same
+ * inputs always produce the same badge, in tests and in screenshots.
+ */
+export class DueBadge extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["compact", "due-at", "label", "reference-time"];
+    }
+    badgeEl;
+    textEl;
+    /** ISO timestamp the badge describes. Absent renders the no-due-date state. */
+    get dueAt() {
+        return this.getAttribute("due-at") ?? "";
+    }
+    set dueAt(value) {
+        this.setAttribute("due-at", value);
+    }
+    /** Overrides the derived wording; the bucket still drives the tone. */
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get compact() {
+        return this.hasAttribute("compact");
+    }
+    set compact(value) {
+        this.toggleAttribute("compact", value);
+    }
+    get referenceTime() {
+        return this.getAttribute("reference-time") ?? "";
+    }
+    set referenceTime(value) {
+        this.setAttribute("reference-time", value);
+    }
+    now() {
+        const raw = this.referenceTime;
+        if (raw) {
+            const parsed = new Date(raw);
+            if (!Number.isNaN(parsed.getTime())) {
+                return parsed;
+            }
+        }
+        return new Date();
+    }
+    /** The urgency bucket currently rendered. */
+    get bucket() {
+        return resolveDueBucket(this.dueAt || undefined, this.now());
+    }
+    /** The rendered wording, derived unless `label` overrides it. */
+    get resolvedLabel() {
+        return this.label || formatDueLabel(this.dueAt || undefined, this.now());
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <span part="badge">
+        <span part="marker" aria-hidden="true"></span>
+        <span part="text"></span>
+      </span>
+    `;
+        this.badgeEl = this.shadowRoot.querySelector('[part="badge"]');
+        this.textEl = this.shadowRoot.querySelector('[part="text"]');
+    }
+    setupListeners() {
+        // Presentational: no interaction to wire.
+    }
+    update() {
+        if (!this.badgeEl) {
+            return;
+        }
+        const bucket = this.bucket;
+        const label = this.resolvedLabel;
+        this.badgeEl.setAttribute("data-bucket", bucket);
+        this.badgeEl.setAttribute("data-compact", String(this.compact));
+        this.textEl.textContent = label;
+        // A machine-readable date for anything consuming the DOM, and a title so
+        // the exact timestamp stays reachable when the label is relative.
+        if (this.dueAt && bucket !== "none") {
+            this.badgeEl.setAttribute("title", this.dueAt);
+            this.setAttribute("datetime", this.dueAt);
+        }
+        else {
+            this.badgeEl.removeAttribute("title");
+            this.removeAttribute("datetime");
+        }
+        this.badgeEl.setAttribute("aria-label", bucket === "none" ? escapeHtml(DUE_BUCKET_LABELS.none) : escapeHtml(label));
+    }
+}
+DueBadge.register();

package/dist/components/feedback/due-types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * SLA / aging urgency model, shared by `box-due-badge` and the work-queue
+ * pattern. Pure and timezone-independent.
+ *
+ * This lives with the component rather than the pattern because patterns
+ * compose components, not the other way round. `patterns/work-queue/types`
+ * re-exports it, so its public import path is unchanged.
+ */
+/** Urgency buckets, most urgent first. */
+export type DueBucket = "overdue" | "today" | "this-week" | "later" | "none";
+export declare const DUE_BUCKET_ORDER: readonly DueBucket[];
+export declare const DUE_BUCKET_LABELS: Record<DueBucket, string>;
+/**
+ * Bucket a due timestamp relative to `now`. Pure and timezone-independent:
+ * callers supply the reference time and day boundaries resolve against the
+ * reference time's UTC day, so the same inputs bucket identically on every
+ * host. A host that wants local-day semantics offsets the reference time it
+ * passes.
+ */
+export declare const resolveDueBucket: (dueAt: string | undefined, now: Date) => DueBucket;
+/**
+ * Whole days between `dueAt` and `now`, negative when overdue. Measured
+ * between UTC day boundaries rather than by elapsed milliseconds, so
+ * "tomorrow" is 1 whether it is 23 hours away or 25.
+ */
+export declare const daysUntilDue: (dueAt: string | undefined, now: Date) => number | null;
+/**
+ * Human phrasing for a due date: "Overdue by 3 days", "Due today",
+ * "Due tomorrow", "Due in 5 days". Aging is stated in days rather than as a
+ * bare date because an SLA badge exists to answer "how late is this?".
+ */
+export declare const formatDueLabel: (dueAt: string | undefined, now: Date) => string;

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

@@ -0,0 +1,91 @@
+/**
+ * SLA / aging urgency model, shared by `box-due-badge` and the work-queue
+ * pattern. Pure and timezone-independent.
+ *
+ * This lives with the component rather than the pattern because patterns
+ * compose components, not the other way round. `patterns/work-queue/types`
+ * re-exports it, so its public import path is unchanged.
+ */
+export const DUE_BUCKET_ORDER = [
+    "overdue",
+    "today",
+    "this-week",
+    "later",
+    "none",
+];
+export const DUE_BUCKET_LABELS = {
+    overdue: "Overdue",
+    today: "Due today",
+    "this-week": "Due this week",
+    later: "Later",
+    none: "No due date",
+};
+const DAY_MS = 24 * 60 * 60 * 1000;
+/**
+ * Bucket a due timestamp relative to `now`. Pure and timezone-independent:
+ * callers supply the reference time and day boundaries resolve against the
+ * reference time's UTC day, so the same inputs bucket identically on every
+ * host. A host that wants local-day semantics offsets the reference time it
+ * passes.
+ */
+export const resolveDueBucket = (dueAt, now) => {
+    if (!dueAt) {
+        return "none";
+    }
+    const due = new Date(dueAt);
+    if (Number.isNaN(due.getTime())) {
+        return "none";
+    }
+    if (due.getTime() < now.getTime()) {
+        return "overdue";
+    }
+    const endOfToday = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() + 1) - 1;
+    if (due.getTime() <= endOfToday) {
+        return "today";
+    }
+    if (due.getTime() <= endOfToday + 6 * DAY_MS) {
+        return "this-week";
+    }
+    return "later";
+};
+/**
+ * Whole days between `dueAt` and `now`, negative when overdue. Measured
+ * between UTC day boundaries rather than by elapsed milliseconds, so
+ * "tomorrow" is 1 whether it is 23 hours away or 25.
+ */
+export const daysUntilDue = (dueAt, now) => {
+    if (!dueAt) {
+        return null;
+    }
+    const due = new Date(dueAt);
+    if (Number.isNaN(due.getTime())) {
+        return null;
+    }
+    const dueDay = Date.UTC(due.getUTCFullYear(), due.getUTCMonth(), due.getUTCDate());
+    const nowDay = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+    return Math.round((dueDay - nowDay) / DAY_MS);
+};
+/**
+ * Human phrasing for a due date: "Overdue by 3 days", "Due today",
+ * "Due tomorrow", "Due in 5 days". Aging is stated in days rather than as a
+ * bare date because an SLA badge exists to answer "how late is this?".
+ */
+export const formatDueLabel = (dueAt, now) => {
+    const days = daysUntilDue(dueAt, now);
+    if (days === null) {
+        return DUE_BUCKET_LABELS.none;
+    }
+    if (days < 0) {
+        const overdue = Math.abs(days);
+        return `Overdue by ${String(overdue)} ${overdue === 1 ? "day" : "days"}`;
+    }
+    if (days === 0) {
+        // A same-day deadline that has already passed is overdue by hours, not
+        // days — the bucket knows, the day count does not.
+        return resolveDueBucket(dueAt, now) === "overdue" ? "Overdue" : "Due today";
+    }
+    if (days === 1) {
+        return "Due tomorrow";
+    }
+    return `Due in ${String(days)} days`;
+};

package/dist/components/feedback/empty-state.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxEmptyStateElement extends BaseElement {
+export declare class EmptyState extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private titleEl;
     private messageEl;
@@ -16,4 +17,3 @@ export declare class BoxEmptyStateElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxEmptyStateElement: (tagName?: string) => typeof BoxEmptyStateElement;

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

@@ -55,7 +55,8 @@ const emptyStateStyles = `
     display: none;
   }
 `;
-export class BoxEmptyStateElement extends BaseElement {
+export class EmptyState extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["action-label", "description", "heading", "message"];
     }
@@ -127,11 +128,4 @@ export class BoxEmptyStateElement extends BaseElement {
         }
     }
 }
-export const defineBoxEmptyStateElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxEmptyStateElement);
-    return BoxEmptyStateElement;
-};
+EmptyState.register();

package/dist/components/feedback/error-mask.d.ts

@@ -5,7 +5,8 @@ import { BaseElement } from "../../core/index.js";
  * assertively via `role="alert"` and offers an optional retry action that emits
  * a `retry` event; the host owns the actual reload.
  */
-export declare class BoxErrorMaskElement extends BaseElement {
+export declare class ErrorMask extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private titleEl;
     private messageEl;
@@ -24,4 +25,3 @@ export declare class BoxErrorMaskElement extends BaseElement {
     private syncActionButton;
     protected update(): void;
 }
-export declare const defineBoxErrorMaskElement: (tagName?: string) => typeof BoxErrorMaskElement;

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

@@ -105,7 +105,8 @@ const errorMaskStyles = `
  * assertively via `role="alert"` and offers an optional retry action that emits
  * a `retry` event; the host owns the actual reload.
  */
-export class BoxErrorMaskElement extends BaseElement {
+export class ErrorMask extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["action-label", "description", "heading", "message"];
     }
@@ -212,11 +213,4 @@ export class BoxErrorMaskElement extends BaseElement {
         this.syncActionButton();
     }
 }
-export const defineBoxErrorMaskElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxErrorMaskElement);
-    return BoxErrorMaskElement;
-};
+ErrorMask.register();

package/dist/components/feedback/help-text.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxHelpTextElement extends BaseElement {
+export declare class HelpText extends BaseElement {
+    static readonly tagName: string;
     private readonly handleDesignSystemChange;
     static get observedAttributes(): string[];
     private helpTextEl;
@@ -19,4 +20,3 @@ export declare class BoxHelpTextElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxHelpTextElement: (tagName?: string) => typeof BoxHelpTextElement;

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

@@ -80,7 +80,8 @@ const helpTextStyles = `
     display: none;
   }
 `;
-export class BoxHelpTextElement extends BaseElement {
+export class HelpText extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     handleDesignSystemChange = () => {
         this.update();
     };
@@ -173,11 +174,4 @@ export class BoxHelpTextElement extends BaseElement {
         this.messageEl.textContent = this.message;
     }
 }
-export const defineBoxHelpTextElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxHelpTextElement);
-    return BoxHelpTextElement;
-};
+HelpText.register();

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

@@ -5,7 +5,8 @@ import { BaseElement } from "../../core/index.js";
  * (emits `action`) and can be dismissed (emits `dismiss` and hides). Announced
  * politely via `role="status"`; the host decides what the action does.
  */
-export declare class BoxNudgeElement extends BaseElement {
+export declare class Nudge extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private hostEl;
@@ -29,4 +30,3 @@ export declare class BoxNudgeElement extends BaseElement {
     private syncActionButton;
     protected update(): void;
 }
-export declare const defineBoxNudgeElement: (tagName?: string) => typeof BoxNudgeElement;

package/dist/components/feedback/nudge.js

@@ -116,7 +116,8 @@ const nudgeStyles = `
  * (emits `action`) and can be dismissed (emits `dismiss` and hides). Announced
  * politely via `role="status"`; the host decides what the action does.
  */
-export class BoxNudgeElement extends BaseElement {
+export class Nudge extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["action-label", "heading", "message", "open"];
     }
@@ -289,11 +290,4 @@ export class BoxNudgeElement extends BaseElement {
         this.syncActionButton();
     }
 }
-export const defineBoxNudgeElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxNudgeElement);
-    return BoxNudgeElement;
-};
+Nudge.register();

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxProgressBarElement extends BaseElement {
+export declare class ProgressBar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private progressEl;
     private labelEl;
@@ -15,4 +16,3 @@ export declare class BoxProgressBarElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxProgressBarElement: (tagName?: string) => typeof BoxProgressBarElement;