@kouji-ui/components 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/components",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Opinionated styled Angular components built on @kouji-ui/core directives. Themed at runtime via @kouji-ui/themes.",
   "license": "MIT",
   "repository": {
@@ -25,26 +25,27 @@
     "directory": "../../dist/kj-components"
   },
   "peerDependencies": {
+    "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
-    "@angular/cdk": "^22.0.0",
-    "@kouji-ui/core": ">=0.3.0",
-    "lucide-static": "^1.14.0",
     "@angular/forms": "^22.0.0",
-    "rxjs": "^7.8.0",
-    "lexical": "^0.38.0",
-    "@lexical/rich-text": "^0.38.0",
-    "@lexical/list": "^0.38.0",
-    "@lexical/link": "^0.38.0",
-    "@lexical/history": "^0.38.0",
-    "@lexical/markdown": "^0.38.0",
+    "@kouji-ui/core": ">=0.3.0",
     "@lexical/code": "^0.38.0",
+    "@lexical/history": "^0.38.0",
     "@lexical/html": "^0.38.0",
-    "@lexical/selection": "^0.38.0"
+    "@lexical/link": "^0.38.0",
+    "@lexical/list": "^0.38.0",
+    "@lexical/markdown": "^0.38.0",
+    "@lexical/rich-text": "^0.38.0",
+    "@lexical/selection": "^0.38.0",
+    "lexical": "^0.38.0",
+    "lucide-static": "^1.14.0",
+    "rxjs": "^7.8.0"
   },
   "sideEffects": false,
   "dependencies": {
     "@tanstack/virtual-core": "^3.14.0",
+    "marked": "^18.0.11",
     "tslib": "^2.3.0"
   },
   "peerDependenciesMeta": {

package/types/kouji-ui-components.d.ts

@@ -1,5 +1,5 @@
 import * as i1 from '@kouji-ui/core';
-import { KjAlertMode, KjAvatarShape, KjBadgeVariant, KjButtonGroupOrientation, KjCarousel, KjLiveRegion, KjCarouselSlide, KjCarouselAlign, KjChatStore, KjChatAnnouncer, KjChatMessageData, KjSlashCommand, KjColorFormat, KjColorPreset, KjColorValue, KjColorPicker, KjCombobox, KjOverlayTriggerLike, KjDatePicker, KjDateRange, KjDateRangePreset, KjEditorLanguage, KjEditorLineNumbers, KjEditorWordWrap, KjEditorInstance, KjFileRejection, KjUploadableFile, KjFileUpload, KjInput, KjDividerOrientation, KjDividerAlign, KjListAs, KjListOrientation, KjPasswordAutocomplete, KjPasswordScore, KjRichTextFeature, KjRichTextEditor, KjRteToolbarItem, KjActiveOverlay, KjSkeletonShape, KjSkeletonAnimation, KjSpinnerAnimation, KjResourceResult, KjStorageAdapter, KjTableState, KjTable, KjNumberFilterType, KjTabPanel, KjTextareaResize, KjTextareaAutoresize, KjHourCycle, TimeParts, KjToastVariant, KjCascadeSelectOption, KjTreeSelect, KjTreeNode } from '@kouji-ui/core';
+import { KjAlertMode, KjAvatarShape, KjOverflowContent, KjBadgeVariant, KjButtonGroupOrientation, KjCarousel, KjLiveRegion, KjCarouselSlide, KjCarouselAlign, KjChatStore, KjChatAnnouncer, KjChatMessageData, KjChatRenderer, KjChatItemInput, KjSlashCommand, KjColorFormat, KjColorPreset, KjColorValue, KjColorPicker, KjCombobox, KjOverlayTriggerLike, KjDatePicker, KjDateRange, KjDateRangePreset, KjEditorLanguage, KjEditorLineNumbers, KjEditorWordWrap, KjEditorInstance, KjFileRejection, KjUploadableFile, KjFileUpload, KjInput, KjDividerOrientation, KjDividerAlign, KjListAs, KjListOrientation, KjPasswordAutocomplete, KjPasswordScore, KjOverflowContext, KjRichTextFeature, KjRichTextEditor, KjRteToolbarItem, KjActiveOverlay, KjSkeletonShape, KjSkeletonAnimation, KjSpinnerAnimation, KjResourceResult, KjStorageAdapter, KjTableState, KjTable, KjNumberFilterType, KjTabPanel, KjTagList, KjTextareaResize, KjTextareaAutoresize, KjHourCycle, TimeParts, KjToastVariant, KjCascadeSelectOption, KjTreeSelect, KjTreeNode } from '@kouji-ui/core';
 export { KJ_DROPDOWN_MENU, KjActiveOverlay, KjAlertMode, KjAvatarGroupAriaLabelFormat, KjAvatarShape, KjBadgeVariant, KjBlockquote, KjButtonGroupOrientation, KjCarousel, KjCarouselAlign, KjCarouselControlPattern, KjCarouselOrientation, KjCarouselSlide, KjCascadeSelectOption, KjChatAnnouncer, KjChatMessageData, KjChatRole, KjChatSide, KjChatState, KjChatStore, KjCode, KjColorFormat, KjColorPicker, KjColorPreset, KjColorValue, KjCombobox, KjDatePicker, KjDateRange, KjDateRangePreset, KjDialog, KjDialogOpenOptions, KjDialogRef, KjDialogService, KjDividerAlign, KjDividerOrientation, KjDrawer, KjDrawerOpenOptions, KjDrawerRef, KjDrawerService, KjDrawerSide, KjDropdownMenuCloseReason, KjDropdownMenuContent, KjDropdownMenuContext, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuMount, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjDropdownMenuTriggerKind, KjEditorInstance, KjEditorLanguage, KjEditorLineNumbers, KjEditorWordWrap, KjFileRejection, KjFileUpload, KjHourCycle, KjInput, KjLead, KjListAs, KjListOrientation, KjLiveRegion, KjMuted, KjNumberFilterType, KjOverlayPanel, KjOverlayTriggerLike, KjPasswordAutocomplete, KjPasswordScore, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjResourceResult, KjRichTextEditor, KjRichTextFeature, KjRteToolbarItem, KjSheet, KjSheetDetent, KjSheetOpenOptions, KjSheetRef, KjSheetService, KjSkeletonAnimation, KjSkeletonShape, KjSlashCommand, KjSpeedDialDirection, KjSpinnerAnimation, KjStorageAdapter, KjTabPanel, KjTable, KjTableState, KjTextareaAutoresize, KjTextareaResize, KjToastVariant, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTreeNode, KjTreeSelect, KjTruncate, KjUploadableFile, SHEET_ARIA_LABEL, SHEET_DATA, SHEET_DETENT, SHEET_DISMISSIBLE } from '@kouji-ui/core';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, ModelSignal, AfterViewInit, ElementRef, OnDestroy, EventEmitter, EnvironmentProviders, OnInit, Injector, ResourceRef, Type, InjectionToken } from '@angular/core';
