vintage-frames 0.1.0

package/editor/web-types.json

@@ -0,0 +1,3237 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "vintage-frames",
+  "version": "0.1.0",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vf-button-group",
+          "description": "Lays out a set of `vf-button`s the way a System 7 dialog does: a tidy row\n(or column) with a consistent gap, every button sharing the width of the\nwidest, and all their *faces* on one line.\n\nTwo wrinkles make an ad-hoc flex row get this subtly wrong, and the group\nfixes both:\n\n- **Face alignment.** A `variant=\"default\"` button reserves room for its\n  ring with a RING_INSETpx margin, so in a row aligned by any edge\n  its *face* drifts from its neighbors' — you line up the ring, not the\n  button. The group zeroes that margin (via the inherited\n  `--vf-button-ring-margin`) and reserves the ring space itself as padding,\n  then centers the cross axis, so the faces — not the margin boxes — align.\n- **Shared width.** Classic dialogs sized grouped buttons to the widest, even\n  when a label was short (\"OK\" as wide as \"Cancel\"). The group does this with\n  pure CSS — equal `1fr` grid columns resolve to the widest button's\n  intrinsic width under the shrink-wrapped `inline-grid` — and stretches each\n  button's face to fill (via the inherited `--vf-button-flex`). No measuring.\n  `natural` opts out, letting each button size to its own label.\n\nThe group is layout-neutral: it shrink-wraps to its buttons, so position it\nwith the parent (e.g. `justify-self: end` for a bottom-right action row).\n---\n\n\n### **Slots:**\n - _default_ - The `vf-button`s to arrange.\n\n### **CSS Properties:**\n - **--vf-button-group-gap** - Gap between buttons (default 12px). _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "vertical",
+              "description": "Stack the buttons vertically instead of in a row.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "natural",
+              "description": "Let each button size to its own label instead of every button sharing the\nwidest button's width. Off by default: grouped buttons are uniform width,\nmatching classic System 7 dialogs.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The `vf-button`s to arrange." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "vertical",
+                "description": "Stack the buttons vertically instead of in a row.",
+                "type": "boolean"
+              },
+              {
+                "name": "natural",
+                "description": "Let each button size to its own label instead of every button sharing the\nwidest button's width. Off by default: grouped buttons are uniform width,\nmatching classic System 7 dialogs.",
+                "type": "boolean"
+              },
+              { "name": "role", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-button",
+          "description": "The classic System 7 push button (\"OK\", \"Cancel\", \"Install\", …).\n\nA rounded-rectangle control with a 1px black border and white face that\ninverts to white-on-black while pressed. `variant=\"default\"` draws the\nclassic bold double ring around the button, marking it as the default\naction of a dialog.\n\nThe rounded corners are not `border-radius` arcs: frame, face, and ring are\nstepped `clip-path` silhouettes traced pixel-for-pixel from the kit's button\nreference sheet (see `src/pixel-frame.ts`), so every corner renders as the\nexact 1-bit staircase with no antialiasing.\n\nKeyboard focus — an affordance System 7 didn't have, drawn in its idiom\nanyway — is a 1px dashed rule under the label text (`vfFocusUnderline`)\nrather than a ring around the control.\n\nForm-associated: place it inside a `<form>` and `type=\"submit\"` submits the\nform (contributing its `name`/`value` and any `form*` override to the\nsubmission), `type=\"reset\"` resets it. Enter and Space activate it via the\ninner native button, and the submission runs at the end of the click's\npropagation, so `preventDefault()` on the button cancels it the way it\ncancels a native one.\n\nOne thing the platform will not allow: `event.submitter` cannot BE a\nform-associated custom element. It is the transient native proxy this\nbutton submits through — so read the submitting button as\n`event.submitter.closest('vf-button')`, and its identity from\n`submitter.name`/`.value` rather than by comparing element references.\n\nA host-level `aria-label` / `aria-labelledby` names the inner button, and\n`description` (or a host-level `aria-describedby`) describes it — the same\nbridge the fields use, since the role lives on a shadow-internal node the\nplatform can't deliver those to. A `<label for>` deliberately does not\nname it: a `<button>` is not a labelable element.\n---\n\n\n### **Slots:**\n - _default_ - The button label.\n\n### **CSS Properties:**\n - **--vf-button-height** - `vf-button` face (the default ring's inner box is 80×20) _(default: 20px)_\n\n### **CSS Parts:**\n - **button** - The inner native `<button>` element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "When set to `'default'`, draws the classic double ring that marks the\ndefault button (activated by Return in real System 7 dialogs).",
+              "value": { "type": "'default' | undefined" }
+            },
+            {
+              "name": "type",
+              "description": "Activation behavior, mirroring native `<button type>`:\n`'submit'` submits the associated form, `'reset'` resets it and\n`'button'` (the default) does nothing beyond the `click` event.\n\nTwo deliberate departures from `<button>`, both pointing the same way — a\n`vf-button` never submits unless it was asked to. HTML's *missing*-value\ndefault is `submit`; here it is `button`, because a custom element that\nsilently submitted the form it happens to sit in is the wrong surprise.\nThe *invalid*-value default follows the missing one rather than HTML's\n(which is also `submit`), so a misspelling does nothing instead of\nsubmitting.",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            },
+            {
+              "name": "name",
+              "description": "Form field name; submitted as `name=value` when `type=\"submit\"`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "Value submitted under `name` when `type=\"submit\"`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "formaction",
+              "description": "The submission overrides native `<button>` carries, honored on\n`type=\"submit\"` only, exactly as HTML honors them: each is handed to the\nnative proxy activate submits through, so the *behavior* is the\nplatform's rather than an emulation of it.\n\nOne difference from the native IDL, in the getters only: `formAction`\nreturns the string you set, where `HTMLButtonElement.formAction` returns\nit resolved against the document's base URL. The submission itself\nresolves normally — it is the proxy's `formaction` doing the work.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "formenctype",
+              "description": "See formAction. Overrides the form's `enctype`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "formmethod",
+              "description": "See formAction. Overrides the form's `method`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "formnovalidate",
+              "description": "See formAction. Skips the form's constraint validation, so a\n\"Save Draft\" button submits past a failing `required`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "formtarget",
+              "description": "See formAction. Overrides the form's `target`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "description",
+              "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The button label." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "When set to `'default'`, draws the classic double ring that marks the\ndefault button (activated by Return in real System 7 dialogs).",
+                "type": "'default' | undefined"
+              },
+              {
+                "name": "type",
+                "description": "Activation behavior, mirroring native `<button type>`:\n`'submit'` submits the associated form, `'reset'` resets it and\n`'button'` (the default) does nothing beyond the `click` event.\n\nTwo deliberate departures from `<button>`, both pointing the same way — a\n`vf-button` never submits unless it was asked to. HTML's *missing*-value\ndefault is `submit`; here it is `button`, because a custom element that\nsilently submitted the form it happens to sit in is the wrong surprise.\nThe *invalid*-value default follows the missing one rather than HTML's\n(which is also `submit`), so a misspelling does nothing instead of\nsubmitting.",
+                "type": "'button' | 'submit' | 'reset'"
+              },
+              {
+                "name": "name",
+                "description": "Form field name; submitted as `name=value` when `type=\"submit\"`.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "Value submitted under `name` when `type=\"submit\"`.",
+                "type": "string"
+              },
+              {
+                "name": "formAction",
+                "description": "The submission overrides native `<button>` carries, honored on\n`type=\"submit\"` only, exactly as HTML honors them: each is handed to the\nnative proxy activate submits through, so the *behavior* is the\nplatform's rather than an emulation of it.\n\nOne difference from the native IDL, in the getters only: `formAction`\nreturns the string you set, where `HTMLButtonElement.formAction` returns\nit resolved against the document's base URL. The submission itself\nresolves normally — it is the proxy's `formaction` doing the work.",
+                "type": "string"
+              },
+              {
+                "name": "formEnctype",
+                "description": "See formAction. Overrides the form's `enctype`.",
+                "type": "string"
+              },
+              {
+                "name": "formMethod",
+                "description": "See formAction. Overrides the form's `method`.",
+                "type": "string"
+              },
+              {
+                "name": "formNoValidate",
+                "description": "See formAction. Skips the form's constraint validation, so a\n\"Save Draft\" button submits past a failing `required`.",
+                "type": "boolean"
+              },
+              {
+                "name": "formTarget",
+                "description": "See formAction. Overrides the form's `target`.",
+                "type": "string"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "description",
+                "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-checkbox",
+          "description": "The classic System 7 checkbox: a 13×13 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite. The border \"thickens\"\nwhile pressed, exactly like the original control.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.\n---\n\n\n### **Events:**\n - **vf-change** - When toggled by user interaction. `detail: { checked: boolean }`.\n- **input** - Native event, dispatched from the host per user toggle (with `change`, the pair a native checkbox fires). A programmatic `checked` set fires nothing, as on a native checkbox.\n- **change** - Native event, dispatched from the host per user toggle so form delegation and framework bindings hear it.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the box with a 6px gap.\n\n### **CSS Parts:**\n - **box** - The 13×13 checkbox square.\n- **label** - The label wrapper around the slot.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "checked",
+              "description": "Whether the checkbox is checked.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "Form field name used when submitting.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "Value submitted with the form while checked.",
+              "value": { "type": "string", "default": "'on'" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The label, rendered to the right of the box with a 6px gap."
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-change",
+              "description": "When toggled by user interaction. `detail: { checked: boolean }`."
+            },
+            {
+              "name": "input",
+              "description": "Native event, dispatched from the host per user toggle (with `change`, the pair a native checkbox fires). A programmatic `checked` set fires nothing, as on a native checkbox."
+            },
+            {
+              "name": "change",
+              "description": "Native event, dispatched from the host per user toggle so form delegation and framework bindings hear it."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "checked",
+                "description": "Whether the checkbox is checked.",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "Form field name used when submitting.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "Value submitted with the form while checked.",
+                "type": "string"
+              },
+              { "name": "role", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-change",
+                "description": "When toggled by user interaction. `detail: { checked: boolean }`."
+              },
+              {
+                "name": "input",
+                "description": "Native event, dispatched from the host per user toggle (with `change`, the pair a native checkbox fires). A programmatic `checked` set fires nothing, as on a native checkbox."
+              },
+              {
+                "name": "change",
+                "description": "Native event, dispatched from the host per user toggle so form delegation and framework bindings hear it."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-container",
+          "description": "`<vf-container>` — a box that is nothing but its declared size.\n\nThe kit's positioned-placement story (src/position.ts) ends with one line of\nCSS it can't write for you: children placed with `top`/`left` need a\npositioned ancestor, and while every kit container is one — a window body, a\nstack, a fieldset — a region of *your own* needs `position: relative` in a\nstylesheet. This component is that region as an element: declare `width` and\n`height` in whole system px, slot anything into it, place children against\nits origin. A DITL's enclosing rectangle, with nothing drawn in it.\n\n```html\n<vf-container width=\"200\" height=\"120\">\n  <vf-icon label=\"System\" width=\"64\" top=\"8\" left=\"12\">…</vf-icon>\n  <vf-icon label=\"Finder\" width=\"64\" top=\"8\" left=\"104\">…</vf-icon>\n</vf-container>\n```\n\nThe rectangle is the whole API — `width`/`height` here, plus the `top`/`left`\npair nearly every component takes (VfPositioned), so a container is\nitself placeable: inside a window, a desktop, or another container, at whole\nsystem px that keep its box on the device-pixel grid by construction.\n\n**It is not a `vf-stack`.** The stack is a flexbox with opinions — it\ndistributes children along an axis, compiles `fill-width`/`fill-height` into\nflex, defaults a cross-axis alignment. This box has no layout opinion at\nall: in-flow children get normal flow, placed children get a coordinate\nsystem, and that is the whole API. Reach for it when the stack's opinions\nare the thing in the way — a field of placed icons, a fixed stage for\nabsolutely-positioned art, a consumer's own composition that brings its\nlayout with it.\n\n**The declared size is the layout.** `width`/`height` land on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)` (VfSized), so the box scales\nwith the display and sits on the device-pixel grid by construction. Content\nthat outgrows the box overflows it rather than growing it — the number is\nthe layout, and content that doesn't fit is a number to raise. Leave a\ndimension off and that axis shrink-wraps: `fit-content`, not the parent's\nwidth, because a layout box that silently claimed a size nobody declared\nwould be inventing one (the `vf-stack` rule, held here too).\n\n**It paints nothing and means nothing.** No border, background, role,\nkeyboard behavior or selection — what it holds decides what it is.\n\n**It holds its box on the device-pixel grid** — with a `GridSnapController`.\nA container's box is itself the consumer's coordinate system, including for\nnon-`vf` content that cannot correct itself, so the box is the thing to\nhold on the grid. The shadow box below owns the `position: relative` anchor\nand the `vf-snap` class together, so under `applyGridSnap()` the correction\nmoves the whole coordinate system — everything placed against it rides\nalong instead of being re-corrected child by child. (`vf-stack` shipped\nwithout a controller on the theory that slotted `vf-*` children correct\ntheir own origins; this component is where that theory's gap — consumer\ncontent — became visible, and the stack has since adopted the same\narrangement.)\n\nLike the stack it is **typographically transparent**: `vfBase`'s chrome\ndress is returned to `inherit` on the host, so wrapping content in a sized\nbox changes nothing about how that content reads.\n\n`fill-width` / `fill-height` work here the way they do everywhere: read\nabout the host (be as big as *its* parent allows), and compiled for slotted\nchildren — `width: 100%` in normal flow, so a child filling the cross of a\ndeclared box needs no stylesheet. A height fill needs a declared `height`\nto resolve against; with none it is inert, not an error.\n---\n\n\n### **Slots:**\n - _default_ - The content. In flow by default; `top`/`left` on a kit child places it against this box's origin. `fill-width` / `fill-height` on a child fills it to the declared box.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "width",
+              "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "height",
+              "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The content. In flow by default; `top`/`left` on a kit child places it against this box's origin. `fill-width` / `fill-height` on a child fills it to the declared box."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "width",
+                "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "height",
+                "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-desktop",
+          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the 50%-dither gray desktop pattern and manages the stacking order\nand `active` state of slotted `vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, at pointer-gesture\nends), so tabbing walks the stack the way the eye does and Shift+Tab is\nits exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its top corners\nwith the classic corner mask.\n\nCustom properties:\n- `--vf-desktop-pattern` — the dither's tile art (default a 1-bit 50%\n  checker, opaque black-on-white on a 30-system-px tile). Overriding it\n  renders the token as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern layer (default\n  `#808080`). The default tile is opaque, so this only becomes visible when\n  `--vf-desktop-pattern` is overridden with a tile that has transparent\n  cells (or with `none`).\n---\n\n\n### **Slots:**\n - _default_ - Default slot: menu bar, windows, anything.\n\n### **CSS Properties:**\n - **--vf-desktop** - base color under the desktop dither — occluded by the default (opaque) tile, so it only shows through a custom `--vf-desktop-pattern` _(default: #808080)_\n- **--vf-desktop-pattern** - the desktop dither's art — a 50% checker drawn as opaque black-on-white rects, on a 30-system-px tile. Override the whole tile; consumer art renders as a placed tile grid at that same geometry (raster art magnifies nearest-neighbor, the `vf-img` idiom) _(default: undefined)_\n\n### **CSS Parts:**\n - **desktop** - The dithered screen surface — the whole-system-px raster (inset by `bezel` when one is set).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "width",
+              "description": "Screen width in system px — the raster's own size, the way a WIND\nresource declared a window's. The host box renders at exactly\n`width + 2 × bezel` system px, always whole; a desktop is never sized\nby page CSS — the page sets these numbers (directly or via\nfitWithin) and positions the explicitly sized box with its own\nstylesheet, keeping whatever sub-system-pixel slack its layout has on\nits side of the fence. Defaults to the compact Mac's 512.",
+              "value": { "type": "string", "default": "DEFAULT_SCREEN_WIDTH" }
+            },
+            {
+              "name": "height",
+              "description": "Screen height in system px; see width. Defaults to 342.",
+              "value": { "type": "string", "default": "DEFAULT_SCREEN_HEIGHT" }
+            },
+            {
+              "name": "bezel",
+              "description": "Width of the black screen bezel, in system px (`0` = none), added onto\nthe declared screen on every side — a `width=\"502\" bezel=\"5\"` desktop\nrenders a 512-system-px host box. The compact Mac's CRT showed an\nunlit black margin between the desktop's raster and the case; `bezel`\ndraws it around the screen and puts the classic screen-corner mask on\nthe screen's two *top* corners — only the top pair was rounded in the\nframebuffer. Flow, window coordinates and the drag clip all belong to\nthe screen, so windows crop at its edge. Inside a bezeled desktop a\nmenu bar needs no `rounded` of its own — the desktop's mask lands on\nthe same pixels.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot: menu bar, windows, anything."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "width",
+                "description": "Screen width in system px — the raster's own size, the way a WIND\nresource declared a window's. The host box renders at exactly\n`width + 2 × bezel` system px, always whole; a desktop is never sized\nby page CSS — the page sets these numbers (directly or via\nfitWithin) and positions the explicitly sized box with its own\nstylesheet, keeping whatever sub-system-pixel slack its layout has on\nits side of the fence. Defaults to the compact Mac's 512.",
+                "type": "number"
+              },
+              {
+                "name": "height",
+                "description": "Screen height in system px; see width. Defaults to 342.",
+                "type": "number"
+              },
+              {
+                "name": "bezel",
+                "description": "Width of the black screen bezel, in system px (`0` = none), added onto\nthe declared screen on every side — a `width=\"502\" bezel=\"5\"` desktop\nrenders a 512-system-px host box. The compact Mac's CRT showed an\nunlit black margin between the desktop's raster and the case; `bezel`\ndraws it around the screen and puts the classic screen-corner mask on\nthe screen's two *top* corners — only the top pair was rounded in the\nframebuffer. Flow, window coordinates and the drag clip all belong to\nthe screen, so windows crop at its edge. Inside a bezeled desktop a\nmenu bar needs no `rounded` of its own — the desktop's mask lands on\nthe same pixels.",
+                "type": "number"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-dialog",
+          "description": "`<vf-dialog>` — the System 7 modal dialog shell.\n\nTwo chromes, one modal lifecycle (native `<dialog>` for top-layer rendering\nand focus trapping, with a fully transparent backdrop — no dimming):\n\n- **Default:** a striped title bar with a centered title over a white body —\n  the movable-modal look. Drag the title bar to move it. `closable` adds the\n  standard close box (left of the bar) — the HIG's own figures disagree on\n  whether a movable modal carries one (Figure 5-1 says yes, Figure 6-1 and\n  the Chapter 6 text say no), so the component enables either reading rather\n  than enforcing one.\n- **`frame=\"plain\"`:** the classic dBoxProc modal-dialog frame — 1px outer\n  border, 2px gap, 2px inner band, no shadow, no title bar — and immovable,\n  like the original. A `heading` renders as a centered display-face heading\n  at the top of the body (the reference art's \"Dialog title\"); `closable` is\n  ignored, there being no bar to carry the widget.\n\nOpen it with `show()` (or set the `open` attribute/property); close with\n`close()`. Escape closes it and fires `vf-close` with\n`{ reason: 'escape' }`; the close box and programmatic closing fire\n`{ reason: 'close' }`.\n---\n\n\n### **Events:**\n - **vf-close** - Dialog closed. Detail `{ reason: 'escape' | 'close' }`.\n\n### **Slots:**\n - _default_ - Default slot: dialog body content.\n- **buttons** - Optional action buttons. Rendered as a bottom-right `vf-button-group` (equal-width, faces aligned); the footer only takes space when the slot is populated.\n\n### **CSS Properties:**\n - **--vf-dots-pattern** - the windoid bar's dot-grid dither — a 2×2 tile, one black pixel at the origin (`vfDots`; override the whole pattern like `--vf-desktop-pattern`) _(default: undefined)_\n- **--vf-titlebar-height** - window/dialog title bars _(default: undefined)_\n- **--vf-scrollbar-thumb** - scrollbar thumb/elevator (white) _(default: undefined)_\n- **--vf-scrollbar-track** - the scroll trough's base color under the dot-dither (white) _(default: undefined)_\n\n### **CSS Parts:**\n - **frame** - The outer chrome frame (striped-bar or plain).\n- **title-bar** - The striped title bar (default chrome only).\n- **title** - The centered title patch (or the plain-frame heading).\n- **close-box** - The close widget (`closable`, default chrome only).\n- **body** - The white content area.\n- **content** - The scrolling region inside the body (heading + slotted content, not the footer). Inert while the content fits; over-stuffed, it scrolls under a System 7 rail and becomes a keyboard stop.\n- **footer** - The action row wrapping the buttons.\n- **buttons** - The button group inside the footer.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "heading",
+              "description": "Title text: the bar's centered patch, or the plain frame's heading.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the dialog (`aria-label`), for a dialog with no\n`heading` — an untitled title bar has no text to be named by. Ignored when\nempty and a `heading` is set (the title patch names the dialog then);\ndefaults to `'Dialog'` when neither is given.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "closable",
+              "description": "Show the close box (left side of the title bar). Off by default — the\nbare movable-modal bar. Ignored with `frame=\"plain\"` (no bar). Clicking\nit closes the dialog and fires `vf-close` with `{ reason: 'close' }`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "frame",
+              "description": "Frame chrome. Omit for the striped title bar (movable modal); `'plain'`\nfor the immovable dBoxProc double frame with no bar (modal dialog box).",
+              "value": { "type": "'plain' | undefined" }
+            },
+            {
+              "name": "open",
+              "description": "Whether the modal is open. Kept in sync with the native `<dialog>`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "width",
+              "description": "Modal width in whole system px — the art's own unit, so the box holds its\nproportion to the chrome inside it at every display density.\n\n**Declare it.** A modal owns its width; it is not a shape its content\nhappens to fall into. The platform's own default is `fit-content` measured\nagainst the space *left over* beside its offsets — and stating an offset is\nexactly how the box is placed and dragged (top), so an undeclared\nmodal squeezes itself and reflows its text as it moves toward an edge.\nUnset, it falls back to MODAL_FALLBACK_WIDTH and says so once in\nthe console.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "height",
+              "description": "Modal height in whole system px.\n\n**Declare it,** with width. A modal is a fixed box in both axes —\nthe same rule `vf-window` follows, for the same reason: the classic shells\ncarried both dimensions in the resource, and a box that grows with its body\nis one whose buttons move under the pointer as its text changes. Unset, the\nbody sizes to its content — the old behavior — and it says so once in the\nconsole.\n\nContent taller than the declared box is clipped at the frame.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the **viewport**, in whole system px — the same\n`top`/`left` pair every other component takes (VfPositioned), in\nthe same unit, with one difference the platform forces: `showModal()` puts\nthe box in the top layer, whose containing block is the viewport rather\nthan the nearest positioned ancestor. So these coordinates are screen\ncoordinates, not the parent's.\n\nLeave both unset and the modal is **centered** — recomputed on open, and\nagain whenever its own box or the viewport changes, which is what keeps a\ndialog whose slotted content upgrades after `showModal()` from opening at\nthe offset its smaller first render centered at. Dragging the title bar\nstates the pair; setting either back to `null` returns the modal to\ncentering.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the viewport, in whole system px. See top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "Default slot: dialog body content." },
+            {
+              "name": "buttons",
+              "description": "Optional action buttons. Rendered as a bottom-right `vf-button-group` (equal-width, faces aligned); the footer only takes space when the slot is populated."
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-close",
+              "description": "Dialog closed. Detail `{ reason: 'escape' | 'close' }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "heading",
+                "description": "Title text: the bar's centered patch, or the plain frame's heading.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the dialog (`aria-label`), for a dialog with no\n`heading` — an untitled title bar has no text to be named by. Ignored when\nempty and a `heading` is set (the title patch names the dialog then);\ndefaults to `'Dialog'` when neither is given.",
+                "type": "string"
+              },
+              {
+                "name": "closable",
+                "description": "Show the close box (left side of the title bar). Off by default — the\nbare movable-modal bar. Ignored with `frame=\"plain\"` (no bar). Clicking\nit closes the dialog and fires `vf-close` with `{ reason: 'close' }`.",
+                "type": "boolean"
+              },
+              {
+                "name": "frame",
+                "description": "Frame chrome. Omit for the striped title bar (movable modal); `'plain'`\nfor the immovable dBoxProc double frame with no bar (modal dialog box).",
+                "type": "'plain' | undefined"
+              },
+              {
+                "name": "open",
+                "description": "Whether the modal is open. Kept in sync with the native `<dialog>`.",
+                "type": "boolean"
+              },
+              {
+                "name": "width",
+                "description": "Modal width in whole system px — the art's own unit, so the box holds its\nproportion to the chrome inside it at every display density.\n\n**Declare it.** A modal owns its width; it is not a shape its content\nhappens to fall into. The platform's own default is `fit-content` measured\nagainst the space *left over* beside its offsets — and stating an offset is\nexactly how the box is placed and dragged (top), so an undeclared\nmodal squeezes itself and reflows its text as it moves toward an edge.\nUnset, it falls back to MODAL_FALLBACK_WIDTH and says so once in\nthe console.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "height",
+                "description": "Modal height in whole system px.\n\n**Declare it,** with width. A modal is a fixed box in both axes —\nthe same rule `vf-window` follows, for the same reason: the classic shells\ncarried both dimensions in the resource, and a box that grows with its body\nis one whose buttons move under the pointer as its text changes. Unset, the\nbody sizes to its content — the old behavior — and it says so once in the\nconsole.\n\nContent taller than the declared box is clipped at the frame.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the **viewport**, in whole system px — the same\n`top`/`left` pair every other component takes (VfPositioned), in\nthe same unit, with one difference the platform forces: `showModal()` puts\nthe box in the top layer, whose containing block is the viewport rather\nthan the nearest positioned ancestor. So these coordinates are screen\ncoordinates, not the parent's.\n\nLeave both unset and the modal is **centered** — recomputed on open, and\nagain whenever its own box or the viewport changes, which is what keeps a\ndialog whose slotted content upgrades after `showModal()` from opening at\nthe offset its smaller first render centered at. Dragging the title bar\nstates the pair; setting either back to `null` returns the modal to\ncentering.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the viewport, in whole system px. See top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-close",
+                "description": "Dialog closed. Detail `{ reason: 'escape' | 'close' }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-fieldset",
+          "description": "`<vf-fieldset>` — the classic \"Install Location\" group box.\n\nA 1px black rectangle whose bold legend sits on the top border, punching a\ngap through it with a `var(--vf-surface, ...)` background patch — so it\nmatches whatever surface sits behind it.\n---\n\n\n### **Slots:**\n - _default_ - Group contents.\n- **legend** - Rich legend content; overrides the `legend` attribute.\n\n### **CSS Properties:**\n - **--vf-surface** - bg behind legends/label patches; `vf-window` and `vf-dialog` both set it to white _(default: ...)_\n\n### **CSS Parts:**\n - **fieldset** - The bordered box.\n- **legend** - The legend patch on the top border.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "legend",
+              "description": "Legend text shown on the top border.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "Group contents." },
+            {
+              "name": "legend",
+              "description": "Rich legend content; overrides the `legend` attribute."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "legend",
+                "description": "Legend text shown on the top border.",
+                "type": "string"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-grid",
+          "description": "`<vf-grid>` — a lattice of equal cells separated by 1px rules.\n\nThe reference screens are full of these: the Figure 5-6 tool palette's 3×3\nof desk accessories, a color picker's swatch table, a pattern or icon\nchooser. They are all the same drawing — fixed-size cells butted together\nwith a hairline between them — and every one of them used to be hand-rolled\npage CSS: a `display: grid` with a 1px gap over a black background, so the\nbackground showed through as the rules. That trick only draws *solid*\ninterior rules, has to restate the cell size in three places, and puts the\nkit's own artwork in the consumer's stylesheet.\n\nThis draws it instead. State the cell count and cell size in whole system px\nand slot the cells in; the component owns the track geometry and the rules:\n\n```html\n<vf-grid columns=\"3\" rows=\"3\" cell-width=\"26\" cell-height=\"26\">\n  <button>…</button>  <!-- nine of them, one per cell -->\n</vf-grid>\n```\n\n**The rules are a masked lattice, not gaps.** The grid's 1px gaps make the\nroom; a single overlay paints `--vf-black` through two tiled masks — one\ncolumn of pixels at the horizontal pitch, one row at the vertical — so the\npen switches from `solid` to `dashed` (1 on, 1 off) without the layout\nmoving a pixel. It paints *under* the cells (`z-index: -1` inside the grid's\nown stacking context, above its surface), so an item that spans two cells\ncovers the boundary it swallowed, and a cell's own ink — a pressed face, a\nfocus rule, a hard shadow — is never crossed by a line.\n\n**Cells are centered in their wells.** What a palette holds is normally\nsmaller than the well it sits in — a 16px icon in a 26px cell — so a slotted\nitem is centered on both axes rather than parked in the corner, which is\nwhere grid's own `stretch` default leaves anything carrying its own size. A\ncell that means to fill its well — a tool button that inverts black when\nselected, a tile whose border merges with the lattice — says\n`place-self: stretch` and gets the whole track. (Under `collapse` that is\nalready the default: those cells exist to meet the lines.)\n\n**The perimeter is part of the lattice**, and drawn by default: the box\ncarries the 1px the outer lines need, and one uninterrupted pitch runs from\nedge to edge. `frameless` drops it, for a grid inside something that already\ndraws that line — the desk-accessory palette is a `vf-window[flush]`, whose\nframe *is* the grid's outer border, and a doubled one would read as 2px.\n\n**`collapse` puts an item's own border on the rule.** A cell that draws its\nown 1px border — a bordered tile, a 16×16 swatch — otherwise sets that border\n*beside* the lattice line, and every boundary reads 2px thick. `collapse`\npulls each cell back one pixel on all four sides, so the two become one line:\nthe `border-collapse: collapse` of a table, in system px. Size the cells at\n*item − 2px* — `cell-width=\"14\"` for a 16px item — and each item then spans\nlattice line to lattice line, sharing one with each neighbor:\n\n```html\n<vf-grid columns=\"8\" rows=\"4\" cell-width=\"14\" cell-height=\"14\" collapse>\n```\n\nThe frame is what gives the outermost borders a line of their own to land on,\nand it ends the box exactly at the last item's outer edge; go `frameless` and\nthey paint a pixel outside the grid's box instead.\n\n`rules=\"none\"` is the pen, not the lattice: nothing is drawn, the gaps close\nup, and the cells butt directly together (there is then no perimeter and\nnothing for `collapse` to collapse onto, so it goes inert).\n\n**Semantics are the consumer's.** The grid is layout — it takes no role, no\nkeyboard behavior and no selection, so what it holds decides what it is: put\n`role=\"group\"`/`aria-label` on the host for a tool palette, `role=\"radiogroup\"`\nfor a picker, or nothing at all for a plain tiling. Slotted cells stay in the\nlight DOM with their own semantics intact.\n---\n\n\n### **Slots:**\n - _default_ - The cells, in order — one element per cell.\n\n### **CSS Properties:**\n - **--vf-surface** - The surface behind the cells (default white). _(default: undefined)_\n\n### **CSS Parts:**\n - **grid** - The grid box itself (surface, tracks, frame padding).\n- **rules** - The lattice overlay painting the rules.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "columns",
+              "description": "Cells across the x axis.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "rows",
+              "description": "Cells down the y axis. Left unset the grid takes as many rows as the\nslotted cells need; set, it reserves that many — an unfilled cell still\ngets its rules, the way a palette keeps its empty wells.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "cell-width",
+              "description": "Cell width in whole system px.",
+              "value": { "type": "number", "default": "16" }
+            },
+            {
+              "name": "cell-height",
+              "description": "Cell height in whole system px.",
+              "value": { "type": "number", "default": "16" }
+            },
+            {
+              "name": "rules",
+              "description": "The pen every rule is drawn with: `solid` (default), `dashed` (1 system px\non, 1 off), or `none` — no rules at all, and the cells butt together.",
+              "value": { "type": "VfGridRules", "default": "'solid'" }
+            },
+            {
+              "name": "frameless",
+              "description": "Drop the outer border, leaving only the boundaries between cells. For a\ngrid inside something that already draws that line — a `vf-window[flush]`,\na `vf-fieldset` — where a second one would read as 2px.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "collapse",
+              "description": "Collapse each cell's own 1px border onto the grid's rules instead of\nsetting it beside them (see the class doc). Size the cells at *item − 2px*;\nthe frame is what gives the outermost borders a line to land on, so a\n`frameless` grid lets them paint a pixel outside its box.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The cells, in order — one element per cell."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "columns",
+                "description": "Cells across the x axis.",
+                "type": "number"
+              },
+              {
+                "name": "rows",
+                "description": "Cells down the y axis. Left unset the grid takes as many rows as the\nslotted cells need; set, it reserves that many — an unfilled cell still\ngets its rules, the way a palette keeps its empty wells.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "cellWidth",
+                "description": "Cell width in whole system px.",
+                "type": "number"
+              },
+              {
+                "name": "cellHeight",
+                "description": "Cell height in whole system px.",
+                "type": "number"
+              },
+              {
+                "name": "rules",
+                "description": "The pen every rule is drawn with: `solid` (default), `dashed` (1 system px\non, 1 off), or `none` — no rules at all, and the cells butt together.",
+                "type": "VfGridRules"
+              },
+              {
+                "name": "frameless",
+                "description": "Drop the outer border, leaving only the boundaries between cells. For a\ngrid inside something that already draws that line — a `vf-window[flush]`,\na `vf-fieldset` — where a second one would read as 2px.",
+                "type": "boolean"
+              },
+              {
+                "name": "collapse",
+                "description": "Collapse each cell's own 1px border onto the grid's rules instead of\nsetting it beside them (see the class doc). Size the cells at *item − 2px*;\nthe frame is what gives the outermost borders a line to land on, so a\n`frameless` grid lets them paint a pixel outside its box.",
+                "type": "boolean"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-icon",
+          "description": "`<vf-icon>` — a Finder icon: pixel art in a reserved cell with its name on a\nplate below, selectable, movable and renameable in place.\n\nIt is the one composite in the kit whose parts already existed separately —\n`vf-img` draws the art, `vf-list-item` inverts on selection, `vf-window`\ndrags — and the reason to have it anyway is that the *icon* is the unit the\nFinder actually manipulates. A picture and a caption that select together,\nmove together and rename together is a control, not a layout.\n\n### The art arrives by slot\n\nTwo slots, one per resource size — `large` is the 32×32 `ICN#` and `small`\nthe 16×16 `ics#` — each holding a `vf-img` around the consumer's own `<img>`:\n\n```html\n<vf-icon label=\"Macintosh HD\" selectable movable editable>\n  <vf-img slot=\"large\"><img src=\"hd-32.png\" alt=\"\"></vf-img>\n  <vf-img slot=\"small\"><img src=\"hd-16.png\" alt=\"\"></vf-img>\n</vf-icon>\n```\n\nSlots rather than `src` properties, for the reason `vf-img` exists at all:\nthe kit ships no raster files and never builds an `<img>` on a consumer's\nbehalf, so the graphic stays a real element in the light DOM with its own\n`alt`, `srcset`, loading behavior and asset URLs. A `src` string can express\nnone of that, and it could not hold an inline `<svg>` or a `<canvas>` either.\n`vf-list-item`'s `icon` slot makes the same trade.\n\nThe cost is that both files fetch even though one paints — pay it with two\ndata URIs, or slot only the size that view uses.\n\n### The cell is reserved, the art is registered in it\n\n`size` picks which slot paints *and* the cell it paints in: 32×32 or 16×16,\nheld whether or not there is art for it. A folder is 32×20 of ink and a\ndocument 25×32, and a row of them keeps one baseline only because the cell —\nnot the ink — is the unit, which is what an icon resource always was.\n\n### Everything centered lands on a whole pixel, by parity\n\nThe frame centers two things over one axis — the art cell and the name — and\na centered child sits at `(box − child) / 2`. That is a whole number exactly\nwhen the box and the child have the **same parity**. Half a system pixel is\nwhat fringes 1-bit art: the glyph stems smear across two device columns and\ngo gray, while the plate behind them stays sharp, because backgrounds are\npixel-snapped by the compositor and glyphs are not. A crisp plate under a\ngrey name is the signature of exactly this.\n\nSo the component makes the parities agree instead of correcting afterwards.\nThe cell is 32 or 16, and #measurePlate sizes the name plate to a\nwhole **even** number of system px — measured from the text, rounded up. Both\nchildren are then even, and so is every offset, at every display density and\nwhether or not a `width` is declared. Nothing is snapped, nothing leans on\nthe rasterizer, and `verify:icon` asserts both the geometry and that a field\nof names renders without a single gray pixel — with the kit's normal\nantialiasing left on, since a run on whole pixels gives it nothing to smooth.\n\nYour side of it is one rule: **a declared `width` must be even**, since the\ncomponent cannot round a number you chose. Supply art at the cell size too —\nwhich \"one image pixel is one system pixel\" already implies — because art\ndiffering from its cell by an odd number centers the same way.\n\n### Selection inverts, because the art is a 1-bit mask\n\nA System 7 icon is black ink and opaque white on a transparent surround —\nprecisely an image plus its mask — so inverting it flips ink and fill and\nleaves the surround alone, which is the whole of the classic selected\nappearance. `filter: invert(1)` reproduces it exactly for 1-bit art. Color\nart inverts too, into a photographic negative rather than the darkening\nSystem 7 gave it; that is the case to revisit if the kit ever grows a\nselected-state treatment of its own. The label plate inverts to the\n`--vf-highlight` pair, sharing one selection color with `vf-list-item`.\n\n### Open is derived, not shipped\n\nWith `open`, the art redraws as the Finder's open ghost: the outline held\nin solid black, the interior re-filled with the kit's loose 25% dither (the\nscrollbar trough's lattice), the transparent surround untouched. There is\nno second raster and no second fetch — the same alpha channel that makes\nselection an inversion makes the ghost derivable, and `src/open-art.ts`\nderives it from the slotted art by canvas compositing alone. No pixels are\never read back, so a cross-origin image that taints its canvas still works:\ntaint forbids reading, not drawing or displaying.\n\nThe ghost keeps the shape selection expects — ink and opaque white on a\ntransparent surround — so a selected open icon inverts exactly as a closed\none does, with no second treatment. The slot stays in the tree while the\nghost paints, hidden (it is where the art loads, and re-loads, from), and\nart the pipeline cannot draw — nothing slotted yet, a failed load, an\ninline `<svg>` — keeps rendering as itself rather than vanishing behind a\nstate it cannot show.\n\n### `movable`, not `draggable`\n\n`draggable` is a global HTML attribute *and* an `HTMLElement` accessor, so\ndeclaring it would both shadow a platform member and hand the element to the\nbrowser's own drag-and-drop machinery. This is the `align` trap from\n`vf-stack` in a second costume — `align`, `hidden`, `dir`, `draggable` and\n`title` all carry behavior a custom element never asked for. The kit already\nspells this parameter `movable` on `vf-window`, so the icon does too, and it\nmoves the same way: `DragController` tracks the gesture and\n`PlacementController` writes the result into `left`/`top` in whole system px,\nthe art's own unit — the same pair markup places an icon with, so a moved\nicon is still where it was dropped after a zoom.\n\nDragging is a pointer gesture with no keyboard equivalent, which is the kind\nof gap the kit closes rather than inherits (SPEC §1): a focused movable icon\nalso moves under the arrow keys, one system px at a time and eight with\nShift. Focus is what `selectable` grants, so the keyboard half of `movable`\nand `editable` presupposes it — see the role section below.\n\nOpening gets the same treatment. The double-click is the pointer gesture,\nand its keyboard route is ⌘O / ⌘↓ — the System 7 Open shortcuts, with Ctrl\nstanding in for ⌘ off the Mac. Return is deliberately not one of them: the\nFinder's Return renamed, never opened, so on an editable icon it starts the\nedit and on a non-editable one it does nothing at all.\n\n### The name and the art are one target, and the second click decides\n\nA double-click opens the icon *wherever it lands* — the name is as much the\nicon as the picture is, and the Finder never made you aim at the 32 pixels of\nart. But the name is also where a single click renames, so the two gestures\nbegin with the same press and only the second one tells them apart.\n\nSo the rename waits for it. A press on the plate of an already-selected icon\narms the field rather than opening it, and the next press inside\nRENAME_DELAY_MS calls it off — leaving the double-click to open, with\nno rename box flashing up behind it. Nothing needs to *undo* an edit that\nbegan: the press that starts one and the press that opens are the same\npress, so the only thing that can be got right is not committing early.\n\nThe window is generous in the one direction that is cheap. Reading a lone\nclick as a pair costs a wait before the box appears; reading a pair as a lone\nclick renames when the user asked to open. The same reasoning covers a press\nthat turns into a drag, a press elsewhere, and any key — each calls the\npending rename off, because none of them is the click it is waiting for.\n\n### An icon alone is a picture; an icon in a field is an option\n\n`role=\"option\"` is only meaningful inside a `listbox` that owns it. Written\nunconditionally it is not merely untidy — the browser *drops* it, and\n`aria-selected` with it, so a `selectable` icon announced as a bare generic\nand its selection state reached assistive tech nowhere at all.\n\nSo the role follows the container. Owned, the icon is an `option` that names\nitself from its plate and publishes `aria-selected`. Unowned, it degrades to\n`role=\"img\"` with a name — the same vocabulary the derived open ghost uses,\nand true of what it is. Deliberately not `button`: that would promise Enter\nand Space activate, and here Return *renames* while the open route is ⌘O / ⌘↓.\n\nDeclaring the owner is one attribute on whatever already holds the field, and\nit is what buys the selection state back:\n\n```html\n<div role=\"listbox\" aria-label=\"Desktop\" aria-multiselectable=\"true\">\n  <vf-icon label=\"Macintosh HD\" selectable movable editable>…</vf-icon>\n  <vf-icon label=\"Trash\" selectable movable editable>…</vf-icon>\n</div>\n```\n\nA `vf-desktop` cannot be that container itself: it also holds windows and a\nmenu bar, and a non-`option` child of a listbox is invalid the same way the\norphaned option was. The plain wrapper above is layout-neutral — placed icons\nanchor to the nearest *positioned* ancestor, which is still the desktop's\nraster. One divergence from the APG listbox is deliberate: its options share\na single roving tab stop, while these stay one stop each, the way a Finder\nicon is reached on its own.\n\n**`selectable` is what makes an icon focusable**, and `movable`/`editable`\npresuppose it. That is the Finder's own model — you cannot move or rename\nwhat you have not selected — and the pointer path already assumed it: the\nrename opens on a press on the plate of an *already-selected* icon. A\n`movable`-only icon is a picture you can drag, not a widget.\n\n### The label is a property, because it is editable\n\nThe caption is `label` rather than slotted content: renaming means the\ncomponent owns the string and hands it back on `vf-change`, and it cannot own\ntext that lives in the consumer's DOM. An empty `label` draws no plate at\nall — that *is* the \"no label\" parameter, in preference to a second attribute\nthat could disagree with it. `editable` then lets a click on the plate of an\nalready-selected icon open the rename box a moment later, as the Finder's\ndoes (see above), with Return committing, Escape reverting, and the plate\nwidening as you type.\n\n### A name is never abbreviated, and never folded\n\nThere is no ellipsis, no clipping and no wrapping: one line, always. System 7\nsolved the long-name problem at the *other* end — HFS capped a filename at 31\ncharacters — so the Finder could afford to always draw the name in full, and\ndid. A name wider than its cell simply overflows it, centered, the way a name\nwider than a 32-pixel icon always did.\n\nStaying on one line is also what keeps the name on the grid: a single run has\na single measured width, so the even-plate rule above is one number rather\nthan one per line, each with its own parity. `width` is therefore the cell —\nthe grid pitch — not a bound on the name.\n\n`maxlength` (31) bounds the rename field rather than the `label` property:\nthe name belongs to the consumer's model, and truncating one handed to us\nwould lose data.\n\nThe box hugs its text while you type it, not only once you are done, which is\nwhat keeps the name from moving when the edit commits: the plate is the same\nwidth either side of it, so the glyphs stay exactly where they were.\n\nA file also has to be called *something*, so a rename committed empty — or\nas nothing but spaces — is refused rather than applied, and the previous name\ncomes back, which is what System 7 did. An empty `label` is still a perfectly\ngood state to *start* in, though: a freshly made icon has no name until it is\ngiven one. Such an icon draws no plate but stays selectable, focusable and\nrenameable — Return opens a field, and an edit with nothing in it yet is the\none time the box stops hugging and reserves a cell's width, since a field you\ncannot see is one you cannot type into.\n---\n\n\n### **Events:**\n - **vf-select** - Selection changed by user interaction. `detail: { selected: boolean }`.\n- **vf-change** - The name was committed. `detail: { label: string, previous: string }`.\n- **vf-open** - The icon was opened — double-clicked anywhere on it, its name included, or ⌘O / ⌘↓ from the keyboard (Ctrl off the Mac), the System 7 shortcuts. Return renames instead, as the Finder's did. `detail: {}`.\n- **vf-name-too-long** - A rename was typed or pasted past `maxlength`, and the field refused the excess. `detail: { attempted, accepted, limit }` — enough to raise the alert System 7 raised rather than drop the characters silently. Not fired for a `label` set from your own code, which is never truncated in the first place.\n- **vf-name-rejected** - A rename was committed with no name in it, so the edit was dropped and the old name put back. `detail: { attempted, kept, reason: 'empty' }`. A `vf-change` is *not* fired alongside it — nothing changed.\n\n### **Slots:**\n - **large** - The 32×32 art, normally a `vf-img` around an `<img>`.\n- **small** - The 16×16 art, shown under `size=\"small\"`.\n\n### **CSS Properties:**\n - **--vf-icon-gap** - Space between the art cell and the name plate _(default: undefined)_\n- **--vf-icon-label-height** - The name plate's line box _(default: undefined)_\n\n### **CSS Parts:**\n - **frame** - The icon and its label plate, stacked.\n- **icon** - The reserved art cell.\n- **label** - The name block; its lines are centered under the art.\n- **plate** - The inked run behind the name, which each wrapped line gets its own of (inverts when selected).\n- **input** - The rename field, while editing.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The icon's name. Empty draws no plate — that is the \"no label\" setting.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "Which member of the icon family paints, and the cell it is registered in:\n`large` (32×32) or `small` (16×16).",
+              "value": { "type": "VfIconSize", "default": "'large'" }
+            },
+            {
+              "name": "selectable",
+              "description": "Clicking selects. Set `selected` yourself to drive selection some other way.\n\nThis is also the flag that makes an icon focusable and gives it a role, so\nthe keyboard halves of movable and editable presuppose it —\nas the Finder did. A container carrying `role=\"listbox\"` turns the role from\n`img` into a real `option`; see the class doc.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selected",
+              "description": "Whether the icon is selected: the art inverts and the plate goes black.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "open",
+              "description": "The icon's window is on screen, so the art paints as the Finder's open\nghost — outline held, interior re-filled with the kit's loose dither —\nderived in the client from the slotted art itself (see the class doc).\nSet it when handling `vf-open`, clear it when the window goes away.\nSelection inverts the ghost exactly as it inverts the art.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "movable",
+              "description": "Drag to move — `movable`, never `draggable`, which is a platform attribute\nand accessor (see the class doc). Arrow keys move a focused icon too, which\nmeans pairing this with selectable: focus is what that grants.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "editable",
+              "description": "The name can be renamed in place: click a selected plate, or press Return.\nPair with selectable — both routes start from a selected icon.\n\nThe pointer route opens the field once the double-click window has passed\n(RENAME_DELAY_MS), so double-clicking the *name* opens the icon the\nway double-clicking its art does. Return opens it at once — a keypress has\nno second half to wait for.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "width",
+              "description": "The cell width in whole system px — the grid pitch, and it must be\n**even**: the component rounds its own plate to keep every centered offset\nwhole, but it cannot round a number you chose (see the class doc).\n\nIt is not a bound on the name. Left off, the box is as wide as the wider of\nthe art cell and the name; set, a longer name overflows it, centered.\nDeclaring one is what keeps a field of icons on a single pitch, and what\nkeeps a text-sized box off a fractional origin (contract rule 3).",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "maxlength",
+              "description": "The most characters the rename field will accept — 31, the HFS filename\nlimit every System 7 name was cut to, which is also why the Finder could\nafford to always draw the whole name. Going past it fires\n`vf-name-too-long` with what was tried, so a host can say so rather than\nlet characters vanish.\n\nIt bounds *typing* only: a `label` set from your own data is displayed as\ngiven and fires nothing, since the name belongs to your model and silently\ntruncating it would lose data.",
+              "value": { "type": "number", "default": "31" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "large",
+              "description": "The 32×32 art, normally a `vf-img` around an `<img>`."
+            },
+            {
+              "name": "small",
+              "description": "The 16×16 art, shown under `size=\"small\"`."
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-select",
+              "description": "Selection changed by user interaction. `detail: { selected: boolean }`."
+            },
+            {
+              "name": "vf-change",
+              "description": "The name was committed. `detail: { label: string, previous: string }`."
+            },
+            {
+              "name": "vf-open",
+              "description": "The icon was opened — double-clicked anywhere on it, its name included, or ⌘O / ⌘↓ from the keyboard (Ctrl off the Mac), the System 7 shortcuts. Return renames instead, as the Finder's did. `detail: {}`."
+            },
+            {
+              "name": "vf-name-too-long",
+              "description": "A rename was typed or pasted past `maxlength`, and the field refused the excess. `detail: { attempted, accepted, limit }` — enough to raise the alert System 7 raised rather than drop the characters silently. Not fired for a `label` set from your own code, which is never truncated in the first place."
+            },
+            {
+              "name": "vf-name-rejected",
+              "description": "A rename was committed with no name in it, so the edit was dropped and the old name put back. `detail: { attempted, kept, reason: 'empty' }`. A `vf-change` is *not* fired alongside it — nothing changed."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The icon's name. Empty draws no plate — that is the \"no label\" setting.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "Which member of the icon family paints, and the cell it is registered in:\n`large` (32×32) or `small` (16×16).",
+                "type": "VfIconSize"
+              },
+              {
+                "name": "selectable",
+                "description": "Clicking selects. Set `selected` yourself to drive selection some other way.\n\nThis is also the flag that makes an icon focusable and gives it a role, so\nthe keyboard halves of movable and editable presuppose it —\nas the Finder did. A container carrying `role=\"listbox\"` turns the role from\n`img` into a real `option`; see the class doc.",
+                "type": "boolean"
+              },
+              {
+                "name": "selected",
+                "description": "Whether the icon is selected: the art inverts and the plate goes black.",
+                "type": "boolean"
+              },
+              {
+                "name": "open",
+                "description": "The icon's window is on screen, so the art paints as the Finder's open\nghost — outline held, interior re-filled with the kit's loose dither —\nderived in the client from the slotted art itself (see the class doc).\nSet it when handling `vf-open`, clear it when the window goes away.\nSelection inverts the ghost exactly as it inverts the art.",
+                "type": "boolean"
+              },
+              {
+                "name": "movable",
+                "description": "Drag to move — `movable`, never `draggable`, which is a platform attribute\nand accessor (see the class doc). Arrow keys move a focused icon too, which\nmeans pairing this with selectable: focus is what that grants.",
+                "type": "boolean"
+              },
+              {
+                "name": "editable",
+                "description": "The name can be renamed in place: click a selected plate, or press Return.\nPair with selectable — both routes start from a selected icon.\n\nThe pointer route opens the field once the double-click window has passed\n(RENAME_DELAY_MS), so double-clicking the *name* opens the icon the\nway double-clicking its art does. Return opens it at once — a keypress has\nno second half to wait for.",
+                "type": "boolean"
+              },
+              {
+                "name": "width",
+                "description": "The cell width in whole system px — the grid pitch, and it must be\n**even**: the component rounds its own plate to keep every centered offset\nwhole, but it cannot round a number you chose (see the class doc).\n\nIt is not a bound on the name. Left off, the box is as wide as the wider of\nthe art cell and the name; set, a longer name overflows it, centered.\nDeclaring one is what keeps a field of icons on a single pitch, and what\nkeeps a text-sized box off a fractional origin (contract rule 3).",
+                "type": "number | undefined"
+              },
+              {
+                "name": "maxlength",
+                "description": "The most characters the rename field will accept — 31, the HFS filename\nlimit every System 7 name was cut to, which is also why the Finder could\nafford to always draw the whole name. Going past it fires\n`vf-name-too-long` with what was tried, so a host can say so rather than\nlet characters vanish.\n\nIt bounds *typing* only: a `label` set from your own data is displayed as\ngiven and fires nothing, since the name belongs to your model and silently\ntruncating it would lose data.",
+                "type": "number"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-select",
+                "description": "Selection changed by user interaction. `detail: { selected: boolean }`."
+              },
+              {
+                "name": "vf-change",
+                "description": "The name was committed. `detail: { label: string, previous: string }`."
+              },
+              {
+                "name": "vf-open",
+                "description": "The icon was opened — double-clicked anywhere on it, its name included, or ⌘O / ⌘↓ from the keyboard (Ctrl off the Mac), the System 7 shortcuts. Return renames instead, as the Finder's did. `detail: {}`."
+              },
+              {
+                "name": "vf-name-too-long",
+                "description": "A rename was typed or pasted past `maxlength`, and the field refused the excess. `detail: { attempted, accepted, limit }` — enough to raise the alert System 7 raised rather than drop the characters silently. Not fired for a `label` set from your own code, which is never truncated in the first place."
+              },
+              {
+                "name": "vf-name-rejected",
+                "description": "A rename was committed with no name in it, so the edit was dropped and the old name put back. `detail: { attempted, kept, reason: 'empty' }`. A `vf-change` is *not* fired alongside it — nothing changed."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-img",
+          "description": "`<vf-img>` — a raster image on the kit's pixel grid.\n\nThe reference art is full of small pixel graphics that are *pictures*, not\nglyphs: the Apple menu's logo, desk-accessory and document icons, the\nabout-box machine portrait. This component displays one — a slotted native\n`<img>` — at the kit's own magnification, treating **one image pixel as one\nsystem pixel**:\n\n- the image is sized to `naturalWidth × naturalHeight` system px, multiplied\n  by `--vf-scale` in `calc()` like every other metric, so a source pixel\n  covers exactly `scale × dpr` device pixels (a whole number, per layout\n  contract rule 1);\n- `image-rendering: pixelated` keeps the resampling nearest-neighbor, and on\n  a whole-device-pixel box that is bit-exact magnification — no smoothing,\n  no half-covered edge rows;\n- its own GridSnapController, so the image's origin holds the device\n  grid wherever the page puts it (a fractional origin would slide the whole\n  box across device pixels and shear every source pixel's coverage).\n\nThe graphic stays a real `<img>` in the consumer's light DOM — it keeps\nnative loading, `alt` text (use `alt=\"\"` for a decorative icon) and the\nconsumer's own asset URLs; the kit ships no raster files. `width`/`height`\n(in system px, whole numbers) state the box up front so the page doesn't\nshift when the file lands — until a size is known the box is 0×0, never a\nflash of the image at some other scale. They also override the natural size\ndeliberately: a whole multiple (`width=\"32\"` on 16-px art) magnifies on the\nsame grid.\n---\n\n\n### **Slots:**\n - _default_ - The image: a single `<img>` element.\n\n### **CSS Parts:**\n - **frame** - The sized box the image fills.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "width",
+              "description": "The displayed width in system px — a whole number. Defaults to the slotted\nimage's `naturalWidth` (one image px = one system px); state it explicitly\nto reserve the box before the file loads, or a whole multiple to magnify.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "height",
+              "description": "The displayed height in system px; see width.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The image: a single `<img>` element."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "width",
+                "description": "The displayed width in system px — a whole number. Defaults to the slotted\nimage's `naturalWidth` (one image px = one system px); state it explicitly\nto reserve the box before the file loads, or a whole multiple to magnify.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "height",
+                "description": "The displayed height in system px; see width.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-label",
+          "description": "`<vf-label>` — a static System 7 caption.\n\nThe \"Name:\" beside a field, the \"Mode\" heading over a group of radios, a\nnumeric readout beside a slider. Text the page was previously setting by hand\nin the display face — this is that, as a component, on the kit's grid:\n\n- the **Chicago-style chrome face** by default (dialog captions are chrome),\n  with `face=\"body\"` to switch to Geneva — which is also the kit's fine\n  print, as it was System 7's: a dialog's small captions are Geneva 9 at\n  its own strike size;\n- a **whole-system-pixel line box at the face's native pitch**\n  (`--vf-label-line-height`: 16px — Chicago 12's own line, which is also the\n  em; `face=\"body\"` drops to 12px, Geneva 9's), so a column of captions\n  accumulates whole offsets instead of pushing what follows off the\n  device-pixel grid the way a ratio `line-height` does (docs/SIZING.md\n  rule 2);\n- its own GridSnapController, so the bitmap stems stay on the grid\n  wherever the page puts it;\n- a **declared `width`** (VfSized) — the shared width of a caption\n  column, so a run of label-and-field rows lands every field on one x.\n  Left to its text a caption measures whatever its glyphs measure (the\n  showcase's Apple menu title came to 32.641 system px) and anything sized\n  from it inherits the fraction; a declared width is whole, and so is the\n  row built on it (layout contract rule 3). A caption wider than its column\n  overflows rather than reflowing the row: the number is the column, and a\n  caption that doesn't fit is a number to raise.\n\n`for` points at a control by id, as a native `<label>` does — clicking the\ncaption focuses that control, and the caption text becomes its accessible\nname (see for for how, and for what it deliberately doesn't do).\n\nChrome text, so the host is not selectable (SPEC §1); prose belongs in\n`<vf-paragraph>`, which is.\n---\n\n\n### **Slots:**\n - _default_ - The caption text.\n\n### **CSS Properties:**\n - **--vf-label-line-height** - The caption's own line box, in system px. Unset (the default) the box follows the face tokens below; set, it overrides both faces for labels alone. Keep any override a whole *even* number — a ratio puts every following line off the grid, and an odd value halves into the em's half-leading and puts the baseline on a half pixel. _(default: undefined)_\n- **--vf-line-height** - The body face's native line (default `12px`, Geneva 9's) — the face-level knob a body-face retheme states alongside `--vf-font-family` / `--vf-font-size`. _(default: undefined)_\n- **--vf-line-height-display** - The display face's native line (default `16px`, Chicago 12's) — the display retheme's third number. _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The inner text box.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "for",
+              "description": "The id of the control this caption names, resolved in the label's own tree\nscope (its document or shadow root), like a native `<label for>`.\n\nTwo things follow from it. **Clicking the caption focuses the control** —\na focus shortcut, not an activation: the kit's toggles carry their own\nlabels, so forwarding a click to one would double up on the label they\nalready have. And **the caption text becomes the control's accessible\nname**, by whichever route reaches it:\n\n- a `vf-*` control's focusable element lives in its shadow root, where an\n  `aria-label` on the host cannot reach it — which is why each of them\n  exposes a `label` property that lands on the inner control. That property\n  is what gets filled in, and only when the consumer left it empty.\n- anything else (a native `<input>`, an element with a role) is in this\n  label's own tree scope, so an `aria-labelledby` id reference works; it is\n  set only when the target has no name of its own — and a name computed\n  from the target's *content* counts: a `vf-checkbox` with slotted text, a\n  `vf-button`, a native `<button>` are already named by what they show, and\n  the caption declines rather than stamping over it.\n\nThe one target neither route reaches is a control whose focusable element\nis shadow-internal but which exposes no `label` property because it names\nfrom content — `vf-button` is the kit's case. With visible text it needs\nno caption; an icon-only one should carry its name on the art (`alt` on\nthe slotted `<img>`), which name-from-content picks up the same way.\n\nEither way the label puts back what it found when it is removed, the id\nchanges, or the caption text does.\n\nLeft `undefined` rather than `''` so an unset `for` reflects no attribute\nat all: `vf-label[for]` is a selector a page will reasonably write, and an\nempty `for=\"\"` on every plain caption would make it match all of them.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "face",
+              "description": "Which embedded face to set the caption in — `'display'` (the Chicago-style\nchrome face, the default) or `'body'` (Geneva). Applied by\n`vfStaticText`; declared here so it types and reflects.",
+              "value": { "type": "'display' | 'body' | undefined" }
+            },
+            {
+              "name": "dim",
+              "description": "Greys the caption to `--vf-disabled`. System 7 dims the label, not the\ncontrol (SPEC §1), so this is what a caption beside a disabled control\nwears — the control keeps its solid black box.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "width",
+              "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "height",
+              "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The caption text." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "for",
+                "description": "The id of the control this caption names, resolved in the label's own tree\nscope (its document or shadow root), like a native `<label for>`.\n\nTwo things follow from it. **Clicking the caption focuses the control** —\na focus shortcut, not an activation: the kit's toggles carry their own\nlabels, so forwarding a click to one would double up on the label they\nalready have. And **the caption text becomes the control's accessible\nname**, by whichever route reaches it:\n\n- a `vf-*` control's focusable element lives in its shadow root, where an\n  `aria-label` on the host cannot reach it — which is why each of them\n  exposes a `label` property that lands on the inner control. That property\n  is what gets filled in, and only when the consumer left it empty.\n- anything else (a native `<input>`, an element with a role) is in this\n  label's own tree scope, so an `aria-labelledby` id reference works; it is\n  set only when the target has no name of its own — and a name computed\n  from the target's *content* counts: a `vf-checkbox` with slotted text, a\n  `vf-button`, a native `<button>` are already named by what they show, and\n  the caption declines rather than stamping over it.\n\nThe one target neither route reaches is a control whose focusable element\nis shadow-internal but which exposes no `label` property because it names\nfrom content — `vf-button` is the kit's case. With visible text it needs\nno caption; an icon-only one should carry its name on the art (`alt` on\nthe slotted `<img>`), which name-from-content picks up the same way.\n\nEither way the label puts back what it found when it is removed, the id\nchanges, or the caption text does.\n\nLeft `undefined` rather than `''` so an unset `for` reflects no attribute\nat all: `vf-label[for]` is a selector a page will reasonably write, and an\nempty `for=\"\"` on every plain caption would make it match all of them.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "face",
+                "description": "Which embedded face to set the caption in — `'display'` (the Chicago-style\nchrome face, the default) or `'body'` (Geneva). Applied by\n`vfStaticText`; declared here so it types and reflects.",
+                "type": "'display' | 'body' | undefined"
+              },
+              {
+                "name": "dim",
+                "description": "Greys the caption to `--vf-disabled`. System 7 dims the label, not the\ncontrol (SPEC §1), so this is what a caption beside a disabled control\nwears — the control keeps its solid black box.",
+                "type": "boolean"
+              },
+              {
+                "name": "width",
+                "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "height",
+                "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-list-item",
+          "description": "`<vf-list-item>` — a row inside a `<vf-list>` list box.\n\nA 20px-tall single-line row; when selected the entire row inverts\n(white-on-black), the classic System 7 selection style. Selection and\nkeyboard focus are managed by the parent `<vf-list>`.\n---\n\n\n### **Slots:**\n - _default_ - The row's text/content.\n- **icon** - A leading graphic — usually a `vf-img` holding a 16×16 System 7 small icon, but any element rides here. The row lays it out as the icon gutter: flex-centered vertically (keep the difference between the row height and the icon height even, so the centering offset stays a whole pixel — 16 in a 20px row is a whole 2px), with the reference art's 4px gap to the text. Contributes no text, so first-letter type-ahead still reads the row's words. On a selected row the graphic rides the inverted bar as-is — System 7 left color icons unfiltered on the highlight.\n\n### **CSS Parts:**\n - **text** - The text span beside the icon gutter (ellipsizes).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The value this row contributes to the list's `value`/`values`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "selected",
+              "description": "Whether the row is selected (inverted). Managed by `<vf-list>`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the row: dimmed text, not selectable or focusable.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The row's text/content." },
+            {
+              "name": "icon",
+              "description": "A leading graphic — usually a `vf-img` holding a 16×16 System 7 small icon, but any element rides here. The row lays it out as the icon gutter: flex-centered vertically (keep the difference between the row height and the icon height even, so the centering offset stays a whole pixel — 16 in a 20px row is a whole 2px), with the reference art's 4px gap to the text. Contributes no text, so first-letter type-ahead still reads the row's words. On a selected row the graphic rides the inverted bar as-is — System 7 left color icons unfiltered on the highlight."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value this row contributes to the list's `value`/`values`.",
+                "type": "string"
+              },
+              {
+                "name": "selected",
+                "description": "Whether the row is selected (inverted). Managed by `<vf-list>`.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the row: dimmed text, not selectable or focusable.",
+                "type": "boolean"
+              },
+              {
+                "name": "listDisabled",
+                "description": "True while the containing `<vf-list>` is disabled. Managed by the list —\nnot intended to be set by consumers. Kept distinct from `disabled` so\nre-enabling the list doesn't clear rows that are disabled in their own\nright. (The dimming already arrives by inheritance: the list host sets\n`color: var(--vf-disabled)` and rows inherit it.) Mirrors\n`vf-radio.groupDisabled`.",
+                "type": "boolean"
+              },
+              { "name": "role", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-list",
+          "description": "`<vf-list>` — the classic System 7 list box.\n\nA white, black-bordered scrolling box of `<vf-list-item>` rows with the\nkit-drawn System 7 scroll rail (dither trough, boxed arrow buttons, fixed\nthumb — the shared `vfScrollRail` subtree, synced to the native scrolling\nby ScrollRailController). The vertical rail is a permanent\nplaceholder — arrows on an empty white channel when the rows fit, the\ndither and thumb filling in only on overflow (driven by\nScrollStateController). Selection inverts rows. Supports single and\nmultiple selection, roving tabindex, arrow-key navigation, and classic Finder\nfirst-letter type-ahead.\n\nMax height defaults to 200px; override with `--vf-list-max-height`.\n---\n\n\n### **Events:**\n - **vf-change** - When the user changes the selection. `detail: { value: string, values: string[] }`.\n\n### **Slots:**\n - _default_ - `vf-list-item` elements.\n\n### **CSS Properties:**\n - **--vf-list-max-height** - `vf-list` max height before its rail takes over (the host adds the 2px frame) _(default: 200px)_\n- **--vf-scrollbar-thumb** - scrollbar thumb/elevator (white) _(default: undefined)_\n- **--vf-scrollbar-track** - the scroll trough's base color under the dot-dither (white) _(default: undefined)_\n\n### **CSS Parts:**\n - **list** - The scrolling viewport around the slotted items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "multiple",
+              "description": "Allows multiple selection (Shift extends, Cmd/Ctrl toggles).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "Value of the (first) selected item. Settable.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the whole list: dimmed, no interaction.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the list, applied as `aria-label` on the host (which\ncarries `role=\"listbox\"`). Without it a caption-less list is announced\nanonymously. A consumer-supplied `aria-label`/`aria-labelledby` attribute\nis left alone.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "`vf-list-item` elements." }],
+          "events": [
+            {
+              "name": "vf-change",
+              "description": "When the user changes the selection. `detail: { value: string, values: string[] }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "multiple",
+                "description": "Allows multiple selection (Shift extends, Cmd/Ctrl toggles).",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "Value of the (first) selected item. Settable.",
+                "type": "string"
+              },
+              {
+                "name": "values",
+                "description": "Values of all selected items (multiple mode). Settable.",
+                "type": "string[]"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the whole list: dimmed, no interaction.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the list, applied as `aria-label` on the host (which\ncarries `role=\"listbox\"`). Without it a caption-less list is announced\nanonymously. A consumer-supplied `aria-label`/`aria-labelledby` attribute\nis left alone.",
+                "type": "string"
+              },
+              { "name": "role", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-change",
+                "description": "When the user changes the selection. `detail: { value: string, values: string[] }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-menu-bar",
+          "description": "`<vf-menu-bar>` — the System 7 menu bar: white strip, 1px black bottom\nrule, slotted `<vf-menu>` children laid out from the left. `rounded` adds\nthe classic screen-corner mask to the top corners.\n\nCoordinates its menus: pressing a label opens that menu (and inverts the\nlabel); while any menu is open, hovering another label switches to it;\nEscape, an outside click, or item selection closes. ArrowLeft/ArrowRight\nmove between menus while one is open; ArrowDown/ArrowUp move focus through\nthe open menu's items, Home/End jump to its first/last, and typed letters\nrun the shared Finder first-letter type-ahead (src/type-ahead.ts).\n\nThe bar also owns the **press-drag-release** gesture (see src/menu-press.ts)\n— press a title, slide onto a command, release over it — because one press\nmay travel across several of its menus. `vf-select` drives its popup by the\nsame mechanic.\n---\n\n\n### **Slots:**\n - _default_ - `vf-menu` elements.\n\n### **CSS Properties:**\n - **--vf-menubar-height** - `vf-menu-bar` _(default: 20px)_\n\n### **CSS Parts:**\n - **bar** - The horizontal layout container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Accessible name for the bar, applied as `aria-label` on the host (which\ncarries `role=\"menubar\"`). Without it the menubar computes with an empty\nname. A consumer-supplied `aria-label`/`aria-labelledby` attribute is\nleft alone.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "rounded",
+              "description": "Rounds the bar's top corners the way System 7's were: not a curve of the\nbar itself but the black stair-step mask the compact Mac's ROM painted\nover the CRT's rounded corners, which the menu bar wore by sitting flush\nwith the screen top. Drawn as the traced 5-px staircase in `--vf-black`\nink over the bar's own corners — over any backdrop, as the hardware\nmask was.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "`vf-menu` elements." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Accessible name for the bar, applied as `aria-label` on the host (which\ncarries `role=\"menubar\"`). Without it the menubar computes with an empty\nname. A consumer-supplied `aria-label`/`aria-labelledby` attribute is\nleft alone.",
+                "type": "string"
+              },
+              {
+                "name": "rounded",
+                "description": "Rounds the bar's top corners the way System 7's were: not a curve of the\nbar itself but the black stair-step mask the compact Mac's ROM painted\nover the CRT's rounded corners, which the menu bar wore by sitting flush\nwith the screen top. Drawn as the traced 5-px staircase in `--vf-black`\nink over the bar's own corners — over any backdrop, as the hardware\nmask was.",
+                "type": "boolean"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-menu-item",
+          "description": "`<vf-menu-item>` — a single command inside a `<vf-menu>` panel.\n\nRenders the classic System 7 menu row: optional ✓ check in the\n`--vf-select-gutter` left column (16px, shared with vf-select/vf-option),\nlabel, and the keyboard shortcut left-aligned in a right-anchored column,\nso every ⌘ lands at the same x. On activation the item performs the classic\n3-blink inversion (~250ms), then dispatches `vf-menu-select` and asks its\nancestors to close the menu.\n---\n\n\n### **Events:**\n - **vf-menu-select** - After the blink completes. `detail: { value, item }`. Named for the menu rather than plain `vf-select`, which would collide with the `<vf-select>` popup on any delegated ancestor listener (that component commits with `vf-change`).\n\n### **Slots:**\n - _default_ - The item label.\n\n### **CSS Properties:**\n - **--vf-menu-row-height** - `vf-menu-item` row pitch (`Menus.png`; kept separate from `--vf-popup-height` so re-theming the popup pill doesn't move pulldown rows) _(default: 16px)_\n- **--vf-menu-shortcut-column** - `vf-menu-item` shortcut slot, right-anchored with the text left-aligned in it so every ⌘ lands at the same x (`Menus.png`) — the MDEF reserve, ⌘'s 11px advance + the face's widest letter (M/W, 12px); widen it to line up longer shortcuts (\"⌘⇧S\") _(default: 23px)_\n- **--vf-select-gutter** - checkmark column: `vf-select` left inset / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift on open) _(default: 16px)_\n\n### **CSS Parts:**\n - **item** - The row container.\n- **check** - The ✓ checkmark glyph (rendered when `checked`).\n- **label** - The label wrapper around the default slot.\n- **shortcut** - The shortcut text, left-aligned in the shared column.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables the item: dimmed text, no highlight, no activation.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "Shows the classic ✓ checkmark in the left gutter.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "active",
+              "description": "Transient highlight — the full-row inversion the press-drag gesture paints\non the row under the pointer (`:hover` can't: under touch the pointer is\ncaptured by the title the press started on). Managed by the menu, mirroring\n`vf-option[active]`; not part of the authoring API.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checkable",
+              "description": "Declares the item a *checkable* toggle up front, so it carries\n`role=\"menuitemcheckbox\"` and `aria-checked=\"false\"` from the first render\nrather than only once it has been checked. Set this on a toggle that starts\n**off** — otherwise it announces as a plain command until the first flip\n(the `checked` attribute can't express \"checkable but off\": for a boolean\nattribute, presence *is* true).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "shortcut",
+              "description": "Keyboard shortcut text, e.g. `\"⌘H\"`, drawn left-aligned in the panel's\nshared shortcut column. Display only in the\nvisual sense — the span is `aria-hidden` so the glyphs never concatenate\ninto the item's accessible name (\"Print… place of interest sign P\") —\nwhile the host mirrors it as `aria-keyshortcuts` (\"Meta+H\"), so AT\nannounces it *as* a shortcut. A consumer's own `aria-keyshortcuts` wins.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "Value reported in the `vf-menu-select` event detail. Defaults to the item's\ntrimmed text content when unset.",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The item label." }],
+          "events": [
+            {
+              "name": "vf-menu-select",
+              "description": "After the blink completes. `detail: { value, item }`. Named for the menu rather than plain `vf-select`, which would collide with the `<vf-select>` popup on any delegated ancestor listener (that component commits with `vf-change`)."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "Disables the item: dimmed text, no highlight, no activation.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Shows the classic ✓ checkmark in the left gutter.",
+                "type": "boolean"
+              },
+              {
+                "name": "active",
+                "description": "Transient highlight — the full-row inversion the press-drag gesture paints\non the row under the pointer (`:hover` can't: under touch the pointer is\ncaptured by the title the press started on). Managed by the menu, mirroring\n`vf-option[active]`; not part of the authoring API.",
+                "type": "boolean"
+              },
+              {
+                "name": "checkable",
+                "description": "Declares the item a *checkable* toggle up front, so it carries\n`role=\"menuitemcheckbox\"` and `aria-checked=\"false\"` from the first render\nrather than only once it has been checked. Set this on a toggle that starts\n**off** — otherwise it announces as a plain command until the first flip\n(the `checked` attribute can't express \"checkable but off\": for a boolean\nattribute, presence *is* true).",
+                "type": "boolean"
+              },
+              {
+                "name": "shortcut",
+                "description": "Keyboard shortcut text, e.g. `\"⌘H\"`, drawn left-aligned in the panel's\nshared shortcut column. Display only in the\nvisual sense — the span is `aria-hidden` so the glyphs never concatenate\ninto the item's accessible name (\"Print… place of interest sign P\") —\nwhile the host mirrors it as `aria-keyshortcuts` (\"Meta+H\"), so AT\nannounces it *as* a shortcut. A consumer's own `aria-keyshortcuts` wins.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "Value reported in the `vf-menu-select` event detail. Defaults to the item's\ntrimmed text content when unset.",
+                "type": "string | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-menu-select",
+                "description": "After the blink completes. `detail: { value, item }`. Named for the menu rather than plain `vf-select`, which would collide with the `<vf-select>` popup on any delegated ancestor listener (that component commits with `vf-change`)."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-menu",
+          "description": "`<vf-menu>` — a pull-down menu: a bar label plus a dropped panel of\n`<vf-menu-item>` / `<vf-separator>` children.\n\nInside a `<vf-menu-bar>` the bar coordinates open state (only one menu open,\nhover-switching, outside-click/Escape dismissal) and owns the pointer\ngesture, which may travel between its menus. Used standalone, the menu\ntoggles itself on label click and manages its own dismissal, its own press\ngesture and item keyboard navigation (ArrowUp/ArrowDown, Home/End, and the\nshared first-letter type-ahead — src/type-ahead.ts) while open.\n\nPointer — the two styles `vf-select` supports, on the same terms (see\nsrc/menu-press.ts): the System 7 press-drag-release (press the title, slide\nonto a command, release over it) and a modern quick tap that leaves the menu\ndropped for a second click.\n---\n\n\n### **Slots:**\n - _default_ - Menu contents: `vf-menu-item` and `vf-separator` elements.\n- **label** - Replaces the `label` text in the bar — e.g. a `vf-img` apple icon for the Apple menu. Keep the `label` attribute set too: it stays the menu's accessible name (the bar item's `aria-label` and the panel's) when the visible title is an image.\n\n### **CSS Properties:**\n - **--vf-menubar-height** - `vf-menu-bar` _(default: 20px)_\n- **--vf-menu-row-height** - `vf-menu-item` row pitch; the panel also spends one of these on every slotted `vf-separator`, the full row the MDEF gave a divider (rule 8px into it — see the panel CSS) _(default: 16px)_\n\n### **CSS Parts:**\n - **label** - The menu title in the bar (inverts while open).\n- **panel** - The dropped `.vf-panel` containing the items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The menu title shown in the bar, and the menu's accessible name. Slotted\n`label` content replaces it visually (see the `label` slot) but this text\nkeeps naming the menu for AT.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "open",
+              "description": "Whether the panel is dropped. Reflected. Managed by the parent\n`vf-menu-bar` when present, otherwise by the menu itself.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Menu contents: `vf-menu-item` and `vf-separator` elements."
+            },
+            {
+              "name": "label",
+              "description": "Replaces the `label` text in the bar — e.g. a `vf-img` apple icon for the Apple menu. Keep the `label` attribute set too: it stays the menu's accessible name (the bar item's `aria-label` and the panel's) when the visible title is an image."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The menu title shown in the bar, and the menu's accessible name. Slotted\n`label` content replaces it visually (see the `label` slot) but this text\nkeeps naming the menu for AT.",
+                "type": "string"
+              },
+              {
+                "name": "open",
+                "description": "Whether the panel is dropped. Reflected. Managed by the parent\n`vf-menu-bar` when present, otherwise by the menu itself.",
+                "type": "boolean"
+              },
+              {
+                "name": "barTabIndex",
+                "description": "The bar label's tabindex. A parent `vf-menu-bar` owns a roving tabindex\nacross its menus and sets this to 0 on the active menu, -1 on the rest,\nso the whole bar is a single Tab stop. Defaults to 0 so a standalone\nmenu is Tab-focusable on its own.",
+                "type": "number"
+              },
+              {
+                "name": "items",
+                "description": "The enabled `vf-menu-item` children, in document order.",
+                "type": "VfMenuItem[]"
+              },
+              {
+                "name": "allItems",
+                "description": "Every slotted `vf-menu-item`, in document order — **disabled rows\nincluded**, unlike items. The press gesture hit-tests against\nthese: releasing over a disabled row has to cancel, not fall through to\nwhatever the panel covers.",
+                "type": "VfMenuItem[]"
+              },
+              {
+                "name": "labelRect",
+                "description": "Viewport rect of the bar title, or `null` before the first render. The\npress gesture hit-tests by coordinates rather than by event target (see\nsrc/menu-press.ts), so it wants the box, not the element.",
+                "type": "DOMRect | null"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-number-field",
+          "description": "`<vf-number-field>` — a System 7 numeric entry field paired with the classic\n\"little arrows\" stepper.\n\nA form-associated wrapper around a native `<input>` (white well, 1px black\nborder) plus the pixel-exact little-arrows control from the Classic Macintosh\nUI Kit sprite. Clicking (or press-and-holding, with autorepeat) an arrow\nsteps the value by `step`, clamped to `min`/`max`; the held arrow fills solid\nblack, matching the kit's hollow→filled press convention. Keyboard focus\ndraws the kit's dashed rule under the well alone — the stepper is beside the\ntext, not part of it. The field is a `spinbutton`: ArrowUp/ArrowDown step, Home/End\njump to min/max. The shared field skin lives in `vfField`; the value/form\nscaffolding in VfTextControlBase.\n---\n\n\n### **Events:**\n - **vf-input** - On every keystroke. `detail: { value, valueAsNumber }`.\n- **vf-change** - On commit or step. `detail: { value, valueAsNumber }`.\n- **input** - The native event: the inner input's own on a keystroke (composed, crosses the boundary itself), dispatched from the host on a step — a native number input's spinner fires it per click too.\n- **change** - The native commit event, dispatched from the host on a typed commit and on every step, as a native spinner does. The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner input; unset, `inputmode` stays the numeric keypad's `decimal` and `autocomplete` stays `off`.\n\n### **CSS Properties:**\n - **--vf-control-height** - text fields — `vf-text-field`, `vf-text-area`, the `vf-number-field` well _(default: 22px)_\n- **--vf-number-field-width** - width of `vf-number-field`'s input, in its own text (an em, not a system px length — it sizes to the digits) _(default: 4em)_\n- **--vf-field-placeholder** - placeholder text in the editable fields — kept off `--vf-disabled`: a placeholder sits in an *enabled* well and holds AA contrast, where the disabled gray is exempt _(default: #767676)_\n\n### **CSS Parts:**\n - **input** - The inner native `<input>`.\n- **stepper** - The little-arrows control.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "min",
+              "description": "Minimum allowed value (inclusive). Omit for no lower bound.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "max",
+              "description": "Maximum allowed value (inclusive). Omit for no upper bound.",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "step",
+              "description": "Increment applied per step / arrow press. Also sets the value's precision.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Current value. Synced on every keystroke and submitted with forms.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text shown when the field is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the field read-only (focusable, not editable).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "Form field name used when submitting the associated form.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, applied as `aria-label` on the inner native control (the\nelement that receives focus and is announced by screen readers — a host\nattribute cannot reach it on its own). Left empty, the name falls back to\nwhatever the host carries — `aria-labelledby`, `aria-label` or an\nassociated `<label for>` — via VfShadowRoleControl.hostLabel, so the\nplatform's own labeling vocabulary works on these controls too.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-input",
+              "description": "On every keystroke. `detail: { value, valueAsNumber }`."
+            },
+            {
+              "name": "vf-change",
+              "description": "On commit or step. `detail: { value, valueAsNumber }`."
+            },
+            {
+              "name": "input",
+              "description": "The native event: the inner input's own on a keystroke (composed, crosses the boundary itself), dispatched from the host on a step — a native number input's spinner fires it per click too."
+            },
+            {
+              "name": "change",
+              "description": "The native commit event, dispatched from the host on a typed commit and on every step, as a native spinner does. The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner input; unset, `inputmode` stays the numeric keypad's `decimal` and `autocomplete` stays `off`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "min",
+                "description": "Minimum allowed value (inclusive). Omit for no lower bound.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "max",
+                "description": "Maximum allowed value (inclusive). Omit for no upper bound.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "step",
+                "description": "Increment applied per step / arrow press. Also sets the value's precision.",
+                "type": "number"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "value",
+                "description": "Current value. Synced on every keystroke and submitted with forms.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text shown when the field is empty.",
+                "type": "string"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the field read-only (focusable, not editable).",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "Form field name used when submitting the associated form.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, applied as `aria-label` on the inner native control (the\nelement that receives focus and is announced by screen readers — a host\nattribute cannot reach it on its own). Left empty, the name falls back to\nwhatever the host carries — `aria-labelledby`, `aria-label` or an\nassociated `<label for>` — via VfShadowRoleControl.hostLabel, so the\nplatform's own labeling vocabulary works on these controls too.",
+                "type": "string"
+              },
+              {
+                "name": "description",
+                "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-input",
+                "description": "On every keystroke. `detail: { value, valueAsNumber }`."
+              },
+              {
+                "name": "vf-change",
+                "description": "On commit or step. `detail: { value, valueAsNumber }`."
+              },
+              {
+                "name": "input",
+                "description": "The native event: the inner input's own on a keystroke (composed, crosses the boundary itself), dispatched from the host on a step — a native number input's spinner fires it per click too."
+              },
+              {
+                "name": "change",
+                "description": "The native commit event, dispatched from the host on a typed commit and on every step, as a native spinner does. The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner input; unset, `inputmode` stays the numeric keypad's `decimal` and `autocomplete` stays `off`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-option",
+          "description": "`<vf-option>` — a single choice inside a `<vf-select>` popup menu.\n\nA light-DOM child of `<vf-select>` (slotted into the popup panel). Renders\nits slotted label at menu-item metrics (16px row — the pill's content height,\nso a selected option overlays the closed pill exactly; the left checkmark gutter is\n`--vf-select-gutter`, shared with the closed control's left inset so the value\ndoesn't shift on open). The parent select manages `selected` and the transient\n`active` highlight, and slots this element into its popup panel.\n\nThe host carries `role=\"option\"` with `aria-selected`/`aria-disabled`.\n---\n\n\n### **CSS Properties:**\n - **--vf-popup-height** - `vf-select` pill (border box; its 1px hard shadow makes the sheet's 157×19 ink box) _(default: 18px)_\n- **--vf-select-gutter** - checkmark column: `vf-select` left inset / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift on open) _(default: 16px)_\n\n### **CSS Parts:**\n - **check** - The ✓ checkmark shown in the left gutter when selected.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Submitted/compared value of this option. Falls back to the trimmed text\ncontent when empty (like a native `<option>`).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the option: gray text, not selectable.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selected",
+              "description": "Whether this option is the select's current value. Managed by the parent.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "active",
+              "description": "Transient highlight (hover / keyboard cursor) — full-row inversion.\nManaged by the parent `<vf-select>`; not part of the authoring API.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Submitted/compared value of this option. Falls back to the trimmed text\ncontent when empty (like a native `<option>`).",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the option: gray text, not selectable.",
+                "type": "boolean"
+              },
+              {
+                "name": "selected",
+                "description": "Whether this option is the select's current value. Managed by the parent.",
+                "type": "boolean"
+              },
+              {
+                "name": "active",
+                "description": "Transient highlight (hover / keyboard cursor) — full-row inversion.\nManaged by the parent `<vf-select>`; not part of the authoring API.",
+                "type": "boolean"
+              },
+              { "name": "role", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-paragraph",
+          "description": "`<vf-paragraph>` — a paragraph of copy on the kit's body face and grid.\n\nThe installer's welcome text, a dialog's explanation, an article's prose:\nanything a page would otherwise set with a `<p>` and hope the leading landed\nsomewhere sensible. What it adds over that `<p>`:\n\n- the **Geneva body face** by default (`face=\"display\"` switches to\n  the Chicago-style chrome face);\n- a **whole-system-pixel line box at the face's native pitch** —\n  `--vf-paragraph-line-height`: 12px for the body face (Geneva 9's own\n  strike line) and 16px under `face=\"display\"` (Chicago 12's — ascent 12 +\n  descent 3 + leading 1, the pitch a real dialog wrapped its copy on).\n  Whole pixels are the point of the component: line boxes are the single\n  biggest source of off-grid layout, because a ratio resolves to whatever\n  it resolves to (`1.65 × 17px = 28.05px`) and every line of prose nudges\n  everything after it further off the device-pixel grid, smearing 1-bit\n  borders and bitmap glyph stems (docs/SIZING.md rule 2). A\n  whole-pixel line box accumulates whole offsets;\n- its own GridSnapController, so it holds its own origin once the\n  page opts in with `applyGridSnap()`;\n- a **declared box** when the layout wants one — `width`/`height` in whole\n  system px (VfSized). In flow a paragraph takes its container's\n  width, which is usually right; a *placed* one (`top`/`left`) shrink-wraps\n  its longest line instead — a fractional glyph-run width, wrapped wherever\n  the parent's edge happens to fall — so a DITL-style layout states the\n  measure the copy wraps to, whole and on the grid.\n\nThe shadow root renders a real `<p>`, so the copy keeps paragraph semantics\nfor assistive tech, and — unlike the kit's chrome — the text is selectable.\nThere is no margin: per SPEC §2 a component adds nothing outside its own box,\nso paragraph spacing is the page's (a `gap` on the column, or a margin on the\nhost — kept a whole number of pixels, like everything else in the contract).\n---\n\n\n### **Slots:**\n - _default_ - The paragraph copy.\n\n### **CSS Properties:**\n - **--vf-paragraph-line-height** - This paragraph kind's own line box, in system px. Unset (the default) the box follows the face tokens below; set, it overrides both faces for paragraphs alone. Keep any override a whole *even* number — a ratio is what puts a page off the grid in the first place, and half the difference to the 16px em is half-leading, so an odd value lands the baseline on a half pixel. _(default: undefined)_\n- **--vf-line-height** - The body face's native line (default `12px`, Geneva 9's) — the face-level knob: retheming the body face to another strike states this alongside `--vf-font-family` / `--vf-font-size`. _(default: undefined)_\n- **--vf-line-height-display** - The display face's native line (default `16px`, Chicago 12's) — the display retheme's third number. _(default: undefined)_\n\n### **CSS Parts:**\n - **paragraph** - The inner `<p>`.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "face",
+              "description": "Which embedded face to set the copy in — `'body'` (Geneva, the\ndefault) or `'display'` (the Chicago-style chrome face, for copy that is\nreally dialog chrome). Applied by `vfStaticText`; declared here so it types\nand reflects.",
+              "value": { "type": "'display' | 'body' | undefined" }
+            },
+            {
+              "name": "dim",
+              "description": "Greys the copy to `--vf-disabled` — System 7's dimmed static text.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "width",
+              "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "height",
+              "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The paragraph copy." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "face",
+                "description": "Which embedded face to set the copy in — `'body'` (Geneva, the\ndefault) or `'display'` (the Chicago-style chrome face, for copy that is\nreally dialog chrome). Applied by `vfStaticText`; declared here so it types\nand reflects.",
+                "type": "'display' | 'body' | undefined"
+              },
+              {
+                "name": "dim",
+                "description": "Greys the copy to `--vf-disabled` — System 7's dimmed static text.",
+                "type": "boolean"
+              },
+              {
+                "name": "width",
+                "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "height",
+                "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-progress-bar",
+          "description": "`<vf-progress-bar>` — the System 7 progress indicator.\n\nA 14px white track (`--vf-progress-track`) with a 1px black border.\nDeterminate mode fills from the left in solid black\n(`--vf-progress-fill`) with a 1px black leading edge. Indeterminate\nmode shows chunky, stepped diagonal black/white barber stripes (the classic\n\"busy\" bar) animated with `steps()` timing so movement is deliberately\nsteppy, not smooth.\n\nExposes `role=\"progressbar\"` with `aria-valuemin/max` and, when\ndeterminate, `aria-valuenow`.\n---\n\n\n### **CSS Properties:**\n - **--vf-progress-fill** - determinate progress fill (solid black) _(default: #000000)_\n- **--vf-progress-stripes** - the indeterminate barber stripes — a 12×12 motif drawn as rects so the staircase stays whole system px at any scale, on a 60-system-px tile (override the whole tile — consumer art renders as a placed tile grid at that same geometry) _(default: undefined)_\n- **--vf-progress-track** - progress track (white) _(default: #ffffff)_\n\n### **CSS Parts:**\n - **track** - The outer bordered track.\n- **fill** - The determinate fill or the indeterminate stripe layer.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Current progress, from 0 to `max`. Clamped for display and ARIA.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "Maximum value (default 100).",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Barber-pole \"busy\" mode; ignores `value` and omits `aria-valuenow`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the bar, applied as the host's `aria-label` (which\ncarries `role=\"progressbar\"`). Especially useful in `indeterminate` mode,\nwhere there is no `aria-valuenow` to describe the bar. A consumer-supplied\n`aria-label`/`aria-labelledby` attribute is left alone.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Current progress, from 0 to `max`. Clamped for display and ARIA.",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "Maximum value (default 100).",
+                "type": "number"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Barber-pole \"busy\" mode; ignores `value` and omits `aria-valuenow`.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the bar, applied as the host's `aria-label` (which\ncarries `role=\"progressbar\"`). Especially useful in `indeterminate` mode,\nwhere there is no `aria-valuenow` to describe the bar. A consumer-supplied\n`aria-label`/`aria-labelledby` attribute is left alone.",
+                "type": "string"
+              },
+              { "name": "role", "type": "string" },
+              { "name": "ariaValueMin", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-radio-group",
+          "description": "Groups `vf-radio` children, owning selection, keyboard navigation and the\nform value. Renders no chrome of its own; directly slotted radios stack\nvertically with a 6px gap (override with your own layout if needed —\narbitrary markup containing radios also works).\n\nForm-associated: submits `value` under `name`, restores the initial value\non form reset. Keeps children in sync — the child whose `value` matches\nthe group's `value` is checked, all others unchecked.\n\nKeyboard (classic Mac behavior): the group is one tab stop (roving\ntabindex on the selected radio); ArrowUp/ArrowLeft and\nArrowDown/ArrowRight move the selection AND select it, wrapping around\nand skipping disabled radios.\n---\n\n\n### **Events:**\n - **vf-change** - When the selection changes via user interaction. `detail: { value: string }`.\n- **input** - Native event, dispatched from the group (the form-associated surface) per user pick. A programmatic `value` set fires nothing.\n- **change** - Native event, dispatched from the group per user pick so form delegation and framework bindings hear it.\n\n### **Slots:**\n - _default_ - `vf-radio` elements, or arbitrary markup containing them.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The value of the selected radio. An empty string means no selection\n(and nothing is submitted with the form).",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "Form field name used when submitting.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the group, exposed as the `radiogroup`'s `aria-label`.\nWithout it a caption-less group is announced anonymously.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "`vf-radio` elements, or arbitrary markup containing them."
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-change",
+              "description": "When the selection changes via user interaction. `detail: { value: string }`."
+            },
+            {
+              "name": "input",
+              "description": "Native event, dispatched from the group (the form-associated surface) per user pick. A programmatic `value` set fires nothing."
+            },
+            {
+              "name": "change",
+              "description": "Native event, dispatched from the group per user pick so form delegation and framework bindings hear it."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the selected radio. An empty string means no selection\n(and nothing is submitted with the form).",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "Form field name used when submitting.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the group, exposed as the `radiogroup`'s `aria-label`.\nWithout it a caption-less group is announced anonymously.",
+                "type": "string"
+              },
+              { "name": "role", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-change",
+                "description": "When the selection changes via user interaction. `detail: { value: string }`."
+              },
+              {
+                "name": "input",
+                "description": "Native event, dispatched from the group (the form-associated surface) per user pick. A programmatic `value` set fires nothing."
+              },
+              {
+                "name": "change",
+                "description": "Native event, dispatched from the group per user pick so form delegation and framework bindings hear it."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-radio",
+          "description": "A single System 7 radio button: a 13×13 white circle with the pixel-exact\n1-bit ring and centered dot traced from the Classic Macintosh UI Kit sprite\n(replacing the anti-aliased `border-radius` rendering). The ring thickens\nwhile pressed, exactly like the original control.\n\nRadios are meant to live inside a `vf-radio-group`, which owns selection\nstate, the form value and the roving tabindex. A `vf-radio` is NOT itself\nform-associated. Clicking (or pressing Space on) an unselected radio\ndispatches `vf-change`; the containing group listens, selects it and\nunselects its siblings.\n---\n\n\n### **Events:**\n - **vf-change** - When selected by user interaction. `detail: { value: string }`.\n\n### **Slots:**\n - _default_ - The label, rendered to the right of the circle with a 6px gap.\n\n### **CSS Parts:**\n - **circle** - The 13×13 radio circle.\n- **label** - The label wrapper around the slot.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "checked",
+              "description": "Whether this radio is selected. Managed by the containing group.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables this single radio: the label dims to gray; circle and dot stay black.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The value the containing `vf-radio-group` reports when selected.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The label, rendered to the right of the circle with a 6px gap."
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-change",
+              "description": "When selected by user interaction. `detail: { value: string }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "checked",
+                "description": "Whether this radio is selected. Managed by the containing group.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables this single radio: the label dims to gray; circle and dot stay black.",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "The value the containing `vf-radio-group` reports when selected.",
+                "type": "string"
+              },
+              {
+                "name": "groupDisabled",
+                "description": "True while the containing `vf-radio-group` is disabled. Managed by the\ngroup — not intended to be set by consumers.",
+                "type": "boolean"
+              },
+              { "name": "role", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-change",
+                "description": "When selected by user interaction. `detail: { value: string }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-scroll-area",
+          "description": "`<vf-scroll-area>` — a container whose scrollbars look like System 7.\n\nWhite box with a 1px black frame, an inner scrolling viewport, and scroll\nrails the kit draws itself as shadow DOM (the shared `vfScrollRail` recipe):\nboxed arrow buttons at each end, a loose 1-bit dot-dither trough, and the\nclassic fixed 16px thumb. The native scrollbar is hidden, never the native\nscrolling — wheel, trackpad momentum, keyboard, touch and assistive-tech\nscrolling stay the platform's, and ScrollRailController keeps the\nrail in sync while driving the classic interactions (thumb drag, trough\npaging, arrow stepping with auto-repeat). Every engine renders the same\nrail — there is no Firefox fallback skin anymore.\n\nEach reserved scroll rail is a permanent placeholder: arrow buttons on an\nempty white channel sit in the gutter even when the content fits, the\ndither and thumb filling in only once that axis overflows (System 7 drew\nan active window's no-overflow bar as arrows on a bare channel; driven\nby ScrollStateController). Which rails are reserved is set by\naxis; when both are reserved the bottom-right corner joins them.\n\nSize the host (width/height) from the outside; the viewport fills it.\n---\n\n\n### **Slots:**\n - _default_ - Scrollable content.\n\n### **CSS Properties:**\n - **--vf-scrollbar-thumb** - scrollbar thumb/elevator (white) _(default: undefined)_\n- **--vf-scrollbar-track** - the scroll trough's base color under the dot-dither (white) _(default: undefined)_\n\n### **CSS Parts:**\n - **viewport** - The inner scrolling container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "axis",
+              "description": "Which scroll rails to reserve as permanent placeholders: `vertical`\n(default), `horizontal`, or `both`. Each reserved rail shows an empty white\nchannel until its axis overflows; the unreserved axis still scrolls\nnatively (wheel, keyboard) but draws no rail.",
+              "value": {
+                "type": "'vertical' | 'horizontal' | 'both'",
+                "default": "'vertical'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the scrolling viewport, applied as its `aria-label`\n(an `aria-label` on the host would not reach into the shadow DOM). The\nviewport is keyboard-focusable while its content overflows, so without a\nname it is announced only as an anonymous scrollable group; setting\n`label` also promotes it to a named `role=\"region\"` landmark. While\n`label` is empty the viewport is a plain `group` when scrollable (an\nunnamed region is inert) and role-less when not.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "Scrollable content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "axis",
+                "description": "Which scroll rails to reserve as permanent placeholders: `vertical`\n(default), `horizontal`, or `both`. Each reserved rail shows an empty white\nchannel until its axis overflows; the unreserved axis still scrolls\nnatively (wheel, keyboard) but draws no rail.",
+                "type": "'vertical' | 'horizontal' | 'both'"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the scrolling viewport, applied as its `aria-label`\n(an `aria-label` on the host would not reach into the shadow DOM). The\nviewport is keyboard-focusable while its content overflows, so without a\nname it is announced only as an anonymous scrollable group; setting\n`label` also promotes it to a named `role=\"region\"` landmark. While\n`label` is empty the viewport is a plain `group` when scrollable (an\nunnamed region is inert) and role-less when not.",
+                "type": "string"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-select",
+          "description": "`<vf-select>` — the classic System 7 popup menu control (\"Macintosh HD ▼\").\n\nChildren are `<vf-option>` elements in the default slot. The closed control\nis a white box with a 1px black border, the small 1px hard shadow, the\nselected option's label on the left and a solid black ▼ triangle on the\nright. The open panel uses the shared `.vf-panel` recipe and is positioned\n`position: fixed` (computed from `getBoundingClientRect()`) so it escapes\nclipping containers; when possible the currently-selected item opens\ndirectly over the control, like the real popup menu.\n\nPointer — two interaction styles are supported and disambiguated by the\ngesture itself, resolved at the first pointer release:\n  - System 7 press-drag-release: press the pill (the list appears under the\n    pointer), drag onto an item, release over it to pick — one continuous\n    press. Releasing over the current item or off the list closes with no\n    change.\n  - Modern click-to-open: a quick in-place click (no drag, released within\n    PRESS_HOLD_MS) leaves the list open; a second, independent click\n    then picks an item.\nThe two share one opening trigger (pointerdown) and diverge only on how the\npress ends — whether the pointer travelled to another item, and (for an\nin-place release) whether it was a quick tap or a held press. The pull-down\nmenus drive themselves the same way, on the same threshold; that half lives\nin src/menu-press.ts, because one menu press may travel across a whole bar.\n\nA list too tall for the screen is **clipped**, never scrolled: the edge slot\nwith items beyond it shows a solid arrow instead of a row, which rolls the\nlist one row at a time while the pointer rests on it. The clamp is quantized\nto the pill lattice, so a clipped popup still opens with its selected row\nover the closed pill — and the panel keeps every slot the list asked for, so\na box that had to slide to fit the screen opens with *blank rows* at whichever\nend the list no longer reaches: the exact travel it will roll through, in\neither direction. See src/popup-overflow.ts.\n\nKeyboard: Space/Enter/ArrowDown open; while open ArrowUp/ArrowDown move the\nhighlight, Home/End jump, Enter/Space select, Escape cancels. Selecting an\nitem plays the classic inversion blink (~250 ms) before closing. Keyboard\nfocus is marked with the kit's 1px dashed rule under the closed pill\n(`vfFocusUnderline`) rather than a ring around it — keyboard only, which\nhere means the page's input modality rather than `:focus-visible` (the pill\ndrives its own focus, and Blink reads that as visible either way).\n\nForm-associated: submits `value` under `name`.\n---\n\n\n### **Events:**\n - **vf-change** - After a selection commits. `detail: { value: string }`.\n- **input** - Native event, dispatched from the host per committed pick (with `change`, the pair a native `<select>` fires). A programmatic `value` set fires nothing.\n- **change** - Native event, dispatched from the host per committed pick so form delegation and framework bindings hear it.\n\n### **Slots:**\n - _default_ - `<vf-option>` elements.\n\n### **CSS Properties:**\n - **--vf-popup-height** - `vf-select` pill (border box; its 1px hard shadow makes the sheet's 157×19 ink box) _(default: 18px)_\n- **--vf-popup-inset-top** - room a clipped popup panel keeps clear at the TOP screen edge — set it once on `:root` (or the `vf-desktop`) to clear a `vf-menu-bar`: `24px` is the 20px bar plus the default 4 _(default: 4px)_\n- **--vf-popup-inset-bottom** - room a clipped popup panel keeps clear at the BOTTOM screen edge _(default: 4px)_\n- **--vf-select-gutter** - checkmark column: `vf-select` left inset / `vf-option` + `vf-menu-item` ✓ column (shared so the value doesn't shift on open) _(default: 16px)_\n\n### **CSS Parts:**\n - **control** - The closed popup control box.\n- **label** - The selected-option label inside the control.\n- **arrow** - The black ▼ triangle.\n- **panel** - The popup panel (listbox).\n- **scroll-arrow** - Either of the two scroll arrows a clipped panel shows in its edge row slots.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Value of the selected option. Adopts the first enabled option if unset.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "Form field name used when submitting the associated form.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the combobox control (`aria-label`). Left empty, the\nname falls back to whatever the host carries — `aria-labelledby`,\n`aria-label` or an associated `<label for>` — via\nVfShadowRoleControl.hostLabel; with neither, the control is announced by\nits contents, i.e. the selected value.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "description",
+              "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "`<vf-option>` elements." }],
+          "events": [
+            {
+              "name": "vf-change",
+              "description": "After a selection commits. `detail: { value: string }`."
+            },
+            {
+              "name": "input",
+              "description": "Native event, dispatched from the host per committed pick (with `change`, the pair a native `<select>` fires). A programmatic `value` set fires nothing."
+            },
+            {
+              "name": "change",
+              "description": "Native event, dispatched from the host per committed pick so form delegation and framework bindings hear it."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Value of the selected option. Adopts the first enabled option if unset.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "Form field name used when submitting the associated form.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the combobox control (`aria-label`). Left empty, the\nname falls back to whatever the host carries — `aria-labelledby`,\n`aria-label` or an associated `<label for>` — via\nVfShadowRoleControl.hostLabel; with neither, the control is announced by\nits contents, i.e. the selected value.",
+                "type": "string"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "description",
+                "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-change",
+                "description": "After a selection commits. `detail: { value: string }`."
+              },
+              {
+                "name": "input",
+                "description": "Native event, dispatched from the host per committed pick (with `change`, the pair a native `<select>` fires). A programmatic `value` set fires nothing."
+              },
+              {
+                "name": "change",
+                "description": "Native event, dispatched from the host per committed pick so form delegation and framework bindings hear it."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-separator",
+          "description": "`<vf-separator>` — a 1px System 7 rule.\n\nHorizontal by default (1px tall, full width); set the `vertical` attribute\nfor a 1px-wide vertical rule (give it a height, or let a flex parent\nstretch it).\n\nContainers may restyle it via custom properties:\n- `--vf-separator-color` — line color (default `var(--vf-black, #000)`).\n- `--vf-separator-style` — line style, e.g. `dotted` (default `solid`).\n  `vf-menu` sets these so slotted separators render as the classic dimmed\n  dotted menu rule (see Menus.png).\n---\n\n\n### **CSS Properties:**\n - **--vf-separator-color** - `vf-separator` rule color — `vf-menu` sets it to `--vf-disabled` for the dimmed menu rule _(default: undefined)_\n- **--vf-separator-style** - `vf-separator` rule style — `vf-menu` sets `dotted` (see `Menus.png`) _(default: solid)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "vertical",
+              "description": "Render as a vertical rule (1px wide) instead of horizontal.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "vertical",
+                "description": "Render as a vertical rule (1px wide) instead of horizontal.",
+                "type": "boolean"
+              },
+              { "name": "role", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-slider",
+          "description": "`<vf-slider>` — a horizontal 1-bit slider.\n\nNot a historically shipped System 7 control: it reverse-adapts the later\nMac OS slider into the library's solid-black, pixel-crisp 1-bit style. A\nrounded capsule rail fills solid black from the left up to a shield-shaped\ndrag handle (the SLIDER_THUMB sprite) and runs hollow after it. The\nrail is regenerated as a whole-pixel SVG on every resize so it stays crisp at\nany width, and the thumb snaps to integer pixels so the sprite never blurs.\n\nForm-associated: submits `value` under `name` and restores it on form reset.\nDrag or click the track to set the value; focus it and use the arrow keys\n(Home/End jump to min/max, PageUp/PageDown move in bigger steps).\n---\n\n\n### **Events:**\n - **vf-input** - On every drag move or key change. `detail: { value: number }`.\n- **vf-change** - On commit (pointer release, or key change). `detail: { value: number }`.\n- **input** - Native event, dispatched from the host on every user value move — a native range input's cadence. A programmatic `value` set fires nothing.\n- **change** - Native event, dispatched from the host on commit (release, or a key change) so form delegation and framework bindings hear it.\n\n### **CSS Parts:**\n - **track** - The full-width rail row (the pointer target).\n- **rail** - The `<svg>` capsule (fill + hollow).\n- **thumb** - The shield-shaped drag handle.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Current value, clamped to `[min, max]` and snapped to `step`.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "min",
+              "description": "Minimum value (inclusive).",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "Maximum value (inclusive).",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "step",
+              "description": "Increment the value snaps to (also sets its display precision).",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "name",
+              "description": "Form field name used when submitting the associated form.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, exposed as the control's `aria-label`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-input",
+              "description": "On every drag move or key change. `detail: { value: number }`."
+            },
+            {
+              "name": "vf-change",
+              "description": "On commit (pointer release, or key change). `detail: { value: number }`."
+            },
+            {
+              "name": "input",
+              "description": "Native event, dispatched from the host on every user value move — a native range input's cadence. A programmatic `value` set fires nothing."
+            },
+            {
+              "name": "change",
+              "description": "Native event, dispatched from the host on commit (release, or a key change) so form delegation and framework bindings hear it."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Current value, clamped to `[min, max]` and snapped to `step`.",
+                "type": "number"
+              },
+              {
+                "name": "min",
+                "description": "Minimum value (inclusive).",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "Maximum value (inclusive).",
+                "type": "number"
+              },
+              {
+                "name": "step",
+                "description": "Increment the value snaps to (also sets its display precision).",
+                "type": "number"
+              },
+              {
+                "name": "name",
+                "description": "Form field name used when submitting the associated form.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, exposed as the control's `aria-label`.",
+                "type": "string"
+              },
+              { "name": "role", "type": "string" },
+              { "name": "ariaOrientation", "type": "string" },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-input",
+                "description": "On every drag move or key change. `detail: { value: number }`."
+              },
+              {
+                "name": "vf-change",
+                "description": "On commit (pointer release, or key change). `detail: { value: number }`."
+              },
+              {
+                "name": "input",
+                "description": "Native event, dispatched from the host on every user value move — a native range input's cadence. A programmatic `value` set fires nothing."
+              },
+              {
+                "name": "change",
+                "description": "Native event, dispatched from the host on commit (release, or a key change) so form delegation and framework bindings hear it."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-stack",
+          "description": "`<vf-stack>` — arrange things inside a window, in system pixels.\n\nA window body is the one place the kit stopped short: every control inside it\nis authored in system px, but the *spaces between* them were the consumer's\nproblem, written by hand as `calc(var(--vf-scale, 1) * 12px)`. This is that\ncalculation, as a component — a flexbox whose `gap`, `pad`, `width` and\n`height` are declared in whole system px and converted internally:\n\n```html\n<vf-stack gap=\"12\">                            <!-- a column -->\n  <vf-stack fill-width direction=\"row\" gap=\"8\">   <!-- a labeled field -->\n    <vf-label width=\"80\" for=\"name\">Name:</vf-label>\n    <vf-text-field id=\"name\" fill-width></vf-text-field>\n  </vf-stack>\n  <vf-stack fill-width place=\"end\">                <!-- an action row -->\n    <vf-button-group>\n      <vf-button>Cancel</vf-button>\n      <vf-button variant=\"default\">Save</vf-button>\n    </vf-button-group>\n  </vf-stack>\n</vf-stack>\n```\n\n**Why this can't just be page CSS.** Scaling is default-on and *per\ncomponent*: `ScaleController` sets `--vf-scale` on the component's own host,\nnot on the document. So `var(--vf-scale, 1)` in a consumer's stylesheet\nresolves only where the rule's element happens to sit inside a `vf-*`\nancestor and inherit it — true inside a window body, false for a plain\n`<div>` holding two buttons on an ordinary page, where the fallback `1` wins\nand the gap renders at 8px around 3×-sized buttons with no warning. A page\nthat hasn't called `applyScale()` has no way to write \"8 system px\" at all.\nA component always can, because it *is* the scope — which is also why this\none carries a ScaleController of its own: without it a lone stack\nwould resolve its own gap against that same fallback while its children each\nself-scaled around it.\n\n**Whole system px is the only expressible value**, so the gap half of the\nlayout contract (docs/SIZING.md rule 2) stops being a rule to remember. Declaring\n`width`/`height` covers the size half of rule 3 as well.\n\n**The geometry is governed by the content.** A column is as wide as its\nwidest child and a row as tall as its tallest; children keep the size they\ndrew themselves at (`flex: 0 0 auto` — no growing, no shrinking). System 7\nboxes are the size they are: a push button is as wide as its label, a popup\nmenu hugs its widest option, and a window is a fixed box whose overflow is\nclipped at the frame, not a layout that squeezes its controls to fit. The\nstack distributes; it does not resize. That is why the box shrink-wraps\n(`fit-content`) rather than claiming its parent's whole width — a layout box\nthat did would be inventing a size nobody declared.\n\n**`fill-width` / `fill-height` are how a child asks for more**, as bare\nattributes on consumer DOM the way `nosnap` opts an element out of snapping:\n\n```html\n<vf-text-field fill-width></vf-text-field>\n```\n\nEach names the *outcome*, not the axis, so the markup means the same thing\nwherever it lands; the stack does the flexbox translation, which is the whole\nreason to have a component. One rule to learn, about geometry rather than\nvocabulary: **the cross axis always has a size, the main axis only has slack\nif you declared one.** So `fill-width` always works in a column (the width is\nthe widest child's) and needs a declared `width` in a row; `fill-height` is\nexactly the other way round. A fill with nothing to take is inert, not an\nerror. Two children filling along the main axis end up *equal* — the zeroed\nflex basis is what lets them divide the slack rather than keep their natural\nsizes — and a child that declares its own size shouldn't also ask to fill it.\n\nA stack reads the same two attributes about *itself*, for the parents that\naren't stacks: a window body, a fieldset, a scroll well, a grid cell. That is\nwhere a panel's width enters the tree, and from there `fill-width` hands it\ndown a level at a time.\n\n**It paints nothing and means nothing.** No border, no background, no role,\nno keyboard behavior — what it holds decides what it is, as with\nVfGrid.\n\n**It holds its box on the device-pixel grid** — the `vf-container`\narrangement, adopted here after first shipping without it. The original\nreasoning (\"no ink of its own, and slotted `vf-*` children correct their own\norigins\") accounted only for kit children: a stack is a positioned ancestor\nand a layout box for *anything*, and consumer content inside it — a div, an\n`<img>`, a run of text — has no controller of its own. So the flex\ncontainer, the placed-child anchor and the `vf-snap` class live on one\nshadow box, and under `applyGridSnap()` the correction moves the stack's\nwhole coordinate system; children (kit or not) ride it, and the sweep's\noutermost-first order means the kit children then find nothing left to\ncorrect. What this deliberately does not fix: a text-governed child width\nmid-row still shifts later siblings fractionally (their own controllers\ncover that), and centering still can't land on a whole pixel by itself.\n\nIt is also the kit's one **typographically transparent** component: `vfBase`'s\nchrome face, ratio line box, color and non-selectability are all reset to\n`inherit` on the host. Wrapping content in a layout box must not change how\nthat content reads — inside a window it goes on inheriting the window's face\nexactly as before, and on a plain page it leaves the page's typography (and\nits whole-pixel line boxes) alone.\n\nWhat it deliberately does **not** do: equalize its children's widths. A row of\nbuttons still belongs in a `vf-button-group`, which sizes them all to the\nwidest and aligns their *faces* rather than the `variant=\"default\"` ring\nboxes a plain flex row would line up.\n---\n\n\n### **Slots:**\n - _default_ - The children to arrange. `fill-width` / `fill-height` on any of them.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "direction",
+              "description": "Which axis the children run along — `column` (the default) or `row`.\n\nA stack is vertical unless it says otherwise, the way the word is used\neverywhere else; a row is the one that reads as a deliberate choice in the\nmarkup.",
+              "value": { "type": "VfStackDirection", "default": "'column'" }
+            },
+            {
+              "name": "gap",
+              "description": "The space between children, in whole system px. `0` by default: a layout\nbox that spaced things out on its own would be exactly the kind of\nsurprise SPEC §2 rules out when it says a component renders nothing\nunexpected outside its box.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "pad",
+              "description": "Padding inside the stack, in whole system px — one to four values in the\nusual CSS shorthand order (`pad=\"12\"`, `pad=\"10 12\"`, `pad=\"14 12 10\"`).\n\nLeave it off inside a `vf-window` body, which already carries its own 12px\ninset; a stack that means to own that inset goes inside `<vf-window flush>`.",
+              "value": { "type": "string | number | undefined" }
+            },
+            {
+              "name": "place",
+              "description": "Where the children sit across the stack — `start`, `center` or `end`.\nUnset resolves per direction: `start` down a column, `center` across a row.\n\nNamed `place` rather than `align` for a reason worth keeping in the source:\n`align` is a legacy HTML presentation attribute, and Blink maps it to\n`text-align` on any element, so the cross-axis switch used to re-align every\nrun of copy inside the stack (see the `text-align` reset above).\n\nNote the one thing centering cannot do: land on a whole pixel by itself. A\n16px caption centered in a row set by the 25-system-px `vf-number-field`\nsits at 4.5 system px, and no container can round that — it would have to\nread each child's height. `applyGridSnap()` keeps the caption's own ink\ncrisp regardless (it corrects the origin inside the child's shadow root);\n`place=\"start\"` is the deterministic escape.",
+              "value": { "type": "VfStackPlace | undefined" }
+            },
+            {
+              "name": "width",
+              "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "height",
+              "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The children to arrange. `fill-width` / `fill-height` on any of them."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "direction",
+                "description": "Which axis the children run along — `column` (the default) or `row`.\n\nA stack is vertical unless it says otherwise, the way the word is used\neverywhere else; a row is the one that reads as a deliberate choice in the\nmarkup.",
+                "type": "VfStackDirection"
+              },
+              {
+                "name": "gap",
+                "description": "The space between children, in whole system px. `0` by default: a layout\nbox that spaced things out on its own would be exactly the kind of\nsurprise SPEC §2 rules out when it says a component renders nothing\nunexpected outside its box.",
+                "type": "number"
+              },
+              {
+                "name": "pad",
+                "description": "Padding inside the stack, in whole system px — one to four values in the\nusual CSS shorthand order (`pad=\"12\"`, `pad=\"10 12\"`, `pad=\"14 12 10\"`).\n\nLeave it off inside a `vf-window` body, which already carries its own 12px\ninset; a stack that means to own that inset goes inside `<vf-window flush>`.",
+                "type": "string | number | undefined"
+              },
+              {
+                "name": "place",
+                "description": "Where the children sit across the stack — `start`, `center` or `end`.\nUnset resolves per direction: `start` down a column, `center` across a row.\n\nNamed `place` rather than `align` for a reason worth keeping in the source:\n`align` is a legacy HTML presentation attribute, and Blink maps it to\n`text-align` on any element, so the cross-axis switch used to re-align every\nrun of copy inside the stack (see the `text-align` reset above).\n\nNote the one thing centering cannot do: land on a whole pixel by itself. A\n16px caption centered in a row set by the 25-system-px `vf-number-field`\nsits at 4.5 system px, and no container can round that — it would have to\nread each child's height. `applyGridSnap()` keeps the caption's own ink\ncrisp regardless (it corrects the origin inside the child's shadow root);\n`place=\"start\"` is the deterministic escape.",
+                "type": "VfStackPlace | undefined"
+              },
+              {
+                "name": "width",
+                "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "height",
+                "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-swatch",
+          "description": "`<vf-swatch>` — a color-swatch button: the color well of a palette cell.\n\nA solid rectangle with a 1px black border and a 1px white inset ring, filled\nedge-to-edge with a solid color. Given no `color` at all it shows the\ntransparency checker instead — the \"this cell holds nothing\" grid every\npaint program draws behind an empty fill.\n\n`width`/`height` state the border box in whole system pixels (the fill is\nwhat remains inside the border and inset), multiplied by `--vf-scale` like\nevery other metric, so the swatch holds the device-pixel grid wherever a\npalette puts it.\n\n`shadow` opts into the kit's hard drop shadow — the shared\n`--vf-shadow-offset` token, the same depth cue as windows, menus and alerts,\npainted outside the box like theirs. It is off by default because the\nswatch's usual home is a table of them (a `vf-grid`, a picker row), where\nevery cell shadowing its neighbour reads as noise rather than depth; a lone\nwell standing in for a current color — the one a dialog asks you to click —\nis the case that wants it.\n\nIt is \"basically a button\": a native `<button>` inside, so `click` retargets\nto the host, Enter/Space activate it, and pressing inverts the white inset\nto black — the inset counterpart of vf-button's face inversion. Keyboard\nfocus is marked with the kit's 1px dashed rule under the box\n(`vfFocusUnderline`) rather than a ring around it. It is form-associated\nfor the *disabled* contract alone — an ancestor `<fieldset disabled>` must\nreach a palette the way it reaches every other control, and only the\nform-associated lifecycle delivers that across the shadow boundary — but it\nsubmits nothing (a palette cell picks, it doesn't submit; no `name`, no\nvalue, no `FormData` entry). `disabled` only stops interaction, dimming\nnothing — the kit dims *labels* when disabled, and a swatch's only label is\nits fill, which must keep reading as its color.\n---\n\n\n### **CSS Properties:**\n - **--vf-swatch-checker** - `vf-swatch`'s no-color transparency checker — a 4×4 motif of 2×2 white/`#c0c0c0` checks, on a 60-system-px tile (override the whole tile like `--vf-desktop-pattern` — consumer art renders as a placed tile grid at that same geometry) _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The inner native `<button>` (border, inset and, with `shadow`, the drop shadow).\n- **fill** - The color area inside the inset.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "The fill — a CSS color, typically the hex the palette calls for. Unset,\nthe swatch shows the transparency checker; a translucent value (an\n8-digit hex) layers over that same checker, so partial opacity reads as\npartial. An unparseable value falls back to the checker too.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "width",
+              "description": "The swatch's border box width in whole system px.",
+              "value": { "type": "number", "default": "24" }
+            },
+            {
+              "name": "height",
+              "description": "The swatch's border box height in whole system px.",
+              "value": { "type": "number", "default": "18" }
+            },
+            {
+              "name": "shadow",
+              "description": "Cast the kit's hard drop shadow (`--vf-shadow-offset`). Off by default:\nthe plain black-bordered well is what a table of swatches wants, and the\ndepth cue is for the lone well that stands in for a current color.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name for the inner button — a swatch has no text of its own.\nLeft empty, the name falls back to whatever the host carries\n(`aria-labelledby`, `aria-label`, an associated `<label for>` — see\nVfShadowRoleControl.hostLabel), then to the `color` value (or\n\"transparent\") as a last resort, so a palette is never nameless — but a\nhex literal announced as \"number f f six six zero zero\" is a fallback to\nname past, not a name. `vf-label`'s `for` wiring writes this property,\nlike every `vf-*` control's.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding. Nothing dims (see class doc).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "description",
+              "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "The fill — a CSS color, typically the hex the palette calls for. Unset,\nthe swatch shows the transparency checker; a translucent value (an\n8-digit hex) layers over that same checker, so partial opacity reads as\npartial. An unparseable value falls back to the checker too.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "width",
+                "description": "The swatch's border box width in whole system px.",
+                "type": "number"
+              },
+              {
+                "name": "height",
+                "description": "The swatch's border box height in whole system px.",
+                "type": "number"
+              },
+              {
+                "name": "shadow",
+                "description": "Cast the kit's hard drop shadow (`--vf-shadow-offset`). Off by default:\nthe plain black-bordered well is what a table of swatches wants, and the\ndepth cue is for the lone well that stands in for a current color.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name for the inner button — a swatch has no text of its own.\nLeft empty, the name falls back to whatever the host carries\n(`aria-labelledby`, `aria-label`, an associated `<label for>` — see\nVfShadowRoleControl.hostLabel), then to the `color` value (or\n\"transparent\") as a last resort, so a palette is never nameless — but a\nhex literal announced as \"number f f six six zero zero\" is a fallback to\nname past, not a name. `vf-label`'s `for` wiring writes this property,\nlike every `vf-*` control's.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding. Nothing dims (see class doc).",
+                "type": "boolean"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "description",
+                "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+                "type": "string"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vf-text-area",
+          "description": "`<vf-text-area>` — a System 7 multi-line text entry field.\n\nIdentical styling to `<vf-text-field>` but wrapping a native `<textarea>`.\nNo resize grip (`resize: none`) — System 7 fields don't resize. Wrapped\ntext sits on Chicago 12's native 16px line (the single-line well keeps its\n20px box — that is control geometry, not typesetting). The shared field\nskin lives in `vfField`; the value/form scaffolding in\nVfTextControlBase.\n\nThe `.vf-field-well` wrapper is the one `vfField` hangs the focus rule from,\ndoing double duty here: it is the field's framed box — it carries the 1px\nframe the single-line field draws on the well itself, and lays the drawn\nscroll rail beside the borderless inner `<textarea>` — and the `vf-snap`\nelement whose grid-snap offset the field, the frame and the rule ride as\none.\n\nThe vertical scroll rail is a permanent System 7 placeholder: arrows on an\nempty white channel sit in the field even when the text fits, the dither\nand thumb filling in only once the content overflows (driven by\nScrollStateController). The rail is the shared `vfScrollRail`\nsubtree — the kit-drawn rail every scroll surface wears — synced to the\ntextarea's own native scrolling by ScrollRailController; the native\nbar itself is hidden.\n---\n\n\n### **Events:**\n - **vf-input** - On every keystroke. `detail: { value: string }`.\n- **vf-change** - On commit (native `change`). `detail: { value: string }`.\n- **input** - The native keystroke event: the inner textarea's own, composed, so it crosses the shadow boundary and retargets to the host.\n- **change** - The native commit event, re-dispatched from the host (the inner one is `composed: false` and never leaves the shadow root). The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner textarea, where the platform actually honors them (`pattern` is not: only an `<input>` takes it).\n\n### **CSS Properties:**\n - **--vf-line-height-display** - The display face's native line (default `16px`, Chicago 12's) — the pitch wrapped entry text sits on, shared with the static-text components so a display retheme moves them together. _(default: undefined)_\n- **--vf-field-width** - default width of `vf-text-field` / `vf-text-area` _(default: 180px)_\n- **--vf-field-placeholder** - placeholder text in the editable fields — kept off `--vf-disabled`: a placeholder sits in an *enabled* well and holds AA contrast, where the disabled gray is exempt _(default: #767676)_\n- **--vf-scrollbar-thumb** - scrollbar thumb/elevator (white) _(default: undefined)_\n- **--vf-scrollbar-track** - the scroll trough's base color under the dot-dither (white) _(default: undefined)_\n\n### **CSS Parts:**\n - **textarea** - The inner native `<textarea>` element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "rows",
+              "description": "Number of visible text rows (native `rows`). Default 4.",
+              "value": { "type": "number", "default": "4" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Current value. Synced on every keystroke and submitted with forms.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text shown when the field is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the field read-only (focusable, not editable).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "Form field name used when submitting the associated form.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, applied as `aria-label` on the inner native control (the\nelement that receives focus and is announced by screen readers — a host\nattribute cannot reach it on its own). Left empty, the name falls back to\nwhatever the host carries — `aria-labelledby`, `aria-label` or an\nassociated `<label for>` — via VfShadowRoleControl.hostLabel, so the\nplatform's own labeling vocabulary works on these controls too.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-input",
+              "description": "On every keystroke. `detail: { value: string }`."
+            },
+            {
+              "name": "vf-change",
+              "description": "On commit (native `change`). `detail: { value: string }`."
+            },
+            {
+              "name": "input",
+              "description": "The native keystroke event: the inner textarea's own, composed, so it crosses the shadow boundary and retargets to the host."
+            },
+            {
+              "name": "change",
+              "description": "The native commit event, re-dispatched from the host (the inner one is `composed: false` and never leaves the shadow root). The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner textarea, where the platform actually honors them (`pattern` is not: only an `<input>` takes it)."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "rows",
+                "description": "Number of visible text rows (native `rows`). Default 4.",
+                "type": "number"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "value",
+                "description": "Current value. Synced on every keystroke and submitted with forms.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text shown when the field is empty.",
+                "type": "string"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the field read-only (focusable, not editable).",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "Form field name used when submitting the associated form.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, applied as `aria-label` on the inner native control (the\nelement that receives focus and is announced by screen readers — a host\nattribute cannot reach it on its own). Left empty, the name falls back to\nwhatever the host carries — `aria-labelledby`, `aria-label` or an\nassociated `<label for>` — via VfShadowRoleControl.hostLabel, so the\nplatform's own labeling vocabulary works on these controls too.",
+                "type": "string"
+              },
+              {
+                "name": "description",
+                "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-input",
+                "description": "On every keystroke. `detail: { value: string }`."
+              },
+              {
+                "name": "vf-change",
+                "description": "On commit (native `change`). `detail: { value: string }`."
+              },
+              {
+                "name": "input",
+                "description": "The native keystroke event: the inner textarea's own, composed, so it crosses the shadow boundary and retargets to the host."
+              },
+              {
+                "name": "change",
+                "description": "The native commit event, re-dispatched from the host (the inner one is `composed: false` and never leaves the shadow root). The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner textarea, where the platform actually honors them (`pattern` is not: only an `<input>` takes it)."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-text-field",
+          "description": "`<vf-text-field>` — a System 7 single-line text entry field.\n\nA form-associated wrapper around a native `<input>`: white well, 1px solid\nblack border, no corner radius. Keyboard focus draws the kit's dashed rule\none blank row under the well; a click leaves it unmarked (no dotted outline\neither, per SPEC §1/§5). The shared field skin lives in `vfField`; the\nvalue/form scaffolding — and the focus rule's modality gate — in\nVfTextControlBase.\n---\n\n\n### **Events:**\n - **vf-input** - On every keystroke. `detail: { value: string }`.\n- **vf-change** - On commit (native `change`). `detail: { value: string }`.\n- **input** - The native keystroke event: the inner input's own, composed, so it crosses the shadow boundary and retargets to the host by itself.\n- **change** - The native commit event, re-dispatched from the host (the inner one is `composed: false` and never leaves the shadow root), so form delegation and framework bindings hear it. The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `pattern`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner input, where the platform actually honors them.\n\n### **CSS Properties:**\n - **--vf-control-height** - text fields — `vf-text-field`, `vf-text-area`, the `vf-number-field` well _(default: 22px)_\n- **--vf-field-width** - default width of `vf-text-field` / `vf-text-area` _(default: 180px)_\n- **--vf-field-placeholder** - placeholder text in the editable fields — kept off `--vf-disabled`: a placeholder sits in an *enabled* well and holds AA contrast, where the disabled gray is exempt _(default: #767676)_\n\n### **CSS Parts:**\n - **input** - The inner native `<input>` element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "Input type, passed through to the native input (e.g. `password`).",
+              "value": { "type": "string", "default": "'text'" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Current value. Synced on every keystroke and submitted with forms.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text shown when the field is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the field read-only (focusable, not editable).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "Form field name used when submitting the associated form.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name, applied as `aria-label` on the inner native control (the\nelement that receives focus and is announced by screen readers — a host\nattribute cannot reach it on its own). Left empty, the name falls back to\nwhatever the host carries — `aria-labelledby`, `aria-label` or an\nassociated `<label for>` — via VfShadowRoleControl.hostLabel, so the\nplatform's own labeling vocabulary works on these controls too.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "description",
+              "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "vf-input",
+              "description": "On every keystroke. `detail: { value: string }`."
+            },
+            {
+              "name": "vf-change",
+              "description": "On commit (native `change`). `detail: { value: string }`."
+            },
+            {
+              "name": "input",
+              "description": "The native keystroke event: the inner input's own, composed, so it crosses the shadow boundary and retargets to the host by itself."
+            },
+            {
+              "name": "change",
+              "description": "The native commit event, re-dispatched from the host (the inner one is `composed: false` and never leaves the shadow root), so form delegation and framework bindings hear it. The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `pattern`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner input, where the platform actually honors them."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "Input type, passed through to the native input (e.g. `password`).",
+                "type": "string"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "value",
+                "description": "Current value. Synced on every keystroke and submitted with forms.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text shown when the field is empty.",
+                "type": "string"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the field read-only (focusable, not editable).",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "Form field name used when submitting the associated form.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name, applied as `aria-label` on the inner native control (the\nelement that receives focus and is announced by screen readers — a host\nattribute cannot reach it on its own). Left empty, the name falls back to\nwhatever the host carries — `aria-labelledby`, `aria-label` or an\nassociated `<label for>` — via VfShadowRoleControl.hostLabel, so the\nplatform's own labeling vocabulary works on these controls too.",
+                "type": "string"
+              },
+              {
+                "name": "description",
+                "description": "Description for the control — hint text, a format, a unit. A host-level\n`aria-describedby` cannot reach a focusable element inside a shadow root,\nso there was structurally no way to describe a field; this property is\nthat channel. It renders as a hidden span in the control's own shadow root\nwith the inner control's `aria-describedby` pointing at it — the\nshadow-internal IDREF idiom `vf-dialog`'s title patch already uses. A\nhost-level `aria-describedby` is bridged into the same span when this\nproperty is empty, and a failing constraint's validationMessage\njoins it too, so AT hears the error where it hears the hint.\n\nHost-role controls get neither half: their `aria-describedby` already\nworks, and their validation message reaches AT the way a native control's\ndoes — `aria-invalid` plus the browser's own validation UI, not AccName.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control: it stops responding and submits no value. Each\ncontrol dims per SPEC §1 (typically the label greys while the 1-bit chrome\nstays black).",
+                "type": "boolean"
+              },
+              {
+                "name": "isDisabled",
+                "description": "Effective disabled state: the `disabled` prop OR an ancestor fieldset.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Requires a value before the associated form submits (SPEC §4): an empty\ncontrol fails constraint validation with `valueMissing`, exactly like a\nnative `required`. What \"empty\" means is each control's own\nvalueMissing; a control with no required semantics (a slider\nalways has a value, a swatch submits nothing) never fails it, the way a\nnative range input never does.",
+                "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "The control's current `ValidityState`, as on a native control.",
+                "type": "ValidityState"
+              },
+              {
+                "name": "validationMessage",
+                "description": "The message of the currently failing constraint, `''` while valid.",
+                "type": "string"
+              },
+              {
+                "name": "willValidate",
+                "description": "Whether the control is a candidate for constraint validation — false\nwhile disabled or readonly, per HTML's barring rules (the browser\ncomputes this from the reflected attributes).",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-input",
+                "description": "On every keystroke. `detail: { value: string }`."
+              },
+              {
+                "name": "vf-change",
+                "description": "On commit (native `change`). `detail: { value: string }`."
+              },
+              {
+                "name": "input",
+                "description": "The native keystroke event: the inner input's own, composed, so it crosses the shadow boundary and retargets to the host by itself."
+              },
+              {
+                "name": "change",
+                "description": "The native commit event, re-dispatched from the host (the inner one is `composed: false` and never leaves the shadow root), so form delegation and framework bindings hear it. The input-behavior attributes — `autocomplete`, `inputmode`, `enterkeyhint`, `maxlength`, `pattern`, `spellcheck`, `autocapitalize` — are forwarded from the host onto the inner input, where the platform actually honors them."
+              }
+            ]
+          }
+        },
+        {
+          "name": "vf-window",
+          "description": "`<vf-window>` — the System 7 desktop-window shell.\n\nStriped title bar with optional close box (left) and zoom box (right), a\nsolid-white frame with a hard offset shadow, an optional grow box for\nresizing, optional edge scroll rails (`scrollbars`), and the slim windoid\nchrome (`variant=\"utility\"`). The HIG's window archetypes are parameter\nrecipes over this shell rather than fixed anatomies — the component enables\nHIG compliance, it doesn't enforce it (see docs/LAYOUT.md \"Window archetypes\"):\nthe full document window is `closable zoomable movable resizable\nscrollbars=\"both\"`, a modeless dialog box is `closable movable`, a utility\nwindow is `variant=\"utility\" movable`. Place inside `<vf-desktop>` to get\nclick-to-front stacking and automatic `active` management (utility windows\nfloat above the document tier).\n\nEvery recipe also declares `width` AND `height` (VfSized), in whole\nsystem px — the art's own unit, so the window keeps its proportions to the\nchrome inside it at every display density (a CSS-px size stays put while\nthe components in it triple). A window is a fixed box in both axes, the way\nthe WIND resource carried it: left to layout it takes whatever its\ncontainer or content hands it, which is how a title bar ends up wider than\nthe screen or a dialog reflows as it moves — and a window that grows with\nits body is one the user can neither predict nor (via the grow box) own.\nContent taller than the declared box is clipped at the frame the way the\nclassic content region was; `scrollbars` lets the user reach the rest.\nUnset, the window still renders — normal block layout, as before — and\nsays so once in the console.\n---\n\n\n### **Events:**\n - **vf-close** - Close box clicked. Detail `{ reason: 'close' }` (shape- compatible with vf-dialog's `vf-close`). The window does NOT remove itself; the consumer decides what closing means.\n- **vf-zoom** - Zoom box clicked. Detail `{}`.\n\n### **Slots:**\n - _default_ - Default slot: window body content.\n\n### **CSS Properties:**\n - **--vf-dots-pattern** - the windoid bar's dot-grid dither — a 2×2 motif, one black pixel at its origin, on a 30-system-px tile (`vfDots`; override the whole tile like `--vf-desktop-pattern` — consumer art renders as a placed tile grid at that same geometry) _(default: undefined)_\n- **--vf-titlebar-height** - window/dialog title bars _(default: undefined)_\n- **--vf-titlebar-height-utility** - the slim `vf-window[variant=\"utility\"]` (windoid) bar — 11px interior + 1px bottom rule, traced from `Windows/utility-window.png` _(default: 12px)_\n\n### **CSS Parts:**\n - **frame** - The outer chrome frame.\n- **title-bar** - The striped (or dithered) title bar.\n- **title** - The centered title patch (hidden on the utility bar).\n- **close-box** - The close widget (left).\n- **zoom-box** - The zoom widget (right).\n- **body** - The content area.\n- **grow-box** - The resize widget (bottom-right, when `resizable`).\n- **viewport** - The built-in scroll area's viewport (when `scrollbars`; re-exported from vf-scroll-area).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Chrome variant. Omit for the standard 18px striped bar; `'utility'` for\nthe slim windoid bar (dot-grid dither, 7×7 widgets, no title patch — the\nheading still names the widgets). Inside a `vf-desktop`, utility windows\nfloat above the document tier and never take the single-active state.",
+              "value": { "type": "'utility' | undefined" }
+            },
+            {
+              "name": "heading",
+              "description": "Title text shown centered in the title bar.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "active",
+              "description": "Whether this is the frontmost (active) window: stripes and widgets show.\nManaged automatically by an enclosing `vf-desktop`.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "closable",
+              "description": "Show the close box (left side of the title bar).",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "zoomable",
+              "description": "Show the zoom box (right side of the title bar).",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "movable",
+              "description": "Allow dragging the window by its title bar.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "resizable",
+              "description": "Show a grow box at the bottom-right corner for resizing.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "flush",
+              "description": "Remove the default 12px body padding.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "scrollbars",
+              "description": "Put System 7 scroll rails on the window edge — the classic document\nwindow. The body slot renders inside a built-in `vf-scroll-area` pulled\none system pixel under the frame on every side, so the rails repaint the\nborder lines and a `resizable` window's grow box lands in the corner\ncell. Values mirror `vf-scroll-area`'s `axis`; the `heading` names the\nscroll region; the viewport part is re-exported. Implies `flush` (the\nviewport carries its own padding). The slotted composition (SPEC §5\nvf-scroll-area) still works for windows that want an inset well instead.",
+              "value": {
+                "type": "'vertical' | 'horizontal' | 'both' | undefined"
+              }
+            },
+            {
+              "name": "width",
+              "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "height",
+              "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "top",
+              "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+              "value": { "type": "number | null | undefined" }
+            },
+            {
+              "name": "left",
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "value": { "type": "number | null | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "Default slot: window body content." }
+          ],
+          "events": [
+            {
+              "name": "vf-close",
+              "description": "Close box clicked. Detail `{ reason: 'close' }` (shape- compatible with vf-dialog's `vf-close`). The window does NOT remove itself; the consumer decides what closing means."
+            },
+            {
+              "name": "vf-zoom",
+              "description": "Zoom box clicked. Detail `{}`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "Chrome variant. Omit for the standard 18px striped bar; `'utility'` for\nthe slim windoid bar (dot-grid dither, 7×7 widgets, no title patch — the\nheading still names the widgets). Inside a `vf-desktop`, utility windows\nfloat above the document tier and never take the single-active state.",
+                "type": "'utility' | undefined"
+              },
+              {
+                "name": "heading",
+                "description": "Title text shown centered in the title bar.",
+                "type": "string"
+              },
+              {
+                "name": "active",
+                "description": "Whether this is the frontmost (active) window: stripes and widgets show.\nManaged automatically by an enclosing `vf-desktop`.",
+                "type": "boolean"
+              },
+              {
+                "name": "closable",
+                "description": "Show the close box (left side of the title bar).",
+                "type": "boolean"
+              },
+              {
+                "name": "zoomable",
+                "description": "Show the zoom box (right side of the title bar).",
+                "type": "boolean"
+              },
+              {
+                "name": "movable",
+                "description": "Allow dragging the window by its title bar.",
+                "type": "boolean"
+              },
+              {
+                "name": "resizable",
+                "description": "Show a grow box at the bottom-right corner for resizing.",
+                "type": "boolean"
+              },
+              {
+                "name": "flush",
+                "description": "Remove the default 12px body padding.",
+                "type": "boolean"
+              },
+              {
+                "name": "scrollbars",
+                "description": "Put System 7 scroll rails on the window edge — the classic document\nwindow. The body slot renders inside a built-in `vf-scroll-area` pulled\none system pixel under the frame on every side, so the rails repaint the\nborder lines and a `resizable` window's grow box lands in the corner\ncell. Values mirror `vf-scroll-area`'s `axis`; the `heading` names the\nscroll region; the viewport part is re-exported. Implies `flush` (the\nviewport carries its own padding). The slotted composition (SPEC §5\nvf-scroll-area) still works for windows that want an inset well instead.",
+                "type": "'vertical' | 'horizontal' | 'both' | undefined"
+              },
+              {
+                "name": "width",
+                "description": "Width in whole system px. What the number means is the component's own\naffair — the measure a paragraph wraps to, a caption column, a window's\nbox — but the mechanics are shared: the length lands on the host as a\nlive `calc(var(--vf-scale, 1) * Npx)`, so the box scales with the\ndisplay and sits on the device-pixel grid by construction. Remove it\nand the width returns to layout.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "height",
+                "description": "Height in whole system px; see width. Content that outgrows a\ndeclared height overflows the box rather than growing it — the number\nis the layout, and content that doesn't fit is a number to raise.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "top",
+                "description": "Offset from the top of the positioning parent, in whole system px.\nSetting this (or `left`) absolutely positions the element within its\nparent; the coordinate left unset is 0. Remove both to return the\nelement to normal flow.",
+                "type": "number | null | undefined"
+              },
+              {
+                "name": "left",
+                "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+                "type": "number | null | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "vf-close",
+                "description": "Close box clicked. Detail `{ reason: 'close' }` (shape- compatible with vf-dialog's `vf-close`). The window does NOT remove itself; the consumer decides what closing means."
+              },
+              {
+                "name": "vf-zoom",
+                "description": "Zoom box clicked. Detail `{}`."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}