@kouji-ui/components 0.1.1 → 0.1.3

package/src/carousel/_examples/carousel.autoplay.example.ts

@@ -1,69 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCarouselComponent,
-  KjCarouselViewportComponent,
-  KjCarouselSlideComponent,
-  KjCarouselPreviousComponent,
-  KjCarouselNextComponent,
-  KjCarouselIndicatorsComponent,
-  KjCarouselAutoplayComponent,
-  KjCarouselPauseComponent,
-} from '../carousel';
-
-/**
- * Autoplay with the WCAG 2.2.2-required pause control. Delay is set to 6000 ms
- * (over the 5-second threshold), so the pause button is mandatory. Hover and
- * focus auto-pause are on by default; under
- * `prefers-reduced-motion: reduce` autoplay never starts and the pause button
- * is rendered disabled.
- */
-@Component({
-  selector: 'kj-carousel-autoplay-example',
-  standalone: true,
-  imports: [
-    KjCarouselComponent,
-    KjCarouselViewportComponent,
-    KjCarouselSlideComponent,
-    KjCarouselPreviousComponent,
-    KjCarouselNextComponent,
-    KjCarouselIndicatorsComponent,
-    KjCarouselAutoplayComponent,
-    KjCarouselPauseComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .slide {
-        display: grid;
-        place-items: center;
-        min-height: 12rem;
-        font-weight: 600;
-        font-size: 1.125rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-carousel label="Latest news">
-      <kj-carousel-autoplay [delay]="6000" />
-      <kj-carousel-previous aria-label="Previous slide" />
-      <kj-carousel-viewport>
-        <kj-carousel-slide value="release" label="0.1 release"
-          ><div class="slide">0.1 release</div></kj-carousel-slide
-        >
-        <kj-carousel-slide value="roadmap" label="Roadmap update"
-          ><div class="slide">Roadmap update</div></kj-carousel-slide
-        >
-        <kj-carousel-slide value="hiring" label="We are hiring"
-          ><div class="slide">We are hiring</div></kj-carousel-slide
-        >
-      </kj-carousel-viewport>
-      <kj-carousel-next aria-label="Next slide" />
-      <kj-carousel-indicators />
-      <kj-carousel-pause aria-label="Pause carousel" />
-    </kj-carousel>
-  `,
-})
-export class KjCarouselAutoplayExample {}

package/src/carousel/_examples/carousel.example.ts

@@ -1,60 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCarouselComponent,
-  KjCarouselViewportComponent,
-  KjCarouselSlideComponent,
-  KjCarouselPreviousComponent,
-  KjCarouselNextComponent,
-} from '../carousel';
-
-/**
- * Default carousel example — four slides, manual previous / next controls,
- * no autoplay. Anchors the simplest correct usage and the API for screenshots.
- */
-@Component({
-  selector: 'kj-carousel-example',
-  standalone: true,
-  imports: [
-    KjCarouselComponent,
-    KjCarouselViewportComponent,
-    KjCarouselSlideComponent,
-    KjCarouselPreviousComponent,
-    KjCarouselNextComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .slide {
-        display: grid;
-        place-items: center;
-        min-height: 12rem;
-        font-weight: 600;
-        font-size: 1.125rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-carousel label="Featured destinations">
-      <kj-carousel-previous aria-label="Previous slide" />
-      <kj-carousel-viewport>
-        <kj-carousel-slide value="alps" label="The Alps">
-          <div class="slide">The Alps</div>
-        </kj-carousel-slide>
-        <kj-carousel-slide value="andes" label="The Andes">
-          <div class="slide">The Andes</div>
-        </kj-carousel-slide>
-        <kj-carousel-slide value="atlas" label="The Atlas">
-          <div class="slide">The Atlas</div>
-        </kj-carousel-slide>
-        <kj-carousel-slide value="dolomites" label="The Dolomites">
-          <div class="slide">The Dolomites</div>
-        </kj-carousel-slide>
-      </kj-carousel-viewport>
-      <kj-carousel-next aria-label="Next slide" />
-    </kj-carousel>
-  `,
-})
-export class KjCarouselExample {}

package/src/carousel/_examples/carousel.indicators.example.ts

@@ -1,64 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCarouselComponent,
-  KjCarouselViewportComponent,
-  KjCarouselSlideComponent,
-  KjCarouselPreviousComponent,
-  KjCarouselNextComponent,
-  KjCarouselIndicatorsComponent,
-} from '../carousel';
-
-/**
- * Carousel with auto-projected dot indicators in `buttons` control mode —
- * `aria-current="true"` marks the active dot. Tab focuses the indicator
- * group as a single tab stop; arrow keys move between dots.
- */
-@Component({
-  selector: 'kj-carousel-indicators-example',
-  standalone: true,
-  imports: [
-    KjCarouselComponent,
-    KjCarouselViewportComponent,
-    KjCarouselSlideComponent,
-    KjCarouselPreviousComponent,
-    KjCarouselNextComponent,
-    KjCarouselIndicatorsComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .slide {
-        display: grid;
-        place-items: center;
-        min-height: 12rem;
-        font-weight: 600;
-        font-size: 1.125rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-carousel label="Trip ideas">
-      <kj-carousel-previous aria-label="Previous slide" />
-      <kj-carousel-viewport>
-        <kj-carousel-slide value="city" label="City breaks"
-          ><div class="slide">City breaks</div></kj-carousel-slide
-        >
-        <kj-carousel-slide value="beach" label="Beach weeks"
-          ><div class="slide">Beach weeks</div></kj-carousel-slide
-        >
-        <kj-carousel-slide value="mountain" label="Mountain hikes"
-          ><div class="slide">Mountain hikes</div></kj-carousel-slide
-        >
-        <kj-carousel-slide value="culture" label="Culture trails"
-          ><div class="slide">Culture trails</div></kj-carousel-slide
-        >
-      </kj-carousel-viewport>
-      <kj-carousel-next aria-label="Next slide" />
-      <kj-carousel-indicators ariaLabel="Trip slide controls" />
-    </kj-carousel>
-  `,
-})
-export class KjCarouselIndicatorsExample {}

package/src/carousel/_examples/carousel.lazy-load.example.ts

@@ -1,85 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCarouselComponent,
-  KjCarouselViewportComponent,
-  KjCarouselSlideComponent,
-  KjCarouselPreviousComponent,
-  KjCarouselNextComponent,
-  KjCarouselIndicatorsComponent,
-} from '../carousel';
-
-/**
- * Carousel of images with native `loading="lazy"` for each non-current slide.
- * The first slide loads eagerly so the initial paint sees a real image; the
- * rest defer until they enter the viewport, keeping the initial payload small
- * for hero rotators with many slides.
- */
-@Component({
-  selector: 'kj-carousel-lazy-load-example',
-  standalone: true,
-  imports: [
-    KjCarouselComponent,
-    KjCarouselViewportComponent,
-    KjCarouselSlideComponent,
-    KjCarouselPreviousComponent,
-    KjCarouselNextComponent,
-    KjCarouselIndicatorsComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      img {
-        width: 100%;
-        height: 16rem;
-        object-fit: cover;
-        border-radius: var(--kj-radius-box);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-carousel label="Image gallery">
-      <kj-carousel-previous aria-label="Previous slide" />
-      <kj-carousel-viewport>
-        @for (item of items; track item.id; let first = $first) {
-          <kj-carousel-slide [value]="item.id" [label]="item.alt">
-            <img
-              [src]="item.src"
-              [alt]="item.alt"
-              [attr.loading]="first ? 'eager' : 'lazy'"
-              decoding="async"
-            />
-          </kj-carousel-slide>
-        }
-      </kj-carousel-viewport>
-      <kj-carousel-next aria-label="Next slide" />
-      <kj-carousel-indicators />
-    </kj-carousel>
-  `,
-})
-export class KjCarouselLazyLoadExample {
-  readonly items = [
-    {
-      id: 'meadow',
-      src: 'https://placehold.co/800x400/png?text=Meadow',
-      alt: 'Mountain meadow at dusk',
-    },
-    {
-      id: 'lake',
-      src: 'https://placehold.co/800x400/png?text=Lake',
-      alt: 'Alpine lake under cloud',
-    },
-    {
-      id: 'glacier',
-      src: 'https://placehold.co/800x400/png?text=Glacier',
-      alt: 'Glacier ridge at dawn',
-    },
-    {
-      id: 'forest',
-      src: 'https://placehold.co/800x400/png?text=Forest',
-      alt: 'Pine forest in winter',
-    },
-  ];
-}

package/src/carousel/_examples/carousel.tabs-pattern.example.ts

@@ -1,61 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCarouselComponent,
-  KjCarouselViewportComponent,
-  KjCarouselSlideComponent,
-  KjCarouselPreviousComponent,
-  KjCarouselNextComponent,
-  KjCarouselIndicatorsComponent,
-} from '../carousel';
-
-/**
- * Tabbed carousel — `<kj-carousel-indicators controlPattern="tabs">` flips
- * the indicator group into a `role="tablist"` and the slides into
- * `role="tabpanel"`s; the dots become `role="tab"` with `aria-selected` on
- * the active one and `aria-controls` wired to the slide id. Arrow keys on a
- * focused tab activate (per APG tabs pattern).
- */
-@Component({
-  selector: 'kj-carousel-tabs-pattern-example',
-  standalone: true,
-  imports: [
-    KjCarouselComponent,
-    KjCarouselViewportComponent,
-    KjCarouselSlideComponent,
-    KjCarouselPreviousComponent,
-    KjCarouselNextComponent,
-    KjCarouselIndicatorsComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .slide {
-        display: grid;
-        place-items: center;
-        min-height: 12rem;
-        font-weight: 600;
-        font-size: 1.125rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-carousel label="Product overview">
-      <kj-carousel-previous aria-label="Previous slide" />
-      <kj-carousel-viewport>
-        <kj-carousel-slide value="overview" label="Overview"
-          ><div class="slide">Overview</div></kj-carousel-slide
-        >
-        <kj-carousel-slide value="pricing" label="Pricing"
-          ><div class="slide">Pricing</div></kj-carousel-slide
-        >
-        <kj-carousel-slide value="faq" label="FAQ"><div class="slide">FAQ</div></kj-carousel-slide>
-      </kj-carousel-viewport>
-      <kj-carousel-next aria-label="Next slide" />
-      <kj-carousel-indicators controlPattern="tabs" ariaLabel="Sections" />
-    </kj-carousel>
-  `,
-})
-export class KjCarouselTabsPatternExample {}

package/src/carousel/_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 { KjCarouselAutoplayExample } from './carousel.autoplay.example';
-export { KjCarouselExample } from './carousel.example';
-export { KjCarouselIndicatorsExample } from './carousel.indicators.example';
-export { KjCarouselLazyLoadExample } from './carousel.lazy-load.example';
-export { KjCarouselTabsPatternExample } from './carousel.tabs-pattern.example';

package/src/carousel/carousel.css

@@ -1,181 +0,0 @@
-@layer kj.component {
-  .kj-carousel {
-    --kj-carousel-gap:           var(--kj-space-md);
-    --kj-carousel-radius:        var(--kj-radius-box);
-    --kj-carousel-control-size:  44px;
-    --kj-carousel-control-bg:    var(--kj-bg-body);
-    --kj-carousel-control-fg:    var(--kj-fg-default);
-    --kj-carousel-indicator-size:    10px;
-    --kj-carousel-indicator-active:  var(--kj-bg-primary);
-    --kj-carousel-indicator-idle:    var(--kj-bg-field);
-
-    position: relative;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: 1fr auto;
-    gap: var(--kj-carousel-gap);
-    align-items: center;
-  }
-
-  .kj-carousel[data-orientation="vertical"] {
-    grid-template-columns: 1fr auto;
-    grid-template-rows: auto 1fr auto auto;
-  }
-
-  .kj-carousel-viewport {
-    grid-column: 2;
-    grid-row: 1;
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scroll-snap-type: x mandatory;
-    scrollbar-width: none;
-    border-radius: var(--kj-carousel-radius);
-    gap: var(--kj-carousel-gap);
-    scroll-behavior: smooth;
-  }
-  .kj-carousel-viewport::-webkit-scrollbar { display: none; }
-
-  .kj-carousel[data-orientation="vertical"] .kj-carousel-viewport {
-    flex-direction: column;
-    overflow-x: hidden;
-    overflow-y: auto;
-    scroll-snap-type: y mandatory;
-    grid-column: 1;
-    grid-row: 2;
-    /* Grid items default to `min-height: auto`, which lets the viewport
-       grow past its `1fr` row when slides are taller than the share —
-       defeating the scroll-snap container. Pin to 0 so the row's
-       fraction actually constrains the viewport height. */
-    min-height: 0;
-  }
-
-  .kj-carousel-slide {
-    flex: 0 0 calc(100% / var(--kj-carousel-slides-per-view, 1));
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
-    border-radius: var(--kj-carousel-radius);
-    background: var(--kj-bg-body);
-    color: var(--kj-fg-default);
-    padding: var(--kj-space-lg);
-    min-height: 0;
-  }
-
-  .kj-carousel-slide[data-align="center"] { scroll-snap-align: center; }
-  .kj-carousel-slide[data-align="end"]    { scroll-snap-align: end; }
-
-  .kj-carousel-control {
-    grid-row: 1;
-    width: var(--kj-carousel-control-size);
-    height: var(--kj-carousel-control-size);
-    min-width: var(--kj-carousel-control-size);
-    min-height: var(--kj-carousel-control-size);
-    border-radius: 50%;
-    border: var(--kj-border) solid var(--kj-border-default);
-    background: var(--kj-carousel-control-bg);
-    color: var(--kj-carousel-control-fg);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font: 1rem var(--kj-font-sans);
-    transition: var(--kj-transition);
-  }
-  .kj-carousel-control:hover { background: var(--kj-bg-surface); }
-  .kj-carousel-control:focus-visible {
-    outline: 2px solid var(--kj-border-focus);
-    outline-offset: 2px;
-  }
-  .kj-carousel-control[aria-disabled="true"] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .kj-carousel-previous { grid-column: 1; }
-  .kj-carousel-next     { grid-column: 3; }
-
-  .kj-carousel[data-orientation="vertical"] .kj-carousel-previous { grid-column: 1; grid-row: 1; }
-  .kj-carousel[data-orientation="vertical"] .kj-carousel-next     { grid-column: 1; grid-row: 3; }
-
-  .kj-carousel-indicators {
-    grid-column: 2;
-    grid-row: 2;
-    display: inline-flex;
-    gap: var(--kj-space-sm);
-    align-items: center;
-    justify-content: center;
-    padding: var(--kj-space-sm) 0;
-  }
-  .kj-carousel[data-orientation="vertical"] .kj-carousel-indicators {
-    grid-column: 1;
-    grid-row: 4;
-    flex-direction: row;
-  }
-
-  .kj-carousel-indicator {
-    width:  var(--kj-carousel-indicator-size);
-    height: var(--kj-carousel-indicator-size);
-    min-width: 44px;
-    min-height: 44px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .kj-carousel-indicator::before {
-    content: '';
-    width:  var(--kj-carousel-indicator-size);
-    height: var(--kj-carousel-indicator-size);
-    border-radius: 50%;
-    background: var(--kj-carousel-indicator-idle);
-    transition: var(--kj-transition);
-  }
-  .kj-carousel-indicator[aria-current="true"]::before,
-  .kj-carousel-indicator[aria-selected="true"]::before {
-    background: var(--kj-carousel-indicator-active);
-    transform: scale(1.25);
-  }
-  .kj-carousel-indicator:focus-visible {
-    outline: 2px solid var(--kj-border-focus);
-    outline-offset: 2px;
-    border-radius: 50%;
-  }
-
-  .kj-carousel-pause {
-    grid-column: 3;
-    grid-row: 2;
-    width: var(--kj-carousel-control-size);
-    height: var(--kj-carousel-control-size);
-    border-radius: 50%;
-    border: var(--kj-border) solid var(--kj-border-default);
-    background: var(--kj-carousel-control-bg);
-    color: var(--kj-carousel-control-fg);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font: 1rem var(--kj-font-sans);
-  }
-  .kj-carousel-pause:focus-visible {
-    outline: 2px solid var(--kj-border-focus);
-    outline-offset: 2px;
-  }
-  .kj-carousel-pause[aria-pressed="true"] {
-    background: var(--kj-bg-primary);
-    color: var(--kj-fg-on-primary);
-  }
-  .kj-carousel-pause[disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .kj-carousel-viewport { scroll-behavior: auto; }
-    .kj-carousel-indicator::before { transition: none; }
-  }
-}

package/src/carousel/carousel.playground.ts

@@ -1,135 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  KjCarouselComponent,
-  KjCarouselIndicatorsComponent,
-  KjCarouselNextComponent,
-  KjCarouselPreviousComponent,
-  KjCarouselSlideComponent,
-  KjCarouselViewportComponent,
-} from './carousel';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Tunes the active slide, slide
- * count, loop behaviour, orientation, and the indicator track so the
- * navigation surface area is fully covered.
- */
-const active = signal<'alps' | 'andes' | 'atlas' | 'rockies'>('alps');
-const slideCount = signal<3 | 4>(3);
-const loop = signal(false);
-const orientation = signal<'horizontal' | 'vertical'>('horizontal');
-const showIndicators = signal(true);
-
-const SLIDES: ReadonlyArray<{ value: string; label: string }> = [
-  { value: 'alps', label: 'The Alps' },
-  { value: 'andes', label: 'The Andes' },
-  { value: 'atlas', label: 'The Atlas' },
-  { value: 'rockies', label: 'The Rockies' },
-];
-
-@Component({
-  selector: 'kj-carousel-playground',
-  standalone: true,
-  imports: [
-    KjCarouselComponent,
-    KjCarouselViewportComponent,
-    KjCarouselSlideComponent,
-    KjCarouselPreviousComponent,
-    KjCarouselNextComponent,
-    KjCarouselIndicatorsComponent,
-  ],
-  styles: [`
-    :host { display: block; }
-    .slide { display: grid; place-items: center; min-height: 10rem; font-weight: 600; font-size: 1.125rem; }
-    /* Vertical orientation: the host carousel CSS uses
-       grid-template-rows: auto 1fr auto auto with the viewport in the
-       1fr row, so the parent needs an explicit height — otherwise 1fr
-       collapses to 0 and the viewport disappears. */
-    kj-carousel[data-orientation="vertical"] { height: 22rem; }
-    kj-carousel[data-orientation="vertical"] .slide { min-height: 8rem; }
-  `],
-  template: `
-    <kj-carousel
-      label="Featured destinations"
-      [(value)]="active"
-      [loop]="loop()"
-      [orientation]="orientation()"
-    >
-      <kj-carousel-previous aria-label="Previous slide" />
-      <kj-carousel-viewport>
-        @for (slide of visibleSlides(); track slide.value) {
-          <kj-carousel-slide [value]="slide.value" [label]="slide.label">
-            <div class="slide">{{ slide.label }}</div>
-          </kj-carousel-slide>
-        }
-      </kj-carousel-viewport>
-      <kj-carousel-next aria-label="Next slide" />
-      @if (showIndicators()) {
-        <kj-carousel-indicators />
-      }
-    </kj-carousel>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCarouselPlaygroundDemo {
-  protected readonly active = active;
-  protected readonly slideCount = slideCount;
-  protected readonly loop = loop;
-  protected readonly orientation = orientation;
-  protected readonly showIndicators = showIndicators;
-
-  protected visibleSlides(): typeof SLIDES {
-    return SLIDES.slice(0, slideCount());
-  }
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjCarouselPlaygroundDemo,
-  state: {
-    active: active as unknown as ReturnType<typeof signal>,
-    slideCount: slideCount as unknown as ReturnType<typeof signal>,
-    loop: loop as unknown as ReturnType<typeof signal>,
-    orientation: orientation as unknown as ReturnType<typeof signal>,
-    showIndicators: showIndicators as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'active',
-      label: 'active',
-      options: ['alps', 'andes', 'atlas', 'rockies'],
-    },
-    { kind: 'chips', name: 'slideCount', label: 'slides', options: [3, 4] },
-    {
-      kind: 'chips',
-      name: 'orientation',
-      label: 'orientation',
-      options: ['horizontal', 'vertical'],
-    },
-    { kind: 'toggle', name: 'loop', label: 'loop' },
-    { kind: 'toggle', name: 'showIndicators', label: 'indicators' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      active: string;
-      slideCount: number;
-      loop: boolean;
-      orientation: string;
-      showIndicators: boolean;
-    };
-    const attrs: string[] = [
-      'label="Featured destinations"',
-      `value="${s.active}"`,
-      `orientation="${s.orientation}"`,
-    ];
-    if (s.loop) attrs.push('[loop]="true"');
-    const slides = SLIDES.slice(0, s.slideCount)
-      .map(
-        (slide) =>
-          `    <kj-carousel-slide value="${slide.value}" label="${slide.label}">\n      <div class="slide">${slide.label}</div>\n    </kj-carousel-slide>`,
-      )
-      .join('\n');
-    const indicators = s.showIndicators ? '\n  <kj-carousel-indicators />' : '';
-    return `<kj-carousel\n  ${attrs.join('\n  ')}\n>\n  <kj-carousel-previous aria-label="Previous slide" />\n  <kj-carousel-viewport>\n${slides}\n  </kj-carousel-viewport>\n  <kj-carousel-next aria-label="Next slide" />${indicators}\n</kj-carousel>`;
-  },
-};