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

package/design/calendar.ts

@@ -0,0 +1,306 @@
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import coarseGridBase from '../src/lib/calendar/calendar-coarse-grid-styles.component.css?inline';
+import comparisonBandBase from '../src/lib/calendar/calendar-comparison-band-styles.component.css?inline';
+import weekNumbersBase from '../src/lib/calendar/calendar-week-numbers-styles.component.css?inline';
+import calendarBase from '../src/lib/calendar/calendar.component.css?inline';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { buttonStyles } from './button';
+import { iconMarkup } from './icon';
+
+export type CalendarMockRange = {
+  /** An ISO date, `YYYY-MM-DD`. */
+  start: string;
+  /** An ISO date, `YYYY-MM-DD`. */
+  end: string;
+};
+
+export type CalendarMockOptions = {
+  /** Left out, `month`. */
+  view?: 'month' | 'year' | 'multiYear';
+  /** The visible month, as an ISO month `YYYY-MM`. */
+  month: string;
+  /** The first year of the year grid's page of 24. Left out, the visible year rounded down to a multiple of 24. */
+  yearPageStart?: number;
+  /** Today, as an ISO date. Pass a fixed date, never the real today. */
+  today?: string;
+  /** The selected day of a single-value calendar, as an ISO date. */
+  value?: string;
+  /** The selected range of a range calendar. */
+  range?: CalendarMockRange;
+  /** The comparison band (`etCalendarComparisonBand`). */
+  comparison?: CalendarMockRange;
+  /** The earliest selectable day, as an ISO date. */
+  min?: string;
+  /** The latest selectable day, as an ISO date. */
+  max?: string;
+  /** Days the date filter turns down, as ISO dates. */
+  disabled?: string[];
+  weekNumbers?: boolean;
+  /** Left out, `1` (Monday), as `et-calendar` defaults to without a locale. */
+  weekStartsOn?: number;
+  /** Replaces the header label, e.g. with a localized one. */
+  headerLabel?: string;
+  /** Extra attributes per cell, keyed by ISO date in the month view, `YYYY-MM` in the year view and `YYYY` in the year grid. */
+  cellAttributes?: Record<string, string>;
+  /** Extra attributes on the previous button, e.g. design markers. */
+  previousAttributes?: string;
+  /** Extra attributes on the next button, e.g. design markers. */
+  nextAttributes?: string;
+  /** Extra attributes on the header label button, e.g. design markers. */
+  labelAttributes?: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+};
+
+type Band = 'start' | 'middle' | 'end' | 'single' | null;
+
+type CellFlags = {
+  label: string;
+  key: string;
+  today: boolean;
+  selected: boolean;
+  disabled: boolean;
+  band: Band;
+  comparisonBand: Band;
+  outsideMonth?: boolean;
+};
+
+const DAY = 86_400_000;
+
+const toDay = (iso: string) => {
+  const [year = 0, month = 1, day = 1] = iso.split('-').map(Number);
+
+  return Date.UTC(year, month - 1, day) / DAY;
+};
+
+const toIso = (day: number) => new Date(day * DAY).toISOString().slice(0, 10);
+
+const isoWeek = (day: number) => {
+  const date = new Date(day * DAY);
+  const thursday = day + 3 - ((date.getUTCDay() + 6) % 7);
+  const yearStart = Date.UTC(new Date(thursday * DAY).getUTCFullYear(), 0, 1) / DAY;
+
+  return Math.floor((thursday - yearStart) / 7) + 1;
+};
+
+const monthName = (utc: number, style: 'long' | 'short') =>
+  new Intl.DateTimeFormat('en-US', { month: style, timeZone: 'UTC' }).format(utc);
+
+const bandFor = (range: { from: number; to: number } | null, [from, to]: [number, number]): Band => {
+  if (!range || to < range.from || from > range.to) return null;
+  if (range.from === range.to && from <= range.from && to >= range.to) return 'single';
+  if (from <= range.from) return 'start';
+  if (to >= range.to) return 'end';
+
+  return 'middle';
+};
+
+const toRange = (range: CalendarMockRange | undefined) =>
+  range
+    ? { from: Math.min(toDay(range.start), toDay(range.end)), to: Math.max(toDay(range.start), toDay(range.end)) }
+    : null;
+
+/** The stylesheets `calendar()` draws with: the real calendar, coarse grid, comparison band, week number, icon-button and icon CSS. */
+export const calendarStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  iconButtonBase,
+  calendarBase,
+  coarseGridBase,
+  comparisonBandBase,
+  weekNumbersBase,
+].join('\n');
+
+/** Draws `<et-calendar>` as HTML with its default header and the grid of one view, as a static snapshot of one state. */
+export const calendar = (options: CalendarMockOptions) => {
+  const { view = 'month', weekStartsOn = 1, cellAttributes = {} } = options;
+  const [year = 0, monthNumber = 1] = options.month.split('-').map(Number);
+  const month = monthNumber - 1;
+  const monthStart = Date.UTC(year, month, 1) / DAY;
+  const monthEnd = Date.UTC(year, month + 1, 0) / DAY;
+  const min = options.min ? toDay(options.min) : -Infinity;
+  const max = options.max ? toDay(options.max) : Infinity;
+  const turnedDown = new Set((options.disabled ?? []).map(toDay));
+  const today = options.today ? toDay(options.today) : null;
+  const value = options.value ? toDay(options.value) : null;
+  const range = toRange(options.range);
+  const comparison = toRange(options.comparison);
+  const pageStart = options.yearPageStart ?? Math.floor(year / 24) * 24;
+
+  const isSelectable = (day: number) => day >= min && day <= max && !turnedDown.has(day);
+  const hasSelectableDay = (from: number, to: number) => {
+    for (let day = Math.max(from, min); day <= Math.min(to, max); day++) {
+      if (!turnedDown.has(day)) return true;
+    }
+
+    return false;
+  };
+
+  const spanFlags = (from: number, to: number) => ({
+    today: today !== null && today >= from && today <= to,
+    selected:
+      (value !== null && value >= from && value <= to) ||
+      (range !== null && ((range.from >= from && range.from <= to) || (range.to >= from && range.to <= to))),
+    band: bandFor(range, [from, to]),
+    comparisonBand: bandFor(comparison, [from, to]),
+  });
+
+  const cellButton = (cell: CellFlags, coarse: boolean) => {
+    const attributes = [
+      cellAttributes[cell.key],
+      `class="et-calendar-cell${coarse ? ' et-calendar-cell--coarse' : ''}"`,
+      'type="button"',
+      'tabindex="-1"',
+      `aria-selected="${cell.selected}"`,
+      cell.disabled && 'aria-disabled="true"',
+      cell.today && 'aria-current="date"',
+      cell.selected && 'data-selected=""',
+      cell.disabled && 'data-disabled=""',
+      cell.today && 'data-today=""',
+      cell.band && `data-band="${cell.band}"`,
+      cell.comparisonBand && `data-comparison-band="${cell.comparisonBand}"`,
+      cell.outsideMonth && 'data-outside-month=""',
+    ].filter(Boolean);
+
+    return `<button ${attributes.join(' ')}><span class="et-calendar-cell-content">${cell.label}</span></button>`;
+  };
+
+  const coarseRows = (cells: CellFlags[]) => {
+    const rows: string[] = [];
+
+    for (let index = 0; index < cells.length; index += 4) {
+      const row = cells
+        .slice(index, index + 4)
+        .map((cell) => cellButton(cell, true))
+        .join('');
+      rows.push(`<div class="et-calendar-coarse-row" role="row">${row}</div>`);
+    }
+
+    return rows.join('');
+  };
+
+  const monthGrid = () => {
+    const offset = (new Date(monthStart * DAY).getUTCDay() - weekStartsOn + 7) % 7;
+    const weeks: string[] = [];
+
+    for (let weekStart = monthStart - offset; weekStart <= monthEnd; weekStart += 7) {
+      const weekNumber = options.weekNumbers
+        ? `<span class="et-calendar-week-number" role="rowheader">${isoWeek(weekStart)}</span>`
+        : '';
+      const days = Array.from({ length: 7 }, (_, index) => {
+        const day = weekStart + index;
+
+        return cellButton(
+          {
+            label: `${new Date(day * DAY).getUTCDate()}`,
+            key: toIso(day),
+            disabled: !isSelectable(day),
+            outsideMonth: day < monthStart || day > monthEnd,
+            ...spanFlags(day, day),
+          },
+          false,
+        );
+      }).join('');
+      weeks.push(`<div class="et-calendar-week" role="row">${weekNumber}${days}</div>`);
+    }
+
+    return `<div class="et-calendar-months" role="presentation"><div class="et-calendar-month" role="presentation">${weeks.join('')}</div></div>`;
+  };
+
+  const yearGrid = () =>
+    coarseRows(
+      Array.from({ length: 12 }, (_, index) => {
+        const from = Date.UTC(year, index, 1) / DAY;
+        const to = Date.UTC(year, index + 1, 0) / DAY;
+
+        return {
+          label: monthName(from * DAY, 'short'),
+          key: `${year}-${String(index + 1).padStart(2, '0')}`,
+          disabled: !hasSelectableDay(from, to),
+          ...spanFlags(from, to),
+        };
+      }),
+    );
+
+  const multiYearGrid = () =>
+    coarseRows(
+      Array.from({ length: 24 }, (_, index) => {
+        const cellYear = pageStart + index;
+        const from = Date.UTC(cellYear, 0, 1) / DAY;
+        const to = Date.UTC(cellYear, 11, 31) / DAY;
+
+        return {
+          label: `${cellYear}`,
+          key: `${cellYear}`,
+          disabled: !hasSelectableDay(from, to),
+          ...spanFlags(from, to),
+        };
+      }),
+    );
+
+  const weekdays = () => {
+    const heading = options.weekNumbers
+      ? '<span class="et-calendar-week-number-heading" role="columnheader"></span>'
+      : '';
+    const names = Array.from({ length: 7 }, (_, index) => {
+      const name = new Intl.DateTimeFormat('en-US', { weekday: 'short', timeZone: 'UTC' })
+        .format(Date.UTC(2023, 0, 1 + ((weekStartsOn + index) % 7)))
+        .slice(0, 2);
+
+      return `<span class="et-calendar-weekday" role="columnheader">${name}</span>`;
+    }).join('');
+
+    return `<div class="et-calendar-weekdays" role="row">${heading}${names}</div>`;
+  };
+
+  const [canGoPrev, canGoNext] =
+    view === 'month'
+      ? [min < monthStart, max > monthEnd]
+      : view === 'year'
+        ? [min < Date.UTC(year, 0, 1) / DAY, max > Date.UTC(year, 11, 31) / DAY]
+        : [min < Date.UTC(pageStart, 0, 1) / DAY, max > Date.UTC(pageStart + 23, 11, 31) / DAY];
+
+  const headerLabel =
+    options.headerLabel ??
+    (view === 'month'
+      ? `${monthName(monthStart * DAY, 'long')} ${year}`
+      : view === 'year'
+        ? `${year}`
+        : `${pageStart} – ${pageStart + 23}`);
+
+  const navButton = (side: 'previous' | 'next', { enabled, extra }: { enabled: boolean; extra?: string }) => {
+    const attributes = [
+      extra,
+      `class="et-calendar-nav-button et-calendar-nav-button--${side} et-icon-button et-color-interactive et-focus-ring et-color--inherited"`,
+      'type="button"',
+      `aria-label="${side === 'previous' ? 'Previous' : 'Next'}"`,
+      !enabled && 'disabled',
+      'data-variant="transparent"',
+      'data-size="sm"',
+    ].filter(Boolean);
+
+    return `<button ${attributes.join(' ')}><div class="et-icon-button-icon">${iconMarkup(CHEVRON_ICON)}</div></button>`;
+  };
+
+  const label = [
+    options.labelAttributes,
+    'class="et-calendar-header-label"',
+    'type="button"',
+    `aria-label="${view === 'multiYear' ? 'Choose date' : 'Choose year'}"`,
+  ].filter(Boolean);
+
+  const header = `<div class="et-calendar-header">${navButton('previous', { enabled: canGoPrev, extra: options.previousAttributes })}<button ${label.join(' ')}><span class="et-calendar-header-label-text" aria-live="polite"><span class="et-calendar-header-label-value">${headerLabel}</span></span>${iconMarkup(CHEVRON_ICON, 'et-calendar-header-label-icon')}</button>${navButton('next', { enabled: canGoNext, extra: options.nextAttributes })}</div>`;
+
+  const grid = view === 'month' ? monthGrid() : view === 'year' ? yearGrid() : multiYearGrid();
+  const body = `<div class="et-calendar-grid">${view === 'month' ? weekdays() : ''}<div class="et-calendar-weeks-viewport" role="presentation"><div class="et-calendar-weeks" role="rowgroup">${grid}</div></div></div>`;
+
+  const host = [
+    options.attributes,
+    'class="et-calendar"',
+    `data-view="${view}"`,
+    options.weekNumbers && 'data-week-numbers=""',
+  ].filter(Boolean);
+
+  return `<div ${host.join(' ')}>${header}${body}</div>`;
+};

