@cocoar/ui 0.1.0-beta.99 → 0.1.1

package/types/cocoar-ui-components.d.ts

@@ -0,0 +1,3719 @@
+import * as _angular_core from '@angular/core';
+import { Type, Provider, ElementRef, AfterViewInit, OnDestroy, DestroyRef, TemplateRef, InjectionToken, PipeTransform, AfterContentInit, QueryList } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SafeHtml } from '@angular/platform-browser';
+import * as _cocoar_ui_components from '@cocoar/ui/components';
+import { OverlayScrollbars } from 'overlayscrollbars';
+import * as _cocoar_ui_overlay from '@cocoar/ui/overlay';
+import { Placement, OverlayRef } from '@cocoar/ui/overlay';
+import { Temporal } from '@js-temporal/polyfill';
+import { CoarLocalizationService, CoarLocalizationDataStore, CoarTimeZoneService } from '@cocoar/localization';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+declare function coarProvideValueAccessor(type: () => Type<ControlValueAccessor>): Provider;
+declare abstract class CoarControlValueAccessor<T> implements ControlValueAccessor {
+    protected readonly cvaDisabled: _angular_core.WritableSignal<boolean>;
+    protected cvaOnChange: (value: T) => void;
+    protected cvaOnTouched: () => void;
+    registerOnChange(fn: (value: T) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    abstract writeValue(value: T | null): void;
+}
+
+type CoarTextInputSize = 'xs' | 's' | 'm' | 'l';
+declare class CoarTextInputComponent extends CoarControlValueAccessor<string> {
+    /** Label text displayed above the input */
+    label: _angular_core.InputSignal<string>;
+    /** Placeholder text shown when input is empty */
+    placeholder: _angular_core.InputSignal<string>;
+    /** Current input value (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<string>;
+    /** Input size - matches button/checkbox sizes for consistent layouts */
+    size: _angular_core.InputSignal<CoarTextInputSize>;
+    /** Number of visible text rows (1 = single-line input, 2+ = textarea) */
+    rows: _angular_core.InputSignal<number>;
+    /** Disables the input (greyed out, not focusable) */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Makes the input read-only (focusable but not editable) */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the input as required, shows asterisk on label */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message to display below the input */
+    error: _angular_core.InputSignal<string>;
+    /** Hint text displayed below the input */
+    hint: _angular_core.InputSignal<string>;
+    /** Show clear button when input has value and is focused/hovered */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Text or symbol displayed before the input value */
+    prefix: _angular_core.InputSignal<string>;
+    /** Text or symbol displayed after the input value */
+    suffix: _angular_core.InputSignal<string>;
+    /** HTML id attribute for the input element */
+    id: _angular_core.InputSignal<string>;
+    /** HTML name attribute for form submission */
+    name: _angular_core.InputSignal<string>;
+    /** HTML autocomplete attribute */
+    autocomplete: _angular_core.InputSignal<string>;
+    /** Maximum character length */
+    maxlength: _angular_core.InputSignal<number | undefined>;
+    /** Emits when input value changes */
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Emits when input loses focus */
+    blurred: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when input gains focus */
+    focused: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when clear button is clicked */
+    clear: _angular_core.OutputEmitterRef<void>;
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement> | undefined>;
+    protected isMultiline: _angular_core.Signal<boolean>;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    protected showClearButton: _angular_core.Signal<boolean>;
+    protected hasError: _angular_core.Signal<boolean>;
+    protected displayMessage: _angular_core.Signal<string>;
+    private readonly autoId;
+    protected inputId: _angular_core.Signal<string>;
+    protected messageId: _angular_core.Signal<string>;
+    writeValue(value: string | null): void;
+    protected onInput(event: Event): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected onClear(): void;
+    protected onLabelClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTextInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTextInputComponent, "coar-text-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "clear": "clear"; }, never, ["[prefix]", "[suffix]", "[suffixAction]"], true, never>;
+}
+
+type CoarIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';
+/**
+ * COAR Icon Component
+ *
+ * Icon component supporting DI-provided icon registries.
+ *
+ * Usage:
+ * ```html
+ * <coar-icon name="settings" size="m"></coar-icon>
+ * ```
+ *
+ * Size tokens:
+ * - xs = 12px
+ * - s = 16px
+ * - m = 20px (default)
+ * - l = 24px
+ * - xl = 32px
+ * - auto = fills parent container (use padding on parent to control)
+ */
+declare class CoarIconComponent {
+    private readonly iconService;
+    private readonly sanitizer;
+    private iconLoadVersion;
+    /**
+     * Icon identifier.
+     * Examples: "settings", "user"
+     */
+    name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon size. Defaults to 'm' (20px).
+     * Can be a preset token (xs, s, m, l, xl, auto) or a custom CSS value (e.g., '42px', '3rem').
+     */
+    size: _angular_core.InputSignal<string>;
+    /**
+     * Rotation angle in degrees (0, 90, 180, 270, or any number).
+     */
+    rotate: _angular_core.InputSignal<number>;
+    /**
+     * Rotation transition animation.
+     * - Empty/undefined: No animation
+     * - Number: Duration in milliseconds (e.g., 300)
+     * - String: Full CSS transition value (e.g., '0.3s ease-in-out', '500ms cubic-bezier(0.4, 0, 0.2, 1)')
+     */
+    rotateTransition: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * Enable continuous spinning animation.
+     */
+    spin: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Icon color. Can be any valid CSS color value.
+     * Examples: 'red', '#ff0000', 'rgb(255, 0, 0)', 'var(--coar-text-semantic-error-bold)'
+     * Use 'inherit' to inherit the parent element's color.
+     */
+    color: _angular_core.InputSignal<string>;
+    /**
+     * Optional text label to display next to the icon.
+     */
+    label: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * Signal holding the sanitized SVG HTML ready for rendering.
+     */
+    protected sanitizedSvg: _angular_core.WritableSignal<SafeHtml | null>;
+    /**
+     * Signal indicating whether an icon is currently being loaded.
+     */
+    protected isLoading: _angular_core.WritableSignal<boolean>;
+    /**
+     * Check if the size is a preset token (xs, s, m, l, xl, auto).
+     */
+    protected isPresetSize(size: string): boolean;
+    /**
+     * Compute the CSS transition value for rotation.
+     */
+    protected getRotateTransitionValue(): string | null;
+    constructor();
+    /**
+     * Resolve an icon name to an SVG string.
+     *
+     * This is kept as a single observable chain so callers can cancel it.
+     */
+    private resolveIcon$;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarIconComponent, "coar-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; "rotateTransition": { "alias": "rotateTransition"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Configuration for number formatting */
+interface NumberFormatConfig {
+    readonly decimal: string;
+    readonly thousand: string;
+}
+type CoarNumberInputSize = 'xs' | 's' | 'm' | 'l';
+type CoarNumberInputStepperButtons = 'none' | 'increment' | 'decrement' | 'both';
+declare class CoarNumberInputComponent extends CoarControlValueAccessor<number | null> {
+    private readonly destroyRef;
+    private readonly localizationService;
+    private readonly currentLanguage;
+    private maskitoInstance?;
+    /** Label text displayed above the input */
+    label: _angular_core.InputSignal<string>;
+    /** Placeholder text shown when input is empty */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Current numeric value.
+     * Using model() for two-way binding support.
+     */
+    value: _angular_core.ModelSignal<number | null>;
+    /** Input size - matches button/checkbox sizes for consistent layouts */
+    size: _angular_core.InputSignal<CoarNumberInputSize>;
+    /** Minimum allowed value */
+    min: _angular_core.InputSignal<number | undefined>;
+    /** Maximum allowed value */
+    max: _angular_core.InputSignal<number | undefined>;
+    /** Step increment for arrows and keyboard */
+    step: _angular_core.InputSignal<number>;
+    /** Number of decimal places to display */
+    decimals: _angular_core.InputSignal<number>;
+    /** Disables the input (greyed out, not focusable) */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Makes the input read-only (focusable but not editable) */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the input as required, shows asterisk on label */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message to display below the input */
+    error: _angular_core.InputSignal<string>;
+    /** Hint text displayed below the input */
+    hint: _angular_core.InputSignal<string>;
+    /** Show clear button when input has value and is focused/hovered */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Controls visibility of increment/decrement stepper buttons.
+     * Supports both boolean attribute pattern and granular string control:
+     * - No attribute → no buttons
+     * - `stepperButtons` (attribute) → both buttons
+     * - `stepperButtons="increment"` → only increment
+     * - `stepperButtons="decrement"` → only decrement
+     * - `stepperButtons="both"` → both buttons (explicit)
+     * - `stepperButtons="none"` → no buttons (explicit)
+     */
+    stepperButtons: _angular_core.InputSignalWithTransform<CoarNumberInputStepperButtons, string | boolean>;
+    /** Text or symbol displayed before the input value */
+    prefix: _angular_core.InputSignal<string>;
+    /** Text or symbol displayed after the input value */
+    suffix: _angular_core.InputSignal<string>;
+    /**
+     * Locale identifier for number formatting (e.g., 'de-AT', 'en-US').
+     * Uses global locale service default if not specified.
+     */
+    locale: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Number format configuration (decimal and thousand separators).
+     * If not provided, uses locale service default or falls back to { decimal: '.', thousand: '' }.
+     */
+    numberFormat: _angular_core.InputSignal<NumberFormatConfig | undefined>;
+    /** HTML id attribute for the input element */
+    id: _angular_core.InputSignal<string>;
+    /** HTML name attribute for form submission */
+    name: _angular_core.InputSignal<string>;
+    /** Emits when input value changes */
+    valueChange: _angular_core.OutputEmitterRef<number | null>;
+    /** Emits when input loses focus */
+    blurred: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when input gains focus */
+    focused: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when clear button is clicked */
+    clear: _angular_core.OutputEmitterRef<void>;
+    protected displayValue: _angular_core.WritableSignal<string>;
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    protected isDragging: _angular_core.WritableSignal<boolean>;
+    protected dragStartX: _angular_core.WritableSignal<number>;
+    protected dragStartValue: _angular_core.WritableSignal<number>;
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    protected showClearButton: _angular_core.Signal<boolean>;
+    protected hasError: _angular_core.Signal<boolean>;
+    protected displayMessage: _angular_core.Signal<string>;
+    private readonly autoId;
+    protected inputId: _angular_core.Signal<string>;
+    protected messageId: _angular_core.Signal<string>;
+    protected iconSize: _angular_core.Signal<CoarIconSize>;
+    protected showIncrementButton: _angular_core.Signal<boolean>;
+    protected showDecrementButton: _angular_core.Signal<boolean>;
+    protected canDecrement: _angular_core.Signal<boolean>;
+    protected canIncrement: _angular_core.Signal<boolean>;
+    constructor();
+    /**
+     * Cached number format configuration with priority chain:
+     * 1. numberFormat input (explicit config object)
+     * 2. Browser Intl.NumberFormat detection with locale
+     * 3. Hardcoded fallback { decimal: '.', thousand: '' }
+     */
+    private readonly resolvedNumberFormat;
+    private initializeMaskito;
+    protected formatValue(value: number | null): string;
+    /**
+     * Parse locale-formatted string (respects component's decimal/thousand separators).
+     * Used when user types or pastes into the input field.
+     */
+    protected parseValue(str: string): number | null;
+    protected clampValue(value: number): number;
+    protected onInput(event: Event): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected commitValue(): void;
+    writeValue(value: number | null): void;
+    protected onClear(): void;
+    protected onLabelClick(): void;
+    protected increment(): void;
+    protected decrement(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onDragStart(event: MouseEvent): void;
+    protected onDragMove(event: MouseEvent): void;
+    protected onDragEnd(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarNumberInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarNumberInputComponent, "coar-number-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "stepperButtons": { "alias": "stepperButtons"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "numberFormat": { "alias": "numberFormat"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "clear": "clear"; }, never, ["[prefix]", "[suffix]"], true, never>;
+}
+
+type CoarPasswordInputSize = 'xs' | 's' | 'm' | 'l';
+declare class CoarPasswordInputComponent extends CoarControlValueAccessor<string> {
+    /** Label text displayed above the input */
+    label: _angular_core.InputSignal<string>;
+    /** Placeholder text shown when input is empty */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Current password value.
+     * Using model() for two-way binding support.
+     */
+    value: _angular_core.ModelSignal<string>;
+    /** Input size - matches other form elements for consistent layouts */
+    size: _angular_core.InputSignal<CoarPasswordInputSize>;
+    /** Disables the input (greyed out, not focusable) */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Makes the input read-only (focusable but not editable) */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the input as required, shows asterisk on label */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message to display below the input */
+    error: _angular_core.InputSignal<string>;
+    /** Hint text displayed below the input */
+    hint: _angular_core.InputSignal<string>;
+    /** Show clear button when input has value and is focused/hovered */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** HTML id attribute for the input element */
+    id: _angular_core.InputSignal<string>;
+    /** HTML name attribute for form submission */
+    name: _angular_core.InputSignal<string>;
+    /** HTML autocomplete attribute for browser autofill */
+    autocomplete: _angular_core.InputSignal<string>;
+    /** Maximum character length */
+    maxlength: _angular_core.InputSignal<number | undefined>;
+    /** Emits when password value changes */
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Emits when input loses focus */
+    blurred: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when input gains focus */
+    focused: _angular_core.OutputEmitterRef<FocusEvent>;
+    /** Emits when clear button is clicked */
+    clear: _angular_core.OutputEmitterRef<void>;
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    protected showPassword: _angular_core.WritableSignal<boolean>;
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected inputType: _angular_core.Signal<"text" | "password">;
+    protected toggleIcon: _angular_core.Signal<"eye-open" | "eye-closed">;
+    protected toggleAriaLabel: _angular_core.Signal<"Hide password" | "Show password">;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    protected showClearButton: _angular_core.Signal<boolean>;
+    protected hasError: _angular_core.Signal<boolean>;
+    protected displayMessage: _angular_core.Signal<string>;
+    private readonly autoId;
+    protected inputId: _angular_core.Signal<string>;
+    protected messageId: _angular_core.Signal<string>;
+    writeValue(value: string | null): void;
+    protected onInput(event: Event): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected onClear(): void;
+    protected onLabelClick(): void;
+    protected togglePasswordVisibility(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPasswordInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPasswordInputComponent, "coar-password-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "clear": "clear"; }, never, never, true, never>;
+}
+
+type CoarCheckboxSize = 'xs' | 's' | 'm' | 'l';
+declare class CoarCheckboxComponent extends CoarControlValueAccessor<boolean | undefined> {
+    /** Label text displayed next to the checkbox */
+    label: _angular_core.InputSignal<string>;
+    /**
+     * Checkbox checked state: true for checked, false for unchecked, undefined for pristine.
+     * Using model() for two-way binding support.
+     */
+    checked: _angular_core.ModelSignal<boolean | undefined>;
+    /**
+     * Sets the checkbox to indeterminate state (visual only).
+     * Typically used for "select all" checkboxes when some children are selected.
+     * The indeterminate state is cleared when the user clicks the checkbox.
+     */
+    indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disables the checkbox (greyed out, not focusable) */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Prevents changes but keeps normal appearance and focus */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks as required, shows asterisk on label */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message to display below the checkbox */
+    error: _angular_core.InputSignal<string>;
+    /** Hint text displayed below the checkbox */
+    hint: _angular_core.InputSignal<string>;
+    /** Checkbox size - matches input/button heights for consistent layouts */
+    size: _angular_core.InputSignal<CoarCheckboxSize>;
+    /** HTML id attribute for the checkbox element */
+    id: _angular_core.InputSignal<string>;
+    /** HTML name attribute for form submission */
+    name: _angular_core.InputSignal<string>;
+    /** Value submitted with form when checked */
+    value: _angular_core.InputSignal<string>;
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    protected isChecked: _angular_core.Signal<boolean>;
+    protected isIndeterminate: _angular_core.Signal<boolean>;
+    protected hasError: _angular_core.Signal<boolean>;
+    protected displayMessage: _angular_core.Signal<string>;
+    private readonly autoId;
+    protected inputId: _angular_core.Signal<string>;
+    protected messageId: _angular_core.Signal<string>;
+    constructor();
+    writeValue(value: boolean | undefined | null): void;
+    protected onChange(event: Event): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarCheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarCheckboxComponent, "coar-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+
+/**
+ * Individual radio button, must be used inside a coar-radio-group.
+ *
+ * @example
+ * ```html
+ * <coar-radio value="option1">Option 1</coar-radio>
+ * ```
+ */
+declare class CoarRadioComponent<T = unknown> {
+    private readonly group;
+    /** Value of this radio option */
+    value: _angular_core.InputSignal<T>;
+    /** Disables this specific radio button */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    protected isChecked: _angular_core.Signal<boolean>;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    protected groupSize: _angular_core.Signal<_cocoar_ui_components.RadioGroupSize>;
+    protected groupHasError: _angular_core.Signal<boolean>;
+    protected radioName: _angular_core.Signal<string>;
+    private readonly autoId;
+    protected inputId: _angular_core.Signal<string>;
+    protected onClick(event: Event): void;
+    protected onInputChange(): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    private select;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarRadioComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarRadioComponent<any>, "coar-radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type RadioGroupOrientation = 'horizontal' | 'vertical';
+type RadioGroupSize = 's' | 'm' | 'l';
+/**
+ * Radio group component for single-choice selection.
+ *
+ * @example
+ * ```html
+ * <coar-radio-group [(ngModel)]="selectedValue" name="options">
+ *   <coar-radio value="a">Option A</coar-radio>
+ *   <coar-radio value="b">Option B</coar-radio>
+ *   <coar-radio value="c" [disabled]="true">Option C (disabled)</coar-radio>
+ * </coar-radio-group>
+ * ```
+ */
+declare class CoarRadioGroupComponent<T = unknown> extends CoarControlValueAccessor<T> {
+    /** Currently selected value */
+    value: _angular_core.ModelSignal<T | undefined>;
+    /** Group name for radio inputs */
+    name: _angular_core.InputSignal<string>;
+    /** Accessible label for the group */
+    label: _angular_core.InputSignal<string>;
+    /** Layout orientation */
+    orientation: _angular_core.InputSignal<RadioGroupOrientation>;
+    /** Size of radio buttons */
+    size: _angular_core.InputSignal<RadioGroupSize>;
+    /** Disables all radio buttons in the group */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the group as required */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message to display */
+    error: _angular_core.InputSignal<string>;
+    /** Hint text displayed below the group */
+    hint: _angular_core.InputSignal<string>;
+    /** Emits when selection changes */
+    valueChange: _angular_core.OutputEmitterRef<T>;
+    /** Query all child radio components */
+    private readonly radios;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    protected hasError: _angular_core.Signal<boolean>;
+    protected displayMessage: _angular_core.Signal<string>;
+    protected hasMessage: _angular_core.Signal<boolean>;
+    private readonly autoId;
+    protected messageId: _angular_core.Signal<string>;
+    /** Called by child radio when selected */
+    selectValue(newValue: T): void;
+    /** Check if a value is currently selected */
+    isSelected(checkValue: T): boolean;
+    /** Check if group is disabled (exposed for child components) */
+    isGroupDisabled(): boolean;
+    writeValue(value: T): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarRadioGroupComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarRadioGroupComponent<any>, "coar-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, ["radios"], ["*"], true, never>;
+}
+
+/**
+ * Theme options for the scrollbar appearance.
+ * - 'dark': Dark scrollbar theme (default)
+ * - 'light': Light scrollbar theme
+ */
+type CoarScrollbarTheme = 'dark' | 'light';
+/**
+ * Auto-hide behavior for the scrollbar.
+ * - 'never': Scrollbars are always visible
+ * - 'scroll': Scrollbars hide when not scrolling
+ * - 'leave': Scrollbars hide when pointer leaves the element
+ * - 'move': Scrollbars hide when pointer stops moving
+ */
+type CoarScrollbarAutoHide = 'never' | 'scroll' | 'leave' | 'move';
+/**
+ * Overflow behavior for each axis.
+ * - 'hidden': Content is clipped, no scrollbar
+ * - 'scroll': Always show scrollbar
+ * - 'visible-hidden': Content visible but no scrollbar
+ * - 'visible-scroll': Content visible with scrollbar
+ */
+type CoarScrollbarOverflow = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
+/**
+ * Directive that applies custom overlay scrollbars to an element.
+ *
+ * Uses OverlayScrollbars library to replace native scrollbars with
+ * styleable overlay scrollbars while preserving native scroll behavior.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <div coarScrollbar>Scrollable content</div>
+ *
+ * <!-- With options -->
+ * <div coarScrollbar [theme]="'light'" [autoHide]="'scroll'">
+ *   Scrollable content
+ * </div>
+ *
+ * <!-- Horizontal only -->
+ * <div coarScrollbar [overflowX]="'scroll'" [overflowY]="'hidden'">
+ *   Horizontal scrollable content
+ * </div>
+ * ```
+ */
+declare class CoarScrollbarDirective implements AfterViewInit, OnDestroy {
+    private readonly elementRef;
+    private readonly ngZone;
+    /** Theme for scrollbar appearance */
+    readonly theme: _angular_core.InputSignal<CoarScrollbarTheme>;
+    /** Auto-hide behavior for scrollbars */
+    readonly autoHide: _angular_core.InputSignal<CoarScrollbarAutoHide>;
+    /** Delay in ms before auto-hide triggers */
+    readonly autoHideDelay: _angular_core.InputSignal<number>;
+    /** Whether clicking the track scrolls to that position */
+    readonly clickScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Overflow behavior for x-axis */
+    readonly overflowX: _angular_core.InputSignal<CoarScrollbarOverflow>;
+    /** Overflow behavior for y-axis */
+    readonly overflowY: _angular_core.InputSignal<CoarScrollbarOverflow>;
+    /** Whether to defer initialization until browser is idle */
+    readonly defer: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Overscroll behavior to prevent scroll chaining to parent elements.
+     * - 'auto': Default browser behavior (scroll chains to parent)
+     * - 'contain': Prevents scroll chaining when reaching scroll boundaries
+     * - 'none': Prevents scroll chaining and disables bounce effects
+     */
+    readonly overscrollBehavior: _angular_core.InputSignal<"auto" | "none" | "contain">;
+    private osInstance;
+    private initialized;
+    private contentObserver;
+    private updateDebounceTimer;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Returns the OverlayScrollbars instance or null if not initialized.
+     */
+    getInstance(): OverlayScrollbars | null;
+    /**
+     * Scrolls to the specified position.
+     */
+    scrollTo(options: {
+        x?: number;
+        y?: number;
+    }): void;
+    /**
+     * Scrolls to the bottom of the scrollable content.
+     */
+    scrollToBottom(): void;
+    /**
+     * Scrolls to the top of the scrollable content.
+     */
+    scrollToTop(): void;
+    /**
+     * Updates the scrollbar (useful after dynamic content changes).
+     */
+    update(): void;
+    private deferInitialization;
+    private initialize;
+    private observeContentChanges;
+    private buildOptions;
+    private destroy;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarScrollbarDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarScrollbarDirective, "[coarScrollbar]", ["coarScrollbar"], { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "autoHide": { "alias": "autoHide"; "required": false; "isSignal": true; }; "autoHideDelay": { "alias": "autoHideDelay"; "required": false; "isSignal": true; }; "clickScroll": { "alias": "clickScroll"; "required": false; "isSignal": true; }; "overflowX": { "alias": "overflowX"; "required": false; "isSignal": true; }; "overflowY": { "alias": "overflowY"; "required": false; "isSignal": true; }; "defer": { "alias": "defer"; "required": false; "isSignal": true; }; "overscrollBehavior": { "alias": "overscrollBehavior"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Represents a selectable option in select components.
+ *
+ * @template T - The type of the option value
+ */
+interface CoarSelectOption<T = unknown> {
+    /** The value stored when this option is selected */
+    value: T;
+    /** The display label shown in the dropdown and selected state */
+    label: string;
+    /** Whether this option is disabled and cannot be selected */
+    disabled?: boolean;
+    /** Optional group this option belongs to (for grouped options) */
+    group?: string;
+    /** Optional icon to display next to the label */
+    icon?: string;
+}
+
+type CoarSelectSize = 'xs' | 's' | 'm' | 'l';
+/**
+ * Visual appearance of the select trigger.
+ * - 'outline': Default bordered input style
+ * - 'inline': Borderless, transparent background - blends into surrounding content
+ */
+type CoarSelectAppearance = 'outline' | 'inline';
+/** Dropdown position relative to the trigger */
+type CoarDropdownPosition = 'top' | 'bottom';
+/**
+ * Base class providing shared functionality for all select components.
+ * Handles dropdown state, keyboard navigation, and common styling.
+ * Subclasses override openDropdown() to use the overlay system.
+ */
+declare abstract class CoarSelectBase<T> extends CoarControlValueAccessor<T> {
+    protected readonly elementRef: ElementRef<any>;
+    protected readonly destroyRef: DestroyRef;
+    /** Label text displayed above the select */
+    label: _angular_core.InputSignal<string>;
+    /** Placeholder text shown when no option is selected */
+    placeholder: _angular_core.InputSignal<string>;
+    /** Available options to choose from */
+    options: _angular_core.InputSignal<CoarSelectOption<unknown>[]>;
+    /** Select size - matches button/input heights for consistent layouts */
+    size: _angular_core.InputSignal<CoarSelectSize>;
+    /**
+     * Visual appearance of the select trigger.
+     * - 'outline': Default bordered input style
+     * - 'inline': Borderless, transparent - blends into surrounding content
+     */
+    appearance: _angular_core.InputSignal<CoarSelectAppearance>;
+    /** Disables the select (greyed out, not focusable) */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Makes the select read-only (focusable but not editable) */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the select as required, shows asterisk on label */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message to display below the select */
+    error: _angular_core.InputSignal<string>;
+    /** Hint text displayed below the select */
+    hint: _angular_core.InputSignal<string>;
+    /** HTML id attribute for the select element */
+    id: _angular_core.InputSignal<string>;
+    /** HTML name attribute for form submission */
+    name: _angular_core.InputSignal<string>;
+    /** Enable search/filter functionality within the dropdown */
+    searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Search input placeholder when searchable is enabled */
+    searchPlaceholder: _angular_core.InputSignal<string>;
+    /**
+     * Comparison function to match values with options.
+     * Use this when value objects come from different sources (e.g., API vs form).
+     *
+     * @example
+     * ```typescript
+     * // Compare Country objects by their ID
+     * compareById = (a: Country | null, b: Country | null) => a?.id === b?.id;
+     * ```
+     */
+    compareWith: _angular_core.InputSignal<((o1: unknown, o2: unknown) => boolean) | undefined>;
+    /** Force dropdown position ('auto' calculates based on available space) */
+    dropdownPositionPreference: _angular_core.InputSignal<"auto" | "top" | "bottom">;
+    /** Reference to the scrollbar directive for scroll control */
+    protected scrollbarRef: _angular_core.Signal<CoarScrollbarDirective | undefined>;
+    /** Reference to the options list container for scroll-into-view */
+    protected optionsListRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
+    /** Reference to the search input for focusing (when searchable) */
+    protected searchInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** DOM id for the dropdown search input (when searchable). */
+    protected searchInputId: _angular_core.Signal<string>;
+    /** Whether the dropdown is currently open */
+    protected isOpen: _angular_core.WritableSignal<boolean>;
+    /** Whether the select is focused */
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    /** Current search/filter query */
+    protected searchQuery: _angular_core.WritableSignal<string>;
+    /** Currently highlighted option index for keyboard navigation */
+    protected highlightedIndex: _angular_core.WritableSignal<number>;
+    /** Current dropdown position */
+    protected dropdownPosition: _angular_core.WritableSignal<CoarDropdownPosition>;
+    /** Combined disabled state from input and CVA */
+    protected isDisabled: _angular_core.Signal<boolean>;
+    /** Whether there's an error to display */
+    protected hasError: _angular_core.Signal<boolean>;
+    /** Message to display (error takes priority over hint) */
+    protected displayMessage: _angular_core.Signal<string>;
+    /** Generated unique ID for the select element */
+    private readonly autoId;
+    protected inputId: _angular_core.Signal<string>;
+    /** ID for the message element (for aria-describedby) */
+    protected messageId: _angular_core.Signal<string>;
+    /** ID for the listbox element */
+    protected listboxId: _angular_core.Signal<string>;
+    /** Filtered options based on search query */
+    protected filteredOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
+    /**
+     * Options for display, reversed when dropdown opens to top.
+     * This ensures the first option is always nearest to the trigger.
+     */
+    protected displayOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
+    /**
+     * Check if a display index is highlighted.
+     * When reversed, converts display index to data index.
+     */
+    protected isHighlighted(displayIndex: number): boolean;
+    /**
+     * Set highlight from display index.
+     * When reversed, converts display index to data index.
+     */
+    protected setHighlightFromDisplay(displayIndex: number): void;
+    constructor();
+    /** Toggle dropdown open/closed state */
+    protected toggleDropdown(): void;
+    /**
+     * Open the dropdown.
+     * Subclasses MUST override this method to implement overlay-based dropdown.
+     */
+    protected openDropdown(): void;
+    /**
+     * Close the dropdown.
+     * Subclasses MUST override this method to implement overlay-based dropdown.
+     */
+    protected closeDropdown(): void;
+    /** Handle keyboard navigation */
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** Move highlight to the next available option */
+    protected highlightNextOption(): void;
+    /** Move highlight to the previous available option */
+    protected highlightPreviousOption(): void;
+    /** Move highlight to the first available option */
+    protected highlightFirstOption(): void;
+    /** Move highlight to the last available option */
+    protected highlightLastOption(): void;
+    /** Scroll the highlighted option into view */
+    protected scrollToHighlighted(): void;
+    protected focusSearchInput(): void;
+    protected scrollOptionsToBottom(): void;
+    protected getOptionsListElement(): HTMLDivElement | null;
+    /**
+     * CSS selector for the highlighted option element.
+     * Each component defines its own selector based on its CSS class naming.
+     */
+    protected abstract get highlightedOptionSelector(): string;
+    /** Handle focus event */
+    protected onFocus(): void;
+    /** Handle blur event */
+    protected onBlur(): void;
+    /** Handle search input changes */
+    protected onSearchInput(event: Event): void;
+    /** Whether this select should close on document clicks outside its host element. */
+    protected shouldCloseOnOutsideClick(): boolean;
+    /** Setup click outside handler to close dropdown. */
+    protected installOutsideClickHandler(): void;
+    /**
+     * Resolve dropdown placement based on available viewport space.
+     * Shared across all select subclasses that use the overlay system.
+     */
+    protected resolvePlacement(trigger: HTMLElement, estimatedPanelHeight: number): Placement;
+    /**
+     * ID of the currently highlighted option element, for `aria-activedescendant`.
+     * Converts the data-level highlightedIndex to the display-level DOM id.
+     * Subclasses that use a different options list (e.g. tag-select) override this.
+     */
+    protected activeDescendantId: _angular_core.Signal<string | null>;
+    /** Abstract method to select the currently highlighted option */
+    protected abstract selectHighlightedOption(): void;
+    /** Abstract method to get the display text for the current selection */
+    abstract getDisplayText(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarSelectBase<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarSelectBase<any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "dropdownPositionPreference": { "alias": "dropdownPositionPreference"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Single-select dropdown component.
+ *
+ * Allows selecting one option from a list with keyboard navigation,
+ * search/filter support, and full forms integration.
+ *
+ * @example
+ * ```html
+ * <coar-single-select
+ *   label="Country"
+ *   [options]="countries"
+ *   [(value)]="selectedCountry"
+ *   placeholder="Select a country"
+ * />
+ * ```
+ */
+declare class CoarSingleSelectComponent<T = unknown> extends CoarSelectBase<T | null> {
+    private readonly overlayBuilder;
+    private readonly triggerRef;
+    private readonly dropdownTemplateRef;
+    private overlayRef;
+    /** Current selected value (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<T | null>;
+    /** Whether to show a clear button when a value is selected */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emits when the selected value changes */
+    valueChange: _angular_core.OutputEmitterRef<T | null>;
+    /** CSS selector for highlighted option (used by base class scrollToHighlighted) */
+    protected get highlightedOptionSelector(): string;
+    /** The currently selected option object */
+    protected selectedOption: _angular_core.Signal<CoarSelectOption<unknown> | null>;
+    /** Whether to show the clear button */
+    protected showClearButton: _angular_core.Signal<boolean>;
+    /** Display text for the current selection */
+    getDisplayText(): string;
+    /** Write value from forms API */
+    writeValue(value: T | null): void;
+    /** Select an option by its value */
+    selectOption(option: CoarSelectOption<T>): void;
+    /** Select the currently highlighted option */
+    protected selectHighlightedOption(): void;
+    /** Clear the current selection */
+    protected clearSelection(event: Event): void;
+    /** Check if an option is currently selected */
+    protected isSelected(option: CoarSelectOption): boolean;
+    protected shouldCloseOnOutsideClick(): boolean;
+    protected openDropdown(): void;
+    protected closeDropdown(): void;
+    private estimatePanelHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarSingleSelectComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarSingleSelectComponent<any>, "coar-single-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Multi-select dropdown component.
+ *
+ * Allows selecting multiple options from a list with checkboxes,
+ * keyboard navigation, search/filter support, and full forms integration.
+ *
+ * @example
+ * ```html
+ * <coar-multi-select
+ *   label="Skills"
+ *   [options]="skills"
+ *   [(value)]="selectedSkills"
+ *   placeholder="Select skills..."
+ * />
+ * ```
+ */
+declare class CoarMultiSelectComponent<T = unknown> extends CoarSelectBase<T[]> {
+    private readonly overlayBuilder;
+    private readonly triggerRef;
+    private readonly dropdownTemplateRef;
+    private overlayRef;
+    /** Current selected values (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<T[]>;
+    /** Whether to show a clear button when values are selected */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Maximum number of selected items to display before showing count */
+    maxDisplayItems: _angular_core.InputSignal<number>;
+    /** Whether to show "Select All" option */
+    showSelectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emits when the selected values change */
+    valueChange: _angular_core.OutputEmitterRef<T[]>;
+    /** CSS selector for highlighted option (used by base class scrollToHighlighted) */
+    protected get highlightedOptionSelector(): string;
+    /** The currently selected option objects */
+    protected selectedOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
+    /** Whether to show the clear button */
+    protected showClearButton: _angular_core.Signal<boolean>;
+    /** Whether all options are selected */
+    protected allSelected: _angular_core.Signal<boolean>;
+    /** Whether some but not all options are selected */
+    protected someSelected: _angular_core.Signal<boolean>;
+    /** Display text for the current selection */
+    getDisplayText(): string;
+    /** Write value from forms API */
+    writeValue(value: T[] | null): void;
+    /** Toggle selection of an option */
+    toggleOption(option: CoarSelectOption<T>, event?: Event): void;
+    /** Select the currently highlighted option */
+    protected selectHighlightedOption(): void;
+    /** Toggle all options */
+    protected toggleAll(event?: Event): void;
+    /** Clear all selections */
+    protected clearSelection(event: Event): void;
+    /** Check if an option is currently selected */
+    protected isSelected(option: CoarSelectOption): boolean;
+    /** Handle keyboard for multi-select (space toggles instead of closing) */
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected shouldCloseOnOutsideClick(): boolean;
+    protected openDropdown(): void;
+    protected closeDropdown(): void;
+    private estimatePanelHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarMultiSelectComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarMultiSelectComponent<any>, "coar-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxDisplayItems": { "alias": "maxDisplayItems"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Tag-based multi-select component.
+ *
+ * Displays selected items as removable tag chips with support for
+ * creating new tags on-the-fly (optional), keyboard navigation,
+ * and full forms integration.
+ *
+ * @example
+ * ```html
+ * <coar-tag-select
+ *   label="Tags"
+ *   [options]="availableTags"
+ *   [(value)]="selectedTags"
+ *   [allowCreate]="true"
+ *   placeholder="Add tags..."
+ * />
+ * ```
+ */
+declare class CoarTagSelectComponent<T = string> extends CoarSelectBase<T[]> {
+    private readonly overlayBuilder;
+    private readonly triggerRef;
+    private readonly dropdownTemplateRef;
+    private overlayRef;
+    /** Current selected values (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<T[]>;
+    /** Allow creating new tags that don't exist in options */
+    allowCreate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Maximum number of tags that can be selected (0 = unlimited) */
+    maxTags: _angular_core.InputSignal<number>;
+    /** Text shown when creating a new tag */
+    createPrefix: _angular_core.InputSignal<string>;
+    /** Emits when the selected values change */
+    valueChange: _angular_core.OutputEmitterRef<T[]>;
+    /** Emits when a new tag is created */
+    tagCreated: _angular_core.OutputEmitterRef<T>;
+    /**
+     * Reference to the inline search input (tag-select uses inline input, not dropdown search).
+     * This is separate from the base class searchInputRef.
+     */
+    protected inlineInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** CSS selector for highlighted option (used by base class scrollToHighlighted) */
+    protected get highlightedOptionSelector(): string;
+    /**
+     * Override: tag-select uses availableOptions (excluding already-selected),
+     * and may have a "Create" option at the end.
+     */
+    protected activeDescendantId: _angular_core.Signal<string | null>;
+    /** The currently selected option objects */
+    protected selectedOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
+    /** Available options that aren't already selected */
+    protected availableOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
+    /**
+     * Available options for display, reversed when dropdown opens to top.
+     * This ensures the first option is always nearest to the trigger.
+     */
+    protected displayAvailableOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
+    /**
+     * Check if a display index is highlighted (for availableOptions).
+     * When reversed, converts display index to data index.
+     */
+    protected isAvailableHighlighted(displayIndex: number): boolean;
+    /**
+     * Set highlight from display index (for availableOptions).
+     * When reversed, converts display index to data index.
+     */
+    protected setAvailableHighlightFromDisplay(displayIndex: number): void;
+    /** Whether the max tags limit has been reached */
+    protected maxReached: _angular_core.Signal<boolean>;
+    /** Whether to show the "Create" option */
+    protected showCreateOption: _angular_core.Signal<boolean>;
+    /** Display text for the current selection */
+    getDisplayText(): string;
+    /** Write value from forms API */
+    writeValue(value: T[] | null): void;
+    /** Add a tag from an option */
+    addTag(option: CoarSelectOption<T>): void;
+    /** Remove a tag by value */
+    removeTag(tagValue: T, event?: Event): void;
+    /** Create a new tag from the search query */
+    protected createTag(): void;
+    /** Select the currently highlighted option */
+    protected selectHighlightedOption(): void;
+    /** Handle keyboard for tag-select */
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** Handle input changes */
+    protected onInputChange(event: Event): void;
+    /** Focus the inline input */
+    protected focusInput(): void;
+    /** Handle input focus */
+    protected onInputFocus(): void;
+    /** Handle input blur */
+    protected onInputBlur(): void;
+    /** Override to calculate highlighted index including create option */
+    protected highlightNextOption(): void;
+    /** Scroll highlighted option into view */
+    protected scrollToHighlighted(): void;
+    protected shouldCloseOnOutsideClick(): boolean;
+    protected openDropdown(): void;
+    protected closeDropdown(): void;
+    private estimatePanelHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTagSelectComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTagSelectComponent<any>, "coar-tag-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "createPrefix": { "alias": "createPrefix"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "tagCreated": "tagCreated"; }, never, never, true, never>;
+}
+
+type CoarSwitchSize = 's' | 'm' | 'l';
+declare class CoarSwitchComponent extends CoarControlValueAccessor<boolean> {
+    /** Label text displayed next to the switch */
+    label: _angular_core.InputSignal<string>;
+    /** Switch checked state */
+    checked: _angular_core.ModelSignal<boolean>;
+    /** Disables the switch */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Prevents changes but keeps normal appearance */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Switch size */
+    size: _angular_core.InputSignal<CoarSwitchSize>;
+    /** HTML id attribute */
+    id: _angular_core.InputSignal<string>;
+    /** HTML name attribute */
+    name: _angular_core.InputSignal<string>;
+    /** Label position relative to the switch */
+    labelPosition: _angular_core.InputSignal<"before" | "after">;
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    protected isDisabled: _angular_core.Signal<boolean>;
+    private readonly autoId;
+    protected inputId: _angular_core.Signal<string>;
+    writeValue(value: boolean | null): void;
+    protected onToggle(event: Event): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarSwitchComponent, "coar-switch", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+
+/**
+ * Shared date formatting configuration.
+ *
+ * Note: This config is intentionally small so it can be used by multiple UI components
+ * (date picker, future calendar, etc.) without pulling in Angular-only code.
+ */
+interface DateFormatConfig {
+    /** Date format pattern: 'dd.mm.yyyy', 'dd/mm/yyyy', 'mm/dd/yyyy', 'yyyy-mm-dd' */
+    readonly pattern: 'dd.mm.yyyy' | 'dd/mm/yyyy' | 'mm/dd/yyyy' | 'yyyy-mm-dd';
+    /** First day of week: 1 = Monday, 7 = Sunday */
+    readonly firstDayOfWeek: 1 | 7;
+}
+/**
+ * Maps date format patterns to Maskito date modes.
+ * Used by all picker components that initialize Maskito input masks.
+ */
+declare const COAR_DATE_FORMAT_TO_MASKITO_MODE: Record<DateFormatConfig['pattern'], 'dd/mm/yyyy' | 'mm/dd/yyyy' | 'yyyy/mm/dd'>;
+
+/**
+ * Represents a date marker for highlighting special dates (holidays, events, etc.).
+ * Supports single dates or date ranges.
+ */
+interface CoarDateMarker {
+    /** Start date of the marker (or single date if no endDate) */
+    startDate: Temporal.PlainDate;
+    /** Optional end date for date ranges (inclusive) */
+    endDate?: Temporal.PlainDate;
+    /** Description shown as tooltip on hover */
+    description: string;
+    /** Optional custom CSS class for styling different marker types */
+    cssClass?: string;
+}
+
+/**
+ * Shared size type for date/datetime pickers.
+ */
+type CoarDatePickerSize = 'xs' | 's' | 'm' | 'l';
+/**
+ * Month item structure for the month list.
+ */
+interface CoarMonthItem {
+    readonly month: number;
+    readonly name: string;
+    readonly isActive: boolean;
+    readonly yearMonth: Temporal.PlainYearMonth;
+}
+/**
+ * Base class for date and datetime picker components.
+ *
+ * Provides shared functionality:
+ * - Localization service integration
+ * - Date format configuration resolution
+ * - Month list navigation
+ * - Overlay management
+ * - Common state computations
+ *
+ * @template T - The value type (PlainDate or PlainDateTime)
+ */
+declare abstract class CoarDatePickerBase<T> extends CoarControlValueAccessor<T | null> {
+    protected readonly destroyRef: DestroyRef;
+    protected readonly overlayBuilder: _cocoar_ui_overlay.CoarOverlayOpenBuilder;
+    protected readonly localizationService: CoarLocalizationService | null;
+    protected readonly localizationDataStore: CoarLocalizationDataStore | null;
+    protected readonly timeZoneService: CoarTimeZoneService | null;
+    protected overlayRef: OverlayRef | null;
+    /** Current language from localization service (reactive) */
+    protected readonly currentLanguage: _angular_core.Signal<string>;
+    /**
+     * Current timezone from timezone service (reactive).
+     * Used for calculating "today" correctly across timezone boundaries and DST.
+     */
+    protected readonly currentTimeZone: _angular_core.Signal<string> | undefined;
+    /**
+     * Today's date based on the configured timezone.
+     *
+     * This is a computed signal that reacts to timezone changes.
+     * Uses the timezone service if available, otherwise falls back to system timezone.
+     *
+     * Important for DST: At 11 PM in Vienna on March 30th, it might already be
+     * March 31st in New York. This computed ensures "today" is always correct
+     * for the configured timezone.
+     */
+    protected readonly today: _angular_core.Signal<Temporal.PlainDate>;
+    /** Label text displayed above the input */
+    label: _angular_core.InputSignal<string>;
+    /** Placeholder text when no value is selected */
+    placeholder: _angular_core.InputSignal<string>;
+    /** Size variant */
+    size: _angular_core.InputSignal<CoarDatePickerSize>;
+    /** Whether the picker is readonly */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the picker is disabled */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the field is required */
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Error message (empty string = no error) */
+    error: _angular_core.InputSignal<string>;
+    /** Hint text displayed below the input */
+    hint: _angular_core.InputSignal<string>;
+    /**
+     * Locale identifier for date formatting (e.g., 'de-AT', 'en-US').
+     * Uses global locale service default if not specified.
+     */
+    locale: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Date format configuration (pattern and first day of week).
+     * If not provided, uses locale service default or falls back to European format.
+     */
+    dateFormatConfig: _angular_core.InputSignal<DateFormatConfig | undefined>;
+    /**
+     * Whether to show the current month button (floating action button that scrolls to current month).
+     */
+    showTodayMonthButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to show week numbers */
+    showWeekNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to highlight weekend days */
+    highlightWeekends: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Date markers for highlighting special dates */
+    markers: _angular_core.InputSignal<CoarDateMarker[]>;
+    /** Whether to show a clear button when a value is selected */
+    clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Minimum year in the year stepper.
+     * Default: current year - 100
+     */
+    minYear: _angular_core.InputSignal<number>;
+    /**
+     * Maximum year in the year stepper.
+     * Default: current year + 50
+     */
+    maxYear: _angular_core.InputSignal<number>;
+    /** Emitted when the picker opens */
+    opened: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when the picker closes */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /** Reference to the trigger element */
+    protected triggerRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** Reference to the panel template */
+    protected panelTemplateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    /** Unique ID for this component instance. Subclasses must set this with their selector prefix. */
+    protected abstract readonly uid: string;
+    /** ID for the label element */
+    protected labelId: _angular_core.Signal<string>;
+    /** ID for the input element */
+    protected inputId: _angular_core.Signal<string>;
+    /** ID for the panel */
+    protected panelId: _angular_core.Signal<string>;
+    /** ID for the message element */
+    protected messageId: _angular_core.Signal<string>;
+    /** Whether the panel is open */
+    protected isOpen: _angular_core.WritableSignal<boolean>;
+    /** Panel position (determined before opening) */
+    protected panelPosition: _angular_core.WritableSignal<"top" | "bottom">;
+    /** Display value for the input field */
+    protected displayValue: _angular_core.WritableSignal<string>;
+    /** Currently visible month in the calendar (synced with month list) */
+    protected activeMonth: _angular_core.WritableSignal<Temporal.PlainYearMonth | null>;
+    /**
+     * Effective date format configuration.
+     * Resolution order:
+     * 1. Explicit dateFormatConfig input
+     * 2. Localization data store (based on current language)
+     * 3. Intl.DateTimeFormat detection from locale
+     * 4. Default: European format (dd.mm.yyyy)
+     */
+    protected effectiveDateFormat: _angular_core.Signal<DateFormatConfig>;
+    /** Get the date format pattern */
+    protected dateFormat: _angular_core.Signal<"dd.mm.yyyy" | "dd/mm/yyyy" | "mm/dd/yyyy" | "yyyy-mm-dd">;
+    /** Get the separator character */
+    protected separator: _angular_core.Signal<"." | "/" | "-">;
+    /**
+     * Effective locale.
+     * Resolution order:
+     * 1. Explicit locale input
+     * 2. Current language from localization service
+     * 3. Browser's navigator.language
+     */
+    protected effectiveLocale: _angular_core.Signal<string>;
+    /** Whether the picker has an error state */
+    protected hasError: _angular_core.Signal<boolean>;
+    /** The message to display (error takes priority over hint) */
+    protected displayMessage: _angular_core.Signal<string>;
+    /** Whether the picker is disabled (including CVA disabled state) */
+    protected isDisabled: _angular_core.Signal<boolean>;
+    /** Whether to show the clear button */
+    protected showClearButton: _angular_core.Signal<boolean>;
+    /**
+     * Get the current value. Subclasses implement this to access their typed model.
+     */
+    protected abstract getValue(): T | null;
+    /**
+     * Get the resolved active month based on the current value.
+     * For date picker: value?.toPlainYearMonth()
+     * For datetime picker: value?.toPlainDate().toPlainYearMonth()
+     */
+    protected abstract resolvedActiveMonth(): Temporal.PlainYearMonth;
+    /**
+     * Get the selected date as a PlainDate for marker filtering.
+     * For date picker: value()
+     * For datetime/zoned pickers: selectedDate() (extracted from value)
+     */
+    protected abstract getSelectedPlainDate(): Temporal.PlainDate | null;
+    /**
+     * Reset the value to null. Called by clearValue().
+     * Subclasses set their model to null, emit valueChange, and handle extra state (e.g. pendingTime).
+     */
+    protected abstract resetValue(): void;
+    /**
+     * Estimated panel height for overlay placement calculation.
+     */
+    protected abstract estimatePanelHeight(): number;
+    /**
+     * Markers for the currently selected date.
+     */
+    protected selectedDateMarkers: _angular_core.Signal<CoarDateMarker[]>;
+    /** Current year from activeMonth */
+    protected currentYear: _angular_core.Signal<number>;
+    /** Current month number from activeMonth (1-12) */
+    protected currentMonthNumber: _angular_core.Signal<number>;
+    /** Whether previous year button is disabled */
+    protected isPrevYearDisabled: _angular_core.Signal<boolean>;
+    /** Whether next year button is disabled */
+    protected isNextYearDisabled: _angular_core.Signal<boolean>;
+    /**
+     * Month list items for the current year.
+     */
+    protected monthItems: _angular_core.Signal<CoarMonthItem[]>;
+    /** Direction for the "jump to today" FAB */
+    protected todayMonthScrollDirection: _angular_core.Signal<"down" | "up" | "hidden">;
+    /** Whether to show the today month FAB */
+    protected showTodayMonthFab: _angular_core.Signal<boolean>;
+    /** Navigate to previous year */
+    protected previousYear(): void;
+    /** Navigate to next year */
+    protected nextYear(): void;
+    /** Select a month from the list */
+    protected selectMonth(yearMonth: Temporal.PlainYearMonth): void;
+    /** Scroll to today's month */
+    protected scrollToTodayMonth(): void;
+    /** Handle active month change from calendar scroll */
+    protected onActiveMonthChanged(yearMonth: Temporal.PlainYearMonth): void;
+    /**
+     * Resolve overlay placement based on available viewport space.
+     */
+    protected resolvePlacement(trigger: HTMLElement, estimatedPanelHeight: number): Placement;
+    /**
+     * Close the picker panel.
+     */
+    closePanel(): void;
+    /**
+     * Toggle the picker panel.
+     */
+    togglePanel(): void;
+    /**
+     * Open the picker panel.
+     */
+    openPanel(): void;
+    /**
+     * Hook called when the panel closes. Override in subclasses for cleanup.
+     */
+    protected onPanelClosed(): void;
+    /**
+     * Clear the selected value.
+     */
+    clearValue(event: Event): void;
+    protected onTriggerClick(): void;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarDatePickerBase<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarDatePickerBase<any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormatConfig": { "alias": "dateFormatConfig"; "required": false; "isSignal": true; }; "showTodayMonthButton": { "alias": "showTodayMonthButton"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "highlightWeekends": { "alias": "highlightWeekends"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "minYear": { "alias": "minYear"; "required": false; "isSignal": true; }; "maxYear": { "alias": "maxYear"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+type CoarPlainDatePickerSize = CoarDatePickerSize;
+/**
+ * Date picker component with scrollable calendar.
+ *
+ * Returns strongly-typed `Temporal.PlainDate` values (timezone-independent, date only).
+ *
+ * Features:
+ * - Two-column layout: scrollable calendar on left, month list on right
+ * - No time selection (use `coar-plain-date-time-picker` if time is needed)
+ * - CSS-based virtualization for smooth scrolling through months
+ *
+ * @example
+ * ```html
+ * <coar-plain-date-picker
+ *   [(value)]="birthDate"
+ *   label="Date of Birth"
+ * />
+ * ```
+ */
+declare class CoarPlainDatePickerComponent extends CoarDatePickerBase<Temporal.PlainDate> {
+    /** Maskito instance for input masking */
+    private maskitoInstance?;
+    /** Minimum selectable date */
+    min: _angular_core.InputSignal<Temporal.PlainDate | null>;
+    /** Maximum selectable date */
+    max: _angular_core.InputSignal<Temporal.PlainDate | null>;
+    /** Whether to close the panel after selecting a date (default: false to allow viewing events) */
+    closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Current selected value (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<Temporal.PlainDate | null>;
+    /** Emitted when the selected value changes */
+    valueChange: _angular_core.OutputEmitterRef<Temporal.PlainDate | null>;
+    /** Unique ID counter for component instances */
+    private static nextId;
+    /** Unique ID for this component instance */
+    protected readonly uid: string;
+    /** Reference to the input element */
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Get placeholder text based on date format */
+    protected inputPlaceholder: _angular_core.Signal<string>;
+    /** Resolved active month (uses value's month or today) */
+    protected resolvedActiveMonth: _angular_core.Signal<Temporal.PlainYearMonth>;
+    protected getValue(): Temporal.PlainDate | null;
+    protected getSelectedPlainDate(): Temporal.PlainDate | null;
+    protected estimatePanelHeight(): number;
+    protected resetValue(): void;
+    constructor();
+    /** Handle date selection from calendar */
+    protected onDateSelected(date: Temporal.PlainDate): void;
+    writeValue(value: Temporal.PlainDate | string | null): void;
+    protected onInputChange(event: Event): void;
+    protected onInputBlur(): void;
+    private initializeMaskito;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPlainDatePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPlainDatePickerComponent, "coar-plain-date-picker", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Time formatting and parsing utilities.
+ *
+ * Provides locale-aware time formatting with 12h/24h detection,
+ * time parsing, and hour/minute manipulation with wrap-around support.
+ */
+/**
+ * AM/PM period indicator.
+ */
+type CoarTimePeriod = 'AM' | 'PM';
+/**
+ * Parsed time value with hours (0-23) and minutes (0-59).
+ */
+interface CoarTimeValue {
+    readonly hours: number;
+    readonly minutes: number;
+}
+/**
+ * Detects whether the given locale uses 12-hour time format.
+ *
+ * Uses Intl.DateTimeFormat to check if the locale's default time format
+ * includes a dayPeriod (AM/PM indicator).
+ *
+ * @param locale - BCP 47 locale identifier (e.g., 'en-US', 'de-AT')
+ * @returns true if locale uses 12-hour format, false for 24-hour format
+ *
+ * @example
+ * ```ts
+ * coarDetect12HourFormat('en-US'); // true (US uses 12h)
+ * coarDetect12HourFormat('de-DE'); // false (Germany uses 24h)
+ * coarDetect12HourFormat('en-GB'); // false (UK uses 24h)
+ * ```
+ */
+declare function coarDetect12HourFormat(locale: string): boolean;
+/**
+ * Formats a time value as a string.
+ *
+ * @param hours - Hours (0-23)
+ * @param minutes - Minutes (0-59)
+ * @param use24Hour - true for 24h format ("14:30"), false for 12h format ("2:30 PM")
+ * @returns Formatted time string
+ *
+ * @example
+ * ```ts
+ * coarFormatTime(14, 30, true);  // "14:30"
+ * coarFormatTime(14, 30, false); // "2:30 PM"
+ * coarFormatTime(0, 5, true);    // "00:05"
+ * coarFormatTime(0, 5, false);   // "12:05 AM"
+ * ```
+ */
+declare function coarFormatTime(hours: number, minutes: number, use24Hour: boolean): string;
+/**
+ * Parses a time string into hours and minutes.
+ *
+ * Supports both 24-hour and 12-hour formats:
+ * - 24h: "14:30", "08:00", "23:59"
+ * - 12h: "2:30 PM", "12:00 AM", "11:59 pm"
+ *
+ * @param text - Time string to parse
+ * @returns Parsed time value or null if invalid
+ *
+ * @example
+ * ```ts
+ * coarParseTimeInput("14:30");     // { hours: 14, minutes: 30 }
+ * coarParseTimeInput("2:30 PM");   // { hours: 14, minutes: 30 }
+ * coarParseTimeInput("12:00 AM");  // { hours: 0, minutes: 0 }
+ * coarParseTimeInput("invalid");   // null
+ * ```
+ */
+declare function coarParseTimeInput(text: string): CoarTimeValue | null;
+/**
+ * Converts 24-hour format hours to 12-hour format.
+ *
+ * @param hours24 - Hours in 24-hour format (0-23)
+ * @returns Object with 12-hour hours (1-12) and period (AM/PM)
+ *
+ * @example
+ * ```ts
+ * coarConvertTo12Hour(0);  // { hours: 12, period: 'AM' }
+ * coarConvertTo12Hour(12); // { hours: 12, period: 'PM' }
+ * coarConvertTo12Hour(14); // { hours: 2, period: 'PM' }
+ * coarConvertTo12Hour(23); // { hours: 11, period: 'PM' }
+ * ```
+ */
+declare function coarConvertTo12Hour(hours24: number): {
+    hours: number;
+    period: CoarTimePeriod;
+};
+/**
+ * Converts 12-hour format to 24-hour format.
+ *
+ * @param hours12 - Hours in 12-hour format (1-12)
+ * @param period - AM or PM
+ * @returns Hours in 24-hour format (0-23)
+ *
+ * @example
+ * ```ts
+ * coarConvertTo24Hour(12, 'AM'); // 0
+ * coarConvertTo24Hour(12, 'PM'); // 12
+ * coarConvertTo24Hour(2, 'PM');  // 14
+ * coarConvertTo24Hour(11, 'PM'); // 23
+ * ```
+ */
+declare function coarConvertTo24Hour(hours12: number, period: CoarTimePeriod): number;
+/**
+ * Increments hours with wrap-around.
+ *
+ * @param hours - Current hours (0-23)
+ * @param delta - Amount to change (positive or negative)
+ * @returns New hours value (0-23), wrapped around
+ *
+ * @example
+ * ```ts
+ * coarIncrementHours(23, 1);  // 0 (wraps from 23 to 0)
+ * coarIncrementHours(0, -1);  // 23 (wraps from 0 to 23)
+ * coarIncrementHours(14, 2);  // 16
+ * ```
+ */
+declare function coarIncrementHours(hours: number, delta: number): number;
+/**
+ * Increments minutes with wrap-around and optional hour carry.
+ *
+ * @param minutes - Current minutes (0-59)
+ * @param delta - Amount to change (positive or negative)
+ * @param step - Minute step interval (default: 1)
+ * @returns Object with new minutes and hour delta (for carry-over)
+ *
+ * @example
+ * ```ts
+ * coarIncrementMinutes(55, 5);      // { minutes: 0, hourDelta: 1 }
+ * coarIncrementMinutes(0, -5);       // { minutes: 55, hourDelta: -1 }
+ * coarIncrementMinutes(30, 15, 15);  // { minutes: 45, hourDelta: 0 }
+ * ```
+ */
+declare function coarIncrementMinutes(minutes: number, delta: number, step?: number): {
+    minutes: number;
+    hourDelta: number;
+};
+/**
+ * Rounds minutes to the nearest step.
+ *
+ * @param minutes - Current minutes (0-59)
+ * @param step - Minute step interval
+ * @returns Rounded minutes value
+ *
+ * @example
+ * ```ts
+ * coarRoundMinutesToStep(7, 5);   // 5
+ * coarRoundMinutesToStep(8, 5);   // 10
+ * coarRoundMinutesToStep(22, 15); // 15
+ * coarRoundMinutesToStep(23, 15); // 30
+ * ```
+ */
+declare function coarRoundMinutesToStep(minutes: number, step: number): number;
+/**
+ * Gets valid minute values for a given step.
+ *
+ * @param step - Minute step interval (1, 5, 10, or 15)
+ * @returns Array of valid minute values
+ *
+ * @example
+ * ```ts
+ * coarGetValidMinutes(15); // [0, 15, 30, 45]
+ * coarGetValidMinutes(5);  // [0, 5, 10, 15, ..., 55]
+ * coarGetValidMinutes(1);  // [0, 1, 2, ..., 59]
+ * ```
+ */
+declare function coarGetValidMinutes(step: 1 | 5 | 10 | 15): number[];
+
+type CoarPlainDateTimePickerSize = CoarDatePickerSize;
+/**
+ * Date-time picker component with scrollable calendar and time selection.
+ *
+ * Returns strongly-typed `Temporal.PlainDateTime` values (timezone-independent).
+ *
+ * Features:
+ * - Two-column layout: scrollable calendar on left, month list + time picker on right
+ * - Locale-aware time format (12h/24h auto-detection)
+ * - CSS-based virtualization for smooth scrolling through months
+ * - Min/max datetime constraints with time clamping
+ *
+ * @example
+ * ```html
+ * <coar-plain-date-time-picker
+ *   [(value)]="appointmentDateTime"
+ *   label="Appointment"
+ *   [minuteStep]="15"
+ * />
+ * ```
+ */
+declare class CoarPlainDateTimePickerComponent extends CoarDatePickerBase<Temporal.PlainDateTime> {
+    /** Maskito instance for input masking */
+    private maskitoInstance?;
+    /** Minimum selectable datetime */
+    min: _angular_core.InputSignal<Temporal.PlainDateTime | null>;
+    /** Maximum selectable datetime */
+    max: _angular_core.InputSignal<Temporal.PlainDateTime | null>;
+    /**
+     * Whether to use 24-hour time format.
+     * - true: Always use 24h format
+     * - false: Always use 12h format with AM/PM
+     * - 'auto': Detect from locale (default)
+     */
+    use24Hour: _angular_core.InputSignal<boolean | "auto">;
+    /** Step interval for minute selection (1, 5, 10, or 15) */
+    minuteStep: _angular_core.InputSignal<1 | 10 | 15 | 5>;
+    /**
+     * Default time to use when selecting a date without existing time.
+     */
+    defaultTime: _angular_core.InputSignal<CoarTimeValue>;
+    /** Current selected value (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<Temporal.PlainDateTime | null>;
+    /** Emitted when the selected value changes */
+    valueChange: _angular_core.OutputEmitterRef<Temporal.PlainDateTime | null>;
+    /** Unique ID counter for component instances */
+    private static nextId;
+    /** Unique ID for this component instance */
+    protected readonly uid: string;
+    /** Reference to the input element */
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Pending time value (stored until a date is selected) */
+    protected pendingTime: _angular_core.WritableSignal<CoarTimeValue | null>;
+    /** Get placeholder text based on date and time format */
+    protected inputPlaceholder: _angular_core.Signal<string>;
+    /** Whether to use 24-hour time format */
+    protected effectiveUse24Hour: _angular_core.Signal<boolean>;
+    /** Extract date portion from value */
+    protected selectedDate: _angular_core.Signal<Temporal.PlainDate | null>;
+    /** Extract time portion from value */
+    protected selectedTime: _angular_core.Signal<CoarTimeValue | null>;
+    /** Min date for calendar constraints */
+    protected minDate: _angular_core.Signal<Temporal.PlainDate | null>;
+    /** Max date for calendar constraints */
+    protected maxDate: _angular_core.Signal<Temporal.PlainDate | null>;
+    /**
+     * Effective minimum time constraint for the time picker.
+     * Only applies when the selected date equals the minimum date boundary.
+     */
+    protected effectiveMinTime: _angular_core.Signal<CoarTimeValue | null>;
+    /**
+     * Effective maximum time constraint for the time picker.
+     * Only applies when the selected date equals the maximum date boundary.
+     */
+    protected effectiveMaxTime: _angular_core.Signal<CoarTimeValue | null>;
+    /** Resolved active month (uses value's month or today) */
+    protected resolvedActiveMonth: _angular_core.Signal<Temporal.PlainYearMonth>;
+    protected getValue(): Temporal.PlainDateTime | null;
+    protected getSelectedPlainDate(): Temporal.PlainDate | null;
+    protected estimatePanelHeight(): number;
+    protected resetValue(): void;
+    constructor();
+    /** Handle date selection from calendar */
+    protected onDateSelected(date: Temporal.PlainDate): void;
+    /** Handle time changes from time picker */
+    protected onTimeChanged(time: CoarTimeValue | null): void;
+    /**
+     * Clamps a PlainDateTime to be within the min/max range.
+     * Returns the original value if it's within range, otherwise returns the nearest boundary.
+     */
+    private clampDateTimeToRange;
+    writeValue(value: Temporal.PlainDateTime | string | null): void;
+    protected onInputChange(event: Event): void;
+    protected onInputBlur(): void;
+    private formatValue;
+    private parseValueFromInput;
+    private initializeMaskito;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPlainDateTimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPlainDateTimePickerComponent, "coar-plain-date-time-picker", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "use24Hour": { "alias": "use24Hour"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "defaultTime": { "alias": "defaultTime"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+type CoarZonedDateTimePickerSize = CoarDatePickerSize;
+/**
+ * A timezone item for display in the picker list.
+ */
+interface TimezoneItem {
+    /** Full IANA ID (e.g., 'Europe/Vienna') */
+    id: string;
+    /** City name for display (e.g., 'Vienna') */
+    city: string;
+    /** UTC offset for display (e.g., 'UTC+1') */
+    offset: string;
+}
+/**
+ * A group of timezones by continent/region.
+ */
+interface TimezoneGroup {
+    /** Group name (e.g., 'Europe', 'America') */
+    name: string;
+    /** Timezones in this group */
+    items: TimezoneItem[];
+}
+/**
+ * Zoned date-time picker component with full timezone support.
+ *
+ * Returns strongly-typed `Temporal.ZonedDateTime` values that include:
+ * - The local date and time (user's intent)
+ * - The IANA timezone (context)
+ * - The instant (derived UTC moment)
+ *
+ * Key concepts:
+ * - **Value timezone**: Where the event "lives" - persisted with the value
+ * - **Display timezone**: User's viewing lens (from CoarTimeZoneService)
+ *
+ * This picker captures complete user intent, allowing you to:
+ * - Store the local time + timezone as source of truth
+ * - Derive the UTC instant for queries and ordering
+ * - Recalculate instants if DST rules change
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <coar-zoned-date-time-picker
+ *   [(value)]="meetingDateTime"
+ *   label="Meeting Time"
+ * />
+ *
+ * <!-- With explicit timezone -->
+ * <coar-zoned-date-time-picker
+ *   [(value)]="meetingDateTime"
+ *   [timeZone]="'Europe/Vienna'"
+ *   label="Meeting Time"
+ * />
+ * ```
+ */
+declare class CoarZonedDateTimePickerComponent extends CoarDatePickerBase<Temporal.ZonedDateTime> {
+    /** Maskito instance for input masking */
+    private maskitoInstance?;
+    /**
+     * The timezone for the value.
+     *
+     * This represents where the event "lives" - it's persisted with the value.
+     * If not provided, uses the timezone from CoarTimeZoneService.
+     *
+     * Examples: 'Europe/Vienna', 'America/New_York', 'UTC'
+     */
+    timeZone: _angular_core.InputSignal<string | null>;
+    /** Minimum selectable datetime (in the value's timezone) */
+    min: _angular_core.InputSignal<Temporal.ZonedDateTime | null>;
+    /** Maximum selectable datetime (in the value's timezone) */
+    max: _angular_core.InputSignal<Temporal.ZonedDateTime | null>;
+    /**
+     * Whether to use 24-hour time format.
+     * - true: Always use 24h format
+     * - false: Always use 12h format with AM/PM
+     * - 'auto': Detect from locale (default)
+     */
+    use24Hour: _angular_core.InputSignal<boolean | "auto">;
+    /** Step interval for minute selection (1, 5, 10, or 15) */
+    minuteStep: _angular_core.InputSignal<1 | 10 | 15 | 5>;
+    /**
+     * Default time to use when selecting a date without existing time.
+     */
+    defaultTime: _angular_core.InputSignal<CoarTimeValue>;
+    /**
+     * Filter patterns for available timezone options.
+     *
+     * Supports wildcards:
+     * - `*` matches any characters
+     * - Patterns are case-insensitive
+     *
+     * If not provided or empty, all IANA timezones are available.
+     *
+     * @example
+     * // Only European timezones
+     * [timezoneFilter]="['Europe/*']"
+     *
+     * // European + specific US cities
+     * [timezoneFilter]="['Europe/*', 'America/New_York', 'America/Los_Angeles']"
+     *
+     * // Anything containing 'New'
+     * [timezoneFilter]="['*New*']"
+     */
+    timezoneFilter: _angular_core.InputSignal<string[]>;
+    /** Current selected value (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<Temporal.ZonedDateTime | null>;
+    /** Emitted when the selected value changes */
+    valueChange: _angular_core.OutputEmitterRef<Temporal.ZonedDateTime | null>;
+    /** Unique ID counter for component instances */
+    private static nextId;
+    /** Unique ID for this component instance */
+    protected readonly uid: string;
+    /** Reference to the input element */
+    protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Reference to the timezone search input */
+    protected tzSearchInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Reference to the timezone list container */
+    protected tzListRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** Pending time value (stored until a date is selected) */
+    protected pendingTime: _angular_core.WritableSignal<CoarTimeValue | null>;
+    /**
+     * Display timezone - the user's viewing lens.
+     * This can be freely changed without affecting the stored value.
+     * Defaults to the user's timezone from CoarTimeZoneService.
+     */
+    protected displayTimeZone: _angular_core.WritableSignal<string | null>;
+    /**
+     * Whether the value timezone is being edited (unlocked inline select mode).
+     */
+    protected isEditingValueTimeZone: _angular_core.WritableSignal<boolean>;
+    /**
+     * Whether the side column is showing the timezone picker instead of normal content.
+     */
+    protected isSelectingDisplayTimezone: _angular_core.WritableSignal<boolean>;
+    /**
+     * Search query for timezone filtering in the inline timezone picker.
+     */
+    protected timezoneSearchQuery: _angular_core.WritableSignal<string>;
+    /**
+     * The value's timezone (where the event "lives").
+     * This is the intent timezone - stored with the value.
+     */
+    protected valueTimeZone: _angular_core.Signal<string | null>;
+    /**
+     * Effective display timezone for viewing.
+     * Priority: explicit display selection > service timezone > UTC fallback
+     */
+    protected effectiveDisplayTimeZone: _angular_core.Signal<string>;
+    /**
+     * The current working timezone for the picker UI.
+     * When creating new values, this determines the timezone used.
+     * When editing, this is the display timezone (value TZ is preserved).
+     */
+    protected currentWorkingTimeZone: _angular_core.Signal<string>;
+    /**
+     * The user's timezone from the service (or UTC fallback).
+     * This is the user's "home" timezone.
+     */
+    protected userTimeZone: _angular_core.Signal<string>;
+    /**
+     * Whether the location timezone differs from the user's timezone.
+     * Used to determine if toggle functionality should be available.
+     */
+    protected locationDiffersFromUser: _angular_core.Signal<boolean>;
+    /**
+     * Timezone indicator state for the icon.
+     * - 'home': Showing value in user's timezone
+     * - 'location': Showing value in event's location timezone
+     * - 'world': Showing value in a third timezone (neither user nor location)
+     */
+    protected timezoneIndicatorState: _angular_core.Signal<"home" | "location" | "world">;
+    /**
+     * Whether the display timezone differs from the value timezone.
+     * Used to show/hide the timezone indicator.
+     * @deprecated Use timezoneIndicatorState instead for icon logic
+     */
+    protected timeZonesDiffer: _angular_core.Signal<boolean>;
+    /**
+     * Short display name for the value timezone.
+     * Format: "Vienna (UTC+1)"
+     */
+    protected valueTimeZoneDisplayName: _angular_core.Signal<string>;
+    /**
+     * Short display name for the display timezone (user's home TZ).
+     * Format: "Vienna (UTC+1)"
+     */
+    protected displayTimeZoneDisplayName: _angular_core.Signal<string>;
+    /**
+     * Short display name for the currently shown timezone (based on toggle state).
+     * This reflects what the user is actually seeing in the input.
+     * Format: "Vienna (UTC+1)" or "New York (UTC-5)"
+     */
+    protected currentTimeZoneDisplayName: _angular_core.Signal<string>;
+    /**
+     * Short abbreviation for the display timezone badge.
+     * Shows just the city name or a short form (max ~6 chars).
+     * E.g., 'Europe/Vienna' → 'VIE', 'America/New_York' → 'NYC'
+     */
+    protected displayTimeZoneAbbreviation: _angular_core.Signal<string>;
+    /**
+     * UTC offset string for the value timezone.
+     */
+    protected valueTimeZoneOffset: _angular_core.Signal<string>;
+    /**
+     * UTC offset string for the display timezone.
+     */
+    protected displayTimeZoneOffset: _angular_core.Signal<string>;
+    /**
+     * The value formatted in the VALUE timezone (intent).
+     * Always shows what the time means in the original context.
+     */
+    protected valueInValueTimeZone: _angular_core.Signal<string>;
+    /**
+     * The value formatted in the DISPLAY timezone (user's view).
+     */
+    protected valueInDisplayTimeZone: _angular_core.Signal<string>;
+    /**
+     * The currently displayed value based on which timezone view is active.
+     */
+    protected currentDisplayedValue: _angular_core.Signal<string>;
+    /**
+     * Computed info for timezone display in trigger tooltip and panel.
+     * Returns both display and value timezone info.
+     */
+    protected popoverTimeZoneInfo: _angular_core.Signal<{
+        displayTzName: string;
+        displayTzOffset: string;
+        valueTzName: string;
+        valueTzOffset: string;
+    }>;
+    /** All IANA timezones from the browser */
+    private readonly allTimezones;
+    /**
+     * Filtered timezone options for the select dropdowns.
+     * If timezoneFilter is empty, all timezones are available.
+     * Supports wildcards: 'Europe/*', '*New*', etc.
+     */
+    protected readonly timezoneOptions: _angular_core.Signal<CoarSelectOption<string>[]>;
+    /**
+     * Grouped timezone list for the inline timezone picker.
+     * Groups by continent with sticky headers.
+     */
+    protected readonly groupedTimezoneList: _angular_core.Signal<TimezoneGroup[]>;
+    /**
+     * Extract the city name from a timezone ID.
+     * E.g., 'Europe/Vienna' → 'Vienna', 'America/Argentina/Buenos_Aires' → 'Buenos Aires'
+     */
+    private extractCityName;
+    /**
+     * Get a short abbreviation for a timezone (for the badge).
+     * Uses common abbreviations for well-known cities, otherwise extracts from city name.
+     */
+    private getTimezoneAbbreviation;
+    /**
+     * Format a timezone ID to a short display format.
+     * E.g., 'Europe/Vienna' → 'Vienna (UTC+1)'
+     */
+    protected formatTimezoneShort(tz: string): string;
+    /**
+     * Get a compact UTC offset string for a timezone.
+     * E.g., '+1', '-5', '+5:30'
+     */
+    private getOffsetForTimeZoneCompact;
+    /** Get placeholder text based on date and time format */
+    protected inputPlaceholder: _angular_core.Signal<string>;
+    /** Whether to use 24-hour time format */
+    protected effectiveUse24Hour: _angular_core.Signal<boolean>;
+    /** Extract date portion from value */
+    /**
+     * The value converted to the current working (display) timezone.
+     * Used to extract date/time for the calendar and time picker.
+     */
+    protected valueInWorkingTimeZone: _angular_core.Signal<Temporal.ZonedDateTime | null>;
+    /** Extract date portion from value in working timezone */
+    protected selectedDate: _angular_core.Signal<Temporal.PlainDate | null>;
+    /** Extract time portion from value in working timezone */
+    protected selectedTime: _angular_core.Signal<CoarTimeValue | null>;
+    /** Min date for calendar constraints */
+    protected minDate: _angular_core.Signal<Temporal.PlainDate | null>;
+    /** Max date for calendar constraints */
+    protected maxDate: _angular_core.Signal<Temporal.PlainDate | null>;
+    /**
+     * Effective minimum time constraint for the time picker.
+     * Only applies when the selected date equals the minimum date boundary.
+     */
+    protected effectiveMinTime: _angular_core.Signal<CoarTimeValue | null>;
+    /**
+     * Effective maximum time constraint for the time picker.
+     * Only applies when the selected date equals the maximum date boundary.
+     */
+    protected effectiveMaxTime: _angular_core.Signal<CoarTimeValue | null>;
+    /** Resolved active month (uses value's month or today) */
+    protected resolvedActiveMonth: _angular_core.Signal<Temporal.PlainYearMonth>;
+    /**
+     * The derived instant (UTC) from the current value.
+     * Null if no value is selected.
+     */
+    protected derivedInstant: _angular_core.Signal<Temporal.Instant | null>;
+    protected getValue(): Temporal.ZonedDateTime | null;
+    protected getSelectedPlainDate(): Temporal.PlainDate | null;
+    protected estimatePanelHeight(): number;
+    protected resetValue(): void;
+    protected onPanelClosed(): void;
+    constructor();
+    /**
+     * Handle date selection from calendar.
+     * The date/time is edited in the current working timezone,
+     * but the value timezone is preserved (unless explicitly changed).
+     */
+    protected onDateSelected(date: Temporal.PlainDate): void;
+    /**
+     * Handle time changes from time picker.
+     * Preserves the value timezone (intent).
+     */
+    protected onTimeChanged(time: CoarTimeValue | null): void;
+    /**
+     * Handle display timezone change (viewing lens).
+     * This does NOT change the value - only how it's displayed.
+     */
+    protected onDisplayTimeZoneChanged(newTimeZone: string | null): void;
+    /**
+     * Start the inline timezone picker (replaces side column content).
+     */
+    protected startSelectingDisplayTimezone(): void;
+    /**
+     * Scroll the timezone list to show the currently active timezone.
+     */
+    private scrollToActiveTimezone;
+    /**
+     * Cancel the inline timezone picker.
+     */
+    protected cancelSelectingDisplayTimezone(): void;
+    /**
+     * Close the timezone picker when clicking outside of it (e.g., on the calendar).
+     */
+    protected closeTimezonePickerOnOutsideClick(): void;
+    /**
+     * Select a timezone from the inline timezone picker.
+     */
+    protected selectDisplayTimezone(tz: string): void;
+    /**
+     * Handle search input change in the inline timezone picker.
+     */
+    protected onTimezoneSearchChange(event: Event): void;
+    /**
+     * Toggle between showing value in user timezone vs location timezone.
+     * Used by the indicator icon in the trigger.
+     *
+     * Behavior:
+     * - home (user TZ) → switch to location TZ
+     * - location (event TZ) → switch to user TZ
+     * - world (other TZ) → switch to user TZ
+     */
+    protected toggleTimeZoneView(): void;
+    /**
+     * Start editing the value timezone.
+     */
+    protected startEditingValueTimeZone(): void;
+    /**
+     * Cancel editing the value timezone.
+     */
+    protected cancelEditingValueTimeZone(): void;
+    /**
+     * Change the value timezone (intent).
+     * This is an EXPLICIT action - the value's local time stays the same,
+     * but it's now interpreted in a different timezone.
+     */
+    protected onValueTimeZoneChanged(newTimeZone: string | null): void;
+    /**
+     * Clamps a ZonedDateTime to be within the min/max range.
+     */
+    private clampZonedDateTimeToRange;
+    writeValue(value: Temporal.ZonedDateTime | string | null): void;
+    protected onInputChange(event: Event): void;
+    protected onInputBlur(): void;
+    private formatValue;
+    private parseValueFromInput;
+    private initializeMaskito;
+    /**
+     * Get UTC offset string for a given timezone.
+     */
+    private getOffsetForTimeZone;
+    /**
+     * Format a ZonedDateTime for display.
+     */
+    private formatZonedDateTime;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarZonedDateTimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarZonedDateTimePickerComponent, "coar-zoned-date-time-picker", never, { "timeZone": { "alias": "timeZone"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "use24Hour": { "alias": "use24Hour"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "defaultTime": { "alias": "defaultTime"; "required": false; "isSignal": true; }; "timezoneFilter": { "alias": "timezoneFilter"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+type CoarTimePickerSize = 'xs' | 's' | 'm' | 'l';
+/**
+ * Time picker component with hours, minutes, and optional AM/PM selection.
+ *
+ * Supports both 12-hour and 24-hour formats, with locale-aware auto-detection.
+ * Values wrap around at boundaries (23→00, 59→00 with hour increment).
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with auto 12h/24h detection -->
+ * <coar-time-picker [(value)]="selectedTime" />
+ *
+ * <!-- Force 24-hour format with 15-minute steps -->
+ * <coar-time-picker
+ *   [(value)]="selectedTime"
+ *   [use24Hour]="true"
+ *   [minuteStep]="15"
+ * />
+ * ```
+ */
+declare class CoarTimePickerComponent extends CoarControlValueAccessor<CoarTimeValue | null> {
+    private readonly localizationService;
+    /** Current language from localization service (reactive) */
+    private readonly currentLanguage;
+    /** Size variant */
+    size: _angular_core.InputSignal<CoarTimePickerSize>;
+    /** Whether the picker is readonly */
+    readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the picker is disabled */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to use 24-hour format.
+     * - true: Always use 24h format (00-23)
+     * - false: Always use 12h format with AM/PM
+     * - 'auto': Detect from locale (default)
+     */
+    use24Hour: _angular_core.InputSignal<boolean | "auto">;
+    /**
+     * Step interval for minute selection.
+     * Minutes will snap to multiples of this value.
+     */
+    minuteStep: _angular_core.InputSignal<1 | 10 | 15 | 5>;
+    /**
+     * Locale identifier for 12h/24h format detection.
+     * Uses global locale service default if not specified.
+     */
+    locale: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Label for screen readers (visually hidden).
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Minimum allowed time (hours and minutes in 24h format).
+     * Used to constrain time selection when on a min date boundary.
+     */
+    minTime: _angular_core.InputSignal<CoarTimeValue | null>;
+    /**
+     * Maximum allowed time (hours and minutes in 24h format).
+     * Used to constrain time selection when on a max date boundary.
+     */
+    maxTime: _angular_core.InputSignal<CoarTimeValue | null>;
+    /** Current time value (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<CoarTimeValue | null>;
+    /** Internal hours value (0-23) */
+    protected hours: _angular_core.WritableSignal<number>;
+    /** Internal minutes value (0-59) */
+    protected minutes: _angular_core.WritableSignal<number>;
+    /** AM/PM period for 12-hour mode */
+    protected period: _angular_core.WritableSignal<CoarTimePeriod>;
+    /** Effective locale for 12h/24h detection */
+    protected effectiveLocale: _angular_core.Signal<string>;
+    /** Whether to display in 12-hour format */
+    protected is12HourFormat: _angular_core.Signal<boolean>;
+    /** Display hours value (1-12 for 12h mode, 0-23 for 24h mode) */
+    protected displayHours: _angular_core.Signal<number>;
+    /** Display minutes (always 0-59, padded) */
+    protected displayMinutes: _angular_core.Signal<number>;
+    /** Minimum hours value for display */
+    protected minHours: _angular_core.Signal<1 | 0>;
+    /** Maximum hours value for display */
+    protected maxHours: _angular_core.Signal<12 | 23>;
+    /** Whether the picker is disabled (input or CVA) */
+    protected isDisabled: _angular_core.Signal<boolean>;
+    /** Convert time to total minutes for comparison */
+    private timeToMinutes;
+    /** Whether increment hours button is disabled (would exceed max) */
+    protected isIncrementHoursDisabled: _angular_core.Signal<boolean>;
+    /** Whether decrement hours button is disabled (would go below min) */
+    protected isDecrementHoursDisabled: _angular_core.Signal<boolean>;
+    /** Whether increment minutes button is disabled */
+    protected isIncrementMinutesDisabled: _angular_core.Signal<boolean>;
+    /** Whether decrement minutes button is disabled */
+    protected isDecrementMinutesDisabled: _angular_core.Signal<boolean>;
+    /** Whether AM period is disabled (min time is in PM) */
+    protected isAmDisabled: _angular_core.Signal<boolean>;
+    /** Whether PM period is disabled (max time is before noon) */
+    protected isPmDisabled: _angular_core.Signal<boolean>;
+    constructor();
+    /** Increment hours by 1 */
+    incrementHours(): void;
+    /** Decrement hours by 1 */
+    decrementHours(): void;
+    /** Increment minutes by step */
+    incrementMinutes(): void;
+    /** Decrement minutes by step */
+    decrementMinutes(): void;
+    /** Toggle between AM and PM */
+    togglePeriod(): void;
+    /** Set specific period (AM or PM) */
+    setPeriod(period: CoarTimePeriod): void;
+    /** Handle keyboard events on hours spinner */
+    onHoursKeydown(event: KeyboardEvent): void;
+    /** Handle keyboard events on minutes spinner */
+    onMinutesKeydown(event: KeyboardEvent): void;
+    /** Handle keyboard events on period selector */
+    onPeriodKeydown(event: KeyboardEvent): void;
+    writeValue(value: CoarTimeValue | null): void;
+    /** Emit the current value */
+    private emitValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTimePickerComponent, "coar-time-picker", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "use24Hour": { "alias": "use24Hour"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Represents a single month view in the scrollable calendar.
+ */
+interface CoarCalendarMonth {
+    readonly yearMonth: Temporal.PlainYearMonth;
+    readonly monthName: string;
+    readonly year: number;
+    readonly days: CoarCalendarDay[];
+    readonly weekNumbers: number[];
+}
+/**
+ * Represents a single day cell in the calendar.
+ */
+interface CoarCalendarDay {
+    readonly date: Temporal.PlainDate;
+    readonly day: number;
+    readonly isOutsideMonth: boolean;
+    readonly isToday: boolean;
+    readonly isSelected: boolean;
+    readonly isFocused: boolean;
+    readonly isDisabled: boolean;
+    readonly isWeekend: boolean;
+    readonly markers: CoarDateMarker[];
+    readonly markerCssClass: string;
+    readonly markerTooltip: string | null;
+}
+/**
+ * Scrollable calendar component displaying multiple months vertically.
+ *
+ * Uses CSS `content-visibility: auto` for virtualization to optimize performance
+ * when displaying many months. The calendar scrolls vertically and syncs with
+ * an external month list for navigation.
+ *
+ * @example
+ * ```html
+ * <coar-scrollable-calendar
+ *   [(value)]="selectedDate"
+ *   [(activeMonth)]="visibleMonth"
+ *   [min]="minDate"
+ *   [max]="maxDate"
+ * />
+ * ```
+ */
+declare class CoarScrollableCalendarComponent {
+    private readonly localizationService;
+    private readonly localizationDataStore;
+    private readonly timeZoneService;
+    private readonly ngZone;
+    private readonly destroyRef;
+    /** Current language from localization service (reactive) */
+    private readonly currentLanguage;
+    /** Reference to the scroll container */
+    protected scrollContainerRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** Reference to the scrollbar directive */
+    protected scrollbarDirective: _angular_core.Signal<CoarScrollbarDirective | undefined>;
+    /** Current selected date (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<Temporal.PlainDate | null>;
+    /** Currently visible/active month (two-way bindable, syncs with scroll position) */
+    activeMonth: _angular_core.ModelSignal<Temporal.PlainYearMonth>;
+    /** Minimum selectable date */
+    min: _angular_core.InputSignal<Temporal.PlainDate | null>;
+    /** Maximum selectable date */
+    max: _angular_core.InputSignal<Temporal.PlainDate | null>;
+    /**
+     * Locale identifier for date formatting (e.g., 'de-AT', 'en-US').
+     * Uses global locale service default if not specified.
+     */
+    locale: _angular_core.InputSignal<string | undefined>;
+    /** Date format configuration (pattern and first day of week) */
+    dateFormatConfig: _angular_core.InputSignal<DateFormatConfig | undefined>;
+    /** Whether to show week numbers */
+    showWeekNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to highlight weekend days (Saturday/Sunday) with a subtle background */
+    highlightWeekends: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Date markers for highlighting special dates (holidays, events, etc.) */
+    markers: _angular_core.InputSignal<CoarDateMarker[]>;
+    /**
+     * Number of months to display before and after the current year.
+     * Default: 12 months before, 12 months after (2 years total + current year).
+     * @deprecated Use infinite scroll instead - this input is kept for backwards compatibility
+     */
+    monthRange: _angular_core.InputSignal<{
+        before: number;
+        after: number;
+    }>;
+    /**
+     * Maximum number of months to keep in the DOM at once.
+     * Default: 25 (roughly 2 years). Lower values improve performance but may cause
+     * more frequent loading when scrolling quickly.
+     */
+    maxMonthsInDom: _angular_core.InputSignal<number>;
+    /**
+     * Number of months to load when reaching the edge of the current range.
+     * Default: 6 (half a year at a time).
+     */
+    monthsToLoad: _angular_core.InputSignal<number>;
+    /** Emitted when a date is clicked */
+    dateSelected: _angular_core.OutputEmitterRef<Temporal.PlainDate>;
+    /** Focused date for keyboard navigation */
+    protected readonly focusedDate: _angular_core.WritableSignal<Temporal.PlainDate | null>;
+    /**
+     * Today's date based on the configured timezone.
+     * Reactive: updates when timezone changes.
+     */
+    protected readonly today: _angular_core.Signal<Temporal.PlainDate>;
+    /** Flag to prevent scroll events while programmatically scrolling */
+    private isScrollingProgrammatically;
+    /** Flag to track when activeMonth is updated from scroll handler (prevents effect feedback loop) */
+    private isUpdatingFromScroll;
+    /** Flag to prevent multiple concurrent infinite scroll loads */
+    private isLoadingMonths;
+    /** Becomes true once the actual scroll viewport element is available (OverlayScrollbars initialized). */
+    private readonly scrollViewportReady;
+    /** Becomes true once the calendar is properly scrolled to the active month. Prevents visible flickering. */
+    protected readonly isScrollPositioned: _angular_core.WritableSignal<boolean>;
+    /** The earliest month currently in the DOM */
+    private earliestMonth;
+    /** The latest month currently in the DOM */
+    private latestMonth;
+    /** Signal-based months array for infinite scroll */
+    protected months: _angular_core.WritableSignal<CoarCalendarMonth[]>;
+    /**
+     * Minimum month boundary derived from min date input.
+     * Infinite scroll will not load months before this.
+     */
+    private minMonth;
+    /**
+     * Maximum month boundary derived from max date input.
+     * Infinite scroll will not load months after this.
+     */
+    private maxMonth;
+    /**
+     * Effective locale for calendar display.
+     * Priority: input locale > locale service language > browser locale
+     */
+    protected effectiveLocale: _angular_core.Signal<string>;
+    protected effectiveDateFormat: _angular_core.Signal<DateFormatConfig>;
+    protected firstDayOfWeek: _angular_core.Signal<1 | 7>;
+    protected daysOfWeek: _angular_core.Signal<string[]>;
+    /**
+     * Weekday headers with weekend flag for styling.
+     * Returns array of { name, isWeekend } for each day.
+     */
+    protected weekdayHeaders: _angular_core.Signal<{
+        name: string;
+        isWeekend: boolean;
+    }[]>;
+    /** Flag to track pending scroll after month loading */
+    private pendingScrollTarget;
+    /** Track previous marker/value/min/max/focusedDate/locale state to avoid unnecessary rebuilds */
+    private lastMarkersLength;
+    private lastValueString;
+    private lastHighlightWeekends;
+    private lastMinString;
+    private lastMaxString;
+    private lastFocusedDateString;
+    private lastLocale;
+    private readonly monthScrollTopInsetPx;
+    constructor();
+    /**
+     * Constrains the months array to respect min/max boundaries.
+     * Removes months outside the allowed range and updates boundary signals.
+     */
+    private constrainMonthsToRange;
+    /**
+     * Rebuilds all months to update day states (selected, markers, etc.)
+     */
+    private rebuildMonths;
+    /**
+     * Scrolls to a month, loading it first if necessary.
+     */
+    private scrollToMonthWithLoad;
+    /**
+     * Loads months to reach a target month that's outside the current range.
+     */
+    private loadMonthsToReach;
+    /**
+     * Sets up scroll listener on the OverlayScrollbars viewport element.
+     * Native scroll events don't fire on the original element when using OverlayScrollbars.
+     */
+    private setupScrollListener;
+    private getScrollViewportElement;
+    private ensureMonthAlignedInViewport;
+    private scrollMonthElementToTop;
+    /**
+     * Initializes the months array with an initial range around today.
+     * Respects min/max date constraints when setting boundaries.
+     */
+    private initializeMonths;
+    /**
+     * Checks if we need to load more months based on scroll position.
+     * Respects min/max constraints - won't load beyond boundaries.
+     */
+    private checkInfiniteScroll;
+    /**
+     * Loads earlier months and maintains scroll position.
+     * Respects min date constraint - won't load beyond minMonth.
+     */
+    private loadEarlierMonths;
+    /**
+     * Loads later months.
+     * Respects max date constraint - won't load beyond maxMonth.
+     */
+    private loadLaterMonths;
+    /**
+     * Loads earlier months synchronously (for targeted navigation).
+     * Does not maintain scroll position - caller handles scrolling.
+     * Respects min date constraint.
+     */
+    private loadEarlierMonthsSync;
+    /**
+     * Loads later months synchronously (for targeted navigation).
+     * Respects max date constraint.
+     */
+    private loadLaterMonthsSync;
+    /**
+     * Checks if there's a pending scroll target and scrolls to it if available.
+     */
+    private checkPendingScroll;
+    /**
+     * Trims months from the end of the array to stay within maxMonthsInDom.
+     */
+    private trimMonthsFromEnd;
+    /**
+     * Trims months from the beginning of the array to stay within maxMonthsInDom.
+     */
+    private trimMonthsFromBeginning;
+    /**
+     * Scrolls to a specific month in the calendar.
+     *
+     * @param yearMonth - The month to scroll to
+     * @param smooth - Whether to use smooth scrolling animation
+     */
+    scrollToMonth(yearMonth: Temporal.PlainYearMonth, smooth?: boolean): void;
+    /** Handle scroll events to update active month */
+    protected onScroll(): void;
+    /** Handle keyboard navigation */
+    protected onKeydown(event: KeyboardEvent): void;
+    /** Handle date selection */
+    protected selectDate(date: Temporal.PlainDate): void;
+    /**
+     * Moves keyboard focus by the given amount and unit.
+     * Clamps to min/max, auto-scrolls to keep the focused date visible.
+     */
+    private moveFocus;
+    /**
+     * Scrolls to ensure the focused date's month is visible, then focuses the button element.
+     */
+    private scrollToFocusedDate;
+    private focusDateButton;
+    private focusDateButtonAfterDelay;
+    /** Generate a unique element ID for a month */
+    protected getMonthElementId(yearMonth: Temporal.PlainYearMonth): string;
+    /** Check if a date is disabled (outside min/max range) */
+    protected isDateDisabled(date: Temporal.PlainDate): boolean;
+    /** Create a calendar month object */
+    private createCalendarMonth;
+    /** Create a calendar day object */
+    private createCalendarDay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarScrollableCalendarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarScrollableCalendarComponent, "coar-scrollable-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "activeMonth": { "alias": "activeMonth"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormatConfig": { "alias": "dateFormatConfig"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "highlightWeekends": { "alias": "highlightWeekends"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "monthRange": { "alias": "monthRange"; "required": false; "isSignal": true; }; "maxMonthsInDom": { "alias": "maxMonthsInDom"; "required": false; "isSignal": true; }; "monthsToLoad": { "alias": "monthsToLoad"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "activeMonth": "activeMonthChange"; "dateSelected": "dateSelected"; }, never, never, true, never>;
+}
+
+declare class CoarMiniCalendarComponent {
+    private readonly localizationService;
+    private readonly localizationDataStore;
+    private readonly timeZoneService;
+    /** Current language from localization service (reactive) */
+    private readonly currentLanguage;
+    /** Current selected date (two-way bindable with [(value)]) */
+    value: _angular_core.ModelSignal<Temporal.PlainDate | null>;
+    /** Minimum selectable date */
+    min: _angular_core.InputSignal<Temporal.PlainDate | null>;
+    /** Maximum selectable date */
+    max: _angular_core.InputSignal<Temporal.PlainDate | null>;
+    /**
+     * Locale identifier for date formatting (e.g., 'de-AT', 'en-US').
+     * Uses global locale service default if not specified.
+     */
+    locale: _angular_core.InputSignal<string | undefined>;
+    /** Date format configuration (pattern and first day of week) */
+    dateFormatConfig: _angular_core.InputSignal<DateFormatConfig | undefined>;
+    /** Whether to show a "Today" button */
+    showTodayButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to show week numbers */
+    showWeekNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to highlight weekend days (Saturday/Sunday) with a subtle background */
+    highlightWeekends: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Date markers for highlighting special dates (holidays, events, etc.) */
+    markers: _angular_core.InputSignal<CoarDateMarker[]>;
+    /** Maximum number of lines shown in the marker popover (including "+N" line). */
+    protected readonly markerPopoverMaxLines = 5;
+    /** Visible markers before switching to "+N other events". */
+    protected readonly markerPopoverVisibleMarkers = 4;
+    /**
+     * Today's date based on the configured timezone.
+     * Reactive: updates when timezone changes.
+     */
+    protected readonly today: _angular_core.Signal<Temporal.PlainDate>;
+    /** Currently viewed month/year in the calendar */
+    protected viewDate: _angular_core.WritableSignal<Temporal.PlainYearMonth>;
+    /** Focused date in the calendar (for keyboard navigation) */
+    protected focusedDate: _angular_core.WritableSignal<Temporal.PlainDate | null>;
+    /**
+     * Effective locale for calendar month/year display.
+     * Priority: input locale > locale service language > browser locale
+     */
+    protected effectiveLocale: _angular_core.Signal<string>;
+    protected effectiveDateFormat: _angular_core.Signal<DateFormatConfig>;
+    protected firstDayOfWeek: _angular_core.Signal<1 | 7>;
+    protected daysOfWeek: _angular_core.Signal<string[]>;
+    protected calendarDays: _angular_core.Signal<CalendarDay[]>;
+    protected viewMonth: _angular_core.Signal<string>;
+    protected viewYear: _angular_core.Signal<number>;
+    protected weekNumbers: _angular_core.Signal<number[]>;
+    constructor();
+    previousMonth(): void;
+    nextMonth(): void;
+    previousYear(): void;
+    nextYear(): void;
+    goToToday(): void;
+    selectDate(date: Temporal.PlainDate): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected getVisibleMarkers(markers: CoarDateMarker[]): CoarDateMarker[];
+    protected getHiddenMarkerCount(markers: CoarDateMarker[]): number;
+    private getMarkersForDate;
+    private isDateDisabled;
+    private moveFocus;
+    private createCalendarDay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarMiniCalendarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarMiniCalendarComponent, "coar-mini-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormatConfig": { "alias": "dateFormatConfig"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "highlightWeekends": { "alias": "highlightWeekends"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+interface CalendarDay {
+    date: Temporal.PlainDate;
+    day: number;
+    isOutsideMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isWeekend: boolean;
+    markers: CoarDateMarker[];
+    markerCssClass: string | null;
+}
+
+/**
+ * Month list component for date/time picker navigation.
+ *
+ * Displays a vertical list of month names with a year stepper at the top.
+ * The list height adapts to its container and becomes scrollable if all
+ * 12 months don't fit.
+ *
+ * @example
+ * ```html
+ * <coar-month-list
+ *   [(activeMonth)]="visibleMonth"
+ *   [minYear]="1920"
+ *   [maxYear]="2100"
+ *   (monthSelected)="onMonthSelected($event)"
+ * />
+ * ```
+ */
+declare class CoarMonthListComponent {
+    private readonly localizationService;
+    private readonly localizationDataStore;
+    /** Current language from localization service (reactive) */
+    private readonly currentLanguage;
+    /** Reference to the months container */
+    private monthsContainerRef;
+    /** Reference to the scrollbar directive for programmatic scrolling */
+    private scrollbarDirective;
+    /** Currently active/visible month (two-way bindable) */
+    activeMonth: _angular_core.ModelSignal<Temporal.PlainYearMonth>;
+    /**
+     * Locale identifier for month name formatting.
+     * Uses global locale service default if not specified.
+     */
+    locale: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Minimum year that can be selected.
+     * Default: current year - 100
+     */
+    minYear: _angular_core.InputSignal<number>;
+    /**
+     * Maximum year that can be selected.
+     * Default: current year + 50
+     */
+    maxYear: _angular_core.InputSignal<number>;
+    /** Emitted when a month is selected from the list */
+    monthSelected: _angular_core.OutputEmitterRef<Temporal.PlainYearMonth>;
+    /** Emitted when the year changes via stepper */
+    yearChanged: _angular_core.OutputEmitterRef<number>;
+    constructor();
+    /** Effective locale for month name formatting */
+    protected effectiveLocale: _angular_core.Signal<string>;
+    /** Current year from activeMonth */
+    protected currentYear: _angular_core.Signal<number>;
+    /** Current month number from activeMonth (1-12) */
+    protected currentMonthNumber: _angular_core.Signal<number>;
+    /** Whether previous year button is disabled */
+    protected isPrevYearDisabled: _angular_core.Signal<boolean>;
+    /** Whether next year button is disabled */
+    protected isNextYearDisabled: _angular_core.Signal<boolean>;
+    /** List of month items for display */
+    protected monthItems: _angular_core.Signal<{
+        month: number;
+        name: string;
+        isActive: boolean;
+        yearMonth: Temporal.PlainYearMonth;
+    }[]>;
+    /** Navigate to previous year */
+    previousYear(): void;
+    /** Navigate to next year */
+    nextYear(): void;
+    /** Select a specific month */
+    selectMonth(yearMonth: Temporal.PlainYearMonth): void;
+    /**
+     * Scrolls the month list to make the active month visible.
+     * Works with OverlayScrollbars by scrolling its viewport element directly.
+     */
+    private scrollToActiveMonth;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarMonthListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarMonthListComponent, "coar-month-list", never, { "activeMonth": { "alias": "activeMonth"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "minYear": { "alias": "minYear"; "required": false; "isSignal": true; }; "maxYear": { "alias": "maxYear"; "required": false; "isSignal": true; }; }, { "activeMonth": "activeMonthChange"; "monthSelected": "monthSelected"; "yearChanged": "yearChanged"; }, never, never, true, never>;
+}
+
+declare function coarDetectDateFormatPatternFromIntl(locale: string): DateFormatConfig['pattern'] | null;
+declare function coarGetDateSeparatorForPattern(pattern: DateFormatConfig['pattern']): '.' | '/' | '-';
+declare function coarGetLocalizedWeekdays(locale: string, firstDayOfWeek: 1 | 7): string[];
+declare function coarFormatPlainDate(date: Temporal.PlainDate, pattern: DateFormatConfig['pattern']): string;
+declare function coarParsePlainDateFromInput(text: string, pattern: DateFormatConfig['pattern'], constraints?: {
+    min?: Temporal.PlainDate | null;
+    max?: Temporal.PlainDate | null;
+}): Temporal.PlainDate | null;
+declare function coarTemporalPlainDateToDate(date: Temporal.PlainDate): Date;
+declare function coarCalculateIsoWeekNumber(date: Temporal.PlainDate): number;
+declare function coarClampPlainDate(date: Temporal.PlainDate, constraints?: {
+    min?: Temporal.PlainDate | null;
+    max?: Temporal.PlainDate | null;
+}): Temporal.PlainDate;
+interface CoarCalendarGridCell {
+    readonly date: Temporal.PlainDate;
+    readonly isOutsideMonth: boolean;
+}
+/**
+ * Returns a fixed 6x7 calendar grid (42 cells) for the given month.
+ * Includes leading/trailing days from adjacent months to fill the grid.
+ */
+declare function coarGetCalendarGridDates(viewMonth: Temporal.PlainYearMonth, firstDayOfWeek: 1 | 7): CoarCalendarGridCell[];
+
+/**
+ * Shared time formatting configuration.
+ *
+ * Note: This config is intentionally small so it can be used by multiple UI components
+ * (time picker, date-time picker, etc.) without pulling in Angular-only code.
+ */
+interface TimeFormatConfig {
+    /**
+     * Whether to use 24-hour format (true) or 12-hour format with AM/PM (false).
+     * When set to 'auto', the format is detected from the user's locale.
+     */
+    readonly use24Hour: boolean | 'auto';
+    /**
+     * Step interval for minute selection.
+     * For example, 5 means minutes can only be 0, 5, 10, 15, etc.
+     */
+    readonly minuteStep: 1 | 5 | 10 | 15;
+}
+/**
+ * Default time format configuration.
+ */
+declare const COAR_DEFAULT_TIME_FORMAT: TimeFormatConfig;
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';
+type ButtonSize = 'xs' | 's' | 'm' | 'l';
+declare class CoarButtonComponent {
+    /** Button visual variant */
+    variant: _angular_core.InputSignal<ButtonVariant>;
+    /** Button size */
+    size: _angular_core.InputSignal<ButtonSize>;
+    /** Whether the button is disabled */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the button is in loading state */
+    loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Button type attribute */
+    type: _angular_core.InputSignal<"button" | "reset" | "submit">;
+    /** Icon to display before the label */
+    iconStart: _angular_core.InputSignal<string | undefined>;
+    /** Icon to display after the label */
+    iconEnd: _angular_core.InputSignal<string | undefined>;
+    /** Whether the button should take full width */
+    fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Optional aria-label applied to the underlying <button> element */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Emitted when the button is clicked (not emitted when disabled or loading) */
+    clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Maps button size to appropriate icon size */
+    protected readonly iconSize: _angular_core.Signal<CoarIconSize>;
+    protected onClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarButtonComponent, "coar-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'auto';
+declare class CoarBadgeComponent {
+    /** Content to display in the badge (number, text, or icon) */
+    content: _angular_core.InputSignal<string | number>;
+    /** Badge visual variant */
+    variant: _angular_core.InputSignal<BadgeVariant>;
+    /** Badge size */
+    size: _angular_core.InputSignal<BadgeSize>;
+    /** Whether the badge should pulse/animate (for notifications) */
+    pulse: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to show as a dot without content */
+    dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Maximum number to display (shows "99+" if exceeded) */
+    max: _angular_core.InputSignal<number | null>;
+    /** Whether to show a border around the badge */
+    bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Computed display value */
+    protected displayValue: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarBadgeComponent, "coar-badge", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Tag semantic variants - mirrors CardVariant for visual consistency.
+ * Tags are the "little brother" of Cards with the same variant system.
+ */
+type TagVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+/**
+ * Tag size variants.
+ * - s: Compact tags for dense UIs (10px font)
+ * - m: Default size (12px font)
+ * - l: Larger tags for emphasis (14px font)
+ */
+type TagSize = 's' | 'm' | 'l';
+/**
+ * CoarTagComponent
+ *
+ * A compact label component for categorizing, labeling, or marking content.
+ * Shares the same variant system as CoarCard for visual consistency.
+ *
+ * Unlike badges (pill-shaped, for counts/notifications), tags use
+ * slight rounding and support interactive features like closing.
+ *
+ * @example
+ * ```html
+ * <coar-tag>Default</coar-tag>
+ * <coar-tag variant="success">Published</coar-tag>
+ * <coar-tag variant="warning" closable (closed)="onRemove()">Draft</coar-tag>
+ * ```
+ */
+declare class CoarTagComponent {
+    /**
+     * Adds a box-shadow for elevation/depth.
+     * Use as boolean attribute: `<coar-tag elevated>` or `[elevated]="true"`
+     */
+    elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Removes the border from the tag, leaving only background color.
+     * By default (false), tags have a visible border matching their variant.
+     * Use as boolean attribute: `<coar-tag borderless>` or `[borderless]="true"`
+     */
+    borderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Tag semantic variant - matches Card variants */
+    variant: _angular_core.InputSignal<TagVariant>;
+    /** Tag size */
+    size: _angular_core.InputSignal<TagSize>;
+    /** Whether the tag can be closed/removed */
+    closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emitted when the close button is clicked */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /** Handle close button click */
+    protected onClose(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTagComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTagComponent, "coar-tag", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
+}
+
+type CardVariant = 'neutral' | 'outlined' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+type CardPadding = 'none' | 's' | 'm' | 'l';
+declare class CoarCardComponent {
+    /**
+     * Adds a box-shadow for elevation/depth.
+     * Use as boolean attribute: `<coar-card elevated>` or `[elevated]="true"`
+     */
+    elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Removes the border from the card, leaving only background color.
+     * By default (false), cards have a visible border matching their variant.
+     * Use as boolean attribute: `<coar-card borderless>` or `[borderless]="true"`
+     */
+    borderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Card semantic variant */
+    variant: _angular_core.InputSignal<CardVariant>;
+    /** Card padding size */
+    padding: _angular_core.InputSignal<CardPadding>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarCardComponent, "coar-card", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["[coar-card-header]", "*", "[coar-card-footer]", "[coar-card-inset]"], true, never>;
+}
+
+type NoteVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+type NotePadding = 's' | 'm' | 'l';
+/**
+ * A callout/note component for highlighting information.
+ *
+ * Features a colored left border and subtle background.
+ * Use for tips, warnings, important information, or behavioral notes.
+ *
+ * @example
+ * ```html
+ * <coar-note variant="info">
+ *   <strong>Note:</strong> This is important information.
+ * </coar-note>
+ *
+ * <coar-note variant="warning" padding="l">
+ *   <h4>Warning</h4>
+ *   <p>Be careful with this action.</p>
+ * </coar-note>
+ * ```
+ */
+declare class CoarNoteComponent {
+    /**
+     * Note semantic variant.
+     * Determines the left border color and background tint.
+     * @default 'neutral'
+     */
+    variant: _angular_core.InputSignal<NoteVariant>;
+    /**
+     * Note padding size.
+     * @default 'm'
+     */
+    padding: _angular_core.InputSignal<NotePadding>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarNoteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarNoteComponent, "coar-note", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Content alignment options for the divider.
+ * - 'center': Content is centered with lines on both sides (default)
+ * - 'left': Content is aligned left with line on the right
+ * - 'right': Content is aligned right with line on the left
+ */
+type DividerAlign = 'left' | 'center' | 'right';
+/**
+ * Visual style variants for the divider line.
+ * - 'subtle': Light, unobtrusive divider (default)
+ * - 'strong': More prominent divider
+ */
+type DividerVariant = 'subtle' | 'strong';
+/**
+ * A flexible divider component for visually separating content sections.
+ *
+ * Supports optional content (text, icons, etc.) via ng-content that can be
+ * aligned left, center, or right. When content is present, the divider line
+ * splits around it.
+ *
+ * @example
+ * <!-- Simple divider -->
+ * <coar-divider />
+ *
+ * @example
+ * <!-- Divider with centered text -->
+ * <coar-divider>OR</coar-divider>
+ *
+ * @example
+ * <!-- Divider with left-aligned content -->
+ * <coar-divider align="left">Section Title</coar-divider>
+ */
+declare class CoarDividerComponent {
+    /** Content alignment when ng-content is provided */
+    align: _angular_core.InputSignal<DividerAlign>;
+    /** Visual style variant */
+    variant: _angular_core.InputSignal<DividerVariant>;
+    /** Width of the divider as a percentage (0-100) */
+    width: _angular_core.InputSignal<number>;
+    /** Spacing above the divider in pixels */
+    spacingTop: _angular_core.InputSignal<number>;
+    /** Spacing below the divider in pixels */
+    spacingBottom: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarDividerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarDividerComponent, "coar-divider", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "spacingTop": { "alias": "spacingTop"; "required": false; "isSignal": true; }; "spacingBottom": { "alias": "spacingBottom"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type CoarTableVariant = 'default' | 'plain' | 'bordered';
+/**
+ * A simple table component that provides consistent styling.
+ *
+ * Default styling uses alternating row colors (zebra stripes) for readability.
+ * Use 'plain' variant for no stripes, or 'bordered' for full cell borders.
+ *
+ * Usage:
+ * ```html
+ * <coar-table>
+ *   <thead>
+ *     <tr>
+ *       <th>Property</th>
+ *       <th>Type</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td><code>name</code></td>
+ *       <td><code>string</code></td>
+ *     </tr>
+ *   </tbody>
+ * </coar-table>
+ * ```
+ */
+declare class CoarTableComponent {
+    /** Visual variant of the table: default (zebra stripes), plain (no stripes), bordered (cell borders) */
+    variant: _angular_core.InputSignal<CoarTableVariant>;
+    /** Whether to use compact padding */
+    compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether rows should highlight on hover */
+    hover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTableComponent, "coar-table", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Available sizes for the label component.
+ * Matches the component size system used by buttons and inputs.
+ */
+type CoarLabelSize = 'xs' | 's' | 'm' | 'l';
+/**
+ * Standalone label component for consistent form labeling across the design system.
+ *
+ * @example
+ * ```html
+ * <coar-label size="s" [required]="true">Email Address</coar-label>
+ * <coar-text-input size="s" placeholder="your@email.com" />
+ * ```
+ */
+declare class CoarLabelComponent {
+    /**
+     * Size of the label. Should match the size of the associated input/form element.
+     * @default 'm'
+     */
+    readonly size: _angular_core.InputSignal<CoarLabelSize>;
+    /**
+     * Whether to show a required indicator (*) after the label text.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The ID of the form element this label is associated with.
+     * Sets the 'for' attribute for accessibility.
+     */
+    readonly for: _angular_core.InputSignal<string | undefined>;
+    readonly text: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarLabelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarLabelComponent, "coar-label", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type CoarIconRegisteredSource = Readonly<{
+    key: string;
+    isDefault: boolean;
+    canProvideIconKeys: boolean;
+}>;
+declare class CoarIconService {
+    private readonly builtInSource;
+    private readonly sourceEntries;
+    private readonly defaultSourceOverrides;
+    private readonly sourceByKey;
+    /**
+     * Get an icon by name from a specific icon source.
+     *
+     * - If `sourceKey` is omitted, the default source is used.
+     * - If no source is configured, this throws to make misconfiguration obvious.
+     */
+    getIcon(name: string, sourceKey?: string): Observable<string | null>;
+    /**
+     * List all registered icon sources.
+     *
+     * This is useful for UIs that allow users to browse icons grouped by source.
+     */
+    getRegisteredSources(): ReadonlyArray<CoarIconRegisteredSource>;
+    /**
+     * Get the available icon keys from a specific source.
+     *
+     * Throws if the source does not support listing keys.
+     */
+    getAvailableIconKeys(sourceKey?: string): Observable<readonly string[]>;
+    clearCache(): void;
+    clearIconCache(name: string): void;
+    private getSourceOrThrow;
+    private getSourceEntryOrThrow;
+    private getDefaultSourceKeyOrThrow;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarIconService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarIconService>;
+}
+
+interface CoarIconSource {
+    getIcon(name: string): Observable<string | null>;
+    getAvailableIconKeys?(): Observable<readonly string[]>;
+    clearCache?(): void;
+    clearIconCache?(name: string): void;
+}
+type CoarIconSourceEntry = Readonly<{
+    key: string;
+    source: CoarIconSource;
+}>;
+declare const COAR_ICON_SOURCE_ENTRY: InjectionToken<Readonly<{
+    key: string;
+    source: CoarIconSource;
+}>>;
+declare const COAR_DEFAULT_ICON_SOURCE_KEY: InjectionToken<string>;
+type ProvideCoarIconSourceOptions = Readonly<{
+    key: string;
+    source: CoarIconSource;
+}>;
+declare function provideCoarIconSource(options: ProvideCoarIconSourceOptions): Provider;
+type ProvideCoarIconMapSourceOptions = Readonly<{
+    key: string;
+    icons: Readonly<Record<string, string>>;
+}>;
+declare function provideCoarIconMapSource(options: ProvideCoarIconMapSourceOptions): Provider;
+declare function provideCoarDefaultIconSource(key: string): Provider;
+type ProvideCoarHttpIconSourceOptions = Readonly<{
+    key: string;
+    getUrl: (iconName: string) => string;
+    getAvailableIconKeys?: (http: HttpClient) => Observable<readonly string[]>;
+}>;
+declare function provideCoarHttpIconSource(options: ProvideCoarHttpIconSourceOptions): Provider;
+
+declare const COAR_BUILTIN_ICON_SOURCE_KEY: "coar-builtin";
+/**
+ * Overrides (and/or adds) built-in icons while keeping the built-in set as a base.
+ *
+ * This registers a map source under the fixed key `coar-builtin`, so it replaces the
+ * built-in fallback source inside `CoarIconService`.
+ */
+declare function provideCoarIconBuiltInOverrides(overrides: Readonly<Record<string, string>>): Provider;
+
+type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+type AvatarShape = 'circle' | 'square';
+/**
+ * Avatar component for displaying user profile images with fallback to initials.
+ *
+ * @example
+ * ```html
+ * <!-- With image -->
+ * <coar-avatar [src]="user.avatarUrl" [name]="user.fullName" />
+ *
+ * <!-- Initials fallback (no image) -->
+ * <coar-avatar [name]="user.fullName" />
+ *
+ * <!-- With status indicator -->
+ * <coar-avatar [name]="user.fullName">
+ *   <coar-badge dot variant="success" />
+ * </coar-avatar>
+ * ```
+ */
+declare class CoarAvatarComponent {
+    /** Image URL for the avatar */
+    src: _angular_core.InputSignal<string>;
+    /** User's full name (used for initials fallback and alt text) */
+    name: _angular_core.InputSignal<string>;
+    /** Avatar size */
+    size: _angular_core.InputSignal<AvatarSize>;
+    /** Avatar shape */
+    shape: _angular_core.InputSignal<AvatarShape>;
+    /** Whether the avatar is interactive (clickable) */
+    clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Custom initials override (otherwise computed from name) */
+    initials: _angular_core.InputSignal<string>;
+    /** Background color for initials (auto-generated from name if not set) */
+    bgColor: _angular_core.InputSignal<string>;
+    /** Whether the image failed to load */
+    protected imageError: _angular_core.WritableSignal<boolean>;
+    /** Show initials when no image or image failed */
+    protected showInitials: _angular_core.Signal<boolean>;
+    /** Computed initials from name (max 3 characters) */
+    protected displayInitials: _angular_core.Signal<string>;
+    /** Generate consistent background color from name */
+    protected computedBgColor: _angular_core.Signal<string>;
+    /** Handle image load error */
+    protected onImageError(): void;
+    /** Handle image load success */
+    protected onImageLoad(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarAvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarAvatarComponent, "coar-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Pipe that extracts initials from a name string.
+ *
+ * Takes the first character of each word and concatenates them.
+ * Useful with CoarAvatarComponent to display initials instead of raw text.
+ *
+ * @example
+ * ```html
+ * <!-- Single name: "A" -->
+ * {{ 'Alice' | coarInitials }}
+ *
+ * <!-- Two names: "AJ" -->
+ * {{ 'Alice Johnson' | coarInitials }}
+ *
+ * <!-- Three names: "AJD" -->
+ * {{ 'Alice Jane Doe' | coarInitials }}
+ *
+ * <!-- With avatar -->
+ * <coar-avatar [name]="'Alice Johnson' | coarInitials" />
+ * ```
+ */
+declare class CoarInitialsPipe implements PipeTransform {
+    /**
+     * Extract initials from a name.
+     * @param value - The name string to extract initials from
+     * @param maxLength - Maximum number of initials to return (default: 3)
+     * @returns Uppercase initials string
+     */
+    transform(value: string | null | undefined, maxLength?: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarInitialsPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<CoarInitialsPipe, "coarInitials", true>;
+}
+
+type CodeBlockVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'accent';
+declare class CoarCodeBlockComponent {
+    private readonly injector;
+    /** The code to display */
+    code: _angular_core.InputSignal<string>;
+    /** Language for syntax highlighting */
+    language: _angular_core.InputSignal<string>;
+    /** Title/label for the code block */
+    title: _angular_core.InputSignal<string>;
+    /** Whether the code block can be collapsed */
+    collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the code block starts collapsed */
+    collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to show the copy button */
+    showCopy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to hide the border and border-radius */
+    borderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Adds a box-shadow for elevation/depth */
+    elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether to show line numbers */
+    showLineNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Semantic variant for the header area */
+    variant: _angular_core.InputSignal<CodeBlockVariant>;
+    /** Maximum height before scrolling (0 = no limit) */
+    maxHeight: _angular_core.InputSignal<number>;
+    /** Internal collapsed state */
+    protected isCollapsed: _angular_core.WritableSignal<boolean>;
+    /** Copy feedback state */
+    protected copyFeedback: _angular_core.WritableSignal<"error" | "idle" | "copied">;
+    /** Highlighted code HTML */
+    protected highlightedCode: _angular_core.Signal<string>;
+    /** Highlighted code split by line for optional line-number rendering */
+    protected highlightedLines: _angular_core.Signal<string[]>;
+    constructor();
+    /** Map common language aliases to Prism language names */
+    private mapLanguage;
+    /** Escape HTML for plain text fallback */
+    private escapeHtml;
+    /** Toggle collapsed state */
+    toggleCollapsed(): void;
+    /** Copy code to clipboard */
+    copyCode(): Promise<void>;
+    /** Get lines for line numbers */
+    get lines(): number[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarCodeBlockComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarCodeBlockComponent, "coar-code-block", never, { "code": { "alias": "code"; "required": true; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "showCopy": { "alias": "showCopy"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CoarProgressBarVariant = 'accent' | 'success' | 'warning' | 'error';
+type CoarProgressBarSize = 's' | 'm' | 'l';
+declare class CoarProgressBarComponent {
+    /** Current progress value (0 to max) */
+    value: _angular_core.InputSignal<number>;
+    /** Maximum progress value */
+    max: _angular_core.InputSignal<number>;
+    /** Visual variant */
+    variant: _angular_core.InputSignal<CoarProgressBarVariant>;
+    /** Bar height size */
+    size: _angular_core.InputSignal<CoarProgressBarSize>;
+    /** Whether to show an indeterminate animation */
+    indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for the progress bar */
+    label: _angular_core.InputSignal<string>;
+    /** Whether to display the percentage text */
+    showValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Computed percentage clamped to 0-100 */
+    protected percentage: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarProgressBarComponent, "coar-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CoarSpinnerSize = 'xs' | 's' | 'm' | 'l';
+declare class CoarSpinnerComponent {
+    /** Spinner size */
+    size: _angular_core.InputSignal<CoarSpinnerSize>;
+    /** Accessible label */
+    label: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarSpinnerComponent, "coar-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Loading strategy for tab content:
+ * - 'lazy': Content is only rendered when tab is active (default)
+ * - 'eager': Content is always rendered, hidden when inactive
+ */
+type TabLoadingStrategy = 'eager' | 'lazy';
+/**
+ * Content type that can be passed to a tab.
+ * Either a TemplateRef (from ng-template) or a Component class.
+ */
+type TabContent = TemplateRef<unknown> | Type<unknown>;
+/**
+ * Individual tab definition for use within CoarTabGroup.
+ *
+ * The tab label is provided as content projected into the component.
+ * This allows simple text, icons, badges, or any custom HTML.
+ *
+ * @example Simple text label
+ * ```html
+ * <coar-tab id="home" [content]="homeTemplate">Home</coar-tab>
+ * ```
+ *
+ * @example With icon
+ * ```html
+ * <coar-tab id="settings" [content]="SettingsComponent">⚙️ Settings</coar-tab>
+ * ```
+ *
+ * @example Rich label with badge
+ * ```html
+ * <coar-tab id="messages" [content]="messagesTemplate">
+ *   Messages <span class="badge">5</span>
+ * </coar-tab>
+ * ```
+ */
+declare class CoarTabComponent {
+    /** Unique identifier for the tab */
+    id: _angular_core.InputSignal<string>;
+    /** Whether the tab is disabled */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The content to display in the tab panel.
+     * Can be either a TemplateRef (from ng-template) or a Component class.
+     */
+    content: _angular_core.InputSignal<TabContent>;
+    /**
+     * Inputs to pass when content is a Component.
+     * Ignored when content is a TemplateRef.
+     */
+    contentInputs: _angular_core.InputSignal<Record<string, unknown>>;
+    /**
+     * Loading strategy for the tab content.
+     * - 'lazy' (default): Content is only rendered when tab becomes active
+     * - 'eager': Content is always rendered, just hidden when inactive
+     */
+    loadingStrategy: _angular_core.InputSignal<TabLoadingStrategy>;
+    /** Template reference for the projected label content */
+    labelTemplate: _angular_core.Signal<TemplateRef<unknown>>;
+    /**
+     * Whether the content is a Component (vs a TemplateRef)
+     */
+    get isComponent(): boolean;
+    /**
+     * Get content as TemplateRef (returns null if it's a component)
+     */
+    get templateContent(): TemplateRef<unknown> | null;
+    /**
+     * Get content as Component type (returns null if it's a template)
+     */
+    get componentContent(): Type<unknown> | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTabComponent, "coar-tab", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "contentInputs": { "alias": "contentInputs"; "required": false; "isSignal": true; }; "loadingStrategy": { "alias": "loadingStrategy"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class CoarTabGroupComponent implements AfterContentInit {
+    /** The currently active tab id */
+    activeTab: _angular_core.InputSignal<string>;
+    /** Emits when the active tab changes */
+    activeTabChange: _angular_core.OutputEmitterRef<string>;
+    /** All tab components projected into this group */
+    tabs: _angular_core.Signal<readonly CoarTabComponent[]>;
+    /** Internal active tab state */
+    protected internalActiveTab: _angular_core.WritableSignal<string>;
+    constructor();
+    ngAfterContentInit(): void;
+    /** Check if a tab is currently active */
+    isActive(tabId: string): boolean;
+    /**
+     * Determines whether the content of a tab should be rendered.
+     * - For 'eager' strategy: always render (content stays in DOM)
+     * - For 'lazy' strategy: only render when active
+     */
+    shouldRenderContent(tab: CoarTabComponent): boolean;
+    /** Select a tab by its id */
+    selectTab(tabId: string): void;
+    /** Handle keyboard navigation */
+    onKeydown(event: KeyboardEvent, currentTabId: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTabGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTabGroupComponent, "coar-tab-group", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTabChange": "activeTabChange"; }, ["tabs"], never, true, never>;
+}
+
+/**
+ * CoarSidebar: A three-part layout component for navigation sidebars.
+ *
+ * Provides three distinct slots via content projection:
+ * - **Header** (`[coar-sidebar-header]`): Fixed at top, for logo/title/branding
+ * - **Content** (default slot): Scrollable area for navigation menu or other content
+ * - **Footer** (`[coar-sidebar-footer]`): Fixed at bottom, for actions/settings/user info
+ *
+ * Responsibilities:
+ * - Provide consistent sidebar layout structure
+ * - Apply design tokens for width, spacing, colors
+ * - Handle scrolling behavior (only content area scrolls)
+ * - Support left/right positioning
+ *
+ * @example
+ * ```html
+ * <coar-sidebar>
+ *   <div coar-sidebar-header>
+ *     <h2>Navigation</h2>
+ *   </div>
+ *
+ *   <coar-menu borderless>
+ *     <coar-menu-item routerLink="/home" routerLinkActive="active">Home</coar-menu-item>
+ *     <coar-menu-item routerLink="/about" routerLinkActive="active">About</coar-menu-item>
+ *   </coar-menu>
+ *
+ *   <div coar-sidebar-footer>
+ *     <button>Settings</button>
+ *   </div>
+ * </coar-sidebar>
+ * ```
+ */
+declare class CoarSidebarComponent {
+    /**
+     * Sidebar position: left or right side of screen.
+     * Default is 'left'.
+     */
+    readonly position: _angular_core.InputSignal<"left" | "right">;
+    /**
+     * Collapsed state for narrow/icon-only sidebar.
+     * Use as boolean attribute: `<coar-sidebar collapsed>` or `[collapsed]="true"`
+     */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarSidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarSidebarComponent, "coar-sidebar", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, ["[coar-sidebar-header]", "*", "[coar-sidebar-footer]"], true, never>;
+}
+
+declare class CoarBreadcrumbComponent {
+    readonly separator: _angular_core.InputSignal<string>;
+    readonly items: _angular_core.Signal<readonly ElementRef<any>[]>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarBreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarBreadcrumbComponent, "coar-breadcrumb", never, { "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+declare class CoarBreadcrumbItemComponent {
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarBreadcrumbItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarBreadcrumbItemComponent, "coar-breadcrumb-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type PaginationPageItem = {
+    type: 'page';
+    page: number;
+} | {
+    type: 'ellipsis';
+};
+declare class CoarPaginationComponent {
+    readonly totalItems: _angular_core.InputSignal<number>;
+    readonly pageSize: _angular_core.InputSignal<number>;
+    readonly currentPage: _angular_core.ModelSignal<number>;
+    readonly maxVisiblePages: _angular_core.InputSignal<number>;
+    readonly showFirstLast: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly pageChanged: _angular_core.OutputEmitterRef<number>;
+    readonly totalPages: _angular_core.Signal<number>;
+    readonly canGoPrev: _angular_core.Signal<boolean>;
+    readonly canGoNext: _angular_core.Signal<boolean>;
+    readonly visiblePages: _angular_core.Signal<PaginationPageItem[]>;
+    goToPage(page: number): void;
+    trackByItem(_index: number, item: PaginationPageItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPaginationComponent, "coar-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; "isSignal": true; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageChanged": "pageChanged"; }, never, never, true, never>;
+}
+
+declare class CoarNavbarComponent {
+    readonly elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarNavbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarNavbarComponent, "coar-navbar", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, never, ["[coar-navbar-start]", "[coar-navbar-center]", "[coar-navbar-end]"], true, never>;
+}
+
+/**
+ * A lightweight, hover/focus popover for rich tooltip-like content.
+ *
+ * Uses the overlay system for positioning with automatic placement and viewport clamping.
+ */
+declare class CoarPopoverComponent {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly popoverGroup;
+    private readonly overlayBuilder;
+    private static nextId;
+    private readonly popoverId;
+    protected readonly panelId: string;
+    private overlayRef;
+    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /** Disable popover behavior (still renders trigger content). */
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Enable hover/focus behavior (desktop-friendly). Default: false */
+    openOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Enable click/tap behavior (touch-friendly). Default: false */
+    openOnClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the panel should receive pointer events. Default: true */
+    interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When a concrete placement is set, fall back to best-fit when it doesn't fit. Default: false */
+    fallbackToBestFit: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the panel should be clamped into the viewport. Default: true */
+    clampToViewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true, the popover is "pinned" open via click and won't close on hover out. */
+    protected readonly pinnedByClick: _angular_core.WritableSignal<boolean>;
+    private closeTimer;
+    private readonly hoveringTrigger;
+    private readonly hoveringPanel;
+    private readonly closeOnDisable;
+    private readonly syncClampToViewport;
+    private readonly syncFallbackToBestFit;
+    private readonly triggerRef;
+    private readonly panelTemplateRef;
+    private getAnchorElement;
+    private readonly closeOnDocumentClick;
+    private openInternal;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onPanelMouseEnter(): void;
+    onPanelMouseLeave(): void;
+    onFocusIn(): void;
+    onPanelFocusIn(): void;
+    onTriggerClick(event: MouseEvent): void;
+    onHostClick(event: MouseEvent): void;
+    close(): void;
+    onFocusOut(event: FocusEvent): void;
+    onPanelFocusOut(event: FocusEvent): void;
+    private scheduleHoverClose;
+    private clearCloseTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPopoverComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPopoverComponent, "coar-popover", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOnHover": { "alias": "openOnHover"; "required": false; "isSignal": true; }; "openOnClick": { "alias": "openOnClick"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "fallbackToBestFit": { "alias": "fallbackToBestFit"; "required": false; "isSignal": true; }; "clampToViewport": { "alias": "clampToViewport"; "required": false; "isSignal": true; }; }, {}, never, ["[coarPopoverTrigger]", "[coarPopoverContent]"], true, never>;
+}
+
+/**
+ * Local coordination for popovers inside the same container (e.g. a date picker panel).
+ *
+ * Provided by a parent component to ensure only one popover in that scope is open at a time.
+ */
+declare class CoarPopoverGroupService {
+    private activeId;
+    private activeClose;
+    requestOpen(id: string, close: () => void): void;
+    notifyClosed(id: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPopoverGroupService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarPopoverGroupService>;
+}
+
+type CoarTooltipOverlayContent = string | TemplateRef<unknown> | Type<unknown>;
+
+/** Tooltip placement preference - all 12 standard placements plus 'auto' for best-fit */
+type TooltipPlacement = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+declare class CoarTooltipDirective {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly injector;
+    private readonly tooltipService;
+    /** Tooltip content (string, TemplateRef, or Component type). */
+    readonly coarTooltip: _angular_core.InputSignal<CoarTooltipOverlayContent | null>;
+    /** Optional context for TemplateRef tooltips. */
+    readonly coarTooltipContext: _angular_core.InputSignal<object | null>;
+    /** Disable tooltip behavior. */
+    readonly coarTooltipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Placement preference. Default: 'top'. Use 'auto' for best-fit. */
+    readonly coarTooltipPlacement: _angular_core.InputSignal<TooltipPlacement>;
+    /** Delay (ms) before opening on hover/focus. Default: 0 */
+    readonly coarTooltipOpenDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Delay (ms) before closing on leave/blur. Default: 0 */
+    readonly coarTooltipCloseDelay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Whether the tooltip should be clamped into the viewport. Default: true */
+    readonly coarTooltipClampToViewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When placement is explicit (not auto), fall back to best-fit when it doesn't fit. Default: false */
+    readonly coarTooltipFallbackToBestFit: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly tooltipId;
+    private overlayRef;
+    private readonly overlayBuilder;
+    private openTimerId;
+    private closeTimerId;
+    private openReason;
+    private readonly hasContent;
+    constructor();
+    private clearTimers;
+    private openInternal;
+    private resolveOverlayPosition;
+    private scheduleOpen;
+    private scheduleClose;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onFocusIn(): void;
+    onFocusOut(event: FocusEvent): void;
+    close(immediate?: boolean): void;
+    open(): void;
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarTooltipDirective, "[coarTooltip]", ["coarTooltip"], { "coarTooltip": { "alias": "coarTooltip"; "required": false; "isSignal": true; }; "coarTooltipContext": { "alias": "coarTooltipContext"; "required": false; "isSignal": true; }; "coarTooltipDisabled": { "alias": "coarTooltipDisabled"; "required": false; "isSignal": true; }; "coarTooltipPlacement": { "alias": "coarTooltipPlacement"; "required": false; "isSignal": true; }; "coarTooltipOpenDelay": { "alias": "coarTooltipOpenDelay"; "required": false; "isSignal": true; }; "coarTooltipCloseDelay": { "alias": "coarTooltipCloseDelay"; "required": false; "isSignal": true; }; "coarTooltipClampToViewport": { "alias": "coarTooltipClampToViewport"; "required": false; "isSignal": true; }; "coarTooltipFallbackToBestFit": { "alias": "coarTooltipFallbackToBestFit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type PopconfirmPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Popconfirm directive for confirming actions with a small anchored popover.
+ *
+ * Intercepts clicks on the host element, shows a confirmation popover,
+ * and either proceeds with the action (confirm) or cancels.
+ *
+ * @example
+ * ```html
+ * <button coarPopconfirm="Delete this user?" (onConfirm)="deleteUser()">
+ *   Delete
+ * </button>
+ *
+ * <button
+ *   [coarPopconfirm]="'Revoke all sessions?'"
+ *   popconfirmTitle="Warning"
+ *   confirmText="Revoke"
+ *   confirmVariant="danger"
+ *   (onConfirm)="revokeSessions()"
+ * >
+ *   Revoke
+ * </button>
+ * ```
+ */
+declare class CoarPopconfirmDirective {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly overlayBuilder;
+    private overlayRef;
+    /** Confirmation message to display */
+    coarPopconfirm: _angular_core.InputSignal<string>;
+    /** Optional title above the message */
+    popconfirmTitle: _angular_core.InputSignal<string>;
+    /** Text for the confirm button */
+    confirmText: _angular_core.InputSignal<string>;
+    /** Text for the cancel button */
+    cancelText: _angular_core.InputSignal<string>;
+    /** Variant for confirm button */
+    confirmVariant: _angular_core.InputSignal<"primary" | "danger">;
+    /** Placement relative to trigger element */
+    placement: _angular_core.InputSignal<PopconfirmPlacement>;
+    /** Whether popconfirm is disabled */
+    popconfirmDisabled: _angular_core.InputSignal<boolean>;
+    /** Emitted when user confirms */
+    confirmed: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when user cancels */
+    cancelled: _angular_core.OutputEmitterRef<void>;
+    /** Whether the popconfirm is currently open */
+    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    constructor();
+    onClick(event: Event): void;
+    private open;
+    private close;
+    private confirm;
+    private cancel;
+    private getPlacementConfig;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPopconfirmDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarPopconfirmDirective, "[coarPopconfirm]", never, { "coarPopconfirm": { "alias": "coarPopconfirm"; "required": true; "isSignal": true; }; "popconfirmTitle": { "alias": "popconfirmTitle"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "confirmVariant": { "alias": "confirmVariant"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "popconfirmDisabled": { "alias": "popconfirmDisabled"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; "cancelled": "cancelled"; }, never, never, true, never>;
+}
+/**
+ * Internal panel component for popconfirm content.
+ */
+declare class CoarPopconfirmPanelComponent {
+    /** Confirmation message to display */
+    message: _angular_core.InputSignal<string>;
+    /** Optional title above the message */
+    title: _angular_core.InputSignal<string>;
+    /** Text for the confirm button */
+    confirmText: _angular_core.InputSignal<string>;
+    /** Text for the cancel button */
+    cancelText: _angular_core.InputSignal<string>;
+    /** Variant for confirm button */
+    confirmVariant: _angular_core.InputSignal<"primary" | "danger">;
+    /** Placement for arrow positioning */
+    placement: _angular_core.InputSignal<PopconfirmPlacement>;
+    /** Callback when user confirms */
+    onConfirm: _angular_core.InputSignal<(() => void) | undefined>;
+    /** Callback when user cancels */
+    onCancel: _angular_core.InputSignal<(() => void) | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPopconfirmPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPopconfirmPanelComponent, "coar-popconfirm-panel", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "confirmVariant": { "alias": "confirmVariant"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "onConfirm": { "alias": "onConfirm"; "required": false; "isSignal": true; }; "onCancel": { "alias": "onCancel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CoarDialogSize = 's' | 'm' | 'l';
+interface CoarDialogConfig<_TResult = unknown> {
+    title?: string;
+    size?: CoarDialogSize;
+    closeOnBackdropClick?: boolean;
+    closeOnEscape?: boolean;
+    showCloseButton?: boolean;
+    panelClass?: string | string[];
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+}
+interface CoarDialogRef<TResult = unknown> {
+    close(result?: TResult): void;
+    readonly afterClosed$: Observable<TResult | undefined>;
+}
+interface CoarConfirmOptions {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmVariant?: 'primary' | 'danger';
+}
+
+declare class CoarDialogService {
+    private readonly overlayBuilder;
+    constructor();
+    openComponent<C, TResult = unknown>(component: Type<C>, config?: CoarDialogConfig<TResult>, inputs?: Record<string, unknown>): CoarDialogRef<TResult>;
+    openTemplate<TCtx, TResult = unknown>(template: TemplateRef<TCtx>, config?: CoarDialogConfig<TResult>, context?: TCtx): CoarDialogRef<TResult>;
+    confirm(options: CoarConfirmOptions): CoarDialogRef<boolean>;
+    private buildDialogOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarDialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarDialogService>;
+}
+
+declare class CoarDialogShellComponent {
+    private readonly overlayRef;
+    readonly dialogTitle: _angular_core.InputSignal<string>;
+    readonly dialogSize: _angular_core.InputSignal<CoarDialogSize>;
+    readonly showCloseButton: _angular_core.InputSignal<boolean>;
+    readonly contentComponent: _angular_core.InputSignal<Type<unknown> | null>;
+    readonly contentTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
+    readonly contentContext: _angular_core.InputSignal<unknown>;
+    readonly componentInputs: _angular_core.InputSignal<Record<string, unknown>>;
+    readonly confirmMode: _angular_core.InputSignal<boolean>;
+    readonly confirmMessage: _angular_core.InputSignal<string>;
+    readonly confirmText: _angular_core.InputSignal<string>;
+    readonly cancelText: _angular_core.InputSignal<string>;
+    readonly confirmVariant: _angular_core.InputSignal<string>;
+    protected onClose(): void;
+    protected onConfirm(): void;
+    protected onCancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarDialogShellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarDialogShellComponent, "coar-dialog-shell", never, { "dialogTitle": { "alias": "dialogTitle"; "required": false; "isSignal": true; }; "dialogSize": { "alias": "dialogSize"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "contentComponent": { "alias": "contentComponent"; "required": false; "isSignal": true; }; "contentTemplate": { "alias": "contentTemplate"; "required": false; "isSignal": true; }; "contentContext": { "alias": "contentContext"; "required": false; "isSignal": true; }; "componentInputs": { "alias": "componentInputs"; "required": false; "isSignal": true; }; "confirmMode": { "alias": "confirmMode"; "required": false; "isSignal": true; }; "confirmMessage": { "alias": "confirmMessage"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "confirmVariant": { "alias": "confirmVariant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type CoarToastVariant = 'success' | 'error' | 'warning' | 'info';
+type CoarToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface CoarToastConfig {
+    variant?: CoarToastVariant;
+    title?: string;
+    message: string;
+    duration?: number;
+    dismissible?: boolean;
+    position?: CoarToastPosition;
+    showProgress?: boolean;
+    action?: {
+        label: string;
+        callback: () => void;
+    };
+}
+interface CoarToastRef {
+    dismiss(): void;
+    readonly afterDismissed$: Observable<void>;
+}
+
+declare class CoarToastService {
+    private readonly appRef;
+    private readonly injector;
+    private containerRef;
+    private nextId;
+    success(message: string, config?: Partial<CoarToastConfig>): CoarToastRef;
+    error(message: string, config?: Partial<CoarToastConfig>): CoarToastRef;
+    warning(message: string, config?: Partial<CoarToastConfig>): CoarToastRef;
+    info(message: string, config?: Partial<CoarToastConfig>): CoarToastRef;
+    show(config: CoarToastConfig): CoarToastRef;
+    dismissAll(): void;
+    private getOrCreateContainer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarToastService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarToastService>;
+}
+
+declare class CoarToastComponent {
+    private readonly destroyRef;
+    private timer;
+    private startTime;
+    private remaining;
+    readonly variant: _angular_core.InputSignal<CoarToastVariant>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<string>;
+    readonly duration: _angular_core.InputSignal<number>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly showProgress: _angular_core.InputSignal<boolean>;
+    readonly action: _angular_core.InputSignal<{
+        label: string;
+        callback: () => void;
+    } | null>;
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    readonly actionClicked: _angular_core.OutputEmitterRef<void>;
+    readonly isPaused: _angular_core.WritableSignal<boolean>;
+    readonly iconName: _angular_core.Signal<string>;
+    constructor();
+    startAutoClose(): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onDismiss(): void;
+    onAction(): void;
+    private clearTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarToastComponent, "coar-toast", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "actionClicked": "actionClicked"; }, never, never, true, never>;
+}
+
+interface InternalToast {
+    id: number;
+    variant: CoarToastVariant;
+    title: string;
+    message: string;
+    duration: number;
+    dismissible: boolean;
+    showProgress: boolean;
+    action: {
+        label: string;
+        callback: () => void;
+    } | null;
+    onDismiss: () => void;
+}
+declare class CoarToastContainerComponent {
+    toastComponents: QueryList<CoarToastComponent>;
+    readonly toasts: _angular_core.WritableSignal<InternalToast[]>;
+    readonly position: _angular_core.WritableSignal<string>;
+    private pendingAutoClose;
+    addToast(toast: InternalToast): void;
+    removeToast(id: number): void;
+    removeAll(): void;
+    onDismissed(id: number): void;
+    startAutoCloseForLatest(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarToastContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarToastContainerComponent, "coar-toast-container", never, {}, {}, never, never, true, never>;
+}
+
+export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DATE_FORMAT_TO_MASKITO_MODE, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_DEFAULT_TIME_FORMAT, COAR_ICON_SOURCE_ENTRY, CoarAvatarComponent, CoarBadgeComponent, CoarBreadcrumbComponent, CoarBreadcrumbItemComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDialogService, CoarDialogShellComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarInitialsPipe, CoarLabelComponent, CoarMiniCalendarComponent, CoarMonthListComponent, CoarMultiSelectComponent, CoarNavbarComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPaginationComponent, CoarPasswordInputComponent, CoarPlainDatePickerComponent, CoarPlainDateTimePickerComponent, CoarPopconfirmDirective, CoarPopconfirmPanelComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarProgressBarComponent, CoarRadioComponent, CoarRadioGroupComponent, CoarScrollableCalendarComponent, CoarScrollbarDirective, CoarSidebarComponent, CoarSingleSelectComponent, CoarSpinnerComponent, CoarSwitchComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTimePickerComponent, CoarToastComponent, CoarToastContainerComponent, CoarToastService, CoarTooltipDirective, CoarZonedDateTimePickerComponent, coarCalculateIsoWeekNumber, coarClampPlainDate, coarConvertTo12Hour, coarConvertTo24Hour, coarDetect12HourFormat, coarDetectDateFormatPatternFromIntl, coarFormatPlainDate, coarFormatTime, coarGetCalendarGridDates, coarGetDateSeparatorForPattern, coarGetLocalizedWeekdays, coarGetValidMinutes, coarIncrementHours, coarIncrementMinutes, coarParsePlainDateFromInput, coarParseTimeInput, coarProvideValueAccessor, coarRoundMinutesToStep, coarTemporalPlainDateToDate, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
+export type { AvatarShape, AvatarSize, BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardPadding, CardVariant, CoarCalendarDay, CoarCalendarGridCell, CoarCalendarMonth, CoarCheckboxSize, CoarConfirmOptions, CoarDateMarker, CoarDialogConfig, CoarDialogRef, CoarDialogSize, CoarIconRegisteredSource, CoarIconSize, CoarIconSource, CoarIconSourceEntry, CoarLabelSize, CoarNumberInputSize, CoarNumberInputStepperButtons, CoarPasswordInputSize, CoarPlainDatePickerSize, CoarPlainDateTimePickerSize, CoarProgressBarSize, CoarProgressBarVariant, CoarScrollbarAutoHide, CoarScrollbarOverflow, CoarScrollbarTheme, CoarSelectAppearance, CoarSelectOption, CoarSelectSize, CoarSpinnerSize, CoarSwitchSize, CoarTableVariant, CoarTextInputSize, CoarTimePeriod, CoarTimePickerSize, CoarTimeValue, CoarToastConfig, CoarToastPosition, CoarToastRef, CoarToastVariant, CoarZonedDateTimePickerSize, CodeBlockVariant, DateFormatConfig, DividerAlign, DividerVariant, NotePadding, NoteVariant, NumberFormatConfig, PaginationPageItem, PopconfirmPlacement, ProvideCoarHttpIconSourceOptions, ProvideCoarIconMapSourceOptions, ProvideCoarIconSourceOptions, RadioGroupOrientation, RadioGroupSize, TabContent, TabLoadingStrategy, TagSize, TagVariant, TimeFormatConfig };