@kraft.stitch/angular 0.0.0-stage → 0.0.1

package/src/lib/Layout/card/card.ts

@@ -0,0 +1,88 @@
+// Side-effect import: registers the `ks-card` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-card.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/** Mirrors the inline union used by `core/src/components/Layout/card/card.tsx`. */
+export type KsCardVariant = 'default' | 'outlined' | 'elevated' | 'flat';
+
+/** DOM shape of the real `<ks-card>` custom element, typed for the wrapper. */
+type KsCardElement = HTMLElement & {
+  label: string;
+  cardTitle: string;
+  subtitle: string;
+  imageUrl: string;
+  imageAlt: string;
+  iconClass: string;
+  variant: KsCardVariant;
+};
+
+/**
+ * Angular wrapper around the `<ks-card>` Stencil custom element.
+ *
+ * ## Slots
+ * Unlike the Buttons/Calendars/Dropdowns wrappers, `<ks-card>` renders
+ * real, consumer-facing `<slot name="header" />`, `<slot />` (default) and
+ * `<slot name="footer" />` in its scoped (non-shadow) Stencil `render()`.
+ * `template: '<ng-content></ng-content>'` (a single unfiltered pass-through,
+ * not per-slot `<ng-content select="...">`) projects ALL of this Angular
+ * component's content as real light-DOM children of the `<ks-card>` host
+ * node; Stencil's own scoped-slot relocation logic (see `shadow: false,
+ * scoped: true` on the Stencil class) then places each child into the
+ * right native `<slot>` based on that child's own `slot="header"` /
+ * `slot="footer"` attribute — same as plain HTML, nothing Angular-specific
+ * needed beyond forwarding the projected content through untouched.
+ * Usage: `<ks-card><ks-header slot="header">…</ks-header>Body<ks-footer slot="footer">…</ks-footer></ks-card>`.
+ */
+@Component({
+  selector: 'ks-card',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsCardComponent {
+  private readonly el: KsCardElement;
+
+  /** Card title */
+  readonly label = input('');
+
+  /** Card title (Angular input name was `title`; aliased to avoid clashing with the native `title` attribute/tooltip). */
+  readonly cardTitle = input('');
+
+  /** Subtitle / subheading */
+  readonly subtitle = input('');
+
+  /** URL for header image */
+  readonly imageUrl = input('');
+
+  /** Alt text for image */
+  readonly imageAlt = input('');
+
+  /** SVG icon class */
+  readonly iconClass = input('');
+
+  /** Card visual variant */
+  readonly variant = input<KsCardVariant>('default');
+
+  /** Emits when clicked (only when clickable). From the native `cardClick` event. */
+  readonly ksCardClick = output<MouseEvent>();
+
+  constructor(ref: ElementRef<KsCardElement>) {
+    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: Event): void => {
+      this.ksCardClick.emit((event as CustomEvent<MouseEvent>).detail);
+    };
+    this.el.addEventListener('cardClick', onNativeCardClick);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('cardClick', onNativeCardClick));
+  }
+}

package/src/lib/Layout/code-view/code-view.ts

@@ -0,0 +1,77 @@
+// Side-effect import: registers the `ks-code-view` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-code-view.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+
+/** Mirrors the inline union used by `core/src/components/Layout/code-view/code-view.tsx`. */
+export type KsCodeViewLanguage = 'html' | 'css' | 'typescript' | 'javascript' | 'json' | 'bash' | 'text';
+
+/**
+ * Mirrors `ActionButtonsConfig` exported by
+ * `core/src/components/Layout/code-view/code-view.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface ActionButtonsConfig {
+  expand?: boolean;
+  code?: boolean;
+}
+
+/** DOM shape of the real `<ks-code-view>` custom element, typed for the wrapper. */
+type KsCodeViewElement = HTMLElement & {
+  code: string;
+  language: KsCodeViewLanguage;
+  label: string;
+  maxHeight: string;
+  showHeader: boolean;
+  collapsed: boolean;
+  actionButtonConfig: ActionButtonsConfig;
+};
+
+/**
+ * Angular wrapper around the `<ks-code-view>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-code-view',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsCodeViewComponent {
+  private readonly el: KsCodeViewElement;
+
+  /** The source code string to display */
+  readonly code = input('');
+
+  /** Language hint shown in the header badge */
+  readonly language = input<KsCodeViewLanguage>('html');
+
+  /** Optional title shown in the header */
+  readonly label = input('');
+
+  /** Max visible height before scroll kicks in (CSS value, e.g. '20rem') */
+  readonly maxHeight = input('24rem');
+
+  /** Show the header bar with language badge & copy button */
+  readonly showHeader = input(true);
+
+  /** Whether the code block is currently collapsed */
+  readonly collapsed = input(false);
+
+  /** Whether the code block is to show and hide buttons */
+  readonly actionButtonConfig = input<ActionButtonsConfig>({ expand: true, code: true });
+
+  constructor(ref: ElementRef<KsCodeViewElement>) {
+    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()));
+  }
+}

