@kraft.stitch/angular 0.0.2 → 0.0.4

package/src/lib/Navigation/stepper/stepper.ts

@@ -0,0 +1,77 @@
+// Side-effect import: registers the `ks-stepper` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-stepper.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsStepItem` / `KsStepperOrientation` exported by
+ * `core/src/components/Navigation/stepper/stepper.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsStepItem {
+  key: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  optional?: boolean;
+}
+
+export type KsStepperOrientation = 'horizontal' | 'vertical';
+
+/** DOM shape of the real `<ks-stepper>` custom element, typed for the wrapper. */
+type KsStepperElement = HTMLElement & {
+  steps: KsStepItem[];
+  activeStep: number;
+  orientation: KsStepperOrientation;
+  clickable: boolean;
+  completedSteps: number[];
+};
+
+/**
+ * Angular wrapper around the `<ks-stepper>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-stepper',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsStepperComponent {
+  private readonly el: KsStepperElement;
+
+  /** Step definitions */
+  readonly steps = input<KsStepItem[]>([]);
+
+  /** Currently active step index (0-based) */
+  readonly activeStep = input(0);
+
+  /** Layout orientation */
+  readonly orientation = input<KsStepperOrientation>('horizontal');
+
+  /** Allow clicking steps to navigate */
+  readonly clickable = input(false);
+
+  /** Marks completed steps */
+  readonly completedSteps = input<number[]>([]);
+
+  /** Emits the new step index. From the native `stepChange` event. */
+  readonly ksStepChange = output<number>();
+
+  constructor(ref: ElementRef<KsStepperElement>) {
+    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: Event): void => {
+      this.ksStepChange.emit((event as CustomEvent<number>).detail);
+    };
+    this.el.addEventListener('stepChange', onNativeStepChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('stepChange', onNativeStepChange));
+  }
+}

package/src/lib/Navigation/tab/tab.ts

