From a0a1ab44920e4bd52daffd415df817542732b0f3 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 1 Aug 2026 09:55:14 -0500
Subject: [PATCH 01/18] =?UTF-8?q?feat(bulma):=20add=20@paper/bulma=20?=
 =?UTF-8?q?=E2=80=94=20Bulma=20compat=20design=20system=20(Tier=201)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Components render real Bulma 1.0.4 markup and classes against the user's
own bulma.css while @vuetify/v0 supplies behavior, focus management, and
accessibility. Bulma ships zero JavaScript by design; this package is the
JS its docs tell you to bring.

- 22 Tier-1 components (Bu* prefix): modal, dropdown, tabs, navbar,
  message, notification, pagination, breadcrumb, panel, menu, and the
  full form set (field/control/label/help/input/textarea/select/
  checkbox/radio/file)
- Conformance harness: fixtures captured from bulma.io's documented
  markup, DOM/class diffing with a strict additive-attr tolerance
  charter, plus an axe-core a11y sweep over every component
- SPEC.md declares the compat-class deviations from DESIGN_SYSTEMS.md
  rulings and known Tier-1 limitations, each with its v0-core follow-up
- No stylesheet artifact and no owned token namespace: bulma@^1.0 is an
  optional peer; the user's CSS is the styling source
---
 .gitignore                                    |   1 +
 eslint.config.js                              |   7 +
 packages/bulma/SPEC.md                        |  94 +++++
 packages/bulma/harness/CANON.md               |  80 ++++
 packages/bulma/harness/V0-CHEATSHEET.md       | 276 +++++++++++++
 packages/bulma/harness/a11y.browser.test.ts   | 384 ++++++++++++++++++
 .../bulma/harness/conform.browser.test.ts     |  73 ++++
 packages/bulma/harness/conform.ts             | 182 +++++++++
 .../bulma/harness/fixtures/breadcrumb.html    |  58 +++
 packages/bulma/harness/fixtures/dropdown.html |  55 +++
 .../bulma/harness/fixtures/form-checkbox.html |  60 +++
 .../bulma/harness/fixtures/form-file.html     | 162 ++++++++
 .../bulma/harness/fixtures/form-general.html  |  88 ++++
 .../bulma/harness/fixtures/form-input.html    | 169 ++++++++
 .../bulma/harness/fixtures/form-radio.html    |  66 +++
 .../bulma/harness/fixtures/form-select.html   | 179 ++++++++
 .../bulma/harness/fixtures/form-textarea.html | 106 +++++
 packages/bulma/harness/fixtures/menu.html     |  38 ++
 packages/bulma/harness/fixtures/message.html  |  31 ++
 packages/bulma/harness/fixtures/modal.html    |  36 ++
 packages/bulma/harness/fixtures/navbar.html   |  93 +++++
 .../bulma/harness/fixtures/notification.html  |  25 ++
 .../bulma/harness/fixtures/pagination.html    |  55 +++
 packages/bulma/harness/fixtures/panel.html    |  73 ++++
 packages/bulma/harness/fixtures/tabs.html     |  47 +++
 packages/bulma/package.json                   |  54 +++
 .../BuBreadcrumb/BuBreadcrumb.browser.test.ts |  52 +++
 .../components/BuBreadcrumb/BuBreadcrumb.vue  | 105 +++++
 .../src/components/BuBreadcrumb/index.ts      |   2 +
 .../BuCheckbox/BuCheckbox.browser.test.ts     |  34 ++
 .../src/components/BuCheckbox/BuCheckbox.vue  | 133 ++++++
 .../bulma/src/components/BuCheckbox/index.ts  |   2 +
 .../BuControl/BuControl.browser.test.ts       |  58 +++
 .../src/components/BuControl/BuControl.vue    |  57 +++
 .../bulma/src/components/BuControl/index.ts   |   3 +
 .../BuDropdown/BuDropdown.browser.test.ts     | 125 ++++++
 .../src/components/BuDropdown/BuDropdown.vue  | 140 +++++++
 .../bulma/src/components/BuDropdown/index.ts  |   3 +
 .../BuField/BuField.browser.test.ts           |  78 ++++
 .../bulma/src/components/BuField/BuField.vue  |  71 ++++
 .../bulma/src/components/BuField/index.ts     |   3 +
 .../components/BuFile/BuFile.browser.test.ts  |  63 +++
 .../bulma/src/components/BuFile/BuFile.vue    | 209 ++++++++++
 packages/bulma/src/components/BuFile/index.ts |   2 +
 .../components/BuHelp/BuHelp.browser.test.ts  |  91 +++++
 .../bulma/src/components/BuHelp/BuHelp.vue    |  75 ++++
 packages/bulma/src/components/BuHelp/index.ts |   3 +
 .../BuInput/BuInput.browser.test.ts           |  90 ++++
 .../bulma/src/components/BuInput/BuInput.vue  | 160 ++++++++
 .../bulma/src/components/BuInput/index.ts     |   3 +
 .../BuLabel/BuLabel.browser.test.ts           |  66 +++
 .../bulma/src/components/BuLabel/BuLabel.vue  |  55 +++
 .../bulma/src/components/BuLabel/index.ts     |   3 +
 .../components/BuMenu/BuMenu.browser.test.ts  | 100 +++++
 .../bulma/src/components/BuMenu/BuMenu.vue    | 112 +++++
 packages/bulma/src/components/BuMenu/index.ts |   3 +
 .../BuMessage/BuMessage.browser.test.ts       |  78 ++++
 .../src/components/BuMessage/BuMessage.vue    |  79 ++++
 .../bulma/src/components/BuMessage/index.ts   |   3 +
 .../BuModal/BuModal.browser.test.ts           | 153 +++++++
 .../bulma/src/components/BuModal/BuModal.vue  | 201 +++++++++
 .../bulma/src/components/BuModal/index.ts     |   3 +
 .../BuNavbar/BuNavbar.browser.test.ts         | 100 +++++
 .../src/components/BuNavbar/BuNavbar.vue      | 110 +++++
 .../bulma/src/components/BuNavbar/index.ts    |   2 +
 .../BuNotification.browser.test.ts            |  80 ++++
 .../BuNotification/BuNotification.vue         |  69 ++++
 .../src/components/BuNotification/index.ts    |   3 +
 .../BuPagination/BuPagination.browser.test.ts |  50 +++
 .../components/BuPagination/BuPagination.vue  | 117 ++++++
 .../src/components/BuPagination/index.ts      |   2 +
 .../BuPanel/BuPanel.browser.test.ts           | 139 +++++++
 .../bulma/src/components/BuPanel/BuPanel.vue  | 135 ++++++
 .../bulma/src/components/BuPanel/index.ts     |   3 +
 .../BuRadio/BuRadio.browser.test.ts           |  45 ++
 .../bulma/src/components/BuRadio/BuRadio.vue  | 137 +++++++
 .../bulma/src/components/BuRadio/index.ts     |   2 +
 .../BuSelect/BuSelect.browser.test.ts         |  46 +++
 .../src/components/BuSelect/BuSelect.vue      | 159 ++++++++
 .../bulma/src/components/BuSelect/index.ts    |   2 +
 packages/bulma/src/components/BuTab/BuTab.vue |  63 +++
 packages/bulma/src/components/BuTab/index.ts  |   2 +
 .../src/components/BuTabPanel/BuTabPanel.vue  |  33 ++
 .../bulma/src/components/BuTabPanel/index.ts  |   2 +
 .../components/BuTabs/BuTabs.browser.test.ts  | 113 ++++++
 .../bulma/src/components/BuTabs/BuTabs.vue    |  67 +++
 packages/bulma/src/components/BuTabs/index.ts |   2 +
 .../BuTextarea/BuTextarea.browser.test.ts     |  77 ++++
 .../src/components/BuTextarea/BuTextarea.vue  | 147 +++++++
 .../bulma/src/components/BuTextarea/index.ts  |   3 +
 packages/bulma/src/components/index.ts        |  22 +
 packages/bulma/src/index.ts                   |   2 +
 packages/bulma/src/utilities/validate.ts      |  77 ++++
 packages/bulma/src/vite-env.d.ts              |   3 +
 packages/bulma/tsconfig.json                  |  42 ++
 packages/bulma/tsdown.config.mts              |  34 ++
 packages/bulma/vitest.browser.config.ts       |  59 +++
 pnpm-lock.yaml                                |  33 ++
 vitest.config.ts                              |   1 +
 99 files changed, 6893 insertions(+)
 create mode 100644 packages/bulma/SPEC.md
 create mode 100644 packages/bulma/harness/CANON.md
 create mode 100644 packages/bulma/harness/V0-CHEATSHEET.md
 create mode 100644 packages/bulma/harness/a11y.browser.test.ts
 create mode 100644 packages/bulma/harness/conform.browser.test.ts
 create mode 100644 packages/bulma/harness/conform.ts
 create mode 100644 packages/bulma/harness/fixtures/breadcrumb.html
 create mode 100644 packages/bulma/harness/fixtures/dropdown.html
 create mode 100644 packages/bulma/harness/fixtures/form-checkbox.html
 create mode 100644 packages/bulma/harness/fixtures/form-file.html
 create mode 100644 packages/bulma/harness/fixtures/form-general.html
 create mode 100644 packages/bulma/harness/fixtures/form-input.html
 create mode 100644 packages/bulma/harness/fixtures/form-radio.html
 create mode 100644 packages/bulma/harness/fixtures/form-select.html
 create mode 100644 packages/bulma/harness/fixtures/form-textarea.html
 create mode 100644 packages/bulma/harness/fixtures/menu.html
 create mode 100644 packages/bulma/harness/fixtures/message.html
 create mode 100644 packages/bulma/harness/fixtures/modal.html
 create mode 100644 packages/bulma/harness/fixtures/navbar.html
 create mode 100644 packages/bulma/harness/fixtures/notification.html
 create mode 100644 packages/bulma/harness/fixtures/pagination.html
 create mode 100644 packages/bulma/harness/fixtures/panel.html
 create mode 100644 packages/bulma/harness/fixtures/tabs.html
 create mode 100644 packages/bulma/package.json
 create mode 100644 packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.vue
 create mode 100644 packages/bulma/src/components/BuBreadcrumb/index.ts
 create mode 100644 packages/bulma/src/components/BuCheckbox/BuCheckbox.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuCheckbox/BuCheckbox.vue
 create mode 100644 packages/bulma/src/components/BuCheckbox/index.ts
 create mode 100644 packages/bulma/src/components/BuControl/BuControl.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuControl/BuControl.vue
 create mode 100644 packages/bulma/src/components/BuControl/index.ts
 create mode 100644 packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuDropdown/BuDropdown.vue
 create mode 100644 packages/bulma/src/components/BuDropdown/index.ts
 create mode 100644 packages/bulma/src/components/BuField/BuField.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuField/BuField.vue
 create mode 100644 packages/bulma/src/components/BuField/index.ts
 create mode 100644 packages/bulma/src/components/BuFile/BuFile.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuFile/BuFile.vue
 create mode 100644 packages/bulma/src/components/BuFile/index.ts
 create mode 100644 packages/bulma/src/components/BuHelp/BuHelp.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuHelp/BuHelp.vue
 create mode 100644 packages/bulma/src/components/BuHelp/index.ts
 create mode 100644 packages/bulma/src/components/BuInput/BuInput.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuInput/BuInput.vue
 create mode 100644 packages/bulma/src/components/BuInput/index.ts
 create mode 100644 packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuLabel/BuLabel.vue
 create mode 100644 packages/bulma/src/components/BuLabel/index.ts
 create mode 100644 packages/bulma/src/components/BuMenu/BuMenu.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuMenu/BuMenu.vue
 create mode 100644 packages/bulma/src/components/BuMenu/index.ts
 create mode 100644 packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuMessage/BuMessage.vue
 create mode 100644 packages/bulma/src/components/BuMessage/index.ts
 create mode 100644 packages/bulma/src/components/BuModal/BuModal.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuModal/BuModal.vue
 create mode 100644 packages/bulma/src/components/BuModal/index.ts
 create mode 100644 packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuNavbar/BuNavbar.vue
 create mode 100644 packages/bulma/src/components/BuNavbar/index.ts
 create mode 100644 packages/bulma/src/components/BuNotification/BuNotification.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuNotification/BuNotification.vue
 create mode 100644 packages/bulma/src/components/BuNotification/index.ts
 create mode 100644 packages/bulma/src/components/BuPagination/BuPagination.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuPagination/BuPagination.vue
 create mode 100644 packages/bulma/src/components/BuPagination/index.ts
 create mode 100644 packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuPanel/BuPanel.vue
 create mode 100644 packages/bulma/src/components/BuPanel/index.ts
 create mode 100644 packages/bulma/src/components/BuRadio/BuRadio.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuRadio/BuRadio.vue
 create mode 100644 packages/bulma/src/components/BuRadio/index.ts
 create mode 100644 packages/bulma/src/components/BuSelect/BuSelect.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuSelect/BuSelect.vue
 create mode 100644 packages/bulma/src/components/BuSelect/index.ts
 create mode 100644 packages/bulma/src/components/BuTab/BuTab.vue
 create mode 100644 packages/bulma/src/components/BuTab/index.ts
 create mode 100644 packages/bulma/src/components/BuTabPanel/BuTabPanel.vue
 create mode 100644 packages/bulma/src/components/BuTabPanel/index.ts
 create mode 100644 packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuTabs/BuTabs.vue
 create mode 100644 packages/bulma/src/components/BuTabs/index.ts
 create mode 100644 packages/bulma/src/components/BuTextarea/BuTextarea.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuTextarea/BuTextarea.vue
 create mode 100644 packages/bulma/src/components/BuTextarea/index.ts
 create mode 100644 packages/bulma/src/components/index.ts
 create mode 100644 packages/bulma/src/index.ts
 create mode 100644 packages/bulma/src/utilities/validate.ts
 create mode 100644 packages/bulma/src/vite-env.d.ts
 create mode 100644 packages/bulma/tsconfig.json
 create mode 100644 packages/bulma/tsdown.config.mts
 create mode 100644 packages/bulma/vitest.browser.config.ts

diff --git a/.gitignore b/.gitignore
index ba4b40d7b5..787ab25c0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,3 +62,4 @@ apps/docs/build/generated/
 # Vitest failure artifacts
 packages/0/.vitest-attachments/
 **/__screenshots__/
+.vitest-attachments/
diff --git a/eslint.config.js b/eslint.config.js
index 72641d3a43..b5859b4620 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -94,6 +94,13 @@ export default vuetify({
     '@typescript-eslint/no-explicit-any': 'off',
   },
 },
+{
+  // @paper/bulma conformance tests: conform() throws on mismatch — it IS the assertion
+  files: ['packages/bulma/**/*.browser.test.ts'],
+  rules: {
+    'vitest/expect-expect': ['error', { assertFunctionNames: ['expect', 'conform'] }],
+  },
+},
 {
   files: ['**/*.vue'],
   rules: {
diff --git a/packages/bulma/SPEC.md b/packages/bulma/SPEC.md
new file mode 100644
index 0000000000..e3dfcdcabe
--- /dev/null
+++ b/packages/bulma/SPEC.md
@@ -0,0 +1,94 @@
+# @paper/bulma — Design Spec
+
+## Identity
+
+**Class:** Compat (third class — see [DESIGN_SYSTEMS.md](../../DESIGN_SYSTEMS.md); the
+compat-class addendum is extracted from daisyfy + this package after Tier 1, not authored
+up front). Full approved spec: `.claude/specs/2026-07-31-paper-bulma-compat.md`.
+
+Bulma ships zero JavaScript by design — its docs tell you to bring your own JS for modal,
+dropdown, navbar burger, and dismissals; `@paper/bulma` is that JS. Components render
+Bulma's real markup and classes against the user's own `bulma.css`, while `@vuetify/v0`
+provides all behavior, focus management, and accessibility. A second wedge resurrects the
+abandoned `bulma-extensions` ecosystem (switch, slider, steps, tooltip, …) on v0
+primitives, themed by the user's own Bulma variables.
+
+Component prefix: `Bu*` (`B*` is reserved for a future Bootstrap compat).
+
+## Upstream pin
+
+- **Peer:** `bulma@^1.0` — optional (`peerDependenciesMeta`); zero-config consumers may
+  load Bulma off-CDN, so the package never hard-requires the npm dependency.
+- Latest verified: **1.0.4**.
+- Bulma 0.9.x explicitly unsupported (no CSS variables).
+- No stylesheet artifact: the compat class ships no CSS for Tier 1 — the user's own
+  `bulma.css` (css, sass, or CDN) is the styling source.
+
+## Declared deviations from DESIGN_SYSTEMS.md
+
+Inherent to the compat class — the package's entire purpose is markup fidelity against an
+upstream CSS framework:
+
+1. **No owned token namespace** (deviation from **ruling 1**) — `--bulma-*` belongs to
+   upstream. There is no `theme.ts`-owned prefix; runtime theming (the optional
+   `createBulmaPlugin()`) drives upstream's own `--bulma-*` variables and `data-theme`
+   via `V0StyleSheetThemeAdapter`.
+2. **Upstream state classes, unprefixed** (deviation from **ruling 3**) — `is-active`,
+   `is-current`, `is-hoverable` instead of data-attribute hooks, and Bulma's unprefixed
+   class names (`.modal`, `.dropdown`) instead of package-prefixed ones (`bulma-*`).
+   State classes are owned by the component and driven by v0 state.
+3. **Native form controls where Bulma's CSS demands them** (deviation from **ruling 2**,
+   "never compose native HTML form controls") — Bulma styles native `<select>`,
+   `<input type=checkbox/radio/file>` wrapped in `.select`/`.checkbox`/`.file`; a
+   non-native BuSelect gets none of the user's CSS. Tier 1 form components wrap natives;
+   rich equivalents (BuCombobox) live in Tier 2 on full v0 primitives. Verified per
+   component during build — where v0's primitive already renders a compatible element,
+   it is preferred.
+
+Rules kept in full: never `<style scoped>`; behavioral components compose v0 compound
+primitives; a11y via v0, verified by the axe sweep; conformance harness diffs rendered
+markup against bulma.io's documented fixtures.
+
+## Known limitations (Tier 1)
+
+- **Global `<Scrim>` double-backdrop:** v0's `DialogContent` registers its stack ticket
+  without a way to mark it `scrim: false`, so an app that mounts v0's global `<Scrim>`
+  renders a second backdrop behind every `BuModal` (which hand-rolls `.modal-background`,
+  since Scrim is global/per-ticket and cannot serve as an in-flow per-modal element).
+  Candidate v0-core follow-up alongside a reusable `useFocusTrap` — BuModal currently
+  hand-rolls focus containment because v0 ships no focus-trap composable.
+- **`label[disabled]` (BuCheckbox/BuRadio):** Bulma documents the non-standard `disabled`
+  attribute on the wrapping `<label>` and its CSS selects on it; the components reproduce
+  it (alongside the input's real `disabled`). Expect axe/validator discussion — deliberate
+  markup fidelity.
+- **Esc closes a `blocking` BuModal:** matches v0 Dialog semantics (`blocking` gates
+  scrim-click dismissal only, mirroring native `<dialog>` cancel). Revisit if the DS wants
+  `blocking` to gate keyboard dismissal too.
+- **BuTab arrow keys move selection, not focus:** Tabs.Item renders renderless (the
+  fixture demands `li > a` with `is-active` on the `li`), so it registers no element and
+  v0's `focusSelectedTab`/`focusAdjacent` are no-ops — ArrowLeft/ArrowRight update
+  selection, panels, and `aria-selected`, but the visible focus ring and screen-reader
+  announcement stay on the previously focused anchor (APG tabs deviation the axe sweep
+  cannot catch). v0-core follow-up: let TabsItem accept an element input via
+  registration so renderless consumers can supply the focus target.
+- **BuBreadcrumb hand-rolls its markup:** v0 BreadcrumbsRoot's overflow watcher hides
+  middle crumbs whenever measured capacity < item count even with no Ellipsis
+  registered — items silently disappear where upstream Bulma flex-wraps. Since
+  BuBreadcrumb uses no other compound behavior (no v-model, no overflow UI), Tier 1
+  renders plain `nav > ul > li > a` + `aria-current="page"`. v0-core follow-up:
+  BreadcrumbsRoot should skip the truncation branch when no ellipsis ticket is
+  registered (or expose an overflow opt-out).
+- **Ambient `Input.Root` owns the whole behavioral surface of BuInput/BuTextarea:**
+  inside an ambient root, `v-model`, `type`, `disabled`, `readonly`, `required`,
+  `name`, `form`, `id`, and validation props on the Bu component are ignored (the
+  root's control attrs win the merge — v0's `mergeProps` assigns even `undefined`
+  keys, so a wrapper cannot force `readonly`; v0-core follow-up: InputControl should
+  omit falsy keys). `plaintext` is class-only there.
+- **validateOn machinery is package-local** (`src/utilities/validate.ts`): v0's
+  `parseValidateOn` is internal to `InputRoot.vue`. v0-core follow-up: export it from
+  the Input barrel.
+- **A11y improvements over verbatim docs markup:** BuNotification adds
+  `aria-label="delete"` (docs ship the delete button unlabeled); BuDropdown emits
+  `role="menu"` only when items actually render `role="menuitem"` (the docs' verbatim
+  arbitrary-content dropdown fails axe's aria-required-children). The harness tolerates
+  aria additions by design.
diff --git a/packages/bulma/harness/CANON.md b/packages/bulma/harness/CANON.md
new file mode 100644
index 0000000000..431a36fa42
--- /dev/null
+++ b/packages/bulma/harness/CANON.md
@@ -0,0 +1,80 @@
+# @paper/bulma — Implementation Canon (binding for all groups)
+
+# @paper/bulma cross-group canon (binding for G1–G6)
+
+## Imports, files, style
+- Import ONLY from `@vuetify/v0` — never `#v0/*` (that alias in tsconfig/tsdown exists for tooling parity with genesis; the cheatsheet forbids its use in package source).
+- Layout: `src/components/BuThing/BuThing.vue` + `src/components/BuThing/index.ts` (`export type { BuThingProps } from './BuThing.vue'` + `export { default as BuThing } from './BuThing.vue'`). Append ONE alphabetically-placed line per component to `src/components/index.ts`; touch no other shared file. Never edit root tsconfig.json, vitest.config.ts, pnpm-workspace.yaml, or packages/0.
+- Dual-script SFC, `defineOptions({ name: 'BuThing' })`, destructured props (no `withDefaults`), `defineModel` + explicit kebab `defineEmits`, `toRef` slotProps object, no `<style>` block at all in Tier 1, no `<style scoped>` ever.
+- Family shape is FLAT components (BuField > BuControl > BuInput composed in userland exactly as Bulma nests classes) — no compound `BuX.Y` namespaces in Tier 1.
+
+## Prop → modifier class mapping (identical across all groups)
+| Prop | Type | Class |
+|---|---|---|
+| `color` | `'primary'\|'link'\|'info'\|'success'\|'warning'\|'danger'` | `is-{color}` |
+| `size` | `'small'\|'normal'\|'medium'\|'large'` | `is-{size}` (emit `is-normal` only when explicitly passed) |
+| `rounded` / `outlined` / `light` / `boxed` / `fullwidth` / `centered` / `hoverable` / `loading` / `expanded` / `multiple` / `up` / `right` | `boolean` | `is-{name}` (`has-name` etc. noted per component) |
+| `plaintext` | `boolean` | `is-static` (+`readonly` attr) — `static` is a reserved word, do not use it as a prop |
+| `addons` (BuField) | `boolean\|'centered'\|'right'` | `has-addons[-{v}]` |
+| `grouped` (BuField) | `boolean\|'centered'\|'right'\|'multiline'` | `is-grouped[-{v}]` |
+| `horizontal` (BuField) | `boolean` | `is-horizontal` (+ renders `.field-label`/`.field-body`) |
+| `icons` (BuControl) | `'left'\|'right'\|'both'` | `has-icons-left/right` |
+
+- Undefined prop ⇒ no class. Props are conveniences, never gates: user `class` always merges (single-root Vue merging; verify on any multi-root part).
+- STATE classes (`is-active`, `is-current`, `is-selected`, `is-disabled` on pagination anchors) are component-owned, driven ONLY by v0 state. No `active` prop anywhere — controlled state goes through v-model.
+- **Alignment is boolean props** — `centered` / `right` (`is-centered` / `is-right`), never an `align` enum. Applies to BuPagination, BuTabs, BuFile, BuBreadcrumb alike; the contradictory `centered right` combination is the user's problem, same as stacking the classes in raw Bulma.
+- **Auto `is-danger` on invalid** — every component whose Bulma block accepts color modifiers renders `is-danger` from v0 state (`isValid === false`): BuInput/BuTextarea on the control, BuSelect and BuFile on the wrapper/root. BuCheckbox/BuRadio are exempt (Bulma defines no color modifiers for `.checkbox`/`.radio`; they get `aria-invalid` only).
+- **`error` is reserved package-wide** for the manual force-invalid override on form controls. Any prop that *displays* ambient validation state must use another name — BuHelp's display switch is `validation`.
+- **Fallthrough attrs on native-wrapping components** (BuSelect/BuCheckbox/BuRadio/BuFile): `inheritAttrs: false`; `class`/`style` merge onto the Bulma wrapper element, every other fallthrough attr (`multiple`, `accept`, `aria-*`, `autofocus`, `data-testid`, …) binds to the native control. BuInput/BuTextarea already bind all attrs to the control (they render no wrapper).
+- **Selection anchors bind hand-picked state, never the raw Item attrs spread** — `v-slot="{ isSelected, select }"` driving `:class="{'is-active': isSelected}"`, `:data-selected="isSelected || undefined"`, and `@click="select"`. The Item `attrs` include `aria-selected`/`aria-disabled`, which are INVALID on role-less anchors (axe aria-allowed-attr, critical); `data-selected` keeps the data-attr styling hook. One convention for BuMenu and BuPanel alike.
+- Disabled: native `disabled` attr on native controls; `is-disabled` class (never the attr) on pagination anchors; checkbox/radio mirror Bulma's documented non-standard `disabled` attr on the wrapping label AND the input.
+
+## v-model names (plain `v-model` everywhere — no named models except Input's existing `v-model:focused`)
+- Open/closed boolean: BuModal, BuDropdown, BuNavbar (burger/menu), BuMessage, BuNotification.
+- Selected value (generic `T`): BuTabs, BuPanel (blocks), BuMenu.
+- `number` current page (1-indexed): BuPagination.
+- `string` value: BuInput, BuTextarea; `string|string[]`: BuSelect (multiple); `boolean`: BuCheckbox; value-compare: BuRadio (+ `value` prop, native `name` grouping).
+- BuBreadcrumb: NO v-model (v0 Breadcrumbs has none); last item is declaratively current.
+
+## Slots
+- Default slot = the component's main content region. Named slots take the Bulma sub-part name minus block prefix: BuMessage `#header`, BuModal `#header`/`#footer` (card variant), BuDropdown `#trigger`, BuField `#label`.
+
+## Rendering doctrine
+- Element TAGS must match fixtures exactly (this is the product). Therefore Dialog.Content is `as="div"` (never native `<dialog>`), Tabs.List is `as="ul"`, etc.
+- Wherever Bulma drives display via classes, go renderless and bind the class from v0 slot state — never let the `hidden` attr or `popover` attr land (author CSS beats UA `[hidden]`; `popover` top-layers the element).
+- Additive v0 aria/data attrs (`data-*`, `aria-*`, `role`, `tabindex`, `id`) are allowed and expected on top of fixture markup.
+
+## Harness diff-tolerance policy (for the harness task and all groups' self-checks)
+1. Tag structure + class sets must match the fixture exactly for component-owned elements.
+2. ADDITIONS of `aria-*`, `data-*`, `role`, `tabindex`, `id` are tolerated; aria-label TEXT is tolerated (v0 localizes). `conform()` enforces exactly this list by default (`allowExtraAttrs: false`); any other extra attribute needs an explicit per-test `ignoreAttrs` entry with a comment.
+3. Known deliberate deltas: BuNotification adds `aria-label` to `.delete`; dropdown `role=menu`/`menuitem` per the role policy above; BuModal's stack `style="z-index"` and v0 InputControl's `type` on `<textarea>` are per-test `ignoreAttrs` tolerances.
+4. Every fixture block carries a `<!-- fixture: <label> -->` comment and tests address blocks by label (`'form-input:color primary'`), never by bare index — positional addressing silently repoints when blocks are inserted.
+
+## Out of scope for this fan-out
+`createBulmaPlugin()` / adapter / HSL utility (v0-core prerequisite), all Tier 2/3, vitest wiring, root config edits, changesets.
+
+# Per-group amendments
+
+## G1
+
+BuModal: Dialog.Root + Dialog.Content renderless with `as` unused — render `<div class="modal" :class="{'is-active': isOpen}">` yourself and hand-pick Content attrs (keep id/role/aria-modal/aria-labelledby/zIndex style; you are in renderless mode so spreading attrs is safe — never spread them in wrapped mode, double-fire hazard). Do NOT use v0 Scrim for `.modal-background` even with teleport=false — it renders one element per ACTIVE STACK TICKET globally (Scrim.vue v-for tickets); hand-roll `<div class="modal-background" @click>` that calls close() unless `blocking`. Note in SPEC.md: DialogContent's stack ticket cannot be marked scrim:false, so an app-level global <Scrim> double-backdrops BuModal (known limitation). Esc: as=div gets no native cancel — bind keydown Escape gated on `globalTop` from Content slot props so only the top modal closes. FOCUS TRAP: v0 has no focus-trap composable — hand-roll: on open focus first focusable (or the modal), wrap Tab/Shift+Tab within the .modal subtree, restore prior focus on close; file/flag a v0-core follow-up. `.modal-close` = Dialog.Close as-is (class modal-close is-large tolerable via props); modal-card variant must reproduce fixture exactly (header p.modal-card-title maps to Dialog.Title as="p"; wire aria-labelledby, else the id dangles — render Title or omit hand-picked aria-labelledby). closeOnClickOutside(bounds:true vs .modal-content) already closes on background clicks — don't double-wire. BuMessage/BuNotification: plain v-model + Presence (immediate default, unmount on leave); delete button is a bare button.delete click→model=false; BuNotification MUST add aria-label="delete" (fixture lacks it, deliberate a11y addition); message body-only variant (no header) required.
+
+## G2
+
+BuDropdown: SKIP v0 Popover entirely (PopoverContent hardwires `popover:''` → top-layer + UA margin:unset defeats Bulma's in-flow .dropdown-menu absolute positioning). Use Toggle.Root pattern or bare model + useClickOutside; bind `is-active` on .dropdown root. Hand-bind trigger aria: aria-haspopup, aria-controls={menuId via useId}, aria-expanded (Toggle only gives aria-pressed). role policy: emit role="menu" on .dropdown-menu ONLY when items are actionable links rendered with role="menuitem" (verbatim fixture fails axe aria-required-children); arbitrary-content mode emits neither. Own Esc-to-close too, not just click-outside. Support is-hoverable (pure CSS — no JS when set), is-right, is-up as props. BuMenu: markup per fixture — is-active lives on the ANCHOR (unlike tabs/breadcrumb); nested `<ul>` has NO class and is ALWAYS visible in Bulma (no collapse behavior documented — do not invent one for Tier 1); active tracking via createNested `active:'single'` (or Selection) driving v-model; alternating p.menu-label + ul.menu-list sections via slots/items. BuPanel: nav.panel with FLAT heterogeneous children (no list wrapper); .panel-tabs anchors = one single-Selection scope; .panel-block is-active = a second Selection scope (single default, `multiple` prop); spreading Selection.Item attrs directly on your <a class=panel-block> is safe (Item is a pure provider, no wrapper element); label.panel-block>input[checkbox] rows are native passthrough markup.
+
+## G3
+
+BuTabs: Tabs.Root renders NO element (not an Atom) — you render div.tabs (+ is-centered/size/is-boxed/is-toggle props per canon) and `<ul>` (Tabs.List as="ul" is fine, role=tablist lands on it). Items: Tabs.Item RENDERLESS, render `<li :class="{'is-active': isSelected}"><a v-bind="attrs">` yourself — is-active goes on the li per fixture, anchors carry no href. Panels: v0 Tabs.Panel as-is (`hidden` attr fine here — Bulma defines no panel CSS); Panel value prop is required; mandatory='force' default auto-selects first tab. BuNavbar: Toggle model (or plain defineModel) drives BOTH `.navbar-burger.is-active` and `.navbar-menu.is-active`; do NOT use Collapsible.Content (sets hidden attr — .navbar-menu.is-active{display:block} author CSS silently beats it). Burger renders as `<a role="button">` — Toggle.Root as="a" supplies role/tabindex/keydown; you must hand-bind aria-expanded (Toggle only emits aria-pressed) and aria-label="menu"; burger has FOUR aria-hidden spans in 1.0 (fixture-verified), plus data-target=menuId and id on .navbar-menu. navbar-dropdown (has-dropdown/is-hoverable/is-selected) is Tier-1 markup PASSTHROUGH via slot content — hover behavior is Bulma CSS, zero JS; do not build click-dropdown behavior in this pass.
+
+## G4
+
+BuPagination: prop `pages` (total page count) mapped to v0 Root `:size="pages" :items-per-page="1"` (v0 size = TOTAL ITEMS, not pages — do not expose size/itemsPerPage in Tier 1); v-model = current page. DOM order per fixture: a.pagination-previous, a.pagination-next, THEN ul.pagination-list (CSS reorders visually) — the harness diffs order. All interactive parts `as="a"`: verified in source that PaginationPrev/Next/Item with as=a omit the `disabled` attr and emit aria-disabled + tabindex=-1 — bind `:class="{'is-disabled': isDisabled}"` yourself (fixture: class, never attribute, on anchors); current page: `:class="{'is-current': isSelected}"`, no href, aria-current=page comes from Item attrs. Wrap each Item/Ellipsis in `<li>` by iterating Root slot `items`; Ellipsis span.pagination-ellipsis with &hellip;. aria-label text differs from fixture ('Goto page 1' vs localized) — tolerated, don't chase it. BuBreadcrumb: NO v-model (v0 Breadcrumbs has none — current item is declarative). nav.breadcrumb[aria-label=breadcrumbs] > List as="ul"; do NOT render Divider parts (Bulma separators are li+li::before CSS); last item = `<li class="is-active">` wrapping Breadcrumbs.Page `as="a"` with href kept + aria-current=page (fixture keeps the anchor, Bulma styles it inert); separator/align/size = root modifier props per canon (has-*-separator). Skip the Ellipsis/overflow machinery in Tier 1 — it only engages if rendered.
+
+## G5
+
+BuField/BuControl/BuLabel/BuHelp are pure hand-rolled markup (v0 has NO Form.Field/Control/Label/Help) wired to Input context: useInputRoot is exported from the barrel; render `<label class="label" :for="id">` yourself (no Input.Label exists). BuField props per canon: addons/grouped/horizontal — horizontal renders .field-label.is-{size} + .field-body per the form-general fixture (in scope, fixture covers it). BuControl: `icons` prop → has-icons-left/right; `loading` + `size` → is-loading + is-{size} ON THE CONTROL (fixture: spinner sizing duplicates the size class on the control, state classes is-hovered/is-focused are docs demos — skip). BuHelp: when rendering validation errors use Input.Error RENDERLESS for its id/aria-live wiring (registration makes Root's aria-errormessage appear only when mounted), class `help is-danger`; plain help text via Input.Description or bare p.help + color prop. BuInput: Input.Root renderless wrapper is optional-markup (Bulma .input is bare-capable — Root renders div by default; use renderless so no extra wrapper lands) + Input.Control class="input" `:class` color/size/rounded/plaintext (is-static + readonly) and `{'is-danger': isValid === false}`; BuTextarea: Input.Control as="textarea" (+ rows passthrough, has-fixed-size prop `fixed`). Form aggregate: parent v0 Form v-model is WRITTEN BY the form (read-only validity) — don't treat it as a control channel. validateOn default stays v0's 'blur'.
+
+## G6
+
+All four wrap NATIVES (spec deviation 3 — confirmed: v0 Checkbox/Radio render role-button + inline-hidden input, cannot produce Bulma's visible native; v0 Select is a custom listbox). Use createInput for validation/Form auto-registration and bind onInput/onBlur/isFocused yourself (createInput has NO DOM events; InputRoot.vue parseValidateOn is the canonical validateOn pattern). BuSelect: div.select wrapper carries color/size/rounded/multiple/loading classes (is-multiple + native multiple/size attrs); native <select v-model>; is-hovered/is-focused are docs-only demos — skip; icon pairing via BuControl (G5's), not here. BuCheckbox: `<label class="checkbox"><input type=checkbox v-model> {slot}</label>`; BuRadio: `<label class="radio">` + value/name, native name grouping, no group component in Tier 1; disabled mirrors Bulma's documented non-standard label[disabled] AND input[disabled] — keep both, expect axe discussion, note in SPEC.md; .checkboxes/.radios list wrappers = optional presentational props or userland markup. BuFile: div.file root carries ALL modifiers (color/size/boxed/fullwidth/centered/right/`filename` boolean → has-name); structure exactly `label.file-label > input.file-input[type=file] + span.file-cta > span.file-icon + span.file-label` — NOTE Bulma's own class collision: .file-label is BOTH the outer label and the inner CTA text span, reproduce it verbatim; span.file-name text updates from the selected file when `filename` (the docs' bring-your-own-JS pattern is the fixture's last block); wire createInput for validation but the value model is the FileList/filename — keep v-model semantics minimal (emit change + expose files) rather than forcing string v-model.
diff --git a/packages/bulma/harness/V0-CHEATSHEET.md b/packages/bulma/harness/V0-CHEATSHEET.md
new file mode 100644
index 0000000000..4a1c65b9ae
--- /dev/null
+++ b/packages/bulma/harness/V0-CHEATSHEET.md
@@ -0,0 +1,276 @@
+# V0 API Cheatsheet for @paper/bulma implementers
+
+Ground truth extracted from actual source on this worktree (2026-08-01). Paths below are
+relative to `packages/0/src/` unless noted. When this document and source disagree, source wins.
+
+Import everything from `@vuetify/v0` (like `packages/genesis/src/components/GnActionButton/GnActionButton.vue`
+does: `import { Button } from '@vuetify/v0'`). The `#v0/` alias is internal to `packages/0` — do NOT use it in `packages/bulma`.
+
+---
+
+## 0. Atom — the rendering substrate (components/Atom/Atom.vue)
+
+Every DOM-rendering v0 part is an `<Atom>`. Its props are inherited by every compound part via `AtomProps`:
+
+| Prop | Default | Effect |
+|---|---|---|
+| `as` | `'div'` (each part overrides — see per-part tables) | Element to render. `as={null}` = renderless |
+| `renderless` | `false` | Render slot content directly, no wrapper element. Slot receives all forwarded attrs as slot props |
+
+- Exposes `element: TemplateRef<HTMLElement | null>` via `defineExpose` (`AtomExpose`) — null in renderless mode.
+- Self-closing tags (`input`, `img`, …) render without children.
+- **There is no `asChild`** (Radix-style). Element override is `as="tag"`; full markup control is `renderless` + spreading the part's `attrs` slot prop onto your own element.
+- **Double-fire hazard** (`.claude/rules/components.md`): slot `attrs` objects contain handlers already bound to the Atom wrapper. Only spread `attrs` onto your own element in **renderless** mode; in wrapped mode spreading them on a child fires handlers twice via bubbling.
+
+The universal per-part shape: `attrs` in slot props = ARIA + data-* + handlers; part template does
+`<Atom v-bind="mergeProps(attrs, slotProps.attrs)" :as :renderless><slot v-bind="slotProps" /></Atom>`.
+
+---
+
+## 1. Dialog (components/Dialog/) — for BuModal
+
+Parts: `Dialog.Root`, `.Activator`, `.Content`, `.Title`, `.Description`, `.Close`. Barrel: `components/Dialog/index.ts`.
+
+| Part | Renders (`as` default) | Key props (defaults) | Slot props |
+|---|---|---|---|
+| Root | renderless (`as = null`, `renderless` hardcoded) | `namespace='v0:dialog'`, `id` (auto `useId()`) | `{ id, isOpen, open, close }` |
+| Activator | `button` | `namespace` | `{ isOpen, attrs }` — attrs: `type/role` polyfill, `tabindex:0`, `aria-haspopup='dialog'`, `aria-expanded`, `data-open: true\|undefined`, `onClick` (opens), `onKeydown` (only when `as !== 'button'`) |
+| Content | **`dialog`** (native) | `namespace`, `closeOnClickOutside=true`, `blocking=false` | `{ isOpen, globalTop, zIndex, attrs }` — attrs: `id`, `role='dialog'`, `aria-modal`, `aria-labelledby/describedby`, `style:{zIndex}`, `onCancel`, `onClose` |
+| Title | `h2` | `namespace` | `{ attrs: { id: titleId } }` |
+| Description | `p` | `namespace` | `{ attrs: { id: descriptionId } }` |
+| Close | `button` | `namespace` | `{ isOpen, attrs }` — `aria-label` from `locale.ti('Dialog.close') ?? 'Close'`, `onClick` closes |
+
+- **State**: `Root` `defineModel<boolean>({ default: false })` → plain `v-model`. Emits `update:model-value`. Context exposes `open()/close()`.
+- **No teleport anywhere in Dialog.** Content renders in place; modality comes from native `<dialog>.showModal()` (top layer). The calls are optional-chained (`element.showModal?.()` — DialogContent.vue), so **`as="div"` is safe**: no crash, but you lose native top layer/focus trap/Esc — which is exactly the BuModal case, since Bulma `.modal` is a fixed-position div overlay, not a `<dialog>`. With `as="div"` you must v-show/class-toggle visibility yourself via `isOpen` (`.modal.is-active`) and Esc handling is yours (stack `onDismiss` covers scrim clicks only).
+- Content registers with `useStack()` — ticket select/unselect follows `isOpen`; `zIndex`/`globalTop` in slot props; scrim dismissal calls `context.close()` unless `blocking`.
+- `closeOnClickOutside` uses `useClickOutside` with `{ bounds: true }` against the content element.
+- Title/Description only emit ids; `aria-labelledby/describedby` on Content point at them unconditionally (render Title/Description or the references dangle).
+
+## 2. Scrim (components/Scrim/Scrim.vue) — maps to `.modal-background`
+
+Single-file, no compound. Props: `as='div'`, `renderless`, `transition='fade'`, `teleport=true`, `teleportTo='body'`.
+
+- Renders **one Atom per active stack ticket** whose `scrim !== false`, inside a `<TransitionGroup :name="transition">`; teleports to body by default (`teleport=false` renders in place — needed if `.modal-background` must sit inside `.modal`).
+- Slot props per ticket: `{ ticket, zIndex (ticket.zIndex - 1), isBlocking, dismiss, attrs }`; attrs: `aria-hidden='true'`, `style:{zIndex}`, `onClick` → dismisses unless blocking.
+- It's a **global** scrim keyed off `useStack` — it backs Dialogs and Portals automatically. For a per-modal in-DOM `.modal-background`, set `teleport=false` or hand-roll a div bound to `isOpen` instead.
+
+## 3. Portal (components/Portal/Portal.vue)
+
+Renderless Teleport + stack registration. Props: `to='body'` (`'top-layer'` = topmost open modal element, or HTMLElement), `disabled=false` (render inline), `blocking=false`, `scrim=true`. Emits `close`.
+
+- Registers a stack ticket and **selects it immediately on setup** — a mounted Portal is always "open"; gate with `v-if`.
+- Slot props: `{ zIndex, close }`. zIndex must land on a *positioned* element to matter.
+- No `as`/`renderless` props (not AtomProps) — it renders only a `<Teleport>`.
+
+## 4. Popover (components/Popover/) — for BuDropdown (read the caveat)
+
+Parts: `Popover.Root`, `.Activator`, `.Content`.
+
+| Part | `as` default | Key props | Slot props |
+|---|---|---|---|
+| Root | renderless (`as = null`) | `id` (auto) — **no `namespace` prop**; context is `createContext<PopoverContext>('v0:popover')` fixed | `{ id, isSelected, toggle }` |
+| Activator | `button` | `target` (override popover id) | `{ isOpen, attrs }` — attrs: **`popovertarget`** (native invoker), `type/role` polyfill, `tabindex:0`, `aria-expanded`, `aria-controls`, `data-open`, `style` (anchor-name), `onKeydown` (non-button only; toggle via context) |
+| Content | Atom default `div` | `id`, `positionArea`, `positionTry` | `{ isOpen, attrs }` — attrs: `id`, **`popover: ''`**, `style` (CSS anchor positioning: `position: fixed`, `position-area`, `position-anchor`, `position-try-fallbacks`), `onBeforetoggle` |
+
+- **State**: Root `defineModel<boolean>({ default: false })` (plain `v-model`), wrapped in `usePopover({ id, isOpen })` (composables/usePopover) which returns `{ isOpen, id, open, close, toggle, cancel, anchorStyles, contentAttrs, contentStyles, attach }`.
+- **Built on the native Popover API**: content carries the `popover` attribute → browser promotes it to the **top layer** with UA `position: fixed` and `margin: unset`. No Teleport involved.
+- **BuDropdown conflict**: the spec wants Bulma's own in-flow absolute positioning (`.dropdown.is-active > .dropdown-menu`). `PopoverContent` *always* emits `popover=""` — top-layer promotion will defeat Bulma's `.dropdown-menu { position: absolute }` styling and the UA popover styles hardcode `margin: unset` (see memory `popover-display-autohide-footgun`). Two viable routes; decide during build:
+  1. Use `Popover.*` renderless, spread everything **except** you cannot omit `popover` from Content's attrs — so renderless Content + hand-picked attrs (drop `popover` and `style`, keep `id`) and drive open state from `isOpen` → `.is-active` class. You then own click-outside (`useClickOutside`) and Esc.
+  2. Skip Popover entirely: `Toggle.Root` (or bare `shallowRef`) + `useClickOutside` + `.is-active` class binding. Simpler and matches "no floating engine needed".
+
+## 5. Tabs (components/Tabs/) — for BuTabs
+
+Parts: `Tabs.Root`, `.List`, `.Item`, `.Panel`.
+
+| Part | `as` default | Key props (defaults) | Slot props |
+|---|---|---|---|
+| Root | **no Atom — renders `<slot>` only** (TabsRootProps does NOT extend AtomProps) | `namespace='v0:tabs'`, `disabled=false`, `enroll=false`, `mandatory='force'`, `circular=true`, `orientation='horizontal'`, `activation='automatic'` | `{ isDisabled, orientation, activation, first, last, next, prev, step, select, unselect, toggle, attrs: { 'aria-multiselectable': false } }` |
+| List | `div` | `label`, `namespace` | `{ orientation, isDisabled, attrs }` — `role='tablist'`, `aria-orientation`, `aria-label`, `aria-disabled`, `data-disabled` |
+| Item | `button` | `id`, `value` (matches Panel), `disabled`, `namespace`, `ariaLabel/Labelledby/Describedby` | `{ id, isSelected, isDisabled, select, attrs }` — `role='tab'`, roving `tabindex 0/-1`, `aria-selected/controls`, `data-selected/disabled`, `disabled` (native btn only), `onClick/onKeydown/onFocus` |
+| Panel | `div` | `value` (**required**), `namespace` | `{ isSelected, attrs }` — `role='tabpanel'`, `aria-labelledby`, `tabindex`, **`hidden: !isSelected`**, `data-selected` |
+
+- **State**: Root is generic `T`; `defineModel<T | T[]>()` — plain `v-model` of the selected Item `value`. Built on `createStep` + `useProxyModel`, `mandatory='force'` auto-selects the first tab.
+- Full keyboard nav lives in Item (arrows/Home/End, automatic vs manual activation, focus management via registered `el`).
+- **Bulma mapping**: `.tabs > ul > li.is-active > a` — `is-active` goes on the `<li>` but v0 puts state on the Item element. Pattern: `<li :class="{ 'is-active': ... }">` needs the ticket state *outside* the Item; either render `Tabs.Item` `as="a"` and put `is-active` on the `<a>`'s parent via the Item's slot (`v-slot` binds inside, so wrap: `<Tabs.Item as="a" v-slot="{ isSelected }">` can't class its own parent `<li>`) — the working shape is `Tabs.Item` renderless, render `<li :class="{'is-active': isSelected}"><a v-bind="attrs">` yourself. Bulma defines **no panels**; `Tabs.Panel` is ours (`hidden` attr is fine here — Bulma has no competing display rule for panels).
+
+## 6. Toggle (components/Toggle/) — for BuNavbar burger, BuMessage/BuNotification dismissal
+
+Parts: `Toggle.Root`, `.Group`, `.Indicator`. Dual-mode: standalone boolean or grouped selection.
+
+| Part | `as` default | Key props (defaults) | Slot props |
+|---|---|---|---|
+| Root | `button` | `id`, `value`, `disabled=false`, `namespace='v0:toggle:root'`, `groupNamespace='v0:toggle:group'` | `{ isPressed, isDisabled, toggle, attrs }` — `aria-pressed`, `data-state: 'on'\|'off'`, `data-disabled`, `tabindex`, `onClick`, keydown polyfill |
+| Group | `div` | `namespace='v0:toggle:group'`, `disabled`, `multiple=false` (`createSingle` vs `createGroup`), `mandatory=false`, `orientation='horizontal'`, `label`, `ariaLabelledby/Describedby` | `{ isDisabled, attrs }` — `role='group'`, `aria/data-orientation`, `aria-disabled` |
+| Indicator | `span` | `namespace='v0:toggle:root'` | `{ isPressed, attrs }` — `data-state`, `style.visibility` hidden when off |
+
+- Standalone Root: `defineModel<boolean>()` plain `v-model` (with internal `shallowRef` shadow for Vue 3.5 re-render quirk). Group: generic `T`, `defineModel<T | T[]>()`.
+- Group detection is try/catch injection — Root inside a Group ignores its own v-model and uses the group ticket.
+- Burger pattern: `Toggle.Root as="a" class="navbar-burger" :class="{'is-active': isPressed}"` + bind `.navbar-menu.is-active` from the same model. Note the spec also lists Collapsible for this — Toggle is the better fit (see Collapsible caveat below).
+
+## 7. Presence (components/Presence/Presence.vue) — exit animations for dismissals
+
+Fully renderless (no Atom, no `as`). Props: `lazy=false`, `immediate=true`. `defineModel<boolean>({ default: false })` plain `v-model`. Emits `enter`, `leave`, `after-leave`.
+
+- Slot rendered while `isMounted`; during leave, content stays in DOM with `attrs['data-state']='leaving'` until you call `done()` (or next tick if `immediate`).
+- Slot props: `{ attrs: { 'data-state': 'unmounted'|'mounted'|'leaving', hidden? }, isPresent, isLeaving, done }`.
+- BuMessage/BuNotification: `Toggle`/local state drives `v-model`; wrap `.message`/`.notification` in `<Presence>`; hook CSS animation end → `done()`.
+
+## 8. Collapsible (components/Collapsible/) — BuNavbar alternative
+
+Parts: `Collapsible.Root` (`as='div'`, **renders an Atom**, unlike Tabs.Root), `.Activator` (`button`), `.Content` (`div`), `.Cue` (`span`, decorative, `aria-hidden`).
+
+- Root: `defineModel<boolean>({ default: false })` plain `v-model`; props `namespace='v0:collapsible'`, `disabled`. Slot `{ isOpen, isDisabled, open, close, toggle, attrs: { 'data-state': 'open'|'closed', 'data-disabled' } }`. Built on `createSingle` with one implicit ticket.
+- Activator attrs: `id`, `aria-expanded`, `aria-controls`, `disabled`/`type` (native btn) or `role`/`aria-disabled`/`onKeydown` polyfill, `data-state`, `onClick: toggle`.
+- **Content sets `hidden: !isOpen`** (UA `display: none`). Bulma's `.navbar-menu` display is class-driven (`.is-active { display: block }` — author CSS beats UA `[hidden]`), so mixing `hidden` with `is-active` produces a fight where author CSS quietly wins and `hidden` is decorative. For Bulma markup fidelity prefer Content `renderless` + own element with `is-active` bound to `isOpen`, or just use Toggle.
+
+## 9. Pagination (components/Pagination/) — for BuPagination
+
+Parts: `Pagination.Root` (`nav`), `.Item` (`button`), `.First/.Prev/.Next/.Last` (`button`), `.Ellipsis` (`span`), `.Status` (visually-hidden live region, `div`).
+
+- Root props: `namespace='v0:pagination'`, **`size=1` = total item count (not page count)**, `itemsPerPage=10`, `totalVisible` (undefined = auto-measure container width), `ellipsis='...'`. **`defineModel<number>({ default: 1 })` — plain `v-model` is the current page, 1-indexed.**
+- Root slot: `{ page, size, pages, itemsPerPage, items: PaginationTicket[], pageStart, pageStop, isFirst, isLast, first, last, next, prev, select, attrs }` — `items` is the computed visible page list (numbers + ellipsis tickets) from `createPagination`; iterate it to render `.pagination-list`.
+- Item props: `value` (page number, **required**), `disabled`, `id`. Slot `{ page, isSelected, isDisabled, select, attrs }` — `aria-current: 'page' | undefined`, `aria-label` localized, `data-selected`, click/keydown polyfill. Default slot fallback renders the number. Bulma: `as="a"` + `:class="{'is-current': isSelected}"` works (role/keydown polyfill kicks in automatically for non-button `as`).
+- Nav buttons auto-disable at edges (`isFirst`/`isLast`); each registers its element in a `controls` registry; Items/Ellipses register in an `items` registry — registration feeds the responsive width auto-measure. This happens via each part's own template ref; it works with `as` overrides.
+- Ellipsis: `aria-hidden='true'`, char from prop or Root context.
+
+## 10. Breadcrumbs (components/Breadcrumbs/) — for BuBreadcrumb
+
+Parts: `Breadcrumbs.Root` (`nav`), `.List` (**`ol`** default), `.Item` (`li`), `.Link` (`a`), `.Page` (`span`), `.Divider` (`li`), `.Ellipsis` (`li`), `.Activator`.
+
+- Root props: `namespace='v0:breadcrumbs'`, `divider='/'`, `ellipsis='…'`, `gap=8`, `label`. **No v-model** — Breadcrumbs has no selection model to control; it's a responsive-overflow display compound. Root slot: `{ isOverflowing, capacity, total, depth, isRoot, first, prev, select, attrs: { 'aria-label', role } }`.
+- Item registers with two registries (nav model + overflow group); visibility of collapsed crumbs is `v-show` via group `isSelected`; slot `{ id, isSelected, attrs: { inert, 'data-selected' } }`.
+- Link is a **pure Atom passthrough** — no state, no context (`BreadcrumbsLink.vue`); `href` falls through.
+- Page: `aria-current='page'`. Divider: `aria-hidden`, registers for width measurement.
+- **Bulma mapping**: `.breadcrumb > ul > li.is-active > a` — pass `as="ul"` to List. Bulma draws separators with CSS (`li + li::before`), so **do not render `.Divider`** parts; they're optional. `is-active` goes on the last `li` — Bulma's "active" is just "current page", use your own class on the final Item + `Breadcrumbs.Page`-style `aria-current` (or render Link without href).
+- The overflow/ellipsis auto-collapse machinery engages only if you render `.Ellipsis`; simple static breadcrumbs work without it.
+
+## 11. Selection (components/Selection/) — for BuPanel (single/multi `.panel-block.is-active`)
+
+Parts: `Selection.Root`, `Selection.Item` — **both are pure providers: no Atom, no `as`/`renderless`, they render `<slot>` only.** You always supply the elements.
+
+- Root props: `namespace='v0:selection'`, `disabled=false`, `enroll=false`, `mandatory=false` (`true` | `'force'`), `multiple=false`. Generic `T`; `defineModel<T | T[]>()` plain `v-model` via `useProxyModel`. Root slot: `{ isDisabled, multiple, select, unselect, toggle, attrs: { 'aria-multiselectable' } }`.
+- Item props: `id`, `label`, `value`, `disabled`. Slot: `{ id, label, value, isSelected, isDisabled, select, unselect, toggle, attrs }` — attrs: `aria-selected`, `aria-disabled`, `data-selected`, `data-disabled`, `onClick` (guarded toggle). Registers on setup, unregisters `onBeforeUnmount`.
+- BuPanel: `<a class="panel-block" :class="{'is-active': isSelected}" v-bind="attrs">` — safe to spread attrs here because Item has no wrapper element (no double-fire).
+
+## 12. Group (components/Group/) — multi-selection with tri-state
+
+Same pure-provider shape as Selection (no Atom on Root or Item). Built on `createGroup` (always multiple).
+
+- Root props: `namespace='v0:group'`, `disabled`, `enroll`, `mandatory`. `defineModel<T | T[]>()`, proxied `multiple: true`. Root slot adds batch state/ops: `{ isNoneSelected, isAllSelected, isMixed, selectAll, unselectAll, toggleAll, ... }`.
+- Item props add `indeterminate`. Item slot adds `{ isMixed, mix, unmix }`; attrs: `role='checkbox'`, `aria-checked: boolean | 'mixed'`, `data-mixed`.
+
+## 13. Form (components/Form/Form.vue) — for BuField/BuControl wiring
+
+Single-file component, `as='form'`. Props: `namespace='v0:form'`, `disabled=false`, `readonly=false`, `novalidate=true`.
+
+- **v-model is `boolean | null` aggregate validity and is written BY the form** (`watchEffect` pushes `form.isValid` into the model) — treat it as read-only output, not a control channel.
+- Emits: `submit` (`{ valid }`), `reset`, `update:model-value`. Slot: `{ isValid, isValidating, isDisabled, isReadonly, submit, reset, attrs: { novalidate, onSubmit, onReset } }`. `onSubmit` prevents default, validates all fields.
+- Provides `createForm` context at `namespace` via raw `provideContext` — child `Input.Root`s auto-register through `createValidation`'s `useForm()` injection (`composables/createForm/index.ts:239` — returns `undefined` outside injection, never throws).
+- **Absent: there are NO `Form.Field` / `Form.Control` / `Form.Label` / `Form.Help` parts.** BuField (`.field`), BuControl (`.control`, `has-addons`, `is-grouped`), BuLabel (`.label`), BuHelp (`.help.is-danger`) are hand-rolled markup. Wire BuHelp/BuLabel to the sibling `Input.Root` context (`useInputRoot(namespace)` is exported from the barrel) or to `Input.Root` slot props (`errors`, `isValid`, `id`).
+
+## 14. Input (components/Input/) — for BuInput/BuTextarea
+
+Parts: `Input.Root` (`div`), `.Control` (**`input` — a real native input**), `.Description` (`span`), `.Error` (`span`).
+
+- Root props (defaults): `id` (auto), `label`, `name`, `type='text'`, `form`, `disabled=false`, `readonly=false`, `required`, `rules=[]` (functions | rule aliases | Standard Schema), `validateOn='blur'` (`'blur'|'input'|'submit'` ± `lazy`/`eager` modifier), `error=false`, `errorMessages`, `namespace='v0:input:root'`.
+- **Models**: `defineModel<string>({ default: '' })` plain `v-model` = value; **second named model `v-model:focused`** (boolean).
+- Root slot: `{ id, label, value, isDirty, isFocused, errors, isValid: boolean|null, isPristine, isValidating, isDisabled, isReadonly, validate, reset, attrs }` — attrs: `data-state: 'pristine'|'valid'|'invalid'`, `data-dirty/focused/disabled/readonly`.
+- Control binds the full native bundle: `id, type, name, value, form, disabled, readonly, required, aria-invalid, aria-label, aria-describedby, aria-errormessage, data-state/focused/disabled/readonly, onInput, onFocus, onBlur`. BuInput: `<Input.Control class="input" :class="{'is-danger': isValid === false}">`. BuTextarea: `as="textarea"` (value binds as prop; onInput handles updates).
+- Error: `aria-live='polite'`, slot `{ errors, attrs: { id, 'data-state': 'visible'|'hidden' } }` → `.help.is-danger`. Description → plain help text; both register in Root registries so `aria-describedby`/`aria-errormessage` only appear when the part is mounted.
+- **Absent: no `Input.Label` part.** Render `<label class="label" :for="id">` yourself — `id` is in Root slot props and context.
+- Auto-registers with a parent `Form` (validation aggregate) with zero wiring.
+
+## 15. Checkbox (components/Checkbox/) — read before building BuCheckbox
+
+Parts: `Checkbox.Root` (**`button`, `role='checkbox'` — NOT a native input**), `.Indicator` (`span`), `.HiddenInput` (visually-hidden native `<input type=checkbox>`, `inert`, `tabindex=-1`), `.Group` (`div`), `.SelectAll` (`button`).
+
+- Root: dual-mode (standalone `defineModel<boolean>()` / registers with `Checkbox.Group` via try/catch injection at `groupNamespace='v0:checkbox:group'`). Props: `id`, `label`, `value`, `name`, `form`, `disabled`, `indeterminate`, `namespace='v0:checkbox:root'`, `ariaLabelledby/Describedby/Invalid`.
+- Root slot: `{ id, label, value, isChecked, isMixed, isDisabled, select, unselect, toggle, mix, unmix, attrs }` — attrs: `role='checkbox'`, `aria-checked: boolean|'mixed'`, `data-state: 'checked'|'unchecked'|'indeterminate'`, `onClick`, Space-key `onKeydown` (always bound; checkbox role has its own APG so no `as==='button'` gate here).
+- `name` prop → Root auto-renders `<CheckboxHiddenInput>` after the Atom (form submission; objects JSON-serialized).
+- Group: `createGroup` + `defineModel<T | T[]>()`; SelectAll drives `selectAll/unselectAll` with mixed state.
+- **Bulma fidelity conflict** (spec deviation 3): Bulma `.checkbox` styles `<label class="checkbox"><input type="checkbox">…</label>` — a *visible* native input. v0's Root renders a button-with-role and its HiddenInput is visually hidden by inline styles (not overridable via class). Per spec: verify during build; the likely shape is a hand-rolled native `<input type="checkbox" v-model>` inside `.checkbox` label for Tier 1, since v0 Checkbox cannot produce a visible native input.
+
+## 16. Radio (components/Radio/) — same caveat as Checkbox
+
+Parts: `Radio.Group` (`div`, `role='radiogroup'`), `Radio.Root` (`button`, `role='radio'`), `.Indicator` (`span`), `.HiddenInput`.
+
+- **Group is REQUIRED** — `RadioRoot` calls `useRadioGroup(groupNamespace)` without try/catch (`RadioRoot.vue:200`); a Root outside a Group throws. (Unlike Toggle/Checkbox dual-mode.)
+- Group props: `namespace='v0:radio:group'`, `disabled`, `mandatory` (`'force'` = auto-select first), `label`, `ariaLabelledby/Describedby/Required`, `name` (enables hidden inputs for whole group), `activation='automatic'|'manual'`. **`defineModel<T>()` single value** plain `v-model` (`useProxyModel` `multiple:false`).
+- Root props: `id`, `label`, `value`, `name` (falls back to group name), `form`, `disabled`, `namespace='v0:radio:root'`, `groupNamespace`. Slot: `{ id, label, value, isChecked, isDisabled, select, attrs }` — roving tabindex (first non-disabled tabbable when none selected), arrow-key group traversal with wrap, `data-state: 'checked'|'unchecked'`, `data-radio-id`.
+- `name` → auto `<RadioHiddenInput>` per Root.
+- Bulma `.radio` styles a label wrapping a visible native input — same deviation call as Checkbox.
+
+---
+
+## Composables (no component wrapper exists — you build the markup)
+
+### createNested (composables/createNested/) — for BuMenu
+
+**There is no `Menu` or `Nav` component in v0.** (`Treeview/` exists as the component precedent built on createNested — consult it for ARIA tree patterns, but BuMenu's `.menu-list` nesting is its own markup.)
+
+- Exports: `createNested(options)`, `createNestedContext(options)` (trinity `[useX, provideX, context]`), `useNested(namespace = 'v0:nested')`. Full API in `createNested/types.ts`.
+- Options (extends GroupOptions): `open: 'multiple'|'single'` (accordion), `openAll`, `reveal`, `selection: 'cascade'|'independent'|'leaf'`, `active: 'single'|'multiple'`.
+- `register({ id, parentId, value, children: [...] })` — inline children recursion. Ticket adds: `parentId`, `el`, `isOpen`, `isActive`, `isLeaf`, `depth`, `open/close/flip/reveal/activate/deactivate`, traversal (`getPath`, `getAncestors`, `getDescendants`, `siblings`, `position`).
+- Context adds: `openedIds/openedItems`, `activeIds/activeItems`, `open/close/flip/opened`, `unfold/expand/expandAll/collapseAll`, `roots`, `leaves`, `visibleItems()`, cascade-aware `select/unselect/toggle`.
+- BuMenu: `is-active` on the current `<a>` ↔ `activate()`/`isActive`; submenu `<ul>` visibility ↔ `isOpen`.
+
+### createInput (composables/createInput/index.ts) — field-state engine behind Input.Root
+
+`createInput<T = string>({ value: Ref<T>, id?, label?, name?, form?, required?, disabled?, readonly?, rules?, error?, errorMessages?, dirty?, equals? })` → `InputContext`:
+`id, label, name, form, required, descriptionId ('${id}-description'), errorId ('${id}-error'), descriptions/fieldErrors` (reactive registries), `hasDescription/hasError`, `value`, `isDirty, isFocused (writable ShallowRef), isDisabled, isReadonly, isPristine, isTouched (writable), errors, isValid: Readonly<Ref<boolean|null>>, isValidating, validate(), reset(), state: 'pristine'|'valid'|'invalid'`.
+- **No DOM events** — you bind `onInput/onBlur` yourself and write `isFocused`/call `validate()` (Input.Root shows the canonical validateOn parse: `InputRoot.vue` `parseValidateOn` + `shouldValidate`).
+- Use for BuSelect/BuFile (native controls that still want v0 validation + Form registration — createInput's `createValidation` auto-registers with a parent form).
+
+### createForm (composables/createForm/index.ts) — behind Form
+
+`createForm({ disabled?, readonly? })` → registry of `ValidationContext`s + `submit(id?): Promise<boolean>`, `reset()`, `isValid: ComputedRef<boolean|null>`, `isValidating`. `createFormContext({ namespace = 'v0:form' })` returns the trinity. `useForm(namespace?)` returns `undefined` (not throw) outside provision — fields work standalone.
+
+---
+
+## House style (enforced — sources: `.claude/rules/components.md`, `implementation.md`, user rules, genesis precedent)
+
+**SFC structure**
+- Dual-script SFC: `<script lang="ts">` first (ALL imports, exported `FooProps`/`FooSlotProps` interfaces, `createContext` tuples), then `<script setup lang="ts">` (zero imports). Generic components: `<script lang="ts" setup generic="T">` — `lang` before `setup` only when `generic` is present; plain setup scripts are `<script setup lang="ts">`.
+- `defineOptions({ name: 'BuThing' })` always. `inheritAttrs: false` + `useAttrs()` + `mergeProps(attrs, slotProps.attrs)` for any part that binds its own attr bundle.
+- Import groups with comments, in order: `// Components`, `// Composables`, `// Utilities` (Vue lives here), `// Types` — `pnpm lint:fix` sorts; don't hand-order.
+- `defineSlots<{ default: (props: FooSlotProps) => any }>()` on every part with slot props (Volar inference).
+
+**Props**
+- Destructure with defaults — **never `withDefaults`**, never defaults in the interface: `const { color = 'primary' } = defineProps<Props>()`.
+- `_`-prefix marks the raw prop when a resolved value supersedes it: `const { name: _name } = defineProps…; const name = toRef(() => _name ?? group.name)`.
+- v-model via `defineModel`; **also declare `defineEmits<{ 'update:model-value': [...] }>()`** (kebab-case) — redundant but required for devtools.
+
+**Reactivity**
+- `shallowRef` for primitives, `ref` for objects/arrays, **`toRef(() => ...)` as the default derivation**, `computed` only for expensive work. `useTemplateRef` for template refs.
+- Slot props always one `toRef((): FooSlotProps => ({ ... }))` named `slotProps`; template is `<slot v-bind="slotProps" />`.
+
+**Naming**
+- `index` not `idx`; `on<Action>` (`onClick`, `onToggle`) never `handle<Action>`; single-word names where unambiguous; boolean slot state is `is<State>`.
+- No comma-separated declarations.
+
+**Attributes / state classes**
+- v0 boolean data attrs are `true | undefined` (undefined removes the attr); `aria-disabled` stays a concrete boolean. In @paper/bulma, upstream **classes** (`is-active`, `is-current`) replace data-attrs per spec deviation 2 — drive them from slot-prop state; still let v0's aria/data attrs land (harmless, a11y-tested).
+- Prop→class conveniences (`color="primary"` → `is-primary`) must merge with user `class` — Vue class merging handles this if the class lands on the single root; multi-root parts need explicit handling.
+
+**Styling**
+- **Never `<style scoped>`** — scoped `data-v` attrs don't reach multi-root compound children (see the explanatory comment in `packages/genesis/src/components/GnActionButton/GnActionButton.vue`; memory `scoped-css-multiroot-child`). Tier 1 Bulma compat components should need no `<style>` block at all; Tier 2 custom CSS is unscoped and consumes only `--bulma-*` vars.
+- No type-guard raw comparisons: `isNull/isUndefined/isNullOrUndefined/isString/...` from `@vuetify/v0` (`#v0/utilities` re-exports through the main barrel).
+
+**Package/barrel (genesis precedent, `packages/genesis/src/components/*/index.ts`)**
+- Per-component dir `BuThing/BuThing.vue` + `index.ts`: `export type { BuThingProps } from './BuThing.vue'` + `export { default as BuThing } from './BuThing.vue'`. Never `export *` from a `.vue`. Compound Bu components follow the v0 compound barrel (`components/Dialog/index.ts`): named default re-exports, one `export type` block, then a plain object literal compound with JSDoc per member — never `Object.assign`.
+- Package deps: `@vuetify/v0` as `workspace:^` dependency, `vue >=3.5.0` peer (see `packages/genesis/package.json`); `bulma@^1.0` is a peer, never a dependency.
+
+---
+
+## Absences summary — what you hand-roll (nothing here exists in v0)
+
+1. **`Input.Label`** — no label part anywhere; `<label :for="id">` is yours.
+2. **`Form.Field` / `.Control` / `.Label` / `.Help`** — BuField/BuControl/BuLabel/BuHelp are pure markup wired to Input.Root context/slot props.
+3. **Menu/Nav component** — BuMenu is markup over `createNested`; only Treeview exists as a nested-component precedent.
+4. **Upload/File primitive** — no v0 File/Upload anything; BuFile is native `<input type=file>` + `createInput` for validation.
+5. **Visible native `<input type=checkbox/radio>`** — v0 Checkbox/Radio render role-carrying buttons + *hidden* native inputs; Bulma's `.checkbox`/`.radio` label-wrapped visible-native styling can't be produced from them (spec deviation 3 — verify per component).
+6. **Native `<select>`** — v0 `Select` is a custom listbox (activator + popover), not a native select; BuSelect wraps native `<select>` directly (spec deviation 3).
+7. **In-flow dropdown positioning** — PopoverContent hardwires the native `popover` attr (top layer); Bulma's in-flow `.dropdown` likely wants Toggle + `useClickOutside` instead.
+8. **Class-driven visibility** — CollapsibleContent/TabsPanel use the `hidden` attr; wherever Bulma controls display via `is-active` classes, go renderless and bind the class yourself.
+9. **Per-overlay in-DOM scrim** — Scrim is a global stack-driven teleported layer; an inside-`.modal` `.modal-background` needs `teleport=false` or a hand-rolled div.
+10. **Esc-to-close for non-native-dialog modals** — DialogContent's Esc comes free only from native `<dialog>` `cancel`; with `as="div"` you own the key handling (stack `onDismiss` covers scrim clicks only).
diff --git a/packages/bulma/harness/a11y.browser.test.ts b/packages/bulma/harness/a11y.browser.test.ts
new file mode 100644
index 0000000000..d8826d8f57
--- /dev/null
+++ b/packages/bulma/harness/a11y.browser.test.ts
@@ -0,0 +1,384 @@
+import { afterAll, describe, expect, it } from 'vitest'
+
+// Framework
+import { createStackPlugin, InputRoot } from '@vuetify/v0'
+
+// Components
+import { BuBreadcrumb } from '#bulma/components/BuBreadcrumb'
+import { BuCheckbox } from '#bulma/components/BuCheckbox'
+import { BuControl } from '#bulma/components/BuControl'
+import { BuDropdown } from '#bulma/components/BuDropdown'
+import { BuField } from '#bulma/components/BuField'
+import { BuFile } from '#bulma/components/BuFile'
+import { BuHelp } from '#bulma/components/BuHelp'
+import { BuInput } from '#bulma/components/BuInput'
+import { BuLabel } from '#bulma/components/BuLabel'
+import { BuMenu } from '#bulma/components/BuMenu'
+import { BuMessage } from '#bulma/components/BuMessage'
+import { BuModal } from '#bulma/components/BuModal'
+import { BuNavbar } from '#bulma/components/BuNavbar'
+import { BuNotification } from '#bulma/components/BuNotification'
+import { BuPagination } from '#bulma/components/BuPagination'
+import { BuPanel } from '#bulma/components/BuPanel'
+import { BuRadio } from '#bulma/components/BuRadio'
+import { BuSelect } from '#bulma/components/BuSelect'
+import { BuTab } from '#bulma/components/BuTab'
+import { BuTabPanel } from '#bulma/components/BuTabPanel'
+import { BuTabs } from '#bulma/components/BuTabs'
+import { BuTextarea } from '#bulma/components/BuTextarea'
+// The audit helper is test-infrastructure shared with packages/0's canonical
+// sweep — not part of the @vuetify/v0 public surface, so the barrel cannot
+// serve it. The `#v0` alias exists in this package's tsconfig/vitest config
+// for exactly this tooling parity; package *source* still never uses it.
+import { audit, REPORT_END, REPORT_START, summarize } from '#v0/components/fixtures/audit'
+
+// Utilities
+import { createApp, h, nextTick } from 'vue'
+
+// Types
+import type { BuDropdownSlotProps, BuDropdownTriggerSlotProps } from '#bulma/components/BuDropdown'
+import type { BuMenuSection } from '#bulma/components/BuMenu'
+import type { BuPanelItem } from '#bulma/components/BuPanel'
+import type { AxeViolation } from '#v0/components/fixtures/audit'
+import type { Plugin } from 'vue'
+
+/**
+ * Accessibility sweep for @paper/bulma, mirroring the canonical sweep at
+ * packages/0/src/components/a11y.browser.test.ts.
+ *
+ * Every Bu component is mounted in the representative shape its own browser
+ * test documents — interactive components in their OPEN state (modal open,
+ * dropdown open with menu items, navbar burger expanded, tabs with panels) —
+ * then handed to axe-core in real Chromium.
+ *
+ * Unlike the advisory v0 sweep, this one GATES: a compat package whose entire
+ * product is upstream markup fidelity must know, per component, whether that
+ * fidelity ships an axe violation. Deliberate fidelity deltas documented in
+ * SPEC.md ("Known limitations" / "Declared deviations") are absorbed via the
+ * EXCEPTIONS allowlist below — each entry cites the SPEC.md passage that owns
+ * it. Anything not on that list fails the component's test and belongs to the
+ * fix agent, not to a new allowlist entry.
+ *
+ * Implementation-flagged risks, as audited:
+ * - BuPagination `role="button"` + `tabindex` on anchors inside nav — axe
+ *   clean (role=button on href-less anchors is valid ARIA).
+ * - BuNavbar burger carrying both `aria-pressed` and `aria-expanded` — axe
+ *   clean (both are allowed on role=button; whether pressed belongs on a
+ *   disclosure trigger is an APG question, not an axe rule).
+ * - `label[disabled]` on BuCheckbox/BuRadio (SPEC.md "Known limitations") —
+ *   axe does not inspect non-ARIA attribute validity; never flagged, so no
+ *   EXCEPTIONS entry is needed.
+ * - `aria-selected` on BuPanel/BuMenu anchors without a selectable role —
+ *   was `aria-allowed-attr` (critical); FIXED: selection anchors bind
+ *   hand-picked state (`is-active` + `data-selected` + `@click`), never the
+ *   raw Item attrs spread (see CANON).
+ * - BuTabs `<li>` interposed between `role="tablist"` and `role="tab"` —
+ *   was `aria-required-children` / `aria-required-parent` / `listitem`;
+ *   FIXED: the `<li>` carries `role="presentation"` so the tablist directly
+ *   owns the tab anchors.
+ */
+
+interface Subject {
+  plugins?: Plugin[]
+  node: () => unknown
+}
+
+interface Exception {
+  rule: string
+  /** SPEC.md citation — an exception without one is a suppression, not a policy. */
+  reason: string
+}
+
+function icon (side: string, glyph: string) {
+  return h('span', { class: `icon is-small is-${side}` }, h('i', { 'class': `fas fa-${glyph}`, 'aria-hidden': 'true' }))
+}
+
+function trigger (props: BuDropdownTriggerSlotProps) {
+  return h('button', { class: 'button', ...props.attrs }, [
+    h('span', 'Dropdown button'),
+    h('span', { class: 'icon is-small' }, [
+      h('i', { 'class': 'fas fa-angle-down', 'aria-hidden': 'true' }),
+    ]),
+  ])
+}
+
+function items (props: BuDropdownSlotProps) {
+  return [
+    h('a', { class: 'dropdown-item', href: '#', ...props.item }, ' Dropdown item '),
+    h('a', { class: 'dropdown-item is-active', href: '#', ...props.item }, ' Active dropdown item '),
+    h('hr', { class: 'dropdown-divider' }),
+    h('a', { class: 'dropdown-item', href: '#', ...props.item }, ' With a divider '),
+  ]
+}
+
+const crumbs = [
+  { text: 'Bulma', href: '#' },
+  { text: 'Documentation', href: '#' },
+  { text: 'Components', href: '#' },
+  { text: 'Breadcrumb', href: '#' },
+]
+
+const sections: BuMenuSection<string>[] = [
+  { label: 'General', items: [{ label: 'Dashboard' }, { label: 'Customers' }] },
+  {
+    label: 'Administration',
+    items: [
+      { label: 'Team Settings' },
+      { label: 'Manage Your Team', children: [{ label: 'Members' }, { label: 'Plugins' }] },
+      { label: 'Invitations' },
+    ],
+  },
+]
+
+const repos: BuPanelItem<string>[] = [
+  { label: 'bulma', icon: 'fas fa-book' },
+  { label: 'marksheet', icon: 'fas fa-book' },
+  { label: 'mojs', icon: 'fas fa-code-branch' },
+]
+
+function navbarMenu () {
+  return [
+    h('div', { class: 'navbar-start' }, [
+      h('a', { class: 'navbar-item' }, 'Home'),
+      h('a', { class: 'navbar-item' }, 'Documentation'),
+      h('div', { class: 'navbar-item has-dropdown is-hoverable' }, [
+        h('a', { class: 'navbar-link' }, 'More'),
+        h('div', { class: 'navbar-dropdown' }, [
+          h('a', { class: 'navbar-item' }, 'About'),
+          h('a', { class: 'navbar-item is-selected' }, 'Jobs'),
+          h('hr', { class: 'navbar-divider' }),
+          h('a', { class: 'navbar-item' }, 'Report an issue'),
+        ]),
+      ]),
+    ]),
+    h('div', { class: 'navbar-end' }, [
+      h('div', { class: 'navbar-item' }, [
+        h('div', { class: 'buttons' }, [
+          h('a', { class: 'button is-primary' }, [h('strong', 'Sign up')]),
+          h('a', { class: 'button is-light' }, 'Log in'),
+        ]),
+      ]),
+    ]),
+  ]
+}
+
+// One subject per Bu component, mounted per its own browser test's
+// representative shape. BuTab and BuTabPanel are exercised inside BuTabs —
+// they are the compound's members, not separately mountable widgets.
+const SWEEP: Record<string, Subject> = {
+  BuBreadcrumb: {
+    node: () => h(BuBreadcrumb, { items: crumbs }),
+  },
+  BuCheckbox: {
+    node: () => [
+      h(BuCheckbox, () => ' Remember me '),
+      // SPEC.md "Known limitations": label[disabled] is deliberate fidelity.
+      h(BuCheckbox, { disabled: true }, () => ' Save my preferences '),
+    ],
+  },
+  BuControl: {
+    node: () => h(BuField, null, () => h(BuControl, { icons: 'both' }, () => [
+      h(BuInput, { type: 'email', placeholder: 'Email' }),
+      icon('left', 'envelope'),
+      icon('right', 'check'),
+    ])),
+  },
+  BuDropdown: {
+    node: () => h(BuDropdown, { modelValue: true, menu: true }, { trigger, default: items }),
+  },
+  BuField: {
+    node: () => h(BuField, null, () => [
+      h(BuLabel, null, () => 'Label'),
+      h(BuControl, null, () => h(BuInput, { placeholder: 'Text input' })),
+      h(BuHelp, null, () => 'This is a help text'),
+    ]),
+  },
+  BuFile: {
+    node: () => h(BuFile, { filename: true, name: 'resume' }),
+  },
+  BuHelp: {
+    node: () => h(BuField, null, () => [
+      h(BuLabel, null, () => 'Email'),
+      h(BuControl, { icons: 'both' }, () => [
+        h(BuInput, { color: 'danger', type: 'email', placeholder: 'Email input' }),
+        icon('left', 'envelope'),
+        icon('right', 'exclamation-triangle'),
+      ]),
+      h(BuHelp, { color: 'danger' }, () => 'This email is invalid'),
+    ]),
+  },
+  BuInput: {
+    node: () => h(BuControl, null, () => h(BuInput, { placeholder: 'Text input' })),
+  },
+  BuLabel: {
+    // Real wiring usage: `for` resolves from an ambient Input.Root context.
+    node: () => h(InputRoot, { renderless: true, id: 'a11y-email' }, () => [
+      h(BuLabel, null, () => 'Email'),
+      h(BuControl, null, () => h(BuInput)),
+    ]),
+  },
+  BuMenu: {
+    node: () => h(BuMenu as any, { items: sections, modelValue: 'Manage Your Team' }),
+  },
+  BuMessage: {
+    node: () => h(BuMessage, {}, {
+      header: () => h('p', 'Hello World'),
+      default: () => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    }),
+  },
+  BuModal: {
+    plugins: [createStackPlugin()],
+    node: () => h(BuModal, { card: true, modelValue: true }, {
+      header: () => 'Modal title',
+      default: () => 'Modal body content',
+      footer: () => h('div', { class: 'buttons' }, [
+        h('button', { class: 'button is-success' }, 'Save changes'),
+        h('button', { class: 'button' }, 'Cancel'),
+      ]),
+    }),
+  },
+  BuNavbar: {
+    // Open state: burger expanded, menu shown.
+    node: () => h(BuNavbar, { id: 'navbarBasicExample', modelValue: true }, {
+      brand: () => h('a', { class: 'navbar-item', href: 'https://bulma.io' }, [
+        h('img', { src: 'logo.png', alt: 'Logo' }),
+      ]),
+      default: () => navbarMenu(),
+    }),
+  },
+  BuNotification: {
+    node: () => h(BuNotification, {}, () => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
+  },
+  BuPagination: {
+    node: () => h(BuPagination, { pages: 86, modelValue: 46, visible: 7 }),
+  },
+  BuPanel: {
+    node: () => h(BuPanel as any, {
+      heading: 'Repositories',
+      tabs: ['All', 'Public', 'Private'],
+      items: repos,
+      modelValue: 'bulma',
+    }, {
+      start: () => h('div', { class: 'panel-block' }, [
+        h('p', { class: 'control has-icons-left' }, [
+          h('input', { 'class': 'input', 'type': 'text', 'placeholder': 'Search', 'aria-label': 'Search' }),
+          h('span', { class: 'icon is-left' }, [
+            h('i', { 'class': 'fas fa-search', 'aria-hidden': 'true' }),
+          ]),
+        ]),
+      ]),
+      default: () => [
+        h('label', { class: 'panel-block' }, [h('input', { type: 'checkbox' }), ' remember me ']),
+        h('div', { class: 'panel-block' }, [
+          h('button', { class: 'button is-link is-outlined is-fullwidth' }, ' Reset all filters '),
+        ]),
+      ],
+    }),
+  },
+  BuRadio: {
+    node: () => h('div', { class: 'control' }, [
+      h(BuRadio, { name: 'answer', value: 'yes' }, () => ' Yes '),
+      h(BuRadio, { name: 'answer', value: 'no' }, () => ' No '),
+      // SPEC.md "Known limitations": label[disabled] is deliberate fidelity.
+      h(BuRadio, { disabled: true, name: 'answer', value: 'maybe' }, () => ' Maybe '),
+    ]),
+  },
+  BuSelect: {
+    // Named via userland `<label for>` against the `id` prop — the only path
+    // to an accessible name: fallthrough attrs (incl. `aria-label`) land on
+    // the `.select` wrapper div, never the native select (recorded finding).
+    node: () => h(BuField, null, () => [
+      h('label', { class: 'label', for: 'a11y-country' }, 'Country'),
+      h(BuControl, null, () => h(BuSelect, { id: 'a11y-country' }, () => [
+        h('option', 'Select dropdown'),
+        h('option', 'With options'),
+      ])),
+    ]),
+  },
+  BuTabs: {
+    node: () => h(BuTabs as any, null, {
+      default: () => [
+        h(BuTab as any, { value: 'pictures' }, () => 'Pictures'),
+        h(BuTab as any, { value: 'music' }, () => 'Music'),
+      ],
+      panels: () => [
+        h(BuTabPanel as any, { value: 'pictures' }, () => 'Pictures panel'),
+        h(BuTabPanel as any, { value: 'music' }, () => 'Music panel'),
+      ],
+    }),
+  },
+  BuTextarea: {
+    node: () => h(BuControl, null, () => h(BuTextarea, { placeholder: 'e.g. Hello world' })),
+  },
+}
+
+/**
+ * Violations absorbed as documented, deliberate markup — every entry must cite
+ * SPEC.md. An empty list means the package currently ships zero axe-visible
+ * deviations; keep it that way unless SPEC.md grows a new documented one.
+ */
+const EXCEPTIONS: Record<string, Exception[]> = {}
+
+/** Let Vue flush, then let the browser paint, so axe sees settled layout. */
+function settle () {
+  return nextTick().then(() => new Promise(resolve => requestAnimationFrame(resolve)))
+}
+
+const collected: AxeViolation[] = []
+
+afterAll(() => {
+  console.log(`\n${REPORT_START}\n${summarize(collected)}\n${REPORT_END}\n`)
+})
+
+/**
+ * Mount one subject into a `<main>` landmark (a bare div off `<body>` is not a
+ * page — see the canonical sweep's docblock), audit the whole body so any
+ * teleported content is covered, and return what axe found plus how many
+ * elements rendered — a subject that renders nothing passes every rule silently.
+ */
+async function sweep (subject: string, entry: Subject) {
+  const container = document.createElement('main')
+  document.body.append(container)
+
+  const before = document.body.querySelectorAll('*').length
+
+  const app = createApp({ render: entry.node })
+  for (const plugin of entry.plugins ?? []) app.use(plugin)
+
+  try {
+    app.mount(container)
+
+    await settle()
+
+    const rendered = document.body.querySelectorAll('*').length - before
+    const violations = await audit(subject, document.body)
+
+    return { rendered, violations }
+  } finally {
+    // Unconditional: a leaked `<main>` corrupts every later audit with
+    // landmark-unique / landmark-no-duplicate-main noise.
+    app.unmount()
+    container.remove()
+  }
+}
+
+describe('accessibility sweep', () => {
+  for (const [name, entry] of Object.entries(SWEEP)) {
+    it(`should pass axe for ${name}`, async () => {
+      const { rendered, violations } = await sweep(name, entry)
+
+      expect(rendered).toBeGreaterThan(0)
+
+      collected.push(...violations)
+
+      const excepted = EXCEPTIONS[name] ?? []
+      const outstanding = violations.filter(violation =>
+        !excepted.some(exception => exception.rule === violation.rule),
+      )
+
+      expect(
+        outstanding.map(violation => `${violation.rule} (${violation.impact}): ${violation.nodes.join(' | ')}`),
+      ).toEqual([])
+    })
+  }
+})
diff --git a/packages/bulma/harness/conform.browser.test.ts b/packages/bulma/harness/conform.browser.test.ts
new file mode 100644
index 0000000000..757846ef01
--- /dev/null
+++ b/packages/bulma/harness/conform.browser.test.ts
@@ -0,0 +1,73 @@
+// Exemplar harness test: proves conform() against the breadcrumb fixture by
+// mounting an inline Vue component that reproduces the documented Bulma
+// markup verbatim. Component tests follow this same shape.
+import { describe, expect, it } from 'vitest'
+
+import { conform, loadFixture } from './conform'
+
+// Utilities
+import { createApp, defineComponent, h } from 'vue'
+
+function crumb (label: string, active = false) {
+  return h(
+    'li',
+    active ? { class: 'is-active' } : {},
+    [h('a', active ? { 'href': '#', 'aria-current': 'page' } : { href: '#' }, label)],
+  )
+}
+
+const Breadcrumb = defineComponent({
+  render () {
+    return h('nav', { 'class': 'breadcrumb', 'aria-label': 'breadcrumbs' }, [
+      h('ul', [
+        crumb('Bulma'),
+        crumb('Documentation'),
+        crumb('Components'),
+        crumb('Breadcrumb', true),
+      ]),
+    ])
+  },
+})
+
+function mount (component: Parameters<typeof createApp>[0]) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(component)
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+describe('conform', () => {
+  it('passes for markup matching the breadcrumb fixture', () => {
+    const { el, unmount } = mount(Breadcrumb)
+    conform(el, 'breadcrumb')
+    unmount()
+  })
+
+  it('selects fixture blocks by index and label', () => {
+    expect(loadFixture('breadcrumb:2').classList.contains('has-arrow-separator')).toBe(true)
+    expect(loadFixture('breadcrumb:icons').querySelector('.icon')).not.toBeNull()
+  })
+
+  it('fails on a missing fixture class', () => {
+    const { el, unmount } = mount(Breadcrumb)
+    el.querySelector('li.is-active')!.classList.remove('is-active')
+    expect(() => conform(el, 'breadcrumb')).toThrowError(/missing class "is-active"/)
+    unmount()
+  })
+
+  it('tolerates extra aria attributes but rejects extra classes', () => {
+    const { el, unmount } = mount(Breadcrumb)
+    el.setAttribute('aria-busy', 'false')
+    conform(el, 'breadcrumb')
+    el.classList.add('is-large')
+    expect(() => conform(el, 'breadcrumb')).toThrowError(/unexpected class "is-large"/)
+    conform(el, 'breadcrumb', { allowExtraClasses: true })
+    unmount()
+  })
+})
diff --git a/packages/bulma/harness/conform.ts b/packages/bulma/harness/conform.ts
new file mode 100644
index 0000000000..b725b30306
--- /dev/null
+++ b/packages/bulma/harness/conform.ts
@@ -0,0 +1,182 @@
+declare global {
+  interface ImportMeta {
+    glob: (pattern: string, options: { query: string, import: string, eager: true }) => Record<string, unknown>
+  }
+}
+
+/**
+ * Conformance diff helper for @paper/bulma component tests.
+ *
+ * Fixtures are verbatim Bulma 1.0.4 docs markup captured in
+ * `harness/fixtures/*.html`. Each file holds one or more fixture blocks,
+ * each introduced by a `<!-- fixture: <label> -->` comment.
+ *
+ * Fixture strings are inlined at build time via `import.meta.glob(?raw)`,
+ * so no fs access is needed under vitest browser mode. Parsing uses
+ * DOMParser only — zero dependencies.
+ *
+ * Fixture addressing: `name` is the file basename, optionally followed by
+ * `:<index>` or `:<label substring>` to pick a block — `'breadcrumb'`
+ * (first block), `'breadcrumb:2'`, `'breadcrumb:icons'`.
+ */
+
+export interface ConformOptions {
+  /** Attribute names skipped entirely on both sides. */
+  ignoreAttrs?: string[]
+  /**
+   * Allow ANY attribute on the rendered element that the fixture lacks.
+   * Default false — per the CANON diff-tolerance policy only additions of
+   * `aria-*`, `data-*`, `role`, `tabindex`, and `id` are tolerated; every
+   * other unexpected attribute fails conformance. Set true only with an
+   * explanatory comment.
+   */
+  allowExtraAttrs?: boolean
+  /** Allow classes the fixture lacks. Default false — fixture classes are the contract. */
+  allowExtraClasses?: boolean
+  /** Skip text content comparison. Default false. */
+  ignoreText?: boolean
+}
+
+interface Block {
+  label: string
+  el: Element
+}
+
+const files = import.meta.glob('./fixtures/*.html', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+function source (file: string): string {
+  const raw = files[`./fixtures/${file}.html`]
+  if (!raw) {
+    const known = Object.keys(files).map(key => key.replace('./fixtures/', '').replace('.html', ''))
+    throw new Error(`conform: unknown fixture file "${file}" (known: ${known.join(', ')})`)
+  }
+  return raw
+}
+
+function parse (file: string): Block[] {
+  const doc = new DOMParser().parseFromString(source(file), 'text/html')
+  const list: Block[] = []
+  let label = ''
+  // Leading comments (the file header chain and often the first fixture label)
+  // are hoisted by the HTML parser to the document and <head> — walk them
+  // before the body so block 0's label is reachable.
+  const nodes = [
+    ...Array.from(doc.childNodes).filter(node => node.nodeType === Node.COMMENT_NODE),
+    ...Array.from(doc.head.childNodes),
+    ...Array.from(doc.body.childNodes),
+  ]
+  for (const node of nodes) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const match = /fixture:\s*(.*)/.exec(node.textContent ?? '')
+      if (match) label = match[1].trim()
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      list.push({ label, el: node as Element })
+    }
+  }
+  return list
+}
+
+/** Load a fixture block as a detached Element. See file header for `name` syntax. */
+export function loadFixture (name: string): Element {
+  const colon = name.indexOf(':')
+  const file = colon === -1 ? name : name.slice(0, colon)
+  const pick = colon === -1 ? '0' : name.slice(colon + 1)
+  const all = parse(file)
+  if (all.length === 0) throw new Error(`conform: no fixture blocks found in ${file}.html`)
+  if (/^\d+$/.test(pick)) {
+    const block = all[Number(pick)]
+    if (!block) throw new Error(`conform: fixture index ${pick} out of range in ${file}.html (${all.length} blocks)`)
+    return block.el
+  }
+  const matches = all.filter(entry => entry.label.includes(pick))
+  if (matches.length === 0) {
+    throw new Error(`conform: no fixture labeled "${pick}" in ${file}.html (labels: ${all.map(entry => entry.label).join(' | ')})`)
+  }
+  // A substring matching blocks under DIFFERENT labels is ambiguous — a
+  // shifted or renamed label must fail loudly, never silently repoint.
+  const labels = new Set(matches.map(entry => entry.label))
+  if (labels.size > 1) {
+    throw new Error(`conform: label "${pick}" is ambiguous in ${file}.html (matches: ${[...labels].join(' | ')})`)
+  }
+  return matches[0].el
+}
+
+function text (el: Element): string {
+  let out = ''
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) out += node.textContent ?? ''
+  }
+  return out.replaceAll(/\s+/g, ' ').trim()
+}
+
+function skip (name: string, options: Required<ConformOptions>): boolean {
+  return name === 'class' || name.startsWith('data-v-') || options.ignoreAttrs.includes(name)
+}
+
+/** Charter-tolerated additive attributes (CANON diff-tolerance policy #2). */
+function tolerated (name: string): boolean {
+  return name.startsWith('aria-') || name.startsWith('data-') || name === 'role' || name === 'tabindex' || name === 'id'
+}
+
+function fail (path: string, reason: string, actual: Element, expected: Element): never {
+  throw new Error(`conform: ${path}: ${reason}\n  expected: ${expected.outerHTML}\n  actual:   ${actual.outerHTML}`)
+}
+
+function compare (actual: Element, expected: Element, options: Required<ConformOptions>, path: string): void {
+  if (actual.tagName !== expected.tagName) {
+    fail(path, `expected <${expected.tagName.toLowerCase()}>, got <${actual.tagName.toLowerCase()}>`, actual, expected)
+  }
+  for (const cls of Array.from(expected.classList)) {
+    if (!actual.classList.contains(cls)) fail(path, `missing class "${cls}"`, actual, expected)
+  }
+  if (!options.allowExtraClasses) {
+    for (const cls of Array.from(actual.classList)) {
+      if (!expected.classList.contains(cls)) fail(path, `unexpected class "${cls}"`, actual, expected)
+    }
+  }
+  for (const attr of Array.from(expected.attributes)) {
+    if (skip(attr.name, options)) continue
+    const value = actual.getAttribute(attr.name)
+    if (value === null) fail(path, `missing attribute ${attr.name}="${attr.value}"`, actual, expected)
+    if (value !== attr.value) fail(path, `attribute ${attr.name}: expected "${attr.value}", got "${value}"`, actual, expected)
+  }
+  if (!options.allowExtraAttrs) {
+    for (const attr of Array.from(actual.attributes)) {
+      // CANON diff-tolerance policy #2: additive aria-*, data-*, role,
+      // tabindex, and id are deliberate v0 improvements — never failures.
+      if (skip(attr.name, options) || tolerated(attr.name)) continue
+      if (!expected.hasAttribute(attr.name)) fail(path, `unexpected attribute ${attr.name}="${attr.value}"`, actual, expected)
+    }
+  }
+  if (!options.ignoreText && text(actual) !== text(expected)) {
+    fail(path, `text: expected "${text(expected)}", got "${text(actual)}"`, actual, expected)
+  }
+  const wanted = Array.from(expected.children)
+  const rendered = Array.from(actual.children)
+  if (rendered.length !== wanted.length) {
+    fail(path, `expected ${wanted.length} children, got ${rendered.length}`, actual, expected)
+  }
+  for (const [index, child] of wanted.entries()) {
+    compare(rendered[index], child, options, `${path} > ${child.tagName.toLowerCase()}[${index}]`)
+  }
+}
+
+/**
+ * Assert `el` conforms to the fixture: same tag hierarchy, every fixture
+ * class present per node, matching attributes and (normalized) text.
+ * Throws with a node path and expected/actual markup on the first mismatch.
+ */
+export function conform (el: Element, name: string, options: ConformOptions = {}): void {
+  const resolved: Required<ConformOptions> = {
+    ignoreAttrs: options.ignoreAttrs ?? [],
+    allowExtraAttrs: options.allowExtraAttrs ?? false,
+    allowExtraClasses: options.allowExtraClasses ?? false,
+    ignoreText: options.ignoreText ?? false,
+  }
+  const expected = loadFixture(name)
+  compare(el, expected, resolved, expected.tagName.toLowerCase())
+}
diff --git a/packages/bulma/harness/fixtures/breadcrumb.html b/packages/bulma/harness/fixtures/breadcrumb.html
new file mode 100644
index 0000000000..4b784579a9
--- /dev/null
+++ b/packages/bulma/harness/fixtures/breadcrumb.html
@@ -0,0 +1,58 @@
+<!--
+  Source: https://bulma.io/documentation/components/breadcrumb/
+  Bulma version: 1.0.4
+  Canonical documented markup: nav.breadcrumb[aria-label=breadcrumbs] > ul > li;
+  current item = li.is-active > a[aria-current=page] (anchor KEPT, styled inert
+  by Bulma CSS). Separator/alignment/size variants are root modifier classes
+  (has-*-separator, is-centered/is-right, is-small/-medium/-large).
+-->
+
+<!-- fixture: basic breadcrumb with active item -->
+<nav class="breadcrumb" aria-label="breadcrumbs">
+  <ul>
+    <li><a href="#">Bulma</a></li>
+    <li><a href="#">Documentation</a></li>
+    <li><a href="#">Components</a></li>
+    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
+  </ul>
+</nav>
+
+<!-- fixture: breadcrumb with icons -->
+<nav class="breadcrumb" aria-label="breadcrumbs">
+  <ul>
+    <li>
+      <a href="#">
+        <span class="icon is-small">
+          <i class="fas fa-home" aria-hidden="true"></i>
+        </span>
+        <span>Bulma</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span class="icon is-small">
+          <i class="fas fa-book" aria-hidden="true"></i>
+        </span>
+        <span>Documentation</span>
+      </a>
+    </li>
+    <li class="is-active">
+      <a href="#">
+        <span class="icon is-small">
+          <i class="fas fa-thumbs-up" aria-hidden="true"></i>
+        </span>
+        <span>Breadcrumb</span>
+      </a>
+    </li>
+  </ul>
+</nav>
+
+<!-- fixture: alternative separator variant -->
+<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
+  <ul>
+    <li><a href="#">Bulma</a></li>
+    <li><a href="#">Documentation</a></li>
+    <li><a href="#">Components</a></li>
+    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
+  </ul>
+</nav>
diff --git a/packages/bulma/harness/fixtures/dropdown.html b/packages/bulma/harness/fixtures/dropdown.html
new file mode 100644
index 0000000000..109269d93e
--- /dev/null
+++ b/packages/bulma/harness/fixtures/dropdown.html
@@ -0,0 +1,55 @@
+<!--
+  Source: https://bulma.io/documentation/components/dropdown/
+  Bulma version: 1.0.4
+  Canonical documented markup, open state (`is-active` on .dropdown root as
+  shown in the docs). Trigger: .dropdown-trigger > button[aria-haspopup][aria-controls];
+  menu: .dropdown-menu[id][role=menu] > .dropdown-content > .dropdown-item.
+  Other documented modifiers: is-hoverable, is-right, is-up.
+-->
+
+<!-- fixture: dropdown with items, active item, and divider (open) -->
+<div class="dropdown is-active">
+  <div class="dropdown-trigger">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+      <span>Dropdown button</span>
+      <span class="icon is-small">
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <div class="dropdown-menu" id="dropdown-menu" role="menu">
+    <div class="dropdown-content">
+      <a href="#" class="dropdown-item"> Dropdown item </a>
+      <a class="dropdown-item"> Other dropdown item </a>
+      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <hr class="dropdown-divider" />
+      <a href="#" class="dropdown-item"> With a divider </a>
+    </div>
+  </div>
+</div>
+
+<!-- fixture: dropdown with arbitrary content (div.dropdown-item) -->
+<div class="dropdown is-active">
+  <div class="dropdown-trigger">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
+      <span>Content</span>
+      <span class="icon is-small">
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <div class="dropdown-menu" id="dropdown-menu2" role="menu">
+    <div class="dropdown-content">
+      <div class="dropdown-item">
+        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
+      </div>
+      <hr class="dropdown-divider" />
+      <div class="dropdown-item">
+        <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
+      </div>
+      <hr class="dropdown-divider" />
+      <a href="#" class="dropdown-item"> This is a link </a>
+    </div>
+  </div>
+</div>
diff --git a/packages/bulma/harness/fixtures/form-checkbox.html b/packages/bulma/harness/fixtures/form-checkbox.html
new file mode 100644
index 0000000000..f2cd40de55
--- /dev/null
+++ b/packages/bulma/harness/fixtures/form-checkbox.html
@@ -0,0 +1,60 @@
+<!--
+  Source: https://bulma.io/documentation/form/checkbox/
+  Bulma version: 1.0.4
+  Fetched: 2026-08-01
+  Canonical markup copied verbatim from the docs. label.checkbox WRAPS the
+  native input; label text is a bare text node after the input. Disabled state
+  puts the disabled attribute on BOTH the label and the input (the label
+  `disabled` attribute is non-standard HTML but is what Bulma documents and
+  styles). Lists use the .checkboxes wrapper (added in Bulma 1.0).
+-->
+
+<!-- fixture: basic checkbox -->
+<label class="checkbox">
+  <input type="checkbox" />
+  Remember me
+</label>
+
+<!-- fixture: nested link -->
+<label class="checkbox">
+  <input type="checkbox" />
+  I agree to the <a href="#">terms and conditions</a>
+</label>
+
+<!-- fixture: disabled (attribute on label AND input) -->
+<label class="checkbox" disabled>
+  <input type="checkbox" disabled />
+  Save my preferences
+</label>
+
+<!-- fixture: checkboxes list (.checkboxes wrapper) -->
+<div class="checkboxes">
+  <label class="checkbox">
+    <input type="checkbox" />
+    Monday
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" />
+    Tuesday
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" />
+    Wednesday
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" />
+    Thursday
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" />
+    Friday
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" checked />
+    Saturday
+  </label>
+  <label class="checkbox">
+    <input type="checkbox" checked />
+    Sunday
+  </label>
+</div>
diff --git a/packages/bulma/harness/fixtures/form-file.html b/packages/bulma/harness/fixtures/form-file.html
new file mode 100644
index 0000000000..0757e65002
--- /dev/null
+++ b/packages/bulma/harness/fixtures/form-file.html
@@ -0,0 +1,162 @@
+<!--
+  Source: https://bulma.io/documentation/form/file/
+  Bulma version: 1.0.4
+  Fetched: 2026-08-01
+  Canonical markup copied verbatim from the docs. Full structure:
+    div.file > label.file-label > input.file-input[type=file]
+      + span.file-cta > span.file-icon + span.file-label
+      [+ span.file-name when .has-name]
+  NOTE the class collision Bulma itself ships: .file-label is used for BOTH
+  the outer <label> wrapper and the inner CTA text <span>. Modifiers
+  (has-name, is-right, is-fullwidth, is-boxed, is-centered, colors, sizes)
+  all go on the root div.file. The docs' 24 size×style permutations are
+  representative repeats; one example per modifier axis is kept below.
+-->
+
+<!-- fixture: basic file upload -->
+<div class="file">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+  </label>
+</div>
+
+<!-- fixture: file name display (.has-name + span.file-name) -->
+<div class="file has-name">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
+  </label>
+</div>
+
+<!-- fixture: right-aligned CTA -->
+<div class="file has-name is-right">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
+  </label>
+</div>
+
+<!-- fixture: fullwidth name -->
+<div class="file has-name is-fullwidth">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
+  </label>
+</div>
+
+<!-- fixture: boxed style -->
+<div class="file is-boxed">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+  </label>
+</div>
+
+<!-- fixture: boxed with name -->
+<div class="file has-name is-boxed">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
+  </label>
+</div>
+
+<!-- fixture: color variant (on root) -->
+<div class="file is-primary">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Primary file… </span>
+    </span>
+  </label>
+</div>
+
+<!-- fixture: size variants (on root) -->
+<div class="file is-small">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Small file… </span>
+    </span>
+  </label>
+</div>
+<div class="file is-large">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Large file… </span>
+    </span>
+  </label>
+</div>
+
+<!-- fixture: combined modifiers stack on root -->
+<div class="file is-centered is-boxed is-success has-name">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Centered file… </span>
+    </span>
+    <span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
+  </label>
+</div>
+
+<!-- fixture: js example (docs' bring-your-own-JS pattern — BuFile replaces the
+     script with v0 state, updating .file-name text on change) -->
+<div id="file-js-example" class="file has-name">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+    <span class="file-name"> No file uploaded </span>
+  </label>
+</div>
diff --git a/packages/bulma/harness/fixtures/form-general.html b/packages/bulma/harness/fixtures/form-general.html
new file mode 100644
index 0000000000..2449b78e30
--- /dev/null
+++ b/packages/bulma/harness/fixtures/form-general.html
@@ -0,0 +1,88 @@
+<!--
+  Source: https://bulma.io/documentation/form/general/
+  Bulma version: 1.0.4
+  Fetched: 2026-08-01
+  Canonical markup copied verbatim from the docs. Covers: .field / .label /
+  .control / .input / .help, control icons, .field.has-addons,
+  .field.is-grouped, .field.is-horizontal, validation state (.is-danger).
+-->
+
+<!-- fixture: basic field (label + control + input + help) -->
+<div class="field">
+  <label class="label">Label</label>
+  <div class="control">
+    <input class="input" type="text" placeholder="Text input">
+  </div>
+  <p class="help">This is a help text</p>
+</div>
+
+<!-- fixture: control icons (left/right) -->
+<div class="field">
+  <p class="control has-icons-left has-icons-right">
+    <input class="input" type="email" placeholder="Email">
+    <span class="icon is-small is-left">
+      <i class="fas fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fas fa-check"></i>
+    </span>
+  </p>
+</div>
+
+<!-- fixture: validation state (.input.is-danger + .help.is-danger) -->
+<div class="field">
+  <label class="label">Email</label>
+  <div class="control has-icons-left has-icons-right">
+    <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
+    <span class="icon is-small is-left">
+      <i class="fas fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fas fa-exclamation-triangle"></i>
+    </span>
+  </div>
+  <p class="help is-danger">This email is invalid</p>
+</div>
+
+<!-- fixture: addons (.field.has-addons, one .control per attached item) -->
+<div class="field has-addons">
+  <div class="control">
+    <input class="input" type="text" placeholder="Find a repository">
+  </div>
+  <div class="control">
+    <button class="button is-info">
+      Search
+    </button>
+  </div>
+</div>
+
+<!-- fixture: grouped controls (.field.is-grouped, one .control per item) -->
+<div class="field is-grouped">
+  <p class="control">
+    <button class="button is-primary">
+      Submit
+    </button>
+  </p>
+  <p class="control">
+    <a class="button is-light">
+      Cancel
+    </a>
+  </p>
+</div>
+
+<!-- fixture: horizontal form (.field.is-horizontal > .field-label + .field-body > .field) -->
+<div class="field is-horizontal">
+  <div class="field-label is-normal">
+    <label class="label">Subject</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <div class="control">
+        <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
+      </div>
+      <p class="help is-danger">
+        This field is required
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/packages/bulma/harness/fixtures/form-input.html b/packages/bulma/harness/fixtures/form-input.html
new file mode 100644
index 0000000000..2cbbcdd991
--- /dev/null
+++ b/packages/bulma/harness/fixtures/form-input.html
@@ -0,0 +1,169 @@
+<!--
+  Source: https://bulma.io/documentation/form/input/
+  Bulma version: 1.0.4
+  Fetched: 2026-08-01
+  Canonical markup copied verbatim from the docs. Covers: bare .input, color
+  variants, sizes, is-rounded, state classes (is-hovered/is-focused), .control
+  states (is-loading with size on the CONTROL, not the input), disabled,
+  readonly, is-static, icon placement.
+  Note: the docs' is-static example email value is Cloudflare-obfuscated on the
+  live page; restored here to the value used in the Bulma repo docs source.
+-->
+
+<!-- fixture: basic input (bare, no wrapper required) -->
+<input class="input" type="text" placeholder="Text input" />
+
+<!-- fixture: color link -->
+<input class="input is-link" type="text" placeholder="Link input" />
+<!-- fixture: color primary -->
+<input class="input is-primary" type="text" placeholder="Primary input" />
+<!-- fixture: color info -->
+<input class="input is-info" type="text" placeholder="Info input" />
+<!-- fixture: color success -->
+<input class="input is-success" type="text" placeholder="Success input" />
+<!-- fixture: color warning -->
+<input class="input is-warning" type="text" placeholder="Warning input" />
+<!-- fixture: color danger -->
+<input class="input is-danger" type="text" placeholder="Danger input" />
+
+<!-- fixture: sizes -->
+<input class="input is-small" type="text" placeholder="Small input" />
+<input class="input is-normal" type="text" placeholder="Normal input" />
+<input class="input is-medium" type="text" placeholder="Medium input" />
+<input class="input is-large" type="text" placeholder="Large input" />
+
+<!-- fixture: style rounded -->
+<input class="input is-rounded" type="text" placeholder="Rounded input" />
+
+<!-- fixture: states hover focus (state class goes on the input) -->
+<div class="control">
+  <input class="input" type="text" placeholder="Normal input" />
+</div>
+<div class="control">
+  <input class="input is-hovered" type="text" placeholder="Hovered input" />
+</div>
+<div class="control">
+  <input class="input is-focused" type="text" placeholder="Focused input" />
+</div>
+
+<!-- fixture: state loading (is-loading goes on the CONTROL) -->
+<div class="control is-loading">
+  <input class="input" type="text" placeholder="Loading input" />
+</div>
+
+<!-- fixture: loading sizing (size class duplicated on the control) -->
+<div class="field">
+  <div class="control is-small is-loading">
+    <input class="input is-small" type="text" placeholder="Small loading input" />
+  </div>
+</div>
+<div class="field">
+  <div class="control is-loading">
+    <input class="input" type="text" placeholder="Normal loading input" />
+  </div>
+</div>
+<div class="field">
+  <div class="control is-medium is-loading">
+    <input class="input is-medium" type="text" placeholder="Medium loading input" />
+  </div>
+</div>
+<div class="field">
+  <div class="control is-large is-loading">
+    <input class="input is-large" type="text" placeholder="Large loading input" />
+  </div>
+</div>
+
+<!-- fixture: state disabled (native attribute) -->
+<div class="control">
+  <input class="input" type="text" placeholder="Disabled input" disabled />
+</div>
+
+<!-- fixture: state readonly (native attribute) -->
+<div class="control">
+  <input class="input" type="text" value="This text is readonly" readonly />
+</div>
+
+<!-- fixture: static (is-static + readonly) -->
+<div class="field is-horizontal">
+  <div class="field-label is-normal">
+    <label class="label">From</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <p class="control">
+        <input class="input is-static" type="email" value="me@example.com" readonly />
+      </p>
+    </div>
+  </div>
+</div>
+<div class="field is-horizontal">
+  <div class="field-label is-normal">
+    <label class="label">To</label>
+  </div>
+  <div class="field-body">
+    <div class="field">
+      <p class="control">
+        <input class="input" type="email" placeholder="Recipient email" />
+      </p>
+    </div>
+  </div>
+</div>
+
+<!-- fixture: icons -->
+<div class="field">
+  <p class="control has-icons-left has-icons-right">
+    <input class="input" type="email" placeholder="Email" />
+    <span class="icon is-small is-left">
+      <i class="fas fa-envelope"></i>
+    </span>
+    <span class="icon is-small is-right">
+      <i class="fas fa-check"></i>
+    </span>
+  </p>
+</div>
+<div class="field">
+  <p class="control has-icons-left">
+    <input class="input" type="password" placeholder="Password" />
+    <span class="icon is-small is-left">
+      <i class="fas fa-lock"></i>
+    </span>
+  </p>
+</div>
+
+<!-- fixture: icon pairing -->
+<div class="control has-icons-left has-icons-right">
+  <input class="input is-small" type="email" placeholder="Email" />
+  <span class="icon is-small is-left">
+    <i class="fas fa-envelope"></i>
+  </span>
+  <span class="icon is-small is-right">
+    <i class="fas fa-check"></i>
+  </span>
+</div>
+<div class="control has-icons-left has-icons-right">
+  <input class="input" type="email" placeholder="Email" />
+  <span class="icon is-small is-left">
+    <i class="fas fa-envelope"></i>
+  </span>
+  <span class="icon is-small is-right">
+    <i class="fas fa-check"></i>
+  </span>
+</div>
+<div class="control has-icons-left has-icons-right">
+  <input class="input is-medium" type="email" placeholder="Email" />
+  <span class="icon is-left">
+    <i class="fas fa-envelope"></i>
+  </span>
+  <span class="icon is-right">
+    <i class="fas fa-check"></i>
+  </span>
+</div>
+<div class="control has-icons-left has-icons-right">
+  <input class="input is-large" type="email" placeholder="Email" />
+  <span class="icon is-medium is-left">
+    <i class="fas fa-envelope"></i>
+  </span>
+  <span class="icon is-medium is-right">
+    <i class="fas fa-check"></i>
+  </span>
+</div>
diff --git a/packages/bulma/harness/fixtures/form-radio.html b/packages/bulma/harness/fixtures/form-radio.html
new file mode 100644
index 0000000000..1a1f22683f
--- /dev/null
+++ b/packages/bulma/harness/fixtures/form-radio.html
@@ -0,0 +1,66 @@
+<!--
+  Source: https://bulma.io/documentation/form/radio/
+  Bulma version: 1.0.4
+  Fetched: 2026-08-01
+  Canonical markup copied verbatim from the docs. label.radio WRAPS the native
+  input; grouping is via the shared name attribute; siblings sit inside a
+  .control (inline) or a .radios wrapper (Bulma 1.0 list layout). Disabled
+  state puts the disabled attribute on BOTH the label and the input (label
+  `disabled` is non-standard HTML but is what Bulma documents and styles).
+-->
+
+<!-- fixture: basic radio group (inside a .control) -->
+<div class="control">
+  <label class="radio">
+    <input type="radio" name="answer" />
+    Yes
+  </label>
+  <label class="radio">
+    <input type="radio" name="answer" />
+    No
+  </label>
+</div>
+
+<!-- fixture: default checked -->
+<div class="control">
+  <label class="radio">
+    <input type="radio" name="foobar" />
+    Foo
+  </label>
+  <label class="radio">
+    <input type="radio" name="foobar" checked />
+    Bar
+  </label>
+</div>
+
+<!-- fixture: disabled option (attribute on label AND input) -->
+<div class="control">
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Going
+  </label>
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Not going
+  </label>
+  <label class="radio" disabled>
+    <input type="radio" name="rsvp" disabled />
+    Maybe
+  </label>
+</div>
+
+<!-- fixture: radios list (.radios wrapper) -->
+<div class="radios">
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Going
+  </label>
+  <label class="radio">
+    <input type="radio" name="rsvp" />
+    Not going
+  </label>
+  <label class="radio" disabled>
+    <input type="radio" name="rsvp" disabled />
+    Maybe
+  </label>
+</div>
diff --git a/packages/bulma/harness/fixtures/form-select.html b/packages/bulma/harness/fixtures/form-select.html
new file mode 100644
index 0000000000..3fd403cd69
--- /dev/null
+++ b/packages/bulma/harness/fixtures/form-select.html
@@ -0,0 +1,179 @@
+<!--
+  Source: https://bulma.io/documentation/form/select/
+  Bulma version: 1.0.4
+  Fetched: 2026-08-01
+  Canonical markup copied verbatim from the docs. The div.select WRAPS a
+  native <select>; modifier classes (color, size, is-rounded, is-multiple,
+  is-loading) go on the .select wrapper — EXCEPT is-hovered/is-focused which
+  go on the native select element itself.
+-->
+
+<!-- fixture: basic select (.select > select) -->
+<div class="select">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+
+<!-- fixture: multiple select (.select.is-multiple + multiple/size attrs on select) -->
+<div class="select is-multiple">
+  <select multiple size="8">
+    <option value="Argentina">Argentina</option>
+    <option value="Bolivia">Bolivia</option>
+    <option value="Brazil">Brazil</option>
+    <option value="Chile">Chile</option>
+    <option value="Colombia">Colombia</option>
+    <option value="Ecuador">Ecuador</option>
+    <option value="Guyana">Guyana</option>
+    <option value="Paraguay">Paraguay</option>
+    <option value="Peru">Peru</option>
+    <option value="Suriname">Suriname</option>
+    <option value="Uruguay">Uruguay</option>
+    <option value="Venezuela">Venezuela</option>
+  </select>
+</div>
+
+<!-- fixture: colors (on the wrapper) -->
+<div class="select is-link">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-primary">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-info">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-success">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-warning">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-danger">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+
+<!-- fixture: style rounded (on the wrapper) -->
+<div class="select is-rounded">
+  <select>
+    <option>Rounded dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+
+<!-- fixture: sizes (on the wrapper) -->
+<div class="select is-small">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-normal">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-medium">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select is-large">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+
+<!-- fixture: states hover focus (classes go on the NATIVE select, not the wrapper) -->
+<div class="select">
+  <select class="is-hovered">
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+<div class="select">
+  <select class="is-focused">
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+
+<!-- fixture: state loading (on the wrapper — replaces the dropdown arrow) -->
+<div class="select is-loading">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+
+<!-- fixture: with icon (.control.has-icons-left wraps .select; icon size matches select size) -->
+<div class="control has-icons-left">
+  <div class="select is-small">
+    <select>
+      <option selected>Country</option>
+      <option>Select dropdown</option>
+      <option>With options</option>
+    </select>
+  </div>
+  <span class="icon is-small is-left">
+    <i class="fas fa-globe"></i>
+  </span>
+</div>
+<div class="control has-icons-left">
+  <div class="select">
+    <select>
+      <option selected>Country</option>
+      <option>Select dropdown</option>
+      <option>With options</option>
+    </select>
+  </div>
+  <span class="icon is-left">
+    <i class="fas fa-globe"></i>
+  </span>
+</div>
+<div class="control has-icons-left">
+  <div class="select is-medium">
+    <select>
+      <option selected>Country</option>
+      <option>Select dropdown</option>
+      <option>With options</option>
+    </select>
+  </div>
+  <span class="icon is-medium is-left">
+    <i class="fas fa-globe"></i>
+  </span>
+</div>
+<div class="control has-icons-left">
+  <div class="select is-large">
+    <select>
+      <option selected>Country</option>
+      <option>Select dropdown</option>
+      <option>With options</option>
+    </select>
+  </div>
+  <span class="icon is-large is-left">
+    <i class="fas fa-globe"></i>
+  </span>
+</div>
diff --git a/packages/bulma/harness/fixtures/form-textarea.html b/packages/bulma/harness/fixtures/form-textarea.html
new file mode 100644
index 0000000000..183c917a5e
--- /dev/null
+++ b/packages/bulma/harness/fixtures/form-textarea.html
@@ -0,0 +1,106 @@
+<!--
+  Source: https://bulma.io/documentation/form/textarea/
+  Bulma version: 1.0.4
+  Fetched: 2026-08-01
+  Canonical markup copied verbatim from the docs. Covers: bare .textarea,
+  rows, color variants, sizes, states (is-hovered/is-focused on the textarea;
+  is-loading + size on the .control), disabled, readonly, has-fixed-size.
+-->
+
+<!-- fixture: basic textarea (bare, no wrapper required) -->
+<textarea class="textarea" placeholder="e.g. Hello world"></textarea>
+
+<!-- fixture: rows attribute -->
+<textarea
+  class="textarea"
+  placeholder="10 lines of textarea"
+  rows="10"
+></textarea>
+
+<!-- fixture: color link -->
+<textarea class="textarea is-link" placeholder="Link textarea"></textarea>
+<!-- fixture: color primary -->
+<textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>
+<!-- fixture: color info -->
+<textarea class="textarea is-info" placeholder="Info textarea"></textarea>
+<!-- fixture: color success -->
+<textarea class="textarea is-success" placeholder="Success textarea"></textarea>
+<!-- fixture: color warning -->
+<textarea class="textarea is-warning" placeholder="Warning textarea"></textarea>
+<!-- fixture: color danger -->
+<textarea class="textarea is-danger" placeholder="Danger textarea"></textarea>
+
+<!-- fixture: sizes -->
+<div class="field">
+  <div class="control">
+    <textarea class="textarea is-small" placeholder="Small textarea"></textarea>
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <textarea class="textarea" placeholder="Normal textarea"></textarea>
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <textarea class="textarea is-medium" placeholder="Medium textarea"></textarea>
+  </div>
+</div>
+<div class="field">
+  <div class="control">
+    <textarea class="textarea is-large" placeholder="Large textarea"></textarea>
+  </div>
+</div>
+
+<!-- fixture: states hover focus (state class goes on the textarea) -->
+<div class="control">
+  <textarea class="textarea" placeholder="Normal textarea"></textarea>
+</div>
+<div class="control">
+  <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
+</div>
+<div class="control">
+  <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
+</div>
+
+<!-- fixture: state loading (is-loading goes on the CONTROL) -->
+<div class="control is-loading">
+  <textarea class="textarea" placeholder="Loading textarea"></textarea>
+</div>
+
+<!-- fixture: loading sizing (size class duplicated on the control) -->
+<div class="field">
+  <div class="control is-small is-loading">
+    <textarea class="textarea is-small" placeholder="Small loading textarea"></textarea>
+  </div>
+</div>
+<div class="field">
+  <div class="control is-loading">
+    <textarea class="textarea" placeholder="Normal loading textarea"></textarea>
+  </div>
+</div>
+<div class="field">
+  <div class="control is-medium is-loading">
+    <textarea class="textarea is-medium" placeholder="Medium loading textarea"></textarea>
+  </div>
+</div>
+<div class="field">
+  <div class="control is-large is-loading">
+    <textarea class="textarea is-large" placeholder="Large loading textarea"></textarea>
+  </div>
+</div>
+
+<!-- fixture: state disabled (native attribute) -->
+<div class="control">
+  <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
+</div>
+
+<!-- fixture: state readonly (native attribute) -->
+<div class="control">
+  <textarea class="textarea" readonly>This content is readonly</textarea>
+</div>
+
+<!-- fixture: fixed size (disables resize) -->
+<div class="control">
+  <textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
+</div>
diff --git a/packages/bulma/harness/fixtures/menu.html b/packages/bulma/harness/fixtures/menu.html
new file mode 100644
index 0000000000..3aece0a1a3
--- /dev/null
+++ b/packages/bulma/harness/fixtures/menu.html
@@ -0,0 +1,38 @@
+<!--
+  Source: https://bulma.io/documentation/components/menu/
+  Bulma version: 1.0.4
+  Canonical documented markup: aside.menu with alternating p.menu-label +
+  ul.menu-list sections. Active item = a.is-active (on the ANCHOR, unlike
+  tabs/breadcrumb where it sits on the li). Nesting: bare <ul> as sibling of
+  the <a> inside the same <li> — no class on the nested ul.
+-->
+
+<!-- fixture: full menu with labels, active item, and nesting -->
+<aside class="menu">
+  <p class="menu-label">General</p>
+  <ul class="menu-list">
+    <li><a>Dashboard</a></li>
+    <li><a>Customers</a></li>
+  </ul>
+  <p class="menu-label">Administration</p>
+  <ul class="menu-list">
+    <li><a>Team Settings</a></li>
+    <li>
+      <a class="is-active">Manage Your Team</a>
+      <ul>
+        <li><a>Members</a></li>
+        <li><a>Plugins</a></li>
+        <li><a>Add a member</a></li>
+      </ul>
+    </li>
+    <li><a>Invitations</a></li>
+    <li><a>Cloud Storage Environment Settings</a></li>
+    <li><a>Authentication</a></li>
+  </ul>
+  <p class="menu-label">Transactions</p>
+  <ul class="menu-list">
+    <li><a>Payments</a></li>
+    <li><a>Transfers</a></li>
+    <li><a>Balance</a></li>
+  </ul>
+</aside>
diff --git a/packages/bulma/harness/fixtures/message.html b/packages/bulma/harness/fixtures/message.html
new file mode 100644
index 0000000000..3a9ace0f38
--- /dev/null
+++ b/packages/bulma/harness/fixtures/message.html
@@ -0,0 +1,31 @@
+<!--
+  Source: https://bulma.io/documentation/components/message/
+  Bulma version: 1.0.4
+  Canonical documented markup: article.message > .message-header (p + button.delete)
+  + .message-body. Delete button carries aria-label="delete".
+  Body-only variant is also documented.
+-->
+
+<!-- fixture: message with header and delete -->
+<article class="message">
+  <div class="message-header">
+    <p>Hello World</p>
+    <button class="delete" aria-label="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+    diam, et dictum <a>felis venenatis</a> efficitur.
+  </div>
+</article>
+
+<!-- fixture: message body only -->
+<article class="message">
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+    diam, et dictum <a>felis venenatis</a> efficitur.
+  </div>
+</article>
diff --git a/packages/bulma/harness/fixtures/modal.html b/packages/bulma/harness/fixtures/modal.html
new file mode 100644
index 0000000000..66012ac0f3
--- /dev/null
+++ b/packages/bulma/harness/fixtures/modal.html
@@ -0,0 +1,36 @@
+<!--
+  Source: https://bulma.io/documentation/components/modal/
+  Bulma version: 1.0.4
+  Canonical documented markup. Docs snippets show `.modal` closed; the docs
+  instruct adding `is-active` on the `.modal` container to activate it —
+  fixtures capture the OPEN state. Both variants: .modal-content and .modal-card.
+-->
+
+<!-- fixture: modal-content variant (open) -->
+<div class="modal is-active">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <!-- Any other Bulma elements you want -->
+  </div>
+  <button class="modal-close is-large" aria-label="close"></button>
+</div>
+
+<!-- fixture: modal-card variant (open) -->
+<div class="modal is-active">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Modal title</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <!-- Content ... -->
+    </section>
+    <footer class="modal-card-foot">
+      <div class="buttons">
+        <button class="button is-success">Save changes</button>
+        <button class="button">Cancel</button>
+      </div>
+    </footer>
+  </div>
+</div>
diff --git a/packages/bulma/harness/fixtures/navbar.html b/packages/bulma/harness/fixtures/navbar.html
new file mode 100644
index 0000000000..7d39a8cf3a
--- /dev/null
+++ b/packages/bulma/harness/fixtures/navbar.html
@@ -0,0 +1,93 @@
+<!--
+  Source: https://bulma.io/documentation/components/navbar/
+  Bulma version: 1.0.4
+  Canonical documented markup (brand SVG logo replaced by a placeholder img —
+  the docs embed the full Bulma wordmark SVG; structure `a.navbar-item > (logo)`
+  is what matters). Verified against live page 2026-08-01:
+  - burger has FOUR aria-hidden spans in Bulma 1.0 (was three in 0.9)
+  - `is-selected` on a .navbar-dropdown item is genuine 1.0 docs markup
+  - open state = `is-active` on BOTH .navbar-burger and .navbar-menu
+-->
+
+<!-- fixture: full navbar (closed/desktop state as documented) -->
+<nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+      <img src="logo.png" alt="Logo" />
+    </a>
+
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item">
+        Home
+      </a>
+
+      <a class="navbar-item">
+        Documentation
+      </a>
+
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link">
+          More
+        </a>
+
+        <div class="navbar-dropdown">
+          <a class="navbar-item">
+            About
+          </a>
+          <a class="navbar-item is-selected">
+            Jobs
+          </a>
+          <a class="navbar-item">
+            Contact
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item">
+            Report an issue
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a class="button is-primary">
+            <strong>Sign up</strong>
+          </a>
+          <a class="button is-light">
+            Log in
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<!-- fixture: burger + menu OPEN state (docs: toggle is-active on both) -->
+<nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="true" data-target="navbarOpenExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarOpenExample" class="navbar-menu is-active">
+    <div class="navbar-start">
+      <a class="navbar-item">
+        Home
+      </a>
+    </div>
+  </div>
+</nav>
diff --git a/packages/bulma/harness/fixtures/notification.html b/packages/bulma/harness/fixtures/notification.html
new file mode 100644
index 0000000000..4da8f54d18
--- /dev/null
+++ b/packages/bulma/harness/fixtures/notification.html
@@ -0,0 +1,25 @@
+<!--
+  Source: https://bulma.io/documentation/elements/notification/
+  Bulma version: 1.0.4
+  Canonical documented markup: div.notification > button.delete (FIRST child)
+  + text content. Note: docs' delete button here has NO aria-label
+  (unlike message/modal) — a11y improvement is on us, flag in SPEC.md.
+-->
+
+<!-- fixture: basic notification -->
+<div class="notification">
+  <button class="delete"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
+  <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+  nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
+  et dictum <a>felis venenatis</a> efficitur.
+</div>
+
+<!-- fixture: color variant -->
+<div class="notification is-primary">
+  <button class="delete"></button>
+  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
+  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
+  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+  diam, et dictum <a>felis venenatis</a> efficitur.
+</div>
diff --git a/packages/bulma/harness/fixtures/pagination.html b/packages/bulma/harness/fixtures/pagination.html
new file mode 100644
index 0000000000..ef2c49c14b
--- /dev/null
+++ b/packages/bulma/harness/fixtures/pagination.html
@@ -0,0 +1,55 @@
+<!--
+  Source: https://bulma.io/documentation/components/pagination/
+  Bulma version: 1.0.4
+  Canonical documented markup: nav.pagination[role=navigation][aria-label=pagination]
+  with .pagination-previous + .pagination-next as SIBLINGS BEFORE ul.pagination-list
+  (CSS order puts the list visually between them). Current page:
+  a.pagination-link.is-current[aria-current=page] with NO href.
+  Disabled: `is-disabled` class + href removed (anchor, not button).
+-->
+
+<!-- fixture: full pagination with ellipses and current page -->
+<nav class="pagination" role="navigation" aria-label="pagination">
+  <a href="#" class="pagination-previous">Previous</a>
+  <a href="#" class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 1">1</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 45">45</a>
+    </li>
+    <li>
+      <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 47">47</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 86">86</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- fixture: disabled previous (first page) -->
+<nav class="pagination" role="navigation" aria-label="pagination">
+  <a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
+  <a href="#" class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li>
+      <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 2">2</a>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 3">3</a>
+    </li>
+  </ul>
+</nav>
diff --git a/packages/bulma/harness/fixtures/panel.html b/packages/bulma/harness/fixtures/panel.html
new file mode 100644
index 0000000000..c3aac79034
--- /dev/null
+++ b/packages/bulma/harness/fixtures/panel.html
@@ -0,0 +1,73 @@
+<!--
+  Source: https://bulma.io/documentation/components/panel/
+  Bulma version: 1.0.4
+  Canonical documented markup: nav.panel with heterogeneous FLAT children —
+  p.panel-heading, div.panel-block (search), p.panel-tabs > a.is-active,
+  a.panel-block(.is-active) > span.panel-icon, label.panel-block > input[checkbox],
+  div.panel-block > button. No list wrapper; blocks are direct children.
+-->
+
+<!-- fixture: full panel -->
+<nav class="panel">
+  <p class="panel-heading">Repositories</p>
+  <div class="panel-block">
+    <p class="control has-icons-left">
+      <input class="input" type="text" placeholder="Search" />
+      <span class="icon is-left">
+        <i class="fas fa-search" aria-hidden="true"></i>
+      </span>
+    </p>
+  </div>
+  <p class="panel-tabs">
+    <a class="is-active">All</a>
+    <a>Public</a>
+    <a>Private</a>
+    <a>Sources</a>
+    <a>Forks</a>
+  </p>
+  <a class="panel-block is-active">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    bulma
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    marksheet
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    minireset.css
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    jgthms.github.io
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-code-branch" aria-hidden="true"></i>
+    </span>
+    daniellowtw/infboard
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-code-branch" aria-hidden="true"></i>
+    </span>
+    mojs
+  </a>
+  <label class="panel-block">
+    <input type="checkbox" />
+    remember me
+  </label>
+  <div class="panel-block">
+    <button class="button is-link is-outlined is-fullwidth">
+      Reset all filters
+    </button>
+  </div>
+</nav>
diff --git a/packages/bulma/harness/fixtures/tabs.html b/packages/bulma/harness/fixtures/tabs.html
new file mode 100644
index 0000000000..801e6689be
--- /dev/null
+++ b/packages/bulma/harness/fixtures/tabs.html
@@ -0,0 +1,47 @@
+<!--
+  Source: https://bulma.io/documentation/components/tabs/
+  Bulma version: 1.0.4
+  Canonical documented markup: .tabs > ul > li(.is-active) > a.
+  Bulma defines NO tab panels — panels are component territory (v0 Tabs).
+  Docs anchors carry no href; active state lives on the <li>, not the <a>.
+-->
+
+<!-- fixture: basic tabs -->
+<div class="tabs">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+
+<!-- fixture: tabs with icons (centered) -->
+<div class="tabs is-centered">
+  <ul>
+    <li class="is-active">
+      <a>
+        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
+        <span>Pictures</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
+        <span>Music</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
+        <span>Videos</span>
+      </a>
+    </li>
+    <li>
+      <a>
+        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
+        <span>Documents</span>
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/packages/bulma/package.json b/packages/bulma/package.json
new file mode 100644
index 0000000000..0e53513e45
--- /dev/null
+++ b/packages/bulma/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@paper/bulma",
+  "version": "0.1.0",
+  "description": "Bulma compat design system — real Bulma markup, Vuetify0 behavior",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuetifyjs/0.git",
+    "directory": "packages/bulma"
+  },
+  "types": "./dist/index.d.mts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "vue-tsc --noEmit --incremental",
+    "test:browser": "vitest --project bulma:browser"
+  },
+  "peerDependencies": {
+    "bulma": "^1.0",
+    "vue": ">=3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "bulma": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.mjs",
+      "./package.json": "./package.json"
+    }
+  },
+  "dependencies": {
+    "@vuetify/v0": "workspace:^"
+  },
+  "devDependencies": {
+    "@vitest/browser-playwright": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "unplugin-vue": "catalog:",
+    "vitest": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.browser.test.ts b/packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.browser.test.ts
new file mode 100644
index 0000000000..8b1f0d2d3f
--- /dev/null
+++ b/packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.browser.test.ts
@@ -0,0 +1,52 @@
+import { describe, it } from 'vitest'
+
+// Context
+import BuBreadcrumb from './BuBreadcrumb.vue'
+
+// Utilities
+import { createApp } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+const items = [
+  { text: 'Bulma', href: '#' },
+  { text: 'Documentation', href: '#' },
+  { text: 'Components', href: '#' },
+  { text: 'Breadcrumb', href: '#' },
+]
+
+function mount (props: Record<string, unknown>) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(BuBreadcrumb, props)
+  app.mount(host)
+  return {
+    el: host.firstElementChild!,
+    destroy () {
+      app.unmount()
+      host.remove()
+    },
+  }
+}
+
+describe('buBreadcrumb', () => {
+  it('conforms to the basic breadcrumb fixture with active last item', () => {
+    const { el, destroy } = mount({ items })
+
+    try {
+      conform(el, 'breadcrumb')
+    } finally {
+      destroy()
+    }
+  })
+
+  it('conforms to the alternative separator fixture', () => {
+    const { el, destroy } = mount({ items, separator: 'arrow' })
+
+    try {
+      conform(el, 'breadcrumb:separator')
+    } finally {
+      destroy()
+    }
+  })
+})
diff --git a/packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.vue b/packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.vue
new file mode 100644
index 0000000000..a1a0c87bdc
--- /dev/null
+++ b/packages/bulma/src/components/BuBreadcrumb/BuBreadcrumb.vue
@@ -0,0 +1,105 @@
+/**
+ * @module BuBreadcrumb
+ *
+ * @remarks
+ * Hand-rolled `nav.breadcrumb` markup. v0's Breadcrumbs compound is
+ * deliberately NOT used in Tier 1: BreadcrumbsRoot's overflow watcher hides
+ * middle crumbs whenever the measured container is narrower than the crumb
+ * run even when no Ellipsis is registered — silently disappearing items with
+ * no indicator, where upstream Bulma flex-wraps. BuBreadcrumb uses none of
+ * the compound's other behavior (no v-model, no overflow UI), so nothing else
+ * is lost. v0-core follow-up: BreadcrumbsRoot should skip the truncation
+ * branch when no ellipsis ticket is registered (or expose an overflow
+ * opt-out); revisit once fixed.
+ */
+
+<script lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  export interface BuBreadcrumbItem {
+    /** Display text */
+    text: string
+    /** Link target */
+    href?: string
+  }
+
+  export interface BuBreadcrumbProps {
+    /** Center the crumb list (`is-centered`) */
+    centered?: boolean
+    /** Breadcrumb trail — the last item is declaratively current */
+    items?: BuBreadcrumbItem[]
+    /** Accessible label for the navigation landmark */
+    label?: string
+    /** Right-align the crumb list (`is-right`) */
+    right?: boolean
+    /** Alternative separator modifier (has-{separator}-separator) */
+    separator?: 'arrow' | 'bullet' | 'dot' | 'succeeds'
+    /** Bulma size modifier */
+    size?: 'small' | 'normal' | 'medium' | 'large'
+  }
+
+  export interface BuBreadcrumbSlotProps {
+    /** The item being rendered */
+    item: BuBreadcrumbItem
+    /** Position in the trail */
+    index: number
+    /** Whether this is the current (last) item */
+    isLast: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuBreadcrumb' })
+
+  defineSlots<{
+    /** Anchor content per item; falls back to item text */
+    item?: (props: BuBreadcrumbSlotProps) => any
+  }>()
+
+  const {
+    centered = false,
+    items = [],
+    label = 'breadcrumbs',
+    right = false,
+    separator,
+    size,
+  } = defineProps<BuBreadcrumbProps>()
+
+  const classes = toRef(() => [
+    separator && `has-${separator}-separator`,
+    centered && 'is-centered',
+    right && 'is-right',
+    size && `is-${size}`,
+  ])
+
+  const last = toRef(() => items.length - 1)
+</script>
+
+<template>
+  <nav
+    :aria-label="label"
+    class="breadcrumb"
+    :class="classes"
+  >
+    <ul>
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        :class="{ 'is-active': index === last }"
+      >
+        <a
+          :aria-current="index === last ? 'page' : undefined"
+          :href="item.href"
+        >
+          <slot
+            :index
+            :is-last="index === last"
+            :item
+            name="item"
+          >{{ item.text }}</slot>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
diff --git a/packages/bulma/src/components/BuBreadcrumb/index.ts b/packages/bulma/src/components/BuBreadcrumb/index.ts
new file mode 100644
index 0000000000..33dbf51d5a
--- /dev/null
+++ b/packages/bulma/src/components/BuBreadcrumb/index.ts
@@ -0,0 +1,2 @@
+export type { BuBreadcrumbItem, BuBreadcrumbProps, BuBreadcrumbSlotProps } from './BuBreadcrumb.vue'
+export { default as BuBreadcrumb } from './BuBreadcrumb.vue'
diff --git a/packages/bulma/src/components/BuCheckbox/BuCheckbox.browser.test.ts b/packages/bulma/src/components/BuCheckbox/BuCheckbox.browser.test.ts
new file mode 100644
index 0000000000..7b0a75f77f
--- /dev/null
+++ b/packages/bulma/src/components/BuCheckbox/BuCheckbox.browser.test.ts
@@ -0,0 +1,34 @@
+import { describe, it } from 'vitest'
+
+// Components
+import { BuCheckbox } from './index'
+
+// Utilities
+import { createApp, h } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+function mount (render: () => ReturnType<typeof h>) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+describe('buCheckbox', () => {
+  it('should conform to the Bulma checkbox fixtures', () => {
+    const basic = mount(() => h(BuCheckbox, () => ' Remember me '))
+    conform(basic.el, 'form-checkbox')
+    basic.unmount()
+
+    const disabled = mount(() => h(BuCheckbox, { disabled: true }, () => ' Save my preferences '))
+    conform(disabled.el, 'form-checkbox:disabled')
+    disabled.unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuCheckbox/BuCheckbox.vue b/packages/bulma/src/components/BuCheckbox/BuCheckbox.vue
new file mode 100644
index 0000000000..4d6b4d7c15
--- /dev/null
+++ b/packages/bulma/src/components/BuCheckbox/BuCheckbox.vue
@@ -0,0 +1,133 @@
+<script lang="ts">
+  // Framework
+  import { createInput } from '@vuetify/v0'
+
+  // Utilities
+  import { createValidateOn } from '../../utilities/validate'
+  import { toRef, useAttrs, watch } from 'vue'
+
+  // Types
+  import type { ID, InputOptions, ValidateOn } from '@vuetify/v0'
+  import type { StyleValue } from 'vue'
+
+  export interface BuCheckboxProps {
+    /**
+     * Disables the checkbox. Mirrors Bulma's documented non-standard `disabled`
+     * attribute on the wrapping label in addition to the native input.
+     */
+    disabled?: boolean
+    /** Manual error state override — forces invalid. */
+    error?: boolean
+    /** Manual error messages — merged with rule-based errors. */
+    errorMessages?: string | string[]
+    /** Associate with a form by id. Snapshotted at setup (createInput takes a plain value). */
+    form?: string
+    /** Unique identifier for the native input (auto-generated if omitted). Snapshotted at setup. */
+    id?: ID
+    /** Form field name. Snapshotted at setup (createInput takes a plain value). */
+    name?: string
+    /** Whether required. Snapshotted at setup for validation; the DOM attr stays reactive. */
+    required?: boolean
+    /** Validation rules. Snapshotted at setup (createInput takes a plain value). */
+    rules?: InputOptions['rules']
+    /** When to trigger validation. */
+    validateOn?: ValidateOn
+  }
+
+  export interface BuCheckboxSlotProps {
+    /** Merged error messages. */
+    errors: string[]
+    /** Whether the checkbox is checked. */
+    isChecked: boolean
+    /** Whether the native input is focused. */
+    isFocused: boolean
+    /** Whether the field is valid. */
+    isValid: boolean | null
+  }
+
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuCheckbox', inheritAttrs: false })
+
+  // class/style merge onto the wrapping label; all other fallthrough attrs
+  // (aria-*, autofocus, data-testid, …) target the native input.
+  const attrs = useAttrs()
+  const rest = toRef(() => Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),
+  ))
+  const style = toRef(() => attrs.style as StyleValue | undefined)
+
+  defineSlots<{
+    default: (props: BuCheckboxSlotProps) => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: boolean]
+  }>()
+
+  const {
+    disabled = false,
+    error = false,
+    errorMessages,
+    form,
+    id,
+    name,
+    required,
+    rules = [],
+    validateOn = 'blur',
+  } = defineProps<BuCheckboxProps>()
+
+  const model = defineModel<boolean>({ default: false })
+
+  const input = createInput<boolean>({
+    value: model,
+    id,
+    name,
+    form,
+    required,
+    disabled: () => disabled,
+    rules,
+    error: () => error,
+    errorMessages: () => errorMessages,
+  })
+
+  const slotProps = toRef((): BuCheckboxSlotProps => ({
+    errors: input.errors.value,
+    isChecked: model.value,
+    isFocused: input.isFocused.value,
+    isValid: input.isValid.value,
+  }))
+
+  const { should, onFocus, onBlur } = createValidateOn(input, () => validateOn)
+
+  watch(model, () => {
+    if (should('input')) input.validate()
+  })
+</script>
+
+<template>
+  <!-- Bulma documents the non-standard label[disabled]; '' matches native boolean-attr serialization. -->
+  <label
+    class="checkbox"
+    :class="attrs.class"
+    :disabled="disabled ? '' : undefined"
+    :style
+  >
+    <input
+      :id="String(input.id)"
+      v-bind="rest"
+      v-model="model"
+      :aria-invalid="input.isValid.value === false || undefined"
+      :disabled="disabled || undefined"
+      :form
+      :name
+      :required="required || undefined"
+      type="checkbox"
+      @blur="onBlur"
+      @focus="onFocus"
+    >
+
+    <slot v-bind="slotProps" />
+  </label>
+</template>
diff --git a/packages/bulma/src/components/BuCheckbox/index.ts b/packages/bulma/src/components/BuCheckbox/index.ts
new file mode 100644
index 0000000000..b0a40a746d
--- /dev/null
+++ b/packages/bulma/src/components/BuCheckbox/index.ts
@@ -0,0 +1,2 @@
+export type { BuCheckboxProps, BuCheckboxSlotProps } from './BuCheckbox.vue'
+export { default as BuCheckbox } from './BuCheckbox.vue'
diff --git a/packages/bulma/src/components/BuControl/BuControl.browser.test.ts b/packages/bulma/src/components/BuControl/BuControl.browser.test.ts
new file mode 100644
index 0000000000..a813995cb4
--- /dev/null
+++ b/packages/bulma/src/components/BuControl/BuControl.browser.test.ts
@@ -0,0 +1,58 @@
+// Conformance: BuControl icon and loading modifiers against the fixtures.
+import { afterEach, describe, it } from 'vitest'
+
+// Context
+import BuControl from './BuControl.vue'
+
+// Utilities
+import { createApp, h } from 'vue'
+
+import { conform } from '../../../harness/conform'
+import { BuField } from '../BuField'
+import { BuInput } from '../BuInput'
+
+const cleanups: (() => void)[] = []
+
+function mount (render: () => unknown): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  cleanups.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()!()
+})
+
+function icon (side: string, glyph: string) {
+  return h('span', { class: `icon is-small is-${side}` }, h('i', { class: `fas fa-${glyph}` }))
+}
+
+// v0 InputControl merges `value` in and it lands as a real attribute the
+// fixture lacks — tolerate it explicitly.
+const VALUE = { ignoreAttrs: ['value'] }
+
+describe('buControl', () => {
+  it('conforms to the icons fixture', () => {
+    const host = mount(() => h(BuField, null, () => h(BuControl, { as: 'p', icons: 'both' }, () => [
+      h(BuInput, { type: 'email', placeholder: 'Email' }),
+      icon('left', 'envelope'),
+      icon('right', 'check'),
+    ])))
+
+    conform(host.firstElementChild!, 'form-general:control icons', VALUE)
+  })
+
+  it('conforms to the loading fixture with size duplicated on the control', () => {
+    const host = mount(() => h(BuField, null, () => h(BuControl, { loading: true, size: 'small' }, () => (
+      h(BuInput, { size: 'small', placeholder: 'Small loading input' })
+    ))))
+
+    conform(host.firstElementChild!, 'form-input:loading sizing', VALUE)
+  })
+})
diff --git a/packages/bulma/src/components/BuControl/BuControl.vue b/packages/bulma/src/components/BuControl/BuControl.vue
new file mode 100644
index 0000000000..720ac57846
--- /dev/null
+++ b/packages/bulma/src/components/BuControl/BuControl.vue
@@ -0,0 +1,57 @@
+/**
+ * @module BuControl
+ *
+ * @remarks
+ * Bulma `.control` wrapper — pure markup, no v0 state. Carries the icon,
+ * loading, and size modifier classes per bulma.io/documentation/form/general.
+ */
+
+<script lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  export type BuControlSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuControlProps {
+    /** Element tag — Bulma docs use both `div.control` and `p.control` */
+    as?: 'div' | 'p'
+    /** Fill remaining space in grouped/addon fields: `is-expanded` */
+    expanded?: boolean
+    /** Icon placement: `has-icons-left` / `has-icons-right` */
+    icons?: 'left' | 'right' | 'both'
+    /** Loading spinner: `is-loading` */
+    loading?: boolean
+    /** Spinner size pairing: `is-{size}` on the control itself */
+    size?: BuControlSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuControl' })
+
+  defineSlots<{
+    default: () => any
+  }>()
+
+  const {
+    as = 'div',
+    expanded = false,
+    icons,
+    loading = false,
+    size,
+  } = defineProps<BuControlProps>()
+
+  const classes = toRef(() => [
+    (icons === 'left' || icons === 'both') && 'has-icons-left',
+    (icons === 'right' || icons === 'both') && 'has-icons-right',
+    loading && 'is-loading',
+    size && `is-${size}`,
+    expanded && 'is-expanded',
+  ])
+</script>
+
+<template>
+  <component :is="as" class="control" :class="classes">
+    <slot />
+  </component>
+</template>
diff --git a/packages/bulma/src/components/BuControl/index.ts b/packages/bulma/src/components/BuControl/index.ts
new file mode 100644
index 0000000000..bfe41b76c9
--- /dev/null
+++ b/packages/bulma/src/components/BuControl/index.ts
@@ -0,0 +1,3 @@
+export { default as BuControl } from './BuControl.vue'
+
+export type { BuControlProps, BuControlSize } from './BuControl.vue'
diff --git a/packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts b/packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts
new file mode 100644
index 0000000000..193843a33b
--- /dev/null
+++ b/packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest'
+
+import { BuDropdown } from './index'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+// Types
+import type { BuDropdownSlotProps, BuDropdownTriggerSlotProps } from './index'
+
+import { conform } from '../../../harness/conform'
+
+function trigger (props: BuDropdownTriggerSlotProps) {
+  return h('button', { class: 'button', ...props.attrs }, [
+    h('span', 'Dropdown button'),
+    h('span', { class: 'icon is-small' }, [
+      h('i', { 'class': 'fas fa-angle-down', 'aria-hidden': 'true' }),
+    ]),
+  ])
+}
+
+function content (props: BuDropdownSlotProps) {
+  return [
+    h('a', { class: 'dropdown-item', href: '#', ...props.item }, ' Dropdown item '),
+    h('a', { class: 'dropdown-item', ...props.item }, ' Other dropdown item '),
+    h('a', { class: 'dropdown-item is-active', href: '#', ...props.item }, ' Active dropdown item '),
+    h('a', { class: 'dropdown-item', href: '#', ...props.item }, ' Other dropdown item '),
+    h('hr', { class: 'dropdown-divider' }),
+    h('a', { class: 'dropdown-item', href: '#', ...props.item }, ' With a divider '),
+  ]
+}
+
+function mount (component: Parameters<typeof createApp>[0]) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(component)
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+function click (target: Element | Document) {
+  const node = target === document ? document.body : target
+  node.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+  node.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+}
+
+describe('buDropdown', () => {
+  it('conforms to the dropdown fixture when open', () => {
+    const { el, unmount } = mount({
+      render: () => h(BuDropdown, { modelValue: true, menu: true }, { trigger, default: content }),
+    })
+    // id / aria-controls: fixture hardcodes "dropdown-menu", ours is a useId value.
+    conform(el, 'dropdown', { ignoreAttrs: ['id', 'aria-controls'] })
+    expect(el.querySelector('.dropdown-trigger button')!.getAttribute('aria-controls'))
+      .toBe(el.querySelector('.dropdown-menu')!.id)
+    unmount()
+  })
+
+  it('omits role="menu" in arbitrary-content mode', () => {
+    const { el, unmount } = mount({
+      render: () => h(BuDropdown, { modelValue: true }, { trigger, default: content }),
+    })
+    expect(el.querySelector('.dropdown-menu')!.hasAttribute('role')).toBe(false)
+    unmount()
+  })
+
+  it('closes on outside click and on Escape', async () => {
+    const open = shallowRef(true)
+    const { el, unmount } = mount({
+      setup () {
+        return () => h(BuDropdown, {
+          'modelValue': open.value,
+          'onUpdate:modelValue': (value: boolean) => {
+            open.value = value
+          },
+        }, { trigger, default: content })
+      },
+    })
+
+    // Inside click does not close.
+    click(el.querySelector('.dropdown-content a')!)
+    await nextTick()
+    expect(open.value).toBe(true)
+
+    click(document)
+    await nextTick()
+    expect(open.value).toBe(false)
+    expect(el.classList.contains('is-active')).toBe(false)
+
+    open.value = true
+    await nextTick()
+    el.querySelector('.dropdown-content a')!.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }))
+    await nextTick()
+    expect(open.value).toBe(false)
+
+    unmount()
+  })
+
+  it('toggles via the trigger and reflects is-active', async () => {
+    const open = shallowRef(false)
+    const { el, unmount } = mount({
+      setup () {
+        return () => h(BuDropdown, {
+          'modelValue': open.value,
+          'onUpdate:modelValue': (value: boolean) => {
+            open.value = value
+          },
+        }, { trigger, default: content })
+      },
+    })
+
+    expect(el.classList.contains('is-active')).toBe(false)
+    ;(el.querySelector('.dropdown-trigger button') as HTMLButtonElement).click()
+    await nextTick()
+    expect(open.value).toBe(true)
+    expect(el.classList.contains('is-active')).toBe(true)
+
+    unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuDropdown/BuDropdown.vue b/packages/bulma/src/components/BuDropdown/BuDropdown.vue
new file mode 100644
index 0000000000..e6136e3eee
--- /dev/null
+++ b/packages/bulma/src/components/BuDropdown/BuDropdown.vue
@@ -0,0 +1,140 @@
+<script lang="ts">
+  // Framework
+  import { useClickOutside, useId, useToggleScope } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useTemplateRef } from 'vue'
+
+  export interface BuDropdownProps {
+    /** Show the menu on hover via Bulma CSS only (`is-hoverable`) — no JS wiring when set. */
+    hoverable?: boolean
+    /** Align the menu to the right edge (`is-right`). */
+    right?: boolean
+    /** Open the menu upwards (`is-up`). */
+    up?: boolean
+    /**
+     * Emit `role="menu"` on `.dropdown-menu`. Only set this when every item is an
+     * actionable link rendered with the `item` slot-prop attrs (`role="menuitem"`);
+     * arbitrary-content dropdowns must leave it off.
+     */
+    menu?: boolean
+  }
+
+  export interface BuDropdownTriggerSlotProps {
+    /** Whether the dropdown is open. */
+    isOpen: boolean
+    /** Toggle the dropdown (no-op when `hoverable`). */
+    toggle: () => void
+    /** Attributes to bind to the trigger element. */
+    attrs: {
+      'aria-haspopup': 'true'
+      'aria-controls': string
+      'aria-expanded': 'true' | 'false'
+      'onClick': () => void
+    }
+  }
+
+  export interface BuDropdownSlotProps {
+    /** Whether the dropdown is open. */
+    isOpen: boolean
+    /** Close the dropdown. */
+    close: () => void
+    /** Attrs to bind to each actionable item when `menu` is set; empty otherwise. */
+    item: { role?: 'menuitem' }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuDropdown' })
+
+  defineSlots<{
+    trigger: (props: BuDropdownTriggerSlotProps) => any
+    default: (props: BuDropdownSlotProps) => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: boolean]
+  }>()
+
+  const {
+    hoverable = false,
+    right = false,
+    up = false,
+    menu = false,
+  } = defineProps<BuDropdownProps>()
+
+  const model = defineModel<boolean>({ default: false })
+
+  const id = useId()
+  const root = useTemplateRef('root')
+
+  function close () {
+    model.value = false
+  }
+
+  function onToggle () {
+    if (hoverable) return
+    model.value = !model.value
+  }
+
+  // Dismissal listeners engage only while open (and never for the pure-CSS
+  // hoverable mode) so closed dropdowns are fully inert — a document-level
+  // hotkey would preventDefault every Escape page-wide and race sibling
+  // surfaces (v0 Dialog cancel, other dropdowns).
+  useToggleScope(() => model.value && !hoverable, () => {
+    useClickOutside(root, close)
+  })
+
+  // Esc is scoped to the dropdown subtree: nearest surface wins, so a
+  // dropdown open inside a modal closes without also closing the modal.
+  function onKeydown (event: KeyboardEvent) {
+    if (event.key !== 'Escape' || !model.value || hoverable) return
+    event.stopPropagation()
+    close()
+  }
+
+  const trigger = toRef((): BuDropdownTriggerSlotProps => ({
+    isOpen: model.value,
+    toggle: onToggle,
+    attrs: {
+      'aria-haspopup': 'true',
+      'aria-controls': id,
+      'aria-expanded': model.value ? 'true' : 'false',
+      'onClick': onToggle,
+    },
+  }))
+
+  const slotProps = toRef((): BuDropdownSlotProps => ({
+    isOpen: model.value,
+    close,
+    item: menu ? { role: 'menuitem' } : {},
+  }))
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="dropdown"
+    :class="{
+      'is-active': model,
+      'is-hoverable': hoverable,
+      'is-right': right,
+      'is-up': up,
+    }"
+    @keydown="onKeydown"
+  >
+    <div class="dropdown-trigger">
+      <slot name="trigger" v-bind="trigger" />
+    </div>
+
+    <div
+      :id
+      class="dropdown-menu"
+      :role="menu ? 'menu' : undefined"
+    >
+      <div class="dropdown-content">
+        <slot v-bind="slotProps" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuDropdown/index.ts b/packages/bulma/src/components/BuDropdown/index.ts
new file mode 100644
index 0000000000..9747daca71
--- /dev/null
+++ b/packages/bulma/src/components/BuDropdown/index.ts
@@ -0,0 +1,3 @@
+export type { BuDropdownProps, BuDropdownSlotProps, BuDropdownTriggerSlotProps } from './BuDropdown.vue'
+
+export { default as BuDropdown } from './BuDropdown.vue'
diff --git a/packages/bulma/src/components/BuField/BuField.browser.test.ts b/packages/bulma/src/components/BuField/BuField.browser.test.ts
new file mode 100644
index 0000000000..29dd7bbbad
--- /dev/null
+++ b/packages/bulma/src/components/BuField/BuField.browser.test.ts
@@ -0,0 +1,78 @@
+// Conformance: BuField layouts against the form-general fixtures.
+import { afterEach, describe, it } from 'vitest'
+
+// Context
+import BuField from './BuField.vue'
+
+// Utilities
+import { createApp, h } from 'vue'
+
+import { conform } from '../../../harness/conform'
+import { BuControl } from '../BuControl'
+import { BuHelp } from '../BuHelp'
+import { BuInput } from '../BuInput'
+import { BuLabel } from '../BuLabel'
+
+const cleanups: (() => void)[] = []
+
+function mount (render: () => unknown): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  cleanups.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()!()
+})
+
+// v0 InputControl merges `value` in and it lands as a real attribute the
+// fixture lacks — tolerate it explicitly.
+const VALUE = { ignoreAttrs: ['value'] }
+
+describe('buField', () => {
+  it('conforms to the basic field fixture', () => {
+    const host = mount(() => h(BuField, null, () => [
+      h(BuLabel, null, () => 'Label'),
+      h(BuControl, null, () => h(BuInput, { placeholder: 'Text input' })),
+      h(BuHelp, null, () => 'This is a help text'),
+    ]))
+
+    conform(host.firstElementChild!, 'form-general:basic field', VALUE)
+  })
+
+  it('conforms to the addons fixture', () => {
+    const host = mount(() => h(BuField, { addons: true }, () => [
+      h(BuControl, null, () => h(BuInput, { placeholder: 'Find a repository' })),
+      h(BuControl, null, () => h('button', { class: 'button is-info' }, 'Search')),
+    ]))
+
+    conform(host.firstElementChild!, 'form-general:addons', VALUE)
+  })
+
+  it('conforms to the grouped fixture', () => {
+    const host = mount(() => h(BuField, { grouped: true }, () => [
+      h(BuControl, { as: 'p' }, () => h('button', { class: 'button is-primary' }, 'Submit')),
+      h(BuControl, { as: 'p' }, () => h('a', { class: 'button is-light' }, 'Cancel')),
+    ]))
+
+    conform(host.firstElementChild!, 'form-general:grouped controls')
+  })
+
+  it('conforms to the horizontal fixture', () => {
+    const host = mount(() => h(BuField, { horizontal: true, size: 'normal' }, {
+      label: () => h(BuLabel, null, () => 'Subject'),
+      default: () => h(BuField, null, () => [
+        h(BuControl, null, () => h(BuInput, { color: 'danger', placeholder: 'e.g. Partnership opportunity' })),
+        h(BuHelp, { color: 'danger' }, () => 'This field is required'),
+      ]),
+    }))
+
+    conform(host.firstElementChild!, 'form-general:horizontal form', VALUE)
+  })
+})
diff --git a/packages/bulma/src/components/BuField/BuField.vue b/packages/bulma/src/components/BuField/BuField.vue
new file mode 100644
index 0000000000..a20928ba6c
--- /dev/null
+++ b/packages/bulma/src/components/BuField/BuField.vue
@@ -0,0 +1,71 @@
+/**
+ * @module BuField
+ *
+ * @remarks
+ * Bulma `.field` wrapper — pure markup, no v0 state. Supports addons,
+ * grouped, and horizontal layouts per bulma.io/documentation/form/general.
+ */
+
+<script lang="ts">
+  // Framework
+  import { isString } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  export type BuFieldSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuFieldProps {
+    /** Attached controls: `has-addons` (+ `has-addons-centered` / `has-addons-right`) */
+    addons?: boolean | 'centered' | 'right'
+    /** Grouped controls: `is-grouped` (+ `is-grouped-centered` / `is-grouped-right` / `is-grouped-multiline`) */
+    grouped?: boolean | 'centered' | 'right' | 'multiline'
+    /** Horizontal layout: `is-horizontal` with `.field-label` + `.field-body` */
+    horizontal?: boolean
+    /** Size class on `.field-label` when horizontal: `is-{size}` */
+    size?: BuFieldSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuField' })
+
+  defineSlots<{
+    default: () => any
+    label?: () => any
+  }>()
+
+  const {
+    addons = false,
+    grouped = false,
+    horizontal = false,
+    size,
+  } = defineProps<BuFieldProps>()
+
+  const classes = toRef(() => [
+    addons && 'has-addons',
+    isString(addons) && `has-addons-${addons}`,
+    grouped && 'is-grouped',
+    isString(grouped) && `is-grouped-${grouped}`,
+    horizontal && 'is-horizontal',
+  ])
+</script>
+
+<template>
+  <div class="field" :class="classes">
+    <template v-if="horizontal">
+      <div class="field-label" :class="size && `is-${size}`">
+        <slot name="label" />
+      </div>
+
+      <div class="field-body">
+        <slot />
+      </div>
+    </template>
+
+    <template v-else>
+      <slot name="label" />
+      <slot />
+    </template>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuField/index.ts b/packages/bulma/src/components/BuField/index.ts
new file mode 100644
index 0000000000..8918d1eb24
--- /dev/null
+++ b/packages/bulma/src/components/BuField/index.ts
@@ -0,0 +1,3 @@
+export { default as BuField } from './BuField.vue'
+
+export type { BuFieldProps, BuFieldSize } from './BuField.vue'
diff --git a/packages/bulma/src/components/BuFile/BuFile.browser.test.ts b/packages/bulma/src/components/BuFile/BuFile.browser.test.ts
new file mode 100644
index 0000000000..5155575d01
--- /dev/null
+++ b/packages/bulma/src/components/BuFile/BuFile.browser.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest'
+
+// Components
+import { BuFile } from './index'
+
+// Utilities
+import { createApp, h, nextTick } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+function mount (render: () => ReturnType<typeof h>) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+function pick (el: Element, filename: string) {
+  const control = el.querySelector('input')!
+  const transfer = new DataTransfer()
+  transfer.items.add(new File(['content'], filename, { type: 'text/plain' }))
+  control.files = transfer.files
+  control.dispatchEvent(new Event('change'))
+}
+
+describe('buFile', () => {
+  it('should conform to the Bulma file fixtures', () => {
+    const basic = mount(() => h(BuFile, { name: 'resume' }))
+    conform(basic.el, 'form-file')
+    basic.unmount()
+
+    const named = mount(() => h(BuFile, { filename: true, id: 'file-js-example', name: 'resume' }))
+    // The docs fixture hooks its JS by an id on the root div; BuFile's `id`
+    // targets the native input (label association), so skip id here.
+    conform(named.el, 'form-file:js example', { ignoreAttrs: ['id'] })
+    named.unmount()
+  })
+
+  it('should update the file name from the selected file', async () => {
+    const selected: (FileList | null)[] = []
+    const { el, unmount } = mount(() => h(BuFile, {
+      filename: true,
+      name: 'resume',
+      onChange: (files: FileList | null) => selected.push(files),
+    }))
+
+    expect(el.querySelector('.file-name')!.textContent!.trim()).toBe('No file uploaded')
+
+    pick(el, 'hello.txt')
+    await nextTick()
+
+    expect(el.querySelector('.file-name')!.textContent!.trim()).toBe('hello.txt')
+    expect(selected).toHaveLength(1)
+    expect(selected[0]![0].name).toBe('hello.txt')
+    unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuFile/BuFile.vue b/packages/bulma/src/components/BuFile/BuFile.vue
new file mode 100644
index 0000000000..b3f3627b09
--- /dev/null
+++ b/packages/bulma/src/components/BuFile/BuFile.vue
@@ -0,0 +1,209 @@
+<script lang="ts">
+  // Framework
+  import { createInput, isNull } from '@vuetify/v0'
+
+  // Utilities
+  import { createValidateOn } from '../../utilities/validate'
+  import { shallowReadonly, shallowRef, toRef, useAttrs, useTemplateRef } from 'vue'
+
+  // Types
+  import type { ID, InputOptions, ValidateOn } from '@vuetify/v0'
+  import type { ShallowRef, StyleValue } from 'vue'
+
+  export type BuFileColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+  export type BuFileSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuFileProps {
+    /** Renders `is-boxed` — block layout with the icon above the label. */
+    boxed?: boolean
+    /** Renders `is-centered`. */
+    centered?: boolean
+    /** Color modifier rendered as `is-{color}` on the root. */
+    color?: BuFileColor
+    /** Disables the native file input. */
+    disabled?: boolean
+    /** Manual error state override — forces invalid. */
+    error?: boolean
+    /** Manual error messages — merged with rule-based errors. */
+    errorMessages?: string | string[]
+    /** Renders `has-name` plus the `.file-name` span showing the selected file(s). */
+    filename?: boolean
+    /** Associate with a form by id. Snapshotted at setup (createInput takes a plain value). */
+    form?: string
+    /** Renders `is-fullwidth`. */
+    fullwidth?: boolean
+    /** Unique identifier for the native input (auto-generated if omitted). Snapshotted at setup. */
+    id?: ID
+    /** Form field name. Snapshotted at setup (createInput takes a plain value). */
+    name?: string
+    /** Text shown in `.file-name` before a file is selected. */
+    placeholder?: string
+    /** Whether required. Snapshotted at setup for validation; the DOM attr stays reactive. */
+    required?: boolean
+    /** Renders `is-right` — CTA on the right of the file name. */
+    right?: boolean
+    /** Validation rules. Snapshotted at setup (createInput takes a plain value). */
+    rules?: InputOptions['rules']
+    /** Size modifier rendered as `is-{size}` (emitted only when explicitly passed). */
+    size?: BuFileSize
+    /** When to trigger validation. */
+    validateOn?: ValidateOn
+  }
+
+  export interface BuFileSlotProps {
+    /** Merged error messages. */
+    errors: string[]
+    /** Currently selected files (null until a selection is made). */
+    files: FileList | null
+    /** Whether the native input is focused. */
+    isFocused: boolean
+    /** Whether the field is valid. */
+    isValid: boolean | null
+    /** Text currently shown in `.file-name`. */
+    label: string
+  }
+
+  export interface BuFileExpose {
+    /** Currently selected files (null until a selection is made). */
+    files: Readonly<ShallowRef<FileList | null>>
+    /** Clear the selection — resets both the v0 value and the native input. */
+    clear: () => void
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuFile', inheritAttrs: false })
+
+  // class/style merge onto the div.file root; all other fallthrough attrs
+  // (multiple, accept, aria-*, data-testid, …) target the native file input.
+  const attrs = useAttrs()
+  const rest = toRef(() => Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),
+  ))
+  const style = toRef(() => attrs.style as StyleValue | undefined)
+
+  defineSlots<{
+    default: (props: BuFileSlotProps) => any
+    icon: () => any
+  }>()
+
+  const emit = defineEmits<{
+    change: [files: FileList | null]
+  }>()
+
+  const {
+    boxed = false,
+    centered = false,
+    color,
+    disabled = false,
+    error = false,
+    errorMessages,
+    filename = false,
+    form,
+    fullwidth = false,
+    id,
+    name,
+    placeholder = 'No file uploaded',
+    required,
+    right = false,
+    rules = [],
+    size,
+    validateOn = 'blur',
+  } = defineProps<BuFileProps>()
+
+  const files = shallowRef<FileList | null>(null)
+  const control = useTemplateRef<HTMLInputElement>('control')
+
+  const input = createInput<FileList | null>({
+    value: files,
+    id,
+    name,
+    form,
+    required,
+    disabled: () => disabled,
+    rules,
+    error: () => error,
+    errorMessages: () => errorMessages,
+    dirty: value => !isNull(value) && value.length > 0,
+  })
+
+  const label = toRef(() => {
+    const list = files.value
+    if (isNull(list) || list.length === 0) return placeholder
+    return Array.from(list, file => file.name).join(', ')
+  })
+
+  const classes = toRef(() => [
+    'file',
+    {
+      'has-name': filename,
+      'is-boxed': boxed,
+      'is-centered': centered,
+      'is-danger': input.isValid.value === false,
+      'is-fullwidth': fullwidth,
+      'is-right': right,
+    },
+    color && `is-${color}`,
+    size && `is-${size}`,
+  ])
+
+  const slotProps = toRef((): BuFileSlotProps => ({
+    errors: input.errors.value,
+    files: files.value,
+    isFocused: input.isFocused.value,
+    isValid: input.isValid.value,
+    label: label.value,
+  }))
+
+  const { should, onFocus, onBlur } = createValidateOn(input, () => validateOn)
+
+  function onChange (event: Event) {
+    files.value = (event.target as HTMLInputElement).files
+    emit('change', files.value)
+    if (should('input')) input.validate()
+  }
+
+  function clear () {
+    files.value = null
+    if (control.value) control.value.value = ''
+    emit('change', null)
+  }
+
+  defineExpose<BuFileExpose>({ files: shallowReadonly(files), clear })
+</script>
+
+<template>
+  <div :class="[classes, attrs.class]" :style>
+    <label class="file-label">
+      <input
+        :id="String(input.id)"
+        ref="control"
+        v-bind="rest"
+        :aria-invalid="input.isValid.value === false || undefined"
+        class="file-input"
+        :disabled="disabled || undefined"
+        :form
+        :name
+        :required="required || undefined"
+        type="file"
+        @blur="onBlur"
+        @change="onChange"
+        @focus="onFocus"
+      >
+
+      <span class="file-cta">
+        <span class="file-icon">
+          <slot name="icon">
+            <i class="fas fa-upload" />
+          </slot>
+        </span>
+
+        <span class="file-label">
+          <slot v-bind="slotProps">Choose a file…</slot>
+        </span>
+      </span>
+
+      <span v-if="filename" class="file-name">{{ label }}</span>
+    </label>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuFile/index.ts b/packages/bulma/src/components/BuFile/index.ts
new file mode 100644
index 0000000000..1071d8c416
--- /dev/null
+++ b/packages/bulma/src/components/BuFile/index.ts
@@ -0,0 +1,2 @@
+export type { BuFileColor, BuFileExpose, BuFileProps, BuFileSize, BuFileSlotProps } from './BuFile.vue'
+export { default as BuFile } from './BuFile.vue'
diff --git a/packages/bulma/src/components/BuHelp/BuHelp.browser.test.ts b/packages/bulma/src/components/BuHelp/BuHelp.browser.test.ts
new file mode 100644
index 0000000000..25a2c6162e
--- /dev/null
+++ b/packages/bulma/src/components/BuHelp/BuHelp.browser.test.ts
@@ -0,0 +1,91 @@
+// Conformance: BuHelp in the validation-state fixture, plus wired error mode
+// through a renderless Input.Error inside an ambient Input.Root context.
+import { afterEach, describe, expect, it } from 'vitest'
+
+// Framework
+import { InputRoot } from '@vuetify/v0'
+
+// Context
+import BuHelp from './BuHelp.vue'
+
+// Utilities
+import { createApp, h, nextTick } from 'vue'
+
+import { conform } from '../../../harness/conform'
+import { BuControl } from '../BuControl'
+import { BuField } from '../BuField'
+import { BuInput } from '../BuInput'
+import { BuLabel } from '../BuLabel'
+
+const cleanups: (() => void)[] = []
+
+function mount (render: () => unknown): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  cleanups.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()!()
+})
+
+function icon (side: string, glyph: string) {
+  return h('span', { class: `icon is-small is-${side}` }, h('i', { class: `fas fa-${glyph}` }))
+}
+
+describe('buHelp', () => {
+  it('conforms to the validation state fixture', () => {
+    const host = mount(() => h(BuField, null, () => [
+      h(BuLabel, null, () => 'Email'),
+      h(BuControl, { icons: 'both' }, () => [
+        h(BuInput, { color: 'danger', type: 'email', placeholder: 'Email input', modelValue: 'hello@' }),
+        icon('left', 'envelope'),
+        icon('right', 'exclamation-triangle'),
+      ]),
+      h(BuHelp, { color: 'danger' }, () => 'This email is invalid'),
+    ]))
+
+    // `value` lands as a DOM property, not an attribute — skip it on both sides
+    conform(host.firstElementChild!, 'form-general:validation state', { ignoreAttrs: ['value'] })
+  })
+
+  it('wires error mode to the ambient Input.Root via Input.Error', async () => {
+    const host = mount(() => h(
+      InputRoot,
+      { renderless: true, id: 'field', error: true, errorMessages: 'This email is invalid' },
+      () => [
+        h(BuControl, null, () => h(BuInput)),
+        h(BuHelp, { validation: true }),
+      ],
+    ))
+
+    // Input.Error registers after the control's first render — wait one tick
+    // for aria-errormessage to appear
+    await nextTick()
+
+    const help = host.querySelector('p.help')!
+    expect(help.classList.contains('is-danger')).toBe(true)
+    expect(help.textContent).toBe('This email is invalid')
+    expect(help.id).toBe('field-error')
+    expect(help.getAttribute('aria-live')).toBe('polite')
+
+    // Error registration surfaces aria-errormessage + is-danger on the control
+    const input = host.querySelector('input')!
+    expect(input.getAttribute('aria-errormessage')).toBe('field-error')
+    expect(input.classList.contains('is-danger')).toBe(true)
+  })
+
+  it('renders plain help text without an ambient context', () => {
+    const host = mount(() => h(BuHelp, null, () => 'This is a help text'))
+
+    const help = host.querySelector('p.help')!
+    expect(help.textContent).toBe('This is a help text')
+    expect(help.classList.contains('is-danger')).toBe(false)
+  })
+})
diff --git a/packages/bulma/src/components/BuHelp/BuHelp.vue b/packages/bulma/src/components/BuHelp/BuHelp.vue
new file mode 100644
index 0000000000..2188df8081
--- /dev/null
+++ b/packages/bulma/src/components/BuHelp/BuHelp.vue
@@ -0,0 +1,75 @@
+/**
+ * @module BuHelp
+ *
+ * @remarks
+ * Bulma `.help` — plain help text by default. With `validation` and an
+ * ambient `Input.Root` context, wraps a renderless `Input.Error` so the error
+ * id, `aria-live`, and `aria-errormessage` registration wire up automatically.
+ * (`error` is reserved package-wide for the force-invalid override on form
+ * controls, so the display switch is named `validation`.)
+ */
+
+<script lang="ts">
+  // Framework
+  import { InputError, isNull, useInputRoot } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  // Types
+  import type { InputRootContext } from '@vuetify/v0'
+
+  export type BuHelpColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+
+  export interface BuHelpProps {
+    /** Color modifier: `is-{color}` (defaults to `danger` in validation mode) */
+    color?: BuHelpColor
+    /** Namespace of the ambient Input.Root context */
+    namespace?: string
+    /** Render the ambient Input.Root validation errors via Input.Error */
+    validation?: boolean
+  }
+
+  export interface BuHelpSlotProps {
+    /** Validation errors from the ambient Input.Root (empty when unwired) */
+    errors: string[]
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuHelp' })
+
+  defineSlots<{
+    default?: (props: BuHelpSlotProps) => any
+  }>()
+
+  const {
+    color,
+    namespace = 'v0:input:root',
+    validation = false,
+  } = defineProps<BuHelpProps>()
+
+  // Optional injection: error wiring engages only inside an Input.Root scope
+  // (a null default returns instead of throwing — only undefined throws)
+  const root = useInputRoot(namespace, null as unknown as InputRootContext) as InputRootContext | null
+
+  const wired = toRef(() => validation && !isNull(root))
+  const tone = toRef(() => color ?? (validation ? 'danger' : undefined))
+</script>
+
+<template>
+  <InputError
+    v-if="wired"
+    v-slot="{ errors, attrs }"
+    :namespace
+    renderless
+  >
+    <p v-bind="attrs" class="help" :class="tone && `is-${tone}`">
+      <slot :errors>{{ errors.join(' ') }}</slot>
+    </p>
+  </InputError>
+
+  <p v-else class="help" :class="tone && `is-${tone}`">
+    <slot :errors="[]" />
+  </p>
+</template>
diff --git a/packages/bulma/src/components/BuHelp/index.ts b/packages/bulma/src/components/BuHelp/index.ts
new file mode 100644
index 0000000000..7ed290241b
--- /dev/null
+++ b/packages/bulma/src/components/BuHelp/index.ts
@@ -0,0 +1,3 @@
+export { default as BuHelp } from './BuHelp.vue'
+
+export type { BuHelpColor, BuHelpProps, BuHelpSlotProps } from './BuHelp.vue'
diff --git a/packages/bulma/src/components/BuInput/BuInput.browser.test.ts b/packages/bulma/src/components/BuInput/BuInput.browser.test.ts
new file mode 100644
index 0000000000..6dd4766e21
--- /dev/null
+++ b/packages/bulma/src/components/BuInput/BuInput.browser.test.ts
@@ -0,0 +1,90 @@
+// Conformance: BuInput against the form-input fixtures, plus v-model and
+// modifier behavior.
+import { afterEach, describe, expect, it } from 'vitest'
+
+// Context
+import BuInput from './BuInput.vue'
+
+// Utilities
+import { createApp, h, shallowRef } from 'vue'
+
+import { conform } from '../../../harness/conform'
+import { BuControl } from '../BuControl'
+
+// v0 InputControl merges `value` in and it lands as a real attribute the
+// fixture lacks — tolerate it explicitly.
+const VALUE = { ignoreAttrs: ['value'] }
+
+const cleanups: (() => void)[] = []
+
+function mount (render: () => unknown): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  cleanups.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()!()
+})
+
+describe('buInput', () => {
+  it('conforms to the bare input fixture', () => {
+    const host = mount(() => h(BuInput, { placeholder: 'Text input' }))
+
+    conform(host.firstElementChild!, 'form-input:basic input', VALUE)
+  })
+
+  it('conforms to the color fixture', () => {
+    const host = mount(() => h(BuInput, { color: 'primary', placeholder: 'Primary input' }))
+
+    conform(host.firstElementChild!, 'form-input:color primary', VALUE)
+  })
+
+  it('conforms to the rounded fixture', () => {
+    const host = mount(() => h(BuInput, { rounded: true, placeholder: 'Rounded input' }))
+
+    conform(host.firstElementChild!, 'form-input:style rounded', VALUE)
+  })
+
+  it('conforms to the disabled fixture', () => {
+    const host = mount(() => h(BuControl, null, () => h(BuInput, { disabled: true, placeholder: 'Disabled input' })))
+
+    conform(host.firstElementChild!, 'form-input:state disabled', VALUE)
+  })
+
+  it('updates v-model on input', () => {
+    const model = shallowRef('')
+    const host = mount(() => h(BuInput, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: string) => {
+        model.value = value
+      },
+    }))
+
+    const input = host.querySelector('input')!
+    input.value = 'hello'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+
+    expect(model.value).toBe('hello')
+  })
+
+  it('renders is-static and readonly for plaintext', () => {
+    const host = mount(() => h(BuInput, { plaintext: true }))
+
+    const input = host.querySelector('input')!
+    expect(input.classList.contains('is-static')).toBe(true)
+    expect(input.hasAttribute('readonly')).toBe(true)
+  })
+
+  it('renders is-danger when error is forced', () => {
+    const host = mount(() => h(BuInput, { error: true }))
+
+    expect(host.querySelector('input')!.classList.contains('is-danger')).toBe(true)
+  })
+})
diff --git a/packages/bulma/src/components/BuInput/BuInput.vue b/packages/bulma/src/components/BuInput/BuInput.vue
new file mode 100644
index 0000000000..c6fce27e81
--- /dev/null
+++ b/packages/bulma/src/components/BuInput/BuInput.vue
@@ -0,0 +1,160 @@
+/**
+ * @module BuInput
+ *
+ * @remarks
+ * Bulma `.input` — a renderless `Input.Root` around a native `Input.Control`,
+ * so no wrapper element lands (Bulma's `.input` is bare-capable). Inside an
+ * existing `Input.Root` scope the wrapper is skipped and the control binds to
+ * the ambient context instead. In that ambient mode the root owns the entire
+ * behavioral surface: `v-model`, `type`, `disabled`, `readonly`, `required`,
+ * `name`, `form`, `id`, `label`, and all validation props passed to BuInput
+ * are ignored — only the presentational modifiers (`color`, `size`,
+ * `rounded`, `plaintext`) still apply, and `plaintext` is then class-only
+ * (set `readonly` on the ambient Input.Root for the attribute).
+ */
+
+<script lang="ts">
+  // Framework
+  import { InputControl, InputRoot, useInputRoot } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useAttrs, watch } from 'vue'
+
+  // Types
+  import type { ID, InputRootContext, InputRootProps } from '@vuetify/v0'
+
+  export type BuInputColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+  export type BuInputSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuInputProps {
+    /** Color modifier: `is-{color}` */
+    color?: BuInputColor
+    /** Disables the input */
+    disabled?: boolean
+    /** Manual error state override — forces `is-danger` */
+    error?: boolean
+    /** Manual error messages — merged with rule-based errors */
+    errorMessages?: InputRootProps['errorMessages']
+    /** Associate with a form by id */
+    form?: string
+    /** Unique identifier (auto-generated when omitted) */
+    id?: ID
+    /** Accessible label */
+    label?: string
+    /** Form field name */
+    name?: string
+    /** Namespace of the Input.Root context */
+    namespace?: string
+    /**
+     * Static text presentation: `is-static` + readonly. Inside an ambient
+     * `Input.Root` this is class-only — the readonly attr is owned by the
+     * ambient root (its control attrs always win the merge), so set
+     * `readonly` there.
+     */
+    plaintext?: boolean
+    /** Makes the input readonly */
+    readonly?: boolean
+    /** Marks the input required */
+    required?: boolean
+    /** Rounded corners: `is-rounded` */
+    rounded?: boolean
+    /** Validation rules */
+    rules?: InputRootProps['rules']
+    /** Size modifier: `is-{size}` (emitted only when passed) */
+    size?: BuInputSize
+    /** Native input type */
+    type?: string
+    /** When to trigger validation (v0 default: blur) */
+    validateOn?: InputRootProps['validateOn']
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuInput', inheritAttrs: false })
+
+  const attrs = useAttrs()
+
+  defineEmits<{
+    'update:model-value': [value: string]
+    'update:focused': [value: boolean]
+  }>()
+
+  const {
+    color,
+    disabled = false,
+    error = false,
+    errorMessages,
+    form,
+    id,
+    label,
+    name,
+    namespace = 'v0:input:root',
+    plaintext = false,
+    readonly = false,
+    required,
+    rounded = false,
+    rules,
+    size,
+    type = 'text',
+    validateOn,
+  } = defineProps<BuInputProps>()
+
+  const model = defineModel<string>({ default: '' })
+  const focused = defineModel<boolean>('focused', { default: false })
+
+  // Optional injection: inside an ambient Input.Root the control binds to it
+  // directly and no second root is created (a nested root would shadow it).
+  // A null default returns instead of throwing — only undefined throws.
+  const root = useInputRoot(namespace, null as unknown as InputRootContext) as InputRootContext | null
+
+  if (root) {
+    watch(root.isFocused, value => {
+      focused.value = value
+    })
+  }
+
+  const classes = toRef(() => [
+    color && `is-${color}`,
+    size && `is-${size}`,
+    rounded && 'is-rounded',
+    plaintext && 'is-static',
+  ])
+</script>
+
+<template>
+  <InputRoot
+    v-if="!root"
+    :id
+    v-slot="{ isValid }"
+    v-model="model"
+    v-model:focused="focused"
+    :disabled
+    :error
+    :error-messages
+    :form
+    :label
+    :name
+    :namespace
+    :readonly="plaintext || readonly"
+    renderless
+    :required
+    :rules
+    :type
+    :validate-on
+  >
+    <InputControl
+      v-bind="attrs"
+      class="input"
+      :class="[classes, { 'is-danger': isValid === false }]"
+      :namespace
+    />
+  </InputRoot>
+
+  <InputControl
+    v-else
+    v-bind="attrs"
+    class="input"
+    :class="[classes, { 'is-danger': root.isValid.value === false }]"
+    :namespace
+  />
+</template>
diff --git a/packages/bulma/src/components/BuInput/index.ts b/packages/bulma/src/components/BuInput/index.ts
new file mode 100644
index 0000000000..ee8720b3a2
--- /dev/null
+++ b/packages/bulma/src/components/BuInput/index.ts
@@ -0,0 +1,3 @@
+export { default as BuInput } from './BuInput.vue'
+
+export type { BuInputColor, BuInputProps, BuInputSize } from './BuInput.vue'
diff --git a/packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts b/packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts
new file mode 100644
index 0000000000..581a9bf79f
--- /dev/null
+++ b/packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts
@@ -0,0 +1,66 @@
+// Conformance: BuLabel inside the horizontal is-static fixture, plus wired
+// `for` resolution from an ambient Input.Root context.
+import { afterEach, describe, expect, it } from 'vitest'
+
+// Framework
+import { InputRoot } from '@vuetify/v0'
+
+// Context
+import BuLabel from './BuLabel.vue'
+
+// Utilities
+import { createApp, h } from 'vue'
+
+import { conform } from '../../../harness/conform'
+import { BuControl } from '../BuControl'
+import { BuField } from '../BuField'
+import { BuInput } from '../BuInput'
+
+const cleanups: (() => void)[] = []
+
+function mount (render: () => unknown): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  cleanups.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()!()
+})
+
+describe('buLabel', () => {
+  it('conforms to the horizontal is-static fixture', () => {
+    const host = mount(() => h(BuField, { horizontal: true, size: 'normal' }, {
+      label: () => h(BuLabel, null, () => 'From'),
+      default: () => h(BuField, null, () => h(BuControl, { as: 'p' }, () => (
+        h(BuInput, { plaintext: true, type: 'email', modelValue: 'me@example.com' })
+      ))),
+    }))
+
+    // `value` lands as a DOM property, not an attribute — skip it on both sides
+    conform(host.firstElementChild!, 'form-input:static', { ignoreAttrs: ['value'] })
+  })
+
+  it('resolves `for` from an ambient Input.Root context', () => {
+    const host = mount(() => h(InputRoot, { renderless: true, id: 'email-1' }, () => [
+      h(BuLabel, null, () => 'Email'),
+      h(BuControl, null, () => h(BuInput)),
+    ]))
+
+    const label = host.querySelector('label.label')!
+    expect(label.getAttribute('for')).toBe('email-1')
+    expect(host.querySelector('input')!.id).toBe('email-1')
+  })
+
+  it('prefers an explicit `for` prop', () => {
+    const host = mount(() => h(BuLabel, { for: 'other' }, () => 'Name'))
+
+    expect(host.querySelector('label.label')!.getAttribute('for')).toBe('other')
+  })
+})
diff --git a/packages/bulma/src/components/BuLabel/BuLabel.vue b/packages/bulma/src/components/BuLabel/BuLabel.vue
new file mode 100644
index 0000000000..3305fd78ea
--- /dev/null
+++ b/packages/bulma/src/components/BuLabel/BuLabel.vue
@@ -0,0 +1,55 @@
+/**
+ * @module BuLabel
+ *
+ * @remarks
+ * Bulma `.label` — hand-rolled markup (v0 ships no Input.Label part). When an
+ * ambient `Input.Root` context exists, `for` falls back to the input's id.
+ */
+
+<script lang="ts">
+  // Framework
+  import { useInputRoot } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  // Types
+  import type { InputRootContext } from '@vuetify/v0'
+
+  export type BuLabelSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuLabelProps {
+    /** Explicit target id — falls back to the ambient Input.Root id */
+    for?: string
+    /** Namespace of the ambient Input.Root context */
+    namespace?: string
+    /** Size modifier: `is-{size}` */
+    size?: BuLabelSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuLabel' })
+
+  defineSlots<{
+    default: () => any
+  }>()
+
+  const {
+    for: _for,
+    namespace = 'v0:input:root',
+    size,
+  } = defineProps<BuLabelProps>()
+
+  // Optional injection: standalone labels render without a `for` attribute
+  // (a null default returns instead of throwing — only undefined throws)
+  const root = useInputRoot(namespace, null as unknown as InputRootContext) as InputRootContext | null
+
+  const target = toRef(() => _for ?? (root ? String(root.id) : undefined))
+</script>
+
+<template>
+  <label class="label" :class="size && `is-${size}`" :for="target">
+    <slot />
+  </label>
+</template>
diff --git a/packages/bulma/src/components/BuLabel/index.ts b/packages/bulma/src/components/BuLabel/index.ts
new file mode 100644
index 0000000000..a5f0bb3981
--- /dev/null
+++ b/packages/bulma/src/components/BuLabel/index.ts
@@ -0,0 +1,3 @@
+export { default as BuLabel } from './BuLabel.vue'
+
+export type { BuLabelProps, BuLabelSize } from './BuLabel.vue'
diff --git a/packages/bulma/src/components/BuMenu/BuMenu.browser.test.ts b/packages/bulma/src/components/BuMenu/BuMenu.browser.test.ts
new file mode 100644
index 0000000000..a1f595b0c6
--- /dev/null
+++ b/packages/bulma/src/components/BuMenu/BuMenu.browser.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest'
+
+import { BuMenu } from './index'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+// Types
+import type { BuMenuSection } from './index'
+
+import { conform } from '../../../harness/conform'
+
+const sections: BuMenuSection<string>[] = [
+  {
+    label: 'General',
+    items: [
+      { label: 'Dashboard' },
+      { label: 'Customers' },
+    ],
+  },
+  {
+    label: 'Administration',
+    items: [
+      { label: 'Team Settings' },
+      {
+        label: 'Manage Your Team',
+        children: [
+          { label: 'Members' },
+          { label: 'Plugins' },
+          { label: 'Add a member' },
+        ],
+      },
+      { label: 'Invitations' },
+      { label: 'Cloud Storage Environment Settings' },
+      { label: 'Authentication' },
+    ],
+  },
+  {
+    label: 'Transactions',
+    items: [
+      { label: 'Payments' },
+      { label: 'Transfers' },
+      { label: 'Balance' },
+    ],
+  },
+]
+
+function mount (component: Parameters<typeof createApp>[0]) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(component)
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+describe('buMenu', () => {
+  it('conforms to the menu fixture', () => {
+    const { el, unmount } = mount({
+      render: () => h(BuMenu as any, { items: sections, modelValue: 'Manage Your Team' }),
+    })
+    conform(el, 'menu')
+    unmount()
+  })
+
+  it('drives is-active on the clicked anchor through v-model', async () => {
+    const active = shallowRef<string>()
+    const { el, unmount } = mount({
+      setup () {
+        return () => h(BuMenu as any, {
+          'items': sections,
+          'modelValue': active.value,
+          'onUpdate:modelValue': (value: string) => {
+            active.value = value
+          },
+        })
+      },
+    })
+
+    const anchors = [...el.querySelectorAll('a')]
+    const members = anchors.find(a => a.textContent === 'Members')!
+    members.click()
+    await nextTick()
+    expect(active.value).toBe('Members')
+    expect(members.classList.contains('is-active')).toBe(true)
+
+    const payments = anchors.find(a => a.textContent === 'Payments')!
+    payments.click()
+    await nextTick()
+    expect(active.value).toBe('Payments')
+    expect(members.classList.contains('is-active')).toBe(false)
+    expect(payments.classList.contains('is-active')).toBe(true)
+
+    unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuMenu/BuMenu.vue b/packages/bulma/src/components/BuMenu/BuMenu.vue
new file mode 100644
index 0000000000..76b3c395f5
--- /dev/null
+++ b/packages/bulma/src/components/BuMenu/BuMenu.vue
@@ -0,0 +1,112 @@
+<script lang="ts">
+  // Framework
+  import { Single } from '@vuetify/v0'
+
+  export interface BuMenuItem<T = unknown> {
+    /** Selection value — defaults to `label` when omitted. */
+    value?: T
+    /** Anchor text. */
+    label: string
+    /** Optional href for the anchor. */
+    href?: string
+    /** One level of nesting: rendered as a bare `<ul>` sibling of the anchor, always visible. */
+    children?: BuMenuItem<T>[]
+  }
+
+  export interface BuMenuSection<T = unknown> {
+    /** Optional `p.menu-label` heading for the section. */
+    label?: string
+    /** Items rendered as `ul.menu-list > li > a`. */
+    items: BuMenuItem<T>[]
+  }
+
+  export interface BuMenuProps<T = unknown> {
+    /** Alternating label + list sections. */
+    items?: BuMenuSection<T>[]
+  }
+</script>
+
+<script lang="ts" setup generic="T = unknown">
+  defineOptions({ name: 'BuMenu' })
+
+  defineSlots<{
+    default: () => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: T]
+  }>()
+
+  const { items = [] } = defineProps<BuMenuProps<T>>()
+
+  const model = defineModel<T>()
+
+  function onModel (value: T | T[] | undefined) {
+    model.value = value as T | undefined
+  }
+</script>
+
+<template>
+  <aside class="menu">
+    <Single.Root
+      :model-value="model"
+      @update:model-value="onModel"
+    >
+      <template
+        v-for="(section, index) in items"
+        :key="index"
+      >
+        <p
+          v-if="section.label"
+          class="menu-label"
+        >{{ section.label }}</p>
+
+        <ul class="menu-list">
+          <li
+            v-for="item in section.items"
+            :key="item.label"
+          >
+            <!--
+              Hand-picked bindings, not the Item attrs spread: aria-selected /
+              aria-disabled are invalid on role-less anchors (axe
+              aria-allowed-attr, critical) — data-selected keeps the data-attr
+              styling hook. Same convention as BuPanel; see CANON.
+            -->
+            <Single.Item
+              v-slot="{ isSelected, select }"
+              :value="item.value ?? item.label"
+            >
+              <a
+                :class="{ 'is-active': isSelected }"
+                :data-selected="isSelected || undefined"
+                :href="item.href"
+                @click="select"
+              >{{ item.label }}</a>
+            </Single.Item>
+
+            <ul v-if="item.children?.length">
+              <li
+                v-for="child in item.children"
+                :key="child.label"
+              >
+                <Single.Item
+                  v-slot="{ isSelected, select }"
+                  :value="child.value ?? child.label"
+                >
+                  <a
+                    :class="{ 'is-active': isSelected }"
+                    :data-selected="isSelected || undefined"
+                    :href="child.href"
+                    @click="select"
+                  >{{ child.label }}</a>
+                </Single.Item>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </template>
+
+      <slot />
+    </Single.Root>
+  </aside>
+</template>
diff --git a/packages/bulma/src/components/BuMenu/index.ts b/packages/bulma/src/components/BuMenu/index.ts
new file mode 100644
index 0000000000..4a32ca393f
--- /dev/null
+++ b/packages/bulma/src/components/BuMenu/index.ts
@@ -0,0 +1,3 @@
+export type { BuMenuItem, BuMenuProps, BuMenuSection } from './BuMenu.vue'
+
+export { default as BuMenu } from './BuMenu.vue'
diff --git a/packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts b/packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts
new file mode 100644
index 0000000000..d54dba5a45
--- /dev/null
+++ b/packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts
@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { BuMessage } from './index'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+let teardown: (() => void) | undefined
+
+function mount (node: () => any): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render: node })
+  app.mount(host)
+  teardown = () => {
+    app.unmount()
+    host.remove()
+  }
+  return host
+}
+
+afterEach(() => {
+  teardown?.()
+  teardown = undefined
+})
+
+function body () {
+  return [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
+    h('strong', 'Pellentesque risus mi'),
+    ', tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum ',
+    h('a', 'felis venenatis'),
+    ' efficitur.',
+  ]
+}
+
+describe('buMessage', () => {
+  it('should conform to the header and delete fixture', () => {
+    const host = mount(() => h(BuMessage, {}, {
+      header: () => h('p', 'Hello World'),
+      default: body,
+    }))
+
+    // v0's delete button correctly carries type="button"; the docs fixture omits it.
+    conform(host.firstElementChild!, 'message', { ignoreAttrs: ['type'] })
+  })
+
+  it('should conform to the body-only fixture', () => {
+    const host = mount(() => h(BuMessage, {}, { default: body }))
+
+    conform(host.firstElementChild!, 'message:body only')
+  })
+
+  it('should close and unmount when the delete button is clicked', async () => {
+    const open = shallowRef(true)
+    const host = mount(() => h(BuMessage, {
+      'modelValue': open.value,
+      'onUpdate:modelValue': (value: boolean) => {
+        open.value = value
+      },
+    }, {
+      header: () => h('p', 'Hello World'),
+      default: () => 'content',
+    }))
+
+    host.querySelector<HTMLButtonElement>('.delete')!.click()
+    await nextTick()
+
+    expect(open.value).toBe(false)
+
+    await nextTick()
+    await nextTick()
+
+    expect(host.querySelector('.message')).toBeNull()
+  })
+})
diff --git a/packages/bulma/src/components/BuMessage/BuMessage.vue b/packages/bulma/src/components/BuMessage/BuMessage.vue
new file mode 100644
index 0000000000..a899f5d68a
--- /dev/null
+++ b/packages/bulma/src/components/BuMessage/BuMessage.vue
@@ -0,0 +1,79 @@
+<script lang="ts">
+  // Framework
+  import { Presence } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useAttrs } from 'vue'
+
+  export interface BuMessageProps {
+    /** Bulma color modifier, rendered as `is-{color}`. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+    /** Bulma size modifier, rendered as `is-{size}`. */
+    size?: 'small' | 'normal' | 'medium' | 'large'
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuMessage', inheritAttrs: false })
+
+  defineSlots<{
+    /** Message body content. */
+    default?: () => any
+    /** Header content; when present renders `.message-header` with a delete button. */
+    header?: () => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: boolean]
+  }>()
+
+  const {
+    color,
+    size,
+  } = defineProps<BuMessageProps>()
+
+  const model = defineModel<boolean>({ default: true })
+
+  const attrs = useAttrs()
+
+  const classes = toRef(() => [
+    color && `is-${color}`,
+    size && `is-${size}`,
+  ])
+
+  function onDelete () {
+    model.value = false
+  }
+</script>
+
+<template>
+  <Presence
+    v-slot="{ attrs: state }"
+    v-model="model"
+  >
+    <article
+      class="message"
+      :class="classes"
+      :data-state="state['data-state']"
+      v-bind="attrs"
+    >
+      <div
+        v-if="$slots.header"
+        class="message-header"
+      >
+        <slot name="header" />
+
+        <button
+          aria-label="delete"
+          class="delete"
+          type="button"
+          @click="onDelete"
+        />
+      </div>
+
+      <div class="message-body">
+        <slot />
+      </div>
+    </article>
+  </Presence>
+</template>
diff --git a/packages/bulma/src/components/BuMessage/index.ts b/packages/bulma/src/components/BuMessage/index.ts
new file mode 100644
index 0000000000..9cd00e753e
--- /dev/null
+++ b/packages/bulma/src/components/BuMessage/index.ts
@@ -0,0 +1,3 @@
+export type { BuMessageProps } from './BuMessage.vue'
+
+export { default as BuMessage } from './BuMessage.vue'
diff --git a/packages/bulma/src/components/BuModal/BuModal.browser.test.ts b/packages/bulma/src/components/BuModal/BuModal.browser.test.ts
new file mode 100644
index 0000000000..a75cf3752e
--- /dev/null
+++ b/packages/bulma/src/components/BuModal/BuModal.browser.test.ts
@@ -0,0 +1,153 @@
+import { afterEach, describe, expect, it } from 'vitest'
+
+// Framework
+import { createStackPlugin } from '@vuetify/v0'
+
+import { BuModal } from './index'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+// Types
+import type { ShallowRef } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+const teardowns: (() => void)[] = []
+
+function mount (node: () => any): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render: node })
+  app.use(createStackPlugin())
+  app.mount(host)
+  teardowns.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+afterEach(() => {
+  while (teardowns.length > 0) {
+    teardowns.pop()!()
+  }
+})
+
+function slots () {
+  return {
+    header: () => 'Modal title',
+    footer: () => h('div', { class: 'buttons' }, [
+      h('button', { class: 'button is-success' }, 'Save changes'),
+      h('button', { class: 'button' }, 'Cancel'),
+    ]),
+  }
+}
+
+function modal (open: ShallowRef<boolean>, props: Record<string, unknown> = {}, children = {}): HTMLElement {
+  return mount(() => h(BuModal, {
+    'modelValue': open.value,
+    'onUpdate:modelValue': (value: boolean) => {
+      open.value = value
+    },
+    ...props,
+  }, children))
+}
+
+async function settle () {
+  await nextTick()
+  await nextTick()
+}
+
+// aria-label text is localized by v0; `style` carries the stack ticket's
+// z-index; Dialog.Close correctly emits type="button" the fixture omits.
+const TOLERATE = { ignoreAttrs: ['aria-label', 'style', 'type'] }
+
+describe('buModal', () => {
+  it('should conform to the modal-content fixture when open', () => {
+    const host = mount(() => h(BuModal, { modelValue: true }))
+
+    conform(host.firstElementChild!, 'modal', TOLERATE)
+  })
+
+  it('should conform to the modal-card fixture when open', () => {
+    const host = mount(() => h(BuModal, { card: true, modelValue: true }, slots()))
+
+    conform(host.firstElementChild!, 'modal:card', TOLERATE)
+
+    const panel = host.querySelector('.modal-card')!
+    const title = host.querySelector('.modal-card-title')!
+
+    expect(panel.getAttribute('aria-labelledby')).toBe(title.id)
+  })
+
+  it('should close on Escape from within the modal', async () => {
+    const open = shallowRef(true)
+    modal(open, { card: true }, slots())
+    await settle()
+
+    document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }))
+    await nextTick()
+
+    expect(open.value).toBe(false)
+  })
+
+  it('should focus the first focusable on open and restore focus on close', async () => {
+    const outside = document.createElement('button')
+    document.body.append(outside)
+    outside.focus()
+
+    const open = shallowRef(false)
+    const host = modal(open, { card: true }, slots())
+
+    open.value = true
+    await settle()
+
+    expect(document.activeElement).toBe(host.querySelector('.delete'))
+
+    open.value = false
+    await settle()
+
+    expect(document.activeElement).toBe(outside)
+
+    outside.remove()
+  })
+
+  it('should wrap Tab and Shift+Tab within the modal subtree', async () => {
+    const open = shallowRef(true)
+    const host = modal(open, { card: true }, slots())
+    await settle()
+
+    const first = host.querySelector<HTMLButtonElement>('.delete')!
+    const last = [...host.querySelectorAll<HTMLButtonElement>('.buttons .button')].at(-1)!
+
+    last.focus()
+    last.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab' }))
+
+    expect(document.activeElement).toBe(first)
+
+    first.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }))
+
+    expect(document.activeElement).toBe(last)
+  })
+
+  it('should close on background click unless blocking', async () => {
+    const open = shallowRef(true)
+    const host = modal(open)
+    await settle()
+
+    host.querySelector<HTMLElement>('.modal-background')!.click()
+    await nextTick()
+
+    expect(open.value).toBe(false)
+
+    const held = shallowRef(true)
+    const kept = modal(held, { blocking: true })
+    await settle()
+
+    kept.querySelector<HTMLElement>('.modal-background')!.click()
+    await nextTick()
+
+    expect(held.value).toBe(true)
+  })
+})
diff --git a/packages/bulma/src/components/BuModal/BuModal.vue b/packages/bulma/src/components/BuModal/BuModal.vue
new file mode 100644
index 0000000000..d055a8a9f1
--- /dev/null
+++ b/packages/bulma/src/components/BuModal/BuModal.vue
@@ -0,0 +1,201 @@
+<script lang="ts">
+  // Framework
+  import { Dialog, IN_BROWSER } from '@vuetify/v0'
+
+  // Utilities
+  import { mergeProps, nextTick, onScopeDispose, useAttrs, useTemplateRef, watch } from 'vue'
+
+  export interface BuModalProps {
+    /** Render the `.modal-card` variant with header and footer regions. */
+    card?: boolean
+    /** Prevent background clicks from closing the modal. */
+    blocking?: boolean
+  }
+
+  const FOCUSABLE = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+  ].join(', ')
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModal', inheritAttrs: false })
+
+  defineSlots<{
+    /** Modal content: `.modal-content` body, or `.modal-card-body` in card mode. */
+    default?: () => any
+    /** Card variant title, rendered inside `p.modal-card-title`. */
+    header?: () => any
+    /** Card variant footer, rendered inside `footer.modal-card-foot`. */
+    footer?: () => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: boolean]
+  }>()
+
+  const {
+    card = false,
+    blocking = false,
+  } = defineProps<BuModalProps>()
+
+  const model = defineModel<boolean>({ default: false })
+
+  const attrs = useAttrs()
+  const root = useTemplateRef<HTMLElement>('root')
+  const panel = useTemplateRef<HTMLElement>('panel')
+
+  let restore: HTMLElement | null = null
+
+  function targets (): HTMLElement[] {
+    return root.value ? [...root.value.querySelectorAll<HTMLElement>(FOCUSABLE)] : []
+  }
+
+  function close () {
+    model.value = false
+  }
+
+  function onBackground () {
+    if (!blocking) close()
+  }
+
+  // Hand-rolled focus trap: v0 ships no focus-trap composable and a non-native
+  // <dialog> host gets no top-layer trapping (v0-core follow-up candidate).
+  function onKeydown (event: KeyboardEvent, top: boolean) {
+    if (event.key === 'Escape') {
+      if (!top) return
+      event.preventDefault()
+      close()
+      return
+    }
+
+    if (event.key !== 'Tab') return
+
+    const items = targets()
+
+    if (items.length === 0) {
+      event.preventDefault()
+      panel.value?.focus()
+      return
+    }
+
+    const first = items[0]
+    const last = items.at(-1)!
+    const active = document.activeElement
+
+    if (event.shiftKey && (active === first || active === panel.value)) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  watch(model, async open => {
+    if (!IN_BROWSER) return
+
+    if (open) {
+      restore = document.activeElement instanceof HTMLElement ? document.activeElement : null
+      await nextTick()
+      const target = targets()[0] ?? panel.value
+      target?.focus()
+    } else if (restore) {
+      // The trigger may have been unmounted while the modal was open — fall
+      // back to the body instead of stranding focus on a detached node.
+      if (restore.isConnected) restore.focus()
+      else document.body.focus()
+      restore = null
+    }
+  }, { immediate: true })
+
+  // Unmount-while-open (v-if on a parent, route change) never flips the
+  // watcher — hand focus back on scope teardown too.
+  onScopeDispose(() => {
+    if (model.value && restore?.isConnected) restore.focus()
+  })
+</script>
+
+<template>
+  <Dialog.Root v-model="model">
+    <Dialog.Content
+      v-slot="{ isOpen, globalTop, zIndex, attrs: content }"
+      :blocking
+      :close-on-click-outside="false"
+      renderless
+    >
+      <!--
+        tabindex=-1 keeps backdrop clicks from blurring to <body> (which would
+        kill the subtree-bound Esc/Tab trap); pointerdown.prevent on the
+        backdrop stops the focus move entirely.
+      -->
+      <div
+        ref="root"
+        class="modal"
+        :class="{ 'is-active': isOpen }"
+        tabindex="-1"
+        v-bind="mergeProps(attrs, { style: { zIndex } })"
+        @keydown="onKeydown($event, globalTop)"
+      >
+        <div
+          class="modal-background"
+          @click="onBackground"
+          @pointerdown.prevent
+        />
+
+        <div
+          v-if="card"
+          :id="content.id"
+          ref="panel"
+          :aria-labelledby="content['aria-labelledby']"
+          :aria-modal="content['aria-modal']"
+          class="modal-card"
+          :role="content.role"
+          tabindex="-1"
+        >
+          <header class="modal-card-head">
+            <Dialog.Title
+              as="p"
+              class="modal-card-title"
+            >
+              <slot name="header" />
+            </Dialog.Title>
+
+            <Dialog.Close class="delete" />
+          </header>
+
+          <section class="modal-card-body">
+            <slot />
+          </section>
+
+          <footer
+            v-if="$slots.footer"
+            class="modal-card-foot"
+          >
+            <slot name="footer" />
+          </footer>
+        </div>
+
+        <template v-else>
+          <div
+            :id="content.id"
+            ref="panel"
+            :aria-modal="content['aria-modal']"
+            class="modal-content"
+            :role="content.role"
+            tabindex="-1"
+          >
+            <slot />
+          </div>
+
+          <Dialog.Close class="modal-close is-large" />
+        </template>
+      </div>
+    </Dialog.Content>
+  </Dialog.Root>
+</template>
diff --git a/packages/bulma/src/components/BuModal/index.ts b/packages/bulma/src/components/BuModal/index.ts
new file mode 100644
index 0000000000..09de4c3f09
--- /dev/null
+++ b/packages/bulma/src/components/BuModal/index.ts
@@ -0,0 +1,3 @@
+export type { BuModalProps } from './BuModal.vue'
+
+export { default as BuModal } from './BuModal.vue'
diff --git a/packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts b/packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts
new file mode 100644
index 0000000000..dc0b51bb7e
--- /dev/null
+++ b/packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest'
+
+// Components
+import { BuNavbar } from './index'
+
+// Utilities
+import { createApp, h, nextTick } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+function mount (component: Parameters<typeof createApp>[0]) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(component)
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+function menu () {
+  return [
+    h('div', { class: 'navbar-start' }, [
+      h('a', { class: 'navbar-item' }, 'Home'),
+      h('a', { class: 'navbar-item' }, 'Documentation'),
+      h('div', { class: 'navbar-item has-dropdown is-hoverable' }, [
+        h('a', { class: 'navbar-link' }, 'More'),
+        h('div', { class: 'navbar-dropdown' }, [
+          h('a', { class: 'navbar-item' }, 'About'),
+          h('a', { class: 'navbar-item is-selected' }, 'Jobs'),
+          h('a', { class: 'navbar-item' }, 'Contact'),
+          h('hr', { class: 'navbar-divider' }),
+          h('a', { class: 'navbar-item' }, 'Report an issue'),
+        ]),
+      ]),
+    ]),
+    h('div', { class: 'navbar-end' }, [
+      h('div', { class: 'navbar-item' }, [
+        h('div', { class: 'buttons' }, [
+          h('a', { class: 'button is-primary' }, [h('strong', 'Sign up')]),
+          h('a', { class: 'button is-light' }, 'Log in'),
+        ]),
+      ]),
+    ]),
+  ]
+}
+
+describe('buNavbar', () => {
+  it('should conform to the full navbar fixture', async () => {
+    const { el, unmount } = mount({
+      render: () => h(BuNavbar, { id: 'navbarBasicExample' }, {
+        brand: () => h('a', { class: 'navbar-item', href: 'https://bulma.io' }, [
+          h('img', { src: 'logo.png', alt: 'Logo' }),
+        ]),
+        default: () => menu(),
+      }),
+    })
+
+    await nextTick()
+
+    conform(el, 'navbar')
+
+    unmount()
+  })
+
+  it('should toggle is-active on both burger and menu and conform to the open fixture', async () => {
+    const { el, unmount } = mount({
+      render: () => h(BuNavbar, { id: 'navbarOpenExample' }, {
+        default: () => h('div', { class: 'navbar-start' }, [
+          h('a', { class: 'navbar-item' }, 'Home'),
+        ]),
+      }),
+    })
+
+    await nextTick()
+
+    const burger = el.querySelector<HTMLElement>('.navbar-burger')!
+    const target = el.querySelector<HTMLElement>('.navbar-menu')!
+
+    expect(burger.getAttribute('aria-expanded')).toBe('false')
+    expect(target.classList.contains('is-active')).toBe(false)
+
+    burger.click()
+    await nextTick()
+
+    conform(el, 'navbar:OPEN')
+
+    burger.click()
+    await nextTick()
+
+    expect(burger.getAttribute('aria-expanded')).toBe('false')
+    expect(burger.classList.contains('is-active')).toBe(false)
+    expect(target.classList.contains('is-active')).toBe(false)
+
+    unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuNavbar/BuNavbar.vue b/packages/bulma/src/components/BuNavbar/BuNavbar.vue
new file mode 100644
index 0000000000..9691b92ee4
--- /dev/null
+++ b/packages/bulma/src/components/BuNavbar/BuNavbar.vue
@@ -0,0 +1,110 @@
+<script lang="ts">
+  // Framework
+  import { Toggle, useId } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  export interface BuNavbarProps {
+    /** Id applied to `.navbar-menu` and mirrored on the burger's `data-target` */
+    id?: string
+    /** Accessible label for the `<nav>` landmark */
+    label?: string
+    /** Color modifier applied to `.navbar` */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+    /** Renders the `.navbar-burger` toggle */
+    burger?: boolean
+  }
+
+  export interface BuNavbarSlotProps {
+    /** Whether the mobile menu is open */
+    isOpen: boolean
+    /** Toggle the mobile menu */
+    toggle: () => void
+    /** Close the mobile menu */
+    close: () => void
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNavbar' })
+
+  defineSlots<{
+    /** Menu content — rendered inside `.navbar-menu` (`.navbar-start` / `.navbar-end` markup is userland) */
+    default: (props: BuNavbarSlotProps) => any
+    /** Brand content — rendered inside `.navbar-brand`, before the burger */
+    brand?: (props: BuNavbarSlotProps) => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: boolean]
+  }>()
+
+  const {
+    id,
+    label = 'main navigation',
+    color,
+    burger = true,
+  } = defineProps<BuNavbarProps>()
+
+  const model = defineModel<boolean>({ default: false })
+
+  // useId must run in the setup body — as a prop-default factory it executes
+  // outside the component instance and falls back to a non-SSR-safe counter.
+  const fallback = useId()
+  const menu = toRef(() => id ?? fallback)
+
+  function toggle () {
+    model.value = !model.value
+  }
+
+  function close () {
+    model.value = false
+  }
+
+  const slotProps = toRef((): BuNavbarSlotProps => ({
+    isOpen: model.value,
+    toggle,
+    close,
+  }))
+</script>
+
+<template>
+  <nav
+    :aria-label="label"
+    class="navbar"
+    :class="color && `is-${color}`"
+    role="navigation"
+  >
+    <div class="navbar-brand">
+      <slot
+        name="brand"
+        v-bind="slotProps"
+      />
+
+      <Toggle.Root
+        v-if="burger"
+        v-model="model"
+        :aria-expanded="model ? 'true' : 'false'"
+        aria-label="menu"
+        as="a"
+        class="navbar-burger"
+        :class="{ 'is-active': model }"
+        :data-target="menu"
+      >
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+      </Toggle.Root>
+    </div>
+
+    <div
+      :id="menu"
+      class="navbar-menu"
+      :class="{ 'is-active': model }"
+    >
+      <slot v-bind="slotProps" />
+    </div>
+  </nav>
+</template>
diff --git a/packages/bulma/src/components/BuNavbar/index.ts b/packages/bulma/src/components/BuNavbar/index.ts
new file mode 100644
index 0000000000..09b582b3f3
--- /dev/null
+++ b/packages/bulma/src/components/BuNavbar/index.ts
@@ -0,0 +1,2 @@
+export type { BuNavbarProps, BuNavbarSlotProps } from './BuNavbar.vue'
+export { default as BuNavbar } from './BuNavbar.vue'
diff --git a/packages/bulma/src/components/BuNotification/BuNotification.browser.test.ts b/packages/bulma/src/components/BuNotification/BuNotification.browser.test.ts
new file mode 100644
index 0000000000..8cd0c191a5
--- /dev/null
+++ b/packages/bulma/src/components/BuNotification/BuNotification.browser.test.ts
@@ -0,0 +1,80 @@
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { BuNotification } from './index'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+let teardown: (() => void) | undefined
+
+function mount (node: () => any): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render: node })
+  app.mount(host)
+  teardown = () => {
+    app.unmount()
+    host.remove()
+  }
+  return host
+}
+
+afterEach(() => {
+  teardown?.()
+  teardown = undefined
+})
+
+const body = [
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. ',
+  h('strong', 'Pellentesque risus mi'),
+  ', tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum ',
+  h('a', 'felis venenatis'),
+  ' efficitur.',
+]
+
+// v0's delete button correctly carries type="button"; the docs fixture omits it.
+const TYPE = { ignoreAttrs: ['type'] }
+
+describe('buNotification', () => {
+  it('should conform to the basic notification fixture', () => {
+    const host = mount(() => h(BuNotification, {}, { default: () => body }))
+
+    conform(host.firstElementChild!, 'notification', TYPE)
+  })
+
+  it('should conform to the color variant fixture', () => {
+    const host = mount(() => h(BuNotification, { color: 'primary' }, {
+      default: () => [
+        'Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. ',
+        h('strong', 'Pellentesque risus mi'),
+        ', tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum ',
+        h('a', 'felis venenatis'),
+        ' efficitur.',
+      ],
+    }))
+
+    conform(host.firstElementChild!, 'notification:color', TYPE)
+  })
+
+  it('should close and unmount when the delete button is clicked', async () => {
+    const open = shallowRef(true)
+    const host = mount(() => h(BuNotification, {
+      'modelValue': open.value,
+      'onUpdate:modelValue': (value: boolean) => {
+        open.value = value
+      },
+    }, { default: () => 'content' }))
+
+    host.querySelector<HTMLButtonElement>('.delete')!.click()
+    await nextTick()
+
+    expect(open.value).toBe(false)
+
+    await nextTick()
+    await nextTick()
+
+    expect(host.querySelector('.notification')).toBeNull()
+  })
+})
diff --git a/packages/bulma/src/components/BuNotification/BuNotification.vue b/packages/bulma/src/components/BuNotification/BuNotification.vue
new file mode 100644
index 0000000000..6a6d2a875c
--- /dev/null
+++ b/packages/bulma/src/components/BuNotification/BuNotification.vue
@@ -0,0 +1,69 @@
+<script lang="ts">
+  // Framework
+  import { Presence } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useAttrs } from 'vue'
+
+  export interface BuNotificationProps {
+    /** Bulma color modifier, rendered as `is-{color}`. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+    /** Light color variant, rendered as `is-light`. */
+    light?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNotification', inheritAttrs: false })
+
+  defineSlots<{
+    /** Notification content, rendered after the delete button. */
+    default?: () => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: boolean]
+  }>()
+
+  const {
+    color,
+    light = false,
+  } = defineProps<BuNotificationProps>()
+
+  const model = defineModel<boolean>({ default: true })
+
+  const attrs = useAttrs()
+
+  const classes = toRef(() => [
+    color && `is-${color}`,
+    light && 'is-light',
+  ])
+
+  function onDelete () {
+    model.value = false
+  }
+</script>
+
+<template>
+  <Presence
+    v-slot="{ attrs: state }"
+    v-model="model"
+  >
+    <div
+      class="notification"
+      :class="classes"
+      :data-state="state['data-state']"
+      v-bind="attrs"
+    >
+      <!-- Deliberate a11y addition: upstream fixture ships this button unlabeled -->
+      <button
+        aria-label="delete"
+        class="delete"
+        type="button"
+        @click="onDelete"
+      />
+
+      <slot />
+    </div>
+  </Presence>
+</template>
diff --git a/packages/bulma/src/components/BuNotification/index.ts b/packages/bulma/src/components/BuNotification/index.ts
new file mode 100644
index 0000000000..70d570acf0
--- /dev/null
+++ b/packages/bulma/src/components/BuNotification/index.ts
@@ -0,0 +1,3 @@
+export type { BuNotificationProps } from './BuNotification.vue'
+
+export { default as BuNotification } from './BuNotification.vue'
diff --git a/packages/bulma/src/components/BuPagination/BuPagination.browser.test.ts b/packages/bulma/src/components/BuPagination/BuPagination.browser.test.ts
new file mode 100644
index 0000000000..51e5edcd8f
--- /dev/null
+++ b/packages/bulma/src/components/BuPagination/BuPagination.browser.test.ts
@@ -0,0 +1,50 @@
+import { describe, it } from 'vitest'
+
+// Context
+import BuPagination from './BuPagination.vue'
+
+// Utilities
+import { createApp } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+// aria-label: v0 localizes ('Go to page 1' vs the fixture's 'Goto page 1') — tolerated per canon.
+// href: JS-driven pagination emits v-model page changes instead of navigating; fixture hrefs are docs placeholders.
+// title: the disabled fixture's title is authored content, not component-owned markup.
+const IGNORE = { ignoreAttrs: ['aria-label', 'href', 'title'] }
+
+function mount (props: Record<string, unknown>) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(BuPagination, props)
+  app.mount(host)
+  return {
+    el: host.firstElementChild!,
+    destroy () {
+      app.unmount()
+      host.remove()
+    },
+  }
+}
+
+describe('buPagination', () => {
+  it('conforms to the full pagination fixture with ellipses and current page', () => {
+    const { el, destroy } = mount({ pages: 86, modelValue: 46, visible: 7 })
+
+    try {
+      conform(el, 'pagination', IGNORE)
+    } finally {
+      destroy()
+    }
+  })
+
+  it('conforms to the disabled-previous fixture on the first page', () => {
+    const { el, destroy } = mount({ pages: 3, modelValue: 1, visible: 7 })
+
+    try {
+      conform(el, 'pagination:disabled', IGNORE)
+    } finally {
+      destroy()
+    }
+  })
+})
diff --git a/packages/bulma/src/components/BuPagination/BuPagination.vue b/packages/bulma/src/components/BuPagination/BuPagination.vue
new file mode 100644
index 0000000000..e1c003e18b
--- /dev/null
+++ b/packages/bulma/src/components/BuPagination/BuPagination.vue
@@ -0,0 +1,117 @@
+<script lang="ts">
+  // Framework
+  import { Pagination } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, watch } from 'vue'
+
+  export interface BuPaginationProps {
+    /** Total page count (maps to v0 size with one item per page) */
+    pages?: number
+    /** Number of visible page buttons; omit for v0's responsive auto-measure */
+    visible?: number
+    /** Ellipsis character rendered between page ranges */
+    ellipsis?: string
+    /** Bulma size modifier */
+    size?: 'small' | 'normal' | 'medium' | 'large'
+    /** Rounded page buttons */
+    rounded?: boolean
+    /** Center the page list */
+    centered?: boolean
+    /** Right-align the page list */
+    right?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuPagination' })
+
+  defineSlots<{
+    /** Previous button content */
+    prev?: () => any
+    /** Next button content */
+    next?: () => any
+  }>()
+
+  defineEmits<{
+    /** Emitted when the current page changes */
+    'update:model-value': [value: number]
+  }>()
+
+  const {
+    pages = 1,
+    visible,
+    ellipsis = '…',
+    size,
+    rounded,
+    centered,
+    right,
+  } = defineProps<BuPaginationProps>()
+
+  const page = defineModel<number>({ default: 1 })
+
+  // v0's createPagination clamps only in its computed getter and writes raw
+  // values through, so an out-of-range v-model (page > pages, or pages
+  // shrinking below the current page) silently desyncs from the rendered
+  // state. Write the clamp back so the parent's model matches what renders.
+  watch([() => pages, page], () => {
+    const max = Math.max(1, pages)
+    if (page.value > max) page.value = max
+    else if (page.value < 1) page.value = 1
+  }, { immediate: true })
+
+  const classes = toRef(() => [
+    size && `is-${size}`,
+    rounded && 'is-rounded',
+    centered && 'is-centered',
+    right && 'is-right',
+  ])
+</script>
+
+<template>
+  <Pagination.Root
+    v-model="page"
+    class="pagination"
+    :class="classes"
+    :ellipsis
+    :items-per-page="1"
+    role="navigation"
+    :size="pages"
+    :total-visible="visible"
+  >
+    <template #default="{ items, isFirst, isLast, page: current }">
+      <Pagination.Prev
+        as="a"
+        class="pagination-previous"
+        :class="{ 'is-disabled': isFirst }"
+      >
+        <slot name="prev">Previous</slot>
+      </Pagination.Prev>
+
+      <Pagination.Next
+        as="a"
+        class="pagination-next"
+        :class="{ 'is-disabled': isLast }"
+      >
+        <slot name="next">Next page</slot>
+      </Pagination.Next>
+
+      <ul class="pagination-list">
+        <template v-for="(item, index) in items" :key="index">
+          <li v-if="item.type === 'page'">
+            <Pagination.Item
+              as="a"
+              class="pagination-link"
+              :class="{ 'is-current': item.value === current }"
+              :value="item.value"
+            />
+          </li>
+
+          <li v-else>
+            <Pagination.Ellipsis as="span" class="pagination-ellipsis" />
+          </li>
+        </template>
+      </ul>
+    </template>
+  </Pagination.Root>
+</template>
diff --git a/packages/bulma/src/components/BuPagination/index.ts b/packages/bulma/src/components/BuPagination/index.ts
new file mode 100644
index 0000000000..afa0e4a72f
--- /dev/null
+++ b/packages/bulma/src/components/BuPagination/index.ts
@@ -0,0 +1,2 @@
+export type { BuPaginationProps } from './BuPagination.vue'
+export { default as BuPagination } from './BuPagination.vue'
diff --git a/packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts b/packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts
new file mode 100644
index 0000000000..dd6d8ee7d4
--- /dev/null
+++ b/packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts
@@ -0,0 +1,139 @@
+import { describe, expect, it } from 'vitest'
+
+import { BuPanel } from './index'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+// Types
+import type { BuPanelItem } from './index'
+
+import { conform } from '../../../harness/conform'
+
+const tabs = ['All', 'Public', 'Private', 'Sources', 'Forks']
+
+const repos: BuPanelItem<string>[] = [
+  { label: 'bulma', icon: 'fas fa-book' },
+  { label: 'marksheet', icon: 'fas fa-book' },
+  { label: 'minireset.css', icon: 'fas fa-book' },
+  { label: 'jgthms.github.io', icon: 'fas fa-book' },
+  { label: 'daniellowtw/infboard', icon: 'fas fa-code-branch' },
+  { label: 'mojs', icon: 'fas fa-code-branch' },
+]
+
+const slots = {
+  start: () => h('div', { class: 'panel-block' }, [
+    h('p', { class: 'control has-icons-left' }, [
+      h('input', { class: 'input', type: 'text', placeholder: 'Search' }),
+      h('span', { class: 'icon is-left' }, [
+        h('i', { 'class': 'fas fa-search', 'aria-hidden': 'true' }),
+      ]),
+    ]),
+  ]),
+  default: () => [
+    h('label', { class: 'panel-block' }, [
+      h('input', { type: 'checkbox' }),
+      ' remember me ',
+    ]),
+    h('div', { class: 'panel-block' }, [
+      h('button', { class: 'button is-link is-outlined is-fullwidth' }, ' Reset all filters '),
+    ]),
+  ],
+}
+
+function mount (component: Parameters<typeof createApp>[0]) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(component)
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+describe('buPanel', () => {
+  it('conforms to the panel fixture', () => {
+    const { el, unmount } = mount({
+      render: () => h(BuPanel as any, {
+        heading: 'Repositories',
+        tabs,
+        items: repos,
+        modelValue: 'bulma',
+      }, slots),
+    })
+    conform(el, 'panel')
+    unmount()
+  })
+
+  it('keeps the tab scope and the block scope independent', async () => {
+    const selected = shallowRef<string | string[]>('bulma')
+    const tabbed = shallowRef<string>()
+    const { el, unmount } = mount({
+      setup () {
+        return () => h(BuPanel as any, {
+          'heading': 'Repositories',
+          tabs,
+          'items': repos,
+          'modelValue': selected.value,
+          'onUpdate:modelValue': (value: string | string[]) => {
+            selected.value = value
+          },
+          'onTab': (value: string) => {
+            tabbed.value = value
+          },
+        }, slots)
+      },
+    })
+
+    // mandatory 'force' auto-selects the first tab.
+    const anchors = [...el.querySelectorAll('.panel-tabs a')]
+    expect(anchors[0].classList.contains('is-active')).toBe(true)
+    expect(tabbed.value).toBe('All')
+
+    // Selecting a tab moves is-active within the tab scope only.
+    ;(anchors[1] as HTMLElement).click()
+    await nextTick()
+    expect(tabbed.value).toBe('Public')
+    expect(anchors[0].classList.contains('is-active')).toBe(false)
+    expect(anchors[1].classList.contains('is-active')).toBe(true)
+    expect(el.querySelector('a.panel-block.is-active')!.textContent!.trim()).toBe('bulma')
+
+    // Selecting another block moves the single block selection.
+    const blocks = [...el.querySelectorAll('a.panel-block')]
+    ;(blocks[1] as HTMLElement).click()
+    await nextTick()
+    expect(selected.value).toBe('marksheet')
+    expect(blocks[0].classList.contains('is-active')).toBe(false)
+    expect(blocks[1].classList.contains('is-active')).toBe(true)
+
+    unmount()
+  })
+
+  it('supports multi-selection of blocks via the multiple prop', async () => {
+    const selected = shallowRef<string[]>(['bulma'])
+    const { el, unmount } = mount({
+      setup () {
+        return () => h(BuPanel as any, {
+          'items': repos,
+          'multiple': true,
+          'modelValue': selected.value,
+          'onUpdate:modelValue': (value: string | string[]) => {
+            selected.value = value as string[]
+          },
+        })
+      },
+    })
+
+    const blocks = [...el.querySelectorAll('a.panel-block')]
+    ;(blocks[1] as HTMLElement).click()
+    await nextTick()
+    expect(selected.value).toEqual(['bulma', 'marksheet'])
+    expect(blocks[0].classList.contains('is-active')).toBe(true)
+    expect(blocks[1].classList.contains('is-active')).toBe(true)
+
+    unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuPanel/BuPanel.vue b/packages/bulma/src/components/BuPanel/BuPanel.vue
new file mode 100644
index 0000000000..ebd183d1ab
--- /dev/null
+++ b/packages/bulma/src/components/BuPanel/BuPanel.vue
@@ -0,0 +1,135 @@
+<script lang="ts">
+  // Framework
+  import { isString, Selection, Single } from '@vuetify/v0'
+
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  export interface BuPanelItem<T = unknown> {
+    /** Selection value — defaults to `label` when omitted. */
+    value?: T
+    /** Block text. */
+    label: string
+    /** Icon classes for the `span.panel-icon > i` (e.g. `fas fa-book`). */
+    icon?: string
+  }
+
+  export interface BuPanelProps<T = unknown> {
+    /** `p.panel-heading` text. */
+    heading?: string
+    /** `p.panel-tabs` anchor labels — its own single-selection scope, first tab auto-selects. */
+    tabs?: string[]
+    /** Selectable `a.panel-block` rows — the v-model selection scope. */
+    items?: BuPanelItem<T>[]
+    /** Allow multiple selected `a.panel-block` rows. */
+    multiple?: boolean
+    /** Bulma color modifier on the panel root. */
+    color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+  }
+</script>
+
+<script lang="ts" setup generic="T = unknown">
+  defineOptions({ name: 'BuPanel' })
+
+  defineSlots<{
+    /** Passthrough blocks between the heading and the tabs (e.g. a search `div.panel-block`). */
+    start: () => any
+    /** Passthrough blocks after the selectable rows (e.g. checkbox and button `panel-block`s). */
+    default: () => any
+  }>()
+
+  const emit = defineEmits<{
+    'update:model-value': [value: T | T[]]
+    'tab': [value: string]
+  }>()
+
+  const {
+    heading,
+    tabs = [],
+    items = [],
+    multiple = false,
+    color,
+  } = defineProps<BuPanelProps<T>>()
+
+  const model = defineModel<T | T[]>()
+
+  const tab = shallowRef<string>()
+
+  function onTab (value: string | string[] | undefined) {
+    if (!isString(value)) return
+    tab.value = value
+    emit('tab', value)
+  }
+</script>
+
+<template>
+  <nav
+    class="panel"
+    :class="color ? `is-${color}` : undefined"
+  >
+    <p
+      v-if="heading"
+      class="panel-heading"
+    >{{ heading }}</p>
+
+    <slot name="start" />
+
+    <Single.Root
+      v-if="tabs.length > 0"
+      mandatory="force"
+      :model-value="tab"
+      @update:model-value="onTab"
+    >
+      <!--
+        Hand-picked bindings, not the Item attrs spread: aria-selected /
+        aria-disabled are invalid on role-less anchors (axe aria-allowed-attr,
+        critical) — data-selected keeps the data-attr styling hook. Same
+        convention as BuMenu; see CANON.
+      -->
+      <p class="panel-tabs">
+        <Single.Item
+          v-for="label in tabs"
+          :key="label"
+          v-slot="{ isSelected, select }"
+          :value="label"
+        >
+          <a
+            :class="{ 'is-active': isSelected }"
+            :data-selected="isSelected || undefined"
+            @click="select"
+          >{{ label }}</a>
+        </Single.Item>
+      </p>
+    </Single.Root>
+
+    <Selection.Root
+      v-model="model"
+      :multiple
+    >
+      <Selection.Item
+        v-for="item in items"
+        :key="item.label"
+        v-slot="{ isSelected, select }"
+        :value="item.value ?? item.label"
+      >
+        <a
+          class="panel-block"
+          :class="{ 'is-active': isSelected }"
+          :data-selected="isSelected || undefined"
+          @click="select"
+        >
+          <span
+            v-if="item.icon"
+            class="panel-icon"
+          ><i
+            aria-hidden="true"
+            :class="item.icon"
+          /></span>
+          {{ item.label }}
+        </a>
+      </Selection.Item>
+    </Selection.Root>
+
+    <slot />
+  </nav>
+</template>
diff --git a/packages/bulma/src/components/BuPanel/index.ts b/packages/bulma/src/components/BuPanel/index.ts
new file mode 100644
index 0000000000..4ca323dd8b
--- /dev/null
+++ b/packages/bulma/src/components/BuPanel/index.ts
@@ -0,0 +1,3 @@
+export type { BuPanelItem, BuPanelProps } from './BuPanel.vue'
+
+export { default as BuPanel } from './BuPanel.vue'
diff --git a/packages/bulma/src/components/BuRadio/BuRadio.browser.test.ts b/packages/bulma/src/components/BuRadio/BuRadio.browser.test.ts
new file mode 100644
index 0000000000..48dfdc643d
--- /dev/null
+++ b/packages/bulma/src/components/BuRadio/BuRadio.browser.test.ts
@@ -0,0 +1,45 @@
+import { describe, it } from 'vitest'
+
+// Components
+import { BuRadio } from './index'
+
+// Utilities
+import { createApp, h } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+function mount (render: () => ReturnType<typeof h>) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+// BuRadio binds :value on the native input; the docs fixture radios are
+// valueless — tolerate it explicitly.
+const VALUE = { ignoreAttrs: ['value'] }
+
+describe('buRadio', () => {
+  it('should conform to the Bulma radio fixtures', () => {
+    const basic = mount(() => h('div', { class: 'control' }, [
+      h(BuRadio, { name: 'answer', value: 'yes' }, () => ' Yes '),
+      h(BuRadio, { name: 'answer', value: 'no' }, () => ' No '),
+    ]))
+    conform(basic.el, 'form-radio', VALUE)
+    basic.unmount()
+
+    const disabled = mount(() => h('div', { class: 'control' }, [
+      h(BuRadio, { name: 'rsvp', value: 'going' }, () => ' Going '),
+      h(BuRadio, { name: 'rsvp', value: 'not-going' }, () => ' Not going '),
+      h(BuRadio, { disabled: true, name: 'rsvp', value: 'maybe' }, () => ' Maybe '),
+    ]))
+    conform(disabled.el, 'form-radio:disabled option', VALUE)
+    disabled.unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuRadio/BuRadio.vue b/packages/bulma/src/components/BuRadio/BuRadio.vue
new file mode 100644
index 0000000000..d163097ad5
--- /dev/null
+++ b/packages/bulma/src/components/BuRadio/BuRadio.vue
@@ -0,0 +1,137 @@
+<script lang="ts">
+  // Framework
+  import { createInput } from '@vuetify/v0'
+
+  // Utilities
+  import { createValidateOn } from '../../utilities/validate'
+  import { toRef, useAttrs, watch } from 'vue'
+
+  // Types
+  import type { ID, InputOptions, ValidateOn } from '@vuetify/v0'
+  import type { StyleValue } from 'vue'
+
+  export interface BuRadioProps<T = string> {
+    /**
+     * Disables the radio. Mirrors Bulma's documented non-standard `disabled`
+     * attribute on the wrapping label in addition to the native input.
+     */
+    disabled?: boolean
+    /** Manual error state override — forces invalid. */
+    error?: boolean
+    /** Manual error messages — merged with rule-based errors. */
+    errorMessages?: string | string[]
+    /** Associate with a form by id. Snapshotted at setup (createInput takes a plain value). */
+    form?: string
+    /** Unique identifier for the native input (auto-generated if omitted). Snapshotted at setup. */
+    id?: ID
+    /** Form field name — native radio grouping. Snapshotted at setup (createInput takes a plain value). */
+    name?: string
+    /** Whether required. Snapshotted at setup for validation; the DOM attr stays reactive. */
+    required?: boolean
+    /** Validation rules. Snapshotted at setup (createInput takes a plain value). */
+    rules?: InputOptions['rules']
+    /** When to trigger validation. */
+    validateOn?: ValidateOn
+    /** Comparison value written to the model when this radio is checked. */
+    value: T
+  }
+
+  export interface BuRadioSlotProps {
+    /** Merged error messages. */
+    errors: string[]
+    /** Whether this radio is checked. */
+    isChecked: boolean
+    /** Whether the native input is focused. */
+    isFocused: boolean
+    /** Whether the field is valid. */
+    isValid: boolean | null
+  }
+
+</script>
+
+<script lang="ts" setup generic="T = string">
+  defineOptions({ name: 'BuRadio', inheritAttrs: false })
+
+  // class/style merge onto the wrapping label; all other fallthrough attrs
+  // (aria-*, autofocus, data-testid, …) target the native input.
+  const attrs = useAttrs()
+  const rest = toRef(() => Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),
+  ))
+  const style = toRef(() => attrs.style as StyleValue | undefined)
+
+  defineSlots<{
+    default?: (props: BuRadioSlotProps) => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: T]
+  }>()
+
+  const {
+    disabled = false,
+    error = false,
+    errorMessages,
+    form,
+    id,
+    name,
+    required,
+    rules = [],
+    validateOn = 'blur',
+    value,
+  } = defineProps<BuRadioProps<T>>()
+
+  const model = defineModel<T>()
+
+  const input = createInput<T | undefined>({
+    value: model,
+    id,
+    name,
+    form,
+    required,
+    disabled: () => disabled,
+    rules,
+    error: () => error,
+    errorMessages: () => errorMessages,
+  })
+
+  const slotProps = toRef((): BuRadioSlotProps => ({
+    errors: input.errors.value,
+    isChecked: model.value === value,
+    isFocused: input.isFocused.value,
+    isValid: input.isValid.value,
+  }))
+
+  const { should, onFocus, onBlur } = createValidateOn(input, () => validateOn)
+
+  watch(model, () => {
+    if (should('input')) input.validate()
+  })
+</script>
+
+<template>
+  <!-- Bulma documents the non-standard label[disabled]; '' matches native boolean-attr serialization. -->
+  <label
+    class="radio"
+    :class="attrs.class"
+    :disabled="disabled ? '' : undefined"
+    :style
+  >
+    <input
+      :id="String(input.id)"
+      v-bind="rest"
+      v-model="model"
+      :aria-invalid="input.isValid.value === false || undefined"
+      :disabled="disabled || undefined"
+      :form
+      :name
+      :required="required || undefined"
+      type="radio"
+      :value
+      @blur="onBlur"
+      @focus="onFocus"
+    >
+
+    <slot v-bind="slotProps" />
+  </label>
+</template>
diff --git a/packages/bulma/src/components/BuRadio/index.ts b/packages/bulma/src/components/BuRadio/index.ts
new file mode 100644
index 0000000000..5fd9e367ca
--- /dev/null
+++ b/packages/bulma/src/components/BuRadio/index.ts
@@ -0,0 +1,2 @@
+export type { BuRadioProps, BuRadioSlotProps } from './BuRadio.vue'
+export { default as BuRadio } from './BuRadio.vue'
diff --git a/packages/bulma/src/components/BuSelect/BuSelect.browser.test.ts b/packages/bulma/src/components/BuSelect/BuSelect.browser.test.ts
new file mode 100644
index 0000000000..69278bdc19
--- /dev/null
+++ b/packages/bulma/src/components/BuSelect/BuSelect.browser.test.ts
@@ -0,0 +1,46 @@
+import { describe, it } from 'vitest'
+
+// Components
+import { BuSelect } from './index'
+
+// Utilities
+import { createApp, h } from 'vue'
+
+import { conform } from '../../../harness/conform'
+
+const COUNTRIES = [
+  'Argentina', 'Bolivia', 'Brazil', 'Chile', 'Colombia', 'Ecuador',
+  'Guyana', 'Paraguay', 'Peru', 'Suriname', 'Uruguay', 'Venezuela',
+]
+
+function mount (render: () => ReturnType<typeof h>) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, unmount }
+}
+
+describe('buSelect', () => {
+  it('should conform to the Bulma select fixtures', () => {
+    const basic = mount(() => h(BuSelect, () => [
+      h('option', 'Select dropdown'),
+      h('option', 'With options'),
+    ]))
+    conform(basic.el, 'form-select')
+    basic.unmount()
+
+    const multiple = mount(() => h(
+      BuSelect,
+      { modelValue: [], multiple: true, rows: 8 },
+      () => COUNTRIES.map(country => h('option', { value: country }, country)),
+    ))
+    conform(multiple.el, 'form-select:multiple select')
+    multiple.unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuSelect/BuSelect.vue b/packages/bulma/src/components/BuSelect/BuSelect.vue
new file mode 100644
index 0000000000..87fa133eab
--- /dev/null
+++ b/packages/bulma/src/components/BuSelect/BuSelect.vue
@@ -0,0 +1,159 @@
+<script lang="ts">
+  // Framework
+  import { createInput, isUndefined } from '@vuetify/v0'
+
+  // Utilities
+  import { createValidateOn } from '../../utilities/validate'
+  import { toRef, useAttrs, watch } from 'vue'
+
+  // Types
+  import type { ID, InputOptions, ValidateOn } from '@vuetify/v0'
+  import type { StyleValue } from 'vue'
+
+  export type BuSelectColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+  export type BuSelectSize = 'small' | 'normal' | 'medium' | 'large'
+  export type BuSelectValue = string | string[] | undefined
+
+  export interface BuSelectProps {
+    /** Color modifier rendered as `is-{color}` on the wrapper. */
+    color?: BuSelectColor
+    /** Disables the native select. */
+    disabled?: boolean
+    /** Manual error state override — forces invalid. */
+    error?: boolean
+    /** Manual error messages — merged with rule-based errors. */
+    errorMessages?: string | string[]
+    /** Associate with a form by id. Snapshotted at setup (createInput takes a plain value). */
+    form?: string
+    /** Unique identifier for the native select (auto-generated if omitted). Snapshotted at setup. */
+    id?: ID
+    /** Renders `is-loading` on the wrapper (replaces the dropdown arrow). */
+    loading?: boolean
+    /** Native multi-select — `is-multiple` on the wrapper plus the `multiple` attr. */
+    multiple?: boolean
+    /** Form field name. Snapshotted at setup (createInput takes a plain value). */
+    name?: string
+    /** Whether required. Snapshotted at setup for validation; the DOM attr stays reactive. */
+    required?: boolean
+    /** Renders `is-rounded` on the wrapper. */
+    rounded?: boolean
+    /** Native `size` attribute — visible option rows (pairs with `multiple`). */
+    rows?: number | string
+    /** Validation rules. Snapshotted at setup (createInput takes a plain value). */
+    rules?: InputOptions['rules']
+    /** Size modifier rendered as `is-{size}` (emitted only when explicitly passed). */
+    size?: BuSelectSize
+    /** When to trigger validation. */
+    validateOn?: ValidateOn
+  }
+
+  export interface BuSelectSlotProps {
+    /** Merged error messages. */
+    errors: string[]
+    /** Whether the native select is focused. */
+    isFocused: boolean
+    /** Whether the field is valid. */
+    isValid: boolean | null
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuSelect', inheritAttrs: false })
+
+  // class/style merge onto the div.select wrapper; all other fallthrough
+  // attrs (multiple, aria-*, data-testid, …) target the native select.
+  const attrs = useAttrs()
+  const rest = toRef(() => Object.fromEntries(
+    Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),
+  ))
+  const style = toRef(() => attrs.style as StyleValue | undefined)
+
+  defineSlots<{
+    default: (props: BuSelectSlotProps) => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: BuSelectValue]
+  }>()
+
+  const {
+    color,
+    disabled = false,
+    error = false,
+    errorMessages,
+    form,
+    id,
+    loading = false,
+    multiple = false,
+    name,
+    required,
+    rounded = false,
+    rows,
+    rules = [],
+    size,
+    validateOn = 'blur',
+  } = defineProps<BuSelectProps>()
+
+  const model = defineModel<string | string[]>()
+
+  // A native <select multiple> needs an array binding — heal an uncontrolled
+  // or undefined model at setup so Vue's vModelSelect doesn't warn on mount.
+  if (multiple && isUndefined(model.value)) model.value = []
+
+  const input = createInput<BuSelectValue>({
+    value: model,
+    id,
+    name,
+    form,
+    required,
+    disabled: () => disabled,
+    rules,
+    error: () => error,
+    errorMessages: () => errorMessages,
+  })
+
+  const classes = toRef(() => [
+    'select',
+    {
+      'is-danger': input.isValid.value === false,
+      'is-loading': loading,
+      'is-multiple': multiple,
+      'is-rounded': rounded,
+    },
+    color && `is-${color}`,
+    size && `is-${size}`,
+  ])
+
+  const slotProps = toRef((): BuSelectSlotProps => ({
+    errors: input.errors.value,
+    isFocused: input.isFocused.value,
+    isValid: input.isValid.value,
+  }))
+
+  const { should, onFocus, onBlur } = createValidateOn(input, () => validateOn)
+
+  watch(model, () => {
+    if (should('input')) input.validate()
+  })
+</script>
+
+<template>
+  <div :class="[classes, attrs.class]" :style>
+    <select
+      :id="String(input.id)"
+      v-bind="rest"
+      v-model="model"
+      :aria-invalid="input.isValid.value === false || undefined"
+      :disabled="disabled || undefined"
+      :form
+      :multiple="multiple || undefined"
+      :name
+      :required="required || undefined"
+      :size="rows"
+      @blur="onBlur"
+      @focus="onFocus"
+    >
+      <slot v-bind="slotProps" />
+    </select>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuSelect/index.ts b/packages/bulma/src/components/BuSelect/index.ts
new file mode 100644
index 0000000000..a76c52246b
--- /dev/null
+++ b/packages/bulma/src/components/BuSelect/index.ts
@@ -0,0 +1,2 @@
+export type { BuSelectColor, BuSelectProps, BuSelectSize, BuSelectSlotProps, BuSelectValue } from './BuSelect.vue'
+export { default as BuSelect } from './BuSelect.vue'
diff --git a/packages/bulma/src/components/BuTab/BuTab.vue b/packages/bulma/src/components/BuTab/BuTab.vue
new file mode 100644
index 0000000000..72959b9270
--- /dev/null
+++ b/packages/bulma/src/components/BuTab/BuTab.vue
@@ -0,0 +1,63 @@
+<script lang="ts">
+  // Framework
+  import { Tabs } from '@vuetify/v0'
+
+  // Utilities
+  import { useAttrs } from 'vue'
+
+  export interface BuTabProps<V = unknown> {
+    /** Value matched against the BuTabs v-model and BuTabPanel */
+    value?: V
+    /** Disables this tab */
+    disabled?: boolean
+  }
+
+  export interface BuTabSlotProps {
+    /** Whether this tab is currently selected */
+    isSelected: boolean
+  }
+</script>
+
+<script lang="ts" setup generic="V = unknown">
+  defineOptions({ name: 'BuTab', inheritAttrs: false })
+
+  const attrs = useAttrs()
+
+  defineSlots<{
+    default: (props: BuTabSlotProps) => any
+  }>()
+
+  const {
+    value,
+    disabled = false,
+  } = defineProps<BuTabProps<V>>()
+</script>
+
+<template>
+  <!--
+    :as="null" (NOT the renderless prop): `as` feeds TabsItem's button
+    polyfill, so `renderless` alone would emit type="button" + disabled onto
+    the anchor. Renderless items register no element, so v0's arrow-key focus
+    moves (focusSelectedTab/focusAdjacent) are no-ops here: selection, panels,
+    and aria-selected update but DOM focus stays on the previously selected
+    anchor. Known Tier-1 limitation — see SPEC.md. role="presentation" lifts
+    the <li> out of the accessibility tree so role=tablist directly owns the
+    role=tab anchors (axe aria-required-children/-parent).
+  -->
+  <Tabs.Item
+    v-slot="{ isSelected, attrs: tab }"
+    :as="null"
+    :disabled
+    :value
+  >
+    <li
+      v-bind="attrs"
+      :class="{ 'is-active': isSelected }"
+      role="presentation"
+    >
+      <a v-bind="tab">
+        <slot :is-selected />
+      </a>
+    </li>
+  </Tabs.Item>
+</template>
diff --git a/packages/bulma/src/components/BuTab/index.ts b/packages/bulma/src/components/BuTab/index.ts
new file mode 100644
index 0000000000..559bfe2a37
--- /dev/null
+++ b/packages/bulma/src/components/BuTab/index.ts
@@ -0,0 +1,2 @@
+export type { BuTabProps, BuTabSlotProps } from './BuTab.vue'
+export { default as BuTab } from './BuTab.vue'
diff --git a/packages/bulma/src/components/BuTabPanel/BuTabPanel.vue b/packages/bulma/src/components/BuTabPanel/BuTabPanel.vue
new file mode 100644
index 0000000000..e881e24a4b
--- /dev/null
+++ b/packages/bulma/src/components/BuTabPanel/BuTabPanel.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Framework
+  import { Tabs } from '@vuetify/v0'
+
+  export interface BuTabPanelProps<V = unknown> {
+    /** Value matched against the corresponding BuTab */
+    value: V
+  }
+
+  export interface BuTabPanelSlotProps {
+    /** Whether this panel's tab is currently selected */
+    isSelected: boolean
+  }
+</script>
+
+<script lang="ts" setup generic="V = unknown">
+  defineOptions({ name: 'BuTabPanel' })
+
+  defineSlots<{
+    default: (props: BuTabPanelSlotProps) => any
+  }>()
+
+  const { value } = defineProps<BuTabPanelProps<V>>()
+</script>
+
+<template>
+  <Tabs.Panel
+    v-slot="{ isSelected }"
+    :value
+  >
+    <slot :is-selected />
+  </Tabs.Panel>
+</template>
diff --git a/packages/bulma/src/components/BuTabPanel/index.ts b/packages/bulma/src/components/BuTabPanel/index.ts
new file mode 100644
index 0000000000..8e3ee6ae01
--- /dev/null
+++ b/packages/bulma/src/components/BuTabPanel/index.ts
@@ -0,0 +1,2 @@
+export type { BuTabPanelProps, BuTabPanelSlotProps } from './BuTabPanel.vue'
+export { default as BuTabPanel } from './BuTabPanel.vue'
diff --git a/packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts b/packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts
new file mode 100644
index 0000000000..299799a19c
--- /dev/null
+++ b/packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest'
+
+import { BuTabs } from './index'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+import { conform } from '../../../harness/conform'
+// Components
+import { BuTab } from '../BuTab'
+import { BuTabPanel } from '../BuTabPanel'
+
+function mount (component: Parameters<typeof createApp>[0]) {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp(component)
+  app.mount(host)
+  const el = host.firstElementChild!
+  function unmount () {
+    app.unmount()
+    host.remove()
+  }
+  return { el, host, unmount }
+}
+
+// Generic SFCs defeat h()'s overloads — same cast packages/0's own Tabs tests use.
+function tab (value: string, label: string) {
+  return h(BuTab as any, { value }, () => label)
+}
+
+function icon (classes: string, label: string) {
+  return h(BuTab as any, { value: label }, () => [
+    h('span', { class: 'icon is-small' }, [h('i', { 'class': classes, 'aria-hidden': 'true' })]),
+    h('span', label),
+  ])
+}
+
+describe('buTabs', () => {
+  it('should conform to the basic tabs fixture', async () => {
+    const { el, unmount } = mount({
+      render: () => h(BuTabs as any, () => [
+        tab('pictures', 'Pictures'),
+        tab('music', 'Music'),
+        tab('videos', 'Videos'),
+        tab('documents', 'Documents'),
+      ]),
+    })
+
+    await nextTick()
+
+    conform(el, 'tabs')
+
+    unmount()
+  })
+
+  it('should conform to the centered icon tabs fixture', async () => {
+    const { el, unmount } = mount({
+      render: () => h(BuTabs as any, { centered: true }, () => [
+        icon('fas fa-image', 'Pictures'),
+        icon('fas fa-music', 'Music'),
+        icon('fas fa-film', 'Videos'),
+        icon('far fa-file-alt', 'Documents'),
+      ]),
+    })
+
+    await nextTick()
+
+    conform(el, 'tabs:icons')
+
+    unmount()
+  })
+
+  it('should auto-select the first tab and switch panels on click', async () => {
+    const model = shallowRef<string>()
+
+    const { el, host, unmount } = mount({
+      render: () => h(BuTabs as any, {
+        'modelValue': model.value,
+        'onUpdate:modelValue': (value: unknown) => {
+          model.value = value as string
+        },
+      }, {
+        default: () => [tab('a', 'Alpha'), tab('b', 'Beta')],
+        panels: () => [
+          h(BuTabPanel as any, { value: 'a' }, () => 'Alpha panel'),
+          h(BuTabPanel as any, { value: 'b' }, () => 'Beta panel'),
+        ],
+      }),
+    })
+
+    await nextTick()
+
+    const items = el.querySelectorAll('li')
+    const panels = host.querySelectorAll<HTMLElement>('[role="tabpanel"]')
+
+    expect(model.value).toBe('a')
+    expect(items[0]!.classList.contains('is-active')).toBe(true)
+    expect(items[1]!.classList.contains('is-active')).toBe(false)
+    expect(panels[0]!.hidden).toBe(false)
+    expect(panels[1]!.hidden).toBe(true)
+
+    el.querySelectorAll('a')[1]!.click()
+    await nextTick()
+
+    expect(model.value).toBe('b')
+    expect(items[0]!.classList.contains('is-active')).toBe(false)
+    expect(items[1]!.classList.contains('is-active')).toBe(true)
+    expect(panels[0]!.hidden).toBe(true)
+    expect(panels[1]!.hidden).toBe(false)
+
+    unmount()
+  })
+})
diff --git a/packages/bulma/src/components/BuTabs/BuTabs.vue b/packages/bulma/src/components/BuTabs/BuTabs.vue
new file mode 100644
index 0000000000..cd31c669f1
--- /dev/null
+++ b/packages/bulma/src/components/BuTabs/BuTabs.vue
@@ -0,0 +1,67 @@
+<script lang="ts">
+  // Framework
+  import { Tabs } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useAttrs } from 'vue'
+
+  export interface BuTabsProps {
+    /** Centers the tab list */
+    centered?: boolean
+    /** Boxed (bordered) tab style */
+    boxed?: boolean
+    /** Mutually-exclusive toggle button style */
+    toggle?: boolean
+    /** Size modifier */
+    size?: 'small' | 'normal' | 'medium' | 'large'
+  }
+</script>
+
+<script lang="ts" setup generic="T = unknown">
+  defineOptions({ name: 'BuTabs', inheritAttrs: false })
+
+  const attrs = useAttrs()
+
+  defineSlots<{
+    /** BuTab items — rendered inside the tab list `<ul>` */
+    default: () => any
+    /** BuTabPanel content — rendered after `.tabs`, still inside the tabs context */
+    panels?: () => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: T]
+  }>()
+
+  const {
+    centered = false,
+    boxed = false,
+    toggle = false,
+    size,
+  } = defineProps<BuTabsProps>()
+
+  const model = defineModel<T>()
+
+  const classes = toRef(() => [
+    size && `is-${size}`,
+    centered && 'is-centered',
+    boxed && 'is-boxed',
+    toggle && 'is-toggle',
+  ])
+</script>
+
+<template>
+  <Tabs.Root v-model="model">
+    <div
+      class="tabs"
+      :class="classes"
+      v-bind="attrs"
+    >
+      <Tabs.List as="ul">
+        <slot />
+      </Tabs.List>
+    </div>
+
+    <slot name="panels" />
+  </Tabs.Root>
+</template>
diff --git a/packages/bulma/src/components/BuTabs/index.ts b/packages/bulma/src/components/BuTabs/index.ts
new file mode 100644
index 0000000000..9a56859b30
--- /dev/null
+++ b/packages/bulma/src/components/BuTabs/index.ts
@@ -0,0 +1,2 @@
+export type { BuTabsProps } from './BuTabs.vue'
+export { default as BuTabs } from './BuTabs.vue'
diff --git a/packages/bulma/src/components/BuTextarea/BuTextarea.browser.test.ts b/packages/bulma/src/components/BuTextarea/BuTextarea.browser.test.ts
new file mode 100644
index 0000000000..d11edd0678
--- /dev/null
+++ b/packages/bulma/src/components/BuTextarea/BuTextarea.browser.test.ts
@@ -0,0 +1,77 @@
+// Conformance: BuTextarea against the form-textarea fixtures, plus v-model
+// behavior.
+import { afterEach, describe, expect, it } from 'vitest'
+
+// Context
+import BuTextarea from './BuTextarea.vue'
+
+// Utilities
+import { createApp, h, shallowRef } from 'vue'
+
+import { conform } from '../../../harness/conform'
+import { BuControl } from '../BuControl'
+
+// v0's InputControl defaults `type` from its root and Vue writes it as a real
+// attribute on <textarea> where it is invalid — upstream wart, v0-core
+// follow-up. Tolerate it explicitly instead of blanket-allowing extras.
+const TYPE = { ignoreAttrs: ['type', 'value'] }
+
+const cleanups: (() => void)[] = []
+
+function mount (render: () => unknown): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  cleanups.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()!()
+})
+
+describe('buTextarea', () => {
+  it('conforms to the bare textarea fixture', () => {
+    const host = mount(() => h(BuTextarea, { placeholder: 'e.g. Hello world' }))
+
+    conform(host.firstElementChild!, 'form-textarea:basic textarea', TYPE)
+  })
+
+  it('conforms to the rows fixture', () => {
+    const host = mount(() => h(BuTextarea, { placeholder: '10 lines of textarea', rows: '10' }))
+
+    conform(host.firstElementChild!, 'form-textarea:rows attribute', TYPE)
+  })
+
+  it('conforms to the color fixture', () => {
+    const host = mount(() => h(BuTextarea, { color: 'danger', placeholder: 'Danger textarea' }))
+
+    conform(host.firstElementChild!, 'form-textarea:color danger', TYPE)
+  })
+
+  it('conforms to the fixed size fixture', () => {
+    const host = mount(() => h(BuControl, null, () => h(BuTextarea, { fixed: true, placeholder: 'Fixed size textarea' })))
+
+    conform(host.firstElementChild!, 'form-textarea:fixed size', TYPE)
+  })
+
+  it('updates v-model on input', () => {
+    const model = shallowRef('')
+    const host = mount(() => h(BuTextarea, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: string) => {
+        model.value = value
+      },
+    }))
+
+    const textarea = host.querySelector('textarea')!
+    textarea.value = 'hello'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+
+    expect(model.value).toBe('hello')
+  })
+})
diff --git a/packages/bulma/src/components/BuTextarea/BuTextarea.vue b/packages/bulma/src/components/BuTextarea/BuTextarea.vue
new file mode 100644
index 0000000000..bfa59a7109
--- /dev/null
+++ b/packages/bulma/src/components/BuTextarea/BuTextarea.vue
@@ -0,0 +1,147 @@
+/**
+ * @module BuTextarea
+ *
+ * @remarks
+ * Bulma `.textarea` — a renderless `Input.Root` around `Input.Control`
+ * rendered as a native textarea element. Inside an existing `Input.Root`
+ * scope the wrapper is skipped and the control binds to the ambient context
+ * instead. In that ambient mode the root owns the entire behavioral surface:
+ * `v-model`, `disabled`, `readonly`, `required`, `name`, `form`, `id`,
+ * `label`, and all validation props passed to BuTextarea are ignored — only
+ * the presentational modifiers (`color`, `size`, `fixed`) still apply.
+ */
+
+<script lang="ts">
+  // Framework
+  import { InputControl, InputRoot, useInputRoot } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef, useAttrs, watch } from 'vue'
+
+  // Types
+  import type { ID, InputRootContext, InputRootProps } from '@vuetify/v0'
+
+  export type BuTextareaColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+  export type BuTextareaSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuTextareaProps {
+    /** Color modifier: `is-{color}` */
+    color?: BuTextareaColor
+    /** Disables the textarea */
+    disabled?: boolean
+    /** Manual error state override — forces `is-danger` */
+    error?: boolean
+    /** Manual error messages — merged with rule-based errors */
+    errorMessages?: InputRootProps['errorMessages']
+    /** Disable resizing: `has-fixed-size` */
+    fixed?: boolean
+    /** Associate with a form by id */
+    form?: string
+    /** Unique identifier (auto-generated when omitted) */
+    id?: ID
+    /** Accessible label */
+    label?: string
+    /** Form field name */
+    name?: string
+    /** Namespace of the Input.Root context */
+    namespace?: string
+    /** Makes the textarea readonly */
+    readonly?: boolean
+    /** Marks the textarea required */
+    required?: boolean
+    /** Validation rules */
+    rules?: InputRootProps['rules']
+    /** Size modifier: `is-{size}` (emitted only when passed) */
+    size?: BuTextareaSize
+    /** When to trigger validation (v0 default: blur) */
+    validateOn?: InputRootProps['validateOn']
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuTextarea', inheritAttrs: false })
+
+  const attrs = useAttrs()
+
+  defineEmits<{
+    'update:model-value': [value: string]
+    'update:focused': [value: boolean]
+  }>()
+
+  const {
+    color,
+    disabled = false,
+    error = false,
+    errorMessages,
+    fixed = false,
+    form,
+    id,
+    label,
+    name,
+    namespace = 'v0:input:root',
+    readonly = false,
+    required,
+    rules,
+    size,
+    validateOn,
+  } = defineProps<BuTextareaProps>()
+
+  const model = defineModel<string>({ default: '' })
+  const focused = defineModel<boolean>('focused', { default: false })
+
+  // Optional injection: inside an ambient Input.Root the control binds to it
+  // directly and no second root is created (a nested root would shadow it).
+  // A null default returns instead of throwing — only undefined throws.
+  const root = useInputRoot(namespace, null as unknown as InputRootContext) as InputRootContext | null
+
+  if (root) {
+    watch(root.isFocused, value => {
+      focused.value = value
+    })
+  }
+
+  const classes = toRef(() => [
+    color && `is-${color}`,
+    size && `is-${size}`,
+    fixed && 'has-fixed-size',
+  ])
+</script>
+
+<template>
+  <InputRoot
+    v-if="!root"
+    :id
+    v-slot="{ isValid }"
+    v-model="model"
+    v-model:focused="focused"
+    :disabled
+    :error
+    :error-messages
+    :form
+    :label
+    :name
+    :namespace
+    :readonly
+    renderless
+    :required
+    :rules
+    :validate-on
+  >
+    <InputControl
+      v-bind="attrs"
+      as="textarea"
+      class="textarea"
+      :class="[classes, { 'is-danger': isValid === false }]"
+      :namespace
+    />
+  </InputRoot>
+
+  <InputControl
+    v-else
+    v-bind="attrs"
+    as="textarea"
+    class="textarea"
+    :class="[classes, { 'is-danger': root.isValid.value === false }]"
+    :namespace
+  />
+</template>
diff --git a/packages/bulma/src/components/BuTextarea/index.ts b/packages/bulma/src/components/BuTextarea/index.ts
new file mode 100644
index 0000000000..51591586b2
--- /dev/null
+++ b/packages/bulma/src/components/BuTextarea/index.ts
@@ -0,0 +1,3 @@
+export { default as BuTextarea } from './BuTextarea.vue'
+
+export type { BuTextareaColor, BuTextareaProps, BuTextareaSize } from './BuTextarea.vue'
diff --git a/packages/bulma/src/components/index.ts b/packages/bulma/src/components/index.ts
new file mode 100644
index 0000000000..2c837a028b
--- /dev/null
+++ b/packages/bulma/src/components/index.ts
@@ -0,0 +1,22 @@
+export * from './BuBreadcrumb'
+export * from './BuCheckbox'
+export * from './BuControl'
+export * from './BuDropdown'
+export * from './BuField'
+export * from './BuFile'
+export * from './BuHelp'
+export * from './BuInput'
+export * from './BuLabel'
+export * from './BuMenu'
+export * from './BuMessage'
+export * from './BuModal'
+export * from './BuNavbar'
+export * from './BuNotification'
+export * from './BuPagination'
+export * from './BuPanel'
+export * from './BuRadio'
+export * from './BuSelect'
+export * from './BuTab'
+export * from './BuTabPanel'
+export * from './BuTabs'
+export * from './BuTextarea'
diff --git a/packages/bulma/src/index.ts b/packages/bulma/src/index.ts
new file mode 100644
index 0000000000..83173fb2eb
--- /dev/null
+++ b/packages/bulma/src/index.ts
@@ -0,0 +1,2 @@
+// Components re-export — populated as Tier 1 lands (see SPEC.md)
+export * from './components'
diff --git a/packages/bulma/src/utilities/validate.ts b/packages/bulma/src/utilities/validate.ts
new file mode 100644
index 0000000000..fdf8c691ad
--- /dev/null
+++ b/packages/bulma/src/utilities/validate.ts
@@ -0,0 +1,77 @@
+/**
+ * Shared validateOn machinery for the native-wrapping form components
+ * (BuCheckbox, BuRadio, BuSelect, BuFile).
+ *
+ * v0's `parseValidateOn` lives inside `InputRoot.vue` and is not exported from
+ * the Input barrel, so the pattern is reproduced here once for the whole
+ * package instead of per component. v0-core follow-up: export
+ * `parseValidateOn` from the Input barrel so this file can shrink to the
+ * `createValidateOn` factory.
+ */
+
+// Types
+import type { ValidateEvent, ValidateOn } from '@vuetify/v0'
+import type { Ref } from 'vue'
+
+export interface ValidateParsed {
+  event: ValidateEvent
+  modifier?: 'lazy' | 'eager'
+}
+
+/** The subset of a `createInput` return the validateOn gate needs. */
+export interface ValidateHost {
+  isFocused: Ref<boolean>
+  isTouched: Ref<boolean>
+  isValid: { readonly value: boolean | null }
+  validate: () => unknown
+}
+
+export interface ValidateHandlers {
+  /** Whether validation should run for the given trigger. */
+  should: (trigger: ValidateEvent) => boolean
+  /** Native focus handler — mirrors focus into the input context. */
+  onFocus: () => void
+  /** Native blur handler — marks touched and validates when configured. */
+  onBlur: () => void
+}
+
+/** Parse a `validateOn` expression into its event and modifier parts. */
+function parse (value: ValidateOn): ValidateParsed {
+  const parts = String(value).split(' ')
+  let event: ValidateEvent = 'blur'
+  let modifier: 'lazy' | 'eager' | undefined
+
+  for (const part of parts) {
+    if (part === 'lazy' || part === 'eager') modifier = part
+    else if (part === 'blur' || part === 'input' || part === 'submit') event = part
+  }
+
+  return { event, modifier }
+}
+
+/** Factory wiring the canonical validateOn gate + focus handlers to an input. */
+export function createValidateOn (input: ValidateHost, validateOn: () => ValidateOn): ValidateHandlers {
+  function should (trigger: ValidateEvent): boolean {
+    const { event, modifier } = parse(validateOn())
+    if (event === 'submit') return false
+    if (modifier === 'lazy' && !input.isTouched.value) return false
+    if (modifier === 'eager') {
+      if (input.isValid.value === false) return true
+      if (trigger === 'input') return false
+      return trigger === event
+    }
+    return trigger === event
+  }
+
+  function onFocus () {
+    input.isFocused.value = true
+  }
+
+  function onBlur () {
+    input.isFocused.value = false
+    input.isTouched.value = true
+    if (should('blur')) input.validate()
+  }
+
+  return { should, onFocus, onBlur }
+}
diff --git a/packages/bulma/src/vite-env.d.ts b/packages/bulma/src/vite-env.d.ts
new file mode 100644
index 0000000000..99bbbfa0d4
--- /dev/null
+++ b/packages/bulma/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+declare const __DEV__: boolean
+declare const __VERSION__: string
+declare const __VITE_LOGGER_ENABLED__: string
diff --git a/packages/bulma/tsconfig.json b/packages/bulma/tsconfig.json
new file mode 100644
index 0000000000..0c75b174e1
--- /dev/null
+++ b/packages/bulma/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "customConditions": ["development"],
+    "paths": {
+      "#bulma/*": ["./src/*"],
+      "#bulma": ["./src"],
+      "#v0": ["../0/src"],
+      "#v0/*": ["../0/src/*"]
+    },
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "assumeChangesOnlyAffectDirectDependencies": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "esnext",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "harness/**/*.ts",
+    "../0/src/components/fixtures/audit.ts"
+  ],
+  "exclude": ["src/**/__tests__/*"]
+}
diff --git a/packages/bulma/tsdown.config.mts b/packages/bulma/tsdown.config.mts
new file mode 100644
index 0000000000..c1d9f78fd1
--- /dev/null
+++ b/packages/bulma/tsdown.config.mts
@@ -0,0 +1,34 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'tsdown/config'
+import Vue from 'unplugin-vue/rolldown'
+
+import pkg from './package.json' with { type: 'json' }
+
+const v0 = fileURLToPath(new URL('../0/src', import.meta.url))
+const bulma = fileURLToPath(new URL('src', import.meta.url))
+const __VERSION__ = JSON.stringify(pkg.version)
+
+export default defineConfig({
+  plugins: [
+    Vue({ isProduction: true }),
+  ],
+  dts: {
+    vue: true,
+  },
+  define: {
+    __DEV__: 'process.env.NODE_ENV !== \'production\'',
+    __VITE_LOGGER_ENABLED__: 'process.env.VITE_LOGGER_ENABLED',
+    __VUE_OPTIONS_API__: 'true',
+    __VUE_PROD_DEVTOOLS__: 'false',
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
+    __VERSION__,
+  },
+  name: 'paper/bulma',
+  exports: {
+    devExports: 'development',
+  },
+  alias: {
+    '#v0': v0,
+    '#bulma': bulma,
+  },
+})
diff --git a/packages/bulma/vitest.browser.config.ts b/packages/bulma/vitest.browser.config.ts
new file mode 100644
index 0000000000..5cbeea41c6
--- /dev/null
+++ b/packages/bulma/vitest.browser.config.ts
@@ -0,0 +1,59 @@
+import { fileURLToPath } from 'node:url'
+
+import { playwright } from '@vitest/browser-playwright'
+import Vue from 'unplugin-vue/rolldown'
+import { defineConfig } from 'vitest/config'
+
+// No setupFiles / browser commands: packages/0's setup wires its own CDP
+// commands (focus emulation, touch drag) and @testing-library/vue cleanup —
+// all specific to that package's interaction tests. Markup conformance needs
+// none of it; reduced motion is covered by the provider contextOptions below.
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@paper/bulma': fileURLToPath(new URL('src', import.meta.url)),
+      '@vuetify/v0': fileURLToPath(new URL('../0/src', import.meta.url)),
+      // internal
+      '#bulma': fileURLToPath(new URL('src', import.meta.url)),
+      '#v0': fileURLToPath(new URL('../0/src', import.meta.url)),
+    },
+  },
+  plugins: [Vue()],
+  define: {
+    // Real browser environment: `process` does not exist, so these must be
+    // evaluated at config time rather than injected as runtime expressions.
+    '__DEV__': JSON.stringify(process.env.NODE_ENV !== 'production'),
+    '__VITE_LOGGER_ENABLED__': JSON.stringify(process.env.VITE_LOGGER_ENABLED ?? false),
+    '__VERSION__': '"0.0.1"',
+    // Vue esm-bundler feature flags — without these every app creation logs a
+    // "feature flags not explicitly defined" warning. Matches packages/0.
+    '__VUE_OPTIONS_API__': 'true',
+    '__VUE_PROD_DEVTOOLS__': 'false',
+    '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': 'false',
+    // Node-flavored deps read process.env at import time; the browser has none.
+    'process.env': '{}',
+  },
+  test: {
+    name: 'bulma:browser',
+    globals: true,
+    include: ['**/*.browser.test.{ts,tsx}'],
+    // Keep `vitest bench` from re-running any *.bench.ts in Chromium —
+    // canonical benches live on v0:unit only. Matches packages/0.
+    benchmark: {
+      include: [],
+    },
+    testTimeout: 20_000,
+    browser: {
+      enabled: true,
+      provider: playwright({
+        actionTimeout: 5000,
+        contextOptions: {
+          reducedMotion: 'reduce',
+        },
+      }),
+      headless: !process.env.TEST_BAIL,
+      instances: [{ browser: 'chromium' }],
+      viewport: { width: 1280, height: 800 },
+    },
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c22991a371..2c29bb1537 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -664,6 +664,34 @@ importers:
         specifier: 'catalog:'
         version: 11.4.6(vue@3.5.39(typescript@6.0.3))
 
+  packages/bulma:
+    dependencies:
+      '@vuetify/v0':
+        specifier: workspace:^
+        version: link:../0
+      bulma:
+        specifier: ^1.0
+        version: 1.0.4
+    devDependencies:
+      '@vitest/browser-playwright':
+        specifier: 'catalog:'
+        version: 4.1.10(playwright@1.61.0)(vite@8.1.4(@types/node@25.6.0)(esbuild@0.27.4)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(tsx@4.21.0)(yaml@2.9.0))(vitest@4.1.10)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.21.10(@arethetypeswrong/core@0.18.4)(@tsdown/css@0.21.10)(oxc-resolver@11.21.3)(publint@0.3.21)(synckit@0.11.12)(typescript@6.0.3)(vue-tsc@3.2.7(typescript@6.0.3))
+      typescript:
+        specifier: 'catalog:'
+        version: 6.0.3
+      unplugin-vue:
+        specifier: 'catalog:'
+        version: 7.2.0(@types/node@25.6.0)(esbuild@0.27.4)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(tsx@4.21.0)(vue@3.5.39(typescript@6.0.3))(yaml@2.9.0)
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.6.0)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.10.6)(jsdom@28.1.0(supports-color@8.1.1))(vite@8.1.4(@types/node@25.6.0)(esbuild@0.27.4)(jiti@2.7.0)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.48.0)(tsx@4.21.0)(yaml@2.9.0))
+      vue:
+        specifier: 'catalog:'
+        version: 3.5.39(typescript@6.0.3)
+
   packages/genesis:
     dependencies:
       '@vuetify/v0':
@@ -3879,6 +3907,9 @@ packages:
     resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
     engines: {node: '>=18.20'}
 
+  bulma@1.0.4:
+    resolution: {integrity: sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==}
+
   bytes-iec@3.1.1:
     resolution: {integrity: sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==}
     engines: {node: '>= 0.8'}
@@ -10604,6 +10635,8 @@ snapshots:
 
   builtin-modules@5.0.0: {}
 
+  bulma@1.0.4: {}
+
   bytes-iec@3.1.1: {}
 
   cac@6.7.14: {}
diff --git a/vitest.config.ts b/vitest.config.ts
index 284307da81..2c1d8bee41 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
       'packages/0',
       'packages/0/vitest.browser.config.ts',
       'packages/paper',
+      'packages/bulma/vitest.browser.config.ts',
       'apps/docs',
     ],
     globals: true,

From 14bc46b326019be9136d86aed0fb14c324526506 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 1 Aug 2026 10:59:58 -0500
Subject: [PATCH 02/18] fix(bulma): warn in dev when BuHelp validation has no
 ambient Input.Root
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BuInput's internal root is renderless and subtree-scoped, so a sibling
BuHelp silently renders an empty .help while the input still shows
is-danger — deceptively half-wired. Dev-only watchEffect warning plus a
SPEC.md known-limitation entry documenting the InputRoot composition.
---
 packages/bulma/SPEC.md                          |  6 ++++++
 packages/bulma/src/components/BuHelp/BuHelp.vue | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/bulma/SPEC.md b/packages/bulma/SPEC.md
index e3dfcdcabe..310554d60c 100644
--- a/packages/bulma/SPEC.md
+++ b/packages/bulma/SPEC.md
@@ -87,6 +87,12 @@ markup against bulma.io's documented fixtures.
 - **validateOn machinery is package-local** (`src/utilities/validate.ts`): v0's
   `parseValidateOn` is internal to `InputRoot.vue`. v0-core follow-up: export it from
   the Input barrel.
+- **`BuHelp validation` requires an ambient `Input.Root`:** BuInput/BuTextarea create
+  their own *renderless* root scoped to their subtree, so a sibling BuHelp inside the
+  same BuField injects nothing and renders an empty `.help` (while the input still
+  shows `is-danger` — deceptively half-wired). Compose validation fields as
+  `<InputRoot renderless v-model :rules>` wrapping the whole field; BuHelp warns in
+  dev when `validation` is set with no ambient root.
 - **A11y improvements over verbatim docs markup:** BuNotification adds
   `aria-label="delete"` (docs ship the delete button unlabeled); BuDropdown emits
   `role="menu"` only when items actually render `role="menuitem"` (the docs' verbatim
diff --git a/packages/bulma/src/components/BuHelp/BuHelp.vue b/packages/bulma/src/components/BuHelp/BuHelp.vue
index 2188df8081..4747ee91e0 100644
--- a/packages/bulma/src/components/BuHelp/BuHelp.vue
+++ b/packages/bulma/src/components/BuHelp/BuHelp.vue
@@ -14,7 +14,7 @@
   import { InputError, isNull, useInputRoot } from '@vuetify/v0'
 
   // Utilities
-  import { toRef } from 'vue'
+  import { toRef, watchEffect } from 'vue'
 
   // Types
   import type { InputRootContext } from '@vuetify/v0'
@@ -55,6 +55,18 @@
 
   const wired = toRef(() => validation && !isNull(root))
   const tone = toRef(() => color ?? (validation ? 'danger' : undefined))
+
+  if (__DEV__) {
+    watchEffect(() => {
+      if (validation && isNull(root)) {
+        console.warn(
+          '[BuHelp] `validation` is set but no ambient Input.Root context was found — errors will never render.',
+          'BuInput creates its own renderless root scoped to its subtree; wrap the field in',
+          '`<InputRoot renderless v-model :rules>` so sibling BuHelp/BuLabel wire up (see BuHelp.browser.test.ts).',
+        )
+      }
+    })
+  }
 </script>
 
 <template>

From 6c50c9f17c27e0b0fda11db9f17c2996e0733fb7 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 3 Aug 2026 19:22:20 -0500
Subject: [PATCH 03/18] refactor(bulma): express region slots as Bulma part
 components

No named slots in the package: every named region is now an express part
component named after Bulma's own part class, composed in userland exactly
as the markup nests, reading parent state through provide/inject.

New parts: BuModalCard, BuModalContent, BuModalHead, BuModalTitle,
BuModalBody, BuModalFoot, BuModalClose, BuMessageHeader, BuMessageBody,
BuDropdownTrigger, BuDropdownMenu, BuNavbarBrand, BuNavbarMenu, BuTabList,
BuFieldLabel, BuFieldBody, BuPanelHeading, BuPanelTabs, BuPanelTab,
BuPanelBlock, BuPanelIcon.

Text-only slots become props (BuPagination previous/next, BuFile icon);
BuField's label slot is deleted in favour of composing BuLabel.
---
 packages/bulma/SPEC.md                        |  11 ++
 packages/bulma/harness/CANON.md               |  38 ++++--
 packages/bulma/harness/a11y.browser.test.ts   | 105 ++++++++++-------
 .../BuDropdown/BuDropdown.browser.test.ts     |  25 ++--
 .../src/components/BuDropdown/BuDropdown.vue  |  77 +++++--------
 .../bulma/src/components/BuDropdown/index.ts  |   2 +-
 .../BuDropdownMenu/BuDropdownMenu.vue         |  61 ++++++++++
 .../src/components/BuDropdownMenu/index.ts    |   2 +
 .../BuDropdownTrigger/BuDropdownTrigger.vue   |  67 +++++++++++
 .../src/components/BuDropdownTrigger/index.ts |   2 +
 .../BuField/BuField.browser.test.ts           |  12 +-
 .../bulma/src/components/BuField/BuField.vue  |  25 +---
 .../bulma/src/components/BuField/index.ts     |   2 +-
 .../components/BuFieldBody/BuFieldBody.vue    |  22 ++++
 .../bulma/src/components/BuFieldBody/index.ts |   1 +
 .../components/BuFieldLabel/BuFieldLabel.vue  |  39 +++++++
 .../src/components/BuFieldLabel/index.ts      |   2 +
 .../bulma/src/components/BuFile/BuFile.vue    |   8 +-
 .../BuLabel/BuLabel.browser.test.ts           |  12 +-
 .../BuMessage/BuMessage.browser.test.ts       |  21 ++--
 .../src/components/BuMessage/BuMessage.vue    |  43 +++----
 .../bulma/src/components/BuMessage/index.ts   |   2 +-
 .../BuMessageBody/BuMessageBody.vue           |  22 ++++
 .../src/components/BuMessageBody/index.ts     |   1 +
 .../BuMessageHeader/BuMessageHeader.vue       |  47 ++++++++
 .../src/components/BuMessageHeader/index.ts   |   1 +
 .../BuModal/BuModal.browser.test.ts           |  56 ++++++---
 .../bulma/src/components/BuModal/BuModal.vue  |  91 +++++----------
 .../bulma/src/components/BuModal/index.ts     |   2 +-
 .../components/BuModalBody/BuModalBody.vue    |  22 ++++
 .../bulma/src/components/BuModalBody/index.ts |   1 +
 .../components/BuModalCard/BuModalCard.vue    |  55 +++++++++
 .../bulma/src/components/BuModalCard/index.ts |   1 +
 .../components/BuModalClose/BuModalClose.vue  |  33 ++++++
 .../src/components/BuModalClose/index.ts      |   2 +
 .../BuModalContent/BuModalContent.vue         |  54 +++++++++
 .../src/components/BuModalContent/index.ts    |   1 +
 .../components/BuModalFoot/BuModalFoot.vue    |  22 ++++
 .../bulma/src/components/BuModalFoot/index.ts |   1 +
 .../components/BuModalHead/BuModalHead.vue    |  40 +++++++
 .../bulma/src/components/BuModalHead/index.ts |   1 +
 .../components/BuModalTitle/BuModalTitle.vue  |  31 +++++
 .../src/components/BuModalTitle/index.ts      |   1 +
 .../BuNavbar/BuNavbar.browser.test.ts         |  21 ++--
 .../src/components/BuNavbar/BuNavbar.vue      |  64 +++++-----
 .../bulma/src/components/BuNavbar/index.ts    |   2 +-
 .../BuNavbarBrand/BuNavbarBrand.vue           |  70 +++++++++++
 .../src/components/BuNavbarBrand/index.ts     |   2 +
 .../components/BuNavbarMenu/BuNavbarMenu.vue  |  63 ++++++++++
 .../src/components/BuNavbarMenu/index.ts      |   2 +
 .../components/BuPagination/BuPagination.vue  |  17 ++-
 .../BuPanel/BuPanel.browser.test.ts           |  90 +++++++++------
 .../bulma/src/components/BuPanel/BuPanel.vue  | 109 +++---------------
 .../bulma/src/components/BuPanel/index.ts     |   2 +-
 .../components/BuPanelBlock/BuPanelBlock.vue  |  46 ++++++++
 .../src/components/BuPanelBlock/index.ts      |   2 +
 .../BuPanelHeading/BuPanelHeading.vue         |  21 ++++
 .../src/components/BuPanelHeading/index.ts    |   1 +
 .../components/BuPanelIcon/BuPanelIcon.vue    |  34 ++++++
 .../bulma/src/components/BuPanelIcon/index.ts |   2 +
 .../src/components/BuPanelTab/BuPanelTab.vue  |  45 ++++++++
 .../bulma/src/components/BuPanelTab/index.ts  |   2 +
 .../components/BuPanelTabs/BuPanelTabs.vue    |  44 +++++++
 .../bulma/src/components/BuPanelTabs/index.ts |   1 +
 .../src/components/BuTabList/BuTabList.vue    |  57 +++++++++
 .../bulma/src/components/BuTabList/index.ts   |   2 +
 .../components/BuTabs/BuTabs.browser.test.ts  |  21 ++--
 .../bulma/src/components/BuTabs/BuTabs.vue    |  51 ++------
 packages/bulma/src/components/BuTabs/index.ts |   1 -
 packages/bulma/src/components/index.ts        |  21 ++++
 packages/bulma/src/utilities/context.ts       |  23 ++++
 71 files changed, 1377 insertions(+), 503 deletions(-)
 create mode 100644 packages/bulma/src/components/BuDropdownMenu/BuDropdownMenu.vue
 create mode 100644 packages/bulma/src/components/BuDropdownMenu/index.ts
 create mode 100644 packages/bulma/src/components/BuDropdownTrigger/BuDropdownTrigger.vue
 create mode 100644 packages/bulma/src/components/BuDropdownTrigger/index.ts
 create mode 100644 packages/bulma/src/components/BuFieldBody/BuFieldBody.vue
 create mode 100644 packages/bulma/src/components/BuFieldBody/index.ts
 create mode 100644 packages/bulma/src/components/BuFieldLabel/BuFieldLabel.vue
 create mode 100644 packages/bulma/src/components/BuFieldLabel/index.ts
 create mode 100644 packages/bulma/src/components/BuMessageBody/BuMessageBody.vue
 create mode 100644 packages/bulma/src/components/BuMessageBody/index.ts
 create mode 100644 packages/bulma/src/components/BuMessageHeader/BuMessageHeader.vue
 create mode 100644 packages/bulma/src/components/BuMessageHeader/index.ts
 create mode 100644 packages/bulma/src/components/BuModalBody/BuModalBody.vue
 create mode 100644 packages/bulma/src/components/BuModalBody/index.ts
 create mode 100644 packages/bulma/src/components/BuModalCard/BuModalCard.vue
 create mode 100644 packages/bulma/src/components/BuModalCard/index.ts
 create mode 100644 packages/bulma/src/components/BuModalClose/BuModalClose.vue
 create mode 100644 packages/bulma/src/components/BuModalClose/index.ts
 create mode 100644 packages/bulma/src/components/BuModalContent/BuModalContent.vue
 create mode 100644 packages/bulma/src/components/BuModalContent/index.ts
 create mode 100644 packages/bulma/src/components/BuModalFoot/BuModalFoot.vue
 create mode 100644 packages/bulma/src/components/BuModalFoot/index.ts
 create mode 100644 packages/bulma/src/components/BuModalHead/BuModalHead.vue
 create mode 100644 packages/bulma/src/components/BuModalHead/index.ts
 create mode 100644 packages/bulma/src/components/BuModalTitle/BuModalTitle.vue
 create mode 100644 packages/bulma/src/components/BuModalTitle/index.ts
 create mode 100644 packages/bulma/src/components/BuNavbarBrand/BuNavbarBrand.vue
 create mode 100644 packages/bulma/src/components/BuNavbarBrand/index.ts
 create mode 100644 packages/bulma/src/components/BuNavbarMenu/BuNavbarMenu.vue
 create mode 100644 packages/bulma/src/components/BuNavbarMenu/index.ts
 create mode 100644 packages/bulma/src/components/BuPanelBlock/BuPanelBlock.vue
 create mode 100644 packages/bulma/src/components/BuPanelBlock/index.ts
 create mode 100644 packages/bulma/src/components/BuPanelHeading/BuPanelHeading.vue
 create mode 100644 packages/bulma/src/components/BuPanelHeading/index.ts
 create mode 100644 packages/bulma/src/components/BuPanelIcon/BuPanelIcon.vue
 create mode 100644 packages/bulma/src/components/BuPanelIcon/index.ts
 create mode 100644 packages/bulma/src/components/BuPanelTab/BuPanelTab.vue
 create mode 100644 packages/bulma/src/components/BuPanelTab/index.ts
 create mode 100644 packages/bulma/src/components/BuPanelTabs/BuPanelTabs.vue
 create mode 100644 packages/bulma/src/components/BuPanelTabs/index.ts
 create mode 100644 packages/bulma/src/components/BuTabList/BuTabList.vue
 create mode 100644 packages/bulma/src/components/BuTabList/index.ts
 create mode 100644 packages/bulma/src/utilities/context.ts

diff --git a/packages/bulma/SPEC.md b/packages/bulma/SPEC.md
index 310554d60c..e9935e7dfa 100644
--- a/packages/bulma/SPEC.md
+++ b/packages/bulma/SPEC.md
@@ -61,6 +61,11 @@ markup against bulma.io's documented fixtures.
   attribute on the wrapping `<label>` and its CSS selects on it; the components reproduce
   it (alongside the input's real `disabled`). Expect axe/validator discussion — deliberate
   markup fidelity.
+- **BuModalCard's `aria-labelledby` needs BuModalTitle:** v0's dialog context mints a
+  `titleId` whether or not a title is mounted, and BuModalCard binds it unconditionally, so
+  a card composed without BuModalTitle points `aria-labelledby` at an element that does not
+  exist. Bulma's own card markup always ships a `.modal-card-title`; compose one (or drop
+  BuModalHead entirely and label the panel yourself).
 - **Esc closes a `blocking` BuModal:** matches v0 Dialog semantics (`blocking` gates
   scrim-click dismissal only, mirroring native `<dialog>` cancel). Revisit if the DS wants
   `blocking` to gate keyboard dismissal too.
@@ -93,6 +98,12 @@ markup against bulma.io's documented fixtures.
   shows `is-danger` — deceptively half-wired). Compose validation fields as
   `<InputRoot renderless v-model :rules>` wrapping the whole field; BuHelp warns in
   dev when `validation` is set with no ambient root.
+- **Part components are composed, not enforced:** region parts (BuModalHead, BuMessageBody,
+  BuDropdownMenu, BuNavbarBrand, …) read their parent's state through an optional context
+  and warn in dev when it is missing, so a part rendered outside its parent still emits
+  Bulma markup with inert behavior rather than throwing. Parts backed by a v0 context
+  (BuPanelBlock, BuPanelTab, BuTab, BuModalTitle) inherit v0's stricter contract instead
+  and throw `V0_CONTEXT_MISSING`.
 - **A11y improvements over verbatim docs markup:** BuNotification adds
   `aria-label="delete"` (docs ship the delete button unlabeled); BuDropdown emits
   `role="menu"` only when items actually render `role="menuitem"` (the docs' verbatim
diff --git a/packages/bulma/harness/CANON.md b/packages/bulma/harness/CANON.md
index 431a36fa42..43cad1dee0 100644
--- a/packages/bulma/harness/CANON.md
+++ b/packages/bulma/harness/CANON.md
@@ -6,7 +6,7 @@
 - Import ONLY from `@vuetify/v0` — never `#v0/*` (that alias in tsconfig/tsdown exists for tooling parity with genesis; the cheatsheet forbids its use in package source).
 - Layout: `src/components/BuThing/BuThing.vue` + `src/components/BuThing/index.ts` (`export type { BuThingProps } from './BuThing.vue'` + `export { default as BuThing } from './BuThing.vue'`). Append ONE alphabetically-placed line per component to `src/components/index.ts`; touch no other shared file. Never edit root tsconfig.json, vitest.config.ts, pnpm-workspace.yaml, or packages/0.
 - Dual-script SFC, `defineOptions({ name: 'BuThing' })`, destructured props (no `withDefaults`), `defineModel` + explicit kebab `defineEmits`, `toRef` slotProps object, no `<style>` block at all in Tier 1, no `<style scoped>` ever.
-- Family shape is FLAT components (BuField > BuControl > BuInput composed in userland exactly as Bulma nests classes) — no compound `BuX.Y` namespaces in Tier 1.
+- Family shape is FLAT components (BuField > BuControl > BuInput composed in userland exactly as Bulma nests classes) — no compound `BuX.Y` namespaces in Tier 1. Region parts are flat components too (`BuModalHead`, not `BuModal.Head`); see "Slots" below.
 
 ## Prop → modifier class mapping (identical across all groups)
 | Prop | Type | Class |
@@ -17,7 +17,7 @@
 | `plaintext` | `boolean` | `is-static` (+`readonly` attr) — `static` is a reserved word, do not use it as a prop |
 | `addons` (BuField) | `boolean\|'centered'\|'right'` | `has-addons[-{v}]` |
 | `grouped` (BuField) | `boolean\|'centered'\|'right'\|'multiline'` | `is-grouped[-{v}]` |
-| `horizontal` (BuField) | `boolean` | `is-horizontal` (+ renders `.field-label`/`.field-body`) |
+| `horizontal` (BuField) | `boolean` | `is-horizontal` (the columns are the BuFieldLabel / BuFieldBody parts) |
 | `icons` (BuControl) | `'left'\|'right'\|'both'` | `has-icons-left/right` |
 
 - Undefined prop ⇒ no class. Props are conveniences, never gates: user `class` always merges (single-root Vue merging; verify on any multi-root part).
@@ -31,13 +31,29 @@
 
 ## v-model names (plain `v-model` everywhere — no named models except Input's existing `v-model:focused`)
 - Open/closed boolean: BuModal, BuDropdown, BuNavbar (burger/menu), BuMessage, BuNotification.
-- Selected value (generic `T`): BuTabs, BuPanel (blocks), BuMenu.
+- Selected value (generic `T`): BuTabs, BuPanel (blocks), BuMenu. BuPanelTabs owns a SECOND model of its own (the `.panel-tabs` scope) — the two selections never share a v-model.
 - `number` current page (1-indexed): BuPagination.
 - `string` value: BuInput, BuTextarea; `string|string[]`: BuSelect (multiple); `boolean`: BuCheckbox; value-compare: BuRadio (+ `value` prop, native `name` grouping).
 - BuBreadcrumb: NO v-model (v0 Breadcrumbs has none); last item is declaratively current.
 
-## Slots
-- Default slot = the component's main content region. Named slots take the Bulma sub-part name minus block prefix: BuMessage `#header`, BuModal `#header`/`#footer` (card variant), BuDropdown `#trigger`, BuField `#label`.
+## Slots — there are none named; regions are PART COMPONENTS
+- **No named slots anywhere in this package.** Default slot only; it is the component's main content region. Scoped default slots (slot props) stay fine — the ban is on named regions, not on handing state to the one slot.
+- Every region Bulma names with a part class is an express **part component**, named after that class and composed in userland exactly as Bulma nests the markup:
+
+  | Parent | Parts |
+  |---|---|
+  | BuModal | BuModalCard, BuModalContent, BuModalHead, BuModalTitle, BuModalBody, BuModalFoot, BuModalClose |
+  | BuMessage | BuMessageHeader, BuMessageBody |
+  | BuDropdown | BuDropdownTrigger, BuDropdownMenu |
+  | BuNavbar | BuNavbarBrand, BuNavbarMenu |
+  | BuTabs | BuTabList (+ existing BuTab, BuTabPanel) |
+  | BuField | BuFieldLabel, BuFieldBody |
+  | BuPanel | BuPanelHeading, BuPanelTabs, BuPanelTab, BuPanelBlock, BuPanelIcon |
+
+- Parts that need parent state **inject** it — never props drilled from userland. Two sources: a package context (`bulma:modal`, `bulma:message`, `bulma:dropdown`, `bulma:navbar`) where the Bu parent owns the state, or the v0 context the parent already provides (Dialog, Tabs, Selection/Single) where v0 owns it. Package-context injection is OPTIONAL (created with a `null` default) plus a `__DEV__` warn through `orphan()` in `src/utilities/context.ts`, so an orphan part still renders its Bulma markup instead of throwing — the BuHelp precedent. Pure-markup parts (BuModalBody/Foot, BuMessageBody, BuFieldLabel/Body, BuPanelHeading/Icon) inject nothing and warn about nothing.
+- A part that always ships with its sibling in the docs markup renders it: BuModalHead renders the `.delete` close, BuMessageHeader renders its `.delete`, BuNavbarBrand renders the `.navbar-burger`, BuDropdownMenu renders `.dropdown-content` inside `.dropdown-menu`.
+- **Slot → prop** where the slot only customized text and userland assembly buys nothing: BuPagination `previous`/`next`, BuFile `icon`. (`.pagination-previous`/`.pagination-next` are real part classes, but BuPagination generates a fixture-mandated DOM order from `pages`; hand-assembling its two mandatory anchors would only invite a wrong order.)
+- **Slot deleted** where a sibling component already covered it: BuField's old `#label`, in favour of composing BuLabel directly (inside BuFieldLabel when horizontal).
 
 ## Rendering doctrine
 - Element TAGS must match fixtures exactly (this is the product). Therefore Dialog.Content is `as="div"` (never native `<dialog>`), Tabs.List is `as="ul"`, etc.
@@ -57,24 +73,24 @@
 
 ## G1
 
-BuModal: Dialog.Root + Dialog.Content renderless with `as` unused — render `<div class="modal" :class="{'is-active': isOpen}">` yourself and hand-pick Content attrs (keep id/role/aria-modal/aria-labelledby/zIndex style; you are in renderless mode so spreading attrs is safe — never spread them in wrapped mode, double-fire hazard). Do NOT use v0 Scrim for `.modal-background` even with teleport=false — it renders one element per ACTIVE STACK TICKET globally (Scrim.vue v-for tickets); hand-roll `<div class="modal-background" @click>` that calls close() unless `blocking`. Note in SPEC.md: DialogContent's stack ticket cannot be marked scrim:false, so an app-level global <Scrim> double-backdrops BuModal (known limitation). Esc: as=div gets no native cancel — bind keydown Escape gated on `globalTop` from Content slot props so only the top modal closes. FOCUS TRAP: v0 has no focus-trap composable — hand-roll: on open focus first focusable (or the modal), wrap Tab/Shift+Tab within the .modal subtree, restore prior focus on close; file/flag a v0-core follow-up. `.modal-close` = Dialog.Close as-is (class modal-close is-large tolerable via props); modal-card variant must reproduce fixture exactly (header p.modal-card-title maps to Dialog.Title as="p"; wire aria-labelledby, else the id dangles — render Title or omit hand-picked aria-labelledby). closeOnClickOutside(bounds:true vs .modal-content) already closes on background clicks — don't double-wire. BuMessage/BuNotification: plain v-model + Presence (immediate default, unmount on leave); delete button is a bare button.delete click→model=false; BuNotification MUST add aria-label="delete" (fixture lacks it, deliberate a11y addition); message body-only variant (no header) required.
+BuModal: Dialog.Root + Dialog.Content renderless with `as` unused — render `<div class="modal" :class="{'is-active': isOpen}">` yourself and hand-pick Content attrs (keep id/role/aria-modal/aria-labelledby/zIndex style; you are in renderless mode so spreading attrs is safe — never spread them in wrapped mode, double-fire hazard). Do NOT use v0 Scrim for `.modal-background` even with teleport=false — it renders one element per ACTIVE STACK TICKET globally (Scrim.vue v-for tickets); hand-roll `<div class="modal-background" @click>` that calls close() unless `blocking`. Note in SPEC.md: DialogContent's stack ticket cannot be marked scrim:false, so an app-level global <Scrim> double-backdrops BuModal (known limitation). Esc: as=div gets no native cancel — bind keydown Escape gated on `globalTop` from Content slot props so only the top modal closes. FOCUS TRAP: v0 has no focus-trap composable — hand-roll: on open focus first focusable (or the modal), wrap Tab/Shift+Tab within the .modal subtree, restore prior focus on close; file/flag a v0-core follow-up. `.modal-close` = Dialog.Close as-is (class modal-close is-large tolerable via props); modal-card variant must reproduce fixture exactly (header p.modal-card-title maps to Dialog.Title as="p"; wire aria-labelledby, else the id dangles — render Title or omit hand-picked aria-labelledby). AMENDED by the part-component ruling: there is no `card` prop — the variant is whichever panel part userland composes (BuModalCard vs BuModalContent + BuModalClose). BuModal renders only `.modal` + `.modal-background`; the panel parts carry id/role/aria-modal/aria-labelledby read straight off v0's dialog context and register themselves with the focus trap through `bulma:modal`, since the trap can no longer hold a local template ref. closeOnClickOutside(bounds:true vs .modal-content) already closes on background clicks — don't double-wire. BuMessage/BuNotification: plain v-model + Presence (immediate default, unmount on leave); delete button is a bare button.delete click→model=false; AMENDED: BuMessage's regions are BuMessageHeader (which renders that delete, closing through `bulma:message`) and BuMessageBody — the header-less variant is simply a message with no BuMessageHeader; BuNotification MUST add aria-label="delete" (fixture lacks it, deliberate a11y addition); message body-only variant (no header) required.
 
 ## G2
 
-BuDropdown: SKIP v0 Popover entirely (PopoverContent hardwires `popover:''` → top-layer + UA margin:unset defeats Bulma's in-flow .dropdown-menu absolute positioning). Use Toggle.Root pattern or bare model + useClickOutside; bind `is-active` on .dropdown root. Hand-bind trigger aria: aria-haspopup, aria-controls={menuId via useId}, aria-expanded (Toggle only gives aria-pressed). role policy: emit role="menu" on .dropdown-menu ONLY when items are actionable links rendered with role="menuitem" (verbatim fixture fails axe aria-required-children); arbitrary-content mode emits neither. Own Esc-to-close too, not just click-outside. Support is-hoverable (pure CSS — no JS when set), is-right, is-up as props. BuMenu: markup per fixture — is-active lives on the ANCHOR (unlike tabs/breadcrumb); nested `<ul>` has NO class and is ALWAYS visible in Bulma (no collapse behavior documented — do not invent one for Tier 1); active tracking via createNested `active:'single'` (or Selection) driving v-model; alternating p.menu-label + ul.menu-list sections via slots/items. BuPanel: nav.panel with FLAT heterogeneous children (no list wrapper); .panel-tabs anchors = one single-Selection scope; .panel-block is-active = a second Selection scope (single default, `multiple` prop); spreading Selection.Item attrs directly on your <a class=panel-block> is safe (Item is a pure provider, no wrapper element); label.panel-block>input[checkbox] rows are native passthrough markup.
+BuDropdown: SKIP v0 Popover entirely (PopoverContent hardwires `popover:''` → top-layer + UA margin:unset defeats Bulma's in-flow .dropdown-menu absolute positioning). Use Toggle.Root pattern or bare model + useClickOutside; bind `is-active` on .dropdown root. Hand-bind trigger aria: aria-haspopup, aria-controls={menuId via useId}, aria-expanded (Toggle only gives aria-pressed). role policy: emit role="menu" on .dropdown-menu ONLY when items are actionable links rendered with role="menuitem" (verbatim fixture fails axe aria-required-children); arbitrary-content mode emits neither. Own Esc-to-close too, not just click-outside. Support is-hoverable (pure CSS — no JS when set), is-right, is-up as props. AMENDED: BuDropdown renders only `.dropdown`; BuDropdownTrigger (`.dropdown-trigger`, hands the trigger attrs to its default slot) and BuDropdownMenu (`.dropdown-menu` > `.dropdown-content`, owns the role policy and the `item` attrs) are parts reading `bulma:dropdown`. BuMenu: markup per fixture — is-active lives on the ANCHOR (unlike tabs/breadcrumb); nested `<ul>` has NO class and is ALWAYS visible in Bulma (no collapse behavior documented — do not invent one for Tier 1); active tracking via createNested `active:'single'` (or Selection) driving v-model; alternating p.menu-label + ul.menu-list sections via slots/items. BuPanel: nav.panel with FLAT heterogeneous children (no list wrapper); .panel-tabs anchors = one single-Selection scope; .panel-block is-active = a second Selection scope (single default, `multiple` prop); label.panel-block>input[checkbox] rows are native passthrough markup. AMENDED: those children are now parts, not `heading`/`tabs`/`items` props — BuPanelHeading, BuPanelTabs (its own nested Single scope + its own v-model, mandatory force) > BuPanelTab, BuPanelBlock (BuPanel's Selection scope) > BuPanelIcon, interleaved with raw `.panel-block` markup in whatever order the user writes, exactly as Bulma nests it. Anchors bind hand-picked state, never the Item attrs spread (see the selection-anchor rule above).
 
 ## G3
 
-BuTabs: Tabs.Root renders NO element (not an Atom) — you render div.tabs (+ is-centered/size/is-boxed/is-toggle props per canon) and `<ul>` (Tabs.List as="ul" is fine, role=tablist lands on it). Items: Tabs.Item RENDERLESS, render `<li :class="{'is-active': isSelected}"><a v-bind="attrs">` yourself — is-active goes on the li per fixture, anchors carry no href. Panels: v0 Tabs.Panel as-is (`hidden` attr fine here — Bulma defines no panel CSS); Panel value prop is required; mandatory='force' default auto-selects first tab. BuNavbar: Toggle model (or plain defineModel) drives BOTH `.navbar-burger.is-active` and `.navbar-menu.is-active`; do NOT use Collapsible.Content (sets hidden attr — .navbar-menu.is-active{display:block} author CSS silently beats it). Burger renders as `<a role="button">` — Toggle.Root as="a" supplies role/tabindex/keydown; you must hand-bind aria-expanded (Toggle only emits aria-pressed) and aria-label="menu"; burger has FOUR aria-hidden spans in 1.0 (fixture-verified), plus data-target=menuId and id on .navbar-menu. navbar-dropdown (has-dropdown/is-hoverable/is-selected) is Tier-1 markup PASSTHROUGH via slot content — hover behavior is Bulma CSS, zero JS; do not build click-dropdown behavior in this pass.
+BuTabs: Tabs.Root renders NO element (not an Atom) — div.tabs (+ is-centered/size/is-boxed/is-toggle props per canon) and the `<ul>` (Tabs.List as="ul", role=tablist lands on it) are rendered by BuTabList. AMENDED: BuTabs is the Tabs.Root provider and renders no element at all, because the panels are siblings of `.tabs` and the selection context has to wrap both — every `.tabs` modifier prop therefore lives on BuTabList, and BuTabs takes only the v-model. Items: Tabs.Item RENDERLESS, render `<li :class="{'is-active': isSelected}"><a v-bind="attrs">` yourself — is-active goes on the li per fixture, anchors carry no href. Panels: v0 Tabs.Panel as-is (`hidden` attr fine here — Bulma defines no panel CSS); Panel value prop is required; mandatory='force' default auto-selects first tab. BuNavbar: Toggle model (or plain defineModel) drives BOTH `.navbar-burger.is-active` and `.navbar-menu.is-active`; do NOT use Collapsible.Content (sets hidden attr — .navbar-menu.is-active{display:block} author CSS silently beats it). AMENDED: `.navbar-brand` (which renders that burger) and `.navbar-menu` are the BuNavbarBrand / BuNavbarMenu parts reading `bulma:navbar`; the `burger` prop moved onto BuNavbarBrand. Burger renders as `<a role="button">` — Toggle.Root as="a" supplies role/tabindex/keydown; you must hand-bind aria-expanded (Toggle only emits aria-pressed) and aria-label="menu"; burger has FOUR aria-hidden spans in 1.0 (fixture-verified), plus data-target=menuId and id on .navbar-menu. navbar-dropdown (has-dropdown/is-hoverable/is-selected) is Tier-1 markup PASSTHROUGH via slot content — hover behavior is Bulma CSS, zero JS; do not build click-dropdown behavior in this pass.
 
 ## G4
 
-BuPagination: prop `pages` (total page count) mapped to v0 Root `:size="pages" :items-per-page="1"` (v0 size = TOTAL ITEMS, not pages — do not expose size/itemsPerPage in Tier 1); v-model = current page. DOM order per fixture: a.pagination-previous, a.pagination-next, THEN ul.pagination-list (CSS reorders visually) — the harness diffs order. All interactive parts `as="a"`: verified in source that PaginationPrev/Next/Item with as=a omit the `disabled` attr and emit aria-disabled + tabindex=-1 — bind `:class="{'is-disabled': isDisabled}"` yourself (fixture: class, never attribute, on anchors); current page: `:class="{'is-current': isSelected}"`, no href, aria-current=page comes from Item attrs. Wrap each Item/Ellipsis in `<li>` by iterating Root slot `items`; Ellipsis span.pagination-ellipsis with &hellip;. aria-label text differs from fixture ('Goto page 1' vs localized) — tolerated, don't chase it. BuBreadcrumb: NO v-model (v0 Breadcrumbs has none — current item is declarative). nav.breadcrumb[aria-label=breadcrumbs] > List as="ul"; do NOT render Divider parts (Bulma separators are li+li::before CSS); last item = `<li class="is-active">` wrapping Breadcrumbs.Page `as="a"` with href kept + aria-current=page (fixture keeps the anchor, Bulma styles it inert); separator/align/size = root modifier props per canon (has-*-separator). Skip the Ellipsis/overflow machinery in Tier 1 — it only engages if rendered.
+BuPagination: prop `pages` (total page count) mapped to v0 Root `:size="pages" :items-per-page="1"` (v0 size = TOTAL ITEMS, not pages — do not expose size/itemsPerPage in Tier 1); v-model = current page. DOM order per fixture: a.pagination-previous, a.pagination-next, THEN ul.pagination-list (CSS reorders visually) — the harness diffs order. All interactive parts `as="a"`: verified in source that PaginationPrev/Next/Item with as=a omit the `disabled` attr and emit aria-disabled + tabindex=-1 — bind `:class="{'is-disabled': isDisabled}"` yourself (fixture: class, never attribute, on anchors); current page: `:class="{'is-current': isSelected}"`, no href, aria-current=page comes from Item attrs. Wrap each Item/Ellipsis in `<li>` by iterating Root slot `items`; Ellipsis span.pagination-ellipsis with &hellip;. aria-label text differs from fixture ('Goto page 1' vs localized) — tolerated, don't chase it. Prev/next LABELS are the `previous`/`next` props (default 'Previous'/'Next page'), never slots — the component owns that DOM order. BuBreadcrumb: NO v-model (v0 Breadcrumbs has none — current item is declarative). nav.breadcrumb[aria-label=breadcrumbs] > List as="ul"; do NOT render Divider parts (Bulma separators are li+li::before CSS); last item = `<li class="is-active">` wrapping Breadcrumbs.Page `as="a"` with href kept + aria-current=page (fixture keeps the anchor, Bulma styles it inert); separator/align/size = root modifier props per canon (has-*-separator). Skip the Ellipsis/overflow machinery in Tier 1 — it only engages if rendered.
 
 ## G5
 
-BuField/BuControl/BuLabel/BuHelp are pure hand-rolled markup (v0 has NO Form.Field/Control/Label/Help) wired to Input context: useInputRoot is exported from the barrel; render `<label class="label" :for="id">` yourself (no Input.Label exists). BuField props per canon: addons/grouped/horizontal — horizontal renders .field-label.is-{size} + .field-body per the form-general fixture (in scope, fixture covers it). BuControl: `icons` prop → has-icons-left/right; `loading` + `size` → is-loading + is-{size} ON THE CONTROL (fixture: spinner sizing duplicates the size class on the control, state classes is-hovered/is-focused are docs demos — skip). BuHelp: when rendering validation errors use Input.Error RENDERLESS for its id/aria-live wiring (registration makes Root's aria-errormessage appear only when mounted), class `help is-danger`; plain help text via Input.Description or bare p.help + color prop. BuInput: Input.Root renderless wrapper is optional-markup (Bulma .input is bare-capable — Root renders div by default; use renderless so no extra wrapper lands) + Input.Control class="input" `:class` color/size/rounded/plaintext (is-static + readonly) and `{'is-danger': isValid === false}`; BuTextarea: Input.Control as="textarea" (+ rows passthrough, has-fixed-size prop `fixed`). Form aggregate: parent v0 Form v-model is WRITTEN BY the form (read-only validity) — don't treat it as a control channel. validateOn default stays v0's 'blur'.
+BuField/BuControl/BuLabel/BuHelp are pure hand-rolled markup (v0 has NO Form.Field/Control/Label/Help) wired to Input context: useInputRoot is exported from the barrel; render `<label class="label" :for="id">` yourself (no Input.Label exists). BuField props per canon: addons/grouped/horizontal — horizontal is class-only on BuField; its two columns are the BuFieldLabel (`.field-label.is-{size}`, so `size` lives there) and BuFieldBody parts per the form-general fixture. BuControl: `icons` prop → has-icons-left/right; `loading` + `size` → is-loading + is-{size} ON THE CONTROL (fixture: spinner sizing duplicates the size class on the control, state classes is-hovered/is-focused are docs demos — skip). BuHelp: when rendering validation errors use Input.Error RENDERLESS for its id/aria-live wiring (registration makes Root's aria-errormessage appear only when mounted), class `help is-danger`; plain help text via Input.Description or bare p.help + color prop. BuInput: Input.Root renderless wrapper is optional-markup (Bulma .input is bare-capable — Root renders div by default; use renderless so no extra wrapper lands) + Input.Control class="input" `:class` color/size/rounded/plaintext (is-static + readonly) and `{'is-danger': isValid === false}`; BuTextarea: Input.Control as="textarea" (+ rows passthrough, has-fixed-size prop `fixed`). Form aggregate: parent v0 Form v-model is WRITTEN BY the form (read-only validity) — don't treat it as a control channel. validateOn default stays v0's 'blur'.
 
 ## G6
 
-All four wrap NATIVES (spec deviation 3 — confirmed: v0 Checkbox/Radio render role-button + inline-hidden input, cannot produce Bulma's visible native; v0 Select is a custom listbox). Use createInput for validation/Form auto-registration and bind onInput/onBlur/isFocused yourself (createInput has NO DOM events; InputRoot.vue parseValidateOn is the canonical validateOn pattern). BuSelect: div.select wrapper carries color/size/rounded/multiple/loading classes (is-multiple + native multiple/size attrs); native <select v-model>; is-hovered/is-focused are docs-only demos — skip; icon pairing via BuControl (G5's), not here. BuCheckbox: `<label class="checkbox"><input type=checkbox v-model> {slot}</label>`; BuRadio: `<label class="radio">` + value/name, native name grouping, no group component in Tier 1; disabled mirrors Bulma's documented non-standard label[disabled] AND input[disabled] — keep both, expect axe discussion, note in SPEC.md; .checkboxes/.radios list wrappers = optional presentational props or userland markup. BuFile: div.file root carries ALL modifiers (color/size/boxed/fullwidth/centered/right/`filename` boolean → has-name); structure exactly `label.file-label > input.file-input[type=file] + span.file-cta > span.file-icon + span.file-label` — NOTE Bulma's own class collision: .file-label is BOTH the outer label and the inner CTA text span, reproduce it verbatim; span.file-name text updates from the selected file when `filename` (the docs' bring-your-own-JS pattern is the fixture's last block); wire createInput for validation but the value model is the FileList/filename — keep v-model semantics minimal (emit change + expose files) rather than forcing string v-model.
+All four wrap NATIVES (spec deviation 3 — confirmed: v0 Checkbox/Radio render role-button + inline-hidden input, cannot produce Bulma's visible native; v0 Select is a custom listbox). Use createInput for validation/Form auto-registration and bind onInput/onBlur/isFocused yourself (createInput has NO DOM events; InputRoot.vue parseValidateOn is the canonical validateOn pattern). BuSelect: div.select wrapper carries color/size/rounded/multiple/loading classes (is-multiple + native multiple/size attrs); native <select v-model>; is-hovered/is-focused are docs-only demos — skip; icon pairing via BuControl (G5's), not here. BuCheckbox: `<label class="checkbox"><input type=checkbox v-model> {slot}</label>`; BuRadio: `<label class="radio">` + value/name, native name grouping, no group component in Tier 1; disabled mirrors Bulma's documented non-standard label[disabled] AND input[disabled] — keep both, expect axe discussion, note in SPEC.md; .checkboxes/.radios list wrappers = optional presentational props or userland markup. BuFile: div.file root carries ALL modifiers (color/size/boxed/fullwidth/centered/right/`filename` boolean → has-name); structure exactly `label.file-label > input.file-input[type=file] + span.file-cta > span.file-icon + span.file-label` (the `.file-icon` glyph comes from the `icon` prop, default `fas fa-upload`) — NOTE Bulma's own class collision: .file-label is BOTH the outer label and the inner CTA text span, reproduce it verbatim; span.file-name text updates from the selected file when `filename` (the docs' bring-your-own-JS pattern is the fixture's last block); wire createInput for validation but the value model is the FileList/filename — keep v-model semantics minimal (emit change + expose files) rather than forcing string v-model.
diff --git a/packages/bulma/harness/a11y.browser.test.ts b/packages/bulma/harness/a11y.browser.test.ts
index d8826d8f57..5960f3dc23 100644
--- a/packages/bulma/harness/a11y.browser.test.ts
+++ b/packages/bulma/harness/a11y.browser.test.ts
@@ -8,6 +8,8 @@ import { BuBreadcrumb } from '#bulma/components/BuBreadcrumb'
 import { BuCheckbox } from '#bulma/components/BuCheckbox'
 import { BuControl } from '#bulma/components/BuControl'
 import { BuDropdown } from '#bulma/components/BuDropdown'
+import { BuDropdownMenu } from '#bulma/components/BuDropdownMenu'
+import { BuDropdownTrigger } from '#bulma/components/BuDropdownTrigger'
 import { BuField } from '#bulma/components/BuField'
 import { BuFile } from '#bulma/components/BuFile'
 import { BuHelp } from '#bulma/components/BuHelp'
@@ -15,14 +17,29 @@ import { BuInput } from '#bulma/components/BuInput'
 import { BuLabel } from '#bulma/components/BuLabel'
 import { BuMenu } from '#bulma/components/BuMenu'
 import { BuMessage } from '#bulma/components/BuMessage'
+import { BuMessageBody } from '#bulma/components/BuMessageBody'
+import { BuMessageHeader } from '#bulma/components/BuMessageHeader'
 import { BuModal } from '#bulma/components/BuModal'
+import { BuModalBody } from '#bulma/components/BuModalBody'
+import { BuModalCard } from '#bulma/components/BuModalCard'
+import { BuModalFoot } from '#bulma/components/BuModalFoot'
+import { BuModalHead } from '#bulma/components/BuModalHead'
+import { BuModalTitle } from '#bulma/components/BuModalTitle'
 import { BuNavbar } from '#bulma/components/BuNavbar'
+import { BuNavbarBrand } from '#bulma/components/BuNavbarBrand'
+import { BuNavbarMenu } from '#bulma/components/BuNavbarMenu'
 import { BuNotification } from '#bulma/components/BuNotification'
 import { BuPagination } from '#bulma/components/BuPagination'
 import { BuPanel } from '#bulma/components/BuPanel'
+import { BuPanelBlock } from '#bulma/components/BuPanelBlock'
+import { BuPanelHeading } from '#bulma/components/BuPanelHeading'
+import { BuPanelIcon } from '#bulma/components/BuPanelIcon'
+import { BuPanelTab } from '#bulma/components/BuPanelTab'
+import { BuPanelTabs } from '#bulma/components/BuPanelTabs'
 import { BuRadio } from '#bulma/components/BuRadio'
 import { BuSelect } from '#bulma/components/BuSelect'
 import { BuTab } from '#bulma/components/BuTab'
+import { BuTabList } from '#bulma/components/BuTabList'
 import { BuTabPanel } from '#bulma/components/BuTabPanel'
 import { BuTabs } from '#bulma/components/BuTabs'
 import { BuTextarea } from '#bulma/components/BuTextarea'
@@ -36,9 +53,9 @@ import { audit, REPORT_END, REPORT_START, summarize } from '#v0/components/fixtu
 import { createApp, h, nextTick } from 'vue'
 
 // Types
-import type { BuDropdownSlotProps, BuDropdownTriggerSlotProps } from '#bulma/components/BuDropdown'
+import type { BuDropdownMenuSlotProps } from '#bulma/components/BuDropdownMenu'
+import type { BuDropdownTriggerSlotProps } from '#bulma/components/BuDropdownTrigger'
 import type { BuMenuSection } from '#bulma/components/BuMenu'
-import type { BuPanelItem } from '#bulma/components/BuPanel'
 import type { AxeViolation } from '#v0/components/fixtures/audit'
 import type { Plugin } from 'vue'
 
@@ -93,7 +110,7 @@ function icon (side: string, glyph: string) {
   return h('span', { class: `icon is-small is-${side}` }, h('i', { 'class': `fas fa-${glyph}`, 'aria-hidden': 'true' }))
 }
 
-function trigger (props: BuDropdownTriggerSlotProps) {
+function button (props: BuDropdownTriggerSlotProps) {
   return h('button', { class: 'button', ...props.attrs }, [
     h('span', 'Dropdown button'),
     h('span', { class: 'icon is-small' }, [
@@ -102,7 +119,7 @@ function trigger (props: BuDropdownTriggerSlotProps) {
   ])
 }
 
-function items (props: BuDropdownSlotProps) {
+function items (props: BuDropdownMenuSlotProps) {
   return [
     h('a', { class: 'dropdown-item', href: '#', ...props.item }, ' Dropdown item '),
     h('a', { class: 'dropdown-item is-active', href: '#', ...props.item }, ' Active dropdown item '),
@@ -130,7 +147,7 @@ const sections: BuMenuSection<string>[] = [
   },
 ]
 
-const repos: BuPanelItem<string>[] = [
+const repos = [
   { label: 'bulma', icon: 'fas fa-book' },
   { label: 'marksheet', icon: 'fas fa-book' },
   { label: 'mojs', icon: 'fas fa-code-branch' },
@@ -184,7 +201,10 @@ const SWEEP: Record<string, Subject> = {
     ])),
   },
   BuDropdown: {
-    node: () => h(BuDropdown, { modelValue: true, menu: true }, { trigger, default: items }),
+    node: () => h(BuDropdown, { modelValue: true, menu: true }, () => [
+      h(BuDropdownTrigger, null, { default: button }),
+      h(BuDropdownMenu, null, { default: items }),
+    ]),
   },
   BuField: {
     node: () => h(BuField, null, () => [
@@ -221,30 +241,30 @@ const SWEEP: Record<string, Subject> = {
     node: () => h(BuMenu as any, { items: sections, modelValue: 'Manage Your Team' }),
   },
   BuMessage: {
-    node: () => h(BuMessage, {}, {
-      header: () => h('p', 'Hello World'),
-      default: () => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    }),
+    node: () => h(BuMessage, {}, () => [
+      h(BuMessageHeader, null, () => h('p', 'Hello World')),
+      h(BuMessageBody, null, () => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
+    ]),
   },
   BuModal: {
     plugins: [createStackPlugin()],
-    node: () => h(BuModal, { card: true, modelValue: true }, {
-      header: () => 'Modal title',
-      default: () => 'Modal body content',
-      footer: () => h('div', { class: 'buttons' }, [
+    node: () => h(BuModal, { modelValue: true }, () => h(BuModalCard, null, () => [
+      h(BuModalHead, null, () => h(BuModalTitle, null, () => 'Modal title')),
+      h(BuModalBody, null, () => 'Modal body content'),
+      h(BuModalFoot, null, () => h('div', { class: 'buttons' }, [
         h('button', { class: 'button is-success' }, 'Save changes'),
         h('button', { class: 'button' }, 'Cancel'),
-      ]),
-    }),
+      ])),
+    ])),
   },
   BuNavbar: {
     // Open state: burger expanded, menu shown.
-    node: () => h(BuNavbar, { id: 'navbarBasicExample', modelValue: true }, {
-      brand: () => h('a', { class: 'navbar-item', href: 'https://bulma.io' }, [
+    node: () => h(BuNavbar, { id: 'navbarBasicExample', modelValue: true }, () => [
+      h(BuNavbarBrand, null, () => h('a', { class: 'navbar-item', href: 'https://bulma.io' }, [
         h('img', { src: 'logo.png', alt: 'Logo' }),
-      ]),
-      default: () => navbarMenu(),
-    }),
+      ])),
+      h(BuNavbarMenu, null, () => navbarMenu()),
+    ]),
   },
   BuNotification: {
     node: () => h(BuNotification, {}, () => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
@@ -253,13 +273,9 @@ const SWEEP: Record<string, Subject> = {
     node: () => h(BuPagination, { pages: 86, modelValue: 46, visible: 7 }),
   },
   BuPanel: {
-    node: () => h(BuPanel as any, {
-      heading: 'Repositories',
-      tabs: ['All', 'Public', 'Private'],
-      items: repos,
-      modelValue: 'bulma',
-    }, {
-      start: () => h('div', { class: 'panel-block' }, [
+    node: () => h(BuPanel as any, { modelValue: 'bulma' }, () => [
+      h(BuPanelHeading, null, () => 'Repositories'),
+      h('div', { class: 'panel-block' }, [
         h('p', { class: 'control has-icons-left' }, [
           h('input', { 'class': 'input', 'type': 'text', 'placeholder': 'Search', 'aria-label': 'Search' }),
           h('span', { class: 'icon is-left' }, [
@@ -267,13 +283,18 @@ const SWEEP: Record<string, Subject> = {
           ]),
         ]),
       ]),
-      default: () => [
-        h('label', { class: 'panel-block' }, [h('input', { type: 'checkbox' }), ' remember me ']),
-        h('div', { class: 'panel-block' }, [
-          h('button', { class: 'button is-link is-outlined is-fullwidth' }, ' Reset all filters '),
-        ]),
-      ],
-    }),
+      h(BuPanelTabs as any, null, () => ['All', 'Public', 'Private'].map(label =>
+        h(BuPanelTab as any, { key: label, value: label }, () => label),
+      )),
+      repos.map(repo => h(BuPanelBlock as any, { key: repo.label, value: repo.label }, () => [
+        h(BuPanelIcon, { icon: repo.icon }),
+        repo.label,
+      ])),
+      h('label', { class: 'panel-block' }, [h('input', { type: 'checkbox' }), ' remember me ']),
+      h('div', { class: 'panel-block' }, [
+        h('button', { class: 'button is-link is-outlined is-fullwidth' }, ' Reset all filters '),
+      ]),
+    ]),
   },
   BuRadio: {
     node: () => h('div', { class: 'control' }, [
@@ -296,16 +317,14 @@ const SWEEP: Record<string, Subject> = {
     ]),
   },
   BuTabs: {
-    node: () => h(BuTabs as any, null, {
-      default: () => [
+    node: () => h(BuTabs as any, null, () => [
+      h(BuTabList, null, () => [
         h(BuTab as any, { value: 'pictures' }, () => 'Pictures'),
         h(BuTab as any, { value: 'music' }, () => 'Music'),
-      ],
-      panels: () => [
-        h(BuTabPanel as any, { value: 'pictures' }, () => 'Pictures panel'),
-        h(BuTabPanel as any, { value: 'music' }, () => 'Music panel'),
-      ],
-    }),
+      ]),
+      h(BuTabPanel as any, { value: 'pictures' }, () => 'Pictures panel'),
+      h(BuTabPanel as any, { value: 'music' }, () => 'Music panel'),
+    ]),
   },
   BuTextarea: {
     node: () => h(BuControl, null, () => h(BuTextarea, { placeholder: 'e.g. Hello world' })),
diff --git a/packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts b/packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts
index 193843a33b..18c23c03c7 100644
--- a/packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts
+++ b/packages/bulma/src/components/BuDropdown/BuDropdown.browser.test.ts
@@ -6,11 +6,15 @@ import { BuDropdown } from './index'
 import { createApp, h, nextTick, shallowRef } from 'vue'
 
 // Types
-import type { BuDropdownSlotProps, BuDropdownTriggerSlotProps } from './index'
+import type { BuDropdownMenuSlotProps } from '../BuDropdownMenu'
+import type { BuDropdownTriggerSlotProps } from '../BuDropdownTrigger'
 
 import { conform } from '../../../harness/conform'
+// Components
+import { BuDropdownMenu } from '../BuDropdownMenu'
+import { BuDropdownTrigger } from '../BuDropdownTrigger'
 
-function trigger (props: BuDropdownTriggerSlotProps) {
+function button (props: BuDropdownTriggerSlotProps) {
   return h('button', { class: 'button', ...props.attrs }, [
     h('span', 'Dropdown button'),
     h('span', { class: 'icon is-small' }, [
@@ -19,7 +23,7 @@ function trigger (props: BuDropdownTriggerSlotProps) {
   ])
 }
 
-function content (props: BuDropdownSlotProps) {
+function items (props: BuDropdownMenuSlotProps) {
   return [
     h('a', { class: 'dropdown-item', href: '#', ...props.item }, ' Dropdown item '),
     h('a', { class: 'dropdown-item', ...props.item }, ' Other dropdown item '),
@@ -30,6 +34,13 @@ function content (props: BuDropdownSlotProps) {
   ]
 }
 
+function parts () {
+  return [
+    h(BuDropdownTrigger, null, { default: button }),
+    h(BuDropdownMenu, null, { default: items }),
+  ]
+}
+
 function mount (component: Parameters<typeof createApp>[0]) {
   const host = document.createElement('div')
   document.body.append(host)
@@ -52,7 +63,7 @@ function click (target: Element | Document) {
 describe('buDropdown', () => {
   it('conforms to the dropdown fixture when open', () => {
     const { el, unmount } = mount({
-      render: () => h(BuDropdown, { modelValue: true, menu: true }, { trigger, default: content }),
+      render: () => h(BuDropdown, { modelValue: true, menu: true }, parts),
     })
     // id / aria-controls: fixture hardcodes "dropdown-menu", ours is a useId value.
     conform(el, 'dropdown', { ignoreAttrs: ['id', 'aria-controls'] })
@@ -63,7 +74,7 @@ describe('buDropdown', () => {
 
   it('omits role="menu" in arbitrary-content mode', () => {
     const { el, unmount } = mount({
-      render: () => h(BuDropdown, { modelValue: true }, { trigger, default: content }),
+      render: () => h(BuDropdown, { modelValue: true }, parts),
     })
     expect(el.querySelector('.dropdown-menu')!.hasAttribute('role')).toBe(false)
     unmount()
@@ -78,7 +89,7 @@ describe('buDropdown', () => {
           'onUpdate:modelValue': (value: boolean) => {
             open.value = value
           },
-        }, { trigger, default: content })
+        }, parts)
       },
     })
 
@@ -110,7 +121,7 @@ describe('buDropdown', () => {
           'onUpdate:modelValue': (value: boolean) => {
             open.value = value
           },
-        }, { trigger, default: content })
+        }, parts)
       },
     })
 
diff --git a/packages/bulma/src/components/BuDropdown/BuDropdown.vue b/packages/bulma/src/components/BuDropdown/BuDropdown.vue
index e6136e3eee..baea71d50f 100644
--- a/packages/bulma/src/components/BuDropdown/BuDropdown.vue
+++ b/packages/bulma/src/components/BuDropdown/BuDropdown.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
   // Framework
-  import { useClickOutside, useId, useToggleScope } from '@vuetify/v0'
+  import { createContext, useClickOutside, useId, useToggleScope } from '@vuetify/v0'
 
   // Utilities
-  import { toRef, useTemplateRef } from 'vue'
+  import { useTemplateRef } from 'vue'
 
   export interface BuDropdownProps {
     /** Show the menu on hover via Bulma CSS only (`is-hoverable`) — no JS wiring when set. */
@@ -20,36 +20,32 @@
     menu?: boolean
   }
 
-  export interface BuDropdownTriggerSlotProps {
+  export interface BuDropdownContext {
+    /** Id of `.dropdown-menu` — mirrored on the trigger's `aria-controls`. */
+    id: string
     /** Whether the dropdown is open. */
-    isOpen: boolean
+    isOpen: () => boolean
+    /** Whether items should be announced as menu items. */
+    isMenu: () => boolean
     /** Toggle the dropdown (no-op when `hoverable`). */
     toggle: () => void
-    /** Attributes to bind to the trigger element. */
-    attrs: {
-      'aria-haspopup': 'true'
-      'aria-controls': string
-      'aria-expanded': 'true' | 'false'
-      'onClick': () => void
-    }
-  }
-
-  export interface BuDropdownSlotProps {
-    /** Whether the dropdown is open. */
-    isOpen: boolean
     /** Close the dropdown. */
     close: () => void
-    /** Attrs to bind to each actionable item when `menu` is set; empty otherwise. */
-    item: { role?: 'menuitem' }
   }
+
+  // Only the parent provides, so the provider stays module-local; parts import
+  // the hook.
+  const [useBuDropdown, provideBuDropdown] = createContext<BuDropdownContext | null>('bulma:dropdown', null)
+
+  export { useBuDropdown }
 </script>
 
 <script setup lang="ts">
   defineOptions({ name: 'BuDropdown' })
 
   defineSlots<{
-    trigger: (props: BuDropdownTriggerSlotProps) => any
-    default: (props: BuDropdownSlotProps) => any
+    /** `.dropdown` children — BuDropdownTrigger and BuDropdownMenu. */
+    default?: () => any
   }>()
 
   defineEmits<{
@@ -72,11 +68,19 @@
     model.value = false
   }
 
-  function onToggle () {
+  function toggle () {
     if (hoverable) return
     model.value = !model.value
   }
 
+  provideBuDropdown({
+    id,
+    isOpen: () => model.value,
+    isMenu: () => menu,
+    toggle,
+    close,
+  })
+
   // Dismissal listeners engage only while open (and never for the pure-CSS
   // hoverable mode) so closed dropdowns are fully inert — a document-level
   // hotkey would preventDefault every Escape page-wide and race sibling
@@ -92,23 +96,6 @@
     event.stopPropagation()
     close()
   }
-
-  const trigger = toRef((): BuDropdownTriggerSlotProps => ({
-    isOpen: model.value,
-    toggle: onToggle,
-    attrs: {
-      'aria-haspopup': 'true',
-      'aria-controls': id,
-      'aria-expanded': model.value ? 'true' : 'false',
-      'onClick': onToggle,
-    },
-  }))
-
-  const slotProps = toRef((): BuDropdownSlotProps => ({
-    isOpen: model.value,
-    close,
-    item: menu ? { role: 'menuitem' } : {},
-  }))
 </script>
 
 <template>
@@ -123,18 +110,6 @@
     }"
     @keydown="onKeydown"
   >
-    <div class="dropdown-trigger">
-      <slot name="trigger" v-bind="trigger" />
-    </div>
-
-    <div
-      :id
-      class="dropdown-menu"
-      :role="menu ? 'menu' : undefined"
-    >
-      <div class="dropdown-content">
-        <slot v-bind="slotProps" />
-      </div>
-    </div>
+    <slot />
   </div>
 </template>
diff --git a/packages/bulma/src/components/BuDropdown/index.ts b/packages/bulma/src/components/BuDropdown/index.ts
index 9747daca71..bf483224fa 100644
--- a/packages/bulma/src/components/BuDropdown/index.ts
+++ b/packages/bulma/src/components/BuDropdown/index.ts
@@ -1,3 +1,3 @@
-export type { BuDropdownProps, BuDropdownSlotProps, BuDropdownTriggerSlotProps } from './BuDropdown.vue'
+export type { BuDropdownContext, BuDropdownProps } from './BuDropdown.vue'
 
 export { default as BuDropdown } from './BuDropdown.vue'
diff --git a/packages/bulma/src/components/BuDropdownMenu/BuDropdownMenu.vue b/packages/bulma/src/components/BuDropdownMenu/BuDropdownMenu.vue
new file mode 100644
index 0000000000..fef2723ecc
--- /dev/null
+++ b/packages/bulma/src/components/BuDropdownMenu/BuDropdownMenu.vue
@@ -0,0 +1,61 @@
+/**
+ * @module BuDropdownMenu
+ *
+ * @remarks
+ * Bulma `.dropdown-menu` + `.dropdown-content` — the pair always ships
+ * together in the documented markup, so this part renders both. `role="menu"`
+ * appears only when the parent BuDropdown was told its items are actionable
+ * (`menu`); the slot hands each item the matching `role="menuitem"`.
+ */
+
+<script lang="ts">
+  // Utilities
+  import { orphan } from '../../utilities/context'
+  import { toRef } from 'vue'
+
+  // Context
+  import { useBuDropdown } from '../BuDropdown/BuDropdown.vue'
+
+  export interface BuDropdownMenuSlotProps {
+    /** Whether the dropdown is open. */
+    isOpen: boolean
+    /** Close the dropdown. */
+    close: () => void
+    /** Attrs to bind to each actionable item when the parent sets `menu`; empty otherwise. */
+    item: { role?: 'menuitem' }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuDropdownMenu' })
+
+  defineSlots<{
+    default?: (props: BuDropdownMenuSlotProps) => any
+  }>()
+
+  const dropdown = useBuDropdown()
+
+  orphan('BuDropdownMenu', 'BuDropdown', dropdown)
+
+  function close () {
+    dropdown?.close()
+  }
+
+  const slotProps = toRef((): BuDropdownMenuSlotProps => ({
+    isOpen: dropdown?.isOpen() ?? false,
+    close,
+    item: dropdown?.isMenu() ? { role: 'menuitem' } : {},
+  }))
+</script>
+
+<template>
+  <div
+    :id="dropdown?.id"
+    class="dropdown-menu"
+    :role="dropdown?.isMenu() ? 'menu' : undefined"
+  >
+    <div class="dropdown-content">
+      <slot v-bind="slotProps" />
+    </div>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuDropdownMenu/index.ts b/packages/bulma/src/components/BuDropdownMenu/index.ts
new file mode 100644
index 0000000000..38069d9738
--- /dev/null
+++ b/packages/bulma/src/components/BuDropdownMenu/index.ts
@@ -0,0 +1,2 @@
+export type { BuDropdownMenuSlotProps } from './BuDropdownMenu.vue'
+export { default as BuDropdownMenu } from './BuDropdownMenu.vue'
diff --git a/packages/bulma/src/components/BuDropdownTrigger/BuDropdownTrigger.vue b/packages/bulma/src/components/BuDropdownTrigger/BuDropdownTrigger.vue
new file mode 100644
index 0000000000..dbaddd6662
--- /dev/null
+++ b/packages/bulma/src/components/BuDropdownTrigger/BuDropdownTrigger.vue
@@ -0,0 +1,67 @@
+/**
+ * @module BuDropdownTrigger
+ *
+ * @remarks
+ * Bulma `.dropdown-trigger` — wraps the userland button or link. The trigger
+ * element itself stays userland (Bulma documents both), so the aria wiring
+ * v0's Toggle cannot supply (`aria-haspopup`, `aria-controls`,
+ * `aria-expanded`) is handed to the default slot to bind.
+ */
+
+<script lang="ts">
+  // Utilities
+  import { orphan } from '../../utilities/context'
+  import { toRef } from 'vue'
+
+  // Context
+  import { useBuDropdown } from '../BuDropdown/BuDropdown.vue'
+
+  export interface BuDropdownTriggerAttrs {
+    'aria-haspopup': 'true'
+    'aria-controls': string
+    'aria-expanded': 'true' | 'false'
+    'onClick': () => void
+  }
+
+  export interface BuDropdownTriggerSlotProps {
+    /** Whether the dropdown is open. */
+    isOpen: boolean
+    /** Toggle the dropdown (no-op when the parent is `hoverable`). */
+    toggle: () => void
+    /** Attributes to bind to the trigger element. */
+    attrs: BuDropdownTriggerAttrs
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuDropdownTrigger' })
+
+  defineSlots<{
+    default?: (props: BuDropdownTriggerSlotProps) => any
+  }>()
+
+  const dropdown = useBuDropdown()
+
+  orphan('BuDropdownTrigger', 'BuDropdown', dropdown)
+
+  function toggle () {
+    dropdown?.toggle()
+  }
+
+  const slotProps = toRef((): BuDropdownTriggerSlotProps => ({
+    isOpen: dropdown?.isOpen() ?? false,
+    toggle,
+    attrs: {
+      'aria-haspopup': 'true',
+      'aria-controls': dropdown?.id ?? '',
+      'aria-expanded': dropdown?.isOpen() ? 'true' : 'false',
+      'onClick': toggle,
+    },
+  }))
+</script>
+
+<template>
+  <div class="dropdown-trigger">
+    <slot v-bind="slotProps" />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuDropdownTrigger/index.ts b/packages/bulma/src/components/BuDropdownTrigger/index.ts
new file mode 100644
index 0000000000..f7ec1dc963
--- /dev/null
+++ b/packages/bulma/src/components/BuDropdownTrigger/index.ts
@@ -0,0 +1,2 @@
+export type { BuDropdownTriggerAttrs, BuDropdownTriggerSlotProps } from './BuDropdownTrigger.vue'
+export { default as BuDropdownTrigger } from './BuDropdownTrigger.vue'
diff --git a/packages/bulma/src/components/BuField/BuField.browser.test.ts b/packages/bulma/src/components/BuField/BuField.browser.test.ts
index 29dd7bbbad..db06ec2cba 100644
--- a/packages/bulma/src/components/BuField/BuField.browser.test.ts
+++ b/packages/bulma/src/components/BuField/BuField.browser.test.ts
@@ -9,6 +9,8 @@ import { createApp, h } from 'vue'
 
 import { conform } from '../../../harness/conform'
 import { BuControl } from '../BuControl'
+import { BuFieldBody } from '../BuFieldBody'
+import { BuFieldLabel } from '../BuFieldLabel'
 import { BuHelp } from '../BuHelp'
 import { BuInput } from '../BuInput'
 import { BuLabel } from '../BuLabel'
@@ -65,13 +67,13 @@ describe('buField', () => {
   })
 
   it('conforms to the horizontal fixture', () => {
-    const host = mount(() => h(BuField, { horizontal: true, size: 'normal' }, {
-      label: () => h(BuLabel, null, () => 'Subject'),
-      default: () => h(BuField, null, () => [
+    const host = mount(() => h(BuField, { horizontal: true }, () => [
+      h(BuFieldLabel, { size: 'normal' }, () => h(BuLabel, null, () => 'Subject')),
+      h(BuFieldBody, null, () => h(BuField, null, () => [
         h(BuControl, null, () => h(BuInput, { color: 'danger', placeholder: 'e.g. Partnership opportunity' })),
         h(BuHelp, { color: 'danger' }, () => 'This field is required'),
-      ]),
-    }))
+      ])),
+    ]))
 
     conform(host.firstElementChild!, 'form-general:horizontal form', VALUE)
   })
diff --git a/packages/bulma/src/components/BuField/BuField.vue b/packages/bulma/src/components/BuField/BuField.vue
index a20928ba6c..d789f7bf04 100644
--- a/packages/bulma/src/components/BuField/BuField.vue
+++ b/packages/bulma/src/components/BuField/BuField.vue
@@ -4,6 +4,8 @@
  * @remarks
  * Bulma `.field` wrapper — pure markup, no v0 state. Supports addons,
  * grouped, and horizontal layouts per bulma.io/documentation/form/general.
+ * The horizontal layout's two columns are the BuFieldLabel and BuFieldBody
+ * parts, composed in userland exactly as Bulma nests them.
  */
 
 <script lang="ts">
@@ -13,17 +15,13 @@
   // Utilities
   import { toRef } from 'vue'
 
-  export type BuFieldSize = 'small' | 'normal' | 'medium' | 'large'
-
   export interface BuFieldProps {
     /** Attached controls: `has-addons` (+ `has-addons-centered` / `has-addons-right`) */
     addons?: boolean | 'centered' | 'right'
     /** Grouped controls: `is-grouped` (+ `is-grouped-centered` / `is-grouped-right` / `is-grouped-multiline`) */
     grouped?: boolean | 'centered' | 'right' | 'multiline'
-    /** Horizontal layout: `is-horizontal` with `.field-label` + `.field-body` */
+    /** Horizontal layout: `is-horizontal`, composed from BuFieldLabel + BuFieldBody */
     horizontal?: boolean
-    /** Size class on `.field-label` when horizontal: `is-{size}` */
-    size?: BuFieldSize
   }
 </script>
 
@@ -32,14 +30,12 @@
 
   defineSlots<{
     default: () => any
-    label?: () => any
   }>()
 
   const {
     addons = false,
     grouped = false,
     horizontal = false,
-    size,
   } = defineProps<BuFieldProps>()
 
   const classes = toRef(() => [
@@ -53,19 +49,6 @@
 
 <template>
   <div class="field" :class="classes">
-    <template v-if="horizontal">
-      <div class="field-label" :class="size && `is-${size}`">
-        <slot name="label" />
-      </div>
-
-      <div class="field-body">
-        <slot />
-      </div>
-    </template>
-
-    <template v-else>
-      <slot name="label" />
-      <slot />
-    </template>
+    <slot />
   </div>
 </template>
diff --git a/packages/bulma/src/components/BuField/index.ts b/packages/bulma/src/components/BuField/index.ts
index 8918d1eb24..f2929a29f6 100644
--- a/packages/bulma/src/components/BuField/index.ts
+++ b/packages/bulma/src/components/BuField/index.ts
@@ -1,3 +1,3 @@
 export { default as BuField } from './BuField.vue'
 
-export type { BuFieldProps, BuFieldSize } from './BuField.vue'
+export type { BuFieldProps } from './BuField.vue'
diff --git a/packages/bulma/src/components/BuFieldBody/BuFieldBody.vue b/packages/bulma/src/components/BuFieldBody/BuFieldBody.vue
new file mode 100644
index 0000000000..122d2d685c
--- /dev/null
+++ b/packages/bulma/src/components/BuFieldBody/BuFieldBody.vue
@@ -0,0 +1,22 @@
+/**
+ * @module BuFieldBody
+ *
+ * @remarks
+ * Bulma `.field-body` — the control column of a horizontal field. Holds one
+ * or more nested BuFields.
+ */
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuFieldBody' })
+
+  defineSlots<{
+    /** Control column content — nested BuFields. */
+    default?: () => any
+  }>()
+</script>
+
+<template>
+  <div class="field-body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuFieldBody/index.ts b/packages/bulma/src/components/BuFieldBody/index.ts
new file mode 100644
index 0000000000..646b08a2ee
--- /dev/null
+++ b/packages/bulma/src/components/BuFieldBody/index.ts
@@ -0,0 +1 @@
+export { default as BuFieldBody } from './BuFieldBody.vue'
diff --git a/packages/bulma/src/components/BuFieldLabel/BuFieldLabel.vue b/packages/bulma/src/components/BuFieldLabel/BuFieldLabel.vue
new file mode 100644
index 0000000000..26011f25a3
--- /dev/null
+++ b/packages/bulma/src/components/BuFieldLabel/BuFieldLabel.vue
@@ -0,0 +1,39 @@
+/**
+ * @module BuFieldLabel
+ *
+ * @remarks
+ * Bulma `.field-label` — the label column of a horizontal field. Its `size`
+ * aligns the column with the control it labels; the `.label` itself is a
+ * BuLabel nested inside.
+ */
+
+<script lang="ts">
+  // Utilities
+  import { toRef } from 'vue'
+
+  export type BuFieldLabelSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuFieldLabelProps {
+    /** Size class aligning the column with its control: `is-{size}` */
+    size?: BuFieldLabelSize
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuFieldLabel' })
+
+  defineSlots<{
+    /** Label column content — typically a BuLabel. */
+    default?: () => any
+  }>()
+
+  const { size } = defineProps<BuFieldLabelProps>()
+
+  const classes = toRef(() => size && `is-${size}`)
+</script>
+
+<template>
+  <div class="field-label" :class="classes">
+    <slot />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuFieldLabel/index.ts b/packages/bulma/src/components/BuFieldLabel/index.ts
new file mode 100644
index 0000000000..66c4d3f03c
--- /dev/null
+++ b/packages/bulma/src/components/BuFieldLabel/index.ts
@@ -0,0 +1,2 @@
+export type { BuFieldLabelProps, BuFieldLabelSize } from './BuFieldLabel.vue'
+export { default as BuFieldLabel } from './BuFieldLabel.vue'
diff --git a/packages/bulma/src/components/BuFile/BuFile.vue b/packages/bulma/src/components/BuFile/BuFile.vue
index b3f3627b09..c2700aef05 100644
--- a/packages/bulma/src/components/BuFile/BuFile.vue
+++ b/packages/bulma/src/components/BuFile/BuFile.vue
@@ -32,6 +32,8 @@
     form?: string
     /** Renders `is-fullwidth`. */
     fullwidth?: boolean
+    /** Icon font classes for the `.file-icon` glyph (e.g. `fas fa-upload`). */
+    icon?: string
     /** Unique identifier for the native input (auto-generated if omitted). Snapshotted at setup. */
     id?: ID
     /** Form field name. Snapshotted at setup (createInput takes a plain value). */
@@ -84,7 +86,6 @@
 
   defineSlots<{
     default: (props: BuFileSlotProps) => any
-    icon: () => any
   }>()
 
   const emit = defineEmits<{
@@ -101,6 +102,7 @@
     filename = false,
     form,
     fullwidth = false,
+    icon = 'fas fa-upload',
     id,
     name,
     placeholder = 'No file uploaded',
@@ -193,9 +195,7 @@
 
       <span class="file-cta">
         <span class="file-icon">
-          <slot name="icon">
-            <i class="fas fa-upload" />
-          </slot>
+          <i :class="icon" />
         </span>
 
         <span class="file-label">
diff --git a/packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts b/packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts
index 581a9bf79f..355a51d2cf 100644
--- a/packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts
+++ b/packages/bulma/src/components/BuLabel/BuLabel.browser.test.ts
@@ -14,6 +14,8 @@ import { createApp, h } from 'vue'
 import { conform } from '../../../harness/conform'
 import { BuControl } from '../BuControl'
 import { BuField } from '../BuField'
+import { BuFieldBody } from '../BuFieldBody'
+import { BuFieldLabel } from '../BuFieldLabel'
 import { BuInput } from '../BuInput'
 
 const cleanups: (() => void)[] = []
@@ -36,12 +38,12 @@ afterEach(() => {
 
 describe('buLabel', () => {
   it('conforms to the horizontal is-static fixture', () => {
-    const host = mount(() => h(BuField, { horizontal: true, size: 'normal' }, {
-      label: () => h(BuLabel, null, () => 'From'),
-      default: () => h(BuField, null, () => h(BuControl, { as: 'p' }, () => (
+    const host = mount(() => h(BuField, { horizontal: true }, () => [
+      h(BuFieldLabel, { size: 'normal' }, () => h(BuLabel, null, () => 'From')),
+      h(BuFieldBody, null, () => h(BuField, null, () => h(BuControl, { as: 'p' }, () => (
         h(BuInput, { plaintext: true, type: 'email', modelValue: 'me@example.com' })
-      ))),
-    }))
+      )))),
+    ]))
 
     // `value` lands as a DOM property, not an attribute — skip it on both sides
     conform(host.firstElementChild!, 'form-input:static', { ignoreAttrs: ['value'] })
diff --git a/packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts b/packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts
index d54dba5a45..e3b2c64da1 100644
--- a/packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts
+++ b/packages/bulma/src/components/BuMessage/BuMessage.browser.test.ts
@@ -6,6 +6,9 @@ import { BuMessage } from './index'
 import { createApp, h, nextTick, shallowRef } from 'vue'
 
 import { conform } from '../../../harness/conform'
+// Components
+import { BuMessageBody } from '../BuMessageBody'
+import { BuMessageHeader } from '../BuMessageHeader'
 
 let teardown: (() => void) | undefined
 
@@ -38,17 +41,17 @@ function body () {
 
 describe('buMessage', () => {
   it('should conform to the header and delete fixture', () => {
-    const host = mount(() => h(BuMessage, {}, {
-      header: () => h('p', 'Hello World'),
-      default: body,
-    }))
+    const host = mount(() => h(BuMessage, {}, () => [
+      h(BuMessageHeader, null, () => h('p', 'Hello World')),
+      h(BuMessageBody, null, body),
+    ]))
 
     // v0's delete button correctly carries type="button"; the docs fixture omits it.
     conform(host.firstElementChild!, 'message', { ignoreAttrs: ['type'] })
   })
 
   it('should conform to the body-only fixture', () => {
-    const host = mount(() => h(BuMessage, {}, { default: body }))
+    const host = mount(() => h(BuMessage, {}, () => h(BuMessageBody, null, body)))
 
     conform(host.firstElementChild!, 'message:body only')
   })
@@ -60,10 +63,10 @@ describe('buMessage', () => {
       'onUpdate:modelValue': (value: boolean) => {
         open.value = value
       },
-    }, {
-      header: () => h('p', 'Hello World'),
-      default: () => 'content',
-    }))
+    }, () => [
+      h(BuMessageHeader, null, () => h('p', 'Hello World')),
+      h(BuMessageBody, null, () => 'content'),
+    ]))
 
     host.querySelector<HTMLButtonElement>('.delete')!.click()
     await nextTick()
diff --git a/packages/bulma/src/components/BuMessage/BuMessage.vue b/packages/bulma/src/components/BuMessage/BuMessage.vue
index a899f5d68a..5e47c44766 100644
--- a/packages/bulma/src/components/BuMessage/BuMessage.vue
+++ b/packages/bulma/src/components/BuMessage/BuMessage.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   // Framework
-  import { Presence } from '@vuetify/v0'
+  import { createContext, Presence } from '@vuetify/v0'
 
   // Utilities
   import { toRef, useAttrs } from 'vue'
@@ -11,16 +11,25 @@
     /** Bulma size modifier, rendered as `is-{size}`. */
     size?: 'small' | 'normal' | 'medium' | 'large'
   }
+
+  export interface BuMessageContext {
+    /** Dismiss the message — drives the delete button in BuMessageHeader. */
+    close: () => void
+  }
+
+  // Only the parent provides, so the provider stays module-local; parts import
+  // the hook.
+  const [useBuMessage, provideBuMessage] = createContext<BuMessageContext | null>('bulma:message', null)
+
+  export { useBuMessage }
 </script>
 
 <script setup lang="ts">
   defineOptions({ name: 'BuMessage', inheritAttrs: false })
 
   defineSlots<{
-    /** Message body content. */
+    /** `article.message` children — BuMessageHeader and BuMessageBody. */
     default?: () => any
-    /** Header content; when present renders `.message-header` with a delete button. */
-    header?: () => any
   }>()
 
   defineEmits<{
@@ -41,9 +50,11 @@
     size && `is-${size}`,
   ])
 
-  function onDelete () {
-    model.value = false
-  }
+  provideBuMessage({
+    close: () => {
+      model.value = false
+    },
+  })
 </script>
 
 <template>
@@ -57,23 +68,7 @@
       :data-state="state['data-state']"
       v-bind="attrs"
     >
-      <div
-        v-if="$slots.header"
-        class="message-header"
-      >
-        <slot name="header" />
-
-        <button
-          aria-label="delete"
-          class="delete"
-          type="button"
-          @click="onDelete"
-        />
-      </div>
-
-      <div class="message-body">
-        <slot />
-      </div>
+      <slot />
     </article>
   </Presence>
 </template>
diff --git a/packages/bulma/src/components/BuMessage/index.ts b/packages/bulma/src/components/BuMessage/index.ts
index 9cd00e753e..664f1b9754 100644
--- a/packages/bulma/src/components/BuMessage/index.ts
+++ b/packages/bulma/src/components/BuMessage/index.ts
@@ -1,3 +1,3 @@
-export type { BuMessageProps } from './BuMessage.vue'
+export type { BuMessageContext, BuMessageProps } from './BuMessage.vue'
 
 export { default as BuMessage } from './BuMessage.vue'
diff --git a/packages/bulma/src/components/BuMessageBody/BuMessageBody.vue b/packages/bulma/src/components/BuMessageBody/BuMessageBody.vue
new file mode 100644
index 0000000000..38b94d9df1
--- /dev/null
+++ b/packages/bulma/src/components/BuMessageBody/BuMessageBody.vue
@@ -0,0 +1,22 @@
+/**
+ * @module BuMessageBody
+ *
+ * @remarks
+ * Bulma `.message-body` — the message text region. Pure markup; a body-only
+ * message is Bulma's documented no-header variant.
+ */
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuMessageBody' })
+
+  defineSlots<{
+    /** Body content. */
+    default?: () => any
+  }>()
+</script>
+
+<template>
+  <div class="message-body">
+    <slot />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuMessageBody/index.ts b/packages/bulma/src/components/BuMessageBody/index.ts
new file mode 100644
index 0000000000..398f3df8cc
--- /dev/null
+++ b/packages/bulma/src/components/BuMessageBody/index.ts
@@ -0,0 +1 @@
+export { default as BuMessageBody } from './BuMessageBody.vue'
diff --git a/packages/bulma/src/components/BuMessageHeader/BuMessageHeader.vue b/packages/bulma/src/components/BuMessageHeader/BuMessageHeader.vue
new file mode 100644
index 0000000000..eb3b452aff
--- /dev/null
+++ b/packages/bulma/src/components/BuMessageHeader/BuMessageHeader.vue
@@ -0,0 +1,47 @@
+/**
+ * @module BuMessageHeader
+ *
+ * @remarks
+ * Bulma `.message-header` — always renders the documented `.delete` button,
+ * wired to BuMessage's model through the `bulma:message` context. Rendering
+ * the header is what opts a message into being dismissible, exactly as in
+ * Bulma's own markup.
+ */
+
+<script lang="ts">
+  // Utilities
+  import { orphan } from '../../utilities/context'
+
+  // Context
+  import { useBuMessage } from '../BuMessage/BuMessage.vue'
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuMessageHeader' })
+
+  defineSlots<{
+    /** Header content — Bulma wraps its own in a `<p>`. */
+    default?: () => any
+  }>()
+
+  const message = useBuMessage()
+
+  orphan('BuMessageHeader', 'BuMessage', message)
+
+  function onDelete () {
+    message?.close()
+  }
+</script>
+
+<template>
+  <div class="message-header">
+    <slot />
+
+    <button
+      aria-label="delete"
+      class="delete"
+      type="button"
+      @click="onDelete"
+    />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuMessageHeader/index.ts b/packages/bulma/src/components/BuMessageHeader/index.ts
new file mode 100644
index 0000000000..d421fdc3f9
--- /dev/null
+++ b/packages/bulma/src/components/BuMessageHeader/index.ts
@@ -0,0 +1 @@
+export { default as BuMessageHeader } from './BuMessageHeader.vue'
diff --git a/packages/bulma/src/components/BuModal/BuModal.browser.test.ts b/packages/bulma/src/components/BuModal/BuModal.browser.test.ts
index a75cf3752e..f3da189244 100644
--- a/packages/bulma/src/components/BuModal/BuModal.browser.test.ts
+++ b/packages/bulma/src/components/BuModal/BuModal.browser.test.ts
@@ -12,6 +12,14 @@ import { createApp, h, nextTick, shallowRef } from 'vue'
 import type { ShallowRef } from 'vue'
 
 import { conform } from '../../../harness/conform'
+// Components
+import { BuModalBody } from '../BuModalBody'
+import { BuModalCard } from '../BuModalCard'
+import { BuModalClose } from '../BuModalClose'
+import { BuModalContent } from '../BuModalContent'
+import { BuModalFoot } from '../BuModalFoot'
+import { BuModalHead } from '../BuModalHead'
+import { BuModalTitle } from '../BuModalTitle'
 
 const teardowns: (() => void)[] = []
 
@@ -34,23 +42,27 @@ afterEach(() => {
   }
 })
 
-function slots () {
-  return {
-    header: () => 'Modal title',
-    footer: () => h('div', { class: 'buttons' }, [
+function card () {
+  return () => h(BuModalCard, null, () => [
+    h(BuModalHead, null, () => h(BuModalTitle, null, () => 'Modal title')),
+    h(BuModalBody),
+    h(BuModalFoot, null, () => h('div', { class: 'buttons' }, [
       h('button', { class: 'button is-success' }, 'Save changes'),
       h('button', { class: 'button' }, 'Cancel'),
-    ]),
-  }
+    ])),
+  ])
+}
+
+function content () {
+  return () => [h(BuModalContent), h(BuModalClose)]
 }
 
-function modal (open: ShallowRef<boolean>, props: Record<string, unknown> = {}, children = {}): HTMLElement {
+function modal (open: ShallowRef<boolean>, children: () => any): HTMLElement {
   return mount(() => h(BuModal, {
     'modelValue': open.value,
     'onUpdate:modelValue': (value: boolean) => {
       open.value = value
     },
-    ...props,
   }, children))
 }
 
@@ -65,13 +77,13 @@ const TOLERATE = { ignoreAttrs: ['aria-label', 'style', 'type'] }
 
 describe('buModal', () => {
   it('should conform to the modal-content fixture when open', () => {
-    const host = mount(() => h(BuModal, { modelValue: true }))
+    const host = mount(() => h(BuModal, { modelValue: true }, content()))
 
     conform(host.firstElementChild!, 'modal', TOLERATE)
   })
 
   it('should conform to the modal-card fixture when open', () => {
-    const host = mount(() => h(BuModal, { card: true, modelValue: true }, slots()))
+    const host = mount(() => h(BuModal, { modelValue: true }, card()))
 
     conform(host.firstElementChild!, 'modal:card', TOLERATE)
 
@@ -83,7 +95,7 @@ describe('buModal', () => {
 
   it('should close on Escape from within the modal', async () => {
     const open = shallowRef(true)
-    modal(open, { card: true }, slots())
+    modal(open, card())
     await settle()
 
     document.activeElement!.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }))
@@ -98,7 +110,7 @@ describe('buModal', () => {
     outside.focus()
 
     const open = shallowRef(false)
-    const host = modal(open, { card: true }, slots())
+    const host = modal(open, card())
 
     open.value = true
     await settle()
@@ -115,7 +127,7 @@ describe('buModal', () => {
 
   it('should wrap Tab and Shift+Tab within the modal subtree', async () => {
     const open = shallowRef(true)
-    const host = modal(open, { card: true }, slots())
+    const host = modal(open, card())
     await settle()
 
     const first = host.querySelector<HTMLButtonElement>('.delete')!
@@ -131,9 +143,17 @@ describe('buModal', () => {
     expect(document.activeElement).toBe(last)
   })
 
+  it('should fall back to the panel when the modal holds nothing focusable', async () => {
+    const open = shallowRef(true)
+    const host = modal(open, () => h(BuModalContent, null, () => 'No focusable content'))
+    await settle()
+
+    expect(document.activeElement).toBe(host.querySelector('.modal-content'))
+  })
+
   it('should close on background click unless blocking', async () => {
     const open = shallowRef(true)
-    const host = modal(open)
+    const host = modal(open, content())
     await settle()
 
     host.querySelector<HTMLElement>('.modal-background')!.click()
@@ -142,7 +162,13 @@ describe('buModal', () => {
     expect(open.value).toBe(false)
 
     const held = shallowRef(true)
-    const kept = modal(held, { blocking: true })
+    const kept = mount(() => h(BuModal, {
+      'blocking': true,
+      'modelValue': held.value,
+      'onUpdate:modelValue': (value: boolean) => {
+        held.value = value
+      },
+    }, content()))
     await settle()
 
     kept.querySelector<HTMLElement>('.modal-background')!.click()
diff --git a/packages/bulma/src/components/BuModal/BuModal.vue b/packages/bulma/src/components/BuModal/BuModal.vue
index d055a8a9f1..bdc6eca90f 100644
--- a/packages/bulma/src/components/BuModal/BuModal.vue
+++ b/packages/bulma/src/components/BuModal/BuModal.vue
@@ -1,17 +1,28 @@
 <script lang="ts">
   // Framework
-  import { Dialog, IN_BROWSER } from '@vuetify/v0'
+  import { createContext, Dialog, IN_BROWSER } from '@vuetify/v0'
 
   // Utilities
-  import { mergeProps, nextTick, onScopeDispose, useAttrs, useTemplateRef, watch } from 'vue'
+  import { mergeProps, nextTick, onScopeDispose, shallowRef, useAttrs, useTemplateRef, watch } from 'vue'
 
   export interface BuModalProps {
-    /** Render the `.modal-card` variant with header and footer regions. */
-    card?: boolean
     /** Prevent background clicks from closing the modal. */
     blocking?: boolean
   }
 
+  export interface BuModalContext {
+    /** Register the panel element (`.modal-card` / `.modal-content`) with the focus trap. */
+    panel: (el: HTMLElement | null) => void
+    /** Close the modal. */
+    close: () => void
+  }
+
+  // Only the parent provides, so the provider stays module-local; parts import
+  // the hook.
+  const [useBuModal, provideBuModal] = createContext<BuModalContext | null>('bulma:modal', null)
+
+  export { useBuModal }
+
   const FOCUSABLE = [
     'a[href]',
     'area[href]',
@@ -27,28 +38,21 @@
   defineOptions({ name: 'BuModal', inheritAttrs: false })
 
   defineSlots<{
-    /** Modal content: `.modal-content` body, or `.modal-card-body` in card mode. */
+    /** `.modal` children — BuModalCard (head/body/foot parts) or BuModalContent. */
     default?: () => any
-    /** Card variant title, rendered inside `p.modal-card-title`. */
-    header?: () => any
-    /** Card variant footer, rendered inside `footer.modal-card-foot`. */
-    footer?: () => any
   }>()
 
   defineEmits<{
     'update:model-value': [value: boolean]
   }>()
 
-  const {
-    card = false,
-    blocking = false,
-  } = defineProps<BuModalProps>()
+  const { blocking = false } = defineProps<BuModalProps>()
 
   const model = defineModel<boolean>({ default: false })
 
   const attrs = useAttrs()
   const root = useTemplateRef<HTMLElement>('root')
-  const panel = useTemplateRef<HTMLElement>('panel')
+  const panel = shallowRef<HTMLElement | null>(null)
 
   let restore: HTMLElement | null = null
 
@@ -64,6 +68,15 @@
     if (!blocking) close()
   }
 
+  // The panel is composed in userland now, so the trap learns about it through
+  // registration rather than a local template ref.
+  provideBuModal({
+    panel: el => {
+      panel.value = el
+    },
+    close,
+  })
+
   // Hand-rolled focus trap: v0 ships no focus-trap composable and a non-native
   // <dialog> host gets no top-layer trapping (v0-core follow-up candidate).
   function onKeydown (event: KeyboardEvent, top: boolean) {
@@ -124,7 +137,7 @@
 <template>
   <Dialog.Root v-model="model">
     <Dialog.Content
-      v-slot="{ isOpen, globalTop, zIndex, attrs: content }"
+      v-slot="{ isOpen, globalTop, zIndex }"
       :blocking
       :close-on-click-outside="false"
       renderless
@@ -148,53 +161,7 @@
           @pointerdown.prevent
         />
 
-        <div
-          v-if="card"
-          :id="content.id"
-          ref="panel"
-          :aria-labelledby="content['aria-labelledby']"
-          :aria-modal="content['aria-modal']"
-          class="modal-card"
-          :role="content.role"
-          tabindex="-1"
-        >
-          <header class="modal-card-head">
-            <Dialog.Title
-              as="p"
-              class="modal-card-title"
-            >
-              <slot name="header" />
-            </Dialog.Title>
-
-            <Dialog.Close class="delete" />
-          </header>
-
-          <section class="modal-card-body">
-            <slot />
-          </section>
-
-          <footer
-            v-if="$slots.footer"
-            class="modal-card-foot"
-          >
-            <slot name="footer" />
-          </footer>
-        </div>
-
-        <template v-else>
-          <div
-            :id="content.id"
-            ref="panel"
-            :aria-modal="content['aria-modal']"
-            class="modal-content"
-            :role="content.role"
-            tabindex="-1"
-          >
-            <slot />
-          </div>
-
-          <Dialog.Close class="modal-close is-large" />
-        </template>
+        <slot />
       </div>
     </Dialog.Content>
   </Dialog.Root>
diff --git a/packages/bulma/src/components/BuModal/index.ts b/packages/bulma/src/components/BuModal/index.ts
index 09de4c3f09..bf9df8d7d6 100644
--- a/packages/bulma/src/components/BuModal/index.ts
+++ b/packages/bulma/src/components/BuModal/index.ts
@@ -1,3 +1,3 @@
-export type { BuModalProps } from './BuModal.vue'
+export type { BuModalContext, BuModalProps } from './BuModal.vue'
 
 export { default as BuModal } from './BuModal.vue'
diff --git a/packages/bulma/src/components/BuModalBody/BuModalBody.vue b/packages/bulma/src/components/BuModalBody/BuModalBody.vue
new file mode 100644
index 0000000000..154dccf72a
--- /dev/null
+++ b/packages/bulma/src/components/BuModalBody/BuModalBody.vue
@@ -0,0 +1,22 @@
+/**
+ * @module BuModalBody
+ *
+ * @remarks
+ * Bulma `.modal-card-body` — the scrollable region between BuModalHead and
+ * BuModalFoot. Pure markup; it holds no modal state.
+ */
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModalBody' })
+
+  defineSlots<{
+    /** Body content. */
+    default?: () => any
+  }>()
+</script>
+
+<template>
+  <section class="modal-card-body">
+    <slot />
+  </section>
+</template>
diff --git a/packages/bulma/src/components/BuModalBody/index.ts b/packages/bulma/src/components/BuModalBody/index.ts
new file mode 100644
index 0000000000..a7b31b465a
--- /dev/null
+++ b/packages/bulma/src/components/BuModalBody/index.ts
@@ -0,0 +1 @@
+export { default as BuModalBody } from './BuModalBody.vue'
diff --git a/packages/bulma/src/components/BuModalCard/BuModalCard.vue b/packages/bulma/src/components/BuModalCard/BuModalCard.vue
new file mode 100644
index 0000000000..7624ac81d2
--- /dev/null
+++ b/packages/bulma/src/components/BuModalCard/BuModalCard.vue
@@ -0,0 +1,55 @@
+/**
+ * @module BuModalCard
+ *
+ * @remarks
+ * Bulma `.modal-card` — the panel of the card variant. Carries the dialog
+ * identity (`id`, `role`, `aria-modal`, `aria-labelledby`) that v0's
+ * `Dialog.Content` would own if BuModal were not renderless, and registers
+ * itself with BuModal's focus trap.
+ */
+
+<script lang="ts">
+  // Framework
+  import { useDialogContext } from '@vuetify/v0'
+
+  // Utilities
+  import { orphan } from '../../utilities/context'
+
+  // Types
+  import type { DialogContext } from '@vuetify/v0'
+
+  // Context
+  import { useBuModal } from '../BuModal/BuModal.vue'
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModalCard' })
+
+  defineSlots<{
+    /** `.modal-card` children — BuModalHead, BuModalBody, BuModalFoot. */
+    default?: () => any
+  }>()
+
+  const modal = useBuModal()
+  const dialog = useDialogContext('v0:dialog', null as unknown as DialogContext) as DialogContext | null
+
+  orphan('BuModalCard', 'BuModal', modal)
+
+  function onPanel (el: unknown) {
+    modal?.panel(el as HTMLElement | null)
+  }
+</script>
+
+<template>
+  <div
+    :id="dialog?.id"
+    :ref="onPanel"
+    :aria-labelledby="dialog?.titleId"
+    aria-modal="true"
+    class="modal-card"
+    role="dialog"
+    tabindex="-1"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuModalCard/index.ts b/packages/bulma/src/components/BuModalCard/index.ts
new file mode 100644
index 0000000000..29fee85cbb
--- /dev/null
+++ b/packages/bulma/src/components/BuModalCard/index.ts
@@ -0,0 +1 @@
+export { default as BuModalCard } from './BuModalCard.vue'
diff --git a/packages/bulma/src/components/BuModalClose/BuModalClose.vue b/packages/bulma/src/components/BuModalClose/BuModalClose.vue
new file mode 100644
index 0000000000..6edfb3425a
--- /dev/null
+++ b/packages/bulma/src/components/BuModalClose/BuModalClose.vue
@@ -0,0 +1,33 @@
+/**
+ * @module BuModalClose
+ *
+ * @remarks
+ * Bulma `.modal-close` — the large corner button of the plain variant,
+ * rendered through v0's `Dialog.Close` for the localized `aria-label` and
+ * close wiring. Bulma places it as a sibling of `.modal-content`.
+ */
+
+<script lang="ts">
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  export interface BuModalCloseProps {
+    /** Size modifier rendered as `is-{size}`. */
+    size?: 'small' | 'normal' | 'medium' | 'large'
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModalClose' })
+
+  const { size = 'large' } = defineProps<BuModalCloseProps>()
+
+  const classes = toRef(() => ['modal-close', `is-${size}`])
+</script>
+
+<template>
+  <Dialog.Close :class="classes" />
+</template>
diff --git a/packages/bulma/src/components/BuModalClose/index.ts b/packages/bulma/src/components/BuModalClose/index.ts
new file mode 100644
index 0000000000..d3ad90a3e0
--- /dev/null
+++ b/packages/bulma/src/components/BuModalClose/index.ts
@@ -0,0 +1,2 @@
+export type { BuModalCloseProps } from './BuModalClose.vue'
+export { default as BuModalClose } from './BuModalClose.vue'
diff --git a/packages/bulma/src/components/BuModalContent/BuModalContent.vue b/packages/bulma/src/components/BuModalContent/BuModalContent.vue
new file mode 100644
index 0000000000..cf56220471
--- /dev/null
+++ b/packages/bulma/src/components/BuModalContent/BuModalContent.vue
@@ -0,0 +1,54 @@
+/**
+ * @module BuModalContent
+ *
+ * @remarks
+ * Bulma `.modal-content` — the panel of the plain variant. Carries the dialog
+ * identity (`id`, `role`, `aria-modal`) and registers itself with BuModal's
+ * focus trap. Pair it with BuModalClose for the documented `.modal-close`
+ * button that sits beside it inside `.modal`.
+ */
+
+<script lang="ts">
+  // Framework
+  import { useDialogContext } from '@vuetify/v0'
+
+  // Utilities
+  import { orphan } from '../../utilities/context'
+
+  // Types
+  import type { DialogContext } from '@vuetify/v0'
+
+  // Context
+  import { useBuModal } from '../BuModal/BuModal.vue'
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModalContent' })
+
+  defineSlots<{
+    /** `.modal-content` body. */
+    default?: () => any
+  }>()
+
+  const modal = useBuModal()
+  const dialog = useDialogContext('v0:dialog', null as unknown as DialogContext) as DialogContext | null
+
+  orphan('BuModalContent', 'BuModal', modal)
+
+  function onPanel (el: unknown) {
+    modal?.panel(el as HTMLElement | null)
+  }
+</script>
+
+<template>
+  <div
+    :id="dialog?.id"
+    :ref="onPanel"
+    aria-modal="true"
+    class="modal-content"
+    role="dialog"
+    tabindex="-1"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuModalContent/index.ts b/packages/bulma/src/components/BuModalContent/index.ts
new file mode 100644
index 0000000000..be6a45bda3
--- /dev/null
+++ b/packages/bulma/src/components/BuModalContent/index.ts
@@ -0,0 +1 @@
+export { default as BuModalContent } from './BuModalContent.vue'
diff --git a/packages/bulma/src/components/BuModalFoot/BuModalFoot.vue b/packages/bulma/src/components/BuModalFoot/BuModalFoot.vue
new file mode 100644
index 0000000000..83f4b48e6a
--- /dev/null
+++ b/packages/bulma/src/components/BuModalFoot/BuModalFoot.vue
@@ -0,0 +1,22 @@
+/**
+ * @module BuModalFoot
+ *
+ * @remarks
+ * Bulma `.modal-card-foot` — the action row of the card variant. Pure markup;
+ * it holds no modal state.
+ */
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModalFoot' })
+
+  defineSlots<{
+    /** Footer content — typically a `.buttons` group. */
+    default?: () => any
+  }>()
+</script>
+
+<template>
+  <footer class="modal-card-foot">
+    <slot />
+  </footer>
+</template>
diff --git a/packages/bulma/src/components/BuModalFoot/index.ts b/packages/bulma/src/components/BuModalFoot/index.ts
new file mode 100644
index 0000000000..bc13d84cb9
--- /dev/null
+++ b/packages/bulma/src/components/BuModalFoot/index.ts
@@ -0,0 +1 @@
+export { default as BuModalFoot } from './BuModalFoot.vue'
diff --git a/packages/bulma/src/components/BuModalHead/BuModalHead.vue b/packages/bulma/src/components/BuModalHead/BuModalHead.vue
new file mode 100644
index 0000000000..fc193be61b
--- /dev/null
+++ b/packages/bulma/src/components/BuModalHead/BuModalHead.vue
@@ -0,0 +1,40 @@
+/**
+ * @module BuModalHead
+ *
+ * @remarks
+ * Bulma `.modal-card-head` — holds BuModalTitle and always renders the
+ * documented `.delete` button, wired to close through v0's `Dialog.Close`
+ * (which supplies the localized `aria-label` and keyboard handling).
+ */
+
+<script lang="ts">
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+
+  // Utilities
+  import { orphan } from '../../utilities/context'
+
+  // Context
+  import { useBuModal } from '../BuModal/BuModal.vue'
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModalHead' })
+
+  defineSlots<{
+    /** Head content — typically BuModalTitle. */
+    default?: () => any
+  }>()
+
+  const modal = useBuModal()
+
+  orphan('BuModalHead', 'BuModal', modal)
+</script>
+
+<template>
+  <header class="modal-card-head">
+    <slot />
+
+    <Dialog.Close class="delete" />
+  </header>
+</template>
diff --git a/packages/bulma/src/components/BuModalHead/index.ts b/packages/bulma/src/components/BuModalHead/index.ts
new file mode 100644
index 0000000000..d9873fd944
--- /dev/null
+++ b/packages/bulma/src/components/BuModalHead/index.ts
@@ -0,0 +1 @@
+export { default as BuModalHead } from './BuModalHead.vue'
diff --git a/packages/bulma/src/components/BuModalTitle/BuModalTitle.vue b/packages/bulma/src/components/BuModalTitle/BuModalTitle.vue
new file mode 100644
index 0000000000..83ba9a9d1b
--- /dev/null
+++ b/packages/bulma/src/components/BuModalTitle/BuModalTitle.vue
@@ -0,0 +1,31 @@
+/**
+ * @module BuModalTitle
+ *
+ * @remarks
+ * Bulma `.modal-card-title` — rendered through v0's `Dialog.Title` so its id
+ * matches the `aria-labelledby` BuModalCard binds. Omitting it leaves that
+ * reference dangling (see SPEC.md "Known limitations").
+ */
+
+<script lang="ts">
+  // Framework
+  import { Dialog } from '@vuetify/v0'
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuModalTitle' })
+
+  defineSlots<{
+    /** Title text. */
+    default?: () => any
+  }>()
+</script>
+
+<template>
+  <Dialog.Title
+    as="p"
+    class="modal-card-title"
+  >
+    <slot />
+  </Dialog.Title>
+</template>
diff --git a/packages/bulma/src/components/BuModalTitle/index.ts b/packages/bulma/src/components/BuModalTitle/index.ts
new file mode 100644
index 0000000000..8f2f674d14
--- /dev/null
+++ b/packages/bulma/src/components/BuModalTitle/index.ts
@@ -0,0 +1 @@
+export { default as BuModalTitle } from './BuModalTitle.vue'
diff --git a/packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts b/packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts
index dc0b51bb7e..e398204859 100644
--- a/packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts
+++ b/packages/bulma/src/components/BuNavbar/BuNavbar.browser.test.ts
@@ -7,6 +7,8 @@ import { BuNavbar } from './index'
 import { createApp, h, nextTick } from 'vue'
 
 import { conform } from '../../../harness/conform'
+import { BuNavbarBrand } from '../BuNavbarBrand'
+import { BuNavbarMenu } from '../BuNavbarMenu'
 
 function mount (component: Parameters<typeof createApp>[0]) {
   const host = document.createElement('div')
@@ -51,12 +53,12 @@ function menu () {
 describe('buNavbar', () => {
   it('should conform to the full navbar fixture', async () => {
     const { el, unmount } = mount({
-      render: () => h(BuNavbar, { id: 'navbarBasicExample' }, {
-        brand: () => h('a', { class: 'navbar-item', href: 'https://bulma.io' }, [
+      render: () => h(BuNavbar, { id: 'navbarBasicExample' }, () => [
+        h(BuNavbarBrand, null, () => h('a', { class: 'navbar-item', href: 'https://bulma.io' }, [
           h('img', { src: 'logo.png', alt: 'Logo' }),
-        ]),
-        default: () => menu(),
-      }),
+        ])),
+        h(BuNavbarMenu, null, menu),
+      ]),
     })
 
     await nextTick()
@@ -68,11 +70,12 @@ describe('buNavbar', () => {
 
   it('should toggle is-active on both burger and menu and conform to the open fixture', async () => {
     const { el, unmount } = mount({
-      render: () => h(BuNavbar, { id: 'navbarOpenExample' }, {
-        default: () => h('div', { class: 'navbar-start' }, [
+      render: () => h(BuNavbar, { id: 'navbarOpenExample' }, () => [
+        h(BuNavbarBrand),
+        h(BuNavbarMenu, null, () => h('div', { class: 'navbar-start' }, [
           h('a', { class: 'navbar-item' }, 'Home'),
-        ]),
-      }),
+        ])),
+      ]),
     })
 
     await nextTick()
diff --git a/packages/bulma/src/components/BuNavbar/BuNavbar.vue b/packages/bulma/src/components/BuNavbar/BuNavbar.vue
index 9691b92ee4..e6fe051dc4 100644
--- a/packages/bulma/src/components/BuNavbar/BuNavbar.vue
+++ b/packages/bulma/src/components/BuNavbar/BuNavbar.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   // Framework
-  import { Toggle, useId } from '@vuetify/v0'
+  import { createContext, useId } from '@vuetify/v0'
 
   // Utilities
   import { toRef } from 'vue'
@@ -12,8 +12,17 @@
     label?: string
     /** Color modifier applied to `.navbar` */
     color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
-    /** Renders the `.navbar-burger` toggle */
-    burger?: boolean
+  }
+
+  export interface BuNavbarContext {
+    /** Id shared by `.navbar-menu` and the burger's `data-target`. */
+    id: () => string
+    /** Whether the mobile menu is open. */
+    isOpen: () => boolean
+    /** Toggle the mobile menu. */
+    toggle: () => void
+    /** Close the mobile menu. */
+    close: () => void
   }
 
   export interface BuNavbarSlotProps {
@@ -24,16 +33,20 @@
     /** Close the mobile menu */
     close: () => void
   }
+
+  // Only the parent provides, so the provider stays module-local; parts import
+  // the hook.
+  const [useBuNavbar, provideBuNavbar] = createContext<BuNavbarContext | null>('bulma:navbar', null)
+
+  export { useBuNavbar }
 </script>
 
 <script setup lang="ts">
   defineOptions({ name: 'BuNavbar' })
 
   defineSlots<{
-    /** Menu content — rendered inside `.navbar-menu` (`.navbar-start` / `.navbar-end` markup is userland) */
+    /** `nav.navbar` children — BuNavbarBrand and BuNavbarMenu. */
     default: (props: BuNavbarSlotProps) => any
-    /** Brand content — rendered inside `.navbar-brand`, before the burger */
-    brand?: (props: BuNavbarSlotProps) => any
   }>()
 
   defineEmits<{
@@ -44,7 +57,6 @@
     id,
     label = 'main navigation',
     color,
-    burger = true,
   } = defineProps<BuNavbarProps>()
 
   const model = defineModel<boolean>({ default: false })
@@ -62,6 +74,13 @@
     model.value = false
   }
 
+  provideBuNavbar({
+    id: () => menu.value,
+    isOpen: () => model.value,
+    toggle,
+    close,
+  })
+
   const slotProps = toRef((): BuNavbarSlotProps => ({
     isOpen: model.value,
     toggle,
@@ -76,35 +95,6 @@
     :class="color && `is-${color}`"
     role="navigation"
   >
-    <div class="navbar-brand">
-      <slot
-        name="brand"
-        v-bind="slotProps"
-      />
-
-      <Toggle.Root
-        v-if="burger"
-        v-model="model"
-        :aria-expanded="model ? 'true' : 'false'"
-        aria-label="menu"
-        as="a"
-        class="navbar-burger"
-        :class="{ 'is-active': model }"
-        :data-target="menu"
-      >
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
-        <span aria-hidden="true" />
-      </Toggle.Root>
-    </div>
-
-    <div
-      :id="menu"
-      class="navbar-menu"
-      :class="{ 'is-active': model }"
-    >
-      <slot v-bind="slotProps" />
-    </div>
+    <slot v-bind="slotProps" />
   </nav>
 </template>
diff --git a/packages/bulma/src/components/BuNavbar/index.ts b/packages/bulma/src/components/BuNavbar/index.ts
index 09b582b3f3..b7c64b9f83 100644
--- a/packages/bulma/src/components/BuNavbar/index.ts
+++ b/packages/bulma/src/components/BuNavbar/index.ts
@@ -1,2 +1,2 @@
-export type { BuNavbarProps, BuNavbarSlotProps } from './BuNavbar.vue'
+export type { BuNavbarContext, BuNavbarProps, BuNavbarSlotProps } from './BuNavbar.vue'
 export { default as BuNavbar } from './BuNavbar.vue'
diff --git a/packages/bulma/src/components/BuNavbarBrand/BuNavbarBrand.vue b/packages/bulma/src/components/BuNavbarBrand/BuNavbarBrand.vue
new file mode 100644
index 0000000000..9c09a71a5f
--- /dev/null
+++ b/packages/bulma/src/components/BuNavbarBrand/BuNavbarBrand.vue
@@ -0,0 +1,70 @@
+/**
+ * @module BuNavbarBrand
+ *
+ * @remarks
+ * Bulma `.navbar-brand` — brand items plus the `.navbar-burger` toggle Bulma
+ * documents at the end of the brand row. The burger is v0's Toggle rendered
+ * as the role=button anchor the docs ship, with `aria-expanded` and
+ * `data-target` hand-bound from BuNavbar's context.
+ */
+
+<script lang="ts">
+  // Framework
+  import { Toggle } from '@vuetify/v0'
+
+  // Utilities
+  import { orphan } from '../../utilities/context'
+  import { toRef } from 'vue'
+
+  // Context
+  import { useBuNavbar } from '../BuNavbar/BuNavbar.vue'
+
+  export interface BuNavbarBrandProps {
+    /** Renders the `.navbar-burger` toggle */
+    burger?: boolean
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNavbarBrand' })
+
+  defineSlots<{
+    /** Brand content — `.navbar-item` links, logos. */
+    default?: () => any
+  }>()
+
+  const { burger = true } = defineProps<BuNavbarBrandProps>()
+
+  const navbar = useBuNavbar()
+
+  orphan('BuNavbarBrand', 'BuNavbar', navbar)
+
+  const isOpen = toRef(() => navbar?.isOpen() ?? false)
+
+  function onToggle () {
+    navbar?.toggle()
+  }
+</script>
+
+<template>
+  <div class="navbar-brand">
+    <slot />
+
+    <Toggle.Root
+      v-if="burger"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      aria-label="menu"
+      as="a"
+      class="navbar-burger"
+      :class="{ 'is-active': isOpen }"
+      :data-target="navbar?.id()"
+      :model-value="isOpen"
+      @update:model-value="onToggle"
+    >
+      <span aria-hidden="true" />
+      <span aria-hidden="true" />
+      <span aria-hidden="true" />
+      <span aria-hidden="true" />
+    </Toggle.Root>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuNavbarBrand/index.ts b/packages/bulma/src/components/BuNavbarBrand/index.ts
new file mode 100644
index 0000000000..06f946a6db
--- /dev/null
+++ b/packages/bulma/src/components/BuNavbarBrand/index.ts
@@ -0,0 +1,2 @@
+export type { BuNavbarBrandProps } from './BuNavbarBrand.vue'
+export { default as BuNavbarBrand } from './BuNavbarBrand.vue'
diff --git a/packages/bulma/src/components/BuNavbarMenu/BuNavbarMenu.vue b/packages/bulma/src/components/BuNavbarMenu/BuNavbarMenu.vue
new file mode 100644
index 0000000000..9ba9cde98d
--- /dev/null
+++ b/packages/bulma/src/components/BuNavbarMenu/BuNavbarMenu.vue
@@ -0,0 +1,63 @@
+/**
+ * @module BuNavbarMenu
+ *
+ * @remarks
+ * Bulma `.navbar-menu` — the region the burger expands. `is-active` is the
+ * only display mechanism (never the `hidden` attribute: `.navbar-menu.is-active`
+ * author CSS silently beats it). `.navbar-start` / `.navbar-end` markup is
+ * userland, as is the hover-driven `.navbar-dropdown` — pure Bulma CSS.
+ */
+
+<script lang="ts">
+  // Utilities
+  import { orphan } from '../../utilities/context'
+  import { toRef } from 'vue'
+
+  // Context
+  import { useBuNavbar } from '../BuNavbar/BuNavbar.vue'
+
+  export interface BuNavbarMenuSlotProps {
+    /** Whether the mobile menu is open */
+    isOpen: boolean
+    /** Toggle the mobile menu */
+    toggle: () => void
+    /** Close the mobile menu */
+    close: () => void
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNavbarMenu' })
+
+  defineSlots<{
+    default?: (props: BuNavbarMenuSlotProps) => any
+  }>()
+
+  const navbar = useBuNavbar()
+
+  orphan('BuNavbarMenu', 'BuNavbar', navbar)
+
+  function toggle () {
+    navbar?.toggle()
+  }
+
+  function close () {
+    navbar?.close()
+  }
+
+  const slotProps = toRef((): BuNavbarMenuSlotProps => ({
+    isOpen: navbar?.isOpen() ?? false,
+    toggle,
+    close,
+  }))
+</script>
+
+<template>
+  <div
+    :id="navbar?.id()"
+    class="navbar-menu"
+    :class="{ 'is-active': slotProps.isOpen }"
+  >
+    <slot v-bind="slotProps" />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuNavbarMenu/index.ts b/packages/bulma/src/components/BuNavbarMenu/index.ts
new file mode 100644
index 0000000000..b2560c7411
--- /dev/null
+++ b/packages/bulma/src/components/BuNavbarMenu/index.ts
@@ -0,0 +1,2 @@
+export type { BuNavbarMenuSlotProps } from './BuNavbarMenu.vue'
+export { default as BuNavbarMenu } from './BuNavbarMenu.vue'
diff --git a/packages/bulma/src/components/BuPagination/BuPagination.vue b/packages/bulma/src/components/BuPagination/BuPagination.vue
index e1c003e18b..4a81e289fc 100644
--- a/packages/bulma/src/components/BuPagination/BuPagination.vue
+++ b/packages/bulma/src/components/BuPagination/BuPagination.vue
@@ -8,6 +8,10 @@
   export interface BuPaginationProps {
     /** Total page count (maps to v0 size with one item per page) */
     pages?: number
+    /** `.pagination-previous` label */
+    previous?: string
+    /** `.pagination-next` label */
+    next?: string
     /** Number of visible page buttons; omit for v0's responsive auto-measure */
     visible?: number
     /** Ellipsis character rendered between page ranges */
@@ -26,13 +30,6 @@
 <script setup lang="ts">
   defineOptions({ name: 'BuPagination' })
 
-  defineSlots<{
-    /** Previous button content */
-    prev?: () => any
-    /** Next button content */
-    next?: () => any
-  }>()
-
   defineEmits<{
     /** Emitted when the current page changes */
     'update:model-value': [value: number]
@@ -40,6 +37,8 @@
 
   const {
     pages = 1,
+    previous = 'Previous',
+    next = 'Next page',
     visible,
     ellipsis = '…',
     size,
@@ -85,7 +84,7 @@
         class="pagination-previous"
         :class="{ 'is-disabled': isFirst }"
       >
-        <slot name="prev">Previous</slot>
+        {{ previous }}
       </Pagination.Prev>
 
       <Pagination.Next
@@ -93,7 +92,7 @@
         class="pagination-next"
         :class="{ 'is-disabled': isLast }"
       >
-        <slot name="next">Next page</slot>
+        {{ next }}
       </Pagination.Next>
 
       <ul class="pagination-list">
diff --git a/packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts b/packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts
index dd6d8ee7d4..cb7d6037b4 100644
--- a/packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts
+++ b/packages/bulma/src/components/BuPanel/BuPanel.browser.test.ts
@@ -5,14 +5,17 @@ import { BuPanel } from './index'
 // Utilities
 import { createApp, h, nextTick, shallowRef } from 'vue'
 
-// Types
-import type { BuPanelItem } from './index'
-
 import { conform } from '../../../harness/conform'
+// Components
+import { BuPanelBlock } from '../BuPanelBlock'
+import { BuPanelHeading } from '../BuPanelHeading'
+import { BuPanelIcon } from '../BuPanelIcon'
+import { BuPanelTab } from '../BuPanelTab'
+import { BuPanelTabs } from '../BuPanelTabs'
 
-const tabs = ['All', 'Public', 'Private', 'Sources', 'Forks']
+const labels = ['All', 'Public', 'Private', 'Sources', 'Forks']
 
-const repos: BuPanelItem<string>[] = [
+const repos = [
   { label: 'bulma', icon: 'fas fa-book' },
   { label: 'marksheet', icon: 'fas fa-book' },
   { label: 'minireset.css', icon: 'fas fa-book' },
@@ -21,16 +24,32 @@ const repos: BuPanelItem<string>[] = [
   { label: 'mojs', icon: 'fas fa-code-branch' },
 ]
 
-const slots = {
-  start: () => h('div', { class: 'panel-block' }, [
+function search () {
+  return h('div', { class: 'panel-block' }, [
     h('p', { class: 'control has-icons-left' }, [
       h('input', { class: 'input', type: 'text', placeholder: 'Search' }),
       h('span', { class: 'icon is-left' }, [
         h('i', { 'class': 'fas fa-search', 'aria-hidden': 'true' }),
       ]),
     ]),
-  ]),
-  default: () => [
+  ])
+}
+
+function tabs (props: Record<string, unknown> = {}) {
+  return h(BuPanelTabs as any, props, () => labels.map(label =>
+    h(BuPanelTab as any, { key: label, value: label }, () => label),
+  ))
+}
+
+function blocks () {
+  return repos.map(repo => h(BuPanelBlock as any, { key: repo.label, value: repo.label }, () => [
+    h(BuPanelIcon, { icon: repo.icon }),
+    repo.label,
+  ]))
+}
+
+function footer () {
+  return [
     h('label', { class: 'panel-block' }, [
       h('input', { type: 'checkbox' }),
       ' remember me ',
@@ -38,7 +57,7 @@ const slots = {
     h('div', { class: 'panel-block' }, [
       h('button', { class: 'button is-link is-outlined is-fullwidth' }, ' Reset all filters '),
     ]),
-  ],
+  ]
 }
 
 function mount (component: Parameters<typeof createApp>[0]) {
@@ -57,12 +76,13 @@ function mount (component: Parameters<typeof createApp>[0]) {
 describe('buPanel', () => {
   it('conforms to the panel fixture', () => {
     const { el, unmount } = mount({
-      render: () => h(BuPanel as any, {
-        heading: 'Repositories',
-        tabs,
-        items: repos,
-        modelValue: 'bulma',
-      }, slots),
+      render: () => h(BuPanel as any, { modelValue: 'bulma' }, () => [
+        h(BuPanelHeading, null, () => 'Repositories'),
+        search(),
+        tabs(),
+        blocks(),
+        footer(),
+      ]),
     })
     conform(el, 'panel')
     unmount()
@@ -74,17 +94,22 @@ describe('buPanel', () => {
     const { el, unmount } = mount({
       setup () {
         return () => h(BuPanel as any, {
-          'heading': 'Repositories',
-          tabs,
-          'items': repos,
           'modelValue': selected.value,
           'onUpdate:modelValue': (value: string | string[]) => {
             selected.value = value
           },
-          'onTab': (value: string) => {
-            tabbed.value = value
-          },
-        }, slots)
+        }, () => [
+          h(BuPanelHeading, null, () => 'Repositories'),
+          search(),
+          tabs({
+            'modelValue': tabbed.value,
+            'onUpdate:modelValue': (value: string) => {
+              tabbed.value = value
+            },
+          }),
+          blocks(),
+          footer(),
+        ])
       },
     })
 
@@ -102,12 +127,12 @@ describe('buPanel', () => {
     expect(el.querySelector('a.panel-block.is-active')!.textContent!.trim()).toBe('bulma')
 
     // Selecting another block moves the single block selection.
-    const blocks = [...el.querySelectorAll('a.panel-block')]
-    ;(blocks[1] as HTMLElement).click()
+    const rows = [...el.querySelectorAll('a.panel-block')]
+    ;(rows[1] as HTMLElement).click()
     await nextTick()
     expect(selected.value).toBe('marksheet')
-    expect(blocks[0].classList.contains('is-active')).toBe(false)
-    expect(blocks[1].classList.contains('is-active')).toBe(true)
+    expect(rows[0].classList.contains('is-active')).toBe(false)
+    expect(rows[1].classList.contains('is-active')).toBe(true)
 
     unmount()
   })
@@ -117,22 +142,21 @@ describe('buPanel', () => {
     const { el, unmount } = mount({
       setup () {
         return () => h(BuPanel as any, {
-          'items': repos,
           'multiple': true,
           'modelValue': selected.value,
           'onUpdate:modelValue': (value: string | string[]) => {
             selected.value = value as string[]
           },
-        })
+        }, blocks)
       },
     })
 
-    const blocks = [...el.querySelectorAll('a.panel-block')]
-    ;(blocks[1] as HTMLElement).click()
+    const rows = [...el.querySelectorAll('a.panel-block')]
+    ;(rows[1] as HTMLElement).click()
     await nextTick()
     expect(selected.value).toEqual(['bulma', 'marksheet'])
-    expect(blocks[0].classList.contains('is-active')).toBe(true)
-    expect(blocks[1].classList.contains('is-active')).toBe(true)
+    expect(rows[0].classList.contains('is-active')).toBe(true)
+    expect(rows[1].classList.contains('is-active')).toBe(true)
 
     unmount()
   })
diff --git a/packages/bulma/src/components/BuPanel/BuPanel.vue b/packages/bulma/src/components/BuPanel/BuPanel.vue
index ebd183d1ab..2b104a53f0 100644
--- a/packages/bulma/src/components/BuPanel/BuPanel.vue
+++ b/packages/bulma/src/components/BuPanel/BuPanel.vue
@@ -1,26 +1,8 @@
 <script lang="ts">
   // Framework
-  import { isString, Selection, Single } from '@vuetify/v0'
+  import { Selection } from '@vuetify/v0'
 
-  // Utilities
-  import { shallowRef } from 'vue'
-
-  export interface BuPanelItem<T = unknown> {
-    /** Selection value — defaults to `label` when omitted. */
-    value?: T
-    /** Block text. */
-    label: string
-    /** Icon classes for the `span.panel-icon > i` (e.g. `fas fa-book`). */
-    icon?: string
-  }
-
-  export interface BuPanelProps<T = unknown> {
-    /** `p.panel-heading` text. */
-    heading?: string
-    /** `p.panel-tabs` anchor labels — its own single-selection scope, first tab auto-selects. */
-    tabs?: string[]
-    /** Selectable `a.panel-block` rows — the v-model selection scope. */
-    items?: BuPanelItem<T>[]
+  export interface BuPanelProps {
     /** Allow multiple selected `a.panel-block` rows. */
     multiple?: boolean
     /** Bulma color modifier on the panel root. */
@@ -32,34 +14,23 @@
   defineOptions({ name: 'BuPanel' })
 
   defineSlots<{
-    /** Passthrough blocks between the heading and the tabs (e.g. a search `div.panel-block`). */
-    start: () => any
-    /** Passthrough blocks after the selectable rows (e.g. checkbox and button `panel-block`s). */
+    /**
+     * `nav.panel` children — BuPanelHeading, BuPanelTabs, BuPanelBlock, and any
+     * passthrough `.panel-block` markup, flat, exactly as Bulma nests them.
+     */
     default: () => any
   }>()
 
-  const emit = defineEmits<{
+  defineEmits<{
     'update:model-value': [value: T | T[]]
-    'tab': [value: string]
   }>()
 
   const {
-    heading,
-    tabs = [],
-    items = [],
     multiple = false,
     color,
-  } = defineProps<BuPanelProps<T>>()
+  } = defineProps<BuPanelProps>()
 
   const model = defineModel<T | T[]>()
-
-  const tab = shallowRef<string>()
-
-  function onTab (value: string | string[] | undefined) {
-    if (!isString(value)) return
-    tab.value = value
-    emit('tab', value)
-  }
 </script>
 
 <template>
@@ -67,69 +38,15 @@
     class="panel"
     :class="color ? `is-${color}` : undefined"
   >
-    <p
-      v-if="heading"
-      class="panel-heading"
-    >{{ heading }}</p>
-
-    <slot name="start" />
-
-    <Single.Root
-      v-if="tabs.length > 0"
-      mandatory="force"
-      :model-value="tab"
-      @update:model-value="onTab"
-    >
-      <!--
-        Hand-picked bindings, not the Item attrs spread: aria-selected /
-        aria-disabled are invalid on role-less anchors (axe aria-allowed-attr,
-        critical) — data-selected keeps the data-attr styling hook. Same
-        convention as BuMenu; see CANON.
-      -->
-      <p class="panel-tabs">
-        <Single.Item
-          v-for="label in tabs"
-          :key="label"
-          v-slot="{ isSelected, select }"
-          :value="label"
-        >
-          <a
-            :class="{ 'is-active': isSelected }"
-            :data-selected="isSelected || undefined"
-            @click="select"
-          >{{ label }}</a>
-        </Single.Item>
-      </p>
-    </Single.Root>
-
+    <!--
+      The block selection scope spans the whole panel; BuPanelTabs opens its
+      own nested single-selection scope for the `.panel-tabs` anchors.
+    -->
     <Selection.Root
       v-model="model"
       :multiple
     >
-      <Selection.Item
-        v-for="item in items"
-        :key="item.label"
-        v-slot="{ isSelected, select }"
-        :value="item.value ?? item.label"
-      >
-        <a
-          class="panel-block"
-          :class="{ 'is-active': isSelected }"
-          :data-selected="isSelected || undefined"
-          @click="select"
-        >
-          <span
-            v-if="item.icon"
-            class="panel-icon"
-          ><i
-            aria-hidden="true"
-            :class="item.icon"
-          /></span>
-          {{ item.label }}
-        </a>
-      </Selection.Item>
+      <slot />
     </Selection.Root>
-
-    <slot />
   </nav>
 </template>
diff --git a/packages/bulma/src/components/BuPanel/index.ts b/packages/bulma/src/components/BuPanel/index.ts
index 4ca323dd8b..01a560f5b3 100644
--- a/packages/bulma/src/components/BuPanel/index.ts
+++ b/packages/bulma/src/components/BuPanel/index.ts
@@ -1,3 +1,3 @@
-export type { BuPanelItem, BuPanelProps } from './BuPanel.vue'
+export type { BuPanelProps } from './BuPanel.vue'
 
 export { default as BuPanel } from './BuPanel.vue'
diff --git a/packages/bulma/src/components/BuPanelBlock/BuPanelBlock.vue b/packages/bulma/src/components/BuPanelBlock/BuPanelBlock.vue
new file mode 100644
index 0000000000..37a7e1a090
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelBlock/BuPanelBlock.vue
@@ -0,0 +1,46 @@
+/**
+ * @module BuPanelBlock
+ *
+ * @remarks
+ * A selectable `a.panel-block` row inside BuPanel's selection scope. Bulma's
+ * non-anchor blocks (`label.panel-block`, `div.panel-block`) carry no state
+ * and stay plain userland markup. Hand-picked bindings, not the Item attrs
+ * spread — see BuPanelTab for why.
+ */
+
+<script lang="ts">
+  // Framework
+  import { Selection } from '@vuetify/v0'
+
+  export interface BuPanelBlockProps<V = unknown> {
+    /** Selection value matched against the BuPanel v-model. */
+    value?: V
+  }
+</script>
+
+<script lang="ts" setup generic="V = unknown">
+  defineOptions({ name: 'BuPanelBlock' })
+
+  defineSlots<{
+    /** Row content — typically a BuPanelIcon followed by the label text. */
+    default: () => any
+  }>()
+
+  const { value } = defineProps<BuPanelBlockProps<V>>()
+</script>
+
+<template>
+  <Selection.Item
+    v-slot="{ isSelected, select }"
+    :value
+  >
+    <a
+      class="panel-block"
+      :class="{ 'is-active': isSelected }"
+      :data-selected="isSelected || undefined"
+      @click="select"
+    >
+      <slot />
+    </a>
+  </Selection.Item>
+</template>
diff --git a/packages/bulma/src/components/BuPanelBlock/index.ts b/packages/bulma/src/components/BuPanelBlock/index.ts
new file mode 100644
index 0000000000..e4f32c1c53
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelBlock/index.ts
@@ -0,0 +1,2 @@
+export type { BuPanelBlockProps } from './BuPanelBlock.vue'
+export { default as BuPanelBlock } from './BuPanelBlock.vue'
diff --git a/packages/bulma/src/components/BuPanelHeading/BuPanelHeading.vue b/packages/bulma/src/components/BuPanelHeading/BuPanelHeading.vue
new file mode 100644
index 0000000000..b0e83e2269
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelHeading/BuPanelHeading.vue
@@ -0,0 +1,21 @@
+/**
+ * @module BuPanelHeading
+ *
+ * @remarks
+ * Bulma `p.panel-heading` — the panel's title bar. Pure markup.
+ */
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuPanelHeading' })
+
+  defineSlots<{
+    /** Heading text. */
+    default?: () => any
+  }>()
+</script>
+
+<template>
+  <p class="panel-heading">
+    <slot />
+  </p>
+</template>
diff --git a/packages/bulma/src/components/BuPanelHeading/index.ts b/packages/bulma/src/components/BuPanelHeading/index.ts
new file mode 100644
index 0000000000..3e88c20c46
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelHeading/index.ts
@@ -0,0 +1 @@
+export { default as BuPanelHeading } from './BuPanelHeading.vue'
diff --git a/packages/bulma/src/components/BuPanelIcon/BuPanelIcon.vue b/packages/bulma/src/components/BuPanelIcon/BuPanelIcon.vue
new file mode 100644
index 0000000000..3a005e7598
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelIcon/BuPanelIcon.vue
@@ -0,0 +1,34 @@
+/**
+ * @module BuPanelIcon
+ *
+ * @remarks
+ * Bulma `span.panel-icon` — the leading glyph of a panel block. The `icon`
+ * prop names the icon-font classes Bulma's docs use; the default slot takes
+ * over for anything else (SVG, an image).
+ */
+
+<script lang="ts">
+  export interface BuPanelIconProps {
+    /** Icon font classes for the inner `<i>` (e.g. `fas fa-book`). */
+    icon?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuPanelIcon' })
+
+  defineSlots<{
+    /** Custom glyph — replaces the `icon`-driven `<i>`. */
+    default?: () => any
+  }>()
+
+  const { icon } = defineProps<BuPanelIconProps>()
+</script>
+
+<template>
+  <span class="panel-icon">
+    <slot>
+      <i aria-hidden="true" :class="icon" />
+    </slot>
+  </span>
+</template>
diff --git a/packages/bulma/src/components/BuPanelIcon/index.ts b/packages/bulma/src/components/BuPanelIcon/index.ts
new file mode 100644
index 0000000000..7b03be5f4e
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelIcon/index.ts
@@ -0,0 +1,2 @@
+export type { BuPanelIconProps } from './BuPanelIcon.vue'
+export { default as BuPanelIcon } from './BuPanelIcon.vue'
diff --git a/packages/bulma/src/components/BuPanelTab/BuPanelTab.vue b/packages/bulma/src/components/BuPanelTab/BuPanelTab.vue
new file mode 100644
index 0000000000..8134aa72e8
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelTab/BuPanelTab.vue
@@ -0,0 +1,45 @@
+/**
+ * @module BuPanelTab
+ *
+ * @remarks
+ * A `.panel-tabs` anchor. Hand-picked bindings, not the Item attrs spread:
+ * `aria-selected` / `aria-disabled` are invalid on role-less anchors (axe
+ * aria-allowed-attr, critical) — `data-selected` keeps the data-attr styling
+ * hook. Same convention as BuPanelBlock and BuMenu; see CANON.
+ */
+
+<script lang="ts">
+  // Framework
+  import { Single } from '@vuetify/v0'
+
+  export interface BuPanelTabProps<V = unknown> {
+    /** Selection value matched against the BuPanelTabs v-model. */
+    value?: V
+  }
+</script>
+
+<script lang="ts" setup generic="V = unknown">
+  defineOptions({ name: 'BuPanelTab' })
+
+  defineSlots<{
+    /** Tab text. */
+    default: () => any
+  }>()
+
+  const { value } = defineProps<BuPanelTabProps<V>>()
+</script>
+
+<template>
+  <Single.Item
+    v-slot="{ isSelected, select }"
+    :value
+  >
+    <a
+      :class="{ 'is-active': isSelected }"
+      :data-selected="isSelected || undefined"
+      @click="select"
+    >
+      <slot />
+    </a>
+  </Single.Item>
+</template>
diff --git a/packages/bulma/src/components/BuPanelTab/index.ts b/packages/bulma/src/components/BuPanelTab/index.ts
new file mode 100644
index 0000000000..f51b438fc6
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelTab/index.ts
@@ -0,0 +1,2 @@
+export type { BuPanelTabProps } from './BuPanelTab.vue'
+export { default as BuPanelTab } from './BuPanelTab.vue'
diff --git a/packages/bulma/src/components/BuPanelTabs/BuPanelTabs.vue b/packages/bulma/src/components/BuPanelTabs/BuPanelTabs.vue
new file mode 100644
index 0000000000..45b29c80e9
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelTabs/BuPanelTabs.vue
@@ -0,0 +1,44 @@
+/**
+ * @module BuPanelTabs
+ *
+ * @remarks
+ * Bulma `p.panel-tabs` — its own single-selection scope, independent of the
+ * block selection BuPanel owns. `mandatory="force"` reproduces Bulma's docs,
+ * where one tab is always active.
+ */
+
+<script lang="ts">
+  // Framework
+  import { Single } from '@vuetify/v0'
+</script>
+
+<script lang="ts" setup generic="T = string">
+  defineOptions({ name: 'BuPanelTabs' })
+
+  defineSlots<{
+    /** BuPanelTab anchors. */
+    default: () => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: T]
+  }>()
+
+  const model = defineModel<T>()
+
+  function onModel (value: T | T[] | undefined) {
+    model.value = value as T | undefined
+  }
+</script>
+
+<template>
+  <p class="panel-tabs">
+    <Single.Root
+      mandatory="force"
+      :model-value="model"
+      @update:model-value="onModel"
+    >
+      <slot />
+    </Single.Root>
+  </p>
+</template>
diff --git a/packages/bulma/src/components/BuPanelTabs/index.ts b/packages/bulma/src/components/BuPanelTabs/index.ts
new file mode 100644
index 0000000000..18b71550dd
--- /dev/null
+++ b/packages/bulma/src/components/BuPanelTabs/index.ts
@@ -0,0 +1 @@
+export { default as BuPanelTabs } from './BuPanelTabs.vue'
diff --git a/packages/bulma/src/components/BuTabList/BuTabList.vue b/packages/bulma/src/components/BuTabList/BuTabList.vue
new file mode 100644
index 0000000000..07c5a8a3bb
--- /dev/null
+++ b/packages/bulma/src/components/BuTabList/BuTabList.vue
@@ -0,0 +1,57 @@
+/**
+ * @module BuTabList
+ *
+ * @remarks
+ * Bulma `.tabs` — the block itself plus the `ul` it always wraps. Carries
+ * every `.tabs` modifier; the tab panels are siblings of it inside BuTabs.
+ */
+
+<script lang="ts">
+  // Framework
+  import { Tabs } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  export interface BuTabListProps {
+    /** Centers the tab list */
+    centered?: boolean
+    /** Boxed (bordered) tab style */
+    boxed?: boolean
+    /** Mutually-exclusive toggle button style */
+    toggle?: boolean
+    /** Size modifier */
+    size?: 'small' | 'normal' | 'medium' | 'large'
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuTabList' })
+
+  defineSlots<{
+    /** BuTab items — rendered inside the `<ul>`. */
+    default: () => any
+  }>()
+
+  const {
+    centered = false,
+    boxed = false,
+    toggle = false,
+    size,
+  } = defineProps<BuTabListProps>()
+
+  const classes = toRef(() => [
+    size && `is-${size}`,
+    centered && 'is-centered',
+    boxed && 'is-boxed',
+    toggle && 'is-toggle',
+  ])
+</script>
+
+<template>
+  <div class="tabs" :class="classes">
+    <Tabs.List as="ul">
+      <slot />
+    </Tabs.List>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuTabList/index.ts b/packages/bulma/src/components/BuTabList/index.ts
new file mode 100644
index 0000000000..545e64c708
--- /dev/null
+++ b/packages/bulma/src/components/BuTabList/index.ts
@@ -0,0 +1,2 @@
+export type { BuTabListProps } from './BuTabList.vue'
+export { default as BuTabList } from './BuTabList.vue'
diff --git a/packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts b/packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts
index 299799a19c..4dd196e3cc 100644
--- a/packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts
+++ b/packages/bulma/src/components/BuTabs/BuTabs.browser.test.ts
@@ -8,6 +8,7 @@ import { createApp, h, nextTick, shallowRef } from 'vue'
 import { conform } from '../../../harness/conform'
 // Components
 import { BuTab } from '../BuTab'
+import { BuTabList } from '../BuTabList'
 import { BuTabPanel } from '../BuTabPanel'
 
 function mount (component: Parameters<typeof createApp>[0]) {
@@ -38,12 +39,12 @@ function icon (classes: string, label: string) {
 describe('buTabs', () => {
   it('should conform to the basic tabs fixture', async () => {
     const { el, unmount } = mount({
-      render: () => h(BuTabs as any, () => [
+      render: () => h(BuTabs as any, () => h(BuTabList, null, () => [
         tab('pictures', 'Pictures'),
         tab('music', 'Music'),
         tab('videos', 'Videos'),
         tab('documents', 'Documents'),
-      ]),
+      ])),
     })
 
     await nextTick()
@@ -55,12 +56,12 @@ describe('buTabs', () => {
 
   it('should conform to the centered icon tabs fixture', async () => {
     const { el, unmount } = mount({
-      render: () => h(BuTabs as any, { centered: true }, () => [
+      render: () => h(BuTabs as any, () => h(BuTabList, { centered: true }, () => [
         icon('fas fa-image', 'Pictures'),
         icon('fas fa-music', 'Music'),
         icon('fas fa-film', 'Videos'),
         icon('far fa-file-alt', 'Documents'),
-      ]),
+      ])),
     })
 
     await nextTick()
@@ -79,13 +80,11 @@ describe('buTabs', () => {
         'onUpdate:modelValue': (value: unknown) => {
           model.value = value as string
         },
-      }, {
-        default: () => [tab('a', 'Alpha'), tab('b', 'Beta')],
-        panels: () => [
-          h(BuTabPanel as any, { value: 'a' }, () => 'Alpha panel'),
-          h(BuTabPanel as any, { value: 'b' }, () => 'Beta panel'),
-        ],
-      }),
+      }, () => [
+        h(BuTabList, null, () => [tab('a', 'Alpha'), tab('b', 'Beta')]),
+        h(BuTabPanel as any, { value: 'a' }, () => 'Alpha panel'),
+        h(BuTabPanel as any, { value: 'b' }, () => 'Beta panel'),
+      ]),
     })
 
     await nextTick()
diff --git a/packages/bulma/src/components/BuTabs/BuTabs.vue b/packages/bulma/src/components/BuTabs/BuTabs.vue
index cd31c669f1..c0a30ef144 100644
--- a/packages/bulma/src/components/BuTabs/BuTabs.vue
+++ b/packages/bulma/src/components/BuTabs/BuTabs.vue
@@ -1,67 +1,30 @@
 <script lang="ts">
   // Framework
   import { Tabs } from '@vuetify/v0'
-
-  // Utilities
-  import { toRef, useAttrs } from 'vue'
-
-  export interface BuTabsProps {
-    /** Centers the tab list */
-    centered?: boolean
-    /** Boxed (bordered) tab style */
-    boxed?: boolean
-    /** Mutually-exclusive toggle button style */
-    toggle?: boolean
-    /** Size modifier */
-    size?: 'small' | 'normal' | 'medium' | 'large'
-  }
 </script>
 
 <script lang="ts" setup generic="T = unknown">
   defineOptions({ name: 'BuTabs', inheritAttrs: false })
 
-  const attrs = useAttrs()
-
   defineSlots<{
-    /** BuTab items — rendered inside the tab list `<ul>` */
+    /** Tabs context children — BuTabList and the BuTabPanel siblings that follow it. */
     default: () => any
-    /** BuTabPanel content — rendered after `.tabs`, still inside the tabs context */
-    panels?: () => any
   }>()
 
   defineEmits<{
     'update:model-value': [value: T]
   }>()
 
-  const {
-    centered = false,
-    boxed = false,
-    toggle = false,
-    size,
-  } = defineProps<BuTabsProps>()
-
   const model = defineModel<T>()
-
-  const classes = toRef(() => [
-    size && `is-${size}`,
-    centered && 'is-centered',
-    boxed && 'is-boxed',
-    toggle && 'is-toggle',
-  ])
 </script>
 
 <template>
+  <!--
+    Renders no element of its own: Bulma's `.tabs` block is BuTabList, and the
+    panels are siblings of it, so the selection context has to wrap both.
+    Modifier classes belong on BuTabList.
+  -->
   <Tabs.Root v-model="model">
-    <div
-      class="tabs"
-      :class="classes"
-      v-bind="attrs"
-    >
-      <Tabs.List as="ul">
-        <slot />
-      </Tabs.List>
-    </div>
-
-    <slot name="panels" />
+    <slot />
   </Tabs.Root>
 </template>
diff --git a/packages/bulma/src/components/BuTabs/index.ts b/packages/bulma/src/components/BuTabs/index.ts
index 9a56859b30..48f4b3bfc8 100644
--- a/packages/bulma/src/components/BuTabs/index.ts
+++ b/packages/bulma/src/components/BuTabs/index.ts
@@ -1,2 +1 @@
-export type { BuTabsProps } from './BuTabs.vue'
 export { default as BuTabs } from './BuTabs.vue'
diff --git a/packages/bulma/src/components/index.ts b/packages/bulma/src/components/index.ts
index 2c837a028b..e7a1d7cf71 100644
--- a/packages/bulma/src/components/index.ts
+++ b/packages/bulma/src/components/index.ts
@@ -2,21 +2,42 @@ export * from './BuBreadcrumb'
 export * from './BuCheckbox'
 export * from './BuControl'
 export * from './BuDropdown'
+export * from './BuDropdownMenu'
+export * from './BuDropdownTrigger'
 export * from './BuField'
+export * from './BuFieldBody'
+export * from './BuFieldLabel'
 export * from './BuFile'
 export * from './BuHelp'
 export * from './BuInput'
 export * from './BuLabel'
 export * from './BuMenu'
 export * from './BuMessage'
+export * from './BuMessageBody'
+export * from './BuMessageHeader'
 export * from './BuModal'
+export * from './BuModalBody'
+export * from './BuModalCard'
+export * from './BuModalClose'
+export * from './BuModalContent'
+export * from './BuModalFoot'
+export * from './BuModalHead'
+export * from './BuModalTitle'
 export * from './BuNavbar'
+export * from './BuNavbarBrand'
+export * from './BuNavbarMenu'
 export * from './BuNotification'
 export * from './BuPagination'
 export * from './BuPanel'
+export * from './BuPanelBlock'
+export * from './BuPanelHeading'
+export * from './BuPanelIcon'
+export * from './BuPanelTab'
+export * from './BuPanelTabs'
 export * from './BuRadio'
 export * from './BuSelect'
 export * from './BuTab'
+export * from './BuTabList'
 export * from './BuTabPanel'
 export * from './BuTabs'
 export * from './BuTextarea'
diff --git a/packages/bulma/src/utilities/context.ts b/packages/bulma/src/utilities/context.ts
new file mode 100644
index 0000000000..2eb5141907
--- /dev/null
+++ b/packages/bulma/src/utilities/context.ts
@@ -0,0 +1,23 @@
+/**
+ * Shared dev-time guard for part components.
+ *
+ * Region parts (BuModalHead, BuMessageHeader, BuDropdownMenu, …) read their
+ * state from the parent Bu component's context. Injection is optional so an
+ * orphan part still renders its Bulma markup instead of throwing; this warns
+ * once at setup so the missing wiring is not silent. Mirrors the BuHelp
+ * precedent for an ambient context that never arrived.
+ */
+
+// Framework
+import { isNull } from '@vuetify/v0'
+
+/** Warn in dev when a part rendered outside the parent that owns its state. */
+export function orphan (part: string, parent: string, context: unknown): void {
+  if (!__DEV__ || !isNull(context)) return
+
+  console.warn(
+    `[${part}] rendered outside <${parent}> — no ${parent} context was found, so the state it`,
+    'contributes (open/close wiring, ids, aria) is inert. Nest the part inside its parent exactly',
+    'as the Bulma markup nests.',
+  )
+}

From d5470140a36330c2f472d97c9c9bdd900499e3d5 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 09:15:09 -0500
Subject: [PATCH 04/18] docs(bulma): add Design Systems docs section with Bulma
 pilot

Landing page + BuModal/BuDropdown pages under a new Design Systems nav
section (clickable parent node, Guide-style). Examples render inside
iframed sandboxes (separate chrome-less vite entry) so Bulma's global
CSS stays isolated from the docs chrome: frames follow the docs theme
live via postMessage, and overlay components promote the frame to a
transparent full-viewport layer while pinning the inline example box in
place (0px trigger drift), restoring on close. Each page pairs the
verbatim conformance fixture markup with the component usage that
renders it, and links the upstream bulma.io documentation.
---
 apps/docs/build/generate-nav.ts               |  96 ++++-----
 apps/docs/build/markdown.ts                   |   3 +
 apps/docs/sandbox/bulma.html                  |  50 +++++
 apps/docs/src/components.d.ts                 |   1 +
 apps/docs/src/components/app/AppNav.vue       |  21 +-
 .../src/components/docs/DocsSystemExample.vue | 190 ++++++++++++++++++
 .../examples/systems/bulma/dropdown/basic.vue |  29 +++
 .../examples/systems/bulma/modal/basic.vue    |  28 +++
 .../src/examples/systems/bulma/modal/card.vue |  41 ++++
 apps/docs/src/pages/systems/bulma/dropdown.md | 178 ++++++++++++++++
 apps/docs/src/pages/systems/bulma/index.md    |  99 +++++++++
 apps/docs/src/pages/systems/bulma/modal.md    | 164 +++++++++++++++
 apps/docs/src/sandbox/SandboxRoot.vue         | 142 +++++++++++++
 apps/docs/src/sandbox/bulma.ts                |  34 ++++
 apps/docs/src/typed-router.d.ts               |  45 +++++
 apps/docs/vite.config.ts                      |   2 +
 knip.json                                     |  10 +-
 17 files changed, 1082 insertions(+), 51 deletions(-)
 create mode 100644 apps/docs/sandbox/bulma.html
 create mode 100644 apps/docs/src/components/docs/DocsSystemExample.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/dropdown/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/modal/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/modal/card.vue
 create mode 100644 apps/docs/src/pages/systems/bulma/dropdown.md
 create mode 100644 apps/docs/src/pages/systems/bulma/index.md
 create mode 100644 apps/docs/src/pages/systems/bulma/modal.md
 create mode 100644 apps/docs/src/sandbox/SandboxRoot.vue
 create mode 100644 apps/docs/src/sandbox/bulma.ts

diff --git a/apps/docs/build/generate-nav.ts b/apps/docs/build/generate-nav.ts
index d8d0ba4c55..dd67fb6957 100644
--- a/apps/docs/build/generate-nav.ts
+++ b/apps/docs/build/generate-nav.ts
@@ -66,11 +66,12 @@ function getEmphasisLevel (iso: string | undefined | null): EmphasisLevel {
 
 // Section configuration - defines structure and ordering
 // rootPath: string = custom link, undefined = default to /${section}, null = no link
-const SECTIONS: Record<string, { order: number, hasSubcategories: boolean, rootPath?: string | null }> = {
+const SECTIONS: Record<string, { order: number, hasSubcategories: boolean, rootPath?: string | null, name?: string }> = {
   introduction: { order: 0, hasSubcategories: false, rootPath: null },
   guide: { order: 2, hasSubcategories: true },
   components: { order: 4, hasSubcategories: true },
   composables: { order: 6, hasSubcategories: true },
+  systems: { order: 7, hasSubcategories: true, rootPath: null, name: 'Design Systems' },
 }
 
 // Subcategory ordering within sections
@@ -78,6 +79,7 @@ const SUBCATEGORY_ORDER: Record<string, string[]> = {
   guide: ['essentials', 'fundamentals', 'features', 'integration', 'tooling'],
   components: ['primitives', 'providers', 'actions', 'disclosure', 'forms', 'semantic'],
   composables: ['foundation', 'registration', 'selection', 'forms', 'data', 'semantic', 'reactivity', 'system', 'plugins', 'transformers'],
+  systems: ['bulma'],
 }
 
 // Standalone pages that appear between sections
@@ -212,6 +214,48 @@ function createPageInfo (relPath: string, file: string, name: string, frontmatte
   }
 }
 
+// Root-level pages first, then subcategory groups in configured order.
+function buildSubcategories (section: string, pages: PageInfo[]): NavItem[] {
+  const subcategories = new Map<string, PageInfo[]>()
+  const roots: PageInfo[] = []
+
+  for (const page of pages) {
+    const parts = page.path.split('/')
+
+    if (parts.length < 3) {
+      if (page.name) roots.push(page)
+      continue
+    }
+
+    const subcategory = parts[1]
+    if (!subcategories.has(subcategory)) subcategories.set(subcategory, [])
+    subcategories.get(subcategory)!.push(page)
+  }
+
+  const order = SUBCATEGORY_ORDER[section] ?? []
+
+  return [
+    ...roots.toSorted(comparePages).map(toNavLink),
+    ...Array.from(subcategories.entries())
+      .toSorted(createSubcategoryComparator(order))
+      .map(([subcategory, subPages]) => toSubcategory(titleCase(subcategory), subPages)),
+  ]
+}
+
+// A subcategory that owns an index page becomes a link that still expands —
+// the same shape a top-level section gets — rather than a dead label with the
+// index page listed under it as a separate child.
+function toSubcategory (name: string, pages: PageInfo[]): NavItem {
+  const index = pages.find(p => p.path.endsWith('index.md'))
+  const children = pages.filter(p => p !== index).toSorted(comparePages).map(toNavLink)
+
+  if (!index) return { name, children }
+
+  return children.length > 0
+    ? { name, to: index.urlPath, children }
+    : { name, to: index.urlPath }
+}
+
 async function generateNav (): Promise<NavItem[]> {
   const pages = new Map<string, PageInfo[]>()
   const standalonePages: Array<{ item: NavItemLink, order: number }> = []
@@ -277,57 +321,15 @@ async function generateNav (): Promise<NavItem[]> {
       nav.push({ divider: true })
     }
 
-    const sectionName = titleCase(section)
+    const sectionName = config.name ?? titleCase(section)
     // Create NavItemCategory (no link) if rootPath is null, otherwise NavItemLink
     const sectionItem: NavItemLink | NavItemCategory = config.rootPath === null
       ? { name: sectionName, children: [] }
       : { name: sectionName, to: config.rootPath ?? `/${section}`, children: [] }
 
-    if (config.hasSubcategories) {
-      // Group by subcategory
-      const subcategories = new Map<string, PageInfo[]>()
-      const rootPages: PageInfo[] = []
-
-      for (const page of sectionPages) {
-        const parts = page.path.split('/')
-        if (parts.length < 3) {
-          // Root-level pages (not in subcategory)
-          if (page.name) rootPages.push(page)
-          continue
-        }
-
-        const subcategory = parts[1]
-        if (!subcategories.has(subcategory)) subcategories.set(subcategory, [])
-        subcategories.get(subcategory)!.push(page)
-      }
-
-      // Add root-level pages first (sorted by order)
-      const sortedRootPages = rootPages.toSorted(comparePages)
-      for (const page of sortedRootPages) {
-        sectionItem.children!.push(toNavLink(page))
-      }
-
-      // Sort subcategories by configured order, then alphabetically
-      const order = SUBCATEGORY_ORDER[section] ?? []
-      const sortedSubcategories = Array.from(subcategories.entries())
-        .toSorted(createSubcategoryComparator(order))
-
-      for (const [subcategory, subPages] of sortedSubcategories) {
-        const sortedPages = subPages.toSorted(comparePages)
-
-        sectionItem.children!.push({
-          name: titleCase(subcategory),
-          children: sortedPages.map(toNavLink),
-        })
-      }
-    } else {
-      // Flat list of children
-      const sortedPages = sectionPages
-        .filter(p => p.name)
-        .toSorted(comparePages)
-
-      sectionItem.children = sortedPages.map(toNavLink)
-    }
+    sectionItem.children = config.hasSubcategories
+      ? buildSubcategories(section, sectionPages)
+      : sectionPages.filter(p => p.name).toSorted(comparePages).map(toNavLink)
 
     nav.push(sectionItem)
   }
diff --git a/apps/docs/build/markdown.ts b/apps/docs/build/markdown.ts
index 765dde9c48..7836d16e5f 100644
--- a/apps/docs/build/markdown.ts
+++ b/apps/docs/build/markdown.ts
@@ -151,6 +151,9 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
 
   registerExampleContainer('example', 'DocsExample')
   registerExampleContainer('gn-example', 'DocsGenesisExample')
+  // Design-system examples render in an isolated iframe (the system's own CSS
+  // cannot share a document with the docs shell) — same authoring syntax.
+  registerExampleContainer('ds-example', 'DocsSystemExample')
 
   // Sponsor container: ::: sponsor ... :::
   // Renders the $2,000/mo Primary Sponsor teaser (full pitch lives at /sponsor)
diff --git a/apps/docs/sandbox/bulma.html b/apps/docs/sandbox/bulma.html
new file mode 100644
index 0000000000..a7860c6320
--- /dev/null
+++ b/apps/docs/sandbox/bulma.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="robots" content="noindex">
+
+    <title>Bulma example</title>
+    <link rel="icon" type="image/png" href="/0.png">
+
+    <!--
+      The user's own bulma.css is the styling source — @paper/bulma ships none.
+      This document loads it (and Font Awesome, which Bulma's documented markup
+      uses for icons) exactly the way a zero-config consumer would, and loads
+      nothing from the docs shell: no UnoCSS preflight, no theme tokens.
+    -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
+
+    <style>
+      /* Bulma's reset reserves a permanent scrollbar track (`overflow-y: scroll`),
+         which reads as a dead scrollbar inside a frame that is sized to its own
+         content. */
+      html {
+        overflow-y: auto;
+      }
+
+      /* While an overlay is open the parent promotes this frame to the full
+         viewport, so every pixel Bulma is not painting has to let the docs page
+         show through. Beats Bulma's own `html` background on specificity — this
+         block follows the CDN link, so no !important is needed. */
+      html[data-overlay],
+      html[data-overlay] body {
+        background: transparent;
+      }
+
+      /* The example content is pinned back to the box it occupied inline, so it
+         has to carry the surface the document was painting for it — otherwise
+         the docs page would show through where the example box used to be. */
+      html[data-overlay] .sandbox {
+        background: var(--bulma-scheme-main);
+        border-radius: 0.25rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="sandbox"></div>
+    <script type="module" src="/src/sandbox/bulma.ts"></script>
+  </body>
+</html>
diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index d93dd76a92..fa264ccf9d 100644
--- a/apps/docs/src/components.d.ts
+++ b/apps/docs/src/components.d.ts
@@ -168,6 +168,7 @@ declare module 'vue' {
     DocsSkillToggle: typeof import('./components/docs/meta/DocsSkillToggle.vue')['default']
     DocsSponsor: typeof import('./components/docs/DocsSponsor.vue')['default']
     DocsSponsorSlot: typeof import('./components/docs/DocsSponsorSlot.vue')['default']
+    DocsSystemExample: typeof import('./components/docs/DocsSystemExample.vue')['default']
     DocsTimeline: typeof import('./components/docs/DocsTimeline.vue')['default']
     DocsToc: typeof import('./components/docs/DocsToc.vue')['default']
     HomeAiFirst: typeof import('./components/home/HomeAiFirst.vue')['default']
diff --git a/apps/docs/src/components/app/AppNav.vue b/apps/docs/src/components/app/AppNav.vue
index 5a8124925e..a839a0ee85 100644
--- a/apps/docs/src/components/app/AppNav.vue
+++ b/apps/docs/src/components/app/AppNav.vue
@@ -16,7 +16,7 @@
   import { useAppStore } from '@/stores/app'
 
   // Utilities
-  import { computed, nextTick, onMounted, shallowRef, useTemplateRef, watch } from 'vue'
+  import { computed, nextTick, onMounted, shallowRef, toRef, useTemplateRef, watch } from 'vue'
   import { useRoute } from 'vue-router'
 
   // Types
@@ -82,6 +82,23 @@
   const hasNavContent = computed(() =>
     visibleNav.value.some(item => !('divider' in item)),
   )
+
+  // Link-less sections are keyed by the synthetic id createNested assigns them,
+  // which counts categories only — dividers and links don't advance it. Keying
+  // off the render index instead leaves every category after the first with no
+  // registered children, and so no expand toggle.
+  const categories = toRef(() => {
+    const ids = new Map<number, string>()
+    let index = 0
+
+    for (const [i, item] of visibleNav.value.entries()) {
+      if ('divider' in item || 'to' in item) continue
+
+      ids.set(i, `category-root-${index++}`)
+    }
+
+    return ids
+  })
   const navRef = useTemplateRef<HTMLElement>('nav')
 
   // Match Tailwind's md breakpoint (768px) for nav visibility
@@ -217,7 +234,7 @@
 
           <AppNavLink
             v-else
-            :id="`category-root-${i}`"
+            :id="categories.get(i)!"
             class="px-4"
             :name="nav.name"
           />
diff --git a/apps/docs/src/components/docs/DocsSystemExample.vue b/apps/docs/src/components/docs/DocsSystemExample.vue
new file mode 100644
index 0000000000..28cb3141d8
--- /dev/null
+++ b/apps/docs/src/components/docs/DocsSystemExample.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+  // Framework
+  import { IN_BROWSER, useEventListener, useTheme } from '@vuetify/v0'
+
+  // Composables
+  import { useExamples } from '@/composables/useExamples'
+
+  // Utilities
+  import { nextTick, onScopeDispose, shallowRef, toRef, useTemplateRef, watch } from 'vue'
+
+  // Types
+  import type { GnDocsExampleFile } from '@paper/genesis'
+
+  export interface DocsSystemExampleProps {
+    /** Auto-resolve example by path (extensionless; .vue assumed) */
+    filePath?: string
+    /** Auto-resolve multi-file example by paths (extensions required) */
+    filePaths?: string[]
+    /** Display order for files (indices match filePaths) */
+    fileOrders?: (number | undefined)[]
+    /** Description title */
+    title?: string
+    /** Anchor id for deep linking */
+    id?: string
+    /** Enable description collapse toggle */
+    collapse?: boolean
+    /** Peek mode for single-file */
+    peek?: boolean
+  }
+
+  const { filePath, filePaths } = defineProps<DocsSystemExampleProps>()
+
+  // Design-system examples cannot share a document with the docs shell: the
+  // system owns global CSS (Bulma resets `button`, `input`, `.title`, …) and
+  // UnoCSS's preflight fights it in both directions. The example therefore runs
+  // in an iframe against `sandbox/<system>.html`, and only its source is read
+  // here — for the code pane, playground and bin actions.
+  const examples = useExamples()
+
+  const paths = toRef(() => filePaths ?? (filePath ? [filePath] : []))
+
+  const entry = toRef(() => paths.value.at(-1)?.replace(/\.vue$/, '') ?? '')
+
+  const single = toRef(() => (filePath ? examples.resolve(filePath) : undefined))
+  const multi = toRef(() => (filePaths?.length ? examples.resolveMultiple(filePaths) : undefined))
+
+  const code = toRef(() => single.value?.code)
+  const files = toRef<GnDocsExampleFile[] | undefined>(() => multi.value?.files)
+  const name = toRef(() => `${entry.value.split('/').pop()}.vue`)
+
+  const theme = useTheme()
+
+  // Snapshot, not a binding: folding the theme into a reactive `src` would
+  // reload the frame — dropping any open overlay — on every toggle. It only
+  // buys a correct first paint; live changes ride the message channel below.
+  const scheme = theme.isDark.value ? 'dark' : 'light'
+
+  // `/systems/bulma/modal/basic` -> system `bulma`, example `modal/basic`
+  const segments = toRef(() => entry.value.replace(/^\//, '').split('/'))
+  const src = toRef(() => {
+    const [, system, ...rest] = segments.value
+
+    return `/sandbox/${system}.html?e=${rest.join('/')}&theme=${scheme}`
+  })
+
+  const height = shallowRef(200)
+  const overlay = shallowRef(false)
+  const frame = useTemplateRef<HTMLIFrameElement>('frame')
+
+  function post (message: Record<string, unknown>) {
+    frame.value?.contentWindow?.postMessage(message, window.location.origin)
+  }
+
+  function sync () {
+    post({ type: 'v0:sandbox:theme', dark: theme.isDark.value })
+  }
+
+  // The placeholder holds the inline box open whether or not the frame has been
+  // promoted out of it, so its rect is what the sandbox pins its content to.
+  // Kept fresh ahead of time: a promotion has to pin in the same tick it is
+  // detected, or the trigger button visibly rides the frame to the viewport
+  // corner on the way.
+  function place () {
+    const rect = frame.value?.parentElement?.getBoundingClientRect()
+
+    if (!rect) return
+
+    post({ type: 'v0:sandbox:box', box: { top: rect.top, left: rect.left, width: rect.width } })
+  }
+
+  // Ancestors whose z-index was lifted to let the promoted frame out.
+  const lifted: { el: HTMLElement, z: string }[] = []
+
+  // The frame sits inside AppMain's `z-0` stacking context, a sibling of the
+  // app bar's `z-1` — so no z-index on the frame itself can paint it over the
+  // chrome. The contexts between it and the body have to be lifted instead.
+  // Moving the frame in the DOM would be the other way out, and is not one:
+  // re-parenting an iframe reloads it, taking the open overlay with it.
+  function lift (open: boolean) {
+    if (!open) {
+      for (const { el, z } of lifted) el.style.zIndex = z
+
+      lifted.length = 0
+
+      return
+    }
+
+    for (let el = frame.value?.parentElement; el && el !== document.body; el = el.parentElement) {
+      const style = getComputedStyle(el)
+
+      if (style.position === 'static' || style.zIndex === 'auto') continue
+
+      lifted.push({ el, z: el.style.zIndex })
+      el.style.zIndex = '9999'
+    }
+  }
+
+  onScopeDispose(() => lift(false))
+
+  watch(() => theme.isDark.value, sync)
+
+  if (IN_BROWSER) {
+    useEventListener(window, 'message', (event: MessageEvent) => {
+      if (event.source !== frame.value?.contentWindow) return
+
+      switch (event.data?.type) {
+        // Sent on mount. The frame is lazy, so it can come up long after the
+        // reader last touched the theme toggle.
+        case 'v0:sandbox:ready': {
+          sync()
+          place()
+          break
+        }
+        case 'v0:sandbox:size': {
+          height.value = event.data.height
+          // The box the sandbox pins to is the one this height produces.
+          nextTick(place)
+          break
+        }
+        // A fixed overlay is laid out against the frame's viewport, so inline it
+        // can only ever be shown clipped. Promoting the frame to the page
+        // viewport lets the modal and its backdrop cover the docs page the way
+        // they would in a real app, while the example's CSS stays in its own
+        // document. The placeholder holds the inline box open meanwhile, so
+        // nothing reflows and the page keeps its scroll position.
+        case 'v0:sandbox:overlay': {
+          overlay.value = event.data.open
+          lift(event.data.open)
+          // Correct any staleness now that the frame has left the flow; the
+          // placeholder keeps its geometry either way.
+          nextTick(place)
+          break
+        }
+      }
+    })
+
+    // Scroll is moot — the promoted frame swallows it — but a resize moves the
+    // box the pinned content is sitting on.
+    useEventListener(window, 'resize', place)
+  }
+</script>
+
+<template>
+  <DocsGenesisExample
+    :id
+    :code
+    :collapse
+    :file="name"
+    :file-orders
+    :files
+    :peek
+    :title
+  >
+    <div class="relative w-full" :style="{ height: `${height}px` }">
+      <iframe
+        ref="frame"
+        :class="overlay
+          ? 'fixed inset-0 z-[9999] h-full w-full border-0'
+          : 'absolute inset-0 h-full w-full rounded border-0'"
+        loading="lazy"
+        :src
+        :title="`${name} example`"
+      />
+    </div>
+
+    <template v-if="$slots.description" #description>
+      <slot name="description" />
+    </template>
+  </DocsGenesisExample>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/dropdown/basic.vue b/apps/docs/src/examples/systems/bulma/dropdown/basic.vue
new file mode 100644
index 0000000000..98d8254bd9
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/dropdown/basic.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { BuDropdown, BuDropdownMenu, BuDropdownTrigger } from '@paper/bulma'
+</script>
+
+<template>
+  <BuDropdown menu>
+    <BuDropdownTrigger v-slot="{ isOpen, attrs }">
+      <button class="button" type="button" v-bind="attrs">
+        <span>Dropdown button</span>
+
+        <span class="icon is-small">
+          <i aria-hidden="true" class="fas" :class="isOpen ? 'fa-angle-up' : 'fa-angle-down'" />
+        </span>
+      </button>
+    </BuDropdownTrigger>
+
+    <BuDropdownMenu v-slot="{ close, item }">
+      <a class="dropdown-item" v-bind="item" @click="close">Dropdown item</a>
+
+      <a class="dropdown-item" v-bind="item" @click="close">Other dropdown item</a>
+
+      <a class="dropdown-item is-active" v-bind="item" @click="close">Active dropdown item</a>
+
+      <hr class="dropdown-divider">
+
+      <a class="dropdown-item" v-bind="item" @click="close">With a divider</a>
+    </BuDropdownMenu>
+  </BuDropdown>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/modal/basic.vue b/apps/docs/src/examples/systems/bulma/modal/basic.vue
new file mode 100644
index 0000000000..c01cc383e6
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/modal/basic.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { BuModal, BuModalClose, BuModalContent } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(false)
+</script>
+
+<template>
+  <button class="button is-primary" type="button" @click="open = true">
+    Open modal
+  </button>
+
+  <BuModal v-model="open">
+    <BuModalContent>
+      <div class="box">
+        <h3 class="title is-5">Bring your own JS</h3>
+
+        <p>
+          Bulma ships the <code>.modal</code> styles and stops there. Escape, focus
+          return and the backdrop click come from Vuetify0.
+        </p>
+      </div>
+    </BuModalContent>
+
+    <BuModalClose />
+  </BuModal>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/modal/card.vue b/apps/docs/src/examples/systems/bulma/modal/card.vue
new file mode 100644
index 0000000000..f3ae02b74b
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/modal/card.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import { BuModal, BuModalBody, BuModalCard, BuModalFoot, BuModalHead, BuModalTitle } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(false)
+</script>
+
+<template>
+  <button class="button is-link" type="button" @click="open = true">
+    Open card modal
+  </button>
+
+  <BuModal v-model="open">
+    <BuModalCard>
+      <BuModalHead>
+        <BuModalTitle>Modal title</BuModalTitle>
+      </BuModalHead>
+
+      <BuModalBody>
+        <p>
+          Composing <code>BuModalCard</code> renders the <code>.modal-card</code>
+          variant: head, body and foot regions, with the <code>.delete</code>
+          button wired to close.
+        </p>
+      </BuModalBody>
+
+      <BuModalFoot>
+        <div class="buttons">
+          <button class="button is-success" type="button" @click="open = false">
+            Save changes
+          </button>
+
+          <button class="button" type="button" @click="open = false">
+            Cancel
+          </button>
+        </div>
+      </BuModalFoot>
+    </BuModalCard>
+  </BuModal>
+</template>
diff --git a/apps/docs/src/pages/systems/bulma/dropdown.md b/apps/docs/src/pages/systems/bulma/dropdown.md
new file mode 100644
index 0000000000..3bc0897914
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/dropdown.md
@@ -0,0 +1,178 @@
+---
+title: BuDropdown - Bulma Dropdown for Vue
+meta:
+- name: description
+  content: Bulma's dropdown markup with Vuetify0 behavior — toggle, outside-click and Escape dismissal, and the aria wiring between trigger and menu.
+- name: keywords
+  content: bulma dropdown, vue dropdown, dropdown-menu, is-hoverable, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuDropdown'
+  level: 2
+  renderless: false
+  order: 2
+related:
+  - /systems/bulma
+  - /systems/bulma/modal
+  - /components/disclosure/popover
+---
+
+# BuDropdown
+
+Bulma's `.dropdown` with the JavaScript it never shipped: toggle, outside-click and Escape dismissal, and the aria wiring between trigger and menu.
+
+<DocsPageFeatures :frontmatter />
+
+## Usage
+
+`BuDropdownTrigger` hands you the attrs to spread on your own button — `aria-haspopup`, `aria-controls`, `aria-expanded` and the click handler. `BuDropdownMenu` renders `.dropdown-menu` and `.dropdown-content`, and hands each item the role it needs.
+
+::: ds-example
+/systems/bulma/dropdown/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuDropdown, BuDropdownMenu, BuDropdownTrigger } from '@paper/bulma'
+</script>
+
+<template>
+  <BuDropdown>
+    <BuDropdownTrigger />
+
+    <BuDropdownMenu />
+  </BuDropdown>
+</template>
+```
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/dropdown/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — the generated `id` and its matching `aria-controls` are the only tolerated difference.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="dropdown is-active">
+  <div class="dropdown-trigger">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+      <span>Dropdown button</span>
+      <span class="icon is-small">
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <div class="dropdown-menu" id="dropdown-menu" role="menu">
+    <div class="dropdown-content">
+      <a href="#" class="dropdown-item"> Dropdown item </a>
+      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+      <hr class="dropdown-divider" />
+      <a href="#" class="dropdown-item"> With a divider </a>
+    </div>
+  </div>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuDropdown menu>
+    <BuDropdownTrigger v-slot="{ attrs }">
+      <button class="button" type="button" v-bind="attrs">
+        <span>Dropdown button</span>
+        <span class="icon is-small">
+          <i class="fas fa-angle-down" aria-hidden="true" />
+        </span>
+      </button>
+    </BuDropdownTrigger>
+
+    <BuDropdownMenu v-slot="{ close, item }">
+      <a class="dropdown-item" v-bind="item" @click="close">Dropdown item</a>
+      <a class="dropdown-item is-active" v-bind="item" @click="close">Active dropdown item</a>
+      <hr class="dropdown-divider">
+      <a class="dropdown-item" v-bind="item" @click="close">With a divider</a>
+    </BuDropdownMenu>
+  </BuDropdown>
+</template>
+```
+
+:::
+
+You write no `is-active` and no `id`/`aria-controls` pair. The component owns the open class and generates a unique id, binding both ends of it for you.
+
+## Recipes
+
+### Modifiers
+
+Bulma's positioning modifiers are props. Each one adds the class of the same name to `.dropdown`.
+
+```vue
+<template>
+  <!-- is-right: align the menu to the right edge -->
+  <BuDropdown right>
+    <BuDropdownTrigger />
+    <BuDropdownMenu />
+  </BuDropdown>
+
+  <!-- is-up: open upwards -->
+  <BuDropdown up>
+    <BuDropdownTrigger />
+    <BuDropdownMenu />
+  </BuDropdown>
+
+  <!-- is-hoverable: Bulma's CSS-only hover behavior; no JS is wired -->
+  <BuDropdown hoverable>
+    <BuDropdownTrigger />
+    <BuDropdownMenu />
+  </BuDropdown>
+</template>
+```
+
+`hoverable` is the one modifier that changes behavior rather than looks. Bulma opens the menu on hover with CSS alone, so the component steps back entirely: the toggle, the outside-click listener and the Escape handler all go inert.
+
+### Arbitrary content
+
+Bulma documents a second dropdown shape whose items are `div.dropdown-item` holding anything at all. Leave `menu` off for it — `role="menu"` promises menu items, and a dropdown full of paragraphs fails accessibility checks that take the promise seriously.
+
+```vue
+<template>
+  <BuDropdown>
+    <BuDropdownTrigger v-slot="{ attrs }">
+      <button class="button" type="button" v-bind="attrs">Content</button>
+    </BuDropdownTrigger>
+
+    <BuDropdownMenu>
+      <div class="dropdown-item">
+        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
+      </div>
+
+      <hr class="dropdown-divider">
+
+      <a class="dropdown-item" href="#">This is a link</a>
+    </BuDropdownMenu>
+  </BuDropdown>
+</template>
+```
+
+## Props
+
+`BuDropdown` renders `.dropdown` and owns the open state and the modifiers; the regions are parts.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `boolean` | `false` | Open state |
+| `hoverable` | `boolean` | `false` | `is-hoverable` — Bulma's CSS-only hover mode; wires no JavaScript |
+| `right` | `boolean` | `false` | `is-right` — align the menu to the right edge |
+| `up` | `boolean` | `false` | `is-up` — open the menu upwards |
+| `menu` | `boolean` | `false` | Emit `role="menu"`; only for dropdowns whose items are all actionable |
+
+| Part | Renders | Slot props |
+|------|---------|-----------|
+| `BuDropdownTrigger` | `div.dropdown-trigger` | `isOpen`, `toggle`, `attrs` |
+| `BuDropdownMenu` | `div.dropdown-menu` + `div.dropdown-content` | `isOpen`, `close`, `item` |
+
+## Accessibility
+
+`BuDropdownTrigger` hands out `aria-haspopup`, `aria-expanded` and an `aria-controls` that points at the id `BuDropdownMenu` generates. Escape closes the dropdown and stops there — a dropdown opened inside a modal closes without also closing the modal — and a click outside closes it. While the dropdown is closed, neither listener is attached.
+
+Spread `item` on each entry when the parent sets `menu`: it applies `role="menuitem"`, which `role="menu"` requires. Without `menu` it is an empty object, so the same template works in both modes.
diff --git a/apps/docs/src/pages/systems/bulma/index.md b/apps/docs/src/pages/systems/bulma/index.md
new file mode 100644
index 0000000000..e38d575908
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/index.md
@@ -0,0 +1,99 @@
+---
+title: Bulma - Vue Behavior for Bulma's Markup
+meta:
+- name: description
+  content: Bulma ships zero JavaScript by design. @paper/bulma is that JavaScript — real Bulma markup and classes, styled by your own bulma.css, driven by Vuetify0.
+- name: keywords
+  content: bulma, vue, bulma vue components, compat design system, headless, vuetify0, paper
+features:
+  category: Guide
+  label: 'Bulma'
+  level: 2
+  order: 0
+related:
+  - /systems/bulma/modal
+  - /systems/bulma/dropdown
+---
+
+# Bulma
+
+Bulma tells you to bring your own JavaScript. This package is that JavaScript.
+
+<DocsPageFeatures :frontmatter />
+
+Bulma is a CSS framework — it ships the `.modal`, `.dropdown` and `.navbar` styles and stops there, leaving every open, close, dismiss and keyboard interaction to you. `@paper/bulma` fills that gap: each component renders the markup Bulma documents, against the `bulma.css` you already load, with [Vuetify0](/) supplying behavior, focus management and accessibility.
+
+Nothing about your stylesheet changes. There is no theme to adopt, no class prefix to learn, and no CSS in the package.
+
+## Installation
+
+```bash
+pnpm add @paper/bulma bulma
+```
+
+Bulma itself is an **optional** peer dependency — load it from npm, from Sass, or from a CDN. The package never imports it.
+
+```ts main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import 'bulma/css/bulma.min.css'
+
+createApp(App).mount('#app')
+```
+
+There is no plugin to install and no provider to mount. Import a component and use it:
+
+```vue
+<script setup lang="ts">
+  import { BuModal, BuModalClose, BuModalContent } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(false)
+</script>
+
+<template>
+  <button class="button is-primary" type="button" @click="open = true">
+    Open modal
+  </button>
+
+  <BuModal v-model="open">
+    <BuModalContent>
+      <div class="box">Your content</div>
+    </BuModalContent>
+
+    <BuModalClose />
+  </BuModal>
+</template>
+```
+
+Every region Bulma documents is an express part component — `BuModalContent`, `BuModalHead`, `BuDropdownMenu` — never a named slot. You compose the markup you already know.
+
+> [!NOTE]
+> Bulma **1.0+** only. The 0.9.x line predates Bulma's CSS variables and is explicitly unsupported. Latest verified: 1.0.4.
+
+## What conformance means
+
+Every component is diffed against the markup [published on bulma.io](https://bulma.io/documentation/). The fixtures live beside the source in `packages/bulma/harness/fixtures/`, captured verbatim from the documentation, and the conformance suite asserts that the rendered DOM matches — element for element, class for class.
+
+Where the two differ, the difference is deliberate and declared:
+
+| Deviation | Why |
+|-----------|-----|
+| No owned token namespace | `--bulma-*` belongs to upstream; the package owns no prefix |
+| Upstream state classes, unprefixed | `is-active` and `is-hoverable` instead of data-attribute hooks — Bulma's CSS selects on them |
+| Native form controls | Bulma styles native `select`, `input[type=checkbox]` and friends; a non-native control gets none of your CSS |
+| Added aria | `BuDropdownMenu` emits `role="menu"` only when its items really are menu items[^dropdown-menu]; `BuNotification` labels its delete button |
+
+## Components
+
+Grouped by Bulma's own taxonomy. Each entry is the component you compose against; its regions ship as parts under it.
+
+| Bulma section | Components |
+|---------------|------------|
+| Components | BuBreadcrumb, [BuDropdown](/systems/bulma/dropdown), BuMenu, BuMessage, [BuModal](/systems/bulma/modal), BuNavbar, BuPagination, BuPanel, BuTabs |
+| Elements | BuNotification |
+| Form | BuCheckbox, BuControl, BuField, BuFile, BuHelp, BuInput, BuLabel, BuRadio, BuSelect, BuTextarea |
+
+[^dropdown-menu]: Both additions fix axe failures in the verbatim documentation markup — the docs' arbitrary-content dropdown promises `role="menu"` without menu items, and its delete button ships unlabeled.
diff --git a/apps/docs/src/pages/systems/bulma/modal.md b/apps/docs/src/pages/systems/bulma/modal.md
new file mode 100644
index 0000000000..aba81eeba5
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/modal.md
@@ -0,0 +1,164 @@
+---
+title: BuModal - Bulma Modal for Vue
+meta:
+- name: description
+  content: Bulma's modal markup with Vuetify0 behavior — Escape to close, backdrop dismissal, focus trapping and focus return, in both the modal-content and modal-card variants.
+- name: keywords
+  content: bulma modal, vue modal, modal-card, dialog, focus trap, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuModal'
+  level: 2
+  renderless: false
+  order: 1
+related:
+  - /systems/bulma
+  - /systems/bulma/dropdown
+  - /components/disclosure/dialog
+---
+
+# BuModal
+
+Bulma's `.modal` with the JavaScript it never shipped: open state, backdrop dismissal, Escape, focus trapping and focus return.
+
+<DocsPageFeatures :frontmatter />
+
+## Usage
+
+`v-model` owns the open state. The panel is whichever part you compose inside: `BuModalContent` for the plain variant, `BuModalCard` for the head/body/foot one. Everything inside the panel is Bulma's.
+
+::: ds-example
+/systems/bulma/modal/basic
+:::
+
+## Anatomy
+
+Both panels are shown here for completeness — a modal composes one or the other, never both.
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import {
+    BuModal,
+    BuModalBody,
+    BuModalCard,
+    BuModalClose,
+    BuModalContent,
+    BuModalFoot,
+    BuModalHead,
+    BuModalTitle,
+  } from '@paper/bulma'
+</script>
+
+<template>
+  <BuModal>
+    <BuModalContent />
+
+    <BuModalClose />
+
+    <BuModalCard>
+      <BuModalHead>
+        <BuModalTitle />
+      </BuModalHead>
+
+      <BuModalBody />
+
+      <BuModalFoot />
+    </BuModalCard>
+  </BuModal>
+</template>
+```
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/modal/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="modal is-active">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Modal title</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <!-- Content ... -->
+    </section>
+    <footer class="modal-card-foot">
+      <div class="buttons">
+        <button class="button is-success">Save changes</button>
+        <button class="button">Cancel</button>
+      </div>
+    </footer>
+  </div>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuModal v-model="open">
+    <BuModalCard>
+      <BuModalHead>
+        <BuModalTitle>Modal title</BuModalTitle>
+      </BuModalHead>
+
+      <BuModalBody>
+        Content ...
+      </BuModalBody>
+
+      <BuModalFoot>
+        <div class="buttons">
+          <button class="button is-success">Save changes</button>
+          <button class="button">Cancel</button>
+        </div>
+      </BuModalFoot>
+    </BuModalCard>
+  </BuModal>
+</template>
+```
+
+:::
+
+You write no `is-active`, no `.modal-background`, no `.delete` button, and no close handler. The components own those, driven by `v-model`.
+
+## Examples
+
+::: ds-example
+/systems/bulma/modal/card
+
+### Card variant
+
+Composing `BuModalCard` instead of `BuModalContent` gives Bulma's three-region layout — a sticky head and foot with a scrollable body, sized to the viewport. `BuModalHead` always renders the documented `.delete` button wired to close, so the only close handlers you write are the ones on your own footer buttons.
+
+Reach for it when the modal has an obvious title and a decision to commit — a form, a confirmation. The plain content variant, with its large corner close button, suits a modal whose body is a single self-contained block.
+:::
+
+## Props
+
+`BuModal` renders `.modal` and its backdrop, and owns the open state. Everything else is a part.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `boolean` | `false` | Open state |
+| `blocking` | `boolean` | `false` | Ignore clicks on `.modal-background` |
+
+| Part | Renders | Notes |
+|------|---------|-------|
+| `BuModalContent` | `div.modal-content` | Plain variant panel; carries `role="dialog"` |
+| `BuModalClose` | `button.modal-close` | Sibling of the content panel; `size` prop, default `large` |
+| `BuModalCard` | `div.modal-card` | Card variant panel; carries `role="dialog"` |
+| `BuModalHead` | `header.modal-card-head` | Always renders the `.delete` close button |
+| `BuModalTitle` | `p.modal-card-title` | Supplies the panel's accessible name |
+| `BuModalBody` | `section.modal-card-body` | Scrollable region |
+| `BuModalFoot` | `footer.modal-card-foot` | Action row |
+
+## Accessibility
+
+The panel part — `BuModalContent` or `BuModalCard` — carries `role="dialog"` and `aria-modal`. Tab and Shift+Tab cycle inside the modal, Escape closes it, and focus returns to whatever opened it, including when the modal is unmounted while open.
+
+> [!IMPORTANT]
+> `BuModalCard` binds `aria-labelledby` to the id `BuModalTitle` renders. Compose a title, or that reference dangles and the dialog has no accessible name.
+
+> [!NOTE]
+> `blocking` gates backdrop clicks only. Escape still closes a blocking modal, matching Vuetify0's Dialog semantics and the native `dialog` element's cancel behavior.
diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
new file mode 100644
index 0000000000..ecc0ef59f2
--- /dev/null
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+  // Framework
+  import { useEventListener, useMutationObserver, useResizeObserver } from '@vuetify/v0'
+
+  // Utilities
+  import { onMounted, useTemplateRef } from 'vue'
+
+  // Types
+  import type { Component } from 'vue'
+
+  const { is, name } = defineProps<{
+    /** Resolved example component, or undefined when the query names nothing. */
+    is?: Component
+    /** Example path from the query string, shown when resolution fails. */
+    name: string
+  }>()
+
+  // Breathing room under an absolutely positioned surface, matching `.sandbox`.
+  const PAD = 24
+
+  const root = useTemplateRef<HTMLElement>('root')
+
+  // The DOM is the source of truth for overlay state; this only tracks what the
+  // parent has already been told.
+  let open = false
+
+  // Where the inline frame sits in the docs viewport. The parent keeps this
+  // fresh so a promotion can pin against it in the same tick it is detected.
+  let box: { top: number, left: number, width: number } | null = null
+
+  function send (message: Record<string, unknown>) {
+    window.parent?.postMessage(message, '*')
+  }
+
+  // Promotion moves the frame's viewport origin to the top of the page, which
+  // would drag the example's in-flow content — the trigger button — along with
+  // it. Pinning the content back to the box it occupied inline keeps it exactly
+  // where the reader left it while the overlay covers the viewport.
+  //
+  // `top`/`left`, never `transform`: a transformed ancestor becomes the
+  // containing block for fixed descendants, which would shrink the modal and
+  // its backdrop to this box instead of the viewport.
+  function pin () {
+    const el = root.value
+
+    if (!el) return
+
+    if (!open || !box) {
+      el.style.position = ''
+      el.style.top = ''
+      el.style.left = ''
+      el.style.width = ''
+
+      return
+    }
+
+    el.style.position = 'fixed'
+    el.style.top = `${box.top}px`
+    el.style.left = `${box.left}px`
+    el.style.width = `${box.width}px`
+  }
+
+  function measure () {
+    const el = root.value
+
+    if (!el) return
+
+    const nodes = [...el.querySelectorAll<HTMLElement>('*')].filter(node => node.checkVisibility())
+    const positions = nodes.map(node => [node, getComputedStyle(node).position] as const)
+
+    // A fixed surface is laid out against this document's viewport, so it can
+    // only be seen in full if the parent promotes the whole frame.
+    const overlay = positions.some(([, position]) => position === 'fixed')
+
+    if (overlay !== open) {
+      open = overlay
+
+      document.documentElement.toggleAttribute('data-overlay', overlay)
+      pin()
+      send({ type: 'v0:sandbox:overlay', open: overlay })
+    }
+
+    // While promoted the frame is the viewport — reporting that back would
+    // collapse the placeholder the docs page is holding open in the flow.
+    if (overlay) return
+
+    let height = el.offsetHeight
+
+    // Dropdown menus and popovers overflow the flow by a knowable amount.
+    for (const [node, position] of positions) {
+      if (position !== 'absolute') continue
+
+      height = Math.max(height, Math.ceil(node.getBoundingClientRect().bottom) + PAD)
+    }
+
+    send({ type: 'v0:sandbox:size', height })
+  }
+
+  useResizeObserver(root, measure)
+
+  // Opening an overlay changes no layout the ResizeObserver can see — the class
+  // flip that reveals it is the only signal.
+  useMutationObserver(root, measure, { attributes: true, subtree: true })
+
+  useEventListener(window, 'message', (event: MessageEvent) => {
+    if (event.source !== window.parent) return
+
+    switch (event.data?.type) {
+      case 'v0:sandbox:theme': {
+        document.documentElement.dataset.theme = event.data.dark ? 'dark' : 'light'
+        break
+      }
+      case 'v0:sandbox:box': {
+        box = event.data.box
+        pin()
+        break
+      }
+    }
+  })
+
+  // The frame loads lazily, so the theme carried on the URL can be stale by the
+  // time it does — ask the parent for the current one.
+  onMounted(() => send({ type: 'v0:sandbox:ready' }))
+</script>
+
+<template>
+  <div ref="root" class="sandbox">
+    <component :is v-if="is" />
+
+    <div v-else class="notification is-danger">
+      No example found for <code>{{ name }}</code>.
+    </div>
+  </div>
+</template>
+
+<style>
+  /* This document deliberately loads no UnoCSS — utility classes are not
+     available here, and anything beyond frame padding belongs to Bulma. */
+  .sandbox {
+    padding: 1.5rem;
+  }
+</style>
diff --git a/apps/docs/src/sandbox/bulma.ts b/apps/docs/src/sandbox/bulma.ts
new file mode 100644
index 0000000000..5112e126bf
--- /dev/null
+++ b/apps/docs/src/sandbox/bulma.ts
@@ -0,0 +1,34 @@
+/**
+ * Entry for the chrome-less Bulma example frame (`sandbox/bulma.html`).
+ *
+ * Mounts exactly one example from `src/examples/systems/bulma/**` — selected by
+ * the `e` query param, e.g. `/sandbox/bulma.html?e=modal/basic` — into a
+ * document that carries the user's Bulma CSS and nothing from the docs shell.
+ */
+
+// Context
+import SandboxRoot from './SandboxRoot.vue'
+
+// Utilities
+import { createApp, defineAsyncComponent } from 'vue'
+
+// Types
+import type { Component } from 'vue'
+
+const examples = import.meta.glob('../examples/systems/bulma/**/*.vue')
+
+const query = new URLSearchParams(window.location.search)
+
+const name = query.get('e') ?? ''
+const load = examples[`../examples/systems/bulma/${name}.vue`] as (() => Promise<Component>) | undefined
+
+// Applied before mount so the frame never paints in the wrong scheme; the docs
+// page re-sends the current one on ready and on every theme change after that.
+if (query.get('theme') === 'dark') {
+  document.documentElement.dataset.theme = 'dark'
+}
+
+createApp(SandboxRoot, {
+  is: load && defineAsyncComponent(load),
+  name,
+}).mount('#sandbox')
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index c514c3d236..7f3a166105 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -1151,6 +1151,27 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/systems/bulma/': RouteRecordInfo<
+      '/systems/bulma/',
+      '/systems/bulma',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/dropdown': RouteRecordInfo<
+      '/systems/bulma/dropdown',
+      '/systems/bulma/dropdown',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/modal': RouteRecordInfo<
+      '/systems/bulma/modal',
+      '/systems/bulma/modal',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
   }
 
   /**
@@ -2444,6 +2465,30 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'src/pages/systems/bulma/index.md': {
+      routes:
+        | '/systems/bulma/'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/dropdown.md': {
+      routes:
+        | '/systems/bulma/dropdown'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/modal.md': {
+      routes:
+        | '/systems/bulma/modal'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
   }
 
   /**
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
index 7bf0c04e98..34f51d45d7 100644
--- a/apps/docs/vite.config.ts
+++ b/apps/docs/vite.config.ts
@@ -140,10 +140,12 @@ export default defineConfig({
       '@vuetify/v0': fileURLToPath(new URL('../../packages/0/src', import.meta.url)),
       '@vuetify/paper': fileURLToPath(new URL('../../packages/paper/src', import.meta.url)),
       '@paper/genesis': fileURLToPath(new URL('../../packages/genesis/src', import.meta.url)),
+      '@paper/bulma': fileURLToPath(new URL('../../packages/bulma/src', import.meta.url)),
       // internal
       '#v0': fileURLToPath(new URL('../../packages/0/src', import.meta.url)),
       '#paper': fileURLToPath(new URL('../../packages/paper/src', import.meta.url)),
       '#genesis': fileURLToPath(new URL('../../packages/genesis/src', import.meta.url)),
+      '#bulma': fileURLToPath(new URL('../../packages/bulma/src', import.meta.url)),
     },
   },
   server: {
diff --git a/knip.json b/knip.json
index 564775ef11..4048a3f164 100644
--- a/knip.json
+++ b/knip.json
@@ -22,7 +22,8 @@
         "src/pages/**/*.{vue,md}",
         "build/**/*.ts",
         "vite.config.*",
-        "src/examples/**/*.vue"
+        "src/examples/**/*.vue",
+        "src/sandbox/*.ts"
       ],
       "ignore": [
         "src/typed-router.d.ts",
@@ -46,6 +47,12 @@
         ],
         "#paper": [
           "../../packages/paper/src"
+        ],
+        "@paper/bulma": [
+          "../../packages/bulma/src"
+        ],
+        "#bulma": [
+          "../../packages/bulma/src"
         ]
       }
     },
@@ -63,7 +70,6 @@
       "ignore": [
         "src/**/*.bench.ts"
       ],
-
       "paths": {
         "#v0/*": [
           "src/*"

From 322a50bce2b31fd41d6bfe6b04f4ae79e3297a18 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 09:15:09 -0500
Subject: [PATCH 05/18] chore(dev): alias @paper/bulma in the dev playground

---
 dev/src/components.d.ts | 38 ++++++++++++++++++++++++++++++++++++++
 dev/vite.config.ts      |  2 ++
 2 files changed, 40 insertions(+)

diff --git a/dev/src/components.d.ts b/dev/src/components.d.ts
index bcaec49499..a167502069 100644
--- a/dev/src/components.d.ts
+++ b/dev/src/components.d.ts
@@ -11,6 +11,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AlertDialog: typeof import('./../../packages/0/src/components/fixtures/AlertDialog.vue')['default']
     AlertDialogAction: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogAction.vue')['default']
     AlertDialogActivator: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogActivator.vue')['default']
     AlertDialogCancel: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogCancel.vue')['default']
@@ -21,9 +22,14 @@ declare module 'vue' {
     AlertDialogTitle: typeof import('./../../packages/0/src/components/AlertDialog/AlertDialogTitle.vue')['default']
     AspectRatio: typeof import('./../../packages/0/src/components/AspectRatio/AspectRatio.vue')['default']
     Atom: typeof import('./../../packages/0/src/components/Atom/Atom.vue')['default']
+    Avatar: typeof import('./../../packages/0/src/components/fixtures/Avatar.vue')['default']
     AvatarFallback: typeof import('./../../packages/0/src/components/Avatar/AvatarFallback.vue')['default']
+    AvatarGroup: typeof import('./../../packages/0/src/components/Avatar/AvatarGroup.vue')['default']
     AvatarImage: typeof import('./../../packages/0/src/components/Avatar/AvatarImage.vue')['default']
+    AvatarIndicator: typeof import('./../../packages/0/src/components/Avatar/AvatarIndicator.vue')['default']
     AvatarRoot: typeof import('./../../packages/0/src/components/Avatar/AvatarRoot.vue')['default']
+    Breadcrumbs: typeof import('./../../packages/0/src/components/fixtures/Breadcrumbs.vue')['default']
+    BreadcrumbsActivator: typeof import('./../../packages/0/src/components/Breadcrumbs/BreadcrumbsActivator.vue')['default']
     BreadcrumbsDivider: typeof import('./../../packages/0/src/components/Breadcrumbs/BreadcrumbsDivider.vue')['default']
     BreadcrumbsEllipsis: typeof import('./../../packages/0/src/components/Breadcrumbs/BreadcrumbsEllipsis.vue')['default']
     BreadcrumbsItem: typeof import('./../../packages/0/src/components/Breadcrumbs/BreadcrumbsItem.vue')['default']
@@ -31,12 +37,14 @@ declare module 'vue' {
     BreadcrumbsList: typeof import('./../../packages/0/src/components/Breadcrumbs/BreadcrumbsList.vue')['default']
     BreadcrumbsPage: typeof import('./../../packages/0/src/components/Breadcrumbs/BreadcrumbsPage.vue')['default']
     BreadcrumbsRoot: typeof import('./../../packages/0/src/components/Breadcrumbs/BreadcrumbsRoot.vue')['default']
+    Button: typeof import('./../../packages/0/src/components/fixtures/Button.vue')['default']
     ButtonContent: typeof import('./../../packages/0/src/components/Button/ButtonContent.vue')['default']
     ButtonGroup: typeof import('./../../packages/0/src/components/Button/ButtonGroup.vue')['default']
     ButtonHiddenInput: typeof import('./../../packages/0/src/components/Button/ButtonHiddenInput.vue')['default']
     ButtonIcon: typeof import('./../../packages/0/src/components/Button/ButtonIcon.vue')['default']
     ButtonLoading: typeof import('./../../packages/0/src/components/Button/ButtonLoading.vue')['default']
     ButtonRoot: typeof import('./../../packages/0/src/components/Button/ButtonRoot.vue')['default']
+    Carousel: typeof import('./../../packages/0/src/components/fixtures/Carousel.vue')['default']
     CarouselIndicator: typeof import('./../../packages/0/src/components/Carousel/CarouselIndicator.vue')['default']
     CarouselItem: typeof import('./../../packages/0/src/components/Carousel/CarouselItem.vue')['default']
     CarouselLiveRegion: typeof import('./../../packages/0/src/components/Carousel/CarouselLiveRegion.vue')['default']
@@ -45,15 +53,18 @@ declare module 'vue' {
     CarouselProgress: typeof import('./../../packages/0/src/components/Carousel/CarouselProgress.vue')['default']
     CarouselRoot: typeof import('./../../packages/0/src/components/Carousel/CarouselRoot.vue')['default']
     CarouselViewport: typeof import('./../../packages/0/src/components/Carousel/CarouselViewport.vue')['default']
+    Checkbox: typeof import('./../../packages/0/src/components/fixtures/Checkbox.vue')['default']
     CheckboxGroup: typeof import('./../../packages/0/src/components/Checkbox/CheckboxGroup.vue')['default']
     CheckboxHiddenInput: typeof import('./../../packages/0/src/components/Checkbox/CheckboxHiddenInput.vue')['default']
     CheckboxIndicator: typeof import('./../../packages/0/src/components/Checkbox/CheckboxIndicator.vue')['default']
     CheckboxRoot: typeof import('./../../packages/0/src/components/Checkbox/CheckboxRoot.vue')['default']
     CheckboxSelectAll: typeof import('./../../packages/0/src/components/Checkbox/CheckboxSelectAll.vue')['default']
+    Collapsible: typeof import('./../../packages/0/src/components/fixtures/Collapsible.vue')['default']
     CollapsibleActivator: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleActivator.vue')['default']
     CollapsibleContent: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleContent.vue')['default']
     CollapsibleCue: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleCue.vue')['default']
     CollapsibleRoot: typeof import('./../../packages/0/src/components/Collapsible/CollapsibleRoot.vue')['default']
+    Combobox: typeof import('./../../packages/0/src/components/fixtures/Combobox.vue')['default']
     ComboboxActivator: typeof import('./../../packages/0/src/components/Combobox/ComboboxActivator.vue')['default']
     ComboboxContent: typeof import('./../../packages/0/src/components/Combobox/ComboboxContent.vue')['default']
     ComboboxControl: typeof import('./../../packages/0/src/components/Combobox/ComboboxControl.vue')['default']
@@ -64,12 +75,14 @@ declare module 'vue' {
     ComboboxHiddenInput: typeof import('./../../packages/0/src/components/Combobox/ComboboxHiddenInput.vue')['default']
     ComboboxItem: typeof import('./../../packages/0/src/components/Combobox/ComboboxItem.vue')['default']
     ComboboxRoot: typeof import('./../../packages/0/src/components/Combobox/ComboboxRoot.vue')['default']
+    Dialog: typeof import('./../../packages/0/src/components/fixtures/Dialog.vue')['default']
     DialogActivator: typeof import('./../../packages/0/src/components/Dialog/DialogActivator.vue')['default']
     DialogClose: typeof import('./../../packages/0/src/components/Dialog/DialogClose.vue')['default']
     DialogContent: typeof import('./../../packages/0/src/components/Dialog/DialogContent.vue')['default']
     DialogDescription: typeof import('./../../packages/0/src/components/Dialog/DialogDescription.vue')['default']
     DialogRoot: typeof import('./../../packages/0/src/components/Dialog/DialogRoot.vue')['default']
     DialogTitle: typeof import('./../../packages/0/src/components/Dialog/DialogTitle.vue')['default']
+    ExpansionPanel: typeof import('./../../packages/0/src/components/fixtures/ExpansionPanel.vue')['default']
     ExpansionPanelActivator: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelActivator.vue')['default']
     ExpansionPanelContent: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelContent.vue')['default']
     ExpansionPanelCue: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelCue.vue')['default']
@@ -77,17 +90,21 @@ declare module 'vue' {
     ExpansionPanelHeader: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelHeader.vue')['default']
     ExpansionPanelRoot: typeof import('./../../packages/0/src/components/ExpansionPanel/ExpansionPanelRoot.vue')['default']
     Form: typeof import('./../../packages/0/src/components/Form/Form.vue')['default']
+    Group: typeof import('./../../packages/0/src/components/fixtures/Group.vue')['default']
     GroupItem: typeof import('./../../packages/0/src/components/Group/GroupItem.vue')['default']
     GroupRoot: typeof import('./../../packages/0/src/components/Group/GroupRoot.vue')['default']
+    Image: typeof import('./../../packages/0/src/components/fixtures/Image.vue')['default']
     ImageFallback: typeof import('./../../packages/0/src/components/Image/ImageFallback.vue')['default']
     ImageImg: typeof import('./../../packages/0/src/components/Image/ImageImg.vue')['default']
     ImagePlaceholder: typeof import('./../../packages/0/src/components/Image/ImagePlaceholder.vue')['default']
     ImageRoot: typeof import('./../../packages/0/src/components/Image/ImageRoot.vue')['default']
+    Input: typeof import('./../../packages/0/src/components/fixtures/Input.vue')['default']
     InputControl: typeof import('./../../packages/0/src/components/Input/InputControl.vue')['default']
     InputDescription: typeof import('./../../packages/0/src/components/Input/InputDescription.vue')['default']
     InputError: typeof import('./../../packages/0/src/components/Input/InputError.vue')['default']
     InputRoot: typeof import('./../../packages/0/src/components/Input/InputRoot.vue')['default']
     Locale: typeof import('./../../packages/0/src/components/Locale/Locale.vue')['default']
+    NumberField: typeof import('./../../packages/0/src/components/fixtures/NumberField.vue')['default']
     NumberFieldControl: typeof import('./../../packages/0/src/components/NumberField/NumberFieldControl.vue')['default']
     NumberFieldDecrement: typeof import('./../../packages/0/src/components/NumberField/NumberFieldDecrement.vue')['default']
     NumberFieldDescription: typeof import('./../../packages/0/src/components/NumberField/NumberFieldDescription.vue')['default']
@@ -95,9 +112,11 @@ declare module 'vue' {
     NumberFieldIncrement: typeof import('./../../packages/0/src/components/NumberField/NumberFieldIncrement.vue')['default']
     NumberFieldRoot: typeof import('./../../packages/0/src/components/NumberField/NumberFieldRoot.vue')['default']
     NumberFieldScrub: typeof import('./../../packages/0/src/components/NumberField/NumberFieldScrub.vue')['default']
+    Overflow: typeof import('./../../packages/0/src/components/fixtures/Overflow.vue')['default']
     OverflowIndicator: typeof import('./../../packages/0/src/components/Overflow/OverflowIndicator.vue')['default']
     OverflowItem: typeof import('./../../packages/0/src/components/Overflow/OverflowItem.vue')['default']
     OverflowRoot: typeof import('./../../packages/0/src/components/Overflow/OverflowRoot.vue')['default']
+    Pagination: typeof import('./../../packages/0/src/components/fixtures/Pagination.vue')['default']
     PaginationEllipsis: typeof import('./../../packages/0/src/components/Pagination/PaginationEllipsis.vue')['default']
     PaginationFirst: typeof import('./../../packages/0/src/components/Pagination/PaginationFirst.vue')['default']
     PaginationItem: typeof import('./../../packages/0/src/components/Pagination/PaginationItem.vue')['default']
@@ -106,11 +125,13 @@ declare module 'vue' {
     PaginationPrev: typeof import('./../../packages/0/src/components/Pagination/PaginationPrev.vue')['default']
     PaginationRoot: typeof import('./../../packages/0/src/components/Pagination/PaginationRoot.vue')['default']
     PaginationStatus: typeof import('./../../packages/0/src/components/Pagination/PaginationStatus.vue')['default']
+    Popover: typeof import('./../../packages/0/src/components/fixtures/Popover.vue')['default']
     PopoverActivator: typeof import('./../../packages/0/src/components/Popover/PopoverActivator.vue')['default']
     PopoverContent: typeof import('./../../packages/0/src/components/Popover/PopoverContent.vue')['default']
     PopoverRoot: typeof import('./../../packages/0/src/components/Popover/PopoverRoot.vue')['default']
     Portal: typeof import('./../../packages/0/src/components/Portal/Portal.vue')['default']
     Presence: typeof import('./../../packages/0/src/components/Presence/Presence.vue')['default']
+    Progress: typeof import('./../../packages/0/src/components/fixtures/Progress.vue')['default']
     ProgressBuffer: typeof import('./../../packages/0/src/components/Progress/ProgressBuffer.vue')['default']
     ProgressFill: typeof import('./../../packages/0/src/components/Progress/ProgressFill.vue')['default']
     ProgressHiddenInput: typeof import('./../../packages/0/src/components/Progress/ProgressHiddenInput.vue')['default']
@@ -118,58 +139,75 @@ declare module 'vue' {
     ProgressRoot: typeof import('./../../packages/0/src/components/Progress/ProgressRoot.vue')['default']
     ProgressTrack: typeof import('./../../packages/0/src/components/Progress/ProgressTrack.vue')['default']
     ProgressValue: typeof import('./../../packages/0/src/components/Progress/ProgressValue.vue')['default']
+    Radio: typeof import('./../../packages/0/src/components/fixtures/Radio.vue')['default']
     RadioGroup: typeof import('./../../packages/0/src/components/Radio/RadioGroup.vue')['default']
     RadioHiddenInput: typeof import('./../../packages/0/src/components/Radio/RadioHiddenInput.vue')['default']
     RadioIndicator: typeof import('./../../packages/0/src/components/Radio/RadioIndicator.vue')['default']
     RadioRoot: typeof import('./../../packages/0/src/components/Radio/RadioRoot.vue')['default']
+    Rating: typeof import('./../../packages/0/src/components/fixtures/Rating.vue')['default']
     RatingHiddenInput: typeof import('./../../packages/0/src/components/Rating/RatingHiddenInput.vue')['default']
     RatingItem: typeof import('./../../packages/0/src/components/Rating/RatingItem.vue')['default']
     RatingRoot: typeof import('./../../packages/0/src/components/Rating/RatingRoot.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Scrim: typeof import('./../../packages/0/src/components/Scrim/Scrim.vue')['default']
+    Select: typeof import('./../../packages/0/src/components/fixtures/Select.vue')['default']
     SelectActivator: typeof import('./../../packages/0/src/components/Select/SelectActivator.vue')['default']
     SelectContent: typeof import('./../../packages/0/src/components/Select/SelectContent.vue')['default']
     SelectCue: typeof import('./../../packages/0/src/components/Select/SelectCue.vue')['default']
     SelectHiddenInput: typeof import('./../../packages/0/src/components/Select/SelectHiddenInput.vue')['default']
+    Selection: typeof import('./../../packages/0/src/components/fixtures/Selection.vue')['default']
     SelectionItem: typeof import('./../../packages/0/src/components/Selection/SelectionItem.vue')['default']
     SelectionRoot: typeof import('./../../packages/0/src/components/Selection/SelectionRoot.vue')['default']
     SelectItem: typeof import('./../../packages/0/src/components/Select/SelectItem.vue')['default']
     SelectPlaceholder: typeof import('./../../packages/0/src/components/Select/SelectPlaceholder.vue')['default']
     SelectRoot: typeof import('./../../packages/0/src/components/Select/SelectRoot.vue')['default']
     SelectValue: typeof import('./../../packages/0/src/components/Select/SelectValue.vue')['default']
+    Single: typeof import('./../../packages/0/src/components/fixtures/Single.vue')['default']
     SingleItem: typeof import('./../../packages/0/src/components/Single/SingleItem.vue')['default']
     SingleRoot: typeof import('./../../packages/0/src/components/Single/SingleRoot.vue')['default']
+    Slider: typeof import('./../../packages/0/src/components/fixtures/Slider.vue')['default']
     SliderHiddenInput: typeof import('./../../packages/0/src/components/Slider/SliderHiddenInput.vue')['default']
     SliderRange: typeof import('./../../packages/0/src/components/Slider/SliderRange.vue')['default']
     SliderRoot: typeof import('./../../packages/0/src/components/Slider/SliderRoot.vue')['default']
     SliderThumb: typeof import('./../../packages/0/src/components/Slider/SliderThumb.vue')['default']
     SliderTrack: typeof import('./../../packages/0/src/components/Slider/SliderTrack.vue')['default']
+    Snackbar: typeof import('./../../packages/0/src/components/fixtures/Snackbar.vue')['default']
     SnackbarAction: typeof import('./../../packages/0/src/components/Snackbar/SnackbarAction.vue')['default']
     SnackbarClose: typeof import('./../../packages/0/src/components/Snackbar/SnackbarClose.vue')['default']
     SnackbarContent: typeof import('./../../packages/0/src/components/Snackbar/SnackbarContent.vue')['default']
     SnackbarPortal: typeof import('./../../packages/0/src/components/Snackbar/SnackbarPortal.vue')['default']
     SnackbarQueue: typeof import('./../../packages/0/src/components/Snackbar/SnackbarQueue.vue')['default']
     SnackbarRoot: typeof import('./../../packages/0/src/components/Snackbar/SnackbarRoot.vue')['default']
+    Splitter: typeof import('./../../packages/0/src/components/fixtures/Splitter.vue')['default']
     SplitterHandle: typeof import('./../../packages/0/src/components/Splitter/SplitterHandle.vue')['default']
     SplitterPanel: typeof import('./../../packages/0/src/components/Splitter/SplitterPanel.vue')['default']
     SplitterRoot: typeof import('./../../packages/0/src/components/Splitter/SplitterRoot.vue')['default']
+    Step: typeof import('./../../packages/0/src/components/fixtures/Step.vue')['default']
     StepItem: typeof import('./../../packages/0/src/components/Step/StepItem.vue')['default']
     StepRoot: typeof import('./../../packages/0/src/components/Step/StepRoot.vue')['default']
+    Switch: typeof import('./../../packages/0/src/components/fixtures/Switch.vue')['default']
     SwitchGroup: typeof import('./../../packages/0/src/components/Switch/SwitchGroup.vue')['default']
     SwitchHiddenInput: typeof import('./../../packages/0/src/components/Switch/SwitchHiddenInput.vue')['default']
     SwitchRoot: typeof import('./../../packages/0/src/components/Switch/SwitchRoot.vue')['default']
     SwitchSelectAll: typeof import('./../../packages/0/src/components/Switch/SwitchSelectAll.vue')['default']
     SwitchThumb: typeof import('./../../packages/0/src/components/Switch/SwitchThumb.vue')['default']
     SwitchTrack: typeof import('./../../packages/0/src/components/Switch/SwitchTrack.vue')['default']
+    Tabs: typeof import('./../../packages/0/src/components/fixtures/Tabs.vue')['default']
     TabsItem: typeof import('./../../packages/0/src/components/Tabs/TabsItem.vue')['default']
     TabsList: typeof import('./../../packages/0/src/components/Tabs/TabsList.vue')['default']
     TabsPanel: typeof import('./../../packages/0/src/components/Tabs/TabsPanel.vue')['default']
     TabsRoot: typeof import('./../../packages/0/src/components/Tabs/TabsRoot.vue')['default']
     Theme: typeof import('./../../packages/0/src/components/Theme/Theme.vue')['default']
+    Toggle: typeof import('./../../packages/0/src/components/fixtures/Toggle.vue')['default']
     ToggleGroup: typeof import('./../../packages/0/src/components/Toggle/ToggleGroup.vue')['default']
     ToggleIndicator: typeof import('./../../packages/0/src/components/Toggle/ToggleIndicator.vue')['default']
     ToggleRoot: typeof import('./../../packages/0/src/components/Toggle/ToggleRoot.vue')['default']
+    Tooltip: typeof import('./../../packages/0/src/components/fixtures/Tooltip.vue')['default']
+    TooltipActivator: typeof import('./../../packages/0/src/components/Tooltip/TooltipActivator.vue')['default']
+    TooltipContent: typeof import('./../../packages/0/src/components/Tooltip/TooltipContent.vue')['default']
+    TooltipRoot: typeof import('./../../packages/0/src/components/Tooltip/TooltipRoot.vue')['default']
+    Treeview: typeof import('./../../packages/0/src/components/fixtures/Treeview.vue')['default']
     TreeviewActivator: typeof import('./../../packages/0/src/components/Treeview/TreeviewActivator.vue')['default']
     TreeviewCheckbox: typeof import('./../../packages/0/src/components/Treeview/TreeviewCheckbox.vue')['default']
     TreeviewContent: typeof import('./../../packages/0/src/components/Treeview/TreeviewContent.vue')['default']
diff --git a/dev/vite.config.ts b/dev/vite.config.ts
index 59284951e1..bb3e7ac940 100644
--- a/dev/vite.config.ts
+++ b/dev/vite.config.ts
@@ -53,9 +53,11 @@ export default defineConfig({
       '@': fileURLToPath(new URL('src', import.meta.url)),
       '@vuetify/v0': fileURLToPath(new URL('../packages/0/src', import.meta.url)),
       '@vuetify/paper': fileURLToPath(new URL('../packages/paper/src', import.meta.url)),
+      '@paper/bulma': fileURLToPath(new URL('../packages/bulma/src', import.meta.url)),
       // internal
       '#v0': fileURLToPath(new URL('../packages/0/src', import.meta.url)),
       '#paper': fileURLToPath(new URL('../packages/paper/src', import.meta.url)),
+      '#bulma': fileURLToPath(new URL('../packages/bulma/src', import.meta.url)),
     },
   },
   build: {

From ed0dae3c99dc02a1436ea4f797f59b2388fb378b Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 09:34:20 -0500
Subject: [PATCH 06/18] docs(bulma): expand BuDropdown page with live examples
 and behavior docs

Recipes promoted into four iframed examples (hoverable, alignment,
menu content, arbitrary content) each covering one concept; Accessibility
gains a Dismissal table and the subtree-bound Escape rationale; role=menu
policy gets its own Menu semantics section. Sandbox now measures on
pointer events so CSS-only hover reveals resize their frame.
---
 .../systems/bulma/dropdown/alignment.vue      | 53 +++++++++++
 .../systems/bulma/dropdown/arbitrary.vue      | 38 ++++++++
 .../systems/bulma/dropdown/hoverable.vue      | 23 +++++
 .../examples/systems/bulma/dropdown/items.vue | 45 +++++++++
 apps/docs/src/pages/systems/bulma/dropdown.md | 95 ++++++++++---------
 apps/docs/src/sandbox/SandboxRoot.vue         |  5 +
 6 files changed, 215 insertions(+), 44 deletions(-)
 create mode 100644 apps/docs/src/examples/systems/bulma/dropdown/alignment.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/dropdown/arbitrary.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/dropdown/hoverable.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/dropdown/items.vue

diff --git a/apps/docs/src/examples/systems/bulma/dropdown/alignment.vue b/apps/docs/src/examples/systems/bulma/dropdown/alignment.vue
new file mode 100644
index 0000000000..818bb1615c
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/dropdown/alignment.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { BuDropdown, BuDropdownMenu, BuDropdownTrigger } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const up = shallowRef(false)
+  const right = shallowRef(false)
+</script>
+
+<template>
+  <p class="mb-6">
+    Bulma positions both menus with plain CSS, against the trigger — there is no
+    floating engine to configure, and no measuring at runtime.
+  </p>
+
+  <div class="is-flex is-justify-content-space-between">
+    <BuDropdown v-model="up" up>
+      <BuDropdownTrigger v-slot="{ attrs }">
+        <button class="button" type="button" v-bind="attrs">
+          <span>Opens up</span>
+
+          <span class="icon is-small">
+            <i aria-hidden="true" class="fas fa-angle-up" />
+          </span>
+        </button>
+      </BuDropdownTrigger>
+
+      <BuDropdownMenu v-slot="{ close }">
+        <a class="dropdown-item" @click="close">Overview</a>
+
+        <a class="dropdown-item" @click="close">Modifiers</a>
+      </BuDropdownMenu>
+    </BuDropdown>
+
+    <BuDropdown v-model="right" right>
+      <BuDropdownTrigger v-slot="{ attrs }">
+        <button class="button" type="button" v-bind="attrs">
+          <span>Aligns right</span>
+
+          <span class="icon is-small">
+            <i aria-hidden="true" class="fas fa-angle-down" />
+          </span>
+        </button>
+      </BuDropdownTrigger>
+
+      <BuDropdownMenu v-slot="{ close }">
+        <a class="dropdown-item" @click="close">Overview</a>
+
+        <a class="dropdown-item" @click="close">Modifiers</a>
+      </BuDropdownMenu>
+    </BuDropdown>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/dropdown/arbitrary.vue b/apps/docs/src/examples/systems/bulma/dropdown/arbitrary.vue
new file mode 100644
index 0000000000..1ccdfb3568
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/dropdown/arbitrary.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import { BuDropdown, BuDropdownMenu, BuDropdownTrigger } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(false)
+</script>
+
+<template>
+  <BuDropdown v-model="open">
+    <BuDropdownTrigger v-slot="{ attrs }">
+      <button class="button" type="button" v-bind="attrs">
+        <span>Content</span>
+
+        <span class="icon is-small">
+          <i aria-hidden="true" class="fas fa-angle-down" />
+        </span>
+      </button>
+    </BuDropdownTrigger>
+
+    <BuDropdownMenu v-slot="{ close }">
+      <div class="dropdown-item">
+        <p>
+          You can insert <strong>any type of content</strong> within the dropdown
+          menu — Bulma documents a <code>div</code> for exactly this.
+        </p>
+      </div>
+
+      <hr class="dropdown-divider">
+
+      <div class="dropdown-item">
+        <button class="button is-small is-primary" type="button" @click="close">
+          Got it
+        </button>
+      </div>
+    </BuDropdownMenu>
+  </BuDropdown>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/dropdown/hoverable.vue b/apps/docs/src/examples/systems/bulma/dropdown/hoverable.vue
new file mode 100644
index 0000000000..f23f8c28f4
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/dropdown/hoverable.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { BuDropdown, BuDropdownMenu, BuDropdownTrigger } from '@paper/bulma'
+</script>
+
+<template>
+  <BuDropdown hoverable>
+    <BuDropdownTrigger v-slot="{ attrs }">
+      <button class="button" type="button" v-bind="attrs">
+        <span>Hover me</span>
+
+        <span class="icon is-small">
+          <i aria-hidden="true" class="fas fa-angle-down" />
+        </span>
+      </button>
+    </BuDropdownTrigger>
+
+    <BuDropdownMenu>
+      <a class="dropdown-item">Overview</a>
+
+      <a class="dropdown-item">Modifiers</a>
+    </BuDropdownMenu>
+  </BuDropdown>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/dropdown/items.vue b/apps/docs/src/examples/systems/bulma/dropdown/items.vue
new file mode 100644
index 0000000000..b58e11122e
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/dropdown/items.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+  import { BuDropdown, BuDropdownMenu, BuDropdownTrigger } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(false)
+  const section = shallowRef('grid')
+
+  const sections = [
+    { value: 'overview', text: 'Overview' },
+    { value: 'modifiers', text: 'Modifiers' },
+    { value: 'grid', text: 'Grid' },
+  ]
+</script>
+
+<template>
+  <BuDropdown v-model="open" menu>
+    <BuDropdownTrigger v-slot="{ isOpen, attrs }">
+      <button class="button" type="button" v-bind="attrs">
+        <span>Documentation</span>
+
+        <span class="icon is-small">
+          <i aria-hidden="true" class="fas" :class="isOpen ? 'fa-angle-up' : 'fa-angle-down'" />
+        </span>
+      </button>
+    </BuDropdownTrigger>
+
+    <BuDropdownMenu v-slot="{ close, item }">
+      <a
+        v-for="entry in sections"
+        :key="entry.value"
+        class="dropdown-item"
+        :class="{ 'is-active': entry.value === section }"
+        v-bind="item"
+        @click="section = entry.value; close()"
+      >
+        {{ entry.text }}
+      </a>
+
+      <hr class="dropdown-divider">
+
+      <a class="dropdown-item" v-bind="item" @click="close">Report an issue</a>
+    </BuDropdownMenu>
+  </BuDropdown>
+</template>
diff --git a/apps/docs/src/pages/systems/bulma/dropdown.md b/apps/docs/src/pages/systems/bulma/dropdown.md
index 3bc0897914..b70830b909 100644
--- a/apps/docs/src/pages/systems/bulma/dropdown.md
+++ b/apps/docs/src/pages/systems/bulma/dropdown.md
@@ -25,7 +25,9 @@ Bulma's `.dropdown` with the JavaScript it never shipped: toggle, outside-click
 
 ## Usage
 
-`BuDropdownTrigger` hands you the attrs to spread on your own button — `aria-haspopup`, `aria-controls`, `aria-expanded` and the click handler. `BuDropdownMenu` renders `.dropdown-menu` and `.dropdown-content`, and hands each item the role it needs.
+Compose three parts: `BuDropdown` renders `.dropdown` and owns the open state, `BuDropdownTrigger` wraps your own button, and `BuDropdownMenu` renders `.dropdown-menu` with its `.dropdown-content`. `v-model` is the single source of truth for open and closed.
+
+Positioning stays Bulma's. The menu is placed by CSS against the trigger, so there is no floating engine to install and nothing measured at runtime — `right` and `up` are the two knobs. What the component adds is the part Bulma leaves to you: the open state, the aria wiring between trigger and menu, click-outside and Escape dismissal.
 
 ::: ds-example
 /systems/bulma/dropdown/basic
@@ -100,59 +102,47 @@ The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentati
 
 You write no `is-active` and no `id`/`aria-controls` pair. The component owns the open class and generates a unique id, binding both ends of it for you.
 
-## Recipes
+## Examples
 
-### Modifiers
+::: ds-example
+/systems/bulma/dropdown/hoverable
 
-Bulma's positioning modifiers are props. Each one adds the class of the same name to `.dropdown`.
+### Hover to open
 
-```vue
-<template>
-  <!-- is-right: align the menu to the right edge -->
-  <BuDropdown right>
-    <BuDropdownTrigger />
-    <BuDropdownMenu />
-  </BuDropdown>
+`hoverable` is the one modifier that changes behavior rather than looks. Bulma's `is-hoverable` opens the menu on hover in pure CSS, so the component deliberately steps back: the toggle becomes a no-op, and neither the click-outside listener nor the Escape handler is attached. Nothing about the open state reaches JavaScript, which is exactly why there is no `v-model` in this example.
 
-  <!-- is-up: open upwards -->
-  <BuDropdown up>
-    <BuDropdownTrigger />
-    <BuDropdownMenu />
-  </BuDropdown>
+That trade has an accessibility cost worth knowing before you reach for it. With no JavaScript running, the trigger's `aria-expanded` never flips — a hover menu reads to assistive technology as a collapsed control whose contents happen to be reachable. Use it for the light, decorative case Bulma designed it for, and use the default click mode whenever the menu is a real navigation surface.
+:::
 
-  <!-- is-hoverable: Bulma's CSS-only hover behavior; no JS is wired -->
-  <BuDropdown hoverable>
-    <BuDropdownTrigger />
-    <BuDropdownMenu />
-  </BuDropdown>
-</template>
-```
+::: ds-example
+/systems/bulma/dropdown/alignment
 
-`hoverable` is the one modifier that changes behavior rather than looks. Bulma opens the menu on hover with CSS alone, so the component steps back entirely: the toggle, the outside-click listener and the Escape handler all go inert.
+### Alignment
 
-### Arbitrary content
+`right` and `up` add Bulma's `is-right` and `is-up` to `.dropdown`, and that is the whole positioning story. The menu is placed by CSS relative to the trigger — nothing measures the viewport, nothing repositions on scroll, and there is no floating engine to configure. Reach for `right` when the trigger sits near the right edge of its container, and `up` when it sits near the bottom of the page.
 
-Bulma documents a second dropdown shape whose items are `div.dropdown-item` holding anything at all. Leave `menu` off for it — `role="menu"` promises menu items, and a dropdown full of paragraphs fails accessibility checks that take the promise seriously.
+Because placement is static, the two modifiers are decisions you make at author time rather than behavior you get for free: a menu that would overflow the viewport stays overflowing. If you need collision-aware placement, that is a different component — [Popover](/components/disclosure/popover) in Vuetify0 does the measuring — and it will not give you Bulma's markup.
+:::
 
-```vue
-<template>
-  <BuDropdown>
-    <BuDropdownTrigger v-slot="{ attrs }">
-      <button class="button" type="button" v-bind="attrs">Content</button>
-    </BuDropdownTrigger>
+::: ds-example
+/systems/bulma/dropdown/items
 
-    <BuDropdownMenu>
-      <div class="dropdown-item">
-        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
-      </div>
+### Menu content
 
-      <hr class="dropdown-divider">
+The pieces Bulma documents for a menu-shaped dropdown: entries as `a.dropdown-item`, `hr.dropdown-divider` between groups, and `is-active` marking the current one. The active class is yours to drive — the component tracks open and closed, not which entry is selected.
 
-      <a class="dropdown-item" href="#">This is a link</a>
-    </BuDropdownMenu>
-  </BuDropdown>
-</template>
-```
+This is also the `menu` mode in practice. Setting the prop puts `role="menu"` on `.dropdown-menu`, and spreading the `item` slot prop on each entry gives it the matching `role="menuitem"`. Take the `close` slot prop too: an entry that navigates or picks something should shut the menu behind it, and nothing closes automatically on click — an inside click is deliberately not a dismissal.
+:::
+
+::: ds-example
+/systems/bulma/dropdown/arbitrary
+
+### Arbitrary content
+
+Bulma documents a second dropdown shape whose entries are `div.dropdown-item` holding anything at all — a paragraph, a form, a button. Leave `menu` off for this one. `role="menu"` promises a list of menu items, and a dropdown full of prose fails the accessibility checks that take the promise seriously, which is why the component makes the role opt-in rather than emitting it always.
+
+The `item` slot prop is still handed out in this mode — it is simply an empty object while `menu` is off. Spreading it on entries you might later promote to a real menu means the same template works either way, so switching modes is one prop rather than a rewrite.
+:::
 
 ## Props
 
@@ -173,6 +163,23 @@ Bulma documents a second dropdown shape whose items are `div.dropdown-item` hold
 
 ## Accessibility
 
-`BuDropdownTrigger` hands out `aria-haspopup`, `aria-expanded` and an `aria-controls` that points at the id `BuDropdownMenu` generates. Escape closes the dropdown and stops there — a dropdown opened inside a modal closes without also closing the modal — and a click outside closes it. While the dropdown is closed, neither listener is attached.
+`BuDropdownTrigger` hands out `aria-haspopup`, `aria-expanded` and an `aria-controls` that points at the id `BuDropdownMenu` generates, so the trigger and the menu it controls are wired to each other without you tracking an id.
+
+### Dismissal
+
+Three ways out, and one deliberate non-way:
+
+| Gesture | Behavior |
+|---------|----------|
+| Click outside | Closes. The listener is attached only while the dropdown is open |
+| Escape | Closes the nearest open dropdown, and stops there |
+| Click inside | Does **not** close — call the `close` slot prop from the entries that should |
+| Hover out (`hoverable`) | Closes, in CSS; no listener is ever attached |
+
+Escape is bound to the dropdown's own subtree rather than the document, and the handler stops propagation once it has closed something. That is what lets a dropdown live inside an open `BuModal`: pressing Escape closes the dropdown and leaves the modal open, and pressing it again closes the modal. A document-level handler would collapse both at once — and would swallow every Escape on the page while the dropdown sat there closed.
+
+### Menu semantics
+
+`role="menu"` is opt-in through the `menu` prop, and it is a promise about the children: every entry must carry `role="menuitem"`, which is what the `item` slot prop applies. Set the prop when the dropdown is a list of actions or links; leave it off when the menu holds arbitrary content, where the role would fail `aria-required-children`.[^dropdown-axe]
 
-Spread `item` on each entry when the parent sets `menu`: it applies `role="menuitem"`, which `role="menu"` requires. Without `menu` it is an empty object, so the same template works in both modes.
+[^dropdown-axe]: Bulma's documented arbitrary-content dropdown ships `role="menu"` around `div.dropdown-item` prose, which is the axe failure this policy avoids — one of the declared deviations on the [Bulma overview](/systems/bulma).
diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
index ecc0ef59f2..9cd237678a 100644
--- a/apps/docs/src/sandbox/SandboxRoot.vue
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -102,6 +102,11 @@
   // flip that reveals it is the only signal.
   useMutationObserver(root, measure, { attributes: true, subtree: true })
 
+  // A CSS-only reveal (Bulma's `is-hoverable` dropdown) mutates nothing and
+  // resizes nothing, so pointer movement is the only signal that the frame has
+  // to grow around a menu.
+  useEventListener(root, ['pointerover', 'pointerout'], measure)
+
   useEventListener(window, 'message', (event: MessageEvent) => {
     if (event.source !== window.parent) return
 

From bb75ba45c1e1094d6032be9e4cfffbd24f7263a9 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 10:52:22 -0500
Subject: [PATCH 07/18] docs(bulma): float dropdown menus over the page via
 clipped frame promotion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Generalizes promotion from position:fixed detection to any floating
content escaping the inline box. Iframes paint an opaque canvas even
with transparent documents, so the promoted frame is clipped via
clip-path to exactly the regions the sandbox reports painting (pinned
box + escaping surfaces) — this also fixes the committed modal path,
whose backdrop was dimming the frame's white canvas rather than the
page. Clipped regions aren't hit-testable, so the parent replays
outside pointerdowns for v0's click-outside; the pin re-syncs on
scroll while promoted. Promotion engages only when content actually
escapes (the alignment example's is-up menu fits its box and never
promotes); hover promotion proved flicker-free with deferred pointer
reads and an in-flight gate.
---
 apps/docs/sandbox/bulma.html                  |  21 +---
 .../src/components/docs/DocsSystemExample.vue |  45 +++++++-
 apps/docs/src/sandbox/SandboxRoot.vue         | 108 ++++++++++++++----
 3 files changed, 133 insertions(+), 41 deletions(-)

diff --git a/apps/docs/sandbox/bulma.html b/apps/docs/sandbox/bulma.html
index a7860c6320..922ac5b2cd 100644
--- a/apps/docs/sandbox/bulma.html
+++ b/apps/docs/sandbox/bulma.html
@@ -25,22 +25,11 @@
         overflow-y: auto;
       }
 
-      /* While an overlay is open the parent promotes this frame to the full
-         viewport, so every pixel Bulma is not painting has to let the docs page
-         show through. Beats Bulma's own `html` background on specificity — this
-         block follows the CDN link, so no !important is needed. */
-      html[data-overlay],
-      html[data-overlay] body {
-        background: transparent;
-      }
-
-      /* The example content is pinned back to the box it occupied inline, so it
-         has to carry the surface the document was painting for it — otherwise
-         the docs page would show through where the example box used to be. */
-      html[data-overlay] .sandbox {
-        background: var(--bulma-scheme-main);
-        border-radius: 0.25rem;
-      }
+      /* Nothing here forces transparency while promoted: an iframe paints an
+         opaque canvas whatever its document says, so the parent clips the frame
+         to the regions this example is actually painting instead. Leaving
+         Bulma's own background in place is what makes the clip edge blend —
+         made transparent, the cut showed the white canvas as a bright rim. */
     </style>
   </head>
   <body>
diff --git a/apps/docs/src/components/docs/DocsSystemExample.vue b/apps/docs/src/components/docs/DocsSystemExample.vue
index 28cb3141d8..8c62c0f9a9 100644
--- a/apps/docs/src/components/docs/DocsSystemExample.vue
+++ b/apps/docs/src/components/docs/DocsSystemExample.vue
@@ -67,6 +67,26 @@
   const overlay = shallowRef(false)
   const frame = useTemplateRef<HTMLIFrameElement>('frame')
 
+  // An iframe paints an opaque canvas — a transparent document inside it does
+  // not make the frame see-through. So a promoted frame is clipped to the
+  // regions the sandbox says it is actually painting: the example box and
+  // whatever floats out of it. Everything else is cut away and the docs page
+  // shows through, which is what puts an open menu *over* the page instead of
+  // behind a white sheet.
+  const clip = shallowRef<string | undefined>()
+
+  function shape (rects: { top: number, left: number, width: number, height: number }[]) {
+    if (!rects?.length) {
+      clip.value = undefined
+
+      return
+    }
+
+    clip.value = rects
+      .map(r => `M${r.left} ${r.top}H${r.left + r.width}V${r.top + r.height}H${r.left}Z`)
+      .join('')
+  }
+
   function post (message: Record<string, unknown>) {
     frame.value?.contentWindow?.postMessage(message, window.location.origin)
   }
@@ -145,18 +165,38 @@
         // nothing reflows and the page keeps its scroll position.
         case 'v0:sandbox:overlay': {
           overlay.value = event.data.open
+          shape(event.data.rects)
           lift(event.data.open)
           // Correct any staleness now that the frame has left the flow; the
           // placeholder keeps its geometry either way.
           nextTick(place)
           break
         }
+        // A menu can resize under its own content while it stays open.
+        case 'v0:sandbox:rects': {
+          shape(event.data.rects)
+          break
+        }
       }
     })
 
-    // Scroll is moot — the promoted frame swallows it — but a resize moves the
-    // box the pinned content is sitting on.
+    // Clipped-away regions are not hit-testable, so a click on the docs page
+    // never reaches the sandbox — hand it over, or an open menu would sit there
+    // while the reader clicks around it.
+    useEventListener(document, 'pointerdown', (event: PointerEvent) => {
+      if (!overlay.value || event.target === frame.value) return
+
+      post({ type: 'v0:sandbox:dismiss' })
+    })
+
+    // A resize moves the box the pinned content sits on. So does a scroll: the
+    // clipped frame no longer swallows the page's wheel events, and the page
+    // can scroll itself anyway (hash jumps, scroll-spy), which would leave the
+    // pinned content stranded at the coordinates it was promoted with.
     useEventListener(window, 'resize', place)
+    useEventListener(window, 'scroll', () => {
+      if (overlay.value) place()
+    }, { passive: true })
   }
 </script>
 
@@ -179,6 +219,7 @@
           : 'absolute inset-0 h-full w-full rounded border-0'"
         loading="lazy"
         :src
+        :style="overlay && clip ? { clipPath: `path('${clip}')` } : undefined"
         :title="`${name} example`"
       />
     </div>
diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
index 9cd237678a..167d3cf2f9 100644
--- a/apps/docs/src/sandbox/SandboxRoot.vue
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -15,8 +15,8 @@
     name: string
   }>()
 
-  // Breathing room under an absolutely positioned surface, matching `.sandbox`.
-  const PAD = 24
+  // Subpixel slack, so a menu flush with the box edge is not read as escaping it.
+  const SLACK = 1
 
   const root = useTemplateRef<HTMLElement>('root')
 
@@ -24,6 +24,11 @@
   // parent has already been told.
   let open = false
 
+  // True between asking the parent to promote and the parent confirming it. The
+  // frame is mid-flight then — measuring against it would read a box that is
+  // about to move, and a pointer-driven read could bounce the overlay back off.
+  let pending = false
+
   // Where the inline frame sits in the docs viewport. The parent keeps this
   // fresh so a promotion can pin against it in the same tick it is detected.
   let box: { top: number, left: number, width: number } | null = null
@@ -60,40 +65,82 @@
     el.style.width = `${box.width}px`
   }
 
+  type Rect = { top: number, left: number, width: number, height: number }
+
+  function toRect (rect: DOMRect): Rect {
+    return { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
+  }
+
+  // Floating content has to escape the frame, not stretch it: on a real page an
+  // open menu paints over whatever follows it, and growing the example box
+  // instead would reflow the docs around a transient piece of UI.
+  //
+  // Returns the regions the promoted frame is allowed to paint — the example's
+  // own box plus every surface that escapes it. The frame is opaque, so
+  // anything outside these gets clipped away and the docs page shows through.
+  function floats (el: HTMLElement): Rect[] {
+    const box = el.getBoundingClientRect()
+    const rects: Rect[] = []
+
+    for (const node of el.querySelectorAll<HTMLElement>('*')) {
+      if (!node.checkVisibility()) continue
+
+      const position = getComputedStyle(node).position
+
+      if (position !== 'fixed' && position !== 'absolute') continue
+
+      const rect = node.getBoundingClientRect()
+
+      // Laid out against the viewport (a modal backdrop), or out-of-flow and
+      // spilling past the box the example occupies inline. A menu that fits
+      // inside the box needs nothing — it is already painted there.
+      const escapes = position === 'fixed'
+        || rect.top < box.top - SLACK
+        || rect.bottom > box.bottom + SLACK
+        || rect.left < box.left - SLACK
+        || rect.right > box.right + SLACK
+
+      if (escapes) rects.push(toRect(rect))
+    }
+
+    return rects.length > 0 ? [toRect(box), ...rects] : []
+  }
+
   function measure () {
     const el = root.value
 
-    if (!el) return
-
-    const nodes = [...el.querySelectorAll<HTMLElement>('*')].filter(node => node.checkVisibility())
-    const positions = nodes.map(node => [node, getComputedStyle(node).position] as const)
+    if (!el || pending) return
 
-    // A fixed surface is laid out against this document's viewport, so it can
-    // only be seen in full if the parent promotes the whole frame.
-    const overlay = positions.some(([, position]) => position === 'fixed')
+    const rects = floats(el)
+    const overlay = rects.length > 0
 
     if (overlay !== open) {
       open = overlay
+      pending = overlay
 
       document.documentElement.toggleAttribute('data-overlay', overlay)
       pin()
-      send({ type: 'v0:sandbox:overlay', open: overlay })
-    }
+      send({ type: 'v0:sandbox:overlay', open: overlay, rects })
 
-    // While promoted the frame is the viewport — reporting that back would
-    // collapse the placeholder the docs page is holding open in the flow.
-    if (overlay) return
+      // Never stay gated on a parent that went quiet: a stuck `pending` would
+      // leave an invisible full-viewport frame swallowing the page.
+      if (overlay) setTimeout(() => {
+        pending = false
+      }, 300)
 
-    let height = el.offsetHeight
+      return
+    }
 
-    // Dropdown menus and popovers overflow the flow by a knowable amount.
-    for (const [node, position] of positions) {
-      if (position !== 'absolute') continue
+    // While promoted the frame is the viewport — reporting a height back would
+    // collapse the placeholder the docs page is holding open in the flow. The
+    // regions still have to keep up: a menu resizes under its own content.
+    if (overlay) {
+      send({ type: 'v0:sandbox:rects', rects })
 
-      height = Math.max(height, Math.ceil(node.getBoundingClientRect().bottom) + PAD)
+      return
     }
 
-    send({ type: 'v0:sandbox:size', height })
+    send({ type: 'v0:sandbox:size', height: el.offsetHeight })
   }
 
   useResizeObserver(root, measure)
@@ -103,9 +150,11 @@
   useMutationObserver(root, measure, { attributes: true, subtree: true })
 
   // A CSS-only reveal (Bulma's `is-hoverable` dropdown) mutates nothing and
-  // resizes nothing, so pointer movement is the only signal that the frame has
-  // to grow around a menu.
-  useEventListener(root, ['pointerover', 'pointerout'], measure)
+  // resizes nothing, so pointer movement is the only signal that a menu opened.
+  // Deferred a frame: moving between the trigger and its menu fires pointerout
+  // before the pointer lands, and reading `:hover` mid-gap would close what the
+  // reader is reaching for.
+  useEventListener(root, ['pointerover', 'pointerout'], () => requestAnimationFrame(measure))
 
   useEventListener(window, 'message', (event: MessageEvent) => {
     if (event.source !== window.parent) return
@@ -115,9 +164,22 @@
         document.documentElement.dataset.theme = event.data.dark ? 'dark' : 'light'
         break
       }
+      // Also the parent's acknowledgement that the frame has settled: re-pin
+      // against the fresh box, then re-read, in case the pointer left while the
+      // promotion was in flight.
       case 'v0:sandbox:box': {
         box = event.data.box
+        pending = false
         pin()
+        measure()
+        break
+      }
+      // The frame is clipped to the reported regions, so a click on the docs
+      // page never reaches this document. Replaying it here lets v0's
+      // click-outside close whatever is open.
+      case 'v0:sandbox:dismiss': {
+        document.documentElement.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+        document.documentElement.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
         break
       }
     }

From e346d564493fc37f9fbde86c5e7465209bdc32b5 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 10:59:58 -0500
Subject: [PATCH 08/18] docs(bulma): single-owner frame promotion; hover
 examples grow, never promote
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ancestor z-index lift was tracked per example instance while
lifting the same shared ancestors, so overlapping promotions restored
each other's lifted values and left page content permanently raised.
Promotion is now a page-level singleton: one owner token, one shared
lift record, one release() used by close, displacement, and teardown;
a second promoter displaces the first with full restore. Hover-revealed
content latches to frame growth for the whole reveal — hover promotion
churned the shared lift and the growth resize re-promoted on rebound.
---
 .../src/components/docs/DocsSystemExample.vue | 100 +++++++++++++-----
 apps/docs/src/sandbox/SandboxRoot.vue         |  40 +++++--
 2 files changed, 110 insertions(+), 30 deletions(-)

diff --git a/apps/docs/src/components/docs/DocsSystemExample.vue b/apps/docs/src/components/docs/DocsSystemExample.vue
index 8c62c0f9a9..98ad5ddbd6 100644
--- a/apps/docs/src/components/docs/DocsSystemExample.vue
+++ b/apps/docs/src/components/docs/DocsSystemExample.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts">
   // Framework
   import { IN_BROWSER, useEventListener, useTheme } from '@vuetify/v0'
 
@@ -11,6 +11,40 @@
   // Types
   import type { GnDocsExampleFile } from '@paper/genesis'
 
+  // Page-level state. Every example on a page promotes into the same viewport
+  // and lifts the same ancestor stacking contexts, so both have to be owned
+  // once rather than per instance — two instances lifting the same ancestors
+  // would each record the other's `9999` as the value to restore, and the last
+  // one out would leave the page permanently raised.
+  let owner: symbol | null = null
+  let lifted: { el: HTMLElement, z: string }[] = []
+
+  const releases = new Map<symbol, () => void>()
+
+  // The frame sits inside AppMain's `z-0` stacking context, a sibling of the
+  // app bar's `z-1` — so no z-index on the frame itself can paint it over the
+  // chrome. The contexts between it and the body have to be lifted instead.
+  // Moving the frame in the DOM would be the other way out, and is not one:
+  // re-parenting an iframe reloads it, taking the open overlay with it.
+  function raise (el: HTMLElement | null | undefined) {
+    if (lifted.length > 0) return
+
+    for (let node = el?.parentElement; node && node !== document.body; node = node.parentElement) {
+      const style = getComputedStyle(node)
+
+      if (style.position === 'static' || style.zIndex === 'auto') continue
+
+      lifted.push({ el: node, z: node.style.zIndex })
+      node.style.zIndex = '9999'
+    }
+  }
+
+  function lower () {
+    for (const { el, z } of lifted) el.style.zIndex = z
+
+    lifted = []
+  }
+
   export interface DocsSystemExampleProps {
     /** Auto-resolve example by path (extensionless; .vue assumed) */
     filePath?: string
@@ -27,7 +61,9 @@
     /** Peek mode for single-file */
     peek?: boolean
   }
+</script>
 
+<script setup lang="ts">
   const { filePath, filePaths } = defineProps<DocsSystemExampleProps>()
 
   // Design-system examples cannot share a document with the docs shell: the
@@ -108,34 +144,45 @@
     post({ type: 'v0:sandbox:box', box: { top: rect.top, left: rect.left, width: rect.width } })
   }
 
-  // Ancestors whose z-index was lifted to let the promoted frame out.
-  const lifted: { el: HTMLElement, z: string }[] = []
+  const token = Symbol('docs-system-example')
 
-  // The frame sits inside AppMain's `z-0` stacking context, a sibling of the
-  // app bar's `z-1` — so no z-index on the frame itself can paint it over the
-  // chrome. The contexts between it and the body have to be lifted instead.
-  // Moving the frame in the DOM would be the other way out, and is not one:
-  // re-parenting an iframe reloads it, taking the open overlay with it.
-  function lift (open: boolean) {
-    if (!open) {
-      for (const { el, z } of lifted) el.style.zIndex = z
+  // Give the page back exactly what promotion took: the frame's own geometry,
+  // the clip, and the ancestor z-indexes. Runs on close, on being displaced by
+  // another example, and on teardown — the residue from a half-restore is what
+  // makes examples pile on top of each other.
+  function release () {
+    overlay.value = false
+    clip.value = undefined
 
-      lifted.length = 0
-
-      return
-    }
+    if (owner !== token) return
 
-    for (let el = frame.value?.parentElement; el && el !== document.body; el = el.parentElement) {
-      const style = getComputedStyle(el)
+    owner = null
+    lower()
+  }
 
-      if (style.position === 'static' || style.zIndex === 'auto') continue
+  // One promoted frame per page. A second example asking to promote displaces
+  // the first — it is dismissed and fully restored before this one takes over,
+  // so the lift is only ever held by one instance.
+  function claim () {
+    if (owner === token) return
 
-      lifted.push({ el, z: el.style.zIndex })
-      el.style.zIndex = '9999'
+    for (const [key, dismiss] of releases) {
+      if (key !== token) dismiss()
     }
+
+    owner = token
+    raise(frame.value)
   }
 
-  onScopeDispose(() => lift(false))
+  releases.set(token, () => {
+    post({ type: 'v0:sandbox:dismiss' })
+    release()
+  })
+
+  onScopeDispose(() => {
+    releases.delete(token)
+    release()
+  })
 
   watch(() => theme.isDark.value, sync)
 
@@ -164,9 +211,14 @@
         // document. The placeholder holds the inline box open meanwhile, so
         // nothing reflows and the page keeps its scroll position.
         case 'v0:sandbox:overlay': {
-          overlay.value = event.data.open
-          shape(event.data.rects)
-          lift(event.data.open)
+          if (event.data.open) {
+            claim()
+            overlay.value = true
+            shape(event.data.rects)
+          } else {
+            release()
+          }
+
           // Correct any staleness now that the frame has left the flow; the
           // placeholder keeps its geometry either way.
           nextTick(place)
diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
index 167d3cf2f9..c515a7dc13 100644
--- a/apps/docs/src/sandbox/SandboxRoot.vue
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -18,6 +18,9 @@
   // Subpixel slack, so a menu flush with the box edge is not read as escaping it.
   const SLACK = 1
 
+  // Breathing room under content the frame has to grow around.
+  const PAD = 24
+
   const root = useTemplateRef<HTMLElement>('root')
 
   // The DOM is the source of truth for overlay state; this only tracks what the
@@ -29,6 +32,10 @@
   // about to move, and a pointer-driven read could bounce the overlay back off.
   let pending = false
 
+  // True while a pointer-revealed surface is showing: the frame grows around it
+  // and never promotes, for as long as it stays open.
+  let growing = false
+
   // Where the inline frame sits in the docs viewport. The parent keeps this
   // fresh so a promotion can pin against it in the same tick it is detected.
   let box: { top: number, left: number, width: number } | null = null
@@ -106,13 +113,26 @@
     return rects.length > 0 ? [toRect(box), ...rects] : []
   }
 
-  function measure () {
+  // Promotion is only ever entered from a state change the DOM reported —
+  // never from pointer movement. Bulma's `is-hoverable` dropdown opens in pure
+  // CSS, and promoting on hover fights the pointer: the frame relayouts under
+  // the cursor mid-gesture and the page comes apart. Hover-revealed content
+  // grows the frame instead, which is what it did before promotion existed.
+  //
+  // The mode has to latch for the whole reveal. Growing the frame does not grow
+  // this root, so the surface still reads as escaping it, and the resize this
+  // very growth triggers would promote on the rebound.
+  function measure (hover = false) {
     const el = root.value
 
     if (!el || pending) return
 
     const rects = floats(el)
-    const overlay = rects.length > 0
+
+    if (rects.length === 0) growing = false
+    else if (hover && !open) growing = true
+
+    const overlay = rects.length > 0 && !growing
 
     if (overlay !== open) {
       open = overlay
@@ -140,21 +160,29 @@
       return
     }
 
-    send({ type: 'v0:sandbox:size', height: el.offsetHeight })
+    // Not promoted, so anything hanging out of the flow — a hover-revealed menu
+    // — has to be made room for, or the frame clips it.
+    let height = el.offsetHeight
+
+    for (const rect of floats(el).slice(1)) {
+      height = Math.max(height, Math.ceil(rect.top + rect.height) + PAD)
+    }
+
+    send({ type: 'v0:sandbox:size', height })
   }
 
-  useResizeObserver(root, measure)
+  useResizeObserver(root, () => measure())
 
   // Opening an overlay changes no layout the ResizeObserver can see — the class
   // flip that reveals it is the only signal.
-  useMutationObserver(root, measure, { attributes: true, subtree: true })
+  useMutationObserver(root, () => measure(), { attributes: true, subtree: true })
 
   // A CSS-only reveal (Bulma's `is-hoverable` dropdown) mutates nothing and
   // resizes nothing, so pointer movement is the only signal that a menu opened.
   // Deferred a frame: moving between the trigger and its menu fires pointerout
   // before the pointer lands, and reading `:hover` mid-gap would close what the
   // reader is reaching for.
-  useEventListener(root, ['pointerover', 'pointerout'], () => requestAnimationFrame(measure))
+  useEventListener(root, ['pointerover', 'pointerout'], () => requestAnimationFrame(() => measure(true)))
 
   useEventListener(window, 'message', (event: MessageEvent) => {
     if (event.source !== window.parent) return

From c8604314965a7a1e6e213e10bb712f38292c0ba6 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 13:27:34 -0500
Subject: [PATCH 09/18] =?UTF-8?q?docs(bulma):=20tier=20frame=20promotion?=
 =?UTF-8?q?=20=E2=80=94=20float=20slides=20under=20chrome,=20overlay=20cov?=
 =?UTF-8?q?ers=20it?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sandbox classifies each promotion: overlay (viewport-laid-out
surface — modal + backdrop) lifts ancestor stacking contexts to cover
chrome as before; float (in-flow content spilling out — dropdown menus)
never lifts, so the sticky app bar occludes it on scroll exactly like
surrounding page content. Pin, clip, singleton ownership, dismissal
bridge, and scroll re-sync stay shared; a float escalates to overlay
on the next rects message if a modal opens within it.
---
 .../src/components/docs/DocsSystemExample.vue | 25 +++++++++-----
 apps/docs/src/sandbox/SandboxRoot.vue         | 34 +++++++++++++------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/apps/docs/src/components/docs/DocsSystemExample.vue b/apps/docs/src/components/docs/DocsSystemExample.vue
index 98ad5ddbd6..73a9a922f6 100644
--- a/apps/docs/src/components/docs/DocsSystemExample.vue
+++ b/apps/docs/src/components/docs/DocsSystemExample.vue
@@ -163,15 +163,22 @@
   // One promoted frame per page. A second example asking to promote displaces
   // the first — it is dismissed and fully restored before this one takes over,
   // so the lift is only ever held by one instance.
-  function claim () {
-    if (owner === token) return
+  //
+  // Only the overlay tier lifts. A modal is meant to cover the page chrome; a
+  // dropdown is page content, so the frame stays inside AppMain's stacking
+  // context and the sticky app bar occludes the menu on scroll, exactly as it
+  // occludes the prose around the example.
+  function claim (tier: string) {
+    if (owner !== token) {
+      for (const [key, dismiss] of releases) {
+        if (key !== token) dismiss()
+      }
 
-    for (const [key, dismiss] of releases) {
-      if (key !== token) dismiss()
+      owner = token
     }
 
-    owner = token
-    raise(frame.value)
+    if (tier === 'overlay') raise(frame.value)
+    else lower()
   }
 
   releases.set(token, () => {
@@ -212,7 +219,7 @@
         // nothing reflows and the page keeps its scroll position.
         case 'v0:sandbox:overlay': {
           if (event.data.open) {
-            claim()
+            claim(event.data.tier)
             overlay.value = true
             shape(event.data.rects)
           } else {
@@ -224,8 +231,10 @@
           nextTick(place)
           break
         }
-        // A menu can resize under its own content while it stays open.
+        // A menu can resize under its own content while it stays open, and a
+        // dropdown opened inside a modal escalates float to overlay.
         case 'v0:sandbox:rects': {
+          claim(event.data.tier)
           shape(event.data.rects)
           break
         }
diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
index c515a7dc13..f4e4947403 100644
--- a/apps/docs/src/sandbox/SandboxRoot.vue
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -83,12 +83,19 @@
   // instead would reflow the docs around a transient piece of UI.
   //
   // Returns the regions the promoted frame is allowed to paint — the example's
-  // own box plus every surface that escapes it. The frame is opaque, so
-  // anything outside these gets clipped away and the docs page shows through.
-  function floats (el: HTMLElement): Rect[] {
+  // own box plus every surface that escapes it — and which tier that is:
+  //
+  //   overlay  a viewport-laid-out surface is up (a modal and its backdrop).
+  //            It is meant to cover everything, page chrome included.
+  //   float    only in-flow content spilled out (a dropdown menu). It belongs
+  //            to the page, so page chrome should occlude it the way a sticky
+  //            navbar occludes a Bulma menu.
+  function floats (el: HTMLElement): { tier: 'overlay' | 'float' | null, rects: Rect[] } {
     const box = el.getBoundingClientRect()
     const rects: Rect[] = []
 
+    let tier: 'overlay' | 'float' | null = null
+
     for (const node of el.querySelectorAll<HTMLElement>('*')) {
       if (!node.checkVisibility()) continue
 
@@ -107,10 +114,15 @@
         || rect.left < box.left - SLACK
         || rect.right > box.right + SLACK
 
-      if (escapes) rects.push(toRect(rect))
+      if (!escapes) continue
+
+      rects.push(toRect(rect))
+
+      if (position === 'fixed') tier = 'overlay'
+      else tier ??= 'float'
     }
 
-    return rects.length > 0 ? [toRect(box), ...rects] : []
+    return tier ? { tier, rects: [toRect(box), ...rects] } : { tier: null, rects: [] }
   }
 
   // Promotion is only ever entered from a state change the DOM reported —
@@ -127,12 +139,12 @@
 
     if (!el || pending) return
 
-    const rects = floats(el)
+    const { tier, rects } = floats(el)
 
-    if (rects.length === 0) growing = false
+    if (!tier) growing = false
     else if (hover && !open) growing = true
 
-    const overlay = rects.length > 0 && !growing
+    const overlay = !!tier && !growing
 
     if (overlay !== open) {
       open = overlay
@@ -140,7 +152,7 @@
 
       document.documentElement.toggleAttribute('data-overlay', overlay)
       pin()
-      send({ type: 'v0:sandbox:overlay', open: overlay, rects })
+      send({ type: 'v0:sandbox:overlay', open: overlay, tier, rects })
 
       // Never stay gated on a parent that went quiet: a stuck `pending` would
       // leave an invisible full-viewport frame swallowing the page.
@@ -155,7 +167,7 @@
     // collapse the placeholder the docs page is holding open in the flow. The
     // regions still have to keep up: a menu resizes under its own content.
     if (overlay) {
-      send({ type: 'v0:sandbox:rects', rects })
+      send({ type: 'v0:sandbox:rects', tier, rects })
 
       return
     }
@@ -164,7 +176,7 @@
     // — has to be made room for, or the frame clips it.
     let height = el.offsetHeight
 
-    for (const rect of floats(el).slice(1)) {
+    for (const rect of rects.slice(1)) {
       height = Math.max(height, Math.ceil(rect.top + rect.height) + PAD)
     }
 

From bca0ed302d5b2dd00416c03d0a043e394896fd52 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 13:55:38 -0500
Subject: [PATCH 10/18] =?UTF-8?q?docs(bulma):=20eliminate=20promotion=20fl?=
 =?UTF-8?q?ash=20=E2=80=94=20pin=20before=20measuring=20clip=20regions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Region rects were measured before pin() ran, so they described the
sandbox's frame-local layout and the parent clipped the promoted frame
to a box at the viewport corner — the visible flash, intermittent only
by how many frames it survived. Order is now pin, re-measure, post;
promotion is refused when no box rect is cached (falls back to growth).
The close path had the mirror bug (unpin before demote) — it now holds
the pin until the parent's demotion ack, with a 300ms safety. Verified
frame-granular: 1,300+ sampled promoted frames across both tiers and
themes at 1x and 4x CPU throttle, zero flashed or unclipped frames.
---
 apps/docs/src/sandbox/SandboxRoot.vue | 47 ++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
index f4e4947403..36e19bb81d 100644
--- a/apps/docs/src/sandbox/SandboxRoot.vue
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -139,26 +139,51 @@
 
     if (!el || pending) return
 
-    const { tier, rects } = floats(el)
+    const found = floats(el)
+    const tier = found.tier
 
     if (!tier) growing = false
     else if (hover && !open) growing = true
 
-    const overlay = !!tier && !growing
+    // Never ask to be promoted from an unpinned state: without a box to pin
+    // against, the content would land at the frame's corner the moment the
+    // frame becomes the viewport.
+    const overlay = !!tier && !growing && (open || !!box)
 
     if (overlay !== open) {
       open = overlay
       pending = overlay
 
       document.documentElement.toggleAttribute('data-overlay', overlay)
-      pin()
-      send({ type: 'v0:sandbox:overlay', open: overlay, tier, rects })
 
-      // Never stay gated on a parent that went quiet: a stuck `pending` would
-      // leave an invisible full-viewport frame swallowing the page.
-      if (overlay) setTimeout(() => {
-        pending = false
-      }, 300)
+      // Order matters in both directions, and it is not symmetric.
+      //
+      // Opening: pin BEFORE telling the parent, and re-read the regions AFTER
+      // pinning. The pin moves this root from the frame's own origin to page
+      // coordinates, and those numbers are what the parent clips the promoted
+      // frame to — send the pre-pin ones and the clip lands at the viewport
+      // corner for a frame or two, which is the flash.
+      //
+      // Closing: stay pinned. Unpinning here would put the content back at the
+      // frame's origin while the frame is still the viewport — the same flash
+      // mirrored. The parent's box message, posted once it has demoted the
+      // frame, is the ack that it is safe to let go.
+      if (overlay) {
+        pin()
+
+        send({ type: 'v0:sandbox:overlay', open: true, tier, rects: floats(el).rects })
+
+        // Never stay gated on a parent that went quiet: a stuck `pending` would
+        // leave an invisible full-viewport frame swallowing the page.
+        setTimeout(() => {
+          pending = false
+        }, 300)
+      } else {
+        send({ type: 'v0:sandbox:overlay', open: false, tier, rects: [] })
+
+        // …and never stay pinned on one either.
+        setTimeout(pin, 300)
+      }
 
       return
     }
@@ -167,7 +192,7 @@
     // collapse the placeholder the docs page is holding open in the flow. The
     // regions still have to keep up: a menu resizes under its own content.
     if (overlay) {
-      send({ type: 'v0:sandbox:rects', tier, rects })
+      send({ type: 'v0:sandbox:rects', tier, rects: found.rects })
 
       return
     }
@@ -176,7 +201,7 @@
     // — has to be made room for, or the frame clips it.
     let height = el.offsetHeight
 
-    for (const rect of rects.slice(1)) {
+    for (const rect of found.rects.slice(1)) {
       height = Math.max(height, Math.ceil(rect.top + rect.height) + PAD)
     }
 

From 576e49de34e31edc94d7412e23b0d59cf88d2477 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 14:37:08 -0500
Subject: [PATCH 11/18] docs(bulma): classify frame promotion by DOM predicate,
 not event heuristics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hover latch raced the observers — whichever signal classified a
reveal first won, so is-hoverable menus nondeterministically grew or
promoted. Classification is now a fact read fresh at measurement time:
viewport-laid-out surface → overlay; escaping content owned by an
is-active ancestor (component-set state only) → float; anything else,
including pure-CSS :hover reveals → grow. The pointer listener remains
solely as a change-detector (CSS reveals fire no observer); the
growing latch and hover-threading are deleted. Also fixes the growth
path reading the now-empty promotion rects instead of the escaping
surfaces.
---
 apps/docs/src/sandbox/SandboxRoot.vue | 73 ++++++++++++---------------
 1 file changed, 33 insertions(+), 40 deletions(-)

diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
index 36e19bb81d..a69496a6a4 100644
--- a/apps/docs/src/sandbox/SandboxRoot.vue
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -29,13 +29,9 @@
 
   // True between asking the parent to promote and the parent confirming it. The
   // frame is mid-flight then — measuring against it would read a box that is
-  // about to move, and a pointer-driven read could bounce the overlay back off.
+  // about to move.
   let pending = false
 
-  // True while a pointer-revealed surface is showing: the frame grows around it
-  // and never promotes, for as long as it stays open.
-  let growing = false
-
   // Where the inline frame sits in the docs viewport. The parent keeps this
   // fresh so a promotion can pin against it in the same tick it is detected.
   let box: { top: number, left: number, width: number } | null = null
@@ -78,21 +74,25 @@
     return { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
   }
 
-  // Floating content has to escape the frame, not stretch it: on a real page an
-  // open menu paints over whatever follows it, and growing the example box
-  // instead would reflow the docs around a transient piece of UI.
+  // Classification contract — a DOM fact, read fresh on every measurement, so
+  // the same layout always classifies the same way whichever observer noticed
+  // it. Nothing here consults events or prior state.
   //
-  // Returns the regions the promoted frame is allowed to paint — the example's
-  // own box plus every surface that escapes it — and which tier that is:
+  //   overlay  something is laid out against the viewport (a modal and its
+  //            backdrop). Meant to cover everything, page chrome included.
+  //   float    out-of-flow content spilled past the example's box AND is owned
+  //            by component state — Bulma marks that with `is-active`, which
+  //            only this package's JS sets. It belongs to the page, so page
+  //            chrome occludes it.
+  //   grow     everything else, including a pure-CSS `:hover` reveal
+  //            (`is-hoverable`), which carries no `is-active` anywhere. The
+  //            frame makes room for it instead of being promoted.
   //
-  //   overlay  a viewport-laid-out surface is up (a modal and its backdrop).
-  //            It is meant to cover everything, page chrome included.
-  //   float    only in-flow content spilled out (a dropdown menu). It belongs
-  //            to the page, so page chrome should occlude it the way a sticky
-  //            navbar occludes a Bulma menu.
-  function floats (el: HTMLElement): { tier: 'overlay' | 'float' | null, rects: Rect[] } {
+  // `escaping` is reported either way: promotion clips to it, growth sizes
+  // around it.
+  function floats (el: HTMLElement): { tier: 'overlay' | 'float' | null, rects: Rect[], escaping: Rect[] } {
     const box = el.getBoundingClientRect()
-    const rects: Rect[] = []
+    const escaping: Rect[] = []
 
     let tier: 'overlay' | 'float' | null = null
 
@@ -116,25 +116,20 @@
 
       if (!escapes) continue
 
-      rects.push(toRect(rect))
+      escaping.push(toRect(rect))
 
       if (position === 'fixed') tier = 'overlay'
-      else tier ??= 'float'
+      else if (node.closest('.is-active')) tier ??= 'float'
     }
 
-    return tier ? { tier, rects: [toRect(box), ...rects] } : { tier: null, rects: [] }
+    return {
+      tier,
+      rects: tier ? [toRect(box), ...escaping] : [],
+      escaping,
+    }
   }
 
-  // Promotion is only ever entered from a state change the DOM reported —
-  // never from pointer movement. Bulma's `is-hoverable` dropdown opens in pure
-  // CSS, and promoting on hover fights the pointer: the frame relayouts under
-  // the cursor mid-gesture and the page comes apart. Hover-revealed content
-  // grows the frame instead, which is what it did before promotion existed.
-  //
-  // The mode has to latch for the whole reveal. Growing the frame does not grow
-  // this root, so the surface still reads as escaping it, and the resize this
-  // very growth triggers would promote on the rebound.
-  function measure (hover = false) {
+  function measure () {
     const el = root.value
 
     if (!el || pending) return
@@ -142,13 +137,10 @@
     const found = floats(el)
     const tier = found.tier
 
-    if (!tier) growing = false
-    else if (hover && !open) growing = true
-
     // Never ask to be promoted from an unpinned state: without a box to pin
     // against, the content would land at the frame's corner the moment the
     // frame becomes the viewport.
-    const overlay = !!tier && !growing && (open || !!box)
+    const overlay = !!tier && (open || !!box)
 
     if (overlay !== open) {
       open = overlay
@@ -201,7 +193,7 @@
     // — has to be made room for, or the frame clips it.
     let height = el.offsetHeight
 
-    for (const rect of found.rects.slice(1)) {
+    for (const rect of found.escaping) {
       height = Math.max(height, Math.ceil(rect.top + rect.height) + PAD)
     }
 
@@ -215,11 +207,12 @@
   useMutationObserver(root, () => measure(), { attributes: true, subtree: true })
 
   // A CSS-only reveal (Bulma's `is-hoverable` dropdown) mutates nothing and
-  // resizes nothing, so pointer movement is the only signal that a menu opened.
-  // Deferred a frame: moving between the trigger and its menu fires pointerout
-  // before the pointer lands, and reading `:hover` mid-gap would close what the
-  // reader is reaching for.
-  useEventListener(root, ['pointerover', 'pointerout'], () => requestAnimationFrame(() => measure(true)))
+  // resizes nothing, so pointer movement is the only signal that it happened.
+  // Detection only — the classification above never asks how a measurement was
+  // triggered. Deferred a frame because moving from the trigger onto its menu
+  // fires pointerout before the pointer lands, and measuring mid-gap would size
+  // the frame around a menu that is about to still be there.
+  useEventListener(root, ['pointerover', 'pointerout'], () => requestAnimationFrame(() => measure()))
 
   useEventListener(window, 'message', (event: MessageEvent) => {
     if (event.source !== window.parent) return

From c9c091bf823451c91eb5d0a1baf4c553a2bdd307 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 18:12:08 -0500
Subject: [PATCH 12/18] =?UTF-8?q?feat(bulma):=20add=20BuNumberField=20?=
 =?UTF-8?q?=E2=80=94=20first=20Tier=202=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reuses Bulma's own markup — .field.has-addons > .control > button.button /
input.input — so the composite needs zero custom CSS; verified in-browser that
upstream's addon radii, flex, and is-expanded rules engage on it unchanged.
Ships the first SELF-AUTHORED fixture (Bulma documents no number input): its
header states the provenance and traces every class to another fixture block or
a bulma.css selector, so only the arrangement is ours and drift still fails.
Parts are BuNumberFieldDecrement / BuNumberFieldInput / BuNumberFieldIncrement,
each rendering its own structural .control.
---
 packages/bulma/SPEC.md                        |  20 ++
 packages/bulma/harness/CANON.md               |   2 +
 packages/bulma/harness/a11y.browser.test.ts   |  31 ++
 .../bulma/harness/fixtures/number-field.html  | 154 ++++++++
 .../BuNumberField.browser.test.ts             | 328 ++++++++++++++++++
 .../BuNumberField/BuNumberField.vue           | 211 +++++++++++
 .../src/components/BuNumberField/index.ts     |   3 +
 .../BuNumberFieldDecrement.vue                |  63 ++++
 .../BuNumberFieldDecrement/index.ts           |   3 +
 .../BuNumberFieldIncrement.vue                |  63 ++++
 .../BuNumberFieldIncrement/index.ts           |   3 +
 .../BuNumberFieldInput/BuNumberFieldInput.vue |  64 ++++
 .../components/BuNumberFieldInput/index.ts    |   3 +
 packages/bulma/src/components/index.ts        |   4 +
 14 files changed, 952 insertions(+)
 create mode 100644 packages/bulma/harness/fixtures/number-field.html
 create mode 100644 packages/bulma/src/components/BuNumberField/BuNumberField.browser.test.ts
 create mode 100644 packages/bulma/src/components/BuNumberField/BuNumberField.vue
 create mode 100644 packages/bulma/src/components/BuNumberField/index.ts
 create mode 100644 packages/bulma/src/components/BuNumberFieldDecrement/BuNumberFieldDecrement.vue
 create mode 100644 packages/bulma/src/components/BuNumberFieldDecrement/index.ts
 create mode 100644 packages/bulma/src/components/BuNumberFieldIncrement/BuNumberFieldIncrement.vue
 create mode 100644 packages/bulma/src/components/BuNumberFieldIncrement/index.ts
 create mode 100644 packages/bulma/src/components/BuNumberFieldInput/BuNumberFieldInput.vue
 create mode 100644 packages/bulma/src/components/BuNumberFieldInput/index.ts

diff --git a/packages/bulma/SPEC.md b/packages/bulma/SPEC.md
index e9935e7dfa..0d8888ad7d 100644
--- a/packages/bulma/SPEC.md
+++ b/packages/bulma/SPEC.md
@@ -89,6 +89,26 @@ markup against bulma.io's documented fixtures.
   root's control attrs win the merge — v0's `mergeProps` assigns even `undefined`
   keys, so a wrapper cannot force `readonly`; v0-core follow-up: InputControl should
   omit falsy keys). `plaintext` is class-only there.
+- **Ambient `NumberField.Root` owns the whole behavioral surface of
+  BuNumberField:** BuNumberField detects an ambient root on its namespace and
+  renders a plain `.field.has-addons` div instead of creating a second one (a
+  nested root would shadow the outer one for every part). Inside that ambient
+  root, `v-model`, `min`/`max`/`step`/`leap`/`wrap`/`clamp`, `locale`/`format`,
+  `wheel`/`spinDelay`/`spinRate`, `id`, `name`, `form`, `label`, `required`,
+  `disabled`, `readonly`, and all validation props passed to BuNumberField are
+  ignored — the root owns them. Only the presentational modifiers (`color`,
+  `size`, `rounded`, `addons`, and the part's `expanded`) still apply. Same
+  shape as the BuInput/BuTextarea limitation above.
+- **Sibling `BuLabel`/`BuHelp` need `namespace="v0:number-field:root"`:**
+  BuNumberField provides v0's number-field context, not `v0:input:root`, so a
+  BuLabel/BuHelp left on the default namespace injects nothing and renders
+  unwired — the same half-wired trap as BuInput, with a second namespace to get
+  wrong. The shapes are compatible (`InputError` uses only `errors`,
+  `fieldErrors.register`, and `errorId`; `BuLabel` uses only `id`, and all four
+  exist on `NumberFieldRootContext`), so pointing them at the number-field
+  namespace works. Compose validation fields as `<NumberFieldRoot renderless
+  v-model :rules>` wrapping `BuField`, with `namespace="v0:number-field:root"`
+  on the label and help.
 - **validateOn machinery is package-local** (`src/utilities/validate.ts`): v0's
   `parseValidateOn` is internal to `InputRoot.vue`. v0-core follow-up: export it from
   the Input barrel.
diff --git a/packages/bulma/harness/CANON.md b/packages/bulma/harness/CANON.md
index 43cad1dee0..addddc0b87 100644
--- a/packages/bulma/harness/CANON.md
+++ b/packages/bulma/harness/CANON.md
@@ -50,6 +50,8 @@
   | BuField | BuFieldLabel, BuFieldBody |
   | BuPanel | BuPanelHeading, BuPanelTabs, BuPanelTab, BuPanelBlock, BuPanelIcon |
 
+- **Tier 2 part naming (composites).** Tier 1 names a part after the Bulma part class it renders (`BuModalHead` → `.modal-card-head`). A Tier 2 composite has no upstream part names to borrow — `.control` / `.button` / `.input` are generic classes shared by every form component — so its parts are named **for their role, prefixed with the parent's full stem**, and the Bulma classes they render are recorded in the part's docblock instead. First application: `BuNumberFieldDecrement` / `BuNumberFieldInput` / `BuNumberFieldIncrement` (each rendering `.control` + its v0 part). The long form is deliberate: `BuNumber*` would break the full-stem prefix rule that `BuModalHead` / `BuPanelBlock` / `BuNavbarBrand` all follow, and 20 characters buys a rule with no exceptions.
+- **Structurally-mandatory wrappers belong to the part, in Tier 2 too.** `.field.has-addons` keys its corner radii off `.control:first-child` / `:last-child` (`bulma.css:6251-6270`), so each BuNumberField part renders its own `.control` rather than letting userland compose `BuControl` + a bare stepper and produce a group with broken radii. Same precedent as BuDropdownMenu rendering `.dropdown-content`. `BuControl` stays the tool for *arbitrary* addons on a `BuField has-addons` — that is userland composition, not this component.
 - Parts that need parent state **inject** it — never props drilled from userland. Two sources: a package context (`bulma:modal`, `bulma:message`, `bulma:dropdown`, `bulma:navbar`) where the Bu parent owns the state, or the v0 context the parent already provides (Dialog, Tabs, Selection/Single) where v0 owns it. Package-context injection is OPTIONAL (created with a `null` default) plus a `__DEV__` warn through `orphan()` in `src/utilities/context.ts`, so an orphan part still renders its Bulma markup instead of throwing — the BuHelp precedent. Pure-markup parts (BuModalBody/Foot, BuMessageBody, BuFieldLabel/Body, BuPanelHeading/Icon) inject nothing and warn about nothing.
 - A part that always ships with its sibling in the docs markup renders it: BuModalHead renders the `.delete` close, BuMessageHeader renders its `.delete`, BuNavbarBrand renders the `.navbar-burger`, BuDropdownMenu renders `.dropdown-content` inside `.dropdown-menu`.
 - **Slot → prop** where the slot only customized text and userland assembly buys nothing: BuPagination `previous`/`next`, BuFile `icon`. (`.pagination-previous`/`.pagination-next` are real part classes, but BuPagination generates a fixture-mandated DOM order from `pages`; hand-assembling its two mandatory anchors would only invite a wrong order.)
diff --git a/packages/bulma/harness/a11y.browser.test.ts b/packages/bulma/harness/a11y.browser.test.ts
index 5960f3dc23..0dde590787 100644
--- a/packages/bulma/harness/a11y.browser.test.ts
+++ b/packages/bulma/harness/a11y.browser.test.ts
@@ -29,6 +29,10 @@ import { BuNavbar } from '#bulma/components/BuNavbar'
 import { BuNavbarBrand } from '#bulma/components/BuNavbarBrand'
 import { BuNavbarMenu } from '#bulma/components/BuNavbarMenu'
 import { BuNotification } from '#bulma/components/BuNotification'
+import { BuNumberField } from '#bulma/components/BuNumberField'
+import { BuNumberFieldDecrement } from '#bulma/components/BuNumberFieldDecrement'
+import { BuNumberFieldIncrement } from '#bulma/components/BuNumberFieldIncrement'
+import { BuNumberFieldInput } from '#bulma/components/BuNumberFieldInput'
 import { BuPagination } from '#bulma/components/BuPagination'
 import { BuPanel } from '#bulma/components/BuPanel'
 import { BuPanelBlock } from '#bulma/components/BuPanelBlock'
@@ -269,6 +273,33 @@ const SWEEP: Record<string, Subject> = {
   BuNotification: {
     node: () => h(BuNotification, {}, () => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
   },
+  BuNumberField: {
+    // Mounted LABELLED: the spinbutton is a real <input>, so axe's `label` rule
+    // applies to it like any other input and a bare mount would fail on naming
+    // alone. Two rules that look like they should fire here do not, verified in
+    // axe-core 4.12.1's bundle:
+    // - `aria-required-attr` does not demand aria-valuenow on a null value —
+    //   it reads standards.ariaRoles.spinbutton, whose entry defines
+    //   allowedAttrs only. A second, legacy role table in the same bundle does
+    //   list required: ['aria-valuenow'], but the rule never reads it. Re-check
+    //   on an axe-core major bump: if that ever flips, an empty BuNumberField
+    //   becomes a critical violation and aria-valuenow would have to be emitted
+    //   for null upstream in v0.
+    // - `aria-input-field-name` does not apply — its matcher is
+    //   no-naming-method-matches, which excludes any element whose spec has
+    //   native naming methods, and <input> has one.
+    // tabindex="-1" on the steppers is the APG spinbutton pattern (keyboard
+    // access is via the input), not a violation; button-name is satisfied by
+    // v0's localized aria-label.
+    node: () => h(BuField, null, () => [
+      h(BuLabel, { for: 'a11y-quantity' }, () => 'Quantity'),
+      h(BuNumberField, { id: 'a11y-quantity', min: 0, max: 10 }, () => [
+        h(BuNumberFieldDecrement),
+        h(BuNumberFieldInput, { expanded: true }),
+        h(BuNumberFieldIncrement),
+      ]),
+    ]),
+  },
   BuPagination: {
     node: () => h(BuPagination, { pages: 86, modelValue: 46, visible: 7 }),
   },
diff --git a/packages/bulma/harness/fixtures/number-field.html b/packages/bulma/harness/fixtures/number-field.html
new file mode 100644
index 0000000000..0f46f8f67f
--- /dev/null
+++ b/packages/bulma/harness/fixtures/number-field.html
@@ -0,0 +1,154 @@
+<!--
+  Provenance: SELF-AUTHORED composite — composed from the Bulma has-addons
+  documentation. Bulma ships no number input, so there is no upstream page to
+  copy; this is the first fixture in the package that is not verbatim docs
+  markup.
+  Bulma version: 1.0.4
+
+  The harness's value is that it diffs against markup we did not author. For a
+  composite that guarantee is impossible, so the substitute is: every ATOM is
+  upstream-verified and only the ARRANGEMENT is ours — and the arrangement is
+  pinned the moment this file is written, so drift still fails loudly.
+
+  Per-class traceability (every class below is traced to another fixture block
+  or to a bulma.css selector; a class that cannot be traced does not go in):
+
+    .field.has-addons        form-general.html, "addons" block (verbatim docs
+                             markup, fetched 2026-08-01); bulma.css:6247
+    .control (one per item)  same block; bulma.css:6251-6270
+    .control.is-expanded     bulma.css:6300 (flex-grow / flex-shrink)
+    .button                  form-general.html, "addons" block (button.button
+                             is-info as the attached addon); bulma.css:3429
+                             styles .button[disabled]
+    .input                   form-input.html, "basic input" block
+    .input.is-{size}         form-input.html:30-33; .button.is-{size} at
+                             bulma.css:3825 / 3833 / 3837. Bulma has no
+                             .field.is-{size} — sizes are per element. NOT on
+                             .control: .control.is-{size} only sizes the
+                             is-loading spinner (form-input.html:54-74), which
+                             this component never renders.
+    .button.is-{color}       bulma.css:3607 (.button.is-link). Color lands on
+                             the steppers only — the .input color modifier
+                             paints the border and would fight is-danger.
+    .input.is-danger         form-general.html, "validation state" block
+    .is-rounded              bulma.css:5648 (.input.is-rounded), bulma.css:3863
+                             (.button.is-rounded)
+    disabled (attribute)     form-input.html, "state disabled" block;
+                             bulma.css:3429
+
+  Composition rationale:
+  - DOM order is decrement / input / increment because bulma.css:6251-6270 keys
+    the addon corner radii off .control:first-child, :last-child, and
+    :not(:first-child):not(:last-child). Any other order gives the group the
+    wrong radii.
+  - Every direct child of .field.has-addons is a .control: a bare button
+    sibling gets no radius treatment and visually breaks the group. That is why
+    the wrapper belongs to the part, not to userland.
+  - role=spinbutton and inputmode=decimal come from v0's NumberField.Control
+    and are what make the composite a number field rather than a text input
+    with two buttons; they are pinned here rather than tolerated additively.
+-->
+
+<!-- fixture: default -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button" type="button">&minus;</button>
+  </div>
+  <div class="control">
+    <input class="input" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button" type="button">+</button>
+  </div>
+</div>
+
+<!-- fixture: expanded (is-expanded on the input's control) -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button" type="button">&minus;</button>
+  </div>
+  <div class="control is-expanded">
+    <input class="input" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button" type="button">+</button>
+  </div>
+</div>
+
+<!-- fixture: size small -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button is-small" type="button">&minus;</button>
+  </div>
+  <div class="control">
+    <input class="input is-small" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button is-small" type="button">+</button>
+  </div>
+</div>
+
+<!-- fixture: size medium -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button is-medium" type="button">&minus;</button>
+  </div>
+  <div class="control">
+    <input class="input is-medium" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button is-medium" type="button">+</button>
+  </div>
+</div>
+
+<!-- fixture: size large -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button is-large" type="button">&minus;</button>
+  </div>
+  <div class="control">
+    <input class="input is-large" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button is-large" type="button">+</button>
+  </div>
+</div>
+
+<!-- fixture: color link (steppers only) -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button is-link" type="button">&minus;</button>
+  </div>
+  <div class="control">
+    <input class="input" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button is-link" type="button">+</button>
+  </div>
+</div>
+
+<!-- fixture: disabled (native attribute on all three) -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button" type="button" disabled>&minus;</button>
+  </div>
+  <div class="control">
+    <input class="input" type="text" inputmode="decimal" role="spinbutton" disabled />
+  </div>
+  <div class="control">
+    <button class="button" type="button" disabled>+</button>
+  </div>
+</div>
+
+<!-- fixture: invalid (is-danger on the input, driven by a failing rule) -->
+<div class="field has-addons">
+  <div class="control">
+    <button class="button" type="button">&minus;</button>
+  </div>
+  <div class="control">
+    <input class="input is-danger" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button" type="button">+</button>
+  </div>
+</div>
diff --git a/packages/bulma/src/components/BuNumberField/BuNumberField.browser.test.ts b/packages/bulma/src/components/BuNumberField/BuNumberField.browser.test.ts
new file mode 100644
index 0000000000..af1393fc0e
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberField/BuNumberField.browser.test.ts
@@ -0,0 +1,328 @@
+// Conformance: BuNumberField and its three parts against the SELF-AUTHORED
+// number-field fixture (Bulma ships no number input — see the fixture header
+// for the per-class provenance rule), plus the behavior v0's NumberField
+// supplies: stepping, bounds, keyboard, spin-on-hold, validation, and the
+// ambient-root branch.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+// Framework
+import { isNull, NumberFieldRoot } from '@vuetify/v0'
+
+// Context
+import BuNumberField from './BuNumberField.vue'
+
+// Utilities
+import { createApp, h, nextTick, shallowRef } from 'vue'
+
+import { conform } from '../../../harness/conform'
+import { BuField } from '../BuField'
+import { BuHelp } from '../BuHelp'
+import { BuLabel } from '../BuLabel'
+import { BuNumberFieldDecrement } from '../BuNumberFieldDecrement'
+import { BuNumberFieldIncrement } from '../BuNumberFieldIncrement'
+import { BuNumberFieldInput } from '../BuNumberFieldInput'
+
+// v0's NumberField.Control binds the display string plus the browser-hygiene
+// attrs the docs markup has no reason to carry. `value` is the same tolerance
+// BuInput/BuField already use; the other three are input hygiene, not Bulma
+// contract.
+const CONTROL = { ignoreAttrs: ['value', 'autocomplete', 'autocorrect', 'spellcheck'] }
+
+const NS = 'v0:number-field:root'
+
+const cleanups: (() => void)[] = []
+
+function mount (render: () => unknown): HTMLElement {
+  const host = document.createElement('div')
+  document.body.append(host)
+  const app = createApp({ render })
+  app.mount(host)
+  cleanups.push(() => {
+    app.unmount()
+    host.remove()
+  })
+  return host
+}
+
+/** The three parts in fixture order — decrement, input, increment. */
+function parts (props: Record<string, unknown> = {}) {
+  return [
+    h(BuNumberFieldDecrement),
+    h(BuNumberFieldInput, props),
+    h(BuNumberFieldIncrement),
+  ]
+}
+
+function press (el: Element) {
+  el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, button: 0 }))
+}
+
+/** v0 stops spin-on-hold from a document listener, so a drag-off still stops. */
+function release () {
+  document.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+}
+
+function key (el: Element, init: KeyboardEventInit) {
+  el.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }))
+}
+
+afterEach(() => {
+  release()
+  while (cleanups.length > 0) cleanups.pop()!()
+})
+
+describe('buNumberField', () => {
+  it('conforms to the default composite', () => {
+    const host = mount(() => h(BuNumberField, null, () => parts()))
+
+    conform(host.firstElementChild!, 'number-field:default', CONTROL)
+  })
+
+  it('conforms to the expanded fixture', () => {
+    const host = mount(() => h(BuNumberField, null, () => parts({ expanded: true })))
+
+    conform(host.firstElementChild!, 'number-field:expanded', CONTROL)
+  })
+
+  it.each(['small', 'medium', 'large'] as const)('conforms to the %s size fixture', size => {
+    const host = mount(() => h(BuNumberField, { size }, () => parts()))
+
+    conform(host.firstElementChild!, `number-field:size ${size}`, CONTROL)
+  })
+
+  it('conforms to the color fixture — steppers only', () => {
+    const host = mount(() => h(BuNumberField, { color: 'link' }, () => parts()))
+
+    conform(host.firstElementChild!, 'number-field:color link', CONTROL)
+  })
+
+  it('conforms to the disabled fixture', () => {
+    const host = mount(() => h(BuNumberField, { disabled: true }, () => parts()))
+
+    conform(host.firstElementChild!, 'number-field:disabled', CONTROL)
+  })
+
+  it('conforms to the invalid fixture when a rule fails', async () => {
+    const host = mount(() => h(BuNumberField, {
+      rules: [() => 'Required'],
+    }, () => parts()))
+
+    const input = host.querySelector('input')!
+    input.focus()
+    input.blur()
+
+    await vi.waitFor(() => expect(input.classList.contains('is-danger')).toBe(true))
+
+    conform(host.firstElementChild!, 'number-field:invalid', CONTROL)
+  })
+
+  it('should increment and decrement by step on pointerdown', async () => {
+    const model = shallowRef<number | null>(5)
+    const host = mount(() => h(BuNumberField, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: number | null) => {
+        model.value = value
+      },
+      'step': 2,
+    }, () => parts()))
+
+    const [decrement, increment] = [...host.querySelectorAll('button')]
+
+    press(increment)
+    release()
+    expect(model.value).toBe(7)
+
+    await nextTick()
+
+    press(decrement)
+    release()
+    expect(model.value).toBe(5)
+  })
+
+  it('should disable the stepper at each bound and refuse to cross it', async () => {
+    const model = shallowRef<number | null>(10)
+    const host = mount(() => h(BuNumberField, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: number | null) => {
+        model.value = value
+      },
+      'max': 10,
+      'min': 0,
+    }, () => parts()))
+
+    const [decrement, increment] = [...host.querySelectorAll('button')]
+
+    expect(increment.hasAttribute('disabled')).toBe(true)
+    expect(decrement.hasAttribute('disabled')).toBe(false)
+
+    press(increment)
+    release()
+    expect(model.value).toBe(10)
+
+    model.value = 0
+    await nextTick()
+
+    expect(decrement.hasAttribute('disabled')).toBe(true)
+
+    press(decrement)
+    release()
+    expect(model.value).toBe(0)
+  })
+
+  it('should step from the keyboard', async () => {
+    const model = shallowRef<number | null>(10)
+    const host = mount(() => h(BuNumberField, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: number | null) => {
+        model.value = value
+      },
+      'leap': 5,
+      'max': 100,
+      'min': 0,
+    }, () => parts()))
+
+    const input = host.querySelector('input')!
+
+    // The root reads its value from the bound prop, so each key needs a tick
+    // to see the previous one's write.
+    async function step (init: KeyboardEventInit, expected: number) {
+      key(input, init)
+      expect(model.value).toBe(expected)
+      await nextTick()
+    }
+
+    await step({ key: 'ArrowUp' }, 11)
+    await step({ key: 'ArrowDown' }, 10)
+    await step({ key: 'ArrowUp', shiftKey: true }, 20)
+    await step({ key: 'PageUp' }, 25)
+    await step({ key: 'PageDown' }, 20)
+    await step({ key: 'Home' }, 0)
+    await step({ key: 'End' }, 100)
+  })
+
+  it('should commit typed text on Enter', () => {
+    const model = shallowRef<number | null>(null)
+    const host = mount(() => h(BuNumberField, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: number | null) => {
+        model.value = value
+      },
+    }, () => parts()))
+
+    const input = host.querySelector('input')!
+    input.focus()
+    input.value = '42'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+
+    key(input, { key: 'Enter' })
+
+    expect(model.value).toBe(42)
+  })
+
+  it('should repeat while held and stop on a document pointerup', async () => {
+    const model = shallowRef<number | null>(0)
+    const host = mount(() => h(BuNumberField, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: number | null) => {
+        model.value = value
+      },
+      'spinDelay': 30,
+      'spinRate': 10,
+    }, () => parts()))
+
+    const increment = [...host.querySelectorAll('button')][1]
+
+    press(increment)
+
+    expect(model.value).toBe(1)
+
+    await vi.waitFor(() => expect(model.value!).toBeGreaterThan(2))
+
+    // Released off the button: only the document listener can see it.
+    release()
+
+    const settled = model.value
+    await new Promise(resolve => setTimeout(resolve, 60))
+
+    expect(model.value).toBe(settled)
+  })
+
+  it('should show the formatted value while blurred and the raw value while focused', async () => {
+    const host = mount(() => h(BuNumberField, {
+      format: { minimumFractionDigits: 2 },
+      modelValue: 5,
+    }, () => parts()))
+
+    const input = host.querySelector('input')!
+
+    await nextTick()
+    expect(input.value).toBe('5.00')
+
+    input.focus()
+    await nextTick()
+    expect(input.value).toBe('5')
+  })
+
+  it('should keep a readonly input focusable while the steppers stay inert', () => {
+    const model = shallowRef<number | null>(3)
+    const host = mount(() => h(BuNumberField, {
+      'modelValue': model.value,
+      'onUpdate:modelValue': (value: number | null) => {
+        model.value = value
+      },
+      'readonly': true,
+    }, () => parts()))
+
+    const input = host.querySelector('input')!
+    const [decrement, increment] = [...host.querySelectorAll('button')]
+
+    expect(input.hasAttribute('readonly')).toBe(true)
+    expect(input.hasAttribute('disabled')).toBe(false)
+    expect(increment.hasAttribute('disabled')).toBe(true)
+    expect(decrement.hasAttribute('disabled')).toBe(true)
+
+    input.focus()
+    expect(document.activeElement).toBe(input)
+
+    press(increment)
+    release()
+    expect(model.value).toBe(3)
+  })
+
+  it('should wire BuHelp and aria-errormessage through the ambient root namespace', async () => {
+    const host = mount(() => h(NumberFieldRoot, {
+      renderless: true,
+      rules: [(value: unknown) => !isNull(value) || 'Required'],
+    }, () => h(BuField, null, () => [
+      h(BuLabel, { namespace: NS }, () => 'Quantity'),
+      h(BuNumberField, null, () => parts({ expanded: true })),
+      h(BuHelp, { namespace: NS, validation: true }),
+    ])))
+
+    const input = host.querySelector('input')!
+    input.focus()
+    input.blur()
+
+    await vi.waitFor(() => expect(input.classList.contains('is-danger')).toBe(true))
+
+    const help = host.querySelector('p.help')!
+    expect(help.classList.contains('is-danger')).toBe(true)
+    expect(help.textContent).toContain('Required')
+    expect(input.getAttribute('aria-errormessage')).toBe(help.getAttribute('id'))
+  })
+
+  it('should not create a second root inside an ambient NumberField.Root', async () => {
+    const host = mount(() => h(NumberFieldRoot, {
+      id: 'ambient-quantity',
+      modelValue: 4,
+      renderless: true,
+    }, () => h(BuNumberField, null, () => parts())))
+
+    await nextTick()
+
+    expect(host.querySelectorAll('.field.has-addons')).toHaveLength(1)
+    expect(host.querySelectorAll('input')).toHaveLength(1)
+    expect(host.querySelector('input')!.id).toBe('ambient-quantity')
+    expect(host.querySelector('input')!.value).toBe('4')
+  })
+})
diff --git a/packages/bulma/src/components/BuNumberField/BuNumberField.vue b/packages/bulma/src/components/BuNumberField/BuNumberField.vue
new file mode 100644
index 0000000000..7fff01db31
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberField/BuNumberField.vue
@@ -0,0 +1,211 @@
+/**
+ * @module BuNumberField
+ *
+ * @remarks
+ * Bulma has no number input, so this is the first Tier 2 composite: it renders
+ * Bulma's own `.field.has-addons` markup — `.control > button.button` steppers
+ * around `.control > input.input` — and takes every behavior from v0's
+ * `NumberField`. Zero custom CSS.
+ *
+ * DOM order is load-bearing: `bulma.css:6251-6270` keys the addon corner radii
+ * off `.control:first-child` / `:last-child`, so each part renders its own
+ * `.control` wrapper and userland cannot compose a group with broken radii.
+ *
+ * `color` lands on the steppers only — Bulma's `.input` color modifier paints
+ * the border, which would fight the `is-danger` validation class.
+ *
+ * Inside an ambient `NumberField.Root` no second root is created and the
+ * ambient root owns the whole behavioral surface: `v-model`, bounds, and every
+ * validation prop passed here are ignored (see SPEC.md). Only the
+ * presentational modifiers still apply.
+ */
+
+<script lang="ts">
+  // Framework
+  import { createContext, NumberFieldRoot, useNumberFieldRoot } from '@vuetify/v0'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  // Types
+  import type { ID, NumberFieldRootContext, NumberFieldRootProps } from '@vuetify/v0'
+
+  export type BuNumberFieldColor = 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'
+  export type BuNumberFieldSize = 'small' | 'normal' | 'medium' | 'large'
+
+  export interface BuNumberFieldProps {
+    /** Alignment of the attached group: `has-addons-{centered|right}` */
+    addons?: 'centered' | 'right'
+    /** Id of the element labelling the spinbutton */
+    ariaLabelledby?: string
+    /** Whether `commit()` clamps to min/max (v0 default: true) */
+    clamp?: boolean
+    /** Color modifier on the steppers: `is-{color}` */
+    color?: BuNumberFieldColor
+    /** Disables the field and both steppers */
+    disabled?: boolean
+    /** Manual error state override — forces `is-danger` */
+    error?: boolean
+    /** Manual error messages — merged with rule-based errors */
+    errorMessages?: NumberFieldRootProps['errorMessages']
+    /** Associate with a form by id */
+    form?: string
+    /** Intl.NumberFormat options for the blurred display */
+    format?: Intl.NumberFormatOptions
+    /** Unique identifier (auto-generated when omitted) */
+    id?: ID
+    /** Accessible label */
+    label?: string
+    /** Large step for PageUp/PageDown */
+    leap?: number
+    /** BCP 47 locale tag (v0 default: en-US) */
+    locale?: string
+    /** Maximum value */
+    max?: number
+    /** Minimum value */
+    min?: number
+    /** Form field name */
+    name?: string
+    /** Namespace of the NumberField.Root context */
+    namespace?: string
+    /** Makes the input readonly and both steppers inert */
+    readonly?: boolean
+    /** Marks the field required */
+    required?: boolean
+    /** Rounded corners on the input and both steppers: `is-rounded` */
+    rounded?: boolean
+    /** Validation rules */
+    rules?: NumberFieldRootProps['rules']
+    /** Size modifier on the input and both steppers: `is-{size}` */
+    size?: BuNumberFieldSize
+    /** Delay in ms before spin-on-hold starts (v0 default: 400) */
+    spinDelay?: number
+    /** Interval in ms for repeated spin (v0 default: 60) */
+    spinRate?: number
+    /** Step increment for the steppers and Arrow keys */
+    step?: number
+    /** When to trigger validation (v0 default: blur) */
+    validateOn?: NumberFieldRootProps['validateOn']
+    /** Whether the mouse wheel adjusts the value while focused */
+    wheel?: boolean
+    /** Wrap around at the bounds */
+    wrap?: boolean
+  }
+
+  export interface BuNumberFieldContext {
+    /** Namespace of the NumberField.Root context the parts bind to. */
+    namespace: string
+    /** Color modifier for the steppers. */
+    color: () => BuNumberFieldColor | undefined
+    /** Size modifier for the input and steppers. */
+    size: () => BuNumberFieldSize | undefined
+    /** Whether the input and steppers render `is-rounded`. */
+    rounded: () => boolean
+  }
+
+  // Only the parent provides, so the provider stays module-local; parts import
+  // the hook.
+  const [useBuNumberField, provideBuNumberField] = createContext<BuNumberFieldContext | null>('bulma:number-field', null)
+
+  export { useBuNumberField }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNumberField' })
+
+  defineSlots<{
+    /** `.field.has-addons` children — the decrement, input, and increment parts. */
+    default: () => any
+  }>()
+
+  defineEmits<{
+    'update:model-value': [value: number | null]
+  }>()
+
+  const {
+    addons,
+    ariaLabelledby,
+    clamp,
+    color,
+    disabled = false,
+    error = false,
+    errorMessages,
+    form,
+    format,
+    id,
+    label,
+    leap,
+    locale,
+    max,
+    min,
+    name,
+    namespace = 'v0:number-field:root',
+    readonly = false,
+    required,
+    rounded = false,
+    rules,
+    size,
+    spinDelay,
+    spinRate,
+    step,
+    validateOn,
+    wheel,
+    wrap,
+  } = defineProps<BuNumberFieldProps>()
+
+  const model = defineModel<number | null>({ default: null })
+
+  // Optional injection: inside an ambient NumberField.Root the parts bind to it
+  // directly and no second root is created (a nested root would shadow it).
+  // A null default returns instead of throwing — only undefined throws.
+  const root = useNumberFieldRoot(namespace, null as unknown as NumberFieldRootContext) as NumberFieldRootContext | null
+
+  provideBuNumberField({
+    namespace,
+    color: () => color,
+    size: () => size,
+    rounded: () => rounded,
+  })
+
+  const classes = toRef(() => addons && `has-addons-${addons}`)
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-if="!root"
+    :id
+    v-model="model"
+    :aria-labelledby
+    as="div"
+    :clamp
+    class="field has-addons"
+    :class="classes"
+    :disabled
+    :error
+    :error-messages
+    :form
+    :format
+    :label
+    :leap
+    :locale
+    :max
+    :min
+    :name
+    :namespace
+    :readonly
+    :required
+    :rules
+    :spin-delay
+    :spin-rate
+    :step
+    :validate-on
+    :wheel
+    :wrap
+  >
+    <slot />
+  </NumberFieldRoot>
+
+  <div v-else class="field has-addons" :class="classes">
+    <slot />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuNumberField/index.ts b/packages/bulma/src/components/BuNumberField/index.ts
new file mode 100644
index 0000000000..50fe23e6ba
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberField/index.ts
@@ -0,0 +1,3 @@
+export type { BuNumberFieldColor, BuNumberFieldContext, BuNumberFieldProps, BuNumberFieldSize } from './BuNumberField.vue'
+
+export { default as BuNumberField } from './BuNumberField.vue'
diff --git a/packages/bulma/src/components/BuNumberFieldDecrement/BuNumberFieldDecrement.vue b/packages/bulma/src/components/BuNumberFieldDecrement/BuNumberFieldDecrement.vue
new file mode 100644
index 0000000000..4f0a0a59b7
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberFieldDecrement/BuNumberFieldDecrement.vue
@@ -0,0 +1,63 @@
+/**
+ * @module BuNumberFieldDecrement
+ *
+ * @remarks
+ * Bulma `.control > button.button` — the first `.control` of the addon group,
+ * which is what gives it the left corner radii (`bulma.css:6259-6263`). The
+ * wrapper is structural, so the part renders it rather than leaving userland
+ * free to compose a group with broken radii.
+ *
+ * The button is v0's `NumberField.Decrement`: `type="button"`, `tabindex="-1"`
+ * (APG spinbutton — keyboard access is via the input), a localized
+ * `aria-label`, spin-on-hold, and the native `disabled` attribute at the lower
+ * bound or when the field is disabled/readonly. The default slot content is
+ * the `−` glyph; override it for an icon.
+ */
+
+<script lang="ts">
+  // Framework
+  import { NumberFieldDecrement } from '@vuetify/v0'
+
+  // Utilities
+  import { orphan } from '../../utilities/context'
+  import { toRef } from 'vue'
+
+  // Context
+  import { useBuNumberField } from '../BuNumberField/BuNumberField.vue'
+
+  export interface BuNumberFieldDecrementProps {
+    /** Namespace of the NumberField.Root context (the parent's wins when nested) */
+    namespace?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNumberFieldDecrement' })
+
+  defineSlots<{
+    /** Button content — defaults to the `−` glyph. */
+    default?: () => any
+  }>()
+
+  const { namespace = 'v0:number-field:root' } = defineProps<BuNumberFieldDecrementProps>()
+
+  const field = useBuNumberField()
+
+  orphan('BuNumberFieldDecrement', 'BuNumberField', field)
+
+  const ns = field?.namespace ?? namespace
+
+  const classes = toRef(() => [
+    field?.color() && `is-${field.color()}`,
+    field?.size() && `is-${field.size()}`,
+    field?.rounded() && 'is-rounded',
+  ])
+</script>
+
+<template>
+  <div class="control">
+    <NumberFieldDecrement class="button" :class="classes" :namespace="ns">
+      <slot>&minus;</slot>
+    </NumberFieldDecrement>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuNumberFieldDecrement/index.ts b/packages/bulma/src/components/BuNumberFieldDecrement/index.ts
new file mode 100644
index 0000000000..74378d68b7
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberFieldDecrement/index.ts
@@ -0,0 +1,3 @@
+export type { BuNumberFieldDecrementProps } from './BuNumberFieldDecrement.vue'
+
+export { default as BuNumberFieldDecrement } from './BuNumberFieldDecrement.vue'
diff --git a/packages/bulma/src/components/BuNumberFieldIncrement/BuNumberFieldIncrement.vue b/packages/bulma/src/components/BuNumberFieldIncrement/BuNumberFieldIncrement.vue
new file mode 100644
index 0000000000..74d96f8530
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberFieldIncrement/BuNumberFieldIncrement.vue
@@ -0,0 +1,63 @@
+/**
+ * @module BuNumberFieldIncrement
+ *
+ * @remarks
+ * Bulma `.control > button.button` — the last `.control` of the addon group,
+ * which is what gives it the right corner radii (`bulma.css:6265-6269`). The
+ * wrapper is structural, so the part renders it rather than leaving userland
+ * free to compose a group with broken radii.
+ *
+ * The button is v0's `NumberField.Increment`: `type="button"`, `tabindex="-1"`
+ * (APG spinbutton — keyboard access is via the input), a localized
+ * `aria-label`, spin-on-hold, and the native `disabled` attribute at the upper
+ * bound or when the field is disabled/readonly. The default slot content is
+ * the `+` glyph; override it for an icon.
+ */
+
+<script lang="ts">
+  // Framework
+  import { NumberFieldIncrement } from '@vuetify/v0'
+
+  // Utilities
+  import { orphan } from '../../utilities/context'
+  import { toRef } from 'vue'
+
+  // Context
+  import { useBuNumberField } from '../BuNumberField/BuNumberField.vue'
+
+  export interface BuNumberFieldIncrementProps {
+    /** Namespace of the NumberField.Root context (the parent's wins when nested) */
+    namespace?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNumberFieldIncrement' })
+
+  defineSlots<{
+    /** Button content — defaults to the `+` glyph. */
+    default?: () => any
+  }>()
+
+  const { namespace = 'v0:number-field:root' } = defineProps<BuNumberFieldIncrementProps>()
+
+  const field = useBuNumberField()
+
+  orphan('BuNumberFieldIncrement', 'BuNumberField', field)
+
+  const ns = field?.namespace ?? namespace
+
+  const classes = toRef(() => [
+    field?.color() && `is-${field.color()}`,
+    field?.size() && `is-${field.size()}`,
+    field?.rounded() && 'is-rounded',
+  ])
+</script>
+
+<template>
+  <div class="control">
+    <NumberFieldIncrement class="button" :class="classes" :namespace="ns">
+      <slot>+</slot>
+    </NumberFieldIncrement>
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuNumberFieldIncrement/index.ts b/packages/bulma/src/components/BuNumberFieldIncrement/index.ts
new file mode 100644
index 0000000000..ad32237231
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberFieldIncrement/index.ts
@@ -0,0 +1,3 @@
+export type { BuNumberFieldIncrementProps } from './BuNumberFieldIncrement.vue'
+
+export { default as BuNumberFieldIncrement } from './BuNumberFieldIncrement.vue'
diff --git a/packages/bulma/src/components/BuNumberFieldInput/BuNumberFieldInput.vue b/packages/bulma/src/components/BuNumberFieldInput/BuNumberFieldInput.vue
new file mode 100644
index 0000000000..91c0c06767
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberFieldInput/BuNumberFieldInput.vue
@@ -0,0 +1,64 @@
+/**
+ * @module BuNumberFieldInput
+ *
+ * @remarks
+ * Bulma `.control > input.input` — the middle `.control` of the addon group,
+ * whose corners Bulma squares off (`bulma.css:6254-6257`). The wrapper is
+ * structural, so the part renders it; `expanded` puts `is-expanded` on it
+ * (`bulma.css:6300`) so the input eats the leftover width.
+ *
+ * The input is v0's `NumberField.Control`: `role="spinbutton"`,
+ * `inputmode="decimal"`, the full `aria-value*` set, keyboard stepping, the
+ * typing guard, and focus-dependent display. `is-danger` is component-owned
+ * and comes from v0's `isValid === false`, never from a prop.
+ */
+
+<script lang="ts">
+  // Framework
+  import { NumberFieldControl, useNumberFieldRoot } from '@vuetify/v0'
+
+  // Utilities
+  import { orphan } from '../../utilities/context'
+  import { toRef } from 'vue'
+
+  // Context
+  import { useBuNumberField } from '../BuNumberField/BuNumberField.vue'
+
+  export interface BuNumberFieldInputProps {
+    /** Fill the leftover width of the addon group: `is-expanded` on the control */
+    expanded?: boolean
+    /** Namespace of the NumberField.Root context (the parent's wins when nested) */
+    namespace?: string
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'BuNumberFieldInput' })
+
+  const {
+    expanded = false,
+    namespace = 'v0:number-field:root',
+  } = defineProps<BuNumberFieldInputProps>()
+
+  const field = useBuNumberField()
+
+  orphan('BuNumberFieldInput', 'BuNumberField', field)
+
+  const ns = field?.namespace ?? namespace
+
+  // Throws V0_CONTEXT_MISSING outside a NumberField.Root — the same contract
+  // every part backed by a v0 context inherits (BuPanelBlock, BuModalTitle).
+  const root = useNumberFieldRoot(ns)
+
+  const classes = toRef(() => [
+    field?.size() && `is-${field.size()}`,
+    field?.rounded() && 'is-rounded',
+    { 'is-danger': root.isValid.value === false },
+  ])
+</script>
+
+<template>
+  <div class="control" :class="{ 'is-expanded': expanded }">
+    <NumberFieldControl class="input" :class="classes" :namespace="ns" />
+  </div>
+</template>
diff --git a/packages/bulma/src/components/BuNumberFieldInput/index.ts b/packages/bulma/src/components/BuNumberFieldInput/index.ts
new file mode 100644
index 0000000000..75d31b9fc2
--- /dev/null
+++ b/packages/bulma/src/components/BuNumberFieldInput/index.ts
@@ -0,0 +1,3 @@
+export type { BuNumberFieldInputProps } from './BuNumberFieldInput.vue'
+
+export { default as BuNumberFieldInput } from './BuNumberFieldInput.vue'
diff --git a/packages/bulma/src/components/index.ts b/packages/bulma/src/components/index.ts
index e7a1d7cf71..02d17c7f89 100644
--- a/packages/bulma/src/components/index.ts
+++ b/packages/bulma/src/components/index.ts
@@ -27,6 +27,10 @@ export * from './BuNavbar'
 export * from './BuNavbarBrand'
 export * from './BuNavbarMenu'
 export * from './BuNotification'
+export * from './BuNumberField'
+export * from './BuNumberFieldDecrement'
+export * from './BuNumberFieldIncrement'
+export * from './BuNumberFieldInput'
 export * from './BuPagination'
 export * from './BuPanel'
 export * from './BuPanelBlock'

From 8476e84a65c1c8f2386a32e424de4722aa338ac4 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Tue, 4 Aug 2026 18:23:04 -0500
Subject: [PATCH 13/18] =?UTF-8?q?docs(bulma):=20add=20BuNumberField=20page?=
 =?UTF-8?q?=20=E2=80=94=20Tier=202=20docs=20precedent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First composite (gap-filler) page: no upstream bulma.io component page
exists, so 'The markup you know' becomes 'The markup it composes' — the
Bulma tab shows the self-authored fixture whose provenance traces every
class to an upstream fixture block or bulma.css selector, prose states
what conformance can and cannot claim for a composed contract, and the
upstream link targets the has-addons form docs the composition derives
from. Index Components table gains a 'None — composed' taxonomy row.
---
 .../systems/bulma/number-field/basic.vue      |  35 +++
 .../systems/bulma/number-field/formatted.vue  |  37 ++++
 .../systems/bulma/number-field/readonly.vue   |  29 +++
 .../systems/bulma/number-field/validated.vue  |  41 ++++
 apps/docs/src/pages/systems/bulma/index.md    |   4 +
 .../src/pages/systems/bulma/number-field.md   | 199 ++++++++++++++++++
 apps/docs/src/typed-router.d.ts               |  15 ++
 7 files changed, 360 insertions(+)
 create mode 100644 apps/docs/src/examples/systems/bulma/number-field/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/number-field/formatted.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/number-field/readonly.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/number-field/validated.vue
 create mode 100644 apps/docs/src/pages/systems/bulma/number-field.md

diff --git a/apps/docs/src/examples/systems/bulma/number-field/basic.vue b/apps/docs/src/examples/systems/bulma/number-field/basic.vue
new file mode 100644
index 0000000000..6680af3e06
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/number-field/basic.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import {
+    BuField,
+    BuHelp,
+    BuLabel,
+    BuNumberField,
+    BuNumberFieldDecrement,
+    BuNumberFieldIncrement,
+    BuNumberFieldInput,
+  } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const quantity = shallowRef<number | null>(1)
+</script>
+
+<template>
+  <BuField>
+    <BuLabel for="quantity">Quantity</BuLabel>
+
+    <BuNumberField
+      id="quantity"
+      v-model="quantity"
+      :max="10"
+      :min="0"
+      :step="1"
+    >
+      <BuNumberFieldDecrement />
+      <BuNumberFieldInput expanded />
+      <BuNumberFieldIncrement />
+    </BuNumberField>
+
+    <BuHelp>Value: {{ quantity }} — the steppers go inert at 0 and 10.</BuHelp>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/number-field/formatted.vue b/apps/docs/src/examples/systems/bulma/number-field/formatted.vue
new file mode 100644
index 0000000000..04f750f513
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/number-field/formatted.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import {
+    BuField,
+    BuHelp,
+    BuLabel,
+    BuNumberField,
+    BuNumberFieldDecrement,
+    BuNumberFieldIncrement,
+    BuNumberFieldInput,
+  } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const price = shallowRef<number | null>(9.5)
+</script>
+
+<template>
+  <BuField>
+    <BuLabel for="price">Price</BuLabel>
+
+    <BuNumberField
+      id="price"
+      v-model="price"
+      color="link"
+      :format="{ style: 'currency', currency: 'USD' }"
+      locale="en-US"
+      :min="0"
+      :step="0.5"
+    >
+      <BuNumberFieldDecrement />
+      <BuNumberFieldInput expanded />
+      <BuNumberFieldIncrement />
+    </BuNumberField>
+
+    <BuHelp>Focus the input to edit the raw number; blur it to see the currency.</BuHelp>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/number-field/readonly.vue b/apps/docs/src/examples/systems/bulma/number-field/readonly.vue
new file mode 100644
index 0000000000..32ed835abe
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/number-field/readonly.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import {
+    BuField,
+    BuHelp,
+    BuLabel,
+    BuNumberField,
+    BuNumberFieldDecrement,
+    BuNumberFieldIncrement,
+    BuNumberFieldInput,
+  } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const allocated = shallowRef<number | null>(3)
+</script>
+
+<template>
+  <BuField>
+    <BuLabel for="allocated">Allocated seats</BuLabel>
+
+    <BuNumberField id="allocated" v-model="allocated" readonly>
+      <BuNumberFieldDecrement />
+      <BuNumberFieldInput expanded />
+      <BuNumberFieldIncrement />
+    </BuNumberField>
+
+    <BuHelp>The value is selectable and the field still takes focus; the steppers do not.</BuHelp>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/number-field/validated.vue b/apps/docs/src/examples/systems/bulma/number-field/validated.vue
new file mode 100644
index 0000000000..ac01694022
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/number-field/validated.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import {
+    BuField,
+    BuHelp,
+    BuLabel,
+    BuNumberField,
+    BuNumberFieldDecrement,
+    BuNumberFieldIncrement,
+    BuNumberFieldInput,
+  } from '@paper/bulma'
+
+  import { isNumber, NumberFieldRoot } from '@vuetify/v0'
+
+  import { shallowRef } from 'vue'
+
+  const seats = shallowRef<number | null>(null)
+
+  const rules = [(value: unknown) => (isNumber(value) && value >= 2) || 'At least 2 seats']
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-model="seats"
+    label="Seats"
+    :min="0"
+    renderless
+    :rules
+  >
+    <BuField>
+      <BuLabel namespace="v0:number-field:root">Seats</BuLabel>
+
+      <BuNumberField>
+        <BuNumberFieldDecrement />
+        <BuNumberFieldInput expanded />
+        <BuNumberFieldIncrement />
+      </BuNumberField>
+
+      <BuHelp namespace="v0:number-field:root" validation />
+    </BuField>
+  </NumberFieldRoot>
+</template>
diff --git a/apps/docs/src/pages/systems/bulma/index.md b/apps/docs/src/pages/systems/bulma/index.md
index e38d575908..2247b8acd0 100644
--- a/apps/docs/src/pages/systems/bulma/index.md
+++ b/apps/docs/src/pages/systems/bulma/index.md
@@ -13,6 +13,7 @@ features:
 related:
   - /systems/bulma/modal
   - /systems/bulma/dropdown
+  - /systems/bulma/number-field
 ---
 
 # Bulma
@@ -95,5 +96,8 @@ Grouped by Bulma's own taxonomy. Each entry is the component you compose against
 | Components | BuBreadcrumb, [BuDropdown](/systems/bulma/dropdown), BuMenu, BuMessage, [BuModal](/systems/bulma/modal), BuNavbar, BuPagination, BuPanel, BuTabs |
 | Elements | BuNotification |
 | Form | BuCheckbox, BuControl, BuField, BuFile, BuHelp, BuInput, BuLabel, BuRadio, BuSelect, BuTextarea |
+| None — composed | [BuNumberField](/systems/bulma/number-field)[^composed] |
+
+[^composed]: Bulma documents no number input. BuNumberField composes one out of the form parts it does document — attached controls, buttons and an input — so its conformance fixture is self-authored rather than captured, and declares the upstream provenance of every class in it.
 
 [^dropdown-menu]: Both additions fix axe failures in the verbatim documentation markup — the docs' arbitrary-content dropdown promises `role="menu"` without menu items, and its delete button ships unlabeled.
diff --git a/apps/docs/src/pages/systems/bulma/number-field.md b/apps/docs/src/pages/systems/bulma/number-field.md
new file mode 100644
index 0000000000..4602ddd0e4
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/number-field.md
@@ -0,0 +1,199 @@
+---
+title: BuNumberField - Bulma Number Input for Vue
+meta:
+- name: description
+  content: A number field composed from Bulma's own has-addons markup — stepper buttons around an input — with Vuetify0 spinbutton behavior, bounds, formatting and validation.
+- name: keywords
+  content: bulma number field, vue number input, spinbutton, has-addons, stepper, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuNumberField'
+  level: 2
+  renderless: false
+  order: 3
+related:
+  - /systems/bulma
+  - /systems/bulma/dropdown
+  - /components/forms/number-field
+---
+
+# BuNumberField
+
+A number field Bulma never documented, built entirely from parts it did: stepper buttons attached to an input, with stepping, bounds, formatting and validation supplied by Vuetify0.
+
+<DocsPageFeatures :frontmatter />
+
+## Usage
+
+`v-model` holds the value — a number, or `null` while the field is empty. `min`, `max` and `step` bound it, and each stepper goes inert the moment the value reaches its bound. Compose the three parts in order: decrement, input, increment.
+
+Give the input the leftover width with `expanded`. Without it the input sizes to its content and the group collapses to the width of a short number.
+
+::: ds-example
+/systems/bulma/number-field/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import {
+    BuNumberField,
+    BuNumberFieldDecrement,
+    BuNumberFieldIncrement,
+    BuNumberFieldInput,
+  } from '@paper/bulma'
+</script>
+
+<template>
+  <BuNumberField>
+    <BuNumberFieldDecrement />
+
+    <BuNumberFieldInput />
+
+    <BuNumberFieldIncrement />
+  </BuNumberField>
+</template>
+```
+
+## The markup it composes
+
+Bulma ships no number input. There is no upstream component page to copy from, so this one is composed out of things Bulma does document: the [attached-controls layout](https://bulma.io/documentation/form/general/#form-addons) — `.field.has-addons` wrapping one `.control` per item — with `button.button` steppers on either side of an `input.input`. No class in it is invented, and the package ships no CSS.
+
+That changes what conformance can promise here, and the change is declared rather than glossed. Every other component in the package is diffed against markup captured verbatim from bulma.io. This one is diffed against a fixture the package authored itself, whose provenance header traces each class back to another fixture block or to a `bulma.css` selector — so every atom is upstream-verified and only the arrangement is ours. The arrangement is pinned the moment that fixture is written, so drift still fails the suite loudly. What the suite cannot claim is that upstream would have arranged the atoms the same way.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="field has-addons">
+  <div class="control">
+    <button class="button" type="button">&minus;</button>
+  </div>
+  <div class="control is-expanded">
+    <input class="input" type="text" inputmode="decimal" role="spinbutton" />
+  </div>
+  <div class="control">
+    <button class="button" type="button">+</button>
+  </div>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuNumberField v-model="quantity" :max="10" :min="0">
+    <BuNumberFieldDecrement />
+
+    <BuNumberFieldInput expanded />
+
+    <BuNumberFieldIncrement />
+  </BuNumberField>
+</template>
+```
+
+:::
+
+Each part renders its own `.control` wrapper rather than leaving it to you, because that wrapper is structural: Bulma keys the group's corner radii off the first and last `.control`, and squares off the ones between. A bare stepper dropped in as a sibling would get no radius treatment and visibly break the group, so the composition is not something userland has to get right.
+
+## Examples
+
+::: ds-example
+/systems/bulma/number-field/formatted
+
+### Formatted display
+
+`format` takes `Intl.NumberFormat` options and `locale` takes a BCP 47 tag, and together they decide what the field shows while it is not being edited. Focus the input and the raw number appears for typing; blur it and the formatted string comes back. The value in `v-model` is a plain number throughout — formatting is a display concern and never round-trips through the model.
+
+Reach for it whenever the number means something to a reader in a particular shape: currency, percentages, a fixed number of decimal places. Typing is unaffected, so a reader can enter `12.5` into a currency field and get `$12.50` back on blur without learning the format.
+
+`color` is worth noting here too. It lands on the steppers only, never on the input, because Bulma's `.input` color modifier paints the border — which is the same surface `is-danger` uses to signal a failing value. Leaving the input uncolored keeps the validation state legible no matter which color the field carries.
+:::
+
+::: ds-example
+/systems/bulma/number-field/validated
+
+### Validation and error text
+
+Rules and error text come from an ambient `NumberFieldRoot` rather than from props on `BuNumberField`, and that is deliberate rather than incidental. `BuLabel` and `BuHelp` resolve their wiring by injection — the label's `for`, the help text's id, the input's `aria-errormessage` — so all three need to see the same context. A `BuNumberField` that creates its own root scopes that context to its own subtree, where a sibling label and help cannot reach it.
+
+Wrapping the field in `<NumberFieldRoot renderless>` puts the context one level up, where every sibling can inject it. `BuNumberField` detects the ambient root and renders a plain `.field.has-addons` instead of creating a second one, so nothing is shadowed. The label and the help both need `namespace="v0:number-field:root"`: their default namespace is the plain input one, and a mismatched namespace injects nothing and renders unwired — no `for`, no error text, and no complaint at runtime.
+
+The failing state itself is component-owned. `BuNumberFieldInput` puts `is-danger` on the input when validation fails; there is no prop for it, and `error` on `BuNumberField` forces the state rather than styling it. Validation runs on blur by default — `validateOn` changes that.
+
+Inside an ambient root, that root owns the whole behavioral surface. `v-model`, the bounds, the format, the id and every validation prop belong to it, and the same props passed to `BuNumberField` are ignored. Only the presentational modifiers — `color`, `size`, `rounded`, `addons`, and the input's `expanded` — still apply.
+:::
+
+::: ds-example
+/systems/bulma/number-field/readonly
+
+### Readonly and disabled
+
+`readonly` and `disabled` are not two intensities of the same thing. A readonly field still takes focus and its value can be selected and copied; the steppers go inert, arrow keys do nothing, and the value cannot change. A disabled field is out of the tab order entirely, input included, and Bulma paints all three elements with its disabled treatment.
+
+Pick `readonly` for a value the reader should be able to see and copy but not change — a computed allocation, a quantity locked by a plan. Pick `disabled` when the whole control is inapplicable and there is nothing worth reading. The steppers carry the native `disabled` attribute in both cases, which is what makes them inert without any extra styling.
+:::
+
+## Props
+
+`BuNumberField` renders `.field.has-addons` and owns the value, the bounds and the modifiers. Everything else is a part.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `number \| null` | `null` | Field value; `null` while empty |
+| `addons` | `'centered' \| 'right'` | — | `has-addons-{value}` — alignment of the group |
+| `aria-labelledby` | `string` | — | Id of the element naming the spinbutton |
+| `clamp` | `boolean` | `true` | Clamp a committed value to `min`/`max` |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` on the steppers only |
+| `disabled` | `boolean` | `false` | Disables the input and both steppers |
+| `error` | `boolean` | `false` | Force the invalid state |
+| `error-messages` | `string \| string[]` | — | Manual errors, merged with rule errors |
+| `form` | `string` | — | Id of the form to associate with |
+| `format` | `Intl.NumberFormatOptions` | — | Display format while blurred |
+| `id` | `string \| number` | auto | Input id; generated when omitted |
+| `label` | `string` | — | Accessible name for the spinbutton |
+| `leap` | `number` | `step * 10` | PageUp / PageDown increment |
+| `locale` | `string` | `'en-US'` | BCP 47 tag used to format the display |
+| `max` | `number` | — | Upper bound |
+| `min` | `number` | — | Lower bound |
+| `name` | `string` | — | Form field name |
+| `namespace` | `string` | `'v0:number-field:root'` | Context namespace the parts bind to |
+| `readonly` | `boolean` | `false` | Input stays focusable; steppers inert |
+| `required` | `boolean` | — | Marks the field required |
+| `rounded` | `boolean` | `false` | `is-rounded` on the input and both steppers |
+| `rules` | `ValidationRule[]` | `[]` | Validation rules |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` on the input and both steppers |
+| `spin-delay` | `number` | `400` | Delay in ms before spin-on-hold starts |
+| `spin-rate` | `number` | `60` | Interval in ms between repeats while held |
+| `step` | `number` | `1` | Stepper and arrow-key increment |
+| `validate-on` | `ValidateOn` | `'blur'` | When validation runs |
+| `wheel` | `boolean` | `false` | Mouse wheel adjusts the value while focused |
+| `wrap` | `boolean` | `false` | Wrap around at the bounds |
+
+| Part | Renders | Notes |
+|------|---------|-------|
+| `BuNumberFieldDecrement` | `div.control` + `button.button` | First control — carries the group's left radii; slot content defaults to the minus glyph |
+| `BuNumberFieldInput` | `div.control` + `input.input` | Middle control — square corners; `expanded` adds `is-expanded`; owns `is-danger` |
+| `BuNumberFieldIncrement` | `div.control` + `button.button` | Last control — carries the group's right radii; slot content defaults to the plus glyph |
+
+Each part takes a `namespace` prop as an escape hatch, but the parent's namespace wins whenever they are composed inside a `BuNumberField`.
+
+## Accessibility
+
+The input is the widget. It carries `role="spinbutton"` and `inputmode="decimal"`, and the full `aria-value*` set follows the value: `aria-valuenow` and `aria-valuetext` while a value exists, plus `aria-valuemin` and `aria-valuemax` whenever the corresponding bound is finite. On an empty field `aria-valuenow` and `aria-valuetext` are omitted rather than faked — there is no number to report.
+
+The steppers are deliberately not focusable. Both carry `tabindex="-1"` and a localized `aria-label`, which is the ARIA Authoring Practices spinbutton pattern: keyboard users operate the field through the input, and the buttons exist for pointer input. That leaves one tab stop per field instead of three.
+
+| Key | Behavior |
+|-----|----------|
+| Up / Down | Step by `step` |
+| Shift + Up / Down | Step by `leap` |
+| PageUp / PageDown | Step by `leap` |
+| Home / End | Jump to `min` / `max` |
+| Enter | Commit the typed text |
+
+Holding a stepper repeats it — after `spin-delay`, at `spin-rate`. The release is caught on the document, so dragging off the button before letting go still stops the spin.
+
+> [!IMPORTANT]
+> Name the field. The spinbutton is a real `input`, so it needs an accessible name like any other: a sibling `BuLabel` pointed at its id, the `label` prop, or `aria-labelledby`. An unnamed field fails the axe `label` rule.
+
+> [!NOTE]
+> The steppers reach their bounds by way of the native `disabled` attribute, not `aria-disabled` — so a disabled stepper is inert to pointer and assistive technology alike, and Bulma's existing `[disabled]` styling applies with nothing added.
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index 7f3a166105..63aff9f94c 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -1172,6 +1172,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/systems/bulma/number-field': RouteRecordInfo<
+      '/systems/bulma/number-field',
+      '/systems/bulma/number-field',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
   }
 
   /**
@@ -2489,6 +2496,14 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'src/pages/systems/bulma/number-field.md': {
+      routes:
+        | '/systems/bulma/number-field'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
   }
 
   /**

From e492621bd69994aa6a907028e39bcb541194e960 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Thu, 6 Aug 2026 15:39:10 -0500
Subject: [PATCH 14/18] docs(bulma): first-paint theme + stable frame heights
 in example sandboxes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

White flash on dark theme: the sandbox HTML head now sets data-theme
from the query synchronously with critical background colors inline
(no dependence on CDN CSS or the app bundle), and the parent aligns
the iframe's color-scheme with the docs theme — a scheme mismatch
forces an opaque white canvas even before load.

Height jumps: measurements posted before the sandbox's ready handshake
(the empty-document size) are ignored; the placeholder reserves the
last-measured height per example from sessionStorage so warm loads
have zero shifts and cold loads settle once. The reserve yields to
every post-ready measurement in both directions, and each applied
measurement refreshes the cache.
---
 apps/docs/sandbox/bulma.html                  | 27 ++++++++
 .../src/components/docs/DocsSystemExample.vue | 62 +++++++++++++++++--
 apps/docs/src/sandbox/SandboxRoot.vue         | 26 ++++++--
 apps/docs/src/sandbox/bulma.ts                | 31 ++++++----
 4 files changed, 127 insertions(+), 19 deletions(-)

diff --git a/apps/docs/sandbox/bulma.html b/apps/docs/sandbox/bulma.html
index 922ac5b2cd..a834fc57fd 100644
--- a/apps/docs/sandbox/bulma.html
+++ b/apps/docs/sandbox/bulma.html
@@ -8,6 +8,33 @@
     <title>Bulma example</title>
     <link rel="icon" type="image/png" href="/0.png">
 
+    <script>
+      // Blocking, and first: an iframe composites an opaque canvas as soon as
+      // it is attached, so anything that decides the scheme later — the CDN
+      // stylesheet, the app bundle — decides it after the reader has already
+      // seen a white frame. This runs before either exists.
+      document.documentElement.dataset.theme =
+        new URLSearchParams(location.search).get('theme') === 'dark' ? 'dark' : 'light'
+    </script>
+
+    <style>
+      /* Bulma's own `--bulma-scheme-main` and `--bulma-text`, resolved and
+         inlined so the document paints the right surface while the CDN request
+         is still in flight. Zero specificity via `:where()`, so Bulma takes
+         these back the moment it lands and stays the source of truth. */
+      :where(html[data-theme="dark"]) {
+        background-color: #14161a;
+        color: #abb1bf;
+        color-scheme: dark;
+      }
+
+      :where(html[data-theme="light"]) {
+        background-color: #fff;
+        color: #404654;
+        color-scheme: light;
+      }
+    </style>
+
     <!--
       The user's own bulma.css is the styling source — @paper/bulma ships none.
       This document loads it (and Font Awesome, which Bulma's documented markup
diff --git a/apps/docs/src/components/docs/DocsSystemExample.vue b/apps/docs/src/components/docs/DocsSystemExample.vue
index 73a9a922f6..a601faf72b 100644
--- a/apps/docs/src/components/docs/DocsSystemExample.vue
+++ b/apps/docs/src/components/docs/DocsSystemExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   // Framework
-  import { IN_BROWSER, useEventListener, useTheme } from '@vuetify/v0'
+  import { createStorage, IN_BROWSER, useEventListener, useTheme } from '@vuetify/v0'
 
   // Composables
   import { useExamples } from '@/composables/useExamples'
@@ -10,6 +10,31 @@
 
   // Types
   import type { GnDocsExampleFile } from '@paper/genesis'
+  import type { StorageContext } from '@vuetify/v0'
+  import type { Ref } from 'vue'
+
+  // Frame padding (2 × 1.5rem) plus one Bulma control — the resting height of
+  // the shortest example that exists. A first-ever visit reserves this and grows
+  // once; reserving more would mean the box shrinking on arrival, which reads
+  // far worse than growing.
+  const RESERVE = 88
+
+  let store: StorageContext | null = null
+
+  // Where an example comes to rest is a property of the example, not of the
+  // visit — but it can only be learned by loading it once. Remembering it for
+  // the session means every load after the first reserves the right box and
+  // nothing moves. Session, not local: an example's height changes when its
+  // source does, and a stale reserve should not outlive the tab.
+  function reserve (entry: string): Ref<number> {
+    if (!IN_BROWSER) return shallowRef(RESERVE)
+
+    store ??= createStorage({ adapter: window.sessionStorage })
+
+    // Bucketed by width: the same example wraps differently across viewports,
+    // and a height learned at one width is not a promise at another.
+    return store.get(`sandbox:${entry}:${Math.round(window.innerWidth / 160)}`, RESERVE)
+  }
 
   // Page-level state. Every example on a page promotes into the same viewport
   // and lifts the same ancestor stacking contexts, so both have to be owned
@@ -91,6 +116,17 @@
   // buys a correct first paint; live changes ride the message channel below.
   const scheme = theme.isDark.value ? 'dark' : 'light'
 
+  // What the box looks like before the frame's document exists. A frame's
+  // canvas is opaque from the moment it is attached and the UA colors it from
+  // the embedder's `color-scheme`, so that is declared here rather than left to
+  // inherit whatever the docs root happens to carry. The matching background
+  // makes the gap before load read as the surface the example settles on
+  // instead of the page behind it. Bulma's own values, mirroring the critical
+  // style in `sandbox/bulma.html`.
+  const surface = toRef(() => (theme.isDark.value
+    ? { colorScheme: 'dark', backgroundColor: '#14161a' }
+    : { colorScheme: 'light', backgroundColor: '#fff' }))
+
   // `/systems/bulma/modal/basic` -> system `bulma`, example `modal/basic`
   const segments = toRef(() => entry.value.replace(/^\//, '').split('/'))
   const src = toRef(() => {
@@ -99,8 +135,17 @@
     return `/sandbox/${system}.html?e=${rest.join('/')}&theme=${scheme}`
   })
 
-  const height = shallowRef(200)
+  // Two different questions. `height` is what the box is right now and follows
+  // every measurement the sandbox sends, up or down. `saved` is what the
+  // example is worth reserving for next time, and only the first settled
+  // measurement answers that — everything after it is the reader interacting (a
+  // hover menu, a validation message), and reserving one of those would open
+  // the box too tall on the next load and shrink.
+  const saved = reserve(entry.value)
+  const height = shallowRef(saved.value)
   const overlay = shallowRef(false)
+
+  let rested = false
   const frame = useTemplateRef<HTMLIFrameElement>('frame')
 
   // An iframe paints an opaque canvas — a transparent document inside it does
@@ -207,6 +252,15 @@
         }
         case 'v0:sandbox:size': {
           height.value = event.data.height
+
+          // The example as it comes up, with nothing spilling out of it: that
+          // is the box worth reserving next time. Once taken, it is not
+          // revisited — later measurements are the reader, not the example.
+          if (!rested && !event.data.grown) {
+            rested = true
+            saved.value = event.data.height
+          }
+
           // The box the sandbox pins to is the one this height produces.
           nextTick(place)
           break
@@ -272,7 +326,7 @@
     :peek
     :title
   >
-    <div class="relative w-full" :style="{ height: `${height}px` }">
+    <div class="relative w-full rounded" :style="[surface, { height: `${height}px` }]">
       <iframe
         ref="frame"
         :class="overlay
@@ -280,7 +334,7 @@
           : 'absolute inset-0 h-full w-full rounded border-0'"
         loading="lazy"
         :src
-        :style="overlay && clip ? { clipPath: `path('${clip}')` } : undefined"
+        :style="[surface, overlay && clip ? { clipPath: `path('${clip}')` } : undefined]"
         :title="`${name} example`"
       />
     </div>
diff --git a/apps/docs/src/sandbox/SandboxRoot.vue b/apps/docs/src/sandbox/SandboxRoot.vue
index a69496a6a4..acc0dfbe82 100644
--- a/apps/docs/src/sandbox/SandboxRoot.vue
+++ b/apps/docs/src/sandbox/SandboxRoot.vue
@@ -27,6 +27,13 @@
   // parent has already been told.
   let open = false
 
+  // Observers attach before the first paint and fire on their own initial tick,
+  // so without this the first thing the parent hears is the height of a
+  // document that has rendered nothing — frame padding and no example — and it
+  // holds the box open at that until the real content arrives. Nothing is
+  // measurable until mount.
+  let ready = false
+
   // True between asking the parent to promote and the parent confirming it. The
   // frame is mid-flight then — measuring against it would read a box that is
   // about to move.
@@ -132,7 +139,7 @@
   function measure () {
     const el = root.value
 
-    if (!el || pending) return
+    if (!el || !ready || pending) return
 
     const found = floats(el)
     const tier = found.tier
@@ -197,7 +204,10 @@
       height = Math.max(height, Math.ceil(rect.top + rect.height) + PAD)
     }
 
-    send({ type: 'v0:sandbox:size', height })
+    // `grown` marks a height that only exists because something is spilling out
+    // of the box right now. The docs page still applies it — the frame has to
+    // make room — but it must not remember it as what this example rests at.
+    send({ type: 'v0:sandbox:size', height, grown: found.escaping.length > 0 })
   }
 
   useResizeObserver(root, () => measure())
@@ -244,8 +254,16 @@
   })
 
   // The frame loads lazily, so the theme carried on the URL can be stale by the
-  // time it does — ask the parent for the current one.
-  onMounted(() => send({ type: 'v0:sandbox:ready' }))
+  // time it does — ask the parent for the current one. The example is resolved
+  // before the app mounts, so this is also the first moment there is a real
+  // height to report: measure once here rather than wait for an observer, which
+  // would otherwise only fire again if the example happened to change size.
+  onMounted(() => {
+    ready = true
+
+    send({ type: 'v0:sandbox:ready' })
+    measure()
+  })
 </script>
 
 <template>
diff --git a/apps/docs/src/sandbox/bulma.ts b/apps/docs/src/sandbox/bulma.ts
index 5112e126bf..ab3019f4a7 100644
--- a/apps/docs/src/sandbox/bulma.ts
+++ b/apps/docs/src/sandbox/bulma.ts
@@ -10,7 +10,7 @@
 import SandboxRoot from './SandboxRoot.vue'
 
 // Utilities
-import { createApp, defineAsyncComponent } from 'vue'
+import { createApp } from 'vue'
 
 // Types
 import type { Component } from 'vue'
@@ -20,15 +20,24 @@ const examples = import.meta.glob('../examples/systems/bulma/**/*.vue')
 const query = new URLSearchParams(window.location.search)
 
 const name = query.get('e') ?? ''
-const load = examples[`../examples/systems/bulma/${name}.vue`] as (() => Promise<Component>) | undefined
-
-// Applied before mount so the frame never paints in the wrong scheme; the docs
-// page re-sends the current one on ready and on every theme change after that.
-if (query.get('theme') === 'dark') {
-  document.documentElement.dataset.theme = 'dark'
+const load = examples[`../examples/systems/bulma/${name}.vue`] as (() => Promise<{ default: Component }>) | undefined
+
+// The `theme` param is read by the blocking script in `sandbox/bulma.html`, not
+// here — by the time this module runs the frame has already painted once. The
+// docs page re-sends the current scheme on ready and on every change after that.
+
+// Resolved before mount, not deferred behind `defineAsyncComponent`: mounting
+// first would put the app on screen as an empty box for as long as the example
+// chunk takes to arrive, and the observers would measure that box and report a
+// height the docs page then holds its layout open at. There is nothing worth
+// showing in that window anyway — the frame has no spinner.
+async function start () {
+  const module = await load?.()
+
+  createApp(SandboxRoot, {
+    is: module?.default,
+    name,
+  }).mount('#sandbox')
 }
 
-createApp(SandboxRoot, {
-  is: load && defineAsyncComponent(load),
-  name,
-}).mount('#sandbox')
+start()

From cbf98d76009cccb50aeaba86ceedf8ddf203d69d Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 21 Aug 2026 16:09:50 -0500
Subject: [PATCH 15/18] docs(bulma): complete component pages and systems
 example chrome

Fill remaining Bu* pages (Composed on v0, Reference, examples).
Systems previews: light/dark only, shared code-group expand,
iframe first-paint pulse, no-resize landing example, glass-surface
safelist, AppNav hide transform without ltr:.
---
 apps/docs/build/markdown.ts                   |  13 +-
 apps/docs/src/components/app/AppBar.vue       |   2 +-
 apps/docs/src/components/app/AppNav.vue       |   2 +-
 .../src/components/docs/DocsCodeGroup.vue     |   4 +-
 .../components/docs/DocsExampleThemeMenu.vue  |  47 ++-
 .../components/docs/DocsGenesisExample.vue    |  18 +-
 apps/docs/src/components/docs/DocsMarkup.vue  |   6 +-
 .../src/components/docs/DocsSystemExample.vue |  82 ++++-
 .../src/composables/useCodeGroupExpand.ts     |  10 +
 apps/docs/src/composables/useThemeToggle.ts   |   2 +-
 .../systems/bulma/breadcrumb/basic.vue        |  14 +
 .../systems/bulma/breadcrumb/separators.vue   |  20 ++
 .../examples/systems/bulma/checkbox/basic.vue |  18 ++
 .../systems/bulma/checkbox/disabled.vue       |  11 +
 .../examples/systems/bulma/field/addons.vue   |  19 ++
 .../examples/systems/bulma/field/basic.vue    |  19 ++
 .../systems/bulma/field/horizontal.vue        |  36 +++
 .../src/examples/systems/bulma/file/basic.vue |   7 +
 .../examples/systems/bulma/file/filename.vue  |   9 +
 .../examples/systems/bulma/input/basic.vue    |  17 ++
 .../systems/bulma/input/validation.vue        |  25 ++
 .../src/examples/systems/bulma/menu/basic.vue |  29 ++
 .../examples/systems/bulma/menu/nested.vue    |  30 ++
 .../examples/systems/bulma/message/basic.vue  |  31 ++
 .../systems/bulma/message/body-only.vue       |  14 +
 .../examples/systems/bulma/navbar/basic.vue   |  49 +++
 .../examples/systems/bulma/navbar/color.vue   |  36 +++
 .../systems/bulma/notification/basic.vue      |  25 ++
 .../systems/bulma/notification/color.vue      |  25 ++
 .../src/examples/systems/bulma/overview.vue   | 283 ++++++++++++++++++
 .../systems/bulma/pagination/basic.vue        |  13 +
 .../systems/bulma/pagination/window.vue       |  13 +
 .../examples/systems/bulma/panel/basic.vue    |  33 ++
 .../src/examples/systems/bulma/panel/tabs.vue |  80 +++++
 .../examples/systems/bulma/radio/basic.vue    |  15 +
 .../examples/systems/bulma/radio/disabled.vue |  15 +
 .../examples/systems/bulma/select/basic.vue   |  20 ++
 .../systems/bulma/select/multiple.vue         |  30 ++
 .../src/examples/systems/bulma/tabs/basic.vue |  29 ++
 .../src/examples/systems/bulma/tabs/boxed.vue |  46 +++
 .../examples/systems/bulma/textarea/basic.vue |  17 ++
 .../examples/systems/bulma/textarea/fixed.vue |  21 ++
 .../src/pages/systems/bulma/breadcrumb.md     | 126 ++++++++
 apps/docs/src/pages/systems/bulma/checkbox.md | 140 +++++++++
 apps/docs/src/pages/systems/bulma/dropdown.md |  15 +-
 apps/docs/src/pages/systems/bulma/field.md    | 214 +++++++++++++
 apps/docs/src/pages/systems/bulma/file.md     | 162 ++++++++++
 apps/docs/src/pages/systems/bulma/index.md    |  32 +-
 apps/docs/src/pages/systems/bulma/input.md    | 147 +++++++++
 apps/docs/src/pages/systems/bulma/menu.md     | 141 +++++++++
 apps/docs/src/pages/systems/bulma/message.md  | 145 +++++++++
 apps/docs/src/pages/systems/bulma/modal.md    |  19 +-
 apps/docs/src/pages/systems/bulma/navbar.md   | 221 ++++++++++++++
 .../src/pages/systems/bulma/notification.md   | 120 ++++++++
 .../src/pages/systems/bulma/number-field.md   |  13 +-
 .../src/pages/systems/bulma/pagination.md     | 142 +++++++++
 apps/docs/src/pages/systems/bulma/panel.md    | 260 ++++++++++++++++
 apps/docs/src/pages/systems/bulma/radio.md    | 145 +++++++++
 apps/docs/src/pages/systems/bulma/select.md   | 146 +++++++++
 apps/docs/src/pages/systems/bulma/tabs.md     | 144 +++++++++
 apps/docs/src/pages/systems/bulma/textarea.md | 139 +++++++++
 apps/docs/src/typed-router.d.ts               | 240 +++++++++++++++
 apps/docs/tsconfig.examples.json              |   9 +-
 apps/docs/uno.config.ts                       |   7 +-
 64 files changed, 3912 insertions(+), 50 deletions(-)
 create mode 100644 apps/docs/src/composables/useCodeGroupExpand.ts
 create mode 100644 apps/docs/src/examples/systems/bulma/breadcrumb/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/breadcrumb/separators.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/checkbox/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/checkbox/disabled.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/field/addons.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/field/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/field/horizontal.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/file/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/file/filename.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/input/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/input/validation.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/menu/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/menu/nested.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/message/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/message/body-only.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/navbar/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/navbar/color.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/notification/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/notification/color.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/overview.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/pagination/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/pagination/window.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/panel/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/panel/tabs.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/radio/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/radio/disabled.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/select/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/select/multiple.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/tabs/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/tabs/boxed.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/textarea/basic.vue
 create mode 100644 apps/docs/src/examples/systems/bulma/textarea/fixed.vue
 create mode 100644 apps/docs/src/pages/systems/bulma/breadcrumb.md
 create mode 100644 apps/docs/src/pages/systems/bulma/checkbox.md
 create mode 100644 apps/docs/src/pages/systems/bulma/field.md
 create mode 100644 apps/docs/src/pages/systems/bulma/file.md
 create mode 100644 apps/docs/src/pages/systems/bulma/input.md
 create mode 100644 apps/docs/src/pages/systems/bulma/menu.md
 create mode 100644 apps/docs/src/pages/systems/bulma/message.md
 create mode 100644 apps/docs/src/pages/systems/bulma/navbar.md
 create mode 100644 apps/docs/src/pages/systems/bulma/notification.md
 create mode 100644 apps/docs/src/pages/systems/bulma/pagination.md
 create mode 100644 apps/docs/src/pages/systems/bulma/panel.md
 create mode 100644 apps/docs/src/pages/systems/bulma/radio.md
 create mode 100644 apps/docs/src/pages/systems/bulma/select.md
 create mode 100644 apps/docs/src/pages/systems/bulma/tabs.md
 create mode 100644 apps/docs/src/pages/systems/bulma/textarea.md

diff --git a/apps/docs/build/markdown.ts b/apps/docs/build/markdown.ts
index 2cc6f3a1d8..adfd0c02bb 100644
--- a/apps/docs/build/markdown.ts
+++ b/apps/docs/build/markdown.ts
@@ -80,6 +80,7 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
     const hasOrders = orders?.some(o => o !== undefined)
     const collapse = env._exampleCollapse
     const collapseAttr = collapse ? ' collapse' : ''
+    const noResizeAttr = env._exampleNoResize ? ' disable-resize' : ''
     const imports = env._exampleImports as Record<string, string>
     const importsAttr = Object.keys(imports).length > 0
       ? ` :imports="${JSON.stringify(imports).replace(/"/g, '\'')}"`
@@ -87,11 +88,11 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
     const exampleTag = env._exampleTag as string
 
     if (paths.length === 1) {
-      return `<${exampleTag} file-path="${paths[0]}"${collapseAttr}${importsAttr}>\n<template #description>\n`
+      return `<${exampleTag} file-path="${paths[0]}"${collapseAttr}${noResizeAttr}${importsAttr}>\n<template #description>\n`
     }
     const pathsJson = JSON.stringify(paths).replace(/"/g, '\'')
     const ordersAttr = hasOrders ? ` :file-orders="${JSON.stringify(orders)}"` : ''
-    return `<${exampleTag} :file-paths="${pathsJson}"${ordersAttr}${collapseAttr}${importsAttr}>\n<template #description>\n`
+    return `<${exampleTag} :file-paths="${pathsJson}"${ordersAttr}${collapseAttr}${noResizeAttr}${importsAttr}>\n<template #description>\n`
   }
 
   function renderExampleClose (env: Record<string, unknown>, fallbackTag: string): string {
@@ -100,6 +101,7 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
     const orders = env._exampleFileOrders as (number | undefined)[]
     const hasOrders = orders?.some(o => o !== undefined)
     const collapse = env._exampleCollapse
+    const noResize = env._exampleNoResize
     const imports = env._exampleImports as Record<string, string>
     const exampleTag = (env._exampleTag as string) || fallbackTag
 
@@ -111,8 +113,10 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
     delete env._exampleOpened
     delete env._examplePathPara
     delete env._exampleCollapse
+    delete env._exampleNoResize
 
     const collapseAttr = collapse ? ' collapse' : ''
+    const noResizeAttr = noResize ? ' disable-resize' : ''
     const importsAttr = Object.keys(imports).length > 0
       ? ` :imports="${JSON.stringify(imports).replace(/"/g, '\'')}"`
       : ''
@@ -120,12 +124,12 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
     if (wasOpened) return `</template>\n</${exampleTag}>\n`
 
     if (paths?.length === 1) {
-      return `<${exampleTag} file-path="${paths[0]}"${collapse ? collapseAttr : ' peek'}${importsAttr} />\n`
+      return `<${exampleTag} file-path="${paths[0]}"${collapse ? collapseAttr : ' peek'}${noResizeAttr}${importsAttr} />\n`
     }
     if (paths?.length > 1) {
       const pathsJson = JSON.stringify(paths).replace(/"/g, '\'')
       const ordersAttr = hasOrders ? ` :file-orders="${JSON.stringify(orders)}"` : ''
-      return `<${exampleTag} :file-paths="${pathsJson}"${ordersAttr}${collapseAttr}${importsAttr} />\n`
+      return `<${exampleTag} :file-paths="${pathsJson}"${ordersAttr}${collapseAttr}${noResizeAttr}${importsAttr} />\n`
     }
 
     return ''
@@ -142,6 +146,7 @@ export function applyMarkdownPlugins (md: MarkdownIt, highlighter: DocsHighlight
           env._exampleFileOrders = [] as (number | undefined)[]
           env._exampleImports = {} as Record<string, string>
           env._exampleCollapse = info.includes('collapse')
+          env._exampleNoResize = info.includes('no-resize')
           return ''
         }
 
diff --git a/apps/docs/src/components/app/AppBar.vue b/apps/docs/src/components/app/AppBar.vue
index d53de238c8..1656ce7714 100644
--- a/apps/docs/src/components/app/AppBar.vue
+++ b/apps/docs/src/components/app/AppBar.vue
@@ -40,7 +40,7 @@
 <template>
   <Atom
     :as
-    :class="['flex items-center justify-between h-[48px] fixed inset-x-0 top-[var(--app-banner-h,24px)] px-3 text-on-surface border-b border-solid border-divider z-1', settings.surface.value]"
+    :class="['flex items-center justify-between h-[48px] fixed inset-x-0 top-[var(--app-banner-h,24px)] px-3 text-on-surface border-b border-solid border-divider z-1', settings.showBgGlass.value ? 'bg-glass-surface' : 'bg-surface']"
     data-app-bar
   >
     <div class="flex items-center gap-2">
diff --git a/apps/docs/src/components/app/AppNav.vue b/apps/docs/src/components/app/AppNav.vue
index f3a088ed65..73a69b2757 100644
--- a/apps/docs/src/components/app/AppNav.vue
+++ b/apps/docs/src/components/app/AppNav.vue
@@ -150,7 +150,7 @@
     aria-label="Main navigation"
     as="nav"
     :class="[
-      'flex flex-col fixed w-[230px] top-0 md:top-[calc(48px+var(--app-banner-h,24px))] bottom-0 start-0 ltr:-translate-x-full rtl:translate-x-full md:ltr:translate-x-0 md:rtl:translate-x-0 border-e border-solid border-divider',
+      'flex flex-col fixed w-[230px] top-0 md:top-[calc(48px+var(--app-banner-h,24px))] bottom-0 start-0 -translate-x-full rtl:translate-x-full md:translate-x-0 border-e border-solid border-divider',
       settings.surface.value,
       navigation.isOpen.value && '!translate-x-0',
       !settings.prefersReducedMotion.value && 'transition-transform duration-200 ease-in-out',
diff --git a/apps/docs/src/components/docs/DocsCodeGroup.vue b/apps/docs/src/components/docs/DocsCodeGroup.vue
index 91252d24c2..a7834f4427 100644
--- a/apps/docs/src/components/docs/DocsCodeGroup.vue
+++ b/apps/docs/src/components/docs/DocsCodeGroup.vue
@@ -3,10 +3,11 @@
   import { createSingle, useProxyRegistry } from '@vuetify/v0'
 
   // Composables
+  import { provideCodeGroupExpand } from '@/composables/useCodeGroupExpand'
   import { useSettings, type PackageManager } from '@/composables/useSettings'
 
   // Utilities
-  import { cloneVNode, computed, toRef, toValue, useId, useSlots, type VNode, watch } from 'vue'
+  import { cloneVNode, computed, shallowRef, toRef, toValue, useId, useSlots, type VNode, watch } from 'vue'
 
   const props = defineProps<{
     noFilename?: boolean
@@ -17,6 +18,7 @@
   const slots = useSlots()
   const uid = useId()
   const settings = useSettings()
+  provideCodeGroupExpand(shallowRef(false))
 
   const single = createSingle({ mandatory: 'force', events: true })
   const proxy = useProxyRegistry(single)
diff --git a/apps/docs/src/components/docs/DocsExampleThemeMenu.vue b/apps/docs/src/components/docs/DocsExampleThemeMenu.vue
index 6442be2678..f1a473aa7a 100644
--- a/apps/docs/src/components/docs/DocsExampleThemeMenu.vue
+++ b/apps/docs/src/components/docs/DocsExampleThemeMenu.vue
@@ -6,28 +6,65 @@
   import { useThemeToggleController } from '@/composables/useThemeToggle'
 
   // Utilities
-  import { shallowRef, useId } from 'vue'
+  import { shallowRef, toRef, useId } from 'vue'
+
+  const { modesOnly = false } = defineProps<{
+    /** Light / dark only — no palettes, a11y themes, or custom themes. */
+    modesOnly?: boolean
+  }>()
 
   const toggle = useThemeToggleController()
+  const icon = toRef(() => (
+    modesOnly
+      ? (toggle.isDark.value ? 'theme-dark' : 'theme-light')
+      : toggle.icon.value
+  ))
+  const title = toRef(() => (
+    modesOnly
+      ? (toggle.isDark.value ? 'Switch to light' : 'Switch to dark')
+      : toggle.title.value
+  ))
 
   const uid = useId()
   const open = shallowRef(false)
+
+  const chip = 'bg-surface-tint text-on-surface-tint hover:bg-surface-tint pa-1 inline-flex rounded-none rounded-bl-[0.375rem] rounded-tr-[0.375rem] cursor-pointer'
+
+  function onFlip () {
+    toggle.setMode(toggle.isDark.value ? 'light' : 'dark')
+  }
 </script>
 
 <template>
-  <Popover.Root :id="uid" v-model="open">
+  <AppTooltip
+    v-if="modesOnly"
+    as="span"
+    class="mt-[8px] me-[8px] inline-flex"
+    position-area="bottom"
+    :text="title"
+  >
+    <Button.Root
+      :aria-label="title"
+      :class="chip"
+      @click="onFlip"
+    >
+      <AppIcon :icon />
+    </Button.Root>
+  </AppTooltip>
+
+  <Popover.Root v-else :id="uid" v-model="open">
     <AppTooltip
       as="span"
       class="mt-[8px] me-[8px] inline-flex"
       position-area="bottom"
-      :text="toggle.title.value"
+      :text="title"
     >
       <Popover.Activator
         aria-label="Example theme"
-        class="bg-surface-tint text-on-surface-tint hover:bg-surface-tint data-[state=open]:bg-surface-tint pa-1 inline-flex rounded-none rounded-bl-[0.375rem] rounded-tr-[0.375rem] cursor-pointer"
+        :class="[chip, 'data-[state=open]:bg-surface-tint']"
         :data-state="open ? 'open' : undefined"
       >
-        <AppIcon :icon="toggle.icon.value" />
+        <AppIcon :icon />
       </Popover.Activator>
     </AppTooltip>
 
diff --git a/apps/docs/src/components/docs/DocsGenesisExample.vue b/apps/docs/src/components/docs/DocsGenesisExample.vue
index 5cb2e0878a..1e368a7243 100644
--- a/apps/docs/src/components/docs/DocsGenesisExample.vue
+++ b/apps/docs/src/components/docs/DocsGenesisExample.vue
@@ -21,7 +21,7 @@
   } from '@/composables/usePlayground'
   import { useSettings } from '@/composables/useSettings'
   import { useSyncedRef } from '@/composables/useSyncedRef'
-  import { createThemeToggle, provideThemeToggle } from '@/composables/useThemeToggle'
+  import { createThemeToggle, provideThemeToggle, useThemeToggleContext } from '@/composables/useThemeToggle'
 
   // Utilities
   import { computed, onMounted, toRef } from 'vue'
@@ -55,16 +55,21 @@
     peek?: boolean
     /** Visible peek lines (default 6) */
     peekLines?: number
-    /** Force a named theme on the preview (`data-theme`); bypasses the example theme toggle (systems pages) */
+    /** Force a named theme on the preview (`data-theme`); hides the palette picker unless `modesOnly` */
     theme?: string
     /** Default palette while following the page. Omit to track the page palette. */
     palette?: Palette
+    /** Light / dark toggle only — used by design-system examples that own their palette */
+    modesOnly?: boolean
+    /** Skip the preview splitter */
+    disableResize?: boolean
   }
 
   const props = defineProps<DocsGenesisExampleProps>()
 
-  const example = createThemeToggle({ palette: props.palette })
-  provideThemeToggle(example)
+  const inherited = useThemeToggleContext()
+  const example = inherited ?? createThemeToggle({ palette: props.palette })
+  if (!inherited) provideThemeToggle(example)
 
   const examples = useExamples()
 
@@ -141,6 +146,7 @@
     :code="resolvedCode"
     :collapse
     data-tour="example"
+    :disable-resize
     :file-name
     :file-orders
     :files="resolvedFiles"
@@ -164,8 +170,8 @@
       <AppDotGrid :coverage="60" />
     </template>
 
-    <template v-if="!theme" #preview-actions>
-      <DocsExampleThemeMenu />
+    <template v-if="!theme || modesOnly" #preview-actions>
+      <DocsExampleThemeMenu :modes-only />
     </template>
 
     <template v-if="$slots.description" #description>
diff --git a/apps/docs/src/components/docs/DocsMarkup.vue b/apps/docs/src/components/docs/DocsMarkup.vue
index 0a04ff6226..cc2680bcef 100644
--- a/apps/docs/src/components/docs/DocsMarkup.vue
+++ b/apps/docs/src/components/docs/DocsMarkup.vue
@@ -3,12 +3,13 @@
   import { GnPeek } from '@paper/genesis'
 
   // Composables
+  import { useCodeGroupExpand } from '@/composables/useCodeGroupExpand'
   import { useSettings } from '@/composables/useSettings'
   import { useSyncedRef } from '@/composables/useSyncedRef'
 
   // Utilities
   import { decodeBase64 } from '@/utilities/decodeBase64'
-  import { ref, toRef } from 'vue'
+  import { shallowRef, toRef } from 'vue'
 
   const {
     code,
@@ -36,8 +37,7 @@
 
   const decodedCode = toRef(() => decodeBase64(code))
 
-  // Collapse state
-  const expanded = ref(false)
+  const expanded = useCodeGroupExpand() ?? shallowRef(false)
   const lineCount = toRef(() => decodedCode.value.split('\n').length)
   const shouldCollapse = toRef(() => collapse && lineCount.value > collapseLines)
   const collapsedHeight = toRef(() => `${collapseLines * 1.5 + 2.5}rem`)
diff --git a/apps/docs/src/components/docs/DocsSystemExample.vue b/apps/docs/src/components/docs/DocsSystemExample.vue
index efb579dc13..c36da1ceb6 100644
--- a/apps/docs/src/components/docs/DocsSystemExample.vue
+++ b/apps/docs/src/components/docs/DocsSystemExample.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
   // Framework
-  import { createStorage, IN_BROWSER, useEventListener, useTheme } from '@vuetify/v0'
+  import { createStorage, IN_BROWSER, useEventListener } from '@vuetify/v0'
 
   // Composables
   import { useExamples } from '@/composables/useExamples'
+  import { createThemeToggle, provideThemeToggle } from '@/composables/useThemeToggle'
 
   // Utilities
-  import { nextTick, onScopeDispose, shallowRef, toRef, useTemplateRef, watch } from 'vue'
+  import { nextTick, onMounted, onScopeDispose, shallowRef, toRef, useTemplateRef, watch } from 'vue'
 
   // Types
   import type { GnDocsExampleFile } from '@paper/genesis'
@@ -26,14 +27,17 @@
   // the session means every load after the first reserves the right box and
   // nothing moves. Session, not local: an example's height changes when its
   // source does, and a stale reserve should not outlive the tab.
-  function reserve (entry: string): Ref<number> {
-    if (!IN_BROWSER) return shallowRef(RESERVE)
+  function reserve (entry: string): { saved: Ref<number>, known: boolean } {
+    if (!IN_BROWSER) return { saved: shallowRef(RESERVE), known: false }
 
     store ??= createStorage({ adapter: window.sessionStorage })
 
     // Bucketed by width: the same example wraps differently across viewports,
     // and a height learned at one width is not a promise at another.
-    return store.get(`sandbox:${entry}:${Math.round(window.innerWidth / 160)}`, RESERVE)
+    const key = `sandbox:${entry}:${Math.round(window.innerWidth / 160)}`
+    const known = store.has(key)
+
+    return { saved: store.get(key, RESERVE), known }
   }
 
   // Page-level state. Every example on a page promotes into the same viewport
@@ -85,6 +89,8 @@
     collapse?: boolean
     /** Peek mode for single-file */
     peek?: boolean
+    /** Skip the preview splitter */
+    disableResize?: boolean
   }
 </script>
 
@@ -111,16 +117,17 @@
   const files = toRef<GnDocsExampleFile[] | undefined>(() => multi.value?.files)
   const name = toRef(() => `${entry.value.split('/').pop()}.vue`)
 
-  const theme = useTheme()
+  const local = createThemeToggle({ palette: 'vuetify0' })
+  provideThemeToggle(local)
 
   const segments = toRef(() => entry.value.replace(/^\//, '').split('/'))
   const framed = toRef(() => segments.value[1] !== 'emerald')
-  const inlineTheme = toRef(() => theme.isDark.value ? 'emerald-dark' : 'emerald-light')
+  const inlineTheme = toRef(() => local.isDark.value ? 'emerald-dark' : 'emerald-light')
 
   // Snapshot, not a binding: folding the theme into a reactive `src` would
   // reload the frame — dropping any open overlay — on every toggle. It only
   // buys a correct first paint; live changes ride the message channel below.
-  const scheme = theme.isDark.value ? 'dark' : 'light'
+  const scheme = local.isDark.value ? 'dark' : 'light'
 
   // What the box looks like before the frame's document exists. A frame's
   // canvas is opaque from the moment it is attached and the UA colors it from
@@ -129,7 +136,7 @@
   // makes the gap before load read as the surface the example settles on
   // instead of the page behind it. Bulma's own values, mirroring the critical
   // style in `sandbox/bulma.html`.
-  const surface = toRef(() => (theme.isDark.value
+  const surface = toRef(() => (local.isDark.value
     ? { colorScheme: 'dark', backgroundColor: '#14161a' }
     : { colorScheme: 'light', backgroundColor: '#fff' }))
 
@@ -146,9 +153,17 @@
   // measurement answers that — everything after it is the reader interacting (a
   // hover menu, a validation message), and reserving one of those would open
   // the box too tall on the next load and shrink.
-  const saved = reserve(entry.value)
+  const { saved, known } = reserve(entry.value)
   const height = shallowRef(saved.value)
   const overlay = shallowRef(false)
+  // Pulse only a first visit: a reserved session height already looks like
+  // the example, and a loader on it is a second flash. Set on mount so SSR
+  // and the hydrated tree agree (sessionStorage is client-only).
+  const pending = shallowRef(false)
+
+  onMounted(() => {
+    if (framed.value && !known) pending.value = true
+  })
 
   let rested = false
   const frame = useTemplateRef<HTMLIFrameElement>('frame')
@@ -178,7 +193,7 @@
   }
 
   function sync () {
-    post({ type: 'v0:sandbox:theme', dark: theme.isDark.value })
+    post({ type: 'v0:sandbox:theme', dark: local.isDark.value })
   }
 
   // The placeholder holds the inline box open whether or not the frame has been
@@ -241,7 +256,7 @@
     release()
   })
 
-  watch(() => theme.isDark.value, sync)
+  watch(() => local.isDark.value, sync)
 
   if (IN_BROWSER && framed.value) {
     useEventListener(window, 'message', (event: MessageEvent) => {
@@ -251,6 +266,7 @@
         // Sent on mount. The frame is lazy, so it can come up long after the
         // reader last touched the theme toggle.
         case 'v0:sandbox:ready': {
+          pending.value = false
           sync()
           place()
           break
@@ -325,9 +341,11 @@
     v-if="!framed"
     :id
     :collapse
+    :disable-resize
     :file-orders
     :file-path
     :file-paths
+    modes-only
     :peek
     :theme="inlineTheme"
     :title
@@ -342,23 +360,35 @@
     :id
     :code
     :collapse
+    :disable-resize
     :file="name"
     :file-orders
     :files
+    modes-only
     :peek
     :title
   >
-    <div class="relative w-full rounded" :style="[surface, { height: `${height}px` }]">
+    <div
+      :aria-busy="pending || undefined"
+      class="relative w-full overflow-hidden rounded-2xl"
+      :style="[surface, { height: `${height}px` }]"
+    >
       <iframe
         ref="frame"
         :class="overlay
           ? 'fixed inset-0 z-[9999] h-full w-full border-0'
-          : 'absolute inset-0 h-full w-full rounded border-0'"
+          : 'absolute inset-0 h-full w-full rounded-2xl border-0'"
         loading="lazy"
         :src
         :style="[surface, overlay && clip ? { clipPath: `path('${clip}')` } : undefined]"
         :title="`${name} example`"
       />
+
+      <div
+        v-if="pending"
+        aria-hidden="true"
+        class="docs-sandbox-pulse"
+      />
     </div>
 
     <template v-if="$slots.description" #description>
@@ -366,3 +396,27 @@
     </template>
   </DocsGenesisExample>
 </template>
+
+<style scoped>
+  /* Animate background, never opacity/filter/transform: those create a
+     stacking context that kills `backdrop-filter` on the fixed app bar
+     (same `.app-shell-content` context). */
+  .docs-sandbox-pulse {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: color-mix(in srgb, CanvasText 6%, transparent);
+    animation: docs-sandbox-pulse 1.1s ease-in-out infinite;
+  }
+
+  @keyframes docs-sandbox-pulse {
+    50% { background: color-mix(in srgb, CanvasText 14%, transparent); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .docs-sandbox-pulse {
+      animation: none;
+    }
+  }
+</style>
diff --git a/apps/docs/src/composables/useCodeGroupExpand.ts b/apps/docs/src/composables/useCodeGroupExpand.ts
new file mode 100644
index 0000000000..45f61b992a
--- /dev/null
+++ b/apps/docs/src/composables/useCodeGroupExpand.ts
@@ -0,0 +1,10 @@
+// Framework
+import { createContext } from '@vuetify/v0'
+
+// Types
+import type { ShallowRef } from 'vue'
+
+export const [useCodeGroupExpand, provideCodeGroupExpand] = createContext<ShallowRef<boolean> | null>(
+  'docs:code-group-expand',
+  null,
+)
diff --git a/apps/docs/src/composables/useThemeToggle.ts b/apps/docs/src/composables/useThemeToggle.ts
index ad26613612..4e90b2717a 100644
--- a/apps/docs/src/composables/useThemeToggle.ts
+++ b/apps/docs/src/composables/useThemeToggle.ts
@@ -135,7 +135,7 @@ const [useThemeToggleContext, provideThemeToggle] = createContext<ThemeToggleCon
   null,
 )
 
-export { provideThemeToggle }
+export { provideThemeToggle, useThemeToggleContext }
 
 export function useThemeToggleController (): ThemeToggleContext {
   return useThemeToggleContext() ?? useThemeToggle()
diff --git a/apps/docs/src/examples/systems/bulma/breadcrumb/basic.vue b/apps/docs/src/examples/systems/bulma/breadcrumb/basic.vue
new file mode 100644
index 0000000000..362bb2adec
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/breadcrumb/basic.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { BuBreadcrumb } from '@paper/bulma'
+
+  const items = [
+    { text: 'Bulma', href: '#' },
+    { text: 'Documentation', href: '#' },
+    { text: 'Components', href: '#' },
+    { text: 'Breadcrumb', href: '#' },
+  ]
+</script>
+
+<template>
+  <BuBreadcrumb :items />
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/breadcrumb/separators.vue b/apps/docs/src/examples/systems/bulma/breadcrumb/separators.vue
new file mode 100644
index 0000000000..c74296d786
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/breadcrumb/separators.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { BuBreadcrumb } from '@paper/bulma'
+
+  const items = [
+    { text: 'Bulma', href: '#' },
+    { text: 'Documentation', href: '#' },
+    { text: 'Components', href: '#' },
+    { text: 'Breadcrumb', href: '#' },
+  ]
+</script>
+
+<template>
+  <p class="is-size-7 has-text-grey mb-2">arrow</p>
+
+  <BuBreadcrumb class="mb-5" :items separator="arrow" />
+
+  <p class="is-size-7 has-text-grey mb-2">bullet</p>
+
+  <BuBreadcrumb :items separator="bullet" />
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/checkbox/basic.vue b/apps/docs/src/examples/systems/bulma/checkbox/basic.vue
new file mode 100644
index 0000000000..1b617ed3ae
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/checkbox/basic.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { BuCheckbox } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const remember = shallowRef(false)
+  const agree = shallowRef(false)
+</script>
+
+<template>
+  <div class="checkboxes">
+    <BuCheckbox v-model="remember">Remember me</BuCheckbox>
+
+    <BuCheckbox v-model="agree">
+      I agree to the <a href="#">terms and conditions</a>
+    </BuCheckbox>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/checkbox/disabled.vue b/apps/docs/src/examples/systems/bulma/checkbox/disabled.vue
new file mode 100644
index 0000000000..3bc1cb1288
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/checkbox/disabled.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+  import { BuCheckbox } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const save = shallowRef(false)
+</script>
+
+<template>
+  <BuCheckbox v-model="save" disabled>Save my preferences</BuCheckbox>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/field/addons.vue b/apps/docs/src/examples/systems/bulma/field/addons.vue
new file mode 100644
index 0000000000..bc25bf96b0
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/field/addons.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuInput } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const query = shallowRef('')
+</script>
+
+<template>
+  <BuField addons>
+    <BuControl>
+      <BuInput v-model="query" placeholder="Find a repository" />
+    </BuControl>
+
+    <BuControl>
+      <button class="button is-info" type="button">Search</button>
+    </BuControl>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/field/basic.vue b/apps/docs/src/examples/systems/bulma/field/basic.vue
new file mode 100644
index 0000000000..0bb7e80da1
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/field/basic.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuHelp, BuInput, BuLabel } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('')
+</script>
+
+<template>
+  <BuField>
+    <BuLabel>Label</BuLabel>
+
+    <BuControl>
+      <BuInput v-model="name" placeholder="Text input" />
+    </BuControl>
+
+    <BuHelp>This is a help text</BuHelp>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/field/horizontal.vue b/apps/docs/src/examples/systems/bulma/field/horizontal.vue
new file mode 100644
index 0000000000..b5baeff2a8
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/field/horizontal.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import {
+    BuControl,
+    BuField,
+    BuFieldBody,
+    BuFieldLabel,
+    BuHelp,
+    BuInput,
+    BuLabel,
+  } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const subject = shallowRef('')
+</script>
+
+<template>
+  <BuField horizontal>
+    <BuFieldLabel size="normal">
+      <BuLabel>Subject</BuLabel>
+    </BuFieldLabel>
+
+    <BuFieldBody>
+      <BuField>
+        <BuControl>
+          <BuInput
+            v-model="subject"
+            placeholder="e.g. Partnership opportunity"
+          />
+        </BuControl>
+
+        <BuHelp color="danger">This field is required</BuHelp>
+      </BuField>
+    </BuFieldBody>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/file/basic.vue b/apps/docs/src/examples/systems/bulma/file/basic.vue
new file mode 100644
index 0000000000..bbf6d548b4
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/file/basic.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+  import { BuFile } from '@paper/bulma'
+</script>
+
+<template>
+  <BuFile name="resume">Choose a file…</BuFile>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/file/filename.vue b/apps/docs/src/examples/systems/bulma/file/filename.vue
new file mode 100644
index 0000000000..9ff9cf9cf9
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/file/filename.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+  import { BuFile } from '@paper/bulma'
+</script>
+
+<template>
+  <BuFile filename icon="fas fa-upload" name="resume">
+    Choose a file…
+  </BuFile>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/input/basic.vue b/apps/docs/src/examples/systems/bulma/input/basic.vue
new file mode 100644
index 0000000000..d054ff4558
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/input/basic.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuInput, BuLabel } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const name = shallowRef('')
+</script>
+
+<template>
+  <BuField>
+    <BuLabel>Name</BuLabel>
+
+    <BuControl>
+      <BuInput v-model="name" placeholder="Text input" />
+    </BuControl>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/input/validation.vue b/apps/docs/src/examples/systems/bulma/input/validation.vue
new file mode 100644
index 0000000000..c515f7a1dc
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/input/validation.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuHelp, BuInput, BuLabel } from '@paper/bulma'
+
+  import { InputRoot, isString } from '@vuetify/v0'
+
+  import { shallowRef } from 'vue'
+
+  const email = shallowRef('')
+
+  const rules = [(value: unknown) => (isString(value) && /.+@.+\..+/.test(value)) || 'This email is invalid']
+</script>
+
+<template>
+  <InputRoot v-model="email" renderless :rules>
+    <BuField>
+      <BuLabel namespace="v0:input:root">Email</BuLabel>
+
+      <BuControl>
+        <BuInput placeholder="Email input" />
+      </BuControl>
+
+      <BuHelp namespace="v0:input:root" validation />
+    </BuField>
+  </InputRoot>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/menu/basic.vue b/apps/docs/src/examples/systems/bulma/menu/basic.vue
new file mode 100644
index 0000000000..fd4f134236
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/menu/basic.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { BuMenu } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const active = shallowRef('Dashboard')
+
+  const items = [
+    {
+      label: 'General',
+      items: [
+        { label: 'Dashboard' },
+        { label: 'Customers' },
+      ],
+    },
+    {
+      label: 'Transactions',
+      items: [
+        { label: 'Payments' },
+        { label: 'Transfers' },
+        { label: 'Balance' },
+      ],
+    },
+  ]
+</script>
+
+<template>
+  <BuMenu v-model="active" :items />
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/menu/nested.vue b/apps/docs/src/examples/systems/bulma/menu/nested.vue
new file mode 100644
index 0000000000..6d5786ca7d
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/menu/nested.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { BuMenu } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const active = shallowRef('Manage Your Team')
+
+  const items = [
+    {
+      label: 'Administration',
+      items: [
+        { label: 'Team Settings' },
+        {
+          label: 'Manage Your Team',
+          children: [
+            { label: 'Members' },
+            { label: 'Plugins' },
+            { label: 'Add a member' },
+          ],
+        },
+        { label: 'Invitations' },
+        { label: 'Authentication' },
+      ],
+    },
+  ]
+</script>
+
+<template>
+  <BuMenu v-model="active" :items />
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/message/basic.vue b/apps/docs/src/examples/systems/bulma/message/basic.vue
new file mode 100644
index 0000000000..28533ba25b
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/message/basic.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { BuMessage, BuMessageBody, BuMessageHeader } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(true)
+</script>
+
+<template>
+  <button
+    v-if="!open"
+    class="button"
+    type="button"
+    @click="open = true"
+  >
+    Show message
+  </button>
+
+  <BuMessage v-model="open">
+    <BuMessageHeader>
+      <p>Hello World</p>
+    </BuMessageHeader>
+
+    <BuMessageBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+      nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+      diam, et dictum <a>felis venenatis</a> efficitur.
+    </BuMessageBody>
+  </BuMessage>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/message/body-only.vue b/apps/docs/src/examples/systems/bulma/message/body-only.vue
new file mode 100644
index 0000000000..d093c2b8e4
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/message/body-only.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { BuMessage, BuMessageBody } from '@paper/bulma'
+</script>
+
+<template>
+  <BuMessage>
+    <BuMessageBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+      nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+      diam, et dictum <a>felis venenatis</a> efficitur.
+    </BuMessageBody>
+  </BuMessage>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/navbar/basic.vue b/apps/docs/src/examples/systems/bulma/navbar/basic.vue
new file mode 100644
index 0000000000..5290a96474
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/navbar/basic.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+  import { BuNavbar, BuNavbarBrand, BuNavbarMenu } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(false)
+</script>
+
+<template>
+  <BuNavbar v-model="open">
+    <BuNavbarBrand>
+      <a class="navbar-item" href="https://bulma.io">
+        <strong>Bulma</strong>
+      </a>
+    </BuNavbarBrand>
+
+    <BuNavbarMenu>
+      <div class="navbar-start">
+        <a class="navbar-item">Home</a>
+
+        <a class="navbar-item">Documentation</a>
+
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link">More</a>
+
+          <div class="navbar-dropdown">
+            <a class="navbar-item">About</a>
+            <a class="navbar-item is-selected">Jobs</a>
+            <a class="navbar-item">Contact</a>
+            <hr class="navbar-divider">
+            <a class="navbar-item">Report an issue</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-primary">
+              <strong>Sign up</strong>
+            </a>
+
+            <a class="button is-light">Log in</a>
+          </div>
+        </div>
+      </div>
+    </BuNavbarMenu>
+  </BuNavbar>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/navbar/color.vue b/apps/docs/src/examples/systems/bulma/navbar/color.vue
new file mode 100644
index 0000000000..7beb8dabc1
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/navbar/color.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import { BuNavbar, BuNavbarBrand, BuNavbarMenu } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(false)
+</script>
+
+<template>
+  <BuNavbar v-model="open" color="primary">
+    <BuNavbarBrand>
+      <a class="navbar-item" href="https://bulma.io">
+        <strong>Bulma</strong>
+      </a>
+    </BuNavbarBrand>
+
+    <BuNavbarMenu>
+      <div class="navbar-start">
+        <a class="navbar-item">Home</a>
+        <a class="navbar-item">Documentation</a>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-light">
+              <strong>Sign up</strong>
+            </a>
+
+            <a class="button is-link is-light">Log in</a>
+          </div>
+        </div>
+      </div>
+    </BuNavbarMenu>
+  </BuNavbar>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/notification/basic.vue b/apps/docs/src/examples/systems/bulma/notification/basic.vue
new file mode 100644
index 0000000000..df3c68c12d
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/notification/basic.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { BuNotification } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const open = shallowRef(true)
+</script>
+
+<template>
+  <button
+    v-if="!open"
+    class="button"
+    type="button"
+    @click="open = true"
+  >
+    Show notification
+  </button>
+
+  <BuNotification v-model="open">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
+    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
+    et dictum <a>felis venenatis</a> efficitur.
+  </BuNotification>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/notification/color.vue b/apps/docs/src/examples/systems/bulma/notification/color.vue
new file mode 100644
index 0000000000..06b25ede00
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/notification/color.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { BuNotification } from '@paper/bulma'
+</script>
+
+<template>
+  <BuNotification class="mb-4" color="primary">
+    Primary — the brand color, for context with no action attached.
+  </BuNotification>
+
+  <BuNotification class="mb-4" color="info">
+    Info — supporting context. Put the meaning in the words, not the tint.
+  </BuNotification>
+
+  <BuNotification class="mb-4" color="success">
+    Success — a completed action. Dismisses the same way as the others.
+  </BuNotification>
+
+  <BuNotification class="mb-4" color="warning">
+    Warning — something will go wrong if ignored.
+  </BuNotification>
+
+  <BuNotification color="danger">
+    Danger — something failed and needs action.
+  </BuNotification>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/overview.vue b/apps/docs/src/examples/systems/bulma/overview.vue
new file mode 100644
index 0000000000..9bd442ab0a
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/overview.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+  import {
+    BuBreadcrumb,
+    BuCheckbox,
+    BuControl,
+    BuDropdown,
+    BuDropdownMenu,
+    BuDropdownTrigger,
+    BuField,
+    BuInput,
+    BuLabel,
+    BuMenu,
+    BuModal,
+    BuModalBody,
+    BuModalCard,
+    BuModalFoot,
+    BuModalHead,
+    BuModalTitle,
+    BuNavbar,
+    BuNavbarBrand,
+    BuNavbarMenu,
+    BuNotification,
+    BuNumberField,
+    BuNumberFieldDecrement,
+    BuNumberFieldIncrement,
+    BuNumberFieldInput,
+    BuPagination,
+    BuPanel,
+    BuPanelBlock,
+    BuPanelHeading,
+    BuPanelIcon,
+    BuSelect,
+    BuTab,
+    BuTabList,
+    BuTabPanel,
+    BuTabs,
+  } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const nav = shallowRef(false)
+  const modal = shallowRef(false)
+  const notice = shallowRef(true)
+  const tab = shallowRef('repos')
+  const page = shallowRef(1)
+  const section = shallowRef('Dashboard')
+  const repo = shallowRef('bulma')
+  const name = shallowRef('paper-bulma')
+  const visibility = shallowRef('public')
+  const watchers = shallowRef<number | null>(3)
+  const privateRepo = shallowRef(false)
+
+  const crumbs = [
+    { text: 'Paper', href: '#' },
+    { text: 'Bulma', href: '#' },
+    { text: 'Dashboard' },
+  ]
+
+  const menu = [
+    {
+      label: 'General',
+      items: [
+        { label: 'Dashboard' },
+        { label: 'Customers' },
+      ],
+    },
+    {
+      label: 'Transactions',
+      items: [
+        { label: 'Payments' },
+        { label: 'Transfers' },
+        { label: 'Balance' },
+      ],
+    },
+  ]
+</script>
+
+<template>
+  <BuNavbar v-model="nav">
+    <BuNavbarBrand :burger="false">
+      <a class="navbar-item" href="#">
+        <strong>Paper / Bulma</strong>
+      </a>
+    </BuNavbarBrand>
+
+    <BuNavbarMenu>
+      <div class="navbar-start">
+        <a class="navbar-item">Dashboard</a>
+        <a class="navbar-item">Documentation</a>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <button class="button is-primary" type="button" @click="modal = true">
+              <strong>New repository</strong>
+            </button>
+          </div>
+        </div>
+      </div>
+    </BuNavbarMenu>
+  </BuNavbar>
+
+  <section class="section">
+    <BuBreadcrumb :items="crumbs" />
+
+    <div class="columns">
+      <div class="column is-one-quarter">
+        <BuMenu v-model="section" :items="menu" />
+      </div>
+
+      <div class="column">
+        <BuNotification v-model="notice" color="info">
+          Bulma ships the classes. Escape, focus return, and the burger toggle
+          come from Vuetify0.
+        </BuNotification>
+
+        <BuTabs v-model="tab">
+          <BuTabList>
+            <BuTab value="repos">Repositories</BuTab>
+            <BuTab value="settings">Settings</BuTab>
+          </BuTabList>
+
+          <BuTabPanel value="repos">
+            <div class="is-flex is-justify-content-space-between is-align-items-center mb-3 mt-4">
+              <p class="title is-5 mb-0">{{ section }}</p>
+
+              <BuDropdown menu right>
+                <BuDropdownTrigger v-slot="{ attrs }">
+                  <button class="button is-small" type="button" v-bind="attrs">
+                    <span>Actions</span>
+
+                    <span class="icon is-small">
+                      <i aria-hidden="true" class="fas fa-angle-down" />
+                    </span>
+                  </button>
+                </BuDropdownTrigger>
+
+                <BuDropdownMenu v-slot="{ close, item }">
+                  <a class="dropdown-item" v-bind="item" @click="close(); modal = true">New repository</a>
+                  <a class="dropdown-item" v-bind="item" @click="close">Clone</a>
+                  <hr class="dropdown-divider">
+                  <a class="dropdown-item" v-bind="item" @click="close">Settings</a>
+                </BuDropdownMenu>
+              </BuDropdown>
+            </div>
+
+            <BuPanel v-model="repo">
+              <BuPanelHeading>Repositories</BuPanelHeading>
+
+              <BuPanelBlock value="bulma">
+                <BuPanelIcon icon="fas fa-book" />
+                bulma
+              </BuPanelBlock>
+
+              <BuPanelBlock value="paper">
+                <BuPanelIcon icon="fas fa-book" />
+                paper
+              </BuPanelBlock>
+
+              <BuPanelBlock value="v0">
+                <BuPanelIcon icon="fas fa-code-branch" />
+                vuetify0
+              </BuPanelBlock>
+            </BuPanel>
+
+            <BuPagination v-model="page" class="mt-4" :pages="4" />
+          </BuTabPanel>
+
+          <BuTabPanel value="settings">
+            <div class="mt-4">
+              <BuField>
+                <BuLabel>Repository name</BuLabel>
+
+                <BuControl>
+                  <BuInput v-model="name" />
+                </BuControl>
+              </BuField>
+
+              <BuField>
+                <BuLabel>Visibility</BuLabel>
+
+                <BuControl>
+                  <BuSelect v-model="visibility">
+                    <option value="public">Public</option>
+                    <option value="private">Private</option>
+                    <option value="internal">Internal</option>
+                  </BuSelect>
+                </BuControl>
+              </BuField>
+
+              <BuField>
+                <BuLabel>Watchers</BuLabel>
+
+                <BuNumberField v-model="watchers" :max="99" :min="0">
+                  <BuNumberFieldDecrement />
+                  <BuNumberFieldInput expanded />
+                  <BuNumberFieldIncrement />
+                </BuNumberField>
+              </BuField>
+
+              <BuField>
+                <BuControl>
+                  <BuCheckbox v-model="privateRepo">Make this repository private</BuCheckbox>
+                </BuControl>
+              </BuField>
+            </div>
+          </BuTabPanel>
+        </BuTabs>
+      </div>
+    </div>
+  </section>
+
+  <BuModal v-model="modal">
+    <BuModalCard>
+      <BuModalHead>
+        <BuModalTitle>New repository</BuModalTitle>
+      </BuModalHead>
+
+      <BuModalBody>
+        <BuField>
+          <BuLabel>Name</BuLabel>
+
+          <BuControl>
+            <BuInput v-model="name" placeholder="my-project" />
+          </BuControl>
+        </BuField>
+
+        <BuField>
+          <BuLabel>Visibility</BuLabel>
+
+          <BuControl>
+            <BuSelect v-model="visibility">
+              <option value="public">Public</option>
+              <option value="private">Private</option>
+            </BuSelect>
+          </BuControl>
+        </BuField>
+      </BuModalBody>
+
+      <BuModalFoot>
+        <div class="buttons">
+          <button class="button is-success" type="button" @click="modal = false">
+            Create
+          </button>
+
+          <button class="button" type="button" @click="modal = false">
+            Cancel
+          </button>
+        </div>
+      </BuModalFoot>
+    </BuModalCard>
+  </BuModal>
+</template>
+
+<style>
+  /* The docs iframe is always below Bulma's 1024px navbar breakpoint, so the
+     burger/drawer path would be the only one that ever runs. Force the desktop
+     navbar so this reads as a dashboard, not a phone menu. */
+  .navbar-menu,
+  .navbar-start,
+  .navbar-end {
+    align-items: stretch;
+    display: flex;
+  }
+
+  .navbar-menu {
+    flex-grow: 1;
+  }
+
+  .navbar-start {
+    margin-inline-end: auto;
+  }
+
+  .navbar-end {
+    margin-inline-start: auto;
+  }
+
+  .navbar-item {
+    align-items: center;
+    display: flex;
+  }
+</style>
diff --git a/apps/docs/src/examples/systems/bulma/pagination/basic.vue b/apps/docs/src/examples/systems/bulma/pagination/basic.vue
new file mode 100644
index 0000000000..6d30d58a67
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/pagination/basic.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { BuPagination } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const page = shallowRef(2)
+</script>
+
+<template>
+  <p class="is-size-7 has-text-grey mb-3">Page {{ page }} of 5</p>
+
+  <BuPagination v-model="page" :pages="5" />
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/pagination/window.vue b/apps/docs/src/examples/systems/bulma/pagination/window.vue
new file mode 100644
index 0000000000..0dcd23568c
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/pagination/window.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { BuPagination } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const page = shallowRef(46)
+</script>
+
+<template>
+  <p class="is-size-7 has-text-grey mb-3">Page {{ page }} of 86 — five links visible</p>
+
+  <BuPagination v-model="page" :pages="86" :visible="5" />
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/panel/basic.vue b/apps/docs/src/examples/systems/bulma/panel/basic.vue
new file mode 100644
index 0000000000..676738c003
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/panel/basic.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import { BuPanel, BuPanelBlock, BuPanelHeading, BuPanelIcon } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const selected = shallowRef('bulma')
+</script>
+
+<template>
+  <BuPanel v-model="selected">
+    <BuPanelHeading>Repositories</BuPanelHeading>
+
+    <BuPanelBlock value="bulma">
+      <BuPanelIcon icon="fas fa-book" />
+      bulma
+    </BuPanelBlock>
+
+    <BuPanelBlock value="marksheet">
+      <BuPanelIcon icon="fas fa-book" />
+      marksheet
+    </BuPanelBlock>
+
+    <BuPanelBlock value="minireset.css">
+      <BuPanelIcon icon="fas fa-book" />
+      minireset.css
+    </BuPanelBlock>
+
+    <BuPanelBlock value="mojs">
+      <BuPanelIcon icon="fas fa-code-branch" />
+      mojs
+    </BuPanelBlock>
+  </BuPanel>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/panel/tabs.vue b/apps/docs/src/examples/systems/bulma/panel/tabs.vue
new file mode 100644
index 0000000000..088e4ccd33
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/panel/tabs.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+  import {
+    BuPanel,
+    BuPanelBlock,
+    BuPanelHeading,
+    BuPanelIcon,
+    BuPanelTab,
+    BuPanelTabs,
+  } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const selected = shallowRef('bulma')
+  const tab = shallowRef<string>()
+</script>
+
+<template>
+  <BuPanel v-model="selected">
+    <BuPanelHeading>Repositories</BuPanelHeading>
+
+    <div class="panel-block">
+      <p class="control has-icons-left">
+        <input class="input" placeholder="Search" type="text">
+
+        <span class="icon is-left">
+          <i aria-hidden="true" class="fas fa-search" />
+        </span>
+      </p>
+    </div>
+
+    <BuPanelTabs v-model="tab">
+      <BuPanelTab value="All">All</BuPanelTab>
+      <BuPanelTab value="Public">Public</BuPanelTab>
+      <BuPanelTab value="Private">Private</BuPanelTab>
+      <BuPanelTab value="Sources">Sources</BuPanelTab>
+      <BuPanelTab value="Forks">Forks</BuPanelTab>
+    </BuPanelTabs>
+
+    <BuPanelBlock value="bulma">
+      <BuPanelIcon icon="fas fa-book" />
+      bulma
+    </BuPanelBlock>
+
+    <BuPanelBlock value="marksheet">
+      <BuPanelIcon icon="fas fa-book" />
+      marksheet
+    </BuPanelBlock>
+
+    <BuPanelBlock value="minireset.css">
+      <BuPanelIcon icon="fas fa-book" />
+      minireset.css
+    </BuPanelBlock>
+
+    <BuPanelBlock value="jgthms.github.io">
+      <BuPanelIcon icon="fas fa-book" />
+      jgthms.github.io
+    </BuPanelBlock>
+
+    <BuPanelBlock value="daniellowtw/infboard">
+      <BuPanelIcon icon="fas fa-code-branch" />
+      daniellowtw/infboard
+    </BuPanelBlock>
+
+    <BuPanelBlock value="mojs">
+      <BuPanelIcon icon="fas fa-code-branch" />
+      mojs
+    </BuPanelBlock>
+
+    <label class="panel-block">
+      <input type="checkbox">
+      remember me
+    </label>
+
+    <div class="panel-block">
+      <button class="button is-link is-outlined is-fullwidth" type="button">
+        Reset all filters
+      </button>
+    </div>
+  </BuPanel>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/radio/basic.vue b/apps/docs/src/examples/systems/bulma/radio/basic.vue
new file mode 100644
index 0000000000..9bd600f6f3
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/radio/basic.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import { BuControl, BuRadio } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const answer = shallowRef<string | undefined>()
+</script>
+
+<template>
+  <BuControl>
+    <BuRadio v-model="answer" name="answer" value="yes">Yes</BuRadio>
+    <BuRadio v-model="answer" name="answer" value="no">No</BuRadio>
+    <BuRadio v-model="answer" name="answer" value="maybe">Maybe</BuRadio>
+  </BuControl>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/radio/disabled.vue b/apps/docs/src/examples/systems/bulma/radio/disabled.vue
new file mode 100644
index 0000000000..cf32613a29
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/radio/disabled.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import { BuControl, BuRadio } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const plan = shallowRef('free')
+</script>
+
+<template>
+  <BuControl>
+    <BuRadio v-model="plan" name="plan" value="free">Free</BuRadio>
+    <BuRadio v-model="plan" name="plan" value="pro">Pro</BuRadio>
+    <BuRadio v-model="plan" disabled name="plan" value="enterprise">Enterprise</BuRadio>
+  </BuControl>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/select/basic.vue b/apps/docs/src/examples/systems/bulma/select/basic.vue
new file mode 100644
index 0000000000..a2399215a0
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/select/basic.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuLabel, BuSelect } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const choice = shallowRef<string | undefined>()
+</script>
+
+<template>
+  <BuField>
+    <BuLabel>Country</BuLabel>
+
+    <BuControl>
+      <BuSelect v-model="choice">
+        <option>Select dropdown</option>
+        <option>With options</option>
+      </BuSelect>
+    </BuControl>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/select/multiple.vue b/apps/docs/src/examples/systems/bulma/select/multiple.vue
new file mode 100644
index 0000000000..c8fec1e52f
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/select/multiple.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuLabel, BuSelect } from '@paper/bulma'
+
+  import { ref } from 'vue'
+
+  const countries = ref<string[]>([])
+</script>
+
+<template>
+  <BuField>
+    <BuLabel>Countries</BuLabel>
+
+    <BuControl>
+      <BuSelect v-model="countries" multiple :rows="8">
+        <option value="Argentina">Argentina</option>
+        <option value="Bolivia">Bolivia</option>
+        <option value="Brazil">Brazil</option>
+        <option value="Chile">Chile</option>
+        <option value="Colombia">Colombia</option>
+        <option value="Ecuador">Ecuador</option>
+        <option value="Guyana">Guyana</option>
+        <option value="Paraguay">Paraguay</option>
+        <option value="Peru">Peru</option>
+        <option value="Suriname">Suriname</option>
+        <option value="Uruguay">Uruguay</option>
+        <option value="Venezuela">Venezuela</option>
+      </BuSelect>
+    </BuControl>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/tabs/basic.vue b/apps/docs/src/examples/systems/bulma/tabs/basic.vue
new file mode 100644
index 0000000000..432c285ef2
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/tabs/basic.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { BuTab, BuTabList, BuTabPanel, BuTabs } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const tab = shallowRef('pictures')
+</script>
+
+<template>
+  <BuTabs v-model="tab">
+    <BuTabList>
+      <BuTab value="pictures">Pictures</BuTab>
+
+      <BuTab value="music">Music</BuTab>
+    </BuTabList>
+
+    <BuTabPanel value="pictures">
+      <div class="content mt-4">
+        <p>Pictures panel.</p>
+      </div>
+    </BuTabPanel>
+
+    <BuTabPanel value="music">
+      <div class="content mt-4">
+        <p>Music panel.</p>
+      </div>
+    </BuTabPanel>
+  </BuTabs>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/tabs/boxed.vue b/apps/docs/src/examples/systems/bulma/tabs/boxed.vue
new file mode 100644
index 0000000000..954a56210d
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/tabs/boxed.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import { BuTab, BuTabList, BuTabPanel, BuTabs } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const tab = shallowRef('pictures')
+</script>
+
+<template>
+  <BuTabs v-model="tab">
+    <BuTabList boxed>
+      <BuTab value="pictures">
+        <span class="icon is-small"><i aria-hidden="true" class="fas fa-image" /></span>
+        <span>Pictures</span>
+      </BuTab>
+
+      <BuTab value="music">
+        <span class="icon is-small"><i aria-hidden="true" class="fas fa-music" /></span>
+        <span>Music</span>
+      </BuTab>
+
+      <BuTab value="videos">
+        <span class="icon is-small"><i aria-hidden="true" class="fas fa-film" /></span>
+        <span>Videos</span>
+      </BuTab>
+    </BuTabList>
+
+    <BuTabPanel value="pictures">
+      <div class="content mt-4">
+        <p>Pictures panel.</p>
+      </div>
+    </BuTabPanel>
+
+    <BuTabPanel value="music">
+      <div class="content mt-4">
+        <p>Music panel.</p>
+      </div>
+    </BuTabPanel>
+
+    <BuTabPanel value="videos">
+      <div class="content mt-4">
+        <p>Videos panel.</p>
+      </div>
+    </BuTabPanel>
+  </BuTabs>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/textarea/basic.vue b/apps/docs/src/examples/systems/bulma/textarea/basic.vue
new file mode 100644
index 0000000000..2d6f84fdb9
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/textarea/basic.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuLabel, BuTextarea } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const message = shallowRef('')
+</script>
+
+<template>
+  <BuField>
+    <BuLabel>Message</BuLabel>
+
+    <BuControl>
+      <BuTextarea v-model="message" placeholder="e.g. Hello world" />
+    </BuControl>
+  </BuField>
+</template>
diff --git a/apps/docs/src/examples/systems/bulma/textarea/fixed.vue b/apps/docs/src/examples/systems/bulma/textarea/fixed.vue
new file mode 100644
index 0000000000..4d78f9e4d5
--- /dev/null
+++ b/apps/docs/src/examples/systems/bulma/textarea/fixed.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { BuControl, BuField, BuLabel, BuTextarea } from '@paper/bulma'
+
+  import { shallowRef } from 'vue'
+
+  const notes = shallowRef('')
+</script>
+
+<template>
+  <BuField>
+    <BuLabel>Notes</BuLabel>
+
+    <BuControl>
+      <BuTextarea
+        v-model="notes"
+        fixed
+        placeholder="Fixed size textarea"
+      />
+    </BuControl>
+  </BuField>
+</template>
diff --git a/apps/docs/src/pages/systems/bulma/breadcrumb.md b/apps/docs/src/pages/systems/bulma/breadcrumb.md
new file mode 100644
index 0000000000..4a5412b155
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/breadcrumb.md
@@ -0,0 +1,126 @@
+---
+title: BuBreadcrumb - Bulma Breadcrumb for Vue
+meta:
+- name: description
+  content: Bulma's breadcrumb trail in Vue — last item is current, separators are a prop, and crumbs wrap instead of vanishing when the trail is wider than its container.
+- name: keywords
+  content: bulma breadcrumb, vue breadcrumb, breadcrumb trail, has-arrow-separator, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuBreadcrumb'
+  level: 2
+  renderless: false
+  order: 4
+related:
+  - /systems/bulma
+  - /systems/bulma/pagination
+  - /components/semantic/breadcrumbs
+---
+
+# BuBreadcrumb
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.breadcrumb` — last crumb current, separators as a class, wrapping instead of hiding.
+
+> [!NOTE]
+> Reference: [Breadcrumb on bulma.io](https://bulma.io/documentation/components/breadcrumb/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+Pass `items` — `{ text, href? }[]`. The last entry is the current page; there is no v-model. Alignment, size and separator are modifier props on the same component.
+
+::: ds-example
+/systems/bulma/breadcrumb/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuBreadcrumb } from '@paper/bulma'
+</script>
+
+<template>
+  <BuBreadcrumb />
+</template>
+```
+
+## Composed on v0
+
+None. [Breadcrumbs](/components/semantic/breadcrumbs) is the compound it is *not* wrapping, and the skip is load-bearing.
+
+v0's `Breadcrumbs.Root` owns an overflow watcher. The moment the measured container is narrower than the crumb run, it hides the middle items — even when no `Breadcrumbs.Ellipsis` is registered. There is no indicator. Crumbs just disappear. Upstream Bulma flex-wraps the trail instead, and that wrap is the documented look.
+
+BuBreadcrumb also uses nothing else the compound offers. There is no v-model: the last item is current because it is last. There is no overflow UI to opt into. Wrapping the compound in Tier 1 would have bought a truncation bug and no behavior, so the component renders `nav.breadcrumb > ul > li > a` itself and leaves the last item `is-active` with `aria-current="page"`.
+
+The follow-up is in v0, not here. `BreadcrumbsRoot` should skip the truncation branch when no ellipsis ticket is registered, or expose an overflow opt-out. Once it does, this page can wrap the compound without changing a class.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/breadcrumb/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<nav class="breadcrumb" aria-label="breadcrumbs">
+  <ul>
+    <li><a href="#">Bulma</a></li>
+    <li><a href="#">Documentation</a></li>
+    <li><a href="#">Components</a></li>
+    <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
+  </ul>
+</nav>
+```
+
+```vue Vue
+<template>
+  <BuBreadcrumb
+    :items="[
+      { text: 'Bulma', href: '#' },
+      { text: 'Documentation', href: '#' },
+      { text: 'Components', href: '#' },
+      { text: 'Breadcrumb', href: '#' },
+    ]"
+  />
+</template>
+```
+
+:::
+
+You write no `is-active` and no `aria-current`. The last item is current because it is last; the component marks it.
+
+## Examples
+
+::: ds-example
+/systems/bulma/breadcrumb/separators
+
+### Separators
+
+`separator` is the four Bulma alternatives to the default slash: `arrow`, `bullet`, `dot`, `succeeds`. Each becomes `has-{separator}-separator` on `nav.breadcrumb`; the slashes, arrows and dots are `li + li::before` in Bulma's CSS, not extra DOM. There is no divider part to compose, and putting one in the slot would be a second separator sitting on top of the first.
+
+Reach for `arrow` when the trail is a path you walk, `bullet` when it is a list of places, `dot` and `succeeds` when you want the quieter marks. The default slash is the right answer for most docs and app chrome. Alignment (`centered`, `right`) and `size` compose with any of them — they are independent modifier classes, not competing modes.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* yet. Keep in sync with the SFC. -->
+
+`BuBreadcrumb` is a single component. There are no parts.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `{ text: string; href?: string }[]` | `[]` | Trail. The last entry is the current page |
+| `centered` | `boolean` | `false` | `is-centered` |
+| `right` | `boolean` | `false` | `is-right` |
+| `separator` | `'arrow' \| 'bullet' \| 'dot' \| 'succeeds'` | — | `has-{separator}-separator`; omit for the default slash |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` |
+| `label` | `string` | `'breadcrumbs'` | `aria-label` on the `nav` |
+
+The optional `#item` slot replaces each anchor's content. Slot props: `item`, `index`, `isLast`. Use it for icons; leave it off and the item's `text` is the link.
+
+## Accessibility
+
+The root is a `nav` labelled by `label`. The last crumb keeps its `<a>` — Bulma's CSS styles that anchor inert — and carries `aria-current="page"`. Earlier crumbs are ordinary links.
+
+The trail wraps when it is wider than its container. Nothing is hidden, and there is no ellipsis control to announce.
diff --git a/apps/docs/src/pages/systems/bulma/checkbox.md b/apps/docs/src/pages/systems/bulma/checkbox.md
new file mode 100644
index 0000000000..856b1a67ca
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/checkbox.md
@@ -0,0 +1,140 @@
+---
+title: BuCheckbox - Bulma Checkbox for Vue
+meta:
+- name: description
+  content: Bulma's checkbox for Vue — a native checkbox wrapped in label.checkbox, with v-model, the documented label disabled treatment, and Vuetify0 validation.
+- name: keywords
+  content: bulma checkbox, vue checkbox, label checkbox, native checkbox, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuCheckbox'
+  level: 2
+  renderless: false
+  order: 16
+related:
+  - /systems/bulma
+  - /systems/bulma/field
+  - /systems/bulma/radio
+---
+
+# BuCheckbox
+
+<DocsPageFeatures :frontmatter />
+
+A native checkbox wrapped in `label.checkbox`. The default slot is the label text, so the whole row is the click target. `v-model` is a boolean.
+
+> [!NOTE]
+> Reference: [Checkbox on bulma.io](https://bulma.io/documentation/form/checkbox/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+The slot is the visible name. Leave it empty and the control has no text — pass content, or the checkbox is an unnamed box. Links and other inline markup are allowed in the slot; that is the nested-link shape Bulma documents.
+
+There are no color modifiers. A failing value sets `aria-invalid` on the input and does not paint `is-danger` — Bulma's checkbox has no color classes.
+
+::: ds-example
+/systems/bulma/checkbox/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuCheckbox } from '@paper/bulma'
+</script>
+
+<template>
+  <BuCheckbox />
+</template>
+```
+
+## Composed on v0
+
+`BuCheckbox` calls [createInput](/composables/forms/create-input) for validation, form registration, the generated id and `aria-invalid`. The element is a native `<input type="checkbox">` inside `<label class="checkbox">`.
+
+It does **not** wrap v0's Checkbox compound. That compound is a `role="checkbox"` button with an indicator slot; Bulma styles a visible native checkbox, and a button gets none of your CSS. This is the Ruling 2 deviation: Tier 1 wraps the native where the stylesheet demands it. Do not replace this with v0 Checkbox and expect it to look like Bulma.
+
+Fallthrough is split. `class` and `style` merge onto the wrapping label; every other attribute lands on the native input.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/form/checkbox/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<label class="checkbox">
+  <input type="checkbox" />
+  Remember me
+</label>
+```
+
+```vue Vue
+<template>
+  <BuCheckbox>Remember me</BuCheckbox>
+</template>
+```
+
+:::
+
+A list of checkboxes sits in a `.checkboxes` wrapper — a Bulma 1.0 layout class, not a component. There is no checkbox group in Tier 1.
+
+## Examples
+
+::: ds-example
+/systems/bulma/checkbox/disabled
+
+### Disabled
+
+`disabled` lands on both the wrapping label and the native input. The input's `disabled` is the real one: it takes the control out of the tab order, blocks the toggle, and keeps it out of form submission. The label's `disabled` is the non-standard attribute Bulma documents and styles — `label.checkbox[disabled]` is what greys the text.
+
+That second attribute is markup fidelity, not a platform feature. HTML does not define `disabled` on `<label>`. Expect axe and validator discussion; the suite keeps it because dropping it would fail the fixture and lose Bulma's label treatment. Assistive technology respects the input, which is also disabled.
+
+The checked state is preserved. A disabled checkbox that was already on stays on — it just cannot change. Reach for this when a preference is locked by a precondition; hide the row entirely when the question will never apply.
+:::
+
+## Props
+
+<!-- Hand-authored, temporarily. These pages predate DocsApi extraction for
+     @paper/* packages; once the generator covers the design systems this table
+     is replaced by <DocsApi />. Keep it in sync with BuCheckbox.vue until then. -->
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `boolean` | `false` | Checked state |
+| `disabled` | `boolean` | `false` | Disables the input **and** puts `disabled` on the wrapping label |
+| `error` | `boolean` | `false` | Force the invalid state (`aria-invalid`, no color class) |
+| `error-messages` | `string \| string[]` | — | Manual errors, merged with rule errors |
+| `form` | `string` | — | Id of the form to associate with. Snapshotted at setup |
+| `id` | `string \| number` | auto | Input id; generated when omitted. Snapshotted at setup |
+| `name` | `string` | — | Form field name. Snapshotted at setup |
+| `required` | `boolean` | — | Marks the field required. Snapshotted at setup; the DOM attr stays reactive |
+| `rules` | `ValidationRule[]` | `[]` | Validation rules. Snapshotted at setup |
+| `validate-on` | `ValidateOn` | `'blur'` | When validation runs |
+
+The default slot is the label text. Slot props: `errors`, `isChecked`, `isFocused`, `isValid`.
+
+`id`, `name`, `form`, `required` and `rules` are snapshotted at setup because `createInput` takes plain values for those options.
+
+## Accessibility
+
+The widget is a native checkbox. The wrapping `<label>` is both the name and the hit target — clicking the text toggles the box, and the slot content is the accessible name.
+
+### Naming
+
+Put the name in the default slot. An empty slot is an unnamed checkbox. Inline links in the slot are fine; they are part of the name.
+
+### Disabled
+
+Two attributes, one job:
+
+| Where | What it does |
+|-------|----------------|
+| `input[disabled]` | Native. Not focusable, not submitted, not togglable |
+| `label[disabled]` | Non-standard. Bulma's CSS greys the label text |
+
+The label attribute will show up in axe and HTML validators. It is a declared SPEC limitation, kept so the greying matches upstream. Do not strip it in userland to silence the warning — you would desync from `bulma.css`.
+
+### Validation
+
+`aria-invalid` when `isValid === false`. No `is-danger`, no color modifier. A sibling `BuHelp` is not automatically associated; `createInput` on this component is not an `Input.Root` context.
diff --git a/apps/docs/src/pages/systems/bulma/dropdown.md b/apps/docs/src/pages/systems/bulma/dropdown.md
index b70830b909..13cee749cf 100644
--- a/apps/docs/src/pages/systems/bulma/dropdown.md
+++ b/apps/docs/src/pages/systems/bulma/dropdown.md
@@ -23,6 +23,9 @@ Bulma's `.dropdown` with the JavaScript it never shipped: toggle, outside-click
 
 <DocsPageFeatures :frontmatter />
 
+> [!NOTE]
+> Reference: [Dropdown on bulma.io](https://bulma.io/documentation/components/dropdown/) — classes and visual variants. This page is the JavaScript.
+
 ## Usage
 
 Compose three parts: `BuDropdown` renders `.dropdown` and owns the open state, `BuDropdownTrigger` wraps your own button, and `BuDropdownMenu` renders `.dropdown-menu` with its `.dropdown-content`. `v-model` is the single source of truth for open and closed.
@@ -49,13 +52,21 @@ Positioning stays Bulma's. The menu is placed by CSS against the trigger, so the
 </template>
 ```
 
+## Composed on v0
+
+Skips v0's [Popover](/components/disclosure/popover) entirely. `Popover.Content` hardwires `popover=""`, which promotes the menu to the top layer and sets UA `margin: unset` — both fight Bulma's in-flow `.dropdown-menu { position: absolute }`. Open state is a boolean `v-model` plus `useClickOutside` and a local Escape handler bound to the dropdown subtree, not the document: a dropdown inside `BuModal` must not close the modal on the first Escape.
+
+Trigger aria is hand-bound (`aria-haspopup`, `aria-expanded`, `aria-controls`) because v0's Toggle only emits `aria-pressed`. `hoverable` is CSS-only — `is-hoverable` on `.dropdown`, no JS listeners.
+
+Collision-aware placement is [Popover](/components/disclosure/popover), and it will not give you Bulma's markup.
+
 ## The markup you know
 
 The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/dropdown/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — the generated `id` and its matching `aria-controls` are the only tolerated difference.
 
 ::: code-group no-filename
 
-```html Bulma
+```html Bulma collapse
 <div class="dropdown is-active">
   <div class="dropdown-trigger">
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
@@ -76,7 +87,7 @@ The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentati
 </div>
 ```
 
-```vue Vue
+```vue Vue collapse
 <template>
   <BuDropdown menu>
     <BuDropdownTrigger v-slot="{ attrs }">
diff --git a/apps/docs/src/pages/systems/bulma/field.md b/apps/docs/src/pages/systems/bulma/field.md
new file mode 100644
index 0000000000..6f516c6178
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/field.md
@@ -0,0 +1,214 @@
+---
+title: BuField - Bulma Form Field for Vue
+meta:
+- name: description
+  content: Bulma's field scaffolding for Vue — label, control and help, with addons, grouped and horizontal layouts, plus Vuetify0 wiring for labels and validation text.
+- name: keywords
+  content: bulma field, vue form, has-addons, is-horizontal, is-grouped, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuField'
+  level: 2
+  renderless: false
+  order: 12
+related:
+  - /systems/bulma
+  - /systems/bulma/input
+  - /components/forms/input
+---
+
+# BuField
+
+<DocsPageFeatures :frontmatter />
+
+The `.field` wrapper and the parts that live inside it: label, control, help. Addons, grouped and horizontal layouts are props on the field; the horizontal columns are parts you compose.
+
+> [!NOTE]
+> Reference: [Form on bulma.io](https://bulma.io/documentation/form/general/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`BuField` is markup. It does not own a value and it does not create a v0 context. Put a [BuLabel](#bulabel), a [BuControl](#bucontrol) around the input, and a [BuHelp](#buhelp) under it — that is the stacked field Bulma documents.
+
+`addons`, `grouped` and `horizontal` are three layouts — pick one. The component will happily emit both `has-addons` and `is-grouped` if you set both, and Bulma has no stylesheet for that combination. `addons` attaches controls into one group (`has-addons`, plus `has-addons-centered` / `has-addons-right` when you pass those strings). `grouped` spaces them as separate controls. `horizontal` splits the row into a label column and a body column, which you compose from `BuFieldLabel` and `BuFieldBody`.
+
+::: ds-example
+/systems/bulma/field/basic
+:::
+
+## Anatomy
+
+The first tree is a stacked field. The second is the horizontal layout — a field is one or the other, never both.
+
+```vue Anatomy no-filename collapse
+<script setup lang="ts">
+  import {
+    BuControl,
+    BuField,
+    BuFieldBody,
+    BuFieldLabel,
+    BuHelp,
+    BuLabel,
+  } from '@paper/bulma'
+</script>
+
+<template>
+  <BuField>
+    <BuLabel />
+
+    <BuControl />
+
+    <BuHelp />
+  </BuField>
+
+  <BuField>
+    <BuFieldLabel>
+      <BuLabel />
+    </BuFieldLabel>
+
+    <BuFieldBody>
+      <BuField>
+        <BuControl />
+      </BuField>
+    </BuFieldBody>
+  </BuField>
+</template>
+```
+
+## Composed on v0
+
+`BuField`, `BuFieldLabel`, `BuFieldBody` and `BuControl` are pure markup. They emit Bulma's classes around a slot. There is no model, no context and no v0 primitive underneath.
+
+`BuLabel` and `BuHelp` are the two that reach into v0. Both optionally inject an [Input.Root](/components/forms/input) on `v0:input:root` by default. `BuLabel`'s `for` falls back to that root's id when you do not pass one. `BuHelp` with `validation` wraps a renderless `Input.Error`, so the error id, `aria-live` and `aria-errormessage` registration wire up without you tracking them.
+
+v0 ships no `Input.Label` part, which is why `BuLabel` is hand-rolled markup rather than a styled v0 label.
+
+Without an ambient root they still render — a standalone label has no `for`, and a help with `validation` renders an empty `.help` (and warns in development). That is the half-wired trap on [BuInput](/systems/bulma/input): the input still paints `is-danger`, the sibling help stays blank. Wrap the field in `<InputRoot renderless>` when the label and the error text need to see the same context.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/form/general/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="field">
+  <label class="label">Label</label>
+  <div class="control">
+    <input class="input" type="text" placeholder="Text input">
+  </div>
+  <p class="help">This is a help text</p>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuField>
+    <BuLabel>Label</BuLabel>
+
+    <BuControl>
+      <BuInput placeholder="Text input" />
+    </BuControl>
+
+    <BuHelp>This is a help text</BuHelp>
+  </BuField>
+</template>
+```
+
+:::
+
+Icons and the loading spinner live on `BuControl`, not on the input. `icons="both"` emits `has-icons-left` and `has-icons-right`; `loading` emits `is-loading`; `size` on the control pairs the spinner with the input size. Drop the icon elements in as siblings of the input, the way Bulma documents them.
+
+## Examples
+
+::: ds-example
+/systems/bulma/field/horizontal
+
+### Horizontal layout
+
+`horizontal` adds `is-horizontal` and that is all it does. The two columns are parts you compose: `BuFieldLabel` is the label column, `BuFieldBody` is the control column, and the body holds one or more nested `BuField`s — never a bare control. That inner field is what carries the input's help text, so a required-field message sits under the control rather than under the row label.
+
+`size` on `BuFieldLabel` is column alignment, not type size. `is-normal` lines the label up with a normal input; `is-small` / `is-medium` / `is-large` track the control they sit next to. The `.label` itself is still a `BuLabel` nested inside.
+
+The help in this example is colored statically (`color="danger"`). That is not `validation` — there is no ambient root, so a `BuHelp validation` would render empty. Reach for this layout when a form is a list of questions that should scan as rows — settings, a checkout, anything whose labels are short and whose controls should share a left edge. Leave it off for a single stacked field; a horizontal field with one row and a long label wastes the column on nothing.
+:::
+
+::: ds-example
+/systems/bulma/field/addons
+
+### Addons
+
+`addons` attaches every child control into one visual group. Bulma keys the group's corner radii off the first and last `.control`, and squares the ones between, so each attached piece — the input, the button — has to be its own `BuControl`. A bare button dropped in as a sibling of the field gets no radius treatment and visibly breaks the group.
+
+Pass `'centered'` or `'right'` when the group should not hug the left edge; those strings add `has-addons-centered` or `has-addons-right` on top of `has-addons`. `grouped` is the other layout: same child shape, but the controls stay separate instead of joining. Do not set both.
+
+There is no `BuButton`. The search control in this example is a native `button.button`, which is the markup Bulma documents for an addon. Give it `type="button"` so it does not submit a surrounding form.
+:::
+
+## Props
+
+`BuField` renders `.field`. Everything else is a part.
+
+<!-- Hand-authored, temporarily. These pages predate DocsApi extraction for
+     @paper/* packages; once the generator covers the design systems this table
+     is replaced by <DocsApi />. Keep it in sync with the SFCs until then. -->
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `addons` | `boolean \| 'centered' \| 'right'` | `false` | `has-addons`, plus `has-addons-{value}` when a string |
+| `grouped` | `boolean \| 'centered' \| 'right' \| 'multiline'` | `false` | `is-grouped`, plus `is-grouped-{value}` when a string |
+| `horizontal` | `boolean` | `false` | `is-horizontal` — compose from `BuFieldLabel` + `BuFieldBody` |
+
+| Part | Renders | Notes |
+|------|---------|-------|
+| `BuFieldLabel` | `div.field-label` | Label column of a horizontal field. `size` emits `is-{size}` |
+| `BuFieldBody` | `div.field-body` | Control column. Holds nested `BuField`s |
+| `BuControl` | `div.control` or `p.control` | Wraps the input. Icons, loading and `expanded` live here |
+| `BuLabel` | `label.label` | `for` falls back to the ambient Input.Root id |
+| `BuHelp` | `p.help` | Plain help text, or ambient `Input.Error` when `validation` is set |
+
+### BuFieldLabel
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` on the column, aligning it with the control |
+
+### BuControl
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `as` | `'div' \| 'p'` | `'div'` | Element tag — Bulma docs use both |
+| `expanded` | `boolean` | `false` | `is-expanded` — fill leftover width in grouped or addon fields |
+| `icons` | `'left' \| 'right' \| 'both'` | — | `has-icons-left` / `has-icons-right` |
+| `loading` | `boolean` | `false` | `is-loading` — spinner on the control, not the input |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` — pairs the spinner with the input size |
+
+### BuLabel
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `for` | `string` | ambient id | Explicit target id; falls back to the ambient Input.Root id |
+| `namespace` | `string` | `'v0:input:root'` | Context the label injects |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` on the label |
+
+### BuHelp
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}`. Defaults to `danger` in validation mode |
+| `namespace` | `string` | `'v0:input:root'` | Context the help injects |
+| `validation` | `boolean` | `false` | Render ambient Input.Root errors via `Input.Error` |
+
+Slot props when `validation` is set: `errors: string[]`. The default slot content is `errors.join(' ')`.
+
+## Accessibility
+
+### Naming
+
+`BuLabel` is a real `<label>`. Pass `for`, or let it fall back to an ambient Input.Root id, so clicking the text moves focus into the control. A label with neither is still visible — it just does not name anything, and the input has to get its accessible name some other way (`label` on the control, `aria-label`, `aria-labelledby`).
+
+### Errors
+
+`BuHelp` with `validation` is `Input.Error`: the region carries `aria-live="polite"` and registers as `aria-errormessage` on the control. That only happens inside an ambient [Input.Root](/components/forms/input). Outside one, `validation` is a no-op that warns in development — the input can still show `is-danger` from its own root, and the help stays empty.
+
+Plain `BuHelp` (no `validation`) is help text. Color it yourself; it is not wired to the control unless you pass `id` and point `aria-describedby` at it.
diff --git a/apps/docs/src/pages/systems/bulma/file.md b/apps/docs/src/pages/systems/bulma/file.md
new file mode 100644
index 0000000000..7cbdb6fe56
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/file.md
@@ -0,0 +1,162 @@
+---
+title: BuFile - Bulma File Upload for Vue
+meta:
+- name: description
+  content: Bulma's file upload for Vue — the .file CTA with boxed, named and colored variants, selected files on a change event, and Vuetify0 validation.
+- name: keywords
+  content: bulma file, vue file upload, file-cta, has-name, is-boxed, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuFile'
+  level: 2
+  renderless: false
+  order: 18
+related:
+  - /systems/bulma
+  - /systems/bulma/field
+  - /composables/forms/create-input
+---
+
+# BuFile
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.file` call-to-action. The native file input is visually hidden by Bulma's CSS; the label is the hit target. Selected files arrive on `change` — there is no `v-model`.
+
+> [!NOTE]
+> Reference: [File on bulma.io](https://bulma.io/documentation/form/file/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+The default slot is the CTA text, defaulting to `Choose a file…`. `icon` is the Font Awesome class string on `.file-icon`, defaulting to `fas fa-upload`. `filename` reveals the `.file-name` span and switches the root to `has-name`; until a file is picked it shows `placeholder` (`No file uploaded`).
+
+Boxed, centered, right, fullwidth, color and size all land on the root `.file`. Native attributes (`multiple`, `accept`, `capture`) fall through to the hidden input.
+
+::: ds-example
+/systems/bulma/file/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuFile } from '@paper/bulma'
+</script>
+
+<template>
+  <BuFile />
+</template>
+```
+
+## Composed on v0
+
+`BuFile` calls [createInput](/composables/forms/create-input) for validation, form registration, the generated id and `aria-invalid`. The value is a `FileList | null`, dirtied once at least one file is selected. The element is a native `<input type="file">` inside the documented `.file` / `.file-label` / `.file-cta` tree.
+
+It does **not** wrap a v0 file compound — v0 does not ship one — and it does not wrap Input.Control either. Bulma's file CSS is written for this exact tree, including the class collision it ships: `.file-label` is both the outer `<label>` and the inner CTA `<span>`. A restyled text input would not produce that markup.
+
+Fallthrough is split. `class` and `style` merge onto `div.file`; every other attribute lands on the native input.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/form/file/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="file">
+  <label class="file-label">
+    <input class="file-input" type="file" name="resume" />
+    <span class="file-cta">
+      <span class="file-icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span class="file-label"> Choose a file… </span>
+    </span>
+  </label>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuFile name="resume">Choose a file…</BuFile>
+</template>
+```
+
+:::
+
+Bulma's docs hook a script on this markup to copy the chosen filename into `.file-name`. `filename` is that script: the span updates from the selected `FileList`, and `clear()` resets both the v0 value and the native input.
+
+## Examples
+
+::: ds-example
+/systems/bulma/file/filename
+
+### File name
+
+`filename` adds `has-name` and the `.file-name` span. The text in that span is not the slot — the slot is still the CTA. The span shows `placeholder` until a selection exists, then the selected file names joined with `', '`.
+
+`icon` is called out here because it is easy to assume the glyph is a slot. It is a class string, passed straight to `<i :class="icon">`, and the sandbox already loads Font Awesome. Pass `fas fa-upload` (the default) or any other FA class your page provides.
+
+Listen for `change` if the rest of the form needs the `FileList`. The same list is on the exposed `files` ref. Call `clear()` to empty both the model and the native control — assigning `null` to a ref you do not have is not enough, because `<input type="file">` does not accept a programmatic value other than `''`.
+
+`boxed` is the other layout, not shown here: `is-boxed` stacks the icon above the CTA. Combine it with `filename`, `centered` and a color the way the upstream docs do; every modifier is a class on the same root.
+:::
+
+## Props
+
+<!-- Hand-authored, temporarily. These pages predate DocsApi extraction for
+     @paper/* packages; once the generator covers the design systems this table
+     is replaced by <DocsApi />. Keep it in sync with BuFile.vue until then. -->
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `boxed` | `boolean` | `false` | `is-boxed` — icon above the label |
+| `centered` | `boolean` | `false` | `is-centered` |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` on the root |
+| `disabled` | `boolean` | `false` | Disables the native file input |
+| `error` | `boolean` | `false` | Force the invalid state — paints `is-danger` on the root |
+| `error-messages` | `string \| string[]` | — | Manual errors, merged with rule errors |
+| `filename` | `boolean` | `false` | `has-name` plus the `.file-name` span |
+| `form` | `string` | — | Id of the form to associate with. Snapshotted at setup |
+| `fullwidth` | `boolean` | `false` | `is-fullwidth` |
+| `icon` | `string` | `'fas fa-upload'` | Font Awesome classes for `.file-icon` |
+| `id` | `string \| number` | auto | Input id; generated when omitted. Snapshotted at setup |
+| `name` | `string` | — | Form field name. Snapshotted at setup |
+| `placeholder` | `string` | `'No file uploaded'` | Text in `.file-name` before a file is selected |
+| `required` | `boolean` | — | Marks the field required. Snapshotted at setup; the DOM attr stays reactive |
+| `right` | `boolean` | `false` | `is-right` — CTA on the right of the file name |
+| `rules` | `ValidationRule[]` | `[]` | Validation rules. Snapshotted at setup |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` on the root — omitted until passed |
+| `validate-on` | `ValidateOn` | `'blur'` | When validation runs |
+
+The default slot is the CTA label, defaulting to `Choose a file…`. Slot props: `files`, `label`, `errors`, `isValid`, `isFocused`.
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `change` | `FileList \| null` | Fired when the selection changes, including on `clear()` |
+
+| Expose | Type | Description |
+|--------|------|-------------|
+| `files` | `Readonly<ShallowRef<FileList \| null>>` | Current selection; `null` until a file is picked |
+| `clear` | `() => void` | Reset the v0 value and the native input |
+
+There is no `v-model`. `id`, `name`, `form`, `required` and `rules` are snapshotted at setup because `createInput` takes plain values for those options.
+
+## Accessibility
+
+The native input is visually hidden. The `<label class="file-label">` is the hit target and the accessible name comes from the CTA text in the slot, which the label wraps. The hidden input is still in the tab order — Bulma hides it with CSS, it is not `inert` — so a keyboard user lands on "Choose a file…" and the file picker opens on activation.
+
+### Naming
+
+The slot is the name. `placeholder` names the empty `.file-name` span, not the control. An empty slot falls back to `Choose a file…`, which is a name, just a generic one — pass something that says what file you want (`Upload resume`, `Choose image`).
+
+### Hidden input
+
+Do not add `aria-hidden` on the input to "clean up" the tree. It is the actual widget. The CTA spans are presentational siblings inside the label.
+
+### Validation
+
+`aria-invalid` when `isValid === false`, and `is-danger` on the root `.file`. A sibling `BuHelp validation` is not wired unless you wrap the field in an ambient `Input.Root` — `createInput` here is not that context.
+
+> [!NOTE]
+> `.file-label` is used twice in the tree, on the outer `<label>` and the inner CTA `<span>`. That collision is Bulma's. Do not "fix" it in userland; the stylesheet selects on both.
diff --git a/apps/docs/src/pages/systems/bulma/index.md b/apps/docs/src/pages/systems/bulma/index.md
index 2247b8acd0..147fd44783 100644
--- a/apps/docs/src/pages/systems/bulma/index.md
+++ b/apps/docs/src/pages/systems/bulma/index.md
@@ -11,9 +11,24 @@ features:
   level: 2
   order: 0
 related:
-  - /systems/bulma/modal
+  - /systems/bulma/breadcrumb
+  - /systems/bulma/checkbox
   - /systems/bulma/dropdown
+  - /systems/bulma/field
+  - /systems/bulma/file
+  - /systems/bulma/input
+  - /systems/bulma/menu
+  - /systems/bulma/message
+  - /systems/bulma/modal
+  - /systems/bulma/navbar
+  - /systems/bulma/notification
   - /systems/bulma/number-field
+  - /systems/bulma/pagination
+  - /systems/bulma/panel
+  - /systems/bulma/radio
+  - /systems/bulma/select
+  - /systems/bulma/tabs
+  - /systems/bulma/textarea
 ---
 
 # Bulma
@@ -26,6 +41,13 @@ Bulma is a CSS framework — it ships the `.modal`, `.dropdown` and `.navbar` st
 
 Nothing about your stylesheet changes. There is no theme to adopt, no class prefix to learn, and no CSS in the package.
 
+> [!NOTE]
+> Reference: [Bulma documentation](https://bulma.io/documentation/) — the class catalog this package implements.
+
+::: ds-example no-resize
+/systems/bulma/overview
+:::
+
 ## Installation
 
 ```bash
@@ -45,7 +67,7 @@ createApp(App).mount('#app')
 
 There is no plugin to install and no provider to mount. Import a component and use it:
 
-```vue
+```vue collapse
 <script setup lang="ts">
   import { BuModal, BuModalClose, BuModalContent } from '@paper/bulma'
 
@@ -93,9 +115,9 @@ Grouped by Bulma's own taxonomy. Each entry is the component you compose against
 
 | Bulma section | Components |
 |---------------|------------|
-| Components | BuBreadcrumb, [BuDropdown](/systems/bulma/dropdown), BuMenu, BuMessage, [BuModal](/systems/bulma/modal), BuNavbar, BuPagination, BuPanel, BuTabs |
-| Elements | BuNotification |
-| Form | BuCheckbox, BuControl, BuField, BuFile, BuHelp, BuInput, BuLabel, BuRadio, BuSelect, BuTextarea |
+| Components | [BuBreadcrumb](/systems/bulma/breadcrumb), [BuDropdown](/systems/bulma/dropdown), [BuMenu](/systems/bulma/menu), [BuMessage](/systems/bulma/message), [BuModal](/systems/bulma/modal), [BuNavbar](/systems/bulma/navbar), [BuPagination](/systems/bulma/pagination), [BuPanel](/systems/bulma/panel), [BuTabs](/systems/bulma/tabs) |
+| Elements | [BuNotification](/systems/bulma/notification) |
+| Form | [BuCheckbox](/systems/bulma/checkbox), [BuControl](/systems/bulma/field), [BuField](/systems/bulma/field), [BuFile](/systems/bulma/file), [BuHelp](/systems/bulma/field), [BuInput](/systems/bulma/input), [BuLabel](/systems/bulma/field), [BuRadio](/systems/bulma/radio), [BuSelect](/systems/bulma/select), [BuTextarea](/systems/bulma/textarea) |
 | None — composed | [BuNumberField](/systems/bulma/number-field)[^composed] |
 
 [^composed]: Bulma documents no number input. BuNumberField composes one out of the form parts it does document — attached controls, buttons and an input — so its conformance fixture is self-authored rather than captured, and declares the upstream provenance of every class in it.
diff --git a/apps/docs/src/pages/systems/bulma/input.md b/apps/docs/src/pages/systems/bulma/input.md
new file mode 100644
index 0000000000..a44029248d
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/input.md
@@ -0,0 +1,147 @@
+---
+title: BuInput - Bulma Text Input for Vue
+meta:
+- name: description
+  content: Bulma's text input for Vue — a native .input with v-model, color and size modifiers, and Vuetify0 validation that paints is-danger when the value fails.
+- name: keywords
+  content: bulma input, vue text field, is-static, form validation vue, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuInput'
+  level: 2
+  renderless: false
+  order: 13
+related:
+  - /systems/bulma
+  - /systems/bulma/field
+  - /components/forms/input
+---
+
+# BuInput
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.input` as a native text control, with `v-model`, the color and size modifiers the stylesheet already knows, and validation that paints `is-danger` when the value fails.
+
+> [!NOTE]
+> Reference: [Input on bulma.io](https://bulma.io/documentation/form/input/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`v-model` is a `string` and defaults to `''`. It stays a string for every `type`, including `number` — the DOM gives you a string, and quietly coercing it is how forms end up with `NaN` in a payload.
+
+A wrapper is optional. Bulma's `.input` is bare-capable, so `BuInput` renders the native control and nothing around it. Put it in a [BuField](/systems/bulma/field) when you need a label or help text; put it in a `BuControl` when you need icons, a loading spinner, or `is-expanded`.
+
+::: ds-example
+/systems/bulma/input/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuInput } from '@paper/bulma'
+</script>
+
+<template>
+  <BuInput />
+</template>
+```
+
+## Composed on v0
+
+`BuInput` is a renderless [Input.Root](/components/forms/input) around a native `Input.Control`. The root owns the value, focus, the validation pipeline and the aria ids; the control is the element you type into. No wrapper element lands, which is why the conformance fixture is a bare `<input class="input">`.
+
+v0's control already is a native `<input>`, and Bulma styles that element, so the compound is the right primitive — not a hand-rolled input. `is-danger` is the one piece the skin owns: it lands on the control when `isValid === false`, because Bulma's invalid state is a class, not a data attribute.
+
+Inside an existing `Input.Root` the wrapper is skipped and the control binds to the ambient context instead. A nested root would shadow it, which is why the skip exists — and why the ambient root then owns the whole behavioral surface. See [Validation and error text](#validation-and-error-text).
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/form/input/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<input class="input" type="text" placeholder="Text input" />
+```
+
+```vue Vue
+<template>
+  <BuInput placeholder="Text input" />
+</template>
+```
+
+:::
+
+`placeholder`, `autocomplete`, `maxlength` and the rest of the native surface fall through to the input. `class` and `style` do too — there is no wrapper to land them on.
+
+Loading is not an input modifier. `is-loading` goes on the wrapping [BuControl](/systems/bulma/field), and `size` on that control pairs the spinner with the input size.
+
+## Examples
+
+::: ds-example
+/systems/bulma/input/validation
+
+### Validation and error text
+
+Rules and error text come from an ambient `InputRoot` rather than from props on `BuInput`, and that is deliberate rather than incidental. `BuLabel` and `BuHelp` resolve their wiring by injection — the label's `for`, the help text's id, the input's `aria-errormessage` — so all three need to see the same context. A `BuInput` that creates its own root scopes that context to its own subtree, where a sibling label and help cannot reach it.
+
+Wrapping the field in `<InputRoot renderless>` puts the context one level up, where every sibling can inject it. `BuInput` detects the ambient root and renders only the control, so nothing is shadowed. The label and the help both need `namespace="v0:input:root"`: that is their default, but a mismatched namespace injects nothing and renders unwired — no `for`, no error text, and no complaint at runtime besides a development warning on `BuHelp`.
+
+Without that ambient root, `BuHelp validation` is empty while the input still shows `is-danger`. The field looks invalid and explains nothing. That is a known limitation, not a bug to work around with a slot.
+
+Inside an ambient root, that root owns the whole behavioral surface. `v-model`, `type`, `disabled`, `readonly`, `required`, `name`, `form`, `id`, `label` and every validation prop belong to it, and the same props passed to `BuInput` are ignored. Only the presentational modifiers — `color`, `size`, `rounded`, `plaintext` — still apply, and `plaintext` is then class-only (set `readonly` on the ambient root for the attribute).
+
+`validateOn` defaults to `blur`. The failing state itself is component-owned: `BuInput` puts `is-danger` on the input when validation fails; there is no class prop for it, and `error` forces the state rather than styling it.
+:::
+
+## Props
+
+<!-- Hand-authored, temporarily. These pages predate DocsApi extraction for
+     @paper/* packages; once the generator covers the design systems this table
+     is replaced by <DocsApi />. Keep it in sync with BuInput.vue until then. -->
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `string` | `''` | Field value. Always a string, whatever the `type` |
+| `v-model:focused` | `boolean` | `false` | Focus state |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` |
+| `disabled` | `boolean` | `false` | Disables the input |
+| `error` | `boolean` | `false` | Force the invalid state — paints `is-danger` |
+| `error-messages` | `string \| string[]` | — | Manual errors, merged with rule errors |
+| `form` | `string` | — | Id of the form to associate with |
+| `id` | `string \| number` | auto | Input id; generated when omitted |
+| `label` | `string` | — | Accessible name for the input |
+| `name` | `string` | — | Form field name |
+| `namespace` | `string` | `'v0:input:root'` | Context namespace the control binds to |
+| `plaintext` | `boolean` | `false` | `is-static` + readonly. Class-only inside an ambient root |
+| `readonly` | `boolean` | `false` | Input stays focusable; value cannot change |
+| `required` | `boolean` | — | Marks the field required |
+| `rounded` | `boolean` | `false` | `is-rounded` |
+| `rules` | `ValidationRule[]` | — | Validation rules |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` — omitted until passed |
+| `type` | `string` | `'text'` | Native input type |
+| `validate-on` | `ValidateOn` | — | When validation runs. v0 default is `'blur'` |
+
+Inside an ambient `Input.Root`, every behavioral row in that table is ignored. Native attributes (`placeholder`, `autocomplete`, `maxlength`, …) fall through to the input.
+
+## Accessibility
+
+The control is a real `<input>`. It needs an accessible name like any other: a sibling `BuLabel` pointed at its id, the `label` prop, or `aria-labelledby`. An unnamed field fails the axe `label` rule.
+
+### Naming
+
+Prefer a visible `BuLabel` over `label` on the input. The prop becomes an `aria-label` and hides the visible text from the accessible name if both exist. `placeholder` is not a name — it disappears the moment someone types, and it fails contrast in most themes.
+
+### States
+
+| State | Focusable | Submitted | Visual |
+|-------|-----------|-----------|--------|
+| `readonly` | Yes | Yes | Native readonly. Use `plaintext` when it should also look like static text (`is-static`) |
+| `disabled` | No | No | Native disabled, Bulma's disabled treatment |
+| `error` / failed rules | Yes | Yes | `is-danger` on the input; `aria-invalid` from v0 |
+
+### Validation
+
+`aria-invalid` follows `isValid === false`. `aria-errormessage` points at a `BuHelp validation` only when that help is inside the same ambient root. A `BuInput` with its own internal root and a sibling help will announce invalid without a message — the half-wired trap above.
diff --git a/apps/docs/src/pages/systems/bulma/menu.md b/apps/docs/src/pages/systems/bulma/menu.md
new file mode 100644
index 0000000000..27a7f8b223
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/menu.md
@@ -0,0 +1,141 @@
+---
+title: BuMenu - Bulma Menu for Vue
+meta:
+- name: description
+  content: Bulma's menu markup with Vuetify0 behavior — exclusive active tracking across nested lists, with is-active on the anchor, not the li.
+- name: keywords
+  content: bulma menu, vue menu, menu-list, menu-label, sidebar nav, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuMenu'
+  level: 2
+  renderless: false
+  order: 5
+related:
+  - /systems/bulma
+  - /systems/bulma/panel
+  - /components/providers/single
+---
+
+# BuMenu
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.menu` with the JavaScript it never shipped: exclusive active tracking across nested lists, driven by `v-model`.
+
+> [!NOTE]
+> Reference: [Menu on bulma.io](https://bulma.io/documentation/components/menu/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+Pass `items` as alternating sections — an optional `p.menu-label` plus a `ul.menu-list`. `v-model` is the selected item's value, and the value defaults to the label when you omit it. `is-active` lands on the **anchor**, not the `li`. That is the opposite of tabs and breadcrumb, and it is what Bulma's CSS selects on.
+
+::: ds-example
+/systems/bulma/menu/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuMenu } from '@paper/bulma'
+</script>
+
+<template>
+  <BuMenu />
+</template>
+```
+
+## Composed on v0
+
+`BuMenu` wraps v0's [Single](/components/providers/single). `Single.Root` is a pure provider — it renders no element — so the `aside.menu` and every list are Bulma's. Each entry is a renderless `Single.Item` whose `isSelected` and `select` are bound by hand onto the anchor: `is-active` for Bulma's CSS, `data-selected` for the data-attr hook, click to select.
+
+The Item `attrs` object is never spread. Those attrs include `aria-selected`, which is invalid on a role-less `<a>` (axe `aria-allowed-attr`, critical). Hand-picking is the same convention [BuPanel](/systems/bulma/panel) uses.
+
+Nested children are still `Single.Item`s in that one exclusive selection. They render as a bare `<ul>` sibling of the parent anchor, always visible. [createNested](/composables/selection/create-nested) and [Collapsible](/components/disclosure/collapsible) are skipped on purpose: Bulma documents no collapse, no tree, and no `aria-expanded` on these lists. Inventing one would be a different component.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/menu/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma collapse
+<aside class="menu">
+  <p class="menu-label">General</p>
+  <ul class="menu-list">
+    <li><a>Dashboard</a></li>
+    <li><a>Customers</a></li>
+  </ul>
+  <p class="menu-label">Administration</p>
+  <ul class="menu-list">
+    <li><a>Team Settings</a></li>
+    <li>
+      <a class="is-active">Manage Your Team</a>
+      <ul>
+        <li><a>Members</a></li>
+        <li><a>Plugins</a></li>
+        <li><a>Add a member</a></li>
+      </ul>
+    </li>
+    <li><a>Invitations</a></li>
+    <li><a>Cloud Storage Environment Settings</a></li>
+    <li><a>Authentication</a></li>
+  </ul>
+  <p class="menu-label">Transactions</p>
+  <ul class="menu-list">
+    <li><a>Payments</a></li>
+    <li><a>Transfers</a></li>
+    <li><a>Balance</a></li>
+  </ul>
+</aside>
+```
+
+```vue Vue
+<template>
+  <BuMenu v-model="active" :items="items" />
+</template>
+```
+
+:::
+
+You write no `is-active` and no nested-list markup. The `items` array owns the sections, and `v-model` owns which anchor is current.
+
+## Examples
+
+::: ds-example
+/systems/bulma/menu/nested
+
+### Nested lists
+
+One level of `children` on an item renders a bare `<ul>` as a sibling of that item's anchor, inside the same `<li>`. The nested list has no class, and it is always visible. Bulma documents no collapse for `.menu-list`, so there is no disclosure, no chevron, and no `aria-expanded` — clicking a parent selects it the same way clicking a child does.
+
+That is the whole nesting story. The nested entries share the menu's single `v-model`; they are not a second selection and not a tree. Reach for this when the sidebar has a short group that should stay expanded — team settings, a docs section. If you need a collapsible tree, that is [Treeview](/components/disclosure/treeview) in Vuetify0, and it will not give you Bulma's markup.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* -->
+
+`BuMenu` renders `aside.menu` and owns the selection. There are no part components; the lists come from `items`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `T` | — | Selected item value |
+| `items` | `BuMenuSection<T>[]` | `[]` | Alternating label + list sections |
+
+Each section is an optional `label` (`p.menu-label`) plus `items`. Each item:
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `label` | `string` | — | Anchor text |
+| `value` | `T` | `label` | Selection value matched against `v-model` |
+| `href` | `string` | — | Optional `href` on the anchor |
+| `children` | `BuMenuItem<T>[]` | — | One level of nesting; always visible |
+
+## Accessibility
+
+The anchors are role-less links, which is what Bulma ships. They are not a `menu` / `menubar` widget and they do not get `aria-selected`. Active state is `is-active` plus `data-selected` — visual and style-hook only.
+
+> [!NOTE]
+> Spreading v0 Item `attrs` onto these anchors fails axe (`aria-allowed-attr`, critical). The component never does that; neither should a hand-rolled slot.
diff --git a/apps/docs/src/pages/systems/bulma/message.md b/apps/docs/src/pages/systems/bulma/message.md
new file mode 100644
index 0000000000..9299fc8a2a
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/message.md
@@ -0,0 +1,145 @@
+---
+title: BuMessage - Bulma Message for Vue
+meta:
+- name: description
+  content: Bulma's message in Vue — header and body as parts, v-model dismiss from the header's delete button, and a headerless variant that is simply a message with no header.
+- name: keywords
+  content: bulma message, vue message, message-header, message-body, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuMessage'
+  level: 2
+  renderless: false
+  order: 6
+related:
+  - /systems/bulma
+  - /systems/bulma/notification
+  - /components/primitives/presence
+---
+
+# BuMessage
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.message` with a dismissible header and a headerless body-only variant.
+
+> [!NOTE]
+> Reference: [Message on bulma.io](https://bulma.io/documentation/components/message/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`BuMessage` is `article.message` and owns visibility through `v-model`, default `true`. Compose `BuMessageHeader` and `BuMessageBody` inside it. The header always renders the `.delete` button; omitting the header is the documented body-only variant, and that variant is not dismissible because there is no button to click.
+
+::: ds-example
+/systems/bulma/message/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuMessage, BuMessageBody, BuMessageHeader } from '@paper/bulma'
+</script>
+
+<template>
+  <BuMessage>
+    <BuMessageHeader />
+
+    <BuMessageBody />
+  </BuMessage>
+</template>
+```
+
+## Composed on v0
+
+`BuMessage` wraps v0's [Presence](/components/primitives/presence) the same way `BuNotification` does: `v-model` drives present/leaving/unmounted, `data-state` lands on `article.message`, and a dismiss unmounts the article on the next tick.
+
+The rest is package context, not a v0 compound. `BuMessage` provides `bulma:message` with a `close()` that writes `false` through the model. `BuMessageHeader` is the only consumer — it renders the documented `.delete` and calls `close()` on click. `BuMessageBody` injects nothing; it is a `div.message-body`.
+
+Injection is optional. A header rendered outside `BuMessage` still emits the Bulma markup, warns once in dev, and the delete button is inert. Parts backed by a v0 context throw instead; this family does not, because the header's only job is a classed div and a button.
+
+Presence does not supply a header, a body, or a close control. Those are Bulma's regions, expressed as parts, which is why a message with no `BuMessageHeader` is still a valid message — it is the body-only fixture, not a half-composed one.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/message/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — `type="button"` on the delete control is the tolerated difference.
+
+::: code-group no-filename
+
+```html Bulma
+<article class="message">
+  <div class="message-header">
+    <p>Hello World</p>
+    <button class="delete" aria-label="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+    diam, et dictum <a>felis venenatis</a> efficitur.
+  </div>
+</article>
+```
+
+```vue Vue
+<template>
+  <BuMessage>
+    <BuMessageHeader>
+      <p>Hello World</p>
+    </BuMessageHeader>
+
+    <BuMessageBody>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+      nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+      diam, et dictum <a>felis venenatis</a> efficitur.
+    </BuMessageBody>
+  </BuMessage>
+</template>
+```
+
+:::
+
+You write no `.delete` and no close handler. Composing `BuMessageHeader` is what opts the message into being dismissible; the part owns the button.
+
+## Examples
+
+::: ds-example
+/systems/bulma/message/body-only
+
+### Body only
+
+Omit `BuMessageHeader` and the article is Bulma's documented no-header variant: a body, no delete, no dismiss. The model still exists — you can hide the message from outside — but there is no control inside it to write `false`.
+
+Reach for it when the message is standing copy rather than a dismissible notice: an explanatory block in a form, a quoted snippet, a permanent warning that should not have an X. The headered variant is the one for a notice the reader is allowed to put away.
+
+`color` and `size` still apply. They are classes on `article.message`, and they do not depend on a header being present.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* yet. Keep in sync with the SFC. -->
+
+`BuMessage` renders `article.message` and owns visibility. The regions are parts.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `boolean` | `true` | Visibility. `false` unmounts the message |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` |
+
+| Part | Renders | Notes |
+|------|---------|-------|
+| `BuMessageHeader` | `div.message-header` | Always renders `.delete`, wired through `bulma:message` |
+| `BuMessageBody` | `div.message-body` | Pure markup; the headerless variant is a message with no header |
+
+The header's default slot is the title. Bulma wraps its own in a `<p>`; the part does not wrap for you.
+
+## Accessibility
+
+`BuMessageHeader`'s delete button carries `aria-label="delete"` and `type="button"`, matching the fixture. Dismiss is that click. There is no Escape handler, and nothing moves focus when the message appears or leaves.
+
+> [!NOTE]
+> A `BuMessageHeader` rendered outside `BuMessage` still emits the header markup. In development it warns once that `bulma:message` was missing; the delete button then does nothing. Nest the part, or you get a button that looks like a close control and isn't one.
+
+The root is an `article` with no live-region role. It will not announce itself. Put the severity in the header text; `color` is decoration.
diff --git a/apps/docs/src/pages/systems/bulma/modal.md b/apps/docs/src/pages/systems/bulma/modal.md
index aba81eeba5..cff81ccdb2 100644
--- a/apps/docs/src/pages/systems/bulma/modal.md
+++ b/apps/docs/src/pages/systems/bulma/modal.md
@@ -23,6 +23,9 @@ Bulma's `.modal` with the JavaScript it never shipped: open state, backdrop dism
 
 <DocsPageFeatures :frontmatter />
 
+> [!NOTE]
+> Reference: [Modal on bulma.io](https://bulma.io/documentation/components/modal/) — classes and visual variants. This page is the JavaScript.
+
 ## Usage
 
 `v-model` owns the open state. The panel is whichever part you compose inside: `BuModalContent` for the plain variant, `BuModalCard` for the head/body/foot one. Everything inside the panel is Bulma's.
@@ -35,7 +38,7 @@ Bulma's `.modal` with the JavaScript it never shipped: open state, backdrop dism
 
 Both panels are shown here for completeness — a modal composes one or the other, never both.
 
-```vue Anatomy no-filename
+```vue Anatomy no-filename collapse
 <script setup lang="ts">
   import {
     BuModal,
@@ -68,13 +71,23 @@ Both panels are shown here for completeness — a modal composes one or the othe
 </template>
 ```
 
+## Composed on v0
+
+Wraps v0's [Dialog](/components/disclosure/dialog). `Dialog.Root` owns `v-model`. `Dialog.Content` is renderless so the host can stay a `<div class="modal">` — the fixture demands that, never a native `<dialog>`. `BuModalContent` and `BuModalCard` take the identity Dialog would have bound (`id`, `role`, `aria-modal`, and on the card `aria-labelledby`) off the dialog context; the stack `z-index` lands on `.modal`.
+
+Two things v0 ships that this wrapper skips. `Scrim` is global per stack ticket — mounting it behind a modal that already paints `.modal-background` would double the backdrop, so the backdrop is hand-rolled. And v0 has no `useFocusTrap`: Tab and Shift+Tab wrap inside `.modal`, and focus returns to the trigger on close, including when the modal unmounts while open.
+
+The parts that do map through: `BuModalTitle` is `Dialog.Title as="p"`. `BuModalClose` is `Dialog.Close`. `BuModalHead` also renders the documented `.delete` close through `Dialog.Close`.
+
+`blocking` is Dialog's `blocking` — backdrop clicks only. Escape still closes.
+
 ## The markup you know
 
 The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/modal/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
 
 ::: code-group no-filename
 
-```html Bulma
+```html Bulma collapse
 <div class="modal is-active">
   <div class="modal-background"></div>
   <div class="modal-card">
@@ -95,7 +108,7 @@ The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentati
 </div>
 ```
 
-```vue Vue
+```vue Vue collapse
 <template>
   <BuModal v-model="open">
     <BuModalCard>
diff --git a/apps/docs/src/pages/systems/bulma/navbar.md b/apps/docs/src/pages/systems/bulma/navbar.md
new file mode 100644
index 0000000000..95defe2934
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/navbar.md
@@ -0,0 +1,221 @@
+---
+title: BuNavbar - Bulma Navbar for Vue
+meta:
+- name: description
+  content: Bulma's navbar markup with Vuetify0 behavior — burger toggle, is-active on both ends, and the aria wiring between burger and menu.
+- name: keywords
+  content: bulma navbar, vue navbar, navbar-burger, navbar-menu, is-hoverable, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuNavbar'
+  level: 2
+  renderless: false
+  order: 7
+related:
+  - /systems/bulma
+  - /systems/bulma/dropdown
+  - /components/actions/toggle
+---
+
+# BuNavbar
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.navbar` with the JavaScript it never shipped: the burger toggle, `is-active` on both ends, and the aria wiring between them.
+
+> [!NOTE]
+> Reference: [Navbar on bulma.io](https://bulma.io/documentation/components/navbar/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+Compose three parts: `BuNavbar` renders `nav.navbar` and owns the open state, `BuNavbarBrand` wraps your brand items and renders the burger, and `BuNavbarMenu` renders `.navbar-menu`. `v-model` is a boolean — burger and menu open together.
+
+`.navbar-start` and `.navbar-end` are yours. So is `.navbar-item.has-dropdown.is-hoverable`: hover is Bulma CSS, no JavaScript, and there is no click-dropdown to configure.
+
+::: ds-example
+/systems/bulma/navbar/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuNavbar, BuNavbarBrand, BuNavbarMenu } from '@paper/bulma'
+</script>
+
+<template>
+  <BuNavbar>
+    <BuNavbarBrand />
+
+    <BuNavbarMenu />
+  </BuNavbar>
+</template>
+```
+
+## Composed on v0
+
+`BuNavbar` owns a boolean `v-model` — the burger/menu open state — and provides it through the package context `bulma:navbar`. That is a Toggle-shaped model, not a disclosure compound.
+
+[Collapsible](/components/disclosure/collapsible) is skipped because `Collapsible.Content` sets the `hidden` attribute, and `.navbar-menu.is-active { display: block }` in Bulma's CSS silently beats `[hidden]`. The menu would look open while remaining hidden to the platform. [Popover](/components/disclosure/popover) is skipped for the same class of reason: it would hoist the menu into the top layer and fight Bulma's in-flow layout.
+
+v0's [Toggle](/components/actions/toggle) shows up in one place. The burger is `Toggle.Root` rendered `as="a"` — that supplies `role="button"`, tabindex, and the Enter/Space polyfill. Toggle only emits `aria-pressed`, so `aria-expanded` and `aria-label="menu"` are bound by hand, as is `data-target` pointing at the id `BuNavbarMenu` wears. Four `aria-hidden` spans are the 1.0 burger glyph; 0.9 had three.
+
+The brand slot sits **beside** the burger, not around it. Slot content is the `.navbar-item` links and logos; the burger is appended after them, matching the markup Bulma documents.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/navbar/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — a generated `id` and its matching `data-target` are tolerated when you omit `id`.
+
+::: code-group no-filename
+
+```html Bulma collapse
+<nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+      <img src="logo.png" alt="Logo" />
+    </a>
+
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item">
+        Home
+      </a>
+
+      <a class="navbar-item">
+        Documentation
+      </a>
+
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link">
+          More
+        </a>
+
+        <div class="navbar-dropdown">
+          <a class="navbar-item">
+            About
+          </a>
+          <a class="navbar-item is-selected">
+            Jobs
+          </a>
+          <a class="navbar-item">
+            Contact
+          </a>
+          <hr class="navbar-divider">
+          <a class="navbar-item">
+            Report an issue
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a class="button is-primary">
+            <strong>Sign up</strong>
+          </a>
+          <a class="button is-light">
+            Log in
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
+```
+
+```vue Vue collapse
+<template>
+  <BuNavbar id="navbarBasicExample" v-model="open">
+    <BuNavbarBrand>
+      <a class="navbar-item" href="https://bulma.io">
+        <img src="logo.png" alt="Logo">
+      </a>
+    </BuNavbarBrand>
+
+    <BuNavbarMenu>
+      <div class="navbar-start">
+        <a class="navbar-item">Home</a>
+        <a class="navbar-item">Documentation</a>
+
+        <div class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link">More</a>
+          <div class="navbar-dropdown">
+            <a class="navbar-item">About</a>
+            <a class="navbar-item is-selected">Jobs</a>
+            <a class="navbar-item">Contact</a>
+            <hr class="navbar-divider">
+            <a class="navbar-item">Report an issue</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-primary"><strong>Sign up</strong></a>
+            <a class="button is-light">Log in</a>
+          </div>
+        </div>
+      </div>
+    </BuNavbarMenu>
+  </BuNavbar>
+</template>
+```
+
+:::
+
+You write no burger, no `is-active`, and no `aria-expanded` / `data-target` pair. `BuNavbarBrand` owns the burger; the open class is driven by `v-model` onto both ends.
+
+## Examples
+
+::: ds-example
+/systems/bulma/navbar/color
+
+### Color
+
+`color` adds `is-{color}` to `.navbar`. That is the whole modifier: it does not change open state, burger wiring, or how a hover dropdown works. Reach for it when the bar itself is the brand surface — a primary header, a danger admin strip — and leave it off when the bar should recede behind the page.
+
+`has-dropdown is-hoverable` remains passthrough markup either way. Hover is Bulma CSS. There is no prop for a click-dropdown, and adding one would fight that CSS.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* -->
+
+`BuNavbar` renders `nav.navbar` and owns the open state; the regions are parts.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `boolean` | `false` | Burger / menu open state |
+| `id` | `string` | auto | Applied to `.navbar-menu` and mirrored on the burger's `data-target` |
+| `label` | `string` | `'main navigation'` | Accessible name for the `<nav>` landmark |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` on `.navbar` |
+
+| Part | Renders | Notes |
+|------|---------|-------|
+| `BuNavbarBrand` | `div.navbar-brand` | Slot is brand items; renders `.navbar-burger` after them when `burger` (default `true`) |
+| `BuNavbarMenu` | `div.navbar-menu` | `is-active` follows the navbar `v-model`; slot is `.navbar-start` / `.navbar-end` |
+
+`BuNavbarBrand` takes one prop of its own:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `burger` | `boolean` | `true` | Render the `.navbar-burger` toggle |
+
+## Accessibility
+
+`nav` carries `role="navigation"` and `aria-label` from `label`. The burger is a `role="button"` anchor with `aria-label="menu"` and `aria-expanded` bound to the open state; `data-target` points at the menu's `id`. The four inner spans are `aria-hidden`.
+
+Toggle also emits `aria-pressed` onto that same button. Both attributes are allowed on `role="button"`; whether pressed belongs on a disclosure trigger is an APG question, not an axe one.
+
+> [!NOTE]
+> Resize the frame to a mobile width to use the burger. On desktop Bulma shows `.navbar-menu` regardless of `is-active`.
diff --git a/apps/docs/src/pages/systems/bulma/notification.md b/apps/docs/src/pages/systems/bulma/notification.md
new file mode 100644
index 0000000000..836f4718cc
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/notification.md
@@ -0,0 +1,120 @@
+---
+title: BuNotification - Bulma Notification for Vue
+meta:
+- name: description
+  content: Bulma's notification in Vue — v-model dismiss that unmounts the block, color and light modifiers, and a labelled delete button the upstream documentation ships unlabeled.
+- name: keywords
+  content: bulma notification, vue notification, delete button, is-light, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuNotification'
+  level: 2
+  renderless: false
+  order: 11
+related:
+  - /systems/bulma
+  - /systems/bulma/message
+  - /components/primitives/presence
+---
+
+# BuNotification
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.notification` with a dismiss that unmounts the block.
+
+> [!NOTE]
+> Reference: [Notification on bulma.io](https://bulma.io/documentation/elements/notification/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`v-model` is visibility, default `true`. The `.delete` button is always rendered and always wired; clicking it sets the model to `false` and the notification leaves the DOM. `color` and `light` are the two modifiers.
+
+::: ds-example
+/systems/bulma/notification/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuNotification } from '@paper/bulma'
+</script>
+
+<template>
+  <BuNotification />
+</template>
+```
+
+## Composed on v0
+
+`BuNotification` wraps v0's [Presence](/components/primitives/presence) and nothing else. Presence is a mount lifecycle, not a notification primitive: `v-model` drives present/leaving/unmounted, `data-state` is forwarded onto `.notification`, and with Presence's default `immediate` the leaving state resolves on the next tick, so a dismissed notification unmounts rather than sitting in the DOM at `display: none`.
+
+The delete button is not Presence's. Presence has no close affordance and no default content. `BuNotification` always renders `button.delete` as the first child — matching the fixture's shape — and the click writes `false` through the model. The one deliberate delta from the fixture is `aria-label="delete"`: upstream ships that button unlabeled, which is an axe failure, and labelling it is a declared deviation on the [Bulma overview](/systems/bulma).
+
+There is no queue, no timeout, and no severity role. A notification that should announce, stack, or expire is a different component — [Snackbar](/components/semantic/snackbar) in v0, or `BuMessage` when the block has a header.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/elements/notification/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — `type="button"` on the delete control is the tolerated difference.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="notification">
+  <button class="delete"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
+  <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+  nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
+  et dictum <a>felis venenatis</a> efficitur.
+</div>
+```
+
+```vue Vue
+<template>
+  <BuNotification>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
+    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
+    et dictum <a>felis venenatis</a> efficitur.
+  </BuNotification>
+</template>
+```
+
+:::
+
+You write no `.delete` and no dismiss handler. The component owns the button and drives it from `v-model`.
+
+## Examples
+
+::: ds-example
+/systems/bulma/notification/color
+
+### Color
+
+`color` is `is-{color}` on `.notification`: `primary`, `link`, `info`, `success`, `warning`, `danger`. `light` tints the same palette. Neither prop changes behavior — a danger notification dismisses the same way a default one does.
+
+Pick by what the reader must do about it. `danger` and `warning` for failures and risks, `success` for a completed action, `info` / `link` / `primary` for context with no action attached. Color is the only visual signal of severity, and color alone does not survive grayscale: put the meaning in the words.
+
+There is no live-region role on the root. A notification that is already in the initial HTML is not announced; if the message must be heard, render it when the condition becomes true, or use a component that is a live region.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* yet. Keep in sync with the SFC. -->
+
+`BuNotification` is a single component. There are no parts. The delete button is not optional.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `boolean` | `true` | Visibility. `false` unmounts the notification |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` |
+| `light` | `boolean` | `false` | `is-light` |
+
+## Accessibility
+
+The delete button always carries `aria-label="delete"` and `type="button"`. Upstream's documentation markup ships that button unlabeled; labelling it is a declared a11y addition, not a fixture miss.
+
+Dismiss is click only. There is no Escape handler and no focus move when the notification appears or leaves. After dismiss the node is gone, so a keyboard user who was on the delete button falls back to wherever the browser puts focus — usually the document body.
+
+The root is a `div` with no live-region role. It will not announce itself. Pair copy that names the severity; do not rely on `color` to do that job.
diff --git a/apps/docs/src/pages/systems/bulma/number-field.md b/apps/docs/src/pages/systems/bulma/number-field.md
index 4602ddd0e4..5718c9012b 100644
--- a/apps/docs/src/pages/systems/bulma/number-field.md
+++ b/apps/docs/src/pages/systems/bulma/number-field.md
@@ -23,6 +23,9 @@ A number field Bulma never documented, built entirely from parts it did: stepper
 
 <DocsPageFeatures :frontmatter />
 
+> [!NOTE]
+> Reference: Bulma has no number field. The layout is [form addons on bulma.io](https://bulma.io/documentation/form/general/#form-addons).
+
 ## Usage
 
 `v-model` holds the value — a number, or `null` while the field is empty. `min`, `max` and `step` bound it, and each stepper goes inert the moment the value reaches its bound. Compose the three parts in order: decrement, input, increment.
@@ -35,7 +38,7 @@ Give the input the leftover width with `expanded`. Without it the input sizes to
 
 ## Anatomy
 
-```vue Anatomy no-filename
+```vue Anatomy no-filename collapse
 <script setup lang="ts">
   import {
     BuNumberField,
@@ -56,6 +59,14 @@ Give the input the leftover width with `expanded`. Without it the input sizes to
 </template>
 ```
 
+## Composed on v0
+
+Composes v0's [NumberField](/components/forms/number-field). `BuNumberField` creates a `NumberField.Root` unless an ambient one already exists; `Decrement`, `Control`, and `Increment` live inside each part's own `.control`.
+
+v0 owns the spinbutton: the math, the bounds, formatting, validation, keyboard, hold-to-repeat. Bulma owns `.field.has-addons` radii — each part wraps `.control` because first- and last-child selectors are how the group gets its corners.
+
+An ambient `NumberField.Root` swallows every behavioral prop on `BuNumberField` — `v-model`, bounds, format, validation. Only presentational modifiers still apply. Point `BuLabel` and `BuHelp` at `namespace="v0:number-field:root"` or they inject nothing.
+
 ## The markup it composes
 
 Bulma ships no number input. There is no upstream component page to copy from, so this one is composed out of things Bulma does document: the [attached-controls layout](https://bulma.io/documentation/form/general/#form-addons) — `.field.has-addons` wrapping one `.control` per item — with `button.button` steppers on either side of an `input.input`. No class in it is invented, and the package ships no CSS.
diff --git a/apps/docs/src/pages/systems/bulma/pagination.md b/apps/docs/src/pages/systems/bulma/pagination.md
new file mode 100644
index 0000000000..b2397304ed
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/pagination.md
@@ -0,0 +1,142 @@
+---
+title: BuPagination - Bulma Pagination for Vue
+meta:
+- name: description
+  content: Bulma's pagination markup with Vuetify0 behavior — 1-indexed v-model, ellipses and disabled prev/next owned by the component, anchors in the documented DOM order.
+- name: keywords
+  content: bulma pagination, vue pagination, pagination-list, is-current, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuPagination'
+  level: 2
+  renderless: false
+  order: 8
+related:
+  - /systems/bulma
+  - /systems/bulma/breadcrumb
+  - /components/semantic/pagination
+---
+
+# BuPagination
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.pagination` with the JavaScript it never shipped: current page, ellipses, and disabled previous/next.
+
+> [!NOTE]
+> Reference: [Pagination on bulma.io](https://bulma.io/documentation/components/pagination/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`v-model` is the current page, 1-indexed. `pages` is how many there are. Previous, next, the page list and any ellipses are generated — there are no parts to compose, because the fixture mandates that DOM order.
+
+::: ds-example
+/systems/bulma/pagination/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuPagination } from '@paper/bulma'
+</script>
+
+<template>
+  <BuPagination />
+</template>
+```
+
+## Composed on v0
+
+`BuPagination` maps onto v0's [Pagination](/components/semantic/pagination) compound: `Pagination.Root`, `Pagination.Prev`, `Pagination.Next`, `Pagination.Item` and `Pagination.Ellipsis`.
+
+v0's `size` is total items, not page count. The mapping is `:size="pages"` with `:items-per-page="1"`, which is why the prop is named `pages` and why `size` / `itemsPerPage` never appear on this surface.
+
+`visible` is `totalVisible`. Omit it and the root measures the container and shows as many page links as fit; pass it and the window is a hard cap, with ellipses filling the gaps.
+
+What the wrapper owns is the Bulma shape the compound does not: anchors (`as="a"`) instead of buttons, `is-disabled` / `is-current` classes instead of a `disabled` attribute, and the DOM order Previous, Next, *then* `ul.pagination-list`. CSS flex-order puts the list between the two anchors visually; the harness diffs the source order, so swapping them to "look right" in the template would fail conformance.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/pagination/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — localized `aria-label` text and the absence of placeholder `href`s are the tolerated differences.
+
+::: code-group no-filename
+
+```html Bulma collapse
+<nav class="pagination" role="navigation" aria-label="pagination">
+  <a href="#" class="pagination-previous">Previous</a>
+  <a href="#" class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 1">1</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 45">45</a>
+    </li>
+    <li>
+      <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 47">47</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a href="#" class="pagination-link" aria-label="Goto page 86">86</a>
+    </li>
+  </ul>
+</nav>
+```
+
+```vue Vue
+<template>
+  <BuPagination v-model="page" :pages="86" :visible="7" />
+</template>
+```
+
+:::
+
+You write no `is-current`, no `is-disabled`, and no ellipses. The component owns those from `v-model` and `pages`. An out-of-range model is clamped back so the parent matches what renders.
+
+## Examples
+
+::: ds-example
+/systems/bulma/pagination/window
+
+### Visible window
+
+`visible` caps how many page links are shown at once. The rest collapse behind ellipses, with the first page, the last page, and a window around the current page kept. The example is the fixture's 86-page run with the cap at 5 — enough to force both ellipses without hiding the current page.
+
+Omit `visible` and the cap is measured from the container instead. That is the right default for a pagination that should fill its bar; pass `visible` when the surrounding layout cannot tolerate a changing control width, or when you want the same window at every breakpoint.
+
+The trade is information. A hard cap of 5 on 86 pages tells the reader almost nothing about where they are in the run except through the current-page mark and the first/last links. Pair it with copy that names the page, or raise the cap until the window is a useful map.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* yet. Keep in sync with the SFC. -->
+
+`BuPagination` is a single component. There are no parts. Previous and next labels are props, not slots — the component owns that DOM order.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `number` | `1` | Current page, 1-indexed |
+| `pages` | `number` | `1` | Total page count |
+| `previous` | `string` | `'Previous'` | `.pagination-previous` label |
+| `next` | `string` | `'Next page'` | `.pagination-next` label |
+| `visible` | `number` | — | Visible page-link cap; omit for auto-measure |
+| `ellipsis` | `string` | `'…'` | Character between page ranges |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` |
+| `rounded` | `boolean` | — | `is-rounded` |
+| `centered` | `boolean` | — | `is-centered` |
+| `right` | `boolean` | — | `is-right` |
+
+## Accessibility
+
+The root is a `nav` whose accessible name comes from the locale key `Pagination.label`. Page links, previous and next are anchors, not buttons: `disabled` is omitted (it is not valid on `<a>`), and the inert state is `is-disabled` plus `aria-disabled` and `tabindex="-1"`. The current page is `is-current` with `aria-current="page"`.
+
+Enter and Space activate those anchors. Ellipses are `aria-hidden`. Page-link names come from the locale keys `Pagination.goToPage` and `Pagination.currentPage` — do not copy the fixture's "Goto page N" strings; they are documentation placeholders, and the conformance suite ignores the difference on purpose.
diff --git a/apps/docs/src/pages/systems/bulma/panel.md b/apps/docs/src/pages/systems/bulma/panel.md
new file mode 100644
index 0000000000..ef0443d81f
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/panel.md
@@ -0,0 +1,260 @@
+---
+title: BuPanel - Bulma Panel for Vue
+meta:
+- name: description
+  content: Bulma's panel markup with Vuetify0 behavior — independent selection for blocks and for tabs, composed as the flat children Bulma already documents.
+- name: keywords
+  content: bulma panel, vue panel, panel-block, panel-tabs, panel-heading, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuPanel'
+  level: 2
+  renderless: false
+  order: 9
+related:
+  - /systems/bulma
+  - /systems/bulma/menu
+  - /components/providers/selection
+---
+
+# BuPanel
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.panel` with the JavaScript it never shipped: independent selection for blocks and for tabs, composed as the flat children Bulma already documents.
+
+> [!NOTE]
+> Reference: [Panel on bulma.io](https://bulma.io/documentation/components/panel/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`BuPanel` renders `nav.panel` and owns the **block** `v-model`. Compose the rest in document order, with no list wrapper: `BuPanelHeading`, optional passthrough `.panel-block` markup, `BuPanelTabs` / `BuPanelTab` for the filter row, `BuPanelBlock` for selectable rows, `BuPanelIcon` for the leading glyph.
+
+Tabs have a second `v-model` of their own. The two selections never share.
+
+::: ds-example
+/systems/bulma/panel/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename collapse
+<script setup lang="ts">
+  import {
+    BuPanel,
+    BuPanelBlock,
+    BuPanelHeading,
+    BuPanelIcon,
+    BuPanelTab,
+    BuPanelTabs,
+  } from '@paper/bulma'
+</script>
+
+<template>
+  <BuPanel>
+    <BuPanelHeading />
+
+    <BuPanelTabs>
+      <BuPanelTab />
+    </BuPanelTabs>
+
+    <BuPanelBlock>
+      <BuPanelIcon />
+    </BuPanelBlock>
+  </BuPanel>
+</template>
+```
+
+## Composed on v0
+
+`BuPanel` wraps its children in v0's [Selection](/components/providers/selection). That is the block `v-model`. `BuPanelBlock` is a renderless `Selection.Item` with the same hand-picked anchor bindings [BuMenu](/systems/bulma/menu) uses: `is-active`, `data-selected`, click to select — never the Item `attrs` spread, because `aria-selected` is invalid on a role-less `<a>`. `multiple` is Selection's `multiple`, forwarded.
+
+`BuPanelTabs` opens a nested [Single](/components/providers/single) of its own, with `mandatory="force"` so one tab is always active, matching Bulma's docs. Its `v-model` never shares the panel's. Clicking a tab cannot select a block, and the reverse.
+
+`label.panel-block > input[type=checkbox]` rows, search fields, and footer buttons stay native passthrough. They are not `BuPanelBlock` and they do not enroll in either selection.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/panel/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma collapse
+<nav class="panel">
+  <p class="panel-heading">Repositories</p>
+  <div class="panel-block">
+    <p class="control has-icons-left">
+      <input class="input" type="text" placeholder="Search" />
+      <span class="icon is-left">
+        <i class="fas fa-search" aria-hidden="true"></i>
+      </span>
+    </p>
+  </div>
+  <p class="panel-tabs">
+    <a class="is-active">All</a>
+    <a>Public</a>
+    <a>Private</a>
+    <a>Sources</a>
+    <a>Forks</a>
+  </p>
+  <a class="panel-block is-active">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    bulma
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    marksheet
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    minireset.css
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-book" aria-hidden="true"></i>
+    </span>
+    jgthms.github.io
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-code-branch" aria-hidden="true"></i>
+    </span>
+    daniellowtw/infboard
+  </a>
+  <a class="panel-block">
+    <span class="panel-icon">
+      <i class="fas fa-code-branch" aria-hidden="true"></i>
+    </span>
+    mojs
+  </a>
+  <label class="panel-block">
+    <input type="checkbox" />
+    remember me
+  </label>
+  <div class="panel-block">
+    <button class="button is-link is-outlined is-fullwidth">
+      Reset all filters
+    </button>
+  </div>
+</nav>
+```
+
+```vue Vue collapse
+<template>
+  <BuPanel v-model="selected">
+    <BuPanelHeading>Repositories</BuPanelHeading>
+
+    <div class="panel-block">
+      <p class="control has-icons-left">
+        <input class="input" placeholder="Search" type="text">
+        <span class="icon is-left">
+          <i aria-hidden="true" class="fas fa-search" />
+        </span>
+      </p>
+    </div>
+
+    <BuPanelTabs v-model="tab">
+      <BuPanelTab value="All">All</BuPanelTab>
+      <BuPanelTab value="Public">Public</BuPanelTab>
+      <BuPanelTab value="Private">Private</BuPanelTab>
+      <BuPanelTab value="Sources">Sources</BuPanelTab>
+      <BuPanelTab value="Forks">Forks</BuPanelTab>
+    </BuPanelTabs>
+
+    <BuPanelBlock value="bulma">
+      <BuPanelIcon icon="fas fa-book" />
+      bulma
+    </BuPanelBlock>
+
+    <BuPanelBlock value="marksheet">
+      <BuPanelIcon icon="fas fa-book" />
+      marksheet
+    </BuPanelBlock>
+
+    <BuPanelBlock value="minireset.css">
+      <BuPanelIcon icon="fas fa-book" />
+      minireset.css
+    </BuPanelBlock>
+
+    <BuPanelBlock value="jgthms.github.io">
+      <BuPanelIcon icon="fas fa-book" />
+      jgthms.github.io
+    </BuPanelBlock>
+
+    <BuPanelBlock value="daniellowtw/infboard">
+      <BuPanelIcon icon="fas fa-code-branch" />
+      daniellowtw/infboard
+    </BuPanelBlock>
+
+    <BuPanelBlock value="mojs">
+      <BuPanelIcon icon="fas fa-code-branch" />
+      mojs
+    </BuPanelBlock>
+
+    <label class="panel-block">
+      <input type="checkbox">
+      remember me
+    </label>
+
+    <div class="panel-block">
+      <button class="button is-link is-outlined is-fullwidth" type="button">
+        Reset all filters
+      </button>
+    </div>
+  </BuPanel>
+</template>
+```
+
+:::
+
+You write no `is-active` on tabs or blocks. Each `v-model` owns its own row of it. Search, checkbox and footer stay the markup Bulma already gave you.
+
+## Examples
+
+::: ds-example
+/systems/bulma/panel/tabs
+
+### Tabs and blocks
+
+`BuPanelTabs` is its own [Single](/components/providers/single) with `mandatory="force"`. One tab is always active — an empty `shallowRef` is enough; the first tab is selected as it registers. That `v-model` is independent of the panel's. Filter the list from the tab value if you want; the component will not do it for you, because Bulma's panel does not either.
+
+`BuPanelBlock` rows live in the parent [Selection](/components/providers/selection). Default is exclusive. Pass `multiple` on `BuPanel` when several rows should stay `is-active` together — a tag filter, a batch of checked-looking rows that are not actually checkboxes.
+
+Everything else in the panel is passthrough. A search field is `div.panel-block`. A checkbox row is `label.panel-block > input`. A footer button is `div.panel-block > button`. None of those enroll in either selection, which is why a "remember me" checkbox does not steal `is-active` from the repo list.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* -->
+
+`BuPanel` renders `nav.panel` and owns the block selection. Everything else is a part, or passthrough markup.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `T \| T[]` | — | Selected block value(s) |
+| `multiple` | `boolean` | `false` | Allow multiple selected `a.panel-block` rows |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` on `.panel` |
+
+| Part | Renders | Notes |
+|------|---------|-------|
+| `BuPanelHeading` | `p.panel-heading` | Title bar; pure markup |
+| `BuPanelTabs` | `p.panel-tabs` | Own Single `v-model`; `mandatory="force"` |
+| `BuPanelTab` | `a` | `value` matched against the tabs `v-model` |
+| `BuPanelBlock` | `a.panel-block` | `value` matched against the panel `v-model` |
+| `BuPanelIcon` | `span.panel-icon` | `icon` is the inner `<i>` class list (`fas fa-book`); default slot replaces it |
+
+`BuPanelTabs` takes only `v-model`. `BuPanelTab` and `BuPanelBlock` take `value`. `BuPanelIcon` takes `icon`.
+
+## Accessibility
+
+`.panel` is a `<nav>` without a name in the markup Bulma ships; this component does not invent one. Add `aria-label` yourself if the panel is the page's only navigation, or leave it when it sits beside a named landmark.
+
+Tabs and blocks are role-less anchors with `is-active` / `data-selected`. They are not a `tablist` and not a `listbox`. Spreading v0 Item `attrs` onto them fails axe (`aria-allowed-attr`, critical) — the parts never do that.
+
+Checkbox rows stay native `label > input[type=checkbox]`. That is the right control for a boolean; do not restyle a `BuPanelBlock` into a checkbox.
diff --git a/apps/docs/src/pages/systems/bulma/radio.md b/apps/docs/src/pages/systems/bulma/radio.md
new file mode 100644
index 0000000000..62ef12b28f
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/radio.md
@@ -0,0 +1,145 @@
+---
+title: BuRadio - Bulma Radio for Vue
+meta:
+- name: description
+  content: Bulma's radio for Vue — native radios grouped by name, sharing a v-model, with the documented label disabled treatment and Vuetify0 validation.
+- name: keywords
+  content: bulma radio, vue radio, native radio, radio group, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuRadio'
+  level: 2
+  renderless: false
+  order: 17
+related:
+  - /systems/bulma
+  - /systems/bulma/field
+  - /systems/bulma/checkbox
+---
+
+# BuRadio
+
+<DocsPageFeatures :frontmatter />
+
+A native radio wrapped in `label.radio`. `value` is required. Radios that share a `name` and a `v-model` are the group — there is no group component in Tier 1.
+
+> [!NOTE]
+> Reference: [Radio on bulma.io](https://bulma.io/documentation/form/radio/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+The value lives on each radio, not on a parent. `v-model` is compared to `value`; the matching radio is checked. Give every radio in the question the same `name` so the UA groups them for form submission and arrow-key movement.
+
+The default slot is the label text. Selection only ever moves, it never clears: clicking the checked radio keeps it checked, which is the native contract.
+
+::: ds-example
+/systems/bulma/radio/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuRadio } from '@paper/bulma'
+</script>
+
+<template>
+  <BuRadio />
+</template>
+```
+
+## Composed on v0
+
+`BuRadio` calls [createInput](/composables/forms/create-input) for validation, form registration, the generated id and `aria-invalid`. The element is a native `<input type="radio">` inside `<label class="radio">`.
+
+It does **not** wrap v0's Radio compound. That compound is a `role="radio"` button inside a `Radio.Group`, with roving tabindex and an indicator slot. Bulma styles a visible native radio, and a button gets none of your CSS. This is the Ruling 2 deviation: Tier 1 wraps the native where the stylesheet demands it. Grouping is the native `name` attribute, not a group part.
+
+Fallthrough is split. `class` and `style` merge onto the wrapping label; every other attribute lands on the native input.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/form/radio/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="control">
+  <label class="radio">
+    <input type="radio" name="answer" />
+    Yes
+  </label>
+  <label class="radio">
+    <input type="radio" name="answer" />
+    No
+  </label>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuControl>
+    <BuRadio v-model="answer" name="answer" value="yes">Yes</BuRadio>
+    <BuRadio v-model="answer" name="answer" value="no">No</BuRadio>
+  </BuControl>
+</template>
+```
+
+:::
+
+Siblings sit inside a `BuControl` (inline) or a `.radios` wrapper (Bulma 1.0 list layout). Pick one; they are layout, not state.
+
+## Examples
+
+::: ds-example
+/systems/bulma/radio/disabled
+
+### Disabled options
+
+`disabled` on one radio withdraws that option the same way [BuCheckbox](/systems/bulma/checkbox) does: `disabled` on the native input **and** on the wrapping label. The input's `disabled` is the real one — out of the tab order, not togglable, skipped by form submit. The label's `disabled` is the non-standard attribute Bulma documents and styles.
+
+There is no "disable the group" prop, because there is no group component. Omit the radios, or disable each of them. A disabled option still occupies the group: the shared `name` and `v-model` keep working for the ones that remain.
+:::
+
+## Props
+
+<!-- Hand-authored, temporarily. These pages predate DocsApi extraction for
+     @paper/* packages; once the generator covers the design systems this table
+     is replaced by <DocsApi />. Keep it in sync with BuRadio.vue until then. -->
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `T` | — | Selected value. This radio is checked when it equals `value` |
+| `value` | `T` | required | Comparison value written to the model when this radio is checked |
+| `disabled` | `boolean` | `false` | Disables the input **and** puts `disabled` on the wrapping label |
+| `error` | `boolean` | `false` | Force the invalid state (`aria-invalid`, no color class) |
+| `error-messages` | `string \| string[]` | — | Manual errors, merged with rule errors |
+| `form` | `string` | — | Id of the form to associate with. Snapshotted at setup |
+| `id` | `string \| number` | auto | Input id; generated when omitted. Snapshotted at setup |
+| `name` | `string` | — | Native radio grouping. Snapshotted at setup |
+| `required` | `boolean` | — | Marks the field required. Snapshotted at setup; the DOM attr stays reactive |
+| `rules` | `ValidationRule[]` | `[]` | Validation rules. Snapshotted at setup |
+| `validate-on` | `ValidateOn` | `'blur'` | When validation runs |
+
+`T` defaults to `string`. The default slot is the label text. Slot props: `errors`, `isChecked`, `isFocused`, `isValid`.
+
+`id`, `name`, `form`, `required` and `rules` are snapshotted at setup because `createInput` takes plain values for those options. The `name` you pass is also bound reactively on the DOM input, so grouping still updates if you change it.
+
+## Accessibility
+
+The widget is a native radio. The wrapping `<label>` is the name and the hit target. The UA groups radios that share `name` and moves selection with the arrow keys; there is no roving tabindex of our own.
+
+### Naming
+
+Put the name in the default slot. An empty slot is an unnamed radio. Every radio in a question needs its own text — "Yes" / "No" / "Maybe", not a single group label standing in for all three. A group label is a sibling `BuLabel` (or a `<fieldset>` / `<legend>`) in addition to, not instead of, the per-radio text.
+
+### Grouping
+
+`name` is the group. Two radios with different names are two questions, even if they share a `v-model`. Two radios with the same name and different `v-model` refs will fight the UA. Share both.
+
+### Disabled
+
+Same quirk as `BuCheckbox`: `input[disabled]` is native; `label[disabled]` is the non-standard attribute Bulma's CSS selects on. Expect axe and validator discussion. Declared SPEC limitation, kept for fixture fidelity. Assistive technology respects the input.
+
+### Validation
+
+`aria-invalid` when `isValid === false`. No color class. Each radio has its own `createInput` instance, so a rule on one radio does not validate the group. Put group-level rules on a surrounding form, or accept that this is a native radio and required means "this particular input must be checked."
diff --git a/apps/docs/src/pages/systems/bulma/select.md b/apps/docs/src/pages/systems/bulma/select.md
new file mode 100644
index 0000000000..30d3a6e559
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/select.md
@@ -0,0 +1,146 @@
+---
+title: BuSelect - Bulma Select for Vue
+meta:
+- name: description
+  content: Bulma's native select for Vue — a .select wrapping a real select element, with v-model, multiple, color and size modifiers, and Vuetify0 validation.
+- name: keywords
+  content: bulma select, vue select, native select, is-multiple, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuSelect'
+  level: 2
+  renderless: false
+  order: 15
+related:
+  - /systems/bulma
+  - /systems/bulma/field
+  - /composables/forms/create-input
+---
+
+# BuSelect
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.select` wrapping a real `<select>`. Native options go in the default slot; `v-model` is a string, or a string array when `multiple` is set.
+
+> [!NOTE]
+> Reference: [Select on bulma.io](https://bulma.io/documentation/form/select/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+This is a styled native select, not a listbox. Put `<option>` (and `<optgroup>`) elements in the default slot the way you would in HTML. Color, size, rounded, multiple and loading land on the `.select` wrapper.
+
+`v-model` is `string | string[] | undefined`. Bind a `shallowRef` for a single select and a `ref([])` for `multiple`. An uncontrolled multiple select is healed to `[]` at setup so Vue does not warn on mount.
+
+::: ds-example
+/systems/bulma/select/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuSelect } from '@paper/bulma'
+</script>
+
+<template>
+  <BuSelect />
+</template>
+```
+
+## Composed on v0
+
+`BuSelect` calls [createInput](/composables/forms/create-input) for validation, form registration, the generated id and `aria-invalid`. The element is a native `<select>` inside `div.select`.
+
+It does **not** wrap v0's [Select](/components/forms/select) compound. That compound is a listbox — `role="listbox"`, virtual focus, a popover of items — and none of that is an element Bulma's `.select` CSS can paint. A non-native `BuSelect` would get none of your stylesheet. This is the Ruling 2 deviation: Tier 1 form controls wrap the native where Bulma's CSS demands it.
+
+Fallthrough is split. `class` and `style` merge onto the wrapper; every other attribute (`aria-*`, `autofocus`, `data-*`, …) lands on the native select. `inheritAttrs` is false, so nothing double-applies.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/form/select/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="select">
+  <select>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </select>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuSelect>
+    <option>Select dropdown</option>
+    <option>With options</option>
+  </BuSelect>
+</template>
+```
+
+:::
+
+Icons wrap the select, they do not go on it. A `BuControl` with `icons="left"` around `BuSelect` is the documented pairing; the icon size tracks the select size.
+
+`loading` is the exception to the input family's rule: `is-loading` goes on the `.select` wrapper here, where it replaces the dropdown arrow, not on a wrapping control.
+
+## Examples
+
+::: ds-example
+/systems/bulma/select/multiple
+
+### Multiple
+
+`multiple` does two things at once: `is-multiple` on the wrapper, and the native `multiple` attribute on the select. `v-model` becomes a `string[]`. Bind a `ref([])` — arrays get `ref`, primitives get `shallowRef`.
+
+`rows` is the native `size` attribute, not a CSS size. It is how many option rows are visible; it pairs with `multiple` the way Bulma documents it. CSS `size` (`is-small` and friends) is the `size` prop, and it still lands on the wrapper.
+
+A failed value paints `is-danger` on the wrapper, same as color. There is no listbox keyboard map to document — the UA owns arrow keys, typeahead and space. If you need filtering, multi-select chips, or a trigger that is not a native select, that is v0's Select (or Combobox), and it will not look like Bulma's.
+:::
+
+## Props
+
+<!-- Hand-authored, temporarily. These pages predate DocsApi extraction for
+     @paper/* packages; once the generator covers the design systems this table
+     is replaced by <DocsApi />. Keep it in sync with BuSelect.vue until then. -->
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `string \| string[] \| undefined` | — | Selected value. Array when `multiple` |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` on the wrapper |
+| `disabled` | `boolean` | `false` | Disables the native select |
+| `error` | `boolean` | `false` | Force the invalid state — paints `is-danger` on the wrapper |
+| `error-messages` | `string \| string[]` | — | Manual errors, merged with rule errors |
+| `form` | `string` | — | Id of the form to associate with. Snapshotted at setup |
+| `id` | `string \| number` | auto | Select id; generated when omitted. Snapshotted at setup |
+| `loading` | `boolean` | `false` | `is-loading` on the wrapper — replaces the dropdown arrow |
+| `multiple` | `boolean` | `false` | `is-multiple` on the wrapper plus the native `multiple` attr |
+| `name` | `string` | — | Form field name. Snapshotted at setup |
+| `required` | `boolean` | — | Marks the field required. Snapshotted at setup; the DOM attr stays reactive |
+| `rounded` | `boolean` | `false` | `is-rounded` on the wrapper |
+| `rows` | `number \| string` | — | Native `size` attribute — visible option rows |
+| `rules` | `ValidationRule[]` | `[]` | Validation rules. Snapshotted at setup |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` on the wrapper — omitted until passed |
+| `validate-on` | `ValidateOn` | `'blur'` | When validation runs |
+
+The default slot is the native `<select>` content. Slot props: `errors`, `isFocused`, `isValid`.
+
+`id`, `name`, `form`, `required` and `rules` are snapshotted at setup because `createInput` takes plain values for those options.
+
+## Accessibility
+
+The widget is a native `<select>`. The UA provides the accessible name (a sibling `BuLabel` with `for`, or a wrapping label), the list of options, and the keyboard map. `BuSelect` adds `aria-invalid` when `isValid === false`.
+
+### Naming
+
+Point a `BuLabel` at the select's id, or wrap the field the way Bulma does. The wrapper `div.select` is presentational; it does not name the control.
+
+### Keyboard
+
+Arrow keys, Home / End, typeahead and Space are native. There is no roving tabindex and no `aria-activedescendant`. Do not reach for v0 Select to "upgrade" this — you would lose the markup your CSS is written for.
+
+### Validation
+
+`aria-invalid` is the only extra state. There is no `is-danger` on the native element; the class lands on `.select`. A sibling `BuHelp validation` still needs an ambient `Input.Root` to wire `aria-errormessage` — `createInput` on `BuSelect` is not that context.
diff --git a/apps/docs/src/pages/systems/bulma/tabs.md b/apps/docs/src/pages/systems/bulma/tabs.md
new file mode 100644
index 0000000000..5290bda2b3
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/tabs.md
@@ -0,0 +1,144 @@
+---
+title: BuTabs - Bulma Tabs for Vue
+meta:
+- name: description
+  content: Bulma's tabs markup with Vuetify0 selection — is-active, tabpanels and keyboard selection owned by the compound, with boxed and toggle modifiers living on the list.
+- name: keywords
+  content: bulma tabs, vue tabs, is-boxed, is-toggle, tabpanel, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuTabs'
+  level: 2
+  renderless: false
+  order: 10
+related:
+  - /systems/bulma
+  - /systems/bulma/pagination
+  - /components/disclosure/tabs
+---
+
+# BuTabs
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.tabs` with selection and panels — the JavaScript and the tabpanels the CSS framework never documented.
+
+> [!NOTE]
+> Reference: [Tabs on bulma.io](https://bulma.io/documentation/components/tabs/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`BuTabs` is the selection context and renders no element of its own. Modifiers live on `BuTabList`. `BuTab` siblings go inside the list; `BuTabPanel` siblings of the list hold the content. `v-model` is the selected tab's `value`; leave it empty and the first tab is selected.
+
+::: ds-example
+/systems/bulma/tabs/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuTab, BuTabList, BuTabPanel, BuTabs } from '@paper/bulma'
+</script>
+
+<template>
+  <BuTabs>
+    <BuTabList>
+      <BuTab />
+    </BuTabList>
+
+    <BuTabPanel />
+  </BuTabs>
+</template>
+```
+
+## Composed on v0
+
+`BuTabs` maps onto v0's [Tabs](/components/disclosure/tabs) compound: `Tabs.Root`, `Tabs.List`, `Tabs.Item` and `Tabs.Panel`.
+
+`BuTabs` is `Tabs.Root` with no element of its own. Bulma's `.tabs` block is the list, and the panels are siblings of that block, so the selection context has to wrap both. Every `.tabs` modifier — `centered`, `boxed`, `toggle`, `size` — therefore lives on `BuTabList`, which is the `div.tabs` plus the `ul` (`Tabs.List as="ul"`). Putting those classes on the root would paint a wrapper Bulma does not document.
+
+`BuTab` is `Tabs.Item` with `as` set to `null`, not the `renderless` prop. `as` feeds the item's button polyfill, so `renderless` alone would leak `type="button"` and `disabled` onto the anchor. The item renders `li.is-active > a` itself, which is what the fixture demands: `is-active` on the `li`, no `href` on the `a`.
+
+That renderless item registers no element. v0's `focusSelectedTab` / `focusAdjacent` then become no-ops — Arrow keys still move selection, panels and `aria-selected`, but DOM focus stays on the previously selected anchor. That is a documented APG deviation, not an oversight; the v0-core follow-up is to let `TabsItem` accept an element via registration so a renderless consumer can supply the focus target.
+
+`BuTabPanel` is `Tabs.Panel` as-is. The `hidden` attribute is fine here: Bulma defines no panel CSS, so there is no class for the wrapper to fight.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/components/tabs/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. Upstream documents no tabpanels — those are component territory. The conformance suite diffs the list.
+
+::: code-group no-filename
+
+```html Bulma
+<div class="tabs">
+  <ul>
+    <li class="is-active"><a>Pictures</a></li>
+    <li><a>Music</a></li>
+    <li><a>Videos</a></li>
+    <li><a>Documents</a></li>
+  </ul>
+</div>
+```
+
+```vue Vue
+<template>
+  <BuTabs>
+    <BuTabList>
+      <BuTab value="pictures">Pictures</BuTab>
+      <BuTab value="music">Music</BuTab>
+      <BuTab value="videos">Videos</BuTab>
+      <BuTab value="documents">Documents</BuTab>
+    </BuTabList>
+  </BuTabs>
+</template>
+```
+
+:::
+
+You write no `is-active`. The first tab is selected when `v-model` is empty; after that, the model owns the class.
+
+## Examples
+
+::: ds-example
+/systems/bulma/tabs/boxed
+
+### Boxed
+
+`boxed` is `is-boxed` on `.tabs` — the bordered, folder-tab look. It is a list modifier, so it lives on `BuTabList` with `centered`, `toggle` and `size`, not on `BuTabs`. The root has no class to hang a modifier on.
+
+Reach for boxed when the tabs sit on a content panel and you want the selected tab to read as attached to it. `toggle` is the other shape: mutually exclusive buttons, no folder metaphor. The two modifiers are independent classes in Bulma, so stacking them is possible and usually a mistake — pick the look the surrounding layout is built for.
+
+Size still belongs on the list. `small` / `medium` / `large` scale the tabs without changing which item is selected, and they compose with boxed the same way they compose with the default underline style.
+:::
+
+## Props
+
+<!-- Hand-authored; <DocsApi /> does not cover @paper/* yet. Keep in sync with the SFC. -->
+
+`BuTabs` is the selection context. Everything visible is a part.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `T` | — | Selected tab `value`. Empty selects the first tab |
+
+| Part | Renders | Props |
+|------|---------|-------|
+| `BuTabList` | `div.tabs` + `ul` | `centered`, `boxed`, `toggle`, `size` (`'small' \| 'normal' \| 'medium' \| 'large'`) |
+| `BuTab` | `li` > `a` | `value`, `disabled` |
+| `BuTabPanel` | `div[role=tabpanel]` | `value` (required) |
+
+`BuTab` and `BuTabPanel` both expose `isSelected` as a slot prop.
+
+## Accessibility
+
+`BuTabList`'s `ul` is `role="tablist"`. Each `BuTab` puts `role="presentation"` on the `li` so the list's required children are the `role="tab"` anchors, not the list items — without that, axe flags `aria-required-children` / `aria-required-parent`. Selected state is `aria-selected` on the tab and `hidden` on the matching `role="tabpanel"`, which is labelled through `aria-labelledby`.
+
+| Key | Behavior |
+|-----|----------|
+| Click | Selects that tab |
+| Arrow Left / Right | Moves **selection**, not focus |
+| Home / End | Selects first / last |
+
+> [!WARNING]
+> Arrow keys update selection, panels and `aria-selected`, but the focus ring and the screen-reader cursor stay on the tab that was focused. `BuTab` is renderless, so v0 has no element to move focus to. This is an APG tabs deviation the axe sweep cannot catch. Click still focuses the tab you clicked; keyboard users who start on a tab and arrow away will hear the old tab while a new panel is showing.
diff --git a/apps/docs/src/pages/systems/bulma/textarea.md b/apps/docs/src/pages/systems/bulma/textarea.md
new file mode 100644
index 0000000000..b275f047ba
--- /dev/null
+++ b/apps/docs/src/pages/systems/bulma/textarea.md
@@ -0,0 +1,139 @@
+---
+title: BuTextarea - Bulma Textarea for Vue
+meta:
+- name: description
+  content: Bulma's textarea for Vue — a native .textarea with v-model, sizes, colors, a fixed-size option, and Vuetify0 validation on the same Input family as BuInput.
+- name: keywords
+  content: bulma textarea, vue textarea, has-fixed-size, multiline input vue, bulma vue, paper bulma
+features:
+  category: Component
+  label: 'C: BuTextarea'
+  level: 2
+  renderless: false
+  order: 14
+related:
+  - /systems/bulma
+  - /systems/bulma/field
+  - /components/forms/input
+---
+
+# BuTextarea
+
+<DocsPageFeatures :frontmatter />
+
+Bulma's `.textarea` as a native multiline control — the same Input family as [BuInput](/systems/bulma/input), grown to paragraph-length values, with `fixed` in place of rounded and plaintext.
+
+> [!NOTE]
+> Reference: [Textarea on bulma.io](https://bulma.io/documentation/form/textarea/) — classes and visual variants. This page is the JavaScript.
+
+## Usage
+
+`v-model` is a `string` and defaults to `''`. `rows` is a native attribute, not a prop — it falls through to the textarea and sets how many lines are visible before scrolling. The box still resizes unless you pass `fixed`.
+
+A wrapper is optional. Put it in a [BuField](/systems/bulma/field) when you need a label; put it in a `BuControl` when you need a loading spinner.
+
+::: ds-example
+/systems/bulma/textarea/basic
+:::
+
+## Anatomy
+
+```vue Anatomy no-filename
+<script setup lang="ts">
+  import { BuTextarea } from '@paper/bulma'
+</script>
+
+<template>
+  <BuTextarea />
+</template>
+```
+
+## Composed on v0
+
+`BuTextarea` is a renderless [Input.Root](/components/forms/input) around `Input.Control` rendered as a native `<textarea>`. The compound is element-agnostic — the whole wiring surface (value sync, focus tracking, the validation pipeline, the aria attributes) applies to a textarea exactly as it does to an input. v0 supplies the behavior; the skin picks the element with `as="textarea"` and the `.textarea` class.
+
+There is no `rounded` and no `plaintext`. Those are input modifiers. The extra knob here is `fixed`, which emits `has-fixed-size` and disables the resize handle.
+
+Inside an existing `Input.Root` the wrapper is skipped and the control binds to the ambient context instead. The ambient-root contract is the same as `BuInput`: the root owns `v-model`, `disabled`, `readonly`, `required`, `name`, `form`, `id`, `label` and every validation prop; only `color`, `size` and `fixed` still apply on the textarea.
+
+## The markup you know
+
+The Bulma tab is the markup [published on bulma.io](https://bulma.io/documentation/form/textarea/), captured verbatim in the conformance fixture. The Vue tab is the component that renders it. The conformance suite diffs the two on every test run — element for element, class for class.
+
+::: code-group no-filename
+
+```html Bulma
+<textarea class="textarea" placeholder="e.g. Hello world"></textarea>
+```
+
+```vue Vue
+<template>
+  <BuTextarea placeholder="e.g. Hello world" />
+</template>
+```
+
+:::
+
+Loading is not a textarea modifier. `is-loading` goes on the wrapping [BuControl](/systems/bulma/field), and `size` on that control pairs the spinner with the textarea size.
+
+## Examples
+
+::: ds-example
+/systems/bulma/textarea/fixed
+
+### Fixed size
+
+`fixed` adds `has-fixed-size` and that is the whole resize story. The handle disappears; the box stays at the height `rows` (or the UA default) set. Reach for it when a resize handle would shove neighbouring controls around — a comment box in a tight card, a notes field in a horizontal form.
+
+Leave it off when the reader might have more to say than the visible rows. The default textarea resizes vertically, which is the signal that an essay is allowed even if you opened the box at three lines.
+
+The ambient-root trap on [BuInput](/systems/bulma/input) applies here too. A sibling `BuHelp validation` is empty unless the field is wrapped in `<InputRoot renderless>` — the textarea still paints `is-danger`, the help stays blank.
+:::
+
+## Props
+
+<!-- Hand-authored, temporarily. These pages predate DocsApi extraction for
+     @paper/* packages; once the generator covers the design systems this table
+     is replaced by <DocsApi />. Keep it in sync with BuTextarea.vue until then. -->
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `v-model` | `string` | `''` | Field value |
+| `v-model:focused` | `boolean` | `false` | Focus state |
+| `color` | `'primary' \| 'link' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | `is-{color}` |
+| `disabled` | `boolean` | `false` | Disables the textarea |
+| `error` | `boolean` | `false` | Force the invalid state — paints `is-danger` |
+| `error-messages` | `string \| string[]` | — | Manual errors, merged with rule errors |
+| `fixed` | `boolean` | `false` | `has-fixed-size` — disables resize |
+| `form` | `string` | — | Id of the form to associate with |
+| `id` | `string \| number` | auto | Textarea id; generated when omitted |
+| `label` | `string` | — | Accessible name |
+| `name` | `string` | — | Form field name |
+| `namespace` | `string` | `'v0:input:root'` | Context namespace the control binds to |
+| `readonly` | `boolean` | `false` | Textarea stays focusable; value cannot change |
+| `required` | `boolean` | — | Marks the field required |
+| `rules` | `ValidationRule[]` | — | Validation rules |
+| `size` | `'small' \| 'normal' \| 'medium' \| 'large'` | — | `is-{size}` — omitted until passed |
+| `validate-on` | `ValidateOn` | — | When validation runs. v0 default is `'blur'` |
+
+Inside an ambient `Input.Root`, every behavioral row in that table is ignored. Native attributes (`placeholder`, `rows`, `maxlength`, …) fall through to the textarea.
+
+## Accessibility
+
+The control is a real `<textarea>`. Name it with a sibling `BuLabel`, the `label` prop, or `aria-labelledby`. An unnamed field fails the axe `label` rule.
+
+### Naming
+
+Prefer a visible `BuLabel` over `label` on the textarea. `placeholder` is a format hint, not a name — `e.g. Hello world` tells the reader what a filled box looks like; it does not tell assistive technology what the field is for.
+
+### States
+
+| State | Focusable | Submitted | Visual |
+|-------|-----------|-----------|--------|
+| `readonly` | Yes | Yes | Native readonly |
+| `disabled` | No | No | Native disabled, Bulma's disabled treatment |
+| `error` / failed rules | Yes | Yes | `is-danger` on the textarea; `aria-invalid` from v0 |
+
+### Validation
+
+Same contract as `BuInput`. `aria-invalid` follows `isValid === false`. `BuHelp validation` only wires `aria-errormessage` inside an ambient `Input.Root`. Without that root the textarea can look invalid and explain nothing.
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index 4207f218e7..0e66480e03 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -283,6 +283,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/components/semantic/alert': RouteRecordInfo<
+      '/components/semantic/alert',
+      '/components/semantic/alert',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/components/semantic/avatar': RouteRecordInfo<
       '/components/semantic/avatar',
       '/components/semantic/avatar',
@@ -1165,6 +1172,20 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/systems/bulma/breadcrumb': RouteRecordInfo<
+      '/systems/bulma/breadcrumb',
+      '/systems/bulma/breadcrumb',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/checkbox': RouteRecordInfo<
+      '/systems/bulma/checkbox',
+      '/systems/bulma/checkbox',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/systems/bulma/dropdown': RouteRecordInfo<
       '/systems/bulma/dropdown',
       '/systems/bulma/dropdown',
@@ -1172,6 +1193,41 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/systems/bulma/field': RouteRecordInfo<
+      '/systems/bulma/field',
+      '/systems/bulma/field',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/file': RouteRecordInfo<
+      '/systems/bulma/file',
+      '/systems/bulma/file',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/input': RouteRecordInfo<
+      '/systems/bulma/input',
+      '/systems/bulma/input',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/menu': RouteRecordInfo<
+      '/systems/bulma/menu',
+      '/systems/bulma/menu',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/message': RouteRecordInfo<
+      '/systems/bulma/message',
+      '/systems/bulma/message',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/systems/bulma/modal': RouteRecordInfo<
       '/systems/bulma/modal',
       '/systems/bulma/modal',
@@ -1179,6 +1235,20 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/systems/bulma/navbar': RouteRecordInfo<
+      '/systems/bulma/navbar',
+      '/systems/bulma/navbar',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/notification': RouteRecordInfo<
+      '/systems/bulma/notification',
+      '/systems/bulma/notification',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/systems/bulma/number-field': RouteRecordInfo<
       '/systems/bulma/number-field',
       '/systems/bulma/number-field',
@@ -1186,6 +1256,48 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    '/systems/bulma/pagination': RouteRecordInfo<
+      '/systems/bulma/pagination',
+      '/systems/bulma/pagination',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/panel': RouteRecordInfo<
+      '/systems/bulma/panel',
+      '/systems/bulma/panel',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/radio': RouteRecordInfo<
+      '/systems/bulma/radio',
+      '/systems/bulma/radio',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/select': RouteRecordInfo<
+      '/systems/bulma/select',
+      '/systems/bulma/select',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/tabs': RouteRecordInfo<
+      '/systems/bulma/tabs',
+      '/systems/bulma/tabs',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
+    '/systems/bulma/textarea': RouteRecordInfo<
+      '/systems/bulma/textarea',
+      '/systems/bulma/textarea',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     '/systems/emerald/': RouteRecordInfo<
       '/systems/emerald/',
       '/systems/emerald',
@@ -1697,6 +1809,14 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'src/pages/components/semantic/alert.md': {
+      routes:
+        | '/components/semantic/alert'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
     'src/pages/components/semantic/avatar.md': {
       routes:
         | '/components/semantic/avatar'
@@ -2705,6 +2825,22 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'src/pages/systems/bulma/breadcrumb.md': {
+      routes:
+        | '/systems/bulma/breadcrumb'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/checkbox.md': {
+      routes:
+        | '/systems/bulma/checkbox'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
     'src/pages/systems/bulma/dropdown.md': {
       routes:
         | '/systems/bulma/dropdown'
@@ -2713,6 +2849,46 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'src/pages/systems/bulma/field.md': {
+      routes:
+        | '/systems/bulma/field'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/file.md': {
+      routes:
+        | '/systems/bulma/file'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/input.md': {
+      routes:
+        | '/systems/bulma/input'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/menu.md': {
+      routes:
+        | '/systems/bulma/menu'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/message.md': {
+      routes:
+        | '/systems/bulma/message'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
     'src/pages/systems/bulma/modal.md': {
       routes:
         | '/systems/bulma/modal'
@@ -2721,6 +2897,22 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'src/pages/systems/bulma/navbar.md': {
+      routes:
+        | '/systems/bulma/navbar'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/notification.md': {
+      routes:
+        | '/systems/bulma/notification'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
     'src/pages/systems/bulma/number-field.md': {
       routes:
         | '/systems/bulma/number-field'
@@ -2729,6 +2921,54 @@ declare module 'vue-router/auto-routes' {
       pathParamNames:
         | never
     }
+    'src/pages/systems/bulma/pagination.md': {
+      routes:
+        | '/systems/bulma/pagination'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/panel.md': {
+      routes:
+        | '/systems/bulma/panel'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/radio.md': {
+      routes:
+        | '/systems/bulma/radio'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/select.md': {
+      routes:
+        | '/systems/bulma/select'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/tabs.md': {
+      routes:
+        | '/systems/bulma/tabs'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
+    'src/pages/systems/bulma/textarea.md': {
+      routes:
+        | '/systems/bulma/textarea'
+      views:
+        | never
+      pathParamNames:
+        | never
+    }
     'src/pages/systems/emerald/index.md': {
       routes:
         | '/systems/emerald/'
diff --git a/apps/docs/tsconfig.examples.json b/apps/docs/tsconfig.examples.json
index 5d01e99da2..96cd55dec9 100644
--- a/apps/docs/tsconfig.examples.json
+++ b/apps/docs/tsconfig.examples.json
@@ -11,7 +11,9 @@
       "#v0": ["../../packages/0/src"],
       "#v0/*": ["../../packages/0/src/*"],
       "@paper/emerald": ["../../packages/emerald/src"],
-      "@paper/emerald/*": ["../../packages/emerald/src/*"]
+      "@paper/emerald/*": ["../../packages/emerald/src/*"],
+      "@paper/bulma": ["../../packages/bulma/src"],
+      "@paper/bulma/*": ["../../packages/bulma/src/*"]
     },
     "lib": [
       "dom",
@@ -34,11 +36,14 @@
     "../../packages/0/src/**/*.ts",
     "../../packages/0/src/**/*.vue",
     "../../packages/emerald/src/**/*.ts",
-    "../../packages/emerald/src/**/*.vue"
+    "../../packages/emerald/src/**/*.vue",
+    "../../packages/bulma/src/**/*.ts",
+    "../../packages/bulma/src/**/*.vue"
   ],
   "exclude": [
     "../../packages/0/src/**/__tests__/*",
     "../../packages/emerald/src/**/__tests__/*",
+    "../../packages/bulma/src/**/__tests__/*",
     "src/examples/composables/create-data-table/**",
     "src/examples/composables/create-data-grid/**",
     "src/examples/composables/create-queue/**",
diff --git a/apps/docs/uno.config.ts b/apps/docs/uno.config.ts
index 7589a78eff..d9449770ba 100644
--- a/apps/docs/uno.config.ts
+++ b/apps/docs/uno.config.ts
@@ -60,7 +60,12 @@ export default defineConfig({
     'home-card': 'p-6 rounded-xl border bg-surface hover:border-primary hover:bg-surface-tint hover:shadow-md transition-all duration-150',
 
   },
-  safelist: ['max-w-900'],
+  safelist: [
+    'max-w-900',
+    // Applied from JS (`settings.surface`). On-demand scan misses it on
+    // routes that never mention the class as a literal (e.g. systems pages).
+    'bg-glass-surface',
+  ],
   preflights: [
     {
       getCSS: () => `

From b61361e490ad19b15f6c44de894ad050ede11fe5 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 21 Aug 2026 16:40:14 -0500
Subject: [PATCH 16/18] chore(bulma): add changeset for first @paper/bulma
 publish

---
 .changeset/paper-bulma.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/paper-bulma.md

diff --git a/.changeset/paper-bulma.md b/.changeset/paper-bulma.md
new file mode 100644
index 0000000000..b395f060f2
--- /dev/null
+++ b/.changeset/paper-bulma.md
@@ -0,0 +1,9 @@
+---
+"@paper/bulma": minor
+---
+
+feat(bulma): Vue behavior for Bulma's markup (#760)
+
+`@paper/bulma` is a compat design system: components render the markup and classes [bulma.io](https://bulma.io/documentation/) documents, against the `bulma.css` you already load. There is no theme, no class prefix, and no CSS in the package. `bulma` is an optional peer.
+
+What ships is the JavaScript Bulma never did — open state, click-outside, Escape, focus, and form wiring — for the documented component, element, and form families, plus `BuNumberField` composed from form addons.

From 7ad8234160a6d9363a3d44797bbd8c06c82439fe Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 21 Aug 2026 16:50:35 -0500
Subject: [PATCH 17/18] chore(bulma): start at 0.0.0 until first publish

---
 packages/bulma/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bulma/package.json b/packages/bulma/package.json
index 0e53513e45..fe0b028f83 100644
--- a/packages/bulma/package.json
+++ b/packages/bulma/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@paper/bulma",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "description": "Bulma compat design system — real Bulma markup, Vuetify0 behavior",
   "license": "MIT",
   "repository": {

From 01475564d66f4e72c05beceaec263b2431112f31 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 22 Aug 2026 08:46:12 -0500
Subject: [PATCH 18/18] chore(ci): keep Playwright projects out of the unit job

`!v0:browser` still matched `bulma:browser`, so the unit job launched
Chromium without installing it. Exclude every `*:browser` project from
unit and run them all in the browser job.
---
 .github/workflows/pr-checks.yml | 6 ++++--
 package.json                    | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/pr-checks.yml b/.github/workflows/pr-checks.yml
index 6474a6f78f..48b3362e62 100644
--- a/.github/workflows/pr-checks.yml
+++ b/.github/workflows/pr-checks.yml
@@ -47,8 +47,10 @@ jobs:
       # components had an SF: entry in neither report). The v8 provider only
       # emits records for files a run actually loaded, so a wide include costs
       # this job nothing — it does not backfill untouched files at 0%.
+      # `*:browser` (v0:browser, bulma:browser) needs Playwright Chromium —
+      # those projects run in the `browser` job, which installs the binary.
       - name: Run unit tests with coverage
-        run: pnpm test:run --coverage --project '!v0:browser'
+        run: pnpm test:run --coverage --project '!*:browser'
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v5
         with:
@@ -90,7 +92,7 @@ jobs:
       # PR #725 to duplicate its browser assertions as unit tests to recover
       # codecov/patch (70.83% -> 100%). Keep the include wide.
       - name: Run component tests with coverage
-        run: pnpm exec vitest run --project v0:browser --coverage
+        run: pnpm exec vitest run --project '*:browser' --coverage
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v5
         with:
diff --git a/package.json b/package.json
index b28e7e2be9..346f3a2741 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "prepare": "simple-git-hooks"
   },
   "simple-git-hooks": {
-    "pre-push": "pnpm lint && pnpm typecheck && pnpm test:run --project '!v0:browser' && pnpm repo:check"
+    "pre-push": "pnpm lint && pnpm typecheck && pnpm test:run --project '!*:browser' && pnpm repo:check"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "catalog:",