@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/switch.js

@@ -0,0 +1,302 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-switch";
+const DEFAULT_VALUE = "on";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+/** Track/thumb sized toward BUE `.toggle-simple` 40×20. */
+const switchStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="switch"] {
+    appearance: none;
+    border: none;
+    background: transparent;
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    color: inherit;
+    text-align: left;
+    display: inline-flex;
+    align-items: flex-start;
+    gap: ${boeSpace[2]};
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  [part="switch"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: 2px;
+    border-radius: ${boeRadius.med};
+  }
+
+  [part="switch"]:disabled {
+    opacity: ${boeControl.disabledOpacity};
+    cursor: not-allowed;
+  }
+
+  [part~="track"] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    inline-size: 40px;
+    block-size: 20px;
+    padding: 2px;
+    box-sizing: border-box;
+    border-radius: ${boeRadius.pill};
+    background: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    box-shadow: none;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="switch"]:hover:not(:disabled) [part~="track"][data-checked="false"] {
+    background: color-mix(in srgb, var(--boe-token-stroke-stroke-hover, #bcbcbc) 85%, black 15%);
+  }
+
+  [part~="track"][data-checked="true"] {
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="switch"]:hover:not(:disabled) [part~="track"][data-checked="true"] {
+    background: var(--boe-token-surface-surface-brand-hover, #006ae9);
+  }
+
+  [part="switch"]:active:not(:disabled) [part~="track"][data-checked="true"] {
+    background: var(--boe-token-surface-surface-brand-pressed, #004eac);
+  }
+
+  [part~="thumb"] {
+    inline-size: 16px;
+    block-size: 16px;
+    border-radius: ${boeRadius.pill};
+    background: var(--boe-token-surface-surface, #ffffff);
+    border: 1px solid var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    box-shadow: none;
+    transform: translateX(0);
+    transition: transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="thumb"][data-checked="true"] {
+    transform: translateX(20px);
+    border-color: transparent;
+  }
+
+  [part="content"] {
+    display: grid;
+    gap: 0.2rem;
+    padding-block-start: 0.05rem;
+  }
+
+  [part="label"] {
+    font-weight: 600;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="description"] {
+    font-size: 0.9rem;
+    line-height: 1.45;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxSwitchElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "checked",
+            "description",
+            "disabled",
+            "label",
+            "value",
+        ];
+    }
+    checkedInternal = false;
+    valueInternal = DEFAULT_VALUE;
+    switchEl;
+    trackEl;
+    thumbEl;
+    labelEl;
+    descriptionEl;
+    contentEl;
+    errorEl;
+    get checked() {
+        return this.checkedInternal;
+    }
+    set checked(value) {
+        const nextValue = Boolean(value);
+        this.checkedInternal = nextValue;
+        if (nextValue) {
+            this.setAttribute("checked", "");
+        }
+        else {
+            this.removeAttribute("checked");
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get description() {
+        return this.getAttribute("description") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Switch";
+    }
+    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 === "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.removeAttribute("checked");
+        }
+        else {
+            this.checkedInternal = true;
+            this.setAttribute("checked", "");
+            if (typeof value === "string") {
+                this.valueInternal = value;
+                this.setAttribute("value", value);
+            }
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    toggleChecked() {
+        if (this.disabled) {
+            return;
+        }
+        const nextValue = !this.checkedInternal;
+        this.checkedInternal = nextValue;
+        if (nextValue) {
+            this.setAttribute("checked", "");
+        }
+        else {
+            this.removeAttribute("checked");
+        }
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("checked-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { checked: nextValue },
+        }));
+        this.update();
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${switchStyles}</style>
+      <button
+        type="button"
+        part="switch"
+        role="switch"
+      >
+        <span part="track" data-checked="false">
+          <span part="thumb" data-checked="false"></span>
+        </span>
+        <span part="content">
+          <span part="label"></span>
+          <span part="description"></span>
+        </span>
+      </button>
+      ${formErrorMessageMarkup()}
+    `;
+        this.switchEl = this.shadowRoot.querySelector('[part="switch"]');
+        this.trackEl = this.shadowRoot.querySelector('[part="track"]');
+        this.thumbEl = this.shadowRoot.querySelector('[part="thumb"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
+        this.contentEl = this.shadowRoot.querySelector('[part="content"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.switchEl.addEventListener("click", () => {
+            this.toggleChecked();
+        });
+    }
+    update() {
+        if (!this.switchEl || !this.errorEl) {
+            return;
+        }
+        const checkedStr = String(this.checkedInternal);
+        this.switchEl.setAttribute("aria-label", escapeHtml(this.label));
+        this.switchEl.setAttribute("aria-checked", checkedStr);
+        this.switchEl.setAttribute("aria-disabled", String(this.disabled));
+        if (this.disabled) {
+            this.switchEl.setAttribute("disabled", "");
+        }
+        else {
+            this.switchEl.removeAttribute("disabled");
+        }
+        this.trackEl.dataset.checked = checkedStr;
+        this.trackEl.setAttribute("part", this.checkedInternal ? "track track-checked" : "track");
+        this.thumbEl.dataset.checked = checkedStr;
+        this.thumbEl.setAttribute("part", this.checkedInternal ? "thumb thumb-checked" : "thumb");
+        this.labelEl.textContent = this.label;
+        const desc = this.description;
+        if (desc) {
+            this.descriptionEl.textContent = desc;
+            this.descriptionEl.style.display = "";
+        }
+        else {
+            this.descriptionEl.textContent = "";
+            this.descriptionEl.style.display = "none";
+        }
+        this.applyInvalidState(this.switchEl, this.errorEl);
+    }
+}
+export const defineBoxSwitchElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSwitchElement);
+    return BoxSwitchElement;
+};

package/dist/components/forms/tag-input.d.ts

@@ -0,0 +1,46 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+/**
+ * A token/tag entry field: type a value and commit it with Enter or comma to add
+ * a removable chip; Backspace on an empty field removes the last tag. Tags are
+ * available as the `tags` array property and mirrored to the `value` attribute
+ * as a comma-separated list.
+ */
+export declare class BoxTagInputElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private tagsInternal;
+    private draft;
+    private lastTagsJson;
+    private labelEl;
+    private controlEl;
+    private tagsEl;
+    private inputEl;
+    private errorEl;
+    get tags(): string[];
+    set tags(next: string[]);
+    get value(): string;
+    set value(next: string);
+    get label(): string;
+    set label(next: string);
+    get placeholder(): string;
+    set placeholder(next: string);
+    get max(): number;
+    set max(next: number);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    private dedupe;
+    private reflectValue;
+    addTag(rawTag: string): boolean;
+    removeTag(tag: string): boolean;
+    private emit;
+    private commitDraft;
+    private handleKeydown;
+    private restoreFocus;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxTagInputElement: (tagName?: string) => typeof BoxTagInputElement;