@lumaui/angular 0.1.4 → 0.2.1

package/fesm2022/lumaui-angular.mjs

@@ -1,8 +1,12 @@
 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, ApplicationRef, Injector, createComponent, Injectable } 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, toastCloseVariants, toastItemVariants, toastIconVariants, toastContentVariants, toastTitleVariants, toastMessageVariants, toastContainerVariants } from '@lumaui/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { Subject, interval } from 'rxjs';
+import { takeWhile, filter } from 'rxjs/operators';
 
-class ButtonDirective {
+class LmButtonDirective {
     // Signal-based inputs with lm prefix (Angular 20+)
     lmVariant = input('primary', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
     lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
@@ -16,10 +20,10 @@ class ButtonDirective {
     get hostClasses() {
         return this.classes();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ButtonDirective, isStandalone: true, selector: "button[lumaButton], a[lumaButton]", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmType: { classPropertyName: "lmType", publicName: "lmType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "lmType()", "attr.disabled": "lmDisabled() ? \"\" : null", "class": "this.hostClasses" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmButtonDirective, isStandalone: true, selector: "button[lumaButton], a[lumaButton]", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmType: { classPropertyName: "lmType", publicName: "lmType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type": "lmType()", "attr.disabled": "lmDisabled() ? \"\" : null", "class": "this.hostClasses" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[lumaButton], a[lumaButton]',
@@ -33,7 +37,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['class']
             }] } });
 
-class CardComponent {
+class LmBadgeDirective {
+    // 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: LmBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmBadgeDirective, isStandalone: true, selector: "[lumaBadge]", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaBadge]',
+                }]
+        }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class LmCardComponent {
     /**
      * Card visual style variant
      * - default: Gradient border wrapper style (default)
@@ -45,23 +68,23 @@ class CardComponent {
     // Computed class strings based on variant
     wrapperClasses = computed(() => cardVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
     contentClasses = computed(() => cardContentVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: CardComponent, isStandalone: true, selector: "luma-card", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n  <div [class]=\"contentClasses()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmCardComponent, isStandalone: true, selector: "luma-card", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\n  <div [class]=\"contentClasses()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'luma-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClasses()\">\n  <div [class]=\"contentClasses()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }] } });
 
-class CardTitleDirective {
+class LmCardTitleDirective {
     // Signal-based inputs with lm prefix (Angular 20+)
     lmSize = input('normal', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
     // Computed class string
     classes = computed(() => cardTitleVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: CardTitleDirective, isStandalone: true, selector: "[lumaCardTitle]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmCardTitleDirective, isStandalone: true, selector: "[lumaCardTitle]", 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: CardTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lumaCardTitle]',
@@ -71,15 +94,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
 
-class CardDescriptionDirective {
+class LmCardDescriptionDirective {
     // Signal-based inputs with lm prefix (Angular 20+)
     lmSize = input('normal', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
     // Computed class string
     classes = computed(() => cardDescriptionVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: CardDescriptionDirective, isStandalone: true, selector: "[lumaCardDescription]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmCardDescriptionDirective, isStandalone: true, selector: "[lumaCardDescription]", 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: CardDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lumaCardDescription]',
@@ -89,11 +112,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
 
-class CardHeaderDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: CardHeaderDirective, isStandalone: true, selector: "[lumaCardHeader]", host: { classAttribute: "mb-4" }, ngImport: i0 });
+class LmCardHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmCardHeaderDirective, isStandalone: true, selector: "[lumaCardHeader]", host: { classAttribute: "mb-4" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lumaCardHeader]',
@@ -103,11 +126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
-class CardContentDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: CardContentDirective, isStandalone: true, selector: "[lumaCardContent]", ngImport: i0 });
+class LmCardContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmCardContentDirective, isStandalone: true, selector: "[lumaCardContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lumaCardContent]',
@@ -117,11 +140,2518 @@ 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 LmAccordionGroupComponent {
+    /**
+     * 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: LmAccordionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmAccordionGroupComponent, 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: LmAccordionGroupComponent, 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 LmAccordionItemComponent {
+    group = inject(LmAccordionGroupComponent, { 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: LmAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmAccordionItemComponent, 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: LmAccordionItemComponent },
+        ], 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: LmAccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'luma-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: ACCORDION_ITEM, useExisting: LmAccordionItemComponent },
+                    ], 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 LmAccordionTriggerDirective {
+    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: LmAccordionTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmAccordionTriggerDirective, 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: LmAccordionTriggerDirective, 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 LmAccordionTitleDirective {
+    /**
+     * 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: LmAccordionTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmAccordionTitleDirective, 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: LmAccordionTitleDirective, 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 LmAccordionIconDirective {
+    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: LmAccordionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmAccordionIconDirective, 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: LmAccordionIconDirective, 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 LmAccordionContentDirective {
+    item = inject(ACCORDION_ITEM);
+    trigger = inject(LmAccordionTriggerDirective, { 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: LmAccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmAccordionContentDirective, 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: LmAccordionContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaAccordionContent]',
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'region',
+                        '[id]': 'contentId',
+                        '[attr.aria-labelledby]': 'triggerId()',
+                        '[attr.hidden]': '!item.isOpen() ? "" : null',
+                    },
+                }]
+        }] });
+
+class LmTooltipDirective {
+    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: LmTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmTooltipDirective, 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: LmTooltipDirective, 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 LmTabsComponent {
+    /** 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 */
+    lmVariant = input('underline', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
+    /** 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: LmTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmTabsComponent, 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 }, lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", 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: LmTabsComponent,
+            },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-tabs',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TABS_GROUP,
+                            useExisting: LmTabsComponent,
+                        },
+                    ],
+                    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 }] }], lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", 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 LmTabsListDirective {
+    elementRef = inject((ElementRef));
+    tabsGroup = inject(TABS_GROUP);
+    /** Whether horizontal scrolling is enabled */
+    lmScrollable = false;
+    classes = computed(() => tabsListVariants({
+        style: this.tabsGroup.lmVariant(),
+        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: LmTabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmTabsListDirective, isStandalone: true, selector: "[lumaTabsList]", host: { attributes: { "role": "tablist" }, listeners: { "wheel": "onWheel($event)" }, properties: { "attr.aria-orientation": "\"horizontal\"", "class": "classes()" } }, providers: [
+            {
+                provide: TABS_LIST,
+                useExisting: LmTabsListDirective,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaTabsList]',
+                    providers: [
+                        {
+                            provide: TABS_LIST,
+                            useExisting: LmTabsListDirective,
+                        },
+                    ],
+                    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 LmTabsTriggerDirective {
+    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.lmVariant(),
+        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: LmTabsTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmTabsTriggerDirective, 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: LmTabsTriggerDirective, 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 LmTabsPanelDirective {
+    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: LmTabsPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmTabsPanelDirective, 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: LmTabsPanelDirective, 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 LmTabsIndicatorComponent {
+    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.lmVariant();
+        // 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: LmTabsIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: LmTabsIndicatorComponent, 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: LmTabsIndicatorComponent, 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 LmModalComponent {
+    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: LmModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmModalComponent, 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: LmModalComponent,
+            },
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-modal',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: MODAL_CONTEXT,
+                            useExisting: LmModalComponent,
+                        },
+                    ],
+                    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 LmModalOverlayComponent {
+    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: LmModalOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: LmModalOverlayComponent, 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: LmModalOverlayComponent, 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 LmModalContainerComponent {
+    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: LmModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: LmModalContainerComponent, 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: LmModalContainerComponent, 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 LmModalHeaderDirective {
+    /** 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: LmModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmModalHeaderDirective, isStandalone: true, selector: "[lumaModalHeader]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmModalHeaderDirective, 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 LmModalTitleDirective {
+    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: LmModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmModalTitleDirective, 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: LmModalTitleDirective, 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 LmModalContentDirective {
+    /** 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: LmModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmModalContentDirective, 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: LmModalContentDirective, 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 LmModalFooterDirective {
+    /** 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: LmModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmModalFooterDirective, 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: LmModalFooterDirective, 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 LmModalCloseComponent {
+    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: LmModalCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmModalCloseComponent, 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: LmModalCloseComponent, 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
+
+/**
+ * Internal toast reference implementation
+ */
+class ToastRefImpl {
+    id;
+    dismissFn;
+    _afterDismissed = new Subject();
+    constructor(id, dismissFn) {
+        this.id = id;
+        this.dismissFn = dismissFn;
+    }
+    dismiss() {
+        this.dismissFn(this.id);
+    }
+    get afterDismissed() {
+        return this._afterDismissed.asObservable();
+    }
+    /** @internal Called when toast is actually dismissed */
+    _notifyDismissed() {
+        this._afterDismissed.next();
+        this._afterDismissed.complete();
+    }
+}
+/**
+ * Default toast configuration
+ */
+const DEFAULT_TOAST_CONFIG = {
+    position: 'top-right',
+    duration: 5000,
+    dismissible: true,
+    maxVisible: 5,
+    pauseOnHover: true,
+};
+/**
+ * Injection token for global toast configuration
+ */
+const TOAST_CONFIG = new InjectionToken('ToastConfig', {
+    providedIn: 'root',
+    factory: () => DEFAULT_TOAST_CONFIG,
+});
+/**
+ * Provider function for custom toast configuration
+ */
+function provideToastConfig(config) {
+    return {
+        provide: TOAST_CONFIG,
+        useValue: { ...DEFAULT_TOAST_CONFIG, ...config },
+    };
+}
+
+/**
+ * ToastCloseComponent
+ *
+ * Close button for toast notifications.
+ * Styled according to the toast variant.
+ *
+ * @internal Used by ToastItemComponent
+ */
+class LmToastCloseComponent {
+    /** Toast variant for styling */
+    lmVariant = input('info', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
+    /** CSS classes */
+    classes = computed(() => toastCloseVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmToastCloseComponent, isStandalone: true, selector: "luma-toast-close", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "aria-label": "Close notification" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class="lm-size-toast-close"
+      aria-hidden="true"
+    >
+      <path
+        d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+      />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastCloseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-toast-close',
+                    template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class="lm-size-toast-close"
+      aria-hidden="true"
+    >
+      <path
+        d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+      />
+    </svg>
+  `,
+                    host: {
+                        type: 'button',
+                        '[class]': 'classes()',
+                        'aria-label': 'Close notification',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }] } });
+
+/**
+ * ToastItemComponent
+ *
+ * Individual toast notification with timer and icon.
+ *
+ * @internal Created by ToastContainerComponent
+ */
+class LmToastItemComponent {
+    /** Toast data */
+    toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : []));
+    /** Emits when toast should be dismissed */
+    dismiss = output();
+    /** Timer subscription */
+    timerSubscription = null;
+    /** Remaining time in ms */
+    remainingTime = signal(0, ...(ngDevMode ? [{ debugName: "remainingTime" }] : []));
+    /** Whether timer is paused */
+    isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
+    /** Animation state */
+    animationState = signal('entering', ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    /** Item CSS classes */
+    itemClasses = computed(() => toastItemVariants({
+        variant: this.toast().variant,
+        state: this.toast().isExiting ? 'exiting' : this.animationState(),
+    }), ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
+    /** Icon CSS classes */
+    iconClasses = computed(() => toastIconVariants({ variant: this.toast().variant }), ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    /** Content CSS classes */
+    contentClasses = computed(() => toastContentVariants(), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
+    /** Title CSS classes */
+    titleClasses = computed(() => toastTitleVariants(), ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
+    /** Message CSS classes */
+    messageClasses = computed(() => toastMessageVariants(), ...(ngDevMode ? [{ debugName: "messageClasses" }] : []));
+    /** Whether toast has interactive elements */
+    hasInteractiveElements = computed(() => this.toast().dismissible, ...(ngDevMode ? [{ debugName: "hasInteractiveElements" }] : []));
+    ngOnInit() {
+        // Start animation
+        requestAnimationFrame(() => {
+            this.animationState.set('visible');
+        });
+        // Start timer if duration > 0
+        const duration = this.toast().duration;
+        if (duration > 0) {
+            this.startTimer(duration);
+        }
+    }
+    ngOnDestroy() {
+        this.stopTimer();
+    }
+    /** Start auto-close timer */
+    startTimer(duration) {
+        this.remainingTime.set(duration);
+        this.timerSubscription = interval(100)
+            .pipe(takeWhile(() => this.remainingTime() > 0), filter(() => !this.isPaused()))
+            .subscribe(() => {
+            this.remainingTime.update((t) => t - 100);
+            if (this.remainingTime() <= 0) {
+                this.dismissToast();
+            }
+        });
+    }
+    /** Stop timer */
+    stopTimer() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+            this.timerSubscription = null;
+        }
+    }
+    /** Dismiss this toast */
+    dismissToast() {
+        this.dismiss.emit(this.toast().id);
+    }
+    /** Handle close button click */
+    onClose() {
+        this.dismissToast();
+    }
+    /** Pause timer on mouse enter */
+    onMouseEnter() {
+        if (this.toast().pauseOnHover) {
+            this.isPaused.set(true);
+        }
+    }
+    /** Resume timer on mouse leave */
+    onMouseLeave() {
+        this.isPaused.set(false);
+    }
+    /** Pause timer on focus */
+    onFocus() {
+        this.isPaused.set(true);
+    }
+    /** Resume timer on blur */
+    onBlur() {
+        this.isPaused.set(false);
+    }
+    /** Dismiss on Escape key */
+    onEscapeKey() {
+        if (this.toast().dismissible) {
+            this.dismissToast();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: LmToastItemComponent, isStandalone: true, selector: "luma-toast-item", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "keydown.escape": "onEscapeKey()" }, properties: { "class": "itemClasses()", "attr.role": "toast().role", "attr.aria-live": "toast().variant === \"error\" ? \"assertive\" : \"polite\"", "attr.aria-atomic": "\"true\"", "tabindex": "hasInteractiveElements() ? 0 : -1" } }, ngImport: i0, template: `
+    <!-- Icon -->
+    <div [class]="iconClasses()">
+      @switch (toast().variant) {
+        @case ('info') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+        @case ('success') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+        @case ('warning') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+        @case ('error') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+      }
+    </div>
+
+    <!-- Content -->
+    <div [class]="contentClasses()">
+      @if (toast().title) {
+        <div [class]="titleClasses()">{{ toast().title }}</div>
+      }
+      <div [class]="messageClasses()">{{ toast().message }}</div>
+    </div>
+
+    <!-- Close button -->
+    @if (toast().dismissible) {
+      <luma-toast-close [lmVariant]="toast().variant" (click)="onClose()" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: LmToastCloseComponent, selector: "luma-toast-close", inputs: ["lmVariant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-toast-item',
+                    template: `
+    <!-- Icon -->
+    <div [class]="iconClasses()">
+      @switch (toast().variant) {
+        @case ('info') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+        @case ('success') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+        @case ('warning') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+        @case ('error') {
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        }
+      }
+    </div>
+
+    <!-- Content -->
+    <div [class]="contentClasses()">
+      @if (toast().title) {
+        <div [class]="titleClasses()">{{ toast().title }}</div>
+      }
+      <div [class]="messageClasses()">{{ toast().message }}</div>
+    </div>
+
+    <!-- Close button -->
+    @if (toast().dismissible) {
+      <luma-toast-close [lmVariant]="toast().variant" (click)="onClose()" />
+    }
+  `,
+                    host: {
+                        '[class]': 'itemClasses()',
+                        '[attr.role]': 'toast().role',
+                        '[attr.aria-live]': 'toast().variant === "error" ? "assertive" : "polite"',
+                        '[attr.aria-atomic]': '"true"',
+                        '[tabindex]': 'hasInteractiveElements() ? 0 : -1',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(keydown.escape)': 'onEscapeKey()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [LmToastCloseComponent],
+                }]
+        }], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+
+/**
+ * ToastContainerComponent
+ *
+ * Fixed-position container that renders all active toasts.
+ * Supports all 6 positions simultaneously by grouping toasts by their position.
+ *
+ * @internal This component is created programmatically by ToastService
+ */
+class LmToastContainerComponent {
+    /** Toasts signal passed from ToastService */
+    _toasts;
+    /** Dismiss callback passed from ToastService */
+    _onDismiss;
+    /** Group toasts by their position */
+    toastsByPosition = computed(() => {
+        const groups = {
+            'top-left': [],
+            'top-center': [],
+            'top-right': [],
+            'bottom-left': [],
+            'bottom-center': [],
+            'bottom-right': [],
+        };
+        if (!this._toasts)
+            return groups;
+        for (const toast of this._toasts()) {
+            const position = toast.position;
+            if (groups[position]) {
+                groups[position].push(toast);
+            }
+        }
+        return groups;
+    }, ...(ngDevMode ? [{ debugName: "toastsByPosition" }] : []));
+    /** Get CSS classes for a specific position */
+    getPositionClasses(position) {
+        return toastContainerVariants({ position });
+    }
+    /** Handle dismiss event from toast item */
+    onDismiss(id) {
+        this._onDismiss?.(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: LmToastContainerComponent, isStandalone: true, selector: "luma-toast-container", ngImport: i0, template: `
+    <!-- Top Left -->
+    @if (toastsByPosition()['top-left'].length) {
+      <div
+        role="region"
+        aria-label="Top left notifications"
+        [class]="getPositionClasses('top-left')"
+      >
+        @for (toast of toastsByPosition()['top-left']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Top Center -->
+    @if (toastsByPosition()['top-center'].length) {
+      <div
+        role="region"
+        aria-label="Top center notifications"
+        [class]="getPositionClasses('top-center')"
+      >
+        @for (toast of toastsByPosition()['top-center']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Top Right -->
+    @if (toastsByPosition()['top-right'].length) {
+      <div
+        role="region"
+        aria-label="Top right notifications"
+        [class]="getPositionClasses('top-right')"
+      >
+        @for (toast of toastsByPosition()['top-right']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Bottom Left -->
+    @if (toastsByPosition()['bottom-left'].length) {
+      <div
+        role="region"
+        aria-label="Bottom left notifications"
+        [class]="getPositionClasses('bottom-left')"
+      >
+        @for (toast of toastsByPosition()['bottom-left']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Bottom Center -->
+    @if (toastsByPosition()['bottom-center'].length) {
+      <div
+        role="region"
+        aria-label="Bottom center notifications"
+        [class]="getPositionClasses('bottom-center')"
+      >
+        @for (toast of toastsByPosition()['bottom-center']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Bottom Right -->
+    @if (toastsByPosition()['bottom-right'].length) {
+      <div
+        role="region"
+        aria-label="Bottom right notifications"
+        [class]="getPositionClasses('bottom-right')"
+      >
+        @for (toast of toastsByPosition()['bottom-right']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: LmToastItemComponent, selector: "luma-toast-item", inputs: ["toast"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-toast-container',
+                    template: `
+    <!-- Top Left -->
+    @if (toastsByPosition()['top-left'].length) {
+      <div
+        role="region"
+        aria-label="Top left notifications"
+        [class]="getPositionClasses('top-left')"
+      >
+        @for (toast of toastsByPosition()['top-left']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Top Center -->
+    @if (toastsByPosition()['top-center'].length) {
+      <div
+        role="region"
+        aria-label="Top center notifications"
+        [class]="getPositionClasses('top-center')"
+      >
+        @for (toast of toastsByPosition()['top-center']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Top Right -->
+    @if (toastsByPosition()['top-right'].length) {
+      <div
+        role="region"
+        aria-label="Top right notifications"
+        [class]="getPositionClasses('top-right')"
+      >
+        @for (toast of toastsByPosition()['top-right']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Bottom Left -->
+    @if (toastsByPosition()['bottom-left'].length) {
+      <div
+        role="region"
+        aria-label="Bottom left notifications"
+        [class]="getPositionClasses('bottom-left')"
+      >
+        @for (toast of toastsByPosition()['bottom-left']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Bottom Center -->
+    @if (toastsByPosition()['bottom-center'].length) {
+      <div
+        role="region"
+        aria-label="Bottom center notifications"
+        [class]="getPositionClasses('bottom-center')"
+      >
+        @for (toast of toastsByPosition()['bottom-center']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+
+    <!-- Bottom Right -->
+    @if (toastsByPosition()['bottom-right'].length) {
+      <div
+        role="region"
+        aria-label="Bottom right notifications"
+        [class]="getPositionClasses('bottom-right')"
+      >
+        @for (toast of toastsByPosition()['bottom-right']; track toast.id) {
+          <luma-toast-item [toast]="toast" (dismiss)="onDismiss($event)" />
+        }
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [LmToastItemComponent],
+                }]
+        }] });
+
+/**
+ * ToastService
+ *
+ * Injectable service for showing toast notifications programmatically.
+ * Provides convenience methods for info, success, warning, and error toasts.
+ *
+ * @example
+ * ```typescript
+ * private toast = inject(ToastService);
+ *
+ * showSuccess() {
+ *   this.toast.success('Changes saved successfully!');
+ * }
+ *
+ * showError() {
+ *   this.toast.error('Failed to save', {
+ *     title: 'Error',
+ *     duration: 0
+ *   });
+ * }
+ * ```
+ */
+class LmToastService {
+    config = inject(TOAST_CONFIG);
+    appRef = inject(ApplicationRef);
+    injector = inject(Injector);
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    liveAnnouncer = inject(LiveAnnouncer);
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
+    containerRef = null;
+    nextId = 0;
+    toastRefs = new Map();
+    /** Observable list of current toasts */
+    toasts = computed(() => this._toasts(), ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    ngOnDestroy() {
+        this.destroyContainer();
+    }
+    /**
+     * Show a toast notification
+     * @param options - Toast configuration options
+     * @returns ToastRef for programmatic control
+     */
+    show(options) {
+        this.ensureContainer();
+        const toast = {
+            id: `toast-${this.nextId++}`,
+            message: options.message,
+            title: options.title ?? '',
+            variant: options.variant ?? 'info',
+            position: options.position ?? this.config.position,
+            duration: options.duration ?? this.config.duration,
+            dismissible: options.dismissible ?? this.config.dismissible,
+            pauseOnHover: options.pauseOnHover ?? this.config.pauseOnHover,
+            role: options.role ?? (options.variant === 'error' ? 'alert' : 'status'),
+            createdAt: Date.now(),
+            isExiting: false,
+        };
+        // Enforce max visible limit
+        const currentToasts = this._toasts();
+        if (currentToasts.length >= this.config.maxVisible) {
+            // Remove oldest toast
+            const oldest = currentToasts[0];
+            this.dismiss(oldest.id);
+        }
+        this._toasts.update((toasts) => [...toasts, toast]);
+        this.announceToast(toast);
+        const toastRef = new ToastRefImpl(toast.id, (id) => this.dismiss(id));
+        this.toastRefs.set(toast.id, toastRef);
+        return toastRef;
+    }
+    /**
+     * Show info toast
+     * @param message - Toast message
+     * @param options - Additional options
+     */
+    info(message, options) {
+        return this.show({ ...options, message, variant: 'info' });
+    }
+    /**
+     * Show success toast
+     * @param message - Toast message
+     * @param options - Additional options
+     */
+    success(message, options) {
+        return this.show({ ...options, message, variant: 'success' });
+    }
+    /**
+     * Show warning toast
+     * @param message - Toast message
+     * @param options - Additional options
+     */
+    warning(message, options) {
+        return this.show({ ...options, message, variant: 'warning' });
+    }
+    /**
+     * Show error toast
+     * @param message - Toast message
+     * @param options - Additional options
+     */
+    error(message, options) {
+        return this.show({ ...options, message, variant: 'error' });
+    }
+    /**
+     * Dismiss a specific toast
+     * @param id - Toast ID to dismiss
+     */
+    dismiss(id) {
+        // Mark as exiting for animation
+        this._toasts.update((toasts) => toasts.map((t) => (t.id === id ? { ...t, isExiting: true } : t)));
+        // Remove after animation completes (200ms)
+        setTimeout(() => {
+            this._toasts.update((toasts) => toasts.filter((t) => t.id !== id));
+            // Notify ref
+            const toastRef = this.toastRefs.get(id);
+            if (toastRef) {
+                toastRef._notifyDismissed();
+                this.toastRefs.delete(id);
+            }
+        }, 200);
+    }
+    /**
+     * Dismiss all toasts
+     */
+    dismissAll() {
+        const ids = this._toasts().map((t) => t.id);
+        ids.forEach((id) => this.dismiss(id));
+    }
+    /**
+     * Ensure toast container exists in DOM
+     */
+    ensureContainer() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        if (this.containerRef)
+            return;
+        this.containerRef = createComponent(LmToastContainerComponent, {
+            environmentInjector: this.appRef.injector,
+            elementInjector: this.injector,
+        });
+        // Pass toasts signal to container
+        this.containerRef.instance._toasts = this._toasts;
+        this.containerRef.instance._onDismiss = (id) => this.dismiss(id);
+        this.appRef.attachView(this.containerRef.hostView);
+        this.document.body.appendChild(this.containerRef.location.nativeElement);
+    }
+    /**
+     * Remove container from DOM
+     */
+    destroyContainer() {
+        if (this.containerRef) {
+            this.appRef.detachView(this.containerRef.hostView);
+            this.containerRef.destroy();
+            this.containerRef = null;
+        }
+    }
+    /**
+     * Announce toast to screen readers
+     */
+    announceToast(toast) {
+        const prefix = this.getVariantPrefix(toast.variant);
+        const message = toast.title
+            ? `${prefix}: ${toast.title}. ${toast.message}`
+            : `${prefix}: ${toast.message}`;
+        const politeness = toast.variant === 'error' ? 'assertive' : 'polite';
+        this.liveAnnouncer.announce(message, politeness);
+    }
+    /**
+     * Get announcement prefix for variant
+     */
+    getVariantPrefix(variant) {
+        const prefixes = {
+            info: 'Information',
+            success: 'Success',
+            warning: 'Warning',
+            error: 'Error',
+        };
+        return prefixes[variant];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// Toast public API
+
 // Button exports
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardHeaderDirective, CardTitleDirective };
+export { ACCORDION_ITEM, DEFAULT_TOAST_CONFIG, LmAccordionContentDirective, LmAccordionGroupComponent, LmAccordionIconDirective, LmAccordionItemComponent, LmAccordionTitleDirective, LmAccordionTriggerDirective, LmBadgeDirective, LmButtonDirective, LmCardComponent, LmCardContentDirective, LmCardDescriptionDirective, LmCardHeaderDirective, LmCardTitleDirective, LmModalCloseComponent, LmModalComponent, LmModalContainerComponent, LmModalContentDirective, LmModalFooterDirective, LmModalHeaderDirective, LmModalOverlayComponent, LmModalTitleDirective, LmTabsComponent, LmTabsIndicatorComponent, LmTabsListDirective, LmTabsPanelDirective, LmTabsTriggerDirective, LmToastCloseComponent, LmToastContainerComponent, LmToastItemComponent, LmToastService, LmTooltipDirective, MODAL_CONTEXT, TABS_GROUP, TABS_LIST, TOAST_CONFIG, provideToastConfig };
 //# sourceMappingURL=lumaui-angular.mjs.map