@unofficialbox/box-open-elements 0.3.0 → 0.5.0

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

@@ -1,7 +1,8 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-search-field";
+const searchSpinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
 const searchFieldStyles = `
   :host {
     display: block;
@@ -121,19 +122,44 @@ const searchFieldStyles = `
     cursor: not-allowed;
   }
 
+  [part="submit"] [part="spinner"] {
+    display: inline-block;
+    inline-size: 0.95rem;
+    block-size: 0.95rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
+    border-top-color: currentColor;
+    animation: boe-search-spin ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-search-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  ${boeReducedMotionStyles('[part="submit"] [part="spinner"]', "animation-duration: 1.6s;")}
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxSearchFieldElement extends FormAssociatedElement {
+export class SearchField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "placeholder",
+            "loading",
             "value",
         ];
     }
+    /** Shows a spinner in the submit button while a search runs asynchronously. */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
     valueInternal = "";
     inputEl;
     labelEl;
@@ -245,27 +271,32 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
                 return;
             }
             if (event.key === "Enter") {
-                this.dispatchEvent(new CustomEvent("search", {
-                    bubbles: true,
-                    composed: true,
-                    detail: { value: this.valueInternal },
-                }));
+                this.submitSearch();
             }
         });
         this.submitEl.addEventListener("click", () => {
             if (this.disabled) {
                 return;
             }
-            this.dispatchEvent(new CustomEvent("search", {
-                bubbles: true,
-                composed: true,
-                detail: { value: this.valueInternal },
-            }));
+            this.submitSearch();
         });
         this.clearEl.addEventListener("click", () => {
             this.clear();
         });
     }
+    /**
+     * 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.
+     */
+    submitSearch() {
+        this.dispatchEvent(new CustomEvent("search", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.valueInternal },
+        }));
+        const form = this.internals.form ?? this.closest("form");
+        form?.requestSubmit();
+    }
     update() {
         if (!this.inputEl || !this.labelEl || !this.submitEl || !this.clearEl || !this.errorEl) {
             return;
@@ -277,22 +308,27 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
         }
         if (this.disabled) {
             this.inputEl.setAttribute("disabled", "");
-            this.submitEl.setAttribute("disabled", "");
         }
         else {
             this.inputEl.removeAttribute("disabled");
-            this.submitEl.removeAttribute("disabled");
+        }
+        // Loading: show a spinner in the submit button and disable it; else the
+        // submit label, disabled only when the whole field is disabled.
+        if (this.loading) {
+            this.submitEl.innerHTML = searchSpinnerMarkup;
+            this.submitEl.setAttribute("aria-label", "Searching");
+            this.submitEl.setAttribute("aria-busy", "true");
+            this.submitEl.disabled = true;
+        }
+        else {
+            this.submitEl.textContent = "Search";
+            this.submitEl.removeAttribute("aria-label");
+            this.submitEl.removeAttribute("aria-busy");
+            this.submitEl.disabled = this.disabled;
         }
         this.clearEl.disabled = this.disabled || this.valueInternal.length === 0;
         this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         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

@@ -1,31 +1,41 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxSelectElement extends FormAssociatedElement {
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    group?: string;
+};
+export declare class Select extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
+    private valuesInternal;
     private selectEl;
     private labelEl;
     private descriptionEl;
     private errorEl;
+    /** Allow selecting several options (native multi-select list box). */
+    get multiple(): boolean;
+    set multiple(value: boolean);
     get value(): string;
     set value(nextValue: string);
+    /** Selected values (canonical when `multiple`; single-element otherwise). */
+    get values(): string[];
+    set values(next: string[]);
     get disabled(): boolean;
     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(): SelectOption[];
+    set options(value: SelectOption[]);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getFormValue(): FormValue;
     protected restoreFormValue(value: FormValue): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    /** Build `<option>`/`<optgroup>` markup, grouping options that carry `group`. */
+    private optionsMarkup;
     protected update(): void;
 }
-export declare const defineBoxSelectElement: (tagName?: string) => typeof BoxSelectElement;
+export {};

package/dist/components/forms/select.js

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDescriptionMarkup, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-select";
 const escapeHtml = (value) => value
