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

package/design/sdk/components/banner/banner.ts

@@ -0,0 +1,87 @@
+import { banner, BannerMockType, bannerStyles } from '@ethlete/components/design/banner';
+import { definePart, drawing } from '@design-system';
+import frame from './banner.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  type: BannerMockType | 'all';
+  dismissible?: boolean;
+  close?: Interaction;
+  action?: Interaction;
+};
+
+const COLORS: Record<BannerMockType, string | undefined> = {
+  info: undefined,
+  success: undefined,
+  warning: 'warning',
+  error: 'danger',
+};
+
+const COPY: Record<BannerMockType, { heading: string; description: string; action?: string }> = {
+  info: {
+    heading: 'Round 4 is open',
+    description: 'Predictions close at kick-off of the first match.',
+    action: 'View fixtures',
+  },
+  success: { heading: 'Changes saved', description: 'Both teams and the referee get an email with the new time.' },
+  warning: {
+    heading: 'Storage almost full',
+    description: 'You are running low on storage space - consider upgrading your plan.',
+    action: 'Upgrade',
+  },
+  error: {
+    heading: 'Result not saved',
+    description: 'The connection dropped before the server answered.',
+    action: 'Retry',
+  },
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const draw = (type: BannerMockType, { dismissible = true, close, action }: Omit<Props, 'type'> = {}) =>
+  banner({
+    type,
+    color: COLORS[type],
+    ...COPY[type],
+    actionAttributes: mark('action', action),
+    dismissible,
+    dismissAttributes: mark('close', close),
+  });
+
+const render = ({ type, ...rest }: Props) =>
+  type === 'all'
+    ? (['info', 'success', 'warning', 'error'] as const).map((each) => draw(each)).join('')
+    : draw(type, rest);
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    info: { type: 'info' },
+    success: { type: 'success' },
+    warning: { type: 'warning' },
+    error: { type: 'error' },
+    'without-dismiss': { type: 'info', dismissible: false },
+    'close-hover': { type: 'info', close: 'hover' },
+    'close-focus-visible': { type: 'info', close: 'focus-visible' },
+    'action-hover': { type: 'info', action: 'hover' },
+    'action-focus-visible': { type: 'info', action: 'focus-visible' },
+    'error-close-focus-visible': { type: 'error', close: 'focus-visible' },
+    'error-action-focus-visible': { type: 'error', action: 'focus-visible' },
+    all: { type: 'all' },
+  },
+  widths: [480],
+  controls: {
+    close: { kind: 'button', input: ['pointer', 'keyboard'] },
+    action: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="banner-frame">${render(props)}</div>`,
+      styles: [bannerStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/bracket/bracket.css

@@ -0,0 +1,59 @@
+.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-bracket-participants-toggle {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-bracket-participants-toggle[data-pressed='true']:where([data-pressed-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+
+  .et-match-card:where([data-winner='home']) .et-match-card-side:where([data-side='home']),
+  .et-match-card:where([data-winner='away']) .et-match-card-side:where([data-side='away']) {
+    --_et-match-card-side-marker-color: light-dark(
+      var(--et-theme-color-ink-solid),
+      var(--et-theme-color-primary-solid)
+    );
+  }
+
+  .et-match-card-live-dot {
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  .et-bracket-final-host {
+    border-color: light-dark(
+      var(--et-theme-color-ink-solid),
+      color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 45%, transparent)
+    );
+  }
+
+  .et-bracket-default-match-card .et-match-card-meta,
+  .et-bracket-default-match-card .et-match-card-sides {
+    grid-area: 1 / 1;
+  }
+
+  .et-bracket-default-match-card .et-match-card-meta {
+    justify-self: end;
+  }
+
+  .et-bracket-default-match-card .et-match-card-live {
+    gap: 0;
+    padding: 0;
+    font-size: 0;
+    background: none;
+  }
+
+  .et-bracket-default-match-card:where([data-status='live']) .et-match-card-sides {
+    padding-inline-end: 12px;
+  }
+}

package/design/sdk/components/bracket/bracket.ts

@@ -0,0 +1,143 @@
+import {
+  bracket,
+  BracketMockMatch,
+  BracketMockOptions,
+  BracketMockParticipant,
+  BracketMockRound,
+  bracketParticipants,
+  bracketStyles,
+} from '@ethlete/components/design/bracket';
+import { definePart, drawing } from '@design-system';
+import frame from './bracket.css?inline';
+
+type Props = {
+  stage: 'in-progress' | 'decided' | 'groups-done';
+  density?: 'compact';
+  mirrored?: boolean;
+  journey?: { participantId: string; pinned?: boolean };
+  legend?: { focused?: string; focusVisible?: string };
+};
+
+const NBR: BracketMockParticipant = { id: 'nbr', name: 'Northbridge Rovers', code: 'NBR', seed: 1 };
+const HBC: BracketMockParticipant = { id: 'hbc', name: 'Harbor City', code: 'HBC', seed: 2 };
+const EVU: BracketMockParticipant = { id: 'evu', name: 'Eastvale United', code: 'EVU', seed: 3 };
+const MBA: BracketMockParticipant = { id: 'mba', name: 'Millbrook Athletic', code: 'MBA', seed: 4 };
+const RSW: BracketMockParticipant = { id: 'rsw', name: 'Riverside Wanderers', code: 'RSW', seed: 5 };
+const SGF: BracketMockParticipant = { id: 'sgf', name: 'Stonegate FC', code: 'SGF', seed: 6 };
+const WPA: BracketMockParticipant = { id: 'wpa', name: 'Westport Albion', code: 'WPA', seed: 7 };
+const LST: BracketMockParticipant = { id: 'lst', name: 'Lakeside Town', code: 'LST', seed: 8 };
+
+const PARTICIPANTS = [NBR, HBC, EVU, MBA, RSW, SGF, WPA, LST];
+
+const won = (
+  home: BracketMockParticipant,
+  away: BracketMockParticipant,
+  homeScore: number,
+  awayScore: number,
+): BracketMockMatch => ({
+  home,
+  away,
+  homeScore,
+  awayScore,
+  winnerSide: homeScore > awayScore ? 'home' : 'away',
+});
+
+const QUARTER_FINALS: BracketMockRound = {
+  name: 'Quarter-finals',
+  matches: [won(NBR, LST, 3, 0), won(MBA, RSW, 1, 2), won(EVU, SGF, 2, 1), won(HBC, WPA, 0, 1)],
+};
+
+const roundsOf = (stage: Props['stage']): BracketMockRound[] => {
+  if (stage === 'groups-done') {
+    return [
+      { ...QUARTER_FINALS, type: 'single-elimination-bracket' },
+      {
+        name: 'Semi-finals',
+        type: 'single-elimination-bracket',
+        matches: [won(NBR, RSW, 2, 1), won(EVU, WPA, 1, 3)],
+      },
+    ];
+  }
+
+  const decided = stage === 'decided';
+
+  return [
+    QUARTER_FINALS,
+    {
+      name: 'Semi-finals',
+      matches: [
+        won(NBR, RSW, 2, 1),
+        decided ? won(EVU, WPA, 1, 3) : { home: EVU, away: WPA, status: 'live', homeScore: 1, awayScore: 1 },
+      ],
+    },
+    {
+      name: 'Final',
+      matches: [decided ? won(NBR, WPA, 1, 2) : { home: NBR, status: 'scheduled', startTime: '11/21/2026 7:00 PM' }],
+    },
+  ];
+};
+
+const legendOf = (legend: NonNullable<Props['legend']>) => {
+  const markup = bracketParticipants({ participants: PARTICIPANTS, focusedParticipantId: legend.focused });
+  const name = PARTICIPANTS.find((participant) => participant.id === legend.focusVisible)?.name;
+
+  return name
+    ? markup.replace(
+        new RegExp(`<button ([^>]*)><div class="et-button-icon"></div><div class="et-button-contents">${name}<`),
+        `<button data-et-force="focus-visible" $1><div class="et-button-icon"></div><div class="et-button-contents">${name}<`,
+      )
+    : markup;
+};
+
+const render = (props: Props) => {
+  const options: BracketMockOptions = {
+    rounds: roundsOf(props.stage),
+    mirrored: props.mirrored,
+    journey: props.journey,
+    settings: {
+      density: props.density,
+      showContinueElement: props.stage === 'groups-done',
+    },
+  };
+
+  return `${props.legend ? legendOf(props.legend) : ''}${bracket(options)}`;
+};
+
+export default definePart({
+  note: "The SDK bracket (et-bracket) in flow, first drawing, drawn by the mock from @ethlete/components/design/bracket with the real markup and CSS: the bracket, its default round header, default match cell (et-match-card at compact), default final card (trophy, round name, champion line), continue cell and participants legend sheets, plus the match card, icon and button sheets; cell positions and connector paths come from @ethlete/bracket (createBracket, the single elimination grid, drawMan) as in the lib; default settings and labels, en-US kick-off. Emblems are the participant's letter fallback; the move transitions at rest. Fixtures are fictional: an eight-club single elimination knockout (Northbridge Rovers NBR 1, Harbor City HBC 2, Eastvale United EVU 3, Millbrook Athletic MBA 4, Riverside Wanderers RSW 5, Stonegate FC SGF 6, Westport Albion WPA 7, Lakeside Town LST 8) over Quarter-finals, Semi-finals and Final; the brand theme only. Framed as a page with 16px padding at 1040 and 1680 (the default bracket is 980px wide, the grid does not follow the frame width). States: in-progress (quarter-finals and one semi-final finished, the other semi-final live 1 : 1 with the LIVE badge, the final with Northbridge Rovers against TBD and the kick-off, champion not decided), decided (Westport Albion beat Northbridge Rovers 2 : 1, the champion line), journey-hover (the hover journey of Riverside Wanderers: the rest at half opacity, the semi-final where they went out dashed and their row struck through), journey-pinned (the pinned journey of the champion with the participants legend, its toggle pressed; the rest at a quarter opacity), legend-focus-visible (the Eastvale United toggle forced), compact (density compact, in-progress), continue (quarter-finals and semi-finals with the continue cell, 2 winners advance, dashed connectors) and mirrored (decided, folded in half, compact, so it fits 1040). Numbers (light / dark), from shot pixels at scale 2 at 1040, brand mint, a: winner bar (primary) vs card 1.33 / 13.50; live dot (primary) vs its badge tint 1.24 / 9.67, vs card 1.33 / 13.28; badge tint vs card 1.07 / 1.37; final frame edge (45 % mint) vs page 1.22 / 3.90, vs the glow beside it 1.15 / 2.98, vs its own tint 1.18 / 3.50; the final tint (6 %) vs page 1.03 / 1.11; pressed legend toggle (mint fill) vs page 1.33 / 13.50, its label 15.82 / 15.82; legend toggle focus ring (primary) vs page 1.37 / 13.06; outline toggle edge and label (ink) 7.68 light. Q98 numbers only: connectors, card edges, the continue cell's dashed edge and the journey endpoint's dashed outline vs page 1.26 / 1.73. The journey dimming lowers text under 4.5:1 by design: at half opacity the check reports a dimmed winner code at 3.41 / 2.68 and the dimmed Final label at 2.14 / 3.93, at a quarter opacity 1.73 / 2.21, the struck-through row that went out (0.55 opacity) 2.62 / 2.98; exempted with contrast exceptions, an open point, no decided rule. Decided rules that arise: Q88 (the legend toggle focus ring; the default cells are not links, so no card ring) and Q99a (the winner bar, the live dot and the final frame edge take ink in light; the pressed legend toggle is a mint fill, so it takes a 1px inset ink edge). The ink edge on a mint fill arises, so Q102 arises: b draws the edge in both schemes, c keeps dark as today (light-dark(ink, transparent)). The badge tint and the final tint are band tints, not fills, so they are kept, and the final glow is kept. Q101 does not arise: the only filled button is a pressed toggle, whose hover keeps the fill in the lib. Findings for later: (1) lib bug: the live meta row grows the bracket's compact card past matchHeight: the live semi-final is 87px tall in its 75px cell (65 in 52 at compact), so it hangs 12px (13px) below its cell, the incoming connector meets it 6px above its centre and the gap to the card below shrinks. Drawn as is in every variant. (2) In the mirrored compact layout the final card in its 200px column shows full names and cuts the loser ('Northbridge Rove…') next to the score, where every other compact cell shows codes. (3) The eliminated row's line-through also strikes the emblem letter and the score. (4) The lit journey path keeps the grey connector colour (1.26 / 1.73), so it reads only by the rest fading; the dimmed text is under 4.5:1 (numbers above). (5) In dark the final glow lightens the page beside the frame edge, so the edge drops from 3.90 against the bare page to 2.98 against the glow. Later rounds, left out here: double elimination, swiss and round robin layouts, the third-place match, the mirrored layout at default density, the rounds list and adaptive layout, the skeleton, the prediction pick card, a custom match component on a link (card hover and focus ring), emblems as images, scheduled cells with kick-off times, long names, RTL and the move transitions. Omitted option value (Q182): alignRoundHeaders center draws the same pixels as start, because the default round header fills its column and is already centred.",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    'in-progress': { stage: 'in-progress' },
+    decided: { stage: 'decided' },
+    'journey-hover': { stage: 'decided', journey: { participantId: 'rsw' } },
+    'journey-pinned': {
+      stage: 'decided',
+      journey: { participantId: 'wpa', pinned: true },
+      legend: { focused: 'wpa' },
+    },
+    'legend-focus-visible': { stage: 'decided', legend: { focusVisible: 'evu' } },
+    compact: { stage: 'in-progress', density: 'compact' },
+    continue: { stage: 'groups-done' },
+    mirrored: { stage: 'decided', density: 'compact', mirrored: true },
+  },
+  contrast: {
+    exceptions: [
+      {
+        selector: '.et-bracket-host--journey-hover .et-bracket-element--match:not(.et-bracket-journey-active)',
+        reason:
+          "The journey highlight fades every cell off the path to half opacity (a quarter when pinned) on purpose; its contrast is an open point, not this round's question.",
+      },
+      {
+        selector: '.et-bracket-journey-eliminated',
+        reason:
+          "The row that went out is struck through and faded to 0.55 on purpose; its contrast is an open point, not this round's question.",
+      },
+    ],
+  },
+  widths: [1040, 1680],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${render(props)}</div>`,
+      styles: [bracketStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,25 @@
+.breadcrumb-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.breadcrumb-overflow-stage {
+  display: grid;
+  gap: 1rem;
+}
+
+.breadcrumb-overflow-stage > .et-breadcrumb-mock-pane {
+  margin-inline-start: 4.2rem;
+}
+
+@layer components {
+  .et-breadcrumb-item:where(a, button):focus-visible {
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-breadcrumb-overflow-trigger {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/breadcrumb/breadcrumb.ts

@@ -0,0 +1,81 @@
+import {
+  breadcrumb,
+  BreadcrumbMockCrumb,
+  breadcrumbOverflowPanel,
+  breadcrumbStyles,
+} from '@ethlete/components/design/breadcrumb';
+import { definePart, drawing } from '@design-system';
+import frame from './breadcrumb.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  long?: boolean;
+  open?: boolean;
+  link?: Interaction;
+  current?: Interaction;
+  overflow?: Interaction;
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}"`, interaction && `data-et-force="${interaction}"`].filter(Boolean).join(' ');
+
+const shortTrail = (props: Props): BreadcrumbMockCrumb[] => [
+  { label: 'Home', href: '#' },
+  { label: 'Competitions', href: '#', attributes: mark('link', props.link) },
+  { label: 'Regionalliga Nordost', attributes: mark('current', props.current) },
+];
+
+const longTrail = (props: Props): BreadcrumbMockCrumb[] => [
+  { label: 'Home', href: '#' },
+  { label: 'Competitions', href: '#' },
+  { label: 'Regionalliga Nordost', href: '#' },
+  { label: 'Season 2026/27', href: '#' },
+  { label: 'Matchday 14', href: '#' },
+  { label: 'Chemie Leipzig vs. Lokomotive Leipzig', attributes: mark('current', props.current) },
+];
+
+const hiddenCrumbs = [1, 2, 3, 4];
+
+const longMarkup = (props: Props) => {
+  const trail = longTrail(props);
+  const panel = props.open
+    ? breadcrumbOverflowPanel(hiddenCrumbs.map((index) => trail[index]!)).replace(
+        'class="et-overlay ',
+        'data-et-surface="overflow.body" class="et-overlay ',
+      )
+    : '';
+
+  return `<div class="breadcrumb-overflow-stage">${panel}${breadcrumb({
+    crumbs: trail,
+    collapsed: hiddenCrumbs,
+    overflowAttributes: mark('overflow', props.overflow),
+  })}</div>`;
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    'link-hover': { link: 'hover' },
+    'link-active': { link: 'active' },
+    'link-focus-visible': { link: 'focus-visible' },
+    'current-page': { current: 'hover' },
+    long: { long: true },
+    'overflow-hover': { long: true, overflow: 'hover' },
+    'overflow-active': { long: true, overflow: 'active' },
+    'overflow-focus-visible': { long: true, overflow: 'focus-visible' },
+    'overflow-open': { long: true, open: true },
+  },
+  widths: [480],
+  controls: {
+    link: { kind: 'button', input: ['pointer', 'keyboard'] },
+    overflow: { kind: 'disclosure', input: ['pointer', 'keyboard'], surfaces: { body: 'overflow-open' } },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="breadcrumb-frame">${props.long ? longMarkup(props) : breadcrumb({ crumbs: shortTrail(props) })}</div>`,
+      styles: [breadcrumbStyles, frame].join('\n'),
+    }),
+});

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

@@ -0,0 +1,33 @@
+@layer components {
+  .et-button {
+    --_et-focus-ring-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  .et-icon-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-rgb: var(--et-color-primary-active);
+      }
+    }
+
+    &:active {
+      --_et-button-background: color-mix(
+        in srgb,
+        var(--et-theme-color-primary-solid) 84%,
+        var(--et-theme-color-on-primary-solid)
+      );
+    }
+  }
+
+  .et-icon-button:where([data-variant='filled']) {
+    box-shadow: var(--et-button-shadow, none);
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-opacity: 1;
+      }
+    }
+  }
+}

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

@@ -1,17 +1,35 @@
-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 { 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 ');
 
   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 +47,36 @@ 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].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,96 @@
+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],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${render(props)}</div>`,
+      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);
+  }
+}