# Aurea UDS

> A design system with one look for the web (React and plain CSS) and for React Native, made to be read by people with low vision.

Every page below is Markdown. The whole documentation in one file: https://aureauds.dev/llms-full.txt. Notes for AI coding agents: https://aureauds.dev/aurea-agents.md.

## Getting Started
- [Introduction](https://aureauds.dev/getting-started.md): An open-source design system with one look for the web and for React Native, made to be read by people with low vision.
- [Quick Start](https://aureauds.dev/docs-quick-start.md): Install the packages, load the fonts before the core, and wrap the app in the provider.
- [Design Principles](https://aureauds.dev/docs-design-principles.md): The ten rules behind every Aurea component, and how each one is checked.
- [Frameworks](https://aureauds.dev/docs-frameworks.md): Use Aurea with Next.js, Vite, plain HTML or React Native.
- [Showcase](https://aureauds.dev/docs-showcase.md): What is built with Aurea today, and how to get your project listed here.
- [Roadmap](https://aureauds.dev/docs-roadmap.md): Where Aurea stands, and what has to be true before version 1.0.
- [Colors](https://aureauds.dev/docs-colors.md): The color roles of Aurea, what each one is for, and their values in the light and dark themes.
- [Theming](https://aureauds.dev/docs-theming.md): How Aurea's tokens become CSS custom properties, the three attributes that switch them, and how to change a value.
- [Dark Mode](https://aureauds.dev/docs-dark-mode.md): Switch between the light and dark themes, follow the system, and save the choice.
- [Styling](https://aureauds.dev/docs-styling.md): Style Aurea with props first, then with a class name, plain CSS and the tokens.
- [Animation](https://aureauds.dev/docs-animation.md): The motion Aurea ships, the tokens behind it, and how it stops when the user asks for less movement.
- [Composition](https://aureauds.dev/docs-composition.md): Build bigger pieces from parts, slots, item lists and the render prop.
- [Density](https://aureauds.dev/docs-density.md): Three sizes for the same interface, compact, comfortable and spacious, switched with one attribute.
- [Icons](https://aureauds.dev/docs-icons.md): The Phosphor icon set, how to serve its sprite, the filled form for the selected item, and how to add your own drawing.
- [RTL](https://aureauds.dev/docs-rtl.md): Mirror Aurea for right-to-left languages with two settings, and know what stays in place on purpose.
- [Accessibility](https://aureauds.dev/docs-accessibility.md): What Aurea does for people with low vision, keyboard and screen-reader users, and how each part is checked.
- [LLMs.txt](https://aureauds.dev/docs-llms-txt.md): Files that let AI coding assistants read the Aurea documentation.
- [Agent Skills](https://aureauds.dev/docs-agent-skills.md): Give your AI coding assistant the rules for building interfaces with Aurea.
- [AGENTS.md](https://aureauds.dev/docs-agents-md.md): Short Aurea rules to put in your project's AGENTS.md, for AI coding agents.

## Components
- [AccessGate](https://aureauds.dev/accessgate.md): Hides an action the user cannot take, or shows it inert with the reason.
- [Accordion](https://aureauds.dev/accordion.md): Stack of expandable/collapsible sections.
- [AgentCard](https://aureauds.dev/agentcard.md): Who an agent is, what state it is in, and what it can do.
- [AgentInspector](https://aureauds.dev/agentinspector.md): The detail of one agent: configuration, tools, instructions.
- [AgentStatus](https://aureauds.dev/agentstatus.md): The state of an agent, in one fixed vocabulary.
- [Alert](https://aureauds.dev/alert.md): Inline message that stays in context.
- [AppShell](https://aureauds.dev/appshell.md): Application frame: sidebar, topbar and main content.
- [AspectRatio](https://aureauds.dev/aspectratio.md): A box that keeps its proportion, whatever the width.
- [AureaProvider](https://aureauds.dev/aureaprovider.md): Root provider: strings, icon sprite, text direction, toasts and where popups mount.
- [AutomationCard](https://aureauds.dev/automationcard.md): A rule that runs on its own: when this, then that — and a switch.
- [Avatar](https://aureauds.dev/avatar.md): Represents a user or entity with image or initials.
- [AvatarGroup](https://aureauds.dev/avatargroup.md): Overlapping stack of avatars, with a count for the ones that do not fit.
- [Badge](https://aureauds.dev/badge.md): Short metadata label or status marker.
- [Banner](https://aureauds.dev/banner.md): Prominent message spanning a wide region. variant="consent" is the cookie notice, with the preferences window.
- [BlockEditor](https://aureauds.dev/blockeditor.md): The frame around content blocks — order, handle, removal, and the slot where your own editor goes. Aurea does not own the rich text.
- [BottomNav](https://aureauds.dev/bottomnav.md): Floating bar pinned to the bottom that holds an application's top-level navigation.
- [Breadcrumb](https://aureauds.dev/breadcrumb.md): Trail showing the current location in a hierarchy.
- [Button](https://aureauds.dev/button.md): Trigger for an action or navigation. The primary interactive control.
- [ButtonGroup](https://aureauds.dev/buttongroup.md): Buttons joined into one capsule — no gap, rounded only at the ends, a hairline between them — that share their variant, size and disabled state.
- [Calendar](https://aureauds.dev/calendar.md): Month grid for picking a day, a range, or several days.
- [Card](https://aureauds.dev/card.md): Floating surface that groups related content.
- [Carousel](https://aureauds.dev/carousel.md): Slides that snap, with arrows and dots. The scroll container is the engine.
- [Chart](https://aureauds.dev/chart.md): Sized, named surface that hosts a Recharts chart wearing Aurea tokens.
- [ChartLegend](https://aureauds.dev/chartlegend.md): Which colour is which series, as a plain list under the chart.
- [ChartTooltip](https://aureauds.dev/charttooltip.md): Values under the pointer, on the same tooltip surface as the rest of Aurea.
- [Checkbox](https://aureauds.dev/checkbox.md): Binary or tri-state selection control.
- [CheckboxGroup](https://aureauds.dev/checkboxgroup.md): A group of checkboxes with a label, a description and an error, that keeps the list of what is checked.
- [Chip](https://aureauds.dev/chip.md): Another name for Badge, for those who know this piece as a chip. Identical in everything: the same props, the same look, the same behaviour.
- [CloseButton](https://aureauds.dev/closebutton.md): The round close button: a 24 circle on the neutral fill with a 16 X in the Bold stroke, named "Close" by itself.
- [Cluster](https://aureauds.dev/cluster.md): Horizontal wrapping/layout primitive.
- [Code](https://aureauds.dev/code.md): A short piece of code inside a sentence. For a block of code use CodeBlock.
- [CodeBlock](https://aureauds.dev/codeblock.md): Read-only code display, with line numbers and syntax colors when you pass the highlighter.
- [CodeEditor](https://aureauds.dev/codeeditor.md): Editable code surface.
- [Collapsible](https://aureauds.dev/collapsible.md): One section that opens and closes, with the open state owned by the app.
- [ColorArea](https://aureauds.dev/colorarea.md): The square where you pick two channels of a colour for the third one fixed — saturation and brightness by default, or any pair of HSB, HSL or RGB — by pointer, touch or keyboard. The screen reader hears the channels and the colour's name.
- [ColorField](https://aureauds.dev/colorfield.md): A field for a colour: the swatch in front and the code — hex, rgb(), hsl() or hsb() — applied on Enter or when it loses focus; or one channel as a number. Inside a Field, the label, description and error are the Field's.
- [ColorPicker](https://aureauds.dev/colorpicker.md): A swatch with a name that opens a window to pick a colour: the area, the hue track and the hex field — or, as the swatches variation, a closed palette with the hex field.
- [ColorSwatch](https://aureauds.dev/colorswatch.md): A round sample of a colour, with a thin inner ring so a colour the same as the background still shows, and a checkerboard under a transparent colour. With options, a group of swatches to pick one from (a closed palette).
- [Combobox](https://aureauds.dev/combobox.md): Text field with an autocomplete listbox.
- [CommandPalette](https://aureauds.dev/commandpalette.md): The command palette with the engine wired up: type, filter, run.
- [CommandPaletteShell](https://aureauds.dev/commandpaletteshell.md): Overlay shell for a searchable command palette.
- [ConfirmDialog](https://aureauds.dev/confirmdialog.md): Alert dialog for a decision that cannot be taken back.
- [Container](https://aureauds.dev/container.md): The reading width of a website page: centred, capped, with side gutters that grow with the screen.
- [ContainerScope](https://aureauds.dev/containerscope.md): Declares an Aurea container: the box that container-responsive values measure themselves against.
- [ContextMenu](https://aureauds.dev/contextmenu.md): Actions menu opened by right-click or long-press.
- [CostMeter](https://aureauds.dev/costmeter.md): Spend against a ceiling, with the soft and hard limits kept apart.
- [DataGrid](https://aureauds.dev/datagrid.md): Interactive grid with navigation, sort and selection.
- [DataList](https://aureauds.dev/datalist.md): Key/value or item list for structured data.
- [DataState](https://aureauds.dev/datastate.md): One region, four faces: loading, failed, empty, or the content itself.
- [DatePicker](https://aureauds.dev/datepicker.md): A field that opens a calendar to pick a date, or a range of dates.
- [DependencyGraph](https://aureauds.dev/dependencygraph.md): Who depends on whom, on a canvas you can pan, zoom and build on.
- [Dialog](https://aureauds.dev/dialog.md): Modal surface that interrupts for a focused task.
- [Drawer](https://aureauds.dev/drawer.md): Panel that slides in from a screen edge.
- [DropdownMenu](https://aureauds.dev/dropdownmenu.md): Menu of actions triggered by a control.
- [EmptyState](https://aureauds.dev/emptystate.md): Placeholder for an empty or zero-result view.
- [EventStream](https://aureauds.dev/eventstream.md): What happened, in order, live.
- [Field](https://aureauds.dev/field.md): Form-field wrapper: label, control, description and error.
- [FileInput](https://aureauds.dev/fileinput.md): Upload control with progress and validation.
- [Form](https://aureauds.dev/form.md): Shows the error and collects the values. It does not decide what an error is.
- [Gallery](https://aureauds.dev/gallery.md): A grid of pictures you can pick from, and enlarge in the dialog that already exists.
- [Grid](https://aureauds.dev/grid.md): Two-dimensional layout primitive.
- [Header](https://aureauds.dev/header.md): The top bar of an app or a website — also called header, navbar or top bar. Brand, the site's links with the current page marked, actions, and on a phone a menu button that drops the links below the bar.
- [Heading](https://aureauds.dev/heading.md): A heading, h1 to h6. The level picks both the element and the size, as in the reference library.
- [HealthMatrix](https://aureauds.dev/healthmatrix.md): What is up, in a grid.
- [HoverCard](https://aureauds.dev/hovercard.md): Rich preview that opens when the pointer rests on a link, and whose content can be reached.
- [HumanApproval](https://aureauds.dev/humanapproval.md): The gate: what is about to happen, and a person's decision.
- [Icon](https://aureauds.dev/icon.md): Icon primitive rendered from a sprite.
- [IconButton](https://aureauds.dev/iconbutton.md): Icon-only button with a required accessible label.
- [Image](https://aureauds.dev/image.md): An image that reserves its box before the bytes arrive, and falls back when they never do.
- [Input](https://aureauds.dev/input.md): Single-line text entry control.
- [InputGroup](https://aureauds.dev/inputgroup.md): The box that looks like a field and holds the control plus whatever is glued to it.
- [InputGroupAddon](https://aureauds.dev/inputgroupaddon.md): What sits glued to the control inside an InputGroup: a glyph, a prefix, a button.
- [InterAgentMessage](https://aureauds.dev/interagentmessage.md): A message from one agent to another, where the direction is the data.
- [InvocationPanel](https://aureauds.dev/invocationpanel.md): One execution: what was asked, the steps, what came out.
- [Kbd](https://aureauds.dev/kbd.md): A keyboard key or shortcut, shown as the user would press it. Renders the <kbd> element.
- [KPI](https://aureauds.dev/kpi.md): Single headline metric with optional delta.
- [Label](https://aureauds.dev/label.md): The field label on its own, for when you are not using Field.
- [Link](https://aureauds.dev/link.md): A text link: medium weight in the link colour, no underline until hovered; external opens in a new tab with the arrow.
- [ListBox](https://aureauds.dev/listbox.md): A standalone list of options with sections, descriptions and icons — choose none, one or many, or use it as a list of actions.
- [LogStream](https://aureauds.dev/logstream.md): Live-appending stream of log lines.
- [MediaEmbed](https://aureauds.dev/mediaembed.md): A third-party video page (YouTube, Vimeo) inside the Aurea frame, loaded only when asked for.
- [MediaPlayer](https://aureauds.dev/mediaplayer.md): Video/audio player with full controls.
- [MediaPlayerShell](https://aureauds.dev/mediaplayershell.md): Layout shell hosting a media player and its chrome.
- [MemoryLedger](https://aureauds.dev/memoryledger.md): What the agent stored, recalled or forgot — and where it came from.
- [Menubar](https://aureauds.dev/menubar.md): The application menu row — File, Edit, View — where an open menu hands over to its neighbour.
- [MessageComposer](https://aureauds.dev/messagecomposer.md): Input surface for composing a message.
- [MessageList](https://aureauds.dev/messagelist.md): Scrolling list of conversation messages.
- [ModelUsage](https://aureauds.dev/modelusage.md): Consumption split by model: which one took how much.
- [MultiCombobox](https://aureauds.dev/multicombobox.md): Combobox that accepts multiple selected values.
- [NavList](https://aureauds.dev/navlist.md): A list of tappable rows that open something: leading icon, label, an optional second line, an optional trailing value, and the chevron that says "this goes somewhere". The brick of every settings screen.
- [NotificationCenter](https://aureauds.dev/notificationcenter.md): Inbox surface aggregating notifications.
- [NumberField](https://aureauds.dev/numberfield.md): Numeric field with decrease and increase controls, for a quantity you nudge.
- [OTPField](https://aureauds.dev/otpfield.md): One box per character, for a verification code the user types or pastes.
- [Pagination](https://aureauds.dev/pagination.md): Navigate across pages of content.
- [Paragraph](https://aureauds.dev/paragraph.md): A paragraph of body text in one of three sizes.
- [PasswordField](https://aureauds.dev/passwordfield.md): A password field with a show/hide control that announces what it does.
- [Popover](https://aureauds.dev/popover.md): Anchored floating surface with content or interaction.
- [Progress](https://aureauds.dev/progress.md): Progress bar: determinate, or indeterminate when the total is not known yet, with a supporting detail and a tone.
- [ProgressCircle](https://aureauds.dev/progresscircle.md): Progress as a ring that fills from the top; without a value it spins.
- [Prose](https://aureauds.dev/prose.md): The skin for long-form text. It is not the parser — that stays yours.
- [QRCode](https://aureauds.dev/qrcode.md): Scannable QR code rendered as a styled SVG with Aurea soft geometry.
- [Radio](https://aureauds.dev/radio.md): Single choice within a group.
- [RadioGroup](https://aureauds.dev/radiogroup.md): A group of radio options with a label, a description and an error, that keeps the chosen value — vertical or horizontal. RadioGroup.Item is the Radio.
- [Range](https://aureauds.dev/range.md): Slider for selecting a value from a range.
- [SearchField](https://aureauds.dev/searchfield.md): Text field specialized for search, with clear affordance.
- [Section](https://aureauds.dev/section.md): An edge-to-edge band of a website page, with its own surface, site spacing and, optionally, its own theme. variant="footer" makes it the site's footer; variant="hero" makes it the page opening.
- [SegmentedControl](https://aureauds.dev/segmentedcontrol.md): Choose one option from a compact inline set.
- [Select](https://aureauds.dev/select.md): Choose a single value from a closed list, in the Aurea skin.
- [Separator](https://aureauds.dev/separator.md): A rule between things. Horizontal or vertical, one hairline in the border colour — the thing a sidebar uses between sections and a toolbar uses between groups.
- [Sidebar](https://aureauds.dev/sidebar.md): Floating side panel that holds the application's navigation.
- [Skeleton](https://aureauds.dev/skeleton.md): Placeholder shown while content loads.
- [Slider](https://aureauds.dev/slider.md): Drawn slider: label and value on top, a 20 track with the fill, a capsule thumb. One value or a range of two, horizontal or vertical, number formatted by Intl.
- [SortableList](https://aureauds.dev/sortablelist.md): Reorder by dragging — and by keyboard, which is the reason it may exist at all.
- [Spinner](https://aureauds.dev/spinner.md): Indeterminate activity indicator for a wait with no known end.
- [Stack](https://aureauds.dev/stack.md): Vertical spacing/layout primitive.
- [Status](https://aureauds.dev/status.md): Operational condition of a thing: a coloured dot plus a readable label.
- [Stepper](https://aureauds.dev/stepper.md): Progress through numbered steps, for a task that happens in a fixed order.
- [Switch](https://aureauds.dev/switch.md): On/off toggle.
- [Table](https://aureauds.dev/table.md): Presents rows and columns of data — also a comparison table: groups of rows, the row's name pinned while scrolling sideways, the header pinned while scrolling down, the best value marked and a 'differences only' switch. Every cell has tabular figures, so price and year columns line up.
- [TableOfContents](https://aureauds.dev/tableofcontents.md): In-page index of a document's sections. Sticky beside the content, marks the section in view.
- [Tabs](https://aureauds.dev/tabs.md): Switch between peer views in the same context.
- [TagGroup](https://aureauds.dev/taggroup.md): A wrapping row of tags with a label: none, one or several can be selected, and each can be removed.
- [TaskQueue](https://aureauds.dev/taskqueue.md): The work queue: what is waiting, what is running, what failed.
- [Text](https://aureauds.dev/text.md): Text in one of a closed list of roles — a heading level, body text or code — never a loose size. The reference library's Typography model.
- [Textarea](https://aureauds.dev/textarea.md): Multi-line text entry control.
- [ThemeToggle](https://aureauds.dev/themetoggle.md): The light/dark switch, with colour in the glyph: a dark moon in the light theme, the brand yellow sun in the dark one.
- [Timeline](https://aureauds.dev/timeline.md): Chronological sequence of events.
- [Toggle](https://aureauds.dev/toggle.md): Two-state button that stays pressed, for a setting you flip in place.
- [ToggleGroup](https://aureauds.dev/togglegroup.md): Several toggles sharing one state, with arrow-key navigation between them.
- [Toolbar](https://aureauds.dev/toolbar.md): Container of actions with roving-tabindex keyboard navigation.
- [ToolbarButton](https://aureauds.dev/toolbarbutton.md): Button tuned for use inside a Toolbar.
- [ToolbarGroup](https://aureauds.dev/toolbargroup.md): Structural grouping of toolbar items.
- [ToolbarSeparator](https://aureauds.dev/toolbarseparator.md): Visual divider between toolbar groups.
- [ToolPermission](https://aureauds.dev/toolpermission.md): What each tool may do, without asking again.
- [Tooltip](https://aureauds.dev/tooltip.md): Brief label revealed on hover or focus.
- [Topbar](https://aureauds.dev/topbar.md): The old name of Header. Same component, still works the same; use Header.
- [TraceTimeline](https://aureauds.dev/tracetimeline.md): How long each step took, as a waterfall.
- [TreeView](https://aureauds.dev/treeview.md): Hierarchical, expandable tree of items.

## Hooks
- [useAureaStrings](https://aureauds.dev/useaureastrings.md): Read the string dictionary the provider is using, to translate your own labels with it.
- [useAureaTheme](https://aureauds.dev/useaureatheme.md): Read theme and density straight from the document, and set them — for a host that owns the <html> attributes.
- [useDensity](https://aureauds.dev/usedensity.md): Read the current density and switch it, from anywhere inside AureaProvider.
- [usePortalContainer](https://aureauds.dev/useportalcontainer.md): The node every Aurea popup is mounted into, as configured once on AureaProvider.
- [useReorder](https://aureauds.dev/usereorder.md): The accessible drag-and-drop reordering protocol, shared by SortableList and BlockEditor.
- [useSidebar](https://aureauds.dev/usesidebar.md): The sidebar state — collapsed, setCollapsed, toggle — inside Sidebar.Provider or an AppShell with sidebarCollapsible.
- [useSpriteUrl](https://aureauds.dev/usespriteurl.md): Read where the provider is loading icon glyphs from.
- [useTheme](https://aureauds.dev/usetheme.md): Read the current theme and switch it, from anywhere inside AureaProvider.
- [useToast](https://aureauds.dev/usetoast.md): Raise a transient notification from anywhere inside AureaProvider.
- [useValorResponsivo](https://aureauds.dev/usevalorresponsivo.md): Resolves a Responsive<T> into the single value that applies right now — by viewport, by container, or not at all.

## Patterns
- [Accordion · Questions on a marketing page](https://aureauds.dev/pattern-accordion-questions-on-a-marketing-page.md): The title is the question in the reader's own words, not a category. An accordion earns its place when the reader wants one answer, not all of them — otherwise plain headings read faster.
- [Accordion · Advanced options, folded away](https://aureauds.dev/pattern-accordion-advanced-options-folded-away.md): The defaults are enough for most people, so the rest starts closed. Folding is not hiding: the summary line says what is inside, so nobody has to open it to find out.
- [Alert · Inline notice](https://aureauds.dev/pattern-alert-inline-notice.md): Context that belongs to the section it sits in — an Alert stays put; a Toast would vanish.
- [Alert · Failure with retry](https://aureauds.dev/pattern-alert-failure-with-retry.md): What broke, plus the way out in the same block. An error without an action is a dead end.
- [Alert · Degraded service](https://aureauds.dev/pattern-alert-degraded-service.md): Page-width notice for something that affects the whole surface, dismissible by the reader.
- [Alert · Nothing found](https://aureauds.dev/pattern-alert-nothing-found.md): The empty result of a filter: says why it is empty and offers the way back.
- [Alert · Determinate upload](https://aureauds.dev/pattern-alert-determinate-upload.md): Known progress with a label. Unknown progress is a Skeleton or a spinner, never a fake bar.
- [Alert · Loading placeholder](https://aureauds.dev/pattern-alert-loading-placeholder.md): The shape of the content before the content — Skeleton is aria-hidden by design.
- [AppShell · The frame of a whole application](https://aureauds.dev/pattern-appshell-the-frame-of-a-whole-application.md): Brand and global actions on the topbar, the sections on the sidebar, the screen in the middle. It is the only component that owns page landmarks — one per document, never nested — and it emits the skip link for free, which is what closes WCAG 2.4.1 without the consumer writing anything.
- [AppShell · A topbar joined to the page](https://aureauds.dev/pattern-appshell-a-topbar-joined-to-the-page.md): `topbarVariant="flush"` drops the floating surface and welds the bar to the top edge. Pick one of the two per application and hold it: floating on one screen and flush on the next reads as two products, not as two screens.
- [AppShell · The sidebar out of the way](https://aureauds.dev/pattern-appshell-the-sidebar-out-of-the-way.md): `sidebarCollapsed` is controlled by the consumer, like `open` on the palette: the shell never decides on its own that the navigation should disappear. The toggle in the brand slot is emitted by the shell and drives the same sidebar on small screens, where it opens as a popover instead of a column.
- [AppShell · The sidebar from top to bottom](https://aureauds.dev/pattern-appshell-the-sidebar-from-top-to-bottom.md): `layout="sidebar"` drops the bar that spans the window: the sidebar runs from the top to the bottom, the brand lives at its top and the person at its bottom, and only the list scrolls. The collapse button sits beside the page title (`AppShell.SidebarToggle`).
- [AppShell · A bar over the content alone](https://aureauds.dev/pattern-appshell-a-bar-over-the-content-alone.md): Pass `topbar` and the bar comes back over the content column only, with the collapse button first in it. The sidebar keeps running from top to bottom.
- [AppShell · The sidebar that becomes a capsule](https://aureauds.dev/pattern-appshell-the-sidebar-that-becomes-a-capsule.md): `sidebarCollapsible="capsule"`: collapsed, the floating sidebar keeps its rail of icons with the control radius — a capsule — instead of the card radius. The button at the seam collapses and expands it, and so does Ctrl+B (Cmd+B on a Mac).
- [AppShell · The sidebar that leaves the screen](https://aureauds.dev/pattern-appshell-the-sidebar-that-leaves-the-screen.md): `sidebarCollapsible="offcanvas"`: collapsed, the sidebar leaves the screen and the content takes the whole width. The button beside the title brings it back. It is the reference's off-canvas mode.
- [AppShell · The collapse button inside the sidebar](https://aureauds.dev/pattern-appshell-the-collapse-button-inside-the-sidebar.md): `sidebarToggle="none"` keeps the shell from placing its own button, and the app puts `Sidebar.Toggle` where it wants — here, as the `action` of the brand at the top of the sidebar. Collapsed, the button moves under the logo.
- [AppShell · Sections with the list beside them](https://aureauds.dev/pattern-appshell-sections-with-the-list-beside-them.md): `sidebarPanel="docked"`: the first level of `navItems` becomes sections — a rail of icons — and the list of the chosen section sits in a panel beside it. Collapsing hides the panel and keeps the rail.
- [AppShell · Sections with the list over the page](https://aureauds.dev/pattern-appshell-sections-with-the-list-over-the-page.md): `sidebarPanel="overlay"`: the rail of sections stays narrow, and the list of a section opens over the page, next to its icon. Focus moves into the list, and Escape or a click outside closes it.
- [AppShell · The current item of the sidebar, five ways](https://aureauds.dev/pattern-appshell-the-current-item-of-the-sidebar-five-ways.md): `sidebarIndicator` sets how the item you are on is drawn: `brand` (the default), `segment` (the capsule of the selected tab, with no line), `segment-dot`, `segment-line` and `subtle`. Switch them here, on the real shell.
- [AspectRatio · A media slot that reserves its space](https://aureauds.dev/pattern-aspectratio-a-media-slot-that-reserves-its-space.md): The box holds the shape before the image arrives, so nothing below it jumps when it does. That is the whole job: not cropping the picture, but stopping the layout from shifting under the reader — the failure a card grid makes most visibly.
- [AspectRatio · One ratio held across a grid](https://aureauds.dev/pattern-aspectratio-one-ratio-held-across-a-grid.md): Cards of different image heights read as a broken grid even when every card is correct. Fixing the ratio in one place is what makes the row line up, and it survives a source image nobody checked.
- [AspectRatio · A square, for identity](https://aureauds.dev/pattern-aspectratio-a-square-for-identity.md): `ratio={1}` is the default because the square is the shape identity uses — an avatar, a logo, a QR code. Naming it explicitly in the code is still worth it: a reader who sees `ratio={1}` knows the square was chosen, not inherited.
- [Avatar · Initials when there is no picture](https://aureauds.dev/pattern-avatar-initials-when-there-is-no-picture.md): The fallback is not a placeholder, it is the normal case: most people in most systems have no photo. Initials come from the name so two rows never look alike by accident.
- [AvatarGroup · Who is on this run](https://aureauds.dev/pattern-avatargroup-who-is-on-this-run.md): Overlapping faces plus a count for the rest. The cutoff exists because a row of twelve avatars stops being information and becomes texture — the number carries what the faces no longer can.
- [Badge · Version tag](https://aureauds.dev/pattern-badge-version-tag.md): Short metadata next to a title — the release the page documents.
- [Badge · Maturity scale](https://aureauds.dev/pattern-badge-maturity-scale.md): The whole maturity ladder in one row, so a reader places an item at a glance.
- [Badge · Count on a label](https://aureauds.dev/pattern-badge-count-on-a-label.md): A number that changes, kept quiet: neutral, so it never competes with a status.
- [Badge · Badge next to Status](https://aureauds.dev/pattern-badge-badge-next-to-status.md): Badge classifies, Status reports a condition. Together they answer what and how.
- [Badge · Categories, not statuses](https://aureauds.dev/pattern-badge-categories-not-statuses.md): Eight colour names mark a group — a section, a kind of item — and say nothing about health, so they never compete with success or danger. Yellow is left out: it belongs to the brand. The word and the icon carry the meaning; the colour only helps the eye find the group again.
- [Badge · One category in three emphases](https://aureauds.dev/pattern-badge-one-category-in-three-emphases.md): The categories take the same three emphases as every other badge: soft for a list, solid for the one that must stand out, outline (since 0.34.0 a light tint, no line) when the surface is already busy.
- [Banner · Something that affects the whole page](https://aureauds.dev/pattern-banner-something-that-affects-the-whole-page.md): A banner spans the region it is about; an alert sits inside it. Dismissible only when the message is genuinely optional — a banner about degraded service that can be closed is a banner nobody sees twice.
- [Banner · The cookie notice](https://aureauds.dev/pattern-banner-the-cookie-notice.md): variant="consent" asks before setting cookies that are not necessary: reject them, accept all, or choose by category in a window. Rejecting is as easy to see as accepting — same weight, same place —, the optional categories start off, and after the choice the confirmation takes the focus. Put the notice at the top of the page, before the skip link, and do not fix it to the screen. To change the choice later, show it again from a link in the footer, with value set to what you stored.
- [Breadcrumb · Where this page sits](https://aureauds.dev/pattern-breadcrumb-where-this-page-sits.md): Every level is a link except the last, which is the page itself and carries aria-current. A breadcrumb whose last item is also a link tells the screen reader that the user can navigate to where they already are.
- [Button · With leading icon](https://aureauds.dev/pattern-button-with-leading-icon.md): The main action of a screen, with the glyph repeating the verb — never replacing it.
- [Button · Submitting](https://aureauds.dev/pattern-button-submitting.md): Busy state for a form submit: spinner, aria-busy and the label kept for context.
- [Button · Confirm and cancel](https://aureauds.dev/pattern-button-confirm-and-cancel.md): The pair that closes a dialog: one primary, one ghost. Cancel is never a button of equal weight.
- [Button · With text](https://aureauds.dev/pattern-button-with-text.md): Secondary action that still needs an edge — a neutral choice next to a primary one.
- [Button · With trailing chevron](https://aureauds.dev/pattern-button-with-trailing-chevron.md): Opens a menu or a list. The chevron announces that something unfolds.
- [Button · Destructive with icon](https://aureauds.dev/pattern-button-destructive-with-icon.md): Irreversible action. The red plus the glyph make the consequence readable before the click.
- [Button · Toolbar trio](https://aureauds.dev/pattern-button-toolbar-trio.md): Three low-emphasis actions side by side, where the surface below must keep reading.
- [Button · Icon only](https://aureauds.dev/pattern-button-icon-only.md): Square target with an accessible name — an icon without a label needs one.
- [Button · Segmented range](https://aureauds.dev/pattern-button-segmented-range.md): Coordinated set of the same control. Each button stays tabbable — that is what separates it from a Toolbar.
- [Button · With Kbd](https://aureauds.dev/pattern-button-with-kbd.md): The action and the key that fires it, together — shown and announced by aria-keyshortcuts.
- [Button · Destructive with Kbd](https://aureauds.dev/pattern-button-destructive-with-kbd.md): Irreversible plus a shortcut: the key is spelled out so nobody discovers it by accident.
- [Button · Inline action](https://aureauds.dev/pattern-button-inline-action.md): Inside a sentence, where a capsule would break the line: text, underlined at rest.
- [Button · Pinned filter](https://aureauds.dev/pattern-button-pinned-filter.md): A filter that stays on: aria-pressed keeps the state visible and audible after the click.
- [Button · Full width on a narrow screen](https://aureauds.dev/pattern-button-full-width-on-a-narrow-screen.md): Form footer on a phone: the action takes the whole width so the thumb cannot miss it.
- [Button · With counter](https://aureauds.dev/pattern-button-with-counter.md): Action carrying a live number: the Badge rides inside the label, not beside it.
- [Button · The two axes](https://aureauds.dev/pattern-button-the-two-axes.md): Appearance is how much weight the box has; tone is what the colour means. The old names are shortcuts for pairs — variant="danger-outline" and appearance/tone below render the same button.
- [Button · Confirming a safe outcome](https://aureauds.dev/pattern-button-confirming-a-safe-outcome.md): Success tone for an action that lands somewhere good — publishing, approving, marking done. Filled, because tone and weight are independent: choosing green does not force the button to be quieter.
- [Button · Warning is not the brand](https://aureauds.dev/pattern-button-warning-is-not-the-brand.md): Amber, not the Aurea yellow. Until August 2026 the warning token resolved to the brand colour in dark theme — same pixels, two different meanings — so warning was not a tone at all. It has its own identity now, picked by measuring perceptual distance from both neighbours: the brand on one side, the destructive red on the other.
- [Button · Informational action in running text](https://aureauds.dev/pattern-button-informational-action-in-running-text.md): Info tone on the link appearance: a pointer to context that is neither a warning nor a commitment.
- [Button · The same tone across appearances](https://aureauds.dev/pattern-button-the-same-tone-across-appearances.md): One tone, four weights — and every cell exists. A tone never loses its filled form: each one owns a colour and the text colour that goes on top of it, chosen per theme and verified for AA contrast, exactly as the destructive tone always had.
- [Button · Stacked actions](https://aureauds.dev/pattern-button-stacked-actions.md): A vertical group for a menu of actions on a card or in a side panel. The buttons all measure the same width — without that the column comes out ragged, which is the one defect a vertical group cannot have. It stays role="group" and announces no orientation: it does not navigate by arrow, and promising keyboard that does not exist is worse than staying quiet.
- [Button · The same button in three container widths](https://aureauds.dev/pattern-button-the-same-button-in-three-container-widths.md): One button, one value, one viewport — three container widths. The step comes from the space the component was placed in, not from the size of the window, so a sidebar and a main column can show the same component at different steps at the same time. This is the proof that separates the two mechanisms: if the three measured the same, what existed would be a media query under another name. The parent needs `container-scope`, which names the container — an unnamed one matches the nearest ancestor that happens to be a container, including one somebody else declared for another reason.
- [Button · Reacting to the window instead](https://aureauds.dev/pattern-button-reacting-to-the-window-instead.md): The other mechanism, for when the decision really does belong to the application and not to the slot: the step follows the viewport. Same axis, same scale, and the prefix in the emitted class says which of the two is measuring — `md` is always 768px, and never means two things depending on where you read it. Resize the window to see it move; the example above will not move, because its containers have fixed widths.
- [Button · Every family follows its own scale](https://aureauds.dev/pattern-button-every-family-follows-its-own-scale.md): The same three containers, now with one piece from each family. Control, mark and avatar come from the control height and step together; the icon inside the button comes from the glyph scale and does NOT follow the button — a large button with a huge glyph is not a larger button, it is a different drawing. The two behaviours in one picture are the point: sharing a step is measured, never assumed.
- [ButtonGroup · Time range](https://aureauds.dev/pattern-buttongroup-time-range.md): Day, week, month over the same chart — the label names the set, the buttons the spans.
- [ButtonGroup · Pinned filters](https://aureauds.dev/pattern-buttongroup-pinned-filters.md): Many-of-many: each button is its own toggle, so two can be on at once.
- [ButtonGroup · View switch](https://aureauds.dev/pattern-buttongroup-view-switch.md): One-of-many is not this component: SegmentedControl carries one value and one tab stop.
- [ButtonGroup · Share actions](https://aureauds.dev/pattern-buttongroup-share-actions.md): Glyph-only set at the end of a card: one name for the group, one for each action.
- [Calendar · Date picker](https://aureauds.dev/pattern-calendar-date-picker.md): There is no DatePicker component: a picker is a trigger plus a popover plus this calendar. Three parts you already have, and the trigger is what names the field.
- [Calendar · Booking with days closed](https://aureauds.dev/pattern-calendar-booking-with-days-closed.md): The reason this component exists. A native date input cannot say "not before Thursday, and never a Sunday" — everything else about a plain date, it does better.
- [Calendar · When the native input wins](https://aureauds.dev/pattern-calendar-when-the-native-input-wins.md): One plain date, no closed days: the native picker is smaller, knows every locale, and is the one the person already knows how to use on their phone.
- [Card · Titled surface](https://aureauds.dev/pattern-card-titled-surface.md): The plain floating surface: title, one line of context, radius 22.
- [Card · Header with action](https://aureauds.dev/pattern-card-header-with-action.md): Title on the left, the action on the right, on the same baseline. The card owns its own header.
- [Card · Selectable tile](https://aureauds.dev/pattern-card-selectable-tile.md): A card that is a target. The interactive variant carries the hover and the focus ring — and it requires `render`, because only the caller knows whether the tile is an action (<button>) or a link (<a href>).
- [Card · KPI row](https://aureauds.dev/pattern-card-kpi-row.md): Three numbers of the same weight. One line, equal columns, trend beside the value.
- [Card · Member row](https://aureauds.dev/pattern-card-member-row.md): Avatar, name and role — the identity line that repeats in every list of people.
- [Card · Facts list](https://aureauds.dev/pattern-card-facts-list.md): Term and value in two columns — for a record's attributes, not for tabular data.
- [Card · Activity timeline](https://aureauds.dev/pattern-card-activity-timeline.md): What happened, in order, with the time on the side. History, not a feed of live events.
- [Card · A summary at the top of an article](https://aureauds.dev/pattern-card-a-summary-at-the-top-of-an-article.md): Three short points before the long text, for the reader who has thirty seconds. It is a card with a short title and a list, not an alert: an alert interrupts, a summary waits to be read. The check icon is decoration; the list is announced as a list.
- [Card · The card that stands out](https://aureauds.dev/pattern-card-the-card-that-stands-out.md): The main card of a screen. In the light theme it is the dark theme's card; in the dark theme, the regular card (the yellow outline went with the lines in 0.34.0). Inside it the whole dark theme applies, so text, badges and buttons adjust by themselves. Not for a list of choices: in the dark theme its outline is close to `selected`.
- [Card · A colour stroke on top](https://aureauds.dev/pattern-card-a-colour-stroke-on-top.md): A stroke on the top edge in the tone's fill colour, the same in both themes. It is decoration: the title already says the subject.
- [Chart · One series over time](https://aureauds.dev/pattern-chart-one-series-over-time.md): Chart is the frame, not the drawing: it carries the accessible name, the sizing and the surface, and the series comes in as a child of the chart library. That split is what lets the drawing engine be swapped without touching the page.
- [Chart · Two series, read together](https://aureauds.dev/pattern-chart-two-series-read-together.md): Two bars side by side answer a question one bar cannot: not how many runs, but how many of them failed. The legend is required here — with two series the colours stop being decoration and start carrying meaning.
- [Chart · The whole reading surface](https://aureauds.dev/pattern-chart-the-whole-reading-surface.md): Grid, axis, legend and tooltip on one chart — the assembled form, so the pieces are seen doing their jobs together instead of one at a time. `defaultIndex` pins the tooltip because a static page has no pointer; in an application it is not needed.
- [ChartLegend · Naming the colours of a stacked series](https://aureauds.dev/pattern-chartlegend-naming-the-colours-of-a-stacked-series.md): Stacking hides which band is which, so the legend stops being optional: it is the only place the reader learns that the darker band is the failures. It sits under the drawing by default, where it does not compete with the axis for the first read.
- [ChartLegend · Legend above the drawing](https://aureauds.dev/pattern-chartlegend-legend-above-the-drawing.md): `verticalAlign="top"` reads the names before the shapes, which is what a dashboard tile wants when the drawing is short and the reader is scanning several tiles at once. Everything else stays: the component still takes the series from the engine, never a hand-written list.
- [ChartTooltip · The exact value under the pointer](https://aureauds.dev/pattern-charttooltip-the-exact-value-under-the-pointer.md): An area chart shows a shape, not a number; the tooltip is where the number lives. It reuses the same `.tooltip` surface as the rest of the system, so a value read on a chart looks like a value read anywhere else.
- [ChartTooltip · Every series at one point in time](https://aureauds.dev/pattern-charttooltip-every-series-at-one-point-in-time.md): With more than one series the tooltip becomes a small table: the label is the point on the axis, and each row is a series with its colour swatch. This is the comparison the drawing cannot make, because two bars of different heights do not tell you their difference.
- [Checkbox · One box that gates the action](https://aureauds.dev/pattern-checkbox-one-box-that-gates-the-action.md): The label is the whole sentence and it is clickable — a checkbox whose label is not part of the target is a 16px hit area, which fails on touch. Never pre-checked when it grants permission.
- [Checkbox · A set where several answers are right](https://aureauds.dev/pattern-checkbox-a-set-where-several-answers-are-right.md): Checkbox, not radio, is the difference between 'pick any' and 'pick one'. The rule is the answer, not the look: if zero selected is a legitimate state, it is a checkbox.
- [Cluster · A row of actions that wraps instead of overflowing](https://aureauds.dev/pattern-cluster-a-row-of-actions-that-wraps-instead-of-overflowing.md): Buttons side by side with the gap of the system, and a wrap that happens before anything is pushed off screen. Writing `display:flex` by hand gets the row right and the wrap wrong, which is only visible on the narrow viewport nobody tested.
- [Cluster · Tags under a heading](https://aureauds.dev/pattern-cluster-tags-under-a-heading.md): A cluster of badges is the shape a filter list and a tag list share. The primitive is what keeps the vertical rhythm right when the second row appears — the case a hand-written flex row almost always gets wrong.
- [Cluster · Metadata beside a title](https://aureauds.dev/pattern-cluster-metadata-beside-a-title.md): Title, status and time on one line, aligned on their centres rather than their boxes. The alignment is the point: three elements of different heights on a hand-written row sit on three different baselines.
- [CodeBlock · The install line](https://aureauds.dev/pattern-codeblock-the-install-line.md): The shortest useful block: one command, one button. `copyable` is what makes it a block instead of a paragraph — a reader who has to select the text by hand will select the prompt with it.
- [CodeBlock · A snippet under a heading](https://aureauds.dev/pattern-codeblock-a-snippet-under-a-heading.md): The shape every documentation page repeats: a sentence that says what the code does, then the code. The block keeps its own horizontal scroll, so a long line never widens the page around it.
- [CodeBlock · Output, not source](https://aureauds.dev/pattern-codeblock-output-not-source.md): `language="text"` is the default for a reason: not everything in a block is code. A stack trace or a command's output is quoted verbatim, and pretending it is a language would colour tokens that are not tokens.
- [CodeEditor · A snippet the reader can change](https://aureauds.dev/pattern-codeeditor-a-snippet-the-reader-can-change.md): An editor, not a code block: the reader types. Use it where the change is the point — a query, a config, a rule — and use CodeBlock everywhere else, because a read-only editor costs a bundle it does not earn.
- [Collapsible · Advanced options, folded away](https://aureauds.dev/pattern-collapsible-advanced-options-folded-away.md): The default answer for a form section most people never open. `defaultOpen` is left off and the state stays inside the component — a consumer that does not need to read the state should not have to hold it.
- [Collapsible · A detail already unfolded](https://aureauds.dev/pattern-collapsible-a-detail-already-unfolded.md): `defaultOpen` starts unfolded but leaves the reader in charge of folding it back. Use it when the content is the point of the screen and the fold is a courtesy, not a filter.
- [Collapsible · Fold driven from outside](https://aureauds.dev/pattern-collapsible-fold-driven-from-outside.md): `open` plus `onOpenChange` when something else in the screen decides — a "expand all" button, a deep link, a search that has to reveal the match it found. Passing `open` without `onOpenChange` freezes it, which is a legitimate read-only state and not a bug.
- [Collapsible · A section that cannot be opened yet](https://aureauds.dev/pattern-collapsible-a-section-that-cannot-be-opened-yet.md): `disabled` keeps the row in place while the content is unavailable, instead of removing it. A section that disappears and comes back renumbers everything around it; a section that stays says the same thing without moving anything.
- [Combobox · Picking one out of many](https://aureauds.dev/pattern-combobox-picking-one-out-of-many.md): A select stops working somewhere around twenty options — the eye cannot scan them. A combobox lets the user type what they already know instead of hunting for it.
- [Combobox · Options that belong to sections](https://aureauds.dev/pattern-combobox-options-that-belong-to-sections.md): A flat list of forty time zones is a wall; the same forty under continents is a map. Pass groups — `{label, items}` — in the same `items` prop, and the engine's filter runs inside each section, dropping a section that has nothing left to show. `empty` writes what appears when nothing matches, which is where a list stops saying No results and starts saying what the user can do about it.
- [CommandPaletteShell · Every command on one keystroke](https://aureauds.dev/pattern-commandpaletteshell-every-command-on-one-keystroke.md): The palette is the keyboard route to anything the application can do. The field takes focus on open and the list narrows as you type, so the whole interaction is one gesture — never a menu you have to find first.
- [CommandPaletteShell · Results narrowed by what was typed](https://aureauds.dev/pattern-commandpaletteshell-results-narrowed-by-what-was-typed.md): Filtering is the consumer's job, not the shell's: it holds `query` and decides what matches. Keeping it outside is what lets the same palette search components, files or an API — the shell never assumes the shape of what it is searching.
- [CommandPaletteShell · Nothing matched](https://aureauds.dev/pattern-commandpaletteshell-nothing-matched.md): The one state a palette must not skip. A list that simply vanishes reads as a broken palette; EmptyState says the search ran and found nothing, which is a different fact and the one the reader needs.
- [ContextMenu · Right-click on an item](https://aureauds.dev/pattern-contextmenu-right-click-on-an-item.md): The menu the mouse expects on an item, and the keyboard reaches with Shift+F10. It never replaces a visible control: everything here has another way in.
- [DataGrid · A list you act on in bulk](https://aureauds.dev/pattern-datagrid-a-list-you-act-on-in-bulk.md): Selection turns a table into a work surface: pick the rows, then act once. The header checkbox selects the page, never the whole dataset — a promise a static table cannot keep.
- [DataList · The facts about one record](https://aureauds.dev/pattern-datalist-the-facts-about-one-record.md): A definition list is the honest markup for "this thing has these properties". Every value here belongs to the same run; nothing on the list compares it to another run.
- [DataList · Values that are components](https://aureauds.dev/pattern-datalist-values-that-are-components.md): `value` takes any node, so a status reads as a status and an identity reads as an identity. The alternative — spelling "Succeeded" as text — loses the one thing the reader scans for when the list is long.
- [DataList · Inside a card, under a heading](https://aureauds.dev/pattern-datalist-inside-a-card-under-a-heading.md): The shape a detail panel repeats: a title that names the record and the list that describes it. The card supplies the surface; the list supplies the structure — neither tries to do the other's job.
- [DataList · A spec sheet in groups](https://aureauds.dev/pattern-datalist-a-spec-sheet-in-groups.md): A long list of facts reads better cut by subject. Each group is a card with its own title and its own list; the grid lays the cards side by side and stacks them on a phone. No group component to learn — the parts already exist.
- [DependencyGraph · A network map, top to bottom](https://aureauds.dev/pattern-dependencygraph-a-network-map-top-to-bottom.md): The internet on top and each layer below. The kind of device is a word with an icon beside it; badges carry the count and the status; ports name the ends of the lines; the line's drawing says what kind of link it is without colour — double for fibre — and its state comes apart, as a colour, a word and a cross when down. The legend builds itself in two parts: the kind of link and the state. Repeated links between the same two devices collapse into one with their count.
- [DependencyGraph · The legend and the overview step aside](https://aureauds.dev/pattern-dependencygraph-the-legend-and-the-overview-step-aside.md): On a large map the legend and the overview cover the devices in the bottom corners. With legendCollapsible the legend gets a Legend button that stays in its corner: open, the list rises above it; closed, only the button is left. With minimapToggle the overview gets a button beside the zoom buttons, at the top. Both start open; defaultLegendOpen and defaultMinimapOpen start them closed.
- [Dialog · Destructive confirmation](https://aureauds.dev/pattern-dialog-destructive-confirmation.md): The pause before something irreversible. The title asks the question, the body says what is lost, and the confirming button carries the danger tone — never the cancel.
- [Dialog · Short form in a dialog](https://aureauds.dev/pattern-dialog-short-form-in-a-dialog.md): A dialog is the right home for a form only when it is short enough to fit without scrolling. The primary action repeats the verb of the title, so the user never has to re-read what they are confirming.
- [Drawer · Detail panel beside the list](https://aureauds.dev/pattern-drawer-detail-panel-beside-the-list.md): The row stays on screen and the detail slides in beside it — the reason to pick a drawer over a dialog is exactly this: the context does not disappear.
- [Drawer · Filters that stay open while you read](https://aureauds.dev/pattern-drawer-filters-that-stay-open-while-you-read.md): Filters on the left, results on the right. A dialog would cover the results the filters are changing, which is the one thing a filter panel must not do.
- [DropdownMenu · The overflow menu of a table row](https://aureauds.dev/pattern-dropdownmenu-the-overflow-menu-of-a-table-row.md): Three dots at the end of the row. Destructive items sit last, after a separator, so the pointer never lands on Delete while reaching for Rename.
- [DropdownMenu · A primary action with variants behind it](https://aureauds.dev/pattern-dropdownmenu-a-primary-action-with-variants-behind-it.md): The button does the common thing; the chevron opens the rest. The label of the button is the action itself, never the word More.
- [DropdownMenu · A menu that holds STATE, not just commands](https://aureauds.dev/pattern-dropdownmenu-a-menu-that-holds-state-not-just-commands.md): The View menu of any application: things that toggle, things that are mutually exclusive, and a section label that names the group instead of pretending to be an item. Until 28/08/2026 the Aurea menu could express none of these — `items` had a single shape, and the engine underneath had five (G-API-02).
- [EmptyState · Nothing here yet, and one way forward](https://aureauds.dev/pattern-emptystate-nothing-here-yet-and-one-way-forward.md): The empty state of a new account is not an error: it says what will appear and offers the one action that fills it. Never the same copy as a search with no results — those are different situations wearing the same layout.
- [EmptyState · The filter matched nothing](https://aureauds.dev/pattern-emptystate-the-filter-matched-nothing.md): Different from an empty account: here there IS data, the query just missed it. The action clears the filter instead of creating something — offering Create here sends people down the wrong path.
- [Field · Email field](https://aureauds.dev/pattern-field-email-field.md): Label, control and hint bound together — the hint is read by the screen reader, not painted beside it.
- [Field · Rejected value](https://aureauds.dev/pattern-field-rejected-value.md): The error joins the accessible description and marks the control invalid. A red field alone tells a colour-blind user nothing.
- [Field · Plan picker](https://aureauds.dev/pattern-field-plan-picker.md): One value out of a known set. Select chooses a value; a Menu would execute an action.
- [Field · Settings block](https://aureauds.dev/pattern-field-settings-block.md): A short settings form: text, long text and two toggles, in one column with a single primary action.
- [Field · Filter row](https://aureauds.dev/pattern-field-filter-row.md): Search plus a scope select — the pair that heads most collections.
- [FileInput · Dropping files with a limit](https://aureauds.dev/pattern-fileinput-dropping-files-with-a-limit.md): The limits are written before the mistake, not after it: type and size are on the field, so the refusal never surprises. Dropping and clicking reach the same input, because a drop zone that is not also a button is unusable by keyboard.
- [Header · The bar that carries the brand and the global actions](https://aureauds.dev/pattern-header-the-bar-that-carries-the-brand-and-the-global-actions.md): Brand on the left, actions on the right, and nothing in between that belongs to a single page. The floating variant sits on the content; flush joins the page — pick one per application, not per screen.
- [Header · A website header, with the current page marked](https://aureauds.dev/pattern-header-a-website-header-with-the-current-page-marked.md): The same list the Sidebar and the BottomNav take goes in items, and current marks the page you are on. Below 768px the links leave the bar and drop into the menu panel; the actions stay in the bar. maxWidth lines the bar up with the Container of the page.
- [HoverCard · Who this person is, without leaving the sentence](https://aureauds.dev/pattern-hovercard-who-this-person-is-without-leaving-the-sentence.md): A name in running text is an identifier, not an identity. The card answers "who?" in place, and the profile page it previews stays one click away — the preview is a shortcut, never the only route.
- [HoverCard · Previewing what a link leads to](https://aureauds.dev/pattern-hovercard-previewing-what-a-link-leads-to.md): `side="top"` when the trigger sits low in the viewport and a card below it would be cut off. The rest is unchanged: the preview saves a navigation, it does not replace one.
- [IconButton · Row actions](https://aureauds.dev/pattern-iconbutton-row-actions.md): The trio at the end of a table row: open, edit, delete — quiet until the row matters.
- [IconButton · Card header action](https://aureauds.dev/pattern-iconbutton-card-header-action.md): One glyph in the corner of a surface: the title keeps the space, the action keeps the reach.
- [IconButton · Starred row](https://aureauds.dev/pattern-iconbutton-starred-row.md): State that survives the click: aria-pressed keeps it visible and audible.
- [IconButton · Canvas controls](https://aureauds.dev/pattern-iconbutton-canvas-controls.md): Zoom and fit in a toolbar: one tab stop for the set, a name for each glyph.
- [IconButton · Dismiss a banner](https://aureauds.dev/pattern-iconbutton-dismiss-a-banner.md): The close of a notice: destructive ghost, so removing is available without being the point.
- [Input · Email and password](https://aureauds.dev/pattern-input-email-and-password.md): The sign-in pair, with the autoComplete tokens the browser actually looks for.
- [Input · Quantity with bounds](https://aureauds.dev/pattern-input-quantity-with-bounds.md): A number the browser keeps inside its range, with the limit written next to it.
- [Input · Native date range](https://aureauds.dev/pattern-input-native-date-range.md): For one plain date the native picker still wins: every locale and every screen reader for free, and it is the one people already know. Reach for Calendar when you need a visible grid, a range, or days closed.
- [Input · Generated identifier](https://aureauds.dev/pattern-input-generated-identifier.md): A value to copy, not to edit: read-only is still reachable by the keyboard, unlike disabled.
- [Input · Account settings card](https://aureauds.dev/pattern-input-account-settings-card.md): A short form on a surface: text, a choice, two toggles and one primary action.
- [Input · Settings row](https://aureauds.dev/pattern-input-settings-row.md): Label on the left, control on the right — the line every settings screen is made of. Until August 2026 this only came out of Aurea with ad-hoc CSS. It is a grid and not a row for one reason: in a row the error message would become a third column beside the control, and the error is about the value, so it belongs under it.
- [Input · Composer with a toolbar below](https://aureauds.dev/pattern-input-composer-with-a-toolbar-below.md): One box, text on top and controls underneath. The addon takes a whole line instead of sitting beside the field, and the frame drops the pill radius for the panel radius — a group with a block addon is no longer a line, it is a surface. Measured: at 999px on a tall box the sides become half-circles and the field text collides with the curve.
- [InputGroup · A unit that belongs to the value](https://aureauds.dev/pattern-inputgroup-a-unit-that-belongs-to-the-value.md): The suffix is not a label and not a hint: it is part of reading the number. Putting "ms" inside the group keeps it welded to the field at every width, where a paragraph beside it would wrap away on a phone.
- [InputGroup · A prefix that cannot be typed away](https://aureauds.dev/pattern-inputgroup-a-prefix-that-cannot-be-typed-away.md): The scheme and host are fixed; only the path is the user's. Showing them as an addon instead of pre-filling the field means the reader can never delete them by holding backspace, and the value you read back is only ever the part you asked for.
- [InputGroup · Both ends at once](https://aureauds.dev/pattern-inputgroup-both-ends-at-once.md): A currency on one side and a unit on the other, with the field between them. Two addons is the ceiling: a third leaves less room for the value than for the frame around it.
- [InputGroup · A toolbar over the field](https://aureauds.dev/pattern-inputgroup-a-toolbar-over-the-field.md): `block-start` takes the whole line above the control, which is the only place a row of actions fits without stealing width from the value. This is the shape a composer wants: the field is the work, the bar is what you do to it.
- [InputGroup · A counter under the field](https://aureauds.dev/pattern-inputgroup-a-counter-under-the-field.md): `block-end` for what the reader consults while typing, not before. The count belongs to the control, so it travels with it — unlike a hint on the Field, which describes the input before anyone has touched it.
- [KPI · A number with its comparison](https://aureauds.dev/pattern-kpi-a-number-with-its-comparison.md): The delta only means something next to a period, so the trend line carries both. A KPI without a comparison is a number on a wall — true, and useless for deciding anything.
- [KPI · The direction, not just the sign](https://aureauds.dev/pattern-kpi-the-direction-not-just-the-sign.md): `trend` takes a node, so the comparison can carry a status of its own. Colour alone would fail WCAG 1.4.1 — the arrow and the words are what make the direction readable without it.
- [KPI · A row of tiles across the top of a dashboard](https://aureauds.dev/pattern-kpi-a-row-of-tiles-across-the-top-of-a-dashboard.md): Three or four side by side is the shape a dashboard opens with: the numbers that decide whether to keep reading. Past four they stop being a summary and become a table that forgot it was one.
- [KPI · A trend with a direction](https://aureauds.dev/pattern-kpi-a-trend-with-a-direction.md): `direction` draws the arrow, colours the trend and gives screen readers a word before it — up is success and down is danger by default. When going up is bad news, `tone` turns it around. The trend text stays the domain's own words.
- [KPI · Numbers inside a card that already exists](https://aureauds.dev/pattern-kpi-numbers-inside-a-card-that-already-exists.md): A KPI is a card, so three of them inside a panel would be boxes inside a box. `variant="plain"` drops the card and keeps the column: the panel is the surface, and the numbers sit on it.
- [Kbd · A shortcut inside a sentence](https://aureauds.dev/pattern-kbd-a-shortcut-inside-a-sentence.md): Prose is where the keyboard is taught. Marking the keys instead of quoting them means a screen reader announces them as keys, and the reader can tell `Esc` the key from "esc" the word.
- [Kbd · One key per element in a chord](https://aureauds.dev/pattern-kbd-one-key-per-element-in-a-chord.md): `⌘ ⇧ P` is three elements, not one string. Split like this the keys line up with the physical keys the reader is looking for, and a chord never renders as a single wide pill that reads like one impossible key.
- [Kbd · The shortcut column of a menu](https://aureauds.dev/pattern-kbd-the-shortcut-column-of-a-menu.md): A menu that lists its shortcuts teaches the keyboard without a separate page. The keys sit at the end of the row so the labels stay left-aligned and scannable — the shortcut is the second read, never the first.
- [Kbd · On the button that performs it](https://aureauds.dev/pattern-kbd-on-the-button-that-performs-it.md): The one case where the keys must NOT be a bare Kbd: `kbd` on the Button both draws the shortcut and emits `aria-keyshortcuts`, so the shortcut is announced and not only seen. A Kbd dropped inside a button would be the decoration without the promise.
- [LogStream · The tail of a running job](https://aureauds.dev/pattern-logstream-the-tail-of-a-running-job.md): Time, level and message in three fixed tracks, so the eye can find the level column without reading the lines. It is a live region: a line that arrives while the reader is elsewhere is announced, not silently appended.
- [LogStream · Lines with no level of their own](https://aureauds.dev/pattern-logstream-lines-with-no-level-of-their-own.md): Program output is not levelled, and forcing a level on it would be inventing information. The three cells stay in place even when two are empty — that is what keeps the message in its own track instead of sliding left.
- [LogStream · The log under the thing it describes](https://aureauds.dev/pattern-logstream-the-log-under-the-thing-it-describes.md): A log beside a status is the shape an operations panel repeats: the badge says what happened, the stream says why. Neither answers the other's question, which is why both are here.
- [MediaPlayer · A clip with its title on the frame](https://aureauds.dev/pattern-mediaplayer-a-clip-with-its-title-on-the-frame.md): Title and subtitle ride on the player instead of above it, so the frame is self-contained wherever it is embedded. Every control is reachable by keyboard and announced from the string dictionary, which is what makes the player translatable.
- [MediaPlayer · An episode, without the video frame](https://aureauds.dev/pattern-mediaplayer-an-episode-without-the-video-frame.md): The same player with kind="audio": no picture area, the controls carry the whole component. Reaching for a second component here would double the keyboard surface for no gain.
- [MediaPlayerShell · A stream with its own controls](https://aureauds.dev/pattern-mediaplayershell-a-stream-with-its-own-controls.md): The frame gives the surface, the aspect ratio and the dark canvas that holds in both themes; everything inside is yours. This is the shape to reach for when the engine is not a <video> — a remote screen, a canvas, a live socket.
- [MediaPlayerShell · Waiting for a source](https://aureauds.dev/pattern-mediaplayershell-waiting-for-a-source.md): The state a player spends more time in than anyone plans for. Saying nothing reads as broken; the frame with a placeholder says the surface is ready and the source is not, which is the fact the reader needs while they wait.
- [MediaPlayerShell · The source failed](https://aureauds.dev/pattern-mediaplayershell-the-source-failed.md): A dead stream is not an empty one: it needs the reason and a way out. Keeping the failure inside the frame instead of replacing the frame with an alert holds the layout still — the page does not jump when a tile drops.
- [Menubar · The menu row of an editor](https://aureauds.dev/pattern-menubar-the-menu-row-of-an-editor.md): One row, and the arrow keys walk from an open menu straight into the next — that is what separates a menubar from three dropdowns side by side. It belongs to applications, not to websites.
- [Menubar · The menu bar as a column](https://aureauds.dev/pattern-menubar-the-menu-bar-as-a-column.md): `orientation="vertical"` stacks the bar and the menus open to the side — down would put them on top of the next item of the bar itself. The side is logical (`inline-end`), so in Arabic the column sits on the right and the menus open left without anyone writing a second rule.
- [MessageComposer · The line you type into](https://aureauds.dev/pattern-messagecomposer-the-line-you-type-into.md): One field and one send. The icon is optional and the field does not reserve space for one that is not there — a defect this component actually shipped with, and the reason the InputGroup exists.
- [MessageComposer · Disabled while the answer is being written](https://aureauds.dev/pattern-messagecomposer-disabled-while-the-answer-is-being-written.md): Sending twice is the mistake to prevent. Disabling the composer says the turn is not yours yet, which is clearer than a spinner somewhere else on the screen.
- [MessageList · A thread between a person and an agent](https://aureauds.dev/pattern-messagelist-a-thread-between-a-person-and-an-agent.md): Author, time and body, with the delivery state on the message that has one. The list is a log: it does not reorder, and a failed message stays where it was written so the retry lands in context.
- [MultiCombobox · Labelling something with several tags](https://aureauds.dev/pattern-multicombobox-labelling-something-with-several-tags.md): Each choice stays visible as a chip, so the user reads the whole selection without opening the list again. Backspace removes the last one — the keyboard shape people already expect from an email To: field.
- [NotificationCenter · The bell in the top bar](https://aureauds.dev/pattern-notificationcenter-the-bell-in-the-top-bar.md): Grouped by day, unread first, and one control that clears the badge without opening every item. The count on the trigger is the only thing most people ever read.
- [NumberField · A quantity with a floor and a ceiling](https://aureauds.dev/pattern-numberfield-a-quantity-with-a-floor-and-a-ceiling.md): The steppers are for small corrections and the keyboard is for big ones — both hit the same bounds. Bounds on the field, not in a message after submit: the refusal should never be a surprise.
- [NumberField · A wide range you drag instead of clicking forty times](https://aureauds.dev/pattern-numberfield-a-wide-range-you-drag-instead-of-clicking-forty-times.md): Opacity 0–100, a width in pixels: ranges where the steppers are the wrong instrument. `scrubbable` adds a handle that changes the value as you pull it — the gesture every drawing tool has in a numeric field. It is opt-in and strictly additive: the buttons, the arrow keys and Home/End are untouched, and the handle is hidden from assistive technology because dragging is a pointer gesture with no keyboard equivalent to promise. Use `scrubDirection="vertical"` when the fields are stacked, as in a width/height pair.
- [OTPField · The six digits from the email](https://aureauds.dev/pattern-otpfield-the-six-digits-from-the-email.md): One box per character, and paste fills all of them — because nobody types a code they can copy. Masking is for a secret; a verification code is not one, and hiding it only makes it harder to check.
- [Pagination · Walking a long result set](https://aureauds.dev/pattern-pagination-walking-a-long-result-set.md): The current page is announced, not just highlighted. Previous and Next keep their labels for screen readers even when they show only a chevron — a nameless arrow is a dead end.
- [PasswordField · A password the user can check](https://aureauds.dev/pattern-passwordfield-a-password-the-user-can-check.md): The reveal exists because typing a password blind is how people get locked out. The button says the action, not the state — Show password, then Hide password — so a screen reader announces what will happen.
- [Popover · The definition behind a number](https://aureauds.dev/pattern-popover-the-definition-behind-a-number.md): A popover, not a tooltip: the content is rich, it stays open, and the pointer can travel into it to select text. A tooltip that needs a second sentence should have been this.
- [Progress · A job with a known end](https://aureauds.dev/pattern-progress-a-job-with-a-known-end.md): Determinate only when the total is real. Faking a percentage for something unbounded is worse than the spinner it replaced: it promises an end the system cannot keep.
- [QRCode · Plain code](https://aureauds.dev/pattern-qrcode-plain-code.md): Round modules and eyes without touching scannability: quiet zone kept, contrast kept.
- [QRCode · Downloadable](https://aureauds.dev/pattern-qrcode-downloadable.md): The code plus the action that takes it away — the pattern from the target image.
- [QRCode · On a card](https://aureauds.dev/pattern-qrcode-on-a-card.md): Framed for sharing: a floating surface, the code, and what it points to written out.
- [QRCode · Print safe](https://aureauds.dev/pattern-qrcode-print-safe.md): Highest error correction for paper, where a scratch is not an if but a when.
- [Radio · One answer out of a few](https://aureauds.dev/pattern-radio-one-answer-out-of-a-few.md): Radios show every option at once, which is their whole advantage over a select — and their limit: past five or six the list stops being scannable and a select or combobox reads faster.
- [Range · A value with no exact number in mind](https://aureauds.dev/pattern-range-a-value-with-no-exact-number-in-mind.md): A slider is for approximate values — volume, opacity, a threshold nobody types. When the exact figure matters, a NumberField is honest and a slider is guesswork with a nice handle.
- [SearchField · Narrowing a list as you type](https://aureauds.dev/pattern-searchfield-narrowing-a-list-as-you-type.md): type="search" so the browser offers its own clear control and history. The glyph is decoration — the accessible name comes from the label, never from the magnifier.
- [Section · The page opening, text beside the proof](https://aureauds.dev/pattern-section-the-page-opening-text-beside-the-proof.md): variant="hero" is the opening of a page: an eyebrow, the title (the page's h1), a line of text, the buttons, and the image beside it. The title grows with the width of the band, not of the window — 36, then 60 from 768 and 72 from 1024 — and the image sits beside the text from 1024; below that, it goes under. The image takes the width of its column: size it in the app.
- [Section · The page opening, centred](https://aureauds.dev/pattern-section-the-page-opening-centred.md): align="center" puts everything on the middle line, with the image (if any) under the text. What comes inside the Section goes after the buttons: a short note, a link.
- [Section · The page opening with an e-mail field](https://aureauds.dev/pattern-section-the-page-opening-with-an-e-mail-field.md): actions takes anything: here, the e-mail field with its button, inside a form. The field keeps its name for the screen reader (aria-label), because the placeholder is not a label.
- [Section · The website footer, dark on a light page](https://aureauds.dev/pattern-section-the-website-footer-dark-on-a-light-page.md): variant="footer" turns the band into the footer: brand, link columns and the legal line, already inside a Container. It keeps the band's theme, so a dark footer on a light page is theme="dark". On a phone everything stacks.
- [SegmentedControl · Switching the window of a chart](https://aureauds.dev/pattern-segmentedcontrol-switching-the-window-of-a-chart.md): One dimension, few values, and one is always chosen — that is what separates a segmented control from a button group. Zero selected is not a state it can express, so never use it for a filter that can be cleared.
- [Select · A short, closed list of options](https://aureauds.dev/pattern-select-a-short-closed-list-of-options.md): The native select is the right answer more often than it gets used: it is the control the platform already knows how to render on a phone, and it needs no portal, no listbox and no keyboard code. Reach for a Combobox when typing beats scrolling.
- [Separator · Between two parts of the same card](https://aureauds.dev/pattern-separator-between-two-parts-of-the-same-card.md): The line says "the section above is finished" without spending a heading on it. Inside a card, where a heading would be too loud and blank space alone reads as an accident.
- [Separator · Between items on one line](https://aureauds.dev/pattern-separator-between-items-on-one-line.md): `orientation="vertical"` for metadata that shares a row and does not share a meaning. It stretches to the line, so it never reads as a stray character the way a typed pipe does at a different font size.
- [Separator · Grouping a menu without labelling it](https://aureauds.dev/pattern-separator-grouping-a-menu-without-labelling-it.md): The line groups the destructive action away from the rest so it is not reached by accident. Note what it is not doing: a screen reader hears one flat list, and that is correct — the separation is a pointer affordance, and the wording of the item is what carries the warning.
- [Sidebar · The main navigation of an application](https://aureauds.dev/pattern-sidebar-the-main-navigation-of-an-application.md): Collapsing keeps the icons and drops the labels — it narrows the column, it does not hide the navigation. On a narrow screen the AppShell turns the same sidebar into a drawer, so there is one navigation, not two.
- [Skeleton · The shape of the content that is coming](https://aureauds.dev/pattern-skeleton-the-shape-of-the-content-that-is-coming.md): A skeleton only helps when it matches the layout it replaces — otherwise the page jumps when the data lands, which is the exact flicker it was meant to avoid. Use it for content, never for a control.
- [Spinner · Waiting inside a button](https://aureauds.dev/pattern-spinner-waiting-inside-a-button.md): The label stays while the spinner runs — replacing it with a bare spinner loses what the user is waiting for. Decorative here, because the button already announces itself busy.
- [Status · The state of a service, in a row](https://aureauds.dev/pattern-status-the-state-of-a-service-in-a-row.md): A coloured dot plus a word. The word is mandatory: colour alone fails for a third of readers, and green and amber are the pair people confuse most.
- [Stepper · Where you are in a sequence](https://aureauds.dev/pattern-stepper-where-you-are-in-a-sequence.md): Three states in one row: what is done, what you are on, what is left. The current step carries `aria-current="step"`, so the position is announced and not only drawn — a stepper that only draws is a decoration.
- [Stepper · A step that can be skipped](https://aureauds.dev/pattern-stepper-a-step-that-can-be-skipped.md): `optional` says out loud what a greyed-out label only implies. Marking it is what lets a reader decide to move on, instead of hunting for the field they think they missed.
- [Stepper · A step that failed](https://aureauds.dev/pattern-stepper-a-step-that-failed.md): `state: "error"` keeps the failure in the sequence instead of replacing it with an alert somewhere else. The reader sees which step broke and how far they had got, which is the pair of facts they need to decide whether to fix or restart.
- [Stepper · Going back to a finished step](https://aureauds.dev/pattern-stepper-going-back-to-a-finished-step.md): `onClick` turns a step into a real button — but only where going back is allowed. Leaving the unreached steps inert is the point: a stepper whose every step is clickable is a tab list wearing the wrong clothes.
- [Switch · Notification settings](https://aureauds.dev/pattern-switch-notification-settings.md): Flip and it is done. No Save button — that is what makes it a Switch and not a Checkbox.
- [Switch · Feature with state](https://aureauds.dev/pattern-switch-feature-with-state.md): The switch sets it; a Status reports what the system did with it.
- [Switch · Gated by plan](https://aureauds.dev/pattern-switch-gated-by-plan.md): Visible so the value is known, disabled so it cannot be flipped — with the reason next to it.
- [Switch · When it waits, it is a Checkbox](https://aureauds.dev/pattern-switch-when-it-waits-it-is-a-checkbox.md): Same yes-or-no, different moment: this one only takes effect when the form is submitted.
- [Table · With caption](https://aureauds.dev/pattern-table-with-caption.md): The caption names the table for a screen reader and for the eye — a table with no name is a grid of noise.
- [Table · Operational state](https://aureauds.dev/pattern-table-operational-state.md): A Status per row instead of a coloured cell: the condition is spelled out, not encoded in a fill.
- [Table · With pagination](https://aureauds.dev/pattern-table-with-pagination.md): The full collection composition: filter above, selection in the first column, pagination below.
- [Table · View switch](https://aureauds.dev/pattern-table-view-switch.md): Table or cards for the same data — SegmentedControl switches the view, never the meaning.
- [Table · Row actions](https://aureauds.dev/pattern-table-row-actions.md): Actions live at the end of the row, ghost so they do not shout over the data.
- [Table · A comparison with groups and the best value](https://aureauds.dev/pattern-table-a-comparison-with-groups-and-the-best-value.md): Items are columns, specs are rows. Each group of rows is a <tbody> that opens with a band; each row is named by a <th scope="row">. The name column stays put when the table scrolls sideways, and the header stays at the top of the box when it scrolls down. The best value is bold and also says so in text — a Badge, because colour alone tells nothing to someone who cannot see it.
- [Table · Two at a time on a phone](https://aureauds.dev/pattern-table-two-at-a-time-on-a-phone.md): On a narrow screen the page shows two items, picked with two selects above the table, and `fit` drops the 720px minimum so the two fit with no sideways scroll. Which two is the page's choice; the table only has to fit.
- [Table · Differences only](https://aureauds.dev/pattern-table-differences-only.md): A switch hides the rows that are the same for every item — the page marks them <tr data-same>, and `differencesOnly` hides them. Removing what does not differ is what makes a long comparison readable.
- [TableOfContents · An index that follows the reading](https://aureauds.dev/pattern-tableofcontents-an-index-that-follows-the-reading.md): It marks the section in view by itself — pass current only when something else owns that state. Sub-items are one level deep and no more: an index that needs three levels is a document that needs splitting.
- [Tabs · Two readings of the same thing](https://aureauds.dev/pattern-tabs-two-readings-of-the-same-thing.md): Tabs are for alternative views of one subject, never for steps — a step has an order and a tab does not. If the user must visit all of them, it was a form, not a tab set.
- [Tabs · A column of sections beside the content](https://aureauds.dev/pattern-tabs-a-column-of-sections-beside-the-content.md): `orientation="vertical"` when the labels are words rather than one-word nouns, or when there are more of them than a row can hold without scrolling. The root becomes a grid and not a row: on a row the panel and the list share a line, and a tall panel would stretch the label column with it.
- [Tabs · When switching a tab costs a request](https://aureauds.dev/pattern-tabs-when-switching-a-tab-costs-a-request.md): With the default, the arrow key switches the panel along with focus — right when the panel is already there. When each tab fetches, that means crossing five tabs fires five requests. `activateOnFocus={false}` is the APG's manual pattern: the arrow only moves focus, and Enter or Space commits. The choice belongs to the panel's cost, not to taste.
- [Textarea · A description field that grows](https://aureauds.dev/pattern-textarea-a-description-field-that-grows.md): Rows set the starting height, not the limit. The field keeps the pill radius of every other control, because a text area is still a field — the shape changes only when it becomes a composition box with its own toolbar.
- [Timeline · What happened to this record](https://aureauds.dev/pattern-timeline-what-happened-to-this-record.md): An ordered list because the order carries meaning: a screen reader announces "item 2 of 5" and the reader knows where in the story they are. A stack of divs would say the same words and lose that.
- [Timeline · Entries that carry their own outcome](https://aureauds.dev/pattern-timeline-entries-that-carry-their-own-outcome.md): `title` takes a node, so an entry can say what it was and how it went in one line. This is the difference between a log the reader has to interpret and an audit trail they can scan.
- [Timeline · The activity panel of a detail page](https://aureauds.dev/pattern-timeline-the-activity-panel-of-a-detail-page.md): Beside the record, not under it: the timeline answers "what has been done to this" while the page answers "what is this". Putting it in a card of its own is what keeps the two questions from running together.
- [Toggle · A button that stays pressed](https://aureauds.dev/pattern-toggle-a-button-that-stays-pressed.md): Two states the user flips and reads back from the button itself. It is not a Switch: a switch applies a setting, a toggle marks the thing under the cursor.
- [ToggleGroup · The alignment row of an editor](https://aureauds.dev/pattern-togglegroup-the-alignment-row-of-an-editor.md): Arrow keys walk the group and only one alignment can be true at a time. With multiple it becomes a filter bar where none selected is legitimate — the same component, a different contract.
- [Toolbar · Formatting bar](https://aureauds.dev/pattern-toolbar-formatting-bar.md): Style and align in named groups, one tab stop for the whole bar.
- [Toolbar · Table header bar](https://aureauds.dev/pattern-toolbar-table-header-bar.md): Search on one side, actions on the other — the bar that heads a collection.
- [Toolbar · Side rail](https://aureauds.dev/pattern-toolbar-side-rail.md): A column of tools beside a canvas: up and down navigate, the separator turns with the axis.
- [Toolbar · Undo and redo](https://aureauds.dev/pattern-toolbar-undo-and-redo.md): History with the unavailable step kept in place, so the arrows never renumber the set.
- [ToolbarButton · A toggle that stays pressed](https://aureauds.dev/pattern-toolbarbutton-a-toggle-that-stays-pressed.md): `pressed` emits `aria-pressed`, so the state is announced and not only shaded. This is the whole reason a formatting bar uses ToolbarButton instead of a styled div: bold-is-on has to be a fact, not an appearance.
- [ToolbarButton · An unavailable step kept in place](https://aureauds.dev/pattern-toolbarbutton-an-unavailable-step-kept-in-place.md): `disabled` on the step that cannot run — never removing it. A bar whose buttons come and go renumbers itself under the reader's hand, and the muscle memory that a toolbar exists to build never forms.
- [ToolbarButton · The one action that is not a tool](https://aureauds.dev/pattern-toolbarbutton-the-one-action-that-is-not-a-tool.md): A toolbar is mostly ghost buttons because they are peers; the moment one of them is the point of the screen it takes a tone of its own. One per bar — a bar of primaries has no primary.
- [Tooltip · Naming an icon-only control](https://aureauds.dev/pattern-tooltip-naming-an-icon-only-control.md): The IconButton already carries its accessible name; the tip is what shows that name to everyone else. Two mechanisms, one string — which is why the label and the tip must say the same thing, never two different things.
- [Tooltip · Why a control is unavailable](https://aureauds.dev/pattern-tooltip-why-a-control-is-unavailable.md): A disabled button says no and not why, and a disabled element does not receive focus — so the tip goes on a wrapper that does. Without that the explanation exists only for a mouse, which is the failure this pattern is here to avoid.
- [Tooltip · Spelling out an abbreviated column](https://aureauds.dev/pattern-tooltip-spelling-out-an-abbreviated-column.md): `side="right"` when the trigger sits in a narrow column and a tip above would cover the row being read. The header still has to make sense without the tip: P95 is the label, the tip only expands it.
- [Topbar · The bar that carries the brand and the global actions](https://aureauds.dev/pattern-topbar-the-bar-that-carries-the-brand-and-the-global-actions.md): Brand on the left, actions on the right, and nothing in between that belongs to a single page. The floating variant sits on the content; flush joins the page — pick one per application, not per screen.
- [TreeView · A source tree beside the editor](https://aureauds.dev/pattern-treeview-a-source-tree-beside-the-editor.md): Arrow keys walk it, Right opens a branch and Left closes it — the shape people already know from every file explorer. Only the branch the user is working in starts open.

## Blocks
- [Sign-in panel](https://aureauds.dev/block-sign-in-panel.md): Card with credentials, an inline error slot and one primary action. No password is ever pre-filled.
- [Settings form](https://aureauds.dev/block-settings-form.md): One column of fields, toggles grouped at the end, a single primary action and a ghost escape.
- [Members table](https://aureauds.dev/block-members-table.md): The full collection surface: filter, selection, status per row, row actions and pagination.
- [Empty project state](https://aureauds.dev/block-empty-project-state.md): First run with nothing to show: says what is missing, why, and the one action that fixes it.
- [Stats row](https://aureauds.dev/block-stats-row.md): Four numbers of equal weight above a dashboard. Trend beside the value, never a chart without a number.
- [Pricing row](https://aureauds.dev/block-pricing-row.md): Three plans side by side, the recommended one marked by a Badge — not by a bigger box.
- [Activity panel](https://aureauds.dev/block-activity-panel.md): Who did what, when — identity line, ordered history and the unread count in one surface.
- [Run session panel](https://aureauds.dev/block-run-session-panel.md): One run, end to end: what state it is in, the turns, the tool it is calling, where it resumes from, the receipt it already owns, and only the actions the run can take right now. The approval gate takes the place of the actions while a person has to decide.
- [Review compare](https://aureauds.dev/block-review-compare.md): Nothing changes until someone sees what would change: the difference, the checks that ran on it, the one decision the change can take right now, and the receipt that apply writes and rollback points back to. Additions and deletions are text, so the diff reads the same without colour.
- [Resource workbench](https://aureauds.dev/block-resource-workbench.md): Where resources come from, what is in there, what the selected one is, what is in flight right now, where it all came from, and only the actions this phase allows. The transfer says its phase and its percent in words, so the bar is never the only thing carrying the news.
- [Analytics workbench](https://aureauds.dev/block-analytics-workbench.md): The period, the filters, the segments and the export scope on one line; the number, the curve and the same curve as a table below it. The table is not a fallback and not a tab: a chart without its numbers excludes whoever cannot read the chart.
- [Transaction flow](https://aureauds.dev/block-transaction-flow.md): What is being bought, what it adds up to, which saved method pays for it, and — before anything is charged — the consequence in one sentence. Every terminal result leaves an immutable receipt with the idempotency key, so a double click has an answer. A refund points back at that receipt instead of erasing it.
- [Device control](https://aureauds.dev/block-device-control.md): One device inside its fleet: what it is, what it is reading right now — with the time and the quality of each reading — what a command would reach and what it would do, the calibration with its default and a way back, and who touched it last. Live readings can be paused, and a firmware update asks before it drops the equipment.
- [Media library](https://aureauds.dev/block-media-library.md): One selection shared by the gallery, the detail and the player — never three strings that happen to match. The resume position is a number, the optional capabilities say which ones exist, and the queue can be reordered without touching what is playing. The transport lives in the player and nowhere else.
- [Visual builder](https://aureauds.dev/block-visual-builder.md): A canvas with an ordered outline that says the same thing, so building never requires a mouse: add from the palette, move in the outline, connect in the inspector. Credentials appear as references and never as values. Undo and redo sit beside whatever the state machine actually allows right now.

## Recipes
- [Public site](https://aureauds.dev/recipe-public-site.md)
- [Docs · CMS](https://aureauds.dev/recipe-docs-cms.md)
- [SaaS · admin](https://aureauds.dev/recipe-saas-admin.md)
- [Dashboard · BI](https://aureauds.dev/recipe-dashboard-bi.md)
- [Catalog · gallery](https://aureauds.dev/recipe-catalog-gallery.md)
- [Media · streaming](https://aureauds.dev/recipe-media-streaming.md)
- [Automation · workflow](https://aureauds.dev/recipe-workflow-automation.md)
- [Developer tools](https://aureauds.dev/recipe-developer-tools.md)
- [Files · cloud](https://aureauds.dev/recipe-file-cloud.md)
- [Messaging · social](https://aureauds.dev/recipe-messaging-social.md)
- [Commerce · finance](https://aureauds.dev/recipe-commerce-finance.md)
- [Booking · calendar](https://aureauds.dev/recipe-booking-calendar.md)
- [Maps · logistics](https://aureauds.dev/recipe-maps-logistics.md)
- [IoT · control](https://aureauds.dev/recipe-iot-control.md)
- [Agents · AI](https://aureauds.dev/recipe-agent-ai.md)
- [Projects · CRM/ERP](https://aureauds.dev/recipe-project-crm-erp.md)
- [Education](https://aureauds.dev/recipe-education.md)
- [Personal productivity](https://aureauds.dev/recipe-personal-productivity.md)
- [Mobile · PWA](https://aureauds.dev/recipe-mobile-pwa.md)
- [Support · service](https://aureauds.dev/recipe-support-service.md)
- [Regulated records](https://aureauds.dev/recipe-regulated-records.md)
- [Creative workspace](https://aureauds.dev/recipe-creative-workspace.md)
- [Observability · ops](https://aureauds.dev/recipe-observability-ops.md)

## Releases
- [v0.44.0](https://aureauds.dev/release-v0-44-0.md): The whole sidebar — three ways to collapse, its state outside the AppShell with Ctrl+B, groups that fold, actions, separators, avatars, sections with a panel and five ways to draw the current item.
- [v0.43.0](https://aureauds.dev/release-v0-43-0.md): React Native on the site, with a page for every component; yellow selected states and fixes in React Native; tabs in CodeBlock.
- [v0.42.0](https://aureauds.dev/release-v0-42-0.md): AppShell with the sidebar from top to bottom.
- [v0.41.0](https://aureauds.dev/release-v0-41-0.md): A sidebar with a fixed top and bottom.
- [v0.40.1](https://aureauds.dev/release-v0-40-1.md): The new typeface and the white fields reach React Native.
- [v0.40.0](https://aureauds.dev/release-v0-40-0.md): White fields in the light theme.
- [v0.39.0](https://aureauds.dev/release-v0-39-0.md): A new typeface on the web — Inter for text, Sora for titles and IBM Plex Mono for code.
- [v0.38.0](https://aureauds.dev/release-v0-38-0.md): The legend and the overview of DependencyGraph can step aside, so they no longer cover the devices in the bottom corners.
- [v0.37.1](https://aureauds.dev/release-v0-37-1.md): Wide content no longer widens the page inside DataState, Form and the Dialog body, and field placeholders reach 4.5:1 in the lory brand.
- [v0.37.0](https://aureauds.dev/release-v0-37-0.md): Line numbers and syntax colors for CodeBlock, a brand blue as the accent text in the light theme, and a visible disabled state in seven components.
- [v0.36.0](https://aureauds.dev/release-v0-36-0.md): A page opening for Section, a cookie notice for Banner, Chip as another name for Badge, two larger text tokens, the brand yellow as the accent text in the light theme, and fixes to DependencyGraph and Radio.
- [v0.35.0](https://aureauds.dev/release-v0-35-0.md): A documentation layout for the AppShell, a second row of area tabs in the Header, five docs width tokens, and snapping in the editable DependencyGraph.
- [v0.34.0](https://aureauds.dev/release-v0-34-0.md): No lines. Components no longer draw borders on web or React Native; what needed a border to stand out now gets a translucent fill.
- [v0.33.0](https://aureauds.dev/release-v0-33-0.md): RadioGroup on the web, a three-position ThemeToggle with a system preference, Card parts, soft buttons, a blurred Header, and popups that stay above fixed headers.
- [v0.32.0](https://aureauds.dev/release-v0-32-0.md): Twelve new components, including Slider, ListBox, DatePicker on the web and a full color family; redesigned controls and dialogs; and a 48px touch scale for React Native.
- [v0.31.0](https://aureauds.dev/release-v0-31-0.md): Editing for the DependencyGraph - drag, align and pin nodes, undo, containers that collapse, routed edges, tree and radial layouts, and options for large graphs.
- [v0.30.0](https://aureauds.dev/release-v0-30-0.md): Reading large graphs with the DependencyGraph - vertical layered layout, icons, badges and ports, edges that explain themselves without color, minimap, path highlight and export.
- [v0.29.0](https://aureauds.dev/release-v0-29-0.md): A Card that stands out in both themes, a colored accent strip on top of cards, and a fix for dark sections inside the lory brand.
- [v0.28.0](https://aureauds.dev/release-v0-28-0.md): Share buttons that fall back to copying the link, a phone frame for screenshots, an extra-bold weight and tabular numbers.
- [v0.27.0](https://aureauds.dev/release-v0-27-0.md): New neutral and status colors for both themes, with separate tokens for fills and text. Also ships v0.26.0 (category badges, KPI direction) and v0.26.1.
- [v0.25.0](https://aureauds.dev/release-v0-25-0.md): Focus is drawn as a single line instead of border plus ring, and the selected tab is finally visible against its track.
- [v0.24.1](https://aureauds.dev/release-v0-24-1.md): Fixes the anchored Badge in React Native and the KPI number size on the web, and adds a CSS variable for chart text size.
- [v0.24.0](https://aureauds.dev/release-v0-24-0.md): Comparison tables: sticky header and first column, a two-item mobile fit, a "differences only" switch, and styling for groups and best values.
- [v0.23.0](https://aureauds.dev/release-v0-23-0.md): Topbar is renamed Header (the old name still works), with a site header that collapses into a mobile menu, and a site footer section.
- [v0.22.0](https://aureauds.dev/release-v0-22-0.md): Layout parts for site pages (Container, Grid.Item span, Section with surface and theme). Also ships v0.21.0 and v0.20.0.
- [v0.19.1](https://aureauds.dev/release-v0-19-1.md): Fixes square BottomNav indicators on Android. Also ships v0.19.0: lazy TreeView, batch Gallery, attachments and replies in chat, long conversations.
- [v0.18.0](https://aureauds.dev/release-v0-18-0.md): Indeterminate Progress with detail and tone, named Grid minimums, NavList avatars and indicators, and a collapsible AppShell sidebar.
- [v0.17.0](https://aureauds.dev/release-v0-17-0.md): BottomNav no longer shifts when switching tabs, is shorter with labels closer to icons, and gains the capsule and expand indicators.
- [v0.16.1](https://aureauds.dev/release-v0-16-1.md): Fixes the BottomNav circle-bold indicator, which collapsed into a thin line in the browser and cut the label on the compact bar.
- [v0.16.0](https://aureauds.dev/release-v0-16-0.md): In the light theme, emphasis text and icons move from brown to a darkened brand yellow that still meets 4.5:1 contrast.
- [v0.15.0](https://aureauds.dev/release-v0-15-0.md): React Native gets custom icon components in every icon prop, a richer Timeline, a new FileInput, and a PhotoInput that opens the photo.
- [v0.14.1](https://aureauds.dev/release-v0-14-1.md): A busy IconButton now shows only a centred spinner. Also ships v0.14.0, with new React Native props for Tabs, Combobox, NumberField and RadioGroup.
- [v0.13.0](https://aureauds.dev/release-v0-13-0.md): New typeface and icon set. Atkinson Hyperlegible Next replaces IBM Plex, and Phosphor icons replace Carbon. Icon names change.
- [v0.12.4](https://aureauds.dev/release-v0-12-4.md): React Native components running in the browser now expose their state to screen readers through aria attributes.
- [v0.12.3](https://aureauds.dev/release-v0-12-3.md): Adds RadioGroup to React Native, with full-row touch targets and the indicator at the start or end of each row.
- [v0.12.2](https://aureauds.dev/release-v0-12-2.md): The BottomNav is shorter on the web and in React Native, with the icon closer to its label.
- [v0.12.1](https://aureauds.dev/release-v0-12-1.md): React Native fixes for bottom sheets and Grid, plus LinkButton. Also ships v0.12.0 with typed icon names, round icon buttons, ThemeToggle and text components.
- [v0.11.0](https://aureauds.dev/release-v0-11-0.md): React Native fixes for Android (clipped button text, lists that did not scroll, sheets behind system buttons), new Badge sizes and centred Radio and Checkbox marks.
- [v0.10.1](https://aureauds.dev/release-v0-10-1.md): criarGlifo can now draw stroked shapes, so line-drawn logos work in React Native without importing an SVG library.
- [v0.10.0](https://aureauds.dev/release-v0-10-0.md): Web layout additions for Topbar, AppShell, Field and Card, a clearer current item in the Sidebar, and a fix for a stretched top bar.
- [v0.9.0](https://aureauds.dev/release-v0-9-0.md): Layout props for the web primitives, Button, Card, Separator and Dialog. The default Dialog width changes from 560 to 448.
- [v0.8.14](https://aureauds.dev/release-v0-8-14.md): Additive props for Badge, Cluster, Topbar and Screen, a shared disabled-opacity token, and criarGlifo for custom glyphs in React Native.
- [v0.8.13](https://aureauds.dev/release-v0-8-13.md): The React Native Card responds to taps with onPress, and the BottomNav can size itself to its tabs with width="content".
- [v0.8.12](https://aureauds.dev/release-v0-8-12.md): A new type scale (12 to 48). Web components return to 14 pixels, while React Native components use 16.
- [v0.8.11](https://aureauds.dev/release-v0-8-11.md): Adds MediaEmbed, which shows a video from another site (YouTube, Vimeo) in Aurea's frame, with an optional poster that loads nothing until clicked.
- [v0.8.10](https://aureauds.dev/release-v0-8-10.md): Select gets Aurea's own skin and floating list instead of the browser's native control. Also ships v0.8.9, with navItems on AppShell and labelWidth on Field.
- [v0.8.8](https://aureauds.dev/release-v0-8-8.md): Web fixes for Combobox, the mobile drawer, DependencyGraph and DataGrid, React Native fixes found on Android, BottomNavProvider, and a new type scale.
- [v0.8.7](https://aureauds.dev/release-v0-8-7.md): In React Native, the brand Card now keeps its fields, buttons and focus readable on the yellow, and menus or sheets opened from inside it no longer inherit its colors.
- [v0.8.6](https://aureauds.dev/release-v0-8-6.md): React Native gets a yellow brand Card that requires an action, and SegmentedControl and Tabs now scroll sideways with a visible hint when the options do not fit.
- [v0.8.5](https://aureauds.dev/release-v0-8-5.md): React Native gets Tabs, new props on Badge, Switch and NavList, and fixes for controls that VoiceOver on iPhone could not reach.
- [v0.8.4](https://aureauds.dev/release-v0-8-4.md): In React Native, the Combobox clear button is reachable by VoiceOver on iPhone, and the arrow now opens the list.
- [v0.8.3](https://aureauds.dev/release-v0-8-3.md): React Native fixes for brand and destructive text contrast and for Input dropping props, plus Separator, a link tone on Text and new PasswordField props.
- [v0.8.2](https://aureauds.dev/release-v0-8-2.md): React Native gets InputGroup, InputGroupAddon and PasswordField, and Button accepts any drawing in leading and trailing.
- [v0.8.1](https://aureauds.dev/release-v0-8-1.md): React Native fixes for NumberField focus and width, the Combobox sheet hidden behind the iOS keyboard, and hard-coded sheet heights.
- [v0.8.0](https://aureauds.dev/release-v0-8-0.md): Five new React Native components (Combobox, SearchField, NumberField, Image and Gallery), number formatting helpers and new strings, with no new dependencies.
- [v0.7.0](https://aureauds.dev/release-v0-7-0.md): The first release of @aurea-uds/native, with 46 React Native components, plus fixes for crashing accessibility roles and a theme switch that got out of sync on the web.
- [v0.6.0](https://aureauds.dev/release-v0-6-0.md): Nine new web components, menus with submenus, checkboxes and radio groups, new hooks, and one breaking change: size on field components is now sm, md or lg.
- [v0.5.0](https://aureauds.dev/release-v0-5-0.md): Brands arrive as a second axis next to the theme, starting with lory, and the sidebar now paints itself with its own tokens.
- [v0.4.0](https://aureauds.dev/release-v0-4-0.md): BottomNav, NavList and Separator arrive, Badge is rewritten, Sidebar gains a flush variant, and Button's pressed prop is deprecated in favor of Toggle.
- [v0.3.0](https://aureauds.dev/release-v0-3-0.md): Eleven new components, including BlockEditor, Carousel, CommandPalette and Form, server rendering for 22 markup components, a React Native token target and accessibility fixes in Field and Toggle.
- [v0.2.0](https://aureauds.dev/release-v0-2-0.md): React Server Components support, 27 new components including a new AI and Agents category, a server-backed DataGrid, universal states and five breaking changes.
- [v0.1.0](https://aureauds.dev/release-v0-1-0.md): The first public release of Aurea UDS, published as six packages on npm.