@kouji-ui/components 0.4.4 → 0.6.0

package/fesm2022/kouji-ui-components.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Injectable, booleanAttribute, computed, TemplateRef, model, ViewChild, contentChildren, ElementRef, PLATFORM_ID, DestroyRef, afterNextRender, effect, signal, Injector, viewChild, untracked, output, EventEmitter, Output, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, EnvironmentInjector, Directive, InjectionToken, ViewContainerRef, contentChild, numberAttribute } from '@angular/core';
 import * as i1 from '@kouji-ui/core';
 import { KjAccordion, KjAccordionTrigger, KjAccordionItem, KjAccordionContent, SHEET_DATA, KjSheetRef, KjSheet, KjIconDirective, KjSheetService, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KJ_AVATAR_GROUP, KjAvatarImage, KjAvatarFallback, KjAvatar, KjAvatarGroup, KjBadge, KjBreadcrumb, KjBreadcrumbList, KjBreadcrumbItem, KjLink, KjBreadcrumbCurrent, KjBreadcrumbSeparator, KjBreadcrumbEllipsis, KjButton, KjButtonGroup, KjCalendar, KjCalendarHeader, KjCalendarGrid, KjCalendarDay, KjCarousel, KjLiveRegion, KjVisuallyHidden, KjCarouselViewport, KjCarouselSlide, KjCarouselPrevious, KjCarouselNext, KJ_CAROUSEL, KjCarouselIndicator, KjCarouselIndicators, KjCarouselAutoplay, KjCarouselPauseToggle, KjChatLog, KjChat, KjChatAvatar, KjChatHeader, KjChatBubble, KjChatFooter, KjChatAnnouncer, parseSlash, matchSlashCommands, KjCheckbox, KjColorPicker, KjColorPickerTrigger, KjColorPickerPanel, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerAlphaSlider, KjColorPickerInput, KjComboboxInput, KjComboboxListbox, KjCombobox, KjComboboxOption, KjConfirmPopup, KjConfirmPopupTrigger, KjPopoverContent, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, defaultDateRangePresets, KjDateRangePresets, KjDateRangePresetOption, KjLocale, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, KjSpinner, KjEditorLoader, KjEditor, KJ_SIZE_PRESET, KjSize, KjField, KjFieldLabel, KjFieldHelp, KjFieldError, KjFieldGroup, KjFileUpload, KjFileUploadTrigger, KjFileUploadDropzone, KjFileUploadList, KjFileUploadItem, KjProgressBar, KjProgressBarFill, KjForm, KjFormErrorSummary, KJ_ICON_REGISTRY, KjInput, KjInputGroup, KjInputGroupAddon, KjInputMask, KJ_INPUT_MASK_PRESETS, KjInputOtp, KjInputOtpCell, KjKbd, KJ_KBD_SIZE_PRESET, KjDivider, KJ_VARIANT_PRESET, KjList, KjListRow, KjMenubar, KjMenubarItem, KjNumberInput, KjNumberInputGroup, KjNumberStepper, KJ_OVERLAY_BADGE, KjOverlayBadgeContent, KjOverlayBadge, KjPagination, KjPaginationItem, KjPaginationPrevious, KjPaginationNext, KjPaginationFirst, KjPaginationLast, KjPaginationEllipsis, KjPaginationInfo, KJ_PASSWORD_INPUT, KjPasswordInput, KjPasswordInputScope, KjPasswordToggle, KjPasswordStrength, KjPasswordCapsLockWarning, KjPopoverTrigger, KjPopoverArrow, KjPopoverClose, KjPopoverTitle, KjRadioGroup, KjRadio, injectRteOverlayData, createKjImageNode, KJ_RTE_OVERLAY_DATA, KjRichTextEditor, KjRovingTabindex, KjRovingTabindexItemDirective, KjSelect, KjSelectTrigger, KjSelectContent, KjOption, KjSkeleton, KjSkipLink, KjSlider, KjSliderTrack, KjSliderRange, KjSliderThumb, KjSpeedDial, KjSpeedDialTrigger, KjSpeedDialActions, KjSpeedDialAction, KjStepper, KjStep, KjStepLabel, KjStepContent, KjStepperNext, KjStepperPrevious, KjStepperReset, KjToggle, KJ_TABLE, provideKjFilterParams, KjTable, KJ_TABLE_STORAGE, KjTableHeader, KjTableRow, KjTableCell, KjTableKeyboardNav, DRAWER_DATA, KjDrawer, KjDrawerService, KjTabs, KjTabList, KjTab, KjTabPanel, KjTag, KjTagRemove, KjTagList, KjTextarea, KjTimePicker, KjTimePickerHours, KjTimePickerMinutes, KjTimePickerSeconds, KjTimePickerMeridiem, KjToastViewport, KjToast, KjToastClose, KjTooltipTrigger, KjTooltipContent, KjTooltipArrow, KjTooltipGroup, KjCascadeSelect, KjCascadeSelectTrigger, KjCascadeSelectPanel, KjCascadeSelectOption, KjCascadeSelectSubPanel, KjCommandPalette, KjCommandInput, KjCommandList, KjCommandEmpty, injectListItem, KjListItem, KjCommandGroup, KjCommandSeparator, KjTreeSelectNode, KjTreeSelectToggle, KjTreeSelect, KjTreeSelectTrigger, KjTreeSelectContent } from '@kouji-ui/core';
-export { KJ_DROPDOWN_MENU, KjBlockquote, KjCode, KjDialog, KjDialogRef, KjDialogService, KjDrawer, KjDrawerRef, KjDrawerService, KjDropdownMenuContent, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjLead, KjMuted, KjOverlayPanel, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjSheet, KjSheetRef, KjSheetService, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTruncate, SHEET_ARIA_LABEL, SHEET_DATA, SHEET_DETENT, SHEET_DISMISSIBLE } from '@kouji-ui/core';
+export { KJ_DROPDOWN_MENU, KjBlockquote, KjCarousel, KjCarouselSlide, KjCascadeSelectOption, KjChatAnnouncer, KjChatStore, KjCode, KjColorPicker, KjCombobox, KjDatePicker, KjDialog, KjDialogRef, KjDialogService, KjDrawer, KjDrawerRef, KjDrawerService, KjDropdownMenuContent, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjFileUpload, KjInput, KjLead, KjLiveRegion, KjMuted, KjOverlayPanel, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjRichTextEditor, KjSheet, KjSheetRef, KjSheetService, KjTabPanel, KjTable, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTreeSelect, KjTruncate, SHEET_ARIA_LABEL, SHEET_DATA, SHEET_DETENT, SHEET_DISMISSIBLE } from '@kouji-ui/core';
 import { NgTemplateOutlet, isPlatformBrowser, NgComponentOutlet } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$1 from '@angular/forms';
@@ -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,