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

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

@@ -1,17 +1,38 @@
-import { button, buttonStyles, ButtonMockOptions } from '@ethlete/components/design/button';
+import {
+  button,
+  buttonStyles,
+  ButtonMockOptions,
+  iconButton,
+  IconButtonMockOptions,
+  iconButtonStyles,
+} from '@ethlete/components/design/button';
+import { iconMarkup } from '@ethlete/components/design/icon';
+import { loaderStyles } from '@ethlete/components/design/loader';
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
 import { definePart, drawing, forceInteraction, interactionRows } from '@design-system';
+import hover from './button.css?inline';
 
 type ButtonInteraction = 'hover' | 'active' | 'focus-visible';
 
-type Props = ButtonMockOptions & { interaction?: ButtonInteraction };
+type IconOnly = IconButtonMockOptions & { iconOnly: true };
+
+type Props = (ButtonMockOptions | IconOnly) & { interaction?: ButtonInteraction };
 
 const control = ({ interaction, ...options }: Props) => {
-  const markup = button(options).replace(/^<(button|a) /, '<$1 data-et-control="button" data-can-animate ');
+  const drawn = 'iconOnly' in options ? iconButton(options) : button(options);
+  const markup = drawn
+    .replace(/^<(button|a) /, '<$1 data-et-control="button" data-can-animate ')
+    .replace('<div class="et-button-loader"', '<div class="et-button-loader" data-et-skip="CLIPPED"');
 
   return interaction ? forceInteraction(markup, interaction) : markup;
 };
 
-export const { states, grid } = interactionRows<
+const plus = iconMarkup(SDK_ICONS.find((each) => each.name === 'et-plus')!);
+const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+const VARIANTS = ['filled', 'outline', 'tonal', 'transparent'] as const;
+type Size = (typeof SIZES)[number];
+
+const interactive = interactionRows<
   Props,
   'filled' | 'outline' | 'tonal' | 'transparent' | 'pressed' | 'danger' | 'small' | 'disabled',
   ButtonInteraction
@@ -29,11 +50,42 @@ export const { states, grid } = interactionRows<
   { interactions: ['hover', 'active', 'focus-visible'], force: (props, interaction) => ({ ...props, interaction }) },
 );
 
+const iconOnly = interactionRows<Props, `icon-${(typeof VARIANTS)[number]}`, ButtonInteraction>(
+  Object.fromEntries(
+    VARIANTS.map((variant) => [`icon-${variant}`, { iconOnly: true, icon: plus, ariaLabel: 'Add', variant }]),
+  ) as Record<`icon-${(typeof VARIANTS)[number]}`, Props>,
+  { interactions: ['hover', 'active', 'focus-visible'], force: (props, interaction) => ({ ...props, interaction }) },
+);
+
+const sizeStates = Object.fromEntries(
+  SIZES.map((size) => [`size-${size}`, { label: 'Add', icon: plus, variant: 'filled', size }]),
+) as Record<`size-${Size}`, Props>;
+
+export const states = { ...interactive.states, ...iconOnly.states, ...sizeStates };
+export const grid = {
+  columns: interactive.grid.columns,
+  rows: {
+    ...interactive.grid.rows,
+    ...Object.fromEntries(VARIANTS.map((variant) => [`icon ${variant}`, iconOnly.grid.rows[`icon-${variant}`]])),
+    ...Object.fromEntries(SIZES.map((size) => [`size ${size}`, { rest: `size-${size}` as const }])),
+  },
+};
+
 export default definePart({
-  note: 'The SDK button, drawn by its mock from @ethlete/components/design.',
-  madeBy: ['claude-opus-5-5'],
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
   states,
   grid,
   controls: { button: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true } },
-  render: (props: Props) => drawing({ body: control(props), styles: buttonStyles }),
+  render: (props: Props) =>
+    drawing({
+      body: control(props),
+      styles: [
+        'iconOnly' in props ? iconButtonStyles : buttonStyles,
+        hover,
+        !('iconOnly' in props) && props.loading && loaderStyles,
+      ]
+        .filter(Boolean)
+        .join('\n'),
+    }),
 });

package/design/sdk/components/calendar/calendar.css

