@ethlete/components 1.0.0-next.78 → 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

@@ -16,6 +16,7 @@ type Axes = Pick<FormFieldMockOptions, 'appearance' | 'fill' | 'labelMode' | 'si
 type Props = Axes & {
   control?: FieldControl;
   value?: string;
+  textAlign?: 'center' | 'end';
   hint?: string;
   error?: string;
   focused?: boolean;
@@ -40,7 +41,7 @@ const axisRows = Object.fromEntries(
   ),
 ) as Record<string, Props>;
 
-const { states, grid } = interactionRows(
+const interactive = interactionRows(
   {
     empty: { hint: 'Shown on your profile' },
     filled: { value: 'Ada Lovelace' },
@@ -56,6 +57,23 @@ const { states, grid } = interactionRows(
   },
 );
 
+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"';
@@ -67,7 +85,7 @@ const markControl = (markup: string, control: FieldControl, interaction: FieldIn
 };
 
 export default definePart<Props>({
-  note: 'The SDK form field with a text input and a textarea, drawn by its mocks from @ethlete/components/design.',
+  note: 'scale of the decided shape, Q182, lead merge',
   madeBy: ['claude-opus-5-5'],
   states: {
     ...states,
@@ -82,14 +100,14 @@ export default definePart<Props>({
     input: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
     textarea: { kind: 'field', input: ['pointer', 'keyboard'], disabled: true },
   },
-  render: ({ control = 'input', value, interaction, ...field }) =>
+  render: ({ control = 'input', value, textAlign, interaction, ...field }) =>
     drawing({
       body: markControl(
         formField({
           id: 'name',
           label: 'Name',
-          errorColor: 'danger-on-light',
-          control: control === 'input' ? input({ value }) : textarea({ value }),
+          errorColor: 'danger',
+          control: control === 'input' ? input({ value, textAlign }) : textarea({ value }),
           ...field,
         }),
         control,

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);
+  }
+}

package/design/sdk/components/input/input.ts

@@ -0,0 +1,79 @@
+import { textInput, type TextInputMockOptions, textInputStyles } from '@ethlete/components/design/input';
+import { definePart, drawing } from '@design-system';
+import frame from './input.css?inline';
+
+type Props = { field: TextInputMockOptions };
+
+const email = (extra: Partial<TextInputMockOptions> = {}): Props => ({
+  field: { id: 'email', label: 'Email', placeholder: 'name@example.com', ...extra },
+});
+
+const VALUE = 'lena.hoffmann@example.com';
+
+const INVALID = {
+  required: true,
+  value: 'lena.hoffmann@',
+  error: 'Enter a valid email address.',
+  errorColor: 'danger',
+} satisfies Partial<TextInputMockOptions>;
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    empty: email({ placeholder: undefined }),
+    placeholder: email(),
+    filled: email({ value: VALUE }),
+    hover: email({ force: 'hover' }),
+    'hover-filled': email({ value: VALUE, force: 'hover' }),
+    focus: email({ focused: true, force: 'focus-visible' }),
+    'focus-filled': email({ value: VALUE, focused: true, force: 'focus-visible' }),
+    'focus-hover': email({ value: VALUE, focused: true, force: ['focus-visible', 'hover'] }),
+    hint: email({ hint: 'We only use it to sign you in.' }),
+    description: email({ description: 'Your team sees this address on your profile.' }),
+    required: email({ required: true, hint: 'We only use it to sign you in.' }),
+    invalid: email(INVALID),
+    'invalid-hover': email({ ...INVALID, force: 'hover' }),
+    'invalid-focus': email({ ...INVALID, focused: true, force: 'focus-visible' }),
+    'invalid-focus-hover': email({ ...INVALID, focused: true, force: ['focus-visible', 'hover'] }),
+    disabled: email({ disabled: true }),
+    'disabled-filled': email({ value: VALUE, disabled: true }),
+    readonly: email({ value: VALUE, readonly: true }),
+    'readonly-hover': email({ value: VALUE, readonly: true, force: 'hover' }),
+    'readonly-focus': email({ value: VALUE, readonly: true, focused: true, force: 'focus-visible' }),
+    long: email({ value: 'lena.hoffmann-schulze.marketing-department@example-company.com' }),
+    'icon-affixes': {
+      field: { id: 'key', label: 'API key', placeholder: 'sk-…', prefixIcon: 'lock', suffixIcon: 'check' },
+    },
+    'text-affixes': {
+      field: { id: 'site', label: 'Website', value: 'example.com', prefix: 'https://', suffix: '.de' },
+    },
+    'text-prefix': {
+      field: { id: 'price', label: 'Price', value: '1,250.00', prefix: '€' },
+    },
+    search: {
+      field: { id: 'search', label: 'Search', type: 'search', value: 'running shoes' },
+    },
+    password: {
+      field: { id: 'password', label: 'Password', type: 'password', value: 'correct-horse' },
+    },
+    'align-end': {
+      field: { id: 'amount', label: 'Amount', value: '1,250.00', textAlign: 'end', suffix: 'EUR' },
+    },
+    mixed: {
+      field: { id: 'title', label: 'Title', value: 'shared draft title', mixed: true, mixedLabel: 'Mixed values' },
+    },
+    'no-label': {
+      field: { id: 'quick', placeholder: 'Search…', prefixIcon: 'lock' },
+    },
+    'size-sm': email({ value: VALUE, size: 'sm' }),
+    'size-lg': email({ value: VALUE, size: 'lg' }),
+    'align-center': email({ value: VALUE, textAlign: 'center' }),
+  },
+  widths: [320, 360, 640],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${textInput(props.field)}</div>`,
+      styles: [textInputStyles, frame].join('\n'),
+    }),
+});