vintage-frames 0.1.1 → 0.2.0

package/custom-elements.json

@@ -322,7 +322,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -1355,7 +1355,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts.",
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts.",
               "inheritedFrom": {
                 "name": "VfToggleControl",
                 "module": "src/toggle-control.ts"
@@ -1946,7 +1946,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "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 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.",
           "name": "VfContainer",
           "slots": [
             {
@@ -1969,7 +1969,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Hold the box on the device-pixel grid under `applyGridSnap()` — see the\nclass doc. The host is what gets measured; `.box` (vf-snap) is where the\ncorrection lands."
+              "description": "Hold the box on the device-pixel grid — see the\nclass doc. The host is what gets measured; `.box` (vf-snap) is where the\ncorrection lands."
             },
             {
               "kind": "field",
@@ -2220,7 +2220,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -3445,7 +3445,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -3697,7 +3697,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -4007,7 +4007,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -4045,7 +4045,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "The plate's width in whole, EVEN system px — 0 until the text is measured.\nSee #measurePlate; this is what keeps every name on the grid.\n\nDeliberately NOT `@state()`. The width can only be known by rendering the\nname and measuring it, so a reactive field would make every icon render\ntwice — once to measure, once to deliver one number back — and Lit's\nchange-in-update warning is exactly that round trip being spotted. It\nfeeds a single inline width and nothing else, so #measurePlate\nwrites it straight to the plate instead, the ownership `applyGridSnap()`\nhas over `--vf-snap-dx`/`-dy`. The template still reads it so a caption\nLit re-creates (one leaving `_editing`, say) is born at the settled width\nrather than flashing through the unmeasured one."
+              "description": "The plate's width in whole, EVEN system px — 0 until the text is measured.\nSee #measurePlate; this is what keeps every name on the grid.\n\nDeliberately NOT `@state()`. The width can only be known by rendering the\nname and measuring it, so a reactive field would make every icon render\ntwice — once to measure, once to deliver one number back — and Lit's\nchange-in-update warning is exactly that round trip being spotted. It\nfeeds a single inline width and nothing else, so #measurePlate\nwrites it straight to the plate instead, the ownership the grid snapper\nhas over `--vf-snap-dx`/`-dy`. The template still reads it so a caption\nLit re-creates (one leaving `_editing`, say) is born at the settled width\nrather than flashing through the unmeasured one."
             },
             {
               "kind": "field",
@@ -4626,7 +4626,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -4857,7 +4857,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -5134,7 +5134,7 @@
           "name": "VfListItem",
           "cssParts": [
             {
-              "description": "The text span beside the icon gutter (ellipsizes).",
+              "description": "The text span beside the icon gutter (ellipsizes). Takes `top`/`left` like every other element ({@link VfPositioned}), for the consumer who wants a row somewhere other than a list. Inside its parent `<vf-list>` the rows stack in flow, so stating an origin lifts that row out of the stack and the ones below it close the gap — the placement doing what it says, but not how a list box is laid out.",
               "name": "text"
             }
           ],
@@ -5211,6 +5211,32 @@
                 "text": "string"
               },
               "default": "'option'"
+            },
+            {
+              "kind": "field",
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "attribute": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "attribute": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
             }
           ],
           "attributes": [
@@ -5240,6 +5266,36 @@
               "default": "false",
               "description": "Disables the row: dimmed text, not selectable or focusable.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "fieldName": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "fieldName": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "VfPositioned",
+              "module": "/src/position.js"
             }
           ],
           "superclass": {
@@ -5318,7 +5374,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -5844,7 +5900,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -6198,7 +6254,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "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\nTakes `top`/`left` like every other element (VfPositioned), for the\nconsumer who wants a row somewhere other than a pulldown. Inside its parent\n`<vf-menu>` the panel is as wide as its widest row and stacks them in flow,\nso stating an origin takes that row out of both: it no longer contributes to\nthe panel's width and the rows below close the gap. The placement doing what\nit says — but not how a pulldown is laid out.",
           "name": "VfMenuItem",
           "cssProperties": [
             {
@@ -6475,6 +6531,32 @@
                   "text": "void"
                 }
               }
+            },
+            {
+              "kind": "field",
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "attribute": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "attribute": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
             }
           ],
           "events": [
@@ -6536,6 +6618,36 @@
               },
               "description": "Value reported in the `vf-menu-select` event detail. Defaults to the item's\ntrimmed text content when unset.",
               "fieldName": "value"
