@kouji-ui/components 0.1.1

package/src/select/select.css

@@ -0,0 +1,65 @@
+@layer kj.component {
+  .kj-select { position: relative; display: inline-block; min-width: 12rem; }
+
+  .kj-select-trigger {
+    /* Explicit height contract (matches input.css / button.css) so the
+       select trigger lines up with sibling inputs in a form row. */
+    --kj-select-trigger-height: 2.25rem;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kj-space-sm);
+    background: var(--kj-bg-field);
+    color: var(--kj-fg-default);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    padding: 0 var(--kj-space-md);
+    height: var(--kj-select-trigger-height);
+    font: 0.875rem var(--kj-font-sans);
+    cursor: pointer;
+  }
+  .kj-select[data-size="xs"] .kj-select-trigger { --kj-select-trigger-height: 1.75rem; font-size: 0.75rem;   padding-inline: var(--kj-space-sm); gap: var(--kj-space-xs); }
+  .kj-select[data-size="sm"] .kj-select-trigger { --kj-select-trigger-height: 2rem;    font-size: 0.8125rem; }
+  .kj-select[data-size="lg"] .kj-select-trigger { --kj-select-trigger-height: 2.75rem; font-size: 1rem; }
+  .kj-select[data-size="xs"] { min-width: 0; }
+  .kj-select-trigger:focus-visible { outline: 2px solid var(--kj-fg-primary); outline-offset: 2px; }
+  .kj-select[data-disabled] .kj-select-trigger { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+
+  .kj-select-content {
+    box-sizing: border-box;
+    min-width: 12rem;
+    width: max-content;
+    background: var(--kj-bg-elevated);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    box-shadow: var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / 0.12));
+    padding: 4px;
+    max-height: 16rem;
+    overflow: auto;
+    z-index: 100;
+  }
+  .kj-select-content[hidden] { display: none; }
+
+  .kj-option {
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    border-radius: var(--kj-radius-selector);
+    cursor: pointer;
+    color: var(--kj-fg-default);
+    font: 0.875rem var(--kj-font-sans);
+  }
+  /* Hover uses bg-field (sunken slot), not bg-surface. In themes where
+     elevated == surface (light/corporate, both white) a bg-surface hover would
+     be invisible on the bg-elevated panel. */
+  .kj-option:hover { background: var(--kj-bg-field); }
+  /* Selected option — tinted primary mirrors tree-select / cascade-select so
+     the listbox family looks consistent across themes. */
+  .kj-option[aria-selected="true"] {
+    background: color-mix(in oklab, var(--kj-bg-primary) 12%, transparent);
+    color: var(--kj-fg-primary);
+    font-weight: 600;
+  }
+  .kj-option[aria-selected="true"]:hover {
+    background: color-mix(in oklab, var(--kj-bg-primary) 18%, transparent);
+  }
+}

