@zubra/compiler 0.0.0-stage → 5.0.3

package/registry/components/kanban-column.zb

@@ -0,0 +1,65 @@
+<!--
+  A board column: a heading with a count and an optional work-in-progress limit, its cards (the
+  default slot) and a drop zone for cards dragged from anywhere on the board.
+  @slot - The cards: any elements. A dragged card sets its id as `application/x-card` drag data (`event.dataTransfer.setData("application/x-card", id)`), which the drop reports.
+  @slot actions - Buttons under the cards.
+  @fires carddrop - A card was dropped here; `detail` is `{ id, index }` (where among the cards).
+-->
+<script>
+  import { emit, hasSlot } from '@zubra/runtime'
+
+  const hasActions = hasSlot('actions')
+  let list = null
+  let over = false
+  const full = limit > 0 && count > limit
+
+  /** Where among this column's cards a drop at `y` lands. */
+  function indexAt(y) {
+    const cards = [...list.children].filter((child) => !child.classList.contains('empty'))
+    const after = cards.findIndex((card) => {
+      const box = card.getBoundingClientRect()
+      return y < box.top + box.height / 2
+    })
+    return after === -1 ? cards.length : after
+  }
+  function dragover(event) {
+    if (!event.dataTransfer.types.includes('application/x-card')) return
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'move'
+    over = true
+  }
+  function drop(event) {
+    const id = event.dataTransfer.getData('application/x-card')
+    over = false
+    if (!id) return
+    event.preventDefault()
+    emit('carddrop', { id, index: indexAt(event.clientY) })
+  }
+</script>
+<style>
+  :host { display: flex; flex-direction: column; min-width: 13rem; max-width: 20rem; flex: 1; }
+  section { display: flex; flex-direction: column; flex: 1; padding: 0.6rem; border-radius: 0.9rem; background: var(--column, #f3f4f7); transition: background 0.15s, box-shadow 0.15s; }
+  section.over { background: var(--column-over, #e8ebff); box-shadow: inset 0 0 0 2px var(--accent, #4f5df5); }
+  header { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.35rem 0.6rem; }
+  h2 { margin: 0; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+  .count { padding: 0 0.45rem; border-radius: 999px; background: var(--surface, #ffffff); font-size: 0.75rem; font-weight: 700; color: var(--muted, #667085); }
+  .full .count { background: var(--danger, #d92d20); color: white; }
+  .limit { margin-left: auto; font-size: 0.75rem; color: var(--muted, #667085); }
+  .full .limit { color: var(--danger, #d92d20); font-weight: 700; }
+  .cards { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 4rem; }
+  footer { display: flex; flex-direction: column; }
+  .empty { display: grid; place-items: center; flex: 1; min-height: 4rem; border: 2px dashed var(--line, #d9dce3); border-radius: 0.7rem; color: var(--muted, #667085); font-size: 0.8125rem; }
+</style>
+<kanban-column heading="" count={0} limit={0}>
+  <section class:over class:full aria-label={heading} ondragover={dragover} ondragleave={(event) => event.currentTarget.contains(event.relatedTarget) || (over = false)} ondrop={drop}>
+    <header>
+      <h2>{heading}</h2>
+      <span class="count">{count}</span>
+      <span zb-if={limit > 0} class="limit">{full ? `over the limit of ${limit}` : `limit ${limit}`}</span>
+    </header>
+    <div class="cards" ref={list}>
+      <zb-slot><div class="empty">Drop cards here</div></zb-slot>
+    </div>
+    <footer zb-if={hasActions}><zb-slot name="actions"></zb-slot></footer>
+  </section>
+</kanban-column>

package/registry/components/line-chart.zb

@@ -0,0 +1,58 @@
+<!--
+  A price chart: an area under a line, with the high, low and a crosshair that follows the
+  pointer and shows the value under it.
+  @fires pointhover - The pointer is over a point; `detail` is its index, or -1 when it leaves.
+-->
+<script>
+  import { emit } from '@zubra/runtime'
+
+  const W = 600
+  const H = 220
+  let hover = -1
+  const low = Math.min(...points)
+  const high = Math.max(...points)
+  const span = high - low || 1
+  const x = (index) => (index / Math.max(1, points.length - 1)) * W
+  const y = (value) => H - 12 - ((value - low) / span) * (H - 24)
+  const line = points.map((value, index) => `${index ? "L" : "M"}${x(index).toFixed(1)},${y(value).toFixed(1)}`).join("")
+  const area = points.length ? `${line}L${W},${H}L0,${H}Z` : ""
+  const shown = hover >= 0 && hover < points.length ? hover : -1
+
+  function move(event) {
+    const box = event.currentTarget.getBoundingClientRect()
+    const index = Math.round(((event.clientX - box.left) / box.width) * (points.length - 1))
+    const next = Math.max(0, Math.min(points.length - 1, index))
+    if (next === hover) return
+    hover = next
+    emit('pointhover', next)
+  }
+  function leave() {
+    hover = -1
+    emit('pointhover', -1)
+  }
+</script>
+<style>
+  :host { display: block; position: relative; }
+  svg { display: block; width: 100%; height: 14rem; }
+  .area { fill: var(--accent, #4f5df5); opacity: 0.12; }
+  .line { fill: none; stroke: var(--accent, #4f5df5); stroke-width: 2; vector-effect: non-scaling-stroke; }
+  .grid { stroke: var(--line, #d9dce3); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
+  .cross { stroke: var(--muted, #667085); vector-effect: non-scaling-stroke; }
+  .dot { fill: var(--surface, #ffffff); stroke: var(--accent, #4f5df5); stroke-width: 2; vector-effect: non-scaling-stroke; }
+  .labels { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; justify-content: space-between; padding: 0.2rem 0; font-size: 0.7rem; color: var(--muted, #667085); pointer-events: none; font-variant-numeric: tabular-nums; }
+  .tip { position: absolute; top: 0.25rem; right: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 0.4rem; background: var(--ink, #1d2130); color: var(--surface, #ffffff); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
+</style>
+<line-chart points={[]} label="Price">
+  <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" role="img" aria-label={`${label}: ${points.length} points from ${low.toFixed(2)} to ${high.toFixed(2)}`} onpointermove={move} onpointerleave={leave}>
+    <line class="grid" x1="0" x2={W} y1="12" y2="12"></line>
+    <line class="grid" x1="0" x2={W} y1={H - 12} y2={H - 12}></line>
+    <path class="area" d={area}></path>
+    <path class="line" d={line}></path>
+    <zb-if test={shown >= 0}>
+      <line class="cross" x1={x(shown)} x2={x(shown)} y1="0" y2={H}></line>
+      <circle class="dot" cx={x(shown)} cy={y(points[shown])} r="4"></circle>
+    </zb-if>
+  </svg>
+  <div class="labels" aria-hidden="true"><span class="high">{high.toFixed(2)}</span><span class="low">{low.toFixed(2)}</span></div>
+  <span zb-if={shown >= 0} class="tip">{points[shown].toFixed(2)}</span>
+</line-chart>

package/registry/components/message-composer.zb

@@ -0,0 +1,80 @@
+<!--
+  Writing a message: Enter sends, Shift+Enter adds a line, the box grows with the text, an
+  emoji menu inserts at the caret, and a message being replied to shows above.
+  @fires send - Send was chosen; `detail` is the trimmed text.
+  @fires typing - The user typed (at most every two seconds).
+  @fires replycancel - The reply was cancelled.
+-->
+<script>
+  import { emit } from '@zubra/runtime'
+
+  const EMOJI = ["😀", "😂", "😍", "🤔", "👍", "🙏", "🎉", "🔥", "🚀", "✅", "👀", "☕"]
+  let box = null
+  let text = ""
+  let picking = false
+  let lastTyping = 0
+  const empty = text.trim() === ""
+
+  function grow() {
+    box.style.height = "auto"
+    box.style.height = `${Math.min(box.scrollHeight, 160)}px`
+  }
+  function input(event) {
+    text = event.target.value
+    grow()
+    if (Date.now() - lastTyping > 2000) {
+      lastTyping = Date.now()
+      emit('typing')
+    }
+  }
+  function send() {
+    if (empty || disabled) return
+    emit('send', text.trim())
+    text = ""
+    lastTyping = 0
+    queueMicrotask(grow)
+  }
+  function enter(event) {
+    // (While an input method is composing, Enter belongs to it.)
+    if (event.isComposing) return
+    event.preventDefault()
+    send()
+  }
+  function insert(emoji) {
+    const at = box.selectionStart ?? text.length
+    text = text.slice(0, at) + emoji + text.slice(box.selectionEnd ?? at)
+    picking = false
+    queueMicrotask(() => {
+      box.focus()
+      box.setSelectionRange(at + emoji.length, at + emoji.length)
+    })
+  }
+</script>
+<style>
+  :host { display: block; }
+  .reply { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border: 1px solid var(--line, #d9dce3); border-bottom: 0; border-radius: 0.75rem 0.75rem 0 0; background: var(--hover, #f2f4f8); font-size: 0.8125rem; color: var(--muted, #667085); }
+  .reply b { color: var(--ink, #1d2130); }
+  .reply span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .reply button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
+  .box { position: relative; display: flex; align-items: flex-end; gap: 0.25rem; padding: 0.4rem; border: 1px solid var(--line, #d9dce3); border-radius: 0.75rem; background: var(--surface, #ffffff); }
+  .reply + .box { border-radius: 0 0 0.75rem 0.75rem; }
+  .box:focus-within { border-color: var(--link, #2563eb); }
+  textarea { flex: 1; min-height: 2.25rem; max-height: 10rem; padding: 0.45rem 0.5rem; border: 0; outline: 0; resize: none; background: none; color: inherit; font: inherit; line-height: 1.4; }
+  button.icon, button.send { flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.55rem; background: none; color: var(--muted, #667085); font-size: 1.15rem; cursor: pointer; }
+  button.send { background: var(--link, #2563eb); color: white; font-size: 1rem; }
+  button.send:disabled { background: var(--line, #d9dce3); color: var(--muted, #667085); cursor: default; }
+  .picker { position: absolute; bottom: calc(100% + 0.4rem); right: 0; display: grid; grid-template-columns: repeat(6, 2rem); gap: 0.15rem; padding: 0.4rem; border: 1px solid var(--line, #d9dce3); border-radius: 0.75rem; background: var(--surface, #ffffff); box-shadow: 0 8px 24px #0003; }
+  .picker button { border: 0; background: none; border-radius: 0.4rem; font-size: 1.2rem; cursor: pointer; }
+  .picker button:hover { background: var(--hover, #f2f4f8); }
+  .hint { margin: 0.3rem 0.25rem 0; font-size: 0.7rem; color: var(--muted, #667085); }
+</style>
+<message-composer placeholder="Message" disabled={false} replyto={null}>
+  <div zb-if={replyto} class="reply"><span>Replying to <b>{replyto?.author}</b>: {replyto?.text}</span><button type="button" class="cancel-reply" aria-label="Cancel reply" onclick={() => emit('replycancel')}>×</button></div>
+  <div class="box">
+    <textarea rows="1" aria-label={placeholder} placeholder={placeholder} disabled={disabled} value={text} ref={box} oninput={input} onkeydown.enter={enter} onkeydown.escape={() => replyto && emit('replycancel')}></textarea>
+    <button type="button" class="icon emoji" aria-label="Insert emoji" aria-expanded={picking ? "true" : "false"} onclick={() => (picking = !picking)}>☺</button>
+    <button type="button" class="send" aria-label="Send" disabled={empty || disabled} onclick={send}>➤</button>
+    <div zb-if={picking} class="picker" role="group" aria-label="Emoji" onkeydown.escape={() => (picking = false)}><zb-each items={EMOJI} as="emoji" key={emoji}><button type="button" onclick={() => insert(emoji)}>{emoji}</button></zb-each></div>
+  </div>
+  <p class="hint">Enter to send · Shift+Enter for a new line</p>
+</message-composer>

package/registry/components/modal-dialog.zb

@@ -0,0 +1,44 @@
+<!--
+  A modal dialog on the native <dialog>: the page behind is inert, focus moves into the dialog
+  and back to where it was, and Escape, the close button or a click on the backdrop closes it.
+  `open` is two-way.
+  @slot - The dialog's content.
+  @slot heading - Its title, which labels the dialog (defaults to `label`).
+  @slot actions - Buttons at the bottom, shown only when given.
+-->
+<script>
+  import { effect, hasSlot, id } from '@zubra/runtime'
+
+  const headingId = id()
+  const hasActions = hasSlot('actions')
+  let dialog = null
+
+  // Follow `open` (from outside or inside): show the dialog modally, or close it.
+  effect(() => {
+    if (!dialog) return
+    if (open && !dialog.open) dialog.showModal()
+    else if (!open && dialog.open) dialog.close()
+  })
+</script>
+<style>
+  dialog { padding: 0; border: 0; border-radius: 0.9rem; width: min(32rem, calc(100vw - 2rem)); background: var(--surface, #ffffff); color: var(--ink, #1d2130); box-shadow: 0 24px 64px #0d122040; }
+  dialog::backdrop { background: #0d122066; }
+  .panel { display: grid; gap: 1rem; padding: 1.1rem 1.25rem 1.25rem; }
+  header { display: flex; align-items: center; gap: 1rem; }
+  h2 { flex: 1; margin: 0; font-size: 1.1rem; }
+  .close { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
+  .close:hover { background: var(--hover, #f2f4f8); }
+  footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
+</style>
+<modal-dialog open:model={false} label="Dialog">
+  <dialog ref={dialog} aria-labelledby={headingId} onclose={() => (open = false)} onclick.self={() => (open = false)}>
+    <div class="panel">
+      <header>
+        <h2 id={headingId}><zb-slot name="heading">{label}</zb-slot></h2>
+        <button type="button" class="close" aria-label="Close" onclick={() => (open = false)}>×</button>
+      </header>
+      <div class="body"><zb-slot></zb-slot></div>
+      <footer zb-if={hasActions}><zb-slot name="actions"></zb-slot></footer>
+    </div>
+  </dialog>
+</modal-dialog>

package/registry/components/money-input.zb

@@ -0,0 +1,41 @@
+<!--
+  An amount of money. Typing is free-form; on blur it's formatted (`1234.5` → `1,234.50`). The
+  value is a number (or null when empty). A form control: `required` and `min` validate it.
+  @fires valuechange - The amount changed; `detail` is the number, or null.
+-->
+<script>
+  import { validity } from '@zubra/runtime'
+
+  const format = (amount) => (amount == null ? "" : amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }))
+  let text = format(value)
+  let focused = false
+  const shown = focused ? text : format(value)
+
+  validity(() => (required && value == null ? "Enter an amount" : value != null && value < min ? `At least ${format(min)}` : ""))
+
+  function input(event) {
+    text = event.target.value
+    const cleaned = text.replace(/[^0-9.]/g, "")
+    const next = cleaned === "" || isNaN(Number(cleaned)) ? null : Math.round(Number(cleaned) * 100) / 100
+    if (next === value) return
+    value = next
+  }
+  // While focused the text is left as typed; on blur it's formatted again.
+  function focus() {
+    text = format(value)
+    focused = true
+  }
+</script>
+<style>
+  :host { display: block; }
+  .box { display: flex; align-items: center; border: 1px solid var(--line, #d9dce3); border-radius: 0.6rem; background: var(--surface, #ffffff); }
+  .box:focus-within { outline: 2px solid var(--accent, #4f5df5); outline-offset: 1px; }
+  span { padding-left: 0.7rem; color: var(--muted, #667085); font-weight: 600; }
+  input { flex: 1; min-width: 0; padding: 0.55rem 0.7rem 0.55rem 0.3rem; border: 0; outline: 0; background: none; font: inherit; font-variant-numeric: tabular-nums; color: inherit; text-align: right; }
+</style>
+<money-input form-associated value:model={null} symbol="$" required={false} min={0} label="Amount">
+  <div class="box">
+    <span aria-hidden="true">{symbol}</span>
+    <input inputmode="decimal" autocomplete="off" aria-label={label} placeholder="0.00" value={shown} oninput={input} onfocus={focus} onblur={() => (focused = false)}>
+  </div>
+</money-input>

package/registry/components/progress-ring.zb

@@ -0,0 +1,24 @@
+<!--
+  A ring that fills to `value` of `max`, with what's in the middle from the default slot (the
+  percentage if empty).
+  @slot - The middle.
+-->
+<script>
+  const R = 15.915494309189533
+  const percent = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0
+</script>
+<style>
+  :host { display: inline-grid; place-items: center; width: var(--size, 7rem); aspect-ratio: 1; position: relative; }
+  svg { position: absolute; inset: 0; width: 100%; transform: rotate(-90deg); }
+  circle { fill: none; stroke-width: 3.2; }
+  .track { stroke: var(--line, #ddd); }
+  .fill { stroke: var(--accent, #36c); stroke-linecap: round; transition: stroke-dasharray 0.4s; }
+  .middle { position: relative; text-align: center; line-height: 1.15; }
+</style>
+<progress-ring value={0} max={100} label="Progress">
+  <svg viewBox="0 0 42 42" role="img" aria-label={`${label}: ${percent}%`}>
+    <circle class="track" cx="21" cy="21" r={R}></circle>
+    <circle zb-if={percent > 0} class="fill" cx="21" cy="21" r={R} stroke-dasharray={`${percent} ${100 - percent}`}></circle>
+  </svg>
+  <div class="middle"><zb-slot><strong>{percent}%</strong></zb-slot></div>
+</progress-ring>

package/registry/components/quantity-stepper.zb

@@ -0,0 +1,22 @@
+<!--
+  A number with − and + buttons, between `min` and `max`. A form control.
+  @fires valuechange - The value changed; `detail` is the new value.
+-->
+<script>
+  function step(by) {
+    const next = Math.min(max, Math.max(min, value + by))
+    if (next === value) return
+    value = next
+  }
+</script>
+<style>
+  :host { display: inline-flex; align-items: center; gap: 0.5rem; }
+  button { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line, #ccd); background: var(--surface, #fff); font: inherit; font-size: 1.125rem; cursor: pointer; }
+  button:disabled { opacity: 0.35; cursor: default; }
+  output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
+</style>
+<quantity-stepper form-associated value:model={1} min={0} max={10} label="Quantity">
+  <button type="button" class="less" aria-label={`Fewer ${label}`} disabled={value <= min} onclick={() => step(-1)}>−</button>
+  <output aria-live="polite" aria-label={label}>{value}</output>
+  <button type="button" class="more" aria-label={`More ${label}`} disabled={value >= max} onclick={() => step(1)}>+</button>
+</quantity-stepper>

package/registry/components/segmented-control.zb

@@ -0,0 +1,23 @@
+<!--
+  A row of mutually exclusive options. `options` is `[{ value, label }]`.
+  @fires valuechange - The choice changed; `detail` is the option's value.
+-->
+<script>
+  function pick(option) {
+    if (option.value === value) return
+    value = option.value
+  }
+</script>
+<style>
+  :host { display: inline-block; }
+  div { display: inline-flex; padding: 0.2rem; border-radius: 0.7rem; background: var(--sunken, #f3f4f7); gap: 0.2rem; }
+  button { padding: 0.35rem 0.8rem; border: 0; border-radius: 0.5rem; background: none; color: var(--muted, #667085); font: inherit; font-weight: 600; cursor: pointer; }
+  button[aria-pressed=true] { background: var(--surface, #ffffff); color: var(--ink, #1d2130); box-shadow: 0 1px 2px #0002; }
+</style>
+<segmented-control value:model="" options={[]} label="">
+  <div role="group" aria-label={label}>
+    <zb-each items={options} as="option" key={option.value}>
+      <button type="button" aria-pressed={option.value === value ? "true" : "false"} data-value={option.value} onclick={() => pick(option)}>{option.label}</button>
+    </zb-each>
+  </div>
+</segmented-control>

package/registry/components/spark-line.zb

@@ -0,0 +1,19 @@
+<!--
+  A small line of recent values, green when it ends higher than it started, red when lower.
+-->
+<script>
+  const low = Math.min(...points)
+  const high = Math.max(...points)
+  const span = high - low || 1
+  const path = points.map((value, index) => `${(index / Math.max(1, points.length - 1)) * 100},${28 - ((value - low) / span) * 26}`).join(" ")
+  const trend = points.length < 2 ? "flat" : points[points.length - 1] >= points[0] ? "up" : "down"
+</script>
+<style>
+  :host { display: block; height: 2rem; }
+  svg { display: block; width: 100%; height: 100%; overflow: visible; }
+  polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
+  .up { stroke: var(--up, #12805c); } .down { stroke: var(--down, #c4320a); } .flat { stroke: var(--muted, #667085); }
+</style>
+<spark-line points={[]} label="Trend">
+  <svg viewBox="0 0 100 30" preserveAspectRatio="none" role="img" aria-label={`${label}: ${trend}`}><polyline class={trend} points={path}></polyline></svg>
+</spark-line>

package/registry/components/star-rating.zb

@@ -0,0 +1,34 @@
+<!--
+  A star rating that is a form control: it submits its value under its `name`, is invalid while
+  `required` and unset, and goes back to 0 when its form resets. `readonly` shows a rating.
+  @fires valuechange - The user picked a rating; `detail` is the number of stars.
+-->
+<script>
+  import { formValue, validity } from '@zubra/runtime'
+
+  let hovered = 0
+  const shown = hovered || value
+  const stars = Array.from({ length: max }, (_, index) => index + 1)
+
+  formValue(() => (value ? value : null))
+  validity(() => (required && !value ? "Pick a rating" : ""))
+
+  function rate(stars) {
+    if (readonly) return
+    value = stars
+  }
+</script>
+<style>
+  :host { display: inline-flex; }
+  [role=group] { display: inline-flex; gap: 0.1rem; }
+  button { font: inherit; font-size: 1.25rem; line-height: 1; padding: 0; border: 0; background: none; color: #c9c2b8; cursor: pointer; }
+  button.on { color: var(--accent, #e07a2f); }
+  :host([readonly]) button { cursor: default; font-size: 1rem; }
+</style>
+<star-rating form-associated value:model={0} max={5} required={false} readonly={false} label="Rating">
+  <span role="group" aria-label={label}>
+  <zb-each items={stars} as="n" key={n}>
+    <button type="button" class:on={n <= shown} aria-label={`${n} of ${max}`} aria-pressed={n === value ? "true" : "false"} onclick={() => rate(n)} onmouseenter={() => (hovered = readonly ? 0 : n)} onmouseleave={() => (hovered = 0)}>★</button>
+  </zb-each>
+  </span>
+</star-rating>

package/registry/components/step-indicator.zb

@@ -0,0 +1,31 @@
+<!--
+  Where a multi-step flow is: steps done (which can be revisited), the current one, and those
+  ahead.
+  @fires stepselect - A finished step was chosen; `detail` is its index.
+-->
+<script>
+  import { emit } from '@zubra/runtime'
+</script>
+<style>
+  ol { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
+  li { flex: 1; }
+  button { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.6rem 0.25rem 0.5rem; border: 0; border-top: 3px solid var(--line, #dde); background: none; color: var(--muted, #667); font: inherit; font-size: 0.875rem; font-weight: 600; text-align: left; }
+  button::before { counter-increment: step; content: counter(step); display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--line, #dde); color: var(--ink, #111); font-size: 0.75rem; }
+  .done button { border-top-color: var(--accent, #36c); color: var(--ink, #111); cursor: pointer; }
+  .done button::before { content: "✓"; background: var(--accent, #36c); color: white; }
+  .current button { border-top-color: var(--accent, #36c); color: var(--accent, #36c); }
+  .current button::before { background: var(--accent, #36c); color: white; }
+  button:disabled { cursor: default; }
+  @media (max-width: 36rem) { .label { display: none; } }
+</style>
+<step-indicator steps={[]} current={0}>
+  <nav aria-label="Progress">
+    <ol>
+      <zb-each items={steps} as="step" index="index" key={step}>
+        <li class:done={index < current} class:current={index === current}>
+          <button type="button" disabled={index >= current} aria-current={index === current ? "step" : "false"} onclick={() => emit('stepselect', index)}><span class="label">{step}</span></button>
+        </li>
+      </zb-each>
+    </ol>
+  </nav>
+</step-indicator>

package/registry/components/streak-grid.zb

@@ -0,0 +1,57 @@
+<!--
+  A habit's last weeks as a grid of days (a column per week, Monday at the top), shaded by how
+  much of the goal was done. Choosing a day toggles it; arrow keys move between days.
+  `log` maps "YYYY-MM-DD" to a count; `today` is "YYYY-MM-DD".
+  @fires daytoggle - A day was chosen; `detail` is the day.
+-->
+<script>
+  import { emit } from '@zubra/runtime'
+
+  let grid = null
+  const day = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
+  const parse = (text) => new Date(`${text}T12:00`)
+  const names = new Intl.DateTimeFormat("en-US", { weekday: "short", month: "short", day: "numeric" })
+  const end = parse(today)
+  // Start on the Monday `weeks` weeks before this week's.
+  const start = new Date(end)
+  start.setDate(start.getDate() - ((start.getDay() + 6) % 7) - (weeks - 1) * 7)
+  const columns = Array.from({ length: weeks }, (_, week) => ({
+    week,
+    days: Array.from({ length: 7 }, (_, weekday) => {
+      const date = new Date(start)
+      date.setDate(start.getDate() + week * 7 + weekday)
+      const key = day(date)
+      const count = log[key] ?? 0
+      const level = date > end ? -1 : count === 0 ? 0 : Math.min(4, Math.ceil((count / goal) * 4))
+      return { key, level, count, label: `${names.format(date)}: ${count}/${goal}` }
+    }),
+  }))
+
+  // Arrow keys: a day up or down, a week left or right.
+  function move(key, step) {
+    const date = parse(key)
+    date.setDate(date.getDate() + step)
+    grid.querySelector(`[data-day="${day(date)}"]:not([disabled])`)?.focus()
+  }
+</script>
+<style>
+  :host { display: block; overflow-x: auto; }
+  .grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--cell, 0.85rem)); grid-auto-columns: var(--cell, 0.85rem); gap: 3px; width: max-content; }
+  button { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 3px; background: var(--level-0, #ebedf0); cursor: pointer; }
+  button:focus-visible { outline: 2px solid var(--ink, #1d2130); outline-offset: 1px; }
+  button[data-level="1"] { background: color-mix(in srgb, var(--habit, #16a34a) 30%, var(--level-0, #ebedf0)); }
+  button[data-level="2"] { background: color-mix(in srgb, var(--habit, #16a34a) 55%, var(--level-0, #ebedf0)); }
+  button[data-level="3"] { background: color-mix(in srgb, var(--habit, #16a34a) 78%, var(--level-0, #ebedf0)); }
+  button[data-level="4"] { background: var(--habit, #16a34a); }
+  button[data-today] { box-shadow: 0 0 0 1.5px var(--ink, #1d2130); }
+  button:disabled { visibility: hidden; }
+</style>
+<streak-grid log={{}} goal={1} today="" weeks={12} label="History">
+  <div class="grid" role="group" aria-label={label} ref={grid}>
+    <zb-each items={columns} as="column" key={column.week}>
+      <zb-each items={column.days} as="cell" key={cell.key}>
+        <button type="button" data-day={cell.key} data-level={cell.level} data-today={cell.key === today ? "" : null} disabled={cell.level < 0} title={cell.label} aria-label={cell.label} aria-pressed={cell.count >= goal ? "true" : "false"} tabindex={cell.key === today ? "0" : "-1"} onclick={() => emit('daytoggle', cell.key)} onkeydown.up.prevent={() => move(cell.key, -1)} onkeydown.down.prevent={() => move(cell.key, 1)} onkeydown.left.prevent={() => move(cell.key, -7)} onkeydown.right.prevent={() => move(cell.key, 7)}></button>
+      </zb-each>
+    </zb-each>
+  </div>
+</streak-grid>

package/registry/components/tab-list.zb

@@ -0,0 +1,59 @@
+<!--
+  Tabs: a tab list and the panels it switches between. The panels are the slotted elements with a
+  `data-tab` attribute matching a tab's value; they get role=tabpanel, are labelled by their tab,
+  and are hidden unless chosen. Arrow keys, Home and End move between the tabs (one tab stop), and
+  the focused tab is chosen as it moves, unless `manual`, where Enter or Space chooses it.
+  `tabs` is `[{ value, label }]`; `value` is two-way and defaults to the first tab.
+  @slot - The panels.
+  @fires valuechange - Another tab was chosen; `detail` is its value.
+-->
+<script>
+  import { id, host, effect, onMount } from '@zubra/runtime'
+  import { rovingFocus } from '@zubra/runtime/primitives'
+
+  const uid = id()
+  const element = host()
+  const current = value || tabs[0]?.value || ""
+  let list = null
+
+  const tabId = (tab) => `${uid}-tab-${tab}`
+  const panels = () => [...element.querySelectorAll("[data-tab]")].filter((panel) => panel.closest("tab-list") === element)
+
+  // The panels are the page's elements, not this template's: set them up here.
+  effect(() => {
+    if (!list) return
+    const chosen = current
+    tabs.length // and again when the tabs change
+    for (const panel of panels()) {
+      panel.id ||= `${uid}-panel-${panel.dataset.tab}`
+      panel.setAttribute("role", "tabpanel")
+      panel.setAttribute("aria-labelledby", tabId(panel.dataset.tab))
+      if (!panel.hasAttribute("tabindex")) panel.tabIndex = 0
+      panel.hidden = panel.dataset.tab !== chosen
+      list.querySelector(`[data-value="${CSS.escape(panel.dataset.tab)}"]`)?.setAttribute("aria-controls", panel.id)
+    }
+  })
+
+  onMount(() => rovingFocus(list, {
+    selector: "[role=tab]",
+    orientation: "horizontal",
+    onMove: (tab) => { if (!manual) value = tab.dataset.value },
+  }))
+</script>
+<style>
+  :host { display: block; }
+  [role=tablist] { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line, #dde); }
+  [role=tab] { padding: 0.55rem 0.9rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted, #667085); font: inherit; font-weight: 600; cursor: pointer; }
+  [role=tab][aria-selected=true] { color: var(--ink, #1d2130); border-bottom-color: var(--accent, #36c); }
+  [role=tab]:focus-visible { outline: 2px solid var(--accent, #36c); outline-offset: -2px; border-radius: 0.3rem; }
+  [role=tabpanel] { padding: 1rem 0.25rem; }
+  [role=tabpanel]:focus-visible { outline: 2px solid var(--accent, #36c); outline-offset: 2px; }
+</style>
+<tab-list value:model="" tabs={[]} label="" manual={false}>
+  <div role="tablist" aria-label={label || null} ref={list}>
+    <zb-each items={tabs} as="tab" key={tab.value}>
+      <button type="button" role="tab" id={tabId(tab.value)} data-value={tab.value} aria-selected={tab.value === current ? "true" : "false"} tabindex={tab.value === current ? 0 : -1} onclick={() => (value = tab.value)}>{tab.label}</button>
+    </zb-each>
+  </div>
+  <zb-slot></zb-slot>
+</tab-list>

package/registry/components/tag-input.zb

@@ -0,0 +1,50 @@
+<!--
+  A list of tags you type: Enter or comma adds one, Backspace in the empty field removes the
+  last, × removes any. Suggestions come from `suggestions`. A form control.
+  @fires valuechange - The tags changed; `detail` is the new array.
+-->
+<script>
+  import { formValue, id } from '@zubra/runtime'
+
+  const listId = id()
+  let draft = ""
+  const offered = suggestions.filter((tag) => !value.includes(tag))
+
+  formValue(() => value.join(","))
+
+  function set(next) {
+    value = next
+  }
+  function add(text) {
+    const tag = text.trim().toLowerCase().replace(/\s+/g, "-")
+    draft = ""
+    if (tag && !value.includes(tag) && value.length < max) set([...value, tag])
+  }
+  function key(event) {
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault()
+      add(draft)
+    } else if (event.key === 'Backspace' && !draft && value.length) {
+      set(value.slice(0, -1))
+    }
+  }
+</script>
+<style>
+  :host { display: block; }
+  .box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.35rem 0.4rem; border: 1px solid var(--line, #d9dce3); border-radius: 0.6rem; background: var(--surface, #ffffff); }
+  .box:focus-within { outline: 2px solid var(--accent, #4f5df5); outline-offset: 1px; }
+  .tag { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.2rem 0.1rem 0.5rem; border-radius: 0.4rem; background: var(--chip, #eceefe); color: var(--chip-ink, #3a3f9e); font-size: 0.8125rem; font-weight: 600; }
+  .tag button { border: 0; background: none; color: inherit; padding: 0 0.25rem; cursor: pointer; font: inherit; }
+  input { flex: 1; min-width: 7rem; border: 0; outline: 0; padding: 0.3rem; font: inherit; background: none; color: inherit; }
+  .hint { margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--muted, #667085); }
+</style>
+<tag-input form-associated value:model={[]} suggestions={[]} max={6} label="Tags">
+  <div class="box">
+    <zb-each items={value} as="tag" key={tag}>
+      <span class="tag">{tag}<button type="button" aria-label={`Remove ${tag}`} onclick={() => set(value.filter((item) => item !== tag))}>×</button></span>
+    </zb-each>
+    <input aria-label={label} list={listId} placeholder={value.length >= max ? "" : "Add a tag…"} disabled={value.length >= max} value={draft} oninput={(event) => (draft = event.target.value)} onkeydown={key} onchange={(event) => offered.includes(event.target.value) && add(event.target.value)}>
+    <datalist id={listId}><zb-each items={offered} as="tag" key={tag}><option value={tag}></option></zb-each></datalist>
+  </div>
+  <p class="hint">{value.length}/{max} · Enter or comma to add</p>
+</tag-input>