package/design/card.ts

@@ -0,0 +1,92 @@
+import cardBase from '../src/lib/card/card.component.css?inline';
+import { button, ButtonMockOptions, buttonStyles } from './button';
+
+export type CardMockOptions = {
+  variant?: 'elevated' | 'outlined' | 'filled';
+  /** A surface theme name the app registers. Left out, the card takes the surface around it. */
+  surface?: string;
+  /** The projected content, as HTML. `cardContent()` draws a typical one. */
+  content: string;
+  /** Extra attributes on the card, e.g. design markers or a style. */
+  attributes?: string;
+};
+
+export type CardContentMockOptions = {
+  title?: string;
+  /** Muted text under the title, e.g. a date or a category. */
+  subtitle?: string;
+  text?: string;
+  /** Media at the top, as HTML. `cardPlaceholderMedia` draws a generic one. */
+  media?: string;
+  actions?: ButtonMockOptions[];
+};
+
+/** A generic landscape placeholder as an inline SVG, for drawing media in a card. */
+export const cardPlaceholderMedia =
+  '<svg class="et-card-mock-media" viewBox="0 0 320 140" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Placeholder image"><rect width="320" height="140" fill="#8a94a6"/><circle cx="250" cy="40" r="16" fill="#e6e9ef"/><path d="M0 140 90 60l60 50 40-30 130 60z" fill="#e6e9ef"/></svg>';
+
+/** The stylesheets `card()` and `cardContent()` draw with: the real card and button CSS, plus the mock's content layout. */
+export const cardStyles = /* @__PURE__ */ [
+  buttonStyles,
+  cardBase,
+  `@layer components {
+  .et-card-mock-media {
+    display: block;
+    inline-size: calc(100% + 2 * var(--et-card-padding));
+    block-size: auto;
+    margin: calc(-1 * var(--et-card-padding)) calc(-1 * var(--et-card-padding)) 0;
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  .et-card-mock-title {
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .et-card-mock-subtitle {
+    margin: 0.2rem 0 0;
+    font-size: 1.3rem;
+    color: var(--et-surface-color-muted-solid);
+  }
+
+  .et-card-mock-text {
+    margin: 0;
+    font-size: 1.4rem;
+    line-height: 1.5;
+  }
+
+  .et-card-mock-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}`,
+].join('\n');
+
+/** Draws an `et-card` as the component renders it, as HTML. */
+export const card = (options: CardMockOptions) => {
+  const attributes = [
+    options.attributes,
+    `data-variant="${options.variant ?? 'outlined'}"`,
+    `class="et-card et-surface--${options.surface ?? 'inherited'}"`,
+  ].filter(Boolean);
+
+  return `<et-card ${attributes.join(' ')}>${options.content}</et-card>`;
+};
+
+/** Draws typical consumer content for a card: media, a title with subtitle, text and an actions row. The SDK card ships none of these parts. */
+export const cardContent = (options: CardContentMockOptions) => {
+  const heading = options.title
+    ? `<div><h3 class="et-card-mock-title">${options.title}</h3>${options.subtitle ? `<p class="et-card-mock-subtitle">${options.subtitle}</p>` : ''}</div>`
+    : '';
+  const text = options.text ? `<p class="et-card-mock-text">${options.text}</p>` : '';
+  const actions = options.actions?.length
+    ? `<div class="et-card-mock-actions">${options.actions.map((each) => button(each)).join('')}</div>`
+    : '';
+
+  return `${options.media ?? ''}${heading}${text}${actions}`;
+};

