@styloviz/input-field 0.1.1

package/fesm2022/styloviz-input-field.mjs

@@ -0,0 +1,980 @@
+import * as i0 from '@angular/core';
+import { model, input, output, signal, viewChild, computed, forwardRef, ChangeDetectionStrategy, Component, inject, ElementRef, ApplicationRef, TemplateRef, HostListener, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+
+/** Process-wide counter for generating unique fallback ids. */
+let _svInputUid = 0;
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * InputField — A premium form input for dashboards.
+ *
+ * Features:
+ * - text, email, password, number, tel, url, date, time, color, …
+ * - Textarea mode (multiline) via `multiline` input
+ * - Select mode via `options` input
+ * - 3 visual variants: default (bordered) · filled · flushed (underline)
+ * - 3 sizes: sm · md · lg
+ * - 4 validation states: default · error · success · warning
+ * - Leading / trailing icon slots (SVG path)
+ * - Inline leading / trailing text addons (e.g. "https://", ".com")
+ * - Password show/hide toggle built-in
+ * - Character counter with optional max-length
+ * - Helper text and error message slots
+ * - Full ControlValueAccessor — works with `formControl`, `formControlName`, `ngModel`
+ * - Accessible: `<label>`, `aria-describedby`, `aria-invalid`, focus-visible ring
+ */
+class SvInputFieldComponent {
+    // ── Core ──────────────────────────────────────────────────────────────────
+    /** Current value. Use `[(value)]` for signal two-way binding. */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Input type. @default 'text' */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Renders a `<textarea>` instead of `<input>`. @default false */
+    multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline" }] : /* istanbul ignore next */ []));
+    /**
+     * When set, renders a `<select>` element.
+     * Use `type` is ignored when options are provided.
+     */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    // ── Labels & helpers ──────────────────────────────────────────────────────
+    /** Label text shown above the input. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Marks the label with a red asterisk. @default false */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Optional label (replaces asterisk with a soft "(optional)" tag). @default false */
+    optionalTag = input(false, ...(ngDevMode ? [{ debugName: "optionalTag" }] : /* istanbul ignore next */ []));
+    /** Placeholder text. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below the input (hidden when `errorMessage` is set). */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Error message — switches state to `error` automatically when non-empty. */
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** Success message — shown below when state is `success`. */
+    successMessage = input('', ...(ngDevMode ? [{ debugName: "successMessage" }] : /* istanbul ignore next */ []));
+    // ── Appearance ────────────────────────────────────────────────────────────
+    /** Visual style. @default 'default' */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit validation state override.
+     * Automatically set to `'error'` when `errorMessage` is non-empty.
+     * @default 'default'
+     */
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    // ── Icons & addons ────────────────────────────────────────────────────────
+    /** SVG `<path d="...">` for the leading (left) icon. */
+    leadingIconPath = input('', ...(ngDevMode ? [{ debugName: "leadingIconPath" }] : /* istanbul ignore next */ []));
+    /** SVG `<path d="...">` for the trailing (right) icon. */
+    trailingIconPath = input('', ...(ngDevMode ? [{ debugName: "trailingIconPath" }] : /* istanbul ignore next */ []));
+    /**
+     * Short text prepended inside the input (e.g. `'https://'`, `'$'`).
+     * Ignored when `leadingIconPath` is set.
+     */
+    leadingAddon = input('', ...(ngDevMode ? [{ debugName: "leadingAddon" }] : /* istanbul ignore next */ []));
+    /**
+     * Short text appended inside the input (e.g. `'.com'`, `'USD'`).
+     * Ignored when `trailingIconPath` is set.
+     */
+    trailingAddon = input('', ...(ngDevMode ? [{ debugName: "trailingAddon" }] : /* istanbul ignore next */ []));
+    // ── Character counter ─────────────────────────────────────────────────────
+    /**
+     * Maximum character count shown as a counter below the input.
+     * Set to 0 to disable. @default 0
+     */
+    maxLength = input(0, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    // ── State ─────────────────────────────────────────────────────────────────
+    /** Disable the input. @default false */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Read-only mode. @default false */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Show a loading spinner in the trailing position. @default false */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** id forwarded to the native input — required for external `<label for>`. */
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /** name attribute for the native input. */
+    inputName = input('', ...(ngDevMode ? [{ debugName: "inputName" }] : /* istanbul ignore next */ []));
+    /** Additional CSS classes on the root wrapper. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Native constraints & hints ──────────────────────────────────────────────
+    /**
+     * `autocomplete` token (e.g. 'email', 'name', 'current-password', 'one-time-code').
+     * Defaults to 'current-password' for password type, otherwise the browser default.
+     */
+    autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Virtual-keyboard hint for mobile (e.g. 'numeric', 'email', 'tel'). */
+    inputMode = input('', ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    /** Native validation regex (without anchors — anchored automatically). */
+    pattern = input('', ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    /** Minimum length used by the built-in Validator and native `minlength`. @default 0 */
+    minLength = input(0, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    /** Native `min` for number/date/range types. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Native `max` for number/date/range types. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Native `step` for number/date/range types. */
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Native spellcheck toggle. null = browser default. */
+    spellcheck = input(null, ...(ngDevMode ? [{ debugName: "spellcheck" }] : /* istanbul ignore next */ []));
+    /** Autofocus the control on render. @default false */
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    // Note: `value = model<string>('')` already auto-emits `valueChange` when
+    // value.set() is called — no separate output needed.
+    /** Emits when the input gains focus. */
+    focused = output();
+    /** Emits when the input loses focus. */
+    blurred = output();
+    /** Emits when Enter is pressed. */
+    submitted = output();
+    // ── Internal state ────────────────────────────────────────────────────────
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ── CVA ───────────────────────────────────────────────────────────────────
+    _onChange = () => { };
+    _onTouched = () => { };
+    /** Tracks disabled state set programmatically via formControl.disable(). */
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Merged disabled state — true when either the [disabled] input or the
+     * parent FormControl is disabled. Use this everywhere instead of disabled().
+     */
+    resolvedDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    writeValue(val) { this.value.set(val ?? ''); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
+    validate(_) {
+        const errors = {};
+        const v = this.value() ?? '';
+        const max = this.maxLength();
+        const min = this.minLength();
+        if (this.required() && v.length === 0) {
+            errors['required'] = true;
+        }
+        if (max > 0 && v.length > max) {
+            errors['maxlength'] = { requiredLength: max, actualLength: v.length };
+        }
+        if (min > 0 && v.length > 0 && v.length < min) {
+            errors['minlength'] = { requiredLength: min, actualLength: v.length };
+        }
+        const pat = this.pattern();
+        if (pat && v.length > 0) {
+            try {
+                if (!new RegExp(`^(?:${pat})$`).test(v)) {
+                    errors['pattern'] = { requiredPattern: pat, actualValue: v };
+                }
+            }
+            catch {
+                // Invalid regex supplied — skip pattern validation rather than throw.
+            }
+        }
+        return Object.keys(errors).length > 0 ? errors : null;
+    }
+    // ── Event handlers ────────────────────────────────────────────────────────
+    onNativeChange(event) {
+        const val = event.target.value;
+        this.value.set(val); // model().set() auto-emits valueChange
+        this._onChange(val);
+    }
+    onFocus(e) {
+        this.isFocused.set(true);
+        this.focused.emit(e);
+    }
+    onBlur(e) {
+        this.isFocused.set(false);
+        this._onTouched();
+        this.blurred.emit(e);
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' && !this.multiline()) {
+            this.submitted.emit(this.value());
+        }
+    }
+    togglePassword() { this.showPassword.update(v => !v); }
+    // ── Computed helpers ──────────────────────────────────────────────────────
+    /** Stable unique fallback id so label + aria associations always work. */
+    _autoId = `sv-input-${++_svInputUid}`;
+    /** Effective id used by the native control and its <label for>. */
+    resolvedId = computed(() => this.inputId() || this._autoId, ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    /** Id of the hint/error/success description element. */
+    describedById = computed(() => `${this.resolvedId()}-desc`, ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+    isSelect = computed(() => this.options().length > 0, ...(ngDevMode ? [{ debugName: "isSelect" }] : /* istanbul ignore next */ []));
+    isPassword = computed(() => this.type() === 'password', ...(ngDevMode ? [{ debugName: "isPassword" }] : /* istanbul ignore next */ []));
+    isColor = computed(() => this.type() === 'color', ...(ngDevMode ? [{ debugName: "isColor" }] : /* istanbul ignore next */ []));
+    isFloating = computed(() => false, ...(ngDevMode ? [{ debugName: "isFloating" }] : /* istanbul ignore next */ []));
+    labelIsFloated = computed(() => this.isFocused() || !!this.value(), ...(ngDevMode ? [{ debugName: "labelIsFloated" }] : /* istanbul ignore next */ []));
+    resolvedType = computed(() => {
+        if (this.isPassword())
+            return this.showPassword() ? 'text' : 'password';
+        return this.type();
+    }, ...(ngDevMode ? [{ debugName: "resolvedType" }] : /* istanbul ignore next */ []));
+    resolvedState = computed(() => this.errorMessage() ? 'error' : this.state(), ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    charCount = computed(() => this.value().length, ...(ngDevMode ? [{ debugName: "charCount" }] : /* istanbul ignore next */ []));
+    showCounter = computed(() => this.maxLength() > 0, ...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
+    counterOver = computed(() => this.maxLength() > 0 && this.charCount() > this.maxLength(), ...(ngDevMode ? [{ debugName: "counterOver" }] : /* istanbul ignore next */ []));
+    showHint = computed(() => !!this.hint() && !this.errorMessage() && !this.successMessage(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    showError = computed(() => !!this.errorMessage(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    showSuccess = computed(() => !!this.successMessage() && !this.errorMessage(), ...(ngDevMode ? [{ debugName: "showSuccess" }] : /* istanbul ignore next */ []));
+    /** True when any below-field description (hint/error/success) is rendered. */
+    hasDescription = computed(() => this.showHint() || this.showError() || this.showSuccess(), ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    /** Resolved autocomplete token. Smart default for passwords, else explicit value. */
+    resolvedAutocomplete = computed(() => {
+        if (this.autocomplete())
+            return this.autocomplete();
+        if (this.isPassword())
+            return 'current-password';
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAutocomplete" }] : /* istanbul ignore next */ []));
+    hasLeading = computed(() => !!this.leadingIconPath() || !!this.leadingAddon(), ...(ngDevMode ? [{ debugName: "hasLeading" }] : /* istanbul ignore next */ []));
+    hasTrailing = computed(() => !!this.trailingIconPath() || !!this.trailingAddon() ||
+        this.isPassword() || this.loading(), ...(ngDevMode ? [{ debugName: "hasTrailing" }] : /* istanbul ignore next */ []));
+    // ── Class maps ────────────────────────────────────────────────────────────
+    rootClasses = computed(() => ['w-full', this.customClass()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    floatingLabelClasses = computed(() => {
+        const floated = this.labelIsFloated();
+        const s = this.resolvedState();
+        const focused = this.isFocused();
+        // When leading icon/addon present, offset label so it doesn't overlap
+        const notFloatedLeft = this.hasLeading() ? 'left-10' : 'left-3.5';
+        const floatedLeft = this.hasLeading() ? 'left-8' : 'left-3';
+        const left = floated ? floatedLeft : notFloatedLeft;
+        // For multiline, label sits near the top (not vertical-center) when not floated
+        const isMulti = this.multiline();
+        const notFloatedTopMap = { sm: 'top-3', md: 'top-4', lg: 'top-5' };
+        const notFloatedTop = isMulti ? notFloatedTopMap[this.size()] : 'top-1/2';
+        const notFloatedTranslate = isMulti ? '' : '-translate-y-1/2';
+        const textSize = floated ? 'text-[0.7rem] leading-none' : this.labelSizeClass();
+        const bg = floated ? 'px-1 bg-white dark:bg-gray-900' : '';
+        let color;
+        if (floated && focused) {
+            color = s === 'error' ? 'text-red-500'
+                : s === 'success' ? 'text-emerald-500'
+                    : s === 'warning' ? 'text-amber-500'
+                        : 'text-blue-600 dark:text-blue-400';
+        }
+        else if (floated) {
+            color = s === 'error' ? 'text-red-500 dark:text-red-400'
+                : s === 'success' ? 'text-emerald-600 dark:text-emerald-400'
+                    : s === 'warning' ? 'text-amber-600 dark:text-amber-400'
+                        : 'text-gray-500 dark:text-gray-400';
+        }
+        else {
+            color = 'text-gray-500 dark:text-gray-400';
+        }
+        const position = floated
+            ? `${left} -top-px -translate-y-1/2`
+            : `${left} ${notFloatedTop} ${notFloatedTranslate}`.trim();
+        return [
+            'absolute z-10 pointer-events-none select-none',
+            'transition-[top,left,font-size,color,padding,background-color] duration-200 ease-in-out',
+            position,
+            textSize,
+            bg,
+            color,
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "floatingLabelClasses" }] : /* istanbul ignore next */ []));
+    labelSizeClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'text-xs';
+            case 'lg': return 'text-base';
+            default: return 'text-sm';
+        }
+    }, ...(ngDevMode ? [{ debugName: "labelSizeClass" }] : /* istanbul ignore next */ []));
+    /** Outer track that wraps the native input + addons + icons. */
+    trackClasses = computed(() => {
+        const v = this.variant();
+        const s = this.resolvedState();
+        const focused = this.isFocused();
+        // Base layout — multiline uses items-start so leading icons align to the top
+        const base = `relative flex ${this.multiline() ? 'items-start' : 'items-center'} w-full transition-all duration-150`;
+        // Height / font size
+        const sizeMap = {
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+        };
+        // Variant shape & surface
+        const variantBase = {
+            default: 'rounded-md border bg-white dark:bg-gray-900',
+            filled: 'rounded-md border-0 bg-gray-100 dark:bg-gray-800',
+            flushed: 'border-b-2 bg-transparent rounded-none',
+        };
+        // State-driven border/ring
+        const isFlushed = v === 'flushed';
+        const stateIdle = {
+            default: isFlushed
+                ? 'border-gray-300 dark:border-gray-600'
+                : 'border-gray-300 dark:border-gray-700',
+            error: isFlushed
+                ? 'border-red-500 dark:border-red-500'
+                : 'border-red-400 dark:border-red-500',
+            success: isFlushed
+                ? 'border-emerald-500 dark:border-emerald-500'
+                : 'border-emerald-400 dark:border-emerald-500',
+            warning: isFlushed
+                ? 'border-amber-500 dark:border-amber-500'
+                : 'border-amber-400 dark:border-amber-500',
+        };
+        const stateFocus = {
+            default: isFlushed
+                ? 'border-blue-500 dark:border-blue-400'
+                : 'border-blue-500 ring-2 ring-blue-500/20 dark:border-blue-400 dark:ring-blue-400/20',
+            error: isFlushed
+                ? 'border-red-500'
+                : 'border-red-500 ring-2 ring-red-500/20',
+            success: isFlushed
+                ? 'border-emerald-500'
+                : 'border-emerald-500 ring-2 ring-emerald-500/20',
+            warning: isFlushed
+                ? 'border-amber-500'
+                : 'border-amber-500 ring-2 ring-amber-500/20',
+        };
+        const disabledClass = this.resolvedDisabled()
+            ? 'cursor-not-allowed opacity-60 pointer-events-none'
+            : '';
+        return [
+            base,
+            sizeMap[this.size()],
+            variantBase[v],
+            focused ? stateFocus[s] : stateIdle[s],
+            disabledClass,
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    /** The native `<input>`, `<textarea>` or `<select>` element. */
+    nativeInputClasses = computed(() => {
+        const padL = this.hasLeading() ? 'pl-0' : this.sidepadding();
+        const padR = this.hasTrailing() ? 'pr-0' : this.sidepadding();
+        const multi = this.multiline();
+        return [
+            'flex-1 min-w-0 bg-transparent outline-none',
+            'text-gray-900 dark:text-white',
+            'placeholder-gray-400 dark:placeholder-gray-500',
+            'disabled:cursor-not-allowed',
+            padL, padR,
+            multi ? `resize-y ${this.multilineVertPadding()} min-h-[5rem]` : this.heightClass(),
+            this.isColor() ? 'h-10 w-full cursor-pointer rounded-lg p-1' : '',
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "nativeInputClasses" }] : /* istanbul ignore next */ []));
+    sidepadding = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'px-2.5';
+            case 'lg': return 'px-4';
+            default: return 'px-3.5';
+        }
+    }, ...(ngDevMode ? [{ debugName: "sidepadding" }] : /* istanbul ignore next */ []));
+    vertPadding = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'py-1.5';
+            case 'lg': return 'py-3';
+            default: return 'py-2';
+        }
+    }, ...(ngDevMode ? [{ debugName: "vertPadding" }] : /* istanbul ignore next */ []));
+    /** Vertical padding for multiline (textarea) — adds extra top space when floating. */
+    multilineVertPadding = computed(() => {
+        if (this.isFloating()) {
+            switch (this.size()) {
+                case 'sm': return 'pt-4 pb-2';
+                case 'lg': return 'pt-5 pb-3';
+                default: return 'pt-5 pb-3';
+            }
+        }
+        return this.vertPadding();
+    }, ...(ngDevMode ? [{ debugName: "multilineVertPadding" }] : /* istanbul ignore next */ []));
+    heightClass = computed(() => {
+        if (this.isFloating()) {
+            switch (this.size()) {
+                case 'sm': return 'h-12 pt-2 pb-1';
+                case 'lg': return 'h-16 pt-4 pb-2';
+                default: return 'h-14 pt-3 pb-2';
+            }
+        }
+        switch (this.size()) {
+            case 'sm': return 'h-8 py-0';
+            case 'lg': return 'h-12 py-0';
+            default: return 'h-10 py-0';
+        }
+    }, ...(ngDevMode ? [{ debugName: "heightClass" }] : /* istanbul ignore next */ []));
+    addonClasses = computed(() => `flex shrink-0 items-center ${this.vertPadding()} text-gray-500 dark:text-gray-400 text-sm select-none`, ...(ngDevMode ? [{ debugName: "addonClasses" }] : /* istanbul ignore next */ []));
+    leadingAddonClasses = computed(() => `${this.addonClasses()} pl-3.5 border-r border-gray-200 dark:border-gray-700 mr-3.5 pr-3`, ...(ngDevMode ? [{ debugName: "leadingAddonClasses" }] : /* istanbul ignore next */ []));
+    trailingAddonClasses = computed(() => `${this.addonClasses()} pr-3.5 border-l border-gray-200 dark:border-gray-700 ml-3.5 pl-3`, ...(ngDevMode ? [{ debugName: "trailingAddonClasses" }] : /* istanbul ignore next */ []));
+    iconClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'h-3.5 w-3.5';
+            case 'lg': return 'h-5 w-5';
+            default: return 'h-4 w-4';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    iconPadClass = computed(() => {
+        switch (this.size()) {
+            case 'sm': return 'px-2';
+            case 'lg': return 'px-3.5';
+            default: return 'px-3';
+        }
+    }, ...(ngDevMode ? [{ debugName: "iconPadClass" }] : /* istanbul ignore next */ []));
+    stateIconPath = computed(() => {
+        switch (this.resolvedState()) {
+            case 'error': return 'M12 8v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z';
+            case 'success': return 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3';
+            case 'warning': return 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01';
+            default: return '';
+        }
+    }, ...(ngDevMode ? [{ debugName: "stateIconPath" }] : /* istanbul ignore next */ []));
+    stateIconColorClass = computed(() => {
+        switch (this.resolvedState()) {
+            case 'error': return 'text-red-500';
+            case 'success': return 'text-emerald-500';
+            case 'warning': return 'text-amber-500';
+            default: return 'text-gray-400';
+        }
+    }, ...(ngDevMode ? [{ debugName: "stateIconColorClass" }] : /* istanbul ignore next */ []));
+    hintColorClass = computed(() => {
+        switch (this.resolvedState()) {
+            case 'error': return 'text-red-600 dark:text-red-400';
+            case 'success': return 'text-emerald-600 dark:text-emerald-400';
+            case 'warning': return 'text-amber-600 dark:text-amber-400';
+            default: return 'text-gray-500 dark:text-gray-400';
+        }
+    }, ...(ngDevMode ? [{ debugName: "hintColorClass" }] : /* istanbul ignore next */ []));
+    // ── Public API ────────────────────────────────────────────────────────────
+    focus() {
+        this.inputRef()?.nativeElement?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvInputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvInputFieldComponent, isStandalone: true, selector: "sv-input-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optionalTag: { classPropertyName: "optionalTag", publicName: "optionalTag", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, successMessage: { classPropertyName: "successMessage", publicName: "successMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, leadingIconPath: { classPropertyName: "leadingIconPath", publicName: "leadingIconPath", isSignal: true, isRequired: false, transformFunction: null }, trailingIconPath: { classPropertyName: "trailingIconPath", publicName: "trailingIconPath", isSignal: true, isRequired: false, transformFunction: null }, leadingAddon: { classPropertyName: "leadingAddon", publicName: "leadingAddon", isSignal: true, isRequired: false, transformFunction: null }, trailingAddon: { classPropertyName: "trailingAddon", publicName: "trailingAddon", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputName: { classPropertyName: "inputName", publicName: "inputName", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", focused: "focused", blurred: "blurred", submitted: "submitted" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SvInputFieldComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => SvInputFieldComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Root wrapper -->\n<div [ngClass]=\"rootClasses()\" class=\"flex flex-col gap-1.5\">\n\n  <!-- \u2500\u2500 Label row (hidden for floating variant) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label()) {\n    <div class=\"flex items-baseline justify-between gap-2\">\n      <label\n        [ngClass]=\"['font-medium text-gray-700 dark:text-gray-200', labelSizeClass()]\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n        @if (optionalTag() && !required()) {\n          <span class=\"ml-1.5 font-normal text-gray-500 dark:text-gray-400 text-xs\">(optional)</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Input track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div [ngClass]=\"trackClasses()\">\n    <!-- Floating label (renders inside track, animates to border on focus/value) -->\n    @if (isFloating() && label()) {\n      <label\n        [ngClass]=\"floatingLabelClasses()\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n    <!-- Leading icon -->\n    @if (leadingIconPath() && !leadingAddon()) {\n      <span\n        class=\"flex shrink-0 items-center\"\n        [ngClass]=\"[iconPadClass(), 'text-gray-500 dark:text-gray-400']\"\n        aria-hidden=\"true\"\n      >\n        <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"leadingIconPath()\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Leading text addon (e.g. \"https://\") -->\n    @if (leadingAddon() && !leadingIconPath()) {\n      <span [ngClass]=\"leadingAddonClasses()\">{{ leadingAddon() }}</span>\n    }\n\n    <!-- \u2500\u2500 Native <select> \u2500\u2500 -->\n    @if (isSelect()) {\n      <select\n        #inputEl\n        [ngClass]=\"nativeInputClasses()\"\n        [attr.id]=\"resolvedId()\"\n        [attr.name]=\"inputName() || null\"\n        [disabled]=\"resolvedDisabled()\"\n        [attr.autofocus]=\"autofocus() ? '' : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"resolvedState() === 'error' || null\"\n        [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n        [value]=\"value()\"\n        (change)=\"onNativeChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      >\n        @if (placeholder()) {\n          <option value=\"\" disabled [selected]=\"!value()\">{{ isFloating() && !labelIsFloated() ? '' : placeholder() }}</option>\n        }\n        @for (opt of options(); track opt.value) {\n          <option\n            [value]=\"opt.value\"\n            [disabled]=\"opt.disabled ?? false\"\n            [selected]=\"value() === opt.value\"\n          >{{ opt.label }}</option>\n        }\n      </select>\n\n    <!-- \u2500\u2500 Native <textarea> \u2500\u2500 -->\n    } @else if (multiline()) {\n      <textarea\n        #inputEl\n        [ngClass]=\"nativeInputClasses()\"\n        [attr.id]=\"resolvedId()\"\n        [attr.name]=\"inputName() || null\"\n        [placeholder]=\"isFloating() && !labelIsFloated() ? ' ' : placeholder()\"\n        [disabled]=\"resolvedDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.maxlength]=\"maxLength() > 0 ? maxLength() : null\"\n        [attr.minlength]=\"minLength() > 0 ? minLength() : null\"\n        [attr.spellcheck]=\"spellcheck()\"\n        [attr.autofocus]=\"autofocus() ? '' : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"resolvedState() === 'error' || null\"\n        [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n        [value]=\"value()\"\n        (input)=\"onNativeChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n\n    <!-- \u2500\u2500 Native <input> (default) \u2500\u2500 -->\n    } @else {\n      <input\n        #inputEl\n        [ngClass]=\"nativeInputClasses()\"\n        [type]=\"resolvedType()\"\n        [attr.id]=\"resolvedId()\"\n        [attr.name]=\"inputName() || null\"\n        [placeholder]=\"isFloating() && !labelIsFloated() ? ' ' : placeholder()\"\n        [disabled]=\"resolvedDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.maxlength]=\"maxLength() > 0 ? maxLength() : null\"\n        [attr.minlength]=\"minLength() > 0 ? minLength() : null\"\n        [attr.pattern]=\"pattern() || null\"\n        [attr.min]=\"min()\"\n        [attr.max]=\"max()\"\n        [attr.step]=\"step()\"\n        [attr.inputmode]=\"inputMode() || null\"\n        [attr.spellcheck]=\"spellcheck()\"\n        [attr.autofocus]=\"autofocus() ? '' : null\"\n        [attr.autocomplete]=\"resolvedAutocomplete()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"resolvedState() === 'error' || null\"\n        [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n        [value]=\"value()\"\n        (input)=\"onNativeChange($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    }\n\n    <!-- Loading spinner -->\n    @if (loading()) {\n      <span class=\"flex shrink-0 items-center pr-3 text-gray-400\" aria-hidden=\"true\">\n        <svg [ngClass]=\"iconClass()\" class=\"animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                  stroke=\"currentColor\" stroke-width=\"4\"/>\n          <path class=\"opacity-75\" fill=\"currentColor\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n        </svg>\n      </span>\n\n    <!-- Password eye toggle -->\n    } @else if (isPassword() && !loading()) {\n      <button\n        type=\"button\"\n        class=\"flex shrink-0 items-center pr-3 text-gray-400 hover:text-gray-600\n               dark:hover:text-gray-300 focus:outline-none focus-visible:ring-2\n               focus-visible:ring-blue-400 rounded\"\n        (click)=\"togglePassword()\"\n        [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"showPassword()\"\n        [attr.aria-controls]=\"resolvedId()\"\n      >\n        @if (showPassword()) {\n          <!-- Eye-off -->\n          <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22\"/>\n          </svg>\n        } @else {\n          <!-- Eye -->\n          <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n            <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n          </svg>\n        }\n      </button>\n\n    <!-- State icon (error / success / warning) \u2014 only when no trailing icon/addon -->\n    } @else if (stateIconPath() && !trailingIconPath() && !trailingAddon()) {\n      <span\n        class=\"flex shrink-0 items-center pr-3\"\n        [ngClass]=\"stateIconColorClass()\"\n        aria-hidden=\"true\"\n      >\n        <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"stateIconPath()\" />\n        </svg>\n      </span>\n\n    <!-- Custom trailing icon -->\n    } @else if (trailingIconPath() && !trailingAddon()) {\n      <span\n        class=\"flex shrink-0 items-center text-gray-500 dark:text-gray-400\"\n        [ngClass]=\"iconPadClass()\"\n        aria-hidden=\"true\"\n      >\n        <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"trailingIconPath()\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Trailing text addon (e.g. \".com\", \"USD\") -->\n    @if (trailingAddon() && !trailingIconPath()) {\n      <span [ngClass]=\"trailingAddonClasses()\">{{ trailingAddon() }}</span>\n    }\n\n  </div>\n\n  <!-- \u2500\u2500 Below-input row: hint / error / counter \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (showHint() || showError() || showSuccess() || showCounter()) {\n    <div class=\"flex items-start justify-between gap-2\">\n\n      <!-- Left: hint / error / success message -->\n      <div>\n        @if (showError()) {\n          <p\n            [attr.id]=\"describedById()\"\n            class=\"flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400\"\n            role=\"alert\"\n          >\n            <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n            </svg>\n            {{ errorMessage() }}\n          </p>\n        }\n        @if (showSuccess()) {\n          <p\n            [attr.id]=\"describedById()\"\n            class=\"flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400\"\n          >\n            <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3\"/>\n            </svg>\n            {{ successMessage() }}\n          </p>\n        }\n        @if (showHint()) {\n          <p\n            [attr.id]=\"describedById()\"\n            [ngClass]=\"['text-xs', hintColorClass()]\"\n          >\n            {{ hint() }}\n          </p>\n        }\n      </div>\n\n      <!-- Right: character counter -->\n      @if (showCounter()) {\n        <p\n          class=\"shrink-0 text-xs tabular-nums\"\n          [ngClass]=\"counterOver()\n            ? 'font-semibold text-red-600 dark:text-red-400'\n            : 'text-gray-500 dark:text-gray-400'\"\n          aria-live=\"polite\"\n        >\n          {{ charCount() }}&thinsp;/&thinsp;{{ maxLength() }}\n        </p>\n      }\n\n    </div>\n  }\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvInputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-input-field', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SvInputFieldComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SvInputFieldComponent),
+                            multi: true,
+                        },
+                    ], template: "<!-- Root wrapper -->\n<div [ngClass]=\"rootClasses()\" class=\"flex flex-col gap-1.5\">\n\n  <!-- \u2500\u2500 Label row (hidden for floating variant) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label()) {\n    <div class=\"flex items-baseline justify-between gap-2\">\n      <label\n        [ngClass]=\"['font-medium text-gray-700 dark:text-gray-200', labelSizeClass()]\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n        @if (optionalTag() && !required()) {\n          <span class=\"ml-1.5 font-normal text-gray-500 dark:text-gray-400 text-xs\">(optional)</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Input track \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div [ngClass]=\"trackClasses()\">\n    <!-- Floating label (renders inside track, animates to border on focus/value) -->\n    @if (isFloating() && label()) {\n      <label\n        [ngClass]=\"floatingLabelClasses()\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n    <!-- Leading icon -->\n    @if (leadingIconPath() && !leadingAddon()) {\n      <span\n        class=\"flex shrink-0 items-center\"\n        [ngClass]=\"[iconPadClass(), 'text-gray-500 dark:text-gray-400']\"\n        aria-hidden=\"true\"\n      >\n        <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"leadingIconPath()\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Leading text addon (e.g. \"https://\") -->\n    @if (leadingAddon() && !leadingIconPath()) {\n      <span [ngClass]=\"leadingAddonClasses()\">{{ leadingAddon() }}</span>\n    }\n\n    <!-- \u2500\u2500 Native <select> \u2500\u2500 -->\n    @if (isSelect()) {\n      <select\n        #inputEl\n        [ngClass]=\"nativeInputClasses()\"\n        [attr.id]=\"resolvedId()\"\n        [attr.name]=\"inputName() || null\"\n        [disabled]=\"resolvedDisabled()\"\n        [attr.autofocus]=\"autofocus() ? '' : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"resolvedState() === 'error' || null\"\n        [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n        [value]=\"value()\"\n        (change)=\"onNativeChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      >\n        @if (placeholder()) {\n          <option value=\"\" disabled [selected]=\"!value()\">{{ isFloating() && !labelIsFloated() ? '' : placeholder() }}</option>\n        }\n        @for (opt of options(); track opt.value) {\n          <option\n            [value]=\"opt.value\"\n            [disabled]=\"opt.disabled ?? false\"\n            [selected]=\"value() === opt.value\"\n          >{{ opt.label }}</option>\n        }\n      </select>\n\n    <!-- \u2500\u2500 Native <textarea> \u2500\u2500 -->\n    } @else if (multiline()) {\n      <textarea\n        #inputEl\n        [ngClass]=\"nativeInputClasses()\"\n        [attr.id]=\"resolvedId()\"\n        [attr.name]=\"inputName() || null\"\n        [placeholder]=\"isFloating() && !labelIsFloated() ? ' ' : placeholder()\"\n        [disabled]=\"resolvedDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.maxlength]=\"maxLength() > 0 ? maxLength() : null\"\n        [attr.minlength]=\"minLength() > 0 ? minLength() : null\"\n        [attr.spellcheck]=\"spellcheck()\"\n        [attr.autofocus]=\"autofocus() ? '' : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"resolvedState() === 'error' || null\"\n        [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n        [value]=\"value()\"\n        (input)=\"onNativeChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n\n    <!-- \u2500\u2500 Native <input> (default) \u2500\u2500 -->\n    } @else {\n      <input\n        #inputEl\n        [ngClass]=\"nativeInputClasses()\"\n        [type]=\"resolvedType()\"\n        [attr.id]=\"resolvedId()\"\n        [attr.name]=\"inputName() || null\"\n        [placeholder]=\"isFloating() && !labelIsFloated() ? ' ' : placeholder()\"\n        [disabled]=\"resolvedDisabled()\"\n        [readOnly]=\"readonly()\"\n        [attr.maxlength]=\"maxLength() > 0 ? maxLength() : null\"\n        [attr.minlength]=\"minLength() > 0 ? minLength() : null\"\n        [attr.pattern]=\"pattern() || null\"\n        [attr.min]=\"min()\"\n        [attr.max]=\"max()\"\n        [attr.step]=\"step()\"\n        [attr.inputmode]=\"inputMode() || null\"\n        [attr.spellcheck]=\"spellcheck()\"\n        [attr.autofocus]=\"autofocus() ? '' : null\"\n        [attr.autocomplete]=\"resolvedAutocomplete()\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"resolvedState() === 'error' || null\"\n        [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n        [value]=\"value()\"\n        (input)=\"onNativeChange($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    }\n\n    <!-- Loading spinner -->\n    @if (loading()) {\n      <span class=\"flex shrink-0 items-center pr-3 text-gray-400\" aria-hidden=\"true\">\n        <svg [ngClass]=\"iconClass()\" class=\"animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\"\n                  stroke=\"currentColor\" stroke-width=\"4\"/>\n          <path class=\"opacity-75\" fill=\"currentColor\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n        </svg>\n      </span>\n\n    <!-- Password eye toggle -->\n    } @else if (isPassword() && !loading()) {\n      <button\n        type=\"button\"\n        class=\"flex shrink-0 items-center pr-3 text-gray-400 hover:text-gray-600\n               dark:hover:text-gray-300 focus:outline-none focus-visible:ring-2\n               focus-visible:ring-blue-400 rounded\"\n        (click)=\"togglePassword()\"\n        [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"showPassword()\"\n        [attr.aria-controls]=\"resolvedId()\"\n      >\n        @if (showPassword()) {\n          <!-- Eye-off -->\n          <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22\"/>\n          </svg>\n        } @else {\n          <!-- Eye -->\n          <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n            <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n          </svg>\n        }\n      </button>\n\n    <!-- State icon (error / success / warning) \u2014 only when no trailing icon/addon -->\n    } @else if (stateIconPath() && !trailingIconPath() && !trailingAddon()) {\n      <span\n        class=\"flex shrink-0 items-center pr-3\"\n        [ngClass]=\"stateIconColorClass()\"\n        aria-hidden=\"true\"\n      >\n        <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"stateIconPath()\" />\n        </svg>\n      </span>\n\n    <!-- Custom trailing icon -->\n    } @else if (trailingIconPath() && !trailingAddon()) {\n      <span\n        class=\"flex shrink-0 items-center text-gray-500 dark:text-gray-400\"\n        [ngClass]=\"iconPadClass()\"\n        aria-hidden=\"true\"\n      >\n        <svg [ngClass]=\"iconClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path [attr.d]=\"trailingIconPath()\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Trailing text addon (e.g. \".com\", \"USD\") -->\n    @if (trailingAddon() && !trailingIconPath()) {\n      <span [ngClass]=\"trailingAddonClasses()\">{{ trailingAddon() }}</span>\n    }\n\n  </div>\n\n  <!-- \u2500\u2500 Below-input row: hint / error / counter \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (showHint() || showError() || showSuccess() || showCounter()) {\n    <div class=\"flex items-start justify-between gap-2\">\n\n      <!-- Left: hint / error / success message -->\n      <div>\n        @if (showError()) {\n          <p\n            [attr.id]=\"describedById()\"\n            class=\"flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400\"\n            role=\"alert\"\n          >\n            <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n            </svg>\n            {{ errorMessage() }}\n          </p>\n        }\n        @if (showSuccess()) {\n          <p\n            [attr.id]=\"describedById()\"\n            class=\"flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400\"\n          >\n            <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3\"/>\n            </svg>\n            {{ successMessage() }}\n          </p>\n        }\n        @if (showHint()) {\n          <p\n            [attr.id]=\"describedById()\"\n            [ngClass]=\"['text-xs', hintColorClass()]\"\n          >\n            {{ hint() }}\n          </p>\n        }\n      </div>\n\n      <!-- Right: character counter -->\n      @if (showCounter()) {\n        <p\n          class=\"shrink-0 text-xs tabular-nums\"\n          [ngClass]=\"counterOver()\n            ? 'font-semibold text-red-600 dark:text-red-400'\n            : 'text-gray-500 dark:text-gray-400'\"\n          aria-live=\"polite\"\n        >\n          {{ charCount() }}&thinsp;/&thinsp;{{ maxLength() }}\n        </p>\n      }\n\n    </div>\n  }\n\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optionalTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalTag", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], successMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "successMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], leadingIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconPath", required: false }] }], trailingIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIconPath", required: false }] }], leadingAddon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingAddon", required: false }] }], trailingAddon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAddon", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputName: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputName", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], spellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "spellcheck", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], submitted: [{ type: i0.Output, args: ["submitted"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const MONTH_NAMES = [
+    'January', 'February', 'March', 'April',
+    'May', 'June', 'July', 'August',
+    'September', 'October', 'November', 'December',
+];
+/** Panel width (px) — matches the 17.5 rem CSS width in the template. */
+const PANEL_W = 280;
+/** Conservative day-view panel height for flip calculation (px). */
+const PANEL_H = 390;
+/** Gap between trigger edge and panel (px). */
+const GAP = 6;
+/**
+ * SvDatePickerComponent — premium custom calendar date picker.
+ *
+ * The popover panel is rendered directly into `document.body` via a lightweight
+ * Angular embedded-view portal so it is completely outside any parent
+ * `overflow:hidden`, `overflow:auto`, or CSS `transform` containment.
+ * A capture-phase, RAF-throttled scroll listener keeps the panel anchored to
+ * the trigger — including when a nested scrollable ancestor scrolls, not just
+ * the window — and the horizontal position is clamped so it never renders
+ * partially outside the viewport. Resize closes the panel instead of
+ * repositioning it with stale coordinates.
+ *
+ * @example
+ * ```html
+ * <sv-date-picker label="Start Date" [(value)]="dateStr" minDate="2024-01-01" />
+ * ```
+ */
+class SvDatePickerComponent {
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    /** Two-way bindable YYYY-MM-DD date string. */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Label rendered above the trigger. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when no date is selected. */
+    placeholder = input('Select date', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Minimum selectable date (YYYY-MM-DD). Cells before it are disabled. */
+    minDate = input('', ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Maximum selectable date (YYYY-MM-DD). Cells after it are disabled. */
+    maxDate = input('', ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Disables the trigger and prevents the popover from opening. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Shows a red asterisk in the label. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Explicit accessible name for the trigger (falls back to `label`). */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    // Note: the `value` model already emits `valueChange` for `[(value)]`.
+    /** Emitted when the calendar popover opens. */
+    opened = output();
+    /** Emitted when the calendar popover closes. */
+    closed = output();
+    // ─── ControlValueAccessor ───────────────────────────────────────────────────
+    // Lets the picker bind to reactive forms (`formControlName` / `[formControl]`)
+    // and template-driven forms (`[(ngModel)]`) in addition to `[(value)]`.
+    _onChange = () => { };
+    _onTouched = () => { };
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    /** Merged disabled — the `[disabled]` input OR a disabled parent FormControl. */
+    resolvedDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    writeValue(v) { this.value.set(v ?? ''); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+        if (isDisabled && this.isOpen())
+            this.close();
+    }
+    /** Sets the value from a user gesture and notifies the form (change + touched). */
+    commitValue(v) {
+        this.value.set(v);
+        this._onChange(v);
+        this._onTouched();
+    }
+    // ─── View refs ────────────────────────────────────────────────────────────
+    /** The ng-template that holds the calendar panel markup. */
+    panelTpl;
+    // ─── Internal state ───────────────────────────────────────────────────────
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    viewYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
+    viewMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    viewMode = signal('days', ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+    openAbove = signal(false, ...(ngDevMode ? [{ debugName: "openAbove" }] : /* istanbul ignore next */ []));
+    alignRight = signal(false, ...(ngDevMode ? [{ debugName: "alignRight" }] : /* istanbul ignore next */ []));
+    /** YYYY-MM-DD of the keyboard-focused day cell (roving tabindex). */
+    activeKey = signal('', ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Inline style object applied to the panel.
+     * Uses position:fixed with exact viewport coords so the panel
+     * escapes all parent overflow and transform containment.
+     */
+    panelStyle = signal({}, ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    // ─── Portal state ─────────────────────────────────────────────────────────
+    /** Container div appended to document.body while the panel is open. */
+    portalEl = null;
+    /** Embedded view holding the panel template nodes. */
+    portalView = null;
+    /**
+     * Capture-phase scroll listener — fires for ANY scrollable ancestor
+     * (not just the window), RAF-throttled so it never runs more than once
+     * per frame. Repositions the panel to keep it anchored to the trigger
+     * instead of drifting or closing (see dropdown-instruction.md §6).
+     */
+    _rafId = null;
+    _scrollHandler = () => {
+        if (!this.isOpen())
+            return;
+        if (this._rafId !== null)
+            return;
+        this._rafId = requestAnimationFrame(() => {
+            this._rafId = null;
+            if (this.isOpen()) {
+                this._calcPos();
+                this.portalView?.detectChanges();
+            }
+        });
+    };
+    // ─── Static data ──────────────────────────────────────────────────────────
+    weekDays = WEEKDAYS;
+    monthNames = MONTH_NAMES;
+    yearRange = computed(() => {
+        const base = Math.floor(this.viewYear() / 10) * 10 - 5;
+        return Array.from({ length: 20 }, (_, i) => base + i);
+    }, ...(ngDevMode ? [{ debugName: "yearRange" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const v = this.value();
+        if (!v)
+            return '';
+        return new Date(v + 'T00:00:00').toLocaleDateString('en-US', {
+            month: 'short', day: 'numeric', year: 'numeric',
+        });
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    monthName = computed(() => MONTH_NAMES[this.viewMonth()], ...(ngDevMode ? [{ debugName: "monthName" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the trigger — combines the field name with the selection. */
+    triggerAriaLabel = computed(() => {
+        const name = this.ariaLabel() || this.label();
+        if (!name)
+            return null;
+        return this.displayValue() ? `${name}: ${this.displayValue()}` : `${name}: ${this.placeholder()}`;
+    }, ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    calendarDays = computed(() => {
+        const year = this.viewYear();
+        const month = this.viewMonth();
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const sel = this.value();
+        const selTs = sel ? new Date(sel + 'T00:00:00').getTime() : NaN;
+        const firstOfMonth = new Date(year, month, 1);
+        const mondayOffset = (firstOfMonth.getDay() + 6) % 7;
+        const cursor = new Date(firstOfMonth);
+        cursor.setDate(1 - mondayOffset);
+        const days = [];
+        for (let i = 0; i < 42; i++) {
+            const ts = cursor.getTime();
+            days.push({
+                date: new Date(cursor),
+                label: cursor.getDate(),
+                isCurrentMonth: cursor.getMonth() === month,
+                isToday: ts === today.getTime(),
+                isSelected: ts === selTs,
+                isDisabled: this.isDateDisabled(cursor),
+                key: this.toDateStr(cursor),
+            });
+            cursor.setDate(cursor.getDate() + 1);
+        }
+        return days;
+    }, ...(ngDevMode ? [{ debugName: "calendarDays" }] : /* istanbul ignore next */ []));
+    /** The 42 calendar days grouped into 6 weeks for `role="row"` grid semantics. */
+    calendarWeeks = computed(() => {
+        const days = this.calendarDays();
+        const weeks = [];
+        for (let i = 0; i < days.length; i += 7) {
+            weeks.push(days.slice(i, i + 7));
+        }
+        return weeks;
+    }, ...(ngDevMode ? [{ debugName: "calendarWeeks" }] : /* istanbul ignore next */ []));
+    // ─── DI ───────────────────────────────────────────────────────────────────
+    el = inject(ElementRef);
+    appRef = inject(ApplicationRef);
+    // ─── Lifecycle ────────────────────────────────────────────────────────────
+    ngOnInit() {
+        // Capture phase catches scroll from any scrollable ancestor, not just window.
+        window.addEventListener('scroll', this._scrollHandler, { passive: true, capture: true });
+    }
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this._scrollHandler, true);
+        if (this._rafId !== null)
+            cancelAnimationFrame(this._rafId);
+        this.destroyPortal();
+    }
+    // ─── Global listeners ─────────────────────────────────────────────────────
+    onDocumentClick(event) {
+        if (!this.isOpen())
+            return;
+        const t = event.target;
+        // Keep open if click is inside the trigger OR inside the portal panel
+        if (this.el.nativeElement.contains(t))
+            return;
+        if (this.portalEl?.contains(t))
+            return;
+        this.close();
+    }
+    onEscape() {
+        if (this.isOpen())
+            this.close();
+    }
+    onResize() {
+        // Viewport resize invalidates the layout — close rather than reposition
+        // with now-stale coordinates (dropdown-instruction.md §8).
+        if (this.isOpen())
+            this.close();
+    }
+    // ─── Public API ───────────────────────────────────────────────────────────
+    toggle() {
+        if (this.resolvedDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+            return;
+        }
+        // 1. Sync view to selected date / today
+        const sel = this.value();
+        const ref = sel ? new Date(sel + 'T00:00:00') : new Date();
+        this.viewYear.set(ref.getFullYear());
+        this.viewMonth.set(ref.getMonth());
+        this.viewMode.set('days');
+        this.activeKey.set(this.toDateStr(ref));
+        // 2. Calculate fixed-position coordinates from the trigger's viewport rect.
+        this._calcPos();
+        // 3. Mount the panel into document.body via a lightweight portal.
+        //    This escapes ALL parent overflow:hidden and CSS transform contexts.
+        if (!this.panelTpl)
+            return;
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = 'sv-dp-portal';
+        document.body.appendChild(this.portalEl);
+        this.portalView = this.panelTpl.createEmbeddedView({});
+        this.appRef.attachView(this.portalView);
+        this.portalView.rootNodes.forEach((n) => this.portalEl.appendChild(n));
+        this.portalView.detectChanges();
+        this.isOpen.set(true);
+        this.opened.emit();
+        // Move focus into the calendar grid for keyboard users.
+        this.focusActiveDayDeferred();
+    }
+    close(returnFocus = false) {
+        if (!this.isOpen())
+            return;
+        this.destroyPortal();
+        this.isOpen.set(false);
+        this.viewMode.set('days');
+        this._onTouched();
+        this.closed.emit();
+        if (returnFocus) {
+            this.el.nativeElement
+                .querySelector('.sv-dp-trigger')?.focus();
+        }
+    }
+    selectDay(day) {
+        if (day.isDisabled)
+            return;
+        this.commitValue(day.key);
+        this.close(true);
+    }
+    // ─── Keyboard navigation (day grid) ─────────────────────────────────────────
+    /** Roving tabindex — only the active day cell is in the tab order. */
+    dayTabIndex(day) {
+        return day.key === this.activeKey() ? 0 : -1;
+    }
+    /** Arrow / Home / End / PageUp / PageDown navigation + Enter/Space to select. */
+    onDayKeydown(event) {
+        if (this.viewMode() !== 'days')
+            return;
+        const base = this.activeKey() || this.value() || this.toDateStr(new Date());
+        const d = new Date(base + 'T00:00:00');
+        switch (event.key) {
+            case 'ArrowLeft':
+                d.setDate(d.getDate() - 1);
+                break;
+            case 'ArrowRight':
+                d.setDate(d.getDate() + 1);
+                break;
+            case 'ArrowUp':
+                d.setDate(d.getDate() - 7);
+                break;
+            case 'ArrowDown':
+                d.setDate(d.getDate() + 7);
+                break;
+            case 'Home':
+                d.setDate(d.getDate() - ((d.getDay() + 6) % 7));
+                break; // Monday
+            case 'End':
+                d.setDate(d.getDate() + (6 - ((d.getDay() + 6) % 7)));
+                break; // Sunday
+            case 'PageUp':
+                event.shiftKey ? d.setFullYear(d.getFullYear() - 1) : d.setMonth(d.getMonth() - 1);
+                break;
+            case 'PageDown':
+                event.shiftKey ? d.setFullYear(d.getFullYear() + 1) : d.setMonth(d.getMonth() + 1);
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const target = this.calendarDays().find(c => c.key === this.activeKey());
+                if (target)
+                    this.selectDay(target);
+                return;
+            }
+            default: return;
+        }
+        event.preventDefault();
+        this.viewYear.set(d.getFullYear());
+        this.viewMonth.set(d.getMonth());
+        this.activeKey.set(this.toDateStr(d));
+        this.portalView?.detectChanges();
+        this.focusActiveDayDeferred();
+    }
+    focusActiveDayDeferred() {
+        setTimeout(() => {
+            const btn = this.portalEl?.querySelector(`[data-day="${this.activeKey()}"]`);
+            btn?.focus();
+        });
+    }
+    selectMonth(monthIndex) {
+        this.viewMonth.set(monthIndex);
+        this.viewMode.set('days');
+    }
+    selectYear(year) {
+        this.viewYear.set(year);
+        this.viewMode.set('months');
+    }
+    prevPeriod() {
+        if (this.viewMode() === 'years') {
+            this.viewYear.update(y => y - 20);
+            return;
+        }
+        if (this.viewMode() === 'months') {
+            this.viewYear.update(y => y - 1);
+            return;
+        }
+        let m = this.viewMonth() - 1, y = this.viewYear();
+        if (m < 0) {
+            m = 11;
+            y--;
+        }
+        this.viewMonth.set(m);
+        this.viewYear.set(y);
+    }
+    nextPeriod() {
+        if (this.viewMode() === 'years') {
+            this.viewYear.update(y => y + 20);
+            return;
+        }
+        if (this.viewMode() === 'months') {
+            this.viewYear.update(y => y + 1);
+            return;
+        }
+        let m = this.viewMonth() + 1, y = this.viewYear();
+        if (m > 11) {
+            m = 0;
+            y++;
+        }
+        this.viewMonth.set(m);
+        this.viewYear.set(y);
+    }
+    goToToday() {
+        this.commitValue(this.toDateStr(new Date()));
+        this.close(true);
+    }
+    clearDate() {
+        this.commitValue('');
+        this.close(true);
+    }
+    // ─── Helpers ──────────────────────────────────────────────────────────────
+    toDateStr(d) {
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${day}`;
+    }
+    isDateDisabled(d) {
+        const str = this.toDateStr(d);
+        const min = this.minDate(), max = this.maxDate();
+        return (!!min && str < min) || (!!max && str > max);
+    }
+    isMonthDisabled(idx) {
+        const y = this.viewYear(), min = this.minDate(), max = this.maxDate();
+        if (min && this.toDateStr(new Date(y, idx + 1, 0)) < min)
+            return true;
+        if (max && this.toDateStr(new Date(y, idx, 1)) > max)
+            return true;
+        return false;
+    }
+    isYearDisabled(year) {
+        const min = this.minDate(), max = this.maxDate();
+        if (min && this.toDateStr(new Date(year, 11, 31)) < min)
+            return true;
+        if (max && this.toDateStr(new Date(year, 0, 1)) > max)
+            return true;
+        return false;
+    }
+    isViewMonthSelected(idx) {
+        const v = this.value();
+        if (!v)
+            return false;
+        const d = new Date(v + 'T00:00:00');
+        return d.getFullYear() === this.viewYear() && d.getMonth() === idx;
+    }
+    isViewYearSelected(year) {
+        const v = this.value();
+        if (!v)
+            return false;
+        return new Date(v + 'T00:00:00').getFullYear() === year;
+    }
+    headerLabel() {
+        if (this.viewMode() === 'months')
+            return String(this.viewYear());
+        if (this.viewMode() === 'years') {
+            const r = this.yearRange();
+            return `${r[0]} – ${r[r.length - 1]}`;
+        }
+        return `${this.monthName()} ${this.viewYear()}`;
+    }
+    // ─── Position calculation ───────────────────────────────────────────────────
+    /**
+     * Computes fixed-position coordinates from the trigger's current viewport
+     * rect. position:fixed is viewport-relative — getBoundingClientRect() gives
+     * exactly that, regardless of scroll position. Called on open and again on
+     * every scroll (see _scrollHandler) so the panel tracks the trigger instead
+     * of drifting away from it as the page (or a nested container) scrolls.
+     */
+    _calcPos() {
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        const above = spaceBelow < PANEL_H && spaceAbove > spaceBelow;
+        const right = rect.left + PANEL_W > vw;
+        this.openAbove.set(above);
+        this.alignRight.set(right);
+        // Unify left/right alignment into a single clamped `left` value so the
+        // panel can never render partially outside the viewport horizontally.
+        const desiredLeft = right ? rect.right - PANEL_W : rect.left;
+        const maxLeft = Math.max(GAP, vw - PANEL_W - GAP);
+        const clampedLeft = Math.min(Math.max(desiredLeft, GAP), maxLeft);
+        const style = {
+            position: 'fixed',
+            zIndex: '9999',
+            width: `${PANEL_W}px`,
+            left: `${clampedLeft}px`,
+        };
+        style[above ? 'bottom' : 'top'] = above
+            ? `${vh - rect.top + GAP}px`
+            : `${rect.bottom + GAP}px`;
+        this.panelStyle.set(style);
+    }
+    // ─── Portal lifecycle ──────────────────────────────────────────────────────
+    destroyPortal() {
+        if (this.portalView) {
+            this.appRef.detachView(this.portalView);
+            this.portalView.destroy();
+            this.portalView = null;
+        }
+        this.portalEl?.remove();
+        this.portalEl = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvDatePickerComponent, isStandalone: true, selector: "sv-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape()", "window:resize": "onResize()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SvDatePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SvDatePickerComponent \u2014 premium custom calendar date picker\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<div class=\"sv-dp relative w-full\">\n\n  <!-- \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label()) {\n    <label class=\"mb-1.5 block text-xs font-semibold text-gray-600 dark:text-gray-400\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ml-0.5 text-rose-500\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- \u2500\u2500 Trigger Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"sv-dp-trigger flex w-full items-center gap-2.5 rounded-md border border-gray-200 bg-white px-3.5 py-2.5 text-left text-sm shadow-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/70 dark:border-gray-700 dark:bg-gray-900\"\n      [class.opacity-50]=\"resolvedDisabled()\"\n      [class.cursor-not-allowed]=\"resolvedDisabled()\"\n      [class.hover:border-primary-400]=\"!resolvedDisabled()\"\n      [class.hover:shadow-md]=\"!resolvedDisabled()\"\n      [class.border-primary-400]=\"isOpen()\"\n      [class.ring-2]=\"isOpen()\"\n      [class.ring-primary-400\\/30]=\"isOpen()\"\n      [disabled]=\"resolvedDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"triggerAriaLabel()\"\n      aria-haspopup=\"dialog\"\n      (click)=\"toggle()\">\n\n      <!-- Calendar icon -->\n      <svg class=\"h-4 w-4 shrink-0 text-gray-400 transition-colors duration-150 dark:text-gray-300\"\n        [class.text-primary-500]=\"isOpen()\"\n        [class.dark:text-primary-400]=\"isOpen()\"\n        fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5\"/>\n      </svg>\n\n      <!-- Date display / placeholder -->\n      <span class=\"flex-1 truncate\" [class.pr-6]=\"value() && !resolvedDisabled()\">\n        @if (displayValue()) {\n          <span class=\"font-medium text-gray-800 dark:text-gray-100\">{{ displayValue() }}</span>\n        } @else {\n          <span class=\"text-gray-500 dark:text-gray-400\">{{ placeholder() }}</span>\n        }\n      </span>\n\n      <!-- Chevron indicator -->\n      <svg\n        class=\"h-4 w-4 shrink-0 text-gray-300 transition-transform duration-200 dark:text-gray-500\"\n        [class.rotate-180]=\"isOpen()\"\n        fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m6 9 6 6 6-6\"/>\n      </svg>\n    </button>\n\n    <!-- Clear button \u2014 sibling of the trigger (not nested inside it) -->\n    @if (value() && !resolvedDisabled()) {\n      <button\n        type=\"button\"\n        class=\"absolute right-9 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded-full text-gray-300 transition-colors duration-100 hover:bg-gray-100 hover:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 dark:hover:bg-gray-800 dark:hover:text-gray-400\"\n        aria-label=\"Clear date\"\n        (click)=\"clearDate(); $event.stopPropagation()\">\n        <svg class=\"h-3 w-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n        </svg>\n      </button>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Calendar Popover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Rendered into document.body via a body portal in toggle() so it escapes\n       all parent overflow:hidden / CSS transform containment.\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <ng-template #panelTpl>\n    <div\n      class=\"sv-dp-panel overflow-hidden rounded-2xl border border-gray-100/80 bg-white shadow-[0_24px_64px_-12px_rgba(0,0,0,0.18),0_8px_24px_-8px_rgba(0,0,0,0.08)] dark:border-gray-700/50 dark:bg-gray-900 dark:shadow-[0_24px_64px_-12px_rgba(0,0,0,0.7),0_8px_24px_-8px_rgba(0,0,0,0.5)]\"\n      [class.sv-dp-panel--above]=\"openAbove()\"\n      [class.sv-dp-panel--right]=\"alignRight()\"\n      [style.position]=\"panelStyle()['position']\"\n      [style.zIndex]=\"panelStyle()['zIndex']\"\n      [style.width]=\"panelStyle()['width']\"\n      [style.top]=\"panelStyle()['top']\"\n      [style.bottom]=\"panelStyle()['bottom']\"\n      [style.left]=\"panelStyle()['left']\"\n      [style.right]=\"panelStyle()['right']\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-label=\"Date picker calendar\">\n\n      <!-- \u2500\u2500 Gradient Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"sv-dp-header bg-gradient-to-br from-primary-500 via-primary-600 to-indigo-600 px-4 pt-3.5 pb-3\">\n        <div class=\"flex items-center justify-between gap-2\">\n\n          <!-- Prev button -->\n          <button\n            type=\"button\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg text-white/80 transition-all duration-150 hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\"\n            aria-label=\"Previous\"\n            (click)=\"prevPeriod()\">\n            <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m15 19-7-7 7-7\"/>\n            </svg>\n          </button>\n\n          <!-- Month / Year title \u2014 clicking cycles view mode -->\n          <button\n            type=\"button\"\n            class=\"flex flex-1 items-center justify-center gap-1.5 rounded-lg px-2 py-1 text-sm font-semibold tracking-wide text-white transition-all duration-150 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\"\n            [attr.aria-label]=\"'Switch view, currently ' + headerLabel()\"\n            (click)=\"viewMode.set(viewMode() === 'days' ? 'months' : viewMode() === 'months' ? 'years' : 'days')\">\n            {{ headerLabel() }}\n            <svg class=\"h-3.5 w-3.5 text-white/70\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m6 9 6 6 6-6\"/>\n            </svg>\n          </button>\n\n          <!-- Next button -->\n          <button\n            type=\"button\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg text-white/80 transition-all duration-150 hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\"\n            aria-label=\"Next\"\n            (click)=\"nextPeriod()\">\n            <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 5 7 7-7 7\"/>\n            </svg>\n          </button>\n        </div>\n        @if (displayValue()) {\n          <div class=\"mt-2.5 rounded-xl bg-white/15 py-1.5 text-center text-[13px] font-semibold tracking-wide text-white backdrop-blur-sm\">\n            {{ displayValue() }}\n          </div>\n        }\n      </div>\n\n      <!-- \u2500\u2500 Day View \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (viewMode() === 'days') {\n        <div class=\"sv-dp-body p-3\">\n\n          <!-- Calendar grid -->\n          <div role=\"grid\" [attr.aria-label]=\"monthName() + ' ' + viewYear()\">\n\n            <!-- Weekday headers -->\n            <div role=\"row\" class=\"mb-2 grid grid-cols-7 overflow-hidden rounded-xl bg-gray-50 dark:bg-gray-800/60\">\n              @for (wd of weekDays; track wd) {\n                <div role=\"columnheader\" class=\"py-1.5 text-center text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400\">\n                  {{ wd }}\n                </div>\n              }\n            </div>\n\n            <!-- Day rows -->\n            <div role=\"rowgroup\" class=\"grid grid-cols-7\" (keydown)=\"onDayKeydown($event)\">\n              @for (week of calendarWeeks(); track $index) {\n                <div role=\"row\" class=\"contents\">\n                  @for (day of week; track day.key) {\n                    <div role=\"gridcell\" [attr.aria-selected]=\"day.isSelected\" class=\"flex items-center justify-center p-0.5\">\n                <button\n                  type=\"button\"\n                  [attr.data-day]=\"day.key\"\n                  [attr.tabindex]=\"dayTabIndex(day)\"\n                  class=\"sv-dp-day relative flex h-8 w-8 items-center justify-center rounded-md text-[13px] font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60\"\n                  [ngClass]=\"{\n                    'bg-gradient-to-br from-primary-500 to-indigo-600 text-white shadow-md shadow-primary-500/30 hover:from-primary-400 hover:to-indigo-500 scale-105': day.isSelected,\n                    'text-gray-800 hover:bg-primary-50 hover:text-primary-700 dark:text-gray-200 dark:hover:bg-primary-950/60 dark:hover:text-primary-300': !day.isSelected && !day.isDisabled && day.isCurrentMonth,\n                    'font-semibold text-primary-600 dark:text-primary-400': day.isToday && !day.isSelected,\n                    'text-gray-300 hover:bg-gray-50 dark:text-gray-700 dark:hover:bg-gray-900': !day.isSelected && !day.isDisabled && !day.isCurrentMonth,\n                    'cursor-not-allowed text-gray-200 dark:text-gray-800': day.isDisabled\n                  }\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-label]=\"day.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.label }}\n                  <!-- Today dot -->\n                  @if (day.isToday && !day.isSelected) {\n                    <span class=\"absolute bottom-0.5 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full bg-primary-500 dark:bg-primary-400\"></span>\n                  }\n                </button>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n          </div>\n\n          <!-- Footer actions -->\n          <div class=\"mt-2 flex items-center justify-between border-t border-gray-100 pt-2.5 dark:border-gray-800/80\">\n            <button\n              type=\"button\"\n              class=\"rounded-lg px-2.5 py-1.5 text-xs font-medium text-gray-400 transition-all duration-100 hover:bg-gray-100 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n              (click)=\"clearDate()\">\n              Clear\n            </button>\n            <button\n              type=\"button\"\n              class=\"rounded-lg bg-primary-500 px-3.5 py-1.5 text-xs font-semibold text-white shadow-sm shadow-primary-500/30 transition-all duration-100 hover:bg-primary-600 active:bg-primary-700\"\n              (click)=\"goToToday()\">\n              Today\n            </button>\n          </div>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Month View \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (viewMode() === 'months') {\n        <div class=\"sv-dp-body grid grid-cols-3 gap-1.5 p-4\">\n          @for (month of monthNames; track $index) {\n            <button\n              type=\"button\"\n              class=\"rounded-md px-1 py-2.5 text-center text-[12px] font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60\"\n              [ngClass]=\"{\n                'bg-gradient-to-br from-primary-500 to-indigo-600 text-white shadow-sm shadow-primary-500/25': isViewMonthSelected($index),\n                'bg-primary-50 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300': !isViewMonthSelected($index) && $index === viewMonth() && !isMonthDisabled($index),\n                'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/70': !isViewMonthSelected($index) && $index !== viewMonth() && !isMonthDisabled($index),\n                'cursor-not-allowed text-gray-300 dark:text-gray-700': isMonthDisabled($index)\n              }\"\n              [disabled]=\"isMonthDisabled($index)\"\n              (click)=\"selectMonth($index)\">\n              {{ month.slice(0, 3) }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- \u2500\u2500 Year View \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (viewMode() === 'years') {\n        <div class=\"sv-dp-body grid grid-cols-4 gap-1 p-4\">\n          @for (year of yearRange(); track year) {\n            <button\n              type=\"button\"\n              class=\"rounded-md px-1 py-2.5 text-center text-[12px] font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60\"\n              [ngClass]=\"{\n                'bg-gradient-to-br from-primary-500 to-indigo-600 text-white shadow-sm shadow-primary-500/25': isViewYearSelected(year),\n                'bg-primary-50 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300': !isViewYearSelected(year) && year === viewYear() && !isYearDisabled(year),\n                'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/70': !isViewYearSelected(year) && year !== viewYear() && !isYearDisabled(year),\n                'cursor-not-allowed text-gray-300 dark:text-gray-700': isYearDisabled(year)\n              }\"\n              [disabled]=\"isYearDisabled(year)\"\n              (click)=\"selectYear(year)\">\n              {{ year }}\n            </button>\n          }\n        </div>\n      }\n\n    </div><!-- /sv-dp-panel -->\n  </ng-template>\n\n</div><!-- /sv-dp -->\n", styles: [".sv-dp-panel{animation:dp-pop-in .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}.sv-dp-panel--above{transform-origin:bottom left;animation:dp-pop-in-above .18s cubic-bezier(.22,1,.36,1) both}.sv-dp-panel--right{transform-origin:top right}.sv-dp-panel--above.sv-dp-panel--right{transform-origin:bottom right}@keyframes dp-pop-in{0%{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes dp-pop-in-above{0%{opacity:0;transform:scale(.95) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}.sv-dp-body{animation:dp-fade-slide .15s ease-out both}@keyframes dp-fade-slide{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sv-dp{min-width:0}.sv-dp-trigger:focus-visible{outline:none}.sv-dp-day:not(:disabled):active{transform:scale(.92)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-date-picker', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SvDatePickerComponent),
+                            multi: true,
+                        },
+                    ], template: "<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SvDatePickerComponent \u2014 premium custom calendar date picker\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<div class=\"sv-dp relative w-full\">\n\n  <!-- \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (label()) {\n    <label class=\"mb-1.5 block text-xs font-semibold text-gray-600 dark:text-gray-400\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"ml-0.5 text-rose-500\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- \u2500\u2500 Trigger Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"sv-dp-trigger flex w-full items-center gap-2.5 rounded-md border border-gray-200 bg-white px-3.5 py-2.5 text-left text-sm shadow-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/70 dark:border-gray-700 dark:bg-gray-900\"\n      [class.opacity-50]=\"resolvedDisabled()\"\n      [class.cursor-not-allowed]=\"resolvedDisabled()\"\n      [class.hover:border-primary-400]=\"!resolvedDisabled()\"\n      [class.hover:shadow-md]=\"!resolvedDisabled()\"\n      [class.border-primary-400]=\"isOpen()\"\n      [class.ring-2]=\"isOpen()\"\n      [class.ring-primary-400\\/30]=\"isOpen()\"\n      [disabled]=\"resolvedDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"triggerAriaLabel()\"\n      aria-haspopup=\"dialog\"\n      (click)=\"toggle()\">\n\n      <!-- Calendar icon -->\n      <svg class=\"h-4 w-4 shrink-0 text-gray-400 transition-colors duration-150 dark:text-gray-300\"\n        [class.text-primary-500]=\"isOpen()\"\n        [class.dark:text-primary-400]=\"isOpen()\"\n        fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5\"/>\n      </svg>\n\n      <!-- Date display / placeholder -->\n      <span class=\"flex-1 truncate\" [class.pr-6]=\"value() && !resolvedDisabled()\">\n        @if (displayValue()) {\n          <span class=\"font-medium text-gray-800 dark:text-gray-100\">{{ displayValue() }}</span>\n        } @else {\n          <span class=\"text-gray-500 dark:text-gray-400\">{{ placeholder() }}</span>\n        }\n      </span>\n\n      <!-- Chevron indicator -->\n      <svg\n        class=\"h-4 w-4 shrink-0 text-gray-300 transition-transform duration-200 dark:text-gray-500\"\n        [class.rotate-180]=\"isOpen()\"\n        fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m6 9 6 6 6-6\"/>\n      </svg>\n    </button>\n\n    <!-- Clear button \u2014 sibling of the trigger (not nested inside it) -->\n    @if (value() && !resolvedDisabled()) {\n      <button\n        type=\"button\"\n        class=\"absolute right-9 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded-full text-gray-300 transition-colors duration-100 hover:bg-gray-100 hover:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 dark:hover:bg-gray-800 dark:hover:text-gray-400\"\n        aria-label=\"Clear date\"\n        (click)=\"clearDate(); $event.stopPropagation()\">\n        <svg class=\"h-3 w-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n        </svg>\n      </button>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Calendar Popover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Rendered into document.body via a body portal in toggle() so it escapes\n       all parent overflow:hidden / CSS transform containment.\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <ng-template #panelTpl>\n    <div\n      class=\"sv-dp-panel overflow-hidden rounded-2xl border border-gray-100/80 bg-white shadow-[0_24px_64px_-12px_rgba(0,0,0,0.18),0_8px_24px_-8px_rgba(0,0,0,0.08)] dark:border-gray-700/50 dark:bg-gray-900 dark:shadow-[0_24px_64px_-12px_rgba(0,0,0,0.7),0_8px_24px_-8px_rgba(0,0,0,0.5)]\"\n      [class.sv-dp-panel--above]=\"openAbove()\"\n      [class.sv-dp-panel--right]=\"alignRight()\"\n      [style.position]=\"panelStyle()['position']\"\n      [style.zIndex]=\"panelStyle()['zIndex']\"\n      [style.width]=\"panelStyle()['width']\"\n      [style.top]=\"panelStyle()['top']\"\n      [style.bottom]=\"panelStyle()['bottom']\"\n      [style.left]=\"panelStyle()['left']\"\n      [style.right]=\"panelStyle()['right']\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-label=\"Date picker calendar\">\n\n      <!-- \u2500\u2500 Gradient Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"sv-dp-header bg-gradient-to-br from-primary-500 via-primary-600 to-indigo-600 px-4 pt-3.5 pb-3\">\n        <div class=\"flex items-center justify-between gap-2\">\n\n          <!-- Prev button -->\n          <button\n            type=\"button\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg text-white/80 transition-all duration-150 hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\"\n            aria-label=\"Previous\"\n            (click)=\"prevPeriod()\">\n            <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m15 19-7-7 7-7\"/>\n            </svg>\n          </button>\n\n          <!-- Month / Year title \u2014 clicking cycles view mode -->\n          <button\n            type=\"button\"\n            class=\"flex flex-1 items-center justify-center gap-1.5 rounded-lg px-2 py-1 text-sm font-semibold tracking-wide text-white transition-all duration-150 hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\"\n            [attr.aria-label]=\"'Switch view, currently ' + headerLabel()\"\n            (click)=\"viewMode.set(viewMode() === 'days' ? 'months' : viewMode() === 'months' ? 'years' : 'days')\">\n            {{ headerLabel() }}\n            <svg class=\"h-3.5 w-3.5 text-white/70\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m6 9 6 6 6-6\"/>\n            </svg>\n          </button>\n\n          <!-- Next button -->\n          <button\n            type=\"button\"\n            class=\"flex h-7 w-7 items-center justify-center rounded-lg text-white/80 transition-all duration-150 hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50\"\n            aria-label=\"Next\"\n            (click)=\"nextPeriod()\">\n            <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 5 7 7-7 7\"/>\n            </svg>\n          </button>\n        </div>\n        @if (displayValue()) {\n          <div class=\"mt-2.5 rounded-xl bg-white/15 py-1.5 text-center text-[13px] font-semibold tracking-wide text-white backdrop-blur-sm\">\n            {{ displayValue() }}\n          </div>\n        }\n      </div>\n\n      <!-- \u2500\u2500 Day View \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (viewMode() === 'days') {\n        <div class=\"sv-dp-body p-3\">\n\n          <!-- Calendar grid -->\n          <div role=\"grid\" [attr.aria-label]=\"monthName() + ' ' + viewYear()\">\n\n            <!-- Weekday headers -->\n            <div role=\"row\" class=\"mb-2 grid grid-cols-7 overflow-hidden rounded-xl bg-gray-50 dark:bg-gray-800/60\">\n              @for (wd of weekDays; track wd) {\n                <div role=\"columnheader\" class=\"py-1.5 text-center text-[10px] font-bold uppercase tracking-widest text-gray-500 dark:text-gray-400\">\n                  {{ wd }}\n                </div>\n              }\n            </div>\n\n            <!-- Day rows -->\n            <div role=\"rowgroup\" class=\"grid grid-cols-7\" (keydown)=\"onDayKeydown($event)\">\n              @for (week of calendarWeeks(); track $index) {\n                <div role=\"row\" class=\"contents\">\n                  @for (day of week; track day.key) {\n                    <div role=\"gridcell\" [attr.aria-selected]=\"day.isSelected\" class=\"flex items-center justify-center p-0.5\">\n                <button\n                  type=\"button\"\n                  [attr.data-day]=\"day.key\"\n                  [attr.tabindex]=\"dayTabIndex(day)\"\n                  class=\"sv-dp-day relative flex h-8 w-8 items-center justify-center rounded-md text-[13px] font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60\"\n                  [ngClass]=\"{\n                    'bg-gradient-to-br from-primary-500 to-indigo-600 text-white shadow-md shadow-primary-500/30 hover:from-primary-400 hover:to-indigo-500 scale-105': day.isSelected,\n                    'text-gray-800 hover:bg-primary-50 hover:text-primary-700 dark:text-gray-200 dark:hover:bg-primary-950/60 dark:hover:text-primary-300': !day.isSelected && !day.isDisabled && day.isCurrentMonth,\n                    'font-semibold text-primary-600 dark:text-primary-400': day.isToday && !day.isSelected,\n                    'text-gray-300 hover:bg-gray-50 dark:text-gray-700 dark:hover:bg-gray-900': !day.isSelected && !day.isDisabled && !day.isCurrentMonth,\n                    'cursor-not-allowed text-gray-200 dark:text-gray-800': day.isDisabled\n                  }\"\n                  [disabled]=\"day.isDisabled\"\n                  [attr.aria-label]=\"day.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })\"\n                  [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                  (click)=\"selectDay(day)\">\n                  {{ day.label }}\n                  <!-- Today dot -->\n                  @if (day.isToday && !day.isSelected) {\n                    <span class=\"absolute bottom-0.5 left-1/2 h-1.5 w-1.5 -translate-x-1/2 rounded-full bg-primary-500 dark:bg-primary-400\"></span>\n                  }\n                </button>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n          </div>\n\n          <!-- Footer actions -->\n          <div class=\"mt-2 flex items-center justify-between border-t border-gray-100 pt-2.5 dark:border-gray-800/80\">\n            <button\n              type=\"button\"\n              class=\"rounded-lg px-2.5 py-1.5 text-xs font-medium text-gray-400 transition-all duration-100 hover:bg-gray-100 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300\"\n              (click)=\"clearDate()\">\n              Clear\n            </button>\n            <button\n              type=\"button\"\n              class=\"rounded-lg bg-primary-500 px-3.5 py-1.5 text-xs font-semibold text-white shadow-sm shadow-primary-500/30 transition-all duration-100 hover:bg-primary-600 active:bg-primary-700\"\n              (click)=\"goToToday()\">\n              Today\n            </button>\n          </div>\n        </div>\n      }\n\n      <!-- \u2500\u2500 Month View \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (viewMode() === 'months') {\n        <div class=\"sv-dp-body grid grid-cols-3 gap-1.5 p-4\">\n          @for (month of monthNames; track $index) {\n            <button\n              type=\"button\"\n              class=\"rounded-md px-1 py-2.5 text-center text-[12px] font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60\"\n              [ngClass]=\"{\n                'bg-gradient-to-br from-primary-500 to-indigo-600 text-white shadow-sm shadow-primary-500/25': isViewMonthSelected($index),\n                'bg-primary-50 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300': !isViewMonthSelected($index) && $index === viewMonth() && !isMonthDisabled($index),\n                'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/70': !isViewMonthSelected($index) && $index !== viewMonth() && !isMonthDisabled($index),\n                'cursor-not-allowed text-gray-300 dark:text-gray-700': isMonthDisabled($index)\n              }\"\n              [disabled]=\"isMonthDisabled($index)\"\n              (click)=\"selectMonth($index)\">\n              {{ month.slice(0, 3) }}\n            </button>\n          }\n        </div>\n      }\n\n      <!-- \u2500\u2500 Year View \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (viewMode() === 'years') {\n        <div class=\"sv-dp-body grid grid-cols-4 gap-1 p-4\">\n          @for (year of yearRange(); track year) {\n            <button\n              type=\"button\"\n              class=\"rounded-md px-1 py-2.5 text-center text-[12px] font-medium transition-all duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/60\"\n              [ngClass]=\"{\n                'bg-gradient-to-br from-primary-500 to-indigo-600 text-white shadow-sm shadow-primary-500/25': isViewYearSelected(year),\n                'bg-primary-50 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300': !isViewYearSelected(year) && year === viewYear() && !isYearDisabled(year),\n                'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/70': !isViewYearSelected(year) && year !== viewYear() && !isYearDisabled(year),\n                'cursor-not-allowed text-gray-300 dark:text-gray-700': isYearDisabled(year)\n              }\"\n              [disabled]=\"isYearDisabled(year)\"\n              (click)=\"selectYear(year)\">\n              {{ year }}\n            </button>\n          }\n        </div>\n      }\n\n    </div><!-- /sv-dp-panel -->\n  </ng-template>\n\n</div><!-- /sv-dp -->\n", styles: [".sv-dp-panel{animation:dp-pop-in .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}.sv-dp-panel--above{transform-origin:bottom left;animation:dp-pop-in-above .18s cubic-bezier(.22,1,.36,1) both}.sv-dp-panel--right{transform-origin:top right}.sv-dp-panel--above.sv-dp-panel--right{transform-origin:bottom right}@keyframes dp-pop-in{0%{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes dp-pop-in-above{0%{opacity:0;transform:scale(.95) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}.sv-dp-body{animation:dp-fade-slide .15s ease-out both}@keyframes dp-fade-slide{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sv-dp{min-width:0}.sv-dp-trigger:focus-visible{outline:none}.sv-dp-day:not(:disabled):active{transform:scale(.92)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], panelTpl: [{
+                type: ViewChild,
+                args: ['panelTpl', { read: TemplateRef }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvDatePickerComponent, SvInputFieldComponent };
+//# sourceMappingURL=styloviz-input-field.mjs.map