@kouji-ui/components 0.1.1 → 0.1.3

package/src/select/select.css

@@ -1,65 +0,0 @@
-@layer kj.component {
-  .kj-select { position: relative; display: inline-block; min-width: 12rem; }
-
-  .kj-select-trigger {
-    /* Explicit height contract (matches input.css / button.css) so the
-       select trigger lines up with sibling inputs in a form row. */
-    --kj-select-trigger-height: 2.25rem;
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--kj-space-sm);
-    background: var(--kj-bg-field);
-    color: var(--kj-fg-default);
-    border: var(--kj-border) solid var(--kj-border-default);
-    border-radius: var(--kj-radius-field);
-    padding: 0 var(--kj-space-md);
-    height: var(--kj-select-trigger-height);
-    font: 0.875rem var(--kj-font-sans);
-    cursor: pointer;
-  }
-  .kj-select[data-size="xs"] .kj-select-trigger { --kj-select-trigger-height: 1.75rem; font-size: 0.75rem;   padding-inline: var(--kj-space-sm); gap: var(--kj-space-xs); }
-  .kj-select[data-size="sm"] .kj-select-trigger { --kj-select-trigger-height: 2rem;    font-size: 0.8125rem; }
-  .kj-select[data-size="lg"] .kj-select-trigger { --kj-select-trigger-height: 2.75rem; font-size: 1rem; }
-  .kj-select[data-size="xs"] { min-width: 0; }
-  .kj-select-trigger:focus-visible { outline: 2px solid var(--kj-fg-primary); outline-offset: 2px; }
-  .kj-select[data-disabled] .kj-select-trigger { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
-
-  .kj-select-content {
-    box-sizing: border-box;
-    min-width: 12rem;
-    width: max-content;
-    background: var(--kj-bg-elevated);
-    border: var(--kj-border) solid var(--kj-border-default);
-    border-radius: var(--kj-radius-field);
-    box-shadow: var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / 0.12));
-    padding: 4px;
-    max-height: 16rem;
-    overflow: auto;
-    z-index: 100;
-  }
-  .kj-select-content[hidden] { display: none; }
-
-  .kj-option {
-    padding: var(--kj-space-sm) var(--kj-space-md);
-    border-radius: var(--kj-radius-selector);
-    cursor: pointer;
-    color: var(--kj-fg-default);
-    font: 0.875rem var(--kj-font-sans);
-  }
-  /* Hover uses bg-field (sunken slot), not bg-surface. In themes where
-     elevated == surface (light/corporate, both white) a bg-surface hover would
-     be invisible on the bg-elevated panel. */
-  .kj-option:hover { background: var(--kj-bg-field); }
-  /* Selected option — tinted primary mirrors tree-select / cascade-select so
-     the listbox family looks consistent across themes. */
-  .kj-option[aria-selected="true"] {
-    background: color-mix(in oklab, var(--kj-bg-primary) 12%, transparent);
-    color: var(--kj-fg-primary);
-    font-weight: 600;
-  }
-  .kj-option[aria-selected="true"]:hover {
-    background: color-mix(in oklab, var(--kj-bg-primary) 18%, transparent);
-  }
-}

package/src/select/select.playground.ts

