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

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

@@ -0,0 +1,76 @@
+import {
+  pagination,
+  type PaginationMockItem,
+  type PaginationMockOptions,
+  paginationStyles,
+} from '@ethlete/components/design/pagination';
+import { definePart, drawing, interactionRows } from '@design-system';
+import edge from './pagination.css?inline';
+
+type ItemInteraction = 'hover' | 'active' | 'focus-visible';
+
+type Props = Omit<PaginationMockOptions, 'items'> & {
+  page: number;
+  pages: (number | null)[];
+  total: number;
+  target?: number;
+  forced?: ItemInteraction;
+};
+
+const MARK = 'data-et-control="item" data-can-animate';
+
+const items = ({ page, pages, total, target, forced }: Props): PaginationMockItem[] => {
+  const attributes = (entry: number) => (forced && entry === target ? `${MARK} data-et-force="${forced}"` : MARK);
+
+  return [
+    { type: 'first', page: 1, disabled: page === 1, attributes: MARK },
+    { type: 'previous', page: page - 1, disabled: page === 1, attributes: MARK },
+    ...pages.map((entry): PaginationMockItem =>
+      entry === null
+        ? { type: 'ellipsis' }
+        : { type: 'page', page: entry, current: entry === page, attributes: attributes(entry) },
+    ),
+    { type: 'next', page: page + 1, disabled: page === total, attributes: MARK },
+    { type: 'last', page: total, disabled: page === total, attributes: MARK },
+  ];
+};
+
+const MIDDLE: Props = { page: 10, total: 20, pages: [1, null, 9, 10, 11, null, 20] };
+
+const { states, grid } = interactionRows(
+  {
+    page: { ...MIDDLE, target: 11 },
+    current: { ...MIDDLE, target: 10 },
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'active', 'focus-visible'],
+    force: (props: Props, interaction: ItemInteraction): Props => ({ ...props, forced: interaction }),
+  },
+);
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    first: { page: 1, total: 20, pages: [1, 2, 3, 4, 5, null, 20] },
+    middle: MIDDLE,
+    last: { page: 20, total: 20, pages: [1, null, 16, 17, 18, 19, 20] },
+    few: { page: 2, total: 5, pages: [1, 2, 3, 4, 5] },
+    ...states,
+    range: { ...MIDDLE, range: 'Showing 91–100 of 200' },
+    sm: { ...MIDDLE, size: 'sm' },
+    links: { ...MIDDLE, renderAs: 'links' },
+    compact: { ...MIDDLE, compactStatus: '10 / 20' },
+  },
+  grid,
+  widths: [480],
+  controls: {
+    item: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  frame: (body) => `<div class="pagination-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: pagination({ ...props, items: items(props) }),
+      styles: [paginationStyles, edge].join('\n'),
+    }),
+});

package/design/sdk/components/picture/picture.css

@@ -0,0 +1,37 @@
+.picture-frame {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  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;
+
+  .picture-error {
+    margin: 0;
+    color: var(--et-surface-color-muted-solid);
+    font-size: 1.2rem;
+  }
+
+  .picture-fit-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 180px);
+    gap: 1.6rem;
+  }
+
+  .picture-fit-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    margin: 0;
+    font-size: 1.2rem;
+    color: var(--et-surface-color-muted-solid);
+  }
+
+  .picture-fit-cell .et-picture {
+    inline-size: 180px;
+    block-size: 120px;
+    outline: 1px dashed var(--et-surface-border-solid);
+  }
+}

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

@@ -0,0 +1,97 @@
+import { picture, pictureStyles, type PictureMockOptions } from '@ethlete/components/design/picture';
+import { skeletonItem, skeletonStyles } from '@ethlete/components/design/skeleton';
+import { definePart, drawing } from '@design-system';
+import fallback from '@assets/fallback.svg?raw';
+import tall from '@assets/tall.svg?raw';
+import wide from '@assets/wide.svg?raw';
+import frame from './picture.css?inline';
+
+const svgUrl = (markup: string) => `data:image/svg+xml;utf8,${encodeURIComponent(markup.trim())}`;
+
+type Fit = NonNullable<PictureMockOptions['fit']>;
+
+type Props = {
+  ratio?: string;
+  caption?: 'short' | 'long' | 'none';
+  intrinsic?: boolean;
+  loading?: boolean;
+  error?: 'slot' | 'bare';
+  fit?: boolean;
+};
+
+const WIDE = svgUrl(wide);
+const TALL = svgUrl(tall);
+const FALLBACK = svgUrl(fallback);
+const BROKEN = 'data:image/png;base64,this-is-not-an-image';
+
+const CAPTIONS = {
+  short: 'A crop that follows the viewport.',
+  long: 'Fulltime at the home ground: the visitors celebrate in front of the away end after the late winner, while the stewards hold the line and the floodlights come on over the north stand.',
+  none: undefined,
+};
+
+const FITS: Fit[] = ['contain', 'cover', 'fill', 'none', 'scale-down'];
+
+const body = ({ ratio = '16 / 9', caption = 'short', intrinsic, loading, error, fit }: Props) => {
+  if (fit) {
+    const cells = FITS.map(
+      (mode) =>
+        `<figure class="picture-fit-cell">${picture({ src: FALLBACK, alt: `fit ${mode}`, fit: mode })}<span>${mode}</span></figure>`,
+    ).join('');
+
+    return `<div class="picture-fit-grid">${cells}</div>`;
+  }
+
+  if (loading) {
+    return picture({
+      alt: 'An image whose URL arrives after the page',
+      aspectRatio: '16 / 9',
+      state: 'loading',
+      placeholder: skeletonItem({ shape: 'rect', style: 'block-size: 100%; inline-size: 100%' }),
+    });
+  }
+
+  if (error) {
+    return picture({
+      src: BROKEN,
+      alt: 'An image that fails to load',
+      aspectRatio: '16 / 9',
+      state: 'error',
+      error: error === 'slot' ? '<p class="picture-error">This image is unavailable.</p>' : undefined,
+    });
+  }
+
+  return picture({
+    sources: intrinsic ? undefined : [{ srcset: WIDE, media: '(min-width: 700px)' }, { srcset: TALL }],
+    src: FALLBACK,
+    alt: 'A coloured block labelled with its aspect ratio',
+    aspectRatio: ratio === 'none' ? undefined : ratio,
+    width: intrinsic ? 800 : undefined,
+    height: intrinsic ? 450 : undefined,
+    figcaption: CAPTIONS[caption],
+  });
+};
+
+export default definePart({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    'ratio-4-3': { ratio: '4 / 3' },
+    'no-ratio': { ratio: 'none' },
+    'width-height': { intrinsic: true },
+    'no-caption': { caption: 'none' },
+    'long-caption': { caption: 'long' },
+    fit: { fit: true },
+    loading: { loading: true },
+    'error-slot': { error: 'slot' },
+    'error-bare': { error: 'bare' },
+  },
+  widths: [480],
+  frame: (body) => `<div class="picture-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      body: body(props),
+      styles: [skeletonStyles, pictureStyles, frame].join('\n'),
+    }),
+});

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

