@kouji-ui/components 0.4.3 → 0.5.0

package/fesm2022/kouji-ui-components.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, booleanAttribute, inject, computed, TemplateRef, model, ViewChild, contentChildren, viewChild, output, EventEmitter, Output, signal, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, afterNextRender, ElementRef, DestroyRef, effect, Directive, InjectionToken, ViewContainerRef, EnvironmentInjector, Injector, untracked, contentChild, numberAttribute, PLATFORM_ID } 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, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KjIconDirective, 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, KjCheckbox, KjColorPicker, KjColorPickerTrigger, KjColorPickerPanel, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerAlphaSlider, KjColorPickerInput, KjComboboxInput, KjComboboxListbox, KjCombobox, KjComboboxOption, KjConfirmPopup, KjConfirmPopupTrigger, KjPopoverContent, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, 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, KjSelect, KjSelectTrigger, KjSelectContent, KjOption, KjSkeleton, KjSlider, KjSliderTrack, KjSliderRange, KjSliderThumb, KjSpeedDial, KjSpeedDialTrigger, KjSpeedDialActions, KjSpeedDialAction, KjSpinner, 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, KjCommandInput, KjCommandList, KjCommandEmpty, KjCommandPalette, 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, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTruncate } from '@kouji-ui/core';
-import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+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, 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';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as lucideIcons from 'lucide-static';
@@ -180,6 +181,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }] });
 
