@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/slider.js

@@ -0,0 +1,221 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-slider";
+const parseNumber = (value, fallback) => {
+    if (value == null || value === "") {
+        return fallback;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+};
+const sliderStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: grid;
+    gap: 0.45rem;
+  }
+
+  [part="header"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.55rem;
+  }
+
+  [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="value"] {
+    display: inline-flex;
+    padding: 0.25rem 0.6rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font-size: 0.85rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+
+  [part="range"] {
+    inline-size: 100%;
+    margin: 0;
+    accent-color: var(--boe-token-surface-surface-brand, #0061d5);
+    cursor: pointer;
+  }
+
+  ${boeFocusVisibleStyles('[part="range"]')}
+
+  [part="range"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxSliderElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "max",
+            "min",
+            "step",
+            "value",
+        ];
+    }
+    valueInternal = 0;
+    inputEl;
+    labelEl;
+    valueEl;
+    errorEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Slider";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get max() {
+        return parseNumber(this.getAttribute("max"), 100);
+    }
+    set max(value) {
+        this.setAttribute("max", String(value));
+    }
+    get min() {
+        return parseNumber(this.getAttribute("min"), 0);
+    }
+    set min(value) {
+        this.setAttribute("min", String(value));
+    }
+    get step() {
+        return parseNumber(this.getAttribute("step"), 1);
+    }
+    set step(value) {
+        this.setAttribute("step", String(value));
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        const normalizedValue = this.clamp(Number.isFinite(nextValue) ? nextValue : this.min);
+        this.valueInternal = normalizedValue;
+        this.setAttribute("value", String(normalizedValue));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = parseNumber(this.getAttribute("value"), this.min);
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return String(this.valueInternal);
+    }
+    restoreFormValue(value) {
+        const parsed = typeof value === "string" ? parseNumber(value, this.valueInternal) : this.valueInternal;
+        this.valueInternal = this.clamp(parsed);
+        this.setAttribute("value", String(this.valueInternal));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    clamp(nextValue) {
+        let normalizedValue = nextValue;
+        normalizedValue = Math.max(this.min, normalizedValue);
+        normalizedValue = Math.min(this.max, normalizedValue);
+        return normalizedValue;
+    }
+    syncValue(nextValue) {
+        const normalizedValue = this.clamp(nextValue);
+        this.valueInternal = normalizedValue;
+        this.setAttribute("value", String(normalizedValue));
+        this.valueEl.textContent = String(normalizedValue);
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: normalizedValue },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${sliderStyles}</style>
+      <label part="field">
+        <span part="header">
+          <span part="label"></span>
+          <span part="value"></span>
+        </span>
+        <input type="range" part="range" />
+        ${formErrorMessageMarkup()}
+      </label>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.valueEl = this.shadowRoot.querySelector('[part="value"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="range"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("input", event => {
+            const nextValue = Number(event.currentTarget.value);
+            if (!Number.isFinite(nextValue)) {
+                return;
+            }
+            this.syncValue(nextValue);
+        });
+    }
+    update() {
+        if (!this.inputEl || !this.labelEl || !this.valueEl || !this.errorEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.valueEl.textContent = String(this.valueInternal);
+        this.inputEl.min = String(this.min);
+        this.inputEl.max = String(this.max);
+        this.inputEl.step = String(this.step);
+        if (this.shadowRoot?.activeElement !== this.inputEl) {
+            this.inputEl.value = String(this.valueInternal);
+        }
+        if (this.disabled) {
+            this.inputEl.setAttribute("disabled", "");
+        }
+        else {
+            this.inputEl.removeAttribute("disabled");
+        }
+        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;
+};

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

@@ -0,0 +1,33 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxSpinButtonElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private inputEl;
+    private labelEl;
+    private decrementEl;
+    private incrementEl;
+    private errorEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get max(): number | null;
+    set max(value: number | null);
+    get min(): number | null;
+    set min(value: number | null);
+    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;
+    private syncInputAria;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxSpinButtonElement: (tagName?: string) => typeof BoxSpinButtonElement;

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

@@ -0,0 +1,352 @@
+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-spin-button";
+const parseNumber = (value, fallback) => {
+    if (value == null || value === "") {
+        return fallback;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+};
+const spinButtonStyles = `
+  :host {
+    display: inline-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="control"] {
+    display: inline-flex;
+    align-items: stretch;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    overflow: hidden;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="control"]:hover {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  [part="control"]: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="decrement"],
+  [part="increment"] {
+    appearance: none;
+    border: none;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 88%, var(--boe-token-surface-surface, #ffffff) 12%);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    font-weight: 700;
+    inline-size: 2.25rem;
+    cursor: pointer;
+    transition:
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="decrement"] {
+    border-inline-end: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+  }
+
+  [part="increment"] {
+    border-inline-start: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+  }
+
+  [part="decrement"]:hover:not(:disabled),
+  [part="increment"]:hover:not(:disabled) {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="decrement"]:active:not(:disabled),
+  [part="increment"]:active:not(:disabled) {
+    background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+  }
+
+  [part="decrement"]:focus-visible,
+  [part="increment"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: -2px;
+  }
+
+  [part="input"] {
+    appearance: textfield;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: var(--boe-token-text-text, #222222);
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    padding: 0.45rem 0.5rem;
+    inline-size: 4.5rem;
+    min-inline-size: 0;
+  }
+
+  [part="input"]::-webkit-outer-spin-button,
+  [part="input"]::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  [part="input"]:focus {
+    outline: none;
+  }
+
+  [part="decrement"]:disabled,
+  [part="increment"]:disabled,
+  [part="input"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxSpinButtonElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "max",
+            "min",
+            "step",
+            "value",
+        ];
+    }
+    valueInternal = 0;
+    inputEl;
+    labelEl;
+    decrementEl;
+    incrementEl;
+    errorEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Spin Button";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get max() {
+        return this.hasAttribute("max") ? parseNumber(this.getAttribute("max"), 0) : null;
+    }
+    set max(value) {
+        if (value == null) {
+            this.removeAttribute("max");
+        }
+        else {
+            this.setAttribute("max", String(value));
+        }
+    }
+    get min() {
+        return this.hasAttribute("min") ? parseNumber(this.getAttribute("min"), 0) : null;
+    }
+    set min(value) {
+        if (value == null) {
+            this.removeAttribute("min");
+        }
+        else {
+            this.setAttribute("min", String(value));
+        }
+    }
+    get step() {
+        return parseNumber(this.getAttribute("step"), 1);
+    }
+    set step(value) {
+        this.setAttribute("step", String(value));
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        const normalizedValue = this.clamp(Number.isFinite(nextValue) ? nextValue : 0);
+        this.valueInternal = normalizedValue;
+        this.setAttribute("value", String(normalizedValue));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = parseNumber(this.getAttribute("value"), 0);
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return String(this.valueInternal);
+    }
+    restoreFormValue(value) {
+        const parsed = typeof value === "string" ? parseNumber(value, this.valueInternal) : this.valueInternal;
+        this.valueInternal = this.clamp(parsed);
+        this.setAttribute("value", String(this.valueInternal));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    clamp(nextValue) {
+        let normalizedValue = nextValue;
+        if (this.min != null) {
+            normalizedValue = Math.max(this.min, normalizedValue);
+        }
+        if (this.max != null) {
+            normalizedValue = Math.min(this.max, normalizedValue);
+        }
+        return normalizedValue;
+    }
+    syncValue(nextValue) {
+        const normalizedValue = this.clamp(nextValue);
+        this.valueInternal = normalizedValue;
+        this.setAttribute("value", String(normalizedValue));
+        this.inputEl.value = String(normalizedValue);
+        this.syncInputAria();
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: normalizedValue },
+        }));
+    }
+    syncInputAria() {
+        this.inputEl.setAttribute("role", "spinbutton");
+        this.inputEl.setAttribute("aria-valuenow", String(this.valueInternal));
+        if (this.min != null) {
+            this.inputEl.setAttribute("aria-valuemin", String(this.min));
+        }
+        else {
+            this.inputEl.removeAttribute("aria-valuemin");
+        }
+        if (this.max != null) {
+            this.inputEl.setAttribute("aria-valuemax", String(this.max));
+        }
+        else {
+            this.inputEl.removeAttribute("aria-valuemax");
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${spinButtonStyles}</style>
+      <div part="field">
+        <span part="label"></span>
+        <div part="control">
+          <button type="button" part="decrement" aria-label="Decrease value">-</button>
+          <input type="number" part="input" />
+          <button type="button" part="increment" aria-label="Increase value">+</button>
+        </div>
+        ${formErrorMessageMarkup()}
+      </div>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.decrementEl = this.shadowRoot.querySelector('[part="decrement"]');
+        this.incrementEl = this.shadowRoot.querySelector('[part="increment"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("input", event => {
+            const nextValue = Number(event.currentTarget.value);
+            if (!Number.isFinite(nextValue)) {
+                return;
+            }
+            this.syncValue(nextValue);
+        });
+        this.inputEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === "ArrowUp") {
+                keyboardEvent.preventDefault();
+                this.syncValue(this.valueInternal + this.step);
+            }
+            if (keyboardEvent.key === "ArrowDown") {
+                keyboardEvent.preventDefault();
+                this.syncValue(this.valueInternal - this.step);
+            }
+            if (keyboardEvent.key === "Home" && this.min != null) {
+                keyboardEvent.preventDefault();
+                this.syncValue(this.min);
+            }
+            if (keyboardEvent.key === "End" && this.max != null) {
+                keyboardEvent.preventDefault();
+                this.syncValue(this.max);
+            }
+        });
+        this.decrementEl.addEventListener("click", () => {
+            this.syncValue(this.valueInternal - this.step);
+        });
+        this.incrementEl.addEventListener("click", () => {
+            this.syncValue(this.valueInternal + this.step);
+        });
+    }
+    update() {
+        if (!this.inputEl || !this.labelEl || !this.errorEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.inputEl.step = String(this.step);
+        if (this.min == null) {
+            this.inputEl.removeAttribute("min");
+        }
+        else {
+            this.inputEl.min = String(this.min);
+        }
+        if (this.max == null) {
+            this.inputEl.removeAttribute("max");
+        }
+        else {
+            this.inputEl.max = String(this.max);
+        }
+        if (this.shadowRoot?.activeElement !== this.inputEl) {
+            this.inputEl.value = String(this.valueInternal);
+        }
+        this.syncInputAria();
+        for (const el of [this.inputEl, this.decrementEl, this.incrementEl]) {
+            if (this.disabled) {
+                el.setAttribute("disabled", "");
+            }
+            else {
+                el.removeAttribute("disabled");
+            }
+        }
+        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;
+};

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

@@ -0,0 +1,32 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxSwitchElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private checkedInternal;
+    private valueInternal;
+    private switchEl;
+    private trackEl;
+    private thumbEl;
+    private labelEl;
+    private descriptionEl;
+    private contentEl;
+    private errorEl;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get description(): string;
+    set description(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(nextValue: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    private toggleChecked;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxSwitchElement: (tagName?: string) => typeof BoxSwitchElement;