@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/pill-selector-dropdown.js

@@ -0,0 +1,499 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-pill-selector-dropdown";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const pillSelectorStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+  }
+
+  [part="pill"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 70%, var(--boe-token-surface-surface, #ffffff) 30%);
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    font-size: 0.82rem;
+    font-weight: 600;
+  }
+
+  [part="pill-remove"] {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.1rem;
+    block-size: 1.1rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+  }
+
+  [part="pill-remove"] svg {
+    inline-size: 0.65rem;
+    block-size: 0.65rem;
+  }
+
+  [part="pill-remove"]:hover {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 16%, transparent);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="dropdown"] {
+    position: relative;
+    display: inline-block;
+  }
+
+  [part="trigger"] {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.3rem 0.6rem;
+    border: 1px dashed color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: 999px;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    font-size: 0.82rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  [part="trigger"]:hover {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="trigger"]:focus-visible,
+  [part="option"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 22%, transparent);
+  }
+
+  [part="menu"] {
+    position: absolute;
+    z-index: 10;
+    inset-block-start: calc(100% + 0.25rem);
+    inset-inline-start: 0;
+    min-inline-size: 11rem;
+    margin: 0;
+    padding: 0.3rem;
+    list-style: none;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface, #ffffff);
+    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
+  }
+
+  [part="option"] {
+    appearance: none;
+    display: block;
+    inline-size: 100%;
+    text-align: start;
+    padding: 0.4rem 0.55rem;
+    border: 0;
+    border-radius: ${boeRadius.med};
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+  }
+
+  [part="option"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="option-empty"] {
+    padding: 0.4rem 0.55rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 0.82rem;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+/**
+ * A multi-select pill field: the current selection shows as removable pills, and
+ * an "Add" dropdown offers the remaining options. Data arrives via `options`;
+ * the selection is exposed as `value` (a string[]) and every add/remove emits
+ * `value-changed`. The popup is a `role="menu"` of `role="menuitem"` buttons —
+ * opening focuses the first item; ArrowUp/Down/Home/End move focus, Escape (or
+ * moving focus outside) closes and returns focus to the trigger.
+ */
+export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "label",
+            "options",
+            "placeholder",
+            "value",
+        ];
+    }
+    valueInternal = [];
+    open = false;
+    menuFocusValue = null;
+    pendingFocus = null;
+    fieldEl;
+    pillsEl;
+    dropdownEl;
+    triggerEl;
+    menuEl = null;
+    errorEl;
+    // Close the open menu when a pointer press lands outside this element. Bound
+    // once so it can be added/removed cleanly; a focusout listener can't be used
+    // because every interaction re-renders and transiently drops focus to body.
+    onOutsidePointer = (event) => {
+        if (!this.open) {
+            return;
+        }
+        const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        if (!path.some(node => node === this)) {
+            this.closeMenu(false);
+        }
+    };
+    get label() {
+        return this.getAttribute("label") ?? "Selection";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get placeholder() {
+        return this.getAttribute("placeholder") ?? "Add";
+    }
+    set placeholder(value) {
+        this.setAttribute("placeholder", 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", JSON.stringify(nextValue));
+        this.syncFormAssociation();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener("pointerdown", this.onOutsidePointer);
+    }
+    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();
+        }
+    }
+    availableOptions() {
+        return this.options.filter(option => !this.valueInternal.includes(option.value));
+    }
+    labelFor(value) {
+        return this.options.find(option => option.value === value)?.label ?? value;
+    }
+    commit(next) {
+        this.valueInternal = next;
+        const serialized = JSON.stringify(next);
+        // Render exactly once: setAttribute already triggers attributeChangedCallback
+        // (which updates), so only update manually when the attribute is unchanged.
+        if (this.getAttribute("value") === serialized) {
+            if (this.isRendered) {
+                this.update();
+            }
+        }
+        else {
+            this.setAttribute("value", serialized);
+        }
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: [...next] },
+        }));
+    }
+    addValue(value) {
+        if (!value || this.valueInternal.includes(value)) {
+            return;
+        }
+        const next = [...this.valueInternal, value];
+        const remaining = this.options.filter(option => !next.includes(option.value));
+        this.menuFocusValue = remaining[0]?.value ?? null;
+        this.pendingFocus = remaining.length ? "menu" : "trigger";
+        this.commit(next);
+    }
+    removeValue(value) {
+        if (!this.valueInternal.includes(value)) {
+            return;
+        }
+        this.pendingFocus = "trigger";
+        this.commit(this.valueInternal.filter(item => item !== value));
+    }
+    openMenu() {
+        if (this.open) {
+            return;
+        }
+        this.open = true;
+        this.menuFocusValue = this.availableOptions()[0]?.value ?? null;
+        this.pendingFocus = this.menuFocusValue ? "menu" : null;
+        document.addEventListener("pointerdown", this.onOutsidePointer);
+        this.update();
+    }
+    closeMenu(focusTrigger) {
+        if (!this.open) {
+            return;
+        }
+        this.open = false;
+        this.menuFocusValue = null;
+        this.pendingFocus = focusTrigger ? "trigger" : null;
+        document.removeEventListener("pointerdown", this.onOutsidePointer);
+        this.update();
+    }
+    moveMenuFocus(delta) {
+        const available = this.availableOptions();
+        if (!available.length) {
+            return;
+        }
+        const currentIndex = available.findIndex(option => option.value === this.menuFocusValue);
+        const nextIndex = Math.max(0, Math.min(available.length - 1, currentIndex + delta));
+        this.menuFocusValue = available[nextIndex]?.value ?? null;
+        this.pendingFocus = "menu";
+        this.update();
+    }
+    moveMenuFocusTo(edge) {
+        const available = this.availableOptions();
+        if (!available.length) {
+            return;
+        }
+        this.menuFocusValue = (edge === "first" ? available[0] : available[available.length - 1])?.value ?? null;
+        this.pendingFocus = "menu";
+        this.update();
+    }
+    applyPendingFocus() {
+        if (!this.pendingFocus) {
+            return;
+        }
+        const pending = this.pendingFocus;
+        this.pendingFocus = null;
+        if (pending === "trigger") {
+            this.triggerEl.focus();
+            return;
+        }
+        if (pending === "menu" && this.menuFocusValue && this.menuEl) {
+            const target = Array.from(this.menuEl.querySelectorAll('[part="option"]')).find(node => node.dataset.value === this.menuFocusValue);
+            target?.focus();
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${pillSelectorStyles}</style>
+      <div part="field" role="group">
+        <span part="pills"></span>
+        <div part="dropdown">
+          <button type="button" part="trigger" aria-haspopup="menu"></button>
+        </div>
+        ${formErrorMessageMarkup()}
+      </div>
+    `;
+        this.fieldEl = this.shadowRoot.querySelector('[part="field"]');
+        this.pillsEl = this.shadowRoot.querySelector('[part="pills"]');
+        this.dropdownEl = this.shadowRoot.querySelector('[part="dropdown"]');
+        this.triggerEl = this.shadowRoot.querySelector('[part="trigger"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.triggerEl.addEventListener("click", () => {
+            if (this.open) {
+                this.closeMenu(true);
+            }
+            else {
+                this.openMenu();
+            }
+        });
+        this.triggerEl.addEventListener("keydown", event => {
+            const key = event.key;
+            if ((key === "ArrowDown" || key === "Enter" || key === " ") && !this.open) {
+                event.preventDefault();
+                this.openMenu();
+            }
+            else if (key === "Escape" && this.open) {
+                event.preventDefault();
+                this.closeMenu(true);
+            }
+        });
+        this.pillsEl.addEventListener("click", event => {
+            const remove = event.target.closest('[part="pill-remove"]');
+            if (!remove || !this.pillsEl.contains(remove)) {
+                return;
+            }
+            this.removeValue(remove.dataset.value ?? "");
+        });
+        this.dropdownEl.addEventListener("click", event => {
+            const option = event.target.closest('[part="option"]');
+            if (!option || !this.dropdownEl.contains(option)) {
+                return;
+            }
+            this.addValue(option.dataset.value ?? "");
+        });
+        this.dropdownEl.addEventListener("keydown", event => {
+            const option = event.target.closest('[part="option"]');
+            if (!option || !this.dropdownEl.contains(option)) {
+                return;
+            }
+            const keyboardEvent = event;
+            switch (keyboardEvent.key) {
+                case "ArrowDown":
+                    keyboardEvent.preventDefault();
+                    this.moveMenuFocus(1);
+                    break;
+                case "ArrowUp":
+                    keyboardEvent.preventDefault();
+                    this.moveMenuFocus(-1);
+                    break;
+                case "Home":
+                    keyboardEvent.preventDefault();
+                    this.moveMenuFocusTo("first");
+                    break;
+                case "End":
+                    keyboardEvent.preventDefault();
+                    this.moveMenuFocusTo("last");
+                    break;
+                case "Escape":
+                    keyboardEvent.preventDefault();
+                    this.closeMenu(true);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    update() {
+        if (!this.fieldEl || !this.pillsEl || !this.triggerEl || !this.errorEl) {
+            return;
+        }
+        this.fieldEl.setAttribute("aria-label", this.label);
+        this.triggerEl.textContent = `+ ${this.placeholder}`;
+        this.triggerEl.setAttribute("aria-expanded", String(this.open));
+        this.pillsEl.innerHTML = this.valueInternal
+            .map(value => `
+          <span part="pill" data-value="${escapeHtml(value)}">
+            <span part="pill-label">${escapeHtml(this.labelFor(value))}</span>
+            <button type="button" part="pill-remove" data-value="${escapeHtml(value)}" aria-label="Remove ${escapeHtml(this.labelFor(value))}">
+              <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+            </button>
+          </span>
+        `)
+            .join("");
+        const available = this.availableOptions();
+        if (this.open) {
+            if (!this.menuEl) {
+                this.menuEl = document.createElement("ul");
+                this.menuEl.setAttribute("part", "menu");
+                this.menuEl.setAttribute("role", "menu");
+                this.dropdownEl.append(this.menuEl);
+            }
+            this.menuEl.setAttribute("aria-label", `${this.label} options`);
+            this.menuEl.innerHTML = available.length
+                ? available
+                    .map(option => `
+                <li part="option-row" role="none">
+                  <button
+                    type="button"
+                    part="option"
+                    role="menuitem"
+                    data-value="${escapeHtml(option.value)}"
+                    tabindex="${option.value === this.menuFocusValue ? "0" : "-1"}"
+                  >${escapeHtml(option.label)}</button>
+                </li>
+              `)
+                    .join("")
+                : `<li part="option-empty" role="none">No more options</li>`;
+        }
+        else if (this.menuEl) {
+            this.menuEl.remove();
+            this.menuEl = null;
+        }
+        const focusableControls = [
+            this.triggerEl,
+            ...Array.from(this.pillsEl.querySelectorAll('[part="pill-remove"]')),
+        ];
+        if (this.menuEl) {
+            focusableControls.push(...Array.from(this.menuEl.querySelectorAll('[part="option"]')));
+        }
+        this.applyInvalidStateToControls(focusableControls, this.errorEl);
+        this.applyPendingFocus();
+    }
+}
+export const defineBoxPillSelectorDropdownElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPillSelectorDropdownElement);
+    return BoxPillSelectorDropdownElement;
+};

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

@@ -0,0 +1,32 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxRadioGroupElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private groupName;
+    private lastOptionsJson;
+    private legendEl;
+    private optionsContainerEl;
+    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;
+    private getRadioGroupName;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxRadioGroupElement: (tagName?: string) => typeof BoxRadioGroupElement;