tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/file-upload.d.ts

@@ -1,18 +1,7 @@
 /**
- * TyFileUpload Web Component
- *
- * Drop zone + file picker primitive. Replaces `<input type="file">` with
- * a styleable, drag-and-drop-capable equivalent that works everywhere.
- *
- * - Click to browse or drag-and-drop
- * - Multiple file support
- * - Accept filter passed to the underlying file input
- * - Emits `change` with `{ files, names }` on every selection
- * - Form-associated: participates in FormData and form.reset()
- *
- * @example
- * <ty-file-upload name="avatar" accept="image/*" label="Profile photo"></ty-file-upload>
- * <ty-file-upload name="docs" multiple accept=".pdf,.docx" label="Attachments"></ty-file-upload>
+ * TyFileUpload Web Component — drop zone + file picker primitive. Replaces
+ * `<input type="file">` with a styleable, drag-and-drop-capable equivalent.
+ * Form-associated: participates in FormData and form.reset().
  */
 import { TyComponent } from "../base/ty-component.js";
 import type { PropertyChange } from "../utils/property-manager.js";
@@ -91,6 +80,12 @@ export declare class TyFileUpload extends TyComponent<FileUploadState> implement
     protected onPropertiesChanged(_changes: PropertyChange[]): void;
     protected onFormReset(): void;
     protected getFormValue(): FormData | string | null;
+    /**
+     * Match a file against the `accept` attribute the way native inputs do:
+     * comma-separated list of `.ext`, `type/subtype` or `type/*` entries.
+     * No/blank accept matches everything.
+     */
+    private matchesAccept;
     get files(): File[];
     get multiple(): boolean;
     set multiple(v: boolean);
@@ -118,4 +113,3 @@ export declare class TyFileUpload extends TyComponent<FileUploadState> implement
     protected render(): void;
 }
 export {};
-//# sourceMappingURL=file-upload.d.ts.map

package/lib/components/file-upload.js

@@ -1,19 +1,3 @@
-/**
- * TyFileUpload Web Component
- *
- * Drop zone + file picker primitive. Replaces `<input type="file">` with
- * a styleable, drag-and-drop-capable equivalent that works everywhere.
- *
- * - Click to browse or drag-and-drop
- * - Multiple file support
- * - Accept filter passed to the underlying file input
- * - Emits `change` with `{ files, names }` on every selection
- * - Form-associated: participates in FormData and form.reset()
- *
- * @example
- * <ty-file-upload name="avatar" accept="image/*" label="Profile photo"></ty-file-upload>
- * <ty-file-upload name="docs" multiple accept=".pdf,.docx" label="Attachments"></ty-file-upload>
- */
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { fileUploadStyles } from "../styles/file-upload.js";
@@ -60,18 +44,30 @@ export class TyFileUpload extends TyComponent {
             fileInput.value = "";
     }
     getFormValue() {
-        if (this._files.length === 0)
+        if (this._files.length === 0 || !this.name)
             return null;
         const fd = new FormData();
-        const fieldName = this.name || "files";
         for (const file of this._files) {
-            fd.append(fieldName, file);
+            fd.append(this.name, file);
         }
         return fd;
     }
-    // ============================================================================
-    // PUBLIC API
-    // ============================================================================
+    matchesAccept(file) {
+        const accept = this.accept?.trim();
+        if (!accept)
+            return true;
+        return accept.split(",").some((raw) => {
+            const entry = raw.trim().toLowerCase();
+            if (!entry)
+                return false;
+            if (entry.startsWith("."))
+                return file.name.toLowerCase().endsWith(entry);
+            const type = file.type.toLowerCase();
+            if (entry.endsWith("/*"))
+                return type.startsWith(entry.slice(0, -1));
+            return type === entry;
+        });
+    }
     get files() {
         return [...this._files];
     }