@@ -63,34 +63,72 @@ const selectStyles = `
     cursor: not-allowed;
   }
 
+  /* Multi-select renders as a native list box: drop the single-select chevron
+     and fixed height, let it show several rows. */
+  [part="select"][multiple] {
+    min-height: auto;
+    padding: 4px;
+    background-image: none;
+    cursor: default;
+  }
+
+  [part="select"][multiple] option {
+    padding: 3px 6px;
+    border-radius: ${boeRadius.size};
+  }
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxSelectElement extends FormAssociatedElement {
+export class Select extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
+            "multiple",
             "options",
             "value",
         ];
     }
     valueInternal = "";
+    valuesInternal = [];
     selectEl;
     labelEl;
     descriptionEl;
     errorEl;
+    /** Allow selecting several options (native multi-select list box). */
+    get multiple() {
+        return this.hasAttribute("multiple");
+    }
+    set multiple(value) {
+        this.toggleAttribute("multiple", Boolean(value));
+    }
     get value() {
         return this.valueInternal;
     }
     set value(nextValue) {
         this.valueInternal = nextValue;
+        this.valuesInternal = nextValue ? [nextValue] : [];
         this.setAttribute("value", nextValue);
         if (this.isRendered) {
             this.update();
         }
     }
+    /** Selected values (canonical when `multiple`; single-element otherwise). */
+    get values() {
+        return [...this.valuesInternal];
+    }
+    set values(next) {
+        this.valuesInternal = Array.isArray(next) ? [...next] : [];
+        this.valueInternal = this.valuesInternal[0] ?? "";
+        this.setAttribute("value", this.valueInternal);
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -127,16 +165,30 @@ export class BoxSelectElement extends FormAssociatedElement {
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === "value") {
             this.valueInternal = this.getAttribute("value") ?? "";
+            if (!this.multiple) {
+                this.valuesInternal = this.valueInternal ? [this.valueInternal] : [];
+            }
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
     getFormValue() {
+        if (this.multiple) {
+            return formDataFromNamedValues(this.name, this.valuesInternal);
+        }
         return this.valueInternal;
     }
     restoreFormValue(value) {
-        const next = typeof value === "string" ? value : "";
-        this.valueInternal = next;
-        this.setAttribute("value", next);
+        if (this.multiple) {
+            this.valuesInternal = stringValuesFromFormValue(value, this.name);
+            this.valueInternal = this.valuesInternal[0] ?? "";
+            this.setAttribute("value", this.valueInternal);
+        }
+        else {
+            const next = typeof value === "string" ? value : "";
+            this.valueInternal = next;
+            this.valuesInternal = next ? [next] : [];
+            this.setAttribute("value", next);
+        }
         if (this.isRendered) {
             this.update();
         }
@@ -161,28 +213,67 @@ export class BoxSelectElement extends FormAssociatedElement {
     }
     setupListeners() {
         this.selectEl.addEventListener("change", event => {
-            const nextValue = event.currentTarget.value;
-            this.valueInternal = nextValue;
-            this.setAttribute("value", nextValue);
+            const select = event.currentTarget;
+            if (this.multiple) {
+                this.valuesInternal = Array.from(select.selectedOptions).map(option => option.value);
+                this.valueInternal = this.valuesInternal[0] ?? "";
+            }
+            else {
+                this.valueInternal = select.value;
+                this.valuesInternal = this.valueInternal ? [this.valueInternal] : [];
+            }
+            this.setAttribute("value", this.valueInternal);
             this.syncFormAssociation();
             this.dispatchEvent(new CustomEvent("value-changed", {
                 bubbles: true,
                 composed: true,
-                detail: { value: nextValue },
+                detail: this.multiple
+                    ? { value: this.valueInternal, values: this.values }
+                    : { value: this.valueInternal },
             }));
         });
     }
+    /** Build `<option>`/`<optgroup>` markup, grouping options that carry `group`. */
+    optionsMarkup() {
+        const renderOption = (option) => `<option value="${escapeHtml(option.value)}"${option.disabled ? " disabled" : ""}>${escapeHtml(option.label)}</option>`;
+        const options = this.options;
+        let markup = "";
+        let index = 0;
+        while (index < options.length) {
+            const group = options[index].group;
+            if (!group) {
+                markup += renderOption(options[index]);
+                index += 1;
+                continue;
+            }
+            // Consume the contiguous run sharing this group label into one optgroup.
+            let run = "";
+            while (index < options.length && options[index].group === group) {
+                run += renderOption(options[index]);
+                index += 1;
+            }
+            markup += `<optgroup label="${escapeHtml(group)}">${run}</optgroup>`;
+        }
+        return markup;
+    }
     update() {
         if (!this.selectEl || !this.labelEl || !this.errorEl) {
             return;
         }
         this.labelEl.textContent = this.label;
-        // Rebuild options (the list itself may change)
-        this.selectEl.innerHTML = this.options
-            .map(option => `<option value="${escapeHtml(option.value)}">${escapeHtml(option.label)}</option>`)
-            .join("");
-        // Patch selected value and disabled after rebuilding options
-        this.selectEl.value = this.valueInternal;
+        // Rebuild options (the list itself may change), grouping by `group`.
+        this.selectEl.multiple = this.multiple;
+        this.selectEl.innerHTML = this.optionsMarkup();
+        // Patch selected value(s) and disabled after rebuilding options.
+        if (this.multiple) {
+            const selected = new Set(this.valuesInternal);
+            Array.from(this.selectEl.options).forEach(option => {
+                option.selected = selected.has(option.value);
+            });
+        }
+        else {
+            this.selectEl.value = this.valueInternal;
+        }
         if (this.disabled) {
             this.selectEl.setAttribute("disabled", "");
         }
@@ -193,11 +284,4 @@ export class BoxSelectElement extends FormAssociatedElement {
         this.applyInvalidState(this.selectEl, this.errorEl);
     }
 }
-export const defineBoxSelectElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSelectElement);
-    return BoxSelectElement;
-};
+Select.register();

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

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

package/dist/components/forms/slider.js

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

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

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

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

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

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

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

package/dist/components/forms/switch.js

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,25 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxTextFieldElement extends FormAssociatedElement {
+export declare class TextField extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
     private labelEl;
     private descriptionEl;
     private errorEl;
+    private controlEl;
+    private iconSlot;
+    private statusEl;
+    /** Input type passthrough (text/email/tel/url/password/search/number). */
+    get type(): string;
+    set type(value: string);
+    /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
+    get loading(): boolean;
+    set loading(value: boolean);
+    /** Shows a trailing success check (explicit valid affirmation). */
+    get valid(): boolean;
+    set valid(value: boolean);
     get value(): string;
     set value(nextValue: string);
     get disabled(): boolean;
@@ -20,6 +33,6 @@ export declare class BoxTextFieldElement extends FormAssociatedElement {
     protected restoreFormValue(value: FormValue): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    private syncIconSlot;
     protected update(): void;
 }
-export declare const defineBoxTextFieldElement: (tagName?: string) => typeof BoxTextFieldElement;