Vintage Frames

Install

npm install vintage-frames

import 'vintage-frames' // registers every <vf-*> element

Or import only the elements you use:

import 'vintage-frames/vf-button.js'
import 'vintage-frames/vf-checkbox.js'

Sizes and positions are whole numbers of system px. A system px is one pixel of the original Mac screen, drawn as a whole number of device pixels.

vf-desktop

The gray desktop, which also manages the windows inside it. Pressing or focusing a vf-window brings it to the front and makes it active. DOM order follows the stacking order, updated after the press ends. Utility windows float above document windows and always stay active. A vf-menu-bar or vf-menu inside sits above both. A press on the bare desktop changes nothing. Call clearActive() to leave no document window active. Each change of active window fires vf-activate.

Size it with width and height, or with fitWithin(). CSS sizes don't apply. Position the desktop itself with your own CSS. Windows and icons inside use top and left.

vf-window

A window. The five classic Mac window types are each one line of markup.

vf-dialog

A modal dialog, built on the native <dialog>. It opens in the top layer, traps focus and closes on Escape. With light-dismiss, a click outside also closes it. By default it has a striped title bar and can be dragged. frame="plain" has no title bar and stays put. Both use the same double border. The backdrop is transparent. top and left are viewport coordinates; leave them unset to center the dialog. Focus starts in the first text field, or on the default button. Return presses the default button.

To build an alert, use the plain frame with a row vf-stack holding a 32×32 icon and the message in the display face, then a vf-button-group, each placed with top and left. Set label, since there's no title bar to name it.

vf-separator

A 1px black line. In a menu it's gray and dotted. It has no width of its own, so give it one.

vf-button

A push button with stepped pixel corners. Pressing inverts it. Keyboard focus draws a dashed line under the label.

vf-button-group

A row of buttons, all as wide as the widest, lined up by their faces. A plain flex row lines up the default button by its ring instead. Compare the first two examples.

vf-swatch

A color swatch button. With no color it shows a checkerboard, which also shows through translucent colors. shadow adds a drop shadow.

vf-checkbox

A 13×13 checkbox with a corner-to-corner ✕. Pressing thickens the border to 2px.

vf-radio & vf-radio-group

A 13×13 radio button. The group is the form control: it holds the value and name, and moves focus with a roving tabindex. A vf-radio outside a group works on its own.

vf-text-field

A 22px-tall text input in the display face. Selected text is inverted.

vf-text-area

A multi-line text field. It takes everything vf-text-field does, plus rows. The scrollbar is always there, blank until the text overflows.

vf-number-field

A number field with up and down arrows. The input is 22 system px tall like the other fields; the 25px arrows beside it set the element's height.

vf-select & vf-option

A popup menu. Press, drag to an item and release; or click to open it and click an item. The chosen item blinks, then the menu closes.

The menu opens with the selected item over the control. The control is as wide as its widest option; set min-width to make it wider.

size="small" uses the body face, a 12px control and 10px rows.

no-shadow removes the control's 1px shadow. The open menu keeps its shadow.

A menu taller than the screen is cut off, with an arrow at the edge where items are hidden. Rest the pointer on the arrow to scroll a row at a time. To keep long menus clear of a menu bar, set --vf-popup-inset-top on :root (24px for a vf-menu-bar).

vf-progress-bar

A progress bar: a black fill from the left, or moving diagonal stripes when indeterminate. Give it a width.

vf-slider

A horizontal slider. System 7 had none; this one adapts the later Mac OS slider to 1-bit. Give it a width.

vf-menu-bar, vf-menu & vf-menu-item

Pull-down menus. Press a title, drag to a command and release; or click a title, then click a command. Dragging across the bar switches menus. Releasing over a disabled item, a separator or outside the menu chooses nothing. The chosen item blinks (not under prefers-reduced-motion), then vf-menu-select fires.

A vf-menu also works on its own:

vf-list & vf-list-item

A list box with type-ahead and an always-visible scrollbar. Each row can take an icon in its icon slot, usually a 16×16 vf-img.

vf-scroll-area

A scrolling box with System 7 scrollbars. On the axes it reserves, the scrollbar is always there, blank until the content overflows. In an inactive window the scrollbars go blank. For scrollbars on a window's frame, use vf-window[scrollbars].

