@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/radio-group.js

@@ -0,0 +1,285 @@
+import { FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-radio-group";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const radioGroupStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="group"] {
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-inline-size: 0;
+  }
+
+  [part="label"] {
+    margin: 0 0 0.5rem;
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  [part="options"] {
+    display: grid;
+    gap: 0.4rem;
+  }
+
+  [part~="option"] {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding: 0.4rem 0.55rem;
+    border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    cursor: pointer;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="option"]:hover:not(:has([part="input"]:disabled)) {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  [part~="option"]:active:not(:has([part="input"]:disabled)) {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 70%, var(--boe-token-surface-surface-secondary, #fbfbfb) 30%);
+  }
+
+  [part~="option-selected"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 24%, var(--boe-token-stroke-stroke, #e8e8e8) 76%);
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-selected, #f2f7fd) 68%, var(--boe-token-surface-surface, #ffffff) 32%);
+  }
+
+  [part~="option"]:focus-within {
+    outline: none;
+    box-shadow: ${boeFocusRingShadow};
+  }
+
+  [part~="option"]:has([part="input"]:disabled) {
+    opacity: 0.55;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  [part="input"] {
+    appearance: none;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    flex: 0 0 auto;
+    border: 1.5px solid var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    border-radius: 999px;
+    background: var(--boe-token-surface-surface, #ffffff);
+    box-shadow: inset 0 0 0 0 transparent;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="input"]:checked {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    background: var(--boe-token-surface-surface, #ffffff);
+    box-shadow: inset 0 0 0 0.28rem var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  ${boeFocusVisibleStyles('[part="input"]')}
+
+  [part="option-label"] {
+    font-weight: 500;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxRadioGroupElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "options",
+            "value",
+        ];
+    }
+    valueInternal = "";
+    groupName = "radio-group-" + Math.random().toString(36).slice(2);
+    lastOptionsJson = "";
+    legendEl;
+    optionsContainerEl;
+    errorEl;
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Options";
+    }
+    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() {
+        const selected = this.options.some(option => option.value === this.valueInternal);
+        return selected ? this.valueInternal : null;
+    }
+    restoreFormValue(value) {
+        const next = typeof value === "string" ? value : "";
+        this.valueInternal = next;
+        this.setAttribute("value", next);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    getRadioGroupName() {
+        return this.name || this.groupName;
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${radioGroupStyles}</style>
+      <fieldset part="group">
+        <legend part="label"></legend>
+        <div part="options"></div>
+        ${formErrorMessageMarkup()}
+      </fieldset>
+    `;
+        this.legendEl = this.shadowRoot.querySelector('[part="label"]');
+        this.optionsContainerEl = this.shadowRoot.querySelector('[part="options"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    update() {
+        if (!this.legendEl || !this.optionsContainerEl || !this.errorEl) {
+            return;
+        }
+        this.legendEl.textContent = this.label;
+        const currentOptionsJson = JSON.stringify(this.options);
+        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>
+            </label>
+          `)
+                .join("");
+            this.lastOptionsJson = currentOptionsJson;
+            this.optionsContainerEl.querySelectorAll('[part="input"]').forEach(node => {
+                node.addEventListener("change", event => {
+                    if (this.disabled) {
+                        return;
+                    }
+                    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 },
+                    }));
+                });
+            });
+        }
+        else {
+            this.optionsContainerEl.querySelectorAll('[part="input"]').forEach(node => {
+                const input = node;
+                if (input.name !== radioGroupName) {
+                    input.name = radioGroupName;
+                }
+            });
+        }
+        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);
+            label.setAttribute("part", `option${isSelected ? " option-selected" : ""}`);
+            const input = label.querySelector('[part="input"]');
+            if (input) {
+                input.checked = isSelected;
+                if (this.disabled) {
+                    input.setAttribute("disabled", "");
+                }
+                else {
+                    input.removeAttribute("disabled");
+                }
+            }
+        });
+        const invalid = this.invalid;
+        const message = this.errorMessage;
+        this.optionsContainerEl.querySelectorAll('[part="input"]').forEach(input => {
+            input.setAttribute("aria-invalid", String(invalid));
+            if (invalid && message) {
+                input.setAttribute("aria-errormessage", FORM_ERROR_MESSAGE_ID);
+            }
+            else {
+                input.removeAttribute("aria-errormessage");
+            }
+        });
+        this.errorEl.textContent = message;
+        this.errorEl.hidden = !(invalid && Boolean(message));
+        this.syncFormAssociation();
+    }
+}
+export const defineBoxRadioGroupElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxRadioGroupElement);
+    return BoxRadioGroupElement;
+};

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

