@kouji-ui/components 0.1.1

package/src/public-api.ts

@@ -0,0 +1,61 @@
+// Public API for @kouji-ui/components
+export const KJ_COMPONENTS_VERSION = '0.0.1';
+
+export * from './accordion/index';
+export * from './alert/index';
+export * from './avatar/index';
+export * from './badge/index';
+export * from './breadcrumb/index';
+export * from './button/index';
+export * from './button-group/index';
+export * from './calendar/index';
+export * from './card/index';
+export * from './carousel/index';
+export * from './chat/index';
+export * from './checkbox/index';
+export * from './color-picker/index';
+export * from './combobox/index';
+export * from './confirm-popup/index';
+export * from './date-picker/index';
+export * from './dialog/index';
+export * from './drawer/index';
+export * from './dropdown-menu/index';
+export * from './empty-state/index';
+export * from './field/index';
+export * from './file-upload/index';
+export * from './form/index';
+export * from './icon/index';
+export * from './input/index';
+export * from './input-group/index';
+export * from './input-mask/index';
+export * from './input-otp/index';
+export * from './kbd/index';
+export * from './divider/index';
+export * from './link/index';
+export * from './list/index';
+export * from './menubar/index';
+export * from './number-input/index';
+export * from './overlay-badge/index';
+export * from './pagination/index';
+export * from './password-input/index';
+export * from './popover/index';
+export * from './progress-bar/index';
+export * from './radio/index';
+export * from './select/index';
+export * from './skeleton/index';
+export * from './slider/index';
+export * from './speed-dial/index';
+export * from './spinner/index';
+export * from './stepper/index';
+export * from './table/index';
+export * from './tabs/index';
+export * from './tag/index';
+export * from './textarea/index';
+export * from './time-picker/index';
+export * from './toast/index';
+export * from './toggle/index';
+export * from './tooltip/index';
+export * from './cascade-select/index';
+export * from './command-palette/index';
+export * from './tree-select/index';
+export * from './typography/index';

package/src/radio/_examples/index.ts

@@ -0,0 +1,6 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjRadioDefaultExample } from './radio.default.example';
+export { KjRadioDisabledExample } from './radio.disabled.example';
+export { KjRadioGroupExample } from './radio.group.example';
+export { KjRadioInlineExample } from './radio.inline.example';

package/src/radio/_examples/radio.default.example.ts