@@ -0,0 +1,71 @@
+// Side-effect import: registers the `ks-tab` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-tab.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsTabItem` exported by
+ * `core/src/components/Navigation/tab/tab.tsx`. Duplicated locally — see
+ * the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsTabItem {
+  key: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+/** DOM shape of the real `<ks-tab>` custom element, typed for the wrapper. */
+type KsTabElement = HTMLElement & {
+  tabs: KsTabItem[];
+  activeKey: string;
+  tabHeaderStyle: 'default' | 'expanded' | 'card' | 'button';
+};
+
+/**
+ * Angular wrapper around the `<ks-tab>` Stencil custom element.
+ *
+ * Same `ksPanel="key"` → named-`<slot>` strategy as
+ * `Navigation/accordion/accordion.ts` (NOT the native `slot="..."`
+ * attribute) — see that file's doc comment for the full explanation.
+ * Usage:
+ *   `<ks-tab [tabs]="tabs" activeKey="tab1">
+ *      <div ksPanel="tab1">Tab 1 content</div>
+ *      <div ksPanel="tab2">Tab 2 content</div>
+ *    </ks-tab>`
+ */
+@Component({
+  selector: 'ks-tab',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTabComponent {
+  private readonly el: KsTabElement;
+
+  /** List of tab definitions */
+  readonly tabs = input<KsTabItem[]>([]);
+
+  /** Key of the initially active tab */
+  readonly activeKey = input('');
+
+  readonly tabHeaderStyle = input<'default' | 'expanded' | 'card' | 'button'>('default');
+
+  /** Emits the key of the newly selected tab. From the native `tabChange` event. */
+  readonly ksTabChange = output<string>();
+
+  constructor(ref: ElementRef<KsTabElement>) {
+    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: Event): void => {
+      this.ksTabChange.emit((event as CustomEvent<string>).detail);
+    };
+    this.el.addEventListener('tabChange', onNativeTabChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('tabChange', onNativeTabChange));
+  }
+}

package/src/lib/Navigation/toolbar/toolbar.ts

@@ -0,0 +1,60 @@
+// Side-effect import: registers the `ks-toolbar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-toolbar.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+import type { KsVariant } from '@kraft.stitch/core';
+
+/**
+ * Mirrors `KsToolbarItem` exported by
+ * `core/src/components/Navigation/toolbar/toolbar.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsToolbarItem {
+  key: string;
+  icon?: string;
+  label?: string;
+  divider?: boolean;
+  disabled?: boolean;
+  active?: boolean;
+  variant?: KsVariant;
+}
+
+/** DOM shape of the real `<ks-toolbar>` custom element, typed for the wrapper. */
+type KsToolbarElement = HTMLElement & {
+  items: KsToolbarItem[];
+};
+
+/**
+ * Angular wrapper around the `<ks-toolbar>` Stencil custom element.
+ * Renders a real, consumer-facing default `<slot />` for extra trailing
+ * content — same single unfiltered `<ng-content>` pass-through as
+ * `Layout/card/card.ts`.
+ */
+@Component({
+  selector: 'ks-toolbar',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsToolbarComponent {
+  private readonly el: KsToolbarElement;
+
+  /** Toolbar items */
+  readonly items = input<KsToolbarItem[]>([]);
+
+  /** Emits the clicked item key. From the native `itemClicked` event. */
+  readonly ksItemClicked = output<string>();
+
+  constructor(ref: ElementRef<KsToolbarElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.items = this.items()));
+
+    const onNativeItemClicked = (event: Event): void => {
+      this.ksItemClicked.emit((event as CustomEvent<string>).detail);
+    };
+    this.el.addEventListener('itemClicked', onNativeItemClicked);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('itemClicked', onNativeItemClicked));
+  }
+}

package/src/lib/Navigation/top-nav-bar/top-nav-bar.ts

@@ -0,0 +1,71 @@
+// Side-effect import: registers the `ks-top-nav-bar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-top-nav-bar.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+
+/**
+ * Mirrors the types exported by
+ * `core/src/components/Navigation/top-nav-bar/top-nav-bar.tsx`.
+ * Duplicated locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export type KsTopNavBarVariant = 'default' | 'underline' | 'pill';
+
+export interface KsTopNavBarItem {
+  key: string;
+  name: string;
+  iconClass?: string;
+  /** href to navigate to */
+  redirectLink: string;
+  activationFragment?: string;
+  disabled?: boolean;
+}
+
+/** DOM shape of the real `<ks-top-nav-bar>` custom element, typed for the wrapper. */
+type KsTopNavBarElement = HTMLElement & {
+  items: KsTopNavBarItem[];
+  variant: KsTopNavBarVariant;
+  showIcons: boolean;
+  showLabels: boolean;
+  label: string;
+};
+
+/**
+ * Angular wrapper around the `<ks-top-nav-bar>` Stencil custom element.
+ * Renders a real, consumer-facing default `<slot />` — same single
+ * unfiltered `<ng-content>` pass-through as `Layout/card/card.ts`.
+ */
+@Component({
+  selector: 'ks-top-nav-bar',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTopNavBarComponent {
+  private readonly el: KsTopNavBarElement;
+
+  /** Navigation items */
+  readonly items = input<KsTopNavBarItem[]>([]);
+
+  /** Visual style of the active indicator */
+  readonly variant = input<KsTopNavBarVariant>('default');
+
+  /** Show icon alongside label */
+  readonly showIcons = input(true);
+
+  /** Show label text */
+  readonly showLabels = input(true);
+
+  /** Aria label for the nav element */
+  readonly label = input('Top navigation');
+
+  constructor(ref: ElementRef<KsTopNavBarElement>) {
+    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()));
+  }
+}

package/src/lib/Navigation/tree-view/tree-view.ts

