@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/dual-listbox.js

@@ -0,0 +1,484 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
+import { applyRovingTabindex, handleRovingKeydown } from "../../foundations/a11y/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-dual-listbox";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const dualListboxStyles = `
+  :host {
+    display: block;
+    /* Fill the host container so the two panels get their full width; as a bare
+       block this collapses to content width in flex/inline parents, cramping the
+       panels and clipping option labels. */
+    inline-size: 100%;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-inline-size: 0;
+  }
+
+  [part="label"] {
+    margin: 0 0 0.55rem;
+    padding: 0;
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  [part="layout"] {
+    display: flex;
+    align-items: stretch;
+    gap: 0.65rem;
+    min-inline-size: 0;
+  }
+
+  [part="available-panel"],
+  [part="selected-panel"] {
+    flex: 1 1 0;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 0.55rem;
+    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-secondary, #fbfbfb);
+    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
+  }
+
+  [part="list-label"] {
+    display: block;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    opacity: 0.75;
+  }
+
+  [part="list"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-block-size: 10rem;
+    max-block-size: 18rem;
+    overflow: auto;
+  }
+
+  [part="option"] {
+    width: 100%;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    padding: 0.5rem 0.65rem;
+    cursor: pointer;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="option"]:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 100%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-hover, #eef4fb) 52%, var(--boe-token-surface-surface, #ffffff) 48%);
+  }
+
+  [part="option"][aria-selected="true"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 22%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-selected, #f2f7fd) 72%, var(--boe-token-surface-surface, #ffffff) 28%);
+    box-shadow: inset 0 0 0 1px rgba(0, 97, 213, 0.06);
+  }
+
+  [part="option"]:focus-visible,
+  [part="move-right"]:focus-visible,
+  [part="move-left"]:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 2px;
+  }
+
+  [part="option"]:disabled,
+  [part="move-right"]:disabled,
+  [part="move-left"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  [part="actions"] {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.45rem;
+    padding-block: 0.55rem 0;
+    padding-inline: 0;
+  }
+
+  [part="move-right"],
+  [part="move-left"] {
+    inline-size: 1.65rem;
+    block-size: 1.65rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 88%, transparent);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: inherit;
+    font: inherit;
+    font-size: 0.8rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="move-right"]:hover:not(:disabled),
+  [part="move-left"]:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 22%, transparent);
+    background: var(--boe-token-surface-item-surface-hover, #eef4fb);
+  }
+
+  [part="empty"] {
+    display: grid;
+    place-items: center;
+    min-block-size: 100%;
+    border: 1px dashed rgba(214, 224, 234, 0.72);
+    border-radius: ${boeRadius.med};
+    padding: 0.65rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 65%, transparent);
+    text-align: center;
+  }
+
+  @media (max-width: 720px) {
+    [part="layout"] {
+      flex-direction: column;
+    }
+
+    [part="actions"] {
+      flex-direction: row;
+      justify-content: center;
+      padding-block: 0;
+    }
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxDualListboxElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "options",
+            "value",
+        ];
+    }
+    availableSelection = new Set();
+    chosenSelection = new Set();
+    valueInternal = [];
+    legendEl;
+    availableListEl;
+    selectedListEl;
+    moveRightEl;
+    moveLeftEl;
+    errorEl;
+    listsSignature = "";
+    selectionOnlyUpdate = false;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Dual Listbox";
+    }
+    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();
+    }
+    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();
+        }
+    }
+    emitValueChanged(nextValue) {
+        this.valueInternal = [...nextValue];
+        this.setAttribute("value", JSON.stringify(nextValue));
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: [...nextValue] },
+        }));
+    }
+    moveSelected(direction) {
+        if (this.disabled) {
+            return;
+        }
+        if (direction === "to-selected") {
+            const moving = this.options
+                .filter(option => this.availableSelection.has(option.value) && !option.disabled)
+                .map(option => option.value);
+            if (moving.length === 0) {
+                return;
+            }
+            const nextValue = this.options
+                .map(option => option.value)
+                .filter(value => this.valueInternal.includes(value) || moving.includes(value));
+            this.availableSelection.clear();
+            this.emitValueChanged(nextValue);
+            return;
+        }
+        const moving = this.options
+            .filter(option => this.chosenSelection.has(option.value) && !option.disabled)
+            .map(option => option.value);
+        if (moving.length === 0) {
+            return;
+        }
+        const nextValue = this.valueInternal.filter(value => !moving.includes(value));
+        this.chosenSelection.clear();
+        this.emitValueChanged(nextValue);
+    }
+    toggleSelection(list, value) {
+        const set = list === "available" ? this.availableSelection : this.chosenSelection;
+        if (set.has(value)) {
+            set.delete(value);
+        }
+        else {
+            set.add(value);
+        }
+        if (this.isRendered) {
+            this.selectionOnlyUpdate = true;
+            this.update();
+            this.selectionOnlyUpdate = false;
+        }
+    }
+    patchSelectionState() {
+        const patchList = (listEl, selection) => {
+            listEl.querySelectorAll('[part="option"]').forEach(node => {
+                const button = node;
+                const selected = selection.has(button.dataset.value ?? "");
+                button.setAttribute("aria-selected", String(selected));
+            });
+        };
+        patchList(this.availableListEl, this.availableSelection);
+        patchList(this.selectedListEl, this.chosenSelection);
+    }
+    listsKey(availableItems, selectedItems) {
+        return JSON.stringify({
+            available: availableItems.map(option => [option.value, option.label, Boolean(option.disabled)]),
+            selected: selectedItems.map(option => [option.value, option.label, Boolean(option.disabled)]),
+            disabled: this.disabled,
+        });
+    }
+    renderListItems(list, items) {
+        const selection = list === "available" ? this.availableSelection : this.chosenSelection;
+        if (!items.length) {
+            return `<div part="empty">No items</div>`;
+        }
+        return items
+            .map(option => `
+          <button
+            type="button"
+            part="option"
+            role="option"
+            data-list="${list}"
+            data-value="${escapeHtml(option.value)}"
+            aria-selected="${String(selection.has(option.value))}"
+            ${option.disabled || this.disabled ? "disabled" : ""}
+          >
+            ${escapeHtml(option.label)}
+          </button>
+        `)
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${dualListboxStyles}</style>
+      <fieldset part="field">
+        <legend part="label"></legend>
+        <div part="layout">
+          <div part="available-panel">
+            <strong part="list-label">Available</strong>
+            <div part="list" role="listbox" aria-label="Available" aria-multiselectable="true" data-list="available"></div>
+          </div>
+          <div part="actions">
+            <button type="button" part="move-right" aria-label="Move selected items to chosen list">&gt;</button>
+            <button type="button" part="move-left" aria-label="Move selected items to available list">&lt;</button>
+          </div>
+          <div part="selected-panel">
+            <strong part="list-label">Chosen</strong>
+            <div part="list" role="listbox" aria-label="Chosen" aria-multiselectable="true" data-list="selected"></div>
+          </div>
+        </div>
+        ${formErrorMessageMarkup()}
+      </fieldset>
+    `;
+        this.legendEl = this.shadowRoot.querySelector('[part="label"]');
+        this.availableListEl = this.shadowRoot.querySelector('[data-list="available"]');
+        this.selectedListEl = this.shadowRoot.querySelector('[data-list="selected"]');
+        this.moveRightEl = this.shadowRoot.querySelector('[part="move-right"]');
+        this.moveLeftEl = this.shadowRoot.querySelector('[part="move-left"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        const handleListClick = (event) => {
+            const button = event.target.closest('[part="option"]');
+            if (!button) {
+                return;
+            }
+            const list = button.dataset.list ?? "available";
+            const value = button.dataset.value ?? "";
+            if (!value || this.disabled || button.disabled) {
+                return;
+            }
+            this.toggleSelection(list, value);
+        };
+        const handleListKeydown = (event) => {
+            const keyboardEvent = event;
+            const listEl = keyboardEvent.currentTarget;
+            const options = Array.from(listEl.querySelectorAll('[part="option"]:not([disabled])'));
+            if (handleRovingKeydown(keyboardEvent, options, { orientation: "vertical" })) {
+                return;
+            }
+            if (keyboardEvent.key !== " " && keyboardEvent.key !== "Enter") {
+                return;
+            }
+            const button = keyboardEvent.target.closest('[part="option"]');
+            if (!button || button.disabled || this.disabled) {
+                return;
+            }
+            keyboardEvent.preventDefault();
+            const list = button.dataset.list ?? "available";
+            this.toggleSelection(list, button.dataset.value ?? "");
+        };
+        this.availableListEl.addEventListener("click", handleListClick);
+        this.selectedListEl.addEventListener("click", handleListClick);
+        this.availableListEl.addEventListener("keydown", handleListKeydown);
+        this.selectedListEl.addEventListener("keydown", handleListKeydown);
+        this.moveRightEl.addEventListener("click", () => this.moveSelected("to-selected"));
+        this.moveLeftEl.addEventListener("click", () => this.moveSelected("to-available"));
+    }
+    syncListRoving(listEl) {
+        const options = Array.from(listEl.querySelectorAll('[part="option"]:not([disabled])'));
+        const selectedIndex = Math.max(0, options.findIndex(button => button.getAttribute("aria-selected") === "true"));
+        applyRovingTabindex(options, selectedIndex);
+    }
+    update() {
+        if (!this.legendEl || !this.availableListEl || !this.selectedListEl || !this.errorEl) {
+            return;
+        }
+        this.legendEl.textContent = this.label;
+        if (this.selectionOnlyUpdate) {
+            this.patchSelectionState();
+            return;
+        }
+        const selectedSet = new Set(this.valueInternal);
+        const availableItems = this.options.filter(option => !selectedSet.has(option.value));
+        const selectedItems = this.options.filter(option => selectedSet.has(option.value));
+        const nextSignature = this.listsKey(availableItems, selectedItems);
+        if (nextSignature !== this.listsSignature || this.availableListEl.childElementCount === 0) {
+            this.listsSignature = nextSignature;
+            this.availableListEl.innerHTML = this.renderListItems("available", availableItems);
+            this.selectedListEl.innerHTML = this.renderListItems("selected", selectedItems);
+        }
+        else {
+            this.patchSelectionState();
+        }
+        this.syncListRoving(this.availableListEl);
+        this.syncListRoving(this.selectedListEl);
+        if (this.disabled) {
+            this.moveRightEl.setAttribute("disabled", "");
+            this.moveLeftEl.setAttribute("disabled", "");
+        }
+        else {
+            this.moveRightEl.removeAttribute("disabled");
+            this.moveLeftEl.removeAttribute("disabled");
+        }
+        const focusableControls = [
+            ...Array.from(this.availableListEl.querySelectorAll('[part="option"]')),
+            ...Array.from(this.selectedListEl.querySelectorAll('[part="option"]')),
+            this.moveRightEl,
+            this.moveLeftEl,
+        ];
+        this.applyInvalidStateToControls(focusableControls, this.errorEl);
+    }
+}
+export const defineBoxDualListboxElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxDualListboxElement);
+    return BoxDualListboxElement;
+};

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

