@kraft.stitch/angular 0.0.0-stage → 0.0.1

package/src/lib/Navigation/breadcrumb/breadcrumb.ts

@@ -0,0 +1,58 @@
+// Side-effect import: registers the `ks-breadcrumb` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-breadcrumb.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+import type { KsBaseSize } from '@kraft.stitch/core';
+
+/**
+ * Mirrors `KsBreadcrumbItem` exported by
+ * `core/src/components/Navigation/breadcrumb/breadcrumb.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsBreadcrumbItem {
+  label: string;
+  /** Route path or href — omit for the active (last) item */
+  href?: string;
+  /** Optional icon class */
+  icon?: string;
+}
+
+/** DOM shape of the real `<ks-breadcrumb>` custom element, typed for the wrapper. */
+type KsBreadcrumbElement = HTMLElement & {
+  items: KsBreadcrumbItem[];
+  separator: string;
+  size: KsBaseSize;
+};
+
+/**
+ * Angular wrapper around the `<ks-breadcrumb>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>` in the wrapped Stencil
+ * render, plain inputs only.
+ */
+@Component({
+  selector: 'ks-breadcrumb',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsBreadcrumbComponent {
+  private readonly el: KsBreadcrumbElement;
+
+  /** Ordered list of breadcrumb items */
+  readonly items = input<KsBreadcrumbItem[]>([]);
+
+  /** Separator character or symbol */
+  readonly separator = input('/');
+
+  /** Size */
+  readonly size = input<KsBaseSize>('lg');
+
+  constructor(ref: ElementRef<KsBreadcrumbElement>) {
+    this.el = ref.nativeElement;
+
+    effect(() => (this.el.items = this.items()));
+    effect(() => (this.el.separator = this.separator()));
+    effect(() => (this.el.size = this.size()));
+  }
+}

package/src/lib/Navigation/carousel/carousel.ts

@@ -0,0 +1,70 @@
+// Side-effect import: registers the `ks-carousel` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-carousel.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsCarouselSlide` exported by
+ * `core/src/components/Navigation/carousel/carousel.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsCarouselSlide {
+  key: string;
+  imageUrl?: string;
+  alt?: string;
+  label?: string;
+  caption?: string;
+}
+
+/** DOM shape of the real `<ks-carousel>` custom element, typed for the wrapper. */
+type KsCarouselElement = HTMLElement & {
+  slides: KsCarouselSlide[];
+  autoPlay: number;
+  showControls: boolean;
+  showDots: boolean;
+};
+
+/**
+ * Angular wrapper around the `<ks-carousel>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-carousel',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsCarouselComponent {
+  private readonly el: KsCarouselElement;
+
+  /** Slides to display */
+  readonly slides = input<KsCarouselSlide[]>([]);
+
+  /** Auto-play interval in ms (0 = disabled) */
+  readonly autoPlay = input(0);
+
+  /** Show prev/next arrow controls */
+  readonly showControls = input(true);
+
+  /** Show dot indicators */
+  readonly showDots = input(true);
+
+  /** Emits the current slide index on change. From the native `slideChange` event. */
+  readonly ksSlideChange = output<number>();
+
+  constructor(ref: ElementRef<KsCarouselElement>) {
+    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: Event): void => {
+      this.ksSlideChange.emit((event as CustomEvent<number>).detail);
+    };
+    this.el.addEventListener('slideChange', onNativeSlideChange);
+    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('slideChange', onNativeSlideChange));
+  }
+}

package/src/lib/Navigation/context-menu/context-menu.ts

@@ -0,0 +1,79 @@
+// Side-effect import: registers the `ks-context-menu` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-context-menu.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/**
+ * Mirrors `KsContextMenuItem` / `KsContextMenuPosition` exported by
+ * `core/src/components/Navigation/context-menu/context-menu.tsx`.
+ * Duplicated locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsContextMenuItem {
+  key: string;
+  label?: string;
+  icon?: string;
+  divider?: boolean;
+  disabled?: boolean;
+  danger?: boolean;
+}
+
+export interface KsContextMenuPosition {
+  x: number;
+  y: number;
+}
+
+/** DOM shape of the real `<ks-context-menu>` custom element, typed for the wrapper. */
+type KsContextMenuElement = HTMLElement & {
+  items: KsContextMenuItem[];
+  open(pos: KsContextMenuPosition): Promise<void>;
+  close(): Promise<void>;
+};
+
+/**
+ * Angular wrapper around the `<ks-context-menu>` Stencil custom element.
+ *
+ * `<ks-context-menu>`'s own `@Method()`s (`open(pos)`/`close()`) are
+ * exposed here as real passthrough methods — grab the component instance
+ * with `@ViewChild(KsContextMenuComponent)` and call them directly, e.g.
+ * `onContextMenu(e: MouseEvent) { menu.open({ x: e.clientX, y: e.clientY }); }`.
+ *
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-context-menu',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsContextMenuComponent {
+  private readonly el: KsContextMenuElement;
+
+  /** Menu items */
+  readonly items = input<KsContextMenuItem[]>([]);
+
+  /** Emits the clicked item key. From the native `itemClicked` event. */
+  readonly ksItemClicked = output<string>();
+
+  constructor(ref: ElementRef<KsContextMenuElement>) {
+    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));
+  }
+
+  /** Passthrough to `<ks-context-menu>`'s own `@Method() open(pos)`. */
+  open(pos: KsContextMenuPosition): Promise<void> {
+    return this.el.open(pos);
+  }
+
+  /** Passthrough to `<ks-context-menu>`'s own `@Method() close()`. */
+  close(): Promise<void> {
+    return this.el.close();
+  }
+}

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

