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

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

@@ -0,0 +1,69 @@
+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],
+  frame: (body) => `<div class="loader-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: render(props),
+      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,43 @@
+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],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: masonry({
+        items: ITEMS[props.items],
+        width: props.width,
+        columnWidth: props.columnWidth,
+        dir: props.dir,
+      }),
+      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,77 @@
+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],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  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: matchCard(props.card),
+      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,103 @@
+import {
+  menu,
+  type MenuMockItem,
+  type MenuMockRow,
+  type MenuMockSelectionItem,
+  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 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 isItemRow = (entry: MenuMockRow): entry is MenuMockItem | MenuMockSelectionItem =>
+  entry.kind === undefined || entry.kind === 'item' || entry.kind === 'checkbox' || entry.kind === 'radio';
+
+const withForced = (rows: MenuMockRow[], forced?: ItemInteraction): MenuMockRow[] =>
+  rows.map((entry, index) =>
+    forced && index === 1 && isItemRow(entry)
+      ? {
+          ...entry,
+          active: true,
+          activeSource: forced === 'focus-visible' ? 'keyboard' : entry.activeSource,
+          attributes: [entry.attributes, `data-et-force="${forced}"`].filter(Boolean).join(' '),
+        }
+      : 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 },
+  },
+  frame: (body) => `<div class="menu-frame">${body}</div>`,
+  render: ({ rows, forced }: Props) =>
+    drawing({
+      body: menu({ rows: withForced(rows, forced), color: 'brand' }),
+      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,107 @@
+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'] },
+  },
+  frame: (body) => `<div class="notification-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: render(props),
+      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);
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import { otpInput, type OtpInputMockOptions, otpInputStyles } from '@ethlete/components/design/otp-input';
+import { definePart, drawing } from '@design-system';
+import frame from './otp-input.css?inline';
+
+type Props = { field: OtpInputMockOptions };
+
+const code = (extra: Partial<OtpInputMockOptions> = {}): Props => ({
+  field: { id: 'code', label: 'Verification code', ...extra },
+});
+
+const pin = (extra: Partial<OtpInputMockOptions> = {}): Props => ({
+  field: { id: 'pin', label: 'PIN', length: 4, masked: true, ...extra },
+});
+
+const INVALID = {
+  required: true,
+  error: 'Enter the code from the SMS.',
+  errorColor: 'danger',
+} satisfies Partial<OtpInputMockOptions>;
+
+export default definePart({
+  note: 'The SDK otp input (et-otp-input), first drawing, drawn by the mock from @ethlete/components/design/otp-input with the real markup and CSS: et-label with the required marker, the segment row, the invisible native input over it, et-form-support with hint and error; the brand theme, danger as the error theme. The field has no :focus or :hover CSS of its own: focus is the data-caret segment (a 1px border plus a 1px inset outline in primary, and a blinking 2px caret bar in an empty one), which the mock draws with focused. Fixtures are fictional: Verification code, 6 digits 482193, hint We sent it to +49 151 0000 0000., required with error Enter the code from the SMS.; a 4-digit masked PIN. Framed as a page with 16px padding at 320, 360 and 640. States: empty, partial, filled, hover, focus-empty, focus-partial, focus-filled, hint, required, invalid, invalid-partial, invalid-focus, disabled, disabled-filled, readonly, readonly-focus, pin-partial and pin-focus. Numbers (light / dark), from shot pixels at scale 2 at 360, brand mint, a: segment 44px outer (border-box, fixed in 00072d935), gap 8px, row 304px, digits 19.8px; empty and filled segment border (surface border) vs page 1.26 / 1.73, the only edge of a segment; caret segment edge and caret bar (primary) 1.33 / 13.50; required marker (brand primary) 1.33 / 13.50; invalid border (danger) 4.83 / 3.71; label (muted) 7.81 / 6.94; disabled digits 2.55 / 3.72 (opacity 0.4, exempt). Decided rules that arise: Q88 (focus in ink: the caret segment edge and the caret bar take ink, the invalid one the danger ink) and Q99a (a mint mark on light takes ink: the required marker light-dark(ink, primary)). Hover follows the text field (form-field-text-shell: the frame border to surface-interaction-hover, the error frame to ink, none when readonly or disabled), on the host since the host is the click target (otp.activate()). The filled segment edge in c is my proposal, not a decided rule (Q103). Findings for later, lib bugs apart: (L1) a 6-digit field needed 304px and never shrank; at 320 with 16px page padding it overflowed by 16px (drawn at 320). Now fixed: the segments shrink, 41.3px at 320, and the render at 640 is unchanged. (L2) a readonly field showed the focus caret segment and, when not full, the blinking caret bar, though nothing can be typed (readonly-focus). Now fixed: no caret when readonly. Design: (1) WCAG 1.4.11: the segment border 1.26 / 1.73 is the only edge of an empty segment, as with the checkbox box and the radio circle. Not drawn. (2) A filled segment looks like an empty one apart from its digit; c answers it. (3) The error border is the full danger primary, while the text field draws its error frame at 50 % danger; kept, it passes 3:1. (4) Hover (10.37 / 13.07) outshines the focus edge (5.48 / 13.50) in b and c, as it does on the text field. (5) The masked dot is a 19.8px bullet, about 5px wide. (6) The error marker 3.71 in dark, exempted as in checkbox r1. Later rounds, left out here: data-warning (no CSS of its own), a coloured field, alphanumeric codes, other lengths and segment sizes via the custom properties, RTL and the pop-in animation.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    empty: code(),
+    partial: code({ value: '482' }),
+    filled: code({ value: '482193' }),
+    hover: code({ value: '482', force: 'hover' }),
+    'focus-empty': code({ focused: true }),
+    'focus-partial': code({ value: '482', focused: true }),
+    'focus-filled': code({ value: '482193', focused: true }),
+    hint: code({ hint: 'We sent it to +49 151 0000 0000.' }),
+    required: code({ required: true, hint: 'We sent it to +49 151 0000 0000.' }),
+    invalid: code(INVALID),
+    'invalid-partial': code({ ...INVALID, value: '48' }),
+    'invalid-focus': code({ ...INVALID, value: '48', focused: true }),
+    disabled: code({ disabled: true }),
+    'disabled-filled': code({ value: '482193', disabled: true }),
+    readonly: code({ value: '482193', readonly: true }),
+    'readonly-focus': code({ value: '482', readonly: true, focused: true }),
+    'pin-partial': pin({ value: '73' }),
+    'pin-focus': pin({ value: '73', focused: true }),
+  },
+  contrast: {
+    exceptions: [
+      {
+        selector: 'et-otp-input:has(.et-otp-input-native:disabled) .et-otp-input-segment-char',
+        reason:
+          'A disabled field is exempt under WCAG 1.4.3 (inactive component): opacity 0.4 draws the digits 2.55:1 / 3.72:1.',
+      },
+      {
+        selector: 'et-otp-input[data-error] .et-label-required-marker',
+        reason:
+          'The required marker takes the error theme primary: 3.71:1 in dark, under 4.5:1. An open point (checkbox r1 finding 3), not a decided rule.',
+      },
+    ],
+  },
+  widths: [320, 360, 640],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: otpInput(props.field),
+      styles: [otpInputStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/pagination/pagination.css

@@ -0,0 +1,14 @@
+.pagination-frame {
+  display: flex;
+  padding: 0.8rem;
+}
+
+@layer components {
+  .et-pagination-host .et-pagination-button {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-pagination-host .et-pagination-button[aria-current='page'] {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}