@ethlete/components 1.0.0-next.78 → 1.0.0-next.80

package/design/select.ts

@@ -38,7 +38,7 @@ export type SelectPanelMockOptions = {
   multiple?: boolean;
   /** The app's default color theme name: the panel provides it to the options. */
   color?: string;
-  /** A surface theme name the app registers, for the panel. */
+  /** A surface theme name the app registers, for the panel. Left out, the panel takes the surface one elevation above its parent. */
   surface?: string;
 };
 
@@ -54,7 +54,7 @@ export type SelectMockOptions = {
   clearLabel?: string;
   /** The app's default color theme name: the panel provides it to the options. */
   panelColor?: string;
-  /** A surface theme name the app registers, for the panel. */
+  /** A surface theme name the app registers, for the panel. Left out, the panel takes the surface one elevation above its parent. */
   panelSurface?: string;
 };
 
@@ -122,10 +122,11 @@ export const selectPanel = (options: SelectPanelMockOptions) => {
     'et-select-panel',
     'et-color--inherited',
     options.color && `et-color--${options.color}`,
-    `et-surface--${options.surface ?? 'inherited'}`,
+    options.surface && `et-surface--${options.surface}`,
   ].filter(Boolean);
+  const autoSurface = options.surface ? '' : ' data-et-auto-surface';
 
