@kraft.stitch/angular 0.0.1 → 0.0.3

package/src/lib/Calendars/daterange/daterange.ts

@@ -1,112 +0,0 @@
-// Side-effect import: registers the `ks-daterange` tag — see
-// `button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-daterange.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Mirrors `KsDateRange` / `KsPresetRange` exported by
- * `core/src/components/Calendars/daterange/daterange.types.ts`. Duplicated
- * locally — see the note in `button-group/button-group.ts` for why.
- */
-export interface KsDateRange {
-  start: Date | null;
-  end: Date | null;
-}
-
-export interface KsPresetRange {
-  label: string;
-  range: () => KsDateRange;
-}
-
-/** DOM shape of the real `<ks-daterange>` custom element, typed for the wrapper. */
-type KsDaterangeElement = HTMLElement & {
-  label: string;
-  placeholder: string;
-  minDate: Date | null;
-  maxDate: Date | null;
-  presets: KsPresetRange[];
-  showPresets: boolean;
-  disabled: boolean;
-  range: KsDateRange;
-  writeValue(val: KsDateRange | null): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-daterange>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `chips/chips.ts` for the full rationale (the
- * native `rangeChange` event can't be reused verbatim as an Angular output
- * name without a double-fire risk).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[range]="r" (ksRangeChange)="r = $event"`.
- *
- * `template: ''` — no slot is exposed on `<ks-daterange>` itself.
- */
-@Component({
-  selector: 'ks-daterange',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDaterangeComponent, multi: true }],
-})
-export class KsDaterangeComponent implements ControlValueAccessor {
-  private readonly el: KsDaterangeElement;
-  private onChange: (value: KsDateRange) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  readonly label = input('');
-  readonly placeholder = input('Select date range…');
-  readonly minDate = input<Date | null>(null);
-  readonly maxDate = input<Date | null>(null);
-  readonly presets = input<KsPresetRange[]>([]);
-  readonly showPresets = input(true);
-  readonly disabled = input(false);
-
-  /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
-  readonly range = input<KsDateRange>({ start: null, end: null });
-
-  /** Emits the newly-picked range. From the native `rangeChange` event. */
-  readonly ksRangeChange = output<KsDateRange>();
-
-  constructor(ref: ElementRef<KsDaterangeElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.placeholder = this.placeholder()));
-    effect(() => (this.el.minDate = this.minDate()));
-    effect(() => (this.el.maxDate = this.maxDate()));
-    effect(() => (this.el.presets = this.presets()));
-    effect(() => (this.el.showPresets = this.showPresets()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => void this.el.writeValue(this.range()));
-
-    const onNativeRangeChange = (event: Event): void => {
-      const detail = (event as CustomEvent<KsDateRange>).detail;
-      this.ksRangeChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('rangeChange', onNativeRangeChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('rangeChange', onNativeRangeChange));
-  }
-
-  writeValue(value: KsDateRange | null): void {
-    void this.el.writeValue(value ?? { start: null, end: null });
-  }
-
-  registerOnChange(fn: (value: KsDateRange) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Calendars/timepicker/timepicker.ts

@@ -1,117 +0,0 @@
-// Side-effect import: registers the `ks-timepicker` tag — see
-// `button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-timepicker.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, model, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Mirrors `KsTimeValue` exported by
- * `core/src/components/Calendars/timepicker/timepicker.tsx`. Duplicated
- * locally — see the note in `button-group/button-group.ts` for why.
- */
-export interface KsTimeValue {
-  hours: number;
-  minutes: number;
-  seconds?: number;
-  period?: 'AM' | 'PM';
-}
-
-/** DOM shape of the real `<ks-timepicker>` custom element, typed for the wrapper. */
-type KsTimepickerElement = HTMLElement & {
-  label: string;
-  placeholder: string;
-  use12Hour: boolean;
-  showSeconds: boolean;
-  disabled: boolean;
-  error: string;
-  value: KsTimeValue | null;
-  writeValue(val: KsTimeValue | null): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-timepicker>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `chips/chips.ts` for the full rationale (the
- * native `valueChange` event can't be reused verbatim as an Angular output
- * name without a double-fire risk).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="t" (ksValueChange)="t = $event"`.
- *
- * `template: ''` — no slot is exposed on `<ks-timepicker>` itself.
- */
-@Component({
-  selector: 'ks-timepicker',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsTimepickerComponent, multi: true }],
-})
-export class KsTimepickerComponent implements ControlValueAccessor {
-  private readonly el: KsTimepickerElement;
-  private onChange: (value: KsTimeValue) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Placeholder */
-  readonly placeholder = input('Select time…');
-
-  /** Use 12-hour clock (AM/PM) */
-  readonly use12Hour = input(false);
-
-  /** Show seconds */
-  readonly showSeconds = input(false);
-
-  /** Disabled */
-  readonly disabled = input(false);
-
-  /** Error message */
-  readonly error = input('');
-
-  /** Initial/controlled value for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
-  readonly value = model<KsTimeValue | null>(null);
-
-  /** Emits the confirmed time. From the native `valueChange` event. */
-  readonly ksValueChange = output<KsTimeValue>();
-
-  constructor(ref: ElementRef<KsTimepickerElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.placeholder = this.placeholder()));
-    effect(() => (this.el.use12Hour = this.use12Hour()));
-    effect(() => (this.el.showSeconds = this.showSeconds()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => (this.el.error = this.error()));
-    effect(() => void this.el.writeValue(this.value()));
-
-    const onNativeValueChange = (event: Event): void => {
-      const detail = (event as CustomEvent<KsTimeValue>).detail;
-      this.ksValueChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('valueChange', onNativeValueChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
-  }
-
-  writeValue(value: KsTimeValue | null): void {
-    void this.el.writeValue(value ?? null);
-  }
-
-  registerOnChange(fn: (value: KsTimeValue) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Dropdowns/dropdown/dropdown.ts

@@ -1,121 +0,0 @@
-// Side-effect import: registers the `ks-dropdown` tag — see
-// `button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-dropdown.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Mirrors `KsDropdownOption` exported by
- * `core/src/components/Dropdowns/dropdown/dropdown.tsx`. Duplicated
- * locally — see the note in `button-group/button-group.ts` for why.
- */
-export interface KsDropdownOption {
-  value: string | number;
-  label: string;
-  icon?: string;
-  disabled?: boolean;
-}
-
-export type KsDropdownValue = (string | number)[] | string | number;
-
-/** DOM shape of the real `<ks-dropdown>` custom element, typed for the wrapper. */
-type KsDropdownElement = HTMLElement & {
-  options: KsDropdownOption[];
-  placeholder: string;
-  multi: boolean;
-  searchable: boolean;
-  label: string;
-  disabled: boolean;
-  selectedValues: (string | number)[];
-  writeValue(val: (string | number) | (string | number)[] | null): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-dropdown>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `chips/chips.ts` for the full rationale (the
- * native `selectedValuesChange` event can't be reused verbatim as an
- * Angular output name without a double-fire risk).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[selectedValues]="v" (ksSelectedValuesChange)="v = $event"`.
- *
- * `template: ''` — the option list / search box in the Stencil render are
- * projected into the shared, internal `<ks-overlay-field>` slot; there is
- * no slot exposed on `<ks-dropdown>` itself for a consumer to project into.
- */
-@Component({
-  selector: 'ks-dropdown',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsDropdownComponent, multi: true }],
-})
-export class KsDropdownComponent implements ControlValueAccessor {
-  private readonly el: KsDropdownElement;
-  private onChange: (value: KsDropdownValue) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Full list of options */
-  readonly options = input<KsDropdownOption[]>([]);
-
-  /** Placeholder text shown when nothing is selected */
-  readonly placeholder = input('Select…');
-
-  /** Allow selecting multiple options */
-  readonly multi = input(false);
-
-  /** Show a search box inside the dropdown */
-  readonly searchable = input(false);
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Initial/controlled selected value(s) for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
-  readonly selectedValues = input<(string | number)[]>([]);
-
-  /** Emits the new selection — an array when `multi`, otherwise a single value. From the native `selectedValuesChange` event. */
-  readonly ksSelectedValuesChange = output<KsDropdownValue>();
-
-  constructor(ref: ElementRef<KsDropdownElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.options = this.options()));
-    effect(() => (this.el.placeholder = this.placeholder()));
-    effect(() => (this.el.multi = this.multi()));
-    effect(() => (this.el.searchable = this.searchable()));
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => void this.el.writeValue(this.selectedValues()));
-
-    const onNativeSelectedValuesChange = (event: Event): void => {
-      const detail = (event as CustomEvent<KsDropdownValue>).detail;
-      this.ksSelectedValuesChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('selectedValuesChange', onNativeSelectedValuesChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('selectedValuesChange', onNativeSelectedValuesChange));
-  }
-
-  writeValue(value: KsDropdownValue | null): void {
-    void this.el.writeValue(value ?? null);
-  }
-
-  registerOnChange(fn: (value: KsDropdownValue) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Dropdowns/listbox/listbox.ts

@@ -1,116 +0,0 @@
-// Side-effect import: registers the `ks-listbox` tag — see
-// `button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-listbox.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Mirrors `KsListBoxOption` exported by
- * `core/src/components/Dropdowns/listbox/listbox.tsx`. Duplicated locally
- * — see the note in `button-group/button-group.ts` for why.
- */
-export interface KsListBoxOption {
-  value: string | number;
-  label: string;
-  icon?: string;
-  disabled?: boolean;
-  /** Optional group key — used when `groupBy` is enabled */
-  group?: string;
-}
-
-export type KsListBoxValue = (string | number)[] | string | number;
-
-/** DOM shape of the real `<ks-listbox>` custom element, typed for the wrapper. */
-type KsListBoxElement = HTMLElement & {
-  options: KsListBoxOption[];
-  multi: boolean;
-  searchable: boolean;
-  disabled: boolean;
-  selected: (string | number)[];
-  groupBy: boolean;
-  writeValue(val: (string | number) | (string | number)[] | null): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-listbox>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `chips/chips.ts` for the full rationale (the
- * native `selectedChange` event can't be reused verbatim as an Angular
- * output name without a double-fire risk).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[selected]="v" (ksSelectedChange)="v = $event"`.
- *
- * `template: ''` — no slot is exposed on `<ks-listbox>` itself.
- */
-@Component({
-  selector: 'ks-listbox',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsListBoxComponent, multi: true }],
-})
-export class KsListBoxComponent implements ControlValueAccessor {
-  private readonly el: KsListBoxElement;
-  private onChange: (value: KsListBoxValue) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Options list */
-  readonly options = input<KsListBoxOption[]>([]);
-
-  /** Allow multi-select */
-  readonly multi = input(false);
-
-  /** Show search box */
-  readonly searchable = input(false);
-
-  /** Disabled */
-  readonly disabled = input(false);
-
-  /** Enable group headers using the `group` field on each option */
-  readonly groupBy = input(false);
-
-  /** Initial/controlled selected value(s) for plain (non-forms) usage. Prefer `[(ngModel)]` / `formControlName` when inside a form. */
-  readonly selected = input<(string | number)[]>([]);
-
-  /** Emits the new selection — an array when `multi`, otherwise a single value. From the native `selectedChange` event. */
-  readonly ksSelectedChange = output<KsListBoxValue>();
-
-  constructor(ref: ElementRef<KsListBoxElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.options = this.options()));
-    effect(() => (this.el.multi = this.multi()));
-    effect(() => (this.el.searchable = this.searchable()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => (this.el.groupBy = this.groupBy()));
-    effect(() => void this.el.writeValue(this.selected()));
-
-    const onNativeSelectedChange = (event: Event): void => {
-      const detail = (event as CustomEvent<KsListBoxValue>).detail;
-      this.ksSelectedChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('selectedChange', onNativeSelectedChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('selectedChange', onNativeSelectedChange));
-  }
-
-  writeValue(value: KsListBoxValue | null): void {
-    void this.el.writeValue(value ?? null);
-  }
-
-  registerOnChange(fn: (value: KsListBoxValue) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/checkbox/checkbox.ts

@@ -1,126 +0,0 @@
-// Side-effect import: registers the `ks-checkbox` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-checkbox.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/**
- * Mirrors `KsCheckboxOption` exported by
- * `core/src/components/Inputs/checkbox/checkbox.tsx`. Duplicated locally
- * — see the note in `Buttons/button-group/button-group.ts` for why.
- */
-export interface KsCheckboxOption {
-  value: string;
-  label?: string;
-  disabled?: boolean;
-  checked?: boolean;
-}
-
-/** DOM shape of the real `<ks-checkbox>` custom element, typed for the wrapper. */
-type KsCheckboxElement = HTMLElement & {
-  label: string;
-  options: KsCheckboxOption[];
-  disabled: boolean;
-  checked: boolean;
-  selected: string[];
-  writeValue(val: unknown): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-checkbox>` Stencil custom element.
- *
- * Supports two modes, mirroring the Stencil source:
- * - **Single** mode (no `options`): two-way bind `checked` (boolean).
- * - **Group** mode (`options` set): two-way bind `selected` (string[]).
- *
- * Two-way binding for either mode is via `ControlValueAccessor` — use
- * `[(ngModel)]`/`formControlName` and it works for whichever mode is
- * active (see `Buttons/chips/chips.ts` for the full rationale on why CVA
- * is used instead of reusing a native event name as an Angular output).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[checked]="c" (ksCheckedChange)="c = $event"` or
- * `[selected]="s" (ksSelectedChange)="s = $event"`.
- *
- * `template: ''` — no `<slot>` in the wrapped Stencil render.
- */
-@Component({
-  selector: 'ks-checkbox',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsCheckboxComponent, multi: true }],
-})
-export class KsCheckboxComponent implements ControlValueAccessor {
-  private readonly el: KsCheckboxElement;
-  private onChange: (value: unknown) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Label shown next to the control (single mode) */
-  readonly label = input('');
-
-  /** Optional set of multiple options (multi-select / group mode) */
-  readonly options = input<KsCheckboxOption[]>([]);
-
-  /** Disabled state */
-  readonly disabled = input(false);
-
-  /** Single mode: initial/controlled checked value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly checked = input(false);
-
-  /** Group mode: initial/controlled selected values. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly selected = input<string[]>([]);
-
-  /** Emits whenever `checked` changes (single mode). From the native `checkedChange` event. */
-  readonly ksCheckedChange = output<boolean>();
-
-  /** Emits whenever `selected` changes (group mode). From the native `selectedChange` event. */
-  readonly ksSelectedChange = output<string[]>();
-
-  constructor(ref: ElementRef<KsCheckboxElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.options = this.options()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => (this.el.checked = this.checked()));
-    effect(() => (this.el.selected = this.selected()));
-
-    const onNativeCheckedChange = (event: Event): void => {
-      const detail = (event as CustomEvent<boolean>).detail;
-      this.ksCheckedChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    const onNativeSelectedChange = (event: Event): void => {
-      const detail = (event as CustomEvent<string[]>).detail;
-      this.ksSelectedChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('checkedChange', onNativeCheckedChange);
-    this.el.addEventListener('selectedChange', onNativeSelectedChange);
-    inject(DestroyRef).onDestroy(() => {
-      this.el.removeEventListener('checkedChange', onNativeCheckedChange);
-      this.el.removeEventListener('selectedChange', onNativeSelectedChange);
-    });
-  }
-
-  /** `ControlValueAccessor` — called by `ngModel`/`formControl` to push a value in (either mode). */
-  writeValue(value: unknown): void {
-    void this.el.writeValue(value);
-  }
-
-  registerOnChange(fn: (value: unknown) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}

package/src/lib/Inputs/colour-picker/colour-picker.ts

@@ -1,101 +0,0 @@
-// Side-effect import: registers the `ks-colour-picker` tag — see
-// `Buttons/button/button.ts` for the full explanation of this pattern.
-import '@kraft.stitch/core/dist/components/ks-colour-picker.js';
-
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, effect, inject, input, output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-/** Mirrors the inline union used by `core/src/components/Inputs/colour-picker/colour-picker.tsx`. */
-export type KsColourPickerVariant = 'input' | 'swatch';
-
-const DEFAULT_SWATCHES = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899', '#64748b', '#000000', '#ffffff'];
-
-/** DOM shape of the real `<ks-colour-picker>` custom element, typed for the wrapper. */
-type KsColourPickerElement = HTMLElement & {
-  label: string;
-  variant: KsColourPickerVariant;
-  swatches: string[];
-  disabled: boolean;
-  value: string;
-  writeValue(val: string): Promise<void>;
-};
-
-/**
- * Angular wrapper around the `<ks-colour-picker>` Stencil custom element.
- *
- * Two-way binding is via `ControlValueAccessor` — use `[(ngModel)]` or
- * `formControlName`. See `Buttons/chips/chips.ts` for the full rationale
- * (the native `valueChange` event can't be reused verbatim as an Angular
- * output name without a double-fire risk).
- *
- * For plain (non-forms) two-way use, bind explicitly instead:
- * `[value]="hex" (ksValueChange)="hex = $event"`.
- *
- * `template: ''` — the panel is rendered into the internal
- * `<ks-overlay-field>`; there is no slot on `<ks-colour-picker>` itself.
- */
-@Component({
-  selector: 'ks-colour-picker',
-  standalone: true,
-  template: '',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: KsColourPickerComponent, multi: true }],
-})
-export class KsColourPickerComponent implements ControlValueAccessor {
-  private readonly el: KsColourPickerElement;
-  private onChange: (value: string) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  /** Field label */
-  readonly label = input('');
-
-  /** Picker UI variant */
-  readonly variant = input<KsColourPickerVariant>('input');
-
-  /** Preset swatch colours */
-  readonly swatches = input<string[]>(DEFAULT_SWATCHES);
-
-  /** Disabled */
-  readonly disabled = input(false);
-
-  /** Initial/controlled hex value. Prefer `[(ngModel)]` / `formControlName`. */
-  readonly value = input('#3b82f6');
-
-  /** Emits the newly-picked hex colour. From the native `valueChange` event. */
-  readonly ksValueChange = output<string>();
-
-  constructor(ref: ElementRef<KsColourPickerElement>) {
-    this.el = ref.nativeElement;
-
-    effect(() => (this.el.label = this.label()));
-    effect(() => (this.el.variant = this.variant()));
-    effect(() => (this.el.swatches = this.swatches()));
-    effect(() => (this.el.disabled = this.disabled()));
-    effect(() => void this.el.writeValue(this.value()));
-
-    const onNativeValueChange = (event: Event): void => {
-      const detail = (event as CustomEvent<string>).detail;
-      this.ksValueChange.emit(detail);
-      this.onChange(detail);
-      this.onTouched();
-    };
-    this.el.addEventListener('valueChange', onNativeValueChange);
-    inject(DestroyRef).onDestroy(() => this.el.removeEventListener('valueChange', onNativeValueChange));
-  }
-
-  writeValue(value: string): void {
-    void this.el.writeValue(value ?? '#3b82f6');
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.el.disabled = isDisabled;
-  }
-}