tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/utils/flavor-sheet.js

@@ -1,40 +1,17 @@
-/**
- * Custom (non-built-in) flavor support.
- *
- * Built-in flavors get static per-flavor CSS in each component's stylesheet.
- * Any other flavor string is a custom flavor: the component generates the
- * same wiring at runtime, pointed at the user's design tokens
- * (--ty-color-X / --ty-bg-X / --ty-solid-X / ...), and adopts it as a
- * constructed stylesheet.
- *
- * Why an adopted sheet: render() implementations replace shadowRoot.innerHTML
- * (which would destroy an injected <style> element), and inline style on the
- * host would defeat page-level overrides. Adopted sheets survive renders, and
- * outer-document rules on the host still take precedence over :host rules —
- * so `ty-tag[flavor="X"] { --tag-bg: ... }` escape hatches keep working.
- */
 import { FLAVORS } from '../types/common.js';
-/**
- * Keep a shadow root's custom-flavor sheet in sync with the current flavor.
- *
- * Built-in flavors (and anything that isn't a plain identifier, so attribute
- * values can't inject CSS) remove the sheet. Custom flavors get `css(parts)`
- * adopted into the shadow root. Returns the sheet to store for the next call.
- */
 export function syncCustomFlavorSheet(shadow, sheet, flavor, css) {
-    const full = String(flavor || '');
-    const base = full.replace(/[+-]$/, '');
-    if (FLAVORS.includes(base) || !/^[A-Za-z][A-Za-z0-9_-]*$/.test(base)) {
-        if (sheet) {
-            shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.filter((s) => s !== sheet);
-        }
-        return null;
-    }
-    if (!sheet) {
-        sheet = new CSSStyleSheet();
-        shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
-    }
-    sheet.replaceSync(css({ flavor: full, base, shade: full.slice(base.length) }));
-    return sheet;
+const full = String(flavor || '');
+const base = full.replace(/[+-]$/, '');
+if (FLAVORS.includes(base) || !/^[A-Za-z][A-Za-z0-9_-]*$/.test(base)) {
+if (sheet) {
+shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.filter((s) => s !== sheet);
+}
+return null;
+}
+if (!sheet) {
+sheet = new CSSStyleSheet();
+shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+}
+sheet.replaceSync(css({ flavor: full, base, shade: full.slice(base.length) }));
+return sheet;
 }
-//# sourceMappingURL=flavor-sheet.js.map

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

