@kouji-ui/components 0.1.1

package/src/slider/slider.ts

@@ -0,0 +1,246 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  booleanAttribute,
+  computed,
+  input,
+  model,
+} from '@angular/core';
+import {
+  KjSlider,
+  KjSliderRange,
+  KjSliderThumb,
+  KjSliderTrack,
+} from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the headless `KjSlider` directive family.
+ *
+ * The host is `display: contents` — the directive's `[kjSlider]` lives on
+ * an inner `<div>` that renders the track, fill, ticks, and one or two
+ * focusable thumbs. Switch between single-thumb and range mode via the
+ * model bindings: bind `[(kjValue)]` for single (number), or
+ * `[(kjRange)]` for range (`[number, number]`).
+ *
+ * Inputs forward 1:1 to the directives below — bounds (`kjMin`, `kjMax`,
+ * `kjStep`, `kjPageStep`), orientation, RTL/inversion, range coordination
+ * (`kjMinDistance`, `kjAllowThumbCross`), tick definition, and the
+ * `aria-valuetext` formatter (`kjDisplayWith`). Per-thumb accessible
+ * names use `kjAriaLabel` (single) or `kjStartAriaLabel` /
+ * `kjEndAriaLabel` (range).
+ *
+ * @doc-example Default
+ *   A single-thumb 0–100 volume slider — the bare-minimum recipe.
+ *   @doc-file slider.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common usages — volume, price range, and a
+ *   stepped rating selector. Use this as the copy-paste starting point.
+ *   @doc-file slider.usage.example.ts
+ * @doc-example Range (two thumbs)
+ *   `[(kjRange)]` switches to two-thumb mode with min-distance coordination.
+ *   @doc-file slider.range.example.ts
+ * @doc-example With tick marks
+ *   `kjTicks="auto"` or a numeric array renders tick glyphs along the track.
+ *   @doc-file slider.with-marks.example.ts
+ * @doc-example Vertical
+ *   `kjOrientation="vertical"` flips the track and arrow-key mapping.
+ *   @doc-file slider.vertical.example.ts
+ * @doc-example Formatted value (Intl.NumberFormat)
+ *   `kjDisplayWith` shapes `aria-valuetext` for currency / unit / percent.
+ *   @doc-file slider.formatted.example.ts
+ *
+ * @doc-keyboard
+ *   ArrowRight|ArrowUp   — Increment focused thumb by `kjStep`
+ *   ArrowLeft|ArrowDown  — Decrement focused thumb by `kjStep`
+ *   PageUp               — Increment by `kjPageStep` (when > 0)
+ *   PageDown             — Decrement by `kjPageStep` (when > 0)
+ *   Home                 — Jump to `kjMin`
+ *   End                  — Jump to `kjMax`
+ *   Tab                  — Moves focus between thumbs (range mode) and out
+ *
+ * @doc-aria
+ *   role="slider"        — On each thumb `<button>`
+ *   aria-valuemin        — Reflects `kjMin`
+ *   aria-valuemax        — Reflects `kjMax`
+ *   aria-valuenow        — Reflects the thumb's current value
+ *   aria-valuetext       — Reflects `kjDisplayWith(value, thumbIndex)`
+ *   aria-orientation     — Reflects `horizontal` / `vertical`
+ *   aria-label           — Wired from `kjAriaLabel` (single) or `kjStartAriaLabel` / `kjEndAriaLabel` (range)
+ *   aria-disabled        — Reflected on thumbs when `kjDisabled` is true
+ *
+ * @doc-touch
+ *   Thumbs render at 1.25rem with a 44×44 hit-target halo via padding —
+ *   meets WCAG 2.5.5 on touch devices. The track itself accepts click-to-jump.
+ *
+ * @doc-a11y
+ *   Thumbs are real `<button>` elements so native focus, click, and form
+ *   semantics work. Each thumb owns its own accessible name — in range
+ *   mode use distinct `kjStartAriaLabel` / `kjEndAriaLabel` so SR users can
+ *   tell them apart. Pair with a visible `aria-valuetext` formatter when
+ *   the raw number is ambiguous (currency, dates, percentages).
+ *
+ * @doc-related number-input,progress-bar,form
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name slider
+ * @doc-description Themed single or range slider with ticks, vertical orientation, and Intl-formatted values.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-slider',
+  standalone: true,
+  imports: [KjSlider, KjSliderTrack, KjSliderRange, KjSliderThumb],
+  template: `
+    <div
+      kjSlider
+      class="kj-slider"
+      [(kjValue)]="kjValue"
+      [kjRange]="kjRange() ?? null!"
+      (kjRangeChange)="kjRange.set($event)"
+      [kjMin]="kjMin()"
+      [kjMax]="kjMax()"
+      [kjStep]="kjStep()"
+      [kjPageStep]="kjPageStep()"
+      [kjStepBase]="kjStepBase()"
+      [kjOrientation]="kjOrientation()"
+      [kjDirection]="kjDirection()"
+      [kjInverted]="kjInverted()"
+      [kjMinDistance]="kjMinDistance()"
+      [kjAllowThumbCross]="kjAllowThumbCross()"
+      [kjTicks]="kjTicks()"
+      [kjDisplayWith]="kjDisplayWith()"
+      [kjReadonly]="kjReadonly()"
+      [kjDisabled]="kjDisabled()"
+    >
+      <div kjSliderTrack class="kj-slider__track">
+        <div kjSliderRange class="kj-slider__range"></div>
+
+        @if (resolvedTicks().length > 0) {
+          <div class="kj-slider__ticks" aria-hidden="true">
+            @for (t of resolvedTicks(); track t.value) {
+              <span
+                class="kj-slider__tick"
+                [style.--kj-slider-tick-fraction]="t.fraction"
+              ></span>
+            }
+          </div>
+        }
+
+        @if (isRange()) {
+          <!--
+            In range mode, the root's [(kjRange)] fans out to both
+            thumbs via the KjSlider directive's range effect after
+            DOM-order sort. We do not pass [kjValue] here because the
+            DOM-order resolution runs in afterNextRender (the elements
+            are not yet connected at directive-construction time), so
+            the root is the canonical writer.
+          -->
+          <button
+            type="button"
+            kjSliderThumb
+            class="kj-slider__thumb"
+            [attr.aria-label]="kjStartAriaLabel()"
+            [kjAriaLabel]="kjStartAriaLabel()"
+            [kjDisabled]="kjDisabled()"
+          ></button>
+          <button
+            type="button"
+            kjSliderThumb
+            class="kj-slider__thumb"
+            [attr.aria-label]="kjEndAriaLabel()"
+            [kjAriaLabel]="kjEndAriaLabel()"
+            [kjDisabled]="kjDisabled()"
+          ></button>
+        } @else {
+          <button
+            type="button"
+            kjSliderThumb
+            class="kj-slider__thumb"
+            [kjValue]="singleValue()"
+            [attr.aria-label]="kjAriaLabel()"
+            [kjAriaLabel]="kjAriaLabel()"
+            [kjDisabled]="kjDisabled()"
+          ></button>
+        }
+      </div>
+    </div>
+  `,
+  styleUrl: './slider.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjSliderComponent {
+  /** Single-thumb value. Mutually exclusive with `kjRange`. */
+  readonly kjValue = model<number>(0);
+
+  /** Range-mode value tuple. Setting this switches to two-thumb mode. */
+  readonly kjRange = model<readonly [number, number] | undefined>(undefined);
+
+  readonly kjMin = input<number>(0);
+  readonly kjMax = input<number>(100);
+  readonly kjStep = input<number>(1);
+  readonly kjPageStep = input<number>(0);
+  readonly kjStepBase = input<number>(0);
+
+  readonly kjOrientation = input<'horizontal' | 'vertical'>('horizontal');
+  readonly kjDirection = input<'ltr' | 'rtl' | 'auto'>('auto');
+  readonly kjInverted = input(false, { transform: booleanAttribute });
+
+  readonly kjMinDistance = input<number>(0);
+  readonly kjAllowThumbCross = input(false, { transform: booleanAttribute });
+
+  readonly kjTicks = input<readonly number[] | 'auto' | false>(false);
+
+  readonly kjDisplayWith = input<(value: number, thumbIndex: number) => string>(
+    (value: number) => String(value),
+  );
+
+  readonly kjReadonly = input(false, { transform: booleanAttribute });
+  readonly kjDisabled = input(false, { transform: booleanAttribute });
+
+  /** Single-mode accessible label. */
+  readonly kjAriaLabel = input<string>('');
+
+  /** Range-mode accessible label for the lower thumb. */
+  readonly kjStartAriaLabel = input<string>('Minimum');
+
+  /** Range-mode accessible label for the upper thumb. */
+  readonly kjEndAriaLabel = input<string>('Maximum');
+
+  /** True when the consumer has bound `[(kjRange)]` or set both bounds. */
+  protected readonly isRange = computed(() => this.kjRange() !== undefined);
+
+  protected readonly singleValue = computed(() => this.kjValue() ?? this.kjMin());
+  protected readonly rangeLow = computed(() => this.kjRange()?.[0] ?? this.kjMin());
+  protected readonly rangeHigh = computed(() => this.kjRange()?.[1] ?? this.kjMax());
+
+  /** Tick array resolved into `{ value, fraction }` for the wrapper to render. */
+  protected readonly resolvedTicks = computed(() => {
+    const t = this.kjTicks();
+    const min = this.kjMin();
+    const max = this.kjMax();
+    const step = this.kjStep();
+    const inverted = this.kjInverted();
+    const range = max - min;
+    if (range <= 0) return [];
+
+    let values: number[] = [];
+    if (t === false) values = [];
+    else if (Array.isArray(t)) values = [...t];
+    else if (t === 'auto' && step > 0) {
+      const count = Math.floor(range / step) + 1;
+      if (count > 100) return [];
+      for (let i = 0; i < count; i++) values.push(min + i * step);
+    }
+    return values.map((v) => {
+      let f = (v - min) / range;
+      if (f < 0) f = 0;
+      else if (f > 1) f = 1;
+      if (inverted) f = 1 - f;
+      return { value: v, fraction: f };
+    });
+  });
+}