@@ -0,0 +1,33 @@
+.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-calendar .et-calendar-nav-button {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-calendar .et-calendar-header-label:focus-visible,
+  .et-calendar .et-calendar-cell:focus-visible .et-calendar-cell-content {
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-calendar .et-calendar-cell::before {
+    background: light-dark(
+      color-mix(in srgb, var(--et-theme-color-primary-solid) 32%, transparent),
+      color-mix(in srgb, var(--et-theme-color-primary-solid) 12%, transparent)
+    );
+  }
+
+  .et-calendar
+    .et-calendar-cell:where([data-selected], [data-band='start'], [data-band='end']):where(
+      :not([data-disabled], [data-today])
+    )
+    .et-calendar-cell-content {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/calendar/calendar.ts

@@ -0,0 +1,97 @@
+import { calendar, calendarStyles, CalendarMockOptions } from '@ethlete/components/design/calendar';
+import { definePart, drawing } from '@design-system';
+import frame from './calendar.css?inline';
+
+type Interaction = 'hover' | 'focus-visible';
+
+type Props = {
+  view?: CalendarMockOptions['view'];
+  selected?: boolean;
+  range?: boolean;
+  day?: Interaction;
+  selectedDay?: Interaction;
+  rangeDay?: Interaction;
+  disabled?: boolean;
+  limits?: boolean;
+  weekNumbers?: boolean;
+  comparison?: boolean;
+  nav?: Interaction;
+  label?: Interaction;
+  compact?: boolean;
+};
+
+const TODAY = '2026-09-14';
+
+const force = (interaction: Interaction | undefined, key: string) =>
+  interaction ? { [key]: `data-et-force="${interaction}"` } : {};
+
+const render = (props: Props) => {
+  const view = props.view ?? 'month';
+  const coarseKey = view === 'year' ? '2026-03' : '2021';
+
+  return calendar({
+    view,
+    month: '2026-09',
+    today: TODAY,
+    value: props.selected
+      ? view === 'year'
+        ? '2026-05-20'
+        : view === 'multiYear'
+          ? '2024-05-20'
+          : '2026-09-17'
+      : undefined,
+    range: props.range
+      ? { start: '2026-09-09', end: '2026-09-16' }
+      : props.comparison
+        ? { start: '2026-09-15', end: '2026-09-18' }
+        : undefined,
+    comparison: props.comparison ? { start: '2026-09-07', end: '2026-09-11' } : undefined,
+    min: props.limits ? '2026-09-07' : undefined,
+    max: props.limits ? '2026-09-24' : undefined,
+    disabled: props.disabled ? ['2026-09-05', '2026-09-06', '2026-09-26', '2026-09-27'] : undefined,
+    weekNumbers: props.weekNumbers,
+    cellAttributes: {
+      ...force(props.day, view === 'month' ? '2026-09-22' : coarseKey),
+      ...force(props.selectedDay, '2026-09-17'),
+      ...force(props.rangeDay, '2026-09-09'),
+    },
+    nextAttributes: props.nav ? `data-et-force="${props.nav}"` : undefined,
+    labelAttributes: props.label ? `data-et-force="${props.label}"` : undefined,
+    attributes: props.compact ? 'style="--et-calendar-cell-size: 32px"' : undefined,
+  });
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    rest: {},
+    selected: { selected: true },
+    'selected-hover': { selected: true, selectedDay: 'hover' },
+    'selected-focus-visible': { selected: true, selectedDay: 'focus-visible' },
+    range: { range: true },
+    'range-focus-visible': { range: true, rangeDay: 'focus-visible' },
+    'day-hover': { day: 'hover' },
+    'day-focus-visible': { day: 'focus-visible' },
+    disabled: { disabled: true },
+    limits: { limits: true, selected: true },
+    'week-numbers': { weekNumbers: true, selected: true },
+    comparison: { comparison: true },
+    'year-view': { view: 'year', selected: true },
+    'year-view-hover': { view: 'year', selected: true, day: 'hover' },
+    'year-view-focus-visible': { view: 'year', selected: true, day: 'focus-visible' },
+    'multi-year-view': { view: 'multiYear', selected: true },
+    'nav-hover': { nav: 'hover' },
+    'nav-focus-visible': { nav: 'focus-visible' },
+    'label-hover': { label: 'hover' },
+    'label-focus-visible': { label: 'focus-visible' },
+    'long-label': { compact: true, selected: true },
+  },
+  widths: [480],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: render(props),
+      styles: [calendarStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/card/card.css

@@ -0,0 +1,19 @@
+.card-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+.card-frame .et-card {
+  max-inline-size: 32rem;
+}
+
+@layer components {
+  .et-card .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-card .et-button[data-variant='filled'] {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

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

@@ -0,0 +1,62 @@
+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'] },
+  },
+  frame: (body) => `<div class="card-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: card({ variant: props.variant, content: content(props) }),
+      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,75 @@
+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],
+  frame: (body) => `<div class="carousel-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: render(props),
+      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,99 @@
+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],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: render(props),
+      styles: [chartStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/checkbox/checkbox.css

@@ -0,0 +1,65 @@
+.t-frame {
+  box-sizing: border-box;
+  display: grid;
+  justify-items: start;
+  gap: 1.6rem;
+  padding: 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  et-checkbox.et-focus-ring,
+  et-choice-field[data-error]
+    et-checkbox.et-checkbox:focus-visible:not([aria-checked='true']):not([aria-checked='mixed']) {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  et-checkbox:is([aria-checked='true'], [aria-checked='mixed']) .et-checkbox-box {
+    outline: 1px solid light-dark(var(--et-theme-color-ink-solid), transparent);
+    outline-offset: -1px;
+  }
+
+  et-choice-field[data-variant='card']
+    et-checkbox:focus-visible:not([aria-checked='true']):not([aria-checked='mixed'])
+    .et-checkbox-box {
+    border-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  et-choice-field
+    .et-selection-card:where([aria-checked='true'], :has(:is([aria-checked='true'], [aria-checked='mixed']))) {
+    border-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  et-choice-field .et-selection-card:where(:focus-visible, :has(:focus-visible)) {
+    border-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  et-checkbox-option.et-checkbox-option:focus-visible .et-checkbox-option-box,
+  .et-checkbox-group-select-all.et-checkbox-group-select-all:focus-visible .et-checkbox-group-select-all-box {
+    border-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  et-checkbox-option[aria-checked='true']:not(:focus-visible) .et-checkbox-option-box,
+  .et-checkbox-group-select-all:is([aria-checked='true'], [aria-checked='mixed']):not(:focus-visible)
+    .et-checkbox-group-select-all-box {
+    outline: 1px solid light-dark(var(--et-theme-color-ink-solid), transparent);
+    outline-offset: -1px;
+  }
+
+  @media (hover: hover) {
+    et-checkbox:is([aria-checked='true'], [aria-checked='mixed']):hover,
+    .et-color-interactive-container:hover et-checkbox:is([aria-checked='true'], [aria-checked='mixed']),
+    et-checkbox-option[aria-checked='true']:hover,
+    .et-checkbox-group-select-all:is([aria-checked='true'], [aria-checked='mixed']):hover {
+      --et-theme-color-primary-rgb: var(--et-color-primary-active);
+    }
+  }
+
+  .et-label-required-marker {
+    color: var(--et-theme-color-ink-solid);
+  }
+}