@unofficialbox/box-open-elements 0.1.0

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

@@ -0,0 +1,293 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-search-field";
+const searchFieldStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: grid;
+    gap: 0.45rem;
+  }
+
+  [part="label"] {
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="input-shell"] {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0.25rem 0.25rem 0.65rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    border-radius: ${boeRadius.field};
+    background: var(--boe-token-surface-surface, #ffffff);
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="input-shell"]:hover {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  [part="input-shell"]:focus-within {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+  }
+
+  [part="input"] {
+    appearance: none;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: var(--boe-token-text-text, #222222);
+    padding: 0.3rem 0;
+  }
+
+  [part="input"]::placeholder {
+    color: var(--boe-token-text-text-placeholder, #909090);
+  }
+
+  [part="input"]:focus {
+    outline: none;
+  }
+
+  [part="input"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  [part="submit"],
+  [part="clear"] {
+    appearance: none;
+    flex: 0 0 auto;
+    font: inherit;
+    font-weight: 600;
+    padding: 0.35rem 0.7rem;
+    border-radius: ${boeRadius.control};
+    cursor: pointer;
+    transition:
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="submit"] {
+    border: 1px solid transparent;
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  [part="submit"]:hover:not(:disabled) {
+    background: var(--boe-token-surface-surface-brand-hover, #006ae9);
+  }
+
+  [part="submit"]:active:not(:disabled) {
+    background: var(--boe-token-surface-surface-brand-pressed, #004eac);
+  }
+
+  [part="clear"] {
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 88%, var(--boe-token-surface-surface-secondary, #fbfbfb) 12%);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="clear"]:hover:not(:disabled) {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="submit"]:focus-visible,
+  [part="clear"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+  }
+
+  [part="submit"]:disabled,
+  [part="clear"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxSearchFieldElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "placeholder",
+            "value",
+        ];
+    }
+    valueInternal = "";
+    inputEl;
+    labelEl;
+    submitEl;
+    clearEl;
+    errorEl;
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Search";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get placeholder() {
+        return this.getAttribute("placeholder") ?? "Search";
+    }
+    set placeholder(value) {
+        this.setAttribute("placeholder", value);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    clear() {
+        if (this.disabled || !this.valueInternal) {
+            return;
+        }
+        this.value = "";
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("clear", { bubbles: true, composed: true, detail: { value: "" } }));
+        this.dispatchEvent(new CustomEvent("value-changed", { bubbles: true, composed: true, detail: { value: "" } }));
+    }
+    getFormValue() {
+        return this.valueInternal;
+    }
+    restoreFormValue(value) {
+        const next = typeof value === "string" ? value : "";
+        this.valueInternal = next;
+        this.setAttribute("value", next);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${searchFieldStyles}</style>
+      <label part="field">
+        <span part="label"></span>
+        <div part="input-shell">
+          <input type="search" part="input" />
+          <button type="button" part="submit">Search</button>
+          <button type="button" part="clear">Clear</button>
+        </div>
+        ${formErrorMessageMarkup()}
+      </label>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.submitEl = this.shadowRoot.querySelector('[part="submit"]');
+        this.clearEl = this.shadowRoot.querySelector('[part="clear"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("input", event => {
+            if (this.disabled) {
+                return;
+            }
+            const nextValue = event.currentTarget.value;
+            this.valueInternal = nextValue;
+            this.setAttribute("value", nextValue);
+            this.syncFormAssociation();
+            this.clearEl.disabled = this.disabled || nextValue.length === 0;
+            this.dispatchEvent(new CustomEvent("value-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { value: nextValue },
+            }));
+        });
+        this.inputEl.addEventListener("keydown", event => {
+            if (this.disabled) {
+                return;
+            }
+            if (event.key === "Enter") {
+                this.dispatchEvent(new CustomEvent("search", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { value: this.valueInternal },
+                }));
+            }
+        });
+        this.submitEl.addEventListener("click", () => {
+            if (this.disabled) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent("search", {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.valueInternal },
+            }));
+        });
+        this.clearEl.addEventListener("click", () => {
+            this.clear();
+        });
+    }
+    update() {
+        if (!this.inputEl || !this.labelEl || !this.submitEl || !this.clearEl || !this.errorEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.inputEl.placeholder = this.placeholder;
+        if (this.shadowRoot?.activeElement !== this.inputEl) {
+            this.inputEl.value = this.valueInternal;
+        }
+        if (this.disabled) {
+            this.inputEl.setAttribute("disabled", "");
+            this.submitEl.setAttribute("disabled", "");
+        }
+        else {
+            this.inputEl.removeAttribute("disabled");
+            this.submitEl.removeAttribute("disabled");
+        }
+        this.clearEl.disabled = this.disabled || this.valueInternal.length === 0;
+        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;
+};

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

@@ -0,0 +1,30 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxSelectElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private selectEl;
+    private labelEl;
+    private errorEl;
+    get value(): string;
+    set value(nextValue: 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;
+    }>);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxSelectElement: (tagName?: string) => typeof BoxSelectElement;

package/dist/components/forms/select.js

@@ -0,0 +1,198 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-select";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+/** Select chrome tracks BUE select / `@mixin box-inputs` (height ~34px, radius 6). */
+const selectStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: grid;
+    gap: ${boeSpace[2]};
+  }
+
+  [part="label"] {
+    font-size: ${boeControl.fontSize};
+    font-weight: 700;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="select"] {
+    appearance: none;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: ${boeControl.selectHeight};
+    padding: 5px 25px 5px 10px;
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    color: var(--boe-token-text-text, #222222);
+    border: 1px solid ${boeControl.inputBorder};
+    border-radius: ${boeRadius.control};
+    /* Chevron stroke matches --boe-token-text-text-secondary fallback (#6f6f6f). */
+    background:
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236f6f6f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 8px,
+      var(--boe-token-surface-surface, #ffffff);
+    box-shadow: 0 1px 1px 1px rgb(0 0 0 / 5%);
+    cursor: pointer;
+    transition:
+      border-color linear 0.15s,
+      box-shadow linear 0.1s;
+  }
+
+  [part="select"]:hover:not(:disabled) {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  [part="select"]:focus-visible {
+    outline: 0;
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    box-shadow: 0 1px 1px 1px rgb(0 0 0 / 5%);
+  }
+
+  [part="select"]:disabled {
+    opacity: ${boeControl.disabledOpacity};
+    cursor: not-allowed;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxSelectElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "options",
+            "value",
+        ];
+    }
+    valueInternal = "";
+    selectEl;
+    labelEl;
+    errorEl;
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Select";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get options() {
+        const raw = this.getAttribute("options");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set options(value) {
+        this.setAttribute("options", JSON.stringify(value));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return this.valueInternal;
+    }
+    restoreFormValue(value) {
+        const next = typeof value === "string" ? value : "";
+        this.valueInternal = next;
+        this.setAttribute("value", next);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${selectStyles}</style>
+      <label part="field">
+        <span part="label"></span>
+        <select part="select"></select>
+        ${formErrorMessageMarkup()}
+      </label>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.selectEl = this.shadowRoot.querySelector('[part="select"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.selectEl.addEventListener("change", event => {
+            const nextValue = event.currentTarget.value;
+            this.valueInternal = nextValue;
+            this.setAttribute("value", nextValue);
+            this.syncFormAssociation();
+            this.dispatchEvent(new CustomEvent("value-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { value: nextValue },
+            }));
+        });
+    }
+    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;
+        if (this.disabled) {
+            this.selectEl.setAttribute("disabled", "");
+        }
+        else {
+            this.selectEl.removeAttribute("disabled");
+        }
+        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;
+};

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

@@ -0,0 +1,31 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxSliderElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private inputEl;
+    private labelEl;
+    private valueEl;
+    private errorEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get max(): number;
+    set max(value: number);
+    get min(): number;
+    set min(value: number);
+    get step(): number;
+    set step(value: number);
+    get value(): number;
+    set value(nextValue: number);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    private clamp;
+    private syncValue;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxSliderElement: (tagName?: string) => typeof BoxSliderElement;