tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/step.js

@@ -1,75 +1,69 @@
-/**
- * Step Component
- *
- * Individual wizard step panel with custom scrollbar via CustomScrollbar utility.
- */
 import { ensureStyles } from '../utils/styles.js';
 import { stepStyles } from '../styles/step.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
 export class TyStep extends HTMLElement {
-    static get observedAttributes() {
-        return ['id', 'label', 'description', 'disabled', 'status'];
-    }
-    constructor() {
-        super();
-        this._scrollbar = null;
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        this._render();
-    }
-    disconnectedCallback() {
-        this._destroyScrollbar();
-    }
-    attributeChangedCallback(_name, _oldValue, _newValue) {
-        this._render();
-    }
-    _render() {
-        const shadowRoot = this.shadowRoot;
-        if (!shadowRoot)
-            return;
-        const id = this.getAttribute('id');
-        if (!shadowRoot.querySelector('.step-wrapper')) {
-            ensureStyles(shadowRoot, { css: stepStyles, id: 'ty-step' });
-            shadowRoot.innerHTML = `
-        <div class="step-wrapper"
-             role="tabpanel"
-             ${id ? `id="panel-${id}"` : ''}
-             ${id ? `aria-labelledby="step-${id}"` : ''}
-        >
-          <div class="step-panel">
-            <slot></slot>
-          </div>
-        </div>
-      `;
-            this._setupScrollbar();
-        }
-    }
-    _setupScrollbar() {
-        const panel = this.shadowRoot?.querySelector('.step-panel');
-        const wrapper = this.shadowRoot?.querySelector('.step-wrapper');
-        if (!panel || !wrapper)
-            return;
-        if (!isCustomScrollbarEnabled())
-            return;
-        panel.classList.add('ty-custom-scroll');
-        this._scrollbar = new CustomScrollbar(panel, { vertical: true });
-        if (this._scrollbar.trackY) {
-            wrapper.appendChild(this._scrollbar.trackY);
-        }
-    }
-    _destroyScrollbar() {
-        if (this._scrollbar) {
-            this._scrollbar.trackY?.remove();
-            this._scrollbar.destroy();
-            this._scrollbar = null;
-        }
-    }
-    resetScroll() {
-        this._scrollbar?.scrollToTop(false);
-    }
+static get observedAttributes() {
+return ['id', 'label', 'description', 'disabled', 'status'];
+}
+constructor() {
+super();
+this._scrollbar = null;
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+this._render();
+}
+disconnectedCallback() {
+this._destroyScrollbar();
+}
+attributeChangedCallback(_name, _oldValue, _newValue) {
+this._render();
+}
+_render() {
+const shadowRoot = this.shadowRoot;
+if (!shadowRoot)
+return;
+const id = this.getAttribute('id');
+if (!shadowRoot.querySelector('.step-wrapper')) {
+ensureStyles(shadowRoot, { css: stepStyles, id: 'ty-step' });
+shadowRoot.innerHTML = `
+<div class="step-wrapper"
+role="tabpanel"
+${id ? `id="panel-${id}"` : ''}
+${id ? `aria-labelledby="step-${id}"` : ''}
+>
+<div class="step-panel">
+<slot></slot>
+</div>
+</div>
+`;
+this._setupScrollbar();
+}
+}
+_setupScrollbar() {
+const panel = this.shadowRoot?.querySelector('.step-panel');
+const wrapper = this.shadowRoot?.querySelector('.step-wrapper');
+if (!panel || !wrapper)
+return;
+if (!isCustomScrollbarEnabled())
+return;
+panel.classList.add('ty-custom-scroll');
+this._scrollbar = new CustomScrollbar(panel, { vertical: true });
+if (this._scrollbar.trackY) {
+wrapper.appendChild(this._scrollbar.trackY);
+}
+}
+_destroyScrollbar() {
+if (this._scrollbar) {
+this._scrollbar.trackY?.remove();
+this._scrollbar.destroy();
+this._scrollbar = null;
+}
+}
+resetScroll() {
+this._scrollbar?.scrollToTop(false);
+}
 }
 if (!customElements.get('ty-step')) {
-    customElements.define('ty-step', TyStep);
+customElements.define('ty-step', TyStep);
 }
-//# sourceMappingURL=step.js.map

package/lib/components/switch.d.ts

@@ -4,16 +4,6 @@
  * "Just the toggle" primitive — renders only the track + thumb visual.
  * Label, required asterisk, and error display are the consumer's
  * responsibility — wrap in a `<label>` for click delegation.
- *
- * - Boolean checked state, role="switch" ARIA
- * - Form-associated, keyboard accessibility
- * - Sizes (xs, sm, md, lg, xl) and semantic flavors
- *
- * @example
- * <label>
- *   <ty-switch name="notifications" checked></ty-switch>
- *   Email notifications
- * </label>
  */
 import type { Flavor, Size } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
