@invisibleloop/pulse 0.1.21

package/src/ui/rating.js

@@ -0,0 +1,93 @@
+/**
+ * Pulse UI — Rating
+ *
+ * Star rating display and interactive input.
+ *
+ * Without `name`: renders a read-only star display (role="img").
+ * With `name`:    renders radio inputs — submits the numeric value in FormData.
+ *
+ * The interactive version uses a pure-CSS technique:
+ *   - Stars are rendered in reverse DOM order inside a row-reverse flex container
+ *     so they appear left-to-right (★1 … ★5) visually.
+ *   - The hidden radio inputs sit between each label. Because they are
+ *     position:absolute they are removed from the flex layout but remain in the
+ *     DOM so CSS sibling selectors can reach from input → subsequent labels.
+ *   - `input:checked ~ label` fills all labels (= lower-numbered stars) after
+ *     the checked input in DOM, which appear to its left visually.
+ *   - `label:hover ~ label` fills all subsequent labels (lower stars) on hover.
+ *
+ * @param {object}  opts
+ * @param {number}  opts.value    - Current rating (0–max). Supports 0.5 steps for display.
+ * @param {number}  opts.max      - Total stars (default: 5)
+ * @param {string}  opts.name     - Field name — enables interactive radio mode
+ * @param {string}  opts.label    - Accessible group label (interactive mode)
+ * @param {'sm'|'md'|'lg'} opts.size
+ * @param {boolean} opts.disabled
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const SIZES = { sm: '1rem', md: '1.5rem', lg: '2rem' }
+
+const starFilled = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`
+const starEmpty  = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`
+const starHalf   = `<svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true"><defs><linearGradient id="half"><stop offset="50%" stop-color="currentColor"/><stop offset="50%" stop-color="transparent"/></linearGradient></defs><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#half)" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`
+
+export function rating({
+  value      = 0,
+  max        = 5,
+  name       = '',
+  label      = '',
+  size       = 'md',
+  disabled   = false,
+  class: cls = '',
+} = {}) {
+  const fontSize = SIZES[size] ?? SIZES.md
+  const classes  = ['ui-rating', cls].filter(Boolean).join(' ')
+
+  // ── Read-only display ──────────────────────────────────────────────────────
+  if (!name) {
+    const stars = Array.from({ length: max }, (_, i) => {
+      const pos = i + 1
+      if (value >= pos)       return `<span class="ui-rating-star ui-rating-star--filled">${starFilled}</span>`
+      if (value >= pos - 0.5) return `<span class="ui-rating-star ui-rating-star--half">${starHalf}</span>`
+      return `<span class="ui-rating-star">${starEmpty}</span>`
+    }).join('')
+
+    return `<div
+  class="${e(classes)}"
+  style="--rating-size:${fontSize}"
+  role="img"
+  aria-label="${e(value)} out of ${e(String(max))} stars"
+>${stars}</div>`
+  }
+
+  // ── Interactive (radio) ────────────────────────────────────────────────────
+  // Each input lives INSIDE its label — labels are the only flex items so no
+  // hidden elements can intercept pointer events between stars.
+  // Stars rendered in reverse DOM order (max → 1) inside a row-reverse flex
+  // container so they appear visually as ★1 … ★max left-to-right.
+  // CSS :has() drives the checked + hover highlight via sibling combinators.
+  const items = Array.from({ length: max }, (_, i) => {
+    const v       = max - i   // counts down: max, max-1, …, 1
+    const checked = v === Math.round(value)
+    const title   = `${v} out of ${max}`
+    return `<label class="ui-rating-star" title="${title}" aria-label="${title} stars"><input
+    type="radio"
+    name="${e(name)}"
+    value="${v}"
+    class="ui-rating-input"
+    ${checked  ? 'checked'  : ''}
+    ${disabled ? 'disabled' : ''}
+  >★</label>`
+  }).join('')
+
+  const srOnly     = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0'
+  const groupLabel = label ? `<legend style="${srOnly}">${e(label)}</legend>` : ''
+
+  return `<fieldset class="${e(classes)}" style="--rating-size:${fontSize};border:0;padding:0;margin:0"${disabled ? ' disabled' : ''}>
+  ${groupLabel}
+  <div class="ui-rating-stars">${items}</div>
+</fieldset>`
+}

package/src/ui/search.js

@@ -0,0 +1,77 @@
+/**
+ * Pulse UI — Search
+ *
+ * Search input with icon, optional clear button, and label.
+ * Handles the native browser cancel button, debounce binding,
+ * and the clear event all in one component.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.name         - Field name (also used as id base)
+ * @param {string}  opts.label        - Label text (visually shown or screen-reader only)
+ * @param {boolean} opts.labelHidden  - Hide label visually but keep for screen readers
+ * @param {string}  opts.placeholder
+ * @param {string}  opts.value        - Current search value (for re-renders)
+ * @param {string}  opts.event        - data-event binding, e.g. 'input:setSearch'
+ * @param {number}  opts.debounce     - Debounce delay in ms (default: 200)
+ * @param {string}  opts.clearEvent   - Click event fired by the clear button (shown when value is non-empty)
+ * @param {boolean} opts.disabled
+ * @param {string}  opts.id           - Override generated id
+ * @param {string}  opts.class
+ * @param {object}  opts.attrs        - Extra HTML attributes for the <input>
+ */
+
+import { escHtml as e } from '../html.js'
+import { iconSearch, iconX } from './icons.js'
+
+export function search({
+  name        = '',
+  label       = '',
+  labelHidden = false,
+  placeholder = '',
+  value       = '',
+  event       = '',
+  debounce    = 200,
+  clearEvent  = '',
+  disabled    = false,
+  id          = '',
+  class: cls  = '',
+  attrs       = {},
+} = {}) {
+  const fieldId  = e(id || `field-${name}`)
+
+  const wrapClasses = ['ui-field', 'ui-search', cls].filter(Boolean).join(' ')
+
+  const labelClasses = ['ui-label', labelHidden ? 'ui-sr-only' : ''].filter(Boolean).join(' ')
+
+  const labelHtml = label
+    ? `<label for="${fieldId}" class="${labelClasses}">${e(label)}</label>`
+    : ''
+
+  const attrsStr = Object.entries(attrs)
+    .map(([k, v]) => ` ${e(k)}="${e(String(v))}"`)
+    .join('')
+
+  const clearBtn = clearEvent && value
+    ? `<button class="ui-search-clear" data-event="${e(clearEvent)}" type="button" aria-label="Clear search">${iconX({ size: 14 })}</button>`
+    : ''
+
+  return `<div class="${e(wrapClasses)}">
+  ${labelHtml}
+  <div class="ui-search-wrap">
+    <span class="ui-search-icon" aria-hidden="true">${iconSearch({ size: 16 })}</span>
+    <input
+      id="${fieldId}"
+      name="${e(name)}"
+      type="search"
+      class="ui-search-input"
+      ${placeholder ? `placeholder="${e(placeholder)}"` : ''}
+      ${value       ? `value="${e(value)}"`              : ''}
+      ${disabled    ? 'disabled'                         : ''}
+      ${event       ? `data-event="${e(event)}"`         : ''}
+      ${event && debounce > 0 ? `data-debounce="${debounce}"` : ''}
+      ${attrsStr}
+    >
+    ${clearBtn}
+  </div>
+</div>`
+}

