@kouji-ui/components 0.1.1

package/src/speed-dial/speed-dial.css

@@ -0,0 +1,137 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-speed-dial — viewport-anchored FAB + fan-out action cluster
+   The root component is a positioning shell (fixed when
+   data-position="*-*"). The trigger and actions are buttons that
+   theme through .kj-button — overrides target the kj-button-*
+   tokens so theme presets still apply.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-speed-dial {
+    --kj-speed-dial-gap:           var(--kj-space-md);
+    --kj-speed-dial-edge:          var(--kj-space-2xl);
+    --kj-speed-dial-trigger-size:  3.5rem;
+    --kj-speed-dial-action-size:   2.75rem;
+    --kj-speed-dial-shadow:        0 6px 16px rgb(0 0 0 / 0.18);
+    --kj-speed-dial-stagger:       30ms;
+    --kj-speed-dial-duration:      180ms;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--kj-speed-dial-gap);
+    z-index: 100;
+  }
+
+  .kj-speed-dial[data-direction='up']    { flex-direction: column-reverse; }
+  .kj-speed-dial[data-direction='down']  { flex-direction: column; }
+  .kj-speed-dial[data-direction='left']  { flex-direction: row-reverse; }
+  .kj-speed-dial[data-direction='right'] { flex-direction: row; }
+
+  .kj-speed-dial[data-position='bottom-right'] {
+    position: fixed;
+    right:  var(--kj-speed-dial-edge);
+    bottom: var(--kj-speed-dial-edge);
+  }
+  .kj-speed-dial[data-position='bottom-left'] {
+    position: fixed;
+    left:   var(--kj-speed-dial-edge);
+    bottom: var(--kj-speed-dial-edge);
+  }
+  .kj-speed-dial[data-position='top-right'] {
+    position: fixed;
+    right: var(--kj-speed-dial-edge);
+    top:   var(--kj-speed-dial-edge);
+  }
+  .kj-speed-dial[data-position='top-left'] {
+    position: fixed;
+    left: var(--kj-speed-dial-edge);
+    top:  var(--kj-speed-dial-edge);
+  }
+
+  .kj-speed-dial-trigger {
+    --kj-button-radius:    9999px;
+    --kj-button-padding-x: 0;
+    --kj-button-padding-y: 0;
+    --kj-button-shadow:    var(--kj-speed-dial-shadow);
+
+    width:  var(--kj-speed-dial-trigger-size);
+    height: var(--kj-speed-dial-trigger-size);
+    min-width: var(--kj-speed-dial-trigger-size);
+    flex: 0 0 auto;
+  }
+
+  .kj-speed-dial-trigger[data-state='open'] > * {
+    transform: rotate(45deg);
+    transition: transform var(--kj-speed-dial-duration) ease;
+  }
+  .kj-speed-dial-trigger > * {
+    display: inline-flex;
+    transition: transform var(--kj-speed-dial-duration) ease;
+  }
+
+  .kj-speed-dial-actions {
+    display: inline-flex;
+    gap: var(--kj-speed-dial-gap);
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--kj-speed-dial-duration) ease;
+  }
+  .kj-speed-dial-actions[data-direction='up']    { flex-direction: column-reverse; }
+  .kj-speed-dial-actions[data-direction='down']  { flex-direction: column; }
+  .kj-speed-dial-actions[data-direction='left']  { flex-direction: row-reverse; }
+  .kj-speed-dial-actions[data-direction='right'] { flex-direction: row; }
+
+  .kj-speed-dial-actions[aria-hidden='true'] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .kj-speed-dial-actions[data-expanded] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .kj-speed-dial-actions[data-direction='up']    > * { transform: translateY(8px); }
+  .kj-speed-dial-actions[data-direction='down']  > * { transform: translateY(-8px); }
+  .kj-speed-dial-actions[data-direction='left']  > * { transform: translateX(8px); }
+  .kj-speed-dial-actions[data-direction='right'] > * { transform: translateX(-8px); }
+  .kj-speed-dial-actions[data-expanded] > * {
+    transform: translate3d(0, 0, 0);
+    transition: transform var(--kj-speed-dial-duration) ease,
+                opacity   var(--kj-speed-dial-duration) ease;
+    transition-delay: calc(var(--kj-speed-dial-stagger) * var(--kj-speed-dial-i, 0));
+  }
+  .kj-speed-dial-actions > *:nth-child(1) { --kj-speed-dial-i: 0; }
+  .kj-speed-dial-actions > *:nth-child(2) { --kj-speed-dial-i: 1; }
+  .kj-speed-dial-actions > *:nth-child(3) { --kj-speed-dial-i: 2; }
+  .kj-speed-dial-actions > *:nth-child(4) { --kj-speed-dial-i: 3; }
+  .kj-speed-dial-actions > *:nth-child(5) { --kj-speed-dial-i: 4; }
+  .kj-speed-dial-actions > *:nth-child(6) { --kj-speed-dial-i: 5; }
+
+  .kj-speed-dial-action {
+    --kj-button-radius:    9999px;
+    --kj-button-padding-x: 0;
+    --kj-button-padding-y: 0;
+    --kj-button-shadow:    var(--kj-speed-dial-shadow);
+
+    width:  var(--kj-speed-dial-action-size);
+    height: var(--kj-speed-dial-action-size);
+    min-width: var(--kj-speed-dial-action-size);
+    flex: 0 0 auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-speed-dial-trigger > *,
+    .kj-speed-dial-actions,
+    .kj-speed-dial-actions > * {
+      transition: none;
+    }
+    .kj-speed-dial-actions > * {
+      transform: none;
+    }
+  }
+}