@@ -0,0 +1,75 @@
+// Side-effect import: registers the `ks-tree-view` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-tree-view.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsTreeNode` exported by
+ * `core/src/components/Navigation/tree-view/tree-view.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsTreeNode {
+  key: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  children?: KsTreeNode[];
+}
+
+/** DOM shape of the real `<ks-tree-view>` custom element, typed for the wrapper. */
+type KsTreeViewElement = HTMLElement & {
+  nodes: KsTreeNode[];
+  expandedKeys: string[];
+  multi: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-tree-view>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-tree-view',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTreeViewComponent {
+  private readonly el: KsTreeViewElement;
+
+  /** Tree data */
+  readonly nodes = input<KsTreeNode[]>([]);
+
+  /** Keys of nodes that start expanded */
+  readonly expandedKeys = input<string[]>([]);
+
+  /** Allow selecting multiple nodes */
+  readonly multi = input(false);
+
+  /** Emits key(s) when selection changes. From the native `selectionChanged` event. */
+  readonly ksSelectionChanged = output<string | string[]>();
+
+  /** Emits when a node is expanded/collapsed. From the native `expandChange` event. */
+  readonly ksExpandChange = output<{ key: string; expanded: boolean }>();
+
+  constructor(ref: ElementRef<KsTreeViewElement>) {
+    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: Event): void => {
+      this.ksSelectionChanged.emit((event as CustomEvent<string | string[]>).detail);
+    };
+    const onNativeExpandChange = (event: Event): void => {
+      this.ksExpandChange.emit((event as CustomEvent<{ key: string; expanded: boolean }>).detail);
+    };
+    this.el.addEventListener('selectionChanged', onNativeSelectionChanged);
+    this.el.addEventListener('expandChange', onNativeExpandChange);
+    inject(DestroyRef).onDestroy(() => {
+      this.el.removeEventListener('selectionChanged', onNativeSelectionChanged);
+      this.el.removeEventListener('expandChange', onNativeExpandChange);
+    });
+  }
+}

package/src/lib/Notification/badge/badge.ts

@@ -0,0 +1,55 @@
+// Side-effect import: registers the `ks-badge` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-badge.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseSize, KsBaseVariant } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-badge>` custom element, typed for the wrapper. */
+type KsBadgeElement = HTMLElement & {
+  label: string;
+  variant: KsBaseVariant;
+  size: KsBaseSize;
+  dot: boolean;
+  pill: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-badge>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-badge',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsBadgeComponent {
+  private readonly el: KsBadgeElement;
+
+  /** Display text */
+  readonly label = input('');
+
+  /** Colour variant */
+  readonly variant = input<KsBaseVariant>('brand');
+
+  /** Size */
+  readonly size = input<KsBaseSize>('md');
+
+  /** Show a dot instead of text */
+  readonly dot = input(false);
+
+  /** Pill (fully rounded) shape */
+  readonly pill = input(true);
+
+  constructor(ref: ElementRef<KsBadgeElement>) {
+    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()));
+  }
+}

package/src/lib/Notification/loader/loader.ts

@@ -0,0 +1,41 @@
+// Side-effect import: registers the `ks-loader` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-loader.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import { LoaderStateEnum } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-loader>` custom element, typed for the wrapper. */
+type KsLoaderElement = HTMLElement & {
+  state: LoaderStateEnum;
+};
+
+/**
+ * Angular wrapper around the `<ks-loader>` Stencil custom element.
+ *
+ * Renders real, consumer-facing named slots — `loading`, `empty`,
+ * `empty-action`, `error`, `error-action` — plus a default (unnamed)
+ * slot for the `Success` state. Same single unfiltered
+ * `<ng-content>` pass-through as `Layout/card/card.ts`: give each
+ * projected child its own native `slot="loading"` / `slot="empty"` /
+ * `slot="empty-action"` / `slot="error"` / `slot="error-action"`
+ * attribute (or none, for the default/success slot).
+ */
+@Component({
+  selector: 'ks-loader',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsLoaderComponent {
+  private readonly el: KsLoaderElement;
+
+  /** Current state */
+  readonly state = input<LoaderStateEnum>(LoaderStateEnum.Loading);
+
+  constructor(ref: ElementRef<KsLoaderElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.state = this.state()));
+  }
+}

package/src/lib/Notification/message/message.ts

