codexly-ui 0.6.8 → 0.6.10

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, DOCUMENT as DOCUMENT$1, Input } 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 { 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';
@@ -12352,8 +12352,6 @@ const SHADOW_CLASS_MAP = {
     '2xl': 'shadow-2xl',
 };
 const DEFAULT_POSITION = { right: 24, bottom: 24 };
-/** Movement below this, in pixels, is treated as a click rather than a drag. */
-const DRAG_THRESHOLD = 4;
 class ClxFabComponent {
     // ── Inputs — personalización tipo clx-button ─────────────────────────────────
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -12363,21 +12361,13 @@ class ClxFabComponent {
     size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     shadow = input('lg', ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     triggerLabel = input('Accesos directos', ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
-    /** Saved position (e.g. from user preferences). Takes precedence over defaultPosition when present. */
-    position = input(undefined, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /** Initial corner used only when the user hasn't dragged/saved a position yet. */
-    defaultPosition = input(DEFAULT_POSITION, ...(ngDevMode ? [{ debugName: "defaultPosition" }] : /* istanbul ignore next */ []));
-    /** Direction the shortcut stack expands toward. */
-    expandDirection = input('up', ...(ngDevMode ? [{ debugName: "expandDirection" }] : /* istanbul ignore next */ []));
+    /** Fixed offset from the bottom-right corner of the viewport. */
+    position = input(DEFAULT_POSITION, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
     // ── Outputs ─────────────────────────────────────────────────────────────────
     itemClick = output();
-    /** Emitted once, after a drag ends, with the new position to persist. */
-    positionChange = output();
     _themeSvc = inject(ClxThemeService);
-    _document = inject(DOCUMENT$1);
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _draggedPosition = signal(null, ...(ngDevMode ? [{ debugName: "_draggedPosition" }] : /* istanbul ignore next */ []));
-    _position = computed(() => this._draggedPosition() ?? this.position() ?? this.defaultPosition(), ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
+    _position = computed(() => this.position() ?? DEFAULT_POSITION, ...(ngDevMode ? [{ debugName: "_position" }] : /* istanbul ignore next */ []));
     _triggerClass = computed(() => `transition-transform duration-200 hover:scale-110 ${SHADOW_CLASS_MAP[this.shadow()]}`.trim(), ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
     /** Los botones de la pila de accesos van un paso más pequeños que el trigger. */
     _itemSize = computed(() => {
@@ -12386,104 +12376,15 @@ class ClxFabComponent {
         };
         return map[this.size()] ?? 'sm';
     }, ...(ngDevMode ? [{ debugName: "_itemSize" }] : /* istanbul ignore next */ []));
-    // ── CDK Overlay ─────────────────────────────────────────────────────────────
+    // ── CDK Overlay — always expands upward from the trigger ────────────────────
     _sso = inject(ScrollStrategyOptions);
     _scrollStrategy = this._sso.reposition();
-    static POSITIONS_BY_DIRECTION = {
-        up: [
-            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
-            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
-        ],
-        down: [
-            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
-            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
-        ],
-        left: [
-            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
-            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
-        ],
-        right: [
-            { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 },
-            { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 },
-        ],
-    };
-    _positions = computed(() => ClxFabComponent.POSITIONS_BY_DIRECTION[this.expandDirection()], ...(ngDevMode ? [{ debugName: "_positions" }] : /* istanbul ignore next */ []));
-    static STACK_CLASS_BY_DIRECTION = {
-        up: 'flex-col items-end mb-2',
-        down: 'flex-col-reverse items-end mt-2',
-        left: 'flex-row items-center mr-2',
-        right: 'flex-row-reverse items-center ml-2',
-    };
-    _stackClass = computed(() => `flex gap-2 ${ClxFabComponent.STACK_CLASS_BY_DIRECTION[this.expandDirection()]}`, ...(ngDevMode ? [{ debugName: "_stackClass" }] : /* istanbul ignore next */ []));
-    static ITEM_CLASS_BY_DIRECTION = {
-        up: 'flex items-center gap-2',
-        down: 'flex items-center gap-2',
-        left: 'flex items-center gap-2 flex-row-reverse',
-        right: 'flex items-center gap-2',
-    };
-    _itemClass = computed(() => ClxFabComponent.ITEM_CLASS_BY_DIRECTION[this.expandDirection()], ...(ngDevMode ? [{ debugName: "_itemClass" }] : /* istanbul ignore next */ []));
-    static ANIMATION_BY_DIRECTION = {
-        up: 'fadeInUp',
-        down: 'fadeInDown',
-        left: 'fadeInLeft',
-        right: 'fadeInRight',
-    };
-    _itemAnimation = computed(() => ClxFabComponent.ANIMATION_BY_DIRECTION[this.expandDirection()], ...(ngDevMode ? [{ debugName: "_itemAnimation" }] : /* istanbul ignore next */ []));
+    _positions = [
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
+    ];
     // ── State ────────────────────────────────────────────────────────────────────
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
-    // ── Drag ─────────────────────────────────────────────────────────────────────
-    _dragging = false;
-    _dragMoved = false;
-    _dragStartX = 0;
-    _dragStartY = 0;
-    _dragStartRight = 0;
-    _dragStartBottom = 0;
-    _onPointerDown(event) {
-        if (event.button !== 0 && event.pointerType === 'mouse')
-            return;
-        this._dragging = true;
-        this._dragMoved = false;
-        this._dragStartX = event.clientX;
-        this._dragStartY = event.clientY;
-        const current = this._position();
-        this._dragStartRight = current.right;
-        this._dragStartBottom = current.bottom;
-        const onMove = (e) => this._onPointerMove(e);
-        const onUp = (e) => {
-            this._onPointerUp(e);
-            this._document.removeEventListener('pointermove', onMove);
-            this._document.removeEventListener('pointerup', onUp);
-        };
-        this._document.addEventListener('pointermove', onMove);
-        this._document.addEventListener('pointerup', onUp);
-    }
-    _onPointerMove(event) {
-        if (!this._dragging)
-            return;
-        const dx = event.clientX - this._dragStartX;
-        const dy = event.clientY - this._dragStartY;
-        if (!this._dragMoved && Math.hypot(dx, dy) < DRAG_THRESHOLD)
-            return;
-        this._dragMoved = true;
-        const win = this._document.defaultView;
-        const maxRight = win ? win.innerWidth - 56 : Infinity;
-        const maxBottom = win ? win.innerHeight - 56 : Infinity;
-        const right = Math.min(Math.max(this._dragStartRight - dx, 8), maxRight);
-        const bottom = Math.min(Math.max(this._dragStartBottom - dy, 8), maxBottom);
-        this._draggedPosition.set({ right, bottom });
-    }
-    _onPointerUp(_event) {
-        this._dragging = false;
-        if (this._dragMoved) {
-            this.positionChange.emit(this._position());
-        }
-        this._dragMoved = false;
-    }
-    _onTriggerClick() {
-        if (this._dragMoved)
-            return;
-        this._toggle();
-    }
     _toggle() { this._isOpen.update(v => !v); }
     _close() { this._isOpen.set(false); }
     _onKeydown(event) {
@@ -12495,125 +12396,101 @@ class ClxFabComponent {
         this._close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxFabComponent, isStandalone: true, selector: "clx-fab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, expandDirection: { classPropertyName: "expandDirection", publicName: "expandDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", positionChange: "positionChange" }, ngImport: i0, template: `
-    <!-- ── Trigger (this wrapper owns the fixed positioning + drag; the button inside stays a plain clx-button) ── -->
-    <div
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxFabComponent, isStandalone: true, selector: "clx-fab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    <!-- ── Trigger, fixed to the bottom-right corner (offset configurable via position()) ── -->
+    <button
       #origin="cdkOverlayOrigin"
       cdkOverlayOrigin
-      class="fixed z-40 select-none"
+      clx-button
+      type="button"
+      class="fixed z-40"
+      [variant]="variant()"
+      shape="circle"
+      [iconOnly]="true"
+      [icon]="_isOpen() ? 'close' : icon()"
+      [color]="_color()"
+      [size]="size()"
+      [class]="_triggerClass()"
       [style.right.px]="_position().right"
       [style.bottom.px]="_position().bottom"
-      [style.touchAction]="'none'"
-      (pointerdown)="_onPointerDown($event)">
-      <button
-        clx-button
-        type="button"
-        [variant]="variant()"
-        shape="circle"
-        [iconOnly]="true"
-        [icon]="_isOpen() ? 'close' : icon()"
-        [color]="_color()"
-        [size]="size()"
-        [class]="_triggerClass()"
-        [attr.aria-label]="triggerLabel()"
-        [attr.aria-expanded]="_isOpen()"
-        (click)="_onTriggerClick()">
-      </button>
-    </div>
+      [attr.aria-label]="triggerLabel()"
+      [attr.aria-expanded]="_isOpen()"
+      (click)="_toggle()">
+    </button>
 
-    <!-- ── Overlay panel: stack expanding toward expandDirection() ────────────────── -->
+    <!-- ── Overlay panel: accordion-style stack expanding upward from the trigger ── -->
     <ng-template
       cdkConnectedOverlay
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions()"
+      [cdkConnectedOverlayPositions]="_positions"
       [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
       [cdkConnectedOverlayPush]="true"
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div [class]="_stackClass()" role="menu">
+      <div class="flex flex-col items-center gap-2 mb-2" role="menu">
         @for (item of items(); track item.key; let i = $index) {
-          <div
-            [clxAnimate]="_itemAnimation()"
-            trigger="onEnter"
-            [delay]="i * 60"
-            [duration]="220"
-            [class]="_itemClass()">
-            <span class="px-2.5 py-1 rounded-lg bg-clx-surface border border-clx-border shadow-sm text-xs font-medium text-clx-text-label whitespace-nowrap">
-              {{ item.label }}
-            </span>
-            <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
-              variant="light" [color]="_color()" [size]="_itemSize()" class="shadow-md"
-              [attr.aria-label]="item.label"
-              (click)="_onItemClick(item)">
-            </button>
-          </div>
+          <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
+            variant="solid" [color]="item.color ?? _color()" [size]="_itemSize()" class="shadow-md"
+            clxAnimate="slideInUp" trigger="onEnter" [delay]="i * 60" [duration]="220"
+            [clxTooltip]="item.label" clxTooltipPosition="right"
+            [attr.aria-label]="item.label"
+            (click)="_onItemClick(item)">
+          </button>
         }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "directive", type: ClxAnimateDirective, selector: "[clxAnimate]", inputs: ["clxAnimate", "trigger", "duration", "delay", "repeat", "easing", "fillMode", "once", "threshold"], outputs: ["animationStart", "animationEnd"], exportAs: ["clxAnimate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "directive", type: ClxAnimateDirective, selector: "[clxAnimate]", inputs: ["clxAnimate", "trigger", "duration", "delay", "repeat", "easing", "fillMode", "once", "threshold"], outputs: ["animationStart", "animationEnd"], exportAs: ["clxAnimate"] }, { 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: ClxFabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-fab',
                     standalone: true,
-                    imports: [OverlayModule, ClxButtonComponent, ClxAnimateDirective],
+                    imports: [OverlayModule, ClxButtonComponent, ClxAnimateDirective, ClxTooltipDirective],
                     template: `
-    <!-- ── Trigger (this wrapper owns the fixed positioning + drag; the button inside stays a plain clx-button) ── -->
-    <div
+    <!-- ── Trigger, fixed to the bottom-right corner (offset configurable via position()) ── -->
+    <button
       #origin="cdkOverlayOrigin"
       cdkOverlayOrigin
-      class="fixed z-40 select-none"
+      clx-button
+      type="button"
+      class="fixed z-40"
+      [variant]="variant()"
+      shape="circle"
+      [iconOnly]="true"
+      [icon]="_isOpen() ? 'close' : icon()"
+      [color]="_color()"
+      [size]="size()"
+      [class]="_triggerClass()"
       [style.right.px]="_position().right"
       [style.bottom.px]="_position().bottom"
-      [style.touchAction]="'none'"
-      (pointerdown)="_onPointerDown($event)">
-      <button
-        clx-button
-        type="button"
-        [variant]="variant()"
-        shape="circle"
-        [iconOnly]="true"
-        [icon]="_isOpen() ? 'close' : icon()"
-        [color]="_color()"
-        [size]="size()"
-        [class]="_triggerClass()"
-        [attr.aria-label]="triggerLabel()"
-        [attr.aria-expanded]="_isOpen()"
-        (click)="_onTriggerClick()">
-      </button>
-    </div>
+      [attr.aria-label]="triggerLabel()"
+      [attr.aria-expanded]="_isOpen()"
+      (click)="_toggle()">
+    </button>
 
-    <!-- ── Overlay panel: stack expanding toward expandDirection() ────────────────── -->
+    <!-- ── Overlay panel: accordion-style stack expanding upward from the trigger ── -->
     <ng-template
       cdkConnectedOverlay
       [cdkConnectedOverlayOrigin]="origin"
       [cdkConnectedOverlayOpen]="_isOpen()"
-      [cdkConnectedOverlayPositions]="_positions()"
+      [cdkConnectedOverlayPositions]="_positions"
       [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
       [cdkConnectedOverlayPush]="true"
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div [class]="_stackClass()" role="menu">
+      <div class="flex flex-col items-center gap-2 mb-2" role="menu">
         @for (item of items(); track item.key; let i = $index) {
-          <div
-            [clxAnimate]="_itemAnimation()"
-            trigger="onEnter"
-            [delay]="i * 60"
-            [duration]="220"
-            [class]="_itemClass()">
-            <span class="px-2.5 py-1 rounded-lg bg-clx-surface border border-clx-border shadow-sm text-xs font-medium text-clx-text-label whitespace-nowrap">
-              {{ item.label }}
-            </span>
-            <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
-              variant="light" [color]="_color()" [size]="_itemSize()" class="shadow-md"
-              [attr.aria-label]="item.label"
-              (click)="_onItemClick(item)">
-            </button>
-          </div>
+          <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
+            variant="solid" [color]="item.color ?? _color()" [size]="_itemSize()" class="shadow-md"
+            clxAnimate="slideInUp" trigger="onEnter" [delay]="i * 60" [duration]="220"
+            [clxTooltip]="item.label" clxTooltipPosition="right"
+            [attr.aria-label]="item.label"
+            (click)="_onItemClick(item)">
+          </button>
         }
       </div>
     </ng-template>
@@ -12621,7 +12498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], expandDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandDirection", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], positionChange: [{ type: i0.Output, args: ["positionChange"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';