@unofficialbox/box-open-elements 0.4.0 → 0.5.0

package/dist/components/forms/rating.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxRatingElement extends FormAssociatedElement {
+export declare class Rating extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private lastMax;
@@ -28,4 +29,3 @@ export declare class BoxRatingElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxRatingElement: (tagName?: string) => typeof BoxRatingElement;

package/dist/components/forms/rating.js

@@ -81,7 +81,8 @@ const ratingStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxRatingElement extends FormAssociatedElement {
+export class Rating extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -292,11 +293,4 @@ export class BoxRatingElement extends FormAssociatedElement {
         this.applyInvalidState(this.controlEl, this.errorEl);
     }
 }
-export const defineBoxRatingElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxRatingElement);
-    return BoxRatingElement;
-};
+Rating.register();

package/dist/components/forms/rich-text-input.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxRichTextInputElement extends FormAssociatedElement {
+export declare class RichTextInput extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private editor;
     private labelElement;
@@ -29,4 +30,3 @@ export declare class BoxRichTextInputElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxRichTextInputElement: (tagName?: string) => typeof BoxRichTextInputElement;

package/dist/components/forms/rich-text-input.js

@@ -193,7 +193,8 @@ const richTextStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxRichTextInputElement extends FormAssociatedElement {
+export class RichTextInput extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -393,11 +394,4 @@ export class BoxRichTextInputElement extends FormAssociatedElement {
         this.applyInvalidState(this.editor, this.errorEl);
     }
 }
-export const defineBoxRichTextInputElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxRichTextInputElement);
-    return BoxRichTextInputElement;
-};
+RichTextInput.register();

package/dist/components/forms/search-field.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxSearchFieldElement extends FormAssociatedElement {
+export declare class SearchField extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     /** Shows a spinner in the submit button while a search runs asynchronously. */
     get loading(): boolean;
@@ -33,4 +34,3 @@ export declare class BoxSearchFieldElement extends FormAssociatedElement {
     private submitSearch;
     protected update(): void;
 }
-export declare const defineBoxSearchFieldElement: (tagName?: string) => typeof BoxSearchFieldElement;

package/dist/components/forms/search-field.js

@@ -141,7 +141,8 @@ const searchFieldStyles = `
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxSearchFieldElement extends FormAssociatedElement {
+export class SearchField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
@@ -330,11 +331,4 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxSearchFieldElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSearchFieldElement);
-    return BoxSearchFieldElement;
-};
+SearchField.register();

package/dist/components/forms/select.d.ts

@@ -6,7 +6,8 @@ type SelectOption = {
     disabled?: boolean;
     group?: string;
 };
-export declare class BoxSelectElement extends FormAssociatedElement {
+export declare class Select extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private valuesInternal;
@@ -37,5 +38,4 @@ export declare class BoxSelectElement extends FormAssociatedElement {
     private optionsMarkup;
     protected update(): void;
 }
-export declare const defineBoxSelectElement: (tagName?: string) => typeof BoxSelectElement;
 export {};

package/dist/components/forms/select.js

@@ -80,7 +80,8 @@ const selectStyles = `
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxSelectElement extends FormAssociatedElement {
+export class Select extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
@@ -283,11 +284,4 @@ export class BoxSelectElement extends FormAssociatedElement {
         this.applyInvalidState(this.selectEl, this.errorEl);
     }
 }
-export const defineBoxSelectElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSelectElement);
-    return BoxSelectElement;
-};
+Select.register();

package/dist/components/forms/slider.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxSliderElement extends FormAssociatedElement {
+export declare class Slider extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
@@ -28,4 +29,3 @@ export declare class BoxSliderElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSliderElement: (tagName?: string) => typeof BoxSliderElement;

package/dist/components/forms/slider.js

@@ -63,7 +63,8 @@ const sliderStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxSliderElement extends FormAssociatedElement {
+export class Slider extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -211,11 +212,4 @@ export class BoxSliderElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxSliderElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSliderElement);
-    return BoxSliderElement;
-};
+Slider.register();

package/dist/components/forms/spin-button.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxSpinButtonElement extends FormAssociatedElement {
+export declare class SpinButton extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
@@ -30,4 +31,3 @@ export declare class BoxSpinButtonElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSpinButtonElement: (tagName?: string) => typeof BoxSpinButtonElement;

package/dist/components/forms/spin-button.js

@@ -123,7 +123,8 @@ const spinButtonStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxSpinButtonElement extends FormAssociatedElement {
+export class SpinButton extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -342,11 +343,4 @@ export class BoxSpinButtonElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxSpinButtonElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSpinButtonElement);
-    return BoxSpinButtonElement;
-};
+SpinButton.register();