@@ -1,81 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { KjSelectComponent, KjOptionComponent } from './select';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-const selected = signal<string | undefined>(undefined);
-const placeholder = signal<string>('Choose a fruit');
-const optionCount = signal<2 | 3 | 4 | 5 | 6>(4);
-const disabled = signal(false);
-const multiple = signal(false);
-
-const ITEMS: ReadonlyArray<{ value: string; label: string }> = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'cherry', label: 'Cherry' },
-  { value: 'date', label: 'Date' },
-  { value: 'elderberry', label: 'Elderberry' },
-  { value: 'fig', label: 'Fig' },
-];
-
-@Component({
-  selector: 'kj-select-playground',
-  standalone: true,
-  imports: [KjSelectComponent, KjOptionComponent],
-  template: `
-    <kj-select
-      [(value)]="selected"
-      [placeholder]="placeholder()"
-      [disabled]="disabled()"
-      [multiple]="multiple()"
-    >
-      @for (item of visibleItems(); track item.value) {
-        <kj-option [value]="item.value">{{ item.label }}</kj-option>
-      }
-    </kj-select>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjSelectPlaygroundDemo {
-  protected readonly selected = selected;
-  protected readonly placeholder = placeholder;
-  protected readonly optionCount = optionCount;
-  protected readonly disabled = disabled;
-  protected readonly multiple = multiple;
-
-  protected readonly visibleItems = computed(() => ITEMS.slice(0, optionCount()));
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjSelectPlaygroundDemo,
-  state: {
-    selected: selected as unknown as ReturnType<typeof signal>,
-    placeholder: placeholder as unknown as ReturnType<typeof signal>,
-    optionCount: optionCount as unknown as ReturnType<typeof signal>,
-    disabled: disabled as unknown as ReturnType<typeof signal>,
-    multiple: multiple as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    { kind: 'text', name: 'placeholder', label: 'placeholder' },
-    { kind: 'chips', name: 'optionCount', label: 'options', options: [2, 3, 4, 5, 6] },
-    { kind: 'toggle', name: 'multiple', label: 'multiple' },
-    { kind: 'toggle', name: 'disabled', label: 'disabled' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      placeholder: string;
-      optionCount: number;
-      disabled: boolean;
-      multiple: boolean;
-    };
-    const attrs: string[] = [
-      `[(value)]="selected"`,
-      `placeholder="${s.placeholder}"`,
-    ];
-    if (s.multiple) attrs.push('[multiple]="true"');
-    if (s.disabled) attrs.push('[disabled]="true"');
-    const options = ITEMS.slice(0, s.optionCount)
-      .map((item) => `  <kj-option [value]="'${item.value}'">${item.label}</kj-option>`)
-      .join('\n');
-    return `<kj-select\n  ${attrs.join('\n  ')}\n>\n${options}\n</kj-select>`;
-  },
-};

package/src/select/select.ts

@@ -1,176 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, contentChildren, forwardRef, input, inject, computed } from '@angular/core';
-import { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from '@kouji-ui/core';
-
-/**
- * Select root. Two-way bind via `[(value)]`.
- *
- * Users only need `<kj-select>` and `<kj-option>`. The trigger button and
- * listbox panel are rendered internally so the consumer markup stays minimal,
- * with theme tokens, placeholder text, and keyboard navigation already wired.
- *
- * @doc-keyboard
- *   Enter|Space    — Opens the listbox from the trigger; activates the focused option when open
- *   ArrowDown      — Moves focus to the next option (clamps at the end)
- *   ArrowUp        — Moves focus to the previous option (clamps at the start)
- *   Home           — Moves focus to the first option
- *   End            — Moves focus to the last option
- *   A-Z (type-ahead) — Focuses the first option whose visible text starts with the typed character
- *   Escape         — Closes the listbox and returns focus to the trigger
- *   Tab            — Closes the listbox and moves focus to the next focusable element
- *
- * @doc-aria
- *   aria-haspopup        — set to "listbox" on the trigger button
- *   aria-expanded        — set on the trigger; reflects the open/closed state of the listbox
- *   aria-controls        — links the trigger to the panel id
- *   aria-activedescendant — set on the panel; points to the id of the currently focused option
- *   aria-multiselectable  — set on the panel to "true" when [multiple] is true
- *   role="listbox"       — on the content panel (provided via KJ_OVERLAY_PANEL_ROLE)
- *   role="option"        — on each kj-option child
- *   aria-selected        — set on each option to "true" or "false"
- *   aria-disabled        — set on options when [kjDisabled] is true
- *   data-disabled / data-multiple — mirrors of the disabled / multiple state for CSS
- *
- * @doc-css-var
- *   --kj-select-trigger-height — Height of the trigger button. Sizes (sm/md/lg) override.
- *
- * @doc-touch
- *   Default trigger height is 36px. Apply `data-size="lg"` on `<kj-select>` to bump the trigger to 2.75rem (44px) and meet WCAG 2.5.5 for touch-first layouts. Options have padding-only sizing and rely on their text affordance.
- *
- * @doc-a11y
- *   The listbox follows the WAI-ARIA combobox/listbox pattern. The panel is
- *   portalled to `document.body` so it escapes clipping ancestors while still
- *   being announced as the trigger's popup via `aria-controls`. Selection
- *   tracking uses `Object.is` so primitive and reference values both work.
- *   In single-select mode the panel closes on activation; in multi mode
- *   ([multiple]="true") the panel stays open and `aria-multiselectable="true"`
- *   is exposed for assistive tech.
- *
- * @doc-related combobox,cascade-select,radio-group
- *
- * @doc-example Default
- *   A single-value fruit picker — the bare-minimum recipe.
- *   @doc-file select.default.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common usages — placeholder, pre-selected,
- *   and disabled. Use this as the copy-paste starting point.
- *   @doc-file select.usage.example.ts
- * @doc-example With placeholder
- *   `placeholder="…"` is shown until a value is bound.
- *   @doc-file select.placeholder.example.ts
- * @doc-example Disabled
- *   `[disabled]="true"` removes the trigger from the tab order.
- *   @doc-file select.disabled.example.ts
- * @doc-example Grouped options
- *   Cluster options under headings for richer listbox menus.
- *   @doc-file select.grouped.example.ts
- * @doc-category Library/Data input
- * @doc
- * @doc-name select
- * @doc-description Themed dropdown select with a trigger button, listbox panel, and keyboard navigation.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-select',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjSelect, inputs: ['kjSelectValue: value'], outputs: ['kjSelectValueChange: valueChange'] },
-  ],
-  imports: [KjSelectTrigger, KjSelectContent],
-  template: `
-    <button type="button" kjSelectTrigger #trig="kjSelectTrigger" class="kj-select-trigger" aria-haspopup="listbox" [disabled]="disabled() || null" [kjMultiple]="multiple()">
-      <span class="kj-select-trigger-label">{{ displayLabel() }}</span>
-      <span class="kj-select-trigger-caret" aria-hidden="true">▾</span>
-    </button>
-    <kj-select-content [kjFor]="trig" class="kj-select-content">
-      <ng-content />
-    </kj-select-content>
-  `,
-  styleUrl: './select.css',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-select',
-    '[attr.data-disabled]': "disabled() ? '' : null",
-    '[attr.data-multiple]': "multiple() ? '' : null",
-    '[attr.data-size]': "kjSize() === 'md' ? null : kjSize()",
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjSelectComponent {
-  readonly placeholder = input<string>('Select…');
-  readonly disabled = input(false);
-  readonly multiple = input(false);
-  readonly kjSize = input<'xs' | 'sm' | 'md' | 'lg'>('md');
-
-  private readonly select = inject(KjSelect);
-
-  /**
-   * Trigger element signal — sourced from the headless `KjSelect` root,
-   * which is set the moment the inner `KjSelectTrigger` directive
-   * constructs. No view-query lifecycle wait, so callers reading this
-   * inside an `effect()` see it resolve as soon as the select is mounted.
-   */
-  readonly triggerEl = this.select.triggerEl;
-
-  /** Focus the trigger button. Delegates to the headless root. */
-  focus(): void {
-    this.select.focus();
-  }
-
-  /** Direct projection-child query — every `<kj-option>` placed inside this
-   *  `<kj-select>` registers here. `forwardRef` is required because
-   *  `KjOptionComponent` is declared later in the same file. We resolve the
-   *  trigger label by matching the active value against each option's
-   *  `value` input, not by reading `KjListItem.label()` from the select's
-   *  deeper content (which doesn't reliably descend into a projected
-   *  component's view). */
-  private readonly options = contentChildren<KjOptionComponent>(
-    forwardRef(() => KjOptionComponent) as unknown as typeof KjOptionComponent,
-  );
-
-  /** Resolve a value to its matching option's label. Falls back to
-   *  `String(v)` only when no option has registered for that value yet. */
-  private labelFor(v: unknown): string {
-    for (const opt of this.options()) {
-      if (Object.is(opt.value(), v)) {
-        const explicit = opt.kjLabel();
-        return explicit || String(v);
-      }
-    }
-    return String(v);
-  }
-
-  readonly displayLabel = computed(() => {
-    const v = this.select.value();
-    if (v === undefined || v === null || v === '') return this.placeholder();
-    if (Array.isArray(v)) {
-      return v.length === 0
-        ? this.placeholder()
-        : v.map((entry) => this.labelFor(entry)).join(', ');
-    }
-    return this.labelFor(v);
-  });
-}
-
-/**
- * Single option row.
- * @doc
- * @doc-name select
- */
-@Component({
-  selector: 'kj-option',
-  standalone: true,
-  imports: [KjOption],
-  template: `<div kjOption [kjOptionValue]="value()" [kjOptionLabel]="kjLabel()" class="kj-option"><ng-content /></div>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjOptionComponent {
-  readonly value = input.required<unknown>();
-
-  /** Explicit label for the trigger's displayed text. The select wrapper
-   *  reads this via its own `contentChildren(KjOptionComponent)` query for
-   *  reliable label resolution that doesn't depend on KjListItem's
-   *  textContent-after-content-init lifecycle. */
-  readonly kjLabel = input<string>('');
-}

package/src/select/select.usage.example.ts

@@ -1,64 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjSelectComponent, KjOptionComponent } from './select';
-
-/**
- * A walkthrough of the most common select usages — a single-value picker
- * with a placeholder, a pre-selected value, and a disabled control. Use this
- * as the copy-paste starting point for forms.
- */
-@Component({
-  selector: 'kj-select-usage-example',
-  standalone: true,
-  imports: [KjSelectComponent, KjOptionComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-lg);
-        max-width: 18rem;
-      }
-      label {
-        display: grid;
-        gap: var(--kj-space-xs);
-        font-size: 0.875rem;
-        color: var(--kj-fg-default);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
-    <label>
-      Fruit (placeholder)
-      <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>
-    </label>
-
-    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
-    <label>
-      Country (pre-selected)
-      <kj-select [(value)]="country">
-        <kj-option [value]="'us'">United States</kj-option>
-        <kj-option [value]="'jp'">Japan</kj-option>
-        <kj-option [value]="'fr'">France</kj-option>
-      </kj-select>
-    </label>
-
-    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
-    <label>
-      Locked
-      <kj-select [(value)]="locked" [disabled]="true" placeholder="Read-only">
-        <kj-option [value]="'a'">Option A</kj-option>
-      </kj-select>
-    </label>
-  `,
-})
-export class KjSelectUsageExample {
-  readonly fruit = signal<string | undefined>(undefined);
-  readonly country = signal<string>('jp');
-  readonly locked = signal<string | undefined>(undefined);
-}

package/src/skeleton/_examples/index.ts

@@ -1,6 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjSkeletonAnimationsExample } from './skeleton.animations.example';
-export { KjSkeletonCardExample } from './skeleton.card.example';
-export { KjSkeletonExample } from './skeleton.example';
-export { KjSkeletonShapesExample } from './skeleton.shapes.example';

package/src/skeleton/_examples/skeleton.animations.example.ts

@@ -1,52 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjSkeletonComponent } from '../skeleton';
-
-/**
- * Animation presets — `shimmer` (the default sweep), `pulse` (opacity
- * oscillation), and `none` (static). The `none` value is the consumer-
- * side `prefers-reduced-motion` escape hatch; theme CSS additionally
- * suppresses every animation when the OS reports the preference.
- */
-@Component({
-  selector: 'kj-skeleton-animations-example',
-  standalone: true,
-  imports: [KjSkeletonComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-lg);
-      }
-      .row {
-        display: flex;
-        align-items: center;
-        gap: var(--kj-space-md);
-      }
-      .label {
-        min-width: 5rem;
-        font-size: 0.75rem;
-        color: var(--kj-fg-default);
-        opacity: 0.7;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <span class="label">shimmer</span>
-      <kj-skeleton kjSkeletonAnimation="shimmer" kjWidth="18rem" kjHeight="1.25rem" />
-    </div>
-    <div class="row">
-      <span class="label">pulse</span>
-      <kj-skeleton kjSkeletonAnimation="pulse" kjWidth="18rem" kjHeight="1.25rem" />
-    </div>
-    <div class="row">
-      <span class="label">none</span>
-      <kj-skeleton kjSkeletonAnimation="none" kjWidth="18rem" kjHeight="1.25rem" />
-    </div>
-  `,
-})
-export class KjSkeletonAnimationsExample {}

package/src/skeleton/_examples/skeleton.card.example.ts

@@ -1,68 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjSkeletonComponent } from '../skeleton';
-
-/**
- * Canonical card-skeleton recipe — an avatar-shaped circle, a title line
- * (60% width), and two body lines via the `text-block` shape, all inside
- * a region that carries the loading semantics the skeleton itself
- * intentionally does not.
- *
- * Note `aria-busy="true"` on the parent region: per `skeleton.md`, the
- * skeleton element is `aria-hidden` and silent; the *region* announces
- * the busy state to AT. A polite `role="status"` live region complements
- * this in a real app via `KjLiveRegion.announce('Loading…')`; here we
- * keep the demo declarative so the structure is self-evident.
- */
-@Component({
-  selector: 'kj-skeleton-card-example',
-  standalone: true,
-  imports: [KjSkeletonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .card {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-        padding: var(--kj-space-lg);
-        border: 1px solid var(--kj-border-default);
-        border-radius: var(--kj-radius-box, 0.75rem);
-        max-width: 24rem;
-      }
-      .header {
-        display: flex;
-        align-items: center;
-        gap: var(--kj-space-md);
-      }
-      .title-stack {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-xs, 0.25rem);
-        flex: 1 1 0;
-      }
-      .body {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-sm);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <section class="card" aria-busy="true" aria-label="Loading card content">
-      <div class="header">
-        <kj-skeleton kjSkeletonShape="circle" kjWidth="2.5rem" kjHeight="2.5rem" />
-        <div class="title-stack">
-          <kj-skeleton kjSkeletonShape="text" kjWidth="60%" kjHeight="1rem" />
-          <kj-skeleton kjSkeletonShape="text" kjWidth="40%" kjHeight="0.75rem" />
-        </div>
-      </div>
-      <div class="body">
-        <kj-skeleton kjSkeletonShape="text-block" [kjLines]="3" />
-      </div>
-    </section>
-  `,
-})
-export class KjSkeletonCardExample {}

package/src/skeleton/_examples/skeleton.example.ts

@@ -1,24 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjSkeletonComponent } from '../skeleton';
-
-/**
- * Default usage example for `KjSkeletonComponent` — a single rectangle
- * skeleton sized to stand in for a generic content block. Demonstrates
- * the bare-minimum recipe: pick a width / height, drop the wrapper in,
- * let the directive set `aria-hidden` and the shimmer paint.
- */
-@Component({
-  selector: 'kj-skeleton-example',
-  standalone: true,
-  imports: [KjSkeletonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-skeleton kjWidth="16rem" kjHeight="1.5rem" />`,
-})
-export class KjSkeletonExample {}