@@ -0,0 +1,32 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A generic form grouping: a `<legend>`, an optional description, and slotted
+ * controls. Because slotted controls live in light DOM (outside the shadow
+ * `<fieldset>`), native `fieldset[disabled]` propagation cannot reach them, so
+ * `disabled` is mirrored onto the light-DOM controls directly. Groups arbitrary
+ * fields; use `box-checkbox-group`/`box-radio-group` for option lists.
+ */
+export declare class BoxFieldsetElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private fieldsetEl;
+    private bodyEl;
+    private legendEl;
+    private descriptionEl;
+    get label(): string;
+    set label(value: string);
+    get description(): string;
+    set description(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Reflect the group's disabled state onto the slotted (light-DOM) controls,
+     * which the shadow `<fieldset disabled>` cannot reach. Tracks which controls
+     * this element disabled so re-enabling never clobbers a control the consumer
+     * disabled on its own.
+     */
+    private syncDisabledControls;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxFieldsetElement: (tagName?: string) => typeof BoxFieldsetElement;

package/dist/components/forms/fieldset.js

@@ -0,0 +1,168 @@
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-fieldset";
+const DESCRIPTION_ID = "box-fieldset-description";
+const fieldsetStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="fieldset"] {
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-inline-size: 0;
+  }
+
+  [part="fieldset"][data-disabled="true"] {
+    opacity: 0.6;
+  }
+
+  [part="legend"] {
+    margin: 0 0 0.35rem;
+    padding: 0;
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="description"] {
+    margin: 0 0 0.5rem;
+    font-size: 0.86rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="body"] {
+    display: grid;
+    gap: 0.55rem;
+  }
+`;
+/**
+ * A generic form grouping: a `<legend>`, an optional description, and slotted
+ * controls. Because slotted controls live in light DOM (outside the shadow
+ * `<fieldset>`), native `fieldset[disabled]` propagation cannot reach them, so
+ * `disabled` is mirrored onto the light-DOM controls directly. Groups arbitrary
+ * fields; use `box-checkbox-group`/`box-radio-group` for option lists.
+ */
+export class BoxFieldsetElement extends BaseElement {
+    static get observedAttributes() {
+        return ["description", "disabled", "label"];
+    }
+    fieldsetEl;
+    bodyEl;
+    legendEl = null;
+    descriptionEl = null;
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.toggleAttribute("disabled", value);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === "disabled" && this.isRendered) {
+            this.syncDisabledControls();
+        }
+    }
+    /**
+     * Reflect the group's disabled state onto the slotted (light-DOM) controls,
+     * which the shadow `<fieldset disabled>` cannot reach. Tracks which controls
+     * this element disabled so re-enabling never clobbers a control the consumer
+     * disabled on its own.
+     */
+    syncDisabledControls() {
+        const controls = this.querySelectorAll("input, select, textarea, button, [disabled], [aria-disabled]");
+        for (const control of Array.from(controls)) {
+            if (this.disabled) {
+                if (!control.hasAttribute("disabled")) {
+                    control.setAttribute("disabled", "");
+                    control.setAttribute("data-box-fieldset-disabled", "");
+                }
+            }
+            else if (control.hasAttribute("data-box-fieldset-disabled")) {
+                control.removeAttribute("disabled");
+                control.removeAttribute("data-box-fieldset-disabled");
+            }
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${fieldsetStyles}</style>
+      <fieldset part="fieldset">
+        <div part="body">
+          <slot></slot>
+        </div>
+      </fieldset>
+    `;
+        this.fieldsetEl = this.shadowRoot.querySelector('[part="fieldset"]');
+        this.bodyEl = this.shadowRoot.querySelector('[part="body"]');
+    }
+    update() {
+        if (!this.fieldsetEl || !this.bodyEl) {
+            return;
+        }
+        const label = this.label;
+        const description = this.description;
+        if (label) {
+            if (!this.legendEl) {
+                this.legendEl = document.createElement("legend");
+                this.legendEl.setAttribute("part", "legend");
+                this.fieldsetEl.insertBefore(this.legendEl, this.bodyEl);
+            }
+            this.legendEl.textContent = label;
+        }
+        else if (this.legendEl) {
+            this.legendEl.remove();
+            this.legendEl = null;
+        }
+        if (description) {
+            if (!this.descriptionEl) {
+                this.descriptionEl = document.createElement("p");
+                this.descriptionEl.setAttribute("part", "description");
+                this.descriptionEl.id = DESCRIPTION_ID;
+                this.fieldsetEl.insertBefore(this.descriptionEl, this.bodyEl);
+            }
+            this.descriptionEl.textContent = description;
+            this.fieldsetEl.setAttribute("aria-describedby", DESCRIPTION_ID);
+        }
+        else {
+            this.descriptionEl?.remove();
+            this.descriptionEl = null;
+            this.fieldsetEl.removeAttribute("aria-describedby");
+        }
+        this.fieldsetEl.dataset.disabled = this.disabled ? "true" : "false";
+        if (this.disabled) {
+            this.fieldsetEl.setAttribute("disabled", "");
+        }
+        else {
+            this.fieldsetEl.removeAttribute("disabled");
+        }
+        this.syncDisabledControls();
+    }
+}
+export const defineBoxFieldsetElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxFieldsetElement);
+    return BoxFieldsetElement;
+};