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

package/design/sdk/components/kbd/kbd.css

@@ -0,0 +1,25 @@
+.kbd-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+.kbd-text {
+  margin: 0;
+  font-size: 1.4rem;
+  line-height: 1.6;
+}
+
+.kbd-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  font-size: 1.3rem;
+}
+
+.kbd-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.6rem;
+}

package/design/sdk/components/kbd/kbd.ts

@@ -0,0 +1,57 @@
+import { kbd, kbdStyles } from '@ethlete/components/design/kbd';
+import { definePart, drawing } from '@design-system';
+import frame from './kbd.css?inline';
+
+type Platform = 'apple' | 'other';
+
+type Props = {
+  form: 'single' | 'combo' | 'in-text' | 'shortcut-list';
+  platform: Platform;
+};
+
+const MOD = { apple: '⌘', other: 'Ctrl' } as const;
+const SHIFT = { apple: '⇧', other: 'Shift' } as const;
+const ALT = { apple: '⌥', other: 'Alt' } as const;
+
+const SHORTCUTS = (p: Platform) => [
+  { label: 'Save', keys: [MOD[p], 'S'] },
+  { label: 'Undo', keys: [MOD[p], 'Z'] },
+  { label: 'Redo', keys: [MOD[p], SHIFT[p], 'Z'] },
+  { label: 'Move up a level', keys: [ALT[p], '↑'] },
+  { label: 'Next page', keys: ['PgDn'] },
+  { label: 'Zoom in', keys: [MOD[p], '+'] },
+];
+
+const render = ({ form, platform: p }: Props) => {
+  switch (form) {
+    case 'single':
+      return kbd({ keys: ['Esc'] });
+    case 'combo':
+      return kbd({ keys: [MOD[p], 'K'] });
+    case 'in-text':
+      return `<p class="kbd-text">Press ${kbd({ keys: [MOD[p], 'K'] })} to open the palette, then ${kbd({ keys: ['Esc'] })} to dismiss it.</p>`;
+    case 'shortcut-list':
+      return `<div class="kbd-list">${SHORTCUTS(p)
+        .map(({ label, keys }) => `<div class="kbd-row"><span>${label}</span>${kbd({ keys })}</div>`)
+        .join('')}</div>`;
+  }
+};
+
+export default definePart({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    single: { form: 'single', platform: 'apple' },
+    'combo-apple': { form: 'combo', platform: 'apple' },
+    'combo-other': { form: 'combo', platform: 'other' },
+    'in-text': { form: 'in-text', platform: 'apple' },
+    'shortcut-list-apple': { form: 'shortcut-list', platform: 'apple' },
+    'shortcut-list-other': { form: 'shortcut-list', platform: 'other' },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="kbd-frame">${render(props)}</div>`,
+      styles: [kbdStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/loader/loader.css

@@ -0,0 +1,37 @@
+.loader-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+.loader-row {
+  display: flex;
+  align-items: center;
+  gap: 2.4rem;
+}
+
+.loader-column {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@layer components {
+  .et-spinner.et-color--brand {
+    --et-spinner-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-progress-bar.et-color--brand {
+    --et-progress-bar-indicator-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-brand-loader .et-brand-loader__outline {
+    stroke: var(--et-theme-color-ink-solid);
+  }
+
+  .et-brand-loader .et-brand-loader__fill {
+    stroke: var(--et-theme-color-ink-solid);
+    stroke-width: 0.7;
+    stroke-linejoin: round;
+  }
+}

package/design/sdk/components/loader/loader.ts

@@ -0,0 +1,68 @@
+import { brandLoader, loaderStyles, progressBar, spinner } from '@ethlete/components/design/loader';
+import { definePart, drawing } from '@design-system';
+import frame from './loader.css?inline';
+
+type Props = {
+  form: 'spinner' | 'spinner-determinate' | 'spinner-themed' | 'progress-bar' | 'progress-bar-themed' | 'brand-loader';
+};
+
+const row = (items: string[]) => `<div class="loader-row">${items.join('')}</div>`;
+
+const column = (items: string[]) => `<div class="loader-column">${items.join('')}</div>`;
+
+const render = ({ form }: Props) => {
+  switch (form) {
+    case 'spinner':
+      return row([
+        spinner(),
+        spinner({ diameter: 45, strokeWidth: 2 }),
+        spinner({ diameter: 45, strokeWidth: 2, track: true }),
+        spinner({ diameter: 72, strokeWidth: 4, track: true }),
+      ]);
+    case 'spinner-determinate':
+      return row([
+        spinner({ diameter: 45, strokeWidth: 2, track: true, value: 0 }),
+        spinner({ diameter: 45, strokeWidth: 2, track: true, value: 65 }),
+        spinner({ diameter: 45, strokeWidth: 2, track: true, value: 100 }),
+        spinner({ diameter: 45, strokeWidth: 2, value: 65 }),
+      ]);
+    case 'spinner-themed':
+      return row([
+        spinner({ diameter: 45, strokeWidth: 2, track: true, color: 'brand' }),
+        spinner({ diameter: 45, strokeWidth: 2, track: true, value: 65, color: 'brand' }),
+        spinner({ diameter: 45, strokeWidth: 2, track: true, color: 'danger' }),
+        spinner({ diameter: 45, strokeWidth: 2, track: true, color: 'warning' }),
+      ]);
+    case 'progress-bar':
+      return column([progressBar({ value: 42 }), progressBar({ value: 100 }), progressBar()]);
+    case 'progress-bar-themed':
+      return column([
+        progressBar({ value: 42, color: 'brand' }),
+        progressBar({ color: 'brand' }),
+        progressBar({ value: 42, color: 'danger' }),
+        progressBar({ value: 42, color: 'warning' }),
+      ]);
+    case 'brand-loader':
+      return row([brandLoader()]);
+  }
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    spinner: { form: 'spinner' },
+    'spinner-determinate': { form: 'spinner-determinate' },
+    'spinner-themed': { form: 'spinner-themed' },
+    'progress-bar': { form: 'progress-bar' },
+    'progress-bar-themed': { form: 'progress-bar-themed' },
+    'brand-loader': { form: 'brand-loader' },
+  },
+  checks: { skip: ['CLIPPED'] },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="loader-frame">${render(props)}</div>`,
+      styles: [loaderStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/masonry/masonry.css

@@ -0,0 +1,7 @@
+.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;
+}

package/design/sdk/components/masonry/masonry.ts

@@ -0,0 +1,42 @@
+import { masonry, MasonryMockItem, masonryStyles } from '@ethlete/components/design/masonry';
+import { definePart, drawing } from '@design-system';
+import frame from './masonry.css?inline';
+
+type Props = {
+  items: 'rest' | 'uneven' | 'few';
+  width?: number;
+  columnWidth?: number;
+  dir?: 'rtl';
+};
+
+const tiles = (heights: readonly number[]): MasonryMockItem[] =>
+  heights.map((height, index) => ({ title: `Card ${index + 1}`, subtitle: `Height ${height}`, height }));
+
+const ITEMS = {
+  rest: tiles([120, 160, 140, 180, 120, 150, 140, 110]),
+  uneven: tiles([80, 260, 120, 60, 200, 90, 170, 70, 130]),
+  few: tiles([120, 160, 100]),
+};
+
+export default definePart({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    rest: { items: 'rest', columnWidth: 130 },
+    uneven: { items: 'uneven', columnWidth: 130 },
+    narrow: { items: 'rest', columnWidth: 130, width: 280 },
+    'single-column': { items: 'few' },
+    rtl: { items: 'rest', columnWidth: 130, dir: 'rtl' },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${masonry({
+        items: ITEMS[props.items],
+        width: props.width,
+        columnWidth: props.columnWidth,
+        dir: props.dir,
+      })}</div>`,
+      styles: [masonryStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/match/match.css

@@ -0,0 +1,25 @@
+.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-match-card.et-focus-ring {
+    --_et-focus-ring-color: 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));
+  }
+}

package/design/sdk/components/match/match.ts

@@ -0,0 +1,76 @@
+import { matchCard, MatchMockOptions, matchStyles } from '@ethlete/components/design/match';
+import { definePart, drawing } from '@design-system';
+import frame from './match.css?inline';
+
+type Props = { card: MatchMockOptions };
+
+const HOME = { name: 'Northbridge Rovers', code: 'NBR', subtitle: 'Northbridge', seed: 1 };
+const AWAY = { name: 'Harbor City', code: 'HBC', subtitle: 'Harbor', seed: 4 };
+
+const finished: MatchMockOptions = {
+  home: HOME,
+  away: AWAY,
+  status: 'finished',
+  homeScore: 2,
+  awayScore: 1,
+  winnerSide: 'home',
+  label: 'Matchday 12',
+  startTime: '10/31/2026 8:00 PM',
+};
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    finished: { card: finished },
+    live: {
+      card: {
+        home: HOME,
+        away: AWAY,
+        status: 'live',
+        homeScore: 1,
+        awayScore: 1,
+        label: 'Matchday 12',
+        liveColor: 'danger',
+      },
+    },
+    scheduled: {
+      card: { home: HOME, away: AWAY, status: 'scheduled', label: 'Matchday 13', startTime: '11/07/2026 6:30 PM' },
+    },
+    series: {
+      card: {
+        home: HOME,
+        away: AWAY,
+        status: 'finished',
+        homeScore: 1,
+        awayScore: 2,
+        winnerSide: 'away',
+        gameScores: [
+          { home: 13, away: 11 },
+          { home: 9, away: 13 },
+          { home: 10, away: 13 },
+        ],
+        label: 'Semi-final, best of 3',
+        showSeeds: true,
+      },
+    },
+    outcome: {
+      card: { home: HOME, away: AWAY, status: 'finished', resultKind: 'outcome', winnerSide: 'away', label: 'Round 3' },
+    },
+    tbd: {
+      card: { home: HOME, status: 'scheduled', label: 'Final', startTime: '11/21/2026 7:00 PM' },
+    },
+    compact: { card: { ...finished, size: 'compact' } },
+    expanded: { card: { ...finished, size: 'expanded' } },
+    wide: { card: { ...finished, size: 'wide' } },
+    hover: { card: { ...finished, interactive: true, force: 'hover' } },
+    'focus-visible': { card: { ...finished, interactive: true, force: 'focus-visible' } },
+  },
+  widths: [280, 480, 720],
+  render: (props: Props) =>
+    drawing({
+      // Lib bug: et-match-score clips its 25px digit box to 24px (overflow: hidden at line-height 1.2), reported.
+      body: `<div class="t-frame">${matchCard(props.card)}</div>`,
+      styles: [matchStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/menu/menu.css

@@ -0,0 +1,22 @@
+.menu-frame {
+  display: flex;
+  padding: 0.8rem;
+}
+
+.menu-frame .et-menu {
+  --et-menu-max-height: 100rem;
+}
+
+@layer components {
+  .et-menu .et-menu-selection-item:not(.et-menu-selection-item--has-icon) .et-menu-item-check,
+  .et-menu .et-menu-selection-item--has-icon:is([aria-checked='true'], [aria-checked='mixed']) .et-menu-item-check {
+    color: var(--et-theme-color-ink-solid);
+  }
+}
+
+@layer components {
+  .et-menu .et-menu-item[data-active]:focus-visible {
+    outline: 2px solid var(--et-theme-color-ink-solid);
+    outline-offset: -2px;
+  }
+}

package/design/sdk/components/menu/menu.ts

@@ -0,0 +1,91 @@
+import { menu, type MenuMockRow, menuStyles } from '@ethlete/components/design/menu';
+import { definePart, drawing, interactionRows } from '@design-system';
+import edge from './menu.css?inline';
+
+type ItemInteraction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  rows: MenuMockRow[];
+  forced?: ItemInteraction;
+};
+
+const MARK = 'data-et-control="item"';
+
+const force = (interaction?: ItemInteraction) =>
+  [MARK, interaction && `data-et-force="${interaction}"`].filter(Boolean).join(' ');
+
+const row = (label: string, extra: Partial<Extract<MenuMockRow, { label: string }>> = {}) =>
+  ({ label, attributes: MARK, ...extra }) as MenuMockRow;
+
+const FULL: MenuMockRow[] = [
+  { kind: 'label', label: 'Document' },
+  row('Rename', { shortcut: 'F2' }),
+  row('Duplicate', { shortcut: 'Ctrl D' }),
+  row('Move to', { submenu: true }),
+  row('Export as PDF', { disabled: true }),
+  { kind: 'separator' },
+  {
+    kind: 'checkbox-group',
+    label: 'Show',
+    items: [
+      { kind: 'checkbox', label: 'Comments', checked: true, attributes: MARK },
+      { kind: 'checkbox', label: 'Suggestions', attributes: MARK },
+    ],
+  },
+  { kind: 'separator' },
+  {
+    kind: 'radio-group',
+    label: 'Sort by',
+    items: [
+      { kind: 'radio', label: 'Name', checked: true, attributes: MARK },
+      { kind: 'radio', label: 'Date', attributes: MARK },
+    ],
+  },
+  { kind: 'separator' },
+  row('Delete', { destructive: true }),
+];
+
+const withForced = (rows: MenuMockRow[], forced?: ItemInteraction): MenuMockRow[] =>
+  rows.map((entry, index) =>
+    index === 1 && 'label' in entry && entry.kind !== 'label'
+      ? ({ ...entry, active: !!forced, attributes: force(forced) } as MenuMockRow)
+      : entry,
+  );
+
+const { states, grid } = interactionRows(
+  {
+    item: { rows: [row('Rename'), row('Duplicate', { shortcut: 'Ctrl D' }), row('Move to', { submenu: true })] },
+    checked: {
+      rows: [
+        { kind: 'checkbox', label: 'Suggestions', attributes: MARK },
+        { kind: 'checkbox', label: 'Comments', checked: true, attributes: MARK },
+        { kind: 'radio', label: 'Name', checked: true, attributes: MARK },
+      ],
+    },
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'active', 'focus-visible'],
+    force: (props: Props, interaction: ItemInteraction): Props => ({ ...props, forced: interaction }),
+  },
+);
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    menu: { rows: FULL },
+    ...states,
+    disabled: { rows: [row('Rename'), row('Export as PDF', { disabled: true }), row('Duplicate')] },
+    'submenu-open': { rows: [row('Rename'), row('Move to', { submenu: 'open', active: true }), row('Duplicate')] },
+  },
+  grid,
+  widths: [480],
+  controls: {
+    item: { kind: 'row', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: ({ rows, forced }: Props) =>
+    drawing({
+      body: `<div class="menu-frame">${menu({ rows: withForced(rows, forced), color: 'brand' })}</div>`,
+      styles: [menuStyles, edge].join('\n'),
+    }),
+});

package/design/sdk/components/notification/notification.css

@@ -0,0 +1,32 @@
+.notification-frame {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+@layer components {
+  .et-notification {
+    border-inline-start-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-notification .et-notification-icon {
+    color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-notification .et-notification-spinner {
+    --et-spinner-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-notification .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+}
+
+@layer components {
+  .et-notification-dismiss-btn:focus-visible {
+    opacity: 1;
+  }
+}

package/design/sdk/components/notification/notification.ts

@@ -0,0 +1,106 @@
+import { notification, notificationStack, notificationStyles } from '@ethlete/components/design/notification';
+import { definePart, drawing } from '@design-system';
+import edge from './notification.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Status = 'success' | 'error' | 'info' | 'loading';
+
+type Props = {
+  status: Status | 'stack';
+  close?: Interaction;
+  action?: Interaction;
+  secondary?: Interaction;
+};
+
+const PANE = 'data-et-surface-fill';
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const draw = (status: Status, { close, action, secondary }: Omit<Props, 'status'> = {}) => {
+  const controls = {
+    dismissAttributes: mark('close', close),
+    attributes: PANE,
+  };
+
+  switch (status) {
+    case 'success':
+      return notification({
+        status,
+        title: 'Kick-off moved',
+        message: 'Both teams and the referee get an email with the new time.',
+        action: { label: 'Undo', attributes: mark('action', action) },
+        ...controls,
+      });
+    case 'error':
+      return notification({
+        status,
+        color: 'danger',
+        title: 'Result not saved',
+        message: 'The connection dropped before the server answered.',
+        action: { label: 'Retry', attributes: mark('action', action) },
+        secondaryAction: { label: 'Details', attributes: mark('secondary', secondary) },
+        ...controls,
+      });
+    case 'info':
+      return notification({
+        status,
+        title: 'Round 4 is open',
+        message: 'Predictions close at kick-off of the first match.',
+        ...controls,
+      });
+    case 'loading':
+      return notification({
+        status,
+        title: 'Uploading 3 files',
+        message: 'You can keep working while this runs.',
+        ...controls,
+      });
+  }
+};
+
+const render = ({ status, ...interactions }: Props) =>
+  status === 'stack'
+    ? notificationStack((['loading', 'info', 'error', 'success'] as const).map((each) => draw(each)))
+    : draw(status, interactions);
+
+export default definePart({
+  note: 'The SDK notification (et-notification), drawn by its mock from @ethlete/components/design: one notification per status with title, message, dismiss icon button and, where the status has them, a primary and a secondary text-button action; the four statuses in the stack column. The pane sits one surface level above the page, as the component forces elevation 1. Error takes the danger theme (the semantic error theme); success, info and loading take the theme around them, since the design product registers no success theme.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    success: { status: 'success' },
+    error: { status: 'error' },
+    info: { status: 'info' },
+    loading: { status: 'loading' },
+    'close-hover': { status: 'error', close: 'hover' },
+    'close-focus-visible': { status: 'error', close: 'focus-visible' },
+    'action-focus-visible': { status: 'error', action: 'focus-visible' },
+    'secondary-focus-visible': { status: 'error', secondary: 'focus-visible' },
+    'success-close-focus-visible': { status: 'success', close: 'focus-visible' },
+    'success-action-focus-visible': { status: 'success', action: 'focus-visible' },
+    stack: { status: 'stack' },
+  },
+  widths: [480],
+  contrast: {
+    exceptions: [
+      {
+        selector: '.et-notification-message',
+        reason:
+          "Today the message is the muted surface colour at 0.65 opacity; its contrast is an open point, not this round's question.",
+      },
+    ],
+  },
+  controls: {
+    close: { kind: 'button', input: ['pointer', 'keyboard'] },
+    action: { kind: 'button', input: ['pointer', 'keyboard'] },
+    secondary: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="notification-frame">${render(props)}</div>`,
+      styles: [notificationStyles, edge].join('\n'),
+    }),
+});

package/design/sdk/components/otp-input/otp-input.css

@@ -0,0 +1,35 @@
+.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-otp-input .et-otp-input-segment[data-caret] {
+    border-color: var(--et-theme-color-ink-solid);
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  et-otp-input .et-otp-input-segment .et-otp-input-caret {
+    background: var(--et-theme-color-ink-solid);
+  }
+
+  et-otp-input > et-label .et-label-required-marker {
+    color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  @media (hover: hover) {
+    et-otp-input:not(:has(.et-otp-input-native:read-only)):hover .et-otp-input-segment:not([data-caret]) {
+      border-color: var(--et-surface-interaction-hover-solid);
+    }
+
+    et-otp-input[data-error]:not(:has(.et-otp-input-native:read-only)):hover .et-otp-input-segment:not([data-caret]) {
+      border-color: var(--et-theme-color-ink-solid);
+    }
+  }
+}