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

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

@@ -0,0 +1,78 @@
+import { alertDialog, dialog, dialogStyles, overlayBackdrop } from '@ethlete/components/design/dialog';
+import { definePart, drawing } from '@design-system';
+import edge from './dialog.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  kind: 'dialog' | 'alert';
+  long?: boolean;
+  close?: Interaction;
+  confirm?: Interaction;
+  cancel?: Interaction;
+};
+
+const PANE = 'data-et-surface-fill';
+
+const mark = (control: string, interaction?: Interaction) =>
+  [`data-et-control="${control}" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const SHORT = '<p>Kick-off moves to 18:30. Both teams and the referee get an email with the new time.</p>';
+
+const LONG = Array.from(
+  { length: 8 },
+  (_, index) =>
+    `<p>Round ${index + 1}: every match of this round moves by one week. Teams that already confirmed get asked again, and open predictions stay open until the new kick-off.</p>`,
+).join('');
+
+const render = ({ kind, long, close, confirm, cancel }: Props) =>
+  kind === 'alert'
+    ? alertDialog({
+        kind: 'confirm',
+        title: 'Delete this match?',
+        message: 'The match, its result and every prediction on it are removed. This cannot be undone.',
+        confirmLabel: 'Delete',
+        confirmAttributes: mark('confirm', confirm),
+        cancelAttributes: mark('cancel', cancel),
+        attributes: PANE,
+      })
+    : dialog({
+        title: long ? 'Move the season' : 'Move kick-off',
+        body: long ? LONG : SHORT,
+        close: mark('close', close),
+        dividers: long ? 'dynamic' : false,
+        actions: [
+          { label: 'Cancel', variant: 'outline', attributes: mark('cancel', cancel) },
+          { label: 'Save', attributes: mark('confirm', confirm) },
+        ],
+        attributes: PANE,
+      });
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: { kind: 'dialog' },
+    'close-hover': { kind: 'dialog', close: 'hover' },
+    'close-focus-visible': { kind: 'dialog', close: 'focus-visible' },
+    'confirm-focus-visible': { kind: 'dialog', confirm: 'focus-visible' },
+    'cancel-focus-visible': { kind: 'dialog', cancel: 'focus-visible' },
+    alert: { kind: 'alert' },
+    'alert-cancel-focus-visible': { kind: 'alert', cancel: 'focus-visible' },
+    'alert-confirm-focus-visible': { kind: 'alert', confirm: 'focus-visible' },
+    'long-body': { kind: 'dialog', long: true },
+  },
+  widths: [480],
+  controls: {
+    close: { kind: 'button', input: ['pointer', 'keyboard'] },
+    cancel: { kind: 'button', input: ['pointer', 'keyboard'] },
+    confirm: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="dialog-frame">${overlayBackdrop(render(props))}</div>`,
+      styles: [dialogStyles, edge].join('\n'),
+    }),
+});

package/design/sdk/components/divider/divider.css

@@ -0,0 +1,26 @@
+.divider-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.divider-frame p {
+  margin: 0;
+}
+
+.divider-frame-row {
+  display: flex;
+  align-items: center;
+  block-size: 2.4rem;
+}
+
+.divider-frame-list {
+  display: flex;
+  flex-direction: column;
+  --et-divider-inset: 16px;
+}
+
+.divider-frame-list > span {
+  padding: 0.4rem 1.6rem;
+}

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

