tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/icon.d.ts

@@ -1,7 +1,5 @@
 /**
- * TyIcon Web Component
- * PORTED FROM: clj/ty/components/icon.cljs
- * SVG icon component with size variants and animations
+ * TyIcon Web Component — SVG icon with size variants and animations.
  */
 import type { IconSize, IconTempo, TyIconElement } from '../types/common.js';
 import { TyComponent } from '../base/ty-component.js';
@@ -19,13 +17,6 @@ interface IconState {
 }
 /**
  * Ty Icon Component
- *
- * @example
- * ```html
- * <ty-icon name="check"></ty-icon>
- * <ty-icon name="spinner" spin></ty-icon>
- * <ty-icon name="heart" size="xl"></ty-icon>
- * ```
  */
 export declare class TyIcon extends TyComponent<IconState> implements TyIconElement {
     static formAssociated: boolean;
@@ -69,13 +60,7 @@ export declare class TyIcon extends TyComponent<IconState> implements TyIconElem
      */
     private _slot;
     constructor();
-    /**
-     * Called when component connects to DOM
-     */
     protected onConnect(): void;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
     /**
      * Handle property changes - called BEFORE render
@@ -97,13 +82,8 @@ export declare class TyIcon extends TyComponent<IconState> implements TyIconElem
     /** Update host element classes */
     private updateClasses;
     /**
-     * Render the icon SVG
-     * Smart rendering strategy:
-     * 1. Check memory registry (instant)
-     * 2. If found in memory -> render immediately
-     * 3. If not in memory -> show NOT_FOUND_ICON immediately (prevents empty state)
-     * 4. Then check cache asynchronously and replace if found
-     * 5. Only re-render if SVG actually changed
+     * Render the icon SVG. Unknown/unset names fall back to NOT_FOUND_ICON
+     * immediately rather than rendering nothing (prevents layout shift).
      */
     protected render(): void;
     /**
@@ -115,4 +95,3 @@ export declare class TyIcon extends TyComponent<IconState> implements TyIconElem
     private renderSvg;
 }
 export { IconRegistry };
-//# sourceMappingURL=icon.d.ts.map

package/lib/components/icon.js

@@ -1,245 +1,156 @@
-/**
- * TyIcon Web Component
- * PORTED FROM: clj/ty/components/icon.cljs
- * SVG icon component with size variants and animations
- */
 import { TyComponent } from '../base/ty-component.js';
 import { ensureStyles } from '../utils/styles.js';
 import { iconStyles } from '../styles/icon.js';
 import * as IconRegistry from '../utils/icon-registry.js';
 let _iconIdCounter = 0;
-/** Fallback SVG for missing icons - More visible to prevent layout shift */
 const NOT_FOUND_ICON = `<svg xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-      fill="currentColor"
-      opacity="0.2">
-   <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
+viewBox="0 0 512 512"
+fill="currentColor"
+opacity="0.2">
+<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/>
 </svg>`;
-/**
- * Ty Icon Component
- *
- * @example
- * ```html
- * <ty-icon name="check"></ty-icon>
- * <ty-icon name="spinner" spin></ty-icon>
- * <ty-icon name="heart" size="xl"></ty-icon>
- * ```
- */
 export class TyIcon extends TyComponent {
-    constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE - Not managed by PropertyManager
-        // ============================================================================
-        this._watchId = null;
-        /** Track currently rendered SVG to avoid unnecessary re-renders */
-        this._currentSvg = '';
-        /**
-         * Single shadow-DOM <slot> that holds either:
-         *   - light-DOM children supplied by the user (server-side path: pasted SVG), or
-         *   - fallback content driven by the registry (`name=`) or NOT_FOUND_ICON.
-         *
-         * Browser slot semantics handle precedence: when the host has assigned nodes,
-         * the slot's fallback content is hidden automatically — no detection logic needed.
-         */
-        this._slot = null;
-        // Apply styles to shadow root
-        ensureStyles(this.shadowRoot, { css: iconStyles, id: 'ty-icon' });
-        // Build the slot once. Fallback content shows when no light-DOM children are slotted.
-        this._slot = document.createElement('slot');
-        this._slot.innerHTML = NOT_FOUND_ICON;
-        this._currentSvg = NOT_FOUND_ICON;
-        this.shadowRoot.appendChild(this._slot);
-    }
-    // observedAttributes auto-generated by TyComponent from properties config
-    // ============================================================================
-    // TYCOMPONENT LIFECYCLE HOOKS
-    // ============================================================================
-    /**
-     * Called when component connects to DOM
-     */
-    onConnect() {
-        // Generate unique watch ID
-        this._watchId = `ty-icon-${++_iconIdCounter}`;
-        // Watch for registry changes that affect this icon
-        if (this.name) {
-            IconRegistry.addWatcher(this._watchId, this.name, (changedIcons) => {
-                // Re-render if our icon changed
-                if (this.name && changedIcons.has(this.name)) {
-                    this.render();
-                }
-            });
-        }
-        // Update host element classes
-        this.updateClasses();
-        // TyComponent will call render() automatically after this hook
-    }
-    /**
-     * Called when component disconnects from DOM
-     */
-    onDisconnect() {
-        // Clean up watcher
-        if (this._watchId) {
-            IconRegistry.removeWatcher(this._watchId);
-            this._watchId = null;
-        }
-    }
-    /**
-     * Handle property changes - called BEFORE render
-     * Detects name changes to update icon registry watcher
-     */
-    onPropertiesChanged(changes) {
-        for (const change of changes) {
-            if (change.name === 'name') {
-                // Remove old watcher
-                if (this._watchId) {
-                    IconRegistry.removeWatcher(this._watchId);
-                }
-                // Re-add watcher for new name
-                const newName = change.newValue || '';
-                if (newName && this.isConnected) {
-                    this._watchId = `ty-icon-${++_iconIdCounter}`;
-                    IconRegistry.addWatcher(this._watchId, newName, (changedIcons) => {
-                        if (this.name && changedIcons.has(this.name)) {
-                            this.render();
-                        }
-                    });
-                }
-            }
-        }
-        // Update host element classes for any visual change
-        this.updateClasses();
-    }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simple wrappers (no logic!)
-    // ============================================================================
-    get name() {
-        return this.getProperty('name');
-    }
-    set name(value) {
-        this.setProperty('name', value);
-    }
-    get size() {
-        const val = this.getProperty('size');
-        return val || undefined;
-    }
-    set size(value) {
-        this.setProperty('size', value || '');
-    }
-    get spin() {
-        return this.getProperty('spin');
-    }
-    set spin(value) {
-        this.setProperty('spin', value);
-    }
-    get pulse() {
-        return this.getProperty('pulse');
-    }
-    set pulse(value) {
-        this.setProperty('pulse', value);
-    }
-    get tempo() {
-        const val = this.getProperty('tempo');
-        return val || undefined;
-    }
-    set tempo(value) {
-        this.setProperty('tempo', value || '');
-    }
-    // ============================================================================
-    // RENDERING
-    // ============================================================================
-    /** Build CSS classes for the host element */
-    buildClasses() {
-        const classes = [];
-        // Size class
-        const size = this.getProperty('size');
-        if (size) {
-            classes.push(`icon-${size}`);
-        }
-        // Animation classes
-        if (this.getProperty('spin')) {
-            classes.push('icon-spin');
-        }
-        if (this.getProperty('pulse')) {
-            classes.push('icon-pulse');
-        }
-        // Tempo class
-        const tempo = this.getProperty('tempo');
-        if (tempo && (this.getProperty('spin') || this.getProperty('pulse'))) {
-            classes.push(`icon-tempo-${tempo}`);
-        }
-        // Preserve user-added classes that don't conflict
-        const currentClasses = this.className.split(/\s+/).filter(cls => {
-            // Filter out component-managed classes
-            return cls &&
-                !cls.startsWith('icon-') &&
-                cls !== 'icon-spin' &&
-                cls !== 'icon-pulse';
-        });
-        return [...classes, ...currentClasses];
-    }
-    /** Update host element classes */
-    updateClasses() {
-        const newClasses = this.buildClasses().join(' ');
-        if (this.className !== newClasses) {
-            this.className = newClasses;
-        }
-    }
-    /**
-     * Render the icon SVG
-     * Smart rendering strategy:
-     * 1. Check memory registry (instant)
-     * 2. If found in memory -> render immediately
-     * 3. If not in memory -> show NOT_FOUND_ICON immediately (prevents empty state)
-     * 4. Then check cache asynchronously and replace if found
-     * 5. Only re-render if SVG actually changed
-     */
-    render() {
-        const name = this.getProperty('name');
-        if (!name) {
-            this.renderSvg(NOT_FOUND_ICON);
-            return;
-        }
-        // Fast path: Check memory registry first
-        const memorySvg = IconRegistry.getIcon(name);
-        if (memorySvg) {
-            this.renderSvg(memorySvg);
-            return;
-        }
-        this.renderSvg(NOT_FOUND_ICON);
-    }
-    /**
-     * Update the slot's fallback content.
-     * If the user has slotted light-DOM children (e.g., raw <svg>), the browser
-     * shows those instead and the fallback stays hidden — but we still keep it
-     * up to date so removing the children reveals the right registry/fallback SVG.
-     */
-    renderSvg(svg) {
-        // Only render if content actually changed
-        if (this._currentSvg === svg) {
-            return;
-        }
-        if (this._slot) {
-            this._slot.innerHTML = svg;
-            this._currentSvg = svg;
-        }
-    }
+constructor() {
+super();
+this._watchId = null;
+this._currentSvg = '';
+this._slot = null;
+ensureStyles(this.shadowRoot, { css: iconStyles, id: 'ty-icon' });
+this._slot = document.createElement('slot');
+this._slot.innerHTML = NOT_FOUND_ICON;
+this._currentSvg = NOT_FOUND_ICON;
+this.shadowRoot.appendChild(this._slot);
+}
+onConnect() {
+this._watchId = `ty-icon-${++_iconIdCounter}`;
+if (this.name) {
+IconRegistry.addWatcher(this._watchId, this.name, (changedIcons) => {
+if (this.name && changedIcons.has(this.name)) {
+this.render();
+}
+});
+}
+this.updateClasses();
+}
+onDisconnect() {
+if (this._watchId) {
+IconRegistry.removeWatcher(this._watchId);
+this._watchId = null;
+}
+}
+onPropertiesChanged(changes) {
+for (const change of changes) {
+if (change.name === 'name') {
+if (this._watchId) {
+IconRegistry.removeWatcher(this._watchId);
+}
+const newName = change.newValue || '';
+if (newName && this.isConnected) {
+this._watchId = `ty-icon-${++_iconIdCounter}`;
+IconRegistry.addWatcher(this._watchId, newName, (changedIcons) => {
+if (this.name && changedIcons.has(this.name)) {
+this.render();
+}
+});
+}
+}
+}
+this.updateClasses();
+}
+get name() {
+return this.getProperty('name');
+}
+set name(value) {
+this.setProperty('name', value);
+}
+get size() {
+const val = this.getProperty('size');
+return val || undefined;
+}
+set size(value) {
+this.setProperty('size', value || '');
+}
+get spin() {
+return this.getProperty('spin');
+}
+set spin(value) {
+this.setProperty('spin', value);
+}
+get pulse() {
+return this.getProperty('pulse');
+}
+set pulse(value) {
+this.setProperty('pulse', value);
+}
+get tempo() {
+const val = this.getProperty('tempo');
+return val || undefined;
+}
+set tempo(value) {
+this.setProperty('tempo', value || '');
+}
+buildClasses() {
+const classes = [];
+const size = this.getProperty('size');
+if (size) {
+classes.push(`icon-${size}`);
+}
+if (this.getProperty('spin')) {
+classes.push('icon-spin');
+}
+if (this.getProperty('pulse')) {
+classes.push('icon-pulse');
+}
+const tempo = this.getProperty('tempo');
+if (tempo && (this.getProperty('spin') || this.getProperty('pulse'))) {
+classes.push(`icon-tempo-${tempo}`);
+}
+const currentClasses = this.className.split(/\s+/).filter(cls => {
+return cls &&
+!cls.startsWith('icon-') &&
+cls !== 'icon-spin' &&
+cls !== 'icon-pulse';
+});
+return [...classes, ...currentClasses];
+}
+updateClasses() {
+const newClasses = this.buildClasses().join(' ');
+if (this.className !== newClasses) {
+this.className = newClasses;
+}
+}
+render() {
+const name = this.getProperty('name');
+if (!name) {
+this.renderSvg(NOT_FOUND_ICON);
+return;
+}
+const memorySvg = IconRegistry.getIcon(name);
+if (memorySvg) {
+this.renderSvg(memorySvg);
+return;
+}
+this.renderSvg(NOT_FOUND_ICON);
+}
+renderSvg(svg) {
+if (this._currentSvg === svg) {
+return;
+}
+if (this._slot) {
+this._slot.innerHTML = svg;
+this._currentSvg = svg;
+}
+}
 }
 TyIcon.formAssociated = false;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyIcon.properties = {
-    name: { type: 'string', visual: true, default: '' },
-    size: { type: 'string', visual: true, default: '' },
-    spin: { type: 'boolean', visual: true, default: false },
-    pulse: { type: 'boolean', visual: true, default: false },
-    tempo: { type: 'string', visual: true, default: '' },
+name: { type: 'string', visual: true, default: '' },
+size: { type: 'string', visual: true, default: '' },
+spin: { type: 'boolean', visual: true, default: false },
+pulse: { type: 'boolean', visual: true, default: false },
+tempo: { type: 'string', visual: true, default: '' },
 };
