@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/category-selector.js

@@ -0,0 +1,269 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-category-selector";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const categorySelectorStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="group"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  [part~="pill"] {
+    appearance: none;
+    padding: 0.35rem 0.7rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: 999px;
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 0.84rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="pill"]:hover:not(:disabled) {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part~="pill-checked"] {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  [part~="pill"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 26%, transparent);
+  }
+
+  [part~="pill"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  [part="empty"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 0.86rem;
+  }
+`;
+/**
+ * A single-select category picker rendered as a horizontal radiogroup of pills —
+ * a filter bar for switching one active category (distinct from the multi-select
+ * `box-pill-cloud`). Data arrives via `options`; the active value is exposed as
+ * `value` and announced with `value-changed`. Follows the radiogroup keyboard
+ * pattern: arrow keys move selection with roving `tabindex`.
+ */
+export class BoxCategorySelectorElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "options", "value"];
+    }
+    valueInternal = "";
+    lastOptionsJson = "";
+    hadFocus = false;
+    rootEl;
+    get label() {
+        return this.getAttribute("label") ?? "Categories";
+    }
+    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));
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    selectableOptions() {
+        return this.options.filter(option => !option.disabled);
+    }
+    select(value) {
+        if (!value || value === this.valueInternal) {
+            return;
+        }
+        if (this.options.find(option => option.value === value)?.disabled) {
+            return;
+        }
+        this.hadFocus = this.shadowRoot?.activeElement !== null;
+        this.valueInternal = value;
+        this.setAttribute("value", value);
+        if (this.isRendered) {
+            this.update();
+        }
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value },
+        }));
+    }
+    moveSelection(current, delta) {
+        const selectable = this.selectableOptions();
+        if (!selectable.length) {
+            return;
+        }
+        const currentIndex = selectable.findIndex(option => option.value === current);
+        const baseIndex = currentIndex === -1 ? 0 : currentIndex;
+        const nextIndex = Math.max(0, Math.min(selectable.length - 1, baseIndex + delta));
+        const nextValue = selectable[nextIndex]?.value;
+        if (nextValue) {
+            this.select(nextValue);
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${categorySelectorStyles}</style>
+      <div part="root"></div>
+    `;
+        this.rootEl = this.shadowRoot.querySelector('[part="root"]');
+    }
+    setupListeners() {
+        this.rootEl.addEventListener("click", event => {
+            const button = event.target.closest('[part~="pill"]');
+            if (!button || !this.rootEl.contains(button)) {
+                return;
+            }
+            this.select(button.dataset.value ?? "");
+        });
+        this.rootEl.addEventListener("keydown", event => {
+            const button = event.target.closest('[part~="pill"]');
+            if (!button || !this.rootEl.contains(button)) {
+                return;
+            }
+            const keyboardEvent = event;
+            const value = button.dataset.value ?? "";
+            switch (keyboardEvent.key) {
+                case "ArrowRight":
+                case "ArrowDown":
+                    keyboardEvent.preventDefault();
+                    this.moveSelection(value, 1);
+                    break;
+                case "ArrowLeft":
+                case "ArrowUp":
+                    keyboardEvent.preventDefault();
+                    this.moveSelection(value, -1);
+                    break;
+                case "Home": {
+                    keyboardEvent.preventDefault();
+                    const first = this.selectableOptions()[0]?.value;
+                    if (first) {
+                        this.select(first);
+                    }
+                    break;
+                }
+                case "End": {
+                    keyboardEvent.preventDefault();
+                    const options = this.selectableOptions();
+                    const last = options[options.length - 1]?.value;
+                    if (last) {
+                        this.select(last);
+                    }
+                    break;
+                }
+                case " ":
+                case "Enter":
+                    keyboardEvent.preventDefault();
+                    this.select(value);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    update() {
+        if (!this.rootEl) {
+            return;
+        }
+        const options = this.options;
+        if (!options.length) {
+            this.rootEl.innerHTML = `<div part="empty">No categories</div>`;
+            this.lastOptionsJson = "";
+            return;
+        }
+        const optionsJson = JSON.stringify(options);
+        if (optionsJson !== this.lastOptionsJson || !this.rootEl.querySelector('[part="group"]')) {
+            this.rootEl.innerHTML = `
+        <div part="group" role="radiogroup" aria-label="${escapeHtml(this.label)}">
+          ${options
+                .map(option => `
+                <button
+                  type="button"
+                  part="pill"
+                  role="radio"
+                  data-value="${escapeHtml(option.value)}"
+                  ${option.disabled ? "disabled" : ""}
+                >${escapeHtml(option.label)}</button>
+              `)
+                .join("")}
+        </div>
+      `;
+            this.lastOptionsJson = optionsJson;
+        }
+        const group = this.rootEl.querySelector('[part="group"]');
+        group?.setAttribute("aria-label", this.label);
+        const tabbableValue = this.valueInternal || this.selectableOptions()[0]?.value || "";
+        this.rootEl.querySelectorAll('[part~="pill"]').forEach(node => {
+            const button = node;
+            const optionValue = button.dataset.value ?? "";
+            const option = options.find(entry => entry.value === optionValue);
+            const isChecked = optionValue === this.valueInternal;
+            button.setAttribute("part", isChecked ? "pill pill-checked" : "pill");
+            button.setAttribute("aria-checked", String(isChecked));
+            button.tabIndex = optionValue === tabbableValue && !option?.disabled ? 0 : -1;
+        });
+        if (this.hadFocus && this.valueInternal) {
+            const active = Array.from(this.rootEl.querySelectorAll('[part~="pill"]')).find(node => node.dataset.value === this.valueInternal);
+            active?.focus();
+            this.hadFocus = false;
+        }
+    }
+}
+export const defineBoxCategorySelectorElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxCategorySelectorElement);
+    return BoxCategorySelectorElement;
+};

package/dist/components/forms/checkbox-group.d.ts

@@ -0,0 +1,31 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+type CheckboxGroupOption = {
+    disabled?: boolean;
+    label: string;
+    value: string;
+};
+export declare class BoxCheckboxGroupElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private lastOptionsJson;
+    private legendEl;
+    private optionsContainerEl;
+    private errorEl;
+    get label(): string;
+    set label(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get options(): CheckboxGroupOption[];
+    set options(value: CheckboxGroupOption[]);
+    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 defineBoxCheckboxGroupElement: (tagName?: string) => typeof BoxCheckboxGroupElement;
+export {};

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

@@ -0,0 +1,267 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formErrorMessageMarkup, stringValuesFromFormValue, } 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-checkbox-group";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const checkboxGroupStyles = `
+  :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;
+    padding: 0;
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [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};
+    cursor: pointer;
+    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="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"]:has([part="input"]:checked) {
+    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"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    accent-color: var(--boe-token-surface-surface-brand, #0061d5);
+    margin: 0;
+    flex: 0 0 auto;
+    cursor: inherit;
+  }
+
+  ${boeFocusVisibleStyles('[part="input"]')}
+
+  [part="option-label"] {
+    font-weight: 500;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxCheckboxGroupElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "options",
+            "value",
+        ];
+    }
+    valueInternal = [];
+    lastOptionsJson = "";
+    legendEl;
+    optionsContainerEl;
+    errorEl;
+    get label() {
+        return this.getAttribute("label") ?? "Options";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    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));
+    }
+    get value() {
+        return [...this.valueInternal];
+    }
+    set value(nextValue) {
+        this.valueInternal = [...nextValue];
+        this.setAttribute("value", JSON.stringify(nextValue));
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            const raw = this.getAttribute("value");
+            if (!raw) {
+                this.valueInternal = [];
+            }
+            else {
+                try {
+                    const parsed = JSON.parse(raw);
+                    this.valueInternal = Array.isArray(parsed) ? parsed : [];
+                }
+                catch {
+                    this.valueInternal = [];
+                }
+            }
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return formDataFromNamedValues(this.name, this.valueInternal);
+    }
+    restoreFormValue(value) {
+        const next = stringValuesFromFormValue(value, this.name);
+        this.valueInternal = next;
+        this.setAttribute("value", JSON.stringify(next));
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${checkboxGroupStyles}</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"]');
+    }
+    setupListeners() {
+        this.optionsContainerEl.addEventListener("change", event => {
+            if (this.disabled) {
+                return;
+            }
+            const target = event.target;
+            if (target.getAttribute("part") !== "input") {
+                return;
+            }
+            const selected = Array.from(this.optionsContainerEl.querySelectorAll('[part="input"]:checked')).map(node => node.value);
+            this.valueInternal = selected;
+            this.setAttribute("value", JSON.stringify(selected));
+            this.syncFormAssociation();
+            this.dispatchEvent(new CustomEvent("value-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { value: [...selected] },
+            }));
+        });
+    }
+    update() {
+        if (!this.legendEl || !this.optionsContainerEl || !this.errorEl) {
+            return;
+        }
+        this.legendEl.textContent = this.label;
+        const optionsJson = JSON.stringify(this.options);
+        if (optionsJson !== this.lastOptionsJson) {
+            this.optionsContainerEl.innerHTML = this.options
+                .map(option => `
+            <label part="option">
+              <input
+                type="checkbox"
+                part="input"
+                value="${escapeHtml(option.value)}"
+                data-option-disabled="${option.disabled ? "true" : "false"}"
+              />
+              <span part="option-label">${escapeHtml(option.label)}</span>
+            </label>
+          `)
+                .join("");
+            this.lastOptionsJson = optionsJson;
+        }
+        this.optionsContainerEl.querySelectorAll('[part="input"]').forEach(node => {
+            const input = node;
+            input.checked = this.valueInternal.includes(input.value);
+            const optionDisabled = input.dataset.optionDisabled === "true";
+            if (this.disabled || optionDisabled) {
+                input.setAttribute("disabled", "");
+            }
+            else {
+                input.removeAttribute("disabled");
+            }
+        });
+        this.applyInvalidStateToControls(Array.from(this.optionsContainerEl.querySelectorAll('[part="input"]')), this.errorEl);
+    }
+}
+export const defineBoxCheckboxGroupElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxCheckboxGroupElement);
+    return BoxCheckboxGroupElement;
+};

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

@@ -0,0 +1,28 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxCheckboxElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private checkedInternal;
+    private indeterminateInternal;
+    private valueInternal;
+    private inputEl;
+    private labelEl;
+    private errorEl;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    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;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxCheckboxElement: (tagName?: string) => typeof BoxCheckboxElement;