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

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

@@ -0,0 +1,64 @@
+import { textareaField, type TextareaFieldMockOptions, textareaFieldStyles } from '@ethlete/components/design/textarea';
+import { definePart, drawing } from '@design-system';
+import frame from './textarea.css?inline';
+
+type Props = { field: TextareaFieldMockOptions; scrolled?: boolean };
+
+const message = (extra: Partial<TextareaFieldMockOptions> = {}): Props => ({
+  field: { id: 'message', label: 'Message', placeholder: 'Write something…', ...extra },
+});
+
+const VALUE = 'Hi Lena,\nthe venue moved to Hall B.\nKick-off stays at 18:00.';
+
+const LONG =
+  'Hi Lena,\nthe venue moved to Hall B, next to the north entrance.\nKick-off stays at 18:00, doors open at 17:15.\nPlease bring your team list and the signed waiver for every player.\nParking is free after 17:00 on the east lot.\nThe referee briefing starts at 17:30 in room 2.\nSee you there,\nJonas';
+
+const INVALID = {
+  required: true,
+  value: 'Hi',
+  error: 'Write at least 20 characters.',
+  errorColor: 'danger',
+} satisfies Partial<TextareaFieldMockOptions>;
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    empty: message({ placeholder: undefined }),
+    placeholder: message(),
+    filled: message({ value: VALUE }),
+    hover: message({ force: 'hover' }),
+    'hover-filled': message({ value: VALUE, force: 'hover' }),
+    focus: message({ focused: true, force: 'focus-visible' }),
+    'focus-filled': message({ value: VALUE, focused: true, force: 'focus-visible' }),
+    'focus-hover': message({ value: VALUE, focused: true, force: ['hover', 'focus-visible'] }),
+    hint: message({ hint: 'Visible to everyone on the team.' }),
+    description: message({ description: 'Shown above the event on the team page.' }),
+    required: message({ required: true, hint: 'Visible to everyone on the team.' }),
+    invalid: message(INVALID),
+    'invalid-hover': message({ ...INVALID, force: 'hover' }),
+    'invalid-focus': message({ ...INVALID, focused: true, force: 'focus-visible' }),
+    disabled: message({ disabled: true }),
+    'disabled-filled': message({ value: VALUE, disabled: true }),
+    readonly: message({ value: VALUE, readonly: true }),
+    'readonly-focus': message({ value: VALUE, readonly: true, focused: true, force: 'focus-visible' }),
+    'long-autosize': message({ value: LONG }),
+    'long-max-rows': message({ value: LONG, maxRows: 4 }),
+    'long-max-rows-scrolled': { ...message({ value: LONG, maxRows: 4 }), scrolled: true },
+    'manual-resize': message({ value: VALUE, autosize: false, rows: 4 }),
+    'manual-resize-overflow': message({ value: LONG, autosize: false, rows: 4 }),
+    'single-row': message({ rows: 1, placeholder: 'Add a note…' }),
+    mixed: message({ value: VALUE, mixed: true, mixedLabel: 'Mixed values' }),
+    'no-label': message({ label: undefined, placeholder: 'Add a comment…' }),
+    'size-sm': message({ value: VALUE, size: 'sm' }),
+    'size-lg': message({ value: VALUE, size: 'lg' }),
+  },
+  widths: [320, 360, 640],
+  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>`,
+      styles: [textareaFieldStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/timeline/timeline.css

@@ -0,0 +1,30 @@
+.timeline-frame {
+  max-inline-size: 520px;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+
+  .timeline-label,
+  .timeline-description {
+    margin: 0;
+  }
+
+  .timeline-description {
+    color: var(--et-surface-color-muted-solid);
+    font-size: 1.2rem;
+  }
+}
+
+.timeline-frame--compact .et-timeline {
+  --et-timeline-gap: 8px;
+  --et-timeline-rail-gap: 8px;
+  --et-timeline-marker-size: 14px;
+  --et-timeline-dot-size: 6px;
+}
+
+@layer components {
+  .timeline-frame .et-timeline-item {
+    --et-timeline-marker-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+}

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

@@ -0,0 +1,87 @@
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { iconMarkup } from '@ethlete/components/design/icon';
+import { timeline, timelineStyles, type TimelineMockItem } from '@ethlete/components/design/timeline';
+import { definePart, drawing } from '@design-system';
+import frame from './timeline.css?inline';
+
+const icon = (name: string) => SDK_ICONS.find((each) => each.name === name)!;
+
+type Props = {
+  markers?: boolean;
+  themedDots?: boolean;
+  time?: boolean;
+  compact?: boolean;
+  long?: boolean;
+  count?: number;
+};
+
+const EVENTS = [
+  {
+    time: '18:30',
+    label: 'Squad announced',
+    description: 'Both line-ups published 60 minutes before kickoff.',
+    icon: 'et-clock',
+    color: undefined,
+  },
+  {
+    time: "23'",
+    label: 'Goal by A. Rossi',
+    description: 'Assisted by M. Keller after a counter down the left.',
+    icon: 'et-circle-check',
+    color: 'warning',
+  },
+  {
+    time: "67'",
+    label: 'Second yellow for L. Turner',
+    description: 'Sent off; the home side plays the rest a player down.',
+    icon: 'et-triangle-exclamation',
+    color: 'danger',
+  },
+  {
+    time: "90+4'",
+    label: 'Fulltime - 2:1',
+    description: 'The visitors take all three points and go top of the table.',
+    icon: 'et-trophy',
+    color: 'brand',
+  },
+];
+
+const LONG_LABEL = 'Match report filed by the referee with notes on both sendings-off and the crowd incident';
+const LONG_DESCRIPTION =
+  'league.example.com/matches/20261031_home_visitors_report_attachments_referee_statement_final.pdf';
+
+const items = ({ markers, themedDots, time = true, compact, long, count = EVENTS.length }: Props) =>
+  EVENTS.slice(0, count).map((event, index): TimelineMockItem => {
+    const label = long && index === 1 ? LONG_LABEL : event.label;
+    const description = long && index === 1 ? LONG_DESCRIPTION : event.description;
+
+    return {
+      time: time ? event.time : undefined,
+      marker: markers ? iconMarkup(icon(event.icon)) : undefined,
+      color: markers || themedDots ? event.color : undefined,
+      content:
+        `<p class="timeline-label">${label}</p>` +
+        (compact ? '' : `<p class="timeline-description">${description}</p>`),
+    };
+  });
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    'with-markers': { markers: true },
+    'themed-dots': { themedDots: true },
+    compact: { compact: true },
+    'compact-markers': { compact: true, markers: true },
+    'no-time': { time: false },
+    'long-content': { long: true, markers: true },
+    single: { count: 1 },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      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.css

@@ -0,0 +1,24 @@
+.toolbar-frame {
+  display: flex;
+  align-items: flex-start;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+
+  .et-toolbar {
+    --et-toolbar-background: var(--et-surface-background-solid);
+
+    inline-size: fit-content;
+    border: 1px solid var(--et-surface-border-solid);
+  }
+}
+
+@layer components {
+  .toolbar-frame .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .toolbar-frame .et-icon-button[data-pressed='true'] {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

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

@@ -0,0 +1,87 @@
+import { toolbar, toolbarStyles, type ToolbarMockItem } from '@ethlete/components/design/toolbar';
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { definePart, drawing } from '@design-system';
+import frame from './toolbar.css?inline';
+
+const icon = (name: string) => SDK_ICONS.find((each) => each.name === name)!;
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+type Control = 'bold' | 'italic' | 'underline' | 'bulleted' | 'numbered' | 'quote' | 'link';
+
+type Props = {
+  orientation?: 'horizontal' | 'vertical';
+  /** The controls an interaction is forced on. */
+  forced?: Control[];
+  interaction?: Interaction;
+  italicDisabled?: boolean;
+  tabStop?: Control;
+  size?: 'xs' | 'md' | 'lg' | 'xl';
+};
+
+const BUTTONS: { control: Control; icon: (typeof SDK_ICONS)[number]; label: string; pressed?: boolean }[] = [
+  { control: 'bold', icon: icon('et-bold'), label: 'Bold', pressed: true },
+  { control: 'italic', icon: icon('et-italic'), label: 'Italic', pressed: false },
+  { control: 'underline', icon: icon('et-underline'), label: 'Underline', pressed: false },
+  { control: 'bulleted', icon: icon('et-list-bulleted'), label: 'Bulleted list', pressed: true },
+  { control: 'numbered', icon: icon('et-list-numbered'), label: 'Numbered list', pressed: false },
+  { control: 'quote', icon: icon('et-quote'), label: 'Quote', pressed: false },
+  { control: 'link', icon: icon('et-link'), label: 'Link' },
+];
+
+const GROUP_ENDS: Control[] = ['underline', 'numbered'];
+
+const items = ({ forced = [], interaction, italicDisabled }: Props) =>
+  BUTTONS.flatMap(({ control, icon, label, pressed }): ToolbarMockItem[] => {
+    const attributes = [
+      `data-et-control="${control}" data-can-animate`,
+      interaction && forced.includes(control) && `data-et-force="${interaction}"`,
+    ]
+      .filter(Boolean)
+      .join(' ');
+    const button: ToolbarMockItem = {
+      type: 'button',
+      icon,
+      label,
+      pressed,
+      disabled: control === 'italic' && italicDisabled,
+      attributes,
+    };
+
+    return GROUP_ENDS.includes(control) ? [button, { type: 'divider' }] : [button];
+  });
+
+const render = (props: Props) => {
+  const list = items(props);
+  const tabStop = props.tabStop
+    ? list.findIndex((item) => item.type === 'button' && item.attributes?.includes(`"${props.tabStop}"`))
+    : undefined;
+
+  return toolbar({ items: list, orientation: props.orientation, size: props.size, tabStop });
+};
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    hover: { interaction: 'hover', forced: ['bold', 'italic'] },
+    active: { interaction: 'active', forced: ['bold', 'italic'] },
+    'focus-visible': { interaction: 'focus-visible', forced: ['bold'] },
+    'focus-visible-unpressed': { interaction: 'focus-visible', forced: ['italic'], tabStop: 'italic' },
+    disabled: { italicDisabled: true },
+    vertical: { orientation: 'vertical' },
+    'size-xs': { size: 'xs' },
+    'size-md': { size: 'md' },
+    'size-lg': { size: 'lg' },
+    'size-xl': { size: 'xl' },
+  },
+  widths: [528],
+  controls: Object.fromEntries(
+    BUTTONS.map(({ control }) => [control, { kind: 'button', input: ['pointer', 'keyboard'] }]),
+  ),
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="toolbar-frame">${render(props)}</div>`,
+      styles: [toolbarStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/tooltip/tooltip.css

@@ -0,0 +1,15 @@
+.sdk-tooltip-stage {
+  display: inline-block;
+  padding: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .et-tooltip-panel {
+    --et-surface-ring-solid: color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid));
+    --et-overlay-arrow-border: var(--et-surface-ring-solid);
+  }
+
+  .et-tooltip {
+    --_et-floating-tip-border: var(--et-surface-ring-solid);
+  }
+}

