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

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

@@ -0,0 +1,167 @@
+import {
+  radioGroup,
+  type RadioGroupMockOption,
+  type RadioGroupMockOptions,
+  type RadioMockForce,
+  radioGroupStyles,
+} from '@ethlete/components/design/radio-group';
+import { control } from '@ethlete/components/design/control';
+import { definePart, drawing } from '@design-system';
+import frame from './radio-group.css?inline';
+
+type Props = { group: RadioGroupMockOptions } & Partial<RadioGroupMockOptions>;
+
+const LABEL = 'Remind me one hour before';
+
+const ROWS = {
+  unchecked: {},
+  checked: { checked: true },
+} satisfies Record<string, Partial<RadioGroupMockOption>>;
+
+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): RadioGroupMockOptions => ({
+  id: `${row}-${column}`,
+  readonly: column === 'readonly',
+  options: [
+    {
+      ...ROWS[row],
+      label: LABEL,
+      disabled: column === 'disabled',
+      force:
+        column === 'rest' || column === 'disabled' || column === 'readonly'
+          ? undefined
+          : (column satisfies RadioMockForce),
+    },
+  ],
+});
+
+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), { group: cellOf(row, column) }]),
+  ),
+) as Record<string, Props>;
+
+const marked = (markup: string) =>
+  markup.replace(/<et-radio(?=[\s>])/gu, (tag) => control(`${tag}>`, 'radio').slice(0, -1));
+
+const REMINDERS = ['One hour before', 'Fifteen minutes before', 'At kick-off'];
+
+const reminderGroup = (
+  checked: number | null,
+  extra: Partial<RadioGroupMockOptions> & { force?: RadioMockForce[] } = {},
+): RadioGroupMockOptions => {
+  const { force, ...rest } = extra;
+
+  return {
+    id: 'reminder',
+    label: 'Kick-off reminder',
+    ...rest,
+    options: REMINDERS.map((label, index) => ({
+      label,
+      checked: index === checked,
+      force: index === 1 ? force : undefined,
+    })),
+  };
+};
+
+const formatGroup = (checked: number | null, force?: RadioMockForce[]): RadioGroupMockOptions => ({
+  id: 'format',
+  label: 'Match report format',
+  variant: 'card',
+  options: [
+    { label: 'Short', description: 'The score and the scorers.', checked: checked === 0, force },
+    { label: 'Full', description: 'Every event, with the line-ups.', checked: checked === 1 },
+  ],
+});
+
+const INVALID = {
+  required: true,
+  error: 'Pick a reminder to continue.',
+  errorColor: 'danger',
+} satisfies Partial<RadioGroupMockOptions>;
+
+export default definePart({
+  note: 'The SDK radio group (et-radio-group with et-radio) in flow, first drawing, drawn by the mock from @ethlete/components/design/radio-group with the real markup and CSS: et-label, et-radio in the plain and the card variant (et-selection-card), et-description, et-form-support with hint and error, the required marker, plus the color-interactive sheet; the brand theme, danger as the error theme. Fixtures are fictional: a match reminder form (Kick-off reminder: One hour before, Fifteen minutes before, At kick-off; hint We send it as a push notification.; required with error Pick a reminder to continue.; mixed hint The selected matches disagree.; card group Match report format: Short, The score and the scorers. / Full, Every event, with the line-ups.; horizontal group Show matches at: Home, Away, Neutral ground; grid label Remind me one hour before). Framed as a page with 16px padding at 360 and 640. States: a grid of unchecked and checked by rest, hover, focus-visible, active, disabled and readonly (one-option groups); group-none, group-checked, group-support (descriptions and hint), group-option-hover, group-option-pressed, group-option-focus-visible, group-mixed (bulk edit, dashed circles), group-disabled, group-readonly, invalid, invalid-focus-visible, invalid-checked, group-horizontal, card-rest, card-checked, card-hover, card-focus-visible and card-checked-focus-visible. Numbers (light / dark), from shot pixels at scale 2 at 360, brand mint, a: circle 20px with a 2px border and a 10px dot (border-box, fixed in 00072d935); unchecked circle border (surface border) vs page 1.26 / 1.73; checked ring and dot (primary) 1.33 / 13.50; checked hover dot and ring (-hover via color-interactive; the lib hover rule skips a checked radio) 1.37 / 13.06, 1.03 from rest; active 2.24 / 8.01; focus ring and focused border (primary -focus), checked or unchecked, 1.37 / 13.06; card checked edge and ring (primary) 1.33 / 13.50; mixed dashed border (primary) 1.33 / 13.50; invalid circle border (danger) 4.83 / 3.71; disabled checked ring 2.12 / 1.65, disabled label 1.41 / 1.65 (exempt under 1.4.11). Decided rules that arise: Q88 (every radio focus ring in ink, the unchecked one too, since unlike the checkbox it is primary, not the surface text colour; the invalid ring takes the danger ink; the card ring in ink), Q99a (the checked circle border, the focused circle border, the mixed dashed border and the card checked and focus edge take light-dark(ink, primary); the checked dot is a mint fill, so it takes a 1px inset ink edge, an outline at -1px) and Q101 (a checked radio hovers to -active). The ink edge on a mint fill arises, so Q102 arises: b draws the dot edge 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: no new lib CSS bug; the radio circle box-sizing bug is fixed (00072d935, measured 40 sheet px = 20px). (1) WCAG 1.4.11: the unchecked circle border is 1.26 / 1.73 vs page, under 3:1, the only edge of an unchecked radio (the same open question as the checkbox box and the switch off track). Not drawn. (2) The required marker takes the error theme primary: 3.71:1 in dark, under 4.5:1; exempted here as in checkbox r1. (3) A checked radio has no hover rule of its own; only color-interactive shifts it to -hover, 1.03 from rest, so hover on a checked radio is invisible in a; Q101 fixes it in b and c. (4) Readonly draws exactly like rest, as with the checkbox. (5) A disabled group dims its options (opacity 0.5 and the disabled label colour, both at once) but not the group label, which keeps 7.81 in light; the same holds for the checkbox group. Later rounds, left out here: the sizes sm and lg, the card with the control at start and the card slots, a coloured (non-brand) radio, the warning state, a disabled option inside an enabled group, a pending (aria-busy) group, long labels that wrap, RTL and the check animation.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...gridStates,
+    'group-none': { group: reminderGroup(null) },
+    'group-checked': { group: reminderGroup(0) },
+    'group-support': {
+      group: {
+        id: 'support',
+        label: 'Kick-off reminder',
+        hint: 'We send it as a push notification.',
+        options: [
+          { label: 'One hour before', description: 'Time to get to the ground.', checked: true },
+          { label: 'At kick-off', description: 'Only when the whistle goes.' },
+        ],
+      },
+    },
+    'group-option-hover': { group: reminderGroup(0, { force: ['hover'] }) },
+    'group-option-pressed': { group: reminderGroup(0, { force: ['hover', 'active'] }) },
+    'group-option-focus-visible': { group: reminderGroup(1, { force: ['focus-visible'] }) },
+    'group-mixed': { group: reminderGroup(0, { mixed: true, hint: 'The selected matches disagree.' }) },
+    'group-disabled': { group: reminderGroup(0, { disabled: true }) },
+    'group-readonly': { group: reminderGroup(0, { readonly: true }) },
+    invalid: { group: reminderGroup(null, INVALID) },
+    'invalid-focus-visible': { group: reminderGroup(null, { ...INVALID, force: ['focus-visible'] }) },
+    'invalid-checked': { group: reminderGroup(1, INVALID) },
+    'group-horizontal': {
+      group: {
+        id: 'venue',
+        label: 'Show matches at',
+        orientation: 'horizontal',
+        options: [{ label: 'Home', checked: true }, { label: 'Away' }, { label: 'Neutral ground' }],
+      },
+    },
+    'card-rest': { group: formatGroup(null) },
+    'card-checked': { group: formatGroup(0) },
+    'card-hover': { group: formatGroup(1, ['hover']) },
+    'card-focus-visible': { group: formatGroup(1, ['focus-visible']) },
+    'card-checked-focus-visible': { group: formatGroup(0, ['focus-visible']) },
+  },
+  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: 'sm', reason: 'Not drawn in this round: sizes are a later round.' },
+    { option: 'size', value: 'md', reason: 'The default size, which every state draws without setting it.' },
+    { option: 'size', value: 'lg', reason: 'Not drawn in this round: sizes are a later round.' },
+    {
+      option: 'orientation',
+      value: 'vertical',
+      reason: 'The default orientation, drawn by the group-* states, outside the grid.',
+    },
+    { option: 'orientation', value: 'horizontal', reason: 'Drawn as the group-horizontal state, outside the grid.' },
+    { option: 'variant', value: 'plain', reason: 'The default variant, which the grid draws without setting it.' },
+    { 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: {
+    radio: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  widths: [360, 640],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${marked(radioGroup(props.group))}</div>`,
+      styles: [radioGroupStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/scheduler/scheduler.ts

@@ -231,9 +231,10 @@ export default definePart({
     agenda: { view: 'agenda' },
   },
   widths: [560, 800, 1200],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${skipClipped(render(props))}</div>`,
+      body: skipClipped(render(props)),
       styles: [schedulerStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/scrollable/scrollable.ts

@@ -94,7 +94,7 @@ const render = (props: Props) => {
 
 export default definePart({
   note: 'scale of the decided shape, Q182, lead merge',
-  madeBy: ['claude-opus-5-5'],
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
   states: {
     'horizontal-start': {},
     'horizontal-middle': { position: 'middle' },
@@ -127,7 +127,7 @@ export default definePart({
   widths: [480],
   render: (props: Props) =>
     drawing({
-      body: `<div class="scrollable-frame${props.itemSize ? ' scrollable-frame--sized' : ''}">${render(props)}</div>`,
+      body: `<div class="scrollable-frame ${props.itemSize ? 'scrollable-frame--sized' : ''}">${render(props)}</div>`,
       styles: [scrollableStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/scrollbar/scrollbar.ts

@@ -115,9 +115,10 @@ export default definePart({
     'auto-hidden': { layout: 'vertical', visible: false },
   },
   widths: [480],
+  frame: (body, props) => `<div class="scrollbar-frame"${props.layout === 'rtl' ? ' dir="rtl"' : ''}>${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="scrollbar-frame"${props.layout === 'rtl' ? ' dir="rtl"' : ''}><div class="scrollbar-wrapper">${render(props)}</div></div>`,
+      body: `<div class="scrollbar-wrapper">${render(props)}</div>`,
       styles: [scrollbarStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/select/shared/select-part.ts

@@ -5,6 +5,9 @@ import { interactionRows } from '@design-system';
 type FieldInteraction = 'hover' | 'active' | 'focus-visible';
 
 export type SelectProps = {
+  label?: string;
+  ariaLabel?: string;
+  options?: { value: string; label: string }[];
   value?: string;
   open?: boolean;
   active?: string;
@@ -64,12 +67,18 @@ export const selectBody = (props: SelectProps) =>
   markControl(
     formField({
       id: 'status',
-      label: 'Status',
+      label: props.label ?? 'Status',
       errorColor: 'danger',
       open: props.open,
       disabled: props.disabled,
       size: props.size,
-      control: select({ options: OPTIONS, value: props.value, active: props.active, placeholder: 'Pick a status' }),
+      control: select({
+        options: props.options ?? OPTIONS,
+        value: props.value,
+        active: props.active,
+        placeholder: 'Pick a status',
+        ariaLabel: props.ariaLabel,
+      }),
     }),
     props,
   );

package/design/sdk/components/select-panel/select-panel.ts

@@ -116,9 +116,10 @@ export default definePart({
   controls: {
     option: { kind: 'row', input: ['pointer', 'keyboard'], disabled: true },
   },
+  frame: (body) => `<div class="select-panel-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="select-panel-frame">${props.panel ? groupedPanel(props) : singleOption(props)}</div>`,
+      body: props.panel ? groupedPanel(props) : singleOption(props),
       styles: [selectStyles, styles].join('\n'),
     }),
 });

package/design/sdk/components/skeleton/skeleton.ts

@@ -42,9 +42,10 @@ export default definePart({
     static: { form: 'card', animated: false },
   },
   widths: [480],
+  frame: (body) => `<div class="skeleton-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="skeleton-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [skeletonStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/slider/slider.ts

@@ -78,9 +78,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">${slider(props.field)}</div>`,
+      body: slider(props.field),
       styles: [sliderStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/standings/standings.ts

@@ -122,9 +122,10 @@ export default definePart({
     'pick-locked': { view: 'pick', locked: true },
   },
   widths: [480, 800],
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${props.view === 'table' ? table(props) : pick(props)}</div>`,
+      body: props.view === 'table' ? table(props) : pick(props),
       styles: [standingsStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/stat-tile/stat-tile.ts

@@ -76,9 +76,10 @@ export default definePart({
     loading: { form: 'loading' },
   },
   widths: [480],
+  frame: (body) => `<div class="stat-tile-frame">${body}</div>`,
   render: ({ form }: Props) =>
     drawing({
-      body: `<div class="stat-tile-frame">${card({ content: statTile(FORMS[form]) })}</div>`,
+      body: card({ content: statTile(FORMS[form]) }),
       styles: [cardStyles, statTileStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/stream/stream.ts

@@ -30,9 +30,14 @@ export default definePart({
   controls: {
     action: { kind: 'button', input: ['pointer', 'keyboard'] },
   },
+  frame: (body) => `<div class="t-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="t-frame">${streamPlayerSlot({ state: props.state, player: VIDEO, buttonAttributes: buttonAttributes(props.button) }).replace('<et-spinner ', '<et-spinner data-et-skip="CLIPPED" ')}</div>`,
+      body: streamPlayerSlot({
+        state: props.state,
+        player: VIDEO,
+        buttonAttributes: buttonAttributes(props.button),
+      }).replace('<et-spinner ', '<et-spinner data-et-skip="CLIPPED" '),
       styles: [streamStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/switch/switch.css

@@ -1,6 +1,7 @@
 @layer components {
   et-switch:not([aria-checked='true']):not([data-indeterminate]) .et-switch-track {
-    box-shadow: inset 0 0 0 1px var(--et-surface-interaction-solid);
+    box-shadow: none;
+    background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 38%, transparent);
   }
 
   @media (hover: hover) {
@@ -10,7 +11,8 @@
     :where(et-choice-field:has(.et-choice-field-label-area:hover))
       et-switch:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate]) {
       .et-switch-track {
-        box-shadow: inset 0 0 0 1px var(--et-surface-interaction-hover-solid);
+        box-shadow: none;
+        background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 38%, transparent);
       }
     }
   }

package/design/sdk/components/switch/switch.ts

@@ -28,7 +28,7 @@ const columns = ['rest', ...INTERACTIONS, 'disabled'] as const;
 
 export default definePart({
   note: 'The SDK switch, drawn by its mock from @ethlete/components/design: alone off, on and indeterminate in every interaction, and inside an et-choice-field with a label in each size and as a card. The label area skips CLIPPED: its 1.2 line height rounds the 12 and 16 px line box down by under a pixel, with no glyph cut.',
-  madeBy: ['claude-opus-5-5'],
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
   states: {
     ...rowStates,
     'label-sm': { label: 'Email me updates', size: 'sm', checked: true },
@@ -54,7 +54,7 @@ export default definePart({
       body: switchControl({
         ...options,
         color: 'brand',
-        attributes: ['data-et-control="switch"', interaction && `data-et-force="${interaction}"`]
+        attributes: [options.attributes, 'data-et-control="switch"', interaction && `data-et-force="${interaction}"`]
           .filter(Boolean)
           .join(' '),
       }).replace('class="et-choice-field-label-area', 'data-et-skip="CLIPPED" class="et-choice-field-label-area'),

package/design/sdk/components/table/table.ts

@@ -152,9 +152,10 @@ export default definePart({
     'align-center': { center: 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: [tableStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/textarea/textarea.ts

@@ -22,7 +22,7 @@ const INVALID = {
 
 export default definePart({
   note: 'scale of the decided shape, Q182, lead merge',
-  madeBy: ['claude-opus-5-5'],
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
   states: {
     empty: message({ placeholder: undefined }),
     placeholder: message(),
@@ -54,11 +54,12 @@ export default definePart({
     'size-lg': message({ value: VALUE, size: 'lg' }),
   },
   widths: [320, 360, 640],
+  frame: (body, props) => `<div class="t-frame ${props.scrolled ? 't-scrolled' : ''}">${body}</div>`,
   render: (props: Props) =>
     drawing({
       body: props.scrolled
-        ? `<div class="t-frame t-scrolled">${textareaField(props.field).replace('<div class="et-form-field-control-frame"', '$& data-et-skip="CLIPPED"')}</div>`
-        : `<div class="t-frame">${textareaField(props.field)}</div>`,
+        ? textareaField(props.field).replace('<div class="et-form-field-control-frame"', '$& data-et-skip="CLIPPED"')
+        : textareaField(props.field),
       styles: [textareaFieldStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/timeline/timeline.ts

@@ -67,7 +67,7 @@ const items = ({ markers, themedDots, time = true, compact, long, count = EVENTS
 
 export default definePart({
   note: 'Decided rules only',
-  madeBy: ['claude-opus-5-5'],
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
   states: {
     default: {},
     'with-markers': { markers: true },
@@ -81,7 +81,7 @@ export default definePart({
   widths: [480],
   render: (props: Props) =>
     drawing({
-      body: `<div class="timeline-frame${props.compact ? ' timeline-frame--compact' : ''}">${timeline({ items: items(props) })}</div>`,
+      body: `<div class="timeline-frame ${props.compact ? 'timeline-frame--compact' : ''}">${timeline({ items: items(props) })}</div>`,
       styles: [timelineStyles, frame].join('\n'),
     }),
 });

package/design/sdk/components/toolbar/toolbar.ts

@@ -79,9 +79,10 @@ export default definePart({
   controls: Object.fromEntries(
     BUTTONS.map(({ control }) => [control, { kind: 'button', input: ['pointer', 'keyboard'] }]),
   ),
+  frame: (body) => `<div class="toolbar-frame">${body}</div>`,
   render: (props: Props) =>
     drawing({
-      body: `<div class="toolbar-frame">${render(props)}</div>`,
+      body: render(props),
       styles: [toolbarStyles, frame].join('\n'),
     }),
 });

package/design/sdk/foundations/colors/colors.css

@@ -11,6 +11,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 0;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -44,6 +46,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 1;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -77,6 +81,8 @@
       --et-surface-type: light;
       --et-surface-elevation: 0;
       --et-shadow-color-rgb: 23 23 23;
+      --et-surface-color-theme-variants:
+        brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
       --et-surface-interaction: 115 115 115;
       --et-surface-interaction-hover: 64 64 64;
       --et-surface-interaction-focus: 64 64 64;
@@ -114,6 +120,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 0;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -259,6 +267,7 @@
   }
 
   .et-color--danger {
+    --et-color-theme-type: error;
     --et-color-primary: 220 38 38;
     --et-color-primary-hover: 185 28 28;
     --et-color-primary-focus: 185 28 28;
@@ -279,6 +288,7 @@
   }
 
   .et-color--warning {
+    --et-color-theme-type: warning;
     --et-color-primary: 217 119 6;
     --et-color-primary-hover: 245 158 11;
     --et-color-primary-focus: 245 158 11;
@@ -525,6 +535,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 1;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;
@@ -558,6 +570,8 @@
       --et-surface-type: light;
       --et-surface-elevation: 1;
       --et-shadow-color-rgb: 23 23 23;
+      --et-surface-color-theme-variants:
+        brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
       --et-surface-interaction: 115 115 115;
       --et-surface-interaction-hover: 64 64 64;
       --et-surface-interaction-focus: 64 64 64;
@@ -593,6 +607,8 @@
     --et-surface-type: light;
     --et-surface-elevation: 1;
     --et-shadow-color-rgb: 23 23 23;
+    --et-surface-color-theme-variants:
+      brand brand-on-light, danger danger-on-light, success success-on-light, warning warning-on-light;
     --et-surface-interaction: 115 115 115;
     --et-surface-interaction-hover: 64 64 64;
     --et-surface-interaction-focus: 64 64 64;

package/design/sdk/foundations/colors/colors.ts

@@ -171,7 +171,7 @@ const render = (props: Props): Drawing => {
 
 export default definePart<Props>({
   note: 'The SDK colour tokens: a light and a dark surface, the demo colour themes brand, danger and warning with their on-light variants, and the AA contrast of text and fills. Every frame loads it before the part styles. Generated by tools/scripts/generate-sdk-tokens.mjs from the Storybook themes; never edit the CSS by hand.',
-  madeBy: ['claude-opus-5-5'],
+  madeBy: ['claude-opus-5-5', 'claude-sonnet-5-5'],
   states: {
     'surface-light': { group: 'surface', surface: 'light' },
     'surface-dark': { group: 'surface', surface: 'dark' },

package/design/sdk/foundations/colors/shared/contrast.ts

@@ -38,7 +38,7 @@ const pair = (label: string, fill: string, ink: string, fixed: boolean) => {
   const ratio = contrastRatio(fill, ink);
 
   return html`<span class="sdk-pair" style="background: rgb(${fill}); color: rgb(${ink})">Aa</span>
-    <span class="sdk-pair-label${fixed ? ' sdk-fixed' : ''}">${label}</span>
+    <span class="sdk-pair-label ${fixed ? 'sdk-fixed' : ''}">${label}</span>
     <code class="sdk-value">${fill} / ${ink}</code>
     <strong class="sdk-ratio" data-pass="${ratio >= AA}"
       >${ratio.toFixed(2)}:1 ${ratio >= AA ? 'AA' : 'below AA'}</strong

package/design/sdk/lint-baseline.json

@@ -0,0 +1,6 @@
+{
+  "components/breadcrumb/breadcrumb.ts": { "@typescript-eslint/no-non-null-assertion": 1 },
+  "components/tabs/tabs.ts": { "@typescript-eslint/no-non-null-assertion": 1 },
+  "components/timeline/timeline.ts": { "@typescript-eslint/no-non-null-assertion": 1 },
+  "components/toolbar/toolbar.ts": { "@typescript-eslint/no-non-null-assertion": 1 }
+}