@@ -0,0 +1,26 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
+
+@Component({
+  selector: 'kj-radio-default-example',
+  standalone: true,
+  imports: [KjRadioGroupComponent, KjRadioComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-radio-group [(value)]="size" ariaLabel="Size">
+      <kj-radio [value]="'s'">Small</kj-radio>
+      <kj-radio [value]="'m'">Medium</kj-radio>
+      <kj-radio [value]="'l'">Large</kj-radio>
+    </kj-radio-group>
+  `,
+})
+export class KjRadioDefaultExample {
+  readonly size = signal<'s' | 'm' | 'l'>('m');
+}

package/src/radio/_examples/radio.disabled.example.ts

@@ -0,0 +1,26 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
+
+@Component({
+  selector: 'kj-radio-disabled-example',
+  standalone: true,
+  imports: [KjRadioGroupComponent, KjRadioComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-radio-group [(value)]="choice" ariaLabel="Choice">
+      <kj-radio [value]="'a'">Option A</kj-radio>
+      <kj-radio [value]="'b'" [disabled]="true">Option B (disabled)</kj-radio>
+      <kj-radio [value]="'c'">Option C</kj-radio>
+    </kj-radio-group>
+  `,
+})
+export class KjRadioDisabledExample {
+  readonly choice = signal<'a' | 'b' | 'c'>('a');
+}

package/src/radio/_examples/radio.group.example.ts

@@ -0,0 +1,27 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
+
+@Component({
+  selector: 'kj-radio-group-example',
+  standalone: true,
+  imports: [KjRadioGroupComponent, KjRadioComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-radio-group [(value)]="plan" ariaLabel="Plan">
+      <kj-radio [value]="'free'">Free</kj-radio>
+      <kj-radio [value]="'pro'">Pro</kj-radio>
+      <kj-radio [value]="'team'">Team</kj-radio>
+      <kj-radio [value]="'enterprise'">Enterprise</kj-radio>
+    </kj-radio-group>
+  `,
+})
+export class KjRadioGroupExample {
+  readonly plan = signal<'free' | 'pro' | 'team' | 'enterprise'>('pro');
+}

package/src/radio/_examples/radio.inline.example.ts

@@ -0,0 +1,26 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
+
+@Component({
+  selector: 'kj-radio-inline-example',
+  standalone: true,
+  imports: [KjRadioGroupComponent, KjRadioComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-radio-group [(value)]="vote" orientation="horizontal" ariaLabel="Vote">
+      <kj-radio [value]="'yes'">Yes</kj-radio>
+      <kj-radio [value]="'no'">No</kj-radio>
+      <kj-radio [value]="'abstain'">Abstain</kj-radio>
+    </kj-radio-group>
+  `,
+})
+export class KjRadioInlineExample {
+  readonly vote = signal<'yes' | 'no' | 'abstain'>('yes');
+}

package/src/radio/index.ts

@@ -0,0 +1 @@
+export * from './radio';

package/src/radio/radio.css

@@ -0,0 +1,58 @@
+@layer kj.component {
+  .kj-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-sm);
+  }
+  .kj-radio-group[data-orientation="horizontal"] { flex-direction: row; gap: var(--kj-space-lg); }
+
+  /* Outer host. Acts as a single click target whose label area forwards to
+     the inner dot. */
+  .kj-radio {
+    display: inline-flex;
+  }
+  .kj-radio-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    cursor: pointer;
+    color: var(--kj-fg-default);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+  }
+  .kj-radio-label { user-select: none; }
+
+  /* The interactive dot (carries the kjRadio directive). */
+  .kj-radio-dot {
+    --kj-radio-size:        1rem;
+    --kj-radio-border:      var(--kj-border-default);
+    --kj-radio-bg-checked:  var(--kj-bg-primary);
+
+    display: inline-block;
+    width: var(--kj-radio-size);
+    height: var(--kj-radio-size);
+    flex-shrink: 0;
+    border: var(--kj-border) solid var(--kj-radio-border);
+    border-radius: 9999px;
+    background: var(--kj-bg-field);
+    position: relative;
+    transition: var(--kj-transition);
+  }
+  .kj-radio-dot[data-checked]::after {
+    content: '';
+    position: absolute;
+    inset: 25%;
+    border-radius: 9999px;
+    background: var(--kj-radio-bg-checked);
+  }
+  .kj-radio-dot[data-checked] { border-color: var(--kj-radio-bg-checked); }
+  .kj-radio-dot:focus-visible { outline: 2px solid var(--kj-fg-primary); outline-offset: 2px; }
+
+  /* Disabled — dim the whole group (dot + label text) for visual consistency
+     with native form controls. */
+  .kj-radio[data-disabled] .kj-radio-inner { cursor: not-allowed; }
+  .kj-radio[data-disabled] .kj-radio-dot,
+  .kj-radio[data-disabled] .kj-radio-label {
+    opacity: 0.45;
+  }
+  .kj-radio[data-disabled] .kj-radio-dot { pointer-events: none; }
+}

package/src/radio/radio.playground.ts