package/design/sdk/components/tooltip/tooltip.ts

@@ -0,0 +1,28 @@
+import { tooltip, type TooltipMockOptions, tooltipStyles } from '@ethlete/components/design/tooltip';
+import { definePart, drawing } from '@design-system';
+import edge from './tooltip.css?inline';
+
+const SHORT = 'Copy link';
+const LONG = 'Everyone with the link can view this board. Comments stay private to the members of the workspace.';
+const TEMPLATE = '<p><strong>Shift + C</strong></p><p>Copies the link to this board. Anyone with it can view.</p>';
+
+export default definePart<TooltipMockOptions>({
+  note: 'The SDK tooltip, drawn by its mock from @ethlete/components/design: the open pane with its arrow on the inherited surface. Short text, long text that wraps at the 34ch max width, template content, and each side the pane opens on, plus a -start and an -end placement with the arrow 20 px in. In the dark scheme the pane border and the arrow edge are a 1 px ring in --et-surface-ring-solid, 24 % --et-surface-color-solid over the fill, as in the foundations/elevation round. The token is defined here; the generator does not emit it yet.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    short: { text: SHORT },
+    long: { text: LONG },
+    template: { content: TEMPLATE },
+    top: { text: SHORT, placement: 'top' },
+    right: { text: SHORT, placement: 'right' },
+    bottom: { text: SHORT, placement: 'bottom' },
+    left: { text: SHORT, placement: 'left' },
+    'bottom-start': { text: 'Copy the link to this board', placement: 'bottom-start' },
+    'top-end': { text: 'Copy the link to this board', placement: 'top-end' },
+  },
+  render: (options: TooltipMockOptions) =>
+    drawing({
+      body: `<div class="sdk-tooltip-stage">${tooltip(options)}</div>`,
+      styles: [tooltipStyles, edge].join('\n'),
+    }),
+});

