@unofficialbox/box-open-elements 0.4.0 → 0.5.0

package/dist/components/files/drop-zone.js

@@ -70,7 +70,8 @@ const dropZoneStyles = `
     max-width: 34ch;
   }
 `;
-export class BoxDropZoneElement extends BaseElement {
+export class DropZone extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "label", "message"];
     }
@@ -159,11 +160,4 @@ export class BoxDropZoneElement extends BaseElement {
         this.messageEl.textContent = this.message;
     }
 }
-export const defineBoxDropZoneElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDropZoneElement);
-    return BoxDropZoneElement;
-};
+DropZone.register();

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxCalendarElement extends BaseElement {
+export declare class Calendar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     /** The date the roving tabindex currently points at. */
     private activeDate;
@@ -44,4 +45,3 @@ export declare class BoxCalendarElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxCalendarElement: (tagName?: string) => typeof BoxCalendarElement;

package/dist/components/forms/calendar.js

@@ -182,7 +182,8 @@ const calendarStyles = `
     cursor: not-allowed;
   }
 `;
-export class BoxCalendarElement extends BaseElement {
+export class Calendar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["disabled", "max", "min", "month", "today", "value"];
     }
@@ -489,11 +490,4 @@ export class BoxCalendarElement extends BaseElement {
     `;
     }
 }
-export const defineBoxCalendarElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxCalendarElement);
-    return BoxCalendarElement;
-};
+Calendar.register();

package/dist/components/forms/category-selector.d.ts

@@ -11,7 +11,8 @@ type CategoryOption = {
  * `value` and announced with `value-changed`. Follows the radiogroup keyboard
  * pattern: arrow keys move selection with roving `tabindex`.
  */
-export declare class BoxCategorySelectorElement extends BaseElement {
+export declare class CategorySelector extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private lastOptionsJson;
@@ -42,5 +43,4 @@ export declare class BoxCategorySelectorElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxCategorySelectorElement: (tagName?: string) => typeof BoxCategorySelectorElement;
 export {};

package/dist/components/forms/category-selector.js

@@ -114,7 +114,8 @@ const categorySelectorStyles = `
  * `value` and announced with `value-changed`. Follows the radiogroup keyboard
  * pattern: arrow keys move selection with roving `tabindex`.
  */
-export class BoxCategorySelectorElement extends BaseElement {
+export class CategorySelector extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "options", "value", "max-links"];
     }
@@ -453,11 +454,4 @@ export class BoxCategorySelectorElement extends BaseElement {
         }
     }
 }
-export const defineBoxCategorySelectorElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxCategorySelectorElement);
-    return BoxCategorySelectorElement;
-};
+CategorySelector.register();

package/dist/components/forms/checkbox-group.d.ts

@@ -5,7 +5,8 @@ type CheckboxGroupOption = {
     label: string;
     value: string;
 };
-export declare class BoxCheckboxGroupElement extends FormAssociatedElement {
+export declare class CheckboxGroup extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private lastOptionsJson;
@@ -27,5 +28,4 @@ export declare class BoxCheckboxGroupElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxCheckboxGroupElement: (tagName?: string) => typeof BoxCheckboxGroupElement;
 export {};

package/dist/components/forms/checkbox-group.js

@@ -96,7 +96,8 @@ const checkboxGroupStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxCheckboxGroupElement extends FormAssociatedElement {
+export class CheckboxGroup extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -257,11 +258,4 @@ export class BoxCheckboxGroupElement extends FormAssociatedElement {
         this.applyInvalidStateToControls(Array.from(this.optionsContainerEl.querySelectorAll('[part="input"]')), this.errorEl);
     }
 }
-export const defineBoxCheckboxGroupElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxCheckboxGroupElement);
-    return BoxCheckboxGroupElement;
-};
+CheckboxGroup.register();

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

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

package/dist/components/forms/checkbox.js

@@ -81,7 +81,8 @@ const checkboxStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxCheckboxElement extends FormAssociatedElement {
+export class Checkbox extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -297,11 +298,4 @@ export class BoxCheckboxElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxCheckboxElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxCheckboxElement);
-    return BoxCheckboxElement;
-};
+Checkbox.register();

package/dist/components/forms/color-picker.d.ts

@@ -4,7 +4,8 @@ type BoxColorSwatch = {
     label?: string;
     value: string;
 };
-export declare class BoxColorPickerElement extends FormAssociatedElement {
+export declare class ColorPicker extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private lastSwatchesJson;
@@ -30,5 +31,4 @@ export declare class BoxColorPickerElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxColorPickerElement: (tagName?: string) => typeof BoxColorPickerElement;
 export {};

package/dist/components/forms/color-picker.js

@@ -117,7 +117,8 @@ const colorPickerStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxColorPickerElement extends FormAssociatedElement {
+export class ColorPicker extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -304,11 +305,4 @@ export class BoxColorPickerElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxColorPickerElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxColorPickerElement);
-    return BoxColorPickerElement;
-};
+ColorPicker.register();

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

@@ -9,7 +9,8 @@ type BoxComboboxOption = {
     group?: string;
     disabled?: boolean;
 };