package/src/speed-dial/speed-dial.playground.ts

@@ -0,0 +1,137 @@
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import {
+  KjSpeedDialActionComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+} from './speed-dial';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+type KjSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+type KjSpeedDialPosition = 'static' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+
+const direction = signal<KjSpeedDialDirection>('up');
+const position = signal<KjSpeedDialPosition>('static');
+const actionCount = signal<2 | 3 | 4 | 5>(3);
+const triggerVariant = signal<'default' | 'outline' | 'ghost' | 'destructive'>('default');
+const disabled = signal(false);
+const openOnHover = signal(false);
+
+const ACTIONS: ReadonlyArray<{ label: string; glyph: string }> = [
+  { label: 'Edit', glyph: 'E' },
+  { label: 'Share', glyph: 'S' },
+  { label: 'Delete', glyph: 'D' },
+  { label: 'Archive', glyph: 'A' },
+  { label: 'Pin', glyph: 'P' },
+];
+
+@Component({
+  selector: 'kj-speed-dial-playground',
+  standalone: true,
+  imports: [
+    KjSpeedDialComponent,
+    KjSpeedDialTriggerComponent,
+    KjSpeedDialActionsComponent,
+    KjSpeedDialActionComponent,
+  ],
+  template: `
+    <kj-speed-dial
+      [kjDirection]="direction()"
+      [kjPosition]="position()"
+      [kjDisabled]="disabled()"
+      [kjOpenOnHover]="openOnHover()"
+    >
+      <kj-speed-dial-trigger
+        [kjVariant]="triggerVariant()"
+        kjAriaLabel="Open quick actions"
+      >
+        +
+      </kj-speed-dial-trigger>
+      <kj-speed-dial-actions>
+        @for (action of visibleActions(); track action.label) {
+          <kj-speed-dial-action [kjAriaLabel]="action.label">
+            {{ action.glyph }}
+          </kj-speed-dial-action>
+        }
+      </kj-speed-dial-actions>
+    </kj-speed-dial>
+  `,
+  styles: [`
+    :host {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+      padding: var(--kj-space-2xl);
+      min-height: 14rem;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjSpeedDialPlaygroundDemo {
+  protected readonly direction = direction;
+  protected readonly position = position;
+  protected readonly actionCount = actionCount;
+  protected readonly triggerVariant = triggerVariant;
+  protected readonly disabled = disabled;
+  protected readonly openOnHover = openOnHover;
+
+  protected readonly visibleActions = computed(() => ACTIONS.slice(0, actionCount()));
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjSpeedDialPlaygroundDemo,
+  state: {
+    direction: direction as unknown as ReturnType<typeof signal>,
+    position: position as unknown as ReturnType<typeof signal>,
+    actionCount: actionCount as unknown as ReturnType<typeof signal>,
+    triggerVariant: triggerVariant as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+    openOnHover: openOnHover as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    {
+      kind: 'chips',
+      name: 'direction',
+      label: 'direction',
+      options: ['up', 'down', 'left', 'right'],
+    },
+    {
+      kind: 'chips',
+      name: 'position',
+      label: 'position',
+      options: ['static', 'bottom-right', 'bottom-left', 'top-right', 'top-left'],
+    },
+    { kind: 'chips', name: 'actionCount', label: 'actions', options: [2, 3, 4, 5] },
+    {
+      kind: 'chips',
+      name: 'triggerVariant',
+      label: 'trigger variant',
+      options: ['default', 'outline', 'ghost', 'destructive'],
+    },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+    { kind: 'toggle', name: 'openOnHover', label: 'open on hover' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      direction: string;
+      position: string;
+      actionCount: number;
+      triggerVariant: string;
+      disabled: boolean;
+      openOnHover: boolean;
+    };
+    const attrs: string[] = [
+      `kjDirection="${s.direction}"`,
+      `kjPosition="${s.position}"`,
+    ];
+    if (s.disabled) attrs.push('[kjDisabled]="true"');
+    if (s.openOnHover) attrs.push('[kjOpenOnHover]="true"');
+    const actions = ACTIONS.slice(0, s.actionCount)
+      .map(
+        (a) =>
+          `    <kj-speed-dial-action kjAriaLabel="${a.label}">${a.glyph}</kj-speed-dial-action>`,
+      )
+      .join('\n');
+    return `<kj-speed-dial\n  ${attrs.join('\n  ')}\n>\n  <kj-speed-dial-trigger kjVariant="${s.triggerVariant}" kjAriaLabel="Open quick actions">+</kj-speed-dial-trigger>\n  <kj-speed-dial-actions>\n${actions}\n  </kj-speed-dial-actions>\n</kj-speed-dial>`;
+  },
+};

package/src/speed-dial/speed-dial.spec.ts

@@ -0,0 +1,191 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import {
+  KjSpeedDialActionComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+} from './speed-dial';
+
+const wrappers = [
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialActionComponent,
+];
+
+describe('KjSpeedDialComponent (wrapper)', () => {
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({});
+  });
+
+  test('renders a trigger and actions container with menu role', () => {
+    @Component({
+      standalone: true,
+      imports: wrappers,
+      template: `
+        <kj-speed-dial kjPosition="static">
+          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
+          <kj-speed-dial-actions>
+            <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
+          </kj-speed-dial-actions>
+        </kj-speed-dial>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+
+    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
+    expect(trigger).not.toBeNull();
+    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(trigger.getAttribute('aria-label')).toBe('Open');
+
+    const actionsContainer = fixture.nativeElement.querySelector('kj-speed-dial-actions') as HTMLElement;
+    expect(actionsContainer).not.toBeNull();
+    expect(actionsContainer.getAttribute('role')).toBe('menu');
+    expect(actionsContainer.getAttribute('aria-hidden')).toBe('true');
+    expect(trigger.getAttribute('aria-controls')).toBe(actionsContainer.id);
+
+    const action = fixture.nativeElement.querySelector('button.kj-speed-dial-action') as HTMLButtonElement;
+    expect(action).not.toBeNull();
+    expect(action.getAttribute('role')).toBe('menuitem');
+  });
+
+  test('clicking the trigger toggles aria-expanded and reveals actions', () => {
+    @Component({
+      standalone: true,
+      imports: wrappers,
+      template: `
+        <kj-speed-dial kjPosition="static">
+          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
+          <kj-speed-dial-actions>
+            <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
+          </kj-speed-dial-actions>
+        </kj-speed-dial>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+
+    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
+    const actions = fixture.nativeElement.querySelector('kj-speed-dial-actions') as HTMLElement;
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(actions.getAttribute('aria-hidden')).toBeNull();
+    expect(actions.getAttribute('data-expanded')).toBe('');
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(actions.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  test('reflects kjDirection as data-direction on the host and actions', () => {
+    @Component({
+      standalone: true,
+      imports: wrappers,
+      template: `
+        <kj-speed-dial kjDirection="right" kjPosition="static">
+          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
+          <kj-speed-dial-actions>
+            <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          </kj-speed-dial-actions>
+        </kj-speed-dial>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement.querySelector('kj-speed-dial') as HTMLElement;
+    const actions = fixture.nativeElement.querySelector('kj-speed-dial-actions') as HTMLElement;
+    expect(root.getAttribute('data-direction')).toBe('right');
+    expect(actions.getAttribute('data-direction')).toBe('right');
+  });
+
+  test('reflects kjPosition as data-position', () => {
+    @Component({
+      standalone: true,
+      imports: wrappers,
+      template: `
+        <kj-speed-dial kjPosition="bottom-left">
+          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
+          <kj-speed-dial-actions>
+            <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          </kj-speed-dial-actions>
+        </kj-speed-dial>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+    const root = fixture.nativeElement.querySelector('kj-speed-dial') as HTMLElement;
+    expect(root.getAttribute('data-position')).toBe('bottom-left');
+  });
+
+  test('clicking an action closes the dial', () => {
+    @Component({
+      standalone: true,
+      imports: wrappers,
+      template: `
+        <kj-speed-dial kjPosition="static">
+          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
+          <kj-speed-dial-actions>
+            <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
+          </kj-speed-dial-actions>
+        </kj-speed-dial>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+
+    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
+    const action = fixture.nativeElement.querySelector('button.kj-speed-dial-action') as HTMLButtonElement;
+
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+
+    action.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  test('kjDisabled on the root prevents opening', () => {
+    @Component({
+      standalone: true,
+      imports: wrappers,
+      template: `
+        <kj-speed-dial [kjDisabled]="true" kjPosition="static">
+          <kj-speed-dial-trigger kjAriaLabel="Open" [kjDisabled]="true">+</kj-speed-dial-trigger>
+          <kj-speed-dial-actions>
+            <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          </kj-speed-dial-actions>
+        </kj-speed-dial>
+      `,
+    })
+    class Host {}
+
+    const fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+
+    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+  });
+});