@kouji-ui/components 0.5.0 → 0.6.0

package/fesm2022/kouji-ui-components.mjs

@@ -6160,7 +6160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjFieldComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjFieldComponent, isStandalone: true, selector: "kj-field", host: { classAttribute: "kj-field" }, hostDirectives: [{ directive: i1.KjField, inputs: ["kjFieldOrientation", "kjFieldOrientation", "kjRequired", "kjRequired", "kjDisabled", "kjDisabled", "kjInvalid", "kjInvalid", "kjFieldId", "kjFieldId", "kjFieldLabelId", "kjFieldLabelId"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjFieldComponent, isStandalone: true, selector: "kj-field", host: { classAttribute: "kj-field" }, hostDirectives: [{ directive: i1.KjField, inputs: ["kjFieldOrientation", "kjFieldOrientation", "kjRequired", "kjRequired", "kjDisabled", "kjDisabled", "kjInvalid", "kjInvalid", "kjFieldId", "kjFieldId", "kjFieldLabelId", "kjFieldLabelId"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldComponent, decorators: [{
             type: Component,
@@ -6178,7 +6178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         },
                     ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kj-field',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
         }] });
 /**
  * Styled wrapper around `KjFieldLabel`.
@@ -6193,7 +6193,7 @@ class KjFieldLabelComponent {
          the field's controlId signal — the static analyzer can't see that. -->
     <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
     <label kjFieldLabel class="kj-field-label"><ng-content /></label>
-  `, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldLabel, selector: "[kjFieldLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldLabel, selector: "[kjFieldLabel]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldLabelComponent, decorators: [{
             type: Component,
@@ -6204,7 +6204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <label kjFieldLabel class="kj-field-label"><ng-content /></label>
   `, encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: contents;',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
         }] });
 /**
  * Styled wrapper around `KjFieldHelp`.
@@ -6214,30 +6214,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjFieldHelpComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjFieldHelpComponent, isStandalone: true, selector: "kj-field-help", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<span kjFieldHelp class="kj-field-help"><ng-content /></span>`, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldHelp, selector: "[kjFieldHelp]", inputs: ["kjFieldHelpId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjFieldHelpComponent, isStandalone: true, selector: "kj-field-help", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<span kjFieldHelp class="kj-field-help"><ng-content /></span>`, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldHelp, selector: "[kjFieldHelp]", inputs: ["kjFieldHelpId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldHelpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kj-field-help', standalone: true, imports: [KjFieldHelp], template: `<span kjFieldHelp class="kj-field-help"><ng-content /></span>`, encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: contents;',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
         }] });
 /**
  * Styled wrapper around `KjFieldError`.
+ *
+ * With `kjReserve`, the error line keeps its box while the field is valid
+ * (invisible, one text line tall) so errors appearing / disappearing never
+ * shift the form layout.
+ *
+ * @example
+ * ```html
+ * <kj-field-error kjReserve>Please enter a valid email.</kj-field-error>
+ * ```
  * @doc-category Library/Data input
  * @doc
  * @doc-name field
  */
 class KjFieldErrorComponent {
+    /** Keep the error line's box while valid, so showing it never moves the layout. */
+    kjReserve = input(false, { ...(ngDevMode ? { debugName: "kjReserve" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjFieldErrorComponent, isStandalone: true, selector: "kj-field-error", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<span kjFieldError class="kj-field-error"><ng-content /></span>`, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldError, selector: "[kjFieldError]", inputs: ["kjFieldErrorId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjFieldErrorComponent, isStandalone: true, selector: "kj-field-error", inputs: { kjReserve: { classPropertyName: "kjReserve", publicName: "kjReserve", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<span kjFieldError [kjFieldErrorReserve]="kjReserve()" class="kj-field-error"><ng-content /></span>`, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldError, selector: "[kjFieldError]", inputs: ["kjFieldErrorId", "kjFieldErrorReserve"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kj-field-error', standalone: true, imports: [KjFieldError], template: `<span kjFieldError class="kj-field-error"><ng-content /></span>`, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kj-field-error', standalone: true, imports: [KjFieldError], template: `<span kjFieldError [kjFieldErrorReserve]="kjReserve()" class="kj-field-error"><ng-content /></span>`, encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: contents;',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
-        }] });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
+        }], propDecorators: { kjReserve: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReserve", required: false }] }] } });
 /**
  * Styled wrapper around `KjFieldGroup`. Lays out an input with optional
  * leading / trailing addons (icons, units, action buttons) as a single
@@ -6271,7 +6282,7 @@ class KjFieldGroupComponent {
         <ng-content select="[suffix]" />
       </span>
     </div>
-  `, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldGroup, selector: "[kjFieldGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"], dependencies: [{ kind: "directive", type: KjFieldGroup, selector: "[kjFieldGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldGroupComponent, decorators: [{
             type: Component,
@@ -6289,7 +6300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     </div>
   `, encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: contents;',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{kj-field.kj-field{--kj-field-gap: var(--kj-space-xs);--kj-field-label-fg: var(--kj-fg-default);--kj-field-label-font: var(--kj-font-sans);--kj-field-label-font-size: var(--kj-text-sm);--kj-field-label-weight: 500;--kj-field-help-fg: var(--kj-fg-muted);--kj-field-help-font-size: var(--kj-text-xs);--kj-field-error-fg: var(--kj-fg-danger);--kj-field-error-font-size: var(--kj-text-xs);--kj-field-required-fg: var(--kj-fg-danger);--kj-field-disabled-opacity: .55;display:flex;flex-direction:column;gap:var(--kj-field-gap);width:100%}kj-field.kj-field[data-orientation=horizontal]{flex-direction:row;align-items:center;gap:var(--kj-space-md)}kj-field.kj-field[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-label{color:var(--kj-field-label-fg);font:var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4 var(--kj-field-label-font)}.kj-field-label[data-required]:after{content:\" *\";color:var(--kj-field-required-fg)}.kj-field-label[data-invalid]{color:var(--kj-field-error-fg)}.kj-field-help{color:var(--kj-field-help-fg);font:var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error{color:var(--kj-field-error-fg);font:var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans)}.kj-field-error[data-reserve]{display:block;min-height:calc(var(--kj-field-error-font-size) * 1.4)}.kj-field-error[data-hidden]{visibility:hidden}.kj-field-group{--kj-field-group-bg: var(--kj-bg-field);--kj-field-group-fg: var(--kj-fg-default);--kj-field-group-border-color: var(--kj-border-default);--kj-field-group-radius: var(--kj-radius-field);--kj-field-group-addon-fg: var(--kj-fg-muted);--kj-field-group-addon-bg: var(--kj-bg-surface);--kj-field-group-padding-x: var(--kj-space-md);display:inline-flex;align-items:stretch;width:100%;background:var(--kj-field-group-bg);color:var(--kj-field-group-fg);border:var(--kj-border) solid var(--kj-field-group-border-color);border-radius:var(--kj-field-group-radius);overflow:hidden;transition:var(--kj-transition)}.kj-field-group:focus-within{border-color:var(--kj-border-focus, var(--kj-bg-primary));outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-field-group[data-invalid]{border-color:var(--kj-border-danger, var(--kj-fg-danger))}.kj-field-group[data-disabled]{opacity:var(--kj-field-disabled-opacity);cursor:not-allowed}.kj-field-group__prefix,.kj-field-group__suffix{display:inline-flex;align-items:center;padding:0 var(--kj-field-group-padding-x);color:var(--kj-field-group-addon-fg);background:var(--kj-field-group-addon-bg);font:var(--kj-text-sm) / 1 var(--kj-font-sans);white-space:nowrap}.kj-field-group__prefix:empty,.kj-field-group__suffix:empty{display:none}.kj-field-group__control{display:inline-flex;flex:1 1 auto;min-width:0}.kj-field-group__control>.kj-input,.kj-field-group__control>input,.kj-field-group__control>kj-input,.kj-field-group__control>kj-input>.kj-input{border:0;border-radius:0;width:100%}.kj-field-group__control>.kj-input:focus-visible,.kj-field-group__control>input:focus-visible{outline:none}}\n"] }]
         }] });
 
 /**
@@ -9623,7 +9634,7 @@ class KjInputMaskValidationExample {
         </kj-field-error>
       }
     </kj-field>
-  `, isInline: true, styles: [":host{display:block;max-width:400px}input[kjInputMask]{color:var(--kj-fg-default);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field, .375rem);padding:var(--kj-space-sm) var(--kj-space-md);font:var(--kj-text-sm) / 1.4 var(--kj-font-sans);font-variant-numeric:tabular-nums;width:100%}input[kjInputMask]:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px;border-color:var(--kj-fg-primary)}input[kjInputMask][aria-invalid=true]{border-color:var(--kj-fg-danger, #ef4444)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: KjInputMask, selector: "input[kjInputMask]", inputs: ["kjMask", "kjMaskTokens", "kjMaskMode", "kjSlotChar", "kjDisabled", "kjAutoClear", "kjFormatHint"], outputs: ["kjComplete"], exportAs: ["kjInputMask"] }, { kind: "component", type: KjFieldComponent, selector: "kj-field" }, { kind: "component", type: KjFieldLabelComponent, selector: "kj-field-label" }, { kind: "component", type: KjFieldHelpComponent, selector: "kj-field-help" }, { kind: "component", type: KjFieldErrorComponent, selector: "kj-field-error" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;max-width:400px}input[kjInputMask]{color:var(--kj-fg-default);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field, .375rem);padding:var(--kj-space-sm) var(--kj-space-md);font:var(--kj-text-sm) / 1.4 var(--kj-font-sans);font-variant-numeric:tabular-nums;width:100%}input[kjInputMask]:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px;border-color:var(--kj-fg-primary)}input[kjInputMask][aria-invalid=true]{border-color:var(--kj-fg-danger, #ef4444)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: KjInputMask, selector: "input[kjInputMask]", inputs: ["kjMask", "kjMaskTokens", "kjMaskMode", "kjSlotChar", "kjDisabled", "kjAutoClear", "kjFormatHint"], outputs: ["kjComplete"], exportAs: ["kjInputMask"] }, { kind: "component", type: KjFieldComponent, selector: "kj-field" }, { kind: "component", type: KjFieldLabelComponent, selector: "kj-field-label" }, { kind: "component", type: KjFieldHelpComponent, selector: "kj-field-help" }, { kind: "component", type: KjFieldErrorComponent, selector: "kj-field-error", inputs: ["kjReserve"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjInputMaskValidationExample, decorators: [{
             type: Component,