@frame-kit/ui-ng 0.0.1

package/fesm2022/frame-kit-ui-ng-forms.mjs

@@ -0,0 +1,3632 @@
+import * as i0 from '@angular/core';
+import { input, computed, HostBinding, ChangeDetectionStrategy, Component, InjectionToken, signal, output, Directive, contentChild, inject, ChangeDetectorRef, effect, Injectable, TemplateRef, viewChild, forwardRef, DestroyRef, ViewContainerRef, ElementRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, FormControl, FormGroup, FormArray, NgControl, ReactiveFormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { map, distinctUntilChanged } from 'rxjs';
+import { IconComponent } from '@frame-kit/ui-ng/core/icon';
+import { LinkComponent } from '@frame-kit/ui-ng/core/link';
+import { NgTemplateOutlet } from '@angular/common';
+import { TextComponent } from '@frame-kit/ui-ng/core/text';
+
+let nextErrorId = 0;
+class ErrorComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Stable element ID wired to the field's aria-describedby. */
+    id = input(`fk-error-${nextErrorId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ['fk-error', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostRole() {
+        return 'alert';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ErrorComponent, isStandalone: true, selector: "fk-error", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.hostRole" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-family:var( --fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\" );font-size:var( --fk-form-error-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-form-error-color, var(--fk-color-danger, #e02424))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-error', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:block;font-family:var( --fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\" );font-size:var( --fk-form-error-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-form-error-color, var(--fk-color-danger, #e02424))}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+class FieldGroupComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Optional group label rendered as a fieldset legend. */
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Layout direction for child fields. */
+    layout = input('stack', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-field-group',
+        this.layout() === 'inline' ? 'fk-field-group--inline' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FieldGroupComponent, isStandalone: true, selector: "fk-field-group", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<fieldset class=\"fk-field-group__fieldset\">\n  @if (label()) {\n    <legend class=\"fk-field-group__legend\">{{ label() }}</legend>\n  }\n  <div class=\"fk-field-group__content\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [":host{display:block}.fk-field-group__fieldset{margin:0;padding:0;border:none}.fk-field-group__legend{font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-form-label-font-size, var(--fk-typography-label-font-size, .8125rem));font-weight:var(--fk-form-label-font-weight, var(--fk-typography-label-font-weight, 600));line-height:var(--fk-form-label-line-height, var(--fk-typography-label-line-height, 1.25));color:var(--fk-form-label-color, var(--fk-color-text-strong, #0b1420));padding:0;margin-bottom:var(--fk-form-label-gap, var(--fk-rhythm-2, .5rem))}.fk-field-group__content{display:flex;flex-direction:column;row-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}:host(.fk-field-group--inline) .fk-field-group__content{flex-direction:row;flex-wrap:wrap;column-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}:host(.fk-field-group--inline) .fk-field-group__content>*{flex:1;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-field-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fieldset class=\"fk-field-group__fieldset\">\n  @if (label()) {\n    <legend class=\"fk-field-group__legend\">{{ label() }}</legend>\n  }\n  <div class=\"fk-field-group__content\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [":host{display:block}.fk-field-group__fieldset{margin:0;padding:0;border:none}.fk-field-group__legend{font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-form-label-font-size, var(--fk-typography-label-font-size, .8125rem));font-weight:var(--fk-form-label-font-weight, var(--fk-typography-label-font-weight, 600));line-height:var(--fk-form-label-line-height, var(--fk-typography-label-line-height, 1.25));color:var(--fk-form-label-color, var(--fk-color-text-strong, #0b1420));padding:0;margin-bottom:var(--fk-form-label-gap, var(--fk-rhythm-2, .5rem))}.fk-field-group__content{display:flex;flex-direction:column;row-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}:host(.fk-field-group--inline) .fk-field-group__content{flex-direction:row;flex-wrap:wrap;column-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}:host(.fk-field-group--inline) .fk-field-group__content>*{flex:1;min-width:0}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Token that child fk-form-field components can inject to read
+ * the form's submitted state.
+ */
+const FORM = new InjectionToken('FORM');
+class FormComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Whether the form has been submitted at least once. */
+    submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    /** Current submission status. */
+    status = signal('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Derived convenience signals. */
+    isSubmitting = computed(() => this.status() === 'submitting', ...(ngDevMode ? [{ debugName: "isSubmitting" }] : /* istanbul ignore next */ []));
+    isSuccess = computed(() => this.status() === 'success', ...(ngDevMode ? [{ debugName: "isSuccess" }] : /* istanbul ignore next */ []));
+    isError = computed(() => this.status() === 'error', ...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
+    isIdle = computed(() => this.status() === 'idle', ...(ngDevMode ? [{ debugName: "isIdle" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-form',
+        this.isSubmitting() ? 'fk-form--submitting' : '',
+        this.isSuccess() ? 'fk-form--success' : '',
+        this.isError() ? 'fk-form--error' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    /** Emits when the form is submitted. */
+    formSubmit = output();
+    onSubmit() {
+        this.submitted.set(true);
+        this.formSubmit.emit();
+    }
+    /**
+     * Sets the form status to 'submitting'.
+     * Call this before starting an async submission.
+     */
+    startSubmitting() {
+        this.status.set('submitting');
+    }
+    /**
+     * Sets the form status to 'success'.
+     * Call this when the submission succeeds.
+     */
+    setSuccess() {
+        this.status.set('success');
+    }
+    /**
+     * Sets the form status to 'error'.
+     * Call this when the submission fails.
+     */
+    setError() {
+        this.status.set('error');
+    }
+    /** Resets the submitted state and status to idle. */
+    reset() {
+        this.submitted.set(false);
+        this.status.set('idle');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FormComponent, isStandalone: true, selector: "fk-form", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, host: { properties: { "class": "this.hostClass" } }, providers: [{ provide: FORM, useExisting: FormComponent }], ngImport: i0, template: "<form class=\"fk-form__native\" (submit)=\"$event.preventDefault(); onSubmit()\">\n  <ng-content />\n</form>\n", styles: [":host{display:block}.fk-form__native{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: FORM, useExisting: FormComponent }], template: "<form class=\"fk-form__native\" (submit)=\"$event.preventDefault(); onSubmit()\">\n  <ng-content />\n</form>\n", styles: [":host{display:block}.fk-form__native{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
+
+const FIELD_CONTROL = new InjectionToken('FIELD_CONTROL');
+
+/**
+ * Default error messages for common Angular validators.
+ *
+ * Keys match the error keys emitted by Angular's built-in Validators
+ * (lowercase: 'required', 'minlength', 'maxlength', 'email', 'min', 'max', 'pattern').
+ *
+ * Templates use `{key}` syntax for interpolation with the validation
+ * error object properties.
+ */
+const DEFAULT_ERROR_MESSAGES = {
+    required: 'This field is required',
+    minlength: 'Must be at least {requiredLength} characters',
+    maxlength: 'Must be no more than {requiredLength} characters',
+    email: 'Please enter a valid email address',
+    min: 'Must be at least {min}',
+    max: 'Must be no more than {max}',
+    pattern: 'Invalid format',
+};
+/**
+ * Injection token for providing custom error messages.
+ *
+ * Provide at the root or module level to override default messages globally,
+ * or at a component level for scoped overrides.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   {
+ *     provide: ERROR_MESSAGES,
+ *     useValue: {
+ *       required: 'Required',
+ *       email: 'Invalid email',
+ *     },
+ *   },
+ * ]
+ * ```
+ */
+const ERROR_MESSAGES = new InjectionToken('ERROR_MESSAGES', {
+    providedIn: 'root',
+    factory: () => DEFAULT_ERROR_MESSAGES,
+});
+/**
+ * Interpolates a message template with values from a validation error object.
+ *
+ * Replaces `{key}` placeholders with corresponding values from the error details.
+ *
+ * @example
+ * ```ts
+ * interpolateMessage('Must be at least {requiredLength} characters', { requiredLength: 3 });
+ * // => 'Must be at least 3 characters'
+ * ```
+ */
+function interpolateMessage(template, errorValue) {
+    return template.replace(/{(\w+)}/g, (_, key) => {
+        const val = errorValue[key];
+        return val !== undefined && val !== null ? String(val) : `{${key}}`;
+    });
+}
+/**
+ * Resolves the first error message for a control's current validation errors.
+ *
+ * Resolution order:
+ * 1. Field-level overrides (`fieldMessages`)
+ * 2. Global messages (injected via `ERROR_MESSAGES`)
+ * 3. Falls back to the error key itself
+ *
+ * @param errors - The validation errors object from `AbstractControl.errors`
+ * @param globalMessages - Global error message map
+ * @param fieldMessages - Per-field error message overrides
+ * @returns The resolved, interpolated error message, or `null` if no errors
+ */
+function resolveErrorMessage(errors, globalMessages, fieldMessages) {
+    if (!errors) {
+        return null;
+    }
+    const errorKey = Object.keys(errors)[0];
+    if (!errorKey) {
+        return null;
+    }
+    const errorValue = errors[errorKey];
+    // Check field-level override first
+    const template = fieldMessages?.[errorKey] ?? globalMessages[errorKey] ?? errorKey;
+    // Interpolate if the error value is an object with properties
+    if (errorValue && typeof errorValue === 'object') {
+        return interpolateMessage(template, errorValue);
+    }
+    return template;
+}
+
+let nextHintId = 0;
+class HintComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Stable element ID wired to the field's aria-describedby. */
+    id = input(`fk-hint-${nextHintId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ['fk-hint', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: HintComponent, isStandalone: true, selector: "fk-hint", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-family:var( --fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\" );font-size:var( --fk-form-hint-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-form-hint-color, var(--fk-color-muted, #8a98a8))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-hint', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:block;font-family:var( --fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\" );font-size:var( --fk-form-hint-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-form-hint-color, var(--fk-color-muted, #8a98a8))}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+let nextLabelId = 0;
+class LabelComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Stable element ID used to reference this label from other elements. */
+    id = input(`fk-label-${nextLabelId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** ID of the form control this label describes; renders as the `for` attribute. */
+    for = input(null, ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ['fk-label', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostId() {
+        return this.id();
+    }
+    get hostFor() {
+        return this.for();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: LabelComponent, isStandalone: true, selector: "fk-label", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.id": "this.hostId", "attr.for": "this.hostFor" } }, ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block;font-family:var( --fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\" );font-size:var( --fk-form-label-font-size, var(--fk-typography-label-font-size, .8125rem) );font-weight:var( --fk-form-label-font-weight, var(--fk-typography-label-font-weight, 600) );line-height:var( --fk-form-label-line-height, var(--fk-typography-label-line-height, 1.25) );color:var(--fk-form-label-color, var(--fk-color-text-strong, #0b1420))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-label', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [":host{display:block;font-family:var( --fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\" );font-size:var( --fk-form-label-font-size, var(--fk-typography-label-font-size, .8125rem) );font-weight:var( --fk-form-label-font-weight, var(--fk-typography-label-font-weight, 600) );line-height:var( --fk-form-label-line-height, var(--fk-typography-label-line-height, 1.25) );color:var(--fk-form-label-color, var(--fk-color-text-strong, #0b1420))}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], hostFor: [{
+                type: HostBinding,
+                args: ['attr.for']
+            }] } });
+
+const FK_PREFIX = new InjectionToken('FK_PREFIX');
+class FkPrefixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkPrefixDirective, isStandalone: true, selector: "[fkPrefix]", providers: [{ provide: FK_PREFIX, useExisting: FkPrefixDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkPrefix]',
+                    standalone: true,
+                    providers: [{ provide: FK_PREFIX, useExisting: FkPrefixDirective }],
+                }]
+        }] });
+
+const FK_SUFFIX = new InjectionToken('FK_SUFFIX');
+class FkSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkSuffixDirective, isStandalone: true, selector: "[fkSuffix]", providers: [{ provide: FK_SUFFIX, useExisting: FkSuffixDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkSuffix]',
+                    standalone: true,
+                    providers: [{ provide: FK_SUFFIX, useExisting: FkSuffixDirective }],
+                }]
+        }] });
+
+let nextFieldId = 0;
+class FormFieldComponent {
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Text label rendered above the field; forwarded to the projected fk-label when present. */
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Condition under which validation errors are displayed. */
+    showErrorsOn = input('touched', ...(ngDevMode ? [{ debugName: "showErrorsOn" }] : /* istanbul ignore next */ []));
+    /** Whether the parent form has been submitted; used when showErrorsOn is "submit". */
+    submitted = input(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    /** Additional aria-describedby ID to append to the field's accessibility wiring. */
+    externalDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "externalDescribedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Fallback AbstractControl for dynamically created fields
+     * where NgControl is not available.
+     */
+    fallbackControl = input(null, ...(ngDevMode ? [{ debugName: "fallbackControl" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-field error message overrides.
+     * Keys are validation error keys (e.g. 'required', 'minlength').
+     * Values are message templates supporting `{key}` interpolation.
+     *
+     * When provided, these take priority over global error messages.
+     * When neither field-level nor global messages are provided for
+     * an error key, the key itself is used as the message.
+     */
+    errorMessages = input(null, ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    // ===== PROJECTED CONTENT =====
+    control = contentChild(FIELD_CONTROL, ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    hintRef = contentChild(HintComponent, ...(ngDevMode ? [{ debugName: "hintRef" }] : /* istanbul ignore next */ []));
+    errorRef = contentChild(ErrorComponent, ...(ngDevMode ? [{ debugName: "errorRef" }] : /* istanbul ignore next */ []));
+    labelRef = contentChild(LabelComponent, ...(ngDevMode ? [{ debugName: "labelRef" }] : /* istanbul ignore next */ []));
+    prefixRef = contentChild(FK_PREFIX, ...(ngDevMode ? [{ debugName: "prefixRef" }] : /* istanbul ignore next */ []));
+    suffixRef = contentChild(FK_SUFFIX, ...(ngDevMode ? [{ debugName: "suffixRef" }] : /* istanbul ignore next */ []));
+    // ===== INJECTED SERVICES =====
+    globalErrorMessages = inject(ERROR_MESSAGES);
+    cdr = inject(ChangeDetectorRef);
+    // ===== HOST CLASS =====
+    get hostClass() {
+        return [
+            'fk-form-field',
+            this.isFocused() ? 'fk-form-field--focused' : '',
+            this.isInvalid() ? 'fk-form-field--invalid' : '',
+            this.isRequired() ? 'fk-form-field--required' : '',
+            this.isDisabled() ? 'fk-form-field--disabled' : '',
+            this.isReadonly() ? 'fk-form-field--readonly' : '',
+            !this.isEmpty() ? 'fk-form-field--filled' : '',
+            this.prefixRef() ? 'fk-form-field--has-prefix' : '',
+            this.suffixRef() ? 'fk-form-field--has-suffix' : '',
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    // ===== INTERNAL STATE =====
+    fieldId = `fk-field-${nextFieldId++}`;
+    labelId = `${this.fieldId}-label`;
+    autoErrorId = `${this.fieldId}-error`;
+    /**
+     * Whether this field uses auto error messages (no projected fk-error).
+     */
+    get hasAutoError() {
+        return !this.errorRef();
+    }
+    // ===== DERIVED STATE =====
+    // These are methods (not computed signals) because they read non-signal
+    // values from NgControl (touched, dirty, invalid). The host bindings
+    // evaluate them during each change detection cycle.
+    /**
+     * Resolves the AbstractControl to use for validation checks.
+     * Prefers NgControl from the projected FieldControl, falls back
+     * to the explicitly provided AbstractControl (for dynamic fields).
+     */
+    resolveControl() {
+        return this.control()?.ngControl?.control ?? this.fallbackControl();
+    }
+    /** Returns true when the field's validation error should be displayed. */
+    showError() {
+        const ctrl = this.resolveControl();
+        if (!ctrl || !ctrl.invalid) {
+            return false;
+        }
+        switch (this.showErrorsOn()) {
+            case 'touched':
+                return !!ctrl.touched;
+            case 'dirty':
+                return !!ctrl.dirty;
+            case 'submit':
+                return this.submitted();
+            default:
+                return !!ctrl.touched;
+        }
+    }
+    /**
+     * Resolves the auto error message from the control's validation errors.
+     * Uses field-level overrides first, then global messages, then the error key.
+     */
+    autoErrorMessage() {
+        const ctrl = this.resolveControl();
+        if (!ctrl || !ctrl.errors) {
+            return null;
+        }
+        return resolveErrorMessage(ctrl.errors, this.globalErrorMessages, this.errorMessages() ?? undefined);
+    }
+    /** Returns true when the projected field control currently has focus. */
+    isFocused() {
+        return this.control()?.focused ?? false;
+    }
+    /** Returns true when the projected field control has no value. */
+    isEmpty() {
+        return this.control()?.empty ?? true;
+    }
+    /** Returns true when the projected field control is disabled. */
+    isDisabled() {
+        return this.control()?.disabled ?? false;
+    }
+    /** Returns true when the field is marked required by the control or validator. */
+    isRequired() {
+        const control = this.control();
+        if (control?.required) {
+            return true;
+        }
+        const ctrl = this.resolveControl();
+        return ctrl ? ctrl.hasValidator(Validators.required) : false;
+    }
+    /** Returns true when the projected field control is read-only. */
+    isReadonly() {
+        return this.control()?.readonly ?? false;
+    }
+    /** Returns true when the field is in an invalid state that should be shown. */
+    isInvalid() {
+        return this.showError();
+    }
+    constructor() {
+        effect(() => {
+            this.syncDescribedByIds();
+        });
+        effect(() => {
+            const ctrl = this.resolveControl();
+            if (ctrl) {
+                const sub = ctrl.events?.subscribe(() => {
+                    this.cdr.markForCheck();
+                });
+                return () => sub?.unsubscribe();
+            }
+            return;
+        });
+    }
+    // ===== DESCRIBED-BY WIRING =====
+    syncDescribedByIds() {
+        const control = this.control();
+        if (!control) {
+            return;
+        }
+        const ids = [];
+        const hint = this.hintRef();
+        const error = this.errorRef();
+        const external = this.externalDescribedBy();
+        const showingError = this.showError();
+        if (hint && !showingError) {
+            ids.push(hint.id());
+        }
+        if (showingError) {
+            if (error) {
+                ids.push(error.id());
+            }
+            else {
+                // Auto error message — use the generated ID
+                ids.push(this.autoErrorId);
+            }
+        }
+        if (external) {
+            ids.push(external);
+        }
+        control.setDescribedByIds(ids);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormFieldComponent, isStandalone: true, selector: "fk-form-field", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showErrorsOn: { classPropertyName: "showErrorsOn", publicName: "showErrorsOn", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null }, externalDescribedBy: { classPropertyName: "externalDescribedBy", publicName: "externalDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, fallbackControl: { classPropertyName: "fallbackControl", publicName: "fallbackControl", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "control", first: true, predicate: FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "hintRef", first: true, predicate: HintComponent, descendants: true, isSignal: true }, { propertyName: "errorRef", first: true, predicate: ErrorComponent, descendants: true, isSignal: true }, { propertyName: "labelRef", first: true, predicate: LabelComponent, descendants: true, isSignal: true }, { propertyName: "prefixRef", first: true, predicate: FK_PREFIX, descendants: true, isSignal: true }, { propertyName: "suffixRef", first: true, predicate: FK_SUFFIX, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-form-field__wrapper\">\n  @if (label() || labelRef()) {\n    <label\n      class=\"fk-form-field__label\"\n      [attr.id]=\"labelId\"\n      [attr.for]=\"control()?.id ?? null\"\n    >\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content select=\"fk-label\" />\n      }\n      @if (isRequired()) {\n        <span class=\"fk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"fk-form-field__control\"\n    (click)=\"control()?.onContainerClick?.($event)\"\n  >\n    @if (prefixRef()) {\n      <div class=\"fk-form-field__prefix\">\n        <ng-content select=\"[fkPrefix]\" />\n      </div>\n    }\n    <ng-content />\n    @if (suffixRef()) {\n      <div class=\"fk-form-field__suffix\">\n        <ng-content select=\"[fkSuffix]\" />\n      </div>\n    }\n  </div>\n\n  <div class=\"fk-form-field__subscript\">\n    @if (showError()) {\n      @if (hasAutoError) {\n        <span class=\"fk-error\" role=\"alert\" [attr.id]=\"autoErrorId\">\n          {{ autoErrorMessage() }}\n        </span>\n      } @else {\n        <ng-content select=\"fk-error\" />\n      }\n    } @else {\n      <ng-content select=\"fk-hint\" />\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.fk-form-field__wrapper{display:flex;flex-direction:column}.fk-form-field__label{display:flex;align-items:baseline;gap:.25em;margin-top:var(--fk-form-label-margin-top, var(--fk-rhythm-2, .5rem));font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-form-label-font-size, var(--fk-typography-label-font-size, .8125rem));font-weight:var(--fk-form-label-font-weight, var(--fk-typography-label-font-weight, 600));line-height:var(--fk-form-label-line-height, var(--fk-typography-label-line-height, 1.25));color:var(--fk-form-label-color, var(--fk-color-text-strong, #0b1420));cursor:default}.fk-form-field__required{color:var(--fk-form-error-color, var(--fk-color-danger, #e02424))}.fk-form-field__control{position:relative;margin-top:var(--fk-form-label-gap, var(--fk-rhythm-2, .5rem))}.fk-form-field__prefix,.fk-form-field__suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8));z-index:1}.fk-form-field__prefix{pointer-events:none}.fk-form-field__prefix{left:var(--fk-input-affix-offset, .75rem)}.fk-form-field__suffix{right:var(--fk-input-affix-offset, .75rem)}.fk-form-field__subscript{display:var(--fk-form-subscript-display, block);min-height:var(--fk-form-subscript-min-height, calc(var(--fk-form-hint-font-size, var(--fk-typography-small-font-size, .8125rem)) * 1.4));margin-top:var(--fk-form-subscript-gap, var(--fk-rhythm-1, .25rem))}.fk-form-field__subscript .fk-error{display:block;font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-form-error-font-size, var(--fk-typography-small-font-size, .8125rem));line-height:1.4;color:var(--fk-form-error-color, var(--fk-color-danger, #e02424))}:host(.fk-form-field--focused) .fk-form-field__label{color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff))}:host(.fk-form-field--disabled) .fk-form-field__label{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-form-field__wrapper\">\n  @if (label() || labelRef()) {\n    <label\n      class=\"fk-form-field__label\"\n      [attr.id]=\"labelId\"\n      [attr.for]=\"control()?.id ?? null\"\n    >\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content select=\"fk-label\" />\n      }\n      @if (isRequired()) {\n        <span class=\"fk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"fk-form-field__control\"\n    (click)=\"control()?.onContainerClick?.($event)\"\n  >\n    @if (prefixRef()) {\n      <div class=\"fk-form-field__prefix\">\n        <ng-content select=\"[fkPrefix]\" />\n      </div>\n    }\n    <ng-content />\n    @if (suffixRef()) {\n      <div class=\"fk-form-field__suffix\">\n        <ng-content select=\"[fkSuffix]\" />\n      </div>\n    }\n  </div>\n\n  <div class=\"fk-form-field__subscript\">\n    @if (showError()) {\n      @if (hasAutoError) {\n        <span class=\"fk-error\" role=\"alert\" [attr.id]=\"autoErrorId\">\n          {{ autoErrorMessage() }}\n        </span>\n      } @else {\n        <ng-content select=\"fk-error\" />\n      }\n    } @else {\n      <ng-content select=\"fk-hint\" />\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.fk-form-field__wrapper{display:flex;flex-direction:column}.fk-form-field__label{display:flex;align-items:baseline;gap:.25em;margin-top:var(--fk-form-label-margin-top, var(--fk-rhythm-2, .5rem));font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-form-label-font-size, var(--fk-typography-label-font-size, .8125rem));font-weight:var(--fk-form-label-font-weight, var(--fk-typography-label-font-weight, 600));line-height:var(--fk-form-label-line-height, var(--fk-typography-label-line-height, 1.25));color:var(--fk-form-label-color, var(--fk-color-text-strong, #0b1420));cursor:default}.fk-form-field__required{color:var(--fk-form-error-color, var(--fk-color-danger, #e02424))}.fk-form-field__control{position:relative;margin-top:var(--fk-form-label-gap, var(--fk-rhythm-2, .5rem))}.fk-form-field__prefix,.fk-form-field__suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8));z-index:1}.fk-form-field__prefix{pointer-events:none}.fk-form-field__prefix{left:var(--fk-input-affix-offset, .75rem)}.fk-form-field__suffix{right:var(--fk-input-affix-offset, .75rem)}.fk-form-field__subscript{display:var(--fk-form-subscript-display, block);min-height:var(--fk-form-subscript-min-height, calc(var(--fk-form-hint-font-size, var(--fk-typography-small-font-size, .8125rem)) * 1.4));margin-top:var(--fk-form-subscript-gap, var(--fk-rhythm-1, .25rem))}.fk-form-field__subscript .fk-error{display:block;font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-form-error-font-size, var(--fk-typography-small-font-size, .8125rem));line-height:1.4;color:var(--fk-form-error-color, var(--fk-color-danger, #e02424))}:host(.fk-form-field--focused) .fk-form-field__label{color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff))}:host(.fk-form-field--disabled) .fk-form-field__label{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showErrorsOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorsOn", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], externalDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalDescribedBy", required: false }] }], fallbackControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackControl", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FIELD_CONTROL), { isSignal: true }] }], hintRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HintComponent), { isSignal: true }] }], errorRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ErrorComponent), { isSignal: true }] }], labelRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LabelComponent), { isSignal: true }] }], prefixRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_PREFIX), { isSignal: true }] }], suffixRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_SUFFIX), { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Registry that maps validator type names to factory functions.
+ *
+ * Built-in validators (required, minLength, maxLength, email, min, max, pattern)
+ * are registered by default. Custom validators can be registered at any time.
+ *
+ * Used by the schema engine (Phase 3) to create ValidatorFn arrays from
+ * schema configurations, and available for programmatic use.
+ *
+ * @example
+ * ```ts
+ * // Register a custom validator
+ * registry.register('phone', () =>
+ *   Validators.pattern(/^\+?[\d\s-]{10,}$/)
+ * );
+ *
+ * // Resolve validators from config
+ * const validators = registry.resolve([
+ *   { type: 'required' },
+ *   { type: 'minLength', value: 3 },
+ *   { type: 'phone' },
+ * ]);
+ * ```
+ */
+class ValidationRegistry {
+    validators = new Map();
+    asyncValidators = new Map();
+    constructor() {
+        this.registerDefaults();
+    }
+    /**
+     * Registers a synchronous validator factory.
+     *
+     * @param type - The validator type key
+     * @param factory - Factory function that creates a ValidatorFn
+     */
+    register(type, factory) {
+        this.validators.set(type, factory);
+    }
+    /**
+     * Registers an asynchronous validator factory.
+     *
+     * @param type - The async validator type key
+     * @param factory - Factory function that creates an AsyncValidatorFn
+     */
+    registerAsync(type, factory) {
+        this.asyncValidators.set(type, factory);
+    }
+    /**
+     * Checks if a synchronous validator type is registered.
+     */
+    has(type) {
+        return this.validators.has(type);
+    }
+    /**
+     * Checks if an asynchronous validator type is registered.
+     */
+    hasAsync(type) {
+        return this.asyncValidators.has(type);
+    }
+    /**
+     * Resolves an array of validator configs into ValidatorFn instances.
+     *
+     * @throws Error if a validator type is not registered
+     */
+    resolve(configs) {
+        return configs.map((config) => {
+            const factory = this.validators.get(config.type);
+            if (!factory) {
+                throw new Error(`ValidationRegistry: unknown validator type "${config.type}". ` +
+                    `Register it with registry.register("${config.type}", factory).`);
+            }
+            return factory(config.value);
+        });
+    }
+    /**
+     * Resolves an array of async validator configs into AsyncValidatorFn instances.
+     *
+     * @throws Error if an async validator type is not registered
+     */
+    resolveAsync(configs) {
+        return configs.map((config) => {
+            const factory = this.asyncValidators.get(config.type);
+            if (!factory) {
+                throw new Error(`ValidationRegistry: unknown async validator type "${config.type}". ` +
+                    `Register it with registry.registerAsync("${config.type}", factory).`);
+            }
+            return factory(config.value);
+        });
+    }
+    registerDefaults() {
+        this.register('required', () => Validators.required);
+        this.register('requiredTrue', () => Validators.requiredTrue);
+        this.register('email', () => Validators.email);
+        this.register('minLength', (value) => Validators.minLength(value));
+        this.register('maxLength', (value) => Validators.maxLength(value));
+        this.register('min', (value) => Validators.min(value));
+        this.register('max', (value) => Validators.max(value));
+        this.register('pattern', (value) => Validators.pattern(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Parses a FormSchema into an Angular FormGroup.
+ *
+ * Resolves validators from the validation registry and applies
+ * default values, disabled state, and required constraints.
+ *
+ * @example
+ * ```ts
+ * const schema: FormSchema = {
+ *   fields: [
+ *     { key: 'email', type: 'input', required: true, validators: [{ type: 'email' }] },
+ *     { key: 'name', type: 'input', defaultValue: 'John' },
+ *   ],
+ * };
+ *
+ * const form = parser.buildFormGroup(schema);
+ * // form.get('email') => FormControl with required + email validators
+ * // form.get('name') => FormControl with value 'John'
+ * ```
+ */
+class SchemaParser {
+    validationRegistry = inject(ValidationRegistry);
+    /**
+     * Builds a FormGroup from a form schema.
+     *
+     * Supports flat fields, nested groups (via `children`),
+     * field arrays (via `arrayFields`), and layout sections.
+     */
+    buildFormGroup(schema) {
+        const allFields = this.collectFields(schema);
+        return this.buildGroupFromFields(allFields);
+    }
+    /**
+     * Builds a single FormControl from a field schema.
+     */
+    buildControl(field) {
+        const validators = this.resolveValidators(field);
+        const asyncValidators = this.resolveAsyncValidators(field);
+        return new FormControl({ value: field.defaultValue ?? null, disabled: field.disabled ?? false }, { validators, asyncValidators });
+    }
+    /**
+     * Builds a nested FormGroup from a field with `children`.
+     */
+    buildNestedGroup(field) {
+        if (!field.children?.length) {
+            return new FormGroup({});
+        }
+        return this.buildGroupFromFields(field.children);
+    }
+    /**
+     * Builds a FormArray from a field with `arrayFields`.
+     *
+     * Creates one initial row from the array field definitions.
+     * Additional rows can be added programmatically.
+     */
+    buildFieldArray(field) {
+        const initialRows = field.defaultValue ?? [null];
+        const controls = initialRows.map((rowValue) => {
+            if (field.arrayFields?.length) {
+                const group = this.buildGroupFromFields(field.arrayFields);
+                if (rowValue && typeof rowValue === 'object') {
+                    group.patchValue(rowValue);
+                }
+                return group;
+            }
+            return new FormControl(rowValue ?? null);
+        });
+        return new FormArray(controls);
+    }
+    /**
+     * Creates a new row FormGroup for a field array.
+     */
+    buildArrayRow(field) {
+        if (!field.arrayFields?.length) {
+            return new FormGroup({});
+        }
+        return this.buildGroupFromFields(field.arrayFields);
+    }
+    buildGroupFromFields(fields) {
+        const controls = {};
+        for (const field of fields) {
+            if (field.children) {
+                controls[field.key] = this.buildNestedGroup(field);
+            }
+            else if (field.arrayFields) {
+                controls[field.key] = this.buildFieldArray(field);
+            }
+            else {
+                controls[field.key] = this.buildControl(field);
+            }
+        }
+        return new FormGroup(controls);
+    }
+    /**
+     * Collects all fields from a schema, including fields
+     * within layout sections.
+     */
+    collectFields(schema) {
+        if (!schema.sections?.length) {
+            return schema.fields;
+        }
+        const fields = [...schema.fields];
+        for (const section of schema.sections) {
+            fields.push(...section.fields);
+        }
+        return fields;
+    }
+    resolveValidators(field) {
+        const validators = [];
+        if (field.required) {
+            validators.push(Validators.required);
+        }
+        if (field.validators?.length) {
+            validators.push(...this.validationRegistry.resolve(field.validators));
+        }
+        return validators;
+    }
+    resolveAsyncValidators(field) {
+        if (!field.asyncValidators?.length) {
+            return [];
+        }
+        return this.validationRegistry.resolveAsync(field.asyncValidators);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SchemaParser, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SchemaParser, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SchemaParser, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const FK_AUTOCOMPLETE_OPTION_TPL = new InjectionToken('FK_AUTOCOMPLETE_OPTION_TPL');
+class FkAutocompleteOptionTplDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkAutocompleteOptionTplDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkAutocompleteOptionTplDirective, isStandalone: true, selector: "[fkAutocompleteOption]", providers: [
+            {
+                provide: FK_AUTOCOMPLETE_OPTION_TPL,
+                useExisting: FkAutocompleteOptionTplDirective,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkAutocompleteOptionTplDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkAutocompleteOption]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FK_AUTOCOMPLETE_OPTION_TPL,
+                            useExisting: FkAutocompleteOptionTplDirective,
+                        },
+                    ],
+                }]
+        }] });
+let nextAutocompleteId = 0;
+class AutocompleteComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown in the text input when no value is selected. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** List of selectable options rendered in the dropdown. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * 'local' (default): filters options client-side.
+     * 'manual': skips internal filtering — renders options as-is.
+     *           Use with searchChange output for server-side search.
+     */
+    filterMode = input('local', ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
+    /** Whether async options are currently loading. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /**
+     * Emits the current input value on each keystroke.
+     * Use in manual filterMode for server-side search.
+     */
+    searchChange = output();
+    // ===== CONTENT CHILDREN =====
+    /** Custom template for rendering each option in the dropdown. */
+    optionTpl = contentChild(FK_AUTOCOMPLETE_OPTION_TPL, ...(ngDevMode ? [{ debugName: "optionTpl" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-autocomplete-${nextAutocompleteId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    // ===== DROPDOWN STATE =====
+    showDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showDropdown" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-autocomplete',
+        this.isFocused() ? 'fk-autocomplete--focused' : '',
+        this.isDisabledSignal() ? 'fk-autocomplete--disabled' : '',
+        this.showDropdown() ? 'fk-autocomplete--open' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** The options to render in the dropdown — filtered or raw depending on mode. */
+    visibleOptions = computed(() => {
+        if (this.filterMode() === 'manual') {
+            return this.options();
+        }
+        return this.filteredOptions();
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    displayValue = '';
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.selectedValue;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        // In manual mode, show/hide dropdown when options change
+        effect(() => {
+            if (this.filterMode() !== 'manual') {
+                return;
+            }
+            const opts = this.options();
+            if (opts.length > 0 && this.isFocused()) {
+                this.showDropdown.set(true);
+                this.activeIndex.set(-1);
+            }
+            else if (opts.length === 0 && !this.loading()) {
+                this.showDropdown.set(this.displayValue.length > 0 && this.isFocused());
+            }
+        });
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    selectedValue = null;
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.selectedValue = value;
+        const match = this.options().find((o) => o.value === value);
+        this.displayValue = match?.label ?? (value !== null ? String(value) : '');
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.displayValue;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        if (isDisabled) {
+            this.showDropdown.set(false);
+            this.activeIndex.set(-1);
+        }
+        this.cdr.markForCheck();
+    }
+    // ===== OPTION MANAGEMENT =====
+    /** Commits the given option as the selected value and closes the dropdown. */
+    selectOption(option) {
+        this.selectedValue = option.value;
+        this.displayValue = option.label;
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = option.label;
+        }
+        this.showDropdown.set(false);
+        this.activeIndex.set(-1);
+        this.onChange(this.selectedValue);
+    }
+    filterOptions(query) {
+        const lower = query.toLowerCase();
+        const filtered = this.options().filter((o) => o.label.toLowerCase().includes(lower));
+        this.filteredOptions.set(filtered);
+        this.showDropdown.set(filtered.length > 0 && query.length > 0);
+        this.activeIndex.set(-1);
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        if (this.isDisabledSignal()) {
+            return;
+        }
+        const input = event.target;
+        this.displayValue = input.value;
+        // Clear the selected value when typing
+        this.selectedValue = null;
+        this.onChange(null);
+        if (this.filterMode() === 'manual') {
+            this.searchChange.emit(input.value);
+            // In manual mode, show dropdown if there are options
+            // (the parent controls options via the input binding)
+            this.showDropdown.set(input.value.length > 0);
+            this.activeIndex.set(-1);
+        }
+        else {
+            this.filterOptions(input.value);
+        }
+    }
+    onKeydown(event) {
+        if (this.isDisabledSignal()) {
+            return;
+        }
+        const visible = this.visibleOptions();
+        if (!this.showDropdown() || visible.length === 0) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const nextIndex = Math.min(this.activeIndex() + 1, visible.length - 1);
+                this.activeIndex.set(nextIndex);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prevIndex = Math.max(this.activeIndex() - 1, 0);
+                this.activeIndex.set(prevIndex);
+                break;
+            }
+            case 'Enter': {
+                event.preventDefault();
+                const idx = this.activeIndex();
+                if (idx >= 0 && idx < visible.length) {
+                    this.selectOption(visible[idx]);
+                }
+                break;
+            }
+            case 'Tab': {
+                const tabIdx = this.activeIndex();
+                if (tabIdx >= 0 && tabIdx < visible.length) {
+                    this.selectOption(visible[tabIdx]);
+                }
+                // Don't prevent default — let focus move to next field
+                break;
+            }
+            case 'Escape': {
+                this.showDropdown.set(false);
+                this.activeIndex.set(-1);
+                break;
+            }
+        }
+    }
+    onFocus() {
+        if (this.isDisabledSignal()) {
+            return;
+        }
+        this.isFocused.set(true);
+        if (this.filterMode() === 'local' && this.displayValue) {
+            this.filterOptions(this.displayValue);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.showDropdown.set(false);
+        this.activeIndex.set(-1);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AutocompleteComponent, isStandalone: true, selector: "fk-autocomplete", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => AutocompleteComponent),
+            },
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: FK_AUTOCOMPLETE_OPTION_TPL, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-autocomplete__wrapper\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"fk-autocomplete__native\"\n    [attr.id]=\"id\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-expanded]=\"showDropdown()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.role]=\"'combobox'\"\n    [disabled]=\"isDisabledSignal()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n  @if (showDropdown()) {\n    <ul class=\"fk-autocomplete__dropdown\" role=\"listbox\">\n      @if (loading()) {\n        <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">Loading\u2026</li>\n      } @else if (visibleOptions().length > 0) {\n        @for (option of visibleOptions(); track option.value; let i = $index) {\n          <li\n            class=\"fk-autocomplete__option\"\n            [class.fk-autocomplete__option--active]=\"i === activeIndex()\"\n            role=\"option\"\n            [attr.aria-selected]=\"i === activeIndex()\"\n            (mousedown)=\"selectOption(option)\"\n          >\n            @if (optionTpl()) {\n              <ng-container\n                [ngTemplateOutlet]=\"optionTpl()!.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option }\"\n              />\n            } @else {\n              {{ option.label }}\n            }\n          </li>\n        }\n      } @else {\n        <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">\n          No results found\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [":host{display:block}.fk-autocomplete__wrapper{position:relative}.fk-autocomplete__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-autocomplete__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-autocomplete__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:200px;margin:4px 0 0;padding:4px 0;list-style:none;overflow-y:auto;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-autocomplete-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1))}.fk-autocomplete__option{padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));cursor:pointer;transition:background .1s ease}.fk-autocomplete__option:hover,.fk-autocomplete__option--active{background:var(--fk-color-surface-muted, #f7f9fb)}.fk-autocomplete__status{padding:var(--fk-input-padding, .5rem .75rem);font-size:var(--fk-input-font-size, .875rem);color:var(--fk-color-muted, #8a98a8);font-style:italic;list-style:none}:host-context(.fk-form-field--invalid) .fk-autocomplete__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-autocomplete__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-autocomplete', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => AutocompleteComponent),
+                        },
+                    ], template: "<div class=\"fk-autocomplete__wrapper\">\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"fk-autocomplete__native\"\n    [attr.id]=\"id\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-expanded]=\"showDropdown()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.role]=\"'combobox'\"\n    [disabled]=\"isDisabledSignal()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeydown($event)\"\n  />\n  @if (showDropdown()) {\n    <ul class=\"fk-autocomplete__dropdown\" role=\"listbox\">\n      @if (loading()) {\n        <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">Loading\u2026</li>\n      } @else if (visibleOptions().length > 0) {\n        @for (option of visibleOptions(); track option.value; let i = $index) {\n          <li\n            class=\"fk-autocomplete__option\"\n            [class.fk-autocomplete__option--active]=\"i === activeIndex()\"\n            role=\"option\"\n            [attr.aria-selected]=\"i === activeIndex()\"\n            (mousedown)=\"selectOption(option)\"\n          >\n            @if (optionTpl()) {\n              <ng-container\n                [ngTemplateOutlet]=\"optionTpl()!.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: option }\"\n              />\n            } @else {\n              {{ option.label }}\n            }\n          </li>\n        }\n      } @else {\n        <li class=\"fk-autocomplete__status\" aria-disabled=\"true\">\n          No results found\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [":host{display:block}.fk-autocomplete__wrapper{position:relative}.fk-autocomplete__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-autocomplete__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-autocomplete__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-autocomplete__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;max-height:200px;margin:4px 0 0;padding:4px 0;list-style:none;overflow-y:auto;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));box-shadow:var(--fk-autocomplete-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .1))}.fk-autocomplete__option{padding:var(--fk-input-padding, .5rem .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));cursor:pointer;transition:background .1s ease}.fk-autocomplete__option:hover,.fk-autocomplete__option--active{background:var(--fk-color-surface-muted, #f7f9fb)}.fk-autocomplete__status{padding:var(--fk-input-padding, .5rem .75rem);font-size:var(--fk-input-font-size, .875rem);color:var(--fk-color-muted, #8a98a8);font-style:italic;list-style:none}:host-context(.fk-form-field--invalid) .fk-autocomplete__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-autocomplete__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_AUTOCOMPLETE_OPTION_TPL), { isSignal: true }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextCheckboxId = 0;
+class CheckboxComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Text label rendered alongside the checkbox. */
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // ===== INTERNAL STATE =====
+    checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-checkbox-${nextCheckboxId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-checkbox',
+        this.isFocused() ? 'fk-checkbox--focused' : '',
+        this.isDisabledSignal() ? 'fk-checkbox--disabled' : '',
+        this.checked() ? 'fk-checkbox--checked' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.checked();
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        // No-op: the checkbox <label> already handles click-to-toggle natively.
+        // Calling input.click() here would double-toggle when inside fk-form-field.
+    }
+    // ===== ControlValueAccessor =====
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onChanged(event) {
+        const input = event.target;
+        this.checked.set(input.checked);
+        this.onChange(input.checked);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxComponent, isStandalone: true, selector: "fk-checkbox", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => CheckboxComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"fk-checkbox__layout\">\n  <input\n    #inputEl\n    type=\"checkbox\"\n    class=\"fk-checkbox__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onChanged($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  <span class=\"fk-checkbox__box\">\n    <svg\n      class=\"fk-checkbox__check\"\n      viewBox=\"0 0 12 10\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <polyline points=\"1.5 5 4.5 8 10.5 2\" />\n    </svg>\n  </span>\n  <span class=\"fk-checkbox__label\">\n    @if (label()) {\n      {{ label() }}\n    }\n    <ng-content />\n  </span>\n</label>\n", styles: [":host{display:block}.fk-checkbox__layout{display:inline-flex;align-items:flex-start;gap:var(--fk-checkbox-gap, .5rem);cursor:pointer}.fk-checkbox__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-checkbox__box{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--fk-checkbox-size, 1.125rem);height:var(--fk-checkbox-size, 1.125rem);margin-top:.125rem;border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-checkbox-border-radius, var(--fk-radius-sm, .25rem));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.fk-checkbox__check{width:.75rem;height:.75rem;opacity:0;transform:scale(.5);transition:opacity .1s ease,transform .1s ease}.fk-checkbox__label{font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));-webkit-user-select:none;user-select:none}.fk-checkbox__layout:hover .fk-checkbox__box{border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-checkbox__native:focus-visible~.fk-checkbox__box{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host(.fk-checkbox--checked) .fk-checkbox__box{background:var(--fk-checkbox-checked-bg, var(--fk-color-primary, #0a84ff));border-color:var(--fk-checkbox-checked-bg, var(--fk-color-primary, #0a84ff))}:host(.fk-checkbox--checked) .fk-checkbox__check{opacity:1;transform:scale(1);color:var(--fk-checkbox-check-color, #ffffff)}:host(.fk-checkbox--disabled) .fk-checkbox__layout{cursor:not-allowed}:host(.fk-checkbox--disabled) .fk-checkbox__box{opacity:var(--fk-input-disabled-opacity, .5)}:host(.fk-checkbox--disabled) .fk-checkbox__label{opacity:var(--fk-input-disabled-opacity, .5)}:host-context(.fk-form-field--invalid) .fk-checkbox__box{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                        },
+                    ], template: "<label class=\"fk-checkbox__layout\">\n  <input\n    #inputEl\n    type=\"checkbox\"\n    class=\"fk-checkbox__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onChanged($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  <span class=\"fk-checkbox__box\">\n    <svg\n      class=\"fk-checkbox__check\"\n      viewBox=\"0 0 12 10\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    >\n      <polyline points=\"1.5 5 4.5 8 10.5 2\" />\n    </svg>\n  </span>\n  <span class=\"fk-checkbox__label\">\n    @if (label()) {\n      {{ label() }}\n    }\n    <ng-content />\n  </span>\n</label>\n", styles: [":host{display:block}.fk-checkbox__layout{display:inline-flex;align-items:flex-start;gap:var(--fk-checkbox-gap, .5rem);cursor:pointer}.fk-checkbox__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-checkbox__box{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--fk-checkbox-size, 1.125rem);height:var(--fk-checkbox-size, 1.125rem);margin-top:.125rem;border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-checkbox-border-radius, var(--fk-radius-sm, .25rem));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.fk-checkbox__check{width:.75rem;height:.75rem;opacity:0;transform:scale(.5);transition:opacity .1s ease,transform .1s ease}.fk-checkbox__label{font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));-webkit-user-select:none;user-select:none}.fk-checkbox__layout:hover .fk-checkbox__box{border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-checkbox__native:focus-visible~.fk-checkbox__box{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host(.fk-checkbox--checked) .fk-checkbox__box{background:var(--fk-checkbox-checked-bg, var(--fk-color-primary, #0a84ff));border-color:var(--fk-checkbox-checked-bg, var(--fk-color-primary, #0a84ff))}:host(.fk-checkbox--checked) .fk-checkbox__check{opacity:1;transform:scale(1);color:var(--fk-checkbox-check-color, #ffffff)}:host(.fk-checkbox--disabled) .fk-checkbox__layout{cursor:not-allowed}:host(.fk-checkbox--disabled) .fk-checkbox__box{opacity:var(--fk-input-disabled-opacity, .5)}:host(.fk-checkbox--disabled) .fk-checkbox__label{opacity:var(--fk-input-disabled-opacity, .5)}:host-context(.fk-form-field--invalid) .fk-checkbox__box{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextDateInputId = 0;
+class DateInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isReadonly = input(false, { ...(ngDevMode ? { debugName: "isReadonly" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    /** Earliest selectable date as an ISO 8601 date string (YYYY-MM-DD). */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date as an ISO 8601 date string (YYYY-MM-DD). */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-date-input-${nextDateInputId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-date-input',
+        this.isFocused() ? 'fk-date-input--focused' : '',
+        this.isDisabledSignal() ? 'fk-date-input--disabled' : '',
+        this.isReadonly() ? 'fk-date-input--readonly' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get readonly() {
+        return this.isReadonly();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    value = '';
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: DateInputComponent, isStandalone: true, selector: "fk-date-input", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", 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 } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => DateInputComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputEl\n  type=\"date\"\n  class=\"fk-date-input__native\"\n  [attr.id]=\"id\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-date-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-date-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-date-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-date-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-date-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-date-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-date-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-date-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => DateInputComponent),
+                        },
+                    ], template: "<input\n  #inputEl\n  type=\"date\"\n  class=\"fk-date-input__native\"\n  [attr.id]=\"id\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-date-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-date-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-date-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-date-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-date-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-date-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-date-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextDatetimeInputId = 0;
+class DatetimeInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isReadonly = input(false, { ...(ngDevMode ? { debugName: "isReadonly" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    /** Earliest selectable datetime as an ISO 8601 local datetime string. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable datetime as an ISO 8601 local datetime string. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-datetime-input-${nextDatetimeInputId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-datetime-input',
+        this.isFocused() ? 'fk-datetime-input--focused' : '',
+        this.isDisabledSignal() ? 'fk-datetime-input--disabled' : '',
+        this.isReadonly() ? 'fk-datetime-input--readonly' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get readonly() {
+        return this.isReadonly();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    value = '';
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: DatetimeInputComponent, isStandalone: true, selector: "fk-datetime-input", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", 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 } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => DatetimeInputComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputEl\n  type=\"datetime-local\"\n  class=\"fk-datetime-input__native\"\n  [attr.id]=\"id\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-datetime-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-datetime-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-datetime-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-datetime-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-datetime-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-datetime-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-datetime-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-datetime-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => DatetimeInputComponent),
+                        },
+                    ], template: "<input\n  #inputEl\n  type=\"datetime-local\"\n  class=\"fk-datetime-input__native\"\n  [attr.id]=\"id\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-datetime-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-datetime-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-datetime-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-datetime-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-datetime-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-datetime-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-datetime-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextFileUploadId = 0;
+class FileUploadComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown when no file has been selected. */
+    placeholder = input('Choose file...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** MIME types or file extensions the native file picker should accept. */
+    accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Whether the user can select more than one file at a time. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-file-upload-${nextFileUploadId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    fileNames = signal([], ...(ngDevMode ? [{ debugName: "fileNames" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-file-upload',
+        this.isFocused() ? 'fk-file-upload--focused' : '',
+        this.isDisabledSignal() ? 'fk-file-upload--disabled' : '',
+        this.fileNames().length > 0 ? 'fk-file-upload--filled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    files = null;
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.files || this.files.length === 0;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.click();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.files = value;
+        if (value && value.length > 0) {
+            const names = [];
+            for (let i = 0; i < value.length; i++) {
+                names.push(value[i].name);
+            }
+            this.fileNames.set(names);
+        }
+        else {
+            this.fileNames.set([]);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onFileChange(event) {
+        const input = event.target;
+        this.files = input.files;
+        if (this.files && this.files.length > 0) {
+            const names = [];
+            for (let i = 0; i < this.files.length; i++) {
+                names.push(this.files[i].name);
+            }
+            this.fileNames.set(names);
+        }
+        else {
+            this.fileNames.set([]);
+        }
+        this.onChange(this.files);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FileUploadComponent, isStandalone: true, selector: "fk-file-upload", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => FileUploadComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-file-upload__wrapper\">\n  <input\n    #inputEl\n    type=\"file\"\n    class=\"fk-file-upload__native\"\n    [attr.id]=\"id\"\n    [attr.accept]=\"accept()\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onFileChange($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  <div class=\"fk-file-upload__display\">\n    <span class=\"fk-file-upload__text\">\n      @if (fileNames().length > 0) {\n        {{ fileNames().join(', ') }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n    <span class=\"fk-file-upload__button\">Browse</span>\n  </div>\n</div>\n", styles: [":host{display:block}.fk-file-upload__wrapper{position:relative}.fk-file-upload__native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.fk-file-upload__native:disabled{cursor:not-allowed}.fk-file-upload__display{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));transition:border-color .15s ease,box-shadow .15s ease}:host(:hover:not(.fk-file-upload--disabled)) .fk-file-upload__display{border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}:host(.fk-file-upload--focused) .fk-file-upload__display{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host(.fk-file-upload--disabled) .fk-file-upload__display{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-file-upload__text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}:host(.fk-file-upload--filled) .fk-file-upload__text{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}.fk-file-upload__button{flex-shrink:0;margin-left:var(--fk-rhythm-3, .75rem);padding:2px 12px;font-size:calc(var(--fk-input-font-size, .875rem) * .85);color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));background:transparent;border:1px solid var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));border-radius:calc(var(--fk-input-border-radius, var(--fk-radius-md, .375rem)) - 2px)}:host-context(.fk-form-field--invalid) .fk-file-upload__display{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid):host(.fk-file-upload--focused) .fk-file-upload__display{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-file-upload', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => FileUploadComponent),
+                        },
+                    ], template: "<div class=\"fk-file-upload__wrapper\">\n  <input\n    #inputEl\n    type=\"file\"\n    class=\"fk-file-upload__native\"\n    [attr.id]=\"id\"\n    [attr.accept]=\"accept()\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onFileChange($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  <div class=\"fk-file-upload__display\">\n    <span class=\"fk-file-upload__text\">\n      @if (fileNames().length > 0) {\n        {{ fileNames().join(', ') }}\n      } @else {\n        {{ placeholder() }}\n      }\n    </span>\n    <span class=\"fk-file-upload__button\">Browse</span>\n  </div>\n</div>\n", styles: [":host{display:block}.fk-file-upload__wrapper{position:relative}.fk-file-upload__native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.fk-file-upload__native:disabled{cursor:not-allowed}.fk-file-upload__display{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));transition:border-color .15s ease,box-shadow .15s ease}:host(:hover:not(.fk-file-upload--disabled)) .fk-file-upload__display{border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}:host(.fk-file-upload--focused) .fk-file-upload__display{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host(.fk-file-upload--disabled) .fk-file-upload__display{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-file-upload__text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}:host(.fk-file-upload--filled) .fk-file-upload__text{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}.fk-file-upload__button{flex-shrink:0;margin-left:var(--fk-rhythm-3, .75rem);padding:2px 12px;font-size:calc(var(--fk-input-font-size, .875rem) * .85);color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));background:transparent;border:1px solid var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));border-radius:calc(var(--fk-input-border-radius, var(--fk-radius-md, .375rem)) - 2px)}:host-context(.fk-form-field--invalid) .fk-file-upload__display{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid):host(.fk-file-upload--focused) .fk-file-upload__display{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextInputId = 0;
+class InputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** HTML input type attribute (e.g. "text", "email", "search"). */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown when the input has no value. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Native `autocomplete` attribute token (e.g. "username", "email",
+     * "name", "off"). Null omits the attribute entirely. Set this on
+     * identifying fields (login email, name) so browsers and password
+     * managers behave correctly — see fk-password-input for the password
+     * counterpart.
+     */
+    autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isReadonly = input(false, { ...(ngDevMode ? { debugName: "isReadonly" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    // ===== FieldControl =====
+    id = `fk-input-${nextInputId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-input',
+        this.isFocused() ? 'fk-input--focused' : '',
+        this.isDisabledSignal() ? 'fk-input--disabled' : '',
+        this.isReadonly() ? 'fk-input--readonly' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get readonly() {
+        return this.isReadonly();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    value = '';
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: InputComponent, isStandalone: true, selector: "fk-input", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => InputComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputEl\n  class=\"fk-input__native\"\n  [attr.id]=\"id\"\n  [attr.type]=\"type()\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.autocomplete]=\"autocomplete()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-input__native:read-only{cursor:default}:host-context(.fk-form-field--has-prefix) .fk-input__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-input__native{padding-right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => InputComponent),
+                        },
+                    ], template: "<input\n  #inputEl\n  class=\"fk-input__native\"\n  [attr.id]=\"id\"\n  [attr.type]=\"type()\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.autocomplete]=\"autocomplete()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-input__native:read-only{cursor:default}:host-context(.fk-form-field--has-prefix) .fk-input__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-input__native{padding-right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextNumberInputId = 0;
+class NumberInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown when the input has no value. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isReadonly = input(false, { ...(ngDevMode ? { debugName: "isReadonly" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    /** Minimum allowed numeric value. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum allowed numeric value. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Increment step for the native number input spinner. */
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-number-input-${nextNumberInputId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-number-input',
+        this.isFocused() ? 'fk-number-input--focused' : '',
+        this.isDisabledSignal() ? 'fk-number-input--disabled' : '',
+        this.isReadonly() ? 'fk-number-input--readonly' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return this.value === null || this.value === undefined;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get readonly() {
+        return this.isReadonly();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    value = null;
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? null;
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.value !== null ? String(this.value) : '';
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value === '' ? null : Number(input.value);
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: NumberInputComponent, isStandalone: true, selector: "fk-number-input", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", 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 } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => NumberInputComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputEl\n  type=\"number\"\n  class=\"fk-number-input__native\"\n  [attr.id]=\"id\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.step]=\"step()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-number-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-number-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-number-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-number-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-number-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-number-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-number-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-number-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-number-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => NumberInputComponent),
+                        },
+                    ], template: "<input\n  #inputEl\n  type=\"number\"\n  class=\"fk-number-input__native\"\n  [attr.id]=\"id\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.step]=\"step()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-number-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-number-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-number-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-number-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-number-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-number-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-number-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-number-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextPasswordId = 0;
+const ICON_SIZE_PRESETS = ['xs', 'sm', 'md', 'lg', 'xl'];
+const ICON_COLOR_PRESETS = ['default', 'muted', 'primary', 'danger', 'success'];
+class PasswordInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown when the input has no value. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** Autocomplete hint passed to the native input — use "current-password" or "new-password". */
+    autocomplete = input('current-password', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /** Whether the show/hide password toggle button is rendered. */
+    showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
+    /** Icon size for the visibility toggle button. */
+    toggleIconSize = input('sm', ...(ngDevMode ? [{ debugName: "toggleIconSize" }] : /* istanbul ignore next */ []));
+    /** Icon color for the visibility toggle button. */
+    toggleIconColor = input('muted', ...(ngDevMode ? [{ debugName: "toggleIconColor" }] : /* istanbul ignore next */ []));
+    // ===== INTERNAL STATE =====
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-password-${nextPasswordId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-password-input',
+        this.showToggle() ? 'fk-password-input--has-toggle' : '',
+        this.isFocused() ? 'fk-password-input--focused' : '',
+        this.isDisabledSignal() ? 'fk-password-input--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    toggleSizeStyle = computed(() => {
+        const size = this.toggleIconSize();
+        if (ICON_SIZE_PRESETS.includes(size)) {
+            return `var(--fk-icon-size-${size})`;
+        }
+        return size;
+    }, ...(ngDevMode ? [{ debugName: "toggleSizeStyle" }] : /* istanbul ignore next */ []));
+    toggleColorStyle = computed(() => {
+        const color = this.toggleIconColor();
+        if (color === 'inherit') {
+            return null;
+        }
+        if (ICON_COLOR_PRESETS.includes(color)) {
+            return `var(--fk-icon-color-${color})`;
+        }
+        return color;
+    }, ...(ngDevMode ? [{ debugName: "toggleColorStyle" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    /** Toggles the password field between visible plain text and masked mode. */
+    toggleVisibility() {
+        this.visible.update((v) => !v);
+    }
+    // ===== ControlValueAccessor =====
+    value = '';
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PasswordInputComponent, isStandalone: true, selector: "fk-password-input", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, toggleIconSize: { classPropertyName: "toggleIconSize", publicName: "toggleIconSize", isSignal: true, isRequired: false, transformFunction: null }, toggleIconColor: { classPropertyName: "toggleIconColor", publicName: "toggleIconColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => PasswordInputComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-password-input__wrapper\">\n  <input\n    #inputEl\n    class=\"fk-password-input__native\"\n    [attr.id]=\"id\"\n    [attr.type]=\"visible() ? 'text' : 'password'\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabledSignal()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      class=\"fk-password-input__toggle\"\n      [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n      [disabled]=\"isDisabledSignal()\"\n      [style.font-size]=\"toggleSizeStyle()\"\n      [style.color]=\"toggleColorStyle()\"\n      (click)=\"toggleVisibility()\"\n      tabindex=\"-1\"\n    >\n      @if (visible()) {\n        <svg\n          class=\"fk-password-input__icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M13.455 13.455A7.553 7.553 0 0 1 9 15c-4.5 0-7.5-6-7.5-6a13.838 13.838 0 0 1 3.795-4.455\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M7.425 3.18A6.84 6.84 0 0 1 9 3c4.5 0 7.5 6 7.5 6a13.875 13.875 0 0 1-1.62 2.393\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <line\n            x1=\"1.5\"\n            y1=\"1.5\"\n            x2=\"16.5\"\n            y2=\"16.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else {\n        <svg\n          class=\"fk-password-input__icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M1.5 9s3-6 7.5-6 7.5 6 7.5 6-3 6-7.5 6S1.5 9 1.5 9z\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <circle\n            cx=\"9\"\n            cy=\"9\"\n            r=\"2.25\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.fk-password-input__wrapper{position:relative;display:flex;align-items:center}.fk-password-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-password-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-password-input__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-password-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-password-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}:host(.fk-password-input--has-toggle) .fk-password-input__native{padding-right:2.5rem}.fk-password-input__toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;padding:.25rem;background:none;border:none;border-radius:var(--fk-radius-sm, .25rem);cursor:pointer;transition:color .15s ease}.fk-password-input__toggle:hover:not(:disabled){color:var(--fk-color-text, #1f2d3d)}.fk-password-input__toggle:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-password-input__icon{width:1em;height:1em;display:block}:host-context(.fk-form-field--has-prefix) .fk-password-input__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-password-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-password-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PasswordInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-password-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => PasswordInputComponent),
+                        },
+                    ], template: "<div class=\"fk-password-input__wrapper\">\n  <input\n    #inputEl\n    class=\"fk-password-input__native\"\n    [attr.id]=\"id\"\n    [attr.type]=\"visible() ? 'text' : 'password'\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabledSignal()\"\n    [attr.autocomplete]=\"autocomplete()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      class=\"fk-password-input__toggle\"\n      [attr.aria-label]=\"visible() ? 'Hide password' : 'Show password'\"\n      [disabled]=\"isDisabledSignal()\"\n      [style.font-size]=\"toggleSizeStyle()\"\n      [style.color]=\"toggleColorStyle()\"\n      (click)=\"toggleVisibility()\"\n      tabindex=\"-1\"\n    >\n      @if (visible()) {\n        <svg\n          class=\"fk-password-input__icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M13.455 13.455A7.553 7.553 0 0 1 9 15c-4.5 0-7.5-6-7.5-6a13.838 13.838 0 0 1 3.795-4.455\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            d=\"M7.425 3.18A6.84 6.84 0 0 1 9 3c4.5 0 7.5 6 7.5 6a13.875 13.875 0 0 1-1.62 2.393\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <line\n            x1=\"1.5\"\n            y1=\"1.5\"\n            x2=\"16.5\"\n            y2=\"16.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else {\n        <svg\n          class=\"fk-password-input__icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M1.5 9s3-6 7.5-6 7.5 6 7.5 6-3 6-7.5 6S1.5 9 1.5 9z\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <circle\n            cx=\"9\"\n            cy=\"9\"\n            r=\"2.25\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      }\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.fk-password-input__wrapper{position:relative;display:flex;align-items:center}.fk-password-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-password-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-password-input__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-password-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-password-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}:host(.fk-password-input--has-toggle) .fk-password-input__native{padding-right:2.5rem}.fk-password-input__toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;padding:.25rem;background:none;border:none;border-radius:var(--fk-radius-sm, .25rem);cursor:pointer;transition:color .15s ease}.fk-password-input__toggle:hover:not(:disabled){color:var(--fk-color-text, #1f2d3d)}.fk-password-input__toggle:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-password-input__icon{width:1em;height:1em;display:block}:host-context(.fk-form-field--has-prefix) .fk-password-input__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-password-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-password-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], toggleIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleIconSize", required: false }] }], toggleIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleIconColor", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextRadioId = 0;
+class RadioComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** List of radio options to render. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** HTML name attribute shared across all radio buttons in the group. */
+    name = input(`fk-radio-group-${nextRadioId}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // ===== FieldControl =====
+    id = `fk-radio-${nextRadioId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-radio',
+        this.isFocused() ? 'fk-radio--focused' : '',
+        this.isDisabledSignal() ? 'fk-radio--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    value = '';
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return this.value === '' || this.value === null || this.value === undefined;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    // ===== ControlValueAccessor =====
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onSelectionChange(value) {
+        this.value = value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadioComponent, isStandalone: true, selector: "fk-radio", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => RadioComponent),
+            },
+        ], ngImport: i0, template: "<div\n  class=\"fk-radio__group\"\n  role=\"radiogroup\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-required]=\"isRequired() || null\"\n>\n  @for (option of options(); track option.value) {\n    <label\n      class=\"fk-radio__option\"\n      [class.fk-radio__option--disabled]=\"option.disabled || isDisabledSignal()\"\n      [class.fk-radio__option--checked]=\"option.value === value\"\n    >\n      <input\n        type=\"radio\"\n        class=\"fk-radio__native\"\n        [attr.name]=\"name()\"\n        [value]=\"option.value\"\n        [checked]=\"option.value === value\"\n        [disabled]=\"option.disabled || isDisabledSignal()\"\n        (change)=\"onSelectionChange(option.value)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n      <span class=\"fk-radio__indicator\"></span>\n      <span class=\"fk-radio__label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n", styles: [":host{display:block}.fk-radio__group{display:flex;flex-direction:column;gap:var(--fk-radio-gap, var(--fk-rhythm-2, .5rem))}.fk-radio__option{display:inline-flex;align-items:flex-start;gap:var(--fk-radio-gap, var(--fk-rhythm-2, .5rem));cursor:pointer}.fk-radio__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-radio__indicator{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--fk-radio-size, 1.125rem);height:var(--fk-radio-size, 1.125rem);margin-top:.125rem;border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-radius-full, 9999px);background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.fk-radio__indicator:after{content:\"\";display:block;width:.5rem;height:.5rem;border-radius:var(--fk-radius-full, 9999px);background:transparent;transition:background-color .15s ease,transform .15s ease;transform:scale(0)}.fk-radio__label{font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));-webkit-user-select:none;user-select:none}.fk-radio__option:hover .fk-radio__indicator{border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-radio__native:focus-visible~.fk-radio__indicator{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-radio__option--checked .fk-radio__indicator{border-color:var(--fk-color-primary, #0a84ff)}.fk-radio__option--checked .fk-radio__indicator:after{background:var(--fk-color-primary, #0a84ff);transform:scale(1)}.fk-radio__option--disabled{cursor:not-allowed}.fk-radio__option--disabled .fk-radio__indicator,.fk-radio__option--disabled .fk-radio__label{opacity:var(--fk-input-disabled-opacity, .5)}:host-context(.fk-form-field--invalid) .fk-radio__indicator{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => RadioComponent),
+                        },
+                    ], template: "<div\n  class=\"fk-radio__group\"\n  role=\"radiogroup\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-required]=\"isRequired() || null\"\n>\n  @for (option of options(); track option.value) {\n    <label\n      class=\"fk-radio__option\"\n      [class.fk-radio__option--disabled]=\"option.disabled || isDisabledSignal()\"\n      [class.fk-radio__option--checked]=\"option.value === value\"\n    >\n      <input\n        type=\"radio\"\n        class=\"fk-radio__native\"\n        [attr.name]=\"name()\"\n        [value]=\"option.value\"\n        [checked]=\"option.value === value\"\n        [disabled]=\"option.disabled || isDisabledSignal()\"\n        (change)=\"onSelectionChange(option.value)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n      />\n      <span class=\"fk-radio__indicator\"></span>\n      <span class=\"fk-radio__label\">{{ option.label }}</span>\n    </label>\n  }\n</div>\n", styles: [":host{display:block}.fk-radio__group{display:flex;flex-direction:column;gap:var(--fk-radio-gap, var(--fk-rhythm-2, .5rem))}.fk-radio__option{display:inline-flex;align-items:flex-start;gap:var(--fk-radio-gap, var(--fk-rhythm-2, .5rem));cursor:pointer}.fk-radio__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-radio__indicator{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--fk-radio-size, 1.125rem);height:var(--fk-radio-size, 1.125rem);margin-top:.125rem;border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-radius-full, 9999px);background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.fk-radio__indicator:after{content:\"\";display:block;width:.5rem;height:.5rem;border-radius:var(--fk-radius-full, 9999px);background:transparent;transition:background-color .15s ease,transform .15s ease;transform:scale(0)}.fk-radio__label{font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));-webkit-user-select:none;user-select:none}.fk-radio__option:hover .fk-radio__indicator{border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-radio__native:focus-visible~.fk-radio__indicator{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-radio__option--checked .fk-radio__indicator{border-color:var(--fk-color-primary, #0a84ff)}.fk-radio__option--checked .fk-radio__indicator:after{background:var(--fk-color-primary, #0a84ff);transform:scale(1)}.fk-radio__option--disabled{cursor:not-allowed}.fk-radio__option--disabled .fk-radio__indicator,.fk-radio__option--disabled .fk-radio__label{opacity:var(--fk-input-disabled-opacity, .5)}:host-context(.fk-form-field--invalid) .fk-radio__indicator{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextSelectId = 0;
+class SelectComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** List of options to render inside the native select element. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Placeholder option displayed when no value is selected. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // ===== FieldControl =====
+    id = `fk-select-${nextSelectId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-select',
+        this.isFocused() ? 'fk-select--focused' : '',
+        this.isDisabledSignal() ? 'fk-select--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    value = '';
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return this.value === '' || this.value === null || this.value === undefined;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const select = this.inputRef()?.nativeElement;
+        if (select && !this.isDisabledSignal()) {
+            select.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+        const select = this.inputRef()?.nativeElement;
+        if (select) {
+            select.value = String(this.value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onSelectionChange(event) {
+        const select = event.target;
+        this.value = select.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SelectComponent, isStandalone: true, selector: "fk-select", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => SelectComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-select__wrapper\">\n  <select\n    #inputEl\n    class=\"fk-select__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onSelectionChange($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (placeholder()) {\n      <option value=\"\" disabled [selected]=\"!value\">\n        {{ placeholder() }}\n      </option>\n    }\n    @for (option of options(); track option.value) {\n      <option\n        [value]=\"option.value\"\n        [disabled]=\"option.disabled ?? false\"\n        [selected]=\"option.value === value\"\n      >\n        {{ option.label }}\n      </option>\n    }\n  </select>\n  <svg\n    class=\"fk-select__arrow\"\n    viewBox=\"0 0 12 8\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <polyline points=\"1 1.5 6 6.5 11 1.5\" />\n  </svg>\n</div>\n", styles: [":host{display:block}.fk-select__wrapper{position:relative;display:flex;align-items:center}.fk-select__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));padding-right:2.25rem;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-select__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-select__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-select__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-select__arrow{position:absolute;right:.75rem;width:.75rem;height:.75rem;color:var(--fk-color-muted, #8a98a8);pointer-events:none}:host-context(.fk-form-field--invalid) .fk-select__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field:not(.fk-form-field--filled)) .fk-select__native{color:var(--fk-select-placeholder-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)))}:host-context(.fk-form-field--filled) .fk-select__native{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}:host-context(.fk-form-field--has-prefix) .fk-select__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-select__native{padding-right:calc(var(--fk-input-affix-width, 2.25rem) + 1.5rem)}:host-context(.fk-form-field--has-suffix) .fk-select__arrow{right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-select__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => SelectComponent),
+                        },
+                    ], template: "<div class=\"fk-select__wrapper\">\n  <select\n    #inputEl\n    class=\"fk-select__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onSelectionChange($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (placeholder()) {\n      <option value=\"\" disabled [selected]=\"!value\">\n        {{ placeholder() }}\n      </option>\n    }\n    @for (option of options(); track option.value) {\n      <option\n        [value]=\"option.value\"\n        [disabled]=\"option.disabled ?? false\"\n        [selected]=\"option.value === value\"\n      >\n        {{ option.label }}\n      </option>\n    }\n  </select>\n  <svg\n    class=\"fk-select__arrow\"\n    viewBox=\"0 0 12 8\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    <polyline points=\"1 1.5 6 6.5 11 1.5\" />\n  </svg>\n</div>\n", styles: [":host{display:block}.fk-select__wrapper{position:relative;display:flex;align-items:center}.fk-select__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));padding-right:2.25rem;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;appearance:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-select__native:hover:not(:disabled){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-select__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-select__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-select__arrow{position:absolute;right:.75rem;width:.75rem;height:.75rem;color:var(--fk-color-muted, #8a98a8);pointer-events:none}:host-context(.fk-form-field--invalid) .fk-select__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field:not(.fk-form-field--filled)) .fk-select__native{color:var(--fk-select-placeholder-color, var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8)))}:host-context(.fk-form-field--filled) .fk-select__native{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}:host-context(.fk-form-field--has-prefix) .fk-select__native{padding-left:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--has-suffix) .fk-select__native{padding-right:calc(var(--fk-input-affix-width, 2.25rem) + 1.5rem)}:host-context(.fk-form-field--has-suffix) .fk-select__arrow{right:var(--fk-input-affix-width, 2.25rem)}:host-context(.fk-form-field--invalid) .fk-select__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextSliderId = 0;
+class SliderComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** Minimum value of the slider range. */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum value of the slider range. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Increment step between slider positions. */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Whether the current numeric value is displayed alongside the thumb. */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-slider-${nextSliderId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-slider',
+        this.isFocused() ? 'fk-slider--focused' : '',
+        this.isDisabledSignal() ? 'fk-slider--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    currentValue = 0;
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return false; // Sliders always have a value
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.currentValue = value ?? this.min();
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = String(this.currentValue);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.currentValue = Number(input.value);
+        this.onChange(this.currentValue);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SliderComponent, isStandalone: true, selector: "fk-slider", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", 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 }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => SliderComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fk-slider__wrapper\">\n  <input\n    #inputEl\n    type=\"range\"\n    class=\"fk-slider__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"currentValue\"\n    [attr.min]=\"min()\"\n    [attr.max]=\"max()\"\n    [attr.step]=\"step()\"\n    [disabled]=\"isDisabledSignal()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  @if (showValue()) {\n    <span class=\"fk-slider__value\">{{ currentValue }}</span>\n  }\n</div>\n", styles: [":host{display:block}.fk-slider__wrapper{display:flex;align-items:center;gap:var(--fk-rhythm-3, .75rem)}.fk-slider__native{flex:1;width:100%;height:var(--fk-slider-track-height, 6px);margin:0;padding:0;appearance:none;background:var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border:none;border-radius:var(--fk-slider-track-radius, 3px);outline:none;cursor:pointer;transition:background .15s ease}.fk-slider__native::-webkit-slider-thumb{appearance:none;width:var(--fk-slider-thumb-size, 18px);height:var(--fk-slider-thumb-size, 18px);border:2px solid var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));border-radius:50%;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-slider__native::-moz-range-thumb{width:var(--fk-slider-thumb-size, 18px);height:var(--fk-slider-thumb-size, 18px);border:2px solid var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));border-radius:50%;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));cursor:pointer}.fk-slider__native:focus::-webkit-slider-thumb{box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-slider__native:focus::-moz-range-thumb{box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-slider__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-slider__native:disabled::-webkit-slider-thumb{cursor:not-allowed}.fk-slider__native:disabled::-moz-range-thumb{cursor:not-allowed}.fk-slider__value{min-width:2.5em;text-align:right;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => SliderComponent),
+                        },
+                    ], template: "<div class=\"fk-slider__wrapper\">\n  <input\n    #inputEl\n    type=\"range\"\n    class=\"fk-slider__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"currentValue\"\n    [attr.min]=\"min()\"\n    [attr.max]=\"max()\"\n    [attr.step]=\"step()\"\n    [disabled]=\"isDisabledSignal()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  @if (showValue()) {\n    <span class=\"fk-slider__value\">{{ currentValue }}</span>\n  }\n</div>\n", styles: [":host{display:block}.fk-slider__wrapper{display:flex;align-items:center;gap:var(--fk-rhythm-3, .75rem)}.fk-slider__native{flex:1;width:100%;height:var(--fk-slider-track-height, 6px);margin:0;padding:0;appearance:none;background:var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border:none;border-radius:var(--fk-slider-track-radius, 3px);outline:none;cursor:pointer;transition:background .15s ease}.fk-slider__native::-webkit-slider-thumb{appearance:none;width:var(--fk-slider-thumb-size, 18px);height:var(--fk-slider-thumb-size, 18px);border:2px solid var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));border-radius:50%;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.fk-slider__native::-moz-range-thumb{width:var(--fk-slider-thumb-size, 18px);height:var(--fk-slider-thumb-size, 18px);border:2px solid var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));border-radius:50%;background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));cursor:pointer}.fk-slider__native:focus::-webkit-slider-thumb{box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-slider__native:focus::-moz-range-thumb{box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-slider__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-slider__native:disabled::-webkit-slider-thumb{cursor:not-allowed}.fk-slider__native:disabled::-moz-range-thumb{cursor:not-allowed}.fk-slider__value{min-width:2.5em;text-align:right;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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 }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextSwitchId = 0;
+class SwitchComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // ===== INTERNAL STATE =====
+    checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-switch-${nextSwitchId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-switch',
+        this.isFocused() ? 'fk-switch--focused' : '',
+        this.isDisabledSignal() ? 'fk-switch--disabled' : '',
+        this.checked() ? 'fk-switch--checked' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.checked();
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+            input.click();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onChanged(event) {
+        const input = event.target;
+        this.checked.set(input.checked);
+        this.onChange(input.checked);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: SwitchComponent, isStandalone: true, selector: "fk-switch", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => SwitchComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<label class=\"fk-switch__layout\">\n  <input\n    #inputEl\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"fk-switch__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onChanged($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  <span class=\"fk-switch__track\">\n    <span class=\"fk-switch__thumb\"></span>\n  </span>\n  <span class=\"fk-switch__label\">\n    <ng-content />\n  </span>\n</label>\n", styles: [":host{display:block}.fk-switch__layout{display:inline-flex;align-items:center;gap:var(--fk-switch-gap, var(--fk-rhythm-2, .5rem));cursor:pointer}.fk-switch__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-switch__track{flex-shrink:0;position:relative;display:inline-flex;align-items:center;width:var(--fk-switch-width, 2.25rem);height:var(--fk-switch-height, 1.25rem);border-radius:var(--fk-radius-full, 9999px);background:var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));transition:background-color .2s ease,box-shadow .15s ease}.fk-switch__thumb{position:absolute;left:2px;width:var(--fk-switch-thumb-size, 1rem);height:var(--fk-switch-thumb-size, 1rem);border-radius:var(--fk-radius-full, 9999px);background:var(--fk-color-surface, #ffffff);box-shadow:var(--fk-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .15));transition:transform .2s ease}.fk-switch__label{font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));-webkit-user-select:none;user-select:none}.fk-switch__layout:hover .fk-switch__track{background:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-switch__native:focus-visible~.fk-switch__track{box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}:host(.fk-switch--checked) .fk-switch__track{background:var(--fk-color-primary, #0a84ff)}:host(.fk-switch--checked) .fk-switch__layout:hover .fk-switch__track{background:var(--fk-color-primary-hover, #0670e0)}:host(.fk-switch--checked) .fk-switch__thumb{transform:translate(1rem)}:host(.fk-switch--disabled) .fk-switch__layout{cursor:not-allowed}:host(.fk-switch--disabled) .fk-switch__track{opacity:var(--fk-input-disabled-opacity, .5)}:host(.fk-switch--disabled) .fk-switch__label{opacity:var(--fk-input-disabled-opacity, .5)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => SwitchComponent),
+                        },
+                    ], template: "<label class=\"fk-switch__layout\">\n  <input\n    #inputEl\n    type=\"checkbox\"\n    role=\"switch\"\n    class=\"fk-switch__native\"\n    [attr.id]=\"id\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabledSignal()\"\n    (change)=\"onChanged($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n  <span class=\"fk-switch__track\">\n    <span class=\"fk-switch__thumb\"></span>\n  </span>\n  <span class=\"fk-switch__label\">\n    <ng-content />\n  </span>\n</label>\n", styles: [":host{display:block}.fk-switch__layout{display:inline-flex;align-items:center;gap:var(--fk-switch-gap, var(--fk-rhythm-2, .5rem));cursor:pointer}.fk-switch__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fk-switch__track{flex-shrink:0;position:relative;display:inline-flex;align-items:center;width:var(--fk-switch-width, 2.25rem);height:var(--fk-switch-height, 1.25rem);border-radius:var(--fk-radius-full, 9999px);background:var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));transition:background-color .2s ease,box-shadow .15s ease}.fk-switch__thumb{position:absolute;left:2px;width:var(--fk-switch-thumb-size, 1rem);height:var(--fk-switch-thumb-size, 1rem);border-radius:var(--fk-radius-full, 9999px);background:var(--fk-color-surface, #ffffff);box-shadow:var(--fk-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .15));transition:transform .2s ease}.fk-switch__label{font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));-webkit-user-select:none;user-select:none}.fk-switch__layout:hover .fk-switch__track{background:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-switch__native:focus-visible~.fk-switch__track{box-shadow:var(--fk-input-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}:host(.fk-switch--checked) .fk-switch__track{background:var(--fk-color-primary, #0a84ff)}:host(.fk-switch--checked) .fk-switch__layout:hover .fk-switch__track{background:var(--fk-color-primary-hover, #0670e0)}:host(.fk-switch--checked) .fk-switch__thumb{transform:translate(1rem)}:host(.fk-switch--disabled) .fk-switch__layout{cursor:not-allowed}:host(.fk-switch--disabled) .fk-switch__track{opacity:var(--fk-input-disabled-opacity, .5)}:host(.fk-switch--disabled) .fk-switch__label{opacity:var(--fk-input-disabled-opacity, .5)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextTagInputId = 0;
+class TagInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown in the text input when there are no tags. */
+    placeholder = input('Add a tag...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    /** Character(s) that commit the current input as a new tag (default: comma). */
+    separator = input(',', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-tag-input-${nextTagInputId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    tags = signal([], ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-tag-input',
+        this.isFocused() ? 'fk-tag-input--focused' : '',
+        this.isDisabledSignal() ? 'fk-tag-input--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return this.tags().length === 0;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        this.focusInput();
+    }
+    /** Focuses the inner text input element. */
+    focusInput() {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.tags.set(Array.isArray(value) ? [...value] : []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== TAG MANAGEMENT =====
+    /** Adds a tag to the list if it is non-empty and not already present. */
+    addTag(tag) {
+        const trimmed = tag.trim();
+        if (!trimmed || this.tags().includes(trimmed)) {
+            return;
+        }
+        this.tags.update((current) => [...current, trimmed]);
+        this.onChange(this.tags());
+    }
+    /** Removes the given tag from the list. */
+    removeTag(tag, event) {
+        event?.stopPropagation();
+        this.tags.update((current) => current.filter((t) => t !== tag));
+        this.onChange(this.tags());
+    }
+    // ===== EVENT HANDLERS =====
+    onKeydown(event) {
+        const input = event.target;
+        const value = input.value;
+        if (event.key === 'Enter' || this.separator().includes(event.key)) {
+            event.preventDefault();
+            if (value.trim()) {
+                this.addTag(value);
+                input.value = '';
+            }
+        }
+        if (event.key === 'Backspace' && !value && this.tags().length > 0) {
+            const lastTag = this.tags()[this.tags().length - 1];
+            this.removeTag(lastTag);
+        }
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        // Add any remaining text as a tag
+        const input = this.inputRef()?.nativeElement;
+        if (input && input.value.trim()) {
+            this.addTag(input.value);
+            input.value = '';
+        }
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TagInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TagInputComponent, isStandalone: true, selector: "fk-tag-input", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => TagInputComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"fk-tag-input__container\"\n  role=\"group\"\n  tabindex=\"-1\"\n  (click)=\"focusInput()\"\n  (keydown.enter)=\"focusInput()\"\n>\n  @for (tag of tags(); track tag) {\n    <span class=\"fk-tag-input__tag\">\n      {{ tag }}\n      @if (!isDisabledSignal()) {\n        <button\n          type=\"button\"\n          class=\"fk-tag-input__remove\"\n          [attr.aria-label]=\"'Remove ' + tag\"\n          tabindex=\"-1\"\n          (click)=\"removeTag(tag, $event)\"\n        >\n          &times;\n        </button>\n      }\n    </span>\n  }\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"fk-tag-input__native\"\n    [attr.id]=\"id\"\n    [attr.placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabledSignal()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n</div>\n", styles: [":host{display:block}.fk-tag-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;box-sizing:border-box;min-height:calc(var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5)) * var(--fk-input-font-size, .875rem) + var(--fk-rhythm-2, .5rem) * 2 + 2px);padding:4px var(--fk-rhythm-3, .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));cursor:text;transition:border-color .15s ease,box-shadow .15s ease}:host(.fk-tag-input--focused) .fk-tag-input__container{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host(.fk-tag-input--disabled) .fk-tag-input__container{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-tag-input__tag{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;font-size:calc(var(--fk-input-font-size, .875rem) * .85);line-height:1.4;color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-color-muted-bg, #f1f5f9);border-radius:calc(var(--fk-input-border-radius, var(--fk-radius-md, .375rem)) - 2px);white-space:nowrap}.fk-tag-input__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin:0;font-size:var(--fk-font-size-sm, 14px);line-height:1;color:var(--fk-color-muted, #8a98a8);background:none;border:none;border-radius:50%;cursor:pointer}.fk-tag-input__remove:hover{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-tag-input-remove-bg-hover, rgba(0, 0, 0, .1))}.fk-tag-input__native{flex:1;min-width:60px;padding:4px 0;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:transparent;border:none;outline:none}.fk-tag-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-tag-input__native:disabled{cursor:not-allowed}:host-context(.fk-form-field--invalid) .fk-tag-input__container{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid):host(.fk-tag-input--focused) .fk-tag-input__container{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TagInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-tag-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => TagInputComponent),
+                        },
+                    ], template: "<div\n  class=\"fk-tag-input__container\"\n  role=\"group\"\n  tabindex=\"-1\"\n  (click)=\"focusInput()\"\n  (keydown.enter)=\"focusInput()\"\n>\n  @for (tag of tags(); track tag) {\n    <span class=\"fk-tag-input__tag\">\n      {{ tag }}\n      @if (!isDisabledSignal()) {\n        <button\n          type=\"button\"\n          class=\"fk-tag-input__remove\"\n          [attr.aria-label]=\"'Remove ' + tag\"\n          tabindex=\"-1\"\n          (click)=\"removeTag(tag, $event)\"\n        >\n          &times;\n        </button>\n      }\n    </span>\n  }\n  <input\n    #inputEl\n    type=\"text\"\n    class=\"fk-tag-input__native\"\n    [attr.id]=\"id\"\n    [attr.placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n    [attr.aria-describedby]=\"\n      describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n    \"\n    [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabledSignal()\"\n    (keydown)=\"onKeydown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n  />\n</div>\n", styles: [":host{display:block}.fk-tag-input__container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;box-sizing:border-box;min-height:calc(var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5)) * var(--fk-input-font-size, .875rem) + var(--fk-rhythm-2, .5rem) * 2 + 2px);padding:4px var(--fk-rhythm-3, .75rem);font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));cursor:text;transition:border-color .15s ease,box-shadow .15s ease}:host(.fk-tag-input--focused) .fk-tag-input__container{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}:host(.fk-tag-input--disabled) .fk-tag-input__container{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-tag-input__tag{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;font-size:calc(var(--fk-input-font-size, .875rem) * .85);line-height:1.4;color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-color-muted-bg, #f1f5f9);border-radius:calc(var(--fk-input-border-radius, var(--fk-radius-md, .375rem)) - 2px);white-space:nowrap}.fk-tag-input__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin:0;font-size:var(--fk-font-size-sm, 14px);line-height:1;color:var(--fk-color-muted, #8a98a8);background:none;border:none;border-radius:50%;cursor:pointer}.fk-tag-input__remove:hover{color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-tag-input-remove-bg-hover, rgba(0, 0, 0, .1))}.fk-tag-input__native{flex:1;min-width:60px;padding:4px 0;font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:transparent;border:none;outline:none}.fk-tag-input__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-tag-input__native:disabled{cursor:not-allowed}:host-context(.fk-form-field--invalid) .fk-tag-input__container{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid):host(.fk-tag-input--focused) .fk-tag-input__container{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextTextareaId = 0;
+class TextareaComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown when the textarea has no value. */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isReadonly = input(false, { ...(ngDevMode ? { debugName: "isReadonly" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    /** Number of visible text rows for the initial textarea height. */
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-textarea-${nextTextareaId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-textarea',
+        this.isFocused() ? 'fk-textarea--focused' : '',
+        this.isDisabledSignal() ? 'fk-textarea--disabled' : '',
+        this.isReadonly() ? 'fk-textarea--readonly' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get readonly() {
+        return this.isReadonly();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    value = '';
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: TextareaComponent, isStandalone: true, selector: "fk-textarea", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => TextareaComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<textarea\n  #inputEl\n  class=\"fk-textarea__native\"\n  [attr.id]=\"id\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [attr.rows]=\"rows()\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n></textarea>\n", styles: [":host{display:block}.fk-textarea__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;resize:vertical;transition:border-color .15s ease,box-shadow .15s ease}.fk-textarea__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-textarea__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-textarea__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-textarea__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-textarea__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-textarea__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-textarea__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-textarea', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => TextareaComponent),
+                        },
+                    ], template: "<textarea\n  #inputEl\n  class=\"fk-textarea__native\"\n  [attr.id]=\"id\"\n  [attr.placeholder]=\"placeholder()\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [attr.rows]=\"rows()\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n></textarea>\n", styles: [":host{display:block}.fk-textarea__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;resize:vertical;transition:border-color .15s ease,box-shadow .15s ease}.fk-textarea__native::placeholder{color:var(--fk-input-placeholder-color, var(--fk-color-muted, #8a98a8))}.fk-textarea__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-textarea__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-textarea__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-textarea__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-textarea__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-textarea__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let nextTimeInputId = 0;
+class TimeInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, {
+        optional: true,
+        self: true,
+    });
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    // ===== INPUTS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isRequired = input(false, { ...(ngDevMode ? { debugName: "isRequired" } : /* istanbul ignore next */ {}), alias: 'required' });
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    isReadonly = input(false, { ...(ngDevMode ? { debugName: "isReadonly" } : /* istanbul ignore next */ {}), alias: 'readonly' });
+    /** Earliest selectable time as an HH:MM string. */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable time as an HH:MM string. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Step in seconds between selectable time values. */
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    // ===== FieldControl =====
+    id = `fk-time-input-${nextTimeInputId++}`;
+    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = signal(false, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [
+        'fk-time-input',
+        this.isFocused() ? 'fk-time-input--focused' : '',
+        this.isDisabledSignal() ? 'fk-time-input--disabled' : '',
+        this.isReadonly() ? 'fk-time-input--readonly' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get focused() {
+        return this.isFocused();
+    }
+    get empty() {
+        return !this.value;
+    }
+    get disabled() {
+        return this.isDisabledSignal();
+    }
+    get required() {
+        return this.isRequired();
+    }
+    get readonly() {
+        return this.isReadonly();
+    }
+    get describedByIds() {
+        return this.describedByIdsSignal();
+    }
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set(ids);
+    }
+    onContainerClick(_event) {
+        const input = this.inputRef()?.nativeElement;
+        if (input && !this.isDisabledSignal()) {
+            input.focus();
+        }
+    }
+    // ===== ControlValueAccessor =====
+    value = '';
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value ?? '';
+        const input = this.inputRef()?.nativeElement;
+        if (input) {
+            input.value = this.value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabledSignal.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    // ===== EVENT HANDLERS =====
+    onInput(event) {
+        const input = event.target;
+        this.value = input.value;
+        this.onChange(this.value);
+    }
+    onFocus() {
+        this.isFocused.set(true);
+    }
+    onBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: TimeInputComponent, isStandalone: true, selector: "fk-time-input", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", 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 } }, host: { properties: { "class": "this.hostClass" } }, providers: [
+            {
+                provide: FIELD_CONTROL,
+                useExisting: forwardRef(() => TimeInputComponent),
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #inputEl\n  type=\"time\"\n  class=\"fk-time-input__native\"\n  [attr.id]=\"id\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.step]=\"step()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-time-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-time-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-time-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-time-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-time-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-time-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-time-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-time-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: FIELD_CONTROL,
+                            useExisting: forwardRef(() => TimeInputComponent),
+                        },
+                    ], template: "<input\n  #inputEl\n  type=\"time\"\n  class=\"fk-time-input__native\"\n  [attr.id]=\"id\"\n  [attr.aria-describedby]=\"\n    describedByIdsSignal().length ? describedByIdsSignal().join(' ') : null\n  \"\n  [attr.aria-invalid]=\"ngControl?.invalid ?? null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.step]=\"step()\"\n  [attr.readonly]=\"isReadonly() || null\"\n  [disabled]=\"isDisabledSignal()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n/>\n", styles: [":host{display:block}.fk-time-input__native{display:block;width:100%;box-sizing:border-box;margin:0;padding:var(--fk-input-padding, var(--fk-rhythm-2, .5rem) var(--fk-rhythm-3, .75rem));font-family:var(--fk-input-font-family, var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"));font-size:var(--fk-input-font-size, .875rem);font-weight:var(--fk-input-font-weight, var(--fk-font-weight-normal, 400));line-height:var(--fk-input-line-height, var(--fk-typography-body-line-height, 1.5));color:var(--fk-input-color, var(--fk-color-text, #1f2d3d));background:var(--fk-input-bg, var(--fk-color-surface, #ffffff));border:var(--fk-input-border-width, 1px) solid var(--fk-input-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-input-border-radius, var(--fk-radius-md, .375rem));outline:none;transition:border-color .15s ease,box-shadow .15s ease}.fk-time-input__native:hover:not(:disabled):not(:read-only){border-color:var(--fk-input-border-color-hover, var(--fk-color-muted, #8a98a8))}.fk-time-input__native:focus{border-color:var(--fk-input-border-color-focus, var(--fk-color-primary, #0a84ff));box-shadow:var(--fk-input-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)))}.fk-time-input__native:disabled{opacity:var(--fk-input-disabled-opacity, .5);cursor:not-allowed}.fk-time-input__native:read-only{cursor:default}:host-context(.fk-form-field--invalid) .fk-time-input__native{border-color:var(--fk-input-border-color-error, var(--fk-color-danger, #e02424))}:host-context(.fk-form-field--invalid) .fk-time-input__native:focus{box-shadow:var(--fk-input-error-focus-ring, 0 0 0 3px rgba(224, 36, 36, .2))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], isRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Registry that maps field type strings to Angular component classes.
+ *
+ * Built-in field types are registered by default. Custom field types
+ * can be registered at any time to extend the schema engine.
+ *
+ * @example
+ * ```ts
+ * // Register a custom field type
+ * registry.register('currency', CurrencyInputComponent);
+ *
+ * // Use in schema
+ * { key: 'price', type: 'currency', label: 'Price' }
+ * ```
+ */
+class FieldRegistry {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    components = new Map();
+    constructor() {
+        this.registerDefaults();
+    }
+    /**
+     * Registers a component class for a field type key.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    register(type, component) {
+        this.components.set(type, component);
+    }
+    /**
+     * Returns the component class for a field type key.
+     *
+     * @throws Error if the type is not registered
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get(type) {
+        const component = this.components.get(type);
+        if (!component) {
+            throw new Error(`FieldRegistry: unknown field type "${type}". ` +
+                `Register it with registry.register("${type}", Component).`);
+        }
+        return component;
+    }
+    /**
+     * Checks if a field type is registered.
+     */
+    has(type) {
+        return this.components.has(type);
+    }
+    registerDefaults() {
+        this.register('input', InputComponent);
+        this.register('password', PasswordInputComponent);
+        this.register('textarea', TextareaComponent);
+        this.register('number', NumberInputComponent);
+        this.register('select', SelectComponent);
+        this.register('checkbox', CheckboxComponent);
+        this.register('radio', RadioComponent);
+        this.register('switch', SwitchComponent);
+        this.register('date', DateInputComponent);
+        this.register('time', TimeInputComponent);
+        this.register('datetime', DatetimeInputComponent);
+        this.register('autocomplete', AutocompleteComponent);
+        this.register('file', FileUploadComponent);
+        this.register('tags', TagInputComponent);
+        this.register('slider', SliderComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Dynamically renders a single field from a schema definition.
+ *
+ * Wraps the control in a `fk-form-field` for consistent layout,
+ * accessibility, and error handling. Uses `ViewContainerRef` to
+ * instantiate the appropriate control component from the field registry.
+ *
+ * @example
+ * ```html
+ * <fk-field-outlet
+ *   [field]="fieldSchema"
+ *   [form]="formGroup"
+ *   [submitted]="submitted()"
+ * />
+ * ```
+ */
+class FieldOutletComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Schema definition for the field to render. */
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    /** Parent FormGroup used to bind the field's reactive control. */
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+    /** Whether the parent form has been submitted; propagated to fk-form-field. */
+    submitted = input(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    /** Whether this field is visible (for conditional visibility). */
+    visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ['fk-field-outlet', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    get hostDisplay() {
+        return this.visible() ? '' : 'none';
+    }
+    fieldRegistry = inject(FieldRegistry);
+    destroyRef = inject(DestroyRef);
+    controlHostRef = viewChild('controlHost', { ...(ngDevMode ? { debugName: "controlHostRef" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    /** Track what was last rendered to avoid unnecessary re-creation. */
+    renderedField = null;
+    renderedForm = null;
+    renderedType = null;
+    /** Subscription to statusChanges for disabled sync — cleaned up on re-render. */
+    statusSub = null;
+    /** Resolved component type from the registry. */
+    componentType = computed(() => this.fieldRegistry.get(this.field().type), ...(ngDevMode ? [{ debugName: "componentType" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.renderControl();
+        });
+        effect(() => {
+            this.setupVisibility();
+        });
+    }
+    renderControl() {
+        const container = this.controlHostRef();
+        if (!container) {
+            return;
+        }
+        const field = this.field();
+        const form = this.form();
+        const componentType = this.componentType();
+        // Skip re-render if the inputs haven't changed
+        if (field === this.renderedField &&
+            form === this.renderedForm &&
+            componentType === this.renderedType) {
+            return;
+        }
+        this.renderedField = field;
+        this.renderedForm = form;
+        this.renderedType = componentType;
+        // Clean up previous statusChanges subscription
+        this.statusSub?.unsubscribe();
+        this.statusSub = null;
+        container.clear();
+        const control = form.get(field.key);
+        if (!control) {
+            return;
+        }
+        const componentRef = container.createComponent(componentType);
+        const instance = componentRef.instance;
+        // Bind inputs that the control components typically accept
+        if (field.placeholder !== undefined && 'placeholder' in instance) {
+            componentRef.setInput('placeholder', field.placeholder);
+        }
+        if (field.autocomplete !== undefined && 'autocomplete' in instance) {
+            componentRef.setInput('autocomplete', field.autocomplete);
+        }
+        if (field.required && 'required' in instance) {
+            componentRef.setInput('required', true);
+        }
+        if (field.readonly && 'readonly' in instance) {
+            componentRef.setInput('readonly', true);
+        }
+        if (field.options && 'options' in instance) {
+            componentRef.setInput('options', field.options);
+        }
+        if (field.label && 'label' in instance) {
+            componentRef.setInput('label', field.label);
+        }
+        // Bind reactive form control
+        if (instance.ngControl === undefined || instance.ngControl === null) {
+            // Manually wire the control if no NgControl injected
+            if (typeof instance.writeValue === 'function') {
+                instance.writeValue(control.value);
+            }
+            if (typeof instance.registerOnChange === 'function') {
+                instance.registerOnChange((value) => {
+                    control.setValue(value);
+                    control.markAsDirty();
+                });
+            }
+            if (typeof instance.registerOnTouched === 'function') {
+                instance.registerOnTouched(() => {
+                    control.markAsTouched();
+                });
+            }
+            if (typeof instance.setDisabledState === 'function') {
+                instance.setDisabledState(control.disabled);
+                this.statusSub = control.statusChanges
+                    .pipe(map(() => control.disabled), distinctUntilChanged())
+                    .subscribe((disabled) => {
+                    instance.setDisabledState(disabled);
+                });
+            }
+        }
+    }
+    setupVisibility() {
+        const field = this.field();
+        const form = this.form();
+        const rule = field.visibleWhen;
+        if (!rule) {
+            this.visible.set(true);
+            return;
+        }
+        const dependentControl = form.get(rule.field);
+        if (!dependentControl) {
+            this.visible.set(true);
+            return;
+        }
+        // Evaluate initial visibility
+        this.evaluateVisibility(dependentControl.value, rule);
+        // Subscribe to changes
+        dependentControl.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.evaluateVisibility(value, rule);
+        });
+    }
+    evaluateVisibility(value, rule) {
+        if (rule.equals !== undefined) {
+            this.visible.set(value === rule.equals);
+        }
+        else if (rule.notEquals !== undefined) {
+            this.visible.set(value !== rule.notEquals);
+        }
+        else {
+            this.visible.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FieldOutletComponent, isStandalone: true, selector: "fk-field-outlet", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "style.display": "this.hostDisplay" } }, viewQueries: [{ propertyName: "controlHostRef", first: true, predicate: ["controlHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (field().ui?.labelEndLink) {\n  <div class=\"fk-field-outlet__label-row\">\n    <span class=\"fk-field-outlet__label-text\">\n      {{ field().label }}\n      @if (field().required) {\n        <span class=\"fk-field-outlet__required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n    <fk-link\n      variant=\"primary\"\n      size=\"small\"\n      [routerLink]=\"field().ui!.labelEndLink!.route\"\n    >\n      {{ field().ui!.labelEndLink!.text }}\n    </fk-link>\n  </div>\n}\n\n<fk-form-field\n  [label]=\"\n    field().ui?.labelEndLink\n      ? null\n      : field().type === 'checkbox'\n        ? null\n        : (field().label ?? null)\n  \"\n  [showErrorsOn]=\"'touched'\"\n  [submitted]=\"submitted()\"\n  [errorMessages]=\"field().errorMessages ?? null\"\n  [fallbackControl]=\"form().get(field().key)\"\n  [style.display]=\"visible() ? '' : 'none'\"\n>\n  @if (field().ui?.prefixIcon) {\n    <fk-icon\n      fkPrefix\n      [name]=\"field().ui!.prefixIcon!\"\n      size=\"sm\"\n      color=\"muted\"\n    />\n  }\n  <ng-container #controlHost />\n  @if (field().ui?.hint) {\n    <fk-hint>{{ field().ui?.hint }}</fk-hint>\n  }\n</fk-form-field>\n", styles: [".fk-field-outlet__label-row{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--fk-font-family-base);font-size:var(--fk-form-label-font-size);font-weight:var(--fk-form-label-font-weight);line-height:var(--fk-form-label-line-height);color:var(--fk-form-label-color)}.fk-field-outlet__label-text{display:flex;align-items:baseline;gap:.25em}.fk-field-outlet__required{color:var(--fk-form-error-color)}.fk-field-outlet__label-row fk-link{--fk-link-font-size-small: .75rem;--fk-link-font-size-medium: .75rem}.fk-field-outlet__label-row+fk-form-field{margin-top:0}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "fk-form-field", inputs: ["className", "label", "showErrorsOn", "submitted", "externalDescribedBy", "fallbackControl", "errorMessages"] }, { kind: "directive", type: FkPrefixDirective, selector: "[fkPrefix]" }, { kind: "component", type: HintComponent, selector: "fk-hint", inputs: ["className", "id"] }, { kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "component", type: LinkComponent, selector: "fk-link", inputs: ["href", "routerLink", "queryParams", "variant", "size", "underline", "target", "rel", "external", "disabled", "loading", "download", "className", "id", "ariaLabel", "ariaDescribedBy", "ariaCurrent", "role", "tabIndex", "trackingId", "trackingCategory", "trackingLabel", "dataAttributes"], outputs: ["clicked"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-field-outlet', standalone: true, imports: [
+                        FormFieldComponent,
+                        FkPrefixDirective,
+                        HintComponent,
+                        IconComponent,
+                        LinkComponent,
+                        ReactiveFormsModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (field().ui?.labelEndLink) {\n  <div class=\"fk-field-outlet__label-row\">\n    <span class=\"fk-field-outlet__label-text\">\n      {{ field().label }}\n      @if (field().required) {\n        <span class=\"fk-field-outlet__required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n    <fk-link\n      variant=\"primary\"\n      size=\"small\"\n      [routerLink]=\"field().ui!.labelEndLink!.route\"\n    >\n      {{ field().ui!.labelEndLink!.text }}\n    </fk-link>\n  </div>\n}\n\n<fk-form-field\n  [label]=\"\n    field().ui?.labelEndLink\n      ? null\n      : field().type === 'checkbox'\n        ? null\n        : (field().label ?? null)\n  \"\n  [showErrorsOn]=\"'touched'\"\n  [submitted]=\"submitted()\"\n  [errorMessages]=\"field().errorMessages ?? null\"\n  [fallbackControl]=\"form().get(field().key)\"\n  [style.display]=\"visible() ? '' : 'none'\"\n>\n  @if (field().ui?.prefixIcon) {\n    <fk-icon\n      fkPrefix\n      [name]=\"field().ui!.prefixIcon!\"\n      size=\"sm\"\n      color=\"muted\"\n    />\n  }\n  <ng-container #controlHost />\n  @if (field().ui?.hint) {\n    <fk-hint>{{ field().ui?.hint }}</fk-hint>\n  }\n</fk-form-field>\n", styles: [".fk-field-outlet__label-row{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--fk-font-family-base);font-size:var(--fk-form-label-font-size);font-weight:var(--fk-form-label-font-weight);line-height:var(--fk-form-label-line-height);color:var(--fk-form-label-color)}.fk-field-outlet__label-text{display:flex;align-items:baseline;gap:.25em}.fk-field-outlet__required{color:var(--fk-form-error-color)}.fk-field-outlet__label-row fk-link{--fk-link-font-size-small: .75rem;--fk-link-font-size-medium: .75rem}.fk-field-outlet__label-row+fk-form-field{margin-top:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostDisplay: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], controlHostRef: [{ type: i0.ViewChild, args: ['controlHost', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }] } });
+
+/**
+ * Renders a FormArray as repeatable rows of fields.
+ *
+ * Each row is a FormGroup built from the field's `arrayFields` definition.
+ * Provides add/remove row functionality with min/max constraints.
+ *
+ * @example
+ * ```html
+ * <fk-field-array-outlet
+ *   [field]="phoneNumbersField"
+ *   [formArray]="form.get('phones') as FormArray"
+ *   [submitted]="submitted()"
+ * />
+ * ```
+ */
+class FieldArrayOutletComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Schema definition for the repeating field, including arrayFields and row constraints. */
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    /** The FormArray backing the repeatable rows. */
+    formArray = input.required(...(ngDevMode ? [{ debugName: "formArray" }] : /* istanbul ignore next */ []));
+    /** Whether the parent form has been submitted; propagated to each fk-field-outlet. */
+    submitted = input(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    /** Fires with the index of the newly added row. */
+    rowAdded = output();
+    /** Fires with the index of the removed row. */
+    rowRemoved = output();
+    classes = computed(() => ['fk-field-array', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    schemaParser = inject(SchemaParser);
+    /** Returns the current FormGroups for each rendered row. */
+    rows() {
+        const arr = this.formArray();
+        return arr.controls;
+    }
+    /** Returns true when another row can be added without exceeding maxRows. */
+    canAdd() {
+        const max = this.field().maxRows;
+        if (max === undefined) {
+            return true;
+        }
+        return this.formArray().length < max;
+    }
+    /** Returns true when a row can be removed without going below minRows. */
+    canRemove() {
+        const min = this.field().minRows ?? 0;
+        return this.formArray().length > min;
+    }
+    /** Appends a new blank row to the FormArray. */
+    addRow() {
+        if (!this.canAdd()) {
+            return;
+        }
+        const newRow = this.schemaParser.buildArrayRow(this.field());
+        this.formArray().push(newRow);
+        this.rowAdded.emit(this.formArray().length - 1);
+    }
+    /** Removes the row at the given index from the FormArray. */
+    removeRow(index) {
+        if (!this.canRemove()) {
+            return;
+        }
+        this.formArray().removeAt(index);
+        this.rowRemoved.emit(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldArrayOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FieldArrayOutletComponent, isStandalone: true, selector: "fk-field-array-outlet", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowAdded: "rowAdded", rowRemoved: "rowRemoved" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (field().label) {\n  <legend class=\"fk-field-array__legend\">{{ field().label }}</legend>\n}\n@for (row of rows(); track $index) {\n  <div class=\"fk-field-array__row\" [formGroup]=\"row\">\n    @for (childField of field().arrayFields ?? []; track childField.key) {\n      <fk-field-outlet\n        [field]=\"childField\"\n        [form]=\"row\"\n        [submitted]=\"submitted()\"\n      />\n    }\n    @if (canRemove()) {\n      <button\n        type=\"button\"\n        class=\"fk-field-array__remove\"\n        aria-label=\"Remove row\"\n        (click)=\"removeRow($index)\"\n      >\n        &times;\n      </button>\n    }\n  </div>\n}\n@if (canAdd()) {\n  <button type=\"button\" class=\"fk-field-array__add\" (click)=\"addRow()\">\n    + Add\n  </button>\n}\n", styles: [":host{display:block}.fk-field-array__legend{font-size:var( --fk-field-array-label-font-size, var(--fk-form-label-font-size, .875rem) );font-weight:var( --fk-field-array-label-font-weight, var(--fk-form-label-font-weight, 500) );color:var( --fk-field-array-label-color, var(--fk-form-label-color, #1f2d3d) )}.fk-field-array__row{display:flex;column-gap:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem));align-items:flex-start;margin-top:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem))}.fk-field-array__legend+.fk-field-array__row{margin-top:var( --fk-field-array-label-gap, var(--fk-form-label-gap, .375rem) )}.fk-field-array__row>fk-field-outlet{flex:1;--fk-form-label-gap: 0}.fk-field-array__remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));height:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));margin-top:var(--fk-field-array-remove-offset, .25rem);padding:0;font-size:1.125rem;line-height:1;color:var(--fk-field-array-remove-color, var(--fk-color-muted, #8a98a8));background:transparent;border:1px solid var( --fk-field-array-remove-border-color, var(--fk-color-border, #d9e2ee) );border-radius:var( --fk-field-array-remove-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__remove:hover{color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) );border-color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) )}.fk-field-array__remove:focus-visible{outline:none;box-shadow:var( --fk-field-array-remove-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}.fk-field-array__add{margin-top:var(--fk-field-array-add-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-field-array-add-padding-y, var(--fk-rhythm-2, .5rem)) var(--fk-field-array-add-padding-x, var(--fk-rhythm-4, 1rem));font-size:var( --fk-field-array-add-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-field-array-add-color, var(--fk-color-primary, #0a84ff));background:transparent;border:1px dashed var(--fk-field-array-add-border-color, var(--fk-color-border, #d9e2ee));border-radius:var( --fk-field-array-add-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__add:hover{border-color:var( --fk-field-array-add-hover-border-color, var(--fk-color-primary, #0a84ff) )}.fk-field-array__add:focus-visible{outline:none;box-shadow:var( --fk-field-array-add-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}\n"], dependencies: [{ kind: "component", type: FieldOutletComponent, selector: "fk-field-outlet", inputs: ["className", "field", "form", "submitted"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldArrayOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-field-array-outlet', standalone: true, imports: [FieldOutletComponent, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (field().label) {\n  <legend class=\"fk-field-array__legend\">{{ field().label }}</legend>\n}\n@for (row of rows(); track $index) {\n  <div class=\"fk-field-array__row\" [formGroup]=\"row\">\n    @for (childField of field().arrayFields ?? []; track childField.key) {\n      <fk-field-outlet\n        [field]=\"childField\"\n        [form]=\"row\"\n        [submitted]=\"submitted()\"\n      />\n    }\n    @if (canRemove()) {\n      <button\n        type=\"button\"\n        class=\"fk-field-array__remove\"\n        aria-label=\"Remove row\"\n        (click)=\"removeRow($index)\"\n      >\n        &times;\n      </button>\n    }\n  </div>\n}\n@if (canAdd()) {\n  <button type=\"button\" class=\"fk-field-array__add\" (click)=\"addRow()\">\n    + Add\n  </button>\n}\n", styles: [":host{display:block}.fk-field-array__legend{font-size:var( --fk-field-array-label-font-size, var(--fk-form-label-font-size, .875rem) );font-weight:var( --fk-field-array-label-font-weight, var(--fk-form-label-font-weight, 500) );color:var( --fk-field-array-label-color, var(--fk-form-label-color, #1f2d3d) )}.fk-field-array__row{display:flex;column-gap:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem));align-items:flex-start;margin-top:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem))}.fk-field-array__legend+.fk-field-array__row{margin-top:var( --fk-field-array-label-gap, var(--fk-form-label-gap, .375rem) )}.fk-field-array__row>fk-field-outlet{flex:1;--fk-form-label-gap: 0}.fk-field-array__remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));height:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));margin-top:var(--fk-field-array-remove-offset, .25rem);padding:0;font-size:1.125rem;line-height:1;color:var(--fk-field-array-remove-color, var(--fk-color-muted, #8a98a8));background:transparent;border:1px solid var( --fk-field-array-remove-border-color, var(--fk-color-border, #d9e2ee) );border-radius:var( --fk-field-array-remove-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__remove:hover{color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) );border-color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) )}.fk-field-array__remove:focus-visible{outline:none;box-shadow:var( --fk-field-array-remove-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}.fk-field-array__add{margin-top:var(--fk-field-array-add-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-field-array-add-padding-y, var(--fk-rhythm-2, .5rem)) var(--fk-field-array-add-padding-x, var(--fk-rhythm-4, 1rem));font-size:var( --fk-field-array-add-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-field-array-add-color, var(--fk-color-primary, #0a84ff));background:transparent;border:1px dashed var(--fk-field-array-add-border-color, var(--fk-color-border, #d9e2ee));border-radius:var( --fk-field-array-add-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__add:hover{border-color:var( --fk-field-array-add-hover-border-color, var(--fk-color-primary, #0a84ff) )}.fk-field-array__add:focus-visible{outline:none;box-shadow:var( --fk-field-array-add-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], rowAdded: [{ type: i0.Output, args: ["rowAdded"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Renders a form section with an optional title, description,
+ * and layout-aware field rendering.
+ *
+ * @example
+ * ```html
+ * <fk-section-outlet
+ *   [section]="section"
+ *   [form]="formGroup"
+ *   [submitted]="submitted()"
+ * />
+ * ```
+ */
+class SectionOutletComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Schema section definition including its title, description, and field list. */
+    section = input.required(...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    /** Parent FormGroup used to bind each field's reactive control. */
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+    /** Whether the parent form has been submitted; propagated to each fk-field-outlet. */
+    submitted = input(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ['fk-section-outlet', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    /** Looks up a field definition within this section by its key. */
+    getField(key) {
+        return this.section().fields.find((f) => f.key === key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SectionOutletComponent, isStandalone: true, selector: "fk-section-outlet", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (section().title) {\n  <h3 class=\"fk-section__title\">{{ section().title }}</h3>\n}\n@if (section().description) {\n  <p class=\"fk-section__description\">{{ section().description }}</p>\n}\n<div class=\"fk-section__fields\">\n  @if (section().layout?.length) {\n    @for (row of section().layout!; track $index) {\n      <div class=\"fk-section__row\">\n        @for (col of row.columns; track col.fieldKey) {\n          <div class=\"fk-section__col\" [style.--fk-col-span]=\"col.span ?? 12\">\n            @if (getField(col.fieldKey); as field) {\n              <fk-field-outlet\n                [field]=\"field\"\n                [form]=\"form()\"\n                [submitted]=\"submitted()\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    @for (field of section().fields; track field.key) {\n      <fk-field-outlet\n        [field]=\"field\"\n        [form]=\"form()\"\n        [submitted]=\"submitted()\"\n      />\n    }\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:var(--fk-rhythm-6, 1.5rem)}.fk-section__title{font-size:1.125rem;font-weight:600;color:var(--fk-form-label-color);margin:0 0 var(--fk-rhythm-2, .5rem)}.fk-section__description{font-size:var(--fk-form-hint-font-size);color:var(--fk-form-hint-color);margin:0 0 var(--fk-rhythm-4, 1rem)}.fk-section__fields{display:flex;flex-direction:column}.fk-section__row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--fk-form-field-gap)}.fk-section__col{grid-column:span var(--fk-col-span, 12)}\n"], dependencies: [{ kind: "component", type: FieldOutletComponent, selector: "fk-field-outlet", inputs: ["className", "field", "form", "submitted"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SectionOutletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-section-outlet', standalone: true, imports: [FieldOutletComponent, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (section().title) {\n  <h3 class=\"fk-section__title\">{{ section().title }}</h3>\n}\n@if (section().description) {\n  <p class=\"fk-section__description\">{{ section().description }}</p>\n}\n<div class=\"fk-section__fields\">\n  @if (section().layout?.length) {\n    @for (row of section().layout!; track $index) {\n      <div class=\"fk-section__row\">\n        @for (col of row.columns; track col.fieldKey) {\n          <div class=\"fk-section__col\" [style.--fk-col-span]=\"col.span ?? 12\">\n            @if (getField(col.fieldKey); as field) {\n              <fk-field-outlet\n                [field]=\"field\"\n                [form]=\"form()\"\n                [submitted]=\"submitted()\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    @for (field of section().fields; track field.key) {\n      <fk-field-outlet\n        [field]=\"field\"\n        [form]=\"form()\"\n        [submitted]=\"submitted()\"\n      />\n    }\n  }\n</div>\n", styles: [":host{display:block;margin-bottom:var(--fk-rhythm-6, 1.5rem)}.fk-section__title{font-size:1.125rem;font-weight:600;color:var(--fk-form-label-color);margin:0 0 var(--fk-rhythm-2, .5rem)}.fk-section__description{font-size:var(--fk-form-hint-font-size);color:var(--fk-form-hint-color);margin:0 0 var(--fk-rhythm-4, 1rem)}.fk-section__fields{display:flex;flex-direction:column}.fk-section__row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--fk-form-field-gap)}.fk-section__col{grid-column:span var(--fk-col-span, 12)}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Renders a complete form from a schema definition.
+ *
+ * Generates a FormGroup from the schema, wraps it in a `fk-form`,
+ * and renders each field via `fk-field-outlet`. Supports layout
+ * sections for organized field grouping.
+ *
+ * @example
+ * ```ts
+ * schema: FormSchema = {
+ *   fields: [
+ *     { key: 'email', type: 'input', label: 'Email', required: true },
+ *     { key: 'password', type: 'password', label: 'Password', required: true },
+ *   ],
+ * };
+ * ```
+ *
+ * ```html
+ * <fk-form-renderer
+ *   [schema]="schema"
+ *   (formSubmit)="onSubmit($event)"
+ * />
+ * ```
+ */
+class FormRendererComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** The form schema to render. */
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional externally provided FormGroup.
+     * If not provided, one is auto-generated from the schema.
+     */
+    form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+    /** Emits the FormGroup value when the form is submitted. */
+    formSubmit = output();
+    /** The resolved FormGroup (either provided or auto-generated). */
+    resolvedForm = signal(null, ...(ngDevMode ? [{ debugName: "resolvedForm" }] : /* istanbul ignore next */ []));
+    /** Reference to the inner fk-form for submission state. */
+    formRef = signal(null, ...(ngDevMode ? [{ debugName: "formRef" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ['fk-form-renderer', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    schemaParser = inject(SchemaParser);
+    el = inject(ElementRef);
+    ngOnInit() {
+        const externalForm = this.form();
+        if (externalForm) {
+            this.resolvedForm.set(externalForm);
+        }
+        else {
+            const generated = this.schemaParser.buildFormGroup(this.schema());
+            this.resolvedForm.set(generated);
+        }
+    }
+    /** Looks up a schema field definition by its key. */
+    getField(key) {
+        return this.schema().fields.find((f) => f.key === key);
+    }
+    /** Returns the FormArray for a repeating field at the given key. */
+    getFormArray(key) {
+        return this.resolvedForm()?.get(key);
+    }
+    onFormSubmit() {
+        const form = this.resolvedForm();
+        if (!form) {
+            return;
+        }
+        this.formSubmit.emit(form.getRawValue());
+    }
+    /**
+     * Finds the first invalid field in schema order and focuses its input.
+     * Call this after markAllAsTouched() to direct the user to the first error.
+     */
+    focusFirstInvalidField() {
+        const form = this.resolvedForm();
+        if (!form) {
+            return;
+        }
+        const fields = this.schema().fields;
+        const firstInvalidIndex = fields.findIndex((f) => form.get(f.key)?.invalid);
+        if (firstInvalidIndex < 0) {
+            return;
+        }
+        setTimeout(() => {
+            const host = this.el.nativeElement;
+            const outlets = Array.from(host.querySelectorAll('fk-field-outlet'));
+            const target = outlets[firstInvalidIndex];
+            if (!target) {
+                return;
+            }
+            const input = target.querySelector('input, select, textarea');
+            if (input) {
+                input.focus();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormRendererComponent, isStandalone: true, selector: "fk-form-renderer", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (resolvedForm()) {\n  <fk-form (formSubmit)=\"onFormSubmit()\">\n    <div class=\"fk-form-renderer__fields\" [formGroup]=\"resolvedForm()!\">\n      @if (schema().sections?.length) {\n        @for (section of schema().sections!; track $index) {\n          <fk-section-outlet\n            [section]=\"section\"\n            [form]=\"resolvedForm()!\"\n            [submitted]=\"formRef()?.submitted() ?? false\"\n          />\n        }\n      }\n      @if (schema().layout?.length) {\n        @for (row of schema().layout!; track $index) {\n          <div class=\"fk-form-renderer__row\">\n            @for (col of row.columns; track col.fieldKey) {\n              <div\n                class=\"fk-form-renderer__col\"\n                [style.--fk-col-span]=\"col.span ?? 12\"\n              >\n                @if (getField(col.fieldKey); as field) {\n                  <fk-field-outlet\n                    [field]=\"field\"\n                    [form]=\"resolvedForm()!\"\n                    [submitted]=\"formRef()?.submitted() ?? false\"\n                  />\n                }\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (field of schema().fields; track field.key) {\n          @if (field.arrayFields?.length) {\n            <fk-field-array-outlet\n              [field]=\"field\"\n              [formArray]=\"getFormArray(field.key)\"\n              [submitted]=\"formRef()?.submitted() ?? false\"\n            />\n          } @else {\n            <fk-field-outlet\n              [field]=\"field\"\n              [form]=\"resolvedForm()!\"\n              [submitted]=\"formRef()?.submitted() ?? false\"\n            />\n          }\n        }\n      }\n    </div>\n    <ng-content />\n  </fk-form>\n}\n", styles: [":host{display:block}.fk-form-renderer__fields{display:flex;flex-direction:column;row-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}.fk-form-renderer__row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}.fk-form-renderer__col{grid-column:span var(--fk-col-span, 12)}\n"], dependencies: [{ kind: "component", type: FieldArrayOutletComponent, selector: "fk-field-array-outlet", inputs: ["className", "field", "formArray", "submitted"], outputs: ["rowAdded", "rowRemoved"] }, { kind: "component", type: FieldOutletComponent, selector: "fk-field-outlet", inputs: ["className", "field", "form", "submitted"] }, { kind: "component", type: FormComponent, selector: "fk-form", inputs: ["className"], outputs: ["formSubmit"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormArrayDirective, selector: "[formArray]", inputs: ["formArray"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SectionOutletComponent, selector: "fk-section-outlet", inputs: ["className", "section", "form", "submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-form-renderer', standalone: true, imports: [
+                        FieldArrayOutletComponent,
+                        FieldOutletComponent,
+                        FormComponent,
+                        ReactiveFormsModule,
+                        SectionOutletComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (resolvedForm()) {\n  <fk-form (formSubmit)=\"onFormSubmit()\">\n    <div class=\"fk-form-renderer__fields\" [formGroup]=\"resolvedForm()!\">\n      @if (schema().sections?.length) {\n        @for (section of schema().sections!; track $index) {\n          <fk-section-outlet\n            [section]=\"section\"\n            [form]=\"resolvedForm()!\"\n            [submitted]=\"formRef()?.submitted() ?? false\"\n          />\n        }\n      }\n      @if (schema().layout?.length) {\n        @for (row of schema().layout!; track $index) {\n          <div class=\"fk-form-renderer__row\">\n            @for (col of row.columns; track col.fieldKey) {\n              <div\n                class=\"fk-form-renderer__col\"\n                [style.--fk-col-span]=\"col.span ?? 12\"\n              >\n                @if (getField(col.fieldKey); as field) {\n                  <fk-field-outlet\n                    [field]=\"field\"\n                    [form]=\"resolvedForm()!\"\n                    [submitted]=\"formRef()?.submitted() ?? false\"\n                  />\n                }\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (field of schema().fields; track field.key) {\n          @if (field.arrayFields?.length) {\n            <fk-field-array-outlet\n              [field]=\"field\"\n              [formArray]=\"getFormArray(field.key)\"\n              [submitted]=\"formRef()?.submitted() ?? false\"\n            />\n          } @else {\n            <fk-field-outlet\n              [field]=\"field\"\n              [form]=\"resolvedForm()!\"\n              [submitted]=\"formRef()?.submitted() ?? false\"\n            />\n          }\n        }\n      }\n    </div>\n    <ng-content />\n  </fk-form>\n}\n", styles: [":host{display:block}.fk-form-renderer__fields{display:flex;flex-direction:column;row-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}.fk-form-renderer__row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}.fk-form-renderer__col{grid-column:span var(--fk-col-span, 12)}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Public types for `fk-form-renderer`.
+ *
+ * The renderer is a thin presentation layer over the schema engine —
+ * its public type contract is the engine's schema vocabulary
+ * (`FormSchema`, `FieldSchema`, `FieldUiConfig`, `Option`, etc.) plus
+ * the runtime emit shape. Re-exporting from here gives consumers a
+ * single discoverable surface (`@frame-kit/ui-ng`) without forcing them
+ * to know which layer the types live in.
+ */
+
+class FormSectionComponent {
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    /** Section heading. */
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Optional description below the heading. */
+    description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ['fk-form-section', this.className()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FormSectionComponent, isStandalone: true, selector: "fk-form-section", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (title() || description()) {\n  <div class=\"fk-form-section__header\">\n    @if (title()) {\n      <h3 class=\"fk-form-section__title\">{{ title() }}</h3>\n    }\n    @if (description()) {\n      <p class=\"fk-form-section__description\">{{ description() }}</p>\n    }\n  </div>\n}\n<div class=\"fk-form-section__content\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}.fk-form-section__header{margin-bottom:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}.fk-form-section__title{margin:0;font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-typography-h4-font-size, 1.125rem);font-weight:var(--fk-typography-h4-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h4-line-height, 1.25);color:var(--fk-color-text, #1f2d3d)}.fk-form-section__description{margin:var(--fk-form-label-gap, var(--fk-rhythm-2, .5rem)) 0 0;font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-typography-body-font-size, .9375rem);line-height:var(--fk-typography-body-line-height, 1.5);color:var(--fk-color-muted, #8a98a8)}.fk-form-section__content{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-form-section', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (title() || description()) {\n  <div class=\"fk-form-section__header\">\n    @if (title()) {\n      <h3 class=\"fk-form-section__title\">{{ title() }}</h3>\n    }\n    @if (description()) {\n      <p class=\"fk-form-section__description\">{{ description() }}</p>\n    }\n  </div>\n}\n<div class=\"fk-form-section__content\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}.fk-form-section__header{margin-bottom:var(--fk-form-field-gap, var(--fk-rhythm-4, 1rem))}.fk-form-section__title{margin:0;font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-typography-h4-font-size, 1.125rem);font-weight:var(--fk-typography-h4-font-weight, var(--fk-font-weight-semibold, 600));line-height:var(--fk-typography-h4-line-height, 1.25);color:var(--fk-color-text, #1f2d3d)}.fk-form-section__description{margin:var(--fk-form-label-gap, var(--fk-rhythm-2, .5rem)) 0 0;font-family:var(--fk-font-family-base, \"Inter\", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\");font-size:var(--fk-typography-body-font-size, .9375rem);line-height:var(--fk-typography-body-line-height, 1.5);color:var(--fk-color-muted, #8a98a8)}.fk-form-section__content{display:flex;flex-direction:column}\n"] }]
+        }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Returns a snapshot of a control's state.
+ *
+ * @example
+ * ```ts
+ * const state = getFieldState(form.get('email'));
+ * if (state.invalid && state.touched) {
+ *   // show error
+ * }
+ * ```
+ */
+function getFieldState(control) {
+    if (!control) {
+        return null;
+    }
+    return {
+        touched: control.touched,
+        dirty: control.dirty,
+        invalid: control.invalid,
+        valid: control.valid,
+        pending: control.pending,
+        disabled: control.disabled,
+        enabled: control.enabled,
+        pristine: control.pristine,
+        untouched: control.untouched,
+        errors: control.errors,
+        value: control.value,
+    };
+}
+/**
+ * Returns whether a control has a specific validation error.
+ *
+ * @example
+ * ```ts
+ * if (hasError(form.get('email'), 'required')) {
+ *   // ...
+ * }
+ * ```
+ */
+function hasError(control, errorKey) {
+    if (!control) {
+        return false;
+    }
+    return control.hasError(errorKey);
+}
+/**
+ * Returns the error value for a specific validation error key.
+ *
+ * @example
+ * ```ts
+ * const minErr = getError(form.get('age'), 'min');
+ * // { min: 18, actual: 12 }
+ * ```
+ */
+function getError(control, errorKey) {
+    if (!control) {
+        return null;
+    }
+    return control.getError(errorKey);
+}
+/**
+ * Marks all controls in a FormGroup as touched.
+ * Useful for triggering validation display on form submission.
+ *
+ * @example
+ * ```ts
+ * if (form.invalid) {
+ *   markAllTouched(form);
+ *   return;
+ * }
+ * ```
+ */
+function markAllTouched(group) {
+    group.markAllAsTouched();
+}
+/**
+ * Returns whether all controls in a FormGroup are valid.
+ */
+function isFormValid(group) {
+    return group.valid;
+}
+/**
+ * Returns all invalid control keys in a FormGroup (top-level only).
+ *
+ * @example
+ * ```ts
+ * const invalid = getInvalidFields(form);
+ * // ['email', 'password']
+ * ```
+ */
+function getInvalidFields(group) {
+    return Object.entries(group.controls)
+        .filter(([, control]) => control.invalid)
+        .map(([key]) => key);
+}
+
+/**
+ * A drag-and-drop file input. Pairs a styled, tokenized "drop here or
+ * click to browse" surface with a hidden native file input so the
+ * component remains keyboard-, click-, and drag-accessible without
+ * any consumer wiring.
+ *
+ * Event-out (not CVA-bound) — emits a `File[]` from `(filesSelected)`
+ * for both drop and browse paths. Use `fk-file-upload` instead when
+ * you need a reactive-forms control with `FileList` value semantics.
+ */
+class FileDropzoneComponent {
+    // ===== INPUTS =====
+    /** MIME types or file extensions the native file picker should accept (e.g. "image/*,.pdf"). */
+    accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Whether the user can select more than one file at a time. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** When true, prevents drag-and-drop and click-to-browse interaction. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Icon name rendered inside the dropzone surface. */
+    icon = input('upload', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Primary prompt text displayed inside the dropzone. */
+    prompt = input.required(...(ngDevMode ? [{ debugName: "prompt" }] : /* istanbul ignore next */ []));
+    /** Secondary hint text shown below the prompt. */
+    hint = input(null, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    // ===== OUTPUTS =====
+    /** Fires with the selected File array whenever the user drops or browses files. */
+    filesSelected = output();
+    // ===== INTERNAL =====
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    classes = computed(() => [
+        'fk-file-dropzone',
+        this.isDragging() ? 'fk-file-dropzone--dragging' : '',
+        this.disabled() ? 'fk-file-dropzone--disabled' : '',
+        this.className(),
+    ]
+        .filter(Boolean)
+        .join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    get hostClass() {
+        return this.classes();
+    }
+    // ===== EVENT HANDLERS =====
+    onDragOver(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.isDragging.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.isDragging.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragging.set(false);
+        if (this.disabled()) {
+            return;
+        }
+        const files = event.dataTransfer?.files;
+        this.emit(files);
+    }
+    onChange(event) {
+        const native = event.target;
+        this.emit(native.files);
+        // Allow re-selecting the same file path on a subsequent attempt.
+        native.value = '';
+    }
+    emit(list) {
+        if (!list || list.length === 0) {
+            return;
+        }
+        const files = [];
+        for (let i = 0; i < list.length; i++) {
+            const file = list.item(i);
+            if (file) {
+                files.push(file);
+            }
+        }
+        if (files.length === 0) {
+            return;
+        }
+        this.filesSelected.emit(this.multiple() ? files : [files[0]]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FileDropzoneComponent, isStandalone: true, selector: "fk-file-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, prompt: { classPropertyName: "prompt", publicName: "prompt", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<label\n  class=\"fk-file-dropzone__container\"\n  [attr.id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <fk-icon [name]=\"icon()\" size=\"lg\" class=\"fk-file-dropzone__icon\" />\n\n  <fk-text tone=\"muted\" class=\"fk-file-dropzone__prompt\">\n    {{ prompt() }}\n  </fk-text>\n\n  @if (hint(); as h) {\n    <fk-text tone=\"muted\" class=\"fk-file-dropzone__hint\">\n      {{ h }}\n    </fk-text>\n  }\n\n  <input\n    #nativeInput\n    type=\"file\"\n    class=\"fk-file-dropzone__native\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onChange($event)\"\n  />\n</label>\n", styles: [":host{display:block}.fk-file-dropzone__container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fk-file-dropzone-gap, var(--fk-rhythm-2, .5rem));min-height:var(--fk-file-dropzone-min-height, 10rem);padding:var(--fk-file-dropzone-padding, var(--fk-rhythm-10, 2.5rem));background:var(--fk-file-dropzone-bg, var(--fk-color-surface-raised, #f8fafc));border:var(--fk-file-dropzone-border-width, 2px) var(--fk-file-dropzone-border-style, dashed) var(--fk-file-dropzone-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-file-dropzone-border-radius, var(--fk-radius-lg, .75rem));cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.fk-file-dropzone__container:hover{border-color:var(--fk-file-dropzone-border-color-hover, var(--fk-color-primary, #0a84ff))}.fk-file-dropzone__container:focus-within{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-file-dropzone__prompt{font-weight:var(--fk-font-weight-semibold, 600);color:var(--fk-file-dropzone-prompt-color, var(--fk-color-text, #1f2d3d))}.fk-file-dropzone__hint{font-size:var(--fk-file-dropzone-hint-font-size, .8125rem)}.fk-file-dropzone__native{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}:host.fk-file-dropzone--dragging .fk-file-dropzone__container{border-color:var(--fk-file-dropzone-border-color-dragging, var(--fk-color-primary, #0a84ff));background:var(--fk-file-dropzone-bg-dragging, rgba(10, 132, 255, .04))}:host.fk-file-dropzone--disabled .fk-file-dropzone__container{cursor:not-allowed;opacity:var(--fk-file-dropzone-opacity-disabled, .6)}:host.fk-file-dropzone--disabled .fk-file-dropzone__container:hover{border-color:var(--fk-file-dropzone-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-file-dropzone--disabled .fk-file-dropzone__icon{color:var(--fk-file-dropzone-icon-color-disabled, var(--fk-color-muted, #8a98a8))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fk-icon", inputs: ["name", "size", "color", "className", "id", "ariaLabel", "ariaHidden"] }, { kind: "component", type: TextComponent, selector: "fk-text", inputs: ["as", "variant", "tone", "align", "weight", "truncate", "maxLines", "gutterBottom", "italic", "visuallyHidden", "className", "id", "ariaLabel", "ariaDescribedBy", "role", "htmlFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileDropzoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-file-dropzone', standalone: true, imports: [IconComponent, TextComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  class=\"fk-file-dropzone__container\"\n  [attr.id]=\"id() ?? undefined\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <fk-icon [name]=\"icon()\" size=\"lg\" class=\"fk-file-dropzone__icon\" />\n\n  <fk-text tone=\"muted\" class=\"fk-file-dropzone__prompt\">\n    {{ prompt() }}\n  </fk-text>\n\n  @if (hint(); as h) {\n    <fk-text tone=\"muted\" class=\"fk-file-dropzone__hint\">\n      {{ h }}\n    </fk-text>\n  }\n\n  <input\n    #nativeInput\n    type=\"file\"\n    class=\"fk-file-dropzone__native\"\n    [attr.accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"disabled()\"\n    (change)=\"onChange($event)\"\n  />\n</label>\n", styles: [":host{display:block}.fk-file-dropzone__container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fk-file-dropzone-gap, var(--fk-rhythm-2, .5rem));min-height:var(--fk-file-dropzone-min-height, 10rem);padding:var(--fk-file-dropzone-padding, var(--fk-rhythm-10, 2.5rem));background:var(--fk-file-dropzone-bg, var(--fk-color-surface-raised, #f8fafc));border:var(--fk-file-dropzone-border-width, 2px) var(--fk-file-dropzone-border-style, dashed) var(--fk-file-dropzone-border-color, var(--fk-color-border, #d9e2ee));border-radius:var(--fk-file-dropzone-border-radius, var(--fk-radius-lg, .75rem));cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.fk-file-dropzone__container:hover{border-color:var(--fk-file-dropzone-border-color-hover, var(--fk-color-primary, #0a84ff))}.fk-file-dropzone__container:focus-within{outline:none;box-shadow:var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18))}.fk-file-dropzone__prompt{font-weight:var(--fk-font-weight-semibold, 600);color:var(--fk-file-dropzone-prompt-color, var(--fk-color-text, #1f2d3d))}.fk-file-dropzone__hint{font-size:var(--fk-file-dropzone-hint-font-size, .8125rem)}.fk-file-dropzone__native{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}:host.fk-file-dropzone--dragging .fk-file-dropzone__container{border-color:var(--fk-file-dropzone-border-color-dragging, var(--fk-color-primary, #0a84ff));background:var(--fk-file-dropzone-bg-dragging, rgba(10, 132, 255, .04))}:host.fk-file-dropzone--disabled .fk-file-dropzone__container{cursor:not-allowed;opacity:var(--fk-file-dropzone-opacity-disabled, .6)}:host.fk-file-dropzone--disabled .fk-file-dropzone__container:hover{border-color:var(--fk-file-dropzone-border-color, var(--fk-color-border, #d9e2ee))}:host.fk-file-dropzone--disabled .fk-file-dropzone__icon{color:var(--fk-file-dropzone-icon-color-disabled, var(--fk-color-muted, #8a98a8))}\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], prompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "prompt", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class SegmentedBarComponent {
+    // ===== INPUTS =====
+    /** Segments to render, each with a value, optional label, and color. */
+    segments = input([], ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    /** Total maximum value; defaults to the sum of all segment values when null. */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Size variant controlling bar height via design tokens. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** CSS color for the unfilled track; defaults to the theme token when null. */
+    trackColor = input(null, ...(ngDevMode ? [{ debugName: "trackColor" }] : /* istanbul ignore next */ []));
+    /** Explicit bar height that overrides the size-token value. */
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    // ===== BASE PROPS =====
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    // ===== COMPUTED =====
+    segmentTotal = computed(() => {
+        return this.segments().reduce((sum, seg) => sum + seg.value, 0);
+    }, ...(ngDevMode ? [{ debugName: "segmentTotal" }] : /* istanbul ignore next */ []));
+    effectiveMax = computed(() => {
+        return this.max() ?? this.segmentTotal();
+    }, ...(ngDevMode ? [{ debugName: "effectiveMax" }] : /* istanbul ignore next */ []));
+    normalizedSegments = computed(() => {
+        const em = this.effectiveMax();
+        if (em <= 0) {
+            return this.segments().map((seg) => ({ ...seg, percentage: 0 }));
+        }
+        return this.segments().map((seg) => ({
+            ...seg,
+            percentage: (seg.value / em) * 100,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "normalizedSegments" }] : /* istanbul ignore next */ []));
+    valueText = computed(() => {
+        const segs = this.segments();
+        if (segs.length === 0) {
+            return 'Empty';
+        }
+        const parts = segs
+            .map((seg) => {
+            if (seg.label) {
+                return `${seg.value} ${seg.label}`;
+            }
+            return `${seg.value}`;
+        })
+            .join(', ');
+        return `${parts} out of ${this.effectiveMax()}`;
+    }, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return [
+            'fk-segmented-bar',
+            `fk-segmented-bar--${this.size()}`,
+            this.className(),
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ===== HOST BINDINGS =====
+    get hostClass() {
+        return this.classes();
+    }
+    get hostRole() {
+        return 'progressbar';
+    }
+    get hostAriaValueMin() {
+        return 0;
+    }
+    get hostAriaValueMax() {
+        return this.effectiveMax();
+    }
+    get hostAriaValueNow() {
+        return this.segmentTotal();
+    }
+    get hostAriaValueText() {
+        return this.valueText();
+    }
+    get hostAriaLabel() {
+        return this.ariaLabel();
+    }
+    get hostAriaDescribedBy() {
+        return this.ariaDescribedBy();
+    }
+    get hostId() {
+        return this.id();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SegmentedBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SegmentedBarComponent, isStandalone: true, selector: "fk-segmented-bar", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass", "attr.role": "this.hostRole", "attr.aria-valuemin": "this.hostAriaValueMin", "attr.aria-valuemax": "this.hostAriaValueMax", "attr.aria-valuenow": "this.hostAriaValueNow", "attr.aria-valuetext": "this.hostAriaValueText", "attr.aria-label": "this.hostAriaLabel", "attr.aria-describedby": "this.hostAriaDescribedBy", "attr.id": "this.hostId" } }, ngImport: i0, template: "<div\n  class=\"fk-segmented-bar__track\"\n  [style.background-color]=\"trackColor()\"\n  [style.height]=\"height()\"\n>\n  @for (seg of normalizedSegments(); track $index) {\n    <div\n      class=\"fk-segmented-bar__segment\"\n      [style.width.%]=\"seg.percentage\"\n      [style.background-color]=\"seg.color ?? null\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.fk-segmented-bar__track{display:flex;border-radius:var(--fk-segmented-bar-radius, var(--fk-radius-full, 9999px));overflow:hidden;background:var(--fk-segmented-bar-bg, var(--fk-color-surface-muted, #f1f5f9))}.fk-segmented-bar__segment{height:100%;background-color:var(--fk-segmented-bar-segment-color, var(--fk-color-primary, #0a84ff));transition:width var(--fk-segmented-bar-transition, .3s ease)}:host.fk-segmented-bar--sm .fk-segmented-bar__track{height:var(--fk-segmented-bar-height-sm, var(--fk-rhythm-1, .25rem))}:host.fk-segmented-bar--md .fk-segmented-bar__track{height:var(--fk-segmented-bar-height-md, var(--fk-rhythm-2, .5rem))}:host.fk-segmented-bar--lg .fk-segmented-bar__track{height:var(--fk-segmented-bar-height-lg, var(--fk-rhythm-3, .75rem))}@media(prefers-reduced-motion:reduce){.fk-segmented-bar__segment{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SegmentedBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fk-segmented-bar', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"fk-segmented-bar__track\"\n  [style.background-color]=\"trackColor()\"\n  [style.height]=\"height()\"\n>\n  @for (seg of normalizedSegments(); track $index) {\n    <div\n      class=\"fk-segmented-bar__segment\"\n      [style.width.%]=\"seg.percentage\"\n      [style.background-color]=\"seg.color ?? null\"\n    ></div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.fk-segmented-bar__track{display:flex;border-radius:var(--fk-segmented-bar-radius, var(--fk-radius-full, 9999px));overflow:hidden;background:var(--fk-segmented-bar-bg, var(--fk-color-surface-muted, #f1f5f9))}.fk-segmented-bar__segment{height:100%;background-color:var(--fk-segmented-bar-segment-color, var(--fk-color-primary, #0a84ff));transition:width var(--fk-segmented-bar-transition, .3s ease)}:host.fk-segmented-bar--sm .fk-segmented-bar__track{height:var(--fk-segmented-bar-height-sm, var(--fk-rhythm-1, .25rem))}:host.fk-segmented-bar--md .fk-segmented-bar__track{height:var(--fk-segmented-bar-height-md, var(--fk-rhythm-2, .5rem))}:host.fk-segmented-bar--lg .fk-segmented-bar__track{height:var(--fk-segmented-bar-height-lg, var(--fk-rhythm-3, .75rem))}@media(prefers-reduced-motion:reduce){.fk-segmented-bar__segment{transition:none}}\n"] }]
+        }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hostAriaValueMin: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], hostAriaValueMax: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }], hostAriaValueNow: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], hostAriaValueText: [{
+                type: HostBinding,
+                args: ['attr.aria-valuetext']
+            }], hostAriaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], hostAriaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], hostId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutocompleteComponent, CheckboxComponent, DEFAULT_ERROR_MESSAGES, DateInputComponent, DatetimeInputComponent, ERROR_MESSAGES, ErrorComponent, FIELD_CONTROL, FK_AUTOCOMPLETE_OPTION_TPL, FK_PREFIX, FK_SUFFIX, FORM, FieldArrayOutletComponent, FieldGroupComponent, FieldOutletComponent, FieldRegistry, FileDropzoneComponent, FileUploadComponent, FkAutocompleteOptionTplDirective, FkPrefixDirective, FkSuffixDirective, FormComponent, FormFieldComponent, FormRendererComponent, FormSectionComponent, HintComponent, InputComponent, LabelComponent, NumberInputComponent, PasswordInputComponent, RadioComponent, SchemaParser, SectionOutletComponent, SegmentedBarComponent, SelectComponent, SliderComponent, SwitchComponent, TagInputComponent, TextareaComponent, TimeInputComponent, ValidationRegistry, getError, getFieldState, getInvalidFields, hasError, interpolateMessage, isFormValid, markAllTouched, resolveErrorMessage };
+//# sourceMappingURL=frame-kit-ui-ng-forms.mjs.map