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

package/design/bracket.ts

@@ -0,0 +1,457 @@
+import {
+  BRACKET_DATA_LAYOUT,
+  BracketComponents,
+  BracketDataSource,
+  BracketDrawing,
+  BracketMatchComponent,
+  BracketRoundHeaderComponent,
+  BracketContinueComponent,
+  BracketRoundType,
+  COMMON_BRACKET_ROUND_TYPE,
+  ComputedBracketGrid,
+  createBracket,
+  createDoubleEliminationGrid,
+  createSingleEliminationGrid,
+  drawMan,
+  FinalizedBracketElement,
+  SINGLE_ELIMINATION_BRACKET_ROUND_TYPE,
+  TOURNAMENT_MODE,
+} from '@ethlete/bracket';
+import continueBase from '../src/lib/bracket/bracket-default-continue.component.css?inline';
+import finalMatchBase from '../src/lib/bracket/bracket-default-final-match.component.css?inline';
+import defaultMatchBase from '../src/lib/bracket/bracket-default-match.component.css?inline';
+import roundHeaderBase from '../src/lib/bracket/bracket-default-round-header.component.css?inline';
+import participantsBase from '../src/lib/bracket/bracket-participants.component.css?inline';
+import bracketBase from '../src/lib/bracket/bracket.component.css?inline';
+import { ARROW_RIGHT_ICON } from '../src/lib/icon/headless/arrow-right-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { TROPHY_ICON } from '../src/lib/icon/headless/trophy-icon';
+import { button, buttonStyles } from './button';
+import { iconMarkup } from './icon';
+import { matchCard, MatchMockParticipant, matchStyles } from './match';
+
+export type BracketMockParticipant = MatchMockParticipant & {
+  /** The id the source names the participant by; the journey highlight and the legend key on it. */
+  id: string;
+};
+
+export type BracketMockMatch = {
+  /** Left out, `<round id>-m<index>`. */
+  id?: string;
+  /** Left out, the side is still to be decided. */
+  home?: BracketMockParticipant;
+  away?: BracketMockParticipant;
+  /** Left out, `finished` when the match has a winner, `scheduled` otherwise. */
+  status?: 'scheduled' | 'live' | 'finished';
+  homeScore?: number | string;
+  awayScore?: number | string;
+  winnerSide?: 'home' | 'away';
+  /** The kick-off as the card formats it, e.g. `05/03/2026 1:00 AM`. */
+  startTime?: string;
+  label?: string;
+  /** A design marker on the match card, e.g. `hover` or `focus-visible`. */
+  force?: string;
+};
+
+export type BracketMockRound = {
+  /** Left out, `r<index>`. */
+  id?: string;
+  name: string;
+  /** Left out, the last round of a single elimination source is the final and every other round a bracket round. */
+  type?: BracketRoundType;
+  matches: readonly BracketMockMatch[];
+};
+
+/** The layout settings of `et-bracket` that move cells or connectors; left out, each takes the lib default or the density preset. */
+export type BracketMockSettings = {
+  density?: 'default' | 'compact';
+  columnWidth?: number;
+  matchHeight?: number;
+  finalMatchHeight?: number;
+  finalColumnWidth?: number;
+  roundHeaderHeight?: number;
+  roundHeaderGap?: number;
+  columnGap?: number;
+  rowGap?: number;
+  rowRoundGap?: number;
+  rowSpanRoundId?: string | null;
+  thirdPlaceTopOffset?: number | null;
+  finalRoundHeaderGap?: number | null;
+  alignRoundHeaders?: 'start' | 'center';
+  lineStartingCurveAmount?: number;
+  lineEndingCurveAmount?: number;
+  lineWidth?: number;
+  lineDashArray?: number;
+  lineDashOffset?: number;
+  hideRoundHeaders?: boolean;
+  showContinueElement?: boolean;
+  continueColumnWidth?: number;
+  continueElementHeight?: number;
+  continueLineDashArray?: number;
+  roundHeaderLevel?: number;
+};
+
+export type BracketMockLabels = {
+  roundMatchCount: (matches: number) => string;
+  winnersAdvance: (winners: number) => string;
+  continueLabel: (winners: number) => string;
+  champion: (participant: string) => string;
+  championPending: string;
+};
+
+export type BracketMockOptions = {
+  mode?: 'single-elimination' | 'double-elimination';
+  /** Folds the bracket in half, as the mirrored layouts draw it. */
+  mirrored?: boolean;
+  rounds: readonly BracketMockRound[];
+  settings?: BracketMockSettings;
+  /** The participant whose journey is lit, as a hover over their row (`pinned` left out) or as `focusedParticipantId`. */
+  journey?: { participantId: string; pinned?: boolean };
+  labels?: BracketMockLabels;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+export type BracketParticipantsMockOptions = {
+  participants: readonly BracketMockParticipant[];
+  /** The participant whose toggle is pressed. */
+  focusedParticipantId?: string;
+  ariaLabel?: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+type Settings = Required<Omit<BracketMockSettings, 'density'>>;
+
+const DEFAULTS: Settings = {
+  columnWidth: 250,
+  matchHeight: 75,
+  finalMatchHeight: 200,
+  finalColumnWidth: 360,
+  roundHeaderHeight: 50,
+  roundHeaderGap: 20,
+  columnGap: 60,
+  rowGap: 30,
+  rowRoundGap: 20,
+  rowSpanRoundId: null,
+  thirdPlaceTopOffset: null,
+  finalRoundHeaderGap: null,
+  alignRoundHeaders: 'start',
+  lineStartingCurveAmount: 10,
+  lineEndingCurveAmount: 0,
+  lineWidth: 2,
+  lineDashArray: 0,
+  lineDashOffset: 0,
+  hideRoundHeaders: false,
+  showContinueElement: false,
+  continueColumnWidth: 250,
+  continueElementHeight: 75,
+  continueLineDashArray: 6,
+  roundHeaderLevel: 3,
+};
+
+const COMPACT: Partial<Settings> = {
+  columnWidth: 140,
+  matchHeight: 52,
+  finalColumnWidth: 200,
+  finalMatchHeight: 132,
+  roundHeaderHeight: 34,
+  roundHeaderGap: 12,
+  columnGap: 32,
+  rowGap: 16,
+  rowRoundGap: 12,
+  lineStartingCurveAmount: 6,
+  continueColumnWidth: 140,
+  continueElementHeight: 52,
+};
+
+const DEFAULT_LABELS: BracketMockLabels = {
+  roundMatchCount: (matches) => `${matches} ${matches === 1 ? 'match' : 'matches'}`,
+  winnersAdvance: (winners) => `${winners} ${winners === 1 ? 'winner advances' : 'winners advance'}`,
+  continueLabel: (winners) => `${winners} ${winners === 1 ? 'winner advances' : 'winners advance'} to the next stage`,
+  champion: (participant) => `Champion: ${participant}`,
+  championPending: 'Champion not decided yet',
+};
+
+/** The stylesheets the bracket mocks draw with: the real bracket, default card, match card, icon and button CSS. */
+export const bracketStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  matchStyles,
+  bracketBase,
+  roundHeaderBase,
+  defaultMatchBase,
+  finalMatchBase,
+  continueBase,
+  participantsBase,
+].join('\n');
+
+const ROUND_HEADER = class {} as unknown as BracketRoundHeaderComponent<null, BracketMockMatch>;
+const MATCH = class {} as unknown as BracketMatchComponent<null, BracketMockMatch>;
+const FINAL_MATCH = class {} as unknown as BracketMatchComponent<null, BracketMockMatch>;
+const CONTINUE = class {} as unknown as BracketContinueComponent<null, BracketMockMatch>;
+
+const COMPONENTS: BracketComponents<null, BracketMockMatch> = {
+  roundHeader: ROUND_HEADER,
+  match: MATCH,
+  finalMatch: FINAL_MATCH,
+  continue: CONTINUE,
+};
+
+const settingsOf = (settings: BracketMockSettings = {}): Settings => {
+  const preset = settings.density === 'compact' ? COMPACT : {};
+  const resolved = { ...DEFAULTS, ...preset } as Settings;
+
+  for (const [key, value] of Object.entries(settings)) {
+    if (key !== 'density' && value !== undefined) (resolved as Record<string, unknown>)[key] = value;
+  }
+
+  return resolved;
+};
+
+const sourceOf = (options: BracketMockOptions): BracketDataSource<null, BracketMockMatch> => {
+  const mode = options.mode ?? TOURNAMENT_MODE.SINGLE_ELIMINATION;
+  const last = options.rounds.length - 1;
+
+  const rounds = options.rounds.map((round, index) => ({
+    id: round.id ?? `r${index}`,
+    name: round.name,
+    data: null,
+    type:
+      round.type ??
+      (index === last
+        ? COMMON_BRACKET_ROUND_TYPE.FINAL
+        : SINGLE_ELIMINATION_BRACKET_ROUND_TYPE.SINGLE_ELIMINATION_BRACKET),
+  }));
+
+  const matches = options.rounds.flatMap((round, roundIndex) =>
+    round.matches.map((match, index) => {
+      const roundId = rounds[roundIndex]?.id ?? '';
+
+      return {
+        id: match.id ?? `${roundId}-m${index}`,
+        roundId,
+        data: match,
+        home: match.home?.id ?? null,
+        away: match.away?.id ?? null,
+        winner: match.winnerSide ?? null,
+        status: (match.winnerSide ? 'completed' : 'pending') as 'completed' | 'pending',
+      };
+    }),
+  );
+
+  return { mode, rounds, matches };
+};
+
+const px = (value: number) => `${value}px`;
+
+const styled = (css: string) => ` style="${css}"`;
+
+const drawingOf = (grid: ComputedBracketGrid<null, BracketMockMatch>, settings: Settings): BracketDrawing =>
+  drawMan({
+    columnGap: settings.columnGap,
+    upperLowerGap: settings.rowRoundGap,
+    columnWidth: settings.columnWidth,
+    matchHeight: settings.matchHeight,
+    roundHeaderHeight: settings.hideRoundHeaders ? 0 : settings.roundHeaderHeight,
+    rowGap: settings.rowGap,
+    bracketGrid: grid,
+    curve: {
+      lineEndingCurveAmount: settings.lineEndingCurveAmount,
+      lineStartingCurveAmount: settings.lineStartingCurveAmount,
+    },
+    path: { dashArray: settings.lineDashArray, dashOffset: settings.lineDashOffset, width: settings.lineWidth },
+    continuePath: {
+      dashArray: settings.continueLineDashArray,
+      dashOffset: settings.lineDashOffset,
+      width: settings.lineWidth,
+    },
+  });
+
+const svgOf = (drawing: BracketDrawing) => {
+  const gradients = drawing.gradients.length
+    ? `<defs>${drawing.gradients
+        .map(
+          (gradient) =>
+            `<linearGradient id="${gradient.id}" x1="${gradient.fromX}" x2="${gradient.toX}" gradientUnits="userSpaceOnUse" y1="0" y2="0">${gradient.stops.map((stop) => `<stop offset="${stop.offset}" stop-color="${stop.color}"></stop>`).join('')}</linearGradient>`,
+        )
+        .join('')}</defs>`
+    : '';
+  const rects = drawing.rects
+    .map(
+      (rect) =>
+        `<rect fill="none" x="${rect.x}" y="${rect.y}" width="${rect.width}" height="${rect.height}" rx="${rect.radius}" stroke="${rect.stroke}" stroke-width="${rect.strokeWidth}" class="${rect.cssClass}"></rect>`,
+    )
+    .join('');
+  const edges = drawing.edges
+    .map(
+      (edge) =>
+        `<path fill="none" d="${edge.d}" stroke="${edge.stroke}" stroke-width="${edge.strokeWidth}" stroke-dasharray="${edge.dashArray}" stroke-dashoffset="${edge.dashOffset}" class="${edge.cssClass}"${styled(`d: ${edge.cssPath.replaceAll('"', '&quot;')};`)}></path>`,
+    )
+    .join('');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="et-bracket-svg">${gradients}${rects}${edges}</svg>`;
+};
+
+type Journey = { shortId: string; eliminatedAtMatchId: string | null; participantId: string };
+
+const journeyOf = (bracket: ReturnType<typeof createBracket<null, BracketMockMatch>>, participantId: string) => {
+  const participant = Array.from(bracket.participants.values()).find((candidate) => candidate.id === participantId);
+
+  if (!participant) return null;
+
+  const matches = Array.from(participant.matches.values());
+  const lastMatch = matches[matches.length - 1];
+  const isOut = !!lastMatch && matches.every((match) => !!match.winner) && lastMatch.winner?.id !== participant.id;
+
+  return { shortId: participant.shortId, eliminatedAtMatchId: isOut ? lastMatch.id : null, participantId };
+};
+
+const withJourneyClasses = (classes: string, journey: Journey | null) =>
+  journey && classes.split(' ').includes(journey.shortId) ? `${classes} et-bracket-journey-active` : classes;
+
+const matchCellOf = (
+  element: Extract<FinalizedBracketElement<null, BracketMockMatch>, { type: 'match' }>,
+  context: { labels: BracketMockLabels; journey: Journey | null },
+) => {
+  const data = element.match.data;
+  const eliminatedSide =
+    context.journey?.eliminatedAtMatchId === element.match.id
+      ? (['home', 'away'] as const).find((side) => data[side]?.id === context.journey?.participantId)
+      : undefined;
+  const marked = (html: string) =>
+    eliminatedSide
+      ? html.replace(
+          `class="et-match-card-side" data-side="${eliminatedSide}"`,
+          `class="et-match-card-side et-bracket-journey-eliminated" data-side="${eliminatedSide}"`,
+        )
+      : html;
+  const card = {
+    home: data.home,
+    away: data.away,
+    status: data.status ?? (data.winnerSide ? 'finished' : 'scheduled'),
+    homeScore: data.homeScore,
+    awayScore: data.awayScore,
+    winnerSide: data.winnerSide,
+    startTime: data.startTime,
+    label: data.label,
+    force: data.force,
+  } as const;
+
+  if (element.component === FINAL_MATCH) {
+    const winner = data.winnerSide ? data[data.winnerSide] : undefined;
+    const champion = winner ? context.labels.champion(winner.name) : context.labels.championPending;
+
+    return `<et-bracket-default-final-match class="et-bracket-final-host"${winner ? ' data-decided=""' : ''}><div class="et-bracket-final-header">${iconMarkup(TROPHY_ICON, 'et-bracket-final-trophy')}<span class="et-bracket-final-round">${element.round.name}</span></div>${marked(matchCard({ ...card, className: 'et-bracket-final-card' }))}<p class="et-bracket-final-champion">${champion}</p></et-bracket-default-final-match>`;
+  }
+
+  return `<et-bracket-default-match class="et-bracket-default-match-host">${marked(matchCard({ ...card, size: 'compact', className: 'et-bracket-default-match-card', attributes: 'size="compact"' }))}</et-bracket-default-match>`;
+};
+
+/** Draws `et-bracket` with its round headers, default match and final cards, continue cells and connectors, as HTML; the cell positions and connector paths come from `@ethlete/bracket`, as in the lib. */
+export const bracket = (options: BracketMockOptions) => {
+  const settings = settingsOf(options.settings);
+  const labels = options.labels ?? DEFAULT_LABELS;
+  const mode = options.mode ?? TOURNAMENT_MODE.SINGLE_ELIMINATION;
+  const layout = options.mirrored ? BRACKET_DATA_LAYOUT.MIRRORED : BRACKET_DATA_LAYOUT.LEFT_TO_RIGHT;
+  const data = createBracket(sourceOf(options), { layout });
+  const createGrid =
+    mode === TOURNAMENT_MODE.DOUBLE_ELIMINATION ? createDoubleEliminationGrid : createSingleEliminationGrid;
+
+  const grid = createGrid(
+    data,
+    {
+      includeRoundHeaders: !settings.hideRoundHeaders,
+      columnGap: settings.columnGap,
+      rowRoundGap: settings.rowRoundGap,
+      columnWidth: settings.columnWidth,
+      matchHeight: settings.matchHeight,
+      roundHeaderHeight: settings.hideRoundHeaders ? 0 : settings.roundHeaderHeight,
+      rowGap: settings.rowGap,
+      rowSpanRoundId: settings.rowSpanRoundId,
+      layout,
+      finalMatchHeight: settings.finalMatchHeight,
+      finalColumnWidth: settings.finalColumnWidth,
+      roundHeaderGap: settings.hideRoundHeaders ? 0 : settings.roundHeaderGap,
+      finalRoundHeaderGap: settings.hideRoundHeaders ? null : settings.finalRoundHeaderGap,
+      thirdPlaceTopOffset: settings.thirdPlaceTopOffset,
+      swissGroupPadding: 10,
+      swissGroupBorderWidth: settings.lineWidth,
+      continueElement:
+        settings.showContinueElement && layout === BRACKET_DATA_LAYOUT.LEFT_TO_RIGHT
+          ? { columnWidth: settings.continueColumnWidth, elementHeight: settings.continueElementHeight }
+          : null,
+    },
+    COMPONENTS,
+  );
+  const drawing = drawingOf(grid, settings);
+  const journey = options.journey ? journeyOf(data, options.journey.participantId) : null;
+
+  if (journey) {
+    for (const edge of drawing.edges) edge.cssClass = withJourneyClasses(edge.cssClass, journey);
+  }
+
+  const columns = grid.columns
+    .map((round) => {
+      const elements = round.elements
+        .map((element) => {
+          const offset = `translate(${px(element.dimensions.left - round.dimensions.left)}, ${px(element.dimensions.top - round.dimensions.top)})`;
+          const style = styled(
+            `width: ${px(element.dimensions.width)}; height: ${px(element.dimensions.height)}; transform: ${offset};`,
+          );
+
+          if (element.type === 'header') {
+            const group = element.roundSwissGroup?.name
+              ? `<span class="et-bracket-default-round-header-group">${element.roundSwissGroup.name}</span>`
+              : '';
+
+            return `<li class="et-bracket-element et-bracket-element--header" data-align="${settings.alignRoundHeaders}"${style}><et-bracket-default-round-header role="heading" class="et-bracket-default-round-header-host" aria-level="${settings.roundHeaderLevel}"><span class="et-bracket-default-round-header-name">${element.round.name}</span>${group}<span class="et-bracket-default-round-header-count">${labels.roundMatchCount(element.round.matchCount)}</span></et-bracket-default-round-header></li>`;
+          }
+
+          if (element.type === 'continue') {
+            const count = element.matches.length;
+
+            return `<li class="et-bracket-element et-bracket-element--continue"${style}><et-bracket-default-continue class="et-bracket-default-continue-host" role="group" aria-label="${labels.continueLabel(count)}">${iconMarkup(ARROW_RIGHT_ICON, 'et-bracket-default-continue-icon')}<span aria-hidden="true" class="et-bracket-default-continue-text">${labels.winnersAdvance(count)}</span></et-bracket-default-continue></li>`;
+          }
+
+          const classes = withJourneyClasses(
+            `et-bracket-element et-bracket-element--match ${element.classes}`,
+            journey,
+          );
+          const endpoint = journey?.eliminatedAtMatchId === element.match.id ? ' et-bracket-journey-endpoint' : '';
+
+          return `<li class="${classes}${endpoint}" data-match-id="${element.match.id}"${style}>${matchCellOf(element, { labels, journey })}</li>`;
+        })
+        .join('');
+
+      return `<ul class="et-bracket-round"${styled(`width: ${px(round.dimensions.width)}; height: ${px(round.dimensions.height)}; transform: translate(${px(round.dimensions.left)}, ${px(round.dimensions.top)});`)}>${elements}</ul>`;
+    })
+    .join('');
+
+  const hostClasses = [
+    'et-bracket-host',
+    journey && 'et-bracket-host--journey-hover',
+    journey && options.journey?.pinned && 'et-bracket-host--journey-focused',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return `<et-bracket class="${hostClasses}" ${options.attributes ?? ''}><section class="et-bracket et-bracket--${data.mode}"${styled(`width: ${px(grid.raw.grid.dimensions.width)}; height: ${px(grid.raw.grid.dimensions.height)}; transform: translateX(0px);`)}>${svgOf(drawing)}${columns}</section></et-bracket>`;
+};
+
+/** Draws an `et-bracket-participants` legend with one pin toggle per participant, as HTML. */
+export const bracketParticipants = (options: BracketParticipantsMockOptions) => {
+  const toggles = options.participants
+    .map((participant) =>
+      button({
+        label: participant.name,
+        size: 'sm',
+        variant: 'outline',
+        pressed: options.focusedParticipantId === participant.id,
+        class: 'et-bracket-participants-toggle',
+      }),
+    )
+    .join('');
+
+  return `<et-bracket-participants class="et-bracket-participants" role="group" aria-label="${options.ariaLabel ?? 'Participants'}" ${options.attributes ?? ''}>${toggles}</et-bracket-participants>`;
+};

package/design/breadcrumb.ts

@@ -0,0 +1,145 @@
+import breadcrumbOverflowBase from '../src/lib/breadcrumb/breadcrumb-overflow.component.css?inline';
+import breadcrumbBase from '../src/lib/breadcrumb/breadcrumb.component.css?inline';
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import { ELLIPSIS_ICON } from '../src/lib/icon/headless/ellipsis-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import overlayContainer from '../src/lib/overlay/overlay-container.component.css?inline';
+import floatingTip from '../src/lib/overlay/floating-tip-styles.component.css?inline';
+import overlayArrow from '../src/lib/overlay/strategies/overlay-arrow-styles.component.css?inline';
+import toggletipBase from '../src/lib/toggletip/toggletip.component.css?inline';
+import { buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type BreadcrumbMockCrumb = {
+  /** The crumb content, as HTML. */
+  label: string;
+  /** Draws the crumb as a link. Left out, it is a plain `<span>`, as the page you are on. */
+  href?: string;
+  /** Extra attributes on the crumb, e.g. design markers. */
+  attributes?: string;
+};
+
+export type BreadcrumbMockOptions = {
+  crumbs: BreadcrumbMockCrumb[];
+  /**
+   * Draws the collapsed trail: the crumbs at these indexes move behind the overflow trigger. First and
+   * last must stay, as the component keeps them.
+   */
+  collapsed?: number[];
+  /** Extra attributes on the overflow trigger, e.g. design markers. */
+  overflowAttributes?: string;
+  /** Overrides the navigation and overflow labels. */
+  labels?: { navigation?: string; overflow?: string };
+  /** Extra attributes on the breadcrumb, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheets `breadcrumb()` and `breadcrumbOverflowPanel()` draw with: the real breadcrumb, icon button, toggletip and overlay pane CSS. */
+export const breadcrumbStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  iconButtonBase,
+  overlayContainer,
+  overlayArrow,
+  floatingTip,
+  toggletipBase,
+  breadcrumbBase,
+  breadcrumbOverflowBase,
+  `@layer components {
+  .et-breadcrumb-mock-pane {
+    --_et-overlay-arrow-pane-border-width: 1px;
+    inline-size: max-content;
+  }
+  .et-breadcrumb-mock-pane > .et-overlay-arrow {
+    left: 20px;
+  }
+}`,
+].join('\n');
+
+const crumb = (item: BreadcrumbMockCrumb, isCurrent: boolean) => {
+  const tag = item.href !== undefined ? 'a' : 'span';
+  const attributes = [
+    item.attributes,
+    'etbreadcrumbitem=""',
+    'class="et-breadcrumb-item"',
+    item.href !== undefined && `href="${item.href}"`,
+    isCurrent && 'aria-current="page"',
+  ].filter(Boolean);
+
+  return `<${tag} ${attributes.join(' ')}>${item.label}</${tag}>`;
+};
+
+const separator = `<span class="et-breadcrumb-separator" aria-hidden="true">${/* @__PURE__ */ iconMarkup(CHEVRON_ICON, 'et-breadcrumb-chevron')}</span>`;
+
+const overflowTrigger = (label: string, attributes?: string) => {
+  const classes = [
+    'et-surface-interactive',
+    'et-color-interactive',
+    'et-icon-button',
+    'et-focus-ring',
+    'et-color--surface',
+    'et-breadcrumb-overflow-trigger',
+  ];
+
+  return `<et-breadcrumb-overflow class="et-breadcrumb-overflow"><button ${attributes ?? ''} ettoggletiptrigger="" type="button" aria-label="${label}" aria-haspopup="dialog" aria-expanded="false" class="${classes.join(' ')}" data-variant="transparent" data-size="xs" data-can-animate="true"><div class="et-icon-button-icon">${iconMarkup(ELLIPSIS_ICON)}</div></button></et-breadcrumb-overflow>`;
+};
+
+/** Draws an `et-breadcrumb` as the component renders it, as HTML: a chevron between crumbs, the last one marked as the current page. */
+export const breadcrumb = (options: BreadcrumbMockOptions) => {
+  const { crumbs, collapsed = [] } = options;
+  const hidden = new Set(collapsed.filter((index) => index > 0 && index < crumbs.length - 1));
+  const overflowLabel = options.labels?.overflow ?? 'Show hidden levels';
+
+  const slots: string[] = [];
+  let overflowDrawn = false;
+
+  crumbs.forEach((item, index) => {
+    if (hidden.has(index)) {
+      if (overflowDrawn) return;
+      overflowDrawn = true;
+      slots.push(
+        `<li data-type="overflow" class="et-breadcrumb-slot">${overflowTrigger(overflowLabel, options.overflowAttributes)}`,
+      );
+
+      return;
+    }
+
+    slots.push(`<li data-type="item" class="et-breadcrumb-slot">${crumb(item, index === crumbs.length - 1)}`);
+  });
+
+  const list = slots.map((slot, index) => `${slot}${index < slots.length - 1 ? separator : ''}</li>`).join('');
+
+  const hostAttributes = [
+    options.attributes,
+    'class="et-breadcrumb"',
+    'role="navigation"',
+    `aria-label="${options.labels?.navigation ?? 'Breadcrumb'}"`,
+    hidden.size > 0 && 'data-collapsed=""',
+  ].filter(Boolean);
+
+  return `<et-breadcrumb ${hostAttributes.join(' ')}><ol class="et-breadcrumb-list">${list}</ol></et-breadcrumb>`;
+};
+
+/**
+ * Draws the open overflow toggletip with the hidden crumbs, in its overlay pane above the trigger, as HTML.
+ * The pane sits in flow with its arrow 20px from the start, so place it over the drawn trigger.
+ */
+export const breadcrumbOverflowPanel = (crumbs: BreadcrumbMockCrumb[], surface?: string) => {
+  const surfaceClass = `et-surface--${surface ?? 'inherited'}`;
+  const paneClasses = [
+    'et-overlay',
+    'et-overlay-runtime-pane',
+    'et-toggletip-panel',
+    'et-overlay--toggletip',
+    'et-floating-panel',
+    'et-color--inherited',
+    surfaceClass,
+    'et-with-default-animation',
+    'et-animation-enter-done',
+    'et-breadcrumb-mock-pane',
+  ];
+  const list = crumbs.map((item) => `<li>${crumb(item, false)}</li>`).join('');
+
+  return `<div class="${paneClasses.join(' ')}" data-overlay-placement="top-start"><et-toggletip class="et-toggletip et-color--inherited ${surfaceClass}" role="dialog"><div class="et-toggletip__surface"><div class="et-toggletip__content"><ol class="et-breadcrumb-overflow-list" data-toggletip-hug="">${list}</ol></div></div></et-toggletip><div et-floating-arrow class="et-overlay-arrow"></div></div>`;
+};

package/design/button.ts

@@ -2,6 +2,7 @@ import { interactiveStyles } from '@ethlete/core/design/interactive-styles';
 import focusRing from '../src/lib/focus-ring/focus-ring-styles.component.css?inline';
 import buttonProperties from '../src/lib/button/button-properties-styles.component.css?inline';
 import buttonBase from '../src/lib/button/button.component.css?inline';
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
 
 export type ButtonMockOptions = {
   /** The label, as HTML. */
@@ -49,9 +50,57 @@ export const button = (options: ButtonMockOptions) => {
     `data-icon-alignment="${iconAlignment}"`,
     `data-variant="${variant}"`,
     `data-size="${size}"`,
+    'data-can-animate="true"',
     options.pressed && `data-pressed-variant="${PRESSED_VARIANT[variant]}"`,
     options.style && `style="${options.style}"`,
   ].filter(Boolean);
 
   return `<${tag} ${attributes.join(' ')}>${iconAlignment === 'start' ? iconBox : ''}<div class="et-button-contents">${label}</div>${iconAlignment === 'end' ? iconBox : ''}</${tag}>`;
 };
+
+export type IconButtonMockOptions = Omit<ButtonMockOptions, 'label' | 'icon' | 'iconAlignment'> & {
+  /** The icon, as HTML. */
+  icon: string;
+  /** The accessible name: an icon-only button has no visible label. */
+  ariaLabel: string;
+};
+
+const ICON_PRESSED_VARIANT = {
+  filled: 'transparent',
+  outline: 'filled',
+  tonal: 'filled',
+  transparent: 'tonal',
+} as const;
+
+/** The stylesheets `iconButton()` draws with: the real `et-icon-button` CSS. */
+export const iconButtonStyles = `${interactiveStyles}\n${focusRing}\n${buttonProperties}\n${iconButtonBase}`;
+
+/** Draws `<button et-icon-button>` as HTML, the square icon-only button, with the DOM and classes the component renders. */
+export const iconButton = (options: IconButtonMockOptions) => {
+  const { icon, ariaLabel, size = 'md', variant = 'transparent', tag = 'button' } = options;
+
+  const classes = [
+    'et-surface-interactive',
+    'et-color-interactive',
+    'et-icon-button',
+    'et-focus-ring',
+    options.color ? `et-color--${options.color}` : 'et-color--inherited',
+    options.class,
+  ].filter(Boolean);
+
+  const attributes = [
+    `class="${classes.join(' ')}"`,
+    tag === 'button' && 'type="button"',
+    `aria-label="${ariaLabel}"`,
+    options.pressed && 'data-pressed="true"',
+    options.pressed !== undefined && `aria-pressed="${options.pressed}"`,
+    options.disabled && (tag === 'button' ? 'disabled aria-disabled="true"' : 'aria-disabled="true"'),
+    `data-variant="${variant}"`,
+    `data-size="${size}"`,
+    'data-can-animate="true"',
+    options.pressed && `data-pressed-variant="${ICON_PRESSED_VARIANT[variant]}"`,
+    options.style && `style="${options.style}"`,
+  ].filter(Boolean);
+
+  return `<${tag} ${attributes.join(' ')}><div class="et-icon-button-icon">${icon}</div></${tag}>`;
+};