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

package/design/sdk/foundations/elevation/shared/elevation/scene.css

@@ -0,0 +1,101 @@
+.sdk-elevation {
+  box-sizing: border-box;
+  width: max-content;
+  padding: 4rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  font-size: 1.4rem;
+}
+
+.sdk-elevation-row {
+  display: flex;
+  gap: 4rem;
+  align-items: flex-start;
+}
+
+.sdk-elevation-card,
+.sdk-elevation-panel,
+.sdk-elevation-pane-panel {
+  --sdk-elevation-edge: var(--et-surface-border-solid);
+  --sdk-elevation-highlight: 0 0 0 0 transparent;
+
+  box-sizing: border-box;
+  border: 0.1rem solid var(--sdk-elevation-edge);
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+  box-shadow: var(--sdk-elevation-highlight), var(--sdk-elevation-shadow);
+}
+
+.sdk-elevation-card {
+  --sdk-elevation-shadow:
+    0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb) / 0.2), 0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb) / 0.12);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 20rem;
+  padding: 1.6rem;
+  border-radius: 1.2rem;
+}
+
+.sdk-elevation-panel {
+  --sdk-elevation-shadow:
+    0 0.6rem 1.2rem rgb(var(--et-shadow-color-rgb) / 0.22), 0 0.2rem 0.4rem rgb(var(--et-shadow-color-rgb) / 0.14);
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  width: 28rem;
+  padding: 2rem;
+  border-radius: 1.6rem;
+}
+
+.sdk-elevation-pane-panel {
+  --sdk-elevation-shadow: var(--et-anchored-panel-shadow, 0 1rem 2.4rem rgb(var(--et-shadow-color-rgb) / 0.16));
+
+  width: 22rem;
+}
+
+.sdk-elevation-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.sdk-elevation-label {
+  color: var(--et-surface-color-muted-solid);
+  font-size: 1.2rem;
+}
+
+.sdk-elevation-muted {
+  color: var(--et-surface-color-muted-solid);
+}
+
+.sdk-elevation-line {
+  height: 3.2rem;
+  margin-top: 0.8rem;
+  border-radius: 0.6rem;
+  background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
+}
+
+.sdk-elevation-line--short {
+  width: 60%;
+  margin-top: 0;
+}
+
+.sdk-elevation-stack {
+  position: relative;
+  width: 40rem;
+  height: 30rem;
+}
+
+.sdk-elevation-stack .sdk-elevation-panel {
+  width: 32rem;
+  height: 22rem;
+}
+
+.sdk-elevation-pane--over {
+  position: absolute;
+  top: 12rem;
+  left: 16rem;
+}

package/design/sdk/foundations/elevation/shared/elevation/scene.ts

