codexly-ui 0.21.0 → 0.21.1

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, NgZone, model, ViewChildren, ApplicationRef, Injector, createComponent, Directive, forwardRef, contentChild, EnvironmentInjector, RendererFactory2, DestroyRef, untracked, HostListener, viewChild, ViewChild, ChangeDetectorRef, contentChildren, ContentChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, signal, inject, PLATFORM_ID, Injectable, effect, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, ElementRef, DestroyRef, Directive, HostAttributeToken, output, NgZone, model, ViewChildren, Injector, forwardRef, contentChild, untracked, HostListener, viewChild, ViewChild, ChangeDetectorRef, contentChildren, ContentChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
 import { isPlatformBrowser, NgStyle, NgTemplateOutlet, DOCUMENT, NgOptimizedImage, CurrencyPipe, DecimalPipe } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$1 from '@angular/forms';
@@ -210,30 +210,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] } });
 
-// ── Context ───────────────────────────────────────────────────────────────────
-/** Provided by clx-table-actions so nested clx-button instances default to the theme's
- *  secondaryColor instead of primaryColor when they don't pass their own [color] — any button
- *  that DOES pass [color] explicitly still overrides this, same as CLX_CARD_DISABLED_CONTEXT. */
-const CLX_TABLE_ACTIONS_CONTEXT = new InjectionToken('CLX_TABLE_ACTIONS_CONTEXT');
-const BUTTON_BASE_CLASS = 'relative overflow-hidden inline-flex items-center justify-center font-medium select-none transition-[color,background-color,border-color,box-shadow] duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
-const BUTTON_SIZE_MAP = {
-    xxs: 'text-xs px-1.5 py-0.5 gap-0.5',
-    xs: 'text-xs px-2 py-1 gap-1',
-    sm: 'text-xs px-3 py-1.5 gap-1.5',
-    md: 'text-sm px-4 py-2 gap-2',
-    lg: 'text-base px-5 py-2.5 gap-2.5',
-};
-const BUTTON_SHAPE_FIXED = {
-    pill: 'rounded-full',
-    circle: 'rounded-full',
-};
-const BUTTON_ICON_ONLY_SIZE_MAP = {
-    xxs: 'w-5 h-5 p-0 text-xs',
-    xs: 'w-7 h-7 p-0 text-xs',
-    sm: 'w-8 h-8 p-0 text-sm',
-    md: 'w-10 h-10 p-0 text-sm',
-    lg: 'w-11 h-11 p-0 text-sm',
+const CLX_ANIMATE_DEFAULTS_VALUE = {
+    duration: 1000,
+    delay: 0,
+    repeat: 1,
+    easing: 'ease',
+    fillMode: 'both',
+    once: false,
+    threshold: 0.1,
 };
+const CLX_ANIMATE_DEFAULTS = new InjectionToken('CLX_ANIMATE_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => CLX_ANIMATE_DEFAULTS_VALUE,
+});
+
+const PREFIX = 'clx-anim--';
+class ClxAnimateService {
+    platformId;
+    defaults;
+    isBrowser;
+    // ─── Estado de animaciones en curso ───────────────────────────────────────
+    _runningCount = signal(0, ...(ngDevMode ? [{ debugName: "_runningCount" }] : /* istanbul ignore next */ []));
+    isAnimating = computed(() => this._runningCount() > 0, ...(ngDevMode ? [{ debugName: "isAnimating" }] : /* istanbul ignore next */ []));
+    // ─── Cleanup por elemento (WeakMap preserva GC) ───────────────────────────
+    _cleanups = new WeakMap();
+    // ─── Pool de IntersectionObservers compartidos ────────────────────────────
+    _observerPools = new Map();
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.defaults = inject(CLX_ANIMATE_DEFAULTS);
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        if (this.isBrowser)
+            this._warmup();
+    }
+    // ─── Warmup ───────────────────────────────────────────────────────────────
+    /**
+     * Fuerza al browser a parsear los keyframes antes de la primera interacción
+     * para evitar el jank del primer frame. Se ejecuta en idle para no bloquear
+     * el critical rendering path.
+     */
+    _warmup() {
+        const run = () => {
+            const el = document.createElement('div');
+            el.style.cssText = 'position:fixed;top:-9999px;pointer-events:none;opacity:0;';
+            el.classList.add(`${PREFIX}animated`, `${PREFIX}bounce`);
+            document.body.appendChild(el);
+            requestAnimationFrame(() => requestAnimationFrame(() => document.body.removeChild(el)));
+        };
+        if ('requestIdleCallback' in window) {
+            window
+                .requestIdleCallback(run, { timeout: 1000 });
+        }
+        else {
+            setTimeout(run, 200);
+        }
+    }
+    // ─── API pública ──────────────────────────────────────────────────────────
+    /**
+     * Anima cualquier HTMLElement de forma imperativa.
+     * Retorna una Promise que resuelve cuando la animación termina.
+     */
+    animate(element, animationOrConfig, overrides = {}) {
+        if (!this.isBrowser)
+            return Promise.resolve();
+        return this.runAnimation(element, this.buildConfig(animationOrConfig, overrides));
+    }
+    /** Cancela la animación en curso en el elemento y restaura su estado. */
+    stop(element) {
+        this._cleanups.get(element)?.();
+    }
+    /**
+     * Registra un elemento en el pool de IntersectionObservers.
+     * Reutiliza el observer existente para el threshold dado o crea uno nuevo.
+     * Retorna una función para desregistrar el elemento.
+     */
+    observe(element, threshold, cb) {
+        if (!this.isBrowser)
+            return () => { };
+        let pool = this._observerPools.get(threshold);
+        if (!pool) {
+            const registry = new Map();
+            const observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    registry.get(entry.target)?.(entry.isIntersecting);
+                }
+            }, { threshold });
+            pool = { observer, registry };
+            this._observerPools.set(threshold, pool);
+        }
+        pool.registry.set(element, cb);
+        pool.observer.observe(element);
+        return () => {
+            const p = this._observerPools.get(threshold);
+            if (!p)
+                return;
+            p.observer.unobserve(element);
+            p.registry.delete(element);
+            if (p.registry.size === 0) {
+                p.observer.disconnect();
+                this._observerPools.delete(threshold);
+            }
+        };
+    }
+    // ─── Interno (usado por ClxAnimateDirective) ──────────────────────────────
+    runAnimation(element, config) {
+        // Solo hay clases previas que limpiar si el elemento ya tenía un cleanup
+        // registrado — en ese caso (restart de una animación en curso) sí hace
+        // falta forzar el reflow para que el browser registre la eliminación de
+        // clases antes de volver a agregarlas. En el caso común (primera
+        // animación del elemento, ej. un tooltip recién creado) stop() es un
+        // no-op y el reflow forzado es puro costo evitable.
+        const hadPreviousAnimation = this._cleanups.has(element);
+        this.stop(element);
+        if (hadPreviousAnimation)
+            void element.offsetHeight;
+        const animClass = `${PREFIX}${config.animation}`;
+        const isInfinite = config.repeat === 'infinite';
+        // A fillMode: 'forwards' animation (an exit fade/slide, e.g. clx-toast's playExitAnimation)
+        // is almost always followed by the caller destroying the element on the same tick its promise
+        // resolves — stripping animClass in _cleanup right then would drop animation-fill-mode's hold
+        // on the last keyframe, snapping the element back to its static CSS state (opaque, in place)
+        // for one paintable frame before removal, which read as a flash/"ghost" re-appearance. Classes
+        // are only stripped for a non-forwards run; a forwards run keeps them and instead resets
+        // them at the START of runAnimation's own reflow-forced restart path above, so a persisted
+        // element that's re-animated later (e.g. clx-animate-directive on hover) still resets cleanly.
+        const keepClassesOnEnd = config.fillMode === 'forwards';
+        element.style.setProperty('--clx-anim-duration', `${config.duration}ms`);
+        element.style.setProperty('--clx-anim-delay', `${config.delay}ms`);
+        element.style.setProperty('--clx-anim-repeat', isInfinite ? 'infinite' : String(config.repeat ?? 1));
+        element.style.setProperty('--clx-anim-easing', config.easing ?? 'ease');
+        if (config.fillMode) {
+            element.style.setProperty('animation-fill-mode', config.fillMode);
+        }
+        element.classList.add(`${PREFIX}animated`, animClass);
+        if (isInfinite)
+            element.classList.add(`${PREFIX}infinite`);
+        this._runningCount.update(c => c + 1);
+        if (isInfinite) {
+            this._cleanups.set(element, () => {
+                this._cleanup(element, animClass);
+                this._runningCount.update(c => Math.max(0, c - 1));
+            });
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            const handleEnd = (ev) => {
+                ev.stopPropagation();
+                if (keepClassesOnEnd) {
+                    this._cleanups.delete(element);
+                }
+                else {
+                    this._cleanup(element, animClass);
+                }
+                this._runningCount.update(c => Math.max(0, c - 1));
+                resolve();
+            };
+            element.addEventListener('animationend', handleEnd, { once: true });
+            this._cleanups.set(element, () => {
+                element.removeEventListener('animationend', handleEnd);
+                this._cleanup(element, animClass);
+                this._runningCount.update(c => Math.max(0, c - 1));
+                resolve();
+            });
+        });
+    }
+    buildConfig(animationOrConfig, overrides = {}) {
+        const base = typeof animationOrConfig === 'string'
+            ? { animation: animationOrConfig }
+            : animationOrConfig;
+        return {
+            duration: this.defaults.duration,
+            delay: this.defaults.delay,
+            repeat: this.defaults.repeat,
+            easing: this.defaults.easing,
+            fillMode: this.defaults.fillMode,
+            once: this.defaults.once,
+            threshold: this.defaults.threshold,
+            trigger: 'manual',
+            ...base,
+            ...overrides,
+        };
+    }
+    // ─── Privado ──────────────────────────────────────────────────────────────
+    _cleanup(element, animClass) {
+        element.classList.remove(`${PREFIX}animated`, animClass, `${PREFIX}infinite`);
+        element.style.removeProperty('--clx-anim-duration');
+        element.style.removeProperty('--clx-anim-delay');
+        element.style.removeProperty('--clx-anim-repeat');
+        element.style.removeProperty('--clx-anim-easing');
+        element.style.removeProperty('animation-fill-mode');
+        this._cleanups.delete(element);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 const CLX_FONT_CATALOG = [
     {
@@ -799,43 +973,368 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-const BADGE_SIZE_MAP = {
-    xs: 'text-[10px] px-1.5 py-0.5',
+const TOOLTIP_SIZE_MAP = {
     sm: 'text-xs px-2 py-1',
-    md: 'text-xs px-2.5 py-1 font-medium',
-};
-const BADGE_CIRCLE_SIZE_MAP = {
-    xs: 'text-[10px] w-4 h-4',
-    sm: 'text-xs w-5 h-5',
-    md: 'text-xs w-6 h-6 font-medium',
-};
-const BADGE_SHAPE_FIXED = {
-    pill: 'rounded-full',
-    circle: 'rounded-full',
-};
-
-// ── Context ───────────────────────────────────────────────────────────────────
-/** Provided by clx-card so nested form controls/buttons can inherit its disabled state. */
-const CLX_CARD_DISABLED_CONTEXT = new InjectionToken('CLX_CARD_DISABLED_CONTEXT');
-const CARD_PADDING_MAP = {
-    none: '',
-    sm: 'p-2',
-    md: 'p-3',
-    lg: 'p-5',
-};
-const CARD_SHADOW_MAP = {
-    none: 'shadow-none',
-    sm: 'shadow-sm',
-    md: 'shadow-md',
-    lg: 'shadow-lg',
-    xl: 'shadow-xl',
-    '2xl': 'shadow-2xl',
+    md: 'text-sm px-3 py-1.5 max-w-[220px]',
 };
 
-const SPINNER_SIZE_MAP = {
-    xxs: 'w-3 h-3   border-2',
-    xs: 'w-4 h-4   border-2',
-    sm: 'w-5 h-5   border-2',
+class ClxTooltipComponent {
+    _themeSvc = inject(ClxThemeService);
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().neutralColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => {
+        const t = resolveColor(this._color());
+        return `${t.text} rounded-lg shadow-xl ${t.bg} ${TOOLTIP_SIZE_MAP[this.size()]}`;
+    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxTooltipComponent, isStandalone: true, selector: "clx-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "class": "_hostClass()" } }, ngImport: i0, template: `<span class="whitespace-pre-wrap leading-snug">{{ text() }}</span>`, isInline: true, styles: ["clx-tooltip{position:absolute;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;will-change:opacity,transform}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'clx-tooltip', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'role': 'tooltip',
+                        '[class]': '_hostClass()',
+                    }, template: `<span class="whitespace-pre-wrap leading-snug">{{ text() }}</span>`, styles: ["clx-tooltip{position:absolute;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;will-change:opacity,transform}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+// ── Gap between trigger and bubble (px) ───────────────────────────────────
+const GAP = 8;
+/**
+ * Shared, app-wide tooltip bubble — a single ClxTooltipComponent instance reused by every
+ * [clxTooltip] directive instead of each one creating/destroying its own on every hover.
+ * A table with 75 tooltipped cells used to mean up to 75 independent createComponent/destroy
+ * cycles as the mouse scanned across it; now there's exactly one bubble, repositioned and
+ * relabeled per show(). Ownership is tracked by trigger element so a directive can only hide
+ * the bubble it itself showed (prevents a stale hide() from a slower hover-out racing a newer
+ * hover-in on a different element).
+ */
+class ClxTooltipService {
+    _appRef = inject(ApplicationRef);
+    _injector = inject(EnvironmentInjector);
+    _animate = inject(ClxAnimateService);
+    _platformId = inject(PLATFORM_ID);
+    _renderer;
+    _isBrowser;
+    _ref = null;
+    _el = null;
+    _owner = null;
+    _hiding = false;
+    constructor() {
+        this._isBrowser = isPlatformBrowser(this._platformId);
+        this._renderer = inject(RendererFactory2).createRenderer(null, null);
+    }
+    /** Shows (or relabels/repositions, if already visible) the shared bubble for `trigger`. */
+    show(trigger, config) {
+        if (!this._isBrowser || !config.text)
+            return;
+        this._owner = trigger;
+        this._hiding = false;
+        const ref = this._ref ?? this._create();
+        ref.setInput('text', config.text);
+        ref.setInput('color', config.color);
+        ref.setInput('size', config.size);
+        ref.setInput('position', config.position);
+        const el = ref.location.nativeElement;
+        this._animate.stop(el);
+        el.style.visibility = 'hidden';
+        el.style.opacity = '';
+        ref.changeDetectorRef.detectChanges();
+        // Single measurement pass — see clx-tooltip.directive.ts's original comment: read both
+        // rects once, resolve the flipped position and its coordinates from that same read, then
+        // apply everything in one write batch instead of interleaving reads/writes.
+        const triggerRect = trigger.getBoundingClientRect();
+        const bubbleRect = el.getBoundingClientRect();
+        const finalPos = this._resolvePosition(config.position, triggerRect, bubbleRect);
+        if (finalPos !== config.position) {
+            ref.setInput('position', finalPos);
+            ref.changeDetectorRef.detectChanges();
+        }
+        this._placeAt(el, triggerRect, bubbleRect, finalPos);
+        el.style.visibility = '';
+        trigger.setAttribute('aria-describedby', this._tooltipId);
+        this._animate.animate(el, { animation: 'fadeIn', duration: 160, trigger: 'manual', fillMode: 'both' });
+    }
+    /** Hides the bubble, but only if `trigger` is the element that currently owns it — a hover-out
+     *  from an element that already lost ownership (a newer hover-in interrupted it) is a no-op.
+     *  Relies on the 'animationend' DOM event to know when the fade-out finished — but that event
+     *  can simply never fire (backgrounded tab throttling animations, layout thrashing from a route
+     *  change interrupting the transition, etc.), which would leave the promise unresolved forever
+     *  and _owner never cleared — since this bubble lives outside any component's lifecycle (a
+     *  singleton appended straight to document.body), nothing else would ever hide it again. A hard
+     *  fallback timeout guarantees the bubble is actually hidden and ownership released regardless of
+     *  whether the CSS event cooperates. */
+    hide(trigger) {
+        if (!this._isBrowser || this._owner !== trigger || !this._ref)
+            return;
+        this._hiding = true;
+        trigger.removeAttribute('aria-describedby');
+        const el = this._ref.location.nativeElement;
+        const settle = () => {
+            if (this._owner !== trigger || !this._hiding)
+                return;
+            el.style.visibility = 'hidden';
+            this._owner = null;
+            this._hiding = false;
+        };
+        const fallback = setTimeout(settle, 400);
+        this._animate.animate(el, { animation: 'fadeOut', duration: 120, trigger: 'manual', fillMode: 'forwards' })
+            .then(() => {
+            clearTimeout(fallback);
+            settle();
+        });
+    }
+    /** Synchronous, no fade — used on touchend/click so the bubble can't linger over UI the
+     *  gesture opens (e.g. a modal). Only acts if `trigger` still owns the bubble. */
+    hideImmediate(trigger) {
+        if (!this._isBrowser || this._owner !== trigger || !this._ref)
+            return;
+        trigger.removeAttribute('aria-describedby');
+        const el = this._ref.location.nativeElement;
+        this._animate.stop(el);
+        el.style.visibility = 'hidden';
+        this._owner = null;
+        this._hiding = false;
+    }
+    get _tooltipId() {
+        return 'clx-tooltip-shared';
+    }
+    _create() {
+        const ref = createComponent(ClxTooltipComponent, { environmentInjector: this._injector });
+        this._appRef.attachView(ref.hostView);
+        const el = ref.location.nativeElement;
+        el.style.position = 'fixed';
+        el.style.visibility = 'hidden';
+        el.style.zIndex = '9999';
+        el.id = this._tooltipId;
+        this._renderer.appendChild(document.body, el);
+        this._ref = ref;
+        return ref;
+    }
+    // ── Positioning ──────────────────────────────────────────────────────────
+    _resolvePosition(requested, trigger, bubble) {
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const fits = {
+            top: trigger.top - bubble.height - GAP >= 0,
+            bottom: trigger.bottom + bubble.height + GAP <= vh,
+            left: trigger.left - bubble.width - GAP >= 0,
+            right: trigger.right + bubble.width + GAP <= vw,
+        };
+        if (fits[requested])
+            return requested;
+        const opposite = {
+            top: 'bottom', bottom: 'top', left: 'right', right: 'left',
+        };
+        const opp = opposite[requested];
+        if (fits[opp])
+            return opp;
+        for (const pos of ['top', 'bottom', 'left', 'right']) {
+            if (fits[pos])
+                return pos;
+        }
+        return requested; // last resort
+    }
+    _placeAt(el, trigger, bubble, pos) {
+        let top = 0;
+        let left = 0;
+        switch (pos) {
+            case 'top':
+                top = trigger.top - bubble.height - GAP;
+                left = trigger.left + trigger.width / 2 - bubble.width / 2;
+                break;
+            case 'bottom':
+                top = trigger.bottom + GAP;
+                left = trigger.left + trigger.width / 2 - bubble.width / 2;
+                break;
+            case 'left':
+                top = trigger.top + trigger.height / 2 - bubble.height / 2;
+                left = trigger.left - bubble.width - GAP;
+                break;
+            case 'right':
+                top = trigger.top + trigger.height / 2 - bubble.height / 2;
+                left = trigger.right + GAP;
+                break;
+        }
+        const margin = 4;
+        left = Math.max(margin, Math.min(left, window.innerWidth - bubble.width - margin));
+        top = Math.max(margin, Math.min(top, window.innerHeight - bubble.height - margin));
+        el.style.top = `${top}px`;
+        el.style.left = `${left}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class ClxTooltipDirective {
+    // ── Inputs ───────────────────────────────────────────────────────────────
+    clxTooltip = input.required(...(ngDevMode ? [{ debugName: "clxTooltip" }] : /* istanbul ignore next */ []));
+    clxTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "clxTooltipPosition" }] : /* istanbul ignore next */ []));
+    clxTooltipColor = input('slate', ...(ngDevMode ? [{ debugName: "clxTooltipColor" }] : /* istanbul ignore next */ []));
+    clxTooltipSize = input('md', ...(ngDevMode ? [{ debugName: "clxTooltipSize" }] : /* istanbul ignore next */ []));
+    clxTooltipDelay = input(0, ...(ngDevMode ? [{ debugName: "clxTooltipDelay" }] : /* istanbul ignore next */ []));
+    // ── DI ───────────────────────────────────────────────────────────────────
+    _el = inject(ElementRef);
+    _tooltip = inject(ClxTooltipService);
+    _platformId = inject(PLATFORM_ID);
+    _destroyRef = inject(DestroyRef);
+    // ── State ────────────────────────────────────────────────────────────────
+    _showTimer = null;
+    _hideTimer = null;
+    _abort = new AbortController();
+    constructor() {
+        if (!isPlatformBrowser(this._platformId))
+            return;
+        const host = this._el.nativeElement;
+        const { signal } = this._abort;
+        host.addEventListener('mouseenter', () => this._scheduleShow(), { signal });
+        host.addEventListener('mouseleave', () => this._scheduleHide(), { signal });
+        // :focus-visible, not a bare 'focus' check — a modal/drawer restores focus to its trigger
+        // button programmatically when it closes (standard a11y behavior), which fires 'focus' on
+        // this host with no real hover/keyboard interaction behind it. That reopened the tooltip and
+        // left it stuck floating over the page after the modal was dismissed. :focus-visible only
+        // matches when the browser itself determines the focus came from keyboard navigation, not
+        // from a programmatic .focus() call or a mouse/touch click — exactly the real-vs-restored
+        // distinction needed here.
+        host.addEventListener('focus', () => { if (host.matches(':focus-visible'))
+            this._scheduleShow(); }, { signal });
+        host.addEventListener('blur', () => this._scheduleHide(), { signal });
+        // Touch devices fire 'mouseenter'/'focus' on tap but never a real
+        // 'mouseleave' — dismiss immediately (no fade) so the bubble can't
+        // outlive the tap and float over whatever it triggered (e.g. a modal
+        // opening on the same gesture). Capture-phase 'click' fires before the
+        // host's own (click) handler — the one that actually opens the modal —
+        // so the bubble is gone from the DOM before the modal is created.
+        host.addEventListener('touchend', () => this._tooltip.hideImmediate(host), { signal });
+        host.addEventListener('touchcancel', () => this._tooltip.hideImmediate(host), { signal });
+        host.addEventListener('click', () => this._tooltip.hideImmediate(host), { signal, capture: true });
+        this._destroyRef.onDestroy(() => {
+            this._abort.abort();
+            this._clearTimers();
+            this._tooltip.hideImmediate(host);
+        });
+    }
+    // ── Show / Hide ──────────────────────────────────────────────────────────
+    _scheduleShow() {
+        this._clearHide();
+        const delay = this.clxTooltipDelay();
+        if (delay > 0) {
+            this._showTimer = setTimeout(() => this._show(), delay);
+        }
+        else {
+            this._show();
+        }
+    }
+    _scheduleHide() {
+        this._clearShow();
+        this._hideTimer = setTimeout(() => this._hide(), 80);
+    }
+    _show() {
+        this._tooltip.show(this._el.nativeElement, {
+            text: this.clxTooltip(),
+            position: this.clxTooltipPosition(),
+            color: this.clxTooltipColor(),
+            size: this.clxTooltipSize(),
+        });
+    }
+    _hide() {
+        this._tooltip.hide(this._el.nativeElement);
+    }
+    _clearShow() {
+        if (this._showTimer !== null) {
+            clearTimeout(this._showTimer);
+            this._showTimer = null;
+        }
+    }
+    _clearHide() {
+        if (this._hideTimer !== null) {
+            clearTimeout(this._hideTimer);
+            this._hideTimer = null;
+        }
+    }
+    _clearTimers() {
+        this._clearShow();
+        this._clearHide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: ClxTooltipDirective, isStandalone: true, selector: "[clxTooltip]", inputs: { clxTooltip: { classPropertyName: "clxTooltip", publicName: "clxTooltip", isSignal: true, isRequired: true, transformFunction: null }, clxTooltipPosition: { classPropertyName: "clxTooltipPosition", publicName: "clxTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipColor: { classPropertyName: "clxTooltipColor", publicName: "clxTooltipColor", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipSize: { classPropertyName: "clxTooltipSize", publicName: "clxTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipDelay: { classPropertyName: "clxTooltipDelay", publicName: "clxTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clxTooltip]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { clxTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltip", required: true }] }], clxTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipPosition", required: false }] }], clxTooltipColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipColor", required: false }] }], clxTooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipSize", required: false }] }], clxTooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipDelay", required: false }] }] } });
+
+// ── Context ───────────────────────────────────────────────────────────────────
+/** Provided by clx-table-actions so nested clx-button instances default to the theme's
+ *  secondaryColor instead of primaryColor when they don't pass their own [color] — any button
+ *  that DOES pass [color] explicitly still overrides this, same as CLX_CARD_DISABLED_CONTEXT. */
+const CLX_TABLE_ACTIONS_CONTEXT = new InjectionToken('CLX_TABLE_ACTIONS_CONTEXT');
+const BUTTON_BASE_CLASS = 'relative overflow-hidden inline-flex items-center justify-center font-medium select-none transition-[color,background-color,border-color,box-shadow] duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
+const BUTTON_SIZE_MAP = {
+    xxs: 'text-xs px-1.5 py-0.5 gap-0.5',
+    xs: 'text-xs px-2 py-1 gap-1',
+    sm: 'text-xs px-3 py-1.5 gap-1.5',
+    md: 'text-sm px-4 py-2 gap-2',
+    lg: 'text-base px-5 py-2.5 gap-2.5',
+};
+const BUTTON_SHAPE_FIXED = {
+    pill: 'rounded-full',
+    circle: 'rounded-full',
+};
+const BUTTON_ICON_ONLY_SIZE_MAP = {
+    xxs: 'w-5 h-5 p-0 text-xs',
+    xs: 'w-7 h-7 p-0 text-xs',
+    sm: 'w-8 h-8 p-0 text-sm',
+    md: 'w-10 h-10 p-0 text-sm',
+    lg: 'w-11 h-11 p-0 text-sm',
+};
+
+const BADGE_SIZE_MAP = {
+    xs: 'text-[10px] px-1.5 py-0.5',
+    sm: 'text-xs px-2 py-1',
+    md: 'text-xs px-2.5 py-1 font-medium',
+};
+const BADGE_CIRCLE_SIZE_MAP = {
+    xs: 'text-[10px] w-4 h-4',
+    sm: 'text-xs w-5 h-5',
+    md: 'text-xs w-6 h-6 font-medium',
+};
+const BADGE_SHAPE_FIXED = {
+    pill: 'rounded-full',
+    circle: 'rounded-full',
+};
+
+// ── Context ───────────────────────────────────────────────────────────────────
+/** Provided by clx-card so nested form controls/buttons can inherit its disabled state. */
+const CLX_CARD_DISABLED_CONTEXT = new InjectionToken('CLX_CARD_DISABLED_CONTEXT');
+const CARD_PADDING_MAP = {
+    none: '',
+    sm: 'p-2',
+    md: 'p-3',
+    lg: 'p-5',
+};
+const CARD_SHADOW_MAP = {
+    none: 'shadow-none',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+    xl: 'shadow-xl',
+    '2xl': 'shadow-2xl',
+};
+
+const SPINNER_SIZE_MAP = {
+    xxs: 'w-3 h-3   border-2',
+    xs: 'w-4 h-4   border-2',
+    sm: 'w-5 h-5   border-2',
     md: 'w-6 h-6   border-[3px]',
     lg: 'w-8 h-8   border-[3px]',
     xl: 'w-10 h-10 border-4',
@@ -1098,273 +1597,74 @@ class ClxButtonComponent {
         const diameter = Math.max(rect.width, rect.height);
         const id = ++this._nextId;
         this._ripples.update(rs => [...rs, { id, x: e.clientX - rect.left, y: e.clientY - rect.top, diameter }]);
-        setTimeout(() => this._ripples.update(rs => rs.filter(r => r.id !== id)), 650);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxButtonComponent, isStandalone: true, selector: "button[clx-button], a[clx-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onRipple($event)" }, properties: { "class": "_hostClass()", "style.opacity": "_inactive() ? \"0.5\" : null", "style.cursor": "_inactive() ? \"not-allowed\" : \"pointer\"", "attr.disabled": "_inactive() ? true : null", "attr.aria-busy": "loading()" } }, ngImport: i0, template: `
-    @if (icon() && iconPosition() === 'left' && !loading()) {
-      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
-    }
-    @if (loading()) {
-      <clx-spinner [size]="_iconSize()" [color]="_spinnerColor()" />
-    }
-    <ng-content />
-    @if (icon() && iconPosition() === 'right' && !loading()) {
-      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
-    }
-    <span class="clx-ripple-clip">
-      @for (r of _ripples(); track r.id) {
-        <span
-          class="clx-ripple-wave"
-          [style.background-color]="_rippleColor()"
-          [style.width.px]="r.diameter"
-          [style.height.px]="r.diameter"
-          [style.left.px]="r.x - r.diameter / 2"
-          [style.top.px]="r.y - r.diameter / 2"
-        ></span>
-      }
-    </span>
-    @if (badge() !== undefined && badge() !== null) {
-      <span [class]="_badgeClass()">{{ badge() }}</span>
-    }
-  `, isInline: true, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'button[clx-button], a[clx-button]', standalone: true, imports: [ClxIconComponent, ClxSpinnerComponent], template: `
-    @if (icon() && iconPosition() === 'left' && !loading()) {
-      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
-    }
-    @if (loading()) {
-      <clx-spinner [size]="_iconSize()" [color]="_spinnerColor()" />
-    }
-    <ng-content />
-    @if (icon() && iconPosition() === 'right' && !loading()) {
-      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
-    }
-    <span class="clx-ripple-clip">
-      @for (r of _ripples(); track r.id) {
-        <span
-          class="clx-ripple-wave"
-          [style.background-color]="_rippleColor()"
-          [style.width.px]="r.diameter"
-          [style.height.px]="r.diameter"
-          [style.left.px]="r.x - r.diameter / 2"
-          [style.top.px]="r.y - r.diameter / 2"
-        ></span>
-      }
-    </span>
-    @if (badge() !== undefined && badge() !== null) {
-      <span [class]="_badgeClass()">{{ badge() }}</span>
-    }
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class]': '_hostClass()',
-                        '[style.opacity]': '_inactive() ? "0.5" : null',
-                        '[style.cursor]': '_inactive() ? "not-allowed" : "pointer"',
-                        '[attr.disabled]': '_inactive() ? true : null',
-                        '[attr.aria-busy]': 'loading()',
-                        '(click)': '_onRipple($event)',
-                    }, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }] } });
-
-const CLX_ANIMATE_DEFAULTS_VALUE = {
-    duration: 1000,
-    delay: 0,
-    repeat: 1,
-    easing: 'ease',
-    fillMode: 'both',
-    once: false,
-    threshold: 0.1,
-};
-const CLX_ANIMATE_DEFAULTS = new InjectionToken('CLX_ANIMATE_DEFAULTS', {
-    providedIn: 'root',
-    factory: () => CLX_ANIMATE_DEFAULTS_VALUE,
-});
-
-const PREFIX = 'clx-anim--';
-class ClxAnimateService {
-    platformId;
-    defaults;
-    isBrowser;
-    // ─── Estado de animaciones en curso ───────────────────────────────────────
-    _runningCount = signal(0, ...(ngDevMode ? [{ debugName: "_runningCount" }] : /* istanbul ignore next */ []));
-    isAnimating = computed(() => this._runningCount() > 0, ...(ngDevMode ? [{ debugName: "isAnimating" }] : /* istanbul ignore next */ []));
-    // ─── Cleanup por elemento (WeakMap preserva GC) ───────────────────────────
-    _cleanups = new WeakMap();
-    // ─── Pool de IntersectionObservers compartidos ────────────────────────────
-    _observerPools = new Map();
-    constructor() {
-        this.platformId = inject(PLATFORM_ID);
-        this.defaults = inject(CLX_ANIMATE_DEFAULTS);
-        this.isBrowser = isPlatformBrowser(this.platformId);
-        if (this.isBrowser)
-            this._warmup();
-    }
-    // ─── Warmup ───────────────────────────────────────────────────────────────
-    /**
-     * Fuerza al browser a parsear los keyframes antes de la primera interacción
-     * para evitar el jank del primer frame. Se ejecuta en idle para no bloquear
-     * el critical rendering path.
-     */
-    _warmup() {
-        const run = () => {
-            const el = document.createElement('div');
-            el.style.cssText = 'position:fixed;top:-9999px;pointer-events:none;opacity:0;';
-            el.classList.add(`${PREFIX}animated`, `${PREFIX}bounce`);
-            document.body.appendChild(el);
-            requestAnimationFrame(() => requestAnimationFrame(() => document.body.removeChild(el)));
-        };
-        if ('requestIdleCallback' in window) {
-            window
-                .requestIdleCallback(run, { timeout: 1000 });
-        }
-        else {
-            setTimeout(run, 200);
-        }
-    }
-    // ─── API pública ──────────────────────────────────────────────────────────
-    /**
-     * Anima cualquier HTMLElement de forma imperativa.
-     * Retorna una Promise que resuelve cuando la animación termina.
-     */
-    animate(element, animationOrConfig, overrides = {}) {
-        if (!this.isBrowser)
-            return Promise.resolve();
-        return this.runAnimation(element, this.buildConfig(animationOrConfig, overrides));
-    }
-    /** Cancela la animación en curso en el elemento y restaura su estado. */
-    stop(element) {
-        this._cleanups.get(element)?.();
-    }
-    /**
-     * Registra un elemento en el pool de IntersectionObservers.
-     * Reutiliza el observer existente para el threshold dado o crea uno nuevo.
-     * Retorna una función para desregistrar el elemento.
-     */
-    observe(element, threshold, cb) {
-        if (!this.isBrowser)
-            return () => { };
-        let pool = this._observerPools.get(threshold);
-        if (!pool) {
-            const registry = new Map();
-            const observer = new IntersectionObserver((entries) => {
-                for (const entry of entries) {
-                    registry.get(entry.target)?.(entry.isIntersecting);
-                }
-            }, { threshold });
-            pool = { observer, registry };
-            this._observerPools.set(threshold, pool);
-        }
-        pool.registry.set(element, cb);
-        pool.observer.observe(element);
-        return () => {
-            const p = this._observerPools.get(threshold);
-            if (!p)
-                return;
-            p.observer.unobserve(element);
-            p.registry.delete(element);
-            if (p.registry.size === 0) {
-                p.observer.disconnect();
-                this._observerPools.delete(threshold);
-            }
-        };
-    }
-    // ─── Interno (usado por ClxAnimateDirective) ──────────────────────────────
-    runAnimation(element, config) {
-        // Solo hay clases previas que limpiar si el elemento ya tenía un cleanup
-        // registrado — en ese caso (restart de una animación en curso) sí hace
-        // falta forzar el reflow para que el browser registre la eliminación de
-        // clases antes de volver a agregarlas. En el caso común (primera
-        // animación del elemento, ej. un tooltip recién creado) stop() es un
-        // no-op y el reflow forzado es puro costo evitable.
-        const hadPreviousAnimation = this._cleanups.has(element);
-        this.stop(element);
-        if (hadPreviousAnimation)
-            void element.offsetHeight;
-        const animClass = `${PREFIX}${config.animation}`;
-        const isInfinite = config.repeat === 'infinite';
-        // A fillMode: 'forwards' animation (an exit fade/slide, e.g. clx-toast's playExitAnimation)
-        // is almost always followed by the caller destroying the element on the same tick its promise
-        // resolves — stripping animClass in _cleanup right then would drop animation-fill-mode's hold
-        // on the last keyframe, snapping the element back to its static CSS state (opaque, in place)
-        // for one paintable frame before removal, which read as a flash/"ghost" re-appearance. Classes
-        // are only stripped for a non-forwards run; a forwards run keeps them and instead resets
-        // them at the START of runAnimation's own reflow-forced restart path above, so a persisted
-        // element that's re-animated later (e.g. clx-animate-directive on hover) still resets cleanly.
-        const keepClassesOnEnd = config.fillMode === 'forwards';
-        element.style.setProperty('--clx-anim-duration', `${config.duration}ms`);
-        element.style.setProperty('--clx-anim-delay', `${config.delay}ms`);
-        element.style.setProperty('--clx-anim-repeat', isInfinite ? 'infinite' : String(config.repeat ?? 1));
-        element.style.setProperty('--clx-anim-easing', config.easing ?? 'ease');
-        if (config.fillMode) {
-            element.style.setProperty('animation-fill-mode', config.fillMode);
-        }
-        element.classList.add(`${PREFIX}animated`, animClass);
-        if (isInfinite)
-            element.classList.add(`${PREFIX}infinite`);
-        this._runningCount.update(c => c + 1);
-        if (isInfinite) {
-            this._cleanups.set(element, () => {
-                this._cleanup(element, animClass);
-                this._runningCount.update(c => Math.max(0, c - 1));
-            });
-            return Promise.resolve();
-        }
-        return new Promise(resolve => {
-            const handleEnd = (ev) => {
-                ev.stopPropagation();
-                if (keepClassesOnEnd) {
-                    this._cleanups.delete(element);
-                }
-                else {
-                    this._cleanup(element, animClass);
-                }
-                this._runningCount.update(c => Math.max(0, c - 1));
-                resolve();
-            };
-            element.addEventListener('animationend', handleEnd, { once: true });
-            this._cleanups.set(element, () => {
-                element.removeEventListener('animationend', handleEnd);
-                this._cleanup(element, animClass);
-                this._runningCount.update(c => Math.max(0, c - 1));
-                resolve();
-            });
-        });
-    }
-    buildConfig(animationOrConfig, overrides = {}) {
-        const base = typeof animationOrConfig === 'string'
-            ? { animation: animationOrConfig }
-            : animationOrConfig;
-        return {
-            duration: this.defaults.duration,
-            delay: this.defaults.delay,
-            repeat: this.defaults.repeat,
-            easing: this.defaults.easing,
-            fillMode: this.defaults.fillMode,
-            once: this.defaults.once,
-            threshold: this.defaults.threshold,
-            trigger: 'manual',
-            ...base,
-            ...overrides,
-        };
+        setTimeout(() => this._ripples.update(rs => rs.filter(r => r.id !== id)), 650);
     }
-    // ─── Privado ──────────────────────────────────────────────────────────────
-    _cleanup(element, animClass) {
-        element.classList.remove(`${PREFIX}animated`, animClass, `${PREFIX}infinite`);
-        element.style.removeProperty('--clx-anim-duration');
-        element.style.removeProperty('--clx-anim-delay');
-        element.style.removeProperty('--clx-anim-repeat');
-        element.style.removeProperty('--clx-anim-easing');
-        element.style.removeProperty('animation-fill-mode');
-        this._cleanups.delete(element);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxButtonComponent, isStandalone: true, selector: "button[clx-button], a[clx-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onRipple($event)" }, properties: { "class": "_hostClass()", "style.opacity": "_inactive() ? \"0.5\" : null", "style.cursor": "_inactive() ? \"not-allowed\" : \"pointer\"", "attr.disabled": "_inactive() ? true : null", "attr.aria-busy": "loading()" } }, ngImport: i0, template: `
+    @if (icon() && iconPosition() === 'left' && !loading()) {
+      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateService, providedIn: 'root' });
+    @if (loading()) {
+      <clx-spinner [size]="_iconSize()" [color]="_spinnerColor()" />
+    }
+    <ng-content />
+    @if (icon() && iconPosition() === 'right' && !loading()) {
+      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
+    }
+    <span class="clx-ripple-clip">
+      @for (r of _ripples(); track r.id) {
+        <span
+          class="clx-ripple-wave"
+          [style.background-color]="_rippleColor()"
+          [style.width.px]="r.diameter"
+          [style.height.px]="r.diameter"
+          [style.left.px]="r.x - r.diameter / 2"
+          [style.top.px]="r.y - r.diameter / 2"
+        ></span>
+      }
+    </span>
+    @if (badge() !== undefined && badge() !== null) {
+      <span [class]="_badgeClass()">{{ badge() }}</span>
+    }
+  `, isInline: true, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAnimateService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[clx-button], a[clx-button]', standalone: true, imports: [ClxIconComponent, ClxSpinnerComponent], template: `
+    @if (icon() && iconPosition() === 'left' && !loading()) {
+      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
+    }
+    @if (loading()) {
+      <clx-spinner [size]="_iconSize()" [color]="_spinnerColor()" />
+    }
+    <ng-content />
+    @if (icon() && iconPosition() === 'right' && !loading()) {
+      <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
+    }
+    <span class="clx-ripple-clip">
+      @for (r of _ripples(); track r.id) {
+        <span
+          class="clx-ripple-wave"
+          [style.background-color]="_rippleColor()"
+          [style.width.px]="r.diameter"
+          [style.height.px]="r.diameter"
+          [style.left.px]="r.x - r.diameter / 2"
+          [style.top.px]="r.y - r.diameter / 2"
+        ></span>
+      }
+    </span>
+    @if (badge() !== undefined && badge() !== null) {
+      <span [class]="_badgeClass()">{{ badge() }}</span>
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': '_hostClass()',
+                        '[style.opacity]': '_inactive() ? "0.5" : null',
+                        '[style.cursor]': '_inactive() ? "not-allowed" : "pointer"',
+                        '[attr.disabled]': '_inactive() ? true : null',
+                        '[attr.aria-busy]': 'loading()',
+                        '(click)': '_onRipple($event)',
+                    }, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }] } });
 
 // ─── Injection tokens ──────────────────────────────────────────────────────────
 const CLX_TOAST_DEFAULTS = new InjectionToken('CLX_TOAST_DEFAULTS', {
@@ -2021,6 +2321,9 @@ class ClxCopyTextComponent {
     toast = inject(ClxToastService);
     text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     copiedMessage = input('Copiado', ...(ngDevMode ? [{ debugName: "copiedMessage" }] : /* istanbul ignore next */ []));
+    /** clx-tooltip shown on hover (same directive as the table actions). */
+    tooltip = input('Copiar', ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    tooltipColor = input('slate', ...(ngDevMode ? [{ debugName: "tooltipColor" }] : /* istanbul ignore next */ []));
     copy(event) {
         event.stopPropagation();
         event.preventDefault();
@@ -2052,17 +2355,20 @@ class ClxCopyTextComponent {
         return ok;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCopyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxCopyTextComponent, isStandalone: true, selector: "clx-copy-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, copiedMessage: { classPropertyName: "copiedMessage", publicName: "copiedMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "click": "copy($event)", "keydown.enter": "copy($event)" }, properties: { "attr.aria-label": "\"Copiar \" + text()", "attr.title": "\"Copiar\"" }, classAttribute: "inline-flex items-center gap-1.5 max-w-full cursor-pointer rounded-md hover:bg-clx-surface-3 px-1 -mx-1 transition-colors" }, ngImport: i0, template: `
-    <span class="truncate">{{ text() }}</span>
-    <span clx-icon name="content_copy" size="xs" class="text-clx-text-subtle shrink-0"></span>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxCopyTextComponent, isStandalone: true, selector: "clx-copy-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, copiedMessage: { classPropertyName: "copiedMessage", publicName: "copiedMessage", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipColor: { classPropertyName: "tooltipColor", publicName: "tooltipColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "click": "copy($event)", "keydown.enter": "copy($event)" }, properties: { "attr.aria-label": "\"Copiar \" + text()" }, classAttribute: "inline-flex items-center gap-1.5 max-w-full cursor-pointer rounded-md hover:bg-clx-surface-3 px-1 -mx-1 transition-colors" }, ngImport: i0, template: `
+    <span class="inline-flex items-center gap-1.5 min-w-0"
+      [clxTooltip]="tooltip()" [clxTooltipColor]="tooltipColor()" clxTooltipPosition="top" clxTooltipSize="sm">
+      <span class="truncate">{{ text() }}</span>
+      <span clx-icon name="content_copy" size="xs" class="text-clx-text-subtle shrink-0"></span>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCopyTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-copy-text',
                     standalone: true,
-                    imports: [ClxIconComponent],
+                    imports: [ClxIconComponent, ClxTooltipDirective],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -2070,16 +2376,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         role: 'button',
                         tabindex: '0',
                         '[attr.aria-label]': '"Copiar " + text()',
-                        '[attr.title]': '"Copiar"',
                         '(click)': 'copy($event)',
                         '(keydown.enter)': 'copy($event)',
                     },
                     template: `
-    <span class="truncate">{{ text() }}</span>
-    <span clx-icon name="content_copy" size="xs" class="text-clx-text-subtle shrink-0"></span>
+    <span class="inline-flex items-center gap-1.5 min-w-0"
+      [clxTooltip]="tooltip()" [clxTooltipColor]="tooltipColor()" clxTooltipPosition="top" clxTooltipSize="sm">
+      <span class="truncate">{{ text() }}</span>
+      <span clx-icon name="content_copy" size="xs" class="text-clx-text-subtle shrink-0"></span>
+    </span>
   `,
                 }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], copiedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedMessage", required: false }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], copiedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "copiedMessage", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipColor", required: false }] }] } });
 
 const SOCIAL_ICON_DEFS = {
     instagram: {
@@ -3426,516 +3734,216 @@ class ClxStepperComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxStepperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clx-stepper',
-                    standalone: true,
-                    imports: [ClxIconComponent, NgTemplateOutlet],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { '[class]': '_hostClass()' },
-                    template: `
-    @for (step of steps(); track $index; let last = $last; let i = $index) {
-
-      <!-- Horizontal: circle+label form one fixed-width column, connector is a separate flex-1
-           track next to it — so the label centers under its own circle, not under circle+connector.
-           Vertical: circle+connector form one column, label sits beside it. -->
-      <div [class]="_stepWrapClass()">
-
-        @if (orientation() === 'horizontal') {
-          <div [class]="_circleColClass()">
-            <div [class]="_circleClass(step.status)">
-              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
-            </div>
-            <div [class]="_labelWrapClass()">
-              <span [class]="_labelClass(step.status)">{{ step.label }}</span>
-              @if (step.description) {
-                <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
-              }
-            </div>
-          </div>
-          @if (!last) {
-            <div [class]="_connectorClass(step.status)"></div>
-          }
-        } @else {
-          <div [class]="_circleColClass()">
-            <div [class]="_circleClass(step.status)">
-              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
-            </div>
-            @if (!last) {
-              <div [class]="_connectorClass(step.status)"></div>
-            }
-          </div>
-          <div [class]="_labelWrapClass()">
-            <span [class]="_labelClass(step.status)">{{ step.label }}</span>
-            @if (step.description) {
-              <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
-            }
-          </div>
-        }
-
-      </div>
-    }
-
-    <ng-template #circleContent let-step="step" let-i="i">
-      @switch (step.status) {
-        @case ('completed') {
-          <span clx-icon name="check" [size]="_tokens().iconSize"></span>
-        }
-        @case ('error') {
-          <span clx-icon name="close" [size]="_tokens().iconSize"></span>
-        }
-        @default {
-          @if (step.icon) {
-            <span clx-icon [name]="step.icon" [size]="_tokens().iconSize"></span>
-          } @else {
-            <span [class]="'font-bold leading-none select-none ' + _tokens().label">{{ i + 1 }}</span>
-          }
-        }
-      }
-    </ng-template>
-  `,
-                }]
-        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-const CLX_TIMELINE_CONTEXT = new InjectionToken('CLX_TIMELINE_CONTEXT');
-// ── Line style ────────────────────────────────────────────────────────────────
-const TIMELINE_LINE_STYLE = {
-    dotted: 'border-l-2 border-dashed border-slate-200',
-    solid: 'border-l-2 border-solid border-slate-200',
-    none: '',
-};
-// ── Size map ──────────────────────────────────────────────────────────────────
-const TIMELINE_SIZE_MAP = {
-    sm: { dot: 'w-8 h-8', iconSize: 'xs', item: 'px-3 pt-2', gap: 'gap-3', title: 'text-sm', desc: 'text-xs', time: 'text-xs', contentPb: 'pb-5' },
-    md: { dot: 'w-10 h-10', iconSize: 'sm', item: 'px-4 pt-3', gap: 'gap-4', title: 'text-sm', desc: 'text-xs', time: 'text-xs', contentPb: 'pb-6' },
-    lg: { dot: 'w-12 h-12', iconSize: 'md', item: 'px-5 pt-4', gap: 'gap-5', title: 'text-base', desc: 'text-sm', time: 'text-sm', contentPb: 'pb-8' },
-};
-
-class ClxTimelineComponent {
-    _themeSvc = inject(ClxThemeService);
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
-    lineStyle = input('dotted', ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
-    mode = input('left', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    sizeTokens = computed(() => TIMELINE_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "sizeTokens" }] : /* istanbul ignore next */ []));
-    _hostClass = computed(() => 'flex flex-col w-full', ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxTimelineComponent, isStandalone: true, selector: "clx-timeline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
-            { provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
-        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clx-timeline',
-                    standalone: true,
-                    imports: [],
-                    template: `<ng-content />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': '_hostClass()',
-                        'role': 'list',
-                    },
-                    providers: [
-                        { provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
-                    ],
-                }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-class ClxTimelineItemComponent {
-    _ctx = inject(CLX_TIMELINE_CONTEXT);
-    icon = input('circle', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
-    time = input('', ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
-    last = input(false, ...(ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []));
-    _resolvedColor = computed(() => resolveColor(this.color() ?? this._ctx.resolvedColor()), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
-    _iconClass = computed(() => this._resolvedColor().textSubtle, ...(ngDevMode ? [{ debugName: "_iconClass" }] : /* istanbul ignore next */ []));
-    _hostClass = computed(() => {
-        const { gap, item } = this._ctx.sizeTokens();
-        return `flex ${gap} w-full ${item}`;
-    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
-    _dotClass = computed(() => {
-        const { dot } = this._ctx.sizeTokens();
-        return `${dot} rounded-full flex items-center justify-center shrink-0 ${this._resolvedColor().bgSubtle}`;
-    }, ...(ngDevMode ? [{ debugName: "_dotClass" }] : /* istanbul ignore next */ []));
-    _lineClass = computed(() => {
-        if (this.last())
-            return 'flex-1';
-        const lineStyle = TIMELINE_LINE_STYLE[this._ctx.lineStyle()];
-        return `flex-1 w-0 mt-1 ${lineStyle}`.trim();
-    }, ...(ngDevMode ? [{ debugName: "_lineClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTimelineItemComponent, isStandalone: true, selector: "clx-timeline-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, last: { classPropertyName: "last", publicName: "last", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
-    <div class="flex flex-col items-center shrink-0">
-      <div [class]="_dotClass()">
-        <span clx-icon [name]="icon()" [size]="_ctx.sizeTokens().iconSize" [class]="_iconClass()"></span>
-      </div>
-      <div [class]="_lineClass()"></div>
-    </div>
-
-    <div [class]="'flex-1 min-w-0 ' + _ctx.sizeTokens().contentPb">
-      <div class="flex items-start justify-between gap-2">
-        <p [class]="'font-(--clx-timeline-title-weight) text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
-          {{ title() }}
-        </p>
-        @if (time()) {
-          <span [class]="'shrink-0 text-clx-text-subtle text-right leading-snug ' + _ctx.sizeTokens().time">
-            {{ time() }}
-          </span>
-        }
-      </div>
-      @if (description()) {
-        <p [class]="'text-clx-text-muted mt-0.5 ' + _ctx.sizeTokens().desc">{{ description() }}</p>
-      }
-      <ng-content />
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxStepperComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'clx-timeline-item',
+                    selector: 'clx-stepper',
                     standalone: true,
-                    imports: [ClxIconComponent],
-                    template: `
-    <div class="flex flex-col items-center shrink-0">
-      <div [class]="_dotClass()">
-        <span clx-icon [name]="icon()" [size]="_ctx.sizeTokens().iconSize" [class]="_iconClass()"></span>
-      </div>
-      <div [class]="_lineClass()"></div>
-    </div>
-
-    <div [class]="'flex-1 min-w-0 ' + _ctx.sizeTokens().contentPb">
-      <div class="flex items-start justify-between gap-2">
-        <p [class]="'font-(--clx-timeline-title-weight) text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
-          {{ title() }}
-        </p>
-        @if (time()) {
-          <span [class]="'shrink-0 text-clx-text-subtle text-right leading-snug ' + _ctx.sizeTokens().time">
-            {{ time() }}
-          </span>
-        }
-      </div>
-      @if (description()) {
-        <p [class]="'text-clx-text-muted mt-0.5 ' + _ctx.sizeTokens().desc">{{ description() }}</p>
-      }
-      <ng-content />
-    </div>
-  `,
+                    imports: [ClxIconComponent, NgTemplateOutlet],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': '_hostClass()',
-                        'role': 'listitem',
-                    },
-                }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], last: [{ type: i0.Input, args: [{ isSignal: true, alias: "last", required: false }] }] } });
-
-const TOOLTIP_SIZE_MAP = {
-    sm: 'text-xs px-2 py-1',
-    md: 'text-sm px-3 py-1.5 max-w-[220px]',
-};
+                    host: { '[class]': '_hostClass()' },
+                    template: `
+    @for (step of steps(); track $index; let last = $last; let i = $index) {
 
-class ClxTooltipComponent {
-    _themeSvc = inject(ClxThemeService);
-    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.config().neutralColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _hostClass = computed(() => {
-        const t = resolveColor(this._color());
-        return `${t.text} rounded-lg shadow-xl ${t.bg} ${TOOLTIP_SIZE_MAP[this.size()]}`;
-    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxTooltipComponent, isStandalone: true, selector: "clx-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "class": "_hostClass()" } }, ngImport: i0, template: `<span class="whitespace-pre-wrap leading-snug">{{ text() }}</span>`, isInline: true, styles: ["clx-tooltip{position:absolute;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;will-change:opacity,transform}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'clx-tooltip', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        'role': 'tooltip',
-                        '[class]': '_hostClass()',
-                    }, template: `<span class="whitespace-pre-wrap leading-snug">{{ text() }}</span>`, styles: ["clx-tooltip{position:absolute;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;will-change:opacity,transform}\n"] }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+      <!-- Horizontal: circle+label form one fixed-width column, connector is a separate flex-1
+           track next to it — so the label centers under its own circle, not under circle+connector.
+           Vertical: circle+connector form one column, label sits beside it. -->
+      <div [class]="_stepWrapClass()">
 
-// ── Gap between trigger and bubble (px) ───────────────────────────────────
-const GAP = 8;
-/**
- * Shared, app-wide tooltip bubble — a single ClxTooltipComponent instance reused by every
- * [clxTooltip] directive instead of each one creating/destroying its own on every hover.
- * A table with 75 tooltipped cells used to mean up to 75 independent createComponent/destroy
- * cycles as the mouse scanned across it; now there's exactly one bubble, repositioned and
- * relabeled per show(). Ownership is tracked by trigger element so a directive can only hide
- * the bubble it itself showed (prevents a stale hide() from a slower hover-out racing a newer
- * hover-in on a different element).
- */
-class ClxTooltipService {
-    _appRef = inject(ApplicationRef);
-    _injector = inject(EnvironmentInjector);
-    _animate = inject(ClxAnimateService);
-    _platformId = inject(PLATFORM_ID);
-    _renderer;
-    _isBrowser;
-    _ref = null;
-    _el = null;
-    _owner = null;
-    _hiding = false;
-    constructor() {
-        this._isBrowser = isPlatformBrowser(this._platformId);
-        this._renderer = inject(RendererFactory2).createRenderer(null, null);
-    }
-    /** Shows (or relabels/repositions, if already visible) the shared bubble for `trigger`. */
-    show(trigger, config) {
-        if (!this._isBrowser || !config.text)
-            return;
-        this._owner = trigger;
-        this._hiding = false;
-        const ref = this._ref ?? this._create();
-        ref.setInput('text', config.text);
-        ref.setInput('color', config.color);
-        ref.setInput('size', config.size);
-        ref.setInput('position', config.position);
-        const el = ref.location.nativeElement;
-        this._animate.stop(el);
-        el.style.visibility = 'hidden';
-        el.style.opacity = '';
-        ref.changeDetectorRef.detectChanges();
-        // Single measurement pass — see clx-tooltip.directive.ts's original comment: read both
-        // rects once, resolve the flipped position and its coordinates from that same read, then
-        // apply everything in one write batch instead of interleaving reads/writes.
-        const triggerRect = trigger.getBoundingClientRect();
-        const bubbleRect = el.getBoundingClientRect();
-        const finalPos = this._resolvePosition(config.position, triggerRect, bubbleRect);
-        if (finalPos !== config.position) {
-            ref.setInput('position', finalPos);
-            ref.changeDetectorRef.detectChanges();
-        }
-        this._placeAt(el, triggerRect, bubbleRect, finalPos);
-        el.style.visibility = '';
-        trigger.setAttribute('aria-describedby', this._tooltipId);
-        this._animate.animate(el, { animation: 'fadeIn', duration: 160, trigger: 'manual', fillMode: 'both' });
-    }
-    /** Hides the bubble, but only if `trigger` is the element that currently owns it — a hover-out
-     *  from an element that already lost ownership (a newer hover-in interrupted it) is a no-op.
-     *  Relies on the 'animationend' DOM event to know when the fade-out finished — but that event
-     *  can simply never fire (backgrounded tab throttling animations, layout thrashing from a route
-     *  change interrupting the transition, etc.), which would leave the promise unresolved forever
-     *  and _owner never cleared — since this bubble lives outside any component's lifecycle (a
-     *  singleton appended straight to document.body), nothing else would ever hide it again. A hard
-     *  fallback timeout guarantees the bubble is actually hidden and ownership released regardless of
-     *  whether the CSS event cooperates. */
-    hide(trigger) {
-        if (!this._isBrowser || this._owner !== trigger || !this._ref)
-            return;
-        this._hiding = true;
-        trigger.removeAttribute('aria-describedby');
-        const el = this._ref.location.nativeElement;
-        const settle = () => {
-            if (this._owner !== trigger || !this._hiding)
-                return;
-            el.style.visibility = 'hidden';
-            this._owner = null;
-            this._hiding = false;
-        };
-        const fallback = setTimeout(settle, 400);
-        this._animate.animate(el, { animation: 'fadeOut', duration: 120, trigger: 'manual', fillMode: 'forwards' })
-            .then(() => {
-            clearTimeout(fallback);
-            settle();
-        });
-    }
-    /** Synchronous, no fade — used on touchend/click so the bubble can't linger over UI the
-     *  gesture opens (e.g. a modal). Only acts if `trigger` still owns the bubble. */
-    hideImmediate(trigger) {
-        if (!this._isBrowser || this._owner !== trigger || !this._ref)
-            return;
-        trigger.removeAttribute('aria-describedby');
-        const el = this._ref.location.nativeElement;
-        this._animate.stop(el);
-        el.style.visibility = 'hidden';
-        this._owner = null;
-        this._hiding = false;
-    }
-    get _tooltipId() {
-        return 'clx-tooltip-shared';
-    }
-    _create() {
-        const ref = createComponent(ClxTooltipComponent, { environmentInjector: this._injector });
-        this._appRef.attachView(ref.hostView);
-        const el = ref.location.nativeElement;
-        el.style.position = 'fixed';
-        el.style.visibility = 'hidden';
-        el.style.zIndex = '9999';
-        el.id = this._tooltipId;
-        this._renderer.appendChild(document.body, el);
-        this._ref = ref;
-        return ref;
-    }
-    // ── Positioning ──────────────────────────────────────────────────────────
-    _resolvePosition(requested, trigger, bubble) {
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const fits = {
-            top: trigger.top - bubble.height - GAP >= 0,
-            bottom: trigger.bottom + bubble.height + GAP <= vh,
-            left: trigger.left - bubble.width - GAP >= 0,
-            right: trigger.right + bubble.width + GAP <= vw,
-        };
-        if (fits[requested])
-            return requested;
-        const opposite = {
-            top: 'bottom', bottom: 'top', left: 'right', right: 'left',
-        };
-        const opp = opposite[requested];
-        if (fits[opp])
-            return opp;
-        for (const pos of ['top', 'bottom', 'left', 'right']) {
-            if (fits[pos])
-                return pos;
-        }
-        return requested; // last resort
-    }
-    _placeAt(el, trigger, bubble, pos) {
-        let top = 0;
-        let left = 0;
-        switch (pos) {
-            case 'top':
-                top = trigger.top - bubble.height - GAP;
-                left = trigger.left + trigger.width / 2 - bubble.width / 2;
-                break;
-            case 'bottom':
-                top = trigger.bottom + GAP;
-                left = trigger.left + trigger.width / 2 - bubble.width / 2;
-                break;
-            case 'left':
-                top = trigger.top + trigger.height / 2 - bubble.height / 2;
-                left = trigger.left - bubble.width - GAP;
-                break;
-            case 'right':
-                top = trigger.top + trigger.height / 2 - bubble.height / 2;
-                left = trigger.right + GAP;
-                break;
+        @if (orientation() === 'horizontal') {
+          <div [class]="_circleColClass()">
+            <div [class]="_circleClass(step.status)">
+              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
+            </div>
+            <div [class]="_labelWrapClass()">
+              <span [class]="_labelClass(step.status)">{{ step.label }}</span>
+              @if (step.description) {
+                <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
+              }
+            </div>
+          </div>
+          @if (!last) {
+            <div [class]="_connectorClass(step.status)"></div>
+          }
+        } @else {
+          <div [class]="_circleColClass()">
+            <div [class]="_circleClass(step.status)">
+              <ng-container [ngTemplateOutlet]="circleContent" [ngTemplateOutletContext]="{ step, i }" />
+            </div>
+            @if (!last) {
+              <div [class]="_connectorClass(step.status)"></div>
+            }
+          </div>
+          <div [class]="_labelWrapClass()">
+            <span [class]="_labelClass(step.status)">{{ step.label }}</span>
+            @if (step.description) {
+              <span [class]="'text-clx-text-subtle ' + _tokens().desc">{{ step.description }}</span>
+            }
+          </div>
         }
-        const margin = 4;
-        left = Math.max(margin, Math.min(left, window.innerWidth - bubble.width - margin));
-        top = Math.max(margin, Math.min(top, window.innerHeight - bubble.height - margin));
-        el.style.top = `${top}px`;
-        el.style.left = `${left}px`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
 
-class ClxTooltipDirective {
-    // ── Inputs ───────────────────────────────────────────────────────────────
-    clxTooltip = input.required(...(ngDevMode ? [{ debugName: "clxTooltip" }] : /* istanbul ignore next */ []));
-    clxTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "clxTooltipPosition" }] : /* istanbul ignore next */ []));
-    clxTooltipColor = input('slate', ...(ngDevMode ? [{ debugName: "clxTooltipColor" }] : /* istanbul ignore next */ []));
-    clxTooltipSize = input('md', ...(ngDevMode ? [{ debugName: "clxTooltipSize" }] : /* istanbul ignore next */ []));
-    clxTooltipDelay = input(0, ...(ngDevMode ? [{ debugName: "clxTooltipDelay" }] : /* istanbul ignore next */ []));
-    // ── DI ───────────────────────────────────────────────────────────────────
-    _el = inject(ElementRef);
-    _tooltip = inject(ClxTooltipService);
-    _platformId = inject(PLATFORM_ID);
-    _destroyRef = inject(DestroyRef);
-    // ── State ────────────────────────────────────────────────────────────────
-    _showTimer = null;
-    _hideTimer = null;
-    _abort = new AbortController();
-    constructor() {
-        if (!isPlatformBrowser(this._platformId))
-            return;
-        const host = this._el.nativeElement;
-        const { signal } = this._abort;
-        host.addEventListener('mouseenter', () => this._scheduleShow(), { signal });
-        host.addEventListener('mouseleave', () => this._scheduleHide(), { signal });
-        // :focus-visible, not a bare 'focus' check — a modal/drawer restores focus to its trigger
-        // button programmatically when it closes (standard a11y behavior), which fires 'focus' on
-        // this host with no real hover/keyboard interaction behind it. That reopened the tooltip and
-        // left it stuck floating over the page after the modal was dismissed. :focus-visible only
-        // matches when the browser itself determines the focus came from keyboard navigation, not
-        // from a programmatic .focus() call or a mouse/touch click — exactly the real-vs-restored
-        // distinction needed here.
-        host.addEventListener('focus', () => { if (host.matches(':focus-visible'))
-            this._scheduleShow(); }, { signal });
-        host.addEventListener('blur', () => this._scheduleHide(), { signal });
-        // Touch devices fire 'mouseenter'/'focus' on tap but never a real
-        // 'mouseleave' — dismiss immediately (no fade) so the bubble can't
-        // outlive the tap and float over whatever it triggered (e.g. a modal
-        // opening on the same gesture). Capture-phase 'click' fires before the
-        // host's own (click) handler — the one that actually opens the modal —
-        // so the bubble is gone from the DOM before the modal is created.
-        host.addEventListener('touchend', () => this._tooltip.hideImmediate(host), { signal });
-        host.addEventListener('touchcancel', () => this._tooltip.hideImmediate(host), { signal });
-        host.addEventListener('click', () => this._tooltip.hideImmediate(host), { signal, capture: true });
-        this._destroyRef.onDestroy(() => {
-            this._abort.abort();
-            this._clearTimers();
-            this._tooltip.hideImmediate(host);
-        });
+      </div>
     }
-    // ── Show / Hide ──────────────────────────────────────────────────────────
-    _scheduleShow() {
-        this._clearHide();
-        const delay = this.clxTooltipDelay();
-        if (delay > 0) {
-            this._showTimer = setTimeout(() => this._show(), delay);
+
+    <ng-template #circleContent let-step="step" let-i="i">
+      @switch (step.status) {
+        @case ('completed') {
+          <span clx-icon name="check" [size]="_tokens().iconSize"></span>
         }
-        else {
-            this._show();
+        @case ('error') {
+          <span clx-icon name="close" [size]="_tokens().iconSize"></span>
         }
-    }
-    _scheduleHide() {
-        this._clearShow();
-        this._hideTimer = setTimeout(() => this._hide(), 80);
-    }
-    _show() {
-        this._tooltip.show(this._el.nativeElement, {
-            text: this.clxTooltip(),
-            position: this.clxTooltipPosition(),
-            color: this.clxTooltipColor(),
-            size: this.clxTooltipSize(),
-        });
-    }
-    _hide() {
-        this._tooltip.hide(this._el.nativeElement);
-    }
-    _clearShow() {
-        if (this._showTimer !== null) {
-            clearTimeout(this._showTimer);
-            this._showTimer = null;
+        @default {
+          @if (step.icon) {
+            <span clx-icon [name]="step.icon" [size]="_tokens().iconSize"></span>
+          } @else {
+            <span [class]="'font-bold leading-none select-none ' + _tokens().label">{{ i + 1 }}</span>
+          }
         }
-    }
-    _clearHide() {
-        if (this._hideTimer !== null) {
-            clearTimeout(this._hideTimer);
-            this._hideTimer = null;
+      }
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+const CLX_TIMELINE_CONTEXT = new InjectionToken('CLX_TIMELINE_CONTEXT');
+// ── Line style ────────────────────────────────────────────────────────────────
+const TIMELINE_LINE_STYLE = {
+    dotted: 'border-l-2 border-dashed border-slate-200',
+    solid: 'border-l-2 border-solid border-slate-200',
+    none: '',
+};
+// ── Size map ──────────────────────────────────────────────────────────────────
+const TIMELINE_SIZE_MAP = {
+    sm: { dot: 'w-8 h-8', iconSize: 'xs', item: 'px-3 pt-2', gap: 'gap-3', title: 'text-sm', desc: 'text-xs', time: 'text-xs', contentPb: 'pb-5' },
+    md: { dot: 'w-10 h-10', iconSize: 'sm', item: 'px-4 pt-3', gap: 'gap-4', title: 'text-sm', desc: 'text-xs', time: 'text-xs', contentPb: 'pb-6' },
+    lg: { dot: 'w-12 h-12', iconSize: 'md', item: 'px-5 pt-4', gap: 'gap-5', title: 'text-base', desc: 'text-sm', time: 'text-sm', contentPb: 'pb-8' },
+};
+
+class ClxTimelineComponent {
+    _themeSvc = inject(ClxThemeService);
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    lineStyle = input('dotted', ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
+    mode = input('left', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    sizeTokens = computed(() => TIMELINE_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "sizeTokens" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => 'flex flex-col w-full', ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxTimelineComponent, isStandalone: true, selector: "clx-timeline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
+            { provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-timeline',
+                    standalone: true,
+                    imports: [],
+                    template: `<ng-content />`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '_hostClass()',
+                        'role': 'list',
+                    },
+                    providers: [
+                        { provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
+                    ],
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class ClxTimelineItemComponent {
+    _ctx = inject(CLX_TIMELINE_CONTEXT);
+    icon = input('circle', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    time = input('', ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+    last = input(false, ...(ngDevMode ? [{ debugName: "last" }] : /* istanbul ignore next */ []));
+    _resolvedColor = computed(() => resolveColor(this.color() ?? this._ctx.resolvedColor()), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
+    _iconClass = computed(() => this._resolvedColor().textSubtle, ...(ngDevMode ? [{ debugName: "_iconClass" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => {
+        const { gap, item } = this._ctx.sizeTokens();
+        return `flex ${gap} w-full ${item}`;
+    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    _dotClass = computed(() => {
+        const { dot } = this._ctx.sizeTokens();
+        return `${dot} rounded-full flex items-center justify-center shrink-0 ${this._resolvedColor().bgSubtle}`;
+    }, ...(ngDevMode ? [{ debugName: "_dotClass" }] : /* istanbul ignore next */ []));
+    _lineClass = computed(() => {
+        if (this.last())
+            return 'flex-1';
+        const lineStyle = TIMELINE_LINE_STYLE[this._ctx.lineStyle()];
+        return `flex-1 w-0 mt-1 ${lineStyle}`.trim();
+    }, ...(ngDevMode ? [{ debugName: "_lineClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTimelineItemComponent, isStandalone: true, selector: "clx-timeline-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, last: { classPropertyName: "last", publicName: "last", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
+    <div class="flex flex-col items-center shrink-0">
+      <div [class]="_dotClass()">
+        <span clx-icon [name]="icon()" [size]="_ctx.sizeTokens().iconSize" [class]="_iconClass()"></span>
+      </div>
+      <div [class]="_lineClass()"></div>
+    </div>
+
+    <div [class]="'flex-1 min-w-0 ' + _ctx.sizeTokens().contentPb">
+      <div class="flex items-start justify-between gap-2">
+        <p [class]="'font-(--clx-timeline-title-weight) text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
+          {{ title() }}
+        </p>
+        @if (time()) {
+          <span [class]="'shrink-0 text-clx-text-subtle text-right leading-snug ' + _ctx.sizeTokens().time">
+            {{ time() }}
+          </span>
         }
-    }
-    _clearTimers() {
-        this._clearShow();
-        this._clearHide();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: ClxTooltipDirective, isStandalone: true, selector: "[clxTooltip]", inputs: { clxTooltip: { classPropertyName: "clxTooltip", publicName: "clxTooltip", isSignal: true, isRequired: true, transformFunction: null }, clxTooltipPosition: { classPropertyName: "clxTooltipPosition", publicName: "clxTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipColor: { classPropertyName: "clxTooltipColor", publicName: "clxTooltipColor", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipSize: { classPropertyName: "clxTooltipSize", publicName: "clxTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, clxTooltipDelay: { classPropertyName: "clxTooltipDelay", publicName: "clxTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+      </div>
+      @if (description()) {
+        <p [class]="'text-clx-text-muted mt-0.5 ' + _ctx.sizeTokens().desc">{{ description() }}</p>
+      }
+      <ng-content />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTooltipDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineItemComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[clxTooltip]',
+                    selector: 'clx-timeline-item',
                     standalone: true,
+                    imports: [ClxIconComponent],
+                    template: `
+    <div class="flex flex-col items-center shrink-0">
+      <div [class]="_dotClass()">
+        <span clx-icon [name]="icon()" [size]="_ctx.sizeTokens().iconSize" [class]="_iconClass()"></span>
+      </div>
+      <div [class]="_lineClass()"></div>
+    </div>
+
+    <div [class]="'flex-1 min-w-0 ' + _ctx.sizeTokens().contentPb">
+      <div class="flex items-start justify-between gap-2">
+        <p [class]="'font-(--clx-timeline-title-weight) text-clx-text-label leading-snug ' + _ctx.sizeTokens().title">
+          {{ title() }}
+        </p>
+        @if (time()) {
+          <span [class]="'shrink-0 text-clx-text-subtle text-right leading-snug ' + _ctx.sizeTokens().time">
+            {{ time() }}
+          </span>
+        }
+      </div>
+      @if (description()) {
+        <p [class]="'text-clx-text-muted mt-0.5 ' + _ctx.sizeTokens().desc">{{ description() }}</p>
+      }
+      <ng-content />
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '_hostClass()',
+                        'role': 'listitem',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { clxTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltip", required: true }] }], clxTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipPosition", required: false }] }], clxTooltipColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipColor", required: false }] }], clxTooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipSize", required: false }] }], clxTooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxTooltipDelay", required: false }] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], last: [{ type: i0.Input, args: [{ isSignal: true, alias: "last", required: false }] }] } });
 
 const INPUT_STATUS_MAP = {
     default: {