@kraft.stitch/angular 0.0.1 → 0.0.3

package/fesm2022/kraft.stitch-angular.mjs

@@ -0,0 +1,2873 @@
+import '@kraft.stitch/core/dist/components/ks-button.js';
+import * as i0 from '@angular/core';
+import { input, output, effect, inject, DestroyRef, ChangeDetectionStrategy, Component, model } from '@angular/core';
+import '@kraft.stitch/core/dist/components/ks-button-group.js';
+import '@kraft.stitch/core/dist/components/ks-chips.js';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import '@kraft.stitch/core/dist/components/ks-fab.js';
+import '@kraft.stitch/core/dist/components/ks-datepicker.js';
+import '@kraft.stitch/core/dist/components/ks-daterange.js';
+import '@kraft.stitch/core/dist/components/ks-timepicker.js';
+import '@kraft.stitch/core/dist/components/ks-dropdown.js';
+import '@kraft.stitch/core/dist/components/ks-listbox.js';
+import '@kraft.stitch/core/dist/components/ks-checkbox.js';
+import '@kraft.stitch/core/dist/components/ks-colour-picker.js';
+import '@kraft.stitch/core/dist/components/ks-input.js';
+import '@kraft.stitch/core/dist/components/ks-otp-input.js';
+import '@kraft.stitch/core/dist/components/ks-radio.js';
+import '@kraft.stitch/core/dist/components/ks-rating.js';
+import '@kraft.stitch/core/dist/components/ks-slider.js';
+import '@kraft.stitch/core/dist/components/ks-switch.js';
+import '@kraft.stitch/core/dist/components/ks-textarea.js';
+import '@kraft.stitch/core/dist/components/ks-theme-switch.js';
+import { ThemeMode, LoaderStateEnum } from '@kraft.stitch/core';
+export { toastStore } from '@kraft.stitch/core';
+import '@kraft.stitch/core/dist/components/ks-uploader.js';
+import '@kraft.stitch/core/dist/components/ks-avatar.js';
+import '@kraft.stitch/core/dist/components/ks-card.js';
+import '@kraft.stitch/core/dist/components/ks-code-view.js';
+import '@kraft.stitch/core/dist/components/ks-dialog.js';
+import '@kraft.stitch/core/dist/components/ks-not-found.js';
+import '@kraft.stitch/core/dist/components/ks-sidebar.js';
+import '@kraft.stitch/core/dist/components/ks-table.js';
+import '@kraft.stitch/core/dist/components/ks-tooltip.js';
+import '@kraft.stitch/core/dist/components/ks-accordion.js';
+import '@kraft.stitch/core/dist/components/ks-breadcrumb.js';
+import '@kraft.stitch/core/dist/components/ks-carousel.js';
+import '@kraft.stitch/core/dist/components/ks-context-menu.js';
+import '@kraft.stitch/core/dist/components/ks-nav-bar.js';
+import '@kraft.stitch/core/dist/components/ks-pagination.js';
+import '@kraft.stitch/core/dist/components/ks-stepper.js';
+import '@kraft.stitch/core/dist/components/ks-tab.js';
+import '@kraft.stitch/core/dist/components/ks-toolbar.js';
+import '@kraft.stitch/core/dist/components/ks-top-nav-bar.js';
+import '@kraft.stitch/core/dist/components/ks-tree-view.js';
+import '@kraft.stitch/core/dist/components/ks-badge.js';
+import '@kraft.stitch/core/dist/components/ks-loader.js';
+import '@kraft.stitch/core/dist/components/ks-message.js';
+import '@kraft.stitch/core/dist/components/ks-progress.js';
+import '@kraft.stitch/core/dist/components/ks-spinner.js';
+import '@kraft.stitch/core/dist/components/ks-toast-outlet.js';
+
+// Side-effect import: registers the `ks-button` tag in the browser's
+// CustomElementRegistry (via Stencil's `auto-define-custom-elements`
+// behavior in `core/stencil.config.ts`). Nothing in THIS file renders the
+// button — see the class doc comment below for exactly what does.
+/**
+ * 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.)
+ */
+class KsButtonComponent {
+    el;
+    /** Icon class string (e.g. Material Icon or Font Awesome class) */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Button label text */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Visual style variant */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Renders the button with fully-rounded pill corners */
+    isRounded = input(false, ...(ngDevMode ? [{ debugName: "isRounded" }] : /* istanbul ignore next */ []));
+    /** Disables the button */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    ksClick = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        // Each signal input gets its own effect so only the properties that
+        // actually changed are written back to the DOM. Stencil's own
+        // `@Prop()` watchers take it from there and re-render the button.
+        effect(() => (this.el.icon = this.icon()));
+        effect(() => (this.el.name = this.name()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.isRounded = this.isRounded()));
+        effect(() => (this.el.disabled = this.disabled()));
+        // Attached manually (NOT `@HostListener`) to the *internal* native
+        // event name `clicked`, which is never referenced by name in any
+        // Angular template (`ksClick` is what templates bind to instead) — so
+        // there is no `tNode.outputs` name collision for Ivy to double-wire.
+        // zone.js's patched `addEventListener` means this still runs inside
+        // the Angular zone, so no manual `NgZone.run()` is needed, and change
+        // detection still runs after `emit()` below.
+        const onNativeClicked = (event) => {
+            this.ksClick.emit(event.detail);
+            event.preventDefault();
+        };
+        this.el.addEventListener('clicked', onNativeClicked);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('clicked', onNativeClicked));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsButtonComponent, isStandalone: true, selector: "ks-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksClick: "ksClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-button',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRounded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ksClick: [{ type: i0.Output, args: ["ksClick"] }] } });
+
+// Side-effect import: registers the `ks-button-group` tag in the browser's
+// CustomElementRegistry — see `button/button.ts` for the full explanation of
+// this pattern (Stencil owns rendering, this class only translates
+// Angular-idiomatic Input/Output into DOM property writes + event listeners).
+/**
+ * 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.
+ */
+class KsButtonGroupComponent {
+    el;
+    /** The buttons to render */
+    buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+    /** Visual variant */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Display style: 'default' (filled/outlined) or 'switch' (pill toggle) */
+    displayStyle = input('default', ...(ngDevMode ? [{ debugName: "displayStyle" }] : /* istanbul ignore next */ []));
+    /** Allow multiple selected buttons (toggle mode) */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Toggle/selection mode — shows active state on click */
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    /** Disables the entire group */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Emits the clicked button's `key`. From the native `clicked` event. */
+    ksClick = output();
+    /** Emits the current selection when `selectable`. From the native `selectionChanged` event. */
+    ksSelectionChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.buttons = this.buttons()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.displayStyle = this.displayStyle()));
+        effect(() => (this.el.multi = this.multi()));
+        effect(() => (this.el.selectable = this.selectable()));
+        effect(() => (this.el.disabled = this.disabled()));
+        const onNativeClicked = (event) => {
+            this.ksClick.emit(event.detail);
+        };
+        const onNativeSelectionChanged = (event) => {
+            this.ksSelectionChange.emit(event.detail);
+        };
+        this.el.addEventListener('clicked', onNativeClicked);
+        this.el.addEventListener('selectionChanged', onNativeSelectionChanged);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('clicked', onNativeClicked);
+            this.el.removeEventListener('selectionChanged', onNativeSelectionChanged);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsButtonGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsButtonGroupComponent, isStandalone: true, selector: "ks-button-group", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, displayStyle: { classPropertyName: "displayStyle", publicName: "displayStyle", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksClick: "ksClick", ksSelectionChange: "ksSelectionChange" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-button-group',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], displayStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayStyle", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ksClick: [{ type: i0.Output, args: ["ksClick"] }], ksSelectionChange: [{ type: i0.Output, args: ["ksSelectionChange"] }] } });
+
+// Side-effect import: registers the `ks-chips` tag — see `button/button.ts`
+// for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsChipsComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Full list of chip options */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Allow selecting multiple chips */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Renders chips with fully-rounded pill corners */
+    isRounded = input(true, ...(ngDevMode ? [{ debugName: "isRounded" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-selected value(s). From the native `valueChange` event. */
+    ksValueChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.options = this.options()));
+        effect(() => (this.el.multi = this.multi()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.isRounded = this.isRounded()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
+    }
+    /** `ControlValueAccessor` — called by `ngModel`/`formControl` to push a value in. */
+    writeValue(value) {
+        void this.el.writeValue(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsChipsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsChipsComponent, isStandalone: true, selector: "ks-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksValueChange: "ksValueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsChipsComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsChipsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-chips',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsChipsComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRounded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }] } });
+
+// Side-effect import: registers the `ks-fab` tag — see `button/button.ts`
+// for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsFabComponent {
+    el;
+    /** Icon for the main FAB button */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Accessible label / tooltip */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Variant */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Speed-dial actions shown on expand */
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    /** Disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Corner to anchor the FAB inside its nearest positioned container */
+    position = input('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** When true (default), positions `absolute` inside the nearest positioned ancestor; when false, `fixed` to the viewport */
+    appendToParent = input(true, ...(ngDevMode ? [{ debugName: "appendToParent" }] : /* istanbul ignore next */ []));
+    /** Emits `'main'` for the main button, or a speed-dial action's `key`. From the native `clicked` event. */
+    ksClick = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.icon = this.icon()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.actions = this.actions()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => (this.el.position = this.position()));
+        effect(() => (this.el.appendToParent = this.appendToParent()));
+        const onNativeClicked = (event) => {
+            this.ksClick.emit(event.detail);
+        };
+        this.el.addEventListener('clicked', onNativeClicked);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('clicked', onNativeClicked));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsFabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsFabComponent, isStandalone: true, selector: "ks-fab", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, appendToParent: { classPropertyName: "appendToParent", publicName: "appendToParent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksClick: "ksClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsFabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-fab',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], appendToParent: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToParent", required: false }] }], ksClick: [{ type: i0.Output, args: ["ksClick"] }] } });
+
+// Side-effect import: registers the `ks-datepicker` tag — see
+// `button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsDatepickerComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('Select date', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Min selectable date */
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    /** Max selectable date */
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    selectedDate = input(null, ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-picked date. From the native `selectedDateChange` event. */
+    ksSelectedDateChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.placeholder = this.placeholder()));
+        effect(() => (this.el.minDate = this.minDate()));
+        effect(() => (this.el.maxDate = this.maxDate()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.selectedDate()));
+        const onNativeSelectedDateChange = (event) => {
+            const detail = event.detail;
+            this.ksSelectedDateChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('selectedDateChange', onNativeSelectedDateChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('selectedDateChange', onNativeSelectedDateChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDatepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsDatepickerComponent, isStandalone: true, selector: "ks-datepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksSelectedDateChange: "ksSelectedDateChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDatepickerComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-datepicker',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDatepickerComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], ksSelectedDateChange: [{ type: i0.Output, args: ["ksSelectedDateChange"] }] } });
+
+// Side-effect import: registers the `ks-daterange` tag — see
+// `button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsDaterangeComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select date range…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    showPresets = input(true, ...(ngDevMode ? [{ debugName: "showPresets" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    range = input({ start: null, end: null }, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-picked range. From the native `rangeChange` event. */
+    ksRangeChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.placeholder = this.placeholder()));
+        effect(() => (this.el.minDate = this.minDate()));
+        effect(() => (this.el.maxDate = this.maxDate()));
+        effect(() => (this.el.presets = this.presets()));
+        effect(() => (this.el.showPresets = this.showPresets()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.range()));
+        const onNativeRangeChange = (event) => {
+            const detail = event.detail;
+            this.ksRangeChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('rangeChange', onNativeRangeChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('rangeChange', onNativeRangeChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? { start: null, end: null });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDaterangeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsDaterangeComponent, isStandalone: true, selector: "ks-daterange", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksRangeChange: "ksRangeChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDaterangeComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDaterangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-daterange',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDaterangeComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], ksRangeChange: [{ type: i0.Output, args: ["ksRangeChange"] }] } });
+
+// Side-effect import: registers the `ks-timepicker` tag — see
+// `button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsTimepickerComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder */
+    placeholder = input('Select time…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Use 12-hour clock (AM/PM) */
+    use12Hour = input(false, ...(ngDevMode ? [{ debugName: "use12Hour" }] : /* istanbul ignore next */ []));
+    /** Show seconds */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    /** Disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Error message */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the confirmed time. From the native `valueChange` event. */
+    ksValueChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.placeholder = this.placeholder()));
+        effect(() => (this.el.use12Hour = this.use12Hour()));
+        effect(() => (this.el.showSeconds = this.showSeconds()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => (this.el.error = this.error()));
+        effect(() => void this.el.writeValue(this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTimepickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsTimepickerComponent, isStandalone: true, selector: "ks-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, use12Hour: { classPropertyName: "use12Hour", publicName: "use12Hour", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", ksValueChange: "ksValueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsTimepickerComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-timepicker',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsTimepickerComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], use12Hour: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12Hour", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }] } });
+
+// Side-effect import: registers the `ks-dropdown` tag — see
+// `button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsDropdownComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Full list of options */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown when nothing is selected */
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Allow selecting multiple options */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Show a search box inside the dropdown */
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled selected value(s) for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    selectedValues = input([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    /** Emits the new selection — an array when `multi`, otherwise a single value. From the native `selectedValuesChange` event. */
+    ksSelectedValuesChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.options = this.options()));
+        effect(() => (this.el.placeholder = this.placeholder()));
+        effect(() => (this.el.multi = this.multi()));
+        effect(() => (this.el.searchable = this.searchable()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.selectedValues()));
+        const onNativeSelectedValuesChange = (event) => {
+            const detail = event.detail;
+            this.ksSelectedValuesChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('selectedValuesChange', onNativeSelectedValuesChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('selectedValuesChange', onNativeSelectedValuesChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDropdownComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsDropdownComponent, isStandalone: true, selector: "ks-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksSelectedValuesChange: "ksSelectedValuesChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDropdownComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-dropdown',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDropdownComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], ksSelectedValuesChange: [{ type: i0.Output, args: ["ksSelectedValuesChange"] }] } });
+
+// Side-effect import: registers the `ks-listbox` tag — see
+// `button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsListBoxComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Options list */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Allow multi-select */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Show search box */
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Enable group headers using the `group` field on each option */
+    groupBy = input(false, ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled selected value(s) for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
+    selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Emits the new selection — an array when `multi`, otherwise a single value. From the native `selectedChange` event. */
+    ksSelectedChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.options = this.options()));
+        effect(() => (this.el.multi = this.multi()));
+        effect(() => (this.el.searchable = this.searchable()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => (this.el.groupBy = this.groupBy()));
+        effect(() => void this.el.writeValue(this.selected()));
+        const onNativeSelectedChange = (event) => {
+            const detail = event.detail;
+            this.ksSelectedChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('selectedChange', onNativeSelectedChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('selectedChange', onNativeSelectedChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsListBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsListBoxComponent, isStandalone: true, selector: "ks-listbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksSelectedChange: "ksSelectedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsListBoxComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsListBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-listbox',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsListBoxComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], ksSelectedChange: [{ type: i0.Output, args: ["ksSelectedChange"] }] } });
+
+// Side-effect import: registers the `ks-checkbox` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsCheckboxComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Label shown next to the control (single mode) */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional set of multiple options (multi-select / group mode) */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Single mode: initial/controlled checked value. Prefer `[(ngModel)]` / `formControlName`. */
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Group mode: initial/controlled selected values. Prefer `[(ngModel)]` / `formControlName`. */
+    selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Emits whenever `checked` changes (single mode). From the native `checkedChange` event. */
+    ksCheckedChange = output();
+    /** Emits whenever `selected` changes (group mode). From the native `selectedChange` event. */
+    ksSelectedChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.options = this.options()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => (this.el.checked = this.checked()));
+        effect(() => (this.el.selected = this.selected()));
+        const onNativeCheckedChange = (event) => {
+            const detail = event.detail;
+            this.ksCheckedChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        const onNativeSelectedChange = (event) => {
+            const detail = event.detail;
+            this.ksSelectedChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('checkedChange', onNativeCheckedChange);
+        this.el.addEventListener('selectedChange', onNativeSelectedChange);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('checkedChange', onNativeCheckedChange);
+            this.el.removeEventListener('selectedChange', onNativeSelectedChange);
+        });
+    }
+    /** `ControlValueAccessor` — called by `ngModel`/`formControl` to push a value in (either mode). */
+    writeValue(value) {
+        void this.el.writeValue(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCheckboxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsCheckboxComponent, isStandalone: true, selector: "ks-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksCheckedChange: "ksCheckedChange", ksSelectedChange: "ksSelectedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsCheckboxComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-checkbox',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsCheckboxComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], ksCheckedChange: [{ type: i0.Output, args: ["ksCheckedChange"] }], ksSelectedChange: [{ type: i0.Output, args: ["ksSelectedChange"] }] } });
+
+// Side-effect import: registers the `ks-colour-picker` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+const DEFAULT_SWATCHES = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899', '#64748b', '#000000', '#ffffff'];
+/**
+ * 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.
+ */
+class KsColourPickerComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Picker UI variant */
+    variant = input('input', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Preset swatch colours */
+    swatches = input(DEFAULT_SWATCHES, ...(ngDevMode ? [{ debugName: "swatches" }] : /* istanbul ignore next */ []));
+    /** Disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled hex value. Prefer `[(ngModel)]` / `formControlName`. */
+    value = input('#3b82f6', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-picked hex colour. From the native `valueChange` event. */
+    ksValueChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.swatches = this.swatches()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? '#3b82f6');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsColourPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsColourPickerComponent, isStandalone: true, selector: "ks-colour-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, swatches: { classPropertyName: "swatches", publicName: "swatches", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksValueChange: "ksValueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsColourPickerComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsColourPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-colour-picker',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsColourPickerComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], swatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "swatches", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }] } });
+
+// Side-effect import: registers the `ks-input` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsInputComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** HTML input type */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Helper / hint text shown below the input */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Error message — also triggers the error state */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Leading icon class (e.g. Material Symbol name) */
+    prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
+    /** Trailing icon class */
+    suffixIcon = input('', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-typed value. From the native `valueChange` event. */
+    ksValueChange = output();
+    /** Emitted on native blur (mirrors Angular's onTouched callback). From the native `ksBlur` event. */
+    ksBlurred = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.type = this.type()));
+        effect(() => (this.el.placeholder = this.placeholder()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.hint = this.hint()));
+        effect(() => (this.el.error = this.error()));
+        effect(() => (this.el.prefixIcon = this.prefixIcon()));
+        effect(() => (this.el.suffixIcon = this.suffixIcon()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => (this.el.value = this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+        };
+        const onNativeBlur = () => {
+            this.ksBlurred.emit();
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        this.el.addEventListener('ksBlur', onNativeBlur);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('valueChange', onNativeValueChange);
+            this.el.removeEventListener('ksBlur', onNativeBlur);
+        });
+    }
+    writeValue(value) {
+        this.el.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsInputComponent, isStandalone: true, selector: "ks-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", ksValueChange: "ksValueChange", ksBlurred: "ksBlurred" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsInputComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-input',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsInputComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }], ksBlurred: [{ type: i0.Output, args: ["ksBlurred"] }] } });
+
+// Side-effect import: registers the `ks-otp-input` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsOtpInputComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Number of digits */
+    length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /** Input type: 'number' | 'text' */
+    inputType = input('number', ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Error message */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Mask the input (like a password) */
+    masked = input(false, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
+    /** Disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits whenever `value` changes. From the native `valueChange` event. */
+    ksValueChange = output();
+    /** Emits the full OTP string when all digits are filled. From the native `completed` event. */
+    ksCompleted = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.length = this.length()));
+        effect(() => (this.el.inputType = this.inputType()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.error = this.error()));
+        effect(() => (this.el.masked = this.masked()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        const onNativeCompleted = (event) => {
+            this.ksCompleted.emit(event.detail);
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        this.el.addEventListener('completed', onNativeCompleted);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('valueChange', onNativeValueChange);
+            this.el.removeEventListener('completed', onNativeCompleted);
+        });
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsOtpInputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsOtpInputComponent, isStandalone: true, selector: "ks-otp-input", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksValueChange: "ksValueChange", ksCompleted: "ksCompleted" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsOtpInputComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsOtpInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-otp-input',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsOtpInputComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }], ksCompleted: [{ type: i0.Output, args: ["ksCompleted"] }] } });
+
+// Side-effect import: registers the `ks-radio` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsRadioComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** List of options — the component renders a radio group */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Label shown above the group */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Name attribute shared across all radio inputs in the group */
+    name = input('ks-radio', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Colour variant applied to the selected indicator */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size variant — affects label text size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled selected value. Prefer `[(ngModel)]` / `formControlName`. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the selected value on every change. From the native `valueChange` event. */
+    ksValueChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.options = this.options()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.name = this.name()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsRadioComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsRadioComponent, isStandalone: true, selector: "ks-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksValueChange: "ksValueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsRadioComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsRadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-radio',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsRadioComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }] } });
+
+// Side-effect import: registers the `ks-rating` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsRatingComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Total number of stars */
+    max = input(5, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Read-only / non-interactive */
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    /** Show numeric label */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-picked rating. From the native `valueChange` event. */
+    ksValueChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.max = this.max()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.readOnly = this.readOnly()));
+        effect(() => (this.el.showLabel = this.showLabel()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsRatingComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsRatingComponent, isStandalone: true, selector: "ks-rating", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksValueChange: "ksValueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsRatingComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsRatingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-rating',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsRatingComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }] } });
+
+// Side-effect import: registers the `ks-slider` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsSliderComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Minimum value */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Maximum value */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Step increment */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Show value tooltip */
+    showTooltip = input(true, ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
+    /** Show min/max labels */
+    showLabels = input(false, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    /** Field label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-picked value. From the native `valueChange` event. */
+    ksValueChange = output();
+    /** Emitted on native blur. From the native `ksBlur` event. */
+    ksBlurred = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.min = this.min()));
+        effect(() => (this.el.max = this.max()));
+        effect(() => (this.el.step = this.step()));
+        effect(() => (this.el.showTooltip = this.showTooltip()));
+        effect(() => (this.el.showLabels = this.showLabels()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => void this.el.writeValue(this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+        };
+        const onNativeBlur = () => {
+            this.ksBlurred.emit();
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        this.el.addEventListener('ksBlur', onNativeBlur);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('valueChange', onNativeValueChange);
+            this.el.removeEventListener('ksBlur', onNativeBlur);
+        });
+    }
+    writeValue(value) {
+        void this.el.writeValue(value ?? 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsSliderComponent, isStandalone: true, selector: "ks-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksValueChange: "ksValueChange", ksBlurred: "ksBlurred" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsSliderComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSliderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-slider',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsSliderComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }], ksBlurred: [{ type: i0.Output, args: ["ksBlurred"] }] } });
+
+// Side-effect import: registers the `ks-switch` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsSwitchComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Colour variant */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled checked value. Prefer `[(ngModel)]` / `formControlName`. */
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Label position relative to the switch track */
+    labelPosition = input('left', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /** Emits whenever `checked` changes. From the native `checkedChange` event. */
+    ksCheckedChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => (this.el.checked = this.checked()));
+        effect(() => (this.el.labelPosition = this.labelPosition()));
+        const onNativeCheckedChange = (event) => {
+            const detail = event.detail;
+            this.ksCheckedChange.emit(detail);
+            this.onChange(detail);
+            this.onTouched();
+        };
+        this.el.addEventListener('checkedChange', onNativeCheckedChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('checkedChange', onNativeCheckedChange));
+    }
+    writeValue(value) {
+        this.el.checked = value ?? false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** Delegates to `<ks-switch>`'s own `@Method() setDisabledState()`. */
+    setDisabledState(isDisabled) {
+        void this.el.setDisabledState(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSwitchComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsSwitchComponent, isStandalone: true, selector: "ks-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksCheckedChange: "ksCheckedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsSwitchComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-switch',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsSwitchComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], ksCheckedChange: [{ type: i0.Output, args: ["ksCheckedChange"] }] } });
+
+// Side-effect import: registers the `ks-textarea` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsTextareaComponent {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    /** Textarea label */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Placeholder text */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Number of visible rows */
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Maximum character count */
+    maxLength = input(500, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    /** Show character counter */
+    showCounter = input(false, ...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
+    /** Auto-resize based on content */
+    autoResize = input(false, ...(ngDevMode ? [{ debugName: "autoResize" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Error state */
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Helper/error text */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled value. Prefer `[(ngModel)]` / `formControlName`. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emits the newly-typed value. From the native `valueChange` event. */
+    ksValueChange = output();
+    /** Emitted on native blur. From the native `ksBlur` event. */
+    ksBlurred = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.placeholder = this.placeholder()));
+        effect(() => (this.el.rows = this.rows()));
+        effect(() => (this.el.maxLength = this.maxLength()));
+        effect(() => (this.el.showCounter = this.showCounter()));
+        effect(() => (this.el.autoResize = this.autoResize()));
+        effect(() => (this.el.disabled = this.disabled()));
+        effect(() => (this.el.error = this.error()));
+        effect(() => (this.el.hint = this.hint()));
+        effect(() => (this.el.value = this.value()));
+        const onNativeValueChange = (event) => {
+            const detail = event.detail;
+            this.ksValueChange.emit(detail);
+            this.onChange(detail);
+        };
+        const onNativeBlur = () => {
+            this.ksBlurred.emit();
+            this.onTouched();
+        };
+        this.el.addEventListener('valueChange', onNativeValueChange);
+        this.el.addEventListener('ksBlur', onNativeBlur);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('valueChange', onNativeValueChange);
+            this.el.removeEventListener('ksBlur', onNativeBlur);
+        });
+    }
+    writeValue(value) {
+        this.el.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTextareaComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsTextareaComponent, isStandalone: true, selector: "ks-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksValueChange: "ksValueChange", ksBlurred: "ksBlurred" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsTextareaComponent, multi: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTextareaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-textarea',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsTextareaComponent, multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], ksValueChange: [{ type: i0.Output, args: ["ksValueChange"] }], ksBlurred: [{ type: i0.Output, args: ["ksBlurred"] }] } });
+
+// Side-effect import: registers the `ks-theme-switch` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsThemeSwitchComponent {
+    el;
+    /** When true the mode-toggle shows three options: System | Light | Dark. */
+    includeSystem = input(true, ...(ngDevMode ? [{ debugName: "includeSystem" }] : /* istanbul ignore next */ []));
+    /** When true the colour-palette switcher is shown. */
+    includePalette = input(false, ...(ngDevMode ? [{ debugName: "includePalette" }] : /* istanbul ignore next */ []));
+    /** When true only icons are shown in the mode-toggle switch. */
+    onlyIcon = input(false, ...(ngDevMode ? [{ debugName: "onlyIcon" }] : /* istanbul ignore next */ []));
+    /** The palette that should be active on init. */
+    palette = input('ForestGreen', ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+    /** The mode that should be active on init. */
+    mode = input(ThemeMode.Light, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.includeSystem = this.includeSystem()));
+        effect(() => (this.el.includePalette = this.includePalette()));
+        effect(() => (this.el.onlyIcon = this.onlyIcon()));
+        effect(() => (this.el.palette = this.palette()));
+        effect(() => (this.el.mode = this.mode()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsThemeSwitchComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsThemeSwitchComponent, isStandalone: true, selector: "ks-theme-switch", inputs: { includeSystem: { classPropertyName: "includeSystem", publicName: "includeSystem", isSignal: true, isRequired: false, transformFunction: null }, includePalette: { classPropertyName: "includePalette", publicName: "includePalette", isSignal: true, isRequired: false, transformFunction: null }, onlyIcon: { classPropertyName: "onlyIcon", publicName: "onlyIcon", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsThemeSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-theme-switch',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { includeSystem: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeSystem", required: false }] }], includePalette: [{ type: i0.Input, args: [{ isSignal: true, alias: "includePalette", required: false }] }], onlyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyIcon", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
+
+// Side-effect import: registers the `ks-uploader` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsUploaderComponent {
+    el;
+    /** Accepted MIME types / extensions, e.g. "image/*,.pdf" */
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Allow selecting multiple files */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Maximum file size in bytes (0 = no limit) */
+    maxSize = input(0, ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** Show image thumbnails for image/* files */
+    previewImages = input(true, ...(ngDevMode ? [{ debugName: "previewImages" }] : /* istanbul ignore next */ []));
+    /** Custom drop-zone label */
+    label = input('or Drop files here', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Disabled state */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Emits the accepted files whenever the selection changes. From the native `filesChange` event. */
+    ksFilesChange = output();
+    /** Emits rejected files (wrong type / over size limit). From the native `filesRejected` event. */
+    ksFilesRejected = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.accept = this.accept()));
+        effect(() => (this.el.multiple = this.multiple()));
+        effect(() => (this.el.maxSize = this.maxSize()));
+        effect(() => (this.el.previewImages = this.previewImages()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.disabled = this.disabled()));
+        const onNativeFilesChange = (event) => {
+            this.ksFilesChange.emit(event.detail);
+        };
+        const onNativeFilesRejected = (event) => {
+            this.ksFilesRejected.emit(event.detail);
+        };
+        this.el.addEventListener('filesChange', onNativeFilesChange);
+        this.el.addEventListener('filesRejected', onNativeFilesRejected);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('filesChange', onNativeFilesChange);
+            this.el.removeEventListener('filesRejected', onNativeFilesRejected);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsUploaderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsUploaderComponent, isStandalone: true, selector: "ks-uploader", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, previewImages: { classPropertyName: "previewImages", publicName: "previewImages", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksFilesChange: "ksFilesChange", ksFilesRejected: "ksFilesRejected" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsUploaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-uploader',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], previewImages: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImages", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ksFilesChange: [{ type: i0.Output, args: ["ksFilesChange"] }], ksFilesRejected: [{ type: i0.Output, args: ["ksFilesRejected"] }] } });
+
+// Side-effect import: registers the `ks-avatar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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`).
+ */
+class KsAvatarComponent {
+    el;
+    /** Image URL — takes priority over initials */
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Alt text for the image */
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** Initials shown when no image (e.g. "KS") */
+    initials = input('', ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    /** Icon class shown when neither src nor initials */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Colour variant — used when showing initials or icon */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Circular (default) or rounded-square */
+    square = input(false, ...(ngDevMode ? [{ debugName: "square" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.src = this.src()));
+        effect(() => (this.el.alt = this.alt()));
+        effect(() => (this.el.initials = this.initials()));
+        effect(() => (this.el.icon = this.icon()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.square = this.square()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsAvatarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsAvatarComponent, isStandalone: true, selector: "ks-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsAvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-avatar',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }] } });
+
+// Side-effect import: registers the `ks-card` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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>`.
+ */
+class KsCardComponent {
+    el;
+    /** Card title */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Card title (Angular input name was `title`; aliased to avoid clashing with the native `title` attribute/tooltip). */
+    cardTitle = input('', ...(ngDevMode ? [{ debugName: "cardTitle" }] : /* istanbul ignore next */ []));
+    /** Subtitle / subheading */
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** URL for header image */
+    imageUrl = input('', ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+    /** Alt text for image */
+    imageAlt = input('', ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
+    /** SVG icon class */
+    iconClass = input('', ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+    /** Card visual variant */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Emits when clicked (only when clickable). From the native `cardClick` event. */
+    ksCardClick = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.cardTitle = this.cardTitle()));
+        effect(() => (this.el.subtitle = this.subtitle()));
+        effect(() => (this.el.imageUrl = this.imageUrl()));
+        effect(() => (this.el.imageAlt = this.imageAlt()));
+        effect(() => (this.el.iconClass = this.iconClass()));
+        effect(() => (this.el.variant = this.variant()));
+        const onNativeCardClick = (event) => {
+            this.ksCardClick.emit(event.detail);
+        };
+        this.el.addEventListener('cardClick', onNativeCardClick);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('cardClick', onNativeCardClick));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsCardComponent, isStandalone: true, selector: "ks-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, cardTitle: { classPropertyName: "cardTitle", publicName: "cardTitle", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksCardClick: "ksCardClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-card',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], cardTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTitle", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ksCardClick: [{ type: i0.Output, args: ["ksCardClick"] }] } });
+
+// Side-effect import: registers the `ks-code-view` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-code-view>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+class KsCodeViewComponent {
+    el;
+    /** The source code string to display */
+    code = input('', ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    /** Language hint shown in the header badge */
+    language = input('html', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+    /** Optional title shown in the header */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Max visible height before scroll kicks in (CSS value, e.g. '20rem') */
+    maxHeight = input('24rem', ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /** Show the header bar with language badge & copy button */
+    showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+    /** Whether the code block is currently collapsed */
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Whether the code block is to show and hide buttons */
+    actionButtonConfig = input({ expand: true, code: true }, ...(ngDevMode ? [{ debugName: "actionButtonConfig" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.code = this.code()));
+        effect(() => (this.el.language = this.language()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.maxHeight = this.maxHeight()));
+        effect(() => (this.el.showHeader = this.showHeader()));
+        effect(() => (this.el.collapsed = this.collapsed()));
+        effect(() => (this.el.actionButtonConfig = this.actionButtonConfig()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCodeViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsCodeViewComponent, isStandalone: true, selector: "ks-code-view", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, actionButtonConfig: { classPropertyName: "actionButtonConfig", publicName: "actionButtonConfig", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCodeViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-code-view',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], actionButtonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtonConfig", required: false }] }] } });
+
+// Side-effect import: registers the `ks-dialog` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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>`.
+ */
+class KsDialogComponent {
+    el;
+    /** Whether the dialog is open */
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Dialog title */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Hide the built-in close (✕) button */
+    hideClose = input(false, ...(ngDevMode ? [{ debugName: "hideClose" }] : /* istanbul ignore next */ []));
+    /** Prevent closing by clicking the backdrop */
+    persistent = input(false, ...(ngDevMode ? [{ debugName: "persistent" }] : /* istanbul ignore next */ []));
+    /** Panel size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Target element id (without #), or '' to use `<body>`. When set, the overlay covers only that element and the dialog is centred inside it. */
+    target = input('', ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /** Emits when the dialog requests close. From the native `closeDialog` event. */
+    ksCloseDialog = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.open = this.open()));
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.hideClose = this.hideClose()));
+        effect(() => (this.el.persistent = this.persistent()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.target = this.target()));
+        const onNativeCloseDialog = () => this.ksCloseDialog.emit();
+        this.el.addEventListener('closeDialog', onNativeCloseDialog);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('closeDialog', onNativeCloseDialog));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDialogComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsDialogComponent, isStandalone: true, selector: "ks-dialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, persistent: { classPropertyName: "persistent", publicName: "persistent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksCloseDialog: "ksCloseDialog" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-dialog',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], persistent: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], ksCloseDialog: [{ type: i0.Output, args: ["ksCloseDialog"] }] } });
+
+// Side-effect import: registers the `ks-not-found` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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>`.
+ */
+class KsNotFoundComponent {
+    el;
+    /** Label shown on the redirect button (default: "Go to Home") */
+    buttonLabel = input('Go to Home', ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    /** href the button and auto-redirect navigate to (default: "./") */
+    homeHref = input('./', ...(ngDevMode ? [{ debugName: "homeHref" }] : /* istanbul ignore next */ []));
+    /** Seconds before auto-redirect fires. Set to `0` to disable the countdown. */
+    countdown = input(30, ...(ngDevMode ? [{ debugName: "countdown" }] : /* istanbul ignore next */ []));
+    showActionButtons = input(true, ...(ngDevMode ? [{ debugName: "showActionButtons" }] : /* istanbul ignore next */ []));
+    /** Custom heading (default: "404") */
+    code = input('404', ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
+    /** Custom sub-heading (default: "Page not found") */
+    message = input('Page not found', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Custom description below the heading */
+    description = input("The page you're looking for doesn't exist or has been moved.", ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Emitted just before the auto-redirect navigates away. From the native `redirecting` event. */
+    ksRedirecting = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.buttonLabel = this.buttonLabel()));
+        effect(() => (this.el.homeHref = this.homeHref()));
+        effect(() => (this.el.countdown = this.countdown()));
+        effect(() => (this.el.showActionButtons = this.showActionButtons()));
+        effect(() => (this.el.code = this.code()));
+        effect(() => (this.el.message = this.message()));
+        effect(() => (this.el.description = this.description()));
+        const onNativeRedirecting = () => this.ksRedirecting.emit();
+        this.el.addEventListener('redirecting', onNativeRedirecting);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('redirecting', onNativeRedirecting));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsNotFoundComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsNotFoundComponent, isStandalone: true, selector: "ks-not-found", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, homeHref: { classPropertyName: "homeHref", publicName: "homeHref", isSignal: true, isRequired: false, transformFunction: null }, countdown: { classPropertyName: "countdown", publicName: "countdown", isSignal: true, isRequired: false, transformFunction: null }, showActionButtons: { classPropertyName: "showActionButtons", publicName: "showActionButtons", isSignal: true, isRequired: false, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksRedirecting: "ksRedirecting" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsNotFoundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-not-found',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], homeHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeHref", required: false }] }], countdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "countdown", required: false }] }], showActionButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionButtons", required: false }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ksRedirecting: [{ type: i0.Output, args: ["ksRedirecting"] }] } });
+
+// Side-effect import: registers the `ks-sidebar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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`.
+ */
+class KsSidebarComponent {
+    el;
+    /** Which side the panel appears on */
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Behaviour type */
+    type = input('over', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Initial/controlled open state. Bind explicitly: `[open]="isOpen" (ksOpenChange)="isOpen = $event"`. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Width of the sidebar panel */
+    width = input('18rem', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Target element id (without #) or '' to use the page. */
+    target = input('', ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
+    /** Fires whenever `open` changes. From the native `openChange` event. */
+    ksOpenChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.position = this.position()));
+        effect(() => (this.el.type = this.type()));
+        effect(() => (this.el.open = this.open()));
+        effect(() => (this.el.width = this.width()));
+        effect(() => (this.el.target = this.target()));
+        const onNativeOpenChange = (event) => {
+            this.ksOpenChange.emit(event.detail);
+        };
+        this.el.addEventListener('openChange', onNativeOpenChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('openChange', onNativeOpenChange));
+    }
+    /** Passthrough to `<ks-sidebar>`'s own `@Method() openPanel()`. */
+    openPanel() {
+        return this.el.openPanel();
+    }
+    /** Passthrough to `<ks-sidebar>`'s own `@Method() close()`. */
+    close() {
+        return this.el.close();
+    }
+    /** Passthrough to `<ks-sidebar>`'s own `@Method() toggle()`. */
+    toggle() {
+        return this.el.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSidebarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsSidebarComponent, isStandalone: true, selector: "ks-sidebar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", ksOpenChange: "ksOpenChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-sidebar',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], ksOpenChange: [{ type: i0.Output, args: ["ksOpenChange"] }] } });
+
+// Side-effect import: registers the `ks-table` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-table>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+class KsTableComponent {
+    el;
+    /** Array of objects to render as table rows */
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Optional explicit column order; defaults to keys of the first row */
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Optional custom column header labels: { key: 'Display Label' } */
+    columnLabels = input({}, ...(ngDevMode ? [{ debugName: "columnLabels" }] : /* istanbul ignore next */ []));
+    /** Visual variant */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Row size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Show a caption / title above the table */
+    caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** Make the table horizontally scrollable on overflow */
+    scrollable = input(true, ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    /** Highlight row on hover */
+    hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
+    /** Emits the clicked row's data. From the native `rowClick` event. */
+    ksRowClick = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.data = this.data()));
+        effect(() => (this.el.columns = this.columns()));
+        effect(() => (this.el.columnLabels = this.columnLabels()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.caption = this.caption()));
+        effect(() => (this.el.scrollable = this.scrollable()));
+        effect(() => (this.el.hoverable = this.hoverable()));
+        const onNativeRowClick = (event) => {
+            this.ksRowClick.emit(event.detail);
+        };
+        this.el.addEventListener('rowClick', onNativeRowClick);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('rowClick', onNativeRowClick));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsTableComponent, isStandalone: true, selector: "ks-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnLabels: { classPropertyName: "columnLabels", publicName: "columnLabels", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksRowClick: "ksRowClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-table',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnLabels", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], ksRowClick: [{ type: i0.Output, args: ["ksRowClick"] }] } });
+
+// Side-effect import: registers the `ks-tooltip` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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>`.
+ */
+class KsTooltipComponent {
+    el;
+    /** Tooltip text */
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Preferred placement */
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Show tooltip on demand (true = always visible) — leave false for hover behaviour */
+    visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.text = this.text()));
+        effect(() => (this.el.position = this.position()));
+        effect(() => (this.el.visible = this.visible()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsTooltipComponent, isStandalone: true, selector: "ks-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-tooltip',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
+
+// Side-effect import: registers the `ks-accordion` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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>`
+ */
+class KsAccordionComponent {
+    el;
+    /** List of accordion panel definitions */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Allow multiple panels open simultaneously */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Keys that should be open by default */
+    openKeys = input([], ...(ngDevMode ? [{ debugName: "openKeys" }] : /* istanbul ignore next */ []));
+    /** Emits the key that was toggled. From the native `toggled` event. */
+    ksToggled = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.items = this.items()));
+        effect(() => (this.el.multi = this.multi()));
+        effect(() => (this.el.openKeys = this.openKeys()));
+        const onNativeToggled = (event) => {
+            this.ksToggled.emit(event.detail);
+        };
+        this.el.addEventListener('toggled', onNativeToggled);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('toggled', onNativeToggled));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsAccordionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsAccordionComponent, isStandalone: true, selector: "ks-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, openKeys: { classPropertyName: "openKeys", publicName: "openKeys", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksToggled: "ksToggled" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsAccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-accordion',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], openKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "openKeys", required: false }] }], ksToggled: [{ type: i0.Output, args: ["ksToggled"] }] } });
+
+// Side-effect import: registers the `ks-breadcrumb` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-breadcrumb>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+class KsBreadcrumbComponent {
+    el;
+    /** Ordered list of breadcrumb items */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Separator character or symbol */
+    separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.items = this.items()));
+        effect(() => (this.el.separator = this.separator()));
+        effect(() => (this.el.size = this.size()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsBreadcrumbComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsBreadcrumbComponent, isStandalone: true, selector: "ks-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-breadcrumb',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+// Side-effect import: registers the `ks-carousel` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-carousel>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+class KsCarouselComponent {
+    el;
+    /** Slides to display */
+    slides = input([], ...(ngDevMode ? [{ debugName: "slides" }] : /* istanbul ignore next */ []));
+    /** Auto-play interval in ms (0 = disabled) */
+    autoPlay = input(0, ...(ngDevMode ? [{ debugName: "autoPlay" }] : /* istanbul ignore next */ []));
+    /** Show prev/next arrow controls */
+    showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
+    /** Show dot indicators */
+    showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    /** Emits the current slide index on change. From the native `slideChange` event. */
+    ksSlideChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.slides = this.slides()));
+        effect(() => (this.el.autoPlay = this.autoPlay()));
+        effect(() => (this.el.showControls = this.showControls()));
+        effect(() => (this.el.showDots = this.showDots()));
+        const onNativeSlideChange = (event) => {
+            this.ksSlideChange.emit(event.detail);
+        };
+        this.el.addEventListener('slideChange', onNativeSlideChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('slideChange', onNativeSlideChange));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCarouselComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsCarouselComponent, isStandalone: true, selector: "ks-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksSlideChange: "ksSlideChange" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsCarouselComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-carousel',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], ksSlideChange: [{ type: i0.Output, args: ["ksSlideChange"] }] } });
+
+// Side-effect import: registers the `ks-context-menu` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsContextMenuComponent {
+    el;
+    /** Menu items */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Emits the clicked item key. From the native `itemClicked` event. */
+    ksItemClicked = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.items = this.items()));
+        const onNativeItemClicked = (event) => {
+            this.ksItemClicked.emit(event.detail);
+        };
+        this.el.addEventListener('itemClicked', onNativeItemClicked);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('itemClicked', onNativeItemClicked));
+    }
+    /** Passthrough to `<ks-context-menu>`'s own `@Method() open(pos)`. */
+    open(pos) {
+        return this.el.open(pos);
+    }
+    /** Passthrough to `<ks-context-menu>`'s own `@Method() close()`. */
+    close() {
+        return this.el.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsContextMenuComponent, isStandalone: true, selector: "ks-context-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksItemClicked: "ksItemClicked" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-context-menu',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ksItemClicked: [{ type: i0.Output, args: ["ksItemClicked"] }] } });
+
+// Side-effect import: registers the `ks-nav-bar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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`.
+ */
+class KsNavBarComponent {
+    el;
+    /** All nav items with their section assignment */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Expansion mode */
+    mode = input('iconOnly', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Width of the icon-only rail */
+    iconWidth = input('3.5rem', ...(ngDevMode ? [{ debugName: "iconWidth" }] : /* istanbul ignore next */ []));
+    /** Width of the expanded label panel */
+    expandedWidth = input('13rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.items = this.items()));
+        effect(() => (this.el.mode = this.mode()));
+        effect(() => (this.el.iconWidth = this.iconWidth()));
+        effect(() => (this.el.expandedWidth = this.expandedWidth()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsNavBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsNavBarComponent, isStandalone: true, selector: "ks-nav-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, iconWidth: { classPropertyName: "iconWidth", publicName: "iconWidth", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsNavBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-nav-bar',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], iconWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconWidth", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }] } });
+
+// Side-effect import: registers the `ks-pagination` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-pagination>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+class KsPaginationComponent {
+    el;
+    /** Total number of items */
+    total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /** Items per page */
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Current page (1-indexed) */
+    currentPage = input(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    /** Show page size selector */
+    showPageSize = input(false, ...(ngDevMode ? [{ debugName: "showPageSize" }] : /* istanbul ignore next */ []));
+    /** Available page sizes */
+    pageSizeOptions = input([10, 20, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    /** Show quick jumper */
+    showQuickJumper = input(false, ...(ngDevMode ? [{ debugName: "showQuickJumper" }] : /* istanbul ignore next */ []));
+    /** Maximum number of page buttons to show */
+    maxPageButtons = input(7, ...(ngDevMode ? [{ debugName: "maxPageButtons" }] : /* istanbul ignore next */ []));
+    /** Emits when page changes. From the native `pageChange` event. */
+    ksPageChange = output();
+    /** Emits when page size changes. From the native `pageSizeChange` event. */
+    ksPageSizeChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.total = this.total()));
+        effect(() => (this.el.pageSize = this.pageSize()));
+        effect(() => (this.el.currentPage = this.currentPage()));
+        effect(() => (this.el.showPageSize = this.showPageSize()));
+        effect(() => (this.el.pageSizeOptions = this.pageSizeOptions()));
+        effect(() => (this.el.showQuickJumper = this.showQuickJumper()));
+        effect(() => (this.el.maxPageButtons = this.maxPageButtons()));
+        const onNativePageChange = (event) => {
+            this.ksPageChange.emit(event.detail);
+        };
+        const onNativePageSizeChange = (event) => {
+            this.ksPageSizeChange.emit(event.detail);
+        };
+        this.el.addEventListener('pageChange', onNativePageChange);
+        this.el.addEventListener('pageSizeChange', onNativePageSizeChange);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('pageChange', onNativePageChange);
+            this.el.removeEventListener('pageSizeChange', onNativePageSizeChange);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsPaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsPaginationComponent, isStandalone: true, selector: "ks-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showQuickJumper: { classPropertyName: "showQuickJumper", publicName: "showQuickJumper", isSignal: true, isRequired: false, transformFunction: null }, maxPageButtons: { classPropertyName: "maxPageButtons", publicName: "maxPageButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksPageChange: "ksPageChange", ksPageSizeChange: "ksPageSizeChange" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsPaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-pagination',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showQuickJumper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickJumper", required: false }] }], maxPageButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPageButtons", required: false }] }], ksPageChange: [{ type: i0.Output, args: ["ksPageChange"] }], ksPageSizeChange: [{ type: i0.Output, args: ["ksPageSizeChange"] }] } });
+
+// Side-effect import: registers the `ks-stepper` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-stepper>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+class KsStepperComponent {
+    el;
+    /** Step definitions */
+    steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    /** Currently active step index (0-based) */
+    activeStep = input(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+    /** Layout orientation */
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Allow clicking steps to navigate */
+    clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    /** Marks completed steps */
+    completedSteps = input([], ...(ngDevMode ? [{ debugName: "completedSteps" }] : /* istanbul ignore next */ []));
+    /** Emits the new step index. From the native `stepChange` event. */
+    ksStepChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.steps = this.steps()));
+        effect(() => (this.el.activeStep = this.activeStep()));
+        effect(() => (this.el.orientation = this.orientation()));
+        effect(() => (this.el.clickable = this.clickable()));
+        effect(() => (this.el.completedSteps = this.completedSteps()));
+        const onNativeStepChange = (event) => {
+            this.ksStepChange.emit(event.detail);
+        };
+        this.el.addEventListener('stepChange', onNativeStepChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('stepChange', onNativeStepChange));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsStepperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsStepperComponent, isStandalone: true, selector: "ks-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, completedSteps: { classPropertyName: "completedSteps", publicName: "completedSteps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksStepChange: "ksStepChange" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsStepperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-stepper',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], completedSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "completedSteps", required: false }] }], ksStepChange: [{ type: i0.Output, args: ["ksStepChange"] }] } });
+
+// Side-effect import: registers the `ks-tab` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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>`
+ */
+class KsTabComponent {
+    el;
+    /** List of tab definitions */
+    tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** Key of the initially active tab */
+    activeKey = input('', ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    tabHeaderStyle = input('default', ...(ngDevMode ? [{ debugName: "tabHeaderStyle" }] : /* istanbul ignore next */ []));
+    /** Emits the key of the newly selected tab. From the native `tabChange` event. */
+    ksTabChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.tabs = this.tabs()));
+        effect(() => (this.el.activeKey = this.activeKey()));
+        effect(() => (this.el.tabHeaderStyle = this.tabHeaderStyle()));
+        const onNativeTabChange = (event) => {
+            this.ksTabChange.emit(event.detail);
+        };
+        this.el.addEventListener('tabChange', onNativeTabChange);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('tabChange', onNativeTabChange));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTabComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsTabComponent, isStandalone: true, selector: "ks-tab", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, tabHeaderStyle: { classPropertyName: "tabHeaderStyle", publicName: "tabHeaderStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksTabChange: "ksTabChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-tab',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], tabHeaderStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabHeaderStyle", required: false }] }], ksTabChange: [{ type: i0.Output, args: ["ksTabChange"] }] } });
+
+// Side-effect import: registers the `ks-toolbar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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`.
+ */
+class KsToolbarComponent {
+    el;
+    /** Toolbar items */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Emits the clicked item key. From the native `itemClicked` event. */
+    ksItemClicked = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.items = this.items()));
+        const onNativeItemClicked = (event) => {
+            this.ksItemClicked.emit(event.detail);
+        };
+        this.el.addEventListener('itemClicked', onNativeItemClicked);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('itemClicked', onNativeItemClicked));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsToolbarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsToolbarComponent, isStandalone: true, selector: "ks-toolbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksItemClicked: "ksItemClicked" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-toolbar',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], ksItemClicked: [{ type: i0.Output, args: ["ksItemClicked"] }] } });
+
+// Side-effect import: registers the `ks-top-nav-bar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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`.
+ */
+class KsTopNavBarComponent {
+    el;
+    /** Navigation items */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Visual style of the active indicator */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Show icon alongside label */
+    showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : /* istanbul ignore next */ []));
+    /** Show label text */
+    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    /** Aria label for the nav element */
+    label = input('Top navigation', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.items = this.items()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.showIcons = this.showIcons()));
+        effect(() => (this.el.showLabels = this.showLabels()));
+        effect(() => (this.el.label = this.label()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTopNavBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsTopNavBarComponent, isStandalone: true, selector: "ks-top-nav-bar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTopNavBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-top-nav-bar',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+// Side-effect import: registers the `ks-tree-view` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-tree-view>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+class KsTreeViewComponent {
+    el;
+    /** Tree data */
+    nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** Keys of nodes that start expanded */
+    expandedKeys = input([], ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+    /** Allow selecting multiple nodes */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    /** Emits key(s) when selection changes. From the native `selectionChanged` event. */
+    ksSelectionChanged = output();
+    /** Emits when a node is expanded/collapsed. From the native `expandChange` event. */
+    ksExpandChange = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.nodes = this.nodes()));
+        effect(() => (this.el.expandedKeys = this.expandedKeys()));
+        effect(() => (this.el.multi = this.multi()));
+        const onNativeSelectionChanged = (event) => {
+            this.ksSelectionChanged.emit(event.detail);
+        };
+        const onNativeExpandChange = (event) => {
+            this.ksExpandChange.emit(event.detail);
+        };
+        this.el.addEventListener('selectionChanged', onNativeSelectionChanged);
+        this.el.addEventListener('expandChange', onNativeExpandChange);
+        inject(DestroyRef).onDestroy(() => {
+            this.el.removeEventListener('selectionChanged', onNativeSelectionChanged);
+            this.el.removeEventListener('expandChange', onNativeExpandChange);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTreeViewComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsTreeViewComponent, isStandalone: true, selector: "ks-tree-view", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksSelectionChanged: "ksSelectionChanged", ksExpandChange: "ksExpandChange" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsTreeViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-tree-view',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], expandedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedKeys", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], ksSelectionChanged: [{ type: i0.Output, args: ["ksSelectionChanged"] }], ksExpandChange: [{ type: i0.Output, args: ["ksExpandChange"] }] } });
+
+// Side-effect import: registers the `ks-badge` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-badge>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+class KsBadgeComponent {
+    el;
+    /** Display text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Colour variant */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Show a dot instead of text */
+    dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
+    /** Pill (fully rounded) shape */
+    pill = input(true, ...(ngDevMode ? [{ debugName: "pill" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.label = this.label()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.dot = this.dot()));
+        effect(() => (this.el.pill = this.pill()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsBadgeComponent, isStandalone: true, selector: "ks-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsBadgeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-badge',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }] } });
+
+// Side-effect import: registers the `ks-loader` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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).
+ */
+class KsLoaderComponent {
+    el;
+    /** Current state */
+    state = input(LoaderStateEnum.Loading, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.state = this.state()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsLoaderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsLoaderComponent, isStandalone: true, selector: "ks-loader", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsLoaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-loader',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+
+// Side-effect import: registers the `ks-message` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsMessageComponent {
+    el;
+    /** Main message text */
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Optional icon class (e.g. Material Icon or Font Awesome) */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Colour variant */
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Show a dismiss (×) button */
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    /** Emits when the message is dismissed. From the native `dismissed` event. */
+    ksDismissed = output();
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.text = this.text()));
+        effect(() => (this.el.icon = this.icon()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.dismissible = this.dismissible()));
+        const onNativeDismissed = () => this.ksDismissed.emit();
+        this.el.addEventListener('dismissed', onNativeDismissed);
+        inject(DestroyRef).onDestroy(() => this.el.removeEventListener('dismissed', onNativeDismissed));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsMessageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsMessageComponent, isStandalone: true, selector: "ks-message", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ksDismissed: "ksDismissed" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsMessageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-message',
+                    standalone: true,
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], ksDismissed: [{ type: i0.Output, args: ["ksDismissed"] }] } });
+
+// Side-effect import: registers the `ks-progress` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-progress>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+class KsProgressComponent {
+    el;
+    /** Progress value (0-100) */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Maximum value */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Show percentage label */
+    showLabel = input(false, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /** Progress variant */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Progress size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Indeterminate/loading state */
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Optional label text */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.value = this.value()));
+        effect(() => (this.el.max = this.max()));
+        effect(() => (this.el.showLabel = this.showLabel()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.indeterminate = this.indeterminate()));
+        effect(() => (this.el.label = this.label()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsProgressComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsProgressComponent, isStandalone: true, selector: "ks-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsProgressComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-progress',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+// Side-effect import: registers the `ks-spinner` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * Angular wrapper around the `<ks-spinner>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+class KsSpinnerComponent {
+    el;
+    /** Spinner size */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Spinner variant/color */
+    variant = input('brand', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Optional text to display */
+    text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Center the spinner in container */
+    centered = input(false, ...(ngDevMode ? [{ debugName: "centered" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.size = this.size()));
+        effect(() => (this.el.variant = this.variant()));
+        effect(() => (this.el.text = this.text()));
+        effect(() => (this.el.centered = this.centered()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSpinnerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsSpinnerComponent, isStandalone: true, selector: "ks-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-spinner',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }] } });
+
+// Side-effect import: registers the `ks-toast-outlet` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+/**
+ * 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.
+ */
+class KsToastOutletComponent {
+    el;
+    /** Where on screen to stack toasts */
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    constructor(ref) {
+        this.el = ref.nativeElement;
+        effect(() => (this.el.position = this.position()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsToastOutletComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: KsToastOutletComponent, isStandalone: true, selector: "ks-toast-outlet", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KsToastOutletComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ks-toast-outlet',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+/**
+ * Public API surface of `@ks/wc-angular`.
+ */
+/* ================= Buttons ================= */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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, KsSidebarComponent, KsSliderComponent, KsSpinnerComponent, KsStepperComponent, KsSwitchComponent, KsTabComponent, KsTableComponent, KsTextareaComponent, KsThemeSwitchComponent, KsTimepickerComponent, KsToastOutletComponent, KsToolbarComponent, KsTooltipComponent, KsTopNavBarComponent, KsTreeViewComponent, KsUploaderComponent };
+//# sourceMappingURL=kraft.stitch-angular.mjs.map