@@ -63,7 +53,7 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };
@@ -111,4 +101,3 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     get form(): HTMLFormElement | null;
 }
 export {};
-//# sourceMappingURL=switch.d.ts.map

package/lib/components/switch.js

@@ -1,258 +1,225 @@
-/**
- * TySwitch Web Component
- *
- * "Just the toggle" primitive — renders only the track + thumb visual.
- * Label, required asterisk, and error display are the consumer's
- * responsibility — wrap in a `<label>` for click delegation.
- *
- * - Boolean checked state, role="switch" ARIA
- * - Form-associated, keyboard accessibility
- * - Sizes (xs, sm, md, lg, xl) and semantic flavors
- *
- * @example
- * <label>
- *   <ty-switch name="notifications" checked></ty-switch>
- *   Email notifications
- * </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 { switchStyles, switchCustomFlavorCss } from "../styles/switch.js";
 export class TySwitch extends TyComponent {
-    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: switchStyles, id: "ty-switch" });
-    }
-    onConnect() {
-        // Re-arm listeners on RE-connect (base skips render() when already
-        // rendered; onDisconnect removed them). No-op on first connect.
-        this.setupEventListeners();
-        this._syncCustomFlavor();
-    }
-    onDisconnect() {
-        this.removeEventListeners();
-    }
-    onPropertiesChanged(changes) {
-        if (changes.some((c) => c.name === "flavor")) {
-            this._syncCustomFlavor();
-        }
-    }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
-    _syncCustomFlavor() {
-        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => switchCustomFlavorCss(base));
-    }
-    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(" ");
-    }
-    handleSwitchClick(e) {
-        if (this.disabled)
-            return;
-        const newValue = !this.checked;
-        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);
-    }
-    handleSwitchKeydown(e) {
-        if (this.disabled)
-            return;
-        if (["Space", " ", "Enter"].includes(e.key)) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.handleSwitchClick(e);
-        }
-    }
-    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 el = shadow.querySelector(".switch-container");
-        if (!el) {
-            this._listenersSetup = false;
-            return;
-        }
-        if (this._keydownHandler) {
-            el.removeEventListener("keydown", this._keydownHandler);
-            this._keydownHandler = null;
-        }
-        if (this._focusHandler) {
-            el.removeEventListener("focus", this._focusHandler);
-            this._focusHandler = null;
-        }
-        if (this._blurHandler) {
-            el.removeEventListener("blur", this._blurHandler);
-            this._blurHandler = null;
-        }
-        this._listenersSetup = false;
-    }
-    setupEventListeners() {
-        if (this._listenersSetup)
-            return;
-        const shadow = this.shadowRoot;
-        const el = shadow.querySelector(".switch-container");
-        if (!el)
-            return;
-        this._clickHandler = (e) => this.handleSwitchClick(e);
-        this._keydownHandler = (e) => this.handleSwitchKeydown(e);
-        this._focusHandler = () => el.classList.add("focused");
-        this._blurHandler = () => el.classList.remove("focused");
-        // Click on the HOST: whole element is a trigger and a wrapping <label>
-        // delegates (the synthetic click lands on the host, not the shadow).
-        this.addEventListener("click", this._clickHandler);
-        el.addEventListener("keydown", this._keydownHandler);
-        el.addEventListener("focus", this._focusHandler);
-        el.addEventListener("blur", this._blurHandler);
-        this._listenersSetup = true;
-    }
-    render() {
-        const shadow = this.shadowRoot;
-        let switchEl = shadow.querySelector(".switch-container");
-        const classes = this.buildClassList();
-        if (!switchEl) {
-            switchEl = document.createElement("div");
-            switchEl.className = "switch-container " + classes;
-            switchEl.tabIndex = this.disabled ? -1 : 0;
-            switchEl.setAttribute("role", "switch");
-            switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
-            switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-            switchEl.setAttribute("aria-required", this.required ? "true" : "false");
-            const track = document.createElement("div");
-            track.className = "switch-track";
-            const thumb = document.createElement("div");
-            thumb.className = "switch-thumb";
-            track.appendChild(thumb);
-            switchEl.appendChild(track);
-            shadow.appendChild(switchEl);
-        }
-        else {
-            switchEl.className = "switch-container " + classes;
-            switchEl.tabIndex = this.disabled ? -1 : 0;
-            switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
-            switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-            switchEl.setAttribute("aria-required", this.required ? "true" : "false");
-        }
-        // (Re)attach listeners — onDisconnect removes them, so a reconnected
-        // element needs them again even though the container already exists.
-        this.setupEventListeners();
-        // a11y: mirror the wrapping <label> name onto the role="switch" element.
-        this.applyLabelName(switchEl);
-        // Reflect constraint validation to the owning <form> (required was cosmetic).
-        this.updateValidity();
-    }
-    /** required + unchecked => valueMissing; otherwise valid. */
-    updateValidity() {
-        const anchor = this.shadowRoot?.querySelector(".switch-container");
-        if (this.disabled) {
-            this._internals.setValidity({});
-            return;
-        }
-        if (this.required && !this.checked) {
-            this._internals.setValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
-        }
-        else {
-            this._internals.setValidity({});
-        }
-    }
-    // ============================================================================
-    // PROPERTY ACCESSORS
-    // ============================================================================
-    get checked() { return this.getProperty("checked"); }
-    set checked(value) { this.setProperty("checked", 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: switchStyles, id: "ty-switch" });
+}
+onConnect() {
+this.setupEventListeners();
+this._syncCustomFlavor();
+}
+onDisconnect() {
+this.removeEventListeners();
+}
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === "flavor")) {
+this._syncCustomFlavor();
+}
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => switchCustomFlavorCss(base));
+}
+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(" ");
+}
+handleSwitchClick(e) {
+if (this.disabled)
+return;
+if (this.isDuplicateActivationClick())
+return;
+const newValue = !this.checked;
+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);
+}
+handleSwitchKeydown(e) {
+if (this.disabled)
+return;
+if (["Space", " ", "Enter"].includes(e.key)) {
+e.preventDefault();
+e.stopPropagation();
+this.handleSwitchClick(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 el = shadow.querySelector(".switch-container");
+if (!el) {
+this._listenersSetup = false;
+return;
+}
+if (this._keydownHandler) {
+el.removeEventListener("keydown", this._keydownHandler);
+this._keydownHandler = null;
+}
+if (this._focusHandler) {
+el.removeEventListener("focus", this._focusHandler);
+this._focusHandler = null;
+}
+if (this._blurHandler) {
+el.removeEventListener("blur", this._blurHandler);
+this._blurHandler = null;
+}
+this._listenersSetup = false;
+}
+setupEventListeners() {
+if (this._listenersSetup)
+return;
+const shadow = this.shadowRoot;
+const el = shadow.querySelector(".switch-container");
+if (!el)
+return;
+this._clickHandler = (e) => this.handleSwitchClick(e);
+this._keydownHandler = (e) => this.handleSwitchKeydown(e);
+this._focusHandler = () => el.classList.add("focused");
+this._blurHandler = () => el.classList.remove("focused");
+this.addEventListener("click", this._clickHandler);
+el.addEventListener("keydown", this._keydownHandler);
+el.addEventListener("focus", this._focusHandler);
+el.addEventListener("blur", this._blurHandler);
+this._listenersSetup = true;
+}
+render() {
+const shadow = this.shadowRoot;
+let switchEl = shadow.querySelector(".switch-container");
+const classes = this.buildClassList();
+if (!switchEl) {
+switchEl = document.createElement("div");
+switchEl.className = "switch-container " + classes;
+switchEl.tabIndex = this.disabled ? -1 : 0;
+switchEl.setAttribute("role", "switch");
+switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
+switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+switchEl.setAttribute("aria-required", this.required ? "true" : "false");
+const track = document.createElement("div");
+track.className = "switch-track";
+const thumb = document.createElement("div");
+thumb.className = "switch-thumb";
+track.appendChild(thumb);
+switchEl.appendChild(track);
+shadow.appendChild(switchEl);
+}
+else {
+switchEl.className = "switch-container " + classes;
+switchEl.tabIndex = this.disabled ? -1 : 0;
+switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
+switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+switchEl.setAttribute("aria-required", this.required ? "true" : "false");
+}
+this.setupEventListeners();
+this.applyLabelName(switchEl);
+this.updateValidity();
+}
+updateValidity() {
+const anchor = this.shadowRoot?.querySelector(".switch-container");
+if (this.disabled) {
+this._internals.setValidity({});
+return;
+}
+if (this.required && !this.checked) {
+this._internals.setValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
+}
+else {
+this._internals.setValidity({});
+}
+}
+get checked() { return this.getProperty("checked"); }
+set checked(value) { this.setProperty("checked", 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; }
 }
 TySwitch.formAssociated = true;
 TySwitch.properties = {
-    checked: {
-        type: "boolean",
-        visual: true,
-        formValue: true,
-        emitChange: 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: "md",
-        validate: (v) => ["xs", "sm", "md", "lg", "xl"].includes(v),
-        coerce: (v) => {
-            if (!["xs", "sm", "md", "lg", "xl"].includes(v)) {
-                console.warn(`[ty-switch] 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: "primary",
-    },
+checked: {
+type: "boolean",
+visual: true,
+formValue: true,
+emitChange: 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-switch] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+},
+},
+flavor: {
+type: "string",
+visual: true,
+default: "primary",
+},
 };
 if (!customElements.get("ty-switch")) {
-    customElements.define("ty-switch", TySwitch);
+customElements.define("ty-switch", TySwitch);
 }
-//# sourceMappingURL=switch.js.map