@kouji-ui/components 0.8.0 → 0.9.0

package/fesm2022/kouji-ui-components.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Injectable, booleanAttribute, computed, TemplateRef, viewChild, ElementRef, contentChildren, contentChild, model, ViewChild, PLATFORM_ID, DestroyRef, afterNextRender, effect, signal, Injector, untracked, output, EventEmitter, Output, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, EnvironmentInjector, Directive, InjectionToken, ViewContainerRef, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Injectable, booleanAttribute, computed, TemplateRef, viewChild, ElementRef, contentChildren, contentChild, model, ViewChild, PLATFORM_ID, DestroyRef, afterNextRender, effect, signal, SecurityContext, Injector, untracked, output, EventEmitter, Output, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, EnvironmentInjector, Directive, InjectionToken, ViewContainerRef, numberAttribute } from '@angular/core';
 import * as i1 from '@kouji-ui/core';
-import { KjAccordion, KjAccordionTrigger, KjAccordionItem, KjAccordionContent, SHEET_DATA, KjSheetRef, KjSheet, KjIconDirective, KjSheetService, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KJ_AVATAR_GROUP, KjAvatarImage, KjAvatarFallback, KjAvatar, KjPopoverTrigger, KjPopoverContent, KjPopoverArrow, KjPopoverClose, KjPopoverTitle, KjTranslateService, KjOverflowContent, KjAvatarGroup, KjBadge, KjBreadcrumb, KjSize, KjBreadcrumbList, KjBreadcrumbItem, KJ_BREADCRUMB_CONFIG, 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, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, defaultDateRangePresets, KjDateRangePresets, KjDateRangePresetOption, KjLocale, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, KjSpinner, KjVariant, KjEditorLoader, KjEditor, KJ_SIZE_PRESET, 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, 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, bindPresets, KJ_TABS_CONFIG, 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';
+import { KjAccordion, KjAccordionTrigger, KjAccordionItem, KjAccordionContent, SHEET_DATA, KjSheetRef, KjSheet, KjIconDirective, KjSheetService, KjAlert, KjAlertIcon, KjAlertTitle, KjAlertDescription, KjAlertActions, KjAlertDismiss, KJ_AVATAR_GROUP, KjAvatarImage, KjAvatarFallback, KjAvatar, KjPopoverTrigger, KjPopoverContent, KjPopoverArrow, KjPopoverClose, KjPopoverTitle, KjTranslateService, KjOverflowContent, KjAvatarGroup, KjBadge, KjBreadcrumb, KjSize, KjBreadcrumbList, KjBreadcrumbItem, KJ_BREADCRUMB_CONFIG, 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, KJ_CHAT_CONFIG, parseSlash, matchSlashCommands, KjCheckbox, KjColorPicker, KjColorPickerTrigger, KjColorPickerPanel, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerAlphaSlider, KjColorPickerInput, KjComboboxInput, KjComboboxListbox, KjCombobox, KjComboboxOption, KjConfirmPopup, KjConfirmPopupTrigger, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupAction, KjConfirmPopupCancel, KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, defaultDateRangePresets, KjDateRangePresets, KjDateRangePresetOption, KjLocale, KjDropdownMenuTrigger, KjDropdownMenuContent, KjDropdownMenuItem, KjDropdownMenuSeparator, KjDropdownMenuLabel, KjDropdownMenuGroup, KjSpinner, KjVariant, KjEditorLoader, KjEditor, KJ_SIZE_PRESET, 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, 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, bindPresets, KJ_TABS_CONFIG, 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 { marked } from 'marked';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as lucideIcons from 'lucide-static';
@@ -1781,7 +1782,7 @@ class KjButtonComponent {
         <ng-content />
       }
     </button>
-  `, isInline: true, styles: ["@layer kj.component{.kj-button{display:inline-flex;align-items:center;justify-content:var(--kj-button-justify, center);gap:var(--kj-button-gap, var(--kj-space-sm));min-width:var(--kj-button-min-width, auto);height:var(--kj-button-height, auto);align-self:center;background:var(--kj-button-bg, var(--kj-bg-primary));color:var(--kj-button-fg, var(--kj-fg-on-primary));border:var(--kj-button-border-width, var(--kj-border)) var(--kj-button-border-style, solid) var(--kj-button-border-color, transparent);border-radius:var(--kj-button-radius, var(--kj-radius-field));padding:var(--kj-button-padding-y, var(--kj-space-sm)) var(--kj-button-padding-x, var(--kj-space-md));font:var(--kj-button-font-weight, 600) var(--kj-button-font-size, var(--kj-text-sm)) / 1.2 var(--kj-button-font, var(--kj-font-sans));letter-spacing:var(--kj-button-letter-spacing, -.01em);transition:color var(--kj-transition),border-color var(--kj-transition),box-shadow var(--kj-transition),transform var(--kj-transition),opacity var(--kj-transition);cursor:pointer;text-decoration:none}.kj-button[data-variant=destructive]{--kj-button-bg: var(--kj-bg-danger);--kj-button-fg: var(--kj-fg-on-danger)}.kj-button[data-variant=destructive]:hover{--kj-button-bg: color-mix(in oklch, var(--kj-bg-danger), black 8%)}.kj-button[data-variant=ghost]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: transparent}.kj-button[data-variant=ghost]:hover{--kj-button-bg: color-mix(in oklab, var(--kj-fg-default) 10%, transparent)}.kj-button[data-variant=outline]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: var(--kj-border-default)}.kj-button[data-variant=outline]:hover{--kj-button-bg: var(--kj-bg-surface)}.kj-button[data-variant=link]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-primary);--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: none;--kj-button-shadow-hover: none;--kj-button-shadow-active: none;text-decoration:underline;text-underline-offset:4px}.kj-button[data-variant=link]:hover{--kj-button-bg: transparent;--kj-button-fg: color-mix(in oklch, var(--kj-fg-primary), black 8%)}.kj-button[data-size=xs]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: 0;--kj-button-font-size: .75rem;--kj-button-height: var(--kj-ctl-h-xs)}.kj-button[data-size=sm]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: .25rem;--kj-button-font-size: .8125rem;--kj-button-height: var(--kj-ctl-h-sm)}.kj-button[data-size=md]{--kj-button-height: var(--kj-ctl-h-md)}.kj-button[data-size=lg]{--kj-button-padding-x: var(--kj-space-lg);--kj-button-padding-y: .625rem;--kj-button-font-size: 1rem;--kj-button-height: var(--kj-ctl-h-lg)}.kj-button[data-size=xl]{--kj-button-padding-x: var(--kj-space-2xl);--kj-button-padding-y: .875rem;--kj-button-font-size: 1.0625rem;--kj-button-gap: var(--kj-space-md);--kj-button-height: var(--kj-ctl-h-xl)}.kj-button[data-size=icon]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: var(--kj-space-sm);--kj-button-height: var(--kj-ctl-h-md);aspect-ratio:1}.kj-button[data-full=true]{width:100%}.kj-button:hover{--kj-button-bg: var(--kj-button-bg-hover, color-mix(in oklch, var(--kj-bg-primary), black 8%));transform:translateY(var(--kj-button-hover-translate, var(--kj-hover-translate, -2px)))}.kj-button[data-variant=default]:hover{--kj-button-fg: var(--kj-button-fg-hover, var(--kj-fg-on-primary))}.kj-button[data-variant=default]{box-shadow:var(--kj-button-shadow, none)}.kj-button[data-variant=default]:hover{box-shadow:var(--kj-button-shadow-hover, var(--kj-button-shadow, none))}.kj-button[data-variant=default]:active{box-shadow:var(--kj-button-shadow-active, var(--kj-button-shadow, none))}.kj-button:active{transform:var(--kj-button-translate-active, none)}.kj-button:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-button[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-button[data-size=icon]{min-width:2.75rem;min-height:2.75rem}.kj-button[aria-busy=true]{opacity:.7;cursor:progress}.kj-button[aria-pressed=true]{--kj-button-bg: var(--kj-bg-field);box-shadow:inset 0 1px 2px #0000001f}.kj-button__spinner{display:inline-block;width:1em;height:1em;vertical-align:-.125em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kj-button-spinner-rotate .6s linear infinite}}@keyframes kj-button-spinner-rotate{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: KjButton, selector: "[kjButton]", inputs: ["kjDisabled", "kjLoading", "kjFullWidth", "kjPressed"], outputs: ["kjPressedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kj.component{.kj-button{display:inline-flex;align-items:center;justify-content:var(--kj-button-justify, center);gap:var(--kj-button-gap, var(--kj-space-sm));min-width:var(--kj-button-min-width, auto);height:var(--kj-button-height, auto);align-self:center;background:var(--kj-button-bg, var(--kj-bg-primary));color:var(--kj-button-fg, var(--kj-fg-on-primary));border:var(--kj-button-border-width, var(--kj-border)) var(--kj-button-border-style, solid) var(--kj-button-border-color, transparent);border-radius:var(--kj-button-radius, var(--kj-radius-field));padding:var(--kj-button-padding-y, var(--kj-space-sm)) var(--kj-button-padding-x, var(--kj-space-md));font:var(--kj-button-font-weight, 600) var(--kj-button-font-size, var(--kj-text-sm)) / 1.2 var(--kj-button-font, var(--kj-font-sans));letter-spacing:var(--kj-button-letter-spacing, -.01em);text-transform:var(--kj-button-text-transform, none);transition:color var(--kj-transition),border-color var(--kj-transition),box-shadow var(--kj-transition),transform var(--kj-transition),opacity var(--kj-transition);cursor:pointer;text-decoration:none}.kj-button[data-variant=destructive]{--kj-button-bg: var(--kj-bg-danger);--kj-button-fg: var(--kj-fg-on-danger)}.kj-button[data-variant=destructive]:hover{--kj-button-bg: color-mix(in oklch, var(--kj-bg-danger), black 8%)}.kj-button[data-variant=ghost]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: transparent}.kj-button[data-variant=ghost]:hover{--kj-button-bg: color-mix(in oklab, var(--kj-fg-default) 10%, transparent)}.kj-button[data-variant=outline]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: var(--kj-border-default)}.kj-button[data-variant=outline]:hover{--kj-button-bg: var(--kj-bg-surface)}.kj-button[data-variant=segmented]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-muted, var(--kj-fg-default));--kj-button-border-color: transparent;--kj-button-border-width: 0;--kj-button-radius: 0;--kj-button-hover-translate: none}.kj-button[data-variant=segmented]:hover{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default)}.kj-button[data-variant=segmented][aria-pressed=true]{--kj-button-bg: var(--kj-segmented-bg-on, var(--kj-bg-surface));--kj-button-fg: var(--kj-segmented-fg-on, var(--kj-fg-default));cursor:default}.kj-button[data-variant=segmented][aria-pressed=true]:hover{--kj-button-bg: var(--kj-segmented-bg-on, var(--kj-bg-surface));--kj-button-fg: var(--kj-segmented-fg-on, var(--kj-fg-default))}.kj-button[data-variant=link]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-primary);--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: none;--kj-button-shadow-hover: none;--kj-button-shadow-active: none;text-decoration:underline;text-underline-offset:4px}.kj-button[data-variant=link]:hover{--kj-button-bg: transparent;--kj-button-fg: color-mix(in oklch, var(--kj-fg-primary), black 8%)}.kj-button[data-size=xs]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: 0;--kj-button-font-size: .75rem;--kj-button-height: var(--kj-ctl-h-xs)}.kj-button[data-size=sm]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: .25rem;--kj-button-font-size: .8125rem;--kj-button-height: var(--kj-ctl-h-sm)}.kj-button[data-size=md]{--kj-button-height: var(--kj-ctl-h-md)}.kj-button[data-size=lg]{--kj-button-padding-x: var(--kj-space-lg);--kj-button-padding-y: .625rem;--kj-button-font-size: 1rem;--kj-button-height: var(--kj-ctl-h-lg)}.kj-button[data-size=xl]{--kj-button-padding-x: var(--kj-space-2xl);--kj-button-padding-y: .875rem;--kj-button-font-size: 1.0625rem;--kj-button-gap: var(--kj-space-md);--kj-button-height: var(--kj-ctl-h-xl)}.kj-button[data-size=icon]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: var(--kj-space-sm);--kj-button-height: var(--kj-ctl-h-md);aspect-ratio:1}.kj-button[data-full=true]{width:100%}.kj-button:hover{--kj-button-bg: var(--kj-button-bg-hover, color-mix(in oklch, var(--kj-bg-primary), black 8%));transform:translateY(var(--kj-button-hover-translate, var(--kj-hover-translate, -2px)))}.kj-button[data-variant=default]:hover{--kj-button-fg: var(--kj-button-fg-hover, var(--kj-fg-on-primary))}.kj-button[data-variant=default]{box-shadow:var(--kj-button-shadow, none)}.kj-button[data-variant=default]:hover{box-shadow:var(--kj-button-shadow-hover, var(--kj-button-shadow, none))}.kj-button[data-variant=default]:active{box-shadow:var(--kj-button-shadow-active, var(--kj-button-shadow, none))}.kj-button:active{transform:var(--kj-button-translate-active, none)}.kj-button:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-button[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-button[data-size=icon]{min-width:2.75rem;min-height:2.75rem}.kj-button[aria-busy=true]{opacity:.7;cursor:progress}.kj-button[aria-pressed=true]{--kj-button-bg: var(--kj-bg-field);box-shadow:inset 0 1px 2px #0000001f}.kj-button__spinner{display:inline-block;width:1em;height:1em;vertical-align:-.125em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kj-button-spinner-rotate .6s linear infinite}}@keyframes kj-button-spinner-rotate{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: KjButton, selector: "[kjButton]", inputs: ["kjDisabled", "kjLoading", "kjFullWidth", "kjPressed"], outputs: ["kjPressedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjButtonComponent, decorators: [{
             type: Component,
@@ -1804,7 +1805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <ng-content />
       }
     </button>
-  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-button{display:inline-flex;align-items:center;justify-content:var(--kj-button-justify, center);gap:var(--kj-button-gap, var(--kj-space-sm));min-width:var(--kj-button-min-width, auto);height:var(--kj-button-height, auto);align-self:center;background:var(--kj-button-bg, var(--kj-bg-primary));color:var(--kj-button-fg, var(--kj-fg-on-primary));border:var(--kj-button-border-width, var(--kj-border)) var(--kj-button-border-style, solid) var(--kj-button-border-color, transparent);border-radius:var(--kj-button-radius, var(--kj-radius-field));padding:var(--kj-button-padding-y, var(--kj-space-sm)) var(--kj-button-padding-x, var(--kj-space-md));font:var(--kj-button-font-weight, 600) var(--kj-button-font-size, var(--kj-text-sm)) / 1.2 var(--kj-button-font, var(--kj-font-sans));letter-spacing:var(--kj-button-letter-spacing, -.01em);transition:color var(--kj-transition),border-color var(--kj-transition),box-shadow var(--kj-transition),transform var(--kj-transition),opacity var(--kj-transition);cursor:pointer;text-decoration:none}.kj-button[data-variant=destructive]{--kj-button-bg: var(--kj-bg-danger);--kj-button-fg: var(--kj-fg-on-danger)}.kj-button[data-variant=destructive]:hover{--kj-button-bg: color-mix(in oklch, var(--kj-bg-danger), black 8%)}.kj-button[data-variant=ghost]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: transparent}.kj-button[data-variant=ghost]:hover{--kj-button-bg: color-mix(in oklab, var(--kj-fg-default) 10%, transparent)}.kj-button[data-variant=outline]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: var(--kj-border-default)}.kj-button[data-variant=outline]:hover{--kj-button-bg: var(--kj-bg-surface)}.kj-button[data-variant=link]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-primary);--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: none;--kj-button-shadow-hover: none;--kj-button-shadow-active: none;text-decoration:underline;text-underline-offset:4px}.kj-button[data-variant=link]:hover{--kj-button-bg: transparent;--kj-button-fg: color-mix(in oklch, var(--kj-fg-primary), black 8%)}.kj-button[data-size=xs]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: 0;--kj-button-font-size: .75rem;--kj-button-height: var(--kj-ctl-h-xs)}.kj-button[data-size=sm]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: .25rem;--kj-button-font-size: .8125rem;--kj-button-height: var(--kj-ctl-h-sm)}.kj-button[data-size=md]{--kj-button-height: var(--kj-ctl-h-md)}.kj-button[data-size=lg]{--kj-button-padding-x: var(--kj-space-lg);--kj-button-padding-y: .625rem;--kj-button-font-size: 1rem;--kj-button-height: var(--kj-ctl-h-lg)}.kj-button[data-size=xl]{--kj-button-padding-x: var(--kj-space-2xl);--kj-button-padding-y: .875rem;--kj-button-font-size: 1.0625rem;--kj-button-gap: var(--kj-space-md);--kj-button-height: var(--kj-ctl-h-xl)}.kj-button[data-size=icon]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: var(--kj-space-sm);--kj-button-height: var(--kj-ctl-h-md);aspect-ratio:1}.kj-button[data-full=true]{width:100%}.kj-button:hover{--kj-button-bg: var(--kj-button-bg-hover, color-mix(in oklch, var(--kj-bg-primary), black 8%));transform:translateY(var(--kj-button-hover-translate, var(--kj-hover-translate, -2px)))}.kj-button[data-variant=default]:hover{--kj-button-fg: var(--kj-button-fg-hover, var(--kj-fg-on-primary))}.kj-button[data-variant=default]{box-shadow:var(--kj-button-shadow, none)}.kj-button[data-variant=default]:hover{box-shadow:var(--kj-button-shadow-hover, var(--kj-button-shadow, none))}.kj-button[data-variant=default]:active{box-shadow:var(--kj-button-shadow-active, var(--kj-button-shadow, none))}.kj-button:active{transform:var(--kj-button-translate-active, none)}.kj-button:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-button[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-button[data-size=icon]{min-width:2.75rem;min-height:2.75rem}.kj-button[aria-busy=true]{opacity:.7;cursor:progress}.kj-button[aria-pressed=true]{--kj-button-bg: var(--kj-bg-field);box-shadow:inset 0 1px 2px #0000001f}.kj-button__spinner{display:inline-block;width:1em;height:1em;vertical-align:-.125em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kj-button-spinner-rotate .6s linear infinite}}@keyframes kj-button-spinner-rotate{to{transform:rotate(360deg)}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-button{display:inline-flex;align-items:center;justify-content:var(--kj-button-justify, center);gap:var(--kj-button-gap, var(--kj-space-sm));min-width:var(--kj-button-min-width, auto);height:var(--kj-button-height, auto);align-self:center;background:var(--kj-button-bg, var(--kj-bg-primary));color:var(--kj-button-fg, var(--kj-fg-on-primary));border:var(--kj-button-border-width, var(--kj-border)) var(--kj-button-border-style, solid) var(--kj-button-border-color, transparent);border-radius:var(--kj-button-radius, var(--kj-radius-field));padding:var(--kj-button-padding-y, var(--kj-space-sm)) var(--kj-button-padding-x, var(--kj-space-md));font:var(--kj-button-font-weight, 600) var(--kj-button-font-size, var(--kj-text-sm)) / 1.2 var(--kj-button-font, var(--kj-font-sans));letter-spacing:var(--kj-button-letter-spacing, -.01em);text-transform:var(--kj-button-text-transform, none);transition:color var(--kj-transition),border-color var(--kj-transition),box-shadow var(--kj-transition),transform var(--kj-transition),opacity var(--kj-transition);cursor:pointer;text-decoration:none}.kj-button[data-variant=destructive]{--kj-button-bg: var(--kj-bg-danger);--kj-button-fg: var(--kj-fg-on-danger)}.kj-button[data-variant=destructive]:hover{--kj-button-bg: color-mix(in oklch, var(--kj-bg-danger), black 8%)}.kj-button[data-variant=ghost]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: transparent}.kj-button[data-variant=ghost]:hover{--kj-button-bg: color-mix(in oklab, var(--kj-fg-default) 10%, transparent)}.kj-button[data-variant=outline]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: var(--kj-border-default)}.kj-button[data-variant=outline]:hover{--kj-button-bg: var(--kj-bg-surface)}.kj-button[data-variant=segmented]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-muted, var(--kj-fg-default));--kj-button-border-color: transparent;--kj-button-border-width: 0;--kj-button-radius: 0;--kj-button-hover-translate: none}.kj-button[data-variant=segmented]:hover{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default)}.kj-button[data-variant=segmented][aria-pressed=true]{--kj-button-bg: var(--kj-segmented-bg-on, var(--kj-bg-surface));--kj-button-fg: var(--kj-segmented-fg-on, var(--kj-fg-default));cursor:default}.kj-button[data-variant=segmented][aria-pressed=true]:hover{--kj-button-bg: var(--kj-segmented-bg-on, var(--kj-bg-surface));--kj-button-fg: var(--kj-segmented-fg-on, var(--kj-fg-default))}.kj-button[data-variant=link]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-primary);--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: none;--kj-button-shadow-hover: none;--kj-button-shadow-active: none;text-decoration:underline;text-underline-offset:4px}.kj-button[data-variant=link]:hover{--kj-button-bg: transparent;--kj-button-fg: color-mix(in oklch, var(--kj-fg-primary), black 8%)}.kj-button[data-size=xs]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: 0;--kj-button-font-size: .75rem;--kj-button-height: var(--kj-ctl-h-xs)}.kj-button[data-size=sm]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: .25rem;--kj-button-font-size: .8125rem;--kj-button-height: var(--kj-ctl-h-sm)}.kj-button[data-size=md]{--kj-button-height: var(--kj-ctl-h-md)}.kj-button[data-size=lg]{--kj-button-padding-x: var(--kj-space-lg);--kj-button-padding-y: .625rem;--kj-button-font-size: 1rem;--kj-button-height: var(--kj-ctl-h-lg)}.kj-button[data-size=xl]{--kj-button-padding-x: var(--kj-space-2xl);--kj-button-padding-y: .875rem;--kj-button-font-size: 1.0625rem;--kj-button-gap: var(--kj-space-md);--kj-button-height: var(--kj-ctl-h-xl)}.kj-button[data-size=icon]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: var(--kj-space-sm);--kj-button-height: var(--kj-ctl-h-md);aspect-ratio:1}.kj-button[data-full=true]{width:100%}.kj-button:hover{--kj-button-bg: var(--kj-button-bg-hover, color-mix(in oklch, var(--kj-bg-primary), black 8%));transform:translateY(var(--kj-button-hover-translate, var(--kj-hover-translate, -2px)))}.kj-button[data-variant=default]:hover{--kj-button-fg: var(--kj-button-fg-hover, var(--kj-fg-on-primary))}.kj-button[data-variant=default]{box-shadow:var(--kj-button-shadow, none)}.kj-button[data-variant=default]:hover{box-shadow:var(--kj-button-shadow-hover, var(--kj-button-shadow, none))}.kj-button[data-variant=default]:active{box-shadow:var(--kj-button-shadow-active, var(--kj-button-shadow, none))}.kj-button:active{transform:var(--kj-button-translate-active, none)}.kj-button:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-button[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-button[data-size=icon]{min-width:2.75rem;min-height:2.75rem}.kj-button[aria-busy=true]{opacity:.7;cursor:progress}.kj-button[aria-pressed=true]{--kj-button-bg: var(--kj-bg-field);box-shadow:inset 0 1px 2px #0000001f}.kj-button__spinner{display:inline-block;width:1em;height:1em;vertical-align:-.125em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kj-button-spinner-rotate .6s linear infinite}}@keyframes kj-button-spinner-rotate{to{transform:rotate(360deg)}}\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 }] }], kjLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLoading", required: false }] }], kjFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFullWidth", required: false }] }], kjPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPressed", required: false }] }, { type: i0.Output, args: ["kjPressedChange"] }], kjType: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjType", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
 
 /**
@@ -1839,6 +1840,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-example Variants
  *   Set `kjVariant` on the group to cascade onto every child button.
  *   @doc-file button-group.variants.example.ts
+ * @doc-example Segmented
+ *   `kjVariant="segmented"` moves the border onto the group and fills only
+ *   the pressed child — a mode switcher rather than a toolbar.
+ *   @doc-file button-group.segmented.example.ts
  * @doc-example Toggle
  *   Pair with `[kjPressed]` on each child to build a segmented control.
  *   @doc-file button-group.toggle.example.ts
@@ -1870,7 +1875,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-related button,toggle,tabs
  *
  * @doc-css-var
- *   --kj-button-group-gap  — Gap between adjacent buttons. Defaults to 0 (segmented look); raise for a spaced cluster.
+ *   --kj-button-group-gap        — Gap between adjacent buttons. Defaults to 0 (segmented look); raise for a spaced cluster.
+ *   --kj-segmented-border  — Shell and divider colour, `kjVariant="segmented"` only. Defaults to `--kj-border-default`.
+ *   --kj-segmented-bg-on   — Fill behind the pressed segment. Defaults to `--kj-bg-surface`.
+ *   --kj-segmented-fg-on   — Ink on the pressed segment. Defaults to `--kj-fg-default`.
+ *
+ *   Typography needs no dedicated hook: set the ordinary `--kj-button-font`,
+ *   `--kj-button-font-size`, `--kj-button-letter-spacing` and
+ *   `--kj-button-text-transform` on this host and they reach each child,
+ *   since every knob is read as `var(name, default)`. The on-state colours
+ *   are the exception — variant rules declare those knobs on the element,
+ *   so they get their own `--kj-segmented-*` indirection.
  *
  * @doc-category Library/Actions
  * @doc
@@ -1888,7 +1903,9 @@ class KjButtonGroupComponent {
     ...(ngDevMode ? [{ debugName: "kjOrientation" }] : /* istanbul ignore next */ []));
     /**
      * Default variant forwarded to children via `KJ_BUTTON_GROUP`. Children
-     * that set their own `kjVariant` override this fallback.
+     * that set their own `kjVariant` override this fallback. Also mirrored to
+     * `data-variant` on the host, which is how `segmented` draws its shared
+     * shell and dividers.
      */
     kjVariant = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjVariant" }] : /* istanbul ignore next */ []));
@@ -1910,7 +1927,7 @@ class KjButtonGroupComponent {
     kjAriaLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjButtonGroupComponent, isStandalone: true, selector: "kj-button-group", inputs: { kjOrientation: { classPropertyName: "kjOrientation", publicName: "kjOrientation", isSignal: true, isRequired: false, transformFunction: null }, kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "kjAriaLabel()" }, classAttribute: "kj-button-group" }, hostDirectives: [{ directive: i1.KjButtonGroup, inputs: ["kjOrientation", "kjOrientation", "kjVariant", "kjVariant", "kjSize", "kjSize", "kjDisabled", "kjDisabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-button-group{--kj-button-group-gap: 0;display:inline-flex;flex-direction:row;align-items:stretch;gap:var(--kj-button-group-gap);border-radius:var(--kj-radius-field);isolation:isolate}.kj-button-group[data-orientation=vertical]{flex-direction:column}.kj-button-group:not([data-orientation=vertical])>kj-button>.kj-button{border-radius:0;margin-left:calc(-1 * var(--kj-border))}.kj-button-group:not([data-orientation=vertical])>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-bottom-left-radius:var(--kj-radius-field);margin-left:0}.kj-button-group:not([data-orientation=vertical])>kj-button:last-child>.kj-button{border-top-right-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group[data-orientation=vertical]>kj-button>.kj-button{border-radius:0;margin-top:calc(-1 * var(--kj-border));width:100%}.kj-button-group[data-orientation=vertical]>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-top-right-radius:var(--kj-radius-field);margin-top:0}.kj-button-group[data-orientation=vertical]>kj-button:last-child>.kj-button{border-bottom-left-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group>kj-button>.kj-button:hover,.kj-button-group>kj-button>.kj-button:focus-visible,.kj-button-group>kj-button>.kj-button[aria-pressed=true]{z-index:1}.kj-button-group[data-disabled]{opacity:.7}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjButtonGroupComponent, isStandalone: true, selector: "kj-button-group", inputs: { kjOrientation: { classPropertyName: "kjOrientation", publicName: "kjOrientation", isSignal: true, isRequired: false, transformFunction: null }, kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "kjAriaLabel()" }, classAttribute: "kj-button-group" }, hostDirectives: [{ directive: i1.KjButtonGroup, inputs: ["kjOrientation", "kjOrientation", "kjVariant", "kjVariant", "kjSize", "kjSize", "kjDisabled", "kjDisabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-button-group{--kj-button-group-gap: 0;display:inline-flex;flex-direction:row;align-items:stretch;gap:var(--kj-button-group-gap);border-radius:var(--kj-radius-field);isolation:isolate}.kj-button-group[data-orientation=vertical]{flex-direction:column}.kj-button-group:not([data-orientation=vertical])>kj-button>.kj-button{border-radius:0;margin-left:calc(-1 * var(--kj-border))}.kj-button-group:not([data-orientation=vertical])>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-bottom-left-radius:var(--kj-radius-field);margin-left:0}.kj-button-group:not([data-orientation=vertical])>kj-button:last-child>.kj-button{border-top-right-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group[data-orientation=vertical]>kj-button>.kj-button{border-radius:0;margin-top:calc(-1 * var(--kj-border));width:100%}.kj-button-group[data-orientation=vertical]>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-top-right-radius:var(--kj-radius-field);margin-top:0}.kj-button-group[data-orientation=vertical]>kj-button:last-child>.kj-button{border-bottom-left-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group>kj-button>.kj-button:hover,.kj-button-group>kj-button>.kj-button:focus-visible,.kj-button-group>kj-button>.kj-button[aria-pressed=true]{z-index:1}.kj-button-group[data-variant=segmented]{border:var(--kj-border) solid var(--kj-segmented-border, var(--kj-border-default));border-radius:var(--kj-radius-field);overflow:hidden}.kj-button-group[data-variant=segmented]>kj-button>.kj-button{margin-left:0;margin-top:0;border-radius:0}.kj-button-group[data-variant=segmented]:not([data-orientation=vertical])>kj-button+kj-button>.kj-button{border-left:var(--kj-border) solid var(--kj-segmented-border, var(--kj-border-default))}.kj-button-group[data-variant=segmented][data-orientation=vertical]>kj-button+kj-button>.kj-button{border-top:var(--kj-border) solid var(--kj-segmented-border, var(--kj-border-default))}.kj-button-group[data-disabled]{opacity:.7}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjButtonGroupComponent, decorators: [{
             type: Component,
@@ -1922,7 +1939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kj-button-group',
                         '[attr.aria-label]': 'kjAriaLabel()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-button-group{--kj-button-group-gap: 0;display:inline-flex;flex-direction:row;align-items:stretch;gap:var(--kj-button-group-gap);border-radius:var(--kj-radius-field);isolation:isolate}.kj-button-group[data-orientation=vertical]{flex-direction:column}.kj-button-group:not([data-orientation=vertical])>kj-button>.kj-button{border-radius:0;margin-left:calc(-1 * var(--kj-border))}.kj-button-group:not([data-orientation=vertical])>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-bottom-left-radius:var(--kj-radius-field);margin-left:0}.kj-button-group:not([data-orientation=vertical])>kj-button:last-child>.kj-button{border-top-right-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group[data-orientation=vertical]>kj-button>.kj-button{border-radius:0;margin-top:calc(-1 * var(--kj-border));width:100%}.kj-button-group[data-orientation=vertical]>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-top-right-radius:var(--kj-radius-field);margin-top:0}.kj-button-group[data-orientation=vertical]>kj-button:last-child>.kj-button{border-bottom-left-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group>kj-button>.kj-button:hover,.kj-button-group>kj-button>.kj-button:focus-visible,.kj-button-group>kj-button>.kj-button[aria-pressed=true]{z-index:1}.kj-button-group[data-disabled]{opacity:.7}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-button-group{--kj-button-group-gap: 0;display:inline-flex;flex-direction:row;align-items:stretch;gap:var(--kj-button-group-gap);border-radius:var(--kj-radius-field);isolation:isolate}.kj-button-group[data-orientation=vertical]{flex-direction:column}.kj-button-group:not([data-orientation=vertical])>kj-button>.kj-button{border-radius:0;margin-left:calc(-1 * var(--kj-border))}.kj-button-group:not([data-orientation=vertical])>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-bottom-left-radius:var(--kj-radius-field);margin-left:0}.kj-button-group:not([data-orientation=vertical])>kj-button:last-child>.kj-button{border-top-right-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group[data-orientation=vertical]>kj-button>.kj-button{border-radius:0;margin-top:calc(-1 * var(--kj-border));width:100%}.kj-button-group[data-orientation=vertical]>kj-button:first-child>.kj-button{border-top-left-radius:var(--kj-radius-field);border-top-right-radius:var(--kj-radius-field);margin-top:0}.kj-button-group[data-orientation=vertical]>kj-button:last-child>.kj-button{border-bottom-left-radius:var(--kj-radius-field);border-bottom-right-radius:var(--kj-radius-field)}.kj-button-group>kj-button>.kj-button:hover,.kj-button-group>kj-button>.kj-button:focus-visible,.kj-button-group>kj-button>.kj-button[aria-pressed=true]{z-index:1}.kj-button-group[data-variant=segmented]{border:var(--kj-border) solid var(--kj-segmented-border, var(--kj-border-default));border-radius:var(--kj-radius-field);overflow:hidden}.kj-button-group[data-variant=segmented]>kj-button>.kj-button{margin-left:0;margin-top:0;border-radius:0}.kj-button-group[data-variant=segmented]:not([data-orientation=vertical])>kj-button+kj-button>.kj-button{border-left:var(--kj-border) solid var(--kj-segmented-border, var(--kj-border-default))}.kj-button-group[data-variant=segmented][data-orientation=vertical]>kj-button+kj-button>.kj-button{border-top:var(--kj-border) solid var(--kj-segmented-border, var(--kj-border-default))}.kj-button-group[data-disabled]{opacity:.7}}\n"] }]
         }], propDecorators: { kjOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOrientation", required: false }] }], 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 }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
 
 /**
@@ -3209,77 +3226,74 @@ function escapeHtml(s) {
         .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;
-}
 /**
- * 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.
+ * GFM, with `breaks` on: a chat turn treats a single newline as a line break,
+ * which is what people type. `pedantic` off so the parser stays forgiving of
+ * the half-formed markdown a model emits mid-stream.
+ *
+ * `marked` dropped its sanitizer in v5 and passes source HTML through
+ * verbatim, so both HTML token kinds are overridden to escape instead. A chat
+ * turn is model or user output: it may *describe* markup, never inject it.
  */
-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('');
-}
+marked.use({
+    gfm: true,
+    breaks: true,
+    pedantic: false,
+    renderer: {
+        html(token) {
+            return escapeHtml(typeof token === 'string' ? token : token.raw);
+        },
+    },
+    tokenizer: {},
+});
+marked.use({
+    renderer: {
+        // Inline HTML (`<img …>` mid-sentence) travels a different path than a
+        // block-level HTML token, and needs the same treatment.
+        text(token) {
+            const anyToken = token;
+            if (Array.isArray(anyToken.tokens) && anyToken.tokens.length > 0) {
+                return this.parser.parseInline(anyToken.tokens);
+            }
+            return escapeHtml(String(anyToken.text ?? anyToken.raw ?? ''));
+        },
+    },
+});
 /**
- * Parse a lightweight markdown subset into blocks: fenced code blocks
- * (```lang) become structural `code` blocks; everything else becomes `prose`
- * blocks with sanitised inline HTML.
+ * Parse markdown into blocks: fenced code becomes a structural `code` block,
+ * everything else is rendered to HTML as a `prose` block.
  *
- * 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.
+ * Code is split out at the TOKEN level rather than by regex so an indented
+ * block, a `~~~` fence, or a fence inside a list is still recognised — and so
+ * a stray fence in a partial stream cannot swallow the rest of the message.
  */
 function renderMarkdown(src) {
+    const tokens = marked.lexer(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;
+    let prose = [];
+    const flushProse = () => {
+        if (prose.length === 0)
+            return;
+        // `marked.parser` reads `links` off the token list for reference-style
+        // links; a plain slice would drop them and render `[a][b]` verbatim.
+        const list = prose;
+        list.links = tokens.links;
+        blocks.push({ kind: 'prose', html: marked.parser(list) });
+        prose = [];
+    };
+    for (const token of tokens) {
+        if (token.type === 'code') {
+            flushProse();
+            blocks.push({
+                kind: 'code',
+                lang: typeof token.lang === 'string' ? token.lang.split(/\s+/)[0] : '',
+                code: String(token.text ?? ''),
+            });
+            continue;
+        }
+        prose.push(token);
     }
-    const rest = src.slice(last);
-    if (rest.trim())
-        blocks.push({ kind: 'prose', html: renderProse(rest) });
+    flushProse();
     return blocks;
 }
 
@@ -3325,8 +3339,15 @@ class KjChatMessage {
     _copied = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_copied" }] : /* istanbul ignore next */ []));
     copiedIndex = this._copied.asReadonly();
+    /**
+     * Sanitise rather than bypass. `renderMarkdown` already escapes raw HTML at
+     * the parse layer, but a chat body is model or user output — the one place
+     * in a UI kit where trusting a single layer is a bad bet. `sanitize` strips
+     * anything the parser somehow let through instead of waving it past
+     * Angular's checks.
+     */
     safe(html) {
-        return this.sanitizer.bypassSecurityTrustHtml(html);
+        return this.sanitizer.sanitize(SecurityContext.HTML, html) ?? '';
     }
     async copy(code, index) {
         try {
@@ -3546,6 +3567,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Provider-agnostic: pair with `KjPromptInput` and drive `KjChatStore` from any
  * model / stream — the kit ships **no** LLM SDK or backend.
  *
+ * @doc-example Custom thread items
+ *   `provideKjChat` maps an item `type` to a component, so a thread can render
+ *   turns the kit knows nothing about. Ordinary messages are untouched.
+ *   @doc-file ai-chat.custom-items.example.ts
  * @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
@@ -3587,6 +3612,30 @@ class KjChatThread {
     ...(ngDevMode ? [{ debugName: "kjLabel" }] : /* istanbul ignore next */ []));
     /** @internal — the coalescing announcer for the polite live region. */
     announcer = inject(KjChatAnnouncer);
+    config = inject(KJ_CHAT_CONFIG);
+    /**
+     * The registered component for a message's `type`, or `null` to let the
+     * built-in renderer draw it. A message with no `type` never consults the
+     * registry — that is the overwhelmingly common case and must stay free.
+     *
+     * An unknown `type` falls back to the configured `fallback`, and failing
+     * that to the built-in renderer: a transcript that silently drops a turn is
+     * worse than one that renders it plainly.
+     */
+    rendererFor(message) {
+        if (!message.type)
+            return null;
+        return this.config.renderers[message.type] ?? this.config.fallback ?? null;
+    }
+    /** The neutral shape handed to a registered renderer's `item` input. */
+    itemFor(message) {
+        return {
+            id: message.id,
+            type: message.type,
+            role: message.role,
+            data: message.data ?? message.content,
+        };
+    }
     injector = inject(Injector);
     logEl = viewChild.required('log');
     lastId = null;
@@ -3636,7 +3685,13 @@ class KjChatThread {
     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" />
+        @if (rendererFor(m); as renderer) {
+          <ng-container
+            *ngComponentOutlet="renderer; inputs: { item: itemFor(m), message: m }"
+          ></ng-container>
+        } @else {
+          <kj-chat-message [message]="m" />
+        }
       }
     </div>
 
@@ -3644,14 +3699,20 @@ class KjChatThread {
     <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 });
+  `, 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"] }, { 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: KjChatThread, decorators: [{
             type: Component,
-            args: [{ selector: 'kj-chat-thread', standalone: true, imports: [KjChatLog, KjChatMessage], providers: [KjChatAnnouncer], template: `
+            args: [{ selector: 'kj-chat-thread', standalone: true, imports: [KjChatLog, KjChatMessage, NgComponentOutlet], 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" />
+        @if (rendererFor(m); as renderer) {
+          <ng-container
+            *ngComponentOutlet="renderer; inputs: { item: itemFor(m), message: m }"
+          ></ng-container>
+        } @else {
+          <kj-chat-message [message]="m" />
+        }
       }
     </div>