@frame-kit/ui-ng 0.2.8 → 0.2.10

package/COMPONENTS.md

@@ -83,6 +83,7 @@ Organized by **purpose** (not Atomic Design) into six layers with strict depende
 ### Services — runtime services with no UI
 
 - [OverlayOrchestrator](#overlayorchestrator)
+- [ReactiveI18nService](#reactivei18nservice)
 - [SpotlightService](#spotlightservice)
 - [ToastService](#toastservice)
 
@@ -631,6 +632,13 @@ Centralized priority stack for dialogs, drawers, popovers, and navigation panels
 
 ---
 
+### ReactiveI18nService
+
+Message lookup by dot-path key with `{{var}}` interpolation and a minimal ICU plural subset, backed by signals so a locale switch re-renders every template reading it. Provided with `provideI18n`, injected via `I18N_SERVICE`; the framework-free core lives in `@frame-kit/utils` so a server can render the same copy.
+[README](https://github.com/frame-kit/packages/blob/main/packages/ui-ng/services/i18n/README.md)
+
+---
+
 ### SpotlightService
 
 Coordinates a single global "active key" with reference-counted holders, so unrelated parts of the DOM can pulse together when the same key is activated. The `fkSpotlightTrigger` / `fkSpotlightTarget` directives are the typical consumers.

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

@@ -289,6 +289,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['attr.for']
             }] } });
 
+const FK_LABEL_ACTION = new InjectionToken('FK_LABEL_ACTION');
+/**
+ * Marks content that belongs on the label's own row, aligned to the trailing
+ * edge — a "Forgot password?" link beside a Password label being the canonical
+ * case.
+ *
+ * It sits outside the `<label>` element deliberately. A link inside a label is
+ * activated when the label is clicked, so the user reaches for the link and
+ * focuses the input instead; and its text would join the input's accessible
+ * name.
+ */
+class FkLabelActionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkLabelActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FkLabelActionDirective, isStandalone: true, selector: "[fkLabelAction]", providers: [{ provide: FK_LABEL_ACTION, useExisting: FkLabelActionDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FkLabelActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fkLabelAction]',
+                    standalone: true,
+                    providers: [{ provide: FK_LABEL_ACTION, useExisting: FkLabelActionDirective }],
+                }]
+        }] });
+
 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 });
@@ -349,6 +373,7 @@ class FormFieldComponent {
     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 */ []));