@@ -126,9 +122,6 @@ export class TyFileUpload extends TyComponent {
     get form() {
         return this._internals.form;
     }
-    // ============================================================================
-    // INTERNAL FILE MANAGEMENT
-    // ============================================================================
     setFiles(newFiles) {
         this._files = this.multiple ? newFiles : newFiles.slice(0, 1);
         this.updateFormValue();
@@ -150,9 +143,6 @@ export class TyFileUpload extends TyComponent {
         if (fileInput)
             fileInput.value = "";
     }
-    // ============================================================================
-    // EVENT LISTENERS
-    // ============================================================================
     setupEventListeners() {
         if (this._listenersSetup)
             return;
@@ -203,7 +193,7 @@ export class TyFileUpload extends TyComponent {
             e.stopPropagation();
             this._isDragging = false;
             dropZone.classList.remove("drag-active");
-            const files = Array.from(e.dataTransfer?.files ?? []);
+            const files = Array.from(e.dataTransfer?.files ?? []).filter((f) => this.matchesAccept(f));
             if (files.length > 0)
                 this.setFiles(files);
         };
@@ -251,9 +241,6 @@ export class TyFileUpload extends TyComponent {
             fileInput.removeEventListener("change", this._inputChangeHandler);
         this._listenersSetup = false;
     }
-    // ============================================================================
-    // RENDERING
-    // ============================================================================
     buildDropZoneClasses() {
         const classes = ["drop-zone"];
         if (this._isDragging)
@@ -336,7 +323,6 @@ export class TyFileUpload extends TyComponent {
             shadow.appendChild(container);
             this.setupEventListeners();
         }
-        // Label
         const labelEl = container.querySelector(".upload-label");
         if (this.label) {
             labelEl.style.display = "";
@@ -353,21 +339,17 @@ export class TyFileUpload extends TyComponent {
         else {
             labelEl.style.display = "none";
         }
-        // Drop zone
         const dropZone = container.querySelector(".drop-zone");
         dropZone.className = this.buildDropZoneClasses();
         dropZone.tabIndex = this.disabled ? -1 : 0;
         dropZone.setAttribute("aria-disabled", String(this.disabled));
         dropZone.setAttribute("aria-label", this.placeholder || "Upload files");
-        // File input
         const fileInput = container.querySelector(".file-input");
         fileInput.multiple = this.multiple;
         fileInput.accept = this.accept;
         fileInput.disabled = this.disabled;
-        // Upload icon — hide once files are selected to give room to the compact zone
         const uploadIcon = container.querySelector(".upload-icon");
         uploadIcon.style.display = this._files.length > 0 ? "none" : "";
-        // Hint text
         const hintEl = container.querySelector(".upload-hint");
         if (this._files.length > 0) {
             hintEl.innerHTML = `<strong>${this._files.length} file${this._files.length !== 1 ? "s" : ""} selected</strong>`;
@@ -375,7 +357,6 @@ export class TyFileUpload extends TyComponent {
         else {
             hintEl.innerHTML = `Drop files here or <span class="browse-link">click to browse</span>`;
         }
-        // Sub-hint
         const subHintEl = container.querySelector(".upload-sub-hint");
         if (this.accept && this._files.length === 0) {
             subHintEl.textContent = `Accepted: ${this.accept}`;
@@ -384,10 +365,8 @@ export class TyFileUpload extends TyComponent {
         else {
             subHintEl.style.display = "none";
         }
-        // File list
         const fileList = container.querySelector(".file-list");
         this.renderFileList(fileList);
-        // Error message
         const errorEl = container.querySelector(".error-message");
         errorEl.textContent = this.error;
         errorEl.style.display = this.error ? "" : "none";
@@ -438,4 +417,3 @@ TyFileUpload.properties = {
 if (!customElements.get("ty-file-upload")) {
     customElements.define("ty-file-upload", TyFileUpload);
 }
-//# sourceMappingURL=file-upload.js.map

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,101 +1,49 @@
-/**
- * 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"/>
 </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
-        // ============================================================================
+        super();
         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}`;
@@ -107,12 +55,8 @@ export class TyIcon extends TyComponent {
                 }
             }
         }
-        // Update host element classes for any visual change
         this.updateClasses();
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simple wrappers (no logic!)
-    // ============================================================================
     get name() {
         return this.getProperty('name');
     }
@@ -145,32 +89,23 @@ export class TyIcon extends TyComponent {
     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' &&
@@ -178,29 +113,18 @@ export class TyIcon extends TyComponent {
         });
         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);
@@ -208,14 +132,7 @@ export class TyIcon extends TyComponent {
         }
         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;
         }
@@ -226,9 +143,6 @@ export class TyIcon extends TyComponent {
     }
 }
 TyIcon.formAssociated = false;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyIcon.properties = {
     name: { type: 'string', visual: true, default: '' },
     size: { type: 'string', visual: true, default: '' },
@@ -236,10 +150,7 @@ TyIcon.properties = {
     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);
 }
-// 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;
@@ -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