@@ -0,0 +1,37 @@
+.progress-steps-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  .et-progress-step {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+
+    &:is(
+        [data-state='current'],
+        [data-state='complete'],
+        [data-state='success'],
+        [data-state='warning'],
+        [data-state='error']
+      )
+      .et-progress-step-marker {
+      border-color: var(--et-theme-color-ink-solid);
+    }
+
+    &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error']):not(
+        :last-child
+      )::after {
+      background: var(--et-theme-color-ink-solid);
+    }
+
+    &:is(a, button) {
+      @media (hover: hover) {
+        &:hover .et-progress-step-marker {
+          border-color: var(--et-theme-color-ink-solid);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+import { progressSteps, ProgressStepMockStep, progressStepsStyles } from '@ethlete/components/design/progress-steps';
+import { definePart, drawing } from '@design-system';
+import frame from './progress-steps.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  set?: 'checkout' | 'outcomes' | 'described' | 'vertical' | 'links';
+  complete?: Interaction;
+  upcoming?: Interaction;
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}"`, interaction && `data-et-force="${interaction}"`].filter(Boolean).join(' ');
+
+const checkout: ProgressStepMockStep[] = [
+  { label: 'Account', state: 'complete' },
+  { label: 'Shipping', state: 'current' },
+  { label: 'Payment' },
+  { label: 'Review' },
+];
+
+const outcomes: ProgressStepMockStep[] = [
+  { label: 'Upload', state: 'success' },
+  { label: 'Validate', state: 'warning', color: 'warning' },
+  { label: 'Import', state: 'error', color: 'danger' },
+  { label: 'Publish' },
+];
+
+const described: ProgressStepMockStep[] = [
+  { label: 'Team', state: 'complete', description: '18 players' },
+  { label: 'Squad', state: 'error', color: 'danger', description: '2 missing' },
+  { label: 'Kit', state: 'current', description: 'Home colours' },
+  { label: 'Submit', description: 'By Friday' },
+];
+
+const vertical: ProgressStepMockStep[] = [
+  { label: 'Registration received', state: 'complete', description: 'Mon, 12 Oct' },
+  { label: 'Documents checked', state: 'warning', color: 'warning', description: 'Photo is blurry' },
+  { label: 'Payment', state: 'current', description: 'Waiting for the transfer' },
+  { label: 'Licence issued' },
+];
+
+const links = (props: Props): ProgressStepMockStep[] => [
+  { label: 'Account', state: 'complete', as: 'a', attributes: mark('complete', props.complete) },
+  { label: 'Shipping', state: 'current', as: 'a' },
+  { label: 'Payment', as: 'a', attributes: mark('upcoming', props.upcoming) },
+  { label: 'Review', as: 'a' },
+];
+
+const steps = (props: Props) => {
+  switch (props.set) {
+    case 'outcomes':
+      return progressSteps({ steps: outcomes });
+    case 'described':
+      return progressSteps({ steps: described });
+    case 'vertical':
+      return progressSteps({ steps: vertical, orientation: 'vertical' });
+    case 'links':
+      return progressSteps({ steps: links(props) });
+    default:
+      return progressSteps({ steps: checkout });
+  }
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    outcomes: { set: 'outcomes' },
+    described: { set: 'described' },
+    vertical: { set: 'vertical' },
+    links: { set: 'links' },
+    'upcoming-hover': { set: 'links', upcoming: 'hover' },
+    'upcoming-active': { set: 'links', upcoming: 'active' },
+    'upcoming-focus-visible': { set: 'links', upcoming: 'focus-visible' },
+    'complete-hover': { set: 'links', complete: 'hover' },
+    'complete-focus-visible': { set: 'links', complete: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    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: steps(props),
+      styles: [progressStepsStyles, frame].join('\n'),
+    }),
+});

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

