@kinetixui/angular 0.24.0

package/types/kinetixui-angular.d.ts

@@ -0,0 +1,801 @@
+import * as i0 from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * The shared design contract, in Angular's type system.
+ *
+ * These unions are the same variant and size names the React, SwiftUI, Jetpack Compose and Flutter
+ * implementations use. That is what "parity" means in KinetixUI: the contract and the tokens are shared, the
+ * implementation is idiomatic per platform. Renaming one of these values is a cross-platform change, not an
+ * Angular one.
+ */
+/** Button fills. Capitalised to match the design source's own Variant property, as every other platform does. */
+type KxButtonVariant = 'Primary' | 'Secondary' | 'Outline' | 'Destructive' | 'Ghost' | 'Link';
+type KxButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+/** Corner style — matches the design source's Corners property. */
+type KxCorners = 'sharp' | 'default' | 'pill';
+type KxBadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning';
+type KxAlertVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info';
+type KxOrientation = 'horizontal' | 'vertical';
+type KxSpinnerSize = 'sm' | 'md' | 'lg';
+type KxSpinnerVariant = 'default' | 'muted' | 'onColor';
+type KxTagVariant = 'default' | 'secondary' | 'destructive' | 'warning' | 'outline';
+/** Direction of change on a metric. `neutral` is "measured, and flat" — not "unknown". */
+type KxTrend = 'up' | 'down' | 'neutral';
+type KxEmptyMediaVariant = 'default' | 'icon';
+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';
+
+/**
+ * KinetixUI button.
+ *
+ *   <button kxButton>Save</button>
+ *   <button kxButton variant="Outline" size="lg">Cancel</button>
+ *   <a kxButton variant="Link" href="/docs">Docs</a>
+ *
+ * A directive on a real `<button>` or `<a>`, not a `<kx-button>` wrapper. That is the idiomatic Angular choice
+ * and the accessible one: the element keeps its own role, its `type`, `disabled`, form submission, focus order
+ * and the browser's own activation behaviour, so none of it has to be re-implemented with ARIA. §28 of the
+ * house rules — native semantics before ARIA — is the reason, not convenience.
+ *
+ * A disabled anchor is not a thing in HTML, so the anchor form is disabled with `aria-disabled` plus the
+ * stylesheet's `pointer-events: none`; callers should also drop `href`. The directive does not silently rewrite
+ * an anchor into a button.
+ */
+declare class KxButton {
+    readonly variant: i0.InputSignal<KxButtonVariant>;
+    readonly size: i0.InputSignal<KxButtonSize>;
+    readonly corners: i0.InputSignal<KxCorners>;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxButton, "button[kxButton], a[kxButton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "corners": { "alias": "corners"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The presentational primitives: badge, card family, label, input, separator, progress and alert.
+ *
+ * Each is either a directive on the element HTML already has for the job (label, input) or a component that
+ * renders one (badge, card, alert). Nothing here invents a role the platform already provides.
+ */
+/**
+ *   <kx-badge>New</kx-badge>
+ *   <kx-badge variant="success">Synced</kx-badge>
+ *
+ * Presentational by default. A badge that conveys a status change the user must be told about should be given
+ * a live region by the caller — this does not guess, because a wrong `aria-live` is worse than none.
+ */
+declare class KxBadge {
+    readonly variant: i0.InputSignal<KxBadgeVariant>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxBadge, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxBadge, "kx-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxCard {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCard, "kx-card", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxCardHeader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCardHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCardHeader, "kx-card-header", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * A real heading, at a level the page chooses. `level` exists because a card's title is only an `<h3>` in the
+ * example — in a page that already has an `<h3>` the right level is whatever keeps the document outline
+ * correct, and a component that hard-codes one produces broken heading structure at scale.
+ *
+ * The level is carried by `role="heading"` + `aria-level` on the host rather than by switching between `<h1>`
+ * … `<h6>` tags. That is not a shortcut: `<ng-content>` projects its content exactly once, so a template with
+ * a heading tag per branch silently renders an empty heading for every branch after the first. Between a real
+ * tag that loses its text and an ARIA heading that keeps it, the accessible answer is the one with the text in
+ * it — and `role="heading"` with an explicit level is fully supported.
+ */
+declare class KxCardTitle {
+    readonly level: i0.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCardTitle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCardTitle, "kx-card-title", never, { "level": { "alias": "level"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxCardDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCardDescription, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCardDescription, "kx-card-description", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxCardContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCardContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCardContent, "kx-card-content", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxCardFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCardFooter, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCardFooter, "kx-card-footer", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ *   <label kxLabel for="email">Email</label>
+ *
+ * A directive on a real `<label>`, so `for`/`id` association and click-to-focus are the browser's, not ours.
+ */
+declare class KxLabel {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxLabel, "label[kxLabel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ *   <input kxInput type="email" [(ngModel)]="email" />
+ *
+ * A directive, so `type`, `required`, `disabled`, autofill, the browser's own validation and every Angular
+ * forms directive keep working untouched. The error state is read from `aria-invalid`, which means the
+ * semantics drive the styling rather than a parallel `invalid` input that could disagree with them.
+ *
+ * Multi-line fields are `kxTextarea`, not this: a textarea has its own minimum height and resize affordance,
+ * and the React package splits them for the same reason.
+ */
+declare class KxInput {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxInput, "input[kxInput]", never, {}, {}, never, never, true, never>;
+}
+/**
+ *   <kx-separator />
+ *   <kx-separator orientation="vertical" />
+ *
+ * Decorative by default and therefore hidden from assistive technology, which is what a rule between two
+ * visually grouped things usually is. Set `[decorative]="false"` to expose it as a real `separator`.
+ */
+declare class KxSeparator {
+    readonly orientation: i0.InputSignal<KxOrientation>;
+    readonly decorative: i0.InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSeparator, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSeparator, "kx-separator", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <kx-progress [value]="62" />
+ *   <kx-progress [value]="null" />   <!-- indeterminate -->
+ *
+ * A real `progressbar`. `value` is null for indeterminate, which drops `aria-valuenow` — the correct way to
+ * say "in progress, amount unknown", rather than reporting a fake 0.
+ */
+declare class KxProgress {
+    readonly value: i0.InputSignal<number>;
+    readonly max: i0.InputSignal<number>;
+    /** Announced instead of the raw percentage when the number alone would not mean anything ("3 of 7 files"). */
+    readonly valueText: i0.InputSignal<string>;
+    protected readonly percent: i0.Signal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxProgress, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxProgress, "kx-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "valueText": { "alias": "valueText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <kx-alert variant="destructive">
+ *     <kx-alert-title>Payment failed</kx-alert-title>
+ *     <kx-alert-description>Your card was declined.</kx-alert-description>
+ *   </kx-alert>
+ *
+ * `role` defaults to `alert` only for the variants that carry urgency. A neutral informational panel announced
+ * as an assertive live region interrupts a screen-reader user for no reason, so `default` and `info` render as
+ * a plain region and the caller can opt in.
+ */
+declare class KxAlert {
+    readonly variant: i0.InputSignal<KxAlertVariant>;
+    protected readonly role: i0.Signal<"alert" | "note">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAlert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAlert, "kx-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxAlertTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAlertTitle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAlertTitle, "kx-alert-title", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxAlertDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAlertDescription, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAlertDescription, "kx-alert-description", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Checkbox and Switch — the two binary controls, and the package's forms architecture in miniature.
+ *
+ * Both implement `ControlValueAccessor`, so they work with `[(ngModel)]`, `formControlName` and
+ * `formControl` exactly like a native input, including `disabled` driven by the form model
+ * (`setDisabledState`) rather than only by an attribute. Both also expose a plain `[(checked)]` model for
+ * applications that are not using Angular forms; the two paths write through the same setter so they cannot
+ * disagree.
+ *
+ * Both render a real `<button>` carrying the ARIA role rather than a visually-hidden `<input>`. A button is
+ * already focusable, already activates on Space and Enter, and already reports `disabled` to assistive
+ * technology — so the role is the only thing ARIA has to add. The trade-off is deliberate and worth stating:
+ * a `<button role="checkbox">` submits no value in a native (non-Angular) form post. Angular forms carry the
+ * value in the form model, which is how these are meant to be used.
+ */
+/**
+ * Shared CVA plumbing: the parts that would otherwise be copied verbatim into both controls.
+ *
+ * `@Directive()` with no selector, not a plain class — `input()`, `model()` and `output()` are only legal on a
+ * class Angular's compiler knows about, so an undecorated base would fail the build with NG8110.
+ */
+declare abstract class KxToggleBase implements ControlValueAccessor {
+    readonly checked: i0.ModelSignal<boolean>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Emits only on real user interaction. `checkedChange` (from the model) also fires when a form or a parent
+     * writes the value in, which is usually not what a caller reacting to "the user flipped this" wants.
+     */
+    readonly toggled: i0.OutputEmitterRef<boolean>;
+    /** `disabled` can come from the input OR from the form model — either one disables the control. */
+    protected readonly formDisabled: i0.WritableSignal<boolean>;
+    protected isDisabled(): boolean;
+    private onChange;
+    private onTouched;
+    protected toggle(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxToggleBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxToggleBase, never, never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "toggled": "toggled"; }, never, never, true, never>;
+}
+/**
+ *   <kx-checkbox [(ngModel)]="remember" />
+ *   <kx-checkbox [(checked)]="remember" (toggled)="save($event)" />
+ *
+ * `indeterminate` renders `aria-checked="mixed"` — the tri-state a "select all" header needs. It is display
+ * only: activating an indeterminate checkbox resolves it to checked, as it does everywhere else.
+ */
+declare class KxCheckbox extends KxToggleBase {
+    readonly indeterminate: i0.InputSignalWithTransform<boolean, unknown>;
+    /** One of these is required when no visible `<label for>` points at the control. */
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly ariaLabelledby: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxCheckbox, "kx-checkbox", never, { "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <kx-switch [(ngModel)]="notifications" aria-label="Notifications" />
+ *
+ * `role="switch"` rather than a checkbox: it reports "on/off" instead of "checked", which is what an
+ * immediately-applied setting is.
+ */
+declare class KxSwitch extends KxToggleBase {
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly ariaLabelledby: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSwitch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSwitch, "kx-switch", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <button kxToggle [(pressed)]="bold" aria-label="Bold">B</button>
+ *
+ * A directive on a real `<button>` that carries `aria-pressed` — the ARIA pattern for a two-state button,
+ * and the one thing ARIA has to add to a button that already has focus, activation and disabled handling.
+ */
+declare class KxToggle {
+    readonly pressed: i0.ModelSignal<boolean>;
+    readonly variant: i0.InputSignal<KxToggleVariant>;
+    readonly size: i0.InputSignal<KxToggleSize>;
+    readonly toggled: i0.OutputEmitterRef<boolean>;
+    protected press(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxToggle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxToggle, "button[kxToggle]", never, { "pressed": { "alias": "pressed"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "pressed": "pressedChange"; "toggled": "toggled"; }, never, never, true, never>;
+}
+/**
+ *   <kx-toggle-group [(value)]="marks" aria-label="Text style">
+ *     <kx-toggle-group-item value="bold">B</kx-toggle-group-item>
+ *   </kx-toggle-group>
+ *
+ * Multiple-select by default: each item is an independent `aria-pressed` button inside a `role="group"`, so
+ * every one is its own tab stop and its own announcement — which is what a formatting toolbar is.
+ *
+ * `type="single"` is a different control, and is rendered as one: a `radiogroup` of real `<input
+ * type="radio">` elements, so arrow-key selection and the single tab stop come from the browser. Sharing a
+ * template between the two would mean re-implementing radio behaviour with ARIA, which is exactly the
+ * trade this package refuses elsewhere.
+ */
+declare class KxToggleGroup {
+    readonly type: i0.InputSignal<"single" | "multiple">;
+    /** A string for `single`, an array for `multiple`. */
+    readonly value: i0.ModelSignal<string | string[]>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly name: i0.InputSignal<string>;
+    isOn(value: string): boolean;
+    toggle(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxToggleGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxToggleGroup, "kx-toggle-group", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+declare class KxToggleGroupItem {
+    protected readonly group: KxToggleGroup;
+    readonly value: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    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>;
+}
+/**
+ *   <kx-segmented-control [(value)]="range" aria-label="Range">
+ *     <kx-segment value="7d">7 days</kx-segment>
+ *     <kx-segment value="30d">30 days</kx-segment>
+ *   </kx-segmented-control>
+ *
+ * A single-choice control shown as one connected track — iOS's segmented control, on the web. It is a real
+ * `radiogroup` of real radio inputs for the same reason the radio group is: arrow keys, one tab stop and the
+ * "exactly one is chosen" semantics are the browser's.
+ *
+ * Unlike a toggle group, a segment cannot be turned off by clicking it again: a segmented control with
+ * nothing selected has no meaning.
+ */
+declare class KxSegmentedControl {
+    readonly value: i0.ModelSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly name: i0.InputSignal<string>;
+    readonly selected: i0.OutputEmitterRef<string>;
+    select(next: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSegmentedControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSegmentedControl, "kx-segmented-control", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selected": "selected"; }, never, ["*"], true, never>;
+}
+declare class KxSegment {
+    protected readonly control: KxSegmentedControl;
+    readonly value: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly id: i0.InputSignal<string>;
+    constructor(control: KxSegmentedControl);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSegment, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSegment, "kx-segment", 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>;
+}
+
+/**
+ * The display primitives: avatar, aspect ratio, keyboard glyphs, skeleton, spinner, tag, quote, metric and the
+ * empty-state family.
+ *
+ * Nothing here holds application state. Each is either a directive on the element HTML already has for the
+ * job, or a component that renders that element — the same rule the rest of the package follows.
+ */
+/**
+ *   <kx-aspect-ratio [ratio]="16 / 9"><img src="cover.jpg" alt="" /></kx-aspect-ratio>
+ *
+ * The CSS `aspect-ratio` property, which every target browser has had for years. There is no padding-top
+ * percentage hack here and no ResizeObserver: the platform does this now, and a component that re-implemented
+ * it would be slower and would fight the container.
+ */
+declare class KxAspectRatio {
+    readonly ratio: i0.InputSignal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAspectRatio, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAspectRatio, "kx-aspect-ratio", never, { "ratio": { "alias": "ratio"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ *   <kx-avatar>
+ *     <img kxAvatarImage src="/ada.jpg" alt="Ada Lovelace" />
+ *     <kx-avatar-fallback>AL</kx-avatar-fallback>
+ *   </kx-avatar>
+ *
+ * The fallback shows until the image reports `load`, and comes back if it reports `error`. That is the whole
+ * reason this is a component rather than a styled `<img>`: a broken avatar that leaves a blank circle is the
+ * failure users actually hit, and `alt` text alone does not fill the space.
+ *
+ * The image carries the accessible name. The fallback initials are decorative — announcing "AL" as well would
+ * read the person's name twice, so `aria-hidden` is set on it and the caller keeps `alt` meaningful.
+ */
+declare class KxAvatar {
+    /** Set by KxAvatarImage as the image loads or fails; the fallback reads it. */
+    readonly imageLoaded: i0.WritableSignal<boolean>;
+    /** Set by KxAvatarGroup on the avatars past its `max`. Not an input: the group owns it, not the caller. */
+    readonly collapsed: i0.WritableSignal<boolean>;
+    protected readonly classes: i0.Signal<"kx-avatar" | "kx-avatar kx-avatar--collapsed">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAvatar, "kx-avatar", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * A directive on a real `<img>`, so `src`, `srcset`, `loading="lazy"`, `alt` and the browser's own decoding
+ * are untouched. It only reports load state up to the avatar and hides itself until then.
+ */
+declare class KxAvatarImage {
+    protected readonly avatar: KxAvatar;
+    constructor(avatar: KxAvatar);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAvatarImage, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxAvatarImage, "img[kxAvatarImage]", never, {}, {}, never, never, true, never>;
+}
+declare class KxAvatarFallback {
+    protected readonly avatar: KxAvatar;
+    constructor(avatar: KxAvatar);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAvatarFallback, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAvatarFallback, "kx-avatar-fallback", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ *   <kx-avatar-group [max]="3">
+ *     <kx-avatar>…</kx-avatar>
+ *     …
+ *   </kx-avatar-group>
+ *
+ * Stacked, overlapping avatars with a "+N" marker for the rest. The group counts its projected avatars with a
+ * content query and tells the ones past `max` to collapse; it does not re-wrap or re-render them, because a
+ * projected node can only be rendered where it was projected.
+ *
+ * The overflow marker is announced ("and 4 more") rather than left as the bare glyph, which reads as "plus
+ * four" out of context.
+ */
+declare class KxAvatarGroup {
+    /** Visible avatars before the rest fold into the marker. Null (the default) shows every one. */
+    readonly max: i0.InputSignal<number>;
+    private readonly avatars;
+    protected readonly overflow: i0.Signal<number>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxAvatarGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxAvatarGroup, "kx-avatar-group", never, { "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, ["avatars"], ["*"], true, never>;
+}
+/**
+ *   <kbd kxKbdGroup><kbd kxKbd>Ctrl</kbd><kbd kxKbd>K</kbd></kbd>
+ *
+ * Directives on real `<kbd>` elements. `<kbd>` already means "keyboard input" to assistive technology and to
+ * every reader of the markup, so there is nothing for a wrapper component to add.
+ */
+declare class KxKbd {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxKbd, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxKbd, "kbd[kxKbd]", never, {}, {}, never, never, true, never>;
+}
+declare class KxKbdGroup {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxKbdGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxKbdGroup, "kbd[kxKbdGroup]", never, {}, {}, never, never, true, never>;
+}
+/**
+ *   <kx-skeleton style="block-size: 1rem; inline-size: 60%" />
+ *
+ * A loading placeholder, sized by the caller because only the caller knows the shape of the content it stands
+ * in for. Hidden from assistive technology: the meaningful announcement is the "loading" state on the region
+ * that owns it, not a stack of grey rectangles.
+ *
+ * The shimmer is a CSS animation wrapped in `prefers-reduced-motion`, so it stops for users who ask it to.
+ */
+declare class KxSkeleton {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSkeleton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSkeleton, "kx-skeleton", never, {}, {}, never, never, true, never>;
+}
+/**
+ *   <kx-spinner />
+ *   <kx-spinner size="lg" variant="muted" label="Saving…" />
+ *
+ * A `role="status"` live region carrying its own label, so a screen reader is told that something is in
+ * progress instead of being shown a spinning border it cannot perceive. The ring is a CSS border animation —
+ * no icon dependency, and it degrades to a static ring under reduced motion rather than disappearing.
+ */
+declare class KxSpinner {
+    readonly size: i0.InputSignal<KxSpinnerSize>;
+    readonly variant: i0.InputSignal<KxSpinnerVariant>;
+    readonly label: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSpinner, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSpinner, "kx-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <kx-tag>Design</kx-tag>
+ *   <kx-tag variant="outline" removable (removed)="drop('design')">Design</kx-tag>
+ *
+ * A container-tinted chip, distinct from Badge (a solid pill). The dismiss button is opt-in and carries an
+ * accessible name built from the tag's own text, so a list of them does not announce "Remove, Remove,
+ * Remove" — `removeLabel` overrides it where the text is not the right name.
+ */
+declare class KxTag {
+    readonly variant: i0.InputSignal<KxTagVariant>;
+    readonly removable: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly removeLabel: i0.InputSignal<string>;
+    readonly removed: i0.OutputEmitterRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTag, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxTag, "kx-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+}
+/**
+ *   <kx-quote author="Ada Lovelace" authorTitle="Mathematician">
+ *     The Analytical Engine weaves algebraic patterns.
+ *   </kx-quote>
+ *
+ * A real `<figure>` / `<blockquote>` / `<figcaption>`, which is the markup a quotation with an attribution
+ * already has in HTML. The curly quotation marks are decorative punctuation and are hidden from assistive
+ * technology — a screen reader announces a blockquote as one already.
+ */
+declare class KxQuote {
+    readonly author: i0.InputSignal<string>;
+    readonly authorTitle: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxQuote, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxQuote, "kx-quote", never, { "author": { "alias": "author"; "required": false; "isSignal": true; }; "authorTitle": { "alias": "authorTitle"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[kxQuoteAvatar]"], true, never>;
+}
+/**
+ *   <kx-metric label="Revenue" value="$48,120" trend="up" change="+12.4%" />
+ *
+ * A stat tile. The trend arrow is decorative — the direction is already in the `change` text, and an arrow
+ * announced as "up" next to "+12.4%" is noise. Colour is not the only carrier of meaning here for the same
+ * reason: the sign is in the text.
+ */
+declare class KxMetric {
+    readonly label: i0.InputSignal<string>;
+    readonly value: i0.InputSignal<string>;
+    readonly trend: i0.InputSignal<KxTrend>;
+    readonly change: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxMetric, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxMetric, "kx-metric", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "change": { "alias": "change"; "required": false; "isSignal": true; }; }, {}, never, ["[kxMetricIcon]", "[kxMetricChart]"], true, never>;
+}
+/**
+ *   <kx-empty>
+ *     <kx-empty-header>
+ *       <kx-empty-media variant="icon">…</kx-empty-media>
+ *       <kx-empty-title>No projects yet</kx-empty-title>
+ *       <kx-empty-description>Create one to get started.</kx-empty-description>
+ *     </kx-empty-header>
+ *     <kx-empty-content><button kxButton>New project</button></kx-empty-content>
+ *   </kx-empty>
+ *
+ * Composed rather than prop-driven, like Card, so it drops into whatever already has a border — a table cell,
+ * a card, a bare section — without forcing its own.
+ */
+declare class KxEmpty {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxEmpty, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxEmpty, "kx-empty", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxEmptyHeader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxEmptyHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxEmptyHeader, "kx-empty-header", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxEmptyMedia {
+    readonly variant: i0.InputSignal<KxEmptyMediaVariant>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxEmptyMedia, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxEmptyMedia, "kx-empty-media", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxEmptyTitle {
+    readonly level: i0.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxEmptyTitle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxEmptyTitle, "kx-empty-title", never, { "level": { "alias": "level"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class KxEmptyDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxEmptyDescription, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxEmptyDescription, "kx-empty-description", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxEmptyContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxEmptyContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxEmptyContent, "kx-empty-content", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * The form controls beyond checkbox and switch: textarea, native select, radio group, slider, number input,
+ * password input, and the field wrapper that labels and describes any of them.
+ *
+ * The rule this file follows, and the reason it is short: where HTML already has the control, KinetixUI is a
+ * directive on it. A `<input type="range">` already has arrow-key stepping, Home/End, `aria-valuenow`, RTL
+ * awareness and a form value. A `role="slider"` div has none of that, and every re-implementation of it in
+ * this industry has shipped with at least one of those missing. The same argument decides radio (a real
+ * `<input type="radio">` group gives roving focus and arrow-key selection for free) and number input.
+ *
+ * Every control that carries a value implements `ControlValueAccessor`, so `[(ngModel)]`, `formControl` and
+ * `formControlName` all work, including `setDisabledState` from the form model.
+ */
+/**
+ * `@Directive()` with no selector rather than a plain class: `input()`, `model()` and `output()` are only
+ * legal on a class the Angular compiler knows about, and an undecorated base fails the build with NG8110.
+ */
+declare abstract class KxValueBase<T> implements ControlValueAccessor {
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    protected readonly formDisabled: i0.WritableSignal<boolean>;
+    protected isDisabled(): boolean;
+    protected onChange: (value: T) => void;
+    protected onTouched: () => void;
+    abstract writeValue(value: T): void;
+    registerOnChange(fn: (value: T) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxValueBase<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxValueBase<any>, never, never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <textarea kxTextarea rows="4" [(ngModel)]="notes"></textarea>
+ *
+ * A directive on a real `<textarea>`: `rows`, `maxlength`, `required`, the browser's own validation and every
+ * Angular forms directive keep working untouched. Separate from `kxInput` because the two have different
+ * metrics (a minimum height and a resize affordance), matching the React package's Input/Textarea split.
+ *
+ * The error state is read from `aria-invalid`, so the semantics drive the styling instead of a parallel
+ * `invalid` input that could disagree with them.
+ */
+declare class KxTextarea {
+    /** `vertical` (the default) or `none`. Horizontal resize breaks the column it sits in, so it is not offered. */
+    readonly resize: i0.InputSignal<"vertical" | "none">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTextarea, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxTextarea, "textarea[kxTextarea]", never, { "resize": { "alias": "resize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <select kxNativeSelect [(ngModel)]="country">
+ *     <option value="pt">Portugal</option>
+ *   </select>
+ *
+ * A directive on the browser's own `<select>`, which on a phone opens the platform picker and on a desktop
+ * opens the OS listbox. That is the whole point of it — where a designed listbox is wanted, that is a
+ * different component. Nothing here re-implements the popup, so nothing here can get it wrong.
+ */
+declare class KxNativeSelect {
+    readonly corners: i0.InputSignal<KxCorners | "rounded">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxNativeSelect, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxNativeSelect, "select[kxNativeSelect]", never, { "corners": { "alias": "corners"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ *   <kx-radio-group name="plan" [(ngModel)]="plan" aria-label="Plan">
+ *     <kx-radio value="free">Free</kx-radio>
+ *     <kx-radio value="pro">Pro</kx-radio>
+ *   </kx-radio-group>
+ *
+ * The radios are real `<input type="radio">` elements sharing a `name`, so arrow-key selection, roving focus,
+ * the "one tab stop per group" behaviour and the group's own form semantics are the browser's. An ARIA
+ * re-implementation of a radio group has to rebuild all four, and usually rebuilds three.
+ *
+ * The group is the `ControlValueAccessor`; the radios read and write through it.
+ */
+declare class KxRadioGroup extends KxValueBase<string | null> {
+    /** Shared `name` for the underlying inputs. Defaults to a per-instance name so two groups never merge. */
+    readonly name: i0.InputSignal<string>;
+    readonly value: i0.ModelSignal<string>;
+    readonly orientation: i0.InputSignal<"horizontal" | "vertical">;
+    /** Emits only on user selection — `valueChange` also fires when a form writes the value in. */
+    readonly selected: i0.OutputEmitterRef<string>;
+    /** Called by a child radio. Public because the radio is a separate component, not because callers should. */
+    select(next: string): void;
+    groupDisabled(): boolean;
+    /** A radio lost focus — mark the group touched so `ng-touched` and validation messages behave. */
+    touch(): void;
+    writeValue(value: string | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxRadioGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxRadioGroup, "kx-radio-group", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selected": "selected"; }, never, ["*"], true, never>;
+}
+/**
+ *   <kx-radio value="pro">Pro</kx-radio>
+ *
+ * Renders `<input type="radio">` + `<label>`, associated by id, so the whole row is a click target and the
+ * label is the accessible name without any `aria-label` guessing.
+ */
+declare class KxRadio {
+    protected readonly group: KxRadioGroup;
+    readonly value: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly id: i0.InputSignal<string>;
+    constructor(group: KxRadioGroup);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxRadio, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxRadio, "kx-radio", 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-slider [(ngModel)]="volume" [min]="0" [max]="100" [step]="5" aria-label="Volume" />
+ *
+ * A real `<input type="range">`. Arrow keys, Page Up/Down, Home/End, `aria-valuenow`/`valuemin`/`valuemax`,
+ * 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.
+ */
+declare class KxSlider extends KxValueBase<number> {
+    readonly value: i0.ModelSignal<number>;
+    readonly min: i0.InputSignal<number>;
+    readonly max: i0.InputSignal<number>;
+    readonly step: i0.InputSignal<number>;
+    /** Announced instead of the raw number where the number alone means nothing ("Medium", "3 of 7"). */
+    readonly valueText: i0.InputSignal<string>;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly ariaLabelledby: i0.InputSignal<string>;
+    readonly changed: i0.OutputEmitterRef<number>;
+    protected readonly fill: i0.Signal<number>;
+    protected commit(next: number): void;
+    writeValue(value: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxSlider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxSlider, "kx-slider", 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; }; "valueText": { "alias": "valueText"; "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>;
+}
+/**
+ *   <kx-number-input [(ngModel)]="quantity" [min]="1" [max]="99" aria-label="Quantity" />
+ *
+ * A real `<input type="number">` with explicit step buttons beside it. The input keeps the numeric keypad on
+ * touch, the browser's own arrow-key stepping and `valueAsNumber`; the buttons exist because the native
+ * spinners are tiny, inconsistent between browsers, and in several of them not reachable by keyboard at all.
+ *
+ * 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.
+ */
+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 ariaLabel: i0.InputSignal<string>;
+    readonly ariaLabelledby: 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>;
+}
+/**
+ *   <kx-password-input [(ngModel)]="password" aria-label="Password" />
+ *
+ * A real password field with a reveal toggle. The toggle is a real `<button>` carrying `aria-pressed`, so its
+ * state is announced; the field keeps `autocomplete="current-password"` by default so password managers still
+ * recognise it, and `[autocomplete]` switches it to `new-password` on a sign-up form.
+ */
+declare class KxPasswordInput extends KxValueBase<string> {
+    readonly value: i0.ModelSignal<string>;
+    readonly autocomplete: i0.InputSignal<"current-password" | "new-password">;
+    readonly ariaLabel: i0.InputSignal<string>;
+    readonly ariaLabelledby: 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>;
+}
+/**
+ *   <kx-field>
+ *     <label kxFieldLabel for="email">Email</label>
+ *     <input kxInput id="email" aria-describedby="email-hint" />
+ *     <p kxFieldDescription id="email-hint">We only use this to sign you in.</p>
+ *     <kx-field-message variant="error">Enter a valid address.</kx-field-message>
+ *   </kx-field>
+ *
+ * Layout and type for a labelled control, and nothing else. It deliberately does not generate ids or wire
+ * `aria-describedby` for you: a wrapper that guesses those has to guess which of several descriptions is the
+ * error, and gets it wrong on the form where it matters. The ids are the caller's, and they are three
+ * characters each.
+ *
+ * An error message is a live region, so a validation message that appears after submit is announced rather
+ * than silently rendered below the field.
+ */
+declare class KxField {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxField, "kx-field", never, {}, {}, never, ["*"], true, never>;
+}
+declare class KxFieldLabel {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFieldLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFieldLabel, "label[kxFieldLabel]", never, {}, {}, never, never, true, never>;
+}
+declare class KxFieldDescription {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFieldDescription, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxFieldDescription, "[kxFieldDescription]", never, {}, {}, never, never, true, never>;
+}
+declare class KxFieldMessage {
+    readonly variant: i0.InputSignal<KxFieldMessageVariant>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxFieldMessage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxFieldMessage, "kx-field-message", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class KxTab {
+    readonly tabs: KxTabs;
+    readonly el: ElementRef<HTMLButtonElement>;
+    readonly value: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignal<boolean>;
+    readonly id: string;
+    readonly panelId: string;
+    selected(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTab, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KxTab, "button[kxTab]", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KxTabList {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTabList, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KxTabList, "kx-tab-list", never, {}, {}, never, ["*"], true, never>;
+}
+/**
+ * The panel is focusable (`tabindex="0"`) because after Tab moves out of the tab list the next stop must be
+ * the panel itself — otherwise a keyboard user lands past the content the tab just revealed. Hidden panels are
+ * removed from the DOM rather than merely hidden, so nothing inside them is reachable or announced.
+ */
+declare class KxTabPanel {
+    private readonly tabs;
+    readonly value: i0.InputSignal<string>;
+    active(): boolean;
+    labelledBy(): 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>;
+}
+declare class KxTabs {
+    /** Two-way: `[(value)]` for a controlled tab strip, or leave it and let the first tab win. */
+    readonly value: i0.ModelSignal<string>;
+    private readonly tabs;
+    private readonly initialised;
+    tabFor(value: string): KxTab | undefined;
+    select(value: string): void;
+    /** Falls back to the first enabled tab when nothing is selected, so an uncontrolled strip still works. */
+    constructor();
+    onKeydown(event: KeyboardEvent): void;
+    private readonly el;
+    /**
+     * The document's own direction, read at the moment of the keypress rather than taken as an input — an
+     * application that flips `dir` at runtime keeps working with no extra wiring.
+     *
+     * The nearest `[dir]` ancestor is checked before the computed style. Computed direction is the more correct
+     * answer when direction comes from CSS, but it is also the one a DOM implementation is free not to inherit,
+     * so relying on it alone makes the behaviour depend on the environment rather than on the markup.
+     */
+    private isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KxTabs, never>;
+    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 };