@zubra/compiler 0.0.0-stage → 5.0.3

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@zubra/compiler",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "5.0.3",
+  "description": "The Zubra compiler as WebAssembly: compile .zb components from Node without installing Rust",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/journey-to-code-org/zubra.git",
+    "directory": "compiler"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./library": {
+      "types": "./library.d.ts",
+      "default": "./library.js"
+    }
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "zubra.wasm",
+    "cli.js",
+    "library.js",
+    "library.d.ts",
+    "registry",
+    "!registry/test"
+  ],
+  "scripts": {
+    "build": "cargo build -p zubra-wasm --target wasm32-unknown-unknown --release && cp ../target/wasm32-unknown-unknown/release/zubra_wasm.wasm zubra.wasm",
+    "test": "node --test \"test/*.test.js\"",
+    "prepack": "node scripts/prepack.mjs"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "bin": {
+    "zubra": "cli.js"
+  }
+}

package/registry/README.md

@@ -0,0 +1,41 @@
+# The Zubra component registry
+
+Twenty-five accessible components to copy into your project:
+
+```sh
+npx zubra add tag-input modal-dialog         # into src/components/ (--dir elsewhere)
+npx zubra add --list
+```
+
+`zubra` comes with `@zubra/compiler`. The files are copied, not installed: they're yours to edit, and `zubra add` never overwrites a file you have (`--force` does).
+
+| Inputs | Display | App pieces | Widgets |
+|---|---|---|---|
+| `tag-input`, `date-range`, `money-input`, `star-rating`, `toggle-switch`, `choice-cards`, `color-swatches`, `quantity-stepper`, `segmented-control` | `donut-chart`, `spark-line`, `line-chart`, `progress-ring`, `streak-grid`, `flip-card`, `step-indicator` | `kanban-column`, `chat-message`, `message-composer`, `modal-dialog` | `accordion-panel`, `tool-tip`, `tab-list`, `dropdown-menu`, `combo-box` |
+
+The widgets are the pieces Radix and shadcn/ui give React apps, built on the platform (`<details>`, `popover`, anchor positioning) and `@zubra/runtime/primitives`. `combo-box` uses Zag.js through `@zubra/runtime/zag`. It imports `@zag-js/vanilla` and `@zag-js/combobox`, and `zubra add` says to install them (`index.json` lists them under `packages`). [Accessible widgets without a headless library](../docs/guide/accessible-widgets.md) maps the rest.
+
+Each component's comment says what it does, its props, slots and events (`index.json` collects them). The inputs are form controls with a two-way `value` (or `checked`), so `v-model`, React's controlled pattern and Angular's `ZubraModel` work with them as they are.
+
+## Accessibility
+
+Every component is tested in Chromium (`test/components.test.js`) the way assistive technology meets it: found by its role and accessible name, used from the keyboard (radio groups, tab lists and menus with arrow keys and one tab stop, typing to jump in a menu, Space and Enter on switches and toggle buttons, a dialog and a menu that move focus in and back, Escape to close), and checked for the state it announces (`aria-checked`, `aria-pressed`, `aria-current`, `aria-expanded`).
+
+## Theming
+
+Colours come from CSS custom properties, each with a default, so the components look right on their own and take your theme when you set them on a parent:
+
+| Property | Used for | Default |
+|---|---|---|
+| `--ink`, `--muted` | text | `#1d2130`, `#667085` |
+| `--surface`, `--sunken`, `--hover` | backgrounds | `#ffffff`, `#f3f4f7`, `#f2f4f8` |
+| `--line` | borders | `#d9dce3` |
+| `--accent`, `--link`, `--danger` | emphasis | `#4f5df5`, `#2563eb`, `#d92d20` |
+| `--up`, `--down` | chart trends | `#12805c`, `#c4320a` |
+| `--habit`, `--level-0` | `streak-grid` | `#16a34a`, `#ebedf0` |
+| `--chip`, `--chip-ink`, `--column`, `--column-over` | `kanban-column` | `#eceefe`, `#3a3f9e`, `#f3f4f7`, `#e8ebff` |
+| `--mention`, `--mention-wash` | `chat-message` | `#8a5a00`, `#fff4cc` |
+
+## Adding one
+
+Put the `.zb` file in `components/`, give it a description comment, add it to a category in `build-index.mjs`, run `node registry/build-index.mjs`, and add its keyboard and screen-reader test.

package/registry/build-index.mjs