package/src/slider/slider.usage.example.ts

@@ -0,0 +1,68 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSliderComponent } from './slider';
+
+/**
+ * A walkthrough of the most common slider usages — a volume slider, a
+ * range price picker, and a stepped rating selector. Use this as the
+ * copy-paste starting point for new screens.
+ */
+@Component({
+  selector: 'kj-slider-usage-example',
+  standalone: true,
+  imports: [KjSliderComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-xl);
+      }
+      .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)]="volume" kjAriaLabel="Volume" />
+      <span class="value">Volume: {{ volume() }}</span>
+    </div>
+
+    <div class="row">
+      <kj-slider
+        [(kjRange)]="price"
+        [kjMin]="0"
+        [kjMax]="500"
+        [kjStep]="5"
+        [kjMinDistance]="20"
+        kjStartAriaLabel="Lowest price"
+        kjEndAriaLabel="Highest price"
+      />
+      <span class="value">\${{ price()[0] }} – \${{ price()[1] }}</span>
+    </div>
+
+    <div class="row">
+      <kj-slider
+        [(kjValue)]="rating"
+        [kjMin]="0"
+        [kjMax]="5"
+        [kjStep]="1"
+        [kjTicks]="'auto'"
+        kjAriaLabel="Rating"
+      />
+      <span class="value">Rating: {{ rating() }} / 5</span>
+    </div>
+  `,
+})
+export class KjSliderUsageExample {
+  readonly volume = signal<number>(40);
+  readonly price = signal<readonly [number, number]>([100, 350]);
+  readonly rating = signal<number>(3);
+}

package/src/speed-dial/_examples/index.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjSpeedDialDirectionsExample } from './speed-dial.directions.example';
+export { KjSpeedDialDisabledExample } from './speed-dial.disabled.example';
+export { KjSpeedDialExample } from './speed-dial.example';
+export { KjSpeedDialUsageExample } from './speed-dial.usage.example';
+export { KjSpeedDialWithTooltipsExample } from './speed-dial.with-tooltips.example';

package/src/speed-dial/_examples/speed-dial.directions.example.ts

@@ -0,0 +1,85 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjSpeedDialActionComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+} from '../speed-dial';
+
+/**
+ * Four dials in the same example, each fanning out in a different direction.
+ *
+ * `kjDirection` controls the visual axis only — the keyboard contract is the
+ * same regardless of direction (Enter/Space to toggle, Escape to close).
+ */
+@Component({
+  selector: 'kj-speed-dial-directions-example',
+  standalone: true,
+  imports: [
+    KjSpeedDialComponent,
+    KjSpeedDialTriggerComponent,
+    KjSpeedDialActionsComponent,
+    KjSpeedDialActionComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--kj-space-2xl);
+        padding: var(--kj-space-2xl);
+        min-height: 22rem;
+      }
+      .kj-speed-dial-directions__cell {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--kj-radius-box);
+        min-height: 8rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="kj-speed-dial-directions__cell">
+      <kj-speed-dial kjDirection="up" kjPosition="static">
+        <kj-speed-dial-trigger kjAriaLabel="Open up-direction dial">+</kj-speed-dial-trigger>
+        <kj-speed-dial-actions>
+          <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          <kj-speed-dial-action kjAriaLabel="B">B</kj-speed-dial-action>
+        </kj-speed-dial-actions>
+      </kj-speed-dial>
+    </div>
+
+    <div class="kj-speed-dial-directions__cell">
+      <kj-speed-dial kjDirection="down" kjPosition="static">
+        <kj-speed-dial-trigger kjAriaLabel="Open down-direction dial">+</kj-speed-dial-trigger>
+        <kj-speed-dial-actions>
+          <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          <kj-speed-dial-action kjAriaLabel="B">B</kj-speed-dial-action>
+        </kj-speed-dial-actions>
+      </kj-speed-dial>
+    </div>
+
+    <div class="kj-speed-dial-directions__cell">
+      <kj-speed-dial kjDirection="left" kjPosition="static">
+        <kj-speed-dial-trigger kjAriaLabel="Open left-direction dial">+</kj-speed-dial-trigger>
+        <kj-speed-dial-actions>
+          <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          <kj-speed-dial-action kjAriaLabel="B">B</kj-speed-dial-action>
+        </kj-speed-dial-actions>
+      </kj-speed-dial>
+    </div>
+
+    <div class="kj-speed-dial-directions__cell">
+      <kj-speed-dial kjDirection="right" kjPosition="static">
+        <kj-speed-dial-trigger kjAriaLabel="Open right-direction dial">+</kj-speed-dial-trigger>
+        <kj-speed-dial-actions>
+          <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          <kj-speed-dial-action kjAriaLabel="B">B</kj-speed-dial-action>
+        </kj-speed-dial-actions>
+      </kj-speed-dial>
+    </div>
+  `,
+})
+export class KjSpeedDialDirectionsExample {}

