@kouji-ui/components 0.7.1 → 0.8.0

package/fesm2022/kouji-ui-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Injectable, booleanAttribute, computed, TemplateRef, model, ViewChild, contentChildren, ElementRef, PLATFORM_ID, DestroyRef, afterNextRender, effect, signal, Injector, viewChild, untracked, output, EventEmitter, Output, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, EnvironmentInjector, Directive, InjectionToken, ViewContainerRef, contentChild, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, Injectable, booleanAttribute, computed, TemplateRef, viewChild, ElementRef, contentChildren, contentChild, model, ViewChild, PLATFORM_ID, DestroyRef, afterNextRender, effect, signal, Injector, untracked, output, EventEmitter, Output, makeEnvironmentProviders, provideEnvironmentInitializer, forwardRef, EnvironmentInjector, Directive, InjectionToken, ViewContainerRef, numberAttribute } from '@angular/core';
 import * 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, 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';
@@ -773,7 +773,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 +795,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 +1002,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 +1020,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 +1037,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 +1081,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 +1117,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 +1173,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.
@@ -12074,81 +12354,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 +18847,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 +18901,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 +18952,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 +19040,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 +20988,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