@makigamestudio/ui-ionic 0.7.0 → 0.8.0

package/fesm2022/makigamestudio-ui-ionic.mjs

@@ -1,10 +1,599 @@
 import * as i0 from '@angular/core';
-import { inject, signal, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, Renderer2, ApplicationRef, DestroyRef, input, effect, isSignal, TemplateRef, HostListener, Directive, signal, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { PopoverController, IonList, IonItem, IonIcon, IonLabel, IonSpinner, IonButton } from '@ionic/angular/standalone';
-import { ActionButtonType, ActionButtonListService, ButtonStateService, ButtonDisplayService, ButtonHandlerService } from '@makigamestudio/ui-core';
+import { TooltipService, TooltipSchedulerService, DeviceDetectionService, ActionButtonType, ActionButtonListService, ButtonStateService, ButtonDisplayService, ButtonHandlerService } from '@makigamestudio/ui-core';
 import { addIcons } from 'ionicons';
 import { chevronDownOutline } from 'ionicons/icons';
 
+/**
+ * @file Maki Tooltip Directive
+ * @description Ionic implementation of tooltip directive using TooltipService.
+ *
+ * This directive provides accessible tooltips that adapt to device type and viewport constraints.
+ * On desktop, tooltips appear on hover with a delay. On mobile, they appear on click (except for
+ * interactive elements like buttons where they're suppressed to avoid interfering with click handlers).
+ *
+ * All positioning and visibility logic is delegated to TooltipService from ui-core,
+ * while this directive handles Ionic-specific DOM manipulation and event handling.
+ *
+ * @example
+ * ```typescript
+ * // Simple string tooltip
+ * <button makiTooltip="Save changes">Save</button>
+ *
+ * // With custom color
+ * <ion-button makiTooltip="Delete item" makiTooltipColor="danger">
+ *   <ion-icon name="trash" />
+ * </ion-button>
+ *
+ * // Template tooltip
+ * <ng-template #customTooltip>
+ *   <strong>Custom</strong> content
+ * </ng-template>
+ * <div [makiTooltip]="customTooltip">Hover me</div>
+ * ```
+ */
+/**
+ * Attribute name added to elements with tooltip directive.
+ * Useful for testing and debugging.
+ */
+const TOOLTIP_ATTRIBUTE = 'maki-tooltip';
+/**
+ * Directive for displaying contextual tooltips with device-aware behavior.
+ *
+ * The directive automatically adapts its behavior based on device type:
+ * - **Desktop**: Shows tooltip on hover after 500ms delay, hides on mouse leave
+ * - **Mobile**: Shows/hides tooltip on click (suppressed for interactive elements)
+ *
+ * Tooltips are positioned intelligently to avoid viewport overflow, appearing
+ * above or to the left of the element when necessary.
+ *
+ * @usageNotes
+ *
+ * ### Basic String Tooltip
+ * ```html
+ * <button makiTooltip="Click to save">Save</button>
+ * ```
+ *
+ * ### Colored Tooltip
+ * ```html
+ * <ion-button makiTooltip="Permanently delete" makiTooltipColor="danger">
+ *   Delete
+ * </ion-button>
+ * ```
+ *
+ * ### Template Tooltip
+ * ```html
+ * <ng-template #richTooltip>
+ *   <div class="custom-tooltip">
+ *     <h4>Title</h4>
+ *     <p>Description</p>
+ *   </div>
+ * </ng-template>
+ * <div [makiTooltip]="richTooltip">Hover for details</div>
+ * ```
+ *
+ * ### Live Updates with Signals
+ * ```html
+ * <span [makiTooltip]="statusTooltip()">Hover</span>
+ * ```
+ * ```typescript
+ * readonly statusTooltip = signal('Status: Ready');
+ *
+ * // Tooltip updates live while open
+ * this.statusTooltip.set('Status: Processing');
+ * ```
+ *
+ * ### Mobile Behavior
+ * On mobile devices, tooltips are suppressed for interactive elements
+ * (button, ion-button, ion-select, a) to avoid interfering with their
+ * primary click handlers.
+ */
+class MakiTooltipDirective {
+    // ============================================================================
+    // Dependencies
+    // ============================================================================
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    appRef = inject(ApplicationRef);
+    destroyRef = inject(DestroyRef);
+    tooltipService = inject(TooltipService);
+    scheduler = inject(TooltipSchedulerService);
+    deviceDetection = inject(DeviceDetectionService);
+    // ============================================================================
+    // Inputs
+    // ============================================================================
+    /**
+     * Tooltip content - can be a string or a template reference.
+     *
+     * If the input is signal-driven, an open tooltip will update live
+     * when the signal value changes.
+     *
+     * @example
+     * ```html
+     * <!-- String content -->
+     * <button makiTooltip="Save changes">Save</button>
+     *
+     * <!-- Template content -->
+     * <ng-template #tooltip>Rich content</ng-template>
+     * <div [makiTooltip]="tooltip">Hover</div>
+     * ```
+     */
+    content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}), alias: 'makiTooltip' });
+    /**
+     * Optional color for the tooltip background.
+     * Accepts Ionic color names or null for default styling.
+     *
+     * @example
+     * ```html
+     * <button makiTooltip="Delete" makiTooltipColor="danger">Delete</button>
+     * ```
+     */
+    color = input(null, { ...(ngDevMode ? { debugName: "color" } : {}), alias: 'makiTooltipColor' });
+    /**
+     * Preferred tooltip placement. If provided, the directive will attempt to
+     * position the tooltip on the specified side before falling back.
+     */
+    position = input(undefined, { ...(ngDevMode ? { debugName: "position" } : {}), alias: 'makiTooltipPosition' });
+    /**
+     * Optional context object for TemplateRef tooltips.
+     * Supports signal inputs so templates can react to changes.
+     * Open tooltips update live as the context signal changes.
+     *
+     * The context is exposed as both named properties and `$implicit`.
+     *
+     * @example
+     * ```html
+     * <ng-template #tooltip let-title="title" let-data>
+     *   <strong>{{ title }}</strong>
+     *   <span>{{ data?.title }}</span>
+     * </ng-template>
+     * <span [makiTooltip]="tooltip" [makiTooltipContext]="{ title: 'Info' }">Hover</span>
+     * ```
+     */
+    context = input(undefined, { ...(ngDevMode ? { debugName: "context" } : {}), alias: 'makiTooltipContext' });
+    // ============================================================================
+    // Private State
+    // ============================================================================
+    /**
+     * Reference to the tooltip DOM element.
+     */
+    tooltip = null;
+    /**
+     * Timeout handle for hover delay.
+     */
+    /**
+     * Reference to the embedded view when using template content.
+     */
+    viewRef = null;
+    /**
+     * Tracks the current template reference to detect swaps.
+     */
+    currentTemplateRef = null;
+    /**
+     * Cleanup function for document touch listener.
+     */
+    touchListenerCleanup = null;
+    /**
+     * Animation frame ID for tooltip follow loop.
+     */
+    positionAnimationFrame = null;
+    /**
+     * Timeout handle for fade-out removal.
+     */
+    fadeTimeout = null;
+    /**
+     * Scheduler handle for this directive instance (isolated timers).
+     * */
+    schedulerHandle = null;
+    /**
+     * Indicates whether the directive has been destroyed.
+     */
+    isDestroyed = false;
+    /**
+     * Latest resolved TemplateRef context.
+     */
+    latestTemplateContext = { $implicit: undefined };
+    // ============================================================================
+    // Constructor
+    // ============================================================================
+    constructor() {
+        // Add custom attribute for identification
+        this.el.nativeElement.setAttribute(TOOLTIP_ATTRIBUTE, 'true');
+        effect(() => {
+            this.latestTemplateContext = this.resolveTemplateContext();
+            if (this.viewRef) {
+                Object.assign(this.viewRef.context, this.latestTemplateContext);
+                this.viewRef.detectChanges();
+                this.positionTooltip();
+            }
+        });
+        effect(() => {
+            const contentValue = this.content();
+            if (!this.tooltip)
+                return;
+            this.updateTooltipContent(contentValue);
+            this.positionTooltip();
+        });
+        // Create isolated scheduler handle for this directive instance
+        this.schedulerHandle = this.scheduler.createHandle(() => this.showTooltip(), () => this.hideTooltip());
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.isDestroyed = true;
+            this.schedulerHandle?.destroy();
+            this.hideTooltip();
+        });
+    }
+    // ============================================================================
+    // Event Handlers
+    // ============================================================================
+    /**
+     * Shows tooltip on mouse enter (desktop only).
+     * Adds a 500ms delay to avoid showing tooltips during quick mouse movements.
+     */
+    onMouseEnter() {
+        if (!this.canShowTooltip())
+            return;
+        this.schedulerHandle?.onTriggerEnter();
+    }
+    onMouseLeave() {
+        this.schedulerHandle?.onTriggerLeave();
+    }
+    /**
+     * Toggles tooltip on click (all devices).
+     * On mobile, skips interactive elements. On desktop, acts as a toggle.
+     */
+    onClick() {
+        if (!this.canShowTooltip()) {
+            this.hideTooltip();
+            return;
+        }
+        // En mobile, activar touch state
+        this.schedulerHandle?.onClick(this.deviceDetection.isMobile());
+    }
+    // ============================================================================
+    // Private Methods
+    // ============================================================================
+    /**
+     * Checks if tooltip can be shown using TooltipService logic.
+     *
+     * @returns `true` if tooltip can be shown, `false` otherwise
+     */
+    canShowTooltip() {
+        const elementTag = this.el.nativeElement.tagName.toLowerCase();
+        const hasContent = !!this.content();
+        return this.tooltipService.shouldShowTooltip(elementTag, this.deviceDetection.isMobile(), hasContent);
+    }
+    resolveTemplateContext() {
+        const rawContext = this.context();
+        const resolvedContext = this.unwrapSignal(rawContext);
+        if (resolvedContext && typeof resolvedContext === 'object') {
+            return {
+                ...resolvedContext,
+                $implicit: resolvedContext
+            };
+        }
+        return { $implicit: resolvedContext };
+    }
+    unwrapSignal(value) {
+        if (isSignal(value)) {
+            return value();
+        }
+        return value;
+    }
+    /**
+     * Clears the hover timeout if it exists.
+     */
+    /**
+     * Creates and displays the tooltip element.
+     *
+     * The tooltip is created as a fixed-position element appended to the document body.
+     * Content can be either plain text or a rendered template.
+     */
+    showTooltip() {
+        if (this.tooltip || !this.content())
+            return;
+        // Create tooltip element
+        this.tooltip = this.renderer.createElement('div');
+        this.renderer.addClass(this.tooltip, 'maki-tooltip');
+        if (!this.tooltip)
+            return;
+        // Ensure tooltip is not visible or interactive while we measure and position it
+        this.tooltip.style.position = 'fixed';
+        this.tooltip.style.top = '-9999px';
+        this.tooltip.style.left = '-9999px';
+        this.tooltip.style.visibility = 'hidden';
+        this.tooltip.style.pointerEvents = 'none';
+        this.tooltip.style.opacity = '0';
+        this.tooltip.style.transition = `opacity ${this.tooltipService.getFadeDurationMs()}ms ease`;
+        // Apply color attribute if specified
+        const colorValue = this.color();
+        if (colorValue) {
+            this.renderer.setAttribute(this.tooltip, 'data-color', colorValue);
+        }
+        // Set content (template or string)
+        const contentValue = this.content();
+        this.updateTooltipContent(contentValue);
+        // Append hidden tooltip to body so we can measure it without visual jump
+        this.renderer.appendChild(document.body, this.tooltip);
+        // If there was a pending fade removal, cancel it (we're re-showing)
+        this.clearFadeTimeout();
+        // Immediately position the tooltip while hidden to avoid a visual jump
+        this.positionTooltip();
+        // Reveal and make interactive with fade-in
+        // Make visible before starting opacity animation so it's measured properly
+        this.tooltip.style.visibility = 'visible';
+        // Allow pointer events after showing
+        this.tooltip.style.pointerEvents = 'auto';
+        // Trigger fade-in
+        // Force a reflow to ensure transition runs
+        this.tooltip.getBoundingClientRect();
+        this.tooltip.style.opacity = '1';
+        // Añadir listeners para interacción (desktop y mobile)
+        this.addTooltipInteractionListeners();
+        // Start animation frame loop to follow trigger
+        this.startTooltipFollowLoop();
+        // Add document listeners on mobile
+        if (this.deviceDetection.isMobile()) {
+            this.addDocumentTouchListener();
+        }
+    }
+    /**
+     * Positions the tooltip using TooltipService calculations.
+     */
+    positionTooltip() {
+        if (!this.tooltip)
+            return;
+        const triggerRect = this.el.nativeElement.getBoundingClientRect();
+        // Hide tooltip if element is not visible
+        if (!this.tooltipService.isElementVisible(triggerRect)) {
+            this.hideTooltip();
+            return;
+        }
+        const tooltipRect = this.tooltip.getBoundingClientRect();
+        // Calculate position using service
+        const position = this.tooltipService.calculatePosition(triggerRect, tooltipRect, window.innerWidth, window.innerHeight, this.position());
+        // Apply position
+        this.tooltip.style.position = 'fixed';
+        this.tooltip.style.zIndex = '10000';
+        this.tooltip.style.top = `${position.top}px`;
+        this.tooltip.style.left = `${position.left}px`;
+    }
+    /**
+     * Adds a document-level touch listener to hide tooltip on any touch outside.
+     * Only used on mobile devices.
+     */
+    addDocumentTouchListener() {
+        this.removeDocumentTouchListener();
+        this.touchListenerCleanup = this.renderer.listen('document', 'touchstart', (event) => {
+            if (!this.tooltip)
+                return;
+            // Allow touches inside the tooltip or the trigger element to keep it open
+            const target = event.target;
+            if (target && (this.tooltip.contains(target) || this.el.nativeElement.contains(target))) {
+                return;
+            }
+            // Any touch outside should hide the tooltip
+            this.hideTooltip();
+        });
+    }
+    /**
+     * Removes the document-level touch listener.
+     */
+    removeDocumentTouchListener() {
+        if (this.touchListenerCleanup) {
+            this.touchListenerCleanup();
+            this.touchListenerCleanup = null;
+        }
+    }
+    /**
+     * Removes the tooltip from the DOM and cleans up resources.
+     */
+    hideTooltip() {
+        this.removeDocumentTouchListener();
+        this.removeTooltipInteractionListeners();
+        this.stopTooltipFollowLoop();
+        // If there's no tooltip (already removed), nothing to do
+        if (!this.tooltip)
+            return;
+        // Begin fade-out and removal
+        this.tooltip.style.opacity = '0';
+        this.tooltip.style.pointerEvents = 'none';
+        // Schedule removal after fade duration.
+        this.clearFadeTimeout();
+        this.fadeTimeout = setTimeout(() => {
+            if (this.tooltip) {
+                // Avoid leaving the tooltip empty during the fade animation.
+                if (this.viewRef) {
+                    if (!this.isDestroyed) {
+                        try {
+                            this.appRef.detachView(this.viewRef);
+                        }
+                        catch {
+                            // ignore detach errors
+                        }
+                    }
+                    try {
+                        this.viewRef.destroy();
+                    }
+                    catch {
+                        // ignore destroy errors
+                    }
+                    this.viewRef = null;
+                    this.currentTemplateRef = null;
+                }
+                this.renderer.removeChild(document.body, this.tooltip);
+                this.tooltip = null;
+            }
+            this.fadeTimeout = null;
+        }, this.tooltipService.getFadeDurationMs());
+    }
+    clearFadeTimeout() {
+        if (this.fadeTimeout) {
+            clearTimeout(this.fadeTimeout);
+            this.fadeTimeout = null;
+        }
+    }
+    updateTooltipContent(contentValue) {
+        if (!this.tooltip)
+            return;
+        if (contentValue instanceof TemplateRef) {
+            this.updateTemplateContent(contentValue);
+            return;
+        }
+        this.updateStringContent(contentValue);
+    }
+    updateTemplateContent(template) {
+        if (!this.tooltip)
+            return;
+        const shouldRecreate = this.currentTemplateRef !== template || !this.viewRef;
+        if (shouldRecreate) {
+            this.clearTooltipContent();
+            this.viewRef = template.createEmbeddedView(this.latestTemplateContext);
+            // Avoid calling attachView after destroy; it can log NG0406 warnings.
+            if (!this.isDestroyed) {
+                this.appRef.attachView(this.viewRef);
+            }
+            this.viewRef.rootNodes.forEach(node => this.renderer.appendChild(this.tooltip, node));
+            this.currentTemplateRef = template;
+        }
+    }
+    updateStringContent(contentValue) {
+        if (!this.tooltip)
+            return;
+        if (this.viewRef || this.currentTemplateRef) {
+            this.clearTooltipContent();
+        }
+        this.tooltip.textContent = contentValue;
+        this.currentTemplateRef = null;
+    }
+    clearTooltipContent() {
+        if (!this.tooltip)
+            return;
+        if (this.viewRef) {
+            if (!this.isDestroyed) {
+                try {
+                    this.appRef.detachView(this.viewRef);
+                }
+                catch {
+                    // ignore detach errors
+                }
+            }
+            try {
+                this.viewRef.destroy();
+            }
+            catch {
+                // ignore destroy errors
+            }
+            this.viewRef = null;
+        }
+        while (this.tooltip.firstChild) {
+            this.renderer.removeChild(this.tooltip, this.tooltip.firstChild);
+        }
+    }
+    /**
+     * Añade listeners de interacción al tooltip para mantenerlo abierto mientras se interactúa.
+     */
+    addTooltipInteractionListeners() {
+        if (!this.tooltip)
+            return;
+        // Siempre elimina antes por si acaso (defensivo)
+        this.removeTooltipInteractionListeners();
+        // Desktop: mouseenter/mouseleave
+        this.tooltip.addEventListener('mouseenter', this.onTooltipMouseEnter);
+        this.tooltip.addEventListener('mouseleave', this.onTooltipMouseLeave);
+        // Mobile: touchstart/touchend
+        this.tooltip.addEventListener('touchstart', this.onTooltipTouchStart, { passive: true });
+        this.tooltip.addEventListener('touchend', this.onTooltipTouchEnd, { passive: true });
+    }
+    /**
+     * Elimina listeners de interacción del tooltip.
+     */
+    removeTooltipInteractionListeners() {
+        if (!this.tooltip)
+            return;
+        this.tooltip.removeEventListener('mouseenter', this.onTooltipMouseEnter);
+        this.tooltip.removeEventListener('mouseleave', this.onTooltipMouseLeave);
+        this.tooltip.removeEventListener('touchstart', this.onTooltipTouchStart);
+        this.tooltip.removeEventListener('touchend', this.onTooltipTouchEnd);
+    }
+    /**
+     * Handler: mouse entra en el tooltip (desktop).
+     */
+    onTooltipMouseEnter = () => {
+        this.schedulerHandle?.onTooltipEnter();
+    };
+    /**
+     * Handler: mouse sale del tooltip (desktop).
+     */
+    onTooltipMouseLeave = () => {
+        this.schedulerHandle?.onTooltipLeave();
+    };
+    /**
+     * Handler: touchstart en el tooltip (mobile).
+     */
+    onTooltipTouchStart = () => {
+        this.schedulerHandle?.onTooltipTouchStart();
+    };
+    /**
+     * Handler: touchend en el tooltip (mobile).
+     */
+    onTooltipTouchEnd = () => {
+        this.schedulerHandle?.onTooltipTouchEnd();
+    };
+    /**
+     * Starts a high-performance animation frame loop to keep the tooltip positioned with its trigger.
+     */
+    startTooltipFollowLoop() {
+        this.stopTooltipFollowLoop();
+        const loop = () => {
+            if (!this.tooltip)
+                return;
+            this.positionTooltip();
+            this.positionAnimationFrame = requestAnimationFrame(loop);
+        };
+        this.positionAnimationFrame = requestAnimationFrame(loop);
+    }
+    /**
+     * Stops the animation frame loop for tooltip positioning.
+     */
+    stopTooltipFollowLoop() {
+        if (this.positionAnimationFrame !== null) {
+            cancelAnimationFrame(this.positionAnimationFrame);
+            this.positionAnimationFrame = null;
+        }
+    }
+    /**
+     * Cleanup on directive destruction.
+     */
+    ngOnDestroy() {
+        this.hideTooltip();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MakiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: MakiTooltipDirective, isStandalone: true, selector: "[makiTooltip]", inputs: { content: { classPropertyName: "content", publicName: "makiTooltip", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "makiTooltipColor", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "makiTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "makiTooltipContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MakiTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[makiTooltip]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "makiTooltip", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "makiTooltipColor", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "makiTooltipPosition", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "makiTooltipContext", required: false }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * @file Directives Barrel Export
+ * @description Exports all directives from the ui-ionic library.
+ */
+
 /**
  * @file Action Button List Component
  * @description Ionic implementation of action button list for popovers/dropdowns.
@@ -44,10 +633,10 @@ import { chevronDownOutline } from 'ionicons/icons';
  *
  * @usageNotes
  * ### Inputs
- * - `buttons` (required): Array of `ActionButton` objects to display
+ * - `buttons` (required): Array of `IonicActionButton` objects to display
  *
  * ### Outputs
- * - `buttonSelect`: Emits the selected `ActionButton` when clicked
+ * - `buttonSelect`: Emits the selected `IonicActionButton` when clicked
  */
 class ActionButtonListComponent {
     /** Reference to ActionButtonType.Dropdown for template comparison. */
@@ -110,6 +699,10 @@ class ActionButtonListComponent {
         <ion-item
           [button]="true"
           [disabled]="!canSelectButton(button)"
+          [attr.aria-label]="button.ariaLabel"
+          [makiTooltip]="button.tooltip || ''"
+          [makiTooltipColor]="button.tooltipColor ?? null"
+          makiTooltipPosition="left"
           [detail]="button.type === ActionButtonType.Dropdown"
           (click)="onButtonClick(button)"
         >
@@ -128,16 +721,20 @@ class ActionButtonListComponent {
         </ion-item>
       }
     </ion-list>
-  `, isInline: true, styles: [":host{display:block}::ng-deep ion-popover::part(content){width:fit-content}ion-list{padding:0}ion-item{--padding-start: var(--maki-action-button-list-padding, 16px);--padding-end: var(--maki-action-button-list-padding, 16px);--min-height: var(--maki-action-button-list-item-height, 44px);cursor:pointer;width:100%}ion-item[disabled]{cursor:not-allowed}ion-label{white-space:nowrap}ion-icon{font-size:var(--maki-action-button-list-icon-size, 20px);margin-inline-end:var(--maki-action-button-list-icon-gap, 12px)}ion-spinner{width:var(--maki-action-button-list-icon-size, 20px);height:var(--maki-action-button-list-icon-size, 20px);margin-inline-end:var(--maki-action-button-list-icon-gap, 12px)}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}::ng-deep ion-popover::part(content){width:fit-content}ion-list{padding:0}ion-item{--padding-start: var(--maki-action-button-list-padding, 16px);--padding-end: var(--maki-action-button-list-padding, 16px);--min-height: var(--maki-action-button-list-item-height, 44px);cursor:pointer;width:100%}ion-item[disabled]{cursor:not-allowed}ion-label{white-space:nowrap}ion-icon{font-size:var(--maki-action-button-list-icon-size, 20px);margin-inline-end:var(--maki-action-button-list-icon-gap, 12px)}ion-spinner{width:var(--maki-action-button-list-icon-size, 20px);height:var(--maki-action-button-list-icon-size, 20px);margin-inline-end:var(--maki-action-button-list-icon-gap, 12px)}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: MakiTooltipDirective, selector: "[makiTooltip]", inputs: ["makiTooltip", "makiTooltipColor", "makiTooltipPosition", "makiTooltipContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionButtonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'maki-action-button-list', standalone: true, imports: [IonList, IonItem, IonIcon, IonLabel, IonSpinner], providers: [ActionButtonListService], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'maki-action-button-list', standalone: true, imports: [IonList, IonItem, IonIcon, IonLabel, IonSpinner, MakiTooltipDirective], providers: [ActionButtonListService], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ion-list lines="none">
       @for (button of buttonList(); track button.id) {
         <ion-item
           [button]="true"
           [disabled]="!canSelectButton(button)"
+          [attr.aria-label]="button.ariaLabel"
+          [makiTooltip]="button.tooltip || ''"
+          [makiTooltipColor]="button.tooltipColor ?? null"
+          makiTooltipPosition="left"
           [detail]="button.type === ActionButtonType.Dropdown"
           (click)="onButtonClick(button)"
         >
@@ -174,7 +771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  */
 /**
  * A configurable button component that renders an `ion-button` based on
- * an `ActionButton` configuration object.
+ * an `IonicActionButton` configuration object.
  *
  * Features:
  * - Two button types: Default and Dropdown
@@ -197,26 +794,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  *
  * <!-- Dropdown button -->
  * <maki-button [button]="menuButton" />
+ *
+ * <!-- Button with tooltip -->
+ * <maki-button [button]="buttonWithTooltip" />
  * ```
  *
  * @example
  * ```typescript
  * // In your component
- * import { ActionButton, ActionButtonType } from '@makigamestudio/ui-core';
+ * import { ActionButtonType } from '@makigamestudio/ui-core';
  * import { IonicActionButton } from '@makigamestudio/ui-ionic';
+ * import { TemplateRef, ViewChild } from '@angular/core';
  *
- * // Generic ActionButton (loose typing)
- * saveButton: ActionButton = {
+ * // Button with string tooltip
+ * saveButton: IonicActionButton = {
  *   id: 'save',
  *   label: 'Save',
  *   icon: 'save-outline',
  *   type: ActionButtonType.Default,
+ *   tooltip: 'Save your changes',
  *   config: { fill: 'solid', color: 'primary' },
  *   handler: async () => {
  *     await this.saveData();
  *   }
  * };
  *
+ * // Button with colored tooltip
+ * deleteButton: IonicActionButton = {
+ *   id: 'delete',
+ *   icon: 'trash-outline',
+ *   type: ActionButtonType.Default,
+ *   tooltip: 'Permanently delete this item',
+ *   tooltipColor: 'danger',
+ *   config: { fill: 'clear', color: 'danger' },
+ *   handler: () => this.deleteItem()
+ * };
+ *
+ * // Button with template tooltip
+ * @ViewChild('richTooltip') richTooltipTemplate!: TemplateRef<unknown>;
+ *
+ * infoButton: IonicActionButton = {
+ *   id: 'info',
+ *   icon: 'information-circle-outline',
+ *   type: ActionButtonType.Default,
+ *   tooltip: this.richTooltipTemplate,
+ *   tooltipColor: 'primary',
+ *   handler: () => {}
+ * };
+ *
  * // IonicActionButton (strict typing for Ionic-specific config)
  * ionicButton: IonicActionButton = {
  *   id: 'ionic',
@@ -229,7 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  *   }
  * };
  *
- * menuButton: ActionButton = {
+ * menuButton: IonicActionButton = {
  *   id: 'menu',
  *   label: 'Actions',
  *   type: ActionButtonType.Dropdown,
@@ -243,7 +868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  *
  * @usageNotes
  * ### Inputs
- * - `button` (required): The `ActionButton` configuration object
+ * - `button` (required): The `IonicActionButton` configuration object
  *
  * ### Outputs
  * - `buttonClick`: Emits the button configuration when clicked (for non-dropdown buttons)
@@ -318,9 +943,6 @@ class ButtonComponent {
     async openDropdown(event) {
         const btn = this.button();
         const children = btn.children ?? [];
-        if (children.length === 0) {
-            return;
-        }
         const alignment = (btn.config?.dropdownAlignment ?? 'end');
         const popover = await this.popoverCtrl.create({
             component: ActionButtonListComponent,
@@ -360,7 +982,8 @@ class ButtonComponent {
       [strong]="button().config?.strong"
       [disabled]="isDisabled()"
       [attr.aria-label]="button().ariaLabel"
-      [title]="button().tooltip ?? ''"
+      [makiTooltip]="button().tooltip || ''"
+      [makiTooltipColor]="button().tooltipColor ?? null"
       (click)="onClick($event)"
     >
       @if (showLoadingSpinner()) {
@@ -375,11 +998,11 @@ class ButtonComponent {
         <ion-icon name="chevron-down-outline" slot="end" class="dropdown-icon" />
       }
     </ion-button>
-  `, isInline: true, styles: ["ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end);text-transform:none}ion-button.button-has-icon-only::part(native){padding:0}ion-spinner{width:var(--maki-button-spinner-size, 16px);height:var(--maki-button-spinner-size, 16px);margin:0 4px 0 0}.button-icon{font-size:var(--maki-button-icon-size, 16px);margin:0 4px 0 0}.button-icon[slot=icon-only]{margin:0}.dropdown-icon{font-size:var(--maki-button-dropdown-icon-size, 16px);margin-inline-start:var(--maki-button-dropdown-icon-gap, 4px)}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end);text-transform:none}ion-button.button-has-icon-only::part(native){padding:0}ion-spinner{width:var(--maki-button-spinner-size, 16px);height:var(--maki-button-spinner-size, 16px);margin:0 4px 0 0}.button-icon{font-size:var(--maki-button-icon-size, 16px);margin:0 4px 0 0}.button-icon[slot=icon-only]{margin:0}.dropdown-icon{font-size:var(--maki-button-dropdown-icon-size, 16px);margin-inline-start:var(--maki-button-dropdown-icon-gap, 4px)}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: MakiTooltipDirective, selector: "[makiTooltip]", inputs: ["makiTooltip", "makiTooltipColor", "makiTooltipPosition", "makiTooltipContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'maki-button', standalone: true, imports: [IonButton, IonIcon, IonSpinner], providers: [ButtonStateService, ButtonDisplayService, ButtonHandlerService], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'maki-button', standalone: true, imports: [IonButton, IonIcon, IonSpinner, MakiTooltipDirective], providers: [ButtonStateService, ButtonDisplayService, ButtonHandlerService], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ion-button
       [fill]="button().config?.fill"
       [size]="button().config?.size"
@@ -389,7 +1012,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
       [strong]="button().config?.strong"
       [disabled]="isDisabled()"
       [attr.aria-label]="button().ariaLabel"
-      [title]="button().tooltip ?? ''"
+      [makiTooltip]="button().tooltip || ''"
+      [makiTooltipColor]="button().tooltipColor ?? null"
       (click)="onClick($event)"
     >
       @if (showLoadingSpinner()) {
@@ -426,5 +1050,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionButtonListComponent, ButtonComponent };
+export { ActionButtonListComponent, ButtonComponent, MakiTooltipDirective };
 //# sourceMappingURL=makigamestudio-ui-ionic.mjs.map