package/dist/components/forms/switch.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxSwitchElement extends FormAssociatedElement {
+export declare class Switch extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private checkedInternal;
     private valueInternal;
@@ -29,4 +30,3 @@ export declare class BoxSwitchElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSwitchElement: (tagName?: string) => typeof BoxSwitchElement;

package/dist/components/forms/switch.js

@@ -109,7 +109,8 @@ const switchStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxSwitchElement extends FormAssociatedElement {
+export class Switch extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -292,11 +293,4 @@ export class BoxSwitchElement extends FormAssociatedElement {
         this.applyInvalidState(this.switchEl, this.errorEl);
     }
 }
-export const defineBoxSwitchElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSwitchElement);
-    return BoxSwitchElement;
-};
+Switch.register();

package/dist/components/forms/tag-input.d.ts

@@ -6,7 +6,8 @@ import type { FormValue } from "../../core/index.js";
  * available as the `tags` array property and mirrored to the `value` attribute
  * as a comma-separated list.
  */
-export declare class BoxTagInputElement extends FormAssociatedElement {
+export declare class TagInput extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private tagsInternal;
     private draft;
@@ -43,4 +44,3 @@ export declare class BoxTagInputElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTagInputElement: (tagName?: string) => typeof BoxTagInputElement;

package/dist/components/forms/tag-input.js

@@ -145,7 +145,8 @@ const tagInputStyles = `
  * available as the `tags` array property and mirrored to the `value` attribute
  * as a comma-separated list.
  */
-export class BoxTagInputElement extends FormAssociatedElement {
+export class TagInput extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -410,11 +411,4 @@ export class BoxTagInputElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxTagInputElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTagInputElement);
-    return BoxTagInputElement;
-};
+TagInput.register();

package/dist/components/forms/text-area.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxTextAreaElement extends FormAssociatedElement {
+export declare class TextArea extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private textareaEl;
@@ -23,4 +24,3 @@ export declare class BoxTextAreaElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTextAreaElement: (tagName?: string) => typeof BoxTextAreaElement;

package/dist/components/forms/text-area.js

@@ -59,7 +59,8 @@ const textAreaStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxTextAreaElement extends FormAssociatedElement {
+export class TextArea extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -178,11 +179,4 @@ export class BoxTextAreaElement extends FormAssociatedElement {
         this.applyInvalidState(this.textareaEl, this.errorEl);
     }
 }
-export const defineBoxTextAreaElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTextAreaElement);
-    return BoxTextAreaElement;
-};
+TextArea.register();

package/dist/components/forms/text-field.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxTextFieldElement extends FormAssociatedElement {
+export declare class TextField extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
@@ -35,4 +36,3 @@ export declare class BoxTextFieldElement extends FormAssociatedElement {
     private syncIconSlot;
     protected update(): void;
 }
-export declare const defineBoxTextFieldElement: (tagName?: string) => typeof BoxTextFieldElement;

package/dist/components/forms/text-field.js

@@ -112,7 +112,8 @@ const textFieldStyles = `
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxTextFieldElement extends FormAssociatedElement {
+export class TextField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
@@ -282,11 +283,4 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxTextFieldElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTextFieldElement);
-    return BoxTextFieldElement;
-};
+TextField.register();