+/**
+ * Render body for an action sheet. Rendered programmatically by
+ * {@link import('./action-sheet.service').KjActionSheetService} inside the
+ * bottom-sheet primitive; reads its config from `SHEET_DATA` and resolves the
+ * chosen action's `value` through the {@link KjSheetRef}.
+ *
+ * The action list is `role="menu"` with `role="menuitem"` rows; each row is a
+ * ≥ 44px touch target.
+ *
+ * @internal
+ */
+class KjActionSheet {
+    /** Config injected via `SHEET_DATA` by the action-sheet service. */
+    config = inject(SHEET_DATA);
+    ref = inject(KjSheetRef);
+    get cancelLabel() {
+        return this.config.cancelLabel === undefined ? 'Cancel' : this.config.cancelLabel;
+    }
+    /** Resolve the chosen action's value and close. */
+    select(action) {
+        if (action.disabled)
+            return;
+        this.ref.close(action.value);
+    }
+    /** Dismiss with `undefined`. */
+    cancel() {
+        this.ref.close(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjActionSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjActionSheet, isStandalone: true, selector: "kj-action-sheet", ngImport: i0, template: `
+    <kj-sheet class="kj-action-sheet">
+      @if (config.title) {
+        <h2 class="kj-action-sheet__title">{{ config.title }}</h2>
+      }
+      @if (config.description) {
+        <p class="kj-action-sheet__description">{{ config.description }}</p>
+      }
+      <div class="kj-action-sheet__list" role="menu" [attr.aria-label]="config.title ?? 'Actions'">
+        @for (action of config.actions; track action.value) {
+          <button
+            type="button"
+            role="menuitem"
+            class="kj-action-sheet__item"
+            [class.is-destructive]="action.role === 'destructive'"
+            [disabled]="action.disabled ? true : null"
+            (click)="select(action)"
+          >
+            @if (action.icon) {
+              <i class="kj-action-sheet__icon" [kjIcon]="action.icon" aria-hidden="true"></i>
+            }
+            <span class="kj-action-sheet__label">{{ action.label }}</span>
+          </button>
+        }
+      </div>
+      @if (cancelLabel !== null) {
+        <button
+          type="button"
+          class="kj-action-sheet__cancel"
+          (click)="cancel()"
+        >{{ cancelLabel }}</button>
+      }
+    </kj-sheet>
+  `, isInline: true, dependencies: [{ kind: "component", type: KjSheet, selector: "kj-sheet" }, { kind: "directive", type: KjIconDirective, selector: "span[kjIcon], i[kjIcon]", inputs: ["kjIcon", "kjIconLabel", "kjIconColor", "kjIconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjActionSheet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kj-action-sheet',
+                    standalone: true,
+                    imports: [KjSheet, KjIconDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <kj-sheet class="kj-action-sheet">
+      @if (config.title) {
+        <h2 class="kj-action-sheet__title">{{ config.title }}</h2>
+      }
+      @if (config.description) {
+        <p class="kj-action-sheet__description">{{ config.description }}</p>
+      }
+      <div class="kj-action-sheet__list" role="menu" [attr.aria-label]="config.title ?? 'Actions'">
+        @for (action of config.actions; track action.value) {
+          <button
+            type="button"
+            role="menuitem"
+            class="kj-action-sheet__item"
+            [class.is-destructive]="action.role === 'destructive'"
+            [disabled]="action.disabled ? true : null"
+            (click)="select(action)"
+          >
+            @if (action.icon) {
+              <i class="kj-action-sheet__icon" [kjIcon]="action.icon" aria-hidden="true"></i>
+            }
+            <span class="kj-action-sheet__label">{{ action.label }}</span>
+          </button>
+        }
+      </div>
+      @if (cancelLabel !== null) {
+        <button
+          type="button"
+          class="kj-action-sheet__cancel"
+          (click)="cancel()"
+        >{{ cancelLabel }}</button>
+      }
+    </kj-sheet>
+  `,
+                }]
+        }] });
+/**
+ * Service-launched **action sheet** — a data-driven, iOS-style list of actions
+ * presented in a bottom sheet. Inject `KjActionSheetService` and call `open()`
+ * with a list of actions; selecting one resolves its `value`. Built entirely
+ * on the bottom-sheet primitive, so it inherits the same focus trap, scroll
+ * lock, drag-to-dismiss, and Escape handling. The wrapper component exists to
+ * host this documentation page.
+ *
+ * @doc
+ * @doc-name action-sheet
+ * @doc-is-main
+ * @doc-example Default
+ *   A titled action sheet with a destructive action and a cancel row.
+ *   @doc-file action-sheet.example.ts
+ * @doc-example With icons
+ *   Actions with leading icons; the selected value resolves through the ref.
+ *   @doc-file action-sheet.icons.example.ts
+ *
+ * @doc-keyboard
+ *   Escape        — Dismisses the sheet (resolves undefined)
+ *   Tab / Shift+Tab — Cycles focus across the action rows (focus trap)
+ *   Enter / Space — Activates the focused action row
+ *
+ * @doc-aria
+ *   role      — Panel is "dialog"; the action list is "menu" with "menuitem" rows
+ *   aria-label — The sheet is named by its title (or "Actions" fallback)
+ *
+ * @doc-touch
+ *   Every action row and the cancel row is a ≥ 44px touch target (WCAG 2.5.5).
+ *   The bottom sheet's grab handle dismisses via drag.
+ *
+ * @doc-a11y
+ *   Inherits the bottom sheet's a11y contract: focus trapped and restored to
+ *   the trigger on close, siblings inert while open, only the topmost overlay
+ *   receives Escape and outside-click. Destructive rows use `--kj-danger-*`
+ *   tokens which meet AAA contrast in both themes.
+ *
+ * @doc-related sheet,dialog,dropdown-menu
+ *
+ * @doc-category Library/Overlay
+ */
+class KjActionSheetComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjActionSheetComponent, isStandalone: true, selector: "kj-action-sheet-shell", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-action-sheet__title{margin:0 0 var(--kj-space-xs);font:600 1.0625rem / 1.3 var(--kj-font-sans);color:var(--kj-fg-default);text-align:center}.kj-action-sheet__description{margin:0 0 var(--kj-space-md);font:.875rem / 1.4 var(--kj-font-sans);color:var(--kj-fg-muted);text-align:center}.kj-action-sheet__list{display:flex;flex-direction:column;gap:var(--kj-space-2xs, .25rem)}.kj-action-sheet__item,.kj-action-sheet__cancel{appearance:none;display:flex;align-items:center;gap:var(--kj-space-sm);width:100%;min-height:44px;padding:var(--kj-space-sm) var(--kj-space-md);border:0;border-radius:var(--kj-radius-md, .5rem);background:var(--kj-bg-subtle, transparent);color:var(--kj-fg-default);font:500 .9375rem / 1.4 var(--kj-font-sans);text-align:left;cursor:pointer}.kj-action-sheet__item:hover:not(:disabled),.kj-action-sheet__cancel:hover{background:var(--kj-bg-muted, var(--kj-border-muted))}.kj-action-sheet__item:focus-visible,.kj-action-sheet__cancel:focus-visible{outline:var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, var(--kj-primary));outline-offset:2px}.kj-action-sheet__item:disabled{opacity:.5;cursor:not-allowed}.kj-action-sheet__item.is-destructive{color:var(--kj-danger-fg, var(--kj-danger, #d92d20))}.kj-action-sheet__item.is-destructive:hover:not(:disabled){background:var(--kj-danger-bg-subtle, color-mix(in srgb, var(--kj-danger, #d92d20) 12%, transparent))}.kj-action-sheet__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.kj-action-sheet__label{flex:1}.kj-action-sheet__cancel{justify-content:center;margin-top:var(--kj-space-sm);font-weight:600;background:var(--kj-bg-muted, var(--kj-border-muted))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjActionSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-action-sheet-shell', standalone: true, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-action-sheet__title{margin:0 0 var(--kj-space-xs);font:600 1.0625rem / 1.3 var(--kj-font-sans);color:var(--kj-fg-default);text-align:center}.kj-action-sheet__description{margin:0 0 var(--kj-space-md);font:.875rem / 1.4 var(--kj-font-sans);color:var(--kj-fg-muted);text-align:center}.kj-action-sheet__list{display:flex;flex-direction:column;gap:var(--kj-space-2xs, .25rem)}.kj-action-sheet__item,.kj-action-sheet__cancel{appearance:none;display:flex;align-items:center;gap:var(--kj-space-sm);width:100%;min-height:44px;padding:var(--kj-space-sm) var(--kj-space-md);border:0;border-radius:var(--kj-radius-md, .5rem);background:var(--kj-bg-subtle, transparent);color:var(--kj-fg-default);font:500 .9375rem / 1.4 var(--kj-font-sans);text-align:left;cursor:pointer}.kj-action-sheet__item:hover:not(:disabled),.kj-action-sheet__cancel:hover{background:var(--kj-bg-muted, var(--kj-border-muted))}.kj-action-sheet__item:focus-visible,.kj-action-sheet__cancel:focus-visible{outline:var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, var(--kj-primary));outline-offset:2px}.kj-action-sheet__item:disabled{opacity:.5;cursor:not-allowed}.kj-action-sheet__item.is-destructive{color:var(--kj-danger-fg, var(--kj-danger, #d92d20))}.kj-action-sheet__item.is-destructive:hover:not(:disabled){background:var(--kj-danger-bg-subtle, color-mix(in srgb, var(--kj-danger, #d92d20) 12%, transparent))}.kj-action-sheet__icon{flex-shrink:0;width:1.25rem;height:1.25rem}.kj-action-sheet__label{flex:1}.kj-action-sheet__cancel{justify-content:center;margin-top:var(--kj-space-sm);font-weight:600;background:var(--kj-bg-muted, var(--kj-border-muted))}}\n"] }]
+        }] });
+
+/**
+ * Reference returned by {@link KjActionSheetService.open}. Resolves the chosen
+ * action's `value`, or `undefined` when dismissed (Escape / backdrop / cancel).
+ *
+ * @doc-category Library/Overlay
+ */
+class KjActionSheetRef {
+    sheetRef;
+    /** Emits the selected value (or `undefined`) once the sheet has closed. */
+    afterClosed$;
+    /** Promise resolving with the selected value (or `undefined`). */
+    result;
+    constructor(sheetRef) {
+        this.sheetRef = sheetRef;
+        this.afterClosed$ = sheetRef.afterClosed$;
+        this.result = sheetRef.result;
+    }
+    /** Dismiss the action sheet programmatically. */
+    close(result) {
+        this.sheetRef.close(result);
+    }
+}
+/**
+ * Programmatic service for opening an **action sheet** — a data-driven,
+ * iOS-style list of actions presented in a bottom sheet. Built on
+ * {@link KjSheetService}; it adds no new overlay surface, only a styled
+ * `role="menu"` action list on top of the bottom-sheet primitive.
+ *
+ * @doc-category Library/Overlay
+ */
+class KjActionSheetService {
+    sheet = inject(KjSheetService);
+    /**
+     * Open an action sheet.
+     *
+     * @param opts - Title, description, actions, and cancel label.
+     * @returns A {@link KjActionSheetRef} resolving the selected value.
+     */
+    open(opts) {
+        const sheetRef = this.sheet.open(KjActionSheet, {
+            data: opts,
+            detent: 'auto',
+            ariaLabel: opts.title ?? 'Actions',
+        });
+        return new KjActionSheetRef(sheetRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjActionSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjActionSheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjActionSheetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Styled wrapper around the `KjAlert` directive family. Provides the
  * persistent in-flow notification surface (severity-aware chrome, severity
@@ -910,7 +1123,7 @@ class KjBreadcrumbComponent {
     kjSize = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBreadcrumbComponent, isStandalone: true, selector: "nav[kj-breadcrumb], kj-breadcrumb", inputs: { kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.data-size": "kjSize()" }, classAttribute: "kj-breadcrumb" }, hostDirectives: [{ directive: i1.KjBreadcrumb, inputs: ["kjAriaLabel", "kjAriaLabel", "kjSeparator", "kjSeparator", "kjMaxItems", "kjMaxItems", "kjOverflow", "kjOverflow"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-breadcrumb{--kj-breadcrumb-gap: var(--kj-space-sm, .5rem);--kj-breadcrumb-separator-content: \"/\";--kj-breadcrumb-overflow-pad: .25rem;--kj-color-breadcrumb-muted: var(--kj-fg-muted);--kj-color-breadcrumb-current: var(--kj-fg-default);display:block;color:var(--kj-color-breadcrumb-muted);font-size:.875rem}.kj-breadcrumb[data-size=sm]{font-size:.8125rem}.kj-breadcrumb[data-size=md]{font-size:.875rem}.kj-breadcrumb[data-size=lg]{font-size:1rem}.kj-breadcrumb-list{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--kj-breadcrumb-gap);margin:0;padding:0;list-style:none;min-width:0}.kj-breadcrumb-list[data-wrap=wrap]{flex-wrap:wrap}.kj-breadcrumb-list[data-wrap=no-wrap],.kj-breadcrumb-list[data-wrap=truncate]{flex-wrap:nowrap}.kj-breadcrumb-item{display:inline-flex;align-items:center;gap:var(--kj-breadcrumb-gap);min-width:0}.kj-breadcrumb-item[data-hidden]{display:none}.kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{content:var(--kj-breadcrumb-separator-content, \"/\");color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none;margin-inline-end:var(--kj-breadcrumb-gap)}[dir=rtl] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{display:inline-block;transform:scaleX(-1)}.kj-breadcrumb-separator{display:inline-flex;align-items:center;color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none}.kj-breadcrumb-link{text-decoration:none;padding-block:.5rem}.kj-breadcrumb-current{color:var(--kj-color-breadcrumb-current);font-weight:500}.kj-breadcrumb-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding-inline:var(--kj-breadcrumb-overflow-pad);color:var(--kj-color-breadcrumb-muted);background:transparent;border:0;cursor:default;-webkit-user-select:none;user-select:none}.kj-breadcrumb-ellipsis[data-overflow=menu]{cursor:pointer;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-ellipsis[data-overflow=menu]:hover{background:var(--kj-bg-surface, transparent)}@media print{.kj-breadcrumb-item[data-hidden]{display:revert}.kj-breadcrumb-ellipsis{display:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBreadcrumbComponent, isStandalone: true, selector: "nav[kj-breadcrumb], kj-breadcrumb", inputs: { kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.data-size": "kjSize()" }, classAttribute: "kj-breadcrumb" }, hostDirectives: [{ directive: i1.KjBreadcrumb, inputs: ["kjAriaLabel", "kjAriaLabel", "kjSeparator", "kjSeparator", "kjMaxItems", "kjMaxItems", "kjOverflow", "kjOverflow"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-breadcrumb{--kj-breadcrumb-gap: var(--kj-space-sm, .5rem);--kj-breadcrumb-separator-content: \"/\";--kj-breadcrumb-overflow-pad: .25rem;--kj-color-breadcrumb-muted: var(--kj-fg-muted);--kj-color-breadcrumb-current: var(--kj-fg-default);display:block;color:var(--kj-color-breadcrumb-muted);font-size:.875rem}.kj-breadcrumb[data-size=sm]{font-size:.8125rem}.kj-breadcrumb[data-size=md]{font-size:.875rem}.kj-breadcrumb[data-size=lg]{font-size:1rem}.kj-breadcrumb-list{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--kj-breadcrumb-gap);margin:0;padding:0;list-style:none;min-width:0}.kj-breadcrumb-list[data-wrap=wrap]{flex-wrap:wrap}.kj-breadcrumb-list[data-wrap=no-wrap],.kj-breadcrumb-list[data-wrap=truncate]{flex-wrap:nowrap}.kj-breadcrumb-item{display:inline-flex;align-items:center;gap:var(--kj-breadcrumb-gap);min-width:0}.kj-breadcrumb-item[data-hidden]{display:none}.kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{content:var(--kj-breadcrumb-separator-content, \"/\");color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none;margin-inline-end:var(--kj-breadcrumb-gap)}[dir=rtl] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{display:inline-block;transform:scaleX(-1)}.kj-breadcrumb-separator{display:inline-flex;align-items:center;color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none}.kj-breadcrumb-link{--kj-link-fg: var(--kj-color-breadcrumb-muted);--kj-link-hover-fg: var(--kj-color-breadcrumb-current);color:var(--kj-link-fg);text-decoration:none;padding-block:.5rem;transition:color var(--kj-transition, .15s ease)}.kj-breadcrumb-link:hover{color:var(--kj-link-hover-fg);text-decoration:underline;text-underline-offset:3px}.kj-breadcrumb-link:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-current{color:var(--kj-color-breadcrumb-current);font-weight:500}.kj-breadcrumb-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding-inline:var(--kj-breadcrumb-overflow-pad);color:var(--kj-color-breadcrumb-muted);background:transparent;border:0;cursor:default;-webkit-user-select:none;user-select:none}.kj-breadcrumb-ellipsis[data-overflow=menu]{cursor:pointer;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-ellipsis[data-overflow=menu]:hover{background:var(--kj-bg-surface, transparent)}@media print{.kj-breadcrumb-item[data-hidden]{display:revert}.kj-breadcrumb-ellipsis{display:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjBreadcrumbComponent, decorators: [{
             type: Component,
@@ -923,7 +1136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         'class': 'kj-breadcrumb',
                         'role': 'navigation',
                         '[attr.data-size]': 'kjSize()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-breadcrumb{--kj-breadcrumb-gap: var(--kj-space-sm, .5rem);--kj-breadcrumb-separator-content: \"/\";--kj-breadcrumb-overflow-pad: .25rem;--kj-color-breadcrumb-muted: var(--kj-fg-muted);--kj-color-breadcrumb-current: var(--kj-fg-default);display:block;color:var(--kj-color-breadcrumb-muted);font-size:.875rem}.kj-breadcrumb[data-size=sm]{font-size:.8125rem}.kj-breadcrumb[data-size=md]{font-size:.875rem}.kj-breadcrumb[data-size=lg]{font-size:1rem}.kj-breadcrumb-list{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--kj-breadcrumb-gap);margin:0;padding:0;list-style:none;min-width:0}.kj-breadcrumb-list[data-wrap=wrap]{flex-wrap:wrap}.kj-breadcrumb-list[data-wrap=no-wrap],.kj-breadcrumb-list[data-wrap=truncate]{flex-wrap:nowrap}.kj-breadcrumb-item{display:inline-flex;align-items:center;gap:var(--kj-breadcrumb-gap);min-width:0}.kj-breadcrumb-item[data-hidden]{display:none}.kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{content:var(--kj-breadcrumb-separator-content, \"/\");color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none;margin-inline-end:var(--kj-breadcrumb-gap)}[dir=rtl] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{display:inline-block;transform:scaleX(-1)}.kj-breadcrumb-separator{display:inline-flex;align-items:center;color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none}.kj-breadcrumb-link{text-decoration:none;padding-block:.5rem}.kj-breadcrumb-current{color:var(--kj-color-breadcrumb-current);font-weight:500}.kj-breadcrumb-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding-inline:var(--kj-breadcrumb-overflow-pad);color:var(--kj-color-breadcrumb-muted);background:transparent;border:0;cursor:default;-webkit-user-select:none;user-select:none}.kj-breadcrumb-ellipsis[data-overflow=menu]{cursor:pointer;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-ellipsis[data-overflow=menu]:hover{background:var(--kj-bg-surface, transparent)}@media print{.kj-breadcrumb-item[data-hidden]{display:revert}.kj-breadcrumb-ellipsis{display:none}}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-breadcrumb{--kj-breadcrumb-gap: var(--kj-space-sm, .5rem);--kj-breadcrumb-separator-content: \"/\";--kj-breadcrumb-overflow-pad: .25rem;--kj-color-breadcrumb-muted: var(--kj-fg-muted);--kj-color-breadcrumb-current: var(--kj-fg-default);display:block;color:var(--kj-color-breadcrumb-muted);font-size:.875rem}.kj-breadcrumb[data-size=sm]{font-size:.8125rem}.kj-breadcrumb[data-size=md]{font-size:.875rem}.kj-breadcrumb[data-size=lg]{font-size:1rem}.kj-breadcrumb-list{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--kj-breadcrumb-gap);margin:0;padding:0;list-style:none;min-width:0}.kj-breadcrumb-list[data-wrap=wrap]{flex-wrap:wrap}.kj-breadcrumb-list[data-wrap=no-wrap],.kj-breadcrumb-list[data-wrap=truncate]{flex-wrap:nowrap}.kj-breadcrumb-item{display:inline-flex;align-items:center;gap:var(--kj-breadcrumb-gap);min-width:0}.kj-breadcrumb-item[data-hidden]{display:none}.kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{content:var(--kj-breadcrumb-separator-content, \"/\");color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none;margin-inline-end:var(--kj-breadcrumb-gap)}[dir=rtl] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators])>.kj-breadcrumb-item:not(:first-child):before{display:inline-block;transform:scaleX(-1)}.kj-breadcrumb-separator{display:inline-flex;align-items:center;color:var(--kj-color-breadcrumb-muted);opacity:.65;-webkit-user-select:none;user-select:none}.kj-breadcrumb-link{--kj-link-fg: var(--kj-color-breadcrumb-muted);--kj-link-hover-fg: var(--kj-color-breadcrumb-current);color:var(--kj-link-fg);text-decoration:none;padding-block:.5rem;transition:color var(--kj-transition, .15s ease)}.kj-breadcrumb-link:hover{color:var(--kj-link-hover-fg);text-decoration:underline;text-underline-offset:3px}.kj-breadcrumb-link:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-current{color:var(--kj-color-breadcrumb-current);font-weight:500}.kj-breadcrumb-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding-inline:var(--kj-breadcrumb-overflow-pad);color:var(--kj-color-breadcrumb-muted);background:transparent;border:0;cursor:default;-webkit-user-select:none;user-select:none}.kj-breadcrumb-ellipsis[data-overflow=menu]{cursor:pointer;border-radius:var(--kj-radius-field, .25rem)}.kj-breadcrumb-ellipsis[data-overflow=menu]:hover{background:var(--kj-bg-surface, transparent)}@media print{.kj-breadcrumb-item[data-hidden]{display:revert}.kj-breadcrumb-ellipsis{display:none}}}\n"] }]
         }], propDecorators: { kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }] } });
 /**
  * Wraps `KjBreadcrumbList`. Renders an `<ol>` host inside the breadcrumb
@@ -2285,6 +2498,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
 
+/** Monotonic id source for wiring `aria-describedby` to the caption span. */
+let kjChartUid = 0;
+/**
+ * Reusable charting surface wrapping Apache ECharts.
+ *
+ * SSR-safe: the ECharts instance is created lazily in the browser only, after
+ * the host element has rendered. `option` changes are pushed through
+ * `setOption`, and a `ResizeObserver` keeps the chart sized to its container.
+ *
+ * ECharts paints into an opaque `<canvas>` that assistive technology cannot
+ * read. The host therefore carries `role="img"` plus a required-in-practice
+ * `ariaLabel`, giving screen readers a one-line description. Pass `caption`
+ * for a longer summary — it renders in a visually-hidden `<span>` wired to the
+ * host via `aria-describedby`, so it is announced even though the host is an
+ * image (a leaf) to AT.
+ *
+ * @example
+ * ```html
+ * <kj-chart [option]="chartOption" height="320px" ariaLabel="Revenue by month" />
+ * ```
+ *
+ * @doc-example Default
+ *   The default playground — a labelled bar chart with auto-resize.
+ *   @doc-file chart.example.ts
+ * @doc-example Usage
+ *   A bar chart and a donut, side by side, each with an accessible name and
+ *   summary. Use this as the copy-paste starting point.
+ *   @doc-file chart.usage.example.ts
+ * @doc-example Donut
+ *   A pie series with an inner radius for part-to-whole breakdowns.
+ *   @doc-file chart.donut.example.ts
+ *
+ * @doc-aria
+ *   role              — Always `img`; the canvas is decorative-with-label
+ *   aria-label        — Bound from `ariaLabel`; the chart's accessible name
+ *   aria-describedby  — Present only when `caption` is set; points at the sr-only summary
+ *
+ * @doc-a11y
+ *   Screen readers get the `ariaLabel` as the accessible name and, when set,
+ *   the `caption` as the accessible description. The host is never focusable
+ *   and the canvas takes no tab stop, so keyboard users are not trapped. For
+ *   dense data, mirror the series in an adjacent `<table>` or export link.
+ *
+ * @doc-related card,table
+ *
+ * @doc-css-var
+ *   --kj-chart-height — Container height. Bound from the `height` input.
+ *
+ * @doc-category Library/Data display
+ * @doc
+ * @doc-name chart
+ * @doc-description Accessible Apache ECharts wrapper with reactive options, auto-resize, and SSR-safe lazy init.
+ * @doc-is-main
+ */
+class KjChartComponent {
+    /** The ECharts option object driving the chart. */
+    option = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "option" }] : /* istanbul ignore next */ []));
+    /** Container height — number is treated as pixels. Default `'280px'`. */
+    height = input('280px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Optional registered ECharts theme name. */
+    theme = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the chart — required in practice. Surfaced via
+     * `role="img"` + `aria-label` so screen readers describe the opaque canvas.
+     * Keep it to a short phrase, e.g. `"Revenue by month"`.
+     */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional longer summary read to screen readers. Rendered in a
+     * visually-hidden `<span>` and linked via `aria-describedby`. Use it to
+     * spell out the takeaway a sighted user gets from the shape of the data.
+     */
+    caption = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** Stable id linking the sr-only caption span to `aria-describedby`. */
+    captionId = `kj-chart-caption-${kjChartUid++}`;
+    host = inject((ElementRef)).nativeElement;
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    chart = null;
+    observer = null;
+    resolvedHeight = () => {
+        const h = this.height();
+        return typeof h === 'number' ? `${h}px` : h;
+    };
+    constructor() {
+        // Create the instance only in the browser, after the host is in the DOM.
+        afterNextRender(() => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            void this.init();
+        });
+        // Push option changes to the live instance.
+        effect(() => {
+            const option = this.option();
+            if (this.chart && option) {
+                this.chart.setOption(option, { notMerge: true });
+            }
+        });
+        this.destroyRef.onDestroy(() => this.dispose());
+    }
+    async init() {
+        const echarts = await import('echarts');
+        if (this.chart)
+            return; // guard against double-init / destroyed race
+        this.chart = echarts.init(this.host, this.theme());
+        const option = this.option();
+        if (option)
+            this.chart.setOption(option, { notMerge: true });
+        this.observer = new ResizeObserver(() => this.chart?.resize());
+        this.observer.observe(this.host);
+    }
+    dispose() {
+        this.observer?.disconnect();
+        this.observer = null;
+        this.chart?.dispose();
+        this.chart = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjChartComponent, isStandalone: true, selector: "kj-chart", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel() || null", "attr.aria-describedby": "caption() ? captionId : null", "style.height": "resolvedHeight()" }, classAttribute: "kj-chart" }, ngImport: i0, template: `
+    @if (caption(); as text) {
+      <span [id]="captionId" class="kj-chart__caption">{{ text }}</span>
+    }
+  `, isInline: true, styles: ["@layer kj.component{.kj-chart{display:block;width:100%}.kj-chart__caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-chart', standalone: true, template: `
+    @if (caption(); as text) {
+      <span [id]="captionId" class="kj-chart__caption">{{ text }}</span>
+    }
+  `, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'kj-chart',
+                        'role': 'img',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-describedby]': 'caption() ? captionId : null',
+                        '[style.height]': 'resolvedHeight()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-chart{display:block;width:100%}.kj-chart__caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }] } });
+
 /**
  * Chat log container. Composes `KjChatLog` via `hostDirectives` so the
  * `role="log"` / `aria-live` / `aria-relevant` host bindings land on the
@@ -2548,47 +2905,797 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }] });
 
-let checkboxIdCounter = 0;
+/** HTML-escape a raw string. */
+function escapeHtml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/** Only allow safe URL schemes for links. */
+function safeUrl(url) {
+    const trimmed = url.trim();
+    if (/^(https?:\/\/|\/|#|mailto:)/i.test(trimmed))
+        return trimmed;
+    return null;
+}
+/** Apply link / bold / italic to a non-code segment. */
+function formatSegment(seg) {
+    let s = seg.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, text, url) => {
+        const href = safeUrl(url);
+        if (!href)
+            return text;
+        return `<a class="kj-md-link" href="${escapeHtml(href)}" rel="noopener noreferrer" target="_blank">${text}</a>`;
+    });
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>');
+    return s;
+}
 /**
- * Styled wrapper around the headless `KjCheckbox` directive.
+ * Render inline markdown on an **already HTML-escaped** string. Splits on
+ * backtick code spans first so their contents are never re-formatted, then
+ * applies link / bold / italic to the remaining prose segments.
+ */
+function renderInline(escaped) {
+    return escaped
+        .split(/(`[^`]+`)/g)
+        .map((seg) => {
+        if (seg.length >= 2 && seg.startsWith('`') && seg.endsWith('`')) {
+            return `<code class="kj-md-code">${seg.slice(1, -1)}</code>`;
+        }
+        return formatSegment(seg);
+    })
+        .join('');
+}
+/** Render a prose block (paragraphs + single-newline `<br>`) to safe HTML. */
+function renderProse(block) {
+    const paragraphs = block
+        .split(/\n{2,}/)
+        .map((p) => p.trim())
+        .filter(Boolean);
+    return paragraphs
+        .map((p) => {
+        const lines = p.split('\n').map((line) => renderInline(escapeHtml(line)));
+        return `<p>${lines.join('<br>')}</p>`;
+    })
+        .join('');
+}
+/**
+ * Parse a lightweight markdown subset into blocks: fenced code blocks
+ * (```lang) become structural `code` blocks; everything else becomes `prose`
+ * blocks with sanitised inline HTML.
  *
- * The host renders a `<label>` wrapping the checkbox box and any projected
- * content (label text). Clicking anywhere on the label checks/unchecks the
- * box. When `disabled` is set, both the box and label text dim via
- * `[data-disabled]` on the host.
+ * Deliberately minimal (no tables / nested lists) and **self-contained** — the
+ * repo ships no markdown engine on `main`. Swap in a full parser later without
+ * touching the view.
+ */
+function renderMarkdown(src) {
+    const blocks = [];
+    const fence = /```([\w-]*)\n?([\s\S]*?)```/g;
+    let last = 0;
+    for (let m = fence.exec(src); m; m = fence.exec(src)) {
+        const before = src.slice(last, m.index);
+        if (before.trim())
+            blocks.push({ kind: 'prose', html: renderProse(before) });
+        blocks.push({ kind: 'code', lang: m[1] || '', code: m[2].replace(/\n$/, '') });
+        last = fence.lastIndex;
+    }
+    const rest = src.slice(last);
+    if (rest.trim())
+        blocks.push({ kind: 'prose', html: renderProse(rest) });
+    return blocks;
+}
+
+/** Human-readable accessible name per role. */
+const ROLE_LABEL = {
+    user: 'You',
+    assistant: 'Assistant',
+    system: 'System',
+    tool: 'Tool',
+};
+/**
+ * Renders a single AI-thread message. Reuses the core `KjChat` row directive
+ * for `role="article"` + side semantics, and renders the body per role:
+ * user/assistant get a bubble with **safe markdown** (code blocks carry a copy
+ * button), system gets a centered note, tool gets a tool-call card. Assistant
+ * turns also surface tool-call cards, citations, and a reduced-motion typing
+ * indicator while streaming.
  *
- * @doc-example Default
- *   The default checkbox bound to a `signal<boolean>` via `[(checked)]`.
- *   @doc-file checkbox.default.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common checkbox usages — checked binding,
- *   indeterminate parent, size variants, and disabled.
- *   @doc-file checkbox.usage.example.ts
- * @doc-example Checked
- *   Pre-selected on first render. Two-way bind to persist user changes.
- *   @doc-file checkbox.checked.example.ts
- * @doc-example Indeterminate
- *   Tri-state "some-of-many" parent for a select-all row.
- *   @doc-file checkbox.indeterminate.example.ts
- * @doc-example Disabled
- *   `[disabled]="true"` dims the box + label and removes pointer events.
- *   @doc-file checkbox.disabled.example.ts
+ * The message is given an `aria-label` (its role name) so AT announces
+ * "Assistant, article" rather than an anonymous region — the visible content is
+ * the message text itself.
+ *
+ * @doc
+ * @doc-name ai-chat
+ */
+class KjChatMessage {
+    sanitizer = inject(DomSanitizer);
+    /** The message to render. */
+    message = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** User messages sit on the `end` side; everyone else on `start`. */
+    side = computed(() => (this.message().role === 'user' ? 'end' : 'start'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    roleLabel = computed(() => ROLE_LABEL[this.message().role], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roleLabel" }] : /* istanbul ignore next */ []));
+    avatarGlyph = computed(() => this.roleLabel().charAt(0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarGlyph" }] : /* istanbul ignore next */ []));
+    showAvatar = computed(() => this.message().role !== 'system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAvatar" }] : /* istanbul ignore next */ []));
+    /** Parsed markdown blocks for the body. */
+    blocks = computed(() => renderMarkdown(this.message().content), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocks" }] : /* istanbul ignore next */ []));
+    _copied = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_copied" }] : /* istanbul ignore next */ []));
+    copiedIndex = this._copied.asReadonly();
+    safe(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    async copy(code, index) {
+        try {
+            await navigator.clipboard?.writeText(code);
+            this._copied.set(index);
+            setTimeout(() => this._copied.set(null), 2000);
+        }
+        catch {
+            /* clipboard unavailable — no-op */
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjChatMessage, isStandalone: true, selector: "kj-chat-message", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "kj-chat-msg-host" }, ngImport: i0, template: `
+    <div
+      kjChat
+      class="kj-chat-msg"
+      [kjSide]="side()"
+      [attr.data-role]="message().role"
+      [attr.aria-label]="roleLabel()"
+    >
+      @if (showAvatar()) {
+        <div class="kj-chat-msg__avatar" aria-hidden="true">{{ avatarGlyph() }}</div>
+      }
+
+      <div class="kj-chat-msg__bubble">
+        <!-- Tool-call cards (assistant turns) -->
+        @for (tc of message().toolCalls ?? []; track tc.id) {
+          <div
+            class="kj-chat-tool"
+            [attr.data-status]="tc.status"
+            role="group"
+            [attr.aria-label]="'Tool call: ' + tc.name"
+          >
+            <span class="kj-chat-tool__icon" aria-hidden="true">⚙</span>
+            <span class="kj-chat-tool__name">{{ tc.name }}</span>
+            <span class="kj-chat-tool__status">{{ tc.status }}</span>
+            @if (tc.error) {
+              <span class="kj-chat-tool__error">{{ tc.error }}</span>
+            }
+          </div>
+        }
+
+        <!-- Body -->
+        <div class="kj-chat-msg__body">
+          @for (block of blocks(); track $index) {
+            @if (block.kind === 'code') {
+              <div class="kj-chat-code">
+                <div class="kj-chat-code__bar">
+                  <span class="kj-chat-code__lang">{{ block.lang || 'code' }}</span>
+                  <button
+                    type="button"
+                    class="kj-chat-code__copy"
+                    [attr.aria-label]="copiedIndex() === $index ? 'Copied' : 'Copy code'"
+                    (click)="copy(block.code, $index)"
+                  >
+                    {{ copiedIndex() === $index ? 'Copied' : 'Copy' }}
+                  </button>
+                </div>
+                <pre class="kj-chat-code__pre"><code>{{ block.code }}</code></pre>
+              </div>
+            } @else {
+              <div class="kj-chat-md" [innerHTML]="safe(block.html)"></div>
+            }
+          }
+
+          <!-- Typing indicator while streaming with no content yet -->
+          @if (message().streaming && message().content.length === 0) {
+            <div class="kj-chat-typing" role="status" aria-label="Assistant is typing">
+              <span class="kj-chat-typing__dot"></span>
+              <span class="kj-chat-typing__dot"></span>
+              <span class="kj-chat-typing__dot"></span>
+            </div>
+          }
+        </div>
+
+        <!-- Error -->
+        @if (message().error) {
+          <p class="kj-chat-msg__error" role="alert">{{ message().error }}</p>
+        }
+
+        <!-- Citations -->
+        @if ((message().citations ?? []).length > 0) {
+          <ul class="kj-chat-cites" aria-label="Sources">
+            @for (c of message().citations ?? []; track c.id) {
+              <li class="kj-chat-cite">
+                @if (c.url) {
+                  <a
+                    class="kj-chat-cite__link"
+                    [href]="c.url"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    >{{ c.title }}</a
+                  >
+                } @else {
+                  <span class="kj-chat-cite__link">{{ c.title }}</span>
+                }
+                @if (c.snippet) {
+                  <span class="kj-chat-cite__snippet">{{ c.snippet }}</span>
+                }
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["@layer kj.component{.kj-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-chat-thread{display:flex;flex-direction:column;gap:var(--kj-space-md);padding:var(--kj-space-md);background:var(--kj-bg-body);color:var(--kj-fg-default);border-radius:var(--kj-radius-box);overflow-y:auto;font-family:var(--kj-font-sans)}.kj-chat-msg{display:flex;gap:var(--kj-space-sm);align-items:flex-start;max-width:100%}.kj-chat-msg[data-side=end]{flex-direction:row-reverse;margin-inline-start:auto}.kj-chat-msg[data-role=system]{justify-content:center}.kj-chat-msg__avatar{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:var(--kj-text-sm);font-weight:600;background:var(--kj-bg-surface);color:var(--kj-fg-default);border:1px solid var(--kj-border-default)}.kj-chat-msg__bubble{display:flex;flex-direction:column;gap:var(--kj-space-xs);padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-box);background:var(--kj-bg-surface);color:var(--kj-fg-default);max-width:min(48rem,100%);overflow-wrap:anywhere}.kj-chat-msg[data-role=user] .kj-chat-msg__bubble{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-chat-msg[data-role=system] .kj-chat-msg__bubble{background:transparent;color:var(--kj-fg-muted);font-size:var(--kj-text-sm);text-align:center;padding-block:var(--kj-space-xs)}.kj-chat-msg__body :is(p){margin:0 0 var(--kj-space-xs)}.kj-chat-msg__body :is(p):last-child{margin-bottom:0}.kj-chat-msg__error{margin:0;color:var(--kj-fg-danger);font-size:var(--kj-text-sm)}.kj-md-link{color:inherit;text-decoration:underline}.kj-md-code{font-family:ui-monospace,monospace;background:color-mix(in srgb,currentColor 12%,transparent);padding:.1em .35em;border-radius:var(--kj-radius-field);font-size:.9em}.kj-chat-code{border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);overflow:hidden;margin:var(--kj-space-xs) 0;background:var(--kj-bg-body)}.kj-chat-code__bar{display:flex;align-items:center;justify-content:space-between;padding:.25rem var(--kj-space-sm);background:var(--kj-bg-surface);border-bottom:1px solid var(--kj-border-default);font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-chat-code__copy{min-height:1.75rem;padding:.25rem .6rem;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);color:var(--kj-fg-default);font-size:var(--kj-text-sm);cursor:pointer}.kj-chat-code__copy:hover{background:var(--kj-bg-surface)}.kj-chat-code__copy:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-chat-code__pre{margin:0;padding:var(--kj-space-sm);overflow-x:auto;font-family:ui-monospace,monospace;font-size:.9em;color:var(--kj-fg-default)}.kj-chat-tool{display:flex;align-items:center;gap:var(--kj-space-xs);padding:.35rem var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);font-size:var(--kj-text-sm)}.kj-chat-tool__name{font-weight:600;font-family:ui-monospace,monospace}.kj-chat-tool__status{margin-inline-start:auto;color:var(--kj-fg-muted);text-transform:capitalize}.kj-chat-tool[data-status=error]{border-color:var(--kj-border-danger)}.kj-chat-tool[data-status=error] .kj-chat-tool__status,.kj-chat-tool__error{color:var(--kj-fg-danger)}.kj-chat-cites{list-style:none;margin:var(--kj-space-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kj-space-xs)}.kj-chat-cite{display:inline-flex;align-items:baseline;gap:.35rem;padding:.15rem .5rem;border:1px solid var(--kj-border-default);border-radius:999px;font-size:var(--kj-text-sm);background:var(--kj-bg-body)}.kj-chat-cite__link{color:var(--kj-fg-info);text-decoration:none}.kj-chat-cite__link:hover{text-decoration:underline}.kj-chat-cite__snippet{color:var(--kj-fg-muted)}.kj-chat-typing{display:inline-flex;gap:.25rem;align-items:center;padding:.25rem 0}.kj-chat-typing__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--kj-fg-muted);animation:kj-chat-bounce 1.2s infinite ease-in-out both}.kj-chat-typing__dot:nth-child(2){animation-delay:.15s}.kj-chat-typing__dot:nth-child(3){animation-delay:.3s}@keyframes kj-chat-bounce{0%,80%,to{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.kj-chat-typing__dot{animation:none;opacity:.6}}.kj-prompt{position:relative;display:flex;align-items:flex-end;gap:var(--kj-space-sm);padding:var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-box);background:var(--kj-bg-field, var(--kj-input-bg))}.kj-prompt:focus-within{border-color:var(--kj-border-focus)}.kj-prompt__textarea{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--kj-input-fg, var(--kj-fg-default));font-family:var(--kj-font-sans);font-size:var(--kj-input-font-size, 1rem);line-height:1.5;max-height:200px;overflow-y:auto}.kj-prompt__textarea::placeholder{color:var(--kj-input-placeholder-fg, var(--kj-fg-muted))}.kj-prompt__actions{display:flex;align-items:center;gap:var(--kj-space-xs);flex:0 0 auto}.kj-prompt__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;font-size:1.1rem}.kj-prompt__btn:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-prompt__btn--send{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__btn--send:disabled{opacity:.5;cursor:not-allowed}.kj-prompt__btn--stop{background:var(--kj-bg-danger);color:var(--kj-fg-on-danger)}.kj-prompt__slash{position:absolute;bottom:calc(100% + .25rem);left:0;right:0;margin:0;padding:.25rem;list-style:none;background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:0 4px 16px #00000026;max-height:14rem;overflow-y:auto;z-index:10}.kj-prompt__slash-item{display:flex;flex-direction:column;gap:.1rem;padding:var(--kj-space-xs) var(--kj-space-sm);border-radius:var(--kj-radius-field);cursor:pointer}.kj-prompt__slash-item.is-active,.kj-prompt__slash-item:hover{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__slash-name{font-family:ui-monospace,monospace;font-weight:600}.kj-prompt__slash-desc{font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-prompt__slash-item.is-active .kj-prompt__slash-desc,.kj-prompt__slash-item:hover .kj-prompt__slash-desc{color:inherit}}\n"], dependencies: [{ kind: "directive", type: KjChat, selector: "[kjChat]", inputs: ["kjSide", "kjChatAuthor", "kjChatGrouped", "kjRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-chat-message', standalone: true, imports: [KjChat], template: `
+    <div
+      kjChat
+      class="kj-chat-msg"
+      [kjSide]="side()"
+      [attr.data-role]="message().role"
+      [attr.aria-label]="roleLabel()"
+    >
+      @if (showAvatar()) {
+        <div class="kj-chat-msg__avatar" aria-hidden="true">{{ avatarGlyph() }}</div>
+      }
+
+      <div class="kj-chat-msg__bubble">
+        <!-- Tool-call cards (assistant turns) -->
+        @for (tc of message().toolCalls ?? []; track tc.id) {
+          <div
+            class="kj-chat-tool"
+            [attr.data-status]="tc.status"
+            role="group"
+            [attr.aria-label]="'Tool call: ' + tc.name"
+          >
+            <span class="kj-chat-tool__icon" aria-hidden="true">⚙</span>
+            <span class="kj-chat-tool__name">{{ tc.name }}</span>
+            <span class="kj-chat-tool__status">{{ tc.status }}</span>
+            @if (tc.error) {
+              <span class="kj-chat-tool__error">{{ tc.error }}</span>
+            }
+          </div>
+        }
+
+        <!-- Body -->
+        <div class="kj-chat-msg__body">
+          @for (block of blocks(); track $index) {
+            @if (block.kind === 'code') {
+              <div class="kj-chat-code">
+                <div class="kj-chat-code__bar">
+                  <span class="kj-chat-code__lang">{{ block.lang || 'code' }}</span>
+                  <button
+                    type="button"
+                    class="kj-chat-code__copy"
+                    [attr.aria-label]="copiedIndex() === $index ? 'Copied' : 'Copy code'"
+                    (click)="copy(block.code, $index)"
+                  >
+                    {{ copiedIndex() === $index ? 'Copied' : 'Copy' }}
+                  </button>
+                </div>
+                <pre class="kj-chat-code__pre"><code>{{ block.code }}</code></pre>
+              </div>
+            } @else {
+              <div class="kj-chat-md" [innerHTML]="safe(block.html)"></div>
+            }
+          }
+
+          <!-- Typing indicator while streaming with no content yet -->
+          @if (message().streaming && message().content.length === 0) {
+            <div class="kj-chat-typing" role="status" aria-label="Assistant is typing">
+              <span class="kj-chat-typing__dot"></span>
+              <span class="kj-chat-typing__dot"></span>
+              <span class="kj-chat-typing__dot"></span>
+            </div>
+          }
+        </div>
+
+        <!-- Error -->
+        @if (message().error) {
+          <p class="kj-chat-msg__error" role="alert">{{ message().error }}</p>
+        }
+
+        <!-- Citations -->
+        @if ((message().citations ?? []).length > 0) {
+          <ul class="kj-chat-cites" aria-label="Sources">
+            @for (c of message().citations ?? []; track c.id) {
+              <li class="kj-chat-cite">
+                @if (c.url) {
+                  <a
+                    class="kj-chat-cite__link"
+                    [href]="c.url"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    >{{ c.title }}</a
+                  >
+                } @else {
+                  <span class="kj-chat-cite__link">{{ c.title }}</span>
+                }
+                @if (c.snippet) {
+                  <span class="kj-chat-cite__snippet">{{ c.snippet }}</span>
+                }
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-chat-msg-host' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-chat-thread{display:flex;flex-direction:column;gap:var(--kj-space-md);padding:var(--kj-space-md);background:var(--kj-bg-body);color:var(--kj-fg-default);border-radius:var(--kj-radius-box);overflow-y:auto;font-family:var(--kj-font-sans)}.kj-chat-msg{display:flex;gap:var(--kj-space-sm);align-items:flex-start;max-width:100%}.kj-chat-msg[data-side=end]{flex-direction:row-reverse;margin-inline-start:auto}.kj-chat-msg[data-role=system]{justify-content:center}.kj-chat-msg__avatar{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:var(--kj-text-sm);font-weight:600;background:var(--kj-bg-surface);color:var(--kj-fg-default);border:1px solid var(--kj-border-default)}.kj-chat-msg__bubble{display:flex;flex-direction:column;gap:var(--kj-space-xs);padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-box);background:var(--kj-bg-surface);color:var(--kj-fg-default);max-width:min(48rem,100%);overflow-wrap:anywhere}.kj-chat-msg[data-role=user] .kj-chat-msg__bubble{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-chat-msg[data-role=system] .kj-chat-msg__bubble{background:transparent;color:var(--kj-fg-muted);font-size:var(--kj-text-sm);text-align:center;padding-block:var(--kj-space-xs)}.kj-chat-msg__body :is(p){margin:0 0 var(--kj-space-xs)}.kj-chat-msg__body :is(p):last-child{margin-bottom:0}.kj-chat-msg__error{margin:0;color:var(--kj-fg-danger);font-size:var(--kj-text-sm)}.kj-md-link{color:inherit;text-decoration:underline}.kj-md-code{font-family:ui-monospace,monospace;background:color-mix(in srgb,currentColor 12%,transparent);padding:.1em .35em;border-radius:var(--kj-radius-field);font-size:.9em}.kj-chat-code{border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);overflow:hidden;margin:var(--kj-space-xs) 0;background:var(--kj-bg-body)}.kj-chat-code__bar{display:flex;align-items:center;justify-content:space-between;padding:.25rem var(--kj-space-sm);background:var(--kj-bg-surface);border-bottom:1px solid var(--kj-border-default);font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-chat-code__copy{min-height:1.75rem;padding:.25rem .6rem;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);color:var(--kj-fg-default);font-size:var(--kj-text-sm);cursor:pointer}.kj-chat-code__copy:hover{background:var(--kj-bg-surface)}.kj-chat-code__copy:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-chat-code__pre{margin:0;padding:var(--kj-space-sm);overflow-x:auto;font-family:ui-monospace,monospace;font-size:.9em;color:var(--kj-fg-default)}.kj-chat-tool{display:flex;align-items:center;gap:var(--kj-space-xs);padding:.35rem var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);font-size:var(--kj-text-sm)}.kj-chat-tool__name{font-weight:600;font-family:ui-monospace,monospace}.kj-chat-tool__status{margin-inline-start:auto;color:var(--kj-fg-muted);text-transform:capitalize}.kj-chat-tool[data-status=error]{border-color:var(--kj-border-danger)}.kj-chat-tool[data-status=error] .kj-chat-tool__status,.kj-chat-tool__error{color:var(--kj-fg-danger)}.kj-chat-cites{list-style:none;margin:var(--kj-space-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kj-space-xs)}.kj-chat-cite{display:inline-flex;align-items:baseline;gap:.35rem;padding:.15rem .5rem;border:1px solid var(--kj-border-default);border-radius:999px;font-size:var(--kj-text-sm);background:var(--kj-bg-body)}.kj-chat-cite__link{color:var(--kj-fg-info);text-decoration:none}.kj-chat-cite__link:hover{text-decoration:underline}.kj-chat-cite__snippet{color:var(--kj-fg-muted)}.kj-chat-typing{display:inline-flex;gap:.25rem;align-items:center;padding:.25rem 0}.kj-chat-typing__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--kj-fg-muted);animation:kj-chat-bounce 1.2s infinite ease-in-out both}.kj-chat-typing__dot:nth-child(2){animation-delay:.15s}.kj-chat-typing__dot:nth-child(3){animation-delay:.3s}@keyframes kj-chat-bounce{0%,80%,to{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.kj-chat-typing__dot{animation:none;opacity:.6}}.kj-prompt{position:relative;display:flex;align-items:flex-end;gap:var(--kj-space-sm);padding:var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-box);background:var(--kj-bg-field, var(--kj-input-bg))}.kj-prompt:focus-within{border-color:var(--kj-border-focus)}.kj-prompt__textarea{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--kj-input-fg, var(--kj-fg-default));font-family:var(--kj-font-sans);font-size:var(--kj-input-font-size, 1rem);line-height:1.5;max-height:200px;overflow-y:auto}.kj-prompt__textarea::placeholder{color:var(--kj-input-placeholder-fg, var(--kj-fg-muted))}.kj-prompt__actions{display:flex;align-items:center;gap:var(--kj-space-xs);flex:0 0 auto}.kj-prompt__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;font-size:1.1rem}.kj-prompt__btn:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-prompt__btn--send{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__btn--send:disabled{opacity:.5;cursor:not-allowed}.kj-prompt__btn--stop{background:var(--kj-bg-danger);color:var(--kj-fg-on-danger)}.kj-prompt__slash{position:absolute;bottom:calc(100% + .25rem);left:0;right:0;margin:0;padding:.25rem;list-style:none;background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:0 4px 16px #00000026;max-height:14rem;overflow-y:auto;z-index:10}.kj-prompt__slash-item{display:flex;flex-direction:column;gap:.1rem;padding:var(--kj-space-xs) var(--kj-space-sm);border-radius:var(--kj-radius-field);cursor:pointer}.kj-prompt__slash-item.is-active,.kj-prompt__slash-item:hover{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__slash-name{font-family:ui-monospace,monospace;font-weight:600}.kj-prompt__slash-desc{font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-prompt__slash-item.is-active .kj-prompt__slash-desc,.kj-prompt__slash-item:hover .kj-prompt__slash-desc{color:inherit}}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] } });
+
+/**
+ * The AI thread surface: a scrollable message log driven by a {@link KjChatStore}.
+ *
+ * **Reuses `KjChatLog`** (core) for the `role="log"` message-log container, but
+ * sets `kjChatLogLive="off"` because streamed tokens mutate an *existing*
+ * message node — announcing every mutation would spam AT. Instead a single
+ * dedicated **visually-hidden `aria-live="polite"` region** carries
+ * announcements, fed by {@link KjChatAnnouncer}'s **coalescer** so the reply is
+ * announced as whole sentences (never char-by-char, never duplicated). This is
+ * the kit's accessibility differentiator.
+ *
+ * Provider-agnostic: pair with `KjPromptInput` and drive `KjChatStore` from any
+ * model / stream — the kit ships **no** LLM SDK or backend.
+ *
+ * @doc-example Streaming (simulated)
+ *   A full send → simulated-stream → reply loop with slash commands, a Stop
+ *   button, tool-call cards and citations. No backend — a fake token generator
+ *   feeds the store on a timer.
+ *   @doc-file ai-chat.example.ts
  *
  * @doc-keyboard
- *   Space — Toggles the checked state
- *   Tab   — Moves focus to the next focusable element
+ *   Enter        — Send the message
+ *   Shift+Enter  — Insert a newline
+ *   Esc          — Stop generating (while streaming) / close the slash menu
+ *   ArrowUp/Down — Move the slash-command selection
  *
  * @doc-aria
- *   role="checkbox"     — Applied to the inner focusable box by the headless directive
- *   aria-checked        — Reflects `true`, `false`, or `"mixed"` for indeterminate
- *   aria-disabled       — Reflected when `[disabled]` is true
- *   aria-labelledby     — Auto-wired to the projected label span
- *   data-disabled       — Mirrors the disabled posture for theme/scope hooks
- *   data-indeterminate  — Reflects the indeterminate posture for the dash glyph
+ *   role       — `log` on the thread container (reuses `KjChatLog`)
+ *   aria-live  — `off` on the visible log; a dedicated visually-hidden
+ *                `polite` region carries coalesced sentence announcements
+ *   article    — each message is an `article` (via `KjChat`) named by its role
  *
- * @doc-css-var
- *   --kj-checkbox-size         — Box edge length. `data-size="sm|lg"` overrides; default 1rem.
- *   --kj-checkbox-bg           — Unchecked background fill. Defaults to --kj-bg-body.
+ * @doc-a11y
+ *   Streaming replies are announced by a coalesced polite live region on
+ *   sentence boundaries — never char-by-char — so screen-reader users hear
+ *   whole sentences once each. Keyboard send/stop, reduced-motion typing dots,
+ *   and ≥44px controls complete the AAA story.
+ *
+ * @doc-related chat,command-palette,textarea
+ *
+ * @doc-category Library/AI
+ * @doc
+ * @doc-name ai-chat
+ * @doc-is-main
+ * @doc-description Provider-agnostic AI chat thread with streaming append, coalesced live-region announcements, slash commands, tool-call cards, and citations.
+ */
+class KjChatThread {
+    /** The store driving this thread. */
+    store = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "store" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the log landmark. */
+    kjLabel = input('Conversation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLabel" }] : /* istanbul ignore next */ []));
+    /** @internal — the coalescing announcer for the polite live region. */
+    announcer = inject(KjChatAnnouncer);
+    injector = inject(Injector);
+    logEl = viewChild.required('log');
+    lastId = null;
+    lastLen = 0;
+    prevStatus = null;
+    constructor() {
+        // Feed streamed deltas into the coalescer and manage flush/error/scroll.
+        effect(() => {
+            const store = this.store();
+            const msgs = store.messages();
+            const sid = store.streamingId();
+            const status = store.status();
+            untracked(() => {
+                // New stream started — reset the delta cursor.
+                if (sid !== this.lastId) {
+                    this.lastId = sid;
+                    this.lastLen = 0;
+                }
+                // Push the newly-arrived text delta to the coalescer.
+                if (sid) {
+                    const m = msgs.find((x) => x.id === sid);
+                    if (m) {
+                        const delta = m.content.slice(this.lastLen);
+                        this.lastLen = m.content.length;
+                        if (delta)
+                            this.announcer.push(delta);
+                    }
+                }
+                // Status transitions: flush remainder on completion, announce errors.
+                if (this.prevStatus === 'streaming' && status !== 'streaming') {
+                    this.announcer.flush();
+                    if (status === 'error')
+                        this.announcer.announce('Response failed.');
+                }
+                this.prevStatus = status;
+                this.scrollToBottom();
+            });
+        });
+    }
+    scrollToBottom() {
+        afterNextRender(() => {
+            const el = this.logEl().nativeElement;
+            el.scrollTop = el.scrollHeight;
+        }, { injector: this.injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatThread, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjChatThread, isStandalone: true, selector: "kj-chat-thread", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, kjLabel: { classPropertyName: "kjLabel", publicName: "kjLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kj-chat-thread-host" }, providers: [KjChatAnnouncer], viewQueries: [{ propertyName: "logEl", first: true, predicate: ["log"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #log kjChatLog kjChatLogLive="off" class="kj-chat-thread" [kjChatLogLabel]="kjLabel()">
+      @for (m of store().messages(); track m.id) {
+        <kj-chat-message [message]="m" />
+      }
+    </div>
+
+    <!-- Coalesced polite announcer: whole sentences, debounced by boundary. -->
+    <div class="kj-visually-hidden" aria-live="polite" aria-atomic="false">
+      {{ announcer.message() }}
+    </div>
+  `, isInline: true, styles: ["@layer kj.component{.kj-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-chat-thread{display:flex;flex-direction:column;gap:var(--kj-space-md);padding:var(--kj-space-md);background:var(--kj-bg-body);color:var(--kj-fg-default);border-radius:var(--kj-radius-box);overflow-y:auto;font-family:var(--kj-font-sans)}.kj-chat-msg{display:flex;gap:var(--kj-space-sm);align-items:flex-start;max-width:100%}.kj-chat-msg[data-side=end]{flex-direction:row-reverse;margin-inline-start:auto}.kj-chat-msg[data-role=system]{justify-content:center}.kj-chat-msg__avatar{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:var(--kj-text-sm);font-weight:600;background:var(--kj-bg-surface);color:var(--kj-fg-default);border:1px solid var(--kj-border-default)}.kj-chat-msg__bubble{display:flex;flex-direction:column;gap:var(--kj-space-xs);padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-box);background:var(--kj-bg-surface);color:var(--kj-fg-default);max-width:min(48rem,100%);overflow-wrap:anywhere}.kj-chat-msg[data-role=user] .kj-chat-msg__bubble{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-chat-msg[data-role=system] .kj-chat-msg__bubble{background:transparent;color:var(--kj-fg-muted);font-size:var(--kj-text-sm);text-align:center;padding-block:var(--kj-space-xs)}.kj-chat-msg__body :is(p){margin:0 0 var(--kj-space-xs)}.kj-chat-msg__body :is(p):last-child{margin-bottom:0}.kj-chat-msg__error{margin:0;color:var(--kj-fg-danger);font-size:var(--kj-text-sm)}.kj-md-link{color:inherit;text-decoration:underline}.kj-md-code{font-family:ui-monospace,monospace;background:color-mix(in srgb,currentColor 12%,transparent);padding:.1em .35em;border-radius:var(--kj-radius-field);font-size:.9em}.kj-chat-code{border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);overflow:hidden;margin:var(--kj-space-xs) 0;background:var(--kj-bg-body)}.kj-chat-code__bar{display:flex;align-items:center;justify-content:space-between;padding:.25rem var(--kj-space-sm);background:var(--kj-bg-surface);border-bottom:1px solid var(--kj-border-default);font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-chat-code__copy{min-height:1.75rem;padding:.25rem .6rem;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);color:var(--kj-fg-default);font-size:var(--kj-text-sm);cursor:pointer}.kj-chat-code__copy:hover{background:var(--kj-bg-surface)}.kj-chat-code__copy:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-chat-code__pre{margin:0;padding:var(--kj-space-sm);overflow-x:auto;font-family:ui-monospace,monospace;font-size:.9em;color:var(--kj-fg-default)}.kj-chat-tool{display:flex;align-items:center;gap:var(--kj-space-xs);padding:.35rem var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);font-size:var(--kj-text-sm)}.kj-chat-tool__name{font-weight:600;font-family:ui-monospace,monospace}.kj-chat-tool__status{margin-inline-start:auto;color:var(--kj-fg-muted);text-transform:capitalize}.kj-chat-tool[data-status=error]{border-color:var(--kj-border-danger)}.kj-chat-tool[data-status=error] .kj-chat-tool__status,.kj-chat-tool__error{color:var(--kj-fg-danger)}.kj-chat-cites{list-style:none;margin:var(--kj-space-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kj-space-xs)}.kj-chat-cite{display:inline-flex;align-items:baseline;gap:.35rem;padding:.15rem .5rem;border:1px solid var(--kj-border-default);border-radius:999px;font-size:var(--kj-text-sm);background:var(--kj-bg-body)}.kj-chat-cite__link{color:var(--kj-fg-info);text-decoration:none}.kj-chat-cite__link:hover{text-decoration:underline}.kj-chat-cite__snippet{color:var(--kj-fg-muted)}.kj-chat-typing{display:inline-flex;gap:.25rem;align-items:center;padding:.25rem 0}.kj-chat-typing__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--kj-fg-muted);animation:kj-chat-bounce 1.2s infinite ease-in-out both}.kj-chat-typing__dot:nth-child(2){animation-delay:.15s}.kj-chat-typing__dot:nth-child(3){animation-delay:.3s}@keyframes kj-chat-bounce{0%,80%,to{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.kj-chat-typing__dot{animation:none;opacity:.6}}.kj-prompt{position:relative;display:flex;align-items:flex-end;gap:var(--kj-space-sm);padding:var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-box);background:var(--kj-bg-field, var(--kj-input-bg))}.kj-prompt:focus-within{border-color:var(--kj-border-focus)}.kj-prompt__textarea{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--kj-input-fg, var(--kj-fg-default));font-family:var(--kj-font-sans);font-size:var(--kj-input-font-size, 1rem);line-height:1.5;max-height:200px;overflow-y:auto}.kj-prompt__textarea::placeholder{color:var(--kj-input-placeholder-fg, var(--kj-fg-muted))}.kj-prompt__actions{display:flex;align-items:center;gap:var(--kj-space-xs);flex:0 0 auto}.kj-prompt__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;font-size:1.1rem}.kj-prompt__btn:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-prompt__btn--send{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__btn--send:disabled{opacity:.5;cursor:not-allowed}.kj-prompt__btn--stop{background:var(--kj-bg-danger);color:var(--kj-fg-on-danger)}.kj-prompt__slash{position:absolute;bottom:calc(100% + .25rem);left:0;right:0;margin:0;padding:.25rem;list-style:none;background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:0 4px 16px #00000026;max-height:14rem;overflow-y:auto;z-index:10}.kj-prompt__slash-item{display:flex;flex-direction:column;gap:.1rem;padding:var(--kj-space-xs) var(--kj-space-sm);border-radius:var(--kj-radius-field);cursor:pointer}.kj-prompt__slash-item.is-active,.kj-prompt__slash-item:hover{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__slash-name{font-family:ui-monospace,monospace;font-weight:600}.kj-prompt__slash-desc{font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-prompt__slash-item.is-active .kj-prompt__slash-desc,.kj-prompt__slash-item:hover .kj-prompt__slash-desc{color:inherit}}\n"], dependencies: [{ kind: "directive", type: KjChatLog, selector: "[kjChatLog]", inputs: ["kjChatLogLive", "kjChatLogLabel"] }, { kind: "component", type: KjChatMessage, selector: "kj-chat-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatThread, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-chat-thread', standalone: true, imports: [KjChatLog, KjChatMessage], providers: [KjChatAnnouncer], template: `
+    <div #log kjChatLog kjChatLogLive="off" class="kj-chat-thread" [kjChatLogLabel]="kjLabel()">
+      @for (m of store().messages(); track m.id) {
+        <kj-chat-message [message]="m" />
+      }
+    </div>
+
+    <!-- Coalesced polite announcer: whole sentences, debounced by boundary. -->
+    <div class="kj-visually-hidden" aria-live="polite" aria-atomic="false">
+      {{ announcer.message() }}
+    </div>
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-chat-thread-host' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-chat-thread{display:flex;flex-direction:column;gap:var(--kj-space-md);padding:var(--kj-space-md);background:var(--kj-bg-body);color:var(--kj-fg-default);border-radius:var(--kj-radius-box);overflow-y:auto;font-family:var(--kj-font-sans)}.kj-chat-msg{display:flex;gap:var(--kj-space-sm);align-items:flex-start;max-width:100%}.kj-chat-msg[data-side=end]{flex-direction:row-reverse;margin-inline-start:auto}.kj-chat-msg[data-role=system]{justify-content:center}.kj-chat-msg__avatar{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:var(--kj-text-sm);font-weight:600;background:var(--kj-bg-surface);color:var(--kj-fg-default);border:1px solid var(--kj-border-default)}.kj-chat-msg__bubble{display:flex;flex-direction:column;gap:var(--kj-space-xs);padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-box);background:var(--kj-bg-surface);color:var(--kj-fg-default);max-width:min(48rem,100%);overflow-wrap:anywhere}.kj-chat-msg[data-role=user] .kj-chat-msg__bubble{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-chat-msg[data-role=system] .kj-chat-msg__bubble{background:transparent;color:var(--kj-fg-muted);font-size:var(--kj-text-sm);text-align:center;padding-block:var(--kj-space-xs)}.kj-chat-msg__body :is(p){margin:0 0 var(--kj-space-xs)}.kj-chat-msg__body :is(p):last-child{margin-bottom:0}.kj-chat-msg__error{margin:0;color:var(--kj-fg-danger);font-size:var(--kj-text-sm)}.kj-md-link{color:inherit;text-decoration:underline}.kj-md-code{font-family:ui-monospace,monospace;background:color-mix(in srgb,currentColor 12%,transparent);padding:.1em .35em;border-radius:var(--kj-radius-field);font-size:.9em}.kj-chat-code{border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);overflow:hidden;margin:var(--kj-space-xs) 0;background:var(--kj-bg-body)}.kj-chat-code__bar{display:flex;align-items:center;justify-content:space-between;padding:.25rem var(--kj-space-sm);background:var(--kj-bg-surface);border-bottom:1px solid var(--kj-border-default);font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-chat-code__copy{min-height:1.75rem;padding:.25rem .6rem;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);color:var(--kj-fg-default);font-size:var(--kj-text-sm);cursor:pointer}.kj-chat-code__copy:hover{background:var(--kj-bg-surface)}.kj-chat-code__copy:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-chat-code__pre{margin:0;padding:var(--kj-space-sm);overflow-x:auto;font-family:ui-monospace,monospace;font-size:.9em;color:var(--kj-fg-default)}.kj-chat-tool{display:flex;align-items:center;gap:var(--kj-space-xs);padding:.35rem var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);font-size:var(--kj-text-sm)}.kj-chat-tool__name{font-weight:600;font-family:ui-monospace,monospace}.kj-chat-tool__status{margin-inline-start:auto;color:var(--kj-fg-muted);text-transform:capitalize}.kj-chat-tool[data-status=error]{border-color:var(--kj-border-danger)}.kj-chat-tool[data-status=error] .kj-chat-tool__status,.kj-chat-tool__error{color:var(--kj-fg-danger)}.kj-chat-cites{list-style:none;margin:var(--kj-space-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kj-space-xs)}.kj-chat-cite{display:inline-flex;align-items:baseline;gap:.35rem;padding:.15rem .5rem;border:1px solid var(--kj-border-default);border-radius:999px;font-size:var(--kj-text-sm);background:var(--kj-bg-body)}.kj-chat-cite__link{color:var(--kj-fg-info);text-decoration:none}.kj-chat-cite__link:hover{text-decoration:underline}.kj-chat-cite__snippet{color:var(--kj-fg-muted)}.kj-chat-typing{display:inline-flex;gap:.25rem;align-items:center;padding:.25rem 0}.kj-chat-typing__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--kj-fg-muted);animation:kj-chat-bounce 1.2s infinite ease-in-out both}.kj-chat-typing__dot:nth-child(2){animation-delay:.15s}.kj-chat-typing__dot:nth-child(3){animation-delay:.3s}@keyframes kj-chat-bounce{0%,80%,to{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.kj-chat-typing__dot{animation:none;opacity:.6}}.kj-prompt{position:relative;display:flex;align-items:flex-end;gap:var(--kj-space-sm);padding:var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-box);background:var(--kj-bg-field, var(--kj-input-bg))}.kj-prompt:focus-within{border-color:var(--kj-border-focus)}.kj-prompt__textarea{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--kj-input-fg, var(--kj-fg-default));font-family:var(--kj-font-sans);font-size:var(--kj-input-font-size, 1rem);line-height:1.5;max-height:200px;overflow-y:auto}.kj-prompt__textarea::placeholder{color:var(--kj-input-placeholder-fg, var(--kj-fg-muted))}.kj-prompt__actions{display:flex;align-items:center;gap:var(--kj-space-xs);flex:0 0 auto}.kj-prompt__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;font-size:1.1rem}.kj-prompt__btn:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-prompt__btn--send{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__btn--send:disabled{opacity:.5;cursor:not-allowed}.kj-prompt__btn--stop{background:var(--kj-bg-danger);color:var(--kj-fg-on-danger)}.kj-prompt__slash{position:absolute;bottom:calc(100% + .25rem);left:0;right:0;margin:0;padding:.25rem;list-style:none;background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:0 4px 16px #00000026;max-height:14rem;overflow-y:auto;z-index:10}.kj-prompt__slash-item{display:flex;flex-direction:column;gap:.1rem;padding:var(--kj-space-xs) var(--kj-space-sm);border-radius:var(--kj-radius-field);cursor:pointer}.kj-prompt__slash-item.is-active,.kj-prompt__slash-item:hover{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__slash-name{font-family:ui-monospace,monospace;font-weight:600}.kj-prompt__slash-desc{font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-prompt__slash-item.is-active .kj-prompt__slash-desc,.kj-prompt__slash-item:hover .kj-prompt__slash-desc{color:inherit}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], kjLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabel", required: false }] }], logEl: [{ type: i0.ViewChild, args: ['log', { isSignal: true }] }] } });
+
+let _promptId = 0;
+/**
+ * Prompt composer for an AI thread: an auto-growing textarea with send / stop
+ * controls, an optional attachment slot (`[kjPromptAttachments]`), and a
+ * slash-command menu.
+ *
+ * **Keyboard:** `Enter` sends, `Shift+Enter` inserts a newline, `Esc` stops the
+ * stream (when streaming) or closes the slash menu; `↑/↓` move the slash
+ * selection and `Enter` picks it. The menu is a `role="listbox"`; the textarea
+ * keeps DOM focus and points `aria-activedescendant` at the active option.
+ *
+ * **Slash matching reuses the command-palette engine** via
+ * `matchSlashCommands` (backed by the palette's `kjSubstringFilter`).
+ *
+ * @doc
+ * @doc-name ai-chat
+ */
+class KjPromptInput {
+    uid = ++_promptId;
+    textareaId = `kj-prompt-${this.uid}`;
+    listboxId = `kj-prompt-slash-${this.uid}`;
+    /** Two-way bound draft text. */
+    kjValue = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Placeholder text. */
+    kjPlaceholder = input('Message the assistant…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the textarea. */
+    kjLabel = input('Message', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLabel" }] : /* istanbul ignore next */ []));
+    /** When true, show the Stop button instead of Send. */
+    kjStreaming = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjStreaming" }] : /* istanbul ignore next */ []));
+    /** Disable the composer entirely. */
+    kjDisabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjDisabled" }] : /* istanbul ignore next */ []));
+    /** Available slash commands. */
+    kjSlashCommands = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjSlashCommands" }] : /* istanbul ignore next */ []));
+    /** Emits the trimmed message text on send. */
+    kjSend = output();
+    /** Emits when the user requests a stop. */
+    kjStop = output();
+    /** Emits the picked slash command. */
+    kjSlashSelect = output();
+    ta = viewChild.required('ta');
+    _active = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+    activeIndex = this._active.asReadonly();
+    slash = computed(() => parseSlash(this.kjValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slash" }] : /* istanbul ignore next */ []));
+    slashMatches = computed(() => {
+        const s = this.slash();
+        if (!s.active)
+            return [];
+        return matchSlashCommands(s.query, this.kjSlashCommands());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slashMatches" }] : /* istanbul ignore next */ []));
+    slashOpen = computed(() => this.slashMatches().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slashOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the active index in range as matches change.
+        effect(() => {
+            const n = this.slashMatches().length;
+            if (this._active() >= n)
+                this._active.set(0);
+        });
+        // Auto-grow whenever the value changes (incl. programmatic resets).
+        effect(() => {
+            this.kjValue();
+            queueMicrotask(() => this.autogrow());
+        });
+    }
+    optionId(i) {
+        return `${this.listboxId}-opt-${i}`;
+    }
+    onInput(ev) {
+        this.kjValue.set(ev.target.value);
+        this.autogrow();
+    }
+    onKeydown(ev) {
+        if (this.slashOpen()) {
+            if (ev.key === 'ArrowDown') {
+                ev.preventDefault();
+                this._active.update((i) => (i + 1) % this.slashMatches().length);
+                return;
+            }
+            if (ev.key === 'ArrowUp') {
+                ev.preventDefault();
+                const n = this.slashMatches().length;
+                this._active.update((i) => (i - 1 + n) % n);
+                return;
+            }
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                const cmd = this.slashMatches()[this._active()];
+                if (cmd)
+                    this.commitSlash(cmd);
+                return;
+            }
+            if (ev.key === 'Escape') {
+                ev.preventDefault();
+                // Close the menu by clearing the in-progress slash token.
+                this.kjValue.set('');
+                return;
+            }
+        }
+        if (ev.key === 'Enter' && !ev.shiftKey) {
+            ev.preventDefault();
+            this.send();
+            return;
+        }
+        if (ev.key === 'Escape' && this.kjStreaming()) {
+            ev.preventDefault();
+            this.onStop();
+        }
+    }
+    onSubmit(ev) {
+        ev.preventDefault();
+        this.send();
+    }
+    onStop() {
+        this.kjStop.emit();
+    }
+    pickSlash(ev, cmd) {
+        ev.preventDefault(); // keep textarea focus
+        this.commitSlash(cmd);
+    }
+    commitSlash(cmd) {
+        this.kjSlashSelect.emit(cmd);
+        this.kjValue.set(cmd.name + ' ');
+        this.ta().nativeElement.focus();
+    }
+    send() {
+        const text = this.kjValue().trim();
+        if (!text || this.kjDisabled() || this.kjStreaming())
+            return;
+        this.kjSend.emit(text);
+        this.kjValue.set('');
+        this.autogrow();
+    }
+    autogrow() {
+        const el = this.ta().nativeElement;
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjPromptInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjPromptInput, isStandalone: true, selector: "kj-prompt-input", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjPlaceholder: { classPropertyName: "kjPlaceholder", publicName: "kjPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, kjLabel: { classPropertyName: "kjLabel", publicName: "kjLabel", isSignal: true, isRequired: false, transformFunction: null }, kjStreaming: { classPropertyName: "kjStreaming", publicName: "kjStreaming", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null }, kjSlashCommands: { classPropertyName: "kjSlashCommands", publicName: "kjSlashCommands", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjValue: "kjValueChange", kjSend: "kjSend", kjStop: "kjStop", kjSlashSelect: "kjSlashSelect" }, host: { classAttribute: "kj-prompt-host" }, viewQueries: [{ propertyName: "ta", first: true, predicate: ["ta"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <form class="kj-prompt" (submit)="onSubmit($event)">
+      @if (slashOpen()) {
+        <ul class="kj-prompt__slash" role="listbox" [id]="listboxId" aria-label="Slash commands">
+          @for (cmd of slashMatches(); track cmd.name; let i = $index) {
+            <li
+              class="kj-prompt__slash-item"
+              role="option"
+              [id]="optionId(i)"
+              [attr.aria-selected]="i === activeIndex()"
+              [class.is-active]="i === activeIndex()"
+              (mousedown)="pickSlash($event, cmd)"
+            >
+              <span class="kj-prompt__slash-name">{{ cmd.name }}</span>
+              @if (cmd.description) {
+                <span class="kj-prompt__slash-desc">{{ cmd.description }}</span>
+              }
+            </li>
+          }
+        </ul>
+      }
+
+      <label class="kj-visually-hidden" [attr.for]="textareaId">{{ kjLabel() }}</label>
+      <textarea
+        #ta
+        class="kj-prompt__textarea"
+        [id]="textareaId"
+        [attr.placeholder]="kjPlaceholder()"
+        [attr.aria-label]="kjLabel()"
+        [attr.role]="slashOpen() ? 'combobox' : null"
+        [attr.aria-expanded]="slashOpen() ? 'true' : null"
+        [attr.aria-controls]="slashOpen() ? listboxId : null"
+        [attr.aria-activedescendant]="slashOpen() ? optionId(activeIndex()) : null"
+        [attr.aria-haspopup]="slashOpen() ? 'listbox' : null"
+        [attr.aria-autocomplete]="slashOpen() ? 'list' : null"
+        [disabled]="kjDisabled()"
+        [value]="kjValue()"
+        rows="1"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+      ></textarea>
+
+      <div class="kj-prompt__actions">
+        <span class="kj-prompt__attachments">
+          <ng-content select="[kjPromptAttachments]" />
+        </span>
+        @if (kjStreaming()) {
+          <button
+            type="button"
+            class="kj-prompt__btn kj-prompt__btn--stop"
+            aria-label="Stop generating"
+            (click)="onStop()"
+          >
+            <span aria-hidden="true">■</span>
+          </button>
+        } @else {
+          <button
+            type="submit"
+            class="kj-prompt__btn kj-prompt__btn--send"
+            aria-label="Send message"
+            [disabled]="kjDisabled() || kjValue().trim().length === 0"
+          >
+            <span aria-hidden="true">↥</span>
+          </button>
+        }
+      </div>
+    </form>
+  `, isInline: true, styles: ["@layer kj.component{.kj-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-chat-thread{display:flex;flex-direction:column;gap:var(--kj-space-md);padding:var(--kj-space-md);background:var(--kj-bg-body);color:var(--kj-fg-default);border-radius:var(--kj-radius-box);overflow-y:auto;font-family:var(--kj-font-sans)}.kj-chat-msg{display:flex;gap:var(--kj-space-sm);align-items:flex-start;max-width:100%}.kj-chat-msg[data-side=end]{flex-direction:row-reverse;margin-inline-start:auto}.kj-chat-msg[data-role=system]{justify-content:center}.kj-chat-msg__avatar{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:var(--kj-text-sm);font-weight:600;background:var(--kj-bg-surface);color:var(--kj-fg-default);border:1px solid var(--kj-border-default)}.kj-chat-msg__bubble{display:flex;flex-direction:column;gap:var(--kj-space-xs);padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-box);background:var(--kj-bg-surface);color:var(--kj-fg-default);max-width:min(48rem,100%);overflow-wrap:anywhere}.kj-chat-msg[data-role=user] .kj-chat-msg__bubble{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-chat-msg[data-role=system] .kj-chat-msg__bubble{background:transparent;color:var(--kj-fg-muted);font-size:var(--kj-text-sm);text-align:center;padding-block:var(--kj-space-xs)}.kj-chat-msg__body :is(p){margin:0 0 var(--kj-space-xs)}.kj-chat-msg__body :is(p):last-child{margin-bottom:0}.kj-chat-msg__error{margin:0;color:var(--kj-fg-danger);font-size:var(--kj-text-sm)}.kj-md-link{color:inherit;text-decoration:underline}.kj-md-code{font-family:ui-monospace,monospace;background:color-mix(in srgb,currentColor 12%,transparent);padding:.1em .35em;border-radius:var(--kj-radius-field);font-size:.9em}.kj-chat-code{border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);overflow:hidden;margin:var(--kj-space-xs) 0;background:var(--kj-bg-body)}.kj-chat-code__bar{display:flex;align-items:center;justify-content:space-between;padding:.25rem var(--kj-space-sm);background:var(--kj-bg-surface);border-bottom:1px solid var(--kj-border-default);font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-chat-code__copy{min-height:1.75rem;padding:.25rem .6rem;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);color:var(--kj-fg-default);font-size:var(--kj-text-sm);cursor:pointer}.kj-chat-code__copy:hover{background:var(--kj-bg-surface)}.kj-chat-code__copy:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-chat-code__pre{margin:0;padding:var(--kj-space-sm);overflow-x:auto;font-family:ui-monospace,monospace;font-size:.9em;color:var(--kj-fg-default)}.kj-chat-tool{display:flex;align-items:center;gap:var(--kj-space-xs);padding:.35rem var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);font-size:var(--kj-text-sm)}.kj-chat-tool__name{font-weight:600;font-family:ui-monospace,monospace}.kj-chat-tool__status{margin-inline-start:auto;color:var(--kj-fg-muted);text-transform:capitalize}.kj-chat-tool[data-status=error]{border-color:var(--kj-border-danger)}.kj-chat-tool[data-status=error] .kj-chat-tool__status,.kj-chat-tool__error{color:var(--kj-fg-danger)}.kj-chat-cites{list-style:none;margin:var(--kj-space-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kj-space-xs)}.kj-chat-cite{display:inline-flex;align-items:baseline;gap:.35rem;padding:.15rem .5rem;border:1px solid var(--kj-border-default);border-radius:999px;font-size:var(--kj-text-sm);background:var(--kj-bg-body)}.kj-chat-cite__link{color:var(--kj-fg-info);text-decoration:none}.kj-chat-cite__link:hover{text-decoration:underline}.kj-chat-cite__snippet{color:var(--kj-fg-muted)}.kj-chat-typing{display:inline-flex;gap:.25rem;align-items:center;padding:.25rem 0}.kj-chat-typing__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--kj-fg-muted);animation:kj-chat-bounce 1.2s infinite ease-in-out both}.kj-chat-typing__dot:nth-child(2){animation-delay:.15s}.kj-chat-typing__dot:nth-child(3){animation-delay:.3s}@keyframes kj-chat-bounce{0%,80%,to{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.kj-chat-typing__dot{animation:none;opacity:.6}}.kj-prompt{position:relative;display:flex;align-items:flex-end;gap:var(--kj-space-sm);padding:var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-box);background:var(--kj-bg-field, var(--kj-input-bg))}.kj-prompt:focus-within{border-color:var(--kj-border-focus)}.kj-prompt__textarea{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--kj-input-fg, var(--kj-fg-default));font-family:var(--kj-font-sans);font-size:var(--kj-input-font-size, 1rem);line-height:1.5;max-height:200px;overflow-y:auto}.kj-prompt__textarea::placeholder{color:var(--kj-input-placeholder-fg, var(--kj-fg-muted))}.kj-prompt__actions{display:flex;align-items:center;gap:var(--kj-space-xs);flex:0 0 auto}.kj-prompt__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;font-size:1.1rem}.kj-prompt__btn:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-prompt__btn--send{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__btn--send:disabled{opacity:.5;cursor:not-allowed}.kj-prompt__btn--stop{background:var(--kj-bg-danger);color:var(--kj-fg-on-danger)}.kj-prompt__slash{position:absolute;bottom:calc(100% + .25rem);left:0;right:0;margin:0;padding:.25rem;list-style:none;background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:0 4px 16px #00000026;max-height:14rem;overflow-y:auto;z-index:10}.kj-prompt__slash-item{display:flex;flex-direction:column;gap:.1rem;padding:var(--kj-space-xs) var(--kj-space-sm);border-radius:var(--kj-radius-field);cursor:pointer}.kj-prompt__slash-item.is-active,.kj-prompt__slash-item:hover{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__slash-name{font-family:ui-monospace,monospace;font-weight:600}.kj-prompt__slash-desc{font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-prompt__slash-item.is-active .kj-prompt__slash-desc,.kj-prompt__slash-item:hover .kj-prompt__slash-desc{color:inherit}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjPromptInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-prompt-input', standalone: true, template: `
+    <form class="kj-prompt" (submit)="onSubmit($event)">
+      @if (slashOpen()) {
+        <ul class="kj-prompt__slash" role="listbox" [id]="listboxId" aria-label="Slash commands">
+          @for (cmd of slashMatches(); track cmd.name; let i = $index) {
+            <li
+              class="kj-prompt__slash-item"
+              role="option"
+              [id]="optionId(i)"
+              [attr.aria-selected]="i === activeIndex()"
+              [class.is-active]="i === activeIndex()"
+              (mousedown)="pickSlash($event, cmd)"
+            >
+              <span class="kj-prompt__slash-name">{{ cmd.name }}</span>
+              @if (cmd.description) {
+                <span class="kj-prompt__slash-desc">{{ cmd.description }}</span>
+              }
+            </li>
+          }
+        </ul>
+      }
+
+      <label class="kj-visually-hidden" [attr.for]="textareaId">{{ kjLabel() }}</label>
+      <textarea
+        #ta
+        class="kj-prompt__textarea"
+        [id]="textareaId"
+        [attr.placeholder]="kjPlaceholder()"
+        [attr.aria-label]="kjLabel()"
+        [attr.role]="slashOpen() ? 'combobox' : null"
+        [attr.aria-expanded]="slashOpen() ? 'true' : null"
+        [attr.aria-controls]="slashOpen() ? listboxId : null"
+        [attr.aria-activedescendant]="slashOpen() ? optionId(activeIndex()) : null"
+        [attr.aria-haspopup]="slashOpen() ? 'listbox' : null"
+        [attr.aria-autocomplete]="slashOpen() ? 'list' : null"
+        [disabled]="kjDisabled()"
+        [value]="kjValue()"
+        rows="1"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+      ></textarea>
+
+      <div class="kj-prompt__actions">
+        <span class="kj-prompt__attachments">
+          <ng-content select="[kjPromptAttachments]" />
+        </span>
+        @if (kjStreaming()) {
+          <button
+            type="button"
+            class="kj-prompt__btn kj-prompt__btn--stop"
+            aria-label="Stop generating"
+            (click)="onStop()"
+          >
+            <span aria-hidden="true">■</span>
+          </button>
+        } @else {
+          <button
+            type="submit"
+            class="kj-prompt__btn kj-prompt__btn--send"
+            aria-label="Send message"
+            [disabled]="kjDisabled() || kjValue().trim().length === 0"
+          >
+            <span aria-hidden="true">↥</span>
+          </button>
+        }
+      </div>
+    </form>
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-prompt-host' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-chat-thread{display:flex;flex-direction:column;gap:var(--kj-space-md);padding:var(--kj-space-md);background:var(--kj-bg-body);color:var(--kj-fg-default);border-radius:var(--kj-radius-box);overflow-y:auto;font-family:var(--kj-font-sans)}.kj-chat-msg{display:flex;gap:var(--kj-space-sm);align-items:flex-start;max-width:100%}.kj-chat-msg[data-side=end]{flex-direction:row-reverse;margin-inline-start:auto}.kj-chat-msg[data-role=system]{justify-content:center}.kj-chat-msg__avatar{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:var(--kj-text-sm);font-weight:600;background:var(--kj-bg-surface);color:var(--kj-fg-default);border:1px solid var(--kj-border-default)}.kj-chat-msg__bubble{display:flex;flex-direction:column;gap:var(--kj-space-xs);padding:var(--kj-space-sm) var(--kj-space-md);border-radius:var(--kj-radius-box);background:var(--kj-bg-surface);color:var(--kj-fg-default);max-width:min(48rem,100%);overflow-wrap:anywhere}.kj-chat-msg[data-role=user] .kj-chat-msg__bubble{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-chat-msg[data-role=system] .kj-chat-msg__bubble{background:transparent;color:var(--kj-fg-muted);font-size:var(--kj-text-sm);text-align:center;padding-block:var(--kj-space-xs)}.kj-chat-msg__body :is(p){margin:0 0 var(--kj-space-xs)}.kj-chat-msg__body :is(p):last-child{margin-bottom:0}.kj-chat-msg__error{margin:0;color:var(--kj-fg-danger);font-size:var(--kj-text-sm)}.kj-md-link{color:inherit;text-decoration:underline}.kj-md-code{font-family:ui-monospace,monospace;background:color-mix(in srgb,currentColor 12%,transparent);padding:.1em .35em;border-radius:var(--kj-radius-field);font-size:.9em}.kj-chat-code{border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);overflow:hidden;margin:var(--kj-space-xs) 0;background:var(--kj-bg-body)}.kj-chat-code__bar{display:flex;align-items:center;justify-content:space-between;padding:.25rem var(--kj-space-sm);background:var(--kj-bg-surface);border-bottom:1px solid var(--kj-border-default);font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-chat-code__copy{min-height:1.75rem;padding:.25rem .6rem;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);color:var(--kj-fg-default);font-size:var(--kj-text-sm);cursor:pointer}.kj-chat-code__copy:hover{background:var(--kj-bg-surface)}.kj-chat-code__copy:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-chat-code__pre{margin:0;padding:var(--kj-space-sm);overflow-x:auto;font-family:ui-monospace,monospace;font-size:.9em;color:var(--kj-fg-default)}.kj-chat-tool{display:flex;align-items:center;gap:var(--kj-space-xs);padding:.35rem var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-body);font-size:var(--kj-text-sm)}.kj-chat-tool__name{font-weight:600;font-family:ui-monospace,monospace}.kj-chat-tool__status{margin-inline-start:auto;color:var(--kj-fg-muted);text-transform:capitalize}.kj-chat-tool[data-status=error]{border-color:var(--kj-border-danger)}.kj-chat-tool[data-status=error] .kj-chat-tool__status,.kj-chat-tool__error{color:var(--kj-fg-danger)}.kj-chat-cites{list-style:none;margin:var(--kj-space-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kj-space-xs)}.kj-chat-cite{display:inline-flex;align-items:baseline;gap:.35rem;padding:.15rem .5rem;border:1px solid var(--kj-border-default);border-radius:999px;font-size:var(--kj-text-sm);background:var(--kj-bg-body)}.kj-chat-cite__link{color:var(--kj-fg-info);text-decoration:none}.kj-chat-cite__link:hover{text-decoration:underline}.kj-chat-cite__snippet{color:var(--kj-fg-muted)}.kj-chat-typing{display:inline-flex;gap:.25rem;align-items:center;padding:.25rem 0}.kj-chat-typing__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--kj-fg-muted);animation:kj-chat-bounce 1.2s infinite ease-in-out both}.kj-chat-typing__dot:nth-child(2){animation-delay:.15s}.kj-chat-typing__dot:nth-child(3){animation-delay:.3s}@keyframes kj-chat-bounce{0%,80%,to{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.kj-chat-typing__dot{animation:none;opacity:.6}}.kj-prompt{position:relative;display:flex;align-items:flex-end;gap:var(--kj-space-sm);padding:var(--kj-space-sm);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-box);background:var(--kj-bg-field, var(--kj-input-bg))}.kj-prompt:focus-within{border-color:var(--kj-border-focus)}.kj-prompt__textarea{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--kj-input-fg, var(--kj-fg-default));font-family:var(--kj-font-sans);font-size:var(--kj-input-font-size, 1rem);line-height:1.5;max-height:200px;overflow-y:auto}.kj-prompt__textarea::placeholder{color:var(--kj-input-placeholder-fg, var(--kj-fg-muted))}.kj-prompt__actions{display:flex;align-items:center;gap:var(--kj-space-xs);flex:0 0 auto}.kj-prompt__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:none;cursor:pointer;font-size:1.1rem}.kj-prompt__btn:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-prompt__btn--send{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__btn--send:disabled{opacity:.5;cursor:not-allowed}.kj-prompt__btn--stop{background:var(--kj-bg-danger);color:var(--kj-fg-on-danger)}.kj-prompt__slash{position:absolute;bottom:calc(100% + .25rem);left:0;right:0;margin:0;padding:.25rem;list-style:none;background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-field);box-shadow:0 4px 16px #00000026;max-height:14rem;overflow-y:auto;z-index:10}.kj-prompt__slash-item{display:flex;flex-direction:column;gap:.1rem;padding:var(--kj-space-xs) var(--kj-space-sm);border-radius:var(--kj-radius-field);cursor:pointer}.kj-prompt__slash-item.is-active,.kj-prompt__slash-item:hover{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary)}.kj-prompt__slash-name{font-family:ui-monospace,monospace;font-weight:600}.kj-prompt__slash-desc{font-size:var(--kj-text-sm);color:var(--kj-fg-muted)}.kj-prompt__slash-item.is-active .kj-prompt__slash-desc,.kj-prompt__slash-item:hover .kj-prompt__slash-desc{color:inherit}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabel", required: false }] }], kjStreaming: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStreaming", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjSlashCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSlashCommands", required: false }] }], kjSend: [{ type: i0.Output, args: ["kjSend"] }], kjStop: [{ type: i0.Output, args: ["kjStop"] }], kjSlashSelect: [{ type: i0.Output, args: ["kjSlashSelect"] }], ta: [{ type: i0.ViewChild, args: ['ta', { isSignal: true }] }] } });
+
+let checkboxIdCounter = 0;
+/**
+ * Styled wrapper around the headless `KjCheckbox` directive.
+ *
+ * The host renders a `<label>` wrapping the checkbox box and any projected
+ * content (label text). Clicking anywhere on the label checks/unchecks the
+ * box. When `disabled` is set, both the box and label text dim via
+ * `[data-disabled]` on the host.
+ *
+ * @doc-example Default
+ *   The default checkbox bound to a `signal<boolean>` via `[(checked)]`.
+ *   @doc-file checkbox.default.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common checkbox usages — checked binding,
+ *   indeterminate parent, size variants, and disabled.
+ *   @doc-file checkbox.usage.example.ts
+ * @doc-example Checked
+ *   Pre-selected on first render. Two-way bind to persist user changes.
+ *   @doc-file checkbox.checked.example.ts
+ * @doc-example Indeterminate
+ *   Tri-state "some-of-many" parent for a select-all row.
+ *   @doc-file checkbox.indeterminate.example.ts
+ * @doc-example Disabled
+ *   `[disabled]="true"` dims the box + label and removes pointer events.
+ *   @doc-file checkbox.disabled.example.ts
+ *
+ * @doc-keyboard
+ *   Space — Toggles the checked state
+ *   Tab   — Moves focus to the next focusable element
+ *
+ * @doc-aria
+ *   role="checkbox"     — Applied to the inner focusable box by the headless directive
+ *   aria-checked        — Reflects `true`, `false`, or `"mixed"` for indeterminate
+ *   aria-disabled       — Reflected when `[disabled]` is true
+ *   aria-labelledby     — Auto-wired to the projected label span
+ *   data-disabled       — Mirrors the disabled posture for theme/scope hooks
+ *   data-indeterminate  — Reflects the indeterminate posture for the dash glyph
+ *
+ * @doc-css-var
+ *   --kj-checkbox-size         — Box edge length. `data-size="sm|lg"` overrides; default 1rem.
+ *   --kj-checkbox-bg           — Unchecked background fill. Defaults to --kj-bg-body.
  *   --kj-checkbox-bg-checked   — Background when checked or indeterminate. Defaults to --kj-bg-primary.
  *   --kj-checkbox-fg-checked   — Checkmark/dash color. Defaults to --kj-fg-on-primary.
  *   --kj-checkbox-border       — Border color when unchecked. Defaults to --kj-border-default.
@@ -3618,6 +4725,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-date-picker-host', style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-date-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-date-picker__input{--kj-date-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-date-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:12ch}.kj-date-picker[data-size=xs] .kj-date-picker__input{--kj-date-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-date-picker[data-size=sm] .kj-date-picker__input{--kj-date-picker-input-height: 2rem;font-size:.8125rem}.kj-date-picker[data-size=lg] .kj-date-picker__input{--kj-date-picker-input-height: 2.75rem;font-size:1rem}.kj-date-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-date-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-date-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-date-picker__panel .kj-calendar{padding:0}.kj-date-picker__panel[hidden]{display:none}\n"] }]
         }], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpen", required: false }] }, { type: i0.Output, args: ["kjOpenChange"] }], kjMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMin", required: false }] }], kjMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMax", required: false }] }], kjDisabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabledDates", required: false }] }], kjLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLocale", required: false }] }], kjFirstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFirstDayOfWeek", required: false }] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }] } });
 
+/**
+ * Styled Date Range Presets — a compact, keyboard-navigable list of named
+ * quick-selects ("Today", "Last 7 days", "This quarter", …). Picking one
+ * resolves its inclusive `{ start, end }` range and commits the two-way
+ * `kjValue`.
+ *
+ * Built as the reusable presets primitive from the date/time roadmap slice:
+ * it slots beside a range calendar, but works standalone against any
+ * `signal<KjDateRange | null>`.
+ *
+ * **Accessibility (WCAG 2.1 AAA):**
+ * - the list is `role="listbox"` with an accessible name; each preset is a
+ *   `role="option"` `<button>` carrying `aria-selected`.
+ * - roving tabindex — one tab stop; Up/Down (and Home/End) move between
+ *   options; Enter / Space select (native button activation).
+ * - the selected preset is conveyed by `aria-selected`, not color alone.
+ *
+ * @doc-example Default
+ *   The ten built-in presets bound to a `signal<KjDateRange | null>`.
+ *   @doc-file date-range-presets.example.ts
+ * @doc-example Custom presets
+ *   Spread `defaultDateRangePresets()` and append your own `getRange`.
+ *   @doc-file date-range-presets.custom.example.ts
+ *
+ * @doc-keyboard
+ *   ArrowDown|ArrowUp — Moves between presets
+ *   Home|End          — Jumps to the first / last preset
+ *   Enter|Space       — Selects the focused preset
+ *
+ * @doc-aria
+ *   role="listbox"  — On the container; `aria-orientation="vertical"`
+ *   aria-label      — Names the list ("Date range presets" by default)
+ *   role="option"   — On each preset button
+ *   aria-selected   — Reflects the chosen preset
+ *
+ * @doc-css-var
+ *   --kj-date-range-presets-min-width — Min width of the list. Default 12rem.
+ *
+ * @doc-touch
+ *   Preset rows are 44px tall to meet the WCAG 2.5.5 target size.
+ *
+ * @doc-related date-picker,calendar
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name date-range-presets
+ * @doc-description Themed listbox of date-range quick-selects that resolve to an inclusive start/end range.
+ * @doc-is-main
+ */
+class KjDateRangePresetsComponent {
+    /** Selected range. Two-way bindable — `[(kjValue)]`. `null` clears. */
+    kjValue = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Presets to render. Defaults to the ten built-ins. */
+    kjPresets = input(defaultDateRangePresets(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPresets" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the list. */
+    kjLabel = input('Date range presets', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLabel" }] : /* istanbul ignore next */ []));
+    /** Injectable "now" for the preset math. Defaults to the current instant. */
+    kjNow = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjNow" }] : /* istanbul ignore next */ []));
+    /** Disable the whole list. */
+    kjDisabled = input(false, { ...(ngDevMode ? { debugName: "kjDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDateRangePresetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjDateRangePresetsComponent, isStandalone: true, selector: "kj-date-range-presets", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjPresets: { classPropertyName: "kjPresets", publicName: "kjPresets", isSignal: true, isRequired: false, transformFunction: null }, kjLabel: { classPropertyName: "kjLabel", publicName: "kjLabel", isSignal: true, isRequired: false, transformFunction: null }, kjNow: { classPropertyName: "kjNow", publicName: "kjNow", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjValue: "kjValueChange" }, host: { styleAttribute: "display: contents;", classAttribute: "kj-date-range-presets-host" }, ngImport: i0, template: `
+    <div
+      kjDateRangePresets
+      class="kj-date-range-presets"
+      [kjValue]="kjValue() ?? null!"
+      (kjValueChange)="kjValue.set($event)"
+      [kjPresets]="kjPresets()"
+      [kjLabel]="kjLabel()"
+      [kjNow]="kjNow() ?? null!"
+      [kjDisabled]="kjDisabled()"
+    >
+      @for (preset of kjPresets(); track preset.id) {
+        <button
+          kjDateRangePresetOption
+          #opt="kjDateRangePresetOption"
+          class="kj-date-range-presets__option"
+          [kjPreset]="preset"
+          [attr.data-selected]="opt.selected() ? '' : null"
+        >
+          {{ preset.label }}
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [".kj-date-range-presets{display:flex;flex-direction:column;gap:2px;min-width:var(--kj-date-range-presets-min-width, 12rem);padding:var(--kj-space-xs, .25rem);background:var(--kj-bg-elevated, transparent);border:var(--kj-border) solid var(--kj-border-subtle, transparent);border-radius:var(--kj-radius-field, .375rem);font-family:inherit;font-size:.8125rem;color:var(--kj-fg-default)}.kj-date-range-presets__option{appearance:none;display:flex;align-items:center;min-height:44px;padding:0 var(--kj-space-md, .75rem);background:transparent;border:var(--kj-border) solid transparent;border-radius:var(--kj-radius-field, .375rem);color:inherit;font:inherit;text-align:start;cursor:pointer}.kj-date-range-presets__option:hover:not([disabled]){background:var(--kj-bg-field)}.kj-date-range-presets__option:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:-2px}.kj-date-range-presets__option[data-selected]{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary);font-weight:600}.kj-date-range-presets__option[disabled]{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: KjDateRangePresets, selector: "[kjDateRangePresets]", inputs: ["kjValue", "kjPresets", "kjLabel", "kjNow", "kjReadonly"], outputs: ["kjValueChange"], exportAs: ["kjDateRangePresets"] }, { kind: "directive", type: KjDateRangePresetOption, selector: "button[kjDateRangePresetOption]", inputs: ["kjPreset"], exportAs: ["kjDateRangePresetOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDateRangePresetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-date-range-presets', standalone: true, imports: [KjDateRangePresets, KjDateRangePresetOption], template: `
+    <div
+      kjDateRangePresets
+      class="kj-date-range-presets"
+      [kjValue]="kjValue() ?? null!"
+      (kjValueChange)="kjValue.set($event)"
+      [kjPresets]="kjPresets()"
+      [kjLabel]="kjLabel()"
+      [kjNow]="kjNow() ?? null!"
+      [kjDisabled]="kjDisabled()"
+    >
+      @for (preset of kjPresets(); track preset.id) {
+        <button
+          kjDateRangePresetOption
+          #opt="kjDateRangePresetOption"
+          class="kj-date-range-presets__option"
+          [kjPreset]="preset"
+          [attr.data-selected]="opt.selected() ? '' : null"
+        >
+          {{ preset.label }}
+        </button>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-date-range-presets-host', style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-date-range-presets{display:flex;flex-direction:column;gap:2px;min-width:var(--kj-date-range-presets-min-width, 12rem);padding:var(--kj-space-xs, .25rem);background:var(--kj-bg-elevated, transparent);border:var(--kj-border) solid var(--kj-border-subtle, transparent);border-radius:var(--kj-radius-field, .375rem);font-family:inherit;font-size:.8125rem;color:var(--kj-fg-default)}.kj-date-range-presets__option{appearance:none;display:flex;align-items:center;min-height:44px;padding:0 var(--kj-space-md, .75rem);background:transparent;border:var(--kj-border) solid transparent;border-radius:var(--kj-radius-field, .375rem);color:inherit;font:inherit;text-align:start;cursor:pointer}.kj-date-range-presets__option:hover:not([disabled]){background:var(--kj-bg-field)}.kj-date-range-presets__option:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:-2px}.kj-date-range-presets__option[data-selected]{background:var(--kj-bg-primary);color:var(--kj-fg-on-primary);font-weight:600}.kj-date-range-presets__option[disabled]{opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPresets", required: false }] }], kjLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabel", required: false }] }], kjNow: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjNow", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }] } });
+
 /** Format a Date as a locale short date + HH:mm time. */
 function formatDateTime(d, locale) {
     const date = new Intl.DateTimeFormat(locale || undefined, { dateStyle: 'short' }).format(d);
@@ -3893,6 +5118,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'kj-dialog-shell', standalone: true, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.kj-dialog{display:flex;flex-direction:column;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-lg);min-width:24rem;max-width:min(40rem,calc(100vw - 2rem));max-height:calc(100vh - 4rem);overflow:hidden;padding:var(--kj-space-xl)}.kj-dialog-header{display:flex;align-items:center;justify-content:flex-start;padding:var(--kj-space-lg) var(--kj-space-xl);border-bottom:var(--kj-border) solid var(--kj-border-muted)}.kj-dialog-header[data-align=center]{justify-content:center}.kj-dialog-title{display:block;margin:0;font:600 1.125rem / 1.3 var(--kj-font-sans);color:var(--kj-fg-default)}.kj-dialog-body{flex:1;color:var(--kj-fg-default);font:.9375rem / 1.5 var(--kj-font-sans)}.kj-dialog-body[data-padded]{padding:var(--kj-space-lg) var(--kj-space-xl)}.kj-dialog-body[data-scroll]{overflow-y:auto}.kj-dialog-footer{display:flex;align-items:center;gap:var(--kj-space-sm);padding:var(--kj-space-lg) var(--kj-space-xl);border-top:var(--kj-border) solid var(--kj-border-muted)}.kj-dialog-footer[data-align=start]{justify-content:flex-start}.kj-dialog-footer[data-align=center]{justify-content:center}.kj-dialog-footer[data-align=end]{justify-content:flex-end}.kj-dialog-footer[data-align=between]{justify-content:space-between}}\n"] }]
         }] });
 
+/**
+ * A visible, keyboard-native control that flips the application's logical text
+ * direction between `ltr` and `rtl`.
+ *
+ * It is the concrete UI the locale provider pointed at: it reads
+ * `KjLocale.isRtl()` and calls `KjLocale.setDirection(...)`. Paired with
+ * `provideKjDocumentDirection()`, one click mirrors the whole page —
+ * `<html dir>` flips and every logical-property layout follows.
+ *
+ * Renders a real `<button type="button">` so it is reachable by Tab and
+ * operable with Enter / Space for free. `aria-pressed` reflects the RTL state
+ * (pressed = RTL), and an accessible name is always present via
+ * `[kjAriaLabel]`. Project custom content to replace the default `LTR` / `RTL`
+ * text label.
+ *
+ * @example
+ * ```html
+ * <kj-direction-toggle />
+ * <kj-direction-toggle kjAriaLabel="Toggle Arabic layout">اتجاه</kj-direction-toggle>
+ * ```
+ *
+ * @doc-example Default
+ *   The toggle wired to `KjLocale` — click to flip `<html dir>` and mirror the page.
+ *   @doc-file direction-toggle.example.ts
+ *
+ * @doc-keyboard
+ *   Enter — Toggles the direction (native button activation)
+ *   Space — Toggles the direction (native button activation)
+ *   Tab   — Moves focus to / from the toggle
+ *
+ * @doc-aria
+ *   aria-pressed  — Reflects the RTL state (true when direction is rtl)
+ *   aria-label    — Accessible name; defaults to "Toggle right-to-left layout"
+ *   data-direction — Mirrors the resolved direction (ltr | rtl) for theme CSS
+ *
+ * @doc-touch
+ *   The button reserves a 44×44px hit area (WCAG 2.5.5) regardless of label size.
+ *
+ * @doc-a11y
+ *   A native `<button>` with `aria-pressed` — AT announces "toggle button,
+ *   pressed/not pressed". Because mirroring is CSS-logical only, DOM and tab
+ *   order are unchanged in both directions (WCAG 1.3.2).
+ *
+ * @doc-related locale
+ *
+ * @doc-css-var
+ *   --kj-direction-toggle-bg           — Background at rest.
+ *   --kj-direction-toggle-fg           — Text color.
+ *   --kj-direction-toggle-border-color — Border color.
+ *   --kj-direction-toggle-radius       — Corner radius.
+ *   --kj-direction-toggle-padding-x    — Inline padding.
+ *   --kj-direction-toggle-padding-y    — Block padding.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name direction-toggle
+ * @doc-description Accessible LTR/RTL toggle button that drives KjLocale.direction and mirrors the page.
+ * @doc-is-main
+ */
+class KjDirectionToggle {
+    locale = inject(KjLocale);
+    /** Resolved logical direction from the shared `KjLocale`. */
+    direction = this.locale.direction;
+    /** `true` when the resolved direction is `rtl`. Drives `aria-pressed`. */
+    isRtl = this.locale.isRtl;
+    /** Accessible name for the toggle button. */
+    kjAriaLabel = input('Toggle right-to-left layout', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Flip the direction: `ltr` ⇄ `rtl`. */
+    toggle() {
+        this.locale.setDirection(this.locale.isRtl() ? 'ltr' : 'rtl');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDirectionToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjDirectionToggle, isStandalone: true, selector: "kj-direction-toggle", inputs: { kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="kj-direction-toggle"
+      [attr.aria-pressed]="isRtl()"
+      [attr.aria-label]="kjAriaLabel()"
+      [attr.data-direction]="direction()"
+      (click)="toggle()"
+    >
+      <ng-content>{{ isRtl() ? 'RTL' : 'LTR' }}</ng-content>
+    </button>
+  `, isInline: true, styles: ["@layer kj.component{.kj-direction-toggle{--kj-direction-toggle-bg: var(--kj-bg-subtle, transparent);--kj-direction-toggle-fg: var(--kj-fg, currentColor);--kj-direction-toggle-border-color: var(--kj-border-color, currentColor);--kj-direction-toggle-radius: var(--kj-radius-field, .5rem);--kj-direction-toggle-padding-x: var(--kj-space-md, .75rem);--kj-direction-toggle-padding-y: var(--kj-space-sm, .5rem);display:inline-flex;align-items:center;justify-content:center;gap:var(--kj-space-xs, .25rem);min-width:44px;min-height:44px;padding-block:var(--kj-direction-toggle-padding-y);padding-inline:var(--kj-direction-toggle-padding-x);background:var(--kj-direction-toggle-bg);color:var(--kj-direction-toggle-fg);border:var(--kj-border, 1px) solid var(--kj-direction-toggle-border-color);border-radius:var(--kj-direction-toggle-radius);font:inherit;font-size:var(--kj-text-sm, .875rem);line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none}.kj-direction-toggle:hover{background:var(--kj-bg-subtle-hover, var(--kj-direction-toggle-bg))}.kj-direction-toggle:focus-visible{outline:var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, currentColor);outline-offset:2px}.kj-direction-toggle[aria-pressed=true]{background:var(--kj-bg-primary, var(--kj-direction-toggle-bg));color:var(--kj-fg-on-primary, var(--kj-direction-toggle-fg));border-color:var(--kj-bg-primary, var(--kj-direction-toggle-border-color))}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDirectionToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-direction-toggle', standalone: true, template: `
+    <button
+      type="button"
+      class="kj-direction-toggle"
+      [attr.aria-pressed]="isRtl()"
+      [attr.aria-label]="kjAriaLabel()"
+      [attr.data-direction]="direction()"
+      (click)="toggle()"
+    >
+      <ng-content>{{ isRtl() ? 'RTL' : 'LTR' }}</ng-content>
+    </button>
+  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-direction-toggle{--kj-direction-toggle-bg: var(--kj-bg-subtle, transparent);--kj-direction-toggle-fg: var(--kj-fg, currentColor);--kj-direction-toggle-border-color: var(--kj-border-color, currentColor);--kj-direction-toggle-radius: var(--kj-radius-field, .5rem);--kj-direction-toggle-padding-x: var(--kj-space-md, .75rem);--kj-direction-toggle-padding-y: var(--kj-space-sm, .5rem);display:inline-flex;align-items:center;justify-content:center;gap:var(--kj-space-xs, .25rem);min-width:44px;min-height:44px;padding-block:var(--kj-direction-toggle-padding-y);padding-inline:var(--kj-direction-toggle-padding-x);background:var(--kj-direction-toggle-bg);color:var(--kj-direction-toggle-fg);border:var(--kj-border, 1px) solid var(--kj-direction-toggle-border-color);border-radius:var(--kj-direction-toggle-radius);font:inherit;font-size:var(--kj-text-sm, .875rem);line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none}.kj-direction-toggle:hover{background:var(--kj-bg-subtle-hover, var(--kj-direction-toggle-bg))}.kj-direction-toggle:focus-visible{outline:var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, currentColor);outline-offset:2px}.kj-direction-toggle[aria-pressed=true]{background:var(--kj-bg-primary, var(--kj-direction-toggle-bg));color:var(--kj-fg-on-primary, var(--kj-direction-toggle-fg));border-color:var(--kj-bg-primary, var(--kj-direction-toggle-border-color))}}\n"] }]
+        }], propDecorators: { kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
+
 /**
  * Service-launched drawer (edge-anchored panel). Inject `KjDrawerService` and
  * call `open()` with a template; the drawer absorbs the bottom-sheet pattern
@@ -4048,23 +5375,412 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  *   `[kjDisabled]="true"` keeps the item focusable but blocks activation.
  *   @doc-file dropdown-menu.disabled.example.ts
  *
- * @doc-category Library/Overlay
+ * @doc-category Library/Overlay
+ */
+class KjDropdownMenuComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjDropdownMenuComponent, isStandalone: true, selector: "kj-dropdown-menu", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-dropdown-menu{--kj-dropdown-menu-bg: var(--kj-bg-elevated);--kj-dropdown-menu-fg: var(--kj-fg-default);--kj-dropdown-menu-border-color: var(--kj-border-default);--kj-dropdown-menu-radius: var(--kj-radius-box);--kj-dropdown-menu-padding: var(--kj-space-xs);--kj-dropdown-menu-shadow: var(--kj-shadow-md);display:flex;flex-direction:column;box-sizing:border-box;min-width:12rem;max-width:min(20rem,calc(100vw - 2rem));background:var(--kj-dropdown-menu-bg);color:var(--kj-dropdown-menu-fg);border:var(--kj-border) solid var(--kj-dropdown-menu-border-color);border-radius:var(--kj-dropdown-menu-radius);padding:var(--kj-dropdown-menu-padding);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-dropdown-menu-shadow);pointer-events:auto;z-index:1000}.kj-dropdown-menu[hidden]{display:none}.kj-dropdown-menu-item{--kj-dropdown-menu-item-padding-x: var(--kj-space-md);--kj-dropdown-menu-item-padding-y: var(--kj-space-sm);--kj-dropdown-menu-item-min-height: 2.75rem;--kj-dropdown-menu-item-radius: var(--kj-radius-field);--kj-dropdown-menu-item-hover-bg: var(--kj-bg-surface);--kj-dropdown-menu-item-active-bg: var(--kj-bg-field);display:flex;align-items:center;justify-content:flex-start;gap:var(--kj-space-sm);width:100%;min-height:var(--kj-dropdown-menu-item-min-height);box-sizing:border-box;padding:var(--kj-dropdown-menu-item-padding-y) var(--kj-dropdown-menu-item-padding-x);margin:0;background:transparent;color:inherit;border:none;border-radius:var(--kj-dropdown-menu-item-radius);font:inherit;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none}.kj-dropdown-menu-item:hover:not([data-disabled]){background:var(--kj-dropdown-menu-item-hover-bg)}.kj-dropdown-menu-item:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-dropdown-menu-item[aria-current=true]{background:var(--kj-dropdown-menu-item-current-bg, var(--kj-bg-field));color:var(--kj-dropdown-menu-item-current-fg, var(--kj-fg-primary));font-weight:500}.kj-dropdown-menu-item[data-disabled]{cursor:not-allowed;opacity:.5}.kj-dropdown-menu-separator{display:block;height:1px;margin:var(--kj-space-xs) calc(var(--kj-space-xs) * -1);background:color-mix(in oklab,var(--kj-fg-default) 12%,transparent);border:0}.kj-dropdown-menu-label{display:block;padding:var(--kj-space-xs) var(--kj-space-md);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--kj-fg-default);opacity:.65}.kj-dropdown-menu-group{display:flex;flex-direction:column}@media(prefers-reduced-motion:no-preference){.kj-dropdown-menu{transition:opacity .12s ease-out,transform .12s ease-out}.kj-dropdown-menu[data-state=closed]{opacity:0;transform:scale(.98)}.kj-dropdown-menu[data-state=open]{opacity:1;transform:scale(1)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-dropdown-menu', standalone: true, imports: [
+                        KjDropdownMenuTrigger,
+                        KjDropdownMenuContent,
+                        KjDropdownMenuItem,
+                        KjDropdownMenuSeparator,
+                        KjDropdownMenuLabel,
+                        KjDropdownMenuGroup,
+                    ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-dropdown-menu{--kj-dropdown-menu-bg: var(--kj-bg-elevated);--kj-dropdown-menu-fg: var(--kj-fg-default);--kj-dropdown-menu-border-color: var(--kj-border-default);--kj-dropdown-menu-radius: var(--kj-radius-box);--kj-dropdown-menu-padding: var(--kj-space-xs);--kj-dropdown-menu-shadow: var(--kj-shadow-md);display:flex;flex-direction:column;box-sizing:border-box;min-width:12rem;max-width:min(20rem,calc(100vw - 2rem));background:var(--kj-dropdown-menu-bg);color:var(--kj-dropdown-menu-fg);border:var(--kj-border) solid var(--kj-dropdown-menu-border-color);border-radius:var(--kj-dropdown-menu-radius);padding:var(--kj-dropdown-menu-padding);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-dropdown-menu-shadow);pointer-events:auto;z-index:1000}.kj-dropdown-menu[hidden]{display:none}.kj-dropdown-menu-item{--kj-dropdown-menu-item-padding-x: var(--kj-space-md);--kj-dropdown-menu-item-padding-y: var(--kj-space-sm);--kj-dropdown-menu-item-min-height: 2.75rem;--kj-dropdown-menu-item-radius: var(--kj-radius-field);--kj-dropdown-menu-item-hover-bg: var(--kj-bg-surface);--kj-dropdown-menu-item-active-bg: var(--kj-bg-field);display:flex;align-items:center;justify-content:flex-start;gap:var(--kj-space-sm);width:100%;min-height:var(--kj-dropdown-menu-item-min-height);box-sizing:border-box;padding:var(--kj-dropdown-menu-item-padding-y) var(--kj-dropdown-menu-item-padding-x);margin:0;background:transparent;color:inherit;border:none;border-radius:var(--kj-dropdown-menu-item-radius);font:inherit;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none}.kj-dropdown-menu-item:hover:not([data-disabled]){background:var(--kj-dropdown-menu-item-hover-bg)}.kj-dropdown-menu-item:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-dropdown-menu-item[aria-current=true]{background:var(--kj-dropdown-menu-item-current-bg, var(--kj-bg-field));color:var(--kj-dropdown-menu-item-current-fg, var(--kj-fg-primary));font-weight:500}.kj-dropdown-menu-item[data-disabled]{cursor:not-allowed;opacity:.5}.kj-dropdown-menu-separator{display:block;height:1px;margin:var(--kj-space-xs) calc(var(--kj-space-xs) * -1);background:color-mix(in oklab,var(--kj-fg-default) 12%,transparent);border:0}.kj-dropdown-menu-label{display:block;padding:var(--kj-space-xs) var(--kj-space-md);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--kj-fg-default);opacity:.65}.kj-dropdown-menu-group{display:flex;flex-direction:column}@media(prefers-reduced-motion:no-preference){.kj-dropdown-menu{transition:opacity .12s ease-out,transform .12s ease-out}.kj-dropdown-menu[data-state=closed]{opacity:0;transform:scale(.98)}.kj-dropdown-menu[data-state=open]{opacity:1;transform:scale(1)}}}\n"] }]
+        }] });
+
+/**
+ * Styled wrapper around the headless `KjSpinner` directive.
+ *
+ * Composes `KjSpinner` via `hostDirectives` so the wrapper's host element is
+ * *the* spinner — `role="status"`, `aria-live="polite"`, `aria-atomic="true"`,
+ * the `aria-label` default ("Loading"), `data-animation`, and
+ * `data-reduced-motion` all land on `<kj-spinner>` itself. `kjVariant` and
+ * `kjSize` are wrapper-level inputs that the host mirrors to `data-variant` /
+ * `data-size` (the directive's own nested `KjVariant` / `KjSize` host
+ * directives are not transitively exposed through outer composition, so the
+ * wrapper takes over the data-attribute reflection at this layer).
+ *
+ * The template renders an `aria-hidden` glyph element (the visual shape that
+ * theme CSS keyframes drive per `data-animation`) and, when no
+ * `aria-labelledby` was authored on the host, a `kjVisuallyHidden` label so
+ * AT always finds an accessible name.
+ *
+ * **Indeterminate-only.** The spinner answers "something is happening" — it
+ * has no value model. For "x of y" use Progress Bar; for missing-content
+ * placeholders use Skeleton.
+ *
+ * @example
+ * ```html
+ * <kj-spinner />
+ * <kj-spinner kjVariant="primary" kjSize="lg" kjAnimation="dots" kjAriaLabel="Sending" />
+ * ```
+ * @doc-example Default
+ *   The default playground — `spin` animation, `md` size, neutral variant,
+ *   default `aria-label="Loading"`.
+ *   @doc-file spinner.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common spinner usages — size, variant,
+ *   animation glyph, and inline placement next to copy.
+ *   @doc-file spinner.usage.example.ts
+ * @doc-example Sizes
+ *   `xs` / `sm` / `md` / `lg` presets. There is intentionally no `xl` — that
+ *   size almost always wants a determinate Progress Bar instead.
+ *   @doc-file spinner.sizes.example.ts
+ * @doc-example Variants
+ *   `neutral` (inherits `currentColor`), `primary`, `success`, `warning`,
+ *   `error`, `info`.
+ *   @doc-file spinner.variants.example.ts
+ * @doc-example Animations
+ *   Animation shape preset — `spin`, `dots`, `bars`, etc. Themes own the
+ *   keyframes per value.
+ *   @doc-file spinner.animations.example.ts
+ * @doc-example Inside a button
+ *   Embed the spinner inline next to a label to communicate in-flight work.
+ *   @doc-file spinner.in-button.example.ts
+ *
+ * @doc-keyboard
+ *   — — Non-interactive. The spinner is purely a status indicator.
+ *
+ * @doc-aria
+ *   role="status"     — set on the host so AT announces it as a live status region
+ *   aria-live         — "polite" so the label is read without interrupting the user
+ *   aria-atomic       — "true" so the full label is announced on change
+ *   aria-label        — Defaults to "Loading"; override per context (e.g. "Sending")
+ *   data-animation    — Mirrors the resolved animation for theme hooks
+ *   data-variant      — Mirrors the resolved variant for theme hooks
+ *   data-size         — Mirrors the resolved size for theme hooks
+ *
+ * @doc-touch
+ *   — — Non-interactive; no touch target required.
+ *
+ * @doc-a11y
+ *   Indeterminate-only — answers "something is happening", with no value model.
+ *   Honours `prefers-reduced-motion` via `data-reduced-motion` on the host, so
+ *   themes can swap a calmer animation. When the consumer authors
+ *   `aria-labelledby` on the host the wrapper skips the visually-hidden label
+ *   to avoid double-naming.
+ *
+ * @doc-related progress-bar,skeleton,toast
+ *
+ * @doc-css-var
+ *   --kj-spinner-size      — Glyph diameter. Sizes (xs/sm/md/lg) override.
+ *   --kj-spinner-color     — Foreground color of the glyph. Variants set this; neutral inherits currentColor.
+ *   --kj-spinner-track     — Track/background color for the spin arc.
+ *   --kj-spinner-duration  — Base animation duration. Other animations scale off this.
+ *
+ * @doc-category Library/Feedback
+ * @doc
+ * @doc-name spinner
+ * @doc-description Themed indeterminate loading spinner with variant, size, and animation glyph options.
+ * @doc-is-main
+ */
+class KjSpinnerComponent {
+    /**
+     * Color preset reflected to `data-variant` on the host. Defaults to
+     * `'neutral'`, which resolves to `currentColor` in shipped themes — so a
+     * spinner inside a coloured surface inherits its parent's text colour.
+     */
+    kjVariant = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * Size preset reflected to `data-size` on the host. Defaults to `'md'`.
+     * Sizes ship as `xs | sm | md | lg`; an `xl` is intentionally absent — a
+     * spinner that big almost always wants a determinate Progress Bar instead.
+     */
+    kjSize = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Animation shape preset forwarded to `KjSpinner.kjAnimation` via the
+     * composed host directive. Reflects on the host as `data-animation`.
+     * Themes own the keyframes per value.
+     */
+    kjAnimation = input('spin', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAnimation" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name forwarded to `KjSpinner.kjAriaLabel` via the composed
+     * host directive. Default `'Loading'`. Used both as the host's
+     * `aria-label` and as the visually-hidden text rendered inside the
+     * wrapper when no consumer-authored `aria-labelledby` is on the element.
+     */
+    kjAriaLabel = input('Loading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
+    el = inject(ElementRef);
+    /**
+     * Snapshotted at construction: did the consumer author `aria-labelledby`
+     * directly on `<kj-spinner>`? If so the accessible name is the referenced
+     * element and we must not project a hidden duplicate. Read in the
+     * constructor — by the time the template renders the directive may have
+     * stamped its own attributes on the host.
+     */
+    hasAuthoredLabelledBy;
+    /**
+     * `true` when the consumer did **not** author `aria-labelledby` on the
+     * wrapper — i.e. the spinner's accessible name is its `aria-label`. The
+     * wrapper renders a `kjVisuallyHidden` copy of the label as inner text so
+     * AT that prefers content over `aria-label` (or that announces a
+     * `role="status"` region's body on insertion) still has a name to read.
+     * A consumer-authored `aria-labelledby` opts out of that hidden copy to
+     * avoid double-naming the host.
+     */
+    shouldRenderHiddenLabel = computed(() => !this.hasAuthoredLabelledBy, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRenderHiddenLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.hasAuthoredLabelledBy =
+            this.el.nativeElement.hasAttribute('aria-labelledby');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjSpinnerComponent, isStandalone: true, selector: "kj-spinner", inputs: { kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null }, kjAnimation: { classPropertyName: "kjAnimation", publicName: "kjAnimation", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "kjVariant()", "attr.data-size": "kjSize()" }, classAttribute: "kj-spinner" }, hostDirectives: [{ directive: i1.KjSpinner, inputs: ["kjAnimation", "kjAnimation", "kjAriaLabel", "kjAriaLabel"] }], ngImport: i0, template: `
+    <span class="kj-spinner__glyph" aria-hidden="true"></span>
+    @if (shouldRenderHiddenLabel()) {
+      <span kjVisuallyHidden>{{ kjAriaLabel() }}</span>
+    }
+  `, isInline: true, styles: ["@layer kj.component{.kj-spinner{--kj-spinner-size: 1.25rem;--kj-spinner-color: currentColor;--kj-spinner-track: color-mix(in srgb, currentColor 20%, transparent);--kj-spinner-duration: .7s;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--kj-spinner-size);block-size:var(--kj-spinner-size);color:var(--kj-spinner-color);pointer-events:none}.kj-spinner[data-size=xs]{--kj-spinner-size: .75rem}.kj-spinner[data-size=sm]{--kj-spinner-size: 1rem}.kj-spinner[data-size=md]{--kj-spinner-size: 1.25rem}.kj-spinner[data-size=lg]{--kj-spinner-size: 1.75rem}.kj-spinner[data-variant=neutral]{--kj-spinner-color: currentColor}.kj-spinner[data-variant=primary]{--kj-spinner-color: var(--kj-fg-primary)}.kj-spinner[data-variant=secondary]{--kj-spinner-color: var(--kj-fg-default)}.kj-spinner[data-variant=success]{--kj-spinner-color: var(--kj-fg-success, #16a34a)}.kj-spinner[data-variant=warning]{--kj-spinner-color: var(--kj-fg-warning, #d97706)}.kj-spinner[data-variant=error]{--kj-spinner-color: var(--kj-fg-danger, #dc2626)}.kj-spinner[data-variant=info]{--kj-spinner-color: var(--kj-fg-info, #2563eb)}.kj-spinner__glyph{display:inline-block;inline-size:100%;block-size:100%}.kj-spinner[data-animation=spin] .kj-spinner__glyph{border:2px solid var(--kj-spinner-track);border-block-start-color:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-spin var(--kj-spinner-duration) linear infinite}.kj-spinner[data-animation=pulse] .kj-spinner__glyph{background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-pulse calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots]{inline-size:auto}.kj-spinner[data-animation=dots] .kj-spinner__glyph{display:inline-flex;gap:calc(var(--kj-spinner-size) * .25);inline-size:auto;block-size:100%}.kj-spinner[data-animation=dots] .kj-spinner__glyph:before,.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .3);block-size:calc(var(--kj-spinner-size) * .3);background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-dots calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots] .kj-spinner__glyph{background:transparent}.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-animation=bars]{inline-size:auto}.kj-spinner[data-animation=bars] .kj-spinner__glyph{display:inline-flex;align-items:stretch;gap:calc(var(--kj-spinner-size) * .15);inline-size:auto;block-size:100%}.kj-spinner[data-animation=bars] .kj-spinner__glyph:before,.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .2);background:var(--kj-spinner-color);border-radius:calc(var(--kj-spinner-size) * .05);animation:kj-spinner-bars calc(var(--kj-spinner-duration) * 1.6) ease-in-out infinite;transform-origin:center}.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:before,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:after{animation:kj-spinner-reduced-motion 1.6s ease-in-out infinite!important}}@keyframes kj-spinner-spin{to{transform:rotate(360deg)}}@keyframes kj-spinner-pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes kj-spinner-dots{0%,80%,to{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}@keyframes kj-spinner-bars{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes kj-spinner-reduced-motion{0%,to{opacity:.45}50%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: KjVisuallyHidden, selector: "[kjVisuallyHidden]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-spinner', standalone: true, imports: [KjVisuallyHidden], hostDirectives: [
+                        {
+                            directive: KjSpinner,
+                            // KjSpinner's own surface — kjVariant + kjSize live on its nested
+                            // KjVariant / KjSize and are not surfaced through this outer
+                            // composition; they are re-exposed as wrapper inputs below and wired
+                            // straight to the host's data-variant / data-size attributes.
+                            inputs: ['kjAnimation', 'kjAriaLabel'],
+                        },
+                    ], template: `
+    <span class="kj-spinner__glyph" aria-hidden="true"></span>
+    @if (shouldRenderHiddenLabel()) {
+      <span kjVisuallyHidden>{{ kjAriaLabel() }}</span>
+    }
+  `, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'kj-spinner',
+                        '[attr.data-variant]': 'kjVariant()',
+                        '[attr.data-size]': 'kjSize()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-spinner{--kj-spinner-size: 1.25rem;--kj-spinner-color: currentColor;--kj-spinner-track: color-mix(in srgb, currentColor 20%, transparent);--kj-spinner-duration: .7s;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--kj-spinner-size);block-size:var(--kj-spinner-size);color:var(--kj-spinner-color);pointer-events:none}.kj-spinner[data-size=xs]{--kj-spinner-size: .75rem}.kj-spinner[data-size=sm]{--kj-spinner-size: 1rem}.kj-spinner[data-size=md]{--kj-spinner-size: 1.25rem}.kj-spinner[data-size=lg]{--kj-spinner-size: 1.75rem}.kj-spinner[data-variant=neutral]{--kj-spinner-color: currentColor}.kj-spinner[data-variant=primary]{--kj-spinner-color: var(--kj-fg-primary)}.kj-spinner[data-variant=secondary]{--kj-spinner-color: var(--kj-fg-default)}.kj-spinner[data-variant=success]{--kj-spinner-color: var(--kj-fg-success, #16a34a)}.kj-spinner[data-variant=warning]{--kj-spinner-color: var(--kj-fg-warning, #d97706)}.kj-spinner[data-variant=error]{--kj-spinner-color: var(--kj-fg-danger, #dc2626)}.kj-spinner[data-variant=info]{--kj-spinner-color: var(--kj-fg-info, #2563eb)}.kj-spinner__glyph{display:inline-block;inline-size:100%;block-size:100%}.kj-spinner[data-animation=spin] .kj-spinner__glyph{border:2px solid var(--kj-spinner-track);border-block-start-color:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-spin var(--kj-spinner-duration) linear infinite}.kj-spinner[data-animation=pulse] .kj-spinner__glyph{background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-pulse calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots]{inline-size:auto}.kj-spinner[data-animation=dots] .kj-spinner__glyph{display:inline-flex;gap:calc(var(--kj-spinner-size) * .25);inline-size:auto;block-size:100%}.kj-spinner[data-animation=dots] .kj-spinner__glyph:before,.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .3);block-size:calc(var(--kj-spinner-size) * .3);background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-dots calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots] .kj-spinner__glyph{background:transparent}.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-animation=bars]{inline-size:auto}.kj-spinner[data-animation=bars] .kj-spinner__glyph{display:inline-flex;align-items:stretch;gap:calc(var(--kj-spinner-size) * .15);inline-size:auto;block-size:100%}.kj-spinner[data-animation=bars] .kj-spinner__glyph:before,.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .2);background:var(--kj-spinner-color);border-radius:calc(var(--kj-spinner-size) * .05);animation:kj-spinner-bars calc(var(--kj-spinner-duration) * 1.6) ease-in-out infinite;transform-origin:center}.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:before,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:after{animation:kj-spinner-reduced-motion 1.6s ease-in-out infinite!important}}@keyframes kj-spinner-spin{to{transform:rotate(360deg)}}@keyframes kj-spinner-pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes kj-spinner-dots{0%,80%,to{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}@keyframes kj-spinner-bars{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes kj-spinner-reduced-motion{0%,to{opacity:.45}50%{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }], kjAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAnimation", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
+
+/**
+ * Styled code editor — a themed `<kj-editor>` wrapping the headless `KjEditor`
+ * directive (which wraps Monaco). Adds a kj-token-synced Monaco theme that
+ * re-applies on theme switch, an optional toolbar (language badge + copy) and
+ * status bar (cursor position + a keyboard-escape hint), reduced-motion, and a
+ * loading region.
+ *
+ * Monaco is browser-only and heavy; it loads lazily after first render via
+ * `KjEditorLoader`. Configure the source app-wide with `provideMonaco()`
+ * (defaults to a CDN loader so the base bundle stays lean).
+ *
+ * @example
+ * ```html
+ * <kj-editor [(kjValue)]="code" kjLanguage="typescript" style="height:340px" />
+ * ```
+ * @doc-category Components/Data
+ * @doc
+ * @doc-name editor
+ * @doc-is-main
+ * @doc-description Themed Monaco code editor — syntax highlighting, two-way value, kj-theme sync, and AAA keyboard access.
+ * @doc-example Default [full]
+ *   A TypeScript editor with the toolbar and status bar, two-way bound to a signal.
+ *   @doc-file editor.example.ts
+ * @doc-example Languages [full]
+ *   Switch the `kjLanguage` to re-tokenise the same buffer across TS / HTML / CSS / JSON.
+ *   @doc-file editor.languages.example.ts
+ * @doc-example Read-only [full]
+ *   A read-only viewer with the minimap enabled and line numbers on.
+ *   @doc-file editor.readonly.example.ts
+ * @doc-example Options [full]
+ *   Toggle readonly, minimap, word wrap, line numbers and font size live.
+ *   @doc-file editor.options.example.ts
+ *
+ * @doc-keyboard
+ *   Tab                     Inserts a tab / indents (Monaco default)
+ *   Ctrl+M                  Toggles Tab-trapping — flips Tab to move focus in/out (no keyboard trap)
+ *   Alt+F1                  Opens Monaco's accessibility help
+ *   Standard editing keys   Arrow / Home / End / PageUp-Down / selection / undo-redo
+ *
+ * @doc-aria
+ *   aria-label   Monaco's textarea is labelled from kjAriaLabel (defaults to "Code editor")
+ *   role=status  The loading region announces the editor is loading
  */
-class KjDropdownMenuComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjDropdownMenuComponent, isStandalone: true, selector: "kj-dropdown-menu", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-dropdown-menu{--kj-dropdown-menu-bg: var(--kj-bg-elevated);--kj-dropdown-menu-fg: var(--kj-fg-default);--kj-dropdown-menu-border-color: var(--kj-border-default);--kj-dropdown-menu-radius: var(--kj-radius-box);--kj-dropdown-menu-padding: var(--kj-space-xs);--kj-dropdown-menu-shadow: var(--kj-shadow-md);display:flex;flex-direction:column;box-sizing:border-box;min-width:12rem;max-width:min(20rem,calc(100vw - 2rem));background:var(--kj-dropdown-menu-bg);color:var(--kj-dropdown-menu-fg);border:var(--kj-border) solid var(--kj-dropdown-menu-border-color);border-radius:var(--kj-dropdown-menu-radius);padding:var(--kj-dropdown-menu-padding);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-dropdown-menu-shadow);pointer-events:auto;z-index:1000}.kj-dropdown-menu[hidden]{display:none}.kj-dropdown-menu-item{--kj-dropdown-menu-item-padding-x: var(--kj-space-md);--kj-dropdown-menu-item-padding-y: var(--kj-space-sm);--kj-dropdown-menu-item-min-height: 2.75rem;--kj-dropdown-menu-item-radius: var(--kj-radius-field);--kj-dropdown-menu-item-hover-bg: var(--kj-bg-surface);--kj-dropdown-menu-item-active-bg: var(--kj-bg-field);display:flex;align-items:center;justify-content:flex-start;gap:var(--kj-space-sm);width:100%;min-height:var(--kj-dropdown-menu-item-min-height);box-sizing:border-box;padding:var(--kj-dropdown-menu-item-padding-y) var(--kj-dropdown-menu-item-padding-x);margin:0;background:transparent;color:inherit;border:none;border-radius:var(--kj-dropdown-menu-item-radius);font:inherit;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none}.kj-dropdown-menu-item:hover:not([data-disabled]){background:var(--kj-dropdown-menu-item-hover-bg)}.kj-dropdown-menu-item:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-dropdown-menu-item[aria-current=true]{background:var(--kj-dropdown-menu-item-current-bg, var(--kj-bg-field));color:var(--kj-dropdown-menu-item-current-fg, var(--kj-fg-primary));font-weight:500}.kj-dropdown-menu-item[data-disabled]{cursor:not-allowed;opacity:.5}.kj-dropdown-menu-separator{display:block;height:1px;margin:var(--kj-space-xs) calc(var(--kj-space-xs) * -1);background:color-mix(in oklab,var(--kj-fg-default) 12%,transparent);border:0}.kj-dropdown-menu-label{display:block;padding:var(--kj-space-xs) var(--kj-space-md);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--kj-fg-default);opacity:.65}.kj-dropdown-menu-group{display:flex;flex-direction:column}@media(prefers-reduced-motion:no-preference){.kj-dropdown-menu{transition:opacity .12s ease-out,transform .12s ease-out}.kj-dropdown-menu[data-state=closed]{opacity:0;transform:scale(.98)}.kj-dropdown-menu[data-state=open]{opacity:1;transform:scale(1)}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+class KjEditorComponent {
+    hostRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    loader = inject(KjEditorLoader);
+    editorHost = viewChild.required('editorHost');
+    /** Two-way editor text. */
+    kjValue = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Code language — friendly name or Monaco id; short aliases (`ts`, `md`) normalised. */
+    kjLanguage = input('plaintext', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLanguage" }] : /* istanbul ignore next */ []));
+    /** Read-only mode. */
+    kjReadonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjReadonly" }] : /* istanbul ignore next */ []));
+    /** Show the minimap. */
+    kjMinimap = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMinimap" }] : /* istanbul ignore next */ []));
+    /** Gutter line-number mode. */
+    kjLineNumbers = input('on', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLineNumbers" }] : /* istanbul ignore next */ []));
+    /** Soft wrap. */
+    kjWordWrap = input('off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjWordWrap" }] : /* istanbul ignore next */ []));
+    /** Font size in px. */
+    kjFontSize = input(13, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjFontSize" }] : /* istanbul ignore next */ []));
+    /** Grow to fit content instead of filling the container (great for code snippets). */
+    kjAutoHeight = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAutoHeight" }] : /* istanbul ignore next */ []));
+    /** Cap for `kjAutoHeight` in px (content scrolls past it). Uncapped when unset. */
+    kjMaxHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMaxHeight" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the editor. */
+    kjAriaLabel = input('Code editor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Start with Tab moving focus out instead of indenting. */
+    kjTabFocusMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjTabFocusMode" }] : /* istanbul ignore next */ []));
+    /** Escape hatch — merged last into Monaco's construction options. */
+    kjOptions = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOptions" }] : /* istanbul ignore next */ []));
+    /** Show the toolbar (language badge + copy button). */
+    kjShowToolbar = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjShowToolbar" }] : /* istanbul ignore next */ []));
+    /** Show the status bar (cursor position + keyboard hint). */
+    kjShowStatusBar = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjShowStatusBar" }] : /* istanbul ignore next */ []));
+    /** True until Monaco has mounted. */
+    loading = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Cursor position for the status bar. */
+    line = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []));
+    column = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    /** Current kj-derived Monaco theme id, bound onto the directive. */
+    themeId = signal('vs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeId" }] : /* istanbul ignore next */ []));
+    /** Human label for the platform-appropriate tab-escape shortcut. */
+    escapeHint = computed(() => 'Press Ctrl+M to toggle Tab trapping', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "escapeHint" }] : /* istanbul ignore next */ []));
+    monaco = null;
+    constructor() {
+        afterNextRender(() => {
+            void this.syncTheme();
+            // Re-apply the kj Monaco theme when the app theme switches.
+            if (typeof MutationObserver !== 'undefined') {
+                const obs = new MutationObserver(() => void this.syncTheme());
+                obs.observe(document.documentElement, {
+                    attributes: true,
+                    attributeFilter: ['data-theme', 'class'],
+                });
+                this.destroyRef.onDestroy(() => obs.disconnect());
+            }
+        });
+    }
+    /** Wired from the directive's `kjReady` output. */
+    onReady(editor) {
+        this.loading.set(false);
+        editor.onDidChangeCursorPosition((e) => {
+            this.line.set(e.position.lineNumber);
+            this.column.set(e.position.column);
+        });
+        void this.syncTheme();
+    }
+    async copy() {
+        try {
+            await navigator.clipboard.writeText(this.kjValue());
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 1500);
+        }
+        catch {
+            // Clipboard unavailable (insecure context / denied) — no-op.
+        }
+    }
+    /**
+     * Read the resolved `--kj-*` surface tokens off the host, derive the scheme
+     * from background luminance (theme-agnostic — works for any kj theme), define
+     * a Monaco theme tinted with those tokens, and apply it globally.
+     */
+    async syncTheme() {
+        if (!this.monaco) {
+            try {
+                this.monaco = await this.loader.load();
+            }
+            catch {
+                return;
+            }
+        }
+        const monaco = this.monaco;
+        if (!monaco || typeof getComputedStyle === 'undefined')
+            return;
+        const bg = this.resolveColor('--kj-bg-surface') ?? [255, 255, 255];
+        const fg = this.resolveColor('--kj-fg-default') ?? [30, 30, 30];
+        const muted = this.resolveColor('--kj-fg-muted') ?? [130, 130, 130];
+        const accent = this.resolveColor('--kj-bg-primary') ?? [90, 120, 255];
+        const dark = luminance(bg) < 0.5;
+        const id = dark ? 'kj-editor-dark' : 'kj-editor-light';
+        monaco.editor.defineTheme(id, {
+            base: dark ? 'vs-dark' : 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': hex(bg),
+                'editor.foreground': hex(fg),
+                'editorLineNumber.foreground': hex(muted),
+                'editorLineNumber.activeForeground': hex(fg),
+                'editorCursor.foreground': hex(accent),
+                'editor.selectionBackground': hex(accent) + '55',
+                'editorGutter.background': hex(bg),
+            },
+        });
+        monaco.editor.setTheme(id);
+        this.themeId.set(id);
+    }
+    /** Resolve a CSS custom property to [r,g,b] via a probe element. */
+    resolveColor(varName) {
+        const host = this.hostRef.nativeElement;
+        const probe = document.createElement('span');
+        probe.style.color = `var(${varName})`;
+        probe.style.display = 'none';
+        host.appendChild(probe);
+        const rgb = getComputedStyle(probe).color;
+        host.removeChild(probe);
+        const m = rgb.match(/rgba?\(([^)]+)\)/);
+        if (!m)
+            return null;
+        const parts = m[1].split(',').map((p) => parseFloat(p.trim()));
+        if (parts.length < 3 || parts.some(Number.isNaN))
+            return null;
+        return [parts[0], parts[1], parts[2]];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjEditorComponent, isStandalone: true, selector: "kj-editor", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjLanguage: { classPropertyName: "kjLanguage", publicName: "kjLanguage", isSignal: true, isRequired: false, transformFunction: null }, kjReadonly: { classPropertyName: "kjReadonly", publicName: "kjReadonly", isSignal: true, isRequired: false, transformFunction: null }, kjMinimap: { classPropertyName: "kjMinimap", publicName: "kjMinimap", isSignal: true, isRequired: false, transformFunction: null }, kjLineNumbers: { classPropertyName: "kjLineNumbers", publicName: "kjLineNumbers", isSignal: true, isRequired: false, transformFunction: null }, kjWordWrap: { classPropertyName: "kjWordWrap", publicName: "kjWordWrap", isSignal: true, isRequired: false, transformFunction: null }, kjFontSize: { classPropertyName: "kjFontSize", publicName: "kjFontSize", isSignal: true, isRequired: false, transformFunction: null }, kjAutoHeight: { classPropertyName: "kjAutoHeight", publicName: "kjAutoHeight", isSignal: true, isRequired: false, transformFunction: null }, kjMaxHeight: { classPropertyName: "kjMaxHeight", publicName: "kjMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, kjTabFocusMode: { classPropertyName: "kjTabFocusMode", publicName: "kjTabFocusMode", isSignal: true, isRequired: false, transformFunction: null }, kjOptions: { classPropertyName: "kjOptions", publicName: "kjOptions", isSignal: true, isRequired: false, transformFunction: null }, kjShowToolbar: { classPropertyName: "kjShowToolbar", publicName: "kjShowToolbar", isSignal: true, isRequired: false, transformFunction: null }, kjShowStatusBar: { classPropertyName: "kjShowStatusBar", publicName: "kjShowStatusBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjValue: "kjValueChange" }, host: { properties: { "attr.data-auto-height": "kjAutoHeight() ? '' : null" } }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kj-editor-wrap\">\n  @if (kjShowToolbar()) {\n    <div class=\"kj-editor-toolbar\">\n      <span class=\"kj-editor-lang\">{{ kjLanguage() }}</span>\n      <span class=\"kj-editor-spacer\"></span>\n      <button\n        type=\"button\"\n        class=\"kj-editor-copy\"\n        (click)=\"copy()\"\n        [attr.aria-label]=\"copied() ? 'Copied' : 'Copy code'\"\n      >\n        {{ copied() ? 'Copied' : 'Copy' }}\n      </button>\n    </div>\n  }\n\n  <div class=\"kj-editor-body\">\n    <div\n      #editorHost\n      class=\"kj-editor-host\"\n      kjEditor\n      [(kjValue)]=\"kjValue\"\n      [kjLanguage]=\"kjLanguage()\"\n      [kjReadonly]=\"kjReadonly()\"\n      [kjMinimap]=\"kjMinimap()\"\n      [kjLineNumbers]=\"kjLineNumbers()\"\n      [kjWordWrap]=\"kjWordWrap()\"\n      [kjFontSize]=\"kjFontSize()\"\n      [kjAutoHeight]=\"kjAutoHeight()\"\n      [kjMaxHeight]=\"kjMaxHeight()\"\n      [kjAriaLabel]=\"kjAriaLabel()\"\n      [kjTabFocusMode]=\"kjTabFocusMode()\"\n      [kjTheme]=\"themeId()\"\n      [kjOptions]=\"kjOptions()\"\n      (kjReady)=\"onReady($event)\"\n    ></div>\n\n    @if (loading()) {\n      <div class=\"kj-editor-loading\" role=\"status\" aria-live=\"polite\">\n        <kj-spinner kjAriaLabel=\"Loading editor\" />\n      </div>\n    }\n  </div>\n\n  @if (kjShowStatusBar()) {\n    <div class=\"kj-editor-status\">\n      <span class=\"kj-editor-pos\">Ln {{ line() }}, Col {{ column() }}</span>\n      <span class=\"kj-editor-spacer\"></span>\n      <span class=\"kj-editor-hint\">{{ escapeHint() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-md, 0);overflow:hidden;background:var(--kj-bg-surface)}.kj-editor-wrap{display:flex;flex-direction:column;height:100%;min-height:12rem}:host([data-auto-height]){height:auto}:host([data-auto-height]) .kj-editor-wrap{height:auto;min-height:0}:host([data-auto-height]) .kj-editor-body{position:static;flex:none;min-height:3rem}:host([data-auto-height]) .kj-editor-host{position:relative;inset:auto}.kj-editor-toolbar,.kj-editor-status{display:flex;align-items:center;gap:var(--kj-space-sm);padding:var(--kj-space-sm) var(--kj-space-lg);background:var(--kj-bg-body);flex-shrink:0}.kj-editor-toolbar{border-bottom:1px solid var(--kj-border-default)}.kj-editor-status{border-top:1px solid var(--kj-border-default)}.kj-editor-spacer{flex:1}.kj-editor-lang{font-family:var(--kj-font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kj-fg-primary);background:color-mix(in oklab,var(--kj-bg-primary) 8%,transparent);padding:.15rem var(--kj-space-sm);border:1px solid color-mix(in oklab,var(--kj-bg-primary) 22%,transparent)}.kj-editor-copy{background:none;border:none;color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.7rem;letter-spacing:.06em;cursor:pointer;min-height:44px;min-width:44px;padding:0 var(--kj-space-sm);transition:color .15s}.kj-editor-copy:hover{color:var(--kj-fg-default)}.kj-editor-copy:focus-visible{outline:2px solid var(--kj-border-focus, var(--kj-bg-primary));outline-offset:2px}.kj-editor-pos{font-family:var(--kj-font-mono);font-size:.7rem;color:var(--kj-fg-muted)}.kj-editor-hint{font-size:.7rem;color:var(--kj-fg-muted)}.kj-editor-body{position:relative;flex:1;min-height:8rem}.kj-editor-host{position:absolute;inset:0;overflow:hidden}.kj-editor-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--kj-bg-surface);z-index:1}.kj-editor-host ::ng-deep .monaco-editor,.kj-editor-host ::ng-deep .monaco-editor-background,.kj-editor-host ::ng-deep .monaco-editor .margin{background-color:var(--kj-bg-surface)!important}.kj-editor-host ::ng-deep .monaco-editor .scrollbar .slider{background:var(--kj-bg-field, var(--kj-bg-elevated))!important}@media(prefers-reduced-motion:reduce){.kj-editor-copy{transition:none}}\n"], dependencies: [{ kind: "directive", type: KjEditor, selector: "[kjEditor]", inputs: ["kjValue", "kjLanguage", "kjReadonly", "kjMinimap", "kjLineNumbers", "kjWordWrap", "kjFontSize", "kjAutoHeight", "kjMaxHeight", "kjTheme", "kjAriaLabel", "kjTabFocusMode", "kjOptions"], outputs: ["kjValueChange", "kjReady"], exportAs: ["kjEditor"] }, { kind: "component", type: KjSpinnerComponent, selector: "kj-spinner", inputs: ["kjVariant", "kjSize", "kjAnimation", "kjAriaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDropdownMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kj-dropdown-menu', standalone: true, imports: [
-                        KjDropdownMenuTrigger,
-                        KjDropdownMenuContent,
-                        KjDropdownMenuItem,
-                        KjDropdownMenuSeparator,
-                        KjDropdownMenuLabel,
-                        KjDropdownMenuGroup,
-                    ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-dropdown-menu{--kj-dropdown-menu-bg: var(--kj-bg-elevated);--kj-dropdown-menu-fg: var(--kj-fg-default);--kj-dropdown-menu-border-color: var(--kj-border-default);--kj-dropdown-menu-radius: var(--kj-radius-box);--kj-dropdown-menu-padding: var(--kj-space-xs);--kj-dropdown-menu-shadow: var(--kj-shadow-md);display:flex;flex-direction:column;box-sizing:border-box;min-width:12rem;max-width:min(20rem,calc(100vw - 2rem));background:var(--kj-dropdown-menu-bg);color:var(--kj-dropdown-menu-fg);border:var(--kj-border) solid var(--kj-dropdown-menu-border-color);border-radius:var(--kj-dropdown-menu-radius);padding:var(--kj-dropdown-menu-padding);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-dropdown-menu-shadow);pointer-events:auto;z-index:1000}.kj-dropdown-menu[hidden]{display:none}.kj-dropdown-menu-item{--kj-dropdown-menu-item-padding-x: var(--kj-space-md);--kj-dropdown-menu-item-padding-y: var(--kj-space-sm);--kj-dropdown-menu-item-min-height: 2.75rem;--kj-dropdown-menu-item-radius: var(--kj-radius-field);--kj-dropdown-menu-item-hover-bg: var(--kj-bg-surface);--kj-dropdown-menu-item-active-bg: var(--kj-bg-field);display:flex;align-items:center;justify-content:flex-start;gap:var(--kj-space-sm);width:100%;min-height:var(--kj-dropdown-menu-item-min-height);box-sizing:border-box;padding:var(--kj-dropdown-menu-item-padding-y) var(--kj-dropdown-menu-item-padding-x);margin:0;background:transparent;color:inherit;border:none;border-radius:var(--kj-dropdown-menu-item-radius);font:inherit;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none}.kj-dropdown-menu-item:hover:not([data-disabled]){background:var(--kj-dropdown-menu-item-hover-bg)}.kj-dropdown-menu-item:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:-2px}.kj-dropdown-menu-item[aria-current=true]{background:var(--kj-dropdown-menu-item-current-bg, var(--kj-bg-field));color:var(--kj-dropdown-menu-item-current-fg, var(--kj-fg-primary));font-weight:500}.kj-dropdown-menu-item[data-disabled]{cursor:not-allowed;opacity:.5}.kj-dropdown-menu-separator{display:block;height:1px;margin:var(--kj-space-xs) calc(var(--kj-space-xs) * -1);background:color-mix(in oklab,var(--kj-fg-default) 12%,transparent);border:0}.kj-dropdown-menu-label{display:block;padding:var(--kj-space-xs) var(--kj-space-md);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--kj-fg-default);opacity:.65}.kj-dropdown-menu-group{display:flex;flex-direction:column}@media(prefers-reduced-motion:no-preference){.kj-dropdown-menu{transition:opacity .12s ease-out,transform .12s ease-out}.kj-dropdown-menu[data-state=closed]{opacity:0;transform:scale(.98)}.kj-dropdown-menu[data-state=open]{opacity:1;transform:scale(1)}}}\n"] }]
-        }] });
+            args: [{ selector: 'kj-editor', standalone: true, imports: [KjEditor, KjSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-auto-height]': "kjAutoHeight() ? '' : null",
+                    }, template: "<div class=\"kj-editor-wrap\">\n  @if (kjShowToolbar()) {\n    <div class=\"kj-editor-toolbar\">\n      <span class=\"kj-editor-lang\">{{ kjLanguage() }}</span>\n      <span class=\"kj-editor-spacer\"></span>\n      <button\n        type=\"button\"\n        class=\"kj-editor-copy\"\n        (click)=\"copy()\"\n        [attr.aria-label]=\"copied() ? 'Copied' : 'Copy code'\"\n      >\n        {{ copied() ? 'Copied' : 'Copy' }}\n      </button>\n    </div>\n  }\n\n  <div class=\"kj-editor-body\">\n    <div\n      #editorHost\n      class=\"kj-editor-host\"\n      kjEditor\n      [(kjValue)]=\"kjValue\"\n      [kjLanguage]=\"kjLanguage()\"\n      [kjReadonly]=\"kjReadonly()\"\n      [kjMinimap]=\"kjMinimap()\"\n      [kjLineNumbers]=\"kjLineNumbers()\"\n      [kjWordWrap]=\"kjWordWrap()\"\n      [kjFontSize]=\"kjFontSize()\"\n      [kjAutoHeight]=\"kjAutoHeight()\"\n      [kjMaxHeight]=\"kjMaxHeight()\"\n      [kjAriaLabel]=\"kjAriaLabel()\"\n      [kjTabFocusMode]=\"kjTabFocusMode()\"\n      [kjTheme]=\"themeId()\"\n      [kjOptions]=\"kjOptions()\"\n      (kjReady)=\"onReady($event)\"\n    ></div>\n\n    @if (loading()) {\n      <div class=\"kj-editor-loading\" role=\"status\" aria-live=\"polite\">\n        <kj-spinner kjAriaLabel=\"Loading editor\" />\n      </div>\n    }\n  </div>\n\n  @if (kjShowStatusBar()) {\n    <div class=\"kj-editor-status\">\n      <span class=\"kj-editor-pos\">Ln {{ line() }}, Col {{ column() }}</span>\n      <span class=\"kj-editor-spacer\"></span>\n      <span class=\"kj-editor-hint\">{{ escapeHint() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;border:1px solid var(--kj-border-default);border-radius:var(--kj-radius-md, 0);overflow:hidden;background:var(--kj-bg-surface)}.kj-editor-wrap{display:flex;flex-direction:column;height:100%;min-height:12rem}:host([data-auto-height]){height:auto}:host([data-auto-height]) .kj-editor-wrap{height:auto;min-height:0}:host([data-auto-height]) .kj-editor-body{position:static;flex:none;min-height:3rem}:host([data-auto-height]) .kj-editor-host{position:relative;inset:auto}.kj-editor-toolbar,.kj-editor-status{display:flex;align-items:center;gap:var(--kj-space-sm);padding:var(--kj-space-sm) var(--kj-space-lg);background:var(--kj-bg-body);flex-shrink:0}.kj-editor-toolbar{border-bottom:1px solid var(--kj-border-default)}.kj-editor-status{border-top:1px solid var(--kj-border-default)}.kj-editor-spacer{flex:1}.kj-editor-lang{font-family:var(--kj-font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kj-fg-primary);background:color-mix(in oklab,var(--kj-bg-primary) 8%,transparent);padding:.15rem var(--kj-space-sm);border:1px solid color-mix(in oklab,var(--kj-bg-primary) 22%,transparent)}.kj-editor-copy{background:none;border:none;color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.7rem;letter-spacing:.06em;cursor:pointer;min-height:44px;min-width:44px;padding:0 var(--kj-space-sm);transition:color .15s}.kj-editor-copy:hover{color:var(--kj-fg-default)}.kj-editor-copy:focus-visible{outline:2px solid var(--kj-border-focus, var(--kj-bg-primary));outline-offset:2px}.kj-editor-pos{font-family:var(--kj-font-mono);font-size:.7rem;color:var(--kj-fg-muted)}.kj-editor-hint{font-size:.7rem;color:var(--kj-fg-muted)}.kj-editor-body{position:relative;flex:1;min-height:8rem}.kj-editor-host{position:absolute;inset:0;overflow:hidden}.kj-editor-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--kj-bg-surface);z-index:1}.kj-editor-host ::ng-deep .monaco-editor,.kj-editor-host ::ng-deep .monaco-editor-background,.kj-editor-host ::ng-deep .monaco-editor .margin{background-color:var(--kj-bg-surface)!important}.kj-editor-host ::ng-deep .monaco-editor .scrollbar .slider{background:var(--kj-bg-field, var(--kj-bg-elevated))!important}@media(prefers-reduced-motion:reduce){.kj-editor-copy{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }], kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLanguage", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjMinimap: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMinimap", required: false }] }], kjLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLineNumbers", required: false }] }], kjWordWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjWordWrap", required: false }] }], kjFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFontSize", required: false }] }], kjAutoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAutoHeight", required: false }] }], kjMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMaxHeight", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }], kjTabFocusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTabFocusMode", required: false }] }], kjOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOptions", required: false }] }], kjShowToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowToolbar", required: false }] }], kjShowStatusBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowStatusBar", required: false }] }] } });
+/** Relative luminance (0 dark – 1 light) of an [r,g,b] triple. */
+function luminance([r, g, b]) {
+    return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+/** [r,g,b] → `#rrggbb`. */
+function hex([r, g, b]) {
+    const h = (n) => Math.max(0, Math.min(255, Math.round(n)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${h(r)}${h(g)}${h(b)}`;
+}
 
 const KJ_EMPTY_STATE_SIZE_PRESET = {
     values: ['sm', 'md', 'lg'],
@@ -5163,11 +6879,20 @@ function encodeSvgDataUrl(svg) {
         .replace(/>/g, '%3E');
     return `url("data:image/svg+xml;utf8,${encoded}")`;
 }
-/** Convert PascalCase ("AArrowDown") → kebab-case ("a-arrow-down"). */
+/**
+ * Convert PascalCase ("AArrowDown") → kebab-case ("a-arrow-down").
+ *
+ * Lucide separates a trailing number from its word with a hyphen and keeps the
+ * digits grouped ("Heading1" → "heading-1", "Clock10" → "clock-10"), so a
+ * letter→digit boundary also gets a hyphen. Without this, digit-bearing icons
+ * (headings, clock-1…12, columns-2, …) resolve to a key that never matches the
+ * requested name and render blank.
+ */
 function pascalToKebab(name) {
     return name
         .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
         .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+        .replace(/([a-zA-Z])([0-9])/g, '$1-$2')
         .toLowerCase();
 }
 /** Lazily build the kebab-name → encoded-data-url map once per app. */
@@ -5205,7 +6930,7 @@ function buildLucideRegistry() {
  * ```
  *
  * @doc-example Gallery
- *   @doc-file ../icon.gallery.example.ts
+ *   @doc-file ../_examples/icon.gallery.example.ts
  *
  * @doc-css-var
  *   --kj-icon       — Resolved icon value (url("...") or "glyph"). Set by the directive — read by the rendered .kj-icon.
@@ -10715,6 +12440,800 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dot: [{ type: i0.ViewChild, args: ['dot', { isSignal: true }] }] } });
 
+/**
+ * Build an inline-format toggle feature. These need no package loading — inline
+ * formatting uses the core `FORMAT_TEXT_COMMAND` — so the whole feature is a
+ * toolbar toggle plus an optional keyboard shortcut.
+ */
+function inlineFormat(format, icon, label, order, shortcut, ariaKeyshortcuts) {
+    return {
+        name: format,
+        setup: shortcut
+            ? (ctx) => ctx.registerShortcut(shortcut, () => ctx.toggleInlineFormat(format))
+            : undefined,
+        toolbar: [
+            {
+                id: format,
+                group: 'format',
+                order,
+                icon,
+                label,
+                ariaKeyshortcuts,
+                kind: 'toggle',
+                isActive: (state) => state.activeFormats.has(format),
+                run: (ctx) => ctx.toggleInlineFormat(format),
+            },
+        ],
+    };
+}
+/** Bold (Ctrl/Cmd+B). */
+function bold() {
+    return inlineFormat('bold', 'bold', 'Bold', 10, 'mod+b', 'Control+B');
+}
+/** Italic (Ctrl/Cmd+I). */
+function italic() {
+    return inlineFormat('italic', 'italic', 'Italic', 20, 'mod+i', 'Control+I');
+}
+/** Underline (Ctrl/Cmd+U). */
+function underline() {
+    return inlineFormat('underline', 'underline', 'Underline', 30, 'mod+u', 'Control+U');
+}
+/** Strikethrough. */
+function strike() {
+    return inlineFormat('strikethrough', 'strikethrough', 'Strikethrough', 40);
+}
+/** Inline code. */
+function inlineCode() {
+    return inlineFormat('code', 'code', 'Inline code', 50);
+}
+
+/**
+ * Heading feature. Lazily loads `@lexical/rich-text` for the heading node +
+ * creator, and contributes one toolbar toggle per configured level.
+ */
+function heading(options) {
+    const levels = options?.levels ?? [1, 2, 3];
+    let mod;
+    return {
+        name: 'heading',
+        async load() {
+            mod = await import('@lexical/rich-text');
+        },
+        nodes: () => [mod.HeadingNode],
+        toolbar: levels.map((level, index) => {
+            const tag = `h${level}`;
+            return {
+                id: `heading-${level}`,
+                group: 'block',
+                order: index,
+                icon: `heading-${level}`,
+                label: `Heading ${level}`,
+                kind: 'toggle',
+                isActive: (state) => state.blockType === tag,
+                run: (ctx) => {
+                    if (ctx.state.blockType === tag)
+                        ctx.setParagraph();
+                    else
+                        ctx.setBlock(() => mod.$createHeadingNode(tag));
+                },
+            };
+        }),
+    };
+}
+
+// `registerList` sets up transforms + commands editor-wide; run it once even if
+// both bullet and ordered list features are enabled.
+const listRegistered = new WeakSet();
+function ensureList(editor, mod) {
+    if (listRegistered.has(editor))
+        return () => { };
+    listRegistered.add(editor);
+    const unregister = mod.registerList(editor);
+    return () => {
+        listRegistered.delete(editor);
+        unregister();
+    };
+}
+/** Bullet (unordered) list. Lazily loads `@lexical/list`. */
+function bulletList() {
+    let mod;
+    return {
+        name: 'bullet-list',
+        async load() {
+            mod = await import('@lexical/list');
+        },
+        nodes: () => [mod.ListNode, mod.ListItemNode],
+        setup: (ctx) => ensureList(ctx.editor, mod),
+        toolbar: [
+            {
+                id: 'bullet-list',
+                group: 'list',
+                order: 0,
+                icon: 'list',
+                label: 'Bullet list',
+                kind: 'toggle',
+                isActive: (state) => state.blockType === 'bullet',
+                run: (ctx) => ctx.state.blockType === 'bullet'
+                    ? ctx.dispatch(mod.REMOVE_LIST_COMMAND, undefined)
+                    : ctx.dispatch(mod.INSERT_UNORDERED_LIST_COMMAND, undefined),
+            },
+        ],
+    };
+}
+/** Ordered (numbered) list. Lazily loads `@lexical/list`. */
+function orderedList() {
+    let mod;
+    return {
+        name: 'ordered-list',
+        async load() {
+            mod = await import('@lexical/list');
+        },
+        nodes: () => [mod.ListNode, mod.ListItemNode],
+        setup: (ctx) => ensureList(ctx.editor, mod),
+        toolbar: [
+            {
+                id: 'ordered-list',
+                group: 'list',
+                order: 1,
+                icon: 'list-ordered',
+                label: 'Numbered list',
+                kind: 'toggle',
+                isActive: (state) => state.blockType === 'number',
+                run: (ctx) => ctx.state.blockType === 'number'
+                    ? ctx.dispatch(mod.REMOVE_LIST_COMMAND, undefined)
+                    : ctx.dispatch(mod.INSERT_ORDERED_LIST_COMMAND, undefined),
+            },
+        ],
+    };
+}
+
+/** Blockquote feature. Lazily loads `@lexical/rich-text` for the quote node. */
+function quote() {
+    let mod;
+    return {
+        name: 'quote',
+        async load() {
+            mod = await import('@lexical/rich-text');
+        },
+        nodes: () => [mod.QuoteNode],
+        toolbar: [
+            {
+                id: 'quote',
+                group: 'block',
+                order: 10,
+                icon: 'quote',
+                label: 'Quote',
+                kind: 'toggle',
+                isActive: (state) => state.blockType === 'quote',
+                run: (ctx) => ctx.state.blockType === 'quote'
+                    ? ctx.setParagraph()
+                    : ctx.setBlock(() => mod.$createQuoteNode()),
+            },
+        ],
+    };
+}
+
+/** Code block feature. Lazily loads `@lexical/code` (and its Prism grammars). */
+function codeBlock() {
+    let mod;
+    return {
+        name: 'code-block',
+        async load() {
+            mod = await import('@lexical/code');
+        },
+        nodes: () => [mod.CodeNode, mod.CodeHighlightNode],
+        toolbar: [
+            {
+                id: 'code-block',
+                group: 'block',
+                order: 20,
+                icon: 'square-code',
+                label: 'Code block',
+                kind: 'toggle',
+                isActive: (state) => state.blockType === 'code',
+                run: (ctx) => ctx.state.blockType === 'code'
+                    ? ctx.setParagraph()
+                    : ctx.setBlock(() => mod.$createCodeNode()),
+            },
+        ],
+    };
+}
+
+/**
+ * Link editor overlay contributed by the `link` feature. Rendered by the RTE
+ * component inside a `role="dialog"` popover; it edits/removes the link at the
+ * caret. Not part of the public API — surfaced via the feature's `overlay`.
+ */
+class LinkEditor {
+    data = injectRteOverlayData();
+    url = signal(this.data.url ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    input = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.input()?.nativeElement.focus());
+    }
+    onApply(event) {
+        event.preventDefault();
+        this.data.apply(this.url().trim());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LinkEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LinkEditor, isStandalone: true, selector: "kj-rte-link-editor", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <form class="kj-rte__overlay-form" (submit)="onApply($event)">
+      <label class="kj-rte__overlay-label" for="kj-rte-link-url">URL</label>
+      <input
+        #input
+        id="kj-rte-link-url"
+        class="kj-rte__overlay-input"
+        type="url"
+        placeholder="https://example.com"
+        [value]="url()"
+        (input)="url.set($any($event.target).value)"
+        (keydown.escape)="data.close()"
+      />
+      <div class="kj-rte__overlay-actions">
+        <button type="submit" class="kj-rte__overlay-btn">Apply</button>
+        @if (url()) {
+          <button type="button" class="kj-rte__overlay-btn" (click)="data.remove()">Remove</button>
+        }
+        <button type="button" class="kj-rte__overlay-btn" (click)="data.close()">Cancel</button>
+      </div>
+    </form>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LinkEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kj-rte-link-editor',
+                    standalone: true,
+                    template: `
+    <form class="kj-rte__overlay-form" (submit)="onApply($event)">
+      <label class="kj-rte__overlay-label" for="kj-rte-link-url">URL</label>
+      <input
+        #input
+        id="kj-rte-link-url"
+        class="kj-rte__overlay-input"
+        type="url"
+        placeholder="https://example.com"
+        [value]="url()"
+        (input)="url.set($any($event.target).value)"
+        (keydown.escape)="data.close()"
+      />
+      <div class="kj-rte__overlay-actions">
+        <button type="submit" class="kj-rte__overlay-btn">Apply</button>
+        @if (url()) {
+          <button type="button" class="kj-rte__overlay-btn" (click)="data.remove()">Remove</button>
+        }
+        <button type="button" class="kj-rte__overlay-btn" (click)="data.close()">Cancel</button>
+      </div>
+    </form>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+/**
+ * Link feature. Lazily loads core `lexical` (for selection reads) and
+ * `@lexical/link`. Contributes the link node, a Ctrl/Cmd+K shortcut, a toolbar
+ * toggle, and the link-editor overlay.
+ */
+function link() {
+    let lex;
+    let mod;
+    function selectedUrl(ctx) {
+        return ctx.read(() => {
+            const selection = lex.$getSelection();
+            if (!lex.$isRangeSelection(selection))
+                return '';
+            for (const node of selection.getNodes()) {
+                const link = mod.$isLinkNode(node)
+                    ? node
+                    : mod.$isLinkNode(node.getParent())
+                        ? node.getParent()
+                        : null;
+                if (link && mod.$isLinkNode(link))
+                    return link.getURL();
+            }
+            return '';
+        });
+    }
+    function open(ctx) {
+        ctx.openOverlay('link', {
+            url: selectedUrl(ctx),
+            apply: (url) => {
+                ctx.update(() => mod.$toggleLink(url ? url : null));
+                ctx.closeOverlay();
+                ctx.focus();
+                ctx.announce(url ? 'Link added' : 'Link removed');
+            },
+            remove: () => {
+                ctx.update(() => mod.$toggleLink(null));
+                ctx.closeOverlay();
+                ctx.focus();
+                ctx.announce('Link removed');
+            },
+            close: () => {
+                ctx.closeOverlay();
+                ctx.focus();
+            },
+        });
+    }
+    return {
+        name: 'link',
+        async load() {
+            [lex, mod] = await Promise.all([import('lexical'), import('@lexical/link')]);
+        },
+        nodes: () => [mod.LinkNode],
+        setup: (ctx) => ctx.registerShortcut('mod+k', () => open(ctx)),
+        toolbar: [
+            {
+                id: 'link',
+                group: 'insert',
+                order: 0,
+                icon: 'link',
+                label: 'Link',
+                ariaKeyshortcuts: 'Control+K',
+                kind: 'toggle',
+                isActive: (state) => state.isLink,
+                run: (ctx) => open(ctx),
+            },
+        ],
+        overlay: [{ id: 'link', label: 'Edit link', component: LinkEditor }],
+    };
+}
+
+/**
+ * Image editor overlay contributed by the `image` feature. Collects a URL + alt
+ * text (always require alt for WCAG 1.1.1) and inserts an image node.
+ */
+class ImageEditor {
+    data = injectRteOverlayData();
+    src = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    input = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.input()?.nativeElement.focus());
+    }
+    onInsert(event) {
+        event.preventDefault();
+        const src = this.src().trim();
+        if (src)
+            this.data.insert(src, this.alt().trim());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ImageEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: ImageEditor, isStandalone: true, selector: "kj-rte-image-editor", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <form class="kj-rte__overlay-form" (submit)="onInsert($event)">
+      <label class="kj-rte__overlay-label" for="kj-rte-image-src">Image URL</label>
+      <input
+        #input
+        id="kj-rte-image-src"
+        class="kj-rte__overlay-input"
+        type="url"
+        placeholder="https://example.com/photo.jpg"
+        [value]="src()"
+        (input)="src.set($any($event.target).value)"
+        (keydown.escape)="data.close()"
+      />
+      <label class="kj-rte__overlay-label" for="kj-rte-image-alt">Alt text</label>
+      <input
+        id="kj-rte-image-alt"
+        class="kj-rte__overlay-input"
+        type="text"
+        placeholder="Describe the image"
+        [value]="alt()"
+        (input)="alt.set($any($event.target).value)"
+        (keydown.escape)="data.close()"
+      />
+      <div class="kj-rte__overlay-actions">
+        <button type="submit" class="kj-rte__overlay-btn" [disabled]="!src().trim()">Insert</button>
+        <button type="button" class="kj-rte__overlay-btn" (click)="data.close()">Cancel</button>
+      </div>
+    </form>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ImageEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kj-rte-image-editor',
+                    standalone: true,
+                    template: `
+    <form class="kj-rte__overlay-form" (submit)="onInsert($event)">
+      <label class="kj-rte__overlay-label" for="kj-rte-image-src">Image URL</label>
+      <input
+        #input
+        id="kj-rte-image-src"
+        class="kj-rte__overlay-input"
+        type="url"
+        placeholder="https://example.com/photo.jpg"
+        [value]="src()"
+        (input)="src.set($any($event.target).value)"
+        (keydown.escape)="data.close()"
+      />
+      <label class="kj-rte__overlay-label" for="kj-rte-image-alt">Alt text</label>
+      <input
+        id="kj-rte-image-alt"
+        class="kj-rte__overlay-input"
+        type="text"
+        placeholder="Describe the image"
+        [value]="alt()"
+        (input)="alt.set($any($event.target).value)"
+        (keydown.escape)="data.close()"
+      />
+      <div class="kj-rte__overlay-actions">
+        <button type="submit" class="kj-rte__overlay-btn" [disabled]="!src().trim()">Insert</button>
+        <button type="button" class="kj-rte__overlay-btn" (click)="data.close()">Cancel</button>
+      </div>
+    </form>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+/**
+ * Image feature. Lazily loads core `lexical` and builds a self-rendering image
+ * node via `createKjImageNode`. Contributes a toolbar button + the image-editor
+ * overlay (which collects URL + alt text).
+ */
+function image() {
+    let api;
+    return {
+        name: 'image',
+        async load() {
+            const lex = await import('lexical');
+            api = createKjImageNode(lex);
+        },
+        nodes: () => [api.Node],
+        toolbar: [
+            {
+                id: 'image',
+                group: 'insert',
+                order: 10,
+                icon: 'image',
+                label: 'Image',
+                kind: 'button',
+                run: (ctx) => ctx.openOverlay('image', {
+                    insert: (src, alt) => {
+                        ctx.insertNodes(() => [api.$create({ src, alt })]);
+                        ctx.closeOverlay();
+                        ctx.focus();
+                        ctx.announce('Image inserted');
+                    },
+                    close: () => {
+                        ctx.closeOverlay();
+                        ctx.focus();
+                    },
+                }),
+            },
+        ],
+        overlay: [{ id: 'image', label: 'Insert image', component: ImageEditor }],
+    };
+}
+
+/**
+ * Markdown shortcuts (`# `, `- `, `1. `, `> `, `` ``` ``, `**bold**`, …). Lazily
+ * loads `@lexical/markdown`. No toolbar UI — it's a typing behaviour.
+ */
+function markdownShortcuts() {
+    let mod;
+    return {
+        name: 'markdown-shortcuts',
+        async load() {
+            mod = await import('@lexical/markdown');
+        },
+        setup: (ctx) => mod.registerMarkdownShortcuts(ctx.editor, mod.TRANSFORMERS),
+    };
+}
+
+/**
+ * Undo/redo history. Lazily loads `@lexical/history` and contributes undo/redo
+ * toolbar buttons (disabled until the respective action is available).
+ */
+function history() {
+    let mod;
+    return {
+        name: 'history',
+        async load() {
+            mod = await import('@lexical/history');
+        },
+        setup: (ctx) => mod.registerHistory(ctx.editor, mod.createEmptyHistoryState(), 300),
+        toolbar: [
+            {
+                id: 'undo',
+                group: 'history',
+                order: 0,
+                icon: 'undo',
+                label: 'Undo',
+                ariaKeyshortcuts: 'Control+Z',
+                kind: 'button',
+                isDisabled: (state) => !state.canUndo,
+                run: (ctx) => ctx.undo(),
+            },
+            {
+                id: 'redo',
+                group: 'history',
+                order: 1,
+                icon: 'redo',
+                label: 'Redo',
+                ariaKeyshortcuts: 'Control+Shift+Z',
+                kind: 'button',
+                isDisabled: (state) => !state.canRedo,
+                run: (ctx) => ctx.redo(),
+            },
+        ],
+    };
+}
+
+/**
+ * The full default feature bundle, so a zero-config `<kj-rich-text-editor>`
+ * still gives a complete editor. Compose your own subset with the individual
+ * factories to load only the packages you need.
+ */
+function defaultFeatures() {
+    return [
+        bold(),
+        italic(),
+        underline(),
+        strike(),
+        inlineCode(),
+        heading(),
+        bulletList(),
+        orderedList(),
+        quote(),
+        codeBlock(),
+        link(),
+        image(),
+        markdownShortcuts(),
+        history(),
+    ];
+}
+
+let kjRteUid = 0;
+/**
+ * Styled, accessible rich-text editor composing the headless
+ * {@link KjRichTextEditor} core directive with a **dynamic** `role="toolbar"`
+ * that renders whatever the active features contribute (sorted by group then
+ * order) — no hardcoded buttons. Feature overlays (link/image editors) render in
+ * an accessible `role="dialog"` popover.
+ *
+ * Zero-config gives the full editor via {@link defaultFeatures}; pass a subset to
+ * `kjFeatures` (or `provideKjRichText(...)`) to load only the packages you need.
+ *
+ * @example
+ * ```html
+ * <kj-rich-text-editor kjLabel="Message" [(kjValue)]="html" />
+ * <kj-rich-text-editor [kjFeatures]="[bold(), italic(), link()]" />
+ * ```
+ * @doc-category Library/Forms
+ * @doc
+ * @doc-name rich-text-editor
+ * @doc-is-main
+ * @doc-description Accessible, feature-composed rich-text editor wrapping Lexical with a dynamic toolbar.
+ * @doc-example Default [full]
+ *   The full editor: the toolbar renders every default feature's contribution.
+ *   @doc-file rich-text-editor.example.ts
+ * @doc-example Minimal (subset of features) [full]
+ *   Only bold, italic and link — the toolbar and loaded packages shrink to match.
+ *   @doc-file rich-text-editor.minimal.example.ts
+ * @doc-example Custom feature [full]
+ *   A feature contributing its own toolbar button + node in a few lines.
+ *   @doc-file rich-text-editor.custom-node.example.ts
+ * @doc-example Readonly [full]
+ *   Renders existing content without editing affordances.
+ *   @doc-file rich-text-editor.readonly.example.ts
+ * @doc-aria role="textbox" — the editable surface, with aria-multiline="true".
+ * @doc-aria role="toolbar" — the formatting controls, arrow-key navigable.
+ * @doc-a11y Toggle items expose aria-pressed; feature actions announce via an aria-live region.
+ * @doc-css-var --kj-rte-bg — Editor background.
+ * @doc-css-var --kj-rte-border-color — Border colour.
+ * @doc-css-var --kj-rte-radius — Corner radius.
+ * @doc-css-var --kj-rte-min-height — Minimum height of the editable area.
+ * @doc-related input,form,field
+ */
+class KjRichTextEditorComponent {
+    env = inject(EnvironmentInjector);
+    /** Active features. Defaults to the full {@link defaultFeatures} bundle. */
+    kjFeatures = input(defaultFeatures(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjFeatures" }] : /* istanbul ignore next */ []));
+    /** Initial HTML content. */
+    kjValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the editable region (ignored when `kjLabelledBy` is set). */
+    kjLabel = input('Rich text editor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLabel" }] : /* istanbul ignore next */ []));
+    /** ID of an external element that labels the editable region. */
+    kjLabelledBy = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown while the editor is empty. */
+    kjPlaceholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Render read-only (non-editable) content. */
+    kjReadonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjReadonly" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the toolbar. */
+    kjToolbarLabel = input('Formatting', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjToolbarLabel" }] : /* istanbul ignore next */ []));
+    /** Whether the formatting toolbar is shown. */
+    kjShowToolbar = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjShowToolbar" }] : /* istanbul ignore next */ []));
+    /** Emits the serialized HTML whenever the content changes. */
+    valueChange = output();
+    /** Emits the plain text whenever the content changes. */
+    textChange = output();
+    /** Emits the Lexical serialized state whenever the content changes. */
+    jsonChange = output();
+    /** @internal Stable id used for aria-controls / labelledby wiring. */
+    contentId = `kj-rte-${kjRteUid++}`;
+    live = viewChild(KjLiveRegion, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []));
+    overlayInjectors = new WeakMap();
+    /** Run a toolbar item and announce toggle state changes to AT. */
+    onRun(ed, item) {
+        ed.runItem(item);
+        if (item.kind === 'toggle') {
+            this.announce(`${item.label} ${ed.itemActive(item) ? 'on' : 'off'}`);
+        }
+    }
+    /** Announce a message via the live region (also handles feature announcements). */
+    announce(message) {
+        this.live()?.announce(message);
+    }
+    /** Injector that exposes the overlay's data via KJ_RTE_OVERLAY_DATA. */
+    overlayInjector(active) {
+        const key = (active.data ?? active);
+        let injector = this.overlayInjectors.get(key);
+        if (!injector) {
+            injector = Injector.create({
+                parent: this.env,
+                providers: [{ provide: KJ_RTE_OVERLAY_DATA, useValue: active.data }],
+            });
+            this.overlayInjectors.set(key, injector);
+        }
+        return injector;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjRichTextEditorComponent, isStandalone: true, selector: "kj-rich-text-editor", inputs: { kjFeatures: { classPropertyName: "kjFeatures", publicName: "kjFeatures", isSignal: true, isRequired: false, transformFunction: null }, kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjLabel: { classPropertyName: "kjLabel", publicName: "kjLabel", isSignal: true, isRequired: false, transformFunction: null }, kjLabelledBy: { classPropertyName: "kjLabelledBy", publicName: "kjLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, kjPlaceholder: { classPropertyName: "kjPlaceholder", publicName: "kjPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, kjReadonly: { classPropertyName: "kjReadonly", publicName: "kjReadonly", isSignal: true, isRequired: false, transformFunction: null }, kjToolbarLabel: { classPropertyName: "kjToolbarLabel", publicName: "kjToolbarLabel", isSignal: true, isRequired: false, transformFunction: null }, kjShowToolbar: { classPropertyName: "kjShowToolbar", publicName: "kjShowToolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", textChange: "textChange", jsonChange: "jsonChange" }, host: { classAttribute: "kj-rte" }, viewQueries: [{ propertyName: "live", first: true, predicate: KjLiveRegion, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (kjShowToolbar()) {
+      <div
+        class="kj-rte__toolbar"
+        role="toolbar"
+        [attr.aria-label]="kjToolbarLabel()"
+        [attr.aria-controls]="contentId"
+        kjRovingTabindex
+        kjRovingOrientation="horizontal"
+      >
+        @for (grp of ed.toolbarGroups(); track grp.group; let firstGroup = $first) {
+          @if (!firstGroup) {
+            <span class="kj-rte__sep" role="separator" aria-orientation="vertical"></span>
+          }
+          <div class="kj-rte__group" role="group" [attr.aria-label]="grp.group">
+            @for (item of grp.items; track item.id) {
+              <button
+                type="button"
+                class="kj-rte__btn"
+                kjRovingTabindexItem
+                [attr.aria-label]="item.label"
+                [title]="item.label"
+                [attr.aria-keyshortcuts]="item.ariaKeyshortcuts || null"
+                [class.kj-rte__btn--active]="ed.itemActive(item)"
+                [attr.aria-pressed]="item.kind === 'toggle' ? ed.itemActive(item) : null"
+                [disabled]="ed.itemDisabled(item)"
+                (mousedown)="$event.preventDefault()"
+                (click)="onRun(ed, item)"
+              >
+                <i [kjIcon]="item.icon" aria-hidden="true"></i>
+              </button>
+            }
+          </div>
+        }
+      </div>
+
+      @if (ed.activeOverlay(); as ov) {
+        <div class="kj-rte__overlay" role="dialog" [attr.aria-label]="ov.overlay.label">
+          <ng-container
+            *ngComponentOutlet="ov.overlay.component; injector: overlayInjector(ov)"
+          />
+        </div>
+      }
+    }
+
+    <div
+      #ed="kjRichTextEditor"
+      [id]="contentId"
+      class="kj-rte__content"
+      kjRichTextEditor
+      [kjFeatures]="kjFeatures()"
+      [kjValue]="kjValue()"
+      [kjReadonly]="kjReadonly()"
+      [attr.aria-label]="kjLabelledBy() ? null : kjLabel()"
+      [attr.aria-labelledby]="kjLabelledBy() || null"
+      [attr.data-placeholder]="kjPlaceholder() || null"
+      (valueChange)="valueChange.emit($event)"
+      (textChange)="textChange.emit($event)"
+      (jsonChange)="jsonChange.emit($event)"
+      (announce)="announce($event)"
+    ></div>
+
+    <div class="kj-rte__sr" kjLiveRegion aria-live="polite"></div>
+  `, isInline: true, styles: ["@layer kj.component{.kj-rte{--kj-rte-bg: var(--kj-bg-field);--kj-rte-fg: var(--kj-fg-default);--kj-rte-muted-fg: var(--kj-fg-muted);--kj-rte-border-color: var(--kj-border-default);--kj-rte-radius: var(--kj-radius-field);--kj-rte-toolbar-bg: var(--kj-bg-surface, var(--kj-bg-body));--kj-rte-btn-size: 2.75rem;--kj-rte-accent: var(--kj-bg-primary);--kj-rte-accent-fg: var(--kj-fg-on-primary);--kj-rte-min-height: 12rem;--kj-rte-pad: var(--kj-space-md);--kj-rte-font: var(--kj-font-sans);--kj-rte-mono: var(--kj-font-mono, ui-monospace, monospace);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;background:var(--kj-rte-bg);color:var(--kj-rte-fg);border:var(--kj-border) solid var(--kj-rte-border-color);border-radius:var(--kj-rte-radius);font-family:var(--kj-rte-font);overflow:hidden}.kj-rte:focus-within{outline:2px solid var(--kj-rte-accent);outline-offset:1px;border-color:var(--kj-border-focus, var(--kj-rte-accent))}.kj-rte__toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--kj-space-xs, .25rem);padding:var(--kj-space-sm);background:var(--kj-rte-toolbar-bg);border-bottom:var(--kj-border) solid var(--kj-rte-border-color);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--kj-rte-border-color) transparent}.kj-rte__toolbar::-webkit-scrollbar{height:.5rem}.kj-rte__toolbar::-webkit-scrollbar-thumb{background:var(--kj-rte-border-color);border-radius:.25rem}.kj-rte__toolbar::-webkit-scrollbar-track{background:transparent}.kj-rte__group{display:flex;align-items:center;gap:var(--kj-space-xs, .25rem)}.kj-rte__group,.kj-rte__sep,.kj-rte__btn{flex:0 0 auto}.kj-rte__sep{width:1px;align-self:stretch;min-height:1.5rem;margin:0 var(--kj-space-xs, .25rem);background:var(--kj-rte-border-color)}.kj-rte__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--kj-rte-btn-size);min-height:var(--kj-rte-btn-size);padding:0 var(--kj-space-sm);color:var(--kj-rte-fg);background:transparent;border:var(--kj-border) solid transparent;border-radius:var(--kj-radius-field);cursor:pointer;transition:var(--kj-transition, background-color .15s ease, color .15s ease)}.kj-rte__btn:hover:not(:disabled){background:var(--kj-bg-subtle, var(--kj-bg-body))}.kj-rte__btn:focus-visible{outline:2px solid var(--kj-rte-accent);outline-offset:2px}.kj-rte__btn--active{background:color-mix(in srgb,var(--kj-rte-accent) 16%,transparent);border-color:color-mix(in srgb,var(--kj-rte-accent) 40%,transparent);color:var(--kj-rte-accent)}.kj-rte__btn:disabled{opacity:.45;cursor:not-allowed}.kj-rte__overlay{position:relative;z-index:1;padding:var(--kj-space-sm) var(--kj-rte-pad);background:var(--kj-rte-toolbar-bg);border-bottom:var(--kj-border) solid var(--kj-rte-border-color);box-shadow:0 6px 16px #0000001f}.kj-rte__overlay-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kj-space-sm)}.kj-rte__overlay-label{font-size:var(--kj-text-sm);color:var(--kj-rte-muted-fg)}.kj-rte__overlay-input{flex:1 1 12rem;min-height:2.25rem;padding:var(--kj-space-sm) var(--kj-space-md);color:var(--kj-rte-fg);background:var(--kj-bg-field);border:var(--kj-border) solid var(--kj-rte-border-color);border-radius:var(--kj-radius-field);font:var(--kj-text-sm) / 1.4 var(--kj-rte-font)}.kj-rte__overlay-input:focus-visible{outline:2px solid var(--kj-rte-accent);outline-offset:1px}.kj-rte__overlay-actions{display:flex;gap:var(--kj-space-sm)}.kj-rte__overlay-btn{min-height:2.25rem;padding:0 var(--kj-space-md);color:var(--kj-rte-fg);background:transparent;border:var(--kj-border) solid var(--kj-rte-border-color);border-radius:var(--kj-radius-field);cursor:pointer}.kj-rte__overlay-btn:hover:not(:disabled){background:var(--kj-bg-subtle, var(--kj-bg-body))}.kj-rte__overlay-btn:focus-visible{outline:2px solid var(--kj-rte-accent);outline-offset:2px}.kj-rte__overlay-btn:disabled{opacity:.45;cursor:not-allowed}.kj-rte__content{flex:1 1 auto;min-width:0;min-height:var(--kj-rte-min-height);padding:var(--kj-rte-pad);outline:none;overflow-y:auto;overflow-wrap:anywhere;line-height:1.6;color:var(--kj-rte-fg)}.kj-rte__content[data-empty][data-placeholder]:before{content:attr(data-placeholder);color:var(--kj-rte-muted-fg);pointer-events:none}.kj-rte__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-rte .kj-rte-paragraph{margin:0 0 var(--kj-space-sm)}.kj-rte .kj-rte-h1{margin:0 0 var(--kj-space-sm);font-size:var(--kj-text-2xl, 1.75rem);font-weight:700;line-height:1.25}.kj-rte .kj-rte-h2{margin:0 0 var(--kj-space-sm);font-size:var(--kj-text-xl, 1.4rem);font-weight:700;line-height:1.3}.kj-rte .kj-rte-h3{margin:0 0 var(--kj-space-sm);font-size:var(--kj-text-lg, 1.2rem);font-weight:600;line-height:1.35}.kj-rte .kj-rte-ul,.kj-rte .kj-rte-ol{margin:0 0 var(--kj-space-sm);padding-left:1.5rem}.kj-rte .kj-rte-ul{list-style:disc}.kj-rte .kj-rte-ol{list-style:decimal}.kj-rte .kj-rte-li{margin-bottom:.25rem}.kj-rte .kj-rte-quote{margin:0 0 var(--kj-space-sm);padding-left:var(--kj-space-md);border-left:3px solid var(--kj-rte-border-color);color:var(--kj-rte-muted-fg);font-style:italic}.kj-rte .kj-rte-link{color:var(--kj-rte-accent);text-decoration:underline;text-underline-offset:2px}.kj-rte .kj-rte-bold{font-weight:700}.kj-rte .kj-rte-italic{font-style:italic}.kj-rte .kj-rte-underline{text-decoration:underline}.kj-rte .kj-rte-strikethrough{text-decoration:line-through}.kj-rte .kj-rte-code{padding:.1em .35em;background:var(--kj-bg-subtle, var(--kj-bg-body));border-radius:.25rem;font-family:var(--kj-rte-mono);font-size:.9em}.kj-rte .kj-rte-code-block{display:block;margin:0 0 var(--kj-space-sm);padding:var(--kj-space-md);background:var(--kj-bg-subtle, var(--kj-bg-body));border-radius:var(--kj-radius-field);font-family:var(--kj-rte-mono);font-size:.9em;white-space:pre-wrap;overflow-x:auto}.kj-rte .kj-rte-image{margin:var(--kj-space-sm) 0}.kj-rte .kj-rte-image img{max-width:100%;height:auto;border-radius:var(--kj-radius-field)}@media(prefers-reduced-motion:reduce){.kj-rte__btn,.kj-rte{transition:none}}}\n"], dependencies: [{ kind: "directive", type: KjRichTextEditor, selector: "[kjRichTextEditor]", inputs: ["kjValue", "kjFeatures", "kjExtensions", "kjPlugins", "kjReadonly", "kjSpellcheck", "kjNamespace"], outputs: ["valueChange", "textChange", "jsonChange", "announce"], exportAs: ["kjRichTextEditor"] }, { kind: "directive", type: KjRovingTabindex, selector: "[kjRovingTabindex]", inputs: ["kjRovingOrientation"] }, { kind: "directive", type: KjRovingTabindexItemDirective, selector: "[kjRovingTabindexItem]" }, { kind: "directive", type: KjLiveRegion, selector: "[kjLiveRegion]", inputs: ["kjPoliteness"], exportAs: ["kjLiveRegion"] }, { kind: "directive", type: KjIconDirective, selector: "span[kjIcon], i[kjIcon]", inputs: ["kjIcon", "kjIconLabel", "kjIconColor", "kjIconSize"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-rich-text-editor', standalone: true, imports: [
+                        KjRichTextEditor,
+                        KjRovingTabindex,
+                        KjRovingTabindexItemDirective,
+                        KjLiveRegion,
+                        KjIconDirective,
+                        NgComponentOutlet,
+                    ], host: { class: 'kj-rte' }, template: `
+    @if (kjShowToolbar()) {
+      <div
+        class="kj-rte__toolbar"
+        role="toolbar"
+        [attr.aria-label]="kjToolbarLabel()"
+        [attr.aria-controls]="contentId"
+        kjRovingTabindex
+        kjRovingOrientation="horizontal"
+      >
+        @for (grp of ed.toolbarGroups(); track grp.group; let firstGroup = $first) {
+          @if (!firstGroup) {
+            <span class="kj-rte__sep" role="separator" aria-orientation="vertical"></span>
+          }
+          <div class="kj-rte__group" role="group" [attr.aria-label]="grp.group">
+            @for (item of grp.items; track item.id) {
+              <button
+                type="button"
+                class="kj-rte__btn"
+                kjRovingTabindexItem
+                [attr.aria-label]="item.label"
+                [title]="item.label"
+                [attr.aria-keyshortcuts]="item.ariaKeyshortcuts || null"
+                [class.kj-rte__btn--active]="ed.itemActive(item)"
+                [attr.aria-pressed]="item.kind === 'toggle' ? ed.itemActive(item) : null"
+                [disabled]="ed.itemDisabled(item)"
+                (mousedown)="$event.preventDefault()"
+                (click)="onRun(ed, item)"
+              >
+                <i [kjIcon]="item.icon" aria-hidden="true"></i>
+              </button>
+            }
+          </div>
+        }
+      </div>
+
+      @if (ed.activeOverlay(); as ov) {
+        <div class="kj-rte__overlay" role="dialog" [attr.aria-label]="ov.overlay.label">
+          <ng-container
+            *ngComponentOutlet="ov.overlay.component; injector: overlayInjector(ov)"
+          />
+        </div>
+      }
+    }
+
+    <div
+      #ed="kjRichTextEditor"
+      [id]="contentId"
+      class="kj-rte__content"
+      kjRichTextEditor
+      [kjFeatures]="kjFeatures()"
+      [kjValue]="kjValue()"
+      [kjReadonly]="kjReadonly()"
+      [attr.aria-label]="kjLabelledBy() ? null : kjLabel()"
+      [attr.aria-labelledby]="kjLabelledBy() || null"
+      [attr.data-placeholder]="kjPlaceholder() || null"
+      (valueChange)="valueChange.emit($event)"
+      (textChange)="textChange.emit($event)"
+      (jsonChange)="jsonChange.emit($event)"
+      (announce)="announce($event)"
+    ></div>
+
+    <div class="kj-rte__sr" kjLiveRegion aria-live="polite"></div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-rte{--kj-rte-bg: var(--kj-bg-field);--kj-rte-fg: var(--kj-fg-default);--kj-rte-muted-fg: var(--kj-fg-muted);--kj-rte-border-color: var(--kj-border-default);--kj-rte-radius: var(--kj-radius-field);--kj-rte-toolbar-bg: var(--kj-bg-surface, var(--kj-bg-body));--kj-rte-btn-size: 2.75rem;--kj-rte-accent: var(--kj-bg-primary);--kj-rte-accent-fg: var(--kj-fg-on-primary);--kj-rte-min-height: 12rem;--kj-rte-pad: var(--kj-space-md);--kj-rte-font: var(--kj-font-sans);--kj-rte-mono: var(--kj-font-mono, ui-monospace, monospace);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;box-sizing:border-box;background:var(--kj-rte-bg);color:var(--kj-rte-fg);border:var(--kj-border) solid var(--kj-rte-border-color);border-radius:var(--kj-rte-radius);font-family:var(--kj-rte-font);overflow:hidden}.kj-rte:focus-within{outline:2px solid var(--kj-rte-accent);outline-offset:1px;border-color:var(--kj-border-focus, var(--kj-rte-accent))}.kj-rte__toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--kj-space-xs, .25rem);padding:var(--kj-space-sm);background:var(--kj-rte-toolbar-bg);border-bottom:var(--kj-border) solid var(--kj-rte-border-color);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--kj-rte-border-color) transparent}.kj-rte__toolbar::-webkit-scrollbar{height:.5rem}.kj-rte__toolbar::-webkit-scrollbar-thumb{background:var(--kj-rte-border-color);border-radius:.25rem}.kj-rte__toolbar::-webkit-scrollbar-track{background:transparent}.kj-rte__group{display:flex;align-items:center;gap:var(--kj-space-xs, .25rem)}.kj-rte__group,.kj-rte__sep,.kj-rte__btn{flex:0 0 auto}.kj-rte__sep{width:1px;align-self:stretch;min-height:1.5rem;margin:0 var(--kj-space-xs, .25rem);background:var(--kj-rte-border-color)}.kj-rte__btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--kj-rte-btn-size);min-height:var(--kj-rte-btn-size);padding:0 var(--kj-space-sm);color:var(--kj-rte-fg);background:transparent;border:var(--kj-border) solid transparent;border-radius:var(--kj-radius-field);cursor:pointer;transition:var(--kj-transition, background-color .15s ease, color .15s ease)}.kj-rte__btn:hover:not(:disabled){background:var(--kj-bg-subtle, var(--kj-bg-body))}.kj-rte__btn:focus-visible{outline:2px solid var(--kj-rte-accent);outline-offset:2px}.kj-rte__btn--active{background:color-mix(in srgb,var(--kj-rte-accent) 16%,transparent);border-color:color-mix(in srgb,var(--kj-rte-accent) 40%,transparent);color:var(--kj-rte-accent)}.kj-rte__btn:disabled{opacity:.45;cursor:not-allowed}.kj-rte__overlay{position:relative;z-index:1;padding:var(--kj-space-sm) var(--kj-rte-pad);background:var(--kj-rte-toolbar-bg);border-bottom:var(--kj-border) solid var(--kj-rte-border-color);box-shadow:0 6px 16px #0000001f}.kj-rte__overlay-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kj-space-sm)}.kj-rte__overlay-label{font-size:var(--kj-text-sm);color:var(--kj-rte-muted-fg)}.kj-rte__overlay-input{flex:1 1 12rem;min-height:2.25rem;padding:var(--kj-space-sm) var(--kj-space-md);color:var(--kj-rte-fg);background:var(--kj-bg-field);border:var(--kj-border) solid var(--kj-rte-border-color);border-radius:var(--kj-radius-field);font:var(--kj-text-sm) / 1.4 var(--kj-rte-font)}.kj-rte__overlay-input:focus-visible{outline:2px solid var(--kj-rte-accent);outline-offset:1px}.kj-rte__overlay-actions{display:flex;gap:var(--kj-space-sm)}.kj-rte__overlay-btn{min-height:2.25rem;padding:0 var(--kj-space-md);color:var(--kj-rte-fg);background:transparent;border:var(--kj-border) solid var(--kj-rte-border-color);border-radius:var(--kj-radius-field);cursor:pointer}.kj-rte__overlay-btn:hover:not(:disabled){background:var(--kj-bg-subtle, var(--kj-bg-body))}.kj-rte__overlay-btn:focus-visible{outline:2px solid var(--kj-rte-accent);outline-offset:2px}.kj-rte__overlay-btn:disabled{opacity:.45;cursor:not-allowed}.kj-rte__content{flex:1 1 auto;min-width:0;min-height:var(--kj-rte-min-height);padding:var(--kj-rte-pad);outline:none;overflow-y:auto;overflow-wrap:anywhere;line-height:1.6;color:var(--kj-rte-fg)}.kj-rte__content[data-empty][data-placeholder]:before{content:attr(data-placeholder);color:var(--kj-rte-muted-fg);pointer-events:none}.kj-rte__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.kj-rte .kj-rte-paragraph{margin:0 0 var(--kj-space-sm)}.kj-rte .kj-rte-h1{margin:0 0 var(--kj-space-sm);font-size:var(--kj-text-2xl, 1.75rem);font-weight:700;line-height:1.25}.kj-rte .kj-rte-h2{margin:0 0 var(--kj-space-sm);font-size:var(--kj-text-xl, 1.4rem);font-weight:700;line-height:1.3}.kj-rte .kj-rte-h3{margin:0 0 var(--kj-space-sm);font-size:var(--kj-text-lg, 1.2rem);font-weight:600;line-height:1.35}.kj-rte .kj-rte-ul,.kj-rte .kj-rte-ol{margin:0 0 var(--kj-space-sm);padding-left:1.5rem}.kj-rte .kj-rte-ul{list-style:disc}.kj-rte .kj-rte-ol{list-style:decimal}.kj-rte .kj-rte-li{margin-bottom:.25rem}.kj-rte .kj-rte-quote{margin:0 0 var(--kj-space-sm);padding-left:var(--kj-space-md);border-left:3px solid var(--kj-rte-border-color);color:var(--kj-rte-muted-fg);font-style:italic}.kj-rte .kj-rte-link{color:var(--kj-rte-accent);text-decoration:underline;text-underline-offset:2px}.kj-rte .kj-rte-bold{font-weight:700}.kj-rte .kj-rte-italic{font-style:italic}.kj-rte .kj-rte-underline{text-decoration:underline}.kj-rte .kj-rte-strikethrough{text-decoration:line-through}.kj-rte .kj-rte-code{padding:.1em .35em;background:var(--kj-bg-subtle, var(--kj-bg-body));border-radius:.25rem;font-family:var(--kj-rte-mono);font-size:.9em}.kj-rte .kj-rte-code-block{display:block;margin:0 0 var(--kj-space-sm);padding:var(--kj-space-md);background:var(--kj-bg-subtle, var(--kj-bg-body));border-radius:var(--kj-radius-field);font-family:var(--kj-rte-mono);font-size:.9em;white-space:pre-wrap;overflow-x:auto}.kj-rte .kj-rte-image{margin:var(--kj-space-sm) 0}.kj-rte .kj-rte-image img{max-width:100%;height:auto;border-radius:var(--kj-radius-field)}@media(prefers-reduced-motion:reduce){.kj-rte__btn,.kj-rte{transition:none}}}\n"] }]
+        }], propDecorators: { kjFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFeatures", required: false }] }], kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }], kjLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabel", required: false }] }], kjLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabelledBy", required: false }] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjToolbarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjToolbarLabel", required: false }] }], kjShowToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowToolbar", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], textChange: [{ type: i0.Output, args: ["textChange"] }], jsonChange: [{ type: i0.Output, args: ["jsonChange"] }], live: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KjLiveRegion), { isSignal: true }] }] } });
+
 /**
  * Select root. Two-way bind via `[(value)]`.
  *
@@ -10896,6 +13415,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], kjLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabel", required: false }] }] } });
 
+/**
+ * Service-launched **bottom sheet** — a mobile-first, bottom-anchored modal
+ * surface with a grab handle and drag-to-dismiss. Inject `KjSheetService` and
+ * call `open()` with a body component; the sheet slides up from the bottom
+ * edge, traps focus, and locks background scroll. It reuses the same overlay
+ * primitive stack as the drawer and dialog — bottom sheet is the mobile
+ * composition of that engine, not a new one. The wrapper component exists to
+ * host this documentation page.
+ *
+ * @doc
+ * @doc-name sheet
+ * @doc-is-main
+ * @doc-example Default
+ *   A service-launched bottom sheet with a grab handle and drag-to-dismiss.
+ *   @doc-file sheet.example.ts
+ * @doc-example Detents
+ *   `detent` sets the initial resting height — auto / half / full.
+ *   @doc-file sheet.detents.example.ts
+ * @doc-example Scrollable
+ *   A tall body scrolls inside the sheet while the grab handle stays pinned.
+ *   @doc-file sheet.scrollable.example.ts
+ *
+ * @doc-keyboard
+ *   Escape    — Closes the sheet (only the topmost overlay when stacked)
+ *   Enter / Space — Dismisses when the grab handle is focused
+ *   Tab       — Cycles focus within the sheet (focus trap via `tabCycle({ returnFocus: true })`)
+ *   Shift+Tab — Cycles backward
+ *
+ * @doc-aria
+ *   role            — "dialog"; `aria-modal="true"` while the backdrop is active
+ *   aria-label      — Set via the `ariaLabel` option when no heading is projected
+ *   aria-labelledby — Wire to the id of your sheet heading for the accessible name
+ *   data-state      — "open" / "closed" — drives the slide-up transform
+ *   data-kj-detent  — Mirrors the resolved initial height for theming hooks
+ *
+ * @doc-css-var
+ *   --kj-sheet-bg            — Panel background fill. Defaults to --kj-bg-elevated.
+ *   --kj-sheet-fg            — Foreground text color. Defaults to --kj-fg-default.
+ *   --kj-sheet-shadow        — Box shadow off the panel. Defaults to --kj-shadow-lg.
+ *   --kj-sheet-radius        — Top corner radius. Defaults to --kj-radius-box.
+ *   --kj-sheet-max-height    — Cap on the sheet height. Defaults to 92vh.
+ *   --kj-sheet-grip-color    — Grab-handle pill color. Defaults to --kj-border-strong.
+ *
+ * @doc-touch
+ *   The grab handle is a ≥ 44px-tall touch target (WCAG 2.5.5) even though the
+ *   visible grip pill is small. Downward drag past 40% of the sheet height (or
+ *   600 px/s) dismisses. Footer action buttons should use `kj-button`
+ *   `size="lg"` (≥ 44px).
+ *
+ * @doc-a11y
+ *   Focus is trapped inside the sheet while open and returned to the triggering
+ *   element on close (`returnFocus: true`). Siblings outside the sheet are
+ *   marked `inert` while it is open. Stacking is safe — only the topmost overlay
+ *   receives Escape and outside-click. The wrapper does not generate an
+ *   accessible name; provide one via `aria-labelledby` (a visible heading) or
+ *   the `ariaLabel` option. Slide transitions respect
+ *   `prefers-reduced-motion`, falling back to an opacity fade.
+ *
+ * @doc-related drawer,dialog,action-sheet
+ *
+ * @doc-category Library/Overlay
+ */
+class KjSheetComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjSheetComponent, isStandalone: true, selector: "kj-sheet-shell", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-sheet{--kj-sheet-bg: var(--kj-bg-elevated);--kj-sheet-fg: var(--kj-fg-default);--kj-sheet-shadow: var(--kj-shadow-lg);--kj-sheet-radius: var(--kj-radius-box);--kj-sheet-max-height: 92vh;--kj-sheet-grip-color: var(--kj-border-strong);position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-height:var(--kj-sheet-max-height);margin-inline:auto;background:var(--kj-sheet-bg);color:var(--kj-sheet-fg);box-shadow:var(--kj-sheet-shadow);border-top-left-radius:var(--kj-sheet-radius);border-top-right-radius:var(--kj-sheet-radius);overflow:hidden;z-index:1000;transform:translate3d(0,var(--kj-sheet-drag-offset, 0),0);padding-bottom:env(safe-area-inset-bottom,0)}@media(min-width:40rem){.kj-sheet{max-width:32rem;border-bottom-left-radius:var(--kj-sheet-radius);border-bottom-right-radius:var(--kj-sheet-radius);bottom:var(--kj-space-lg)}}.kj-sheet[data-kj-detent=half]{height:50vh}.kj-sheet[data-kj-detent=full]{height:var(--kj-sheet-max-height)}.kj-sheet__handle{appearance:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0;border:0;background:transparent;cursor:grab;flex-shrink:0;touch-action:none}.kj-sheet[data-kj-dragging] .kj-sheet__handle{cursor:grabbing}.kj-sheet__grip{display:block;width:2.25rem;height:.3125rem;border-radius:999px;background:var(--kj-sheet-grip-color)}.kj-sheet__handle:focus-visible{outline:var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, var(--kj-primary));outline-offset:-4px;border-radius:var(--kj-radius-sm)}.kj-sheet__content{flex:1;min-height:0;overflow-y:auto;padding:0 var(--kj-space-xl) var(--kj-space-xl);color:var(--kj-sheet-fg);font:.9375rem / 1.5 var(--kj-font-sans)}@media(prefers-reduced-motion:no-preference){.kj-sheet:not([data-kj-dragging]){transition:transform .26s cubic-bezier(.32,.72,0,1)}.kj-sheet[data-state=open]{transform:translate3d(0,var(--kj-sheet-drag-offset, 0),0)}.kj-sheet[data-state=closed]{transform:translate3d(0,100%,0)}}@media(prefers-reduced-motion:reduce){.kj-sheet:not([data-kj-dragging]){transition:opacity .12s linear}.kj-sheet[data-state=open]{opacity:1}.kj-sheet[data-state=closed]{opacity:0}}.kj-sheet__title{display:block;margin:0 0 var(--kj-space-xs);font:600 1.125rem / 1.3 var(--kj-font-sans);color:var(--kj-fg-default)}.kj-sheet__description{display:block;margin:0 0 var(--kj-space-md);color:var(--kj-fg-muted);font:.875rem / 1.4 var(--kj-font-sans)}.kj-sheet__footer{display:flex;gap:var(--kj-space-sm);padding-top:var(--kj-space-md)}.kj-sheet__footer[data-align=end]{justify-content:flex-end}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-sheet-shell', standalone: true, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-sheet{--kj-sheet-bg: var(--kj-bg-elevated);--kj-sheet-fg: var(--kj-fg-default);--kj-sheet-shadow: var(--kj-shadow-lg);--kj-sheet-radius: var(--kj-radius-box);--kj-sheet-max-height: 92vh;--kj-sheet-grip-color: var(--kj-border-strong);position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-height:var(--kj-sheet-max-height);margin-inline:auto;background:var(--kj-sheet-bg);color:var(--kj-sheet-fg);box-shadow:var(--kj-sheet-shadow);border-top-left-radius:var(--kj-sheet-radius);border-top-right-radius:var(--kj-sheet-radius);overflow:hidden;z-index:1000;transform:translate3d(0,var(--kj-sheet-drag-offset, 0),0);padding-bottom:env(safe-area-inset-bottom,0)}@media(min-width:40rem){.kj-sheet{max-width:32rem;border-bottom-left-radius:var(--kj-sheet-radius);border-bottom-right-radius:var(--kj-sheet-radius);bottom:var(--kj-space-lg)}}.kj-sheet[data-kj-detent=half]{height:50vh}.kj-sheet[data-kj-detent=full]{height:var(--kj-sheet-max-height)}.kj-sheet__handle{appearance:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0;border:0;background:transparent;cursor:grab;flex-shrink:0;touch-action:none}.kj-sheet[data-kj-dragging] .kj-sheet__handle{cursor:grabbing}.kj-sheet__grip{display:block;width:2.25rem;height:.3125rem;border-radius:999px;background:var(--kj-sheet-grip-color)}.kj-sheet__handle:focus-visible{outline:var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, var(--kj-primary));outline-offset:-4px;border-radius:var(--kj-radius-sm)}.kj-sheet__content{flex:1;min-height:0;overflow-y:auto;padding:0 var(--kj-space-xl) var(--kj-space-xl);color:var(--kj-sheet-fg);font:.9375rem / 1.5 var(--kj-font-sans)}@media(prefers-reduced-motion:no-preference){.kj-sheet:not([data-kj-dragging]){transition:transform .26s cubic-bezier(.32,.72,0,1)}.kj-sheet[data-state=open]{transform:translate3d(0,var(--kj-sheet-drag-offset, 0),0)}.kj-sheet[data-state=closed]{transform:translate3d(0,100%,0)}}@media(prefers-reduced-motion:reduce){.kj-sheet:not([data-kj-dragging]){transition:opacity .12s linear}.kj-sheet[data-state=open]{opacity:1}.kj-sheet[data-state=closed]{opacity:0}}.kj-sheet__title{display:block;margin:0 0 var(--kj-space-xs);font:600 1.125rem / 1.3 var(--kj-font-sans);color:var(--kj-fg-default)}.kj-sheet__description{display:block;margin:0 0 var(--kj-space-md);color:var(--kj-fg-muted);font:.875rem / 1.4 var(--kj-font-sans)}.kj-sheet__footer{display:flex;gap:var(--kj-space-sm);padding-top:var(--kj-space-md)}.kj-sheet__footer[data-align=end]{justify-content:flex-end}}\n"] }]
+        }] });
+
 /**
  * Styled wrapper around the headless `KjSkeleton` directive.
  *
@@ -11057,6 +13647,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-skeleton{--kj-skeleton-bg: var(--kj-bg-elevated, color-mix(in oklab, var(--kj-fg-default, #000) 12%, transparent));--kj-skeleton-highlight: var(--kj-bg-surface, color-mix(in oklab, var(--kj-fg-default, #000) 5%, transparent));--kj-skeleton-radius: var(--kj-radius-field, .375rem);--kj-skeleton-line-height: 1em;--kj-skeleton-line-radius: .25rem;--kj-skeleton-shimmer-duration: 1.4s;--kj-skeleton-pulse-duration: 1.6s;display:block;background-color:var(--kj-skeleton-bg);border-radius:var(--kj-skeleton-radius);inline-size:100%;block-size:1rem;overflow:hidden;position:relative}.kj-skeleton[data-shape=circle]{border-radius:50%;aspect-ratio:1 / 1}.kj-skeleton[data-shape=text],.kj-skeleton.kj-skeleton--line{block-size:var(--kj-skeleton-line-height);border-radius:var(--kj-skeleton-line-radius)}.kj-skeleton[data-shape=text-block]{display:flex;flex-direction:column;gap:var(--kj-space-sm, .5rem);background-color:transparent;border-radius:0;inline-size:100%;block-size:auto;overflow:visible}.kj-skeleton[data-animation=shimmer]:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--kj-skeleton-highlight) 50%,transparent 100%);transform:translate(-100%);animation:kj-skeleton-shimmer var(--kj-skeleton-shimmer-duration) linear infinite}.kj-skeleton[data-shape=text-block][data-animation=shimmer]:after{content:none}.kj-skeleton[data-animation=pulse]{animation:kj-skeleton-pulse var(--kj-skeleton-pulse-duration) ease-in-out infinite}.kj-skeleton[data-animation=none]:after{content:none}@keyframes kj-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes kj-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}@media(prefers-reduced-motion:reduce){.kj-skeleton,.kj-skeleton:after{animation:none!important}}}\n"] }]
         }], propDecorators: { kjSkeletonShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSkeletonShape", required: false }] }], kjSkeletonAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSkeletonAnimation", required: false }] }], kjWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjWidth", required: false }] }], kjHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjHeight", required: false }] }], kjLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLines", required: false }] }] } });
 
+/**
+ * Themed "skip to content" link — the styled wrapper around the headless
+ * `KjSkipLink` directive. Implements [WCAG 2.4.1 Bypass
+ * Blocks](https://www.w3.org/TR/WCAG21/#bypass-blocks): a keyboard user's first
+ * Tab reveals it, and Enter jumps focus past the navbar / sidebar to the main
+ * content landmark.
+ *
+ * Place it as the **first focusable element** of the app shell and give the main
+ * landmark a matching `id` (default `main-content`):
+ *
+ * ```html
+ * <kj-skip-link />
+ * <kj-navbar />
+ * <main id="main-content" tabindex="-1"><router-outlet /></main>
+ * ```
+ *
+ * The visible label is projected content and defaults to "Skip to main content".
+ * The link is visually hidden (parked above the viewport) until focused, then
+ * slides into view with a solid high-contrast background so it is legible over
+ * any page chrome.
+ *
+ * @example
+ * ```html
+ * <kj-skip-link />
+ * <kj-skip-link kjTarget="page-body">Skip to article</kj-skip-link>
+ * ```
+ *
+ * @doc-example Default
+ *   The shell-level skip link. Tab into the demo frame to reveal it, then
+ *   activate it to move focus to the demo's main region.
+ *   @doc-file skip-link.example.ts
+ *
+ * @doc-keyboard
+ *   Tab   — Reveals the link when it receives focus (it is the first focusable element)
+ *   Enter — Activates it; keyboard focus moves to the target landmark
+ *
+ * @doc-aria
+ *   role=link   — Native `<a>` semantics; accessible name from the projected label
+ *   href        — Reflects `#<target>` so it works before hydration and is bookmarkable
+ *   tabindex=-1 — Applied to the target on activation so `focus()` lands and the
+ *                 next Tab continues from the content, not the navigation
+ *
+ * @doc-a11y
+ *   Satisfies WCAG 2.4.1 Bypass Blocks. Hidden-until-focused (not
+ *   `display:none`, so it stays in the tab order), fully on-screen and
+ *   high-contrast when focused, and moves real keyboard focus — not just scroll.
+ *
+ * @doc-css-var
+ *   --kj-skip-link-bg      — Background when focused. Defaults to the theme's primary surface.
+ *   --kj-skip-link-fg      — Text color when focused. Pairs with the background for AAA contrast.
+ *   --kj-skip-link-radius  — Corner radius of the focused pill.
+ *   --kj-skip-link-shadow  — Elevation shadow when focused.
+ *   --kj-skip-link-offset  — Inset from the top-left corner when focused.
+ *   --kj-skip-link-z       — Stacking order. Must sit above the navbar and overlays.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name skip-link
+ * @doc-description Themed, focus-moving "skip to main content" link for the app shell (WCAG 2.4.1).
+ * @doc-is-main
+ */
+class KjSkipLinkComponent {
+    /** `id` of the main-content landmark to move focus to. Defaults to `'main-content'`. */
+    kjTarget = input('main-content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjTarget" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSkipLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjSkipLinkComponent, isStandalone: true, selector: "kj-skip-link", inputs: { kjTarget: { classPropertyName: "kjTarget", publicName: "kjTarget", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    <a kjSkipLink class="kj-skip-link" [kjSkipLink]="kjTarget()">
+      <ng-content>Skip to main content</ng-content>
+    </a>
+  `, isInline: true, styles: ["@layer kj.component{.kj-skip-link{--kj-skip-link-bg: var(--kj-bg-primary);--kj-skip-link-fg: var(--kj-fg-on-primary);--kj-skip-link-radius: var(--kj-radius-field, .25rem);--kj-skip-link-shadow: var(--kj-shadow-lg);--kj-skip-link-offset: var(--kj-space-sm, .5rem);--kj-skip-link-z: 1000;position:fixed;top:0;left:var(--kj-skip-link-offset);z-index:var(--kj-skip-link-z);transform:translateY(-150%);transition:transform var(--kj-transition, .15s ease);display:inline-block;padding:.625rem 1rem;min-height:44px;box-sizing:border-box;background:var(--kj-skip-link-bg);color:var(--kj-skip-link-fg);border-radius:var(--kj-skip-link-radius);box-shadow:var(--kj-skip-link-shadow);font:inherit;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap}.kj-skip-link:focus,.kj-skip-link:focus-visible{transform:translateY(var(--kj-skip-link-offset));outline:3px solid var(--kj-fg-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kj-skip-link{transition:none}}}\n"], dependencies: [{ kind: "directive", type: KjSkipLink, selector: "a[kjSkipLink]", inputs: ["kjSkipLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSkipLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-skip-link', standalone: true, imports: [KjSkipLink], template: `
+    <a kjSkipLink class="kj-skip-link" [kjSkipLink]="kjTarget()">
+      <ng-content>Skip to main content</ng-content>
+    </a>
+  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-skip-link{--kj-skip-link-bg: var(--kj-bg-primary);--kj-skip-link-fg: var(--kj-fg-on-primary);--kj-skip-link-radius: var(--kj-radius-field, .25rem);--kj-skip-link-shadow: var(--kj-shadow-lg);--kj-skip-link-offset: var(--kj-space-sm, .5rem);--kj-skip-link-z: 1000;position:fixed;top:0;left:var(--kj-skip-link-offset);z-index:var(--kj-skip-link-z);transform:translateY(-150%);transition:transform var(--kj-transition, .15s ease);display:inline-block;padding:.625rem 1rem;min-height:44px;box-sizing:border-box;background:var(--kj-skip-link-bg);color:var(--kj-skip-link-fg);border-radius:var(--kj-skip-link-radius);box-shadow:var(--kj-skip-link-shadow);font:inherit;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap}.kj-skip-link:focus,.kj-skip-link:focus-visible{transform:translateY(var(--kj-skip-link-offset));outline:3px solid var(--kj-fg-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kj-skip-link{transition:none}}}\n"] }]
+        }], propDecorators: { kjTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTarget", required: false }] }] } });
+
 /**
  * Styled wrapper around the headless `KjSlider` directive family.
  *
@@ -11618,177 +14289,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-speed-dial{--kj-speed-dial-gap: var(--kj-space-md);--kj-speed-dial-edge: var(--kj-space-2xl);--kj-speed-dial-trigger-size: 3.5rem;--kj-speed-dial-action-size: 2.75rem;--kj-speed-dial-shadow: 0 6px 16px rgb(0 0 0 / .18);--kj-speed-dial-stagger: 30ms;--kj-speed-dial-duration: .18s;position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:var(--kj-speed-dial-gap);z-index:100}.kj-speed-dial[data-direction=up]{flex-direction:column-reverse}.kj-speed-dial[data-direction=down]{flex-direction:column}.kj-speed-dial[data-direction=left]{flex-direction:row-reverse}.kj-speed-dial[data-direction=right]{flex-direction:row}.kj-speed-dial[data-position=bottom-right]{position:fixed;right:var(--kj-speed-dial-edge);bottom:var(--kj-speed-dial-edge)}.kj-speed-dial[data-position=bottom-left]{position:fixed;left:var(--kj-speed-dial-edge);bottom:var(--kj-speed-dial-edge)}.kj-speed-dial[data-position=top-right]{position:fixed;right:var(--kj-speed-dial-edge);top:var(--kj-speed-dial-edge)}.kj-speed-dial[data-position=top-left]{position:fixed;left:var(--kj-speed-dial-edge);top:var(--kj-speed-dial-edge)}.kj-speed-dial-trigger{--kj-button-radius: 9999px;--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: var(--kj-speed-dial-shadow);width:var(--kj-speed-dial-trigger-size);height:var(--kj-speed-dial-trigger-size);min-width:var(--kj-speed-dial-trigger-size);flex:0 0 auto}.kj-speed-dial-trigger[data-state=open]>*{transform:rotate(45deg);transition:transform var(--kj-speed-dial-duration) ease}.kj-speed-dial-trigger>*{display:inline-flex;transition:transform var(--kj-speed-dial-duration) ease}.kj-speed-dial-actions{display:inline-flex;gap:var(--kj-speed-dial-gap);align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity var(--kj-speed-dial-duration) ease}.kj-speed-dial-actions[data-direction=up]{flex-direction:column-reverse}.kj-speed-dial-actions[data-direction=down]{flex-direction:column}.kj-speed-dial-actions[data-direction=left]{flex-direction:row-reverse}.kj-speed-dial-actions[data-direction=right]{flex-direction:row}.kj-speed-dial-actions[aria-hidden=true]{visibility:hidden;pointer-events:none}.kj-speed-dial-actions[data-expanded]{opacity:1;visibility:visible;pointer-events:auto}.kj-speed-dial-actions[data-direction=up]>*{transform:translateY(8px)}.kj-speed-dial-actions[data-direction=down]>*{transform:translateY(-8px)}.kj-speed-dial-actions[data-direction=left]>*{transform:translate(8px)}.kj-speed-dial-actions[data-direction=right]>*{transform:translate(-8px)}.kj-speed-dial-actions[data-expanded]>*{transform:translateZ(0);transition:transform var(--kj-speed-dial-duration) ease,opacity var(--kj-speed-dial-duration) ease;transition-delay:calc(var(--kj-speed-dial-stagger) * var(--kj-speed-dial-i, 0))}.kj-speed-dial-actions>*:nth-child(1){--kj-speed-dial-i: 0}.kj-speed-dial-actions>*:nth-child(2){--kj-speed-dial-i: 1}.kj-speed-dial-actions>*:nth-child(3){--kj-speed-dial-i: 2}.kj-speed-dial-actions>*:nth-child(4){--kj-speed-dial-i: 3}.kj-speed-dial-actions>*:nth-child(5){--kj-speed-dial-i: 4}.kj-speed-dial-actions>*:nth-child(6){--kj-speed-dial-i: 5}.kj-speed-dial-action{--kj-button-radius: 9999px;--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: var(--kj-speed-dial-shadow);width:var(--kj-speed-dial-action-size);height:var(--kj-speed-dial-action-size);min-width:var(--kj-speed-dial-action-size);flex:0 0 auto}@media(prefers-reduced-motion:reduce){.kj-speed-dial-trigger>*,.kj-speed-dial-actions,.kj-speed-dial-actions>*{transition:none}.kj-speed-dial-actions>*{transform:none}}}\n"] }]
         }], propDecorators: { kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjCloseOnActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCloseOnActivate", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
 
-/**
- * Styled wrapper around the headless `KjSpinner` directive.
- *
- * Composes `KjSpinner` via `hostDirectives` so the wrapper's host element is
- * *the* spinner — `role="status"`, `aria-live="polite"`, `aria-atomic="true"`,
- * the `aria-label` default ("Loading"), `data-animation`, and
- * `data-reduced-motion` all land on `<kj-spinner>` itself. `kjVariant` and
- * `kjSize` are wrapper-level inputs that the host mirrors to `data-variant` /
- * `data-size` (the directive's own nested `KjVariant` / `KjSize` host
- * directives are not transitively exposed through outer composition, so the
- * wrapper takes over the data-attribute reflection at this layer).
- *
- * The template renders an `aria-hidden` glyph element (the visual shape that
- * theme CSS keyframes drive per `data-animation`) and, when no
- * `aria-labelledby` was authored on the host, a `kjVisuallyHidden` label so
- * AT always finds an accessible name.
- *
- * **Indeterminate-only.** The spinner answers "something is happening" — it
- * has no value model. For "x of y" use Progress Bar; for missing-content
- * placeholders use Skeleton.
- *
- * @example
- * ```html
- * <kj-spinner />
- * <kj-spinner kjVariant="primary" kjSize="lg" kjAnimation="dots" kjAriaLabel="Sending" />
- * ```
- * @doc-example Default
- *   The default playground — `spin` animation, `md` size, neutral variant,
- *   default `aria-label="Loading"`.
- *   @doc-file spinner.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common spinner usages — size, variant,
- *   animation glyph, and inline placement next to copy.
- *   @doc-file spinner.usage.example.ts
- * @doc-example Sizes
- *   `xs` / `sm` / `md` / `lg` presets. There is intentionally no `xl` — that
- *   size almost always wants a determinate Progress Bar instead.
- *   @doc-file spinner.sizes.example.ts
- * @doc-example Variants
- *   `neutral` (inherits `currentColor`), `primary`, `success`, `warning`,
- *   `error`, `info`.
- *   @doc-file spinner.variants.example.ts
- * @doc-example Animations
- *   Animation shape preset — `spin`, `dots`, `bars`, etc. Themes own the
- *   keyframes per value.
- *   @doc-file spinner.animations.example.ts
- * @doc-example Inside a button
- *   Embed the spinner inline next to a label to communicate in-flight work.
- *   @doc-file spinner.in-button.example.ts
- *
- * @doc-keyboard
- *   — — Non-interactive. The spinner is purely a status indicator.
- *
- * @doc-aria
- *   role="status"     — set on the host so AT announces it as a live status region
- *   aria-live         — "polite" so the label is read without interrupting the user
- *   aria-atomic       — "true" so the full label is announced on change
- *   aria-label        — Defaults to "Loading"; override per context (e.g. "Sending")
- *   data-animation    — Mirrors the resolved animation for theme hooks
- *   data-variant      — Mirrors the resolved variant for theme hooks
- *   data-size         — Mirrors the resolved size for theme hooks
- *
- * @doc-touch
- *   — — Non-interactive; no touch target required.
- *
- * @doc-a11y
- *   Indeterminate-only — answers "something is happening", with no value model.
- *   Honours `prefers-reduced-motion` via `data-reduced-motion` on the host, so
- *   themes can swap a calmer animation. When the consumer authors
- *   `aria-labelledby` on the host the wrapper skips the visually-hidden label
- *   to avoid double-naming.
- *
- * @doc-related progress-bar,skeleton,toast
- *
- * @doc-css-var
- *   --kj-spinner-size      — Glyph diameter. Sizes (xs/sm/md/lg) override.
- *   --kj-spinner-color     — Foreground color of the glyph. Variants set this; neutral inherits currentColor.
- *   --kj-spinner-track     — Track/background color for the spin arc.
- *   --kj-spinner-duration  — Base animation duration. Other animations scale off this.
- *
- * @doc-category Library/Feedback
- * @doc
- * @doc-name spinner
- * @doc-description Themed indeterminate loading spinner with variant, size, and animation glyph options.
- * @doc-is-main
- */
-class KjSpinnerComponent {
-    /**
-     * Color preset reflected to `data-variant` on the host. Defaults to
-     * `'neutral'`, which resolves to `currentColor` in shipped themes — so a
-     * spinner inside a coloured surface inherits its parent's text colour.
-     */
-    kjVariant = input('neutral', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
-    /**
-     * Size preset reflected to `data-size` on the host. Defaults to `'md'`.
-     * Sizes ship as `xs | sm | md | lg`; an `xl` is intentionally absent — a
-     * spinner that big almost always wants a determinate Progress Bar instead.
-     */
-    kjSize = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
-    /**
-     * Animation shape preset forwarded to `KjSpinner.kjAnimation` via the
-     * composed host directive. Reflects on the host as `data-animation`.
-     * Themes own the keyframes per value.
-     */
-    kjAnimation = input('spin', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "kjAnimation" }] : /* istanbul ignore next */ []));
-    /**
-     * Accessible name forwarded to `KjSpinner.kjAriaLabel` via the composed
-     * host directive. Default `'Loading'`. Used both as the host's
-     * `aria-label` and as the visually-hidden text rendered inside the
-     * wrapper when no consumer-authored `aria-labelledby` is on the element.
-     */
-    kjAriaLabel = input('Loading', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
-    el = inject(ElementRef);
-    /**
-     * Snapshotted at construction: did the consumer author `aria-labelledby`
-     * directly on `<kj-spinner>`? If so the accessible name is the referenced
-     * element and we must not project a hidden duplicate. Read in the
-     * constructor — by the time the template renders the directive may have
-     * stamped its own attributes on the host.
-     */
-    hasAuthoredLabelledBy;
-    /**
-     * `true` when the consumer did **not** author `aria-labelledby` on the
-     * wrapper — i.e. the spinner's accessible name is its `aria-label`. The
-     * wrapper renders a `kjVisuallyHidden` copy of the label as inner text so
-     * AT that prefers content over `aria-label` (or that announces a
-     * `role="status"` region's body on insertion) still has a name to read.
-     * A consumer-authored `aria-labelledby` opts out of that hidden copy to
-     * avoid double-naming the host.
-     */
-    shouldRenderHiddenLabel = computed(() => !this.hasAuthoredLabelledBy, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shouldRenderHiddenLabel" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.hasAuthoredLabelledBy =
-            this.el.nativeElement.hasAttribute('aria-labelledby');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjSpinnerComponent, isStandalone: true, selector: "kj-spinner", inputs: { kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null }, kjAnimation: { classPropertyName: "kjAnimation", publicName: "kjAnimation", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "kjVariant()", "attr.data-size": "kjSize()" }, classAttribute: "kj-spinner" }, hostDirectives: [{ directive: i1.KjSpinner, inputs: ["kjAnimation", "kjAnimation", "kjAriaLabel", "kjAriaLabel"] }], ngImport: i0, template: `
-    <span class="kj-spinner__glyph" aria-hidden="true"></span>
-    @if (shouldRenderHiddenLabel()) {
-      <span kjVisuallyHidden>{{ kjAriaLabel() }}</span>
-    }
-  `, isInline: true, styles: ["@layer kj.component{.kj-spinner{--kj-spinner-size: 1.25rem;--kj-spinner-color: currentColor;--kj-spinner-track: color-mix(in srgb, currentColor 20%, transparent);--kj-spinner-duration: .7s;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--kj-spinner-size);block-size:var(--kj-spinner-size);color:var(--kj-spinner-color);pointer-events:none}.kj-spinner[data-size=xs]{--kj-spinner-size: .75rem}.kj-spinner[data-size=sm]{--kj-spinner-size: 1rem}.kj-spinner[data-size=md]{--kj-spinner-size: 1.25rem}.kj-spinner[data-size=lg]{--kj-spinner-size: 1.75rem}.kj-spinner[data-variant=neutral]{--kj-spinner-color: currentColor}.kj-spinner[data-variant=primary]{--kj-spinner-color: var(--kj-fg-primary)}.kj-spinner[data-variant=secondary]{--kj-spinner-color: var(--kj-fg-default)}.kj-spinner[data-variant=success]{--kj-spinner-color: var(--kj-fg-success, #16a34a)}.kj-spinner[data-variant=warning]{--kj-spinner-color: var(--kj-fg-warning, #d97706)}.kj-spinner[data-variant=error]{--kj-spinner-color: var(--kj-fg-danger, #dc2626)}.kj-spinner[data-variant=info]{--kj-spinner-color: var(--kj-fg-info, #2563eb)}.kj-spinner__glyph{display:inline-block;inline-size:100%;block-size:100%}.kj-spinner[data-animation=spin] .kj-spinner__glyph{border:2px solid var(--kj-spinner-track);border-block-start-color:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-spin var(--kj-spinner-duration) linear infinite}.kj-spinner[data-animation=pulse] .kj-spinner__glyph{background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-pulse calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots]{inline-size:auto}.kj-spinner[data-animation=dots] .kj-spinner__glyph{display:inline-flex;gap:calc(var(--kj-spinner-size) * .25);inline-size:auto;block-size:100%}.kj-spinner[data-animation=dots] .kj-spinner__glyph:before,.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .3);block-size:calc(var(--kj-spinner-size) * .3);background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-dots calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots] .kj-spinner__glyph{background:transparent}.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-animation=bars]{inline-size:auto}.kj-spinner[data-animation=bars] .kj-spinner__glyph{display:inline-flex;align-items:stretch;gap:calc(var(--kj-spinner-size) * .15);inline-size:auto;block-size:100%}.kj-spinner[data-animation=bars] .kj-spinner__glyph:before,.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .2);background:var(--kj-spinner-color);border-radius:calc(var(--kj-spinner-size) * .05);animation:kj-spinner-bars calc(var(--kj-spinner-duration) * 1.6) ease-in-out infinite;transform-origin:center}.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:before,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:after{animation:kj-spinner-reduced-motion 1.6s ease-in-out infinite!important}}@keyframes kj-spinner-spin{to{transform:rotate(360deg)}}@keyframes kj-spinner-pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes kj-spinner-dots{0%,80%,to{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}@keyframes kj-spinner-bars{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes kj-spinner-reduced-motion{0%,to{opacity:.45}50%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: KjVisuallyHidden, selector: "[kjVisuallyHidden]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kj-spinner', standalone: true, imports: [KjVisuallyHidden], hostDirectives: [
-                        {
-                            directive: KjSpinner,
-                            // KjSpinner's own surface — kjVariant + kjSize live on its nested
-                            // KjVariant / KjSize and are not surfaced through this outer
-                            // composition; they are re-exposed as wrapper inputs below and wired
-                            // straight to the host's data-variant / data-size attributes.
-                            inputs: ['kjAnimation', 'kjAriaLabel'],
-                        },
-                    ], template: `
-    <span class="kj-spinner__glyph" aria-hidden="true"></span>
-    @if (shouldRenderHiddenLabel()) {
-      <span kjVisuallyHidden>{{ kjAriaLabel() }}</span>
-    }
-  `, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'kj-spinner',
-                        '[attr.data-variant]': 'kjVariant()',
-                        '[attr.data-size]': 'kjSize()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-spinner{--kj-spinner-size: 1.25rem;--kj-spinner-color: currentColor;--kj-spinner-track: color-mix(in srgb, currentColor 20%, transparent);--kj-spinner-duration: .7s;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--kj-spinner-size);block-size:var(--kj-spinner-size);color:var(--kj-spinner-color);pointer-events:none}.kj-spinner[data-size=xs]{--kj-spinner-size: .75rem}.kj-spinner[data-size=sm]{--kj-spinner-size: 1rem}.kj-spinner[data-size=md]{--kj-spinner-size: 1.25rem}.kj-spinner[data-size=lg]{--kj-spinner-size: 1.75rem}.kj-spinner[data-variant=neutral]{--kj-spinner-color: currentColor}.kj-spinner[data-variant=primary]{--kj-spinner-color: var(--kj-fg-primary)}.kj-spinner[data-variant=secondary]{--kj-spinner-color: var(--kj-fg-default)}.kj-spinner[data-variant=success]{--kj-spinner-color: var(--kj-fg-success, #16a34a)}.kj-spinner[data-variant=warning]{--kj-spinner-color: var(--kj-fg-warning, #d97706)}.kj-spinner[data-variant=error]{--kj-spinner-color: var(--kj-fg-danger, #dc2626)}.kj-spinner[data-variant=info]{--kj-spinner-color: var(--kj-fg-info, #2563eb)}.kj-spinner__glyph{display:inline-block;inline-size:100%;block-size:100%}.kj-spinner[data-animation=spin] .kj-spinner__glyph{border:2px solid var(--kj-spinner-track);border-block-start-color:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-spin var(--kj-spinner-duration) linear infinite}.kj-spinner[data-animation=pulse] .kj-spinner__glyph{background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-pulse calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots]{inline-size:auto}.kj-spinner[data-animation=dots] .kj-spinner__glyph{display:inline-flex;gap:calc(var(--kj-spinner-size) * .25);inline-size:auto;block-size:100%}.kj-spinner[data-animation=dots] .kj-spinner__glyph:before,.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .3);block-size:calc(var(--kj-spinner-size) * .3);background:var(--kj-spinner-color);border-radius:50%;animation:kj-spinner-dots calc(var(--kj-spinner-duration) * 2) ease-in-out infinite}.kj-spinner[data-animation=dots] .kj-spinner__glyph{background:transparent}.kj-spinner[data-animation=dots] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-animation=bars]{inline-size:auto}.kj-spinner[data-animation=bars] .kj-spinner__glyph{display:inline-flex;align-items:stretch;gap:calc(var(--kj-spinner-size) * .15);inline-size:auto;block-size:100%}.kj-spinner[data-animation=bars] .kj-spinner__glyph:before,.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{content:\"\";inline-size:calc(var(--kj-spinner-size) * .2);background:var(--kj-spinner-color);border-radius:calc(var(--kj-spinner-size) * .05);animation:kj-spinner-bars calc(var(--kj-spinner-duration) * 1.6) ease-in-out infinite;transform-origin:center}.kj-spinner[data-animation=bars] .kj-spinner__glyph:after{animation-delay:calc(var(--kj-spinner-duration) * .4)}.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:before,.kj-spinner[data-reduced-motion=true] .kj-spinner__glyph:after{animation:kj-spinner-reduced-motion 1.6s ease-in-out infinite!important}}@keyframes kj-spinner-spin{to{transform:rotate(360deg)}}@keyframes kj-spinner-pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes kj-spinner-dots{0%,80%,to{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}@keyframes kj-spinner-bars{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}@keyframes kj-spinner-reduced-motion{0%,to{opacity:.45}50%{opacity:1}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }], kjAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAnimation", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
-
 /**
  * Styled root wrapper around the headless `KjStepper` directive.
  *
@@ -12083,10 +14583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * </div>
  * ```
  *
- * @doc-category Components/Data
- * @doc
- * @doc-name table-virtual
- * @doc-description Row virtualization adapter on @tanstack/virtual-core. Exposes virtualRows / paddingTop / paddingBottom / totalSize signals for the styled data table.
+ * Documented as part of the data table on the `table` page — not a standalone
+ * docs entry.
  */
 class KjTableVirtual {
     /** Total number of rows in the underlying dataset. */
@@ -14965,10 +17463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * The toolbar must sit inside a `<kj-table>` (or any element hosting
  * the `KJ_TABLE` token) so it can resolve the table instance via DI.
  *
- * @doc-category Components/Data
- * @doc
- * @doc-name table-toolbar
- * @doc-description Toolbar chrome above the data table — quick filter, density, column visibility, export, and bulk-action slot.
+ * Documented as part of the data table on the `table` page — not a standalone
+ * docs entry.
  */
 class KjTableToolbarComponent {
     /** The host table — resolved through `KJ_TABLE` injected from any ancestor. */
@@ -15207,10 +17703,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * </kj-table>
  * ```
  *
- * @doc-category Components/Data
- * @doc
- * @doc-name table-pagination
- * @doc-description Page-size selector, First/Prev/Next/Last nav, and "Showing N–M of total" summary bound to the parent table.
+ * Documented as part of the data table on the `table` page — not a standalone
+ * docs entry.
  */
 class KjTablePaginationComponent {
     /** Available page sizes for the selector. */
@@ -15533,10 +18027,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * </kj-table>
  * ```
  *
- * @doc-category Components/Data
- * @doc
- * @doc-name table-side-panel
- * @doc-description Service-launched drawer listing every column with visibility, pin, and group controls.
+ * Documented as part of the data table on the `table` page — not a standalone
+ * docs entry.
  */
 class KjTableSidePanelComponent {
     /** Whether the side panel is visible. Two-way bindable. */
@@ -15616,10 +18108,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * </table>
  * ```
  *
- * @doc-category Components/Data
- * @doc
- * @doc-name table-status-bar
- * @doc-description Counts strip showing row count, selected count, and filtered indicator.
+ * Documented as part of the data table on the `table` page — not a standalone
+ * docs entry.
  */
 class KjTableStatusBarComponent {
     table = inject(KJ_TABLE);
@@ -16741,11 +19231,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjToastWrapperComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjToastWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjToastWrapperComponent, isStandalone: true, selector: "kj-toast-wrapper", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-left:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjToastWrapperComponent, isStandalone: true, selector: "kj-toast-wrapper", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-inline-start:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjToastWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kj-toast-wrapper', standalone: true, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-left:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"] }]
+            args: [{ selector: 'kj-toast-wrapper', standalone: true, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-inline-start:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"] }]
         }] });
 /**
  * Toast viewport. Mount once near your trigger button (or in your app shell).
@@ -16767,7 +19257,7 @@ class KjToastViewportComponent {
         </li>
       }
     </ol>
-  `, isInline: true, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-left:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"], dependencies: [{ kind: "directive", type: KjToastViewport, selector: "[kjToastViewport]", inputs: ["kjToastDefaultTemplate", "kjToastMaxVisible", "kjToastGap", "kjToastBaseZIndex", "kjToastPositionX", "kjToastPositionY", "kjToastExpand", "kjToastPauseOnHover"], exportAs: ["kjToastViewport"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-inline-start:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"], dependencies: [{ kind: "directive", type: KjToastViewport, selector: "[kjToastViewport]", inputs: ["kjToastDefaultTemplate", "kjToastMaxVisible", "kjToastGap", "kjToastBaseZIndex", "kjToastPositionX", "kjToastPositionY", "kjToastExpand", "kjToastPauseOnHover"], exportAs: ["kjToastViewport"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjToastViewportComponent, decorators: [{
             type: Component,
@@ -16784,7 +19274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         </li>
       }
     </ol>
-  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-left:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-toast-viewport{position:fixed;list-style:none;padding:0;margin:0;z-index:var(--kj-toast-z-index, 1000);bottom:1rem;right:1rem;width:22rem;max-width:calc(100vw - 2rem)}.kj-toast-viewport[data-position-y=bottom]{bottom:1rem;top:auto}.kj-toast-viewport[data-position-y=top]{top:1rem;bottom:auto}.kj-toast-viewport[data-position-x=end]{right:1rem;left:auto}.kj-toast-viewport[data-position-x=start]{left:1rem;right:auto}.kj-toast-viewport[data-position-x=center]{left:50%;right:auto;transform:translate(-50%)}.kj-toast-viewport li{position:absolute;left:0;right:0;transition:transform .4s cubic-bezier(.21,.61,.35,1),opacity .3s ease}.kj-toast-viewport[data-position-y=bottom] li{bottom:0}.kj-toast-viewport[data-position-y=top] li{top:0}.kj-toast-viewport[data-expanded=false] .kj-toast:not([data-front=true]){height:var(--kj-toast-front-height);overflow:hidden;transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1)) scale(calc(1 - (var(--kj-toast-index) - 1) * .06));opacity:calc(1 - (var(--kj-toast-index) - 1) * .25)}.kj-toast-viewport[data-position-y=top][data-expanded=false] .kj-toast:not([data-front=true]){transform:translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px))) scale(calc(1 - (var(--kj-toast-index) - 1) * .06))}.kj-toast-viewport[data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1))}.kj-toast-viewport[data-position-y=top][data-expanded=true] .kj-toast{transform:translateY(calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px))))}.kj-toast{display:flex;align-items:center;gap:var(--kj-space-md, .75rem);padding:var(--kj-space-md, .75rem) var(--kj-space-lg, 1rem);min-width:18rem;font:.875rem / 1.4 var(--kj-font-sans, sans-serif);border-radius:var(--kj-radius-box, .5rem);box-shadow:0 4px 16px #0000002e,0 1px #ffffff0a inset;border:var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);background:var(--kj-bg-elevated, #fff);color:var(--kj-fg-default, #1a202c);animation:kj-toast-enter .35s cubic-bezier(.21,.61,.35,1)}@keyframes kj-toast-enter{0%{opacity:0;transform:translateY(100%) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.kj-toast[data-variant=success]{background:var(--kj-bg-success, #16a34a);color:var(--kj-fg-on-success, #fff);border-color:transparent}.kj-toast[data-variant=warning]{background:var(--kj-bg-warning, #d97706);color:var(--kj-fg-on-warning, #fff);border-color:transparent}.kj-toast[data-variant=destructive]{background:var(--kj-bg-danger, #dc2626);color:var(--kj-fg-on-danger, #fff);border-color:transparent}.kj-toast-close{background:transparent;border:0;color:inherit;cursor:pointer;padding:4px 6px;border-radius:4px;line-height:1;font-size:1.1rem;opacity:.7;margin-inline-start:auto;flex-shrink:0}.kj-toast-close:hover{opacity:1;background:#00000014}.kj-toast-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}}\n"] }]
         }] });
 /**
  * Single toast item. Bind `[variant]` from `ctx.variant` and `[id]` from `ctx.id`.
@@ -16850,7 +19340,7 @@ class KjToastCloseComponent {
     [kjToastClose]="toastId()"
     [attr.aria-label]="ariaLabel()"
     class="kj-toast-close"
-  ><ng-content /></button>`, isInline: true, dependencies: [{ kind: "directive", type: KjToastClose, selector: "[kjToastClose]", inputs: ["kjToastClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  ><ng-content /></button>`, isInline: true, dependencies: [{ kind: "directive", type: KjToastClose, selector: "[kjToastClose]", inputs: ["kjToastClose", "kjToastCloseLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjToastCloseComponent, decorators: [{
             type: Component,
@@ -17176,10 +19666,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  *   --kj-command-item-align     — Cross-axis alignment of row contents. Defaults to `center`.
  *   --kj-command-item-gap       — Gap between icon and label inside a row. Defaults to --kj-space-md.
  *
+ * @doc-category Library/Actions
  * @doc
  * @doc-name command-palette
  * @doc-description Themed Cmd-K modal command palette with fuzzy filtering, grouped results, and keyboard navigation.
- * @doc-is-main
  */
 class KjCommandPaletteFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandPaletteFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -17281,6 +19771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-category Library/Actions
  * @doc
  * @doc-name command-palette