-// Register the custom element
 if (!customElements.get('ty-icon')) {
-    customElements.define('ty-icon', TyIcon);
+customElements.define('ty-icon', TyIcon);
 }
-// Export for use in other modules
 export { IconRegistry };
-//# sourceMappingURL=icon.js.map

package/lib/components/input.d.ts

@@ -1,63 +1,11 @@
 /**
- * TyInput Web Component
- * PORTED FROM: clj/ty/components/input.cljs
- * Phase D: Complete with debounce feature for input and change events
- *
- * Enhanced input component with:
- * - Label, error messages, semantic styling
- * - Icon slots (start/end)
- * - Numeric formatting with shadow values
- * - Currency, percent, compact notation
- * - Format-on-blur / raw-on-focus behavior
- * - Debounce (0-5000ms) for input/change events
- * - Immediate event firing on blur (cancels pending debounce)
- *
- * NOTE: Checkbox functionality is in separate ty-checkbox component
+ * TyInput Web Component - text input with label, error, icon slots and
+ * locale-aware numeric formatting (format-on-blur / raw-on-focus via a parsed
+ * "shadow value"). Debounce 0-5000ms; blur flushes any pending debounced event.
  */
 import type { Flavor, Size, InputType, TyInputElement } from '../types/common.js';
 import { TyComponent } from '../base/ty-component.js';
 import type { PropertyChange } from '../utils/property-manager.js';
