vintage-frames 0.1.0 → 0.2.0

package/dist/index.js

@@ -19,53 +19,53 @@ import { vfToggle as te } from "./styles/recipes/toggle.js";
 import { vfField as ne } from "./styles/recipes/field.js";
 import { vfScrollRail as re } from "./styles/recipes/scroll-rail.js";
 import { TileRasterCache as ie, patternOverride as ae, tileGrid as oe, vfTileGrid as se } from "./tile-grid.js";
-import { GridSnapController as ce, applyGridSnap as le, requestGridSnap as ue } from "./grid-snap.js";
-import { DocumentListenersController as de } from "./document-listeners.js";
-import { BUTTON_FACE as fe, BUTTON_FRAME as pe, RING_FRAME as me, RING_HOLE as he, RING_INSET as ge, SCREEN_CORNER as _e, steppedCornerClip as ve, steppedRectClip as ye, steppedRingClip as be } from "./pixel-frame.js";
-import { VfDesktop as xe } from "./components/vf-desktop.js";
-import { VfSized as Se } from "./size.js";
-import { DragController as Ce } from "./drag.js";
-import { emit as we } from "./events.js";
-import { ScrollStateController as Te } from "./scroll-state.js";
-import { BLINK_FLIPS as Ee, BLINK_INTERVAL_MS as De, PRESS_HOLD_MS as Oe, RENAME_DELAY_MS as ke, prefersReducedMotion as Ae, runSelectionBlink as je } from "./motion.js";
-import { CARET_DOWN as Me, CHECKBOX_X as Ne, CHECKMARK as Pe, RADIO_DOT as Fe, RADIO_FACE as Ie, RADIO_RING as Le, RADIO_RING_PRESSED as Re, SLIDER_THUMB as ze, SLIDER_THUMB_FACE as Be, STEPPER as Ve, STEPPER_DOWN_FILL as He, STEPPER_UP_FILL as Ue, glyphSvg as We } from "./glyphs.js";
-import { ScrollRailController as Ge, renderScrollRail as Ke } from "./scroll-rail.js";
-import { VfScrollArea as qe } from "./components/vf-scroll-area.js";
-import { VfWindow as Je } from "./components/vf-window.js";
-import { VfModalDialog as Ye, modalDialogStyles as Xe } from "./modal-dialog.js";
-import { VfButtonGroup as Ze } from "./components/vf-button-group.js";
-import { VfDialog as Qe } from "./components/vf-dialog.js";
-import { VfSeparator as $e } from "./components/vf-separator.js";
-import { VfFormControl as et } from "./form-control.js";
-import { VfButton as tt } from "./components/vf-button.js";
-import { VfSwatch as nt } from "./components/vf-swatch.js";
-import { VfToggleControl as rt } from "./toggle-control.js";
-import { VfCheckbox as it } from "./components/vf-checkbox.js";
-import { VfRadio as at } from "./components/vf-radio.js";
-import { VfRadioGroup as ot } from "./components/vf-radio-group.js";
-import { FocusRuleController as st, focusModality as ct, trackFocusModality as lt } from "./focus-modality.js";
-import { VfTextControlBase as ut } from "./text-control.js";
-import { VfTextField as dt } from "./components/vf-text-field.js";
-import { VfTextArea as ft } from "./components/vf-text-area.js";
-import { VfNumberField as pt } from "./components/vf-number-field.js";
-import { VfOption as mt } from "./components/vf-option.js";
-import { VfSelect as ht } from "./components/vf-select.js";
-import { TrackWidthController as gt } from "./track-width.js";
-import { VfProgressBar as _t } from "./components/vf-progress-bar.js";
-import { VfSlider as vt } from "./components/vf-slider.js";
-import { VfLabel as yt } from "./components/vf-label.js";
-import { VfParagraph as bt } from "./components/vf-paragraph.js";
-import { VfImg as xt } from "./components/vf-img.js";
-import { VfIcon as St } from "./components/vf-icon.js";
-import { VfMenuBar as Ct } from "./components/vf-menu-bar.js";
-import { VfMenu as wt } from "./components/vf-menu.js";
-import { VfMenuItem as Tt } from "./components/vf-menu-item.js";
-import { VfList as Et } from "./components/vf-list.js";
-import { VfListItem as Dt } from "./components/vf-list-item.js";
-import { VfFieldset as Ot } from "./components/vf-fieldset.js";
-import { VfGrid as kt } from "./components/vf-grid.js";
-import { VfStack as At } from "./components/vf-stack.js";
-import { VfContainer as jt } from "./components/vf-container.js";
-import { CURSOR_ARROW as Mt, CURSOR_CROSSHAIR as Nt, CURSOR_I_BEAM as Pt, CURSOR_WAIT as Ft } from "./cursor-art.js";
-import { applyCursor as It } from "./cursor.js";
-export { Ee as BLINK_FLIPS, De as BLINK_INTERVAL_MS, fe as BUTTON_FACE, pe as BUTTON_FRAME, Me as CARET_DOWN, Ne as CHECKBOX_X, Pe as CHECKMARK, n as CLASSIC_DPI, r as CSS_REFERENCE_DPI, Mt as CURSOR_ARROW, Nt as CURSOR_CROSSHAIR, Pt as CURSOR_I_BEAM, Ft as CURSOR_WAIT, de as DocumentListenersController, Ce as DragController, st as FocusRuleController, ce as GridSnapController, E as PIXEL_GRID_METRICS, Oe as PRESS_HOLD_MS, w as PlacementController, Fe as RADIO_DOT, Ie as RADIO_FACE, Le as RADIO_RING, Re as RADIO_RING_PRESSED, ke as RENAME_DELAY_MS, me as RING_FRAME, he as RING_HOLE, ge as RING_INSET, _e as SCREEN_CORNER, ze as SLIDER_THUMB, Be as SLIDER_THUMB_FACE, Ve as STEPPER, He as STEPPER_DOWN_FILL, Ue as STEPPER_UP_FILL, i as SYSTEM_PX_IN_CSS_PX, u as ScaleController, Ge as ScrollRailController, Te as ScrollStateController, L as TILE_LATTICE, ie as TileRasterCache, gt as TrackWidthController, O as VF_BODY_FAMILY, j as VF_DISPLAY_FAMILY, tt as VfButton, Ze as VfButtonGroup, it as VfCheckbox, jt as VfContainer, xe as VfDesktop, Qe as VfDialog, Ot as VfFieldset, et as VfFormControl, kt as VfGrid, St as VfIcon, xt as VfImg, yt as VfLabel, Et as VfList, Dt as VfListItem, wt as VfMenu, Ct as VfMenuBar, Tt as VfMenuItem, Ye as VfModalDialog, pt as VfNumberField, mt as VfOption, bt as VfParagraph, T as VfPositioned, _t as VfProgressBar, at as VfRadio, ot as VfRadioGroup, qe as VfScrollArea, ht as VfSelect, $e as VfSeparator, Se as VfSized, vt as VfSlider, At as VfStack, nt as VfSwatch, ft as VfTextArea, ut as VfTextControlBase, dt as VfTextField, rt as VfToggleControl, Je as VfWindow, It as applyCursor, le as applyGridSnap, d as applyScale, e as defineElement, a as devicePxPerSystemPx, f as effectiveScale, we as emit, ct as focusModality, p as getScale, o as getZoom, We as glyphSvg, Xe as modalDialogStyles, m as onScaleChange, s as onZoomChange, ae as patternOverride, Ae as prefersReducedMotion, k as registerBodyFace, M as registerDisplayFace, D as registerEmbeddedFont, Ke as renderScrollRail, ue as requestGridSnap, c as resetZoomBaseline, je as runSelectionBlink, h as snapSys, g as snapToDevicePx, _ as snapToSystemPx, ve as steppedCornerClip, ye as steppedRectClip, be as steppedRingClip, v as sys, y as sysLength, b as sysLengths, x as systemPxQuantum, oe as tileGrid, R as tileImage, z as tileRaster, B as tileRects, V as tileSpan, S as toSys, C as toSysExact, lt as trackFocusModality, l as truePixelRatio, F as vfBase, A as vfBodyDecls, q as vfChromeFrame, N as vfDisplay, P as vfDisplayDecls, W as vfDots, t as vfElement, ne as vfField, Q as vfFocus, $ as vfFocusRing, ee as vfFocusUnderline, K as vfHardShadowDecls, J as vfModalFrame, Y as vfPanel, re as vfScrollRail, I as vfStaticText, G as vfStripes, se as vfTileGrid, H as vfTileMaskSize, U as vfTileSize, X as vfTitleBar, te as vfToggle, Z as vfWindowWidgets };
+import { GridSnapController as ce, requestGridSnap as le } from "./grid-snap.js";
+import { DocumentListenersController as ue } from "./document-listeners.js";
+import { BUTTON_FACE as de, BUTTON_FRAME as fe, RING_FRAME as pe, RING_HOLE as me, RING_INSET as he, SCREEN_CORNER as ge, steppedCornerClip as _e, steppedRectClip as ve, steppedRingClip as ye } from "./pixel-frame.js";
+import { VfDesktop as be } from "./components/vf-desktop.js";
+import { VfSized as xe } from "./size.js";
+import { DragController as Se } from "./drag.js";
+import { emit as Ce } from "./events.js";
+import { ScrollStateController as we } from "./scroll-state.js";
+import { BLINK_FLIPS as Te, BLINK_INTERVAL_MS as Ee, PRESS_HOLD_MS as De, RENAME_DELAY_MS as Oe, prefersReducedMotion as ke, runSelectionBlink as Ae } from "./motion.js";
+import { CARET_DOWN as je, CHECKBOX_X as Me, CHECKMARK as Ne, RADIO_DOT as Pe, RADIO_FACE as Fe, RADIO_RING as Ie, RADIO_RING_PRESSED as Le, SLIDER_THUMB as Re, SLIDER_THUMB_FACE as ze, STEPPER as Be, STEPPER_DOWN_FILL as Ve, STEPPER_UP_FILL as He, glyphSvg as Ue } from "./glyphs.js";
+import { ScrollRailController as We, renderScrollRail as Ge } from "./scroll-rail.js";
+import { VfScrollArea as Ke } from "./components/vf-scroll-area.js";
+import { VfWindow as qe } from "./components/vf-window.js";
+import { VfModalDialog as Je, modalDialogStyles as Ye } from "./modal-dialog.js";
+import { VfButtonGroup as Xe } from "./components/vf-button-group.js";
+import { VfDialog as Ze } from "./components/vf-dialog.js";
+import { VfSeparator as Qe } from "./components/vf-separator.js";
+import { VfFormControl as $e } from "./form-control.js";
+import { VfButton as et } from "./components/vf-button.js";
+import { VfSwatch as tt } from "./components/vf-swatch.js";
+import { VfToggleControl as nt } from "./toggle-control.js";
+import { VfCheckbox as rt } from "./components/vf-checkbox.js";
+import { VfRadio as it } from "./components/vf-radio.js";
+import { VfRadioGroup as at } from "./components/vf-radio-group.js";
+import { FocusRuleController as ot, focusModality as st, trackFocusModality as ct } from "./focus-modality.js";
+import { VfTextControlBase as lt } from "./text-control.js";
+import { VfTextField as ut } from "./components/vf-text-field.js";
+import { VfTextArea as dt } from "./components/vf-text-area.js";
+import { VfNumberField as ft } from "./components/vf-number-field.js";
+import { VfOption as pt } from "./components/vf-option.js";
+import { VfSelect as mt } from "./components/vf-select.js";
+import { TrackWidthController as ht } from "./track-width.js";
+import { VfProgressBar as gt } from "./components/vf-progress-bar.js";
+import { VfSlider as _t } from "./components/vf-slider.js";
+import { VfLabel as vt } from "./components/vf-label.js";
+import { VfParagraph as yt } from "./components/vf-paragraph.js";
+import { VfImg as bt } from "./components/vf-img.js";
+import { VfIcon as xt } from "./components/vf-icon.js";
+import { VfMenuBar as St } from "./components/vf-menu-bar.js";
+import { VfMenu as Ct } from "./components/vf-menu.js";
+import { VfMenuItem as wt } from "./components/vf-menu-item.js";
+import { VfList as Tt } from "./components/vf-list.js";
+import { VfListItem as Et } from "./components/vf-list-item.js";
+import { VfFieldset as Dt } from "./components/vf-fieldset.js";
+import { VfGrid as Ot } from "./components/vf-grid.js";
+import { VfStack as kt } from "./components/vf-stack.js";
+import { VfContainer as At } from "./components/vf-container.js";
+import { CURSOR_ARROW as jt, CURSOR_CROSSHAIR as Mt, CURSOR_I_BEAM as Nt, CURSOR_WAIT as Pt } from "./cursor-art.js";
+import { applyCursor as Ft } from "./cursor.js";
+export { Te as BLINK_FLIPS, Ee as BLINK_INTERVAL_MS, de as BUTTON_FACE, fe as BUTTON_FRAME, je as CARET_DOWN, Me as CHECKBOX_X, Ne as CHECKMARK, n as CLASSIC_DPI, r as CSS_REFERENCE_DPI, jt as CURSOR_ARROW, Mt as CURSOR_CROSSHAIR, Nt as CURSOR_I_BEAM, Pt as CURSOR_WAIT, ue as DocumentListenersController, Se as DragController, ot as FocusRuleController, ce as GridSnapController, E as PIXEL_GRID_METRICS, De as PRESS_HOLD_MS, w as PlacementController, Pe as RADIO_DOT, Fe as RADIO_FACE, Ie as RADIO_RING, Le as RADIO_RING_PRESSED, Oe as RENAME_DELAY_MS, pe as RING_FRAME, me as RING_HOLE, he as RING_INSET, ge as SCREEN_CORNER, Re as SLIDER_THUMB, ze as SLIDER_THUMB_FACE, Be as STEPPER, Ve as STEPPER_DOWN_FILL, He as STEPPER_UP_FILL, i as SYSTEM_PX_IN_CSS_PX, u as ScaleController, We as ScrollRailController, we as ScrollStateController, L as TILE_LATTICE, ie as TileRasterCache, ht as TrackWidthController, O as VF_BODY_FAMILY, j as VF_DISPLAY_FAMILY, et as VfButton, Xe as VfButtonGroup, rt as VfCheckbox, At as VfContainer, be as VfDesktop, Ze as VfDialog, Dt as VfFieldset, $e as VfFormControl, Ot as VfGrid, xt as VfIcon, bt as VfImg, vt as VfLabel, Tt as VfList, Et as VfListItem, Ct as VfMenu, St as VfMenuBar, wt as VfMenuItem, Je as VfModalDialog, ft as VfNumberField, pt as VfOption, yt as VfParagraph, T as VfPositioned, gt as VfProgressBar, it as VfRadio, at as VfRadioGroup, Ke as VfScrollArea, mt as VfSelect, Qe as VfSeparator, xe as VfSized, _t as VfSlider, kt as VfStack, tt as VfSwatch, dt as VfTextArea, lt as VfTextControlBase, ut as VfTextField, nt as VfToggleControl, qe as VfWindow, Ft as applyCursor, d as applyScale, e as defineElement, a as devicePxPerSystemPx, f as effectiveScale, Ce as emit, st as focusModality, p as getScale, o as getZoom, Ue as glyphSvg, Ye as modalDialogStyles, m as onScaleChange, s as onZoomChange, ae as patternOverride, ke as prefersReducedMotion, k as registerBodyFace, M as registerDisplayFace, D as registerEmbeddedFont, Ge as renderScrollRail, le as requestGridSnap, c as resetZoomBaseline, Ae as runSelectionBlink, h as snapSys, g as snapToDevicePx, _ as snapToSystemPx, _e as steppedCornerClip, ve as steppedRectClip, ye as steppedRingClip, v as sys, y as sysLength, b as sysLengths, x as systemPxQuantum, oe as tileGrid, R as tileImage, z as tileRaster, B as tileRects, V as tileSpan, S as toSys, C as toSysExact, ct as trackFocusModality, l as truePixelRatio, F as vfBase, A as vfBodyDecls, q as vfChromeFrame, N as vfDisplay, P as vfDisplayDecls, W as vfDots, t as vfElement, ne as vfField, Q as vfFocus, $ as vfFocusRing, ee as vfFocusUnderline, K as vfHardShadowDecls, J as vfModalFrame, Y as vfPanel, re as vfScrollRail, I as vfStaticText, G as vfStripes, se as vfTileGrid, H as vfTileMaskSize, U as vfTileSize, X as vfTitleBar, te as vfToggle, Z as vfWindowWidgets };

