vintage-frames 0.2.1 → 0.4.0

package/custom-elements.json

@@ -2145,7 +2145,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the 50%-dither gray desktop pattern and manages the stacking order\nand `active` state of slotted `vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, at pointer-gesture\nends), so tabbing walks the stack the way the eye does and Shift+Tab is\nits exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its top corners\nwith the classic corner mask.\n\nCustom properties:\n- `--vf-desktop-pattern` — the dither's tile art (default a 1-bit 50%\n  checker, opaque black-on-white on a 30-system-px tile). Overriding it\n  renders the token as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern layer (default\n  `#808080`). The default tile is opaque, so this only becomes visible when\n  `--vf-desktop-pattern` is overridden with a tile that has transparent\n  cells (or with `none`).",
+          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the 50%-dither gray desktop pattern and manages the stacking order\nand `active` state of slotted `vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, at pointer-gesture\nends), so tabbing walks the stack the way the eye does and Shift+Tab is\nits exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\n\n**Deactivation.** On a real System 7 machine clicking the desktop clicked\nthe *Finder* — the frontmost application's windows lost their stripes.\nclearActive is that gesture's handler: it clears `active` from\nthe whole document tier, and **zero active windows is a legal state**,\nheld until a press or keyboard focus re-enters a document window (or a\nnew one is slotted, which activates it — opening a window brings its\napplication forward). The desktop never takes this decision itself: its\nfurniture is slotted light DOM (an icon layer, say), so only the page\nknows which of its children — or which presses on the bare dither — mean\n\"the Finder\", and it routes those through `clearActive()`. Left alone,\nthe classic always-one-active behavior is unchanged. activeWindow\nreads the current holder, and every change of holder — including to and\nfrom none — fires `vf-activate`.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its top corners\nwith the classic corner mask.\n\nCustom properties:\n- `--vf-desktop-pattern` — the dither's tile art (default a 1-bit 50%\n  checker, opaque black-on-white on a 30-system-px tile). Overriding it\n  renders the token as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern layer (default\n  `#808080`). The default tile is opaque, so this only becomes visible when\n  `--vf-desktop-pattern` is overridden with a tile that has transparent\n  cells (or with `none`).",
           "name": "VfDesktop",
           "cssProperties": [
             {
@@ -2278,6 +2278,26 @@
               "default": "0",
               "description": "Monotonic z-index counter for window stacking."
             },
+            {
+              "kind": "field",
+              "name": "_activeWindow",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The active document-tier window, or null when the tier is deactivated\n(or empty). The single change-tracked truth behind activeWindow\nand the `vf-activate` event — written only by _setActive."
+            },
+            {
+              "kind": "field",
+              "name": "_deactivated",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the document tier was *deliberately* deactivated (a\nclearActive call) — as opposed to `_activeWindow` being null\nbecause nothing has activated yet. Slot changes preserve a deliberate\ndeactivation instead of promoting a survivor; a newly slotted document\nwindow still activates (opening a window brings its application forward)."
+            },
             {
               "kind": "field",
               "name": "_awaitingUpgrade",
@@ -2353,6 +2373,25 @@
               ],
               "description": "Bring a slotted window to the front of its tier. A document-tier window\nalso becomes the single active window (clearing `active` on the other\ndocument windows); a utility window restacks within the floating tier\nand leaves every `active` state alone.\n\nThe light-DOM order of the slotted windows follows (_syncDomOrder):\nvisual stacking and sequential focus order come from independent channels\n(z-index vs DOM position), and letting them drift apart is how a desktop\ntabs front-to-back one way and back-to-front the other, with widgets\nreachable only travelling backwards. Deferred to the end of any in-flight\npointer gesture — moving a node clears the pointer capture a title-bar\ndrag or grow-box resize holds on it, and a background window must stay\ndraggable in the same gesture that raises it."
             },
+            {
+              "kind": "field",
+              "name": "activeWindow",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "description": "The active document-tier window, or null while the tier is deactivated\n(or has no windows). Utility windows are never the holder.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "clearActive",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Deactivate the whole document tier — clear `active` from every document\nwindow, leaving none the holder. Pages route \"the user clicked the\nFinder\" presses — on the bare dither, on their own desktop furniture\n(an icon layer) — through here; the deactivated state holds until a\ndocument window is pressed, focused, brought to front, or newly\nslotted."
+            },
             {
               "kind": "method",
               "name": "_restack",
@@ -2474,11 +2513,11 @@
                 {
                   "name": "win",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "HTMLElement | null"
                   }
                 }
               ],