@@ -0,0 +1,43 @@
+import { divider, dividerStyles } from '@ethlete/components/design/divider';
+import { definePart, drawing } from '@design-system';
+import frame from './divider.css?inline';
+
+type Props = {
+  set?: 'horizontal' | 'vertical' | 'list';
+};
+
+const horizontal = () =>
+  `<p>Match starts at 18:00. Doors open an hour earlier.</p>${divider()}<p>Tickets are sent by email after payment.</p>`;
+
+const vertical = () =>
+  `<div class="divider-frame-row"><span>Overview</span>${divider({ orientation: 'vertical' })}<span>Squad</span>${divider({ orientation: 'vertical', decorative: true })}<span>Fixtures</span></div>`;
+
+const list = () =>
+  `<div class="divider-frame-list"><span>Account</span>${divider({ decorative: true })}<span>Notifications</span>${divider({ decorative: true })}<span>Privacy</span></div>`;
+
+const body = (props: Props) => {
+  switch (props.set) {
+    case 'vertical':
+      return vertical();
+    case 'list':
+      return list();
+    default:
+      return horizontal();
+  }
+};
+
+export default definePart({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: {},
+    vertical: { set: 'vertical' },
+    list: { set: 'list' },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="divider-frame">${body(props)}</div>`,
+      styles: [dividerStyles, frame].join('\n'),
+    }),
+});

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

@@ -0,0 +1,15 @@
+.empty-state-frame {
+  padding: 2.4rem 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}
+
+@layer components {
+  .et-empty-state .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-empty-state .et-button[data-variant='filled'] {
+    --et-button-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+}

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

@@ -0,0 +1,56 @@
+import { emptyState, emptyStateStyles } from '@ethlete/components/design/empty-state';
+import { definePart, drawing } from '@design-system';
+import frame from './empty-state.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  form: 'default' | 'without-action' | 'errored' | 'heading-only';
+  action?: Interaction;
+};
+
+const mark = (interaction?: Interaction) =>
+  [`data-et-control="action" data-can-animate`, interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+const COPY = {
+  default: {
+    heading: 'No results',
+    description: 'Try a different search term or clear your filters.',
+    action: 'Clear filters',
+  },
+  'without-action': { heading: 'No results', description: 'Try a different search term or clear your filters.' },
+  errored: {
+    icon: 'triangle',
+    heading: 'Something went wrong',
+    description: 'We could not load this data. Please try again.',
+    action: 'Try again',
+  },
+  'heading-only': { icon: false, heading: 'Nothing here yet' },
+} as const;
+
+const render = ({ form, action }: Props) => emptyState({ ...COPY[form], actionAttributes: mark(action) });
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: { form: 'default' },
+    'without-action': { form: 'without-action' },
+    errored: { form: 'errored' },
+    'heading-only': { form: 'heading-only' },
+    'action-hover': { form: 'default', action: 'hover' },
+    'action-active': { form: 'default', action: 'active' },
+    'action-focus-visible': { form: 'default', action: 'focus-visible' },
+  },
+  widths: [480],
+  controls: {
+    action: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="empty-state-frame">${render(props)}</div>`,
+      styles: [emptyStateStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/floating-action/floating-action.css

@@ -0,0 +1,51 @@
+.fa-frame {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  block-size: 400px;
+  transform: translate(0);
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+
+  .fa-page {
+    padding: 2.4rem;
+  }
+
+  .et-floating-action {
+    display: flex;
+    flex-direction: column;
+    gap: 1.6rem;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .fa-heading {
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 600;
+  }
+
+  .fa-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  .fa-row {
+    padding: 1.2rem;
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--et-surface-color-solid) 8%, transparent);
+    list-style: none;
+  }
+}
+
+@layer components {
+  .et-floating-action .et-floating-action-trigger:where([data-floating-action-state='floating']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
+}

package/design/sdk/components/floating-action/floating-action.ts

@@ -0,0 +1,63 @@
+import { floatingAction, floatingActionStyles } from '@ethlete/components/design/floating-action';
+import { definePart, drawing } from '@design-system';
+import frame from './floating-action.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  state?: 'inline' | 'floating' | 'hidden';
+  interaction?: Interaction;
+  filterIcon?: boolean;
+  color?: string;
+  inset?: number;
+  overRow?: boolean;
+};
+
+const SCROLL = { inline: 0, floating: 236, hidden: 980 };
+const OVER_ROW_SCROLL = 252;
+const PARAGRAPH =
+  'Pick a competition and a season, then narrow the list down by team, venue or kick-off time to find the match you are after.';
+
+const rows = Array.from({ length: 12 }, (_, index) => `<li class="fa-row">Result ${index + 1}</li>`).join('');
+const paragraphs = (count: number) => Array.from({ length: count }, () => `<p>${PARAGRAPH}</p>`).join('');
+
+const render = ({ state = 'inline', interaction, filterIcon, color, inset }: Props) =>
+  floatingAction({
+    state,
+    filterIcon,
+    trigger: { label: 'Filter (2)', color },
+    triggerAttributes: interaction ? `data-et-force="${interaction}"` : undefined,
+    heldSize: { inlineSize: filterIcon ? 132 : 104, blockSize: 40 },
+    before: `${paragraphs(2)}<h2 class="fa-heading">Results</h2>`,
+    scope: `<ul class="fa-rows">${rows}</ul>`,
+    after: paragraphs(8),
+    attributes:
+      inset === undefined
+        ? undefined
+        : `style="--et-floating-action-inset-inline-end: ${inset}px; --et-floating-action-inset-block-end: ${inset}px"`,
+  });
+
+export default definePart({
+  note: 'Q138: the floating trigger gets the Q99a 1px inset ink edge in light only, so it reaches 3:1 on a light grey row (4.68) and the page (5.48); dark unchanged.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    inline: {},
+    floating: { state: 'floating' },
+    'floating-hover': { state: 'floating', interaction: 'hover' },
+    'floating-active': { state: 'floating', interaction: 'active' },
+    'floating-focus-visible': { state: 'floating', interaction: 'focus-visible' },
+    'inline-focus-visible': { interaction: 'focus-visible' },
+    'floating-icon': { state: 'floating', filterIcon: true },
+    'floating-inset': { state: 'floating', inset: 12 },
+    'floating-danger': { state: 'floating', color: 'danger' },
+    'floating-danger-hover': { state: 'floating', color: 'danger', interaction: 'hover' },
+    'floating-over-row': { state: 'floating', overRow: true },
+    hidden: { state: 'hidden' },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="fa-frame" data-et-skip="CLIPPED"><div class="fa-page" style="margin-block-start: -${props.overRow ? OVER_ROW_SCROLL : SCROLL[props.state ?? 'inline']}px">${render(props)}</div></div>`,
+      styles: [floatingActionStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/form-field/form-field.ts

@@ -0,0 +1,118 @@
+import {
+  formField,
+  formFieldStyles,
+  input,
+  textarea,
+  type FormFieldMockOptions,
+} from '@ethlete/components/design/form-field';
+import { definePart, drawing, interactionRows } from '@design-system';
+
+type FieldInteraction = 'hover' | 'focus-visible';
+
+type FieldControl = 'input' | 'textarea';
+
+type Axes = Pick<FormFieldMockOptions, 'appearance' | 'fill' | 'labelMode' | 'size'>;
+
+type Props = Axes & {
+  control?: FieldControl;
+  value?: string;
+  textAlign?: 'center' | 'end';
+  hint?: string;
+  error?: string;
+  focused?: boolean;
+  disabled?: boolean;
+  interaction?: FieldInteraction;
+};
+
+const multiLine = 'Ada Lovelace\nAnalytical Engine notes';
+
+const axisRow: Props = { value: 'Ada Lovelace' };
+
+const AXES = {
+  appearance: ['box', 'underline'],
+  fill: ['transparent', 'filled'],
+  labelMode: ['static', 'inline', 'floating-inside', 'floating-outside'],
+  size: ['sm', 'md', 'lg'],
+} as const satisfies { [K in keyof Axes]-?: readonly NonNullable<Axes[K]>[] };
+
+const axisRows = Object.fromEntries(
+  Object.entries(AXES).flatMap(([axis, values]) =>
+    values.map((value) => [`${axis}-${value}`, { ...axisRow, [axis]: value }]),
+  ),
+) as Record<string, Props>;
+
+const interactive = interactionRows(
+  {
+    empty: { hint: 'Shown on your profile' },
+    filled: { value: 'Ada Lovelace' },
+    error: { error: 'This field is required' },
+    'textarea-empty': { control: 'textarea', hint: 'Shown on your profile' },
+    'textarea-filled': { control: 'textarea', value: multiLine },
+    'textarea-error': { control: 'textarea', error: 'This field is required' },
+    ...axisRows,
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'focus-visible'],
+    force: (props: Props, interaction: FieldInteraction): Props => ({ ...props, interaction }),
+  },
+);
+
+const ALIGNMENTS = ['center', 'end'] as const;
+
+const alignStates = Object.fromEntries(
+  ALIGNMENTS.map((textAlign) => [`text-align-${textAlign}`, { ...axisRow, textAlign }]),
+) as Record<`text-align-${(typeof ALIGNMENTS)[number]}`, Props>;
+
+const states = { ...interactive.states, ...alignStates };
+const grid = {
+  columns: interactive.grid.columns,
+  rows: {
+    ...interactive.grid.rows,
+    ...Object.fromEntries(
+      ALIGNMENTS.map((textAlign) => [`textAlign ${textAlign}`, { rest: `text-align-${textAlign}` as const }]),
+    ),
+  },
+};
+
+const markControl = (markup: string, control: FieldControl, interaction: FieldInteraction | undefined) => {
+  const frame = ['data-et-control-part', interaction && `data-et-force="${interaction}"`].filter(Boolean);
+  const native = control === 'input' ? '<input class="et-input-native"' : '<textarea class="et-textarea-native"';
+
+  return markup
+    .replace('<et-form-field ', `<et-form-field data-et-control="${control}" `)
+    .replace('<div class="et-form-field-control-frame"', `<div class="et-form-field-control-frame" ${frame.join(' ')}`)
+    .replace(native, native.replace(' class=', ' data-et-control-part class='));
+};
+
+export default definePart<Props>({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...states,
+    focused: { value: 'Ada', focused: true },
+    disabled: { value: 'Ada Lovelace', disabled: true },
+    'textarea-focused': { control: 'textarea', value: 'Ada', focused: true },
+    'textarea-disabled': { control: 'textarea', value: multiLine, disabled: true },
+  },
+  grid,
+  widths: [320],
+  controls: {
+    input: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
+    textarea: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: ({ control = 'input', value, textAlign, interaction, ...field }) =>
+    drawing({
+      body: markControl(
+        formField({
+          id: 'name',
+          label: 'Name',
+          errorColor: 'danger',
+          control: control === 'input' ? input({ value, textAlign }) : textarea({ value }),
+          ...field,
+        }),
+        control,
+        interaction,
+      ),
+      styles: formFieldStyles,
+    }),
+});

package/design/sdk/components/grid/grid.css

@@ -0,0 +1,17 @@
+.t-frame {
+  box-sizing: border-box;
+  padding: 1.6rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+@layer components {
+  .et-grid-item:focus-visible {
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-grid-item-toolbar .et-focus-ring {
+    --_et-focus-ring-color: var(--et-theme-color-ink-solid);
+  }
+}

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

@@ -0,0 +1,80 @@
+import { grid, GridMockItem, gridStyles } from '@ethlete/components/design/grid';
+import { definePart, drawing } from '@design-system';
+import frame from './grid.css?inline';
+
+type Props = {
+  layout: 'rest' | 'spans';
+  actions?: boolean;
+  item?: Partial<GridMockItem> & { id: string };
+  drag?: boolean;
+  resize?: boolean;
+  longTitle?: boolean;
+};
+
+const REST: (GridMockItem & { id: string })[] = [
+  { id: 'revenue', col: 0, row: 0, colSpan: 2, rowSpan: 1, title: 'Revenue', subtitle: 'Last 30 days' },
+  { id: 'visitors', col: 2, row: 0, colSpan: 2, rowSpan: 1, title: 'Visitors', subtitle: 'This week' },
+  { id: 'orders', col: 0, row: 1, colSpan: 2, rowSpan: 1, title: 'Orders', subtitle: 'Today' },
+  { id: 'refunds', col: 2, row: 1, colSpan: 2, rowSpan: 1, title: 'Refunds', subtitle: 'Today' },
+];
+
+const SPANS: (GridMockItem & { id: string })[] = [
+  { id: 'revenue', col: 0, row: 0, colSpan: 2, rowSpan: 1, title: 'Revenue', subtitle: 'Last 30 days' },
+  { id: 'visitors', col: 2, row: 0, colSpan: 2, rowSpan: 2, title: 'Visitors', subtitle: 'This week' },
+  { id: 'orders', col: 0, row: 1, colSpan: 1, rowSpan: 1, title: 'Orders', subtitle: 'Today' },
+  { id: 'refunds', col: 1, row: 1, colSpan: 1, rowSpan: 1, title: 'Refunds', subtitle: 'Today' },
+  { id: 'activity', col: 0, row: 2, colSpan: 4, rowSpan: 1, title: 'Activity', subtitle: 'Latest events' },
+];
+
+const LONG_TITLE = 'Revenue by region and sales channel';
+
+const itemsOf = (props: Props) => {
+  const items = (props.layout === 'rest' ? REST : SPANS).map((item) =>
+    props.item?.id === item.id ? { ...item, ...props.item } : item,
+  );
+
+  if (props.drag) {
+    return items.map((item) => {
+      if (item.id === 'orders') return { ...item, state: 'dragging' as const, offset: { x: 70, y: 18 } };
+      if (item.id === 'refunds') return { ...item, col: 0 };
+      return item;
+    });
+  }
+
+  if (props.resize) {
+    return items.map((item) =>
+      item.id === 'activity' ? { ...item, rowSpan: 2, state: 'resizing' as const, activeEdge: 's' as const } : item,
+    );
+  }
+
+  if (props.longTitle) return items.map((item) => (item.id === 'revenue' ? { ...item, title: LONG_TITLE } : item));
+
+  return items;
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    rest: { layout: 'rest' },
+    spans: { layout: 'spans' },
+    'item-hover': { layout: 'spans', item: { id: 'visitors', force: 'hover' } },
+    'item-focus-visible': { layout: 'spans', item: { id: 'visitors', force: 'focus-visible' } },
+    actions: { layout: 'spans', actions: true },
+    'action-hover': { layout: 'spans', actions: true, item: { id: 'revenue', removeForce: 'hover' } },
+    'action-focus-visible': { layout: 'spans', actions: true, item: { id: 'revenue', removeForce: 'focus-visible' } },
+    dragging: { layout: 'spans', drag: true },
+    resizing: { layout: 'spans', resize: true },
+    'long-title': { layout: 'spans', actions: true, longTitle: true },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${grid({
+        items: itemsOf(props),
+        actions: props.actions,
+        ghost: props.drag ? { col: 1, row: 1, colSpan: 1, rowSpan: 1 } : undefined,
+      })}</div>`,
+      styles: [gridStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/input/input.css

@@ -0,0 +1,75 @@
+.t-frame {
+  box-sizing: border-box;
+  display: grid;
+  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-form-field[data-text-shell] {
+    --_et-form-field-frame-border: var(--et-surface-interaction-solid);
+    --_et-form-field-frame-border-hover: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid) 75%,
+      var(--et-surface-color-solid)
+    );
+    --_et-form-field-frame-focus: var(--et-surface-color-solid);
+  }
+
+  et-form-field[data-text-shell][data-error] {
+    --_et-form-field-frame-border: var(--et-theme-color-primary-solid);
+    --_et-form-field-frame-border-hover: light-dark(
+      rgb(var(--et-color-primary-hover, var(--et-color-primary))),
+      rgb(
+        var(
+          --et-color-primary-ink-active,
+          var(
+            --et-color-primary-ink-focus,
+            var(
+              --et-color-primary-ink-hover,
+              var(
+                --et-color-primary-ink,
+                var(
+                  --et-color-primary-active,
+                  var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --_et-form-field-frame-focus: var(--et-theme-color-ink-solid);
+  }
+
+  et-form-field[data-text-shell]:is([data-focused], :has(:focus-visible)):not([data-readonly])
+    .et-form-field-control-frame {
+    border-color: var(--_et-form-field-frame-focus);
+    box-shadow: inset 0 0 0 1px var(--_et-form-field-frame-focus);
+  }
+
+  et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame {
+    border-style: dashed;
+  }
+
+  et-form-field[data-text-shell][data-readonly]:is([data-focused], :has(:focus-visible)) .et-form-field-control-frame {
+    border-color: transparent;
+    outline: 2px dashed var(--_et-form-field-frame-focus);
+    outline-offset: -2px;
+  }
+
+  et-form-field[data-text-shell] .et-form-field-prefix:not(:has(svg)) {
+    margin-inline-end: calc(4px - var(--et-form-field-control-affix-gap));
+  }
+
+  et-form-field et-label .et-label-required-marker {
+    color: var(--et-theme-color-ink-solid);
+  }
+
+  et-input .et-input-native::placeholder {
+    color: color-mix(in srgb, currentColor 60%, transparent);
+  }
+}