-  return `<et-select-panel class="${classes.join(' ')}"><div class="et-select-panel-scroller et-scrollbar-host"><div class="et-select-panel-body"><div ${listbox.join(' ')}>${options.content}</div><div class="et-select-panel-extras"></div></div></div><et-scrollbar class="et-scrollbar" data-orientation="vertical"><div class="et-scrollbar-thumb"></div></et-scrollbar></et-select-panel>`;
+  return `<et-select-panel${autoSurface} class="${classes.join(' ')}"><div class="et-select-panel-scroller et-scrollbar-host"><div class="et-select-panel-body"><div ${listbox.join(' ')}>${options.content}</div><div class="et-select-panel-extras"></div></div></div><et-scrollbar class="et-scrollbar" data-orientation="vertical"><div class="et-scrollbar-thumb"></div></et-scrollbar></et-select-panel>`;
 };
 
 /**

package/design/skeleton.ts

@@ -0,0 +1,67 @@
+import skeletonBase from '../src/lib/skeleton/skeleton.component.css?inline';
+
+export type SkeletonShapeMock = 'text' | 'rect' | 'circle';
+
+export type SkeletonItemMockOptions = {
+  /** Left out, `text`, as `et-skeleton-item` defaults to. */
+  shape?: SkeletonShapeMock;
+  /** Inline style on the item, e.g. `--et-skeleton-size: 40px` or `block-size: 140px`. */
+  style?: string;
+};
+
+export type SkeletonTextMockOptions = {
+  /** Left out, 3. */
+  lines?: number;
+  /** Width (%) of the last line. Left out, 60. */
+  lastLineWidth?: number;
+};
+
+export type SkeletonMockOptions = {
+  /** The projected content, built from `skeletonItem()`, `skeletonText()` and any layout markup. */
+  content: string;
+  /** Left out, `true`, as `et-skeleton` defaults to. */
+  animated?: boolean;
+  /** Where the shimmer is drawn, as a fraction of its sweep from 0 to 1. Left out, 0.5: the highlight centred on each bone. */
+  shimmerAt?: number;
+  /** Extra attributes on the skeleton, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheet `skeleton()` draws with: the real skeleton CSS, plus the rule that holds the shimmer still. */
+export const skeletonStyles = /* @__PURE__ */ [
+  skeletonBase,
+  `.et-skeleton[data-et-shimmer-at] .et-skeleton-item::after {
+  animation-play-state: paused;
+  animation-delay: calc(var(--et-skeleton-shimmer-at) * -1 * var(--et-skeleton-duration));
+}`,
+].join('\n');
+
+/** Draws one `et-skeleton-item` as the component renders it, as HTML. */
+export const skeletonItem = (options: SkeletonItemMockOptions = {}) => {
+  const style = options.style ? ` style="${options.style}"` : '';
+
+  return `<et-skeleton-item class="et-skeleton-item" aria-hidden="true" data-shape="${options.shape ?? 'text'}"${style}></et-skeleton-item>`;
+};
+
+/** Draws an `et-skeleton-text` with its lines as the component renders it, as HTML. */
+export const skeletonText = (options: SkeletonTextMockOptions = {}) => {
+  const lines = Math.max(1, Math.floor(options.lines ?? 3));
+  const items = Array.from({ length: lines }, (_, index) =>
+    skeletonItem({ style: `inline-size: ${index === lines - 1 ? (options.lastLineWidth ?? 60) : 100}%` }),
+  ).join('');
+
+  return `<et-skeleton-text class="et-skeleton-text">${items}</et-skeleton-text>`;
+};
+
+/** Draws an `et-skeleton` around `content` as the component renders it, as HTML, without its visually hidden label and with the shimmer held at one frame. */
+export const skeleton = (options: SkeletonMockOptions) => {
+  const animated = options.animated ?? true;
+  const attributes = [
+    options.attributes,
+    `class="et-skeleton${animated ? ' et-skeleton--animated' : ''}"`,
+    'role="status"',
+    animated && `data-et-shimmer-at style="--et-skeleton-shimmer-at: ${options.shimmerAt ?? 0.5}"`,
+  ].filter(Boolean);
+
+  return `<et-skeleton ${attributes.join(' ')}>${options.content}</et-skeleton>`;
+};

package/design/slider.ts

@@ -0,0 +1,155 @@
+import formSupport from '../src/lib/forms/form-field/form-support-styles.component.css?inline';
+import label from '../src/lib/forms/form-field/headless/label.directive.css?inline';
+import hint from '../src/lib/forms/form-field/hint.component.css?inline';
+import rangeSliderBase from '../src/lib/forms/slider/range-slider.component.css?inline';
+import sliderBase from '../src/lib/forms/slider/slider.component.css?inline';
+
+/** An interaction a frame forces on a thumb with the `data-et-force` design marker. */
+export type SliderMockForce = 'hover' | 'focus-visible' | 'active';
+
+export type SliderMockMark = { value: number; label?: string };
+
+export type SliderMockOptions = {
+  /** One number draws `et-slider`, a pair draws `et-range-slider` with two thumbs. */
+  value: number | [number, number];
+  min?: number;
+  max?: number;
+  /** `true` draws a tick at every `step`; a list draws the given ticks, with labels where set. */
+  marks?: boolean | SliderMockMark[];
+  step?: number;
+  /** The label, as HTML. */
+  label?: string;
+  /** The hint, as HTML. Hidden while an `error` shows. */
+  hint?: string;
+  /** The error message, as HTML. Draws the slider touched and invalid. */
+  error?: string;
+  /** The color theme name the app registers for errors, e.g. `danger` in Storybook. */
+  errorColor?: string;
+  /** A color theme name the app registers. */
+  color?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** View-only: the value shows, the thumb takes focus but does not move. */
+  readonly?: boolean;
+  /** An unresolved bulk-edit value: the thumbs park at the track start. */
+  mixed?: boolean;
+  mixedLabel?: string;
+  orientation?: 'horizontal' | 'vertical';
+  /** Draws the value bubble an `etSliderThumbLabel` template renders above each thumb. */
+  valueLabel?: boolean;
+  /** The thumb index that is being dragged. */
+  dragging?: number;
+  /** Forced interactions, per thumb index (a single slider uses index 0). */
+  force?: Partial<Record<number, SliderMockForce | SliderMockForce[]>>;
+  /** Unique per frame: the label and message ids derive from it. */
+  id?: string;
+};
+
+/** The stylesheets `slider()` draws with: the real `et-slider`, `et-range-slider` and form support CSS. */
+export const sliderStyles = /* @__PURE__ */ [label, hint, formSupport, sliderBase, rangeSliderBase].join('\n');
+
+const styled = (css: string) => ` style="${css}"`;
+
+const forceList = (force: SliderMockForce | SliderMockForce[] | undefined) =>
+  force === undefined ? [] : Array.isArray(force) ? force : [force];
+
+/** Draws `<et-slider>`, or `<et-range-slider>` for a value pair, as HTML, with the DOM the components render. */
+export const slider = (options: SliderMockOptions) => {
+  const { id = 'slider', min = 0, max = 100, step = 1, orientation = 'horizontal' } = options;
+  const range = Array.isArray(options.value);
+  const prefix = range ? 'et-range-slider' : 'et-slider';
+  const [start, end] = Array.isArray(options.value) ? options.value : [min, options.value];
+  const values = range ? [start, end] : [end];
+  const shown = options.mixed ? values.map(() => min) : values;
+  const [shownStart, shownEnd] = options.mixed ? [min, min] : [start, end];
+  const percent = (value: number) => ((value - min) / (max - min)) * 100;
+  const ids = { hint: `et-form-field-hint-${id}`, error: `et-form-field-error-${id}` };
+  const labelId = options.label !== undefined ? `et-label-${id}` : null;
+  const invalid = options.error !== undefined;
+  const supportId = invalid ? ids.error : options.hint !== undefined ? ids.hint : null;
+  const colorClass = invalid && options.errorColor ? options.errorColor : (options.color ?? 'inherited');
+  const activeRange = options.mixed ? null : { start, end };
+
+  const markList: SliderMockMark[] =
+    options.marks === true
+      ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, index) => ({ value: min + index * step }))
+      : options.marks || [];
+  const hasMarkLabels = markList.some((mark) => !!mark.label);
+
+  const hostAttributes = [
+    `class="${prefix} et-color--${colorClass}"`,
+    options.mixed && 'data-mixed="true"',
+    `data-orientation="${orientation}"`,
+    invalid && 'data-error="true"',
+    options.disabled && 'data-disabled="true"',
+    options.readonly && 'data-readonly="true"',
+    options.dragging !== undefined && 'data-dragging="true"',
+    hasMarkLabels && 'data-mark-labels="true"',
+    options.valueLabel && 'data-thumb-value="true"',
+  ].filter(Boolean);
+
+  const labelHtml = labelId
+    ? `<et-label id="${labelId}"${options.disabled ? ' data-disabled="true"' : ''}><span class="et-label-content">${options.label}</span>${options.required ? '<span aria-hidden="true" class="et-label-required-marker">*</span>' : ''}</et-label>`
+    : '';
+
+  const fillStyle = range
+    ? `--_et-slider-fill-start: ${percent(shownStart)}; --_et-slider-fill-end: ${percent(shownEnd)};`
+    : `--_et-slider-fill-end: ${percent(shownEnd)};`;
+
+  const marksHtml = markList.length
+    ? `<div aria-hidden="true" class="${prefix}-marks">${markList
+        .map((mark) => {
+          const active = activeRange !== null && mark.value >= activeRange.start && mark.value <= activeRange.end;
+          const markLabel = mark.label ? `<span class="${prefix}-mark-label">${mark.label}</span>` : '';
+
+          return `<span class="${prefix}-mark"${active ? ' data-active="true"' : ''} data-et-slider-mark-value="${mark.value}"${styled(`--_et-slider-mark-position: ${percent(mark.value)};`)}>${markLabel}</span>`;
+        })
+        .join('')}</div>`
+    : '';
+
+  const thumbs = shown
+    .map((value, index) => {
+      const forced = forceList(options.force?.[index]);
+      const markLabel = markList.find((mark) => mark.value === values[index])?.label;
+      const valueText = options.mixed ? (options.mixedLabel ?? 'Mixed') : markLabel;
+      const ariaMin = range && index === 1 ? start : min;
+      const ariaMax = range && index === 0 ? end : max;
+      const attributes = [
+        'role="slider"',
+        `class="${prefix}-thumb"`,
+        `aria-orientation="${orientation}"`,
+        `tabindex="${options.disabled ? -1 : 0}"`,
+        `aria-valuemin="${ariaMin}"`,
+        `aria-valuemax="${ariaMax}"`,
+        !options.mixed && `aria-valuenow="${value}"`,
+        valueText && `aria-valuetext="${valueText}"`,
+        range ? `aria-label="${index === 0 ? 'Minimum' : 'Maximum'}"` : labelId && `aria-labelledby="${labelId}"`,
+        supportId && `aria-describedby="${supportId}"`,
+        options.disabled && 'aria-disabled="true"',
+        options.readonly && 'aria-readonly="true"',
+        invalid && 'aria-invalid="true"',
+        options.disabled && 'data-disabled="true"',
+        options.readonly && 'data-readonly="true"',
+        options.dragging === index && 'data-dragging="true"',
+        forced.length > 0 && `data-et-force="${forced.join(' ')}"`,
+        styled(`--_et-slider-thumb-position: ${percent(value)};`).trim(),
+      ].filter(Boolean);
+      const bubble = options.valueLabel
+        ? `<div aria-hidden="true" class="${prefix}-thumb-value">${values[index]}</div>`
+        : '';
+
+      return `<div ${attributes.join(' ')}>${bubble}</div>`;
+    })
+    .join('');
+
+  const support =
+    options.hint === undefined && options.error === undefined
+      ? ''
+      : `<et-form-support class="et-form-support"><div class="et-form-support-stack">${
+          invalid
+            ? `<div class="et-form-support-content et-form-support-errors${options.errorColor ? ` et-color--${options.errorColor}` : ''}" id="${ids.error}" aria-atomic="true" aria-live="polite" data-active="true" data-direction="from-below" data-state="active"><et-form-error class="et-form-error">${options.error}</et-form-error></div>`
+            : `<div class="et-form-support-content et-form-support-hint" id="${ids.hint}" data-active="true" data-direction="from-above" data-state="active"><et-hint>${options.hint}</et-hint></div>`
+        }</div></et-form-support>`;
+
+  return `<${prefix} ${hostAttributes.join(' ')}>${labelHtml}<div class="${prefix}-interaction"><div aria-hidden="true" class="${prefix}-rail"></div><div aria-hidden="true" class="${prefix}-fill"${styled(fillStyle)}></div>${marksHtml}${thumbs}</div>${support}</${prefix}>`;
+};