-export declare class BoxComboboxElement extends FormAssociatedElement {
+export declare class Combobox extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private open;
@@ -62,5 +63,4 @@ export declare class BoxComboboxElement extends FormAssociatedElement {
     private renderOptions;
     protected update(): void;
 }
-export declare const defineBoxComboboxElement: (tagName?: string) => typeof BoxComboboxElement;
 export {};

package/dist/components/forms/combobox.js

@@ -133,7 +133,8 @@ const comboboxStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxComboboxElement extends FormAssociatedElement {
+export class Combobox extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -528,11 +529,4 @@ export class BoxComboboxElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxComboboxElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxComboboxElement);
-    return BoxComboboxElement;
-};
+Combobox.register();

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

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

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

@@ -89,7 +89,8 @@ const dateFieldStyles = `
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxDateFieldElement extends FormAssociatedElement {
+export class DateField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
@@ -254,11 +255,4 @@ export class BoxDateFieldElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxDateFieldElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDateFieldElement);
-    return BoxDateFieldElement;
-};
+DateField.register();

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

@@ -4,7 +4,8 @@ type BoxDropdownItem = {
     id: string;
     label: string;
 };
-export declare class BoxDropdownElement extends FormAssociatedElement {
+export declare class Dropdown extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private open;
     private valueInternal;
@@ -39,5 +40,4 @@ export declare class BoxDropdownElement extends FormAssociatedElement {
     protected update(): void;
     private stopTracking;
 }
-export declare const defineBoxDropdownElement: (tagName?: string) => typeof BoxDropdownElement;
 export {};

package/dist/components/forms/dropdown.js

@@ -135,7 +135,8 @@ const dropdownStyles = `
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 22%, transparent);
   }
 `;
-export class BoxDropdownElement extends FormAssociatedElement {
+export class Dropdown extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -424,11 +425,4 @@ export class BoxDropdownElement extends FormAssociatedElement {
         this.positionCleanup = null;
     }
 }
-export const defineBoxDropdownElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDropdownElement);
-    return BoxDropdownElement;
-};
+Dropdown.register();

package/dist/components/forms/dual-listbox.d.ts

@@ -5,7 +5,8 @@ type DualListboxOption = {
     label: string;
     value: string;
 };
-export declare class BoxDualListboxElement extends FormAssociatedElement {
+export declare class DualListbox extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private availableSelection;
     private chosenSelection;
@@ -40,5 +41,4 @@ export declare class BoxDualListboxElement extends FormAssociatedElement {
     private syncListRoving;
     protected update(): void;
 }
-export declare const defineBoxDualListboxElement: (tagName?: string) => typeof BoxDualListboxElement;
 export {};

package/dist/components/forms/dual-listbox.js

@@ -176,7 +176,8 @@ const dualListboxStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxDualListboxElement extends FormAssociatedElement {
+export class DualListbox extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -474,11 +475,4 @@ export class BoxDualListboxElement extends FormAssociatedElement {
         this.applyInvalidStateToControls(focusableControls, this.errorEl);
     }
 }
-export const defineBoxDualListboxElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDualListboxElement);
-    return BoxDualListboxElement;
-};
+DualListbox.register();

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

@@ -6,7 +6,8 @@ import { BaseElement } from "../../core/index.js";
  * `disabled` is mirrored onto the light-DOM controls directly. Groups arbitrary
  * fields; use `box-checkbox-group`/`box-radio-group` for option lists.
  */
-export declare class BoxFieldsetElement extends BaseElement {
+export declare class Fieldset extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private fieldsetEl;
     private bodyEl;
@@ -29,4 +30,3 @@ export declare class BoxFieldsetElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxFieldsetElement: (tagName?: string) => typeof BoxFieldsetElement;

package/dist/components/forms/fieldset.js

@@ -47,7 +47,8 @@ const fieldsetStyles = `
  * `disabled` is mirrored onto the light-DOM controls directly. Groups arbitrary
  * fields; use `box-checkbox-group`/`box-radio-group` for option lists.
  */
-export class BoxFieldsetElement extends BaseElement {
+export class Fieldset extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "disabled", "label"];
     }
@@ -158,11 +159,4 @@ export class BoxFieldsetElement extends BaseElement {
         this.syncDisabledControls();
     }
 }
-export const defineBoxFieldsetElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxFieldsetElement);
-    return BoxFieldsetElement;
-};
+Fieldset.register();

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

@@ -5,7 +5,8 @@ type MultiSelectOption = {
     label: string;
     value: string;
 };
-export declare class BoxMultiSelectElement extends FormAssociatedElement {
+export declare class MultiSelect extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private lastOptionsJson;
@@ -26,5 +27,4 @@ export declare class BoxMultiSelectElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxMultiSelectElement: (tagName?: string) => typeof BoxMultiSelectElement;
 export {};

package/dist/components/forms/multi-select.js

@@ -113,7 +113,8 @@ const multiSelectStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxMultiSelectElement extends FormAssociatedElement {
+export class MultiSelect extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -254,11 +255,4 @@ export class BoxMultiSelectElement extends FormAssociatedElement {
         this.applyInvalidStateToControls(Array.from(this.optionsContainerEl.querySelectorAll('[part="input"]')), this.errorEl);
     }
 }
-export const defineBoxMultiSelectElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxMultiSelectElement);
-    return BoxMultiSelectElement;
-};
+MultiSelect.register();

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

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

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