+    labelActionRef = contentChild(FK_LABEL_ACTION, ...(ngDevMode ? [{ debugName: "labelActionRef" }] : /* 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 =====
@@ -375,6 +400,12 @@ class FormFieldComponent {
     warnOnUnresolvedProjection() {
         const checks = [
             ['fkPrefix', 'FkPrefixDirective', 'prefix', this.prefixRef()],
+            [
+                'fkLabelAction',
+                'FkLabelActionDirective',
+                'label-action',
+                this.labelActionRef(),
+            ],
             ['fkSuffix', 'FkSuffixDirective', 'suffix', this.suffixRef()],
         ];
         for (const [attribute, directive, slot, resolved] of checks) {
@@ -535,12 +566,12 @@ class FormFieldComponent {
         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    <div class=\"fk-form-field__label-row\">\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      </label>\n      <!-- The required marker lives OUTSIDE the <label> so it never leaks into\n           the label's text/accessible name (keeping getByLabel + AT clean); the\n           input's aria-required conveys the requirement to assistive tech. -->\n      @if (isRequired()) {\n        <span class=\"fk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </div>\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    <!-- Rendered unconditionally, and deliberately so. Gating these on the\n         directive resolving means a consumer who marks an element `fkPrefix`\n         but forgets to import `FkPrefixDirective` gets no slot, and because an\n         unprojected node is never placed in the DOM at all, their icon\n         disappears with no error anywhere. Both wrappers are absolutely\n         positioned and `:empty`-hidden, so rendering them always costs nothing\n         and turns that failure into something visible. -->\n    <div class=\"fk-form-field__prefix\">\n      <ng-content select=\"[fkPrefix]\" />\n    </div>\n    <ng-content />\n    <div class=\"fk-form-field__suffix\">\n      <ng-content select=\"[fkSuffix]\" />\n    </div>\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-row{display:flex;align-items:center;gap:.25em;margin-top:var(--fk-form-label-margin-top, var(--fk-rhythm-2, .5rem))}.fk-form-field__label{display:flex;align-items:center;gap:.25em;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__label fk-icon{flex:none;color:var(--fk-form-label-icon-color, currentColor)}.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:empty,.fk-form-field__suffix:empty{display: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 });
+    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: "labelActionRef", first: true, predicate: FK_LABEL_ACTION, 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    <div class=\"fk-form-field__label-row\">\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      </label>\n      <!-- The required marker lives OUTSIDE the <label> so it never leaks into\n           the label's text/accessible name (keeping getByLabel + AT clean); the\n           input's aria-required conveys the requirement to assistive tech. -->\n      @if (isRequired()) {\n        <span class=\"fk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n\n      <!-- Trailing content on the label's row. Outside the <label> so it is not\n           activated by a label click and does not join the input's accessible\n           name. Rendered unconditionally for the same reason as the prefix and\n           suffix slots: an unprojected node is never placed in the DOM, so\n           gating this on the directive would make a forgotten import vanish\n           silently. `:empty` keeps it from taking space. -->\n      <div class=\"fk-form-field__label-action\">\n        <ng-content select=\"[fkLabelAction]\" />\n      </div>\n    </div>\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    <!-- Rendered unconditionally, and deliberately so. Gating these on the\n         directive resolving means a consumer who marks an element `fkPrefix`\n         but forgets to import `FkPrefixDirective` gets no slot, and because an\n         unprojected node is never placed in the DOM at all, their icon\n         disappears with no error anywhere. Both wrappers are absolutely\n         positioned and `:empty`-hidden, so rendering them always costs nothing\n         and turns that failure into something visible. -->\n    <div class=\"fk-form-field__prefix\">\n      <ng-content select=\"[fkPrefix]\" />\n    </div>\n    <ng-content />\n    <div class=\"fk-form-field__suffix\">\n      <ng-content select=\"[fkSuffix]\" />\n    </div>\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-action{margin-inline-start:auto;display:flex;align-items:baseline}.fk-form-field__label-action:empty{display:none}.fk-form-field__label-row{display:flex;align-items:center;gap:.25em;margin-top:var(--fk-form-label-margin-top, var(--fk-rhythm-2, .5rem))}.fk-form-field__label{display:flex;align-items:center;gap:.25em;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__label fk-icon{flex:none;color:var(--fk-form-label-icon-color, currentColor)}.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:empty,.fk-form-field__suffix:empty{display: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    <div class=\"fk-form-field__label-row\">\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      </label>\n      <!-- The required marker lives OUTSIDE the <label> so it never leaks into\n           the label's text/accessible name (keeping getByLabel + AT clean); the\n           input's aria-required conveys the requirement to assistive tech. -->\n      @if (isRequired()) {\n        <span class=\"fk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </div>\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    <!-- Rendered unconditionally, and deliberately so. Gating these on the\n         directive resolving means a consumer who marks an element `fkPrefix`\n         but forgets to import `FkPrefixDirective` gets no slot, and because an\n         unprojected node is never placed in the DOM at all, their icon\n         disappears with no error anywhere. Both wrappers are absolutely\n         positioned and `:empty`-hidden, so rendering them always costs nothing\n         and turns that failure into something visible. -->\n    <div class=\"fk-form-field__prefix\">\n      <ng-content select=\"[fkPrefix]\" />\n    </div>\n    <ng-content />\n    <div class=\"fk-form-field__suffix\">\n      <ng-content select=\"[fkSuffix]\" />\n    </div>\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-row{display:flex;align-items:center;gap:.25em;margin-top:var(--fk-form-label-margin-top, var(--fk-rhythm-2, .5rem))}.fk-form-field__label{display:flex;align-items:center;gap:.25em;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__label fk-icon{flex:none;color:var(--fk-form-label-icon-color, currentColor)}.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:empty,.fk-form-field__suffix:empty{display: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: [{
+            args: [{ selector: 'fk-form-field', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fk-form-field__wrapper\">\n  @if (label() || labelRef()) {\n    <div class=\"fk-form-field__label-row\">\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      </label>\n      <!-- The required marker lives OUTSIDE the <label> so it never leaks into\n           the label's text/accessible name (keeping getByLabel + AT clean); the\n           input's aria-required conveys the requirement to assistive tech. -->\n      @if (isRequired()) {\n        <span class=\"fk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n\n      <!-- Trailing content on the label's row. Outside the <label> so it is not\n           activated by a label click and does not join the input's accessible\n           name. Rendered unconditionally for the same reason as the prefix and\n           suffix slots: an unprojected node is never placed in the DOM, so\n           gating this on the directive would make a forgotten import vanish\n           silently. `:empty` keeps it from taking space. -->\n      <div class=\"fk-form-field__label-action\">\n        <ng-content select=\"[fkLabelAction]\" />\n      </div>\n    </div>\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    <!-- Rendered unconditionally, and deliberately so. Gating these on the\n         directive resolving means a consumer who marks an element `fkPrefix`\n         but forgets to import `FkPrefixDirective` gets no slot, and because an\n         unprojected node is never placed in the DOM at all, their icon\n         disappears with no error anywhere. Both wrappers are absolutely\n         positioned and `:empty`-hidden, so rendering them always costs nothing\n         and turns that failure into something visible. -->\n    <div class=\"fk-form-field__prefix\">\n      <ng-content select=\"[fkPrefix]\" />\n    </div>\n    <ng-content />\n    <div class=\"fk-form-field__suffix\">\n      <ng-content select=\"[fkSuffix]\" />\n    </div>\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-action{margin-inline-start:auto;display:flex;align-items:baseline}.fk-form-field__label-action:empty{display:none}.fk-form-field__label-row{display:flex;align-items:center;gap:.25em;margin-top:var(--fk-form-label-margin-top, var(--fk-rhythm-2, .5rem))}.fk-form-field__label{display:flex;align-items:center;gap:.25em;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__label fk-icon{flex:none;color:var(--fk-form-label-icon-color, currentColor)}.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:empty,.fk-form-field__suffix:empty{display: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 }] }], labelActionRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FK_LABEL_ACTION), { 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']
             }] } });
@@ -3719,5 +3750,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteComponent, CheckboxComponent, DEFAULT_ERROR_MESSAGES, DateInputComponent, DatetimeInputComponent, ERROR_MESSAGES, ErrorComponent, FIELD_CONTROL, FK_AUTOCOMPLETE_OPTION_TPL, FK_FILE_DROPZONE_ICON, FK_PREFIX, FK_SUFFIX, FORM, FieldArrayOutletComponent, FieldGroupComponent, FieldOutletComponent, FieldRegistry, FileDropzoneComponent, FileUploadComponent, FkAutocompleteOptionTplDirective, FkFileDropzoneIconDirective, 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 };
+export { AutocompleteComponent, CheckboxComponent, DEFAULT_ERROR_MESSAGES, DateInputComponent, DatetimeInputComponent, ERROR_MESSAGES, ErrorComponent, FIELD_CONTROL, FK_AUTOCOMPLETE_OPTION_TPL, FK_FILE_DROPZONE_ICON, FK_LABEL_ACTION, FK_PREFIX, FK_SUFFIX, FORM, FieldArrayOutletComponent, FieldGroupComponent, FieldOutletComponent, FieldRegistry, FileDropzoneComponent, FileUploadComponent, FkAutocompleteOptionTplDirective, FkFileDropzoneIconDirective, FkLabelActionDirective, 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