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

package/design/sdk/components/card/card.ts

@@ -0,0 +1,61 @@
+import { button } from '@ethlete/components/design/button';
+import { card, cardContent, CardMockOptions, cardPlaceholderMedia, cardStyles } from '@ethlete/components/design/card';
+import { definePart, drawing } from '@design-system';
+import frame from './card.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  variant: NonNullable<CardMockOptions['variant']>;
+  form?: 'full' | 'media' | 'plain';
+  confirm?: Interaction;
+  cancel?: Interaction;
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const actions = ({ confirm, cancel }: Props) =>
+  `<div class="et-card-mock-actions">${[
+    button({ label: 'Cancel', variant: 'outline' }).replace(/^<button /, `<button ${mark('cancel', cancel)} `),
+    button({ label: 'Open', variant: 'filled' }).replace(/^<button /, `<button ${mark('confirm', confirm)} `),
+  ].join('')}</div>`;
+
+const content = (props: Props) => {
+  if (props.form === 'plain') return cardContent({ title: 'Revenue', text: '$12,400 this month' });
+
+  return (
+    cardContent({
+      media: props.form === 'media' ? cardPlaceholderMedia : undefined,
+      title: 'Spring league',
+      subtitle: 'Starts 12 April',
+      text: 'Eight teams play two rounds. Sign-ups close one week before kick-off.',
+    }) + actions(props)
+  );
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    outlined: { variant: 'outlined' },
+    elevated: { variant: 'elevated' },
+    filled: { variant: 'filled' },
+    media: { variant: 'outlined', form: 'media' },
+    plain: { variant: 'outlined', form: 'plain' },
+    'confirm-focus-visible': { variant: 'outlined', confirm: 'focus-visible' },
+    'cancel-focus-visible': { variant: 'outlined', cancel: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    cancel: { kind: 'button', input: ['pointer', 'keyboard'] },
+    confirm: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="card-frame">${card({ variant: props.variant, content: content(props) })}</div>`,
+      styles: [cardStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/carousel/carousel.css

@@ -0,0 +1,44 @@
+.carousel-frame {
+  padding: 2.4rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+
+  .carousel-slide {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 0.4rem;
+    box-sizing: border-box;
+    block-size: 100%;
+    min-block-size: 200px;
+    padding: 2.4rem;
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--et-surface-color-solid) 14%, transparent);
+    color: var(--et-surface-color-solid);
+  }
+
+  .carousel-slide p {
+    margin: 0;
+  }
+
+  .carousel-slide-title {
+    font-size: 2rem;
+    font-weight: 600;
+  }
+
+  .carousel-slide-meta {
+    font-size: 1.2rem;
+  }
+}
+
+@layer components {
+  .et-carousel .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-carousel .et-carousel-dot[data-active]::before,
+  .et-carousel .et-carousel-dot-progress-half::before {
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+}

package/design/sdk/components/carousel/carousel.ts

@@ -0,0 +1,74 @@
+import { carousel, carouselStyles, type CarouselMockOptions } from '@ethlete/components/design/carousel';
+import { definePart, drawing } from '@design-system';
+import frame from './carousel.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = Omit<CarouselMockOptions, 'slides'> & {
+  count?: number;
+  longCaption?: boolean;
+  previous?: Interaction;
+  next?: Interaction;
+  playToggle?: Interaction;
+  dot?: { index: number; interaction: Interaction };
+};
+
+const TITLES = ['Kick-off', 'First half', 'Half time', 'Second half', 'Full time'];
+const LONG_CAPTION =
+  'A long caption that wraps over several lines inside the slide, the way a match report teaser runs on past a single line of text.';
+
+const force = (interaction: Interaction | undefined) => (interaction ? `data-et-force="${interaction}"` : undefined);
+
+const slideContent = (index: number, count: number, longCaption: boolean) =>
+  `<div class="carousel-slide"><p class="carousel-slide-title">${index + 1}. ${TITLES[index % TITLES.length]}</p>` +
+  `<p>${longCaption && index === 0 ? LONG_CAPTION : 'A short line about the slide.'}</p>` +
+  `<p class="carousel-slide-meta">slide ${index + 1} of ${count}</p></div>`;
+
+const render = ({ count = 5, longCaption = false, previous, next, playToggle, dot, ...options }: Props) =>
+  carousel({
+    ...options,
+    slides: Array.from({ length: count }, (_, index) => ({ content: slideContent(index, count, longCaption) })),
+    previousAttributes: force(previous),
+    nextAttributes: force(next),
+    playToggleAttributes: force(playToggle),
+    dotAttributes: dot ? { [dot.index]: `data-et-force="${dot.interaction}"` } : undefined,
+    trackAttributes: 'data-et-skip="CLIPPED"',
+  }).replaceAll(
+    'class="et-carousel-dot-progress-half"',
+    'data-et-skip="CLIPPED" class="et-carousel-dot-progress-half"',
+  );
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    'first-slide': {},
+    'middle-slide': { active: 2 },
+    'last-slide': { active: 4 },
+    'no-loop-first': { loop: false },
+    'no-loop-last': { loop: false, active: 4 },
+    'next-hover': { active: 2, next: 'hover' },
+    'next-active': { active: 2, next: 'active' },
+    'next-focus-visible': { active: 2, next: 'focus-visible' },
+    'dot-hover': { active: 2, dot: { index: 3, interaction: 'hover' } },
+    'active-dot-hover': { active: 2, dot: { index: 2, interaction: 'hover' } },
+    'dot-focus-visible': { active: 2, dot: { index: 3, interaction: 'focus-visible' } },
+    'active-dot-focus-visible': { active: 2, dot: { index: 2, interaction: 'focus-visible' } },
+    'autoplay-playing': { active: 1, autoplay: true },
+    'autoplay-paused': { active: 1, autoplay: true, playing: false },
+    'play-toggle-hover': { active: 1, autoplay: true, playToggle: 'hover' },
+    'play-toggle-focus-visible': { active: 1, autoplay: true, playToggle: 'focus-visible' },
+    'multiple-items': { itemSize: 'half', slideGap: 16, active: 1 },
+    'item-size-third': { itemSize: 'third', slideGap: 16, active: 1 },
+    'center-aligned': { itemSize: 'half', slideGap: 16, slideAlign: 'center', active: 2 },
+    'no-controls': { active: 1, showControls: false },
+    'long-caption': { longCaption: true },
+    'single-slide': { count: 1 },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="carousel-frame">${render(props)}</div>`,
+      styles: [carouselStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/chart/chart.css

@@ -0,0 +1,56 @@
+.t-frame {
+  box-sizing: border-box;
+  padding: 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  .et-line-chart-series,
+  .et-line-chart-slice .et-line-chart-slice-point,
+  .et-chart-legend[data-mark='line'] .et-chart-legend-swatch,
+  .et-chart-tooltip .et-chart-tooltip-key,
+  .et-line-chart-tooltip .et-line-chart-tooltip-key {
+    --_et-chart-mark-accent: color-mix(
+      in oklab,
+      light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid)) var(--_et-chart-accent-mix, 100%),
+      var(--et-surface-background-solid, transparent)
+    );
+  }
+
+  .et-line-chart-series {
+    --_et-line-chart-color: var(--_et-chart-mark-accent);
+  }
+
+  .et-line-chart-slice .et-line-chart-slice-point {
+    fill: var(--_et-chart-mark-accent);
+  }
+
+  .et-chart-legend[data-mark='line'] .et-chart-legend-swatch,
+  .et-chart-tooltip .et-chart-tooltip-key,
+  .et-line-chart-tooltip .et-line-chart-tooltip-key {
+    background: var(--_et-chart-mark-accent);
+  }
+
+  .et-bar-chart-bar .et-bar-chart-bar-mark,
+  .et-pie-chart-slice .et-pie-chart-slice-mark {
+    stroke: var(--et-theme-color-ink-solid);
+    stroke-width: 1px;
+  }
+
+  .et-chart-legend:not([data-mark='line']) .et-chart-legend-swatch,
+  .et-pie-chart-legend .et-pie-chart-legend-swatch {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+
+  .et-bar-chart-bar:focus-visible .et-bar-chart-bar-target,
+  .et-line-chart-slice:focus-visible .et-line-chart-focus-ring {
+    stroke: var(--et-theme-color-ink-solid);
+  }
+
+  .et-pie-chart-slice:focus-visible .et-pie-chart-slice-mark {
+    stroke: var(--et-theme-color-ink-solid);
+    stroke-width: 2px;
+  }
+}

package/design/sdk/components/chart/chart.ts

@@ -0,0 +1,98 @@
+import { barChart, chartStyles, ChartMockMark, lineChart, pieChart } from '@ethlete/components/design/chart';
+import { definePart, drawing } from '@design-system';
+import frame from './chart.css?inline';
+
+type Kind = 'bar' | 'line' | 'pie';
+
+type Props = {
+  kind: Kind;
+  series?: boolean;
+  mark?: ChartMockMark;
+  empty?: boolean;
+  longLabel?: boolean;
+  points?: boolean;
+  donut?: boolean;
+};
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+const LONG_MONTHS = ['January', 'February', 'March', 'April', 'May', 'June'];
+const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+const BAR_2026 = { label: '2026', values: [32, 48, 41, 67, 54, 72] };
+const BAR_2025 = { label: '2025', values: [28, 35, 44, 51, 47, 58] };
+const VISITS = { label: 'Visits', values: [42, 55, 49, 63, 71, 38, 30] };
+const SIGNUPS = { label: 'Sign-ups', values: [18, 24, 21, 30, 34, 15, 12] };
+const SOURCES = [
+  { label: 'Direct', value: 420 },
+  { label: 'Search', value: 280 },
+  { label: 'Social', value: 180 },
+  { label: 'Referral', value: 120 },
+];
+const LONG_SOURCES = [
+  { label: 'Direct', value: 420 },
+  { label: 'Search engines and paid search campaigns', value: 280 },
+  { label: 'Social', value: 180 },
+  { label: 'Referral', value: 120 },
+];
+
+const PLOT_WIDTH = 410;
+
+const render = (props: Props) => {
+  if (props.kind === 'bar') {
+    return barChart({
+      plotWidth: PLOT_WIDTH,
+      categories: props.longLabel ? LONG_MONTHS.map((month) => `${month} 2026`) : MONTHS,
+      series: props.empty ? [{ label: '2026', values: [] }] : props.series ? [BAR_2025, BAR_2026] : [BAR_2026],
+      empty: 'No sales in this period',
+      mark: props.mark,
+    });
+  }
+
+  if (props.kind === 'line') {
+    return lineChart({
+      plotWidth: PLOT_WIDTH,
+      categories: DAYS,
+      series: props.series ? [VISITS, SIGNUPS] : [VISITS],
+      points: props.points,
+      mark: props.mark,
+    });
+  }
+
+  return pieChart({
+    data: props.empty ? SOURCES.map((source) => ({ ...source, value: 0 })) : props.longLabel ? LONG_SOURCES : SOURCES,
+    innerRadius: props.donut ? 0.6 : 0,
+    mark: props.mark,
+  });
+};
+
+export default definePart({
+  note: "The SDK charts (et-bar-chart, et-line-chart, et-pie-chart), first drawing, drawn by their mocks from @ethlete/components/design/chart with the real markup and CSS: bar, line and pie chart sheets plus the axis, grid, legend, chart tooltip and line chart tooltip sheets, and the et-tooltip pane for the open tooltip. Framed as a 480px page with 16px padding; bar and line plots 410px wide, 240px high (the default); pie 200px (the default), donut innerRadius 0.6 with its total. Single series draw in the accent; two or more in accent mix steps (100 / 40 %, pie 100 / 80 / 60 / 40 %). States: bar (Jan to Jun), bar-series (2025 and 2026, legend), bar-hover and bar-focus-visible (Apr), bar-tooltip (Mar 2025, hover with its tooltip), bar-empty (projected etBarChartEmpty text), bar-long-label (January 2026 ... June 2026: the auto label spacing thins to every second label); line, line-series (Visits and Sign-ups, legend), line-points, line-hover and line-focus-visible (Thu: crosshair, slice dots, focus box), line-tooltip (Wed, active slice with the multi-series tooltip); pie, donut, pie-hover and pie-focus-visible (Search), pie-tooltip (Direct), pie-empty (all zero: the empty ring), pie-long-label (a long legend label, ellipsed). Static snapshot: the bar grow, line reveal and slice fade are drawn at rest. The lib has no loading state. Numbers (light / dark), from shot pixels at scale 2, brand mint, a: mint marks (bars, line 1, dots, legend and tooltip keys) 1.33 / 13.50; 40 % series (bar 2026, line 2) 1.13 / 2.79; axis and legend text (muted) 7.81 / 6.94; crosshair (subtle) 4.95 / 4.99; hover and focus tint 1.07 / 1.08; focus rings: bar and line (2px, series colour / primary) 1.33 / 13.50, pie (2px, text colour) 17.93 / 17.18. Q98 numbers only: grid lines vs page 1.26 / 1.73 (as the table's edges). Decided rules that arise: Q88 (bar, line and pie focus rings), Q99a (on light the line strokes, slice dots, line legend swatches and tooltip keys take ink in their mix steps; bars, pie slices and the square legend swatches are mint fills and get a 1px ink edge). Series colours otherwise stay data colours: the mix steps are kept. Q101 does not arise: no filled button. An ink edge arises, so Q102 arises: under the brand theme the dark ink is the mint, so the edge is invisible on the full mint fill but shows as a bright outline around the 40 % series in dark (b), while c drops it there. The thinned first and last category labels sit inside the plot (lib fix 3c26c2204). Findings for later, not render refusals: the pie focus ring in b is the same ink as its new 1px edge, only 1px wider, so a focused slice reads close to rest (a used the text colour); d draws it as an outer ring instead. The pie tooltip opens over the legend. Later rounds, left out here: horizontal and stacked bars, negative values, area and stacked area, the time scale, sankey, per-series colour themes, the title and note slots, touch tap.",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    bar: { kind: 'bar' },
+    'bar-series': { kind: 'bar', series: true },
+    'bar-hover': { kind: 'bar', mark: { index: 3, force: 'hover' } },
+    'bar-focus-visible': { kind: 'bar', mark: { index: 3, force: 'focus-visible' } },
+    'bar-tooltip': { kind: 'bar', series: true, mark: { index: 4, force: 'hover', tooltip: true } },
+    'bar-empty': { kind: 'bar', empty: true },
+    'bar-long-label': { kind: 'bar', longLabel: true },
+    line: { kind: 'line' },
+    'line-series': { kind: 'line', series: true },
+    'line-points': { kind: 'line', points: true },
+    'line-hover': { kind: 'line', series: true, mark: { index: 3, force: 'hover' } },
+    'line-focus-visible': { kind: 'line', series: true, mark: { index: 3, force: 'focus-visible' } },
+    'line-tooltip': { kind: 'line', series: true, mark: { index: 2, force: 'hover', tooltip: true } },
+    pie: { kind: 'pie' },
+    donut: { kind: 'pie', donut: true },
+    'pie-hover': { kind: 'pie', mark: { index: 1, force: 'hover' } },
+    'pie-focus-visible': { kind: 'pie', mark: { index: 1, force: 'focus-visible' } },
+    'pie-tooltip': { kind: 'pie', mark: { index: 0, force: 'hover', tooltip: true } },
+    'pie-empty': { kind: 'pie', empty: true },
+    'pie-long-label': { kind: 'pie', longLabel: true },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${render(props)}</div>`,
+      styles: [chartStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/chip/chip.css

@@ -0,0 +1,18 @@
+.chip-frame {
+  display: flex;
+  align-items: center;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+@layer components {
+  .et-chip:where([role='checkbox'], [role='radio']):focus-visible,
+  .et-chip .et-chip-remove-button:focus-visible {
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-chip:where([aria-checked='true']) {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/chip/chip.ts

@@ -0,0 +1,76 @@
+import { chip, chipRow, chipStyles, ChipMockOptions } from '@ethlete/components/design/chip';
+import { definePart, drawing, interactionRows } from '@design-system';
+import frame from './chip.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = ChipMockOptions & { interaction?: Interaction; row?: true };
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const draw = ({ interaction, ...options }: Props) =>
+  chip({
+    ...options,
+    attributes: options.selection ? mark('chip', options.removable ? undefined : interaction) : undefined,
+    removeAttributes: options.removable ? mark('remove', interaction) : undefined,
+  });
+
+const ROW: ChipMockOptions[] = [
+  { label: 'Bundesliga' },
+  { label: 'U19', removable: true },
+  { label: 'Upcoming', selection: 'checkbox' },
+  { label: 'Live', selection: 'checkbox', selected: true },
+  { label: 'Finished', selection: 'checkbox', selected: true, readonly: true },
+  { label: 'Archived', selection: 'checkbox', disabled: true },
+];
+
+export const { states: rows, grid } = interactionRows<
+  Props,
+  'removable' | 'filter' | 'selected' | 'danger' | 'disabled' | 'disabled-selected' | 'disabled-removable',
+  Interaction
+>(
+  {
+    removable: { label: 'U19', removable: true },
+    filter: { label: 'Upcoming', selection: 'checkbox' },
+    selected: { label: 'Live', selection: 'checkbox', selected: true },
+    danger: { label: 'Overdue', selection: 'checkbox', selected: true, color: 'danger' },
+    disabled: { label: 'Archived', selection: 'checkbox', disabled: true },
+    'disabled-selected': { label: 'Archived', selection: 'checkbox', selected: true, disabled: true },
+    'disabled-removable': { label: 'U19', removable: true, disabled: true },
+  },
+  { interactions: ['hover', 'active', 'focus-visible'], force: (props, interaction) => ({ ...props, interaction }) },
+);
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...rows,
+    plain: { label: 'Bundesliga' },
+    readonly: { label: 'Finished', selection: 'checkbox', selected: true, readonly: true },
+    row: { label: '', row: true },
+  },
+  grid,
+  widths: [480],
+  contrast: {
+    exceptions: [
+      {
+        selector: '.et-chip.et-color--danger .et-chip-label',
+        reason:
+          "Hovered, the selected danger chip's 24% fill takes its ink label to 4.42:1 on light; the hover step is open in another round (Q101), not this round's question.",
+      },
+    ],
+  },
+  controls: {
+    chip: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+    remove: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="chip-frame">${props.row ? chipRow(ROW.map((each) => draw(each))) : draw(props)}</div>`,
+      styles: [chipStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/copy-button/copy-button.css

@@ -0,0 +1,14 @@
+.copy-button-frame {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+@layer components {
+  .copy-button-frame .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/copy-button/copy-button.ts

@@ -0,0 +1,59 @@
+import { copyButton, copyButtonStyles } from '@ethlete/components/design/copy-button';
+import { definePart, drawing } from '@design-system';
+import frame from './copy-button.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  outcome?: 'copied' | 'failed';
+  interaction?: Interaction;
+  disabled?: boolean;
+  size?: 'xs' | 'sm' | 'lg' | 'xl';
+};
+
+const mark = (control: 'icon' | 'text', interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const render = ({ outcome, interaction, disabled, size }: Props) =>
+  ['icon', 'text']
+    .map((kind) =>
+      copyButton({
+        kind: kind as 'icon' | 'text',
+        outcome,
+        disabled,
+        size,
+        attributes: mark(kind as 'icon' | 'text', interaction),
+      }),
+    )
+    .join('');
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    idle: {},
+    copied: { outcome: 'copied' },
+    failed: { outcome: 'failed' },
+    hover: { interaction: 'hover' },
+    active: { interaction: 'active' },
+    'focus-visible': { interaction: 'focus-visible' },
+    'copied-focus-visible': { outcome: 'copied', interaction: 'focus-visible' },
+    disabled: { disabled: true },
+    'size-xs': { size: 'xs' },
+    'size-sm': { size: 'sm' },
+    'size-lg': { size: 'lg' },
+    'size-xl': { size: 'xl' },
+  },
+  widths: [480],
+  controls: {
+    icon: { kind: 'button', input: ['pointer', 'keyboard'] },
+    text: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="copy-button-frame">${render(props)}</div>`,
+      styles: [copyButtonStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/description-list/description-list.css

@@ -0,0 +1,7 @@
+.description-list-frame {
+  max-inline-size: 42rem;
+  padding: 3.2rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-family: var(--et-font-sans, sans-serif);
+}

package/design/sdk/components/description-list/description-list.ts

@@ -0,0 +1,53 @@
+import {
+  descriptionList,
+  descriptionListStyles,
+  type DescriptionListMockItem,
+} from '@ethlete/components/design/description-list';
+import { definePart, drawing } from '@design-system';
+import frame from './description-list.css?inline';
+
+type Props = {
+  variant?: 'inline' | 'stacked';
+  items?: DescriptionListMockItem[];
+};
+
+const STORY: DescriptionListMockItem[] = [
+  { term: 'Name', detail: 'Jane Doe' },
+  { term: 'Email', detail: 'jane@example.com' },
+  { term: 'Role', detail: 'Administrator' },
+  { term: 'Notes', detail: 'Joined during the private beta and has opted into every early-access feature flag.' },
+];
+
+const LONG: DescriptionListMockItem[] = [
+  { term: 'Name', detail: 'Jane Doe' },
+  { term: 'Profile URL', detail: 'https://example.com/organisations/ethlete/members/jane-doe-administrator-0042' },
+  { term: 'Billing contact for invoices', detail: 'accounts-payable@example.com' },
+];
+
+const EMPTY: DescriptionListMockItem[] = [
+  { term: 'Name', detail: 'Jane Doe' },
+  { term: 'Phone', detail: '' },
+  { term: 'Role', detail: 'Administrator' },
+];
+
+const GROUPED: DescriptionListMockItem[] = STORY.map((item) => ({ ...item, grouped: true }));
+
+export default definePart({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    stacked: { variant: 'stacked' },
+    'long-value': { items: LONG },
+    'long-value-stacked': { items: LONG, variant: 'stacked' },
+    'empty-value': { items: EMPTY },
+    grouped: { items: GROUPED },
+    'grouped-stacked': { items: GROUPED, variant: 'stacked' },
+  },
+  widths: [480],
+  render: ({ variant, items = STORY }: Props) =>
+    drawing({
+      body: `<div class="description-list-frame">${descriptionList({ items, variant })}</div>`,
+      styles: [descriptionListStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/dialog/dialog.css

@@ -0,0 +1,29 @@
+.dialog-frame {
+  overflow: hidden;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.dialog-frame .et-overlay--dialog {
+  inline-size: 100%;
+  max-inline-size: 51.2rem;
+}
+
+.dialog-frame .et-overlay--dialog:has(.et-overlay-body--dynamic-dividers) {
+  max-block-size: 36rem;
+}
+
+.dialog-frame .et-overlay-body p {
+  margin: 0 0 1.2rem;
+}
+
+@layer components {
+  .et-overlay--dialog .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-overlay--dialog .et-button[data-variant='filled'] {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}