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

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

@@ -53,9 +53,10 @@ export default definePart({
     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: `<div class="card-frame">${card({ variant: props.variant, content: content(props) })}</div>`,
+      body: card({ variant: props.variant, content: content(props) }),
       styles: [cardStyles, frame].join('\n'),
     }),
 });

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

@@ -66,9 +66,10 @@ export default definePart({
     'single-slide': { count: 1 },
   },
   widths: [480],
+  frame: (body) => `<div class="carousel-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="carousel-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [carouselStyles, frame].join('\n'),
     }),
 });

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

@@ -90,9 +90,10 @@ export default definePart({
     'pie-long-label': { kind: 'pie', longLabel: true },
   },
   widths: [480],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${render(props)}</div>`,
+      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);
+  }
+}

package/design/sdk/components/checkbox/checkbox.ts

@@ -0,0 +1,180 @@
+import {
+  checkbox,
+  checkboxGroup,
+  type CheckboxGroupMockOption,
+  type CheckboxGroupMockOptions,
+  type CheckboxMockForce,
+  type CheckboxMockOptions,
+  checkboxGroupStyles,
+  checkboxStyles,
+} from '@ethlete/components/design/checkbox';
+import { control } from '@ethlete/components/design/control';
+import { definePart, drawing } from '@design-system';
+import frame from './checkbox.css?inline';
+
+type Props = ({ checkbox: CheckboxMockOptions } | { group: CheckboxGroupMockOptions }) &
+  Partial<CheckboxMockOptions & CheckboxGroupMockOptions>;
+
+const LABEL = 'Send me the match report';
+
+const ROWS = {
+  unchecked: {},
+  checked: { checked: true },
+  indeterminate: { indeterminate: true },
+} satisfies Record<string, CheckboxMockOptions>;
+
+const COLUMNS = ['rest', 'hover', 'focus-visible', 'active', 'disabled', 'readonly'] as const;
+
+type Row = keyof typeof ROWS;
+type Column = (typeof COLUMNS)[number];
+
+const cellOf = (row: Row, column: Column): CheckboxMockOptions => ({
+  ...ROWS[row],
+  id: `${row}-${column}`,
+  label: LABEL,
+  ...(column === 'disabled' ? { disabled: true } : column === 'readonly' ? { readonly: true } : {}),
+  ...(column === 'rest' || column === 'disabled' || column === 'readonly'
+    ? {}
+    : { force: column satisfies CheckboxMockForce }),
+});
+
+const stateOf = (row: Row, column: Column) => (column === 'rest' ? row : `${row}-${column}`);
+
+const gridStates = Object.fromEntries(
+  (Object.keys(ROWS) as Row[]).flatMap((row) =>
+    COLUMNS.map((column) => [stateOf(row, column), { checkbox: cellOf(row, column) }]),
+  ),
+) as Record<string, Props>;
+
+const CARD: CheckboxMockOptions = {
+  id: 'card',
+  label: 'Weekly digest',
+  description: 'A summary of every match day, each Monday.',
+  variant: 'card',
+};
+
+const EVENTS = ['Kick-off', 'Goals', 'Half-time', 'Full-time'];
+
+const eventsGroup = (
+  checked: number,
+  extra: { force?: CheckboxMockForce[]; selectAllForce?: CheckboxMockForce[] } = {},
+): CheckboxGroupMockOptions => ({
+  id: 'events',
+  label: 'Notify me about',
+  selectAll: 'All events',
+  selectAllForce: extra.selectAllForce,
+  options: EVENTS.map((label, index): CheckboxGroupMockOption => ({
+    label,
+    checked: index < checked,
+    force: index === 1 ? extra.force : undefined,
+  })),
+});
+
+const venueGroup: CheckboxGroupMockOptions = {
+  id: 'venue',
+  label: 'Show matches',
+  orientation: 'horizontal',
+  options: [{ label: 'Home', checked: true }, { label: 'Away', checked: true }, { label: 'Neutral ground' }],
+};
+
+const marked = (markup: string) =>
+  markup.replace(/<(et-checkbox|et-checkbox-option|et-checkbox-group-select-all)(?=[\s>])/gu, (_, tag: string) =>
+    control(
+      `<${tag}>`,
+      tag === 'et-checkbox-option' ? 'option' : tag === 'et-checkbox' ? 'checkbox' : 'select-all',
+    ).slice(0, -1),
+  );
+
+const render = (props: Props) =>
+  'group' in props
+    ? marked(checkboxGroup(props.group))
+    : marked(
+        checkbox(props.checkbox).replace(
+          'class="et-choice-field-label-area',
+          'data-et-skip="CLIPPED" class="et-choice-field-label-area',
+        ),
+      );
+
+export default definePart({
+  note: "The SDK checkbox (et-checkbox) in flow, first drawing, drawn by the mock from @ethlete/components/design/checkbox with the real markup and CSS: et-checkbox alone and inside et-choice-field (label, et-description, hint, error, required marker), the card variant (et-selection-card), and et-checkbox-group with et-checkbox-group-select-all and et-checkbox-option, plus the color-interactive and focus-ring sheets; the brand theme, danger as the error theme. Fixtures are fictional: a match-report preferences form (Send me the match report, One email per match, no ads., hint We send it after the final whistle.; I accept the terms of use, required, error Accept the terms to continue.; card Weekly digest, A summary of every match day, each Monday.; group Notify me about with All events over Kick-off, Goals, Half-time, Full-time; horizontal group Show matches: Home, Away, Neutral ground). Framed as a page with 16px padding at 360 and 640. States: a grid of unchecked, checked and indeterminate by rest, hover, focus-visible, active, disabled and readonly (all labelled); box-only (checked, no label); support (description and hint); invalid and invalid-focus-visible; card-rest, card-checked, card-hover, card-focus-visible, card-checked-focus-visible; group-unchecked, group-partial (2 of 4, select-all mixed), group-checked, group-option-hover, group-option-pressed (force hover and active), group-option-focus-visible, group-select-all-focus-visible and group-horizontal. Numbers (light / dark), from shot pixels at scale 2 at 360, brand mint, a: unchecked box border (surface border) vs page 1.26 / 1.73, the same for the option and select-all boxes and the card edge; hover border 10.37 / 13.07; checked and indeterminate fill (primary) vs page 1.33 / 13.50, check and dash on it 15.82; checked hover fill (-hover) 1.37 / 13.06, 1.03 from rest; active fill 2.24 / 8.01; focus-visible fill (-focus) 1.37 / 13.06; focus ring on a checked or indeterminate box (primary -focus) 1.37 / 13.06, on an unchecked box (surface text colour) 17.93 / 17.18; card checked edge and card ring (primary) 1.33 / 13.50; option and select-all ring 1.37 / 13.06; invalid box border (danger) 4.83 / 3.71, its focus ring (danger -focus) 6.47 / 2.77; disabled checked fill 2.20 / 1.70, disabled unchecked border 1.12 / 1.27 (exempt under 1.4.11). Decided rules that arise: Q88 (the checked and indeterminate ring, the invalid ring, the card ring, the option and select-all rings in ink; the unchecked ring is the surface text colour, not a primary ring, so it stays), Q99a (the card checked and focus edge and the focused option, select-all and card box borders take light-dark(ink, primary); the checked and indeterminate box, the checked option box and the checked or mixed select-all box are mint fills, so they take a 1px inset ink edge, an outline at -1px as in the table round; on the option and select-all the focus ring owns the outline, so the edge leaves while it shows) and Q101 (a filled checked or indeterminate box hovers to -active). The ink edge on a mint fill arises, so Q102 arises: b draws the edges in both schemes, c keeps dark as today (light-dark(ink, transparent)). The error border is the danger theme, not mint, and passes 3:1, so it is kept. Findings for later: (1) lib bug: .et-checkbox-box, .et-checkbox-option-box and .et-checkbox-group-select-all-box were content-box, so --et-checkbox-size 20px drew a 24px box (48 sheet px at scale 2) in an app without a global border-box reset, and the hint and error started 4px left of the label column. Fixed in the lib (box-sizing: border-box on the three boxes): every box draws 20px (40 sheet px), and the label, description and hint share one column (44 CSS px from the frame edge). (2) WCAG 1.4.11: the unchecked box border is 1.26 / 1.73 vs page, under 3:1; it is the only edge of an unchecked box (the same question as the switch off track, switch r1, open). Not drawn. (3) The required marker takes the error theme primary: 3.71:1 in dark, under 4.5:1; exempted here. (4) Focus-visible lightens the checked fill to -focus (1.37 vs page, light), so a focused checked box reads paler than at rest; the ink ring carries the state in b and c. (5) Readonly draws exactly like rest (no affordance by design); a checked readonly box cannot be told from an editable one. (6) Mock: et-description now has its own stylesheet (description.component.css, f5722a1f5), so the mock's inline copy can import it instead. Later rounds, left out here: the sizes sm and lg, the card with the control at start, a coloured (non-brand) checkbox, the group's bulk-edit mixed state (dashed option boxes, a primary mark that Q99a would reach), a disabled or readonly group, a group with error and the group card variant, long labels that wrap, RTL and the check and uncheck animation.",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...gridStates,
+    'box-only': { checkbox: { id: 'box-only', checked: true } },
+    support: {
+      checkbox: {
+        id: 'support',
+        label: LABEL,
+        description: 'One email per match, no ads.',
+        hint: 'We send it after the final whistle.',
+      },
+    },
+    invalid: {
+      checkbox: {
+        id: 'invalid',
+        label: 'I accept the terms of use',
+        required: true,
+        error: 'Accept the terms to continue.',
+        errorColor: 'danger',
+      },
+    },
+    'invalid-focus-visible': {
+      checkbox: {
+        id: 'invalid-focus-visible',
+        label: 'I accept the terms of use',
+        required: true,
+        error: 'Accept the terms to continue.',
+        errorColor: 'danger',
+        force: 'focus-visible',
+      },
+    },
+    'card-rest': { checkbox: CARD },
+    'card-checked': { checkbox: { ...CARD, checked: true } },
+    'card-hover': { checkbox: { ...CARD, force: 'hover' } },
+    'card-focus-visible': { checkbox: { ...CARD, force: 'focus-visible' } },
+    'card-checked-focus-visible': { checkbox: { ...CARD, checked: true, force: 'focus-visible' } },
+    'group-unchecked': { group: eventsGroup(0) },
+    'group-partial': { group: eventsGroup(2) },
+    'group-checked': { group: eventsGroup(4) },
+    'group-option-hover': { group: eventsGroup(0, { force: ['hover'] }) },
+    'group-option-pressed': { group: eventsGroup(0, { force: ['hover', 'active'] }) },
+    'group-option-focus-visible': { group: eventsGroup(2, { force: ['focus-visible'] }) },
+    'group-select-all-focus-visible': { group: eventsGroup(2, { selectAllForce: ['focus-visible'] }) },
+    'group-horizontal': { group: venueGroup },
+  },
+  grid: {
+    columns: COLUMNS,
+    rows: Object.fromEntries(
+      (Object.keys(ROWS) as Row[]).map((row) => [
+        row,
+        Object.fromEntries(COLUMNS.map((column) => [column, stateOf(row, column)])),
+      ]),
+    ),
+  },
+  omits: [
+    { option: 'size', value: 'md', reason: 'The default size, which every state draws without setting it.' },
+    { option: 'variant', value: 'plain', reason: 'The default variant, which the grid draws without setting it.' },
+    { option: 'size', value: 'sm', reason: 'Not drawn in this round: sizes are a later round.' },
+    { option: 'size', value: 'lg', reason: 'Not drawn in this round: sizes are a later round.' },
+    { option: 'orientation', value: 'vertical', reason: 'Drawn as the group-* states, outside the grid.' },
+    { option: 'orientation', value: 'horizontal', reason: 'Drawn as the group-horizontal state, outside the grid.' },
+    { option: 'variant', value: 'card', reason: 'Drawn as the card-* states, outside the grid.' },
+    {
+      option: 'controlPosition',
+      value: 'start',
+      reason: 'Not drawn in this round: the card with the control at start is a later round.',
+    },
+    { option: 'controlPosition', value: 'end', reason: 'Drawn as the card-* states, outside the grid.' },
+  ],
+  controls: {
+    checkbox: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+    option: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+    'select-all': { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  widths: [360, 640],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${render(props)}</div>`,
+      styles: [checkboxStyles, checkboxGroupStyles, frame].join('\n'),
+    }),
+});

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

@@ -68,9 +68,10 @@ export default definePart({
     chip: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
     remove: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
   },
+  frame: (body) => `<div class="chip-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="chip-frame">${props.row ? chipRow(ROW.map((each) => draw(each))) : draw(props)}</div>`,
+      body: props.row ? chipRow(ROW.map((each) => draw(each))) : draw(props),
       styles: [chipStyles, frame].join('\n'),
     }),
 });

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

