@unofficialbox/box-open-elements 0.4.0 → 0.6.0

package/dist/components/feedback/stage-path.js

@@ -0,0 +1,235 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-stage-path";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+/** Attribute payloads are author input — validate every record. */
+export const isStagePathStageRecord = (value) => {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const stage = value;
+    return (typeof stage.id === "string" &&
+        stage.id.length > 0 &&
+        typeof stage.label === "string" &&
+        stage.label.length > 0);
+};
+/** State of each stage relative to the current one. */
+export const resolveStageStates = (stages, currentId) => {
+    const index = stages.findIndex(stage => stage.id === currentId);
+    // An unknown current id means nothing is complete — better than silently
+    // marking the whole path done because the host sent a stale value.
+    return stages.map((_, position) => index === -1
+        ? "upcoming"
+        : position < index
+            ? "complete"
+            : position === index
+                ? "current"
+                : "upcoming");
+};
+const elementStyles = `
+        :host {
+          display: block;
+        }
+
+        [part="path"] {
+          display: flex;
+          flex-wrap: wrap;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+
+        [part="stage"] {
+          position: relative;
+          flex: 1 1 0;
+          min-inline-size: 6rem;
+          padding: 0.45rem 0.7rem 0.45rem 1.35rem;
+          background: var(--boe-token-surface-surface-hover, #f4f4f4);
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.82rem;
+          transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="stage"]:first-child {
+          padding-inline-start: 0.8rem;
+          border-start-start-radius: 999px;
+          border-end-start-radius: 999px;
+        }
+
+        [part="stage"]:last-child {
+          border-start-end-radius: 999px;
+          border-end-end-radius: 999px;
+        }
+
+        /* The chevron: a notch cut from the following stage plus an arrow on
+           this one, so the path reads as a directed sequence rather than a row
+           of pills. Drawn with clip-path so no extra elements are needed. */
+        [part="stage"]:not(:last-child) {
+          clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 50%, calc(100% - 0.7rem) 100%, 0 100%, 0.7rem 50%);
+          margin-inline-end: -0.55rem;
+        }
+
+        [part="stage"]:first-child:not(:last-child) {
+          clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 50%, calc(100% - 0.7rem) 100%, 0 100%);
+        }
+
+        [part="stage"]:last-child:not(:first-child) {
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.7rem 50%);
+        }
+
+        [part="stage"][data-state="complete"] {
+          background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26a27b) 18%, transparent);
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26a27b) 72%, black 28%);
+        }
+
+        [part="stage"][data-state="current"] {
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          font-weight: 700;
+        }
+
+        [part="stage-label"] {
+          display: block;
+        }
+
+        [part="stage-description"] {
+          display: block;
+          margin-block-start: 0.1rem;
+          font-size: 0.72rem;
+          font-weight: 400;
+          opacity: 0.85;
+        }
+
+        [part="stage-marker"] {
+          margin-inline-end: 0.3rem;
+          font-weight: 700;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          [part="stage"] {
+            transition: none;
+          }
+        }
+
+        @media (max-width: 34rem) {
+          /* Chevrons collapse below the width where they stop being legible;
+             the states still read from tone and the completed marker. */
+          [part="stage"],
+          [part="stage"]:first-child:not(:last-child),
+          [part="stage"]:last-child:not(:first-child) {
+            clip-path: none;
+            margin-inline-end: 0;
+            padding-inline-start: 0.8rem;
+            border-radius: 0;
+          }
+        }
+      `;
+/**
+ * Horizontal chevron lifecycle tracker for record headers — Draft → In
+ * Review → Approved → Executed.
+ *
+ * Distinct from `box-progress-steps`, which is a vertical setup rail for a
+ * task the reader is working through: this states where a *record* sits in
+ * its lifecycle, is read-only, and belongs in a header rather than a form.
+ *
+ * Rendered as an ordered list with the current stage marked `aria-current`,
+ * so the sequence and the position are both available without relying on the
+ * chevron geometry — which is decoration, and collapses on narrow viewports.
+ */
+export class StagePath extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["current", "label", "stages"];
+    }
+    pathEl;
+    stagesRaw = null;
+    stagesCache = [];
+    get label() {
+        return this.getAttribute("label") ?? "Lifecycle";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    /** Id of the stage the record is at. An unknown id leaves every stage upcoming. */
+    get current() {
+        return this.getAttribute("current") ?? "";
+    }
+    set current(value) {
+        this.setAttribute("current", value);
+    }
+    get stages() {
+        const raw = this.getAttribute("stages");
+        if (!raw) {
+            return [];
+        }
+        if (raw !== this.stagesRaw) {
+            this.stagesRaw = raw;
+            try {
+                const parsed = JSON.parse(raw);
+                this.stagesCache =
+                    Array.isArray(parsed) && parsed.every(isStagePathStageRecord)
+                        ? parsed
+                        : [];
+            }
+            catch {
+                this.stagesCache = [];
+            }
+        }
+        return [...this.stagesCache];
+    }
+    set stages(value) {
+        if (value.length) {
+            this.setAttribute("stages", JSON.stringify(value));
+            return;
+        }
+        this.removeAttribute("stages");
+    }
+    /** State of each stage, in order. */
+    get states() {
+        return resolveStageStates(this.stages, this.current);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `<style>${elementStyles}</style><ol part="path"></ol>`;
+        this.pathEl = this.shadowRoot.querySelector('[part="path"]');
+    }
+    setupListeners() {
+        // Read-only: a record's lifecycle position is not something a header edits.
+    }
+    update() {
+        if (!this.pathEl) {
+            return;
+        }
+        const stages = this.stages;
+        const states = resolveStageStates(stages, this.current);
+        this.pathEl.setAttribute("aria-label", this.label);
+        this.pathEl.innerHTML = stages
+            .map((stage, index) => {
+            const state = states[index];
+            // The completed marker is a second, non-colour signal for "done".
+            const marker = state === "complete" ? `<span part="stage-marker" aria-hidden="true">✓</span>` : "";
+            return `
+          <li
+            part="stage"
+            data-stage-id="${escapeHtml(stage.id)}"
+            data-state="${state}"
+            ${state === "current" ? 'aria-current="step"' : ""}
+          >
+            <span part="stage-label">${marker}${escapeHtml(stage.label)}</span>
+            ${state === "current" && stage.description
+                ? `<span part="stage-description">${escapeHtml(stage.description)}</span>`
+                : ""}
+          </li>
+        `;
+        })
+            .join("");
+    }
+}
+StagePath.register();

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxToastElement extends BaseElement {
+export declare class Toast extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private timeoutId;
@@ -28,4 +29,3 @@ export declare class BoxToastElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxToastElement: (tagName?: string) => typeof BoxToastElement;

package/dist/components/feedback/toast.js

@@ -108,7 +108,8 @@ const toastStyles = `
     box-shadow: none;
   }
 `;
-export class BoxToastElement extends BaseElement {
+export class Toast extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["message", "open", "tone", "duration"];
     }
@@ -243,11 +244,4 @@ export class BoxToastElement extends BaseElement {
         this.messageEl.textContent = this.message;
     }
 }
-export const defineBoxToastElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxToastElement);
-    return BoxToastElement;
-};
+Toast.register();

package/dist/components/files/drop-zone.d.ts

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

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();