@@ -55,7 +55,8 @@ const numberInputStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxNumberInputElement extends FormAssociatedElement {
+export class NumberInput extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -235,11 +236,4 @@ export class BoxNumberInputElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxNumberInputElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxNumberInputElement);
-    return BoxNumberInputElement;
-};
+NumberInput.register();

package/dist/components/forms/pill-cloud.d.ts

@@ -11,7 +11,8 @@ type PillCloudOption = {
  * announced with `value-changed`. Each pill is a toggle button with
  * `aria-pressed`; the group is a labelled `role="group"`.
  */
-export declare class BoxPillCloudElement extends FormAssociatedElement {
+export declare class PillCloud extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private lastOptionsJson;
@@ -31,5 +32,4 @@ export declare class BoxPillCloudElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxPillCloudElement: (tagName?: string) => typeof BoxPillCloudElement;
 export {};

package/dist/components/forms/pill-cloud.js

@@ -68,7 +68,8 @@ const pillCloudStyles = `
  * announced with `value-changed`. Each pill is a toggle button with
  * `aria-pressed`; the group is a labelled `role="group"`.
  */
-export class BoxPillCloudElement extends FormAssociatedElement {
+export class PillCloud extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -220,11 +221,4 @@ export class BoxPillCloudElement extends FormAssociatedElement {
         this.applyInvalidStateToControls(Array.from(this.rootEl.querySelectorAll('[part~="pill"]')), this.errorEl);
     }
 }
-export const defineBoxPillCloudElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxPillCloudElement);
-    return BoxPillCloudElement;
-};
+PillCloud.register();

package/dist/components/forms/pill-selector-dropdown.d.ts

@@ -12,7 +12,8 @@ type PillOption = {
  * opening focuses the first item; ArrowUp/Down/Home/End move focus, Escape (or
  * moving focus outside) closes and returns focus to the trigger.
  */
-export declare class BoxPillSelectorDropdownElement extends FormAssociatedElement {
+export declare class PillSelectorDropdown extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private open;
@@ -62,5 +63,4 @@ export declare class BoxPillSelectorDropdownElement extends FormAssociatedElemen
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxPillSelectorDropdownElement: (tagName?: string) => typeof BoxPillSelectorDropdownElement;
 export {};

package/dist/components/forms/pill-selector-dropdown.js

@@ -169,7 +169,8 @@ const pillSelectorStyles = `
  * opening focuses the first item; ArrowUp/Down/Home/End move focus, Escape (or
  * moving focus outside) closes and returns focus to the trigger.
  */
-export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
+export class PillSelectorDropdown extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -616,11 +617,4 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
         this.applyPendingFocus();
     }
 }
-export const defineBoxPillSelectorDropdownElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxPillSelectorDropdownElement);
-    return BoxPillSelectorDropdownElement;
-};
+PillSelectorDropdown.register();

package/dist/components/forms/radio-group.d.ts

@@ -6,7 +6,8 @@ type RadioOption = {
     description?: string;
     disabled?: boolean;
 };
-export declare class BoxRadioGroupElement extends FormAssociatedElement {
+export declare class RadioGroup extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private groupName;
@@ -29,5 +30,4 @@ export declare class BoxRadioGroupElement extends FormAssociatedElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxRadioGroupElement: (tagName?: string) => typeof BoxRadioGroupElement;
 export {};

package/dist/components/forms/radio-group.js

@@ -130,7 +130,8 @@ const radioGroupStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxRadioGroupElement extends FormAssociatedElement {
+export class RadioGroup extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -312,11 +313,4 @@ export class BoxRadioGroupElement extends FormAssociatedElement {
         this.syncFormAssociation();
     }
 }
-export const defineBoxRadioGroupElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxRadioGroupElement);
-    return BoxRadioGroupElement;
-};
+RadioGroup.register();

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

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxRangeSliderElement extends FormAssociatedElement {
+export declare class RangeSlider extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private startInternal;
     private endInternal;
@@ -33,4 +34,3 @@ export declare class BoxRangeSliderElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxRangeSliderElement: (tagName?: string) => typeof BoxRangeSliderElement;

package/dist/components/forms/range-slider.js

@@ -78,7 +78,8 @@ const rangeSliderStyles = `
     accent-color: var(--boe-token-surface-status-surface-error, #ed3757);
   }
 `;
-export class BoxRangeSliderElement extends FormAssociatedElement {
+export class RangeSlider extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -284,11 +285,4 @@ export class BoxRangeSliderElement extends FormAssociatedElement {
         this.applyInvalidStateToControls([this.startInputEl, this.endInputEl], this.errorEl);
     }
 }
-export const defineBoxRangeSliderElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxRangeSliderElement);
-    return BoxRangeSliderElement;
-};
+RangeSlider.register();