@kraft.stitch/angular 0.0.4-beta.1 → 0.0.4-beta.2

package/types/kraft.stitch-angular.d.ts

@@ -0,0 +1,2395 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { KsVariant, KsBaseSize, KsBaseVariant, KsSize, Palette, ThemeMode, KsRollingGrouping, KsRollingDirection, KsRollingDesign, KsTextTone, KsPosition, LoaderStateEnum, KsToastPosition } from '@kraft.stitch/core';
+export { KsRollingDesign, KsRollingDirection, KsRollingGrouping, KsToast, KsToastPosition, toastStore } from '@kraft.stitch/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/** DOM shape of the real `<ks-button>` custom element, typed for the wrapper. */
+type KsButtonElement = HTMLElement & {
+    icon: string;
+    name: string;
+    variant: KsVariant;
+    size: KsBaseSize;
+    isRounded: boolean;
+    disabled: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-button>` Stencil custom element.
+ *
+ * ## How this actually renders a button (no markup lives in this file)
+ *
+ * 1. A parent template writes `<ks-button name="Save" (ksClick)="save()">`.
+ * 2. Angular's renderer creates that host node with
+ *    `document.createElement('ks-button')`. Because the side-effect import
+ *    above already ran `customElements.define('ks-button', ...)`, the
+ *    **browser itself** immediately upgrades that node into an instance of
+ *    Stencil's compiled `KsButton` class — this is standard Custom Elements
+ *    behavior, nothing Angular-specific.
+ * 3. That upgrade runs Stencil's `connectedCallback` → `render()`, which
+ *    injects the real `<button>…</button>` markup as children of the host
+ *    node. This happens **regardless of Angular** — it's the same thing
+ *    that would happen if you dropped `<ks-button>` in a plain HTML file.
+ * 4. `KsButtonComponent` (this class) is a *second, independent* thing
+ *    attached to that same host node — Angular doesn't care that the node
+ *    is also a custom element instance. Its only job is translation:
+ *    push signal-input values onto the element's real DOM properties, and
+ *    re-emit the native `clicked` DOM event as an Angular `output()`.
+ *
+ * `template: ''` (no `<ng-content>`) is intentional: `ks-button`'s Stencil
+ * `render()` has no `<slot>`, so there is nothing to project — content
+ * written between `<ks-button>` tags wouldn't be displayed by the real
+ * component anyway. Content projection would only make sense here if the
+ * wrapped Stencil component actually declared a `<slot>`.
+ *
+ * ## Why the output is called `ksClick`, NOT `clicked`
+ *
+ * `<ks-button>` (the Stencil element) dispatches a **native** DOM
+ * `CustomEvent` literally named `clicked` on the host node. It is tempting
+ * to expose the wrapper's own output using that exact same name so the
+ * public API "mirrors" the native event — but doing so creates a **name
+ * collision** that makes the event fire twice from a parent template such
+ * as `<ks-button (clicked)="log($event)">`:
+ *
+ * For *any* event binding in a template, Ivy's `ɵɵlistener` instruction
+ * does two things whenever the bound name also happens to match a
+ * directive/component **output** on that element (`tNode.outputs[name]`):
+ * 1. It subscribes the template's handler to that output (`output.emit()`
+ *    calls it).
+ * 2. It **also** attaches a genuine `addEventListener(name, …)` straight
+ *    onto the host DOM node for that same literal name, independent of
+ *    step 1 — Ivy can't know whether the name is "just" an output or also
+ *    a real DOM event some element in the tree might dispatch, so it wires
+ *    both to be safe.
+ *
+ * If the output were named `clicked`, both of those fire for the *same*
+ * underlying interaction here: (1) our own `this.ksClick.emit(...)` call
+ * below invokes the template handler once, and (2) the raw native
+ * `clicked` `CustomEvent` that `<ks-button>` dispatches on the host node
+ * is picked up by Ivy's own native listener from step 2 and invokes the
+ * *same* template handler a second time — with a different, unwrapped
+ * event object. (An earlier attempt at fixing this used
+ * `@HostListener('clicked', ['$event'])`, which hits the same
+ * `tNode.outputs['clicked']` check and instead causes *infinite emit
+ * recursion*, since the host listener itself becomes a subscriber of the
+ * output it emits on.)
+ *
+ * Naming the output `ksClick` (no relation to any real DOM event name)
+ * removes the collision entirely: a parent writes
+ * `<ks-button (ksClick)="log($event)">`, Ivy subscribes that to our
+ * output, and the phantom native `addEventListener('ksClick', …)` it also
+ * attaches never fires because no such DOM event exists. Only the manual
+ * `addEventListener('clicked', …)` below — on the *internal* native event
+ * name, never referenced in any template — observes the real click and
+ * re-emits it once through `ksClick`. (This mirrors how libraries like
+ * Ionic prefix outputs, e.g. `ionChange` instead of `change`, for exactly
+ * this reason.)
+ */
+declare class KsButtonComponent {
+    private readonly el;
+    /** Icon class string (e.g. Material Icon or Font Awesome class) */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Button label text */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Visual style variant */
+    readonly variant: _angular_core.InputSignal<KsVariant>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Renders the button with fully-rounded pill corners */
+    readonly isRounded: _angular_core.InputSignal<boolean>;
+    /** Disables the button */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits the `MouseEvent` from the native `clicked` `CustomEvent`
+     * dispatched by `<ks-button>`. Deliberately NOT named `clicked` — see
+     * the class doc comment above for why that would fire this event twice.
+     */
+    readonly ksClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    constructor(ref: ElementRef<KsButtonElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsButtonComponent, "ks-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "isRounded": { "alias": "isRounded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "ksClick": "ksClick"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsButtonGroupItem` exported by
+ * `core/src/components/Buttons/button-group/button-group.tsx`.
+ *
+ * Duplicated here (instead of importing it from `@kraft.stitch/core`) because that
+ * package's root barrel (`core/src/index.ts`) is still being assembled and
+ * does not yet reliably re-export every per-component type — only the
+ * shared enums in `ks-ui.types` (`KsBaseSize`, `KsBaseVariant`, `KsVariant`,
+ * imported below) are stable to depend on today. Keep this in sync with the
+ * Stencil source if its shape changes.
+ */
+interface KsButtonGroupItem {
+    key: string;
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type KsButtonGroupDisplayStyle = 'default' | 'switch';
+/** DOM shape of the real `<ks-button-group>` custom element, typed for the wrapper. */
+type KsButtonGroupElement = HTMLElement & {
+    buttons: KsButtonGroupItem[];
+    variant: KsBaseVariant;
+    size: KsBaseSize;
+    displayStyle: KsButtonGroupDisplayStyle;
+    multi: boolean;
+    selectable: boolean;
+    disabled: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-button-group>` Stencil custom element.
+ *
+ * `template: ''` — the Stencil `render()` for this element has no `<slot>`,
+ * so there is nothing for this wrapper to project; every button is
+ * generated from the `buttons` input.
+ *
+ * ## Output naming
+ * The native element dispatches DOM `CustomEvent`s named `clicked` and
+ * `selectionChanged`. Both outputs below are renamed with a `ks` prefix
+ * (`ksClick`, `ksSelectionChange`) rather than reusing those exact strings.
+ * Doing so is required, not just cosmetic: for a template binding such as
+ * `<ks-button-group (clicked)="...">`, Angular's `ɵɵlistener` instruction
+ * *always* attaches a raw `addEventListener('clicked', …)` to the host
+ * element in addition to subscribing to a same-named component output —
+ * this is unconditional for element nodes (see
+ * `packages/core/src/render3/instructions/listener.ts` →
+ * `listenerInternal`), not something a custom-elements schema can opt out
+ * of. With a same-named output, the parent handler would therefore run
+ * *twice* per interaction — once via our own unwrapped `.emit()` call, once
+ * via Angular's own raw listener receiving the untouched `CustomEvent`
+ * (defeating the "no `event.detail`" requirement). Prefixing every output
+ * with `ks` guarantees the literal name never matches a real DOM event, so
+ * only our manual listener (below) ever observes it. See `button/button.ts`
+ * for the original write-up of this same issue.
+ */
+declare class KsButtonGroupComponent {
+    private readonly el;
+    /** The buttons to render */
+    readonly buttons: _angular_core.InputSignal<KsButtonGroupItem[]>;
+    /** Visual variant */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Display style: 'default' (filled/outlined) or 'switch' (pill toggle) */
+    readonly displayStyle: _angular_core.InputSignal<KsButtonGroupDisplayStyle>;
+    /** Allow multiple selected buttons (toggle mode) */
+    readonly multi: _angular_core.InputSignal<boolean>;
+    /** Toggle/selection mode — shows active state on click */
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    /** Disables the entire group */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Emits the clicked button's `key`. From the native `clicked` event. */
+    readonly ksClick: _angular_core.OutputEmitterRef<string>;
+    /** Emits the current selection when `selectable`. From the native `selectionChanged` event. */
+    readonly ksSelectionChange: _angular_core.OutputEmitterRef<string[]>;
+    constructor(ref: ElementRef<KsButtonGroupElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsButtonGroupComponent, "ks-button-group", never, { "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "displayStyle": { "alias": "displayStyle"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "ksClick": "ksClick"; "ksSelectionChange": "ksSelectionChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsChipOption` exported by
+ * `core/src/components/Buttons/chips/chips.tsx`. Duplicated locally — see
+ * the note in `button-group/button-group.ts` on why component-specific
+ * shapes aren't imported from `@kraft.stitch/core`'s root barrel yet.
+ */
+interface KsChipOption {
+    value: string | number;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type KsChipsValue = (string | number) | (string | number)[] | null;
+/** DOM shape of the real `<ks-chips>` custom element, typed for the wrapper. */
+type KsChipsElement = HTMLElement & {
+    options: KsChipOption[];
+    multi: boolean;
+    label: string;
+    size: KsBaseSize;
+    isRounded: boolean;
+    disabled: boolean;
+    value: KsChipsValue;
+    writeValue(val: KsChipsValue): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-chips>` Stencil custom element.
+ *
+ * ## Two-way binding
+ * The Stencil source's own doc comment says Angular forms integration
+ * (`ngModel`/`formControl`) would be "provided later by the generated
+ * output-target wrappers" — this is that wrapper. Rather than trying to
+ * reuse Angular's `[(value)]` banana-box sugar (which would require an
+ * output literally named `valueChange`, colliding with the native
+ * `valueChange` `CustomEvent` the element already dispatches — see
+ * `button/button.ts` for why that double-fires), two-way binding is
+ * implemented the idiomatic Angular way: `ControlValueAccessor`. Bind with
+ * `[(ngModel)]="fruit"` or `formControlName="fruit"` and it Just Works,
+ * because `NgModel`/`FormControlDirective` talk to `writeValue` /
+ * `registerOnChange` directly through DI — no template event-name matching
+ * involved, so there's no collision to worry about.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="fruit" (ksValueChange)="fruit = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render, nothing to project.
+ */
+declare class KsChipsComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Full list of chip options */
+    readonly options: _angular_core.InputSignal<KsChipOption[]>;
+    /** Allow selecting multiple chips */
+    readonly multi: _angular_core.InputSignal<boolean>;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Renders chips with fully-rounded pill corners */
+    readonly isRounded: _angular_core.InputSignal<boolean>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    readonly value: _angular_core.InputSignal<KsChipsValue>;
+    /** Emits the newly-selected value(s). From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<KsChipsValue>;
+    constructor(ref: ElementRef<KsChipsElement>);
+    /** `ControlValueAccessor` — called by `ngModel`/`formControl` to push a value in. */
+    writeValue(value: KsChipsValue): void;
+    registerOnChange(fn: (value: KsChipsValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsChipsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsChipsComponent, "ks-chips", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "isRounded": { "alias": "isRounded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "ksValueChange": "ksValueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsFabAction` / `KsFabPosition` exported by
+ * `core/src/components/Buttons/fab/fab.tsx`. Duplicated locally — see the
+ * note in `button-group/button-group.ts` for why.
+ */
+interface KsFabAction {
+    key: string;
+    icon: string;
+    label?: string;
+    variant?: KsBaseVariant;
+}
+type KsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/** DOM shape of the real `<ks-fab>` custom element, typed for the wrapper. */
+type KsFabElement = HTMLElement & {
+    icon: string;
+    label: string;
+    variant: KsBaseVariant;
+    size: KsBaseSize;
+    actions: KsFabAction[];
+    disabled: boolean;
+    position: KsFabPosition;
+    appendToParent: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-fab>` Stencil custom element.
+ *
+ * `ksClick` is renamed away from the native `clicked` event name for the
+ * same double-fire reason documented in `button/button.ts` and
+ * `button-group/button-group.ts`. `template: ''` — no `<slot>` in the
+ * wrapped Stencil render.
+ */
+declare class KsFabComponent {
+    private readonly el;
+    /** Icon for the main FAB button */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Accessible label / tooltip */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Variant */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Speed-dial actions shown on expand */
+    readonly actions: _angular_core.InputSignal<KsFabAction[]>;
+    /** Disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Corner to anchor the FAB inside its nearest positioned container */
+    readonly position: _angular_core.InputSignal<KsFabPosition>;
+    /** When true (default), positions `absolute` inside the nearest positioned ancestor; when false, `fixed` to the viewport */
+    readonly appendToParent: _angular_core.InputSignal<boolean>;
+    /** Emits `'main'` for the main button, or a speed-dial action's `key`. From the native `clicked` event. */
+    readonly ksClick: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsFabElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsFabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsFabComponent, "ks-fab", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "appendToParent": { "alias": "appendToParent"; "required": false; "isSignal": true; }; }, { "ksClick": "ksClick"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsSplitButtonItem` exported by
+ * `core/src/components/Buttons/split-button/split-button.tsx`. Duplicated
+ * locally — see the note in `button-group/button-group.ts` for why.
+ */
+interface KsSplitButtonItem {
+    key: string;
+    label?: string;
+    /** Icon class string (e.g. ks-icon-pencil) */
+    icon?: string;
+    disabled?: boolean;
+    /** Renders the item in the danger colour */
+    destructive?: boolean;
+    /** Renders a divider line instead of an item */
+    separator?: boolean;
+}
+/** DOM shape of the real `<ks-split-button>` custom element, typed for the wrapper. */
+type KsSplitButtonElement = HTMLElement & {
+    label: string;
+    icon: string;
+    variant: KsVariant;
+    size: KsBaseSize;
+    disabled: boolean;
+    items: KsSplitButtonItem[];
+};
+/**
+ * Angular wrapper around the `<ks-split-button>` Stencil custom element.
+ *
+ * Outputs are prefixed with `ks` (`ksClick`, `ksItemSelected`) instead of
+ * reusing the native event names `clicked` / `itemSelected` — see
+ * `button/button.ts` for why a same-named output would fire twice.
+ * `template: ''` — the wrapped Stencil `render()` has no `<slot>`.
+ *
+ * @example
+ * ```html
+ * <ks-split-button
+ *   label="Save"
+ *   [items]="items"
+ *   (ksClick)="save()"
+ *   (ksItemSelected)="onSelect($event)"
+ * ></ks-split-button>
+ * ```
+ */
+declare class KsSplitButtonComponent {
+    private readonly el;
+    /** Main button label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Main button icon class */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Visual style variant */
+    readonly variant: _angular_core.InputSignal<KsVariant>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Disables both buttons */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Menu entries */
+    readonly items: _angular_core.InputSignal<KsSplitButtonItem[]>;
+    /** Emits the `MouseEvent` when the main button is clicked. From the native `clicked` event. */
+    readonly ksClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Emits the selected item's `key`. From the native `itemSelected` event. */
+    readonly ksItemSelected: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsSplitButtonElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsSplitButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsSplitButtonComponent, "ks-split-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "ksClick": "ksClick"; "ksItemSelected": "ksItemSelected"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-datepicker>` custom element, typed for the wrapper. */
+type KsDatepickerElement = HTMLElement & {
+    label: string;
+    placeholder: string;
+    minDate: Date | null;
+    maxDate: Date | null;
+    disabled: boolean;
+    selectedDate: Date | null;
+    writeValue(val: Date | null): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-datepicker>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName` and it works through DI (`writeValue` /
+ * `registerOnChange`), with no template event-name collision to worry
+ * about. See `chips/chips.ts` for the full rationale (same pattern, same
+ * reason the native `selectedDateChange` event can't be reused verbatim as
+ * an Angular output name).
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[selectedDate]="d" (ksSelectedDateChange)="d = $event"`.
+ *
+ * `template: ''` — the projected panel content in the Stencil render is
+ * internal (calendar grid projected into the shared `<ks-overlay-field>`
+ * default slot); there is no slot exposed on `<ks-datepicker>` itself for
+ * a consumer to project into.
+ */
+declare class KsDatepickerComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder text */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Min selectable date */
+    readonly minDate: _angular_core.InputSignal<Date>;
+    /** Max selectable date */
+    readonly maxDate: _angular_core.InputSignal<Date>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    readonly selectedDate: _angular_core.InputSignal<Date>;
+    /** Emits the newly-picked date. From the native `selectedDateChange` event. */
+    readonly ksSelectedDateChange: _angular_core.OutputEmitterRef<Date>;
+    constructor(ref: ElementRef<KsDatepickerElement>);
+    writeValue(value: Date | null): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsDatepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsDatepickerComponent, "ks-datepicker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectedDate": { "alias": "selectedDate"; "required": false; "isSignal": true; }; }, { "ksSelectedDateChange": "ksSelectedDateChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsDateRange` / `KsPresetRange` exported by
+ * `core/src/components/Calendars/daterange/daterange.types.ts`. Duplicated
+ * locally — see the note in `button-group/button-group.ts` for why.
+ */
+interface KsDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+interface KsPresetRange {
+    label: string;
+    range: () => KsDateRange;
+}
+/** DOM shape of the real `<ks-daterange>` custom element, typed for the wrapper. */
+type KsDaterangeElement = HTMLElement & {
+    label: string;
+    placeholder: string;
+    minDate: Date | null;
+    maxDate: Date | null;
+    presets: KsPresetRange[];
+    showPresets: boolean;
+    disabled: boolean;
+    range: KsDateRange;
+    writeValue(val: KsDateRange | null): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-daterange>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `chips/chips.ts` for the full rationale (the
+ * native `rangeChange` event can't be reused verbatim as an Angular output
+ * name without a double-fire risk).
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[range]="r" (ksRangeChange)="r = $event"`.
+ *
+ * `template: ''` — no slot is exposed on `<ks-daterange>` itself.
+ */
+declare class KsDaterangeComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly minDate: _angular_core.InputSignal<Date>;
+    readonly maxDate: _angular_core.InputSignal<Date>;
+    readonly presets: _angular_core.InputSignal<KsPresetRange[]>;
+    readonly showPresets: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    readonly range: _angular_core.InputSignal<KsDateRange>;
+    /** Emits the newly-picked range. From the native `rangeChange` event. */
+    readonly ksRangeChange: _angular_core.OutputEmitterRef<KsDateRange>;
+    constructor(ref: ElementRef<KsDaterangeElement>);
+    writeValue(value: KsDateRange | null): void;
+    registerOnChange(fn: (value: KsDateRange) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsDaterangeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsDaterangeComponent, "ks-daterange", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "showPresets": { "alias": "showPresets"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; }, { "ksRangeChange": "ksRangeChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsTimeValue` exported by
+ * `core/src/components/Calendars/timepicker/timepicker.tsx`. Duplicated
+ * locally — see the note in `button-group/button-group.ts` for why.
+ */
+interface KsTimeValue {
+    hours: number;
+    minutes: number;
+    seconds?: number;
+    period?: 'AM' | 'PM';
+}
+/** DOM shape of the real `<ks-timepicker>` custom element, typed for the wrapper. */
+type KsTimepickerElement = HTMLElement & {
+    label: string;
+    placeholder: string;
+    use12Hour: boolean;
+    showSeconds: boolean;
+    disabled: boolean;
+    error: string;
+    value: KsTimeValue | null;
+    writeValue(val: KsTimeValue | null): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-timepicker>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `chips/chips.ts` for the full rationale (the
+ * native `valueChange` event can't be reused verbatim as an Angular output
+ * name without a double-fire risk).
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="t" (ksValueChange)="t = $event"`.
+ *
+ * `template: ''` — no slot is exposed on `<ks-timepicker>` itself.
+ */
+declare class KsTimepickerComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Use 12-hour clock (AM/PM) */
+    readonly use12Hour: _angular_core.InputSignal<boolean>;
+    /** Show seconds */
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    /** Disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Error message */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    readonly value: _angular_core.ModelSignal<KsTimeValue>;
+    /** Emits the confirmed time. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<KsTimeValue>;
+    constructor(ref: ElementRef<KsTimepickerElement>);
+    writeValue(value: KsTimeValue | null): void;
+    registerOnChange(fn: (value: KsTimeValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsTimepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsTimepickerComponent, "ks-timepicker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "use12Hour": { "alias": "use12Hour"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "ksValueChange": "ksValueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsDropdownOption` exported by
+ * `core/src/components/Dropdowns/dropdown/dropdown.tsx`. Duplicated
+ * locally — see the note in `button-group/button-group.ts` for why.
+ */
+interface KsDropdownOption {
+    value: string | number;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type KsDropdownValue = (string | number)[] | string | number;
+/** DOM shape of the real `<ks-dropdown>` custom element, typed for the wrapper. */
+type KsDropdownElement = HTMLElement & {
+    options: KsDropdownOption[];
+    placeholder: string;
+    multi: boolean;
+    searchable: boolean;
+    label: string;
+    disabled: boolean;
+    selectedValues: (string | number)[];
+    writeValue(val: (string | number) | (string | number)[] | null): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-dropdown>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `chips/chips.ts` for the full rationale (the
+ * native `selectedValuesChange` event can't be reused verbatim as an
+ * Angular output name without a double-fire risk).
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[selectedValues]="v" (ksSelectedValuesChange)="v = $event"`.
+ *
+ * `template: ''` — the option list / search box in the Stencil render are
+ * projected into the shared, internal `<ks-overlay-field>` slot; there is
+ * no slot exposed on `<ks-dropdown>` itself for a consumer to project into.
+ */
+declare class KsDropdownComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Full list of options */
+    readonly options: _angular_core.InputSignal<KsDropdownOption[]>;
+    /** Placeholder text shown when nothing is selected */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Allow selecting multiple options */
+    readonly multi: _angular_core.InputSignal<boolean>;
+    /** Show a search box inside the dropdown */
+    readonly searchable: _angular_core.InputSignal<boolean>;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled selected value(s) for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    readonly selectedValues: _angular_core.InputSignal<(string | number)[]>;
+    /** Emits the new selection — an array when `multi`, otherwise a single value. From the native `selectedValuesChange` event. */
+    readonly ksSelectedValuesChange: _angular_core.OutputEmitterRef<KsDropdownValue>;
+    constructor(ref: ElementRef<KsDropdownElement>);
+    writeValue(value: KsDropdownValue | null): void;
+    registerOnChange(fn: (value: KsDropdownValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsDropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsDropdownComponent, "ks-dropdown", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; }, { "ksSelectedValuesChange": "ksSelectedValuesChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsListBoxOption` exported by
+ * `core/src/components/Dropdowns/listbox/listbox.tsx`. Duplicated locally
+ * — see the note in `button-group/button-group.ts` for why.
+ */
+interface KsListBoxOption {
+    value: string | number;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    /** Optional group key — used when `groupBy` is enabled */
+    group?: string;
+}
+type KsListBoxValue = (string | number)[] | string | number;
+/** DOM shape of the real `<ks-listbox>` custom element, typed for the wrapper. */
+type KsListBoxElement = HTMLElement & {
+    options: KsListBoxOption[];
+    multi: boolean;
+    searchable: boolean;
+    disabled: boolean;
+    selected: (string | number)[];
+    groupBy: boolean;
+    writeValue(val: (string | number) | (string | number)[] | null): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-listbox>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `chips/chips.ts` for the full rationale (the
+ * native `selectedChange` event can't be reused verbatim as an Angular
+ * output name without a double-fire risk).
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[selected]="v" (ksSelectedChange)="v = $event"`.
+ *
+ * `template: ''` — no slot is exposed on `<ks-listbox>` itself.
+ */
+declare class KsListBoxComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Options list */
+    readonly options: _angular_core.InputSignal<KsListBoxOption[]>;
+    /** Allow multi-select */
+    readonly multi: _angular_core.InputSignal<boolean>;
+    /** Show search box */
+    readonly searchable: _angular_core.InputSignal<boolean>;
+    /** Disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Enable group headers using the `group` field on each option */
+    readonly groupBy: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled selected value(s) for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    readonly selected: _angular_core.InputSignal<(string | number)[]>;
+    /** Emits the new selection — an array when `multi`, otherwise a single value. From the native `selectedChange` event. */
+    readonly ksSelectedChange: _angular_core.OutputEmitterRef<KsListBoxValue>;
+    constructor(ref: ElementRef<KsListBoxElement>);
+    writeValue(value: KsListBoxValue | null): void;
+    registerOnChange(fn: (value: KsListBoxValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsListBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsListBoxComponent, "ks-listbox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "ksSelectedChange": "ksSelectedChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsCheckboxOption` exported by
+ * `core/src/components/Inputs/checkbox/checkbox.tsx`. Duplicated locally
+ * — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsCheckboxOption {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    checked?: boolean;
+}
+/** DOM shape of the real `<ks-checkbox>` custom element, typed for the wrapper. */
+type KsCheckboxElement = HTMLElement & {
+    label: string;
+    options: KsCheckboxOption[];
+    disabled: boolean;
+    checked: boolean;
+    selected: string[];
+    writeValue(val: unknown): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-checkbox>` Stencil custom element.
+ *
+ * Supports two modes, mirroring the Stencil source:
+ * - **Single** mode (no `options`): two-way bind `checked` (boolean).
+ * - **Group** mode (`options` set): two-way bind `selected` (string[]).
+ *
+ * Two-way binding for either mode is via `ControlValueAccessor` — use
+ * `[(ngModel)]`/`formControlName` and it works for whichever mode is
+ * active (see `Buttons/chips/chips.ts` for the full rationale on why CVA
+ * is used instead of reusing a native event name as an Angular output).
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[checked]="c" (ksCheckedChange)="c = $event"` or
+ * `[selected]="s" (ksSelectedChange)="s = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsCheckboxComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Label shown next to the control (single mode) */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Optional set of multiple options (multi-select / group mode) */
+    readonly options: _angular_core.InputSignal<KsCheckboxOption[]>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Single mode: initial/controlled checked value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly checked: _angular_core.InputSignal<boolean>;
+    /** Group mode: initial/controlled selected values. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly selected: _angular_core.InputSignal<string[]>;
+    /** Emits whenever `checked` changes (single mode). From the native `checkedChange` event. */
+    readonly ksCheckedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Emits whenever `selected` changes (group mode). From the native `selectedChange` event. */
+    readonly ksSelectedChange: _angular_core.OutputEmitterRef<string[]>;
+    constructor(ref: ElementRef<KsCheckboxElement>);
+    /** `ControlValueAccessor` — called by `ngModel`/`formControl` to push a value in (either mode). */
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsCheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsCheckboxComponent, "ks-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "ksCheckedChange": "ksCheckedChange"; "ksSelectedChange": "ksSelectedChange"; }, never, never, true, never>;
+}
+
+/** Mirrors the inline union used by `core/src/components/Inputs/colour-picker/colour-picker.tsx`. */
+type KsColourPickerVariant = 'input' | 'swatch';
+/** DOM shape of the real `<ks-colour-picker>` custom element, typed for the wrapper. */
+type KsColourPickerElement = HTMLElement & {
+    label: string;
+    variant: KsColourPickerVariant;
+    swatches: string[];
+    disabled: boolean;
+    value: string;
+    writeValue(val: string): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-colour-picker>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale
+ * (the native `valueChange` event can't be reused verbatim as an Angular
+ * output name without a double-fire risk).
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="hex" (ksValueChange)="hex = $event"`.
+ *
+ * `template: ''` — the panel is rendered into the internal
+ * `<ks-overlay-field>`; there is no slot on `<ks-colour-picker>` itself.
+ */
+declare class KsColourPickerComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Picker UI variant */
+    readonly variant: _angular_core.InputSignal<KsColourPickerVariant>;
+    /** Preset swatch colours */
+    readonly swatches: _angular_core.InputSignal<string[]>;
+    /** Disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled hex value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Emits the newly-picked hex colour. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsColourPickerElement>);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsColourPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsColourPickerComponent, "ks-colour-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "swatches": { "alias": "swatches"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "ksValueChange": "ksValueChange"; }, never, never, true, never>;
+}
+
+/** Mirrors `KsInputType` exported by `core/src/components/Inputs/input/input.tsx`. */
+type KsInputType = 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+/** DOM shape of the real `<ks-input>` custom element, typed for the wrapper. */
+type KsInputElement = HTMLElement & {
+    type: KsInputType;
+    placeholder: string;
+    label: string;
+    hint: string;
+    error: string;
+    prefixIcon: string;
+    suffixIcon: string;
+    size: KsSize;
+    value: string;
+    disabled: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-input>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. `<ks-input>` has no `@Method() writeValue()` of its
+ * own (unlike `chips`/`dropdown`/…), so this wrapper's `writeValue` sets
+ * `el.value` directly instead of delegating to a Stencil method.
+ *
+ * The native `ksBlur` event is already prefixed `ks` by the Stencil
+ * author, so re-using that exact name here as the Angular output would
+ * still hit the double-fire collision described in `Buttons/button.ts`
+ * (Ivy's `tNode.outputs` match is purely by literal name, `ks`-prefix or
+ * not) — hence `ksBlurred` (distinct spelling) instead.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="v" (ksValueChange)="v = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsInputComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** HTML input type */
+    readonly type: _angular_core.InputSignal<KsInputType>;
+    /** Placeholder text */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Helper / hint text shown below the input */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Error message — also triggers the error state */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Leading icon class (e.g. Material Symbol name) */
+    readonly prefixIcon: _angular_core.InputSignal<string>;
+    /** Trailing icon class */
+    readonly suffixIcon: _angular_core.InputSignal<string>;
+    /** Size variant */
+    readonly size: _angular_core.InputSignal<KsSize>;
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Emits the newly-typed value. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<string>;
+    /** Emitted on native blur (mirrors Angular's onTouched callback). From the native `ksBlur` event. */
+    readonly ksBlurred: _angular_core.OutputEmitterRef<void>;
+    constructor(ref: ElementRef<KsInputElement>);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsInputComponent, "ks-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "ksValueChange": "ksValueChange"; "ksBlurred": "ksBlurred"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-otp-input>` custom element, typed for the wrapper. */
+type KsOtpInputElement = HTMLElement & {
+    length: number;
+    inputType: 'number' | 'text';
+    label: string;
+    error: string;
+    masked: boolean;
+    disabled: boolean;
+    value: string;
+    writeValue(val: string): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-otp-input>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="v" (ksValueChange)="v = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsOtpInputComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Number of digits */
+    readonly length: _angular_core.InputSignal<number>;
+    /** Input type: 'number' | 'text' */
+    readonly inputType: _angular_core.InputSignal<"number" | "text">;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Error message */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Mask the input (like a password) */
+    readonly masked: _angular_core.InputSignal<boolean>;
+    /** Disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Emits whenever `value` changes. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<string>;
+    /** Emits the full OTP string when all digits are filled. From the native `completed` event. */
+    readonly ksCompleted: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsOtpInputElement>);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsOtpInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsOtpInputComponent, "ks-otp-input", never, { "length": { "alias": "length"; "required": false; "isSignal": true; }; "inputType": { "alias": "inputType"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "ksValueChange": "ksValueChange"; "ksCompleted": "ksCompleted"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsRadioOption` exported by
+ * `core/src/components/Inputs/radio/radio.tsx`. Duplicated locally — see
+ * the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsRadioOption {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+}
+/** DOM shape of the real `<ks-radio>` custom element, typed for the wrapper. */
+type KsRadioElement = HTMLElement & {
+    options: KsRadioOption[];
+    label: string;
+    name: string;
+    variant: KsBaseVariant;
+    size: KsSize;
+    disabled: boolean;
+    value: string;
+    writeValue(val: string): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-radio>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="v" (ksValueChange)="v = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsRadioComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** List of options — the component renders a radio group */
+    readonly options: _angular_core.InputSignal<KsRadioOption[]>;
+    /** Label shown above the group */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Name attribute shared across all radio inputs in the group */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Colour variant applied to the selected indicator */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Size variant — affects label text size */
+    readonly size: _angular_core.InputSignal<KsSize>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled selected value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Emits the selected value on every change. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsRadioElement>);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsRadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsRadioComponent, "ks-radio", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "ksValueChange": "ksValueChange"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-rating>` custom element, typed for the wrapper. */
+type KsRatingElement = HTMLElement & {
+    max: number;
+    size: KsBaseSize;
+    readOnly: boolean;
+    showLabel: boolean;
+    label: string;
+    disabled: boolean;
+    value: number;
+    writeValue(val: number): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-rating>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="v" (ksValueChange)="v = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsRatingComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Total number of stars */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Read-only / non-interactive */
+    readonly readOnly: _angular_core.InputSignal<boolean>;
+    /** Show numeric label */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Emits the newly-picked rating. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<number>;
+    constructor(ref: ElementRef<KsRatingElement>);
+    writeValue(value: number): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsRatingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsRatingComponent, "ks-rating", never, { "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "ksValueChange": "ksValueChange"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-slider>` custom element, typed for the wrapper. */
+type KsSliderElement = HTMLElement & {
+    min: number;
+    max: number;
+    step: number;
+    showTooltip: boolean;
+    showLabels: boolean;
+    label: string;
+    disabled: boolean;
+    value: number;
+    writeValue(val: number): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-slider>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale.
+ * The native `ksBlur` event (already `ks`-prefixed by the Stencil author)
+ * is re-exposed as `ksBlurred` — see `Inputs/input/input.ts` for why the
+ * literal name can't be reused.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="v" (ksValueChange)="v = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsSliderComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Minimum value */
+    readonly min: _angular_core.InputSignal<number>;
+    /** Maximum value */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Step increment */
+    readonly step: _angular_core.InputSignal<number>;
+    /** Show value tooltip */
+    readonly showTooltip: _angular_core.InputSignal<boolean>;
+    /** Show min/max labels */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Emits the newly-picked value. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<number>;
+    /** Emitted on native blur. From the native `ksBlur` event. */
+    readonly ksBlurred: _angular_core.OutputEmitterRef<void>;
+    constructor(ref: ElementRef<KsSliderElement>);
+    writeValue(value: number): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsSliderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsSliderComponent, "ks-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showTooltip": { "alias": "showTooltip"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "ksValueChange": "ksValueChange"; "ksBlurred": "ksBlurred"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-switch>` custom element, typed for the wrapper. */
+type KsSwitchElement = HTMLElement & {
+    label: string;
+    variant: KsBaseVariant;
+    disabled: boolean;
+    checked: boolean;
+    labelPosition: 'left' | 'right';
+    formDisabled: boolean;
+    setDisabledState(isDisabled: boolean): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-switch>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
+ * `formControlName`. Unlike most other form-control wrappers here,
+ * `<ks-switch>` has no `@Method() writeValue()`, so `writeValue` below
+ * sets `el.checked` directly; it DOES expose a real
+ * `@Method() setDisabledState()` (mirroring CVA exactly), which
+ * `setDisabledState` below delegates to instead of setting a plain prop.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[checked]="c" (ksCheckedChange)="c = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsSwitchComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Label text */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Colour variant */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Disabled */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Initial/controlled checked value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly checked: _angular_core.InputSignal<boolean>;
+    /** Label position relative to the switch track */
+    readonly labelPosition: _angular_core.InputSignal<"left" | "right">;
+    /** Emits whenever `checked` changes. From the native `checkedChange` event. */
+    readonly ksCheckedChange: _angular_core.OutputEmitterRef<boolean>;
+    constructor(ref: ElementRef<KsSwitchElement>);
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    /** Delegates to `<ks-switch>`'s own `@Method() setDisabledState()`. */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsSwitchComponent, "ks-switch", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, { "ksCheckedChange": "ksCheckedChange"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-textarea>` custom element, typed for the wrapper. */
+type KsTextareaElement = HTMLElement & {
+    label: string;
+    placeholder: string;
+    rows: number;
+    maxLength: number;
+    showCounter: boolean;
+    autoResize: boolean;
+    disabled: boolean;
+    error: string;
+    hint: string;
+    value: string;
+};
+/**
+ * Angular wrapper around the `<ks-textarea>` Stencil custom element.
+ *
+ * Two-way binding is via `ControlValueAccessor` (see `Inputs/input/input.ts`
+ * for the equivalent no-`writeValue()`-method pattern this follows —
+ * `writeValue` here sets `el.value` directly). The native `ksBlur` event
+ * is re-exposed as `ksBlurred` for the same reason.
+ *
+ * For plain (non-forms) two-way use, bind explicitly instead:
+ * `[value]="v" (ksValueChange)="v = $event"`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsTextareaComponent implements ControlValueAccessor {
+    private readonly el;
+    private onChange;
+    private onTouched;
+    /** Textarea label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder text */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Number of visible rows */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Maximum character count */
+    readonly maxLength: _angular_core.InputSignal<number>;
+    /** Show character counter */
+    readonly showCounter: _angular_core.InputSignal<boolean>;
+    /** Auto-resize based on content */
+    readonly autoResize: _angular_core.InputSignal<boolean>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Error state */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Helper/error text */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Emits the newly-typed value. From the native `valueChange` event. */
+    readonly ksValueChange: _angular_core.OutputEmitterRef<string>;
+    /** Emitted on native blur. From the native `ksBlur` event. */
+    readonly ksBlurred: _angular_core.OutputEmitterRef<void>;
+    constructor(ref: ElementRef<KsTextareaElement>);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsTextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsTextareaComponent, "ks-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCounter": { "alias": "showCounter"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "ksValueChange": "ksValueChange"; "ksBlurred": "ksBlurred"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-theme-switch>` custom element, typed for the wrapper. */
+type KsThemeSwitchElement = HTMLElement & {
+    includeSystem: boolean;
+    includePalette: boolean;
+    onlyIcon: boolean;
+    palette: Palette;
+    mode: ThemeMode;
+};
+/**
+ * Angular wrapper around the `<ks-theme-switch>` Stencil custom element.
+ *
+ * Purely presentational — it drives the shared `themeService` singleton
+ * (see `core/src/utils/ks-theme.util.ts`) directly and dispatches no
+ * events of its own, so this wrapper has plain inputs only, no outputs
+ * and no `ControlValueAccessor`.
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsThemeSwitchComponent {
+    private readonly el;
+    /** When true the mode-toggle shows three options: System | Light | Dark. */
+    readonly includeSystem: _angular_core.InputSignal<boolean>;
+    /** When true the colour-palette switcher is shown. */
+    readonly includePalette: _angular_core.InputSignal<boolean>;
+    /** When true only icons are shown in the mode-toggle switch. */
+    readonly onlyIcon: _angular_core.InputSignal<boolean>;
+    /** The palette that should be active on init. */
+    readonly palette: _angular_core.InputSignal<Palette>;
+    /** The mode that should be active on init. */
+    readonly mode: _angular_core.InputSignal<ThemeMode>;
+    constructor(ref: ElementRef<KsThemeSwitchElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsThemeSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsThemeSwitchComponent, "ks-theme-switch", never, { "includeSystem": { "alias": "includeSystem"; "required": false; "isSignal": true; }; "includePalette": { "alias": "includePalette"; "required": false; "isSignal": true; }; "onlyIcon": { "alias": "onlyIcon"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsUploadedFile` exported by
+ * `core/src/components/Inputs/uploader/uploader.tsx`. Duplicated locally
+ * — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsUploadedFile {
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    /** Data-URL preview (images only, when previewImages is true) */
+    preview?: string;
+}
+/** DOM shape of the real `<ks-uploader>` custom element, typed for the wrapper. */
+type KsUploaderElement = HTMLElement & {
+    accept: string;
+    multiple: boolean;
+    maxSize: number;
+    previewImages: boolean;
+    label: string;
+    disabled: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-uploader>` Stencil custom element.
+ *
+ * No two-way "value" here — the Stencil source has no `writeValue()`
+ * method and no single controlled prop, just a plain `filesChange`/
+ * `filesRejected` event pair, so no `ControlValueAccessor` is implemented
+ * (unlike the other `Inputs/*` wrappers).
+ *
+ * `template: ''` — no `<slot>` in the wrapped Stencil render.
+ */
+declare class KsUploaderComponent {
+    private readonly el;
+    /** Accepted MIME types / extensions, e.g. "image/*,.pdf" */
+    readonly accept: _angular_core.InputSignal<string>;
+    /** Allow selecting multiple files */
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    /** Maximum file size in bytes (0 = no limit) */
+    readonly maxSize: _angular_core.InputSignal<number>;
+    /** Show image thumbnails for image/* files */
+    readonly previewImages: _angular_core.InputSignal<boolean>;
+    /** Custom drop-zone label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disabled state */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Emits the accepted files whenever the selection changes. From the native `filesChange` event. */
+    readonly ksFilesChange: _angular_core.OutputEmitterRef<KsUploadedFile[]>;
+    /** Emits rejected files (wrong type / over size limit). From the native `filesRejected` event. */
+    readonly ksFilesRejected: _angular_core.OutputEmitterRef<File[]>;
+    constructor(ref: ElementRef<KsUploaderElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsUploaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsUploaderComponent, "ks-uploader", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "previewImages": { "alias": "previewImages"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "ksFilesChange": "ksFilesChange"; "ksFilesRejected": "ksFilesRejected"; }, never, never, true, never>;
+}
+
+/**
+ * DOM shape of the real `<ks-rolling-number>` custom element, typed for the wrapper.
+ * `prefixText` / `suffixText` / `animated` are used on the element because
+ * `prefix` and `animate` collide with native `Element` members.
+ */
+type KsRollingNumberElement = HTMLElement & {
+    value: number | string | bigint;
+    prefixText: string;
+    suffixText: string;
+    startValue: number | string | bigint;
+    decimals: number | null;
+    separator: string;
+    decimalSeparator: string;
+    grouping: KsRollingGrouping;
+    duration: number;
+    delay: number;
+    easing: string;
+    stagger: number | null;
+    spins: number;
+    direction: KsRollingDirection;
+    design: KsRollingDesign;
+    size: KsSize;
+    tone: KsTextTone;
+    animated: boolean;
+    label: string;
+};
+/**
+ * Angular wrapper around the `<ks-rolling-number>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>`, plain inputs only.
+ *
+ * @example
+ * ```html
+ * <ks-rolling-number [value]="total()" prefix="$" [decimals]="2" design="finance" />
+ * ```
+ */
+declare class KsRollingNumberComponent {
+    private readonly el;
+    /** Target value. Use a string or bigint for numbers beyond 2^53 */
+    readonly value: _angular_core.InputSignal<string | number | bigint>;
+    /** Shown before the number ($, €, ₹ …) */
+    readonly prefix: _angular_core.InputSignal<string>;
+    /** Shown after the number (K, M, %, " users" …). Leading spaces are preserved */
+    readonly suffix: _angular_core.InputSignal<string>;
+    /** Value the reels roll from on first render */
+    readonly startValue: _angular_core.InputSignal<string | number | bigint>;
+    /** Fixed decimal places. Leave unset to infer from the value */
+    readonly decimals: _angular_core.InputSignal<number>;
+    /** Thousands separator. Empty string disables grouping */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Decimal separator */
+    readonly decimalSeparator: _angular_core.InputSignal<string>;
+    /** Digit grouping style (`indian` gives 12,34,567) */
+    readonly grouping: _angular_core.InputSignal<KsRollingGrouping>;
+    /** Total roll time in ms, including the cascade between digits */
+    readonly duration: _angular_core.InputSignal<number>;
+    /** Delay before rolling starts, in ms */
+    readonly delay: _angular_core.InputSignal<number>;
+    /** Any CSS easing. The default decelerates gently into place */
+    readonly easing: _angular_core.InputSignal<string>;
+    /** Gap in ms between neighbouring digits stopping. Unset = automatic */
+    readonly stagger: _angular_core.InputSignal<number>;
+    /** Extra full revolutions each reel makes on the first roll */
+    readonly spins: _angular_core.InputSignal<number>;
+    /** `auto` rolls up when the value grows and down when it shrinks */
+    readonly direction: _angular_core.InputSignal<KsRollingDirection>;
+    /** Visual style */
+    readonly design: _angular_core.InputSignal<KsRollingDesign>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsSize>;
+    /** Text colour */
+    readonly tone: _angular_core.InputSignal<KsTextTone>;
+    /** Set false to skip animation entirely */
+    readonly animate: _angular_core.InputSignal<boolean>;
+    /** Accessible name. Defaults to the formatted value */
+    readonly label: _angular_core.InputSignal<string>;
+    constructor(ref: ElementRef<KsRollingNumberElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsRollingNumberComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsRollingNumberComponent, "ks-rolling-number", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "startValue": { "alias": "startValue"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "decimalSeparator": { "alias": "decimalSeparator"; "required": false; "isSignal": true; }; "grouping": { "alias": "grouping"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "easing": { "alias": "easing"; "required": false; "isSignal": true; }; "stagger": { "alias": "stagger"; "required": false; "isSignal": true; }; "spins": { "alias": "spins"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "design": { "alias": "design"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-avatar>` custom element, typed for the wrapper. */
+type KsAvatarElement = HTMLElement & {
+    src: string;
+    alt: string;
+    initials: string;
+    icon: string;
+    size: KsSize;
+    variant: KsBaseVariant;
+    square: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-avatar>` Stencil custom element.
+ *
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only (same shape as `Inputs/theme-switch/theme-switch.ts`).
+ */
+declare class KsAvatarComponent {
+    private readonly el;
+    /** Image URL — takes priority over initials */
+    readonly src: _angular_core.InputSignal<string>;
+    /** Alt text for the image */
+    readonly alt: _angular_core.InputSignal<string>;
+    /** Initials shown when no image (e.g. "KS") */
+    readonly initials: _angular_core.InputSignal<string>;
+    /** Icon class shown when neither src nor initials */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsSize>;
+    /** Colour variant — used when showing initials or icon */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Circular (default) or rounded-square */
+    readonly square: _angular_core.InputSignal<boolean>;
+    constructor(ref: ElementRef<KsAvatarElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsAvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsAvatarComponent, "ks-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Mirrors the inline union used by `core/src/components/Layout/card/card.tsx`. */
+type KsCardVariant = 'default' | 'outlined' | 'elevated' | 'flat';
+/** DOM shape of the real `<ks-card>` custom element, typed for the wrapper. */
+type KsCardElement = HTMLElement & {
+    label: string;
+    cardTitle: string;
+    subtitle: string;
+    imageUrl: string;
+    imageAlt: string;
+    iconClass: string;
+    variant: KsCardVariant;
+};
+/**
+ * Angular wrapper around the `<ks-card>` Stencil custom element.
+ *
+ * ## Slots
+ * Unlike the Buttons/Calendars/Dropdowns wrappers, `<ks-card>` renders
+ * real, consumer-facing `<slot name="header" />`, `<slot />` (default) and
+ * `<slot name="footer" />` in its scoped (non-shadow) Stencil `render()`.
+ * `template: '<ng-content></ng-content>'` (a single unfiltered pass-through,
+ * not per-slot `<ng-content select="...">`) projects ALL of this Angular
+ * component's content as real light-DOM children of the `<ks-card>` host
+ * node; Stencil's own scoped-slot relocation logic (see `shadow: false,
+ * scoped: true` on the Stencil class) then places each child into the
+ * right native `<slot>` based on that child's own `slot="header"` /
+ * `slot="footer"` attribute — same as plain HTML, nothing Angular-specific
+ * needed beyond forwarding the projected content through untouched.
+ * Usage: `<ks-card><ks-header slot="header">…</ks-header>Body<ks-footer slot="footer">…</ks-footer></ks-card>`.
+ */
+declare class KsCardComponent {
+    private readonly el;
+    /** Card title */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Card title (Angular input name was `title`; aliased to avoid clashing with the native `title` attribute/tooltip). */
+    readonly cardTitle: _angular_core.InputSignal<string>;
+    /** Subtitle / subheading */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** URL for header image */
+    readonly imageUrl: _angular_core.InputSignal<string>;
+    /** Alt text for image */
+    readonly imageAlt: _angular_core.InputSignal<string>;
+    /** SVG icon class */
+    readonly iconClass: _angular_core.InputSignal<string>;
+    /** Card visual variant */
+    readonly variant: _angular_core.InputSignal<KsCardVariant>;
+    /** Emits when clicked (only when clickable). From the native `cardClick` event. */
+    readonly ksCardClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    constructor(ref: ElementRef<KsCardElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsCardComponent, "ks-card", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "cardTitle": { "alias": "cardTitle"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "iconClass": { "alias": "iconClass"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "ksCardClick": "ksCardClick"; }, never, ["*"], true, never>;
+}
+
+/** Mirrors the inline union used by `core/src/components/Layout/code-view/code-view.tsx`. */
+type KsCodeViewLanguage = 'html' | 'css' | 'typescript' | 'javascript' | 'json' | 'bash' | 'text';
+/**
+ * Mirrors `ActionButtonsConfig` exported by
+ * `core/src/components/Layout/code-view/code-view.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface ActionButtonsConfig {
+    expand?: boolean;
+    code?: boolean;
+}
+/** DOM shape of the real `<ks-code-view>` custom element, typed for the wrapper. */
+type KsCodeViewElement = HTMLElement & {
+    code: string;
+    language: KsCodeViewLanguage;
+    label: string;
+    maxHeight: string;
+    showHeader: boolean;
+    collapsed: boolean;
+    actionButtonConfig: ActionButtonsConfig;
+};
+/**
+ * Angular wrapper around the `<ks-code-view>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+declare class KsCodeViewComponent {
+    private readonly el;
+    /** The source code string to display */
+    readonly code: _angular_core.InputSignal<string>;
+    /** Language hint shown in the header badge */
+    readonly language: _angular_core.InputSignal<KsCodeViewLanguage>;
+    /** Optional title shown in the header */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Max visible height before scroll kicks in (CSS value, e.g. '20rem') */
+    readonly maxHeight: _angular_core.InputSignal<string>;
+    /** Show the header bar with language badge & copy button */
+    readonly showHeader: _angular_core.InputSignal<boolean>;
+    /** Whether the code block is currently collapsed */
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    /** Whether the code block is to show and hide buttons */
+    readonly actionButtonConfig: _angular_core.InputSignal<ActionButtonsConfig>;
+    constructor(ref: ElementRef<KsCodeViewElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsCodeViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsCodeViewComponent, "ks-code-view", never, { "code": { "alias": "code"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "actionButtonConfig": { "alias": "actionButtonConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Mirrors the inline union used by `core/src/components/Layout/dialog/dialog.tsx`. */
+type KsDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** DOM shape of the real `<ks-dialog>` custom element, typed for the wrapper. */
+type KsDialogElement = HTMLElement & {
+    open: boolean;
+    label: string;
+    hideClose: boolean;
+    persistent: boolean;
+    size: KsDialogSize;
+    target: string;
+};
+/**
+ * Angular wrapper around the `<ks-dialog>` Stencil custom element.
+ *
+ * `open` is a plain input, not `ControlValueAccessor` — a dialog's open
+ * state isn't form data. For the same reason described throughout this
+ * repo, the output can't be named `openChange` (it would collide with the
+ * native `openChange`-style close event — see below), so bind explicitly:
+ * `[open]="isOpen" (ksCloseDialog)="isOpen = false"`.
+ *
+ * ## Slots
+ * `<ks-dialog>` renders real, consumer-facing `<slot />` (default) and
+ * `<slot name="footer" />`. Same single unfiltered `<ng-content>`
+ * pass-through as `Layout/card/card.ts` — see that file's doc comment for
+ * the full explanation of how native `slot="footer"` attributes on
+ * projected children route into the right Stencil `<slot>`.
+ */
+declare class KsDialogComponent {
+    private readonly el;
+    /** Whether the dialog is open */
+    readonly open: _angular_core.InputSignal<boolean>;
+    /** Dialog title */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Hide the built-in close (✕) button */
+    readonly hideClose: _angular_core.InputSignal<boolean>;
+    /** Prevent closing by clicking the backdrop */
+    readonly persistent: _angular_core.InputSignal<boolean>;
+    /** Panel size */
+    readonly size: _angular_core.InputSignal<KsDialogSize>;
+    /** Target element id (without #), or '' to use `<body>`. When set, the overlay covers only that element and the dialog is centred inside it. */
+    readonly target: _angular_core.InputSignal<string>;
+    /** Emits when the dialog requests close. From the native `closeDialog` event. */
+    readonly ksCloseDialog: _angular_core.OutputEmitterRef<void>;
+    constructor(ref: ElementRef<KsDialogElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsDialogComponent, "ks-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "persistent": { "alias": "persistent"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "ksCloseDialog": "ksCloseDialog"; }, never, ["*"], true, never>;
+}
+
+/** DOM shape of the real `<ks-not-found>` custom element, typed for the wrapper. */
+type KsNotFoundElement = HTMLElement & {
+    buttonLabel: string;
+    homeHref: string;
+    countdown: number;
+    showActionButtons: boolean;
+    code: string;
+    message: string;
+    description: string;
+};
+/**
+ * Angular wrapper around the `<ks-not-found>` Stencil custom element.
+ *
+ * `<ks-not-found>` renders a real, consumer-facing default `<slot />`.
+ * Same single unfiltered `<ng-content>` pass-through as
+ * `Layout/card/card.ts` — see that file's doc comment for the full
+ * explanation of how projected content routes into the Stencil `<slot>`.
+ */
+declare class KsNotFoundComponent {
+    private readonly el;
+    /** Label shown on the redirect button (default: "Go to Home") */
+    readonly buttonLabel: _angular_core.InputSignal<string>;
+    /** href the button and auto-redirect navigate to (default: "./") */
+    readonly homeHref: _angular_core.InputSignal<string>;
+    /** Seconds before auto-redirect fires. Set to `0` to disable the countdown. */
+    readonly countdown: _angular_core.InputSignal<number>;
+    readonly showActionButtons: _angular_core.InputSignal<boolean>;
+    /** Custom heading (default: "404") */
+    readonly code: _angular_core.InputSignal<string>;
+    /** Custom sub-heading (default: "Page not found") */
+    readonly message: _angular_core.InputSignal<string>;
+    /** Custom description below the heading */
+    readonly description: _angular_core.InputSignal<string>;
+    /** Emitted just before the auto-redirect navigates away. From the native `redirecting` event. */
+    readonly ksRedirecting: _angular_core.OutputEmitterRef<void>;
+    constructor(ref: ElementRef<KsNotFoundElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsNotFoundComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsNotFoundComponent, "ks-not-found", never, { "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "homeHref": { "alias": "homeHref"; "required": false; "isSignal": true; }; "countdown": { "alias": "countdown"; "required": false; "isSignal": true; }; "showActionButtons": { "alias": "showActionButtons"; "required": false; "isSignal": true; }; "code": { "alias": "code"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, { "ksRedirecting": "ksRedirecting"; }, never, ["*"], true, never>;
+}
+
+type KsSidebarPosition = 'left' | 'right';
+type KsSidebarType = 'over' | 'push';
+/** DOM shape of the real `<ks-sidebar>` custom element, typed for the wrapper. */
+type KsSidebarElement = HTMLElement & {
+    position: KsSidebarPosition;
+    type: KsSidebarType;
+    open: boolean;
+    width: string;
+    target: string;
+    openPanel(): Promise<void>;
+    close(): Promise<void>;
+    toggle(): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-sidebar>` Stencil custom element.
+ *
+ * `open` is a plain input/output pair, not `ControlValueAccessor` — panel
+ * open state isn't form data. The native event is literally `openChange`,
+ * so (per the double-fire rule in `Buttons/button.ts`) the Angular output
+ * can't reuse that name; bind explicitly instead:
+ * `[open]="isOpen" (ksOpenChange)="isOpen = $event"`.
+ *
+ * `<ks-sidebar>`'s own `@Method()`s (`openPanel`/`close`/`toggle`) are
+ * exposed here as real passthrough methods — grab the component instance
+ * with `@ViewChild(KsSidebarComponent)` and call them directly.
+ *
+ * ## Slots
+ * Renders real `<slot name="header" />`, `<slot />` (default) and
+ * `<slot name="footer" />`. Same single unfiltered `<ng-content>`
+ * pass-through as `Layout/card/card.ts`.
+ */
+declare class KsSidebarComponent {
+    private readonly el;
+    /** Which side the panel appears on */
+    readonly position: _angular_core.InputSignal<KsSidebarPosition>;
+    /** Behaviour type */
+    readonly type: _angular_core.InputSignal<KsSidebarType>;
+    /** Initial/controlled open state. Bind explicitly: `[open]="isOpen" (ksOpenChange)="isOpen = $event"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Width of the sidebar panel */
+    readonly width: _angular_core.InputSignal<string>;
+    /** Target element id (without #) or '' to use the page. */
+    readonly target: _angular_core.InputSignal<string>;
+    /** Fires whenever `open` changes. From the native `openChange` event. */
+    readonly ksOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    constructor(ref: ElementRef<KsSidebarElement>);
+    /** Passthrough to `<ks-sidebar>`'s own `@Method() openPanel()`. */
+    openPanel(): Promise<void>;
+    /** Passthrough to `<ks-sidebar>`'s own `@Method() close()`. */
+    close(): Promise<void>;
+    /** Passthrough to `<ks-sidebar>`'s own `@Method() toggle()`. */
+    toggle(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsSidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsSidebarComponent, "ks-sidebar", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "ksOpenChange": "ksOpenChange"; }, never, ["*"], true, never>;
+}
+
+/** Mirrors the inline unions used by `core/src/components/Layout/table/table.tsx`. */
+type KsTableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+type KsTableSize = 'sm' | 'md' | 'lg';
+/** DOM shape of the real `<ks-table>` custom element, typed for the wrapper. */
+type KsTableElement = HTMLElement & {
+    data: Record<string, unknown>[];
+    columns: string[];
+    columnLabels: Record<string, string>;
+    variant: KsTableVariant;
+    size: KsTableSize;
+    caption: string;
+    scrollable: boolean;
+    hoverable: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-table>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+declare class KsTableComponent {
+    private readonly el;
+    /** Array of objects to render as table rows */
+    readonly data: _angular_core.InputSignal<Record<string, unknown>[]>;
+    /** Optional explicit column order; defaults to keys of the first row */
+    readonly columns: _angular_core.InputSignal<string[]>;
+    /** Optional custom column header labels: { key: 'Display Label' } */
+    readonly columnLabels: _angular_core.InputSignal<Record<string, string>>;
+    /** Visual variant */
+    readonly variant: _angular_core.InputSignal<KsTableVariant>;
+    /** Row size */
+    readonly size: _angular_core.InputSignal<KsTableSize>;
+    /** Show a caption / title above the table */
+    readonly caption: _angular_core.InputSignal<string>;
+    /** Make the table horizontally scrollable on overflow */
+    readonly scrollable: _angular_core.InputSignal<boolean>;
+    /** Highlight row on hover */
+    readonly hoverable: _angular_core.InputSignal<boolean>;
+    /** Emits the clicked row's data. From the native `rowClick` event. */
+    readonly ksRowClick: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    constructor(ref: ElementRef<KsTableElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsTableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsTableComponent, "ks-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "columnLabels": { "alias": "columnLabels"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; }, { "ksRowClick": "ksRowClick"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-tooltip>` custom element, typed for the wrapper. */
+type KsTooltipElement = HTMLElement & {
+    text: string;
+    position: KsPosition;
+    visible: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-tooltip>` Stencil custom element.
+ *
+ * `<ks-tooltip>` renders a real, consumer-facing default `<slot />` for
+ * the element the tooltip is attached to. Same single unfiltered
+ * `<ng-content>` pass-through as `Layout/card/card.ts` — wrap the
+ * trigger element as `<ks-tooltip text="Hi"><button>Hover me</button></ks-tooltip>`.
+ */
+declare class KsTooltipComponent {
+    private readonly el;
+    /** Tooltip text */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Preferred placement */
+    readonly position: _angular_core.InputSignal<KsPosition>;
+    /** Show tooltip on demand (true = always visible) — leave false for hover behaviour */
+    readonly visible: _angular_core.InputSignal<boolean>;
+    constructor(ref: ElementRef<KsTooltipElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsTooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsTooltipComponent, "ks-tooltip", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Mirrors `KsAccordionItem` exported by
+ * `core/src/components/Navigation/accordion/accordion.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsAccordionItem {
+    key: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/** DOM shape of the real `<ks-accordion>` custom element, typed for the wrapper. */
+type KsAccordionElement = HTMLElement & {
+    items: KsAccordionItem[];
+    multi: boolean;
+    openKeys: string[];
+};
+/**
+ * Angular wrapper around the `<ks-accordion>` Stencil custom element.
+ *
+ * ## Panel content — `ksPanel`, NOT a native `slot` attribute
+ * The Stencil source maps each light-DOM child carrying a `ksPanel="key"`
+ * attribute to a matching named `<slot>` internally (see
+ * `core/src/utils/ks-slots.util.ts`'s `getKsPanelMap()`) — it does NOT use
+ * the browser-native `slot="..."` attribute consumers would use for
+ * `Layout/card/card.ts`-style components. `template: '<ng-content></ng-content>'`
+ * still applies the same way: it's a single, unfiltered pass-through of
+ * whatever this Angular component's own template projects, as real
+ * light-DOM children of the `<ks-accordion>` host — the wrapper does no
+ * filtering itself, it just needs to exist so the projected content
+ * becomes real children for Stencil's `getKsPanelMap()` scan to find.
+ * Usage:
+ *   `<ks-accordion [items]="items">
+ *      <div ksPanel="profile">Profile body…</div>
+ *      <div ksPanel="settings">Settings body…</div>
+ *    </ks-accordion>`
+ */
+declare class KsAccordionComponent {
+    private readonly el;
+    /** List of accordion panel definitions */
+    readonly items: _angular_core.InputSignal<KsAccordionItem[]>;
+    /** Allow multiple panels open simultaneously */
+    readonly multi: _angular_core.InputSignal<boolean>;
+    /** Keys that should be open by default */
+    readonly openKeys: _angular_core.InputSignal<string[]>;
+    /** Emits the key that was toggled. From the native `toggled` event. */
+    readonly ksToggled: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsAccordionElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsAccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsAccordionComponent, "ks-accordion", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "openKeys": { "alias": "openKeys"; "required": false; "isSignal": true; }; }, { "ksToggled": "ksToggled"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Mirrors `KsBreadcrumbItem` exported by
+ * `core/src/components/Navigation/breadcrumb/breadcrumb.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsBreadcrumbItem {
+    label: string;
+    /** Route path or href — omit for the active (last) item */
+    href?: string;
+    /** Optional icon class */
+    icon?: string;
+}
+/** DOM shape of the real `<ks-breadcrumb>` custom element, typed for the wrapper. */
+type KsBreadcrumbElement = HTMLElement & {
+    items: KsBreadcrumbItem[];
+    separator: string;
+    size: KsBaseSize;
+};
+/**
+ * Angular wrapper around the `<ks-breadcrumb>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+declare class KsBreadcrumbComponent {
+    private readonly el;
+    /** Ordered list of breadcrumb items */
+    readonly items: _angular_core.InputSignal<KsBreadcrumbItem[]>;
+    /** Separator character or symbol */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    constructor(ref: ElementRef<KsBreadcrumbElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsBreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsBreadcrumbComponent, "ks-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsCarouselSlide` exported by
+ * `core/src/components/Navigation/carousel/carousel.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsCarouselSlide {
+    key: string;
+    imageUrl?: string;
+    alt?: string;
+    label?: string;
+    caption?: string;
+}
+/** DOM shape of the real `<ks-carousel>` custom element, typed for the wrapper. */
+type KsCarouselElement = HTMLElement & {
+    slides: KsCarouselSlide[];
+    autoPlay: number;
+    showControls: boolean;
+    showDots: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-carousel>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+declare class KsCarouselComponent {
+    private readonly el;
+    /** Slides to display */
+    readonly slides: _angular_core.InputSignal<KsCarouselSlide[]>;
+    /** Auto-play interval in ms (0 = disabled) */
+    readonly autoPlay: _angular_core.InputSignal<number>;
+    /** Show prev/next arrow controls */
+    readonly showControls: _angular_core.InputSignal<boolean>;
+    /** Show dot indicators */
+    readonly showDots: _angular_core.InputSignal<boolean>;
+    /** Emits the current slide index on change. From the native `slideChange` event. */
+    readonly ksSlideChange: _angular_core.OutputEmitterRef<number>;
+    constructor(ref: ElementRef<KsCarouselElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsCarouselComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsCarouselComponent, "ks-carousel", never, { "slides": { "alias": "slides"; "required": false; "isSignal": true; }; "autoPlay": { "alias": "autoPlay"; "required": false; "isSignal": true; }; "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; }, { "ksSlideChange": "ksSlideChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsContextMenuItem` / `KsContextMenuPosition` exported by
+ * `core/src/components/Navigation/context-menu/context-menu.tsx`.
+ * Duplicated locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsContextMenuItem {
+    key: string;
+    label?: string;
+    icon?: string;
+    divider?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+}
+interface KsContextMenuPosition {
+    x: number;
+    y: number;
+}
+/** DOM shape of the real `<ks-context-menu>` custom element, typed for the wrapper. */
+type KsContextMenuElement = HTMLElement & {
+    items: KsContextMenuItem[];
+    open(pos: KsContextMenuPosition): Promise<void>;
+    close(): Promise<void>;
+};
+/**
+ * Angular wrapper around the `<ks-context-menu>` Stencil custom element.
+ *
+ * `<ks-context-menu>`'s own `@Method()`s (`open(pos)`/`close()`) are
+ * exposed here as real passthrough methods — grab the component instance
+ * with `@ViewChild(KsContextMenuComponent)` and call them directly, e.g.
+ * `onContextMenu(e: MouseEvent) { menu.open({ x: e.clientX, y: e.clientY }); }`.
+ *
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+declare class KsContextMenuComponent {
+    private readonly el;
+    /** Menu items */
+    readonly items: _angular_core.InputSignal<KsContextMenuItem[]>;
+    /** Emits the clicked item key. From the native `itemClicked` event. */
+    readonly ksItemClicked: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsContextMenuElement>);
+    /** Passthrough to `<ks-context-menu>`'s own `@Method() open(pos)`. */
+    open(pos: KsContextMenuPosition): Promise<void>;
+    /** Passthrough to `<ks-context-menu>`'s own `@Method() close()`. */
+    close(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsContextMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsContextMenuComponent, "ks-context-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "ksItemClicked": "ksItemClicked"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors the types exported by
+ * `core/src/components/Navigation/nav-bar/nav-bar.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsNavBarItem {
+    key: string;
+    name: string;
+    iconClass: string;
+    /** href to navigate to */
+    redirectLink: string;
+    activationFragment?: string;
+    disabled?: boolean;
+}
+type KsNavBarSection = 'top' | 'mid' | 'bottom';
+interface KsNavBarSectionItem extends KsNavBarItem {
+    section: KsNavBarSection;
+}
+type KsNavBarMode = 'iconOnly' | 'hoverToExpand' | 'alwaysOpen';
+/** DOM shape of the real `<ks-nav-bar>` custom element, typed for the wrapper. */
+type KsNavBarElement = HTMLElement & {
+    items: KsNavBarSectionItem[];
+    mode: KsNavBarMode;
+    iconWidth: string;
+    expandedWidth: string;
+};
+/**
+ * Angular wrapper around the `<ks-nav-bar>` Stencil custom element.
+ * Renders a real, consumer-facing default `<slot />` — same single
+ * unfiltered `<ng-content>` pass-through as `Layout/card/card.ts`.
+ */
+declare class KsNavBarComponent {
+    private readonly el;
+    /** All nav items with their section assignment */
+    readonly items: _angular_core.InputSignal<KsNavBarSectionItem[]>;
+    /** Expansion mode */
+    readonly mode: _angular_core.InputSignal<KsNavBarMode>;
+    /** Width of the icon-only rail */
+    readonly iconWidth: _angular_core.InputSignal<string>;
+    /** Width of the expanded label panel */
+    readonly expandedWidth: _angular_core.InputSignal<string>;
+    constructor(ref: ElementRef<KsNavBarElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsNavBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsNavBarComponent, "ks-nav-bar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "iconWidth": { "alias": "iconWidth"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** DOM shape of the real `<ks-pagination>` custom element, typed for the wrapper. */
+type KsPaginationElement = HTMLElement & {
+    total: number;
+    pageSize: number;
+    currentPage: number;
+    showPageSize: boolean;
+    pageSizeOptions: number[];
+    showQuickJumper: boolean;
+    maxPageButtons: number;
+};
+/**
+ * Angular wrapper around the `<ks-pagination>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+declare class KsPaginationComponent {
+    private readonly el;
+    /** Total number of items */
+    readonly total: _angular_core.InputSignal<number>;
+    /** Items per page */
+    readonly pageSize: _angular_core.InputSignal<number>;
+    /** Current page (1-indexed) */
+    readonly currentPage: _angular_core.InputSignal<number>;
+    /** Show page size selector */
+    readonly showPageSize: _angular_core.InputSignal<boolean>;
+    /** Available page sizes */
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    /** Show quick jumper */
+    readonly showQuickJumper: _angular_core.InputSignal<boolean>;
+    /** Maximum number of page buttons to show */
+    readonly maxPageButtons: _angular_core.InputSignal<number>;
+    /** Emits when page changes. From the native `pageChange` event. */
+    readonly ksPageChange: _angular_core.OutputEmitterRef<number>;
+    /** Emits when page size changes. From the native `pageSizeChange` event. */
+    readonly ksPageSizeChange: _angular_core.OutputEmitterRef<number>;
+    constructor(ref: ElementRef<KsPaginationElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsPaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsPaginationComponent, "ks-pagination", never, { "total": { "alias": "total"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "showPageSize": { "alias": "showPageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showQuickJumper": { "alias": "showQuickJumper"; "required": false; "isSignal": true; }; "maxPageButtons": { "alias": "maxPageButtons"; "required": false; "isSignal": true; }; }, { "ksPageChange": "ksPageChange"; "ksPageSizeChange": "ksPageSizeChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsStepItem` / `KsStepperOrientation` exported by
+ * `core/src/components/Navigation/stepper/stepper.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsStepItem {
+    key: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    optional?: boolean;
+}
+type KsStepperOrientation = 'horizontal' | 'vertical';
+/** DOM shape of the real `<ks-stepper>` custom element, typed for the wrapper. */
+type KsStepperElement = HTMLElement & {
+    steps: KsStepItem[];
+    activeStep: number;
+    orientation: KsStepperOrientation;
+    clickable: boolean;
+    completedSteps: number[];
+};
+/**
+ * Angular wrapper around the `<ks-stepper>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+declare class KsStepperComponent {
+    private readonly el;
+    /** Step definitions */
+    readonly steps: _angular_core.InputSignal<KsStepItem[]>;
+    /** Currently active step index (0-based) */
+    readonly activeStep: _angular_core.InputSignal<number>;
+    /** Layout orientation */
+    readonly orientation: _angular_core.InputSignal<KsStepperOrientation>;
+    /** Allow clicking steps to navigate */
+    readonly clickable: _angular_core.InputSignal<boolean>;
+    /** Marks completed steps */
+    readonly completedSteps: _angular_core.InputSignal<number[]>;
+    /** Emits the new step index. From the native `stepChange` event. */
+    readonly ksStepChange: _angular_core.OutputEmitterRef<number>;
+    constructor(ref: ElementRef<KsStepperElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsStepperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsStepperComponent, "ks-stepper", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "activeStep": { "alias": "activeStep"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "completedSteps": { "alias": "completedSteps"; "required": false; "isSignal": true; }; }, { "ksStepChange": "ksStepChange"; }, never, never, true, never>;
+}
+
+/**
+ * Mirrors `KsTabItem` exported by
+ * `core/src/components/Navigation/tab/tab.tsx`. Duplicated locally — see
+ * the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsTabItem {
+    key: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/** DOM shape of the real `<ks-tab>` custom element, typed for the wrapper. */
+type KsTabElement = HTMLElement & {
+    tabs: KsTabItem[];
+    activeKey: string;
+    tabHeaderStyle: 'default' | 'expanded' | 'card' | 'button';
+};
+/**
+ * Angular wrapper around the `<ks-tab>` Stencil custom element.
+ *
+ * Same `ksPanel="key"` → named-`<slot>` strategy as
+ * `Navigation/accordion/accordion.ts` (NOT the native `slot="..."`
+ * attribute) — see that file's doc comment for the full explanation.
+ * Usage:
+ *   `<ks-tab [tabs]="tabs" activeKey="tab1">
+ *      <div ksPanel="tab1">Tab 1 content</div>
+ *      <div ksPanel="tab2">Tab 2 content</div>
+ *    </ks-tab>`
+ */
+declare class KsTabComponent {
+    private readonly el;
+    /** List of tab definitions */
+    readonly tabs: _angular_core.InputSignal<KsTabItem[]>;
+    /** Key of the initially active tab */
+    readonly activeKey: _angular_core.InputSignal<string>;
+    readonly tabHeaderStyle: _angular_core.InputSignal<"button" | "default" | "expanded" | "card">;
+    /** Emits the key of the newly selected tab. From the native `tabChange` event. */
+    readonly ksTabChange: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsTabElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsTabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsTabComponent, "ks-tab", never, { "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": false; "isSignal": true; }; "tabHeaderStyle": { "alias": "tabHeaderStyle"; "required": false; "isSignal": true; }; }, { "ksTabChange": "ksTabChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Mirrors `KsToolbarItem` exported by
+ * `core/src/components/Navigation/toolbar/toolbar.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsToolbarItem {
+    key: string;
+    icon?: string;
+    label?: string;
+    divider?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    variant?: KsVariant;
+}
+/** DOM shape of the real `<ks-toolbar>` custom element, typed for the wrapper. */
+type KsToolbarElement = HTMLElement & {
+    items: KsToolbarItem[];
+};
+/**
+ * Angular wrapper around the `<ks-toolbar>` Stencil custom element.
+ * Renders a real, consumer-facing default `<slot />` for extra trailing
+ * content — same single unfiltered `<ng-content>` pass-through as
+ * `Layout/card/card.ts`.
+ */
+declare class KsToolbarComponent {
+    private readonly el;
+    /** Toolbar items */
+    readonly items: _angular_core.InputSignal<KsToolbarItem[]>;
+    /** Emits the clicked item key. From the native `itemClicked` event. */
+    readonly ksItemClicked: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsToolbarElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsToolbarComponent, "ks-toolbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "ksItemClicked": "ksItemClicked"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Mirrors the types exported by
+ * `core/src/components/Navigation/top-nav-bar/top-nav-bar.tsx`.
+ * Duplicated locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+type KsTopNavBarVariant = 'default' | 'underline' | 'pill';
+interface KsTopNavBarItem {
+    key: string;
+    name: string;
+    iconClass?: string;
+    /** href to navigate to */
+    redirectLink: string;
+    activationFragment?: string;
+    disabled?: boolean;
+}
+/** DOM shape of the real `<ks-top-nav-bar>` custom element, typed for the wrapper. */
+type KsTopNavBarElement = HTMLElement & {
+    items: KsTopNavBarItem[];
+    variant: KsTopNavBarVariant;
+    showIcons: boolean;
+    showLabels: boolean;
+    label: string;
+};
+/**
+ * Angular wrapper around the `<ks-top-nav-bar>` Stencil custom element.
+ * Renders a real, consumer-facing default `<slot />` — same single
+ * unfiltered `<ng-content>` pass-through as `Layout/card/card.ts`.
+ */
+declare class KsTopNavBarComponent {
+    private readonly el;
+    /** Navigation items */
+    readonly items: _angular_core.InputSignal<KsTopNavBarItem[]>;
+    /** Visual style of the active indicator */
+    readonly variant: _angular_core.InputSignal<KsTopNavBarVariant>;
+    /** Show icon alongside label */
+    readonly showIcons: _angular_core.InputSignal<boolean>;
+    /** Show label text */
+    readonly showLabels: _angular_core.InputSignal<boolean>;
+    /** Aria label for the nav element */
+    readonly label: _angular_core.InputSignal<string>;
+    constructor(ref: ElementRef<KsTopNavBarElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsTopNavBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsTopNavBarComponent, "ks-top-nav-bar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showIcons": { "alias": "showIcons"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Mirrors `KsTreeNode` exported by
+ * `core/src/components/Navigation/tree-view/tree-view.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+interface KsTreeNode {
+    key: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    children?: KsTreeNode[];
+}
+/** DOM shape of the real `<ks-tree-view>` custom element, typed for the wrapper. */
+type KsTreeViewElement = HTMLElement & {
+    nodes: KsTreeNode[];
+    expandedKeys: string[];
+    multi: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-tree-view>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+declare class KsTreeViewComponent {
+    private readonly el;
+    /** Tree data */
+    readonly nodes: _angular_core.InputSignal<KsTreeNode[]>;
+    /** Keys of nodes that start expanded */
+    readonly expandedKeys: _angular_core.InputSignal<string[]>;
+    /** Allow selecting multiple nodes */
+    readonly multi: _angular_core.InputSignal<boolean>;
+    /** Emits key(s) when selection changes. From the native `selectionChanged` event. */
+    readonly ksSelectionChanged: _angular_core.OutputEmitterRef<string | string[]>;
+    /** Emits when a node is expanded/collapsed. From the native `expandChange` event. */
+    readonly ksExpandChange: _angular_core.OutputEmitterRef<{
+        key: string;
+        expanded: boolean;
+    }>;
+    constructor(ref: ElementRef<KsTreeViewElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsTreeViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsTreeViewComponent, "ks-tree-view", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "expandedKeys": { "alias": "expandedKeys"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; }, { "ksSelectionChanged": "ksSelectionChanged"; "ksExpandChange": "ksExpandChange"; }, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-badge>` custom element, typed for the wrapper. */
+type KsBadgeElement = HTMLElement & {
+    label: string;
+    variant: KsBaseVariant;
+    size: KsBaseSize;
+    dot: boolean;
+    pill: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-badge>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+declare class KsBadgeComponent {
+    private readonly el;
+    /** Display text */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Colour variant */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Show a dot instead of text */
+    readonly dot: _angular_core.InputSignal<boolean>;
+    /** Pill (fully rounded) shape */
+    readonly pill: _angular_core.InputSignal<boolean>;
+    constructor(ref: ElementRef<KsBadgeElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsBadgeComponent, "ks-badge", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-loader>` custom element, typed for the wrapper. */
+type KsLoaderElement = HTMLElement & {
+    state: LoaderStateEnum;
+};
+/**
+ * Angular wrapper around the `<ks-loader>` Stencil custom element.
+ *
+ * Renders real, consumer-facing named slots — `loading`, `empty`,
+ * `empty-action`, `error`, `error-action` — plus a default (unnamed)
+ * slot for the `Success` state. Same single unfiltered
+ * `<ng-content>` pass-through as `Layout/card/card.ts`: give each
+ * projected child its own native `slot="loading"` / `slot="empty"` /
+ * `slot="empty-action"` / `slot="error"` / `slot="error-action"`
+ * attribute (or none, for the default/success slot).
+ */
+declare class KsLoaderComponent {
+    private readonly el;
+    /** Current state */
+    readonly state: _angular_core.InputSignal<LoaderStateEnum>;
+    constructor(ref: ElementRef<KsLoaderElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsLoaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsLoaderComponent, "ks-loader", never, { "state": { "alias": "state"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** DOM shape of the real `<ks-message>` custom element, typed for the wrapper. */
+type KsMessageElement = HTMLElement & {
+    text: string;
+    icon: string;
+    variant: KsBaseVariant;
+    dismissible: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-message>` Stencil custom element.
+ *
+ * `<ks-message>` renders a default `<slot />` only as a fallback when
+ * `text` is empty — same single unfiltered `<ng-content>` pass-through as
+ * `Layout/card/card.ts`; omit `text` and project content instead if
+ * richer markup is needed.
+ */
+declare class KsMessageComponent {
+    private readonly el;
+    /** Main message text */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Optional icon class (e.g. Material Icon or Font Awesome) */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Colour variant */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Show a dismiss (×) button */
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    /** Emits when the message is dismissed. From the native `dismissed` event. */
+    readonly ksDismissed: _angular_core.OutputEmitterRef<void>;
+    constructor(ref: ElementRef<KsMessageElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsMessageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsMessageComponent, "ks-message", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "ksDismissed": "ksDismissed"; }, never, ["*"], true, never>;
+}
+
+/** DOM shape of the real `<ks-progress>` custom element, typed for the wrapper. */
+type KsProgressElement = HTMLElement & {
+    value: number;
+    max: number;
+    showLabel: boolean;
+    variant: KsBaseVariant;
+    size: KsBaseSize;
+    indeterminate: boolean;
+    label: string;
+};
+/**
+ * Angular wrapper around the `<ks-progress>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+declare class KsProgressComponent {
+    private readonly el;
+    /** Progress value (0-100) */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Maximum value */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Show percentage label */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
+    /** Progress variant */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Progress size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Indeterminate/loading state */
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    /** Optional label text */
+    readonly label: _angular_core.InputSignal<string>;
+    constructor(ref: ElementRef<KsProgressElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsProgressComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsProgressComponent, "ks-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-spinner>` custom element, typed for the wrapper. */
+type KsSpinnerElement = HTMLElement & {
+    size: KsSize;
+    variant: KsBaseVariant;
+    text: string;
+    centered: boolean;
+};
+/**
+ * Angular wrapper around the `<ks-spinner>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+declare class KsSpinnerComponent {
+    private readonly el;
+    /** Spinner size */
+    readonly size: _angular_core.InputSignal<KsSize>;
+    /** Spinner variant/color */
+    readonly variant: _angular_core.InputSignal<KsBaseVariant>;
+    /** Optional text to display */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Center the spinner in container */
+    readonly centered: _angular_core.InputSignal<boolean>;
+    constructor(ref: ElementRef<KsSpinnerElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsSpinnerComponent, "ks-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "centered": { "alias": "centered"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** DOM shape of the real `<ks-toast-outlet>` custom element, typed for the wrapper. */
+type KsToastOutletElement = HTMLElement & {
+    position: KsToastPosition;
+};
+/**
+ * Angular wrapper around the `<ks-toast-outlet>` Stencil custom element.
+ * Named `KsToastOutletComponent` (matching the literal tag, not just
+ * `KsToastComponent`) for consistency with the React wrapper, which must
+ * avoid colliding with the re-exported `KsToast` *data* interface above
+ * (TypeScript disallows a value and a type export sharing one identifier
+ * from the same module) — see `react/src/components/Notification/toast/toast.tsx`.
+ * `<ks-toast-outlet position="top-right" />` is all a consumer needs; add
+ * one per screen corner they want to stack toasts in.
+ *
+ * No `<slot>`, no events — it purely subscribes to the shared
+ * `toastStore` singleton (re-exported above) and renders whatever's
+ * enqueued.
+ */
+declare class KsToastOutletComponent {
+    private readonly el;
+    /** Where on screen to stack toasts */
+    readonly position: _angular_core.InputSignal<KsToastPosition>;
+    constructor(ref: ElementRef<KsToastOutletElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsToastOutletComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsToastOutletComponent, "ks-toast-outlet", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare function provideInBuildTheme(themeName: string, startUpMode: ThemeMode): _angular_core.EnvironmentProviders;
+
+export { KsAccordionComponent, KsAvatarComponent, KsBadgeComponent, KsBreadcrumbComponent, KsButtonComponent, KsButtonGroupComponent, KsCardComponent, KsCarouselComponent, KsCheckboxComponent, KsChipsComponent, KsCodeViewComponent, KsColourPickerComponent, KsContextMenuComponent, KsDatepickerComponent, KsDaterangeComponent, KsDialogComponent, KsDropdownComponent, KsFabComponent, KsInputComponent, KsListBoxComponent, KsLoaderComponent, KsMessageComponent, KsNavBarComponent, KsNotFoundComponent, KsOtpInputComponent, KsPaginationComponent, KsProgressComponent, KsRadioComponent, KsRatingComponent, KsRollingNumberComponent, KsSidebarComponent, KsSliderComponent, KsSpinnerComponent, KsSplitButtonComponent, KsStepperComponent, KsSwitchComponent, KsTabComponent, KsTableComponent, KsTextareaComponent, KsThemeSwitchComponent, KsTimepickerComponent, KsToastOutletComponent, KsToolbarComponent, KsTooltipComponent, KsTopNavBarComponent, KsTreeViewComponent, KsUploaderComponent, provideInBuildTheme };
+export type { ActionButtonsConfig, KsAccordionItem, KsBreadcrumbItem, KsButtonGroupDisplayStyle, KsButtonGroupItem, KsCardVariant, KsCarouselSlide, KsCheckboxOption, KsChipOption, KsChipsValue, KsCodeViewLanguage, KsColourPickerVariant, KsContextMenuItem, KsContextMenuPosition, KsDateRange, KsDialogSize, KsDropdownOption, KsDropdownValue, KsFabAction, KsFabPosition, KsInputType, KsListBoxOption, KsListBoxValue, KsNavBarItem, KsNavBarMode, KsNavBarSection, KsNavBarSectionItem, KsPresetRange, KsRadioOption, KsSidebarPosition, KsSidebarType, KsSplitButtonItem, KsStepItem, KsStepperOrientation, KsTabItem, KsTableSize, KsTableVariant, KsTimeValue, KsToolbarItem, KsTopNavBarItem, KsTopNavBarVariant, KsTreeNode, KsUploadedFile };