@kouji-ui/components 0.1.1

package/src/slider/_examples/slider.vertical.example.ts

@@ -0,0 +1,48 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSliderComponent } from '../slider';
+
+/**
+ * Vertical slider — `kjOrientation="vertical"`. ArrowUp / ArrowDown still
+ * map to "increase" / "decrease" (as APG explicitly recommends), and the
+ * pointer math is mirrored to the Y axis (top of the track = `kjMax`).
+ *
+ * The wrapper supplies a sensible default height; consumers can override
+ * via the `--kj-slider-vertical-length` CSS custom property.
+ */
+@Component({
+  selector: 'kj-slider-vertical-example',
+  standalone: true,
+  imports: [KjSliderComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        gap: var(--kj-space-xl);
+        align-items: center;
+      }
+      .value {
+        font: 0.875rem var(--kj-font-mono, monospace);
+        color: var(--kj-fg-default);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-slider
+        kjOrientation="vertical"
+        [(kjValue)]="level"
+        [kjMin]="0"
+        [kjMax]="100"
+        kjAriaLabel="Audio level"
+      />
+      <span class="value">Level: {{ level() }}</span>
+    </div>
+  `,
+})
+export class KjSliderVerticalExample {
+  readonly level = signal<number>(60);
+}

package/src/slider/_examples/slider.with-marks.example.ts

@@ -0,0 +1,46 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSliderComponent } from '../slider';
+
+/**
+ * Discrete slider with auto-generated tick marks. `kjTicks="auto"` places
+ * a tick at every `kjStep`. Pointer drag and arrow keys snap to the
+ * lattice exactly as in the default mode — the ticks are decorative.
+ */
+@Component({
+  selector: 'kj-slider-with-marks-example',
+  standalone: true,
+  imports: [KjSliderComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-sm);
+      }
+      .value {
+        font: 0.875rem var(--kj-font-mono, monospace);
+        color: var(--kj-fg-default);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-slider
+        [(kjValue)]="rating"
+        [kjMin]="0"
+        [kjMax]="10"
+        [kjStep]="1"
+        kjTicks="auto"
+        kjAriaLabel="Rating"
+      />
+      <span class="value">Rating: {{ rating() }}/10</span>
+    </div>
+  `,
+})
+export class KjSliderWithMarksExample {
+  readonly rating = signal<number>(7);
+}

package/src/slider/index.ts

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

package/src/slider/slider.css

@@ -0,0 +1,172 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-slider — wrapper around the KjSlider directive family.
+
+   The directive layer is headless. This wrapper translates the
+   directive context into pixels: track height/width, thumb size,
+   filled-portion offsets via the --kj-slider-start / --kj-slider-end
+   custom properties published by [kjSliderRange].
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-slider {
+    --kj-slider-track-thickness:    0.375rem;        /* 6px */
+    --kj-slider-track-bg:           var(--kj-bg-field);
+    --kj-slider-fill-bg:            var(--kj-bg-primary);
+    --kj-slider-thumb-size:         1.25rem;         /* 20px visual */
+    --kj-slider-thumb-hit:          2.75rem;         /* 44px touch — WCAG 2.5.5 */
+    --kj-slider-thumb-bg:           var(--kj-bg-primary);
+    --kj-slider-thumb-fg:           var(--kj-fg-on-primary);
+    --kj-slider-thumb-border:       2px solid var(--kj-bg-body);
+    --kj-slider-tick-size:          0.25rem;         /* 4px */
+    --kj-slider-tick-bg:            var(--kj-fg-default);
+    --kj-slider-radius:             999px;
+    --kj-slider-vertical-length:    12rem;            /* 192px default */
+
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .kj-slider[data-orientation="horizontal"] {
+    width: 100%;
+    min-height: var(--kj-slider-thumb-hit);
+    padding: calc((var(--kj-slider-thumb-hit) - var(--kj-slider-track-thickness)) / 2) 0;
+  }
+
+  .kj-slider[data-orientation="vertical"] {
+    flex-direction: column;
+    height: var(--kj-slider-vertical-length);
+    min-width: var(--kj-slider-thumb-hit);
+    padding: 0 calc((var(--kj-slider-thumb-hit) - var(--kj-slider-track-thickness)) / 2);
+  }
+
+  .kj-slider[data-disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  /* ── Track ───────────────────────────────────────────────── */
+  .kj-slider__track {
+    position: relative;
+    flex: 1 1 auto;
+    background: var(--kj-slider-track-bg);
+    border-radius: var(--kj-slider-radius);
+    cursor: pointer;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__track {
+    height: var(--kj-slider-track-thickness);
+    width: 100%;
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__track {
+    width: var(--kj-slider-track-thickness);
+    height: 100%;
+  }
+
+  /* ── Range fill ──────────────────────────────────────────── */
+  .kj-slider__range {
+    position: absolute;
+    background: var(--kj-slider-fill-bg);
+    border-radius: inherit;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__range {
+    top: 0;
+    bottom: 0;
+    left: calc(var(--kj-slider-start, 0) * 100%);
+    right: calc((1 - var(--kj-slider-end, 0)) * 100%);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__range {
+    left: 0;
+    right: 0;
+    bottom: calc(var(--kj-slider-start, 0) * 100%);
+    top: calc((1 - var(--kj-slider-end, 0)) * 100%);
+  }
+
+  /* ── Thumb ───────────────────────────────────────────────── */
+  .kj-slider__thumb {
+    position: absolute;
+    width: var(--kj-slider-thumb-size);
+    height: var(--kj-slider-thumb-size);
+    background: var(--kj-slider-thumb-bg);
+    color: var(--kj-slider-thumb-fg);
+    border: var(--kj-slider-thumb-border);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+    cursor: grab;
+    padding: 0;
+    transition: transform var(--kj-transition, 120ms ease), box-shadow var(--kj-transition, 120ms ease);
+  }
+
+  .kj-slider__thumb:hover { transform: scale(1.05); }
+  .kj-slider__thumb[data-dragging] { cursor: grabbing; transform: scale(1.1); }
+
+  .kj-slider__thumb[data-focus-visible] {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 3px;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__thumb {
+    top: 50%;
+    left: calc(var(--kj-slider-thumb-fraction, 0) * 100%);
+    transform: translate(-50%, -50%);
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__thumb:hover {
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__thumb[data-dragging] {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__thumb {
+    left: 50%;
+    bottom: calc(var(--kj-slider-thumb-fraction, 0) * 100%);
+    transform: translate(-50%, 50%);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__thumb:hover {
+    transform: translate(-50%, 50%) scale(1.05);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__thumb[data-dragging] {
+    transform: translate(-50%, 50%) scale(1.1);
+  }
+
+  /* ── Tick marks (decorative) ─────────────────────────────── */
+  .kj-slider__ticks {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .kj-slider__tick {
+    position: absolute;
+    width: var(--kj-slider-tick-size);
+    height: var(--kj-slider-tick-size);
+    background: var(--kj-slider-tick-bg);
+    opacity: 0.5;
+    border-radius: 50%;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__tick {
+    top: 50%;
+    left: calc(var(--kj-slider-tick-fraction, 0) * 100%);
+    transform: translate(-50%, -50%);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__tick {
+    left: 50%;
+    bottom: calc(var(--kj-slider-tick-fraction, 0) * 100%);
+    transform: translate(-50%, 50%);
+  }
+
+  /* ── Reduced motion ──────────────────────────────────────── */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-slider__thumb { transition: none; }
+  }
+}

package/src/slider/slider.playground.ts

@@ -0,0 +1,88 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjSliderComponent } from './slider';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+const value = signal<number>(40);
+const min = signal<number>(0);
+const max = signal<number>(100);
+const step = signal<number>(5);
+const orientation = signal<'horizontal' | 'vertical'>('horizontal');
+const disabled = signal(false);
+const readonlyState = signal(false);
+
+@Component({
+  selector: 'kj-slider-playground',
+  standalone: true,
+  imports: [KjSliderComponent],
+  template: `
+    <kj-slider
+      [(kjValue)]="value"
+      [kjMin]="min()"
+      [kjMax]="max()"
+      [kjStep]="step()"
+      [kjOrientation]="orientation()"
+      [kjDisabled]="disabled()"
+      [kjReadonly]="readonlyState()"
+      kjAriaLabel="Volume"
+    />
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjSliderPlaygroundDemo {
+  protected readonly value = value;
+  protected readonly min = min;
+  protected readonly max = max;
+  protected readonly step = step;
+  protected readonly orientation = orientation;
+  protected readonly disabled = disabled;
+  protected readonly readonlyState = readonlyState;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjSliderPlaygroundDemo,
+  state: {
+    value: value as unknown as ReturnType<typeof signal>,
+    min: min as unknown as ReturnType<typeof signal>,
+    max: max as unknown as ReturnType<typeof signal>,
+    step: step as unknown as ReturnType<typeof signal>,
+    orientation: orientation as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+    readonlyState: readonlyState as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'number', name: 'value', label: 'value' },
+    { kind: 'number', name: 'min', label: 'min' },
+    { kind: 'number', name: 'max', label: 'max' },
+    { kind: 'number', name: 'step', label: 'step', min: 1 },
+    {
+      kind: 'chips',
+      name: 'orientation',
+      label: 'orientation',
+      options: ['horizontal', 'vertical'],
+    },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+    { kind: 'toggle', name: 'readonlyState', label: 'readonly' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      value: number;
+      min: number;
+      max: number;
+      step: number;
+      orientation: string;
+      disabled: boolean;
+      readonlyState: boolean;
+    };
+    const attrs: string[] = [
+      `[(kjValue)]="value"`,
+      `[kjMin]="${s.min}"`,
+      `[kjMax]="${s.max}"`,
+      `[kjStep]="${s.step}"`,
+      `kjOrientation="${s.orientation}"`,
+    ];
+    if (s.disabled) attrs.push('[kjDisabled]="true"');
+    if (s.readonlyState) attrs.push('[kjReadonly]="true"');
+    attrs.push('kjAriaLabel="Volume"');
+    return `<kj-slider\n  ${attrs.join('\n  ')}\n/>`;
+  },
+};

package/src/slider/slider.spec.ts

@@ -0,0 +1,139 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { KjSliderComponent } from './slider';
+
+@Component({
+  standalone: true,
+  imports: [KjSliderComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-slider
+      [(kjValue)]="value"
+      [kjMin]="min"
+      [kjMax]="max"
+      [kjStep]="step"
+      [kjDisabled]="disabled"
+      [kjOrientation]="orientation"
+      kjAriaLabel="Test slider"
+    />
+  `,
+})
+class SingleHost {
+  value = signal<number>(40);
+  min = 0;
+  max = 100;
+  step = 1;
+  disabled = false;
+  orientation: 'horizontal' | 'vertical' = 'horizontal';
+}
+
+@Component({
+  standalone: true,
+  imports: [KjSliderComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-slider
+      [(kjRange)]="range"
+      [kjMin]="0"
+      [kjMax]="100"
+      [kjStep]="1"
+      [kjMinDistance]="10"
+      kjStartAriaLabel="Lo"
+      kjEndAriaLabel="Hi"
+    />
+  `,
+})
+class RangeHost {
+  range = signal<[number, number]>([20, 80]);
+}
+
+describe('KjSliderComponent (single)', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [SingleHost] });
+  });
+
+  test('renders one thumb with role="slider"', () => {
+    const fixture = TestBed.createComponent(SingleHost);
+    fixture.detectChanges();
+    const thumbs = fixture.nativeElement.querySelectorAll('button.kj-slider__thumb');
+    expect(thumbs.length).toBe(1);
+    expect(thumbs[0].getAttribute('role')).toBe('slider');
+  });
+
+  test('renders the track and the range fill element', () => {
+    const fixture = TestBed.createComponent(SingleHost);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.kj-slider__track')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('.kj-slider__range')).not.toBeNull();
+  });
+
+  test('forwards initial value to the thumb aria-valuenow', () => {
+    const fixture = TestBed.createComponent(SingleHost);
+    fixture.detectChanges();
+    const thumb = fixture.nativeElement.querySelector('button.kj-slider__thumb');
+    expect(thumb.getAttribute('aria-valuenow')).toBe('40');
+  });
+
+  test('reflects aria-valuemin / valuemax from kjMin / kjMax', () => {
+    const fixture = TestBed.createComponent(SingleHost);
+    fixture.detectChanges();
+    const thumb = fixture.nativeElement.querySelector('button.kj-slider__thumb');
+    expect(thumb.getAttribute('aria-valuemin')).toBe('0');
+    expect(thumb.getAttribute('aria-valuemax')).toBe('100');
+  });
+
+  test('reflects orientation onto the wrapper', () => {
+    const fixture = TestBed.createComponent(SingleHost);
+    fixture.componentInstance.orientation = 'vertical';
+    fixture.detectChanges();
+    const root = fixture.nativeElement.querySelector('.kj-slider');
+    expect(root.getAttribute('data-orientation')).toBe('vertical');
+  });
+
+  test('forwards kjDisabled to the wrapper data attribute', () => {
+    const fixture = TestBed.createComponent(SingleHost);
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    const root = fixture.nativeElement.querySelector('.kj-slider');
+    expect(root.getAttribute('data-disabled')).toBe('');
+  });
+});
+
+describe('KjSliderComponent (range)', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [RangeHost] });
+  });
+
+  test('renders two thumbs with role="slider" each', () => {
+    const fixture = TestBed.createComponent(RangeHost);
+    fixture.detectChanges();
+    const thumbs = fixture.nativeElement.querySelectorAll('button.kj-slider__thumb');
+    expect(thumbs.length).toBe(2);
+    expect(thumbs[0].getAttribute('role')).toBe('slider');
+    expect(thumbs[1].getAttribute('role')).toBe('slider');
+  });
+
+  test('per-thumb aria-label uses the start / end labels', () => {
+    const fixture = TestBed.createComponent(RangeHost);
+    fixture.detectChanges();
+    const [low, high] = fixture.nativeElement.querySelectorAll('button.kj-slider__thumb');
+    expect(low.getAttribute('aria-label')).toBe('Lo');
+    expect(high.getAttribute('aria-label')).toBe('Hi');
+  });
+
+  test('forwards both range values onto the thumbs', () => {
+    const fixture = TestBed.createComponent(RangeHost);
+    fixture.detectChanges();
+    const [low, high] = fixture.nativeElement.querySelectorAll('button.kj-slider__thumb');
+    expect(low.getAttribute('aria-valuenow')).toBe('20');
+    expect(high.getAttribute('aria-valuenow')).toBe('80');
+  });
+
+  test('high thumb effective valuemin reflects low + minDistance', () => {
+    const fixture = TestBed.createComponent(RangeHost);
+    fixture.detectChanges();
+    const [, high] = fixture.nativeElement.querySelectorAll('button.kj-slider__thumb');
+    expect(high.getAttribute('aria-valuemin')).toBe('30');
+  });
+});