package/design/sdk/components/tree/selected-tint.css

@@ -0,0 +1,15 @@
+@layer components {
+  @container style(--et-surface-type: light) {
+    .et-tree:not(:where([aria-multiselectable])) .et-tree-node:where([data-selected]) {
+      background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 32%, transparent);
+
+      &:not(:where([aria-disabled])):hover {
+        background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 38%, transparent);
+      }
+
+      &:not(:where([aria-disabled])):active {
+        background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 44%, transparent);
+      }
+    }
+  }
+}

package/design/sdk/components/tree/tree.ts

@@ -0,0 +1,70 @@
+import { tree, TreeMockItem, treeStyles } from '@ethlete/components/design/tree';
+import { definePart, drawing, interactionRows } from '@design-system';
+import selectedTint from './selected-tint.css?inline';
+
+type RowInteraction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  items: TreeMockItem[];
+  expanded?: string[];
+  value?: string;
+  active?: string;
+  forced?: { row: string; interaction: RowInteraction };
+};
+
+const FILES: TreeMockItem[] = [
+  {
+    label: 'src',
+    children: [
+      {
+        label: 'app',
+        children: [{ label: 'app.component.ts' }, { label: 'app.config.ts' }, { label: 'legacy.ts', disabled: true }],
+      },
+      { label: 'assets', children: [{ label: 'logo.svg' }] },
+      { label: 'main.ts' },
+    ],
+  },
+  { label: 'docs', children: [{ label: 'getting-started.md' }] },
+  { label: 'package.json' },
+];
+
+const SHORT: TreeMockItem[] = [{ label: 'docs' }, { label: 'notes.md' }, { label: 'README.md' }];
+
+const { states, grid } = interactionRows(
+  {
+    row: { items: SHORT },
+    selected: { items: SHORT, value: 'notes.md' },
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'active', 'focus-visible'],
+    force: (props: Props, interaction: RowInteraction): Props => ({
+      ...props,
+      active: 'notes.md',
+      forced: { row: 'notes.md', interaction },
+    }),
+  },
+);
+
+export default definePart({
+  note: 'The SDK tree, drawn by its mock from @ethlete/components/design. Rows keep a roving tab stop, so a focused row draws the real :focus-visible ring.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...states,
+    collapsed: { items: FILES },
+    expanded: { items: FILES, expanded: ['src', 'src/app', 'docs'], value: 'src/app/app.config.ts' },
+  },
+  grid,
+  widths: [320],
+  controls: {
+    row: { kind: 'row', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: ({ forced, ...props }: Props) =>
+    drawing({
+      body: tree({
+        ...props,
+        label: 'Files',
+        rowAttributes: forced && { [forced.row]: `data-et-force="${forced.interaction}"` },
+      }).replaceAll('role="treeitem"', 'data-et-control="row" role="treeitem"'),
+      styles: [treeStyles, selectedTint].join('\n'),
+    }),
+});

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

@@ -51,7 +51,6 @@
     --et-surface-interaction-disabled: 180 180 180;
   }
 
