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

package/design/sdk/foundations/colors/colors.ts

@@ -0,0 +1,188 @@
+import { definePart, html, tokenSheet, type Drawing } from '@design-system';
+import { contrastSheet, contrastStyles } from './shared/contrast';
+import css from './colors.css?inline';
+
+type Surface = 'light' | 'dark';
+
+type Theme = 'brand' | 'danger' | 'warning';
+
+type Props = { group: 'surface' | 'contrast' | Theme; surface: Surface };
+
+const STATE_ENDS = ['', '-hover', '-focus', '-active', '-disabled'];
+
+const labelOf = (end: string) => (end ? end.slice(1) : 'rest');
+
+const SURFACE_TOKEN =
+  /^et-(surface-(background|color(-muted|-subtle)?|border|interaction(-hover|-focus|-active|-disabled)?)|shadow-color-rgb)$/u;
+
+const COLOR_TOKEN = /^et-color-(on-)?primary(-ink)?(-hover|-focus|-active|-disabled)?$/u;
+
+const TEXT_TOKEN = /^et-surface-(background|color(-muted|-subtle)?)$/u;
+
+const themeClassOf = (theme: Theme, surface: Surface) => `et-color--${theme}${surface === 'light' ? '-on-light' : ''}`;
+
+const demoNote = (theme: Theme, surface: Surface) =>
+  `${theme} is a demo theme of the SDK Storybook (apps/storybook/src/themes.ts); the SDK ships no theme names, each app registers its own.${surface === 'light' ? ` On a light surface the sheet reads .${themeClassOf(theme, surface)}.` : ''}`;
+
+const swatch = (token: string) => html`<span class="sdk-swatch" style="background: rgb(var(--${token}))"></span>`;
+
+const disabledOf = (name: string) => (name.endsWith('-disabled') ? 'aria-disabled="true"' : '');
+
+const ink = (token: string, label = 'Aa') =>
+  html`<span class="sdk-ink" ${disabledOf(token)} style="color: rgb(var(--${token}))">${label}</span>`;
+
+const surfaceSample = (name: string) => {
+  if (name === 'et-shadow-color-rgb') return html`<span class="sdk-swatch sdk-shadow"></span>`;
+  if (/^et-surface-color/u.test(name)) return ink(name);
+
+  return swatch(name);
+};
+
+const colorSample = (name: string) => {
+  const onFill = /^et-color-on-primary(.*)$/u.exec(name);
+  if (onFill)
+    return html`<span
+      class="sdk-fill"
+      ${disabledOf(name)}
+      style="background: rgb(var(--et-color-primary${onFill[1]})); color: rgb(var(--${name}))"
+      >Aa</span
+    >`;
+  if (name.startsWith('et-color-primary-ink')) return ink(name, 'Ink');
+
+  return swatch(name);
+};
+
+const surfacePanel = html`<div class="sdk-card">
+    <span>Text</span>
+    <span class="sdk-muted">Muted text</span>
+    <span class="sdk-subtle">Subtle text</span>
+  </div>
+  <div class="sdk-states">
+    ${STATE_ENDS.map(
+      (end) =>
+        html`<span class="sdk-state"
+          ><span class="sdk-swatch" style="background: rgb(var(--et-surface-interaction${end}))"></span
+          >${labelOf(end)}</span
+        >`,
+    ).join('')}
+  </div>
+  <div class="sdk-elevations">
+    <span class="sdk-elevation sdk-shadow-resting">Resting</span>
+    <span class="sdk-elevation sdk-shadow-raised">Raised</span>
+  </div>`;
+
+const themePanel = html`<div class="sdk-states">
+    ${STATE_ENDS.map(
+      (end) =>
+        html`<span
+          class="sdk-fill sdk-fill--wide"
+          ${disabledOf(end)}
+          style="background: rgb(var(--et-color-primary${end})); color: rgb(var(--et-color-on-primary${end}))"
+          >${labelOf(end)}</span
+        >`,
+    ).join('')}
+  </div>
+  <div class="sdk-states">
+    ${STATE_ENDS.map(
+      (end) =>
+        html`<span class="sdk-link" ${disabledOf(end)} style="color: rgb(var(--et-color-primary-ink${end}))"
+          >Ink ${labelOf(end)}</span
+        >`,
+    ).join('')}
+  </div>`;
+
+const scopeOf = ({ group, surface }: Props) =>
+  group === 'surface' || group === 'contrast'
+    ? `sdk-colors et-surface--${surface}`
+    : `sdk-colors et-surface--${surface} ${themeClassOf(group, surface)}`;
+
+const titleOf = ({ group, surface }: Props) =>
+  group === 'surface'
+    ? `Surface, ${surface}`
+    : group === 'contrast'
+      ? `Contrast, ${surface}`
+      : `${group} (demo theme) on ${surface}`;
+
+const sheetOf = (props: Props) => {
+  const { group, surface } = props;
+
+  if (group === 'surface')
+    return tokenSheet({
+      title: titleOf(props),
+      scope: scopeOf(props),
+      css,
+      sample: surfacePanel,
+      sampleOf: surfaceSample,
+      only: (name) => SURFACE_TOKEN.test(name),
+    });
+  if (group === 'contrast')
+    return tokenSheet({
+      title: titleOf(props),
+      scope: scopeOf(props),
+      css,
+      sample: contrastSheet(css, surface),
+      sampleClass: 'sdk-contrast',
+      sampleOf: surfaceSample,
+      only: (name) => TEXT_TOKEN.test(name),
+    });
+
+  return tokenSheet({
+    title: titleOf(props),
+    scope: scopeOf(props),
+    note: demoNote(group, surface),
+    css,
+    sample: themePanel,
+    sampleOf: colorSample,
+    only: (name) => COLOR_TOKEN.test(name),
+  });
+};
+
+const STYLES = `
+  ${contrastStyles}
+  .sdk-colors { --surface: var(--et-surface-background-solid); --text: var(--et-surface-color-solid); --text-muted: var(--et-surface-color-muted-solid); --surface-border: var(--et-surface-border-solid); --font-ui: var(--et-font-family); --font-code: var(--et-font-family-mono); width: max-content; }
+  .sdk-colors .ts-row { grid-template-columns: 300px 160px 1fr; }
+  section.ts-panel { display: flex; flex-direction: column; gap: 1.2rem; }
+  section.ts-panel.sdk-contrast { flex-direction: row; flex-wrap: wrap; gap: 2.4rem; }
+  .sdk-table { display: flex; flex-direction: column; gap: 0.8rem; }
+  .sdk-title { margin: 0; font-size: 1.4rem; font-weight: 600; }
+  .sdk-value { font-family: var(--et-font-family-mono); font-size: 1.2rem; color: var(--et-surface-color-muted-solid); white-space: nowrap; }
+  .sdk-card { display: flex; gap: 2.4rem; padding: 1.2rem 1.6rem; border: 0.1rem solid var(--et-surface-border-solid); border-radius: 0.6rem; }
+  .sdk-muted { color: var(--et-surface-color-muted-solid); }
+  .sdk-subtle { color: var(--et-surface-color-subtle-solid); }
+  .sdk-states { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
+  .sdk-state { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; }
+  .sdk-swatch { display: block; width: 4rem; height: 2.4rem; border-radius: 0.4rem; border: 0.1rem solid var(--et-surface-border-solid); }
+  .sdk-shadow { background: var(--et-surface-background-solid); box-shadow: 0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb) / 0.22), 0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb) / 0.14); }
+  .sdk-ink { font-size: 1.6rem; font-weight: 600; }
+  .sdk-fill { display: inline-grid; place-items: center; min-width: 4rem; height: 2.4rem; padding: 0 0.8rem; box-sizing: border-box; border-radius: 0.4rem; font-size: 1.2rem; font-weight: 600; }
+  .sdk-fill--wide { min-width: 8rem; height: 3.2rem; }
+  .sdk-link { min-width: 8rem; font-size: 1.3rem; font-weight: 600; text-decoration: underline; }
+  .sdk-elevations { display: flex; gap: 2.4rem; padding: 0.8rem 0; }
+  .sdk-elevation { display: grid; place-items: center; width: 12rem; height: 4.8rem; border-radius: 0.6rem; background: var(--et-surface-background-solid); font-size: 1.2rem; }
+  .sdk-shadow-resting { box-shadow: 0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb) / 0.2), 0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb) / 0.12); }
+  .sdk-shadow-raised { box-shadow: 0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb) / 0.22), 0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb) / 0.14); }
+`;
+
+const render = (props: Props): Drawing => {
+  const sheet = sheetOf(props);
+
+  return { ...sheet, styles: `${sheet.styles ?? ''}${STYLES}` };
+};
+
+export default definePart<Props>({
+  note: 'The SDK colour tokens: a light and a dark surface, the demo colour themes brand, danger and warning with their on-light variants, and the AA contrast of text and fills. Every frame loads it before the part styles. Generated by tools/scripts/generate-sdk-tokens.mjs from the Storybook themes; never edit the CSS by hand.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    'surface-light': { group: 'surface', surface: 'light' },
+    'surface-dark': { group: 'surface', surface: 'dark' },
+    'brand-light': { group: 'brand', surface: 'light' },
+    'brand-dark': { group: 'brand', surface: 'dark' },
+    'danger-light': { group: 'danger', surface: 'light' },
+    'danger-dark': { group: 'danger', surface: 'dark' },
+    'warning-light': { group: 'warning', surface: 'light' },
+    'warning-dark': { group: 'warning', surface: 'dark' },
+    'contrast-light': { group: 'contrast', surface: 'light' },
+    'contrast-dark': { group: 'contrast', surface: 'dark' },
+  },
+  render,
+});

