@kouji-ui/components 0.7.1 → 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, 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 { 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, 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, KjPopoverContent, 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, 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, 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';
@@ -773,7 +774,7 @@ class KjAvatarComponent {
         {{ content() }}
       }
     </span>
-  `, isInline: true, styles: ["@layer kj.component{.kj-avatar{--kj-avatar-size: 2.5rem;--kj-avatar-bg: var(--kj-bg-field);--kj-avatar-fg: var(--kj-fg-default);--kj-avatar-radius: 9999px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--kj-avatar-size);height:var(--kj-avatar-size);background:var(--kj-avatar-bg);color:var(--kj-avatar-fg);border-radius:var(--kj-avatar-radius);overflow:hidden;font:.875rem / 1 var(--kj-font-sans);font-weight:600}.kj-avatar[data-shape=rounded]{--kj-avatar-radius: var(--kj-radius-box-lg)}.kj-avatar[hidden]{display:none}.kj-avatar[data-size=xs]{--kj-avatar-size: 1.5rem;font-size:.6875rem}.kj-avatar[data-size=sm]{--kj-avatar-size: 2rem;font-size:.75rem}.kj-avatar[data-size=lg]{--kj-avatar-size: 3rem;font-size:1rem}.kj-avatar[data-size=xl]{--kj-avatar-size: 4rem;font-size:1.25rem}.kj-avatar-image{width:100%;height:100%;object-fit:cover;display:block}.kj-avatar-image:not([data-loaded]){opacity:0}.kj-avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.kj-avatar-fallback:not([data-visible]){opacity:0;pointer-events:none}}\n"], dependencies: [{ kind: "directive", type: KjAvatarImage, selector: "[kjAvatarImage]" }, { kind: "directive", type: KjAvatarFallback, selector: "[kjAvatarFallback]" }, { 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-avatar{--kj-avatar-size: 2.5rem;--kj-avatar-bg: var(--kj-bg-field);--kj-avatar-fg: var(--kj-fg-default);--kj-avatar-radius: 9999px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--kj-avatar-size);height:var(--kj-avatar-size);background:var(--kj-avatar-bg);color:var(--kj-avatar-fg);border-radius:var(--kj-avatar-radius);overflow:hidden;font:.875rem / 1 var(--kj-font-sans);font-weight:600}.kj-avatar[data-shape=rounded]{--kj-avatar-radius: var(--kj-radius-box-lg)}.kj-avatar[hidden]{display:none}.kj-avatar-group-overflow-trigger{display:inline-flex;padding:0;border:0;background:none;border-radius:9999px}.kj-avatar-group-overflow-trigger[aria-expanded=true] .kj-avatar{--kj-avatar-bg: var(--kj-bg-primary);--kj-avatar-fg: var(--kj-fg-on-primary)}.kj-avatar[data-size=xs]{--kj-avatar-size: 1.5rem;font-size:.6875rem}.kj-avatar[data-size=sm]{--kj-avatar-size: 2rem;font-size:.75rem}.kj-avatar[data-size=lg]{--kj-avatar-size: 3rem;font-size:1rem}.kj-avatar[data-size=xl]{--kj-avatar-size: 4rem;font-size:1.25rem}.kj-avatar-image{width:100%;height:100%;object-fit:cover;display:block}.kj-avatar-image:not([data-loaded]){opacity:0}.kj-avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.kj-avatar-fallback:not([data-visible]){opacity:0;pointer-events:none}}\n"], dependencies: [{ kind: "directive", type: KjAvatarImage, selector: "[kjAvatarImage]" }, { kind: "directive", type: KjAvatarFallback, selector: "[kjAvatarFallback]" }, { 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: KjAvatarComponent, decorators: [{
             type: Component,
@@ -795,9 +796,206 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         // Mirror `alt` to `title` so hovering the avatar shows a native tooltip.
                         // `alt` alone only surfaces to screen readers / fallback rendering.
                         '[attr.title]': 'alt()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-avatar{--kj-avatar-size: 2.5rem;--kj-avatar-bg: var(--kj-bg-field);--kj-avatar-fg: var(--kj-fg-default);--kj-avatar-radius: 9999px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--kj-avatar-size);height:var(--kj-avatar-size);background:var(--kj-avatar-bg);color:var(--kj-avatar-fg);border-radius:var(--kj-avatar-radius);overflow:hidden;font:.875rem / 1 var(--kj-font-sans);font-weight:600}.kj-avatar[data-shape=rounded]{--kj-avatar-radius: var(--kj-radius-box-lg)}.kj-avatar[hidden]{display:none}.kj-avatar[data-size=xs]{--kj-avatar-size: 1.5rem;font-size:.6875rem}.kj-avatar[data-size=sm]{--kj-avatar-size: 2rem;font-size:.75rem}.kj-avatar[data-size=lg]{--kj-avatar-size: 3rem;font-size:1rem}.kj-avatar[data-size=xl]{--kj-avatar-size: 4rem;font-size:1.25rem}.kj-avatar-image{width:100%;height:100%;object-fit:cover;display:block}.kj-avatar-image:not([data-loaded]){opacity:0}.kj-avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.kj-avatar-fallback:not([data-visible]){opacity:0;pointer-events:none}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-avatar{--kj-avatar-size: 2.5rem;--kj-avatar-bg: var(--kj-bg-field);--kj-avatar-fg: var(--kj-fg-default);--kj-avatar-radius: 9999px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--kj-avatar-size);height:var(--kj-avatar-size);background:var(--kj-avatar-bg);color:var(--kj-avatar-fg);border-radius:var(--kj-avatar-radius);overflow:hidden;font:.875rem / 1 var(--kj-font-sans);font-weight:600}.kj-avatar[data-shape=rounded]{--kj-avatar-radius: var(--kj-radius-box-lg)}.kj-avatar[hidden]{display:none}.kj-avatar-group-overflow-trigger{display:inline-flex;padding:0;border:0;background:none;border-radius:9999px}.kj-avatar-group-overflow-trigger[aria-expanded=true] .kj-avatar{--kj-avatar-bg: var(--kj-bg-primary);--kj-avatar-fg: var(--kj-fg-on-primary)}.kj-avatar[data-size=xs]{--kj-avatar-size: 1.5rem;font-size:.6875rem}.kj-avatar[data-size=sm]{--kj-avatar-size: 2rem;font-size:.75rem}.kj-avatar[data-size=lg]{--kj-avatar-size: 3rem;font-size:1rem}.kj-avatar[data-size=xl]{--kj-avatar-size: 4rem;font-size:1.25rem}.kj-avatar-image{width:100%;height:100%;object-fit:cover;display:block}.kj-avatar-image:not([data-loaded]){opacity:0}.kj-avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.kj-avatar-fallback:not([data-visible]){opacity:0;pointer-events:none}}\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
 
+/**
+ * Click-triggered popover. Compose `[kjPopoverTrigger]` + `<kj-popover-content [kjFor]="t">`
+ * with optional `[kjPopoverTitle]` heading and `[kjPopoverClose]` button. The
+ * wrapper itself only projects content — its purpose is to host the docs tags.
+ *
+ * @doc
+ * @doc-name popover
+ * @doc-is-main
+ * @doc-example Default
+ *   A trigger button + content panel — the bare-minimum recipe.
+ *   @doc-file popover.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common usages — info panel, side-pinned, and
+ *   modal confirmation. Use this as the copy-paste starting point.
+ *   @doc-file popover.usage.example.ts
+ * @doc-example Sides
+ *   `kjSide="top|right|bottom|left"` pins the panel relative to the trigger.
+ *   @doc-file popover.sides.example.ts
+ * @doc-example Modal
+ *   `[kjTrap]="true"` traps focus inside the panel until it closes.
+ *   @doc-file popover.modal.example.ts
+ * @doc-example Cancellable
+ *   `[kjPopoverClose]` on a button dismisses the panel and restores focus.
+ *   @doc-file popover.cancellable.example.ts
+ * @doc-example With form
+ *   Embed inputs inside the panel — focus returns to the trigger on close.
+ *   @doc-file popover.with-form.example.ts
+ *
+ * @doc-keyboard
+ *   Enter|Space     — Opens the popover from the trigger
+ *   Escape          — Closes the popover and returns focus to the trigger
+ *   Tab             — Moves focus through the panel; cycles inside when [kjTrap]="true"
+ *   Shift+Tab       — Reverse-cycles focus
+ *
+ * @doc-aria
+ *   aria-haspopup   — Set to "dialog" on the trigger
+ *   aria-expanded   — Reflects the open/closed state on the trigger
+ *   aria-controls   — Links the trigger to the panel id
+ *   role="dialog"   — On the panel (provided via the overlay primitive)
+ *   aria-labelledby — Wire to `[kjPopoverTitle]` heading id for an accessible name
+ *
+ * @doc-touch
+ *   Trigger buttons inherit `kj-button` sizing — use `kjSize="md"` or larger
+ *   to satisfy WCAG 2.5.5 (44×44). The panel itself is not a touch target.
+ *
+ * @doc-a11y
+ *   The panel is portalled to `document.body` so it escapes clipping
+ *   ancestors while staying linked via `aria-controls`. Focus is returned
+ *   to the trigger on close, and outside clicks dismiss by default. For
+ *   destructive confirmations, set `[kjTrap]="true"` so the user must
+ *   commit or cancel via a visible affordance.
+ *
+ * @doc-related dialog,tooltip,dropdown-menu
+ *
+ * @doc-css-var
+ *   --kj-popover-bg            — Panel background fill. Inherits --kj-bg-elevated.
+ *   --kj-popover-fg            — Panel foreground (text) color.
+ *   --kj-popover-border-color  — Panel border color. Inherits --kj-border-default.
+ *   --kj-popover-radius        — Panel corner radius. Inherits --kj-radius-box.
+ *   --kj-popover-padding-x     — Horizontal padding inside the panel.
+ *   --kj-popover-padding-y     — Vertical padding inside the panel.
+ *   --kj-popover-shadow        — Drop shadow under the panel. Inherits --kj-shadow-md.
+ *   --kj-popover-arrow-size    — Edge length of the optional arrow indicator.
+ *
+ * @doc-category Library/Overlay
+ */
+class KjPopoverComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjPopoverComponent, isStandalone: true, selector: "kj-popover", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-popover-content{--kj-popover-bg: var(--kj-bg-elevated);--kj-popover-fg: var(--kj-fg-default);--kj-popover-border-color: var(--kj-border-default);--kj-popover-radius: var(--kj-radius-box);--kj-popover-padding-x: var(--kj-space-md);--kj-popover-padding-y: var(--kj-space-md);--kj-popover-shadow: var(--kj-shadow-md, 0 12px 32px rgb(0 0 0 / .18));--kj-popover-arrow-size: 8px;display:block;box-sizing:border-box;max-width:min(28rem,calc(100vw - 2rem));background:var(--kj-popover-bg);color:var(--kj-popover-fg);border:var(--kj-border) solid var(--kj-popover-border-color);border-radius:var(--kj-popover-radius);padding:var(--kj-popover-padding-y) var(--kj-popover-padding-x);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-popover-shadow);pointer-events:auto;z-index:1000;word-wrap:break-word}.kj-popover-content[hidden]{display:none}.kj-popover-title{display:block;font-size:.9375rem;font-weight:600;margin:0 0 var(--kj-space-xs);color:var(--kj-fg-default)}.kj-popover-arrow{position:absolute;width:var(--kj-popover-arrow-size, 8px);height:var(--kj-popover-arrow-size, 8px);background:var(--kj-popover-bg, var(--kj-bg-elevated));border:var(--kj-border) solid var(--kj-popover-border-color, var(--kj-border-default));transform:rotate(45deg)}.kj-popover-content[data-side=top] .kj-popover-arrow{bottom:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-top-color:transparent;border-left-color:transparent}.kj-popover-content[data-side=bottom] .kj-popover-arrow{top:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-bottom-color:transparent;border-right-color:transparent}.kj-popover-content[data-side=left] .kj-popover-arrow{right:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-left-color:transparent;border-bottom-color:transparent}.kj-popover-content[data-side=right] .kj-popover-arrow{left:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-right-color:transparent;border-top-color:transparent}body[data-kj-scroll-lock=true]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.kj-popover-content{transition:opacity .14s ease-out,transform .14s ease-out}.kj-popover-content[data-state=closed]{opacity:0;transform:scale(.98)}.kj-popover-content[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: KjPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-popover', standalone: true, imports: [KjPopoverTrigger, KjPopoverContent, KjPopoverArrow, KjPopoverClose, KjPopoverTitle], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-popover-content{--kj-popover-bg: var(--kj-bg-elevated);--kj-popover-fg: var(--kj-fg-default);--kj-popover-border-color: var(--kj-border-default);--kj-popover-radius: var(--kj-radius-box);--kj-popover-padding-x: var(--kj-space-md);--kj-popover-padding-y: var(--kj-space-md);--kj-popover-shadow: var(--kj-shadow-md, 0 12px 32px rgb(0 0 0 / .18));--kj-popover-arrow-size: 8px;display:block;box-sizing:border-box;max-width:min(28rem,calc(100vw - 2rem));background:var(--kj-popover-bg);color:var(--kj-popover-fg);border:var(--kj-border) solid var(--kj-popover-border-color);border-radius:var(--kj-popover-radius);padding:var(--kj-popover-padding-y) var(--kj-popover-padding-x);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-popover-shadow);pointer-events:auto;z-index:1000;word-wrap:break-word}.kj-popover-content[hidden]{display:none}.kj-popover-title{display:block;font-size:.9375rem;font-weight:600;margin:0 0 var(--kj-space-xs);color:var(--kj-fg-default)}.kj-popover-arrow{position:absolute;width:var(--kj-popover-arrow-size, 8px);height:var(--kj-popover-arrow-size, 8px);background:var(--kj-popover-bg, var(--kj-bg-elevated));border:var(--kj-border) solid var(--kj-popover-border-color, var(--kj-border-default));transform:rotate(45deg)}.kj-popover-content[data-side=top] .kj-popover-arrow{bottom:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-top-color:transparent;border-left-color:transparent}.kj-popover-content[data-side=bottom] .kj-popover-arrow{top:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-bottom-color:transparent;border-right-color:transparent}.kj-popover-content[data-side=left] .kj-popover-arrow{right:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-left-color:transparent;border-bottom-color:transparent}.kj-popover-content[data-side=right] .kj-popover-arrow{left:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-right-color:transparent;border-top-color:transparent}body[data-kj-scroll-lock=true]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.kj-popover-content{transition:opacity .14s ease-out,transform .14s ease-out}.kj-popover-content[data-state=closed]{opacity:0;transform:scale(.98)}.kj-popover-content[data-state=open]{opacity:1;transform:scale(1)}}}\n"] }]
+        }] });
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * The panel a collapsing group (`kj-tag-list`, `kj-avatar-group`) opens from
+ * its "+N" chip: the consumer's `kjOverflowContent` template when one is
+ * projected, otherwise a plain list of the collapsed items' labels.
+ *
+ * Owns the keyboard story the hover trigger cannot: `focusFirst()` moves
+ * focus into the panel (the chip calls it on ArrowDown / Enter), Escape
+ * inside the panel returns focus to the chip, and focus leaving the panel
+ * closes it.
+ *
+ * @doc-category Library/Data display
+ * @doc
+ * @doc-name overflow
+ */
+class KjOverflowPanelComponent {
+    /** The "+N" chip's popover trigger. */
+    kjFor = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjFor" }] : /* istanbul ignore next */ []));
+    /** Number of collapsed items. */
+    kjCount = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjCount" }] : /* istanbul ignore next */ []));
+    /** Index of the first collapsed item in the consumer's collection. */
+    kjStart = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjStart" }] : /* istanbul ignore next */ []));
+    /** Exclusive end index of the collapsed range. */
+    kjEnd = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjEnd" }] : /* istanbul ignore next */ []));
+    /** Labels of the collapsed items — the default panel content. */
+    kjLabels = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLabels" }] : /* istanbul ignore next */ []));
+    /** Consumer template rendered instead of the label list. */
+    kjTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjTemplate" }] : /* istanbul ignore next */ []));
+    kjSide = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjSide" }] : /* istanbul ignore next */ []));
+    kjAlign = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAlign" }] : /* istanbul ignore next */ []));
+    panel = viewChild(KjPopoverContent, { ...(ngDevMode ? { debugName: "panel" } : /* istanbul ignore next */ {}), read: ElementRef });
+    context = computed(() => ({
+        $implicit: this.kjCount(),
+        start: this.kjStart(),
+        end: this.kjEnd(),
+        labels: this.kjLabels(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+    /** Moves focus to the first focusable element of the panel (or the panel itself). */
+    focusFirst() {
+        const panel = this.panel()?.nativeElement;
+        if (!panel)
+            return;
+        const first = panel.querySelector(FOCUSABLE);
+        if (first) {
+            first.focus();
+            return;
+        }
+        if (!panel.hasAttribute('tabindex'))
+            panel.setAttribute('tabindex', '-1');
+        panel.focus();
+    }
+    focusTrigger() {
+        this.kjFor().controller.context.triggerEl()?.focus();
+    }
+    onFocusOut(event) {
+        const panel = this.panel()?.nativeElement;
+        const next = event.relatedTarget;
+        if (!panel || !next || panel.contains(next))
+            return;
+        if (this.kjFor().controller.context.triggerEl()?.contains(next))
+            return;
+        this.kjFor().controller.close('programmatic');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjOverflowPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjOverflowPanelComponent, isStandalone: true, selector: "kj-overflow-panel", inputs: { kjFor: { classPropertyName: "kjFor", publicName: "kjFor", isSignal: true, isRequired: true, transformFunction: null }, kjCount: { classPropertyName: "kjCount", publicName: "kjCount", isSignal: true, isRequired: true, transformFunction: null }, kjStart: { classPropertyName: "kjStart", publicName: "kjStart", isSignal: true, isRequired: true, transformFunction: null }, kjEnd: { classPropertyName: "kjEnd", publicName: "kjEnd", isSignal: true, isRequired: true, transformFunction: null }, kjLabels: { classPropertyName: "kjLabels", publicName: "kjLabels", isSignal: true, isRequired: false, transformFunction: null }, kjTemplate: { classPropertyName: "kjTemplate", publicName: "kjTemplate", isSignal: true, isRequired: false, transformFunction: null }, kjSide: { classPropertyName: "kjSide", publicName: "kjSide", isSignal: true, isRequired: false, transformFunction: null }, kjAlign: { classPropertyName: "kjAlign", publicName: "kjAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "panel", first: true, predicate: KjPopoverContent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    <kj-popover>
+      <kj-popover-content
+        class="kj-overflow-panel"
+        [kjFor]="kjFor()"
+        [kjSide]="kjSide()"
+        [kjAlign]="kjAlign()"
+        (keydown.escape)="focusTrigger()"
+        (focusout)="onFocusOut($event)"
+      >
+        @if (kjTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl.template; context: context()" />
+        } @else {
+          <ul class="kj-overflow-list" role="list">
+            @for (label of kjLabels(); track $index) {
+              <li class="kj-overflow-item">{{ label }}</li>
+            }
+          </ul>
+        }
+      </kj-popover-content>
+    </kj-popover>
+  `, isInline: true, styles: ["@layer kj.component{.kj-overflow-panel{--kj-popover-padding-x: var(--kj-space-sm);--kj-popover-padding-y: var(--kj-space-sm);min-width:10rem}.kj-overflow-list{display:flex;flex-direction:column;gap:var(--kj-space-xs);margin:0;padding:0;list-style:none}.kj-overflow-item{padding:var(--kj-space-xs) var(--kj-space-sm);font-size:var(--kj-text-sm);line-height:1.4;color:var(--kj-fg-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kj-overflow-trigger{appearance:none;font:inherit;cursor:pointer}.kj-overflow-trigger:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KjPopoverComponent, selector: "kj-popover" }, { kind: "component", type: KjPopoverContent, selector: "kj-popover-content", inputs: ["kjSide", "kjAlign", "kjOffset", "kjTrap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjOverflowPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-overflow-panel', standalone: true, imports: [NgTemplateOutlet, KjPopoverComponent, KjPopoverContent], template: `
+    <kj-popover>
+      <kj-popover-content
+        class="kj-overflow-panel"
+        [kjFor]="kjFor()"
+        [kjSide]="kjSide()"
+        [kjAlign]="kjAlign()"
+        (keydown.escape)="focusTrigger()"
+        (focusout)="onFocusOut($event)"
+      >
+        @if (kjTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl.template; context: context()" />
+        } @else {
+          <ul class="kj-overflow-list" role="list">
+            @for (label of kjLabels(); track $index) {
+              <li class="kj-overflow-item">{{ label }}</li>
+            }
+          </ul>
+        }
+      </kj-popover-content>
+    </kj-popover>
+  `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-overflow-panel{--kj-popover-padding-x: var(--kj-space-sm);--kj-popover-padding-y: var(--kj-space-sm);min-width:10rem}.kj-overflow-list{display:flex;flex-direction:column;gap:var(--kj-space-xs);margin:0;padding:0;list-style:none}.kj-overflow-item{padding:var(--kj-space-xs) var(--kj-space-sm);font-size:var(--kj-text-sm);line-height:1.4;color:var(--kj-fg-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kj-overflow-trigger{appearance:none;font:inherit;cursor:pointer}.kj-overflow-trigger:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}}\n"] }]
+        }], propDecorators: { kjFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFor", required: true }] }], kjCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCount", required: true }] }], kjStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStart", required: true }] }], kjEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnd", required: true }] }], kjLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabels", required: false }] }], kjTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTemplate", required: false }] }], kjSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSide", required: false }] }], kjAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAlign", required: false }] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KjPopoverContent), { ...{ read: ElementRef }, isSignal: true }] }] } });
+
 /**
  * Avatar group wrapper. Stacks projected `<kj-avatar>` children with a
  * count-aware `aria-label`, an overflow chip when `kjMax` is exceeded, and
@@ -805,10 +1003,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * core directive. The wrapper supplies the chip element and the host
  * `<ng-content/>` slot.
  *
- * The overflow chip is a regular `<kj-avatar>` rendering `'+N'` text; it is
- * `aria-hidden` because the group's count-aware label already conveys
- * totality (e.g. `"3 of 8 collaborators"`), so exposing the chip again would
- * duplicate the announcement.
+ * The overflow chip is a button: hovering, focusing or tapping it opens a
+ * panel listing the collapsed avatars (their `alt`, else their text content).
+ * Project an `<ng-template kjOverflowContent>` to render that panel yourself —
+ * the context carries the collapsed range (`start`/`end`) so the consumer
+ * slices its own data and adds actions (remove, open a profile…).
+ *
+ * The `<kj-avatar>` inside the chip renders `'+N'` and is `aria-hidden`
+ * because the group's count-aware label already conveys totality (e.g.
+ * `"3 of 8 collaborators"`); the button itself is named "Show N more".
  *
  * @doc-example Default
  *   The default playground — five stacked avatars with the group's defaults.
@@ -818,8 +1021,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  *   and a list-mode variant for documents-shared screens.
  *   @doc-file avatar-group.usage.example.ts
  * @doc-example Overflow
- *   `kjMax` caps visible avatars; the remainder collapses into a "+N" chip.
+ *   `kjMax` caps visible avatars; the remainder collapses into a "+N" chip whose
+ *   hover panel lists the hidden names.
  *   @doc-file avatar-group.overflow.example.ts
+ * @doc-example Overflow template
+ *   `<ng-template kjOverflowContent>` renders the hidden avatars your way — here
+ *   with a remove action per collaborator.
+ *   @doc-file avatar-group.overflow-template.example.ts
  * @doc-example Sizes
  *   Group `kjSize` cascades onto every projected `<kj-avatar>` for a uniform pile.
  *   @doc-file avatar-group.sizes.example.ts
@@ -830,24 +1038,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  *   `kjRole="list"` switches to a list landmark — use for "shared by" rows in docs UIs.
  *   @doc-file avatar-group.list.example.ts
  *
+ * @doc-keyboard
+ *   Tab             — Focuses the "+N" chip; the panel opens
+ *   ArrowDown|Enter — Moves focus into the panel
+ *   Escape          — Closes the panel and returns focus to the chip
+ *
  * @doc-aria
  *   aria-label       — Count-aware label like "3 of 8 collaborators"; override via `kjAriaLabelOverride`
  *   role             — Defaults to `img` (face-pile); set `kjRole="list"` for a true list landmark
- *   aria-hidden      — Forced on the +N chip so the count isn't re-announced
+ *   aria-hidden      — Forced on the +N avatar so the count isn't re-announced; the chip button is named "Show N more"
+ *   aria-expanded    — Reflects the panel state on the chip button
  *
  * @doc-touch
- *   Stacked avatars are decorative — they aren't tab stops. Pair the group
- *   with an interactive trigger (button/link) sized ≥ 44×44 when clicking is
- *   meaningful (e.g. opens a collaborator dialog).
+ *   Stacked avatars are decorative — they aren't tab stops. The "+N" chip is
+ *   a real button (tap opens the panel); pair the group with an interactive
+ *   trigger sized ≥ 44×44 when clicking an avatar is meaningful.
  *
  * @doc-a11y
  *   The face-pile is an `img` landmark with a count-aware accessible name so
  *   AT users hear "3 of 8 collaborators" rather than every initial. Switch to
  *   `role="list"` whenever the order/identity of each face matters
- *   semantically. The overflow chip is always `aria-hidden` because the
- *   group's name already conveys totality.
+ *   semantically. The "+N" chip is a named button, so the collapsed names are
+ *   one keystroke away for keyboard and screen-reader users.
  *
- * @doc-related avatar,badge,tag
+ * @doc-related avatar,badge,tag,overflow
  *
  * @doc-css-var
  *   --kj-avatar-size    — Avatar diameter. Sizes (xs/sm/md/lg/xl) override.
@@ -868,9 +1082,34 @@ class KjAvatarGroupComponent {
      * the same instance and gives us access to `overflowCount`, `shape`, etc.
      */
     group = inject(KJ_AVATAR_GROUP);
+    i18n = inject(KjTranslateService);
+    /** Text of the "+N" chip. Defaults to the `overflow.more` translation (`+{count}`). */
+    kjOverflowLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOverflowLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the chip button. Defaults to the `overflow.show` translation (`Show {count} more`). */
+    kjOverflowAriaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOverflowAriaLabel" }] : /* istanbul ignore next */ []));
+    avatars = contentChildren(KjAvatarComponent, { ...(ngDevMode ? { debugName: "avatars" } : /* istanbul ignore next */ {}), descendants: true });
+    overflowTemplate = contentChild(KjOverflowContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowTemplate" }] : /* istanbul ignore next */ []));
+    panel = viewChild(KjOverflowPanelComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
     overflowCount = this.group.overflowCount;
-    overflowLabel = computed(() => `+${this.overflowCount()}`, /* @ts-ignore */
+    overflowLabel = computed(() => {
+        const n = this.overflowCount();
+        return this.kjOverflowLabel()?.(n) ?? this.i18n.translate('overflow.more', { count: n });
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overflowLabel" }] : /* istanbul ignore next */ []));
+    overflowAriaLabel = computed(() => {
+        const n = this.overflowCount();
+        return this.kjOverflowAriaLabel()?.(n) ?? this.i18n.translate('overflow.show', { count: n });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Labels of the collapsed avatars: `alt`, else a string `content`. */
+    hiddenLabels = computed(() => this.avatars()
+        .slice(this.group.visibleCount())
+        .map((a) => a.alt() ?? (typeof a.content() === 'string' ? a.content() : '')), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenLabels" }] : /* istanbul ignore next */ []));
     /**
      * Chip shape mirrors the group's default shape so the chip visually
      * matches the avatars. `<kj-avatar>`'s own `shape` default is `'circle'`,
@@ -879,18 +1118,41 @@ class KjAvatarGroupComponent {
      */
     chipShape = computed(() => this.group.shape() ?? 'circle', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "chipShape" }] : /* istanbul ignore next */ []));
+    focusPanel(event) {
+        event.preventDefault();
+        this.panel()?.focusFirst();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjAvatarGroupComponent, isStandalone: true, selector: "kj-avatar-group", host: { classAttribute: "kj-avatar-group" }, hostDirectives: [{ directive: i1.KjAvatarGroup, inputs: ["kjMax", "kjMax", "kjTotal", "kjTotal", "kjSize", "kjSize", "kjShape", "kjShape", "kjAriaLabel", "kjAriaLabel", "kjAriaLabelFormat", "kjAriaLabelFormat", "kjRole", "kjRole", "kjAriaLabelOverride", "kjAriaLabelOverride"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjAvatarGroupComponent, isStandalone: true, selector: "kj-avatar-group", inputs: { kjOverflowLabel: { classPropertyName: "kjOverflowLabel", publicName: "kjOverflowLabel", isSignal: true, isRequired: false, transformFunction: null }, kjOverflowAriaLabel: { classPropertyName: "kjOverflowAriaLabel", publicName: "kjOverflowAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kj-avatar-group" }, queries: [{ propertyName: "avatars", predicate: KjAvatarComponent, descendants: true, isSignal: true }, { propertyName: "overflowTemplate", first: true, predicate: KjOverflowContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: KjOverflowPanelComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.KjAvatarGroup, inputs: ["kjMax", "kjMax", "kjTotal", "kjTotal", "kjSize", "kjSize", "kjShape", "kjShape", "kjAriaLabel", "kjAriaLabel", "kjAriaLabelFormat", "kjAriaLabelFormat", "kjRole", "kjRole", "kjAriaLabelOverride", "kjAriaLabelOverride"] }], ngImport: i0, template: `
     <ng-content />
     @if (overflowCount() > 0) {
-      <kj-avatar
-        class="kj-avatar-group-overflow"
-        aria-hidden="true"
-        [content]="overflowLabel()"
-        [shape]="chipShape()"
+      <button
+        type="button"
+        class="kj-overflow-trigger kj-avatar-group-overflow-trigger"
+        kjPopoverTrigger
+        kjTrigger="hover"
+        #trg="kjPopoverTrigger"
+        [attr.aria-label]="overflowAriaLabel()"
+        (keydown.arrowdown)="focusPanel($event)"
+        (keydown.enter)="focusPanel($event)"
+      >
+        <kj-avatar
+          class="kj-avatar-group-overflow"
+          aria-hidden="true"
+          [content]="overflowLabel()"
+          [shape]="chipShape()"
+        />
+      </button>
+      <kj-overflow-panel
+        [kjFor]="trg"
+        [kjCount]="overflowCount()"
+        [kjStart]="group.visibleCount()"
+        [kjEnd]="group.total()"
+        [kjLabels]="hiddenLabels()"
+        [kjTemplate]="overflowTemplate()"
       />
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: KjAvatarComponent, selector: "kj-avatar", inputs: ["src", "alt", "content", "size", "shape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: KjAvatarComponent, selector: "kj-avatar", inputs: ["src", "alt", "content", "size", "shape"] }, { kind: "directive", type: KjPopoverTrigger, selector: "[kjPopoverTrigger]", inputs: ["kjTrigger", "kjDisabled", "kjOpenDelay", "kjCloseDelay"], exportAs: ["kjPopoverTrigger"] }, { kind: "component", type: KjOverflowPanelComponent, selector: "kj-overflow-panel", inputs: ["kjFor", "kjCount", "kjStart", "kjEnd", "kjLabels", "kjTemplate", "kjSide", "kjAlign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjAvatarGroupComponent, decorators: [{
             type: Component,
@@ -912,25 +1174,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             ],
                         },
                     ],
-                    imports: [KjAvatarComponent],
+                    imports: [KjAvatarComponent, KjPopoverTrigger, KjOverflowPanelComponent],
                     template: `
     <ng-content />
     @if (overflowCount() > 0) {
-      <kj-avatar
-        class="kj-avatar-group-overflow"
-        aria-hidden="true"
-        [content]="overflowLabel()"
-        [shape]="chipShape()"
+      <button
+        type="button"
+        class="kj-overflow-trigger kj-avatar-group-overflow-trigger"
+        kjPopoverTrigger
+        kjTrigger="hover"
+        #trg="kjPopoverTrigger"
+        [attr.aria-label]="overflowAriaLabel()"
+        (keydown.arrowdown)="focusPanel($event)"
+        (keydown.enter)="focusPanel($event)"
+      >
+        <kj-avatar
+          class="kj-avatar-group-overflow"
+          aria-hidden="true"
+          [content]="overflowLabel()"
+          [shape]="chipShape()"
+        />
+      </button>
+      <kj-overflow-panel
+        [kjFor]="trg"
+        [kjCount]="overflowCount()"
+        [kjStart]="group.visibleCount()"
+        [kjEnd]="group.total()"
+        [kjLabels]="hiddenLabels()"
+        [kjTemplate]="overflowTemplate()"
       />
     }
   `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        'class': 'kj-avatar-group',
+                        class: 'kj-avatar-group',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { kjOverflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOverflowLabel", required: false }] }], kjOverflowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOverflowAriaLabel", required: false }] }], avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjAvatarComponent), { ...{ descendants: true }, isSignal: true }] }], overflowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjOverflowContent), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KjOverflowPanelComponent), { isSignal: true }] }] } });
 
 /**
  * Styled wrapper around the headless `KjBadge` directive.
@@ -1501,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,
@@ -1524,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 }] }] } });
 
 /**
@@ -1559,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
@@ -1590,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
@@ -1608,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 */ []));
@@ -1630,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,
@@ -1642,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 }] }] } });
 
 /**
@@ -2929,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;
 }
 
@@ -3045,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 {
@@ -3266,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
@@ -3307,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;
@@ -3356,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>
 
@@ -3364,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>
 
@@ -12074,81 +12415,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, host: { 'style': 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-password-input{--kj-password-input-bg: var(--kj-bg-field);--kj-password-input-fg: var(--kj-fg-default);--kj-password-input-border-color: var(--kj-border-default);--kj-password-input-border-style: solid;--kj-password-input-border-width: var(--kj-border);--kj-password-input-radius: var(--kj-radius-field);--kj-password-input-padding-x: var(--kj-space-md);--kj-password-input-padding-y: var(--kj-space-sm);--kj-password-input-font: var(--kj-font-sans);--kj-password-input-font-size: var(--kj-text-sm);--kj-password-input-placeholder-fg: var(--kj-fg-muted);--kj-password-input-toggle-fg: var(--kj-fg-muted);--kj-password-input-toggle-fg-hover: var(--kj-fg-default);--kj-password-input-height: 2.25rem;display:inline-flex;align-items:center;gap:var(--kj-space-xs);inline-size:100%;height:var(--kj-password-input-height);background:var(--kj-password-input-bg);color:var(--kj-password-input-fg);border:var(--kj-password-input-border-width) var(--kj-password-input-border-style) var(--kj-password-input-border-color);border-radius:var(--kj-password-input-radius);padding:0 var(--kj-password-input-padding-x);font:var(--kj-password-input-font-size) / 1.4 var(--kj-password-input-font);transition:var(--kj-transition)}.kj-password-input[data-size=sm]{--kj-password-input-height: 2rem;--kj-password-input-font-size: .8125rem}.kj-password-input[data-size=lg]{--kj-password-input-height: 2.75rem;--kj-password-input-font-size: 1rem}.kj-password-input__field{flex:1 1 auto;inline-size:100%;height:100%;background:transparent;color:inherit;border:0;outline:0;padding:0;font:inherit}.kj-password-input__field::placeholder{color:var(--kj-password-input-placeholder-fg)}.kj-password-input:focus-within{outline:2px solid var(--kj-fg-primary);outline-offset:2px;--kj-password-input-border-color: var(--kj-fg-primary)}.kj-password-input:has([aria-invalid=true]){--kj-password-input-border-color: var(--kj-fg-danger)}.kj-password-input:has([aria-disabled=true]),.kj-password-input:has(:disabled){opacity:.55;cursor:not-allowed}.kj-password-input__toggle{display:inline-flex;align-items:center;justify-content:center;inline-size:1.75rem;block-size:1.75rem;margin-inline-start:var(--kj-space-xs);color:var(--kj-password-input-toggle-fg);background:transparent;border:0;border-radius:var(--kj-radius-field);cursor:pointer}.kj-password-input__toggle:hover,.kj-password-input__toggle:focus-visible{color:var(--kj-password-input-toggle-fg-hover)}.kj-password-input__toggle:focus-visible{outline:2px solid var(--kj-fg-primary);outline-offset:2px}.kj-password-input__icon{inline-size:1rem;block-size:1rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.kj-password-strength{display:flex;gap:var(--kj-space-xs);inline-size:100%;margin-block-start:var(--kj-space-xs)}.kj-password-strength__seg{flex:1 1 0;block-size:.25rem;background:var(--kj-bg-surface);border-radius:2px;transition:background-color var(--kj-transition)}.kj-password-strength[data-score=\"1\"] .kj-password-strength__seg:nth-child(-n+1),.kj-password-strength[data-score=\"2\"] .kj-password-strength__seg:nth-child(-n+2),.kj-password-strength[data-score=\"3\"] .kj-password-strength__seg:nth-child(-n+3),.kj-password-strength[data-score=\"4\"] .kj-password-strength__seg:nth-child(-n+4){background:var(--kj-password-strength-color, var(--kj-bg-primary))}.kj-password-strength[data-score=\"1\"]{--kj-password-strength-color: var(--kj-bg-danger)}.kj-password-strength[data-score=\"2\"]{--kj-password-strength-color: var(--kj-bg-warning, #d97706)}.kj-password-strength[data-score=\"3\"],.kj-password-strength[data-score=\"4\"]{--kj-password-strength-color: var(--kj-bg-success, #059669)}.kj-password-strength__label{display:block;margin-block-start:var(--kj-space-xs);font-size:var(--kj-text-xs);color:var(--kj-fg-muted)}.kj-password-caps-lock-warning{display:block;margin-block-start:var(--kj-space-xs);font-size:var(--kj-text-xs);color:var(--kj-fg-warning, #d97706)}.kj-password-caps-lock-warning[hidden]{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { kjAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAutocomplete", required: false }] }], kjMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMaxLength", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjInvalid", required: false }] }], kjRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRevealed", required: false }] }, { type: i0.Output, args: ["kjRevealedChange"] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjShowToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowToggle", required: false }] }], kjShowStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowStrength", required: false }] }], kjShowCapsLockWarning: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowCapsLockWarning", required: false }] }], kjShowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowLabel", required: false }] }], kjHideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjHideLabel", required: false }] }], kjCapsLockMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCapsLockMessage", required: false }] }] } });
 
-/**
- * Click-triggered popover. Compose `[kjPopoverTrigger]` + `<kj-popover-content [kjFor]="t">`
- * with optional `[kjPopoverTitle]` heading and `[kjPopoverClose]` button. The
- * wrapper itself only projects content — its purpose is to host the docs tags.
- *
- * @doc
- * @doc-name popover
- * @doc-is-main
- * @doc-example Default
- *   A trigger button + content panel — the bare-minimum recipe.
- *   @doc-file popover.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common usages — info panel, side-pinned, and
- *   modal confirmation. Use this as the copy-paste starting point.
- *   @doc-file popover.usage.example.ts
- * @doc-example Sides
- *   `kjSide="top|right|bottom|left"` pins the panel relative to the trigger.
- *   @doc-file popover.sides.example.ts
- * @doc-example Modal
- *   `[kjTrap]="true"` traps focus inside the panel until it closes.
- *   @doc-file popover.modal.example.ts
- * @doc-example Cancellable
- *   `[kjPopoverClose]` on a button dismisses the panel and restores focus.
- *   @doc-file popover.cancellable.example.ts
- * @doc-example With form
- *   Embed inputs inside the panel — focus returns to the trigger on close.
- *   @doc-file popover.with-form.example.ts
- *
- * @doc-keyboard
- *   Enter|Space     — Opens the popover from the trigger
- *   Escape          — Closes the popover and returns focus to the trigger
- *   Tab             — Moves focus through the panel; cycles inside when [kjTrap]="true"
- *   Shift+Tab       — Reverse-cycles focus
- *
- * @doc-aria
- *   aria-haspopup   — Set to "dialog" on the trigger
- *   aria-expanded   — Reflects the open/closed state on the trigger
- *   aria-controls   — Links the trigger to the panel id
- *   role="dialog"   — On the panel (provided via the overlay primitive)
- *   aria-labelledby — Wire to `[kjPopoverTitle]` heading id for an accessible name
- *
- * @doc-touch
- *   Trigger buttons inherit `kj-button` sizing — use `kjSize="md"` or larger
- *   to satisfy WCAG 2.5.5 (44×44). The panel itself is not a touch target.
- *
- * @doc-a11y
- *   The panel is portalled to `document.body` so it escapes clipping
- *   ancestors while staying linked via `aria-controls`. Focus is returned
- *   to the trigger on close, and outside clicks dismiss by default. For
- *   destructive confirmations, set `[kjTrap]="true"` so the user must
- *   commit or cancel via a visible affordance.
- *
- * @doc-related dialog,tooltip,dropdown-menu
- *
- * @doc-css-var
- *   --kj-popover-bg            — Panel background fill. Inherits --kj-bg-elevated.
- *   --kj-popover-fg            — Panel foreground (text) color.
- *   --kj-popover-border-color  — Panel border color. Inherits --kj-border-default.
- *   --kj-popover-radius        — Panel corner radius. Inherits --kj-radius-box.
- *   --kj-popover-padding-x     — Horizontal padding inside the panel.
- *   --kj-popover-padding-y     — Vertical padding inside the panel.
- *   --kj-popover-shadow        — Drop shadow under the panel. Inherits --kj-shadow-md.
- *   --kj-popover-arrow-size    — Edge length of the optional arrow indicator.
- *
- * @doc-category Library/Overlay
- */
-class KjPopoverComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjPopoverComponent, isStandalone: true, selector: "kj-popover", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-popover-content{--kj-popover-bg: var(--kj-bg-elevated);--kj-popover-fg: var(--kj-fg-default);--kj-popover-border-color: var(--kj-border-default);--kj-popover-radius: var(--kj-radius-box);--kj-popover-padding-x: var(--kj-space-md);--kj-popover-padding-y: var(--kj-space-md);--kj-popover-shadow: var(--kj-shadow-md, 0 12px 32px rgb(0 0 0 / .18));--kj-popover-arrow-size: 8px;display:block;box-sizing:border-box;max-width:min(28rem,calc(100vw - 2rem));background:var(--kj-popover-bg);color:var(--kj-popover-fg);border:var(--kj-border) solid var(--kj-popover-border-color);border-radius:var(--kj-popover-radius);padding:var(--kj-popover-padding-y) var(--kj-popover-padding-x);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-popover-shadow);pointer-events:auto;z-index:1000;word-wrap:break-word}.kj-popover-content[hidden]{display:none}.kj-popover-title{display:block;font-size:.9375rem;font-weight:600;margin:0 0 var(--kj-space-xs);color:var(--kj-fg-default)}.kj-popover-arrow{position:absolute;width:var(--kj-popover-arrow-size, 8px);height:var(--kj-popover-arrow-size, 8px);background:var(--kj-popover-bg, var(--kj-bg-elevated));border:var(--kj-border) solid var(--kj-popover-border-color, var(--kj-border-default));transform:rotate(45deg)}.kj-popover-content[data-side=top] .kj-popover-arrow{bottom:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-top-color:transparent;border-left-color:transparent}.kj-popover-content[data-side=bottom] .kj-popover-arrow{top:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-bottom-color:transparent;border-right-color:transparent}.kj-popover-content[data-side=left] .kj-popover-arrow{right:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-left-color:transparent;border-bottom-color:transparent}.kj-popover-content[data-side=right] .kj-popover-arrow{left:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-right-color:transparent;border-top-color:transparent}body[data-kj-scroll-lock=true]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.kj-popover-content{transition:opacity .14s ease-out,transform .14s ease-out}.kj-popover-content[data-state=closed]{opacity:0;transform:scale(.98)}.kj-popover-content[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: KjPopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kj-popover', standalone: true, imports: [KjPopoverTrigger, KjPopoverContent, KjPopoverArrow, KjPopoverClose, KjPopoverTitle], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-popover-content{--kj-popover-bg: var(--kj-bg-elevated);--kj-popover-fg: var(--kj-fg-default);--kj-popover-border-color: var(--kj-border-default);--kj-popover-radius: var(--kj-radius-box);--kj-popover-padding-x: var(--kj-space-md);--kj-popover-padding-y: var(--kj-space-md);--kj-popover-shadow: var(--kj-shadow-md, 0 12px 32px rgb(0 0 0 / .18));--kj-popover-arrow-size: 8px;display:block;box-sizing:border-box;max-width:min(28rem,calc(100vw - 2rem));background:var(--kj-popover-bg);color:var(--kj-popover-fg);border:var(--kj-border) solid var(--kj-popover-border-color);border-radius:var(--kj-popover-radius);padding:var(--kj-popover-padding-y) var(--kj-popover-padding-x);font:.875rem / 1.5 var(--kj-font-sans);box-shadow:var(--kj-popover-shadow);pointer-events:auto;z-index:1000;word-wrap:break-word}.kj-popover-content[hidden]{display:none}.kj-popover-title{display:block;font-size:.9375rem;font-weight:600;margin:0 0 var(--kj-space-xs);color:var(--kj-fg-default)}.kj-popover-arrow{position:absolute;width:var(--kj-popover-arrow-size, 8px);height:var(--kj-popover-arrow-size, 8px);background:var(--kj-popover-bg, var(--kj-bg-elevated));border:var(--kj-border) solid var(--kj-popover-border-color, var(--kj-border-default));transform:rotate(45deg)}.kj-popover-content[data-side=top] .kj-popover-arrow{bottom:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-top-color:transparent;border-left-color:transparent}.kj-popover-content[data-side=bottom] .kj-popover-arrow{top:calc(var(--kj-popover-arrow-size) / -2);left:50%;margin-left:calc(var(--kj-popover-arrow-size) / -2);border-bottom-color:transparent;border-right-color:transparent}.kj-popover-content[data-side=left] .kj-popover-arrow{right:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-left-color:transparent;border-bottom-color:transparent}.kj-popover-content[data-side=right] .kj-popover-arrow{left:calc(var(--kj-popover-arrow-size) / -2);top:50%;margin-top:calc(var(--kj-popover-arrow-size) / -2);border-right-color:transparent;border-top-color:transparent}body[data-kj-scroll-lock=true]{overflow:hidden}@media(prefers-reduced-motion:no-preference){.kj-popover-content{transition:opacity .14s ease-out,transform .14s ease-out}.kj-popover-content[data-state=closed]{opacity:0;transform:scale(.98)}.kj-popover-content[data-state=open]{opacity:1;transform:scale(1)}}}\n"] }]
-        }] });
-
 /**
  * Styled wrapper around the headless `KjProgressBar` directive. Composes the
  * core directive on an inner element and renders the inner
@@ -18642,6 +18908,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * @doc-example Tag list
  *   Wrap chips in `<kj-tag-list>` for single-tab-stop + arrow-key navigation.
  *   @doc-file tag.list.example.ts
+ * @doc-example Overflow
+ *   `[kjMax]` on the list collapses the extra chips into a "+N" chip whose hover
+ *   panel lists them.
+ *   @doc-file tag.overflow.example.ts
+ * @doc-example Overflow template
+ *   `<ng-template kjOverflowContent>` renders the collapsed chips your way — here
+ *   as rows with a remove action.
+ *   @doc-file tag.overflow-template.example.ts
  *
  * @doc-keyboard
  *   Enter|Space — Activates a selectable tag; flips `aria-pressed`
@@ -18688,26 +18962,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjTagComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjTagComponent, isStandalone: true, selector: "kj-tag", host: { classAttribute: "kj-tag" }, hostDirectives: [{ directive: i1.KjTag, inputs: ["kjTagSelectable", "kjTagSelectable", "kjTagSelected", "kjTagSelected", "kjTagLabel", "kjTagLabel", "kjTagDisabled", "kjTagDisabled"], outputs: ["kjTagSelectedChange", "kjTagSelectedChange", "kjTagRemoved", "kjTagRemoved"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-tag{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: transparent;--kj-tag-radius: var(--kj-radius-selector);--kj-tag-padding-x: var(--kj-space-sm);--kj-tag-padding-y: .125rem;--kj-tag-font-size: .75rem;--kj-tag-gap: .25rem;display:inline-flex;align-items:center;gap:var(--kj-tag-gap);background:var(--kj-tag-bg);color:var(--kj-tag-fg);border:var(--kj-border) solid var(--kj-tag-border-color);border-radius:var(--kj-tag-radius);padding:var(--kj-tag-padding-y) var(--kj-tag-padding-x);font:var(--kj-tag-font-size) / 1 var(--kj-font-sans);font-weight:500;transition:background-color var(--kj-transition),color var(--kj-transition),border-color var(--kj-transition)}.kj-tag[data-variant=secondary]{--kj-tag-bg: var(--kj-bg-field);--kj-tag-fg: var(--kj-fg-default)}.kj-tag[data-variant=destructive],.kj-tag[data-variant=danger]{--kj-tag-bg: var(--kj-bg-danger);--kj-tag-fg: var(--kj-fg-on-danger)}.kj-tag[data-variant=success]{--kj-tag-bg: var(--kj-bg-success, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-success, var(--kj-fg-on-primary))}.kj-tag[data-variant=warning]{--kj-tag-bg: var(--kj-bg-warning, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-warning, var(--kj-fg-on-primary))}.kj-tag[data-variant=info]{--kj-tag-bg: var(--kj-bg-info, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-info, var(--kj-fg-on-primary))}.kj-tag[data-variant=outline]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: var(--kj-border-default)}.kj-tag[data-variant=ghost]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: transparent}.kj-tag[data-size=xs]{--kj-tag-padding-x: .1875rem;--kj-tag-padding-y: .03125rem;--kj-tag-font-size: .5625rem;--kj-tag-gap: .125rem}.kj-tag[data-size=sm]{--kj-tag-padding-x: .375rem;--kj-tag-padding-y: .125rem;--kj-tag-font-size: .6875rem}.kj-tag[data-size=lg]{--kj-tag-padding-x: var(--kj-space-md);--kj-tag-font-size: .875rem}.kj-tag[role=button],.kj-tag[role=option]{cursor:pointer;-webkit-user-select:none;user-select:none}.kj-tag[role=button]:hover,.kj-tag[role=option]:hover{--kj-tag-bg: color-mix(in oklab, var(--kj-tag-bg) 88%, var(--kj-fg-default))}.kj-tag[aria-pressed=true],.kj-tag[aria-selected=true],.kj-tag[data-selected]{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: var(--kj-bg-primary)}.kj-tag[data-focus-visible]:focus,.kj-tag:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}.kj-tag[aria-disabled=true],.kj-tag[data-disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-inline-start:.125rem;padding:0;border:none;background:transparent;color:inherit;border-radius:999px;cursor:pointer;line-height:1;font:inherit;position:relative}.kj-tag-remove:after{content:\"\";position:absolute;inset:-.875rem;border-radius:inherit}.kj-tag-remove:hover{background:color-mix(in oklab,currentColor 18%,transparent)}.kj-tag-remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.kj-tag-remove[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag-list{display:inline-flex;flex-wrap:wrap;gap:var(--kj-space-sm);align-items:center}.kj-tag-list[role=listbox]:focus-visible,.kj-tag-list[role=grid]:focus-visible{outline:2px solid var(--kj-bg-primary);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: KjTagComponent, isStandalone: true, selector: "kj-tag", host: { classAttribute: "kj-tag" }, hostDirectives: [{ directive: i1.KjTag, inputs: ["kjTagSelectable", "kjTagSelectable", "kjTagSelected", "kjTagSelected", "kjTagLabel", "kjTagLabel", "kjTagDisabled", "kjTagDisabled"], outputs: ["kjTagSelectedChange", "kjTagSelectedChange", "kjTagRemoved", "kjTagRemoved"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kj.component{.kj-tag{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: transparent;--kj-tag-radius: var(--kj-radius-selector);--kj-tag-padding-x: var(--kj-space-sm);--kj-tag-padding-y: .125rem;--kj-tag-font-size: .75rem;--kj-tag-gap: .25rem;display:inline-flex;align-items:center;gap:var(--kj-tag-gap);background:var(--kj-tag-bg);color:var(--kj-tag-fg);border:var(--kj-border) solid var(--kj-tag-border-color);border-radius:var(--kj-tag-radius);padding:var(--kj-tag-padding-y) var(--kj-tag-padding-x);font:var(--kj-tag-font-size) / 1 var(--kj-font-sans);font-weight:500;transition:background-color var(--kj-transition),color var(--kj-transition),border-color var(--kj-transition)}.kj-tag[data-variant=secondary]{--kj-tag-bg: var(--kj-bg-field);--kj-tag-fg: var(--kj-fg-default)}.kj-tag[data-variant=destructive],.kj-tag[data-variant=danger]{--kj-tag-bg: var(--kj-bg-danger);--kj-tag-fg: var(--kj-fg-on-danger)}.kj-tag[data-variant=success]{--kj-tag-bg: var(--kj-bg-success, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-success, var(--kj-fg-on-primary))}.kj-tag[data-variant=warning]{--kj-tag-bg: var(--kj-bg-warning, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-warning, var(--kj-fg-on-primary))}.kj-tag[data-variant=info]{--kj-tag-bg: var(--kj-bg-info, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-info, var(--kj-fg-on-primary))}.kj-tag[data-variant=outline]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: var(--kj-border-default)}.kj-tag[data-variant=ghost]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: transparent}.kj-tag[data-size=xs]{--kj-tag-padding-x: .1875rem;--kj-tag-padding-y: .03125rem;--kj-tag-font-size: .5625rem;--kj-tag-gap: .125rem}.kj-tag[data-size=sm]{--kj-tag-padding-x: .375rem;--kj-tag-padding-y: .125rem;--kj-tag-font-size: .6875rem}.kj-tag[data-size=lg]{--kj-tag-padding-x: var(--kj-space-md);--kj-tag-font-size: .875rem}.kj-tag[role=button],.kj-tag[role=option]{cursor:pointer;-webkit-user-select:none;user-select:none}.kj-tag[role=button]:hover,.kj-tag[role=option]:hover{--kj-tag-bg: color-mix(in oklab, var(--kj-tag-bg) 88%, var(--kj-fg-default))}.kj-tag[aria-pressed=true],.kj-tag[aria-selected=true],.kj-tag[data-selected]{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: var(--kj-bg-primary)}.kj-tag[data-focus-visible]:focus,.kj-tag:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}.kj-tag[aria-disabled=true],.kj-tag[data-disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-inline-start:.125rem;padding:0;border:none;background:transparent;color:inherit;border-radius:999px;cursor:pointer;line-height:1;font:inherit;position:relative}.kj-tag-remove:after{content:\"\";position:absolute;inset:-.875rem;border-radius:inherit}.kj-tag-remove:hover{background:color-mix(in oklab,currentColor 18%,transparent)}.kj-tag-remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.kj-tag-remove[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag[hidden]{display:none}.kj-tag-list{display:inline-flex;flex-wrap:wrap;gap:var(--kj-space-sm);align-items:center}.kj-tag-list-overflow{border-style:dashed;--kj-tag-border-color: var(--kj-border-default)}.kj-tag-list-overflow[aria-expanded=true]{--kj-tag-bg: var(--kj-bg-field)}.kj-tag-list[role=listbox]:focus-visible,.kj-tag-list[role=grid]:focus-visible{outline:2px solid var(--kj-bg-primary);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: KjTagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kj-tag', standalone: true, hostDirectives: [
                         {
                             directive: KjTag,
-                            inputs: [
-                                'kjTagSelectable',
-                                'kjTagSelected',
-                                'kjTagLabel',
-                                'kjTagDisabled',
-                            ],
+                            inputs: ['kjTagSelectable', 'kjTagSelected', 'kjTagLabel', 'kjTagDisabled'],
                             outputs: ['kjTagSelectedChange', 'kjTagRemoved'],
                         },
                     ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kj-tag',
                         // The KjVariant / KjSize host directives nested inside KjTag set
                         // [data-variant] / [data-size] on the same host element automatically.
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-tag{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: transparent;--kj-tag-radius: var(--kj-radius-selector);--kj-tag-padding-x: var(--kj-space-sm);--kj-tag-padding-y: .125rem;--kj-tag-font-size: .75rem;--kj-tag-gap: .25rem;display:inline-flex;align-items:center;gap:var(--kj-tag-gap);background:var(--kj-tag-bg);color:var(--kj-tag-fg);border:var(--kj-border) solid var(--kj-tag-border-color);border-radius:var(--kj-tag-radius);padding:var(--kj-tag-padding-y) var(--kj-tag-padding-x);font:var(--kj-tag-font-size) / 1 var(--kj-font-sans);font-weight:500;transition:background-color var(--kj-transition),color var(--kj-transition),border-color var(--kj-transition)}.kj-tag[data-variant=secondary]{--kj-tag-bg: var(--kj-bg-field);--kj-tag-fg: var(--kj-fg-default)}.kj-tag[data-variant=destructive],.kj-tag[data-variant=danger]{--kj-tag-bg: var(--kj-bg-danger);--kj-tag-fg: var(--kj-fg-on-danger)}.kj-tag[data-variant=success]{--kj-tag-bg: var(--kj-bg-success, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-success, var(--kj-fg-on-primary))}.kj-tag[data-variant=warning]{--kj-tag-bg: var(--kj-bg-warning, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-warning, var(--kj-fg-on-primary))}.kj-tag[data-variant=info]{--kj-tag-bg: var(--kj-bg-info, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-info, var(--kj-fg-on-primary))}.kj-tag[data-variant=outline]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: var(--kj-border-default)}.kj-tag[data-variant=ghost]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: transparent}.kj-tag[data-size=xs]{--kj-tag-padding-x: .1875rem;--kj-tag-padding-y: .03125rem;--kj-tag-font-size: .5625rem;--kj-tag-gap: .125rem}.kj-tag[data-size=sm]{--kj-tag-padding-x: .375rem;--kj-tag-padding-y: .125rem;--kj-tag-font-size: .6875rem}.kj-tag[data-size=lg]{--kj-tag-padding-x: var(--kj-space-md);--kj-tag-font-size: .875rem}.kj-tag[role=button],.kj-tag[role=option]{cursor:pointer;-webkit-user-select:none;user-select:none}.kj-tag[role=button]:hover,.kj-tag[role=option]:hover{--kj-tag-bg: color-mix(in oklab, var(--kj-tag-bg) 88%, var(--kj-fg-default))}.kj-tag[aria-pressed=true],.kj-tag[aria-selected=true],.kj-tag[data-selected]{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: var(--kj-bg-primary)}.kj-tag[data-focus-visible]:focus,.kj-tag:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}.kj-tag[aria-disabled=true],.kj-tag[data-disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-inline-start:.125rem;padding:0;border:none;background:transparent;color:inherit;border-radius:999px;cursor:pointer;line-height:1;font:inherit;position:relative}.kj-tag-remove:after{content:\"\";position:absolute;inset:-.875rem;border-radius:inherit}.kj-tag-remove:hover{background:color-mix(in oklab,currentColor 18%,transparent)}.kj-tag-remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.kj-tag-remove[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag-list{display:inline-flex;flex-wrap:wrap;gap:var(--kj-space-sm);align-items:center}.kj-tag-list[role=listbox]:focus-visible,.kj-tag-list[role=grid]:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-tag{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: transparent;--kj-tag-radius: var(--kj-radius-selector);--kj-tag-padding-x: var(--kj-space-sm);--kj-tag-padding-y: .125rem;--kj-tag-font-size: .75rem;--kj-tag-gap: .25rem;display:inline-flex;align-items:center;gap:var(--kj-tag-gap);background:var(--kj-tag-bg);color:var(--kj-tag-fg);border:var(--kj-border) solid var(--kj-tag-border-color);border-radius:var(--kj-tag-radius);padding:var(--kj-tag-padding-y) var(--kj-tag-padding-x);font:var(--kj-tag-font-size) / 1 var(--kj-font-sans);font-weight:500;transition:background-color var(--kj-transition),color var(--kj-transition),border-color var(--kj-transition)}.kj-tag[data-variant=secondary]{--kj-tag-bg: var(--kj-bg-field);--kj-tag-fg: var(--kj-fg-default)}.kj-tag[data-variant=destructive],.kj-tag[data-variant=danger]{--kj-tag-bg: var(--kj-bg-danger);--kj-tag-fg: var(--kj-fg-on-danger)}.kj-tag[data-variant=success]{--kj-tag-bg: var(--kj-bg-success, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-success, var(--kj-fg-on-primary))}.kj-tag[data-variant=warning]{--kj-tag-bg: var(--kj-bg-warning, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-warning, var(--kj-fg-on-primary))}.kj-tag[data-variant=info]{--kj-tag-bg: var(--kj-bg-info, var(--kj-bg-primary));--kj-tag-fg: var(--kj-fg-on-info, var(--kj-fg-on-primary))}.kj-tag[data-variant=outline]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: var(--kj-border-default)}.kj-tag[data-variant=ghost]{--kj-tag-bg: transparent;--kj-tag-fg: var(--kj-fg-default);--kj-tag-border-color: transparent}.kj-tag[data-size=xs]{--kj-tag-padding-x: .1875rem;--kj-tag-padding-y: .03125rem;--kj-tag-font-size: .5625rem;--kj-tag-gap: .125rem}.kj-tag[data-size=sm]{--kj-tag-padding-x: .375rem;--kj-tag-padding-y: .125rem;--kj-tag-font-size: .6875rem}.kj-tag[data-size=lg]{--kj-tag-padding-x: var(--kj-space-md);--kj-tag-font-size: .875rem}.kj-tag[role=button],.kj-tag[role=option]{cursor:pointer;-webkit-user-select:none;user-select:none}.kj-tag[role=button]:hover,.kj-tag[role=option]:hover{--kj-tag-bg: color-mix(in oklab, var(--kj-tag-bg) 88%, var(--kj-fg-default))}.kj-tag[aria-pressed=true],.kj-tag[aria-selected=true],.kj-tag[data-selected]{--kj-tag-bg: var(--kj-bg-primary);--kj-tag-fg: var(--kj-fg-on-primary);--kj-tag-border-color: var(--kj-bg-primary)}.kj-tag[data-focus-visible]:focus,.kj-tag:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}.kj-tag[aria-disabled=true],.kj-tag[data-disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-inline-start:.125rem;padding:0;border:none;background:transparent;color:inherit;border-radius:999px;cursor:pointer;line-height:1;font:inherit;position:relative}.kj-tag-remove:after{content:\"\";position:absolute;inset:-.875rem;border-radius:inherit}.kj-tag-remove:hover{background:color-mix(in oklab,currentColor 18%,transparent)}.kj-tag-remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.kj-tag-remove[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-tag[hidden]{display:none}.kj-tag-list{display:inline-flex;flex-wrap:wrap;gap:var(--kj-space-sm);align-items:center}.kj-tag-list-overflow{border-style:dashed;--kj-tag-border-color: var(--kj-border-default)}.kj-tag-list-overflow[aria-expanded=true]{--kj-tag-bg: var(--kj-bg-field)}.kj-tag-list[role=listbox]:focus-visible,.kj-tag-list[role=grid]:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px}}\n"] }]
         }] });
 /**
  * Trailing remove button for `<kj-tag>`. Composes the headless `KjTagRemove`
@@ -18744,15 +19013,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }] });
 /**
  * Optional chip-group container. Provides the listbox / grid / group ARIA
- * wiring + roving tabindex via the headless `KjTagList` directive. Standalone
- * tags work without it; wrap chips in `<kj-tag-list>` whenever the group
- * needs a single tab stop and arrow-key navigation.
+ * wiring + roving tabindex via the headless `KjTagList` directive, and — with
+ * `[kjMax]` — collapses the chips past the cap into a "+N" chip. Hovering,
+ * focusing or tapping that chip opens a panel listing the collapsed chips;
+ * project an `<ng-template kjOverflowContent>` to render the panel yourself
+ * (the context carries the collapsed range, so you slice your own data and
+ * add actions such as remove).
+ *
+ * Standalone tags work without it; wrap chips in `<kj-tag-list>` whenever the
+ * group needs a single tab stop and arrow-key navigation.
+ *
+ * The "+N" chip is a button rendered inside the container: keep the container
+ * on its default `group` role when using `kjMax` (a `listbox` / `grid` only
+ * admits option / row children).
  * @doc
  * @doc-name tag
  */
 class KjTagListComponent {
+    list = inject(KjTagList, { self: true });
+    i18n = inject(KjTranslateService);
+    /** Text of the "+N" chip. Defaults to the `overflow.more` translation (`+{count}`). */
+    kjOverflowLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOverflowLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name of the chip button. Defaults to the `overflow.show` translation (`Show {count} more`). */
+    kjOverflowAriaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOverflowAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Variant of the "+N" chip. Default `secondary`. */
+    kjOverflowVariant = input('secondary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOverflowVariant" }] : /* istanbul ignore next */ []));
+    overflowTemplate = contentChild(KjOverflowContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowTemplate" }] : /* istanbul ignore next */ []));
+    panel = viewChild(KjOverflowPanelComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    overflowCount = this.list.overflowCount;
+    overflowLabel = computed(() => {
+        const n = this.overflowCount();
+        return this.kjOverflowLabel()?.(n) ?? this.i18n.translate('overflow.more', { count: n });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowLabel" }] : /* istanbul ignore next */ []));
+    overflowAriaLabel = computed(() => {
+        const n = this.overflowCount();
+        return this.kjOverflowAriaLabel()?.(n) ?? this.i18n.translate('overflow.show', { count: n });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowAriaLabel" }] : /* istanbul ignore next */ []));
+    focusPanel(event) {
+        event.preventDefault();
+        this.panel()?.focusFirst();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTagListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: KjTagListComponent, isStandalone: true, selector: "kj-tag-list", host: { classAttribute: "kj-tag-list" }, hostDirectives: [{ directive: i1.KjTagList, inputs: ["kjTagListRole", "kjTagListRole", "kjTagListOrientation", "kjTagListOrientation", "kjTagListMultiple", "kjTagListMultiple", "kjTagListDisabled", "kjTagListDisabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjTagListComponent, isStandalone: true, selector: "kj-tag-list", inputs: { kjOverflowLabel: { classPropertyName: "kjOverflowLabel", publicName: "kjOverflowLabel", isSignal: true, isRequired: false, transformFunction: null }, kjOverflowAriaLabel: { classPropertyName: "kjOverflowAriaLabel", publicName: "kjOverflowAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, kjOverflowVariant: { classPropertyName: "kjOverflowVariant", publicName: "kjOverflowVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kj-tag-list" }, queries: [{ propertyName: "overflowTemplate", first: true, predicate: KjOverflowContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: KjOverflowPanelComponent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.KjTagList, inputs: ["kjTagListRole", "kjTagListRole", "kjTagListOrientation", "kjTagListOrientation", "kjTagListMultiple", "kjTagListMultiple", "kjTagListDisabled", "kjTagListDisabled", "kjMax", "kjMax"] }], ngImport: i0, template: `
+    <ng-content />
+    @if (overflowCount() > 0) {
+      <button
+        type="button"
+        class="kj-tag kj-overflow-trigger kj-tag-list-overflow"
+        [attr.data-variant]="kjOverflowVariant()"
+        kjPopoverTrigger
+        kjTrigger="hover"
+        #trg="kjPopoverTrigger"
+        [attr.aria-label]="overflowAriaLabel()"
+        (keydown.arrowdown)="focusPanel($event)"
+        (keydown.enter)="focusPanel($event)"
+      >
+        {{ overflowLabel() }}
+      </button>
+      <kj-overflow-panel
+        [kjFor]="trg"
+        [kjCount]="overflowCount()"
+        [kjStart]="list.visibleCount()"
+        [kjEnd]="list.total()"
+        [kjLabels]="list.hiddenLabels()"
+        [kjTemplate]="overflowTemplate()"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: KjPopoverTrigger, selector: "[kjPopoverTrigger]", inputs: ["kjTrigger", "kjDisabled", "kjOpenDelay", "kjCloseDelay"], exportAs: ["kjPopoverTrigger"] }, { kind: "component", type: KjOverflowPanelComponent, selector: "kj-overflow-panel", inputs: ["kjFor", "kjCount", "kjStart", "kjEnd", "kjLabels", "kjTemplate", "kjSide", "kjAlign"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTagListComponent, decorators: [{
             type: Component,
@@ -18767,17 +19101,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                                 'kjTagListOrientation',
                                 'kjTagListMultiple',
                                 'kjTagListDisabled',
+                                'kjMax',
                             ],
                         },
                     ],
-                    template: `<ng-content />`,
+                    imports: [KjPopoverTrigger, KjOverflowPanelComponent],
+                    template: `
+    <ng-content />
+    @if (overflowCount() > 0) {
+      <button
+        type="button"
+        class="kj-tag kj-overflow-trigger kj-tag-list-overflow"
+        [attr.data-variant]="kjOverflowVariant()"
+        kjPopoverTrigger
+        kjTrigger="hover"
+        #trg="kjPopoverTrigger"
+        [attr.aria-label]="overflowAriaLabel()"
+        (keydown.arrowdown)="focusPanel($event)"
+        (keydown.enter)="focusPanel($event)"
+      >
+        {{ overflowLabel() }}
+      </button>
+      <kj-overflow-panel
+        [kjFor]="trg"
+        [kjCount]="overflowCount()"
+        [kjStart]="list.visibleCount()"
+        [kjEnd]="list.total()"
+        [kjLabels]="list.hiddenLabels()"
+        [kjTemplate]="overflowTemplate()"
+      />
+    }
+  `,
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         class: 'kj-tag-list',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { kjOverflowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOverflowLabel", required: false }] }], kjOverflowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOverflowAriaLabel", required: false }] }], kjOverflowVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOverflowVariant", required: false }] }], overflowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjOverflowContent), { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KjOverflowPanelComponent), { isSignal: true }] }] } });
 
 let nextId = 0;
 /**
@@ -20688,5 +21049,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, 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, KjTableEmptyTemplate, KjTableErrorTemplate, KjTableLoadingTemplate, 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 };
+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, KjOverflowPanelComponent, 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, KjTableEmptyTemplate, KjTableErrorTemplate, KjTableLoadingTemplate, 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