tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/base/ty-component.d.ts

@@ -40,13 +40,7 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * Sync property value to HTML attribute
      */
     private _syncPropertyToAttribute;
-    /**
-     * Convert camelCase to kebab-case
-     */
     private _toKebabCase;
-    /**
-     * Convert kebab-case to camelCase
-     */
     private _toCamelCase;
     /**
      * Attribute changed callback - unified for all components
@@ -126,9 +120,26 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * the role element as aria-label, giving it an accessible name.
      */
     protected applyLabelName(roleEl: HTMLElement): void;
-    /**
-     * Form reset callback - called when form.reset() is invoked
-     * Resets component to its default value
+    private _handlingActivationClick;
+    /**
+     * Guard for click-driven toggle handlers (checkbox/switch) on components
+     * whose whole host is the click target AND that expect a wrapping
+     * <label> to delegate to them. Some browsers still forward a label's own
+     * synthetic click to the associated control even when the original click
+     * already targeted that control directly, firing 'click' twice for one
+     * user gesture. Both arrive synchronously in the same task, so a flag
+     * cleared on the next microtask catches only the spurious duplicate —
+     * two genuinely separate clicks are always in different tasks.
+     */
+    protected isDuplicateActivationClick(): boolean;
+    private _resetDefaults;
+    /**
+     * Form reset callback - called when form.reset() is invoked.
+     * Restores every formValue-bearing property to its attribute-declared
+     * default captured at first connect (native defaultValue/defaultChecked
+     * semantics). Non-form state (e.g. a checkbox's submission `value`, a
+     * ty-radio's option `value`) is deliberately left alone — the old
+     * blanket 'value' reset corrupted radio groups by wiping child values.
      */
     formResetCallback(): void;
     /**
@@ -137,4 +148,3 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      */
     protected onFormReset(): void;
 }
-//# sourceMappingURL=ty-component.d.ts.map

package/lib/base/ty-component.js

@@ -1,324 +1,201 @@
-/**
- * TyComponent - Base class for all Ty web components
- *
- * Provides unified property/attribute lifecycle management:
- * - Single code path for all property updates
- * - Declarative property configuration
- * - Predictable rendering behavior
- * - Form association support
- * - Property change events via 'prop:change' (separate from user 'change' events)
- */
 import { PropertyManager } from '../utils/property-manager.js';
