codexly-ui 0.8.2 → 0.9.0

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, Directive, forwardRef, contentChild, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, DestroyRef, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
@@ -2352,10 +2352,16 @@ class ClxAnimateService {
     }
     // ─── 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);
-        // Fuerza reflow para que el browser registre la eliminación de clases
-        // antes de volver a agregarlas — necesario para reiniciar la animación.
-        void element.offsetHeight;
+        if (hadPreviousAnimation)
+            void element.offsetHeight;
         const animClass = `${PREFIX}${config.animation}`;
         const isInfinite = config.repeat === 'infinite';
         element.style.setProperty('--clx-anim-duration', `${config.duration}ms`);
@@ -2429,83 +2435,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 // ── Gap between trigger and bubble (px) ───────────────────────────────────
 const GAP = 8;
-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);
-    _renderer = inject(Renderer2);
+/**
+ * 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);
-    _destroyRef = inject(DestroyRef);
-    // ── State ────────────────────────────────────────────────────────────────
+    _renderer;
+    _isBrowser;
     _ref = null;
-    _pendingRef = null;
-    _showTimer = null;
-    _hideTimer = null;
-    _tooltipId = `clx-tooltip-${Math.random().toString(36).slice(2, 8)}`;
-    _abort = new AbortController();
-    _destroyed = false;
+    _el = null;
+    _owner = null;
+    _hiding = false;
     constructor() {
-        if (!isPlatformBrowser(this._platformId))
+        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;
-        const host = this._el.nativeElement;
-        const { signal } = this._abort;
-        host.addEventListener('mouseenter', () => this._scheduleShow(), { signal });
-        host.addEventListener('mouseleave', () => this._scheduleHide(), { signal });
-        host.addEventListener('focus', () => 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._hideImmediate(), { signal });
-        host.addEventListener('touchcancel', () => this._hideImmediate(), { signal });
-        host.addEventListener('click', () => this._hideImmediate(), { signal, capture: true });
-        this._destroyRef.onDestroy(() => {
-            this._destroyed = true;
-            this._abort.abort();
-            this._clearTimers();
-            this._forceDestroyBubble();
+        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. */
+    hide(trigger) {
+        if (!this._isBrowser || this._owner !== trigger || !this._ref)
+            return;
+        this._hiding = true;
+        trigger.removeAttribute('aria-describedby');
+        const el = this._ref.location.nativeElement;
+        this._animate.animate(el, { animation: 'fadeOut', duration: 120, trigger: 'manual', fillMode: 'forwards' })
+            .then(() => {
+            if (this._owner === trigger && this._hiding)
+                this._owner = null;
         });
     }
