@cocoar/ui-components 0.1.0-beta.75 → 0.1.0-beta.80

package/fesm2022/cocoar-ui-components.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, booleanAttribute, signal, effect, Input, ChangeDetectionStrategy, Component, forwardRef, model, output, viewChild, computed, InjectionToken, DestroyRef, afterNextRender, HostListener, ElementRef, NgZone, Directive, contentChildren, Injector, TemplateRef, HostBinding, numberAttribute, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, signal, effect, ChangeDetectionStrategy, Component, forwardRef, model, output, viewChild, computed, DestroyRef, afterNextRender, HostListener, ElementRef, NgZone, Directive, contentChildren, Injector, TemplateRef, HostBinding, numberAttribute, ViewEncapsulation } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
-import { HttpClient } from '@angular/common/http';
 import { of, fromEvent, filter } from 'rxjs';
-import { catchError, shareReplay } from 'rxjs/operators';
+import { shareReplay, catchError, finalize } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
 import { Maskito } from '@maskito/core';
 import { maskitoNumberOptionsGenerator, maskitoDateOptionsGenerator } from '@maskito/kit';
 import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
@@ -22,6 +22,96 @@ import 'prismjs/components/prism-markup';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Temporal } from '@js-temporal/polyfill';
 
+const COAR_ICON_SOURCE_ENTRY = new InjectionToken('COAR_ICON_SOURCE_ENTRY');
+const COAR_DEFAULT_ICON_SOURCE_KEY = new InjectionToken('COAR_DEFAULT_ICON_SOURCE_KEY');
+function provideCoarIconSource(options) {
+    return {
+        provide: COAR_ICON_SOURCE_ENTRY,
+        useValue: {
+            key: options.key,
+            source: options.source,
+        },
+        multi: true,
+    };
+}
+function provideCoarIconMapSource(options) {
+    return provideCoarIconSource({
+        key: options.key,
+        source: new CoarIconMapSource(options.icons),
+    });
+}
+function provideCoarDefaultIconSource(key) {
+    return {
+        provide: COAR_DEFAULT_ICON_SOURCE_KEY,
+        useValue: key,
+        multi: true,
+    };
+}
+function provideCoarHttpIconSource(options) {
+    return {
+        provide: COAR_ICON_SOURCE_ENTRY,
+        multi: true,
+        useFactory: () => {
+            const http = inject(HttpClient);
+            const getAvailableIconKeys = options.getAvailableIconKeys;
+            return {
+                key: options.key,
+                source: new CoarHttpIconSource(http, options.getUrl, getAvailableIconKeys ? () => getAvailableIconKeys(http) : undefined),
+            };
+        },
+    };
+}
+class CoarIconMapSource {
+    icons;
+    constructor(icons) {
+        this.icons = icons;
+    }
+    getIcon(name) {
+        return of(this.icons[name] ?? null);
+    }
+    getAvailableIconKeys() {
+        return of(Object.keys(this.icons).sort());
+    }
+}
+class CoarHttpIconSource {
+    http;
+    getUrl;
+    cache = new Map();
+    iconKeys$;
+    getAvailableIconKeys;
+    constructor(http, getUrl, getAvailableIconKeysFactory) {
+        this.http = http;
+        this.getUrl = getUrl;
+        if (getAvailableIconKeysFactory) {
+            this.getAvailableIconKeys = () => {
+                if (!this.iconKeys$) {
+                    this.iconKeys$ = getAvailableIconKeysFactory().pipe(shareReplay(1));
+                }
+                return this.iconKeys$;
+            };
+        }
+    }
+    getIcon(name) {
+        const cached = this.cache.get(name);
+        if (cached)
+            return cached;
+        const request$ = this.http
+            .get(this.getUrl(name), {
+            responseType: 'text',
+        })
+            .pipe(catchError(() => of(null)), shareReplay(1));
+        this.cache.set(name, request$);
+        return request$;
+    }
+    clearCache() {
+        this.cache.clear();
+        this.iconKeys$ = undefined;
+    }
+    clearIconCache(name) {
+        this.cache.delete(name);
+    }
+}
+
 /**
  * Built-in icon registry.
  *
@@ -82,90 +172,110 @@ const CORE_ICONS = {
     'x': `<svg id="Icons" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m4.59 59.41a2 2 0 0 0 2.83 0l24.58-24.58 24.59 24.58a2 2 0 0 0 2.83-2.83l-24.59-24.58 24.58-24.59a2 2 0 0 0 -2.83-2.83l-24.58 24.59-24.59-24.58a2 2 0 0 0 -2.82 2.82l24.58 24.59-24.58 24.59a2 2 0 0 0 0 2.82z"/></svg>`,
 };
 
+const COAR_BUILTIN_ICON_SOURCE_KEY = 'coar-builtin';
 /**
- * Service for loading and caching icons from both built-in registry and customer uploads.
+ * Overrides (and/or adds) built-in icons while keeping the built-in set as a base.
  *
- * Built-in icons are stored in memory and returned immediately.
- * Customer icons are fetched from the API and cached after first request.
+ * This registers a map source under the fixed key `coar-builtin`, so it replaces the
+ * built-in fallback source inside `CoarIconService`.
  */