package/src/select/select.playground.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { KjSelectComponent, KjOptionComponent } from './select';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+const selected = signal<string | undefined>(undefined);
+const placeholder = signal<string>('Choose a fruit');
+const optionCount = signal<2 | 3 | 4 | 5 | 6>(4);
+const disabled = signal(false);
+const multiple = signal(false);
+
+const ITEMS: ReadonlyArray<{ value: string; label: string }> = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+];
+
+@Component({
+  selector: 'kj-select-playground',
+  standalone: true,
+  imports: [KjSelectComponent, KjOptionComponent],
+  template: `
+    <kj-select
+      [(value)]="selected"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [multiple]="multiple()"
+    >
+      @for (item of visibleItems(); track item.value) {
+        <kj-option [value]="item.value">{{ item.label }}</kj-option>
+      }
+    </kj-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjSelectPlaygroundDemo {
+  protected readonly selected = selected;
+  protected readonly placeholder = placeholder;
+  protected readonly optionCount = optionCount;
+  protected readonly disabled = disabled;
+  protected readonly multiple = multiple;
+
+  protected readonly visibleItems = computed(() => ITEMS.slice(0, optionCount()));
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjSelectPlaygroundDemo,
+  state: {
+    selected: selected as unknown as ReturnType<typeof signal>,
+    placeholder: placeholder as unknown as ReturnType<typeof signal>,
+    optionCount: optionCount as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+    multiple: multiple as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'text', name: 'placeholder', label: 'placeholder' },
+    { kind: 'chips', name: 'optionCount', label: 'options', options: [2, 3, 4, 5, 6] },
+    { kind: 'toggle', name: 'multiple', label: 'multiple' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      placeholder: string;
+      optionCount: number;
+      disabled: boolean;
+      multiple: boolean;
+    };
+    const attrs: string[] = [
+      `[(value)]="selected"`,
+      `placeholder="${s.placeholder}"`,
+    ];
+    if (s.multiple) attrs.push('[multiple]="true"');
+    if (s.disabled) attrs.push('[disabled]="true"');
+    const options = ITEMS.slice(0, s.optionCount)
+      .map((item) => `  <kj-option [value]="'${item.value}'">${item.label}</kj-option>`)
+      .join('\n');
+    return `<kj-select\n  ${attrs.join('\n  ')}\n>\n${options}\n</kj-select>`;
+  },
+};

package/src/select/select.ts

@@ -0,0 +1,176 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, contentChildren, forwardRef, input, inject, computed } from '@angular/core';
+import { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from '@kouji-ui/core';
+
+/**
+ * Select root. Two-way bind via `[(value)]`.
+ *
+ * Users only need `<kj-select>` and `<kj-option>`. The trigger button and
+ * listbox panel are rendered internally so the consumer markup stays minimal,
+ * with theme tokens, placeholder text, and keyboard navigation already wired.
+ *
+ * @doc-keyboard
+ *   Enter|Space    — Opens the listbox from the trigger; activates the focused option when open
+ *   ArrowDown      — Moves focus to the next option (clamps at the end)
+ *   ArrowUp        — Moves focus to the previous option (clamps at the start)
+ *   Home           — Moves focus to the first option
+ *   End            — Moves focus to the last option
+ *   A-Z (type-ahead) — Focuses the first option whose visible text starts with the typed character
+ *   Escape         — Closes the listbox and returns focus to the trigger
+ *   Tab            — Closes the listbox and moves focus to the next focusable element
+ *
+ * @doc-aria
+ *   aria-haspopup        — set to "listbox" on the trigger button
+ *   aria-expanded        — set on the trigger; reflects the open/closed state of the listbox
+ *   aria-controls        — links the trigger to the panel id
+ *   aria-activedescendant — set on the panel; points to the id of the currently focused option
+ *   aria-multiselectable  — set on the panel to "true" when [multiple] is true
+ *   role="listbox"       — on the content panel (provided via KJ_OVERLAY_PANEL_ROLE)
+ *   role="option"        — on each kj-option child
+ *   aria-selected        — set on each option to "true" or "false"
+ *   aria-disabled        — set on options when [kjDisabled] is true
+ *   data-disabled / data-multiple — mirrors of the disabled / multiple state for CSS
+ *
+ * @doc-css-var
+ *   --kj-select-trigger-height — Height of the trigger button. Sizes (sm/md/lg) override.
+ *
+ * @doc-touch
+ *   Default trigger height is 36px. Apply `data-size="lg"` on `<kj-select>` to bump the trigger to 2.75rem (44px) and meet WCAG 2.5.5 for touch-first layouts. Options have padding-only sizing and rely on their text affordance.
+ *
+ * @doc-a11y
+ *   The listbox follows the WAI-ARIA combobox/listbox pattern. The panel is
+ *   portalled to `document.body` so it escapes clipping ancestors while still
+ *   being announced as the trigger's popup via `aria-controls`. Selection
+ *   tracking uses `Object.is` so primitive and reference values both work.
+ *   In single-select mode the panel closes on activation; in multi mode
+ *   ([multiple]="true") the panel stays open and `aria-multiselectable="true"`
+ *   is exposed for assistive tech.
+ *
+ * @doc-related combobox,cascade-select,radio-group
+ *
+ * @doc-example Default
+ *   A single-value fruit picker — the bare-minimum recipe.
+ *   @doc-file select.default.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common usages — placeholder, pre-selected,
+ *   and disabled. Use this as the copy-paste starting point.
+ *   @doc-file select.usage.example.ts
+ * @doc-example With placeholder
+ *   `placeholder="…"` is shown until a value is bound.
+ *   @doc-file select.placeholder.example.ts
+ * @doc-example Disabled
+ *   `[disabled]="true"` removes the trigger from the tab order.
+ *   @doc-file select.disabled.example.ts
+ * @doc-example Grouped options
+ *   Cluster options under headings for richer listbox menus.
+ *   @doc-file select.grouped.example.ts
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name select
+ * @doc-description Themed dropdown select with a trigger button, listbox panel, and keyboard navigation.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-select',
+  standalone: true,
+  hostDirectives: [
+    { directive: KjSelect, inputs: ['kjSelectValue: value'], outputs: ['kjSelectValueChange: valueChange'] },
+  ],
+  imports: [KjSelectTrigger, KjSelectContent],
+  template: `
+    <button type="button" kjSelectTrigger #trig="kjSelectTrigger" class="kj-select-trigger" aria-haspopup="listbox" [disabled]="disabled() || null" [kjMultiple]="multiple()">
+      <span class="kj-select-trigger-label">{{ displayLabel() }}</span>
+      <span class="kj-select-trigger-caret" aria-hidden="true">▾</span>
+    </button>
+    <kj-select-content [kjFor]="trig" class="kj-select-content">
+      <ng-content />
+    </kj-select-content>
+  `,
+  styleUrl: './select.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'kj-select',
+    '[attr.data-disabled]': "disabled() ? '' : null",
+    '[attr.data-multiple]': "multiple() ? '' : null",
+    '[attr.data-size]': "kjSize() === 'md' ? null : kjSize()",
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjSelectComponent {
+  readonly placeholder = input<string>('Select…');
+  readonly disabled = input(false);
+  readonly multiple = input(false);
+  readonly kjSize = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+
+  private readonly select = inject(KjSelect);
+
+  /**
+   * Trigger element signal — sourced from the headless `KjSelect` root,
+   * which is set the moment the inner `KjSelectTrigger` directive
+   * constructs. No view-query lifecycle wait, so callers reading this
+   * inside an `effect()` see it resolve as soon as the select is mounted.
+   */
+  readonly triggerEl = this.select.triggerEl;
+
+  /** Focus the trigger button. Delegates to the headless root. */
+  focus(): void {
+    this.select.focus();
+  }
+
+  /** Direct projection-child query — every `<kj-option>` placed inside this
+   *  `<kj-select>` registers here. `forwardRef` is required because
+   *  `KjOptionComponent` is declared later in the same file. We resolve the
+   *  trigger label by matching the active value against each option's
+   *  `value` input, not by reading `KjListItem.label()` from the select's
+   *  deeper content (which doesn't reliably descend into a projected
+   *  component's view). */
+  private readonly options = contentChildren<KjOptionComponent>(
+    forwardRef(() => KjOptionComponent) as unknown as typeof KjOptionComponent,
+  );
+
+  /** Resolve a value to its matching option's label. Falls back to
+   *  `String(v)` only when no option has registered for that value yet. */
+  private labelFor(v: unknown): string {
+    for (const opt of this.options()) {
+      if (Object.is(opt.value(), v)) {
+        const explicit = opt.kjLabel();
+        return explicit || String(v);
+      }
+    }
+    return String(v);
+  }
+
+  readonly displayLabel = computed(() => {
+    const v = this.select.value();
+    if (v === undefined || v === null || v === '') return this.placeholder();
+    if (Array.isArray(v)) {
+      return v.length === 0
+        ? this.placeholder()
+        : v.map((entry) => this.labelFor(entry)).join(', ');
+    }
+    return this.labelFor(v);
+  });
+}
+
+/**
+ * Single option row.
+ * @doc
+ * @doc-name select
+ */
+@Component({
+  selector: 'kj-option',
+  standalone: true,
+  imports: [KjOption],
+  template: `<div kjOption [kjOptionValue]="value()" [kjOptionLabel]="kjLabel()" class="kj-option"><ng-content /></div>`,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjOptionComponent {
+  readonly value = input.required<unknown>();
+
+  /** Explicit label for the trigger's displayed text. The select wrapper
+   *  reads this via its own `contentChildren(KjOptionComponent)` query for
+   *  reliable label resolution that doesn't depend on KjListItem's
+   *  textContent-after-content-init lifecycle. */
+  readonly kjLabel = input<string>('');
+}

package/src/select/select.usage.example.ts

@@ -0,0 +1,64 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjSelectComponent, KjOptionComponent } from './select';
+
+/**
+ * A walkthrough of the most common select usages — a single-value picker
+ * with a placeholder, a pre-selected value, and a disabled control. Use this
+ * as the copy-paste starting point for forms.
+ */
+@Component({
+  selector: 'kj-select-usage-example',
+  standalone: true,
+  imports: [KjSelectComponent, KjOptionComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-lg);
+        max-width: 18rem;
+      }
+      label {
+        display: grid;
+        gap: var(--kj-space-xs);
+        font-size: 0.875rem;
+        color: var(--kj-fg-default);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+    <label>
+      Fruit (placeholder)
+      <kj-select [(value)]="fruit" placeholder="Choose a fruit">
+        <kj-option [value]="'apple'">Apple</kj-option>
+        <kj-option [value]="'banana'">Banana</kj-option>
+        <kj-option [value]="'cherry'">Cherry</kj-option>
+      </kj-select>
+    </label>
+
+    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+    <label>
+      Country (pre-selected)
+      <kj-select [(value)]="country">
+        <kj-option [value]="'us'">United States</kj-option>
+        <kj-option [value]="'jp'">Japan</kj-option>
+        <kj-option [value]="'fr'">France</kj-option>
+      </kj-select>
+    </label>
+
+    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
+    <label>
+      Locked
+      <kj-select [(value)]="locked" [disabled]="true" placeholder="Read-only">
+        <kj-option [value]="'a'">Option A</kj-option>
+      </kj-select>
+    </label>
+  `,
+})
+export class KjSelectUsageExample {
+  readonly fruit = signal<string | undefined>(undefined);
+  readonly country = signal<string>('jp');
+  readonly locked = signal<string | undefined>(undefined);
+}

