tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/checkbox.js

@@ -1,429 +1,286 @@
-/**
- * TyCheckbox Web Component
- *
- * "Just the box" primitive — renders only the checkbox visual + state.
- * Label, required asterisk, and error display are the consumer's
- * responsibility — wrap in a `<label>` for click delegation.
- *
- * - Boolean checked state, form-associated
- * - Keyboard accessibility (Space/Enter)
- * - Sizes (xs, sm, md, lg, xl) and semantic flavors
- *
- * @example
- * <label>
- *   <ty-checkbox name="terms" required></ty-checkbox>
- *   I agree to the <a href="/terms">terms</a>
- * </label>
- */
+import { DEFAULT_SIZE } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { checkboxStyles, checkboxCustomFlavorCss } from "../styles/checkbox.js";
-/**
- * Checkmark icon (Lucide `check`, same glyph as ty-option's selected check;
- * stroke-width 3 for presence at 16px — it replaces a heavy fill glyph).
- * Same glyph for checked and unchecked — checked shows it at full color,
- * unchecked at faint color (see styles).
- */
 const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
-/**
- * Dash icon (Lucide `minus`) — shown while indeterminate.
- */
 const DASH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>`;
-/**
- * Ty Checkbox Component
- *
- * @example
- * ```html
- * <!-- Basic checkbox -->
- * <ty-checkbox>Subscribe to newsletter</ty-checkbox>
- *
- * <!-- Pre-checked with custom value -->
- * <ty-checkbox
- *   checked
- *   value="accepted"
- *   required>
- *   Accept terms
- * </ty-checkbox>
- *
- * <!-- With error state -->
- * <ty-checkbox
- *   required
- *   error="You must agree to continue"
- *   flavor="danger">
- *   Agree to terms
- * </ty-checkbox>
- *
- * <!-- Different sizes -->
- * <ty-checkbox size="sm">Small</ty-checkbox>
- * <ty-checkbox size="lg">Large</ty-checkbox>
- *
- * <!-- Semantic flavors -->
- * <ty-checkbox flavor="primary" checked>Primary</ty-checkbox>
- * <ty-checkbox flavor="success" checked>Success</ty-checkbox>
- *
- * <!-- Rich content (with icon) -->
- * <ty-checkbox checked>
- *   <ty-icon name="star"></ty-icon>
- *   Premium feature
- * </ty-checkbox>
- * ```
- */
 export class TyCheckbox extends TyComponent {
-    constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE - Not managed by PropertyManager
-        // NOTE: _internals provided by TyComponent base class
-        // ============================================================================
-        this._customFlavorSheet = null;
-        this._listenersSetup = false;
-        // Store references to handlers for cleanup
-        this._clickHandler = null;
-        this._keydownHandler = null;
-        this._focusHandler = null;
-        this._blurHandler = null;
-        // Apply styles to shadow root
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: checkboxStyles, id: "ty-checkbox" });
-    }
-    // observedAttributes auto-generated by TyComponent from properties config
-    // ============================================================================
-    // TYCOMPONENT LIFECYCLE HOOKS
-    // ============================================================================
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
-    onConnect() {
-        // Re-arm listeners on RE-connect: the base class skips render() when
-        // already rendered, and onDisconnect removed the listeners. No-ops on
-        // first connect (no container yet — render() attaches them).
-        this.setupEventListeners();
-        this._syncCustomFlavor();
-    }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
-    _syncCustomFlavor() {
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => checkboxCustomFlavorCss(base));
-    }
-    /**
-     * Called when component disconnects from DOM
-     */
-    onDisconnect() {
-        // Clean up event listeners when component is removed from DOM
-        this.removeEventListeners();
-    }
-    /**
-     * Handle property changes - called BEFORE render
-     */
-    onPropertiesChanged(changes) {
-        if (changes.some((c) => c.name === "flavor")) {
-            this._syncCustomFlavor();
-        }
-    }
-    /**
-     * Override form value to return value when checked, null when unchecked
-     */
-    getFormValue() {
-        return this.checked ? this.value : null;
-    }
-    // Removed old attributeChangedCallback, initializeCheckboxState, validateFlavor - handled by TyComponent
-    /**
-     * Build CSS class list for checkbox container
-     */
-    buildClassList() {
-        const classes = [this.size];
-        if (this.disabled)
-            classes.push("disabled");
-        if (this.required)
-            classes.push("required");
-        return classes.join(" ");
-    }
-    /**
-     * Handle checkbox click event - standards compliant approach
-     */
-    handleCheckboxClick(e) {
-        if (this.disabled)
-            return;
-        // Native semantics: clicking an indeterminate checkbox resolves to checked
-        const newValue = this.indeterminate ? true : !this.checked;
-        if (this.indeterminate)
-            this.indeterminate = false;
-        this.checked = newValue; // Uses setProperty which handles everything
-        // Emit custom events after property update
-        setTimeout(() => {
-            const eventDetail = {
-                value: newValue,
-                checked: newValue,
-                formValue: newValue ? this.value : null,
-                originalEvent: e,
-            };
-            this.dispatchEvent(new CustomEvent("input", {
-                detail: eventDetail,
-                bubbles: true,
-                composed: true,
-            }));
-            this.dispatchEvent(new CustomEvent("change", {
-                detail: eventDetail,
-                bubbles: true,
-                composed: true,
-            }));
-        }, 0);
-    }
-    /**
-     * Handle checkbox keyboard events - space/enter to toggle
-     */
-    handleCheckboxKeydown(e) {
-        if (this.disabled)
-            return;
-        if (["Space", " ", "Enter"].includes(e.key)) {
-            e.preventDefault(); // Prevent default for keyboard to avoid page scroll
-            e.stopPropagation();
-            this.handleCheckboxClick(e);
-        }
-    }
-    /**
-     * Remove event listeners for cleanup
-     */
-    removeEventListeners() {
-        if (!this._listenersSetup)
-            return;
-        // Click lives on the HOST (label delegation + full-element trigger) —
-        // remove it before the shadow-container guard below.
-        if (this._clickHandler) {
-            this.removeEventListener("click", this._clickHandler);
-            this._clickHandler = null;
-        }
-        const shadow = this.shadowRoot;
-        if (!shadow)
-            return;
-        const checkboxEl = shadow.querySelector(".checkbox-container");
-        if (!checkboxEl) {
-            this._listenersSetup = false;
-            return;
-        }
-        if (this._keydownHandler) {
-            checkboxEl.removeEventListener("keydown", this._keydownHandler);
-            this._keydownHandler = null;
-        }
-        if (this._focusHandler) {
-            checkboxEl.removeEventListener("focus", this._focusHandler);
-            this._focusHandler = null;
-        }
-        if (this._blurHandler) {
-            checkboxEl.removeEventListener("blur", this._blurHandler);
-            this._blurHandler = null;
-        }
-        this._listenersSetup = false;
-    }
-    /**
-     * Setup event listeners for checkbox functionality
-     * IMPORTANT: Only called ONCE, not on every render
-     */
-    setupEventListeners() {
-        if (this._listenersSetup)
-            return;
-        const shadow = this.shadowRoot;
-        const checkboxEl = shadow.querySelector(".checkbox-container");
-        if (!checkboxEl)
-            return;
-        // Create and store handler references for cleanup
-        this._clickHandler = (e) => {
-            this.handleCheckboxClick(e);
-        };
-        this._keydownHandler = (e) => {
-            this.handleCheckboxKeydown(e);
-        };
-        this._focusHandler = () => {
-            checkboxEl.classList.add("focused");
-        };
-        this._blurHandler = () => {
-            checkboxEl.classList.remove("focused");
-        };
-        // Click on the HOST: makes the whole element a trigger and lets a wrapping
-        // <label> delegate (the synthetic click lands on the host, not the shadow).
-        // Keyboard/focus stay on the focusable container.
-        this.addEventListener("click", this._clickHandler);
-        checkboxEl.addEventListener("keydown", this._keydownHandler);
-        checkboxEl.addEventListener("focus", this._focusHandler);
-        checkboxEl.addEventListener("blur", this._blurHandler);
-        this._listenersSetup = true;
-    }
-    /**
-     * Render the checkbox — just the box visual.
-     * Label, required asterisk, and error UI are the consumer's responsibility.
-     */
-    render() {
-        const shadow = this.shadowRoot;
-        let checkboxEl = shadow.querySelector(".checkbox-container");
-        const classes = this.buildClassList();
-        const ariaChecked = this.indeterminate ? "mixed" : String(this.checked);
-        if (!checkboxEl) {
-            checkboxEl = document.createElement("div");
-            checkboxEl.className = "checkbox-container " + classes;
-            checkboxEl.tabIndex = this.disabled ? -1 : 0;
-            checkboxEl.setAttribute("role", "checkbox");
-            checkboxEl.setAttribute("aria-checked", ariaChecked);
-            checkboxEl.setAttribute("aria-disabled", String(this.disabled));
-            checkboxEl.setAttribute("aria-required", String(this.required));
-            const checkboxIcon = document.createElement("div");
-            checkboxIcon.className = "checkbox-icon";
-            checkboxEl.appendChild(checkboxIcon);
-            shadow.appendChild(checkboxEl);
-        }
-        else {
-            checkboxEl.className = "checkbox-container " + classes;
-            checkboxEl.tabIndex = this.disabled ? -1 : 0;
-            checkboxEl.setAttribute("aria-checked", ariaChecked);
-            checkboxEl.setAttribute("aria-disabled", String(this.disabled));
-            checkboxEl.setAttribute("aria-required", String(this.required));
-        }
-        // Dash while indeterminate, tick otherwise (tick's color/opacity carries
-        // the checked/unchecked distinction via CSS).
-        const icon = checkboxEl.querySelector(".checkbox-icon");
-        icon.innerHTML = this.indeterminate ? DASH_ICON : CHECK_ICON;
-        // (Re)attach listeners — onDisconnect removes them, so a reconnected
-        // element needs them again even though the container already exists.
-        this.setupEventListeners();
-        // a11y: role="checkbox" lives on this inner element, but the associated
-        // <label> names the (form-associated) host. Mirror that name onto the role
-        // element so it has an accessible name.
-        this.applyLabelName(checkboxEl);
-        // Reflect constraint validation to the owning <form> (required was cosmetic).
-        this.updateValidity();
-    }
-    /** required + unchecked => valueMissing; otherwise valid. */
-    updateValidity() {
-        const anchor = this.shadowRoot?.querySelector(".checkbox-container");
-        if (this.disabled) {
-            this._internals.setValidity({});
-            return;
-        }
-        if (this.required && !this.checked) {
-            this._internals.setValidity({ valueMissing: true }, "Please check this box", anchor ?? undefined);
-        }
-        else {
-            this._internals.setValidity({});
-        }
-    }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simple wrappers (no logic!)
-    // ============================================================================
-    get checked() {
-        return this.getProperty("checked");
-    }
-    set checked(value) {
-        this.setProperty("checked", value);
-    }
-    get indeterminate() {
-        return this.getProperty("indeterminate");
-    }
-    set indeterminate(value) {
-        this.setProperty("indeterminate", value);
-    }
-    get value() {
-        return this.getProperty("value");
-    }
-    set value(val) {
-        this.setProperty("value", val);
-    }
-    get name() {
-        return this.getProperty("name");
-    }
-    set name(val) {
-        this.setProperty("name", val);
-    }
-    get disabled() {
-        return this.getProperty("disabled");
-    }
-    set disabled(value) {
-        this.setProperty("disabled", value);
-    }
-    get required() {
-        return this.getProperty("required");
-    }
-    set required(value) {
-        this.setProperty("required", value);
-    }
-    get size() {
-        return this.getProperty("size");
-    }
-    set size(value) {
-        this.setProperty("size", value);
-    }
-    get flavor() {
-        return this.getProperty("flavor");
-    }
-    set flavor(value) {
-        this.setProperty("flavor", value);
-    }
-    get form() {
-        return this._internals.form;
-    }
+constructor() {
+super();
+this._customFlavorSheet = null;
+this._listenersSetup = false;
+this._clickHandler = null;
+this._keydownHandler = null;
+this._focusHandler = null;
+this._blurHandler = null;
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: checkboxStyles, id: "ty-checkbox" });
+}
+onConnect() {
+this.setupEventListeners();
+this._syncCustomFlavor();
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => checkboxCustomFlavorCss(base));
+}
+onDisconnect() {
+this.removeEventListeners();
+}
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === "flavor")) {
+this._syncCustomFlavor();
+}
+}
+getFormValue() {
+return this.checked ? this.value : null;
+}
+buildClassList() {
+const classes = [this.size];
+if (this.disabled)
+classes.push("disabled");
+if (this.required)
+classes.push("required");
+return classes.join(" ");
+}
+handleCheckboxClick(e) {
+if (this.disabled)
+return;
+if (this.isDuplicateActivationClick())
+return;
+const newValue = this.indeterminate ? true : !this.checked;
+if (this.indeterminate)
+this.indeterminate = false;
+this.checked = newValue;
+setTimeout(() => {
+const eventDetail = {
+value: newValue,
+checked: newValue,
+formValue: newValue ? this.value : null,
+originalEvent: e,
+};
+this.dispatchEvent(new CustomEvent("input", {
+detail: eventDetail,
+bubbles: true,
+composed: true,
+}));
+this.dispatchEvent(new CustomEvent("change", {
+detail: eventDetail,
+bubbles: true,
+composed: true,
+}));
+}, 0);
+}
+handleCheckboxKeydown(e) {
+if (this.disabled)
+return;
+if (["Space", " ", "Enter"].includes(e.key)) {
+e.preventDefault();
+e.stopPropagation();
+this.handleCheckboxClick(e);
+}
+}
+removeEventListeners() {
+if (!this._listenersSetup)
+return;
+if (this._clickHandler) {
+this.removeEventListener("click", this._clickHandler);
+this._clickHandler = null;
+}
+const shadow = this.shadowRoot;
+if (!shadow)
+return;
+const checkboxEl = shadow.querySelector(".checkbox-container");
+if (!checkboxEl) {
+this._listenersSetup = false;
+return;
+}
+if (this._keydownHandler) {
+checkboxEl.removeEventListener("keydown", this._keydownHandler);
+this._keydownHandler = null;
+}
+if (this._focusHandler) {
+checkboxEl.removeEventListener("focus", this._focusHandler);
+this._focusHandler = null;
+}
+if (this._blurHandler) {
+checkboxEl.removeEventListener("blur", this._blurHandler);
+this._blurHandler = null;
+}
+this._listenersSetup = false;
+}
+setupEventListeners() {
+if (this._listenersSetup)
+return;
+const shadow = this.shadowRoot;
+const checkboxEl = shadow.querySelector(".checkbox-container");
+if (!checkboxEl)
+return;
+this._clickHandler = (e) => {
+this.handleCheckboxClick(e);
+};
+this._keydownHandler = (e) => {
+this.handleCheckboxKeydown(e);
+};
+this._focusHandler = () => {
+checkboxEl.classList.add("focused");
+};
+this._blurHandler = () => {
+checkboxEl.classList.remove("focused");
+};
+this.addEventListener("click", this._clickHandler);
+checkboxEl.addEventListener("keydown", this._keydownHandler);
+checkboxEl.addEventListener("focus", this._focusHandler);
+checkboxEl.addEventListener("blur", this._blurHandler);
+this._listenersSetup = true;
+}
+render() {
+const shadow = this.shadowRoot;
+let checkboxEl = shadow.querySelector(".checkbox-container");
+const classes = this.buildClassList();
+const ariaChecked = this.indeterminate ? "mixed" : String(this.checked);
+if (!checkboxEl) {
+checkboxEl = document.createElement("div");
+checkboxEl.className = "checkbox-container " + classes;
+checkboxEl.tabIndex = this.disabled ? -1 : 0;
+checkboxEl.setAttribute("role", "checkbox");
+checkboxEl.setAttribute("aria-checked", ariaChecked);
+checkboxEl.setAttribute("aria-disabled", String(this.disabled));
+checkboxEl.setAttribute("aria-required", String(this.required));
+const checkboxIcon = document.createElement("div");
+checkboxIcon.className = "checkbox-icon";
+checkboxEl.appendChild(checkboxIcon);
+shadow.appendChild(checkboxEl);
+}
+else {
+checkboxEl.className = "checkbox-container " + classes;
+checkboxEl.tabIndex = this.disabled ? -1 : 0;
+checkboxEl.setAttribute("aria-checked", ariaChecked);
+checkboxEl.setAttribute("aria-disabled", String(this.disabled));
+checkboxEl.setAttribute("aria-required", String(this.required));
+}
+const icon = checkboxEl.querySelector(".checkbox-icon");
+icon.innerHTML = this.indeterminate ? DASH_ICON : CHECK_ICON;
+this.setupEventListeners();
+this.applyLabelName(checkboxEl);
+this.updateValidity();
+}
+updateValidity() {
+const anchor = this.shadowRoot?.querySelector(".checkbox-container");
+if (this.disabled) {
+this._internals.setValidity({});
+return;
+}
+if (this.required && !this.checked) {
+this._internals.setValidity({ valueMissing: true }, "Please check this box", anchor ?? undefined);
+}
+else {
+this._internals.setValidity({});
+}
+}
+get checked() {
+return this.getProperty("checked");
+}
+set checked(value) {
+this.setProperty("checked", value);
+}
+get indeterminate() {
+return this.getProperty("indeterminate");
+}
+set indeterminate(value) {
+this.setProperty("indeterminate", value);
+}
+get value() {
+return this.getProperty("value");
+}
+set value(val) {
+this.setProperty("value", val);
+}
+get name() {
+return this.getProperty("name");
+}
+set name(val) {
+this.setProperty("name", val);
+}
+get disabled() {
+return this.getProperty("disabled");
+}
+set disabled(value) {
+this.setProperty("disabled", value);
+}
+get required() {
+return this.getProperty("required");
+}
+set required(value) {
+this.setProperty("required", value);
+}
+get size() {
+return this.getProperty("size");
+}
+set size(value) {
+this.setProperty("size", value);
+}
+get flavor() {
+return this.getProperty("flavor");
+}
+set flavor(value) {
+this.setProperty("flavor", value);
+}
+get form() {
+return this._internals.form;
+}
 }
 TyCheckbox.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyCheckbox.properties = {
-    // Core boolean state
-    checked: {
-        type: "boolean",
-        visual: true,
-        formValue: true, // Triggers form value update
-        emitChange: true, // Emits 'prop:change' event
-        default: false,
-    },
-    // Visual/ARIA "mixed" state (native semantics: no form-value effect,
-    // clicking resolves to checked)
-    indeterminate: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    // Form submission value (when checked)
-    value: {
-        type: "string",
-        default: "on",
-    },
-    name: {
-        type: "string",
-        default: "",
-    },
-    disabled: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    required: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    size: {
-        type: "string",
-        visual: true,
-        default: "md",
-        validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
-        coerce: (v) => {
-            if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
-                console.warn(`[ty-checkbox] Invalid size '${v}'. Using 'md'.`);
-                return "md";
-            }
-            return v;
-        },
-    },
-    // Any string is accepted: built-ins get static CSS, other identifiers
-    // become custom flavors (see _syncCustomFlavor), garbage degrades to
-    // the default look.
-    flavor: {
-        type: "string",
-        visual: true,
-        default: "neutral",
-    },
+checked: {
+type: "boolean",
+visual: true,
+formValue: true,
+emitChange: true,
+default: false,
+},
+indeterminate: {
+type: "boolean",
+visual: true,
+default: false,
+},
+value: {
+type: "string",
+default: "on",
+},
+name: {
+type: "string",
+default: "",
+},
+disabled: {
+type: "boolean",
+visual: true,
+default: false,
+},
+required: {
+type: "boolean",
+visual: true,
+default: false,
+},
+size: {
+type: "string",
+visual: true,
+default: DEFAULT_SIZE,
+validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
+coerce: (v) => {
+if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
+console.warn(`[ty-checkbox] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+},
+},
+flavor: {
+type: "string",
+visual: true,
+default: "neutral",
+},
 };
-// Register the custom element
 if (!customElements.get("ty-checkbox")) {
-    customElements.define("ty-checkbox", TyCheckbox);
+customElements.define("ty-checkbox", TyCheckbox);
 }
-//# sourceMappingURL=checkbox.js.map