+function provideCoarIconBuiltInOverrides(overrides) {
+    return provideCoarIconMapSource({
+        key: COAR_BUILTIN_ICON_SOURCE_KEY,
+        icons: {
+            ...CORE_ICONS,
+            ...overrides,
+        },
+    });
+}
+
 class CoarIconService {
-    http = inject(HttpClient);
-    customerIconCache = new Map();
+    builtInSource = {
+        getIcon: (name) => of(CORE_ICONS[name] ?? null),
+        getAvailableIconKeys: () => of(Object.keys(CORE_ICONS).sort()),
+    };
+    sourceEntries = [
+        { key: COAR_BUILTIN_ICON_SOURCE_KEY, source: this.builtInSource },
+        ...((inject(COAR_ICON_SOURCE_ENTRY, { optional: true }) ?? []) ??
+            []),
+    ];
+    defaultSourceOverrides = (inject(COAR_DEFAULT_ICON_SOURCE_KEY, {
+        optional: true,
+    }) ?? []);
+    sourceByKey = new Map(this.sourceEntries.map((entry) => [entry.key, entry.source]));
     /**
-     * Get an icon by name. Handles both built-in and customer icons.
+     * Get an icon by name from a specific icon source.
      *
-     * @param name - Icon identifier (e.g., "settings" or "customer:invoicePaid")
-     * @returns Observable of SVG string, or null if not found
+     * - If `sourceKey` is omitted, the default source is used.
+     * - If no source is configured, this throws to make misconfiguration obvious.
      */
-    getIcon(name) {
-        const parsed = this.parseIconName(name);
-        if (parsed.source === 'builtin') {
-            return this.getBuiltInIcon(parsed.key);
-        }
-        else if (parsed.source === 'customer') {
-            return this.getCustomerIcon(parsed.key);
-        }
-        return of(null);
+    getIcon(name, sourceKey) {
+        const source = this.getSourceOrThrow(sourceKey);
+        return source.getIcon(name);
     }
     /**
-     * Parse icon name into source type and key.
+     * List all registered icon sources.
      *
-     * Examples:
-     * - "settings" -> { source: "builtin", key: "settings" }
-     * - "customer:invoicePaid" -> { source: "customer", key: "invoicePaid" }
-     */
-    parseIconName(name) {
-        if (name.startsWith('customer:')) {
-            return {
-                source: 'customer',
-                key: name.substring(9),
-            };
-        }
-        return {
-            source: 'builtin',
-            key: name,
-        };
-    }
-    /**
-     * Get a built-in icon from the in-memory registry.
+     * This is useful for UIs that allow users to browse icons grouped by source.
      */
-    getBuiltInIcon(key) {
-        const svg = CORE_ICONS[key] || null;
-        return of(svg || null);
+    getRegisteredSources() {
+        const defaultKey = this.getDefaultSourceKeyOrThrow();
+        return Array.from(this.sourceByKey.entries()).map(([key, source]) => ({
+            key,
+            isDefault: key === defaultKey,
+            canProvideIconKeys: typeof source.getAvailableIconKeys === 'function',
+        }));
     }
     /**
-     * Get a customer icon from the API, with caching.
-     * Uses shareReplay(1) to ensure only one network request per icon.
+     * Get the available icon keys from a specific source.
+     *
+     * Throws if the source does not support listing keys.
      */
-    getCustomerIcon(key) {
-        const cached = this.customerIconCache.get(key);
-        if (cached) {
-            return cached;
+    getAvailableIconKeys(sourceKey) {
+        const entry = this.getSourceEntryOrThrow(sourceKey);
+        if (!entry.source.getAvailableIconKeys) {
+            throw new Error(`Coar icon source "${entry.key}" does not support listing available icon keys.`);
         }
-        const request$ = this.http
-            .get(`/api/icons/${key}.svg`, {
-            responseType: 'text',
-        })
-            .pipe(catchError(() => of(null)), shareReplay(1));
-        this.customerIconCache.set(key, request$);
-        return request$;
+        return entry.source.getAvailableIconKeys();
     }
-    /**
-     * Clear the customer icon cache.
-     * Useful when icons are updated on the server.
-     */
     clearCache() {
-        this.customerIconCache.clear();
+        for (const source of this.sourceByKey.values()) {
+            source.clearCache?.();
+        }
     }
-    /**
-     * Clear a specific icon from the cache.
-     */
     clearIconCache(name) {
-        const parsed = this.parseIconName(name);
-        if (parsed.source === 'customer') {
-            this.customerIconCache.delete(parsed.key);
+        for (const source of this.sourceByKey.values()) {
+            source.clearIconCache?.(name);
         }
     }
+    getSourceOrThrow(sourceKey) {
+        const effectiveKey = sourceKey ?? this.getDefaultSourceKeyOrThrow();
+        const source = this.sourceByKey.get(effectiveKey);
+        if (!source) {
+            throw new Error(`Unknown Coar icon source key: "${effectiveKey}".`);
+        }
+        return source;
+    }
+    getSourceEntryOrThrow(sourceKey) {
+        const effectiveKey = sourceKey ?? this.getDefaultSourceKeyOrThrow();
+        const source = this.sourceByKey.get(effectiveKey);
+        if (!source) {
+            throw new Error(`Unknown Coar icon source key: "${effectiveKey}".`);
+        }
+        return { key: effectiveKey, source };
+    }
+    getDefaultSourceKeyOrThrow() {
+        const overrideKey = this.defaultSourceOverrides
+            ? this.defaultSourceOverrides[this.defaultSourceOverrides.length - 1]
+            : undefined;
+        if (overrideKey) {
+            if (!this.sourceByKey.has(overrideKey)) {
+                throw new Error(`Default Coar icon source key "${overrideKey}" was provided but no source with that key is registered.`);
+            }
+            return overrideKey;
+        }
+        return COAR_BUILTIN_ICON_SOURCE_KEY;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconService, providedIn: 'root' });
 }
@@ -179,12 +289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 /**
  * COAR Icon Component
  *
- * Hybrid icon system supporting built-in icons and customer-uploaded SVGs.
+ * Icon component supporting DI-provided icon registries.
  *
  * Usage:
  * ```html
  * <coar-icon name="settings" size="md"></coar-icon>
- * <coar-icon name="customer:invoicePaid" size="lg"></coar-icon>
  * ```
  *
  * Size tokens:
@@ -198,11 +307,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 class CoarIconComponent {
     iconService = inject(CoarIconService);
     sanitizer = inject(DomSanitizer);
+    iconLoadVersion = 0;
     /**
      * Icon identifier.
-     * Examples: "settings", "user", "customer:invoicePaid"
+     * Examples: "settings", "user"
      */
     name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    /**
+     * Optional icon source key.
+     *
+     * - If omitted, the default source is used.
+     * - If multiple sources are registered, this can be used to target a specific one.
+     */
+    source = input(...(ngDevMode ? [undefined, { debugName: "source" }] : []));
     /**
      * Icon size. Defaults to 'md' (20px).
      * Can be a preset token (xs, sm, md, lg, xl, auto) or a custom CSS value (e.g., '42px', '3rem').
@@ -233,11 +350,6 @@ class CoarIconComponent {
      * Optional text label to display next to the icon.
      */
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
-    /**
-     * Optional fallback icon to show if the requested icon fails to load.
-     * If not specified and the icon fails, nothing will be rendered.
-     */
-    fallback;
     /**
      * Signal holding the sanitized SVG HTML ready for rendering.
      */
@@ -270,126 +382,114 @@ class CoarIconComponent {
     constructor() {
         effect(() => {
             const iconName = this.name();
+            const sourceKey = this.source();
             if (!iconName) {
+                this.iconLoadVersion++;
                 this.sanitizedSvg.set(null);
+                this.isLoading.set(false);
                 return;
             }
-            this.loadIcon(iconName);
-        });
-    }
-    /**
-     * Load an icon from the service and sanitize it.
-     */
-    loadIcon(name) {
-        this.isLoading.set(true);
-        this.iconService.getIcon(name).subscribe({
-            next: (svg) => {
-                if (svg) {
-                    this.sanitizedSvg.set(this.sanitizer.bypassSecurityTrustHtml(svg));
+            const loadVersion = ++this.iconLoadVersion;
+            // Clear any previously rendered SVG so the template can show the loading placeholder.
+            this.sanitizedSvg.set(null);
+            this.isLoading.set(true);
+            const subscription = this.resolveIcon$(iconName, sourceKey)
+                .pipe(finalize(() => {
+                if (loadVersion === this.iconLoadVersion) {
                     this.isLoading.set(false);
                 }
-                else {
-                    console.debug(`Loading customer icon: ${name}`);
-                    this.loadFallback();
+            }))
+                .subscribe((svg) => {
+                if (loadVersion !== this.iconLoadVersion) {
+                    return;
                 }
-            },
-            error: () => {
-                console.debug(`Loading customer icon: ${name}`);
-                this.loadFallback();
-            },
+                if (!svg) {
+                    this.sanitizedSvg.set(null);
+                    return;
+                }
+                this.sanitizedSvg.set(this.sanitizer.bypassSecurityTrustHtml(svg));
+            });
+            // Important: cancel in-flight icon loads if `name` changes or the component is destroyed.
+            return () => subscription.unsubscribe();
         });
     }
     /**
-     * Load fallback icon if available.
+     * Resolve an icon name to an SVG string.
+     *
+     * This is kept as a single observable chain so callers can cancel it.
      */
-    loadFallback() {
-        if (this.fallback) {
-            this.iconService.getIcon(this.fallback).subscribe({
-                next: (svg) => {
-                    if (svg) {
-                        this.sanitizedSvg.set(this.sanitizer.bypassSecurityTrustHtml(svg));
-                    }
-                    else {
-                        this.sanitizedSvg.set(null);
-                    }
-                    this.isLoading.set(false);
-                },
-                error: () => {
-                    this.sanitizedSvg.set(null);
-                    this.isLoading.set(false);
-                },
-            });
-        }
-        else {
-            this.sanitizedSvg.set(null);
-            this.isLoading.set(false);
-        }
+    resolveIcon$(name, sourceKey) {
+        return this.iconService.getIcon(name, sourceKey).pipe(catchError(() => of(null)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarIconComponent, isStandalone: true, selector: "coar-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, rotateTransition: { classPropertyName: "rotateTransition", publicName: "rotateTransition", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-name": "name()" } }, ngImport: i0, template: `
-    @if(name()) { @if (sanitizedSvg(); as svg) {
-    <div
-      class="coar-icon"
-      [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
-      [class.coar-icon--spin]="spin()"
-      [style.transform]="'rotate(' + rotate() + 'deg)'"
-      [style.color]="color()"
-      [style.width]="!isPresetSize(size()) ? size() : null"
-      [style.height]="!isPresetSize(size()) ? size() : null"
-      [style.transition]="getRotateTransitionValue()"
-      [innerHTML]="svg"
-    ></div>
-    } @else if (isLoading()) {
-    <div
-      class="coar-icon coar-icon--loading"
-      [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
-      [style.width]="!isPresetSize(size()) ? size() : null"
-      [style.height]="!isPresetSize(size()) ? size() : null"
-    ></div>
-    } } @if (label()) {
-    <span class="coar-icon__label">{{ label() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarIconComponent, isStandalone: true, selector: "coar-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, rotateTransition: { classPropertyName: "rotateTransition", publicName: "rotateTransition", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.icon-name": "name()" } }, ngImport: i0, template: `
+    @if (name()) {
+      @if (sanitizedSvg(); as svg) {
+        <div
+          class="coar-icon"
+          [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
+          [class.coar-icon--spin]="spin()"
+          [style.transform]="'rotate(' + rotate() + 'deg)'"
+          [style.color]="color()"
+          [style.width]="!isPresetSize(size()) ? size() : null"
+          [style.height]="!isPresetSize(size()) ? size() : null"
+          [style.transition]="getRotateTransitionValue()"
+          [innerHTML]="svg"
+        ></div>
+      } @else if (isLoading()) {
+        <div
+          class="coar-icon coar-icon--loading"
+          [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
+          [style.width]="!isPresetSize(size()) ? size() : null"
+          [style.height]="!isPresetSize(size()) ? size() : null"
+        ></div>
+      }
+    }
+    @if (label()) {
+      <span class="coar-icon__label">{{ label() }}</span>
     } @else {
-    <span class="coar-icon__label">
-      <ng-content></ng-content>
-    </span>
+      <span class="coar-icon__label">
+        <ng-content></ng-content>
+      </span>
     }
   `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;max-width:100%;max-height:100%}.coar-icon{display:flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;aspect-ratio:1}.coar-icon ::ng-deep svg{width:100%;height:100%;display:block;fill:currentColor}.coar-icon ::ng-deep svg path,.coar-icon ::ng-deep svg circle,.coar-icon ::ng-deep svg rect,.coar-icon ::ng-deep svg polygon,.coar-icon ::ng-deep svg polyline,.coar-icon ::ng-deep svg line,.coar-icon ::ng-deep svg ellipse{fill:currentColor}.coar-icon ::ng-deep svg[stroke=currentColor] path,.coar-icon ::ng-deep svg[stroke=currentColor] circle,.coar-icon ::ng-deep svg[stroke=currentColor] line{fill:none;stroke:currentColor}.coar-icon--xs{width:12px;height:12px}.coar-icon--sm{width:16px;height:16px}.coar-icon--md{width:20px;height:20px}.coar-icon--lg{width:24px;height:24px}.coar-icon--xl{width:32px;height:32px}.coar-icon--auto{width:auto;height:100%;max-width:1em;max-height:1em}.coar-icon--loading{opacity:.3;background:currentColor;border-radius:2px}.coar-icon--spin{animation:coar-icon-spin 1s linear infinite}.coar-icon__label{margin-left:var(--coar-spacing-xs)}.coar-icon__label:empty{margin-left:0}@keyframes coar-icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'coar-icon', standalone: true, imports: [], template: `
-    @if(name()) { @if (sanitizedSvg(); as svg) {
-    <div
-      class="coar-icon"
-      [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
-      [class.coar-icon--spin]="spin()"
-      [style.transform]="'rotate(' + rotate() + 'deg)'"
-      [style.color]="color()"
-      [style.width]="!isPresetSize(size()) ? size() : null"
-      [style.height]="!isPresetSize(size()) ? size() : null"
-      [style.transition]="getRotateTransitionValue()"
-      [innerHTML]="svg"
-    ></div>
-    } @else if (isLoading()) {
-    <div
-      class="coar-icon coar-icon--loading"
-      [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
-      [style.width]="!isPresetSize(size()) ? size() : null"
-      [style.height]="!isPresetSize(size()) ? size() : null"
-    ></div>
-    } } @if (label()) {
-    <span class="coar-icon__label">{{ label() }}</span>
+    @if (name()) {
+      @if (sanitizedSvg(); as svg) {
+        <div
+          class="coar-icon"
+          [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
+          [class.coar-icon--spin]="spin()"
+          [style.transform]="'rotate(' + rotate() + 'deg)'"
+          [style.color]="color()"
+          [style.width]="!isPresetSize(size()) ? size() : null"
+          [style.height]="!isPresetSize(size()) ? size() : null"
+          [style.transition]="getRotateTransitionValue()"
+          [innerHTML]="svg"
+        ></div>
+      } @else if (isLoading()) {
+        <div
+          class="coar-icon coar-icon--loading"
+          [class]="isPresetSize(size()) ? 'coar-icon--' + size() : ''"
+          [style.width]="!isPresetSize(size()) ? size() : null"
+          [style.height]="!isPresetSize(size()) ? size() : null"
+        ></div>
+      }
+    }
+    @if (label()) {
+      <span class="coar-icon__label">{{ label() }}</span>
     } @else {
-    <span class="coar-icon__label">
-      <ng-content></ng-content>
-    </span>
+      <span class="coar-icon__label">
+        <ng-content></ng-content>
+      </span>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.icon-name]': 'name()',
                     }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;max-width:100%;max-height:100%}.coar-icon{display:flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;aspect-ratio:1}.coar-icon ::ng-deep svg{width:100%;height:100%;display:block;fill:currentColor}.coar-icon ::ng-deep svg path,.coar-icon ::ng-deep svg circle,.coar-icon ::ng-deep svg rect,.coar-icon ::ng-deep svg polygon,.coar-icon ::ng-deep svg polyline,.coar-icon ::ng-deep svg line,.coar-icon ::ng-deep svg ellipse{fill:currentColor}.coar-icon ::ng-deep svg[stroke=currentColor] path,.coar-icon ::ng-deep svg[stroke=currentColor] circle,.coar-icon ::ng-deep svg[stroke=currentColor] line{fill:none;stroke:currentColor}.coar-icon--xs{width:12px;height:12px}.coar-icon--sm{width:16px;height:16px}.coar-icon--md{width:20px;height:20px}.coar-icon--lg{width:24px;height:24px}.coar-icon--xl{width:32px;height:32px}.coar-icon--auto{width:auto;height:100%;max-width:1em;max-height:1em}.coar-icon--loading{opacity:.3;background:currentColor;border-radius:2px}.coar-icon--spin{animation:coar-icon-spin 1s linear infinite}.coar-icon__label{margin-left:var(--coar-spacing-xs)}.coar-icon__label:empty{margin-left:0}@keyframes coar-icon-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], rotateTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateTransition", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fallback: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], rotateTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateTransition", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 function coarProvideValueAccessor(type) {
     return {
@@ -498,7 +598,7 @@ class CoarTextInputComponent extends CoarControlValueAccessor {
         this.inputRef()?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTextInputComponent, isStandalone: true, selector: "coar-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-text-input--xs": "size() === \"xs\"", "class.coar-text-input--sm": "size() === \"sm\"", "class.coar-text-input--md": "size() === \"md\"", "class.coar-text-input--lg": "size() === \"lg\"", "class.coar-text-input--multiline": "isMultiline()" } }, providers: [coarProvideValueAccessor(() => CoarTextInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-text-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-text-input-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-text-input-container\"\n    [class.coar-text-input-focused]=\"isFocused()\"\n    [class.coar-text-input-disabled]=\"isDisabled()\"\n    [class.coar-text-input-readonly]=\"readonly()\"\n    [class.coar-text-input-error]=\"hasError()\"\n  >\n    <!-- Prefix (only for single-line) -->\n    @if (!isMultiline()) {\n    <span class=\"coar-text-input-prefix\">\n      @if (prefix()) {\n      {{ prefix() }}\n      }\n      <ng-content select=\"[prefix]\"></ng-content>\n    </span>\n    }\n\n    <!-- Input Element (single-line) -->\n    @if (!isMultiline()) {\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      type=\"text\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      class=\"coar-text-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    }\n\n    <!-- Textarea (multiline) -->\n    @if (isMultiline()) {\n    <textarea\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [rows]=\"rows()\"\n      class=\"coar-text-input-field coar-text-input-textarea\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    ></textarea>\n    }\n\n    <!-- Suffix (only for single-line) -->\n    @if (!isMultiline()) {\n    <span class=\"coar-text-input-suffix\">\n      @if (suffix()) {\n      {{ suffix() }}\n      }\n      <ng-content select=\"[suffix]\"></ng-content>\n    </span>\n    }\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n    <coar-icon\n      name=\"x\"\n      size=\"auto\"\n      class=\"coar-text-input-clear\"\n      [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n      aria-hidden=\"true\"\n      (click)=\"onClear()\"\n    />\n    }\n\n    <!-- Suffix Actions (always visible, e.g., action buttons) -->\n    @if (!isMultiline()) {\n    <span class=\"coar-text-input-suffix-actions\">\n      <ng-content select=\"[suffixAction]\"></ng-content>\n    </span>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 4px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:60px}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix{display:flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{display:none;padding-right:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:11px}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:12px}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:16px}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus{outline:none}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTextInputComponent, isStandalone: true, selector: "coar-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-text-input--xs": "size() === \"xs\"", "class.coar-text-input--sm": "size() === \"sm\"", "class.coar-text-input--md": "size() === \"md\"", "class.coar-text-input--lg": "size() === \"lg\"", "class.coar-text-input--multiline": "isMultiline()" } }, providers: [coarProvideValueAccessor(() => CoarTextInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-text-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-text-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-text-input-container\"\n    [class.coar-text-input-focused]=\"isFocused()\"\n    [class.coar-text-input-disabled]=\"isDisabled()\"\n    [class.coar-text-input-readonly]=\"readonly()\"\n    [class.coar-text-input-error]=\"hasError()\"\n  >\n    <!-- Prefix (only for single-line) -->\n    @if (!isMultiline()) {\n      <span class=\"coar-text-input-prefix\">\n        @if (prefix()) {\n          {{ prefix() }}\n        }\n        <ng-content select=\"[prefix]\"></ng-content>\n      </span>\n    }\n\n    <!-- Input Element (single-line) -->\n    @if (!isMultiline()) {\n      <input\n        #inputElement\n        [id]=\"inputId()\"\n        [name]=\"name()\"\n        type=\"text\"\n        [value]=\"value()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [required]=\"required()\"\n        [autocomplete]=\"autocomplete()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n        [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n        class=\"coar-text-input-field\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    }\n\n    <!-- Textarea (multiline) -->\n    @if (isMultiline()) {\n      <textarea\n        #inputElement\n        [id]=\"inputId()\"\n        [name]=\"name()\"\n        [value]=\"value()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [required]=\"required()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n        [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n        [rows]=\"rows()\"\n        class=\"coar-text-input-field coar-text-input-textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    }\n\n    <!-- Suffix (only for single-line) -->\n    @if (!isMultiline()) {\n      <span class=\"coar-text-input-suffix\">\n        @if (suffix()) {\n          {{ suffix() }}\n        }\n        <ng-content select=\"[suffix]\"></ng-content>\n      </span>\n    }\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n      <coar-icon\n        name=\"x\"\n        source=\"coar-builtin\"\n        size=\"auto\"\n        class=\"coar-text-input-clear\"\n        [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n        aria-hidden=\"true\"\n        (click)=\"onClear()\"\n      />\n    }\n\n    <!-- Suffix Actions (always visible, e.g., action buttons) -->\n    @if (!isMultiline()) {\n      <span class=\"coar-text-input-suffix-actions\">\n        <ng-content select=\"[suffixAction]\"></ng-content>\n      </span>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 4px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:60px}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix{display:flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{display:none;padding-right:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:11px}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:12px}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:16px}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus{outline:none}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTextInputComponent, decorators: [{
             type: Component,
@@ -508,7 +608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-text-input--md]': 'size() === "md"',
                         '[class.coar-text-input--lg]': 'size() === "lg"',
                         '[class.coar-text-input--multiline]': 'isMultiline()',
-                    }, template: "<div class=\"coar-text-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-text-input-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-text-input-container\"\n    [class.coar-text-input-focused]=\"isFocused()\"\n    [class.coar-text-input-disabled]=\"isDisabled()\"\n    [class.coar-text-input-readonly]=\"readonly()\"\n    [class.coar-text-input-error]=\"hasError()\"\n  >\n    <!-- Prefix (only for single-line) -->\n    @if (!isMultiline()) {\n    <span class=\"coar-text-input-prefix\">\n      @if (prefix()) {\n      {{ prefix() }}\n      }\n      <ng-content select=\"[prefix]\"></ng-content>\n    </span>\n    }\n\n    <!-- Input Element (single-line) -->\n    @if (!isMultiline()) {\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      type=\"text\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      class=\"coar-text-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    }\n\n    <!-- Textarea (multiline) -->\n    @if (isMultiline()) {\n    <textarea\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [rows]=\"rows()\"\n      class=\"coar-text-input-field coar-text-input-textarea\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    ></textarea>\n    }\n\n    <!-- Suffix (only for single-line) -->\n    @if (!isMultiline()) {\n    <span class=\"coar-text-input-suffix\">\n      @if (suffix()) {\n      {{ suffix() }}\n      }\n      <ng-content select=\"[suffix]\"></ng-content>\n    </span>\n    }\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n    <coar-icon\n      name=\"x\"\n      size=\"auto\"\n      class=\"coar-text-input-clear\"\n      [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n      aria-hidden=\"true\"\n      (click)=\"onClear()\"\n    />\n    }\n\n    <!-- Suffix Actions (always visible, e.g., action buttons) -->\n    @if (!isMultiline()) {\n    <span class=\"coar-text-input-suffix-actions\">\n      <ng-content select=\"[suffixAction]\"></ng-content>\n    </span>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 4px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:60px}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix{display:flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{display:none;padding-right:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:11px}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:12px}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:16px}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus{outline:none}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-text-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-text-input-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-text-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-text-input-container\"\n    [class.coar-text-input-focused]=\"isFocused()\"\n    [class.coar-text-input-disabled]=\"isDisabled()\"\n    [class.coar-text-input-readonly]=\"readonly()\"\n    [class.coar-text-input-error]=\"hasError()\"\n  >\n    <!-- Prefix (only for single-line) -->\n    @if (!isMultiline()) {\n      <span class=\"coar-text-input-prefix\">\n        @if (prefix()) {\n          {{ prefix() }}\n        }\n        <ng-content select=\"[prefix]\"></ng-content>\n      </span>\n    }\n\n    <!-- Input Element (single-line) -->\n    @if (!isMultiline()) {\n      <input\n        #inputElement\n        [id]=\"inputId()\"\n        [name]=\"name()\"\n        type=\"text\"\n        [value]=\"value()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [required]=\"required()\"\n        [autocomplete]=\"autocomplete()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n        [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n        class=\"coar-text-input-field\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    }\n\n    <!-- Textarea (multiline) -->\n    @if (isMultiline()) {\n      <textarea\n        #inputElement\n        [id]=\"inputId()\"\n        [name]=\"name()\"\n        [value]=\"value()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [required]=\"required()\"\n        [attr.maxlength]=\"maxlength()\"\n        [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n        [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n        [rows]=\"rows()\"\n        class=\"coar-text-input-field coar-text-input-textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    }\n\n    <!-- Suffix (only for single-line) -->\n    @if (!isMultiline()) {\n      <span class=\"coar-text-input-suffix\">\n        @if (suffix()) {\n          {{ suffix() }}\n        }\n        <ng-content select=\"[suffix]\"></ng-content>\n      </span>\n    }\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n      <coar-icon\n        name=\"x\"\n        source=\"coar-builtin\"\n        size=\"auto\"\n        class=\"coar-text-input-clear\"\n        [class.coar-text-input-clear--multiline]=\"isMultiline()\"\n        aria-hidden=\"true\"\n        (click)=\"onClear()\"\n      />\n    }\n\n    <!-- Suffix Actions (always visible, e.g., action buttons) -->\n    @if (!isMultiline()) {\n      <span class=\"coar-text-input-suffix-actions\">\n        <ng-content select=\"[suffixAction]\"></ng-content>\n      </span>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-text-input-message\" [class.coar-text-input-message-error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-text-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-text-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-text-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-text-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-text-input--multiline) .coar-text-input-container{height:auto;min-height:var(--coar-component-md-height);align-items:flex-start}:host(.coar-text-input--xs) .coar-text-input-container{height:var(--coar-component-xs-height)}:host(.coar-text-input--sm) .coar-text-input-container{height:var(--coar-component-sm-height)}:host(.coar-text-input--md) .coar-text-input-container{height:var(--coar-component-md-height)}:host(.coar-text-input--lg) .coar-text-input-container{height:var(--coar-component-lg-height)}:host(.coar-text-input--multiline.coar-text-input--xs) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--sm) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--md) .coar-text-input-container,:host(.coar-text-input--multiline.coar-text-input--lg) .coar-text-input-container{height:auto}:host(.coar-text-input--xs) .coar-text-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-text-input--xs) .coar-text-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-text-input--sm) .coar-text-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-text-input--sm) .coar-text-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-text-input--lg) .coar-text-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-text-input--lg) .coar-text-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-text-input-container:hover:not(.coar-text-input-disabled):not(.coar-text-input-readonly):not(.coar-text-input-error):not(.coar-text-input-focused){border-color:var(--coar-border-input-hover)}.coar-text-input-container.coar-text-input-focused:not(.coar-text-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-text-input-container.coar-text-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-text-input-container.coar-text-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-text-input-container.coar-text-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-container.coar-text-input-error.coar-text-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-text-input-container.coar-text-input-error:hover:not(.coar-text-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-text-input-field{flex:1;min-width:0;height:100%;padding:0 4px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-text-input-textarea{padding:var(--coar-spacing-s);resize:vertical;min-height:60px}.coar-text-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-text-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-text-input-field:read-only{cursor:default}.coar-text-input-prefix{display:flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix{display:flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-text-input-suffix:empty{display:none;padding-right:0}.coar-text-input-suffix-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding-right:var(--coar-spacing-s);flex-shrink:0}.coar-text-input-suffix-actions:empty{display:none}.coar-text-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-text-input-focused .coar-text-input-clear,.coar-text-input-container:hover .coar-text-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-text-input--xs) .coar-text-input-clear{font-size:11px}:host(.coar-text-input--sm) .coar-text-input-clear{font-size:12px}:host(.coar-text-input--lg) .coar-text-input-clear{font-size:16px}.coar-text-input-clear--multiline{position:absolute;top:var(--coar-spacing-s);right:var(--coar-spacing-s);margin-right:0}.coar-text-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-text-input-clear:focus{outline:none}.coar-text-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-text-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-text-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
 
 /**
@@ -998,7 +1098,7 @@ class CoarNumberInputComponent extends CoarControlValueAccessor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarNumberInputComponent, isStandalone: true, selector: "coar-number-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, stepperButtons: { classPropertyName: "stepperButtons", publicName: "stepperButtons", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { listeners: { "document:mousemove": "onDragMove($event)", "document:mouseup": "onDragEnd()" }, properties: { "class.coar-number-input--xs": "size() === \"xs\"", "class.coar-number-input--sm": "size() === \"sm\"", "class.coar-number-input--md": "size() === \"md\"", "class.coar-number-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarNumberInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-number-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label\n    [for]=\"inputId()\"\n    class=\"coar-number-input-label\"\n    [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n    (mousedown)=\"onDragStart($event)\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-number-input-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-number-input-container\"\n    [class.coar-number-input-focused]=\"isFocused()\"\n    [class.coar-number-input-disabled]=\"isDisabled()\"\n    [class.coar-number-input-readonly]=\"readonly()\"\n    [class.coar-number-input-error]=\"hasError()\"\n    [class.coar-number-input-dragging]=\"isDragging()\"\n  >\n    <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      size=\"auto\"\n      class=\"coar-number-input-clear\"\n      [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n      aria-hidden=\"true\"\n      (click)=\"onClear()\"\n    />\n\n    <!-- Prefix -->\n    <span class=\"coar-number-input-prefix\">\n      @if (prefix()) {\n      {{ prefix() }}\n      }\n      <ng-content select=\"[prefix]\"></ng-content>\n    </span>\n\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value()\"\n      class=\"coar-number-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <!-- Suffix -->\n    <span class=\"coar-number-input-suffix\">\n      @if (suffix()) {\n      {{ suffix() }}\n      }\n      <ng-content select=\"[suffix]\"></ng-content>\n    </span>\n\n    <!-- Increment/Decrement Buttons -->\n    @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n    <div class=\"coar-number-input-buttons\">\n      @if (showDecrementButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-number-input-button coar-number-input-button--decrement\"\n        [disabled]=\"!canDecrement()\"\n        aria-label=\"Decrease value\"\n        (click)=\"decrement()\"\n        tabindex=\"-1\"\n      >\n        <coar-icon name=\"minus\" [size]=\"iconSize()\"></coar-icon>\n      </button>\n      } @if (showIncrementButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-number-input-button coar-number-input-button--increment\"\n        [disabled]=\"!canIncrement()\"\n        aria-label=\"Increase value\"\n        (click)=\"increment()\"\n        tabindex=\"-1\"\n      >\n        <coar-icon name=\"plus\" [size]=\"iconSize()\"></coar-icon>\n      </button>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:11px}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:12px}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:16px}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarNumberInputComponent, isStandalone: true, selector: "coar-number-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, stepperButtons: { classPropertyName: "stepperButtons", publicName: "stepperButtons", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { listeners: { "document:mousemove": "onDragMove($event)", "document:mouseup": "onDragEnd()" }, properties: { "class.coar-number-input--xs": "size() === \"xs\"", "class.coar-number-input--sm": "size() === \"sm\"", "class.coar-number-input--md": "size() === \"md\"", "class.coar-number-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarNumberInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-number-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label\n      [for]=\"inputId()\"\n      class=\"coar-number-input-label\"\n      [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-number-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-number-input-container\"\n    [class.coar-number-input-focused]=\"isFocused()\"\n    [class.coar-number-input-disabled]=\"isDisabled()\"\n    [class.coar-number-input-readonly]=\"readonly()\"\n    [class.coar-number-input-error]=\"hasError()\"\n    [class.coar-number-input-dragging]=\"isDragging()\"\n  >\n    <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-number-input-clear\"\n      [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n      aria-hidden=\"true\"\n      (click)=\"onClear()\"\n    />\n\n    <!-- Prefix -->\n    <span class=\"coar-number-input-prefix\">\n      @if (prefix()) {\n        {{ prefix() }}\n      }\n      <ng-content select=\"[prefix]\"></ng-content>\n    </span>\n\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value()\"\n      class=\"coar-number-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <!-- Suffix -->\n    <span class=\"coar-number-input-suffix\">\n      @if (suffix()) {\n        {{ suffix() }}\n      }\n      <ng-content select=\"[suffix]\"></ng-content>\n    </span>\n\n    <!-- Increment/Decrement Buttons -->\n    @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n      <div class=\"coar-number-input-buttons\">\n        @if (showDecrementButton()) {\n          <button\n            type=\"button\"\n            class=\"coar-number-input-button coar-number-input-button--decrement\"\n            [disabled]=\"!canDecrement()\"\n            aria-label=\"Decrease value\"\n            (click)=\"decrement()\"\n            tabindex=\"-1\"\n          >\n            <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n          </button>\n        }\n        @if (showIncrementButton()) {\n          <button\n            type=\"button\"\n            class=\"coar-number-input-button coar-number-input-button--increment\"\n            [disabled]=\"!canIncrement()\"\n            aria-label=\"Increase value\"\n            (click)=\"increment()\"\n            tabindex=\"-1\"\n          >\n            <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:11px}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:12px}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:16px}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarNumberInputComponent, decorators: [{
             type: Component,
@@ -1007,7 +1107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-number-input--sm]': 'size() === "sm"',
                         '[class.coar-number-input--md]': 'size() === "md"',
                         '[class.coar-number-input--lg]': 'size() === "lg"',
-                    }, template: "<div class=\"coar-number-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label\n    [for]=\"inputId()\"\n    class=\"coar-number-input-label\"\n    [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n    (mousedown)=\"onDragStart($event)\"\n  >\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-number-input-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-number-input-container\"\n    [class.coar-number-input-focused]=\"isFocused()\"\n    [class.coar-number-input-disabled]=\"isDisabled()\"\n    [class.coar-number-input-readonly]=\"readonly()\"\n    [class.coar-number-input-error]=\"hasError()\"\n    [class.coar-number-input-dragging]=\"isDragging()\"\n  >\n    <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      size=\"auto\"\n      class=\"coar-number-input-clear\"\n      [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n      aria-hidden=\"true\"\n      (click)=\"onClear()\"\n    />\n\n    <!-- Prefix -->\n    <span class=\"coar-number-input-prefix\">\n      @if (prefix()) {\n      {{ prefix() }}\n      }\n      <ng-content select=\"[prefix]\"></ng-content>\n    </span>\n\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value()\"\n      class=\"coar-number-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <!-- Suffix -->\n    <span class=\"coar-number-input-suffix\">\n      @if (suffix()) {\n      {{ suffix() }}\n      }\n      <ng-content select=\"[suffix]\"></ng-content>\n    </span>\n\n    <!-- Increment/Decrement Buttons -->\n    @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n    <div class=\"coar-number-input-buttons\">\n      @if (showDecrementButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-number-input-button coar-number-input-button--decrement\"\n        [disabled]=\"!canDecrement()\"\n        aria-label=\"Decrease value\"\n        (click)=\"decrement()\"\n        tabindex=\"-1\"\n      >\n        <coar-icon name=\"minus\" [size]=\"iconSize()\"></coar-icon>\n      </button>\n      } @if (showIncrementButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-number-input-button coar-number-input-button--increment\"\n        [disabled]=\"!canIncrement()\"\n        aria-label=\"Increase value\"\n        (click)=\"increment()\"\n        tabindex=\"-1\"\n      >\n        <coar-icon name=\"plus\" [size]=\"iconSize()\"></coar-icon>\n      </button>\n      }\n    </div>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:11px}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:12px}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:16px}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-number-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label\n      [for]=\"inputId()\"\n      class=\"coar-number-input-label\"\n      [class.coar-number-input-label--draggable]=\"!isDisabled() && !readonly()\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-number-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-number-input-container\"\n    [class.coar-number-input-focused]=\"isFocused()\"\n    [class.coar-number-input-disabled]=\"isDisabled()\"\n    [class.coar-number-input-readonly]=\"readonly()\"\n    [class.coar-number-input-error]=\"hasError()\"\n    [class.coar-number-input-dragging]=\"isDragging()\"\n  >\n    <!-- Clear indicator (left side for number input) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-number-input-clear\"\n      [class.coar-number-input-clear--hidden]=\"!showClearButton()\"\n      aria-hidden=\"true\"\n      (click)=\"onClear()\"\n    />\n\n    <!-- Prefix -->\n    <span class=\"coar-number-input-prefix\">\n      @if (prefix()) {\n        {{ prefix() }}\n      }\n      <ng-content select=\"[prefix]\"></ng-content>\n    </span>\n\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      type=\"text\"\n      inputmode=\"decimal\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      [attr.aria-valuemin]=\"min()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"value()\"\n      class=\"coar-number-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (keydown)=\"onKeyDown($event)\"\n    />\n\n    <!-- Suffix -->\n    <span class=\"coar-number-input-suffix\">\n      @if (suffix()) {\n        {{ suffix() }}\n      }\n      <ng-content select=\"[suffix]\"></ng-content>\n    </span>\n\n    <!-- Increment/Decrement Buttons -->\n    @if ((showIncrementButton() || showDecrementButton()) && !isDisabled() && !readonly()) {\n      <div class=\"coar-number-input-buttons\">\n        @if (showDecrementButton()) {\n          <button\n            type=\"button\"\n            class=\"coar-number-input-button coar-number-input-button--decrement\"\n            [disabled]=\"!canDecrement()\"\n            aria-label=\"Decrease value\"\n            (click)=\"decrement()\"\n            tabindex=\"-1\"\n          >\n            <coar-icon name=\"minus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n          </button>\n        }\n        @if (showIncrementButton()) {\n          <button\n            type=\"button\"\n            class=\"coar-number-input-button coar-number-input-button--increment\"\n            [disabled]=\"!canIncrement()\"\n            aria-label=\"Increase value\"\n            (click)=\"increment()\"\n            tabindex=\"-1\"\n          >\n            <coar-icon name=\"plus\" source=\"coar-builtin\" [size]=\"iconSize()\"></coar-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-number-input-message\" [class.coar-number-input-message-error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-number-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-number-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-number-input-label--draggable{cursor:ew-resize}.coar-number-input-label--draggable:hover{color:var(--coar-text-accent-primary)}.coar-number-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-number-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-number-input--xs) .coar-number-input-container{height:var(--coar-component-xs-height)}:host(.coar-number-input--sm) .coar-number-input-container{height:var(--coar-component-sm-height)}:host(.coar-number-input--md) .coar-number-input-container{height:var(--coar-component-md-height)}:host(.coar-number-input--lg) .coar-number-input-container{height:var(--coar-component-lg-height)}:host(.coar-number-input--xs) .coar-number-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-number-input--xs) .coar-number-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-number-input--sm) .coar-number-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-number-input--sm) .coar-number-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-number-input--lg) .coar-number-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-number-input--lg) .coar-number-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-number-input-container:hover:not(.coar-number-input-disabled):not(.coar-number-input-readonly):not(.coar-number-input-error):not(.coar-number-input-focused){border-color:var(--coar-border-input-hover)}.coar-number-input-container.coar-number-input-focused:not(.coar-number-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-number-input-container.coar-number-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-number-input-container.coar-number-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-number-input-container.coar-number-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-error.coar-number-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-number-input-container.coar-number-input-error:hover:not(.coar-number-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-number-input-container.coar-number-input-dragging{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-number-input-field{flex:1;min-width:0;height:100%;padding:0 var(--coar-spacing-s);border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);text-align:right;font-variant-numeric:tabular-nums}.coar-number-input-field::placeholder{color:var(--coar-text-neutral-tertiary);text-align:right}.coar-number-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-number-input-field:read-only{cursor:default}.coar-number-input-field::-webkit-inner-spin-button,.coar-number-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.coar-number-input-field{-moz-appearance:textfield}.coar-number-input-prefix{display:inline-flex;align-items:center;padding-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-prefix:empty{padding-left:0;flex-basis:0}.coar-number-input-suffix{display:inline-flex;align-items:center;padding-right:var(--coar-spacing-s);color:var(--coar-icon-neutral-secondary);font-size:var(--coar-body-small-base-size);white-space:nowrap;flex-shrink:0}.coar-number-input-suffix:empty{padding-right:0;flex-basis:0}.coar-number-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-left:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-number-input-focused .coar-number-input-clear,.coar-number-input-container:hover .coar-number-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-number-input--xs) .coar-number-input-clear{font-size:11px}:host(.coar-number-input--sm) .coar-number-input-clear{font-size:12px}:host(.coar-number-input--lg) .coar-number-input-clear{font-size:16px}.coar-number-input-clear--hidden{opacity:0;pointer-events:none}.coar-number-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-number-input-clear:focus{outline:none}.coar-number-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-number-input-buttons{display:flex;flex-direction:row;height:100%;border-left:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-button{display:flex;align-items:center;justify-content:center;width:28px;height:100%;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:background-color .15s ease,color .15s ease}:host(.coar-number-input--xs) .coar-number-input-button{width:20px}:host(.coar-number-input--sm) .coar-number-input-button{width:24px}:host(.coar-number-input--lg) .coar-number-input-button{width:32px}.coar-number-input-button:hover:not(:disabled){background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-number-input-button:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-number-input-button:disabled{color:var(--coar-icon-neutral-disabled);cursor:not-allowed}.coar-number-input-button--decrement{border-right:1px solid var(--coar-background-neutral-tertiary)}.coar-number-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-number-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], stepperButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperButtons", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], onDragMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
@@ -1105,7 +1205,7 @@ class CoarPasswordInputComponent extends CoarControlValueAccessor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarPasswordInputComponent, isStandalone: true, selector: "coar-password-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-password-input--xs": "size() === \"xs\"", "class.coar-password-input--sm": "size() === \"sm\"", "class.coar-password-input--md": "size() === \"md\"", "class.coar-password-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarPasswordInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-password-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-password-input-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-password-input-container\"\n    [class.coar-password-input-focused]=\"isFocused()\"\n    [class.coar-password-input-disabled]=\"isDisabled()\"\n    [class.coar-password-input-readonly]=\"readonly()\"\n    [class.coar-password-input-error]=\"hasError()\"\n  >\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      class=\"coar-password-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n    <coar-icon name=\"x\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n    }\n\n    <!-- Toggle Visibility -->\n    <coar-icon\n      [name]=\"toggleIcon()\"\n      size=\"auto\"\n      class=\"coar-password-input-toggle\"\n      [attr.aria-label]=\"toggleAriaLabel()\"\n      aria-hidden=\"true\"\n      (click)=\"togglePasswordVisibility()\"\n    />\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 8px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:11px}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:12px}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:16px}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:4px 8px;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:14px;cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:11px;padding:2px 6px}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:12px;padding:3px 7px}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:16px;padding:5px 9px}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarPasswordInputComponent, isStandalone: true, selector: "coar-password-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", blurred: "blurred", focused: "focused", clear: "clear" }, host: { properties: { "class.coar-password-input--xs": "size() === \"xs\"", "class.coar-password-input--sm": "size() === \"sm\"", "class.coar-password-input--md": "size() === \"md\"", "class.coar-password-input--lg": "size() === \"lg\"" } }, providers: [coarProvideValueAccessor(() => CoarPasswordInputComponent)], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-password-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-password-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-password-input-container\"\n    [class.coar-password-input-focused]=\"isFocused()\"\n    [class.coar-password-input-disabled]=\"isDisabled()\"\n    [class.coar-password-input-readonly]=\"readonly()\"\n    [class.coar-password-input-error]=\"hasError()\"\n  >\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      class=\"coar-password-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n      <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n    }\n\n    <!-- Toggle Visibility -->\n    <coar-icon\n      [name]=\"toggleIcon()\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-password-input-toggle\"\n      [attr.aria-label]=\"toggleAriaLabel()\"\n      aria-hidden=\"true\"\n      (click)=\"togglePasswordVisibility()\"\n    />\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 8px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:11px}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:12px}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:16px}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:4px 8px;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:14px;cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:11px;padding:2px 6px}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:12px;padding:3px 7px}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:16px;padding:5px 9px}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarPasswordInputComponent, decorators: [{
             type: Component,
@@ -1114,7 +1214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-password-input--sm]': 'size() === "sm"',
                         '[class.coar-password-input--md]': 'size() === "md"',
                         '[class.coar-password-input--lg]': 'size() === "lg"',
-                    }, template: "<div class=\"coar-password-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-password-input-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-password-input-container\"\n    [class.coar-password-input-focused]=\"isFocused()\"\n    [class.coar-password-input-disabled]=\"isDisabled()\"\n    [class.coar-password-input-readonly]=\"readonly()\"\n    [class.coar-password-input-error]=\"hasError()\"\n  >\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      class=\"coar-password-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n    <coar-icon name=\"x\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n    }\n\n    <!-- Toggle Visibility -->\n    <coar-icon\n      [name]=\"toggleIcon()\"\n      size=\"auto\"\n      class=\"coar-password-input-toggle\"\n      [attr.aria-label]=\"toggleAriaLabel()\"\n      aria-hidden=\"true\"\n      (click)=\"togglePasswordVisibility()\"\n    />\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 8px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:11px}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:12px}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:16px}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:4px 8px;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:14px;cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:11px;padding:2px 6px}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:12px;padding:3px 7px}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:16px;padding:5px 9px}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-password-input-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-password-input-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-password-input-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Container -->\n  <div\n    class=\"coar-password-input-container\"\n    [class.coar-password-input-focused]=\"isFocused()\"\n    [class.coar-password-input-disabled]=\"isDisabled()\"\n    [class.coar-password-input-readonly]=\"readonly()\"\n    [class.coar-password-input-error]=\"hasError()\"\n  >\n    <!-- Input Element -->\n    <input\n      #inputElement\n      [id]=\"inputId()\"\n      [name]=\"name()\"\n      [type]=\"inputType()\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [required]=\"required()\"\n      [autocomplete]=\"autocomplete()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n      [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n      class=\"coar-password-input-field\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n\n    <!-- Clear indicator -->\n    @if (showClearButton()) {\n      <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" class=\"coar-password-input-clear\" aria-hidden=\"true\" (click)=\"onClear()\" />\n    }\n\n    <!-- Toggle Visibility -->\n    <coar-icon\n      [name]=\"toggleIcon()\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-password-input-toggle\"\n      [attr.aria-label]=\"toggleAriaLabel()\"\n      aria-hidden=\"true\"\n      (click)=\"togglePasswordVisibility()\"\n    />\n  </div>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-password-input-message\" [class.coar-password-input-message-error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.coar-password-input-wrapper{display:flex;flex-direction:column;width:100%}.coar-password-input-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-password-input-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-password-input-container{position:relative;display:flex;align-items:center;height:var(--coar-component-md-height);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);transition:border-color .15s ease,box-shadow .15s ease;overflow:hidden}:host(.coar-password-input--xs) .coar-password-input-container{height:var(--coar-component-xs-height)}:host(.coar-password-input--sm) .coar-password-input-container{height:var(--coar-component-sm-height)}:host(.coar-password-input--md) .coar-password-input-container{height:var(--coar-component-md-height)}:host(.coar-password-input--lg) .coar-password-input-container{height:var(--coar-component-lg-height)}:host(.coar-password-input--xs) .coar-password-input-field{font-size:var(--coar-component-xs-font-size)}:host(.coar-password-input--xs) .coar-password-input-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-password-input--sm) .coar-password-input-field{font-size:var(--coar-component-sm-font-size)}:host(.coar-password-input--sm) .coar-password-input-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-password-input--lg) .coar-password-input-field{font-size:var(--coar-component-lg-font-size)}:host(.coar-password-input--lg) .coar-password-input-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-password-input-container:hover:not(.coar-password-input-disabled):not(.coar-password-input-readonly):not(.coar-password-input-error):not(.coar-password-input-focused){border-color:var(--coar-border-input-hover)}.coar-password-input-container.coar-password-input-focused:not(.coar-password-input-error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary);outline:none}.coar-password-input-container.coar-password-input-disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-password-input-container.coar-password-input-readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-password-input-container.coar-password-input-error{border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-container.coar-password-input-error.coar-password-input-focused{border-color:var(--coar-border-semantic-error-bold);box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold);outline:none}.coar-password-input-container.coar-password-input-error:hover:not(.coar-password-input-disabled){border-color:var(--coar-border-semantic-error-bold)}.coar-password-input-field{flex:1;min-width:0;height:100%;padding:0 8px;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary)}.coar-password-input-field::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-password-input-field:disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-password-input-field:read-only{cursor:default}.coar-password-input-clear{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin-right:var(--coar-spacing-s);padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);font-size:14px;cursor:pointer;transition:color .15s ease,opacity .15s ease;flex-shrink:0;opacity:.4}.coar-password-input-focused .coar-password-input-clear,.coar-password-input-container:hover .coar-password-input-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-password-input--xs) .coar-password-input-clear{font-size:11px}:host(.coar-password-input--sm) .coar-password-input-clear{font-size:12px}:host(.coar-password-input--lg) .coar-password-input-clear{font-size:16px}.coar-password-input-clear:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-clear:focus{outline:none}.coar-password-input-clear:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle{display:flex;align-items:center;justify-content:center;padding:4px 8px;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);font-size:14px;cursor:pointer;transition:color .15s ease;flex-shrink:0}:host(.coar-password-input--xs) .coar-password-input-toggle{font-size:11px;padding:2px 6px}:host(.coar-password-input--sm) .coar-password-input-toggle{font-size:12px;padding:3px 7px}:host(.coar-password-input--lg) .coar-password-input-toggle{font-size:16px;padding:5px 9px}.coar-password-input-toggle:hover{color:var(--coar-icon-neutral-primary)}.coar-password-input-toggle:focus{outline:none}.coar-password-input-toggle:focus-visible{color:var(--coar-icon-neutral-primary)}.coar-password-input-disabled .coar-password-input-toggle,.coar-password-input-readonly .coar-password-input-toggle{cursor:not-allowed;opacity:.5;pointer-events:none}.coar-password-input-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-password-input-message-error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], focused: [{ type: i0.Output, args: ["focused"] }], clear: [{ type: i0.Output, args: ["clear"] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }] } });
 
 class CoarCheckboxComponent extends CoarControlValueAccessor {
@@ -1939,7 +2039,7 @@ class CoarSingleSelectComponent extends CoarSelectBase {
         return chromeHeight + searchHeight + listHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarSingleSelectComponent, isStandalone: true, selector: "coar-single-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-single-select--xs": "size() === \"xs\"", "class.coar-single-select--sm": "size() === \"sm\"", "class.coar-single-select--md": "size() === \"md\"", "class.coar-single-select--lg": "size() === \"lg\"", "class.coar-single-select--disabled": "isDisabled()", "class.coar-single-select--readonly": "readonly()", "class.coar-single-select--error": "hasError()", "class.coar-single-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarSingleSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-select-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-select-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Value or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOption()\">\n      @if (selectedOption(); as option) {\n        @if (option.icon) {\n        <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-value-icon\" />\n        }\n        {{ option.label }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-select-clear\"\n        tabindex=\"-1\"\n        aria-label=\"Clear selection\"\n        (click)=\"clearSelection($event)\"\n      >\n        <coar-icon name=\"x\" size=\"auto\" />\n      </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon\n        name=\"caret-right\"\n        size=\"auto\"\n        class=\"coar-select-arrow\"\n        [class.coar-select-arrow--open]=\"isOpen()\"\n      />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n      <div class=\"coar-select-search\">\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"coar-select-search-input\"\n          [id]=\"searchInputId()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n      </div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n        <div\n          class=\"coar-select-option\"\n          [class.coar-select-option--selected]=\"isSelected(option)\"\n          [class.coar-select-option--highlighted]=\"isHighlighted(i)\"\n          [class.coar-select-option--disabled]=\"option.disabled\"\n          [id]=\"inputId() + '-option-' + i\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n          [tabindex]=\"option.disabled ? -1 : 0\"\n          role=\"option\"\n          (click)=\"selectOption($any(option))\"\n          (keydown.enter)=\"selectOption($any(option))\"\n          (mouseenter)=\"setHighlightFromDisplay(i)\"\n        >\n          @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-option-icon\" />\n          }\n          <span class=\"coar-select-option-label\">{{ option.label }}</span>\n          @if (isSelected(option)) {\n          <coar-icon name=\"check\" size=\"sm\" class=\"coar-select-option-check\" />\n          }\n        </div>\n        } @empty {\n        <div class=\"coar-select-empty\">\n          @if (searchQuery()) {\n            No results found\n          } @else {\n            No options available\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div\n    [id]=\"messageId()\"\n    class=\"coar-select-message\"\n    [class.coar-select-message--error]=\"hasError()\"\n  >\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-single-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-single-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-single-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-single-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-single-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-single-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-single-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-single-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-single-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-single-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-select-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-select-option:hover:not(.coar-select-option--disabled),.coar-select-option--highlighted:not(.coar-select-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-select-option--selected{background:var(--coar-surface-accent-secondary);color:var(--coar-text-accent-primary)}.coar-select-option--selected:hover,.coar-select-option--selected.coar-select-option--highlighted{background:var(--coar-surface-accent-secondary)}.coar-select-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-select-option-icon{flex-shrink:0;color:inherit}.coar-select-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-option-check{flex-shrink:0;color:var(--coar-icon-accent-primary)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarSingleSelectComponent, isStandalone: true, selector: "coar-single-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-single-select--xs": "size() === \"xs\"", "class.coar-single-select--sm": "size() === \"sm\"", "class.coar-single-select--md": "size() === \"md\"", "class.coar-single-select--lg": "size() === \"lg\"", "class.coar-single-select--disabled": "isDisabled()", "class.coar-single-select--readonly": "readonly()", "class.coar-single-select--error": "hasError()", "class.coar-single-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarSingleSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-select-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Value or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOption()\">\n      @if (selectedOption(); as option) {\n        @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-value-icon\" />\n        }\n        {{ option.label }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n        <button type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear selection\" (click)=\"clearSelection($event)\">\n          <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n        </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n        <div class=\"coar-select-search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"coar-select-search-input\"\n            [id]=\"searchInputId()\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n        </div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n          <div\n            class=\"coar-select-option\"\n            [class.coar-select-option--selected]=\"isSelected(option)\"\n            [class.coar-select-option--highlighted]=\"isHighlighted(i)\"\n            [class.coar-select-option--disabled]=\"option.disabled\"\n            [id]=\"inputId() + '-option-' + i\"\n            [attr.aria-selected]=\"isSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n            [tabindex]=\"option.disabled ? -1 : 0\"\n            role=\"option\"\n            (click)=\"selectOption($any(option))\"\n            (keydown.enter)=\"selectOption($any(option))\"\n            (mouseenter)=\"setHighlightFromDisplay(i)\"\n          >\n            @if (option.icon) {\n              <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-option-icon\" />\n            }\n            <span class=\"coar-select-option-label\">{{ option.label }}</span>\n            @if (isSelected(option)) {\n              <coar-icon name=\"check\" source=\"coar-builtin\" size=\"sm\" class=\"coar-select-option-check\" />\n            }\n          </div>\n        } @empty {\n          <div class=\"coar-select-empty\">\n            @if (searchQuery()) {\n              No results found\n            } @else {\n              No options available\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-single-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-single-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-single-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-single-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-single-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-single-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-single-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-single-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-single-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-single-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-select-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-select-option:hover:not(.coar-select-option--disabled),.coar-select-option--highlighted:not(.coar-select-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-select-option--selected{background:var(--coar-surface-accent-secondary);color:var(--coar-text-accent-primary)}.coar-select-option--selected:hover,.coar-select-option--selected.coar-select-option--highlighted{background:var(--coar-surface-accent-secondary)}.coar-select-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-select-option-icon{flex-shrink:0;color:inherit}.coar-select-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-option-check{flex-shrink:0;color:var(--coar-icon-accent-primary)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarSingleSelectComponent, decorators: [{
             type: Component,
@@ -1952,7 +2052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-single-select--readonly]': 'readonly()',
                         '[class.coar-single-select--error]': 'hasError()',
                         '[class.coar-single-select--open]': 'isOpen()',
-                    }, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-select-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-select-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Value or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOption()\">\n      @if (selectedOption(); as option) {\n        @if (option.icon) {\n        <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-value-icon\" />\n        }\n        {{ option.label }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-select-clear\"\n        tabindex=\"-1\"\n        aria-label=\"Clear selection\"\n        (click)=\"clearSelection($event)\"\n      >\n        <coar-icon name=\"x\" size=\"auto\" />\n      </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon\n        name=\"caret-right\"\n        size=\"auto\"\n        class=\"coar-select-arrow\"\n        [class.coar-select-arrow--open]=\"isOpen()\"\n      />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n      <div class=\"coar-select-search\">\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"coar-select-search-input\"\n          [id]=\"searchInputId()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n      </div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n        <div\n          class=\"coar-select-option\"\n          [class.coar-select-option--selected]=\"isSelected(option)\"\n          [class.coar-select-option--highlighted]=\"isHighlighted(i)\"\n          [class.coar-select-option--disabled]=\"option.disabled\"\n          [id]=\"inputId() + '-option-' + i\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n          [tabindex]=\"option.disabled ? -1 : 0\"\n          role=\"option\"\n          (click)=\"selectOption($any(option))\"\n          (keydown.enter)=\"selectOption($any(option))\"\n          (mouseenter)=\"setHighlightFromDisplay(i)\"\n        >\n          @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-option-icon\" />\n          }\n          <span class=\"coar-select-option-label\">{{ option.label }}</span>\n          @if (isSelected(option)) {\n          <coar-icon name=\"check\" size=\"sm\" class=\"coar-select-option-check\" />\n          }\n        </div>\n        } @empty {\n        <div class=\"coar-select-empty\">\n          @if (searchQuery()) {\n            No results found\n          } @else {\n            No options available\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div\n    [id]=\"messageId()\"\n    class=\"coar-select-message\"\n    [class.coar-select-message--error]=\"hasError()\"\n  >\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-single-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-single-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-single-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-single-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-single-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-single-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-single-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-single-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-single-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-single-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-select-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-select-option:hover:not(.coar-select-option--disabled),.coar-select-option--highlighted:not(.coar-select-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-select-option--selected{background:var(--coar-surface-accent-secondary);color:var(--coar-text-accent-primary)}.coar-select-option--selected:hover,.coar-select-option--selected.coar-select-option--highlighted{background:var(--coar-surface-accent-secondary)}.coar-select-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-select-option-icon{flex-shrink:0;color:inherit}.coar-select-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-option-check{flex-shrink:0;color:var(--coar-icon-accent-primary)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-select-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Value or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOption()\">\n      @if (selectedOption(); as option) {\n        @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-value-icon\" />\n        }\n        {{ option.label }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n        <button type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear selection\" (click)=\"clearSelection($event)\">\n          <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n        </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n        <div class=\"coar-select-search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"coar-select-search-input\"\n            [id]=\"searchInputId()\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n        </div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n          <div\n            class=\"coar-select-option\"\n            [class.coar-select-option--selected]=\"isSelected(option)\"\n            [class.coar-select-option--highlighted]=\"isHighlighted(i)\"\n            [class.coar-select-option--disabled]=\"option.disabled\"\n            [id]=\"inputId() + '-option-' + i\"\n            [attr.aria-selected]=\"isSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n            [tabindex]=\"option.disabled ? -1 : 0\"\n            role=\"option\"\n            (click)=\"selectOption($any(option))\"\n            (keydown.enter)=\"selectOption($any(option))\"\n            (mouseenter)=\"setHighlightFromDisplay(i)\"\n          >\n            @if (option.icon) {\n              <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-select-option-icon\" />\n            }\n            <span class=\"coar-select-option-label\">{{ option.label }}</span>\n            @if (isSelected(option)) {\n              <coar-icon name=\"check\" source=\"coar-builtin\" size=\"sm\" class=\"coar-select-option-check\" />\n            }\n          </div>\n        } @empty {\n          <div class=\"coar-select-empty\">\n            @if (searchQuery()) {\n              No results found\n            } @else {\n              No options available\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-single-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-single-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-single-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-single-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-single-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-single-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-single-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-single-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-single-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-single-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-select-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-select-option:hover:not(.coar-select-option--disabled),.coar-select-option--highlighted:not(.coar-select-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-select-option--selected{background:var(--coar-surface-accent-secondary);color:var(--coar-text-accent-primary)}.coar-select-option--selected:hover,.coar-select-option--selected.coar-select-option--highlighted{background:var(--coar-surface-accent-secondary)}.coar-select-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-select-option-icon{flex-shrink:0;color:inherit}.coar-select-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-option-check{flex-shrink:0;color:var(--coar-icon-accent-primary)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], dropdownTemplateRef: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -2200,7 +2300,7 @@ class CoarMultiSelectComponent extends CoarSelectBase {
         return chromeHeight + searchHeight + selectAllHeight + listHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarMultiSelectComponent, isStandalone: true, selector: "coar-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-multi-select--xs": "size() === \"xs\"", "class.coar-multi-select--sm": "size() === \"sm\"", "class.coar-multi-select--md": "size() === \"md\"", "class.coar-multi-select--lg": "size() === \"lg\"", "class.coar-multi-select--disabled": "isDisabled()", "class.coar-multi-select--readonly": "readonly()", "class.coar-multi-select--error": "hasError()", "class.coar-multi-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarMultiSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-select-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-select-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Values or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOptions().length\">\n      @if (selectedOptions().length) {\n        {{ getDisplayText() }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Selection Count Badge -->\n      @if (selectedOptions().length > 0) {\n      <span class=\"coar-multi-count\">{{ selectedOptions().length }}</span>\n      }\n\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-select-clear\"\n        tabindex=\"-1\"\n        aria-label=\"Clear all selections\"\n        (click)=\"clearSelection($event)\"\n      >\n        <coar-icon name=\"x\" size=\"auto\" />\n      </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon\n        name=\"caret-right\"\n        size=\"auto\"\n        class=\"coar-select-arrow\"\n        [class.coar-select-arrow--open]=\"isOpen()\"\n      />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n      <div class=\"coar-select-search\">\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"coar-select-search-input\"\n          [id]=\"searchInputId()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n      </div>\n      }\n\n      <!-- Select All Option -->\n      @if (showSelectAll() && !searchQuery()) {\n      <div\n        class=\"coar-multi-option coar-multi-option--select-all\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"allSelected()\"\n        (click)=\"toggleAll($event)\"\n        (keydown.enter)=\"toggleAll($event)\"\n      >\n        <span\n          class=\"coar-multi-checkbox\"\n          [class.coar-multi-checkbox--checked]=\"allSelected()\"\n          [class.coar-multi-checkbox--indeterminate]=\"someSelected()\"\n        >\n          @if (allSelected()) {\n          <coar-icon name=\"check\" size=\"auto\" />\n          } @else if (someSelected()) {\n          <coar-icon name=\"minus\" size=\"auto\" />\n          }\n        </span>\n        <span class=\"coar-multi-option-label\">Select All</span>\n      </div>\n      <div class=\"coar-multi-divider\"></div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n        <div\n          class=\"coar-multi-option\"\n          [class.coar-multi-option--selected]=\"isSelected(option)\"\n          [class.coar-multi-option--highlighted]=\"isHighlighted(i)\"\n          [class.coar-multi-option--disabled]=\"option.disabled\"\n          [id]=\"inputId() + '-option-' + i\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n          [tabindex]=\"option.disabled ? -1 : 0\"\n          role=\"option\"\n          (click)=\"toggleOption($any(option), $event)\"\n          (keydown.enter)=\"toggleOption($any(option), $event)\"\n          (mouseenter)=\"setHighlightFromDisplay(i)\"\n        >\n          <span\n            class=\"coar-multi-checkbox\"\n            [class.coar-multi-checkbox--checked]=\"isSelected(option)\"\n          >\n            @if (isSelected(option)) {\n            <coar-icon name=\"check\" size=\"auto\" />\n            }\n          </span>\n          @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-multi-option-icon\" />\n          }\n          <span class=\"coar-multi-option-label\">{{ option.label }}</span>\n        </div>\n        } @empty {\n        <div class=\"coar-select-empty\">\n          @if (searchQuery()) {\n            No results found\n          } @else {\n            No options available\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div\n    [id]=\"messageId()\"\n    class=\"coar-select-message\"\n    [class.coar-select-message--error]=\"hasError()\"\n  >\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-multi-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-multi-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-multi-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-multi-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-multi-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-multi-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-multi-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-multi-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-multi-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-multi-count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--coar-spacing-xs);background:var(--coar-surface-accent-primary);color:var(--coar-text-on-bold);font-size:11px;font-weight:600;border-radius:var(--coar-radius-full)}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-multi-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-dropdown--top .coar-multi-divider{order:-1}.coar-select-dropdown--top .coar-multi-option--select-all{border-bottom:none}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-multi-option{display:flex;align-items:center;gap:var(--coar-spacing-s);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-multi-option:hover:not(.coar-multi-option--disabled),.coar-multi-option--highlighted:not(.coar-multi-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-multi-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-multi-option--select-all{font-weight:600}.coar-multi-checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);flex-shrink:0;transition:background-color .15s ease,border-color .15s ease}.coar-multi-checkbox--checked,.coar-multi-checkbox--indeterminate{background:var(--coar-surface-accent-primary);border-color:var(--coar-border-accent-primary);color:var(--coar-icon-on-bold)}.coar-multi-checkbox coar-icon{width:10px;height:10px}.coar-multi-option-icon{flex-shrink:0;color:inherit}.coar-multi-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-multi-divider{height:1px;margin:var(--coar-spacing-xs) 0;background:var(--coar-border-neutral)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarMultiSelectComponent, isStandalone: true, selector: "coar-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxDisplayItems: { classPropertyName: "maxDisplayItems", publicName: "maxDisplayItems", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { properties: { "class.coar-multi-select--xs": "size() === \"xs\"", "class.coar-multi-select--sm": "size() === \"sm\"", "class.coar-multi-select--md": "size() === \"md\"", "class.coar-multi-select--lg": "size() === \"lg\"", "class.coar-multi-select--disabled": "isDisabled()", "class.coar-multi-select--readonly": "readonly()", "class.coar-multi-select--error": "hasError()", "class.coar-multi-select--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarMultiSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-select-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Values or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOptions().length\">\n      @if (selectedOptions().length) {\n        {{ getDisplayText() }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Selection Count Badge -->\n      @if (selectedOptions().length > 0) {\n        <span class=\"coar-multi-count\">{{ selectedOptions().length }}</span>\n      }\n\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n        <button type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear all selections\" (click)=\"clearSelection($event)\">\n          <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n        </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n        <div class=\"coar-select-search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"coar-select-search-input\"\n            [id]=\"searchInputId()\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n        </div>\n      }\n\n      <!-- Select All Option -->\n      @if (showSelectAll() && !searchQuery()) {\n        <div\n          class=\"coar-multi-option coar-multi-option--select-all\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"allSelected()\"\n          (click)=\"toggleAll($event)\"\n          (keydown.enter)=\"toggleAll($event)\"\n        >\n          <span\n            class=\"coar-multi-checkbox\"\n            [class.coar-multi-checkbox--checked]=\"allSelected()\"\n            [class.coar-multi-checkbox--indeterminate]=\"someSelected()\"\n          >\n            @if (allSelected()) {\n              <coar-icon name=\"check\" source=\"coar-builtin\" size=\"auto\" />\n            } @else if (someSelected()) {\n              <coar-icon name=\"minus\" source=\"coar-builtin\" size=\"auto\" />\n            }\n          </span>\n          <span class=\"coar-multi-option-label\">Select All</span>\n        </div>\n        <div class=\"coar-multi-divider\"></div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n          <div\n            class=\"coar-multi-option\"\n            [class.coar-multi-option--selected]=\"isSelected(option)\"\n            [class.coar-multi-option--highlighted]=\"isHighlighted(i)\"\n            [class.coar-multi-option--disabled]=\"option.disabled\"\n            [id]=\"inputId() + '-option-' + i\"\n            [attr.aria-selected]=\"isSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n            [tabindex]=\"option.disabled ? -1 : 0\"\n            role=\"option\"\n            (click)=\"toggleOption($any(option), $event)\"\n            (keydown.enter)=\"toggleOption($any(option), $event)\"\n            (mouseenter)=\"setHighlightFromDisplay(i)\"\n          >\n            <span class=\"coar-multi-checkbox\" [class.coar-multi-checkbox--checked]=\"isSelected(option)\">\n              @if (isSelected(option)) {\n                <coar-icon name=\"check\" source=\"coar-builtin\" size=\"auto\" />\n              }\n            </span>\n            @if (option.icon) {\n              <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-multi-option-icon\" />\n            }\n            <span class=\"coar-multi-option-label\">{{ option.label }}</span>\n          </div>\n        } @empty {\n          <div class=\"coar-select-empty\">\n            @if (searchQuery()) {\n              No results found\n            } @else {\n              No options available\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-multi-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-multi-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-multi-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-multi-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-multi-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-multi-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-multi-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-multi-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-multi-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-multi-count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--coar-spacing-xs);background:var(--coar-surface-accent-primary);color:var(--coar-text-on-bold);font-size:11px;font-weight:600;border-radius:var(--coar-radius-full)}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-multi-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-dropdown--top .coar-multi-divider{order:-1}.coar-select-dropdown--top .coar-multi-option--select-all{border-bottom:none}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-multi-option{display:flex;align-items:center;gap:var(--coar-spacing-s);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-multi-option:hover:not(.coar-multi-option--disabled),.coar-multi-option--highlighted:not(.coar-multi-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-multi-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-multi-option--select-all{font-weight:600}.coar-multi-checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);flex-shrink:0;transition:background-color .15s ease,border-color .15s ease}.coar-multi-checkbox--checked,.coar-multi-checkbox--indeterminate{background:var(--coar-surface-accent-primary);border-color:var(--coar-border-accent-primary);color:var(--coar-icon-on-bold)}.coar-multi-checkbox coar-icon{width:10px;height:10px}.coar-multi-option-icon{flex-shrink:0;color:inherit}.coar-multi-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-multi-divider{height:1px;margin:var(--coar-spacing-xs) 0;background:var(--coar-border-neutral)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarMultiSelectComponent, decorators: [{
             type: Component,
@@ -2213,7 +2313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-multi-select--readonly]': 'readonly()',
                         '[class.coar-multi-select--error]': 'hasError()',
                         '[class.coar-multi-select--open]': 'isOpen()',
-                    }, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-select-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-select-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Values or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOptions().length\">\n      @if (selectedOptions().length) {\n        {{ getDisplayText() }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Selection Count Badge -->\n      @if (selectedOptions().length > 0) {\n      <span class=\"coar-multi-count\">{{ selectedOptions().length }}</span>\n      }\n\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n      <button\n        type=\"button\"\n        class=\"coar-select-clear\"\n        tabindex=\"-1\"\n        aria-label=\"Clear all selections\"\n        (click)=\"clearSelection($event)\"\n      >\n        <coar-icon name=\"x\" size=\"auto\" />\n      </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon\n        name=\"caret-right\"\n        size=\"auto\"\n        class=\"coar-select-arrow\"\n        [class.coar-select-arrow--open]=\"isOpen()\"\n      />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n      <div class=\"coar-select-search\">\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"coar-select-search-input\"\n          [id]=\"searchInputId()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"onSearchInput($event)\"\n          (keydown)=\"onKeyDown($event)\"\n        />\n      </div>\n      }\n\n      <!-- Select All Option -->\n      @if (showSelectAll() && !searchQuery()) {\n      <div\n        class=\"coar-multi-option coar-multi-option--select-all\"\n        role=\"option\"\n        tabindex=\"0\"\n        [attr.aria-selected]=\"allSelected()\"\n        (click)=\"toggleAll($event)\"\n        (keydown.enter)=\"toggleAll($event)\"\n      >\n        <span\n          class=\"coar-multi-checkbox\"\n          [class.coar-multi-checkbox--checked]=\"allSelected()\"\n          [class.coar-multi-checkbox--indeterminate]=\"someSelected()\"\n        >\n          @if (allSelected()) {\n          <coar-icon name=\"check\" size=\"auto\" />\n          } @else if (someSelected()) {\n          <coar-icon name=\"minus\" size=\"auto\" />\n          }\n        </span>\n        <span class=\"coar-multi-option-label\">Select All</span>\n      </div>\n      <div class=\"coar-multi-divider\"></div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n        <div\n          class=\"coar-multi-option\"\n          [class.coar-multi-option--selected]=\"isSelected(option)\"\n          [class.coar-multi-option--highlighted]=\"isHighlighted(i)\"\n          [class.coar-multi-option--disabled]=\"option.disabled\"\n          [id]=\"inputId() + '-option-' + i\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n          [tabindex]=\"option.disabled ? -1 : 0\"\n          role=\"option\"\n          (click)=\"toggleOption($any(option), $event)\"\n          (keydown.enter)=\"toggleOption($any(option), $event)\"\n          (mouseenter)=\"setHighlightFromDisplay(i)\"\n        >\n          <span\n            class=\"coar-multi-checkbox\"\n            [class.coar-multi-checkbox--checked]=\"isSelected(option)\"\n          >\n            @if (isSelected(option)) {\n            <coar-icon name=\"check\" size=\"auto\" />\n            }\n          </span>\n          @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-multi-option-icon\" />\n          }\n          <span class=\"coar-multi-option-label\">{{ option.label }}</span>\n        </div>\n        } @empty {\n        <div class=\"coar-select-empty\">\n          @if (searchQuery()) {\n            No results found\n          } @else {\n            No options available\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div\n    [id]=\"messageId()\"\n    class=\"coar-select-message\"\n    [class.coar-select-message--error]=\"hasError()\"\n  >\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-multi-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-multi-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-multi-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-multi-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-multi-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-multi-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-multi-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-multi-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-multi-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-multi-count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--coar-spacing-xs);background:var(--coar-surface-accent-primary);color:var(--coar-text-on-bold);font-size:11px;font-weight:600;border-radius:var(--coar-radius-full)}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-multi-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-dropdown--top .coar-multi-divider{order:-1}.coar-select-dropdown--top .coar-multi-option--select-all{border-bottom:none}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-multi-option{display:flex;align-items:center;gap:var(--coar-spacing-s);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-multi-option:hover:not(.coar-multi-option--disabled),.coar-multi-option--highlighted:not(.coar-multi-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-multi-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-multi-option--select-all{font-weight:600}.coar-multi-checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);flex-shrink:0;transition:background-color .15s ease,border-color .15s ease}.coar-multi-checkbox--checked,.coar-multi-checkbox--indeterminate{background:var(--coar-surface-accent-primary);border-color:var(--coar-border-accent-primary);color:var(--coar-icon-on-bold)}.coar-multi-checkbox coar-icon{width:10px;height:10px}.coar-multi-option-icon{flex-shrink:0;color:inherit}.coar-multi-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-multi-divider{height:1px;margin:var(--coar-spacing-xs) 0;background:var(--coar-border-neutral)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-select-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Select Trigger -->\n  <div\n    class=\"coar-select-trigger\"\n    #trigger\n    [class.coar-select-trigger--focused]=\"isFocused()\"\n    [class.coar-select-trigger--disabled]=\"isDisabled()\"\n    [class.coar-select-trigger--readonly]=\"readonly()\"\n    [class.coar-select-trigger--error]=\"hasError()\"\n    [class.coar-select-trigger--open]=\"isOpen()\"\n    [id]=\"inputId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    role=\"combobox\"\n    (click)=\"toggleDropdown(); $event.stopPropagation()\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    <!-- Selected Values or Placeholder -->\n    <span class=\"coar-select-value\" [class.coar-select-placeholder]=\"!selectedOptions().length\">\n      @if (selectedOptions().length) {\n        {{ getDisplayText() }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n\n    <!-- Actions -->\n    <span class=\"coar-select-actions\">\n      <!-- Selection Count Badge -->\n      @if (selectedOptions().length > 0) {\n        <span class=\"coar-multi-count\">{{ selectedOptions().length }}</span>\n      }\n\n      <!-- Clear Button -->\n      @if (showClearButton()) {\n        <button type=\"button\" class=\"coar-select-clear\" tabindex=\"-1\" aria-label=\"Clear all selections\" (click)=\"clearSelection($event)\">\n          <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n        </button>\n      }\n\n      <!-- Dropdown Arrow -->\n      <coar-icon name=\"caret-right\" source=\"coar-builtin\" size=\"auto\" class=\"coar-select-arrow\" [class.coar-select-arrow--open]=\"isOpen()\" />\n    </span>\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Search Input -->\n      @if (searchable()) {\n        <div class=\"coar-select-search\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"coar-select-search-input\"\n            [id]=\"searchInputId()\"\n            [placeholder]=\"searchPlaceholder()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n          />\n        </div>\n      }\n\n      <!-- Select All Option -->\n      @if (showSelectAll() && !searchQuery()) {\n        <div\n          class=\"coar-multi-option coar-multi-option--select-all\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"allSelected()\"\n          (click)=\"toggleAll($event)\"\n          (keydown.enter)=\"toggleAll($event)\"\n        >\n          <span\n            class=\"coar-multi-checkbox\"\n            [class.coar-multi-checkbox--checked]=\"allSelected()\"\n            [class.coar-multi-checkbox--indeterminate]=\"someSelected()\"\n          >\n            @if (allSelected()) {\n              <coar-icon name=\"check\" source=\"coar-builtin\" size=\"auto\" />\n            } @else if (someSelected()) {\n              <coar-icon name=\"minus\" source=\"coar-builtin\" size=\"auto\" />\n            }\n          </span>\n          <span class=\"coar-multi-option-label\">Select All</span>\n        </div>\n        <div class=\"coar-multi-divider\"></div>\n      }\n\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayOptions(); track option.value; let i = $index) {\n          <div\n            class=\"coar-multi-option\"\n            [class.coar-multi-option--selected]=\"isSelected(option)\"\n            [class.coar-multi-option--highlighted]=\"isHighlighted(i)\"\n            [class.coar-multi-option--disabled]=\"option.disabled\"\n            [id]=\"inputId() + '-option-' + i\"\n            [attr.aria-selected]=\"isSelected(option)\"\n            [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n            [tabindex]=\"option.disabled ? -1 : 0\"\n            role=\"option\"\n            (click)=\"toggleOption($any(option), $event)\"\n            (keydown.enter)=\"toggleOption($any(option), $event)\"\n            (mouseenter)=\"setHighlightFromDisplay(i)\"\n          >\n            <span class=\"coar-multi-checkbox\" [class.coar-multi-checkbox--checked]=\"isSelected(option)\">\n              @if (isSelected(option)) {\n                <coar-icon name=\"check\" source=\"coar-builtin\" size=\"auto\" />\n              }\n            </span>\n            @if (option.icon) {\n              <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-multi-option-icon\" />\n            }\n            <span class=\"coar-multi-option-label\">{{ option.label }}</span>\n          </div>\n        } @empty {\n          <div class=\"coar-select-empty\">\n            @if (searchQuery()) {\n              No results found\n            } @else {\n              No options available\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-select-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--coar-component-md-height);padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.coar-select-trigger:hover:not(.coar-select-trigger--disabled):not(.coar-select-trigger--readonly):not(.coar-select-trigger--error):not(.coar-select-trigger--focused){border-color:var(--coar-border-input-hover)}.coar-select-trigger--focused:not(.coar-select-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-trigger--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-select-trigger--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-select-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-select-trigger--error.coar-select-trigger--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-multi-select--xs) .coar-select-trigger{height:var(--coar-component-xs-height)}:host(.coar-multi-select--sm) .coar-select-trigger{height:var(--coar-component-sm-height)}:host(.coar-multi-select--lg) .coar-select-trigger{height:var(--coar-component-lg-height)}:host(.coar-multi-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-multi-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-multi-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-select-value{flex:1;display:flex;align-items:center;gap:var(--coar-spacing-xs);min-width:0;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-base-weight);color:var(--coar-text-neutral-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-placeholder{color:var(--coar-text-neutral-tertiary)}:host(.coar-multi-select--xs) .coar-select-value{font-size:var(--coar-component-xs-font-size)}:host(.coar-multi-select--sm) .coar-select-value{font-size:var(--coar-component-sm-font-size)}:host(.coar-multi-select--lg) .coar-select-value{font-size:var(--coar-component-lg-font-size)}.coar-select-actions{display:flex;align-items:center;gap:var(--coar-spacing-xs);margin-left:var(--coar-spacing-xs);flex-shrink:0}.coar-multi-count{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--coar-spacing-xs);background:var(--coar-surface-accent-primary);color:var(--coar-text-on-bold);font-size:11px;font-weight:600;border-radius:var(--coar-radius-full)}.coar-select-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-disabled);cursor:pointer;border-radius:var(--coar-radius-xs);transition:color .15s ease,background-color .15s ease,opacity .15s ease;opacity:.4}.coar-select-trigger:hover .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-multi-select--open) .coar-select-clear{opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-select-clear:hover{opacity:1;color:var(--coar-icon-neutral-primary)}.coar-select-arrow{width:16px;height:16px;color:var(--coar-icon-neutral-secondary);transform:rotate(90deg);transition:transform .15s ease}.coar-select-arrow--open{transform:rotate(-90deg)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-dropdown--top .coar-select-search{border-bottom:none;border-top:1px solid var(--coar-border-neutral)}.coar-select-dropdown--top .coar-multi-divider{order:-1}.coar-select-dropdown--top .coar-multi-option--select-all{border-bottom:none}.coar-select-search{padding:var(--coar-spacing-s);border-bottom:1px solid var(--coar-border-neutral)}.coar-select-search-input{width:100%;height:32px;padding:0 var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.coar-select-search-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-select-search-input:focus{border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-select-options{max-height:240px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-multi-option{display:flex;align-items:center;gap:var(--coar-spacing-s);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-multi-option:hover:not(.coar-multi-option--disabled),.coar-multi-option--highlighted:not(.coar-multi-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-multi-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-multi-option--select-all{font-weight:600}.coar-multi-checkbox{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);flex-shrink:0;transition:background-color .15s ease,border-color .15s ease}.coar-multi-checkbox--checked,.coar-multi-checkbox--indeterminate{background:var(--coar-surface-accent-primary);border-color:var(--coar-border-accent-primary);color:var(--coar-icon-on-bold)}.coar-multi-checkbox coar-icon{width:10px;height:10px}.coar-multi-option-icon{flex-shrink:0;color:inherit}.coar-multi-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-multi-divider{height:1px;margin:var(--coar-spacing-xs) 0;background:var(--coar-border-neutral)}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], dropdownTemplateRef: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxDisplayItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDisplayItems", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
@@ -2575,7 +2675,7 @@ class CoarTagSelectComponent extends CoarSelectBase {
         return chromeHeight + listHeight;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTagSelectComponent, isStandalone: true, selector: "coar-tag-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, createPrefix: { classPropertyName: "createPrefix", publicName: "createPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tagCreated: "tagCreated" }, host: { properties: { "class.coar-tag-select--xs": "size() === \"xs\"", "class.coar-tag-select--sm": "size() === \"sm\"", "class.coar-tag-select--md": "size() === \"md\"", "class.coar-tag-select--lg": "size() === \"lg\"", "class.coar-tag-select--disabled": "isDisabled()", "class.coar-tag-select--readonly": "readonly()", "class.coar-tag-select--error": "hasError()", "class.coar-tag-select--open": "isOpen()", "class.coar-tag-select--focused": "isFocused()" } }, providers: [coarProvideValueAccessor(() => CoarTagSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "inlineInputRef", first: true, predicate: ["inlineInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-select-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-select-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Tag Input Container -->\n  <div\n    class=\"coar-tag-container\"\n    #trigger\n    [class.coar-tag-container--focused]=\"isFocused()\"\n    [class.coar-tag-container--disabled]=\"isDisabled()\"\n    [class.coar-tag-container--readonly]=\"readonly()\"\n    [class.coar-tag-container--error]=\"hasError()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    tabindex=\"0\"\n    (click)=\"focusInput()\"\n    (keydown.enter)=\"focusInput()\"\n  >\n    <!-- Selected Tags -->\n    @for (option of selectedOptions(); track option.value) {\n    <span class=\"coar-tag\" [class.coar-tag--disabled]=\"isDisabled()\">\n      @if (option.icon) {\n      <coar-icon [name]=\"option.icon\" size=\"auto\" class=\"coar-tag-icon\" />\n      }\n      <span class=\"coar-tag-label\">{{ option.label }}</span>\n      @if (!isDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"coar-tag-remove\"\n        tabindex=\"-1\"\n        aria-label=\"Remove {{ option.label }}\"\n        (click)=\"removeTag($any(option.value), $event)\"\n      >\n        <coar-icon name=\"x\" size=\"auto\" />\n      </button>\n      }\n    </span>\n    }\n\n    <!-- Inline Input -->\n    @if (!maxReached()) {\n    <input\n      #inlineInput\n      type=\"text\"\n      class=\"coar-tag-input\"\n      [id]=\"inputId()\"\n      [placeholder]=\"selectedOptions().length ? '' : placeholder()\"\n      [value]=\"searchQuery()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"listboxId()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      (input)=\"onInputChange($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n    }\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayAvailableOptions(); track option.value; let i = $index) {\n        <div\n          class=\"coar-tag-option\"\n          [class.coar-tag-option--highlighted]=\"isAvailableHighlighted(i)\"\n          [class.coar-tag-option--disabled]=\"option.disabled\"\n          [id]=\"inputId() + '-option-' + i\"\n          [attr.aria-selected]=\"false\"\n          [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n          [tabindex]=\"option.disabled ? -1 : 0\"\n          role=\"option\"\n          (click)=\"addTag($any(option))\"\n          (keydown.enter)=\"addTag($any(option))\"\n          (mouseenter)=\"setAvailableHighlightFromDisplay(i)\"\n        >\n          @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-tag-option-icon\" />\n          }\n          <span class=\"coar-tag-option-label\">{{ option.label }}</span>\n        </div>\n        }\n\n        <!-- Create New Option -->\n        @if (showCreateOption()) {\n        <div\n          class=\"coar-tag-option coar-tag-option--create\"\n          [class.coar-tag-option--highlighted]=\"highlightedIndex() === availableOptions().length\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"false\"\n          (click)=\"createTag()\"\n          (keydown.enter)=\"createTag()\"\n          (mouseenter)=\"highlightedIndex.set(availableOptions().length)\"\n        >\n          <coar-icon name=\"plus\" size=\"sm\" class=\"coar-tag-option-icon\" />\n          <span class=\"coar-tag-option-label\">{{ createPrefix() }}{{ searchQuery() }}</span>\n        </div>\n        }\n\n        @if (!displayAvailableOptions().length && !showCreateOption()) {\n        <div class=\"coar-select-empty\">\n          @if (searchQuery()) {\n            No matching options\n          } @else {\n            No more options available\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div\n    [id]=\"messageId()\"\n    class=\"coar-select-message\"\n    [class.coar-select-message--error]=\"hasError()\"\n  >\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-tag-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coar-spacing-xs);min-height:var(--coar-component-md-height);padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.coar-tag-container:hover:not(.coar-tag-container--disabled):not(.coar-tag-container--readonly):not(.coar-tag-container--error):not(.coar-tag-container--focused){border-color:var(--coar-border-input-hover)}.coar-tag-container--focused:not(.coar-tag-container--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-tag-container--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-tag-container--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-tag-container--error{border-color:var(--coar-border-semantic-error-bold)}.coar-tag-container--error.coar-tag-container--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-tag-select--xs) .coar-tag-container{min-height:var(--coar-component-xs-height);padding:2px var(--coar-spacing-xs)}:host(.coar-tag-select--sm) .coar-tag-container{min-height:var(--coar-component-sm-height);padding:3px var(--coar-spacing-s)}:host(.coar-tag-select--lg) .coar-tag-container{min-height:var(--coar-component-lg-height);padding:var(--coar-spacing-s)}:host(.coar-tag-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-tag-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-tag-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-tag{display:inline-flex;align-items:center;gap:var(--coar-spacing-xs);height:24px;padding:0 var(--coar-spacing-s);background:var(--coar-surface-neutral-secondary);border-radius:var(--coar-radius-full);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-primary);white-space:nowrap}:host(.coar-tag-select--xs) .coar-tag{height:18px;padding:0 var(--coar-spacing-xs);font-size:10px}:host(.coar-tag-select--sm) .coar-tag{height:20px;font-size:11px}:host(.coar-tag-select--lg) .coar-tag{height:28px;font-size:var(--coar-body-small-base-size)}.coar-tag--disabled{opacity:.6}.coar-tag-icon{width:12px;height:12px;flex-shrink:0}.coar-tag-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}.coar-tag-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:var(--coar-spacing-xs);margin-right:calc(-1 * var(--coar-spacing-xs));padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-tertiary);border-radius:var(--coar-radius-full);cursor:pointer;transition:color .15s ease,background-color .15s ease}.coar-tag-remove:hover{color:var(--coar-icon-neutral-primary);background:var(--coar-background-neutral-tertiary)}.coar-tag-remove coar-icon{width:10px;height:10px}.coar-tag-input{flex:1;min-width:60px;height:24px;padding:0;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary)}.coar-tag-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-tag-input:disabled{cursor:not-allowed}:host(.coar-tag-select--xs) .coar-tag-input{height:18px;font-size:var(--coar-component-xs-font-size)}:host(.coar-tag-select--sm) .coar-tag-input{height:20px;font-size:var(--coar-component-sm-font-size)}:host(.coar-tag-select--lg) .coar-tag-input{height:28px;font-size:var(--coar-component-lg-font-size)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-options{max-height:200px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-tag-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-tag-option:hover:not(.coar-tag-option--disabled),.coar-tag-option--highlighted:not(.coar-tag-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-tag-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-tag-option--create{color:var(--coar-text-accent-primary);font-weight:500}.coar-tag-option-icon{flex-shrink:0;color:inherit}.coar-tag-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarTagSelectComponent, isStandalone: true, selector: "coar-tag-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, createPrefix: { classPropertyName: "createPrefix", publicName: "createPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", tagCreated: "tagCreated" }, host: { properties: { "class.coar-tag-select--xs": "size() === \"xs\"", "class.coar-tag-select--sm": "size() === \"sm\"", "class.coar-tag-select--md": "size() === \"md\"", "class.coar-tag-select--lg": "size() === \"lg\"", "class.coar-tag-select--disabled": "isDisabled()", "class.coar-tag-select--readonly": "readonly()", "class.coar-tag-select--error": "hasError()", "class.coar-tag-select--open": "isOpen()", "class.coar-tag-select--focused": "isFocused()" } }, providers: [coarProvideValueAccessor(() => CoarTagSelectComponent)], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "inlineInputRef", first: true, predicate: ["inlineInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-select-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Tag Input Container -->\n  <div\n    class=\"coar-tag-container\"\n    #trigger\n    [class.coar-tag-container--focused]=\"isFocused()\"\n    [class.coar-tag-container--disabled]=\"isDisabled()\"\n    [class.coar-tag-container--readonly]=\"readonly()\"\n    [class.coar-tag-container--error]=\"hasError()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    tabindex=\"0\"\n    (click)=\"focusInput()\"\n    (keydown.enter)=\"focusInput()\"\n  >\n    <!-- Selected Tags -->\n    @for (option of selectedOptions(); track option.value) {\n      <span class=\"coar-tag\" [class.coar-tag--disabled]=\"isDisabled()\">\n        @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"auto\" class=\"coar-tag-icon\" />\n        }\n        <span class=\"coar-tag-label\">{{ option.label }}</span>\n        @if (!isDisabled() && !readonly()) {\n          <button\n            type=\"button\"\n            class=\"coar-tag-remove\"\n            tabindex=\"-1\"\n            aria-label=\"Remove {{ option.label }}\"\n            (click)=\"removeTag($any(option.value), $event)\"\n          >\n            <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n          </button>\n        }\n      </span>\n    }\n\n    <!-- Inline Input -->\n    @if (!maxReached()) {\n      <input\n        #inlineInput\n        type=\"text\"\n        class=\"coar-tag-input\"\n        [id]=\"inputId()\"\n        [placeholder]=\"selectedOptions().length ? '' : placeholder()\"\n        [value]=\"searchQuery()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        (input)=\"onInputChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n      />\n    }\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayAvailableOptions(); track option.value; let i = $index) {\n          <div\n            class=\"coar-tag-option\"\n            [class.coar-tag-option--highlighted]=\"isAvailableHighlighted(i)\"\n            [class.coar-tag-option--disabled]=\"option.disabled\"\n            [id]=\"inputId() + '-option-' + i\"\n            [attr.aria-selected]=\"false\"\n            [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n            [tabindex]=\"option.disabled ? -1 : 0\"\n            role=\"option\"\n            (click)=\"addTag($any(option))\"\n            (keydown.enter)=\"addTag($any(option))\"\n            (mouseenter)=\"setAvailableHighlightFromDisplay(i)\"\n          >\n            @if (option.icon) {\n              <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-tag-option-icon\" />\n            }\n            <span class=\"coar-tag-option-label\">{{ option.label }}</span>\n          </div>\n        }\n\n        <!-- Create New Option -->\n        @if (showCreateOption()) {\n          <div\n            class=\"coar-tag-option coar-tag-option--create\"\n            [class.coar-tag-option--highlighted]=\"highlightedIndex() === availableOptions().length\"\n            role=\"option\"\n            tabindex=\"0\"\n            [attr.aria-selected]=\"false\"\n            (click)=\"createTag()\"\n            (keydown.enter)=\"createTag()\"\n            (mouseenter)=\"highlightedIndex.set(availableOptions().length)\"\n          >\n            <coar-icon name=\"plus\" source=\"coar-builtin\" size=\"sm\" class=\"coar-tag-option-icon\" />\n            <span class=\"coar-tag-option-label\">{{ createPrefix() }}{{ searchQuery() }}</span>\n          </div>\n        }\n\n        @if (!displayAvailableOptions().length && !showCreateOption()) {\n          <div class=\"coar-select-empty\">\n            @if (searchQuery()) {\n              No matching options\n            } @else {\n              No more options available\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-tag-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coar-spacing-xs);min-height:var(--coar-component-md-height);padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.coar-tag-container:hover:not(.coar-tag-container--disabled):not(.coar-tag-container--readonly):not(.coar-tag-container--error):not(.coar-tag-container--focused){border-color:var(--coar-border-input-hover)}.coar-tag-container--focused:not(.coar-tag-container--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-tag-container--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-tag-container--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-tag-container--error{border-color:var(--coar-border-semantic-error-bold)}.coar-tag-container--error.coar-tag-container--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-tag-select--xs) .coar-tag-container{min-height:var(--coar-component-xs-height);padding:2px var(--coar-spacing-xs)}:host(.coar-tag-select--sm) .coar-tag-container{min-height:var(--coar-component-sm-height);padding:3px var(--coar-spacing-s)}:host(.coar-tag-select--lg) .coar-tag-container{min-height:var(--coar-component-lg-height);padding:var(--coar-spacing-s)}:host(.coar-tag-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-tag-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-tag-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-tag{display:inline-flex;align-items:center;gap:var(--coar-spacing-xs);height:24px;padding:0 var(--coar-spacing-s);background:var(--coar-surface-neutral-secondary);border-radius:var(--coar-radius-full);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-primary);white-space:nowrap}:host(.coar-tag-select--xs) .coar-tag{height:18px;padding:0 var(--coar-spacing-xs);font-size:10px}:host(.coar-tag-select--sm) .coar-tag{height:20px;font-size:11px}:host(.coar-tag-select--lg) .coar-tag{height:28px;font-size:var(--coar-body-small-base-size)}.coar-tag--disabled{opacity:.6}.coar-tag-icon{width:12px;height:12px;flex-shrink:0}.coar-tag-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}.coar-tag-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:var(--coar-spacing-xs);margin-right:calc(-1 * var(--coar-spacing-xs));padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-tertiary);border-radius:var(--coar-radius-full);cursor:pointer;transition:color .15s ease,background-color .15s ease}.coar-tag-remove:hover{color:var(--coar-icon-neutral-primary);background:var(--coar-background-neutral-tertiary)}.coar-tag-remove coar-icon{width:10px;height:10px}.coar-tag-input{flex:1;min-width:60px;height:24px;padding:0;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary)}.coar-tag-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-tag-input:disabled{cursor:not-allowed}:host(.coar-tag-select--xs) .coar-tag-input{height:18px;font-size:var(--coar-component-xs-font-size)}:host(.coar-tag-select--sm) .coar-tag-input{height:20px;font-size:var(--coar-component-sm-font-size)}:host(.coar-tag-select--lg) .coar-tag-input{height:28px;font-size:var(--coar-component-lg-font-size)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-options{max-height:200px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-tag-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-tag-option:hover:not(.coar-tag-option--disabled),.coar-tag-option--highlighted:not(.coar-tag-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-tag-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-tag-option--create{color:var(--coar-text-accent-primary);font-weight:500}.coar-tag-option-icon{flex-shrink:0;color:inherit}.coar-tag-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }, { kind: "directive", type: CoarScrollbarDirective, selector: "[coarScrollbar]", inputs: ["theme", "autoHide", "autoHideDelay", "clickScroll", "overflowX", "overflowY", "defer", "overscrollBehavior"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarTagSelectComponent, decorators: [{
             type: Component,
@@ -2589,7 +2689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-tag-select--error]': 'hasError()',
                         '[class.coar-tag-select--open]': 'isOpen()',
                         '[class.coar-tag-select--focused]': 'isFocused()',
-                    }, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n  <label [for]=\"inputId()\" class=\"coar-select-label\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-select-required\">*</span>\n    }\n  </label>\n  }\n\n  <!-- Tag Input Container -->\n  <div\n    class=\"coar-tag-container\"\n    #trigger\n    [class.coar-tag-container--focused]=\"isFocused()\"\n    [class.coar-tag-container--disabled]=\"isDisabled()\"\n    [class.coar-tag-container--readonly]=\"readonly()\"\n    [class.coar-tag-container--error]=\"hasError()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    tabindex=\"0\"\n    (click)=\"focusInput()\"\n    (keydown.enter)=\"focusInput()\"\n  >\n    <!-- Selected Tags -->\n    @for (option of selectedOptions(); track option.value) {\n    <span class=\"coar-tag\" [class.coar-tag--disabled]=\"isDisabled()\">\n      @if (option.icon) {\n      <coar-icon [name]=\"option.icon\" size=\"auto\" class=\"coar-tag-icon\" />\n      }\n      <span class=\"coar-tag-label\">{{ option.label }}</span>\n      @if (!isDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"coar-tag-remove\"\n        tabindex=\"-1\"\n        aria-label=\"Remove {{ option.label }}\"\n        (click)=\"removeTag($any(option.value), $event)\"\n      >\n        <coar-icon name=\"x\" size=\"auto\" />\n      </button>\n      }\n    </span>\n    }\n\n    <!-- Inline Input -->\n    @if (!maxReached()) {\n    <input\n      #inlineInput\n      type=\"text\"\n      class=\"coar-tag-input\"\n      [id]=\"inputId()\"\n      [placeholder]=\"selectedOptions().length ? '' : placeholder()\"\n      [value]=\"searchQuery()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"listboxId()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      (input)=\"onInputChange($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n    />\n    }\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayAvailableOptions(); track option.value; let i = $index) {\n        <div\n          class=\"coar-tag-option\"\n          [class.coar-tag-option--highlighted]=\"isAvailableHighlighted(i)\"\n          [class.coar-tag-option--disabled]=\"option.disabled\"\n          [id]=\"inputId() + '-option-' + i\"\n          [attr.aria-selected]=\"false\"\n          [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n          [tabindex]=\"option.disabled ? -1 : 0\"\n          role=\"option\"\n          (click)=\"addTag($any(option))\"\n          (keydown.enter)=\"addTag($any(option))\"\n          (mouseenter)=\"setAvailableHighlightFromDisplay(i)\"\n        >\n          @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-tag-option-icon\" />\n          }\n          <span class=\"coar-tag-option-label\">{{ option.label }}</span>\n        </div>\n        }\n\n        <!-- Create New Option -->\n        @if (showCreateOption()) {\n        <div\n          class=\"coar-tag-option coar-tag-option--create\"\n          [class.coar-tag-option--highlighted]=\"highlightedIndex() === availableOptions().length\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"false\"\n          (click)=\"createTag()\"\n          (keydown.enter)=\"createTag()\"\n          (mouseenter)=\"highlightedIndex.set(availableOptions().length)\"\n        >\n          <coar-icon name=\"plus\" size=\"sm\" class=\"coar-tag-option-icon\" />\n          <span class=\"coar-tag-option-label\">{{ createPrefix() }}{{ searchQuery() }}</span>\n        </div>\n        }\n\n        @if (!displayAvailableOptions().length && !showCreateOption()) {\n        <div class=\"coar-select-empty\">\n          @if (searchQuery()) {\n            No matching options\n          } @else {\n            No more options available\n          }\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n  <div\n    [id]=\"messageId()\"\n    class=\"coar-select-message\"\n    [class.coar-select-message--error]=\"hasError()\"\n  >\n    {{ displayMessage() }}\n  </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-tag-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coar-spacing-xs);min-height:var(--coar-component-md-height);padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.coar-tag-container:hover:not(.coar-tag-container--disabled):not(.coar-tag-container--readonly):not(.coar-tag-container--error):not(.coar-tag-container--focused){border-color:var(--coar-border-input-hover)}.coar-tag-container--focused:not(.coar-tag-container--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-tag-container--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-tag-container--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-tag-container--error{border-color:var(--coar-border-semantic-error-bold)}.coar-tag-container--error.coar-tag-container--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-tag-select--xs) .coar-tag-container{min-height:var(--coar-component-xs-height);padding:2px var(--coar-spacing-xs)}:host(.coar-tag-select--sm) .coar-tag-container{min-height:var(--coar-component-sm-height);padding:3px var(--coar-spacing-s)}:host(.coar-tag-select--lg) .coar-tag-container{min-height:var(--coar-component-lg-height);padding:var(--coar-spacing-s)}:host(.coar-tag-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-tag-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-tag-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-tag{display:inline-flex;align-items:center;gap:var(--coar-spacing-xs);height:24px;padding:0 var(--coar-spacing-s);background:var(--coar-surface-neutral-secondary);border-radius:var(--coar-radius-full);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-primary);white-space:nowrap}:host(.coar-tag-select--xs) .coar-tag{height:18px;padding:0 var(--coar-spacing-xs);font-size:10px}:host(.coar-tag-select--sm) .coar-tag{height:20px;font-size:11px}:host(.coar-tag-select--lg) .coar-tag{height:28px;font-size:var(--coar-body-small-base-size)}.coar-tag--disabled{opacity:.6}.coar-tag-icon{width:12px;height:12px;flex-shrink:0}.coar-tag-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}.coar-tag-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:var(--coar-spacing-xs);margin-right:calc(-1 * var(--coar-spacing-xs));padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-tertiary);border-radius:var(--coar-radius-full);cursor:pointer;transition:color .15s ease,background-color .15s ease}.coar-tag-remove:hover{color:var(--coar-icon-neutral-primary);background:var(--coar-background-neutral-tertiary)}.coar-tag-remove coar-icon{width:10px;height:10px}.coar-tag-input{flex:1;min-width:60px;height:24px;padding:0;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary)}.coar-tag-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-tag-input:disabled{cursor:not-allowed}:host(.coar-tag-select--xs) .coar-tag-input{height:18px;font-size:var(--coar-component-xs-font-size)}:host(.coar-tag-select--sm) .coar-tag-input{height:20px;font-size:var(--coar-component-sm-font-size)}:host(.coar-tag-select--lg) .coar-tag-input{height:28px;font-size:var(--coar-component-lg-font-size)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-options{max-height:200px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-tag-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-tag-option:hover:not(.coar-tag-option--disabled),.coar-tag-option--highlighted:not(.coar-tag-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-tag-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-tag-option--create{color:var(--coar-text-accent-primary);font-weight:500}.coar-tag-option-icon{flex-shrink:0;color:inherit}.coar-tag-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-select-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <label [for]=\"inputId()\" class=\"coar-select-label\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-select-required\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Tag Input Container -->\n  <div\n    class=\"coar-tag-container\"\n    #trigger\n    [class.coar-tag-container--focused]=\"isFocused()\"\n    [class.coar-tag-container--disabled]=\"isDisabled()\"\n    [class.coar-tag-container--readonly]=\"readonly()\"\n    [class.coar-tag-container--error]=\"hasError()\"\n    [attr.aria-describedby]=\"displayMessage() ? messageId() : null\"\n    [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n    tabindex=\"0\"\n    (click)=\"focusInput()\"\n    (keydown.enter)=\"focusInput()\"\n  >\n    <!-- Selected Tags -->\n    @for (option of selectedOptions(); track option.value) {\n      <span class=\"coar-tag\" [class.coar-tag--disabled]=\"isDisabled()\">\n        @if (option.icon) {\n          <coar-icon [name]=\"option.icon\" size=\"auto\" class=\"coar-tag-icon\" />\n        }\n        <span class=\"coar-tag-label\">{{ option.label }}</span>\n        @if (!isDisabled() && !readonly()) {\n          <button\n            type=\"button\"\n            class=\"coar-tag-remove\"\n            tabindex=\"-1\"\n            aria-label=\"Remove {{ option.label }}\"\n            (click)=\"removeTag($any(option.value), $event)\"\n          >\n            <coar-icon name=\"x\" source=\"coar-builtin\" size=\"auto\" />\n          </button>\n        }\n      </span>\n    }\n\n    <!-- Inline Input -->\n    @if (!maxReached()) {\n      <input\n        #inlineInput\n        type=\"text\"\n        class=\"coar-tag-input\"\n        [id]=\"inputId()\"\n        [placeholder]=\"selectedOptions().length ? '' : placeholder()\"\n        [value]=\"searchQuery()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"readonly()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        (input)=\"onInputChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur()\"\n      />\n    }\n  </div>\n\n  <!-- Dropdown Panel (rendered via @cocoar/ui-overlay) -->\n  <ng-template #dropdownTemplate>\n    <div\n      class=\"coar-select-dropdown coar-select-dropdown--overlay\"\n      [class.coar-select-dropdown--top]=\"dropdownPosition() === 'top'\"\n      role=\"presentation\"\n    >\n      <!-- Options List -->\n      <div\n        #optionsList\n        class=\"coar-select-options\"\n        [id]=\"listboxId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        [attr.aria-label]=\"label() || 'Options'\"\n        coarScrollbar\n        [overflowX]=\"'hidden'\"\n        [autoHide]=\"'never'\"\n        [overscrollBehavior]=\"'contain'\"\n        [defer]=\"false\"\n      >\n        @for (option of displayAvailableOptions(); track option.value; let i = $index) {\n          <div\n            class=\"coar-tag-option\"\n            [class.coar-tag-option--highlighted]=\"isAvailableHighlighted(i)\"\n            [class.coar-tag-option--disabled]=\"option.disabled\"\n            [id]=\"inputId() + '-option-' + i\"\n            [attr.aria-selected]=\"false\"\n            [attr.aria-disabled]=\"option.disabled ? 'true' : null\"\n            [tabindex]=\"option.disabled ? -1 : 0\"\n            role=\"option\"\n            (click)=\"addTag($any(option))\"\n            (keydown.enter)=\"addTag($any(option))\"\n            (mouseenter)=\"setAvailableHighlightFromDisplay(i)\"\n          >\n            @if (option.icon) {\n              <coar-icon [name]=\"option.icon\" size=\"sm\" class=\"coar-tag-option-icon\" />\n            }\n            <span class=\"coar-tag-option-label\">{{ option.label }}</span>\n          </div>\n        }\n\n        <!-- Create New Option -->\n        @if (showCreateOption()) {\n          <div\n            class=\"coar-tag-option coar-tag-option--create\"\n            [class.coar-tag-option--highlighted]=\"highlightedIndex() === availableOptions().length\"\n            role=\"option\"\n            tabindex=\"0\"\n            [attr.aria-selected]=\"false\"\n            (click)=\"createTag()\"\n            (keydown.enter)=\"createTag()\"\n            (mouseenter)=\"highlightedIndex.set(availableOptions().length)\"\n          >\n            <coar-icon name=\"plus\" source=\"coar-builtin\" size=\"sm\" class=\"coar-tag-option-icon\" />\n            <span class=\"coar-tag-option-label\">{{ createPrefix() }}{{ searchQuery() }}</span>\n          </div>\n        }\n\n        @if (!displayAvailableOptions().length && !showCreateOption()) {\n          <div class=\"coar-select-empty\">\n            @if (searchQuery()) {\n              No matching options\n            } @else {\n              No more options available\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Hint/Error Message -->\n  @if (displayMessage()) {\n    <div [id]=\"messageId()\" class=\"coar-select-message\" [class.coar-select-message--error]=\"hasError()\">\n      {{ displayMessage() }}\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-select-wrapper{display:flex;flex-direction:column;width:100%}.coar-select-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-select-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}.coar-tag-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coar-spacing-xs);min-height:var(--coar-component-md-height);padding:var(--coar-spacing-xs) var(--coar-spacing-s);border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:text;transition:border-color .15s ease,box-shadow .15s ease}.coar-tag-container:hover:not(.coar-tag-container--disabled):not(.coar-tag-container--readonly):not(.coar-tag-container--error):not(.coar-tag-container--focused){border-color:var(--coar-border-input-hover)}.coar-tag-container--focused:not(.coar-tag-container--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-tag-container--disabled{background:var(--coar-surface-input-disabled);border-color:var(--coar-border-input);cursor:not-allowed;opacity:.6}.coar-tag-container--readonly{background:var(--coar-surface-input);border-color:var(--coar-border-input);cursor:default}.coar-tag-container--error{border-color:var(--coar-border-semantic-error-bold)}.coar-tag-container--error.coar-tag-container--focused{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-tag-select--xs) .coar-tag-container{min-height:var(--coar-component-xs-height);padding:2px var(--coar-spacing-xs)}:host(.coar-tag-select--sm) .coar-tag-container{min-height:var(--coar-component-sm-height);padding:3px var(--coar-spacing-s)}:host(.coar-tag-select--lg) .coar-tag-container{min-height:var(--coar-component-lg-height);padding:var(--coar-spacing-s)}:host(.coar-tag-select--xs) .coar-select-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-tag-select--sm) .coar-select-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-tag-select--lg) .coar-select-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-tag{display:inline-flex;align-items:center;gap:var(--coar-spacing-xs);height:24px;padding:0 var(--coar-spacing-s);background:var(--coar-surface-neutral-secondary);border-radius:var(--coar-radius-full);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-primary);white-space:nowrap}:host(.coar-tag-select--xs) .coar-tag{height:18px;padding:0 var(--coar-spacing-xs);font-size:10px}:host(.coar-tag-select--sm) .coar-tag{height:20px;font-size:11px}:host(.coar-tag-select--lg) .coar-tag{height:28px;font-size:var(--coar-body-small-base-size)}.coar-tag--disabled{opacity:.6}.coar-tag-icon{width:12px;height:12px;flex-shrink:0}.coar-tag-label{max-width:150px;overflow:hidden;text-overflow:ellipsis}.coar-tag-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:var(--coar-spacing-xs);margin-right:calc(-1 * var(--coar-spacing-xs));padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-tertiary);border-radius:var(--coar-radius-full);cursor:pointer;transition:color .15s ease,background-color .15s ease}.coar-tag-remove:hover{color:var(--coar-icon-neutral-primary);background:var(--coar-background-neutral-tertiary)}.coar-tag-remove coar-icon{width:10px;height:10px}.coar-tag-input{flex:1;min-width:60px;height:24px;padding:0;border:none;outline:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary)}.coar-tag-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-tag-input:disabled{cursor:not-allowed}:host(.coar-tag-select--xs) .coar-tag-input{height:18px;font-size:var(--coar-component-xs-font-size)}:host(.coar-tag-select--sm) .coar-tag-input{height:20px;font-size:var(--coar-component-sm-font-size)}:host(.coar-tag-select--lg) .coar-tag-input{height:28px;font-size:var(--coar-component-lg-font-size)}.coar-select-dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--coar-spacing-xs);background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m);overflow:hidden;display:flex;flex-direction:column}.coar-select-dropdown--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto;width:100%}.coar-select-dropdown--portal{margin-top:0;margin-bottom:0;right:auto}.coar-select-dropdown--css-anchor{top:anchor(bottom);left:anchor(left);right:anchor(right);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-select-dropdown--css-anchor.coar-select-dropdown--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--top:not(.coar-select-dropdown--overlay):not(.coar-select-dropdown--portal):not(.coar-select-dropdown--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs);flex-direction:column-reverse}.coar-select-dropdown--overlay.coar-select-dropdown--top{flex-direction:column-reverse}.coar-select-options{max-height:200px;overflow-y:auto;padding:var(--coar-spacing-xs) 0}.coar-tag-option{display:flex;align-items:center;gap:var(--coar-spacing-xs);padding:var(--coar-spacing-s) var(--coar-spacing-m);font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;transition:background-color .1s ease}.coar-tag-option:hover:not(.coar-tag-option--disabled),.coar-tag-option--highlighted:not(.coar-tag-option--disabled){background:var(--coar-background-neutral-tertiary)}.coar-tag-option--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-tag-option--create{color:var(--coar-text-accent-primary);font-weight:500}.coar-tag-option-icon{flex-shrink:0;color:inherit}.coar-tag-option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.coar-select-empty{padding:var(--coar-spacing-m);text-align:center;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-tertiary)}.coar-select-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-caption-weight);color:var(--coar-text-neutral-secondary);line-height:1.4}.coar-select-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], dropdownTemplateRef: [{ type: i0.ViewChild, args: ['dropdownTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], createPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "createPrefix", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], tagCreated: [{ type: i0.Output, args: ["tagCreated"] }], inlineInputRef: [{ type: i0.ViewChild, args: ['inlineInput', { isSignal: true }] }] } });
 
 /**
@@ -2800,14 +2900,14 @@ class CoarButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarButtonComponent, isStandalone: true, selector: "coar-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.coar-button-host": "true", "class.coar-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n  class=\"coar-button\"\n  [class.coar-button--primary]=\"variant() === 'primary'\"\n  [class.coar-button--secondary]=\"variant() === 'secondary'\"\n  [class.coar-button--tertiary]=\"variant() === 'tertiary'\"\n  [class.coar-button--danger]=\"variant() === 'danger'\"\n  [class.coar-button--ghost]=\"variant() === 'ghost'\"\n  [class.coar-button--xs]=\"size() === 'xs'\"\n  [class.coar-button--sm]=\"size() === 'sm'\"\n  [class.coar-button--md]=\"size() === 'md'\"\n  [class.coar-button--lg]=\"size() === 'lg'\"\n  [class.coar-button--loading]=\"loading()\"\n  [class.coar-button--loading-overlay]=\"loading() && !iconStart() && !iconEnd()\"\n  [class.coar-button--disabled]=\"disabled()\"\n  [class.coar-button--full-width]=\"fullWidth()\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [attr.aria-disabled]=\"disabled() || loading()\"\n  [attr.aria-busy]=\"loading()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  (click)=\"onClick($event)\"\n>\n  <!-- Loading Spinner: Centered overlay when no icons, inline replacement when icons exist -->\n  @if (loading() && !iconStart() && !iconEnd()) {\n  <!-- Overlay spinner (centered, content hidden via opacity) -->\n  <span class=\"coar-button__spinner coar-button__spinner--overlay\" aria-hidden=\"true\">\n    <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n  </span>\n  }\n\n  <!-- Icon Start: Show spinner instead when loading -->\n  @if (loading() && iconStart()) {\n  <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n    <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n  </span>\n  } @else if (iconStart()) {\n  <span class=\"coar-button__icon coar-button__icon--start\" aria-hidden=\"true\">\n    <coar-icon [name]=\"iconStart()\" [size]=\"iconSize()\" />\n  </span>\n  }\n\n  <!-- Content -->\n  <span class=\"coar-button__content\">\n    <ng-content />\n  </span>\n\n  <!-- Icon End: Show spinner instead when loading (only if no iconStart) -->\n  @if (loading() && !iconStart() && iconEnd()) {\n  <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n    <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n  </span>\n  } @else if (iconEnd()) {\n  <span class=\"coar-button__icon coar-button__icon--end\" aria-hidden=\"true\">\n    <coar-icon [name]=\"iconEnd()\" [size]=\"iconSize()\" />\n  </span>\n  }\n</button>\n", styles: [":host{display:inline-block}:host(.coar-button--full-width){display:block;width:100%}.coar-button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--coar-radius-xs);font-family:var(--coar-body-base-family);font-weight:var(--coar-body-base-weight);cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}.coar-button:focus-visible{outline:2px solid var(--coar-border-accent-primary);outline-offset:2px}.coar-button--xs{height:var(--coar-component-xs-height);padding:0 10px;font-size:var(--coar-component-xs-font-size);gap:.375rem}.coar-button--sm{height:var(--coar-component-sm-height);padding:0 12px;font-size:var(--coar-component-sm-font-size);gap:.375rem}.coar-button--md{height:var(--coar-component-md-height);padding:0 16px;font-size:var(--coar-component-md-font-size)}.coar-button--lg{height:var(--coar-component-lg-height);padding:0 24px;font-size:var(--coar-component-lg-font-size);gap:.625rem}.coar-button--primary{background:var(--coar-background-accent-primary);color:var(--coar-color-white)}.coar-button--primary:hover:not(:disabled){background:var(--coar-background-accent-hover)}.coar-button--primary:active:not(:disabled){background:var(--coar-background-accent-active)}.coar-button--secondary{background:var(--coar-background-neutral-secondary);color:var(--coar-text-neutral-secondary);border:1px solid var(--coar-border-neutral-tertiary)}.coar-button--secondary:hover:not(:disabled){background:var(--coar-background-neutral-tertiary);color:var(--coar-text-neutral-primary)}.coar-button--secondary:active:not(:disabled){background:var(--coar-color-gray-500)}.coar-button--tertiary{background:var(--coar-background-accent-tertiary);color:var(--coar-text-accent-primary)}.coar-button--tertiary:hover:not(:disabled){background:var(--coar-background-accent-secondary)}.coar-button--tertiary:active:not(:disabled){background:var(--coar-color-accent-300)}.coar-button--danger{background:var(--coar-background-semantic-error-bold);color:var(--coar-text-on-bold)}.coar-button--danger:hover:not(:disabled){background:var(--coar-color-red-700)}.coar-button--danger:active:not(:disabled){background:var(--coar-color-red-800)}.coar-button--ghost{background:transparent;color:var(--coar-text-neutral-primary)}.coar-button--ghost:hover:not(:disabled){background:var(--coar-background-neutral-secondary)}.coar-button--ghost:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-button--disabled,.coar-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.coar-button--loading{cursor:wait;pointer-events:none;-webkit-user-select:none;user-select:none}.coar-button--loading-overlay .coar-button__content{opacity:0}.coar-button--full-width{width:100%}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty){padding:0;aspect-ratio:1}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__icon{margin:0}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__spinner--inline{margin:0}.coar-button__content{display:inline-flex;align-items:center;gap:inherit}.coar-button__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__icon--start{margin-left:-.125rem}.coar-button__icon--end{margin-right:-.125rem}.coar-button__spinner{display:inline-flex;align-items:center;justify-content:center}.coar-button__spinner--overlay{position:absolute}.coar-button__spinner--inline{width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__spinner--inline:first-child{margin-left:-.125rem}.coar-button__spinner--inline:last-of-type{margin-right:-.125rem}:host-context(.dark-mode) .coar-button--primary,:host-context(:root.dark-mode) .coar-button--primary{color:var(--coar-color-black)}\n"], dependencies: [{ kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarButtonComponent, isStandalone: true, selector: "coar-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.coar-button-host": "true", "class.coar-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n  class=\"coar-button\"\n  [class.coar-button--primary]=\"variant() === 'primary'\"\n  [class.coar-button--secondary]=\"variant() === 'secondary'\"\n  [class.coar-button--tertiary]=\"variant() === 'tertiary'\"\n  [class.coar-button--danger]=\"variant() === 'danger'\"\n  [class.coar-button--ghost]=\"variant() === 'ghost'\"\n  [class.coar-button--xs]=\"size() === 'xs'\"\n  [class.coar-button--sm]=\"size() === 'sm'\"\n  [class.coar-button--md]=\"size() === 'md'\"\n  [class.coar-button--lg]=\"size() === 'lg'\"\n  [class.coar-button--loading]=\"loading()\"\n  [class.coar-button--loading-overlay]=\"loading() && !iconStart() && !iconEnd()\"\n  [class.coar-button--disabled]=\"disabled()\"\n  [class.coar-button--full-width]=\"fullWidth()\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [attr.aria-disabled]=\"disabled() || loading()\"\n  [attr.aria-busy]=\"loading()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  (click)=\"onClick($event)\"\n>\n  <!-- Loading Spinner: Centered overlay when no icons, inline replacement when icons exist -->\n  @if (loading() && !iconStart() && !iconEnd()) {\n    <!-- Overlay spinner (centered, content hidden via opacity) -->\n    <span class=\"coar-button__spinner coar-button__spinner--overlay\" aria-hidden=\"true\">\n      <coar-icon name=\"load\" source=\"coar-builtin\" [size]=\"iconSize()\" [spin]=\"true\" />\n    </span>\n  }\n\n  <!-- Icon Start: Show spinner instead when loading -->\n  @if (loading() && iconStart()) {\n    <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n      <coar-icon name=\"load\" source=\"coar-builtin\" [size]=\"iconSize()\" [spin]=\"true\" />\n    </span>\n  } @else if (iconStart()) {\n    <span class=\"coar-button__icon coar-button__icon--start\" aria-hidden=\"true\">\n      <coar-icon [name]=\"iconStart()\" [size]=\"iconSize()\" />\n    </span>\n  }\n\n  <!-- Content -->\n  <span class=\"coar-button__content\">\n    <ng-content />\n  </span>\n\n  <!-- Icon End: Show spinner instead when loading (only if no iconStart) -->\n  @if (loading() && !iconStart() && iconEnd()) {\n    <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n      <coar-icon name=\"load\" source=\"coar-builtin\" [size]=\"iconSize()\" [spin]=\"true\" />\n    </span>\n  } @else if (iconEnd()) {\n    <span class=\"coar-button__icon coar-button__icon--end\" aria-hidden=\"true\">\n      <coar-icon [name]=\"iconEnd()\" [size]=\"iconSize()\" />\n    </span>\n  }\n</button>\n", styles: [":host{display:inline-block}:host(.coar-button--full-width){display:block;width:100%}.coar-button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--coar-radius-xs);font-family:var(--coar-body-base-family);font-weight:var(--coar-body-base-weight);cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}.coar-button:focus-visible{outline:2px solid var(--coar-border-accent-primary);outline-offset:2px}.coar-button--xs{height:var(--coar-component-xs-height);padding:0 10px;font-size:var(--coar-component-xs-font-size);gap:.375rem}.coar-button--sm{height:var(--coar-component-sm-height);padding:0 12px;font-size:var(--coar-component-sm-font-size);gap:.375rem}.coar-button--md{height:var(--coar-component-md-height);padding:0 16px;font-size:var(--coar-component-md-font-size)}.coar-button--lg{height:var(--coar-component-lg-height);padding:0 24px;font-size:var(--coar-component-lg-font-size);gap:.625rem}.coar-button--primary{background:var(--coar-background-accent-primary);color:var(--coar-color-white)}.coar-button--primary:hover:not(:disabled){background:var(--coar-background-accent-hover)}.coar-button--primary:active:not(:disabled){background:var(--coar-background-accent-active)}.coar-button--secondary{background:var(--coar-background-neutral-secondary);color:var(--coar-text-neutral-secondary);border:1px solid var(--coar-border-neutral-tertiary)}.coar-button--secondary:hover:not(:disabled){background:var(--coar-background-neutral-tertiary);color:var(--coar-text-neutral-primary)}.coar-button--secondary:active:not(:disabled){background:var(--coar-color-gray-500)}.coar-button--tertiary{background:var(--coar-background-accent-tertiary);color:var(--coar-text-accent-primary)}.coar-button--tertiary:hover:not(:disabled){background:var(--coar-background-accent-secondary)}.coar-button--tertiary:active:not(:disabled){background:var(--coar-color-accent-300)}.coar-button--danger{background:var(--coar-background-semantic-error-bold);color:var(--coar-text-on-bold)}.coar-button--danger:hover:not(:disabled){background:var(--coar-color-red-700)}.coar-button--danger:active:not(:disabled){background:var(--coar-color-red-800)}.coar-button--ghost{background:transparent;color:var(--coar-text-neutral-primary)}.coar-button--ghost:hover:not(:disabled){background:var(--coar-background-neutral-secondary)}.coar-button--ghost:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-button--disabled,.coar-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.coar-button--loading{cursor:wait;pointer-events:none;-webkit-user-select:none;user-select:none}.coar-button--loading-overlay .coar-button__content{opacity:0}.coar-button--full-width{width:100%}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty){padding:0;aspect-ratio:1}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__icon{margin:0}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__spinner--inline{margin:0}.coar-button__content{display:inline-flex;align-items:center;gap:inherit}.coar-button__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__icon--start{margin-left:-.125rem}.coar-button__icon--end{margin-right:-.125rem}.coar-button__spinner{display:inline-flex;align-items:center;justify-content:center}.coar-button__spinner--overlay{position:absolute}.coar-button__spinner--inline{width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__spinner--inline:first-child{margin-left:-.125rem}.coar-button__spinner--inline:last-of-type{margin-right:-.125rem}:host-context(.dark-mode) .coar-button--primary,:host-context(:root.dark-mode) .coar-button--primary{color:var(--coar-color-black)}\n"], dependencies: [{ kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'coar-button', standalone: true, imports: [CoarIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.coar-button-host]': 'true',
                         '[class.coar-button--full-width]': 'fullWidth()',
-                    }, template: "<button\n  class=\"coar-button\"\n  [class.coar-button--primary]=\"variant() === 'primary'\"\n  [class.coar-button--secondary]=\"variant() === 'secondary'\"\n  [class.coar-button--tertiary]=\"variant() === 'tertiary'\"\n  [class.coar-button--danger]=\"variant() === 'danger'\"\n  [class.coar-button--ghost]=\"variant() === 'ghost'\"\n  [class.coar-button--xs]=\"size() === 'xs'\"\n  [class.coar-button--sm]=\"size() === 'sm'\"\n  [class.coar-button--md]=\"size() === 'md'\"\n  [class.coar-button--lg]=\"size() === 'lg'\"\n  [class.coar-button--loading]=\"loading()\"\n  [class.coar-button--loading-overlay]=\"loading() && !iconStart() && !iconEnd()\"\n  [class.coar-button--disabled]=\"disabled()\"\n  [class.coar-button--full-width]=\"fullWidth()\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [attr.aria-disabled]=\"disabled() || loading()\"\n  [attr.aria-busy]=\"loading()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  (click)=\"onClick($event)\"\n>\n  <!-- Loading Spinner: Centered overlay when no icons, inline replacement when icons exist -->\n  @if (loading() && !iconStart() && !iconEnd()) {\n  <!-- Overlay spinner (centered, content hidden via opacity) -->\n  <span class=\"coar-button__spinner coar-button__spinner--overlay\" aria-hidden=\"true\">\n    <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n  </span>\n  }\n\n  <!-- Icon Start: Show spinner instead when loading -->\n  @if (loading() && iconStart()) {\n  <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n    <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n  </span>\n  } @else if (iconStart()) {\n  <span class=\"coar-button__icon coar-button__icon--start\" aria-hidden=\"true\">\n    <coar-icon [name]=\"iconStart()\" [size]=\"iconSize()\" />\n  </span>\n  }\n\n  <!-- Content -->\n  <span class=\"coar-button__content\">\n    <ng-content />\n  </span>\n\n  <!-- Icon End: Show spinner instead when loading (only if no iconStart) -->\n  @if (loading() && !iconStart() && iconEnd()) {\n  <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n    <coar-icon name=\"load\" [size]=\"iconSize()\" [spin]=\"true\" />\n  </span>\n  } @else if (iconEnd()) {\n  <span class=\"coar-button__icon coar-button__icon--end\" aria-hidden=\"true\">\n    <coar-icon [name]=\"iconEnd()\" [size]=\"iconSize()\" />\n  </span>\n  }\n</button>\n", styles: [":host{display:inline-block}:host(.coar-button--full-width){display:block;width:100%}.coar-button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--coar-radius-xs);font-family:var(--coar-body-base-family);font-weight:var(--coar-body-base-weight);cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}.coar-button:focus-visible{outline:2px solid var(--coar-border-accent-primary);outline-offset:2px}.coar-button--xs{height:var(--coar-component-xs-height);padding:0 10px;font-size:var(--coar-component-xs-font-size);gap:.375rem}.coar-button--sm{height:var(--coar-component-sm-height);padding:0 12px;font-size:var(--coar-component-sm-font-size);gap:.375rem}.coar-button--md{height:var(--coar-component-md-height);padding:0 16px;font-size:var(--coar-component-md-font-size)}.coar-button--lg{height:var(--coar-component-lg-height);padding:0 24px;font-size:var(--coar-component-lg-font-size);gap:.625rem}.coar-button--primary{background:var(--coar-background-accent-primary);color:var(--coar-color-white)}.coar-button--primary:hover:not(:disabled){background:var(--coar-background-accent-hover)}.coar-button--primary:active:not(:disabled){background:var(--coar-background-accent-active)}.coar-button--secondary{background:var(--coar-background-neutral-secondary);color:var(--coar-text-neutral-secondary);border:1px solid var(--coar-border-neutral-tertiary)}.coar-button--secondary:hover:not(:disabled){background:var(--coar-background-neutral-tertiary);color:var(--coar-text-neutral-primary)}.coar-button--secondary:active:not(:disabled){background:var(--coar-color-gray-500)}.coar-button--tertiary{background:var(--coar-background-accent-tertiary);color:var(--coar-text-accent-primary)}.coar-button--tertiary:hover:not(:disabled){background:var(--coar-background-accent-secondary)}.coar-button--tertiary:active:not(:disabled){background:var(--coar-color-accent-300)}.coar-button--danger{background:var(--coar-background-semantic-error-bold);color:var(--coar-text-on-bold)}.coar-button--danger:hover:not(:disabled){background:var(--coar-color-red-700)}.coar-button--danger:active:not(:disabled){background:var(--coar-color-red-800)}.coar-button--ghost{background:transparent;color:var(--coar-text-neutral-primary)}.coar-button--ghost:hover:not(:disabled){background:var(--coar-background-neutral-secondary)}.coar-button--ghost:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-button--disabled,.coar-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.coar-button--loading{cursor:wait;pointer-events:none;-webkit-user-select:none;user-select:none}.coar-button--loading-overlay .coar-button__content{opacity:0}.coar-button--full-width{width:100%}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty){padding:0;aspect-ratio:1}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__icon{margin:0}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__spinner--inline{margin:0}.coar-button__content{display:inline-flex;align-items:center;gap:inherit}.coar-button__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__icon--start{margin-left:-.125rem}.coar-button__icon--end{margin-right:-.125rem}.coar-button__spinner{display:inline-flex;align-items:center;justify-content:center}.coar-button__spinner--overlay{position:absolute}.coar-button__spinner--inline{width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__spinner--inline:first-child{margin-left:-.125rem}.coar-button__spinner--inline:last-of-type{margin-right:-.125rem}:host-context(.dark-mode) .coar-button--primary,:host-context(:root.dark-mode) .coar-button--primary{color:var(--coar-color-black)}\n"] }]
+                    }, template: "<button\n  class=\"coar-button\"\n  [class.coar-button--primary]=\"variant() === 'primary'\"\n  [class.coar-button--secondary]=\"variant() === 'secondary'\"\n  [class.coar-button--tertiary]=\"variant() === 'tertiary'\"\n  [class.coar-button--danger]=\"variant() === 'danger'\"\n  [class.coar-button--ghost]=\"variant() === 'ghost'\"\n  [class.coar-button--xs]=\"size() === 'xs'\"\n  [class.coar-button--sm]=\"size() === 'sm'\"\n  [class.coar-button--md]=\"size() === 'md'\"\n  [class.coar-button--lg]=\"size() === 'lg'\"\n  [class.coar-button--loading]=\"loading()\"\n  [class.coar-button--loading-overlay]=\"loading() && !iconStart() && !iconEnd()\"\n  [class.coar-button--disabled]=\"disabled()\"\n  [class.coar-button--full-width]=\"fullWidth()\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [attr.aria-disabled]=\"disabled() || loading()\"\n  [attr.aria-busy]=\"loading()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  (click)=\"onClick($event)\"\n>\n  <!-- Loading Spinner: Centered overlay when no icons, inline replacement when icons exist -->\n  @if (loading() && !iconStart() && !iconEnd()) {\n    <!-- Overlay spinner (centered, content hidden via opacity) -->\n    <span class=\"coar-button__spinner coar-button__spinner--overlay\" aria-hidden=\"true\">\n      <coar-icon name=\"load\" source=\"coar-builtin\" [size]=\"iconSize()\" [spin]=\"true\" />\n    </span>\n  }\n\n  <!-- Icon Start: Show spinner instead when loading -->\n  @if (loading() && iconStart()) {\n    <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n      <coar-icon name=\"load\" source=\"coar-builtin\" [size]=\"iconSize()\" [spin]=\"true\" />\n    </span>\n  } @else if (iconStart()) {\n    <span class=\"coar-button__icon coar-button__icon--start\" aria-hidden=\"true\">\n      <coar-icon [name]=\"iconStart()\" [size]=\"iconSize()\" />\n    </span>\n  }\n\n  <!-- Content -->\n  <span class=\"coar-button__content\">\n    <ng-content />\n  </span>\n\n  <!-- Icon End: Show spinner instead when loading (only if no iconStart) -->\n  @if (loading() && !iconStart() && iconEnd()) {\n    <span class=\"coar-button__spinner coar-button__spinner--inline\" aria-hidden=\"true\">\n      <coar-icon name=\"load\" source=\"coar-builtin\" [size]=\"iconSize()\" [spin]=\"true\" />\n    </span>\n  } @else if (iconEnd()) {\n    <span class=\"coar-button__icon coar-button__icon--end\" aria-hidden=\"true\">\n      <coar-icon [name]=\"iconEnd()\" [size]=\"iconSize()\" />\n    </span>\n  }\n</button>\n", styles: [":host{display:inline-block}:host(.coar-button--full-width){display:block;width:100%}.coar-button{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--coar-radius-xs);font-family:var(--coar-body-base-family);font-weight:var(--coar-body-base-weight);cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}.coar-button:focus-visible{outline:2px solid var(--coar-border-accent-primary);outline-offset:2px}.coar-button--xs{height:var(--coar-component-xs-height);padding:0 10px;font-size:var(--coar-component-xs-font-size);gap:.375rem}.coar-button--sm{height:var(--coar-component-sm-height);padding:0 12px;font-size:var(--coar-component-sm-font-size);gap:.375rem}.coar-button--md{height:var(--coar-component-md-height);padding:0 16px;font-size:var(--coar-component-md-font-size)}.coar-button--lg{height:var(--coar-component-lg-height);padding:0 24px;font-size:var(--coar-component-lg-font-size);gap:.625rem}.coar-button--primary{background:var(--coar-background-accent-primary);color:var(--coar-color-white)}.coar-button--primary:hover:not(:disabled){background:var(--coar-background-accent-hover)}.coar-button--primary:active:not(:disabled){background:var(--coar-background-accent-active)}.coar-button--secondary{background:var(--coar-background-neutral-secondary);color:var(--coar-text-neutral-secondary);border:1px solid var(--coar-border-neutral-tertiary)}.coar-button--secondary:hover:not(:disabled){background:var(--coar-background-neutral-tertiary);color:var(--coar-text-neutral-primary)}.coar-button--secondary:active:not(:disabled){background:var(--coar-color-gray-500)}.coar-button--tertiary{background:var(--coar-background-accent-tertiary);color:var(--coar-text-accent-primary)}.coar-button--tertiary:hover:not(:disabled){background:var(--coar-background-accent-secondary)}.coar-button--tertiary:active:not(:disabled){background:var(--coar-color-accent-300)}.coar-button--danger{background:var(--coar-background-semantic-error-bold);color:var(--coar-text-on-bold)}.coar-button--danger:hover:not(:disabled){background:var(--coar-color-red-700)}.coar-button--danger:active:not(:disabled){background:var(--coar-color-red-800)}.coar-button--ghost{background:transparent;color:var(--coar-text-neutral-primary)}.coar-button--ghost:hover:not(:disabled){background:var(--coar-background-neutral-secondary)}.coar-button--ghost:active:not(:disabled){background:var(--coar-background-neutral-tertiary)}.coar-button--disabled,.coar-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.coar-button--loading{cursor:wait;pointer-events:none;-webkit-user-select:none;user-select:none}.coar-button--loading-overlay .coar-button__content{opacity:0}.coar-button--full-width{width:100%}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty){padding:0;aspect-ratio:1}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__icon{margin:0}.coar-button:has(.coar-button__icon,.coar-button__spinner--inline):has(.coar-button__content:empty) .coar-button__spinner--inline{margin:0}.coar-button__content{display:inline-flex;align-items:center;gap:inherit}.coar-button__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__icon--start{margin-left:-.125rem}.coar-button__icon--end{margin-right:-.125rem}.coar-button__spinner{display:inline-flex;align-items:center;justify-content:center}.coar-button__spinner--overlay{position:absolute}.coar-button__spinner--inline{width:1.25em;height:1.25em;font-size:1.125em;line-height:1;flex-shrink:0}.coar-button__spinner--inline:first-child{margin-left:-.125rem}.coar-button__spinner--inline:last-of-type{margin-right:-.125rem}:host-context(.dark-mode) .coar-button--primary,:host-context(:root.dark-mode) .coar-button--primary{color:var(--coar-color-black)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStart", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class CoarCodeBlockComponent {
@@ -4718,7 +4818,7 @@ class CoarDatePickerComponent extends CoarControlValueAccessor {
         this.viewDate.set(newDate.toPlainYearMonth());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarDatePickerComponent, isStandalone: true, selector: "coar-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormatConfig: { classPropertyName: "dateFormatConfig", publicName: "dateFormatConfig", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, highlightWeekends: { classPropertyName: "highlightWeekends", publicName: "highlightWeekends", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "class.coar-date-picker--xs": "size() === \"xs\"", "class.coar-date-picker--sm": "size() === \"sm\"", "class.coar-date-picker--md": "size() === \"md\"", "class.coar-date-picker--lg": "size() === \"lg\"", "class.coar-date-picker--disabled": "isDisabled()", "class.coar-date-picker--readonly": "readonly()", "class.coar-date-picker--error": "hasError()", "class.coar-date-picker--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent), CoarPopoverGroupService], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"coar-date-picker-wrapper\"\n>\n  <!-- Label -->\n  @if (label()) {\n  <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n    }\n  </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n  <div\n    class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n    [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n    [attr.id]=\"calendarId()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Calendar\"\n  >\n    <!-- Calendar Header -->\n    <div class=\"coar-date-picker-header\">\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav\"\n        aria-label=\"Previous year\"\n        (click)=\"previousYear()\"\n      >\n        <coar-icon name=\"chevrons-left\" size=\"sm\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav\"\n        aria-label=\"Previous month\"\n        (click)=\"previousMonth()\"\n      >\n        <coar-icon name=\"chevron-left\" size=\"sm\" />\n      </button>\n\n      <span class=\"coar-date-picker-month-year\">\n        <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n        <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n      </span>\n\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n        aria-label=\"Next month\"\n        (click)=\"nextMonth()\"\n      >\n        <coar-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n        aria-label=\"Next year\"\n        (click)=\"nextYear()\"\n      >\n        <coar-icon name=\"chevrons-right\" size=\"sm\" />\n      </button>\n    </div>\n\n    <!-- Days of Week Header -->\n    <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n      @if (showWeekNumbers()) {\n      <span class=\"coar-date-picker-week-spacer\"></span>\n      }\n      @for (day of daysOfWeek(); track day) {\n      <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n      }\n    </div>\n\n    <!-- Calendar Grid -->\n    <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n      @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n      <!-- Week number at start of each row -->\n      @if (showWeekNumbers() && i % 7 === 0) {\n      <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n      }\n      <coar-popover\n        [disabled]=\"day.isDisabled || day.markers.length === 0\"\n        [openOnClick]=\"true\"\n        [openOnHover]=\"true\"\n        [interactive]=\"false\"\n      >\n        <button\n          coarPopoverTrigger\n          type=\"button\"\n          class=\"coar-date-picker-day\"\n          [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n          [class.coar-date-picker-day--today]=\"day.isToday\"\n          [class.coar-date-picker-day--selected]=\"day.isSelected\"\n          [class.coar-date-picker-day--focused]=\"day.isFocused\"\n          [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n          [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n          [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n          [class]=\"day.markerCssClass\"\n          [disabled]=\"day.isDisabled\"\n          [attr.aria-selected]=\"day.isSelected\"\n          [attr.aria-current]=\"day.isToday ? 'date' : null\"\n          [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n          (click)=\"selectDate(day.date)\"\n        >\n          {{ day.day }}\n        </button>\n\n        @if (day.markers.length > 0) {\n        <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n          <div class=\"coar-date-picker-marker-popover__list\">\n            @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n            <div class=\"coar-date-picker-marker-popover__item\">\n              {{ marker.description }}\n            </div>\n            }\n\n            @if (getHiddenMarkerCount(day.markers) > 0) {\n            <div class=\"coar-date-picker-marker-popover__more\">\n              +{{ getHiddenMarkerCount(day.markers) }} other events\n            </div>\n            }\n          </div>\n        </div>\n        }\n      </coar-popover>\n      }\n    </div>\n\n    <!-- Footer with Today Button -->\n    @if (showTodayButton()) {\n    <div class=\"coar-date-picker-footer\">\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-today\"\n        (click)=\"selectToday()\"\n      >\n        Today\n      </button>\n    </div>\n    }\n  </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n  <span\n    class=\"coar-date-picker-message\"\n    [class.coar-date-picker-message--error]=\"hasError()\"\n  >\n    {{ message() }}\n  </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "size", "rotate", "rotateTransition", "spin", "color", "label", "fallback"] }, { kind: "component", type: CoarPopoverComponent, selector: "coar-popover", inputs: ["disabled", "openOnHover", "openOnClick", "interactive", "fallbackToBestFit", "clampToViewport"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CoarDatePickerComponent, isStandalone: true, selector: "coar-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormatConfig: { classPropertyName: "dateFormatConfig", publicName: "dateFormatConfig", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, highlightWeekends: { classPropertyName: "highlightWeekends", publicName: "highlightWeekends", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onDocumentKeydown($event)" }, properties: { "class.coar-date-picker--xs": "size() === \"xs\"", "class.coar-date-picker--sm": "size() === \"sm\"", "class.coar-date-picker--md": "size() === \"md\"", "class.coar-date-picker--lg": "size() === \"lg\"", "class.coar-date-picker--disabled": "isDisabled()", "class.coar-date-picker--readonly": "readonly()", "class.coar-date-picker--error": "hasError()", "class.coar-date-picker--open": "isOpen()" } }, providers: [coarProvideValueAccessor(() => CoarDatePickerComponent), CoarPopoverGroupService], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"coar-date-picker-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n    <div\n      class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n      [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n      [attr.id]=\"calendarId()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Calendar\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"coar-date-picker-header\">\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n          <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n          <coar-icon name=\"chevron-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n\n        <span class=\"coar-date-picker-month-year\">\n          <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n          <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n        </span>\n\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n          <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n          <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n      </div>\n\n      <!-- Days of Week Header -->\n      <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n        @if (showWeekNumbers()) {\n          <span class=\"coar-date-picker-week-spacer\"></span>\n        }\n        @for (day of daysOfWeek(); track day) {\n          <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n        }\n      </div>\n\n      <!-- Calendar Grid -->\n      <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n        @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n          <!-- Week number at start of each row -->\n          @if (showWeekNumbers() && i % 7 === 0) {\n            <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n          }\n          <coar-popover [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\n            <button\n              coarPopoverTrigger\n              type=\"button\"\n              class=\"coar-date-picker-day\"\n              [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n              [class.coar-date-picker-day--today]=\"day.isToday\"\n              [class.coar-date-picker-day--selected]=\"day.isSelected\"\n              [class.coar-date-picker-day--focused]=\"day.isFocused\"\n              [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n              [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n              [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n              [class]=\"day.markerCssClass\"\n              [disabled]=\"day.isDisabled\"\n              [attr.aria-selected]=\"day.isSelected\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n              (click)=\"selectDate(day.date)\"\n            >\n              {{ day.day }}\n            </button>\n\n            @if (day.markers.length > 0) {\n              <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n                <div class=\"coar-date-picker-marker-popover__list\">\n                  @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n                    <div class=\"coar-date-picker-marker-popover__item\">\n                      {{ marker.description }}\n                    </div>\n                  }\n\n                  @if (getHiddenMarkerCount(day.markers) > 0) {\n                    <div class=\"coar-date-picker-marker-popover__more\">+{{ getHiddenMarkerCount(day.markers) }} other events</div>\n                  }\n                </div>\n              </div>\n            }\n          </coar-popover>\n        }\n      </div>\n\n      <!-- Footer with Today Button -->\n      @if (showTodayButton()) {\n        <div class=\"coar-date-picker-footer\">\n          <button type=\"button\" class=\"coar-date-picker-today\" (click)=\"selectToday()\">Today</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n    <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\n      {{ message() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CoarIconComponent, selector: "coar-icon", inputs: ["name", "source", "size", "rotate", "rotateTransition", "spin", "color", "label"] }, { kind: "component", type: CoarPopoverComponent, selector: "coar-popover", inputs: ["disabled", "openOnHover", "openOnClick", "interactive", "fallbackToBestFit", "clampToViewport"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CoarDatePickerComponent, decorators: [{
             type: Component,
@@ -4732,12 +4832,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class.coar-date-picker--error]': 'hasError()',
                         '[class.coar-date-picker--open]': 'isOpen()',
                         '(document:keydown)': 'onDocumentKeydown($event)',
-                    }, template: "<div\n  class=\"coar-date-picker-wrapper\"\n>\n  <!-- Label -->\n  @if (label()) {\n  <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n    {{ label() }}\n    @if (required()) {\n    <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n    }\n  </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n  <div\n    class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n    [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n    [attr.id]=\"calendarId()\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"Calendar\"\n  >\n    <!-- Calendar Header -->\n    <div class=\"coar-date-picker-header\">\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav\"\n        aria-label=\"Previous year\"\n        (click)=\"previousYear()\"\n      >\n        <coar-icon name=\"chevrons-left\" size=\"sm\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav\"\n        aria-label=\"Previous month\"\n        (click)=\"previousMonth()\"\n      >\n        <coar-icon name=\"chevron-left\" size=\"sm\" />\n      </button>\n\n      <span class=\"coar-date-picker-month-year\">\n        <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n        <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n      </span>\n\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n        aria-label=\"Next month\"\n        (click)=\"nextMonth()\"\n      >\n        <coar-icon name=\"chevron-right\" size=\"sm\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-nav coar-date-picker-nav--next\"\n        aria-label=\"Next year\"\n        (click)=\"nextYear()\"\n      >\n        <coar-icon name=\"chevrons-right\" size=\"sm\" />\n      </button>\n    </div>\n\n    <!-- Days of Week Header -->\n    <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n      @if (showWeekNumbers()) {\n      <span class=\"coar-date-picker-week-spacer\"></span>\n      }\n      @for (day of daysOfWeek(); track day) {\n      <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n      }\n    </div>\n\n    <!-- Calendar Grid -->\n    <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n      @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n      <!-- Week number at start of each row -->\n      @if (showWeekNumbers() && i % 7 === 0) {\n      <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n      }\n      <coar-popover\n        [disabled]=\"day.isDisabled || day.markers.length === 0\"\n        [openOnClick]=\"true\"\n        [openOnHover]=\"true\"\n        [interactive]=\"false\"\n      >\n        <button\n          coarPopoverTrigger\n          type=\"button\"\n          class=\"coar-date-picker-day\"\n          [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n          [class.coar-date-picker-day--today]=\"day.isToday\"\n          [class.coar-date-picker-day--selected]=\"day.isSelected\"\n          [class.coar-date-picker-day--focused]=\"day.isFocused\"\n          [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n          [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n          [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n          [class]=\"day.markerCssClass\"\n          [disabled]=\"day.isDisabled\"\n          [attr.aria-selected]=\"day.isSelected\"\n          [attr.aria-current]=\"day.isToday ? 'date' : null\"\n          [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n          (click)=\"selectDate(day.date)\"\n        >\n          {{ day.day }}\n        </button>\n\n        @if (day.markers.length > 0) {\n        <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n          <div class=\"coar-date-picker-marker-popover__list\">\n            @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n            <div class=\"coar-date-picker-marker-popover__item\">\n              {{ marker.description }}\n            </div>\n            }\n\n            @if (getHiddenMarkerCount(day.markers) > 0) {\n            <div class=\"coar-date-picker-marker-popover__more\">\n              +{{ getHiddenMarkerCount(day.markers) }} other events\n            </div>\n            }\n          </div>\n        </div>\n        }\n      </coar-popover>\n      }\n    </div>\n\n    <!-- Footer with Today Button -->\n    @if (showTodayButton()) {\n    <div class=\"coar-date-picker-footer\">\n      <button\n        type=\"button\"\n        class=\"coar-date-picker-today\"\n        (click)=\"selectToday()\"\n      >\n        Today\n      </button>\n    </div>\n    }\n  </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n  <span\n    class=\"coar-date-picker-message\"\n    [class.coar-date-picker-message--error]=\"hasError()\"\n  >\n    {{ message() }}\n  </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
+                    }, template: "<div class=\"coar-date-picker-wrapper\">\n  <!-- Label -->\n  @if (label()) {\n    <span class=\"coar-date-picker-label\" [attr.id]=\"labelId()\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"coar-date-picker-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    class=\"coar-date-picker-trigger\"\n    [class.coar-date-picker-trigger--disabled]=\"isDisabled()\"\n    [class.coar-date-picker-trigger--readonly]=\"readonly()\"\n    [class.coar-date-picker-trigger--error]=\"hasError()\"\n    [class.coar-date-picker-trigger--open]=\"isOpen()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-controls]=\"isOpen() ? calendarId() : null\"\n    role=\"combobox\"\n  >\n    <!-- Clear Button (left side) - always present to prevent CLS -->\n    <coar-icon\n      name=\"x\"\n      source=\"coar-builtin\"\n      size=\"auto\"\n      class=\"coar-date-picker-clear\"\n      [class.coar-date-picker-clear--hidden]=\"!value() || isDisabled() || readonly()\"\n      aria-hidden=\"true\"\n      (click)=\"clearDate($event)\"\n    />\n\n    <!-- Date Input -->\n    <input\n      #dateInput\n      type=\"text\"\n      class=\"coar-date-picker-input\"\n      [attr.id]=\"inputId()\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder() || inputPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-invalid]=\"hasError()\"\n      autocomplete=\"off\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n    />\n\n    <!-- Calendar Icon (right side) -->\n    <button\n      type=\"button\"\n      class=\"coar-date-picker-calendar-btn\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled() || readonly()\"\n      (click)=\"onTriggerClick()\"\n    >\n      <coar-icon name=\"calendar\" source=\"coar-builtin\" size=\"sm\" />\n    </button>\n  </div>\n\n  <!-- Calendar Dropdown (rendered via @cocoar/ui-overlay) -->\n  <ng-template #calendarTemplate>\n    <div\n      class=\"coar-date-picker-calendar coar-date-picker-calendar--overlay\"\n      [class.coar-date-picker-calendar--top]=\"calendarPosition() === 'top'\"\n      [attr.id]=\"calendarId()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Calendar\"\n    >\n      <!-- Calendar Header -->\n      <div class=\"coar-date-picker-header\">\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous year\" (click)=\"previousYear()\">\n          <coar-icon name=\"chevrons-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav\" aria-label=\"Previous month\" (click)=\"previousMonth()\">\n          <coar-icon name=\"chevron-left\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n\n        <span class=\"coar-date-picker-month-year\">\n          <span class=\"coar-date-picker-month\">{{ viewMonth() }}</span>\n          <span class=\"coar-date-picker-year\">{{ viewYear() }}</span>\n        </span>\n\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n          <coar-icon name=\"chevron-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n        <button type=\"button\" class=\"coar-date-picker-nav coar-date-picker-nav--next\" aria-label=\"Next year\" (click)=\"nextYear()\">\n          <coar-icon name=\"chevrons-right\" source=\"coar-builtin\" size=\"sm\" />\n        </button>\n      </div>\n\n      <!-- Days of Week Header -->\n      <div class=\"coar-date-picker-weekdays\" [class.coar-date-picker-weekdays--with-weeks]=\"showWeekNumbers()\">\n        @if (showWeekNumbers()) {\n          <span class=\"coar-date-picker-week-spacer\"></span>\n        }\n        @for (day of daysOfWeek(); track day) {\n          <span class=\"coar-date-picker-weekday\">{{ day }}</span>\n        }\n      </div>\n\n      <!-- Calendar Grid -->\n      <div class=\"coar-date-picker-grid\" [class.coar-date-picker-grid--with-weeks]=\"showWeekNumbers()\" role=\"grid\">\n        @for (day of calendarDays(); track day.date.toString(); let i = $index) {\n          <!-- Week number at start of each row -->\n          @if (showWeekNumbers() && i % 7 === 0) {\n            <span class=\"coar-date-picker-week-number\">{{ weekNumbers()[i / 7] }}</span>\n          }\n          <coar-popover [disabled]=\"day.isDisabled || day.markers.length === 0\" [openOnClick]=\"true\" [openOnHover]=\"true\" [interactive]=\"false\">\n            <button\n              coarPopoverTrigger\n              type=\"button\"\n              class=\"coar-date-picker-day\"\n              [class.coar-date-picker-day--outside]=\"day.isOutsideMonth\"\n              [class.coar-date-picker-day--today]=\"day.isToday\"\n              [class.coar-date-picker-day--selected]=\"day.isSelected\"\n              [class.coar-date-picker-day--focused]=\"day.isFocused\"\n              [class.coar-date-picker-day--disabled]=\"day.isDisabled\"\n              [class.coar-date-picker-day--weekend]=\"highlightWeekends() && day.isWeekend\"\n              [class.coar-date-picker-day--marked]=\"day.markers.length > 0\"\n              [class]=\"day.markerCssClass\"\n              [disabled]=\"day.isDisabled\"\n              [attr.aria-selected]=\"day.isSelected\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              [attr.tabindex]=\"day.isFocused ? 0 : -1\"\n              (click)=\"selectDate(day.date)\"\n            >\n              {{ day.day }}\n            </button>\n\n            @if (day.markers.length > 0) {\n              <div coarPopoverContent class=\"coar-date-picker-marker-popover\">\n                <div class=\"coar-date-picker-marker-popover__list\">\n                  @for (marker of getVisibleMarkers(day.markers); track marker.description) {\n                    <div class=\"coar-date-picker-marker-popover__item\">\n                      {{ marker.description }}\n                    </div>\n                  }\n\n                  @if (getHiddenMarkerCount(day.markers) > 0) {\n                    <div class=\"coar-date-picker-marker-popover__more\">+{{ getHiddenMarkerCount(day.markers) }} other events</div>\n                  }\n                </div>\n              </div>\n            }\n          </coar-popover>\n        }\n      </div>\n\n      <!-- Footer with Today Button -->\n      @if (showTodayButton()) {\n        <div class=\"coar-date-picker-footer\">\n          <button type=\"button\" class=\"coar-date-picker-today\" (click)=\"selectToday()\">Today</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Helper/Error Message -->\n  @if (message()) {\n    <span class=\"coar-date-picker-message\" [class.coar-date-picker-message--error]=\"hasError()\">\n      {{ message() }}\n    </span>\n  }\n</div>\n", styles: [":host{display:block;position:relative}.coar-date-picker-wrapper{display:flex;flex-direction:column;width:100%}.coar-date-picker-label{display:block;margin-bottom:var(--coar-component-md-label-margin);font-family:var(--coar-body-small-bold-family);font-size:var(--coar-component-md-label-font-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-primary);cursor:pointer;-webkit-user-select:none;user-select:none}.coar-date-picker-required{color:var(--coar-text-semantic-error-bold);margin-left:var(--coar-spacing-xs)}:host(.coar-date-picker--xs) .coar-date-picker-label{font-size:var(--coar-component-xs-label-font-size);margin-bottom:var(--coar-component-xs-label-margin)}:host(.coar-date-picker--sm) .coar-date-picker-label{font-size:var(--coar-component-sm-label-font-size);margin-bottom:var(--coar-component-sm-label-margin)}:host(.coar-date-picker--lg) .coar-date-picker-label{font-size:var(--coar-component-lg-label-font-size);margin-bottom:var(--coar-component-lg-label-margin)}.coar-date-picker-trigger{display:flex;align-items:center;gap:var(--coar-spacing-s);height:var(--coar-component-md-height);padding:0;border:1px solid var(--coar-border-input);border-radius:var(--coar-radius-xs);background:var(--coar-surface-input);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.coar-date-picker-trigger:hover:not(.coar-date-picker-trigger--disabled):not(.coar-date-picker-trigger--readonly):not(.coar-date-picker-trigger--error){border-color:var(--coar-border-input-hover)}.coar-date-picker-trigger:focus,.coar-date-picker-trigger:focus-within{outline:none;border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--open:not(.coar-date-picker-trigger--error){border-color:var(--coar-border-accent-primary);box-shadow:inset 0 0 0 1px var(--coar-border-accent-primary)}.coar-date-picker-trigger--disabled{background:var(--coar-surface-input-disabled);cursor:not-allowed;opacity:.6}.coar-date-picker-trigger--readonly{cursor:default}.coar-date-picker-trigger--error{border-color:var(--coar-border-semantic-error-bold)}.coar-date-picker-trigger--error:focus,.coar-date-picker-trigger--error.coar-date-picker-trigger--open{box-shadow:inset 0 0 0 1px var(--coar-border-semantic-error-bold)}:host(.coar-date-picker--xs) .coar-date-picker-trigger{height:var(--coar-component-xs-height);padding:0 var(--coar-spacing-s);gap:var(--coar-spacing-xs)}:host(.coar-date-picker--sm) .coar-date-picker-trigger{height:var(--coar-component-sm-height);padding:0 var(--coar-spacing-s)}:host(.coar-date-picker--lg) .coar-date-picker-trigger{height:var(--coar-component-lg-height);padding:0 var(--coar-spacing-l)}.coar-date-picker-input{flex:1;min-width:0;height:100%;padding:0;border:none;background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);outline:none;cursor:text;text-align:right}.coar-date-picker-input::selection{text-align:right}.coar-date-picker-input::placeholder{color:var(--coar-text-neutral-tertiary)}.coar-date-picker-input:disabled{cursor:not-allowed;color:var(--coar-text-neutral-disabled)}.coar-date-picker-input:read-only{cursor:default}:host(.coar-date-picker--xs) .coar-date-picker-input{font-size:var(--coar-component-xs-font-size)}:host(.coar-date-picker--sm) .coar-date-picker-input{font-size:var(--coar-component-sm-font-size)}:host(.coar-date-picker--lg) .coar-date-picker-input{font-size:var(--coar-component-lg-font-size)}.coar-date-picker-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--coar-spacing-s);color:var(--coar-icon-neutral-disabled);cursor:pointer;transition:color .15s ease,opacity .15s ease;opacity:.4}.coar-date-picker-clear--hidden{opacity:0;pointer-events:none}.coar-date-picker-trigger:hover .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}:host(.coar-date-picker--open) .coar-date-picker-clear:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-tertiary)}.coar-date-picker-clear:hover:not(.coar-date-picker-clear--hidden){opacity:1;color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn{display:flex;align-items:center;justify-content:center;padding:0;margin-right:var(--coar-spacing-s);border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;transition:color .15s ease}.coar-date-picker-calendar-btn:hover:not(:disabled){color:var(--coar-icon-neutral-primary)}.coar-date-picker-calendar-btn:disabled{cursor:not-allowed;color:var(--coar-icon-neutral-disabled)}.coar-date-picker-calendar{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--coar-spacing-xs);padding:var(--coar-spacing-m);min-width:280px;background:var(--coar-background-neutral-primary);border:1px solid var(--coar-border-neutral);border-radius:var(--coar-radius-s);box-shadow:var(--coar-shadow-m)}.coar-date-picker-calendar--overlay{position:static;inset:auto;margin-top:0;margin-bottom:0;z-index:auto}.coar-date-picker-calendar--portal{margin-top:0;margin-bottom:0}.coar-date-picker-calendar--css-anchor{top:anchor(bottom);left:anchor(left);bottom:auto;margin-top:var(--coar-spacing-xs)}.coar-date-picker-calendar--css-anchor.coar-date-picker-calendar--top{top:auto;bottom:anchor(top);margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-calendar--top:not(.coar-date-picker-calendar--overlay):not(.coar-date-picker-calendar--portal):not(.coar-date-picker-calendar--css-anchor){top:auto;bottom:100%;margin-top:0;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--coar-spacing-xs);margin-bottom:var(--coar-spacing-m)}.coar-date-picker-nav{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--coar-icon-neutral-secondary);cursor:pointer;border-radius:var(--coar-radius-xs);transition:background-color .15s ease,color .15s ease}.coar-date-picker-nav:hover{background:var(--coar-background-neutral-secondary);color:var(--coar-icon-neutral-primary)}.coar-date-picker-month-year{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--coar-body-base-family);color:var(--coar-text-neutral-primary);line-height:1.2}.coar-date-picker-month{font-size:var(--coar-body-base-size);font-weight:var(--coar-body-base-weight)}.coar-date-picker-year{font-size:var(--coar-body-sm-size);font-weight:var(--coar-body-sm-weight);color:var(--coar-text-neutral-secondary)}.coar-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:var(--coar-spacing-xs)}.coar-date-picker-weekdays--with-weeks{grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-neutral-secondary);text-transform:uppercase}.coar-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr)}.coar-date-picker-grid--with-weeks{position:relative;grid-template-columns:32px repeat(7,1fr)}.coar-date-picker-grid--with-weeks:before{content:\"\";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--coar-border-neutral-secondary);opacity:.15}.coar-date-picker-week-number{display:flex;align-items:center;justify-content:center;min-height:32px;font-family:var(--coar-body-caption-family);font-size:10px;color:var(--coar-text-neutral-tertiary);opacity:.6}.coar-date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;min-height:32px;padding:2px;border:none;border-radius:0;background:transparent;background-clip:content-box;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);cursor:pointer;outline:none;transition:background-color .15s ease,color .15s ease}.coar-date-picker-day:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--outside{color:var(--coar-text-neutral-tertiary);opacity:.5}.coar-date-picker-day--today:not(.coar-date-picker-day--selected){font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);background:var(--coar-background-accent-tertiary)}.coar-date-picker-day--selected{background:var(--coar-background-accent-primary);color:var(--coar-text-on-bold);font-weight:var(--coar-body-small-bold-weight)}.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--focused:not(.coar-date-picker-day--selected){outline:2px solid var(--coar-border-accent-primary);outline-offset:-2px}.coar-date-picker-day--disabled{color:var(--coar-text-neutral-disabled);cursor:not-allowed}.coar-date-picker-day--disabled:hover{background:transparent}.coar-date-picker-day--weekend{background:var(--coar-background-neutral-secondary)}.coar-date-picker-day--weekend:hover:not(:disabled):not(.coar-date-picker-day--selected){background:var(--coar-background-neutral-tertiary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected{background:var(--coar-background-accent-primary)}.coar-date-picker-day--weekend.coar-date-picker-day--selected:hover{background:var(--coar-background-accent-hover)}.coar-date-picker-day--marked{position:relative}.coar-date-picker-day--marked:after{content:\"\";position:absolute;top:2px;left:2px;right:2px;height:3px;border-radius:1px;background:var(--coar-border-semantic-info-subtle);pointer-events:none}.coar-date-picker-day--marked.coar-date-picker-day--selected:after{background:var(--coar-text-on-bold)}.coar-date-picker-marker-popover__list{display:flex;flex-direction:column;gap:var(--coar-spacing-xs)}.coar-date-picker-marker-popover__item{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-primary);line-height:1.3}.coar-date-picker-marker-popover__more{font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);color:var(--coar-text-neutral-secondary);line-height:1.3}.coar-date-picker-footer{display:flex;justify-content:center;margin-top:var(--coar-spacing-m);padding-top:var(--coar-spacing-m);border-top:1px solid var(--coar-border-neutral-tertiary)}.coar-date-picker-today{padding:var(--coar-spacing-xs) var(--coar-spacing-m);border:none;border-radius:var(--coar-radius-xs);background:transparent;font-family:var(--coar-body-small-base-family);font-size:var(--coar-body-small-base-size);font-weight:var(--coar-body-small-bold-weight);color:var(--coar-text-accent-primary);cursor:pointer;transition:background-color .15s ease}.coar-date-picker-today:hover{background:var(--coar-background-accent-tertiary)}.coar-date-picker-message{margin-top:var(--coar-spacing-xs);font-family:var(--coar-body-caption-family);font-size:var(--coar-body-caption-size);color:var(--coar-text-neutral-secondary)}.coar-date-picker-message--error{color:var(--coar-text-semantic-error-bold)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormatConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormatConfig", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], highlightWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightWeekends", required: false }] }], markers: [{ type: i0.Input, args: [{ isSignal: true, alias: "markers", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], inputRef: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], calendarTemplateRef: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { COAR_LOCALE_SERVICE, CORE_ICONS, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor };
+export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, COAR_LOCALE_SERVICE, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
 //# sourceMappingURL=cocoar-ui-components.mjs.map