@@ -0,0 +1,90 @@
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { KjRadioGroupComponent, KjRadioComponent } from './radio';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs cover orientation, the
+ * number of rendered options, the selected value, and a per-option disabled
+ * demonstration of skip behaviour during keyboard navigation.
+ */
+const selected = signal<string>('m');
+const orientation = signal<'horizontal' | 'vertical'>('vertical');
+const itemCount = signal<2 | 3 | 4 | 5>(3);
+const disableMiddle = signal(false);
+
+const ITEMS: ReadonlyArray<{ value: string; label: string }> = [
+  { value: 's', label: 'Small' },
+  { value: 'm', label: 'Medium' },
+  { value: 'l', label: 'Large' },
+  { value: 'xl', label: 'X-Large' },
+  { value: 'xxl', label: 'XX-Large' },
+];
+
+@Component({
+  selector: 'kj-radio-playground',
+  standalone: true,
+  imports: [KjRadioGroupComponent, KjRadioComponent],
+  template: `
+    <kj-radio-group
+      [(value)]="selected"
+      [orientation]="orientation()"
+      ariaLabel="Size"
+    >
+      @for (item of visibleItems(); track item.value; let i = $index) {
+        <kj-radio [value]="item.value" [disabled]="disableMiddle() && i === 1">
+          {{ item.label }}
+        </kj-radio>
+      }
+    </kj-radio-group>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjRadioPlaygroundDemo {
+  protected readonly selected = selected;
+  protected readonly orientation = orientation;
+  protected readonly itemCount = itemCount;
+  protected readonly disableMiddle = disableMiddle;
+
+  protected readonly visibleItems = computed(() => ITEMS.slice(0, itemCount()));
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjRadioPlaygroundDemo,
+  state: {
+    selected: selected as unknown as ReturnType<typeof signal>,
+    orientation: orientation as unknown as ReturnType<typeof signal>,
+    itemCount: itemCount as unknown as ReturnType<typeof signal>,
+    disableMiddle: disableMiddle as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    {
+      kind: 'chips',
+      name: 'orientation',
+      label: 'orientation',
+      options: ['vertical', 'horizontal'],
+    },
+    { kind: 'chips', name: 'itemCount', label: 'items', options: [2, 3, 4, 5] },
+    {
+      kind: 'chips',
+      name: 'selected',
+      label: 'selected',
+      options: ['s', 'm', 'l', 'xl', 'xxl'],
+    },
+    { kind: 'toggle', name: 'disableMiddle', label: 'disable middle item' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      selected: string;
+      orientation: string;
+      itemCount: number;
+      disableMiddle: boolean;
+    };
+    const items = ITEMS.slice(0, s.itemCount)
+      .map((item, i) => {
+        const disabled = s.disableMiddle && i === 1 ? ' [disabled]="true"' : '';
+        return `  <kj-radio [value]="'${item.value}'"${disabled}>${item.label}</kj-radio>`;
+      })
+      .join('\n');
+    return `<kj-radio-group\n  [(value)]="selected"\n  orientation="${s.orientation}"\n  ariaLabel="Size"\n>\n${items}\n</kj-radio-group>`;
+  },
+};

package/src/radio/radio.ts

@@ -0,0 +1,143 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, input, viewChild } from '@angular/core';
+import { KjRadioGroup, KjRadio } from '@kouji-ui/core';
+
+/**
+ * Radio group root. Two-way bind via `[(value)]`.
+ *
+ * Use `<kj-radio-group>` with `<kj-radio>` children to render a themed
+ * single-selection control with label forwarding, disabled propagation, and
+ * the design-system tokens applied on top of the headless `KjRadioGroup`.
+ *
+ * @doc-example Default
+ *   A vertical size picker — the bare-minimum recipe.
+ *   @doc-file radio.default.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common usages — vertical and horizontal
+ *   groups, disabled option. Use this as the copy-paste starting point.
+ *   @doc-file radio.usage.example.ts
+ * @doc-example Group
+ *   Multiple option groups laid out together — labels stay click-targetable.
+ *   @doc-file radio.group.example.ts
+ * @doc-example Disabled
+ *   `[disabled]="true"` removes the option from the tab order and dims it.
+ *   @doc-file radio.disabled.example.ts
+ * @doc-example Inline
+ *   `orientation="horizontal"` lays the radios in a single row.
+ *   @doc-file radio.inline.example.ts
+ *
+ * @doc-keyboard
+ *   ArrowUp|ArrowDown    — Moves selection between radios in a vertical group
+ *   ArrowLeft|ArrowRight — Moves selection between radios in a horizontal group
+ *   Tab                  — Enters the group (focuses the checked or first radio)
+ *   Space                — Selects the focused radio
+ *
+ * @doc-aria
+ *   role="radiogroup"  — On the host `<kj-radio-group>` (provided by the directive)
+ *   role="radio"       — On each `<kj-radio>` dot
+ *   aria-checked       — Reflects the selection state per option
+ *   aria-labelledby    — Wired from the option's visible text label id
+ *   aria-disabled      — Reflects `[disabled]` on individual radios
+ *   data-orientation   — Mirrors `horizontal` / `vertical` for theme hooks
+ *
+ * @doc-touch
+ *   The label wraps both the dot and the text — the entire `<kj-radio>` row
+ *   is clickable. Pair with adequate line-height so the row meets WCAG 2.5.5.
+ *
+ * @doc-a11y
+ *   Selection follows the roving-tabindex pattern — only the checked (or
+ *   first) radio is tab-focusable; arrow keys cycle within. Group always
+ *   exposes a programmatic name — set `ariaLabel` or wire `aria-labelledby`
+ *   to a sibling heading.
+ *
+ * @doc-related checkbox,select,toggle
+ *
+ * @doc-css-var
+ *   --kj-radio-size        — Diameter of the radio dot.
+ *   --kj-radio-border      — Border color of the unchecked dot. Inherits --kj-border-default.
+ *   --kj-radio-bg-checked  — Inner fill and border color when checked. Inherits --kj-bg-primary.
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name radio
+ * @doc-description Themed radio group for accessible single-selection forms input with label forwarding.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-radio-group',
+  standalone: true,
+  hostDirectives: [{ directive: KjRadioGroup, inputs: ['kjValue: value'], outputs: ['kjValueChange: valueChange'] }],
+  template: `<ng-content />`,
+  styleUrl: './radio.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'kj-radio-group',
+    '[attr.data-orientation]': 'orientation()',
+    '[attr.aria-label]': 'ariaLabel()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjRadioGroupComponent {
+  readonly orientation = input<'horizontal' | 'vertical'>('vertical');
+  readonly ariaLabel = input<string | undefined>(undefined);
+}
+
+let radioIdCounter = 0;
+
+/**
+ * Single radio button. Must live inside `<kj-radio-group>`.
+ *
+ * The host renders a `<label>` that wraps the radio dot AND the projected
+ * content. Clicking anywhere on the label (including the text) selects the
+ * radio because the label's native click-forwarding behaviour fires the
+ * directive's click handler. When `disabled` is set, both the dot and the
+ * label text dim (see `[data-disabled]` rules in `radio.css`).
+ * @doc
+ * @doc-name radio
+ */
+@Component({
+  selector: 'kj-radio',
+  standalone: true,
+  imports: [KjRadio],
+  template: `
+    <!-- Click-region wrapper. The focusable element is the inner kjRadio span
+         (role="radio", tabindex, Space/Enter handlers); this div only proxies
+         pointer events from the label area, so the lint rules below don't apply. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+    <div class="kj-radio-inner" (click)="onLabelClick($event)">
+      <span
+        #dot
+        kjRadio
+        tabindex="0"
+        class="kj-radio-dot"
+        [kjRadioValue]="value()"
+        [kjDisabled]="disabled()"
+        [attr.aria-labelledby]="labelId"
+      ></span>
+      <span class="kj-radio-label" [id]="labelId"><ng-content /></span>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'kj-radio',
+    '[attr.data-disabled]': "disabled() ? '' : null",
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjRadioComponent {
+  readonly value = input.required<unknown>();
+  readonly disabled = input(false);
+
+  protected readonly labelId = `kj-radio-${++radioIdCounter}`;
+
+  private readonly dot = viewChild.required<ElementRef<HTMLElement>>('dot');
+
+  /** Forward label-area clicks to the radio dot. The dot itself bubbles
+   *  through, so we early-return to avoid a double-select. */
+  protected onLabelClick(e: MouseEvent): void {
+    if (this.disabled()) return;
+    const dotEl = this.dot().nativeElement;
+    const target = e.target as Node;
+    if (target === dotEl || dotEl.contains(target)) return;
+    dotEl.click();
+  }
+}

package/src/radio/radio.usage.example.ts

@@ -0,0 +1,54 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjRadioGroupComponent, KjRadioComponent } from './radio';
+
+/**
+ * A walkthrough of the most common radio usages — vertical and horizontal
+ * groups, a disabled option, and a bound selection. Use this as the
+ * copy-paste starting point for form choices.
+ */
+@Component({
+  selector: 'kj-radio-usage-example',
+  standalone: true,
+  imports: [KjRadioGroupComponent, KjRadioComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-xl);
+      }
+      .label {
+        font-size: 0.75rem;
+        color: var(--kj-fg-default);
+        opacity: 0.7;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div>
+      <span class="label">Size (vertical)</span>
+      <kj-radio-group [(value)]="size" ariaLabel="Size">
+        <kj-radio [value]="'s'">Small</kj-radio>
+        <kj-radio [value]="'m'">Medium</kj-radio>
+        <kj-radio [value]="'l'">Large</kj-radio>
+        <kj-radio [value]="'xl'" [disabled]="true">X-Large (out of stock)</kj-radio>
+      </kj-radio-group>
+    </div>
+
+    <div>
+      <span class="label">Plan (horizontal)</span>
+      <kj-radio-group [(value)]="plan" orientation="horizontal" ariaLabel="Plan">
+        <kj-radio [value]="'free'">Free</kj-radio>
+        <kj-radio [value]="'pro'">Pro</kj-radio>
+        <kj-radio [value]="'team'">Team</kj-radio>
+      </kj-radio-group>
+    </div>
+  `,
+})
+export class KjRadioUsageExample {
+  readonly size = signal<'s' | 'm' | 'l' | 'xl'>('m');
+  readonly plan = signal<'free' | 'pro' | 'team'>('pro');
+}

package/src/select/_examples/index.ts

@@ -0,0 +1,6 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjSelectDefaultExample } from './select.default.example';
+export { KjSelectDisabledExample } from './select.disabled.example';
+export { KjSelectGroupedExample } from './select.grouped.example';
+export { KjSelectPlaceholderExample } from './select.placeholder.example';

package/src/select/_examples/select.default.example.ts

@@ -0,0 +1,26 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSelectComponent, KjOptionComponent } from '../select';
+
+@Component({
+  selector: 'kj-select-default-example',
+  standalone: true,
+  imports: [KjSelectComponent, KjOptionComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-select [(value)]="fruit" placeholder="Choose a fruit">
+      <kj-option [value]="'apple'">Apple</kj-option>
+      <kj-option [value]="'banana'">Banana</kj-option>
+      <kj-option [value]="'cherry'">Cherry</kj-option>
+    </kj-select>
+  `,
+})
+export class KjSelectDefaultExample {
+  readonly fruit = signal<string | undefined>(undefined);
+}

package/src/select/_examples/select.disabled.example.ts

@@ -0,0 +1,24 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSelectComponent, KjOptionComponent } from '../select';
+
+@Component({
+  selector: 'kj-select-disabled-example',
+  standalone: true,
+  imports: [KjSelectComponent, KjOptionComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-select [(value)]="lang" [disabled]="true" placeholder="Locked">
+      <kj-option [value]="'en'">English</kj-option>
+    </kj-select>
+  `,
+})
+export class KjSelectDisabledExample {
+  readonly lang = signal<string | undefined>('en');
+}

package/src/select/_examples/select.grouped.example.ts

@@ -0,0 +1,37 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSelectComponent, KjOptionComponent } from '../select';
+
+@Component({
+  selector: 'kj-select-grouped-example',
+  standalone: true,
+  imports: [KjSelectComponent, KjOptionComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .group-label {
+        padding: 4px 12px;
+        font-size: 0.75rem;
+        color: var(--kj-fg-default);
+        opacity: 0.6;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-select [(value)]="city" placeholder="Choose a city">
+      <div class="group-label">Europe</div>
+      <kj-option [value]="'london'">London</kj-option>
+      <kj-option [value]="'berlin'">Berlin</kj-option>
+      <div class="group-label">Asia</div>
+      <kj-option [value]="'tokyo'">Tokyo</kj-option>
+      <kj-option [value]="'seoul'">Seoul</kj-option>
+    </kj-select>
+  `,
+})
+export class KjSelectGroupedExample {
+  readonly city = signal<string | undefined>(undefined);
+}

package/src/select/_examples/select.placeholder.example.ts

@@ -0,0 +1,26 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSelectComponent, KjOptionComponent } from '../select';
+
+@Component({
+  selector: 'kj-select-placeholder-example',
+  standalone: true,
+  imports: [KjSelectComponent, KjOptionComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-select [(value)]="status" placeholder="Pick a status">
+      <kj-option [value]="'active'">Active</kj-option>
+      <kj-option [value]="'inactive'">Inactive</kj-option>
+      <kj-option [value]="'pending'">Pending</kj-option>
+    </kj-select>
+  `,
+})
+export class KjSelectPlaceholderExample {
+  readonly status = signal<string | undefined>(undefined);
+}

package/src/select/index.ts

@@ -0,0 +1 @@
+export * from './select';