@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/pill-cloud.js

@@ -0,0 +1,230 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-pill-cloud";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const pillCloudStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="cloud"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  [part~="pill"] {
+    appearance: none;
+    padding: 0.35rem 0.75rem;
+    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.82rem;
+    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-selected"] {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+    color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 74%, var(--boe-token-text-text, #222222));
+  }
+
+  [part~="pill"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 22%, transparent);
+  }
+
+  [part~="pill"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  [part="empty"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 0.86rem;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+/**
+ * A cloud of toggle pills for multi-select filtering — think facet chips. Data
+ * arrives via `options`; the selected set is exposed as `value` (a string[]) and
+ * announced with `value-changed`. Each pill is a toggle button with
+ * `aria-pressed`; the group is a labelled `role="group"`.
+ */
+export class BoxPillCloudElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "label",
+            "options",
+            "value",
+        ];
+    }
+    valueInternal = [];
+    lastOptionsJson = "";
+    rootEl;
+    errorEl;
+    get label() {
+        return this.getAttribute("label") ?? "Filters";
+    }
+    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", 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();
+        }
+    }
+    toggle(value) {
+        const next = this.valueInternal.includes(value)
+            ? this.valueInternal.filter(item => item !== value)
+            : [...this.valueInternal, value];
+        this.valueInternal = next;
+        this.setAttribute("value", JSON.stringify(next));
+        if (this.isRendered) {
+            this.update();
+        }
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: [...next] },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${pillCloudStyles}</style>
+      <div part="root"></div>
+      ${formErrorMessageMarkup()}
+    `;
+        this.rootEl = this.shadowRoot.querySelector('[part="root"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.rootEl.addEventListener("click", event => {
+            const pill = event.target.closest('[part~="pill"]');
+            if (!pill || !this.rootEl.contains(pill)) {
+                return;
+            }
+            this.toggle(pill.dataset.value ?? "");
+        });
+    }
+    update() {
+        if (!this.rootEl || !this.errorEl) {
+            return;
+        }
+        if (!this.options.length) {
+            this.rootEl.innerHTML = `<div part="empty">No options</div>`;
+            this.lastOptionsJson = "";
+            this.applyInvalidStateToControls([], this.errorEl);
+            return;
+        }
+        const optionsJson = JSON.stringify(this.options);
+        if (optionsJson !== this.lastOptionsJson || !this.rootEl.querySelector('[part="cloud"]')) {
+            this.rootEl.innerHTML = `
+        <div part="cloud" role="group" aria-label="${escapeHtml(this.label)}">
+          ${this.options
+                .map(option => `
+                <button
+                  type="button"
+                  part="pill"
+                  data-value="${escapeHtml(option.value)}"
+                  ${option.disabled ? "disabled" : ""}
+                >${escapeHtml(option.label)}</button>
+              `)
+                .join("")}
+        </div>
+      `;
+            this.lastOptionsJson = optionsJson;
+        }
+        const cloud = this.rootEl.querySelector('[part="cloud"]');
+        cloud?.setAttribute("aria-label", this.label);
+        this.rootEl.querySelectorAll('[part~="pill"]').forEach(node => {
+            const button = node;
+            const isSelected = this.valueInternal.includes(button.dataset.value ?? "");
+            button.setAttribute("part", isSelected ? "pill pill-selected" : "pill");
+            button.setAttribute("aria-pressed", String(isSelected));
+        });
+        this.applyInvalidStateToControls(Array.from(this.rootEl.querySelectorAll('[part~="pill"]')), this.errorEl);
+    }
+}
+export const defineBoxPillCloudElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPillCloudElement);
+    return BoxPillCloudElement;
+};

package/dist/components/forms/pill-selector-dropdown.d.ts

@@ -0,0 +1,55 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+type PillOption = {
+    value: string;
+    label: string;
+};
+/**
+ * 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 declare class BoxPillSelectorDropdownElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private open;
+    private menuFocusValue;
+    private pendingFocus;
+    private fieldEl;
+    private pillsEl;
+    private dropdownEl;
+    private triggerEl;
+    private menuEl;
+    private errorEl;
+    private readonly onOutsidePointer;
+    get label(): string;
+    set label(value: string);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get options(): PillOption[];
+    set options(value: PillOption[]);
+    get value(): string[];
+    set value(nextValue: string[]);
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    private availableOptions;
+    private labelFor;
+    private commit;
+    private addValue;
+    private removeValue;
+    private openMenu;
+    private closeMenu;
+    private moveMenuFocus;
+    private moveMenuFocusTo;
+    private applyPendingFocus;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxPillSelectorDropdownElement: (tagName?: string) => typeof BoxPillSelectorDropdownElement;
+export {};