-/**
- * Base class for all Ty components with unified property lifecycle
- */
 export class TyComponent extends HTMLElement {
-    constructor() {
-        super();
-        // Track if component is connected
-        this._connected = false;
-        // Track if initial render happened
-        this._rendered = false;
-        // Initialize property manager
-        const ctor = this.constructor;
-        this.props = new PropertyManager(ctor.properties);
-        // Form association
-        this._internals = this.attachInternals();
-        // Setup shadow DOM (subclasses can override by checking if shadowRoot exists)
-        if (!this.shadowRoot) {
-            this.attachShadow({ mode: 'open' });
-        }
-    }
-    /**
-     * Define which attributes to observe
-     * Auto-generated from property configuration
-     * Returns kebab-case attribute names (e.g., 'minHeight' -> 'min-height')
-     */
-    static get observedAttributes() {
-        const attrs = [];
-        for (const [name, config] of Object.entries(this.properties)) {
-            attrs.push(name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
-            // Include alias names so attributeChangedCallback fires for them
-            if (config.aliases) {
-                for (const alias of Object.keys(config.aliases)) {
-                    attrs.push(alias);
-                }
-            }
-        }
-        return attrs;
-    }
-    /**
-     * Unified property setter
-     * Use this in your property setters instead of direct field assignment
-     */
-    setProperty(name, value) {
-        const change = this.props.updateProperty(name, value, 'property');
-        if (change) {
-            // Sync to attribute (kebab-case)
-            this._syncPropertyToAttribute(change);
-            // Handle the change through unified lifecycle
-            this._handlePropertyChanges([change]);
-        }
-    }
-    /**
-     * Unified property getter
-     * Use this in your property getters
-     */
-    getProperty(name) {
-        return this.props.get(name);
-    }
-    /**
-     * Sync property value to HTML attribute
-     */
-    _syncPropertyToAttribute(change) {
-        const { name, newValue } = change;
-        const config = this.props.getConfig(name);
-        if (!config)
-            return;
-        // Convert to kebab-case for attribute
-        const attrName = this._toKebabCase(name);
-        // Handle different types
-        if (config.type === 'boolean') {
-            if (newValue) {
-                this.setAttribute(attrName, '');
-            }
-            else {
-                this.removeAttribute(attrName);
-            }
-        }
-        else if (newValue === null || newValue === undefined) {
-            this.removeAttribute(attrName);
-        }
-        else if (typeof newValue === 'object') {
-            this.setAttribute(attrName, JSON.stringify(newValue));
-        }
-        else {
-            this.setAttribute(attrName, String(newValue));
-        }
-    }
-    /**
-     * Convert camelCase to kebab-case
-     */
-    _toKebabCase(str) {
-        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-    }
-    /**
-     * Convert kebab-case to camelCase
-     */
-    _toCamelCase(str) {
-        return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-    }
-    /**
-     * Attribute changed callback - unified for all components
-     */
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue)
-            return;
-        // Check if this is an alias (e.g., not-clearable)
-        let change = this.props.handleAlias(name, newValue);
-        if (!change) {
-            // Properties may be registered with kebab-case (e.g., 'display-month')
-            // or camelCase. Try the attribute name as-is first, then camelCase.
-            const camelName = this._toCamelCase(name);
-            const propName = this.props.hasConfig(name) ? name : camelName;
-            change = this.props.updateProperty(propName, newValue, 'attribute');
-        }
-        if (change) {
-            this._handlePropertyChanges([change]);
-        }
-    }
-    /**
-     * Connected callback - handle pre-set properties
-     */
-    connectedCallback() {
-        this._connected = true;
-        // Capture pre-set properties (React/Vue/Reagent pattern)
-        const preSetProps = this._capturePreSetProperties();
-        // Batch process all pre-set properties
-        if (preSetProps.length > 0) {
-            this._handlePropertyChanges(preSetProps);
-        }
-        // Initialize component (subclass hook)
-        this.onConnect();
-        // Initial render
-        if (!this._rendered) {
-            this.render();
-            this._rendered = true;
-        }
-    }
-    /**
-     * Disconnected callback
-     */
-    disconnectedCallback() {
-        this._connected = false;
-        this.onDisconnect();
-    }
-    /**
-     * Capture properties that were set before connectedCallback
-     * (React, Vue, Reagent set properties before element is connected)
-     */
-    _capturePreSetProperties() {
-        const changes = [];
-        const ctor = this.constructor;
-        for (const propName of Object.keys(ctor.properties)) {
-            // Check if property was set on the element before connection
-            const descriptor = Object.getOwnPropertyDescriptor(this, propName);
-            if (descriptor && descriptor.value !== undefined) {
-                const change = this.props.updateProperty(propName, descriptor.value, 'property');
-                if (change) {
-                    changes.push(change);
-                }
-            }
-        }
-        return changes;
-    }
-    /**
-     * THE CORE LIFECYCLE METHOD
-     * All property changes flow through here
-     *
-     * Lifecycle order:
-     * 1. Update internal state (onPropertiesChanged hook)
-     * 2. Sync form value (if formValue property changed)
-     * 3. Render (if visual property changed)
-     * 4. Emit events (if emitChange property changed)
-     */
-    _handlePropertyChanges(changes) {
-        if (changes.length === 0)
-            return;
-        // 1. Update internal state (subclass-specific)
-        this.onPropertiesChanged(changes);
-        // 2. Sync form value if needed
-        const formValueChanged = changes.some(c => this.props.isFormValue(c.name));
-        if (formValueChanged) {
-            this.updateFormValue();
-        }
-        // 3. Render only if visual properties changed AND component is connected
-        const visualChanged = changes.some(c => this.props.isVisual(c.name));
-        if (visualChanged && this._connected) {
-            this.render();
-        }
-        // 4. Emit change events if configured
-        this._emitChangeEvents(changes);
-    }
-    /**
-     * Emit property change events for properties that require it
-     * Uses 'prop:change' event to avoid conflicts with user interaction 'change' events
-     */
-    _emitChangeEvents(changes) {
-        for (const change of changes) {
-            if (this.props.shouldEmitChange(change.name)) {
-                this.dispatchEvent(new CustomEvent('prop:change', {
-                    detail: {
-                        property: change.name,
-                        oldValue: change.oldValue,
-                        newValue: change.newValue
-                    },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-        }
-    }
-    /**
-     * Update form value via ElementInternals
-     * Subclasses can override to customize form value
-     */
-    updateFormValue() {
-        const formValue = this.getFormValue();
-        this._internals.setFormValue(formValue);
-    }
-    /**
-     * Get the form value for this component
-     * Default: return 'value' property
-     * Override for custom behavior
-     */
-    getFormValue() {
-        return this.props.get('value') ?? null;
-    }
-    /**
-     * Hook: Called when properties change
-     * Subclasses can override to update internal state
-     *
-     * This is called BEFORE rendering, so you can update
-     * internal state here and it will be reflected in the render
-     */
-    onPropertiesChanged(changes) {
-        // Default: no-op
-        // Subclasses can override to update _state, _config, etc.
-    }
-    /**
-     * Hook: Called when component is connected
-     * Use this instead of overriding connectedCallback
-     */
-    onConnect() {
-        // Default: no-op
-    }
-    /**
-     * Hook: Called when component is disconnected
-     * Use this for cleanup instead of overriding disconnectedCallback
-     */
-    onDisconnect() {
-        // Default: no-op
-    }
-    /**
-     * Get the form element this component is associated with
-     */
-    get form() {
-        return this._internals.form;
-    }
-    /**
-     * a11y helper for components whose ARIA role lives on an inner shadow element
-     * (checkbox/switch/radio). A wrapping <label> names the form-associated HOST,
-     * not the inner role element — so mirror the host's associated label text onto
-     * the role element as aria-label, giving it an accessible name.
-     */
-    applyLabelName(roleEl) {
-        let text = Array.from(this._internals.labels ?? [])
-            .map((l) => l.textContent?.trim())
-            .filter(Boolean)
-            .join(' ');
-        if (!text) {
-            // Non-form-associated controls (e.g. ty-radio) aren't labelable, so the
-            // wrapping <label> never appears in internals.labels — read it directly,
-            // stripping this element's own subtree from the text.
-            const lbl = this.closest('label');
-            if (lbl) {
-                const clone = lbl.cloneNode(true);
-                clone.querySelectorAll(this.tagName.toLowerCase()).forEach((n) => n.remove());
-                text = clone.textContent?.trim() ?? '';
-            }
-        }
-        if (text)
-            roleEl.setAttribute('aria-label', text);
-        else
-            roleEl.removeAttribute('aria-label');
-    }
-    /**
-     * Form reset callback - called when form.reset() is invoked
-     * Resets component to its default value
-     */
-    formResetCallback() {
-        // Get the default value from property configuration
-        const ctor = this.constructor;
-        const valueConfig = ctor.properties['value'];
-        if (valueConfig) {
-            const defaultValue = valueConfig.default ?? '';
-            // Reset the value property through setProperty to trigger lifecycle
-            this.setProperty('value', defaultValue);
-        }
-        // Call subclass hook for custom reset behavior
-        this.onFormReset();
-    }
-    /**
-     * Hook: Called when form is reset
-     * Subclasses can override to perform additional reset actions
-     */
-    onFormReset() {
-        // Default: no-op
-        // Subclasses can override to reset additional state
-    }
+constructor() {
+super();
+this._connected = false;
+this._rendered = false;
+this._handlingActivationClick = false;
+this._resetDefaults = null;
+const ctor = this.constructor;
+this.props = new PropertyManager(ctor.properties);
+this._internals = this.attachInternals();
+if (!this.shadowRoot) {
+this.attachShadow({ mode: 'open' });
+}
+}
+static get observedAttributes() {
+const attrs = [];
+for (const [name, config] of Object.entries(this.properties)) {
+attrs.push(name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
+if (config.aliases) {
+for (const alias of Object.keys(config.aliases)) {
+attrs.push(alias);
+}
+}
+}
+return attrs;
+}
+setProperty(name, value) {
+const change = this.props.updateProperty(name, value, 'property');
+if (change) {
+this._syncPropertyToAttribute(change);
+this._handlePropertyChanges([change]);
+}
+}
+getProperty(name) {
+return this.props.get(name);
+}
+_syncPropertyToAttribute(change) {
+const { name, newValue } = change;
+const config = this.props.getConfig(name);
+if (!config)
+return;
+const attrName = this._toKebabCase(name);
+if (config.type === 'boolean') {
+if (newValue) {
+this.setAttribute(attrName, '');
+}
+else {
+this.removeAttribute(attrName);
+}
+}
+else if (newValue === null || newValue === undefined) {
+this.removeAttribute(attrName);
+}
+else if (typeof newValue === 'object') {
+this.setAttribute(attrName, JSON.stringify(newValue));
+}
+else {
+this.setAttribute(attrName, String(newValue));
+}
+}
+_toKebabCase(str) {
+return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+_toCamelCase(str) {
+return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (oldValue === newValue)
+return;
+let change = this.props.handleAlias(name, newValue);
+if (!change) {
+const camelName = this._toCamelCase(name);
+const propName = this.props.hasConfig(name) ? name : camelName;
+change = this.props.updateProperty(propName, newValue, 'attribute');
+}
+if (change) {
+this._handlePropertyChanges([change]);
+}
+}
+connectedCallback() {
+this._connected = true;
+if (!this._resetDefaults) {
+this._resetDefaults = new Map();
+const ctor = this.constructor;
+for (const [name, config] of Object.entries(ctor.properties)) {
+if (!config.formValue)
+continue;
+const attr = this.getAttribute(this._toKebabCase(name));
+this._resetDefaults.set(name, attr ?? config.default ?? null);
+}
+}
+const preSetProps = this._capturePreSetProperties();
+if (preSetProps.length > 0) {
+this._handlePropertyChanges(preSetProps);
+}
+this.onConnect();
+if (!this._rendered) {
+this.render();
+this._rendered = true;
+}
+}
+disconnectedCallback() {
+this._connected = false;
+this.onDisconnect();
+}
+_capturePreSetProperties() {
+const changes = [];
+const ctor = this.constructor;
+for (const propName of Object.keys(ctor.properties)) {
+const descriptor = Object.getOwnPropertyDescriptor(this, propName);
+if (descriptor && descriptor.value !== undefined) {
+const change = this.props.updateProperty(propName, descriptor.value, 'property');
+if (change) {
+changes.push(change);
+}
+}
+}
+return changes;
+}
+_handlePropertyChanges(changes) {
+if (changes.length === 0)
+return;
+this.onPropertiesChanged(changes);
+const formValueChanged = changes.some(c => this.props.isFormValue(c.name));
+if (formValueChanged) {
+this.updateFormValue();
+}
+const visualChanged = changes.some(c => this.props.isVisual(c.name));
+if (visualChanged && this._connected) {
+this.render();
+}
+this._emitChangeEvents(changes);
+}
+_emitChangeEvents(changes) {
+for (const change of changes) {
+if (this.props.shouldEmitChange(change.name)) {
+this.dispatchEvent(new CustomEvent('prop:change', {
+detail: {
+property: change.name,
+oldValue: change.oldValue,
+newValue: change.newValue
+},
+bubbles: true,
+composed: true
+}));
+}
+}
+}
+updateFormValue() {
+const formValue = this.getFormValue();
+this._internals.setFormValue(formValue);
+}
+getFormValue() {
+return this.props.get('value') ?? null;
+}
+onPropertiesChanged(changes) {
+}
+onConnect() {
+}
+onDisconnect() {
+}
+get form() {
+return this._internals.form;
+}
+applyLabelName(roleEl) {
+let text = Array.from(this._internals.labels ?? [])
+.map((l) => l.textContent?.trim())
+.filter(Boolean)
+.join(' ');
+if (!text) {
+const lbl = this.closest('label');
+if (lbl) {
+const clone = lbl.cloneNode(true);
+clone.querySelectorAll(this.tagName.toLowerCase()).forEach((n) => n.remove());
+text = clone.textContent?.trim() ?? '';
+}
+}
+if (text)
+roleEl.setAttribute('aria-label', text);
+else
+roleEl.removeAttribute('aria-label');
+}
+isDuplicateActivationClick() {
+if (this._handlingActivationClick)
+return true;
+this._handlingActivationClick = true;
+queueMicrotask(() => { this._handlingActivationClick = false; });
+return false;
+}
+formResetCallback() {
+for (const [name, def] of this._resetDefaults ?? []) {
+this.setProperty(name, def);
+}
+this.onFormReset();
+}
+onFormReset() {
+}
 }
 TyComponent.formAssociated = true;
-// Subclasses must define their property configuration
 TyComponent.properties = {};
-//# sourceMappingURL=ty-component.js.map

package/lib/components/button.d.ts

@@ -1,12 +1,6 @@
 /**
- * TyButton Web Component
- *
- * Three appearance variants × six flavors × three tones (+/base/-).
- *   appearance="solid"     saturated brand fill (default)
- *   appearance="outlined"  transparent bg, text === border
- *   appearance="ghost"     text only, hover bg
- *
- * Append `+` or `-` to a flavor for stronger/softer tone (e.g. "primary+").
+ * TyButton Web Component — three appearances (solid/outlined/ghost) × six
+ * flavors × three tones. Append `+`/`-` to a flavor for stronger/softer tone.
  */
 import type { Flavor, Size, TyButtonElement } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
@@ -27,13 +21,6 @@ interface ButtonState {
 }
 /**
  * Ty Button Component
- *
- * @example
- * ```html
- * <ty-button flavor="primary">Default solid</ty-button>
- * <ty-button appearance="outlined" flavor="danger">Outlined</ty-button>
- * <ty-button appearance="ghost" flavor="success+">Ghost stronger</ty-button>
- * ```
  */
 export declare class TyButton extends TyComponent<ButtonState> implements TyButtonElement {
     static formAssociated: boolean;
@@ -46,7 +33,7 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };
@@ -147,4 +134,3 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
     protected render(): void;
 }
 export {};
-//# sourceMappingURL=button.d.ts.map