package/src/lib/Layout/dialog/dialog.ts

@@ -0,0 +1,80 @@
+// Side-effect import: registers the `ks-dialog` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-dialog.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/** Mirrors the inline union used by `core/src/components/Layout/dialog/dialog.tsx`. */
+export type KsDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+/** DOM shape of the real `<ks-dialog>` custom element, typed for the wrapper. */
+type KsDialogElement = HTMLElement & {
+  open: boolean;
+  label: string;
+  hideClose: boolean;
+  persistent: boolean;
+  size: KsDialogSize;
+  target: string;
+};
+
+/**
+ * Angular wrapper around the `<ks-dialog>` Stencil custom element.
+ *
+ * `open` is a plain input, not `ControlValueAccessor` — a dialog's open
+ * state isn't form data. For the same reason described throughout this
+ * repo, the output can't be named `openChange` (it would collide with the
+ * native `openChange`-style close event — see below), so bind explicitly:
+ * `[open]="isOpen" (ksCloseDialog)="isOpen = false"`.
+ *
+ * ## Slots
+ * `<ks-dialog>` renders real, consumer-facing `<slot />` (default) and
+ * `<slot name="footer" />`. Same single unfiltered `<ng-content>`
+ * pass-through as `Layout/card/card.ts` — see that file's doc comment for
+ * the full explanation of how native `slot="footer"` attributes on
+ * projected children route into the right Stencil `<slot>`.
+ */
+@Component({
+  selector: 'ks-dialog',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsDialogComponent {
+  private readonly el: KsDialogElement;
+
+  /** Whether the dialog is open */
+  readonly open = input(false);
+
+  /** Dialog title */
+  readonly label = input('');
+
+  /** Hide the built-in close (✕) button */
+  readonly hideClose = input(false);
+
+  /** Prevent closing by clicking the backdrop */
+  readonly persistent = input(false);
+
+  /** Panel size */
+  readonly size = input<KsDialogSize>('md');
+
+  /** Target element id (without #), or '' to use `<body>`. When set, the overlay covers only that element and the dialog is centred inside it. */
+  readonly target = input('');
+
+  /** Emits when the dialog requests close. From the native `closeDialog` event. */
+  readonly ksCloseDialog = output<void>();
+
+  constructor(ref: ElementRef<KsDialogElement>) {
+    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 = (): void => this.ksCloseDialog.emit();
+    this.el.addEventListener('closeDialog', onNativeCloseDialog);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('closeDialog', onNativeCloseDialog));
+  }
+}

package/src/lib/Layout/not-found/not-found.ts

@@ -0,0 +1,73 @@
+// Side-effect import: registers the `ks-not-found` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-not-found.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/** DOM shape of the real `<ks-not-found>` custom element, typed for the wrapper. */
+type KsNotFoundElement = HTMLElement & {
+  buttonLabel: string;
+  homeHref: string;
+  countdown: number;
+  showActionButtons: boolean;
+  code: string;
+  message: string;
+  description: string;
+};
+
+/**
+ * Angular wrapper around the `<ks-not-found>` Stencil custom element.
+ *
+ * `<ks-not-found>` renders a real, consumer-facing default `<slot />`.
+ * Same single unfiltered `<ng-content>` pass-through as
+ * `Layout/card/card.ts` — see that file's doc comment for the full
+ * explanation of how projected content routes into the Stencil `<slot>`.
+ */
+@Component({
+  selector: 'ks-not-found',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsNotFoundComponent {
+  private readonly el: KsNotFoundElement;
+
+  /** Label shown on the redirect button (default: "Go to Home") */
+  readonly buttonLabel = input('Go to Home');
+
+  /** href the button and auto-redirect navigate to (default: "./") */
+  readonly homeHref = input('./');
+
+  /** Seconds before auto-redirect fires. Set to `0` to disable the countdown. */
+  readonly countdown = input(30);
+
+  readonly showActionButtons = input(true);
+
+  /** Custom heading (default: "404") */
+  readonly code = input('404');
+
+  /** Custom sub-heading (default: "Page not found") */
+  readonly message = input('Page not found');
+
+  /** Custom description below the heading */
+  readonly description = input("The page you're looking for doesn't exist or has been moved.");
+
+  /** Emitted just before the auto-redirect navigates away. From the native `redirecting` event. */
+  readonly ksRedirecting = output<void>();
+
+  constructor(ref: ElementRef<KsNotFoundElement>) {
+    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 = (): void => this.ksRedirecting.emit();
+    this.el.addEventListener('redirecting', onNativeRedirecting);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('redirecting', onNativeRedirecting));
+  }
+}

package/src/lib/Layout/sidebar/sidebar.ts

@@ -0,0 +1,97 @@
+// Side-effect import: registers the `ks-sidebar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-sidebar.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, model, output } from '@angular/core';
+
+export type KsSidebarPosition = 'left' | 'right';
+export type KsSidebarType = 'over' | 'push';
+
+/** DOM shape of the real `<ks-sidebar>` custom element, typed for the wrapper. */
+type KsSidebarElement = HTMLElement & {
+  position: KsSidebarPosition;
+  type: KsSidebarType;
+  open: boolean;
+  width: string;
+  target: string;
+  openPanel(): Promise<void>;
+  close(): Promise<void>;
+  toggle(): Promise<void>;
+};
+
+/**
+ * Angular wrapper around the `<ks-sidebar>` Stencil custom element.
+ *
+ * `open` is a plain input/output pair, not `ControlValueAccessor` — panel
+ * open state isn't form data. The native event is literally `openChange`,
+ * so (per the double-fire rule in `Buttons/button.ts`) the Angular output
+ * can't reuse that name; bind explicitly instead:
+ * `[open]="isOpen" (ksOpenChange)="isOpen = $event"`.
+ *
+ * `<ks-sidebar>`'s own `@Method()`s (`openPanel`/`close`/`toggle`) are
+ * exposed here as real passthrough methods — grab the component instance
+ * with `@ViewChild(KsSidebarComponent)` and call them directly.
+ *
+ * ## Slots
+ * Renders real `<slot name="header" />`, `<slot />` (default) and
+ * `<slot name="footer" />`. Same single unfiltered `<ng-content>`
+ * pass-through as `Layout/card/card.ts`.
+ */
+@Component({
+  selector: 'ks-sidebar',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsSidebarComponent {
+  private readonly el: KsSidebarElement;
+
+  /** Which side the panel appears on */
+  readonly position = input<KsSidebarPosition>('left');
+
+  /** Behaviour type */
+  readonly type = input<KsSidebarType>('over');
+
+  /** Initial/controlled open state. Bind explicitly: `[open]="isOpen" (ksOpenChange)="isOpen = $event"`. */
+  readonly open = model(false);
+
+  /** Width of the sidebar panel */
+  readonly width = input('18rem');
+
+  /** Target element id (without #) or '' to use the page. */
+  readonly target = input('');
+
+  /** Fires whenever `open` changes. From the native `openChange` event. */
+  readonly ksOpenChange = output<boolean>();
+
+  constructor(ref: ElementRef<KsSidebarElement>) {
+    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: Event): void => {
+      this.ksOpenChange.emit((event as CustomEvent<boolean>).detail);
+    };
+    this.el.addEventListener('openChange', onNativeOpenChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('openChange', onNativeOpenChange));
+  }
+
+  /** Passthrough to `<ks-sidebar>`'s own `@Method() openPanel()`. */
+  openPanel(): Promise<void> {
+    return this.el.openPanel();
+  }
+
+  /** Passthrough to `<ks-sidebar>`'s own `@Method() close()`. */
+  close(): Promise<void> {
+    return this.el.close();
+  }
+
+  /** Passthrough to `<ks-sidebar>`'s own `@Method() toggle()`. */
+  toggle(): Promise<void> {
+    return this.el.toggle();
+  }
+}

package/src/lib/Layout/table/table.ts

@@ -0,0 +1,81 @@
+// Side-effect import: registers the `ks-table` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-table.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/** Mirrors the inline unions used by `core/src/components/Layout/table/table.tsx`. */
+export type KsTableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+export type KsTableSize = 'sm' | 'md' | 'lg';
+
+/** DOM shape of the real `<ks-table>` custom element, typed for the wrapper. */
+type KsTableElement = HTMLElement & {
+  data: Record<string, unknown>[];
+  columns: string[];
+  columnLabels: Record<string, string>;
+  variant: KsTableVariant;
+  size: KsTableSize;
+  caption: string;
+  scrollable: boolean;
+  hoverable: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-table>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-table',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTableComponent {
+  private readonly el: KsTableElement;
+
+  /** Array of objects to render as table rows */
+  readonly data = input<Record<string, unknown>[]>([]);
+
+  /** Optional explicit column order; defaults to keys of the first row */
+  readonly columns = input<string[]>([]);
+
+  /** Optional custom column header labels: { key: 'Display Label' } */
+  readonly columnLabels = input<Record<string, string>>({});
+
+  /** Visual variant */
+  readonly variant = input<KsTableVariant>('default');
+
+  /** Row size */
+  readonly size = input<KsTableSize>('md');
+
+  /** Show a caption / title above the table */
+  readonly caption = input('');
+
+  /** Make the table horizontally scrollable on overflow */
+  readonly scrollable = input(true);
+
+  /** Highlight row on hover */
+  readonly hoverable = input(true);
+
+  /** Emits the clicked row's data. From the native `rowClick` event. */
+  readonly ksRowClick = output<Record<string, unknown>>();
+
+  constructor(ref: ElementRef<KsTableElement>) {
+    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: Event): void => {
+      this.ksRowClick.emit((event as CustomEvent<Record<string, unknown>>).detail);
+    };
+    this.el.addEventListener('rowClick', onNativeRowClick);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('rowClick', onNativeRowClick));
+  }
+}

package/src/lib/Layout/tooltip/tooltip.ts

@@ -0,0 +1,48 @@
+// Side-effect import: registers the `ks-tooltip` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-tooltip.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsPosition } from '@kraft.stitch/core';
+
+/** DOM shape of the real `<ks-tooltip>` custom element, typed for the wrapper. */
+type KsTooltipElement = HTMLElement & {
+  text: string;
+  position: KsPosition;
+  visible: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-tooltip>` Stencil custom element.
+ *
+ * `<ks-tooltip>` renders a real, consumer-facing default `<slot />` for
+ * the element the tooltip is attached to. Same single unfiltered
+ * `<ng-content>` pass-through as `Layout/card/card.ts` — wrap the
+ * trigger element as `<ks-tooltip text="Hi"><button>Hover me</button></ks-tooltip>`.
+ */
+@Component({
+  selector: 'ks-tooltip',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsTooltipComponent {
+  private readonly el: KsTooltipElement;
+
+  /** Tooltip text */
+  readonly text = input('');
+
+  /** Preferred placement */
+  readonly position = input<KsPosition>('top');
+
+  /** Show tooltip on demand (true = always visible) — leave false for hover behaviour */
+  readonly visible = input(false);
+
+  constructor(ref: ElementRef<KsTooltipElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.text = this.text()));
+    effect(() => (this.el.position = this.position()));
+    effect(() => (this.el.visible = this.visible()));
+  }
+}

package/src/lib/Navigation/accordion/accordion.ts

@@ -0,0 +1,80 @@
+// Side-effect import: registers the `ks-accordion` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-accordion.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsAccordionItem` exported by
+ * `core/src/components/Navigation/accordion/accordion.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsAccordionItem {
+  key: string;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+/** DOM shape of the real `<ks-accordion>` custom element, typed for the wrapper. */
+type KsAccordionElement = HTMLElement & {
+  items: KsAccordionItem[];
+  multi: boolean;
+  openKeys: string[];
+};
+
+/**
+ * Angular wrapper around the `<ks-accordion>` Stencil custom element.
+ *
+ * ## Panel content — `ksPanel`, NOT a native `slot` attribute
+ * The Stencil source maps each light-DOM child carrying a `ksPanel="key"`
+ * attribute to a matching named `<slot>` internally (see
+ * `core/src/utils/ks-slots.util.ts`'s `getKsPanelMap()`) — it does NOT use
+ * the browser-native `slot="..."` attribute consumers would use for
+ * `Layout/card/card.ts`-style components. `template: '<ng-content></ng-content>'`
+ * still applies the same way: it's a single, unfiltered pass-through of
+ * whatever this Angular component's own template projects, as real
+ * light-DOM children of the `<ks-accordion>` host — the wrapper does no
+ * filtering itself, it just needs to exist so the projected content
+ * becomes real children for Stencil's `getKsPanelMap()` scan to find.
+ * Usage:
+ *   `<ks-accordion [items]="items">
+ *      <div ksPanel="profile">Profile body…</div>
+ *      <div ksPanel="settings">Settings body…</div>
+ *    </ks-accordion>`
+ */
+@Component({
+  selector: 'ks-accordion',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsAccordionComponent {
+  private readonly el: KsAccordionElement;
+
+  /** List of accordion panel definitions */
+  readonly items = input<KsAccordionItem[]>([]);
+
+  /** Allow multiple panels open simultaneously */
+  readonly multi = input(false);
+
+  /** Keys that should be open by default */
+  readonly openKeys = input<string[]>([]);
+
+  /** Emits the key that was toggled. From the native `toggled` event. */
+  readonly ksToggled = output<string>();
+
+  constructor(ref: ElementRef<KsAccordionElement>) {
+    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: Event): void => {
+      this.ksToggled.emit((event as CustomEvent<string>).detail);
+    };
+    this.el.addEventListener('toggled', onNativeToggled);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('toggled', onNativeToggled));
+  }
+}