package/design/sdk/foundations/colors/overrides.json

@@ -0,0 +1,19 @@
+{
+  "extraColorThemes": ["brand-on-light", "danger-on-light", "warning-on-light"],
+  "values": {
+    "danger": {
+      "primary.color.hover": "185 28 28",
+      "primary.color.focus": "185 28 28",
+      "primary.color.active": "153 27 27"
+    },
+    "danger-on-light": {
+      "primary.color.hover": "185 28 28",
+      "primary.color.focus": "185 28 28",
+      "primary.color.active": "153 27 27"
+    },
+    "warning": { "primary.color.active": "251 191 36" },
+    "warning-on-light": { "primary.color.active": "251 191 36" },
+    "light": { "colorSubtle": "112 112 112" },
+    "dark": { "colorSubtle": "135 135 135" }
+  }
+}

package/design/sdk/foundations/colors/shared/contrast.ts

@@ -0,0 +1,120 @@
+import { html } from '@design-system';
+
+type Surface = 'light' | 'dark';
+
+const tokenValues = (css: string, selector: string) => {
+  const start = css.indexOf(`${selector} {`);
+
+  if (start === -1) throw new Error(`colors.css has no ${selector} block`);
+
+  const block = css.slice(start, css.indexOf('}', start));
+
+  return Object.fromEntries(
+    [...block.matchAll(/(--[\w-]+): (\d+ \d+ \d+);/g)].map(([, name, value]) => [name, value as string]),
+  ) as Record<string, string>;
+};
+
+const channel = (value: number) => {
+  const c = value / 255;
+
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+
+const luminance = (rgb: string) => {
+  const [r = 0, g = 0, b = 0] = rgb.split(' ').map(Number);
+
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+};
+
+const contrastRatio = (a: string, b: string) => {
+  const [high, low] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];
+
+  return (high + 0.05) / (low + 0.05);
+};
+
+const AA = 4.5;
+
+const pair = (label: string, fill: string, ink: string, fixed: boolean) => {
+  const ratio = contrastRatio(fill, ink);
+
+  return html`<span class="sdk-pair" style="background: rgb(${fill}); color: rgb(${ink})">Aa</span>
+    <span class="sdk-pair-label${fixed ? ' sdk-fixed' : ''}">${label}</span>
+    <code class="sdk-value">${fill} / ${ink}</code>
+    <strong class="sdk-ratio" data-pass="${ratio >= AA}"
+      >${ratio.toFixed(2)}:1 ${ratio >= AA ? 'AA' : 'below AA'}</strong
+    >`;
+};
+
+const STATE_SUFFIX = { rest: '', hover: '-hover', focus: '-focus', active: '-active' } as const;
+
+const FIXED: Record<string, (keyof typeof STATE_SUFFIX)[]> = { danger: ['hover', 'focus'], warning: ['active'] };
+
+const pairTable = (title: string, rows: string) =>
+  html`<section class="sdk-table">
+    <h2 class="sdk-title">${title}</h2>
+    <div class="sdk-pairs">${rows}</div>
+  </section>`;
+
+export const contrastSheet = (css: string, surface: Surface) => {
+  const level = tokenValues(css, `.et-surface--${surface}`);
+  const background = level['--et-surface-background'] ?? '';
+  const suffix = surface === 'light' ? '-on-light' : '';
+
+  const text = pairTable(
+    `Text on the ${surface} background`,
+    (
+      [
+        ['text', '--et-surface-color'],
+        ['muted', '--et-surface-color-muted'],
+        ['subtle', '--et-surface-color-subtle'],
+      ] as const
+    )
+      .map(([role, token]) => pair(role, background, level[token] ?? '', role === 'subtle'))
+      .join(''),
+  );
+
+  const fills = (['danger', 'warning'] as const)
+    .map((theme) => {
+      const values = tokenValues(css, `.et-color--${theme}${suffix}`);
+
+      return pairTable(
+        `.et-color--${theme}${suffix} (demo theme): on-primary on the fill`,
+        Object.entries(STATE_SUFFIX)
+          .map(([state, end]) =>
+            pair(
+              state,
+              values[`--et-color-primary${end}`] ?? '',
+              values[`--et-color-on-primary${end}`] ?? '',
+              FIXED[theme]?.includes(state as keyof typeof STATE_SUFFIX) ?? false,
+            ),
+          )
+          .join(''),
+      );
+    })
+    .join('');
+
+  const ink = pairTable(
+    `Ink on the ${surface} background`,
+    (['brand', 'danger', 'warning'] as const)
+      .map((theme) =>
+        pair(
+          `${theme}${suffix}`,
+          background,
+          tokenValues(css, `.et-color--${theme}${suffix}`)['--et-color-primary-ink'] ?? '',
+          false,
+        ),
+      )
+      .join(''),
+  );
+
+  return text + fills + ink;
+};
+
+export const contrastStyles = `
+  .sdk-pairs { display: grid; grid-template-columns: 4rem auto auto auto; gap: 0.6rem 1.2rem; align-items: center; margin-top: 0.4rem; }
+  .sdk-pair { display: grid; place-items: center; width: 4rem; height: 2.8rem; border-radius: 0.4rem; border: 0.1rem solid var(--et-surface-border-solid); font-size: 1.4rem; font-weight: 600; }
+  .sdk-pair-label { font-size: 1.2rem; white-space: nowrap; }
+  .sdk-fixed { font-weight: 600; }
+  .sdk-ratio { font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .sdk-ratio[data-pass='false'] { color: var(--et-surface-color-muted-solid); text-decoration: line-through; }
+`;

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/tree.ts