package/src/speed-dial/_examples/speed-dial.disabled.example.ts

@@ -0,0 +1,71 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjSpeedDialActionComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+} from '../speed-dial';
+
+/**
+ * Disabled state — the entire dial does not open.
+ *
+ * Demonstrates two variants side by side: a fully disabled dial (`kjDisabled`
+ * on the root) and a dial with a single disabled action. Both rely on
+ * `aria-disabled` rather than the native `disabled` attribute so the buttons
+ * remain focusable for AT discoverability (kouji's WCAG AAA stance).
+ */
+@Component({
+  selector: 'kj-speed-dial-disabled-example',
+  standalone: true,
+  imports: [
+    KjSpeedDialComponent,
+    KjSpeedDialTriggerComponent,
+    KjSpeedDialActionsComponent,
+    KjSpeedDialActionComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--kj-space-2xl);
+        padding: var(--kj-space-2xl);
+        min-height: 18rem;
+      }
+      .kj-speed-dial-disabled__cell {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--kj-radius-box);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="kj-speed-dial-disabled__cell">
+      <kj-speed-dial [kjDisabled]="true" kjPosition="static">
+        <kj-speed-dial-trigger kjAriaLabel="Open (disabled)" [kjDisabled]="true"
+          >+</kj-speed-dial-trigger
+        >
+        <kj-speed-dial-actions>
+          <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
+          <kj-speed-dial-action kjAriaLabel="B">B</kj-speed-dial-action>
+        </kj-speed-dial-actions>
+      </kj-speed-dial>
+    </div>
+
+    <div class="kj-speed-dial-disabled__cell">
+      <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-action kjAriaLabel="Archive (disabled)" [kjDisabled]="true"
+            >A</kj-speed-dial-action
+          >
+          <kj-speed-dial-action kjAriaLabel="Share">S</kj-speed-dial-action>
+        </kj-speed-dial-actions>
+      </kj-speed-dial>
+    </div>
+  `,
+})
+export class KjSpeedDialDisabledExample {}

package/src/speed-dial/_examples/speed-dial.example.ts

@@ -0,0 +1,48 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjSpeedDialActionComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+} from '../speed-dial';
+
+/**
+ * Default Speed Dial — bottom-right viewport anchor, three actions fanning
+ * upward. Click the FAB to expand; click an action or press Escape to close.
+ *
+ * The example uses `kjPosition="static"` inside the docs so the dial sits
+ * inside the example pane rather than floating in the global viewport.
+ */
+@Component({
+  selector: 'kj-speed-dial-example',
+  standalone: true,
+  imports: [
+    KjSpeedDialComponent,
+    KjSpeedDialTriggerComponent,
+    KjSpeedDialActionsComponent,
+    KjSpeedDialActionComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        padding: var(--kj-space-2xl);
+        min-height: 18rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-speed-dial kjDirection="up" kjPosition="static">
+      <kj-speed-dial-trigger kjAriaLabel="Open quick actions">+</kj-speed-dial-trigger>
+      <kj-speed-dial-actions>
+        <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
+        <kj-speed-dial-action kjAriaLabel="Share">S</kj-speed-dial-action>
+        <kj-speed-dial-action kjAriaLabel="Delete" kjVariant="destructive">D</kj-speed-dial-action>
+      </kj-speed-dial-actions>
+    </kj-speed-dial>
+  `,
+})
+export class KjSpeedDialExample {}

