@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/checkbox.js

@@ -0,0 +1,250 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-checkbox";
+const DEFAULT_VALUE = "on";
+/** Sized toward BUE `.checkbox-container` 14×14 / radius 2 look. */
+const checkboxStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: inline-flex;
+    align-items: center;
+    gap: ${boeSpace[2]};
+    cursor: pointer;
+    color: var(--boe-token-text-text, #222222);
+    font-size: ${boeControl.fontSize};
+    transition: color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="field"]:hover:not(:has([part="input"]:disabled)) {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="field"]:active:not(:has([part="input"]:disabled)) {
+    color: var(--boe-token-surface-surface-brand-pressed, #004eac);
+  }
+
+  [part="input"] {
+    inline-size: 14px;
+    block-size: 14px;
+    margin: 0;
+    flex: 0 0 auto;
+    accent-color: var(--boe-token-surface-surface-brand, #0061d5);
+    border-radius: ${boeRadius.size};
+    cursor: inherit;
+  }
+
+  ${boeFocusVisibleStyles('[part="input"]')}
+
+  [part="label"] {
+    font-weight: 400;
+  }
+
+  :host([disabled]) [part="field"] {
+    opacity: ${boeControl.disabledOpacity};
+    cursor: not-allowed;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxCheckboxElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "checked",
+            "disabled",
+            "indeterminate",
+            "label",
+            "value",
+        ];
+    }
+    checkedInternal = false;
+    indeterminateInternal = false;
+    valueInternal = DEFAULT_VALUE;
+    inputEl;
+    labelEl;
+    errorEl;
+    get checked() {
+        return this.checkedInternal;
+    }
+    set checked(value) {
+        const nextValue = Boolean(value);
+        this.checkedInternal = nextValue;
+        if (nextValue) {
+            this.setAttribute("checked", "");
+            this.indeterminateInternal = false;
+            this.removeAttribute("indeterminate");
+        }
+        else {
+            this.removeAttribute("checked");
+            this.indeterminateInternal = false;
+            this.removeAttribute("indeterminate");
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get indeterminate() {
+        return this.indeterminateInternal;
+    }
+    set indeterminate(value) {
+        const nextValue = Boolean(value);
+        this.indeterminateInternal = nextValue;
+        if (nextValue) {
+            this.setAttribute("indeterminate", "");
+        }
+        else {
+            this.removeAttribute("indeterminate");
+        }
+        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") ?? "Checkbox";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue || DEFAULT_VALUE;
+        this.setAttribute("value", this.valueInternal);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "checked") {
+            this.checkedInternal = this.hasAttribute("checked");
+        }
+        if (name === "indeterminate") {
+            this.indeterminateInternal = this.hasAttribute("indeterminate");
+        }
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? DEFAULT_VALUE;
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return this.checkedInternal ? this.valueInternal : null;
+    }
+    restoreFormValue(value) {
+        if (value == null) {
+            this.checkedInternal = false;
+            this.indeterminateInternal = false;
+            this.removeAttribute("checked");
+            this.removeAttribute("indeterminate");
+        }
+        else {
+            this.checkedInternal = true;
+            this.indeterminateInternal = false;
+            this.setAttribute("checked", "");
+            this.removeAttribute("indeterminate");
+            if (typeof value === "string") {
+                this.valueInternal = value;
+                this.setAttribute("value", value);
+            }
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${checkboxStyles}</style>
+      <label part="field">
+        <input
+          type="checkbox"
+          part="input"
+        />
+        <span part="label"></span>
+      </label>
+      ${formErrorMessageMarkup()}
+    `;
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("change", event => {
+            if (this.disabled) {
+                return;
+            }
+            const input = event.currentTarget;
+            const nextValue = input.checked;
+            this.checkedInternal = nextValue;
+            this.indeterminateInternal = input.indeterminate;
+            if (nextValue) {
+                this.setAttribute("checked", "");
+            }
+            else {
+                this.removeAttribute("checked");
+            }
+            if (this.indeterminateInternal) {
+                this.setAttribute("indeterminate", "");
+            }
+            else {
+                this.removeAttribute("indeterminate");
+            }
+            this.syncFormAssociation();
+            this.dispatchEvent(new CustomEvent("checked-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { checked: nextValue },
+            }));
+        });
+    }
+    update() {
+        if (!this.inputEl || !this.errorEl) {
+            return;
+        }
+        this.inputEl.checked = this.checkedInternal;
+        this.inputEl.indeterminate = this.indeterminateInternal;
+        this.inputEl.value = this.valueInternal;
+        const ariaChecked = this.indeterminateInternal
+            ? "mixed"
+            : String(this.checkedInternal);
+        this.inputEl.setAttribute("aria-checked", ariaChecked);
+        this.setAttribute("aria-checked", ariaChecked);
+        if (this.disabled) {
+            this.inputEl.setAttribute("disabled", "");
+        }
+        else {
+            this.inputEl.removeAttribute("disabled");
+        }
+        this.inputEl.setAttribute("aria-label", this.label);
+        this.labelEl.textContent = this.label;
+        this.applyInvalidState(this.inputEl, this.errorEl);
+    }
+}
+export const defineBoxCheckboxElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxCheckboxElement);
+    return BoxCheckboxElement;
+};

package/dist/components/forms/color-picker.d.ts

@@ -0,0 +1,34 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+type BoxColorSwatch = {
+    label?: string;
+    value: string;
+};
+export declare class BoxColorPickerElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private lastSwatchesJson;
+    private labelEl;
+    private inputEl;
+    private valueEl;
+    private fieldEl;
+    private errorEl;
+    private swatchesEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get swatches(): BoxColorSwatch[];
+    set swatches(value: BoxColorSwatch[]);
+    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 emitValueChanged;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxColorPickerElement: (tagName?: string) => typeof BoxColorPickerElement;
+export {};

package/dist/components/forms/color-picker.js

@@ -0,0 +1,314 @@
+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-color-picker";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const normalizeHex = (value) => {
+    if (!value) {
+        return "#3b82f6";
+    }
+    const normalized = value.trim().toLowerCase();
+    return /^#[0-9a-f]{6}$/.test(normalized) ? normalized : "#3b82f6";
+};
+const colorPickerStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  [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: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.45rem 0.7rem;
+    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:
+      linear-gradient(
+        180deg,
+        var(--boe-token-surface-surface, #ffffff) 0%,
+        color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 42%, var(--boe-token-surface-surface, #ffffff) 58%) 100%
+      );
+    transition: border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [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="input"] {
+    width: 2.1rem;
+    height: 2.1rem;
+    padding: 0;
+    border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+    border-radius: 0.7rem;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  [part="input"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  [part="value"] {
+    font-size: 0.9rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="swatches"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+  }
+
+  [part="swatch"] {
+    appearance: none;
+    width: 1.7rem;
+    height: 1.7rem;
+    padding: 0;
+    border: 2px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 70%, transparent);
+    border-radius: 999px;
+    background: var(--swatch-color, #ffffff);
+    cursor: pointer;
+    transition: border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="swatch"]:hover:not(:disabled) {
+    transform: scale(1.08);
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  [part="swatch"][aria-pressed="true"] {
+    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) 22%, transparent);
+  }
+
+  [part="swatch"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+  }
+
+  [part="swatch"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxColorPickerElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "swatches",
+            "value",
+        ];
+    }
+    valueInternal = "#3b82f6";
+    lastSwatchesJson = "";
+    labelEl;
+    inputEl;
+    valueEl;
+    fieldEl;
+    errorEl;
+    swatchesEl = null;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Color Picker";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get swatches() {
+        const raw = this.getAttribute("swatches");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set swatches(value) {
+        this.setAttribute("swatches", JSON.stringify(value));
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        const normalized = normalizeHex(nextValue);
+        this.valueInternal = normalized;
+        this.setAttribute("value", normalized);
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = normalizeHex(this.getAttribute("value"));
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return this.valueInternal;
+    }
+    restoreFormValue(value) {
+        const next = typeof value === "string" ? normalizeHex(value) : "#3b82f6";
+        this.valueInternal = next;
+        this.setAttribute("value", next);
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    emitValueChanged(nextValue) {
+        if (this.disabled || nextValue === this.valueInternal) {
+            return;
+        }
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: nextValue },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${colorPickerStyles}</style>
+      <label part="field">
+        <span part="label"></span>
+        <div part="control">
+          <input type="color" part="input" />
+          <span part="value"></span>
+        </div>
+        ${formErrorMessageMarkup()}
+      </label>
+    `;
+        this.fieldEl = this.shadowRoot.querySelector('[part="field"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.valueEl = this.shadowRoot.querySelector('[part="value"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("input", event => {
+            const nextValue = normalizeHex(event.currentTarget.value);
+            this.emitValueChanged(nextValue);
+        });
+        this.fieldEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="swatch"]');
+            if (!button || !this.fieldEl.contains(button)) {
+                return;
+            }
+            const nextValue = normalizeHex(button.dataset.value ?? "");
+            this.emitValueChanged(nextValue);
+        });
+    }
+    update() {
+        if (!this.inputEl || !this.labelEl || !this.valueEl || !this.errorEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.inputEl.setAttribute("aria-label", this.label);
+        this.valueEl.textContent = this.valueInternal;
+        if (this.shadowRoot?.activeElement !== this.inputEl) {
+            this.inputEl.value = this.valueInternal;
+        }
+        if (this.disabled) {
+            this.inputEl.setAttribute("disabled", "");
+        }
+        else {
+            this.inputEl.removeAttribute("disabled");
+        }
+        const swatchesJson = JSON.stringify(this.swatches);
+        if (swatchesJson !== this.lastSwatchesJson) {
+            this.swatchesEl?.remove();
+            this.swatchesEl = null;
+            this.lastSwatchesJson = swatchesJson;
+            if (this.swatches.length) {
+                const container = document.createElement("div");
+                container.setAttribute("part", "swatches");
+                container.setAttribute("role", "group");
+                container.setAttribute("aria-label", `${this.label} swatches`);
+                container.innerHTML = this.swatches
+                    .map(swatch => `
+              <button
+                type="button"
+                part="swatch"
+                data-value="${escapeHtml(normalizeHex(swatch.value))}"
+                aria-label="${escapeHtml(swatch.label ?? normalizeHex(swatch.value))}"
+                style="--swatch-color:${escapeHtml(normalizeHex(swatch.value))};"
+              ></button>
+            `)
+                    .join("");
+                this.fieldEl.append(container);
+                this.swatchesEl = container;
+            }
+        }
+        if (this.swatchesEl) {
+            this.swatchesEl.setAttribute("aria-label", `${this.label} swatches`);
+            this.swatchesEl.querySelectorAll('[part="swatch"]').forEach(node => {
+                const button = node;
+                const swatchValue = normalizeHex(button.dataset.value ?? "");
+                button.setAttribute("aria-pressed", String(swatchValue === this.valueInternal));
+                if (this.disabled) {
+                    button.setAttribute("disabled", "");
+                }
+                else {
+                    button.removeAttribute("disabled");
+                }
+            });
+        }
+        this.applyInvalidState(this.inputEl, this.errorEl);
+    }
+}
+export const defineBoxColorPickerElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxColorPickerElement);
+    return BoxColorPickerElement;
+};

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

@@ -0,0 +1,37 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+type BoxComboboxOption = {
+    label: string;
+    value: string;
+};
+export declare class BoxComboboxElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private inputEl;
+    private labelEl;
+    private datalistEl;
+    private errorEl;
+    private findOptionByLabel;
+    private findOptionByValue;
+    private getDisplayValue;
+    private resolveInputValue;
+    private commitInputValue;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get options(): BoxComboboxOption[];
+    set options(value: BoxComboboxOption[]);
+    get placeholder(): string;
+    set placeholder(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;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxComboboxElement: (tagName?: string) => typeof BoxComboboxElement;
+export {};