@kouji-ui/components 0.1.1 → 0.1.2

package/src/slider/slider.ts

@@ -1,246 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,7 +0,0 @@
-// 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

@@ -1,85 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

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