Release v0.3.2 · benface/monowind

A combobox

@monowind/ui/combobox: a listbox under an input, as <mono-combobox> and as React, Vue and Svelte components. The list lines up under the box around the input and its button, not under the button alone.
Filtering is the page's. Hand it the narrowed collection and the items it drops are hidden; the keyboard walks what is left.
Typing stays where the reader put it: the caret doesn't jump to the end as a keystroke reopens the list.

<mono-*> elements. defineMonoUi() (the CDN bundle calls it) registers <mono-menu>, <mono-submenu>, <mono-listbox>, <mono-select>, <mono-combobox>, <mono-dialog>, <mono-popover> and <mono-tooltip>. The markup is the component: its parts are the marked descendants, attributes are the machine's props, callbacks are bubbling events, and the element mounts itself as its parts arrive. It is the path for htmx, Alpine, Turbo, Datastar, Solid, or plain HTML.
React, Vue and Svelte compound components for the same seven, each in its framework's idiom — props for React, v-model for Vue, bind: for Svelte — with asChild (a child snippet in Svelte) to render a part as your own element.
Forms. A select's hidden native control posts its value, follows a form's reset and a disabled fieldset, posts nothing for a value it has no option for, and is server-rendered with its options, so a form sent before the page's script runs posts the initial value. data-selected on an item in the markup is the initial selection, and marks the selection on every path.
@monowind/ui-react requires React 19.

visibility: invisible keeps the box's place and paints none of it, a visible descendant still showing.
Anchor positioning: anchor() and anchor-size() from inline styles and arbitrary-value utilities, every fallback tried in position-try-order and the last one that fit kept, and position-visibility, so a menu hides when its button scrolls out of view.
pointer-events: none passes clicks, hover and the cursor through to what lies beneath, as it does natively — a badge over a button, a disabled link — and pointer-events-auto takes them back.
A block inside an inline element splits it, as CSS does, instead of vanishing — so a <mono-*> element wrapped around paragraphs keeps them.
Flex and grid sizing follow the spec where they took shortcuts: an item's automatic minimum is capped by its own width and max, cross-axis margins count, a grid-cols-N item keeps its track while a long word overflows, and rows under a min-height size as the browsers do.
Color: opacity on an inline element fades what it holds and not the background under it; gradients of wide-gamut Tailwind colors in oklab, oklch and hsl match Chromium and Firefox; background fades ease with cubic-bezier() (Tailwind's default easing had run linear), steps() and linear(); a plain background honors background-clip.

A page of 300 bordered boxes reaches interactive in 231 ms against 338: a font settling no longer restyles every grid span.
The companion stylesheet's own rules stopped making Chromium walk every element's ancestors: style work on a page of 300 paragraphs drops from 126.9 ms to 120.4.
A pointer move over a transformed element is back to microseconds.

Any CSS tool styles the grid: UnoCSS, Panda, vanilla-extract and StyleX examples, since the engine reads computed styles, whatever wrote them. And htmx, Alpine, Turbo and Datastar examples driving the elements with attributes alone.
@monowind/vite gives the page one engine in development too, packages built on it included.

At a raised leading, box-drawing strokes keep the weight the font draws instead of thickening with the row.
Scrolling: a reveal clears the container's border, a key scroll is never cancelled by a relayout, and a press on a scrollbar's track pages.
A border drawn in cells covers what scrolled under it, for clicks too.
h-screen md:h-auto respects md.
The playground's editor no longer zooms Safari in on a tap.