@ethlete/components 1.0.0-next.77 → 1.0.0-next.79

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>`;
+};

package/design/switch.ts

@@ -0,0 +1,83 @@
+import { interactiveStyles } from '@ethlete/core/design/interactive-styles';
+import choiceFieldBase from '../src/lib/forms/choice-field/choice-field.component.css?inline';
+import choiceFieldCard from '../src/lib/forms/choice-field/choice-field-card-styles.component.css?inline';
+import label from '../src/lib/forms/form-field/headless/label.directive.css?inline';
+import selectionCard from '../src/lib/forms/selection-card-styles.component.css?inline';
+import switchBase from '../src/lib/forms/switch/switch.component.css?inline';
+
+export type SwitchMockOptions = {
+  checked?: boolean;
+  /** The bulk-edit state: the thumb parks mid-track. Wins over `checked` in the look. */
+  indeterminate?: boolean;
+  disabled?: boolean;
+  /** View-only: the normal look, without the interactive affordance. */
+  readonly?: boolean;
+  required?: boolean;
+  /** The label, as HTML. Draws the switch inside an `<et-choice-field>`; left out, the switch stands alone. */
+  label?: string;
+  /** Unique per frame: the label id derives from it. */
+  id?: string;
+  /** The `et-choice-field` size. Only drawn with a `label`. */
+  size?: 'sm' | 'md' | 'lg';
+  /** The `et-choice-field` variant. Only drawn with a `label`. */
+  variant?: 'plain' | 'card';
+  /** Where a `card` puts the switch. */
+  controlPosition?: 'start' | 'end';
+  /** A color theme name the app registers. Only drawn with a `label`. */
+  color?: string;
+  /** Extra attributes on the `<et-switch>`, e.g. design markers like `data-et-force="hover"`. */
+  attributes?: string;
+};
+
+/** The stylesheets `switchControl()` draws with: the real `et-switch` and `et-choice-field` CSS. */
+export const switchStyles = /* @__PURE__ */ [
+  interactiveStyles,
+  label,
+  selectionCard,
+  choiceFieldBase,
+  choiceFieldCard,
+  switchBase,
+].join('\n');
+
+/** Draws `<et-switch>` as HTML, inside an `<et-choice-field>` when it has a label, with the DOM the components render. */
+export const switchControl = (options: SwitchMockOptions = {}) => {
+  const { id = 'switch', variant = 'plain' } = options;
+  const labelId = options.label !== undefined ? `et-label-${id}` : null;
+
+  const switchAttributes = [
+    options.attributes,
+    'role="switch"',
+    'class="et-switch et-color-interactive"',
+    'data-can-animate="true"',
+    `aria-checked="${!!options.checked}"`,
+    options.indeterminate && 'data-indeterminate="true"',
+    options.disabled && 'aria-disabled="true"',
+    options.readonly && 'aria-readonly="true" data-readonly="true"',
+    options.required && 'aria-required="true"',
+    labelId && `aria-labelledby="${labelId}"`,
+    `tabindex="${options.disabled ? -1 : 0}"`,
+  ].filter(Boolean);
+
+  const control = `<et-switch ${switchAttributes.join(' ')}><div class="et-switch-track"><div class="et-switch-thumb"></div></div></et-switch>`;
+
+  if (labelId === null) return control;
+
+  const fieldAttributes = [
+    `class="et-choice-field et-color--${options.color ?? 'inherited'}"`,
+    `data-size="${options.size ?? 'md'}"`,
+    `data-variant="${variant}"`,
+    'data-can-animate="true"',
+    variant === 'card' && `data-control-position="${options.controlPosition ?? 'end'}"`,
+  ].filter(Boolean);
+
+  const controlClasses = [
+    variant === 'card' && 'et-selection-card',
+    'et-choice-field-control',
+    'et-color-interactive',
+    'et-color-interactive-container',
+  ].filter(Boolean);
+
+  const labelHtml = `<et-label id="${labelId}"${options.disabled ? ' data-disabled="true"' : ''}><span class="et-label-content">${options.label}</span>${options.required ? '<span class="et-label-required-marker" aria-hidden="true">*</span>' : ''}</et-label>`;
+
+  return `<et-choice-field ${fieldAttributes.join(' ')}><div class="${controlClasses.join(' ')}"><div class="et-choice-field-control-slot et-selection-card-control">${control}</div><div class="et-choice-field-label-area et-selection-card-content">${labelHtml}</div></div></et-choice-field>`;
+};

package/design/table.ts

@@ -0,0 +1,302 @@
+import checkboxBase from '../src/lib/forms/checkbox/checkbox.component.css?inline';
+import { ARROW_UP_ICON } from '../src/lib/icon/headless/arrow-up-icon';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { TRIANGLE_EXCLAMATION_ICON } from '../src/lib/icon/headless/triangle-exclamation-icon';
+import tableDetailBase from '../src/lib/table/table-detail-styles.component.css?inline';
+import tableExpanderBase from '../src/lib/table/table-expander-cell.component.css?inline';
+import tableGroupHeaderBase from '../src/lib/table/table-group-header-row.component.css?inline';
+import tableSelectBase from '../src/lib/table/table-select-cell.component.css?inline';
+import tableSkeletonRowsBase from '../src/lib/table/table-skeleton-rows.component.css?inline';
+import tableStickyColumnsBase from '../src/lib/table/table-sticky-columns-styles.component.css?inline';
+import tableBase from '../src/lib/table/table.component.css?inline';
+import { iconMarkup } from './icon';
+import { skeletonItem, skeletonStyles } from './skeleton';
+
+export type TableColumnMock = {
+  header: string;
+  /** Left out, `start`. */
+  align?: 'start' | 'center' | 'end';
+  /** Draws the header label as the sort button. */
+  sortable?: boolean;
+  /** The column's sort direction. Left out, unsorted. */
+  sort?: 'asc' | 'desc';
+  /** Pins the column (`etTableStickyColumns`), with its `inset-inline-*` offset in px. */
+  sticky?: { side: 'start' | 'end'; offset: number };
+  /** Extra attributes on the sort button, e.g. design markers. */
+  labelAttributes?: string;
+};
+
+export type TableCellMock =
+  | string
+  | {
+      value: string;
+      /** `error` draws the built-in cell error mark before the value. */
+      state?: 'error';
+      /** The error message, drawn as the mark's label and title. */
+      message?: string;
+      /** Extra attributes on the cell, e.g. design markers. */
+      attributes?: string;
+    };
+
+export type TableRowMock = {
+  cells: TableCellMock[];
+  /** Draws the row as selected (`etTableSelection`). */
+  selected?: boolean;
+  /** Draws the expander open and the detail row under the row, as HTML. */
+  detail?: string;
+  /** Leaves the expander out, as a row `canExpand` turns down. */
+  noExpander?: boolean;
+  /** Extra attributes on the row, e.g. design markers. */
+  attributes?: string;
+  /** Extra attributes on the expander button, e.g. design markers. */
+  expanderAttributes?: string;
+};
+
+export type TableMockOptions = {
+  columns: TableColumnMock[];
+  rows: TableRowMock[];
+  /** The `grid-template-columns` of the data columns, without the leading utility tracks. */
+  tracks: string;
+  /** Left out, `enclosed`, as `et-table` defaults to. */
+  appearance?: 'enclosed' | 'divided' | 'zebra' | 'grid' | 'bare';
+  /** Left out, `md`, as `et-table` defaults to. */
+  density?: 'sm' | 'md' | 'lg';
+  /** Draws the selection column; the value is the select-all checkbox state. */
+  selection?: 'unchecked' | 'checked' | 'mixed';
+  /** Draws the expander column (`etTableRowExpansion`). */
+  expandable?: boolean;
+  /** Draws the group header row (`etTableGroupHeaders`) over the data columns. */
+  groups?: { label?: string; span: number }[];
+  /** Draws the message row in place of the body: `empty` with the default label, `error` with the default icon and label. */
+  message?: 'empty' | 'error';
+  /** Draws this many skeleton rows in place of the body (`etTableSkeleton`), with the bone widths in % per column. */
+  placeholder?: { rows: number; widths: number[] };
+  /** Draws the busy bar over the first row, its sweep held at this fraction of its run from 0 to 1. */
+  busyAt?: number;
+  /** Rows with a click handler (`rowClick`), which take the pointer and the pressed tint. */
+  interactive?: boolean;
+  /** Cells take focus (`etTableKeyboardNav`). */
+  cellNavigation?: boolean;
+  /** The scroll edges with content past them: draws their shadow marks and scroll fades. */
+  scrolled?: { inlineStart?: boolean; inlineEnd?: boolean; blockStart?: boolean };
+  /** The error color theme name, the app's `type: 'error'` theme. */
+  errorColor: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `table()` draws with: the real table, feature, checkbox, skeleton and icon CSS. */
+export const tableStyles = /* @__PURE__ */ [
+  iconBase,
+  checkboxBase,
+  skeletonStyles,
+  tableBase,
+  tableStickyColumnsBase,
+  tableSelectBase,
+  tableExpanderBase,
+  tableGroupHeaderBase,
+  tableDetailBase,
+  tableSkeletonRowsBase,
+  `.et-table-busy-bar[data-et-busy-at]::after {
+  animation: none;
+  transform: translateX(calc(-100% + var(--et-busy-at) * 350%));
+}
+.et-table-row--placeholder .et-skeleton-item::after {
+  animation: none;
+}`,
+].join('\n');
+
+const checkbox = (state: 'unchecked' | 'checked' | 'mixed', label: string) => {
+  const checked = state === 'checked' ? 'true' : state === 'mixed' ? 'mixed' : 'false';
+
+  return (
+    `<et-checkbox class="et-checkbox" role="checkbox" aria-checked="${checked}" aria-label="${label}" tabindex="0">` +
+    `<div class="et-checkbox-box">` +
+    `<svg class="et-checkbox-checkmark" viewBox="0 0 16 16" aria-hidden="true"><polyline class="et-checkbox-checkmark-path" points="3.5 8 6.5 11 12.5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline></svg>` +
+    `<svg class="et-checkbox-indeterminate" viewBox="0 0 16 16" aria-hidden="true"><line class="et-checkbox-indeterminate-path" x1="4" y1="8" x2="12" y2="8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line></svg>` +
+    `</div></et-checkbox>`
+  );
+};
+
+const attr = (name: string, value: string | number | undefined) => (value === undefined ? '' : ` ${name}="${value}"`);
+
+const styleAttr = (value: string) => ` style="${value}"`;
+
+const stickyOf = (column: TableColumnMock | undefined) =>
+  column?.sticky
+    ? {
+        className: ` et-table-sticky-${column.sticky.side}`,
+        style: styleAttr(`inset-inline-${column.sticky.side}: ${column.sticky.offset}px`),
+      }
+    : { className: '', style: '' };
+
+const ariaSort = (column: TableColumnMock) =>
+  column.sort === 'asc' ? 'ascending' : column.sort === 'desc' ? 'descending' : column.sortable ? 'none' : undefined;
+
+const headerCell = (column: TableColumnMock) => {
+  const sticky = stickyOf(column);
+  const text = `<span class="et-table-cell-text">${column.header}</span>`;
+  const indicator = column.sort
+    ? iconMarkup(ARROW_UP_ICON, 'et-table-sort-indicator').replace('<i ', `<i data-direction="${column.sort}" `)
+    : '';
+  const label = column.sortable
+    ? `<button class="et-table-header-label et-table-header-label--sortable" type="button"${column.labelAttributes ? ` ${column.labelAttributes}` : ''}><span class="et-table-header-label-box">${text}${indicator}</span></button>`
+    : `<span class="et-table-header-label"><span class="et-table-header-label-box">${text}</span></span>`;
+
+  return `<div class="et-table-header-cell${sticky.className}" role="columnheader"${attr('data-align', column.align)}${attr('aria-sort', ariaSort(column))}${sticky.style}>${label}</div>`;
+};
+
+const bodyCell = (options: TableMockOptions, column: number) => (cell: TableCellMock) => {
+  const sticky = stickyOf(options.columns[column]);
+  const resolved = typeof cell === 'string' ? { value: cell } : cell;
+  const mark =
+    resolved.state === 'error'
+      ? iconMarkup(TRIANGLE_EXCLAMATION_ICON, `et-table-cell-error-icon et-color--${options.errorColor}`).replace(
+          ' aria-hidden="true"',
+          ` role="img" aria-label="${resolved.message ?? ''}" title="${resolved.message ?? ''}"`,
+        )
+      : '';
+  const extra = resolved.attributes ? ` ${resolved.attributes}` : '';
+
+  return `<div class="et-table-cell${sticky.className}" role="cell"${attr('data-align', options.columns[column]?.align)}${attr('data-state', resolved.state)}${attr('tabindex', options.cellNavigation ? -1 : undefined)}${sticky.style}${extra}>${mark}<span class="et-table-cell-text">${resolved.value}</span></div>`;
+};
+
+const leadHeaderCells = (options: TableMockOptions) =>
+  [
+    options.selection
+      ? `<div class="et-table-select-cell et-table-header-cell" role="columnheader"><et-table-select-all-cell>${checkbox(options.selection, 'Select all rows')}</et-table-select-all-cell></div>`
+      : '',
+    options.expandable ? `<div class="et-table-expander-cell et-table-header-cell" role="columnheader"></div>` : '',
+  ].join('');
+
+const leadBodyCells = (row: TableRowMock, options: TableMockOptions) => {
+  const expanded = row.detail !== undefined;
+  const expander =
+    row.noExpander === true
+      ? ''
+      : `<button class="et-table-expander" type="button" aria-expanded="${expanded}" aria-label="${expanded ? 'Collapse row' : 'Expand row'}"${row.expanderAttributes ? ` ${row.expanderAttributes}` : ''}>${iconMarkup(CHEVRON_ICON, 'et-table-expander-icon').replace('<i ', `<i data-expanded="${expanded}" `)}</button>`;
+
+  return [
+    options.selection
+      ? `<div class="et-table-select-cell et-table-cell" role="cell"><et-table-select-cell>${checkbox(row.selected ? 'checked' : 'unchecked', 'Select row')}</et-table-select-cell></div>`
+      : '',
+    options.expandable
+      ? `<div class="et-table-expander-cell et-table-cell" role="cell"><et-table-expander-cell>${expander}</et-table-expander-cell></div>`
+      : '',
+  ].join('');
+};
+
+const leadCount = (options: TableMockOptions) => (options.selection ? 1 : 0) + (options.expandable ? 1 : 0);
+
+const groupRow = (options: TableMockOptions) =>
+  options.groups
+    ? `<et-table-group-header-row class="et-table-group-row" role="row">${'<div class="et-table-group-cell" aria-hidden="true"></div>'.repeat(leadCount(options))}${options.groups
+        .map((group) =>
+          group.label
+            ? `<div class="et-table-group-cell et-table-group-cell--labeled" role="columnheader" aria-colspan="${group.span}"${styleAttr(`grid-column: span ${group.span}`)}><span class="et-table-cell-text">${group.label}</span></div>`
+            : `<div class="et-table-group-cell" aria-hidden="true"${styleAttr(`grid-column: span ${group.span}`)}></div>`,
+        )
+        .join('')}</et-table-group-header-row>`
+    : '';
+
+const bodyRow = (options: TableMockOptions) => (row: TableRowMock, index: number) => {
+  const last = index === options.rows.length - 1;
+  const classes = [
+    'et-table-row',
+    row.selected && 'et-table-row--selected',
+    index % 2 === 1 && 'et-table-row--stripe',
+    last && 'et-table-row--last',
+    options.interactive && 'et-table-row--interactive',
+  ].filter(Boolean);
+  const cells = row.cells.map((cell, column) => bodyCell(options, column)(cell)).join('');
+  const detail =
+    row.detail === undefined
+      ? ''
+      : `<et-table-row-detail class="et-table-detail-row" role="row"><div class="et-table-detail-cell" role="cell"><div class="et-table-detail-body">${row.detail}</div></div></et-table-row-detail>`;
+
+  return `<div class="${classes.join(' ')}" role="row"${attr('aria-selected', options.selection ? String(row.selected === true) : undefined)}${attr('tabindex', options.interactive ? 0 : undefined)}${row.attributes ? ` ${row.attributes}` : ''}>${leadBodyCells(row, options)}${cells}</div>${detail}`;
+};
+
+const placeholderRows = (options: TableMockOptions) => {
+  const { rows, widths } = options.placeholder ?? { rows: 0, widths: [] };
+  const lead = (className: string) => `<div class="${className} et-table-cell" role="cell"></div>`;
+
+  return `<et-table-skeleton-rows class="et-table-skeleton-rows">${Array.from(
+    { length: rows },
+    (_, index) =>
+      `<div class="et-table-row et-table-row--placeholder et-skeleton--animated${index % 2 === 1 ? ' et-table-row--stripe' : ''}${index === rows - 1 ? ' et-table-row--last' : ''}" role="row" aria-hidden="true">` +
+      (options.selection ? lead('et-table-select-cell') : '') +
+      (options.expandable ? lead('et-table-expander-cell') : '') +
+      options.columns
+        .map(
+          (column, position) =>
+            `<div class="et-table-cell" role="cell"${attr('data-align', column.align)}>${skeletonItem({ style: `inline-size: ${widths[position] ?? 60}%` })}</div>`,
+        )
+        .join('') +
+      `</div>`,
+  ).join('')}</et-table-skeleton-rows>`;
+};
+
+const messageRow = (options: TableMockOptions) =>
+  options.message === 'error'
+    ? `<div class="et-table-message-row" role="row"><div class="et-table-error-cell" role="cell" aria-live="polite">${iconMarkup(TRIANGLE_EXCLAMATION_ICON, `et-table-error-icon et-color--${options.errorColor}`)}<span>Could not load data</span></div></div>`
+    : `<div class="et-table-message-row" role="row"><div class="et-table-empty-cell" role="cell">No data</div></div>`;
+
+const body = (options: TableMockOptions) => {
+  if (options.message) return messageRow(options);
+  if (options.placeholder) return placeholderRows(options);
+
+  return options.rows.map(bodyRow(options)).join('');
+};
+
+const scrollFades = (options: TableMockOptions) => {
+  const pinned = (side: 'start' | 'end') => options.columns.some((column) => column.sticky?.side === side);
+  const fade = (side: 'start' | 'end', scrolled: boolean | undefined) =>
+    `<div class="et-table-scroll-fade et-table-scroll-fade--${side}${scrolled && !pinned(side) ? ' et-table-scroll-fade--visible' : ''}"${styleAttr(`inset-inline-${side}: 0px`)}></div>`;
+
+  return (
+    `<div class="et-table-scroll-fades" role="presentation" aria-hidden="true">` +
+    fade('start', options.scrolled?.inlineStart) +
+    fade('end', options.scrolled?.inlineEnd) +
+    `</div>`
+  );
+};
+
+/** Draws `<et-table>` with its header, body rows and the built-in features as a static snapshot of one state. */
+export const table = (options: TableMockOptions) => {
+  const leads = [
+    options.selection && 'var(--et-table-select-width, 44px)',
+    options.expandable && 'var(--et-table-expander-width, 32px)',
+  ];
+  const tracks = [...leads.filter(Boolean), options.tracks].join(' ');
+  const busy =
+    options.busyAt === undefined
+      ? ''
+      : `<div class="et-table-busy-bar" role="presentation" data-et-busy-at${styleAttr(`--et-busy-at: ${options.busyAt}`)}></div>`;
+  const host = [
+    options.attributes,
+    `class="${[
+      'et-table-host',
+      options.scrolled?.inlineStart && 'et-table-host--scrolled-inline-start',
+      options.scrolled?.inlineEnd && 'et-table-host--scrolled-inline-end',
+      options.scrolled?.blockStart && 'et-table-host--scrolled-block-start',
+    ]
+      .filter(Boolean)
+      .join(' ')}"`,
+    `data-appearance="${options.appearance ?? 'enclosed'}"`,
+    `data-density="${options.density ?? 'md'}"`,
+    options.placeholder || options.busyAt !== undefined ? 'aria-busy="true"' : '',
+  ].filter(Boolean);
+
+  return (
+    `<et-table ${host.join(' ')}>` +
+    `<div class="et-table" role="table"${styleAttr(`grid-template-columns: ${tracks}`)}>` +
+    groupRow(options) +
+    `<div class="et-table-header-row" role="row">${leadHeaderCells(options)}${options.columns.map(headerCell).join('')}</div>` +
+    busy +
+    body(options) +
+    scrollFades(options) +
+    `</div></et-table>`
+  );
+};