+            },
+            {
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "fieldName": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "fieldName": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "VfPositioned",
+              "module": "/src/position.js"
             }
           ],
           "superclass": {
@@ -6571,7 +6683,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "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\nTakes `top`/`left` like every other element (VfPositioned) — the\nnatural fit being a standalone menu, which is a free-standing menu button and\nplaces like any other control. The panel is anchored to the host's own box\n(`top: 100%`), so it follows a placed menu down without any further work.\nInside a `<vf-menu-bar>`, the bar lays its titles out in flow — placing one\nlifts it off the bar and the titles beside it close the gap.",
           "name": "VfMenu",
           "cssProperties": [
             {
@@ -6619,7 +6731,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -6918,6 +7030,32 @@
                 }
               },
               "description": "Focuses the first enabled item once the panel is visible. The reflected\n`open` attribute (which un-hides the panel) only lands on the host in the\nnext Lit update, so focusing synchronously would silently no-op."
+            },
+            {
+              "kind": "field",
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "attribute": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "attribute": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
             }
           ],
           "attributes": [
@@ -6938,6 +7076,36 @@
               "default": "false",
               "description": "Whether the panel is dropped. Reflected. Managed by the parent\n`vf-menu-bar` when present, otherwise by the menu itself.",
               "fieldName": "open"
+            },
+            {
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "fieldName": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "fieldName": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "VfPositioned",
+              "module": "/src/position.js"
             }
           ],
           "superclass": {
@@ -7384,7 +7552,7 @@
               "privacy": "protected",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts.",
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts.",
               "inheritedFrom": {
                 "name": "VfTextControlBase",
                 "module": "src/text-control.ts"
@@ -8283,7 +8451,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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`.",
+          "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\nTakes `top`/`left` like every other element (VfPositioned), for the\nconsumer who wants one somewhere other than a popup row. Inside its parent\n`<vf-select>` it is a row the panel measures and scrolls in flow, so stating\nan origin there takes it out of that measurement: the panel stops counting it\ntoward its own width and its scroll clamp, and the rows below close the gap.\nThat is the placement doing exactly what it says — not a bug — but it is not\nhow a popup is laid out.",
           "name": "VfOption",
           "cssProperties": [
             {
@@ -8368,6 +8536,32 @@
                 "text": "string"
               },
               "default": "'option'"
+            },
+            {
+              "kind": "field",
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "attribute": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "attribute": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
             }
           ],
           "attributes": [
@@ -8406,6 +8600,36 @@
               "default": "false",
               "description": "Transient highlight (hover / keyboard cursor) — full-row inversion.\nManaged by the parent `<vf-select>`; not part of the authoring API.",
               "fieldName": "active"
+            },
+            {
+              "name": "top",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "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.",
+              "fieldName": "top",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            },
+            {
+              "name": "left",
+              "type": {
+                "text": "number | null | undefined"
+              },
+              "description": "Offset from the left of the positioning parent, in whole system px.\nSee top.",
+              "fieldName": "left",
+              "inheritedFrom": {
+                "name": "VfPositioned",
+                "module": "src/position.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "VfPositioned",
+              "module": "/src/position.js"
             }
           ],
           "superclass": {
@@ -8441,7 +8665,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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).",
+          "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\n  wherever the page puts it;\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).",
           "name": "VfParagraph",
           "cssProperties": [
             {
@@ -8484,7 +8708,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -8712,7 +8936,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -9910,7 +10134,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts.",
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts.",
               "inheritedFrom": {
                 "name": "VfToggleControl",
                 "module": "src/toggle-control.ts"
@@ -10134,7 +10358,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -10534,7 +10758,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -12006,7 +12230,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -12243,7 +12467,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -13074,7 +13298,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "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 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).\n\n**Centering lands on whole system px as well** — halving an odd count of free\nsystem px gives a half, which no container can round in CSS. See\nCrossCenterController.\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.",
           "name": "VfStack",
           "slots": [
             {
@@ -13119,7 +13343,7 @@
               "type": {
                 "text": "VfStackPlace | undefined"
               },
-              "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.",
+              "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\nCentering divides the free space in two, so an odd count of system px would\nland a child on a half — a 16px caption centered in a row set by the\n25-system-px `vf-number-field` sits at 4.5. CrossCenterController\nsteps that back onto whole system px, the exact half going toward the start\nthe way QuickDraw's `div 2` did; `place=\"start\"` is still the way to ask\nfor no centering at all.",
               "attribute": "place",
               "reflects": true
             },
@@ -13137,7 +13361,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Hold the box on the device-pixel grid under `applyGridSnap()` — see the\nclass doc for why the original no-controller decision was reversed. The\nhost is what gets measured; `.box` (vf-snap) is where the correction\nlands, taking the whole coordinate system with it."
+              "description": "Hold the box on the device-pixel grid — see the\nclass doc for why the original no-controller decision was reversed. The\nhost is what gets measured; `.box` (vf-snap) is where the correction\nlands, taking the whole coordinate system with it."
             },
             {
               "kind": "field",
@@ -13149,6 +13373,34 @@
               "readonly": true,
               "description": "The shadow flex box `gap`/`pad` write to; exists from the first render."
             },