@@ -497,10 +497,15 @@ declare class KjAvatarComponent {
  * 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.
@@ -510,8 +515,13 @@ declare class KjAvatarComponent {
  *   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
@@ -522,24 +532,30 @@ declare class KjAvatarComponent {
  *   `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.
@@ -559,9 +575,20 @@ declare class KjAvatarGroupComponent {
      * `provide`s itself under `KJ_AVATAR_GROUP`, so injecting the token returns
      * the same instance and gives us access to `overflowCount`, `shape`, etc.
      */
-    private readonly group;
+    protected readonly group: i1.KjAvatarGroupContext;
+    private readonly i18n;
+    /** Text of the "+N" chip. Defaults to the `overflow.more` translation (`+{count}`). */
+    readonly kjOverflowLabel: _angular_core.InputSignal<((count: number) => string) | undefined>;
+    /** Accessible name of the chip button. Defaults to the `overflow.show` translation (`Show {count} more`). */
+    readonly kjOverflowAriaLabel: _angular_core.InputSignal<((count: number) => string) | undefined>;
+    private readonly avatars;
+    protected readonly overflowTemplate: _angular_core.Signal<KjOverflowContent | undefined>;
+    private readonly panel;
     protected readonly overflowCount: _angular_core.Signal<number>;
     protected readonly overflowLabel: _angular_core.Signal<string>;
+    protected readonly overflowAriaLabel: _angular_core.Signal<string>;
+    /** Labels of the collapsed avatars: `alt`, else a string `content`. */
+    protected readonly hiddenLabels: _angular_core.Signal<readonly string[]>;
     /**
      * Chip shape mirrors the group's default shape so the chip visually
      * matches the avatars. `<kj-avatar>`'s own `shape` default is `'circle'`,
@@ -569,8 +596,9 @@ declare class KjAvatarGroupComponent {
      * collapses to `'circle'`.
      */
     protected readonly chipShape: _angular_core.Signal<"circle" | "rounded">;
+    protected focusPanel(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjAvatarGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjAvatarGroupComponent, "kj-avatar-group", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KjAvatarGroup; inputs: { "kjMax": "kjMax"; "kjTotal": "kjTotal"; "kjSize": "kjSize"; "kjShape": "kjShape"; "kjAriaLabel": "kjAriaLabel"; "kjAriaLabelFormat": "kjAriaLabelFormat"; "kjRole": "kjRole"; "kjAriaLabelOverride": "kjAriaLabelOverride"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjAvatarGroupComponent, "kj-avatar-group", never, { "kjOverflowLabel": { "alias": "kjOverflowLabel"; "required": false; "isSignal": true; }; "kjOverflowAriaLabel": { "alias": "kjOverflowAriaLabel"; "required": false; "isSignal": true; }; }, {}, ["avatars", "overflowTemplate"], ["*"], true, [{ directive: typeof i1.KjAvatarGroup; inputs: { "kjMax": "kjMax"; "kjTotal": "kjTotal"; "kjSize": "kjSize"; "kjShape": "kjShape"; "kjAriaLabel": "kjAriaLabel"; "kjAriaLabelFormat": "kjAriaLabelFormat"; "kjRole": "kjRole"; "kjAriaLabelOverride": "kjAriaLabelOverride"; }; outputs: {}; }]>;
 }
 
 /**
@@ -981,6 +1009,10 @@ declare class KjButtonComponent {
  * @doc-example Variants
  *   Set `kjVariant` on the group to cascade onto every child button.
  *   @doc-file button-group.variants.example.ts
+ * @doc-example Segmented
+ *   `kjVariant="segmented"` moves the border onto the group and fills only
+ *   the pressed child — a mode switcher rather than a toolbar.
+ *   @doc-file button-group.segmented.example.ts
  * @doc-example Toggle
  *   Pair with `[kjPressed]` on each child to build a segmented control.
  *   @doc-file button-group.toggle.example.ts
@@ -1012,7 +1044,17 @@ declare class KjButtonComponent {
  * @doc-related button,toggle,tabs
  *
  * @doc-css-var
- *   --kj-button-group-gap  — Gap between adjacent buttons. Defaults to 0 (segmented look); raise for a spaced cluster.
+ *   --kj-button-group-gap        — Gap between adjacent buttons. Defaults to 0 (segmented look); raise for a spaced cluster.
+ *   --kj-segmented-border  — Shell and divider colour, `kjVariant="segmented"` only. Defaults to `--kj-border-default`.
+ *   --kj-segmented-bg-on   — Fill behind the pressed segment. Defaults to `--kj-bg-surface`.
+ *   --kj-segmented-fg-on   — Ink on the pressed segment. Defaults to `--kj-fg-default`.
+ *
+ *   Typography needs no dedicated hook: set the ordinary `--kj-button-font`,
+ *   `--kj-button-font-size`, `--kj-button-letter-spacing` and
+ *   `--kj-button-text-transform` on this host and they reach each child,
+ *   since every knob is read as `var(name, default)`. The on-state colours
+ *   are the exception — variant rules declare those knobs on the element,
+ *   so they get their own `--kj-segmented-*` indirection.
  *
  * @doc-category Library/Actions
  * @doc
@@ -1029,7 +1071,9 @@ declare class KjButtonGroupComponent {
     readonly kjOrientation: _angular_core.InputSignal<KjButtonGroupOrientation>;
     /**
      * Default variant forwarded to children via `KJ_BUTTON_GROUP`. Children
-     * that set their own `kjVariant` override this fallback.
+     * that set their own `kjVariant` override this fallback. Also mirrored to
+     * `data-variant` on the host, which is how `segmented` draws its shared
+     * shell and dividers.
      */
     readonly kjVariant: _angular_core.InputSignal<string | undefined>;
     /**
@@ -1743,6 +1787,10 @@ declare class KjChatFooterComponent {
  * Provider-agnostic: pair with `KjPromptInput` and drive `KjChatStore` from any
  * model / stream — the kit ships **no** LLM SDK or backend.
  *
+ * @doc-example Custom thread items
+ *   `provideKjChat` maps an item `type` to a component, so a thread can render
+ *   turns the kit knows nothing about. Ordinary messages are untouched.
+ *   @doc-file ai-chat.custom-items.example.ts
  * @doc-example Streaming (simulated)
  *   A full send → simulated-stream → reply loop with slash commands, a Stop
  *   button, tool-call cards and citations. No backend — a fake token generator
@@ -1782,6 +1830,19 @@ declare class KjChatThread {
     readonly kjLabel: _angular_core.InputSignal<string | undefined>;
     /** @internal — the coalescing announcer for the polite live region. */
     readonly announcer: KjChatAnnouncer;
+    private readonly config;
+    /**
+     * The registered component for a message's `type`, or `null` to let the
+     * built-in renderer draw it. A message with no `type` never consults the
+     * registry — that is the overwhelmingly common case and must stay free.
+     *
+     * An unknown `type` falls back to the configured `fallback`, and failing
+     * that to the built-in renderer: a transcript that silently drops a turn is
+     * worse than one that renders it plainly.
+     */
+    protected rendererFor(message: KjChatMessageData): KjChatRenderer | null;
+    /** The neutral shape handed to a registered renderer's `item` input. */
+    protected itemFor(message: KjChatMessageData): KjChatItemInput;
     private readonly injector;
     private readonly logEl;
     private lastId;
@@ -1794,9 +1855,13 @@ declare class KjChatThread {
 }
 
 /**
- * A parsed markdown block. Prose blocks carry a **pre-sanitised** HTML string
- * (escaped first, then a whitelist of inline tags applied); code blocks are
- * kept structural so the view can render a `<pre><code>` with a copy button.
+ * A parsed markdown block. Prose blocks carry an HTML string; code blocks stay
+ * structural so the view can render a `<pre><code>` with a copy button.
+ *
+ * Raw HTML in the source is escaped, never emitted (see the renderer override
+ * below), so the prose HTML only ever contains tags this module produced. The
+ * view sanitises it again anyway — a model's output is not a trust boundary
+ * worth betting one layer on.
  */
 type KjMdBlock = {
     readonly kind: 'prose';
@@ -1807,13 +1872,12 @@ type KjMdBlock = {
     readonly code: string;
 };
 /**
- * Parse a lightweight markdown subset into blocks: fenced code blocks
- * (```lang) become structural `code` blocks; everything else becomes `prose`
- * blocks with sanitised inline HTML.
+ * Parse markdown into blocks: fenced code becomes a structural `code` block,
+ * everything else is rendered to HTML as a `prose` block.
  *
- * Deliberately minimal (no tables / nested lists) and **self-contained** — the
- * repo ships no markdown engine on `main`. Swap in a full parser later without
- * touching the view.
+ * Code is split out at the TOKEN level rather than by regex so an indented
+ * block, a `~~~` fence, or a fence inside a list is still recognised — and so
+ * a stray fence in a partial stream cannot swallow the rest of the message.
  */
 declare function renderMarkdown(src: string): KjMdBlock[];
 
@@ -1845,6 +1909,13 @@ declare class KjChatMessage {
     readonly blocks: _angular_core.Signal<KjMdBlock[]>;
     private readonly _copied;
     readonly copiedIndex: _angular_core.Signal<number | null>;
+    /**
+     * Sanitise rather than bypass. `renderMarkdown` already escapes raw HTML at
+     * the parse layer, but a chat body is model or user output — the one place
+     * in a UI kit where trusting a single layer is a bad bet. `sanitize` strips
+     * anything the parser somehow let through instead of waving it past
+     * Angular's checks.
+     */
     safe(html: string): SafeHtml;
     copy(code: string, index: number): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjChatMessage, never>;
@@ -5528,6 +5599,45 @@ declare class KjPopoverComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjPopoverComponent, "kj-popover", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * 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
+ */
+declare class KjOverflowPanelComponent {
+    /** The "+N" chip's popover trigger. */
+    readonly kjFor: _angular_core.InputSignal<KjOverlayTriggerLike>;
+    /** Number of collapsed items. */
+    readonly kjCount: _angular_core.InputSignal<number>;
+    /** Index of the first collapsed item in the consumer's collection. */
+    readonly kjStart: _angular_core.InputSignal<number>;
+    /** Exclusive end index of the collapsed range. */
+    readonly kjEnd: _angular_core.InputSignal<number>;
+    /** Labels of the collapsed items — the default panel content. */
+    readonly kjLabels: _angular_core.InputSignal<readonly string[]>;
+    /** Consumer template rendered instead of the label list. */
+    readonly kjTemplate: _angular_core.InputSignal<KjOverflowContent | undefined>;
+    readonly kjSide: _angular_core.InputSignal<"top" | "right" | "bottom" | "left">;
+    readonly kjAlign: _angular_core.InputSignal<"start" | "center" | "end">;
+    private readonly panel;
+    protected readonly context: _angular_core.Signal<KjOverflowContext>;
+    /** Moves focus to the first focusable element of the panel (or the panel itself). */
+    focusFirst(): void;
+    protected focusTrigger(): void;
+    protected onFocusOut(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjOverflowPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjOverflowPanelComponent, "kj-overflow-panel", never, { "kjFor": { "alias": "kjFor"; "required": true; "isSignal": true; }; "kjCount": { "alias": "kjCount"; "required": true; "isSignal": true; }; "kjStart": { "alias": "kjStart"; "required": true; "isSignal": true; }; "kjEnd": { "alias": "kjEnd"; "required": true; "isSignal": true; }; "kjLabels": { "alias": "kjLabels"; "required": false; "isSignal": true; }; "kjTemplate": { "alias": "kjTemplate"; "required": false; "isSignal": true; }; "kjSide": { "alias": "kjSide"; "required": false; "isSignal": true; }; "kjAlign": { "alias": "kjAlign"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Styled wrapper around the headless `KjProgressBar` directive. Composes the
  * core directive on an inner element and renders the inner
@@ -8127,6 +8237,14 @@ declare class KjTabPanelComponent {
  * @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`
@@ -8190,15 +8308,39 @@ declare class KjTagRemoveComponent {
 }
 /**
  * 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
  */
 declare class KjTagListComponent {
+    protected readonly list: KjTagList;
+    private readonly i18n;
+    /** Text of the "+N" chip. Defaults to the `overflow.more` translation (`+{count}`). */
+    readonly kjOverflowLabel: _angular_core.InputSignal<((count: number) => string) | undefined>;
+    /** Accessible name of the chip button. Defaults to the `overflow.show` translation (`Show {count} more`). */
+    readonly kjOverflowAriaLabel: _angular_core.InputSignal<((count: number) => string) | undefined>;
+    /** Variant of the "+N" chip. Default `secondary`. */
+    readonly kjOverflowVariant: _angular_core.InputSignal<string>;
+    protected readonly overflowTemplate: _angular_core.Signal<KjOverflowContent | undefined>;
+    private readonly panel;
+    protected readonly overflowCount: _angular_core.Signal<number>;
+    protected readonly overflowLabel: _angular_core.Signal<string>;
+    protected readonly overflowAriaLabel: _angular_core.Signal<string>;
+    protected focusPanel(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KjTagListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjTagListComponent, "kj-tag-list", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KjTagList; inputs: { "kjTagListRole": "kjTagListRole"; "kjTagListOrientation": "kjTagListOrientation"; "kjTagListMultiple": "kjTagListMultiple"; "kjTagListDisabled": "kjTagListDisabled"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KjTagListComponent, "kj-tag-list", never, { "kjOverflowLabel": { "alias": "kjOverflowLabel"; "required": false; "isSignal": true; }; "kjOverflowAriaLabel": { "alias": "kjOverflowAriaLabel"; "required": false; "isSignal": true; }; "kjOverflowVariant": { "alias": "kjOverflowVariant"; "required": false; "isSignal": true; }; }, {}, ["overflowTemplate"], ["*"], true, [{ directive: typeof i1.KjTagList; inputs: { "kjTagListRole": "kjTagListRole"; "kjTagListOrientation": "kjTagListOrientation"; "kjTagListMultiple": "kjTagListMultiple"; "kjTagListDisabled": "kjTagListDisabled"; "kjMax": "kjMax"; }; outputs: {}; }]>;
 }
 
 /**
@@ -9199,5 +9341,5 @@ declare class KjTreeSelectComponent {
 
 declare const KJ_COMPONENTS_VERSION = "0.0.1";
 
-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 };
 export type { ExportOptions, KjActionSheetAction, KjActionSheetOptions, KjActionSheetRole, KjCellEditEvent, KjCellTemplateContext, KjChatBubbleSize, KjChatBubbleVariant, KjEditorContract, KjEmptyStateLevel, KjEmptyStateLive, KjEmptyStateVariant, KjFilterContext, KjHeadingLevel, KjInputSize, KjInputType, KjInputVariant, KjMdBlock, KjNumberRange, KjRowClickEvent, KjSelectEditorOption, KjSelectFilterOption, KjSpeedDialPosition, KjTableDensity, KjTableExportFormat };