package/design/carousel.ts

@@ -0,0 +1,240 @@
+import iconButtonBase from '../src/lib/button/icon-button.component.css?inline';
+import autoplayBase from '../src/lib/carousel/carousel-autoplay-styles.component.css?inline';
+import carouselBase from '../src/lib/carousel/carousel.component.css?inline';
+import { CHEVRON_ICON } from '../src/lib/icon/headless/chevron-icon';
+import iconBase from '../src/lib/icon/headless/icon-styles.component.css?inline';
+import { PAUSE_ICON } from '../src/lib/icon/headless/pause-icon';
+import { PLAY_ICON } from '../src/lib/icon/headless/play-icon';
+import scrollableBase from '../src/lib/scrollable/scrollable.component.css?inline';
+import { buttonStyles } from './button';
+import { iconMarkup } from './icon';
+import { scrollable } from './scrollable';
+
+export type CarouselMockSlide = {
+  /** The slide's inner HTML, as the consumer's slide template renders it. */
+  content: string;
+};
+
+export type CarouselMockOptions = {
+  slides: CarouselMockSlide[];
+  /** The index of the active slide. Left out, 0. */
+  active?: number;
+  /** Left out, `full`: one slide at a time. */
+  itemSize?: 'full' | 'half' | 'third';
+  /** Left out, true, as the `loop` input defaults to. Looping draws the clones and never disables the arrows. */
+  loop?: boolean;
+  slideAlign?: 'start' | 'center';
+  /** The gap between the slides in px, set as `--et-carousel-slide-gap`. Left out, 0. */
+  slideGap?: number;
+  /** Left out, true. */
+  showControls?: boolean;
+  /** Left out, true. */
+  showDots?: boolean;
+  /** Draws the play toggle and the countdown ring. */
+  autoplay?: boolean;
+  /** Whether autoplay runs: the toggle shows pause and the active dot counts down. Left out, true while `autoplay` is on. */
+  playing?: boolean;
+  /** The slide's autoplay time in ms. Left out, 5000. */
+  autoplayTime?: number;
+  /** Where the countdown ring is held, as a fraction of the slide's time. Left out, 0.4. */
+  autoplayProgress?: number;
+  /** Extra attributes on the previous button, e.g. design markers. */
+  previousAttributes?: string;
+  /** Extra attributes on the next button, e.g. design markers. */
+  nextAttributes?: string;
+  /** Extra attributes on the play toggle, e.g. design markers. */
+  playToggleAttributes?: string;
+  /** Extra attributes on a dot, by index, e.g. design markers. */
+  dotAttributes?: Record<number, string>;
+  /** A color theme name the app registers. Left out, the carousel takes the color theme around it. */
+  color?: string;
+  /** Extra attributes on the host, e.g. a style or design markers. */
+  attributes?: string;
+  /** Extra attributes on the track's scroll container, e.g. design markers. */
+  trackAttributes?: string;
+};
+
+const PER_VIEW = { full: 1, half: 2, third: 3 };
+
+/** The stylesheets `carousel()` draws with: the real carousel, autoplay, scrollable and icon-button CSS, plus the rules that draw the countdown at one point without its animation. */
+export const carouselStyles = /* @__PURE__ */ [
+  buttonStyles,
+  iconBase,
+  iconButtonBase,
+  scrollableBase,
+  carouselBase,
+  autoplayBase,
+  `.et-carousel .et-carousel-dot[data-et-frozen-at] .et-carousel-dot-progress-half::before {
+  --_sweep: clamp(0, var(--et-carousel-frozen-at) * 2, 1);
+  animation: none;
+  opacity: 1;
+  rotate: calc(-180deg + var(--_sweep) * 180deg);
+}
+.et-carousel .et-carousel-dot[data-et-frozen-at] .et-carousel-dot-progress-half:last-child::before {
+  --_sweep: clamp(0, var(--et-carousel-frozen-at) * 2 - 1, 1);
+  opacity: clamp(0, var(--_sweep) * 1000, 1);
+}`,
+].join('\n');
+
+type ControlOptions = { classes: string[]; label: string; disabled: boolean; icons: string; attributes?: string };
+
+const control = ({ classes, label, disabled, icons, attributes }: ControlOptions) => {
+  const hostClasses = [
+    'et-carousel-control',
+    ...classes,
+    'et-icon-button',
+    'et-color-interactive',
+    'et-focus-ring',
+    'et-color--inherited',
+  ];
+  const host = [
+    attributes,
+    `class="${hostClasses.join(' ')}"`,
+    'type="button"',
+    `aria-label="${label}"`,
+    disabled && 'aria-disabled="true"',
+    'data-variant="transparent"',
+    'data-size="sm"',
+  ].filter(Boolean);
+
+  return `<button ${host.join(' ')}><div class="et-icon-button-icon">${icons}</div></button>`;
+};
+
+/**
+ * Draws `<et-carousel>` as HTML: the scrollable track with its slides (and the clones a looping carousel adds), the
+ * previous and next buttons, the dots and the autoplay toggle with its countdown ring. The active slide is brought
+ * into view by translating the slides statically.
+ */
+export const carousel = (options: CarouselMockOptions) => {
+  const count = options.slides.length;
+  const active = Math.min(Math.max(options.active ?? 0, 0), Math.max(count - 1, 0));
+  const itemSize = options.itemSize ?? 'full';
+  const perView = PER_VIEW[itemSize];
+  const loop = options.loop ?? true;
+  const slideAlign = options.slideAlign ?? 'start';
+  const gap = options.slideGap ?? 0;
+  const autoplay = options.autoplay ?? false;
+  const playing = autoplay && (options.playing ?? true);
+  const autoplayTime = options.autoplayTime ?? 5000;
+  const cloneCount = loop && count > perView ? Math.min(count, perView + 1) : 0;
+  const looping = cloneCount > 0;
+  const firstInView = looping ? cloneCount + active : Math.min(active, Math.max(count - perView, 0));
+  const shift = slideAlign === 'center' && itemSize !== 'full' ? cloneCount + active - (perView - 1) / 2 : firstInView;
+  const atStart = !looping && firstInView === 0;
+  const atEnd = !looping && firstInView >= count - perView;
+  const canGoPrevious = count > 1 && (loop || !atStart);
+  const canGoNext = count > 1 && (loop || !atEnd);
+
+  const slideItem = (index: number, isClone: boolean) => {
+    const attributes = [
+      'class="et-carousel-item"',
+      'role="group"',
+      'aria-roledescription="slide"',
+      `aria-label="${index + 1} of ${count}"`,
+      isClone && 'aria-hidden="true" inert="" data-clone=""',
+      !isClone && index === active && 'data-active=""',
+      shift !== 0 && `style="translate: calc(${-shift} * (100% + ${gap}px)) 0"`,
+    ].filter(Boolean);
+
+    return {
+      attributes: attributes.join(' '),
+      content: `<div class="et-carousel-slide-content">${options.slides[index]?.content ?? ''}</div>`,
+    };
+  };
+
+  const items = [
+    ...Array.from({ length: cloneCount }, (_, offset) => slideItem(count - cloneCount + offset, true)),
+    ...Array.from({ length: count }, (_, index) => slideItem(index, false)),
+    ...Array.from({ length: cloneCount }, (_, index) => slideItem(index, true)),
+  ];
+
+  const track = scrollable({
+    items,
+    canScroll: count > perView,
+    position: atStart ? 'start' : atEnd ? 'end' : 'middle',
+    renderMasks: false,
+    snap: true,
+    itemSize,
+    itemGap: gap,
+    class: 'et-carousel-track',
+    containerAttributes: options.trackAttributes,
+  });
+
+  const progressAttributes = [
+    'class="et-carousel-dot-progress"',
+    'aria-hidden="true"',
+    `style="--_et-carousel-autoplay-duration: ${autoplayTime}ms"`,
+  ];
+  const progress = autoplay
+    ? `<span ${progressAttributes.join(' ')}>` +
+      `<span class="et-carousel-dot-progress-half"></span><span class="et-carousel-dot-progress-half"></span></span>`
+    : '';
+
+  const dots = Array.from({ length: count }, (_, index) => {
+    const isActive = index === active;
+    const counting = isActive && playing;
+    const attributes = [
+      options.dotAttributes?.[index],
+      'class="et-carousel-dot et-focus-ring"',
+      'type="button"',
+      `aria-label="Go to slide ${index + 1}"`,
+      isActive && 'aria-current="true" data-active=""',
+      counting && 'data-counting=""',
+      counting && `data-et-frozen-at="" style="--et-carousel-frozen-at: ${options.autoplayProgress ?? 0.4}"`,
+    ].filter(Boolean);
+
+    return `<button ${attributes.join(' ')}>${progress}</button>`;
+  }).join('');
+
+  const showControls = options.showControls ?? true;
+  const showDots = options.showDots ?? true;
+
+  const controls = [
+    showControls &&
+      control({
+        classes: [],
+        label: 'Previous slide',
+        disabled: !canGoPrevious,
+        icons: iconMarkup(CHEVRON_ICON, 'et-carousel-control-icon et-carousel-control-icon--previous'),
+        attributes: options.previousAttributes,
+      }),
+    showDots && `<div class="et-carousel-dots">${dots}</div>`,
+    autoplay &&
+      control({
+        classes: ['et-carousel-play-toggle'],
+        label: playing ? 'Pause automatic slide show' : 'Start automatic slide show',
+        disabled: false,
+        icons:
+          iconMarkup(PLAY_ICON, 'et-carousel-control-icon et-carousel-play-toggle-icon') +
+          iconMarkup(PAUSE_ICON, 'et-carousel-control-icon et-carousel-play-toggle-icon'),
+        attributes: [options.playToggleAttributes, playing && 'data-playing=""'].filter(Boolean).join(' '),
+      }),
+    showControls &&
+      control({
+        classes: [],
+        label: 'Next slide',
+        disabled: !canGoNext,
+        icons: iconMarkup(CHEVRON_ICON, 'et-carousel-control-icon et-carousel-control-icon--next'),
+        attributes: options.nextAttributes,
+      }),
+  ].filter(Boolean);
+
+  const host = [
+    options.attributes,
+    `class="${['et-carousel', options.color && `et-color--${options.color}`].filter(Boolean).join(' ')}"`,
+    'role="region"',
+    'aria-roledescription="carousel"',
+    'aria-label="Carousel"',
+    `data-slide-align="${slideAlign}"`,
+    'data-transition="none"',
+    looping && 'data-looping=""',
+    playing && 'data-autoplaying=""',
+    gap && `style="--et-carousel-slide-gap: ${gap}px"`,
+  ].filter(Boolean);
+
+  return (
+    `<et-carousel ${host.join(' ')}>${track}` +
+    (controls.length ? `<div class="et-carousel-controls">${controls.join('')}</div>` : '') +
+    `</et-carousel>`
+  );
+};