fx-calloutSemi-transparent neutrals composite rather than cover. Here is the same callout nested inside itself, tinting twice:
Alpha neutrals composite over paper and over a tint alike.
Flexoki × Notion primitives
Styled primitives, not pre-composed layouts. Every tile below is one component, composed by this page and themed only by tokens — change the accent or mode in the rail and the whole wall re-themes at once.
The look
Hover is a 60ms background wash, borders are hairline, headings semibold-not-black, and the alpha neutrals are re-derived per mode.
Actions
Buttons and the sticky-pressed controls built from the same chrome.
fx-buttonhref renders an anchor; every variant shares one focus ring.
fx-icon-buttonfx-button-groupWelded into one unit: shared radii, hairline dividers.
fx-toggleA button whose action sticks — aria-pressed, not a checkbox.
fx-toggle-groupSingle is clearable; multiple lets any number be on.
Forms
Every control is a form-associated custom element: the value reaches
FormData, resets with its form, and runs constraint validation.
fx-field · fx-input · …Submit reads FormData and nothing else.
fx-input-groupOne field surface around a bare control and its addons.
fx-input-otpOverlays
Six on one in-house positioner — placement, flip, shift, clamp, reposition. Dialog
and drawer are the native <dialog>.
fx-popoverfx-tooltipfx-hover-cardfx-dialog · fx-drawerA drawer is the same modality as a dialog, pinned to an edge. Escape closes it and focus returns to the button that opened it.
The top layer, the inert page and focus containment are the platform's.
fx-alert-dialogA confirm that must be answered — not dismissed by a stray click.
fx-toasterContent & data
The quiet markers and surfaces that annotate real content.
fx-calloutfx-alertThe status message, where fx-callout is the editorial aside.
fx-eyebrowfx-inline-link
The
fx-badge · fx-avatarThe badge is the Notion marker: near-square, small radius, tight padding.
fx-kbd
Press
fx-cardfx-blockquotefx-code<fx-callout>
<span slot="leading">🪶</span>
<span>That is the whole setup.</span>
</fx-callout>
fx-table| Primitive | Family | Parts |
|---|---|---|
| fx-rail-item | Navigation | 4 |
| fx-input | Forms | 4 |
| fx-popover | Overlays | 2 |
fx-accordionClosing a section the reader did not ask to close is how comparing two sections becomes impossible.
Keyboard behaviour, the accessibility tree and in-page find all work without being reimplemented.
fx-list · fx-rowfx-row and fx-rail-item are one primitive, aliased twice.
fx-page-headerFeedback
State while the page is loading, empty, or reporting a result.
fx-spinner · fx-progressfx-inline-statusfx-skeletonfx-empty-stateLayout
Spacing attributes map to the scale, never to a number someone typed — correct before any JavaScript upgrades them.
fx-stack · fx-gridfx-divider · fx-aspectfx-scroll-areaComposition proof
Two unrelated sidebars, built from exactly the same primitives, with no shared structure. Both read as the same styling; neither as any one app's sidebar.
fx-railfx-railTheming, three ways
In increasing power — and the first needs no JavaScript at all.
--accentOverride any token on any scope; an unlayered rule always wins.
::part(base)tokens.cssThe values the controls in the rail resolve to, in the current theme.