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

package/design/select.ts

@@ -1,16 +1,46 @@
 import controlSuffix from '../src/lib/forms/form-field/form-field-control-suffix-styles.component.css?inline';
+import selectAllOptionStyles from '../src/lib/forms/select/select-all-option.component.css?inline';
 import selectBase from '../src/lib/forms/select/select.component.css?inline';
-import selectOption from '../src/lib/forms/select/select-option-styles.component.css?inline';
-import selectPanel from '../src/lib/forms/select/select-panel.component.css?inline';
+import selectOptionGroupStyles from '../src/lib/forms/select/select-option-group.component.css?inline';
+import selectOptionStyles from '../src/lib/forms/select/select-option-styles.component.css?inline';
+import selectPanelStyles from '../src/lib/forms/select/select-panel.component.css?inline';
+import { CHECK_ICON } from '../src/lib/icon/headless/check-icon';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import { TIMES_ICON } from '../src/lib/icon/headless/times-icon';
 import { FormFieldControlMock, formFieldStyles, FormFieldMockState } from './form-field';
+import { iconMarkup } from './icon';
 
-export const CHECK_ICON_SVG = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`;
+export type SelectMockOption = { value: string; label: string; disabled?: boolean };
 
-export const CHEVRON_ICON_SVG = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M244.7 116.7c6.2-6.2 16.4-6.2 22.6 0l192 192c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L256 150.6 75.3 331.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l192-192z"/></svg>`;
+export type SelectMockActiveSource = 'keyboard' | 'pointer';
 
-export const TIMES_ICON_SVG = `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"/></svg>`;
+export type SelectOptionMockState = {
+  id: string;
+  selected?: boolean;
+  /** Where the active option came from: the keyboard draws it highlighted, the pointer only under `:hover`. */
+  active?: SelectMockActiveSource;
+};
+
+export type SelectAllOptionMockOptions = {
+  id: string;
+  label: string;
+  checked: boolean | 'mixed';
+  active?: SelectMockActiveSource;
+};
+
+export type SelectOptionGroupMockOptions = { labelId: string; label: string; content: string };
 
