vintage-frames 0.13.0 → 0.14.0

package/custom-elements.json

@@ -1348,11 +1348,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The classic System 7 checkbox: a 13×13 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite. The border \"thickens\"\nwhile pressed, exactly like the original control.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.",
+          "description": "The classic System 7 checkbox: a 12×12 white square with a 1px black\nborder whose checked state is the corner-to-corner ✕ glyph — the pixel-exact\ncross traced from the Classic Macintosh UI Kit sprite, filling the 10×10\ninterior. The border \"thickens\" while pressed, exactly like the original\ncontrol.\n\nForm-associated: submits `value` under `name` when checked (like a native\ncheckbox) and restores its initial checked state on form reset. Toggles on\nclick and Space.",
           "name": "VfCheckbox",
           "cssParts": [
             {
-              "description": "The 13×13 checkbox square.",
+              "description": "The 12×12 checkbox square.",
               "name": "box"
             },
             {
@@ -1362,7 +1362,7 @@
           ],
           "slots": [
             {
-              "description": "The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 13×13 box.",
+              "description": "The label, rendered to the right of the box with a 6px gap. Left empty, the label and its gap collapse: the control is the bare 12×12 box.",
               "name": ""
             }
           ],
@@ -2246,7 +2246,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** — unless `pattern` or `rule` say\nwhat to paint. No role, keyboard behavior or selection; what it holds\ndecides what it is.\n\n**`rule` draws the 1px rule on the edges it names** — `rule=\"bottom\"` is\nthe menu bar's anatomy (the box's rows over one row of ink), `rule=\"top\"`\na status strip's, all four a framed box. The rule is the box's own border\n(vfRule), inside the declared size, so a 24px `rule=\"bottom\"`\nstrip is 23 rows of box over the line; content, `fill-width` children and\nplaced children begin inside it, as a rectangle's interior begins inside\nFrameRect's line.\n\n**`pattern` fills the box with a 1-bit pattern**: one of the 38 standard\nMacPaint patterns by name (`pattern=\"bricks\"`, `pattern=\"gray-50\"` —\ndocs/PATTERNS.md has the table), or sixteen hex digits stating a custom\n8×8 pattern row by row, the way a PAT resource did. It is painted as the\nbox's own background — black ink on a `--vf-white` ground, anchored at\nthe box's top-left corner, under the content — by the same repeating tile\nas the desktop dither, so it is 1-bit at every density and zoom and a box\nof any size, declared or not, costs nothing more (src/pattern-fill.ts).\nUnder forced colors the pattern goes flat Canvas.\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.",
+          "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** — unless `pattern` or `rule` say\nwhat to paint. No role, keyboard behavior or selection; what it holds\ndecides what it is.\n\n**`rule` draws the 1px rule on the edges it names** — `rule=\"bottom\"` is\nthe menu bar's anatomy (the box's rows over one row of ink), `rule=\"top\"`\na status strip's, all four a framed box. The rule is drawn inside the\ndeclared size (vfRule), so a 24px `rule=\"bottom\"` strip is 23 rows\nof box over the line; content, `fill-width` children and placed children\nbegin inside it, as a rectangle's interior begins inside FrameRect's line.\n\n**`pattern` fills the box with a 1-bit pattern**: one of the 38 standard\nMacPaint patterns by name (`pattern=\"bricks\"`, `pattern=\"gray-50\"` —\ndocs/PATTERNS.md has the table), or sixteen hex digits stating a custom\n8×8 pattern row by row, the way a PAT resource did. It is painted as the\nbox's own background — black ink on a `--vf-white` ground, anchored at\nthe box's top-left corner, under the content — by the same repeating tile\nas the desktop dither, so it is 1-bit at every density and zoom and a box\nof any size, declared or not, costs nothing more (src/pattern-fill.ts).\nUnder forced colors the pattern goes flat Canvas.\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 correction lands on the shadow box below, and the\ncoordinate system sits inside it, so the correction moves the whole\ncoordinate system — everything placed against it rides along instead of\nbeing 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": [
             {
@@ -2290,7 +2290,7 @@
               "type": {
                 "text": "string | null | undefined"
               },
-              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn as the\nbox's own border inside the declared size, in `--vf-black`, scaled with\nthe display like every kit frame's border; content and placed children\nbegin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
+              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn inside\nthe declared size, in `--vf-black`, scaled with the display like every\nkit frame; content and placed children begin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
               "attribute": "rule"
             },
             {
@@ -2443,7 +2443,7 @@
               "type": {
                 "text": "string | null | undefined"
               },
-              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn as the\nbox's own border inside the declared size, in `--vf-black`, scaled with\nthe display like every kit frame's border; content and placed children\nbegin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
+              "description": "The 1px rule on the box's edges: edge names separated by spaces —\n`\"bottom\"`, `\"top bottom\"`, up to all four in any order. Drawn inside\nthe declared size, in `--vf-black`, scaled with the display like every\nkit frame; content and placed children begin inside it.\nUnset, no rule; a value naming anything but an edge draws none and\nwarns once.",
               "fieldName": "rule"
             },
             {
@@ -15308,7 +15308,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-separator>` — a 1px System 7 rule.\n\nHorizontal by default (1px tall, full width); set the `vertical` attribute\nfor a 1px-wide vertical rule (give it a height, or let a flex parent\nstretch it).\n\nContainers may restyle it via custom properties:\n- `--vf-separator-color` — line color (default `var(--vf-black, #000)`).\n- `--vf-separator-style` — line style, e.g. `dotted` (default `solid`).\n  `vf-menu` sets these so slotted separators render as the classic dimmed\n  dotted menu rule (see Menus.png).",
+          "description": "`<vf-separator>` — a 1px System 7 rule.\n\nHorizontal by default (1px tall, full width); set the `vertical` attribute\nfor a 1px-wide vertical rule (give it a height, or let a flex parent\nstretch it).\n\nContainers may restyle it via custom properties:\n- `--vf-separator-color` — line color (default `var(--vf-black, #000)`).\n- `--vf-separator-style` — `solid` (the default) or `dotted`, one system px\n  on and one off. `vf-menu` sets these so slotted separators render as the\n  classic dimmed dotted menu rule (see Menus.png).",
           "name": "VfSeparator",
           "cssProperties": [
             {
@@ -15316,7 +15316,7 @@
               "name": "--vf-separator-color"
             },
             {
-              "description": "`vf-separator` rule style — `vf-menu` sets `dotted` (see `Menus.png`)",
+              "description": "`vf-separator` rule style: `solid` or `dotted` — `vf-menu` sets `dotted` (see `Menus.png`)",
               "name": "--vf-separator-style",
               "default": "solid"
             }

package/dist/components/vf-checkbox.d.ts

@@ -2,10 +2,11 @@ import { type PropertyValues } from 'lit';
 import { VfFormControl } from '../form-control.js';
 declare const VfCheckbox_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & (abstract new (...args: any[]) => import("../toggle-control.js").VfToggleControlInterface) & typeof VfFormControl;
 /**
- * The classic System 7 checkbox: a 13×13 white square with a 1px black
+ * The classic System 7 checkbox: a 12×12 white square with a 1px black
  * border whose checked state is the corner-to-corner ✕ glyph — the pixel-exact
- * cross traced from the Classic Macintosh UI Kit sprite. The border "thickens"
- * while pressed, exactly like the original control.
+ * cross traced from the Classic Macintosh UI Kit sprite, filling the 10×10
+ * interior. The border "thickens" while pressed, exactly like the original
+ * control.
  *
  * Form-associated: submits `value` under `name` when checked (like a native
  * checkbox) and restores its initial checked state on form reset. Toggles on
@@ -13,8 +14,8 @@ declare const VfCheckbox_base: (new (...args: any[]) => import("../position.js")
  *
  * @slot - The label, rendered to the right of the box with a 6px gap.
  *   Left empty, the label and its gap collapse: the control is the bare
- *   13×13 box.
- * @csspart box - The 13×13 checkbox square.
+ *   12×12 box.
+ * @csspart box - The 12×12 checkbox square.
  * @csspart label - The label wrapper around the slot.
  * @fires vf-change - When toggled by user interaction. `detail: { checked: boolean }`.
  * @fires input - Native event, dispatched from the host per user toggle (with

package/dist/components/vf-checkbox.js

@@ -4,33 +4,34 @@ import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as i } from "../position.js";
 import { vfDisplay as a } from "../styles/recipes/display-face.js";
 import { vfBase as o } from "../styles/recipes/host.js";
-import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
-import { vfToggle as c } from "../styles/recipes/toggle.js";
-import { CHECKBOX_X as l, glyphSvg as u } from "../glyphs.js";
-import { VfFormControl as d } from "../form-control.js";
-import { VfToggleControl as f } from "../toggle-control.js";
-import { css as p, html as m } from "lit";
-import { property as h, state as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+import { vfStrokeDecls as s, vfStrokeInset as c, vfStrokeShadow as l } from "../styles/recipes/stroke.js";
+import { vfFocusUnderline as u } from "../styles/recipes/focus.js";
+import { vfToggle as d } from "../styles/recipes/toggle.js";
+import { CHECKBOX_X as f, glyphSvg as p } from "../glyphs.js";
+import { VfFormControl as m } from "../form-control.js";
+import { VfToggleControl as h } from "../toggle-control.js";
+import { css as g, html as _ } from "lit";
+import { property as v, state as y } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
 //#region src/components/vf-checkbox.ts
-var v = class extends i(f(d)) {
+var x = class extends i(h(m)) {
 	static {
 		this.styles = [
 			o,
 			a,
-			c,
-			p`
+			d,
+			g`
       /* Keyboard focus underlines the box itself — not the label, and not a
-         ring around either (see vfFocusUnderline). Both adjustments below are
-         the 1px border: an absolutely positioned pseudo sizes to the PADDING
-         box, which the border sits outside of. So the rule grows 1px each side
-         to span the whole well, and its offset counts the border before the
-         blank row and the rule itself: −(1 + 1 + 1). */
+         ring around either (see vfFocusUnderline). An absolutely positioned
+         pseudo sizes to the padding box, which runs under the box's stroke,
+         so the rule spans the whole well and −2 puts it one blank row under
+         it. Under forced colors the stroke is a border and the padding box
+         sits inside it, so the insets grow by it there. */
       :host(:focus-visible) .box::after {
-        --vf-focus-underline-offset: -3px;
-        ${s}
-        left: calc(var(--vf-scale, 1) * -1px);
-        right: calc(var(--vf-scale, 1) * -1px);
+        ${u}
+        bottom: ${c(-3)};
+        left: ${c(-1)};
+        right: ${c(-1)};
       }
       .box {
         position: relative;
@@ -38,28 +39,31 @@ var v = class extends i(f(d)) {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: calc(var(--vf-scale, 1) * 13px);
-        height: calc(var(--vf-scale, 1) * 13px);
+        width: calc(var(--vf-scale, 1) * 12px);
+        height: calc(var(--vf-scale, 1) * 12px);
         background: var(--vf-white, #fff);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
         color: var(--vf-black, #000);
+        ${s()}
       }
-      /* Pressed: border thickens to 2px (classic press feedback). */
+      /* Pressed: the line thickens to 2px (classic press feedback), inward,
+         over the padding the 1px stroke leaves the glyph. */
       :host(:active) .box:not(.dim) {
-        box-shadow: inset 0 0 0 calc(var(--vf-scale, 1) * 1px) var(--vf-black, #000);
+        box-shadow: ${l(2)};
       }
       /* Forced colors never paints box-shadow, so the press feedback above
          goes silent. The same thickening as a real border-width change: with
-         box-sizing: border-box the 13×13 box holds and the extra pixel grows
-         inward, exactly where the inset shadow painted. */
+         box-sizing: border-box the 12×12 box holds and the extra pixel grows
+         inward, exactly where the inset shadow paints. */
       @media (forced-colors: active) {
         :host(:active) .box:not(.dim) {
           border-width: calc(var(--vf-scale, 1) * 2px);
         }
       }
-      /* Native 12×12 sprite — centered in the 13×13 box; the glyph's own 1px
-         transparent margin lets it overhang onto the border harmlessly. Scales
-         with the box; crispEdges keeps it whole-device-pixel at any dpr. */
+      /* Native 12×12 sprite, the box's own size: centered on the 10×10
+         interior it covers the box exactly, its 1px transparent margin over
+         the frame, so the ✕ fills the interior corner to corner on whole
+         system px — the sprite's own registration. Scales with the box;
+         crispEdges keeps it whole-device-pixel at any dpr. */
       .check {
         flex: none;
         width: calc(var(--vf-scale, 1) * 12px);
@@ -93,9 +97,9 @@ var v = class extends i(f(d)) {
 	}
 	render() {
 		let e = this.isDisabled;
-		return m`
+		return _`
       <span
-        class=${_({
+        class=${b({
 			box: !0,
 			dim: e,
 			"vf-snap": !0
@@ -103,10 +107,10 @@ var v = class extends i(f(d)) {
         part="box"
         aria-hidden="true"
       >
-        ${u(l, "check")}
+        ${p(f, "check")}
       </span>
       <span
-        class=${_({
+        class=${b({
 			label: !0,
 			dim: e,
 			empty: !this._hasLabel,
@@ -135,9 +139,9 @@ var v = class extends i(f(d)) {
 		this.checked = !this.checked, this.focus(), e(this, "vf-change", { checked: this.checked }), t(this, "input"), t(this, "change");
 	}
 };
-r([h({
+r([v({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), r([h({ reflect: !0 })], v.prototype, "name", void 0), r([h()], v.prototype, "value", void 0), r([g()], v.prototype, "_hasLabel", void 0), v = r([n("vf-checkbox")], v);
+})], x.prototype, "checked", void 0), r([v({ reflect: !0 })], x.prototype, "name", void 0), r([v()], x.prototype, "value", void 0), r([y()], x.prototype, "_hasLabel", void 0), x = r([n("vf-checkbox")], x);
 //#endregion
-export { v as VfCheckbox };
+export { x as VfCheckbox };

package/dist/components/vf-container.d.ts

@@ -47,11 +47,10 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  *
  * **`rule` draws the 1px rule on the edges it names** — `rule="bottom"` is
  * the menu bar's anatomy (the box's rows over one row of ink), `rule="top"`
- * a status strip's, all four a framed box. The rule is the box's own border
- * ({@link vfRule}), inside the declared size, so a 24px `rule="bottom"`
- * strip is 23 rows of box over the line; content, `fill-width` children and
- * placed children begin inside it, as a rectangle's interior begins inside
- * FrameRect's line.
+ * a status strip's, all four a framed box. The rule is drawn inside the
+ * declared size ({@link vfRule}), so a 24px `rule="bottom"` strip is 23 rows
+ * of box over the line; content, `fill-width` children and placed children
+ * begin inside it, as a rectangle's interior begins inside FrameRect's line.
  *
  * **`pattern` fills the box with a 1-bit pattern**: one of the 38 standard
  * MacPaint patterns by name (`pattern="bricks"`, `pattern="gray-50"` —
@@ -66,10 +65,10 @@ declare const VfContainer_base: (new (...args: any[]) => import("../size.js").Vf
  * **It holds its box on the device-pixel grid** — with a `GridSnapController`.
  * A container's box is itself the consumer's coordinate system, including for
  * non-`vf` content that cannot correct itself, so the box is the thing to
- * hold on the grid. The shadow box below owns the `position: relative` anchor
- * and the `vf-snap` class together, so the correction
- * moves the whole coordinate system — everything placed against it rides
- * along instead of being re-corrected child by child. (`vf-stack` shipped
+ * hold on the grid. The correction lands on the shadow box below, and the
+ * coordinate system sits inside it, so the correction moves the whole
+ * coordinate system — everything placed against it rides along instead of
+ * being re-corrected child by child. (`vf-stack` shipped
  * without a controller on the theory that slotted `vf-*` children correct
  * their own origins; this component is where that theory's gap — consumer
  * content — became visible, and the stack has since adopted the same
@@ -106,10 +105,9 @@ export declare class VfContainer extends VfContainer_base {
     private _pattern;
     /**
      * The 1px rule on the box's edges: edge names separated by spaces —
-     * `"bottom"`, `"top bottom"`, up to all four in any order. Drawn as the
-     * box's own border inside the declared size, in `--vf-black`, scaled with
-     * the display like every kit frame's border; content and placed children
-     * begin inside it.
+     * `"bottom"`, `"top bottom"`, up to all four in any order. Drawn inside
+     * the declared size, in `--vf-black`, scaled with the display like every
+     * kit frame; content and placed children begin inside it.
      * Unset, no rule; a value naming anything but an edge draws none and
      * warns once.
      */

package/dist/components/vf-container.js

@@ -44,21 +44,33 @@ var v = class extends f(r(p)) {
         text-align: inherit;
       }
 
-      /* The coordinate system, as one shadow box coinciding with the host box.
-         vf-snap (vfBase) gives it position: relative plus the controller's
-         --vf-snap-dx/-dy offset — so it is BOTH the positioning anchor for
-         children placed with top/left (src/position.ts) AND the element the
-         grid-snap correction lands on. One element owning both is the point:
-         corrected, it takes every placed child with it, kit or not. */
+      /* The painted box, coinciding with the host box: the pattern, the rule
+         and the grid-snap correction (vf-snap, vfBase — position: relative
+         plus the controller's --vf-snap-dx/-dy offset). The coordinate system
+         rides inside it (the slot, below), so the correction takes every
+         placed child with it, kit or not. */
       .box {
-        /* flow-root: contain slotted margins, so the box's top edge — the
-           origin placed children measure from — stays glued to the host's
-           corner instead of being pushed down by a first child's margin
-           collapsing through. */
-        display: flow-root;
         /* Coincide with a declared height (100% of a definite host height;
            against an undeclared one it computes to auto and wraps content),
-           so slotted percentage fills resolve against the stated box. */
+           so the slot inside can take the stated box. */
+        height: 100%;
+        /* The pattern starts inside the rule, as it did when the rule was a
+           border. */
+        background-origin: content-box;
+      }
+      /* The coordinate system: the slot, as a box inside the rule — the
+         rule's row is the painted box's padding (vfRule) — so content,
+         percentage fills and children placed with top/left (src/position.ts)
+         all begin inside it. */
+      .box > slot {
+        position: relative;
+        /* flow-root: contain slotted margins, so the top edge — the origin
+           placed children measure from — stays glued to the box's corner
+           instead of being pushed down by a first child's margin collapsing
+           through. */
+        display: flow-root;
+        /* The stated box less its rules, so slotted percentage fills resolve
+           against it; auto against an undeclared height. */
         height: 100%;
       }
 

package/dist/components/vf-fieldset.js

@@ -4,40 +4,48 @@ import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js
 import { VfPositioned as r } from "../position.js";
 import { vfDisplayDecls as i } from "../styles/recipes/display-face.js";
 import { vfBase as a } from "../styles/recipes/host.js";
-import { GridSnapController as o } from "../grid-snap.js";
-import { LitElement as s, css as c, html as l, nothing as u } from "lit";
-import { property as d, state as f } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
+import { vfStrokeDecls as o, vfStrokeInset as s } from "../styles/recipes/stroke.js";
+import { GridSnapController as c } from "../grid-snap.js";
+import { LitElement as l, css as u, html as d, nothing as f } from "lit";
+import { property as p, state as m } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
 //#region src/components/vf-fieldset.ts
-var m = class extends r(s) {
+var g = class extends r(l) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new o(this), this.legend = "", this._hasSlottedLegend = !1;
+		super(...e), this.scale = new t(this), this.gridSnap = new c(this), this.legend = "", this._hasSlottedLegend = !1;
 	}
 	static {
-		this.styles = [a, c`
+		this.styles = [a, u`
       :host {
         display: block;
       }
       .fieldset {
         position: relative;
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+        margin-top: calc(var(--vf-scale, 1) * 8px);
+        ${o()}
+      }
+      /* The rule is a stroke, so the box's own padding box runs under it: the
+         slot is the box inside it, where the content sits 14/12/10px in and
+         children placed with top/left measure from the rule's inner edge. */
+      .fieldset > slot {
+        display: block;
+        position: relative;
         padding: calc(var(--vf-scale, 1) * 14px) calc(var(--vf-scale, 1) * 12px)
           calc(var(--vf-scale, 1) * 10px);
-        margin-top: calc(var(--vf-scale, 1) * 8px);
       }
       .legend {
         /* Chicago-style legend (chrome); grouped content keeps the body face. */
         ${i}
         position: absolute;
-        /* Whole system px like every other length here. Authored as -0.7em
-           this was 11.2px against the 16px display face — off the device grid
-           at every scale, and it took a slotted legend with it (verify:grid).
-           11 keeps the legend straddling the border, a fifth of a system px
-           lower. */
-        top: calc(var(--vf-scale, 1) * -11px);
-        left: calc(var(--vf-scale, 1) * 8px);
+        /* Whole system px like every other length here, measured from the
+           rule's inner edge. Authored as -0.7em this was 11.2px against the
+           16px display face — off the device grid at every scale, and it took
+           a slotted legend with it (verify:grid). 11 keeps the legend
+           straddling the rule, a fifth of a system px lower. */
+        top: ${s(-11)};
+        left: ${s(8)};
         padding: 0 calc(var(--vf-scale, 1) * 5px);
-        /* Punches through the border, matching the surface behind it. */
+        /* Punches through the rule, matching the surface behind it. */
         background: var(--vf-surface, var(--vf-white, #fff));
         white-space: nowrap;
       }
@@ -48,16 +56,16 @@ var m = class extends r(s) {
 	}
 	render() {
 		let e = !this.legend && !this._hasSlottedLegend;
-		return l`
+		return d`
       <div
         class="fieldset vf-snap"
         part="fieldset"
         role="group"
-        aria-labelledby=${e ? u : "legend"}
+        aria-labelledby=${e ? f : "legend"}
       >
         <span
           id="legend"
-          class=${p({
+          class=${h({
 			legend: !0,
 			empty: e
 		})}
@@ -76,6 +84,6 @@ var m = class extends r(s) {
 		this._hasSlottedLegend = t.assignedNodes({ flatten: !0 }).length > 0;
 	}
 };
-n([d()], m.prototype, "legend", void 0), n([f()], m.prototype, "_hasSlottedLegend", void 0), m = n([e("vf-fieldset")], m);
+n([p()], g.prototype, "legend", void 0), n([m()], g.prototype, "_hasSlottedLegend", void 0), g = n([e("vf-fieldset")], g);
 //#endregion
-export { m as VfFieldset };
+export { g as VfFieldset };