@@ -0,0 +1,106 @@
+import iconStyles from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import treeBase from '../src/lib/tree/tree.component.css?inline';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import { iconMarkup } from './icon';
+
+export type TreeMockItem = {
+  label: string;
+  /** Defaults to the slash-joined labels of the item and its parents. */
+  value?: string;
+  /** Left out, the item is a leaf. */
+  children?: TreeMockItem[];
+  disabled?: boolean;
+};
+
+export type TreeMockOptions = {
+  items: TreeMockItem[];
+  /** The tree's `aria-label`. */
+  label?: string;
+  /** The values of the expanded branches. */
+  expanded?: string[];
+  /** The selected value, or values in `multiple` mode. */
+  value?: string | string[];
+  /** Defaults to `single`. */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /** The value of the row that holds the tab stop. Defaults to the first row. */
+  active?: string;
+  disabled?: boolean;
+  /** Extra attributes on a row's element, by row value, e.g. design markers. */
+  rowAttributes?: Record<string, string>;
+};
+
+type MockRow = { item: TreeMockItem; value: string; level: number; posInSet: number; setSize: number };
+
+/** The stylesheets `tree()` draws with: the real `et-tree` CSS. */
+export const treeStyles = /* @__PURE__ */ [iconStyles, treeBase].join('\n');
+
+const valueOf = (item: TreeMockItem, parent: string | null) =>
+  item.value ?? (parent ? `${parent}/${item.label}` : item.label);
+
+const visibleRows = (
+  items: TreeMockItem[],
+  { expanded, parent, level }: { expanded: Set<string>; parent: string | null; level: number },
+): MockRow[] =>
+  items.flatMap((item, index) => {
+    const value = valueOf(item, parent);
+    const row = { item, value, level, posInSet: index + 1, setSize: items.length };
+    const children =
+      item.children && expanded.has(value)
+        ? visibleRows(item.children, { expanded, parent: value, level: level + 1 })
+        : [];
+
+    return [row, ...children];
+  });
+
+const marker = (isBranch: boolean) =>
+  `<et-tree-marker aria-hidden="true" class="et-tree-node-marker">${
+    isBranch ? iconMarkup(CHEVRON_ICON, 'et-tree-node-chevron') : ''
+  }</et-tree-marker>`;
+
+/** Draws `<et-tree>` with the rows its `visibleRows()` would render for `items`. */
+export const tree = (options: TreeMockOptions) => {
+  const mode = options.selectionMode ?? 'single';
+  const expanded = new Set(options.expanded ?? []);
+  const selected = new Set(
+    options.value === undefined ? [] : Array.isArray(options.value) ? options.value : [options.value],
+  );
+  const rows = visibleRows(options.items, { expanded, parent: null, level: 1 });
+  const active = rows.some((row) => row.value === options.active) ? options.active : rows[0]?.value;
+
+  const rowHtml = (row: MockRow) => {
+    const isBranch = row.item.children !== undefined;
+    const isExpanded = isBranch && expanded.has(row.value);
+    const isSelected = mode !== 'none' && selected.has(row.value);
+    const isDisabled = !!row.item.disabled || !!options.disabled;
+    const attributes = [
+      options.rowAttributes?.[row.value],
+      `style="--_et-tree-node-depth: ${row.level - 1};"`,
+      'class="et-tree-node"',
+      'role="treeitem"',
+      `aria-level="${row.level}"`,
+      `aria-posinset="${row.posInSet}"`,
+      `aria-setsize="${row.setSize}"`,
+      isBranch && `aria-expanded="${isExpanded}"`,
+      mode !== 'none' && `aria-selected="${isSelected}"`,
+      isDisabled && 'aria-disabled="true"',
+      `tabindex="${row.value === active ? 0 : -1}"`,
+      isSelected && 'data-selected="true"',
+      isExpanded && 'data-expanded="true"',
+      isBranch && 'data-branch="true"',
+      isDisabled && 'data-disabled="true"',
+    ].filter(Boolean);
+    const check = mode === 'multiple' ? '<span aria-hidden="true" class="et-tree-node-check"></span>' : '';
+
+    return `<div ${attributes.join(' ')}>${marker(isBranch)}${check}<span class="et-tree-node-label">${row.item.label}</span></div>`;
+  };
+
+  const hostAttributes = [
+    'class="et-tree"',
+    'role="tree"',
+    options.label && `aria-label="${options.label}"`,
+    mode === 'multiple' && 'aria-multiselectable="true"',
+    options.disabled && 'data-disabled="true"',
+  ].filter(Boolean);
+
+  return `<et-tree ${hostAttributes.join(' ')}>${rows.map(rowHtml).join('')}</et-tree>`;
+};