package/src/speed-dial/_examples/speed-dial.usage.example.ts

@@ -0,0 +1,59 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjSpeedDialActionComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+} from '../speed-dial';
+
+/**
+ * A walkthrough of the most common speed-dial usages — fan-out direction,
+ * destructive accent on a single action, and a click handler that toggles a
+ * counter. Use this as the copy-paste starting point.
+ */
+@Component({
+  selector: 'kj-speed-dial-usage-example',
+  standalone: true,
+  imports: [
+    KjSpeedDialComponent,
+    KjSpeedDialTriggerComponent,
+    KjSpeedDialActionsComponent,
+    KjSpeedDialActionComponent,
+  ],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+        align-items: flex-end;
+        padding: var(--kj-space-2xl);
+        min-height: 16rem;
+      }
+      .count {
+        font: 0.875rem var(--kj-font-sans);
+        color: var(--kj-fg-default);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <p class="count">Actions invoked: {{ count() }}</p>
+    <kj-speed-dial kjDirection="up" kjPosition="static">
+      <kj-speed-dial-trigger kjAriaLabel="Open quick actions">+</kj-speed-dial-trigger>
+      <kj-speed-dial-actions>
+        <kj-speed-dial-action kjAriaLabel="Edit" (click)="bump()">E</kj-speed-dial-action>
+        <kj-speed-dial-action kjAriaLabel="Share" (click)="bump()">S</kj-speed-dial-action>
+        <kj-speed-dial-action kjAriaLabel="Delete" kjVariant="destructive" (click)="bump()"
+          >D</kj-speed-dial-action
+        >
+      </kj-speed-dial-actions>
+    </kj-speed-dial>
+  `,
+})
+export class KjSpeedDialUsageExample {
+  readonly count = signal(0);
+  bump(): void {
+    this.count.update((c) => c + 1);
+  }
+}

package/src/speed-dial/_examples/speed-dial.with-tooltips.example.ts

@@ -0,0 +1,65 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import {
+  KjSpeedDialActionComponent,
+  KjSpeedDialActionsComponent,
+  KjSpeedDialComponent,
+  KjSpeedDialTriggerComponent,
+} from '../speed-dial';
+import { KjTooltipTrigger, KjTooltipContent } from '../../tooltip/tooltip';
+
+/**
+ * Speed Dial where each action button has a tooltip describing the action.
+ *
+ * The action's `kjAriaLabel` is the AT-visible name; the tooltip is purely a
+ * sighted-user supplement.
+ */
+@Component({
+  selector: 'kj-speed-dial-with-tooltips-example',
+  standalone: true,
+  imports: [
+    KjSpeedDialComponent,
+    KjSpeedDialTriggerComponent,
+    KjSpeedDialActionsComponent,
+    KjSpeedDialActionComponent,
+    KjTooltipTrigger,
+    KjTooltipContent,
+  ],
+  styles: [
+    `
+      :host {
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        padding: var(--kj-space-2xl);
+        min-height: 18rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-speed-dial kjDirection="up" kjPosition="static">
+      <kj-speed-dial-trigger kjAriaLabel="Open quick actions">+</kj-speed-dial-trigger>
+      <kj-speed-dial-actions>
+        <kj-speed-dial-action kjTooltipTrigger #editT="kjTooltipTrigger" kjAriaLabel="Edit"
+          >E</kj-speed-dial-action
+        >
+        <kj-tooltip-content [kjFor]="editT" kjSide="left">Edit document</kj-tooltip-content>
+
+        <kj-speed-dial-action kjTooltipTrigger #shareT="kjTooltipTrigger" kjAriaLabel="Share"
+          >S</kj-speed-dial-action
+        >
+        <kj-tooltip-content [kjFor]="shareT" kjSide="left">Share with team</kj-tooltip-content>
+
+        <kj-speed-dial-action
+          kjTooltipTrigger
+          #deleteT="kjTooltipTrigger"
+          kjAriaLabel="Delete"
+          kjVariant="destructive"
+          >D</kj-speed-dial-action
+        >
+        <kj-tooltip-content [kjFor]="deleteT" kjSide="left">Move to trash</kj-tooltip-content>
+      </kj-speed-dial-actions>
+    </kj-speed-dial>
+  `,
+})
+export class KjSpeedDialWithTooltipsExample {}

package/src/speed-dial/index.ts

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