@unofficialbox/box-open-elements 0.3.0 → 0.5.0

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;
@@ -12,12 +13,16 @@ export declare class BoxDropdownElement extends FormAssociatedElement {
     private triggerEl;
     private errorEl;
     private menuEl;
+    private positionCleanup;
     private readonly focusRestore;
     private readonly onDocumentPointerDown;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;
     set label(value: string);
+    get placement(): string;
+    set placement(value: string);
+    private resolvedPlacement;
     get items(): BoxDropdownItem[];
     set items(value: BoxDropdownItem[]);
     get value(): string;
@@ -33,6 +38,6 @@ export declare class BoxDropdownElement extends FormAssociatedElement {
     protected renderTemplate(): void;
     protected setupListeners(): void;
     protected update(): void;
+    private stopTracking;
 }
-export declare const defineBoxDropdownElement: (tagName?: string) => typeof BoxDropdownElement;
 export {};

package/dist/components/forms/dropdown.js

@@ -3,6 +3,7 @@ import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/g
 import { FocusRestore, applyRovingTabindex, focusRovingItem, nextRovingIndex, } from "../../foundations/a11y/index.js";
 import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-dropdown";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
@@ -70,12 +71,14 @@ const dropdownStyles = `
     box-shadow: none;
   }
 
+  /* Positioned by JS (foundations/overlay) as position: fixed, so the menu
+     escapes ancestor overflow and flips/shifts to stay in the viewport. */
   [part="menu"] {
-    position: absolute;
-    inset-block-start: calc(100% + ${boeSpace[1]});
+    position: fixed;
+    inset-block-start: 0;
     inset-inline-start: 0;
     z-index: 20;
-    min-inline-size: max(100%, 200px);
+    min-inline-size: 200px;
     display: grid;
     gap: 0;
     padding: ${boeOverlay.padding};
@@ -132,13 +135,15 @@ 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,
             "disabled",
             "items",
             "label",
+            "placement",
             "value",
         ];
     }
@@ -148,6 +153,7 @@ export class BoxDropdownElement extends FormAssociatedElement {
     triggerEl;
     errorEl;
     menuEl = null;
+    positionCleanup = null;
     focusRestore = new FocusRestore();
     onDocumentPointerDown = (event) => {
         const path = event.composedPath();
@@ -173,6 +179,15 @@ export class BoxDropdownElement extends FormAssociatedElement {
     set label(value) {
         this.setAttribute("label", value);
     }
+    get placement() {
+        return this.getAttribute("placement") ?? "bottom-start";
+    }
+    set placement(value) {
+        this.setAttribute("placement", value);
+    }
+    resolvedPlacement() {
+        return parsePlacement(this.getAttribute("placement")) ?? { side: "bottom", align: "start" };
+    }
     get items() {
         const raw = this.getAttribute("items");
         if (!raw) {
@@ -220,6 +235,7 @@ export class BoxDropdownElement extends FormAssociatedElement {
     }
     disconnectedCallback() {
         document.removeEventListener("pointerdown", this.onDocumentPointerDown);
+        this.stopTracking();
         super.disconnectedCallback();
     }
     openMenu() {
@@ -387,19 +403,26 @@ export class BoxDropdownElement extends FormAssociatedElement {
             const items = this.menuItems();
             const selectedIndex = Math.max(0, items.findIndex(button => button.getAttribute("data-item-id") === this.valueInternal));
             applyRovingTabindex(items, selectedIndex);
+            // Match the trigger width, then position as a fixed overlay. Track once
+            // per open so repeated updates (e.g. value change) don't stack listeners.
+            this.menuEl.style.minInlineSize = `${Math.max(this.triggerEl.offsetWidth, 200)}px`;
+            if (!this.positionCleanup) {
+                this.positionCleanup = trackAnchor(this.triggerEl, this.menuEl, {
+                    placement: this.resolvedPlacement(),
+                    offset: 4,
+                });
+            }
         }
         else if (this.menuEl) {
+            this.stopTracking();
             this.menuEl.remove();
             this.menuEl = null;
         }
         this.applyInvalidState(this.triggerEl, this.errorEl);
     }
-}
-export const defineBoxDropdownElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
+    stopTracking() {
+        this.positionCleanup?.();
+        this.positionCleanup = null;
     }
-    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

@@ -1,6 +1,13 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxRadioGroupElement extends FormAssociatedElement {
+type RadioOption = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+};
+export declare class RadioGroup extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private groupName;
@@ -14,14 +21,8 @@ export declare class BoxRadioGroupElement extends FormAssociatedElement {
     set disabled(value: boolean);
     get label(): string;
     set label(value: string);
-    get options(): Array<{
-        label: string;
-        value: string;
-    }>;
-    set options(value: Array<{
-        label: string;
-        value: string;
-    }>);
+    get options(): RadioOption[];
+    set options(value: RadioOption[]);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getFormValue(): FormValue;
     protected restoreFormValue(value: FormValue): void;
@@ -29,4 +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

@@ -100,14 +100,38 @@ const radioGroupStyles = `
 
   ${boeFocusVisibleStyles('[part="input"]')}
 
+  [part="option-text"] {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-inline-size: 0;
+  }
+
   [part="option-label"] {
     font-weight: 500;
     color: var(--boe-token-text-text, #222222);
   }
 
+  /* Per-option supporting text below the label. */
+  [part="option-description"] {
+    font-size: 0.78rem;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part~="option"][data-has-description="true"] {
+    align-items: start;
+  }
+
+  [part~="option"][data-has-description="true"] [part="input"] {
+    margin-block-start: 2px;
+  }
+
   ${boeFormFieldErrorStyles}
 `;
-export class BoxRadioGroupElement extends FormAssociatedElement {
+export class RadioGroup extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -209,12 +233,22 @@ export class BoxRadioGroupElement extends FormAssociatedElement {
         const radioGroupName = this.getRadioGroupName();
         if (currentOptionsJson !== this.lastOptionsJson) {
             this.optionsContainerEl.innerHTML = this.options
-                .map(option => `
-            <label part="option" data-value="${escapeHtml(option.value)}">
-              <input type="radio" part="input" name="${escapeHtml(radioGroupName)}" value="${escapeHtml(option.value)}" />
-              <span part="option-label">${escapeHtml(option.label)}</span>
+                .map(option => {
+                const description = option.description
+                    ? `<span part="option-description">${escapeHtml(option.description)}</span>`
+                    : "";
+                const hasDescription = option.description ? "true" : "false";
+                const disabledAttr = option.disabled ? " disabled" : "";
+                return `
+            <label part="option" data-value="${escapeHtml(option.value)}" data-has-description="${hasDescription}">
+              <input type="radio" part="input" name="${escapeHtml(radioGroupName)}" value="${escapeHtml(option.value)}"${disabledAttr} />
+              <span part="option-text">
+                <span part="option-label">${escapeHtml(option.label)}</span>
+                ${description}
+              </span>
             </label>
-          `)
+          `;
+            })
                 .join("");
             this.lastOptionsJson = currentOptionsJson;
             this.optionsContainerEl.querySelectorAll('[part="input"]').forEach(node => {
@@ -242,16 +276,20 @@ export class BoxRadioGroupElement extends FormAssociatedElement {
                 }
             });
         }
+        const disabledByValue = new Map(this.options.map(option => [option.value, Boolean(option.disabled)]));
         this.optionsContainerEl.querySelectorAll('[part~="option"]').forEach(labelNode => {
             const label = labelNode;
             const val = label.dataset.value;
             const isSelected = val === this.valueInternal;
             label.dataset.selected = String(isSelected);
+            // part= is overwritten to toggle the selected token; data-has-description
+            // is a separate attribute and survives.
             label.setAttribute("part", `option${isSelected ? " option-selected" : ""}`);
             const input = label.querySelector('[part="input"]');
             if (input) {
                 input.checked = isSelected;
-                if (this.disabled) {
+                // Disabled if the whole group is disabled or this option is disabled.
+                if (this.disabled || disabledByValue.get(val ?? "")) {
                     input.setAttribute("disabled", "");
                 }
                 else {
@@ -275,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,7 +1,11 @@
 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;
+    set loading(value: boolean);
     private valueInternal;
     private inputEl;
     private labelEl;
@@ -23,6 +27,10 @@ export declare class BoxSearchFieldElement extends FormAssociatedElement {
     protected restoreFormValue(value: FormValue): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    /**
+     * Emit `search` and, when placed inside a form, request its submission — so a
+     * search field behaves like a native search input on Enter / submit-click.
+     */
+    private submitSearch;
     protected update(): void;
 }
-export declare const defineBoxSearchFieldElement: (tagName?: string) => typeof BoxSearchFieldElement;