-/**
- * Ty Input Component (Phase D - Complete with Debounce)
- *
- * @example
- * ```html
- * <!-- Basic input -->
- * <ty-input label="Email" type="email" placeholder="Enter email" required></ty-input>
- *
- * <!-- With icons -->
- * <ty-input label="Search">
- *   <ty-icon slot="start" name="search"></ty-icon>
- * </ty-input>
- *
- * <!-- With debounce (500ms) -->
- * <ty-input
- *   label="Search"
- *   debounce="500"
- *   placeholder="Type to search...">
- * </ty-input>
- *
- * <!-- Currency formatting -->
- * <ty-input
- *   label="Price"
- *   type="currency"
- *   currency="USD"
- *   locale="en-US"
- *   value="1234.56">
- * </ty-input>
- *
- * <!-- Percent formatting -->
- * <ty-input
- *   label="Tax Rate"
- *   type="percent"
- *   value="15"
- *   precision="2">
- * </ty-input>
- * ```
- */
-/**
- * Internal state interface for TyInput component
- */
 interface InputState {
     shadowValue: number | string | null;
     isFocused: boolean;
@@ -119,7 +67,7 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };
@@ -165,51 +113,23 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     private _changeDebounceTimer;
     private _localeObserver?;
     constructor();
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
+    /** TyComponent already handled pre-connection property capture. */
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
-    /**
-     * Handle property changes - called BEFORE render
-     * This replaces the old attributeChangedCallback logic
-     */
+    /** Handle property changes — called BEFORE render. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
-    /**
-     * Hook: Called when form is reset
-     * Clear shadow value and focus state
-     */
     protected onFormReset(): void;
     /**
      * Override form value to return shadow value
      * This ensures numeric types submit their parsed values
      */
     protected getFormValue(): FormDataEntryValue | null;
