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

package/design/scrollable.ts

@@ -0,0 +1,218 @@
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import buttonsBase from '../src/lib/scrollable/headless/scrollable-buttons.component.css?inline';
+import footerBase from '../src/lib/scrollable/headless/scrollable-footer.css?inline';
+import masksBase from '../src/lib/scrollable/headless/scrollable-masks.component.css?inline';
+import navigationBase from '../src/lib/scrollable/headless/scrollable-navigation.component.css?inline';
+import scrollableBase from '../src/lib/scrollable/scrollable.component.css?inline';
+import { buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type ScrollableMockItem = {
+  /** The item's inner HTML. */
+  content: string;
+  /** Extra attributes on the item, e.g. a class, a style or design markers. */
+  attributes?: string;
+  /** The tag the consumer projects. Left out, `div`. */
+  tag?: string;
+  /** Draws `et-scrollable-item--not-intersecting`, as `etScrollableDarken` does for an item out of view. */
+  notIntersecting?: boolean;
+};
+
+export type ScrollableMockOptions = {
+  items: ScrollableMockItem[];
+  direction?: 'horizontal' | 'vertical';
+  /** Draws `et-scrollable--can-scroll`. Left out, the content overflows. */
+  canScroll?: boolean;
+  /** The scroll position the directive reads: it decides the start and end classes. Left out, `start`. */
+  position?: 'start' | 'middle' | 'end';
+  /** Draws `et-scrollable--has-partial-items`. Left out, true while the content can scroll and masks render. */
+  partialItems?: boolean;
+  /** Left out, the masks render, as `renderMasks` defaults to. */
+  renderMasks?: boolean;
+  maskVariant?: 'gradient' | 'border';
+  /** Where `etScrollableButtons` renders its buttons. Left out, no buttons. */
+  buttons?: 'inside' | 'footer';
+  stickyButtons?: boolean;
+  /** Extra attributes on the start button, e.g. design markers. */
+  startButtonAttributes?: string;
+  /** Extra attributes on the end button, e.g. design markers. */
+  endButtonAttributes?: string;
+  /** The dot index `etScrollableNavigation` marks active. Left out, no navigation. */
+  navigationActive?: number;
+  /** Draws `et-scrollable--darken-non-intersecting-items`, as `etScrollableDarken` does. */
+  darken?: boolean;
+  /** Draws the `snap` attributes `etScrollableSnap` sets. */
+  snap?: boolean;
+  /** A color theme name the app registers. Left out, the scrollable takes the color theme around it. */
+  color?: string;
+  /** The `itemSize` the scrollable lays its items out with. Left out, `auto`. */
+  itemSize?: 'auto' | 'same' | 'full' | 'half' | 'third' | 'quarter';
+  /** The gap between the items in px, as the directive reads it from the container. Left out, 0. */
+  itemGap?: number;
+  /** Extra classes on the host, e.g. the class a wrapping component puts on it. */
+  class?: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+  /** Extra attributes on the scroll container, e.g. a style that offsets it to a scrolled position. */
+  containerAttributes?: string;
+};
+
+/** The stylesheets `scrollable()` draws with: the real scrollable, masks, buttons, navigation and icon-button CSS. */
+export const scrollableStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  iconButtonBase,
+  scrollableBase,
+  masksBase,
+  buttonsBase,
+  navigationBase,
+  footerBase,
+].join('\n');
+
+type ScrollButtonOptions = { edge: 'start' | 'end'; disabled: boolean; attributes?: string };
+
+const scrollButton = ({ edge, disabled, attributes }: ScrollButtonOptions) => {
+  const classes = [
+    'et-scrollable-button',
+    `et-scrollable-button--${edge}`,
+    'et-icon-button',
+    'et-color-interactive',
+    'et-focus-ring',
+    'et-color--inherited',
+  ];
+  const host = [
+    attributes,
+    disabled && 'disabled aria-disabled="true"',
+    `class="${classes.join(' ')}"`,
+    'aria-hidden="true"',
+    'type="button"',
+    'tabindex="-1"',
+    'data-variant="transparent"',
+    'data-size="xs"',
+  ].filter(Boolean);
+
+  return `<button ${host.join(' ')}><div class="et-icon-button-icon">${iconMarkup(CHEVRON_ICON)}</div></button>`;
+};
+
+type NavigationOptions = { count: number; active: number; horizontal: boolean };
+
+const navigation = ({ count, active, horizontal }: NavigationOptions) => {
+  const offset = count > 5 ? (active < 3 ? 0 : active >= count - 3 ? 5 - count : -(active - 2)) * 20 : 0;
+  const dots = Array.from({ length: count }, (_, index) => {
+    const distance = Math.abs(index - active);
+    const classes = [
+      'et-scrollable-navigation-item',
+      distance === 0 && 'et-scrollable-navigation-item--active',
+      distance === 1 && 'et-scrollable-navigation-item--close',
+      distance > 1 && 'et-scrollable-navigation-item--far',
+    ].filter(Boolean);
+
+    return `<button active-offset="${distance}" class="${classes.join(' ')}" type="button" tabindex="-1" aria-hidden="true"></button>`;
+  }).join('');
+
+  const container = [
+    'class="et-scrollable-dots-container"',
+    `style="transform: translate${horizontal ? 'X' : 'Y'}(${offset}px)"`,
+  ];
+
+  return (
+    `<et-scrollable-navigation class="et-scrollable-navigation" aria-hidden="true"><div class="et-scrollable-progress-bar">` +
+    `<div ${container.join(' ')}>${dots}</div>` +
+    `</div></et-scrollable-navigation>`
+  );
+};
+
+/**
+ * Draws `<et-scrollable>` as HTML: the scroll container with its observer elements and the projected items, the
+ * edge masks, and the buttons and navigation dots its feature directives contribute. A scrolled position is
+ * drawn by offsetting the container's content statically through `containerAttributes`.
+ */
+export const scrollable = (options: ScrollableMockOptions) => {
+  const direction = options.direction ?? 'horizontal';
+  const canScroll = options.canScroll ?? true;
+  const position = canScroll ? (options.position ?? 'start') : 'start';
+  const renderMasks = options.renderMasks ?? true;
+  const atStart = !canScroll || position === 'start';
+  const atEnd = !canScroll || position === 'end';
+  const hasNavigation = options.navigationActive !== undefined;
+
+  const classes = [
+    'et-scrollable',
+    `et-color--${options.color ?? 'inherited'}`,
+    canScroll && 'et-scrollable--can-scroll',
+    atStart && 'et-scrollable--is-at-start',
+    atEnd && 'et-scrollable--is-at-end',
+    (options.partialItems ?? (canScroll && renderMasks)) && 'et-scrollable--has-partial-items',
+    options.darken && 'et-scrollable--darken-non-intersecting-items',
+    options.stickyButtons && options.buttons === 'inside' && 'et-scrollable--sticky-buttons',
+    options.class,
+  ].filter(Boolean);
+
+  const host = [
+    options.attributes,
+    `class="${classes.join(' ')}"`,
+    `item-size="${options.itemSize ?? 'auto'}"`,
+    `direction="${direction}"`,
+    options.snap && 'snap="" snap-origin="auto"',
+    `mask-variant="${options.maskVariant ?? 'gradient'}"`,
+    `style="--item-count: ${options.items.length}; --item-gap: ${options.itemGap ?? 0}px; --_et-scrollable-scroll-margin: 0px"`,
+  ].filter(Boolean);
+
+  const itemMarkup = options.items
+    .map((item) => {
+      const tag = item.tag ?? 'div';
+      const itemClasses = ['et-scrollable-item', item.notIntersecting && 'et-scrollable-item--not-intersecting'].filter(
+        Boolean,
+      );
+      const attributes = item.attributes ?? '';
+      const merged = /\bclass="/.test(attributes)
+        ? attributes.replace(/\bclass="/, `class="${itemClasses.join(' ')} `)
+        : `${attributes} class="${itemClasses.join(' ')}"`;
+
+      return `<${tag} ${merged.trim()}>${item.content}</${tag}>`;
+    })
+    .join('');
+
+  const buttons = (slot: 'overlay' | 'footer') =>
+    `<et-scrollable-buttons class="et-scrollable-buttons et-scrollable-buttons--${slot === 'footer' ? 'footer' : 'inside'}">` +
+    scrollButton({ edge: 'start', disabled: atStart, attributes: options.startButtonAttributes }) +
+    scrollButton({ edge: 'end', disabled: atEnd, attributes: options.endButtonAttributes }) +
+    `</et-scrollable-buttons>`;
+
+  const footerParts = [
+    options.buttons === 'footer' && buttons('footer'),
+    hasNavigation &&
+      navigation({
+        count: options.items.length,
+        active: options.navigationActive ?? 0,
+        horizontal: direction === 'horizontal',
+      }),
+  ].filter(Boolean);
+
+  const footerClasses = [
+    'et-scrollable-footer',
+    hasNavigation && 'et-scrollable-footer--with-navigation',
+    options.buttons === 'footer' && 'et-scrollable-footer--with-buttons',
+  ].filter(Boolean);
+
+  const footer =
+    footerParts.length && canScroll
+      ? `<div class="${footerClasses.join(' ')}" aria-hidden="true">${footerParts.join('')}</div>`
+      : '';
+
+  return (
+    `<et-scrollable ${host.join(' ')}><div class="et-scrollable-wrapper" role="presentation">` +
+    `<div class="et-scrollable-container" ${options.containerAttributes ?? ''}>` +
+    `<div class="et-scroll-observer-first-element" etscrollableignorechild=""></div>` +
+    itemMarkup +
+    `<div class="et-scroll-observer-last-element" etscrollableignorechild=""></div>` +
+    `</div>` +
+    (renderMasks
+      ? `<et-scrollable-masks class="et-scrollable-masks"><div class="et-scrollable-mask et-scrollable-mask--start"></div><div class="et-scrollable-mask et-scrollable-mask--end"></div></et-scrollable-masks>`
+      : '') +
+    (options.buttons === 'inside' ? buttons('overlay') : '') +
+    `</div>${footer}</et-scrollable>`
+  );
+};

package/design/scrollbar.ts

@@ -0,0 +1,47 @@
+import scrollbarBase from '../src/lib/scrollbar/scrollbar.component.css?inline';
+
+export type ScrollbarMockOptions = {
+  orientation?: 'vertical' | 'horizontal';
+  /** The thumb length in px, as the directive computes it from the container's scroll size. */
+  thumbSize: number;
+  /** The thumb distance from the track start in px, as the directive computes it from the scroll position. */
+  thumbOffset?: number;
+  /** Draws the `et-scrollbar--visible` class. Left out, visible, as without `autoHide`. */
+  visible?: boolean;
+  /** Draws the `et-scrollbar--dragging` class, as while the thumb is held. */
+  dragging?: boolean;
+  /** Draws the host's `data-direction="rtl"`, read off a right-to-left container. */
+  rtl?: boolean;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+  /** Extra attributes on the thumb, e.g. design markers. */
+  thumbAttributes?: string;
+};
+
+/** The stylesheets `scrollbar()` draws with: the real scrollbar CSS. */
+export const scrollbarStyles = /* @__PURE__ */ [scrollbarBase].join('\n');
+
+/** The class the directive puts on the scroll container to hide its native scrollbar. */
+export const scrollbarHostClass = 'et-scrollbar-host';
+
+/**
+ * Draws `<et-scrollbar>` as HTML: the track over the end edge of its positioned wrapper and the thumb at the given
+ * size and offset. Place it next to a container with `scrollbarHostClass` inside a `position: relative` wrapper.
+ */
+export const scrollbar = (options: ScrollbarMockOptions) => {
+  const classes = [
+    'et-scrollbar',
+    (options.visible ?? true) && 'et-scrollbar--visible',
+    options.dragging && 'et-scrollbar--dragging',
+  ].filter(Boolean);
+  const host = [
+    options.attributes,
+    `class="${classes.join(' ')}"`,
+    `data-orientation="${options.orientation ?? 'vertical'}"`,
+    options.rtl && 'data-direction="rtl"',
+    `style="--_et-scrollbar-thumb-size: ${options.thumbSize}px; --_et-scrollbar-thumb-offset: ${options.thumbOffset ?? 0}px"`,
+  ].filter(Boolean);
+  const thumb = [options.thumbAttributes, 'class="et-scrollbar-thumb"', 'etscrollbarthumb=""'].filter(Boolean);
+
+  return `<et-scrollbar ${host.join(' ')}><div ${thumb.join(' ')}></div></et-scrollbar>`;
+};

package/design/sdk/assets/fallback.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="800" height="450" viewBox="0 0 800 450"><rect width="100%" height="100%" fill="#ffd000"/><text x="50%" y="50%" fill="#000" font-family="sans-serif" font-size="24" text-anchor="middle" dominant-baseline="middle">fallback</text></svg>

package/design/sdk/assets/tall.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="450" height="600" viewBox="0 0 450 600"><rect width="100%" height="100%" fill="#00d0ff"/><text x="50%" y="50%" fill="#000" font-family="sans-serif" font-size="24" text-anchor="middle" dominant-baseline="middle">tall 3:4</text></svg>

package/design/sdk/assets/wide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="800" height="450" viewBox="0 0 800 450"><rect width="100%" height="100%" fill="#00ffa1"/><text x="50%" y="50%" fill="#000" font-family="sans-serif" font-size="24" text-anchor="middle" dominant-baseline="middle">wide 16:9</text></svg>

package/design/sdk/components/accent-on-light/accent-on-light.css

@@ -0,0 +1,35 @@
+@layer components {
+  .accent-on-light {
+    display: grid;
+    gap: 20px;
+    padding: 16px;
+    justify-items: start;
+  }
+
+  .accent-on-light-row {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+
+  .accent-on-light et-radio[aria-checked='true'] .et-radio-circle {
+    border-color: var(--et-theme-color-ink-solid);
+
+    &::after {
+      background-color: var(--et-theme-color-ink-solid);
+    }
+  }
+
+  .accent-on-light .et-selection-card:is([aria-checked='true'], :has([aria-checked='true'], [aria-checked='mixed'])) {
+    border-color: var(--et-theme-color-ink-solid);
+  }
+
+  .accent-on-light et-checkbox:is([aria-checked='true'], [aria-checked='mixed']) .et-checkbox-box {
+    border-color: var(--et-theme-color-ink-solid);
+  }
+
+  .accent-on-light et-switch[aria-checked='true'] .et-switch-track,
+  .accent-on-light et-segmented-button[aria-checked='true'] .et-segmented-button-bg {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/accent-on-light/accent-on-light.ts

@@ -0,0 +1,10 @@
+import { definePart, drawing } from '@design-system';
+import { controls } from './shared/controls';
+import styles from './accent-on-light.css?inline';
+
+export default definePart({
+  note: 'The brand mint on light controls: checkbox checked, mixed and off, switch on, a radio group, a segmented button group and a choice-field card, drawn by the real components under one accent rule.',
+  madeBy: ['claude-opus-5-5'],
+  states: { default: {} },
+  render: async () => drawing({ body: await controls(), styles }),
+});

package/design/sdk/components/accent-on-light/shared/controls.ts

@@ -0,0 +1,46 @@
+import { ng } from '@design-system';
+
+export const controls = () =>
+  ng(
+    `<div class="accent-on-light et-color--brand">
+      <div class="accent-on-light-row">
+        <et-checkbox [formField]="fields.checked" aria-label="Checked" />
+        <et-checkbox [formField]="fields.mixed" [indeterminate]="true" aria-label="Mixed" />
+        <et-checkbox [formField]="fields.unchecked" aria-label="Unchecked" />
+        <et-switch [formField]="fields.on" aria-label="On" />
+      </div>
+      <et-radio-group [formField]="fields.plan">
+        <et-label>Plan</et-label>
+        <et-radio value="free">Free</et-radio>
+        <et-radio value="pro">Pro</et-radio>
+      </et-radio-group>
+      <et-segmented-button-group [formField]="fields.view">
+        <et-label>View</et-label>
+        <et-segmented-button value="list">List</et-segmented-button>
+        <et-segmented-button value="grid">Grid</et-segmented-button>
+      </et-segmented-button-group>
+      <et-choice-field variant="card">
+        <et-checkbox [formField]="fields.digest" />
+        <et-label>Weekly digest</et-label>
+      </et-choice-field>
+    </div>`,
+    {
+      imports: [
+        'CHECKBOX_IMPORTS',
+        'SWITCH_IMPORTS',
+        'RADIO_GROUP_IMPORTS',
+        'SEGMENTED_BUTTON_IMPORTS',
+        'CHOICE_FIELD_IMPORTS',
+        'FORM_FIELD_IMPORTS',
+      ],
+      fields: {
+        checked: { value: true },
+        mixed: { value: false },
+        unchecked: { value: false },
+        on: { value: true },
+        plan: { value: 'pro' },
+        view: { value: 'list' },
+        digest: { value: true },
+      },
+    },
+  );

package/design/sdk/components/accordion/accordion.css

@@ -0,0 +1,17 @@
+.accordion-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.accordion-text {
+  margin: 0;
+  line-height: 1.5;
+}
+
+@layer components {
+  .et-accordion-trigger:focus-visible {
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/accordion/accordion.ts

@@ -0,0 +1,64 @@
+import { accordionGroup, AccordionMockItem, accordionStyles } from '@ethlete/components/design/accordion';
+import { definePart, drawing } from '@design-system';
+import frame from './accordion.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  open?: boolean;
+  shipping?: Interaction;
+  archive?: Interaction;
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}"`, interaction && `data-et-force="${interaction}"`].filter(Boolean).join(' ');
+
+const items = (props: Props): AccordionMockItem[] => [
+  {
+    label: 'Match rules',
+    content: '<p class="accordion-text">Two halves of 20 minutes. A draw after extra time goes to penalties.</p>',
+    open: props.open,
+    triggerAttributes: mark('rules'),
+  },
+  {
+    label: 'Shipping',
+    hint: '3 options',
+    content: '<p class="accordion-text">Standard, express and pick-up at the venue.</p>',
+    triggerAttributes: mark('shipping', props.shipping),
+  },
+  {
+    label: 'Payment',
+    content: '<p class="accordion-text">Card, PayPal or invoice.</p>',
+  },
+  {
+    label: 'Archive',
+    hint: 'Closed',
+    content: '<p class="accordion-text">Past seasons.</p>',
+    disabled: true,
+    triggerAttributes: mark('archive', props.archive),
+  },
+];
+
+export default definePart({
+  note: 'The SDK accordion (et-accordion in an et-accordion-group), drawn by its mock from @ethlete/components/design: a 500-weight header with an optional muted hint and a 14px chevron in the muted surface text, a 1px surface-border divider under every item but the last, a 7 % interaction tint on header hover (14 % active) inside a 4px inset with an 8px radius, a 2px inset focus outline in the primary theme colour, and muted text for a disabled header. Item 1 opens in the expanded states; item 2 carries a hint; item 4 is disabled. The accordion has no variants.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    collapsed: {},
+    expanded: { open: true },
+    disabled: { open: true, archive: 'hover' },
+    'header-hover': { open: true, shipping: 'hover' },
+    'header-active': { open: true, shipping: 'active' },
+    'header-focus-visible': { open: true, shipping: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    rules: { kind: 'button', input: ['pointer', 'keyboard'] },
+    shipping: { kind: 'button', input: ['pointer', 'keyboard'] },
+    archive: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="accordion-frame">${accordionGroup(items(props)).replaceAll('inert=""><div class="et-accordion-panel-clip"', 'inert=""><div data-et-skip="CLIPPED" class="et-accordion-panel-clip"')}</div>`,
+      styles: [accordionStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/avatar/avatar.css

@@ -0,0 +1,14 @@
+.avatar-frame {
+  display: flex;
+  align-items: center;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+@layer components {
+  .et-avatar:not(:has(> .et-avatar-image)) {
+    outline: 1px solid var(--et-theme-color-ink-solid);
+    outline-offset: -1px;
+  }
+}

package/design/sdk/components/avatar/avatar.ts

@@ -0,0 +1,78 @@
+import {
+  avatar,
+  avatarGroup,
+  avatarPlaceholderImage,
+  avatarRow,
+  avatarStyles,
+  AvatarMockOptions,
+} from '@ethlete/components/design/avatar';
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { definePart, drawing } from '@design-system';
+import frame from './avatar.css?inline';
+
+const icon = (name: string) => SDK_ICONS.find((each) => each.name === name);
+
+type Shape = NonNullable<AvatarMockOptions['shape']>;
+
+type Props = { avatars?: AvatarMockOptions[]; groups?: { avatars: AvatarMockOptions[]; maxVisible?: number }[] };
+
+const themed = (shape: Shape): Props => ({
+  avatars: [
+    { name: 'Jane Doe', shape },
+    { name: 'Alex Kim', shape, color: 'brand' },
+    { name: 'Sam Lee', shape, color: 'warning' },
+    { name: 'Max Roe', shape, color: 'danger' },
+  ],
+});
+
+const forms = (shape: Shape): Props => ({
+  avatars: [
+    { src: avatarPlaceholderImage, name: 'Jane Doe', shape },
+    { name: 'Jane Doe', shape },
+    { name: 'Dr. Anna Maria Schmidt', initials: 'AS', shape },
+    { icon: icon('et-image'), shape },
+    { shape },
+  ],
+});
+
+const sizes = (shape: Shape): Props => ({
+  avatars: (['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => ({ name: 'Jane Doe', size, shape })),
+});
+
+const members: AvatarMockOptions[] = [
+  { src: avatarPlaceholderImage, name: 'Jane Doe' },
+  { name: 'Alex Kim', color: 'brand' },
+  { name: 'Sam Lee', color: 'warning' },
+  { name: 'Max Roe', color: 'danger' },
+  { name: 'Ada Byron' },
+  { name: 'Kai Berg' },
+];
+
+export default definePart({
+  note: 'Decided rules only (Q99 rule a)',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    themes: themed('circle'),
+    'themes-square': themed('square'),
+    forms: forms('circle'),
+    'forms-square': forms('square'),
+    sizes: sizes('circle'),
+    'sizes-square': sizes('square'),
+    group: { groups: [{ avatars: members.slice(0, 4) }] },
+    'group-overflow': {
+      groups: [
+        { avatars: members, maxVisible: 3 },
+        { avatars: members.map((each) => ({ ...each, size: 'sm' as const, shape: 'square' as const })), maxVisible: 4 },
+      ],
+    },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="avatar-frame">${avatarRow([
+        ...(props.avatars ?? []).map((each) => avatar(each)),
+        ...(props.groups ?? []).map((each) => avatarGroup(each.avatars, each.maxVisible)),
+      ])}</div>`,
+      styles: [avatarStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/badge/badge.css

@@ -0,0 +1,13 @@
+.badge-frame {
+  display: flex;
+  align-items: center;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+@layer components {
+  .et-badge:where([data-variant='filled'], [data-variant='tonal']) {
+    --_et-badge-border-color: var(--et-theme-color-ink-solid);
+  }
+}

package/design/sdk/components/badge/badge.ts

@@ -0,0 +1,52 @@
+import { badge, badgeRow, badgeStyles, BadgeMockOptions } from '@ethlete/components/design/badge';
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { definePart, drawing } from '@design-system';
+import frame from './badge.css?inline';
+
+const icon = (name: string) => SDK_ICONS.find((each) => each.name === name);
+
+type Variant = NonNullable<BadgeMockOptions['variant']>;
+
+type Props = { badges: BadgeMockOptions[] };
+
+const themed = (variant: Variant, size?: BadgeMockOptions['size']): Props => ({
+  badges: [
+    { label: 'Default', variant, size },
+    { label: 'Active', variant, size, color: 'brand' },
+    { label: 'Pending', variant, size, color: 'warning' },
+    { label: '3 errors', variant, size, color: 'danger' },
+  ],
+});
+
+const withIcons = (variant: Variant): Props => ({
+  badges: [
+    { label: 'Verified', variant, icon: icon('et-check'), color: 'brand' },
+    { label: 'Featured', variant, icon: icon('et-star'), iconAlignment: 'end', color: 'warning' },
+  ],
+});
+
+const sizes = (variant: Variant): Props => ({
+  badges: (['sm', 'md', 'lg'] as const).map((size) => ({ label: size, variant, size })),
+});
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    filled: themed('filled'),
+    tonal: themed('tonal'),
+    outline: themed('outline'),
+    'filled-icons': withIcons('filled'),
+    'tonal-icons': withIcons('tonal'),
+    'outline-icons': withIcons('outline'),
+    'filled-sizes': sizes('filled'),
+    'tonal-sizes': sizes('tonal'),
+    'outline-sizes': sizes('outline'),
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="badge-frame">${badgeRow(props.badges.map((each) => badge(each)))}</div>`,
+      styles: [badgeStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/banner/banner.css

@@ -0,0 +1,18 @@
+.banner-frame {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+@layer components {
+  .et-banner {
+    border-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-banner .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+}