The button. Variants, tones, sizes, icons and a non-shifting loading state.

A square button holding one icon. The `label` prop is required — an icon alone has no accessible name.

Joins buttons into one segmented control and squares off the inner corners.

Label, control, hint and error in the right order, wired together. Pass the render-prop children and the ids arrive correct.

A text input with adornments that sit inside the field — the padding adjusts so text never slides under the icon.

A multi-line input on the same tokens as Input, with the same invalid state.

A native select, styled. Native is deliberate — on a phone it opens the platform picker.

Including the indeterminate state, applied as a DOM property through a ref — it cannot be set as an attribute.

One radio, for when you are laying the group out yourself. RadioGroup below does it for you.

A role=switch button rather than a styled checkbox, so the state is announced as on/off.

A real <fieldset>/<legend> pair with a hint and one error covering the whole group.

The standalone label, with the required asterisk — for controls you are wiring up by hand.

One thumb or two, marks, a value bubble and PageUp/PageDown. Drag it.

Steppers, precision, thousands grouping and clamp-on-blur. null is an empty field, which is not the same as 0.

One box per digit, with paste-to-fill, backspace-to-previous and an onComplete callback.

Type to filter, arrow to choose. Swap the matching rule for fuzzy or server-side search.

The same listbox, holding several picks as removable chips, with an optional ceiling.

A magnifier, a clear button and a debounced onSearch that also fires immediately on clear and on Enter.

Show/hide plus a strength meter whose scorer you can replace with your own.

Drag, drop, validate. Rejections come back with a reason each instead of vanishing.

A swatch, a hex field and one-click presets. Emits normalised #rrggbb whatever you type.

Options as data, with a secondary hint line per option and arrow-key roving.

The multi-pick equivalent, with a max that simply ignores ticks past the limit.

A segmented control, single or multiple. Icon-only segments require an ariaLabel.

A real dialog: dimmed page, trapped focus, scroll lock, and nothing rendered at all on the server.

The are-you-sure, with the async case handled: the button stays busy until onConfirm settles, and a rejection leaves the dialog open.

A panel from any edge, with identical focus and escape rules to Modal — from the keyboard they are the same thing.

Anchored to its trigger, position: fixed and portalled, so it flips instead of running off screen — and is never clipped by a table or a card.

Appears on hover and on keyboard focus — focus is the half everyone forgets. The tip never takes pointer events.

A queue, not a cap: extra toasts wait for a slot, timers pause while you hover, and duration 0 stays until dismissed.

Tabs holds the state, TabList the strip, Tab a trigger, TabPanel the content — and panels may live anywhere below.

Panels animate with grid-template-rows 0fr→1fr, so the height is the browser's problem — no measuring, no ResizeObserver.

Too long a trail collapses behind a … that expands in place, so the hidden crumbs stay reachable.

The visible window comes from the exported paginationRange(), so the width is stable while you page through the middle.

Done, current, upcoming and error states, derived by the exported deriveStepStates() so a summary elsewhere agrees with it.

Full menu keyboard support — Up/Down, Home/End, Escape back to the trigger, and typeahead that cycles on a repeated letter.

A sidebar, composed from NavSection and NavItem. An item with no href renders a real button, not an inert link.

One tab stop for the whole bar; the arrow keys move inside it. That is the ARIA toolbar pattern.

Initials are always rendered underneath; the image simply stops covering them when it fails. No layout shift, nothing to configure.

Overlapping faces with a real +N element — not a pseudo-element, so it survives copy-paste and screen readers.

A KPI block. invertDelta exists because the arrow and the colour are different questions — churn up is a rise and bad news.

An <ol>, because the order carries meaning. The connector is drawn by CSS, so items of any height stay joined.

A real <dl>, each pair wrapped in a div so the label and value stay associated for assistive tech.

The nothing-here-yet panel. action is a slot, so two buttons or a file input fit without a prop for each.

A chip whose remove control is a real button with its own label — announced as “Remove design”, not as an anonymous ×.

Type a tag, press Enter. Paste a spreadsheet column, get one tag per line. Backspace on an empty field removes the last.

Halves are a clipped copy of the same glyph, so a custom icon gets halves free. Interactive ratings are a real slider role.

cmd+k becomes two caps and a separator, because one cap reading “cmd+k” lies about which keys you press.

Inline code, for a flag or a path inside a sentence.

A code block with a copy button. The prompt is rendered but never copied, so “$ npm i” puts “npm i” on the clipboard.

$npm i @lacspace/components

With a label it stays a separator for assistive tech and grows two line segments around the text.

The ARIA tree pattern in full: Right opens then steps in, Left closes then steps out, and only one row is tabbable.

Bars scale to the largest row so the smallest stays visible; the percentage is that row's share of the total. Confusing the two is why dashboards show bars adding to 130%.

One element, sized from the current font by default so it sits on the text baseline.

With lines it renders a paragraph shape, the last line shortened — which reads as text far better than equal-width bars.

With no value it animates indefinitely — the honest way to show work of unknown length.

The compact circular form, for dashboards and cards.

Anything with the danger tone gets role=alert so it is announced immediately; quieter tones stay polite.

A small status pill for table cells, list rows and headers — soft or outline, with an optional status dot.

A bordered surface, plus the parts — CardHeader, CardTitle, CardDescription, CardBody, CardFooter.

A titled region, optionally collapsible. The body stays mounted and is hidden, so form state and scroll position survive a collapse.

One-dimensional layout with a gap from the shared scale, and an optional divider between children.

Give it minColWidth and it reflows on its own container width with no breakpoints at all.

Width-limited, gutter-aware page column. Border-box throughout, so nesting one inside another cannot double the padding.

A titled band with consistent rhythm. The heading gets a stable id and is referenced by aria-labelledby, so the landmark is actually labelled.

Centres its children, with a minHeight for heroes and empty states. The layout job everybody rewrites — here once.

Content is absolutely positioned and clipped, so an image or iframe that reports its own size cannot push the box out of ratio.

Edge shadows toggled by data attributes, so they cost no extra DOM — and a Sticky header that actually sticks inside it.

Empty space. With no size it flexes, pushing its siblings to the ends of the row.

Sizes, tones, weights, truncation, line clamping and a tabular mono option for anything in a column.

level is the tag, size is the look. Coupling them is how pages end up with an h4 before an h2.

Styles raw markup you did not author — rendered Markdown, a CMS field, an email body — without adding a single class to it.

A quotation with its attribution marked up as a footer/cite pair, the way HTML intends.

Real <mark> elements, matched with indexOf rather than a RegExp — so a query full of dots and brackets matches literally instead of exploding.

Middle-ellipsis for ids, hashes and paths. CSS text-overflow can only cut the end, which destroys the half that identifies the thing.