-  .et-surface--default-dark,
   .et-surface--dark-elevated {
     --et-surface-background: 38 38 38;
     --et-surface-color: 250 250 250;
@@ -385,16 +384,34 @@
 
 @layer base {
   @media (prefers-color-scheme: light) {
-    :root {
+    :root,
+    .et-color--brand {
       --et-color-primary-ink: 4 120 87;
       --et-color-primary-ink-hover: 6 95 70;
       --et-color-primary-ink-focus: 6 95 70;
       --et-color-primary-ink-active: 6 78 59;
       --et-color-primary-ink-disabled: 130 200 170;
     }
+
+    .et-color--danger {
+      --et-color-primary-ink: 185 28 28;
+      --et-color-primary-ink-hover: 153 27 27;
+      --et-color-primary-ink-focus: 153 27 27;
+      --et-color-primary-ink-active: 127 29 29;
+      --et-color-primary-ink-disabled: 220 150 150;
+    }
+
+    .et-color--warning {
+      --et-color-primary-ink: 146 64 14;
+      --et-color-primary-ink-hover: 120 53 15;
+      --et-color-primary-ink-focus: 120 53 15;
+      --et-color-primary-ink-active: 69 26 3;
+      --et-color-primary-ink-disabled: 220 170 120;
+    }
   }
 
-  :root.et-scheme--light {
+  :root.et-scheme--light,
+  :where(:root.et-scheme--light) .et-color--brand {
     --et-color-primary-ink: 4 120 87;
     --et-color-primary-ink-hover: 6 95 70;
     --et-color-primary-ink-focus: 6 95 70;
@@ -402,13 +419,100 @@
     --et-color-primary-ink-disabled: 130 200 170;
   }
 
-  :root.et-scheme--dark {
+  :where(:root.et-scheme--light) .et-color--danger {
+    --et-color-primary-ink: 185 28 28;
+    --et-color-primary-ink-hover: 153 27 27;
+    --et-color-primary-ink-focus: 153 27 27;
+    --et-color-primary-ink-active: 127 29 29;
+    --et-color-primary-ink-disabled: 220 150 150;
+  }
+
+  :where(:root.et-scheme--light) .et-color--warning {
+    --et-color-primary-ink: 146 64 14;
+    --et-color-primary-ink-hover: 120 53 15;
+    --et-color-primary-ink-focus: 120 53 15;
+    --et-color-primary-ink-active: 69 26 3;
+    --et-color-primary-ink-disabled: 220 170 120;
+  }
+
+  :root.et-scheme--dark,
+  :where(:root.et-scheme--dark) .et-color--brand {
+    --et-color-primary-ink: 0 255 161;
+    --et-color-primary-ink-hover: 0 255 161;
+    --et-color-primary-ink-focus: 0 255 161;
+    --et-color-primary-ink-active: 0 255 161;
+    --et-color-primary-ink-disabled: 0 255 161;
+  }
+
+  :where(:root.et-scheme--dark) .et-color--danger {
+    --et-color-primary-ink: 248 113 113;
+    --et-color-primary-ink-hover: 252 165 165;
+    --et-color-primary-ink-focus: 252 165 165;
+    --et-color-primary-ink-active: 239 68 68;
+    --et-color-primary-ink-disabled: 153 75 75;
+  }
+
+  :where(:root.et-scheme--dark) .et-color--warning {
+    --et-color-primary-ink: 245 158 11;
+    --et-color-primary-ink-hover: 251 191 36;
+    --et-color-primary-ink-focus: 251 191 36;
+    --et-color-primary-ink-active: 217 119 6;
+    --et-color-primary-ink-disabled: 133 77 14;
+  }
+
+  .et-surface--light.et-color--brand,
+  .et-surface--light .et-color--brand {
+    --et-color-primary-ink: 4 120 87;
+    --et-color-primary-ink-hover: 6 95 70;
+    --et-color-primary-ink-focus: 6 95 70;
+    --et-color-primary-ink-active: 6 78 59;
+    --et-color-primary-ink-disabled: 130 200 170;
+  }
+
+  .et-surface--light.et-color--danger,
+  .et-surface--light .et-color--danger {
+    --et-color-primary-ink: 185 28 28;
+    --et-color-primary-ink-hover: 153 27 27;
+    --et-color-primary-ink-focus: 153 27 27;
+    --et-color-primary-ink-active: 127 29 29;
+    --et-color-primary-ink-disabled: 220 150 150;
+  }
+
+  .et-surface--light.et-color--warning,
+  .et-surface--light .et-color--warning {
+    --et-color-primary-ink: 146 64 14;
+    --et-color-primary-ink-hover: 120 53 15;
+    --et-color-primary-ink-focus: 120 53 15;
+    --et-color-primary-ink-active: 69 26 3;
+    --et-color-primary-ink-disabled: 220 170 120;
+  }
+
+  .et-surface--dark.et-color--brand,
+  .et-surface--dark .et-color--brand {
     --et-color-primary-ink: 0 255 161;
     --et-color-primary-ink-hover: 0 255 161;
     --et-color-primary-ink-focus: 0 255 161;
     --et-color-primary-ink-active: 0 255 161;
     --et-color-primary-ink-disabled: 0 255 161;
   }
+
+  .et-surface--dark.et-color--danger,
+  .et-surface--dark .et-color--danger {
+    --et-color-primary-ink: 248 113 113;
+    --et-color-primary-ink-hover: 252 165 165;
+    --et-color-primary-ink-focus: 252 165 165;
+    --et-color-primary-ink-active: 239 68 68;
+    --et-color-primary-ink-disabled: 153 75 75;
+  }
+
+  .et-surface--dark.et-color--warning,
+  .et-surface--dark .et-color--warning {
+    --et-color-primary-ink: 245 158 11;
+    --et-color-primary-ink-hover: 251 191 36;
+    --et-color-primary-ink-focus: 251 191 36;
+    --et-color-primary-ink-active: 217 119 6;
+    --et-color-primary-ink-disabled: 133 77 14;
+  }
 }
 
 @layer base {

package/design/sdk/foundations/elevation/elevation.css

@@ -0,0 +1,6 @@
+@media (prefers-color-scheme: dark) {
+  .sdk-ring {
+    --et-surface-ring-solid: color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid));
+    --sdk-elevation-edge: var(--et-surface-ring-solid);
+  }
+}

package/design/sdk/foundations/elevation/elevation.ts

@@ -0,0 +1,11 @@
+import { definePart } from '@design-system';
+import { ELEVATION_STATES, elevationScene, type ElevationProps } from './shared/elevation/scene';
+import edge from './elevation.css?inline';
+
+export default definePart<ElevationProps>({
+  note: 'How the SDK lifts things off the base surface: a card, an elevated panel and an overlay pane (the select panel mock), side by side and as a pane over a panel. Fills come from the elevated surface tokens; no background colour differs from the product. In the dark scheme a 1 px ring in --et-surface-ring-solid (24 % --et-surface-color-solid over the fill) replaces the border colour. The token is defined here; the generator does not emit it yet.',
+  madeBy: ['claude-opus-5-5'],
+  states: ELEVATION_STATES,
+  render: (props: ElevationProps) =>
+    elevationScene(props, { card: 'sdk-ring', panel: 'sdk-ring', pane: 'sdk-ring' }, edge),
+});