@lumaui/angular 0.4.3 → 0.4.4

package/fesm2022/lumaui-angular.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-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 { input, computed, HostBinding, Directive, inject, Injector, ElementRef, DestroyRef, signal, forwardRef, ChangeDetectionStrategy, Component, output, InjectionToken, Renderer2, effect, HostListener, PLATFORM_ID, NgZone, viewChild, TemplateRef, ViewContainerRef, ApplicationRef, createComponent, Injectable } from '@angular/core';
+import { buttonVariants, badgeVariants, inputVariants, labelVariants, helperTextVariants, errorTextVariants, textareaVariants, checkboxVariants, radioVariants, 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, selectTriggerVariants, selectListboxVariants, selectSearchInputVariants, selectChipVariants, selectChipDismissVariants, selectOptionVariants } from '@lumaui/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Subject, interval } from 'rxjs';
 import { takeWhile, filter } from 'rxjs/operators';
@@ -63,6 +65,668 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 args: ['class']
             }] } });
 
+let inputIdCounter = 0;
+/**
+ * Input directive with CVA variants and Angular Forms integration
+ *
+ * @example
+ * <input lumaInput lmSize="md" />
+ */
+class LmInputDirective {
+    // Use Injector to avoid circular dependency
+    injector = inject(Injector);
+    elementRef = inject((ElementRef));
+    ngControl = null;
+    destroyRef = inject(DestroyRef);
+    // Inputs
+    lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    lmError = input(false, ...(ngDevMode ? [{ debugName: "lmError" }] : []));
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    lmRequired = input(false, ...(ngDevMode ? [{ debugName: "lmRequired" }] : []));
+    // Internal signal for disabled state coming from FormControl.disable()
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    // Internal signals for form validation state (bridging non-signal FormControl to signal graph)
+    _formInvalid = signal(false, ...(ngDevMode ? [{ debugName: "_formInvalid" }] : []));
+    _formTouched = signal(false, ...(ngDevMode ? [{ debugName: "_formTouched" }] : []));
+    // Final disabled state: manual lmDisabled OR programmatic FormControl.disable()
+    isDisabled = computed(() => this.lmDisabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Auto-generated ID
+    elementId = signal(`luma-input-${inputIdCounter++}`, ...(ngDevMode ? [{ debugName: "elementId" }] : []));
+    // ARIA describedby (will be set by parent or manually)
+    describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    // Computed signal — reactive to both manual lmError and FormControl state
+    hasError = computed(() => this.lmError() || (this._formInvalid() && this._formTouched()), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    // Computed classes
+    classes = computed(() => inputVariants({
+        size: this.lmSize(),
+        error: this.hasError(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    // noop – replaced at runtime by registerOnChange / registerOnTouched
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    ngOnInit() {
+        // Get NgControl from Injector to avoid circular dependency
+        try {
+            this.ngControl = this.injector.get(NgControl, null, {
+                optional: true,
+                self: true,
+            });
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+                const control = this.ngControl.control;
+                if (control) {
+                    // Capture immediate state (e.g. markAsTouched() called before ngOnInit)
+                    this._formInvalid.set(control.invalid);
+                    this._formTouched.set(control.touched);
+                    // React to any future FormControl state changes
+                    // control.events emits for ALL changes: value, status, touched, pristine
+                    // statusChanges alone does NOT emit for markAsTouched()
+                    control.events
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => {
+                        this._formInvalid.set(control.invalid);
+                        this._formTouched.set(control.touched);
+                    });
+                }
+            }
+        }
+        catch {
+            // No NgControl present
+            this.ngControl = null;
+        }
+    }
+    writeValue(value) {
+        const element = this.elementRef.nativeElement;
+        element.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const target = event.target;
+        this.onChange(target.value);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    /**
+     * Set the aria-describedby attribute value
+     * This is typically called by parent components or directives
+     */
+    setDescribedBy(value) {
+        this.describedBy.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmInputDirective, isStandalone: true, selector: "input[lumaInput]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmError: { classPropertyName: "lmError", publicName: "lmError", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmRequired: { classPropertyName: "lmRequired", publicName: "lmRequired", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur()" }, properties: { "class": "classes()", "attr.id": "elementId()", "attr.aria-invalid": "hasError()", "attr.aria-describedby": "describedBy()", "attr.disabled": "isDisabled() ? \"\" : null", "attr.required": "lmRequired() ? \"\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LmInputDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[lumaInput]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'elementId()',
+                        '[attr.aria-invalid]': 'hasError()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.disabled]': 'isDisabled() ? "" : null',
+                        '[attr.required]': 'lmRequired() ? "" : null',
+                        '(input)': 'onInput($event)',
+                        '(blur)': 'onBlur()',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LmInputDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }], lmError: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmError", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRequired", required: false }] }] } });
+
+/**
+ * Label directive with required indicator support
+ *
+ * @example
+ * <label lumaLabel for="email" lmRequired>Email</label>
+ */
+class LmLabelDirective {
+    for = input('', ...(ngDevMode ? [{ debugName: "for" }] : []));
+    lmRequired = input(false, ...(ngDevMode ? [{ debugName: "lmRequired" }] : []));
+    lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    lmInline = input(false, ...(ngDevMode ? [{ debugName: "lmInline" }] : []));
+    classes = computed(() => labelVariants({
+        size: this.lmSize(),
+        required: this.lmRequired(),
+        inline: this.lmInline(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmLabelDirective, isStandalone: true, selector: "label[lumaLabel]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, lmRequired: { classPropertyName: "lmRequired", publicName: "lmRequired", isSignal: true, isRequired: false, transformFunction: null }, lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmInline: { classPropertyName: "lmInline", publicName: "lmInline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "for()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'label[lumaLabel]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.for]': 'for()',
+                    },
+                }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], lmRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRequired", required: false }] }], lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }], lmInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmInline", required: false }] }] } });
+
+let helperIdCounter = 0;
+/**
+ * Helper text directive for displaying hint/description text
+ *
+ * @example
+ * <span lumaHelperText>We'll never share your email.</span>
+ */
+class LmHelperTextDirective {
+    elementId = signal(`luma-helper-${helperIdCounter++}`, ...(ngDevMode ? [{ debugName: "elementId" }] : []));
+    lmSize = input('sm', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    classes = computed(() => helperTextVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmHelperTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmHelperTextDirective, isStandalone: true, selector: "[lumaHelperText]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "elementId()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmHelperTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaHelperText]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'elementId()',
+                    },
+                }]
+        }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
+
+let errorIdCounter = 0;
+/**
+ * Error text directive for displaying validation error messages
+ *
+ * @example
+ * <span lumaErrorText *ngIf="hasError">Password must be at least 8 characters.</span>
+ */
+class LmErrorTextDirective {
+    elementId = signal(`luma-error-${errorIdCounter++}`, ...(ngDevMode ? [{ debugName: "elementId" }] : []));
+    lmSize = input('sm', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    classes = computed(() => errorTextVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmErrorTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmErrorTextDirective, isStandalone: true, selector: "[lumaErrorText]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "elementId()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmErrorTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lumaErrorText]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'elementId()',
+                    },
+                }]
+        }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }] } });
+
+let textareaIdCounter = 0;
+/**
+ * Textarea directive with CVA variants and Angular Forms integration
+ *
+ * @example
+ * <textarea lumaTextarea lmSize="md"></textarea>
+ */
+class LmTextareaDirective {
+    // Use Injector to avoid circular dependency
+    injector = inject(Injector);
+    elementRef = inject((ElementRef));
+    ngControl = null;
+    destroyRef = inject(DestroyRef);
+    // Inputs
+    lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    lmError = input(false, ...(ngDevMode ? [{ debugName: "lmError" }] : []));
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    lmRequired = input(false, ...(ngDevMode ? [{ debugName: "lmRequired" }] : []));
+    // Internal signal for disabled state coming from FormControl.disable()
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    // Internal signals for form validation state (bridging non-signal FormControl to signal graph)
+    _formInvalid = signal(false, ...(ngDevMode ? [{ debugName: "_formInvalid" }] : []));
+    _formTouched = signal(false, ...(ngDevMode ? [{ debugName: "_formTouched" }] : []));
+    // Final disabled state: manual lmDisabled OR programmatic FormControl.disable()
+    isDisabled = computed(() => this.lmDisabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Auto-generated ID
+    elementId = signal(`luma-textarea-${textareaIdCounter++}`, ...(ngDevMode ? [{ debugName: "elementId" }] : []));
+    // ARIA describedby (set by parent or manually)
+    describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    // Computed signal — reactive to both manual lmError and FormControl state
+    hasError = computed(() => this.lmError() || (this._formInvalid() && this._formTouched()), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    // Computed classes
+    classes = computed(() => textareaVariants({
+        size: this.lmSize(),
+        error: this.hasError(),
+    }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    // noop – replaced at runtime by registerOnChange / registerOnTouched
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    ngOnInit() {
+        // Get NgControl from Injector to avoid circular dependency
+        try {
+            this.ngControl = this.injector.get(NgControl, null, {
+                optional: true,
+                self: true,
+            });
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+                const control = this.ngControl.control;
+                if (control) {
+                    // Capture immediate state (e.g. markAsTouched() called before ngOnInit)
+                    this._formInvalid.set(control.invalid);
+                    this._formTouched.set(control.touched);
+                    // React to any future FormControl state changes
+                    // control.events emits for ALL changes: value, status, touched, pristine
+                    // statusChanges alone does NOT emit for markAsTouched()
+                    control.events
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => {
+                        this._formInvalid.set(control.invalid);
+                        this._formTouched.set(control.touched);
+                    });
+                }
+            }
+        }
+        catch {
+            // No NgControl present
+            this.ngControl = null;
+        }
+    }
+    writeValue(value) {
+        const element = this.elementRef.nativeElement;
+        element.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const target = event.target;
+        this.onChange(target.value);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    /**
+     * Set the aria-describedby attribute value
+     * This is typically called by parent components or directives
+     */
+    setDescribedBy(value) {
+        this.describedBy.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmTextareaDirective, isStandalone: true, selector: "textarea[lumaTextarea]", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmError: { classPropertyName: "lmError", publicName: "lmError", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmRequired: { classPropertyName: "lmRequired", publicName: "lmRequired", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "blur": "onBlur()" }, properties: { "class": "classes()", "attr.id": "elementId()", "attr.aria-invalid": "hasError()", "attr.aria-describedby": "describedBy()", "attr.disabled": "isDisabled() ? \"\" : null", "attr.required": "lmRequired() ? \"\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LmTextareaDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmTextareaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[lumaTextarea]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'elementId()',
+                        '[attr.aria-invalid]': 'hasError()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.disabled]': 'isDisabled() ? "" : null',
+                        '[attr.required]': 'lmRequired() ? "" : null',
+                        '(input)': 'onInput($event)',
+                        '(blur)': 'onBlur()',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LmTextareaDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }], lmError: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmError", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRequired", required: false }] }] } });
+
+let checkboxIdCounter = 0;
+// SVG checkmark encoded as a CSS background-image data URI (white stroke on transparent)
+const CHECKMARK_SVG = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E\")";
+/**
+ * Checkbox directive with CVA variants and Angular Forms integration.
+ * Supports boolean ControlValueAccessor (checked/unchecked).
+ *
+ * @example
+ * <input type="checkbox" lumaCheckbox [formControl]="agreedControl" />
+ */
+class LmCheckboxDirective {
+    // Use Injector to avoid circular dependency
+    injector = inject(Injector);
+    elementRef = inject((ElementRef));
+    ngControl = null;
+    destroyRef = inject(DestroyRef);
+    // Inputs
+    lmError = input(false, ...(ngDevMode ? [{ debugName: "lmError" }] : []));
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    lmRequired = input(false, ...(ngDevMode ? [{ debugName: "lmRequired" }] : []));
+    // Internal signal for disabled state coming from FormControl.disable()
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    // Internal signals for form validation state (bridging non-signal FormControl to signal graph)
+    _formInvalid = signal(false, ...(ngDevMode ? [{ debugName: "_formInvalid" }] : []));
+    _formTouched = signal(false, ...(ngDevMode ? [{ debugName: "_formTouched" }] : []));
+    // Internal signal tracking whether the checkbox is currently checked
+    isChecked = signal(false, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    // Exposed for host binding (readonly reference to the constant)
+    checkmarkSvg = CHECKMARK_SVG;
+    // Final disabled state: manual lmDisabled OR programmatic FormControl.disable()
+    isDisabled = computed(() => this.lmDisabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Preserve static id="..." from template; fall back to auto-generated id.
+    // elementRef must be declared before this field so it's available at init time.
+    elementId = signal(this.elementRef.nativeElement.getAttribute('id') ||
+        `luma-checkbox-${checkboxIdCounter++}`, ...(ngDevMode ? [{ debugName: "elementId" }] : []));
+    // ARIA describedby (can be set by parent or manually)
+    describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    // Computed signal — reactive to both manual lmError and FormControl state
+    hasError = computed(() => this.lmError() || (this._formInvalid() && this._formTouched()), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    // Computed classes
+    classes = computed(() => checkboxVariants({ error: this.hasError() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    // ControlValueAccessor implementation (boolean-typed)
+    // noop – replaced at runtime by registerOnChange / registerOnTouched
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    ngOnInit() {
+        // Sync initial checked state from native element.
+        // Needed when a static `checked` attribute is used without a FormControl —
+        // writeValue() is never called in that case, so isChecked stays false.
+        this.isChecked.set(this.elementRef.nativeElement.checked);
+        // Get NgControl from Injector to avoid circular dependency
+        try {
+            this.ngControl = this.injector.get(NgControl, null, {
+                optional: true,
+                self: true,
+            });
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+                const control = this.ngControl.control;
+                if (control) {
+                    // Capture immediate state (e.g. markAsTouched() called before ngOnInit)
+                    this._formInvalid.set(control.invalid);
+                    this._formTouched.set(control.touched);
+                    // React to any future FormControl state changes
+                    // control.events emits for ALL changes: value, status, touched, pristine
+                    // statusChanges alone does NOT emit for markAsTouched()
+                    control.events
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => {
+                        this._formInvalid.set(control.invalid);
+                        this._formTouched.set(control.touched);
+                    });
+                }
+            }
+        }
+        catch {
+            // No NgControl present
+            this.ngControl = null;
+        }
+    }
+    writeValue(value) {
+        const checked = !!value;
+        this.elementRef.nativeElement.checked = checked;
+        this.isChecked.set(checked);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    onChangeEvent(event) {
+        const checked = event.target.checked;
+        this.isChecked.set(checked);
+        this.onChange(checked);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    /**
+     * Set the aria-describedby attribute value.
+     * Typically called by helper/error text directives.
+     */
+    setDescribedBy(value) {
+        this.describedBy.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmCheckboxDirective, isStandalone: true, selector: "input[type=\"checkbox\"][lumaCheckbox]", inputs: { lmError: { classPropertyName: "lmError", publicName: "lmError", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmRequired: { classPropertyName: "lmRequired", publicName: "lmRequired", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "onChangeEvent($event)", "blur": "onBlur()" }, properties: { "class": "classes()", "attr.id": "elementId()", "attr.aria-invalid": "hasError()", "attr.aria-describedby": "describedBy()", "attr.disabled": "isDisabled() ? \"\" : null", "attr.required": "lmRequired() ? \"\" : null", "style.background-image": "isChecked() ? checkmarkSvg : null", "style.background-repeat": "isChecked() ? \"no-repeat\" : null", "style.background-position": "isChecked() ? \"center\" : null", "style.background-size": "isChecked() ? \"75%\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LmCheckboxDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="checkbox"][lumaCheckbox]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'elementId()',
+                        '[attr.aria-invalid]': 'hasError()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.disabled]': 'isDisabled() ? "" : null',
+                        '[attr.required]': 'lmRequired() ? "" : null',
+                        '[style.background-image]': 'isChecked() ? checkmarkSvg : null',
+                        '[style.background-repeat]': 'isChecked() ? "no-repeat" : null',
+                        '[style.background-position]': 'isChecked() ? "center" : null',
+                        '[style.background-size]': 'isChecked() ? "75%" : null',
+                        '(change)': 'onChangeEvent($event)',
+                        '(blur)': 'onBlur()',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LmCheckboxDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { lmError: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmError", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRequired", required: false }] }] } });
+
+let radioIdCounter = 0;
+/**
+ * Radio button directive with CVA variants and Angular Forms integration.
+ * Emits `lmValue` to the FormControl when checked.
+ * The inner dot indicator is rendered via a signal-bound `box-shadow` style.
+ *
+ * @example
+ * <input type="radio" lumaRadio lmValue="option-a" [formControl]="optionControl" />
+ */
+class LmRadioDirective {
+    // Use Injector to avoid circular dependency
+    injector = inject(Injector);
+    elementRef = inject((ElementRef));
+    ngControl = null;
+    destroyRef = inject(DestroyRef);
+    // Inputs
+    lmValue = input(undefined, ...(ngDevMode ? [{ debugName: "lmValue" }] : []));
+    lmError = input(false, ...(ngDevMode ? [{ debugName: "lmError" }] : []));
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    lmRequired = input(false, ...(ngDevMode ? [{ debugName: "lmRequired" }] : []));
+    // Internal signal for disabled state coming from FormControl.disable()
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    // Internal signals for form validation state (bridging non-signal FormControl to signal graph)
+    _formInvalid = signal(false, ...(ngDevMode ? [{ debugName: "_formInvalid" }] : []));
+    _formTouched = signal(false, ...(ngDevMode ? [{ debugName: "_formTouched" }] : []));
+    // Internal signal tracking whether this radio is currently selected
+    isChecked = signal(false, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
+    // Final disabled state: manual lmDisabled OR programmatic FormControl.disable()
+    isDisabled = computed(() => this.lmDisabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    // Preserve static id="..." from template; fall back to auto-generated id.
+    // elementRef must be declared before this field so it's available at init time.
+    elementId = signal(this.elementRef.nativeElement.getAttribute('id') ||
+        `luma-radio-${radioIdCounter++}`, ...(ngDevMode ? [{ debugName: "elementId" }] : []));
+    // ARIA describedby (can be set by parent or manually)
+    describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    // Computed signal — reactive to both manual lmError and FormControl state
+    hasError = computed(() => this.lmError() || (this._formInvalid() && this._formTouched()), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    // Computed classes
+    classes = computed(() => radioVariants({ error: this.hasError() }), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    // noop – replaced at runtime by registerOnChange / registerOnTouched
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    ngOnInit() {
+        // Sync initial checked state from native element.
+        // Needed when a static `checked` attribute is used without a FormControl —
+        // writeValue() is never called in that case, so isChecked stays false.
+        this.isChecked.set(this.elementRef.nativeElement.checked);
+        // Get NgControl from Injector to avoid circular dependency
+        try {
+            this.ngControl = this.injector.get(NgControl, null, {
+                optional: true,
+                self: true,
+            });
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+                const control = this.ngControl.control;
+                if (control) {
+                    // Capture immediate state (e.g. markAsTouched() called before ngOnInit)
+                    this._formInvalid.set(control.invalid);
+                    this._formTouched.set(control.touched);
+                    // React to any future FormControl state changes
+                    // control.events emits for ALL changes: value, status, touched, pristine
+                    // statusChanges alone does NOT emit for markAsTouched()
+                    control.events
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => {
+                        this._formInvalid.set(control.invalid);
+                        this._formTouched.set(control.touched);
+                    });
+                }
+            }
+        }
+        catch {
+            // No NgControl present
+            this.ngControl = null;
+        }
+        // Standalone usage (no FormControl): when the user selects a sibling radio in the
+        // same name group, the browser silently sets this radio's .checked = false without
+        // firing a change event on it. We listen on document and re-read native state.
+        const el = this.elementRef.nativeElement;
+        const onSiblingChange = (e) => {
+            const target = e.target;
+            if (target !== el &&
+                target.type === 'radio' &&
+                !!el.name &&
+                target.name === el.name) {
+                this.isChecked.set(el.checked);
+            }
+        };
+        document.addEventListener('change', onSiblingChange);
+        this.destroyRef.onDestroy(() => document.removeEventListener('change', onSiblingChange));
+    }
+    writeValue(value) {
+        // Check the radio if the form value equals this radio's value
+        const checked = value === this.lmValue();
+        this.elementRef.nativeElement.checked = checked;
+        this.isChecked.set(checked);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    onChangeEvent(event) {
+        // Only emit when this radio is checked (not when another radio in the group deselects it)
+        if (event.target.checked) {
+            this.isChecked.set(true);
+            this.onChange(this.lmValue());
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    /**
+     * Set the aria-describedby attribute value.
+     * Typically called by helper/error text directives.
+     */
+    setDescribedBy(value) {
+        this.describedBy.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LmRadioDirective, isStandalone: true, selector: "input[type=\"radio\"][lumaRadio]", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: false, transformFunction: null }, lmError: { classPropertyName: "lmError", publicName: "lmError", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmRequired: { classPropertyName: "lmRequired", publicName: "lmRequired", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "change": "onChangeEvent($event)", "blur": "onBlur()" }, properties: { "class": "classes()", "attr.id": "elementId()", "attr.aria-invalid": "hasError()", "attr.aria-describedby": "describedBy()", "attr.disabled": "isDisabled() ? \"\" : null", "attr.required": "lmRequired() ? \"\" : null", "style.box-shadow": "isChecked() ? \"inset 0 0 0 3px var(--color-background)\" : null", "style.background-color": "isChecked() ? \"var(--color-primary)\" : null", "style.border-color": "isChecked() ? \"var(--color-primary)\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LmRadioDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmRadioDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="radio"][lumaRadio]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'elementId()',
+                        '[attr.aria-invalid]': 'hasError()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.disabled]': 'isDisabled() ? "" : null',
+                        '[attr.required]': 'lmRequired() ? "" : null',
+                        // Inner dot: background fills circle, inset shadow carves a gap between border and dot
+                        '[style.box-shadow]': 'isChecked() ? "inset 0 0 0 3px var(--color-background)" : null',
+                        '[style.background-color]': 'isChecked() ? "var(--color-primary)" : null',
+                        '[style.border-color]': 'isChecked() ? "var(--color-primary)" : null',
+                        '(change)': 'onChangeEvent($event)',
+                        '(blur)': 'onBlur()',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LmRadioDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { lmValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmValue", required: false }] }], lmError: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmError", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRequired", required: false }] }] } });
+
 class LmCardComponent {
     /**
      * Card visual style variant
@@ -2991,11 +3655,449 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 // Toast public API
 
+const SELECT_CONTEXT = new InjectionToken('SelectContext');
+
+let selectIdCounter = 0;
+class LmSelectComponent {
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    elementRef = inject((ElementRef));
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    ngControl = null;
+    // ── Inputs
+    lmSize = input('md', ...(ngDevMode ? [{ debugName: "lmSize" }] : []));
+    lmMultiple = input(false, ...(ngDevMode ? [{ debugName: "lmMultiple" }] : []));
+    lmPlaceholder = input('Select…', ...(ngDevMode ? [{ debugName: "lmPlaceholder" }] : []));
+    lmSearchPlaceholder = input('Search…', ...(ngDevMode ? [{ debugName: "lmSearchPlaceholder" }] : []));
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    lmRequired = input(false, ...(ngDevMode ? [{ debugName: "lmRequired" }] : []));
+    lmError = input(false, ...(ngDevMode ? [{ debugName: "lmError" }] : []));
+    lmEmptyMessage = input('No options found', ...(ngDevMode ? [{ debugName: "lmEmptyMessage" }] : []));
+    lmClearable = input(false, ...(ngDevMode ? [{ debugName: "lmClearable" }] : []));
+    lmCompareWith = input(null, ...(ngDevMode ? [{ debugName: "lmCompareWith" }] : []));
+    // ── Outputs
+    lmValueChange = output();
+    // ── IDs: read the host id attribute before host binding removes it
+    selectId = signal(this.elementRef.nativeElement.getAttribute('id') ||
+        `luma-select-${selectIdCounter++}`, ...(ngDevMode ? [{ debugName: "selectId" }] : []));
+    listboxId = computed(() => `${this.selectId()}-listbox`, ...(ngDevMode ? [{ debugName: "listboxId" }] : []));
+    searchInputId = computed(() => `${this.selectId()}-search`, ...(ngDevMode ? [{ debugName: "searchInputId" }] : []));
+    /** ID of the currently focused option for aria-activedescendant */
+    activeDescendantId = computed(() => {
+        const idx = this.focusedOptionIndex();
+        return idx >= 0 ? `${this.selectId()}-opt-${idx}` : null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : []));
+    /** Whether the select has a value (for clear button visibility) */
+    hasValue = computed(() => {
+        if (this.lmMultiple())
+            return this._multiValue().length > 0;
+        const v = this._singleValue();
+        return v !== null && v !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    // ── Selection state
+    _singleValue = signal(null, ...(ngDevMode ? [{ debugName: "_singleValue" }] : []));
+    _multiValue = signal([], ...(ngDevMode ? [{ debugName: "_multiValue" }] : []));
+    // ── Open state
+    _internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "_internalOpen" }] : []));
+    isOpen = this._internalOpen.asReadonly();
+    // ── Search + options registry
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+    // ── Form state
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    _formInvalid = signal(false, ...(ngDevMode ? [{ debugName: "_formInvalid" }] : []));
+    _formTouched = signal(false, ...(ngDevMode ? [{ debugName: "_formTouched" }] : []));
+    // ── Derived state
+    isDisabled = computed(() => this.lmDisabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    hasError = computed(() => this.lmError() || (this._formInvalid() && this._formTouched()), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    /** SelectContext interface */
+    isMultiple = computed(() => this.lmMultiple(), ...(ngDevMode ? [{ debugName: "isMultiple" }] : []));
+    /** Compare two values using the custom compareWith function or strict equality */
+    compareValues(a, b) {
+        const fn = this.lmCompareWith();
+        return fn ? fn(a, b) : a === b;
+    }
+    /**
+     * Combines filtering with selected-state baking in a single computed.
+     * Avoids creating per-row signal instances; the whole array recomputes
+     * when search query, options, or selection state changes.
+     */
+    filteredOptionsWithState = computed(() => {
+        const query = this.searchQuery().toLowerCase().trim();
+        const opts = this._options();
+        const filtered = query
+            ? opts.filter((o) => o.label().toLowerCase().includes(query))
+            : opts;
+        const multiple = this.lmMultiple();
+        const single = this._singleValue();
+        const multi = this._multiValue();
+        return filtered.map((o) => ({
+            entry: o,
+            isSelected: multiple
+                ? multi.some((v) => this.compareValues(v, o.value))
+                : this.compareValues(o.value, single),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptionsWithState" }] : []));
+    /** Label shown in the trigger when the dropdown is closed (single-select only) */
+    triggerLabel = computed(() => {
+        // Multi-select displays chips instead of a text label
+        if (this.lmMultiple())
+            return null;
+        const val = this._singleValue();
+        if (val === null || val === undefined)
+            return null;
+        const opts = this._options();
+        return (opts.find((o) => this.compareValues(o.value, val))?.label() ?? String(val));
+    }, ...(ngDevMode ? [{ debugName: "triggerLabel" }] : []));
+    /** Chip data for multi-select: maps selected values to { value, label } */
+    selectedChips = computed(() => {
+        if (!this.lmMultiple())
+            return [];
+        const vals = this._multiValue();
+        const opts = this._options();
+        return vals.map((v) => ({
+            value: v,
+            label: opts.find((o) => this.compareValues(o.value, v))?.label() ?? String(v),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "selectedChips" }] : []));
+    // ── Dropdown flip (one-time check on open — no event listeners)
+    _flipAbove = signal(false, ...(ngDevMode ? [{ debugName: "_flipAbove" }] : []));
+    // ── Keyboard focus within the listbox
+    focusedOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : []));
+    // ── ViewChild refs
+    searchInputRef = viewChild('searchInputEl', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : []));
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
+    listboxRef = viewChild('listboxEl', ...(ngDevMode ? [{ debugName: "listboxRef" }] : []));
+    // ── CVA classes (computed for reactivity)
+    triggerClasses = computed(() => selectTriggerVariants({
+        size: this.lmSize(),
+        multiple: this.lmMultiple(),
+        error: this.hasError(),
+        disabled: this.isDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    listboxClasses = computed(() => selectListboxVariants({ flip: this._flipAbove() }), ...(ngDevMode ? [{ debugName: "listboxClasses" }] : []));
+    searchInputClasses = selectSearchInputVariants();
+    /** Chip classes — reactive to size */
+    chipClasses = computed(() => selectChipVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "chipClasses" }] : []));
+    /** Chip dismiss button classes — reactive to size */
+    chipDismissClasses = computed(() => selectChipDismissVariants({ size: this.lmSize() }), ...(ngDevMode ? [{ debugName: "chipDismissClasses" }] : []));
+    optionClasses(isSelected, disabled, isFocused) {
+        const base = selectOptionVariants({ selected: isSelected, disabled });
+        return isFocused && !disabled ? `${base} bg-primary/10` : base;
+    }
+    // noop – replaced at runtime by registerOnChange / registerOnTouched
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    // ── Event listener refs for cleanup
+    clickOutsideHandler = null;
+    constructor() {
+        // React to open state changes in a single effect
+        effect(() => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            if (this._internalOpen()) {
+                this.checkFlipPosition();
+                this.registerClickOutside();
+                // Defer focus so the input element has been rendered
+                setTimeout(() => this.searchInputRef()?.nativeElement.focus(), 0);
+            }
+        });
+        // Scroll focused option into view when keyboard-navigating
+        effect(() => {
+            const idx = this.focusedOptionIndex();
+            if (idx < 0)
+                return;
+            const listbox = this.listboxRef()?.nativeElement;
+            if (!listbox)
+                return;
+            const optionEl = listbox.querySelector(`[id$='-opt-${idx}']`);
+            optionEl?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    ngOnInit() {
+        try {
+            this.ngControl = this.injector.get(NgControl, null, {
+                optional: true,
+                self: true,
+            });
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+                const control = this.ngControl.control;
+                if (control) {
+                    this._formInvalid.set(control.invalid);
+                    this._formTouched.set(control.touched);
+                    control.events
+                        .pipe(takeUntilDestroyed(this.destroyRef))
+                        .subscribe(() => {
+                        this._formInvalid.set(control.invalid);
+                        this._formTouched.set(control.touched);
+                    });
+                }
+            }
+        }
+        catch {
+            this.ngControl = null;
+        }
+    }
+    ngOnDestroy() {
+        this.unregisterClickOutside();
+    }
+    // ── SelectContext implementation
+    registerOption(entry) {
+        this._options.update((opts) => [...opts, entry]);
+    }
+    unregisterOption(value) {
+        this._options.update((opts) => opts.filter((o) => o.value !== value));
+    }
+    // ── Open / close
+    open() {
+        if (this.isDisabled())
+            return;
+        this._internalOpen.set(true);
+    }
+    close() {
+        this._internalOpen.set(false);
+        // Reset search state synchronously so tests and consumers see immediate update
+        this.searchQuery.set('');
+        this.focusedOptionIndex.set(-1);
+        this.onTouched();
+        this.unregisterClickOutside();
+        setTimeout(() => this.triggerRef()?.nativeElement.focus(), 0);
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    // ── Value selection
+    selectValue(value) {
+        if (this.lmMultiple()) {
+            const current = this._multiValue();
+            const idx = current.findIndex((v) => this.compareValues(v, value));
+            const next = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];
+            this._multiValue.set(next);
+            this.onChange(next);
+            this.lmValueChange.emit(next);
+            // In multi-select: keep open, clear the search filter
+            this.searchQuery.set('');
+        }
+        else {
+            this._singleValue.set(value);
+            this.onChange(value);
+            this.lmValueChange.emit(value);
+            this.close();
+        }
+    }
+    /** Remove a chip by its value (without opening/closing the dropdown) */
+    removeChip(event, value) {
+        event.stopPropagation();
+        // Toggle the value off via selectValue, but preserve open/close state
+        const current = this._multiValue();
+        const next = current.filter((v) => !this.compareValues(v, value));
+        this._multiValue.set(next);
+        this.onChange(next);
+        this.lmValueChange.emit(next);
+    }
+    /** Clear the current selection */
+    clear(event) {
+        event?.stopPropagation();
+        if (this.lmMultiple()) {
+            this._multiValue.set([]);
+            this.onChange([]);
+            this.lmValueChange.emit([]);
+        }
+        else {
+            this._singleValue.set(null);
+            this.onChange(null);
+            this.lmValueChange.emit(null);
+        }
+    }
+    // ── Keyboard handlers for the closed trigger
+    onTriggerKeydown(event) {
+        if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    // ── Keyboard handlers for the search input (open state)
+    onSearchInput(event) {
+        this.searchQuery.set(event.target.value);
+        this.focusedOptionIndex.set(-1);
+    }
+    onSearchKeydown(event) {
+        const opts = this.filteredOptionsWithState();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusedOptionIndex.update((i) => Math.min(i + 1, opts.length - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusedOptionIndex.update((i) => Math.max(i - 1, 0));
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (opts.length > 0)
+                    this.focusedOptionIndex.set(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                if (opts.length > 0)
+                    this.focusedOptionIndex.set(opts.length - 1);
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const idx = this.focusedOptionIndex();
+                if (idx >= 0 && idx < opts.length) {
+                    const { entry } = opts[idx];
+                    if (!entry.disabled())
+                        this.selectValue(entry.value);
+                }
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'Tab':
+                this.close();
+                break;
+            case 'Backspace': {
+                // In multi-select: remove last chip when search is empty
+                if (this.lmMultiple() && this.searchQuery() === '') {
+                    const vals = this._multiValue();
+                    if (vals.length > 0) {
+                        this.selectValue(vals[vals.length - 1]);
+                    }
+                }
+                break;
+            }
+        }
+    }
+    // ── One-time flip check (no event listeners needed)
+    checkFlipPosition() {
+        const trigger = this.triggerRef()?.nativeElement;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const dropdownMaxHeight = 240; // matches max-h-60 (15rem = 240px)
+        const gap = 4;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        this._flipAbove.set(spaceBelow < dropdownMaxHeight + gap &&
+            rect.top > dropdownMaxHeight + gap);
+    }
+    registerClickOutside() {
+        if (this.clickOutsideHandler)
+            return;
+        this.clickOutsideHandler = (e) => {
+            if (!this.elementRef.nativeElement.contains(e.target)) {
+                this.close();
+            }
+        };
+        // Small timeout to avoid the current click event triggering close immediately
+        setTimeout(() => {
+            if (this.clickOutsideHandler) {
+                this.document.addEventListener('click', this.clickOutsideHandler);
+            }
+        }, 0);
+    }
+    unregisterClickOutside() {
+        if (this.clickOutsideHandler) {
+            this.document.removeEventListener('click', this.clickOutsideHandler);
+            this.clickOutsideHandler = null;
+        }
+    }
+    // ── ControlValueAccessor
+    writeValue(value) {
+        if (this.lmMultiple()) {
+            this._multiValue.set(Array.isArray(value) ? value : value != null ? [value] : []);
+        }
+        else {
+            this._singleValue.set(value ?? null);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: LmSelectComponent, isStandalone: true, selector: "luma-select", inputs: { lmSize: { classPropertyName: "lmSize", publicName: "lmSize", isSignal: true, isRequired: false, transformFunction: null }, lmMultiple: { classPropertyName: "lmMultiple", publicName: "lmMultiple", isSignal: true, isRequired: false, transformFunction: null }, lmPlaceholder: { classPropertyName: "lmPlaceholder", publicName: "lmPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, lmSearchPlaceholder: { classPropertyName: "lmSearchPlaceholder", publicName: "lmSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null }, lmRequired: { classPropertyName: "lmRequired", publicName: "lmRequired", isSignal: true, isRequired: false, transformFunction: null }, lmError: { classPropertyName: "lmError", publicName: "lmError", isSignal: true, isRequired: false, transformFunction: null }, lmEmptyMessage: { classPropertyName: "lmEmptyMessage", publicName: "lmEmptyMessage", isSignal: true, isRequired: false, transformFunction: null }, lmClearable: { classPropertyName: "lmClearable", publicName: "lmClearable", isSignal: true, isRequired: false, transformFunction: null }, lmCompareWith: { classPropertyName: "lmCompareWith", publicName: "lmCompareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lmValueChange: "lmValueChange" }, host: { properties: { "attr.id": "null" }, classAttribute: "block relative w-full" }, providers: [
+            { provide: SELECT_CONTEXT, useExisting: LmSelectComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LmSelectComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInputEl"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Hidden slot: options run lifecycle hooks and register themselves via SELECT_CONTEXT,\n     but are never shown from this slot. The visible listbox is rendered below. -->\n<div class=\"hidden\" aria-hidden=\"true\">\n  <ng-content />\n</div>\n\n<!-- Trigger (id placed here for <label for=\"\u2026\"> association; host id removed via host binding) -->\n<div\n  #triggerEl\n  [attr.id]=\"selectId()\"\n  [class]=\"triggerClasses()\"\n  [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-controls]=\"listboxId()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"lmRequired()\"\n  [attr.aria-disabled]=\"isDisabled()\"\n  role=\"combobox\"\n  (click)=\"!isOpen() ? toggle() : null\"\n  (keydown)=\"!isOpen() ? onTriggerKeydown($event) : null\"\n>\n  @if (isOpen()) {\n    <!-- Open state -->\n    @if (lmMultiple() && selectedChips().length > 0) {\n      <!-- Multi-select open: chips + inline search -->\n      @for (chip of selectedChips(); track chip.value) {\n        <span [class]=\"chipClasses()\">\n          <span class=\"truncate\">{{ chip.label }}</span>\n          <button\n            type=\"button\"\n            [class]=\"chipDismissClasses()\"\n            [attr.aria-label]=\"'Remove ' + chip.label\"\n            (click)=\"removeChip($event, chip.value)\"\n          >\n            <svg\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              class=\"h-full w-full\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M5 5l6 6M11 5l-6 6\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n          </button>\n        </span>\n      }\n      <input\n        #searchInputEl\n        type=\"text\"\n        [id]=\"searchInputId()\"\n        class=\"flex-1 bg-transparent outline-none border-none min-w-15 text-foreground placeholder:text-muted-foreground\"\n        [value]=\"searchQuery()\"\n        [placeholder]=\"lmSearchPlaceholder()\"\n        [attr.aria-label]=\"lmSearchPlaceholder()\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        autocomplete=\"off\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    } @else {\n      <!-- Single-select or empty multi: just the search input -->\n      <input\n        #searchInputEl\n        type=\"text\"\n        [id]=\"searchInputId()\"\n        [class]=\"searchInputClasses\"\n        [value]=\"searchQuery()\"\n        [placeholder]=\"lmSearchPlaceholder()\"\n        [attr.aria-label]=\"lmSearchPlaceholder()\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        autocomplete=\"off\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    }\n  } @else {\n    <!-- Closed state -->\n    @if (lmMultiple() && selectedChips().length > 0) {\n      <!-- Multi-select closed: show chips -->\n      <div class=\"flex flex-wrap gap-1 flex-1 min-w-0 max-h-32 overflow-y-auto\">\n        @for (chip of selectedChips(); track chip.value) {\n          <span [class]=\"chipClasses()\">\n            <span class=\"truncate\">{{ chip.label }}</span>\n            <button\n              type=\"button\"\n              [class]=\"chipDismissClasses()\"\n              [attr.aria-label]=\"'Remove ' + chip.label\"\n              (click)=\"removeChip($event, chip.value)\"\n            >\n              <svg\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                class=\"h-full w-full\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M5 5l6 6M11 5l-6 6\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </button>\n          </span>\n        }\n      </div>\n    } @else {\n      <!-- Single-select or empty multi: label/placeholder -->\n      <span\n        class=\"flex-1 truncate min-w-0\"\n        [class.text-muted-foreground]=\"!triggerLabel()\"\n      >\n        {{ triggerLabel() ?? lmPlaceholder() }}\n      </span>\n    }\n  }\n\n  <!-- Clear button \u2014 shown when clearable and has value -->\n  @if (lmClearable() && hasValue() && !isDisabled() && !isOpen()) {\n    <button\n      type=\"button\"\n      class=\"shrink-0 h-4 w-4 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors\"\n      aria-label=\"Clear selection\"\n      (click)=\"clear($event)\"\n    >\n      <svg\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        class=\"h-3.5 w-3.5\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  }\n\n  <!-- Chevron icon \u2014 rotates 180\u00B0 when open -->\n  <svg\n    class=\"ml-auto shrink-0 h-4 w-4 text-muted-foreground transition-transform duration-200\"\n    [class.rotate-180]=\"isOpen()\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M4 6l4 4 4-4\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</div>\n\n<!-- Listbox panel (absolute positioning \u2014 CSS-only, no JS tracking) -->\n@if (isOpen()) {\n  <div\n    #listboxEl\n    [id]=\"listboxId()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"lmPlaceholder()\"\n    [attr.aria-multiselectable]=\"lmMultiple()\"\n    [class]=\"listboxClasses()\"\n  >\n    @if (filteredOptionsWithState().length === 0) {\n      <div class=\"px-3 py-4 text-sm text-center text-muted-foreground\">\n        {{ lmEmptyMessage() }}\n      </div>\n    }\n\n    @for (\n      item of filteredOptionsWithState();\n      track item.entry.value;\n      let i = $index\n    ) {\n      <div\n        [id]=\"selectId() + '-opt-' + i\"\n        role=\"option\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [attr.aria-disabled]=\"item.entry.disabled()\"\n        [attr.tabindex]=\"item.entry.disabled() ? -1 : 0\"\n        [class]=\"\n          optionClasses(\n            item.isSelected,\n            item.entry.disabled(),\n            focusedOptionIndex() === i\n          )\n        \"\n        (click)=\"selectValue(item.entry.value)\"\n        (keydown.enter)=\"selectValue(item.entry.value)\"\n        (keydown.space)=\"selectValue(item.entry.value)\"\n        (mouseenter)=\"focusedOptionIndex.set(i)\"\n      >\n        @if (lmMultiple()) {\n          <!-- Mini checkbox indicator for multi-select -->\n          <span\n            class=\"h-4 w-4 shrink-0 flex items-center justify-center rounded-(--radius-2) border transition-colors duration-200\"\n            [class.bg-primary]=\"item.isSelected\"\n            [class.border-primary]=\"item.isSelected\"\n            [class.border-gray-5]=\"!item.isSelected\"\n            aria-hidden=\"true\"\n          >\n            @if (item.isSelected) {\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  d=\"M4 8l3 3 5-5\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            }\n          </span>\n        } @else {\n          <!-- Checkmark for single-select, spacer otherwise -->\n          @if (item.isSelected) {\n            <svg\n              class=\"h-4 w-4 shrink-0 text-primary\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M3 8l4 4 6-7\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          }\n        }\n\n        <span class=\"truncate\">{{ item.entry.label() }}</span>\n      </div>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'luma-select', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block relative w-full',
+                        '[attr.id]': 'null',
+                    }, providers: [
+                        { provide: SELECT_CONTEXT, useExisting: LmSelectComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LmSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<!-- Hidden slot: options run lifecycle hooks and register themselves via SELECT_CONTEXT,\n     but are never shown from this slot. The visible listbox is rendered below. -->\n<div class=\"hidden\" aria-hidden=\"true\">\n  <ng-content />\n</div>\n\n<!-- Trigger (id placed here for <label for=\"\u2026\"> association; host id removed via host binding) -->\n<div\n  #triggerEl\n  [attr.id]=\"selectId()\"\n  [class]=\"triggerClasses()\"\n  [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-controls]=\"listboxId()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-required]=\"lmRequired()\"\n  [attr.aria-disabled]=\"isDisabled()\"\n  role=\"combobox\"\n  (click)=\"!isOpen() ? toggle() : null\"\n  (keydown)=\"!isOpen() ? onTriggerKeydown($event) : null\"\n>\n  @if (isOpen()) {\n    <!-- Open state -->\n    @if (lmMultiple() && selectedChips().length > 0) {\n      <!-- Multi-select open: chips + inline search -->\n      @for (chip of selectedChips(); track chip.value) {\n        <span [class]=\"chipClasses()\">\n          <span class=\"truncate\">{{ chip.label }}</span>\n          <button\n            type=\"button\"\n            [class]=\"chipDismissClasses()\"\n            [attr.aria-label]=\"'Remove ' + chip.label\"\n            (click)=\"removeChip($event, chip.value)\"\n          >\n            <svg\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              class=\"h-full w-full\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M5 5l6 6M11 5l-6 6\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n          </button>\n        </span>\n      }\n      <input\n        #searchInputEl\n        type=\"text\"\n        [id]=\"searchInputId()\"\n        class=\"flex-1 bg-transparent outline-none border-none min-w-15 text-foreground placeholder:text-muted-foreground\"\n        [value]=\"searchQuery()\"\n        [placeholder]=\"lmSearchPlaceholder()\"\n        [attr.aria-label]=\"lmSearchPlaceholder()\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        autocomplete=\"off\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    } @else {\n      <!-- Single-select or empty multi: just the search input -->\n      <input\n        #searchInputEl\n        type=\"text\"\n        [id]=\"searchInputId()\"\n        [class]=\"searchInputClasses\"\n        [value]=\"searchQuery()\"\n        [placeholder]=\"lmSearchPlaceholder()\"\n        [attr.aria-label]=\"lmSearchPlaceholder()\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"activeDescendantId()\"\n        autocomplete=\"off\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    }\n  } @else {\n    <!-- Closed state -->\n    @if (lmMultiple() && selectedChips().length > 0) {\n      <!-- Multi-select closed: show chips -->\n      <div class=\"flex flex-wrap gap-1 flex-1 min-w-0 max-h-32 overflow-y-auto\">\n        @for (chip of selectedChips(); track chip.value) {\n          <span [class]=\"chipClasses()\">\n            <span class=\"truncate\">{{ chip.label }}</span>\n            <button\n              type=\"button\"\n              [class]=\"chipDismissClasses()\"\n              [attr.aria-label]=\"'Remove ' + chip.label\"\n              (click)=\"removeChip($event, chip.value)\"\n            >\n              <svg\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                class=\"h-full w-full\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M5 5l6 6M11 5l-6 6\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </button>\n          </span>\n        }\n      </div>\n    } @else {\n      <!-- Single-select or empty multi: label/placeholder -->\n      <span\n        class=\"flex-1 truncate min-w-0\"\n        [class.text-muted-foreground]=\"!triggerLabel()\"\n      >\n        {{ triggerLabel() ?? lmPlaceholder() }}\n      </span>\n    }\n  }\n\n  <!-- Clear button \u2014 shown when clearable and has value -->\n  @if (lmClearable() && hasValue() && !isDisabled() && !isOpen()) {\n    <button\n      type=\"button\"\n      class=\"shrink-0 h-4 w-4 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors\"\n      aria-label=\"Clear selection\"\n      (click)=\"clear($event)\"\n    >\n      <svg\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        class=\"h-3.5 w-3.5\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </button>\n  }\n\n  <!-- Chevron icon \u2014 rotates 180\u00B0 when open -->\n  <svg\n    class=\"ml-auto shrink-0 h-4 w-4 text-muted-foreground transition-transform duration-200\"\n    [class.rotate-180]=\"isOpen()\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M4 6l4 4 4-4\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</div>\n\n<!-- Listbox panel (absolute positioning \u2014 CSS-only, no JS tracking) -->\n@if (isOpen()) {\n  <div\n    #listboxEl\n    [id]=\"listboxId()\"\n    role=\"listbox\"\n    [attr.aria-label]=\"lmPlaceholder()\"\n    [attr.aria-multiselectable]=\"lmMultiple()\"\n    [class]=\"listboxClasses()\"\n  >\n    @if (filteredOptionsWithState().length === 0) {\n      <div class=\"px-3 py-4 text-sm text-center text-muted-foreground\">\n        {{ lmEmptyMessage() }}\n      </div>\n    }\n\n    @for (\n      item of filteredOptionsWithState();\n      track item.entry.value;\n      let i = $index\n    ) {\n      <div\n        [id]=\"selectId() + '-opt-' + i\"\n        role=\"option\"\n        [attr.aria-selected]=\"item.isSelected\"\n        [attr.aria-disabled]=\"item.entry.disabled()\"\n        [attr.tabindex]=\"item.entry.disabled() ? -1 : 0\"\n        [class]=\"\n          optionClasses(\n            item.isSelected,\n            item.entry.disabled(),\n            focusedOptionIndex() === i\n          )\n        \"\n        (click)=\"selectValue(item.entry.value)\"\n        (keydown.enter)=\"selectValue(item.entry.value)\"\n        (keydown.space)=\"selectValue(item.entry.value)\"\n        (mouseenter)=\"focusedOptionIndex.set(i)\"\n      >\n        @if (lmMultiple()) {\n          <!-- Mini checkbox indicator for multi-select -->\n          <span\n            class=\"h-4 w-4 shrink-0 flex items-center justify-center rounded-(--radius-2) border transition-colors duration-200\"\n            [class.bg-primary]=\"item.isSelected\"\n            [class.border-primary]=\"item.isSelected\"\n            [class.border-gray-5]=\"!item.isSelected\"\n            aria-hidden=\"true\"\n          >\n            @if (item.isSelected) {\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path\n                  d=\"M4 8l3 3 5-5\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            }\n          </span>\n        } @else {\n          <!-- Checkmark for single-select, spacer otherwise -->\n          @if (item.isSelected) {\n            <svg\n              class=\"h-4 w-4 shrink-0 text-primary\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M3 8l4 4 6-7\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          }\n        }\n\n        <span class=\"truncate\">{{ item.entry.label() }}</span>\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { lmSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSize", required: false }] }], lmMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmMultiple", required: false }] }], lmPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmPlaceholder", required: false }] }], lmSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmSearchPlaceholder", required: false }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }], lmRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmRequired", required: false }] }], lmError: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmError", required: false }] }], lmEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmEmptyMessage", required: false }] }], lmClearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmClearable", required: false }] }], lmCompareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmCompareWith", required: false }] }], lmValueChange: [{ type: i0.Output, args: ["lmValueChange"] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInputEl', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], listboxRef: [{ type: i0.ViewChild, args: ['listboxEl', { isSignal: true }] }] } });
+
+/**
+ * Option component for luma-select.
+ * Projects content into a hidden slot (the parent hides it via aria-hidden);
+ * registers its value/label/disabled as signals into the parent's registry.
+ *
+ * @example
+ * <luma-select-option [lmValue]="'apple'">Apple</luma-select-option>
+ */
+class LmSelectOptionComponent {
+    context = inject(SELECT_CONTEXT);
+    elementRef = inject((ElementRef));
+    lmValue = input.required(...(ngDevMode ? [{ debugName: "lmValue" }] : []));
+    lmDisabled = input(false, ...(ngDevMode ? [{ debugName: "lmDisabled" }] : []));
+    entry = null;
+    ngOnInit() {
+        this.entry = {
+            value: this.lmValue(),
+            label: () => this.elementRef.nativeElement.textContent?.trim() ?? '',
+            disabled: this.lmDisabled,
+        };
+        this.context.registerOption(this.entry);
+    }
+    ngOnDestroy() {
+        this.context.unregisterOption(this.lmValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LmSelectOptionComponent, isStandalone: true, selector: "luma-select-option", inputs: { lmValue: { classPropertyName: "lmValue", publicName: "lmValue", isSignal: true, isRequired: true, transformFunction: null }, lmDisabled: { classPropertyName: "lmDisabled", publicName: "lmDisabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LmSelectOptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'luma-select-option',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { lmValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmValue", required: true }] }], lmDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "lmDisabled", required: false }] }] } });
+
 // Button exports
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { ACCORDION_ITEM, DEFAULT_TOAST_CONFIG, LmAccordionContentDirective, LmAccordionGroupComponent, LmAccordionIconDirective, LmAccordionItemComponent, LmAccordionTitleDirective, LmAccordionTriggerDirective, LmBadgeDirective, LmButtonDirective, LmCardComponent, LmCardContentDirective, LmCardDescriptionDirective, LmCardHeaderDirective, LmCardTitleDirective, LmCheckboxDirective, LmErrorTextDirective, LmHelperTextDirective, LmInputDirective, LmLabelDirective, LmModalCloseComponent, LmModalComponent, LmModalContainerComponent, LmModalContentDirective, LmModalFooterDirective, LmModalHeaderDirective, LmModalOverlayComponent, LmModalTitleDirective, LmRadioDirective, LmSelectComponent, LmSelectOptionComponent, LmTabsComponent, LmTabsIndicatorComponent, LmTabsListDirective, LmTabsPanelDirective, LmTabsTriggerDirective, LmTextareaDirective, LmToastCloseComponent, LmToastContainerComponent, LmToastItemComponent, LmToastService, LmTooltipDirective, MODAL_CONTEXT, SELECT_CONTEXT, TABS_GROUP, TABS_LIST, TOAST_CONFIG, provideToastConfig };
 //# sourceMappingURL=lumaui-angular.mjs.map