@@ -0,0 +1,33 @@
+.query-error-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;
+
+  .query-error-support {
+    color: inherit;
+    font-size: 1.2rem;
+    text-decoration: underline;
+  }
+}
+
+@layer components {
+  .et-banner {
+    border-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-button {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-rgb: var(--et-color-primary-active);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+import { button } from '@ethlete/components/design/button';
+import { queryError, queryErrorStyles } from '@ethlete/components/design/query-error';
+import { definePart, drawing } from '@design-system';
+import frame from './query-error.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Shape = 'message' | 'violations' | 'classValidator' | 'retryable' | 'empty' | 'echoesTitle' | 'network' | 'long';
+
+type Props = {
+  shape: Shape;
+  alwaysAllowRetry?: boolean;
+  slots?: boolean;
+  color?: string;
+  retry?: Interaction;
+};
+
+const SHAPES: Record<Shape, { status: number; title: string; messages: string[]; canRetry: boolean }> = {
+  message: { status: 403, title: 'Forbidden', messages: ['You do not have access to this team.'], canRetry: false },
+  violations: {
+    status: 422,
+    title: 'Unprocessable entity',
+    messages: ['A name is required.', 'The email address is not valid.', 'The start date must be before the end date.'],
+    canRetry: false,
+  },
+  classValidator: {
+    status: 400,
+    title: 'Bad request',
+    messages: ['name should not be empty', 'email must be an email'],
+    canRetry: false,
+  },
+  retryable: {
+    status: 503,
+    title: 'Service unavailable',
+    messages: ['The service is briefly unavailable.'],
+    canRetry: true,
+  },
+  empty: {
+    status: 500,
+    title: 'Internal server error',
+    messages: ['Something went wrong on our end. Please try again later. (Code: 500)'],
+    canRetry: false,
+  },
+  echoesTitle: {
+    status: 404,
+    title: 'Not found',
+    messages: ['The requested resource was not found. (Code: 404)'],
+    canRetry: false,
+  },
+  network: {
+    status: 0,
+    title: 'Something went wrong',
+    messages: ['Something went wrong. Check your internet connection and try again later. (Code: 0)'],
+    canRetry: true,
+  },
+  long: {
+    status: 409,
+    title: 'Conflict',
+    messages: [
+      'The fixture for matchday 14 was moved by another organiser while you were editing it, so your changes to the kick-off time, the venue and the referee assignment could not be saved. Reload the fixture and quote request league.example.com/fixtures/2026_matchday_14_home_visitors_edit_request_8f3a9c2e7b1d',
+    ],
+    canRetry: false,
+  },
+};
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const slotActions = (interaction?: Interaction) =>
+  button({ label: 'Try again', size: 'sm' }).replace('<button ', `<button ${mark('retry', interaction)} `) +
+  '<a class="query-error-support" href="#">Contact support</a>';
+
+const render = ({ shape, alwaysAllowRetry, slots, color = 'danger', retry }: Props) => {
+  const { status, title, messages, canRetry } = SHAPES[shape];
+
+  return queryError({
+    status,
+    title: slots && status === 403 ? 'This team is private' : title,
+    messages,
+    color,
+    retry: !slots && (canRetry || alwaysAllowRetry) ? 'Retry' : undefined,
+    retryAttributes: mark('retry', retry),
+    actions: slots ? slotActions(retry) : undefined,
+  });
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    message: { shape: 'message' },
+    violations: { shape: 'violations' },
+    'class-validator': { shape: 'classValidator' },
+    retryable: { shape: 'retryable' },
+    'empty-body': { shape: 'empty' },
+    'echoes-title': { shape: 'echoesTitle' },
+    network: { shape: 'network' },
+    'always-allow-retry': { shape: 'echoesTitle', alwaysAllowRetry: true },
+    'long-message': { shape: 'long' },
+    'custom-slots': { shape: 'message', slots: true },
+    'retry-hover': { shape: 'retryable', retry: 'hover' },
+    'retry-active': { shape: 'retryable', retry: 'active' },
+    'retry-focus-visible': { shape: 'retryable', retry: 'focus-visible' },
+    'slot-retry-focus-visible': { shape: 'message', slots: true, retry: 'focus-visible' },
+    'brand-color': { shape: 'retryable', color: 'brand' },
+    'brand-retry-hover': { shape: 'retryable', color: 'brand', retry: 'hover' },
+    'brand-retry-focus-visible': { shape: 'retryable', color: 'brand', retry: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    retry: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  frame: (body) => `<div class="query-error-frame">${body}</div>`,
+  render: (props: Props) =>
+    drawing({
+      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);
+  }
+}