@@ -0,0 +1,58 @@
+// Writes index.json, the registry's catalogue, from the components' own description comments:
+//   node registry/build-index.mjs [--check]
+// With --check it fails if index.json is out of date (CI runs that).
+import { copyFileSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const CATEGORIES = {
+  input: ['tag-input', 'date-range', 'money-input', 'star-rating', 'toggle-switch', 'choice-cards', 'color-swatches', 'quantity-stepper', 'segmented-control'],
+  display: ['donut-chart', 'spark-line', 'line-chart', 'progress-ring', 'streak-grid', 'flip-card', 'step-indicator'],
+  app: ['kanban-column', 'chat-message', 'message-composer', 'modal-dialog'],
+  widget: ['accordion-panel', 'tool-tip', 'tab-list', 'dropdown-menu', 'combo-box'],
+};
+
+export function catalogue() {
+  const files = readdirSync(join(here, 'components')).filter((file) => file.endsWith('.zb')).sort();
+  const components = files.map((file) => {
+    const name = file.replace(/\.zb$/, '');
+    const source = readFileSync(join(here, 'components', file), 'utf8');
+    const comment = source.match(/^<!--([\s\S]*?)-->/)?.[1] ?? '';
+    const description = comment.split(/\n\s*@/)[0].split(/\n\s*\n/)[0].replace(/\s+/g, ' ').trim();
+    const category = Object.keys(CATEGORIES).find((key) => CATEGORIES[key].includes(name));
+    if (!category) throw new Error(`registry: ${name} has no category in build-index.mjs`);
+    if (!description) throw new Error(`registry: ${name} has no description comment`);
+    const script = source.match(/<script[^>]*>([\s\S]*?)<\/script>/)?.[1] ?? '';
+    const dependencies = [...script.matchAll(/import\s+['"]\.\/([a-z0-9-]+)\.zb['"]/g)].map((match) => match[1]);
+    // npm packages it imports, beyond the runtime: `zubra add` says to install them. The Zag adapter
+    // needs @zag-js/vanilla, which it imports itself.
+    const packages = [...new Set([...script.matchAll(/from\s+['"]((?:@[a-z0-9-]+\/)?[a-z0-9-]+)[^'"]*['"]/g)].map((match) => match[1]).filter((name) => name !== '@zubra/runtime'))];
+    if (/from\s+['"]@zubra\/runtime\/zag['"]/.test(script)) packages.unshift('@zag-js/vanilla');
+    return { name, category, description, files: [file], dependencies, ...(packages.length ? { packages } : {}) };
+  });
+  return { components };
+}
+
+/**
+ * Copies the components that import no npm packages into `into`, for the libraries the tests and
+ * examples build from the registry: a plain page, or an app that hasn't installed Zag, can use them
+ * all. Returns `into`.
+ */
+export function standalone(into) {
+  mkdirSync(into, { recursive: true });
+  for (const component of catalogue().components) {
+    if (!component.packages) for (const file of component.files) copyFileSync(join(here, 'components', file), join(into, file));
+  }
+  return into;
+}
+
+const text = JSON.stringify(catalogue(), null, 2) + '\n';
+if (process.argv.includes('--check')) {
+  if (readFileSync(join(here, 'index.json'), 'utf8') !== text) {
+    console.error('registry/index.json is out of date: run node registry/build-index.mjs');
+    process.exitCode = 1;
+  }
+} else if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  writeFileSync(join(here, 'index.json'), text);
+}

package/registry/components/accordion-panel.zb

@@ -0,0 +1,23 @@
+<!--
+  A section that opens and closes, on the native <details>: the browser does the keyboard (Enter
+  and Space on the heading), the find-in-page opening and the announcements. Panels with the same
+  `group` form an accordion where one is open at a time (<details name>). `open` is two-way.
+  @slot - The panel's content.
+  @slot heading - Its heading (defaults to `heading`).
+-->
+<style>
+  :host { display: block; }
+  details { border-bottom: 1px solid var(--line, #dde); }
+  summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.25rem; font-weight: 600; cursor: pointer; list-style: none; }
+  summary::-webkit-details-marker { display: none; }
+  summary::after { content: ""; margin-left: auto; width: 0.5rem; height: 0.5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.2s; }
+  details[open] > summary::after { transform: rotate(-135deg); }
+  summary:focus-visible { outline: 2px solid var(--accent, #36c); outline-offset: 2px; border-radius: 0.3rem; }
+  .body { padding: 0 0.25rem 1rem; }
+</style>
+<accordion-panel open:model={false} heading="" group="">
+  <details name={group || null} open={open} ontoggle={(event) => (open = event.target.open)}>
+    <summary><zb-slot name="heading">{heading}</zb-slot></summary>
+    <div class="body"><zb-slot></zb-slot></div>
+  </details>
+</accordion-panel>

package/registry/components/chat-message.zb

@@ -0,0 +1,65 @@
+<!--
+  One message: avatar, author, time, text (with @mentions and links picked out), the message it
+  replies to, and reactions. `me` is the signed-in user's name: their messages, mentions of them and
+  their reactions are marked.
+  @fires reacttoggle - A reaction was toggled; `detail` is the emoji.
+  @fires reply - Reply was chosen.
+-->
+<script>
+  import { emit } from '@zubra/runtime'
+
+  const QUICK = ["👍", "🎉", "❤️", "😂"]
+  const mine = message.author === me
+  const initials = message.author.split(/\s+/).map((part) => part[0]).join("").slice(0, 2)
+  const hue = [...message.author].reduce((sum, char) => sum + char.charCodeAt(0) * 47, 0) % 360
+  const time = new Date(message.time).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })
+  const reactions = Object.entries(message.reactions ?? {}).filter(([, people]) => people.length > 0)
+  // Text as pieces, so mentions and links are elements, not HTML strings.
+  const pieces = message.text.split(/(@[A-Za-z]+|https?:\/\/\S+)/g).filter(Boolean).map((text, index) => ({
+    index,
+    text,
+    kind: text.startsWith("@") ? "mention" : /^https?:/.test(text) ? "link" : "text",
+    me: text.startsWith("@") && me.toLowerCase().startsWith(text.slice(1).toLowerCase()),
+  }))
+</script>
+<style>
+  :host { display: block; }
+  article { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0 0.7rem; padding: 0.45rem 1.25rem; }
+  article:hover { background: var(--hover, #f2f4f8); }
+  article.mentioned { background: var(--mention-wash, #fff4cc); box-shadow: inset 3px 0 var(--mention, #8a5a00); }
+  .avatar { grid-row: span 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; color: white; font-weight: 800; font-size: 0.8rem; }
+  header { display: flex; align-items: baseline; gap: 0.5rem; }
+  .author { font-weight: 700; }
+  .you { font-size: 0.7rem; font-weight: 700; color: var(--muted, #667085); }
+  time { font-size: 0.75rem; color: var(--muted, #667085); }
+  .quote { margin: 0.15rem 0 0.25rem; padding-left: 0.6rem; border-left: 3px solid var(--line, #d9dce3); color: var(--muted, #667085); font-size: 0.875rem; }
+  p { margin: 0; white-space: pre-wrap; word-break: break-word; }
+  .mention { padding: 0 0.15rem; border-radius: 0.3rem; background: var(--mention-wash, #fff4cc); color: var(--mention, #8a5a00); font-weight: 600; }
+  .mention.me { background: var(--mention, #8a5a00); color: white; }
+  a { color: var(--link, #2563eb); }
+  .reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
+  .reactions button { display: inline-flex; gap: 0.3rem; align-items: center; padding: 0.05rem 0.5rem; border: 1px solid var(--line, #d9dce3); border-radius: 999px; background: var(--surface, #ffffff); color: inherit; font: inherit; font-size: 0.8125rem; cursor: pointer; }
+  .reactions button[aria-pressed=true] { border-color: var(--link, #2563eb); background: var(--mention-wash, #fff4cc); }
+  .tools { position: absolute; top: -0.9rem; right: 1rem; display: flex; opacity: 0; gap: 0.1rem; padding: 0.15rem; border: 1px solid var(--line, #d9dce3); border-radius: 0.55rem; background: var(--surface, #ffffff); box-shadow: 0 2px 8px #0002; }
+  /* Transparent rather than hidden, so the keyboard can reach it; it shows on hover or focus. */
+  article:hover .tools, .tools:focus-within { opacity: 1; }
+  .tools button { border: 0; background: none; padding: 0.15rem 0.35rem; border-radius: 0.35rem; cursor: pointer; font: inherit; color: inherit; }
+  .tools button:hover { background: var(--hover, #f2f4f8); }
+</style>
+<chat-message me="" message={{ id: "", author: "", text: "", time: 0, reactions: {}, replyTo: null }}>
+  <article class:mentioned={pieces.some((piece) => piece.me)} data-mine={mine ? "true" : "false"}>
+    <span class="avatar" style:background={`hsl(${hue} 55% 40%)`} aria-hidden="true">{initials}</span>
+    <header><span class="author">{message.author}</span><zb-if test={mine}><span class="you">YOU</span></zb-if><time>{time}</time></header>
+    <div zb-if={message.replyTo} class="quote">{message.replyTo?.author}: {message.replyTo?.text}</div>
+    <p><zb-each items={pieces} as="piece" key={piece.index}><zb-if test={piece.kind === "mention"}><span class="mention" class:me={piece.me}>{piece.text}</span><zb-else-if test={piece.kind === "link"}><a href={piece.text} target="_blank" rel="noopener">{piece.text}</a></zb-else-if><zb-else>{piece.text}</zb-else></zb-if></zb-each></p>
+    <div zb-if={reactions.length > 0} class="reactions">
+      <zb-each items={reactions} as="reaction" key={reaction[0]}>
+        <button type="button" aria-pressed={reaction[1].includes(me) ? "true" : "false"} title={reaction[1].join(", ")} onclick={() => emit('reacttoggle', reaction[0])}>{reaction[0]} <b>{reaction[1].length}</b></button>
+      </zb-each>
+    </div>
+    <div class="tools" role="toolbar" aria-label="Message actions">
+      <zb-each items={QUICK} as="emoji" key={emoji}><button type="button" aria-label={`React ${emoji}`} onclick={() => emit('reacttoggle', emoji)}>{emoji}</button></zb-each>
+      <button type="button" class="reply" onclick={() => emit('reply')}>Reply</button>
+    </div>
+  </article>
+</chat-message>

package/registry/components/choice-cards.zb

@@ -0,0 +1,47 @@
+<!--
+  Pick one of several cards: a radio group. A form control; arrow keys move the choice.
+  Each item is `{ id, title, detail, price, note }` (`note` and `price` optional).
+  @fires valuechange - The choice changed; `detail` is the chosen id.
+-->
+<script>
+  import { validity } from '@zubra/runtime'
+
+  let group = null
+  validity(() => (required && !value ? "Choose one" : ""))
+
+  function choose(item) {
+    if (item.disabled || item.id === value) return
+    value = item.id
+  }
+  function move(index, step) {
+    const enabled = items.filter((item) => !item.disabled)
+    const at = enabled.findIndex((item) => item.id === items[index].id)
+    const next = enabled[(at + step + enabled.length) % enabled.length]
+    choose(next)
+    queueMicrotask(() => group.querySelector(`[data-id="${next.id}"]`)?.focus())
+  }
+</script>
+<style>
+  :host { display: block; }
+  [role=radiogroup] { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
+  button { display: grid; gap: 0.25rem; text-align: left; padding: 0.9rem 1rem; border: 2px solid var(--line, #dde); border-radius: 0.9rem; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
+  button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent, #36c) 50%, transparent); }
+  button[aria-checked=true] { border-color: var(--accent, #36c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #36c) 20%, transparent); }
+  button:disabled { opacity: 0.45; cursor: not-allowed; }
+  strong { font-size: 1rem; }
+  .detail { font-size: 0.8125rem; color: var(--muted, #667); }
+  .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.35rem; }
+  .price { font-weight: 700; }
+  .note { font-size: 0.75rem; font-weight: 600; color: var(--accent, #36c); }
+</style>
+<choice-cards form-associated value:model="" items={[]} required={false} label="">
+  <div role="radiogroup" aria-label={label} ref={group}>
+  <zb-each items={items} as="item" index="index" key={item.id}>
+    <button type="button" role="radio" data-id={item.id} aria-checked={item.id === value ? "true" : "false"} tabindex={item.id === value || (!value && index === 0) ? "0" : "-1"} disabled={item.disabled ?? false} onclick={() => choose(item)} onkeydown.down.right.prevent={() => move(index, 1)} onkeydown.up.left.prevent={() => move(index, -1)}>
+      <strong>{item.title}</strong>
+      <span class="detail">{item.detail}</span>
+      <span class="row"><span class="note">{item.note ?? ""}</span><span class="price">{item.price ?? ""}</span></span>
+    </button>
+  </zb-each>
+  </div>
+</choice-cards>

package/registry/components/color-swatches.zb

@@ -0,0 +1,30 @@
+<!--
+  Pick a colour from `colors`. A form control (a radio group): arrow keys move the choice.
+  @fires valuechange - The colour changed; `detail` is the colour.
+-->
+<script>
+  let group = null
+
+  function pick(color) {
+    if (color === value) return
+    value = color
+  }
+  function move(index, step) {
+    const next = colors[(index + step + colors.length) % colors.length]
+    pick(next)
+    queueMicrotask(() => group.querySelector(`[data-color="${next}"]`)?.focus())
+  }
+</script>
+<style>
+  :host { display: block; }
+  div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+  button { width: 1.75rem; height: 1.75rem; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px var(--surface, #ffffff); }
+  button[aria-checked=true] { border-color: var(--ink, #1d2130); }
+</style>
+<color-swatches form-associated value:model="#16a34a" colors={["#16a34a", "#2563eb", "#db2777", "#ea580c", "#7c3aed", "#0891b2"]} label="Colour">
+  <div role="radiogroup" aria-label={label} ref={group}>
+    <zb-each items={colors} as="color" index="index" key={color}>
+      <button type="button" role="radio" style:background={color} data-color={color} aria-label={color} aria-checked={color === value ? "true" : "false"} tabindex={color === value ? "0" : "-1"} onclick={() => pick(color)} onkeydown.right.down.prevent={() => move(index, 1)} onkeydown.left.up.prevent={() => move(index, -1)}></button>
+    </zb-each>
+  </div>
+</color-swatches>

package/registry/components/combo-box.zb

@@ -0,0 +1,59 @@
+<!--
+  A combobox: type to filter, arrow keys to move, Enter to pick, Escape to close. A form control.
+  Its behaviour is Zag.js's combobox machine (through @zubra/runtime/zag); its markup and styles are
+  this file's. It needs `npm install @zag-js/vanilla @zag-js/combobox`. `items` is
+  `[{ value, label }]`; `value` is two-way.
+  @fires valuechange - An item was picked; `detail` is its value.
+-->
+<script>
+  import * as combobox from '@zag-js/combobox'
+  import { id, computed } from '@zubra/runtime'
+  import { useMachine, normalizeProps } from '@zubra/runtime/zag'
+
+  let query = ""
+  const shown = items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()))
+  const collection = combobox.collection({ items: shown, itemToValue: (item) => item.value, itemToString: (item) => item.label })
+
+  const uid = id() // once: Zag's ids must be stable
+  const machine = useMachine(combobox.machine, () => ({
+    id: uid,
+    collection,
+    value: value ? [value] : [],
+    placeholder,
+    onInputValueChange: (details) => { query = details.inputValue },
+    // Opened from the button or the arrow keys: show everything, as Zag's own examples do.
+    onOpenChange: (details) => { if (details.open && details.reason !== "input-change") query = "" },
+    onValueChange: (details) => { value = details.value[0] ?? "" },
+  }))
+  const api = computed(() => combobox.connect(machine.current, normalizeProps))
+</script>
+<style>
+  :host { display: inline-block; font: inherit; }
+  [data-part=root] { display: grid; gap: 0.3rem; }
+  [data-part=label] { font-weight: 600; }
+  [data-part=control] { display: flex; border: 1px solid var(--line, #dde); border-radius: 0.5rem; background: var(--surface, #fff); }
+  [data-part=control]:focus-within { outline: 2px solid var(--accent, #36c); outline-offset: 1px; }
+  input { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
+  [data-part=trigger] { padding: 0 0.6rem; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
+  ul { list-style: none; margin: 0; padding: 0.3rem; min-width: 12rem; max-height: 16rem; overflow: auto; border: 1px solid var(--line, #dde); border-radius: 0.6rem; background: var(--surface, #fff); box-shadow: 0 8px 24px #0d122026; }
+  ul:not([data-state=open]) { display: none; }
+  li { padding: 0.4rem 0.6rem; border-radius: 0.4rem; cursor: pointer; }
+  li[data-highlighted] { background: var(--hover, #f2f4f8); }
+  li[data-state=checked] { font-weight: 700; }
+</style>
+<combo-box form-associated value:model="" label="" placeholder="" items={[]}>
+  <div {...api.getRootProps()}>
+    <label {...api.getLabelProps()}>{label}</label>
+    <div {...api.getControlProps()}>
+      <input {...api.getInputProps()}>
+      <button type="button" {...api.getTriggerProps()}>▾</button>
+    </div>
+  </div>
+  <div {...api.getPositionerProps()}>
+    <ul {...api.getContentProps()}>
+      <zb-each items={shown} as="item" key={item.value}>
+        <li {...api.getItemProps({ item })}>{item.label}</li>
+      </zb-each>
+    </ul>
+  </div>
+</combo-box>

package/registry/components/date-range.zb

@@ -0,0 +1,37 @@
+<!--
+  A check-in and check-out date, as one value `{ start, end }` ("YYYY-MM-DD" strings). A form
+  control: invalid until both are set and `end` is after `start`.
+  @fires valuechange - Either date changed; `detail` is the new `{ start, end }`.
+-->
+<script>
+  import { formValue, validity, id } from '@zubra/runtime'
+
+  const startId = id()
+  const endId = id()
+  const nights = value.start && value.end ? Math.round((Date.parse(value.end) - Date.parse(value.start)) / 86400000) : 0
+  const nextDay = (day) => (day ? new Date(Date.parse(day) + 86400000).toISOString().slice(0, 10) : min)
+
+  formValue(() => (value.start && value.end ? `${value.start}/${value.end}` : null))
+  validity(() => (!value.start || !value.end ? "Choose both dates" : nights < 1 ? "Check-out must be after check-in" : ""))
+
+  function set(part, day) {
+    const next = { ...value, [part]: day }
+    if (part === "start" && next.end && next.end <= day) next.end = nextDay(day)
+    value = next
+  }
+</script>
+<style>
+  :host { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem; align-items: end; }
+  label { display: grid; gap: 0.3rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted, #667); }
+  input { font: inherit; padding: 0.55rem 0.65rem; border: 1px solid var(--line, #ccd); border-radius: 0.6rem; background: var(--surface, #fff); color: var(--ink, #111); }
+  .nights { padding: 0.55rem 0.8rem; border-radius: 999px; background: var(--chip, #eef); font-weight: 700; white-space: nowrap; }
+</style>
+<date-range form-associated value:model={{ start: "", end: "" }} min="">
+  <label for={startId}>Check-in
+    <input id={startId} type="date" class="start" min={min} value={value.start} onchange={(event) => set("start", event.target.value)}>
+  </label>
+  <label for={endId}>Check-out
+    <input id={endId} type="date" class="end" min={nextDay(value.start)} value={value.end} onchange={(event) => set("end", event.target.value)}>
+  </label>
+  <span class="nights" aria-live="polite">{nights > 0 ? `${nights} night${nights === 1 ? "" : "s"}` : "—"}</span>
+</date-range>

package/registry/components/donut-chart.zb

@@ -0,0 +1,56 @@
+<!--
+  A donut chart of `segments` (`[{ label, value, tone }]`, `tone` 0–7), with the total in the
+  middle and a legend. Choosing a segment (or its legend entry) selects it; again clears it.
+  @slot - What's in the middle; the total by default.
+  @fires valuechange - The selected label changed; `detail` is the label, or "" for none.
+-->
+<script>
+  const R = 15.915494309189533 // circumference 100, so lengths are percentages
+  const total = segments.reduce((sum, segment) => sum + segment.value, 0)
+  const arcs = segments.reduce((list, segment) => {
+    const start = list.length ? list[list.length - 1].end : 0
+    const length = total ? (segment.value / total) * 100 : 0
+    return [...list, { ...segment, start, end: start + length, length }]
+  }, []).filter((arc) => arc.length > 0)
+  const percent = (arc) => `${Math.round(arc.length)}%`
+
+  function select(label) {
+    value = value === label ? "" : label
+  }
+</script>
+<style>
+  :host { display: grid; grid-template-columns: 11rem 1fr; gap: 1.25rem; align-items: center; }
+  .chart { position: relative; }
+  svg { display: block; width: 100%; transform: rotate(-90deg); }
+  circle { fill: none; stroke-width: 5; cursor: pointer; transition: stroke-width 0.15s, opacity 0.15s; }
+  circle.track { stroke: var(--sunken, #f3f4f7); cursor: default; }
+  circle.dim { opacity: 0.3; }
+  circle.on { stroke-width: 6.5; }
+  .middle { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
+  ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
+  button { display: grid; grid-template-columns: 0.75rem 1fr auto; gap: 0.5rem; align-items: center; width: 100%; padding: 0.3rem 0.45rem; border: 0; border-radius: 0.45rem; background: none; color: inherit; font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
+  button:hover, button[aria-pressed=true] { background: var(--sunken, #f3f4f7); }
+  .swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; }
+  .pct { color: var(--muted, #667085); font-variant-numeric: tabular-nums; }
+  .t0 { stroke: #4f46e5; background: #4f46e5; } .t1 { stroke: #0891b2; background: #0891b2; }
+  .t2 { stroke: #16a34a; background: #16a34a; } .t3 { stroke: #ca8a04; background: #ca8a04; }
+  .t4 { stroke: #ea580c; background: #ea580c; } .t5 { stroke: #db2777; background: #db2777; }
+  .t6 { stroke: #7c3aed; background: #7c3aed; } .t7 { stroke: #64748b; background: #64748b; }
+  @media (max-width: 34rem) { :host { grid-template-columns: 1fr; } .chart { max-width: 12rem; margin: 0 auto; } }
+</style>
+<donut-chart segments={[]} value:model="" label="Chart">
+  <div class="chart">
+    <svg viewBox="0 0 42 42" role="img" aria-label={label}>
+      <circle class="track" cx="21" cy="21" r={R}></circle>
+      <zb-each items={arcs} as="arc" key={arc.label}>
+        <circle class={`t${arc.tone}`} class:dim={value && value !== arc.label} class:on={value === arc.label} cx="21" cy="21" r={R} stroke-dasharray={`${arc.length} ${100 - arc.length}`} stroke-dashoffset={-arc.start} data-label={arc.label} onclick={() => select(arc.label)}><title>{arc.label}: {percent(arc)}</title></circle>
+      </zb-each>
+    </svg>
+    <div class="middle"><zb-slot><strong>{total}</strong></zb-slot></div>
+  </div>
+  <ul>
+    <zb-each items={arcs} as="arc" key={arc.label}>
+      <li><button type="button" aria-pressed={value === arc.label ? "true" : "false"} data-label={arc.label} onclick={() => select(arc.label)}><span class={`swatch t${arc.tone}`}></span><span>{arc.label}</span><span class="pct">{percent(arc)}</span></button></li>
+    </zb-each>
+  </ul>
+</donut-chart>

package/registry/components/dropdown-menu.zb

@@ -0,0 +1,83 @@
+<!--
+  A menu of actions behind a button, on the platform's `popover`: the browser puts it in the top
+  layer and closes it on Escape or a click outside. Down or Up on the button opens it; arrow keys,
+  Home, End and typing a letter move among the items; Enter or Space picks one, and focus goes
+  back to the button. It's placed below the button by CSS anchor positioning, or by script where
+  that isn't supported. `items` is `[{ value, label, disabled? }]`.
+  @slot label - The button's content (defaults to `label`).
+  @fires itemselect - An item was picked; `detail` is its value.
+-->
+<script>
+  import { id, emit, onMount } from '@zubra/runtime'
+  import { rovingFocus, typeahead } from '@zubra/runtime/primitives'
+
+  const menuId = id()
+  const buttonId = id()
+  const anchored = typeof CSS !== "undefined" && CSS.supports("position-area: bottom")
+  let button = null
+  let menu = null
+  let open = false
+  let last = false // open at the last item (Up on the button)
+
+  const entries = () => [...menu.querySelectorAll("[role=menuitem]:not(:disabled)")]
+
+  function toggled(event) {
+    open = event.newState === "open"
+    if (open) {
+      if (!anchored) place()
+      const all = entries()
+      ;(last ? all.at(-1) : all[0])?.focus()
+      last = false
+    } else if (menu.contains(document.activeElement) || document.activeElement === document.body) {
+      button.focus()
+    }
+  }
+  function keys(event) {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
+    event.preventDefault()
+    last = event.key === "ArrowUp"
+    menu.showPopover()
+  }
+  function choose(item) {
+    menu.hidePopover()
+    button.focus()
+    emit("itemselect", item.value)
+  }
+  // Tab out of the menu closes it, as menus do.
+  function left(event) {
+    if (open && !menu.contains(event.relatedTarget) && event.relatedTarget !== button) menu.hidePopover()
+  }
+  // Without anchor positioning: below the button, or above it if there's no room.
+  function place() {
+    const at = button.getBoundingClientRect()
+    const own = menu.getBoundingClientRect()
+    menu.style.top = `${at.bottom + 4 + own.height <= innerHeight ? at.bottom + 4 : Math.max(4, at.top - own.height - 4)}px`
+    menu.style.left = `${Math.min(at.left, innerWidth - own.width - 4)}px`
+  }
+
+  onMount(() => {
+    const roving = rovingFocus(menu, { selector: "[role=menuitem]", orientation: "vertical" })
+    const typing = typeahead(menu, { selector: "[role=menuitem]" })
+    return () => { roving(); typing() }
+  })
+</script>
+<style>
+  :host { display: inline-block; }
+  .trigger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border: 1px solid var(--line, #dde); border-radius: 0.5rem; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; }
+  .trigger::after { content: ""; width: 0.35rem; height: 0.35rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
+  [popover] { position: fixed; inset: auto; margin: 0; min-width: 11rem; padding: 0.3rem; border: 1px solid var(--line, #dde); border-radius: 0.6rem; background: var(--surface, #fff); color: var(--ink, #1d2130); box-shadow: 0 8px 24px #0d122026; }
+  @supports (position-area: bottom) {
+    [popover] { position-area: bottom span-right; position-try-fallbacks: flip-block; margin-top: 4px; }
+  }
+  [role=menuitem] { display: block; width: 100%; padding: 0.4rem 0.6rem; border: 0; border-radius: 0.4rem; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+  [role=menuitem]:hover, [role=menuitem]:focus { background: var(--hover, #f2f4f8); outline: none; }
+  [role=menuitem]:disabled { color: var(--muted, #98a2b3); cursor: default; }
+</style>
+<dropdown-menu label="Options" items={[]}>
+  <button type="button" class="trigger" id={buttonId} ref={button} popovertarget={menuId} aria-haspopup="menu" aria-expanded={open ? "true" : "false"} style:anchor-name={`--${menuId}`} onkeydown={keys}><zb-slot name="label">{label}</zb-slot></button>
+  <div popover id={menuId} role="menu" aria-labelledby={buttonId} ref={menu} style:position-anchor={`--${menuId}`} ontoggle={toggled} onfocusout={left}>
+    <zb-each items={items} as="item" key={item.value}>
+      <button type="button" role="menuitem" tabindex="-1" disabled={!!item.disabled} onclick={() => choose(item)}>{item.label}</button>
+    </zb-each>
+  </div>
+</dropdown-menu>

package/registry/components/flip-card.zb

@@ -0,0 +1,29 @@
+<!--
+  A card with two faces that flips in 3D. Click, Space or Enter flips it. Shadow DOM: the faces
+  are slotted, and the page's CSS styles them, not the card's.
+  @slot front - The question side.
+  @slot back - The answer side.
+  @fires flippedchange - It was flipped; `detail` is whether the back is showing.
+-->
+<script>
+  function flip() {
+    flipped = !flipped
+  }
+</script>
+<style>
+  :host { display: block; perspective: 1400px; }
+  .card { position: relative; display: grid; min-height: 15rem; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); cursor: pointer; border-radius: 1.25rem; outline: none; }
+  .card:focus-visible { box-shadow: 0 0 0 3px var(--accent, #36c); }
+  .flipped { transform: rotateY(180deg); }
+  .face { grid-area: 1 / 1; display: grid; place-items: center; padding: 2rem; border-radius: 1.25rem; backface-visibility: hidden; background: var(--card-front, #fff); box-shadow: 0 2px 4px #0001, 0 16px 40px #00000014; text-align: center; }
+  .back { transform: rotateY(180deg); background: var(--card-back, #fdf8ee); }
+  .hint { position: absolute; bottom: 0.75rem; left: 0; right: 0; text-align: center; font-size: 0.75rem; color: var(--muted, #888); backface-visibility: hidden; }
+  @media (prefers-reduced-motion: reduce) { .card { transition: none; } }
+</style>
+<flip-card shadow flipped:model={false} hint="Click or press Space to flip">
+  <div class="card" class:flipped role="button" tabindex="0" aria-pressed={flipped ? "true" : "false"} onclick={flip} onkeydown.space.enter.prevent={flip}>
+    <div class="face front" aria-hidden={flipped ? "true" : "false"}><zb-slot name="front"></zb-slot></div>
+    <div class="face back" aria-hidden={flipped ? "false" : "true"}><zb-slot name="back"></zb-slot></div>
+    <span class="hint">{hint}</span>
+  </div>
+</flip-card>