-              "description": "Set `active` on `win` only, clearing it on every other *document-tier*\nwindow. Utility windows stand outside the invariant: a palette keeps\nwhatever `active` state it has (true by default, so its dither and\nwidgets stay drawn while document windows trade the highlight)."
+              "description": "Set `active` on `win` only, clearing it on every other *document-tier*\nwindow (`null` clears the whole tier — the deactivated state). Utility\nwindows stand outside the invariant: a palette keeps whatever `active`\nstate it has (true by default, so its dither and widgets stay drawn\nwhile document windows trade the highlight). The one write site of\n_activeWindow, so `vf-activate` fires exactly on a change of\nholder — re-asserting the current holder is silent."
             },
             {
               "kind": "method",
@@ -2573,6 +2612,12 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "The active document-tier window changed. Detail `{ window: HTMLElement | null }` — the new holder, or `null` when the document tier deactivated (a {@link clearActive} call, or the active window leaving the DOM with none behind it). Fired once per change of holder, never for a re-assertion of the same one.",
+              "name": "vf-activate"
+            }
+          ],
           "attributes": [
             {
               "name": "width",
@@ -3881,7 +3926,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-icon>` — a Finder icon: pixel art in a reserved cell with its name on a\nplate below, selectable, movable and renameable in place.\n\nIt is the one composite in the kit whose parts already existed separately —\n`vf-img` draws the art, `vf-list-item` inverts on selection, `vf-window`\ndrags — and the reason to have it anyway is that the *icon* is the unit the\nFinder actually manipulates. A picture and a caption that select together,\nmove together and rename together is a control, not a layout.\n\n### The art arrives by slot\n\nTwo slots, one per resource size — `large` is the 32×32 `ICN#` and `small`\nthe 16×16 `ics#` — each holding a `vf-img` around the consumer's own `<img>`:\n\n```html\n<vf-icon label=\"Macintosh HD\" selectable movable editable>\n  <vf-img slot=\"large\"><img src=\"hd-32.png\" alt=\"\"></vf-img>\n  <vf-img slot=\"small\"><img src=\"hd-16.png\" alt=\"\"></vf-img>\n</vf-icon>\n```\n\nSlots rather than `src` properties, for the reason `vf-img` exists at all:\nthe kit ships no raster files and never builds an `<img>` on a consumer's\nbehalf, so the graphic stays a real element in the light DOM with its own\n`alt`, `srcset`, loading behavior and asset URLs. A `src` string can express\nnone of that, and it could not hold an inline `<svg>` or a `<canvas>` either.\n`vf-list-item`'s `icon` slot makes the same trade.\n\nThe cost is that both files fetch even though one paints — pay it with two\ndata URIs, or slot only the size that view uses.\n\n### The cell is reserved, the art is registered in it\n\n`size` picks which slot paints *and* the cell it paints in: 32×32 or 16×16,\nheld whether or not there is art for it. A folder is 32×20 of ink and a\ndocument 25×32, and a row of them keeps one baseline only because the cell —\nnot the ink — is the unit, which is what an icon resource always was.\n\n### Everything centered lands on a whole pixel, by parity\n\nThe frame centers two things over one axis — the art cell and the name — and\na centered child sits at `(box − child) / 2`. That is a whole number exactly\nwhen the box and the child have the **same parity**. Half a system pixel is\nwhat fringes 1-bit art: the glyph stems smear across two device columns and\ngo gray, while the plate behind them stays sharp, because backgrounds are\npixel-snapped by the compositor and glyphs are not. A crisp plate under a\ngrey name is the signature of exactly this.\n\nSo the component makes the parities agree instead of correcting afterwards.\nThe cell is 32 or 16, and #measurePlate sizes the name plate to a\nwhole **even** number of system px — measured from the text, rounded up. Both\nchildren are then even, and so is every offset, at every display density and\nwhether or not a `width` is declared. Nothing is snapped, nothing leans on\nthe rasterizer, and `verify:icon` asserts both the geometry and that a field\nof names renders without a single gray pixel — with the kit's normal\nantialiasing left on, since a run on whole pixels gives it nothing to smooth.\n\nYour side of it is one rule: **a declared `width` must be even**, since the\ncomponent cannot round a number you chose. Supply art at the cell size too —\nwhich \"one image pixel is one system pixel\" already implies — because art\ndiffering from its cell by an odd number centers the same way.\n\n### Selection inverts, because the art is a 1-bit mask\n\nA System 7 icon is black ink and opaque white on a transparent surround —\nprecisely an image plus its mask — so inverting it flips ink and fill and\nleaves the surround alone, which is the whole of the classic selected\nappearance. `filter: invert(1)` reproduces it exactly for 1-bit art. Color\nart inverts too, into a photographic negative rather than the darkening\nSystem 7 gave it; that is the case to revisit if the kit ever grows a\nselected-state treatment of its own. The label plate inverts to the\n`--vf-highlight` pair, sharing one selection color with `vf-list-item`.\n\n### Open is derived, not shipped\n\nWith `open`, the art redraws as the Finder's open ghost: the outline held\nin solid black, the interior re-filled with the kit's loose 25% dither (the\nscrollbar trough's lattice), the transparent surround untouched. There is\nno second raster and no second fetch — the same alpha channel that makes\nselection an inversion makes the ghost derivable, and `src/open-art.ts`\nderives it from the slotted art by canvas compositing alone. No pixels are\never read back, so a cross-origin image that taints its canvas still works:\ntaint forbids reading, not drawing or displaying.\n\nThe ghost keeps the shape selection expects — ink and opaque white on a\ntransparent surround — so a selected open icon inverts exactly as a closed\none does, with no second treatment. The slot stays in the tree while the\nghost paints, hidden (it is where the art loads, and re-loads, from), and\nart the pipeline cannot draw — nothing slotted yet, a failed load, an\ninline `<svg>` — keeps rendering as itself rather than vanishing behind a\nstate it cannot show.\n\n### `movable`, not `draggable`\n\n`draggable` is a global HTML attribute *and* an `HTMLElement` accessor, so\ndeclaring it would both shadow a platform member and hand the element to the\nbrowser's own drag-and-drop machinery. This is the `align` trap from\n`vf-stack` in a second costume — `align`, `hidden`, `dir`, `draggable` and\n`title` all carry behavior a custom element never asked for. The kit already\nspells this parameter `movable` on `vf-window`, so the icon does too, and it\nmoves the same way: `DragController` tracks the gesture and\n`PlacementController` writes the result into `left`/`top` in whole system px,\nthe art's own unit — the same pair markup places an icon with, so a moved\nicon is still where it was dropped after a zoom.\n\nDragging is a pointer gesture with no keyboard equivalent, which is the kind\nof gap the kit closes rather than inherits (SPEC §1): a focused movable icon\nalso moves under the arrow keys, one system px at a time and eight with\nShift. Focus is what `selectable` grants, so the keyboard half of `movable`\nand `editable` presupposes it — see the role section below.\n\nOpening gets the same treatment. The double-click is the pointer gesture,\nand its keyboard route is ⌘O / ⌘↓ — the System 7 Open shortcuts, with Ctrl\nstanding in for ⌘ off the Mac. Return is deliberately not one of them: the\nFinder's Return renamed, never opened, so on an editable icon it starts the\nedit and on a non-editable one it does nothing at all.\n\n### The name and the art are one target, and the second click decides\n\nA double-click opens the icon *wherever it lands* — the name is as much the\nicon as the picture is, and the Finder never made you aim at the 32 pixels of\nart. But the name is also where a single click renames, so the two gestures\nbegin with the same press and only the second one tells them apart.\n\nSo the rename waits for it. A press on the plate of an already-selected icon\narms the field rather than opening it, and the next press inside\nRENAME_DELAY_MS calls it off — leaving the double-click to open, with\nno rename box flashing up behind it. Nothing needs to *undo* an edit that\nbegan: the press that starts one and the press that opens are the same\npress, so the only thing that can be got right is not committing early.\n\nThe window is generous in the one direction that is cheap. Reading a lone\nclick as a pair costs a wait before the box appears; reading a pair as a lone\nclick renames when the user asked to open. The same reasoning covers a press\nthat turns into a drag, a press elsewhere, and any key — each calls the\npending rename off, because none of them is the click it is waiting for.\n\n### An icon alone is a picture; an icon in a field is an option\n\n`role=\"option\"` is only meaningful inside a `listbox` that owns it. Written\nunconditionally it is not merely untidy — the browser *drops* it, and\n`aria-selected` with it, so a `selectable` icon announced as a bare generic\nand its selection state reached assistive tech nowhere at all.\n\nSo the role follows the container. Owned, the icon is an `option` that names\nitself from its plate and publishes `aria-selected`. Unowned, it degrades to\n`role=\"img\"` with a name — the same vocabulary the derived open ghost uses,\nand true of what it is. Deliberately not `button`: that would promise Enter\nand Space activate, and here Return *renames* while the open route is ⌘O / ⌘↓.\n\nDeclaring the owner is one attribute on whatever already holds the field, and\nit is what buys the selection state back:\n\n```html\n<div role=\"listbox\" aria-label=\"Desktop\" aria-multiselectable=\"true\">\n  <vf-icon label=\"Macintosh HD\" selectable movable editable>…</vf-icon>\n  <vf-icon label=\"Trash\" selectable movable editable>…</vf-icon>\n</div>\n```\n\nA `vf-desktop` cannot be that container itself: it also holds windows and a\nmenu bar, and a non-`option` child of a listbox is invalid the same way the\norphaned option was. The plain wrapper above is layout-neutral — placed icons\nanchor to the nearest *positioned* ancestor, which is still the desktop's\nraster. One divergence from the APG listbox is deliberate: its options share\na single roving tab stop, while these stay one stop each, the way a Finder\nicon is reached on its own.\n\n**`selectable` is what makes an icon focusable**, and `movable`/`editable`\npresuppose it. That is the Finder's own model — you cannot move or rename\nwhat you have not selected — and the pointer path already assumed it: the\nrename opens on a press on the plate of an *already-selected* icon. A\n`movable`-only icon is a picture you can drag, not a widget.\n\n### The label is a property, because it is editable\n\nThe caption is `label` rather than slotted content: renaming means the\ncomponent owns the string and hands it back on `vf-change`, and it cannot own\ntext that lives in the consumer's DOM. An empty `label` draws no plate at\nall — that *is* the \"no label\" parameter, in preference to a second attribute\nthat could disagree with it. `editable` then lets a click on the plate of an\nalready-selected icon open the rename box a moment later, as the Finder's\ndoes (see above), with Return committing, Escape reverting, and the plate\nwidening as you type.\n\n### A name is never abbreviated, and never folded\n\nThere is no ellipsis, no clipping and no wrapping: one line, always. System 7\nsolved the long-name problem at the *other* end — HFS capped a filename at 31\ncharacters — so the Finder could afford to always draw the name in full, and\ndid. A name wider than its cell simply overflows it, centered, the way a name\nwider than a 32-pixel icon always did.\n\nStaying on one line is also what keeps the name on the grid: a single run has\na single measured width, so the even-plate rule above is one number rather\nthan one per line, each with its own parity. `width` is therefore the cell —\nthe grid pitch — not a bound on the name.\n\n`maxlength` (31) bounds the rename field rather than the `label` property:\nthe name belongs to the consumer's model, and truncating one handed to us\nwould lose data.\n\nThe box hugs its text while you type it, not only once you are done, which is\nwhat keeps the name from moving when the edit commits: the plate is the same\nwidth either side of it, so the glyphs stay exactly where they were.\n\nA file also has to be called *something*, so a rename committed empty — or\nas nothing but spaces — is refused rather than applied, and the previous name\ncomes back, which is what System 7 did. An empty `label` is still a perfectly\ngood state to *start* in, though: a freshly made icon has no name until it is\ngiven one. Such an icon draws no plate but stays selectable, focusable and\nrenameable — Return opens a field, and an edit with nothing in it yet is the\none time the box stops hugging and reserves a cell's width, since a field you\ncannot see is one you cannot type into.",
+          "description": "`<vf-icon>` — a Finder icon: pixel art in a reserved cell with its name on a\nplate below, selectable, movable and renameable in place.\n\nIt is the one composite in the kit whose parts already existed separately —\n`vf-img` draws the art, `vf-list-item` inverts on selection, `vf-window`\ndrags — and the reason to have it anyway is that the *icon* is the unit the\nFinder actually manipulates. A picture and a caption that select together,\nmove together and rename together is a control, not a layout.\n\n### The art arrives by slot\n\nTwo slots, one per resource size — `large` is the 32×32 `ICN#` and `small`\nthe 16×16 `ics#` — each holding a `vf-img` around the consumer's own `<img>`:\n\n```html\n<vf-icon label=\"Macintosh HD\" selectable movable editable>\n  <vf-img slot=\"large\"><img src=\"hd-32.png\" alt=\"\"></vf-img>\n  <vf-img slot=\"small\"><img src=\"hd-16.png\" alt=\"\"></vf-img>\n</vf-icon>\n```\n\nSlots rather than `src` properties, for the reason `vf-img` exists at all:\nthe kit ships no raster files and never builds an `<img>` on a consumer's\nbehalf, so the graphic stays a real element in the light DOM with its own\n`alt`, `srcset`, loading behavior and asset URLs. A `src` string can express\nnone of that, and it could not hold an inline `<svg>` or a `<canvas>` either.\n`vf-list-item`'s `icon` slot makes the same trade.\n\nThe cost is that both files fetch even though one paints — pay it with two\ndata URIs, or slot only the size that view uses.\n\n### The cell is reserved, the art is registered in it\n\n`size` picks which slot paints *and* the cell it paints in: 32×32 or 16×16,\nheld whether or not there is art for it. A folder is 32×20 of ink and a\ndocument 25×32, and a row of them keeps one baseline only because the cell —\nnot the ink — is the unit, which is what an icon resource always was.\n\n### Everything centered lands on a whole pixel, by parity\n\nThe frame centers two things over one axis — the art cell and the name — and\na centered child sits at `(box − child) / 2`. That is a whole number exactly\nwhen the box and the child have the **same parity**. Half a system pixel is\nwhat fringes 1-bit art: the glyph stems smear across two device columns and\ngo gray, while the plate behind them stays sharp, because backgrounds are\npixel-snapped by the compositor and glyphs are not. A crisp plate under a\ngrey name is the signature of exactly this.\n\nSo the component makes the parities agree instead of correcting afterwards.\nThe cell is 32 or 16, and #measurePlate sizes the name plate to a\nwhole **even** number of system px — measured from the text, rounded up. Both\nchildren are then even, and so is every offset, at every display density and\nwhether or not a `width` is declared. Nothing is snapped, nothing leans on\nthe rasterizer, and `verify:icon` asserts both the geometry and that a field\nof names renders without a single gray pixel — with the kit's normal\nantialiasing left on, since a run on whole pixels gives it nothing to smooth.\n\nYour side of it is one rule: **a declared `width` must be even**, since the\ncomponent cannot round a number you chose. Supply art at the cell size too —\nwhich \"one image pixel is one system pixel\" already implies — because art\ndiffering from its cell by an odd number centers the same way.\n\n### Selection inverts, because the art is a 1-bit mask\n\nA System 7 icon is black ink and opaque white on a transparent surround —\nprecisely an image plus its mask — so inverting it flips ink and fill and\nleaves the surround alone, which is the whole of the classic selected\nappearance. `filter: invert(1)` reproduces it exactly for 1-bit art. Color\nart would invert into a photographic negative, which was never what\nSystem 7 showed: declare `color` and selection **darkens** the art\ninstead — Icon Utilities' ttSelected transform, every color blended\nhalfway toward black (`brightness(0.5)`), whites going gray, the\ntransparent surround still untouched. The declaration is the consumer's\nbecause the component cannot tell color art from a mask by looking at a\nslotted image. It covers whatever the cell shows, the derived open ghost\nincluded, so a color icon has one selected treatment open or closed. The\nlabel plate inverts to the `--vf-highlight` pair either way, sharing one\nselection color with `vf-list-item` — the selected name was inverted\nwhatever the art.\n\n### Open is derived, not shipped\n\nWith `open`, the art redraws as the Finder's open ghost: the outline held\nin solid black, the interior re-filled with the kit's loose 25% dither (the\nscrollbar trough's lattice), the transparent surround untouched. There is\nno second raster and no second fetch — the same alpha channel that makes\nselection an inversion makes the ghost derivable, and `src/open-art.ts`\nderives it from the slotted art by canvas compositing alone. No pixels are\never read back, so a cross-origin image that taints its canvas still works:\ntaint forbids reading, not drawing or displaying.\n\nThe ghost keeps the shape selection expects — ink and opaque white on a\ntransparent surround — so a selected open icon inverts exactly as a closed\none does, with no second treatment. The slot stays in the tree while the\nghost paints, hidden (it is where the art loads, and re-loads, from), and\nart the pipeline cannot draw — nothing slotted yet, a failed load, an\ninline `<svg>` — keeps rendering as itself rather than vanishing behind a\nstate it cannot show.\n\n### `movable`, not `draggable`\n\n`draggable` is a global HTML attribute *and* an `HTMLElement` accessor, so\ndeclaring it would both shadow a platform member and hand the element to the\nbrowser's own drag-and-drop machinery. This is the `align` trap from\n`vf-stack` in a second costume — `align`, `hidden`, `dir`, `draggable` and\n`title` all carry behavior a custom element never asked for. The kit already\nspells this parameter `movable` on `vf-window`, so the icon does too, and it\nmoves the same way: `DragController` tracks the gesture and\n`PlacementController` writes the result into `left`/`top` in whole system px,\nthe art's own unit — the same pair markup places an icon with, so a moved\nicon is still where it was dropped after a zoom.\n\nDragging is a pointer gesture with no keyboard equivalent, which is the kind\nof gap the kit closes rather than inherits (SPEC §1): a focused movable icon\nalso moves under the arrow keys, one system px at a time and eight with\nShift. Focus is what `selectable` grants, so the keyboard half of `movable`\nand `editable` presupposes it — see the role section below.\n\nOpening gets the same treatment. The double-click is the pointer gesture,\nand its keyboard route is ⌘O / ⌘↓ — the System 7 Open shortcuts, with Ctrl\nstanding in for ⌘ off the Mac. Return is deliberately not one of them: the\nFinder's Return renamed, never opened, so on an editable icon it starts the\nedit and on a non-editable one it does nothing at all.\n\n### The name and the art are one target, and the second click decides\n\nA double-click opens the icon *wherever it lands* — the name is as much the\nicon as the picture is, and the Finder never made you aim at the 32 pixels of\nart. But the name is also where a single click renames, so the two gestures\nbegin with the same press and only the second one tells them apart.\n\nSo the rename waits for it. A press on the plate of an already-selected icon\narms the field rather than opening it, and the next press inside\nRENAME_DELAY_MS calls it off — leaving the double-click to open, with\nno rename box flashing up behind it. Nothing needs to *undo* an edit that\nbegan: the press that starts one and the press that opens are the same\npress, so the only thing that can be got right is not committing early.\n\nThe window is generous in the one direction that is cheap. Reading a lone\nclick as a pair costs a wait before the box appears; reading a pair as a lone\nclick renames when the user asked to open. The same reasoning covers a press\nthat turns into a drag, a press elsewhere, and any key — each calls the\npending rename off, because none of them is the click it is waiting for.\n\n### An icon alone is a picture; an icon in a field is an option\n\n`role=\"option\"` is only meaningful inside a `listbox` that owns it. Written\nunconditionally it is not merely untidy — the browser *drops* it, and\n`aria-selected` with it, so a `selectable` icon announced as a bare generic\nand its selection state reached assistive tech nowhere at all.\n\nSo the role follows the container. Owned, the icon is an `option` that names\nitself from its plate and publishes `aria-selected`. Unowned, it degrades to\n`role=\"img\"` with a name — the same vocabulary the derived open ghost uses,\nand true of what it is. Deliberately not `button`: that would promise Enter\nand Space activate, and here Return *renames* while the open route is ⌘O / ⌘↓.\n\nDeclaring the owner is one attribute on whatever already holds the field, and\nit is what buys the selection state back:\n\n```html\n<div role=\"listbox\" aria-label=\"Desktop\" aria-multiselectable=\"true\">\n  <vf-icon label=\"Macintosh HD\" selectable movable editable>…</vf-icon>\n  <vf-icon label=\"Trash\" selectable movable editable>…</vf-icon>\n</div>\n```\n\nA `vf-desktop` cannot be that container itself: it also holds windows and a\nmenu bar, and a non-`option` child of a listbox is invalid the same way the\norphaned option was. The plain wrapper above is layout-neutral — placed icons\nanchor to the nearest *positioned* ancestor, which is still the desktop's\nraster. One divergence from the APG listbox is deliberate: its options share\na single roving tab stop, while these stay one stop each, the way a Finder\nicon is reached on its own.\n\n**`selectable` is what makes an icon focusable**, and `movable`/`editable`\npresuppose it. That is the Finder's own model — you cannot move or rename\nwhat you have not selected — and the pointer path already assumed it: the\nrename opens on a press on the plate of an *already-selected* icon. A\n`movable`-only icon is a picture you can drag, not a widget.\n\n### The label is a property, because it is editable\n\nThe caption is `label` rather than slotted content: renaming means the\ncomponent owns the string and hands it back on `vf-change`, and it cannot own\ntext that lives in the consumer's DOM. An empty `label` draws no plate at\nall — that *is* the \"no label\" parameter, in preference to a second attribute\nthat could disagree with it. `editable` then lets a click on the plate of an\nalready-selected icon open the rename box a moment later, as the Finder's\ndoes (see above), with Return committing, Escape reverting, and the plate\nwidening as you type.\n\n### A name is never abbreviated, and never folded\n\nThere is no ellipsis, no clipping and no wrapping: one line, always. System 7\nsolved the long-name problem at the *other* end — HFS capped a filename at 31\ncharacters — so the Finder could afford to always draw the name in full, and\ndid. A name wider than its cell simply overflows it, centered, the way a name\nwider than a 32-pixel icon always did.\n\nStaying on one line is also what keeps the name on the grid: a single run has\na single measured width, so the even-plate rule above is one number rather\nthan one per line, each with its own parity. `width` is therefore the cell —\nthe grid pitch — not a bound on the name.\n\n`maxlength` (31) bounds the rename field rather than the `label` property:\nthe name belongs to the consumer's model, and truncating one handed to us\nwould lose data.\n\nThe box hugs its text while you type it, not only once you are done, which is\nwhat keeps the name from moving when the edit commits: the plate is the same\nwidth either side of it, so the glyphs stay exactly where they were.\n\nA file also has to be called *something*, so a rename committed empty — or\nas nothing but spaces — is refused rather than applied, and the previous name\ncomes back, which is what System 7 did. An empty `label` is still a perfectly\ngood state to *start* in, though: a freshly made icon has no name until it is\ngiven one. Such an icon draws no plate but stays selectable, focusable and\nrenameable — Return opens a field, and an edit with nothing in it yet is the\none time the box stops hugging and reserves a cell's width, since a field you\ncannot see is one you cannot type into.",
           "name": "VfIcon",
           "cssProperties": [
             {
@@ -3969,6 +4014,17 @@
               "attribute": "selected",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Declares the slotted art a **color icon**, so selection darkens it — the\nttSelected transform, every color blended halfway toward black — instead\nof inverting it into a photographic negative (see the class doc). Yours\nto declare because the component cannot tell color art from a 1-bit mask\nby looking at a slotted image. The label plate inverts either way.",
+              "attribute": "color",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "open",
@@ -4517,6 +4573,15 @@
               "description": "Whether the icon is selected: the art inverts and the plate goes black.",
               "fieldName": "selected"
             },
+            {
+              "name": "color",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Declares the slotted art a **color icon**, so selection darkens it — the\nttSelected transform, every color blended halfway toward black — instead\nof inverting it into a photographic negative (see the class doc). Yours\nto declare because the component cannot tell color art from a 1-bit mask\nby looking at a slotted image. The label plate inverts either way.",
+              "fieldName": "color"
+            },
             {
               "name": "open",
               "type": {
@@ -5951,6 +6016,17 @@
               "attribute": "rounded",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "shortcuts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes every slotted menu's item `shortcut`s live key equivalents — one\ndeclaration for the whole bar, the way MenuKey() answered for every menu\nat once. See `vf-menu.shortcuts` (the per-menu grant) and\n`vf-menu-item.shortcut` for the claim contract. Off by default: key\nequivalents are page-global, and only *the* menu bar should own them.",
+              "attribute": "shortcuts",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_menus",
@@ -6218,6 +6294,15 @@
               "description": "Rounds the bar's top corners the way System 7's were: not a curve of the\nbar itself but the black stair-step mask the compact Mac's ROM painted\nover the CRT's rounded corners, which the menu bar wore by sitting flush\nwith the screen top. Drawn as the traced 5-px staircase in `--vf-black`\nink over the bar's own corners — over any backdrop, as the hardware\nmask was.",
               "fieldName": "rounded"
             },
+            {
+              "name": "shortcuts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes every slotted menu's item `shortcut`s live key equivalents — one\ndeclaration for the whole bar, the way MenuKey() answered for every menu\nat once. See `vf-menu.shortcuts` (the per-menu grant) and\n`vf-menu-item.shortcut` for the claim contract. Off by default: key\nequivalents are page-global, and only *the* menu bar should own them.",
+              "fieldName": "shortcuts"
+            },
             {
               "name": "top",
               "type": {
@@ -6384,7 +6469,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Keyboard shortcut text, e.g. `\"⌘H\"`, drawn left-aligned in the panel's\nshared shortcut column. Display only in the\nvisual sense — the span is `aria-hidden` so the glyphs never concatenate\ninto the item's accessible name (\"Print… place of interest sign P\") —\nwhile the host mirrors it as `aria-keyshortcuts` (\"Meta+H\"), so AT\nannounces it *as* a shortcut. A consumer's own `aria-keyshortcuts` wins.",
+              "description": "Keyboard shortcut, e.g. `\"⌘H\"`, drawn left-aligned in the panel's\nshared shortcut column. The span is `aria-hidden` so the glyphs never\nconcatenate into the item's accessible name (\"Print… place of interest\nsign P\") — the host mirrors it as `aria-keyshortcuts` (\"Meta+H\") instead,\nso AT announces it *as* a shortcut. A consumer's own `aria-keyshortcuts`\nwins.\n\nInside a `vf-menu`/`vf-menu-bar` that declares `shortcuts`, this is a\nLIVE key equivalent, not a legend: a matching keydown anywhere on the\npage activates the item — menu open or not — claiming the stroke with\n`preventDefault()` (see the document keydown handler below for the full\ncontract).",
               "attribute": "shortcut"
             },
             {
@@ -6529,6 +6614,12 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "#onDocKeydown",
+              "privacy": "private",
+              "description": "The MenuKey() half of shortcut: a document-level ear that answers\nthe item's key equivalent from anywhere on the page, menu open or not —\nso File → Save shows ⌘S *and* answers it, with no page-side plumbing.\n\nLive only under a grant: an ancestor `vf-menu` or `vf-menu-bar` declaring\n`shortcuts`. Key equivalents are page-global — the one thing in the kit\nthat is — and a page may hold several menus (a component reference, a\ndialog mock-up) of which only one is *the* menu bar; the grant says which,\nthe way `applyCursor()` is the page's own call. Checked per event, so\ntoggling the grant needs no re-wiring.\n\nContract, in claim order:\n- A `defaultPrevented` stroke is already someone's — a page handler that\n  ran first keeps its key. A match claims with `preventDefault()` (no\n  `stopPropagation`), so with several items contesting one key the first\n  connected wins and later page listeners still observe the claimed event.\n- A disabled item claims nothing: the stroke falls through untouched, so\n  a grayed Undo leaves ⌘Z to the focused field's own native undo.\n- Auto-repeat strokes are claimed but activate only once per press.\n- Activation is the normal path — blink, `vf-menu-select` — plus an\n  internal flash request so a *closed* ancestor menu answers by flashing\n  its bar title, exactly MenuKey's acknowledgment; the panel never opens\n  and focus never moves. An open menu shows the item blink and closes."
+            },
             {
               "kind": "method",
               "name": "activate",
@@ -6636,7 +6727,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Keyboard shortcut text, e.g. `\"⌘H\"`, drawn left-aligned in the panel's\nshared shortcut column. Display only in the\nvisual sense — the span is `aria-hidden` so the glyphs never concatenate\ninto the item's accessible name (\"Print… place of interest sign P\") —\nwhile the host mirrors it as `aria-keyshortcuts` (\"Meta+H\"), so AT\nannounces it *as* a shortcut. A consumer's own `aria-keyshortcuts` wins.",
+              "description": "Keyboard shortcut, e.g. `\"⌘H\"`, drawn left-aligned in the panel's\nshared shortcut column. The span is `aria-hidden` so the glyphs never\nconcatenate into the item's accessible name (\"Print… place of interest\nsign P\") — the host mirrors it as `aria-keyshortcuts` (\"Meta+H\") instead,\nso AT announces it *as* a shortcut. A consumer's own `aria-keyshortcuts`\nwins.\n\nInside a `vf-menu`/`vf-menu-bar` that declares `shortcuts`, this is a\nLIVE key equivalent, not a legend: a matching keydown anywhere on the\npage activates the item — menu open or not — claiming the stroke with\n`preventDefault()` (see the document keydown handler below for the full\ncontract).",
               "fieldName": "shortcut"
             },
             {
@@ -6727,7 +6818,7 @@
           ],
           "cssParts": [
             {
-              "description": "The menu title in the bar (inverts while open).",
+              "description": "The menu title in the bar (inverts while open; flashes when a closed menu's item is activated by its key equivalent).",
               "name": "label"
             },
             {
@@ -6790,6 +6881,17 @@
               "attribute": "open",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "shortcuts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the items' `shortcut`s live key equivalents: a matching keydown\nanywhere on the page activates the item — menu open or not — and a\nclosed menu answers by flashing its bar title, MenuKey's acknowledgment.\nOff by default because key equivalents are page-global and a page may\nhold several menus of which only one is *the* menu bar; on a bar, declare\nit there once for every menu in it. The full claim contract lives on\n`vf-menu-item.shortcut`.",
+              "attribute": "shortcuts",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "barTabIndex",
@@ -6890,6 +6992,41 @@
               "name": "#onCloseRequest",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_flashOn",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "`true` while the key-equivalent flash paints the title inverted."
+            },
+            {
+              "kind": "field",
+              "name": "#flashHandle",
+              "privacy": "private",
+              "type": {
+                "text": "BlinkHandle | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#onFlashRequest",
+              "privacy": "private",
+              "description": "A key equivalent activated one of this menu's items through the closed\npanel: flash the bar title on the item blink's own cadence, so the\nacknowledgment lands where the user can see it — the item's own blink\nruns unseen inside the hidden panel. An open menu skips it: the dropped\npanel already shows the blink, and the title is inverted the whole time."
+            },
+            {
+              "kind": "method",
+              "name": "#cancelFlash",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Stops an in-flight title flash — opening or teardown takes over."
+            },
             {
               "kind": "field",
               "name": "#onDocPointerDown",
@@ -7105,6 +7242,15 @@
               "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": "shortcuts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the items' `shortcut`s live key equivalents: a matching keydown\nanywhere on the page activates the item — menu open or not — and a\nclosed menu answers by flashing its bar title, MenuKey's acknowledgment.\nOff by default because key equivalents are page-global and a page may\nhold several menus of which only one is *the* menu bar; on a bar, declare\nit there once for every menu in it. The full claim contract lives on\n`vf-menu-item.shortcut`.",
+              "fieldName": "shortcuts"
+            },
             {
               "name": "top",
               "type": {
@@ -16733,6 +16879,16 @@
               "description": "the slim `vf-window[variant=\"utility\"]` (windoid) bar — 11px interior + 1px bottom rule, traced from `Windows/utility-window.png`",
               "name": "--vf-titlebar-height-utility",
               "default": "12px"
+            },
+            {
+              "description": "the status strip: 1px rule + 14px interior — the grow box's own height, so the two compose flush",
+              "name": "--vf-status-bar-height",
+              "default": "15px"
+            },
+            {
+              "description": "the body face's native line, which the status strip's text rides (whole-pixel centered in the 14px interior)",
+              "name": "--vf-line-height",
+              "default": "12px"
             }
           ],
           "cssParts": [
@@ -16760,6 +16916,10 @@
               "description": "The content area.",
               "name": "body"
             },
+            {
+              "description": "The bottom status strip (when the `status` slot is populated).",
+              "name": "status-bar"
+            },
             {
               "description": "The resize widget (bottom-right, when `resizable`).",
               "name": "grow-box"
@@ -16773,6 +16933,10 @@
             {
               "description": "Default slot: window body content.",
               "name": ""
+            },
+            {
+              "description": "Optional status-bar content — the classic bottom readout strip (\"40px x 40px\"): a 1px rule over a 15px white band under the body, body-face text on its native line. Takes no space until populated; a `resizable` window's grow box sits flush in its right end.",
+              "name": "status"
             }
           ],
           "members": [
@@ -16872,6 +17036,16 @@
               "attribute": "scrollbars",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_hasStatus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the `status` slot has assigned content (drives the strip)."
+            },
             {
               "kind": "field",
               "name": "scale",
@@ -16998,6 +17172,25 @@
               },
               "description": "Both dimensions are required: a window is a fixed box in both axes, and\neach one left out falls back to a different wrong thing.\n\nAn inline `width`/`height` is the other honest way to declare it — the grow\nbox writes exactly that — so it counts. A stylesheet rule we cannot tell\napart from normal block layout, so it still warns."
             },
+            {
+              "kind": "method",
+              "name": "_onStatusSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "The `.empty` gate: the strip renders only while the slot is populated."
+            },
             {
               "kind": "method",
               "name": "_onCloseClick",
@@ -17134,6 +17327,10 @@
             {
               "description": "Zoom box clicked. Detail `{}`.",
               "name": "vf-zoom"
+            },
+            {
+              "description": "The grow box resized the window. Detail `{ width, height, commit }`, sizes in whole system px: one event per size the drag 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 — only when it changed the size. Fired by the gesture alone: a programmatic `width`/`height` write fires nothing, the way a value set fires no `vf-change`.",
+              "name": "vf-resize"
             }
           ],
           "attributes": [

package/dist/components/vf-button.js

@@ -1,21 +1,21 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t } from "../scale.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfDisplay as i } from "../styles/recipes/display-face.js";
-import { vfBase as a } from "../styles/recipes/host.js";
-import { vfFocusUnderline as o } from "../styles/recipes/focus.js";
-import { GridSnapController as s } from "../grid-snap.js";
-import { BUTTON_FACE as c, BUTTON_FRAME as l, RING_FRAME as u, RING_HOLE as d, steppedRectClip as f, steppedRingClip as p } from "../pixel-frame.js";
-import { deferActivation as m } from "../events.js";
+import { deferActivation as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n } from "../scale.js";
+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 { GridSnapController as c } from "../grid-snap.js";
+import { BUTTON_FACE as l, BUTTON_FRAME as u, RING_FRAME as d, RING_HOLE as f, steppedRectClip as p, steppedRingClip as m } from "../pixel-frame.js";
 import { VfShadowRoleControl as h } from "../form-control.js";
 import { css as g, html as _, nothing as v, unsafeCSS as y } from "lit";
 import { property as b, query as x } from "lit/decorators.js";
 //#region src/components/vf-button.ts
-var S = "vf-submitter", C = class extends r(h) {
-	constructor(...e) {
-		super(...e), this.type = "button", this.name = "", this.value = "", this.formAction = "", this.formEnctype = "", this.formMethod = "", this.formNoValidate = !1, this.formTarget = "", this.scale = new t(this), this.gridSnap = new s(this), this.#e = !1, this.handleClick = (e) => {
-			this.isDisabled || this.#e || this.resolvedType !== "button" && m(this, e, () => this.activate());
+var S = "vf-submitter", C = class extends i(h) {
+	constructor(...t) {
+		super(...t), this.type = "button", this.name = "", this.value = "", this.formAction = "", this.formEnctype = "", this.formMethod = "", this.formNoValidate = !1, this.formTarget = "", this.scale = new n(this), this.gridSnap = new c(this), this.#e = !1, this.handleClick = (t) => {
+			this.isDisabled || this.#e || this.resolvedType !== "button" && e(this, t, () => this.activate());
 		};
 	}
 	static {
@@ -26,8 +26,8 @@ var S = "vf-submitter", C = class extends r(h) {
 	}
 	static {
 		this.styles = [
+			o,
 			a,
-			i,
 			g`
       :host {
         display: inline-flex;
@@ -61,7 +61,7 @@ var S = "vf-submitter", C = class extends r(h) {
         bottom: calc(var(--vf-scale, 1) * -${4}px - var(--vf-snap-dy, 0px));
         right: calc(var(--vf-scale, 1) * -${4}px - var(--vf-snap-dx, 0px));
         background: var(--vf-black, #000);
-        clip-path: ${y(p(u, d))};
+        clip-path: ${y(m(d, f))};
         pointer-events: none;
       }
       /* Disabled default: the fat outer ring dims to gray; the inner button
@@ -131,12 +131,12 @@ var S = "vf-submitter", C = class extends r(h) {
       }
       button::before {
         background: var(--vf-black, #000);
-        clip-path: ${y(f(l))};
+        clip-path: ${y(p(u))};
       }
       /* Face: white fill inset one pixel, with its own traced corner steps. */
       button::after {
         background: var(--vf-white, #fff);
-        clip-path: ${y(f(c))};
+        clip-path: ${y(p(l))};
       }
       /* Pressed: instant white-on-black inversion. */
       button:active:not(:disabled) {
@@ -167,7 +167,7 @@ var S = "vf-submitter", C = class extends r(h) {
         outline: none;
       }
       button:focus-visible .label::after {
-        ${o}
+        ${s}
       }
       /* Disabled: only the label dims to gray; the solid black border stays. */
       button:disabled {
@@ -213,22 +213,22 @@ var S = "vf-submitter", C = class extends r(h) {
 		}
 	}
 };
-n([b({ reflect: !0 })], C.prototype, "variant", void 0), n([b({ reflect: !0 })], C.prototype, "type", void 0), n([b({ reflect: !0 })], C.prototype, "name", void 0), n([b({ reflect: !0 })], C.prototype, "value", void 0), n([b({
+r([b({ reflect: !0 })], C.prototype, "variant", void 0), r([b({ reflect: !0 })], C.prototype, "type", void 0), r([b({ reflect: !0 })], C.prototype, "name", void 0), r([b({ reflect: !0 })], C.prototype, "value", void 0), r([b({
 	attribute: "formaction",
 	reflect: !0
-})], C.prototype, "formAction", void 0), n([b({
+})], C.prototype, "formAction", void 0), r([b({
 	attribute: "formenctype",
 	reflect: !0
-})], C.prototype, "formEnctype", void 0), n([b({
+})], C.prototype, "formEnctype", void 0), r([b({
 	attribute: "formmethod",
 	reflect: !0
-})], C.prototype, "formMethod", void 0), n([b({
+})], C.prototype, "formMethod", void 0), r([b({
 	type: Boolean,
 	attribute: "formnovalidate",
 	reflect: !0
-})], C.prototype, "formNoValidate", void 0), n([b({
+})], C.prototype, "formNoValidate", void 0), r([b({
 	attribute: "formtarget",
 	reflect: !0
-})], C.prototype, "formTarget", void 0), n([x("button")], C.prototype, "buttonEl", void 0), C = n([e("vf-button")], C);
+})], C.prototype, "formTarget", void 0), r([x("button")], C.prototype, "buttonEl", void 0), C = r([t("vf-button")], C);
 //#endregion
 export { C as VfButton };

package/dist/components/vf-checkbox.js

@@ -1,11 +1,11 @@
-import { vfElement as e } from "../define.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as n } from "../position.js";
-import { vfDisplay as r } from "../styles/recipes/display-face.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { vfFocusUnderline as a } from "../styles/recipes/focus.js";
-import { vfToggle as o } from "../styles/recipes/toggle.js";
-import { emit as s, emitNative as c } from "../events.js";
+import { emit as e, emitNative as t } from "../events.js";
+import { vfElement as n } from "../define.js";
+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";
@@ -13,12 +13,12 @@ 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";
 //#region src/components/vf-checkbox.ts
-var v = class extends n(f(d)) {
+var v = class extends i(f(d)) {
 	static {
 		this.styles = [
-			i,
-			r,
 			o,
+			a,
+			c,
 			p`
       /* Keyboard focus underlines the box itself — not the label, and not a
          ring around either (see vfFocusUnderline). Both adjustments below are
@@ -28,7 +28,7 @@ var v = class extends n(f(d)) {
          blank row and the rule itself: −(1 + 1 + 1). */
       :host(:focus-visible) .box::after {
         --vf-focus-underline-offset: -3px;
-        ${a}
+        ${s}
         left: calc(var(--vf-scale, 1) * -1px);
         right: calc(var(--vf-scale, 1) * -1px);
       }
@@ -132,12 +132,12 @@ var v = class extends n(f(d)) {
 		this.checked = !0;
 	}
 	activate() {
-		this.checked = !this.checked, this.focus(), s(this, "vf-change", { checked: this.checked }), c(this, "input"), c(this, "change");
+		this.checked = !this.checked, this.focus(), e(this, "vf-change", { checked: this.checked }), t(this, "input"), t(this, "change");
 	}
 };
-t([h({
+r([h({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), t([h({ reflect: !0 })], v.prototype, "name", void 0), t([h()], v.prototype, "value", void 0), t([g()], v.prototype, "_hasLabel", void 0), v = t([e("vf-checkbox")], v);
+})], 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);
 //#endregion
 export { v as VfCheckbox };