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

package/design/sdk/components/stat-tile/stat-tile.ts

@@ -0,0 +1,84 @@
+import { card, cardStyles } from '@ethlete/components/design/card';
+import { statTile, StatTileMockOptions, statTileStyles } from '@ethlete/components/design/stat-tile';
+import { definePart, drawing } from '@design-system';
+import frame from './stat-tile.css?inline';
+
+type Form =
+  | 'up-good'
+  | 'up-bad'
+  | 'down-good'
+  | 'down-unrated'
+  | 'unchanged'
+  | 'unit'
+  | 'no-value'
+  | 'without-sparkline'
+  | 'loading';
+
+type Props = { form: Form };
+
+const WEEKLY_USERS = [182, 176, 190, 201, 195, 210, 224, 218, 231, 240, 236, 252];
+const LATENCY = [180, 185, 178, 190, 196, 188, 201, 199, 205, 210, 204, 212];
+
+const DEFAULT: StatTileMockOptions = {
+  label: 'Weekly active users',
+  value: '25.2K',
+  delta: { text: '+6.8%', direction: 'up', sentiment: 'good' },
+  caption: 'vs last week',
+  sparkline: WEEKLY_USERS,
+};
+
+const FORMS: Record<Form, StatTileMockOptions> = {
+  'up-good': DEFAULT,
+  'up-bad': {
+    label: 'p95 latency',
+    value: '212',
+    unit: 'ms',
+    delta: { text: '+18', direction: 'up', sentiment: 'bad', color: 'danger' },
+    caption: 'vs last month',
+    sparkline: LATENCY,
+  },
+  'down-good': {
+    label: 'Churn rate',
+    value: '3.4%',
+    delta: { text: '-2.1%', direction: 'down', sentiment: 'good' },
+    caption: 'vs last month',
+  },
+  'down-unrated': {
+    label: 'Page views',
+    value: '12.9K',
+    delta: { text: '-310', direction: 'down' },
+    caption: 'vs last month',
+  },
+  unchanged: {
+    label: 'Open tickets',
+    value: '1,284',
+    delta: { text: '0', direction: 'neutral' },
+    caption: 'vs last month',
+  },
+  unit: { label: 'p95 latency', value: '212', unit: 'ms', caption: 'last 24 hours', sparkline: LATENCY },
+  'no-value': { label: 'Weekly active users', value: null, caption: 'vs last week' },
+  'without-sparkline': { ...DEFAULT, sparkline: undefined },
+  loading: { ...DEFAULT, loading: true },
+};
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    default: { form: 'up-good' },
+    'up-bad': { form: 'up-bad' },
+    'down-good': { form: 'down-good' },
+    'down-unrated': { form: 'down-unrated' },
+    unchanged: { form: 'unchanged' },
+    unit: { form: 'unit' },
+    'no-value': { form: 'no-value' },
+    'without-sparkline': { form: 'without-sparkline' },
+    loading: { form: 'loading' },
+  },
+  widths: [480],
+  render: ({ form }: Props) =>
+    drawing({
+      body: `<div class="stat-tile-frame">${card({ content: statTile(FORMS[form]) })}</div>`,
+      styles: [cardStyles, statTileStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/stream/stream.css

@@ -0,0 +1,48 @@
+.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;
+}
+
+.t-frame .et-stream-player-slot {
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.t-video {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--et-surface-color-solid) 14%, var(--et-surface-background-solid));
+}
+
+.t-video::after {
+  content: '';
+  inline-size: 0;
+  block-size: 0;
+  border-block: 1.4rem solid transparent;
+  border-inline-start: 2.4rem solid var(--et-surface-color-muted-solid);
+}
+
+@layer components {
+  .et-stream-player-loading .et-spinner {
+    --et-spinner-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-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/stream/stream.ts

@@ -0,0 +1,38 @@
+import { streamPlayerSlot, StreamMockState, streamStyles } from '@ethlete/components/design/stream';
+import { definePart, drawing } from '@design-system';
+import frame from './stream.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = { state: StreamMockState; button?: Interaction };
+
+const VIDEO = '<div class="t-video" aria-hidden="true"></div>';
+
+const buttonAttributes = (interaction: Interaction | undefined) =>
+  ['data-et-control="action" data-can-animate', interaction && `data-et-force="${interaction}"`]
+    .filter(Boolean)
+    .join(' ');
+
+export default definePart({
+  note: 'Decided rules only',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    player: { state: 'player' },
+    consent: { state: 'consent' },
+    loading: { state: 'loading' },
+    error: { state: 'error' },
+    'pip-placeholder': { state: 'pip-placeholder' },
+    'consent-hover': { state: 'consent', button: 'hover' },
+    'consent-active': { state: 'consent', button: 'active' },
+    'consent-focus-visible': { state: 'consent', button: 'focus-visible' },
+  },
+  widths: [320, 480, 720],
+  controls: {
+    action: { kind: 'button', input: ['pointer', 'keyboard'] },
+  },
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${streamPlayerSlot({ state: props.state, player: VIDEO, buttonAttributes: buttonAttributes(props.button) }).replace('<et-spinner ', '<et-spinner data-et-skip="CLIPPED" ')}</div>`,
+      styles: [streamStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/switch/switch.css

@@ -0,0 +1,35 @@
+@layer components {
+  et-switch:not([aria-checked='true']):not([data-indeterminate]) .et-switch-track {
+    box-shadow: inset 0 0 0 1px var(--et-surface-interaction-solid);
+  }
+
+  @media (hover: hover) {
+    et-switch:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not(
+        [data-indeterminate]
+      ),
+    :where(et-choice-field:has(.et-choice-field-label-area:hover))
+      et-switch:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate]) {
+      .et-switch-track {
+        box-shadow: inset 0 0 0 1px var(--et-surface-interaction-hover-solid);
+      }
+    }
+  }
+
+  et-switch:focus-visible .et-switch-track {
+    outline-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  et-switch[aria-checked='true'] .et-switch-track {
+    box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+  }
+
+  et-switch[data-indeterminate] {
+    .et-switch-track::before {
+      border-color: var(--et-theme-color-ink-solid);
+    }
+
+    .et-switch-thumb {
+      background-color: var(--et-theme-color-ink-solid);
+    }
+  }
+}

package/design/sdk/components/switch/switch.ts

@@ -0,0 +1,63 @@
+import { switchControl, type SwitchMockOptions, switchStyles } from '@ethlete/components/design/switch';
+import { definePart, drawing } from '@design-system';
+import offTrack from './switch.css?inline';
+
+type Interaction = 'hover' | 'focus-visible' | 'active';
+
+type Props = SwitchMockOptions & { interaction?: Interaction };
+
+const ROWS = {
+  off: {},
+  on: { checked: true },
+  indeterminate: { indeterminate: true },
+} satisfies Record<string, Props>;
+
+const INTERACTIONS = ['hover', 'focus-visible', 'active'] as const;
+
+type Row = keyof typeof ROWS;
+
+const rowStates = Object.fromEntries(
+  Object.entries(ROWS).flatMap(([row, props]) => [
+    [row, props],
+    ...INTERACTIONS.map((interaction) => [`${row}-${interaction}`, { ...props, interaction }]),
+    [`${row}-disabled`, { ...props, disabled: true }],
+  ]),
+) as Record<Row | `${Row}-${Interaction | 'disabled'}`, Props>;
+
+const columns = ['rest', ...INTERACTIONS, 'disabled'] as const;
+
+export default definePart({
+  note: 'The SDK switch, drawn by its mock from @ethlete/components/design: alone off, on and indeterminate in every interaction, and inside an et-choice-field with a label in each size and as a card. The label area skips CLIPPED: its 1.2 line height rounds the 12 and 16 px line box down by under a pixel, with no glyph cut.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...rowStates,
+    'label-sm': { label: 'Email me updates', size: 'sm', checked: true },
+    'label-md': { label: 'Email me updates', size: 'md', checked: true },
+    'label-lg': { label: 'Email me updates', size: 'lg', checked: true },
+    'card-off': { label: 'Weekly digest', variant: 'card' },
+    'card-on': { label: 'Weekly digest', variant: 'card', checked: true },
+  },
+  grid: {
+    columns,
+    rows: Object.fromEntries(
+      Object.keys(ROWS).map((row) => [
+        row,
+        Object.fromEntries(columns.map((column) => [column, column === 'rest' ? row : `${row}-${column}`])),
+      ]),
+    ) as Record<Row, Record<(typeof columns)[number], keyof typeof rowStates>>,
+  },
+  controls: {
+    switch: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: ({ interaction, ...options }: Props) =>
+    drawing({
+      body: switchControl({
+        ...options,
+        color: 'brand',
+        attributes: ['data-et-control="switch"', interaction && `data-et-force="${interaction}"`]
+          .filter(Boolean)
+          .join(' '),
+      }).replace('class="et-choice-field-label-area', 'data-et-skip="CLIPPED" class="et-choice-field-label-area'),
+      styles: [switchStyles, offTrack].join('\n'),
+    }),
+});

package/design/sdk/components/table/table.css

@@ -0,0 +1,67 @@
+.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;
+
+  .t-detail {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 1.6rem;
+    color: var(--et-surface-color-muted-solid);
+  }
+
+  .et-table-host[data-scrolled] {
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline-start: 140px;
+
+    .et-table-header-cell:nth-child(3) {
+      scroll-snap-align: start;
+    }
+  }
+}
+
+@layer components {
+  .et-table-header-label:focus-visible .et-table-header-label-box,
+  .et-table-expander:focus-visible,
+  .et-table-cell:focus-visible {
+    outline-color: var(--et-theme-color-ink-solid);
+  }
+
+  .et-table-sort-indicator {
+    color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  .et-table-busy-bar::after {
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  .et-table-row.et-table-row--selected .et-table-cell {
+    background: light-dark(
+      color-mix(in srgb, var(--_et-table-selected-accent, var(--et-theme-color-primary-solid)) 32%, transparent),
+      color-mix(in srgb, var(--_et-table-selected-accent, var(--et-theme-color-primary-solid)) 12%, transparent)
+    );
+  }
+
+  @media (hover: hover) {
+    .et-table-row.et-table-row--selected:hover .et-table-cell {
+      background: light-dark(
+        color-mix(in srgb, var(--_et-table-selected-accent, var(--et-theme-color-primary-solid)) 38%, transparent),
+        color-mix(in srgb, var(--_et-table-selected-accent, var(--et-theme-color-primary-solid)) 18%, transparent)
+      );
+    }
+  }
+
+  .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active .et-table-cell {
+    background: light-dark(
+      color-mix(in srgb, var(--_et-table-selected-accent, var(--et-theme-color-primary-solid)) 44%, transparent),
+      color-mix(in srgb, var(--_et-table-selected-accent, var(--et-theme-color-primary-solid)) 26%, transparent)
+    );
+  }
+
+  et-checkbox:is([aria-checked='true'], [aria-checked='mixed']) .et-checkbox-box {
+    outline: 1px solid var(--et-theme-color-ink-solid);
+    outline-offset: -1px;
+  }
+}

package/design/sdk/components/table/table.ts

@@ -0,0 +1,160 @@
+import { table, tableStyles, TableColumnMock, TableMockOptions, TableRowMock } from '@ethlete/components/design/table';
+import { definePart, drawing } from '@design-system';
+import frame from './table.css?inline';
+
+type Interaction = 'hover' | 'active' | 'focus-visible';
+
+type Props = {
+  appearance?: TableMockOptions['appearance'];
+  sort?: 'asc' | 'desc';
+  header?: Interaction;
+  row?: Interaction;
+  cell?: 'focus-visible';
+  selection?: boolean;
+  expanded?: boolean;
+  expander?: Interaction;
+  groups?: boolean;
+  cellError?: boolean;
+  message?: 'empty' | 'error';
+  loading?: boolean;
+  busy?: boolean;
+  longValue?: boolean;
+  wide?: 'start' | 'scrolled';
+  stickyHeader?: boolean;
+  density?: TableMockOptions['density'];
+  center?: boolean;
+};
+
+const PLAYERS: [string, string, string, string][] = [
+  ['Lena Hoffmann', 'FC Nordhafen', '14', '6'],
+  ['Mara Jensen', 'SV Lindenau', '11', '9'],
+  ['Ida Krüger', 'TSV Altmark', '9', '3'],
+  ['Pia Schulte', 'FC Nordhafen', '7', '11'],
+  ['Romy Wagner', 'SC Ostwall', '6', '2'],
+  ['Nele Brandt', 'SV Lindenau', '5', '7'],
+  ['Clara Vogt', 'TSV Altmark', '4', '4'],
+  ['Hanna Peters', 'SC Ostwall', '3', '8'],
+];
+
+const LONG = 'Hoffmann-Wiesenthal-Brandenburger-Lindqvist-Oberhausen';
+
+const columns = (
+  sort: Props['sort'],
+  header: Props['header'],
+  align: TableColumnMock['align'] = 'end',
+): TableColumnMock[] => [
+  { header: 'Player', sortable: true, sort: sort ?? 'asc' },
+  {
+    header: 'Team',
+    sortable: true,
+    labelAttributes: header ? `data-et-force="${header}"` : undefined,
+  },
+  { header: 'Goals', sortable: true, align },
+  { header: 'Assists', align },
+];
+
+const WIDE_HEADERS = ['Team', 'Goals', 'Assists', 'Shots', 'Minutes', 'Cards'];
+const WIDE: string[][] = [
+  ['FC Nordhafen', '14', '6', '41', '1 620', '2'],
+  ['SV Lindenau', '11', '9', '36', '1 540', '1'],
+  ['TSV Altmark', '9', '3', '30', '1 390', '4'],
+  ['FC Nordhafen', '7', '11', '22', '1 480', '0'],
+];
+
+const wideTable = (scrolled: boolean) =>
+  table({
+    errorColor: 'danger',
+    tracks: '140px 132px repeat(5, 96px)',
+    columns: [
+      { header: 'Player', sortable: true, sort: 'asc', sticky: scrolled ? { side: 'start', offset: 0 } : undefined },
+      ...WIDE_HEADERS.map((header, index) => ({ header, align: index === 0 ? undefined : ('end' as const) })),
+    ],
+    rows: WIDE.map((cells, index) => ({ cells: [PLAYERS[index]?.[0] ?? '', ...cells] })),
+    scrolled: scrolled ? { inlineStart: true, inlineEnd: true } : { inlineEnd: true },
+    attributes: scrolled ? 'data-scrolled' : undefined,
+  });
+
+const rows = (props: Props): TableRowMock[] =>
+  PLAYERS.slice(props.stickyHeader ? 3 : 0, props.stickyHeader ? 8 : 4).map((cells, index) => {
+    const row: TableRowMock = { cells: [...cells] };
+
+    if (props.longValue && index === 1) row.cells[0] = LONG;
+    if (props.cellError && index === 1) {
+      row.cells[2] = { value: '—', state: 'error', message: 'Goals could not be loaded' };
+    }
+    if (props.cell && index === 1) row.cells[1] = { value: cells[1], attributes: `data-et-force="${props.cell}"` };
+    if (props.row && index === 1) row.attributes = `data-et-force="${props.row}"`;
+    if (props.selection) row.selected = index === 1 || index === 2;
+    if (props.expanded && index === 1) {
+      row.detail = `<div class="t-detail"><span>Club since 2021</span><span>Left foot</span><span>2 hat-tricks this season</span></div>`;
+    }
+    if (props.expander && index === 1) row.expanderAttributes = `data-et-force="${props.expander}"`;
+    if (props.expanded && index === 3) row.noExpander = true;
+
+    return row;
+  });
+
+const render = (props: Props) => {
+  if (props.wide) return wideTable(props.wide === 'scrolled');
+
+  return table({
+    errorColor: 'danger',
+    tracks: 'minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr)',
+    appearance: props.appearance,
+    density: props.density,
+    columns: columns(props.sort, props.header, props.center ? 'center' : undefined),
+    rows: rows(props),
+    selection: props.selection ? 'mixed' : undefined,
+    expandable: props.expanded || props.expander !== undefined,
+    groups: props.groups ? [{ span: 2 }, { label: 'Season', span: 2 }] : undefined,
+    message: props.message,
+    placeholder: props.loading ? { rows: 4, widths: [70, 55, 30, 30] } : undefined,
+    busyAt: props.busy ? 0.4 : undefined,
+    interactive: props.row !== undefined,
+    cellNavigation: props.cell !== undefined,
+    scrolled: props.stickyHeader ? { blockStart: true } : undefined,
+  });
+};
+
+export default definePart({
+  note: 'scale of the decided shape, Q182, lead merge',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    rest: {},
+    'sort-desc': { sort: 'desc' },
+    'header-hover': { header: 'hover' },
+    'header-active': { header: 'active' },
+    'header-focus-visible': { header: 'focus-visible' },
+    'row-hover': { row: 'hover' },
+    'row-active': { row: 'active' },
+    'cell-focus-visible': { cell: 'focus-visible' },
+    divided: { appearance: 'divided' },
+    zebra: { appearance: 'zebra' },
+    grid: { appearance: 'grid' },
+    bare: { appearance: 'bare' },
+    selection: { selection: true },
+    'selection-hover': { selection: true, row: 'hover' },
+    expanded: { expanded: true },
+    'expander-hover': { expanded: true, expander: 'hover' },
+    'expander-focus-visible': { expanded: true, expander: 'focus-visible' },
+    'group-header': { groups: true },
+    'cell-error': { cellError: true },
+    empty: { message: 'empty' },
+    error: { message: 'error' },
+    loading: { loading: true },
+    busy: { busy: true },
+    'long-value': { longValue: true },
+    'wide-scroll': { wide: 'start' },
+    'sticky-column': { wide: 'scrolled' },
+    'sticky-header': { stickyHeader: true },
+    'density-sm': { density: 'sm' },
+    'density-lg': { density: 'lg' },
+    'align-center': { center: true },
+  },
+  widths: [480],
+  render: (props: Props) =>
+    drawing({
+      body: `<div class="t-frame">${render(props)}</div>`,
+      styles: [tableStyles, frame].join('\n'),
+    }),
+});

package/design/sdk/components/tabs/tabs.css

@@ -0,0 +1,13 @@
+@layer components {
+  .et-tab-group__trigger {
+    --_et-focus-ring-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  .et-tab-group__trigger:focus-visible .et-tab-group__trigger-content {
+    outline-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+  }
+
+  .et-tab-group {
+    --et-tab-baseline-opacity: 1;
+  }
+}

package/design/sdk/components/tabs/tabs.ts

@@ -0,0 +1,74 @@
+import { iconMarkup } from '@ethlete/components/design/icon';
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { tabs, type TabsMockOptions, tabsStyles } from '@ethlete/components/design/tabs';
+import { definePart, drawing, interactionRows } from '@design-system';
+import edge from './tabs.css?inline';
+
+type TriggerInteraction = 'hover' | 'active' | 'focus-visible';
+
+type Props = TabsMockOptions & { forced?: { tab: number; interaction: TriggerInteraction } };
+
+const TABS = [{ label: 'Overview' }, { label: 'Activity' }, { label: 'Settings' }];
+const WITH_DISABLED = [...TABS, { label: 'Billing', disabled: true }];
+
+const icon = (name: string) =>
+  iconMarkup(
+    SDK_ICONS.find((each) => each.name === name)!,
+    'et-tab-group__trigger-icon',
+  );
+const WITH_ICONS = [
+  { label: `${icon('et-grid-2x2')}Overview` },
+  { label: `${icon('et-clock')}Activity` },
+  { label: `${icon('et-pencil')}Settings` },
+];
+const ICON_ONLY = [
+  { label: icon('et-grid-2x2'), name: 'Overview' },
+  { label: icon('et-clock'), name: 'Activity' },
+  { label: icon('et-pencil'), name: 'Settings' },
+];
+const ICON_ONLY_LABELS = Object.fromEntries(ICON_ONLY.map(({ name }, index) => [index, `aria-label="${name}"`]));
+
+const { states, grid } = interactionRows(
+  {
+    tab: { tabs: TABS, selected: 0 },
+    selected: { tabs: TABS, selected: 1 },
+  } satisfies Record<string, Props>,
+  {
+    interactions: ['hover', 'active', 'focus-visible'],
+    force: (props: Props, interaction: TriggerInteraction): Props => ({ ...props, forced: { tab: 1, interaction } }),
+  },
+);
+
+export default definePart({
+  note: 'The SDK tab group, drawn by its mock from @ethlete/components/design: the bar with its triggers, the underline of the selected tab and the baseline, in every size, both variants and both orientations.',
+  madeBy: ['claude-opus-5-5'],
+  states: {
+    ...states,
+    disabled: { tabs: WITH_DISABLED, selected: 0 },
+    sm: { tabs: TABS, size: 'sm' },
+    lg: { tabs: TABS, size: 'lg' },
+    primary: { tabs: TABS, variant: 'primary' },
+    icons: { tabs: WITH_ICONS },
+    'primary-icons': { tabs: WITH_ICONS, variant: 'primary' },
+    'icon-only': { tabs: ICON_ONLY, triggerAttributes: ICON_ONLY_LABELS },
+    'primary-icon-only': { tabs: ICON_ONLY, triggerAttributes: ICON_ONLY_LABELS, variant: 'primary' },
+    'no-divider': { tabs: TABS, divider: false },
+    vertical: { tabs: TABS, orientation: 'vertical' },
+    panel: { tabs: TABS, panel: '<p>Three open tasks, two of them due this week.</p>' },
+  },
+  grid,
+  widths: [480],
+  controls: {
+    tab: { kind: 'button', input: ['pointer', 'keyboard'], disabled: true },
+  },
+  render: ({ forced, ...props }: Props) =>
+    drawing({
+      body: tabs({
+        ...props,
+        triggerAttributes: forced
+          ? { ...props.triggerAttributes, [forced.tab]: `data-et-force="${forced.interaction}"` }
+          : props.triggerAttributes,
+      }).replaceAll('role="tab"', 'data-et-control="tab" role="tab"'),
+      styles: [tabsStyles, edge].join('\n'),
+    }),
+});