package/src/ui/section.js

@@ -0,0 +1,69 @@
+/**
+ * Pulse UI — Section
+ *
+ * Vertical padding wrapper with optional background variant and built-in
+ * section header (eyebrow + title + subtitle) above the content slot.
+ * Compose with container() to get a constrained-width section.
+ *
+ * @param {object} opts
+ * @param {string} opts.content                  - Raw HTML slot
+ * @param {'default'|'alt'|'dark'} opts.variant  - Background variant (default: 'default')
+ * @param {'sm'|'md'|'lg'} opts.padding          - Vertical padding size (default: 'md')
+ * @param {string} opts.id                       - Section id for anchor links
+ * @param {string} opts.eyebrow                  - Small label above the title
+ * @param {string} opts.title                    - Section heading
+ * @param {number} opts.level                    - Heading level 1–6 (default 2). Visual style is always ui-section-title.
+ * @param {string} opts.subtitle                 - Supporting text beneath the heading
+ * @param {'left'|'center'} opts.align           - Header text alignment (default: 'left')
+ * @param {'sm'|'md'|'lg'|'none'} opts.gap      - Gap between header and content (default: 'md' = 2.5rem)
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const VARIANTS = new Set(['default', 'alt', 'dark'])
+const PADDINGS = new Set(['sm', 'md', 'lg'])
+const GAPS     = new Set(['none', 'sm', 'md', 'lg'])
+
+export function section({
+  content    = '',
+  variant    = 'default',
+  padding    = 'md',
+  gap        = 'md',
+  id         = '',
+  eyebrow    = '',
+  title      = '',
+  level      = 2,
+  subtitle   = '',
+  align      = 'left',
+  class: cls = '',
+} = {}) {
+  if (!VARIANTS.has(variant)) variant = 'default'
+  if (!PADDINGS.has(padding)) padding = 'md'
+  if (!GAPS.has(gap))         gap     = 'md'
+
+  const classes = [
+    'ui-section',
+    variant !== 'default' && `ui-section--${variant}`,
+    padding !== 'md'      && `ui-section--${padding}`,
+    cls,
+  ].filter(Boolean).join(' ')
+
+  const idAttr = id ? ` id="${e(id)}"` : ''
+  const tag    = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
+
+  const headerClasses = [
+    'ui-section-header',
+    align === 'center' && 'ui-section-header--center',
+    gap   !== 'md'     && `ui-section-header--gap-${gap}`,
+  ].filter(Boolean).join(' ')
+
+  const header = (eyebrow || title || subtitle) ? `
+  <div class="${headerClasses}">
+    ${eyebrow  ? `<p class="ui-section-eyebrow">${e(eyebrow)}</p>` : ''}
+    ${title    ? `<${tag} class="ui-section-title">${e(title)}</${tag}>` : ''}
+    ${subtitle ? `<p class="ui-section-subtitle">${e(subtitle)}</p>` : ''}
+  </div>` : ''
+
+  return `<section class="${e(classes)}"${idAttr}>${header}${content}</section>`
+}

package/src/ui/segmented.js

@@ -0,0 +1,50 @@
+/**
+ * Pulse UI — Segmented Control
+ *
+ * iOS-style segmented control implemented with hidden radio inputs.
+ * The selected option's label is highlighted via input:checked + label CSS.
+ *
+ * @param {object}        opts
+ * @param {string}        opts.name     - Field name (submitted in FormData)
+ * @param {Array}         opts.options  - Array of { value, label }
+ * @param {string}        opts.value    - Currently selected value
+ * @param {boolean}       opts.disabled
+ * @param {'sm'|'md'|'lg'} opts.size   - Size variant (default: 'md')
+ * @param {string}        opts.event   - data-event binding, e.g. 'change:setTab'
+ * @param {string}        opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function segmented({
+  name       = '',
+  options    = [],
+  value      = '',
+  disabled   = false,
+  size       = 'md',
+  event      = '',
+  class: cls = '',
+} = {}) {
+  const sizeClass = size === 'sm' ? 'ui-segmented--sm'
+    : size === 'lg' ? 'ui-segmented--lg'
+    : ''
+
+  const wrapClasses = ['ui-segmented', sizeClass, cls].filter(Boolean).join(' ')
+
+  const items = options.map((opt, i) => {
+    const optId  = e(`seg-${name}-${i}`)
+    const checked = String(opt.value) === String(value)
+    return `<input
+    type="radio"
+    class="ui-segmented-input"
+    id="${optId}"
+    name="${e(name)}"
+    value="${e(String(opt.value))}"
+    ${checked  ? 'checked'  : ''}
+    ${disabled ? 'disabled' : ''}
+    ${event    ? `data-event="${e(event)}"` : ''}
+  ><label class="ui-segmented-label" for="${optId}">${e(String(opt.label))}</label>`
+  }).join('')
+
+  return `<div class="${e(wrapClasses)}" role="group">${items}</div>`
+}

package/src/ui/select.js

@@ -0,0 +1,77 @@
+/**
+ * Pulse UI — Select
+ *
+ * Dropdown with label, hint, and error message.
+ * Options accept { value, label } objects or plain strings.
+ *
+ * @param {object}   opts
+ * @param {string}   opts.name
+ * @param {string}   opts.label
+ * @param {Array}    opts.options   - Array of strings or { value, label } objects
+ * @param {string}   opts.value     - Currently selected value
+ * @param {string}   opts.error
+ * @param {string}   opts.hint
+ * @param {boolean}  opts.required
+ * @param {boolean}  opts.disabled
+ * @param {string}   opts.id
+ * @param {string}   opts.event     - data-event binding, e.g. 'change:setCategory'
+ * @param {string}   opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+import { iconChevronDown } from './icons.js'
+
+export function select({
+  name       = '',
+  label      = '',
+  options    = [],
+  value      = '',
+  error      = '',
+  hint       = '',
+  required   = false,
+  disabled   = false,
+  id         = '',
+  event      = '',
+  class: cls = '',
+} = {}) {
+  const fieldId   = e(id || `field-${name}`)
+  const errorId   = `${fieldId}-error`
+  const hintId    = `${fieldId}-hint`
+  const described = [error ? errorId : '', hint ? hintId : ''].filter(Boolean).join(' ')
+
+  const wrapClasses = ['ui-field', error ? 'ui-field--error' : '', cls].filter(Boolean).join(' ')
+
+  const labelHtml = label
+    ? `<label for="${fieldId}" class="ui-label">${e(label)}${required ? ' <span class="ui-required" aria-hidden="true">*</span>' : ''}</label>`
+    : ''
+
+  const optionsHtml = options.map(opt => {
+    const v = typeof opt === 'string' ? opt : opt.value
+    const l = typeof opt === 'string' ? opt : opt.label
+    return `<option value="${e(v)}"${v === value ? ' selected' : ''}>${e(l)}</option>`
+  }).join('')
+
+  const chevron = iconChevronDown({ size: 12 })
+
+  const hintHtml  = hint  ? `<p id="${hintId}" class="ui-hint">${e(hint)}</p>`                 : ''
+  const errorHtml = error ? `<p id="${errorId}" class="ui-error" role="alert">${e(error)}</p>` : ''
+
+  return `<div class="${e(wrapClasses)}">
+  ${labelHtml}
+  <div class="ui-select-wrap">
+    <select
+      id="${fieldId}"
+      name="${e(name)}"
+      class="ui-select"
+      ${required  ? 'required aria-required="true"'   : ''}
+      ${disabled  ? 'disabled'                         : ''}
+      ${event     ? `data-event="${e(event)}"`         : ''}
+      ${described ? `aria-describedby="${described}"`  : ''}
+      ${error     ? 'aria-invalid="true"'              : ''}
+    >${optionsHtml}</select>
+    <span class="ui-select-chevron" aria-hidden="true">${chevron}</span>
+  </div>
+  ${hintHtml}
+  ${errorHtml}
+</div>`
+}

package/src/ui/slider.js

@@ -0,0 +1,84 @@
+/**
+ * Pulse UI — Slider
+ *
+ * Styled range input with label and hint.
+ * The fill gradient is driven by --slider-fill CSS custom property.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.name      - Field name (submitted in FormData as a number string)
+ * @param {string}  opts.label     - Visible label text
+ * @param {number}  opts.min       - Minimum value (default: 0)
+ * @param {number}  opts.max       - Maximum value (default: 100)
+ * @param {number}  opts.step      - Step increment (default: 1)
+ * @param {number}  opts.value     - Current value (default: 50)
+ * @param {boolean} opts.disabled
+ * @param {string}  opts.hint       - Helper text below the slider
+ * @param {boolean} opts.showValue  - Show the current value live beside the label
+ * @param {string}  opts.id         - Override generated id
+ * @param {string}  opts.event      - data-event binding, e.g. 'change:setBrightness'
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function slider({
+  name       = '',
+  label      = '',
+  min        = 0,
+  max        = 100,
+  step       = 1,
+  value      = 50,
+  disabled   = false,
+  hint       = '',
+  showValue  = false,
+  id         = '',
+  event      = '',
+  class: cls = '',
+} = {}) {
+  const fieldId   = e(id || `slider-${name}`)
+  const hintId    = `${fieldId}-hint`
+  const described = hint ? hintId : ''
+
+  const minN   = Number(min)
+  const maxN   = Number(max)
+  const valN   = Math.min(Math.max(Number(value), minN), maxN)
+  const fillPct = maxN > minN
+    ? (((valN - minN) / (maxN - minN)) * 100).toFixed(2) + '%'
+    : '0%'
+
+  const wrapClasses = ['ui-field', cls].filter(Boolean).join(' ')
+
+  const outputId  = `${fieldId}-output`
+
+  const labelHtml = label
+    ? `<label for="${fieldId}" class="ui-label${showValue ? ' ui-label--row' : ''}">
+        ${e(label)}
+        ${showValue ? `<output id="${outputId}" class="ui-slider-output" for="${fieldId}">${valN}</output>` : ''}
+      </label>`
+    : ''
+
+  const hintHtml = hint
+    ? `<p id="${hintId}" class="ui-hint">${e(hint)}</p>`
+    : ''
+
+  return `<div class="${e(wrapClasses)}" style="--slider-fill:${fillPct}">
+  ${labelHtml}
+  <input
+    type="range"
+    id="${fieldId}"
+    name="${e(name)}"
+    class="ui-slider"
+    min="${minN}"
+    max="${maxN}"
+    step="${e(String(step))}"
+    value="${valN}"
+    aria-valuemin="${minN}"
+    aria-valuemax="${maxN}"
+    aria-valuenow="${valN}"
+    ${disabled ? 'disabled'                           : ''}
+    ${event    ? `data-event="${e(event)}"`           : ''}
+    ${described  ? `aria-describedby="${described}"` : ''}
+  >
+  ${hintHtml}
+</div>`
+}

package/src/ui/spinner.js

@@ -0,0 +1,34 @@
+/**
+ * Pulse UI — Spinner
+ *
+ * CSS-animated loading indicator. No JavaScript required.
+ *
+ * @param {object} opts
+ * @param {'sm'|'md'|'lg'} opts.size
+ * @param {'accent'|'muted'|'white'} opts.color
+ * @param {string} opts.label  - Accessible label (default: 'Loading…')
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const SIZES  = { sm: '1rem',    md: '1.5rem',  lg: '2.5rem'  }
+const COLORS = { accent: 'var(--ui-accent)', muted: 'var(--ui-muted)', white: '#fff' }
+
+export function spinner({
+  size       = 'md',
+  color      = 'accent',
+  label      = 'Loading…',
+  class: cls = '',
+} = {}) {
+  const sz  = SIZES[size]   ?? SIZES.md
+  const clr = COLORS[color] ?? COLORS.accent
+  const classes = ['ui-spinner', cls].filter(Boolean).join(' ')
+
+  return `<span
+  class="${e(classes)}"
+  role="status"
+  aria-label="${e(label)}"
+  style="--spinner-size:${sz};--spinner-color:${clr}"
+></span>`
+}

package/src/ui/stack.js

@@ -0,0 +1,36 @@
+/**
+ * Pulse UI — Stack
+ *
+ * Flex column with consistent vertical gap. The simplest way to space
+ * a sequence of elements vertically without writing custom CSS.
+ *
+ * @param {object} opts
+ * @param {string} opts.content                         - Raw HTML slot
+ * @param {'xs'|'sm'|'md'|'lg'|'xl'} opts.gap          - Gap between children (default: 'md')
+ * @param {'stretch'|'start'|'center'|'end'} opts.align - align-items (default: 'stretch')
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const GAPS   = new Set(['xs', 'sm', 'md', 'lg', 'xl'])
+const ALIGNS = new Set(['stretch', 'start', 'center', 'end'])
+
+export function stack({
+  content    = '',
+  gap        = 'md',
+  align      = 'stretch',
+  class: cls = '',
+} = {}) {
+  if (!GAPS.has(gap))     gap   = 'md'
+  if (!ALIGNS.has(align)) align = 'stretch'
+
+  const classes = [
+    'ui-stack',
+    gap   !== 'md'      && `ui-stack--gap-${gap}`,
+    align !== 'stretch' && `ui-stack--align-${align}`,
+    cls,
+  ].filter(Boolean).join(' ')
+
+  return `<div class="${e(classes)}">${content}</div>`
+}

package/src/ui/stat.js

@@ -0,0 +1,52 @@
+/**
+ * Pulse UI — Stat
+ *
+ * A single metric with label, value, and optional trend indicator.
+ *
+ * @param {object} opts
+ * @param {string} opts.label
+ * @param {string} opts.value   - Formatted value string (e.g. "2.4k", "98%")
+ * @param {string} opts.change  - Change label (e.g. "+12%", "−3")
+ * @param {'up'|'down'|'neutral'} opts.trend
+ * @param {boolean} opts.center - Centre-align all text
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+import { iconTrendingUp, iconTrendingDown, iconMinus } from './icons.js'
+
+const TRENDS = new Set(['up', 'down', 'neutral'])
+
+const TREND_ICONS = {
+  up:      iconTrendingUp({ size: 13 }),
+  down:    iconTrendingDown({ size: 13 }),
+  neutral: iconMinus({ size: 13 }),
+}
+
+const TREND_LABELS = { up: 'increase', down: 'decrease', neutral: 'no change' }
+
+export function stat({
+  label      = '',
+  value      = '',
+  change     = '',
+  trend      = 'neutral',
+  center     = false,
+  class: cls = '',
+} = {}) {
+  if (!TRENDS.has(trend)) trend = 'neutral'
+
+  const classes = ['ui-stat', center && 'ui-stat--center', cls].filter(Boolean).join(' ')
+
+  const changeHtml = change
+    ? `<p class="ui-stat-change ui-stat-change--${e(trend)}">
+  <span aria-label="${e(TREND_LABELS[trend])}">${TREND_ICONS[trend]}</span>
+  ${e(change)}
+</p>`
+    : ''
+
+  return `<div class="${e(classes)}">
+  <p class="ui-stat-label">${e(label)}</p>
+  <p class="ui-stat-value">${e(value)}</p>
+  ${changeHtml}
+</div>`
+}

package/src/ui/stepper.js

@@ -0,0 +1,46 @@
+/**
+ * Pulse UI — Stepper
+ *
+ * Horizontal step progress indicator.
+ * Steps before `current` are complete (filled accent dot with check icon).
+ * The step at `current` is active (accent border + accent number).
+ * Steps after `current` are upcoming (muted border + muted number).
+ *
+ * @param {object}  opts
+ * @param {Array}   opts.steps    - Array of step label strings
+ * @param {number}  opts.current  - 0-based index of the active step
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+import { iconCheck } from './icons.js'
+
+const CHECK_SVG = iconCheck({ size: 12 })
+
+export function stepper({
+  steps      = [],
+  current    = 0,
+  class: cls = '',
+} = {}) {
+  const wrapClasses = ['ui-stepper', cls].filter(Boolean).join(' ')
+
+  const items = steps.map((label, i) => {
+    const isComplete = i < current
+    const isActive   = i === current
+
+    const modClass = isComplete ? 'ui-stepper-item--complete'
+      : isActive   ? 'ui-stepper-item--active'
+      : ''
+
+    const dot = isComplete
+      ? `<div class="ui-stepper-dot">${CHECK_SVG}</div>`
+      : `<div class="ui-stepper-dot">${i + 1}</div>`
+
+    return `<div class="ui-stepper-item${modClass ? ` ${modClass}` : ''}">
+  ${dot}
+  <span class="ui-stepper-label">${e(label)}</span>
+</div>`
+  }).join('')
+
+  return `<div class="${e(wrapClasses)}">${items}</div>`
+}