@kinetixui/angular 0.24.0 → 0.25.0

package/types/kinetixui-angular.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { ElementRef, TemplateRef, Signal } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -28,6 +28,21 @@ type KxToggleVariant = 'default' | 'outline';
 type KxToggleSize = 'sm' | 'md' | 'lg';
 /** Tone of the text under a field. `error` is the only one that also sets `aria-invalid` on the control. */
 type KxFieldMessageVariant = 'error' | 'success' | 'warning' | 'info';
+/**
+ * Intent for the two notice surfaces, Banner and Inform. The same five names the React implementation
+ * uses, so a design decision made once reads the same on both platforms. `action` is not an intent in the
+ * severity sense — it is the inverted, high-contrast promo treatment.
+ */
+type KxInformVariant = 'information' | 'warning' | 'success' | 'error' | 'action';
+/** Floating action button fills. Capitalised to match the design source's Variant property, as Button does. */
+type KxFabVariant = 'Primary' | 'Secondary';
+type KxFabSize = 'default' | 'sm';
+/** `row` sets term and value side by side; `stacked` puts the value under a full-width term. */
+type KxDescriptionListLayout = 'row' | 'stacked';
+/** Named aspect ratios Image accepts, alongside any explicit number. */
+type KxImageRatio = '1:1' | '3:2' | '4:3' | '3:4' | '3:1' | '16:9';
+/** A marker tone on a Timeline item. */
+type KxTimelineStatus = 'default' | 'active' | 'success' | 'error';
 
 /**
  * KinetixUI button.
@@ -72,9 +87,24 @@ declare class KxBadge {
     static ɵfac: i0.ɵɵFactoryDeclaration<KxBadge, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KxBadge, "kx-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
+/**
+ *   <kx-card>…</kx-card>                                       a static surface
+ *   <a kxCard href="/reports/q3">…</a>                         a card that is a link
+ *   <button kxCard type="button" [attr.aria-pressed]="on">…</button>   a card that is a toggle
+ *
+ * A raised surface (TOKENS.md, "Surface model"). `kx-card` is static: no hover, no pressed state, no pointer
+ * cursor, because a surface that reacts to the pointer reads as clickable.
+ *
+ * Interaction is opt-in through the element, as in React (`<Card asChild>`): put `kxCard` on a real `<a href>`
+ * or `<button>` and the card takes the interactive states — hover, pressed, focus and selected
+ * (`aria-pressed="true"` on a button, `aria-current` on a link). The states are keyed on the element being
+ * interactive, so they cannot drift from what it does, and the element's own semantics (link, button, pressed,
+ * current) are what assistive technology reads. One action per card: it must not contain other controls, and a
+ * button card holds phrasing content only (no headings).
+ */
 declare class KxCard {
     static ɵfac: i0.ɵɵFactoryDeclaration<KxCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KxCard, "kx-card", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCard, "kx-card, a[kxCard], button[kxCard]", never, {}, {}, never, ["*"], true, never>;
 }
 declare class KxCardHeader {
     static ɵfac: i0.ɵɵFactoryDeclaration<KxCardHeader, never>;
@@ -300,7 +330,7 @@ declare class KxToggleGroupItem {
     readonly id: i0.InputSignal<string>;
     constructor(group: KxToggleGroup);
     static ɵfac: i0.ɵɵFactoryDeclaration<KxToggleGroupItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KxToggleGroupItem, "kx-toggle-group-item", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxToggleGroupItem, "kx-toggle-group-item", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /**
  *   <kx-segmented-control [(value)]="range" aria-label="Range">
@@ -651,6 +681,11 @@ declare class KxRadio {
  * the RTL direction flip and touch dragging are all the browser's, and all of them are things hand-rolled
  * sliders routinely lose. The filled track is drawn with a CSS custom property set from the value, so the
  * visual follows the real control rather than the other way round.
+ *
+ * The track and its fill are elements behind the input rather than a gradient on the input's own track: a
+ * gradient has no logical direction (`to right` stays right in RTL), so the fill grew from the wrong end in
+ * an RTL page while the browser moved the thumb correctly. An element placed with `inset-inline-start`
+ * follows the slider's own direction, nested or not (scripts/angular-browser.mjs, rtl).
  */
 declare class KxSlider extends KxValueBase<number> {
     readonly value: i0.ModelSignal<number>;
@@ -677,21 +712,29 @@ declare class KxSlider extends KxValueBase<number> {
  *
  * The buttons are `aria-hidden` and `tabindex="-1"`: they duplicate keyboard behaviour the input already has,
  * so exposing them adds two stops to the tab order that do nothing new.
+ *
+ * `readonly` keeps the value readable, focusable and submitted but unchangeable: the input is `readonly` (so the
+ * browser's own arrow-key stepping stops too) and both steppers are disabled.
  */
 declare class KxNumberInput extends KxValueBase<number | null> {
     readonly value: i0.ModelSignal<number>;
     readonly min: i0.InputSignal<number>;
     readonly max: i0.InputSignal<number>;
     readonly step: i0.InputSignal<number>;
+    readonly readonly: i0.InputSignalWithTransform<boolean, unknown>;
     readonly ariaLabel: i0.InputSignal<string>;
     readonly ariaLabelledby: i0.InputSignal<string>;
+    /** Forwarded to the inner input, which is what assistive technology reads and what the field's error state keys on. */
+    readonly ariaInvalid: i0.InputSignal<"true" | "false">;
+    /** Forwarded to the inner input, so an error or hint is announced with the field. */
+    readonly ariaDescribedby: i0.InputSignal<string>;
     readonly changed: i0.OutputEmitterRef<number>;
     protected nudge(direction: 1 | -1): void;
     protected commit(next: number): void;
     private clamp;
     writeValue(value: number | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KxNumberInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KxNumberInput, "kx-number-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxNumberInput, "kx-number-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaInvalid": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
 }
 /**
  *   <kx-password-input [(ngModel)]="password" aria-label="Password" />
@@ -705,11 +748,15 @@ declare class KxPasswordInput extends KxValueBase<string> {
     readonly autocomplete: i0.InputSignal<"current-password" | "new-password">;
     readonly ariaLabel: i0.InputSignal<string>;
     readonly ariaLabelledby: i0.InputSignal<string>;
+    /** Forwarded to the inner input, which is what assistive technology reads and what the field's error state keys on. */
+    readonly ariaInvalid: i0.InputSignal<"true" | "false">;
+    /** Forwarded to the inner input, so an error or hint is announced with the field. */
+    readonly ariaDescribedby: i0.InputSignal<string>;
     protected readonly revealed: i0.WritableSignal<boolean>;
     protected commit(next: string): void;
     writeValue(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KxPasswordInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KxPasswordInput, "kx-password-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxPasswordInput, "kx-password-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaInvalid": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 /**
  *   <kx-field>
@@ -745,6 +792,162 @@ declare class KxFieldMessage {
     static ɵcmp: i0.ɵɵComponentDeclaration<KxFieldMessage, "kx-field-message", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ *   <kx-input-group>
+ *     <kx-input-group-text>https://</kx-input-group-text>
+ *     <input kxInputGroupInput aria-label="Website" placeholder="kinetixui.com" />
+ *     <button kxInputGroupButton>Copy</button>
+ *   </kx-input-group>
+ *
+ * One bordered field that hosts an input plus fixed add-ons (an icon, text, a button) on either side — React's
+ * InputGroup. The input is a real `<input>` carrying `kxInputGroupInput`, so `ngModel`, `formControlName`,
+ * `type`, `autocomplete`, `readonly` and the browser's validation all work on it untouched, and it is the only
+ * thing in the group a label has to name.
+ *
+ * The shell follows the text-entry state contract (TOKENS.md, "Composite fields"): it is ONE field, and it reads
+ * its edge, hover, focus, invalid, read-only and disabled states from the input inside it — `aria-invalid`,
+ * `readonly` and `disabled` go on the input, where assistive technology reads them, and the shell follows. A
+ * focused add-on button draws its own inset ring and leaves the shell at rest, so the ring says which part has
+ * focus.
+ */
+declare class KxInputGroup {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInputGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxInputGroup, "kx-input-group", never, {}, {}, never, ["*"], true, never>;
+}
+/** The group's input. Put it on a real `<input>`; every native and Angular forms attribute still applies. */
+declare class KxInputGroupInput {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInputGroupInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxInputGroupInput, "input[kxInputGroupInput]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * An icon or a cluster of add-ons at one end of the group. `align` is logical: `start` is the reading start,
+ * so the add-on follows the page into right-to-left without a separate RTL rule.
+ */
+declare class KxInputGroupAddon {
+    readonly align: i0.InputSignal<"start" | "end">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInputGroupAddon, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxInputGroupAddon, "kx-input-group-addon", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/** Fixed text beside the input — a protocol, a unit, a domain. Not announced as part of the input's value. */
+declare class KxInputGroupText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInputGroupText, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxInputGroupText, "kx-input-group-text", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * A real `<button>` inside the group, divided from the input by a quiet internal line. `type` defaults to
+ * `button`, so a button in a group inside a `<form>` never submits it by accident.
+ */
+declare class KxInputGroupButton {
+    readonly type: i0.InputSignal<"button" | "submit" | "reset">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInputGroupButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxInputGroupButton, "button[kxInputGroupButton]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ *   <kx-input-otp [(ngModel)]="code" [length]="6" [groups]="[3, 3]" aria-label="Verification code" />
+ *
+ * A one-time code field drawn as a row of cells — React's InputOTP. Underneath it is ONE real `<input>`,
+ * laid transparently over the cells, which is what makes it work everywhere a code field has to:
+ *
+ *   - `autocomplete="one-time-code"`, so iOS and Android offer the code from the SMS, and a password manager
+ *     can fill it;
+ *   - a paste of the whole code lands in one go (characters the field does not accept are dropped);
+ *   - assistive technology meets a single labelled text field with a maximum length, not six unlabelled boxes —
+ *     the cells are `aria-hidden` decoration of the input's value;
+ *   - `inputmode="numeric"` raises the number pad for a digits-only code.
+ *
+ * Editing happens at the end of the code: typing appends and Backspace removes the last character, and the
+ * caret is held at the end so the highlighted cell is always the one the next character goes into (the
+ * `data-active` cell, which carries the field's focus ring). `completed` fires once the code is full.
+ *
+ * The cells read the field's state from the input, as every composite field does (TOKENS.md, "Composite fields"):
+ * `aria-invalid` on the component is forwarded to the input and turns every cell's edge destructive, and a
+ * disabled field dims as one. The caret is a static bar rather than a blinking one, so there is no motion to
+ * reduce.
+ */
+declare class KxInputOtp extends KxValueBase<string> {
+    readonly value: i0.ModelSignal<string>;
+    /** How many characters the code has. */
+    readonly length: i0.InputSignal<number>;
+    /** Cells per visual group, separated by a dash — `[3, 3]` draws 123–456. Defaults to one group. */
+    readonly groups: i0.InputSignal<readonly number[]>;
+    /** Which characters the field accepts. Anything else, typed or pasted, is dropped. */
+    readonly allow: i0.InputSignal<"digits" | "alphanumeric">;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly ariaLabelledby: i0.InputSignal<string>;
+    /** Forwarded to the input, which is what assistive technology reads and what the cells' error state keys on. */
+    readonly ariaInvalid: i0.InputSignal<"true" | "false">;
+    /** Forwarded to the input, so an error or hint is announced with the field. */
+    readonly ariaDescribedby: i0.InputSignal<string>;
+    /** The full code, once every cell is filled. */
+    readonly completed: i0.OutputEmitterRef<string>;
+    protected readonly focused: i0.WritableSignal<boolean>;
+    private readonly field;
+    /** Cell indices, split into the requested groups. A `groups` that does not add up to `length` is ignored. */
+    protected readonly layout: i0.Signal<number[][]>;
+    /** The cell the next character goes into — the last one once the code is full — while the field has focus. */
+    protected readonly active: i0.Signal<number>;
+    /** What the field accepts: only allowed characters, at most `length` of them. */
+    private clean;
+    protected commit(el: HTMLInputElement): void;
+    /** Keep the caret at the end, so the highlighted cell and the insertion point never disagree. */
+    protected toEnd(): void;
+    /** A value written by the form is held to the same rules as typing, so the field never holds more than its cells show. */
+    writeValue(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInputOtp, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxInputOtp, "kx-input-otp", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "groups": { "alias": "groups"; "required": false; "isSignal": true; }; "allow": { "alias": "allow"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaInvalid": { "alias": "aria-invalid"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+}
+
+/**
+ *   <kx-rating [(ngModel)]="stars" aria-label="Rate this article" />
+ *   <kx-rating [value]="4" readonly />
+ *
+ * A star rating. The interaction contract, defined before the implementation and asserted in a real browser
+ * (scripts/angular-browser.mjs):
+ *
+ *   semantics   a `radiogroup` named by `aria-label` / `aria-labelledby` ("Rating" if neither is given), whose
+ *               stars are real `<input type="radio">`s named "1 star" … "5 stars". One of N, chosen — which is
+ *               what a rating is, and what a screen reader already knows how to announce ("3 stars, radio,
+ *               checked, 3 of 5").
+ *   keyboard    one tab stop: the chosen star, or the first when nothing is chosen yet. The arrow keys move
+ *               and choose (the browser's own radio behaviour, mirrored in RTL); Home and End choose the
+ *               lowest and highest. Space chooses the focused star.
+ *   pointer     clicking a star chooses it; hovering previews the fill up to that star without changing the
+ *               value.
+ *   read-only   `readonly` renders a static display — `role="img"` named "Rated 3 out of 5", the stars hidden
+ *               from assistive technology, no tab stop — for a rating that is shown, not given.
+ *   disabled    every radio is disabled; the group dims and does not answer the pointer.
+ *   direction   the stars run from the inline start, so the first star is on the right in an RTL page.
+ *   motion      none: a star's fill changes colour instantly.
+ *
+ * This differs from React's Rating, which renders `aria-pressed` buttons inside a `radiogroup` with no arrow-key
+ * movement; the radios here are the closer fit to the role the group claims.
+ */
+declare class KxRating extends KxValueBase<number> {
+    /** The chosen number of stars; 0 is "not rated yet". */
+    readonly value: i0.ModelSignal<number>;
+    readonly max: i0.InputSignal<number>;
+    readonly size: i0.InputSignal<"sm" | "md" | "lg">;
+    readonly readonly: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly ariaLabelledby: i0.InputSignal<string>;
+    readonly changed: i0.OutputEmitterRef<number>;
+    protected readonly name: string;
+    protected readonly hovered: i0.WritableSignal<number>;
+    protected readonly stars: i0.Signal<number[]>;
+    /** What the stars show: the hovered preview while the pointer is over one, otherwise the value. */
+    protected readonly shown: i0.Signal<number>;
+    /** A five-pointed star on a 24-unit grid. */
+    protected readonly star = "M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95z";
+    protected preview(n: number): void;
+    protected commit(n: number): void;
+    /** Home and End — the one piece of radio-group keyboard behaviour the browser does not provide. */
+    protected onKey(event: KeyboardEvent): void;
+    writeValue(value: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxRating, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxRating, "kx-rating", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "changed": "changed"; }, never, never, true, never>;
+}
+
 declare class KxTab {
     readonly tabs: KxTabs;
     readonly el: ElementRef<HTMLButtonElement>;
@@ -770,6 +973,11 @@ declare class KxTabPanel {
     readonly value: i0.InputSignal<string>;
     active(): boolean;
     labelledBy(): string | null;
+    /**
+     * The id its tab's `aria-controls` names. The tab always pointed here, but the panel never carried the id, so
+     * every tab referenced an element that did not exist (axe `aria-valid-attr-value`, check:angular-browser).
+     */
+    panelId(): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<KxTabPanel, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KxTabPanel, "kx-tab-panel", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -797,5 +1005,1336 @@ declare class KxTabs {
     static ɵcmp: i0.ɵɵComponentDeclaration<KxTabs, "kx-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["tabs"], ["*"], true, never>;
 }
 
-export { KxAlert, KxAlertDescription, KxAlertTitle, KxAspectRatio, KxAvatar, KxAvatarFallback, KxAvatarGroup, KxAvatarImage, KxBadge, KxButton, KxCard, KxCardContent, KxCardDescription, KxCardFooter, KxCardHeader, KxCardTitle, KxCheckbox, KxEmpty, KxEmptyContent, KxEmptyDescription, KxEmptyHeader, KxEmptyMedia, KxEmptyTitle, KxField, KxFieldDescription, KxFieldLabel, KxFieldMessage, KxInput, KxKbd, KxKbdGroup, KxLabel, KxMetric, KxNativeSelect, KxNumberInput, KxPasswordInput, KxProgress, KxQuote, KxRadio, KxRadioGroup, KxSegment, KxSegmentedControl, KxSeparator, KxSkeleton, KxSlider, KxSpinner, KxSwitch, KxTab, KxTabList, KxTabPanel, KxTabs, KxTag, KxTextarea, KxToggle, KxToggleGroup, KxToggleGroupItem };
-export type { KxAlertVariant, KxBadgeVariant, KxButtonSize, KxButtonVariant, KxCorners, KxEmptyMediaVariant, KxFieldMessageVariant, KxOrientation, KxSpinnerSize, KxSpinnerVariant, KxTagVariant, KxToggleSize, KxToggleVariant, KxTrend };
+/**
+ * The content and layout wave: banner, button group, circular progress, code block, description list, FAB,
+ * image, inform, list, marquee, page header and timeline.
+ *
+ * Two conventions this file follows, both inherited rather than invented:
+ *
+ * Icons arrive by projection, never by import, with one exception that matters: the dismiss button
+ * carries a built-in glyph as `<ng-content>` fallback content. A projected slot that the caller leaves
+ * empty is fine for a decorative leading icon and is not fine for a control — an empty button is a few
+ * pixels of nothing, so the only people who could find it are the ones reading its `aria-label`. Project
+ * `[kxDismissIcon]` to replace the default; leave it out and the control is still visible.
+ * The React implementations reach for `lucide-react`, which is a
+ * reasonable choice for a package that already depends on React's ecosystem. Adding an icon library to
+ * `@kinetixui/angular` would make every consumer carry it to render a banner, so each surface here exposes a
+ * slot and the application supplies whatever it already uses. Nothing is hard-coded and nothing is missing:
+ * the surfaces that need a decorative glyph lay out correctly with or without one.
+ *
+ * Callbacks arrive as `output()`, never as object inputs. React passes `action={{ label, onClick }}`, which is
+ * idiomatic there. In Angular the label is content and the click is an event, so a caller writes
+ * `<button kxBannerAction (click)="…">Retry</button>`. This is the "equivalent capability, idiomatic
+ * implementation" rule in RTL.md and types.ts applied to event handling.
+ */
+/**
+ *   <kx-banner variant="warning" sticky (dismiss)="hidden = true">
+ *     <svg kxIcon …></svg>
+ *     Scheduled maintenance at 02:00 UTC.
+ *     <button kxBannerAction (click)="more()">Details</button>
+ *   </kx-banner>
+ *
+ * A page-level, full-bleed notice: no radius and no width of its own, so it spans whatever contains it. That
+ * is the whole distinction from Inform, which is a contained rounded card, and from a toast, which is
+ * transient.
+ *
+ * `role="status"` rather than `alert`. A banner is persistent and usually present on arrival, and an assertive
+ * live region interrupts a screen-reader user mid-sentence to read something that is not urgent. A caller with
+ * a genuinely urgent banner can set `role="alert"` on the host, which wins over this default.
+ */
+declare class KxBanner {
+    readonly variant: i0.InputSignal<KxInformVariant>;
+    readonly sticky: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Renders the dismiss control. The banner does not hide itself — the caller owns that state. */
+    readonly dismissible: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The dismiss button's accessible name. An input rather than a hard-coded "Dismiss" because this package
+     * ships no translations, and a button whose only label is in the wrong language is worse than one the
+     * application names itself.
+     */
+    readonly dismissLabel: i0.InputSignal<string>;
+    readonly dismiss: i0.OutputEmitterRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBanner, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxBanner, "kx-banner", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["[kxIcon]", "*", "[kxBannerAction]", "[kxDismissIcon]"], true, never>;
+}
+/**
+ *   <div kxButtonGroup>
+ *     <button kxButton variant="Outline">Day</button>
+ *     <button kxButton variant="Outline">Week</button>
+ *   </div>
+ *
+ * Joins adjacent controls into one cluster: inner corners squared, shared borders overlapped so they do not
+ * double, and the focused child raised so its ring is not clipped by its neighbour.
+ *
+ * A directive on the caller's element, not a wrapper component, because the group contributes layout and
+ * nothing else — the same reason `kxButton` is a directive on `<button>`. `role="group"` is set, but no
+ * roving tabindex: these are buttons, each is individually tabbable, and a toolbar's arrow-key navigation is
+ * `kx-segmented-control`'s job. Pretending otherwise would break Tab for every existing caller.
+ */
+declare class KxButtonGroup {
+    readonly orientation: i0.InputSignal<KxOrientation>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxButtonGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxButtonGroup, "[kxButtonGroup]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** A thin divider between segments, for fills with no shared border for the overlap trick to lean on. */
+declare class KxButtonGroupSeparator {
+    readonly orientation: i0.InputSignal<KxOrientation>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxButtonGroupSeparator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxButtonGroupSeparator, "kx-button-group-separator", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** A static, non-interactive segment — a unit, a prefix, a count. Not a button, so not focusable. */
+declare class KxButtonGroupText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxButtonGroupText, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxButtonGroupText, "kx-button-group-text", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ *   <kx-circular-progress [value]="72" showValue />
+ *   <kx-circular-progress />                           <!-- indeterminate -->
+ *
+ * The ring is two SVG circles, the indicator revealed by `stroke-dashoffset`. `aria-valuenow` is omitted when
+ * no value is given, which is how ARIA spells an indeterminate progressbar — a determinate bar reporting 0
+ * says "nothing has happened", which is a different and usually wrong claim.
+ */
+declare class KxCircularProgress {
+    /** 0–100. Left undefined for an indeterminate ring. */
+    readonly value: i0.InputSignal<number>;
+    /** Diameter in px. A number, not a token, because a ring's size is a layout decision at the call site. */
+    readonly size: i0.InputSignal<number>;
+    readonly strokeWidth: i0.InputSignal<number>;
+    readonly showValue: i0.InputSignalWithTransform<boolean, unknown>;
+    protected readonly clamped: i0.Signal<number>;
+    protected readonly centre: i0.Signal<number>;
+    protected readonly radius: i0.Signal<number>;
+    protected readonly circumference: i0.Signal<number>;
+    protected readonly offset: i0.Signal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCircularProgress, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCircularProgress, "kx-circular-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+interface KxCodeBlockFile {
+    name: string;
+    code: string;
+    language?: string;
+}
+/**
+ *   <kx-code-block [code]="snippet" filename="main.ts" />
+ *   <kx-code-block [files]="[{ name: 'app.ts', code: a }, { name: 'app.html', code: b }]" />
+ *
+ * Shows code and copies it. Deliberately does not highlight: syntax highlighting needs a grammar per language
+ * and is a build-time concern, and a component that shipped one would force the choice on every consumer.
+ * `<pre><code>` keeps the whitespace and lets the application bring Shiki or Prism if it wants colour.
+ *
+ * The file switcher is a real tablist with arrow-key navigation, because that is what a row of tabs is. The
+ * copy button reports its result through `aria-live` rather than only swapping an icon, so the outcome is
+ * available to someone who cannot see the tick.
+ */
+declare class KxCodeBlock {
+    readonly code: i0.InputSignal<string>;
+    readonly language: i0.InputSignal<string>;
+    readonly filename: i0.InputSignal<string>;
+    readonly files: i0.InputSignal<readonly KxCodeBlockFile[]>;
+    readonly hideCopy: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly copyLabel: i0.InputSignal<string>;
+    readonly copiedLabel: i0.InputSignal<string>;
+    protected readonly active: i0.WritableSignal<number>;
+    protected readonly copied: i0.WritableSignal<boolean>;
+    protected readonly tabs: i0.Signal<readonly KxCodeBlockFile[]>;
+    protected readonly current: i0.Signal<KxCodeBlockFile>;
+    protected readonly hasHeader: i0.Signal<boolean>;
+    protected select(i: number): void;
+    /** Home/End and the arrows, mirrored for direction: in an RTL page ArrowRight moves toward the start. */
+    protected onTabKeydown(event: KeyboardEvent, i: number): void;
+    private readonly host;
+    protected copy(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCodeBlock, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCodeBlock, "kx-code-block", never, { "code": { "alias": "code"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "filename": { "alias": "filename"; "required": false; "isSignal": true; }; "files": { "alias": "files"; "required": false; "isSignal": true; }; "hideCopy": { "alias": "hideCopy"; "required": false; "isSignal": true; }; "copyLabel": { "alias": "copyLabel"; "required": false; "isSignal": true; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[kxCopyIcon]", "[kxCopyIcon]"], true, never>;
+}
+/**
+ *   <dl kxDescriptionList>
+ *     <kx-description-list-item term="Status">Active</kx-description-list-item>
+ *   </dl>
+ *
+ * A directive on a real `<dl>`, and each item is a component with an ATTRIBUTE selector on a `<div>`, so the
+ * rendered tree is `<dl><div><dt>…</dt><dd>…</dd></div></dl>`. That distinction is the whole point: a `dl`'s
+ * content model allows `dt`/`dd` directly or wrapped in a `div`, and nothing else. An earlier spelling used a
+ * `<kx-description-list-item>` element as the wrapper, which is neither — the grouping was invalid and the
+ * term/description association was left to chance. The term is an input rather than a slot because a `<dt>`
+ * takes text, and two projection slots in one item would let a caller put the value in the term position.
+ */
+declare class KxDescriptionList {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDescriptionList, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxDescriptionList, "dl[kxDescriptionList]", never, {}, {}, never, never, true, never>;
+}
+declare class KxDescriptionListItem {
+    readonly term: i0.InputSignal<string>;
+    readonly layout: i0.InputSignal<KxDescriptionListLayout>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDescriptionListItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxDescriptionListItem, "div[kxDescriptionListItem]", never, { "term": { "alias": "term"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ *   <button kxFab aria-label="New message"><svg …></svg></button>
+ *   <button kxFab extended>New message</button>
+ *
+ * A directive on a real `<button>`: the element already has the activation behaviour, the disabled semantics
+ * and the keyboard contract, and a component wrapping one would have to re-expose all three.
+ *
+ * An icon-only FAB has no text, so it needs `aria-label` from the caller. This does not supply a default —
+ * "Action" is not a useful accessible name, and a wrong one is harder to notice than a missing one. The
+ * `extended` form has a visible label and needs nothing.
+ */
+declare class KxFab {
+    readonly variant: i0.InputSignal<KxFabVariant>;
+    readonly size: i0.InputSignal<KxFabSize>;
+    readonly extended: i0.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFab, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFab, "button[kxFab]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "extended": { "alias": "extended"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <kx-image src="cover.jpg" alt="Harbour at dusk" ratio="16:9" />
+ *   <kx-image src="broken.png" alt="" ><svg kxImageFallback …></svg></kx-image>
+ *
+ * Holds the aspect ratio before the image arrives so the page does not reflow, fades it in once decoded, and
+ * swaps to a fallback slot on error.
+ *
+ * `alt` is required, not optional with an empty default. An empty alt is the correct answer for a decorative
+ * image and a silent failure for every other one, so the caller states which it is — `alt=""` is still one
+ * character to type, and now it is a decision rather than an omission.
+ */
+declare class KxImage {
+    readonly src: i0.InputSignal<string>;
+    readonly alt: i0.InputSignal<string>;
+    readonly ratio: i0.InputSignal<number | KxImageRatio>;
+    readonly rounded: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Native lazy loading. Defaults to `lazy`; pass `eager` for an image above the fold. */
+    readonly loading: i0.InputSignal<"lazy" | "eager">;
+    /**
+     * Reset to `loading` whenever `src` changes. A plain signal kept the old verdict: once a source had
+     * failed, the fallback branch stayed rendered and a later, valid URL was never even requested — and a
+     * previously loaded image kept its loaded styling while its replacement was still arriving.
+     */
+    protected readonly status: i0.WritableSignal<"error" | "loading" | "loaded">;
+    protected readonly ratioValue: i0.Signal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxImage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxImage, "kx-image", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": true; "isSignal": true; }; "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["[kxImageFallback]"], true, never>;
+}
+/**
+ *   <kx-inform variant="success">Your changes were saved.</kx-inform>
+ *
+ * The contained counterpart to Banner: rounded, in flow, sized by its container. Same intents and the same
+ * `role="status"` reasoning — persistent, not urgent, so polite rather than assertive.
+ */
+declare class KxInform {
+    readonly variant: i0.InputSignal<KxInformVariant>;
+    readonly dismissible: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly dismissLabel: i0.InputSignal<string>;
+    readonly dismiss: i0.OutputEmitterRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInform, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxInform, "kx-inform", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, ["[kxIcon]", "*", "[kxInformAction]", "[kxDismissIcon]"], true, never>;
+}
+/**
+ *   <ul kxList>
+ *     <li kxListItem title="Billing" description="Invoices and receipts" />
+ *   </ul>
+ *
+ * A directive on a real `<ul>`, and items on real `<li>`s, so the list semantics are the platform's rather
+ * than three ARIA roles standing in for them. A pressable row puts a `<button>` inside the `<li>` instead of
+ * giving the `<li>` itself `role="button"`: a list's children must be list items, and an element cannot be
+ * both. That also means the keyboard contract is the button's — Enter and Space, for free and correct.
+ */
+declare class KxList {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxList, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxList, "ul[kxList], ol[kxList]", never, {}, {}, never, never, true, never>;
+}
+declare class KxListItem {
+    readonly title: i0.InputSignal<string>;
+    readonly description: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Set to render the row as a button. Without it the row is static text and not focusable. */
+    readonly pressable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly select: i0.OutputEmitterRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxListItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxListItem, "li[kxListItem]", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "pressable": { "alias": "pressable"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, ["[kxListLeading]", "[kxListTrailing]"], true, never>;
+}
+/**
+ *   <kx-marquee [durationSeconds]="24" pauseOnHover>
+ *     <ng-template kxMarqueeContent>
+ *       <span>Shipping to 48 countries</span>
+ *     </ng-template>
+ *   </kx-marquee>
+ *
+ * Scrolls its content on a loop. A seamless loop needs the content rendered twice, and the content is the
+ * caller's — so it arrives as a `<ng-template>` and this component renders it twice itself. Asking the caller
+ * to paste their own markup twice would make the duplicate their problem and let the two copies drift.
+ *
+ * The second copy is `aria-hidden`, so assistive technology reads the row once instead of stuttering.
+ *
+ * Under `prefers-reduced-motion: reduce` the animation is removed in CSS and the row becomes an ordinary
+ * horizontally scrollable strip — the content stays reachable, which is the part that matters. Continuous
+ * motion is what WCAG 2.2.2 is about, and the reader's own setting is the control, so this exposes no
+ * "pause" affordance that would only work for people who can see it move.
+ */
+declare class KxMarqueeContent {
+    readonly template: TemplateRef<unknown>;
+    constructor(template: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxMarqueeContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxMarqueeContent, "[kxMarqueeContent]", never, {}, {}, never, never, true, never>;
+}
+declare class KxMarquee {
+    /** Seconds for one full loop. Slower is calmer; this is a readability decision, not a style one. */
+    readonly durationSeconds: i0.InputSignal<number>;
+    readonly pauseOnHover: i0.InputSignalWithTransform<boolean, unknown>;
+    protected readonly content: i0.Signal<KxMarqueeContent>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxMarquee, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxMarquee, "kx-marquee", never, { "durationSeconds": { "alias": "durationSeconds"; "required": false; "isSignal": true; }; "pauseOnHover": { "alias": "pauseOnHover"; "required": false; "isSignal": true; }; }, {}, ["content"], never, true, never>;
+}
+/**
+ *   <kx-page-header title="Billing" description="Plan, invoices and payment method" [level]="1">
+ *     <nav kxPageHeaderBreadcrumb>…</nav>
+ *     <button kxButton kxPageHeaderActions>Upgrade</button>
+ *   </kx-page-header>
+ *
+ * `level` exists for the same reason `kx-card-title` has one: a page header is usually the `<h1>`, but a
+ * component that hard-codes a heading level produces a broken document outline the moment it is used twice or
+ * nested. The level is carried by `role="heading"` + `aria-level`, because `<ng-content>` projects once and a
+ * template with one heading tag per branch silently renders every branch after the first empty — the same
+ * trade-off `primitives.ts` documents, resolved the same way.
+ */
+declare class KxPageHeader {
+    readonly title: i0.InputSignal<string>;
+    readonly description: i0.InputSignal<string>;
+    readonly level: i0.InputSignal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPageHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxPageHeader, "kx-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; }, {}, never, ["[kxPageHeaderBreadcrumb]", "[kxPageHeaderActions]", "*"], true, never>;
+}
+/**
+ *   <ol kxTimeline>
+ *     <li kxTimelineItem title="Shipped" description="14 March" status="success" />
+ *   </ol>
+ *
+ * An ordered list, because a timeline is ordered and the platform already says so — losing that to a stack of
+ * `<div>`s would mean a screen reader no longer announces "3 of 5".
+ *
+ * `status` is carried by a class on a decorative marker plus text, never by colour alone: the item's state is
+ * in `title`/`description`, which is what WCAG 1.4.1 asks for. The connecting line is drawn with logical
+ * insets so it stays on the start edge in an RTL page.
+ */
+declare class KxTimeline {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTimeline, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxTimeline, "ol[kxTimeline]", never, {}, {}, never, never, true, never>;
+}
+declare class KxTimelineItem {
+    readonly title: i0.InputSignal<string>;
+    readonly description: i0.InputSignal<string>;
+    readonly status: i0.InputSignal<KxTimelineStatus>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTimelineItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxTimelineItem, "li[kxTimelineItem]", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, ["[kxTimelineIcon]", "*"], true, never>;
+}
+
+/**
+ *   <kx-accordion type="single" collapsible [(value)]="open">
+ *     <kx-accordion-item value="shipping">
+ *       <kx-accordion-trigger>Shipping</kx-accordion-trigger>
+ *       <kx-accordion-content>Orders leave the warehouse within two working days.</kx-accordion-content>
+ *     </kx-accordion-item>
+ *   </kx-accordion>
+ *
+ * `value` is the list of open items' values, in both modes — in `single` it holds at most one. One shape for
+ * both modes keeps the two-way binding typed without a union the template would have to narrow.
+ */
+declare class KxAccordion {
+    readonly type: i0.InputSignal<"single" | "multiple">;
+    /** In `single` mode, whether the open item may be closed again, leaving none open. */
+    readonly collapsible: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /** The heading level each trigger sits in. */
+    readonly headingLevel: i0.InputSignalWithTransform<number, unknown>;
+    /** Two-way: the values of the open items. */
+    readonly value: i0.ModelSignal<readonly string[]>;
+    private readonly triggers;
+    isOpen(item: string): boolean;
+    /** Whether activating this open item would do nothing — a single accordion that is not collapsible. */
+    locked(item: string): boolean;
+    toggle(item: string): void;
+    /** APG accordion keys, on the triggers: focus moves, nothing opens. */
+    onKeydown(event: KeyboardEvent, from: KxAccordionTrigger): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAccordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAccordion, "kx-accordion", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["triggers"], ["*"], true, never>;
+}
+declare class KxAccordionItem {
+    readonly accordion: KxAccordion;
+    readonly value: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    private readonly id;
+    readonly triggerId: string;
+    readonly contentId: string;
+    readonly open: i0.Signal<boolean>;
+    readonly isDisabled: i0.Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAccordionItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAccordionItem, "kx-accordion-item", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * The heading and its button. The chevron is built in (as the dismiss glyph is in banner and inform): a
+ * disclosure control whose only state cue is the caller remembering to add an icon is one nobody can see.
+ * It points down and turns to point up when open. It does not mirror in RTL — down is down in both directions.
+ */
+declare class KxAccordionTrigger {
+    readonly item: KxAccordionItem;
+    private readonly button;
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAccordionTrigger, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAccordionTrigger, "kx-accordion-trigger", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxAccordionContent {
+    readonly item: KxAccordionItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAccordionContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAccordionContent, "kx-accordion-content", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ *   <kx-collapsible [(open)]="showAdvanced">
+ *     <button kxButton kxCollapsibleTrigger variant="Ghost">Advanced settings</button>
+ *     <kx-collapsible-content>…</kx-collapsible-content>
+ *   </kx-collapsible>
+ *
+ * One trigger, one region. The trigger is a directive on the caller's own `<button>`, so it can be any button
+ * the design calls for (a ghost `kxButton`, a link-styled one) and keeps every native behaviour.
+ */
+declare class KxCollapsible {
+    /** Two-way: whether the content is shown. */
+    readonly open: i0.ModelSignal<boolean>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly contentId: string;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCollapsible, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCollapsible, "kx-collapsible", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+}
+declare class KxCollapsibleTrigger {
+    readonly collapsible: KxCollapsible;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCollapsibleTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxCollapsibleTrigger, "button[kxCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
+}
+declare class KxCollapsibleContent {
+    readonly collapsible: KxCollapsible;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCollapsibleContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCollapsibleContent, "kx-collapsible-content", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Navigation: breadcrumb, pagination, table of contents, tab bar, stepper, navigation bar, app bar, footer.
+ *
+ * ── The shared contract (written before the code) ──────────────────────────
+ *
+ * Links stay links. A destination is an `<a href>` the caller writes, so middle-click, "copy link", the
+ * router's own directives and the browser's link semantics all keep working. Where a destination can also be
+ * an in-page action (a client-side pager, a tab bar that swaps views), the same directive also accepts a
+ * `<button>`. Nothing here turns navigation into a generic button to make it easier to test.
+ *
+ * "You are here" is `aria-current`, set by one boolean input (`current` / `active`):
+ *   page      breadcrumb's last crumb, pagination's page, an app-bar or tab-bar destination
+ *   location  a table-of-contents entry (a position within the page, not a page)
+ *   step      the stepper's current step
+ * It is never conveyed by colour alone: the current item also carries a shape cue — an indicator bar, a
+ * raised outlined surface or a weight change — measured by `check:navigation-visual`.
+ *
+ * Keyboard: every destination is one Tab stop and Enter follows it, which is what a list of links is. None of
+ * these is a composite widget, so none takes arrow keys — a roving tabindex on a breadcrumb or a footer would
+ * hide links from Tab and teach the reader a pattern nothing announces. (The arrow-key pattern is Tabs'.)
+ *
+ * Direction. Layout is logical throughout (inline-start/end, padding-inline), so every row runs from the
+ * inline start of the direction its own element resolves to. Glyphs that point along the reading direction —
+ * the breadcrumb separator, Previous / Next, Back — are the Unicode angle quotation marks ‹ ›, which the bidi
+ * algorithm mirrors in a right-to-left run. That makes the glyph follow the EFFECTIVE direction of the element
+ * it is in, including an LTR region inside an RTL page, with no rule keyed on a `[dir]` ancestor (wrong when
+ * nested) and no `:dir()` (which some CSS pipelines lower to a guess — TOKENS.md, "Switch direction"). The
+ * pixels are checked: `check:angular-browser`'s RTL pass reads which way each glyph actually points.
+ */
+/**
+ *   <nav kxBreadcrumb>
+ *     <ol kxBreadcrumbList>
+ *       <li kxBreadcrumbItem><a kxBreadcrumbLink href="/">Home</a></li>
+ *       <li kxBreadcrumbSeparator></li>
+ *       <li kxBreadcrumbItem><span kxBreadcrumbPage>Settings</span></li>
+ *     </ol>
+ *   </nav>
+ *
+ * The landmark is named "Breadcrumb" unless the caller names it (`label`). The current page is plain text with
+ * `aria-current="page"`, not a link to itself.
+ */
+declare class KxBreadcrumb {
+    readonly label: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBreadcrumb, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxBreadcrumb, "nav[kxBreadcrumb]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KxBreadcrumbList {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBreadcrumbList, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxBreadcrumbList, "ol[kxBreadcrumbList]", never, {}, {}, never, never, true, never>;
+}
+declare class KxBreadcrumbItem {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBreadcrumbItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxBreadcrumbItem, "li[kxBreadcrumbItem]", never, {}, {}, never, never, true, never>;
+}
+declare class KxBreadcrumbLink {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBreadcrumbLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxBreadcrumbLink, "a[kxBreadcrumbLink]", never, {}, {}, never, never, true, never>;
+}
+declare class KxBreadcrumbPage {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBreadcrumbPage, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxBreadcrumbPage, "span[kxBreadcrumbPage]", never, {}, {}, never, never, true, never>;
+}
+/** Hidden from assistive technology: the list already says these are steps of a path. */
+declare class KxBreadcrumbSeparator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBreadcrumbSeparator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxBreadcrumbSeparator, "li[kxBreadcrumbSeparator]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * A disabled `<button>` is `disabled`. A link has no disabled state, so a disabled link reports
+ * `aria-disabled="true"`, leaves the tab order, and swallows its click — it stays in the list, so the reader
+ * still learns there is no previous page, rather than finding a gap.
+ */
+declare abstract class KxDestination {
+    private readonly el;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly isButton: boolean;
+    onClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDestination, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxDestination, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <nav kxPagination>
+ *     <ul kxPaginationContent>
+ *       <li kxPaginationItem><a kxPaginationPrevious href="?page=1">Previous</a></li>
+ *       <li kxPaginationItem><a kxPaginationLink href="?page=1">1</a></li>
+ *       <li kxPaginationItem><a kxPaginationLink href="?page=2" current>2</a></li>
+ *       <li kxPaginationItem><kx-pagination-ellipsis /></li>
+ *       <li kxPaginationItem><a kxPaginationNext href="?page=3">Next</a></li>
+ *     </ul>
+ *   </nav>
+ *
+ * The caller owns which page is current — the same division React's Pagination makes — because only the
+ * application knows its routes. `<button>` works in place of every `<a>` for a pager that changes state
+ * rather than the URL.
+ */
+declare class KxPagination {
+    readonly label: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPagination, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxPagination, "nav[kxPagination]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KxPaginationContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPaginationContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxPaginationContent, "ul[kxPaginationContent]", never, {}, {}, never, never, true, never>;
+}
+declare class KxPaginationItem {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPaginationItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxPaginationItem, "li[kxPaginationItem]", never, {}, {}, never, never, true, never>;
+}
+declare class KxPaginationLink extends KxDestination {
+    readonly current: i0.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPaginationLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxPaginationLink, "a[kxPaginationLink], button[kxPaginationLink]", never, { "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Previous and Next: the visible word is the accessible name (default "Previous" / "Next", replaceable by
+ * projecting text, because this package ships no translations). The glyph is decorative and mirrors with the
+ * reading direction.
+ */
+declare class KxPaginationPrevious extends KxDestination {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPaginationPrevious, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxPaginationPrevious, "a[kxPaginationPrevious], button[kxPaginationPrevious]", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxPaginationNext extends KxDestination {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPaginationNext, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxPaginationNext, "a[kxPaginationNext], button[kxPaginationNext]", never, {}, {}, never, ["*"], true, never>;
+}
+/** A gap in the page range. Decorative: the numbers either side already say pages were skipped. */
+declare class KxPaginationEllipsis {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPaginationEllipsis, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxPaginationEllipsis, "kx-pagination-ellipsis", never, {}, {}, never, never, true, never>;
+}
+interface KxTocItem {
+    /** The id of the heading this entry links to (`href="#id"`). */
+    id: string;
+    label: string;
+    /** Nesting depth, from 1. Each level indents from the inline start. */
+    level?: number;
+}
+/**
+ *   <nav kxTableOfContents [items]="sections" [(active)]="section"></nav>
+ *
+ * In-page anchors, so they work with no JavaScript and with the browser's own scrolling. The entry for the
+ * section being read carries `aria-current="location"`; `active` is two-way so a click marks its entry at once,
+ * and an application with a scroll-spy writes the same signal from its observer.
+ */
+declare class KxTableOfContents {
+    readonly items: i0.InputSignal<readonly KxTocItem[]>;
+    readonly active: i0.ModelSignal<string>;
+    readonly label: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTableOfContents, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxTableOfContents, "nav[kxTableOfContents]", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
+}
+/**
+ *   <nav kxTabBar aria-label="Primary">
+ *     <a kxTabBarItem href="/home" active><svg kxTabBarIcon …></svg>Home</a>
+ *     <a kxTabBarItem href="/inbox" badge="3"><svg kxTabBarIcon …></svg>Inbox</a>
+ *   </nav>
+ *
+ * A phone's bottom navigation: a row of destinations, each an icon over its label. The label is always
+ * visible and is the accessible name; the icon is projected and decorative. The current destination is
+ * `aria-current="page"`, drawn with a full-strength label, an `--action` icon AND a pill behind it, so it does
+ * not depend on hue (React's TabBar colours the label only).
+ *
+ * Not a `tablist`: these are destinations, not panels of one view, so they are links in a navigation landmark
+ * and each is its own Tab stop.
+ */
+declare class KxTabBar {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTabBar, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxTabBar, "nav[kxTabBar]", never, {}, {}, never, never, true, never>;
+}
+declare class KxTabBarItem extends KxDestination {
+    readonly active: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * A short count shown on the icon. The painted badge is hidden from assistive technology and the same text
+     * follows the label, so the name reads "Inbox (3)" — label first — rather than "3Inbox", which is what a
+     * badge drawn before the label contributes. The space sits inside the hidden text, so the name is the same
+     * whether or not the caller's label carries whitespace of its own.
+     */
+    readonly badge: i0.InputSignal<string | number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTabBarItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxTabBarItem, "a[kxTabBarItem], button[kxTabBarItem]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, ["[kxTabBarIcon]", "*"], true, never>;
+}
+interface KxStep {
+    label: string;
+    description?: string;
+}
+/**
+ *   <ol kxStepper [steps]="steps" [current]="1"></ol>
+ *
+ * Progress through a fixed sequence: an ordered list, so position and count are announced by the list itself.
+ * Each step is complete, current or upcoming, derived from `current` (zero-based) against its index. Current is
+ * `aria-current="step"`. Complete steps also carry visually hidden text (`completedLabel`) — the check mark
+ * that replaces their number is decorative, and without the text a screen reader would hear the label and
+ * nothing else. Display only: a step is not a control (React's Stepper is not either).
+ */
+declare class KxStepper {
+    readonly steps: i0.InputSignal<readonly KxStep[]>;
+    /** Zero-based index of the step in progress. */
+    readonly current: i0.InputSignalWithTransform<number, unknown>;
+    readonly orientation: i0.InputSignal<KxOrientation>;
+    readonly completedLabel: i0.InputSignal<string>;
+    status(index: number): 'complete' | 'current' | 'upcoming';
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxStepper, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxStepper, "ol[kxStepper]", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "completedLabel": { "alias": "completedLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <header kxNavigationBar title="Inbox" infoText="3 unread" backButton (back)="location.back()">
+ *     <button kxButton kxNavigationBarActions variant="Ghost">Edit</button>
+ *   </header>
+ *
+ * A phone's top bar for one screen: an optional Back control, the screen's title (with optional info text) and
+ * trailing actions. The title wraps rather than truncating: at 200% text a cut-off title is a title nobody can
+ * read. `level` makes the title a heading when the bar is what names the screen.
+ *
+ * Back is a named button (`backLabel`, default "Back") whose glyph points toward the inline start.
+ */
+declare class KxNavigationBar {
+    readonly title: i0.InputSignal<string>;
+    readonly infoText: i0.InputSignal<string>;
+    readonly backButton: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly backLabel: i0.InputSignal<string>;
+    /** A heading level for the title, or none (the default) when the page names itself elsewhere. */
+    readonly level: i0.InputSignal<number>;
+    readonly back: i0.OutputEmitterRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxNavigationBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxNavigationBar, "header[kxNavigationBar], div[kxNavigationBar]", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "infoText": { "alias": "infoText"; "required": false; "isSignal": true; }; "backButton": { "alias": "backButton"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, ["[kxNavigationBarLeading]", "[kxNavigationBarActions]"], true, never>;
+}
+/**
+ *   <header kxAppBar>
+ *     <a kxAppBarBrand href="/">Acme</a>
+ *     <nav kxAppBarNav aria-label="Primary">
+ *       <a kxAppBarLink href="/" active>Overview</a>
+ *       <a kxAppBarLink href="/reports">Reports</a>
+ *     </nav>
+ *     <div kxAppBarActions><button kxButton size="sm">New</button></div>
+ *   </header>
+ *
+ * A web application's top bar. From 48rem up the navigation is a row between the brand and the actions. Below
+ * it, the same `<nav>` — one element, not a copy — becomes a disclosure under the bar, opened by a Menu button
+ * (`aria-expanded`, `aria-controls`). In DOM order the button comes straight before the panel it opens, so Tab
+ * goes from the button into the links. The panel animates like accordion content (disclosure.ts), Escape
+ * closes it and returns focus to the button, and following a link closes it.
+ */
+declare class KxAppBar {
+    /** Two-way: whether the narrow-screen menu is open. Ignored from 48rem up, where the links are always shown. */
+    readonly open: i0.ModelSignal<boolean>;
+    readonly sticky: i0.InputSignalWithTransform<boolean, unknown>;
+    /** The menu button's name. Its open/closed state is `aria-expanded`, so the name does not change with it. */
+    readonly menuLabel: i0.InputSignal<string>;
+    readonly navId: string;
+    private readonly toggle;
+    close(returnFocus?: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAppBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAppBar, "header[kxAppBar]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[kxAppBarBrand]", "[kxAppBarNav]", "[kxAppBarActions]", "*"], true, never>;
+}
+declare class KxAppBarBrand {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAppBarBrand, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxAppBarBrand, "[kxAppBarBrand]", never, {}, {}, never, never, true, never>;
+}
+declare class KxAppBarNav {
+    readonly bar: KxAppBar;
+    /** Following a link closes the narrow menu; the page it leads to should not open under a menu. */
+    onClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAppBarNav, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAppBarNav, "nav[kxAppBarNav]", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxAppBarLink {
+    readonly active: i0.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAppBarLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxAppBarLink, "a[kxAppBarLink]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KxAppBarActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAppBarActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxAppBarActions, "[kxAppBarActions]", never, {}, {}, never, never, true, never>;
+}
+/**
+ *   <footer kxFooter>
+ *     <div kxFooterColumns>
+ *       <kx-footer-column title="Product">
+ *         <a kxFooterLink href="/pricing">Pricing</a>
+ *       </kx-footer-column>
+ *     </div>
+ *     <div kxFooterBottom>© 2026 Acme</div>
+ *   </footer>
+ *
+ * The caller's own `<footer>`, so the `contentinfo` landmark is the browser's. Each column is a `group` named by
+ * its title, so a screen reader announces "Product, group" on entry instead of a run of unrelated links.
+ */
+declare class KxFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFooter, "footer[kxFooter]", never, {}, {}, never, never, true, never>;
+}
+declare class KxFooterColumns {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFooterColumns, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFooterColumns, "[kxFooterColumns]", never, {}, {}, never, never, true, never>;
+}
+declare class KxFooterColumn {
+    readonly title: i0.InputSignal<string>;
+    readonly titleId: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFooterColumn, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxFooterColumn, "kx-footer-column", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxFooterLink {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFooterLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFooterLink, "a[kxFooterLink]", never, {}, {}, never, never, true, never>;
+}
+declare class KxFooterBottom {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFooterBottom, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFooterBottom, "[kxFooterBottom]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * The overlay layer: one small set of primitives every floating or modal surface in this package stands on.
+ * Nothing in this file is exported from `public-api.ts` — it is infrastructure the dialog family
+ * (dialog.ts) and the floating family (floating.ts) share, and that Wave C2's menus and listboxes will
+ * consume. Its contract is documented in TOKENS.md ("Overlays") and ANGULAR-GRADUATION.md.
+ *
+ * ── Rendering: the browser's top layer, not a portal ───────────────────────
+ *
+ * An overlay has to escape every clipping and stacking context its trigger lives in: an `overflow: hidden`
+ * card, a transformed app shell, a sticky header with its own z-index. The usual answer is a portal that
+ * moves the surface's DOM to the end of `<body>`. That costs Angular a great deal: the content leaves the
+ * element injector it was declared under, inherits styles (and `dir`) from `<body>` instead of from where it
+ * was written, and needs a host outlet and teardown of its own.
+ *
+ * The platform now has the answer built in. A modal surface is a real `<dialog>` opened with `showModal()`,
+ * and a floating surface carries `popover="manual"` and is shown with `showPopover()`. Both put the element
+ * in the TOP LAYER: rendered above everything, positioned against the viewport, outside every ancestor's
+ * overflow clip, transform and z-index — while staying exactly where the template declared it in the DOM.
+ * So DI, change detection, CSS inheritance and the direction a nested `dir` region resolves to all keep
+ * working with no code, and there is no z-index anywhere in this layer. Order in the top layer is the order
+ * surfaces were shown, which is the stacking order this file's stack keeps.
+ *
+ * `showModal()` also makes everything outside the dialog inert: the background leaves the tab order and the
+ * accessibility tree, which is the containment a modal needs, from the browser rather than from an
+ * `aria-hidden` sweep over siblings.
+ *
+ * SSR: nothing here touches the DOM when a component is created. A server renders closed elements (`<dialog>`
+ * without `open`, a `[popover]` that is not shown); every call below runs from a browser-only render hook or an
+ * event handler.
+ *
+ * ── The stack ──────────────────────────────────────────────────────────────
+ *
+ * `KxOverlayStack` keeps open layers in the order they opened. It owns the three document listeners every
+ * overlay needs — keydown, pointerdown and focusin — installed when the first layer opens and removed when
+ * the last one closes, so a page with no open overlay has none of them.
+ *
+ *   Escape          goes to the TOPMOST layer only, and the keydown's default is prevented so a native
+ *                   `<dialog>` underneath never also receives a close request for the same key press.
+ *                   An Escape another component already handled (`defaultPrevented`) is left alone.
+ *   outside press   walks down from the top: each layer the press is outside of is asked to close; it stops
+ *                   at the first layer the press is inside, and after the first modal layer (nothing beneath a
+ *                   modal can have been pressed). "Inside" is the layer's own DOM subtree plus its companions
+ *                   (its trigger and anchor). A popover declared inside a dialog is inside that dialog's
+ *                   subtree, so pressing the popover can never read as a press outside its dialog.
+ *   focus outside   the same walk for focus, for the layers whose policy asks for it (non-modal surfaces).
+ *   nesting         closing a layer first closes every open layer nested inside its subtree.
+ *   scroll lock     the page's scrolling is held while at least one MODAL layer is open — derived from the
+ *                   stack on every change, not counted up and down, so it cannot drift: an inner modal closing
+ *                   leaves it locked while an outer one remains.
+ *
+ * Each layer applies its own policy when asked: an alert dialog declines to close on an outside press.
+ */
+/** Why the stack is asking a layer to close. `parent` is not a request: the layer it is nested in is closing. */
+type KxDismissReason = 'escape' | 'outside' | 'focus-outside' | 'parent';
+interface KxLayer {
+    readonly modal: boolean;
+    /** Whether this layer closes when focus moves outside it (non-modal surfaces). */
+    readonly closesOnFocusOutside: boolean;
+    /** The surface element. Inside it is inside the layer. */
+    surface(): HTMLElement | null;
+    /** Elements outside the surface that belong to it — its trigger, its anchor. */
+    companions(): readonly (Element | null | undefined)[];
+    /** The stack asks the layer to close. The layer decides, by its own policy, whether it does. */
+    request(reason: KxDismissReason): void;
+}
+/**
+ * Where a floating surface goes, relative to the element it belongs to. The contract is deliberately small:
+ *
+ *   side    top | bottom | start | end — start and end are LOGICAL: they resolve to left or right by the
+ *           direction the anchor itself computes to, so a popover set to open "toward the end" opens to the
+ *           right in an LTR page and to the left in an RTL one (and in a nested region, by that region)
+ *   align   start | center | end along the other axis, logical in the same way
+ *   offset  the gap between anchor and surface, in px
+ *
+ * Collision handling, in order: FLIP to the opposite side when the chosen one lacks the room and the
+ * opposite has more; SHIFT along the cross axis so the surface stays `padding` inside the viewport; and CAP
+ * the surface's size to the room it has (`maxWidth`, `maxHeight`, published as CSS custom properties) so large
+ * text or a phone-sized viewport makes it scroll inside itself rather than run off the screen.
+ *
+ * Pure: rects in, coordinates out. The DOM side (`autoPlace`) measures, calls this, writes the result.
+ */
+type KxSide = 'top' | 'bottom' | 'start' | 'end';
+type KxAlign = 'start' | 'center' | 'end';
+
+/** The state every member of the family shares. */
+declare abstract class KxDialogRoot {
+    /** Two-way: whether the surface is open. */
+    readonly open: i0.ModelSignal<boolean>;
+    /**
+     * Where focus goes on close when the element that opened it is gone — say, a row the dialog just deleted.
+     * Used only when the element focused before opening is no longer a valid focus target.
+     */
+    readonly returnFocus: i0.InputSignal<HTMLElement>;
+    private readonly base;
+    /** Each part's own `id` input, static or bound, registered by the part as it is created. */
+    readonly contentIdFrom: i0.WritableSignal<Signal<string>>;
+    readonly titleIdFrom: i0.WritableSignal<Signal<string>>;
+    readonly descriptionIdFrom: i0.WritableSignal<Signal<string>>;
+    /** Generated, unless the part has an `id` of its own (`id="…"` or `[id]="…"`) — then that one, as it changes. */
+    readonly contentId: Signal<string>;
+    readonly titleId: Signal<string>;
+    readonly descriptionId: Signal<string>;
+    /** The trigger, when there is one: a fallback focus target on close. */
+    trigger: HTMLElement | null;
+    show(): void;
+    close(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxDialogRoot, never, never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "returnFocus": { "alias": "returnFocus"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
+}
+/**
+ *   <kx-dialog [(open)]="editing">
+ *     <button kxButton kxDialogTrigger>Edit profile</button>
+ *     <dialog kxDialogContent>
+ *       <kx-dialog-header>
+ *         <h2 kxDialogTitle>Edit profile</h2>
+ *         <p kxDialogDescription>Changes are saved when you press Save.</p>
+ *       </kx-dialog-header>
+ *       …
+ *       <kx-dialog-footer>
+ *         <button kxButton variant="Outline" kxDialogClose>Cancel</button>
+ *         <button kxButton (click)="save()">Save</button>
+ *       </kx-dialog-footer>
+ *     </dialog>
+ *   </kx-dialog>
+ */
+declare class KxDialog extends KxDialogRoot {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxDialog, "kx-dialog", never, {}, {}, never, ["*"], true, never>;
+}
+/** An alert dialog: a decision that must be answered. See `kxAlertDialogContent`. */
+declare class KxAlertDialog extends KxDialogRoot {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAlertDialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAlertDialog, "kx-alert-dialog", never, {}, {}, never, ["*"], true, never>;
+}
+/** A sheet: a modal panel from one edge of the viewport. See `kxSheetContent`. */
+declare class KxSheet extends KxDialogRoot {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSheet, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSheet, "kx-sheet", never, {}, {}, never, ["*"], true, never>;
+}
+/** A drawer: a modal panel from the bottom edge, with a grab handle. See `kxDrawerContent`. */
+declare class KxDrawer extends KxDialogRoot {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDrawer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxDrawer, "kx-drawer", never, {}, {}, never, ["*"], true, never>;
+}
+/** Opens the surface. On the caller's own button, so it can be any button the design calls for. */
+declare class KxDialogTrigger {
+    readonly root: KxDialogRoot;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxDialogTrigger, "button[kxDialogTrigger]", never, {}, {}, never, never, true, never>;
+}
+/** Closes the surface — Cancel, Done, a footer's dismiss. */
+declare class KxDialogClose {
+    readonly root: KxDialogRoot;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogClose, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxDialogClose, "button[kxDialogClose]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * The surface's name. Put it on a real heading at the level the page needs (`<h2 kxDialogTitle>` in most
+ * applications: the dialog sits above the page's own `<h1>`).
+ */
+declare class KxDialogTitle {
+    readonly root: KxDialogRoot;
+    /** Your own id for the title, static or bound; the surface's `aria-labelledby` follows it. */
+    readonly id: i0.InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxDialogTitle, "[kxDialogTitle]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KxDialogDescription {
+    readonly root: KxDialogRoot;
+    /** Your own id for the description, static or bound; the surface's `aria-describedby` follows it. */
+    readonly id: i0.InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxDialogDescription, "[kxDialogDescription]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KxDialogHeader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxDialogHeader, "kx-dialog-header", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The actions row. In DOM order (Cancel before the confirming action, as the reader meets them), laid out
+ * toward the inline end; in a narrow surface it stacks in that same order, so what is seen and what Tab
+ * reaches never disagree.
+ */
+declare class KxDialogFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogFooter, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxDialogFooter, "kx-dialog-footer", never, {}, {}, never, ["*"], true, never>;
+}
+/** What every modal surface in the family does; the members differ only in role, layout and two policies. */
+declare abstract class KxModalSurface implements KxLayer {
+    readonly root: KxDialogRoot;
+    protected readonly el: HTMLDialogElement;
+    private readonly stack;
+    private readonly doc;
+    /** The accessible name when there is no `kxDialogTitle` inside. */
+    readonly label: i0.InputSignal<string>;
+    /** Your own id for the surface, static or bound; the trigger's `aria-controls` follows it. */
+    readonly id: i0.InputSignal<string>;
+    readonly modal = true;
+    readonly closesOnFocusOutside = false;
+    /** Whether a press on the backdrop closes it. An alert dialog's answer is no. */
+    protected readonly closesOnOutside: boolean;
+    private readonly titles;
+    private readonly descriptions;
+    protected readonly hasTitle: Signal<boolean>;
+    protected readonly hasDescription: Signal<boolean>;
+    private shown;
+    private returnTo;
+    private parent;
+    constructor();
+    surface(): HTMLElement;
+    companions(): readonly (Element | null)[];
+    request(reason: KxDismissReason): void;
+    /** The member's own first focus, when nothing in the content is marked `autofocus`. */
+    protected initialFocus(): HTMLElement | null;
+    private sync;
+    private own;
+    private focusInitial;
+    private restoreFocus;
+    /**
+     * A close request the stack did not see first (a platform back gesture): route it through the same policy
+     * as Escape. Escape itself never arrives here — the stack consumes the key.
+     */
+    protected onCancel(event: Event): void;
+    /** The browser closed the dialog by itself (a cancel it would not let us prevent): follow it. */
+    protected onNativeClose(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxModalSurface, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxModalSurface, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, ["titles", "descriptions"], never, true, never>;
+}
+/**
+ *   <dialog kxDialogContent [closeButton]="true" closeLabel="Close">…</dialog>
+ *
+ * A dialog: centred, `--radius-surface`, modal elevation. The built-in close button (an X, named by
+ * `closeLabel`) comes LAST in the DOM and sits at the inline-end of the top edge, so Tab meets the content
+ * first and the close control last — and the first focus lands in the content, not on the X.
+ */
+declare class KxDialogContent extends KxModalSurface {
+    /** Whether to show the built-in close button. */
+    readonly closeButton: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly closeLabel: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDialogContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxDialogContent, "dialog[kxDialogContent]", never, { "closeButton": { "alias": "closeButton"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Cancel and the confirming action of an alert dialog. Put them on your own buttons — usually
+ * `<button kxButton variant="Outline" kxAlertDialogCancel>` and
+ * `<button kxButton variant="Destructive" kxAlertDialogAction>` — in that order. Both close the dialog after
+ * your own click handler has run.
+ */
+declare class KxAlertDialogCancel {
+    readonly root: KxDialogRoot;
+    readonly el: HTMLButtonElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAlertDialogCancel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxAlertDialogCancel, "button[kxAlertDialogCancel]", never, {}, {}, never, never, true, never>;
+}
+declare class KxAlertDialogAction {
+    readonly root: KxDialogRoot;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAlertDialogAction, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxAlertDialogAction, "button[kxAlertDialogAction]", never, {}, {}, never, never, true, never>;
+}
+/**
+ *   <kx-alert-dialog [(open)]="confirming">
+ *     <button kxButton variant="Destructive" kxDialogTrigger>Delete project</button>
+ *     <dialog kxAlertDialogContent>
+ *       <kx-dialog-header>
+ *         <h2 kxDialogTitle>Delete "Atlas"?</h2>
+ *         <p kxDialogDescription>Its 214 files are removed for everyone. This cannot be undone.</p>
+ *       </kx-dialog-header>
+ *       <kx-dialog-footer>
+ *         <button kxButton variant="Outline" kxAlertDialogCancel>Cancel</button>
+ *         <button kxButton variant="Destructive" kxAlertDialogAction (click)="delete()">Delete project</button>
+ *       </kx-dialog-footer>
+ *     </dialog>
+ *   </kx-alert-dialog>
+ *
+ * A behaviour, not a style: `role="alertdialog"`, so assistive technology announces it as an interruption that
+ * needs an answer. Its defaults make an accidental confirmation harder, not easier:
+ *
+ *   - first focus is Cancel, never the destructive action — Enter on arrival declines
+ *   - a press on the backdrop does nothing: a decision is not answered by clicking away
+ *   - Escape is Cancel (the WAI-ARIA alert dialog pattern allows it, and it is the safe answer)
+ *   - no X: the two buttons are the only ways to answer, and they say what they do
+ */
+declare class KxAlertDialogContent extends KxModalSurface {
+    protected readonly closesOnOutside = false;
+    private readonly cancel;
+    protected initialFocus(): HTMLElement | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAlertDialogContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAlertDialogContent, "dialog[kxAlertDialogContent]", never, {}, {}, ["cancel"], ["*"], true, never>;
+}
+type KxSheetSide = 'top' | 'bottom' | 'start' | 'end';
+/**
+ *   <kx-sheet [(open)]="filtersOpen">
+ *     <button kxButton variant="Outline" kxDialogTrigger>Filters</button>
+ *     <dialog kxSheetContent side="end">…</dialog>
+ *   </kx-sheet>
+ *
+ * A modal panel against one edge of the viewport, full length along it. `start` and `end` are LOGICAL: an
+ * `end` sheet is on the right in a left-to-right page and on the left in a right-to-left one, resolved by the
+ * direction the sheet's own element computes to — so a sheet inside an RTL region of an LTR page opens from
+ * that region's end. (React's Sheet names physical edges, `left` / `right`; this is a deliberate difference.)
+ *
+ * The panel is as wide as `--kx-sheet-size` (24rem) but never wider than the viewport less 3rem, so the page
+ * behind stays visible — a reader can see where they are and that a press there closes the panel. It scrolls
+ * inside itself, and keeps clear of a device's safe areas.
+ */
+declare class KxSheetContent extends KxModalSurface {
+    readonly side: i0.InputSignal<KxSheetSide>;
+    readonly closeButton: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly closeLabel: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSheetContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSheetContent, "dialog[kxSheetContent]", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "closeButton": { "alias": "closeButton"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ *   <kx-drawer [(open)]="sharing">
+ *     <button kxButton kxDialogTrigger>Share</button>
+ *     <dialog kxDrawerContent>
+ *       <kx-dialog-header><h2 kxDialogTitle>Share</h2></kx-dialog-header>
+ *       …
+ *       <kx-dialog-footer><button kxButton variant="Outline" kxDialogClose>Done</button></kx-dialog-footer>
+ *     </dialog>
+ *   </kx-drawer>
+ *
+ * KinetixUI's drawer is a bottom sheet with a grab handle and rounded top corners (React's is vaul's; the
+ * SwiftUI and Compose ports make it their bottom sheet). First focus goes to the PANEL, not to a field inside
+ * it, for the reason React's drawer gives: on a phone, focusing a text field on open raises the keyboard over
+ * the drawer the reader has not yet seen. From the panel, the screen reader announces the drawer's title and
+ * Tab walks its content in order. The handle is decorative: there is no drag-to-dismiss in this package (it
+ * is not claimed); Escape, the backdrop and your own close control dismiss it.
+ */
+declare class KxDrawerContent extends KxModalSurface {
+    protected initialFocus(): HTMLElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxDrawerContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxDrawerContent, "dialog[kxDrawerContent]", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * Info — one action ("Got it"). Confirmation, Warning — Cancel + a primary action. Destructive — Cancel + a
+ * destructive action. The same four names React's Modal takes.
+ */
+type KxModalType = 'Info' | 'Confirmation' | 'Warning' | 'Destructive';
+/**
+ *   <kx-modal type="Destructive" title="Delete this view?" description="Saved filters in it are lost."
+ *             [(open)]="confirming" (action)="deleteView()">
+ *     <button kxButton variant="Outline" kxDialogTrigger>Delete view</button>
+ *   </kx-modal>
+ *
+ * Not a second primitive: React's Modal is a dialog with a fixed structure — a header with the title and a
+ * close button, a divider, the description and any projected content, a divider, and an end-aligned footer
+ * whose buttons follow `type`. This is the same composition on the same `kxDialogContent` surface, so it has
+ * every behaviour of the dialog above and adds none of its own beyond its defaults:
+ *
+ *   - first focus is Cancel when there is one (never the action), the action when it is alone (Info)
+ *   - `action` fires when the action is chosen; `cancel` when Cancel is. Escape, the backdrop and the close
+ *     button close it without either — `openChange` reports every close
+ *
+ * A decision that must be answered — nothing else on the screen may proceed until it is — is an alert dialog,
+ * not a Destructive modal: the modal can still be dismissed by a backdrop press (as React's can).
+ *
+ * The trigger is projected (`kxDialogTrigger`); anything else projected goes in the body under the description.
+ */
+declare class KxModal extends KxDialogRoot {
+    readonly type: i0.InputSignal<KxModalType>;
+    readonly title: i0.InputSignal<string>;
+    readonly description: i0.InputSignal<string>;
+    /** Overrides the type's default action label. */
+    readonly actionLabel: i0.InputSignal<string>;
+    readonly cancelLabel: i0.InputSignal<string>;
+    readonly closeLabel: i0.InputSignal<string>;
+    readonly action: i0.OutputEmitterRef<void>;
+    readonly cancel: i0.OutputEmitterRef<void>;
+    protected readonly defaultAction: Signal<string>;
+    protected choose(what: 'action' | 'cancel'): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxModal, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxModal, "kx-modal", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; "cancel": "cancel"; }, never, ["[kxDialogTrigger]", "*"], true, never>;
+}
+
+/**
+ * The floating family: popover, tooltip, hover card — three surfaces that sit beside the element they belong
+ * to, never modal, and are three different things:
+ *
+ *                 opened by                       is                          focus
+ *   popover       pressing its trigger            a non-modal dialog          moves in; Tab out closes it
+ *   tooltip       hover (after a delay), or       the trigger's DESCRIPTION   stays on the trigger
+ *                 keyboard focus                  (`role="tooltip"`)
+ *   hover card    hover with intent, or           a preview of where the      stays on the trigger; Tab
+ *                 keyboard focus                  trigger leads               walks into its links
+ *
+ * A tooltip is not a tiny popover: it carries no controls, never takes focus, and what it says is already the
+ * trigger's accessible description whether or not it is showing — so a touch user, who never hovers, still has
+ * it read out. A hover card is not a tooltip: it is not a description (a card of profile details read as a
+ * button's description would be noise) and it may hold links. Neither may be the only way to an action or a
+ * piece of information the reader needs: a tooltip does not open on touch, and a hover card's trigger is a
+ * link whose destination carries the same content.
+ *
+ * ── Shared ─────────────────────────────────────────────────────────────────
+ *
+ * Each surface is `popover="manual"` and shown into the top layer (overlay.ts), placed by `autoPlace`: `side`
+ * top | bottom | start | end (logical), `align` start | center | end, `offset` px; flipped, shifted and capped
+ * to the room it has, and re-placed on scroll, resize and size changes. It is declared where it is used, so
+ * inside a dialog it is inside that dialog — a press on it is never a press outside its dialog, and Escape
+ * closes it first.
+ *
+ * Every surface answers Escape. Hover surfaces honour WCAG 1.4.13: dismissible (Escape, without moving the
+ * pointer), hoverable (the pointer can travel from the trigger onto the surface: leaving the trigger starts a
+ * short close delay that entering the surface cancels) and persistent (they stay while hovered or focused).
+ *
+ * Motion: a fade and a 4px settle away from the side it opens on, over `--duration-fast` in and
+ * `--duration-instant` out (a tooltip `--duration-instant` both ways); `none` under reduced motion.
+ */
+/** Why a floating surface closed — decides whether focus goes back to the trigger. */
+type CloseReason = KxDismissReason | 'close' | 'blur' | 'pointer' | 'press' | 'programmatic';
+declare abstract class KxFloatingRoot {
+    /** Two-way: whether the surface is showing. */
+    readonly open: i0.ModelSignal<boolean>;
+    private readonly generatedId;
+    /** The content's own `id` input, static or bound, once the content exists. */
+    readonly contentIdFrom: i0.WritableSignal<Signal<string>>;
+    /** Generated, unless the content has an `id` of its own (`id="…"` or `[id]="…"`) — then that one, as it changes. */
+    readonly contentId: Signal<string>;
+    trigger: HTMLElement | null;
+    anchor: HTMLElement | null;
+    /** The last reason it closed for; `programmatic` when `open` was set from outside. */
+    reason: CloseReason;
+    show(): void;
+    hide(reason?: CloseReason): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFloatingRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFloatingRoot, never, never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
+}
+/** Where a floating surface goes, and the open/close lifecycle every member shares. */
+declare abstract class KxFloatingSurface implements KxLayer {
+    abstract readonly root: KxFloatingRoot;
+    abstract readonly side: () => KxSide;
+    /** Your own id for the surface, static or bound; the trigger's references follow it. Generated when absent. */
+    readonly id: i0.InputSignal<string>;
+    /** Alignment along the trigger, logical. */
+    readonly align: i0.InputSignal<KxAlign>;
+    /** The gap between the trigger and the surface, in px. */
+    readonly offset: i0.InputSignalWithTransform<number, unknown>;
+    protected readonly el: HTMLElement;
+    protected readonly doc: Document;
+    private readonly stack;
+    readonly modal = false;
+    abstract readonly closesOnFocusOutside: boolean;
+    private shown;
+    private release;
+    constructor();
+    surface(): HTMLElement;
+    companions(): readonly (Element | null)[];
+    request(reason: KxDismissReason): void;
+    protected afterShow(): void;
+    protected afterHide(_reason: CloseReason, _focusWasInside: boolean): void;
+    private sync;
+    private teardown;
+    private isShowing;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFloatingSurface, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFloatingSurface, never, never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <kx-popover [(open)]="filtersOpen">
+ *     <button kxButton variant="Outline" kxPopoverTrigger>Filters</button>
+ *     <kx-popover-content side="bottom" align="start" label="Filters">…</kx-popover-content>
+ *   </kx-popover>
+ *
+ * A non-modal dialog beside its trigger. Pressing the trigger toggles it (`aria-expanded`, `aria-controls`,
+ * `aria-haspopup="dialog"`). On open, focus moves to the first `autofocus` element or Tab stop inside it, else
+ * to the surface. Because the surface follows its trigger in the DOM, Tab order runs trigger → popover →
+ * the rest of the page with no focus guards; when focus leaves both, the popover closes. Escape, a press
+ * outside, `kxPopoverClose` and `[(open)]` close it. Escape and the close control return focus to the trigger;
+ * a press elsewhere leaves focus where the reader put it.
+ *
+ * It is never modal and nothing behind it is made inert — content that must hold focus is a dialog.
+ */
+declare class KxPopover extends KxFloatingRoot {
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPopover, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxPopover, "kx-popover", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxPopoverTrigger {
+    readonly root: KxPopover;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPopoverTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxPopoverTrigger, "button[kxPopoverTrigger]", never, {}, {}, never, never, true, never>;
+}
+/** Positions the popover against this element instead of the trigger. */
+declare class KxPopoverAnchor {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPopoverAnchor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxPopoverAnchor, "[kxPopoverAnchor]", never, {}, {}, never, never, true, never>;
+}
+/** Closes the popover and returns focus to its trigger. */
+declare class KxPopoverClose {
+    readonly root: KxPopover;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPopoverClose, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxPopoverClose, "button[kxPopoverClose]", never, {}, {}, never, never, true, never>;
+}
+declare class KxPopoverContent extends KxFloatingSurface {
+    readonly root: KxPopover;
+    readonly side: i0.InputSignal<KxSide>;
+    readonly label: i0.InputSignal<string>;
+    /** The id of an element inside that names the popover (a heading); preferred over `label`. */
+    readonly labelledby: i0.InputSignal<string>;
+    readonly closesOnFocusOutside = true;
+    protected afterShow(): void;
+    protected afterHide(reason: CloseReason, focusWasInside: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxPopoverContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxPopoverContent, "kx-popover-content", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledby": { "alias": "labelledby"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare abstract class KxHoverRoot extends KxFloatingRoot {
+    /** ms the pointer rests on the trigger before the surface opens. Keyboard focus opens it at once. */
+    abstract readonly openDelay: () => number;
+    /** ms after the pointer leaves before the surface closes — the time it has to travel onto the surface. */
+    abstract readonly closeDelay: () => number;
+    /** Whether losing focus from the trigger closes it (tooltip), or focus may move into it (hover card). */
+    protected abstract readonly closesOnBlur: boolean;
+    private openTimer;
+    private closeTimer;
+    constructor();
+    private clear;
+    /** The pointer reached the trigger. Touch has no hover: a tap is the trigger's own action. */
+    enter(event: PointerEvent): void;
+    /** The pointer left the trigger or the surface: close unless it arrives on the other in time. */
+    leave(event: PointerEvent): void;
+    private keyboardFocusWithin;
+    /** The pointer is on the surface: stay. */
+    hold(): void;
+    /** Keyboard focus opens at once; focus from a press (not `:focus-visible`) does not. */
+    focused(el: EventTarget | null): void;
+    blurred(): void;
+    /** Pressing the trigger acts on it; the surface gets out of the way. */
+    pressed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxHoverRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxHoverRoot, never, never, {}, {}, never, never, true, never>;
+}
+/**
+ *   <kx-tooltip>
+ *     <button kxButton variant="Ghost" size="icon" aria-label="Copy link" kxTooltipTrigger>…</button>
+ *     <kx-tooltip-content>Copies a link anyone in the workspace can open</kx-tooltip-content>
+ *   </kx-tooltip>
+ *
+ * The content is the trigger's `aria-describedby` from the start — it stays in the DOM, hidden, while closed —
+ * so the description is read on focus whether or not the tooltip is showing, and a touch user gets it too.
+ * An icon-only trigger still needs its own name (`aria-label`): a description is not a name.
+ *
+ * Opens after `openDelay` (700ms, React's) of hover, or at once on keyboard focus. Closes on Escape, on
+ * blur, on pressing the trigger, and `closeDelay` (100ms) after the pointer leaves both trigger and tooltip.
+ * There is no group "skip delay" between neighbouring tooltips (React's provider has one).
+ */
+declare class KxTooltip extends KxHoverRoot {
+    readonly openDelay: i0.InputSignalWithTransform<number, unknown>;
+    readonly closeDelay: i0.InputSignalWithTransform<number, unknown>;
+    protected readonly closesOnBlur = true;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTooltip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxTooltip, "kx-tooltip", never, { "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxTooltipTrigger {
+    readonly root: KxTooltip;
+    private readonly own;
+    /** The caller's own description, if the element had one, and then the tooltip. */
+    protected describedby(): string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTooltipTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxTooltipTrigger, "[kxTooltipTrigger]", never, {}, {}, never, never, true, never>;
+}
+declare class KxTooltipContent extends KxFloatingSurface {
+    readonly root: KxTooltip;
+    readonly side: i0.InputSignal<KxSide>;
+    readonly closesOnFocusOutside = false;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTooltipContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxTooltipContent, "kx-tooltip-content", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ *   <kx-hover-card>
+ *     <a kxHoverCardTrigger href="/people/ada">Ada Lovelace</a>
+ *     <kx-hover-card-content>…</kx-hover-card-content>
+ *   </kx-hover-card>
+ *
+ * A preview of what the trigger — a link — leads to. Opens after `openDelay` (700ms) of hover, or at once on
+ * keyboard focus, and waits `closeDelay` (300ms) after the pointer leaves, long enough to move onto the card
+ * and use a link in it. Focus stays on the trigger; Tab goes from the trigger into the card's links (it
+ * follows the trigger in the DOM), and the card closes when focus leaves both. Escape closes it.
+ *
+ * It is not a description and has no role: the destination page carries the same content, which is how a
+ * touch user — who never sees the card — gets it.
+ */
+declare class KxHoverCard extends KxHoverRoot {
+    readonly openDelay: i0.InputSignalWithTransform<number, unknown>;
+    readonly closeDelay: i0.InputSignalWithTransform<number, unknown>;
+    protected readonly closesOnBlur = false;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxHoverCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxHoverCard, "kx-hover-card", never, { "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxHoverCardTrigger {
+    readonly root: KxHoverCard;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxHoverCardTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxHoverCardTrigger, "[kxHoverCardTrigger]", never, {}, {}, never, never, true, never>;
+}
+declare class KxHoverCardContent extends KxFloatingSurface {
+    readonly root: KxHoverCard;
+    readonly side: i0.InputSignal<KxSide>;
+    readonly closesOnFocusOutside = true;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxHoverCardContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxHoverCardContent, "kx-hover-card-content", never, { "side": { "alias": "side"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { KxAccordion, KxAccordionContent, KxAccordionItem, KxAccordionTrigger, KxAlert, KxAlertDescription, KxAlertDialog, KxAlertDialogAction, KxAlertDialogCancel, KxAlertDialogContent, KxAlertTitle, KxAppBar, KxAppBarActions, KxAppBarBrand, KxAppBarLink, KxAppBarNav, KxAspectRatio, KxAvatar, KxAvatarFallback, KxAvatarGroup, KxAvatarImage, KxBadge, KxBanner, KxBreadcrumb, KxBreadcrumbItem, KxBreadcrumbLink, KxBreadcrumbList, KxBreadcrumbPage, KxBreadcrumbSeparator, KxButton, KxButtonGroup, KxButtonGroupSeparator, KxButtonGroupText, KxCard, KxCardContent, KxCardDescription, KxCardFooter, KxCardHeader, KxCardTitle, KxCheckbox, KxCircularProgress, KxCodeBlock, KxCollapsible, KxCollapsibleContent, KxCollapsibleTrigger, KxDescriptionList, KxDescriptionListItem, KxDialog, KxDialogClose, KxDialogContent, KxDialogDescription, KxDialogFooter, KxDialogHeader, KxDialogTitle, KxDialogTrigger, KxDrawer, KxDrawerContent, KxEmpty, KxEmptyContent, KxEmptyDescription, KxEmptyHeader, KxEmptyMedia, KxEmptyTitle, KxFab, KxField, KxFieldDescription, KxFieldLabel, KxFieldMessage, KxFooter, KxFooterBottom, KxFooterColumn, KxFooterColumns, KxFooterLink, KxHoverCard, KxHoverCardContent, KxHoverCardTrigger, KxImage, KxInform, KxInput, KxInputGroup, KxInputGroupAddon, KxInputGroupButton, KxInputGroupInput, KxInputGroupText, KxInputOtp, KxKbd, KxKbdGroup, KxLabel, KxList, KxListItem, KxMarquee, KxMarqueeContent, KxMetric, KxModal, KxNativeSelect, KxNavigationBar, KxNumberInput, KxPageHeader, KxPagination, KxPaginationContent, KxPaginationEllipsis, KxPaginationItem, KxPaginationLink, KxPaginationNext, KxPaginationPrevious, KxPasswordInput, KxPopover, KxPopoverAnchor, KxPopoverClose, KxPopoverContent, KxPopoverTrigger, KxProgress, KxQuote, KxRadio, KxRadioGroup, KxRating, KxSegment, KxSegmentedControl, KxSeparator, KxSheet, KxSheetContent, KxSkeleton, KxSlider, KxSpinner, KxStepper, KxSwitch, KxTab, KxTabBar, KxTabBarItem, KxTabList, KxTabPanel, KxTableOfContents, KxTabs, KxTag, KxTextarea, KxTimeline, KxTimelineItem, KxToggle, KxToggleGroup, KxToggleGroupItem, KxTooltip, KxTooltipContent, KxTooltipTrigger };
+export type { KxAlertVariant, KxAlign, KxBadgeVariant, KxButtonSize, KxButtonVariant, KxCodeBlockFile, KxCorners, KxDescriptionListLayout, KxEmptyMediaVariant, KxFabSize, KxFabVariant, KxFieldMessageVariant, KxImageRatio, KxInformVariant, KxModalType, KxOrientation, KxSheetSide, KxSide, KxSpinnerSize, KxSpinnerVariant, KxStep, KxTagVariant, KxTimelineStatus, KxTocItem, KxToggleSize, KxToggleVariant, KxTrend };