@@ -0,0 +1,74 @@
+import { selectOption, selectPanel, selectStyles } from '@ethlete/components/design/select';
+import { drawing, html } from '@design-system';
+import sceneStyles from './scene.css?inline';
+
+export type ElevationProps = { scene: 'overview' | 'stacked' };
+
+/** The variant's class for each elevated thing. */
+type ElevationEdges = { card: string; panel: string; pane: string };
+
+const OPTIONS = [
+  { value: 'drafts', label: 'Drafts' },
+  { value: 'review', label: 'In review' },
+  { value: 'merged', label: 'Merged' },
+  { value: 'archived', label: 'Archived' },
+];
+
+const pane = (id: string, edge: string) =>
+  selectPanel({
+    id,
+    color: 'brand',
+    content: OPTIONS.map((option) =>
+      selectOption(option, {
+        id: `${id}-${option.value}`,
+        selected: option.value === 'review',
+        active: option.value === 'merged' ? 'keyboard' : undefined,
+      }),
+    ).join(''),
+  }).replace(
+    '<et-select-panel class="',
+    `<et-select-panel data-et-surface-fill class="sdk-elevation-pane-panel ${edge} `,
+  );
+
+const card = (edge: string) =>
+  html`<article class="sdk-elevation-card ${edge} et-surface--inherited" data-et-surface-fill>
+    <span class="sdk-elevation-label">Card</span>
+    <strong>Season 2026</strong>
+    <span class="sdk-elevation-muted">12 matches, 3 open</span>
+  </article>`;
+
+const panel = (edge: string) =>
+  html`<section class="sdk-elevation-panel ${edge} et-surface--inherited" data-et-surface-fill>
+    <span class="sdk-elevation-label">Panel</span>
+    <strong>Edit match</strong>
+    <span class="sdk-elevation-muted">Kick-off, venue and referee</span>
+    <div class="sdk-elevation-line"></div>
+    <div class="sdk-elevation-line sdk-elevation-line--short"></div>
+  </section>`;
+
+const overview = (edges: ElevationEdges) =>
+  html`<div class="sdk-elevation-row">
+    ${card(edges.card)} ${panel(edges.panel)}
+    <div class="sdk-elevation-pane">
+      <span class="sdk-elevation-label">Overlay pane</span>
+      ${pane('overview', edges.pane)}
+    </div>
+  </div>`;
+
+const stacked = (edges: ElevationEdges) =>
+  html`<div class="sdk-elevation-stack">
+    ${panel(edges.panel)}
+    <div class="sdk-elevation-pane sdk-elevation-pane--over">${pane('stacked', edges.pane)}</div>
+  </div>`;
+
+/** Draws the elevated things of one scene on the base surface, each with its class from `edges`. */
+export const elevationScene = ({ scene }: ElevationProps, edges: ElevationEdges, styles: string) =>
+  drawing({
+    body: html`<div class="sdk-elevation">${scene === 'overview' ? overview(edges) : stacked(edges)}</div>`,
+    styles: [selectStyles, sceneStyles, styles].join('\n'),
+  });
+
+export const ELEVATION_STATES = {
+  overview: { scene: 'overview' },
+  stacked: { scene: 'stacked' },
+} satisfies Record<string, ElevationProps>;

package/design/sdk/foundations/icons/icons.ts