package/src/skeleton/_examples/index.ts

@@ -0,0 +1,6 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjSkeletonAnimationsExample } from './skeleton.animations.example';
+export { KjSkeletonCardExample } from './skeleton.card.example';
+export { KjSkeletonExample } from './skeleton.example';
+export { KjSkeletonShapesExample } from './skeleton.shapes.example';

package/src/skeleton/_examples/skeleton.animations.example.ts

@@ -0,0 +1,52 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjSkeletonComponent } from '../skeleton';
+
+/**
+ * Animation presets — `shimmer` (the default sweep), `pulse` (opacity
+ * oscillation), and `none` (static). The `none` value is the consumer-
+ * side `prefers-reduced-motion` escape hatch; theme CSS additionally
+ * suppresses every animation when the OS reports the preference.
+ */
+@Component({
+  selector: 'kj-skeleton-animations-example',
+  standalone: true,
+  imports: [KjSkeletonComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-lg);
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--kj-space-md);
+      }
+      .label {
+        min-width: 5rem;
+        font-size: 0.75rem;
+        color: var(--kj-fg-default);
+        opacity: 0.7;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <span class="label">shimmer</span>
+      <kj-skeleton kjSkeletonAnimation="shimmer" kjWidth="18rem" kjHeight="1.25rem" />
+    </div>
+    <div class="row">
+      <span class="label">pulse</span>
+      <kj-skeleton kjSkeletonAnimation="pulse" kjWidth="18rem" kjHeight="1.25rem" />
+    </div>
+    <div class="row">
+      <span class="label">none</span>
+      <kj-skeleton kjSkeletonAnimation="none" kjWidth="18rem" kjHeight="1.25rem" />
+    </div>
+  `,
+})
+export class KjSkeletonAnimationsExample {}

package/src/skeleton/_examples/skeleton.card.example.ts

@@ -0,0 +1,68 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjSkeletonComponent } from '../skeleton';
+
+/**
+ * Canonical card-skeleton recipe — an avatar-shaped circle, a title line
+ * (60% width), and two body lines via the `text-block` shape, all inside
+ * a region that carries the loading semantics the skeleton itself
+ * intentionally does not.
+ *
+ * Note `aria-busy="true"` on the parent region: per `skeleton.md`, the
+ * skeleton element is `aria-hidden` and silent; the *region* announces
+ * the busy state to AT. A polite `role="status"` live region complements
+ * this in a real app via `KjLiveRegion.announce('Loading…')`; here we
+ * keep the demo declarative so the structure is self-evident.
+ */
+@Component({
+  selector: 'kj-skeleton-card-example',
+  standalone: true,
+  imports: [KjSkeletonComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .card {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+        padding: var(--kj-space-lg);
+        border: 1px solid var(--kj-border-default);
+        border-radius: var(--kj-radius-box, 0.75rem);
+        max-width: 24rem;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        gap: var(--kj-space-md);
+      }
+      .title-stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-xs, 0.25rem);
+        flex: 1 1 0;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-sm);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <section class="card" aria-busy="true" aria-label="Loading card content">
+      <div class="header">
+        <kj-skeleton kjSkeletonShape="circle" kjWidth="2.5rem" kjHeight="2.5rem" />
+        <div class="title-stack">
+          <kj-skeleton kjSkeletonShape="text" kjWidth="60%" kjHeight="1rem" />
+          <kj-skeleton kjSkeletonShape="text" kjWidth="40%" kjHeight="0.75rem" />
+        </div>
+      </div>
+      <div class="body">
+        <kj-skeleton kjSkeletonShape="text-block" [kjLines]="3" />
+      </div>
+    </section>
+  `,
+})
+export class KjSkeletonCardExample {}