+            {
+              "kind": "field",
+              "name": "childSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "description": "The slot the children arrive through. (`slot` itself is HTMLElement's.)"
+            },
+            {
+              "kind": "field",
+              "name": "crossCenter",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new CrossCenterController(this, () => ({ box: this.box, slot: this.childSlot, axis: this.centersChildren ? this.direction === 'row' ? 'y' : 'x' : null, }))",
+              "description": "Keeps cross-axis centering on whole system px (src/cross-center.ts).\nA null axis is the inert state — no observers, nothing held — which is\nevery column that starts its children, i.e. the default."
+            },
+            {
+              "kind": "field",
+              "name": "centersChildren",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Mirrors the stylesheet's alignment selectors: a row centers unless `place`\nnames something else, a column only when it says `center`, and an\nunrecognized value lands on the direction's default in both places.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "width",
@@ -13234,7 +13486,7 @@
               "type": {
                 "text": "VfStackPlace | undefined"
               },
-              "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.",
+              "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\nCentering divides the free space in two, so an odd count of system px would\nland a child on a half — a 16px caption centered in a row set by the\n25-system-px `vf-number-field` sits at 4.5. CrossCenterController\nsteps that back onto whole system px, the exact half going toward the start\nthe way QuickDraw's `div 2` did; `place=\"start\"` is still the way to ask\nfor no centering at all.",
               "fieldName": "place"
             },
             {
@@ -13436,7 +13688,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -14429,7 +14681,7 @@
               "privacy": "protected",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts.",
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts.",
               "inheritedFrom": {
                 "name": "VfTextControlBase",
                 "module": "src/text-control.ts"
@@ -15527,7 +15779,7 @@
               "privacy": "protected",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts.",
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts.",
               "inheritedFrom": {
                 "name": "VfTextControlBase",
                 "module": "src/text-control.ts"
@@ -16578,7 +16830,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -18058,7 +18310,7 @@
               "privacy": "protected",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -18950,7 +19202,7 @@
               "privacy": "private",
               "readonly": true,
               "default": "new GridSnapController(this)",
-              "description": "Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts."
+              "description": "Device-pixel grid snapping; see src/grid-snap.ts."
             },
             {
               "kind": "field",
@@ -19487,7 +19739,7 @@
         },
         {
           "kind": "mixin",
-          "description": "Explicit placement — `top`/`left` in whole system px, on (nearly) every\ncomponent.\n\nA DITL resource laid a dialog out as a list of items, each with a rectangle\nin the window's own coordinates; arranging controls by stating where they go\nis as native to System 7 as stacking them. This mixin is that mechanism:\ndeclaring `top` or `left` takes the element out of normal flow and\nabsolutely positions it within its parent, both coordinates in the art's own\nunit so the position scales with the display like every other metric. A\nwindow or dialog body can be laid out either way — a tree of `vf-stack`s, or\npositioned children — with no stylesheet in either case.\n\nMechanics, mirroring how `vf-stack` writes its declared size:\n\n- Setting either property writes `position: absolute` and both offsets onto\n  the host's inline style as `calc(var(--vf-scale, 1) * Npx)` — live against\n  the display, resolved at paint time. The coordinate left unset is 0.\n- `right`/`bottom` are released to `auto` and `margin` zeroed, so the stated\n  offsets are the whole story — an auto-width box with both edges set would\n  stretch rather than sit (the `vf-icon` seed logic, generalized).\n- Unsetting both returns the element to normal flow: every inline\n  declaration this wrote is removed, and stylesheet values resume.\n\nThe anchor is CSS's own: the nearest positioned ancestor's padding box. The\nkit's containers are all deliberate anchors — a desktop's raster, a window's\ncontent region (the frame's inner edge, below the title bar — the 12px body\ninset governs flow content only, exactly the DITL convention), a dialog's\ncontent area, a stack's box, a fieldset's border box, a scroll area's\nscrolled plane. In a non-kit parent, give the parent `position: relative`,\nthe one line of CSS this feature can't write for you.\n\nThe writing rides a ReactiveController (`hostUpdated`) rather than\nan `updated()` override, for a lifecycle reason worth keeping in the source:\nthe mixin sits *under* each component class, and most components override\n`updated()` without calling `super.updated()` — Lit's base is a no-op, so\nnothing ever forced the call — which would silently shadow a mixin-level\noverride. A controller is invoked by ReactiveElement itself, after every\nupdate, no matter what the subclass does.\n\nA gesture writes **through these properties**: `vf-window`'s title-bar drag\nand `vf-icon`'s drag and arrow nudge hand their new origin to a\nPlacementController, which snaps it onto the placement lattice and\nsets `left`/`top`. A moved element is therefore placed exactly the way an\nauthored one is — a live `calc()` in the art's own unit — and stays where it\nwas dropped when the zoom or the display changes what a system px costs.\n\nIt did not always. Writing the resolved CSS px straight to the inline style\nfroze the coordinate in the wrong unit: `--vf-scale` moved under it at every\nzoom step and the same constant read back as a different number of system px,\nso moved windows and icons slid off the grid the rest of the kit stayed on\n(by `3z / round(3z)` — 10% at 110% zoom, where nothing else moves at all).\n\nSetting a property yourself is still the deliberate way to re-place a moved\nelement. The controller re-applies **only when the values changed**, so an\nunrelated update — a heading change, a desktop toggling `active` — never\nre-asserts a coordinate and costs nothing.",
+          "description": "Explicit placement — `top`/`left` in whole system px, on **every** component.\n\nNo exceptions, deliberately. These are web components, and a consumer may put\none wherever they like; the kit does not get to decide that a `vf-option` is\nonly ever a popup row. The rows a container normally owns (`vf-option`,\n`vf-menu-item`, `vf-list-item`) and a bar's `vf-menu` take the pair on the\nsame terms as anything else — and stating an origin on one *inside* its\nmanaging parent does take it out of that parent's flow layout, which is the\nplacement working, not failing. Each of those components documents what its\ncontainer stops doing for it. `vf-dialog` takes the pair in viewport\ncoordinates, the one difference the platform forces (see modal-dialog.ts).\n\nA DITL resource laid a dialog out as a list of items, each with a rectangle\nin the window's own coordinates; arranging controls by stating where they go\nis as native to System 7 as stacking them. This mixin is that mechanism:\ndeclaring `top` or `left` takes the element out of normal flow and\nabsolutely positions it within its parent, both coordinates in the art's own\nunit so the position scales with the display like every other metric. A\nwindow or dialog body can be laid out either way — a tree of `vf-stack`s, or\npositioned children — with no stylesheet in either case.\n\nMechanics, mirroring how `vf-stack` writes its declared size:\n\n- Setting either property writes `position: absolute` and both offsets onto\n  the host's inline style as `calc(var(--vf-scale, 1) * Npx)` — live against\n  the display, resolved at paint time. The coordinate left unset is 0.\n- `right`/`bottom` are released to `auto` and `margin` zeroed, so the stated\n  offsets are the whole story — an auto-width box with both edges set would\n  stretch rather than sit (the `vf-icon` seed logic, generalized).\n- Unsetting both returns the element to normal flow: every inline\n  declaration this wrote is removed, and stylesheet values resume.\n\nThe anchor is CSS's own: the nearest positioned ancestor's padding box. The\nkit's containers are all deliberate anchors — a desktop's raster, a window's\ncontent region (the frame's inner edge, below the title bar — the 12px body\ninset governs flow content only, exactly the DITL convention), a dialog's\ncontent area, a stack's box, a fieldset's border box, a scroll area's\nscrolled plane. In a non-kit parent, give the parent `position: relative`,\nthe one line of CSS this feature can't write for you.\n\nThe writing rides a ReactiveController (`hostUpdated`) rather than\nan `updated()` override, for a lifecycle reason worth keeping in the source:\nthe mixin sits *under* each component class, and most components override\n`updated()` without calling `super.updated()` — Lit's base is a no-op, so\nnothing ever forced the call — which would silently shadow a mixin-level\noverride. A controller is invoked by ReactiveElement itself, after every\nupdate, no matter what the subclass does.\n\nA gesture writes **through these properties**: `vf-window`'s title-bar drag\nand `vf-icon`'s drag and arrow nudge hand their new origin to a\nPlacementController, which snaps it onto the placement lattice and\nsets `left`/`top`. A moved element is therefore placed exactly the way an\nauthored one is — a live `calc()` in the art's own unit — and stays where it\nwas dropped when the zoom or the display changes what a system px costs.\n\nIt did not always. Writing the resolved CSS px straight to the inline style\nfroze the coordinate in the wrong unit: `--vf-scale` moved under it at every\nzoom step and the same constant read back as a different number of system px,\nso moved windows and icons slid off the grid the rest of the kit stayed on\n(by `3z / round(3z)` — 10% at 110% zoom, where nothing else moves at all).\n\nSetting a property yourself is still the deliberate way to re-place a moved\nelement. The controller re-applies **only when the values changed**, so an\nunrelated update — a heading change, a desktop toggling `active` — never\nre-asserts a coordinate and costs nothing.",
           "name": "VfPositioned",
           "members": [
             {