@@ -0,0 +1,60 @@
+// Side-effect import: registers the `ks-message` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-message.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+import type { KsBaseVariant } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-message>` custom element, typed for the wrapper. */
+type KsMessageElement = HTMLElement & {
+  text: string;
+  icon: string;
+  variant: KsBaseVariant;
+  dismissible: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-message>` Stencil custom element.
+ *
+ * `<ks-message>` renders a default `<slot />` only as a fallback when
+ * `text` is empty — same single unfiltered `<ng-content>` pass-through as
+ * `Layout/card/card.ts`; omit `text` and project content instead if
+ * richer markup is needed.
+ */
+@Component({
+  selector: 'ks-message',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsMessageComponent {
+  private readonly el: KsMessageElement;
+
+  /** Main message text */
+  readonly text = input('');
+
+  /** Optional icon class (e.g. Material Icon or Font Awesome) */
+  readonly icon = input('');
+
+  /** Colour variant */
+  readonly variant = input<KsBaseVariant>('info');
+
+  /** Show a dismiss (×) button */
+  readonly dismissible = input(false);
+
+  /** Emits when the message is dismissed. From the native `dismissed` event. */
+  readonly ksDismissed = output<void>();
+
+  constructor(ref: ElementRef<KsMessageElement>) {
+    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 = (): void => this.ksDismissed.emit();
+    this.el.addEventListener('dismissed', onNativeDismissed);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('dismissed', onNativeDismissed));
+  }
+}

package/src/lib/Notification/progress/progress.ts

@@ -0,0 +1,65 @@
+// Side-effect import: registers the `ks-progress` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-progress.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseSize, KsBaseVariant } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-progress>` custom element, typed for the wrapper. */
+type KsProgressElement = HTMLElement & {
+  value: number;
+  max: number;
+  showLabel: boolean;
+  variant: KsBaseVariant;
+  size: KsBaseSize;
+  indeterminate: boolean;
+  label: string;
+};
+
+/**
+ * Angular wrapper around the `<ks-progress>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-progress',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsProgressComponent {
+  private readonly el: KsProgressElement;
+
+  /** Progress value (0-100) */
+  readonly value = input(0);
+
+  /** Maximum value */
+  readonly max = input(100);
+
+  /** Show percentage label */
+  readonly showLabel = input(false);
+
+  /** Progress variant */
+  readonly variant = input<KsBaseVariant>('brand');
+
+  /** Progress size */
+  readonly size = input<KsBaseSize>('md');
+
+  /** Indeterminate/loading state */
+  readonly indeterminate = input(false);
+
+  /** Optional label text */
+  readonly label = input('');
+
+  constructor(ref: ElementRef<KsProgressElement>) {
+    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()));
+  }
+}

package/src/lib/Notification/spinner/spinner.ts

@@ -0,0 +1,50 @@
+// Side-effect import: registers the `ks-spinner` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-spinner.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseVariant, KsSize } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-spinner>` custom element, typed for the wrapper. */
+type KsSpinnerElement = HTMLElement & {
+  size: KsSize;
+  variant: KsBaseVariant;
+  text: string;
+  centered: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-spinner>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-spinner',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsSpinnerComponent {
+  private readonly el: KsSpinnerElement;
+
+  /** Spinner size */
+  readonly size = input<KsSize>('md');
+
+  /** Spinner variant/color */
+  readonly variant = input<KsBaseVariant>('brand');
+
+  /** Optional text to display */
+  readonly text = input('');
+
+  /** Center the spinner in container */
+  readonly centered = input(false);
+
+  constructor(ref: ElementRef<KsSpinnerElement>) {
+    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()));
+  }
+}

package/src/lib/Notification/toast/toast.ts

@@ -0,0 +1,56 @@
+// Side-effect import: registers the `ks-toast-outlet` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-toast-outlet.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsToastPosition } from '@kraft.stitch/core';
+
+/**
+ * Re-exported so Angular consumers don't need a separate `@kraft.stitch/core`
+ * import for the imperative side of the toast system. `toastStore` is a
+ * plain module-level singleton (see `core/src/utils/ks-toast.store.ts`)
+ * — there's no DI/service wrapper needed; call
+ * `toastStore.show('Saved!', { variant: 'success' })` directly from any
+ * component or service, and any mounted `<ks-toast>` (`KsToastComponent`)
+ * on the page will pick it up via its internal subscription.
+ */
+export { toastStore } from '@kraft.stitch/core';
+export type { KsToast, KsToastPosition } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-toast-outlet>` custom element, typed for the wrapper. */
+type KsToastOutletElement = HTMLElement & {
+  position: KsToastPosition;
+};
+
+/**
+ * Angular wrapper around the `<ks-toast-outlet>` Stencil custom element.
+ * Named `KsToastOutletComponent` (matching the literal tag, not just
+ * `KsToastComponent`) for consistency with the React wrapper, which must
+ * avoid colliding with the re-exported `KsToast` *data* interface above
+ * (TypeScript disallows a value and a type export sharing one identifier
+ * from the same module) — see `react/src/components/Notification/toast/toast.tsx`.
+ * `<ks-toast-outlet position="top-right" />` is all a consumer needs; add
+ * one per screen corner they want to stack toasts in.
+ *
+ * No `<slot>`, no events — it purely subscribes to the shared
+ * `toastStore` singleton (re-exported above) and renders whatever's
+ * enqueued.
+ */
+@Component({
+  selector: 'ks-toast-outlet',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsToastOutletComponent {
+  private readonly el: KsToastOutletElement;
+
+  /** Where on screen to stack toasts */
+  readonly position = input<KsToastPosition>('top-right');
+
+  constructor(ref: ElementRef<KsToastOutletElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.position = this.position()));
+  }
+}