@@ -51,9 +51,10 @@ export default definePart({
     icon: { kind: 'button', input: ['pointer', 'keyboard'] },
     text: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="copy-button-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="copy-button-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [copyButtonStyles, frame].join('\n'),
     }),
 });

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

@@ -45,9 +45,10 @@ export default definePart({
     'grouped-stacked': { items: GROUPED, variant: 'stacked' },
   },
   widths: [480],
+  frame: (body) => `<div class="description-list-frame">${body}</div>`,
   render: ({ variant, items = STORY }: Props) =>
     drawing({
-      body: `<div class="description-list-frame">${descriptionList({ items, variant })}</div>`,
+      body: descriptionList({ items, variant }),
       styles: [descriptionListStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/dialog/dialog.ts

@@ -70,9 +70,10 @@ export default definePart({
     cancel: { kind: 'button', input: ['pointer', 'keyboard'] },
     confirm: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="dialog-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="dialog-frame">${overlayBackdrop(render(props))}</div>`,
+      body: overlayBackdrop(render(props)),
       styles: [dialogStyles, edge].join('\n'),
     }),
 });

package/design/sdk/components/divider/divider.ts

@@ -35,9 +35,10 @@ export default definePart({
     list: { set: 'list' },
   },
   widths: [480],
+  frame: (body) => `<div class="divider-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="divider-frame">${body(props)}</div>`,
+      body: body(props),
       styles: [dividerStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/empty-state/empty-state.ts

@@ -48,9 +48,10 @@ export default definePart({
   controls: {
     action: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="empty-state-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="empty-state-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [emptyStateStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/grid/grid.ts

@@ -68,13 +68,14 @@ export default definePart({
     'long-title': { layout: 'spans', actions: true, longTitle: true },
   },
   widths: [480],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${grid({
+      body: grid({
         items: itemsOf(props),
         actions: props.actions,
         ghost: props.drag ? { col: 1, row: 1, colSpan: 1, rowSpan: 1 } : undefined,
-      })}</div>`,
+      }),
       styles: [gridStyles, frame].join('\n'),
     }),
 });

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

@@ -71,9 +71,10 @@ export default definePart({
     'align-center': email({ value: VALUE, textAlign: 'center' }),
   },
   widths: [320, 360, 640],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${textInput(props.field)}</div>`,
+      body: textInput(props.field),
       styles: [textInputStyles, frame].join('\n'),
     }),
 });

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

@@ -49,9 +49,10 @@ export default definePart({
     'shortcut-list-other': { form: 'shortcut-list', platform: 'other' },
   },
   widths: [480],
+  frame: (body) => `<div class="kbd-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="kbd-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [kbdStyles, frame].join('\n'),
     }),
 });

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

@@ -60,9 +60,10 @@ export default definePart({
   },
   checks: { skip: ['CLIPPED'] },
   widths: [480],
+  frame: (body) => `<div class="loader-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="loader-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [loaderStyles, frame].join('\n'),
     }),
 });

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

@@ -29,14 +29,15 @@ export default definePart({
     rtl: { items: 'rest', columnWidth: 130, dir: 'rtl' },
   },
   widths: [480],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${masonry({
+      body: 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.ts

@@ -67,10 +67,11 @@ export default definePart({
     '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: `<div class="t-frame">${matchCard(props.card)}</div>`,
+      body: matchCard(props.card),
       styles: [matchStyles, frame].join('\n'),
     }),
 });

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

@@ -1,4 +1,10 @@
-import { menu, type MenuMockRow, menuStyles } from '@ethlete/components/design/menu';
+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';
 
@@ -11,9 +17,6 @@ type Props = {
 
 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;
 
@@ -45,10 +48,18 @@ const FULL: MenuMockRow[] = [
   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) =>
-    index === 1 && 'label' in entry && entry.kind !== 'label'
-      ? ({ ...entry, active: !!forced, attributes: force(forced) } as MenuMockRow)
+    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,
   );
 
@@ -83,9 +94,10 @@ export default definePart({
   controls: {
     item: { kind: 'row', input: ['pointer', 'keyboard'], disabled: true },
   },
+  frame: (body) => `<div class="menu-frame">${body}</div>`,
   render: ({ rows, forced }: Props) =>
     drawing({
-      body: `<div class="menu-frame">${menu({ rows: withForced(rows, forced), color: 'brand' })}</div>`,
+      body: menu({ rows: withForced(rows, forced), color: 'brand' }),
       styles: [menuStyles, edge].join('\n'),
     }),
 });

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

@@ -98,9 +98,10 @@ export default definePart({
     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: `<div class="notification-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [notificationStyles, edge].join('\n'),
     }),
 });

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

@@ -56,9 +56,10 @@ export default definePart({
     ],
   },
   widths: [320, 360, 640],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${otpInput(props.field)}</div>`,
+      body: otpInput(props.field),
       styles: [otpInputStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/pagination/pagination.ts

@@ -67,9 +67,10 @@ export default definePart({
   controls: {
     item: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
   },
+  frame: (body) => `<div class="pagination-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="pagination-frame">${pagination({ ...props, items: items(props) })}</div>`,
+      body: pagination({ ...props, items: items(props) }),
       styles: [paginationStyles, edge].join('\n'),
     }),
 });

package/design/sdk/components/picture/picture.ts

@@ -88,9 +88,10 @@ export default definePart({
     'error-bare': { error: 'bare' },
   },
   widths: [480],
+  frame: (body) => `<div class="picture-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="picture-frame">${body(props)}</div>`,
+      body: body(props),
       styles: [skeletonStyles, pictureStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/progress-steps/progress-steps.ts

@@ -83,9 +83,10 @@ export default definePart({
     complete: { kind: 'button', input: ['pointer', 'keyboard'] },
     upcoming: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="progress-steps-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="progress-steps-frame">${steps(props)}</div>`,
+      body: steps(props),
       styles: [progressStepsStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/query-error/query-error.ts

@@ -112,9 +112,10 @@ export default definePart({
   controls: {
     retry: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="query-error-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="query-error-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [queryErrorStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/radio-group/radio-group.css

@@ -0,0 +1,46 @@
+.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-radio:focus-visible .et-radio-circle {
+    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-radio[aria-checked='true'] .et-radio-circle,
+  et-radio-group[data-mixed] .et-radio-circle {
+    border-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  et-radio[aria-checked='true'] .et-radio-circle::after {
+    outline: 1px solid light-dark(var(--et-theme-color-ink-solid), transparent);
+    outline-offset: -1px;
+  }
+
+  et-radio.et-selection-card:where([aria-checked='true']) {
+    border-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  et-radio.et-selection-card:where(: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);
+  }
+
+  @media (hover: hover) {
+    et-radio[aria-checked='true']:hover {
+      --et-theme-color-primary-rgb: var(--et-color-primary-active);
+    }
+  }
+
+  .et-label-required-marker {
+    color: var(--et-theme-color-ink-solid);
+  }
+}