@unofficialbox/box-open-elements 0.4.0 → 0.6.0

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

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,13 @@ type SelectOption = {
     disabled?: boolean;
     group?: string;
 };
-export declare class BoxSelectElement extends FormAssociatedElement {
+/** Detail of this element's `value-changed` event; `values` only when `multiple`. */
+export interface SelectValueChangedDetail {
+    value: string;
+    values?: string[];
+}
+export declare class Select extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private valuesInternal;
@@ -14,6 +20,8 @@ export declare class BoxSelectElement extends FormAssociatedElement {
     private labelEl;
     private descriptionEl;
     private errorEl;
+    private controlEl;
+    private statusEl;
     /** Allow selecting several options (native multi-select list box). */
     get multiple(): boolean;
     set multiple(value: boolean);
@@ -26,6 +34,20 @@ export declare class BoxSelectElement extends FormAssociatedElement {
     set disabled(value: boolean);
     get label(): string;
     set label(value: string);
+    /**
+     * True while options are being fetched: shows a trailing spinner (matching
+     * `box-text-field`'s status vocabulary) and states "Loading options…" in
+     * the control instead of leaving it blank.
+     */
+    get loading(): boolean;
+    set loading(value: boolean);
+    /**
+     * What the control says when it has no options and is not loading. An
+     * async-loaded select with an empty result must say so — a silently blank
+     * control reads as broken.
+     */
+    get emptyText(): string;
+    set emptyText(value: string);
     get options(): SelectOption[];
     set options(value: SelectOption[]);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -37,5 +59,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

@@ -1,6 +1,15 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDescriptionMarkup, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-select";
+/** Attribute payloads are author input — validate every record. */
+const isSelectOptionRecord = (value) => {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const option = value;
+    return typeof option.value === "string" && typeof option.label === "string";
+};
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
@@ -77,15 +86,56 @@ const selectStyles = `
     border-radius: ${boeRadius.size};
   }
 
+  /* Control wrapper exists for the trailing status; with no status it is
+     layout-neutral. */
+  [part="control"] {
+    position: relative;
+    display: block;
+  }
+
+  [part="status"] {
+    position: absolute;
+    inset-block-start: 50%;
+    /* Left of the chevron. */
+    inset-inline-end: 2rem;
+    transform: translateY(-50%);
+    display: none;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  [part="control"][data-status="loading"] [part="status"] {
+    display: inline-flex;
+  }
+
+  [part="spinner"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 20%, transparent);
+    border-top-color: var(--boe-token-surface-surface-brand, #0061d5);
+    animation: boe-select-spin ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-select-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  ${boeReducedMotionStyles('[part="spinner"]', "animation-duration: 1.6s;")}
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxSelectElement extends FormAssociatedElement {
+const spinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
+export class Select extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
+            "empty-text",
             "label",
+            "loading",
             "multiple",
             "options",
             "value",
@@ -97,6 +147,8 @@ export class BoxSelectElement extends FormAssociatedElement {
     labelEl;
     descriptionEl;
     errorEl;
+    controlEl;
+    statusEl;
     /** Allow selecting several options (native multi-select list box). */
     get multiple() {
         return this.hasAttribute("multiple");
@@ -145,6 +197,28 @@ export class BoxSelectElement extends FormAssociatedElement {
     set label(value) {
         this.setAttribute("label", value);
     }
+    /**
+     * True while options are being fetched: shows a trailing spinner (matching
+     * `box-text-field`'s status vocabulary) and states "Loading options…" in
+     * the control instead of leaving it blank.
+     */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
+    /**
+     * What the control says when it has no options and is not loading. An
+     * async-loaded select with an empty result must say so — a silently blank
+     * control reads as broken.
+     */
+    get emptyText() {
+        return this.getAttribute("empty-text") ?? "No options available";
+    }
+    set emptyText(value) {
+        this.setAttribute("empty-text", value);
+    }
     get options() {
         const raw = this.getAttribute("options");
         if (!raw) {
@@ -152,7 +226,9 @@ export class BoxSelectElement extends FormAssociatedElement {
         }
         try {
             const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
+            return Array.isArray(parsed) && parsed.every(isSelectOptionRecord)
+                ? parsed
+                : [];
         }
         catch {
             return [];
@@ -201,7 +277,10 @@ export class BoxSelectElement extends FormAssociatedElement {
       <label part="field">
         <span part="label"></span>
         ${formDescriptionMarkup()}
-        <select part="select"></select>
+        <span part="control">
+          <select part="select"></select>
+          <span part="status" aria-hidden="true"></span>
+        </span>
         ${formErrorMessageMarkup()}
       </label>
     `;
@@ -209,6 +288,8 @@ export class BoxSelectElement extends FormAssociatedElement {
         this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.selectEl = this.shadowRoot.querySelector('[part="select"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
     }
     setupListeners() {
         this.selectEl.addEventListener("change", event => {
@@ -261,8 +342,25 @@ export class BoxSelectElement extends FormAssociatedElement {
         }
         this.labelEl.textContent = this.label;
         // Rebuild options (the list itself may change), grouping by `group`.
+        // While loading — and when an async load came back empty — the control
+        // says so in words instead of presenting a silently blank select.
         this.selectEl.multiple = this.multiple;
-        this.selectEl.innerHTML = this.optionsMarkup();
+        const options = this.options;
+        if (this.loading) {
+            this.controlEl.dataset.status = "loading";
+            this.statusEl.innerHTML = spinnerMarkup;
+            this.selectEl.innerHTML = `<option value="" disabled selected>Loading options…</option>`;
+        }
+        else if (options.length === 0) {
+            this.controlEl.removeAttribute("data-status");
+            this.statusEl.innerHTML = "";
+            this.selectEl.innerHTML = `<option value="" disabled selected>${escapeHtml(this.emptyText)}</option>`;
+        }
+        else {
+            this.controlEl.removeAttribute("data-status");
+            this.statusEl.innerHTML = "";
+            this.selectEl.innerHTML = this.optionsMarkup();
+        }
         // Patch selected value(s) and disabled after rebuilding options.
         if (this.multiple) {
             const selected = new Set(this.valuesInternal);
@@ -283,11 +381,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();