vintage-frames 0.10.1 → 0.12.0

package/custom-elements.json

@@ -2453,7 +2453,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the desktop pattern — the classic 50% dither by default, or any of\nthe standard patterns by name (`pattern`, System 7's General Controls\nsetting) — and manages the stacking order and `active` state of slotted\n`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, synced in a task once\nany pointer gesture has ended), so tabbing walks the stack the way the eye\ndoes and Shift+Tab is its 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.\nA slotted `vf-menu-bar` (or a free-standing `vf-menu`) sits on a tier\nabove both, so its dropped menus cover palettes and document windows\nalike; only the screen-corner mask is in front of it.\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\n**`pattern`** names the desktop pattern — `gray-50` (the dither) by\ndefault, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen\nhex digits stating a custom 8×8 pattern, as on `vf-container`. It is\npainted as the screen's own background: black ink on an opaque white\npaper, one whole-surface raster at one image px per system px, 1-bit at\nevery density and zoom (src/pattern-fill.ts).\n\n**The drag surface.** The Finder dragged an icon as a dotted outline drawn\non the *screen*, clipped at its edge and phase-locked to its raster, so\nthe screen hosts the layer that outline draws on: a full-bleed child of\nthe screen, `pointer-events: none` (never a hit for the page's\n`elementsFromPoint`), whose children paint one tier above the menu bar\nand under the corner mask — the layer itself is deliberately no stacking\ncontext, since a blend inside one would composite against nothing. An\nicon reaches it without an import, the menu-handshake idiom: on a drag's\nfirst step it dispatches `vf-drag-surface-request` (bubbles, non-composed,\n`detail.surface` null), and the nearest desktop on its light-DOM path\nfills the detail with the layer. Not the top layer: stable Safari cannot\nblend an element there against the page (src/cursor.ts), and a second\nkit entry in the top layer would need a re-promotion handshake.\n\nCustom properties:\n- `--vf-desktop-pattern` — a consumer's own tile art in place of the\n  pattern (the kit's default is a 1-bit 50% checker, opaque\n  black-on-white on a 30-system-px tile). Set, it wins over `pattern` and\n  renders 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 (default\n  `#808080`). The pattern's paper is opaque, so this only becomes visible\n  when `--vf-desktop-pattern` is overridden with a tile that has\n  transparent cells (or with `none`).",
+          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the desktop pattern — the classic 50% dither by default, or any of\nthe standard patterns by name (`pattern`, System 7's General Controls\nsetting) — and manages the stacking order and `active` state of slotted\n`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, synced in a task once\nany pointer gesture has ended), so tabbing walks the stack the way the eye\ndoes and Shift+Tab is its 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.\nA slotted `vf-menu-bar` (or a free-standing `vf-menu`) sits on a tier\nabove both, so its dropped menus cover palettes and document windows\nalike; only the screen-corner mask is in front of it.\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 four corners\nwith the classic corner mask.\n\n**`pattern`** names the desktop pattern — `gray-50` (the dither) by\ndefault, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen\nhex digits stating a custom 8×8 pattern, as on `vf-container`. It is\npainted as the screen's own background: black ink on an opaque white\npaper, one whole-surface raster at one image px per system px, 1-bit at\nevery density and zoom (src/pattern-fill.ts).\n\n**The drag surface.** The Finder dragged an icon as a dotted outline drawn\non the *screen*, clipped at its edge and phase-locked to its raster, so\nthe screen hosts the layer that outline draws on: a full-bleed child of\nthe screen, `pointer-events: none` (never a hit for the page's\n`elementsFromPoint`), whose children paint one tier above the menu bar\nand under the corner mask — the layer itself is deliberately no stacking\ncontext, since a blend inside one would composite against nothing. An\nicon reaches it without an import, the menu-handshake idiom: on a drag's\nfirst step it dispatches `vf-drag-surface-request` (bubbles, non-composed,\n`detail.surface` null), and the nearest desktop on its light-DOM path\nfills the detail with the layer. Not the top layer: stable Safari cannot\nblend an element there against the page (src/cursor.ts), and a second\nkit entry in the top layer would need a re-promotion handshake.\n\nCustom properties:\n- `--vf-desktop-pattern` — a consumer's own tile art in place of the\n  pattern (the kit's default is a 1-bit 50% checker, opaque\n  black-on-white on a 30-system-px tile). Set, it wins over `pattern` and\n  renders 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 (default\n  `#808080`). The pattern's paper is opaque, so this only becomes visible\n  when `--vf-desktop-pattern` is overridden with a tile that has\n  transparent cells (or with `none`).",
           "name": "VfDesktop",
           "cssProperties": [
             {
@@ -2506,7 +2506,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Width of the black screen bezel, in system px (`0` = none), added onto\nthe declared screen on every side — a `width=\"502\" bezel=\"5\"` desktop\nrenders a 512-system-px host box. The compact Mac's CRT showed an\nunlit black margin between the desktop's raster and the case; `bezel`\ndraws it around the screen and puts the classic screen-corner mask on\nthe screen's two *top* corners — only the top pair was rounded in the\nframebuffer. Flow, window coordinates and the drag clip all belong to\nthe screen, so windows crop at its edge. Inside a bezeled desktop a\nmenu bar needs no `rounded` of its own — the desktop's mask lands on\nthe same pixels.",
+              "description": "Width of the black screen bezel, in system px (`0` = none), added onto\nthe declared screen on every side — a `width=\"502\" bezel=\"5\"` desktop\nrenders a 512-system-px host box. The compact Mac's CRT showed an\nunlit black margin between the desktop's raster and the case; `bezel`\ndraws it around the screen and puts the classic screen-corner mask on\nall four of the screen's corners. Flow, window coordinates and the drag\nclip all belong to the screen, so windows crop at its edge. Inside a\nbezeled desktop a menu bar needs no `rounded` of its own — the desktop's\ntop pair lands on the same pixels.",
               "attribute": "bezel"
             },
             {
@@ -3071,7 +3071,7 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Width of the black screen bezel, in system px (`0` = none), added onto\nthe declared screen on every side — a `width=\"502\" bezel=\"5\"` desktop\nrenders a 512-system-px host box. The compact Mac's CRT showed an\nunlit black margin between the desktop's raster and the case; `bezel`\ndraws it around the screen and puts the classic screen-corner mask on\nthe screen's two *top* corners — only the top pair was rounded in the\nframebuffer. Flow, window coordinates and the drag clip all belong to\nthe screen, so windows crop at its edge. Inside a bezeled desktop a\nmenu bar needs no `rounded` of its own — the desktop's mask lands on\nthe same pixels.",
+              "description": "Width of the black screen bezel, in system px (`0` = none), added onto\nthe declared screen on every side — a `width=\"502\" bezel=\"5\"` desktop\nrenders a 512-system-px host box. The compact Mac's CRT showed an\nunlit black margin between the desktop's raster and the case; `bezel`\ndraws it around the screen and puts the classic screen-corner mask on\nall four of the screen's corners. Flow, window coordinates and the drag\nclip all belong to the screen, so windows crop at its edge. Inside a\nbezeled desktop a menu bar needs no `rounded` of its own — the desktop's\ntop pair lands on the same pixels.",
               "fieldName": "bezel"
             },
             {
@@ -10834,7 +10834,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-option>` — a single choice inside a `<vf-select>` popup menu.\n\nA light-DOM child of `<vf-select>` (slotted into the popup panel). Renders\nits slotted label at menu-item metrics (16px row — the pill's content height,\nso a selected option overlays the closed pill exactly; the left checkmark gutter is\n`--vf-select-gutter`, shared with the closed control's left inset so the value\ndoesn't shift on open). The parent select manages `selected` and the transient\n`active` highlight, and slots this element into its popup panel.\n\nThe host carries `role=\"option\"` with `aria-selected`/`aria-disabled`.\n\nTakes `top`/`left` like every other element (VfPositioned), for the\nconsumer who wants one somewhere other than a popup row. Inside its parent\n`<vf-select>` it is a row the panel measures and scrolls in flow, so stating\nan origin there takes it out of that measurement: the panel stops counting it\ntoward its own width and its scroll clamp, and the rows below close the gap.\nThat is the placement doing exactly what it says — not a bug — but it is not\nhow a popup is laid out.",
+          "description": "`<vf-option>` — a single choice inside a `<vf-select>` popup menu.\n\nA light-DOM child of `<vf-select>` (slotted into the popup panel). Renders\nits slotted label at menu-item metrics (16px row — the pill's content height,\nso a selected option overlays the closed pill exactly; the left checkmark gutter is\n`--vf-select-gutter`, shared with the closed control's left inset so the value\ndoesn't shift on open). The parent select manages `selected`, the transient\n`active` highlight and `size`, and slots this element into its popup panel.\nUnder `size=\"small\"` the row is the small pill's 10px content height, in the\nbody face, and clips its own box.\n\nThe host carries `role=\"option\"` with `aria-selected`/`aria-disabled`.\n\nTakes `top`/`left` like every other element (VfPositioned), for the\nconsumer who wants one somewhere other than a popup row. Inside its parent\n`<vf-select>` it is a row the panel measures and scrolls in flow, so stating\nan origin there takes it out of that measurement: the panel stops counting it\ntoward its own width and its scroll clamp, and the rows below close the gap.\nThat is the placement doing exactly what it says — not a bug — but it is not\nhow a popup is laid out.",
           "name": "VfOption",
           "cssProperties": [
             {
@@ -10905,6 +10905,17 @@
               "attribute": "active",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "VfSelectSize"
+              },
+              "default": "'regular'",
+              "description": "The parent select's `size`. Managed by the parent.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "#internals",
@@ -11013,6 +11024,15 @@
               "description": "Transient highlight (hover / keyboard cursor) — full-row inversion.\nManaged by the parent `<vf-select>`; not part of the authoring API.",
               "fieldName": "active"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "VfSelectSize"
+              },
+              "default": "'regular'",
+              "description": "The parent select's `size`. Managed by the parent.",
+              "fieldName": "size"
+            },
             {
               "name": "top",
               "type": {
@@ -13364,7 +13384,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-select>` — the classic System 7 popup menu control (\"Macintosh HD ▼\").\n\nChildren are `<vf-option>` elements in the default slot. The closed control\nis a white box with a 1px black border, the small 1px hard shadow, the\nselected option's label on the left and a solid black ▼ triangle on the\nright. The open panel uses the shared `.vf-panel` recipe and is positioned\n`position: fixed` (computed from `getBoundingClientRect()`) so it escapes\nclipping containers; when possible the currently-selected item opens\ndirectly over the control, like the real popup menu.\n\nPointer — two interaction styles are supported and disambiguated by the\ngesture itself, resolved at the first pointer release:\n  - System 7 press-drag-release: press the pill (the list appears under the\n    pointer), drag onto an item, release over it to pick — one continuous\n    press. Releasing over the current item or off the list closes with no\n    change.\n  - Modern click-to-open: a quick in-place click (no drag, released within\n    PRESS_HOLD_MS) leaves the list open; a second, independent click\n    then picks an item.\nThe two share one opening trigger (pointerdown) and diverge only on how the\npress ends — whether the pointer travelled to another item, and (for an\nin-place release) whether it was a quick tap or a held press. The pull-down\nmenus drive themselves the same way, on the same threshold; that half lives\nin src/menu-press.ts, because one menu press may travel across a whole bar.\n\nA list too tall for the screen is **clipped**, never scrolled: the edge slot\nwith items beyond it shows a solid arrow instead of a row, which rolls the\nlist one row at a time while the pointer rests on it. The clamp is quantized\nto the pill lattice, so a clipped popup still opens with its selected row\nover the closed pill — and the panel keeps every slot the list asked for, so\na box that had to slide to fit the screen opens with *blank rows* at whichever\nend the list no longer reaches: the exact travel it will roll through, in\neither direction. See src/popup-overflow.ts.\n\nKeyboard: Space/Enter/ArrowDown open; while open ArrowUp/ArrowDown move the\nhighlight, Home/End jump, Enter/Space select, Escape cancels. Selecting an\nitem plays the classic inversion blink (~250 ms) before closing. Keyboard\nfocus is marked with the kit's 1px dashed rule under the closed pill\n(`vfFocusUnderline`) rather than a ring around it — keyboard only, which\nhere means the page's input modality rather than `:focus-visible` (the pill\ndrives its own focus, and Blink reads that as visible either way).\n\nForm-associated: submits `value` under `name`.",
+          "description": "`<vf-select>` — the classic System 7 popup menu control (\"Macintosh HD ▼\").\n\nChildren are `<vf-option>` elements in the default slot. The closed control\nis a white box with a 1px black border, the small 1px hard shadow, the\nselected option's label on the left and a solid black ▼ triangle on the\nright. The open panel uses the shared `.vf-panel` recipe and is positioned\n`position: fixed` (computed from `getBoundingClientRect()`) so it escapes\nclipping containers; when possible the currently-selected item opens\ndirectly over the control, like the real popup menu.\n\nPointer — two interaction styles are supported and disambiguated by the\ngesture itself, resolved at the first pointer release:\n  - System 7 press-drag-release: press the pill (the list appears under the\n    pointer), drag onto an item, release over it to pick — one continuous\n    press. Releasing over the current item or off the list closes with no\n    change.\n  - Modern click-to-open: a quick in-place click (no drag, released within\n    PRESS_HOLD_MS) leaves the list open; a second, independent click\n    then picks an item.\nThe two share one opening trigger (pointerdown) and diverge only on how the\npress ends — whether the pointer travelled to another item, and (for an\nin-place release) whether it was a quick tap or a held press. The pull-down\nmenus drive themselves the same way, on the same threshold; that half lives\nin src/menu-press.ts, because one menu press may travel across a whole bar.\n\nA list too tall for the screen is **clipped**, never scrolled: the edge slot\nwith items beyond it shows a solid arrow instead of a row, which rolls the\nlist one row at a time while the pointer rests on it. The clamp is quantized\nto the pill lattice, so a clipped popup still opens with its selected row\nover the closed pill — and the panel keeps every slot the list asked for, so\na box that had to slide to fit the screen opens with *blank rows* at whichever\nend the list no longer reaches: the exact travel it will roll through, in\neither direction. See src/popup-overflow.ts.\n\n`size=\"small\"` sets the pill and its rows in the body face: a 12px pill\n(`--vf-popup-height-small`) over 10px rows, the baseline 8 rows down so the\nface's 2-row descenders end on the last content row. Its ▼ and scroll\narrows are the 9×5 `CARET_DOWN_SMALL` / `CARET_UP_SMALL`; the ✓ and the\nhorizontal insets are the regular pill's. Marks above a capital (É, Å, Ñ)\nreach past the 8 rows above the baseline and are clipped.\n\nKeyboard: Space/Enter/ArrowDown open; while open ArrowUp/ArrowDown move the\nhighlight, Home/End jump, Enter/Space select, Escape cancels. Selecting an\nitem plays the classic inversion blink (~250 ms) before closing. Keyboard\nfocus is marked with the kit's 1px dashed rule under the closed pill\n(`vfFocusUnderline`) rather than a ring around it — keyboard only, which\nhere means the page's input modality rather than `:focus-visible` (the pill\ndrives its own focus, and Blink reads that as visible either way).\n\nForm-associated: submits `value` under `name`.",
           "name": "VfSelect",
           "cssProperties": [
             {
@@ -13372,6 +13392,11 @@
               "name": "--vf-popup-height",
               "default": "18px"
             },
+            {
+              "description": "`vf-select[size=\"small\"]` pill (border box; its rows are this less the two borders)",
+              "name": "--vf-popup-height-small",
+              "default": "12px"
+            },
             {
               "description": "room a clipped popup panel keeps clear at the TOP screen edge — set it once on `:root` (or the `vf-desktop`) to clear a `vf-menu-bar`: `24px` is the 20px bar plus the default 4",
               "name": "--vf-popup-inset-top",
@@ -13417,18 +13442,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "ITEM_HEIGHT",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "static": true,
-              "readonly": true,
-              "default": "16",
-              "description": "Fallback height of one option row — the pill's *content* height\n(`--vf-popup-height` 18px minus its two 1px borders). Used to overlay the\nselected row's white cell exactly on the closed pill. `positionPanel`\nprefers the row's *rendered* height so a re-themed `--vf-popup-height`\nkeeps the overlay aligned; this is the no-options fallback and must match\n`vf-option`'s default row height."
-            },
             {
               "kind": "field",
               "name": "value",
@@ -13450,6 +13463,17 @@
               "attribute": "name",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "VfSelectSize"
+              },
+              "default": "'regular'",
+              "description": "`regular` (the 18px pill in the display face) or `small` (12px, in the\nbody face). Any other value renders as `regular`. The select passes it to\nits options.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "label",
@@ -13869,6 +13893,17 @@
               },
               "description": "Marks the option matching `value` as selected."
             },
+            {
+              "kind": "method",
+              "name": "applySize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Passes the pill size to every option; anything but `small` is regular."
+            },
             {
               "kind": "field",
               "name": "handleSlotChange",
@@ -14932,6 +14967,15 @@
               "description": "Form field name used when submitting the associated form.",
               "fieldName": "name"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "VfSelectSize"
+              },
+              "default": "'regular'",
+              "description": "`regular` (the 18px pill in the display face) or `small` (12px, in the\nbody face). Any other value renders as `regular`. The select passes it to\nits options.",
+              "fieldName": "size"
+            },
             {
               "name": "label",
               "type": {

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

@@ -45,7 +45,7 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * `resize`/`onScaleChange` for a viewport-filling desktop — and positions
  * the sized box with its own stylesheet, keeping any sub-system-pixel
  * slack on its side. `bezel` (system px) draws the black screen surround —
- * the CRT's unlit margin — around the screen, rounding its top corners
+ * the CRT's unlit margin — around the screen, rounding its four corners
  * with the classic corner mask.
  *
  * **`pattern`** names the desktop pattern — `gray-50` (the dither) by
@@ -119,11 +119,10 @@ export declare class VfDesktop extends VfDesktop_base {
      * renders a 512-system-px host box. The compact Mac's CRT showed an
      * unlit black margin between the desktop's raster and the case; `bezel`
      * draws it around the screen and puts the classic screen-corner mask on
-     * the screen's two *top* corners — only the top pair was rounded in the
-     * framebuffer. Flow, window coordinates and the drag clip all belong to
-     * the screen, so windows crop at its edge. Inside a bezeled desktop a
-     * menu bar needs no `rounded` of its own — the desktop's mask lands on
-     * the same pixels.
+     * all four of the screen's corners. Flow, window coordinates and the drag
+     * clip all belong to the screen, so windows crop at its edge. Inside a
+     * bezeled desktop a menu bar needs no `rounded` of its own — the desktop's
+     * top pair lands on the same pixels.
      */
     bezel: number;
     /**

package/dist/components/vf-desktop.js

@@ -165,16 +165,15 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
       .drag-surface > * {
         z-index: ${N};
       }
-      /* With a bezel, the screen's top corners wear the SCREEN_CORNER mask,
-         rounding into the surrounding black — the top pair only, because the
-         classic framebuffer masked only those; the raster's bottom corners
-         ran square. Children of .screen, so they anchor to the raster's own
-         corners (over a slotted menu bar's, which sit in the same place). The
-         hardware mask was in front of every pixel — a window dragged into a
-         corner slides under it — hence the maximal z-index. */
+      /* With a bezel, the screen's four corners wear the SCREEN_CORNER mask,
+         rounding into the surrounding black; the bottom pair is the same
+         staircase mirrored vertically. Children of .screen, so they anchor to
+         the raster's own corners (the top pair over a slotted menu bar's,
+         which sit in the same place). The hardware mask was in front of every
+         pixel — a window dragged into a corner slides under it — hence the
+         maximal z-index. */
       .corner {
         position: absolute;
-        top: 0;
         width: calc(var(--vf-scale, 1) * ${S[0]}px);
         height: calc(var(--vf-scale, 1) * ${S.length}px);
         background: var(--vf-black, #000);
@@ -182,13 +181,25 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
         z-index: 2147483647;
       }
       .corner.tl {
+        top: 0;
         left: 0;
         clip-path: ${D(C(S, "left"))};
       }
       .corner.tr {
+        top: 0;
         right: 0;
         clip-path: ${D(C(S, "right"))};
       }
+      .corner.bl {
+        bottom: 0;
+        left: 0;
+        clip-path: ${D(C(S, "left", "bottom"))};
+      }
+      .corner.br {
+        bottom: 0;
+        right: 0;
+        clip-path: ${D(C(S, "right", "bottom"))};
+      }
     `
 		];
 	}
@@ -316,7 +327,9 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
           <slot @slotchange=${this._onSlotChange}></slot>
           <div class="drag-surface"></div>
           ${this.bezel > 0 ? E`<div class="corner tl"></div>
-                <div class="corner tr"></div>` : null}
+                <div class="corner tr"></div>
+                <div class="corner bl"></div>
+                <div class="corner br"></div>` : null}
         </div>
       </div>
     `;

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
+import type { VfSelectSize } from './vf-select.js';
 declare const VfOption_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-option>` — a single choice inside a `<vf-select>` popup menu.
@@ -8,8 +9,10 @@ declare const VfOption_base: (new (...args: any[]) => import("../position.js").V
  * its slotted label at menu-item metrics (16px row — the pill's content height,
  * so a selected option overlays the closed pill exactly; the left checkmark gutter is
  * `--vf-select-gutter`, shared with the closed control's left inset so the value
- * doesn't shift on open). The parent select manages `selected` and the transient
- * `active` highlight, and slots this element into its popup panel.
+ * doesn't shift on open). The parent select manages `selected`, the transient
+ * `active` highlight and `size`, and slots this element into its popup panel.
+ * Under `size="small"` the row is the small pill's 10px content height, in the
+ * body face, and clips its own box.
  *
  * The host carries `role="option"` with `aria-selected`/`aria-disabled`.
  *
@@ -46,6 +49,8 @@ export declare class VfOption extends VfOption_base {
      * Managed by the parent `<vf-select>`; not part of the authoring API.
      */
     active: boolean;
+    /** The parent select's `size`. Managed by the parent. */
+    size: VfSelectSize;
     constructor();
     connectedCallback(): void;
     protected updated(changed: PropertyValues<this>): void;

package/dist/components/vf-option.js

@@ -2,18 +2,19 @@ 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 { CHECKMARK as o, glyphSvg as s } from "../glyphs.js";
-import { LitElement as c, css as l, html as u } from "lit";
-import { property as d } from "lit/decorators.js";
+import { vfBodyDecls as i } from "../styles/recipes/body-face.js";
+import { vfDisplay as a } from "../styles/recipes/display-face.js";
+import { vfBase as o } from "../styles/recipes/host.js";
+import { CHECKMARK as s, glyphSvg as c } from "../glyphs.js";
+import { LitElement as l, css as u, html as d } from "lit";
+import { property as f } from "lit/decorators.js";
 //#region src/components/vf-option.ts
-var f = class extends r(c) {
+var p = class extends r(l) {
 	static {
 		this.styles = [
+			o,
 			a,
-			i,
-			l`
+			u`
       :host {
         position: relative;
         display: flex;
@@ -43,6 +44,18 @@ var f = class extends r(c) {
         cursor: var(--vf-cursor, default);
         outline: none;
       }
+      /* The small row: the select restates --vf-popup-height on itself, so the
+         height above already follows it. The line box and padding match the
+         small pill's label (see vf-select's .value): 8 rows above the baseline,
+         2 below it for the descenders. The row clips its own box, so a mark
+         above a capital doesn't draw into the row above, and the list clips
+         what the closed pill clips. */
+      :host([size='small']) {
+        ${i}
+        line-height: calc(var(--vf-scale, 1) * (var(--vf-popup-height, 12px) - 4px));
+        padding-bottom: calc(var(--vf-scale, 1) * 2px);
+        overflow: clip;
+      }
       /* Hover/keyboard highlight — classic full-row inversion. The parent
          vf-select drives [active] for both pointer and keyboard so only one
          row is ever highlighted at a time. */
@@ -81,6 +94,11 @@ var f = class extends r(c) {
         width: calc(var(--vf-scale, 1) * 9px);
         height: calc(var(--vf-scale, 1) * 9px);
       }
+      /* The ✓'s 8 ink rows centered in the 10px row, 1 above and 1 below. Its
+         top is level with the capitals' top, as at row 3 above. */
+      :host([size='small']) .check {
+        top: calc(var(--vf-scale, 1) * 1px);
+      }
       :host([selected]) .check {
         visibility: visible;
       }
@@ -89,7 +107,7 @@ var f = class extends r(c) {
 	}
 	#e;
 	constructor() {
-		super(), this.scale = new t(this), this.value = "", this.disabled = !1, this.selected = !1, this.active = !1, this.#e = this.attachInternals(), this.#e.role = "option";
+		super(), this.scale = new t(this), this.value = "", this.disabled = !1, this.selected = !1, this.active = !1, this.size = "regular", this.#e = this.attachInternals(), this.#e.role = "option";
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
@@ -98,23 +116,23 @@ var f = class extends r(c) {
 		e.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), e.has("disabled") && (this.#e.ariaDisabled = this.disabled ? "true" : null);
 	}
 	render() {
-		return u`
+		return d`
       <span class="check" part="check" aria-hidden="true"
-        >${s(o, "checkmark")}</span
+        >${c(s, "checkmark")}</span
       >
       <slot></slot>
     `;
 	}
 };
-n([d()], f.prototype, "value", void 0), n([d({
+n([f()], p.prototype, "value", void 0), n([f({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "disabled", void 0), n([d({
+})], p.prototype, "disabled", void 0), n([f({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "selected", void 0), n([d({
+})], p.prototype, "selected", void 0), n([f({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "active", void 0), f = n([e("vf-option")], f);
+})], p.prototype, "active", void 0), n([f({ reflect: !0 })], p.prototype, "size", void 0), p = n([e("vf-option")], p);
 //#endregion
-export { f as VfOption };
+export { p as VfOption };

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

@@ -1,5 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { VfShadowRoleControl } from '../form-control.js';
+/** The two pill sizes: the display face at 18px, or the body face at 12px. */
+export type VfSelectSize = 'regular' | 'small';
 declare const VfSelect_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof VfShadowRoleControl;
 /**
  * `<vf-select>` — the classic System 7 popup menu control ("Macintosh HD ▼").
@@ -36,6 +38,13 @@ declare const VfSelect_base: (new (...args: any[]) => import("../position.js").V
  * end the list no longer reaches: the exact travel it will roll through, in
  * either direction. See src/popup-overflow.ts.
  *
+ * `size="small"` sets the pill and its rows in the body face: a 12px pill
+ * (`--vf-popup-height-small`) over 10px rows, the baseline 8 rows down so the
+ * face's 2-row descenders end on the last content row. Its ▼ and scroll
+ * arrows are the 9×5 `CARET_DOWN_SMALL` / `CARET_UP_SMALL`; the ✓ and the
+ * horizontal insets are the regular pill's. Marks above a capital (É, Å, Ñ)
+ * reach past the 8 rows above the baseline and are clipped.
+ *
  * Keyboard: Space/Enter/ArrowDown open; while open ArrowUp/ArrowDown move the
  * highlight, Home/End jump, Enter/Space select, Escape cancels. Selecting an
  * item plays the classic inversion blink (~250 ms) before closing. Keyboard
@@ -63,6 +72,8 @@ declare const VfSelect_base: (new (...args: any[]) => import("../position.js").V
  *   in its edge row slots.
  * @cssprop [--vf-popup-height=18px] - `vf-select` pill (border box; its 1px
  *   hard shadow makes the sheet's 157×19 ink box)
+ * @cssprop [--vf-popup-height-small=12px] - `vf-select[size="small"]` pill
+ *   (border box; its rows are this less the two borders)
  * @cssprop [--vf-popup-inset-top=4px] - room a clipped popup panel keeps clear
  *   at the TOP screen edge — set it once on `:root` (or the `vf-desktop`) to
  *   clear a `vf-menu-bar`: `24px` is the 20px bar plus the default 4
@@ -73,20 +84,17 @@ declare const VfSelect_base: (new (...args: any[]) => import("../position.js").V
  *   on open)
  */
 export declare class VfSelect extends VfSelect_base {
-    /**
-     * Fallback height of one option row — the pill's *content* height
-     * (`--vf-popup-height` 18px minus its two 1px borders). Used to overlay the
-     * selected row's white cell exactly on the closed pill. `positionPanel`
-     * prefers the row's *rendered* height so a re-themed `--vf-popup-height`
-     * keeps the overlay aligned; this is the no-options fallback and must match
-     * `vf-option`'s default row height.
-     */
-    private static readonly ITEM_HEIGHT;
     static styles: import("lit").CSSResult[];
     /** Value of the selected option. Adopts the first enabled option if unset. */
     value: string;
     /** Form field name used when submitting the associated form. */
     name: string;
+    /**
+     * `regular` (the 18px pill in the display face) or `small` (12px, in the
+     * body face). Any other value renders as `regular`. The select passes it to
+     * its options.
+     */
+    size: VfSelectSize;
     /**
      * Accessible name for the combobox control (`aria-label`). Left empty, the
      * name falls back to whatever the host carries — `aria-labelledby`,
@@ -202,6 +210,8 @@ export declare class VfSelect extends VfSelect_base {
     private optionValue;
     /** Marks the option matching `value` as selected. */
     private applySelection;
+    /** Passes the pill size to every option; anything but `small` is regular. */
+    private applySize;
     private handleSlotChange;
     private openPanel;
     /**