package/design/standings.ts

@@ -0,0 +1,161 @@
+import focusRing from '../src/lib/focus-ring/focus-ring-styles.component.css?inline';
+import participantBase from '../src/lib/match/match-participant.component.css?inline';
+import pickBase from '../src/lib/standings/standings-pick.component.css?inline';
+import standingsBase from '../src/lib/standings/standings.component.css?inline';
+
+export type StandingsMockFormResult = 'win' | 'tie' | 'loss';
+
+export type StandingsMockRow = {
+  position: number;
+  name: string;
+  played: number;
+  wins: number;
+  ties: number;
+  losses: number;
+  /** Left out, the table has no difference column unless another row has one. */
+  difference?: number;
+  points: number;
+  /** Oldest first. Left out on every row, the table has no form column. */
+  form?: readonly StandingsMockFormResult[];
+};
+
+export type StandingsMockZone = {
+  from: number;
+  to: number;
+  label: string;
+  /** A color theme name the app registers. Left out, the zone takes the color theme around the table. */
+  color?: string;
+};
+
+export type StandingsMockOptions = {
+  rows: readonly StandingsMockRow[];
+  zones?: readonly StandingsMockZone[];
+  /** The position of the highlighted (own) row. */
+  highlighted?: number;
+  showLegend?: boolean;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+export type StandingsPickMockRow = {
+  name: string;
+  /** The consumer's mark template content, as HTML, drawn only while locked. */
+  mark?: string;
+  /** A design marker for the reorder handle, e.g. `hover` or `focus-visible`. */
+  handleForce?: string;
+};
+
+export type StandingsPickMockOptions = {
+  rows: readonly StandingsPickMockRow[];
+  advancingCount: number;
+  locked?: boolean;
+  /** The index of the card being dragged, and its offset from the slot in px. */
+  dragging?: { index: number; offset: number };
+  /** Per index, the preview offset in px the other cards slide by while a drag runs. */
+  shifts?: readonly number[];
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets the standings mocks draw with: the real standings, standings pick, match participant and focus ring CSS. */
+export const standingsStyles = /* @__PURE__ */ [focusRing, participantBase, standingsBase, pickBase].join('\n');
+
+const forced = (force: string | undefined) => (force ? ` data-et-force="${force}"` : '');
+
+const colored = (color: string | undefined) => (color ? ` et-color--${color}` : '');
+
+const participant = (name: string, className: string) =>
+  `<et-match-participant class="et-match-participant ${className}"><span class="et-match-participant-emblem"><span data-mark="${(Array.from(name.trim())[0] ?? '').toUpperCase()}" class="et-match-participant-emblem-mark" aria-hidden="true"></span></span><span class="et-match-participant-names"><span class="et-match-participant-name">${name}</span></span></et-match-participant>`;
+
+const differenceText = (difference: number | undefined) =>
+  difference === undefined ? '' : difference > 0 ? `+${difference}` : `${difference}`;
+
+const FORM_SHORT = { win: 'W', tie: 'D', loss: 'L' } as const;
+
+const headCell = (column: string, label: string) =>
+  `<th class="et-standings-cell" data-column="${column}" scope="col">${label}</th>`;
+
+/** Draws an `et-standings` table with its zone bands, highlighted row and legend, as HTML. */
+export const standings = (options: StandingsMockOptions) => {
+  const zones = options.zones ?? [];
+  const hasDifference = options.rows.some((row) => row.difference !== undefined);
+  const hasForm = options.rows.some((row) => row.form);
+  const zoneOf = (position: number) => zones.find((zone) => position >= zone.from && position <= zone.to);
+
+  const head = [
+    headCell('position', '#'),
+    headCell('participant', 'Team'),
+    ...['P', 'W', 'D', 'L'].map((label) => headCell('detail', label)),
+    hasDifference ? headCell('detail', 'Diff') : '',
+    headCell('points', 'Pts'),
+    hasForm ? headCell('form', 'Form') : '',
+  ].join('');
+
+  const body = options.rows
+    .map((row) => {
+      const zone = zoneOf(row.position);
+      const highlighted = row.position === options.highlighted;
+      const attributes = [
+        zone ? ' data-zone=""' : '',
+        highlighted ? ' data-highlighted="" aria-current="true"' : '',
+      ].join('');
+      const form = row.form
+        ? `<span class="et-standings-form">${row.form.map((result) => `<span data-result="${result}" class="et-standings-form-result" aria-hidden="true">${FORM_SHORT[result]}</span>`).join('')}</span>`
+        : '';
+
+      return [
+        `<tr class="et-standings-row${colored(zone?.color)}"${attributes}>`,
+        `<th class="et-standings-cell" data-column="position" scope="row">${row.position}</th>`,
+        `<td class="et-standings-cell" data-column="participant">${participant(row.name, 'et-standings-participant')}</td>`,
+        ...[row.played, row.wins, row.ties, row.losses].map(
+          (value) => `<td class="et-standings-cell" data-column="detail">${value}</td>`,
+        ),
+        hasDifference
+          ? `<td class="et-standings-cell" data-column="detail">${differenceText(row.difference)}</td>`
+          : '',
+        `<td class="et-standings-cell" data-column="points">${row.points}</td>`,
+        hasForm ? `<td class="et-standings-cell" data-column="form">${form}</td>` : '',
+        `</tr>`,
+      ].join('');
+    })
+    .join('');
+
+  const legend =
+    options.showLegend && zones.length
+      ? `<ul aria-label="What the highlighted positions mean" class="et-standings-legend">${zones.map((zone) => `<li class="et-standings-legend-item"><span class="et-standings-legend-swatch${colored(zone.color)}" aria-hidden="true"></span>${zone.label}</li>`).join('')}</ul>`
+      : '';
+
+  return `<et-standings class="et-standings"${zones.length ? ' data-has-zones=""' : ''} ${options.attributes ?? ''}><div class="et-standings-content"><table class="et-standings-table"><thead><tr class="et-standings-head-row">${head}</tr></thead><tbody>${body}</tbody></table>${legend}</div></et-standings>`;
+};
+
+/** Draws an `et-standings-pick` list with its cut line, at rest, mid-drag or locked with marks, as HTML. */
+export const standingsPick = (options: StandingsPickMockOptions) => {
+  const items = options.rows
+    .map((row, index) => {
+      const advancing = index < options.advancingCount;
+      const dragging = options.dragging?.index === index;
+      const offset = dragging ? options.dragging?.offset : options.shifts?.[index];
+      const translate = offset ? ` style="translate: 0 ${offset}px"` : '';
+      const mark = options.locked && row.mark ? `<span class="et-standings-pick-mark">${row.mark}</span>` : '';
+      const handle = options.locked
+        ? ''
+        : `<button aria-label="Move ${row.name}, position ${index + 1}" class="et-standings-pick-handle et-focus-ring" type="button"${forced(row.handleForce)}><span class="et-standings-pick-grip" aria-hidden="true"></span></button>`;
+      const cut =
+        index === options.advancingCount - 1
+          ? `<p class="et-standings-pick-cut" aria-hidden="true"><span class="et-standings-pick-cut-line"></span><span class="et-standings-pick-cut-label">Advancing</span><span class="et-standings-pick-cut-line"></span></p>`
+          : '';
+
+      return [
+        `<li class="et-standings-pick-item"${advancing ? ' data-advancing=""' : ''}>`,
+        `<div class="et-standings-pick-row"><span class="et-standings-pick-position">${index + 1}</span>`,
+        `<div class="et-standings-pick-card"${dragging ? ' data-dragging=""' : ''}${translate}>`,
+        participant(row.name, 'et-standings-pick-participant'),
+        mark,
+        handle,
+        `</div></div>${cut}</li>`,
+      ].join('');
+    })
+    .join('');
+
+  return `<et-standings-pick class="et-standings-pick"${options.locked ? ' data-locked=""' : ''} ${options.attributes ?? ''}><ol aria-label="Your predicted order" class="et-standings-pick-list"${options.dragging ? ' data-dragging=""' : ''}>${items}</ol></et-standings-pick>`;
+};

package/design/stat-tile.ts

@@ -0,0 +1,109 @@
+import sparklineBase from '../src/lib/stat-tile/stat-tile-sparkline.component.css?inline';
+import statTileBase from '../src/lib/stat-tile/stat-tile.component.css?inline';
+import { skeleton, skeletonItem, skeletonStyles } from './skeleton';
+
+export type StatTileDeltaMockOptions = {
+  /** The formatted, signed delta, e.g. `+6.8%`. */
+  text: string;
+  direction: 'up' | 'down' | 'neutral';
+  /** Left out, `neutral`. `good` and `bad` draw the delta in the ink of its color theme. */
+  sentiment?: 'good' | 'bad' | 'neutral';
+  /**
+   * The color theme name the delta forces, as the app's semantic theme for `success` (good) or `error` (bad)
+   * resolves. Left out, the delta takes the color theme around it.
+   */
+  color?: string;
+};
+
+export type StatTileMockOptions = {
+  label: string;
+  /** The formatted value. `null` draws the dash. */
+  value: string | null;
+  unit?: string;
+  delta?: StatTileDeltaMockOptions;
+  caption?: string;
+  /** Replaces the value and footer with the skeleton, as `[loading]` does. */
+  loading?: boolean;
+  /** The values of a projected `et-stat-tile-sparkline`, oldest first. Left out, none. */
+  sparkline?: readonly (number | null)[];
+  /** Extra attributes on the stat tile, e.g. design markers. */
+  attributes?: string;
+};
+
+const VIEW_WIDTH = 100;
+const VIEW_HEIGHT = 32;
+const VIEW_PADDING = 4;
+
+const round = (value: number) => Math.round(value * 100) / 100;
+
+const DELTA_ICONS = {
+  up: 'M6 2 11 9H1Z',
+  down: 'M6 10 1 3h10Z',
+  neutral: 'M1.5 5h9v2h-9Z',
+} as const;
+
+/** The stylesheets `statTile()` draws with: the real stat-tile, sparkline and skeleton CSS. */
+export const statTileStyles = /* @__PURE__ */ [skeletonStyles, statTileBase, sparklineBase].join('\n');
+
+/** Draws an `et-stat-tile-sparkline` with the geometry the component computes, as HTML. */
+export const statTileSparkline = (values: readonly (number | null)[]) => {
+  const finite = values.filter((value): value is number => value !== null && Number.isFinite(value));
+  const min = finite.length ? Math.min(...finite) : 0;
+  const span = (finite.length ? Math.max(...finite) : 0) - min;
+  const step = values.length > 1 ? VIEW_WIDTH / (values.length - 1) : 0;
+  const plotHeight = VIEW_HEIGHT - VIEW_PADDING * 2;
+  const points = values.map((value, index) => {
+    if (value === null || !Number.isFinite(value)) return null;
+
+    const ratio = span ? (value - min) / span : 0.5;
+
+    return { x: values.length > 1 ? index * step : VIEW_WIDTH / 2, y: VIEW_PADDING + (1 - ratio) * plotHeight };
+  });
+  const segments = points
+    .map((point) => (point ? `${round(point.x)},${round(point.y)}` : '|'))
+    .join(' ')
+    .split('|')
+    .map((segment) => segment.trim().split(' ').filter(Boolean))
+    .filter((segment) => segment.length > 1);
+  const line = segments
+    .map((segment) => segment.map((point, index) => `${index ? 'L' : 'M'}${point}`).join(''))
+    .join('');
+  const current = [...points].reverse().find((point) => point !== null) ?? null;
+  const dot = current ? `<path d="M${current.x},${current.y}h0" class="et-stat-tile-sparkline-current"></path>` : '';
+
+  return `<et-stat-tile-sparkline class="et-stat-tile-sparkline" aria-hidden="true"><svg viewBox="0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}" class="et-stat-tile-sparkline-svg" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path d="${line}" class="et-stat-tile-sparkline-line"></path>${dot}</svg></et-stat-tile-sparkline>`;
+};
+
+const loadingMarkup = () =>
+  skeleton({
+    content: [
+      skeletonItem({ shape: 'rect' }).replace('class="', 'class="et-stat-tile-value-skeleton '),
+      skeletonItem({ shape: 'rect' }).replace('class="', 'class="et-stat-tile-delta-skeleton '),
+    ].join(''),
+  }).replace('class="et-skeleton', 'class="et-stat-tile-skeleton et-skeleton');
+
+const deltaMarkup = (delta: StatTileDeltaMockOptions) =>
+  `<span class="et-color--${delta.color ?? 'inherited'} et-stat-tile-delta" data-direction="${delta.direction}" data-sentiment="${delta.sentiment ?? 'neutral'}"><svg class="et-stat-tile-delta-icon" viewBox="0 0 12 12" aria-hidden="true" focusable="false"><path d="${DELTA_ICONS[delta.direction]}"></path></svg>${delta.text}</span>`;
+
+const valueMarkup = (options: StatTileMockOptions) => {
+  const unit = options.unit ? ` <span class="et-stat-tile-unit">${options.unit}</span>` : '';
+  const value = options.value === null ? '<span aria-hidden="true">–</span>' : `${options.value}${unit}`;
+  const footerParts = [
+    options.delta && deltaMarkup(options.delta),
+    options.caption && `<span class="et-stat-tile-caption">${options.caption}</span>`,
+  ].filter(Boolean);
+  const footer = footerParts.length ? ` <span class="et-stat-tile-footer">${footerParts.join(' ')}</span>` : '';
+
+  return `<span class="et-stat-tile-value">${value}</span>${footer}`;
+};
+
+/** Draws an `et-stat-tile` with its projected sparkline as the component renders it, as HTML, without its visually hidden text. */
+export const statTile = (options: StatTileMockOptions) => {
+  const attributes = [options.attributes, options.loading && 'aria-busy="true"', 'class="et-stat-tile"'].filter(
+    Boolean,
+  );
+  const body = options.loading ? loadingMarkup() : valueMarkup(options);
+  const sparkline = options.sparkline ? statTileSparkline(options.sparkline) : '';
+
+  return `<et-stat-tile ${attributes.join(' ')}><span class="et-stat-tile-label">${options.label}</span> ${body}${sparkline}</et-stat-tile>`;
+};

package/design/stream.ts

@@ -0,0 +1,92 @@
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { ARROW_OUT_UP_RIGHT_ICON } from '../src/lib/icon/headless/arrow-out-up-right-icon';
+import { IconDefinition } from '../src/lib/icon/headless/icon-definition';
+import { LOCK_ICON } from '../src/lib/icon/headless/lock-icon';
+import { TRIANGLE_EXCLAMATION_ICON } from '../src/lib/icon/headless/triangle-exclamation-icon';
+import consentBase from '../src/lib/stream/consent/stream-consent.component.css?inline';
+import errorBase from '../src/lib/stream/error/stream-player-error.component.css?inline';
+import loadingBase from '../src/lib/stream/loading/stream-player-loading.component.css?inline';
+import placeholderBase from '../src/lib/stream/pip/pip-slot-placeholder.component.css?inline';
+import overlayCardBase from '../src/lib/stream/stream-overlay-card-styles.component.css?inline';
+import slotBase from '../src/lib/stream/stream-player-slot-styles.component.css?inline';
+import { button, buttonStyles } from './button';
+import { iconMarkup } from './icon';
+import { loaderStyles, spinner } from './loader';
+
+export type StreamMockState = 'player' | 'loading' | 'consent' | 'error' | 'pip-placeholder';
+
+export type StreamMockOptions = {
+  /** What the slot shows: the bare player, or one of the overlays the slot mounts over it. */
+  state: StreamMockState;
+  /** The player element, as HTML. The consent state draws no player, as the slot holds it back until consent. */
+  player?: string;
+  /** A color theme name the app registers, for the overlay button. Left out, the button takes the color theme around it. */
+  buttonColor?: string;
+  /** Extra attributes on the overlay button, e.g. design markers. */
+  buttonAttributes?: string;
+  /** Extra attributes on the slot host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `streamPlayerSlot()` draws with: the real slot, overlay card, consent, error, loading, PiP placeholder, spinner, button and icon CSS. */
+export const streamStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  loaderStyles,
+  slotBase,
+  overlayCardBase,
+  consentBase,
+  errorBase,
+  loadingBase,
+  placeholderBase,
+].join('\n');
+
+const LABELS = {
+  loading: 'Loading',
+  consentHeading: 'Content blocked',
+  consentDescription: 'Playback requires your consent. Third-party cookies and data may be used.',
+  consentAccept: 'Allow and play',
+  errorHeading: 'Playback failed',
+  errorDescription: 'The player could not be loaded. Please check your connection or try again.',
+  errorRetry: 'Retry',
+  pipPlaceholderMessage: 'Playing in picture-in-picture',
+  pipPlaceholderBack: 'Back to player',
+} as const;
+
+const icon = (definition: IconDefinition, className: string) =>
+  iconMarkup(definition, className)
+    .replace(/^<i /, '<span ')
+    .replace(/<\/i>$/, '</span>');
+
+const overlayButton = (label: string, options: StreamMockOptions) =>
+  button({ label, color: options.buttonColor }).replace('<button ', `<button ${options.buttonAttributes ?? ''} `);
+
+const consent = (options: StreamMockOptions) =>
+  `<et-stream-consent class="et-stream-consent" role="group" aria-labelledby="et-stream-consent-heading-0"><div class="et-stream-consent-card">${icon(LOCK_ICON, 'et-stream-consent-icon')}<p id="et-stream-consent-heading-0" class="et-stream-consent-heading">${LABELS.consentHeading}</p><p class="et-stream-consent-description">${LABELS.consentDescription}</p>${overlayButton(LABELS.consentAccept, options)}</div></et-stream-consent>`;
+
+const loading = () =>
+  `<et-stream-player-loading class="et-stream-player-loading" role="status" aria-label="${LABELS.loading}">${spinner({ diameter: 35, strokeWidth: 2, track: true })}</et-stream-player-loading>`;
+
+const error = (options: StreamMockOptions) =>
+  `<et-stream-player-error class="et-stream-player-error" role="alert"><div class="et-stream-player-error-card">${icon(TRIANGLE_EXCLAMATION_ICON, 'et-stream-player-error-icon')}<p class="et-stream-player-error-heading">${LABELS.errorHeading}</p><p class="et-stream-player-error-description">${LABELS.errorDescription}</p>${overlayButton(LABELS.errorRetry, options)}</div></et-stream-player-error>`;
+
+const pipPlaceholder = (options: StreamMockOptions) =>
+  `<et-pip-slot-placeholder><div class="et-pip-slot-placeholder-overlay"><div class="et-pip-slot-placeholder-card">${icon(ARROW_OUT_UP_RIGHT_ICON, 'et-pip-slot-placeholder-icon')}<p class="et-pip-slot-placeholder-message">${LABELS.pipPlaceholderMessage}</p>${overlayButton(LABELS.pipPlaceholderBack, options)}</div></div></et-pip-slot-placeholder>`;
+
+const OVERLAY = {
+  player: () => '',
+  loading,
+  consent,
+  error,
+  'pip-placeholder': pipPlaceholder,
+} as const satisfies Record<StreamMockState, (options: StreamMockOptions) => string>;
+
+/**
+ * Draws an `etStreamPlayerSlot` host as HTML: the player element and the overlay the slot mounts for the state,
+ * with the default labels. The loading spinner is held at one frame.
+ */
+export const streamPlayerSlot = (options: StreamMockOptions) => {
+  const player = options.state === 'consent' || options.state === 'pip-placeholder' ? '' : (options.player ?? '');
+
+  return `<div class="et-stream-player-slot" ${options.attributes ?? ''}>${player}${OVERLAY[options.state](options)}</div>`;
+};