@lumaui/angular 0.1.4 → 0.2.0

package/fesm2022/lumaui-angular.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, computed, HostBinding, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
-import { buttonVariants, cardVariants, cardContentVariants, cardTitleVariants, cardDescriptionVariants } from '@lumaui/core';
+import { input, computed, HostBinding, Directive, ChangeDetectionStrategy, Component, output, InjectionToken, inject, ElementRef, Renderer2, effect, signal, HostListener, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';
+import { buttonVariants, badgeVariants, cardVariants, cardContentVariants, cardTitleVariants, cardDescriptionVariants, accordionItemVariants, accordionContentWrapperVariants, accordionTriggerVariants, accordionTitleVariants, accordionIconVariants, accordionContentVariants, tooltipVariants, tabsListVariants, tabsTriggerVariants, tabsPanelVariants, tabsIndicatorVariants, modalOverlayVariants, modalContainerVariants, modalHeaderVariants, modalTitleVariants, modalContentVariants, modalFooterVariants, modalCloseVariants } from '@lumaui/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 
 class ButtonDirective {
     // Signal-based inputs with lm prefix (Angular 20+)
@@ -33,6 +34,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['class']
             }] } });
 
+class BadgeDirective {
+    // Computed class string - layout only, no variants
+    classes = computed(() => badgeVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    get hostClasses() {
+        return this.classes();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: BadgeDirective, isStandalone: true, selector: "[lumaBadge]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaBadge]',
+                }]
+        }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 class CardComponent {
     /**
      * Card visual style variant
@@ -117,11 +137,1744 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+/**
+ * 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>
+ * ```
+ */
+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 = input(null, ...(ngDevMode ? [{ debugName: "lmValue" }] : []));
+    /**
+     * Emitted when an item is toggled
+     * Returns the new value (string for single mode, string[] for multiple)
+     */
+    lmValueChange = output();
+    /**
+     * Force single mode even when lmValue is an array
+     * When true, only one item can be open at a time
+     */
+    lmSingle = input(false, ...(ngDevMode ? [{ debugName: "lmSingle" }] : []));
+    /**
+     * Toggle an item by its ID
+     * Called by child AccordionItemComponent when toggled
+     */
+    toggleItem(itemId) {
+        const current = this.lmValue();
+        // If uncontrolled, do nothing (items manage their own state)
+        if (current === null || current === undefined) {
+            return;
+        }
+        let newValue;
+        if (this.lmSingle() || typeof current === 'string') {
+            // Single mode: toggle between the item and empty
+            newValue = current === itemId ? '' : itemId;
+        }
+        else {
+            // Multiple mode: add/remove from array
+            const arr = Array.isArray(current) ? [...current] : [];
+            const index = arr.indexOf(itemId);
+            if (index >= 0) {
+                arr.splice(index, 1);
+            }
+            else {
+                arr.push(itemId);
+            }
+            newValue = arr;
+        }
+        this.lmValueChange.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: AccordionGroupComponent, isStandalone: true, selector: "luma-accordion-group", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: false, transformFunction: null }, lmSingle: { classPropertyName: "lmSingle", publicName: "lmSingle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmValueChange: "lmValueChange" }, host: { properties: { "style.gap": "\"var(--luma-accordion-item-gap)\"" }, classAttribute: "flex flex-col" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-accordion-group',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex flex-col',
+                        '[style.gap]': '"var(--luma-accordion-item-gap)"',
+                    },
+                }]
+        }], propDecorators: { lmValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmValue", required: false }] }], lmValueChange: [{ type: i0.Output, args: ["lmValueChange"] }], lmSingle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSingle", required: false }] }] } });
+
+/**
+ * Injection token for accordion item
+ * Allows child directives to access parent accordion item state
+ */
+const ACCORDION_ITEM = new InjectionToken('AccordionItem');
+
+/**
+ * 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>
+ * ```
+ */
+class AccordionItemComponent {
+    group = inject(AccordionGroupComponent, { optional: true });
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    previousClasses = [];
+    constructor() {
+        // Effect to reactively manage CVA classes without replacing user classes
+        effect(() => {
+            // Remove previous CVA classes
+            this.previousClasses.forEach((c) => {
+                this.renderer.removeClass(this.el.nativeElement, c);
+            });
+            // Add new CVA classes (preserves user-provided classes)
+            const newClasses = this.wrapperClasses()
+                .split(' ')
+                .filter((c) => c);
+            newClasses.forEach((c) => {
+                this.renderer.addClass(this.el.nativeElement, c);
+            });
+            this.previousClasses = newClasses;
+        });
+    }
+    /**
+     * Unique identifier for this item (required when using AccordionGroup)
+     */
+    lmId = input('', ...(ngDevMode ? [{ debugName: "lmId" }] : []));
+    /**
+     * Visual style variant
+     * - default: Standard with border
+     * - bordered: FAQ-style stacked items
+     * - filled: Solid background (unified trigger/content)
+     */
+    lmVariant = input('default', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
+    /**
+     * Initial/controlled open state (for standalone usage)
+     */
+    lmOpen = input(false, ...(ngDevMode ? [{ debugName: "lmOpen" }] : []));
+    /**
+     * Whether the accordion item is disabled
+     */
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    /**
+     * Emitted when the open state changes
+     * Useful for tracking/analytics
+     */
+    lmOpenChange = output();
+    // Internal state for uncontrolled mode
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    /**
+     * Computed open state
+     * Priority: group controlled > lmOpen input > internal state
+     */
+    isOpen = computed(() => {
+        // If in a controlled group, check group value
+        if (this.group?.lmValue() !== null && this.group?.lmValue() !== undefined) {
+            const value = this.group.lmValue();
+            const id = this.lmId();
+            return Array.isArray(value) ? value.includes(id) : value === id;
+        }
+        // Otherwise use input or internal state
+        return this.lmOpen() || this._isOpen();
+    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    // CVA classes
+    wrapperClasses = computed(() => accordionItemVariants({
+        variant: this.lmVariant(),
+    }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    contentWrapperClasses = computed(() => accordionContentWrapperVariants({ open: this.isOpen() }), ...(ngDevMode ? [{ debugName: "contentWrapperClasses" }] : []));
+    /**
+     * Toggle the accordion open/closed state
+     */
+    toggle() {
+        if (this.lmDisabled())
+            return;
+        if (this.group && this.group.lmValue() !== null) {
+            // Controlled by group
+            this.group.toggleItem(this.lmId());
+        }
+        else {
+            // Uncontrolled mode
+            this._isOpen.update((v) => !v);
+        }
+        this.lmOpenChange.emit(this.isOpen());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: AccordionItemComponent, isStandalone: true, selector: "luma-accordion-item", inputs: { lmId: { classPropertyName: "lmId", publicName: "lmId", isSignal: true, isRequired: false, transformFunction: null }, lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmOpen: { classPropertyName: "lmOpen", publicName: "lmOpen", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmOpenChange: "lmOpenChange" }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "lmVariant()" } }, providers: [{ provide: ACCORDION_ITEM, useExisting: AccordionItemComponent }], ngImport: i0, template: "<!-- Slot for trigger button -->\n<ng-content select=\"[lumaAccordionTrigger]\"></ng-content>\n\n<!-- Content wrapper with grid-rows animation -->\n<div [class]=\"contentWrapperClasses()\">\n  <div class=\"overflow-hidden\">\n    <ng-content select=\"[lumaAccordionContent]\"></ng-content>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'luma-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: ACCORDION_ITEM, useExisting: AccordionItemComponent }], host: {
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-variant]': 'lmVariant()',
+                    }, template: "<!-- Slot for trigger button -->\n<ng-content select=\"[lumaAccordionTrigger]\"></ng-content>\n\n<!-- Content wrapper with grid-rows animation -->\n<div [class]=\"contentWrapperClasses()\">\n  <div class=\"overflow-hidden\">\n    <ng-content select=\"[lumaAccordionContent]\"></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { lmId: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmId", required: false }] }], lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }], lmOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmOpen", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmOpenChange: [{ type: i0.Output, args: ["lmOpenChange"] }] } });
+
+let uniqueId$2 = 0;
+/**
+ * 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>
+ * ```
+ */
+class AccordionTriggerDirective {
+    item = inject(ACCORDION_ITEM);
+    id = ++uniqueId$2;
+    triggerId = `luma-accordion-trigger-${this.id}`;
+    contentId = `luma-accordion-content-${this.id}`;
+    classes = computed(() => accordionTriggerVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    onClick(event) {
+        if (this.item.lmDisabled())
+            return;
+        event.preventDefault();
+        this.item.toggle();
+    }
+    onKeydown(event) {
+        if (this.item.lmDisabled())
+            return;
+        // Space and Enter don't trigger on div natively - manual handler required
+        if (event.code === 'Space' || event.code === 'Enter') {
+            event.preventDefault();
+            this.item.toggle();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AccordionTriggerDirective, isStandalone: true, selector: "div[lumaAccordionTrigger]", host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "class": "classes()", "attr.tabindex": "item.lmDisabled() ? -1 : 0", "attr.aria-expanded": "item.isOpen()", "attr.aria-controls": "contentId", "attr.aria-disabled": "item.lmDisabled() ? \"true\" : null", "id": "triggerId" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[lumaAccordionTrigger]',
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'button',
+                        '[attr.tabindex]': 'item.lmDisabled() ? -1 : 0',
+                        '[attr.aria-expanded]': 'item.isOpen()',
+                        '[attr.aria-controls]': 'contentId',
+                        '[attr.aria-disabled]': 'item.lmDisabled() ? "true" : null',
+                        '[id]': 'triggerId',
+                    },
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class AccordionTitleDirective {
+    /**
+     * Size variant for the title
+     * - sm: Small text for compact UIs
+     * - md: Default size (base text)
+     * - lg: Large text for emphasis
+     */
+    lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    classes = computed(() => accordionTitleVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: AccordionTitleDirective, isStandalone: true, selector: "[lumaAccordionTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaAccordionTitle]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class AccordionIconDirective {
+    item = inject(ACCORDION_ITEM);
+    classes = computed(() => accordionIconVariants({ open: this.item.isOpen() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AccordionIconDirective, isStandalone: true, selector: "span[lumaAccordionIcon], div[lumaAccordionIcon]", host: { properties: { "class": "classes()", "attr.aria-hidden": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[lumaAccordionIcon], div[lumaAccordionIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-hidden]': 'true',
+                    },
+                }]
+        }] });
+
+let uniqueId$1 = 0;
+/**
+ * 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>
+ * ```
+ */
+class AccordionContentDirective {
+    item = inject(ACCORDION_ITEM);
+    trigger = inject(AccordionTriggerDirective, { optional: true });
+    id = ++uniqueId$1;
+    contentId = `luma-accordion-content-${this.id}`;
+    triggerId = computed(() => this.trigger?.triggerId ?? null, ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
+    classes = computed(() => accordionContentVariants({ open: this.item.isOpen() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AccordionContentDirective, isStandalone: true, selector: "[lumaAccordionContent]", host: { attributes: { "role": "region" }, properties: { "class": "classes()", "id": "contentId", "attr.aria-labelledby": "triggerId()", "attr.hidden": "!item.isOpen() ? \"\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AccordionContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaAccordionContent]',
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'region',
+                        '[id]': 'contentId',
+                        '[attr.aria-labelledby]': 'triggerId()',
+                        '[attr.hidden]': '!item.isOpen() ? "" : null',
+                    },
+                }]
+        }] });
+
+class TooltipDirective {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    platformId = inject(PLATFORM_ID);
+    // Inputs with lm prefix following Lumo convention
+    lumaTooltip = input.required(...(ngDevMode ? [{ debugName: "lumaTooltip" }] : []));
+    lmPosition = input('top', ...(ngDevMode ? [{ debugName: "lmPosition" }] : []));
+    lmHtml = input(false, ...(ngDevMode ? [{ debugName: "lmHtml" }] : []));
+    lmTrigger = input('hover', ...(ngDevMode ? [{ debugName: "lmTrigger" }] : []));
+    lmDelay = input(0, ...(ngDevMode ? [{ debugName: "lmDelay" }] : []));
+    // State
+    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    actualPosition = signal('top', ...(ngDevMode ? [{ debugName: "actualPosition" }] : []));
+    tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+    tooltipElement = null;
+    showTimeout = null;
+    classes = computed(() => tooltipVariants({
+        position: this.actualPosition(),
+        visible: this.isVisible(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    constructor() {
+        // Create and update tooltip element reactively
+        effect(() => {
+            if (isPlatformBrowser(this.platformId)) {
+                this.ensureTooltipElement();
+                this.updateContent();
+                this.updateClasses();
+            }
+        });
+    }
+    ensureTooltipElement() {
+        if (this.tooltipElement)
+            return;
+        this.tooltipElement = this.renderer.createElement('div');
+        this.renderer.setAttribute(this.tooltipElement, 'id', this.tooltipId);
+        this.renderer.setAttribute(this.tooltipElement, 'role', 'tooltip');
+        this.renderer.appendChild(this.el.nativeElement, this.tooltipElement);
+    }
+    updateContent() {
+        if (!this.tooltipElement)
+            return;
+        const content = this.lumaTooltip();
+        if (this.lmHtml()) {
+            this.tooltipElement.innerHTML = content;
+        }
+        else {
+            this.tooltipElement.textContent = content;
+        }
+    }
+    updateClasses() {
+        if (!this.tooltipElement)
+            return;
+        this.tooltipElement.className = this.classes();
+    }
+    isTouchDevice() {
+        if (!isPlatformBrowser(this.platformId))
+            return false;
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    }
+    getFlippedPosition(preferred) {
+        if (!this.tooltipElement || !isPlatformBrowser(this.platformId)) {
+            return preferred;
+        }
+        const triggerRect = this.el.nativeElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const offset = 8; // --luma-tooltip-offset
+        switch (preferred) {
+            case 'top':
+                if (triggerRect.top - tooltipRect.height - offset < 0) {
+                    return 'bottom';
+                }
+                break;
+            case 'bottom':
+                if (triggerRect.bottom + tooltipRect.height + offset > viewportHeight) {
+                    return 'top';
+                }
+                break;
+            case 'left':
+                if (triggerRect.left - tooltipRect.width - offset < 0) {
+                    return 'right';
+                }
+                break;
+            case 'right':
+                if (triggerRect.right + tooltipRect.width + offset > viewportWidth) {
+                    return 'left';
+                }
+                break;
+        }
+        return preferred;
+    }
+    onMouseEnter() {
+        // Ignore hover on touch devices
+        if (this.isTouchDevice())
+            return;
+        if (this.lmTrigger() !== 'hover')
+            return;
+        this.show();
+    }
+    onMouseLeave() {
+        if (this.isTouchDevice())
+            return;
+        if (this.lmTrigger() !== 'hover')
+            return;
+        this.hide();
+    }
+    onClick() {
+        // On touch devices, click acts as toggle even with trigger='hover'
+        if (this.isTouchDevice() || this.lmTrigger() === 'click') {
+            this.toggle();
+        }
+    }
+    onFocus() {
+        if (this.lmTrigger() === 'focus' || this.lmTrigger() === 'hover') {
+            this.show();
+        }
+    }
+    onBlur() {
+        if (this.lmTrigger() === 'focus' || this.lmTrigger() === 'hover') {
+            this.hide();
+        }
+    }
+    onEscape() {
+        this.hide();
+    }
+    onDocumentClick(event) {
+        if (this.lmTrigger() !== 'click' && !this.isTouchDevice())
+            return;
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.hide();
+        }
+    }
+    onDocumentTouch(event) {
+        if (!this.isVisible())
+            return;
+        if (!this.el.nativeElement.contains(event.target)) {
+            this.hide();
+        }
+    }
+    show() {
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        const delay = this.lmDelay();
+        const showAction = () => {
+            this.isVisible.set(true);
+            // Calculate position with auto-flip after tooltip is visible
+            requestAnimationFrame(() => {
+                const actualPosition = this.getFlippedPosition(this.lmPosition());
+                this.actualPosition.set(actualPosition);
+                this.updateClasses();
+            });
+        };
+        if (delay > 0) {
+            this.showTimeout = setTimeout(showAction, delay);
+        }
+        else {
+            showAction();
+        }
+    }
+    hide() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+        this.isVisible.set(false);
+        this.updateClasses();
+    }
+    toggle() {
+        if (this.isVisible()) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    ngOnDestroy() {
+        if (this.showTimeout)
+            clearTimeout(this.showTimeout);
+        if (this.tooltipElement) {
+            this.renderer.removeChild(this.el.nativeElement, this.tooltipElement);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: TooltipDirective, isStandalone: true, selector: "[lumaTooltip]", inputs: { lumaTooltip: { classPropertyName: "lumaTooltip", publicName: "lumaTooltip", isSignal: true, isRequired: true, transformFunction: null }, lmPosition: { classPropertyName: "lmPosition", publicName: "lmPosition", isSignal: true, isRequired: false, transformFunction: null }, lmHtml: { classPropertyName: "lmHtml", publicName: "lmHtml", isSignal: true, isRequired: false, transformFunction: null }, lmTrigger: { classPropertyName: "lmTrigger", publicName: "lmTrigger", isSignal: true, isRequired: false, transformFunction: null }, lmDelay: { classPropertyName: "lmDelay", publicName: "lmDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()", "focus": "onFocus()", "blur": "onBlur()", "document:keydown.escape": "onEscape()", "document:click": "onDocumentClick($event)", "document:touchstart": "onDocumentTouch($event)" }, properties: { "attr.aria-describedby": "tooltipId", "style.position": "\"relative\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaTooltip]',
+                    host: {
+                        '[attr.aria-describedby]': 'tooltipId',
+                        '[style.position]': '"relative"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { lumaTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "lumaTooltip", required: true }] }], lmPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmPosition", required: false }] }], lmHtml: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmHtml", required: false }] }], lmTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmTrigger", required: false }] }], lmDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDelay", required: false }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onDocumentTouch: [{
+                type: HostListener,
+                args: ['document:touchstart', ['$event']]
+            }] } });
+
+/**
+ * Injection token for tabs group
+ * Allows child components to access parent tabs state
+ */
+const TABS_GROUP = new InjectionToken('TabsGroup');
+/**
+ * Injection token for tabs list
+ * Allows indicator to access trigger positions
+ */
+const TABS_LIST = new InjectionToken('TabsList');
+
+/**
+ * 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>
+ * ```
+ */
+class TabsComponent {
+    /** Controlled value - currently selected tab */
+    lmValue = input(null, ...(ngDevMode ? [{ debugName: "lmValue" }] : []));
+    /** Default value for uncontrolled mode */
+    lmDefaultValue = input('', ...(ngDevMode ? [{ debugName: "lmDefaultValue" }] : []));
+    /** Visual style: underline, background, or pill */
+    lmStyle = input('underline', ...(ngDevMode ? [{ debugName: "lmStyle" }] : []));
+    /** Whether to lazy load panel content */
+    lmLazy = input(true, ...(ngDevMode ? [{ debugName: "lmLazy" }] : []));
+    /** Emits when selected tab changes */
+    lmValueChange = output();
+    /** Internal state for the selected value */
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Map of registered triggers for keyboard navigation */
+    triggers = new Map();
+    /** Ordered list of trigger values for navigation */
+    triggerOrder = [];
+    constructor() {
+        // Sync controlled value to internal state
+        effect(() => {
+            const controlled = this.lmValue();
+            const defaultVal = this.lmDefaultValue();
+            if (controlled !== null) {
+                this.value.set(controlled);
+            }
+            else if (this.value() === null && defaultVal) {
+                this.value.set(defaultVal);
+            }
+        });
+    }
+    /**
+     * Select a tab by value
+     */
+    select(tabValue) {
+        if (this.value() === tabValue)
+            return;
+        this.value.set(tabValue);
+        this.lmValueChange.emit(tabValue);
+    }
+    /**
+     * Register a trigger element for keyboard navigation
+     */
+    registerTrigger(tabValue, element) {
+        this.triggers.set(tabValue, element);
+        if (!this.triggerOrder.includes(tabValue)) {
+            this.triggerOrder.push(tabValue);
+        }
+    }
+    /**
+     * Unregister a trigger element
+     */
+    unregisterTrigger(tabValue) {
+        this.triggers.delete(tabValue);
+        this.triggerOrder = this.triggerOrder.filter((v) => v !== tabValue);
+    }
+    /**
+     * Get all registered triggers
+     */
+    getTriggers() {
+        return this.triggers;
+    }
+    /**
+     * Focus next trigger in the list
+     */
+    focusNextTrigger() {
+        const currentIndex = this.getCurrentTriggerIndex();
+        const nextIndex = (currentIndex + 1) % this.triggerOrder.length;
+        this.focusTriggerAtIndex(nextIndex);
+    }
+    /**
+     * Focus previous trigger in the list
+     */
+    focusPreviousTrigger() {
+        const currentIndex = this.getCurrentTriggerIndex();
+        const prevIndex = currentIndex <= 0 ? this.triggerOrder.length - 1 : currentIndex - 1;
+        this.focusTriggerAtIndex(prevIndex);
+    }
+    /**
+     * Focus first trigger
+     */
+    focusFirstTrigger() {
+        this.focusTriggerAtIndex(0);
+    }
+    /**
+     * Focus last trigger
+     */
+    focusLastTrigger() {
+        this.focusTriggerAtIndex(this.triggerOrder.length - 1);
+    }
+    getCurrentTriggerIndex() {
+        const currentValue = this.value();
+        return currentValue ? this.triggerOrder.indexOf(currentValue) : 0;
+    }
+    focusTriggerAtIndex(index) {
+        const value = this.triggerOrder[index];
+        const element = this.triggers.get(value);
+        if (element) {
+            element.focus();
+            this.select(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: TabsComponent, isStandalone: true, selector: "luma-tabs", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: false, transformFunction: null }, lmDefaultValue: { classPropertyName: "lmDefaultValue", publicName: "lmDefaultValue", isSignal: true, isRequired: false, transformFunction: null }, lmStyle: { classPropertyName: "lmStyle", publicName: "lmStyle", isSignal: true, isRequired: false, transformFunction: null }, lmLazy: { classPropertyName: "lmLazy", publicName: "lmLazy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmValueChange: "lmValueChange" }, host: { properties: { "class": "\"block w-full\"" } }, providers: [
+            {
+                provide: TABS_GROUP,
+                useExisting: TabsComponent,
+            },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-tabs',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TABS_GROUP,
+                            useExisting: TabsComponent,
+                        },
+                    ],
+                    host: {
+                        '[class]': '"block w-full"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { lmValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmValue", required: false }] }], lmDefaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDefaultValue", required: false }] }], lmStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmStyle", required: false }] }], lmLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmLazy", required: false }] }], lmValueChange: [{ type: i0.Output, args: ["lmValueChange"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class TabsListDirective {
+    elementRef = inject((ElementRef));
+    tabsGroup = inject(TABS_GROUP);
+    /** Whether horizontal scrolling is enabled */
+    lmScrollable = false;
+    classes = computed(() => tabsListVariants({
+        style: this.tabsGroup.lmStyle(),
+        scrollable: this.lmScrollable,
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    /**
+     * Get the currently active trigger element
+     */
+    getActiveTrigger() {
+        const currentValue = this.tabsGroup.value();
+        if (!currentValue)
+            return null;
+        const triggers = this.tabsGroup.getTriggers();
+        return triggers.get(currentValue) || null;
+    }
+    /**
+     * Handle mouse wheel for horizontal scroll
+     */
+    onWheel(event) {
+        if (this.lmScrollable) {
+            event.preventDefault();
+            this.elementRef.nativeElement.scrollLeft += event.deltaY;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: TabsListDirective, isStandalone: true, selector: "[lumaTabsList]", host: { attributes: { "role": "tablist" }, listeners: { "wheel": "onWheel($event)" }, properties: { "attr.aria-orientation": "\"horizontal\"", "class": "classes()" } }, providers: [
+            {
+                provide: TABS_LIST,
+                useExisting: TabsListDirective,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaTabsList]',
+                    providers: [
+                        {
+                            provide: TABS_LIST,
+                            useExisting: TabsListDirective,
+                        },
+                    ],
+                    host: {
+                        role: 'tablist',
+                        '[attr.aria-orientation]': '"horizontal"',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { onWheel: [{
+                type: HostListener,
+                args: ['wheel', ['$event']]
+            }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class TabsTriggerDirective {
+    el = inject((ElementRef));
+    tabsGroup = inject(TABS_GROUP);
+    /** Tab value identifier */
+    lumaTabsTrigger = input.required(...(ngDevMode ? [{ debugName: "lumaTabsTrigger" }] : []));
+    /** Whether this trigger is disabled */
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    /** Computed: whether this tab is selected */
+    isSelected = computed(() => this.tabsGroup.value() === this.lumaTabsTrigger(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    /** Computed: ID for the trigger element */
+    triggerId = computed(() => `tab-trigger-${this.lumaTabsTrigger()}`, ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
+    /** Computed: ID for the corresponding panel */
+    panelId = computed(() => `tab-panel-${this.lumaTabsTrigger()}`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /** Computed: CSS classes from CVA */
+    classes = computed(() => tabsTriggerVariants({
+        style: this.tabsGroup.lmStyle(),
+        selected: this.isSelected(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    ngOnInit() {
+        this.tabsGroup.registerTrigger(this.lumaTabsTrigger(), this.el.nativeElement);
+    }
+    ngOnDestroy() {
+        this.tabsGroup.unregisterTrigger(this.lumaTabsTrigger());
+    }
+    onClick() {
+        if (this.lmDisabled())
+            return;
+        this.tabsGroup.select(this.lumaTabsTrigger());
+    }
+    onKeydown(event) {
+        if (this.lmDisabled())
+            return;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this.tabsGroup.focusNextTrigger();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.tabsGroup.focusPreviousTrigger();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.tabsGroup.focusFirstTrigger();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.tabsGroup.focusLastTrigger();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.tabsGroup.select(this.lumaTabsTrigger());
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: TabsTriggerDirective, isStandalone: true, selector: "[lumaTabsTrigger]", inputs: { lumaTabsTrigger: { classPropertyName: "lumaTabsTrigger", publicName: "lumaTabsTrigger", isSignal: true, isRequired: true, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.id": "triggerId()", "attr.aria-selected": "isSelected()", "attr.aria-controls": "panelId()", "attr.tabindex": "isSelected() ? 0 : -1", "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaTabsTrigger]',
+                    host: {
+                        role: 'tab',
+                        '[attr.id]': 'triggerId()',
+                        '[attr.aria-selected]': 'isSelected()',
+                        '[attr.aria-controls]': 'panelId()',
+                        '[attr.tabindex]': 'isSelected() ? 0 : -1',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { lumaTabsTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "lumaTabsTrigger", required: true }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class TabsPanelDirective {
+    tabsGroup = inject(TABS_GROUP);
+    templateRef = inject((TemplateRef), {
+        optional: true,
+    });
+    viewContainer = inject(ViewContainerRef);
+    /** Panel value identifier */
+    lumaTabsPanel = input.required(...(ngDevMode ? [{ debugName: "lumaTabsPanel" }] : []));
+    /** Track if panel has ever been selected (for lazy loading cache) */
+    hasBeenSelected = signal(false, ...(ngDevMode ? [{ debugName: "hasBeenSelected" }] : []));
+    /** Computed: whether this panel is currently selected */
+    isSelected = computed(() => this.tabsGroup.value() === this.lumaTabsPanel(), ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+    /** Computed: whether this panel should be visible/rendered */
+    isVisible = computed(() => {
+        const selected = this.isSelected();
+        const lazy = this.tabsGroup.lmLazy();
+        // If lazy loading is disabled, always show selected panel
+        if (!lazy)
+            return selected;
+        // With lazy loading: render if ever selected, but only show if currently selected
+        return this.hasBeenSelected() && selected;
+    }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    /** Computed: whether content should be rendered (for lazy loading) */
+    shouldRender = computed(() => {
+        const lazy = this.tabsGroup.lmLazy();
+        return lazy ? this.hasBeenSelected() : true;
+    }, ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
+    /** Computed: ID for the panel element */
+    panelId = computed(() => `tab-panel-${this.lumaTabsPanel()}`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    /** Computed: ID for the corresponding trigger */
+    triggerId = computed(() => `tab-trigger-${this.lumaTabsPanel()}`, ...(ngDevMode ? [{ debugName: "triggerId" }] : []));
+    /** Computed: CSS classes from CVA */
+    classes = computed(() => tabsPanelVariants({
+        visible: this.isVisible(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    constructor() {
+        // Track when panel is selected for lazy loading cache
+        effect(() => {
+            if (this.isSelected() && !this.hasBeenSelected()) {
+                this.hasBeenSelected.set(true);
+            }
+        });
+        // Handle template-based lazy loading
+        effect(() => {
+            if (this.templateRef && this.shouldRender()) {
+                if (this.viewContainer.length === 0) {
+                    this.viewContainer.createEmbeddedView(this.templateRef);
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: TabsPanelDirective, isStandalone: true, selector: "[lumaTabsPanel]", inputs: { lumaTabsPanel: { classPropertyName: "lumaTabsPanel", publicName: "lumaTabsPanel", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.id": "panelId()", "attr.aria-labelledby": "triggerId()", "attr.tabindex": "0", "class": "classes()", "hidden": "!isVisible()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaTabsPanel]',
+                    host: {
+                        role: 'tabpanel',
+                        '[attr.id]': 'panelId()',
+                        '[attr.aria-labelledby]': 'triggerId()',
+                        '[attr.tabindex]': '0',
+                        '[class]': 'classes()',
+                        '[hidden]': '!isVisible()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { lumaTabsPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lumaTabsPanel", required: true }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class TabsIndicatorComponent {
+    platformId = inject(PLATFORM_ID);
+    tabsGroup = inject(TABS_GROUP);
+    tabsList = inject(TABS_LIST);
+    /** Indicator width in pixels */
+    indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
+    /** Indicator X or Y position */
+    indicatorPosition = signal(0, ...(ngDevMode ? [{ debugName: "indicatorPosition" }] : []));
+    /** Resize observer for recalculating position */
+    resizeObserver = null;
+    /** Computed: CSS classes from CVA */
+    classes = computed(() => {
+        const style = this.tabsGroup.lmStyle();
+        // Only show indicator for underline style
+        const isVisible = style === 'underline';
+        return tabsIndicatorVariants({
+            visible: isVisible,
+        });
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    /** Computed: CSS transform for positioning */
+    indicatorTransform = computed(() => {
+        return `translateX(${this.indicatorPosition()}px)`;
+    }, ...(ngDevMode ? [{ debugName: "indicatorTransform" }] : []));
+    constructor() {
+        // Update indicator position when selection changes
+        effect(() => {
+            // Read the value to track changes
+            this.tabsGroup.value();
+            // Defer position calculation to ensure DOM is ready
+            if (isPlatformBrowser(this.platformId)) {
+                // Use setTimeout to ensure triggers are registered
+                setTimeout(() => this.updateIndicatorPosition(), 0);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Initial position calculation with delay to ensure triggers are registered
+        setTimeout(() => this.updateIndicatorPosition(), 0);
+        // Watch for container resize
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateIndicatorPosition();
+        });
+        this.resizeObserver.observe(this.tabsList.elementRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    updateIndicatorPosition() {
+        const activeTrigger = this.tabsList.getActiveTrigger();
+        if (!activeTrigger) {
+            this.indicatorWidth.set(0);
+            return;
+        }
+        const triggerRect = activeTrigger.getBoundingClientRect();
+        const listRect = this.tabsList.elementRef.nativeElement.getBoundingClientRect();
+        // Horizontal positioning
+        this.indicatorPosition.set(triggerRect.left - listRect.left);
+        this.indicatorWidth.set(triggerRect.width);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: TabsIndicatorComponent, isStandalone: true, selector: "luma-tabs-indicator", host: { properties: { "class": "classes()", "style.width.px": "indicatorWidth()", "style.transform": "indicatorTransform()" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: TabsIndicatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-tabs-indicator',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.width.px]': 'indicatorWidth()',
+                        '[style.transform]': 'indicatorTransform()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Injection token for modal context
+ * Allows child components to access parent modal state
+ */
+const MODAL_CONTEXT = new InjectionToken('ModalContext');
+
+let uniqueId = 0;
+/**
+ * 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>
+ * ```
+ */
+class ModalComponent {
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    /** Controlled open state (null = uncontrolled mode) */
+    lmOpen = input(null, ...(ngDevMode ? [{ debugName: "lmOpen" }] : []));
+    /** Default open state for uncontrolled mode */
+    lmDefaultOpen = input(false, ...(ngDevMode ? [{ debugName: "lmDefaultOpen" }] : []));
+    /** Size variant */
+    lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    /** Close when clicking the overlay */
+    lmCloseOnOverlay = input(true, ...(ngDevMode ? [{ debugName: "lmCloseOnOverlay" }] : []));
+    /** Close when pressing Escape key */
+    lmCloseOnEscape = input(true, ...(ngDevMode ? [{ debugName: "lmCloseOnEscape" }] : []));
+    /** Emits when open state changes */
+    lmOpenChange = output();
+    /** Internal open state for uncontrolled mode */
+    internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
+    /** Unique modal ID for accessibility */
+    modalId = `modal-${uniqueId++}`;
+    /** Previously focused element for focus restoration */
+    previouslyFocused = null;
+    /** Escape key handler */
+    escapeHandler = null;
+    /** Computed: current open state (controlled or uncontrolled) */
+    isOpen = computed(() => {
+        const controlled = this.lmOpen();
+        return controlled !== null ? controlled : this.internalOpen();
+    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    /** Computed: size signal for context */
+    size = computed(() => this.lmSize(), ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Computed: closeOnOverlay signal for context */
+    closeOnOverlay = computed(() => this.lmCloseOnOverlay(), ...(ngDevMode ? [{ debugName: "closeOnOverlay" }] : []));
+    /** Computed: closeOnEscape signal for context */
+    closeOnEscape = computed(() => this.lmCloseOnEscape(), ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
+    constructor() {
+        // Initialize uncontrolled mode with default value
+        effect(() => {
+            if (this.lmOpen() === null) {
+                this.internalOpen.set(this.lmDefaultOpen());
+            }
+        });
+        // Handle body scroll lock and escape key
+        effect(() => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            if (this.isOpen()) {
+                this.lockBodyScroll();
+                this.registerEscapeHandler();
+                this.storeFocus();
+            }
+            else {
+                // Delay scroll unlock to allow fade animation to complete (250ms)
+                setTimeout(() => this.unlockBodyScroll(), 250);
+                this.unregisterEscapeHandler();
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.unlockBodyScroll();
+            this.unregisterEscapeHandler();
+        }
+    }
+    /**
+     * Open the modal
+     */
+    open() {
+        if (this.lmOpen() === null) {
+            this.internalOpen.set(true);
+        }
+        this.lmOpenChange.emit(true);
+    }
+    /**
+     * Close the modal
+     */
+    close() {
+        if (this.lmOpen() === null) {
+            this.internalOpen.set(false);
+        }
+        this.lmOpenChange.emit(false);
+        this.restoreFocus();
+    }
+    storeFocus() {
+        this.previouslyFocused = this.document.activeElement;
+    }
+    restoreFocus() {
+        if (this.previouslyFocused &&
+            typeof this.previouslyFocused.focus === 'function') {
+            // Use setTimeout to ensure DOM has updated
+            setTimeout(() => {
+                this.previouslyFocused?.focus();
+                this.previouslyFocused = null;
+            }, 0);
+        }
+    }
+    lockBodyScroll() {
+        const body = this.document.body;
+        const scrollbarWidth = window.innerWidth - this.document.documentElement.clientWidth;
+        body.style.overflow = 'hidden';
+        body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    unlockBodyScroll() {
+        const body = this.document.body;
+        body.style.overflow = '';
+        body.style.paddingRight = '';
+    }
+    registerEscapeHandler() {
+        if (this.escapeHandler)
+            return;
+        this.escapeHandler = (event) => {
+            if (event.key === 'Escape' && this.lmCloseOnEscape()) {
+                event.preventDefault();
+                this.close();
+            }
+        };
+        this.document.addEventListener('keydown', this.escapeHandler);
+    }
+    unregisterEscapeHandler() {
+        if (this.escapeHandler) {
+            this.document.removeEventListener('keydown', this.escapeHandler);
+            this.escapeHandler = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ModalComponent, isStandalone: true, selector: "luma-modal", inputs: { lmOpen: { classPropertyName: "lmOpen", publicName: "lmOpen", isSignal: true, isRequired: false, transformFunction: null }, lmDefaultOpen: { classPropertyName: "lmDefaultOpen", publicName: "lmDefaultOpen", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmCloseOnOverlay: { classPropertyName: "lmCloseOnOverlay", publicName: "lmCloseOnOverlay", isSignal: true, isRequired: false, transformFunction: null }, lmCloseOnEscape: { classPropertyName: "lmCloseOnEscape", publicName: "lmCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmOpenChange: "lmOpenChange" }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, providers: [
+            {
+                provide: MODAL_CONTEXT,
+                useExisting: ModalComponent,
+            },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-modal',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: MODAL_CONTEXT,
+                            useExisting: ModalComponent,
+                        },
+                    ],
+                    host: {
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { lmOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmOpen", required: false }] }], lmDefaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDefaultOpen", required: false }] }], lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }], lmCloseOnOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmCloseOnOverlay", required: false }] }], lmCloseOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmCloseOnEscape", required: false }] }], lmOpenChange: [{ type: i0.Output, args: ["lmOpenChange"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class ModalOverlayComponent {
+    modal = inject(MODAL_CONTEXT);
+    /** Computed classes from CVA */
+    classes = computed(() => modalOverlayVariants({
+        open: this.modal.isOpen(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    /**
+     * Handle click on overlay (not on children)
+     */
+    onOverlayClick(event) {
+        // Only close if clicking directly on overlay, not on children
+        if (event.target === event.currentTarget && this.modal.closeOnOverlay()) {
+            this.modal.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: ModalOverlayComponent, isStandalone: true, selector: "luma-modal-overlay", host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalOverlayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-modal-overlay',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '(click)': 'onOverlayClick($event)',
+                    },
+                }]
+        }] });
+
+/** Focusable elements selector */
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+/**
+ * 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>
+ * ```
+ */
+class ModalContainerComponent {
+    modal = inject(MODAL_CONTEXT);
+    elementRef = inject((ElementRef));
+    platformId = inject(PLATFORM_ID);
+    /** Focus trap keydown handler */
+    focusTrapHandler = null;
+    /** ID for aria-labelledby */
+    titleId = computed(() => `${this.modal.modalId}-title`, ...(ngDevMode ? [{ debugName: "titleId" }] : []));
+    /** Computed classes from CVA */
+    classes = computed(() => modalContainerVariants({
+        size: this.modal.size(),
+        open: this.modal.isOpen(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    constructor() {
+        // Focus first focusable element when modal opens
+        effect(() => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            if (this.modal.isOpen()) {
+                // Use setTimeout to ensure content is rendered
+                setTimeout(() => this.focusFirstElement(), 0);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.setupFocusTrap();
+        }
+    }
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.removeFocusTrap();
+        }
+    }
+    /**
+     * Get all focusable elements within the modal
+     */
+    getFocusableElements() {
+        const elements = this.elementRef.nativeElement.querySelectorAll(FOCUSABLE_SELECTOR);
+        const elementsArray = Array.from(elements);
+        return elementsArray.filter((el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1');
+    }
+    /**
+     * Focus the first focusable element
+     */
+    focusFirstElement() {
+        const focusable = this.getFocusableElements();
+        if (focusable.length > 0) {
+            focusable[0].focus();
+        }
+        else {
+            // If no focusable elements, focus the container itself
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    /**
+     * Setup focus trap to keep focus within modal
+     */
+    setupFocusTrap() {
+        this.focusTrapHandler = (event) => {
+            if (event.key !== 'Tab' || !this.modal.isOpen())
+                return;
+            const focusable = this.getFocusableElements();
+            if (focusable.length === 0)
+                return;
+            const firstElement = focusable[0];
+            const lastElement = focusable[focusable.length - 1];
+            // Shift+Tab on first element -> focus last
+            if (event.shiftKey && document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+            // Tab on last element -> focus first
+            else if (!event.shiftKey && document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        };
+        this.elementRef.nativeElement.addEventListener('keydown', this.focusTrapHandler);
+    }
+    /**
+     * Remove focus trap handler
+     */
+    removeFocusTrap() {
+        if (this.focusTrapHandler) {
+            this.elementRef.nativeElement.removeEventListener('keydown', this.focusTrapHandler);
+            this.focusTrapHandler = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: ModalContainerComponent, isStandalone: true, selector: "luma-modal-container", host: { attributes: { "role": "dialog" }, properties: { "attr.aria-modal": "true", "attr.aria-labelledby": "titleId()", "class": "classes()", "attr.data-state": "modal.isOpen() ? \"open\" : \"closed\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-modal-container',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: 'dialog',
+                        '[attr.aria-modal]': 'true',
+                        '[attr.aria-labelledby]': 'titleId()',
+                        '[class]': 'classes()',
+                        '[attr.data-state]': 'modal.isOpen() ? "open" : "closed"',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * 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>
+ * ```
+ */
+class ModalHeaderDirective {
+    /** Computed classes from CVA */
+    classes = computed(() => modalHeaderVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ModalHeaderDirective, isStandalone: true, selector: "[lumaModalHeader]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaModalHeader]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+
+/**
+ * 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>
+ * ```
+ */
+class ModalTitleDirective {
+    modal = inject(MODAL_CONTEXT);
+    /** Title size variant */
+    lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    /** ID for aria-labelledby connection */
+    titleId = computed(() => `${this.modal.modalId}-title`, ...(ngDevMode ? [{ debugName: "titleId" }] : []));
+    /** Computed classes from CVA */
+    classes = computed(() => modalTitleVariants({
+        size: this.lmSize(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ModalTitleDirective, isStandalone: true, selector: "[lumaModalTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "titleId()", "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaModalTitle]',
+                    host: {
+                        '[attr.id]': 'titleId()',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class ModalContentDirective {
+    /** Enable scroll when content overflows */
+    lmScrollable = input(true, ...(ngDevMode ? [{ debugName: "lmScrollable" }] : []));
+    /** Computed classes from CVA */
+    classes = computed(() => modalContentVariants({
+        scrollable: this.lmScrollable(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ModalContentDirective, isStandalone: true, selector: "[lumaModalContent]", inputs: { lmScrollable: { classPropertyName: "lmScrollable", publicName: "lmScrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaModalContent]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { lmScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmScrollable", required: false }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class ModalFooterDirective {
+    /** Alignment of footer content */
+    lmAlign = input('end', ...(ngDevMode ? [{ debugName: "lmAlign" }] : []));
+    /** Computed classes from CVA */
+    classes = computed(() => modalFooterVariants({
+        align: this.lmAlign(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ModalFooterDirective, isStandalone: true, selector: "[lumaModalFooter]", inputs: { lmAlign: { classPropertyName: "lmAlign", publicName: "lmAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaModalFooter]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { lmAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmAlign", required: false }] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class ModalCloseComponent {
+    modal = inject(MODAL_CONTEXT);
+    /** Accessible label for the close button */
+    lmAriaLabel = input('Close modal', ...(ngDevMode ? [{ debugName: "lmAriaLabel" }] : []));
+    /** Computed aria label */
+    ariaLabel = computed(() => this.lmAriaLabel(), ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Computed classes from CVA */
+    classes = computed(() => modalCloseVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ModalCloseComponent, isStandalone: true, selector: "luma-modal-close", inputs: { lmAriaLabel: { classPropertyName: "lmAriaLabel", publicName: "lmAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [attr.aria-label]="ariaLabel()"
+      [class]="classes()"
+      (click)="modal.close()"
+    >
+      <ng-content>
+        <svg
+          viewBox="0 0 24 24"
+          class="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </ng-content>
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ModalCloseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-modal-close',
+                    template: `
+    <button
+      type="button"
+      [attr.aria-label]="ariaLabel()"
+      [class]="classes()"
+      (click)="modal.close()"
+    >
+      <ng-content>
+        <svg
+          viewBox="0 0 24 24"
+          class="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </ng-content>
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'contents',
+                    },
+                }]
+        }], propDecorators: { lmAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmAriaLabel", required: false }] }] } });
+
+// Modal Component & Directives
+
 // Button exports
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardHeaderDirective, CardTitleDirective };
+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 };
 //# sourceMappingURL=lumaui-angular.mjs.map