package/dist/components/forms/time-field.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxTimeFieldElement extends FormAssociatedElement {
+export declare class TimeField extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
@@ -37,4 +38,3 @@ export declare class BoxTimeFieldElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTimeFieldElement: (tagName?: string) => typeof BoxTimeFieldElement;

package/dist/components/forms/time-field.js

@@ -54,7 +54,8 @@ const timeFieldStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxTimeFieldElement extends FormAssociatedElement {
+export class TimeField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -168,7 +169,7 @@ export class BoxTimeFieldElement extends FormAssociatedElement {
      * returns true; on a parse failure emits `parse-error` and returns false.
      */
     setTimeString(value) {
-        const parsed = BoxTimeFieldElement.parseTime(value);
+        const parsed = TimeField.parseTime(value);
         if (parsed === null) {
             this.dispatchEvent(new CustomEvent("parse-error", {
                 bubbles: true,
@@ -244,11 +245,4 @@ export class BoxTimeFieldElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxTimeFieldElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTimeFieldElement);
-    return BoxTimeFieldElement;
-};
+TimeField.register();

package/dist/components/identity/avatar.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxAvatarElement extends BaseElement {
+export declare class Avatar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private avatarEl;
     /** Corner indicator: `""`/`none` (default), `online`, or `external`. */
@@ -22,4 +23,3 @@ export declare class BoxAvatarElement extends BaseElement {
     private syncBadge;
     private showAvatarFallback;
 }
-export declare const defineBoxAvatarElement: (tagName?: string) => typeof BoxAvatarElement;

package/dist/components/identity/avatar.js

@@ -106,7 +106,8 @@ const avatarStyles = `
     fill: currentColor;
   }
 `;
-export class BoxAvatarElement extends BaseElement {
+export class Avatar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["alt", "badge", "initials", "name", "size", "src", "tone"];
     }
@@ -245,11 +246,4 @@ export class BoxAvatarElement extends BaseElement {
         }
     }
 }
-export const defineBoxAvatarElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxAvatarElement);
-    return BoxAvatarElement;
-};
+Avatar.register();

package/dist/components/identity/contact-datalist-item.d.ts

@@ -5,7 +5,8 @@ import { BaseElement } from "../../core/index.js";
  * `role="option"` that emits `select` with its `value` on click or Enter/Space
  * and reflects `selected` to `aria-selected`; the host owns the list.
  */
-export declare class BoxContactDatalistItemElement extends BaseElement {
+export declare class ContactDatalistItem extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private itemEl;
     private avatarEl;
@@ -36,4 +37,3 @@ export declare class BoxContactDatalistItemElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxContactDatalistItemElement: (tagName?: string) => typeof BoxContactDatalistItemElement;

package/dist/components/identity/contact-datalist-item.js

@@ -133,7 +133,8 @@ const contactStyles = `
  * `role="option"` that emits `select` with its `value` on click or Enter/Space
  * and reflects `selected` to `aria-selected`; the host owns the list.
  */
-export class BoxContactDatalistItemElement extends BaseElement {
+export class ContactDatalistItem extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["disabled", "email", "external", "name", "selected", "src", "subtitle", "value"];
     }
@@ -294,11 +295,4 @@ export class BoxContactDatalistItemElement extends BaseElement {
         this.subtitleEl.textContent = subtitle;
     }
 }
-export const defineBoxContactDatalistItemElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxContactDatalistItemElement);
-    return BoxContactDatalistItemElement;
-};
+ContactDatalistItem.register();

package/dist/components/identity/persona.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxPersonaElement extends BaseElement {
+export declare class Persona extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private avatarEl;
     private nameEl;
@@ -25,4 +26,3 @@ export declare class BoxPersonaElement extends BaseElement {
     protected update(): void;
     private showAvatarFallback;
 }
-export declare const defineBoxPersonaElement: (tagName?: string) => typeof BoxPersonaElement;

package/dist/components/identity/persona.js

@@ -120,7 +120,8 @@ const personaStyles = `
     color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 58%, var(--boe-token-text-text, #222222) 42%);
   }
 `;
-export class BoxPersonaElement extends BaseElement {
+export class Persona extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "initials", "name", "size", "src", "status", "subtitle", "tone"];
     }
@@ -262,11 +263,4 @@ export class BoxPersonaElement extends BaseElement {
         }
     }
 }
-export const defineBoxPersonaElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxPersonaElement);
-    return BoxPersonaElement;
-};
+Persona.register();

package/dist/components/layout/app-shell.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxAppShellElement extends BaseElement {
+export declare class AppShell extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private shellEl;
     private titleEl;
@@ -23,4 +24,3 @@ export declare class BoxAppShellElement extends BaseElement {
     private syncLandmarkVisibility;
     protected update(): void;
 }
-export declare const defineBoxAppShellElement: (tagName?: string) => typeof BoxAppShellElement;

package/dist/components/layout/app-shell.js

@@ -134,7 +134,8 @@ const appShellStyles = `
     }
   }
 `;
-export class BoxAppShellElement extends BaseElement {
+export class AppShell extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["heading", "nav-label", "aside-label"];
     }
@@ -248,11 +249,4 @@ export class BoxAppShellElement extends BaseElement {
         this.syncLandmarkVisibility();
     }
 }
-export const defineBoxAppShellElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxAppShellElement);
-    return BoxAppShellElement;
-};
+AppShell.register();

package/dist/components/layout/divider.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxDividerElement extends BaseElement {
+export declare class Divider extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private dividerEl;
     get label(): string;
@@ -9,4 +10,3 @@ export declare class BoxDividerElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxDividerElement: (tagName?: string) => typeof BoxDividerElement;

package/dist/components/layout/divider.js

@@ -59,7 +59,8 @@ const dividerStyles = `
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 `;
-export class BoxDividerElement extends BaseElement {
+export class Divider extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "orientation"];
     }
@@ -109,11 +110,4 @@ export class BoxDividerElement extends BaseElement {
         }
     }
 }
-export const defineBoxDividerElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDividerElement);
-    return BoxDividerElement;
-};
+Divider.register();

package/dist/components/layout/nav-sidebar.d.ts

@@ -10,7 +10,8 @@ import { BaseElement } from "../../core/index.js";
  * `[data-nav-label]` span. Host exposes `--boe-nav-label-display` (`none` when
  * collapsed) so light-DOM CSS can hide labels without piercing the shadow tree.
  */
-export declare class BoxNavSidebarElement extends BaseElement {
+export declare class NavSidebar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private sidebarEl;
     get collapsed(): boolean;
@@ -20,4 +21,3 @@ export declare class BoxNavSidebarElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxNavSidebarElement: (tagName?: string) => typeof BoxNavSidebarElement;