-    /**
-     * Initialize shadow value from the initial value attribute
-     */
     private initializeShadowValue;
-    /**
-     * Parse a string value to the appropriate shadow value type
-     */
     private parseShadowValue;
-    /**
-     * Check if current input should format numbers
-     */
     private shouldFormat;
-    /**
-     * Get the format configuration for current input
-     */
     private getFormatConfig;
-    /**
-     * Get the display value (formatted or raw)
-     */
     private getDisplayValue;
     get type(): InputType;
     set type(v: InputType);
@@ -240,32 +160,13 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     get debounce(): number;
     set debounce(v: number | string);
     get form(): HTMLFormElement | null;
-    /**
-     * Build CSS class list for input wrapper
-     */
     private buildClassList;
-    /**
-     * Dispatch input event (helper method for debouncing)
-     */
     private dispatchInputEvent;
-    /**
-     * Dispatch change event (helper method for debouncing)
-     */
     private dispatchChangeEvent;
-    /**
-     * Remove event listeners for cleanup
-     */
     private removeEventListeners;
-    /**
-   * Setup event listeners for input element
-   * IMPORTANT: Only called ONCE, not on every render (like ClojureScript)
-   */
+    /** IMPORTANT: Only called ONCE, not on every render. */
     private setupEventListeners;
-    /**
-     * Render the input component with wrapper and slots
-     * Phase C: Uses getDisplayValue() for formatted output
-     *
-     */
+    /** Render the input component with wrapper and slots. */
     render(): void;
     /**
      * Wire the password reveal toggle (rendered only for type="password").
@@ -282,4 +183,3 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     private updateValidity;
 }
 export {};
-//# sourceMappingURL=input.d.ts.map