-    // ── Show / Hide ──────────────────────────────────────────────────────────
-    _scheduleShow() {
-        this._clearHide();
-        const delay = this.clxTooltipDelay();
-        if (delay > 0) {
-            this._showTimer = setTimeout(() => this._show(), delay);
-        }
-        else {
-            this._show();
-        }
+    /** 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;
     }
-    _scheduleHide() {
-        this._clearShow();
-        this._hideTimer = setTimeout(() => this._hide(), 80);
+    get _tooltipId() {
+        return 'clx-tooltip-shared';
     }
-    _show() {
-        if (this._ref)
-            return;
-        if (!this.clxTooltip())
-            return;
-        // Create component
-        const ref = createComponent(ClxTooltipComponent, {
-            environmentInjector: this._injector,
-        });
-        ref.setInput('text', this.clxTooltip());
-        ref.setInput('color', this.clxTooltipColor());
-        ref.setInput('size', this.clxTooltipSize());
-        // We'll set position after measurement
-        ref.setInput('position', this.clxTooltipPosition());
+    _create() {
+        const ref = createComponent(ClxTooltipComponent, { environmentInjector: this._injector });
         this._appRef.attachView(ref.hostView);
         const el = ref.location.nativeElement;
         el.style.position = 'fixed';
@@ -2513,63 +2528,13 @@ class ClxTooltipDirective {
         el.style.zIndex = '9999';
         el.id = this._tooltipId;
         this._renderer.appendChild(document.body, el);
-        ref.changeDetectorRef.detectChanges();
-        // Resolve final position (with viewport flip)
-        const finalPos = this._resolvePosition(el);
-        ref.setInput('position', finalPos);
-        ref.changeDetectorRef.detectChanges();
-        // Place at resolved coordinates
-        this._placeAt(el, finalPos);
-        el.style.visibility = '';
         this._ref = ref;
-        // Aria
-        this._el.nativeElement.setAttribute('aria-describedby', this._tooltipId);
-        // Animate in
-        this._animate.animate(el, {
-            animation: 'fadeIn',
-            duration: 160,
-            trigger: 'manual',
-            fillMode: 'both',
-        });
-    }
-    _hide() {
-        const ref = this._ref;
-        if (!ref)
-            return;
-        this._ref = null;
-        this._pendingRef = ref;
-        this._el.nativeElement.removeAttribute('aria-describedby');
-        const el = ref.location.nativeElement;
-        this._animate.animate(el, {
-            animation: 'fadeOut',
-            duration: 120,
-            trigger: 'manual',
-            fillMode: 'forwards',
-        }).then(() => {
-            this._pendingRef = null;
-            this._appRef.detachView(ref.hostView);
-            ref.destroy();
-        });
-    }
-    /** Synchronous teardown, no fade — used on touchend so the bubble can't linger over UI the tap opens. */
-    _hideImmediate() {
-        this._clearTimers();
-        this._destroyBubble();
-        if (this._pendingRef) {
-            const el = this._pendingRef.location.nativeElement;
-            this._animate.stop(el);
-            this._appRef.detachView(this._pendingRef.hostView);
-            this._pendingRef.destroy();
-            this._pendingRef = null;
-        }
+        return ref;
     }
     // ── Positioning ──────────────────────────────────────────────────────────
-    _resolvePosition(el) {
-        const requested = this.clxTooltipPosition();
+    _resolvePosition(requested, trigger, bubble) {
         const vw = window.innerWidth;
         const vh = window.innerHeight;
-        const trigger = this._el.nativeElement.getBoundingClientRect();
-        const bubble = el.getBoundingClientRect();
         const fits = {
             top: trigger.top - bubble.height - GAP >= 0,
             bottom: trigger.bottom + bubble.height + GAP <= vh,
@@ -2578,23 +2543,19 @@ class ClxTooltipDirective {
         };
         if (fits[requested])
             return requested;
-        // Flip axis
         const opposite = {
             top: 'bottom', bottom: 'top', left: 'right', right: 'left',
         };
         const opp = opposite[requested];
         if (fits[opp])
             return opp;
-        // Fallback: any position that fits
         for (const pos of ['top', 'bottom', 'left', 'right']) {
             if (fits[pos])
                 return pos;
         }
         return requested; // last resort
     }
-    _placeAt(el, pos) {
-        const trigger = this._el.nativeElement.getBoundingClientRect();
-        const bubble = el.getBoundingClientRect();
+    _placeAt(el, trigger, bubble, pos) {
         let top = 0;
         let left = 0;
         switch (pos) {
@@ -2615,36 +2576,86 @@ class ClxTooltipDirective {
                 left = trigger.right + GAP;
                 break;
         }
-        // Clamp to viewport edges with 4px margin
         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`;
     }
-    // ── Helpers ──────────────────────────────────────────────────────────────
-    _destroyBubble() {
-        if (!this._ref)
+    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;
-        this._appRef.detachView(this._ref.hostView);
-        this._ref.destroy();
-        this._ref = null;
-        this._el.nativeElement.removeAttribute('aria-describedby');
+        const host = this._el.nativeElement;
+        const { signal } = this._abort;
+        host.addEventListener('mouseenter', () => this._scheduleShow(), { signal });
+        host.addEventListener('mouseleave', () => this._scheduleHide(), { signal });
+        host.addEventListener('focus', () => 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);
+        });
     }
-    _forceDestroyBubble() {
-        if (this._ref) {
-            const el = this._ref.location.nativeElement;
-            this._animate.stop(el);
-            this._destroyBubble();
+    // ── Show / Hide ──────────────────────────────────────────────────────────
+    _scheduleShow() {
+        this._clearHide();
+        const delay = this.clxTooltipDelay();
+        if (delay > 0) {
+            this._showTimer = setTimeout(() => this._show(), delay);
         }
-        if (this._pendingRef) {
-            const el = this._pendingRef.location.nativeElement;
-            this._animate.stop(el);
-            this._appRef.detachView(this._pendingRef.hostView);
-            this._pendingRef.destroy();
-            this._pendingRef = null;
+        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);
@@ -6114,12 +6125,11 @@ class ClxColorPickerComponent {
             <div class="absolute inset-0" [style.background-color]="_hueBackground()"></div>
             <div class="absolute inset-0" style="background: linear-gradient(to right, #ffffff, transparent)"></div>
             <div class="absolute inset-0" style="background: linear-gradient(to top, #000000, transparent)"></div>
-            <!-- Cursor -->
+            <!-- Cursor — positioned via transform (compositor-only) instead of left/top so
+                 every pointermove during a drag doesn't force a layout recalculation. -->
             <div
-              class="absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
-              [style.left.%]="_saturation() * 100"
-              [style.top.%]="(1 - _brightness()) * 100"
-              style="transform: translate(-50%, -50%)">
+              class="absolute top-0 left-0 w-3.5 h-3.5 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
+              [style.transform]="'translate(calc(' + (_saturation() * 100) + '% - 50%), calc(' + ((1 - _brightness()) * 100) + '% - 50%))'">
             </div>
           </div>
 
@@ -6132,10 +6142,9 @@ class ClxColorPickerComponent {
               style="background: linear-gradient(to right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)">
             </div>
             <div
-              class="absolute top-1/2 w-4 h-4 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
-              [style.left.%]="(_hue() / 360) * 100"
-              [style.background-color]="_hueBackground()"
-              style="transform: translate(-50%, -50%)">
+              class="absolute top-1/2 left-0 w-4 h-4 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
+              [style.transform]="'translate(calc(' + ((_hue() / 360) * 100) + '% - 50%), -50%)'"
+              [style.background-color]="_hueBackground()">
             </div>
           </div>
 
@@ -6283,12 +6292,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <div class="absolute inset-0" [style.background-color]="_hueBackground()"></div>
             <div class="absolute inset-0" style="background: linear-gradient(to right, #ffffff, transparent)"></div>
             <div class="absolute inset-0" style="background: linear-gradient(to top, #000000, transparent)"></div>
-            <!-- Cursor -->
+            <!-- Cursor — positioned via transform (compositor-only) instead of left/top so
+                 every pointermove during a drag doesn't force a layout recalculation. -->
             <div
-              class="absolute w-3.5 h-3.5 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
-              [style.left.%]="_saturation() * 100"
-              [style.top.%]="(1 - _brightness()) * 100"
-              style="transform: translate(-50%, -50%)">
+              class="absolute top-0 left-0 w-3.5 h-3.5 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
+              [style.transform]="'translate(calc(' + (_saturation() * 100) + '% - 50%), calc(' + ((1 - _brightness()) * 100) + '% - 50%))'">
             </div>
           </div>
 
@@ -6301,10 +6309,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               style="background: linear-gradient(to right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)">
             </div>
             <div
-              class="absolute top-1/2 w-4 h-4 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
-              [style.left.%]="(_hue() / 360) * 100"
-              [style.background-color]="_hueBackground()"
-              style="transform: translate(-50%, -50%)">
+              class="absolute top-1/2 left-0 w-4 h-4 rounded-full border-2 border-white shadow ring-1 ring-black/20 pointer-events-none"
+              [style.transform]="'translate(calc(' + ((_hue() / 360) * 100) + '% - 50%), -50%)'"
+              [style.background-color]="_hueBackground()">
             </div>
           </div>
 
@@ -9399,6 +9406,9 @@ class ClxAppLayoutComponent {
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     _hovered = signal(false, ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
+    /** True only for the duration of an explicit toggle/hover transition — see _sidebarCls(). */
+    _animating = signal(false, ...(ngDevMode ? [{ debugName: "_animating" }] : /* istanbul ignore next */ []));
+    _animatingTimer;
     collapsedChange = output();
     expandedChange = output();
     constructor() {
@@ -9422,12 +9432,28 @@ class ClxAppLayoutComponent {
             width = 'w-72';
         }
         const isOverlay = isDesktopCollapsed && hovered;
+        // `width` only transitions while `_animating` is true (set for the duration of an explicit
+        // collapse/expand/hover toggle — see _withTransition()). Left permanently on, this transition
+        // would also animate every layout pass a native window resize causes (the sidebar's computed
+        // width changes as a flex/fixed side-effect of the viewport reflow even when its Tailwind
+        // width class hasn't), turning a single instant reflow into a 300ms interpolated one and
+        // dragging the rest of the flex-sibling content along with it — the classic "resize lags,
+        // catches up after you stop" symptom.
+        const transition = this._animating()
+            ? 'transition-[width,transform] duration-300 ease-in-out lg:transition-[width] will-change-[width]'
+            : 'transition-none';
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
+            // `contain: layout paint` (via arbitrary Tailwind classes below) scopes the reflow/repaint
+            // the width transition forces to the sidebar's own subtree instead of letting the browser
+            // consider it a candidate to affect the rest of the document — the sidebar is `fixed` so it
+            // was never going to move sibling content either way, but without containment the engine
+            // still walks a wider invalidation region on every animation frame.
+            '[contain:layout_paint]',
             'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
-            'transition-[width,transform] duration-300 ease-in-out',
+            transition,
             isOverlay ? 'shadow-2xl' : '',
-            'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
+            'lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
             (!this._isMobile() || this._sidebarOpen()) ? 'translate-x-0' : '-translate-x-full',
         ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
@@ -9458,23 +9484,38 @@ class ClxAppLayoutComponent {
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
+        clearTimeout(this._animatingTimer);
+    }
+    /** Arms the width/transform transition for one toggle's duration, then switches it back off
+     *  so a later window resize reflow doesn't get caught by a live CSS transition on `width`. */
+    _withTransition(fn) {
+        this._animating.set(true);
+        fn();
+        clearTimeout(this._animatingTimer);
+        this._animatingTimer = setTimeout(() => this._animating.set(false), 320);
     }
     _toggleCollapsed() {
-        const next = !this.collapsed();
-        this.collapsed.set(next);
-        this._hovered.set(false);
-        this.collapsedChange.emit(next);
+        this._withTransition(() => {
+            const next = !this.collapsed();
+            this.collapsed.set(next);
+            this._hovered.set(false);
+            this.collapsedChange.emit(next);
+        });
     }
     _onSidebarEnter() {
         if (this.collapsed() && !this._isMobile()) {
-            this._hovered.set(true);
-            this.expandedChange.emit(true);
+            this._withTransition(() => {
+                this._hovered.set(true);
+                this.expandedChange.emit(true);
+            });
         }
     }
     _onSidebarLeave() {
         if (this._hovered()) {
-            this._hovered.set(false);
-            this.expandedChange.emit(false);
+            this._withTransition(() => {
+                this._hovered.set(false);
+                this.expandedChange.emit(false);
+            });
         }
     }
     toggleSidebar() { this._sidebarOpen.update(v => !v); }
@@ -10016,9 +10057,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
 /** Optional replacement for the auto-generated `<h1>` — project this when the title needs
  *  inline content next to it (a status badge, a monospace order number, extra spans) that a
- *  plain `title` string input can't express. The `title`/`subtitle` inputs are ignored when
- *  this is present; ClxPageHeaderComponent's own text-2xl/font-weight/truncate styling is
- *  NOT applied automatically to projected content — style the projected `<h1>` yourself. */
+ *  plain `headerTitle` string input can't express. The `headerTitle`/`subtitle` inputs are
+ *  ignored when this is present; ClxPageHeaderComponent's own text-2xl/font-weight/truncate
+ *  styling is NOT applied automatically to projected content — style the projected `<h1>` yourself. */
 class ClxPageHeaderTitleDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxPageHeaderTitleDirective, isStandalone: true, selector: "[clxPageHeaderTitle]", ngImport: i0 });
@@ -10042,12 +10083,17 @@ const TEXT_SIZE_CLASS = {
  * hand-rolled `<h1 class="text-2xl font-semibold">` + `<p>` pattern repeated across every page.
  *
  * For detail pages whose title needs inline content (a status badge, a monospace order
- * number) that a plain `title` string can't express, project a `[clxPageHeaderTitle]`
- * block instead of using the `title`/`subtitle` inputs.
+ * number) that a plain `headerTitle` string can't express, project a `[clxPageHeaderTitle]`
+ * block instead of using the `headerTitle`/`subtitle` inputs.
  */
 class ClxPageHeaderComponent {
     _themeSvc = inject(ClxThemeService);
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    // Named `headerTitle` (not `title`) deliberately — `title` is also a native HTML attribute,
+    // and Angular doesn't strip it from the host element just because it's also bound to an
+    // @Input(). `<clx-page-header title="X">` used to leave a real `title="X"` attribute on the
+    // component's host, which the browser reads as a native tooltip — every page header showed
+    // a redundant browser tooltip repeating its own title on hover.
+    headerTitle = input('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []));
     subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
     /** Set to show the back button — `[showBack]="true" (back)="goBack()"`. */
     showBack = input(false, ...(ngDevMode ? [{ debugName: "showBack" }] : /* istanbul ignore next */ []));
@@ -10070,7 +10116,7 @@ class ClxPageHeaderComponent {
         return `${TEXT_SIZE_CLASS[s.size]} font-[${s.weight}] ${colorCls} mt-0.5`;
     }, ...(ngDevMode ? [{ debugName: "subtitleClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], exportAs: ["clxPageHeader"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], exportAs: ["clxPageHeader"], ngImport: i0, template: `
     @if (showBack()) {
       <button clx-button variant="ghost" [color]="_color()" icon="arrow_back" [iconOnly]="true"
         (click)="back.emit()"></button>
@@ -10083,7 +10129,7 @@ class ClxPageHeaderComponent {
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 [class]="titleClass()">{{ title() }}</h1>
+          <h1 [class]="titleClass()">{{ headerTitle() }}</h1>
           @if (subtitle()) {
             <p [class]="subtitleClass()">{{ subtitle() }}</p>
           }
@@ -10116,7 +10162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         </div>
       } @else {
         <div class="min-w-0">
-          <h1 [class]="titleClass()">{{ title() }}</h1>
+          <h1 [class]="titleClass()">{{ headerTitle() }}</h1>
           @if (subtitle()) {
             <p [class]="subtitleClass()">{{ subtitle() }}</p>
           }
@@ -10126,7 +10172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], _titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxPageHeaderTitleDirective), { isSignal: true }] }] } });
+        }], propDecorators: { headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], _titleSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxPageHeaderTitleDirective), { isSignal: true }] }] } });
 
 class ClxProfileComponent {
     // ── Inputs ──────────────────────────────────────────────────────────────────
@@ -10726,9 +10772,9 @@ class ClxAlertComponent {
       @if (_timerTotal() > 0) {
         <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
           <div
-            class="h-full transition-none rounded-b-3xl"
+            class="h-full w-full origin-left transition-none rounded-b-3xl"
             [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }">
+            [ngStyle]="{ transform: 'scaleX(' + (_progressPct() / 100) + ')' }">
           </div>
         </div>
       }
@@ -10798,9 +10844,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       @if (_timerTotal() > 0) {
         <div class="absolute bottom-0 left-0 right-0 h-1 bg-clx-surface-2 rounded-b-3xl overflow-hidden">
           <div
-            class="h-full transition-none rounded-b-3xl"
+            class="h-full w-full origin-left transition-none rounded-b-3xl"
             [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }">
+            [ngStyle]="{ transform: 'scaleX(' + (_progressPct() / 100) + ')' }">
           </div>
         </div>
       }
@@ -11099,9 +11145,9 @@ class ClxToastComponent {
       @if (entry().showProgress && entry().duration > 0) {
         <div class="absolute bottom-0 left-0 right-0 h-0.5 bg-clx-surface-2">
           <div
-            class="h-full transition-none"
+            class="h-full w-full origin-left transition-none"
             [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }"
+            [ngStyle]="{ transform: 'scaleX(' + (_progressPct() / 100) + ')' }"
           ></div>
         </div>
       }
@@ -11170,9 +11216,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       @if (entry().showProgress && entry().duration > 0) {
         <div class="absolute bottom-0 left-0 right-0 h-0.5 bg-clx-surface-2">
           <div
-            class="h-full transition-none"
+            class="h-full w-full origin-left transition-none"
             [class]="_progressColor()"
-            [ngStyle]="{ width: _progressPct() + '%' }"
+            [ngStyle]="{ transform: 'scaleX(' + (_progressPct() / 100) + ')' }"
           ></div>
         </div>
       }