@unofficialbox/box-open-elements 0.3.0 → 0.5.0

package/dist/components/feedback/alert.js

@@ -90,6 +90,22 @@ const alertStyles = `
     display: none;
   }
 
+  /* Rich body — slotted markup (links, buttons) beyond the plain message.
+     Hidden (taking no grid gap) until content is assigned. */
+  [part="rich"] {
+    display: block;
+    line-height: 1.45;
+  }
+
+  [part="rich"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="rich"]::slotted(a) {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font-weight: 600;
+  }
+
   .sr-only {
     position: absolute;
     inline-size: 1px;
@@ -120,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"];
     }
@@ -129,6 +146,7 @@ export class BoxAlertElement extends BaseElement {
     toneLabelEl;
     titleEl;
     messageEl;
+    richSlot;
     dismissEl;
     get open() {
         return this.openValue;
@@ -202,6 +220,7 @@ export class BoxAlertElement extends BaseElement {
           <span part="tone-label" class="sr-only"></span>
           <h2 part="title" id="alert-title" hidden></h2>
           <span part="description message" hidden></span>
+          <slot part="rich"></slot>
         </div>
         <button type="button" part="dismiss" aria-label="Dismiss alert">Dismiss</button>
       </div>
@@ -210,19 +229,30 @@ export class BoxAlertElement extends BaseElement {
         this.toneLabelEl = this.shadowRoot.querySelector('[part="tone-label"]');
         this.titleEl = this.shadowRoot.querySelector('[part="title"]');
         this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
+        this.richSlot = this.shadowRoot.querySelector('slot[part="rich"]');
         this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
     }
+    hasRichContent() {
+        return this.richSlot?.assignedNodes({ flatten: true }).length > 0;
+    }
     setupListeners() {
         this.dismissEl.addEventListener("click", () => {
             this.dismiss();
         });
+        this.richSlot.addEventListener("slotchange", () => {
+            if (this.isRendered) {
+                this.update();
+            }
+        });
     }
     update() {
         if (!this.alertEl) {
             return;
         }
-        const visible = this.openValue && Boolean(this.heading || this.message);
+        const hasRich = this.hasRichContent();
+        const visible = this.openValue && Boolean(this.heading || this.message || hasRich);
         this.hidden = !visible;
+        this.richSlot.classList.toggle("has-content", hasRich);
         if (!visible) {
             return;
         }
@@ -253,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,12 +1,22 @@
 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;
     get label(): string;
     set label(value: string);
     get tone(): string;
     set tone(value: string);
+    /** When the label is a count, cap the displayed number, e.g. max=99 → "99+". */
+    get max(): number | null;
+    set max(value: number | null);
+    /** Hide the badge entirely when the count is zero or the label is empty. */
+    get hideWhenZero(): boolean;
+    set hideWhenZero(value: boolean);
+    /** The label after applying the `max` cap (e.g. "128" with max=99 → "99+"). */
+    private displayText;
+    private isEmptyCount;
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxBadgeElement: (tagName?: string) => typeof BoxBadgeElement;

package/dist/components/feedback/badge.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-badge";
 const badgeStyles = `
   :host {
@@ -52,12 +52,32 @@ const badgeStyles = `
     background: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
     color: #ffffff;
   }
+
+  /* Hidden when used as a count that is zero/empty with hide-when-zero. */
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Count "pop" when the value changes (opt-in via the animate attribute). */
+  [part="badge"].boe-pop {
+    animation: boe-badge-pop ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  @keyframes boe-badge-pop {
+    0% { transform: scale(0.7); }
+    60% { transform: scale(1.15); }
+    100% { transform: scale(1); }
+  }
+
+  ${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"];
+        return ["label", "tone", "max", "hide-when-zero", "animate"];
     }
     badgeEl;
+    lastText = null;
     get label() {
         return this.getAttribute("label") ?? "";
     }
@@ -70,6 +90,42 @@ export class BoxBadgeElement extends BaseElement {
     set tone(value) {
         this.setAttribute("tone", value);
     }
+    /** When the label is a count, cap the displayed number, e.g. max=99 → "99+". */
+    get max() {
+        const raw = this.getAttribute("max");
+        if (raw === null)
+            return null;
+        const parsed = Number(raw);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    set max(value) {
+        if (value === null) {
+            this.removeAttribute("max");
+        }
+        else {
+            this.setAttribute("max", String(value));
+        }
+    }
+    /** Hide the badge entirely when the count is zero or the label is empty. */
+    get hideWhenZero() {
+        return this.hasAttribute("hide-when-zero");
+    }
+    set hideWhenZero(value) {
+        this.toggleAttribute("hide-when-zero", value);
+    }
+    /** The label after applying the `max` cap (e.g. "128" with max=99 → "99+"). */
+    displayText() {
+        const raw = this.label;
+        const max = this.max;
+        if (max !== null && /^\d+$/.test(raw.trim()) && Number(raw) > max) {
+            return `${max}+`;
+        }
+        return raw;
+    }
+    isEmptyCount() {
+        const raw = this.label.trim();
+        return raw === "" || raw === "0";
+    }
     renderTemplate() {
         if (!this.shadowRoot) {
             return;
@@ -84,16 +140,20 @@ export class BoxBadgeElement extends BaseElement {
         if (!this.badgeEl) {
             return;
         }
+        // Hide when used as a count that is zero/empty and hide-when-zero is set.
+        const shouldHide = this.hideWhenZero && this.isEmptyCount();
+        this.toggleAttribute("hidden", shouldHide);
+        const text = this.displayText();
         this.badgeEl.dataset.tone = this.tone;
-        this.badgeEl.setAttribute("aria-label", this.label);
-        this.badgeEl.textContent = this.label;
+        this.badgeEl.setAttribute("aria-label", text);
+        this.badgeEl.textContent = text;
+        // Re-trigger the pop animation when an animated count actually changes.
+        if (this.hasAttribute("animate") && this.lastText !== null && this.lastText !== text) {
+            this.badgeEl.classList.remove("boe-pop");
+            void this.badgeEl.offsetWidth; // force reflow so the animation restarts
+            this.badgeEl.classList.add("boe-pop");
+        }
+        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,11 +4,16 @@ 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;
+    private iconSlot;
     private removeEl;
+    /** Chip size: `medium` (default) or `small`. */
+    get size(): string;
+    set size(value: string);
     get label(): string;
     set label(value: string);
     get value(): string;
@@ -28,6 +33,6 @@ export declare class BoxChipElement extends BaseElement {
     protected renderTemplate(): void;
     protected setupListeners(): void;
     private syncRemoveButton;
+    private syncIconSlot;
     protected update(): void;
 }
-export declare const defineBoxChipElement: (tagName?: string) => typeof BoxChipElement;

package/dist/components/feedback/chip.js

@@ -42,12 +42,59 @@ const chipStyles = `
     background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 70%, var(--boe-token-surface-surface-secondary, #fbfbfb) 30%);
   }
 
-  [part="chip"][data-tone="brand"] {
+  [part="chip"][data-tone="brand"],
+  [part="chip"][data-tone="info"] {
     border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 26%, transparent);
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
     color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 72%, var(--boe-token-text-text, #222222));
   }
 
+  [part="chip"][data-tone="success"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 32%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 60%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="chip"][data-tone="warning"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 40%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 16%, var(--boe-token-surface-surface, #ffffff) 84%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 58%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="chip"][data-tone="error"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 30%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 70%, var(--boe-token-text-text, #222222));
+  }
+
+  /* Compact size. */
+  [part="chip"][data-size="small"] {
+    gap: 0.25rem;
+    padding: 0.14rem 0.28rem 0.14rem 0.55rem;
+    font-size: 0.74rem;
+  }
+
+  [part="chip"][data-size="small"]:not([data-removable="true"]) {
+    padding-inline-end: 0.55rem;
+  }
+
+  /* Leading icon slot — hidden (and taking no gap) until content is assigned. */
+  [part="icon"] {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+  }
+
+  [part="icon"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="icon"]::slotted(*) {
+    inline-size: 0.95rem;
+    block-size: 0.95rem;
+    display: block;
+  }
+
   [part="chip"][data-selected="true"],
   [part="chip"][data-selected="true"]:hover:not([data-disabled="true"]),
   [part="chip"][data-selected="true"]:active:not([data-disabled="true"]) {
@@ -92,13 +139,22 @@ 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", "tone", "value"];
+        return ["disabled", "label", "removable", "selectable", "selected", "size", "tone", "value"];
     }
     chipEl;
     labelEl;
+    iconSlot;
     removeEl = null;
+    /** Chip size: `medium` (default) or `small`. */
+    get size() {
+        return this.getAttribute("size") === "small" ? "small" : "medium";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
     get label() {
         return this.getAttribute("label") ?? "";
     }
@@ -169,13 +225,16 @@ export class BoxChipElement extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${chipStyles}</style>
       <span part="chip">
+        <slot name="icon" part="icon"></slot>
         <span part="label"></span>
       </span>
     `;
         this.chipEl = this.shadowRoot.querySelector('[part="chip"]');
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
     }
     setupListeners() {
+        this.iconSlot.addEventListener("slotchange", () => this.syncIconSlot());
         this.chipEl.addEventListener("click", event => {
             if (event.target.closest('[part="remove"]')) {
                 return;
@@ -217,11 +276,25 @@ export class BoxChipElement extends BaseElement {
             this.removeEl = null;
         }
     }
+    syncIconSlot() {
+        if (!this.iconSlot) {
+            return;
+        }
+        const hasContent = this.iconSlot.assignedNodes({ flatten: true }).length > 0;
+        this.iconSlot.classList.toggle("has-content", hasContent);
+    }
     update() {
         if (!this.chipEl) {
             return;
         }
         this.chipEl.dataset.tone = this.tone;
+        if (this.size === "medium") {
+            this.chipEl.removeAttribute("data-size");
+        }
+        else {
+            this.chipEl.dataset.size = this.size;
+        }
+        this.syncIconSlot();
         this.chipEl.dataset.removable = this.removable ? "true" : "false";
         this.chipEl.dataset.selected = this.selected ? "true" : "false";
         this.chipEl.dataset.disabled = this.disabled ? "true" : "false";
@@ -251,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/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,10 +5,12 @@ 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;
+    private bodySlot;
     private actionEl;
     get heading(): string;
     set heading(value: string);
@@ -19,7 +21,7 @@ export declare class BoxErrorMaskElement extends BaseElement {
     get actionLabel(): string;
     set actionLabel(value: string);
     protected renderTemplate(): void;
+    protected setupListeners(): void;
     private syncActionButton;
     protected update(): void;
 }
-export declare const defineBoxErrorMaskElement: (tagName?: string) => typeof BoxErrorMaskElement;

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

@@ -57,6 +57,17 @@ const errorMaskStyles = `
     display: none;
   }
 
+  /* Optional rich body — slotted markup below the message.
+     Hidden (no column gap) until content is assigned. */
+  [part="body"] {
+    display: block;
+    max-width: 32rem;
+  }
+
+  [part="body"]:not(.has-content) {
+    display: none;
+  }
+
   [part="action"] {
     appearance: none;
     box-sizing: border-box;
@@ -94,12 +105,14 @@ 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"];
     }
     titleEl;
     messageEl;
+    bodySlot;
     actionEl = null;
     get heading() {
         return this.getAttribute("heading") ?? "Something went wrong";
@@ -141,10 +154,19 @@ export class BoxErrorMaskElement extends BaseElement {
         </span>
         <h2 part="title"></h2>
         <span part="message description" hidden></span>
+        <slot part="body"></slot>
       </section>
     `;
         this.titleEl = this.shadowRoot.querySelector('[part="title"]');
         this.messageEl = this.shadowRoot.querySelector('[part~="message"]');
+        this.bodySlot = this.shadowRoot.querySelector('slot[part="body"]');
+    }
+    setupListeners() {
+        this.bodySlot.addEventListener("slotchange", () => {
+            if (this.isRendered) {
+                this.update();
+            }
+        });
     }
     syncActionButton() {
         const section = this.shadowRoot?.querySelector('[part="error-mask"]');
@@ -178,6 +200,8 @@ export class BoxErrorMaskElement extends BaseElement {
             return;
         }
         this.titleEl.textContent = this.heading;
+        const hasBody = this.bodySlot.assignedNodes({ flatten: true }).length > 0;
+        this.bodySlot.classList.toggle("has-content", hasBody);
         if (this.message) {
             this.messageEl.hidden = false;
             this.messageEl.textContent = this.message;
@@ -189,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();
     };
@@ -152,6 +153,13 @@ export class BoxHelpTextElement extends BaseElement {
                 : "info";
         const iconMarkup = resolveDesignIcon(iconName) ?? "i";
         this.helpTextEl.dataset.tone = this.tone;
+        // Error help text is an inline validation error: announce it assertively.
+        if (this.tone === "error") {
+            this.helpTextEl.setAttribute("role", "alert");
+        }
+        else {
+            this.helpTextEl.setAttribute("role", "note");
+        }
         this.helpTextEl.setAttribute("aria-label", this.label || "Help text");
         this.iconEl.setAttribute("data-icon-source", iconMarkup === "i" ? "text" : "design-system");
         this.iconEl.innerHTML = iconMarkup;
@@ -166,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;