@lumaui/angular 0.2.3 → 0.3.2

package/fesm2022/lumaui-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/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 { input, computed, HostBinding, Directive, ChangeDetectionStrategy, Component, output, InjectionToken, inject, ElementRef, Renderer2, effect, signal, HostListener, PLATFORM_ID, NgZone, viewChild, TemplateRef, ViewContainerRef, ApplicationRef, Injector, createComponent, Injectable } from '@angular/core';
+import { buttonVariants, badgeVariants, cardVariants, cardTitleVariants, cardDescriptionVariants, cardHeaderVariants, cardContentVariants, accordionItemVariants, accordionContentWrapperVariants, accordionTriggerVariants, accordionTitleVariants, accordionIconVariants, accordionContentVariants, tooltipVariants, tabsListVariants, tabsScrollArrowVariants, tabsTriggerVariants, tabsPanelVariants, tabsIndicatorVariants, modalOverlayVariants, modalContainerVariants, modalHeaderVariants, modalTitleVariants, modalContentVariants, modalFooterVariants, modalCloseVariants, toastCloseVariants, toastItemVariants, toastIconVariants, toastContentVariants, toastTitleVariants, toastMessageVariants, toastContainerVariants } from '@lumaui/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Subject, interval } from 'rxjs';
 import { takeWhile, filter } from 'rxjs/operators';
 