@@ -0,0 +1,72 @@
+// Side-effect import: registers the `ks-nav-bar` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-nav-bar.js';
+
+import { ChangeDetectionStrategy, Component, ElementRef, effect, input } from '@angular/core';
+
+/**
+ * Mirrors the types exported by
+ * `core/src/components/Navigation/nav-bar/nav-bar.tsx`. Duplicated
+ * locally — see the note in `Buttons/button-group/button-group.ts` for why.
+ */
+export interface KsNavBarItem {
+  key: string;
+  name: string;
+  iconClass: string;
+  /** href to navigate to */
+  redirectLink: string;
+  activationFragment?: string;
+  disabled?: boolean;
+}
+
+export type KsNavBarSection = 'top' | 'mid' | 'bottom';
+
+export interface KsNavBarSectionItem extends KsNavBarItem {
+  section: KsNavBarSection;
+}
+
+export type KsNavBarMode = 'iconOnly' | 'hoverToExpand' | 'alwaysOpen';
+
+/** DOM shape of the real `<ks-nav-bar>` custom element, typed for the wrapper. */
+type KsNavBarElement = HTMLElement & {
+  items: KsNavBarSectionItem[];
+  mode: KsNavBarMode;
+  iconWidth: string;
+  expandedWidth: string;
+};
+
+/**
+ * Angular wrapper around the `<ks-nav-bar>` Stencil custom element.
+ * Renders a real, consumer-facing default `<slot />` — same single
+ * unfiltered `<ng-content>` pass-through as `Layout/card/card.ts`.
+ */
+@Component({
+  selector: 'ks-nav-bar',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsNavBarComponent {
+  private readonly el: KsNavBarElement;
+
+  /** All nav items with their section assignment */
+  readonly items = input<KsNavBarSectionItem[]>([]);
+
+  /** Expansion mode */
+  readonly mode = input<KsNavBarMode>('iconOnly');
+
+  /** Width of the icon-only rail */
+  readonly iconWidth = input('3.5rem');
+
+  /** Width of the expanded label panel */
+  readonly expandedWidth = input('13rem');
+
+  constructor(ref: ElementRef<KsNavBarElement>) {
+    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()));
+  }
+}

package/src/lib/Navigation/pagination/pagination.ts

@@ -0,0 +1,82 @@
+// Side-effect import: registers the `ks-pagination` tag — see
+// `Buttons/button/button.ts` for the full explanation of this pattern.
+import '@kraft.stitch/core/dist/components/ks-pagination.js';
+
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
+
+/** DOM shape of the real `<ks-pagination>` custom element, typed for the wrapper. */
+type KsPaginationElement = HTMLElement & {
+  total: number;
+  pageSize: number;
+  currentPage: number;
+  showPageSize: boolean;
+  pageSizeOptions: number[];
+  showQuickJumper: boolean;
+  maxPageButtons: number;
+};
+
+/**
+ * Angular wrapper around the `<ks-pagination>` Stencil custom element.
+ * No `<slot>` in the wrapped Stencil render — data-driven only.
+ */
+@Component({
+  selector: 'ks-pagination',
+  standalone: true,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KsPaginationComponent {
+  private readonly el: KsPaginationElement;
+
+  /** Total number of items */
+  readonly total = input(0);
+
+  /** Items per page */
+  readonly pageSize = input(10);
+
+  /** Current page (1-indexed) */
+  readonly currentPage = input(1);
+
+  /** Show page size selector */
+  readonly showPageSize = input(false);
+
+  /** Available page sizes */
+  readonly pageSizeOptions = input<number[]>([10, 20, 50, 100]);
+
+  /** Show quick jumper */
+  readonly showQuickJumper = input(false);
+
+  /** Maximum number of page buttons to show */
+  readonly maxPageButtons = input(7);
+
+  /** Emits when page changes. From the native `pageChange` event. */
+  readonly ksPageChange = output<number>();
+
+  /** Emits when page size changes. From the native `pageSizeChange` event. */
+  readonly ksPageSizeChange = output<number>();
+
+  constructor(ref: ElementRef<KsPaginationElement>) {
+    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: Event): void => {
+      this.ksPageChange.emit((event as CustomEvent<number>).detail);
+    };
+    const onNativePageSizeChange = (event: Event): void => {
+      this.ksPageSizeChange.emit((event as CustomEvent<number>).detail);
+    };
+    this.el.addEventListener('pageChange', onNativePageChange);
+    this.el.addEventListener('pageSizeChange', onNativePageSizeChange);
+    inject(DestroyRef).onDestroy(() => {
+      this.el.removeEventListener('pageChange', onNativePageChange);
+      this.el.removeEventListener('pageSizeChange', onNativePageSizeChange);
+    });
+  }
+}

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()));
+  }
+}