@@ -1,7 +1,6 @@
 /**
  * Icon Registry System
  * Simple icon storage and retrieval with Cache API persistence
- * PORTED FROM: clj/ty/icons.cljs
  */
 /**
  * Read icon directly from cache (for immediate rendering)
@@ -62,4 +61,3 @@ export declare function getCacheInfo(): Promise<{
     available: boolean;
     iconCount?: number;
 }>;
-//# sourceMappingURL=icon-registry.d.ts.map

package/lib/utils/icon-registry.js

@@ -1,269 +1,163 @@
-/**
- * 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;
-    oldCachesCleared = true;
-    try {
-        const cacheNames = await caches.keys();
-        const oldCaches = cacheNames.filter(name => name.startsWith('ty-icons-v') && name !== CACHE_NAME);
-        await Promise.all(oldCaches.map(name => caches.delete(name)));
-        if (oldCaches.length > 0) {
-            console.log(`🗑️  Cleared ${oldCaches.length} old icon cache(s)`);
-        }
-    }
-    catch (err) {
-        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
- */
+if (oldCachesCleared || !('caches' in window))
+return;
+oldCachesCleared = true;
+try {
+const cacheNames = await caches.keys();
+const oldCaches = cacheNames.filter(name => name.startsWith('ty-icons-v') && name !== CACHE_NAME);
+await Promise.all(oldCaches.map(name => caches.delete(name)));
+if (oldCaches.length > 0) {
+console.log(`🗑️  Cleared ${oldCaches.length} old icon cache(s)`);
+}
+}
+catch (err) {
+console.warn('[ty-icons] Failed to clear old caches:', err);
+}
+}
 async function cacheIcon(name, svg) {
-    if (!('caches' in window))
-        return;
-    try {
-        const cache = await caches.open(CACHE_NAME);
-        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
- */
+if (!('caches' in window))
+return;
+try {
+const cache = await caches.open(CACHE_NAME);
+const response = new Response(svg, {
+headers: { 'Content-Type': 'image/svg+xml' }
+});
+await cache.put(`${CACHE_URL_BASE}${name}`, response);
+}
+catch (err) {
+console.warn(`[ty-icons] Failed to cache icon "${name}":`, err);
+}
+}
 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}`);
-            if (response) {
-                return await response.text();
-            }
-        }
-        catch (err) {
-            console.warn(`[ty-icons] Failed to read icon "${name}" from cache:`, err);
-        }
-        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
- */
+const existingPromise = cacheReadPromises.get(name);
+if (existingPromise) {
+return existingPromise;
+}
+const readPromise = (async () => {
+try {
+await clearOldCaches();
+const cache = await caches.open(CACHE_NAME);
+const response = await cache.match(`${CACHE_URL_BASE}${name}`);
+if (response) {
+return await response.text();
+}
+}
+catch (err) {
+console.warn(`[ty-icons] Failed to read icon "${name}" from cache:`, err);
+}
+return null;
+})();
+cacheReadPromises.set(name, readPromise);
+readPromise.finally(() => {
+cacheReadPromises.delete(name);
+});
+return readPromise;
+}
 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
- */
+const changedIcons = new Set();
+Object.entries(icons).forEach(([name, svg]) => {
+iconRegistry.set(name, svg);
+changedIcons.add(name);
+});
+if (changedIcons.size > 0) {
+scheduleNotification(changedIcons);
+}
+}
 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
- */
+return iconRegistry.get(name);
+}
 export function hasIcon(name) {
-    return iconRegistry.has(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
-        }
-        catch (err) {
-            console.warn('[ty-icons] Failed to clear icon cache:', err);
-        }
-    }
-    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
- */
+const allIcons = new Set(iconRegistry.keys());
+iconRegistry.clear();
+if ('caches' in window) {
+try {
+await caches.delete(CACHE_NAME);
+oldCachesCleared = false;
+}
+catch (err) {
+console.warn('[ty-icons] Failed to clear icon cache:', err);
+}
+}
+scheduleNotification(allIcons);
+}
 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
- */
+watchers.set(id, callback);
+if (iconName) {
+watcherIconNames.set(id, iconName);
+}
+}
 export function removeWatcher(id) {
-    watchers.delete(id);
-    watcherIconNames.delete(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);
-    notificationTimer = scheduleCallback(() => {
-        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)
- */
+if (!pendingNotifications) {
+pendingNotifications = new Set();
+}
+changedIcons.forEach(name => pendingNotifications.add(name));
+if (notificationTimer !== null) {
+clearTimeout(notificationTimer);
+}
+const scheduleCallback = typeof requestIdleCallback !== 'undefined'
+? requestIdleCallback
+: (cb) => setTimeout(cb, 0);
+notificationTimer = scheduleCallback(() => {
+const toNotify = pendingNotifications;
+pendingNotifications = null;
+notificationTimer = null;
+if (toNotify && toNotify.size > 0) {
+notifyWatchers(toNotify);
+}
+});
+}
 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
- */
+watchers.forEach((callback, watcherId) => {
+const watchedIcon = watcherIconNames.get(watcherId);
+if (watchedIcon) {
+if (changedIcons.has(watchedIcon)) {
+callback(new Set([watchedIcon]));
+}
+}
+else {
+callback(changedIcons);
+}
+});
+}
 export function getIconNames() {
-    return Array.from(iconRegistry.keys());
+return Array.from(iconRegistry.keys());
 }
-/**
- * Get cache statistics
- * @returns Promise with cache info
- */
 export async function getCacheInfo() {
-    const info = {
-        version: VERSION,
-        cacheName: CACHE_NAME,
-        available: 'caches' in window
-    };
-    if (!info.available)
-        return info;
-    try {
-        const cache = await caches.open(CACHE_NAME);
-        const keys = await cache.keys();
-        const iconKeys = keys.filter(req => req.url.startsWith(CACHE_URL_BASE));
-        return {
-            ...info,
-            iconCount: iconKeys.length
-        };
-    }
-    catch (err) {
-        console.warn('[ty-icons] Failed to get cache info:', err);
-        return info;
-    }
-}
-//# sourceMappingURL=icon-registry.js.map
+const info = {
+version: VERSION,
+cacheName: CACHE_NAME,
+available: 'caches' in window
+};
+if (!info.available)
+return info;
+try {
+const cache = await caches.open(CACHE_NAME);
+const keys = await cache.keys();
+const iconKeys = keys.filter(req => req.url.startsWith(CACHE_URL_BASE));
+return {
+...info,
+iconCount: iconKeys.length
+};
+}
+catch (err) {
+console.warn('[ty-icons] Failed to get cache info:', err);
+return info;
+}
+}

package/lib/utils/icons.d.ts

@@ -7,4 +7,3 @@
  */
 /** 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>";
-//# sourceMappingURL=icons.d.ts.map

package/lib/utils/icons.js

@@ -1,10 +1 @@
-/**
- * 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 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>`;
-//# sourceMappingURL=icons.js.map

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

@@ -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-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
- * 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;
+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;
+return customLoaderSvg ?? DEFAULT_LOADER_SVG;
 }
-/** Reset the registered loader back to the built-in default. */
 export function resetLoaderSvg() {
-    customLoaderSvg = null;
+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