@lumaui/angular 0.1.3 → 0.2.0

package/types/lumaui-angular.d.ts

@@ -1,5 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { ButtonVariant, ButtonSize, CardVariant, CardTitleSize, CardDescriptionSize } from '@lumaui/core';
+import { InjectionToken, Signal, OnDestroy, WritableSignal, ElementRef, OnInit, AfterViewInit } from '@angular/core';
+import { ButtonVariant, ButtonSize, CardVariant, CardTitleSize, CardDescriptionSize, AccordionItemVariant, AccordionTitleSize, TooltipPosition, TabsStyle } from '@lumaui/core';
+import * as _lumaui_angular from '@lumaui/angular';
 
 declare class ButtonDirective {
     lmVariant: _angular_core.InputSignal<ButtonVariant>;
@@ -12,6 +14,13 @@ declare class ButtonDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "button[lumaButton], a[lumaButton]", never, { "lmVariant": { "alias": "lmVariant"; "required": false; "isSignal": true; }; "lmSize": { "alias": "lmSize"; "required": false; "isSignal": true; }; "lmDisabled": { "alias": "lmDisabled"; "required": false; "isSignal": true; }; "lmType": { "alias": "lmType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class BadgeDirective {
+    classes: _angular_core.Signal<string>;
+    get hostClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BadgeDirective, "[lumaBadge]", never, {}, {}, never, never, true, never>;
+}
+
 declare class CardComponent {
     /**
      * Card visual style variant
@@ -51,4 +60,902 @@ declare class CardContentDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardContentDirective, "[lumaCardContent]", never, {}, {}, never, never, true, never>;
 }
 
-export { ButtonDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardHeaderDirective, CardTitleDirective };
+/**
+ * AccordionGroupComponent
+ *
+ * Optional wrapper component that coordinates multiple accordion items.
+ * Supports controlled pattern for implementing business logic like:
+ * - Single item open at a time
+ * - Multiple items open
+ * - Always keep first/last item open
+ * - Maximum number of open items
+ *
+ * @example Controlled single mode
+ * ```html
+ * <luma-accordion-group [lmValue]="activeItem()" (lmValueChange)="activeItem.set($event)">
+ *   <luma-accordion-item lmId="item-1">...</luma-accordion-item>
+ *   <luma-accordion-item lmId="item-2">...</luma-accordion-item>
+ * </luma-accordion-group>
+ * ```
+ *
+ * @example Controlled multiple mode
+ * ```html
+ * <luma-accordion-group [lmValue]="activeItems()" (lmValueChange)="activeItems.set($event)">
+ *   <luma-accordion-item lmId="item-1">...</luma-accordion-item>
+ *   <luma-accordion-item lmId="item-2">...</luma-accordion-item>
+ * </luma-accordion-group>
+ * ```
+ */
+declare class AccordionGroupComponent {
+    /**
+     * Controlled value for which items are open
+     * - null: uncontrolled mode (each item manages its own state)
+     * - string: single item mode (ID of open item)
+     * - string[]: multiple items mode (IDs of open items)
+     */
+    lmValue: _angular_core.InputSignal<string | string[] | null>;
+    /**
+     * Emitted when an item is toggled
+     * Returns the new value (string for single mode, string[] for multiple)
+     */
+    lmValueChange: _angular_core.OutputEmitterRef<string | string[]>;
+    /**
+     * Force single mode even when lmValue is an array
+     * When true, only one item can be open at a time
+     */
+    lmSingle: _angular_core.InputSignal<boolean>;
+    /**
+     * Toggle an item by its ID
+     * Called by child AccordionItemComponent when toggled
+     */
+    toggleItem(itemId: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionGroupComponent, "luma-accordion-group", never, { "lmValue": { "alias": "lmValue"; "required": false; "isSignal": true; }; "lmSingle": { "alias": "lmSingle"; "required": false; "isSignal": true; }; }, { "lmValueChange": "lmValueChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Interface for accordion item state that child directives can access
+ */
+interface AccordionItemBase {
+    /** Whether the accordion item is currently open */
+    isOpen: Signal<boolean>;
+    /** Whether the accordion item is disabled */
+    lmDisabled: Signal<boolean>;
+    /** Toggle the accordion open/closed state */
+    toggle(): void;
+}
+/**
+ * Injection token for accordion item
+ * Allows child directives to access parent accordion item state
+ */
+declare const ACCORDION_ITEM: InjectionToken<AccordionItemBase>;
+
+/**
+ * AccordionItemComponent
+ *
+ * Wrapper component that contains the trigger and content.
+ * Can be used standalone or within an AccordionGroupComponent.
+ *
+ * @example Standalone usage
+ * ```html
+ * <luma-accordion-item>
+ *   <button lumaAccordionTrigger>
+ *     <span lumaAccordionTitle>Title</span>
+ *     <svg lumaAccordionIcon>...</svg>
+ *   </button>
+ *   <div lumaAccordionContent>Content here...</div>
+ * </luma-accordion-item>
+ * ```
+ *
+ * @example With variants
+ * ```html
+ * <luma-accordion-item lmVariant="filled">
+ *   ...
+ * </luma-accordion-item>
+ * ```
+ */
+declare class AccordionItemComponent implements AccordionItemBase {
+    private group;
+    private el;
+    private renderer;
+    private previousClasses;
+    constructor();
+    /**
+     * Unique identifier for this item (required when using AccordionGroup)
+     */
+    lmId: _angular_core.InputSignal<string>;
+    /**
+     * Visual style variant
+     * - default: Standard with border
+     * - bordered: FAQ-style stacked items
+     * - filled: Solid background (unified trigger/content)
+     */
+    lmVariant: _angular_core.InputSignal<AccordionItemVariant>;
+    /**
+     * Initial/controlled open state (for standalone usage)
+     */
+    lmOpen: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the accordion item is disabled
+     */
+    lmDisabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when the open state changes
+     * Useful for tracking/analytics
+     */
+    lmOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    private _isOpen;
+    /**
+     * Computed open state
+     * Priority: group controlled > lmOpen input > internal state
+     */
+    isOpen: _angular_core.Signal<boolean>;
+    wrapperClasses: _angular_core.Signal<string>;
+    contentWrapperClasses: _angular_core.Signal<string>;
+    /**
+     * Toggle the accordion open/closed state
+     */
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "luma-accordion-item", never, { "lmId": { "alias": "lmId"; "required": false; "isSignal": true; }; "lmVariant": { "alias": "lmVariant"; "required": false; "isSignal": true; }; "lmOpen": { "alias": "lmOpen"; "required": false; "isSignal": true; }; "lmDisabled": { "alias": "lmDisabled"; "required": false; "isSignal": true; }; }, { "lmOpenChange": "lmOpenChange"; }, never, ["[lumaAccordionTrigger]", "[lumaAccordionContent]"], true, never>;
+}
+
+/**
+ * AccordionTriggerDirective
+ *
+ * Applied to a div element to make it the clickable trigger for the accordion.
+ * Uses div instead of button for maximum layout flexibility.
+ * Handles ARIA attributes and keyboard navigation automatically.
+ *
+ * @example Basic usage
+ * ```html
+ * <div lumaAccordionTrigger>
+ *   <span lumaAccordionTitle>Title</span>
+ *   <span lumaAccordionIcon>
+ *     <svg>...</svg>
+ *   </span>
+ * </div>
+ * ```
+ *
+ * @example Custom layout
+ * ```html
+ * <div lumaAccordionTrigger class="grid grid-cols-[auto_1fr_auto] gap-4">
+ *   <svg class="w-6 h-6">...</svg>
+ *   <div>
+ *     <span lumaAccordionTitle>Title</span>
+ *     <p class="text-sm">Description</p>
+ *   </div>
+ *   <span lumaAccordionIcon>
+ *     <svg>...</svg>
+ *   </span>
+ * </div>
+ * ```
+ */
+declare class AccordionTriggerDirective {
+    protected item: _lumaui_angular.AccordionItemBase;
+    private id;
+    triggerId: string;
+    contentId: string;
+    classes: _angular_core.Signal<string>;
+    onClick(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionTriggerDirective, "div[lumaAccordionTrigger]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * AccordionTitleDirective
+ *
+ * Applies typography styles to the accordion title.
+ * Supports size variants for different visual hierarchies.
+ *
+ * @example Basic usage
+ * ```html
+ * <span lumaAccordionTitle>What is Luma UI?</span>
+ * ```
+ *
+ * @example With size variant
+ * ```html
+ * <span lumaAccordionTitle lmSize="lg">Large Title</span>
+ * ```
+ */
+declare class AccordionTitleDirective {
+    /**
+     * Size variant for the title
+     * - sm: Small text for compact UIs
+     * - md: Default size (base text)
+     * - lg: Large text for emphasis
+     */
+    lmSize: _angular_core.InputSignal<AccordionTitleSize>;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionTitleDirective, "[lumaAccordionTitle]", never, { "lmSize": { "alias": "lmSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * AccordionIconDirective
+ *
+ * Applies rotation animation to the accordion icon (typically a chevron).
+ * Must be placed on a wrapper element (span or div), not directly on the SVG.
+ * Automatically rotates based on the open state of the parent accordion item.
+ *
+ * @example With span wrapper (recommended)
+ * ```html
+ * <span lumaAccordionIcon>
+ *   <svg viewBox="0 0 24 24" class="w-4 h-4">
+ *     <path stroke="currentColor" stroke-width="2" d="M19 9l-7 7-7-7" />
+ *   </svg>
+ * </span>
+ * ```
+ *
+ * @example With div wrapper
+ * ```html
+ * <div lumaAccordionIcon>
+ *   <my-chevron-icon></my-chevron-icon>
+ * </div>
+ * ```
+ *
+ * @example Customize rotation via CSS variable
+ * ```html
+ * <span lumaAccordionIcon style="--luma-accordion-icon-rotation: 90deg">
+ *   <svg>...</svg>
+ * </span>
+ * ```
+ */
+declare class AccordionIconDirective {
+    protected item: _lumaui_angular.AccordionItemBase;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionIconDirective, "span[lumaAccordionIcon], div[lumaAccordionIcon]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * AccordionContentDirective
+ *
+ * Applied to the content area of the accordion.
+ * Handles visibility, ARIA attributes, and fade animation.
+ *
+ * @example Basic usage
+ * ```html
+ * <div lumaAccordionContent>
+ *   <p>Your content here...</p>
+ * </div>
+ * ```
+ */
+declare class AccordionContentDirective {
+    protected item: _lumaui_angular.AccordionItemBase;
+    protected trigger: AccordionTriggerDirective | null;
+    private id;
+    contentId: string;
+    triggerId: _angular_core.Signal<string | null>;
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionContentDirective, "[lumaAccordionContent]", never, {}, {}, never, never, true, never>;
+}
+
+declare class TooltipDirective implements OnDestroy {
+    private el;
+    private renderer;
+    private platformId;
+    lumaTooltip: _angular_core.InputSignal<string>;
+    lmPosition: _angular_core.InputSignal<TooltipPosition>;
+    lmHtml: _angular_core.InputSignal<boolean>;
+    lmTrigger: _angular_core.InputSignal<"click" | "hover" | "focus">;
+    lmDelay: _angular_core.InputSignal<number>;
+    isVisible: _angular_core.WritableSignal<boolean>;
+    actualPosition: _angular_core.WritableSignal<TooltipPosition>;
+    tooltipId: string;
+    private tooltipElement;
+    private showTimeout;
+    classes: _angular_core.Signal<string>;
+    constructor();
+    private ensureTooltipElement;
+    private updateContent;
+    private updateClasses;
+    private isTouchDevice;
+    private getFlippedPosition;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onClick(): void;
+    onFocus(): void;
+    onBlur(): void;
+    onEscape(): void;
+    onDocumentClick(event: Event): void;
+    onDocumentTouch(event: TouchEvent): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[lumaTooltip]", never, { "lumaTooltip": { "alias": "lumaTooltip"; "required": true; "isSignal": true; }; "lmPosition": { "alias": "lmPosition"; "required": false; "isSignal": true; }; "lmHtml": { "alias": "lmHtml"; "required": false; "isSignal": true; }; "lmTrigger": { "alias": "lmTrigger"; "required": false; "isSignal": true; }; "lmDelay": { "alias": "lmDelay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface TabsGroupBase {
+    /** Currently selected tab value */
+    value: WritableSignal<string | null>;
+    /** Visual style of the tabs (underline, background, pill) */
+    lmStyle: Signal<TabsStyle>;
+    /** Whether to lazy load panel content */
+    lmLazy: Signal<boolean>;
+    /** Select a tab by value */
+    select(value: string): void;
+    /** Register a trigger element */
+    registerTrigger(value: string, element: HTMLElement): void;
+    /** Unregister a trigger element */
+    unregisterTrigger(value: string): void;
+    /** Get all registered triggers */
+    getTriggers(): Map<string, HTMLElement>;
+    /** Focus next trigger (for keyboard navigation) */
+    focusNextTrigger(): void;
+    /** Focus previous trigger (for keyboard navigation) */
+    focusPreviousTrigger(): void;
+    /** Focus first trigger */
+    focusFirstTrigger(): void;
+    /** Focus last trigger */
+    focusLastTrigger(): void;
+}
+interface TabsListBase {
+    /** Reference to the native element */
+    elementRef: {
+        nativeElement: HTMLElement;
+    };
+    /** Get the currently active trigger element */
+    getActiveTrigger(): HTMLElement | null;
+}
+/**
+ * Injection token for tabs group
+ * Allows child components to access parent tabs state
+ */
+declare const TABS_GROUP: InjectionToken<TabsGroupBase>;
+/**
+ * Injection token for tabs list
+ * Allows indicator to access trigger positions
+ */
+declare const TABS_LIST: InjectionToken<TabsListBase>;
+
+/**
+ * Tabs container component
+ *
+ * Manages tab selection state, keyboard navigation, and provides context
+ * to child components (TabsList, TabsTrigger, TabsPanel).
+ *
+ * @example
+ * ```html
+ * <luma-tabs [lmValue]="selectedTab()" (lmValueChange)="onSelect($event)">
+ *   <div lumaTabsList>
+ *     <button lumaTabsTrigger="tab-1">Tab 1</button>
+ *     <button lumaTabsTrigger="tab-2">Tab 2</button>
+ *   </div>
+ *   <div lumaTabsPanel="tab-1">Content 1</div>
+ *   <div lumaTabsPanel="tab-2">Content 2</div>
+ * </luma-tabs>
+ * ```
+ */
+declare class TabsComponent implements TabsGroupBase {
+    /** Controlled value - currently selected tab */
+    lmValue: _angular_core.InputSignal<string | null>;
+    /** Default value for uncontrolled mode */
+    lmDefaultValue: _angular_core.InputSignal<string>;
+    /** Visual style: underline, background, or pill */
+    lmStyle: _angular_core.InputSignal<TabsStyle>;
+    /** Whether to lazy load panel content */
+    lmLazy: _angular_core.InputSignal<boolean>;
+    /** Emits when selected tab changes */
+    lmValueChange: _angular_core.OutputEmitterRef<string>;
+    /** Internal state for the selected value */
+    value: _angular_core.WritableSignal<string | null>;
+    /** Map of registered triggers for keyboard navigation */
+    private triggers;
+    /** Ordered list of trigger values for navigation */
+    private triggerOrder;
+    constructor();
+    /**
+     * Select a tab by value
+     */
+    select(tabValue: string): void;
+    /**
+     * Register a trigger element for keyboard navigation
+     */
+    registerTrigger(tabValue: string, element: HTMLElement): void;
+    /**
+     * Unregister a trigger element
+     */
+    unregisterTrigger(tabValue: string): void;
+    /**
+     * Get all registered triggers
+     */
+    getTriggers(): Map<string, HTMLElement>;
+    /**
+     * Focus next trigger in the list
+     */
+    focusNextTrigger(): void;
+    /**
+     * Focus previous trigger in the list
+     */
+    focusPreviousTrigger(): void;
+    /**
+     * Focus first trigger
+     */
+    focusFirstTrigger(): void;
+    /**
+     * Focus last trigger
+     */
+    focusLastTrigger(): void;
+    private getCurrentTriggerIndex;
+    private focusTriggerAtIndex;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "luma-tabs", never, { "lmValue": { "alias": "lmValue"; "required": false; "isSignal": true; }; "lmDefaultValue": { "alias": "lmDefaultValue"; "required": false; "isSignal": true; }; "lmStyle": { "alias": "lmStyle"; "required": false; "isSignal": true; }; "lmLazy": { "alias": "lmLazy"; "required": false; "isSignal": true; }; }, { "lmValueChange": "lmValueChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Tabs list directive
+ *
+ * Container for tab triggers with role="tablist".
+ * Provides context for the indicator component.
+ *
+ * @example
+ * ```html
+ * <div lumaTabsList>
+ *   <button lumaTabsTrigger="tab-1">Tab 1</button>
+ *   <button lumaTabsTrigger="tab-2">Tab 2</button>
+ * </div>
+ * ```
+ */
+declare class TabsListDirective implements TabsListBase {
+    readonly elementRef: ElementRef<any>;
+    protected readonly tabsGroup: _lumaui_angular.TabsGroupBase;
+    /** Whether horizontal scrolling is enabled */
+    lmScrollable: boolean;
+    classes: _angular_core.Signal<string>;
+    /**
+     * Get the currently active trigger element
+     */
+    getActiveTrigger(): HTMLElement | null;
+    /**
+     * Handle mouse wheel for horizontal scroll
+     */
+    onWheel(event: WheelEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsListDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabsListDirective, "[lumaTabsList]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Tabs trigger directive
+ *
+ * Individual tab button with role="tab" and keyboard navigation support.
+ * Follows WAI-ARIA tabs pattern with roving tabindex.
+ *
+ * @example
+ * ```html
+ * <button lumaTabsTrigger="tab-1">Tab 1</button>
+ * ```
+ */
+declare class TabsTriggerDirective implements OnInit, OnDestroy {
+    private readonly el;
+    private readonly tabsGroup;
+    /** Tab value identifier */
+    lumaTabsTrigger: _angular_core.InputSignal<string>;
+    /** Whether this trigger is disabled */
+    lmDisabled: _angular_core.InputSignal<boolean>;
+    /** Computed: whether this tab is selected */
+    isSelected: _angular_core.Signal<boolean>;
+    /** Computed: ID for the trigger element */
+    triggerId: _angular_core.Signal<string>;
+    /** Computed: ID for the corresponding panel */
+    panelId: _angular_core.Signal<string>;
+    /** Computed: CSS classes from CVA */
+    classes: _angular_core.Signal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onClick(): void;
+    onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsTriggerDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabsTriggerDirective, "[lumaTabsTrigger]", never, { "lumaTabsTrigger": { "alias": "lumaTabsTrigger"; "required": true; "isSignal": true; }; "lmDisabled": { "alias": "lmDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tabs panel directive
+ *
+ * Content panel with role="tabpanel" and lazy loading support.
+ * When lazy loading is enabled, content is only rendered after
+ * the tab has been selected at least once, then cached.
+ *
+ * @example
+ * ```html
+ * <div lumaTabsPanel="tab-1">Content 1</div>
+ *
+ * <!-- With lazy loading (default when lmLazy=true on parent) -->
+ * <ng-template lumaTabsPanel="tab-1">
+ *   <expensive-component />
+ * </ng-template>
+ * ```
+ */
+declare class TabsPanelDirective {
+    private readonly tabsGroup;
+    private readonly templateRef;
+    private readonly viewContainer;
+    /** Panel value identifier */
+    lumaTabsPanel: _angular_core.InputSignal<string>;
+    /** Track if panel has ever been selected (for lazy loading cache) */
+    private hasBeenSelected;
+    /** Computed: whether this panel is currently selected */
+    isSelected: _angular_core.Signal<boolean>;
+    /** Computed: whether this panel should be visible/rendered */
+    isVisible: _angular_core.Signal<boolean>;
+    /** Computed: whether content should be rendered (for lazy loading) */
+    shouldRender: _angular_core.Signal<boolean>;
+    /** Computed: ID for the panel element */
+    panelId: _angular_core.Signal<string>;
+    /** Computed: ID for the corresponding trigger */
+    triggerId: _angular_core.Signal<string>;
+    /** Computed: CSS classes from CVA */
+    classes: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsPanelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabsPanelDirective, "[lumaTabsPanel]", never, { "lumaTabsPanel": { "alias": "lumaTabsPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tabs indicator component
+ *
+ * Animated indicator that slides between tabs for the underline style.
+ * Uses CSS transform for smooth, GPU-accelerated animation.
+ *
+ * @example
+ * ```html
+ * <div lumaTabsList>
+ *   <button lumaTabsTrigger="tab-1">Tab 1</button>
+ *   <button lumaTabsTrigger="tab-2">Tab 2</button>
+ *   <luma-tabs-indicator />
+ * </div>
+ * ```
+ */
+declare class TabsIndicatorComponent implements AfterViewInit, OnDestroy {
+    private readonly platformId;
+    private readonly tabsGroup;
+    private readonly tabsList;
+    /** Indicator width in pixels */
+    indicatorWidth: _angular_core.WritableSignal<number>;
+    /** Indicator X or Y position */
+    private indicatorPosition;
+    /** Resize observer for recalculating position */
+    private resizeObserver;
+    /** Computed: CSS classes from CVA */
+    classes: _angular_core.Signal<string>;
+    /** Computed: CSS transform for positioning */
+    indicatorTransform: _angular_core.Signal<string>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private updateIndicatorPosition;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsIndicatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsIndicatorComponent, "luma-tabs-indicator", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Modal size variants
+ */
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Interface for modal context that child components/directives can access
+ */
+interface ModalContext {
+    /** Whether the modal is currently open */
+    isOpen: Signal<boolean>;
+    /** Open the modal */
+    open: () => void;
+    /** Close the modal */
+    close: () => void;
+    /** Modal size variant */
+    size: Signal<ModalSize>;
+    /** Whether to close on overlay click */
+    closeOnOverlay: Signal<boolean>;
+    /** Whether to close on Escape key */
+    closeOnEscape: Signal<boolean>;
+    /** Unique ID for accessibility */
+    modalId: string;
+}
+/**
+ * Injection token for modal context
+ * Allows child components to access parent modal state
+ */
+declare const MODAL_CONTEXT: InjectionToken<ModalContext>;
+
+/**
+ * Modal container component
+ *
+ * Manages modal open/close state, escape key handling, and provides context
+ * to child components (ModalOverlay, ModalContainer, etc.).
+ *
+ * Supports both controlled and uncontrolled modes:
+ * - Controlled: Use [lmOpen] and (lmOpenChange)
+ * - Uncontrolled: Use [lmDefaultOpen] and access via template reference
+ *
+ * @example
+ * ```html
+ * <!-- Controlled mode -->
+ * <luma-modal [lmOpen]="isOpen()" (lmOpenChange)="isOpen.set($event)">
+ *   <luma-modal-overlay>
+ *     <luma-modal-container>
+ *       <div lumaModalHeader>
+ *         <h2 lumaModalTitle>Title</h2>
+ *         <luma-modal-close />
+ *       </div>
+ *       <div lumaModalContent>Content</div>
+ *       <div lumaModalFooter>
+ *         <button lumaButton (click)="isOpen.set(false)">Close</button>
+ *       </div>
+ *     </luma-modal-container>
+ *   </luma-modal-overlay>
+ * </luma-modal>
+ *
+ * <!-- Uncontrolled mode -->
+ * <luma-modal #modal [lmDefaultOpen]="false">
+ *   ...
+ * </luma-modal>
+ * <button (click)="modal.open()">Open</button>
+ * ```
+ */
+declare class ModalComponent implements ModalContext, OnDestroy {
+    private readonly platformId;
+    private readonly document;
+    /** Controlled open state (null = uncontrolled mode) */
+    lmOpen: _angular_core.InputSignal<boolean | null>;
+    /** Default open state for uncontrolled mode */
+    lmDefaultOpen: _angular_core.InputSignal<boolean>;
+    /** Size variant */
+    lmSize: _angular_core.InputSignal<ModalSize>;
+    /** Close when clicking the overlay */
+    lmCloseOnOverlay: _angular_core.InputSignal<boolean>;
+    /** Close when pressing Escape key */
+    lmCloseOnEscape: _angular_core.InputSignal<boolean>;
+    /** Emits when open state changes */
+    lmOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Internal open state for uncontrolled mode */
+    private internalOpen;
+    /** Unique modal ID for accessibility */
+    readonly modalId: string;
+    /** Previously focused element for focus restoration */
+    private previouslyFocused;
+    /** Escape key handler */
+    private escapeHandler;
+    /** Computed: current open state (controlled or uncontrolled) */
+    isOpen: _angular_core.Signal<boolean>;
+    /** Computed: size signal for context */
+    size: _angular_core.Signal<ModalSize>;
+    /** Computed: closeOnOverlay signal for context */
+    closeOnOverlay: _angular_core.Signal<boolean>;
+    /** Computed: closeOnEscape signal for context */
+    closeOnEscape: _angular_core.Signal<boolean>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Open the modal
+     */
+    open(): void;
+    /**
+     * Close the modal
+     */
+    close(): void;
+    private storeFocus;
+    private restoreFocus;
+    private lockBodyScroll;
+    private unlockBodyScroll;
+    private registerEscapeHandler;
+    private unregisterEscapeHandler;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalComponent, "luma-modal", never, { "lmOpen": { "alias": "lmOpen"; "required": false; "isSignal": true; }; "lmDefaultOpen": { "alias": "lmDefaultOpen"; "required": false; "isSignal": true; }; "lmSize": { "alias": "lmSize"; "required": false; "isSignal": true; }; "lmCloseOnOverlay": { "alias": "lmCloseOnOverlay"; "required": false; "isSignal": true; }; "lmCloseOnEscape": { "alias": "lmCloseOnEscape"; "required": false; "isSignal": true; }; }, { "lmOpenChange": "lmOpenChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Modal overlay component (backdrop)
+ *
+ * Provides a semi-transparent backdrop behind the modal.
+ * Handles click-to-close when enabled on the parent modal.
+ *
+ * @example
+ * ```html
+ * <luma-modal [lmOpen]="isOpen()">
+ *   <luma-modal-overlay>
+ *     <luma-modal-container>...</luma-modal-container>
+ *   </luma-modal-overlay>
+ * </luma-modal>
+ * ```
+ */
+declare class ModalOverlayComponent {
+    private readonly modal;
+    /** Computed classes from CVA */
+    classes: _angular_core.Signal<string>;
+    /**
+     * Handle click on overlay (not on children)
+     */
+    onOverlayClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalOverlayComponent, "luma-modal-overlay", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Modal container component (dialog box)
+ *
+ * Contains the modal content and handles:
+ * - ARIA attributes for accessibility
+ * - Focus trap when modal is open
+ * - Size variants
+ *
+ * @example
+ * ```html
+ * <luma-modal-overlay>
+ *   <luma-modal-container>
+ *     <div lumaModalHeader>...</div>
+ *     <div lumaModalContent>...</div>
+ *     <div lumaModalFooter>...</div>
+ *   </luma-modal-container>
+ * </luma-modal-overlay>
+ * ```
+ */
+declare class ModalContainerComponent implements AfterViewInit, OnDestroy {
+    readonly modal: _lumaui_angular.ModalContext;
+    private readonly elementRef;
+    private readonly platformId;
+    /** Focus trap keydown handler */
+    private focusTrapHandler;
+    /** ID for aria-labelledby */
+    titleId: _angular_core.Signal<string>;
+    /** Computed classes from CVA */
+    classes: _angular_core.Signal<string>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Get all focusable elements within the modal
+     */
+    private getFocusableElements;
+    /**
+     * Focus the first focusable element
+     */
+    private focusFirstElement;
+    /**
+     * Setup focus trap to keep focus within modal
+     */
+    private setupFocusTrap;
+    /**
+     * Remove focus trap handler
+     */
+    private removeFocusTrap;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalContainerComponent, "luma-modal-container", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Modal header directive
+ *
+ * Container for modal title and close button.
+ * Provides consistent padding and border styling.
+ *
+ * @example
+ * ```html
+ * <div lumaModalHeader>
+ *   <h2 lumaModalTitle>Modal Title</h2>
+ *   <luma-modal-close />
+ * </div>
+ * ```
+ */
+declare class ModalHeaderDirective {
+    /** Computed classes from CVA */
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ModalHeaderDirective, "[lumaModalHeader]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Modal title directive
+ *
+ * Provides consistent typography for modal titles.
+ * Automatically links to aria-labelledby on the modal container.
+ *
+ * @example
+ * ```html
+ * <h2 lumaModalTitle>Modal Title</h2>
+ * <h2 lumaModalTitle lmSize="lg">Large Title</h2>
+ * ```
+ */
+declare class ModalTitleDirective {
+    private readonly modal;
+    /** Title size variant */
+    lmSize: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    /** ID for aria-labelledby connection */
+    titleId: _angular_core.Signal<string>;
+    /** Computed classes from CVA */
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ModalTitleDirective, "[lumaModalTitle]", never, { "lmSize": { "alias": "lmSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Modal content directive
+ *
+ * Container for the main modal content.
+ * Supports scrolling when content exceeds available space.
+ *
+ * @example
+ * ```html
+ * <div lumaModalContent>
+ *   Content that doesn't scroll
+ * </div>
+ *
+ * <div lumaModalContent [lmScrollable]="true">
+ *   Long content that scrolls...
+ * </div>
+ * ```
+ */
+declare class ModalContentDirective {
+    /** Enable scroll when content overflows */
+    lmScrollable: _angular_core.InputSignal<boolean>;
+    /** Computed classes from CVA */
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ModalContentDirective, "[lumaModalContent]", never, { "lmScrollable": { "alias": "lmScrollable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Modal footer directive
+ *
+ * Container for modal actions (buttons, etc.).
+ * Provides consistent padding and flexible alignment.
+ *
+ * @example
+ * ```html
+ * <div lumaModalFooter>
+ *   <button lumaButton lmVariant="ghost">Cancel</button>
+ *   <button lumaButton>Confirm</button>
+ * </div>
+ *
+ * <div lumaModalFooter lmAlign="between">
+ *   <span>Left content</span>
+ *   <button lumaButton>Action</button>
+ * </div>
+ * ```
+ */
+declare class ModalFooterDirective {
+    /** Alignment of footer content */
+    lmAlign: _angular_core.InputSignal<"start" | "center" | "end" | "between">;
+    /** Computed classes from CVA */
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ModalFooterDirective, "[lumaModalFooter]", never, { "lmAlign": { "alias": "lmAlign"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Modal close button component
+ *
+ * Provides a styled close button with an X icon.
+ * Can be customized with different content via ng-content.
+ *
+ * @example
+ * ```html
+ * <!-- Default X icon -->
+ * <luma-modal-close />
+ *
+ * <!-- Custom aria label -->
+ * <luma-modal-close lmAriaLabel="Fechar modal" />
+ *
+ * <!-- Custom icon -->
+ * <luma-modal-close>
+ *   <svg>...</svg>
+ * </luma-modal-close>
+ * ```
+ */
+declare class ModalCloseComponent {
+    readonly modal: _lumaui_angular.ModalContext;
+    /** Accessible label for the close button */
+    lmAriaLabel: _angular_core.InputSignal<string>;
+    /** Computed aria label */
+    ariaLabel: _angular_core.Signal<string>;
+    /** Computed classes from CVA */
+    classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalCloseComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalCloseComponent, "luma-modal-close", never, { "lmAriaLabel": { "alias": "lmAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { ACCORDION_ITEM, AccordionContentDirective, AccordionGroupComponent, AccordionIconDirective, AccordionItemComponent, AccordionTitleDirective, AccordionTriggerDirective, BadgeDirective, ButtonDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardHeaderDirective, CardTitleDirective, MODAL_CONTEXT, ModalCloseComponent, ModalComponent, ModalContainerComponent, ModalContentDirective, ModalFooterDirective, ModalHeaderDirective, ModalOverlayComponent, ModalTitleDirective, TABS_GROUP, TABS_LIST, TabsComponent, TabsIndicatorComponent, TabsListDirective, TabsPanelDirective, TabsTriggerDirective, TooltipDirective };
+export type { AccordionItemBase, ModalContext, ModalSize, TabsGroupBase, TabsListBase };