@@ -9,18 +9,20 @@ class LmButtonDirective {
     // Signal-based inputs with lm prefix (Angular 20+)
     lmVariant = input('primary', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
     lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    lmRadius = input('default', ...(ngDevMode ? [{ debugName: "lmRadius" }] : []));
     lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
     lmType = input('button', ...(ngDevMode ? [{ debugName: "lmType" }] : []));
     // Computed class string
     classes = computed(() => buttonVariants({
         variant: this.lmVariant(),
         size: this.lmSize(),
+        radius: this.lmRadius(),
     }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     get hostClasses() {
         return this.classes();
     }
     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 });
+    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 }, lmRadius: { classPropertyName: "lmRadius", publicName: "lmRadius", 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: LmButtonDirective, decorators: [{
             type: Directive,
@@ -31,26 +33,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         '[attr.disabled]': 'lmDisabled() ? "" : null',
                     },
                 }]
-        }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }], lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmType: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmType", required: false }] }], hostClasses: [{
+        }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }], lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }], lmRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRadius", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmType: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmType", required: false }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class LmBadgeDirective {
-    // Computed class string - layout only, no variants
-    classes = computed(() => badgeVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    // Signal-based inputs with lm prefix (Angular 20+)
+    lmVariant = input('default', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
+    lmRadius = input('default', ...(ngDevMode ? [{ debugName: "lmRadius" }] : []));
+    // Computed class string
+    classes = computed(() => badgeVariants({
+        variant: this.lmVariant(),
+        radius: this.lmRadius(),
+    }), ...(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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmBadgeDirective, isStandalone: true, selector: "[lumaBadge]", inputs: { lmVariant: { classPropertyName: "lmVariant", publicName: "lmVariant", isSignal: true, isRequired: false, transformFunction: null }, lmRadius: { classPropertyName: "lmRadius", publicName: "lmRadius", isSignal: true, isRequired: false, transformFunction: null } }, 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: [{
+        }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }], lmRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRadius", required: false }] }], hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -58,26 +66,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 class LmCardComponent {
     /**
      * Card visual style variant
-     * - default: Gradient border wrapper style (default)
-     * - shadow: Elevated card with shadow for primary content
-     * - nested: Subtle background for sections within cards
-     * - preview: For documentation examples
+     * - default: Simple border card
+     * - elevated: Card with shadow elevation
+     * - subtle: Muted background card
      */
     lmVariant = input('default', ...(ngDevMode ? [{ debugName: "lmVariant" }] : []));
-    // Computed class strings based on variant
-    wrapperClasses = computed(() => cardVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
-    contentClasses = computed(() => cardContentVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
+    // Computed class string based on variant
+    classes = computed(() => cardVariants({ variant: this.lmVariant() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     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 });
+    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]=\"classes()\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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" }]
+            args: [{ selector: 'luma-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classes()\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { lmVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmVariant", required: false }] }] } });
 
 class LmCardTitleDirective {
     // Signal-based inputs with lm prefix (Angular 20+)
-    lmSize = input('normal', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    lmSize = input('md', ...(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: LmCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -95,7 +101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 class LmCardDescriptionDirective {
     // Signal-based inputs with lm prefix (Angular 20+)
-    lmSize = input('normal', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    lmSize = input('md', ...(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: LmCardDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -112,29 +118,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
         }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
 
 class LmCardHeaderDirective {
+    // Computed class string
+    classes = computed(() => cardHeaderVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmCardHeaderDirective, isStandalone: true, selector: "[lumaCardHeader]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lumaCardHeader]',
                     host: {
-                        class: 'mb-4',
+                        '[class]': 'classes()',
                     },
                 }]
         }] });
 
 class LmCardContentDirective {
+    // Computed class string
+    classes = computed(() => cardContentVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LmCardContentDirective, isStandalone: true, selector: "[lumaCardContent]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCardContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[lumaCardContent]',
                     host: {
-                        class: '',
+                        '[class]': 'classes()',
                     },
                 }]
         }] });
@@ -557,10 +567,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+const TOOLTIP_GAP = 8;
 class LmTooltipDirective {
     el = inject(ElementRef);
     renderer = inject(Renderer2);
     platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    ngZone = inject(NgZone);
     // Inputs with lm prefix following Lumo convention
     lumaTooltip = input.required(...(ngDevMode ? [{ debugName: "lumaTooltip" }] : []));
     lmPosition = input('top', ...(ngDevMode ? [{ debugName: "lmPosition" }] : []));
@@ -573,8 +586,10 @@ class LmTooltipDirective {
     tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
     tooltipElement = null;
     showTimeout = null;
+    scrollListener = null;
+    resizeListener = null;
+    captureScrollHandler = null;
     classes = computed(() => tooltipVariants({
-        position: this.actualPosition(),
         visible: this.isVisible(),
     }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     constructor() {
@@ -593,7 +608,8 @@ class LmTooltipDirective {
         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);
+        // Portal: append to document.body to avoid overflow clipping
+        this.renderer.appendChild(this.document.body, this.tooltipElement);
     }
     updateContent() {
         if (!this.tooltipElement)
@@ -611,6 +627,68 @@ class LmTooltipDirective {
             return;
         this.tooltipElement.className = this.classes();
     }
+    updatePosition() {
+        if (!this.tooltipElement || !isPlatformBrowser(this.platformId))
+            return;
+        const triggerRect = this.el.nativeElement.getBoundingClientRect();
+        const position = this.actualPosition();
+        let top;
+        let left;
+        let transform;
+        switch (position) {
+            case 'top':
+                left = triggerRect.left + triggerRect.width / 2;
+                top = triggerRect.top - TOOLTIP_GAP;
+                transform = 'translate(-50%, -100%)';
+                break;
+            case 'bottom':
+                left = triggerRect.left + triggerRect.width / 2;
+                top = triggerRect.bottom + TOOLTIP_GAP;
+                transform = 'translate(-50%, 0%)';
+                break;
+            case 'left':
+                left = triggerRect.left - TOOLTIP_GAP;
+                top = triggerRect.top + triggerRect.height / 2;
+                transform = 'translate(-100%, -50%)';
+                break;
+            case 'right':
+                left = triggerRect.right + TOOLTIP_GAP;
+                top = triggerRect.top + triggerRect.height / 2;
+                transform = 'translate(0%, -50%)';
+                break;
+        }
+        this.renderer.setStyle(this.tooltipElement, 'top', `${top}px`);
+        this.renderer.setStyle(this.tooltipElement, 'left', `${left}px`);
+        this.renderer.setStyle(this.tooltipElement, 'transform', transform);
+    }
+    addPositionListeners() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Run outside Angular zone for performance — no change detection needed
+        this.ngZone.runOutsideAngular(() => {
+            const onReposition = () => this.updatePosition();
+            this.scrollListener = this.renderer.listen('window', 'scroll', onReposition);
+            // Capture phase catches scroll events on any ancestor
+            this.document.addEventListener('scroll', onReposition, true);
+            this.captureScrollHandler = onReposition;
+            this.resizeListener = this.renderer.listen('window', 'resize', onReposition);
+        });
+    }
+    removePositionListeners() {
+        if (this.scrollListener) {
+            this.scrollListener();
+            this.scrollListener = null;
+        }
+        if (this.resizeListener) {
+            this.resizeListener();
+            this.resizeListener = null;
+        }
+        // Remove capture-phase scroll listener
+        if (this.captureScrollHandler) {
+            this.document.removeEventListener('scroll', this.captureScrollHandler, true);
+            this.captureScrollHandler = null;
+        }
+    }
     isTouchDevice() {
         if (!isPlatformBrowser(this.platformId))
             return false;
@@ -624,25 +702,26 @@ class LmTooltipDirective {
         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) {
+                if (triggerRect.top - tooltipRect.height - TOOLTIP_GAP < 0) {
                     return 'bottom';
                 }
                 break;
             case 'bottom':
-                if (triggerRect.bottom + tooltipRect.height + offset > viewportHeight) {
+                if (triggerRect.bottom + tooltipRect.height + TOOLTIP_GAP >
+                    viewportHeight) {
                     return 'top';
                 }
                 break;
             case 'left':
-                if (triggerRect.left - tooltipRect.width - offset < 0) {
+                if (triggerRect.left - tooltipRect.width - TOOLTIP_GAP < 0) {
                     return 'right';
                 }
                 break;
             case 'right':
-                if (triggerRect.right + tooltipRect.width + offset > viewportWidth) {
+                if (triggerRect.right + tooltipRect.width + TOOLTIP_GAP >
+                    viewportWidth) {
                     return 'left';
                 }
                 break;
@@ -686,14 +765,19 @@ class LmTooltipDirective {
     onDocumentClick(event) {
         if (this.lmTrigger() !== 'click' && !this.isTouchDevice())
             return;
-        if (!this.el.nativeElement.contains(event.target)) {
+        const target = event.target;
+        // Check both trigger and portal tooltip (tooltip is now in body, not trigger)
+        if (!this.el.nativeElement.contains(target) &&
+            !this.tooltipElement?.contains(target)) {
             this.hide();
         }
     }
     onDocumentTouch(event) {
         if (!this.isVisible())
             return;
-        if (!this.el.nativeElement.contains(event.target)) {
+        const target = event.target;
+        if (!this.el.nativeElement.contains(target) &&
+            !this.tooltipElement?.contains(target)) {
             this.hide();
         }
     }
@@ -702,12 +786,15 @@ class LmTooltipDirective {
             clearTimeout(this.showTimeout);
         const delay = this.lmDelay();
         const showAction = () => {
+            // Calculate position with auto-flip
+            const actualPosition = this.getFlippedPosition(this.lmPosition());
+            this.actualPosition.set(actualPosition);
             this.isVisible.set(true);
-            // Calculate position with auto-flip after tooltip is visible
+            this.updateClasses();
+            // Position after DOM paint so tooltip dimensions are available
             requestAnimationFrame(() => {
-                const actualPosition = this.getFlippedPosition(this.lmPosition());
-                this.actualPosition.set(actualPosition);
-                this.updateClasses();
+                this.updatePosition();
+                this.addPositionListeners();
             });
         };
         if (delay > 0) {
@@ -724,6 +811,7 @@ class LmTooltipDirective {
         }
         this.isVisible.set(false);
         this.updateClasses();
+        this.removePositionListeners();
     }
     toggle() {
         if (this.isVisible()) {
@@ -736,12 +824,13 @@ class LmTooltipDirective {
     ngOnDestroy() {
         if (this.showTimeout)
             clearTimeout(this.showTimeout);
+        this.removePositionListeners();
         if (this.tooltipElement) {
-            this.renderer.removeChild(this.el.nativeElement, this.tooltipElement);
+            this.renderer.removeChild(this.document.body, 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 });
+    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" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTooltipDirective, decorators: [{
             type: Directive,
@@ -749,7 +838,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     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: [{
@@ -935,10 +1023,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
         }], 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
+ * Tabs list component
  *
  * Container for tab triggers with role="tablist".
  * Provides context for the indicator component.
+ * Supports horizontal scrolling with arrow navigation.
  *
  * @example
  * ```html
@@ -947,16 +1036,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  *   <button lumaTabsTrigger="tab-2">Tab 2</button>
  * </div>
  * ```
+ *
+ * @example
+ * ```html
+ * <div lumaTabsList [lmScrollable]="true">
+ *   <button lumaTabsTrigger="tab-1">Tab 1</button>
+ *   <!-- ... many more tabs -->
+ * </div>
+ * ```
  */
 class LmTabsListDirective {
     elementRef = inject((ElementRef));
     tabsGroup = inject(TABS_GROUP);
+    platformId = inject(PLATFORM_ID);
+    /** Reference to the scroll container */
+    scrollContainerRef = viewChild('scrollContainer', ...(ngDevMode ? [{ debugName: "scrollContainerRef" }] : []));
     /** Whether horizontal scrolling is enabled */
-    lmScrollable = false;
-    classes = computed(() => tabsListVariants({
-        style: this.tabsGroup.lmVariant(),
-        scrollable: this.lmScrollable,
-    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    lmScrollable = input(false, ...(ngDevMode ? [{ debugName: "lmScrollable" }] : []));
+    /** Whether to show scroll arrows */
+    showArrows = signal(false, ...(ngDevMode ? [{ debugName: "showArrows" }] : []));
+    showLeftArrow = signal(false, ...(ngDevMode ? [{ debugName: "showLeftArrow" }] : []));
+    showRightArrow = signal(false, ...(ngDevMode ? [{ debugName: "showRightArrow" }] : []));
+    /** ResizeObserver for overflow detection */
+    resizeObserver;
+    /** Debounce timeout for ResizeObserver */
+    resizeTimeout;
+    /** Throttle timeout for scroll events */
+    scrollTimeout;
+    /** Host element classes */
+    hostClasses = computed(() => {
+        if (this.lmScrollable()) {
+            // Scrollable: host is a structural flex wrapper (no role, no variant styling)
+            return 'flex items-center gap-2 w-full';
+        }
+        // Non-scrollable: host is the tablist with variant styling
+        return tabsListVariants({
+            variant: this.tabsGroup.lmVariant(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /** Scroll container classes */
+    scrollContainerClasses = computed(() => {
+        const baseClasses = ['flex', 'items-center'];
+        if (this.lmScrollable()) {
+            const scrollClasses = [
+                ...baseClasses,
+                'flex-1', // Fill available space in flex wrapper
+                'relative', // For indicator absolute positioning
+                'overflow-x-auto',
+                'scrollbar-none',
+                'scroll-smooth',
+                '-webkit-overflow-scrolling-touch',
+            ];
+            // Move variant visual styling from host to scroll container
+            const variant = this.tabsGroup.lmVariant();
+            if (variant === 'underline') {
+                scrollClasses.push('border-b', 'border-border');
+            }
+            else if (variant === 'pills') {
+                scrollClasses.push('p-1', 'bg-muted', 'rounded-lg');
+            }
+            return scrollClasses;
+        }
+        // Non-scrollable: apply w-full and variant-specific classes
+        const variant = this.tabsGroup.lmVariant();
+        if (variant === 'underline') {
+            return [...baseClasses, 'w-full', 'gap-4'];
+        }
+        else if (variant === 'pills') {
+            return [...baseClasses, 'w-full', 'gap-1'];
+        }
+        return [...baseClasses, 'w-full'];
+    }, ...(ngDevMode ? [{ debugName: "scrollContainerClasses" }] : []));
+    /** Left arrow button classes */
+    leftArrowClasses = computed(() => tabsScrollArrowVariants({ direction: 'left' }), ...(ngDevMode ? [{ debugName: "leftArrowClasses" }] : []));
+    /** Right arrow button classes */
+    rightArrowClasses = computed(() => tabsScrollArrowVariants({ direction: 'right' }), ...(ngDevMode ? [{ debugName: "rightArrowClasses" }] : []));
+    constructor() {
+        // Update arrows when scrollable changes
+        effect(() => {
+            if (this.lmScrollable()) {
+                this.updateArrowsVisibility();
+            }
+            else {
+                this.showArrows.set(false);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const container = this.scrollContainerRef()?.nativeElement;
+        if (!container)
+            return;
+        // Set up ResizeObserver with debouncing to prevent infinite feedback loop
+        this.resizeObserver = new ResizeObserver(() => {
+            // Debounce: wait 250ms after last resize before updating
+            if (this.resizeTimeout !== undefined) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = window.setTimeout(() => {
+                this.updateArrowsVisibility();
+                this.resizeTimeout = undefined;
+            }, 250);
+        });
+        // Only observe the container, NOT children (prevents cascading updates)
+        this.resizeObserver.observe(container);
+        // Initial check
+        this.updateArrowsVisibility();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        // Clear timeouts to prevent memory leaks
+        if (this.resizeTimeout !== undefined) {
+            clearTimeout(this.resizeTimeout);
+        }
+        if (this.scrollTimeout !== undefined) {
+            clearTimeout(this.scrollTimeout);
+        }
+    }
     /**
      * Get the currently active trigger element
      */
@@ -967,25 +1165,157 @@ class LmTabsListDirective {
         const triggers = this.tabsGroup.getTriggers();
         return triggers.get(currentValue) || null;
     }
+    /**
+     * Get the element that acts as the semantic tablist container.
+     * When scrollable, this is the inner scroll container (which has role="tablist").
+     * When non-scrollable, this is the host element itself.
+     */
+    getListContainer() {
+        if (this.lmScrollable()) {
+            return (this.scrollContainerRef()?.nativeElement ??
+                this.elementRef.nativeElement);
+        }
+        return this.elementRef.nativeElement;
+    }
+    /**
+     * Scroll to the next set of tabs (85% of container width)
+     */
+    scrollNext() {
+        const container = this.scrollContainerRef()?.nativeElement;
+        if (!container)
+            return;
+        const scrollAmount = container.clientWidth * 0.85;
+        container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+    }
+    /**
+     * Scroll to the previous set of tabs (85% of container width)
+     */
+    scrollPrevious() {
+        const container = this.scrollContainerRef()?.nativeElement;
+        if (!container)
+            return;
+        const scrollAmount = container.clientWidth * 0.85;
+        container.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+    }
+    /**
+     * Handle scroll event to update arrow states (throttled)
+     */
+    onScroll() {
+        if (!this.lmScrollable())
+            return;
+        // Throttle: only update after 100ms of no scrolling
+        if (this.scrollTimeout !== undefined) {
+            clearTimeout(this.scrollTimeout);
+        }
+        this.scrollTimeout = window.setTimeout(() => {
+            this.updateArrowsVisibility();
+            this.scrollTimeout = undefined;
+        }, 100);
+    }
     /**
      * Handle mouse wheel for horizontal scroll
      */
     onWheel(event) {
-        if (this.lmScrollable) {
-            event.preventDefault();
-            this.elementRef.nativeElement.scrollLeft += event.deltaY;
+        if (!this.lmScrollable())
+            return;
+        const container = this.scrollContainerRef()?.nativeElement;
+        if (!container)
+            return;
+        event.preventDefault();
+        container.scrollLeft += event.deltaY;
+    }
+    /**
+     * Update arrow visibility and enabled states based on scroll position
+     * Optimized to only update signals when values actually change
+     */
+    updateArrowsVisibility() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const container = this.scrollContainerRef()?.nativeElement;
+        if (!container)
+            return;
+        // Check if content overflows container
+        const hasOverflow = container.scrollWidth > container.clientWidth;
+        // Only update if value actually changed
+        if (this.showArrows() !== hasOverflow) {
+            this.showArrows.set(hasOverflow);
+        }
+        if (hasOverflow) {
+            // Update individual arrow states based on scroll position
+            const isAtStart = container.scrollLeft <= 1;
+            const isAtEnd = container.scrollLeft >=
+                container.scrollWidth - container.clientWidth - 1;
+            const newShowLeft = !isAtStart;
+            const newShowRight = !isAtEnd;
+            // Only update if values changed
+            if (this.showLeftArrow() !== newShowLeft) {
+                this.showLeftArrow.set(newShowLeft);
+            }
+            if (this.showRightArrow() !== newShowRight) {
+                this.showRightArrow.set(newShowRight);
+            }
+        }
+        else {
+            // Reset arrow states when no overflow
+            if (this.showLeftArrow() !== false) {
+                this.showLeftArrow.set(false);
+            }
+            if (this.showRightArrow() !== false) {
+                this.showRightArrow.set(false);
+            }
         }
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsListDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: LmTabsListDirective, isStandalone: true, selector: "[lumaTabsList]", inputs: { lmScrollable: { classPropertyName: "lmScrollable", publicName: "lmScrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "lmScrollable() ? null : \"tablist\"", "attr.aria-orientation": "lmScrollable() ? null : \"horizontal\"", "class": "hostClasses()" } }, providers: [
             {
                 provide: TABS_LIST,
                 useExisting: LmTabsListDirective,
             },
-        ], ngImport: i0 });
+        ], viewQueries: [{ propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (lmScrollable()) {
+      <!-- LEFT ARROW - outside tablist for correct ARIA -->
+      <button
+        type="button"
+        [class]="leftArrowClasses()"
+        [disabled]="!showLeftArrow()"
+        [style.visibility]="showArrows() ? 'visible' : 'hidden'"
+        (click)="scrollPrevious()"
+        aria-label="Scroll to previous tabs"
+      >
+        ‹
+      </button>
+    }
+
+    <!-- SINGLE scroll container - always rendered to avoid dual ng-content -->
+    <div
+      #scrollContainer
+      [attr.role]="lmScrollable() ? 'tablist' : null"
+      [attr.aria-orientation]="lmScrollable() ? 'horizontal' : null"
+      [class]="scrollContainerClasses()"
+      (scroll)="onScroll()"
+      (wheel)="onWheel($event)"
+    >
+      <ng-content />
+    </div>
+
+    @if (lmScrollable()) {
+      <!-- RIGHT ARROW - outside tablist for correct ARIA -->
+      <button
+        type="button"
+        [class]="rightArrowClasses()"
+        [disabled]="!showRightArrow()"
+        [style.visibility]="showArrows() ? 'visible' : 'hidden'"
+        (click)="scrollNext()"
+        aria-label="Scroll to next tabs"
+      >
+        ›
+      </button>
+    }
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsListDirective, decorators: [{
-            type: Directive,
+            type: Component,
             args: [{
                     selector: '[lumaTabsList]',
                     providers: [
@@ -995,15 +1325,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         },
                     ],
                     host: {
-                        role: 'tablist',
-                        '[attr.aria-orientation]': '"horizontal"',
-                        '[class]': 'classes()',
+                        '[attr.role]': 'lmScrollable() ? null : "tablist"',
+                        '[attr.aria-orientation]': 'lmScrollable() ? null : "horizontal"',
+                        '[class]': 'hostClasses()',
                     },
+                    template: `
+    @if (lmScrollable()) {
+      <!-- LEFT ARROW - outside tablist for correct ARIA -->
+      <button
+        type="button"
+        [class]="leftArrowClasses()"
+        [disabled]="!showLeftArrow()"
+        [style.visibility]="showArrows() ? 'visible' : 'hidden'"
+        (click)="scrollPrevious()"
+        aria-label="Scroll to previous tabs"
+      >
+        ‹
+      </button>
+    }
+
+    <!-- SINGLE scroll container - always rendered to avoid dual ng-content -->
+    <div
+      #scrollContainer
+      [attr.role]="lmScrollable() ? 'tablist' : null"
+      [attr.aria-orientation]="lmScrollable() ? 'horizontal' : null"
+      [class]="scrollContainerClasses()"
+      (scroll)="onScroll()"
+      (wheel)="onWheel($event)"
+    >
+      <ng-content />
+    </div>
+
+    @if (lmScrollable()) {
+      <!-- RIGHT ARROW - outside tablist for correct ARIA -->
+      <button
+        type="button"
+        [class]="rightArrowClasses()"
+        [disabled]="!showRightArrow()"
+        [style.visibility]="showArrows() ? 'visible' : 'hidden'"
+        (click)="scrollNext()"
+        aria-label="Scroll to next tabs"
+      >
+        ›
+      </button>
+    }
+  `,
                 }]
-        }], propDecorators: { onWheel: [{
-                type: HostListener,
-                args: ['wheel', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { scrollContainerRef: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], lmScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmScrollable", required: false }] }] } });
 
 /**
  * Tabs trigger directive
@@ -1031,8 +1399,7 @@ class LmTabsTriggerDirective {
     panelId = computed(() => `tab-panel-${this.lumaTabsTrigger()}`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
     /** Computed: CSS classes from CVA */
     classes = computed(() => tabsTriggerVariants({
-        style: this.tabsGroup.lmVariant(),
-        selected: this.isSelected(),
+        variant: this.tabsGroup.lmVariant(),
     }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     ngOnInit() {
         this.tabsGroup.registerTrigger(this.lumaTabsTrigger(), this.el.nativeElement);
@@ -1073,7 +1440,7 @@ class LmTabsTriggerDirective {
         }
     }
     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 });
+    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", "attr.data-state": "isSelected() ? \"active\" : \"inactive\"", "class": "classes()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTabsTriggerDirective, decorators: [{
             type: Directive,
@@ -1085,6 +1452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         '[attr.aria-selected]': 'isSelected()',
                         '[attr.aria-controls]': 'panelId()',
                         '[attr.tabindex]': 'isSelected() ? 0 : -1',
+                        '[attr.data-state]': 'isSelected() ? "active" : "inactive"',
                         '[class]': 'classes()',
                     },
                 }]
@@ -1241,7 +1609,7 @@ class LmTabsIndicatorComponent {
         this.resizeObserver = new ResizeObserver(() => {
             this.updateIndicatorPosition();
         });
-        this.resizeObserver.observe(this.tabsList.elementRef.nativeElement);
+        this.resizeObserver.observe(this.tabsList.getListContainer());
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
@@ -1253,9 +1621,10 @@ class LmTabsIndicatorComponent {
             return;
         }
         const triggerRect = activeTrigger.getBoundingClientRect();
-        const listRect = this.tabsList.elementRef.nativeElement.getBoundingClientRect();
-        // Horizontal positioning
-        this.indicatorPosition.set(triggerRect.left - listRect.left);
+        const listContainer = this.tabsList.getListContainer();
+        const listRect = listContainer.getBoundingClientRect();
+        // Horizontal positioning (account for scroll offset in scrollable mode)
+        this.indicatorPosition.set(triggerRect.left - listRect.left + listContainer.scrollLeft);
         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 });
@@ -1484,9 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 class LmModalOverlayComponent {
     modal = inject(MODAL_CONTEXT);
     /** Computed classes from CVA */
-    classes = computed(() => modalOverlayVariants({
-        open: this.modal.isOpen(),
-    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    classes = computed(() => modalOverlayVariants(), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     /**
      * Handle click on overlay (not on children)
      */
@@ -1544,7 +1911,6 @@ class LmModalContainerComponent {
     /** 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
@@ -1690,9 +2056,7 @@ class LmModalTitleDirective {
     /** 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" }] : []));
+    classes = computed(() => modalTitleVariants(), ...(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 });
 }
@@ -1728,9 +2092,7 @@ 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" }] : []));
+    classes = computed(() => modalContentVariants(), ...(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 });
 }