tyrell-components 1.0.0-RC12 → 1.0.0-RC14

package/lib/utils/icon-registry.js

@@ -1,30 +1,13 @@
-/**
- * Icon Registry System
- * Simple icon storage and retrieval with Cache API persistence
- * PORTED FROM: clj/ty/icons.cljs
- */
 import { VERSION } from '../version.js';
-/** Icon registry - maps icon names to SVG strings */
 const iconRegistry = new Map();
-/** Watchers for registry changes - now receives Set of changed icon names */
 const watchers = new Map();
-/** Track which icons each watcher cares about (for selective notification) */
 const watcherIconNames = new Map();
-/** Pending notifications - batched for performance */
 let pendingNotifications = null;
 let notificationTimer = null;
-/** Cache API configuration */
 const CACHE_NAME = `ty-icons-v${VERSION}`;
-// Use a fake URL base for Cache API (requires valid URL format)
 const CACHE_URL_BASE = 'https://ty-icons.local/';
-/** Track in-flight cache reads to avoid duplicate work */
 const cacheReadPromises = new Map();
-/** Flag to track if old caches have been cleared */
 let oldCachesCleared = false;
-/**
- * Clear old cache versions on first use
- * This runs lazily the first time any icon is requested
- */
 async function clearOldCaches() {
     if (oldCachesCleared || !('caches' in window))
         return;
@@ -41,11 +24,6 @@ async function clearOldCaches() {
         console.warn('[ty-icons] Failed to clear old caches:', err);
     }
 }
-/**
- * Cache an icon in Cache API (non-blocking background operation)
- * @param name Icon name
- * @param svg SVG string
- */
 async function cacheIcon(name, svg) {
     if (!('caches' in window))
         return;
@@ -54,30 +32,19 @@ async function cacheIcon(name, svg) {
         const response = new Response(svg, {
             headers: { 'Content-Type': 'image/svg+xml' }
         });
-        // Cache API requires valid URLs
         await cache.put(`${CACHE_URL_BASE}${name}`, response);
     }
     catch (err) {
-        // Silent fail - caching is an optimization, not critical
         console.warn(`[ty-icons] Failed to cache icon "${name}":`, err);
     }
 }
