@whiskeyjack

Toolbar pill of icon actions that collapse and grow as the page's context changes.

The three-phase content row below a floating header: optional left sidebar, main region, optional right rail, each gated on the layout variants.

The app layout skeleton: a fixed-height shell or a document scroller, with a frosted header, nav pills, and the main scroll region.

Tone-tinted pill label on the semantic color scales, for status and classification at a glance.

A travelling light around an element's edge, for the one thing on a screen that needs the eye.

Bottom sheet on mobile, centered dialog on desktop. Swipe, backdrop, Escape, and hardware Back all dismiss it.

Pill-shaped frosted bottom navigation, hand-composed from BottomNavItem and BottomNavAction.

Side-by-side buttons that share a row and stack full-width when they no longer fit.

The action button. Labels wrap to two lines rather than overflowing, so long translated text stays inside the pill.

GitHub-contributions-style activity heatmap, in squares or check-in dots.

The elevated surface primitive, with header, title, description, content, and footer slots.

Pick-any tile grid: the multi-select counterpart to ToggleGroup.

A single checkbox, with the mixed state a parent selection needs.

Focusable swatch button that opens the OS-native color picker and returns the chosen hex.

Tap-again-to-confirm button for a destructive or disruptive action, with the armed state announced to assistive tech.

Caret-and-label text button that expands and collapses an adjacent region, with aria-expanded and the touch and focus floors built in.

A single action in a BottomDrawer footer: plain, form-submit, or tap-again-confirm.

Centered icon tile, title, subtitle, and optional call to action for an empty list or a fresh install.

Header copy of a field whose primary lives in a scroller: grows in while the primary is scrolled away, collapses when it returns.

Labeled text field that wires a real label to the input for you, with an optional hint, error and password reveal.

Data-driven bottom nav that collapses its items into a hamburger menu when they and the toolbar would overflow the viewport.

Inline tone-tinted status box for context-bound messages, with each tone setting its own ARIA live-region role.

React context that lets any page set the desktop header title.

The accent progress primitive: determinate fill, busy sweep, open-ended indicator, or segment accumulation against a tally.

Frosted pill and spinner that slides down as you pull; the visual companion to usePullToRefresh.

Drag-to-reorder list with an accessible arrow-button fallback, so it works by pointer, touch, and keyboard.

Read-only auto-hiding scroll thumb for scrollers whose native scrollbar would run behind floating chrome.

Search pill: a rounded-full text input with a leading magnifier and a trailing clear button.

Compact pick-one control: one bordered strip, divided into segments.

Styled native select for a one-of-n choice with more options than a segmented control can show.

TabBar's wide-layout counterpart: a vertical tab rail for a desktop sidebar, with each item's progress pinned to its bottom edge.

Range input with an optional mono value readout beside its label.

Metro-style pivot tabs with a sliding accent underline that doubles as each tab's progress bar.

Multi-line field with an optional character readout and auto-grow.

Floating notification pill fixed below the header, for app-level messages and background work.

Segmented tile control for one-of-n choices, such as a light / dark / system theme picker.

Switch control with a label and optional description, for a single on/off setting.

Retint the whole UI from one accent color, with a WCAG-legible foreground picked automatically.

Announce a message to assistive technology through a shared live region.

The geometry of a compact control: a small pill, chip or segment that sits on a line with body text.

Detect right-to-left direction for JS-driven interactions that CSS cannot reach.

Map Android's wallpaper-derived Material You palette onto the design-system surface and accent tokens.

Combine an internal ref with a forwarded one.

The selectable-tile class recipe shared by ToggleGroup and CheckboxGroup.

Drag-to-reorder list logic with an accessible keyboard path, behind ReorderList.

Trap focus inside an overlay while it is open, and restore it to the trigger on close.

Detect touch versus mouse input, for controls that phrase or size themselves differently.

Read the wide / xlwide layout gates in JS, for a decision CSS cannot express.

Double-tap the nav item for the page you are already on to bring the top and the active tab back into view, then to go to the page's start.

Touch pull-to-refresh that coexists with tab swipes and overscroll-behavior: none.

Respect the user's reduced-motion preference in JS-driven motion.

Move focus to the main content on route change, so keyboard and screen-reader users land in the new page.

Vertical edge-fade masks for a height-capped scrollable panel; returns the CSS class to apply.

Scroll metrics (thumb size, position, visibility) that drive ScrollIndicator.

Scroll the app's real scroll region – to the top on a first visit, back to where you left it on a return – whichever scroller the Layout chose.

Measures the active item in a tab-like container so one element can animate between items instead of the highlight jumping.

Watches a field's primary instance and reports when it scrolls out of view, so a HeaderStandIn can speak for it.

Swipe between tabs with an axis-locked touch gesture that flips direction under RTL.

Edge-fade masks for a horizontally overflowing tab strip; returns the CSS class to apply.

The theme engine: light, dark, system, and OLED, with persistence and theme-color meta kept in sync.

Names which way a sliding indicator is travelling, so each of its edges can take its own easing.

Tailwind class merging (clsx plus tailwind-merge).