vintage-frames 0.10.0 → 0.10.1

package/custom-elements.json

@@ -13149,7 +13149,7 @@
                   }
                 }
               ],
-              "description": "A viewport point (CSS px) as a placement on the scrolled plane —\n`{ left, top }` in whole system px on the placement lattice, the pair a\nchild dropped here is written with. The plane travels with the scroll,\nso its box already carries the scroll offset and the border-floor\npadding; nothing is left for the caller to add. With `child`, the pair\nto write to that element: the offset its `origin` adds is folded in, so\nits box's corner lands on the point."
+              "description": "A viewport point (CSS px) as a placement on the scrolled plane —\n`{ left, top }` in whole system px on the placement lattice, the pair a\nchild dropped here is written with. The plane travels with the scroll,\nso its box already carries the scroll offset; nothing is left for the\ncaller to add. With `child`, the pair to write to that element: the\noffset its `origin` adds is folded in, so its box's corner lands on the\npoint."
             },
             {
               "kind": "method",

package/dist/components/vf-list.js

@@ -44,19 +44,8 @@ var x = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), S = cl
         max-height: calc(var(--vf-scale, 1) * var(--vf-list-max-height, 200px));
         /* Native scrolling; the bar itself is hidden by the recipe
            (.vf-scroll) and the reservation is the rail element, not a native
-           gutter. The rows run to the rail on the right.
-
-           The mod() padding is border-floor compensation: engines floor a
-           fractional border-width to whole CSS px (1.5px renders 1px), which
-           would put the rows a fraction of a system px inside the frame at
-           scale 1.5 or 4/3 — and the rows are LIGHT-DOM components, so their
-           origins are the page's device-pixel-grid contract, not just ours.
-           Padding is stored exactly, so border + mod(border's fraction)
-           restores the exact 1-system-px inset the borderless-scroller
-           construction used to give them, at every scale (mod is 0 at whole
-           ones). */
-        padding: mod(calc(var(--vf-scale, 1) * 1px), 1px);
-        padding-right: 0;
+           gutter. The rows run to the rail on the right and start at the
+           frame's inner edge. */
         overflow-y: auto;
       }
       .vf-rail--vertical {

package/dist/components/vf-scroll-area.d.ts

@@ -88,10 +88,10 @@ export declare class VfScrollArea extends VfScrollArea_base {
      * A viewport point (CSS px) as a placement on the scrolled plane —
      * `{ left, top }` in whole system px on the placement lattice, the pair a
      * child dropped here is written with. The plane travels with the scroll,
-     * so its box already carries the scroll offset and the border-floor
-     * padding; nothing is left for the caller to add. With `child`, the pair
-     * to write to that element: the offset its `origin` adds is folded in, so
-     * its box's corner lands on the point.
+     * so its box already carries the scroll offset; nothing is left for the
+     * caller to add. With `child`, the pair to write to that element: the
+     * offset its `origin` adds is folded in, so its box's corner lands on the
+     * point.
      */
     placementAt(clientX: number, clientY: number, child?: Element): {
         left: number;

package/dist/components/vf-scroll-area.js

@@ -74,16 +74,12 @@ var y = class extends r(f) {
            recipe (.vf-scroll) and the reservation is the rail element, not a
            native gutter. The unreserved axis still scrolls, railless.
 
-           No inset of its own — only the border-floor compensation: engines
-           floor the fractional frame border to whole CSS px, and the mod()
-           term is exactly what they floored away, so slotted content (and
-           the (0,0) of placed children) sits exactly one system px from the
-           frame box at every scale (mod is 0 at whole scales). An inset is
-           the content's (a vf-stack pad). */
+           No inset of its own: slotted content (and the (0,0) of placed
+           children) starts at the frame's inner edge, one system px from the
+           frame box. An inset is the content's (a vf-stack pad). */
         overflow: auto;
         min-width: 0;
         min-height: 0;
-        padding: mod(var(--vf-scale, 1) * 1px, 1px);
       }
       /* A single-axis rail with a reserved corner: the viewport spans the
          track the missing rail would have taken, up to the corner cell, so

package/dist/components/vf-text-area.js

@@ -57,15 +57,9 @@ var g = class extends n(l) {
         min-width: 0;
         /* Borderless — the frame is the well's (above). vf-text-field's own
            3px/6px padding plus that border holds the text exactly where the
-           bordered field puts it; the mod() term is border-floor
-           compensation (engines floor the fractional border to whole CSS px;
-           this is exactly what they floored away), keeping the text on the
-           4px/7px system-px inset from the frame box at every scale. */
+           bordered field puts it, 4px/7px from the frame box. */
         border: 0;
-        padding: calc(
-            var(--vf-scale, 1) * 3px + mod(var(--vf-scale, 1) * 1px, 1px)
-          )
-          calc(var(--vf-scale, 1) * 6px + mod(var(--vf-scale, 1) * 1px, 1px));
+        padding: calc(var(--vf-scale, 1) * 3px) calc(var(--vf-scale, 1) * 6px);
         /* Wrapped entry copy on the display face's native line (editable
            text is display type) — the same face token the static-text
            components read, so a display retheme moves this well too. The

package/dist/grid-snap.d.ts

@@ -34,10 +34,17 @@ export declare class GridSnapController implements ReactiveController {
      * roots consuming the variables sit at *authored* offsets inside the host —
      * including deliberate half-pixel ones like a toggle's centered box — and
      * measuring one of them would make the controller "correct" the component's
-     * own design. Because the host never moves from its own correction, the
-     * applied offset is folded into the error arithmetically rather than being
-     * expected in the measured rect; an ancestor's correction, which does move
-     * this host, is picked up the normal way.
+     * own design.
+     *
+     * The correction is a function of the host's position alone: the offset
+     * from its origin to the nearest whole device pixel. The host never moves
+     * from its own correction, so the correction already applied only decides
+     * whether a write is needed. Derived from the painted position instead —
+     * host plus the applied offset — every move would be rounded from wherever
+     * the previous correction left the paint, keeping each move's rounding
+     * error: a host carried along by an animation, or shifted half a pixel a
+     * few times, painted whole device pixels outside its box. An ancestor's
+     * correction, which does move this host, is picked up the normal way.
      */
     correct(dpr: number): void;
     /** Drop the correction: delete the two variables and forget everything. */

package/dist/grid-snap.js

@@ -73,15 +73,13 @@ var n = .05, r = 1 / 64, i = () => e() || 1, a = (e, t) => {
 			x: "",
 			y: ""
 		});
-		let s = a(r.left + this.applied.x, e), c = a(r.top + this.applied.y, e);
-		if (Math.abs(s) <= n && Math.abs(c) <= n) return;
-		let l = {
-			x: o(this.applied.x - s / e),
-			y: o(this.applied.y - c / e)
+		let s = {
+			x: o(-a(r.left, e) / e),
+			y: o(-a(r.top, e) / e)
 		};
-		(l.x !== this.applied.x || l.y !== this.applied.y) && (this.applied = l, this.written = {
-			x: `${l.x}px`,
-			y: `${l.y}px`
+		Math.abs(s.x - this.applied.x) * e <= n && Math.abs(s.y - this.applied.y) * e <= n || (this.applied = s, this.written = {
+			x: `${s.x}px`,
+			y: `${s.y}px`
 		}, i.setProperty("--vf-snap-dx", this.written.x), i.setProperty("--vf-snap-dy", this.written.y));
 	}
 	reset() {

package/dist/styles/recipes/rule.d.ts

@@ -19,11 +19,6 @@ export type RuleEdge = (typeof RULE_EDGES)[number];
  * One declaration per edge, so the kit cannot grow two rules — the
  * {@link vfHardShadowDecls} principle, applied to the line.
  *
- * Being a border, it shares the kit's border-floor residual
- * (docs/THREE-X-DISPLAYS.md): Chromium floors a fractional border-width to
- * whole CSS px, so above 1× the line paints thinner than a system px (2
- * device px of 3 at 2×) and the padding box begins that much inside — the
- * same as every kit frame, and the same line the menu bar always drew.
  * `npm run verify:rule` asserts a container's rule against the menu bar's.
  */
 export declare const vfRule: import("lit").CSSResult;

package/docs/SPEC.md

@@ -148,7 +148,7 @@ The span construction stays load-bearing for the CSS-repeated underlays beneath
 - `vfHardShadowDecls` — the hard 1-bit drop shadow on its own, for composing into a surface that supplies its own border: `box-shadow: var(--vf-shadow-offset, 2px) var(--vf-shadow-offset, 2px) 0 0 var(--vf-black, #000)`. No blur, no spread — System 7's only depth cue. Every raised surface in the kit composes this one declaration (`vfPanel`, `vfChromeFrame`; `vf-swatch` composes it without either surface class).
 - `vfPanel` — a `.vf-panel` class for menus/popups: white bg, `border: 1px solid var(--vf-black, #000)`, `vfHardShadowDecls`.
 - `vfChromeFrame` — a `.vf-frame` class for the desktop window (`vf-window`): the same white face, 1px black border and hard offset shadow as `vfPanel`, no bevels. Skin only — the component supplies its own layout (a full-size flex column). `vf-dialog` does not use it: both of its chromes are `vfModalFrame`.
-- `vfRule` — the 1px rule on one edge of a box, one class per edge: `.vf-rule-top`, `.vf-rule-right`, `.vf-rule-bottom`, `.vf-rule-left`, each `border-<edge>: 1px solid var(--vf-black, #000)` scaled by `--vf-scale`. A border, so it sits inside the box's `border-box` size and insets the padding box — content, percentage fills and children placed against the box begin inside the rule, as a rectangle's interior begins inside FrameRect's line. One declaration per edge, the `vfHardShadowDecls` principle applied to the line: `vf-menu-bar`'s floor and `vf-window`'s status-strip ceiling are these classes, and `vf-container rule="…"` takes the edges by name. The attribute grammar ships beside it (`RULE_EDGES`, `parseRule`, `ruleClasses`): edge names separated by whitespace in any order, repeats dropped, returned in shorthand order; a blank or unset value is no edges; any other token refuses the whole value, as `parsePattern` refuses an unrecognized pattern. Being a border it shares the kit's border-floor residual (docs/THREE-X-DISPLAYS.md — thin above 1× in Chromium, the padding box that much inside), exactly as every kit frame does. `npm run verify:rule` asserts a container's rule against the menu bar's own at four densities.
+- `vfRule` — the 1px rule on one edge of a box, one class per edge: `.vf-rule-top`, `.vf-rule-right`, `.vf-rule-bottom`, `.vf-rule-left`, each `border-<edge>: 1px solid var(--vf-black, #000)` scaled by `--vf-scale`. A border, so it sits inside the box's `border-box` size and insets the padding box — content, percentage fills and children placed against the box begin inside the rule, as a rectangle's interior begins inside FrameRect's line. One declaration per edge, the `vfHardShadowDecls` principle applied to the line: `vf-menu-bar`'s floor and `vf-window`'s status-strip ceiling are these classes, and `vf-container rule="…"` takes the edges by name. The attribute grammar ships beside it (`RULE_EDGES`, `parseRule`, `ruleClasses`): edge names separated by whitespace in any order, repeats dropped, returned in shorthand order; a blank or unset value is no edges; any other token refuses the whole value, as `parsePattern` refuses an unrecognized pattern. `npm run verify:rule` asserts a container's rule against the menu bar's own at four densities.
 - `vfModalFrame` — the dBoxProc modal-dialog frame, both `vf-dialog` chromes: `.vf-modal-frame` (white face, 1px black border, **no shadow**) around `.vf-modal-frame-inner` (`margin: 2px; border: 2px solid`). **The movable modal is this frame with the striped bar set into it** (traced from a 2× System 7 capture): a `.vf-title-bar` as the frame's first child sits directly under the outer rule, `margin: 0 2px` so its stripes — flush to the bar's own edge here, `inset: 3px 0` — keep the same 2px of white from the outer rule the band keeps; the inner box that follows it drops its top margin and thins its top border to 1px, so the bar's own 1px rule plus that border make the 2px band the bar's floor, continuing down the sides and along the bottom. System 7's alert box drew the mirror trace — 2px outer, 2px gap, 1px inner rule, *with* the hard shadow (`Windows/modal dialog.png` vs the alert reference) — a different chrome the kit does not ship: an alert box is a consumer composition over this frame, not a component.
 - `vfWindowWidgets` — the title-bar window widgets (`.box` base, `.close` left / `.zoom` right at 11×11 with the 1px white patch ring, the pressed go-away sunburst, the nested zoom square), shared by `vf-window` and a `closable` `vf-dialog` so the two components' widgets match by construction. The templates that pair with it (`closeBox`/`zoomBox`/`widgetLabel`) live in `src/chrome.ts` with `chromeTitleBar`. Geometry is the standard bar's; `vf-window`'s utility variant overrides sizes under its own selector.
 - `vfTitleBar` — the striped title bar shared by `vf-window` and `vf-dialog`: a `.vf-title-bar` row (`height: var(--vf-titlebar-height, 18px)`, 1px bottom rule, `overflow: hidden`) and the `.vf-title` patch inside it (display face, white bg, `padding: 0 6px`, `z-index: 1` over the stripes, `nowrap` + ellipsis). Put a `.vf-stripes` layer in as the bar's first child.
@@ -219,11 +219,11 @@ The desktop-window shell: the classic document window (see DragThing screenshot)
   - Grow box (if `resizable`): 15×15 at bottom-right corner, white bg, 1px black top/left borders, containing two overlapping small square outlines. Inactive: the cell and its borders stay, the nested squares go — System 7 drew a deactivated window's size box hollow, with its blanked scroll rails.
   - Header (`header` slot): a band between the title bar and the body, the full width of the window — the Finder window's header line — a white interior over a 1px black rule (`vfRule`'s `.vf-rule-bottom`), part `header` (a `<div>`, never a `<header>` element, for the banner-landmark reason the title bar is a `<div>`). Like the body it carries no inset and is a positioning anchor: (0,0) is the header's own corner, flow content starts there, an inset is the content's (a `vf-stack pad`). As tall as its content unless `header-height` states it (rule included, the way every kit bar counts its rule). Clipped like the body; a drop-open panel still escapes. Takes **no space** until the slot is populated, and collapses again when it empties. Composes with `scrollbars`: the edge rails sit in the body below it, the area's top overhang landing its frame line exactly on the header's rule, so the header spans the vertical rail's column and the rail's top arrow begins under it.
   - Status bar (`status` slot): the classic bottom readout strip ("40px x 40px") — a 1px black rule (`vfRule`'s `.vf-rule-top`) over a white interior, `--vf-status-bar-height` (15px) in all, the grow box's own height, so a `resizable` window's grow box sits flush in the strip's right end (its top/left borders take over the rule there; the strip reserves 21px of right padding under `resizable` so text clears the cell). Slotted content rides the body face's native 12px line (`--vf-line-height`), whole-pixel centered in the 14px interior, `padding-inline: 6px`, nowrap + clipped. Takes **no space** until the slot is populated, and collapses again when it empties. Composes with `scrollbars`: the edge rails' bottom overhang lands its frame line exactly on the strip's rule, so the two never double up — though the grow box then sits in the strip rather than the rail corner cell.
-  - Edge scroll rails (if `scrollbars`): the body slot renders inside a shadow `vf-scroll-area` (its `axis` = the attribute's value, `label` = the heading, `viewport` part re-exported) carrying the TeachText composition internally — `calc(100% + 2px·scale)` with `margin: -1px·scale`, one system px under the frame on every side, so the area's own frame border repaints the window's border lines and a `resizable` window's grow box (z-index 1) lands exactly over the rail-corner cell. the area's viewport carries no inset (the border-floor term alone), so content and the (0,0) of placed children sit at the content region's corner; a `resizable` window sets the area's `corner`, so a single-axis rail stops at the corner cell too — unless the status strip is populated, when the grow box sits in the strip and the rail runs edge to edge onto the strip's rule. Same caveats as the slotted composition (see vf-scroll-area §5).
+  - Edge scroll rails (if `scrollbars`): the body slot renders inside a shadow `vf-scroll-area` (its `axis` = the attribute's value, `label` = the heading, `viewport` part re-exported) carrying the TeachText composition internally — `calc(100% + 2px·scale)` with `margin: -1px·scale`, one system px under the frame on every side, so the area's own frame border repaints the window's border lines and a `resizable` window's grow box (z-index 1) lands exactly over the rail-corner cell. the area's viewport carries no inset, so content and the (0,0) of placed children sit at the content region's corner; a `resizable` window sets the area's `corner`, so a single-axis rail stops at the corner cell too — unless the status strip is populated, when the grow box sits in the strip and the rail runs edge to edge onto the strip's rule. Same caveats as the slotted composition (see vf-scroll-area §5).
   - Utility variant (`variant="utility"`): the slim windoid bar traced from `Windows/utility-window.png` — `--vf-titlebar-height-utility` (12px = 11px interior + 1px rule), the `vfDots` dither instead of stripes (flush to the side borders — see §4 vfDots), 7×7 widgets (`top: 2px`; close `left: 7px`, zoom `right: 8px` — the art is asymmetric by that pixel) with a 2px patch ring where the striped bar's is 1px (`--vf-widget-ring`, internal geometry: the windoid sheet clears two px of dither beside its widgets), and the nested zoom square shrunk so its edges land at sprite col/row 3. No title patch: the display face's 16px line box can't sit in an 11px interior, so `.vf-title` is `display: none` under the variant (a retheming consumer can re-show it via `::part(title)`) and the heading names the widgets. A pressed windoid widget inverts whole — black interior under a white (invisible) borderline — rather than flashing the big bar's 9×9 sunburst, which can't land on a 5×5 interior.
 - **A11y:** the close/zoom `aria-label`s are qualified by the title when there is one (`Close ${heading}` / `Zoom ${heading}`, falling back to bare `Close` / `Zoom`) — several windows are open at once by design, so a bare repeated "Close" gives an AT user no way to tell which window a widget belongs to. The frame is `role="group"`, named by the title patch via `aria-labelledby` when there is a heading (the utility variant's hidden patch still names it — AccName resolves hidden labelledby targets) — `group` rather than `region` deliberately, so a desktop of windows doesn't pollute landmark navigation; the title bar is a `<div>`, never a `<header>`, which would map to an unnamed `banner` landmark even inside the shadow root. An inactive window's widgets stay in the tree and the tab order but paint no ink (transparent border/background/patch ring — the bare System 7 bar): a background window whose body holds nothing focusable is still reachable, activated by `vf-desktop`'s `focusin` raise the moment Tab lands on a widget, and never drops focus to `<body>` when it deactivates. `npm run verify:window-a11y`.
 - **Behavior:** close box click → `vf-close` (does NOT remove itself; consumer decides). Zoom box click → `vf-zoom`. If `movable`: dragging the title bar moves the window — the drag seeds its origin from the current offset position (once, converting to system px) and then states `left`/`top` via pointer capture, in whole system px like any authored placement. If `resizable`: dragging the grow box states `width`/`height` the same way, each axis clamped into the sizeRect (`min-width`/`max-width`, `min-height`/`max-height` — GrowWindow's: the app stated the rectangle of sizes and the Window Manager clamped the drag to it; the mins default to the 80×54 floor a window can still be worked at, the maxes are unbounded, and a min equal to its max locks the axis — the strip that scrolls sideways and never grows taller). The clamp runs after the lattice snap, so a bound lands exactly the way an authored size does even off the lattice (an odd height at 2×); where a min and max cross the max wins, so a window authored under the floor and held there never jumps to it. The rect bounds the gesture only: a size authored outside it renders as declared, and the first grow-box move brings it inside. The drag fires `vf-resize` (detail `{ width, height, commit }`, sizes in whole system px) — one event per size the drag actually writes (`commit: false`), fired *after* the new box is applied so a handler that measures reads the resized layout, then a final `commit: true` as the gesture settles (release or cancel), only when it changed the size. Window content can follow the grow box from this event alone, no ResizeObserver. Fired by the gesture only: a programmatic `width`/`height` write fires nothing, the way a value set fires no `vf-change`.
-- **Methods:** `placementAt(clientX, clientY, child?)` → a viewport point as a placement in the content region — `{ left, top }` in whole system px on the placement lattice: the body's corner, or under `scrollbars` the scrolled plane with the scroll offset and the border-floor padding already in it (the built-in area's own `placementAt`). The pair a child dropped into the window is written with; with `child`, the pair to write to that element, its `origin` offset folded in. `measure()` → the built-in scroll area's `measure()`, a no-op without `scrollbars`; the area re-measures by itself on its content's box, its slot and every placement write (`vf-placement-change`, §2), so this is the escape hatch for a range that changes with none of those.
+- **Methods:** `placementAt(clientX, clientY, child?)` → a viewport point as a placement in the content region — `{ left, top }` in whole system px on the placement lattice: the body's corner, or under `scrollbars` the scrolled plane with the scroll offset already in it (the built-in area's own `placementAt`). The pair a child dropped into the window is written with; with `child`, the pair to write to that element, its `origin` offset folded in. `measure()` → the built-in scroll area's `measure()`, a no-op without `scrollbars`; the area re-measures by itself on its content's box, its slot and every placement write (`vf-placement-change`, §2), so this is the escape hatch for a range that changes with none of those.
 - **Slots:** default (body content), `header` (the header strip between the title bar and the body), `status` (the bottom status strip — see Visual).
 - **Parts:** `frame`, `title-bar`, `title`, `close-box`, `zoom-box`, `header`, `body`, `status-bar`, `grow-box`, plus `viewport` re-exported from the built-in scroll area when `scrollbars` is set.
 - **Events:** `vf-close`, `vf-zoom` (detail `{}`), `vf-resize` (detail `{ width, height, commit }`).
@@ -315,7 +315,7 @@ The color-swatch button: a well of solid color — a palette cell.
 - **Events:** `vf-input` detail `{ value }` on every keystroke; `vf-change` detail `{ value }` on commit (native change). Plus the native pair per §2: the inner input's own composed `input` crosses the boundary itself; `change` is re-dispatched from the host.
 
 #### `vf-text-area` (`VfTextArea`, vf-text-area.ts)
-Same as vf-text-field but wrapping `<textarea>`; extra prop `rows: number` (default 4). No resize grip (`resize: none`) — System 7 fields don't resize. Wrapped entry text sits on the display face's native line (`--vf-line-height-display`, 16px — Chicago 12's; `rows` buys one line each) — the single-line well's 20px box is control geometry, the 22px field trace, and stays; a multi-line well is typesetting. Reserves a permanent System 7 vertical scroll rail (the shared "always-a-rail" behavior — see vf-scroll-area): arrows on an empty white channel until the text overflows, then the dither and thumb fill in. The rail is the drawn `vfScrollRail` subtree (§4), a shadow sibling of the `<textarea>` synced to its native scrolling by `ScrollRailController`; the textarea carries the `vf-scroll` class (native bar hidden), and both controllers re-measure on each keystroke (a textarea's scrollHeight grows without a box resize). Unlike vf-text-field, the 1px frame sits on the `.vf-field-well` wrapper rather than the field itself — the rail has to live inside the frame beside the text — with the borderless `<textarea>` keeping vf-text-field's own `3px/6px` padding (plus the border-floor compensation, a `mod()` term restoring what engines floor off a fractional border-width), so the text and the outer box sit exactly where the bordered field puts them. The well is the same wrapper vf-text-field uses; the focus rule spans the full frame, scroll rail included (the `-3px` bordered-carrier offset, §4 vfFocusUnderline). Forwards the same input-behavior attributes as vf-text-field, minus `pattern` (only an `<input>` takes it). Parts: `textarea`. Events: `vf-input`, `vf-change`, plus the native pair (§2).
+Same as vf-text-field but wrapping `<textarea>`; extra prop `rows: number` (default 4). No resize grip (`resize: none`) — System 7 fields don't resize. Wrapped entry text sits on the display face's native line (`--vf-line-height-display`, 16px — Chicago 12's; `rows` buys one line each) — the single-line well's 20px box is control geometry, the 22px field trace, and stays; a multi-line well is typesetting. Reserves a permanent System 7 vertical scroll rail (the shared "always-a-rail" behavior — see vf-scroll-area): arrows on an empty white channel until the text overflows, then the dither and thumb fill in. The rail is the drawn `vfScrollRail` subtree (§4), a shadow sibling of the `<textarea>` synced to its native scrolling by `ScrollRailController`; the textarea carries the `vf-scroll` class (native bar hidden), and both controllers re-measure on each keystroke (a textarea's scrollHeight grows without a box resize). Unlike vf-text-field, the 1px frame sits on the `.vf-field-well` wrapper rather than the field itself — the rail has to live inside the frame beside the text — with the borderless `<textarea>` keeping vf-text-field's own `3px/6px` padding, so the text and the outer box sit exactly where the bordered field puts them. The well is the same wrapper vf-text-field uses; the focus rule spans the full frame, scroll rail included (the `-3px` bordered-carrier offset, §4 vfFocusUnderline). Forwards the same input-behavior attributes as vf-text-field, minus `pattern` (only an `<input>` takes it). Parts: `textarea`. Events: `vf-input`, `vf-change`, plus the native pair (§2).
 
 #### `vf-number-field` (`VfNumberField`, vf-number-field.ts)
 A numeric text field paired with the classic "little arrows" stepper.
@@ -386,19 +386,19 @@ The classic popup menu control ("Macintosh HD ▼").
 Classic list box.
 - **Attributes/props:** `multiple: boolean`, `value: string` / `values: string[]` (multiple), `disabled`, `label: string` (accessible name → host `aria-label`).
 - **Children:** `<vf-list-item value="...">` (`VfListItem`, vf-list-item.ts): props `value`, `selected` (reflect), `disabled`; height 20px, `padding: 0 6px`; selected = inverted row (full width). Slots: default (the row text, in a `text` part that ellipsizes), `icon` (a leading graphic — usually a 16×16 `vf-img` small icon; flex-centered in the row with the reference art's 4px gap to the text, no text contributed so type-ahead still reads the words; keep row-height − icon-height even so the centering offset is a whole pixel).
-- **Visual (list):** white bg inside a real 1px black frame on the snapped wrapper, a `[rows | rail]` grid: the scrolling row viewport (class `vf-scroll`, native bar hidden) beside the drawn `vfScrollRail` subtree (§4), synced by `ScrollRailController`. The rows sit exactly 1 system px inside the frame lines (a `mod()` border-floor compensation pads back what engines floor off the fractional border-width — the rows are light-DOM components, so their origins are the page's grid contract); default `max-height: 200px` overridable via `--vf-list-max-height` (the frame adds its 2px on top). Reserves a permanent vertical scroll rail (the "always-a-rail" behavior — see vf-scroll-area): arrows on an empty white channel until the rows overflow.
+- **Visual (list):** white bg inside a real 1px black frame on the snapped wrapper, a `[rows | rail]` grid: the scrolling row viewport (class `vf-scroll`, native bar hidden) beside the drawn `vfScrollRail` subtree (§4), synced by `ScrollRailController`. The rows sit exactly 1 system px inside the frame lines; default `max-height: 200px` overridable via `--vf-list-max-height` (the frame adds its 2px on top). Reserves a permanent vertical scroll rail (the "always-a-rail" behavior — see vf-scroll-area): arrows on an empty white channel until the rows overflow.
 - **Behavior:** `role="listbox"` (+`aria-multiselectable`, + `aria-label` from `label`), items `role="option"`. A disabled list pushes `aria-disabled` down onto every row (as `vf-radio-group` does), so AT is never shown enabled-looking options inside a disabled listbox; the flag is tracked separately from each row's own `disabled`, so re-enabling the list leaves individually disabled rows disabled. Click selects (Shift/Cmd extend when `multiple`). Roving tabindex; Arrow keys move the selection, Space toggles in multiple mode. The full multiple-mode model: Shift+Arrow extends from the anchor, Ctrl+Arrow moves the cursor without touching the selection, plain Home/End and type-ahead jumps are cursor-only moves too (a jump that rewrote a hand-built selection would destroy it — Space is how the reached row joins it; in single mode they select, since there the selection *is* the cursor), Shift(+Ctrl)+ Home/End extend through to the ends, Shift+Space selects the contiguous run from the anchor to the cursor, and Ctrl/Cmd+A selects every enabled row. Printable keys drive classic Finder **first-letter type-ahead** (`src/type-ahead.ts`, the shared buffer `vf-select` and the menus also run): keystrokes accumulate into a prefix matched against each row's text, jumping to the next match, wrapping and skipping disabled rows. The prefix resets after 1s of silence; repeating a single character cycles the rows starting with it. Modified keys are left to the consumer, and Space stays the multiple-mode toggle, so neither joins the prefix. A **disabled** list keeps its rows rendered and readable (System 7 dims a list, it doesn't hide it) — when they overflow the box, the viewport itself becomes the Tab stop so the dimmed rows stay reachable by keyboard scroll.
 - **Parts:** `list`. **Events:** `vf-change` detail `{ value, values }`.
 
 #### `vf-scroll-area` (`VfScrollArea`, vf-scroll-area.ts)
 A container whose scrollbars look like System 7.
 - **Attributes/props:** `axis: 'vertical' | 'horizontal' | 'both'` (default `'vertical'`, reflected) — which scroll rails to reserve as permanent placeholders (see "always-a-rail" below); `corner: boolean` (default false, reflected) — reserves the bottom-right corner cell on a single-axis rail (the rail stops 15px short of the frame, the viewport spans the rest), for a grow box to land in; inert on `both`, which always has the cell; `label: string` — accessible name for the viewport (`aria-label` on the viewport, since an `aria-label` on the host cannot reach into the shadow DOM). The viewport is a **Tab stop only while its content actually overflows** — the same state `ScrollStateController` measures for the rails; a fitting scroll area used to be a focusable stop with `role: generic` and no name, a dead Tab press. Whenever it is a stop it carries a role: `role="region"` when `label` names it (a named landmark), `role="group"` when not (an unnamed region is inert, so that role is reserved for the labelled case).
-- **Visual:** `display: block`; the snapped wrapper carries a real 1px black frame and a grid reserving each rail as its own edge column/row — `[viewport | vertical rail]` over `[horizontal rail | corner]` — with the white inner viewport carrying no inset of its own — only the border-floor compensation (a `mod()` term restoring what engines floor off the fractional border-width), so slotted content and the (0,0) of placed children sit exactly 1 system px from the frame box at every scale; an inset is the content's (a `vf-stack pad`). Consumer sets width/height on host. The scrolled plane — the wrapper the slot renders into, and the positioned anchor for placed children — is `width: fit-content; min-width: 100%`: never narrower than the viewport, as wide as content that cannot wrap, so the controllers' ResizeObserver on it sees a row growing sideways the way it sees copy growing down (a block wrapper's auto width was the viewport's whatever the row did, and a row gaining a cell left the thumb and the overflow state stale until something else re-measured); copy wraps as before, and a `position: sticky; left: 0` child holds across the scroll, the plane being its containing block. `min-height: 100%` likewise: a `fixed` child (§2 Explicit placement) is a sticky box the plane contains, and a plane shorter than the child's stated `top` would clamp it to the plane's bottom edge; content that fits still fits. In the overflowing case a percentage-width or centered block child resolves against the grown plane, not the viewport. A `slotchange` re-measures; `measure()` covers a scroll range that changes with no box changing. The rails are the drawn `vfScrollRail` subtree (§4 — the classic 16px cell counting the frame line: divider, 14px channel, 15px arrow cells, the fixed 16px thumb, the `tileRaster` dot-dither trough), rendered as later siblings of the viewport and synced to its native scrolling by `ScrollRailController`; the viewport carries the `vf-scroll` class, which hides the native bar without touching the native scrolling. When both rails are reserved, the corner cell joins them, supplying the interior dividers the adjacent arrow cells leave to it; `corner` reserves the same 15×15 cell beside a single rail, its other divider continuing the rail's line across the cell — DrawGrowIcon's form, for the grow box. Every engine renders the same rail; the old `::-webkit-scrollbar` skin, its `.vf-scroll-frame` overlay contortion (WebKit quantized native scrollbar rects to whole CSS px) and the Firefox `scrollbar-color` fallback are all retired.
+- **Visual:** `display: block`; the snapped wrapper carries a real 1px black frame and a grid reserving each rail as its own edge column/row — `[viewport | vertical rail]` over `[horizontal rail | corner]` — with the white inner viewport carrying no inset of its own, so slotted content and the (0,0) of placed children sit exactly 1 system px from the frame box at every scale; an inset is the content's (a `vf-stack pad`). Consumer sets width/height on host. The scrolled plane — the wrapper the slot renders into, and the positioned anchor for placed children — is `width: fit-content; min-width: 100%`: never narrower than the viewport, as wide as content that cannot wrap, so the controllers' ResizeObserver on it sees a row growing sideways the way it sees copy growing down (a block wrapper's auto width was the viewport's whatever the row did, and a row gaining a cell left the thumb and the overflow state stale until something else re-measured); copy wraps as before, and a `position: sticky; left: 0` child holds across the scroll, the plane being its containing block. `min-height: 100%` likewise: a `fixed` child (§2 Explicit placement) is a sticky box the plane contains, and a plane shorter than the child's stated `top` would clamp it to the plane's bottom edge; content that fits still fits. In the overflowing case a percentage-width or centered block child resolves against the grown plane, not the viewport. A `slotchange` re-measures; `measure()` covers a scroll range that changes with no box changing. The rails are the drawn `vfScrollRail` subtree (§4 — the classic 16px cell counting the frame line: divider, 14px channel, 15px arrow cells, the fixed 16px thumb, the `tileRaster` dot-dither trough), rendered as later siblings of the viewport and synced to its native scrolling by `ScrollRailController`; the viewport carries the `vf-scroll` class, which hides the native bar without touching the native scrolling. When both rails are reserved, the corner cell joins them, supplying the interior dividers the adjacent arrow cells leave to it; `corner` reserves the same 15×15 cell beside a single rail, its other divider continuing the rail's line across the cell — DrawGrowIcon's form, for the grow box. Every engine renders the same rail; the old `::-webkit-scrollbar` skin, its `.vf-scroll-frame` overlay contortion (WebKit quantized native scrollbar rects to whole CSS px) and the Firefox `scrollbar-color` fallback are all retired.
 - **Always-a-rail behavior:** each *reserved* axis (per `axis`) renders its rail element as a permanent placeholder — arrow buttons on an empty white channel (dither off, no thumb; System 7 drew the arrows on any bar in an active window, and a scroller outside a window always counts as active) — until the content overflows that axis, when the dither and thumb fill in and the arrows go live (an idle axis's arrows are drawn but inert — the press guard in `ScrollRailController` skips them). `ScrollStateController` (`src/scroll-state.ts`) measures both axes and writes `data-overflow-x` / `data-overflow-y` (`"true"` / `"false"`) on the scroll element; the recipe keys the dither and thumb off those attributes. The unreserved axis still scrolls natively (wheel, keyboard) but draws no rail. Shared by vf-list and vf-text-area; a future `@container scroll-state(scrollable)` query could replace the JS for slotted-content components.
   - **Inactive-window blanking:** the HIG's non-frontmost window must not display interactive scroll UX, so the controller also finds the nearest `vf-window` up the composed tree (light-DOM ancestor for a slotted scroller, shadow ancestor for `vf-window[scrollbars]`'s own edge rails), watches its reflected `active` attribute, and toggles a presence-only `data-window-inactive` on the scroll element. While present, the recipe empties dither/thumb/arrows on BOTH axes regardless of overflow — the bare channel, arrows included (unlike the idle rail, which keeps them), exactly as System 7 blanked a deactivated window's bars (its List Manager/TextEdit deactivated in-window scrollbars too). No `vf-window` ancestor → the attribute never appears: dialogs have no inactive state and a bare scroll component always draws live. Like the overflow half, this signal could one day go declarative — a custom property cascaded under `vf-window:not([active])` gating the recipe via an `@container style()` query; the rails being ordinary DOM, that migration is a plain selector swap (see the FUTURE note in scroll-state.ts).
 - **Document-window (TeachText) composition:** to put the rails on a window's edge rather than inset in its body, slot the scroll area into a `vf-window` sized `calc(100% + 2px·scale)` with `margin: -1px·scale` — one system pixel under the window frame on every side. Its own frame border then repaints the window's border lines exactly (no doubled frame), and a resizable window's grow box lands exactly over the rail's corner cell, giving the classic System 7 document window. `vf-window[scrollbars]` renders exactly this composition from its own shadow tree (forwarding `corner` for a resizable window without a status strip), so the one-liner and the slotted form are geometrically identical; slot it yourself when the well should sit inside the body instead of on its edge (the installer's read-me well, placed with `top`/`left`).
 - **Re-measures under a moved child.** A placed child moved through `top`/`left` changes the scroll range with no box changing anywhere the ResizeObserver can see — the plane's box is never grown by an absolutely positioned child — so the placement controller announces every write as `vf-placement-change` (§2) and the area re-measures on it, heard on the host: the event is non-composed, but from a slotted child it still travels through the slot it is assigned to, which is how the window's built-in area (this element, in the window's shadow) hears an icon slotted into the window body. A drop, an arrow nudge and a page's own `icon.left = …` all go through the one funnel.
-- **Methods:** `measure()` → re-measure overflow and re-sync the rails, for a scroll range that changes with no box, no slot and no placement write — a transform — the way the kit's own fields re-measure on input. `placementAt(clientX, clientY, child?)` → a viewport point as a placement on the scrolled plane, `{ left, top }` in whole system px on the placement lattice; the plane travels with the scroll, so its box already carries the offset and the border-floor padding. With `child`, the pair to write to that element, its `origin` offset folded in.
+- **Methods:** `measure()` → re-measure overflow and re-sync the rails, for a scroll range that changes with no box, no slot and no placement write — a transform — the way the kit's own fields re-measure on input. `placementAt(clientX, clientY, child?)` → a viewport point as a placement on the scrolled plane, `{ left, top }` in whole system px on the placement lattice; the plane travels with the scroll, so its box already carries the offset. With `child`, the pair to write to that element, its `origin` offset folded in.
 - **Slots:** default. **Parts:** `viewport`.
 
 #### `vf-fieldset` (`VfFieldset`, vf-fieldset.ts)

package/editor/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "vintage-frames",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vintage-frames",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Lit web components that emulate the look and feel of classic Mac OS System 7",
   "type": "module",
   "license": "MIT",