-/**
- * Read icon directly from cache (for immediate rendering)
- * This is the key function that prevents icon twitching!
- * @param name Icon name
- * @returns Promise<string | null> - SVG string from cache or null
- */
 export async function getCachedIcon(name) {
-    // Check if we already have a read in progress for this icon
     const existingPromise = cacheReadPromises.get(name);
     if (existingPromise) {
         return existingPromise;
     }
-    // Create new read promise
     const readPromise = (async () => {
         try {
-            // Clear old caches on first cache access
             await clearOldCaches();
             const cache = await caches.open(CACHE_NAME);
             const response = await cache.match(`${CACHE_URL_BASE}${name}`);
@@ -90,77 +57,35 @@ export async function getCachedIcon(name) {
         }
         return null;
     })();
-    // Store promise to avoid duplicate work
     cacheReadPromises.set(name, readPromise);
-    // Clean up promise after completion
     readPromise.finally(() => {
         cacheReadPromises.delete(name);
     });
     return readPromise;
 }
-/**
- * Register multiple icons at once
- * Always updates memory and notifies watchers immediately
- * Cache update happens in background (only if different from cached version)
- * @param icons Object mapping icon names to SVG strings
- */
 export function registerIcons(icons) {
     const changedIcons = new Set();
     Object.entries(icons).forEach(([name, svg]) => {
-        // Always set in memory registry (fast, synchronous)
         iconRegistry.set(name, svg);
         changedIcons.add(name);
-        // Compare with cache in background to avoid unnecessary cache writes
-        /*getCachedIcon(name).then(cachedSvg => {
-          // Only write to cache if content actually changed
-          if (cachedSvg !== svg) {
-            cacheIcon(name, svg).catch(() => {
-              // Error already logged in cacheIcon
-            })
-          }
-          // If cachedSvg === svg, skip cache write (already up to date)
-        }).catch(() => {
-          // No cached version or error reading cache - write new icon
-          cacheIcon(name, svg).catch(() => {
-            // Error already logged in cacheIcon
-          })
-        })
-        */
     });
-    // Notify watchers immediately (synchronous)
     if (changedIcons.size > 0) {
         scheduleNotification(changedIcons);
     }
 }
-/**
- * Lookup an icon by name from memory
- * NOTE: This does NOT check cache - use getCachedIcon() for that
- * @param name Icon name
- * @returns SVG string or undefined
- */
 export function getIcon(name) {
     return iconRegistry.get(name);
 }
-/**
- * Check if an icon exists in memory
- * NOTE: This does NOT check cache
- * @param name Icon name
- * @returns true if icon is registered in memory
- */
 export function hasIcon(name) {
     return iconRegistry.has(name);
 }
-/**
- * Clear all registered icons from memory and cache
- */
 export async function clearIcons() {
     const allIcons = new Set(iconRegistry.keys());
     iconRegistry.clear();
-    // Clear cache
     if ('caches' in window) {
         try {
             await caches.delete(CACHE_NAME);
-            oldCachesCleared = false; // Allow re-clearing next time
+            oldCachesCleared = false;
         }
         catch (err) {
             console.warn('[ty-icons] Failed to clear icon cache:', err);
@@ -168,40 +93,24 @@ export async function clearIcons() {
     }
     scheduleNotification(allIcons);
 }
-/**
- * Add a watcher for registry changes
- * @param id Unique watcher ID
- * @param iconName Optional icon name to watch (for selective notification)
- * @param callback Function to call when watched icons change
- */
 export function addWatcher(id, iconName, callback) {
     watchers.set(id, callback);
     if (iconName) {
         watcherIconNames.set(id, iconName);
     }
 }
-/**
- * Remove a watcher
- * @param id Watcher ID to remove
- */
 export function removeWatcher(id) {
     watchers.delete(id);
     watcherIconNames.delete(id);
 }
-/**
- * Schedule notification for changed icons (batched and deferred)
- */
 function scheduleNotification(changedIcons) {
-    // Accumulate changed icons
     if (!pendingNotifications) {
         pendingNotifications = new Set();
     }
     changedIcons.forEach(name => pendingNotifications.add(name));
-    // Cancel existing timer
     if (notificationTimer !== null) {
         clearTimeout(notificationTimer);
     }
-    // Schedule notification using requestIdleCallback or setTimeout
     const scheduleCallback = typeof requestIdleCallback !== 'undefined'
         ? requestIdleCallback
         : (cb) => setTimeout(cb, 0);
@@ -209,41 +118,27 @@ function scheduleNotification(changedIcons) {
         const toNotify = pendingNotifications;
         pendingNotifications = null;
         notificationTimer = null;
-        // Only notify if we have icons to notify about
         if (toNotify && toNotify.size > 0) {
             notifyWatchers(toNotify);
         }
     });
 }
-/**
- * Notify watchers of changed icons (selective notification)
- */
 function notifyWatchers(changedIcons) {
     watchers.forEach((callback, watcherId) => {
         const watchedIcon = watcherIconNames.get(watcherId);
-        // If watcher is watching a specific icon, only notify if that icon changed
         if (watchedIcon) {
             if (changedIcons.has(watchedIcon)) {
                 callback(new Set([watchedIcon]));
             }
         }
         else {
-            // Watcher wants all changes
             callback(changedIcons);
         }
     });
 }
-/**
- * Get all registered icon names (memory only, not cache)
- * @returns Array of icon names
- */
 export function getIconNames() {
     return Array.from(iconRegistry.keys());
 }
-/**
- * Get cache statistics
- * @returns Promise with cache info
- */
 export async function getCacheInfo() {
     const info = {
         version: VERSION,
@@ -266,4 +161,3 @@ export async function getCacheInfo() {
         return info;
     }
 }
-//# sourceMappingURL=icon-registry.js.map

package/lib/utils/icons.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared inline SVG icons for shadow-DOM components.
+ *
+ * Kept inline (not the icon registry) because shadow roots must render
+ * without registry setup. Styling hooks target the wrapper element
+ * (e.g. `.required-icon svg`), never the svg's own classes.
+ */
+/** Lucide `asterisk` — required-field indicator. */
+export declare const REQUIRED_ICON_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 6v12\"/><path d=\"M17.196 9 6.804 15\"/><path d=\"m6.804 9 10.392 6\"/></svg>";

package/lib/utils/icons.js

@@ -0,0 +1 @@
+export const REQUIRED_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>`;

package/lib/utils/loader-registry.d.ts

@@ -2,8 +2,8 @@
  * Global loader-icon registry.
  *
  * Set once at app bootstrap to override the default spinner SVG used by
- * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
- * etc.). Components call `getLoaderSvg()` on every render, so changing the
+ * every loading-aware component (`ty-button`, `ty-select`, etc.). Components
+ * call `getLoaderSvg()` on every render, so changing the
  * registered SVG affects future renders.
  *
  * The wrapper element rotates the SVG with `transform: rotate()`, so prefer
@@ -32,4 +32,3 @@ export declare function setLoaderSvg(svg: string | null): void;
 export declare function getLoaderSvg(): string;
 /** Reset the registered loader back to the built-in default. */
 export declare function resetLoaderSvg(): void;
-//# sourceMappingURL=loader-registry.d.ts.map

package/lib/utils/loader-registry.js

@@ -1,43 +1,11 @@
-/**
- * Global loader-icon registry.
- *
- * Set once at app bootstrap to override the default spinner SVG used by
- * every loading-aware component (`ty-button`, `ty-dropdown`, `ty-multiselect`,
- * etc.). Components call `getLoaderSvg()` on every render, so changing the
- * registered SVG affects future renders.
- *
- * The wrapper element rotates the SVG with `transform: rotate()`, so prefer
- * a *static* SVG. If you must use a self-animating SVG, disable the wrapper
- * spin with the `--ty-loader-animation: none` CSS custom property.
- *
- * @example
- *   import { setLoaderSvg } from 'tyrell-components'
- *   setLoaderSvg('<svg viewBox="0 0 24 24">...</svg>')
- *
- *   // CDN / vanilla
- *   window.tyLoader.set('<svg ...>...</svg>')
- *
- *   // Reset to default
- *   setLoaderSvg(null)
- */
 const DEFAULT_LOADER_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-opacity="0.25"/><path d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>`;
 let customLoaderSvg = null;
-/**
- * Register a custom spinner SVG (markup string). Pass `null` to reset to
- * the built-in default.
- */
 export function setLoaderSvg(svg) {
     customLoaderSvg = svg && svg.trim() ? svg : null;
 }
-/**
- * Get the currently registered spinner SVG, or the built-in default if
- * none has been set. Components call this on every render.
- */
 export function getLoaderSvg() {
     return customLoaderSvg ?? DEFAULT_LOADER_SVG;
 }
-/** Reset the registered loader back to the built-in default. */
 export function resetLoaderSvg() {
     customLoaderSvg = null;
 }
-//# sourceMappingURL=loader-registry.js.map

package/lib/utils/locale.d.ts

@@ -1,28 +1,8 @@
 /**
  * Locale Resolution Utilities
  *
- * Provides a cascade system for resolving locale/language preferences:
- * 1. Component's explicit `locale` attribute (highest priority)
- * 2. Closest ancestor's `lang` attribute
- * 3. Document root's `lang` attribute
- * 4. Browser's language preference
- * 5. 'en-US' fallback (lowest priority)
- *
- * This allows developers to set locale at any level:
- * - Per-component: <ty-input locale="fr-FR">
- * - Per-section: <div lang="de-DE"><ty-input></ty-input></div>
- * - Per-page: <html lang="es-ES">
- * - Browser default: Uses navigator.language
- *
- * @example
- * ```typescript
- * // In a component
- * class TyInput extends HTMLElement {
- *   get locale(): string {
- *     return getEffectiveLocale(this, this.getAttribute('locale'));
- *   }
- * }
- * ```
+ * Cascade for resolving locale/language preferences, so developers can set it
+ * per-component, per-section, per-page, or fall back to the browser default.
  */
 /**
  * Get the effective locale for an element using the resolution cascade.
@@ -76,4 +56,3 @@ export declare function getEffectiveLocale(element: HTMLElement, explicitLocale?
  * ```
  */
 export declare function observeLocaleChanges(element: HTMLElement, callback: (newLocale: string) => void): () => void;
-//# sourceMappingURL=locale.d.ts.map

package/lib/utils/locale.js

@@ -1,106 +1,23 @@
-/**
- * Locale Resolution Utilities
- *
- * Provides a cascade system for resolving locale/language preferences:
- * 1. Component's explicit `locale` attribute (highest priority)
- * 2. Closest ancestor's `lang` attribute
- * 3. Document root's `lang` attribute
- * 4. Browser's language preference
- * 5. 'en-US' fallback (lowest priority)
- *
- * This allows developers to set locale at any level:
- * - Per-component: <ty-input locale="fr-FR">
- * - Per-section: <div lang="de-DE"><ty-input></ty-input></div>
- * - Per-page: <html lang="es-ES">
- * - Browser default: Uses navigator.language
- *
- * @example
- * ```typescript
- * // In a component
- * class TyInput extends HTMLElement {
- *   get locale(): string {
- *     return getEffectiveLocale(this, this.getAttribute('locale'));
- *   }
- * }
- * ```
- */
-/**
- * Get the effective locale for an element using the resolution cascade.
- *
- * Resolution order:
- * 1. Explicit locale attribute on the element
- * 2. Closest ancestor element with a `lang` attribute
- * 3. Document root element's `lang` attribute
- * 4. Browser's navigator.language
- * 5. Fallback to 'en-US'
- *
- * @param element - The element to get locale for
- * @param explicitLocale - Optional explicit locale value (from component's locale attribute)
- * @returns The resolved locale string (e.g., 'en-US', 'fr-FR')
- *
- * @example
- * ```html
- * <html lang="en-US">
- *   <div lang="fr-FR">
- *     <ty-input></ty-input>              <!-- Uses 'fr-FR' -->
- *     <ty-input locale="de-DE"></ty-input>  <!-- Uses 'de-DE' -->
- *   </div>
- *   <ty-input></ty-input>                <!-- Uses 'en-US' -->
- * </html>
- * ```
- */
 export function getEffectiveLocale(element, explicitLocale) {
-    // 1. Explicit locale attribute takes highest priority
     if (explicitLocale) {
         return explicitLocale;
     }
-    // 2. Check closest ancestor with lang attribute
-    // This allows per-section locale overrides
     const langElement = element.closest('[lang]');
     if (langElement) {
         const lang = langElement.getAttribute('lang');
         if (lang)
             return lang;
     }
-    // 3. Check document root (html element)
     if (document.documentElement.lang) {
         return document.documentElement.lang;
     }
-    // 4. Use browser's language preference
     if (navigator.language) {
         return navigator.language;
     }
-    // 5. Ultimate fallback
     return 'en-US';
 }
-/**
- * Create a MutationObserver to watch for lang attribute changes.
- * Useful for components that need to react to dynamic locale changes.
- *
- * @param element - The element to observe
- * @param callback - Function to call when lang changes
- * @returns Cleanup function to disconnect the observer
- *
- * @example
- * ```typescript
- * class TyInput extends HTMLElement {
- *   private _localeObserver?: () => void;
- *
- *   connectedCallback() {
- *     this._localeObserver = observeLocaleChanges(this, () => {
- *       this.render(); // Re-render when locale changes
- *     });
- *   }
- *
- *   disconnectedCallback() {
- *     this._localeObserver?.();
- *   }
- * }
- * ```
- */
 export function observeLocaleChanges(element, callback) {
     let currentLocale = getEffectiveLocale(element);
-    // Create observer for lang attribute changes on ancestors
     const observer = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
             if (mutation.type === 'attributes' && mutation.attributeName === 'lang') {
@@ -112,13 +29,10 @@ export function observeLocaleChanges(element, callback) {
             }
         }
     });
-    // Observe document and all ancestors
     observer.observe(document.documentElement, {
         attributes: true,
         attributeFilter: ['lang'],
         subtree: true
     });
-    // Return cleanup function
     return () => observer.disconnect();
 }
-//# sourceMappingURL=locale.js.map

package/lib/utils/mobile.d.ts

@@ -11,4 +11,3 @@
  * Returns true when the primary pointer is coarse (touch) AND viewport is narrow.
  */
 export declare function isMobileTouch(breakpoint?: number): boolean;
-//# sourceMappingURL=mobile.d.ts.map

package/lib/utils/mobile.js

@@ -1,21 +1,4 @@
-/**
- * Mobile detection utility
- *
- * Uses CSS media query via matchMedia for reliable detection:
- * - `pointer: coarse` identifies touch-primary devices (not laptops with touchscreens)
- * - Breakpoint is evaluated by the browser, always in sync with CSS
- * - Called on each use (not cached), so it responds to viewport changes and rotation
- */
-/**
- * Default mobile breakpoint (px).
- * Matches phones in portrait and most phones in landscape.
- */
 const MOBILE_BREAKPOINT = 768;
-/**
- * Detect mobile touch devices.
- * Returns true when the primary pointer is coarse (touch) AND viewport is narrow.
- */
 export function isMobileTouch(breakpoint = MOBILE_BREAKPOINT) {
     return window.matchMedia(`(pointer: coarse) and (max-width: ${breakpoint}px)`).matches;
 }
-//# sourceMappingURL=mobile.js.map

package/lib/utils/number-format.d.ts

@@ -1,6 +1,5 @@
 /**
  * Number Formatting Utilities
- * PORTED FROM: clj/ty/i18n/number.cljs
  *
  * Uses native Intl.NumberFormat for locale-aware number formatting
  * Supports currency, percent, compact notation, and custom precision
@@ -34,6 +33,10 @@ export declare function formatNumber(value: number, config: FormatConfig): strin
  * Simple rule: the last occurring . or , is the decimal separator.
  * Everything else is stripped. This works for both US (1,234.56) and
  * European (1.234,56) input, and for mobile keyboards that use , as decimal.
+ * One grouping exception: a repeated separator ("1.234.567") can't be a
+ * decimal point, so it's stripped as thousands grouping. A LONE separator is
+ * always decimal — "$1,234" pasted from formatted text parses as 1.234; this
+ * known ambiguity is resolved in favor of typed input ("12,50" → 12.5).
  *
  * @example
  * ```typescript
@@ -42,7 +45,8 @@ export declare function formatNumber(value: number, config: FormatConfig): strin
  * parseNumericValue("12,50")    // 12.5    (last separator is ,)
  * parseNumericValue("12.50")    // 12.5    (last separator is .)
  * parseNumericValue("1234")     // 1234
- * parseNumericValue("$1,234")   // 1234
+ * parseNumericValue("1.234.567") // 1234567 (repeated separator = grouping)
+ * parseNumericValue("$1,234")   // 1.234  (lone separator = decimal; known paste ambiguity)
  * parseNumericValue("15%")      // 15
  * parseNumericValue("")         // null
  * ```
@@ -59,4 +63,3 @@ export declare function parseNumericValue(value: string): number | null;
  * ```
  */
 export declare function shouldFormat(type: string): boolean;
-//# sourceMappingURL=number-format.d.ts.map

package/lib/utils/number-format.js

@@ -1,34 +1,10 @@
-/**
- * Number Formatting Utilities
- * PORTED FROM: clj/ty/i18n/number.cljs
- *
- * Uses native Intl.NumberFormat for locale-aware number formatting
- * Supports currency, percent, compact notation, and custom precision
- */
-/**
- * Format a number based on configuration
- *
- * @example
- * ```typescript
- * formatNumber(1234.56, { type: 'currency', currency: 'USD', locale: 'en-US' })
- * // Returns: "$1,234.56"
- *
- * formatNumber(0.15, { type: 'percent', precision: 2 })
- * // Returns: "15.00%"
- *
- * formatNumber(1234567, { type: 'compact' })
- * // Returns: "1.2M"
- * ```
- */
 export function formatNumber(value, config) {
     const { type, locale = 'en-US', currency = 'USD', precision } = config;
     const options = {};
-    // Add precision if specified
     if (precision !== undefined) {
         options.minimumFractionDigits = precision;
         options.maximumFractionDigits = precision;
     }
-    // Configure based on type
     switch (type) {
         case 'currency':
             options.style = 'currency';
@@ -36,8 +12,6 @@ export function formatNumber(value, config) {
             break;
         case 'percent':
             options.style = 'percent';
-            // Note: Intl.NumberFormat expects decimal (0.15 for 15%)
-            // We'll handle the division in the input component
             break;
         case 'compact':
             options.notation = 'compact';
@@ -50,67 +24,37 @@ export function formatNumber(value, config) {
     }
     const formatter = new Intl.NumberFormat(locale, options);
     const formatted = formatter.format(value);
-    // Normalize Unicode spaces for better HTML input compatibility
-    // Replace narrow no-break space (U+202F) and thin space (U+2009) with regular non-breaking space (U+00A0)
-    // This ensures proper rendering in HTML input elements
     return formatted
-        .replace(/\u202F/g, '\u00A0') // Narrow no-break space → non-breaking space
-        .replace(/\u2009/g, '\u00A0'); // Thin space → non-breaking space
+        .replace(/\u202F/g, '\u00A0')
+        .replace(/\u2009/g, '\u00A0');
 }
-/**
- * Parse a numeric string to a number
- *
- * Simple rule: the last occurring . or , is the decimal separator.
- * Everything else is stripped. This works for both US (1,234.56) and
- * European (1.234,56) input, and for mobile keyboards that use , as decimal.
- *
- * @example
- * ```typescript
- * parseNumericValue("1,234.56") // 1234.56 (last separator is .)
- * parseNumericValue("1.234,56") // 1234.56 (last separator is ,)
- * parseNumericValue("12,50")    // 12.5    (last separator is ,)
- * parseNumericValue("12.50")    // 12.5    (last separator is .)
- * parseNumericValue("1234")     // 1234
- * parseNumericValue("$1,234")   // 1234
- * parseNumericValue("15%")      // 15
- * parseNumericValue("")         // null
- * ```
- */
 export function parseNumericValue(value) {
     if (!value || value.trim() === '')
         return null;
-    // Strip everything except digits, dots, commas, and minus
     let stripped = value
         .replace(/[^\d.,-]/g, '')
         .trim();
     if (stripped === '' || stripped === '-')
         return null;
-    // Find the last occurring . or , — that's the decimal separator
     const lastComma = stripped.lastIndexOf(',');
     const lastDot = stripped.lastIndexOf('.');
     const lastSep = Math.max(lastComma, lastDot);
     if (lastSep === -1) {
-        // No separators — pure integer
         const parsed = parseFloat(stripped);
         return isNaN(parsed) ? null : parsed;
     }
-    // Split at the last separator
-    const intPart = stripped.slice(0, lastSep).replace(/[.,]/g, '');
-    const decPart = stripped.slice(lastSep + 1);
+    const sepChar = stripped[lastSep];
+    const before = stripped.slice(0, lastSep);
+    const after = stripped.slice(lastSep + 1);
+    if (before.includes(sepChar)) {
+        const parsed = parseFloat(stripped.replace(/[.,]/g, ''));
+        return isNaN(parsed) ? null : parsed;
+    }
+    const intPart = before.replace(/[.,]/g, '');
+    const decPart = after;
     const parsed = parseFloat(intPart + '.' + decPart);
     return isNaN(parsed) ? null : parsed;
 }
-/**
- * Check if input type requires numeric formatting
- *
- * @example
- * ```typescript
- * shouldFormat('currency') // true
- * shouldFormat('percent')  // true
- * shouldFormat('text')     // false
- * ```
- */
 export function shouldFormat(type) {
     return ['number', 'currency', 'percent', 'compact'].includes(type);
 }
-//# sourceMappingURL=number-format.js.map