vf-fieldset

A group box with its legend in the top border. The legend's background is --vf-surface, white by default. On a colored background, set it to match.

vf-grid

A grid of equal cells with 1px lines between them, for tool palettes, swatch tables and pattern pickers. The lines can be solid or dashed, and draw behind the cells.

Each item is centered in its cell. place-self: stretch fills the cell instead, and is the default with collapse. The grid has no role, keyboard handling or selection; add a role such as group or radiogroup yourself.

vf-stack

A flexbox with gap, pad, width and height in system px. It's one of two ways to lay out components without a stylesheet. The other is top and left, below.

Your own CSS can't size in system px. Each component sets --vf-scale on itself, not on the document, so var(--vf-scale, 1) outside a component is just 1.

A column is as wide as its widest child, and a row as tall as its tallest. Children keep their natural size. The stack draws nothing, has no role, and lets font, line height, color and text selection inherit.

Placing with top and left

Every component takes top and left in system px. Set either one and the element is absolutely positioned, with the other defaulting to 0. Set neither and it stays in flow. Positions are relative to the nearest positioned ancestor. Every kit container is one; your own element needs position: relative, or use a vf-container.

That includes vf-option, vf-menu-item, vf-list-item and a menu bar's vf-menu. A placed row leaves the flow: it no longer counts toward the menu's width, and the rows after it close the gap.

On vf-dialog, top and left are viewport coordinates, and unset means centered. Dragging updates top and left, so read a moved element's position from el.left, not style.left, which holds a calc().

fixed pins an element to the visible area of the nearest scroller, so the content scrolls under it. On its own, fixed puts the element at (0,0). A fixed element must come first in its parent, and it draws over placed siblings. Where nothing scrolls, it behaves like any placed element.

origin sets which point of the element top and left position: top left (the default), top center, top right, center left, center, center right, bottom left, bottom center or bottom right. The point stays on whole system px as the element resizes, rounding toward the start. placementAt(x, y, child) takes the child's origin into account. The Page Setup dialog in vf-dialog uses it to center its title on left="145" and to pin its buttons' bottom-right corner at (274, 168).

vf-container

A plain box with a width and height in system px. It draws nothing unless you set pattern or rule. Children flow normally, or position themselves with top and left.

vf-label

A text label, like "Name:" beside a field. It uses the display face on a 16px line by default.

for works like <label for>: clicking the label focuses the target, and the label becomes its accessible name, unless you've named it already.

vf-paragraph

A paragraph in the body face on a 12px line, or 16px in the display face. It has no margins; space paragraphs yourself.

vf-img

Pixel art. It wraps an <img> and draws one image pixel per system px, scaled with nearest-neighbor. The <img> stays in your light DOM, so alt, srcset and loading work as usual.

vf-icon

A Finder icon: a picture and a name that select, move and rename together.

Put the 32×32 art in the large slot and the 16×16 art in small; size picks which one shows. The art area has a fixed size, so icons in a row line up. Group icons in a vf-icon-field.

color marks the art as a color icon: selecting it darkens the art instead of inverting it. The name inverts either way.

open shows that the icon's window is open: the outline stays and the inside fills with dots. It's drawn from the art you slotted, so it needs no extra file, and cross-origin images work.

Names are never shortened or wrapped. width sets the cell's width and must be even; a longer name overflows it, centered.

The drag outline draws over everything on the desktop, menu bar included. A drag fires vf-drag-start, vf-drag as it moves, and a cancelable vf-drop whose default action moves the icon. What a drop means is up to the page: to file an icon into a folder, cancel the drop and move it yourself. target highlights the folder under the pointer, and the destination's placementAt() converts the drop point into its coordinates.

vf-icon-field

Holds a set of icons, such as the desktop's or a folder window's. It's a multi-select listbox named by label. It draws nothing. Unless you give it a size or fill-width / fill-height, it takes no space, and placed icons position against the desktop or window as if it weren't there.

Focus

Every component can take focus, works from the keyboard and has an accessible name, like the native element it replaces. Full keyboard access came after System 7, so the focus mark is the kit's own: a 1px dashed line under the focused control. It shows for keyboard focus only, never after a click.