@kraft.stitch/angular 0.0.1 → 0.0.2

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

@@ -1,77 +0,0 @@
-// 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

@@ -1,71 +0,0 @@
-// 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

@@ -1,60 +0,0 @@
-// 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

@@ -1,71 +0,0 @@
-// 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

@@ -1,75 +0,0 @@
-// 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

@@ -1,55 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-// 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

@@ -1,60 +0,0 @@
-// 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

@@ -1,65 +0,0 @@
-// 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

@@ -1,50 +0,0 @@
-// 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

@@ -1,56 +0,0 @@
-// 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()));
-  }
-}