@@ -0,0 +1,36 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxRangeSliderElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private startInternal;
+    private endInternal;
+    private labelEl;
+    private startValueEl;
+    private endValueEl;
+    private startInputEl;
+    private endInputEl;
+    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 start(): number;
+    set start(value: number);
+    get end(): number;
+    set end(value: 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 defineBoxRangeSliderElement: (tagName?: string) => typeof BoxRangeSliderElement;

package/dist/components/forms/range-slider.js

@@ -0,0 +1,294 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromRange, formErrorMessageMarkup, rangeFromFormValue, } from "../../core/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-range-slider";
+const parseNumber = (value, fallback) => {
+    if (value == null || value === "") {
+        return fallback;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+};
+const rangeSliderStyles = `
+  :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;
+    align-items: center;
+    gap: 0.3rem;
+    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="ranges"] {
+    display: grid;
+    gap: 0.35rem;
+  }
+
+  [part="range-start"],
+  [part="range-end"] {
+    inline-size: 100%;
+    margin: 0;
+    accent-color: var(--boe-token-surface-surface-brand, #0061d5);
+    cursor: pointer;
+  }
+
+  ${boeFocusVisibleStyles('[part="range-start"]')}
+  ${boeFocusVisibleStyles('[part="range-end"]')}
+
+  [part="range-start"]:disabled,
+  [part="range-end"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  ${boeFormFieldErrorStyles}
+
+  :host([invalid]) [part="range-start"],
+  :host([invalid]) [part="range-end"] {
+    accent-color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+`;
+export class BoxRangeSliderElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "end",
+            "label",
+            "max",
+            "min",
+            "start",
+            "step",
+        ];
+    }
+    startInternal = 20;
+    endInternal = 80;
+    labelEl;
+    startValueEl;
+    endValueEl;
+    startInputEl;
+    endInputEl;
+    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") ?? "Range 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 start() {
+        return this.startInternal;
+    }
+    set start(value) {
+        this.startInternal = value;
+        this.setAttribute("start", String(value));
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get end() {
+        return this.endInternal;
+    }
+    set end(value) {
+        this.endInternal = value;
+        this.setAttribute("end", String(value));
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "start") {
+            this.startInternal = parseNumber(this.getAttribute("start"), this.min);
+        }
+        if (name === "end") {
+            this.endInternal = parseNumber(this.getAttribute("end"), this.max);
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        const start = Math.min(this.startInternal, this.endInternal);
+        const end = Math.max(this.startInternal, this.endInternal);
+        return formDataFromRange(this.name, start, end);
+    }
+    restoreFormValue(value) {
+        const restored = rangeFromFormValue(value, this.name, {
+            start: this.startInternal,
+            end: this.endInternal,
+        });
+        const start = this.clamp(Math.min(restored.start, restored.end));
+        const end = this.clamp(Math.max(restored.start, restored.end));
+        this.startInternal = start;
+        this.endInternal = end;
+        this.setAttribute("start", String(start));
+        this.setAttribute("end", String(end));
+        this.syncFormAssociation();
+        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 normalizedStart = this.clamp(Math.min(nextValue.start, nextValue.end));
+        const normalizedEnd = this.clamp(Math.max(nextValue.start, nextValue.end));
+        this.startInternal = normalizedStart;
+        this.endInternal = normalizedEnd;
+        this.setAttribute("start", String(normalizedStart));
+        this.setAttribute("end", String(normalizedEnd));
+        this.startValueEl.textContent = String(normalizedStart);
+        this.endValueEl.textContent = String(normalizedEnd);
+        this.startInputEl.value = String(normalizedStart);
+        this.endInputEl.value = String(normalizedEnd);
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { start: normalizedStart, end: normalizedEnd },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${rangeSliderStyles}</style>
+      <label part="field">
+        <span part="header">
+          <span part="label"></span>
+          <span part="value">
+            <span part="start-value"></span>
+            <span part="separator">-</span>
+            <span part="end-value"></span>
+          </span>
+        </span>
+        <div part="ranges">
+          <input type="range" part="range-start" />
+          <input type="range" part="range-end" />
+        </div>
+        ${formErrorMessageMarkup()}
+      </label>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.startValueEl = this.shadowRoot.querySelector('[part="start-value"]');
+        this.endValueEl = this.shadowRoot.querySelector('[part="end-value"]');
+        this.startInputEl = this.shadowRoot.querySelector('[part="range-start"]');
+        this.endInputEl = this.shadowRoot.querySelector('[part="range-end"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.startInputEl.addEventListener("input", event => {
+            const nextStart = Number(event.currentTarget.value);
+            if (!Number.isFinite(nextStart)) {
+                return;
+            }
+            this.syncValue({ start: nextStart, end: this.endInternal });
+        });
+        this.endInputEl.addEventListener("input", event => {
+            const nextEnd = Number(event.currentTarget.value);
+            if (!Number.isFinite(nextEnd)) {
+                return;
+            }
+            this.syncValue({ start: this.startInternal, end: nextEnd });
+        });
+    }
+    update() {
+        if (!this.startInputEl || !this.endInputEl || !this.labelEl || !this.errorEl) {
+            return;
+        }
+        const start = Math.min(this.startInternal, this.endInternal);
+        const end = Math.max(this.startInternal, this.endInternal);
+        this.labelEl.textContent = this.label;
+        this.startValueEl.textContent = String(start);
+        this.endValueEl.textContent = String(end);
+        for (const input of [this.startInputEl, this.endInputEl]) {
+            input.min = String(this.min);
+            input.max = String(this.max);
+            input.step = String(this.step);
+            if (this.disabled) {
+                input.setAttribute("disabled", "");
+            }
+            else {
+                input.removeAttribute("disabled");
+            }
+        }
+        if (this.shadowRoot?.activeElement !== this.startInputEl) {
+            this.startInputEl.value = String(start);
+        }
+        if (this.shadowRoot?.activeElement !== this.endInputEl) {
+            this.endInputEl.value = String(end);
+        }
+        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;
+};

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

@@ -0,0 +1,31 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxRatingElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private lastMax;
+    private labelEl;
+    private controlEl;
+    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 value(): number;
+    set value(value: number);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    private normalizeValue;
+    private emitValueChanged;
+    private updateValue;
+    private handleKeydown;
+    private focusActiveStar;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxRatingElement: (tagName?: string) => typeof BoxRatingElement;