package/src/skeleton/_examples/skeleton.example.ts

@@ -0,0 +1,24 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjSkeletonComponent } from '../skeleton';
+
+/**
+ * Default usage example for `KjSkeletonComponent` — a single rectangle
+ * skeleton sized to stand in for a generic content block. Demonstrates
+ * the bare-minimum recipe: pick a width / height, drop the wrapper in,
+ * let the directive set `aria-hidden` and the shimmer paint.
+ */
+@Component({
+  selector: 'kj-skeleton-example',
+  standalone: true,
+  imports: [KjSkeletonComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-skeleton kjWidth="16rem" kjHeight="1.5rem" />`,
+})
+export class KjSkeletonExample {}

package/src/skeleton/_examples/skeleton.shapes.example.ts

@@ -0,0 +1,55 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjSkeletonComponent } from '../skeleton';
+
+/**
+ * Shape presets — `rectangle`, `circle`, `text`, `text-block` — laid out
+ * side-by-side so the `data-shape` reflection and theme-side chrome are
+ * visible against each other. The `text-block` wrapper expands into N
+ * stacked text-shaped lines (the last at 60% width).
+ */
+@Component({
+  selector: 'kj-skeleton-shapes-example',
+  standalone: true,
+  imports: [KjSkeletonComponent],
+  styles: [
+    `
+      :host {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--kj-space-xl);
+      }
+      .cell {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-sm);
+      }
+      .label {
+        font-size: 0.75rem;
+        color: var(--kj-fg-default);
+        opacity: 0.7;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="cell">
+      <span class="label">rectangle</span>
+      <kj-skeleton kjSkeletonShape="rectangle" kjWidth="100%" kjHeight="3rem" />
+    </div>
+    <div class="cell">
+      <span class="label">circle</span>
+      <kj-skeleton kjSkeletonShape="circle" kjWidth="3rem" kjHeight="3rem" />
+    </div>
+    <div class="cell">
+      <span class="label">text</span>
+      <kj-skeleton kjSkeletonShape="text" kjWidth="14rem" />
+    </div>
+    <div class="cell">
+      <span class="label">text-block</span>
+      <kj-skeleton kjSkeletonShape="text-block" [kjLines]="3" />
+    </div>
+  `,
+})
+export class KjSkeletonShapesExample {}

package/src/skeleton/index.ts

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