-export type SelectMockOption = { value: string; label: string };
+export type SelectPanelMockOptions = {
+  id: string;
+  labelId?: string | null;
+  /** The panel's options, groups and select-all row as HTML. */
+  content: string;
+  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. */
+  surface?: string;
+};
 
 export type SelectMockOptions = {
   options: SelectMockOption[];
@@ -33,12 +63,70 @@ export const selectStyles = /* @__PURE__ */ [
   formFieldStyles,
   controlSuffix,
   selectBase,
-  selectOption,
-  selectPanel,
+  selectOptionStyles,
+  selectOptionGroupStyles,
+  selectAllOptionStyles,
+  selectPanelStyles,
 ].join('\n');
 
-const icon = (name: string, svg: string) =>
-  `<i eticon="${name}" aria-hidden="true" class="et-icon et-icon--${name}">${svg}</i>`;
+const activeAttributes = (active: SelectMockActiveSource | undefined) =>
+  active && `data-active="true" data-active-source="${active}"`;
+
+/** Draws one `<et-select-option>` as the select panel renders it. */
+export const selectOption = (option: SelectMockOption, state: SelectOptionMockState) => {
+  const attributes = [
+    'role="option"',
+    `value="${option.value}"`,
+    'class="et-select-option"',
+    `id="${state.id}"`,
+    `aria-selected="${!!state.selected}"`,
+    option.disabled && 'aria-disabled="true"',
+    state.selected && 'data-selected="true"',
+    activeAttributes(state.active),
+  ].filter(Boolean);
+
+  return `<et-select-option ${attributes.join(' ')}><span class="et-select-option-label">${option.label}</span><span class="et-select-option-check">${iconMarkup(CHECK_ICON)}</span></et-select-option>`;
+};
+
+/** Draws the `<et-select-all-option>` row a multi select with `selectAll` renders first in its panel. */
+export const selectAllOption = (options: SelectAllOptionMockOptions) => {
+  const attributes = [
+    'role="option"',
+    'class="et-select-option et-select-all-option"',
+    `id="${options.id}"`,
+    `aria-checked="${options.checked}"`,
+    activeAttributes(options.active),
+  ].filter(Boolean);
+  const check =
+    options.checked === 'mixed'
+      ? '<span class="et-select-all-option-dash" aria-hidden="true"></span>'
+      : iconMarkup(CHECK_ICON);
+
+  return `<et-select-all-option ${attributes.join(' ')}><span class="et-select-option-label">${options.label}</span><span class="et-select-option-check">${check}</span></et-select-all-option>`;
+};
+
+/** Draws an `<et-select-option-group>` with its label around the option HTML in `content`. */
+export const selectOptionGroup = (options: SelectOptionGroupMockOptions) =>
+  `<et-select-option-group role="group" aria-labelledby="${options.labelId}" class="et-select-option-group"><div id="${options.labelId}" class="et-select-option-group-label">${options.label}</div>${options.content}</et-select-option-group>`;
+
+/** Draws the open `<et-select-panel>` with its listbox around the HTML in `content`. */
+export const selectPanel = (options: SelectPanelMockOptions) => {
+  const listbox = [
+    'role="listbox"',
+    'class="et-select-listbox"',
+    `id="et-select-listbox-${options.id}"`,
+    options.labelId && `aria-labelledby="${options.labelId}"`,
+    options.multiple && 'aria-multiselectable="true"',
+  ].filter(Boolean);
+  const classes = [
+    'et-select-panel',
+    'et-color--inherited',
+    options.color && `et-color--${options.color}`,
+    `et-surface--${options.surface ?? 'inherited'}`,
+  ].filter(Boolean);
+
+  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>`;
+};
 
 /**
  * Draws `<et-select>` as a control for `formField()`. Pass `open: true` to `formField()` to draw
@@ -47,21 +135,12 @@ const icon = (name: string, svg: string) =>
 export const select = (options: SelectMockOptions): FormFieldControlMock => {
   const selected = options.options.find((option) => option.value === options.value);
 
-  const optionHtml = (state: FormFieldMockState) => (option: SelectMockOption, index: number) => {
-    const isSelected = option === selected;
-    const isActive = state.open && option.value === options.active;
-    const attributes = [
-      'role="option"',
-      `value="${option.value}"`,
-      'class="et-select-option"',
-      `id="et-select-option-${state.id}-${index}"`,
-      `aria-selected="${isSelected}"`,
-      isSelected && 'data-selected="true"',
-      isActive && 'data-active="true" data-active-source="keyboard"',
-    ].filter(Boolean);
-
-    return `<et-select-option ${attributes.join(' ')}><span class="et-select-option-label">${option.label}</span><span class="et-select-option-check">${icon('et-check', CHECK_ICON_SVG)}</span></et-select-option>`;
-  };
+  const optionHtml = (state: FormFieldMockState) => (option: SelectMockOption, index: number) =>
+    selectOption(option, {
+      id: `et-select-option-${state.id}-${index}`,
+      selected: option === selected,
+      active: state.open && option.value === options.active ? 'keyboard' : undefined,
+    });
 
   const optionsHtml = (state: FormFieldMockState) => options.options.map(optionHtml(state)).join('');
 
@@ -99,12 +178,18 @@ export const select = (options: SelectMockOptions): FormFieldControlMock => {
     suffix: (state) => {
       const clear =
         (options.clearable ?? true) && selected && state.focused && !state.disabled && !state.readonly
-          ? `<button aria-label="${options.clearLabel ?? 'Clear'}" class="et-input-clear" tabindex="-1" type="button">${icon('et-times', TIMES_ICON_SVG)}</button>`
+          ? `<button aria-label="${options.clearLabel ?? 'Clear'}" class="et-input-clear" tabindex="-1" type="button">${iconMarkup(TIMES_ICON)}</button>`
           : '';
 
-      return `${clear}<button aria-hidden="true" tabindex="-1" type="button" class="et-input-picker-trigger et-select-arrow"${state.disabled ? ' disabled' : ''}>${icon('et-chevron', CHEVRON_ICON_SVG)}</button>`;
+      return `${clear}<button aria-hidden="true" tabindex="-1" type="button" class="et-input-picker-trigger et-select-arrow"${state.disabled ? ' disabled' : ''}>${iconMarkup(CHEVRON_ICON)}</button>`;
     },
     panel: (state) =>
-      `<et-select-panel class="et-select-panel et-color--inherited${options.panelColor ? ` et-color--${options.panelColor}` : ''} et-surface--${options.panelSurface ?? 'inherited'}"><div class="et-select-panel-scroller et-scrollbar-host"><div class="et-select-panel-body"><div role="listbox" class="et-select-listbox" id="et-select-listbox-${state.id}"${state.labelId ? ` aria-labelledby="${state.labelId}"` : ''}>${optionsHtml(state)}</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>`,
+      selectPanel({
+        id: state.id,
+        labelId: state.labelId,
+        content: optionsHtml(state),
+        color: options.panelColor,
+        surface: options.panelSurface,
+      }),
   };
 };

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