@@ -0,0 +1,119 @@
+import { SDK_ICONS } from '@ethlete/components/design/icon-set';
+import { definePart, iconSheet } from '@design-system';
+
+const GRID = 16;
+
+const PADDING = 1;
+
+const svg = (body: string) =>
+  `<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+
+const FILL = 'fill="currentColor" stroke="none"';
+
+const REDRAWN: Record<string, string> = {
+  'et-arrow-out-up-right': svg(
+    '<path d="M5.5 5.5H4A1.5 1.5 0 0 0 2.5 7v5A1.5 1.5 0 0 0 4 13.5h5a1.5 1.5 0 0 0 1.5-1.5v-1.5"/><path d="M9.5 2.5h4v4M13.5 2.5l-6 6"/>',
+  ),
+  'et-arrow-right': svg('<path d="M2.5 8.5h11M9 4l4.5 4.5L9 13"/>'),
+  'et-arrow-up': svg('<path d="M8.5 13.5v-11M4 7l4.5-4.5L13 7"/>'),
+  'et-arrows-left-right': svg('<path d="M2 8.5h12M5.5 5 2 8.5 5.5 12M10.5 5 14 8.5 10.5 12"/>'),
+  'et-calendar': svg('<rect x="2.5" y="3.5" width="11" height="10" rx="1.5"/><path d="M5.5 2v3M10.5 2v3M2.5 6.5h11"/>'),
+  'et-check': svg('<path d="M2.5 8.5 6 12l7.5-7.5"/>'),
+  'et-chevron': svg('<path d="M3 10.5 8 5.5l5 5"/>'),
+  'et-circle-check': svg('<circle cx="8" cy="8" r="6.25"/><path d="M5.25 8.25 7.2 10.2 10.75 6.5"/>'),
+  'et-circle-info': svg(
+    `<circle cx="8" cy="8" r="6.25"/><path d="M8 7.25V11"/><circle cx="8" cy="4.75" r=".85" ${FILL}/>`,
+  ),
+  'et-clipboard-check': svg(
+    '<path d="M5.5 3.5H4A1.5 1.5 0 0 0 2.5 5v7A1.5 1.5 0 0 0 4 13.5h8a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5h-1.5"/><rect x="5.5" y="2" width="5" height="2.5" rx=".75"/><path d="M5.5 9 7.25 10.75 10.5 7.5"/>',
+  ),
+  'et-clock': svg('<circle cx="8" cy="8" r="6.25"/><path d="M8 4.5V8l2.5 1.5"/>'),
+  'et-ellipsis': svg(
+    `<circle cx="3" cy="8" r="1.25" ${FILL}/><circle cx="8" cy="8" r="1.25" ${FILL}/><circle cx="13" cy="8" r="1.25" ${FILL}/>`,
+  ),
+  'et-ellipsis-vertical': svg(
+    `<circle cx="8" cy="3" r="1.25" ${FILL}/><circle cx="8" cy="8" r="1.25" ${FILL}/><circle cx="8" cy="13" r="1.25" ${FILL}/>`,
+  ),
+  'et-eye': svg(
+    '<path d="M1.75 8C3 5.5 5.25 3.5 8 3.5s5 2 6.25 4.5C13 10.5 10.75 12.5 8 12.5S3 10.5 1.75 8Z"/><circle cx="8" cy="8" r="2"/>',
+  ),
+  'et-eye-slash': svg(
+    '<mask id="et-eye-slash-cut"><rect width="16" height="16" fill="#fff"/><path d="M2.5 2.5l11 11" stroke="#000" stroke-width="4.2"/></mask><g mask="url(#et-eye-slash-cut)"><path d="M1.75 8C3 5.5 5.25 3.5 8 3.5s5 2 6.25 4.5C13 10.5 10.75 12.5 8 12.5S3 10.5 1.75 8Z"/><circle cx="8" cy="8" r="2"/></g><path d="M2.5 2.5l11 11"/>',
+  ),
+  'et-eyedropper': svg(
+    '<path d="M2 14l.67-.67h2l5.67-5.67"/><path d="M2.67 13.33v-2l5.67-5.67"/><path d="M10 4l1.93-1.93a1.37 1.37 0 0 1 1.93 1.93L11.93 5.93l.27.27a1.37 1.37 0 0 1-1.93 1.93l-2.4-2.4a1.37 1.37 0 0 1 1.93-1.93l.2.2Z"/>',
+  ),
+  'et-file': svg(
+    '<path d="M9 2H5a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V5.5M9 2l3.5 3.5M9 2v3.5h3.5"/>',
+  ),
+  'et-floppy-disk': svg(
+    '<path d="M2.5 2.5H11l2.5 2.5v7a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 12Z"/><path d="M5.5 2.5v3h4v-3M5.5 10.5h5"/>',
+  ),
+  'et-focus-frame': svg(
+    `<rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><rect x="5.5" y="5.5" width="5" height="5" rx=".75" ${FILL}/>`,
+  ),
+  'et-grid-2x2': svg('<rect x="2.5" y="2.5" width="11" height="11" rx="1.5"/><path d="M8 2.5v11M2.5 8h11"/>'),
+  'et-image': svg(
+    `<rect x="1.5" y="2.5" width="13" height="11" rx="1.5"/><circle cx="5.25" cy="5.75" r="1.1" ${FILL}/><path d="M3.75 11 6.5 8l1.6 1.75L10 6.5l2.25 4.5Z" ${FILL}/>`,
+  ),
+  'et-location': svg(
+    '<path d="M8 14.25s-4.75-4.2-4.75-7.75a4.75 4.75 0 0 1 9.5 0c0 3.55-4.75 7.75-4.75 7.75Z"/><circle cx="8" cy="6.5" r="1.75"/>',
+  ),
+  'et-lock': svg(
+    `<path d="M5.5 7.5V4.75a2.5 2.5 0 0 1 5 0V7.5"/><rect x="2.5" y="7.5" width="11" height="6" rx="1.5"/><circle cx="8" cy="10.5" r="1" ${FILL}/>`,
+  ),
+  'et-minus': svg('<path d="M3.5 8.5h10"/>'),
+  'et-pause': svg(
+    `<rect x="4" y="3" width="3" height="10" rx=".75" ${FILL}/><rect x="9" y="3" width="3" height="10" rx=".75" ${FILL}/>`,
+  ),
+  'et-pencil': svg(
+    '<path d="M2.5 13.5l.75-3.1L9.6 4.05a1.3 1.3 0 0 1 1.85 0l.5.5a1.3 1.3 0 0 1 0 1.85L5.6 12.75Z"/><path d="M8.5 5.25l2.25 2.25"/>',
+  ),
+  'et-play': svg('<path d="M5 3.5v9l7.5-4.5Z" fill="currentColor"/>'),
+  'et-plus': svg('<path d="M8.5 3.5v10M3.5 8.5h10"/>'),
+  'et-quote': svg(
+    `<path d="M6.5 4.5C4.5 5.17 3.5 6.83 3.5 8.83V11.5H7V8H5.17c0-1.33.47-2.2 1.33-2.67Z" ${FILL}/><path d="M12.5 4.5c-2 .67-3 2.33-3 4.33v2.67H13V8h-1.83c0-1.33.47-2.2 1.33-2.67Z" ${FILL}/>`,
+  ),
+  'et-redo': svg('<path d="M10 10l3.5-3.5L10 3M13.5 6.5h-7a3.5 3.5 0 0 0 0 7h2"/>'),
+  'et-rotate-right': svg(
+    '<path d="M2.75 6A5.5 5.5 0 0 1 12.25 4M13.5 2v4h-4M13.25 10A5.5 5.5 0 0 1 3.75 12M2.5 14v-4h4"/>',
+  ),
+  'et-star': svg(
+    '<path d="M8 2.5l1.62 3.88 4.18.33-3.18 2.74.97 4.09L8 11.35l-3.59 2.19.97-4.09L2.2 6.71l4.18-.33Z" fill="currentColor"/>',
+  ),
+  'et-thumbtack': svg('<path d="M6 2.5h4M6.75 2.5v3.75L4.5 9.5h7L9.25 6.25V2.5M8 9.5v4"/>'),
+  'et-times': svg('<path d="M4 4l8 8M12 4l-8 8"/>'),
+  'et-trash': svg(
+    '<path d="M2.5 4h11M6 4V2.75A.75.75 0 0 1 6.75 2h2.5a.75.75 0 0 1 .75.75V4M3.75 4l.7 8.75A1.25 1.25 0 0 0 5.7 14h4.6a1.25 1.25 0 0 0 1.25-1.25l.7-8.75M6.5 7v4M9.5 7v4"/>',
+  ),
+  'et-triangle-exclamation': svg(
+    `<path d="M8 1.75 14.25 13.75H1.75Z"/><path d="M8 6.25v3"/><circle cx="8" cy="11.4" r=".85" ${FILL}/>`,
+  ),
+  'et-trophy': svg(
+    '<path d="M4.5 2.5h7V6a3.5 3.5 0 0 1-7 0Z"/><path d="M4.5 3.5h-2v1a2.5 2.5 0 0 0 2.2 2.48M11.5 3.5h2v1a2.5 2.5 0 0 1-2.2 2.48M8 9.5v2M5 13.5h6l-.5-2h-5Z"/>',
+  ),
+  'et-undo': svg('<path d="M6 10 2.5 6.5 6 3M2.5 6.5h7a3.5 3.5 0 0 1 0 7h-2"/>'),
+  'et-upload': svg(
+    '<path d="M8 10V2.5M4.5 6 8 2.5 11.5 6M2.5 10.5V12A1.5 1.5 0 0 0 4 13.5h8a1.5 1.5 0 0 0 1.5-1.5v-1.5"/>',
+  ),
+};
+
+const icons = SDK_ICONS.map((icon) => {
+  const name = icon.variant ? `${icon.name}--${icon.variant}` : icon.name;
+
+  return { name, svg: REDRAWN[name] ?? icon.data, grid: GRID, padding: PADDING };
+});
+
+const titles = {
+  catalogue: `Icons: the ${SDK_ICONS.length} icons the SDK ships, at each size a component draws`,
+  construction: `Every icon on the ${GRID} px candidate grid: pixel lines, centre lines, and the ${PADDING} px padding`,
+};
+
+type View = 'catalogue' | 'construction';
+
+export default definePart<{ view: View }>({
+  note: "Today's look",
+  madeBy: ['claude-opus-5-5'],
+  states: { catalogue: { view: 'catalogue' }, construction: { view: 'construction' } },
+  render: ({ view }) => iconSheet({ view, title: titles[view], icons, sizes: [16, 20, 24] }),
+});

package/design/skeleton.ts

@@ -0,0 +1,67 @@
+import skeletonBase from '../src/lib/skeleton/skeleton.component.css?inline';
+
+export type SkeletonShapeMock = 'text' | 'rect' | 'circle';
+
+export type SkeletonItemMockOptions = {
+  /** Left out, `text`, as `et-skeleton-item` defaults to. */
+  shape?: SkeletonShapeMock;
+  /** Inline style on the item, e.g. `--et-skeleton-size: 40px` or `block-size: 140px`. */
+  style?: string;
+};
+
+export type SkeletonTextMockOptions = {
+  /** Left out, 3. */
+  lines?: number;
+  /** Width (%) of the last line. Left out, 60. */
+  lastLineWidth?: number;
+};
+
+export type SkeletonMockOptions = {
+  /** The projected content, built from `skeletonItem()`, `skeletonText()` and any layout markup. */
+  content: string;
+  /** Left out, `true`, as `et-skeleton` defaults to. */
+  animated?: boolean;
+  /** Where the shimmer is drawn, as a fraction of its sweep from 0 to 1. Left out, 0.5: the highlight centred on each bone. */
+  shimmerAt?: number;
+  /** Extra attributes on the skeleton, e.g. design markers. */
+  attributes?: string;
+};
+
+/** The stylesheet `skeleton()` draws with: the real skeleton CSS, plus the rule that holds the shimmer still. */
+export const skeletonStyles = /* @__PURE__ */ [
+  skeletonBase,
+  `.et-skeleton[data-et-shimmer-at] .et-skeleton-item::after {
+  animation-play-state: paused;
+  animation-delay: calc(var(--et-skeleton-shimmer-at) * -1 * var(--et-skeleton-duration));
+}`,
+].join('\n');
+
+/** Draws one `et-skeleton-item` as the component renders it, as HTML. */
+export const skeletonItem = (options: SkeletonItemMockOptions = {}) => {
+  const style = options.style ? ` style="${options.style}"` : '';
+
+  return `<et-skeleton-item class="et-skeleton-item" aria-hidden="true" data-shape="${options.shape ?? 'text'}"${style}></et-skeleton-item>`;
+};
+
+/** Draws an `et-skeleton-text` with its lines as the component renders it, as HTML. */
+export const skeletonText = (options: SkeletonTextMockOptions = {}) => {
+  const lines = Math.max(1, Math.floor(options.lines ?? 3));
+  const items = Array.from({ length: lines }, (_, index) =>
+    skeletonItem({ style: `inline-size: ${index === lines - 1 ? (options.lastLineWidth ?? 60) : 100}%` }),
+  ).join('');
+
+  return `<et-skeleton-text class="et-skeleton-text">${items}</et-skeleton-text>`;
+};
+
+/** Draws an `et-skeleton` around `content` as the component renders it, as HTML, without its visually hidden label and with the shimmer held at one frame. */
+export const skeleton = (options: SkeletonMockOptions) => {
+  const animated = options.animated ?? true;
+  const attributes = [
+    options.attributes,
+    `class="et-skeleton${animated ? ' et-skeleton--animated' : ''}"`,
+    'role="status"',
+    animated && `data-et-shimmer-at style="--et-skeleton-shimmer-at: ${options.shimmerAt ?? 0.5}"`,
+  ].filter(Boolean);
+
+  return `<et-skeleton ${attributes.join(' ')}>${options.content}</et-skeleton>`;
+};

package/design/slider.ts

@@ -0,0 +1,155 @@
+import formSupport from '../src/lib/forms/form-field/form-support-styles.component.css?inline';
+import label from '../src/lib/forms/form-field/headless/label.directive.css?inline';
+import hint from '../src/lib/forms/form-field/hint.component.css?inline';
+import rangeSliderBase from '../src/lib/forms/slider/range-slider.component.css?inline';
+import sliderBase from '../src/lib/forms/slider/slider.component.css?inline';
+
+/** An interaction a frame forces on a thumb with the `data-et-force` design marker. */
+export type SliderMockForce = 'hover' | 'focus-visible' | 'active';
+
+export type SliderMockMark = { value: number; label?: string };
+
+export type SliderMockOptions = {
+  /** One number draws `et-slider`, a pair draws `et-range-slider` with two thumbs. */
+  value: number | [number, number];
+  min?: number;
+  max?: number;
+  /** `true` draws a tick at every `step`; a list draws the given ticks, with labels where set. */
+  marks?: boolean | SliderMockMark[];
+  step?: number;
+  /** The label, as HTML. */
+  label?: string;
+  /** The hint, as HTML. Hidden while an `error` shows. */
+  hint?: string;
+  /** The error message, as HTML. Draws the slider touched and invalid. */
+  error?: string;
+  /** The color theme name the app registers for errors, e.g. `danger` in Storybook. */
+  errorColor?: string;
+  /** A color theme name the app registers. */
+  color?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** View-only: the value shows, the thumb takes focus but does not move. */
+  readonly?: boolean;
+  /** An unresolved bulk-edit value: the thumbs park at the track start. */
+  mixed?: boolean;
+  mixedLabel?: string;
+  orientation?: 'horizontal' | 'vertical';
+  /** Draws the value bubble an `etSliderThumbLabel` template renders above each thumb. */
+  valueLabel?: boolean;
+  /** The thumb index that is being dragged. */
+  dragging?: number;
+  /** Forced interactions, per thumb index (a single slider uses index 0). */
+  force?: Partial<Record<number, SliderMockForce | SliderMockForce[]>>;
+  /** Unique per frame: the label and message ids derive from it. */
+  id?: string;
+};
+
+/** The stylesheets `slider()` draws with: the real `et-slider`, `et-range-slider` and form support CSS. */
+export const sliderStyles = /* @__PURE__ */ [label, hint, formSupport, sliderBase, rangeSliderBase].join('\n');
+
+const styled = (css: string) => ` style="${css}"`;
+
+const forceList = (force: SliderMockForce | SliderMockForce[] | undefined) =>
+  force === undefined ? [] : Array.isArray(force) ? force : [force];
+
+/** Draws `<et-slider>`, or `<et-range-slider>` for a value pair, as HTML, with the DOM the components render. */
+export const slider = (options: SliderMockOptions) => {
+  const { id = 'slider', min = 0, max = 100, step = 1, orientation = 'horizontal' } = options;
+  const range = Array.isArray(options.value);
+  const prefix = range ? 'et-range-slider' : 'et-slider';
+  const [start, end] = Array.isArray(options.value) ? options.value : [min, options.value];
+  const values = range ? [start, end] : [end];
+  const shown = options.mixed ? values.map(() => min) : values;
+  const [shownStart, shownEnd] = options.mixed ? [min, min] : [start, end];
+  const percent = (value: number) => ((value - min) / (max - min)) * 100;
+  const ids = { hint: `et-form-field-hint-${id}`, error: `et-form-field-error-${id}` };
+  const labelId = options.label !== undefined ? `et-label-${id}` : null;
+  const invalid = options.error !== undefined;
+  const supportId = invalid ? ids.error : options.hint !== undefined ? ids.hint : null;
+  const colorClass = invalid && options.errorColor ? options.errorColor : (options.color ?? 'inherited');
+  const activeRange = options.mixed ? null : { start, end };
+
+  const markList: SliderMockMark[] =
+    options.marks === true
+      ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, index) => ({ value: min + index * step }))
+      : options.marks || [];
+  const hasMarkLabels = markList.some((mark) => !!mark.label);
+
+  const hostAttributes = [
+    `class="${prefix} et-color--${colorClass}"`,
+    options.mixed && 'data-mixed="true"',
+    `data-orientation="${orientation}"`,
+    invalid && 'data-error="true"',
+    options.disabled && 'data-disabled="true"',
+    options.readonly && 'data-readonly="true"',
+    options.dragging !== undefined && 'data-dragging="true"',
+    hasMarkLabels && 'data-mark-labels="true"',
+    options.valueLabel && 'data-thumb-value="true"',
+  ].filter(Boolean);
+
+  const labelHtml = labelId
+    ? `<et-label id="${labelId}"${options.disabled ? ' data-disabled="true"' : ''}><span class="et-label-content">${options.label}</span>${options.required ? '<span aria-hidden="true" class="et-label-required-marker">*</span>' : ''}</et-label>`
+    : '';
+
+  const fillStyle = range
+    ? `--_et-slider-fill-start: ${percent(shownStart)}; --_et-slider-fill-end: ${percent(shownEnd)};`
+    : `--_et-slider-fill-end: ${percent(shownEnd)};`;
+
+  const marksHtml = markList.length
+    ? `<div aria-hidden="true" class="${prefix}-marks">${markList
+        .map((mark) => {
+          const active = activeRange !== null && mark.value >= activeRange.start && mark.value <= activeRange.end;
+          const markLabel = mark.label ? `<span class="${prefix}-mark-label">${mark.label}</span>` : '';
+
+          return `<span class="${prefix}-mark"${active ? ' data-active="true"' : ''} data-et-slider-mark-value="${mark.value}"${styled(`--_et-slider-mark-position: ${percent(mark.value)};`)}>${markLabel}</span>`;
+        })
+        .join('')}</div>`
+    : '';
+
+  const thumbs = shown
+    .map((value, index) => {
+      const forced = forceList(options.force?.[index]);
+      const markLabel = markList.find((mark) => mark.value === values[index])?.label;
+      const valueText = options.mixed ? (options.mixedLabel ?? 'Mixed') : markLabel;
+      const ariaMin = range && index === 1 ? start : min;
+      const ariaMax = range && index === 0 ? end : max;
+      const attributes = [
+        'role="slider"',
+        `class="${prefix}-thumb"`,
+        `aria-orientation="${orientation}"`,
+        `tabindex="${options.disabled ? -1 : 0}"`,
+        `aria-valuemin="${ariaMin}"`,
+        `aria-valuemax="${ariaMax}"`,
+        !options.mixed && `aria-valuenow="${value}"`,
+        valueText && `aria-valuetext="${valueText}"`,
+        range ? `aria-label="${index === 0 ? 'Minimum' : 'Maximum'}"` : labelId && `aria-labelledby="${labelId}"`,
+        supportId && `aria-describedby="${supportId}"`,
+        options.disabled && 'aria-disabled="true"',
+        options.readonly && 'aria-readonly="true"',
+        invalid && 'aria-invalid="true"',
+        options.disabled && 'data-disabled="true"',
+        options.readonly && 'data-readonly="true"',
+        options.dragging === index && 'data-dragging="true"',
+        forced.length > 0 && `data-et-force="${forced.join(' ')}"`,
+        styled(`--_et-slider-thumb-position: ${percent(value)};`).trim(),
+      ].filter(Boolean);
+      const bubble = options.valueLabel
+        ? `<div aria-hidden="true" class="${prefix}-thumb-value">${values[index]}</div>`
+        : '';
+
+      return `<div ${attributes.join(' ')}>${bubble}</div>`;
+    })
+    .join('');
+
+  const support =
+    options.hint === undefined && options.error === undefined
+      ? ''
+      : `<et-form-support class="et-form-support"><div class="et-form-support-stack">${
+          invalid
+            ? `<div class="et-form-support-content et-form-support-errors${options.errorColor ? ` et-color--${options.errorColor}` : ''}" id="${ids.error}" aria-atomic="true" aria-live="polite" data-active="true" data-direction="from-below" data-state="active"><et-form-error class="et-form-error">${options.error}</et-form-error></div>`
+            : `<div class="et-form-support-content et-form-support-hint" id="${ids.hint}" data-active="true" data-direction="from-above" data-state="active"><et-hint>${options.hint}</et-hint></div>`
+        }</div></et-form-support>`;
+
+  return `<${prefix} ${hostAttributes.join(' ')}>${labelHtml}<div class="${prefix}-interaction"><div aria-hidden="true" class="${prefix}-rail"></div><div aria-hidden="true" class="${prefix}-fill"${styled(fillStyle)}></div>${marksHtml}${thumbs}</div>${support}</${prefix}>`;
+};