package/dist/position.d.ts

@@ -11,8 +11,17 @@ export declare abstract class VfPositionedInterface extends LitElement {
     left?: number | null;
 }
 /**
- * Explicit placement — `top`/`left` in whole system px, on (nearly) every
- * component.
+ * Explicit placement — `top`/`left` in whole system px, on **every** component.
+ *
+ * No exceptions, deliberately. These are web components, and a consumer may put
+ * one wherever they like; the kit does not get to decide that a `vf-option` is
+ * only ever a popup row. The rows a container normally owns (`vf-option`,
+ * `vf-menu-item`, `vf-list-item`) and a bar's `vf-menu` take the pair on the
+ * same terms as anything else — and stating an origin on one *inside* its
+ * managing parent does take it out of that parent's flow layout, which is the
+ * placement working, not failing. Each of those components documents what its
+ * container stops doing for it. `vf-dialog` takes the pair in viewport
+ * coordinates, the one difference the platform forces (see modal-dialog.ts).
  *
  * A DITL resource laid a dialog out as a list of items, each with a rectangle
  * in the window's own coordinates; arranging controls by stating where they go

package/dist/styles/recipes/host.js

@@ -51,7 +51,20 @@ var n = t`
      painted element(s). Absolutely positioned satellites that anchor to the
      host (vf-menu's panel, the default button's ring) compose the same
      variables into their own insets instead. Controller-owned — never set the
-     variables by hand. */
+     variables by hand.
+
+     The reset below makes the two properties per-host: custom properties
+     inherit, so without it a host needing no correction of its own would
+     resolve an ancestor component's values here and its paint would leave the
+     grid by exactly that amount — invisibly, since the controller measures
+     the host box, which never moves. (Measured: a placed vf-button on a
+     corrected vf-desktop painted at the desktop's -0.39px offset.) The
+     controller's writes land on the host's inline style, which wins over
+     this rule. */
+  :host {
+    --vf-snap-dx: 0px;
+    --vf-snap-dy: 0px;
+  }
   .vf-snap {
     position: relative;
     left: var(--vf-snap-dx, 0px);

package/dist/styles/recipes/toggle.js

@@ -7,6 +7,22 @@ var t = e`
     gap: calc(var(--vf-scale, 1) * 6px);
     cursor: var(--vf-cursor, default);
   }
+  /* The well PAINTS 3 system px below the row top. Centering the 13px well
+     in the 20px row is the layout — kept, because the host's height and its
+     exported baseline are consumer-visible (moving them off the well's
+     centered bottom reflowed every line holding a toggle) — but centering
+     lands on 3.5, an exact tie, half a system px off the pixel grid at every
+     density where 3.5 system px isn't whole device px. So the paint steps
+     back half a pixel through the same relative "top" the grid-snap
+     correction rides (this rule overrides vfBase's .vf-snap, so it must
+     compose the variable), landing the ink on row 3: ties resolve toward the
+     start, as QuickDraw's "div 2" did — the title-bar and vf-stack
+     convention. The half-pixel gap between layout box and painted box is the
+     documented snap idiom, not a fault. */
+  .box,
+  .circle {
+    top: calc(var(--vf-snap-dy, 0px) - var(--vf-scale, 1) * 0.5px);
+  }
   /* The focus rule is drawn under the box/circle, not around the host. */
   :host(:focus-visible) {
     outline: none;

package/dist/text-control.d.ts

@@ -69,7 +69,7 @@ export declare class VfTextControlBase extends VfShadowRoleControl {
     protected forwardedAttr(name: string): string | typeof nothing;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     protected readonly scale: ScaleController;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     protected readonly gridSnap: GridSnapController;
     /**
      * Whether the well wears the kit's dashed focus rule — keyboard focus only.