+ * @doc-is-main
  */
 class KjCommandPaletteComponent {
     /** Input placeholder text. */
@@ -17312,7 +19803,22 @@ class KjCommandPaletteComponent {
     ...(ngDevMode ? [{ debugName: "customFooter" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     platformId = inject(PLATFORM_ID);
+    /** The composed headless palette (host directive) — owns query + active state. */
+    palette = inject(KjCommandPalette);
     constructor() {
+        // Reset the search query + active item when the palette closes, so the
+        // next open starts fresh instead of restoring the previous search. Paired
+        // with KjCommandInput reflecting the query signal back to the DOM input,
+        // this also clears the visible text.
+        let wasOpen = false;
+        effect(() => {
+            const open = this.kjOpen();
+            if (wasOpen && !open) {
+                this.palette.kjQuery.set('');
+                this.palette.kjValue.set(null);
+            }
+            wasOpen = open;
+        });
         afterNextRender(() => {
             if (!isPlatformBrowser(this.platformId))
                 return;
@@ -17416,7 +19922,7 @@ class KjCommandPaletteComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KjCommandInput, selector: "input[kjCommandInput]", exportAs: ["kjCommandInput"] }, { kind: "directive", type: KjCommandList, selector: "[kjCommandList]" }, { kind: "directive", type: KjCommandEmpty, selector: "[kjCommandEmpty]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KjCommandInput, selector: "input[kjCommandInput]", exportAs: ["kjCommandInput"] }, { kind: "directive", type: KjCommandList, selector: "[kjCommandList]" }, { kind: "directive", type: KjCommandEmpty, selector: "[kjCommandEmpty]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandPaletteComponent, decorators: [{
             type: Component,
@@ -17475,7 +19981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         class: 'kj-command-palette',
                         style: 'display: contents;',
                         '(kjActivate)': 'onActivate()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjEscBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEscBadge", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }], kjOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpen", required: false }] }, { type: i0.Output, args: ["kjOpenChange"] }], kjHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjHotkey", required: false }] }], kjItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjItems", required: false }] }], kjAutoCloseOnActivate: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAutoCloseOnActivate", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjCommandPaletteItemTemplate), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjCommandPaletteFooter), { isSignal: true }] }] } });
 /**
  * Styled command item. Renders a `<button>` with `[kjCommandItem]` applied.
@@ -17502,7 +20008,7 @@ class KjCommandItemComponent {
     isActive = computed(() => this._palette.activeId() !== null && this._palette.activeId() === this._item.id, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjCommandItemComponent, isStandalone: true, selector: "kj-command-item", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjKeywords: { classPropertyName: "kjKeywords", publicName: "kjKeywords", isSignal: true, isRequired: false, transformFunction: null }, kjShortcut: { classPropertyName: "kjShortcut", publicName: "kjShortcut", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.aria-selected": "isActive() ? \"true\" : \"false\"", "attr.data-active": "isActive() ? \"\" : null" }, classAttribute: "kj-command-item" }, hostDirectives: [{ directive: i1.KjListItem, inputs: ["kjItemValue", "kjValue", "kjItemKeywords", "kjKeywords", "kjShortcut", "kjShortcut", "kjDisabled", "kjDisabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjCommandItemComponent, isStandalone: true, selector: "kj-command-item", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjKeywords: { classPropertyName: "kjKeywords", publicName: "kjKeywords", isSignal: true, isRequired: false, transformFunction: null }, kjShortcut: { classPropertyName: "kjShortcut", publicName: "kjShortcut", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.aria-selected": "isActive() ? \"true\" : \"false\"", "attr.data-active": "isActive() ? \"\" : null" }, classAttribute: "kj-command-item" }, hostDirectives: [{ directive: i1.KjListItem, inputs: ["kjItemValue", "kjValue", "kjItemKeywords", "kjKeywords", "kjShortcut", "kjShortcut", "kjDisabled", "kjDisabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandItemComponent, decorators: [{
             type: Component,
@@ -17519,7 +20025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         'role': 'option',
                         '[attr.aria-selected]': 'isActive() ? "true" : "false"',
                         '[attr.data-active]': 'isActive() ? "" : null',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
         }], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }], kjKeywords: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjKeywords", required: false }] }], kjShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShortcut", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }] } });
 /**
  * Styled command group. Auto-hides when all child items are filtered out.
@@ -17538,7 +20044,7 @@ class KjCommandGroupComponent {
       <div class="kj-command-group__label">{{ kjLabel() }}</div>
     }
     <ng-content />
-  `, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandGroupComponent, decorators: [{
             type: Component,
@@ -17547,7 +20053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <div class="kj-command-group__label">{{ kjLabel() }}</div>
     }
     <ng-content />
-  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-command-group' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-command-group' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
         }], propDecorators: { kjLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabel", required: false }] }] } });
 /**
  * Styled command input wrapper. Renders an `<input type="search">` with
@@ -17570,7 +20076,7 @@ class KjCommandInputComponent {
       class="kj-command-input"
       [placeholder]="kjPlaceholder()"
     />
-  `, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], dependencies: [{ kind: "directive", type: KjCommandInput, selector: "input[kjCommandInput]", exportAs: ["kjCommandInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], dependencies: [{ kind: "directive", type: KjCommandInput, selector: "input[kjCommandInput]", exportAs: ["kjCommandInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandInputComponent, decorators: [{
             type: Component,
@@ -17581,7 +20087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       class="kj-command-input"
       [placeholder]="kjPlaceholder()"
     />
-  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
         }], propDecorators: { kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }] } });
 /**
  * Styled separator between command groups.
@@ -17592,11 +20098,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjCommandSeparatorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjCommandSeparatorComponent, isStandalone: true, selector: "kj-command-separator", host: { classAttribute: "kj-command-separator" }, hostDirectives: [{ directive: i1.KjCommandSeparator }], ngImport: i0, template: ``, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjCommandSeparatorComponent, isStandalone: true, selector: "kj-command-separator", host: { classAttribute: "kj-command-separator" }, hostDirectives: [{ directive: i1.KjCommandSeparator }], ngImport: i0, template: ``, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandSeparatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kj-command-separator', standalone: true, hostDirectives: [KjCommandSeparator], template: ``, encapsulation: ViewEncapsulation.None, host: { class: 'kj-command-separator' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
+            args: [{ selector: 'kj-command-separator', standalone: true, hostDirectives: [KjCommandSeparator], template: ``, encapsulation: ViewEncapsulation.None, host: { class: 'kj-command-separator' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
         }] });
 /**
  * Styled empty state slot. Shown when no items match the current query.
@@ -17607,11 +20113,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjCommandEmptyComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjCommandEmptyComponent, isStandalone: true, selector: "kj-command-empty", host: { classAttribute: "kj-command-empty" }, hostDirectives: [{ directive: i1.KjCommandEmpty }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjCommandEmptyComponent, isStandalone: true, selector: "kj-command-empty", host: { classAttribute: "kj-command-empty" }, hostDirectives: [{ directive: i1.KjCommandEmpty }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCommandEmptyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kj-command-empty', standalone: true, hostDirectives: [KjCommandEmpty], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { class: 'kj-command-empty' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-left:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-left-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
+            args: [{ selector: 'kj-command-empty', standalone: true, hostDirectives: [KjCommandEmpty], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { class: 'kj-command-empty' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-command-palette__shell{display:none}.kj-command-palette__shell.is-open{display:contents}.kj-command-palette__backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:kj-command-palette-fade .1s ease-out}.kj-command-palette__dialog{position:fixed;top:15vh;left:50%;transform:translate(-50%);width:min(640px,92vw);display:flex;flex-direction:column;background:var(--kj-bg-elevated);border:1px solid var(--kj-border-default);z-index:1001;overflow:hidden;animation:kj-command-palette-slide .15s ease-out}@keyframes kj-command-palette-fade{0%{opacity:0}to{opacity:1}}@keyframes kj-command-palette-slide{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.kj-command-palette__backdrop,.kj-command-palette__dialog{animation:none}}.kj-command-palette__input-wrapper{display:flex;align-items:center;padding:.875rem var(--kj-space-lg, 1.25rem);border-bottom:1px solid var(--kj-border-default);gap:var(--kj-space-md, .75rem)}.kj-command-palette__search-icon{flex-shrink:0;width:1rem;height:1rem;color:var(--kj-fg-muted)}.kj-command-palette__input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none}.kj-command-palette__input::placeholder{color:var(--kj-fg-muted)}.kj-command-palette__input::-webkit-search-cancel-button{display:none}.kj-command-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);appearance:none;-webkit-appearance:none;width:100%;padding:.875rem var(--kj-space-lg, 1.25rem)}.kj-command-palette__esc-kbd{font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted);background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);padding:.15rem .4rem;flex-shrink:0;cursor:pointer}.kj-command-palette__esc-kbd:hover{color:var(--kj-fg-default)}.kj-command-palette__list{overflow-y:auto;max-height:22rem;padding:var(--kj-space-sm, .375rem) 0}.kj-command-palette__empty,.kj-command-empty{padding:var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);text-align:center;font-family:var(--kj-font-mono);font-size:.8rem;color:var(--kj-fg-muted)}.kj-command-item{display:flex;flex-direction:var(--kj-command-item-direction, row);align-items:var(--kj-command-item-align, center);gap:var(--kj-command-item-gap, var(--kj-space-md, .75rem));width:100%;min-height:2.75rem;padding:.625rem var(--kj-space-lg, 1.25rem);border:none;border-inline-start:2px solid transparent;background:transparent;font-family:var(--kj-font-mono);font-size:.875rem;color:var(--kj-fg-default);text-align:start;cursor:pointer;transition:background .1s}.kj-command-item:hover,.kj-command-item[data-active]{background:var(--kj-bg-surface);border-inline-start-color:var(--kj-bg-primary)}.kj-command-item[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-command-group{padding-block:.25rem}.kj-command-group__label{padding:.375rem var(--kj-space-lg, 1.25rem) .125rem;font-family:var(--kj-font-mono);font-size:.6rem;font-weight:600;color:var(--kj-fg-muted);letter-spacing:.1em;text-transform:uppercase}.kj-command-separator{height:1px;background:var(--kj-border-default);margin-block:.25rem}.kj-command-palette__footer{display:flex;gap:var(--kj-space-xl, 1.5rem);padding:var(--kj-space-sm, .375rem) var(--kj-space-lg, 1.25rem);border-top:1px solid var(--kj-border-default);background:var(--kj-bg-surface)}.kj-command-palette__footer span{display:flex;align-items:center;gap:.4rem;font-family:var(--kj-font-mono);font-size:.65rem;color:var(--kj-fg-muted)}.kj-command-palette__footer kbd{background:var(--kj-bg-surface);border:1px solid var(--kj-border-default);color:var(--kj-fg-muted);font-family:var(--kj-font-mono);font-size:.6rem;padding:.1rem .35rem}@media(prefers-reduced-motion:reduce){.kj-command-item{transition:none}}\n"] }]
         }] });
 
 /** Walk the tree into a flat array. All nodes are included; visibility is
@@ -18000,5 +20506,5 @@ const KJ_COMPONENTS_VERSION = '0.0.1';
  * Generated bundle index. Do not edit.
  */
 
-export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjCellTemplateDirective, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDatetimePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
+export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjActionSheet, KjActionSheetComponent, KjActionSheetRef, KjActionSheetService, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjCellTemplateDirective, KjChartComponent, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjChatMessage, KjChatThread, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDateRangePresetsComponent, KjDatetimePickerComponent, KjDialogComponent, KjDirectionToggle, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEditorComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjPromptInput, KjRadioComponent, KjRadioGroupComponent, KjRichTextEditorComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSheetComponent, KjSkeletonComponent, KjSkipLinkComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, bold, bulletList, codeBlock, copyToClipboard, defaultFeatures, downloadString, exportCsv, exportJson, heading, history, image, inlineCode, italic, link, markdownShortcuts, orderedList, provideLucideIcons, quote, renderMarkdown, strike, toTsv, underline };
 //# sourceMappingURL=kouji-ui-components.mjs.map