package/src/skeleton/_examples/skeleton.shapes.example.ts

@@ -1,55 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjSkeletonComponent } from '../skeleton';
-
-/**
- * Shape presets — `rectangle`, `circle`, `text`, `text-block` — laid out
- * side-by-side so the `data-shape` reflection and theme-side chrome are
- * visible against each other. The `text-block` wrapper expands into N
- * stacked text-shaped lines (the last at 60% width).
- */
-@Component({
-  selector: 'kj-skeleton-shapes-example',
-  standalone: true,
-  imports: [KjSkeletonComponent],
-  styles: [
-    `
-      :host {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: var(--kj-space-xl);
-      }
-      .cell {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-sm);
-      }
-      .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 class="cell">
-      <span class="label">rectangle</span>
-      <kj-skeleton kjSkeletonShape="rectangle" kjWidth="100%" kjHeight="3rem" />
-    </div>
-    <div class="cell">
-      <span class="label">circle</span>
-      <kj-skeleton kjSkeletonShape="circle" kjWidth="3rem" kjHeight="3rem" />
-    </div>
-    <div class="cell">
-      <span class="label">text</span>
-      <kj-skeleton kjSkeletonShape="text" kjWidth="14rem" />
-    </div>
-    <div class="cell">
-      <span class="label">text-block</span>
-      <kj-skeleton kjSkeletonShape="text-block" [kjLines]="3" />
-    </div>
-  `,
-})
-export class KjSkeletonShapesExample {}

package/src/skeleton/index.ts

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